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