12:[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":[["$","$L20","div-0",{"code":"import { DatePicker } from 'welcome-ui/DatePicker'\n\nconst Example = () => {\n return \n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"DatePicker","pathToFile":"/DatePicker/docs/examples/overview.tsx","withCodeEditor":true}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h2-0",{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"examples","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#examples","textDecoration":{"hover":"underline"},"children":"Examples"}]}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h3-0",{"as":"h3","id":"react-datepicker","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#react-datepicker","textDecoration":{"hover":"underline"},"children":"react-datepicker"}]}],"\n",["$","$L21","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is based on the ","position":{"start":{"line":4,"column":1,"offset":23},"end":{"line":4,"column":20,"offset":42}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/Hacker0x01/react-datepicker"},"children":[{"type":"text","value":"react-datepicker","position":{"start":{"line":4,"column":21,"offset":43},"end":{"line":4,"column":37,"offset":59}}}],"position":{"start":{"line":4,"column":20,"offset":42},"end":{"line":4,"column":86,"offset":108}}},{"type":"text","value":" library.","position":{"start":{"line":4,"column":86,"offset":108},"end":{"line":4,"column":95,"offset":117}}}],"position":{"start":{"line":4,"column":1,"offset":23},"end":{"line":4,"column":95,"offset":117}}},"children":["It is based on the ",["$","$L22","a-0",{"href":"https://github.com/Hacker0x01/react-datepicker","isExternal":true,"rel":"noreferrer noopener","target":"_blank","node":"$12:0:props:children:2:props:children:2:props:node:children:1","children":"react-datepicker"}]," library."]}],"\n",["$","$L21","p-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Note","position":{"start":{"line":6,"column":2,"offset":120},"end":{"line":6,"column":6,"offset":124}}}],"position":{"start":{"line":6,"column":1,"offset":119},"end":{"line":6,"column":7,"offset":125}}},{"type":"text","value":": Pass a value of ","position":{"start":{"line":6,"column":7,"offset":125},"end":{"line":6,"column":25,"offset":143}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null","position":{"start":{"line":6,"column":25,"offset":143},"end":{"line":6,"column":31,"offset":149}}}],"position":{"start":{"line":6,"column":25,"offset":143},"end":{"line":6,"column":31,"offset":149}}},{"type":"text","value":" if you don't want the default value of ","position":{"start":{"line":6,"column":31,"offset":149},"end":{"line":6,"column":71,"offset":189}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Date.now()","position":{"start":{"line":6,"column":71,"offset":189},"end":{"line":6,"column":83,"offset":201}}}],"position":{"start":{"line":6,"column":71,"offset":189},"end":{"line":6,"column":83,"offset":201}}},{"type":"text","value":".","position":{"start":{"line":6,"column":83,"offset":201},"end":{"line":6,"column":84,"offset":202}}}],"position":{"start":{"line":6,"column":1,"offset":119},"end":{"line":6,"column":84,"offset":202}}},"children":[["$","em","em-0",{"children":"Note"}],": Pass a value of ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"null"}]," if you don't want the default value of ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"Date.now()"}],"."]}],"\n",["$","$L20","div-0",{"code":"import { DatePicker } from 'welcome-ui/DatePicker'\n\nconst Example = () => {\n return (\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"DatePicker","pathToFile":"/DatePicker/docs/examples/react-date-picker.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-1",{"as":"h3","id":"give-an-icon","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#give-an-icon","textDecoration":{"hover":"underline"},"children":"Give an Icon"}]}],"\n",["$","$L21","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Add an icon with the ","position":{"start":{"line":12,"column":1,"offset":303},"end":{"line":12,"column":22,"offset":324}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"icon","position":{"start":{"line":12,"column":22,"offset":324},"end":{"line":12,"column":28,"offset":330}}}],"position":{"start":{"line":12,"column":22,"offset":324},"end":{"line":12,"column":28,"offset":330}}},{"type":"text","value":" property","position":{"start":{"line":12,"column":28,"offset":330},"end":{"line":12,"column":37,"offset":339}}}],"position":{"start":{"line":12,"column":1,"offset":303},"end":{"line":12,"column":37,"offset":339}}},"children":["Add an icon with the ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"icon"}]," property"]}],"\n",["$","$L20","div-1",{"code":"import { DatePicker } from 'welcome-ui/DatePicker'\nimport { WttjIcon } from 'welcome-ui/Icons'\n\nconst Example = () => {\n return (\n <>\n } name=\"welcome\" value={new Date()} />\n } iconPlacement=\"right\" name=\"welcome\" value={new Date()} />\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"DatePicker","pathToFile":"/DatePicker/docs/examples/icon.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-2",{"as":"h3","id":"sizes","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#sizes","textDecoration":{"hover":"underline"},"children":"Sizes"}]}],"\n",["$","$L21","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use size propety with option:","position":{"start":{"line":18,"column":1,"offset":420},"end":{"line":18,"column":30,"offset":449}}}],"position":{"start":{"line":18,"column":1,"offset":420},"end":{"line":18,"column":30,"offset":449}}},"children":"Use size propety with option:"}],"\n",["$","$L5","ul-0",{"as":"ul","listStyleType":"disc","mt":"sm","children":["\n",["$","$L5","li-0",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"xs"}]," (24px)"]}],"\n",["$","$L5","li-1",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"sm"}]," (32px)"]}],"\n",["$","$L5","li-2",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"md"}]," (40px - default)"]}],"\n",["$","$L5","li-3",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"lg"}]," (48px)"]}],"\n"]}],"\n",["$","$L20","div-2",{"code":"import { DatePicker } from 'welcome-ui/DatePicker'\nimport { WttjIcon } from 'welcome-ui/Icons'\nimport { Stack } from 'welcome-ui/Stack'\n\nconst Example = () => {\n return (\n \n \n \n \n \n Example with icon\n } name=\"welcome\" size=\"xs\" value={new Date()} />\n } name=\"welcome\" size=\"sm\" value={new Date()} />\n } name=\"welcome\" value={new Date()} />\n } name=\"welcome\" size=\"lg\" value={new Date()} />\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"DatePicker","pathToFile":"/DatePicker/docs/examples/sizes.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-3",{"as":"h3","id":"locales","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#locales","textDecoration":{"hover":"underline"},"children":"Locales"}]}],"\n",["$","$L21","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can change your locale by pass locale property from date-fns.","position":{"start":{"line":29,"column":1,"offset":600},"end":{"line":29,"column":66,"offset":665}}}],"position":{"start":{"line":29,"column":1,"offset":600},"end":{"line":29,"column":66,"offset":665}}},"children":"You can change your locale by pass locale property from date-fns."}],"\n",["$","div","pre-0",{"children":["$","$L23","code-0",{"language":"jsx","children":"import dateFR from 'date-fns/locale/fr'\n\nfunction () {\n return (\n \n )\n}\n"}]}],"\n",["$","$Lf","h3-4",{"as":"h3","id":"transparent","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#transparent","textDecoration":{"hover":"underline"},"children":"Transparent"}]}],"\n",["$","$L21","p-5",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pass ","position":{"start":{"line":43,"column":1,"offset":837},"end":{"line":43,"column":6,"offset":842}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"transparent","position":{"start":{"line":43,"column":6,"offset":842},"end":{"line":43,"column":19,"offset":855}}}],"position":{"start":{"line":43,"column":6,"offset":842},"end":{"line":43,"column":19,"offset":855}}},{"type":"text","value":" to remove background-color and border-color","position":{"start":{"line":43,"column":19,"offset":855},"end":{"line":43,"column":63,"offset":899}}}],"position":{"start":{"line":43,"column":1,"offset":837},"end":{"line":43,"column":63,"offset":899}}},"children":["Pass ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"transparent"}]," to remove background-color and border-color"]}],"\n",["$","$L20","div-3",{"code":"import { DatePicker } from 'welcome-ui/DatePicker'\n\nconst Example = () => {\n return \n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"DatePicker","pathToFile":"/DatePicker/docs/examples/transparent.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-5",{"as":"h3","id":"only-display-months","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#only-display-months","textDecoration":{"hover":"underline"},"children":"Only display months"}]}],"\n",["$","$L21","p-6",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pass ","position":{"start":{"line":49,"column":1,"offset":1001},"end":{"line":49,"column":6,"offset":1006}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"showMonthYearPicker","position":{"start":{"line":49,"column":6,"offset":1006},"end":{"line":49,"column":27,"offset":1027}}}],"position":{"start":{"line":49,"column":6,"offset":1006},"end":{"line":49,"column":27,"offset":1027}}},{"type":"text","value":" to only display months, without days","position":{"start":{"line":49,"column":27,"offset":1027},"end":{"line":49,"column":64,"offset":1064}}}],"position":{"start":{"line":49,"column":1,"offset":1001},"end":{"line":49,"column":64,"offset":1064}}},"children":["Pass ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"showMonthYearPicker"}]," to only display months, without days"]}],"\n",["$","$L20","div-4",{"code":"import { DatePicker } from 'welcome-ui/DatePicker'\n\nconst Example = () => {\n return \n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"DatePicker","pathToFile":"/DatePicker/docs/examples/months.tsx","withCodeEditor":true}]]}]]}],["$","$L24",null,{"isSubPage":true,"tree":[{"href":"#","id":"definition","title":"Definition"},{"href":"#installation","id":"installation","title":"Installation"},{"href":"#examples","id":"examples","title":"Examples","children":[{"href":"#react-datepicker","id":"react-datepicker","title":"react-datepicker"},{"href":"#give-an-icon","id":"give-an-icon","title":"Give an Icon"},{"href":"#sizes","id":"sizes","title":"Sizes"},{"href":"#locales","id":"locales","title":"Locales"},{"href":"#transparent","id":"transparent","title":"Transparent"},{"href":"#only-display-months","id":"only-display-months","title":"Only display months"}]}]}]]