0:["$","$L3",null,{"buildId":"NW2wM5FRkiD0FXxAKHe6x","assetPrefix":"","urlParts":["","components","drawer"],"initialTree":["",{"children":["components",{"children":[["id","drawer","d"],{"children":["__PAGE__?{\"id\":\"drawer\"}",{}]}]}]},"$undefined","$undefined",true],"initialSeedData":["",{"children":["components",{"children":[["id","drawer","d"],{"children":["__PAGE__",{},[["$L4",[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":["$","$L6",null,{"code":"import * as React from 'react'\nimport { Drawer, useDrawer } from '@welcome-ui/drawer'\nimport { Button } from '@welcome-ui/button'\n\nconst Example = () => {\n const drawer = useDrawer()\n\n return (\n <>\n \n Open Drawer\n \n \n Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis aliquam\n nec, convallis sit amet erat. Mauris auctor blandit porta.\n \n \n )\n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"Drawer","pathToFile":"/Drawer/docs/examples/overview.tsx","withCodeEditor":true}]}],["$","$L7",null,{"packageName":"drawer","usage":"Drawer, useDrawer"}],["$","$L5",null,{"maxW":"100%","children":["$","$L8",null,{"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":[["$","$L9","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The most basic drawer needs ","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":29,"offset":29}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useDrawer()","position":{"start":{"line":2,"column":29,"offset":29},"end":{"line":2,"column":42,"offset":42}}}],"position":{"start":{"line":2,"column":29,"offset":29},"end":{"line":2,"column":42,"offset":42}}},{"type":"text","value":", ","position":{"start":{"line":2,"column":42,"offset":42},"end":{"line":2,"column":44,"offset":44}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":2,"column":44,"offset":44},"end":{"line":2,"column":64,"offset":64}}}],"position":{"start":{"line":2,"column":44,"offset":44},"end":{"line":2,"column":64,"offset":64}}},{"type":"text","value":" and ","position":{"start":{"line":2,"column":64,"offset":64},"end":{"line":2,"column":69,"offset":69}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":2,"column":69,"offset":69},"end":{"line":2,"column":81,"offset":81}}}],"position":{"start":{"line":2,"column":69,"offset":69},"end":{"line":2,"column":81,"offset":81}}},{"type":"text","value":". If you don't want a backdrop to be visible, please provide it a ","position":{"start":{"line":2,"column":81,"offset":81},"end":{"line":2,"column":147,"offset":147}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"withBackdrop","position":{"start":{"line":2,"column":147,"offset":147},"end":{"line":2,"column":161,"offset":161}}}],"position":{"start":{"line":2,"column":147,"offset":147},"end":{"line":2,"column":161,"offset":161}}},{"type":"text","value":" prop set to ","position":{"start":{"line":2,"column":161,"offset":161},"end":{"line":2,"column":174,"offset":174}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false","position":{"start":{"line":2,"column":174,"offset":174},"end":{"line":2,"column":181,"offset":181}}}],"position":{"start":{"line":2,"column":174,"offset":174},"end":{"line":2,"column":181,"offset":181}}},{"type":"text","value":". Backdrop allows us to have a smooth scroll across all browsers by wrapping the Drawer. This way, the Drawer can be absolutely positioned in the fixed Backdrop wrapper.","position":{"start":{"line":2,"column":181,"offset":181},"end":{"line":2,"column":350,"offset":350}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":350,"offset":350}}},"children":["The most basic drawer needs ",["$","$L5",null,{"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":"useDrawer()"}],", ",["$","$L5",null,{"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":""}]," and ",["$","$L5",null,{"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":""}],". If you don't want a backdrop to be visible, please provide it a ",["$","$L5",null,{"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":"withBackdrop"}]," prop set to ",["$","$L5",null,{"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":"false"}],". Backdrop allows us to have a smooth scroll across all browsers by wrapping the Drawer. This way, the Drawer can be absolutely positioned in the fixed Backdrop wrapper."]}],"\n",["$","$L8",null,{"as":"h3","id":"backdrop","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#backdrop","textDecoration":{"hover":"underline"},"children":"Backdrop"}]}],"\n",["$","$L9","p-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You have to add on ","position":{"start":{"line":6,"column":1,"offset":366},"end":{"line":6,"column":20,"offset":385}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":6,"column":20,"offset":385},"end":{"line":6,"column":32,"offset":397}}}],"position":{"start":{"line":6,"column":20,"offset":385},"end":{"line":6,"column":32,"offset":397}}},{"type":"text","value":" a prop ","position":{"start":{"line":6,"column":32,"offset":397},"end":{"line":6,"column":40,"offset":405}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"withBackdrop","position":{"start":{"line":6,"column":40,"offset":405},"end":{"line":6,"column":54,"offset":419}}}],"position":{"start":{"line":6,"column":40,"offset":405},"end":{"line":6,"column":54,"offset":419}}},{"type":"text","value":". This adds our backdrop ","position":{"start":{"line":6,"column":54,"offset":419},"end":{"line":6,"column":79,"offset":444}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":6,"column":79,"offset":444},"end":{"line":6,"column":100,"offset":465}}}],"position":{"start":{"line":6,"column":79,"offset":444},"end":{"line":6,"column":100,"offset":465}}},{"type":"text","value":" on the drawer. You can also add a custom wrapper with the property ","position":{"start":{"line":6,"column":100,"offset":465},"end":{"line":6,"column":168,"offset":533}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"backdrop","position":{"start":{"line":6,"column":168,"offset":533},"end":{"line":6,"column":178,"offset":543}}}],"position":{"start":{"line":6,"column":168,"offset":533},"end":{"line":6,"column":178,"offset":543}}},{"type":"text","value":".","position":{"start":{"line":6,"column":178,"offset":543},"end":{"line":6,"column":179,"offset":544}}}],"position":{"start":{"line":6,"column":1,"offset":366},"end":{"line":6,"column":179,"offset":544}}},"children":["You have to add on ",["$","$L5",null,{"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":""}]," a prop ",["$","$L5",null,{"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":"withBackdrop"}],". This adds our backdrop ",["$","$L5",null,{"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":""}]," on the drawer. You can also add a custom wrapper with the property ",["$","$L5",null,{"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":"backdrop"}],"."]}],"\n",["$","$L6",null,{"code":"import * as React from 'react'\nimport { Drawer, useDrawer } from '@welcome-ui/drawer'\nimport { Button } from '@welcome-ui/button'\n\nconst Example = () => {\n const drawer = useDrawer()\n\n return (\n <>\n \n Open Drawer with backdrop\n \n \n Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis aliquam\n nec, convallis sit amet erat. Mauris auctor blandit porta.\n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Drawer","pathToFile":"/Drawer/docs/examples/backdrop.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h3","id":"layout","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#layout","textDecoration":{"hover":"underline"},"children":"Layout"}]}],"\n",["$","$L9","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We provide basic layout components for your drawer: ","position":{"start":{"line":12,"column":1,"offset":626},"end":{"line":12,"column":53,"offset":678}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":12,"column":53,"offset":678},"end":{"line":12,"column":71,"offset":696}}}],"position":{"start":{"line":12,"column":53,"offset":678},"end":{"line":12,"column":71,"offset":696}}},{"type":"text","value":", ","position":{"start":{"line":12,"column":71,"offset":696},"end":{"line":12,"column":73,"offset":698}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":12,"column":73,"offset":698},"end":{"line":12,"column":93,"offset":718}}}],"position":{"start":{"line":12,"column":73,"offset":698},"end":{"line":12,"column":93,"offset":718}}},{"type":"text","value":" and ","position":{"start":{"line":12,"column":93,"offset":718},"end":{"line":12,"column":98,"offset":723}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":12,"column":98,"offset":723},"end":{"line":12,"column":117,"offset":742}}}],"position":{"start":{"line":12,"column":98,"offset":723},"end":{"line":12,"column":117,"offset":742}}},{"type":"text","value":". They are all optional. By default, you have a close button ","position":{"start":{"line":12,"column":117,"offset":742},"end":{"line":12,"column":178,"offset":803}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":12,"column":178,"offset":803},"end":{"line":12,"column":196,"offset":821}}}],"position":{"start":{"line":12,"column":178,"offset":803},"end":{"line":12,"column":196,"offset":821}}},{"type":"text","value":" that you can remove by setting the ","position":{"start":{"line":12,"column":196,"offset":821},"end":{"line":12,"column":232,"offset":857}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"withCloseButton","position":{"start":{"line":12,"column":232,"offset":857},"end":{"line":12,"column":249,"offset":874}}}],"position":{"start":{"line":12,"column":232,"offset":857},"end":{"line":12,"column":249,"offset":874}}},{"type":"text","value":" property to ","position":{"start":{"line":12,"column":249,"offset":874},"end":{"line":12,"column":262,"offset":887}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false","position":{"start":{"line":12,"column":262,"offset":887},"end":{"line":12,"column":269,"offset":894}}}],"position":{"start":{"line":12,"column":262,"offset":887},"end":{"line":12,"column":269,"offset":894}}},{"type":"text","value":". If you're using ","position":{"start":{"line":12,"column":269,"offset":894},"end":{"line":12,"column":287,"offset":912}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":12,"column":287,"offset":912},"end":{"line":12,"column":305,"offset":930}}}],"position":{"start":{"line":12,"column":287,"offset":912},"end":{"line":12,"column":305,"offset":930}}},{"type":"text","value":" along with ","position":{"start":{"line":12,"column":305,"offset":930},"end":{"line":12,"column":317,"offset":942}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":12,"column":317,"offset":942},"end":{"line":12,"column":335,"offset":960}}}],"position":{"start":{"line":12,"column":317,"offset":942},"end":{"line":12,"column":335,"offset":960}}},{"type":"text","value":", please make sure to position ","position":{"start":{"line":12,"column":335,"offset":960},"end":{"line":12,"column":366,"offset":991}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":12,"column":366,"offset":991},"end":{"line":12,"column":384,"offset":1009}}}],"position":{"start":{"line":12,"column":366,"offset":991},"end":{"line":12,"column":384,"offset":1009}}},{"type":"text","value":" first in your code for styling purposes.","position":{"start":{"line":12,"column":384,"offset":1009},"end":{"line":12,"column":425,"offset":1050}}}],"position":{"start":{"line":12,"column":1,"offset":626},"end":{"line":12,"column":425,"offset":1050}}},"children":["We provide basic layout components for your drawer: ",["$","$L5",null,{"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":""}],", ",["$","$L5",null,{"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":""}]," and ",["$","$L5",null,{"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":""}],". They are all optional. By default, you have a close button ",["$","$L5",null,{"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":""}]," that you can remove by setting the ",["$","$L5",null,{"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":"withCloseButton"}]," property to ",["$","$L5",null,{"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":"false"}],". If you're using ",["$","$L5",null,{"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":""}]," along with ",["$","$L5",null,{"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":""}],", please make sure to position ",["$","$L5",null,{"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":""}]," first in your code for styling purposes."]}],"\n",["$","$L6",null,{"code":"import * as React from 'react'\nimport { Drawer, useDrawer } from '@welcome-ui/drawer'\nimport { Button } from '@welcome-ui/button'\n\nconst Example = () => {\n const drawer = useDrawer()\n\n const onClick = () => {\n drawer.hide()\n }\n\n return (\n <>\n \n Open Drawer\n \n \n Hello\n \n Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis\n aliquam nec, convallis sit amet erat. Mauris auctor blandit porta.\n \n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Drawer","pathToFile":"/Drawer/docs/examples/layout.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h3","id":"placement","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#placement","textDecoration":{"hover":"underline"},"children":"Placement"}]}],"\n",["$","$L9","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default the ","position":{"start":{"line":18,"column":1,"offset":1133},"end":{"line":18,"column":16,"offset":1148}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"placement","position":{"start":{"line":18,"column":16,"offset":1148},"end":{"line":18,"column":27,"offset":1159}}}],"position":{"start":{"line":18,"column":16,"offset":1148},"end":{"line":18,"column":27,"offset":1159}}},{"type":"text","value":" of the drawer will be on the ","position":{"start":{"line":18,"column":27,"offset":1159},"end":{"line":18,"column":57,"offset":1189}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"right","position":{"start":{"line":18,"column":57,"offset":1189},"end":{"line":18,"column":64,"offset":1196}}}],"position":{"start":{"line":18,"column":57,"offset":1189},"end":{"line":18,"column":64,"offset":1196}}},{"type":"text","value":" but you can set it to ","position":{"start":{"line":18,"column":64,"offset":1196},"end":{"line":18,"column":87,"offset":1219}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"top","position":{"start":{"line":18,"column":87,"offset":1219},"end":{"line":18,"column":92,"offset":1224}}}],"position":{"start":{"line":18,"column":87,"offset":1219},"end":{"line":18,"column":92,"offset":1224}}},{"type":"text","value":", ","position":{"start":{"line":18,"column":92,"offset":1224},"end":{"line":18,"column":94,"offset":1226}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"bottom","position":{"start":{"line":18,"column":94,"offset":1226},"end":{"line":18,"column":102,"offset":1234}}}],"position":{"start":{"line":18,"column":94,"offset":1226},"end":{"line":18,"column":102,"offset":1234}}},{"type":"text","value":", or ","position":{"start":{"line":18,"column":102,"offset":1234},"end":{"line":18,"column":107,"offset":1239}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"left","position":{"start":{"line":18,"column":107,"offset":1239},"end":{"line":18,"column":113,"offset":1245}}}],"position":{"start":{"line":18,"column":107,"offset":1239},"end":{"line":18,"column":113,"offset":1245}}},{"type":"text","value":".","position":{"start":{"line":18,"column":113,"offset":1245},"end":{"line":18,"column":114,"offset":1246}}}],"position":{"start":{"line":18,"column":1,"offset":1133},"end":{"line":18,"column":114,"offset":1246}}},"children":["By default the ",["$","$L5",null,{"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":"placement"}]," of the drawer will be on the ",["$","$L5",null,{"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":"right"}]," but you can set it to ",["$","$L5",null,{"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":"top"}],", ",["$","$L5",null,{"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":"bottom"}],", or ",["$","$L5",null,{"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":"left"}],"."]}],"\n",["$","$L6",null,{"code":"$a","isOverview":false,"mt":"$undefined","name":"Drawer","pathToFile":"/Drawer/docs/examples/placement.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"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",["$","$L9","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default the ","position":{"start":{"line":24,"column":1,"offset":1328},"end":{"line":24,"column":16,"offset":1343}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"size","position":{"start":{"line":24,"column":16,"offset":1343},"end":{"line":24,"column":22,"offset":1349}}}],"position":{"start":{"line":24,"column":16,"offset":1343},"end":{"line":24,"column":22,"offset":1349}}},{"type":"text","value":" of the drawer will be ","position":{"start":{"line":24,"column":22,"offset":1349},"end":{"line":24,"column":45,"offset":1372}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"lg","position":{"start":{"line":24,"column":45,"offset":1372},"end":{"line":24,"column":49,"offset":1376}}}],"position":{"start":{"line":24,"column":45,"offset":1372},"end":{"line":24,"column":49,"offset":1376}}},{"type":"text","value":" which is set in the theme. We provide 3 different sizes that will adapt according to the position of the Drawer. You can also set a custom size if needed.","position":{"start":{"line":24,"column":49,"offset":1376},"end":{"line":24,"column":204,"offset":1531}}}],"position":{"start":{"line":24,"column":1,"offset":1328},"end":{"line":24,"column":204,"offset":1531}}},"children":["By default the ",["$","$L5",null,{"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":"size"}]," of the drawer will be ",["$","$L5",null,{"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"}]," which is set in the theme. We provide 3 different sizes that will adapt according to the position of the Drawer. You can also set a custom size if needed."]}],"\n",["$","$L6",null,{"code":"$b","isOverview":false,"mt":"$undefined","name":"Drawer","pathToFile":"/Drawer/docs/examples/sizes.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h3","id":"styling","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#styling","textDecoration":{"hover":"underline"},"children":"Styling"}]}],"\n",["$","$L9","p-5",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All the elements can be styled as you see fit, by extending drawer's theme or directly with styled props.","position":{"start":{"line":30,"column":1,"offset":1611},"end":{"line":30,"column":106,"offset":1716}}}],"position":{"start":{"line":30,"column":1,"offset":1611},"end":{"line":30,"column":106,"offset":1716}}},"children":"All the elements can be styled as you see fit, by extending drawer's theme or directly with styled props."}],"\n",["$","$L6",null,{"code":"$c","isOverview":false,"mt":"$undefined","name":"Drawer","pathToFile":"/Drawer/docs/examples/styling.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h3","id":"asset-drawer","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#asset-drawer","textDecoration":{"hover":"underline"},"children":"AssetDrawer"}]}],"\n",["$","$L9","p-6",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For our cases we need to show a Drawer from bottom, with full size and with rounded border. It's a new sub component to the modal: ","position":{"start":{"line":36,"column":1,"offset":1802},"end":{"line":36,"column":132,"offset":1933}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"AssetDrawer","position":{"start":{"line":36,"column":132,"offset":1933},"end":{"line":36,"column":145,"offset":1946}}}],"position":{"start":{"line":36,"column":132,"offset":1933},"end":{"line":36,"column":145,"offset":1946}}}],"position":{"start":{"line":36,"column":1,"offset":1802},"end":{"line":36,"column":145,"offset":1946}}},"children":["For our cases we need to show a Drawer from bottom, with full size and with rounded border. It's a new sub component to the modal: ",["$","$L5",null,{"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":"AssetDrawer"}]]}],"\n",["$","$L6",null,{"code":"$d","isOverview":false,"mt":"$undefined","name":"Drawer","pathToFile":"/Drawer/docs/examples/asset.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"use-drawer","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#use-drawer","textDecoration":{"hover":"underline"},"children":"useDrawer"}]}],"\n",["$","$L9","p-7",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We use ","position":{"start":{"line":42,"column":1,"offset":2027},"end":{"line":42,"column":8,"offset":2034}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useDialogStore","position":{"start":{"line":42,"column":8,"offset":2034},"end":{"line":42,"column":24,"offset":2050}}}],"position":{"start":{"line":42,"column":8,"offset":2034},"end":{"line":42,"column":24,"offset":2050}}},{"type":"text","value":" from ","position":{"start":{"line":42,"column":24,"offset":2050},"end":{"line":42,"column":30,"offset":2056}}},{"type":"element","tagName":"a","properties":{"href":"https://ariakit.org/reference/use-dialog-store"},"children":[{"type":"text","value":"Ariakit Dialog","position":{"start":{"line":42,"column":31,"offset":2057},"end":{"line":42,"column":45,"offset":2071}}}],"position":{"start":{"line":42,"column":30,"offset":2056},"end":{"line":42,"column":94,"offset":2120}}},{"type":"text","value":" for the state of the drawer with the ","position":{"start":{"line":42,"column":94,"offset":2120},"end":{"line":42,"column":132,"offset":2158}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"animated","position":{"start":{"line":42,"column":132,"offset":2158},"end":{"line":42,"column":142,"offset":2168}}}],"position":{"start":{"line":42,"column":132,"offset":2158},"end":{"line":42,"column":142,"offset":2168}}},{"type":"text","value":" flag set to ","position":{"start":{"line":42,"column":142,"offset":2168},"end":{"line":42,"column":155,"offset":2181}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true","position":{"start":{"line":42,"column":155,"offset":2181},"end":{"line":42,"column":161,"offset":2187}}}],"position":{"start":{"line":42,"column":155,"offset":2181},"end":{"line":42,"column":161,"offset":2187}}},{"type":"text","value":" by default.","position":{"start":{"line":42,"column":161,"offset":2187},"end":{"line":42,"column":173,"offset":2199}}}],"position":{"start":{"line":42,"column":1,"offset":2027},"end":{"line":42,"column":173,"offset":2199}}},"children":["We use ",["$","$L5",null,{"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":"useDialogStore"}]," from ",["$","$Le",null,{"href":"https://ariakit.org/reference/use-dialog-store","isExternal":true,"rel":"noreferrer noopener","target":"_blank","node":"$f","children":"Ariakit Dialog"}]," for the state of the drawer with the ",["$","$L5",null,{"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":"animated"}]," flag set to ",["$","$L5",null,{"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":"true"}]," by default."]}],"\n",["$","$L9","p-8",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pass options to ","position":{"start":{"line":44,"column":1,"offset":2201},"end":{"line":44,"column":17,"offset":2217}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useDrawer","position":{"start":{"line":44,"column":17,"offset":2217},"end":{"line":44,"column":28,"offset":2228}}}],"position":{"start":{"line":44,"column":17,"offset":2217},"end":{"line":44,"column":28,"offset":2228}}},{"type":"text","value":":","position":{"start":{"line":44,"column":28,"offset":2228},"end":{"line":44,"column":29,"offset":2229}}}],"position":{"start":{"line":44,"column":1,"offset":2201},"end":{"line":44,"column":29,"offset":2229}}},"children":["Pass options to ",["$","$L5",null,{"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":"useDrawer"}],":"]}],"\n",["$","$L5",null,{"as":"ul","listStyleType":"disc","mt":"sm","children":["\n",["$","$L5",null,{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5",null,{"as":"strong","color":"neutral-90","fontWeight":"500","children":"defaultOpen"}],": e.g. ",["$","$L5",null,{"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":"const drawer = useDrawer({ defaultOpen: true })"}]]}],"\n"]}],"\n",["$","$L9","p-9",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And the hook returns (among other things):","position":{"start":{"line":48,"column":1,"offset":2306},"end":{"line":48,"column":43,"offset":2348}}}],"position":{"start":{"line":48,"column":1,"offset":2306},"end":{"line":48,"column":43,"offset":2348}}},"children":"And the hook returns (among other things):"}],"\n",["$","$L5",null,{"as":"ul","listStyleType":"disc","mt":"sm","children":["\n",["$","$L5",null,{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5",null,{"as":"strong","color":"neutral-90","fontWeight":"500","children":"useState('open')"}],": whether the drawer is currently open"]}],"\n",["$","$L5",null,{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5",null,{"as":"strong","color":"neutral-90","fontWeight":"500","children":"hide"}],": a function to hide the drawer"]}],"\n"]}]]}]]}],["$","$L19",null,{"isSubPage":true,"tree":[{"id":"definition","title":"Definition","href":"#"},{"id":"installation","title":"Installation","href":"#installation"},{"id":"examples","title":"Examples","href":"#examples","children":[{"id":"backdrop","title":"Backdrop","href":"#backdrop"},{"id":"layout","title":"Layout","href":"#layout"},{"id":"placement","title":"Placement","href":"#placement"},{"id":"sizes","title":"Sizes","href":"#sizes"},{"id":"styling","title":"Styling","href":"#styling"},{"id":"asset-drawer","title":"AssetDrawer","href":"#asset-drawer"}]},{"id":"use-drawer","title":"useDrawer","href":"#use-drawer"}]}]],null],null],null]},[[null,["$","$L1a",null,{"gap":"md","margin":"0 auto","maxWidth":1400,"pb":"3xl","px":"xl","templateColumns":{"lg":"16rem auto"},"children":[["$","$L1b",null,{"display":{"_":"none","lg":"flex"},"isSubPage":true,"menu":[{"category":"actions","parent":"components","pages":[{"id":"button","title":"Button","subPages":["props"]},{"id":"button-group","title":"ButtonGroup","subPages":["props"]},{"id":"link","title":"Link","subPages":["props"]}]},{"category":"data-display","parent":"components","pages":[{"id":"accordion","title":"Accordion","subPages":["props"]},{"id":"avatar","title":"Avatar","subPages":["props"]},{"id":"badge","title":"Badge","subPages":["props"]},{"id":"card","title":"Card","subPages":["props"]},{"id":"swiper","title":"Swiper","subPages":["props"]},{"id":"table","title":"Table","subPages":["props"]},{"id":"tag","title":"Tag","subPages":["props"]}]},{"category":"feedback","parent":"components","pages":[{"id":"alert","title":"Alert","subPages":["props"]},{"id":"toast","title":"Toast","subPages":["props"]}]},{"category":"forms","parent":"components","pages":[{"id":"checkbox","title":"Checkbox","subPages":["props"]},{"id":"date-picker","title":"DatePicker","subPages":["props"]},{"id":"date-time-picker","title":"DateTimePicker","subPages":["props"]},{"id":"field","title":"Field","subPages":["props"]},{"id":"file-drop","title":"FileDrop","subPages":["props"]},{"id":"file-upload","title":"FileUpload","subPages":["props"]},{"id":"hint","title":"Hint","subPages":["props"]},{"id":"input-text","title":"InputText","subPages":["props"]},{"id":"label","title":"Label","subPages":["props"]},{"id":"password-input","title":"PasswordInput","subPages":["props"]},{"id":"picker","title":"Picker","subPages":["props"]},{"id":"radio-group","title":"RadioGroup","subPages":["props"]},{"id":"radio-tab","title":"RadioTab","subPages":["props"]},{"id":"search","title":"Search","subPages":["props"]},{"id":"select","title":"Select","subPages":["props"]},{"id":"slider","title":"Slider","subPages":["props"]},{"id":"textarea","title":"Textarea","subPages":["props"]},{"id":"time-picker","title":"TimePicker","subPages":["props"]},{"id":"toggle","title":"Toggle","subPages":["props"]}]},{"category":"icons-&-logo","parent":"components","pages":[{"id":"icon","title":"Icons","subPages":["props"]},{"id":"icon-font","title":"IconFont","subPages":["props"]},{"id":"logo","title":"Logo","subPages":["props"]},{"id":"variant-icon","title":"VariantIcon","subPages":["props"]},{"id":"welcome-loader","title":"WelcomeLoader","subPages":["props"]}]},{"category":"layout","parent":"components","pages":[{"id":"aspect-ratio","title":"AspectRatio","subPages":["props"]},{"id":"box","title":"Box","subPages":["props"]},{"id":"flex","title":"Flex","subPages":["props"]},{"id":"grid","title":"Grid","subPages":["props"]},{"id":"loader","title":"Loader","subPages":["props"]},{"id":"shape","title":"Shape","subPages":["props"]},{"id":"stack","title":"Stack","subPages":["props"]}]},{"category":"navigation","parent":"components","pages":[{"id":"breadcrumb","title":"Breadcrumb","subPages":["props"]},{"id":"dropdown-menu","title":"DropdownMenu","subPages":["props"]},{"id":"pagination","title":"Pagination","subPages":["props"]},{"id":"tabs","title":"Tabs","subPages":["props"]}]},{"category":"overlay","parent":"components","pages":[{"id":"drawer","title":"Drawer","subPages":["props"]},{"id":"modal","title":"Modal","subPages":["props"]},{"id":"popover","title":"Popover","subPages":["props"]},{"id":"tooltip","title":"Tooltip","subPages":["props"]}]},{"category":"typography","parent":"components","pages":[{"id":"text","title":"Text","subPages":["props"]}]}]}],["$","div",null,{"children":[["$","$L1c",null,{"direction":"column","gap":"xl","mb":"lg","children":[["$","$L8",null,{"pt":"3xl","variant":"h1","children":"Drawer"}],["$","$L8",null,{"color":"neutral-60","pt":"lg","variant":"lg","children":"The Drawer component is a versatile UI element that slides in from the edge of the screen to reveal additional content or options without navigating away from the current page. It provides a space-efficient way to present temporary or contextual information, such as menus, settings, or notifications. Drawers enhance user experience by maintaining focus on the main content while offering quick access to supplementary features."}],["$","$L1c",null,{"align":"center","gap":"md","children":[["$","$L1d",null,{"as":"a","href":"https://github.com/WTTJ/welcome-ui/tree/main/packages/Drawer","rel":"noreferrer noopener","size":"sm","target":"_blank","variant":"tertiary","children":[["$","$L1e",null,{}],["$","span",null,{"children":"Source"}]]}],["$","$L1d",null,{"as":"a","href":"https://www.npmjs.com/package/@welcome-ui/drawer","rel":"noreferrer noopener","size":"sm","target":"_blank","variant":"tertiary","children":[["$","$L1f",null,{}],["$","span",null,{"children":["@welcome-ui/","drawer"]}]]}],["$","$L1d",null,{"as":"a","href":"https://ariakit.org/components/dialog","rel":"noreferrer noopener","size":"sm","target":"_blank","variant":"tertiary","children":[["$","svg",null,{"aria-hidden":"true","height":"16","viewBox":"0 0 48 48","children":[["$","circle",null,{"cx":"29","cy":"24","r":"5"}],["$","path",null,{"clipRule":"evenodd","d":"M12 4C7.58172 4 4 7.58172 4 12V36C4 40.4183 7.58172 44 12 44H36C40.4183 44 44 40.4183 44 36V12C44 7.58172 40.4183 4 36 4H12ZM23.9997 35.9997C30.6271 35.9997 35.9997 30.6271 35.9997 23.9997C35.9997 17.3723 30.6271 11.9997 23.9997 11.9997C17.3723 11.9997 11.9997 17.3723 11.9997 23.9997C11.9997 30.6271 17.3723 35.9997 23.9997 35.9997Z","fillRule":"evenodd"}],["$","path",null,{"clipRule":"evenodd","d":"M12 0C5.37258 0 0 5.37258 0 12V36C0 42.6274 5.37258 48 12 48H36C42.6274 48 48 42.6274 48 36V12C48 5.37258 42.6274 0 36 0H12ZM12 2C6.47715 2 2 6.47715 2 12V36C2 41.5228 6.47715 46 12 46H36C41.5228 46 46 41.5228 46 36V12C46 6.47715 41.5228 2 36 2H12Z","fillRule":"evenodd"}]]}],["$","span",null,{"children":"Built with Ariakit"}]]}]]}]]}],["$","$L20",null,{"pages":"$21"}],["$","$L1a",null,{"gap":"xl","templateColumns":{"xl":"auto 15rem"},"children":[["$","$L9c",null,{"parallelRouterKey":"children","segmentPath":["children","components","children","$9d","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L9e",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}],["$","$L9f",null,{"basePage":"components","currentId":"drawer","pages":"$21"}]]}]]}]]}]],null],null]},[null,["$","$L9c",null,{"parallelRouterKey":"children","segmentPath":["children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L9e",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/c240aae3a48c5bf0.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/530efe9c1e6b27ee.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","children":[["$","head",null,{"children":["$","link",null,{"href":"/favicon.png","rel":"icon","type":"image/png"}]}],["$","body",null,{"children":["$","$La0",null,{"children":["$","$La1",null,{"children":["$","$La2",null,{"children":["$","$L5",null,{"backgroundColor":"neutral-10","children":[["$","$La3",null,{"components":[{"category":"actions","parent":"components","pages":[{"id":"button","title":"Button","subPages":["props"]},{"id":"button-group","title":"ButtonGroup","subPages":["props"]},{"id":"link","title":"Link","subPages":["props"]}]},{"category":"data-display","parent":"components","pages":[{"id":"accordion","title":"Accordion","subPages":["props"]},{"id":"avatar","title":"Avatar","subPages":["props"]},{"id":"badge","title":"Badge","subPages":["props"]},{"id":"card","title":"Card","subPages":["props"]},{"id":"swiper","title":"Swiper","subPages":["props"]},{"id":"table","title":"Table","subPages":["props"]},{"id":"tag","title":"Tag","subPages":["props"]}]},{"category":"feedback","parent":"components","pages":[{"id":"alert","title":"Alert","subPages":["props"]},{"id":"toast","title":"Toast","subPages":["props"]}]},{"category":"forms","parent":"components","pages":[{"id":"checkbox","title":"Checkbox","subPages":["props"]},{"id":"date-picker","title":"DatePicker","subPages":["props"]},{"id":"date-time-picker","title":"DateTimePicker","subPages":["props"]},{"id":"field","title":"Field","subPages":["props"]},{"id":"file-drop","title":"FileDrop","subPages":["props"]},{"id":"file-upload","title":"FileUpload","subPages":["props"]},{"id":"hint","title":"Hint","subPages":["props"]},{"id":"input-text","title":"InputText","subPages":["props"]},{"id":"label","title":"Label","subPages":["props"]},{"id":"password-input","title":"PasswordInput","subPages":["props"]},{"id":"picker","title":"Picker","subPages":["props"]},{"id":"radio-group","title":"RadioGroup","subPages":["props"]},{"id":"radio-tab","title":"RadioTab","subPages":["props"]},{"id":"search","title":"Search","subPages":["props"]},{"id":"select","title":"Select","subPages":["props"]},{"id":"slider","title":"Slider","subPages":["props"]},{"id":"textarea","title":"Textarea","subPages":["props"]},{"id":"time-picker","title":"TimePicker","subPages":["props"]},{"id":"toggle","title":"Toggle","subPages":["props"]}]},{"category":"icons-&-logo","parent":"components","pages":[{"id":"icon","title":"Icons","subPages":["props"]},{"id":"icon-font","title":"IconFont","subPages":["props"]},{"id":"logo","title":"Logo","subPages":["props"]},{"id":"variant-icon","title":"VariantIcon","subPages":["props"]},{"id":"welcome-loader","title":"WelcomeLoader","subPages":["props"]}]},{"category":"layout","parent":"components","pages":[{"id":"aspect-ratio","title":"AspectRatio","subPages":["props"]},{"id":"box","title":"Box","subPages":["props"]},{"id":"flex","title":"Flex","subPages":["props"]},{"id":"grid","title":"Grid","subPages":["props"]},{"id":"loader","title":"Loader","subPages":["props"]},{"id":"shape","title":"Shape","subPages":["props"]},{"id":"stack","title":"Stack","subPages":["props"]}]},{"category":"navigation","parent":"components","pages":[{"id":"breadcrumb","title":"Breadcrumb","subPages":["props"]},{"id":"dropdown-menu","title":"DropdownMenu","subPages":["props"]},{"id":"pagination","title":"Pagination","subPages":["props"]},{"id":"tabs","title":"Tabs","subPages":["props"]}]},{"category":"overlay","parent":"components","pages":[{"id":"drawer","title":"Drawer","subPages":["props"]},{"id":"modal","title":"Modal","subPages":["props"]},{"id":"popover","title":"Popover","subPages":["props"]},{"id":"tooltip","title":"Tooltip","subPages":["props"]}]},{"category":"typography","parent":"components","pages":[{"id":"text","title":"Text","subPages":["props"]}]}],"foundations":[{"parent":"foundations","pages":[{"id":"getting-started"},{"id":"how-to-contribute"},{"id":"migration"}]},{"parent":"foundations","category":"theming","pages":[{"id":"basics","parent":"theming"},{"id":"customize","parent":"theming"}]},{"parent":"foundations","category":"upgrades","pages":[{"id":"v2","parent":"upgrades"},{"id":"v3","parent":"upgrades"},{"id":"v4","parent":"upgrades"},{"id":"v5","parent":"upgrades"}]}]}],["$","$La4",null,{}],["$","$L9c",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L9e",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"children":[["$","h2",null,{"children":"Not Found"}],["$","p",null,{"children":"Could not find requested resource"}],["$","$La5",null,{"href":"/","children":"Return Home"}]]}],"notFoundStyles":[]}],["$","$L5",null,{"as":"footer","position":"relative","py":{"xs":"xxl","md":90},"backgroundColor":"beige-20","children":["$","$L5",null,{"margin":"0 auto","maxWidth":1200,"position":"relative","px":"lg","children":["$","$L1a",null,{"gap":"xl","gridTemplateColumns":{"_":"1fr 1fr","md":"1fr 1fr 1fr 1fr"},"children":[["$","$L1c",null,{"flexDirection":"column","gap":"xs","children":[["$","$L1c",null,{"alignItems":"center","gap":"sm","children":["Made with ",["$","$La6",null,{"color":"primary-50"}]," by"]}],["$","$L5",null,{"as":"a","href":"https://www.welcometothejungle.com","rel":"noreferrer noopener","target":"_blank","w":"fit-content","children":["$","$La7",null,{"h":40}]}]]}],[["$","$L1c","Documentations",{"as":"nav","flexDirection":"column","gap":"lg","children":[["$","$L8",null,{"variant":"subtitle-md","children":"Documentations"}],["$","$L1c",null,{"as":"ul","flexDirection":"column","gap":"sm","children":[["$","$L5","/foundations",{"as":"li","children":["$","$L5",null,{"alignItems":"center","as":"a","color":"neutral-90","display":"flex","fontSize":"sm","gap":"xs","href":"/foundations","rel":"$undefined","target":"$undefined","textDecoration":{"hover":"underline"},"children":["Foundations",false]}]}],["$","$L5","/components",{"as":"li","children":["$","$L5",null,{"alignItems":"center","as":"a","color":"neutral-90","display":"flex","fontSize":"sm","gap":"xs","href":"/components","rel":"$undefined","target":"$undefined","textDecoration":{"hover":"underline"},"children":["Components",false]}]}],["$","$L5","https://github.com/WTTJ/welcome-ui/",{"as":"li","children":["$","$L5",null,{"alignItems":"center","as":"a","color":"neutral-90","display":"flex","fontSize":"sm","gap":"xs","href":"https://github.com/WTTJ/welcome-ui/","rel":"noopener noreferrer","target":"_blank","textDecoration":{"hover":"underline"},"children":["Source code",["$","$La8",null,{"color":"neutral-60","size":"xs"}]]}]}]]}]]}],["$","$L1c","Updates",{"as":"nav","flexDirection":"column","gap":"lg","children":[["$","$L8",null,{"variant":"subtitle-md","children":"Updates"}],["$","$L1c",null,{"as":"ul","flexDirection":"column","gap":"sm","children":[["$","$L5","https://github.com/WTTJ/welcome-ui/releases",{"as":"li","children":["$","$L5",null,{"alignItems":"center","as":"a","color":"neutral-90","display":"flex","fontSize":"sm","gap":"xs","href":"https://github.com/WTTJ/welcome-ui/releases","rel":"noopener noreferrer","target":"_blank","textDecoration":{"hover":"underline"},"children":["Releases",["$","$La8",null,{"color":"neutral-60","size":"xs"}]]}]}],["$","$L5","https://github.com/orgs/WTTJ/projects/13",{"as":"li","children":["$","$L5",null,{"alignItems":"center","as":"a","color":"neutral-90","display":"flex","fontSize":"sm","gap":"xs","href":"https://github.com/orgs/WTTJ/projects/13","rel":"noopener noreferrer","target":"_blank","textDecoration":{"hover":"underline"},"children":["Project board",["$","$La8",null,{"color":"neutral-60","size":"xs"}]]}]}]]}]]}],["$","$L1c","Community",{"as":"nav","flexDirection":"column","gap":"lg","children":[["$","$L8",null,{"variant":"subtitle-md","children":"Community"}],["$","$L1c",null,{"as":"ul","flexDirection":"column","gap":"sm","children":[["$","$L5","https://github.com/WTTJ",{"as":"li","children":["$","$L5",null,{"alignItems":"center","as":"a","color":"neutral-90","display":"flex","fontSize":"sm","gap":"xs","href":"https://github.com/WTTJ","rel":"noopener noreferrer","target":"_blank","textDecoration":{"hover":"underline"},"children":["Github",["$","$La8",null,{"color":"neutral-60","size":"xs"}]]}]}],["$","$L5","https://x.com/wttj_tech",{"as":"li","children":["$","$L5",null,{"alignItems":"center","as":"a","color":"neutral-90","display":"flex","fontSize":"sm","gap":"xs","href":"https://x.com/wttj_tech","rel":"noopener noreferrer","target":"_blank","textDecoration":{"hover":"underline"},"children":["Twitter",["$","$La8",null,{"color":"neutral-60","size":"xs"}]]}]}],["$","$L5","https://medium.com/wttj-tech",{"as":"li","children":["$","$L5",null,{"alignItems":"center","as":"a","color":"neutral-90","display":"flex","fontSize":"sm","gap":"xs","href":"https://medium.com/wttj-tech","rel":"noopener noreferrer","target":"_blank","textDecoration":{"hover":"underline"},"children":["Medium",["$","$La8",null,{"color":"neutral-60","size":"xs"}]]}]}],["$","$L5","https://www.welcometothejungle.com/en/companies/wttj/jobs",{"as":"li","children":["$","$L5",null,{"alignItems":"center","as":"a","color":"neutral-90","display":"flex","fontSize":"sm","gap":"xs","href":"https://www.welcometothejungle.com/en/companies/wttj/jobs","rel":"noopener noreferrer","target":"_blank","textDecoration":{"hover":"underline"},"children":["Jobs",["$","$La8",null,{"color":"neutral-60","size":"xs"}]]}]}]]}]]}]]]}]}]}]]}]}]}]}]}]]}]],null],null],"couldBeIntercepted":false,"initialHead":[null,"$La9"],"globalErrorComponent":"$aa","missingSlots":"$Wab"}]