12:[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":[["$","$L20","div-0",{"code":"import { Accordion, useAccordion } from 'welcome-ui/Accordion'\n\nconst Example = () => {\n const accordion = useAccordion()\n\n return (\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat.\n \n )\n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"Accordion","pathToFile":"/Accordion/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":"avatar","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#avatar","textDecoration":{"hover":"underline"},"children":"Avatar"}]}],"\n",["$","$L20","div-0",{"code":"import { Accordion, useAccordion } from 'welcome-ui/Accordion'\nimport { Avatar } from 'welcome-ui/Avatar'\nimport { Flex } from 'welcome-ui/Flex'\nimport { Text } from 'welcome-ui/Text'\n\nconst Example = () => {\n const accordion = useAccordion()\n\n return (\n \n \n \n Accordion title\n \n \n }\n >\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat.\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Accordion","pathToFile":"/Accordion/docs/examples/avatar.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-1",{"as":"h3","id":"open-at-start","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#open-at-start","textDecoration":{"hover":"underline"},"children":"Open at start"}]}],"\n",["$","$L21","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Add ","position":{"start":{"line":8,"column":1,"offset":101},"end":{"line":8,"column":5,"offset":105}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultOpen","position":{"start":{"line":8,"column":5,"offset":105},"end":{"line":8,"column":18,"offset":118}}}],"position":{"start":{"line":8,"column":5,"offset":105},"end":{"line":8,"column":18,"offset":118}}},{"type":"text","value":" options to ","position":{"start":{"line":8,"column":18,"offset":118},"end":{"line":8,"column":30,"offset":130}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useAccordion","position":{"start":{"line":8,"column":30,"offset":130},"end":{"line":8,"column":44,"offset":144}}}],"position":{"start":{"line":8,"column":30,"offset":130},"end":{"line":8,"column":44,"offset":144}}},{"type":"text","value":" to open the accordion at the start.","position":{"start":{"line":8,"column":44,"offset":144},"end":{"line":8,"column":80,"offset":180}}}],"position":{"start":{"line":8,"column":1,"offset":101},"end":{"line":8,"column":80,"offset":180}}},"children":["Add ",["$","$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":"defaultOpen"}]," options to ",["$","$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":"useAccordion"}]," to open the accordion at the start."]}],"\n",["$","$L20","div-1",{"code":"import { Accordion, useAccordion } from 'welcome-ui/Accordion'\n\nconst Example = () => {\n const accordion = useAccordion({ defaultOpen: true })\n\n return (\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat.\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Accordion","pathToFile":"/Accordion/docs/examples/open-at-start.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-2",{"as":"h3","id":"with-a-custom-icon","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#with-a-custom-icon","textDecoration":{"hover":"underline"},"children":"With a custom icon"}]}],"\n",["$","$L21","p-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Customize the icon with a node element on the ","position":{"start":{"line":14,"column":1,"offset":282},"end":{"line":14,"column":47,"offset":328}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"icon","position":{"start":{"line":14,"column":47,"offset":328},"end":{"line":14,"column":53,"offset":334}}}],"position":{"start":{"line":14,"column":47,"offset":328},"end":{"line":14,"column":53,"offset":334}}},{"type":"text","value":" property. Note that the custom icon's size property will be set to small.","position":{"start":{"line":14,"column":53,"offset":334},"end":{"line":14,"column":127,"offset":408}}}],"position":{"start":{"line":14,"column":1,"offset":282},"end":{"line":14,"column":127,"offset":408}}},"children":["Customize the icon with a node element on 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. Note that the custom icon's size property will be set to small."]}],"\n",["$","$L20","div-2",{"code":"import { Accordion, useAccordion } from 'welcome-ui/Accordion'\nimport { PlayIcon } from 'welcome-ui/Icons'\n\nconst Example = () => {\n const accordion = useAccordion()\n\n return (\n } store={accordion} title=\"Accordion title\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat.\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Accordion","pathToFile":"/Accordion/docs/examples/with-custom-icon.tsx","withCodeEditor":true}],"\n",["$","$Lf","h2-0",{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"use-accordion","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#use-accordion","textDecoration":{"hover":"underline"},"children":"useAccordion"}]}],"\n",["$","$L21","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We use ","position":{"start":{"line":20,"column":1,"offset":506},"end":{"line":20,"column":8,"offset":513}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useDisclosureStore","position":{"start":{"line":20,"column":8,"offset":513},"end":{"line":20,"column":28,"offset":533}}}],"position":{"start":{"line":20,"column":8,"offset":513},"end":{"line":20,"column":28,"offset":533}}},{"type":"text","value":" from ","position":{"start":{"line":20,"column":28,"offset":533},"end":{"line":20,"column":34,"offset":539}}},{"type":"element","tagName":"a","properties":{"href":"https://ariakit.org/reference/use-disclosure-store"},"children":[{"type":"text","value":"Ariakit Disclosure","position":{"start":{"line":20,"column":35,"offset":540},"end":{"line":20,"column":53,"offset":558}}}],"position":{"start":{"line":20,"column":34,"offset":539},"end":{"line":20,"column":106,"offset":611}}},{"type":"text","value":" for the state of the accordion, with the ","position":{"start":{"line":20,"column":106,"offset":611},"end":{"line":20,"column":148,"offset":653}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"animated","position":{"start":{"line":20,"column":148,"offset":653},"end":{"line":20,"column":158,"offset":663}}}],"position":{"start":{"line":20,"column":148,"offset":653},"end":{"line":20,"column":158,"offset":663}}},{"type":"text","value":" flag set to true by default.","position":{"start":{"line":20,"column":158,"offset":663},"end":{"line":20,"column":187,"offset":692}}}],"position":{"start":{"line":20,"column":1,"offset":506},"end":{"line":20,"column":187,"offset":692}}},"children":["We use ",["$","$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":"useDisclosureStore"}]," from ",["$","$L22","a-0",{"href":"https://ariakit.org/reference/use-disclosure-store","isExternal":true,"rel":"noreferrer noopener","target":"_blank","node":"$12:0:props:children:2:props:children:18:props:node:children:3","children":"Ariakit Disclosure"}]," for the state of the accordion, with the ",["$","$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":"animated"}]," flag set to true by default."]}],"\n",["$","$L21","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pass options to ","position":{"start":{"line":22,"column":1,"offset":694},"end":{"line":22,"column":17,"offset":710}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useAccordion","position":{"start":{"line":22,"column":17,"offset":710},"end":{"line":22,"column":31,"offset":724}}}],"position":{"start":{"line":22,"column":17,"offset":710},"end":{"line":22,"column":31,"offset":724}}},{"type":"text","value":":","position":{"start":{"line":22,"column":31,"offset":724},"end":{"line":22,"column":32,"offset":725}}}],"position":{"start":{"line":22,"column":1,"offset":694},"end":{"line":22,"column":32,"offset":725}}},"children":["Pass options to ",["$","$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":"useAccordion"}],":"]}],"\n",["$","$L5","ul-0",{"as":"ul","listStyleType":"disc","mt":"sm","children":["\n",["$","$L5","li-0",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","strong-0",{"as":"strong","color":"neutral-90","fontWeight":"500","children":"defaultOpen:"}]," ",["$","$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":"const accordion = useAccordion({ defaultOpen: true })"}]]}],"\n"]}],"\n",["$","$L21","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The hook returns (among other things):","position":{"start":{"line":26,"column":1,"offset":803},"end":{"line":26,"column":39,"offset":841}}}],"position":{"start":{"line":26,"column":1,"offset":803},"end":{"line":26,"column":39,"offset":841}}},"children":"The hook returns (among other things):"}],"\n",["$","$L5","ul-1",{"as":"ul","listStyleType":"disc","mt":"sm","children":["\n",["$","$L5","li-0",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","strong-0",{"as":"strong","color":"neutral-90","fontWeight":"500","children":"useState('open')"}],": whether the accordion is currently open"]}],"\n",["$","$L5","li-1",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","strong-0",{"as":"strong","color":"neutral-90","fontWeight":"500","children":"hide"}],": a function to hide the accordion"]}],"\n"]}]]}]]}],["$","$L23",null,{"isSubPage":true,"tree":[{"href":"#","id":"definition","title":"Definition"},{"href":"#installation","id":"installation","title":"Installation"},{"href":"#examples","id":"examples","title":"Examples","children":[{"href":"#avatar","id":"avatar","title":"Avatar"},{"href":"#open-at-start","id":"open-at-start","title":"Open at start"},{"href":"#with-a-custom-icon","id":"with-a-custom-icon","title":"With a custom icon"}]},{"href":"#use-accordion","id":"use-accordion","title":"useAccordion"}]}]]