0:["$","$L3",null,{"buildId":"xAkRdKgVMV3Ud-vwPORfQ","assetPrefix":"","urlParts":["","components","modal"],"initialTree":["",{"children":["components",{"children":[["id","modal","d"],{"children":["__PAGE__?{\"id\":\"modal\"}",{}]}]}]},"$undefined","$undefined",true],"initialSeedData":["",{"children":["components",{"children":[["id","modal","d"],{"children":["__PAGE__",{},[["$L4",[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":["$","$L6",null,{"code":"$7","isOverview":true,"mt":0,"name":"Modal","pathToFile":"/Modal/docs/examples/overview.tsx","withCodeEditor":true}]}],["$","$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":"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":"useModal","position":{"start":{"line":2,"column":5,"offset":5},"end":{"line":2,"column":15,"offset":15}}}],"position":{"start":{"line":2,"column":5,"offset":5},"end":{"line":2,"column":15,"offset":15}}},{"type":"text","value":", ","position":{"start":{"line":2,"column":15,"offset":15},"end":{"line":2,"column":17,"offset":17}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Modal","position":{"start":{"line":2,"column":17,"offset":17},"end":{"line":2,"column":24,"offset":24}}}],"position":{"start":{"line":2,"column":17,"offset":17},"end":{"line":2,"column":24,"offset":24}}},{"type":"text","value":", ","position":{"start":{"line":2,"column":24,"offset":24},"end":{"line":2,"column":26,"offset":26}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Modal.Trigger","position":{"start":{"line":2,"column":26,"offset":26},"end":{"line":2,"column":41,"offset":41}}}],"position":{"start":{"line":2,"column":26,"offset":26},"end":{"line":2,"column":41,"offset":41}}},{"type":"text","value":" and ","position":{"start":{"line":2,"column":41,"offset":41},"end":{"line":2,"column":46,"offset":46}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Modal.Body","position":{"start":{"line":2,"column":46,"offset":46},"end":{"line":2,"column":58,"offset":58}}}],"position":{"start":{"line":2,"column":46,"offset":46},"end":{"line":2,"column":58,"offset":58}}},{"type":"text","value":" to create a simple Modal. To ensure good spacing between modal's sub-components, they must be wrapped with ","position":{"start":{"line":2,"column":58,"offset":58},"end":{"line":2,"column":166,"offset":166}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Modal.Content","position":{"start":{"line":2,"column":166,"offset":166},"end":{"line":2,"column":181,"offset":181}}}],"position":{"start":{"line":2,"column":166,"offset":166},"end":{"line":2,"column":181,"offset":181}}},{"type":"text","value":".","position":{"start":{"line":2,"column":181,"offset":181},"end":{"line":2,"column":182,"offset":182}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":182,"offset":182}}},"children":["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":"useModal"}],", ",["$","$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":"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":"Modal.Trigger"}]," 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":"Modal.Body"}]," to create a simple Modal. To ensure good spacing between modal's sub-components, they must be wrapped 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":"Modal.Content"}],"."]}],"\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-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default size is set to ","position":{"start":{"line":6,"column":1,"offset":195},"end":{"line":6,"column":27,"offset":221}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"lg","position":{"start":{"line":6,"column":27,"offset":221},"end":{"line":6,"column":31,"offset":225}}}],"position":{"start":{"line":6,"column":27,"offset":221},"end":{"line":6,"column":31,"offset":225}}},{"type":"text","value":". If you don't want a size (fit on content), set size to ","position":{"start":{"line":6,"column":31,"offset":225},"end":{"line":6,"column":88,"offset":282}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"auto","position":{"start":{"line":6,"column":88,"offset":282},"end":{"line":6,"column":94,"offset":288}}}],"position":{"start":{"line":6,"column":88,"offset":282},"end":{"line":6,"column":94,"offset":288}}},{"type":"text","value":".","position":{"start":{"line":6,"column":94,"offset":288},"end":{"line":6,"column":95,"offset":289}}}],"position":{"start":{"line":6,"column":1,"offset":195},"end":{"line":6,"column":95,"offset":289}}},"children":["By default size is 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":"lg"}],". If you don't want a size (fit on content), set size 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":"auto"}],"."]}],"\n",["$","$L6",null,{"code":"$a","isOverview":false,"mt":"$undefined","name":"Modal","pathToFile":"/Modal/docs/examples/sizes.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h3","id":"header-and-footer","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#header-and-footer","textDecoration":{"hover":"underline"},"children":"Header and Footer"}]}],"\n",["$","$L9","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use ","position":{"start":{"line":12,"column":1,"offset":378},"end":{"line":12,"column":5,"offset":382}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Modal.Header","position":{"start":{"line":12,"column":5,"offset":382},"end":{"line":12,"column":19,"offset":396}}}],"position":{"start":{"line":12,"column":5,"offset":382},"end":{"line":12,"column":19,"offset":396}}},{"type":"text","value":" and ","position":{"start":{"line":12,"column":19,"offset":396},"end":{"line":12,"column":24,"offset":401}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Modal.Footer","position":{"start":{"line":12,"column":24,"offset":401},"end":{"line":12,"column":38,"offset":415}}}],"position":{"start":{"line":12,"column":24,"offset":401},"end":{"line":12,"column":38,"offset":415}}},{"type":"text","value":" to style your Modal.","position":{"start":{"line":12,"column":38,"offset":415},"end":{"line":12,"column":59,"offset":436}}}],"position":{"start":{"line":12,"column":1,"offset":378},"end":{"line":12,"column":59,"offset":436}}},"children":["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":"Modal.Header"}]," 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":"Modal.Footer"}]," to style your Modal."]}],"\n",["$","$L6",null,{"code":"$b","isOverview":false,"mt":"$undefined","name":"Modal","pathToFile":"/Modal/docs/examples/header-footer.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h3","id":"on-close","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#on-close","textDecoration":{"hover":"underline"},"children":"onClose"}]}],"\n",["$","$L9","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On ","position":{"start":{"line":18,"column":1,"offset":523},"end":{"line":18,"column":4,"offset":526}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Modal","position":{"start":{"line":18,"column":4,"offset":526},"end":{"line":18,"column":11,"offset":533}}}],"position":{"start":{"line":18,"column":4,"offset":526},"end":{"line":18,"column":11,"offset":533}}},{"type":"text","value":" add ","position":{"start":{"line":18,"column":11,"offset":533},"end":{"line":18,"column":16,"offset":538}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"onClose","position":{"start":{"line":18,"column":16,"offset":538},"end":{"line":18,"column":25,"offset":547}}}],"position":{"start":{"line":18,"column":16,"offset":538},"end":{"line":18,"column":25,"offset":547}}},{"type":"text","value":" to have custom function called on modal close.","position":{"start":{"line":18,"column":25,"offset":547},"end":{"line":18,"column":72,"offset":594}}}],"position":{"start":{"line":18,"column":1,"offset":523},"end":{"line":18,"column":72,"offset":594}}},"children":["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":"Modal"}]," add ",["$","$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":"onClose"}]," to have custom function called on modal close."]}],"\n",["$","$L6",null,{"code":"$c","isOverview":false,"mt":"$undefined","name":"Modal","pathToFile":"/Modal/docs/examples/on-close.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h3","id":"without-close-button","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#without-close-button","textDecoration":{"hover":"underline"},"children":"Without close button"}]}],"\n",["$","$L9","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On ","position":{"start":{"line":24,"column":1,"offset":689},"end":{"line":24,"column":4,"offset":692}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Modal.Content","position":{"start":{"line":24,"column":4,"offset":692},"end":{"line":24,"column":19,"offset":707}}}],"position":{"start":{"line":24,"column":4,"offset":692},"end":{"line":24,"column":19,"offset":707}}},{"type":"text","value":" you can force not showing the close button with ","position":{"start":{"line":24,"column":19,"offset":707},"end":{"line":24,"column":68,"offset":756}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"withClosingButton","position":{"start":{"line":24,"column":68,"offset":756},"end":{"line":24,"column":87,"offset":775}}}],"position":{"start":{"line":24,"column":68,"offset":756},"end":{"line":24,"column":87,"offset":775}}},{"type":"text","value":" to ","position":{"start":{"line":24,"column":87,"offset":775},"end":{"line":24,"column":91,"offset":779}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false","position":{"start":{"line":24,"column":91,"offset":779},"end":{"line":24,"column":98,"offset":786}}}],"position":{"start":{"line":24,"column":91,"offset":779},"end":{"line":24,"column":98,"offset":786}}},{"type":"text","value":".","position":{"start":{"line":24,"column":98,"offset":786},"end":{"line":24,"column":99,"offset":787}}}],"position":{"start":{"line":24,"column":1,"offset":689},"end":{"line":24,"column":99,"offset":787}}},"children":["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":"Modal.Content"}]," you can force not showing the close button 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":"withClosingButton"}]," 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"}],"."]}],"\n",["$","$L6",null,{"code":"$d","isOverview":false,"mt":"$undefined","name":"Modal","pathToFile":"/Modal/docs/examples/without-close.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h3","id":"asset-modal","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#asset-modal","textDecoration":{"hover":"underline"},"children":"AssetModal"}]}],"\n",["$","$L9","p-5",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For our cases we need to show an item in a center of a modal, with specific Backdrop background color and a close button. It's a new sub component to the modal: ","position":{"start":{"line":30,"column":1,"offset":877},"end":{"line":30,"column":162,"offset":1038}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"AssetModal","position":{"start":{"line":30,"column":162,"offset":1038},"end":{"line":30,"column":174,"offset":1050}}}],"position":{"start":{"line":30,"column":162,"offset":1038},"end":{"line":30,"column":174,"offset":1050}}},{"type":"text","value":".","position":{"start":{"line":30,"column":174,"offset":1050},"end":{"line":30,"column":175,"offset":1051}}}],"position":{"start":{"line":30,"column":1,"offset":877},"end":{"line":30,"column":175,"offset":1051}}},"children":["For our cases we need to show an item in a center of a modal, with specific Backdrop background color and a close button. 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":"AssetModal"}],"."]}],"\n",["$","$L8",null,{"as":"h4","id":"image","mb":"md","mt":"xl","variant":"h5","children":"Image"}],"\n",["$","$L6",null,{"code":"import { Button } from 'welcome-ui/Button'\nimport { AssetModal, Modal, useModal } from 'welcome-ui/Modal'\n\nconst Example = () => {\n const modal = useModal()\n\n return (\n <>\n \n Open modal\n \n }\n store={modal}\n >\n \n

\n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Modal","pathToFile":"/Modal/docs/examples/asset-image.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h4","id":"iframe","mb":"md","mt":"xl","variant":"h5","children":"Iframe"}],"\n",["$","$L6",null,{"code":"import { Button } from 'welcome-ui/Button'\nimport { AssetModal, Modal, useModal } from 'welcome-ui/Modal'\n\nconst Example = () => {\n const modal = useModal()\n\n return (\n <>\n \n Open modal\n \n }\n store={modal}\n >\n \n \n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Modal","pathToFile":"/Modal/docs/examples/asset-iframe.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h4","id":"title-and-subtitle","mb":"md","mt":"xl","variant":"h5","children":"Title and Subtitle"}],"\n",["$","$L9","p-6",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Another variant with the ","position":{"start":{"line":42,"column":1,"offset":1244},"end":{"line":42,"column":26,"offset":1269}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"AssetModal.AssetWithTitle","position":{"start":{"line":42,"column":26,"offset":1269},"end":{"line":42,"column":53,"offset":1296}}}],"position":{"start":{"line":42,"column":26,"offset":1269},"end":{"line":42,"column":53,"offset":1296}}},{"type":"text","value":" component.","position":{"start":{"line":42,"column":53,"offset":1296},"end":{"line":42,"column":64,"offset":1307}}}],"position":{"start":{"line":42,"column":1,"offset":1244},"end":{"line":42,"column":64,"offset":1307}}},"children":["Another variant 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":"AssetModal.AssetWithTitle"}]," component."]}],"\n",["$","$L6",null,{"code":"import { Button } from 'welcome-ui/Button'\nimport { AssetModal, Modal, useModal } from 'welcome-ui/Modal'\n\nconst Example = () => {\n const modal = useModal()\n\n return (\n <>\n \n Open modal\n \n }\n store={modal}\n >\n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Modal","pathToFile":"/Modal/docs/examples/asset-title-subtitle.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h4","id":"swiper","mb":"md","mt":"xl","variant":"h5","children":"Swiper"}],"\n",["$","$L9","p-7",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Example with our ","position":{"start":{"line":48,"column":1,"offset":1401},"end":{"line":48,"column":18,"offset":1418}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"","position":{"start":{"line":48,"column":18,"offset":1418},"end":{"line":48,"column":30,"offset":1430}}}],"position":{"start":{"line":48,"column":18,"offset":1418},"end":{"line":48,"column":30,"offset":1430}}},{"type":"text","value":" component.","position":{"start":{"line":48,"column":30,"offset":1430},"end":{"line":48,"column":41,"offset":1441}}}],"position":{"start":{"line":48,"column":1,"offset":1401},"end":{"line":48,"column":41,"offset":1441}}},"children":["Example with our ",["$","$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":""}]," component."]}],"\n",["$","$L6",null,{"code":"$e","isOverview":false,"mt":"$undefined","name":"Modal","pathToFile":"/Modal/docs/examples/asset-swiper.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"as":"h4","id":"swiper-and-title","mb":"md","mt":"xl","variant":"h5","children":"Swiper and Title"}],"\n",["$","$L9","p-8",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Another example with ","position":{"start":{"line":54,"column":1,"offset":1537},"end":{"line":54,"column":22,"offset":1558}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"AssetModal.AssetWithTitle","position":{"start":{"line":54,"column":22,"offset":1558},"end":{"line":54,"column":49,"offset":1585}}}],"position":{"start":{"line":54,"column":22,"offset":1558},"end":{"line":54,"column":49,"offset":1585}}},{"type":"text","value":".","position":{"start":{"line":54,"column":49,"offset":1585},"end":{"line":54,"column":50,"offset":1586}}}],"position":{"start":{"line":54,"column":1,"offset":1537},"end":{"line":54,"column":50,"offset":1586}}},"children":["Another example 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":"AssetModal.AssetWithTitle"}],"."]}],"\n",["$","$L6",null,{"code":"$f","isOverview":false,"mt":"$undefined","name":"Modal","pathToFile":"/Modal/docs/examples/asset-swiper-title.tsx","withCodeEditor":true}],"\n",["$","$L8",null,{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"use-modal","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#use-modal","textDecoration":{"hover":"underline"},"children":"useModal"}]}],"\n",["$","$L9","p-9",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We use ","position":{"start":{"line":60,"column":1,"offset":1678},"end":{"line":60,"column":8,"offset":1685}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useDialogStore","position":{"start":{"line":60,"column":8,"offset":1685},"end":{"line":60,"column":24,"offset":1701}}}],"position":{"start":{"line":60,"column":8,"offset":1685},"end":{"line":60,"column":24,"offset":1701}}},{"type":"text","value":" from ","position":{"start":{"line":60,"column":24,"offset":1701},"end":{"line":60,"column":30,"offset":1707}}},{"type":"element","tagName":"a","properties":{"href":"https://ariakit.org/reference/use-dialog-store"},"children":[{"type":"text","value":"Ariakit Dialog","position":{"start":{"line":60,"column":31,"offset":1708},"end":{"line":60,"column":45,"offset":1722}}}],"position":{"start":{"line":60,"column":30,"offset":1707},"end":{"line":60,"column":94,"offset":1771}}},{"type":"text","value":" for the state of the modal.","position":{"start":{"line":60,"column":94,"offset":1771},"end":{"line":60,"column":122,"offset":1799}}}],"position":{"start":{"line":60,"column":1,"offset":1678},"end":{"line":60,"column":122,"offset":1799}}},"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 ",["$","$L10",null,{"href":"https://ariakit.org/reference/use-dialog-store","isExternal":true,"rel":"noreferrer noopener","target":"_blank","node":"$11","children":"Ariakit Dialog"}]," for the state of the modal."]}],"\n",["$","$L9","p-10",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pass options to ","position":{"start":{"line":62,"column":1,"offset":1801},"end":{"line":62,"column":17,"offset":1817}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useModal","position":{"start":{"line":62,"column":17,"offset":1817},"end":{"line":62,"column":27,"offset":1827}}}],"position":{"start":{"line":62,"column":17,"offset":1817},"end":{"line":62,"column":27,"offset":1827}}},{"type":"text","value":":","position":{"start":{"line":62,"column":27,"offset":1827},"end":{"line":62,"column":28,"offset":1828}}}],"position":{"start":{"line":62,"column":1,"offset":1801},"end":{"line":62,"column":28,"offset":1828}}},"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":"useModal"}],":"]}],"\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 modal = useModal({ defaultOpen: true })"}]]}],"\n",["$","$L5",null,{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5",null,{"as":"strong","color":"neutral-90","fontWeight":"500","children":"onClose"}],": 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 modal = useModal({ onClose: () => console.log('closing the modal') })"}]]}],"\n"]}],"\n",["$","$L9","p-11",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And the hook returns (among other things):","position":{"start":{"line":67,"column":1,"offset":2001},"end":{"line":67,"column":43,"offset":2043}}}],"position":{"start":{"line":67,"column":1,"offset":2001},"end":{"line":67,"column":43,"offset":2043}}},"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 modal 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 modal"]}],"\n"]}]]}]]}],["$","$L1b",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":"#header-and-footer","id":"header-and-footer","title":"Header and Footer"},{"href":"#on-close","id":"on-close","title":"onClose"},{"href":"#without-close-button","id":"without-close-button","title":"Without close button"},{"href":"#asset-modal","id":"asset-modal","title":"AssetModal"}]},{"href":"#use-modal","id":"use-modal","title":"useModal"}]}]],null],null],null]},[[null,["$","$L1c",null,{"gap":"md","margin":"0 auto","maxWidth":1400,"pb":"3xl","px":"xl","templateColumns":{"lg":"16rem auto"},"children":[["$","$L1d",null,{"display":{"_":"none","lg":"flex"},"isSubPage":true,"menu":[{"category":"actions","pages":[{"id":"button","subPages":["props"],"title":"Button"},{"id":"button-group","subPages":["props"],"title":"ButtonGroup"},{"id":"link","subPages":["props"],"title":"Link"}],"parent":"components"},{"category":"data-display","pages":[{"id":"accordion","subPages":["props"],"title":"Accordion"},{"id":"avatar","subPages":["props"],"title":"Avatar"},{"id":"badge","subPages":["props"],"title":"Badge"},{"id":"card","subPages":["props"],"title":"Card"},{"id":"swiper","subPages":["props"],"title":"Swiper"},{"id":"table","subPages":["props"],"title":"Table"},{"id":"tag","subPages":["props"],"title":"Tag"}],"parent":"components"},{"category":"feedback","pages":[{"id":"alert","subPages":["props"],"title":"Alert"},{"id":"toast","subPages":["props"],"title":"Toast"}],"parent":"components"},{"category":"forms","pages":[{"id":"checkbox","subPages":["props"],"title":"Checkbox"},{"id":"date-picker","subPages":["props"],"title":"DatePicker"},{"id":"date-time-picker","subPages":["props"],"title":"DateTimePicker"},{"id":"field","subPages":["props"],"title":"Field"},{"id":"file-drop","subPages":["props"],"title":"FileDrop"},{"id":"file-upload","subPages":["props"],"title":"FileUpload"},{"id":"hint","subPages":["props"],"title":"Hint"},{"id":"input-text","subPages":["props"],"title":"InputText"},{"id":"label","subPages":["props"],"title":"Label"},{"id":"password-input","subPages":["props"],"title":"PasswordInput"},{"id":"picker","subPages":["props"],"title":"Picker"},{"id":"radio-group","subPages":["props"],"title":"RadioGroup"},{"id":"radio-tab","subPages":["props"],"title":"RadioTab"},{"id":"search","subPages":["props"],"title":"Search"},{"id":"select","subPages":["props"],"title":"Select"},{"id":"slider","subPages":["props"],"title":"Slider"},{"id":"textarea","subPages":["props"],"title":"Textarea"},{"id":"time-picker","subPages":["props"],"title":"TimePicker"},{"id":"toggle","subPages":["props"],"title":"Toggle"}],"parent":"components"},{"category":"icons-&-logo","pages":[{"id":"icon","subPages":["props"],"title":"Icons"},{"id":"icons-font","subPages":["props"],"title":"IconsFont"},{"id":"logo","subPages":["props"],"title":"Logo"},{"id":"variant-icon","subPages":["props"],"title":"VariantIcon"},{"id":"welcome-loader","subPages":["props"],"title":"WelcomeLoader"}],"parent":"components"},{"category":"layout","pages":[{"id":"aspect-ratio","subPages":["props"],"title":"AspectRatio"},{"id":"box","subPages":["props"],"title":"Box"},{"id":"flex","subPages":["props"],"title":"Flex"},{"id":"grid","subPages":["props"],"title":"Grid"},{"id":"loader","subPages":["props"],"title":"Loader"},{"id":"shape","subPages":["props"],"title":"Shape"},{"id":"stack","subPages":["props"],"title":"Stack"}],"parent":"components"},{"category":"navigation","pages":[{"id":"breadcrumb","subPages":["props"],"title":"Breadcrumb"},{"id":"dropdown-menu","subPages":["props"],"title":"DropdownMenu"},{"id":"pagination","subPages":["props"],"title":"Pagination"},{"id":"tabs","subPages":["props"],"title":"Tabs"}],"parent":"components"},{"category":"overlay","pages":[{"id":"drawer","subPages":["props"],"title":"Drawer"},{"id":"modal","subPages":["props"],"title":"Modal"},{"id":"popover","subPages":["props"],"title":"Popover"},{"id":"tooltip","subPages":["props"],"title":"Tooltip"}],"parent":"components"},{"category":"typography","pages":[{"id":"text","subPages":["props"],"title":"Text"}],"parent":"components"}]}],["$","div",null,{"children":[["$","$L1e",null,{"direction":"column","gap":"xl","mb":"lg","children":[["$","$L8",null,{"mt":"3xl","variant":"h1","children":"Modal"}],["$","$L8",null,{"color":"neutral-60","pt":"lg","variant":"lg","children":"The Modal component is a versatile UI element that displays content in a layer above the main application interface, requiring user interaction before returning to the main view. It is used for critical information, forms, confirmations, and other interactive tasks. Modals help focus user attention on specific content or actions, improving the overall user experience by preventing background interactions."}],["$","$L1e",null,{"align":"center","gap":"md","children":[["$","$L1f",null,{"as":"a","href":"https://github.com/WTTJ/welcome-ui/tree/main/lib/src/components/Modal","rel":"noreferrer noopener","size":"sm","target":"_blank","variant":"tertiary","children":[["$","$L20",null,{}],["$","span",null,{"children":"Source"}]]}],["$","$L1f",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"}]]}]]}]]}],["$","$L21",null,{"pages":"$22"}],["$","$L1c",null,{"gap":"xl","templateColumns":{"xl":"auto 15rem"},"children":[["$","$L9d",null,{"parallelRouterKey":"children","segmentPath":["children","components","children","$9e","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L9f",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}],["$","$La0",null,{"basePage":"components","currentId":"modal","pages":"$22"}]]}]]}]]}]],null],null]},[null,["$","$L9d",null,{"parallelRouterKey":"children","segmentPath":["children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L9f",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":["$","$La1",null,{"children":["$","$La2",null,{"children":["$","$La3",null,{"children":["$","$L5",null,{"backgroundColor":"neutral-10","children":[["$","$La4",null,{"components":[{"category":"actions","pages":[{"id":"button","subPages":["props"],"title":"Button"},{"id":"button-group","subPages":["props"],"title":"ButtonGroup"},{"id":"link","subPages":["props"],"title":"Link"}],"parent":"components"},{"category":"data-display","pages":[{"id":"accordion","subPages":["props"],"title":"Accordion"},{"id":"avatar","subPages":["props"],"title":"Avatar"},{"id":"badge","subPages":["props"],"title":"Badge"},{"id":"card","subPages":["props"],"title":"Card"},{"id":"swiper","subPages":["props"],"title":"Swiper"},{"id":"table","subPages":["props"],"title":"Table"},{"id":"tag","subPages":["props"],"title":"Tag"}],"parent":"components"},{"category":"feedback","pages":[{"id":"alert","subPages":["props"],"title":"Alert"},{"id":"toast","subPages":["props"],"title":"Toast"}],"parent":"components"},{"category":"forms","pages":[{"id":"checkbox","subPages":["props"],"title":"Checkbox"},{"id":"date-picker","subPages":["props"],"title":"DatePicker"},{"id":"date-time-picker","subPages":["props"],"title":"DateTimePicker"},{"id":"field","subPages":["props"],"title":"Field"},{"id":"file-drop","subPages":["props"],"title":"FileDrop"},{"id":"file-upload","subPages":["props"],"title":"FileUpload"},{"id":"hint","subPages":["props"],"title":"Hint"},{"id":"input-text","subPages":["props"],"title":"InputText"},{"id":"label","subPages":["props"],"title":"Label"},{"id":"password-input","subPages":["props"],"title":"PasswordInput"},{"id":"picker","subPages":["props"],"title":"Picker"},{"id":"radio-group","subPages":["props"],"title":"RadioGroup"},{"id":"radio-tab","subPages":["props"],"title":"RadioTab"},{"id":"search","subPages":["props"],"title":"Search"},{"id":"select","subPages":["props"],"title":"Select"},{"id":"slider","subPages":["props"],"title":"Slider"},{"id":"textarea","subPages":["props"],"title":"Textarea"},{"id":"time-picker","subPages":["props"],"title":"TimePicker"},{"id":"toggle","subPages":["props"],"title":"Toggle"}],"parent":"components"},{"category":"icons-&-logo","pages":[{"id":"icon","subPages":["props"],"title":"Icons"},{"id":"icons-font","subPages":["props"],"title":"IconsFont"},{"id":"logo","subPages":["props"],"title":"Logo"},{"id":"variant-icon","subPages":["props"],"title":"VariantIcon"},{"id":"welcome-loader","subPages":["props"],"title":"WelcomeLoader"}],"parent":"components"},{"category":"layout","pages":[{"id":"aspect-ratio","subPages":["props"],"title":"AspectRatio"},{"id":"box","subPages":["props"],"title":"Box"},{"id":"flex","subPages":["props"],"title":"Flex"},{"id":"grid","subPages":["props"],"title":"Grid"},{"id":"loader","subPages":["props"],"title":"Loader"},{"id":"shape","subPages":["props"],"title":"Shape"},{"id":"stack","subPages":["props"],"title":"Stack"}],"parent":"components"},{"category":"navigation","pages":[{"id":"breadcrumb","subPages":["props"],"title":"Breadcrumb"},{"id":"dropdown-menu","subPages":["props"],"title":"DropdownMenu"},{"id":"pagination","subPages":["props"],"title":"Pagination"},{"id":"tabs","subPages":["props"],"title":"Tabs"}],"parent":"components"},{"category":"overlay","pages":[{"id":"drawer","subPages":["props"],"title":"Drawer"},{"id":"modal","subPages":["props"],"title":"Modal"},{"id":"popover","subPages":["props"],"title":"Popover"},{"id":"tooltip","subPages":["props"],"title":"Tooltip"}],"parent":"components"},{"category":"typography","pages":[{"id":"text","subPages":["props"],"title":"Text"}],"parent":"components"}],"foundations":[{"pages":[{"id":"getting-started"},{"id":"how-to-contribute"}],"parent":"foundations"},{"category":"theming","pages":[{"id":"basics","parent":"theming"},{"id":"customize","parent":"theming"}],"parent":"foundations"},{"category":"upgrades","pages":[{"id":"olders","parent":"upgrades"},{"id":"v8","parent":"upgrades"}],"parent":"foundations"}]}],["$","$La5",null,{}],["$","$L9d",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L9f",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"children":[["$","h2",null,{"children":"Not Found"}],["$","p",null,{"children":"Could not find requested resource"}],["$","$La6",null,{"href":"/","children":"Return Home"}]]}],"notFoundStyles":[]}],["$","$L5",null,{"as":"footer","position":"relative","py":{"md":90,"xs":"xxl"},"backgroundColor":"beige-20","children":["$","$L5",null,{"margin":"0 auto","maxWidth":1200,"position":"relative","px":"lg","children":["$","$L1c",null,{"gap":"xl","gridTemplateColumns":{"_":"1fr 1fr","md":"1fr 1fr 1fr 1fr"},"children":[["$","$L1e",null,{"flexDirection":"column","gap":"xs","children":[["$","$L1e",null,{"alignItems":"center","gap":"sm","children":["Made with ",["$","$La7",null,{"color":"primary-50"}]," by"]}],["$","$L5",null,{"as":"a","href":"https://www.welcometothejungle.com","rel":"noreferrer noopener","target":"_blank","w":"fit-content","children":["$","$La8",null,{"h":40}]}]]}],[["$","$L1e","Documentations",{"as":"nav","flexDirection":"column","gap":"lg","children":[["$","$L8",null,{"variant":"subtitle-md","children":"Documentations"}],["$","$L1e",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",null]}]}],["$","$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",null]}]}],["$","$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",["$","$La9",null,{"color":"neutral-60","size":"xs"}]]}]}]]}]]}],["$","$L1e","Updates",{"as":"nav","flexDirection":"column","gap":"lg","children":[["$","$L8",null,{"variant":"subtitle-md","children":"Updates"}],["$","$L1e",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",["$","$La9",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",["$","$La9",null,{"color":"neutral-60","size":"xs"}]]}]}]]}]]}],["$","$L1e","Community",{"as":"nav","flexDirection":"column","gap":"lg","children":[["$","$L8",null,{"variant":"subtitle-md","children":"Community"}],["$","$L1e",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",["$","$La9",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",["$","$La9",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",["$","$La9",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",["$","$La9",null,{"color":"neutral-60","size":"xs"}]]}]}]]}]]}]]]}]}]}]]}]}]}]}]}]]}]],null],null],"couldBeIntercepted":false,"initialHead":[null,"$Laa"],"globalErrorComponent":"$ab","missingSlots":"$Wac"}]