{"componentChunkName":"component---src-templates-docs-jsx","path":"/components/datepicker","result":{"data":{"site":{"siteMetadata":{"title":"Gympass Design System"}},"mdx":{"fields":{"id":"c770e70c-f017-5bbb-a3f3-35f861cac6b5","title":"Datepicker","slug":"/components/components/datepicker/"},"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\": \"Datepicker\",\n  \"metaTitle\": \"Datepicker\",\n  \"metaDescription\": \"Datepicker 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 PropsTable = makeShortcode(\"PropsTable\");\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\": \"datepicker\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#datepicker\",\n    \"aria-label\": \"datepicker 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  }))), \"Datepicker\"), mdx(\"h3\", {\n    \"id\": \"reference\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#reference\",\n    \"aria-label\": \"reference 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  }))), \"Reference\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<Datepicker />\"), \" component is a date picker that allows the user to select a single date or a range of dates.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"startDate\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"endDate\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disablePastFrom\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disableFutureFrom\"), \" are expected to be in the UTC \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"Date\")), \" format.\"), mdx(\"h3\", {\n    \"id\": \"usage\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#usage\",\n    \"aria-label\": \"usage 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  }))), \"Usage\"), mdx(\"h3\", {\n    \"id\": \"single-date-datepicker-with-locale\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#single-date-datepicker-with-locale\",\n    \"aria-label\": \"single date datepicker with locale 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  }))), \"Single date Datepicker with locale\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [selectedDate, setSelectedDate] = useState();\\n\\n  return (\\n    <Datepicker\\n      type=\\\"single\\\"\\n      startDate={selectedDate}\\n      onSelectSingle={setSelectedDate}\\n      locale={navigator.language}\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"range-date-datepicker\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#range-date-datepicker\",\n    \"aria-label\": \"range date datepicker 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  }))), \"Range date Datepicker\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [startDate, setStartDate] = useState();\\n  const [endDate, setEndDate] = useState();\\n\\n  const onSelectRange = (startDate, endDate) => {\\n    console.log({ startDate, endDate });\\n  };\\n\\n  return (\\n    <Datepicker\\n      type=\\\"range\\\"\\n      startDate={startDate}\\n      endDate={endDate}\\n      onSelectRange={onSelectRange}\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"range-date-datepicker-with-custom-onselectrange\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#range-date-datepicker-with-custom-onselectrange\",\n    \"aria-label\": \"range date datepicker with custom onselectrange 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  }))), \"Range date Datepicker with custom onSelectRange\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [startDate, setStartDate] = useState();\\n  const [endDate, setEndDate] = useState();\\n\\n  const onCustomSelectRange = selectedDate => {\\n    console.log({ selectedDate });\\n    if (!startDate || (startDate > selectedDate && !endDate) || endDate) {\\n      setStartDate(selectedDate);\\n      if (endDate) setEndDate(undefined);\\n    } else {\\n      setEndDate(selectedDate);\\n    }\\n  };\\n\\n  return (\\n    <Datepicker\\n      type=\\\"range\\\"\\n      startDate={startDate}\\n      endDate={endDate}\\n      customOnSelectRange={onCustomSelectRange}\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"single-datepicker-with-default-selected-date\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#single-datepicker-with-default-selected-date\",\n    \"aria-label\": \"single datepicker with default selected date 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  }))), \"Single Datepicker with default selected date\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const d = new Date();\\n  const dateUTC = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));\\n  d.setDate(dateUTC.getDate() + 2);\\n  const [selectedDate, setSelectedDate] = useState(dateUTC);\\n\\n  return (\\n    <Datepicker\\n      type=\\\"single\\\"\\n      startDate={selectedDate}\\n      onSelectSingle={setSelectedDate}\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"range-datepicker-with-default-start-date-and-end-date\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#range-datepicker-with-default-start-date-and-end-date\",\n    \"aria-label\": \"range datepicker with default start date and end date 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  }))), \"Range Datepicker with default start date and end date\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const start = new Date();\\n  const end = new Date();\\n  const startUTC = new Date(Date.UTC(start.getFullYear(), start.getMonth(), start.getDate()));\\n  const endUTC = new Date(Date.UTC(end.getFullYear(), end.getMonth(), end.getDate()));\\n\\n  endUTC.setDate(startUTC.getDate() + 15);\\n  const [startDate, setStartDate] = useState(startUTC);\\n  const [endDate, setEndDate] = useState(endUTC);\\n\\n  const onSelectRange = (startDate, endDate) => {\\n    console.log({ startDate, endDate });\\n  };\\n\\n  return (\\n    <Datepicker\\n      type=\\\"range\\\"\\n      startDate={startDate}\\n      endDate={endDate}\\n      onSelectRange={onSelectRange}\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"single-datepicker-with-custom-placeholder\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#single-datepicker-with-custom-placeholder\",\n    \"aria-label\": \"single datepicker with custom placeholder 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  }))), \"Single Datepicker with custom placeholder\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [selectedDate, setSelectedDate] = useState();\\n\\n  return (\\n    <Datepicker\\n      type=\\\"single\\\"\\n      startDate={selectedDate}\\n      onSelectSingle={setSelectedDate}\\n      placeholder=\\\"This is a custom placeholder :)\\\"\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"datepicker-with-past-dates-disabled\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#datepicker-with-past-dates-disabled\",\n    \"aria-label\": \"datepicker with past dates disabled 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  }))), \"Datepicker with past dates disabled\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [selectedDate, setSelectedDate] = useState();\\n\\n  return (\\n    <Datepicker\\n      type=\\\"single\\\"\\n      startDate={selectedDate}\\n      onSelectSingle={setSelectedDate}\\n      disablePastDates\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"datepicker-with-future-dates-disabled\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#datepicker-with-future-dates-disabled\",\n    \"aria-label\": \"datepicker with future dates disabled 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  }))), \"Datepicker with future dates disabled\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [selectedDate, setSelectedDate] = useState();\\n\\n  return (\\n    <Datepicker\\n      type=\\\"single\\\"\\n      startDate={selectedDate}\\n      onSelectSingle={setSelectedDate}\\n      disableFutureDates\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"datepicker-with-past-dates-disabled-from-a-specific-date\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#datepicker-with-past-dates-disabled-from-a-specific-date\",\n    \"aria-label\": \"datepicker with past dates disabled from a specific date 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  }))), \"Datepicker with past dates disabled from a specific date\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [selectedDate, setSelectedDate] = useState();\\n  const d = new Date();\\n  const dateUTC = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));\\n  dateUTC.setDate(dateUTC.getDate() + 4);\\n\\n  return (\\n    <Datepicker\\n      type=\\\"single\\\"\\n      startDate={selectedDate}\\n      onSelectSingle={setSelectedDate}\\n      disablePastFrom={dateUTC}\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"datepicker-with-future-dates-disabled-from-a-specific-date\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#datepicker-with-future-dates-disabled-from-a-specific-date\",\n    \"aria-label\": \"datepicker with future dates disabled from a specific date 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  }))), \"Datepicker with future dates disabled from a specific date\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [selectedDate, setSelectedDate] = useState();\\n  const d = new Date();\\n  const dateUTC = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));\\n  dateUTC.setDate(dateUTC.getDate() - 4);\\n\\n  return (\\n    <Datepicker\\n      type=\\\"single\\\"\\n      startDate={selectedDate}\\n      onSelectSingle={setSelectedDate}\\n      disableFutureFrom={dateUTC}\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"datepicker-disabled\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#datepicker-disabled\",\n    \"aria-label\": \"datepicker disabled 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  }))), \"Datepicker disabled\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [selectedDate, setSelectedDate] = useState(new Date());\\n\\n  return (\\n    <Datepicker\\n      type=\\\"single\\\"\\n      startDate={selectedDate}\\n      onSelectSingle={setSelectedDate}\\n      disabled\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"datepicker-with-error\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#datepicker-with-error\",\n    \"aria-label\": \"datepicker with error 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  }))), \"Datepicker with error\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [selectedDate, setSelectedDate] = useState();\\n\\n  return (\\n    <Datepicker\\n      type=\\\"single\\\"\\n      startDate={selectedDate}\\n      onSelectSingle={setSelectedDate}\\n      error=\\\"This is an error!\\\"\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"datepicker-custom-onopen-action\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#datepicker-custom-onopen-action\",\n    \"aria-label\": \"datepicker custom onopen action 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  }))), \"Datepicker custom onOpen action\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [selectedDate, setSelectedDate] = useState();\\n  const onOpen = isOpen => {\\n    alert(`onOpen custom action. isOpen -> ${isOpen}`);\\n  };\\n\\n  return (\\n    <Datepicker\\n      type=\\\"single\\\"\\n      startDate={selectedDate}\\n      onSelectSingle={setSelectedDate}\\n      onOpen={onOpen}\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"range-datepicker-with-display-end-date-only\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#range-datepicker-with-display-end-date-only\",\n    \"aria-label\": \"range datepicker with display end date only 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  }))), \"Range datepicker with display end date only\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"render(() => {\\n  const [startDate, setStartDate] = useState();\\n  const [endDate, setEndDate] = useState();\\n\\n  return (\\n    <Datepicker\\n      type=\\\"range\\\"\\n      startDate={startDate}\\n      endDate={endDate}\\n      displayEndDateOnly\\n    />\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"props\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#props\",\n    \"aria-label\": \"props 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  }))), \"Props\"), mdx(PropsTable, {\n    component: \"Datepicker\",\n    platform: \"web\",\n    mdxType: \"PropsTable\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#datepicker","title":"Datepicker","items":[{"items":[{"url":"#reference","title":"Reference"},{"url":"#usage","title":"Usage"},{"url":"#single-date-datepicker-with-locale","title":"Single date Datepicker with locale"},{"url":"#range-date-datepicker","title":"Range date Datepicker"},{"url":"#range-date-datepicker-with-custom-onselectrange","title":"Range date Datepicker with custom onSelectRange"},{"url":"#single-datepicker-with-default-selected-date","title":"Single Datepicker with default selected date"},{"url":"#range-datepicker-with-default-start-date-and-end-date","title":"Range Datepicker with default start date and end date"},{"url":"#single-datepicker-with-custom-placeholder","title":"Single Datepicker with custom placeholder"},{"url":"#datepicker-with-past-dates-disabled","title":"Datepicker with past dates disabled"},{"url":"#datepicker-with-future-dates-disabled","title":"Datepicker with future dates disabled"},{"url":"#datepicker-with-past-dates-disabled-from-a-specific-date","title":"Datepicker with past dates disabled from a specific date"},{"url":"#datepicker-with-future-dates-disabled-from-a-specific-date","title":"Datepicker with future dates disabled from a specific date"},{"url":"#datepicker-disabled","title":"Datepicker disabled"},{"url":"#datepicker-with-error","title":"Datepicker with error"},{"url":"#datepicker-custom-onopen-action","title":"Datepicker custom onOpen action"},{"url":"#range-datepicker-with-display-end-date-only","title":"Range datepicker with display end date only"},{"url":"#props","title":"Props"}]}]}]},"parent":{"__typename":"File","relativePath":"components/components/datepicker/index.mdx"},"frontmatter":{"metaTitle":"Datepicker","metaDescription":"Datepicker 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":"c770e70c-f017-5bbb-a3f3-35f861cac6b5"}},"staticQueryHashes":["2575950596","2575950596","878412135","878412135"]}