[{"data":1,"prerenderedAt":4286},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-callout":682,"-docs-theme-components-callout-surround":4281},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":408,"body":684,"description":4275,"extension":1168,"links":4276,"meta":4277,"navigation":4278,"path":409,"seo":4279,"stem":410,"__hash__":4280},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout.md",{"type":685,"value":686,"toc":4243},"minimark",[687,691,709,716,720,723,763,767,2332,2335,2367,2372,2375,2380,2383,2534,2541,2545,2553,2557,2560,2563,2567,2570,2573,2577,2580,2583,2586,2599,2602,2606,2617,2620,2624,2627,2714,2718,2729,2732,2735,2738,2741,2744,2747,2751,2754,2797,2800,2816,2948,2963,3082,3112,3131,3135,3139,3144,3353,3357,3364,3541,3548,3551,3557,3560,3565,3686,3691,3794,3799,3803,3882,3886,4239],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,708],"p",{},"The ",[696,697,408],"strong",{}," is a contextual feedback element used for alerts, notifications, status messages, and inline notices. The ",[700,701,702],"code",{},"useCalloutRecipe()"," composable creates a fully configured ",[705,706,707],"a",{"href":132},"recipe"," with color, variant, size, and orientation options — plus compound variants that handle the color-variant combinations automatically.",[692,710,711,712,715],{},"The Callout recipe integrates directly with the default ",[705,713,714],{"href":171},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS.",[688,717,719],{"id":718},"why-use-the-callout-recipe","Why use the Callout recipe?",[692,721,722],{},"The Callout recipe helps you:",[724,725,726,733,739,745,751,757],"ul",{},[727,728,729,732],"li",{},[696,730,731],{},"Ship faster with sensible defaults",": Get 9 colors, 4 visual styles, 3 sizes, and 2 orientations out of the box with a single composable call.",[727,734,735,738],{},[696,736,737],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same design rules, including dark mode overrides.",[727,740,741,744],{},[696,742,743],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[727,746,747,750],{},[696,748,749],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, size, or orientation values at compile time.",[727,752,753,756],{},[696,754,755],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[727,758,759,762],{},[696,760,761],{},"Support flexible layouts",": Horizontal and vertical orientations adapt to your content structure, from compact inline messages to detailed multi-line notices.",[688,764,766],{"id":765},"usage","Usage",[768,769,771,776,783,1031,1035,1042,2323,2327],"steps",{"level":770},"4",[772,773,775],"h4",{"id":774},"register-the-recipe","Register the recipe",[692,777,778,779,782],{},"Add the Callout recipe to a local Styleframe instance. The global ",[700,780,781],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipe itself:",[784,785,787,923],"code-tree",{"default-value":786},"src\u002Fcomponents\u002Fcallout.styleframe.ts",[788,789,794],"pre",{"className":790,"code":791,"filename":786,"language":792,"meta":793,"style":793},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useCalloutRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst callout = useCalloutRecipe(s);\n\nexport default s;\n","ts","",[700,795,796,832,855,861,882,887,904,909],{"__ignoreMap":793},[797,798,801,805,809,813,816,819,822,826,829],"span",{"class":799,"line":800},"line",1,[797,802,804],{"class":803},"s7zQu","import",[797,806,808],{"class":807},"sMK4o"," {",[797,810,812],{"class":811},"sTEyZ"," styleframe",[797,814,815],{"class":807}," }",[797,817,818],{"class":803}," from",[797,820,821],{"class":807}," '",[797,823,825],{"class":824},"sfazB","virtual:styleframe",[797,827,828],{"class":807},"'",[797,830,831],{"class":807},";\n",[797,833,835,837,839,842,844,846,848,851,853],{"class":799,"line":834},2,[797,836,804],{"class":803},[797,838,808],{"class":807},[797,840,841],{"class":811}," useCalloutRecipe",[797,843,815],{"class":807},[797,845,818],{"class":803},[797,847,821],{"class":807},[797,849,850],{"class":824},"@styleframe\u002Ftheme",[797,852,828],{"class":807},[797,854,831],{"class":807},[797,856,858],{"class":799,"line":857},3,[797,859,860],{"emptyLinePlaceholder":223},"\n",[797,862,864,868,871,874,877,880],{"class":799,"line":863},4,[797,865,867],{"class":866},"spNyl","const",[797,869,870],{"class":811}," s ",[797,872,873],{"class":807},"=",[797,875,812],{"class":876},"s2Zo4",[797,878,879],{"class":811},"()",[797,881,831],{"class":807},[797,883,885],{"class":799,"line":884},5,[797,886,860],{"emptyLinePlaceholder":223},[797,888,890,892,895,897,899,902],{"class":799,"line":889},6,[797,891,867],{"class":866},[797,893,894],{"class":811}," callout ",[797,896,873],{"class":807},[797,898,841],{"class":876},[797,900,901],{"class":811},"(s)",[797,903,831],{"class":807},[797,905,907],{"class":799,"line":906},7,[797,908,860],{"emptyLinePlaceholder":223},[797,910,912,915,918,921],{"class":799,"line":911},8,[797,913,914],{"class":803},"export",[797,916,917],{"class":803}," default",[797,919,920],{"class":811}," s",[797,922,831],{"class":807},[788,924,926],{"className":790,"code":925,"filename":781,"language":792,"meta":793,"style":793},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[700,927,928,949,976,980,994,998,1007,1016,1020],{"__ignoreMap":793},[797,929,930,932,934,936,938,940,942,945,947],{"class":799,"line":800},[797,931,804],{"class":803},[797,933,808],{"class":807},[797,935,812],{"class":811},[797,937,815],{"class":807},[797,939,818],{"class":803},[797,941,821],{"class":807},[797,943,944],{"class":824},"styleframe",[797,946,828],{"class":807},[797,948,831],{"class":807},[797,950,951,953,955,958,961,964,966,968,970,972,974],{"class":799,"line":834},[797,952,804],{"class":803},[797,954,808],{"class":807},[797,956,957],{"class":811}," useDesignTokensPreset",[797,959,960],{"class":807},",",[797,962,963],{"class":811}," useUtilitiesPreset",[797,965,815],{"class":807},[797,967,818],{"class":803},[797,969,821],{"class":807},[797,971,850],{"class":824},[797,973,828],{"class":807},[797,975,831],{"class":807},[797,977,978],{"class":799,"line":857},[797,979,860],{"emptyLinePlaceholder":223},[797,981,982,984,986,988,990,992],{"class":799,"line":863},[797,983,867],{"class":866},[797,985,870],{"class":811},[797,987,873],{"class":807},[797,989,812],{"class":876},[797,991,879],{"class":811},[797,993,831],{"class":807},[797,995,996],{"class":799,"line":884},[797,997,860],{"emptyLinePlaceholder":223},[797,999,1000,1003,1005],{"class":799,"line":889},[797,1001,1002],{"class":876},"useDesignTokensPreset",[797,1004,901],{"class":811},[797,1006,831],{"class":807},[797,1008,1009,1012,1014],{"class":799,"line":906},[797,1010,1011],{"class":876},"useUtilitiesPreset",[797,1013,901],{"class":811},[797,1015,831],{"class":807},[797,1017,1018],{"class":799,"line":911},[797,1019,860],{"emptyLinePlaceholder":223},[797,1021,1023,1025,1027,1029],{"class":799,"line":1022},9,[797,1024,914],{"class":803},[797,1026,917],{"class":803},[797,1028,920],{"class":811},[797,1030,831],{"class":807},[772,1032,1034],{"id":1033},"build-the-component","Build the component",[692,1036,1037,1038,1041],{},"Import the ",[700,1039,1040],{},"callout"," runtime function from the virtual module and pass variant props to compute class names:",[1043,1044,1045,1573,2133],"framework-switcher",{},[1046,1047,1048],"template",{"v-slot:vue":793},[788,1049,1054],{"className":1050,"code":1051,"filename":1052,"language":1053,"meta":793,"style":793},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { callout, type CalloutProps } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    variant = \"subtle\",\n    size = \"md\",\n    orientation = \"horizontal\",\n    title,\n    description,\n    dismissible = false,\n} = defineProps\u003CCalloutProps & { title?: string; description?: string; dismissible?: boolean }>();\n\nconst emit = defineEmits\u003C{\n    dismiss: [];\n}>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"callout({ color, variant, size, orientation })\" role=\"alert\">\n        \u003Cslot name=\"icon\" \u002F>\n        \u003Cdiv>\n            \u003Cstrong v-if=\"title\">{{ title }}\u003C\u002Fstrong>\n            \u003Cp v-if=\"description\">{{ description }}\u003C\u002Fp>\n            \u003Cslot \u002F>\n        \u003C\u002Fdiv>\n        \u003Cbutton v-if=\"dismissible\" aria-label=\"Dismiss\" @click=\"emit('dismiss')\">\n            ×\n        \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FCallout.vue","vue",[700,1055,1056,1083,1113,1117,1124,1141,1157,1173,1189,1196,1204,1218,1277,1282,1298,1312,1322,1332,1337,1346,1381,1405,1414,1446,1475,1484,1494,1539,1545,1554,1564],{"__ignoreMap":793},[797,1057,1058,1061,1065,1068,1071,1073,1076,1078,1080],{"class":799,"line":800},[797,1059,1060],{"class":807},"\u003C",[797,1062,1064],{"class":1063},"swJcz","script",[797,1066,1067],{"class":866}," setup",[797,1069,1070],{"class":866}," lang",[797,1072,873],{"class":807},[797,1074,1075],{"class":807},"\"",[797,1077,792],{"class":824},[797,1079,1075],{"class":807},[797,1081,1082],{"class":807},">\n",[797,1084,1085,1087,1089,1092,1094,1097,1100,1102,1104,1107,1109,1111],{"class":799,"line":834},[797,1086,804],{"class":803},[797,1088,808],{"class":807},[797,1090,1091],{"class":811}," callout",[797,1093,960],{"class":807},[797,1095,1096],{"class":803}," type",[797,1098,1099],{"class":811}," CalloutProps",[797,1101,815],{"class":807},[797,1103,818],{"class":803},[797,1105,1106],{"class":807}," \"",[797,1108,825],{"class":824},[797,1110,1075],{"class":807},[797,1112,831],{"class":807},[797,1114,1115],{"class":799,"line":857},[797,1116,860],{"emptyLinePlaceholder":223},[797,1118,1119,1121],{"class":799,"line":863},[797,1120,867],{"class":866},[797,1122,1123],{"class":807}," {\n",[797,1125,1126,1129,1131,1133,1136,1138],{"class":799,"line":884},[797,1127,1128],{"class":811},"    color ",[797,1130,873],{"class":807},[797,1132,1106],{"class":807},[797,1134,1135],{"class":824},"neutral",[797,1137,1075],{"class":807},[797,1139,1140],{"class":807},",\n",[797,1142,1143,1146,1148,1150,1153,1155],{"class":799,"line":889},[797,1144,1145],{"class":811},"    variant ",[797,1147,873],{"class":807},[797,1149,1106],{"class":807},[797,1151,1152],{"class":824},"subtle",[797,1154,1075],{"class":807},[797,1156,1140],{"class":807},[797,1158,1159,1162,1164,1166,1169,1171],{"class":799,"line":906},[797,1160,1161],{"class":811},"    size ",[797,1163,873],{"class":807},[797,1165,1106],{"class":807},[797,1167,1168],{"class":824},"md",[797,1170,1075],{"class":807},[797,1172,1140],{"class":807},[797,1174,1175,1178,1180,1182,1185,1187],{"class":799,"line":911},[797,1176,1177],{"class":811},"    orientation ",[797,1179,873],{"class":807},[797,1181,1106],{"class":807},[797,1183,1184],{"class":824},"horizontal",[797,1186,1075],{"class":807},[797,1188,1140],{"class":807},[797,1190,1191,1194],{"class":799,"line":1022},[797,1192,1193],{"class":811},"    title",[797,1195,1140],{"class":807},[797,1197,1199,1202],{"class":799,"line":1198},10,[797,1200,1201],{"class":811},"    description",[797,1203,1140],{"class":807},[797,1205,1207,1210,1212,1216],{"class":799,"line":1206},11,[797,1208,1209],{"class":811},"    dismissible ",[797,1211,873],{"class":807},[797,1213,1215],{"class":1214},"sfNiH"," false",[797,1217,1140],{"class":807},[797,1219,1221,1224,1227,1230,1232,1236,1239,1241,1244,1247,1250,1253,1256,1258,1260,1262,1265,1267,1270,1273,1275],{"class":799,"line":1220},12,[797,1222,1223],{"class":807},"}",[797,1225,1226],{"class":807}," =",[797,1228,1229],{"class":876}," defineProps",[797,1231,1060],{"class":807},[797,1233,1235],{"class":1234},"sBMFI","CalloutProps",[797,1237,1238],{"class":807}," &",[797,1240,808],{"class":807},[797,1242,1243],{"class":1063}," title",[797,1245,1246],{"class":807},"?:",[797,1248,1249],{"class":1234}," string",[797,1251,1252],{"class":807},";",[797,1254,1255],{"class":1063}," description",[797,1257,1246],{"class":807},[797,1259,1249],{"class":1234},[797,1261,1252],{"class":807},[797,1263,1264],{"class":1063}," dismissible",[797,1266,1246],{"class":807},[797,1268,1269],{"class":1234}," boolean",[797,1271,1272],{"class":807}," }>",[797,1274,879],{"class":811},[797,1276,831],{"class":807},[797,1278,1280],{"class":799,"line":1279},13,[797,1281,860],{"emptyLinePlaceholder":223},[797,1283,1285,1287,1290,1292,1295],{"class":799,"line":1284},14,[797,1286,867],{"class":866},[797,1288,1289],{"class":811}," emit ",[797,1291,873],{"class":807},[797,1293,1294],{"class":876}," defineEmits",[797,1296,1297],{"class":807},"\u003C{\n",[797,1299,1301,1304,1307,1310],{"class":799,"line":1300},15,[797,1302,1303],{"class":1063},"    dismiss",[797,1305,1306],{"class":807},":",[797,1308,1309],{"class":811}," []",[797,1311,831],{"class":807},[797,1313,1315,1318,1320],{"class":799,"line":1314},16,[797,1316,1317],{"class":807},"}>",[797,1319,879],{"class":811},[797,1321,831],{"class":807},[797,1323,1325,1328,1330],{"class":799,"line":1324},17,[797,1326,1327],{"class":807},"\u003C\u002F",[797,1329,1064],{"class":1063},[797,1331,1082],{"class":807},[797,1333,1335],{"class":799,"line":1334},18,[797,1336,860],{"emptyLinePlaceholder":223},[797,1338,1340,1342,1344],{"class":799,"line":1339},19,[797,1341,1060],{"class":807},[797,1343,1046],{"class":1063},[797,1345,1082],{"class":807},[797,1347,1349,1352,1355,1358,1360,1362,1365,1367,1370,1372,1374,1377,1379],{"class":799,"line":1348},20,[797,1350,1351],{"class":807},"    \u003C",[797,1353,1354],{"class":1063},"div",[797,1356,1357],{"class":866}," :class",[797,1359,873],{"class":807},[797,1361,1075],{"class":807},[797,1363,1364],{"class":824},"callout({ color, variant, size, orientation })",[797,1366,1075],{"class":807},[797,1368,1369],{"class":866}," role",[797,1371,873],{"class":807},[797,1373,1075],{"class":807},[797,1375,1376],{"class":824},"alert",[797,1378,1075],{"class":807},[797,1380,1082],{"class":807},[797,1382,1384,1387,1390,1393,1395,1397,1400,1402],{"class":799,"line":1383},21,[797,1385,1386],{"class":807},"        \u003C",[797,1388,1389],{"class":1063},"slot",[797,1391,1392],{"class":866}," name",[797,1394,873],{"class":807},[797,1396,1075],{"class":807},[797,1398,1399],{"class":824},"icon",[797,1401,1075],{"class":807},[797,1403,1404],{"class":807}," \u002F>\n",[797,1406,1408,1410,1412],{"class":799,"line":1407},22,[797,1409,1386],{"class":807},[797,1411,1354],{"class":1063},[797,1413,1082],{"class":807},[797,1415,1417,1420,1422,1425,1427,1429,1432,1434,1437,1440,1442,1444],{"class":799,"line":1416},23,[797,1418,1419],{"class":807},"            \u003C",[797,1421,696],{"class":1063},[797,1423,1424],{"class":866}," v-if",[797,1426,873],{"class":807},[797,1428,1075],{"class":807},[797,1430,1431],{"class":824},"title",[797,1433,1075],{"class":807},[797,1435,1436],{"class":807},">",[797,1438,1439],{"class":811},"{{ title }}",[797,1441,1327],{"class":807},[797,1443,696],{"class":1063},[797,1445,1082],{"class":807},[797,1447,1449,1451,1453,1455,1457,1459,1462,1464,1466,1469,1471,1473],{"class":799,"line":1448},24,[797,1450,1419],{"class":807},[797,1452,692],{"class":1063},[797,1454,1424],{"class":866},[797,1456,873],{"class":807},[797,1458,1075],{"class":807},[797,1460,1461],{"class":824},"description",[797,1463,1075],{"class":807},[797,1465,1436],{"class":807},[797,1467,1468],{"class":811},"{{ description }}",[797,1470,1327],{"class":807},[797,1472,692],{"class":1063},[797,1474,1082],{"class":807},[797,1476,1478,1480,1482],{"class":799,"line":1477},25,[797,1479,1419],{"class":807},[797,1481,1389],{"class":1063},[797,1483,1404],{"class":807},[797,1485,1487,1490,1492],{"class":799,"line":1486},26,[797,1488,1489],{"class":807},"        \u003C\u002F",[797,1491,1354],{"class":1063},[797,1493,1082],{"class":807},[797,1495,1497,1499,1502,1504,1506,1508,1511,1513,1516,1518,1520,1523,1525,1528,1530,1532,1535,1537],{"class":799,"line":1496},27,[797,1498,1386],{"class":807},[797,1500,1501],{"class":1063},"button",[797,1503,1424],{"class":866},[797,1505,873],{"class":807},[797,1507,1075],{"class":807},[797,1509,1510],{"class":824},"dismissible",[797,1512,1075],{"class":807},[797,1514,1515],{"class":866}," aria-label",[797,1517,873],{"class":807},[797,1519,1075],{"class":807},[797,1521,1522],{"class":824},"Dismiss",[797,1524,1075],{"class":807},[797,1526,1527],{"class":866}," @click",[797,1529,873],{"class":807},[797,1531,1075],{"class":807},[797,1533,1534],{"class":824},"emit('dismiss')",[797,1536,1075],{"class":807},[797,1538,1082],{"class":807},[797,1540,1542],{"class":799,"line":1541},28,[797,1543,1544],{"class":811},"            ×\n",[797,1546,1548,1550,1552],{"class":799,"line":1547},29,[797,1549,1489],{"class":807},[797,1551,1501],{"class":1063},[797,1553,1082],{"class":807},[797,1555,1557,1560,1562],{"class":799,"line":1556},30,[797,1558,1559],{"class":807},"    \u003C\u002F",[797,1561,1354],{"class":1063},[797,1563,1082],{"class":807},[797,1565,1567,1569,1571],{"class":799,"line":1566},31,[797,1568,1327],{"class":807},[797,1570,1046],{"class":1063},[797,1572,1082],{"class":807},[1046,1574,1575],{"v-slot:react":793},[788,1576,1579],{"className":790,"code":1577,"filename":1578,"language":792,"meta":793,"style":793},"import { callout, type CalloutProps } from \"virtual:styleframe\";\n\ninterface CalloutComponentProps extends CalloutProps {\n    title?: string;\n    description?: string;\n    icon?: React.ReactNode;\n    dismissible?: boolean;\n    onDismiss?: () => void;\n    children?: React.ReactNode;\n}\n\nexport function Callout({\n    color = \"neutral\",\n    variant = \"subtle\",\n    size = \"md\",\n    orientation = \"horizontal\",\n    title,\n    description,\n    icon,\n    dismissible = false,\n    onDismiss,\n    children,\n}: CalloutComponentProps) {\n    const classes = callout({ color, variant, size, orientation });\n\n    return (\n        \u003Cdiv className={classes} role=\"alert\">\n            {icon && \u003Cspan>{icon}\u003C\u002Fspan>}\n            \u003Cdiv>\n                {title && \u003Cstrong>{title}\u003C\u002Fstrong>}\n                {description && \u003Cp>{description}\u003C\u002Fp>}\n                {children}\n            \u003C\u002Fdiv>\n            {dismissible && (\n                \u003Cbutton onClick={onDismiss} aria-label=\"Dismiss\">\n                    ×\n                \u003C\u002Fbutton>\n            )}\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FCallout.tsx",[700,1580,1581,1607,1611,1626,1636,1646,1664,1675,1693,1708,1713,1717,1730,1746,1761,1776,1791,1797,1803,1809,1819,1825,1831,1843,1885,1889,1897,1926,1954,1962,1989,2015,2025,2035,2045,2082,2093,2103,2111,2120,2128],{"__ignoreMap":793},[797,1582,1583,1585,1587,1589,1591,1593,1595,1597,1599,1601,1603,1605],{"class":799,"line":800},[797,1584,804],{"class":803},[797,1586,808],{"class":807},[797,1588,1091],{"class":811},[797,1590,960],{"class":807},[797,1592,1096],{"class":803},[797,1594,1099],{"class":811},[797,1596,815],{"class":807},[797,1598,818],{"class":803},[797,1600,1106],{"class":807},[797,1602,825],{"class":824},[797,1604,1075],{"class":807},[797,1606,831],{"class":807},[797,1608,1609],{"class":799,"line":834},[797,1610,860],{"emptyLinePlaceholder":223},[797,1612,1613,1616,1619,1622,1624],{"class":799,"line":857},[797,1614,1615],{"class":866},"interface",[797,1617,1618],{"class":1234}," CalloutComponentProps",[797,1620,1621],{"class":866}," extends",[797,1623,1099],{"class":1234},[797,1625,1123],{"class":807},[797,1627,1628,1630,1632,1634],{"class":799,"line":863},[797,1629,1193],{"class":1063},[797,1631,1246],{"class":807},[797,1633,1249],{"class":1234},[797,1635,831],{"class":807},[797,1637,1638,1640,1642,1644],{"class":799,"line":884},[797,1639,1201],{"class":1063},[797,1641,1246],{"class":807},[797,1643,1249],{"class":1234},[797,1645,831],{"class":807},[797,1647,1648,1651,1653,1656,1659,1662],{"class":799,"line":889},[797,1649,1650],{"class":1063},"    icon",[797,1652,1246],{"class":807},[797,1654,1655],{"class":1234}," React",[797,1657,1658],{"class":807},".",[797,1660,1661],{"class":1234},"ReactNode",[797,1663,831],{"class":807},[797,1665,1666,1669,1671,1673],{"class":799,"line":906},[797,1667,1668],{"class":1063},"    dismissible",[797,1670,1246],{"class":807},[797,1672,1269],{"class":1234},[797,1674,831],{"class":807},[797,1676,1677,1680,1682,1685,1688,1691],{"class":799,"line":911},[797,1678,1679],{"class":1063},"    onDismiss",[797,1681,1246],{"class":807},[797,1683,1684],{"class":807}," ()",[797,1686,1687],{"class":866}," =>",[797,1689,1690],{"class":1234}," void",[797,1692,831],{"class":807},[797,1694,1695,1698,1700,1702,1704,1706],{"class":799,"line":1022},[797,1696,1697],{"class":1063},"    children",[797,1699,1246],{"class":807},[797,1701,1655],{"class":1234},[797,1703,1658],{"class":807},[797,1705,1661],{"class":1234},[797,1707,831],{"class":807},[797,1709,1710],{"class":799,"line":1198},[797,1711,1712],{"class":807},"}\n",[797,1714,1715],{"class":799,"line":1206},[797,1716,860],{"emptyLinePlaceholder":223},[797,1718,1719,1721,1724,1727],{"class":799,"line":1220},[797,1720,914],{"class":803},[797,1722,1723],{"class":866}," function",[797,1725,1726],{"class":876}," Callout",[797,1728,1729],{"class":807},"({\n",[797,1731,1732,1736,1738,1740,1742,1744],{"class":799,"line":1279},[797,1733,1735],{"class":1734},"sHdIc","    color",[797,1737,1226],{"class":807},[797,1739,1106],{"class":807},[797,1741,1135],{"class":824},[797,1743,1075],{"class":807},[797,1745,1140],{"class":807},[797,1747,1748,1751,1753,1755,1757,1759],{"class":799,"line":1284},[797,1749,1750],{"class":1734},"    variant",[797,1752,1226],{"class":807},[797,1754,1106],{"class":807},[797,1756,1152],{"class":824},[797,1758,1075],{"class":807},[797,1760,1140],{"class":807},[797,1762,1763,1766,1768,1770,1772,1774],{"class":799,"line":1300},[797,1764,1765],{"class":1734},"    size",[797,1767,1226],{"class":807},[797,1769,1106],{"class":807},[797,1771,1168],{"class":824},[797,1773,1075],{"class":807},[797,1775,1140],{"class":807},[797,1777,1778,1781,1783,1785,1787,1789],{"class":799,"line":1314},[797,1779,1780],{"class":1734},"    orientation",[797,1782,1226],{"class":807},[797,1784,1106],{"class":807},[797,1786,1184],{"class":824},[797,1788,1075],{"class":807},[797,1790,1140],{"class":807},[797,1792,1793,1795],{"class":799,"line":1324},[797,1794,1193],{"class":1734},[797,1796,1140],{"class":807},[797,1798,1799,1801],{"class":799,"line":1334},[797,1800,1201],{"class":1734},[797,1802,1140],{"class":807},[797,1804,1805,1807],{"class":799,"line":1339},[797,1806,1650],{"class":1734},[797,1808,1140],{"class":807},[797,1810,1811,1813,1815,1817],{"class":799,"line":1348},[797,1812,1668],{"class":1734},[797,1814,1226],{"class":807},[797,1816,1215],{"class":1214},[797,1818,1140],{"class":807},[797,1820,1821,1823],{"class":799,"line":1383},[797,1822,1679],{"class":1734},[797,1824,1140],{"class":807},[797,1826,1827,1829],{"class":799,"line":1407},[797,1828,1697],{"class":1734},[797,1830,1140],{"class":807},[797,1832,1833,1836,1838,1841],{"class":799,"line":1416},[797,1834,1835],{"class":807},"}:",[797,1837,1618],{"class":1234},[797,1839,1840],{"class":807},")",[797,1842,1123],{"class":807},[797,1844,1845,1848,1851,1853,1855,1858,1861,1864,1866,1869,1871,1874,1876,1879,1881,1883],{"class":799,"line":1448},[797,1846,1847],{"class":866},"    const",[797,1849,1850],{"class":811}," classes",[797,1852,1226],{"class":807},[797,1854,1091],{"class":876},[797,1856,1857],{"class":1063},"(",[797,1859,1860],{"class":807},"{",[797,1862,1863],{"class":811}," color",[797,1865,960],{"class":807},[797,1867,1868],{"class":811}," variant",[797,1870,960],{"class":807},[797,1872,1873],{"class":811}," size",[797,1875,960],{"class":807},[797,1877,1878],{"class":811}," orientation",[797,1880,815],{"class":807},[797,1882,1840],{"class":1063},[797,1884,831],{"class":807},[797,1886,1887],{"class":799,"line":1477},[797,1888,860],{"emptyLinePlaceholder":223},[797,1890,1891,1894],{"class":799,"line":1486},[797,1892,1893],{"class":803},"    return",[797,1895,1896],{"class":1063}," (\n",[797,1898,1899,1901,1903,1906,1909,1912,1914,1916,1918,1920,1922,1924],{"class":799,"line":1496},[797,1900,1386],{"class":807},[797,1902,1354],{"class":811},[797,1904,1905],{"class":811}," className",[797,1907,1908],{"class":807},"={",[797,1910,1911],{"class":811},"classes",[797,1913,1223],{"class":807},[797,1915,1369],{"class":811},[797,1917,873],{"class":807},[797,1919,1075],{"class":807},[797,1921,1376],{"class":824},[797,1923,1075],{"class":807},[797,1925,1082],{"class":807},[797,1927,1928,1931,1933,1936,1938,1940,1942,1944,1946,1948,1950,1952],{"class":799,"line":1541},[797,1929,1930],{"class":807},"            {",[797,1932,1399],{"class":1734},[797,1934,1935],{"class":1063}," && \u003C",[797,1937,797],{"class":1734},[797,1939,1436],{"class":1063},[797,1941,1860],{"class":807},[797,1943,1399],{"class":1734},[797,1945,1223],{"class":807},[797,1947,1327],{"class":1063},[797,1949,797],{"class":1734},[797,1951,1436],{"class":1063},[797,1953,1712],{"class":807},[797,1955,1956,1958,1960],{"class":799,"line":1547},[797,1957,1419],{"class":1063},[797,1959,1354],{"class":1234},[797,1961,1082],{"class":1063},[797,1963,1964,1967,1969,1971,1973,1975,1977,1979,1981,1983,1985,1987],{"class":799,"line":1556},[797,1965,1966],{"class":807},"                {",[797,1968,1431],{"class":1734},[797,1970,1935],{"class":1063},[797,1972,696],{"class":1734},[797,1974,1436],{"class":1063},[797,1976,1860],{"class":807},[797,1978,1431],{"class":1734},[797,1980,1223],{"class":807},[797,1982,1327],{"class":1063},[797,1984,696],{"class":1734},[797,1986,1436],{"class":1063},[797,1988,1712],{"class":807},[797,1990,1991,1993,1995,1997,1999,2001,2003,2005,2007,2009,2011,2013],{"class":799,"line":1566},[797,1992,1966],{"class":807},[797,1994,1461],{"class":1734},[797,1996,1935],{"class":1063},[797,1998,692],{"class":1734},[797,2000,1436],{"class":1063},[797,2002,1860],{"class":807},[797,2004,1461],{"class":1734},[797,2006,1223],{"class":807},[797,2008,1327],{"class":1063},[797,2010,692],{"class":1734},[797,2012,1436],{"class":1063},[797,2014,1712],{"class":807},[797,2016,2018,2020,2023],{"class":799,"line":2017},32,[797,2019,1966],{"class":807},[797,2021,2022],{"class":1734},"children",[797,2024,1712],{"class":807},[797,2026,2028,2031,2033],{"class":799,"line":2027},33,[797,2029,2030],{"class":807},"            \u003C\u002F",[797,2032,1354],{"class":811},[797,2034,1082],{"class":807},[797,2036,2038,2040,2042],{"class":799,"line":2037},34,[797,2039,1930],{"class":807},[797,2041,1510],{"class":1734},[797,2043,2044],{"class":1063}," && (\n",[797,2046,2048,2051,2053,2056,2058,2061,2063,2066,2069,2072,2074,2076,2078,2080],{"class":799,"line":2047},35,[797,2049,2050],{"class":1063},"                \u003C",[797,2052,1501],{"class":1734},[797,2054,2055],{"class":1734}," onClick",[797,2057,1908],{"class":807},[797,2059,2060],{"class":811},"onDismiss",[797,2062,1223],{"class":807},[797,2064,2065],{"class":811}," aria",[797,2067,2068],{"class":807},"-",[797,2070,2071],{"class":811},"label",[797,2073,873],{"class":807},[797,2075,1075],{"class":807},[797,2077,1522],{"class":824},[797,2079,1075],{"class":807},[797,2081,1082],{"class":807},[797,2083,2085,2088,2091],{"class":799,"line":2084},36,[797,2086,2087],{"class":1063},"                    &",[797,2089,2090],{"class":1734},"times",[797,2092,831],{"class":1063},[797,2094,2096,2099,2101],{"class":799,"line":2095},37,[797,2097,2098],{"class":1063},"                \u003C\u002F",[797,2100,1501],{"class":1734},[797,2102,1082],{"class":1063},[797,2104,2106,2109],{"class":799,"line":2105},38,[797,2107,2108],{"class":1063},"            )",[797,2110,1712],{"class":807},[797,2112,2114,2116,2118],{"class":799,"line":2113},39,[797,2115,1489],{"class":807},[797,2117,1354],{"class":811},[797,2119,1082],{"class":807},[797,2121,2123,2126],{"class":799,"line":2122},40,[797,2124,2125],{"class":1063},"    )",[797,2127,831],{"class":807},[797,2129,2131],{"class":799,"line":2130},41,[797,2132,1712],{"class":807},[1046,2134,2135,2141,2257],{"v-slot:other":793},[692,2136,694,2137,2140],{},[700,2138,2139],{},"callout()"," runtime returns a class string. Apply it however your framework binds classes:",[788,2142,2145],{"className":790,"code":2143,"filename":2144,"language":792,"meta":793,"style":793},"import { callout } from \"virtual:styleframe\";\n\nconst classes = callout({\n    color: \"neutral\",\n    variant: \"subtle\",\n    size: \"md\",\n    orientation: \"horizontal\",\n});\n\u002F\u002F → \"callout _display:flex _padding:md _border-width:thin ...\"\n","src\u002Fcomponents\u002Fcallout.ts",[700,2146,2147,2167,2171,2187,2201,2215,2229,2243,2251],{"__ignoreMap":793},[797,2148,2149,2151,2153,2155,2157,2159,2161,2163,2165],{"class":799,"line":800},[797,2150,804],{"class":803},[797,2152,808],{"class":807},[797,2154,1091],{"class":811},[797,2156,815],{"class":807},[797,2158,818],{"class":803},[797,2160,1106],{"class":807},[797,2162,825],{"class":824},[797,2164,1075],{"class":807},[797,2166,831],{"class":807},[797,2168,2169],{"class":799,"line":834},[797,2170,860],{"emptyLinePlaceholder":223},[797,2172,2173,2175,2178,2180,2182,2184],{"class":799,"line":857},[797,2174,867],{"class":866},[797,2176,2177],{"class":811}," classes ",[797,2179,873],{"class":807},[797,2181,1091],{"class":876},[797,2183,1857],{"class":811},[797,2185,2186],{"class":807},"{\n",[797,2188,2189,2191,2193,2195,2197,2199],{"class":799,"line":863},[797,2190,1735],{"class":1063},[797,2192,1306],{"class":807},[797,2194,1106],{"class":807},[797,2196,1135],{"class":824},[797,2198,1075],{"class":807},[797,2200,1140],{"class":807},[797,2202,2203,2205,2207,2209,2211,2213],{"class":799,"line":884},[797,2204,1750],{"class":1063},[797,2206,1306],{"class":807},[797,2208,1106],{"class":807},[797,2210,1152],{"class":824},[797,2212,1075],{"class":807},[797,2214,1140],{"class":807},[797,2216,2217,2219,2221,2223,2225,2227],{"class":799,"line":889},[797,2218,1765],{"class":1063},[797,2220,1306],{"class":807},[797,2222,1106],{"class":807},[797,2224,1168],{"class":824},[797,2226,1075],{"class":807},[797,2228,1140],{"class":807},[797,2230,2231,2233,2235,2237,2239,2241],{"class":799,"line":906},[797,2232,1780],{"class":1063},[797,2234,1306],{"class":807},[797,2236,1106],{"class":807},[797,2238,1184],{"class":824},[797,2240,1075],{"class":807},[797,2242,1140],{"class":807},[797,2244,2245,2247,2249],{"class":799,"line":911},[797,2246,1223],{"class":807},[797,2248,1840],{"class":811},[797,2250,831],{"class":807},[797,2252,2253],{"class":799,"line":1022},[797,2254,2256],{"class":2255},"sHwdD","\u002F\u002F → \"callout _display:flex _padding:md _border-width:thin ...\"\n",[788,2258,2263],{"className":2259,"code":2260,"filename":2261,"language":2262,"meta":793,"style":793},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"callout _display:flex _padding:md _border-width:thin ...\" role=\"alert\">\n    \u003Cstrong>Heads up:\u003C\u002Fstrong> Inline notice.\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Fcallout.html","html",[700,2264,2265,2295,2315],{"__ignoreMap":793},[797,2266,2267,2269,2271,2274,2276,2278,2281,2283,2285,2287,2289,2291,2293],{"class":799,"line":800},[797,2268,1060],{"class":807},[797,2270,1354],{"class":1063},[797,2272,2273],{"class":866}," class",[797,2275,873],{"class":807},[797,2277,1075],{"class":807},[797,2279,2280],{"class":824},"callout _display:flex _padding:md _border-width:thin ...",[797,2282,1075],{"class":807},[797,2284,1369],{"class":866},[797,2286,873],{"class":807},[797,2288,1075],{"class":807},[797,2290,1376],{"class":824},[797,2292,1075],{"class":807},[797,2294,1082],{"class":807},[797,2296,2297,2299,2301,2303,2306,2308,2310,2312],{"class":799,"line":834},[797,2298,1351],{"class":807},[797,2300,696],{"class":1063},[797,2302,1436],{"class":807},[797,2304,2305],{"class":811},"Heads up:",[797,2307,1327],{"class":807},[797,2309,696],{"class":1063},[797,2311,1436],{"class":807},[797,2313,2314],{"class":811}," Inline notice.\n",[797,2316,2317,2319,2321],{"class":799,"line":857},[797,2318,1327],{"class":807},[797,2320,1354],{"class":1063},[797,2322,1082],{"class":807},[772,2324,2326],{"id":2325},"see-it-in-action","See it in action",[2328,2329],"story-preview",{"story":2330,":panel":2331},"theme-recipes-feedback-callout--default","true",[688,2333,195],{"id":2334},"colors",[692,2336,2337,2338,2341,2342,2341,2345,2341,2348,2341,2351,2341,2354,2357,2358,2341,2361,2341,2364,2366],{},"The Callout recipe includes 9 color variants: the 6 semantic colors (",[700,2339,2340],{},"primary",", ",[700,2343,2344],{},"secondary",[700,2346,2347],{},"success",[700,2349,2350],{},"info",[700,2352,2353],{},"warning",[700,2355,2356],{},"error",") plus 3 neutral-spectrum colors (",[700,2359,2360],{},"light",[700,2362,2363],{},"dark",[700,2365,1135],{},"). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including dark mode overrides.",[692,2368,694,2369,2371],{},[700,2370,1135],{}," color adapts automatically: it uses a light appearance in light mode and a dark appearance in dark mode, making it the safest default for general-purpose callouts.",[2328,2373],{"story":2374,":panel":2331},"theme-recipes-feedback-callout--info",[2376,2377,2379],"h3",{"id":2378},"color-reference","Color Reference",[2328,2381],{"story":2382},"theme-recipes-feedback-callout--all-variants",[2384,2385,2386,2402],"table",{},[2387,2388,2389],"thead",{},[2390,2391,2392,2396,2399],"tr",{},[2393,2394,2395],"th",{},"Color",[2393,2397,2398],{},"Token",[2393,2400,2401],{},"Use Case",[2403,2404,2405,2420,2434,2448,2462,2476,2490,2508,2522],"tbody",{},[2390,2406,2407,2412,2417],{},[2408,2409,2410],"td",{},[700,2411,2340],{},[2408,2413,2414],{},[700,2415,2416],{},"@color.primary",[2408,2418,2419],{},"Primary brand messages, key highlights",[2390,2421,2422,2426,2431],{},[2408,2423,2424],{},[700,2425,2344],{},[2408,2427,2428],{},[700,2429,2430],{},"@color.secondary",[2408,2432,2433],{},"Secondary information, supporting messages",[2390,2435,2436,2440,2445],{},[2408,2437,2438],{},[700,2439,2347],{},[2408,2441,2442],{},[700,2443,2444],{},"@color.success",[2408,2446,2447],{},"Positive feedback, completions, confirmations",[2390,2449,2450,2454,2459],{},[2408,2451,2452],{},[700,2453,2350],{},[2408,2455,2456],{},[700,2457,2458],{},"@color.info",[2408,2460,2461],{},"Informational messages, tips, notices",[2390,2463,2464,2468,2473],{},[2408,2465,2466],{},[700,2467,2353],{},[2408,2469,2470],{},[700,2471,2472],{},"@color.warning",[2408,2474,2475],{},"Caution messages, pending states, deprecation notices",[2390,2477,2478,2482,2487],{},[2408,2479,2480],{},[700,2481,2356],{},[2408,2483,2484],{},[700,2485,2486],{},"@color.error",[2408,2488,2489],{},"Error messages, destructive warnings, critical alerts",[2390,2491,2492,2496,2505],{},[2408,2493,2494],{},[700,2495,2360],{},[2408,2497,2498,2501,2502],{},[700,2499,2500],{},"@color.white"," \u002F ",[700,2503,2504],{},"@color.gray-*",[2408,2506,2507],{},"Light-themed callouts, minimal visual weight",[2390,2509,2510,2514,2519],{},[2408,2511,2512],{},[700,2513,2363],{},[2408,2515,2516],{},[700,2517,2518],{},"@color.gray-900",[2408,2520,2521],{},"Dark-themed callouts, high visual weight",[2390,2523,2524,2528,2531],{},[2408,2525,2526],{},[700,2527,1135],{},[2408,2529,2530],{},"Adaptive",[2408,2532,2533],{},"Default. Light appearance in light mode, dark in dark mode",[2535,2536,2537,2540],"tip",{},[696,2538,2539],{},"Pro tip:"," Use semantic color names that describe purpose, not appearance. This makes it easier to update your palette without touching component code.",[688,2542,2544],{"id":2543},"variants","Variants",[692,2546,2547,2548,2552],{},"Four visual style variants control how the callout is rendered. Each variant is combined with the selected color through ",[705,2549,2551],{"href":2550},"\u002Fdocs\u002Fapi\u002Frecipes#compound-variants","compound variants",", so you always get the correct background, text, and border colors for your chosen color.",[2376,2554,2556],{"id":2555},"solid","Solid",[692,2558,2559],{},"Filled background with light text. The most prominent style, ideal for critical alerts that demand immediate attention.",[2328,2561],{"story":2562,":panel":2331},"theme-recipes-feedback-callout--solid",[2376,2564,2566],{"id":2565},"outline","Outline",[692,2568,2569],{},"Transparent background with colored border and text. Useful for secondary messages that provide context without dominating the visual hierarchy.",[2328,2571],{"story":2572,":panel":2331},"theme-recipes-feedback-callout--outline",[2376,2574,2576],{"id":2575},"soft","Soft",[692,2578,2579],{},"Light tinted background with colored text. A gentle but visible style that works well for informational messages and tips.",[2328,2581],{"story":2582,":panel":2331},"theme-recipes-feedback-callout--soft",[2376,2584,2585],{"id":1152},"Subtle",[692,2587,2588,2589,2591,2592,2594,2595,2598],{},"Light tinted background with colored text and a matching border. Combines the softness of the ",[700,2590,2575],{}," variant with the definition of ",[700,2593,2565],{},". This is the ",[696,2596,2597],{},"default variant"," for the Callout recipe.",[2328,2600],{"story":2601,":panel":2331},"theme-recipes-feedback-callout--subtle",[688,2603,2605],{"id":2604},"sizes","Sizes",[692,2607,2608,2609,2612,2613,2616],{},"Three size variants from ",[700,2610,2611],{},"sm"," to ",[700,2614,2615],{},"lg"," control the font size, padding, and gap of the callout.",[2328,2618],{"story":2619,":panel":2331},"theme-recipes-feedback-callout--large",[2376,2621,2623],{"id":2622},"size-reference","Size Reference",[2328,2625],{"story":2626},"theme-recipes-feedback-callout--all-sizes",[2384,2628,2629,2645],{},[2387,2630,2631],{},[2390,2632,2633,2636,2639,2642],{},[2393,2634,2635],{},"Size",[2393,2637,2638],{},"Font Size",[2393,2640,2641],{},"Padding (V \u002F H)",[2393,2643,2644],{},"Gap",[2403,2646,2647,2670,2692],{},[2390,2648,2649,2653,2658,2666],{},[2408,2650,2651],{},[700,2652,2611],{},[2408,2654,2655],{},[700,2656,2657],{},"@font-size.xs",[2408,2659,2660,2501,2663],{},[700,2661,2662],{},"@0.5",[700,2664,2665],{},"@0.75",[2408,2667,2668],{},[700,2669,2662],{},[2390,2671,2672,2676,2681,2688],{},[2408,2673,2674],{},[700,2675,1168],{},[2408,2677,2678],{},[700,2679,2680],{},"@font-size.sm",[2408,2682,2683,2501,2685],{},[700,2684,2665],{},[700,2686,2687],{},"@1",[2408,2689,2690],{},[700,2691,2665],{},[2390,2693,2694,2698,2703,2710],{},[2408,2695,2696],{},[700,2697,2615],{},[2408,2699,2700],{},[700,2701,2702],{},"@font-size.md",[2408,2704,2705,2501,2707],{},[700,2706,2687],{},[700,2708,2709],{},"@1.25",[2408,2711,2712],{},[700,2713,2687],{},[688,2715,2717],{"id":2716},"orientation","Orientation",[692,2719,694,2720,2722,2723,2725,2726,1658],{},[700,2721,2716],{}," variant controls the layout direction of the callout content. Two options are available: ",[700,2724,1184],{}," (default) and ",[700,2727,2728],{},"vertical",[2376,2730,2731],{"id":1184},"Horizontal",[692,2733,2734],{},"Content flows left to right in a row. Icon, text content, and dismiss button align horizontally. Best for compact, single-line messages.",[2328,2736],{"story":2737,":panel":2331},"theme-recipes-feedback-callout--horizontal",[2376,2739,2740],{"id":2728},"Vertical",[692,2742,2743],{},"Content stacks top to bottom in a column. Useful for callouts with longer descriptions, multiple paragraphs, or action buttons below the message.",[2328,2745],{"story":2746,":panel":2331},"theme-recipes-feedback-callout--vertical",[2376,2748,2750],{"id":2749},"orientation-reference","Orientation Reference",[2328,2752],{"story":2753},"theme-recipes-feedback-callout--all-orientations",[2384,2755,2756,2767],{},[2387,2757,2758],{},[2390,2759,2760,2762,2765],{},[2393,2761,2717],{},[2393,2763,2764],{},"Flex Direction",[2393,2766,2401],{},[2403,2768,2769,2783],{},[2390,2770,2771,2775,2780],{},[2408,2772,2773],{},[700,2774,1184],{},[2408,2776,2777],{},[700,2778,2779],{},"row",[2408,2781,2782],{},"Compact inline messages, single-line alerts",[2390,2784,2785,2789,2794],{},[2408,2786,2787],{},[700,2788,2728],{},[2408,2790,2791],{},[700,2792,2793],{},"column",[2408,2795,2796],{},"Longer descriptions, multi-line content, action buttons",[688,2798,568],{"id":2799},"accessibility",[724,2801,2802],{},[727,2803,2804,2807,2808,2811,2812,2815],{},[696,2805,2806],{},"Use appropriate ARIA roles."," Use ",[700,2809,2810],{},"role=\"alert\""," for urgent messages (announced immediately), ",[700,2813,2814],{},"role=\"status\""," for non-urgent updates (announced at next pause), and no role for static informational content.",[788,2817,2819],{"className":2259,"code":2818,"language":2262,"meta":793,"style":793},"\u003C!-- Urgent error message -->\n\u003Cdiv role=\"alert\" class=\"...\">Payment failed. Please try again.\u003C\u002Fdiv>\n\n\u003C!-- Non-urgent status update -->\n\u003Cdiv role=\"status\" class=\"...\">Your changes have been saved.\u003C\u002Fdiv>\n\n\u003C!-- Informational aside -->\n\u003Caside class=\"...\">Tip: You can customize your dashboard in settings.\u003C\u002Faside>\n",[700,2820,2821,2826,2864,2868,2873,2911,2915,2920],{"__ignoreMap":793},[797,2822,2823],{"class":799,"line":800},[797,2824,2825],{"class":2255},"\u003C!-- Urgent error message -->\n",[797,2827,2828,2830,2832,2834,2836,2838,2840,2842,2844,2846,2848,2851,2853,2855,2858,2860,2862],{"class":799,"line":834},[797,2829,1060],{"class":807},[797,2831,1354],{"class":1063},[797,2833,1369],{"class":866},[797,2835,873],{"class":807},[797,2837,1075],{"class":807},[797,2839,1376],{"class":824},[797,2841,1075],{"class":807},[797,2843,2273],{"class":866},[797,2845,873],{"class":807},[797,2847,1075],{"class":807},[797,2849,2850],{"class":824},"...",[797,2852,1075],{"class":807},[797,2854,1436],{"class":807},[797,2856,2857],{"class":811},"Payment failed. Please try again.",[797,2859,1327],{"class":807},[797,2861,1354],{"class":1063},[797,2863,1082],{"class":807},[797,2865,2866],{"class":799,"line":857},[797,2867,860],{"emptyLinePlaceholder":223},[797,2869,2870],{"class":799,"line":863},[797,2871,2872],{"class":2255},"\u003C!-- Non-urgent status update -->\n",[797,2874,2875,2877,2879,2881,2883,2885,2888,2890,2892,2894,2896,2898,2900,2902,2905,2907,2909],{"class":799,"line":884},[797,2876,1060],{"class":807},[797,2878,1354],{"class":1063},[797,2880,1369],{"class":866},[797,2882,873],{"class":807},[797,2884,1075],{"class":807},[797,2886,2887],{"class":824},"status",[797,2889,1075],{"class":807},[797,2891,2273],{"class":866},[797,2893,873],{"class":807},[797,2895,1075],{"class":807},[797,2897,2850],{"class":824},[797,2899,1075],{"class":807},[797,2901,1436],{"class":807},[797,2903,2904],{"class":811},"Your changes have been saved.",[797,2906,1327],{"class":807},[797,2908,1354],{"class":1063},[797,2910,1082],{"class":807},[797,2912,2913],{"class":799,"line":889},[797,2914,860],{"emptyLinePlaceholder":223},[797,2916,2917],{"class":799,"line":906},[797,2918,2919],{"class":2255},"\u003C!-- Informational aside -->\n",[797,2921,2922,2924,2927,2929,2931,2933,2935,2937,2939,2942,2944,2946],{"class":799,"line":911},[797,2923,1060],{"class":807},[797,2925,2926],{"class":1063},"aside",[797,2928,2273],{"class":866},[797,2930,873],{"class":807},[797,2932,1075],{"class":807},[797,2934,2850],{"class":824},[797,2936,1075],{"class":807},[797,2938,1436],{"class":807},[797,2940,2941],{"class":811},"Tip: You can customize your dashboard in settings.",[797,2943,1327],{"class":807},[797,2945,2926],{"class":1063},[797,2947,1082],{"class":807},[724,2949,2950],{},[727,2951,2952,2955,2956,2962],{},[696,2953,2954],{},"Don't rely on color alone."," Always include descriptive text and pair with an icon to reinforce severity (",[705,2957,2961],{"href":2958,"rel":2959},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fuse-of-color.html",[2960],"nofollow","WCAG 1.4.1",").",[788,2964,2966],{"className":2259,"code":2965,"language":2262,"meta":793,"style":793},"\u003C!-- Correct: icon + descriptive text + color -->\n\u003Cdiv role=\"alert\" class=\"...\">\n    \u003Cspan>⚠\u003C\u002Fspan>\n    \u003Cstrong>Warning:\u003C\u002Fstrong> Your session will expire in 5 minutes.\n\u003C\u002Fdiv>\n\n\u003C!-- Avoid: color alone with vague text -->\n\u003Cdiv class=\"...\">Note\u003C\u002Fdiv>\n",[700,2967,2968,2973,3001,3018,3038,3046,3050,3055],{"__ignoreMap":793},[797,2969,2970],{"class":799,"line":800},[797,2971,2972],{"class":2255},"\u003C!-- Correct: icon + descriptive text + color -->\n",[797,2974,2975,2977,2979,2981,2983,2985,2987,2989,2991,2993,2995,2997,2999],{"class":799,"line":834},[797,2976,1060],{"class":807},[797,2978,1354],{"class":1063},[797,2980,1369],{"class":866},[797,2982,873],{"class":807},[797,2984,1075],{"class":807},[797,2986,1376],{"class":824},[797,2988,1075],{"class":807},[797,2990,2273],{"class":866},[797,2992,873],{"class":807},[797,2994,1075],{"class":807},[797,2996,2850],{"class":824},[797,2998,1075],{"class":807},[797,3000,1082],{"class":807},[797,3002,3003,3005,3007,3009,3012,3014,3016],{"class":799,"line":857},[797,3004,1351],{"class":807},[797,3006,797],{"class":1063},[797,3008,1436],{"class":807},[797,3010,3011],{"class":811},"⚠",[797,3013,1327],{"class":807},[797,3015,797],{"class":1063},[797,3017,1082],{"class":807},[797,3019,3020,3022,3024,3026,3029,3031,3033,3035],{"class":799,"line":863},[797,3021,1351],{"class":807},[797,3023,696],{"class":1063},[797,3025,1436],{"class":807},[797,3027,3028],{"class":811},"Warning:",[797,3030,1327],{"class":807},[797,3032,696],{"class":1063},[797,3034,1436],{"class":807},[797,3036,3037],{"class":811}," Your session will expire in 5 minutes.\n",[797,3039,3040,3042,3044],{"class":799,"line":884},[797,3041,1327],{"class":807},[797,3043,1354],{"class":1063},[797,3045,1082],{"class":807},[797,3047,3048],{"class":799,"line":889},[797,3049,860],{"emptyLinePlaceholder":223},[797,3051,3052],{"class":799,"line":906},[797,3053,3054],{"class":2255},"\u003C!-- Avoid: color alone with vague text -->\n",[797,3056,3057,3059,3061,3063,3065,3067,3069,3071,3073,3076,3078,3080],{"class":799,"line":911},[797,3058,1060],{"class":807},[797,3060,1354],{"class":1063},[797,3062,2273],{"class":866},[797,3064,873],{"class":807},[797,3066,1075],{"class":807},[797,3068,2850],{"class":824},[797,3070,1075],{"class":807},[797,3072,1436],{"class":807},[797,3074,3075],{"class":811},"Note",[797,3077,1327],{"class":807},[797,3079,1354],{"class":1063},[797,3081,1082],{"class":807},[724,3083,3084,3098],{},[727,3085,3086,3089,3090,3093,3094,3097],{},[696,3087,3088],{},"Dismissible callouts."," Use a ",[700,3091,3092],{},"\u003Cbutton>"," with ",[700,3095,3096],{},"aria-label=\"Dismiss\""," for the close control. Move focus to the next logical element after dismissal.",[727,3099,3100,3103,3104,3106,3107,1658],{},[696,3101,3102],{},"Verify contrast ratios."," The ",[700,3105,2555],{}," variant places light text on a colored background. Default tokens meet WCAG AA 4.5:1 contrast. If you override colors, verify with the ",[705,3108,3111],{"href":3109,"rel":3110},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[2960],"WebAIM Contrast Checker",[2535,3113,3114,3117,3118,3121,3122,3124,3125,3127,3128,3130],{},[696,3115,3116],{},"Good practice:"," When multiple callouts appear on the same page, use the ",[700,3119,3120],{},"variant"," prop to create visual hierarchy rather than relying solely on color differences. For example, use ",[700,3123,2555],{}," for critical errors and ",[700,3126,2575],{}," or ",[700,3129,1152],{}," for informational notices.",[688,3132,3134],{"id":3133},"customization","Customization",[2376,3136,3138],{"id":3137},"overriding-defaults","Overriding Defaults",[692,3140,694,3141,3143],{},[700,3142,702],{}," composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[788,3145,3147],{"className":790,"code":3146,"filename":786,"language":792,"meta":793,"style":793},"import { styleframe } from 'virtual:styleframe';\nimport { useCalloutRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst callout = useCalloutRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.lg',\n    },\n    defaultVariants: {\n        color: 'info',\n        variant: 'soft',\n        size: 'md',\n        orientation: 'horizontal',\n    },\n});\n\nexport default s;\n",[700,3148,3149,3169,3189,3193,3207,3211,3228,3237,3253,3258,3267,3282,3297,3312,3327,3331,3339,3343],{"__ignoreMap":793},[797,3150,3151,3153,3155,3157,3159,3161,3163,3165,3167],{"class":799,"line":800},[797,3152,804],{"class":803},[797,3154,808],{"class":807},[797,3156,812],{"class":811},[797,3158,815],{"class":807},[797,3160,818],{"class":803},[797,3162,821],{"class":807},[797,3164,825],{"class":824},[797,3166,828],{"class":807},[797,3168,831],{"class":807},[797,3170,3171,3173,3175,3177,3179,3181,3183,3185,3187],{"class":799,"line":834},[797,3172,804],{"class":803},[797,3174,808],{"class":807},[797,3176,841],{"class":811},[797,3178,815],{"class":807},[797,3180,818],{"class":803},[797,3182,821],{"class":807},[797,3184,850],{"class":824},[797,3186,828],{"class":807},[797,3188,831],{"class":807},[797,3190,3191],{"class":799,"line":857},[797,3192,860],{"emptyLinePlaceholder":223},[797,3194,3195,3197,3199,3201,3203,3205],{"class":799,"line":863},[797,3196,867],{"class":866},[797,3198,870],{"class":811},[797,3200,873],{"class":807},[797,3202,812],{"class":876},[797,3204,879],{"class":811},[797,3206,831],{"class":807},[797,3208,3209],{"class":799,"line":884},[797,3210,860],{"emptyLinePlaceholder":223},[797,3212,3213,3215,3217,3219,3221,3224,3226],{"class":799,"line":889},[797,3214,867],{"class":866},[797,3216,894],{"class":811},[797,3218,873],{"class":807},[797,3220,841],{"class":876},[797,3222,3223],{"class":811},"(s",[797,3225,960],{"class":807},[797,3227,1123],{"class":807},[797,3229,3230,3233,3235],{"class":799,"line":906},[797,3231,3232],{"class":1063},"    base",[797,3234,1306],{"class":807},[797,3236,1123],{"class":807},[797,3238,3239,3242,3244,3246,3249,3251],{"class":799,"line":911},[797,3240,3241],{"class":1063},"        borderRadius",[797,3243,1306],{"class":807},[797,3245,821],{"class":807},[797,3247,3248],{"class":824},"@border-radius.lg",[797,3250,828],{"class":807},[797,3252,1140],{"class":807},[797,3254,3255],{"class":799,"line":1022},[797,3256,3257],{"class":807},"    },\n",[797,3259,3260,3263,3265],{"class":799,"line":1198},[797,3261,3262],{"class":1063},"    defaultVariants",[797,3264,1306],{"class":807},[797,3266,1123],{"class":807},[797,3268,3269,3272,3274,3276,3278,3280],{"class":799,"line":1206},[797,3270,3271],{"class":1063},"        color",[797,3273,1306],{"class":807},[797,3275,821],{"class":807},[797,3277,2350],{"class":824},[797,3279,828],{"class":807},[797,3281,1140],{"class":807},[797,3283,3284,3287,3289,3291,3293,3295],{"class":799,"line":1220},[797,3285,3286],{"class":1063},"        variant",[797,3288,1306],{"class":807},[797,3290,821],{"class":807},[797,3292,2575],{"class":824},[797,3294,828],{"class":807},[797,3296,1140],{"class":807},[797,3298,3299,3302,3304,3306,3308,3310],{"class":799,"line":1279},[797,3300,3301],{"class":1063},"        size",[797,3303,1306],{"class":807},[797,3305,821],{"class":807},[797,3307,1168],{"class":824},[797,3309,828],{"class":807},[797,3311,1140],{"class":807},[797,3313,3314,3317,3319,3321,3323,3325],{"class":799,"line":1284},[797,3315,3316],{"class":1063},"        orientation",[797,3318,1306],{"class":807},[797,3320,821],{"class":807},[797,3322,1184],{"class":824},[797,3324,828],{"class":807},[797,3326,1140],{"class":807},[797,3328,3329],{"class":799,"line":1300},[797,3330,3257],{"class":807},[797,3332,3333,3335,3337],{"class":799,"line":1314},[797,3334,1223],{"class":807},[797,3336,1840],{"class":811},[797,3338,831],{"class":807},[797,3340,3341],{"class":799,"line":1324},[797,3342,860],{"emptyLinePlaceholder":223},[797,3344,3345,3347,3349,3351],{"class":799,"line":1334},[797,3346,914],{"class":803},[797,3348,917],{"class":803},[797,3350,920],{"class":811},[797,3352,831],{"class":807},[2376,3354,3356],{"id":3355},"filtering-variants","Filtering Variants",[692,3358,3359,3360,3363],{},"If you only need a subset of the available variants, use the ",[700,3361,3362],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[788,3365,3367],{"className":790,"code":3366,"filename":786,"language":792,"meta":793,"style":793},"import { styleframe } from 'virtual:styleframe';\nimport { useCalloutRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate info and error colors, with soft and subtle styles\nconst callout = useCalloutRecipe(s, {\n    filter: {\n        color: ['info', 'error'],\n        variant: ['soft', 'subtle'],\n    },\n});\n\nexport default s;\n",[700,3368,3369,3389,3409,3413,3427,3431,3436,3452,3461,3489,3515,3519,3527,3531],{"__ignoreMap":793},[797,3370,3371,3373,3375,3377,3379,3381,3383,3385,3387],{"class":799,"line":800},[797,3372,804],{"class":803},[797,3374,808],{"class":807},[797,3376,812],{"class":811},[797,3378,815],{"class":807},[797,3380,818],{"class":803},[797,3382,821],{"class":807},[797,3384,825],{"class":824},[797,3386,828],{"class":807},[797,3388,831],{"class":807},[797,3390,3391,3393,3395,3397,3399,3401,3403,3405,3407],{"class":799,"line":834},[797,3392,804],{"class":803},[797,3394,808],{"class":807},[797,3396,841],{"class":811},[797,3398,815],{"class":807},[797,3400,818],{"class":803},[797,3402,821],{"class":807},[797,3404,850],{"class":824},[797,3406,828],{"class":807},[797,3408,831],{"class":807},[797,3410,3411],{"class":799,"line":857},[797,3412,860],{"emptyLinePlaceholder":223},[797,3414,3415,3417,3419,3421,3423,3425],{"class":799,"line":863},[797,3416,867],{"class":866},[797,3418,870],{"class":811},[797,3420,873],{"class":807},[797,3422,812],{"class":876},[797,3424,879],{"class":811},[797,3426,831],{"class":807},[797,3428,3429],{"class":799,"line":884},[797,3430,860],{"emptyLinePlaceholder":223},[797,3432,3433],{"class":799,"line":889},[797,3434,3435],{"class":2255},"\u002F\u002F Only generate info and error colors, with soft and subtle styles\n",[797,3437,3438,3440,3442,3444,3446,3448,3450],{"class":799,"line":906},[797,3439,867],{"class":866},[797,3441,894],{"class":811},[797,3443,873],{"class":807},[797,3445,841],{"class":876},[797,3447,3223],{"class":811},[797,3449,960],{"class":807},[797,3451,1123],{"class":807},[797,3453,3454,3457,3459],{"class":799,"line":911},[797,3455,3456],{"class":1063},"    filter",[797,3458,1306],{"class":807},[797,3460,1123],{"class":807},[797,3462,3463,3465,3467,3470,3472,3474,3476,3478,3480,3482,3484,3487],{"class":799,"line":1022},[797,3464,3271],{"class":1063},[797,3466,1306],{"class":807},[797,3468,3469],{"class":811}," [",[797,3471,828],{"class":807},[797,3473,2350],{"class":824},[797,3475,828],{"class":807},[797,3477,960],{"class":807},[797,3479,821],{"class":807},[797,3481,2356],{"class":824},[797,3483,828],{"class":807},[797,3485,3486],{"class":811},"]",[797,3488,1140],{"class":807},[797,3490,3491,3493,3495,3497,3499,3501,3503,3505,3507,3509,3511,3513],{"class":799,"line":1198},[797,3492,3286],{"class":1063},[797,3494,1306],{"class":807},[797,3496,3469],{"class":811},[797,3498,828],{"class":807},[797,3500,2575],{"class":824},[797,3502,828],{"class":807},[797,3504,960],{"class":807},[797,3506,821],{"class":807},[797,3508,1152],{"class":824},[797,3510,828],{"class":807},[797,3512,3486],{"class":811},[797,3514,1140],{"class":807},[797,3516,3517],{"class":799,"line":1206},[797,3518,3257],{"class":807},[797,3520,3521,3523,3525],{"class":799,"line":1220},[797,3522,1223],{"class":807},[797,3524,1840],{"class":811},[797,3526,831],{"class":807},[797,3528,3529],{"class":799,"line":1279},[797,3530,860],{"emptyLinePlaceholder":223},[797,3532,3533,3535,3537,3539],{"class":799,"line":1284},[797,3534,914],{"class":803},[797,3536,917],{"class":803},[797,3538,920],{"class":811},[797,3540,831],{"class":807},[3542,3543,3544,3547],"note",{},[696,3545,3546],{},"Good to know:"," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,3549,73],{"id":3550},"api-reference",[2376,3552,3554],{"id":3553},"usecalloutrecipes-options",[700,3555,3556],{},"useCalloutRecipe(s, options?)",[692,3558,3559],{},"Creates a full callout recipe with all variants and compound variant styling.",[692,3561,3562],{},[696,3563,3564],{},"Parameters:",[2384,3566,3567,3580],{},[2387,3568,3569],{},[2390,3570,3571,3574,3577],{},[2393,3572,3573],{},"Parameter",[2393,3575,3576],{},"Type",[2393,3578,3579],{},"Description",[2403,3581,3582,3597,3612,3627,3641,3656,3671],{},[2390,3583,3584,3589,3594],{},[2408,3585,3586],{},[700,3587,3588],{},"s",[2408,3590,3591],{},[700,3592,3593],{},"Styleframe",[2408,3595,3596],{},"The Styleframe instance",[2390,3598,3599,3604,3609],{},[2408,3600,3601],{},[700,3602,3603],{},"options",[2408,3605,3606],{},[700,3607,3608],{},"DeepPartial\u003CRecipeConfig>",[2408,3610,3611],{},"Optional overrides for the recipe configuration",[2390,3613,3614,3619,3624],{},[2408,3615,3616],{},[700,3617,3618],{},"options.base",[2408,3620,3621],{},[700,3622,3623],{},"VariantDeclarationsBlock",[2408,3625,3626],{},"Custom base styles for the callout",[2390,3628,3629,3634,3638],{},[2408,3630,3631],{},[700,3632,3633],{},"options.variants",[2408,3635,3636],{},[700,3637,2544],{},[2408,3639,3640],{},"Custom variant definitions for the recipe",[2390,3642,3643,3648,3653],{},[2408,3644,3645],{},[700,3646,3647],{},"options.defaultVariants",[2408,3649,3650],{},[700,3651,3652],{},"Record\u003Ckeyof Variants, string>",[2408,3654,3655],{},"Default variant values for the recipe",[2390,3657,3658,3663,3668],{},[2408,3659,3660],{},[700,3661,3662],{},"options.compoundVariants",[2408,3664,3665],{},[700,3666,3667],{},"CompoundVariant[]",[2408,3669,3670],{},"Custom compound variant definitions for the recipe",[2390,3672,3673,3678,3683],{},[2408,3674,3675],{},[700,3676,3677],{},"options.filter",[2408,3679,3680],{},[700,3681,3682],{},"Record\u003Cstring, string[]>",[2408,3684,3685],{},"Limit which variant values are generated",[692,3687,3688],{},[696,3689,3690],{},"Variants:",[2384,3692,3693,3706],{},[2387,3694,3695],{},[2390,3696,3697,3700,3703],{},[2393,3698,3699],{},"Variant",[2393,3701,3702],{},"Options",[2393,3704,3705],{},"Default",[2403,3707,3708,3739,3759,3778],{},[2390,3709,3710,3715,3735],{},[2408,3711,3712],{},[700,3713,3714],{},"color",[2408,3716,3717,2341,3719,2341,3721,2341,3723,2341,3725,2341,3727,2341,3729,2341,3731,2341,3733],{},[700,3718,2340],{},[700,3720,2344],{},[700,3722,2347],{},[700,3724,2350],{},[700,3726,2353],{},[700,3728,2356],{},[700,3730,2360],{},[700,3732,2363],{},[700,3734,1135],{},[2408,3736,3737],{},[700,3738,1135],{},[2390,3740,3741,3745,3755],{},[2408,3742,3743],{},[700,3744,3120],{},[2408,3746,3747,2341,3749,2341,3751,2341,3753],{},[700,3748,2555],{},[700,3750,2565],{},[700,3752,2575],{},[700,3754,1152],{},[2408,3756,3757],{},[700,3758,1152],{},[2390,3760,3761,3766,3774],{},[2408,3762,3763],{},[700,3764,3765],{},"size",[2408,3767,3768,2341,3770,2341,3772],{},[700,3769,2611],{},[700,3771,1168],{},[700,3773,2615],{},[2408,3775,3776],{},[700,3777,1168],{},[2390,3779,3780,3784,3790],{},[2408,3781,3782],{},[700,3783,2716],{},[2408,3785,3786,2341,3788],{},[700,3787,1184],{},[700,3789,2728],{},[2408,3791,3792],{},[700,3793,1184],{},[692,3795,3796],{},[705,3797,3798],{"href":132},"Learn more about recipes →",[688,3800,3802],{"id":3801},"best-practices","Best Practices",[724,3804,3805,3820,3829,3843,3849,3857,3866,3876],{},[727,3806,3807,3810,3811,3813,3814,3816,3817,3819],{},[696,3808,3809],{},"Choose colors by meaning, not appearance",": Use ",[700,3812,2347],{}," for confirmations, ",[700,3815,2356],{}," for errors, and ",[700,3818,2353],{}," for caution messages — this keeps your UI consistent when tokens change.",[727,3821,3822,3828],{},[696,3823,3824,3825,3827],{},"Use ",[700,3826,1135],{}," for generic messages",": The neutral color adapts to light and dark mode automatically, making it the safest default for general-purpose callouts.",[727,3830,3831,3839,3840,3842],{},[696,3832,3833,3834,3127,3836,3838],{},"Prefer ",[700,3835,1152],{},[700,3837,2575],{}," for informational callouts",": Reserve ",[700,3841,2555],{}," for critical alerts that demand immediate attention. Too many solid callouts create visual fatigue.",[727,3844,3845,3848],{},[696,3846,3847],{},"Pair an icon with the message",": Icons reinforce the callout's severity and improve scannability, especially for users who cannot distinguish colors.",[727,3850,3851,3856],{},[696,3852,3824,3853,3855],{},[700,3854,2728],{}," orientation for longer content",": When callouts contain multi-line descriptions or action buttons, vertical layout prevents cramped horizontal spacing.",[727,3858,3859,3862,3863,3865],{},[696,3860,3861],{},"Filter what you don't need",": If your application only uses a few colors, pass a ",[700,3864,3362],{}," option to reduce generated CSS.",[727,3867,3868,3871,3872,3875],{},[696,3869,3870],{},"Override defaults at the recipe level",": Set your most common variant combination as ",[700,3873,3874],{},"defaultVariants"," so component consumers write less code.",[727,3877,3878,3881],{},[696,3879,3880],{},"Include descriptive text",": Callouts should not rely on color alone to convey meaning. Always include a title or description that communicates the message.",[688,3883,3885],{"id":3884},"faq","FAQ",[3887,3888,3889,3916,3931,4172,4185,4194,4213,4223],"accordion",{},[3890,3891,3894,3911],"accordion-item",{"icon":3892,"label":3893},"i-lucide-circle-help","How do compound variants work in the Callout recipe?",[692,3895,3896,3897,2341,3899,3901,3902,3904,3905,3907,3908,3910],{},"The Callout recipe uses compound variants to map each color-variant combination to specific styles. For the 6 semantic colors, styles are generated programmatically. For the ",[700,3898,2360],{},[700,3900,2363],{},", and ",[700,3903,1135],{}," colors, compound variants are defined individually with explicit dark mode overrides. This approach keeps the individual ",[700,3906,3714],{}," and ",[700,3909,3120],{}," definitions clean while handling all 36 combinations (9 colors x 4 variants) automatically.",[692,3912,3913],{},[705,3914,3915],{"href":2550},"Learn more about compound variants →",[3890,3917,3919,3921,3922,3924,3925,3927,3928,3930],{"icon":3892,"label":3918},"What is the difference between light, dark, and neutral colors?",[700,3920,2360],{}," always uses white and gray-100 backgrounds regardless of the color scheme. ",[700,3923,2363],{}," always uses gray-800 and gray-900 backgrounds. ",[700,3926,1135],{}," adapts to the current color scheme: it appears light in light mode and dark in dark mode. Use ",[700,3929,1135],{}," when you want the callout to blend naturally with the surrounding interface.",[3890,3932,3934,3944],{"icon":3892,"label":3933},"Can I add custom colors beyond the default nine?",[692,3935,3936,3937,3907,3940,3943],{},"Yes. Override the ",[700,3938,3939],{},"variants.color",[700,3941,3942],{},"compoundVariants"," options to add new colors. You'll need to define the empty color variant and add compound variants for each visual style:",[788,3945,3947],{"className":790,"code":3946,"filename":786,"language":792,"meta":793,"style":793},"const callout = useCalloutRecipe(s, {\n    variants: {\n        color: {\n            brand: {},\n        },\n    },\n    compoundVariants: [\n        { match: { color: 'brand', variant: 'solid' }, css: { background: '@color.brand', color: '@color.white' } },\n        { match: { color: 'brand', variant: 'outline' }, css: { color: '@color.brand', borderColor: '@color.brand' } },\n        \u002F\u002F ... soft and subtle\n    ],\n});\n",[700,3948,3949,3965,3974,3982,3992,3997,4001,4011,4085,4152,4157,4164],{"__ignoreMap":793},[797,3950,3951,3953,3955,3957,3959,3961,3963],{"class":799,"line":800},[797,3952,867],{"class":866},[797,3954,894],{"class":811},[797,3956,873],{"class":807},[797,3958,841],{"class":876},[797,3960,3223],{"class":811},[797,3962,960],{"class":807},[797,3964,1123],{"class":807},[797,3966,3967,3970,3972],{"class":799,"line":834},[797,3968,3969],{"class":1063},"    variants",[797,3971,1306],{"class":807},[797,3973,1123],{"class":807},[797,3975,3976,3978,3980],{"class":799,"line":857},[797,3977,3271],{"class":1063},[797,3979,1306],{"class":807},[797,3981,1123],{"class":807},[797,3983,3984,3987,3989],{"class":799,"line":863},[797,3985,3986],{"class":1063},"            brand",[797,3988,1306],{"class":807},[797,3990,3991],{"class":807}," {},\n",[797,3993,3994],{"class":799,"line":884},[797,3995,3996],{"class":807},"        },\n",[797,3998,3999],{"class":799,"line":889},[797,4000,3257],{"class":807},[797,4002,4003,4006,4008],{"class":799,"line":906},[797,4004,4005],{"class":1063},"    compoundVariants",[797,4007,1306],{"class":807},[797,4009,4010],{"class":811}," [\n",[797,4012,4013,4016,4019,4021,4023,4025,4027,4029,4032,4034,4036,4038,4040,4042,4044,4046,4049,4052,4054,4056,4059,4061,4063,4066,4068,4070,4072,4074,4076,4078,4080,4082],{"class":799,"line":911},[797,4014,4015],{"class":807},"        {",[797,4017,4018],{"class":1063}," match",[797,4020,1306],{"class":807},[797,4022,808],{"class":807},[797,4024,1863],{"class":1063},[797,4026,1306],{"class":807},[797,4028,821],{"class":807},[797,4030,4031],{"class":824},"brand",[797,4033,828],{"class":807},[797,4035,960],{"class":807},[797,4037,1868],{"class":1063},[797,4039,1306],{"class":807},[797,4041,821],{"class":807},[797,4043,2555],{"class":824},[797,4045,828],{"class":807},[797,4047,4048],{"class":807}," },",[797,4050,4051],{"class":1063}," css",[797,4053,1306],{"class":807},[797,4055,808],{"class":807},[797,4057,4058],{"class":1063}," background",[797,4060,1306],{"class":807},[797,4062,821],{"class":807},[797,4064,4065],{"class":824},"@color.brand",[797,4067,828],{"class":807},[797,4069,960],{"class":807},[797,4071,1863],{"class":1063},[797,4073,1306],{"class":807},[797,4075,821],{"class":807},[797,4077,2500],{"class":824},[797,4079,828],{"class":807},[797,4081,815],{"class":807},[797,4083,4084],{"class":807}," },\n",[797,4086,4087,4089,4091,4093,4095,4097,4099,4101,4103,4105,4107,4109,4111,4113,4115,4117,4119,4121,4123,4125,4127,4129,4131,4133,4135,4137,4140,4142,4144,4146,4148,4150],{"class":799,"line":1022},[797,4088,4015],{"class":807},[797,4090,4018],{"class":1063},[797,4092,1306],{"class":807},[797,4094,808],{"class":807},[797,4096,1863],{"class":1063},[797,4098,1306],{"class":807},[797,4100,821],{"class":807},[797,4102,4031],{"class":824},[797,4104,828],{"class":807},[797,4106,960],{"class":807},[797,4108,1868],{"class":1063},[797,4110,1306],{"class":807},[797,4112,821],{"class":807},[797,4114,2565],{"class":824},[797,4116,828],{"class":807},[797,4118,4048],{"class":807},[797,4120,4051],{"class":1063},[797,4122,1306],{"class":807},[797,4124,808],{"class":807},[797,4126,1863],{"class":1063},[797,4128,1306],{"class":807},[797,4130,821],{"class":807},[797,4132,4065],{"class":824},[797,4134,828],{"class":807},[797,4136,960],{"class":807},[797,4138,4139],{"class":1063}," borderColor",[797,4141,1306],{"class":807},[797,4143,821],{"class":807},[797,4145,4065],{"class":824},[797,4147,828],{"class":807},[797,4149,815],{"class":807},[797,4151,4084],{"class":807},[797,4153,4154],{"class":799,"line":1198},[797,4155,4156],{"class":2255},"        \u002F\u002F ... soft and subtle\n",[797,4158,4159,4162],{"class":799,"line":1206},[797,4160,4161],{"class":811},"    ]",[797,4163,1140],{"class":807},[797,4165,4166,4168,4170],{"class":799,"line":1220},[797,4167,1223],{"class":807},[797,4169,1840],{"class":811},[797,4171,831],{"class":807},[3890,4173,4175,4176,4178,4179,4181,4182,4184],{"icon":3892,"label":4174},"What's the difference between the soft and subtle variants?","Both use a light tinted background with colored text. The difference is that ",[700,4177,1152],{}," also adds a matching colored border, giving the callout more visual definition. Use ",[700,4180,2575],{}," when you want a gentler appearance, and ",[700,4183,1152],{}," when the callout needs slightly more structure.",[3890,4186,3824,4188,4190,4191,4193],{"icon":3892,"label":4187},"When should I use horizontal vs. vertical orientation?",[700,4189,1184],{}," (the default) for short, single-line messages where the icon, text, and dismiss button fit comfortably in a row. Switch to ",[700,4192,2728],{}," when the callout contains longer descriptions, multiple paragraphs, or action buttons that benefit from stacking top to bottom.",[3890,4195,4197,4198,4200,4201,4203,4204,4207,4208,3127,4210,4212],{"icon":3892,"label":4196},"How does filtering affect compound variants?","When you use the ",[700,4199,3362],{}," option, compound variants that reference filtered-out values are automatically removed. For example, if you filter ",[700,4202,3120],{}," to only ",[700,4205,4206],{},"['solid', 'outline']",", all compound variants matching ",[700,4209,2575],{},[700,4211,1152],{}," are excluded from the generated output. Default variants are also adjusted if they reference a removed value.",[3890,4214,4216,4217,4219,4220,4222],{"icon":3892,"label":4215},"How should I handle the dismissible behavior?","The recipe handles only the visual layout (flexbox with gap). Dismissal logic — hiding the element, animating out, managing focus — is the responsibility of your component framework. Use a ",[700,4218,3092],{}," element with ",[700,4221,3096],{}," for the close control, and move focus to the next logical element after dismissal.",[3890,4224,4226,4227,2341,4229,3901,4231,4234,4235,4238],{"icon":3892,"label":4225},"Can I use the Callout recipe without the design tokens preset?","The Callout recipe references design tokens like ",[700,4228,2416],{},[700,4230,2680],{},[700,4232,4233],{},"@border-radius.md"," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[700,4236,4237],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[4240,4241,4242],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":793,"searchDepth":834,"depth":834,"links":4244},[4245,4246,4247,4248,4251,4257,4260,4265,4266,4270,4273,4274],{"id":690,"depth":834,"text":78},{"id":718,"depth":834,"text":719},{"id":765,"depth":834,"text":766},{"id":2334,"depth":834,"text":195,"children":4249},[4250],{"id":2378,"depth":857,"text":2379},{"id":2543,"depth":834,"text":2544,"children":4252},[4253,4254,4255,4256],{"id":2555,"depth":857,"text":2556},{"id":2565,"depth":857,"text":2566},{"id":2575,"depth":857,"text":2576},{"id":1152,"depth":857,"text":2585},{"id":2604,"depth":834,"text":2605,"children":4258},[4259],{"id":2622,"depth":857,"text":2623},{"id":2716,"depth":834,"text":2717,"children":4261},[4262,4263,4264],{"id":1184,"depth":857,"text":2731},{"id":2728,"depth":857,"text":2740},{"id":2749,"depth":857,"text":2750},{"id":2799,"depth":834,"text":568},{"id":3133,"depth":834,"text":3134,"children":4267},[4268,4269],{"id":3137,"depth":857,"text":3138},{"id":3355,"depth":857,"text":3356},{"id":3550,"depth":834,"text":73,"children":4271},[4272],{"id":3553,"depth":857,"text":3556},{"id":3801,"depth":834,"text":3802},{"id":3884,"depth":834,"text":3885},"A contextual feedback component for alerts, notifications, and inline messages. Supports multiple colors, visual styles, sizes, and orientations through the recipe system.",null,{},{"icon":7},{"title":408,"description":4275},"UcYRG5dXbwa6Y30utZ_Jz1TPg-f2naw_VR0PZ74aj3c",[4282,4284],{"title":404,"path":405,"stem":406,"description":4283,"icon":7,"children":-1},"A compact labeling component for status indicators, counts, and categorization. Supports multiple colors, visual styles, and sizes through the recipe system.",{"title":412,"path":413,"stem":414,"description":4285,"icon":7,"children":-1},"A status indicator component positioned at the corner of an element. Supports multiple colors, visual styles, sizes, positions, and inset mode through the recipe system.",1781596336755]