[{"data":1,"prerenderedAt":2053},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-elements-composables-code":543,"-docs-theme-elements-composables-code-surround":2048},{"gettingStarted":4,"api":76,"theme":167},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,34,40,66,71],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"to":30,"target":31,"external":32,"icon":33},"Storybook","/docs/getting-started/storybook","docs/getting-started/04.storybook","https://storybook.styleframe.dev","_blank",true,"i-simple-icons-storybook",{"title":35,"path":36,"stem":37,"to":38,"target":31,"external":32,"icon":39},"Playground","/docs/getting-started/playground","docs/getting-started/05.playground","https://play.styleframe.dev","i-simple-icons-playwright",{"title":41,"icon":42,"path":43,"stem":44,"children":45,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/06.tooling",[46,51,56,61],{"title":47,"path":48,"stem":49,"icon":50},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/06.tooling/01.cli","i-lucide-square-terminal",{"title":52,"path":53,"stem":54,"icon":55},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/06.tooling/02.scanner","i-lucide-view",{"title":57,"path":58,"stem":59,"icon":60},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/06.tooling/03.figma-plugin","i-simple-icons-figma",{"title":62,"path":63,"stem":64,"icon":65},"DTCG","/docs/getting-started/tooling/dtcg","docs/getting-started/06.tooling/04.dtcg","i-lucide-square-code",{"title":67,"path":68,"stem":69,"icon":70},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/07.comparisons","i-lucide-file-diff",{"title":72,"path":73,"stem":74,"icon":75},"Licensing","/docs/getting-started/licensing","docs/getting-started/08.licensing","i-lucide-scale",[77],{"title":78,"path":79,"stem":80,"children":81,"icon":7},"API Reference","/docs/api","docs/api/00.index",[82,85,90,95,100,105,110,115,120,125,130,135,150,155,160,165],{"title":83,"path":79,"stem":80,"icon":84},"Overview","i-lucide-book-text",{"title":86,"path":87,"stem":88,"icon":89},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":91,"path":92,"stem":93,"icon":94},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":96,"path":97,"stem":98,"icon":99},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":101,"path":102,"stem":103,"icon":104},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":106,"path":107,"stem":108,"icon":109},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":111,"path":112,"stem":113,"icon":114},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":116,"path":117,"stem":118,"icon":119},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":121,"path":122,"stem":123,"icon":124},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":126,"path":127,"stem":128,"icon":129},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":131,"path":132,"stem":133,"icon":134},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":136,"path":137,"stem":138,"children":139,"icon":149},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[140,141,145],{"title":83,"path":137,"stem":138},{"title":142,"path":143,"stem":144},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":146,"path":147,"stem":148},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":151,"path":152,"stem":153,"icon":154},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":156,"path":157,"stem":158,"icon":159},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":161,"path":162,"stem":163,"icon":164},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":156,"path":157,"stem":166,"icon":159},"docs/api/14.imports",[168,241,335,425,498],{"title":169,"path":170,"stem":171,"children":172,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[173,174,179],{"title":83,"path":170,"stem":171,"icon":84},{"title":175,"path":176,"stem":177,"icon":178},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":151,"icon":154,"defaultOpen":7,"path":180,"stem":181,"children":182,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[183,187,191,195,199,203,207,211,225,229,233,237],{"title":184,"path":185,"stem":186,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":188,"path":189,"stem":190,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":192,"path":193,"stem":194,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":196,"path":197,"stem":198,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":200,"path":201,"stem":202,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":204,"path":205,"stem":206,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":208,"path":209,"stem":210,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":212,"path":213,"stem":214,"children":215,"icon":7,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[216,217,221],{"title":83,"path":213,"stem":214},{"title":218,"path":219,"stem":220},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":222,"path":223,"stem":224},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",{"title":226,"path":227,"stem":228,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":230,"path":231,"stem":232,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":234,"path":235,"stem":236,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":238,"path":239,"stem":240,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":242,"path":243,"stem":244,"children":245,"icon":7},"Elements","/docs/theme/elements","docs/theme/elements/00.index",[246,247,251],{"title":83,"path":243,"stem":244,"icon":84},{"title":248,"path":249,"stem":250,"icon":178},"Preset","/docs/theme/elements/preset","docs/theme/elements/01.preset",{"title":151,"icon":154,"defaultOpen":7,"path":252,"stem":253,"children":254,"page":7},"/docs/theme/elements/composables","docs/theme/elements/02.composables",[255,259,263,267,271,275,279,283,287,291,295,299,303,307,311,315,319,323,327,331],{"title":256,"path":257,"stem":258,"icon":7},"Abbreviation","/docs/theme/elements/composables/abbreviation","docs/theme/elements/02.composables/00.abbreviation",{"title":260,"path":261,"stem":262,"icon":7},"Address","/docs/theme/elements/composables/address","docs/theme/elements/02.composables/01.address",{"title":264,"path":265,"stem":266,"icon":7},"Body","/docs/theme/elements/composables/body","docs/theme/elements/02.composables/02.body",{"title":268,"path":269,"stem":270,"icon":7},"Caption","/docs/theme/elements/composables/caption","docs/theme/elements/02.composables/03.caption",{"title":272,"path":273,"stem":274,"icon":7},"Code","/docs/theme/elements/composables/code","docs/theme/elements/02.composables/04.code",{"title":276,"path":277,"stem":278,"icon":7},"Definition Lists","/docs/theme/elements/composables/definition-lists","docs/theme/elements/02.composables/05.definition-lists",{"title":280,"path":281,"stem":282,"icon":7},"Focus","/docs/theme/elements/composables/focus","docs/theme/elements/02.composables/06.focus",{"title":284,"path":285,"stem":286,"icon":7},"Headings","/docs/theme/elements/composables/headings","docs/theme/elements/02.composables/07.headings",{"title":288,"path":289,"stem":290,"icon":7},"Horizontal Rule","/docs/theme/elements/composables/horizontal-rule","docs/theme/elements/02.composables/08.horizontal-rule",{"title":292,"path":293,"stem":294,"icon":7},"Iframe","/docs/theme/elements/composables/iframe","docs/theme/elements/02.composables/09.iframe",{"title":296,"path":297,"stem":298,"icon":7},"Image","/docs/theme/elements/composables/image","docs/theme/elements/02.composables/10.image",{"title":300,"path":301,"stem":302,"icon":7},"Kbd","/docs/theme/elements/composables/kbd","docs/theme/elements/02.composables/11.kbd",{"title":304,"path":305,"stem":306,"icon":7},"Legend","/docs/theme/elements/composables/legend","docs/theme/elements/02.composables/12.legend",{"title":308,"path":309,"stem":310,"icon":7},"Links","/docs/theme/elements/composables/links","docs/theme/elements/02.composables/13.links",{"title":312,"path":313,"stem":314,"icon":7},"Lists","/docs/theme/elements/composables/lists","docs/theme/elements/02.composables/14.lists",{"title":316,"path":317,"stem":318,"icon":7},"Mark","/docs/theme/elements/composables/mark","docs/theme/elements/02.composables/15.mark",{"title":320,"path":321,"stem":322,"icon":7},"Output","/docs/theme/elements/composables/output","docs/theme/elements/02.composables/16.output",{"title":324,"path":325,"stem":326,"icon":7},"Paragraphs","/docs/theme/elements/composables/paragraphs","docs/theme/elements/02.composables/17.paragraphs",{"title":328,"path":329,"stem":330,"icon":7},"Selection","/docs/theme/elements/composables/selection","docs/theme/elements/02.composables/18.selection",{"title":332,"path":333,"stem":334,"icon":7},"Summary","/docs/theme/elements/composables/summary","docs/theme/elements/02.composables/19.summary",{"title":336,"path":337,"stem":338,"children":339,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[340,341],{"title":83,"path":337,"stem":338,"icon":84},{"title":151,"icon":154,"defaultOpen":32,"path":342,"stem":343,"children":344,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[345,349,353,357,361,365,369,373,377,381,385,389,393,397,401,405,409,413,417,421],{"title":346,"path":347,"stem":348},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":350,"path":351,"stem":352},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":354,"path":355,"stem":356},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":358,"path":359,"stem":360},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":362,"path":363,"stem":364},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":366,"path":367,"stem":368},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":370,"path":371,"stem":372},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":374,"path":375,"stem":376},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":378,"path":379,"stem":380},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":382,"path":383,"stem":384},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":386,"path":387,"stem":388},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":390,"path":391,"stem":392},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":394,"path":395,"stem":396},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":398,"path":399,"stem":400},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":402,"path":403,"stem":404},"Dropdown","/docs/theme/components/composables/dropdown","docs/theme/components/02.composables/14.dropdown",{"title":406,"path":407,"stem":408},"Hamburger Menu","/docs/theme/components/composables/hamburger-menu","docs/theme/components/02.composables/14.hamburger-menu",{"title":410,"path":411,"stem":412},"Breadcrumb","/docs/theme/components/composables/breadcrumb","docs/theme/components/02.composables/15.breadcrumb",{"title":414,"path":415,"stem":416},"Media","/docs/theme/components/composables/media","docs/theme/components/02.composables/15.media",{"title":418,"path":419,"stem":420},"PageHero","/docs/theme/components/composables/page-hero","docs/theme/components/02.composables/15.page-hero",{"title":422,"path":423,"stem":424},"Pagination","/docs/theme/components/composables/pagination","docs/theme/components/02.composables/15.pagination",{"title":121,"path":426,"stem":427,"children":428,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[429,430,433],{"title":83,"path":426,"stem":427,"icon":84},{"title":175,"path":431,"stem":432,"icon":178},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":151,"icon":154,"defaultOpen":7,"path":434,"stem":435,"children":436,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[437,441,445,449,452,456,460,464,468,472,476,479,483,487,491,495],{"title":438,"path":439,"stem":440,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":442,"path":443,"stem":444,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":446,"path":447,"stem":448,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":188,"path":450,"stem":451,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":453,"path":454,"stem":455,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":457,"path":458,"stem":459,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":461,"path":462,"stem":463,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":465,"path":466,"stem":467,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":469,"path":470,"stem":471,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":473,"path":474,"stem":475,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":230,"path":477,"stem":478,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":480,"path":481,"stem":482,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":484,"path":485,"stem":486,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":488,"path":489,"stem":490,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":492,"path":493,"stem":494,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":234,"path":496,"stem":497,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":499,"path":500,"stem":501,"children":502,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[503,504,507],{"title":83,"path":500,"stem":501,"icon":84},{"title":175,"path":505,"stem":506,"icon":178},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":151,"icon":154,"defaultOpen":7,"path":508,"stem":509,"children":510,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[511,515,519,523,527,531,535,539],{"title":512,"path":513,"stem":514,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":516,"path":517,"stem":518,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":520,"path":521,"stem":522,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":524,"path":525,"stem":526,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":528,"path":529,"stem":530,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":532,"path":533,"stem":534,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":536,"path":537,"stem":538,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":540,"path":541,"stem":542,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":544,"title":545,"body":546,"description":2040,"extension":2041,"links":2042,"meta":2043,"navigation":2044,"path":273,"seo":2045,"sitemap":2046,"stem":274,"__hash__":2047},"docs_theme/docs/theme/elements/02.composables/04.code.md","Code Element",{"type":547,"value":548,"toc":2029},"minimark",[549,553,577,582,587,659,911,916,984,989,1035,1371,1374,1449,1470,1474,1971,1975,2025],[550,551,83],"h2",{"id":552},"overview",[554,555,556,557,561,562,564,565,568,569,572,573,576],"p",{},"The code composables style inline code snippets and preformatted text blocks. The ",[558,559,560],"code",{},"useCodeElement"," composable targets ",[558,563,558],{}," and ",[558,566,567],{},"samp"," elements, while ",[558,570,571],{},"usePreElement"," configures ",[558,574,575],{},"pre"," blocks with scroll overflow and nested code resets.",[578,579],"story-preview",{":panel":580,"story":581},"true","theme-elements-code--default",[550,583,585],{"id":584},"usecodeelement",[558,586,560],{},[575,588,593],{"className":589,"code":590,"language":591,"meta":592,"style":592},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useCodeElement(\n    s: Styleframe,\n    options?: WithThemes\u003CCodeElementConfig>\n): CodeElementResult\n","ts","",[558,594,595,612,629,650],{"__ignoreMap":592},[596,597,600,604,608],"span",{"class":598,"line":599},"line",1,[596,601,603],{"class":602},"spNyl","function",[596,605,607],{"class":606},"s2Zo4"," useCodeElement",[596,609,611],{"class":610},"sMK4o","(\n",[596,613,615,619,622,626],{"class":598,"line":614},2,[596,616,618],{"class":617},"sHdIc","    s",[596,620,621],{"class":610},":",[596,623,625],{"class":624},"sBMFI"," Styleframe",[596,627,628],{"class":610},",\n",[596,630,632,635,638,641,644,647],{"class":598,"line":631},3,[596,633,634],{"class":617},"    options",[596,636,637],{"class":610},"?:",[596,639,640],{"class":624}," WithThemes",[596,642,643],{"class":610},"\u003C",[596,645,646],{"class":624},"CodeElementConfig",[596,648,649],{"class":610},">\n",[596,651,653,656],{"class":598,"line":652},4,[596,654,655],{"class":610},"):",[596,657,658],{"class":624}," CodeElementResult\n",[660,661,662,801],"tabs",{},[663,664,666],"tabs-item",{"icon":665,"label":272},"i-lucide-code",[575,667,670],{"className":589,"code":668,"filename":669,"language":591,"meta":592,"style":592},"import { styleframe } from 'styleframe';\nimport { useCodeElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { codeFontFamily, codeFontSize } = useCodeElement(s);\n\nexport default s;\n","styleframe.config.ts",[558,671,672,704,725,730,748,753,782,787],{"__ignoreMap":592},[596,673,674,678,681,685,688,691,694,698,701],{"class":598,"line":599},[596,675,677],{"class":676},"s7zQu","import",[596,679,680],{"class":610}," {",[596,682,684],{"class":683},"sTEyZ"," styleframe",[596,686,687],{"class":610}," }",[596,689,690],{"class":676}," from",[596,692,693],{"class":610}," '",[596,695,697],{"class":696},"sfazB","styleframe",[596,699,700],{"class":610},"'",[596,702,703],{"class":610},";\n",[596,705,706,708,710,712,714,716,718,721,723],{"class":598,"line":614},[596,707,677],{"class":676},[596,709,680],{"class":610},[596,711,607],{"class":683},[596,713,687],{"class":610},[596,715,690],{"class":676},[596,717,693],{"class":610},[596,719,720],{"class":696},"@styleframe/theme",[596,722,700],{"class":610},[596,724,703],{"class":610},[596,726,727],{"class":598,"line":631},[596,728,729],{"emptyLinePlaceholder":32},"\n",[596,731,732,735,738,741,743,746],{"class":598,"line":652},[596,733,734],{"class":602},"const",[596,736,737],{"class":683}," s ",[596,739,740],{"class":610},"=",[596,742,684],{"class":606},[596,744,745],{"class":683},"()",[596,747,703],{"class":610},[596,749,751],{"class":598,"line":750},5,[596,752,729],{"emptyLinePlaceholder":32},[596,754,756,758,760,763,766,769,772,775,777,780],{"class":598,"line":755},6,[596,757,734],{"class":602},[596,759,680],{"class":610},[596,761,762],{"class":683}," codeFontFamily",[596,764,765],{"class":610},",",[596,767,768],{"class":683}," codeFontSize ",[596,770,771],{"class":610},"}",[596,773,774],{"class":610}," =",[596,776,607],{"class":606},[596,778,779],{"class":683},"(s)",[596,781,703],{"class":610},[596,783,785],{"class":598,"line":784},7,[596,786,729],{"emptyLinePlaceholder":32},[596,788,790,793,796,799],{"class":598,"line":789},8,[596,791,792],{"class":676},"export",[596,794,795],{"class":676}," default",[596,797,798],{"class":683}," s",[596,800,703],{"class":610},[663,802,803],{"icon":159,"label":320},[575,804,809],{"className":805,"code":806,"filename":807,"language":808,"meta":592,"style":592},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --code--font-family: var(--font-family--mono);\n    --code--font-size: 0.875em;\n}\n\ncode, samp {\n    font-family: var(--code--font-family);\n    font-size: var(--code--font-size);\n}\n","styleframe/index.css","css",[558,810,811,821,840,853,858,862,873,890,906],{"__ignoreMap":592},[596,812,813,815,818],{"class":598,"line":599},[596,814,621],{"class":610},[596,816,817],{"class":602},"root",[596,819,820],{"class":610}," {\n",[596,822,823,826,828,831,834,837],{"class":598,"line":614},[596,824,825],{"class":683},"    --code--font-family",[596,827,621],{"class":610},[596,829,830],{"class":606}," var",[596,832,833],{"class":610},"(",[596,835,836],{"class":683},"--font-family--mono",[596,838,839],{"class":610},");\n",[596,841,842,845,847,851],{"class":598,"line":631},[596,843,844],{"class":683},"    --code--font-size",[596,846,621],{"class":610},[596,848,850],{"class":849},"sbssI"," 0.875em",[596,852,703],{"class":610},[596,854,855],{"class":598,"line":652},[596,856,857],{"class":610},"}\n",[596,859,860],{"class":598,"line":750},[596,861,729],{"emptyLinePlaceholder":32},[596,863,864,866,868,871],{"class":598,"line":755},[596,865,558],{"class":624},[596,867,765],{"class":610},[596,869,870],{"class":624}," samp",[596,872,820],{"class":610},[596,874,875,879,881,883,885,888],{"class":598,"line":784},[596,876,878],{"class":877},"sqsOY","    font-family",[596,880,621],{"class":610},[596,882,830],{"class":606},[596,884,833],{"class":610},[596,886,887],{"class":683},"--code--font-family",[596,889,839],{"class":610},[596,891,892,895,897,899,901,904],{"class":598,"line":789},[596,893,894],{"class":877},"    font-size",[596,896,621],{"class":610},[596,898,830],{"class":606},[596,900,833],{"class":610},[596,902,903],{"class":683},"--code--font-size",[596,905,839],{"class":610},[596,907,909],{"class":598,"line":908},9,[596,910,857],{"class":610},[912,913,915],"h3",{"id":914},"default-values","Default Values",[917,918,919,938],"table",{},[920,921,922],"thead",{},[923,924,925,929,932,935],"tr",{},[926,927,928],"th",{},"Option",[926,930,931],{},"Default",[926,933,934],{},"Variable",[926,936,937],{},"Export",[939,940,941,963],"tbody",{},[923,942,943,949,954,958],{},[944,945,946],"td",{},[558,947,948],{},"fontFamily",[944,950,951],{},[558,952,953],{},"\"@font-family.mono\"",[944,955,956],{},[558,957,887],{},[944,959,960],{},[558,961,962],{},"codeFontFamily",[923,964,965,970,975,979],{},[944,966,967],{},[558,968,969],{},"fontSize",[944,971,972],{},[558,973,974],{},"\"0.875em\"",[944,976,977],{},[558,978,903],{},[944,980,981],{},[558,982,983],{},"codeFontSize",[550,985,987],{"id":986},"usepreelement",[558,988,571],{},[575,990,992],{"className":589,"code":991,"language":591,"meta":592,"style":592},"function usePreElement(\n    s: Styleframe,\n    options?: WithThemes\u003CPreElementConfig>\n): PreElementResult\n",[558,993,994,1003,1013,1028],{"__ignoreMap":592},[596,995,996,998,1001],{"class":598,"line":599},[596,997,603],{"class":602},[596,999,1000],{"class":606}," usePreElement",[596,1002,611],{"class":610},[596,1004,1005,1007,1009,1011],{"class":598,"line":614},[596,1006,618],{"class":617},[596,1008,621],{"class":610},[596,1010,625],{"class":624},[596,1012,628],{"class":610},[596,1014,1015,1017,1019,1021,1023,1026],{"class":598,"line":631},[596,1016,634],{"class":617},[596,1018,637],{"class":610},[596,1020,640],{"class":624},[596,1022,643],{"class":610},[596,1024,1025],{"class":624},"PreElementConfig",[596,1027,649],{"class":610},[596,1029,1030,1032],{"class":598,"line":652},[596,1031,655],{"class":610},[596,1033,1034],{"class":624}," PreElementResult\n",[660,1036,1037,1149],{},[663,1038,1039],{"icon":665,"label":272},[575,1040,1042],{"className":589,"code":1041,"filename":669,"language":591,"meta":592,"style":592},"import { styleframe } from 'styleframe';\nimport { usePreElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { preFontFamily, preFontSize, preMarginBottom } = usePreElement(s);\n\nexport default s;\n",[558,1043,1044,1064,1084,1088,1102,1106,1135,1139],{"__ignoreMap":592},[596,1045,1046,1048,1050,1052,1054,1056,1058,1060,1062],{"class":598,"line":599},[596,1047,677],{"class":676},[596,1049,680],{"class":610},[596,1051,684],{"class":683},[596,1053,687],{"class":610},[596,1055,690],{"class":676},[596,1057,693],{"class":610},[596,1059,697],{"class":696},[596,1061,700],{"class":610},[596,1063,703],{"class":610},[596,1065,1066,1068,1070,1072,1074,1076,1078,1080,1082],{"class":598,"line":614},[596,1067,677],{"class":676},[596,1069,680],{"class":610},[596,1071,1000],{"class":683},[596,1073,687],{"class":610},[596,1075,690],{"class":676},[596,1077,693],{"class":610},[596,1079,720],{"class":696},[596,1081,700],{"class":610},[596,1083,703],{"class":610},[596,1085,1086],{"class":598,"line":631},[596,1087,729],{"emptyLinePlaceholder":32},[596,1089,1090,1092,1094,1096,1098,1100],{"class":598,"line":652},[596,1091,734],{"class":602},[596,1093,737],{"class":683},[596,1095,740],{"class":610},[596,1097,684],{"class":606},[596,1099,745],{"class":683},[596,1101,703],{"class":610},[596,1103,1104],{"class":598,"line":750},[596,1105,729],{"emptyLinePlaceholder":32},[596,1107,1108,1110,1112,1115,1117,1120,1122,1125,1127,1129,1131,1133],{"class":598,"line":755},[596,1109,734],{"class":602},[596,1111,680],{"class":610},[596,1113,1114],{"class":683}," preFontFamily",[596,1116,765],{"class":610},[596,1118,1119],{"class":683}," preFontSize",[596,1121,765],{"class":610},[596,1123,1124],{"class":683}," preMarginBottom ",[596,1126,771],{"class":610},[596,1128,774],{"class":610},[596,1130,1000],{"class":606},[596,1132,779],{"class":683},[596,1134,703],{"class":610},[596,1136,1137],{"class":598,"line":784},[596,1138,729],{"emptyLinePlaceholder":32},[596,1140,1141,1143,1145,1147],{"class":598,"line":789},[596,1142,792],{"class":676},[596,1144,795],{"class":676},[596,1146,798],{"class":683},[596,1148,703],{"class":610},[663,1150,1151],{"icon":159,"label":320},[575,1152,1154],{"className":805,"code":1153,"filename":807,"language":808,"meta":592,"style":592},":root {\n    --pre--font-family: var(--font-family--mono);\n    --pre--font-size: 0.875em;\n    --pre--margin-bottom: var(--spacing);\n}\n\npre {\n    font-family: var(--pre--font-family);\n    font-size: var(--pre--font-size);\n    display: block;\n    overflow-x: auto;\n    margin-top: 0;\n    margin-bottom: var(--pre--margin-bottom);\n}\n\npre > code {\n    background: transparent;\n    color: inherit;\n    font-size: inherit;\n}\n",[558,1155,1156,1164,1179,1190,1206,1210,1214,1220,1235,1250,1263,1276,1289,1306,1311,1316,1329,1342,1355,1366],{"__ignoreMap":592},[596,1157,1158,1160,1162],{"class":598,"line":599},[596,1159,621],{"class":610},[596,1161,817],{"class":602},[596,1163,820],{"class":610},[596,1165,1166,1169,1171,1173,1175,1177],{"class":598,"line":614},[596,1167,1168],{"class":683},"    --pre--font-family",[596,1170,621],{"class":610},[596,1172,830],{"class":606},[596,1174,833],{"class":610},[596,1176,836],{"class":683},[596,1178,839],{"class":610},[596,1180,1181,1184,1186,1188],{"class":598,"line":631},[596,1182,1183],{"class":683},"    --pre--font-size",[596,1185,621],{"class":610},[596,1187,850],{"class":849},[596,1189,703],{"class":610},[596,1191,1192,1195,1197,1199,1201,1204],{"class":598,"line":652},[596,1193,1194],{"class":683},"    --pre--margin-bottom",[596,1196,621],{"class":610},[596,1198,830],{"class":606},[596,1200,833],{"class":610},[596,1202,1203],{"class":683},"--spacing",[596,1205,839],{"class":610},[596,1207,1208],{"class":598,"line":750},[596,1209,857],{"class":610},[596,1211,1212],{"class":598,"line":755},[596,1213,729],{"emptyLinePlaceholder":32},[596,1215,1216,1218],{"class":598,"line":784},[596,1217,575],{"class":624},[596,1219,820],{"class":610},[596,1221,1222,1224,1226,1228,1230,1233],{"class":598,"line":789},[596,1223,878],{"class":877},[596,1225,621],{"class":610},[596,1227,830],{"class":606},[596,1229,833],{"class":610},[596,1231,1232],{"class":683},"--pre--font-family",[596,1234,839],{"class":610},[596,1236,1237,1239,1241,1243,1245,1248],{"class":598,"line":908},[596,1238,894],{"class":877},[596,1240,621],{"class":610},[596,1242,830],{"class":606},[596,1244,833],{"class":610},[596,1246,1247],{"class":683},"--pre--font-size",[596,1249,839],{"class":610},[596,1251,1253,1256,1258,1261],{"class":598,"line":1252},10,[596,1254,1255],{"class":877},"    display",[596,1257,621],{"class":610},[596,1259,1260],{"class":683}," block",[596,1262,703],{"class":610},[596,1264,1266,1269,1271,1274],{"class":598,"line":1265},11,[596,1267,1268],{"class":877},"    overflow-x",[596,1270,621],{"class":610},[596,1272,1273],{"class":683}," auto",[596,1275,703],{"class":610},[596,1277,1279,1282,1284,1287],{"class":598,"line":1278},12,[596,1280,1281],{"class":877},"    margin-top",[596,1283,621],{"class":610},[596,1285,1286],{"class":849}," 0",[596,1288,703],{"class":610},[596,1290,1292,1295,1297,1299,1301,1304],{"class":598,"line":1291},13,[596,1293,1294],{"class":877},"    margin-bottom",[596,1296,621],{"class":610},[596,1298,830],{"class":606},[596,1300,833],{"class":610},[596,1302,1303],{"class":683},"--pre--margin-bottom",[596,1305,839],{"class":610},[596,1307,1309],{"class":598,"line":1308},14,[596,1310,857],{"class":610},[596,1312,1314],{"class":598,"line":1313},15,[596,1315,729],{"emptyLinePlaceholder":32},[596,1317,1319,1321,1324,1327],{"class":598,"line":1318},16,[596,1320,575],{"class":624},[596,1322,1323],{"class":610}," >",[596,1325,1326],{"class":624}," code",[596,1328,820],{"class":610},[596,1330,1332,1335,1337,1340],{"class":598,"line":1331},17,[596,1333,1334],{"class":877},"    background",[596,1336,621],{"class":610},[596,1338,1339],{"class":683}," transparent",[596,1341,703],{"class":610},[596,1343,1345,1348,1350,1353],{"class":598,"line":1344},18,[596,1346,1347],{"class":877},"    color",[596,1349,621],{"class":610},[596,1351,1352],{"class":683}," inherit",[596,1354,703],{"class":610},[596,1356,1358,1360,1362,1364],{"class":598,"line":1357},19,[596,1359,894],{"class":877},[596,1361,621],{"class":610},[596,1363,1352],{"class":683},[596,1365,703],{"class":610},[596,1367,1369],{"class":598,"line":1368},20,[596,1370,857],{"class":610},[912,1372,915],{"id":1373},"default-values-1",[917,1375,1376,1388],{},[920,1377,1378],{},[923,1379,1380,1382,1384,1386],{},[926,1381,928],{},[926,1383,931],{},[926,1385,934],{},[926,1387,937],{},[939,1389,1390,1409,1428],{},[923,1391,1392,1396,1400,1404],{},[944,1393,1394],{},[558,1395,948],{},[944,1397,1398],{},[558,1399,953],{},[944,1401,1402],{},[558,1403,1232],{},[944,1405,1406],{},[558,1407,1408],{},"preFontFamily",[923,1410,1411,1415,1419,1423],{},[944,1412,1413],{},[558,1414,969],{},[944,1416,1417],{},[558,1418,974],{},[944,1420,1421],{},[558,1422,1247],{},[944,1424,1425],{},[558,1426,1427],{},"preFontSize",[923,1429,1430,1435,1440,1444],{},[944,1431,1432],{},[558,1433,1434],{},"marginBottom",[944,1436,1437],{},[558,1438,1439],{},"\"@spacing\"",[944,1441,1442],{},[558,1443,1303],{},[944,1445,1446],{},[558,1447,1448],{},"preMarginBottom",[554,1450,1451,1452,1455,1456,1459,1460,1463,1464,1466,1467,1469],{},"The composable also applies fixed styles: ",[558,1453,1454],{},"display: block",", ",[558,1457,1458],{},"overflow-x: auto",", and ",[558,1461,1462],{},"margin-top: 0",". Nested ",[558,1465,558],{}," elements inside ",[558,1468,575],{}," have their background, color, and font size reset to inherit from the parent.",[550,1471,1473],{"id":1472},"custom-values","Custom Values",[660,1475,1476,1689],{},[663,1477,1478],{"icon":665,"label":272},[575,1479,1481],{"className":589,"code":1480,"filename":669,"language":591,"meta":592,"style":592},"import { styleframe } from 'styleframe';\nimport { useCodeElement, usePreElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { codeFontFamily } = useCodeElement(s, {\n    fontFamily: '\"Fira Code\", monospace',\n    fontSize: '0.8em',\n});\n\nconst { preMarginBottom } = usePreElement(s, {\n    fontFamily: '\"Fira Code\", monospace',\n    marginBottom: '@spacing.lg',\n});\n\nexport default s;\n",[558,1482,1483,1503,1527,1531,1545,1549,1571,1588,1604,1613,1617,1637,1651,1667,1675,1679],{"__ignoreMap":592},[596,1484,1485,1487,1489,1491,1493,1495,1497,1499,1501],{"class":598,"line":599},[596,1486,677],{"class":676},[596,1488,680],{"class":610},[596,1490,684],{"class":683},[596,1492,687],{"class":610},[596,1494,690],{"class":676},[596,1496,693],{"class":610},[596,1498,697],{"class":696},[596,1500,700],{"class":610},[596,1502,703],{"class":610},[596,1504,1505,1507,1509,1511,1513,1515,1517,1519,1521,1523,1525],{"class":598,"line":614},[596,1506,677],{"class":676},[596,1508,680],{"class":610},[596,1510,607],{"class":683},[596,1512,765],{"class":610},[596,1514,1000],{"class":683},[596,1516,687],{"class":610},[596,1518,690],{"class":676},[596,1520,693],{"class":610},[596,1522,720],{"class":696},[596,1524,700],{"class":610},[596,1526,703],{"class":610},[596,1528,1529],{"class":598,"line":631},[596,1530,729],{"emptyLinePlaceholder":32},[596,1532,1533,1535,1537,1539,1541,1543],{"class":598,"line":652},[596,1534,734],{"class":602},[596,1536,737],{"class":683},[596,1538,740],{"class":610},[596,1540,684],{"class":606},[596,1542,745],{"class":683},[596,1544,703],{"class":610},[596,1546,1547],{"class":598,"line":750},[596,1548,729],{"emptyLinePlaceholder":32},[596,1550,1551,1553,1555,1558,1560,1562,1564,1567,1569],{"class":598,"line":755},[596,1552,734],{"class":602},[596,1554,680],{"class":610},[596,1556,1557],{"class":683}," codeFontFamily ",[596,1559,771],{"class":610},[596,1561,774],{"class":610},[596,1563,607],{"class":606},[596,1565,1566],{"class":683},"(s",[596,1568,765],{"class":610},[596,1570,820],{"class":610},[596,1572,1573,1577,1579,1581,1584,1586],{"class":598,"line":784},[596,1574,1576],{"class":1575},"swJcz","    fontFamily",[596,1578,621],{"class":610},[596,1580,693],{"class":610},[596,1582,1583],{"class":696},"\"Fira Code\", monospace",[596,1585,700],{"class":610},[596,1587,628],{"class":610},[596,1589,1590,1593,1595,1597,1600,1602],{"class":598,"line":789},[596,1591,1592],{"class":1575},"    fontSize",[596,1594,621],{"class":610},[596,1596,693],{"class":610},[596,1598,1599],{"class":696},"0.8em",[596,1601,700],{"class":610},[596,1603,628],{"class":610},[596,1605,1606,1608,1611],{"class":598,"line":908},[596,1607,771],{"class":610},[596,1609,1610],{"class":683},")",[596,1612,703],{"class":610},[596,1614,1615],{"class":598,"line":1252},[596,1616,729],{"emptyLinePlaceholder":32},[596,1618,1619,1621,1623,1625,1627,1629,1631,1633,1635],{"class":598,"line":1265},[596,1620,734],{"class":602},[596,1622,680],{"class":610},[596,1624,1124],{"class":683},[596,1626,771],{"class":610},[596,1628,774],{"class":610},[596,1630,1000],{"class":606},[596,1632,1566],{"class":683},[596,1634,765],{"class":610},[596,1636,820],{"class":610},[596,1638,1639,1641,1643,1645,1647,1649],{"class":598,"line":1278},[596,1640,1576],{"class":1575},[596,1642,621],{"class":610},[596,1644,693],{"class":610},[596,1646,1583],{"class":696},[596,1648,700],{"class":610},[596,1650,628],{"class":610},[596,1652,1653,1656,1658,1660,1663,1665],{"class":598,"line":1291},[596,1654,1655],{"class":1575},"    marginBottom",[596,1657,621],{"class":610},[596,1659,693],{"class":610},[596,1661,1662],{"class":696},"@spacing.lg",[596,1664,700],{"class":610},[596,1666,628],{"class":610},[596,1668,1669,1671,1673],{"class":598,"line":1308},[596,1670,771],{"class":610},[596,1672,1610],{"class":683},[596,1674,703],{"class":610},[596,1676,1677],{"class":598,"line":1313},[596,1678,729],{"emptyLinePlaceholder":32},[596,1680,1681,1683,1685,1687],{"class":598,"line":1318},[596,1682,792],{"class":676},[596,1684,795],{"class":676},[596,1686,798],{"class":683},[596,1688,703],{"class":610},[663,1690,1691],{"icon":159,"label":320},[575,1692,1694],{"className":805,"code":1693,"filename":807,"language":808,"meta":592,"style":592},":root {\n    --code--font-family: \"Fira Code\", monospace;\n    --code--font-size: 0.8em;\n    --pre--font-family: \"Fira Code\", monospace;\n    --pre--font-size: 0.875em;\n    --pre--margin-bottom: var(--spacing--lg);\n}\n\ncode, samp {\n    font-family: var(--code--font-family);\n    font-size: var(--code--font-size);\n}\n\npre {\n    font-family: var(--pre--font-family);\n    font-size: var(--pre--font-size);\n    display: block;\n    overflow-x: auto;\n    margin-top: 0;\n    margin-bottom: var(--pre--margin-bottom);\n}\n\npre > code {\n    background: transparent;\n    color: inherit;\n    font-size: inherit;\n}\n",[558,1695,1696,1704,1726,1737,1755,1765,1780,1784,1788,1798,1812,1826,1830,1834,1840,1854,1868,1878,1888,1898,1912,1917,1922,1933,1944,1955,1966],{"__ignoreMap":592},[596,1697,1698,1700,1702],{"class":598,"line":599},[596,1699,621],{"class":610},[596,1701,817],{"class":602},[596,1703,820],{"class":610},[596,1705,1706,1708,1710,1713,1716,1719,1721,1724],{"class":598,"line":614},[596,1707,825],{"class":683},[596,1709,621],{"class":610},[596,1711,1712],{"class":610}," \"",[596,1714,1715],{"class":696},"Fira Code",[596,1717,1718],{"class":610},"\"",[596,1720,765],{"class":610},[596,1722,1723],{"class":683}," monospace",[596,1725,703],{"class":610},[596,1727,1728,1730,1732,1735],{"class":598,"line":631},[596,1729,844],{"class":683},[596,1731,621],{"class":610},[596,1733,1734],{"class":849}," 0.8em",[596,1736,703],{"class":610},[596,1738,1739,1741,1743,1745,1747,1749,1751,1753],{"class":598,"line":652},[596,1740,1168],{"class":683},[596,1742,621],{"class":610},[596,1744,1712],{"class":610},[596,1746,1715],{"class":696},[596,1748,1718],{"class":610},[596,1750,765],{"class":610},[596,1752,1723],{"class":683},[596,1754,703],{"class":610},[596,1756,1757,1759,1761,1763],{"class":598,"line":750},[596,1758,1183],{"class":683},[596,1760,621],{"class":610},[596,1762,850],{"class":849},[596,1764,703],{"class":610},[596,1766,1767,1769,1771,1773,1775,1778],{"class":598,"line":755},[596,1768,1194],{"class":683},[596,1770,621],{"class":610},[596,1772,830],{"class":606},[596,1774,833],{"class":610},[596,1776,1777],{"class":683},"--spacing--lg",[596,1779,839],{"class":610},[596,1781,1782],{"class":598,"line":784},[596,1783,857],{"class":610},[596,1785,1786],{"class":598,"line":789},[596,1787,729],{"emptyLinePlaceholder":32},[596,1789,1790,1792,1794,1796],{"class":598,"line":908},[596,1791,558],{"class":624},[596,1793,765],{"class":610},[596,1795,870],{"class":624},[596,1797,820],{"class":610},[596,1799,1800,1802,1804,1806,1808,1810],{"class":598,"line":1252},[596,1801,878],{"class":877},[596,1803,621],{"class":610},[596,1805,830],{"class":606},[596,1807,833],{"class":610},[596,1809,887],{"class":683},[596,1811,839],{"class":610},[596,1813,1814,1816,1818,1820,1822,1824],{"class":598,"line":1265},[596,1815,894],{"class":877},[596,1817,621],{"class":610},[596,1819,830],{"class":606},[596,1821,833],{"class":610},[596,1823,903],{"class":683},[596,1825,839],{"class":610},[596,1827,1828],{"class":598,"line":1278},[596,1829,857],{"class":610},[596,1831,1832],{"class":598,"line":1291},[596,1833,729],{"emptyLinePlaceholder":32},[596,1835,1836,1838],{"class":598,"line":1308},[596,1837,575],{"class":624},[596,1839,820],{"class":610},[596,1841,1842,1844,1846,1848,1850,1852],{"class":598,"line":1313},[596,1843,878],{"class":877},[596,1845,621],{"class":610},[596,1847,830],{"class":606},[596,1849,833],{"class":610},[596,1851,1232],{"class":683},[596,1853,839],{"class":610},[596,1855,1856,1858,1860,1862,1864,1866],{"class":598,"line":1318},[596,1857,894],{"class":877},[596,1859,621],{"class":610},[596,1861,830],{"class":606},[596,1863,833],{"class":610},[596,1865,1247],{"class":683},[596,1867,839],{"class":610},[596,1869,1870,1872,1874,1876],{"class":598,"line":1331},[596,1871,1255],{"class":877},[596,1873,621],{"class":610},[596,1875,1260],{"class":683},[596,1877,703],{"class":610},[596,1879,1880,1882,1884,1886],{"class":598,"line":1344},[596,1881,1268],{"class":877},[596,1883,621],{"class":610},[596,1885,1273],{"class":683},[596,1887,703],{"class":610},[596,1889,1890,1892,1894,1896],{"class":598,"line":1357},[596,1891,1281],{"class":877},[596,1893,621],{"class":610},[596,1895,1286],{"class":849},[596,1897,703],{"class":610},[596,1899,1900,1902,1904,1906,1908,1910],{"class":598,"line":1368},[596,1901,1294],{"class":877},[596,1903,621],{"class":610},[596,1905,830],{"class":606},[596,1907,833],{"class":610},[596,1909,1303],{"class":683},[596,1911,839],{"class":610},[596,1913,1915],{"class":598,"line":1914},21,[596,1916,857],{"class":610},[596,1918,1920],{"class":598,"line":1919},22,[596,1921,729],{"emptyLinePlaceholder":32},[596,1923,1925,1927,1929,1931],{"class":598,"line":1924},23,[596,1926,575],{"class":624},[596,1928,1323],{"class":610},[596,1930,1326],{"class":624},[596,1932,820],{"class":610},[596,1934,1936,1938,1940,1942],{"class":598,"line":1935},24,[596,1937,1334],{"class":877},[596,1939,621],{"class":610},[596,1941,1339],{"class":683},[596,1943,703],{"class":610},[596,1945,1947,1949,1951,1953],{"class":598,"line":1946},25,[596,1948,1347],{"class":877},[596,1950,621],{"class":610},[596,1952,1352],{"class":683},[596,1954,703],{"class":610},[596,1956,1958,1960,1962,1964],{"class":598,"line":1957},26,[596,1959,894],{"class":877},[596,1961,621],{"class":610},[596,1963,1352],{"class":683},[596,1965,703],{"class":610},[596,1967,1969],{"class":598,"line":1968},27,[596,1970,857],{"class":610},[550,1972,1974],{"id":1973},"best-practices","Best Practices",[1976,1977,1978,1990,2004,2015],"ul",{},[1979,1980,1981,1985,1986,1989],"li",{},[1982,1983,1984],"strong",{},"Use a monospace font",": Both composables default to ",[558,1987,1988],{},"@font-family.mono"," for consistent code rendering.",[1979,1991,1992,1999,2000,2003],{},[1982,1993,1994,1995,1998],{},"Use ",[558,1996,1997],{},"em"," units for font size",": The default ",[558,2001,2002],{},"0.875em"," scales relative to the parent, keeping inline code proportional to surrounding text.",[1979,2005,2006,2009,2010,564,2012,2014],{},[1982,2007,2008],{},"Keep both in sync",": When customizing the font family, apply the same value to both ",[558,2011,560],{},[558,2013,571],{}," for visual consistency.",[1979,2016,2017,2020,2021,2024],{},[1982,2018,2019],{},"Rely on the nested code reset",": The ",[558,2022,2023],{},"pre > code"," reset ensures inline code styles do not leak into code blocks.",[2026,2027,2028],"style",{},"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 pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":592,"searchDepth":614,"depth":614,"links":2030},[2031,2032,2035,2038,2039],{"id":552,"depth":614,"text":83},{"id":584,"depth":614,"text":560,"children":2033},[2034],{"id":914,"depth":631,"text":915},{"id":986,"depth":614,"text":571,"children":2036},[2037],{"id":1373,"depth":631,"text":915},{"id":1472,"depth":614,"text":1473},{"id":1973,"depth":614,"text":1974},"Style inline code and preformatted text blocks with configurable font family, font size, and spacing using the useCodeElement and usePreElement composables.","md",null,{},{"title":272,"icon":7},{"title":545,"description":2040},{"loc":273},"ms8MG1hRUP5BxsqQVPCB-Bu9ckIpendf0CiHLAH3ZRM",[2049,2051],{"title":268,"path":269,"stem":270,"description":2050,"icon":7,"children":-1},"Style table caption elements with configurable color, padding, and text alignment using the useCaptionElement composable.",{"title":276,"path":277,"stem":278,"description":2052,"icon":7,"children":-1},"Style definition list elements (dl, dt, dd) with configurable margin, font weight, and spacing using the useDlElement, useDtElement, and useDdElement composables.",1778412269615]