12:[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":[["$","$L20","div-0",{"code":"import { Tab, useTab } from 'welcome-ui/Tabs'\n\nconst Example = () => {\n const tab = useTab({ defaultSelectedId: 'tab1' })\n\n return (\n <>\n \n \n Tab 1\n \n \n Tab 2\n \n \n Tab 3\n \n \n Tab 4\n \n \n Tab 5\n \n \n \n Tab.Panel 1\n \n \n Tab.Panel 2\n \n \n Tab.Panel 3\n \n \n Tab.Panel 4\n \n \n Tab.Panel 5\n \n \n )\n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"Tabs","pathToFile":"/Tabs/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":[["$","$L21","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use ","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":5,"offset":5}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Table","position":{"start":{"line":2,"column":5,"offset":5},"end":{"line":2,"column":12,"offset":12}}}],"position":{"start":{"line":2,"column":5,"offset":5},"end":{"line":2,"column":12,"offset":12}}},{"type":"text","value":", ","position":{"start":{"line":2,"column":12,"offset":12},"end":{"line":2,"column":14,"offset":14}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Table.Thead","position":{"start":{"line":2,"column":14,"offset":14},"end":{"line":2,"column":27,"offset":27}}}],"position":{"start":{"line":2,"column":14,"offset":14},"end":{"line":2,"column":27,"offset":27}}},{"type":"text","value":", ","position":{"start":{"line":2,"column":27,"offset":27},"end":{"line":2,"column":29,"offset":29}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Table.Th","position":{"start":{"line":2,"column":29,"offset":29},"end":{"line":2,"column":39,"offset":39}}}],"position":{"start":{"line":2,"column":29,"offset":29},"end":{"line":2,"column":39,"offset":39}}},{"type":"text","value":", ","position":{"start":{"line":2,"column":39,"offset":39},"end":{"line":2,"column":41,"offset":41}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Table.Tbody","position":{"start":{"line":2,"column":41,"offset":41},"end":{"line":2,"column":54,"offset":54}}}],"position":{"start":{"line":2,"column":41,"offset":41},"end":{"line":2,"column":54,"offset":54}}},{"type":"text","value":", ","position":{"start":{"line":2,"column":54,"offset":54},"end":{"line":2,"column":56,"offset":56}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Table.Td","position":{"start":{"line":2,"column":56,"offset":56},"end":{"line":2,"column":66,"offset":66}}}],"position":{"start":{"line":2,"column":56,"offset":56},"end":{"line":2,"column":66,"offset":66}}},{"type":"text","value":", ","position":{"start":{"line":2,"column":66,"offset":66},"end":{"line":2,"column":68,"offset":68}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Table.Tr","position":{"start":{"line":2,"column":68,"offset":68},"end":{"line":2,"column":78,"offset":78}}}],"position":{"start":{"line":2,"column":68,"offset":68},"end":{"line":2,"column":78,"offset":78}}},{"type":"text","value":".","position":{"start":{"line":2,"column":78,"offset":78},"end":{"line":2,"column":79,"offset":79}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":79,"offset":79}}},"children":["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":"Table"}],", ",["$","$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":"Table.Thead"}],", ",["$","$L5","code-2",{"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":"Table.Th"}],", ",["$","$L5","code-3",{"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":"Table.Tbody"}],", ",["$","$L5","code-4",{"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":"Table.Td"}],", ",["$","$L5","code-5",{"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":"Table.Tr"}],"."]}],"\n",["$","$Lf","h3-0",{"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-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Size is set on Tab.List. Available sizes are ","position":{"start":{"line":6,"column":1,"offset":92},"end":{"line":6,"column":46,"offset":137}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sm","position":{"start":{"line":6,"column":46,"offset":137},"end":{"line":6,"column":50,"offset":141}}}],"position":{"start":{"line":6,"column":46,"offset":137},"end":{"line":6,"column":50,"offset":141}}},{"type":"text","value":" and ","position":{"start":{"line":6,"column":50,"offset":141},"end":{"line":6,"column":55,"offset":146}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"md","position":{"start":{"line":6,"column":55,"offset":146},"end":{"line":6,"column":59,"offset":150}}}],"position":{"start":{"line":6,"column":55,"offset":146},"end":{"line":6,"column":59,"offset":150}}},{"type":"text","value":". By default size is set to ","position":{"start":{"line":6,"column":59,"offset":150},"end":{"line":6,"column":87,"offset":178}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"md","position":{"start":{"line":6,"column":87,"offset":178},"end":{"line":6,"column":91,"offset":182}}}],"position":{"start":{"line":6,"column":87,"offset":178},"end":{"line":6,"column":91,"offset":182}}},{"type":"text","value":".","position":{"start":{"line":6,"column":91,"offset":182},"end":{"line":6,"column":92,"offset":183}}}],"position":{"start":{"line":6,"column":1,"offset":92},"end":{"line":6,"column":92,"offset":183}}},"children":["Size is set on Tab.List. Available sizes are ",["$","$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"}]," and ",["$","$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":"md"}],". By default size is set to ",["$","$L5","code-2",{"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"}],"."]}],"\n",["$","$L20","div-0",{"code":"$22","isOverview":false,"mt":"$undefined","name":"Tabs","pathToFile":"/Tabs/docs/examples/sizes.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-1",{"as":"h3","id":"with-no-border","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#with-no-border","textDecoration":{"hover":"underline"},"children":"With no border"}]}],"\n",["$","$L21","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The border on ","position":{"start":{"line":12,"column":1,"offset":268},"end":{"line":12,"column":15,"offset":282}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Tab.List","position":{"start":{"line":12,"column":15,"offset":282},"end":{"line":12,"column":25,"offset":292}}}],"position":{"start":{"line":12,"column":15,"offset":282},"end":{"line":12,"column":25,"offset":292}}},{"type":"text","value":" is an inset shadow that you can customize or disable via the ","position":{"start":{"line":12,"column":25,"offset":292},"end":{"line":12,"column":87,"offset":354}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"boxShadow","position":{"start":{"line":12,"column":87,"offset":354},"end":{"line":12,"column":98,"offset":365}}}],"position":{"start":{"line":12,"column":87,"offset":354},"end":{"line":12,"column":98,"offset":365}}},{"type":"text","value":" style prop","position":{"start":{"line":12,"column":98,"offset":365},"end":{"line":12,"column":109,"offset":376}}}],"position":{"start":{"line":12,"column":1,"offset":268},"end":{"line":12,"column":109,"offset":376}}},"children":["The border on ",["$","$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":"Tab.List"}]," is an inset shadow that you can customize or disable via 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":"boxShadow"}]," style prop"]}],"\n",["$","$L20","div-1",{"code":"$23","isOverview":false,"mt":"$undefined","name":"Tabs","pathToFile":"/Tabs/docs/examples/no-border.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-2",{"as":"h3","id":"with-a-badge","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#with-a-badge","textDecoration":{"hover":"underline"},"children":"With a badge"}]}],"\n",["$","$L21","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Add badges, icons and images in tab.","position":{"start":{"line":18,"column":1,"offset":463},"end":{"line":18,"column":37,"offset":499}}}],"position":{"start":{"line":18,"column":1,"offset":463},"end":{"line":18,"column":37,"offset":499}}},"children":"Add badges, icons and images in tab."}],"\n",["$","$L20","div-2",{"code":"$24","isOverview":false,"mt":"$undefined","name":"Tabs","pathToFile":"/Tabs/docs/examples/badge.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-3",{"as":"h3","id":"use-another-component","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#use-another-component","textDecoration":{"hover":"underline"},"children":"Use another component"}]}],"\n",["$","$L21","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use another component in tab.","position":{"start":{"line":24,"column":1,"offset":591},"end":{"line":24,"column":30,"offset":620}}}],"position":{"start":{"line":24,"column":1,"offset":591},"end":{"line":24,"column":30,"offset":620}}},"children":"Use another component in tab."}],"\n",["$","$L20","div-3",{"code":"import { Tab, useTab } from 'welcome-ui/Tabs'\n\nconst Example = () => {\n const tab = useTab({ defaultSelectedId: 'tab1' })\n\n return (\n <>\n \n \n Tab 1\n \n \n Tab 2\n \n \n Tab 3\n \n \n \n Tab.Panel 1\n \n \n Tab.Panel 2\n \n \n Tab.Panel 3\n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Tabs","pathToFile":"/Tabs/docs/examples/component.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-4",{"as":"h3","id":"one-tab","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#one-tab","textDecoration":{"hover":"underline"},"children":"One tab"}]}],"\n",["$","$L21","p-5",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Active bar doesn't display with only one tab.","position":{"start":{"line":30,"column":1,"offset":702},"end":{"line":30,"column":46,"offset":747}}}],"position":{"start":{"line":30,"column":1,"offset":702},"end":{"line":30,"column":46,"offset":747}}},"children":"Active bar doesn't display with only one tab."}],"\n",["$","$L20","div-4",{"code":"import { Tab, useTab } from 'welcome-ui/Tabs'\n\nconst Example = () => {\n const tab = useTab({ defaultSelectedId: 'tab1' })\n\n return (\n <>\n \n \n Tab 1\n \n \n \n Tab.Panel 1\n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Tabs","pathToFile":"/Tabs/docs/examples/one.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-5",{"as":"h3","id":"vertical","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#vertical","textDecoration":{"hover":"underline"},"children":"Vertical"}]}],"\n",["$","$L21","p-6",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Set the tab orientation by providing the ","position":{"start":{"line":36,"column":1,"offset":824},"end":{"line":36,"column":42,"offset":865}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"orientation","position":{"start":{"line":36,"column":42,"offset":865},"end":{"line":36,"column":55,"offset":878}}}],"position":{"start":{"line":36,"column":42,"offset":865},"end":{"line":36,"column":55,"offset":878}}},{"type":"text","value":" prop to the tab state","position":{"start":{"line":36,"column":55,"offset":878},"end":{"line":36,"column":77,"offset":900}}}],"position":{"start":{"line":36,"column":1,"offset":824},"end":{"line":36,"column":77,"offset":900}}},"children":["Set the tab orientation by providing 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":"orientation"}]," prop to the tab state"]}],"\n",["$","$L20","div-5",{"code":"import { Box } from 'welcome-ui/Box'\nimport { Tab, useTab } from 'welcome-ui/Tabs'\n\nconst Example = () => {\n const tab = useTab({ defaultSelectedId: 'tab2', orientation: 'vertical' })\n\n return (\n \n \n \n Tab 1\n \n \n Tab 2\n \n \n Tab 3\n \n \n Tab 4\n \n \n \n Tab.Panel 1\n \n \n Tab.Panel 2\n \n \n Tab.Panel 3\n \n \n Tab.Panel 4\n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Tabs","pathToFile":"/Tabs/docs/examples/vertical.tsx","withCodeEditor":true}],"\n",["$","$Lf","h2-0",{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"use-tab","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#use-tab","textDecoration":{"hover":"underline"},"children":"useTab"}]}],"\n",["$","$L21","p-7",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We use ","position":{"start":{"line":42,"column":1,"offset":979},"end":{"line":42,"column":8,"offset":986}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useTab","position":{"start":{"line":42,"column":8,"offset":986},"end":{"line":42,"column":16,"offset":994}}}],"position":{"start":{"line":42,"column":8,"offset":986},"end":{"line":42,"column":16,"offset":994}}},{"type":"text","value":" from ","position":{"start":{"line":42,"column":16,"offset":994},"end":{"line":42,"column":22,"offset":1000}}},{"type":"element","tagName":"a","properties":{"href":"https://ariakit.org/reference/use-tab-store"},"children":[{"type":"text","value":"Ariakit Tab","position":{"start":{"line":42,"column":23,"offset":1001},"end":{"line":42,"column":34,"offset":1012}}}],"position":{"start":{"line":42,"column":22,"offset":1000},"end":{"line":42,"column":80,"offset":1058}}},{"type":"text","value":" for the state of the Tab.","position":{"start":{"line":42,"column":80,"offset":1058},"end":{"line":42,"column":106,"offset":1084}}}],"position":{"start":{"line":42,"column":1,"offset":979},"end":{"line":42,"column":106,"offset":1084}}},"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":"useTab"}]," from ",["$","$L25","a-0",{"href":"https://ariakit.org/reference/use-tab-store","isExternal":true,"rel":"noreferrer noopener","target":"_blank","node":"$12:0:props:children:2:props:children:40:props:node:children:3","children":"Ariakit Tab"}]," for the state of the Tab."]}],"\n",["$","$L21","p-8",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pass options to ","position":{"start":{"line":44,"column":1,"offset":1086},"end":{"line":44,"column":17,"offset":1102}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useTab","position":{"start":{"line":44,"column":17,"offset":1102},"end":{"line":44,"column":25,"offset":1110}}}],"position":{"start":{"line":44,"column":17,"offset":1102},"end":{"line":44,"column":25,"offset":1110}}},{"type":"text","value":":","position":{"start":{"line":44,"column":25,"offset":1110},"end":{"line":44,"column":26,"offset":1111}}}],"position":{"start":{"line":44,"column":1,"offset":1086},"end":{"line":44,"column":26,"offset":1111}}},"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":"useTab"}],":"]}],"\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":"defaultSelectedId"}],": e.g. ",["$","$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 store = useTab({ defaultSelectedId: 'tab2' })"}]]}],"\n"]}]]}]]}],["$","$L26",null,{"isSubPage":true,"tree":[{"href":"#","id":"definition","title":"Definition"},{"href":"#installation","id":"installation","title":"Installation"},{"href":"#examples","id":"examples","title":"Examples","children":[{"href":"#sizes","id":"sizes","title":"Sizes"},{"href":"#with-no-border","id":"with-no-border","title":"With no border"},{"href":"#with-a-badge","id":"with-a-badge","title":"With a badge"},{"href":"#use-another-component","id":"use-another-component","title":"Use another component"},{"href":"#one-tab","id":"one-tab","title":"One tab"},{"href":"#vertical","id":"vertical","title":"Vertical"}]},{"href":"#use-tab","id":"use-tab","title":"useTab"}]}]]