{"componentChunkName":"component---src-templates-docs-jsx","path":"/components/dropdown","result":{"data":{"site":{"siteMetadata":{"title":"Gympass Design System"}},"mdx":{"fields":{"id":"d63b5610-cce6-580f-9dd2-944b66c3877c","title":"Dropdown","slug":"/components/components/dropdown/"},"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Dropdown\",\n  \"metaTitle\": \"Dropdown\",\n  \"metaDescription\": \"Dropdown Component\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar TabbedView = makeShortcode(\"TabbedView\");\nvar Tab = makeShortcode(\"Tab\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"dropdown\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#dropdown\",\n    \"aria-label\": \"dropdown permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Dropdown\"), mdx(TabbedView, {\n    mdxType: \"TabbedView\"\n  }, mdx(Tab, {\n    title: \"Web\",\n    mdxType: \"Tab\"\n  }, mdx(DropdownWeb, {\n    mdxType: \"DropdownWeb\"\n  })), mdx(Tab, {\n    title: \"Native\",\n    mdxType: \"Tab\"\n  }, mdx(DropdownNative, {\n    mdxType: \"DropdownNative\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#dropdown","title":"Dropdown"}]},"parent":{"__typename":"File","relativePath":"components/components/dropdown/index.mdx"},"frontmatter":{"metaTitle":"Dropdown","metaDescription":"Dropdown Component"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/system/","title":"Yoga System","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/","title":"Guidelines","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/borders","title":"Borders","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/breakpoints","title":"Breakpoints","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/colors","title":"Colors","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/typography","title":"Typography","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/elevations","title":"Elevations","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/font-weights","title":"Font-Weights","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/fonts","title":"Fonts","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/","title":"Design Tokens","linkable":false,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/font-sizes","title":"Font-Sizes","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/line-heights","title":"Line-Heights","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/radii","title":"Shapes","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/spacing","title":"Spacing","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/","title":"Components","linkable":false,"order":4,"open":true}}},{"node":{"fields":{"slug":"/components/helpers/media","title":"Media","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/helpers/","title":"Helpers","linkable":false,"order":3,"open":true}}},{"node":{"fields":{"slug":"/components/getting-started/","title":"Getting started","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/icons/","title":"Icons","linkable":true,"order":2,"open":true}}},{"node":{"fields":{"slug":"/components/illustrations/","title":"Illustrations","linkable":true,"order":2,"open":true}}},{"node":{"fields":{"slug":"/components/theming/borders","title":"Borders","linkable":true,"order":4,"open":true}}},{"node":{"fields":{"slug":"/components/theming/breakpoints","title":"Breakpoints","linkable":true,"order":5,"open":true}}},{"node":{"fields":{"slug":"/components/theming/colors","title":"Colors","linkable":true,"order":6,"open":true}}},{"node":{"fields":{"slug":"/components/theming/elevations","title":"Elevations","linkable":true,"order":7,"open":true}}},{"node":{"fields":{"slug":"/components/theming/font-weights","title":"Font-weights","linkable":true,"order":9,"open":true}}},{"node":{"fields":{"slug":"/components/theming/font-sizes","title":"Font-sizes","linkable":true,"order":8,"open":true}}},{"node":{"fields":{"slug":"/components/theming/fonts","title":"Fonts","linkable":true,"order":10,"open":true}}},{"node":{"fields":{"slug":"/components/theming/","title":"Theming","linkable":false,"order":1,"open":false}}},{"node":{"fields":{"slug":"/components/theming/line-heights","title":"Line-heights","linkable":true,"order":11,"open":true}}},{"node":{"fields":{"slug":"/components/theming/shapes","title":"Shapes","linkable":true,"order":12,"open":true}}},{"node":{"fields":{"slug":"/components/theming/spacing","title":"Spacing","linkable":true,"order":13,"open":true}}},{"node":{"fields":{"slug":"/components/theming/theme","title":"Theme","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/theming/themeGenerator","title":"Theme Generator","linkable":true,"order":3,"open":true}}},{"node":{"fields":{"slug":"/components/theming/themereader","title":"ThemeReader","linkable":true,"order":2,"open":true}}},{"node":{"fields":{"slug":"/components/theming/themeProvider","title":"ThemeProvider","linkable":true,"order":1,"open":true}}},{"node":{"fields":{"slug":"/system/getting-started/","title":"Getting Started","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/backgroundColor","title":"BackgroundColor","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/border","title":"Border","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/elevation","title":"Elevation","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/","title":"System","linkable":false,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/layout","title":"Layout","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/flex","title":"Flex","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/overflow","title":"Overflow","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/spacing","title":"Spacing","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/typography","title":"Typography","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/accordion/","title":"Accordion","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/actionrequirement/","title":"ActionRequirement","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/autocomplete/","title":"AutoComplete","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/avatar/","title":"Avatar","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/banner/","title":"Banner","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/bottomsheet/","title":"BottomSheet","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/default","title":"Simple","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/eventcard","title":"Event","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/","title":"Card","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/box/","title":"Box","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/plancard","title":"Plan","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/button/default","title":"Button","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/button/","title":"Button","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/button/icon","title":"Icon","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/button/link","title":"Link","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/button/outline","title":"Outline","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/button/text","title":"Text","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/chips/","title":"Chips","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/checkbox/default","title":"Checkbox","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/checkbox/","title":"Checkbox","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/checkbox/switch","title":"Switch","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/datepicker/","title":"Datepicker","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/dialog/","title":"Dialog","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/drawer/","title":"Drawer","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/dropdown/","title":"Dropdown","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/divider/","title":"Divider","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/feedback/","title":"Feedback","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/header/","title":"Header","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/icon/","title":"Icon","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/heading/","title":"Heading","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/grid/","title":"Grid","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/list/","title":"List","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/email","title":"Email","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/default","title":"Default","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/","title":"Input","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/input/number","title":"Number","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/password","title":"Password","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/phone","title":"Phone","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/tel","title":"Tel","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/navigationmenu/","title":"NavigationMenu","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/menu/","title":"Menu","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/progress/","title":"Progress","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/popover/","title":"Popover","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/radiogroup/button","title":"Button","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/radiogroup/","title":"RadioGroup","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/radiogroup/radio","title":"Radio","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/rating/","title":"Rating","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/result/","title":"Result","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/skeleton/","title":"Skeleton","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/slider/","title":"Slider","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/snackbar/","title":"Snackbar","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/spinner/","title":"Spinner","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/stepper/","title":"Stepper","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/tag/default","title":"Tag","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/tag/","title":"Tag","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/tag/informative","title":"Informative","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/text/","title":"Text","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/textarea/","title":"TextArea","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/gym/checkin","title":"Check-in","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/gym/","title":"Gym","linkable":false,"order":0,"open":false}}}]}},"pageContext":{"id":"d63b5610-cce6-580f-9dd2-944b66c3877c"}},"staticQueryHashes":["2575950596","2575950596","878412135","878412135"]}