12:[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":[["$","$L20","div-0",{"code":"import { Alert } from 'welcome-ui/Alert'\n\nconst Example = () => {\n return (\n \n Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan\n ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.\n \n )\n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"Alert","pathToFile":"/Alert/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":"variants","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#variants","textDecoration":{"hover":"underline"},"children":"Variants"}]}],"\n",["$","$L20","div-0",{"code":"$21","isOverview":false,"mt":"$undefined","name":"Alert","pathToFile":"/Alert/docs/examples/variants.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-1",{"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",["$","$L22","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default the size is ","position":{"start":{"line":8,"column":1,"offset":93},"end":{"line":8,"column":24,"offset":116}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sm","position":{"start":{"line":8,"column":24,"offset":116},"end":{"line":8,"column":28,"offset":120}}}],"position":{"start":{"line":8,"column":24,"offset":116},"end":{"line":8,"column":28,"offset":120}}},{"type":"text","value":".","position":{"start":{"line":8,"column":28,"offset":120},"end":{"line":8,"column":29,"offset":121}}}],"position":{"start":{"line":8,"column":1,"offset":93},"end":{"line":8,"column":29,"offset":121}}},"children":["By default the size is ",["$","$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"}],"."]}],"\n",["$","$L20","div-1",{"code":"import { Alert } from 'welcome-ui/Alert'\nimport { Stack } from 'welcome-ui/Stack'\n\nconst Example = () => {\n return (\n \n Button}>\n Default size\n Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan\n ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a\n ornare.\n \n Button} size=\"md\">\n Medium size\n Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan\n ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a\n ornare.\n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Alert","pathToFile":"/Alert/docs/examples/sizes.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-2",{"as":"h3","id":"alert-title","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#alert-title","textDecoration":{"hover":"underline"},"children":"Alert.Title"}]}],"\n",["$","$L20","div-2",{"code":"import { Alert } from 'welcome-ui/Alert'\n\nconst Example = () => {\n return (\n \n Title\n Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan\n ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Alert","pathToFile":"/Alert/docs/examples/title.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-3",{"as":"h3","id":"alert-button","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#alert-button","textDecoration":{"hover":"underline"},"children":"Alert.Button"}]}],"\n",["$","$L22","p-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the ","position":{"start":{"line":18,"column":1,"offset":286},"end":{"line":18,"column":10,"offset":295}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cta","position":{"start":{"line":18,"column":10,"offset":295},"end":{"line":18,"column":15,"offset":300}}}],"position":{"start":{"line":18,"column":10,"offset":295},"end":{"line":18,"column":15,"offset":300}}},{"type":"text","value":" prop is used, by default it will be displayed in a row bellow the content.","position":{"start":{"line":18,"column":15,"offset":300},"end":{"line":18,"column":90,"offset":375}}}],"position":{"start":{"line":18,"column":1,"offset":286},"end":{"line":18,"column":90,"offset":375}}},"children":["When 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":"cta"}]," prop is used, by default it will be displayed in a row bellow the content."]}],"\n",["$","$L20","div-3",{"code":"$23","isOverview":false,"mt":"$undefined","name":"Alert","pathToFile":"/Alert/docs/examples/cta.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-4",{"as":"h3","id":"full-width","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#full-width","textDecoration":{"hover":"underline"},"children":"Full Width"}]}],"\n",["$","$L22","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Set property ","position":{"start":{"line":24,"column":1,"offset":455},"end":{"line":24,"column":14,"offset":468}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"isFullWidth","position":{"start":{"line":24,"column":14,"offset":468},"end":{"line":24,"column":27,"offset":481}}}],"position":{"start":{"line":24,"column":14,"offset":468},"end":{"line":24,"column":27,"offset":481}}},{"type":"text","value":" to take the full width of the parent.","position":{"start":{"line":24,"column":27,"offset":481},"end":{"line":24,"column":65,"offset":519}}}],"position":{"start":{"line":24,"column":1,"offset":455},"end":{"line":24,"column":65,"offset":519}}},"children":["Set property ",["$","$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":"isFullWidth"}]," to take the full width of the parent."]}],"\n",["$","$L20","div-4",{"code":"import { Alert } from 'welcome-ui/Alert'\n\nconst Example = () => {\n return (\n Button} isFullWidth>\n Welcome to the jungle\n Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan\n ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Alert","pathToFile":"/Alert/docs/examples/is-full-width.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-5",{"as":"h3","id":"close-button","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#close-button","textDecoration":{"hover":"underline"},"children":"CloseButton"}]}],"\n",["$","$L22","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To show a close button you need to pass your function on the ","position":{"start":{"line":30,"column":1,"offset":610},"end":{"line":30,"column":62,"offset":671}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"handleClose","position":{"start":{"line":30,"column":62,"offset":671},"end":{"line":30,"column":75,"offset":684}}}],"position":{"start":{"line":30,"column":62,"offset":671},"end":{"line":30,"column":75,"offset":684}}},{"type":"text","value":" property.","position":{"start":{"line":30,"column":75,"offset":684},"end":{"line":30,"column":85,"offset":694}}}],"position":{"start":{"line":30,"column":1,"offset":610},"end":{"line":30,"column":85,"offset":694}}},"children":["To show a close button you need to pass your function 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":"handleClose"}]," property."]}],"\n",["$","$L20","div-5",{"code":"import * as React from 'react'\n\nimport { Alert } from 'welcome-ui/Alert'\n\nconst Example = () => {\n const [hideAlert, setHideAlert] = React.useState(false)\n\n return hideAlert ? (\n It’s hidden!\n ) : (\n setHideAlert(true)}>\n Welcome to the jungle\n Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan\n ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Alert","pathToFile":"/Alert/docs/examples/close-button.tsx","withCodeEditor":true}]]}]]}],["$","$L24",null,{"isSubPage":true,"tree":[{"href":"#","id":"definition","title":"Definition"},{"href":"#installation","id":"installation","title":"Installation"},{"href":"#examples","id":"examples","title":"Examples","children":[{"href":"#variants","id":"variants","title":"Variants"},{"href":"#sizes","id":"sizes","title":"Sizes"},{"href":"#alert-title","id":"alert-title","title":"Alert.Title"},{"href":"#alert-button","id":"alert-button","title":"Alert.Button"},{"href":"#full-width","id":"full-width","title":"Full Width"},{"href":"#close-button","id":"close-button","title":"CloseButton"}]}]}]]