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