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