[{"data":1,"prerenderedAt":4852},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-page-hero":682,"-docs-theme-components-page-hero-surround":4847},{"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":543,"body":684,"description":4841,"extension":1402,"links":4842,"meta":4843,"navigation":4844,"path":544,"seo":4845,"stem":545,"__hash__":4846},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero.md",{"type":685,"value":686,"toc":4806},"minimark",[687,691,740,747,751,754,798,802,2703,2706,2726,2731,2734,2739,2802,2812,2816,2849,2853,2856,2859,2863,2866,2869,2873,2876,2879,2883,2886,2889,2893,2908,2912,2916,3044,3054,3058,3061,3212,3442,3454,3457,3505,3509,3513,3516,3805,3809,3816,3977,3982,3985,3991,3999,4004,4125,4130,4216,4222,4225,4229,4277,4283,4286,4290,4338,4344,4350,4354,4386,4392,4398,4402,4434,4440,4443,4447,4495,4501,4507,4511,4559,4565,4572,4576,4608,4613,4617,4686,4690,4802],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,707,708,711,712,715,716,719,720,723,724,719,727,730,731,734,735,739],"p",{},"The ",[696,697,543],"strong",{}," is a multi-part landing-section primitive used for the introduction at the top of a marketing or product page. It is composed of eight recipe parts: ",[700,701,702],"code",{},"usePageHeroRecipe()"," for the ",[700,705,706],{},"\u003Csection>"," container, ",[700,709,710],{},"usePageHeroBodyRecipe()"," for the flex column that groups the headline, actions, and links, ",[700,713,714],{},"usePageHeroHeadlineRecipe()"," for the wrapper around eyebrow\u002Ftitle\u002Fdescription, ",[700,717,718],{},"usePageHeroTitleRecipe()"," and ",[700,721,722],{},"usePageHeroDescriptionRecipe()"," for the typography, ",[700,725,726],{},"usePageHeroActionsRecipe()",[700,728,729],{},"usePageHeroLinksRecipe()"," for the call-to-action groups, and ",[700,732,733],{},"usePageHeroImageRecipe()"," for the media slot. Each composable creates a fully configured ",[736,737,738],"a",{"href":132},"recipe"," with its own variant axes — the container exposes color, size, orientation, and alignment, while sub-parts inherit a focused subset.",[692,741,742,743,746],{},"The PageHero recipes integrate directly with the default ",[736,744,745],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[688,748,750],{"id":749},"why-use-the-pagehero-recipe","Why use the PageHero recipe?",[692,752,753],{},"The PageHero recipe helps you:",[755,756,757,764,770,780,786,792],"ul",{},[758,759,760,763],"li",{},[696,761,762],{},"Ship faster with sensible defaults",": Get 3 colors, 3 sizes, 2 orientations, and 2 alignments out of the box with a single set of composable calls.",[758,765,766,769],{},[696,767,768],{},"Compose layout from real parts",": Eight coordinated recipes (container + 7 sub-parts) share the same axes, so your hero stays internally consistent across orientation and alignment changes.",[758,771,772,775,776,779],{},[696,773,774],{},"Maintain consistency",": Compound variants resolve color and orientation-alignment combinations automatically, including dark mode for the ",[700,777,778],{},"neutral"," color.",[758,781,782,785],{},[696,783,784],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[758,787,788,791],{},[696,789,790],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, size, orientation, or alignment values at compile time.",[758,793,794,797],{},[696,795,796],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[688,799,801],{"id":800},"usage","Usage",[803,804,806,811,818,1252,1256,1259,2694,2698],"steps",{"level":805},"4",[807,808,810],"h4",{"id":809},"register-the-recipes","Register the recipes",[692,812,813,814,817],{},"Add the PageHero recipes to a local Styleframe instance. The global ",[700,815,816],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[819,820,822,1145],"code-tree",{"default-value":821},"src\u002Fcomponents\u002Fpage-hero.styleframe.ts",[823,824,829],"pre",{"className":825,"code":826,"filename":821,"language":827,"meta":828,"style":828},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    usePageHeroRecipe,\n    usePageHeroBodyRecipe,\n    usePageHeroHeadlineRecipe,\n    usePageHeroTitleRecipe,\n    usePageHeroDescriptionRecipe,\n    usePageHeroActionsRecipe,\n    usePageHeroLinksRecipe,\n    usePageHeroImageRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst pageHero = usePageHeroRecipe(s);\nconst pageHeroBody = usePageHeroBodyRecipe(s);\nconst pageHeroHeadline = usePageHeroHeadlineRecipe(s);\nconst pageHeroTitle = usePageHeroTitleRecipe(s);\nconst pageHeroDescription = usePageHeroDescriptionRecipe(s);\nconst pageHeroActions = usePageHeroActionsRecipe(s);\nconst pageHeroLinks = usePageHeroLinksRecipe(s);\nconst pageHeroImage = usePageHeroImageRecipe(s);\n\nexport default s;\n","ts","",[700,830,831,867,875,884,892,900,908,916,924,932,940,957,963,984,989,1007,1024,1041,1058,1075,1092,1109,1126,1131],{"__ignoreMap":828},[832,833,836,840,844,848,851,854,857,861,864],"span",{"class":834,"line":835},"line",1,[832,837,839],{"class":838},"s7zQu","import",[832,841,843],{"class":842},"sMK4o"," {",[832,845,847],{"class":846},"sTEyZ"," styleframe",[832,849,850],{"class":842}," }",[832,852,853],{"class":838}," from",[832,855,856],{"class":842}," '",[832,858,860],{"class":859},"sfazB","virtual:styleframe",[832,862,863],{"class":842},"'",[832,865,866],{"class":842},";\n",[832,868,870,872],{"class":834,"line":869},2,[832,871,839],{"class":838},[832,873,874],{"class":842}," {\n",[832,876,878,881],{"class":834,"line":877},3,[832,879,880],{"class":846},"    usePageHeroRecipe",[832,882,883],{"class":842},",\n",[832,885,887,890],{"class":834,"line":886},4,[832,888,889],{"class":846},"    usePageHeroBodyRecipe",[832,891,883],{"class":842},[832,893,895,898],{"class":834,"line":894},5,[832,896,897],{"class":846},"    usePageHeroHeadlineRecipe",[832,899,883],{"class":842},[832,901,903,906],{"class":834,"line":902},6,[832,904,905],{"class":846},"    usePageHeroTitleRecipe",[832,907,883],{"class":842},[832,909,911,914],{"class":834,"line":910},7,[832,912,913],{"class":846},"    usePageHeroDescriptionRecipe",[832,915,883],{"class":842},[832,917,919,922],{"class":834,"line":918},8,[832,920,921],{"class":846},"    usePageHeroActionsRecipe",[832,923,883],{"class":842},[832,925,927,930],{"class":834,"line":926},9,[832,928,929],{"class":846},"    usePageHeroLinksRecipe",[832,931,883],{"class":842},[832,933,935,938],{"class":834,"line":934},10,[832,936,937],{"class":846},"    usePageHeroImageRecipe",[832,939,883],{"class":842},[832,941,943,946,948,950,953,955],{"class":834,"line":942},11,[832,944,945],{"class":842},"}",[832,947,853],{"class":838},[832,949,856],{"class":842},[832,951,952],{"class":859},"@styleframe\u002Ftheme",[832,954,863],{"class":842},[832,956,866],{"class":842},[832,958,960],{"class":834,"line":959},12,[832,961,962],{"emptyLinePlaceholder":223},"\n",[832,964,966,970,973,976,979,982],{"class":834,"line":965},13,[832,967,969],{"class":968},"spNyl","const",[832,971,972],{"class":846}," s ",[832,974,975],{"class":842},"=",[832,977,847],{"class":978},"s2Zo4",[832,980,981],{"class":846},"()",[832,983,866],{"class":842},[832,985,987],{"class":834,"line":986},14,[832,988,962],{"emptyLinePlaceholder":223},[832,990,992,994,997,999,1002,1005],{"class":834,"line":991},15,[832,993,969],{"class":968},[832,995,996],{"class":846}," pageHero ",[832,998,975],{"class":842},[832,1000,1001],{"class":978}," usePageHeroRecipe",[832,1003,1004],{"class":846},"(s)",[832,1006,866],{"class":842},[832,1008,1010,1012,1015,1017,1020,1022],{"class":834,"line":1009},16,[832,1011,969],{"class":968},[832,1013,1014],{"class":846}," pageHeroBody ",[832,1016,975],{"class":842},[832,1018,1019],{"class":978}," usePageHeroBodyRecipe",[832,1021,1004],{"class":846},[832,1023,866],{"class":842},[832,1025,1027,1029,1032,1034,1037,1039],{"class":834,"line":1026},17,[832,1028,969],{"class":968},[832,1030,1031],{"class":846}," pageHeroHeadline ",[832,1033,975],{"class":842},[832,1035,1036],{"class":978}," usePageHeroHeadlineRecipe",[832,1038,1004],{"class":846},[832,1040,866],{"class":842},[832,1042,1044,1046,1049,1051,1054,1056],{"class":834,"line":1043},18,[832,1045,969],{"class":968},[832,1047,1048],{"class":846}," pageHeroTitle ",[832,1050,975],{"class":842},[832,1052,1053],{"class":978}," usePageHeroTitleRecipe",[832,1055,1004],{"class":846},[832,1057,866],{"class":842},[832,1059,1061,1063,1066,1068,1071,1073],{"class":834,"line":1060},19,[832,1062,969],{"class":968},[832,1064,1065],{"class":846}," pageHeroDescription ",[832,1067,975],{"class":842},[832,1069,1070],{"class":978}," usePageHeroDescriptionRecipe",[832,1072,1004],{"class":846},[832,1074,866],{"class":842},[832,1076,1078,1080,1083,1085,1088,1090],{"class":834,"line":1077},20,[832,1079,969],{"class":968},[832,1081,1082],{"class":846}," pageHeroActions ",[832,1084,975],{"class":842},[832,1086,1087],{"class":978}," usePageHeroActionsRecipe",[832,1089,1004],{"class":846},[832,1091,866],{"class":842},[832,1093,1095,1097,1100,1102,1105,1107],{"class":834,"line":1094},21,[832,1096,969],{"class":968},[832,1098,1099],{"class":846}," pageHeroLinks ",[832,1101,975],{"class":842},[832,1103,1104],{"class":978}," usePageHeroLinksRecipe",[832,1106,1004],{"class":846},[832,1108,866],{"class":842},[832,1110,1112,1114,1117,1119,1122,1124],{"class":834,"line":1111},22,[832,1113,969],{"class":968},[832,1115,1116],{"class":846}," pageHeroImage ",[832,1118,975],{"class":842},[832,1120,1121],{"class":978}," usePageHeroImageRecipe",[832,1123,1004],{"class":846},[832,1125,866],{"class":842},[832,1127,1129],{"class":834,"line":1128},23,[832,1130,962],{"emptyLinePlaceholder":223},[832,1132,1134,1137,1140,1143],{"class":834,"line":1133},24,[832,1135,1136],{"class":838},"export",[832,1138,1139],{"class":838}," default",[832,1141,1142],{"class":846}," s",[832,1144,866],{"class":842},[823,1146,1148],{"className":825,"code":1147,"filename":816,"language":827,"meta":828,"style":828},"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,1149,1150,1171,1198,1202,1216,1220,1229,1238,1242],{"__ignoreMap":828},[832,1151,1152,1154,1156,1158,1160,1162,1164,1167,1169],{"class":834,"line":835},[832,1153,839],{"class":838},[832,1155,843],{"class":842},[832,1157,847],{"class":846},[832,1159,850],{"class":842},[832,1161,853],{"class":838},[832,1163,856],{"class":842},[832,1165,1166],{"class":859},"styleframe",[832,1168,863],{"class":842},[832,1170,866],{"class":842},[832,1172,1173,1175,1177,1180,1183,1186,1188,1190,1192,1194,1196],{"class":834,"line":869},[832,1174,839],{"class":838},[832,1176,843],{"class":842},[832,1178,1179],{"class":846}," useDesignTokensPreset",[832,1181,1182],{"class":842},",",[832,1184,1185],{"class":846}," useUtilitiesPreset",[832,1187,850],{"class":842},[832,1189,853],{"class":838},[832,1191,856],{"class":842},[832,1193,952],{"class":859},[832,1195,863],{"class":842},[832,1197,866],{"class":842},[832,1199,1200],{"class":834,"line":877},[832,1201,962],{"emptyLinePlaceholder":223},[832,1203,1204,1206,1208,1210,1212,1214],{"class":834,"line":886},[832,1205,969],{"class":968},[832,1207,972],{"class":846},[832,1209,975],{"class":842},[832,1211,847],{"class":978},[832,1213,981],{"class":846},[832,1215,866],{"class":842},[832,1217,1218],{"class":834,"line":894},[832,1219,962],{"emptyLinePlaceholder":223},[832,1221,1222,1225,1227],{"class":834,"line":902},[832,1223,1224],{"class":978},"useDesignTokensPreset",[832,1226,1004],{"class":846},[832,1228,866],{"class":842},[832,1230,1231,1234,1236],{"class":834,"line":910},[832,1232,1233],{"class":978},"useUtilitiesPreset",[832,1235,1004],{"class":846},[832,1237,866],{"class":842},[832,1239,1240],{"class":834,"line":918},[832,1241,962],{"emptyLinePlaceholder":223},[832,1243,1244,1246,1248,1250],{"class":834,"line":926},[832,1245,1136],{"class":838},[832,1247,1139],{"class":838},[832,1249,1142],{"class":846},[832,1251,866],{"class":842},[807,1253,1255],{"id":1254},"build-the-component","Build the component",[692,1257,1258],{},"Import the runtime functions from the virtual module and pass variant props to compute class names:",[1260,1261,1262,1713,2144],"framework-switcher",{},[1263,1264,1265],"template",{"v-slot:vue":828},[823,1266,1271],{"className":1267,"code":1268,"filename":1269,"language":1270,"meta":828,"style":828},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport {\n    pageHero,\n    pageHeroHeadline,\n    pageHeroTitle,\n    pageHeroDescription,\n    pageHeroActions,\n    type PageHeroProps,\n} from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    size = \"md\",\n    orientation = \"vertical\",\n    alignment = \"center\",\n    title,\n    description,\n} = defineProps\u003CPageHeroProps & { title: string; description?: string }>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Csection :class=\"pageHero({ color, size, orientation, alignment })\">\n        \u003Cdiv :class=\"pageHeroHeadline({ size, alignment })\">\n            \u003Ch1 :class=\"pageHeroTitle({ size })\">{{ title }}\u003C\u002Fh1>\n            \u003Cp v-if=\"description\" :class=\"pageHeroDescription({ size })\">\n                {{ description }}\n            \u003C\u002Fp>\n        \u003C\u002Fdiv>\n        \u003Cdiv :class=\"pageHeroActions({ size, alignment })\">\n            \u003Cslot \u002F>\n        \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FPageHero.vue","vue",[700,1272,1273,1300,1306,1313,1320,1327,1334,1341,1351,1366,1370,1376,1391,1407,1423,1439,1446,1453,1501,1510,1514,1522,1544,1565,1596,1628,1634,1644,1654,1674,1685,1694,1704],{"__ignoreMap":828},[832,1274,1275,1278,1282,1285,1288,1290,1293,1295,1297],{"class":834,"line":835},[832,1276,1277],{"class":842},"\u003C",[832,1279,1281],{"class":1280},"swJcz","script",[832,1283,1284],{"class":968}," setup",[832,1286,1287],{"class":968}," lang",[832,1289,975],{"class":842},[832,1291,1292],{"class":842},"\"",[832,1294,827],{"class":859},[832,1296,1292],{"class":842},[832,1298,1299],{"class":842},">\n",[832,1301,1302,1304],{"class":834,"line":869},[832,1303,839],{"class":838},[832,1305,874],{"class":842},[832,1307,1308,1311],{"class":834,"line":877},[832,1309,1310],{"class":846},"    pageHero",[832,1312,883],{"class":842},[832,1314,1315,1318],{"class":834,"line":886},[832,1316,1317],{"class":846},"    pageHeroHeadline",[832,1319,883],{"class":842},[832,1321,1322,1325],{"class":834,"line":894},[832,1323,1324],{"class":846},"    pageHeroTitle",[832,1326,883],{"class":842},[832,1328,1329,1332],{"class":834,"line":902},[832,1330,1331],{"class":846},"    pageHeroDescription",[832,1333,883],{"class":842},[832,1335,1336,1339],{"class":834,"line":910},[832,1337,1338],{"class":846},"    pageHeroActions",[832,1340,883],{"class":842},[832,1342,1343,1346,1349],{"class":834,"line":918},[832,1344,1345],{"class":838},"    type",[832,1347,1348],{"class":846}," PageHeroProps",[832,1350,883],{"class":842},[832,1352,1353,1355,1357,1360,1362,1364],{"class":834,"line":926},[832,1354,945],{"class":842},[832,1356,853],{"class":838},[832,1358,1359],{"class":842}," \"",[832,1361,860],{"class":859},[832,1363,1292],{"class":842},[832,1365,866],{"class":842},[832,1367,1368],{"class":834,"line":934},[832,1369,962],{"emptyLinePlaceholder":223},[832,1371,1372,1374],{"class":834,"line":942},[832,1373,969],{"class":968},[832,1375,874],{"class":842},[832,1377,1378,1381,1383,1385,1387,1389],{"class":834,"line":959},[832,1379,1380],{"class":846},"    color ",[832,1382,975],{"class":842},[832,1384,1359],{"class":842},[832,1386,778],{"class":859},[832,1388,1292],{"class":842},[832,1390,883],{"class":842},[832,1392,1393,1396,1398,1400,1403,1405],{"class":834,"line":965},[832,1394,1395],{"class":846},"    size ",[832,1397,975],{"class":842},[832,1399,1359],{"class":842},[832,1401,1402],{"class":859},"md",[832,1404,1292],{"class":842},[832,1406,883],{"class":842},[832,1408,1409,1412,1414,1416,1419,1421],{"class":834,"line":986},[832,1410,1411],{"class":846},"    orientation ",[832,1413,975],{"class":842},[832,1415,1359],{"class":842},[832,1417,1418],{"class":859},"vertical",[832,1420,1292],{"class":842},[832,1422,883],{"class":842},[832,1424,1425,1428,1430,1432,1435,1437],{"class":834,"line":991},[832,1426,1427],{"class":846},"    alignment ",[832,1429,975],{"class":842},[832,1431,1359],{"class":842},[832,1433,1434],{"class":859},"center",[832,1436,1292],{"class":842},[832,1438,883],{"class":842},[832,1440,1441,1444],{"class":834,"line":1009},[832,1442,1443],{"class":846},"    title",[832,1445,883],{"class":842},[832,1447,1448,1451],{"class":834,"line":1026},[832,1449,1450],{"class":846},"    description",[832,1452,883],{"class":842},[832,1454,1455,1457,1460,1463,1465,1469,1472,1474,1477,1480,1483,1486,1489,1492,1494,1497,1499],{"class":834,"line":1043},[832,1456,945],{"class":842},[832,1458,1459],{"class":842}," =",[832,1461,1462],{"class":978}," defineProps",[832,1464,1277],{"class":842},[832,1466,1468],{"class":1467},"sBMFI","PageHeroProps",[832,1470,1471],{"class":842}," &",[832,1473,843],{"class":842},[832,1475,1476],{"class":1280}," title",[832,1478,1479],{"class":842},":",[832,1481,1482],{"class":1467}," string",[832,1484,1485],{"class":842},";",[832,1487,1488],{"class":1280}," description",[832,1490,1491],{"class":842},"?:",[832,1493,1482],{"class":1467},[832,1495,1496],{"class":842}," }>",[832,1498,981],{"class":846},[832,1500,866],{"class":842},[832,1502,1503,1506,1508],{"class":834,"line":1060},[832,1504,1505],{"class":842},"\u003C\u002F",[832,1507,1281],{"class":1280},[832,1509,1299],{"class":842},[832,1511,1512],{"class":834,"line":1077},[832,1513,962],{"emptyLinePlaceholder":223},[832,1515,1516,1518,1520],{"class":834,"line":1094},[832,1517,1277],{"class":842},[832,1519,1263],{"class":1280},[832,1521,1299],{"class":842},[832,1523,1524,1527,1530,1533,1535,1537,1540,1542],{"class":834,"line":1111},[832,1525,1526],{"class":842},"    \u003C",[832,1528,1529],{"class":1280},"section",[832,1531,1532],{"class":968}," :class",[832,1534,975],{"class":842},[832,1536,1292],{"class":842},[832,1538,1539],{"class":859},"pageHero({ color, size, orientation, alignment })",[832,1541,1292],{"class":842},[832,1543,1299],{"class":842},[832,1545,1546,1549,1552,1554,1556,1558,1561,1563],{"class":834,"line":1128},[832,1547,1548],{"class":842},"        \u003C",[832,1550,1551],{"class":1280},"div",[832,1553,1532],{"class":968},[832,1555,975],{"class":842},[832,1557,1292],{"class":842},[832,1559,1560],{"class":859},"pageHeroHeadline({ size, alignment })",[832,1562,1292],{"class":842},[832,1564,1299],{"class":842},[832,1566,1567,1570,1573,1575,1577,1579,1582,1584,1587,1590,1592,1594],{"class":834,"line":1133},[832,1568,1569],{"class":842},"            \u003C",[832,1571,1572],{"class":1280},"h1",[832,1574,1532],{"class":968},[832,1576,975],{"class":842},[832,1578,1292],{"class":842},[832,1580,1581],{"class":859},"pageHeroTitle({ size })",[832,1583,1292],{"class":842},[832,1585,1586],{"class":842},">",[832,1588,1589],{"class":846},"{{ title }}",[832,1591,1505],{"class":842},[832,1593,1572],{"class":1280},[832,1595,1299],{"class":842},[832,1597,1599,1601,1603,1606,1608,1610,1613,1615,1617,1619,1621,1624,1626],{"class":834,"line":1598},25,[832,1600,1569],{"class":842},[832,1602,692],{"class":1280},[832,1604,1605],{"class":968}," v-if",[832,1607,975],{"class":842},[832,1609,1292],{"class":842},[832,1611,1612],{"class":859},"description",[832,1614,1292],{"class":842},[832,1616,1532],{"class":968},[832,1618,975],{"class":842},[832,1620,1292],{"class":842},[832,1622,1623],{"class":859},"pageHeroDescription({ size })",[832,1625,1292],{"class":842},[832,1627,1299],{"class":842},[832,1629,1631],{"class":834,"line":1630},26,[832,1632,1633],{"class":846},"                {{ description }}\n",[832,1635,1637,1640,1642],{"class":834,"line":1636},27,[832,1638,1639],{"class":842},"            \u003C\u002F",[832,1641,692],{"class":1280},[832,1643,1299],{"class":842},[832,1645,1647,1650,1652],{"class":834,"line":1646},28,[832,1648,1649],{"class":842},"        \u003C\u002F",[832,1651,1551],{"class":1280},[832,1653,1299],{"class":842},[832,1655,1657,1659,1661,1663,1665,1667,1670,1672],{"class":834,"line":1656},29,[832,1658,1548],{"class":842},[832,1660,1551],{"class":1280},[832,1662,1532],{"class":968},[832,1664,975],{"class":842},[832,1666,1292],{"class":842},[832,1668,1669],{"class":859},"pageHeroActions({ size, alignment })",[832,1671,1292],{"class":842},[832,1673,1299],{"class":842},[832,1675,1677,1679,1682],{"class":834,"line":1676},30,[832,1678,1569],{"class":842},[832,1680,1681],{"class":1280},"slot",[832,1683,1684],{"class":842}," \u002F>\n",[832,1686,1688,1690,1692],{"class":834,"line":1687},31,[832,1689,1649],{"class":842},[832,1691,1551],{"class":1280},[832,1693,1299],{"class":842},[832,1695,1697,1700,1702],{"class":834,"line":1696},32,[832,1698,1699],{"class":842},"    \u003C\u002F",[832,1701,1529],{"class":1280},[832,1703,1299],{"class":842},[832,1705,1707,1709,1711],{"class":834,"line":1706},33,[832,1708,1505],{"class":842},[832,1710,1263],{"class":1280},[832,1712,1299],{"class":842},[1263,1714,1715],{"v-slot:react":828},[823,1716,1719],{"className":825,"code":1717,"filename":1718,"language":827,"meta":828,"style":828},"import {\n    pageHero,\n    pageHeroHeadline,\n    pageHeroTitle,\n    pageHeroDescription,\n    pageHeroActions,\n    type PageHeroProps,\n} from \"virtual:styleframe\";\n\nexport function PageHero({\n    color = \"neutral\",\n    size = \"md\",\n    orientation = \"vertical\",\n    alignment = \"center\",\n    title,\n    description,\n    children,\n}: PageHeroProps & { title: string; description?: string; children?: React.ReactNode }) {\n    return (\n        \u003Csection className={pageHero({ color, size, orientation, alignment })}>\n            \u003Cdiv className={pageHeroHeadline({ size, alignment })}>\n                \u003Ch1 className={pageHeroTitle({ size })}>{title}\u003C\u002Fh1>\n                {description && (\n                    \u003Cp className={pageHeroDescription({ size })}>{description}\u003C\u002Fp>\n                )}\n            \u003C\u002Fdiv>\n            {children && (\n                \u003Cdiv className={pageHeroActions({ size, alignment })}>{children}\u003C\u002Fdiv>\n            )}\n        \u003C\u002Fsection>\n    );\n}\n","src\u002Fcomponents\u002FPageHero.tsx",[700,1720,1721,1727,1733,1739,1745,1751,1757,1765,1779,1783,1796,1812,1827,1842,1857,1863,1869,1876,1922,1930,1969,1992,2023,2033,2061,2069,2077,2087,2118,2125,2133,2140],{"__ignoreMap":828},[832,1722,1723,1725],{"class":834,"line":835},[832,1724,839],{"class":838},[832,1726,874],{"class":842},[832,1728,1729,1731],{"class":834,"line":869},[832,1730,1310],{"class":846},[832,1732,883],{"class":842},[832,1734,1735,1737],{"class":834,"line":877},[832,1736,1317],{"class":846},[832,1738,883],{"class":842},[832,1740,1741,1743],{"class":834,"line":886},[832,1742,1324],{"class":846},[832,1744,883],{"class":842},[832,1746,1747,1749],{"class":834,"line":894},[832,1748,1331],{"class":846},[832,1750,883],{"class":842},[832,1752,1753,1755],{"class":834,"line":902},[832,1754,1338],{"class":846},[832,1756,883],{"class":842},[832,1758,1759,1761,1763],{"class":834,"line":910},[832,1760,1345],{"class":838},[832,1762,1348],{"class":846},[832,1764,883],{"class":842},[832,1766,1767,1769,1771,1773,1775,1777],{"class":834,"line":918},[832,1768,945],{"class":842},[832,1770,853],{"class":838},[832,1772,1359],{"class":842},[832,1774,860],{"class":859},[832,1776,1292],{"class":842},[832,1778,866],{"class":842},[832,1780,1781],{"class":834,"line":926},[832,1782,962],{"emptyLinePlaceholder":223},[832,1784,1785,1787,1790,1793],{"class":834,"line":934},[832,1786,1136],{"class":838},[832,1788,1789],{"class":968}," function",[832,1791,1792],{"class":978}," PageHero",[832,1794,1795],{"class":842},"({\n",[832,1797,1798,1802,1804,1806,1808,1810],{"class":834,"line":942},[832,1799,1801],{"class":1800},"sHdIc","    color",[832,1803,1459],{"class":842},[832,1805,1359],{"class":842},[832,1807,778],{"class":859},[832,1809,1292],{"class":842},[832,1811,883],{"class":842},[832,1813,1814,1817,1819,1821,1823,1825],{"class":834,"line":959},[832,1815,1816],{"class":1800},"    size",[832,1818,1459],{"class":842},[832,1820,1359],{"class":842},[832,1822,1402],{"class":859},[832,1824,1292],{"class":842},[832,1826,883],{"class":842},[832,1828,1829,1832,1834,1836,1838,1840],{"class":834,"line":965},[832,1830,1831],{"class":1800},"    orientation",[832,1833,1459],{"class":842},[832,1835,1359],{"class":842},[832,1837,1418],{"class":859},[832,1839,1292],{"class":842},[832,1841,883],{"class":842},[832,1843,1844,1847,1849,1851,1853,1855],{"class":834,"line":986},[832,1845,1846],{"class":1800},"    alignment",[832,1848,1459],{"class":842},[832,1850,1359],{"class":842},[832,1852,1434],{"class":859},[832,1854,1292],{"class":842},[832,1856,883],{"class":842},[832,1858,1859,1861],{"class":834,"line":991},[832,1860,1443],{"class":1800},[832,1862,883],{"class":842},[832,1864,1865,1867],{"class":834,"line":1009},[832,1866,1450],{"class":1800},[832,1868,883],{"class":842},[832,1870,1871,1874],{"class":834,"line":1026},[832,1872,1873],{"class":1800},"    children",[832,1875,883],{"class":842},[832,1877,1878,1881,1883,1885,1887,1889,1891,1893,1895,1897,1899,1901,1903,1906,1908,1911,1914,1917,1920],{"class":834,"line":1043},[832,1879,1880],{"class":842},"}:",[832,1882,1348],{"class":1467},[832,1884,1471],{"class":842},[832,1886,843],{"class":842},[832,1888,1476],{"class":1280},[832,1890,1479],{"class":842},[832,1892,1482],{"class":1467},[832,1894,1485],{"class":842},[832,1896,1488],{"class":1280},[832,1898,1491],{"class":842},[832,1900,1482],{"class":1467},[832,1902,1485],{"class":842},[832,1904,1905],{"class":1280}," children",[832,1907,1491],{"class":842},[832,1909,1910],{"class":1467}," React",[832,1912,1913],{"class":842},".",[832,1915,1916],{"class":1467},"ReactNode",[832,1918,1919],{"class":842}," })",[832,1921,874],{"class":842},[832,1923,1924,1927],{"class":834,"line":1060},[832,1925,1926],{"class":838},"    return",[832,1928,1929],{"class":1280}," (\n",[832,1931,1932,1934,1936,1939,1942,1945,1948,1951,1953,1956,1958,1961,1963,1966],{"class":834,"line":1077},[832,1933,1548],{"class":842},[832,1935,1529],{"class":846},[832,1937,1938],{"class":846}," className",[832,1940,1941],{"class":842},"={",[832,1943,1944],{"class":1280},"pageHero",[832,1946,1947],{"class":842},"({",[832,1949,1950],{"class":1800}," color",[832,1952,1182],{"class":842},[832,1954,1955],{"class":1800}," size",[832,1957,1182],{"class":842},[832,1959,1960],{"class":1800}," orientation",[832,1962,1182],{"class":842},[832,1964,1965],{"class":1800}," alignment",[832,1967,1968],{"class":842}," })}>\n",[832,1970,1971,1973,1975,1977,1979,1982,1984,1986,1988,1990],{"class":834,"line":1094},[832,1972,1569],{"class":842},[832,1974,1551],{"class":846},[832,1976,1938],{"class":846},[832,1978,1941],{"class":842},[832,1980,1981],{"class":1280},"pageHeroHeadline",[832,1983,1947],{"class":842},[832,1985,1955],{"class":1800},[832,1987,1182],{"class":842},[832,1989,1965],{"class":1800},[832,1991,1968],{"class":842},[832,1993,1994,1997,1999,2001,2003,2006,2008,2010,2013,2016,2019,2021],{"class":834,"line":1111},[832,1995,1996],{"class":842},"                \u003C",[832,1998,1572],{"class":846},[832,2000,1938],{"class":846},[832,2002,1941],{"class":842},[832,2004,2005],{"class":1280},"pageHeroTitle",[832,2007,1947],{"class":842},[832,2009,1955],{"class":1800},[832,2011,2012],{"class":842}," })}>{",[832,2014,2015],{"class":846},"title",[832,2017,2018],{"class":842},"}\u003C\u002F",[832,2020,1572],{"class":846},[832,2022,1299],{"class":842},[832,2024,2025,2028,2030],{"class":834,"line":1128},[832,2026,2027],{"class":842},"                {",[832,2029,1612],{"class":1800},[832,2031,2032],{"class":1280}," && (\n",[832,2034,2035,2038,2040,2042,2044,2047,2049,2051,2053,2055,2057,2059],{"class":834,"line":1133},[832,2036,2037],{"class":1280},"                    \u003C",[832,2039,692],{"class":1800},[832,2041,1938],{"class":1800},[832,2043,1941],{"class":842},[832,2045,2046],{"class":1280},"pageHeroDescription",[832,2048,1947],{"class":842},[832,2050,1955],{"class":1800},[832,2052,2012],{"class":842},[832,2054,1612],{"class":846},[832,2056,2018],{"class":842},[832,2058,692],{"class":846},[832,2060,1299],{"class":842},[832,2062,2063,2066],{"class":834,"line":1598},[832,2064,2065],{"class":1280},"                )",[832,2067,2068],{"class":842},"}\n",[832,2070,2071,2073,2075],{"class":834,"line":1630},[832,2072,1639],{"class":842},[832,2074,1551],{"class":846},[832,2076,1299],{"class":842},[832,2078,2079,2082,2085],{"class":834,"line":1636},[832,2080,2081],{"class":842},"            {",[832,2083,2084],{"class":1800},"children",[832,2086,2032],{"class":1280},[832,2088,2089,2091,2093,2095,2097,2100,2102,2104,2106,2108,2110,2112,2114,2116],{"class":834,"line":1646},[832,2090,1996],{"class":1280},[832,2092,1551],{"class":1800},[832,2094,1938],{"class":1800},[832,2096,1941],{"class":842},[832,2098,2099],{"class":1280},"pageHeroActions",[832,2101,1947],{"class":842},[832,2103,1955],{"class":1800},[832,2105,1182],{"class":842},[832,2107,1965],{"class":1800},[832,2109,2012],{"class":842},[832,2111,2084],{"class":846},[832,2113,2018],{"class":842},[832,2115,1551],{"class":846},[832,2117,1299],{"class":842},[832,2119,2120,2123],{"class":834,"line":1656},[832,2121,2122],{"class":1280},"            )",[832,2124,2068],{"class":842},[832,2126,2127,2129,2131],{"class":834,"line":1676},[832,2128,1649],{"class":842},[832,2130,1529],{"class":846},[832,2132,1299],{"class":842},[832,2134,2135,2138],{"class":834,"line":1687},[832,2136,2137],{"class":1280},"    )",[832,2139,866],{"class":842},[832,2141,2142],{"class":834,"line":1696},[832,2143,2068],{"class":842},[1263,2145,2146,2149,2471],{"v-slot:other":828},[692,2147,2148],{},"The page-hero runtimes each return a class string. Apply them however your framework binds classes:",[823,2150,2153],{"className":825,"code":2151,"filename":2152,"language":827,"meta":828,"style":828},"import {\n    pageHero,\n    pageHeroHeadline,\n    pageHeroTitle,\n    pageHeroDescription,\n    pageHeroActions,\n} from \"virtual:styleframe\";\n\nconst sectionClasses = pageHero({\n    color: \"neutral\",\n    size: \"md\",\n    orientation: \"vertical\",\n    alignment: \"center\",\n});\n\u002F\u002F → \"page-hero _position:relative _padding-y:lg ...\"\nconst headlineClasses = pageHeroHeadline({ size: \"md\", alignment: \"center\" });\n\u002F\u002F → \"page-hero-headline _display:flex _flex-direction:column ...\"\nconst titleClasses = pageHeroTitle({ size: \"md\" });\n\u002F\u002F → \"page-hero-title _font-size:3xl _font-weight:bold ...\"\nconst descriptionClasses = pageHeroDescription({ size: \"md\" });\n\u002F\u002F → \"page-hero-description _max-width:60ch _font-size:md ...\"\nconst actionsClasses = pageHeroActions({ size: \"md\", alignment: \"center\" });\n\u002F\u002F → \"page-hero-actions _display:flex _gap:md ...\"\n","src\u002Fcomponents\u002Fpage-hero.ts",[700,2154,2155,2161,2167,2173,2179,2185,2191,2205,2209,2227,2241,2255,2269,2283,2292,2298,2343,2348,2380,2385,2417,2422,2466],{"__ignoreMap":828},[832,2156,2157,2159],{"class":834,"line":835},[832,2158,839],{"class":838},[832,2160,874],{"class":842},[832,2162,2163,2165],{"class":834,"line":869},[832,2164,1310],{"class":846},[832,2166,883],{"class":842},[832,2168,2169,2171],{"class":834,"line":877},[832,2170,1317],{"class":846},[832,2172,883],{"class":842},[832,2174,2175,2177],{"class":834,"line":886},[832,2176,1324],{"class":846},[832,2178,883],{"class":842},[832,2180,2181,2183],{"class":834,"line":894},[832,2182,1331],{"class":846},[832,2184,883],{"class":842},[832,2186,2187,2189],{"class":834,"line":902},[832,2188,1338],{"class":846},[832,2190,883],{"class":842},[832,2192,2193,2195,2197,2199,2201,2203],{"class":834,"line":910},[832,2194,945],{"class":842},[832,2196,853],{"class":838},[832,2198,1359],{"class":842},[832,2200,860],{"class":859},[832,2202,1292],{"class":842},[832,2204,866],{"class":842},[832,2206,2207],{"class":834,"line":918},[832,2208,962],{"emptyLinePlaceholder":223},[832,2210,2211,2213,2216,2218,2221,2224],{"class":834,"line":926},[832,2212,969],{"class":968},[832,2214,2215],{"class":846}," sectionClasses ",[832,2217,975],{"class":842},[832,2219,2220],{"class":978}," pageHero",[832,2222,2223],{"class":846},"(",[832,2225,2226],{"class":842},"{\n",[832,2228,2229,2231,2233,2235,2237,2239],{"class":834,"line":934},[832,2230,1801],{"class":1280},[832,2232,1479],{"class":842},[832,2234,1359],{"class":842},[832,2236,778],{"class":859},[832,2238,1292],{"class":842},[832,2240,883],{"class":842},[832,2242,2243,2245,2247,2249,2251,2253],{"class":834,"line":942},[832,2244,1816],{"class":1280},[832,2246,1479],{"class":842},[832,2248,1359],{"class":842},[832,2250,1402],{"class":859},[832,2252,1292],{"class":842},[832,2254,883],{"class":842},[832,2256,2257,2259,2261,2263,2265,2267],{"class":834,"line":959},[832,2258,1831],{"class":1280},[832,2260,1479],{"class":842},[832,2262,1359],{"class":842},[832,2264,1418],{"class":859},[832,2266,1292],{"class":842},[832,2268,883],{"class":842},[832,2270,2271,2273,2275,2277,2279,2281],{"class":834,"line":965},[832,2272,1846],{"class":1280},[832,2274,1479],{"class":842},[832,2276,1359],{"class":842},[832,2278,1434],{"class":859},[832,2280,1292],{"class":842},[832,2282,883],{"class":842},[832,2284,2285,2287,2290],{"class":834,"line":986},[832,2286,945],{"class":842},[832,2288,2289],{"class":846},")",[832,2291,866],{"class":842},[832,2293,2294],{"class":834,"line":991},[832,2295,2297],{"class":2296},"sHwdD","\u002F\u002F → \"page-hero _position:relative _padding-y:lg ...\"\n",[832,2299,2300,2302,2305,2307,2310,2312,2315,2317,2319,2321,2323,2325,2327,2329,2331,2333,2335,2337,2339,2341],{"class":834,"line":1009},[832,2301,969],{"class":968},[832,2303,2304],{"class":846}," headlineClasses ",[832,2306,975],{"class":842},[832,2308,2309],{"class":978}," pageHeroHeadline",[832,2311,2223],{"class":846},[832,2313,2314],{"class":842},"{",[832,2316,1955],{"class":1280},[832,2318,1479],{"class":842},[832,2320,1359],{"class":842},[832,2322,1402],{"class":859},[832,2324,1292],{"class":842},[832,2326,1182],{"class":842},[832,2328,1965],{"class":1280},[832,2330,1479],{"class":842},[832,2332,1359],{"class":842},[832,2334,1434],{"class":859},[832,2336,1292],{"class":842},[832,2338,850],{"class":842},[832,2340,2289],{"class":846},[832,2342,866],{"class":842},[832,2344,2345],{"class":834,"line":1026},[832,2346,2347],{"class":2296},"\u002F\u002F → \"page-hero-headline _display:flex _flex-direction:column ...\"\n",[832,2349,2350,2352,2355,2357,2360,2362,2364,2366,2368,2370,2372,2374,2376,2378],{"class":834,"line":1043},[832,2351,969],{"class":968},[832,2353,2354],{"class":846}," titleClasses ",[832,2356,975],{"class":842},[832,2358,2359],{"class":978}," pageHeroTitle",[832,2361,2223],{"class":846},[832,2363,2314],{"class":842},[832,2365,1955],{"class":1280},[832,2367,1479],{"class":842},[832,2369,1359],{"class":842},[832,2371,1402],{"class":859},[832,2373,1292],{"class":842},[832,2375,850],{"class":842},[832,2377,2289],{"class":846},[832,2379,866],{"class":842},[832,2381,2382],{"class":834,"line":1060},[832,2383,2384],{"class":2296},"\u002F\u002F → \"page-hero-title _font-size:3xl _font-weight:bold ...\"\n",[832,2386,2387,2389,2392,2394,2397,2399,2401,2403,2405,2407,2409,2411,2413,2415],{"class":834,"line":1077},[832,2388,969],{"class":968},[832,2390,2391],{"class":846}," descriptionClasses ",[832,2393,975],{"class":842},[832,2395,2396],{"class":978}," pageHeroDescription",[832,2398,2223],{"class":846},[832,2400,2314],{"class":842},[832,2402,1955],{"class":1280},[832,2404,1479],{"class":842},[832,2406,1359],{"class":842},[832,2408,1402],{"class":859},[832,2410,1292],{"class":842},[832,2412,850],{"class":842},[832,2414,2289],{"class":846},[832,2416,866],{"class":842},[832,2418,2419],{"class":834,"line":1094},[832,2420,2421],{"class":2296},"\u002F\u002F → \"page-hero-description _max-width:60ch _font-size:md ...\"\n",[832,2423,2424,2426,2429,2431,2434,2436,2438,2440,2442,2444,2446,2448,2450,2452,2454,2456,2458,2460,2462,2464],{"class":834,"line":1111},[832,2425,969],{"class":968},[832,2427,2428],{"class":846}," actionsClasses ",[832,2430,975],{"class":842},[832,2432,2433],{"class":978}," pageHeroActions",[832,2435,2223],{"class":846},[832,2437,2314],{"class":842},[832,2439,1955],{"class":1280},[832,2441,1479],{"class":842},[832,2443,1359],{"class":842},[832,2445,1402],{"class":859},[832,2447,1292],{"class":842},[832,2449,1182],{"class":842},[832,2451,1965],{"class":1280},[832,2453,1479],{"class":842},[832,2455,1359],{"class":842},[832,2457,1434],{"class":859},[832,2459,1292],{"class":842},[832,2461,850],{"class":842},[832,2463,2289],{"class":846},[832,2465,866],{"class":842},[832,2467,2468],{"class":834,"line":1128},[832,2469,2470],{"class":2296},"\u002F\u002F → \"page-hero-actions _display:flex _gap:md ...\"\n",[823,2472,2477],{"className":2473,"code":2474,"filename":2475,"language":2476,"meta":828,"style":828},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Csection class=\"page-hero _position:relative _padding-y:lg ...\">\n    \u003Cdiv class=\"page-hero-headline _display:flex _flex-direction:column ...\">\n        \u003Ch1 class=\"page-hero-title _font-size:3xl ...\">Welcome to Styleframe\u003C\u002Fh1>\n        \u003Cp class=\"page-hero-description _max-width:60ch ...\">Type-safe CSS-in-TypeScript for design systems.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"page-hero-actions _display:flex _gap:md ...\">\n        \u003Ca href=\"\u002Fdocs\" class=\"button ...\">Get started\u003C\u002Fa>\n        \u003Ca href=\"\u002Fdocs\u002Fapi\" class=\"button ...\">Read the docs\u003C\u002Fa>\n    \u003C\u002Fdiv>\n\u003C\u002Fsection>\n","src\u002Fcomponents\u002Fpage-hero.html","html",[700,2478,2479,2499,2518,2546,2574,2582,2601,2641,2678,2686],{"__ignoreMap":828},[832,2480,2481,2483,2485,2488,2490,2492,2495,2497],{"class":834,"line":835},[832,2482,1277],{"class":842},[832,2484,1529],{"class":1280},[832,2486,2487],{"class":968}," class",[832,2489,975],{"class":842},[832,2491,1292],{"class":842},[832,2493,2494],{"class":859},"page-hero _position:relative _padding-y:lg ...",[832,2496,1292],{"class":842},[832,2498,1299],{"class":842},[832,2500,2501,2503,2505,2507,2509,2511,2514,2516],{"class":834,"line":869},[832,2502,1526],{"class":842},[832,2504,1551],{"class":1280},[832,2506,2487],{"class":968},[832,2508,975],{"class":842},[832,2510,1292],{"class":842},[832,2512,2513],{"class":859},"page-hero-headline _display:flex _flex-direction:column ...",[832,2515,1292],{"class":842},[832,2517,1299],{"class":842},[832,2519,2520,2522,2524,2526,2528,2530,2533,2535,2537,2540,2542,2544],{"class":834,"line":877},[832,2521,1548],{"class":842},[832,2523,1572],{"class":1280},[832,2525,2487],{"class":968},[832,2527,975],{"class":842},[832,2529,1292],{"class":842},[832,2531,2532],{"class":859},"page-hero-title _font-size:3xl ...",[832,2534,1292],{"class":842},[832,2536,1586],{"class":842},[832,2538,2539],{"class":846},"Welcome to Styleframe",[832,2541,1505],{"class":842},[832,2543,1572],{"class":1280},[832,2545,1299],{"class":842},[832,2547,2548,2550,2552,2554,2556,2558,2561,2563,2565,2568,2570,2572],{"class":834,"line":886},[832,2549,1548],{"class":842},[832,2551,692],{"class":1280},[832,2553,2487],{"class":968},[832,2555,975],{"class":842},[832,2557,1292],{"class":842},[832,2559,2560],{"class":859},"page-hero-description _max-width:60ch ...",[832,2562,1292],{"class":842},[832,2564,1586],{"class":842},[832,2566,2567],{"class":846},"Type-safe CSS-in-TypeScript for design systems.",[832,2569,1505],{"class":842},[832,2571,692],{"class":1280},[832,2573,1299],{"class":842},[832,2575,2576,2578,2580],{"class":834,"line":894},[832,2577,1699],{"class":842},[832,2579,1551],{"class":1280},[832,2581,1299],{"class":842},[832,2583,2584,2586,2588,2590,2592,2594,2597,2599],{"class":834,"line":902},[832,2585,1526],{"class":842},[832,2587,1551],{"class":1280},[832,2589,2487],{"class":968},[832,2591,975],{"class":842},[832,2593,1292],{"class":842},[832,2595,2596],{"class":859},"page-hero-actions _display:flex _gap:md ...",[832,2598,1292],{"class":842},[832,2600,1299],{"class":842},[832,2602,2603,2605,2607,2610,2612,2614,2617,2619,2621,2623,2625,2628,2630,2632,2635,2637,2639],{"class":834,"line":910},[832,2604,1548],{"class":842},[832,2606,736],{"class":1280},[832,2608,2609],{"class":968}," href",[832,2611,975],{"class":842},[832,2613,1292],{"class":842},[832,2615,2616],{"class":859},"\u002Fdocs",[832,2618,1292],{"class":842},[832,2620,2487],{"class":968},[832,2622,975],{"class":842},[832,2624,1292],{"class":842},[832,2626,2627],{"class":859},"button ...",[832,2629,1292],{"class":842},[832,2631,1586],{"class":842},[832,2633,2634],{"class":846},"Get started",[832,2636,1505],{"class":842},[832,2638,736],{"class":1280},[832,2640,1299],{"class":842},[832,2642,2643,2645,2647,2649,2651,2653,2655,2657,2659,2661,2663,2665,2667,2669,2672,2674,2676],{"class":834,"line":918},[832,2644,1548],{"class":842},[832,2646,736],{"class":1280},[832,2648,2609],{"class":968},[832,2650,975],{"class":842},[832,2652,1292],{"class":842},[832,2654,74],{"class":859},[832,2656,1292],{"class":842},[832,2658,2487],{"class":968},[832,2660,975],{"class":842},[832,2662,1292],{"class":842},[832,2664,2627],{"class":859},[832,2666,1292],{"class":842},[832,2668,1586],{"class":842},[832,2670,2671],{"class":846},"Read the docs",[832,2673,1505],{"class":842},[832,2675,736],{"class":1280},[832,2677,1299],{"class":842},[832,2679,2680,2682,2684],{"class":834,"line":926},[832,2681,1699],{"class":842},[832,2683,1551],{"class":1280},[832,2685,1299],{"class":842},[832,2687,2688,2690,2692],{"class":834,"line":934},[832,2689,1505],{"class":842},[832,2691,1529],{"class":1280},[832,2693,1299],{"class":842},[807,2695,2697],{"id":2696},"see-it-in-action","See it in action",[2699,2700],"story-preview",{"story":2701,":panel":2702},"theme-recipes-layout-pagehero--default","true",[688,2704,195],{"id":2705},"colors",[692,2707,2708,2709,2712,2713,2716,2717,2719,2720,2722,2723,1913],{},"The PageHero recipe includes 3 color variants: ",[700,2710,2711],{},"light",", ",[700,2714,2715],{},"dark",", and ",[700,2718,778],{},". Like the ",[736,2721,535],{"href":536}," recipe, the PageHero uses neutral-spectrum colors designed for full-bleed content surfaces rather than status communication. Color is applied via compound variants on the root container and inherited by sub-parts through CSS ",[700,2724,2725],{},"color: inherit",[692,2727,694,2728,2730],{},[700,2729,778],{}," color adapts automatically: it uses a light appearance in light mode and a dark appearance in dark mode, making it the safest default for general-purpose hero sections.",[2699,2732],{"story":2733,":panel":2702},"theme-recipes-layout-pagehero--neutral",[2735,2736,2738],"h3",{"id":2737},"color-reference","Color Reference",[2740,2741,2742,2758],"table",{},[2743,2744,2745],"thead",{},[2746,2747,2748,2752,2755],"tr",{},[2749,2750,2751],"th",{},"Color",[2749,2753,2754],{},"Token",[2749,2756,2757],{},"Use Case",[2759,2760,2761,2776,2790],"tbody",{},[2746,2762,2763,2768,2773],{},[2764,2765,2766],"td",{},[700,2767,2711],{},[2764,2769,2770],{},[700,2771,2772],{},"@color.white",[2764,2774,2775],{},"Light surfaces, stays light in dark mode",[2746,2777,2778,2782,2787],{},[2764,2779,2780],{},[700,2781,2715],{},[2764,2783,2784],{},[700,2785,2786],{},"@color.gray-900",[2764,2788,2789],{},"Dark surfaces, stays dark in light mode",[2746,2791,2792,2796,2799],{},[2764,2793,2794],{},[700,2795,778],{},[2764,2797,2798],{},"Adaptive (light ↔ dark)",[2764,2800,2801],{},"Default color, adapts to the current color scheme",[2803,2804,2805,2808,2809,2811],"tip",{},[696,2806,2807],{},"Pro tip:"," Use ",[700,2810,778],{}," as your default hero color. It adapts automatically to the user's color scheme, so you don't need to manage light and dark variants separately.",[688,2813,2815],{"id":2814},"layouts","Layouts",[692,2817,2818,2819,2822,2823,2825,2826,2829,2830,2822,2833,2825,2836,2838,2839,2712,2842,2716,2845,2848],{},"The hero's layout is controlled by two orthogonal axes: ",[696,2820,2821],{},"orientation"," (",[700,2824,1418],{}," ↔ ",[700,2827,2828],{},"horizontal",") and ",[696,2831,2832],{},"alignment",[700,2834,2835],{},"start",[700,2837,1434],{},"). Compound variants resolve the four combinations so ",[700,2840,2841],{},"align-items",[700,2843,2844],{},"justify-items",[700,2846,2847],{},"text-align"," always match the chosen layout.",[2735,2850,2852],{"id":2851},"vertical-orientation","Vertical orientation",[692,2854,2855],{},"Stacks content in a column. The image (if present) sits below the text block.",[2699,2857],{"story":2858,":panel":2702},"theme-recipes-layout-pagehero--vertical",[2735,2860,2862],{"id":2861},"horizontal-orientation","Horizontal orientation",[692,2864,2865],{},"Splits content into a two-column grid. The image (if present) sits beside the text block.",[2699,2867],{"story":2868,":panel":2702},"theme-recipes-layout-pagehero--horizontal",[2735,2870,2872],{"id":2871},"start-alignment","Start alignment",[692,2874,2875],{},"Aligns text and CTAs to the left edge of the content area. Common for split layouts where the eye reads from text on the left to media on the right.",[2699,2877],{"story":2878,":panel":2702},"theme-recipes-layout-pagehero--align-start",[2735,2880,2882],{"id":2881},"center-alignment","Center alignment",[692,2884,2885],{},"Centers text and CTAs horizontally. Common for stacked, single-column heroes that anchor the page.",[2699,2887],{"story":2888,":panel":2702},"theme-recipes-layout-pagehero--align-center",[688,2890,2892],{"id":2891},"sizes","Sizes",[692,2894,2895,2896,2899,2900,2903,2904,2907],{},"Three size variants from ",[700,2897,2898],{},"sm"," to ",[700,2901,2902],{},"lg"," control the container's vertical padding and gap, plus the body and headline gaps, title font size, description font size, actions gap, links gap and font size, and the image's border radius and shadow. Pass the same ",[700,2905,2906],{},"size"," value to every sub-recipe so the proportions stay coherent.",[2699,2909],{"story":2910,":height":2911},"theme-recipes-layout-pagehero--all-sizes","720",[2735,2913,2915],{"id":2914},"size-reference","Size Reference",[2740,2917,2918,2940],{},[2743,2919,2920],{},[2746,2921,2922,2925,2928,2931,2934,2937],{},[2749,2923,2924],{},"Size",[2749,2926,2927],{},"Container Padding-Y",[2749,2929,2930],{},"Container Gap",[2749,2932,2933],{},"Title Font Size",[2749,2935,2936],{},"Description Font Size",[2749,2938,2939],{},"Image Radius \u002F Shadow",[2759,2941,2942,2977,3011],{},[2746,2943,2944,2948,2953,2958,2963,2968],{},[2764,2945,2946],{},[700,2947,2898],{},[2764,2949,2950],{},[700,2951,2952],{},"@2",[2764,2954,2955],{},[700,2956,2957],{},"@1",[2764,2959,2960],{},[700,2961,2962],{},"@font-size.2xl",[2764,2964,2965],{},[700,2966,2967],{},"@font-size.sm",[2764,2969,2970,2973,2974],{},[700,2971,2972],{},"@border-radius.md"," \u002F ",[700,2975,2976],{},"@box-shadow.md",[2746,2978,2979,2983,2988,2993,2998,3003],{},[2764,2980,2981],{},[700,2982,1402],{},[2764,2984,2985],{},[700,2986,2987],{},"@3",[2764,2989,2990],{},[700,2991,2992],{},"@1.5",[2764,2994,2995],{},[700,2996,2997],{},"@font-size.3xl",[2764,2999,3000],{},[700,3001,3002],{},"@font-size.md",[2764,3004,3005,2973,3008],{},[700,3006,3007],{},"@border-radius.lg",[700,3009,3010],{},"@box-shadow.lg",[2746,3012,3013,3017,3022,3026,3031,3036],{},[2764,3014,3015],{},[700,3016,2902],{},[2764,3018,3019],{},[700,3020,3021],{},"@4",[2764,3023,3024],{},[700,3025,2952],{},[2764,3027,3028],{},[700,3029,3030],{},"@font-size.4xl",[2764,3032,3033],{},[700,3034,3035],{},"@font-size.lg",[2764,3037,3038,2973,3041],{},[700,3039,3040],{},"@border-radius.xl",[700,3042,3043],{},"@box-shadow.xl",[3045,3046,3047,3050,3051,3053],"note",{},[696,3048,3049],{},"Good to know:"," The ",[700,3052,2906],{}," prop must be passed to each sub-recipe individually. The container controls padding-block and overall gap, while every sub-part scales its own typography or spacing.",[688,3055,3057],{"id":3056},"anatomy","Anatomy",[692,3059,3060],{},"The PageHero recipe is composed of eight independent recipes that work together to form a complete landing-section layout:",[2740,3062,3063,3076],{},[2743,3064,3065],{},[2746,3066,3067,3070,3073],{},[2749,3068,3069],{},"Part",[2749,3071,3072],{},"Recipe",[2749,3074,3075],{},"Role",[2759,3077,3078,3098,3114,3132,3149,3166,3181,3197],{},[2746,3079,3080,3085,3089],{},[2764,3081,3082],{},[696,3083,3084],{},"Container",[2764,3086,3087],{},[700,3088,702],{},[2764,3090,3091,3092,3094,3095],{},"Outer ",[700,3093,706],{}," with padding-block, overflow clipping, and ",[700,3096,3097],{},"position: relative",[2746,3099,3100,3104,3108],{},[2764,3101,3102],{},[696,3103,256],{},[2764,3105,3106],{},[700,3107,710],{},[2764,3109,3110,3113],{},[700,3111,3112],{},"\u003Cdiv>"," flex column grouping the headline, actions, and links; becomes the column opposite the image in horizontal orientation",[2746,3115,3116,3121,3125],{},[2764,3117,3118],{},[696,3119,3120],{},"Headline",[2764,3122,3123],{},[700,3124,714],{},[2764,3126,3127,3129,3130],{},[700,3128,3112],{}," wrapper around the title + description; controls vertical stacking and ",[700,3131,2847],{},[2746,3133,3134,3139,3143],{},[2764,3135,3136],{},[696,3137,3138],{},"Title",[2764,3140,3141],{},[700,3142,718],{},[2764,3144,3145,3148],{},[700,3146,3147],{},"\u003Ch1>"," heading with display-scale typography",[2746,3150,3151,3156,3160],{},[2764,3152,3153],{},[696,3154,3155],{},"Description",[2764,3157,3158],{},[700,3159,722],{},[2764,3161,3162,3165],{},[700,3163,3164],{},"\u003Cp>"," lede with clamped 60ch max-width for readable measure",[2746,3167,3168,3172,3176],{},[2764,3169,3170],{},[696,3171,364],{},[2764,3173,3174],{},[700,3175,726],{},[2764,3177,3178,3180],{},[700,3179,3112],{}," flex row for the primary + secondary CTAs",[2746,3182,3183,3187,3191],{},[2764,3184,3185],{},[696,3186,270],{},[2764,3188,3189],{},[700,3190,729],{},[2764,3192,3193,3196],{},[700,3194,3195],{},"\u003Cnav>"," flex row for secondary text-link CTAs",[2746,3198,3199,3203,3207],{},[2764,3200,3201],{},[696,3202,306],{},[2764,3204,3205],{},[700,3206,733],{},[2764,3208,3209,3211],{},[700,3210,3112],{}," media slot with rounded corners and shadow",[823,3213,3215],{"className":2473,"code":3214,"language":2476,"meta":828,"style":828},"\u003C!-- All eight parts working together -->\n\u003Csection class=\"page-hero(...)\">\n    \u003Cdiv class=\"page-hero-body(...)\">\n        \u003Cdiv class=\"page-hero-headline(...)\">\n            \u003Ch1 class=\"page-hero-title(...)\">Title\u003C\u002Fh1>\n            \u003Cp class=\"page-hero-description(...)\">Description\u003C\u002Fp>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"page-hero-actions(...)\">…CTAs…\u003C\u002Fdiv>\n        \u003Cnav class=\"page-hero-links(...)\">…links…\u003C\u002Fnav>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"page-hero-image(...)\">…media…\u003C\u002Fdiv>\n\u003C\u002Fsection>\n",[700,3216,3217,3222,3241,3260,3279,3306,3333,3341,3369,3398,3406,3434],{"__ignoreMap":828},[832,3218,3219],{"class":834,"line":835},[832,3220,3221],{"class":2296},"\u003C!-- All eight parts working together -->\n",[832,3223,3224,3226,3228,3230,3232,3234,3237,3239],{"class":834,"line":869},[832,3225,1277],{"class":842},[832,3227,1529],{"class":1280},[832,3229,2487],{"class":968},[832,3231,975],{"class":842},[832,3233,1292],{"class":842},[832,3235,3236],{"class":859},"page-hero(...)",[832,3238,1292],{"class":842},[832,3240,1299],{"class":842},[832,3242,3243,3245,3247,3249,3251,3253,3256,3258],{"class":834,"line":877},[832,3244,1526],{"class":842},[832,3246,1551],{"class":1280},[832,3248,2487],{"class":968},[832,3250,975],{"class":842},[832,3252,1292],{"class":842},[832,3254,3255],{"class":859},"page-hero-body(...)",[832,3257,1292],{"class":842},[832,3259,1299],{"class":842},[832,3261,3262,3264,3266,3268,3270,3272,3275,3277],{"class":834,"line":886},[832,3263,1548],{"class":842},[832,3265,1551],{"class":1280},[832,3267,2487],{"class":968},[832,3269,975],{"class":842},[832,3271,1292],{"class":842},[832,3273,3274],{"class":859},"page-hero-headline(...)",[832,3276,1292],{"class":842},[832,3278,1299],{"class":842},[832,3280,3281,3283,3285,3287,3289,3291,3294,3296,3298,3300,3302,3304],{"class":834,"line":894},[832,3282,1569],{"class":842},[832,3284,1572],{"class":1280},[832,3286,2487],{"class":968},[832,3288,975],{"class":842},[832,3290,1292],{"class":842},[832,3292,3293],{"class":859},"page-hero-title(...)",[832,3295,1292],{"class":842},[832,3297,1586],{"class":842},[832,3299,3138],{"class":846},[832,3301,1505],{"class":842},[832,3303,1572],{"class":1280},[832,3305,1299],{"class":842},[832,3307,3308,3310,3312,3314,3316,3318,3321,3323,3325,3327,3329,3331],{"class":834,"line":902},[832,3309,1569],{"class":842},[832,3311,692],{"class":1280},[832,3313,2487],{"class":968},[832,3315,975],{"class":842},[832,3317,1292],{"class":842},[832,3319,3320],{"class":859},"page-hero-description(...)",[832,3322,1292],{"class":842},[832,3324,1586],{"class":842},[832,3326,3155],{"class":846},[832,3328,1505],{"class":842},[832,3330,692],{"class":1280},[832,3332,1299],{"class":842},[832,3334,3335,3337,3339],{"class":834,"line":910},[832,3336,1649],{"class":842},[832,3338,1551],{"class":1280},[832,3340,1299],{"class":842},[832,3342,3343,3345,3347,3349,3351,3353,3356,3358,3360,3363,3365,3367],{"class":834,"line":918},[832,3344,1548],{"class":842},[832,3346,1551],{"class":1280},[832,3348,2487],{"class":968},[832,3350,975],{"class":842},[832,3352,1292],{"class":842},[832,3354,3355],{"class":859},"page-hero-actions(...)",[832,3357,1292],{"class":842},[832,3359,1586],{"class":842},[832,3361,3362],{"class":846},"…CTAs…",[832,3364,1505],{"class":842},[832,3366,1551],{"class":1280},[832,3368,1299],{"class":842},[832,3370,3371,3373,3376,3378,3380,3382,3385,3387,3389,3392,3394,3396],{"class":834,"line":926},[832,3372,1548],{"class":842},[832,3374,3375],{"class":1280},"nav",[832,3377,2487],{"class":968},[832,3379,975],{"class":842},[832,3381,1292],{"class":842},[832,3383,3384],{"class":859},"page-hero-links(...)",[832,3386,1292],{"class":842},[832,3388,1586],{"class":842},[832,3390,3391],{"class":846},"…links…",[832,3393,1505],{"class":842},[832,3395,3375],{"class":1280},[832,3397,1299],{"class":842},[832,3399,3400,3402,3404],{"class":834,"line":934},[832,3401,1699],{"class":842},[832,3403,1551],{"class":1280},[832,3405,1299],{"class":842},[832,3407,3408,3410,3412,3414,3416,3418,3421,3423,3425,3428,3430,3432],{"class":834,"line":942},[832,3409,1526],{"class":842},[832,3411,1551],{"class":1280},[832,3413,2487],{"class":968},[832,3415,975],{"class":842},[832,3417,1292],{"class":842},[832,3419,3420],{"class":859},"page-hero-image(...)",[832,3422,1292],{"class":842},[832,3424,1586],{"class":842},[832,3426,3427],{"class":846},"…media…",[832,3429,1505],{"class":842},[832,3431,1551],{"class":1280},[832,3433,1299],{"class":842},[832,3435,3436,3438,3440],{"class":834,"line":959},[832,3437,1505],{"class":842},[832,3439,1529],{"class":1280},[832,3441,1299],{"class":842},[2803,3443,3444,3446,3447,3449,3450,3453],{},[696,3445,2807],{}," No dedicated eyebrow recipe is shipped because the existing ",[736,3448,404],{"href":405}," recipe already covers that use case. Drop a ",[700,3451,3452],{},"\u003CBadge color=\"primary\" variant=\"soft\" size=\"sm\">"," inside the headline above the title for the \"What's new\" pattern.",[688,3455,568],{"id":3456},"accessibility",[755,3458,3459,3475,3491],{},[758,3460,3461,3467,3468,3471,3472,3474],{},[696,3462,3463,3464,3466],{},"Use one ",[700,3465,3147],{}," per page."," The PageHero is intended for the top-of-page introduction. If you render multiple heroes on the same route, demote inner titles to ",[700,3469,3470],{},"\u003Ch2>"," by overriding the ",[700,3473,3138],{}," sub-component's element.",[758,3476,3477,3050,3480,719,3482,3484,3485,1913],{},[696,3478,3479],{},"Verify contrast ratios.",[700,3481,2711],{},[700,3483,2715],{}," colors place fixed-contrast text on fixed backgrounds (WCAG AA 4.5:1 with default tokens). If you customize colors, verify with the ",[736,3486,3490],{"href":3487,"rel":3488},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[3489],"nofollow","WebAIM Contrast Checker",[758,3492,3493,3496,3497,3500,3501,3504],{},[696,3494,3495],{},"Provide accessible CTAs."," The Actions and Links sub-recipes are layout-only wrappers. Wrap interactive content in semantic ",[700,3498,3499],{},"\u003Ca>"," or ",[700,3502,3503],{},"\u003Cbutton>"," elements with descriptive labels.",[688,3506,3508],{"id":3507},"customization","Customization",[2735,3510,3512],{"id":3511},"overriding-defaults","Overriding Defaults",[692,3514,3515],{},"Each PageHero 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:",[823,3517,3519],{"className":825,"code":3518,"filename":821,"language":827,"meta":828,"style":828},"import { styleframe } from 'virtual:styleframe';\nimport {\n    usePageHeroRecipe,\n    usePageHeroTitleRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst pageHero = usePageHeroRecipe(s, {\n    base: {\n        paddingTop: '@4',\n        paddingBottom: '@4',\n    },\n    defaultVariants: {\n        color: 'neutral',\n        size: 'lg',\n        orientation: 'horizontal',\n        alignment: 'start',\n    },\n});\n\nconst pageHeroTitle = usePageHeroTitleRecipe(s, {\n    defaultVariants: {\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[700,3520,3521,3541,3547,3553,3559,3573,3577,3591,3595,3612,3621,3636,3651,3656,3665,3680,3695,3710,3725,3729,3737,3741,3757,3765,3779,3783,3791,3795],{"__ignoreMap":828},[832,3522,3523,3525,3527,3529,3531,3533,3535,3537,3539],{"class":834,"line":835},[832,3524,839],{"class":838},[832,3526,843],{"class":842},[832,3528,847],{"class":846},[832,3530,850],{"class":842},[832,3532,853],{"class":838},[832,3534,856],{"class":842},[832,3536,860],{"class":859},[832,3538,863],{"class":842},[832,3540,866],{"class":842},[832,3542,3543,3545],{"class":834,"line":869},[832,3544,839],{"class":838},[832,3546,874],{"class":842},[832,3548,3549,3551],{"class":834,"line":877},[832,3550,880],{"class":846},[832,3552,883],{"class":842},[832,3554,3555,3557],{"class":834,"line":886},[832,3556,905],{"class":846},[832,3558,883],{"class":842},[832,3560,3561,3563,3565,3567,3569,3571],{"class":834,"line":894},[832,3562,945],{"class":842},[832,3564,853],{"class":838},[832,3566,856],{"class":842},[832,3568,952],{"class":859},[832,3570,863],{"class":842},[832,3572,866],{"class":842},[832,3574,3575],{"class":834,"line":902},[832,3576,962],{"emptyLinePlaceholder":223},[832,3578,3579,3581,3583,3585,3587,3589],{"class":834,"line":910},[832,3580,969],{"class":968},[832,3582,972],{"class":846},[832,3584,975],{"class":842},[832,3586,847],{"class":978},[832,3588,981],{"class":846},[832,3590,866],{"class":842},[832,3592,3593],{"class":834,"line":918},[832,3594,962],{"emptyLinePlaceholder":223},[832,3596,3597,3599,3601,3603,3605,3608,3610],{"class":834,"line":926},[832,3598,969],{"class":968},[832,3600,996],{"class":846},[832,3602,975],{"class":842},[832,3604,1001],{"class":978},[832,3606,3607],{"class":846},"(s",[832,3609,1182],{"class":842},[832,3611,874],{"class":842},[832,3613,3614,3617,3619],{"class":834,"line":934},[832,3615,3616],{"class":1280},"    base",[832,3618,1479],{"class":842},[832,3620,874],{"class":842},[832,3622,3623,3626,3628,3630,3632,3634],{"class":834,"line":942},[832,3624,3625],{"class":1280},"        paddingTop",[832,3627,1479],{"class":842},[832,3629,856],{"class":842},[832,3631,3021],{"class":859},[832,3633,863],{"class":842},[832,3635,883],{"class":842},[832,3637,3638,3641,3643,3645,3647,3649],{"class":834,"line":959},[832,3639,3640],{"class":1280},"        paddingBottom",[832,3642,1479],{"class":842},[832,3644,856],{"class":842},[832,3646,3021],{"class":859},[832,3648,863],{"class":842},[832,3650,883],{"class":842},[832,3652,3653],{"class":834,"line":965},[832,3654,3655],{"class":842},"    },\n",[832,3657,3658,3661,3663],{"class":834,"line":986},[832,3659,3660],{"class":1280},"    defaultVariants",[832,3662,1479],{"class":842},[832,3664,874],{"class":842},[832,3666,3667,3670,3672,3674,3676,3678],{"class":834,"line":991},[832,3668,3669],{"class":1280},"        color",[832,3671,1479],{"class":842},[832,3673,856],{"class":842},[832,3675,778],{"class":859},[832,3677,863],{"class":842},[832,3679,883],{"class":842},[832,3681,3682,3685,3687,3689,3691,3693],{"class":834,"line":1009},[832,3683,3684],{"class":1280},"        size",[832,3686,1479],{"class":842},[832,3688,856],{"class":842},[832,3690,2902],{"class":859},[832,3692,863],{"class":842},[832,3694,883],{"class":842},[832,3696,3697,3700,3702,3704,3706,3708],{"class":834,"line":1026},[832,3698,3699],{"class":1280},"        orientation",[832,3701,1479],{"class":842},[832,3703,856],{"class":842},[832,3705,2828],{"class":859},[832,3707,863],{"class":842},[832,3709,883],{"class":842},[832,3711,3712,3715,3717,3719,3721,3723],{"class":834,"line":1043},[832,3713,3714],{"class":1280},"        alignment",[832,3716,1479],{"class":842},[832,3718,856],{"class":842},[832,3720,2835],{"class":859},[832,3722,863],{"class":842},[832,3724,883],{"class":842},[832,3726,3727],{"class":834,"line":1060},[832,3728,3655],{"class":842},[832,3730,3731,3733,3735],{"class":834,"line":1077},[832,3732,945],{"class":842},[832,3734,2289],{"class":846},[832,3736,866],{"class":842},[832,3738,3739],{"class":834,"line":1094},[832,3740,962],{"emptyLinePlaceholder":223},[832,3742,3743,3745,3747,3749,3751,3753,3755],{"class":834,"line":1111},[832,3744,969],{"class":968},[832,3746,1048],{"class":846},[832,3748,975],{"class":842},[832,3750,1053],{"class":978},[832,3752,3607],{"class":846},[832,3754,1182],{"class":842},[832,3756,874],{"class":842},[832,3758,3759,3761,3763],{"class":834,"line":1128},[832,3760,3660],{"class":1280},[832,3762,1479],{"class":842},[832,3764,874],{"class":842},[832,3766,3767,3769,3771,3773,3775,3777],{"class":834,"line":1133},[832,3768,3684],{"class":1280},[832,3770,1479],{"class":842},[832,3772,856],{"class":842},[832,3774,2902],{"class":859},[832,3776,863],{"class":842},[832,3778,883],{"class":842},[832,3780,3781],{"class":834,"line":1598},[832,3782,3655],{"class":842},[832,3784,3785,3787,3789],{"class":834,"line":1630},[832,3786,945],{"class":842},[832,3788,2289],{"class":846},[832,3790,866],{"class":842},[832,3792,3793],{"class":834,"line":1636},[832,3794,962],{"emptyLinePlaceholder":223},[832,3796,3797,3799,3801,3803],{"class":834,"line":1646},[832,3798,1136],{"class":838},[832,3800,1139],{"class":838},[832,3802,1142],{"class":846},[832,3804,866],{"class":842},[2735,3806,3808],{"id":3807},"filtering-variants","Filtering Variants",[692,3810,3811,3812,3815],{},"If you only need a subset of the available variants, use the ",[700,3813,3814],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[823,3817,3819],{"className":825,"code":3818,"filename":821,"language":827,"meta":828,"style":828},"import { styleframe } from 'virtual:styleframe';\nimport { usePageHeroRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the neutral color in vertical orientation\nconst pageHero = usePageHeroRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        orientation: ['vertical'],\n    },\n});\n\nexport default s;\n",[700,3820,3821,3841,3861,3865,3879,3883,3888,3904,3913,3933,3951,3955,3963,3967],{"__ignoreMap":828},[832,3822,3823,3825,3827,3829,3831,3833,3835,3837,3839],{"class":834,"line":835},[832,3824,839],{"class":838},[832,3826,843],{"class":842},[832,3828,847],{"class":846},[832,3830,850],{"class":842},[832,3832,853],{"class":838},[832,3834,856],{"class":842},[832,3836,860],{"class":859},[832,3838,863],{"class":842},[832,3840,866],{"class":842},[832,3842,3843,3845,3847,3849,3851,3853,3855,3857,3859],{"class":834,"line":869},[832,3844,839],{"class":838},[832,3846,843],{"class":842},[832,3848,1001],{"class":846},[832,3850,850],{"class":842},[832,3852,853],{"class":838},[832,3854,856],{"class":842},[832,3856,952],{"class":859},[832,3858,863],{"class":842},[832,3860,866],{"class":842},[832,3862,3863],{"class":834,"line":877},[832,3864,962],{"emptyLinePlaceholder":223},[832,3866,3867,3869,3871,3873,3875,3877],{"class":834,"line":886},[832,3868,969],{"class":968},[832,3870,972],{"class":846},[832,3872,975],{"class":842},[832,3874,847],{"class":978},[832,3876,981],{"class":846},[832,3878,866],{"class":842},[832,3880,3881],{"class":834,"line":894},[832,3882,962],{"emptyLinePlaceholder":223},[832,3884,3885],{"class":834,"line":902},[832,3886,3887],{"class":2296},"\u002F\u002F Only generate the neutral color in vertical orientation\n",[832,3889,3890,3892,3894,3896,3898,3900,3902],{"class":834,"line":910},[832,3891,969],{"class":968},[832,3893,996],{"class":846},[832,3895,975],{"class":842},[832,3897,1001],{"class":978},[832,3899,3607],{"class":846},[832,3901,1182],{"class":842},[832,3903,874],{"class":842},[832,3905,3906,3909,3911],{"class":834,"line":918},[832,3907,3908],{"class":1280},"    filter",[832,3910,1479],{"class":842},[832,3912,874],{"class":842},[832,3914,3915,3917,3919,3922,3924,3926,3928,3931],{"class":834,"line":926},[832,3916,3669],{"class":1280},[832,3918,1479],{"class":842},[832,3920,3921],{"class":846}," [",[832,3923,863],{"class":842},[832,3925,778],{"class":859},[832,3927,863],{"class":842},[832,3929,3930],{"class":846},"]",[832,3932,883],{"class":842},[832,3934,3935,3937,3939,3941,3943,3945,3947,3949],{"class":834,"line":934},[832,3936,3699],{"class":1280},[832,3938,1479],{"class":842},[832,3940,3921],{"class":846},[832,3942,863],{"class":842},[832,3944,1418],{"class":859},[832,3946,863],{"class":842},[832,3948,3930],{"class":846},[832,3950,883],{"class":842},[832,3952,3953],{"class":834,"line":942},[832,3954,3655],{"class":842},[832,3956,3957,3959,3961],{"class":834,"line":959},[832,3958,945],{"class":842},[832,3960,2289],{"class":846},[832,3962,866],{"class":842},[832,3964,3965],{"class":834,"line":965},[832,3966,962],{"emptyLinePlaceholder":223},[832,3968,3969,3971,3973,3975],{"class":834,"line":986},[832,3970,1136],{"class":838},[832,3972,1139],{"class":838},[832,3974,1142],{"class":846},[832,3976,866],{"class":842},[3045,3978,3979,3981],{},[696,3980,3049],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,3983,73],{"id":3984},"api-reference",[2735,3986,3988],{"id":3987},"usepageherorecipes-options",[700,3989,3990],{},"usePageHeroRecipe(s, options?)",[692,3992,3993,3994,3996,3997,1913],{},"Creates the root ",[700,3995,706],{}," container recipe with padding-block, overflow clipping, and ",[700,3998,3097],{},[692,4000,4001],{},[696,4002,4003],{},"Parameters:",[2740,4005,4006,4018],{},[2743,4007,4008],{},[2746,4009,4010,4013,4016],{},[2749,4011,4012],{},"Parameter",[2749,4014,4015],{},"Type",[2749,4017,3155],{},[2759,4019,4020,4035,4050,4065,4080,4095,4110],{},[2746,4021,4022,4027,4032],{},[2764,4023,4024],{},[700,4025,4026],{},"s",[2764,4028,4029],{},[700,4030,4031],{},"Styleframe",[2764,4033,4034],{},"The Styleframe instance",[2746,4036,4037,4042,4047],{},[2764,4038,4039],{},[700,4040,4041],{},"options",[2764,4043,4044],{},[700,4045,4046],{},"DeepPartial\u003CRecipeConfig>",[2764,4048,4049],{},"Optional overrides for the recipe configuration",[2746,4051,4052,4057,4062],{},[2764,4053,4054],{},[700,4055,4056],{},"options.base",[2764,4058,4059],{},[700,4060,4061],{},"VariantDeclarationsBlock",[2764,4063,4064],{},"Custom base styles for the container",[2746,4066,4067,4072,4077],{},[2764,4068,4069],{},[700,4070,4071],{},"options.variants",[2764,4073,4074],{},[700,4075,4076],{},"Variants",[2764,4078,4079],{},"Custom variant definitions",[2746,4081,4082,4087,4092],{},[2764,4083,4084],{},[700,4085,4086],{},"options.defaultVariants",[2764,4088,4089],{},[700,4090,4091],{},"Record\u003Ckeyof Variants, string>",[2764,4093,4094],{},"Default variant values",[2746,4096,4097,4102,4107],{},[2764,4098,4099],{},[700,4100,4101],{},"options.compoundVariants",[2764,4103,4104],{},[700,4105,4106],{},"CompoundVariant[]",[2764,4108,4109],{},"Custom compound variant definitions",[2746,4111,4112,4117,4122],{},[2764,4113,4114],{},[700,4115,4116],{},"options.filter",[2764,4118,4119],{},[700,4120,4121],{},"Record\u003Cstring, string[]>",[2764,4123,4124],{},"Limit which variant values are generated",[692,4126,4127],{},[696,4128,4129],{},"Variants:",[2740,4131,4132,4145],{},[2743,4133,4134],{},[2746,4135,4136,4139,4142],{},[2749,4137,4138],{},"Variant",[2749,4140,4141],{},"Options",[2749,4143,4144],{},"Default",[2759,4146,4147,4166,4184,4200],{},[2746,4148,4149,4154,4162],{},[2764,4150,4151],{},[700,4152,4153],{},"color",[2764,4155,4156,2712,4158,2712,4160],{},[700,4157,2711],{},[700,4159,2715],{},[700,4161,778],{},[2764,4163,4164],{},[700,4165,778],{},[2746,4167,4168,4172,4180],{},[2764,4169,4170],{},[700,4171,2906],{},[2764,4173,4174,2712,4176,2712,4178],{},[700,4175,2898],{},[700,4177,1402],{},[700,4179,2902],{},[2764,4181,4182],{},[700,4183,1402],{},[2746,4185,4186,4190,4196],{},[2764,4187,4188],{},[700,4189,2821],{},[2764,4191,4192,2712,4194],{},[700,4193,1418],{},[700,4195,2828],{},[2764,4197,4198],{},[700,4199,1418],{},[2746,4201,4202,4206,4212],{},[2764,4203,4204],{},[700,4205,2832],{},[2764,4207,4208,2712,4210],{},[700,4209,2835],{},[700,4211,1434],{},[2764,4213,4214],{},[700,4215,1434],{},[2735,4217,4219],{"id":4218},"usepageherobodyrecipes-options",[700,4220,4221],{},"usePageHeroBodyRecipe(s, options?)",[692,4223,4224],{},"Creates the body wrapper recipe (a flex column that groups the headline, actions, and links). In horizontal orientation it becomes one of the two side-by-side columns, opposite the image.",[692,4226,4227],{},[696,4228,4129],{},[2740,4230,4231,4241],{},[2743,4232,4233],{},[2746,4234,4235,4237,4239],{},[2749,4236,4138],{},[2749,4238,4141],{},[2749,4240,4144],{},[2759,4242,4243,4261],{},[2746,4244,4245,4249,4257],{},[2764,4246,4247],{},[700,4248,2906],{},[2764,4250,4251,2712,4253,2712,4255],{},[700,4252,2898],{},[700,4254,1402],{},[700,4256,2902],{},[2764,4258,4259],{},[700,4260,1402],{},[2746,4262,4263,4267,4273],{},[2764,4264,4265],{},[700,4266,2832],{},[2764,4268,4269,2712,4271],{},[700,4270,2835],{},[700,4272,1434],{},[2764,4274,4275],{},[700,4276,1434],{},[2735,4278,4280],{"id":4279},"usepageheroheadlinerecipes-options",[700,4281,4282],{},"usePageHeroHeadlineRecipe(s, options?)",[692,4284,4285],{},"Creates the headline wrapper recipe (a flex column for the title + description).",[692,4287,4288],{},[696,4289,4129],{},[2740,4291,4292,4302],{},[2743,4293,4294],{},[2746,4295,4296,4298,4300],{},[2749,4297,4138],{},[2749,4299,4141],{},[2749,4301,4144],{},[2759,4303,4304,4322],{},[2746,4305,4306,4310,4318],{},[2764,4307,4308],{},[700,4309,2906],{},[2764,4311,4312,2712,4314,2712,4316],{},[700,4313,2898],{},[700,4315,1402],{},[700,4317,2902],{},[2764,4319,4320],{},[700,4321,1402],{},[2746,4323,4324,4328,4334],{},[2764,4325,4326],{},[700,4327,2832],{},[2764,4329,4330,2712,4332],{},[700,4331,2835],{},[700,4333,1434],{},[2764,4335,4336],{},[700,4337,1434],{},[2735,4339,4341],{"id":4340},"usepageherotitlerecipes-options",[700,4342,4343],{},"usePageHeroTitleRecipe(s, options?)",[692,4345,4346,4347,4349],{},"Creates the title recipe (",[700,4348,3147],{},") with display-scale typography.",[692,4351,4352],{},[696,4353,4129],{},[2740,4355,4356,4366],{},[2743,4357,4358],{},[2746,4359,4360,4362,4364],{},[2749,4361,4138],{},[2749,4363,4141],{},[2749,4365,4144],{},[2759,4367,4368],{},[2746,4369,4370,4374,4382],{},[2764,4371,4372],{},[700,4373,2906],{},[2764,4375,4376,2712,4378,2712,4380],{},[700,4377,2898],{},[700,4379,1402],{},[700,4381,2902],{},[2764,4383,4384],{},[700,4385,1402],{},[2735,4387,4389],{"id":4388},"usepageherodescriptionrecipes-options",[700,4390,4391],{},"usePageHeroDescriptionRecipe(s, options?)",[692,4393,4394,4395,4397],{},"Creates the description recipe (",[700,4396,3164],{},") with a clamped 60ch max-width.",[692,4399,4400],{},[696,4401,4129],{},[2740,4403,4404,4414],{},[2743,4405,4406],{},[2746,4407,4408,4410,4412],{},[2749,4409,4138],{},[2749,4411,4141],{},[2749,4413,4144],{},[2759,4415,4416],{},[2746,4417,4418,4422,4430],{},[2764,4419,4420],{},[700,4421,2906],{},[2764,4423,4424,2712,4426,2712,4428],{},[700,4425,2898],{},[700,4427,1402],{},[700,4429,2902],{},[2764,4431,4432],{},[700,4433,1402],{},[2735,4435,4437],{"id":4436},"usepageheroactionsrecipes-options",[700,4438,4439],{},"usePageHeroActionsRecipe(s, options?)",[692,4441,4442],{},"Creates the actions container recipe (a flex row that wraps).",[692,4444,4445],{},[696,4446,4129],{},[2740,4448,4449,4459],{},[2743,4450,4451],{},[2746,4452,4453,4455,4457],{},[2749,4454,4138],{},[2749,4456,4141],{},[2749,4458,4144],{},[2759,4460,4461,4479],{},[2746,4462,4463,4467,4475],{},[2764,4464,4465],{},[700,4466,2906],{},[2764,4468,4469,2712,4471,2712,4473],{},[700,4470,2898],{},[700,4472,1402],{},[700,4474,2902],{},[2764,4476,4477],{},[700,4478,1402],{},[2746,4480,4481,4485,4491],{},[2764,4482,4483],{},[700,4484,2832],{},[2764,4486,4487,2712,4489],{},[700,4488,2835],{},[700,4490,1434],{},[2764,4492,4493],{},[700,4494,1434],{},[2735,4496,4498],{"id":4497},"usepageherolinksrecipes-options",[700,4499,4500],{},"usePageHeroLinksRecipe(s, options?)",[692,4502,4503,4504,4506],{},"Creates the secondary-links container recipe (a ",[700,4505,3195],{}," flex row).",[692,4508,4509],{},[696,4510,4129],{},[2740,4512,4513,4523],{},[2743,4514,4515],{},[2746,4516,4517,4519,4521],{},[2749,4518,4138],{},[2749,4520,4141],{},[2749,4522,4144],{},[2759,4524,4525,4543],{},[2746,4526,4527,4531,4539],{},[2764,4528,4529],{},[700,4530,2906],{},[2764,4532,4533,2712,4535,2712,4537],{},[700,4534,2898],{},[700,4536,1402],{},[700,4538,2902],{},[2764,4540,4541],{},[700,4542,1402],{},[2746,4544,4545,4549,4555],{},[2764,4546,4547],{},[700,4548,2832],{},[2764,4550,4551,2712,4553],{},[700,4552,2835],{},[700,4554,1434],{},[2764,4556,4557],{},[700,4558,1434],{},[2735,4560,4562],{"id":4561},"usepageheroimagerecipes-options",[700,4563,4564],{},"usePageHeroImageRecipe(s, options?)",[692,4566,4567,4568,4571],{},"Creates the image-slot recipe with ",[700,4569,4570],{},"overflow: hidden",", scaled border-radius, and box-shadow.",[692,4573,4574],{},[696,4575,4129],{},[2740,4577,4578,4588],{},[2743,4579,4580],{},[2746,4581,4582,4584,4586],{},[2749,4583,4138],{},[2749,4585,4141],{},[2749,4587,4144],{},[2759,4589,4590],{},[2746,4591,4592,4596,4604],{},[2764,4593,4594],{},[700,4595,2906],{},[2764,4597,4598,2712,4600,2712,4602],{},[700,4599,2898],{},[700,4601,1402],{},[700,4603,2902],{},[2764,4605,4606],{},[700,4607,1402],{},[692,4609,4610],{},[736,4611,4612],{"href":132},"Learn more about recipes →",[688,4614,4616],{"id":4615},"best-practices","Best Practices",[755,4618,4619,4631,4646,4655,4667,4676],{},[758,4620,4621,4627,4628,4630],{},[696,4622,4623,4624,4626],{},"Pass ",[700,4625,2906],{}," to every sub-recipe",": The container controls padding-block, but every sub-part scales its own typography or spacing. Pass the same ",[700,4629,2906],{}," value through to keep proportions consistent.",[758,4632,4633,4638,4639,4641,4642,2973,4644,1913],{},[696,4634,4623,4635,4637],{},[700,4636,2832],{}," to Body, Headline, Actions, and Links",": These are the sub-recipes whose layout flips with alignment. The container's ",[700,4640,2832],{}," only affects its own ",[700,4643,2841],{},[700,4645,2844],{},[758,4647,4648,4654],{},[696,4649,4650,4651,4653],{},"Use ",[700,4652,778],{}," for general-purpose heroes",": The neutral color adapts to light and dark mode automatically.",[758,4656,4657,4663,4664,4666],{},[696,4658,4659,4660,4662],{},"Reach for ",[700,4661,2828],{}," orientation when you have media",": Without an image or screenshot to fill the second column, the horizontal layout wastes space. Use ",[700,4665,1418],{}," for text-only heroes.",[758,4668,4669,4672,4673,4675],{},[696,4670,4671],{},"Filter what you don't need",": If your component only uses one orientation, pass a ",[700,4674,3814],{}," option to reduce generated CSS.",[758,4677,4678,4681,4682,4685],{},[696,4679,4680],{},"Override defaults at the recipe level",": Set your most common combination as ",[700,4683,4684],{},"defaultVariants"," so component consumers write less code.",[688,4687,4689],{"id":4688},"faq","FAQ",[4691,4692,4693,4704,4714,4722,4735,4768,4785],"accordion",{},[4694,4695,4698,4699,719,4701,4703],"accordion-item",{"icon":4696,"label":4697},"i-lucide-circle-help","Why are there eight separate recipes instead of one?","Hero sections have distinct structural parts (body, headline, title, description, actions, links, image) that need independent styling — different padding, typography scale, layout direction, and visual treatments. Eight separate recipes give each part its own base styles and variants while sharing the same ",[700,4700,2906],{},[700,4702,2832],{}," axes. This approach keeps each recipe focused and lets you compose only the parts you need.",[4694,4705,4707,4708,4710,4711,4713],{"icon":4696,"label":4706},"Do I have to use all eight sub-recipes?","No. The most minimal hero is ",[700,4709,702],{}," with ",[700,4712,718],{}," for the heading. Add Body, Headline, Description, Actions, Links, and Image only when your design needs them.",[4694,4715,4717,4718,4721],{"icon":4696,"label":4716},"Why doesn't the PageHero have a solid\u002Foutline\u002Fsoft\u002Fsubtle variant axis?","Hero sections are layout-driven, not surface-driven. The visual style of a hero is dominated by orientation (stacked vs split) and alignment (left vs center) — not by a four-way background-and-border style gradation that suits smaller components like badges or buttons. Skipping the ",[700,4719,4720],{},"variant"," axis keeps the API focused on the choices that actually shape a hero.",[4694,4723,4725,4726,4728,4729,4731,4732,4734],{"icon":4696,"label":4724},"Where does the eyebrow \u002F 'What's new' tag come from?","The PageHero family does not ship a dedicated eyebrow recipe. Use the existing ",[736,4727,404],{"href":405}," recipe and place it inside the ",[700,4730,3120],{}," above the ",[700,4733,3138],{},". This avoids duplicating Badge's full color and variant matrix in a single-purpose sub-recipe.",[4694,4736,4738,4762],{"icon":4696,"label":4737},"How do compound variants work in the PageHero recipe?",[692,4739,4740,4741,4743,4744,4743,4746,4748,4749,719,4752,4754,4755,2712,4757,2716,4759,4761],{},"The container exposes seven compound variants: three for color (one per ",[700,4742,2711],{},"\u002F",[700,4745,2715],{},[700,4747,778],{},", setting ",[700,4750,4751],{},"background",[700,4753,4153],{}," plus dark-mode overrides) and four for orientation × alignment (resolving ",[700,4756,2841],{},[700,4758,2844],{},[700,4760,2847],{}," cleanly across both layout modes). Sub-recipes use no compound variants — their axes compose orthogonally.",[692,4763,4764],{},[736,4765,4767],{"href":4766},"\u002Fdocs\u002Fapi\u002Frecipes#compound-variants","Learn more about compound variants →",[4694,4769,4771,4772,4774,4775,4777,4778,4781,4782,4784],{"icon":4696,"label":4770},"How does filtering affect compound variants?","When you use the ",[700,4773,3814],{}," option, compound variants that reference filtered-out values are automatically removed. For example, filtering ",[700,4776,2821],{}," to only ",[700,4779,4780],{},"['vertical']"," excludes the two ",[700,4783,2828],{}," orientation-alignment compound variants. Default variants are also adjusted if they reference a removed value.",[4694,4786,4788,4789,2712,4791,2712,4793,2716,4795,4797,4798,4801],{"icon":4696,"label":4787},"Can I use the PageHero recipe without the design tokens preset?","The PageHero recipes reference design tokens like ",[700,4790,2772],{},[700,4792,2997],{},[700,4794,3007],{},[700,4796,3010],{}," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[700,4799,4800],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[4803,4804,4805],"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":828,"searchDepth":869,"depth":869,"links":4807},[4808,4809,4810,4811,4814,4820,4823,4824,4825,4829,4839,4840],{"id":690,"depth":869,"text":78},{"id":749,"depth":869,"text":750},{"id":800,"depth":869,"text":801},{"id":2705,"depth":869,"text":195,"children":4812},[4813],{"id":2737,"depth":877,"text":2738},{"id":2814,"depth":869,"text":2815,"children":4815},[4816,4817,4818,4819],{"id":2851,"depth":877,"text":2852},{"id":2861,"depth":877,"text":2862},{"id":2871,"depth":877,"text":2872},{"id":2881,"depth":877,"text":2882},{"id":2891,"depth":869,"text":2892,"children":4821},[4822],{"id":2914,"depth":877,"text":2915},{"id":3056,"depth":869,"text":3057},{"id":3456,"depth":869,"text":568},{"id":3507,"depth":869,"text":3508,"children":4826},[4827,4828],{"id":3511,"depth":877,"text":3512},{"id":3807,"depth":877,"text":3808},{"id":3984,"depth":869,"text":73,"children":4830},[4831,4832,4833,4834,4835,4836,4837,4838],{"id":3987,"depth":877,"text":3990},{"id":4218,"depth":877,"text":4221},{"id":4279,"depth":877,"text":4282},{"id":4340,"depth":877,"text":4343},{"id":4388,"depth":877,"text":4391},{"id":4436,"depth":877,"text":4439},{"id":4497,"depth":877,"text":4500},{"id":4561,"depth":877,"text":4564},{"id":4615,"depth":869,"text":4616},{"id":4688,"depth":869,"text":4689},"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.",null,{},{"icon":7},{"title":543,"description":4841},"XvLOG-ol79r06UKPVzfEi5Gbu0TjYDTYKk0NXEPYTA4",[4848,4850],{"title":539,"path":540,"stem":541,"description":4849,"icon":7,"children":-1},"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.",{"title":547,"path":548,"stem":549,"description":4851,"icon":7,"children":-1},"A visual placeholder container with a dashed border and hatch pattern for layout prototyping, wireframing, and empty states. Uses the recipe system with dark mode support.",1781596345364]