[{"data":1,"prerenderedAt":5460},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-spacing":682,"-docs-theme-utilities-spacing-surround":5455},{"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":684,"body":685,"description":5449,"extension":1299,"links":5450,"meta":5451,"navigation":5452,"path":611,"seo":5453,"stem":612,"__hash__":5454},"docs_theme\u002Fdocs\u002Ftheme\u002Futilities\u002F12.spacing.md","Spacing Utilities",{"type":686,"value":687,"toc":5429},"minimark",[688,706,710,714,718,721,755,759,774,1677,1682,1689,1763,1787,1792,1799,2447,2451,2635,3148,3153,3159,3723,3727,3898,3903,3909,4504,4518,4522,4526,4922,4925,5002,5006,5267,5269,5318,5322,5361,5365,5425],[689,690,691,695,696,700,701,705],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Utilities Preset:"," The utilities on this page are registered by the ",[697,698,699],"a",{"href":565},"Utilities Preset"," (",[702,703,704],"code",{},"useUtilitiesPreset","). For most projects, applying them via the preset is the recommended approach.",[707,708,78],"h2",{"id":709},"overview",[711,712,713],"p",{},"Spacing utilities help you control the space around and inside elements using margin and padding. These utilities include comprehensive directional variants for fine-grained control.",[707,715,717],{"id":716},"why-use-spacing-utilities","Why Use Spacing Utilities?",[711,719,720],{},"Spacing utilities help you:",[722,723,724,731,737,743,749],"ul",{},[725,726,727,730],"li",{},[692,728,729],{},"Create consistent spacing",": Reference design tokens for uniform spacing across your application",[725,732,733,736],{},[692,734,735],{},"Control direction",": Apply spacing to specific sides using directional variants",[725,738,739,742],{},[692,740,741],{},"Support RTL layouts",": Use logical properties (start\u002Fend) for internationalization",[725,744,745,748],{},[692,746,747],{},"Build responsive designs",": Combine with modifiers for responsive spacing",[725,750,751,754],{},[692,752,753],{},"Use multiplier values",": Generate spacing based on a base variable multiplied by any factor",[707,756,758],{"id":757},"multiplier-values","Multiplier Values",[711,760,761,762,765,766,769,770,773],{},"Spacing utilities support ",[692,763,764],{},"multiplier values"," that automatically generate ",[702,767,768],{},"calc()"," expressions based on your base ",[702,771,772],{},"--spacing"," variable. This allows you to use arbitrary spacing multipliers without defining every possible value upfront.",[775,776,777,1182,1507],"tabs",{},[778,779,781],"tabs-item",{"icon":780,"label":290},"i-lucide-code",[782,783,789],"pre",{"className":784,"code":785,"filename":786,"language":787,"meta":788,"style":788},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useSpacingDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { useMarginUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\n\u002F\u002F Define the base spacing variable\nconst { spacing, spacingSm, spacingMd } = useSpacingDesignTokens(s, {\n    default: '1rem',\n    sm: '0.5rem',\n    md: '1rem',\n} as const);\n\n\u002F\u002F Create margin utility with named values\nconst createMargin = useMarginUtility(s, {\n    sm: ref(spacingSm),\n    md: ref(spacingMd),\n});\n\n\u002F\u002F Add multiplier values using array syntax (with @ prefix)\ncreateMargin([\"@1.5\", \"@2\", \"@0.5\", \"@-1\"]);\n\nexport default s;\n","styleframe.config.ts","ts","",[702,790,791,827,850,872,878,899,920,925,932,967,989,1006,1022,1038,1043,1049,1067,1082,1096,1105,1110,1116,1164,1169],{"__ignoreMap":788},[792,793,796,800,804,808,811,814,817,821,824],"span",{"class":794,"line":795},"line",1,[792,797,799],{"class":798},"s7zQu","import",[792,801,803],{"class":802},"sMK4o"," {",[792,805,807],{"class":806},"sTEyZ"," styleframe",[792,809,810],{"class":802}," }",[792,812,813],{"class":798}," from",[792,815,816],{"class":802}," \"",[792,818,820],{"class":819},"sfazB","styleframe",[792,822,823],{"class":802},"\"",[792,825,826],{"class":802},";\n",[792,828,830,832,834,837,839,841,843,846,848],{"class":794,"line":829},2,[792,831,799],{"class":798},[792,833,803],{"class":802},[792,835,836],{"class":806}," useSpacingDesignTokens",[792,838,810],{"class":802},[792,840,813],{"class":798},[792,842,816],{"class":802},[792,844,845],{"class":819},"@styleframe\u002Ftheme",[792,847,823],{"class":802},[792,849,826],{"class":802},[792,851,853,855,857,860,862,864,866,868,870],{"class":794,"line":852},3,[792,854,799],{"class":798},[792,856,803],{"class":802},[792,858,859],{"class":806}," useMarginUtility",[792,861,810],{"class":802},[792,863,813],{"class":798},[792,865,816],{"class":802},[792,867,845],{"class":819},[792,869,823],{"class":802},[792,871,826],{"class":802},[792,873,875],{"class":794,"line":874},4,[792,876,877],{"emptyLinePlaceholder":223},"\n",[792,879,881,885,888,891,894,897],{"class":794,"line":880},5,[792,882,884],{"class":883},"spNyl","const",[792,886,887],{"class":806}," s ",[792,889,890],{"class":802},"=",[792,892,807],{"class":893},"s2Zo4",[792,895,896],{"class":806},"()",[792,898,826],{"class":802},[792,900,902,904,906,909,912,915,918],{"class":794,"line":901},6,[792,903,884],{"class":883},[792,905,803],{"class":802},[792,907,908],{"class":806}," ref ",[792,910,911],{"class":802},"}",[792,913,914],{"class":802}," =",[792,916,917],{"class":806}," s",[792,919,826],{"class":802},[792,921,923],{"class":794,"line":922},7,[792,924,877],{"emptyLinePlaceholder":223},[792,926,928],{"class":794,"line":927},8,[792,929,931],{"class":930},"sHwdD","\u002F\u002F Define the base spacing variable\n",[792,933,935,937,939,942,945,948,950,953,955,957,959,962,964],{"class":794,"line":934},9,[792,936,884],{"class":883},[792,938,803],{"class":802},[792,940,941],{"class":806}," spacing",[792,943,944],{"class":802},",",[792,946,947],{"class":806}," spacingSm",[792,949,944],{"class":802},[792,951,952],{"class":806}," spacingMd ",[792,954,911],{"class":802},[792,956,914],{"class":802},[792,958,836],{"class":893},[792,960,961],{"class":806},"(s",[792,963,944],{"class":802},[792,965,966],{"class":802}," {\n",[792,968,970,974,977,980,983,986],{"class":794,"line":969},10,[792,971,973],{"class":972},"swJcz","    default",[792,975,976],{"class":802},":",[792,978,979],{"class":802}," '",[792,981,982],{"class":819},"1rem",[792,984,985],{"class":802},"'",[792,987,988],{"class":802},",\n",[792,990,992,995,997,999,1002,1004],{"class":794,"line":991},11,[792,993,994],{"class":972},"    sm",[792,996,976],{"class":802},[792,998,979],{"class":802},[792,1000,1001],{"class":819},"0.5rem",[792,1003,985],{"class":802},[792,1005,988],{"class":802},[792,1007,1009,1012,1014,1016,1018,1020],{"class":794,"line":1008},12,[792,1010,1011],{"class":972},"    md",[792,1013,976],{"class":802},[792,1015,979],{"class":802},[792,1017,982],{"class":819},[792,1019,985],{"class":802},[792,1021,988],{"class":802},[792,1023,1025,1027,1030,1033,1036],{"class":794,"line":1024},13,[792,1026,911],{"class":802},[792,1028,1029],{"class":798}," as",[792,1031,1032],{"class":883}," const",[792,1034,1035],{"class":806},")",[792,1037,826],{"class":802},[792,1039,1041],{"class":794,"line":1040},14,[792,1042,877],{"emptyLinePlaceholder":223},[792,1044,1046],{"class":794,"line":1045},15,[792,1047,1048],{"class":930},"\u002F\u002F Create margin utility with named values\n",[792,1050,1052,1054,1057,1059,1061,1063,1065],{"class":794,"line":1051},16,[792,1053,884],{"class":883},[792,1055,1056],{"class":806}," createMargin ",[792,1058,890],{"class":802},[792,1060,859],{"class":893},[792,1062,961],{"class":806},[792,1064,944],{"class":802},[792,1066,966],{"class":802},[792,1068,1070,1072,1074,1077,1080],{"class":794,"line":1069},17,[792,1071,994],{"class":972},[792,1073,976],{"class":802},[792,1075,1076],{"class":893}," ref",[792,1078,1079],{"class":806},"(spacingSm)",[792,1081,988],{"class":802},[792,1083,1085,1087,1089,1091,1094],{"class":794,"line":1084},18,[792,1086,1011],{"class":972},[792,1088,976],{"class":802},[792,1090,1076],{"class":893},[792,1092,1093],{"class":806},"(spacingMd)",[792,1095,988],{"class":802},[792,1097,1099,1101,1103],{"class":794,"line":1098},19,[792,1100,911],{"class":802},[792,1102,1035],{"class":806},[792,1104,826],{"class":802},[792,1106,1108],{"class":794,"line":1107},20,[792,1109,877],{"emptyLinePlaceholder":223},[792,1111,1113],{"class":794,"line":1112},21,[792,1114,1115],{"class":930},"\u002F\u002F Add multiplier values using array syntax (with @ prefix)\n",[792,1117,1119,1122,1125,1127,1130,1132,1134,1136,1139,1141,1143,1145,1148,1150,1152,1154,1157,1159,1162],{"class":794,"line":1118},22,[792,1120,1121],{"class":893},"createMargin",[792,1123,1124],{"class":806},"([",[792,1126,823],{"class":802},[792,1128,1129],{"class":819},"@1.5",[792,1131,823],{"class":802},[792,1133,944],{"class":802},[792,1135,816],{"class":802},[792,1137,1138],{"class":819},"@2",[792,1140,823],{"class":802},[792,1142,944],{"class":802},[792,1144,816],{"class":802},[792,1146,1147],{"class":819},"@0.5",[792,1149,823],{"class":802},[792,1151,944],{"class":802},[792,1153,816],{"class":802},[792,1155,1156],{"class":819},"@-1",[792,1158,823],{"class":802},[792,1160,1161],{"class":806},"])",[792,1163,826],{"class":802},[792,1165,1167],{"class":794,"line":1166},23,[792,1168,877],{"emptyLinePlaceholder":223},[792,1170,1172,1175,1178,1180],{"class":794,"line":1171},24,[792,1173,1174],{"class":798},"export",[792,1176,1177],{"class":798}," default",[792,1179,917],{"class":806},[792,1181,826],{"class":802},[778,1183,1184],{"icon":154,"label":326},[782,1185,1190],{"className":1186,"code":1187,"filename":1188,"language":1189,"meta":788,"style":788},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --spacing: 1rem;\n    --spacing--sm: 0.5rem;\n    --spacing--md: 1rem;\n}\n\n\u002F* Named values *\u002F\n._margin\\:sm { margin: var(--spacing--sm); }\n._margin\\:md { margin: var(--spacing--md); }\n\n\u002F* Multiplier values (with fallback) *\u002F\n._margin\\:1\\.5 { margin: calc(var(--spacing, 1rem) * 1.5); }\n._margin\\:2 { margin: calc(var(--spacing, 1rem) * 2); }\n._margin\\:0\\.5 { margin: calc(var(--spacing, 1rem) * 0.5); }\n._margin\\:-1 { margin: calc(var(--spacing, 1rem) * -1); }\n","styleframe\u002Findex.css","css",[702,1191,1192,1201,1214,1226,1237,1242,1246,1251,1289,1317,1321,1326,1377,1419,1465],{"__ignoreMap":788},[792,1193,1194,1196,1199],{"class":794,"line":795},[792,1195,976],{"class":802},[792,1197,1198],{"class":883},"root",[792,1200,966],{"class":802},[792,1202,1203,1206,1208,1212],{"class":794,"line":829},[792,1204,1205],{"class":806},"    --spacing",[792,1207,976],{"class":802},[792,1209,1211],{"class":1210},"sbssI"," 1rem",[792,1213,826],{"class":802},[792,1215,1216,1219,1221,1224],{"class":794,"line":852},[792,1217,1218],{"class":806},"    --spacing--sm",[792,1220,976],{"class":802},[792,1222,1223],{"class":1210}," 0.5rem",[792,1225,826],{"class":802},[792,1227,1228,1231,1233,1235],{"class":794,"line":874},[792,1229,1230],{"class":806},"    --spacing--md",[792,1232,976],{"class":802},[792,1234,1211],{"class":1210},[792,1236,826],{"class":802},[792,1238,1239],{"class":794,"line":880},[792,1240,1241],{"class":802},"}\n",[792,1243,1244],{"class":794,"line":901},[792,1245,877],{"emptyLinePlaceholder":223},[792,1247,1248],{"class":794,"line":922},[792,1249,1250],{"class":930},"\u002F* Named values *\u002F\n",[792,1252,1253,1256,1260,1263,1266,1268,1272,1274,1277,1280,1283,1286],{"class":794,"line":927},[792,1254,1255],{"class":802},".",[792,1257,1259],{"class":1258},"sBMFI","_margin",[792,1261,1262],{"class":806},"\\:",[792,1264,1265],{"class":1258},"sm",[792,1267,803],{"class":802},[792,1269,1271],{"class":1270},"sqsOY"," margin",[792,1273,976],{"class":802},[792,1275,1276],{"class":893}," var",[792,1278,1279],{"class":802},"(",[792,1281,1282],{"class":806},"--spacing--sm",[792,1284,1285],{"class":802},");",[792,1287,1288],{"class":802}," }\n",[792,1290,1291,1293,1295,1297,1300,1302,1304,1306,1308,1310,1313,1315],{"class":794,"line":934},[792,1292,1255],{"class":802},[792,1294,1259],{"class":1258},[792,1296,1262],{"class":806},[792,1298,1299],{"class":1258},"md",[792,1301,803],{"class":802},[792,1303,1271],{"class":1270},[792,1305,976],{"class":802},[792,1307,1276],{"class":893},[792,1309,1279],{"class":802},[792,1311,1312],{"class":806},"--spacing--md",[792,1314,1285],{"class":802},[792,1316,1288],{"class":802},[792,1318,1319],{"class":794,"line":969},[792,1320,877],{"emptyLinePlaceholder":223},[792,1322,1323],{"class":794,"line":991},[792,1324,1325],{"class":930},"\u002F* Multiplier values (with fallback) *\u002F\n",[792,1327,1328,1330,1332,1334,1337,1340,1343,1345,1347,1349,1352,1354,1357,1359,1361,1363,1365,1367,1370,1373,1375],{"class":794,"line":1008},[792,1329,1255],{"class":802},[792,1331,1259],{"class":1258},[792,1333,1262],{"class":806},[792,1335,1336],{"class":1258},"1",[792,1338,1339],{"class":806},"\\.",[792,1341,1342],{"class":1258},"5",[792,1344,803],{"class":802},[792,1346,1271],{"class":1270},[792,1348,976],{"class":802},[792,1350,1351],{"class":893}," calc",[792,1353,1279],{"class":802},[792,1355,1356],{"class":893},"var",[792,1358,1279],{"class":802},[792,1360,772],{"class":806},[792,1362,944],{"class":802},[792,1364,1211],{"class":1210},[792,1366,1035],{"class":802},[792,1368,1369],{"class":802}," *",[792,1371,1372],{"class":1210}," 1.5",[792,1374,1285],{"class":802},[792,1376,1288],{"class":802},[792,1378,1379,1381,1383,1385,1388,1390,1392,1394,1396,1398,1400,1402,1404,1406,1408,1410,1412,1415,1417],{"class":794,"line":1024},[792,1380,1255],{"class":802},[792,1382,1259],{"class":1258},[792,1384,1262],{"class":806},[792,1386,1387],{"class":1258},"2",[792,1389,803],{"class":802},[792,1391,1271],{"class":1270},[792,1393,976],{"class":802},[792,1395,1351],{"class":893},[792,1397,1279],{"class":802},[792,1399,1356],{"class":893},[792,1401,1279],{"class":802},[792,1403,772],{"class":806},[792,1405,944],{"class":802},[792,1407,1211],{"class":1210},[792,1409,1035],{"class":802},[792,1411,1369],{"class":802},[792,1413,1414],{"class":1210}," 2",[792,1416,1285],{"class":802},[792,1418,1288],{"class":802},[792,1420,1421,1423,1425,1427,1430,1432,1434,1436,1438,1440,1442,1444,1446,1448,1450,1452,1454,1456,1458,1461,1463],{"class":794,"line":1040},[792,1422,1255],{"class":802},[792,1424,1259],{"class":1258},[792,1426,1262],{"class":806},[792,1428,1429],{"class":1258},"0",[792,1431,1339],{"class":806},[792,1433,1342],{"class":1258},[792,1435,803],{"class":802},[792,1437,1271],{"class":1270},[792,1439,976],{"class":802},[792,1441,1351],{"class":893},[792,1443,1279],{"class":802},[792,1445,1356],{"class":893},[792,1447,1279],{"class":802},[792,1449,772],{"class":806},[792,1451,944],{"class":802},[792,1453,1211],{"class":1210},[792,1455,1035],{"class":802},[792,1457,1369],{"class":802},[792,1459,1460],{"class":1210}," 0.5",[792,1462,1285],{"class":802},[792,1464,1288],{"class":802},[792,1466,1467,1469,1471,1473,1476,1478,1480,1482,1484,1486,1488,1490,1492,1494,1496,1498,1500,1503,1505],{"class":794,"line":1045},[792,1468,1255],{"class":802},[792,1470,1259],{"class":1258},[792,1472,1262],{"class":806},[792,1474,1475],{"class":1258},"-1",[792,1477,803],{"class":802},[792,1479,1271],{"class":1270},[792,1481,976],{"class":802},[792,1483,1351],{"class":893},[792,1485,1279],{"class":802},[792,1487,1356],{"class":893},[792,1489,1279],{"class":802},[792,1491,772],{"class":806},[792,1493,944],{"class":802},[792,1495,1211],{"class":1210},[792,1497,1035],{"class":802},[792,1499,1369],{"class":802},[792,1501,1502],{"class":1210}," -1",[792,1504,1285],{"class":802},[792,1506,1288],{"class":802},[778,1508,1510],{"icon":520,"label":1509},"Usage",[782,1511,1515],{"className":1512,"code":1513,"language":1514,"meta":788,"style":788},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Named spacing -->\n\u003Cdiv class=\"_margin:md\">Medium margin\u003C\u002Fdiv>\n\n\u003C!-- Multiplier spacing -->\n\u003Cdiv class=\"_margin:1.5\">1.5x base spacing (1.5rem)\u003C\u002Fdiv>\n\u003Cdiv class=\"_margin:2\">2x base spacing (2rem)\u003C\u002Fdiv>\n\u003Cdiv class=\"_margin:0.5\">0.5x base spacing (0.5rem)\u003C\u002Fdiv>\n\u003Cdiv class=\"_margin:-1\">Negative base spacing (-1rem)\u003C\u002Fdiv>\n","html",[702,1516,1517,1522,1556,1560,1565,1593,1621,1649],{"__ignoreMap":788},[792,1518,1519],{"class":794,"line":795},[792,1520,1521],{"class":930},"\u003C!-- Named spacing -->\n",[792,1523,1524,1527,1530,1533,1535,1537,1540,1542,1545,1548,1551,1553],{"class":794,"line":829},[792,1525,1526],{"class":802},"\u003C",[792,1528,1529],{"class":972},"div",[792,1531,1532],{"class":883}," class",[792,1534,890],{"class":802},[792,1536,823],{"class":802},[792,1538,1539],{"class":819},"_margin:md",[792,1541,823],{"class":802},[792,1543,1544],{"class":802},">",[792,1546,1547],{"class":806},"Medium margin",[792,1549,1550],{"class":802},"\u003C\u002F",[792,1552,1529],{"class":972},[792,1554,1555],{"class":802},">\n",[792,1557,1558],{"class":794,"line":852},[792,1559,877],{"emptyLinePlaceholder":223},[792,1561,1562],{"class":794,"line":874},[792,1563,1564],{"class":930},"\u003C!-- Multiplier spacing -->\n",[792,1566,1567,1569,1571,1573,1575,1577,1580,1582,1584,1587,1589,1591],{"class":794,"line":880},[792,1568,1526],{"class":802},[792,1570,1529],{"class":972},[792,1572,1532],{"class":883},[792,1574,890],{"class":802},[792,1576,823],{"class":802},[792,1578,1579],{"class":819},"_margin:1.5",[792,1581,823],{"class":802},[792,1583,1544],{"class":802},[792,1585,1586],{"class":806},"1.5x base spacing (1.5rem)",[792,1588,1550],{"class":802},[792,1590,1529],{"class":972},[792,1592,1555],{"class":802},[792,1594,1595,1597,1599,1601,1603,1605,1608,1610,1612,1615,1617,1619],{"class":794,"line":901},[792,1596,1526],{"class":802},[792,1598,1529],{"class":972},[792,1600,1532],{"class":883},[792,1602,890],{"class":802},[792,1604,823],{"class":802},[792,1606,1607],{"class":819},"_margin:2",[792,1609,823],{"class":802},[792,1611,1544],{"class":802},[792,1613,1614],{"class":806},"2x base spacing (2rem)",[792,1616,1550],{"class":802},[792,1618,1529],{"class":972},[792,1620,1555],{"class":802},[792,1622,1623,1625,1627,1629,1631,1633,1636,1638,1640,1643,1645,1647],{"class":794,"line":922},[792,1624,1526],{"class":802},[792,1626,1529],{"class":972},[792,1628,1532],{"class":883},[792,1630,890],{"class":802},[792,1632,823],{"class":802},[792,1634,1635],{"class":819},"_margin:0.5",[792,1637,823],{"class":802},[792,1639,1544],{"class":802},[792,1641,1642],{"class":806},"0.5x base spacing (0.5rem)",[792,1644,1550],{"class":802},[792,1646,1529],{"class":972},[792,1648,1555],{"class":802},[792,1650,1651,1653,1655,1657,1659,1661,1664,1666,1668,1671,1673,1675],{"class":794,"line":927},[792,1652,1526],{"class":802},[792,1654,1529],{"class":972},[792,1656,1532],{"class":883},[792,1658,890],{"class":802},[792,1660,823],{"class":802},[792,1662,1663],{"class":819},"_margin:-1",[792,1665,823],{"class":802},[792,1667,1544],{"class":802},[792,1669,1670],{"class":806},"Negative base spacing (-1rem)",[792,1672,1550],{"class":802},[792,1674,1529],{"class":972},[792,1676,1555],{"class":802},[1678,1679,1681],"h3",{"id":1680},"supported-multiplier-formats","Supported Multiplier Formats",[711,1683,1684,1685,1688],{},"Use the ",[702,1686,1687],{},"@"," prefix followed by a numeric value:",[1690,1691,1692,1708],"table",{},[1693,1694,1695],"thead",{},[1696,1697,1698,1702,1705],"tr",{},[1699,1700,1701],"th",{},"Format",[1699,1703,1704],{},"Example",[1699,1706,1707],{},"Description",[1709,1710,1711,1731,1748],"tbody",{},[1696,1712,1713,1717,1728],{},[1714,1715,1716],"td",{},"Integers",[1714,1718,1719,1722,1723,1722,1725],{},[702,1720,1721],{},"@1",", ",[702,1724,1138],{},[702,1726,1727],{},"@3",[1714,1729,1730],{},"Whole number multipliers",[1696,1732,1733,1736,1745],{},[1714,1734,1735],{},"Decimals",[1714,1737,1738,1722,1740,1722,1742],{},[702,1739,1147],{},[702,1741,1129],{},[702,1743,1744],{},"@2.25",[1714,1746,1747],{},"Fractional multipliers",[1696,1749,1750,1753,1760],{},[1714,1751,1752],{},"Negative",[1714,1754,1755,1722,1757],{},[702,1756,1156],{},[702,1758,1759],{},"@-0.5",[1714,1761,1762],{},"Negative spacing (useful for pulling elements)",[1764,1765,1766,1767,1722,1770,1722,1773,1776,1777,1780,1781,1783,1784,1786],"tip",{},"Multiplier values work with all spacing utilities including ",[702,1768,1769],{},"useMarginUtility",[702,1771,1772],{},"usePaddingUtility",[702,1774,1775],{},"useSpaceUtility",", and ",[702,1778,1779],{},"useGapUtility",". The base variable defaults to ",[702,1782,772],{}," with a fallback of ",[702,1785,982],{}," if not defined. Both the base variable and fallback can be customized.",[707,1788,1790],{"id":1789},"usemarginutility",[702,1791,1769],{},[711,1793,1794,1795,1798],{},"The ",[702,1796,1797],{},"useMarginUtility()"," function creates utility classes for setting margins.",[775,1800,1801,2153,2385],{},[778,1802,1803],{"icon":780,"label":290},[782,1804,1806],{"className":784,"code":1805,"filename":786,"language":787,"meta":788,"style":788},"import { styleframe } from \"styleframe\";\nimport { useSpacingDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { useMarginUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { spacing, spacingSm, spacingMd, spacingLg, spacingXl } = useSpacingDesignTokens(s, {\n    default: '1rem',\n    sm: '0.5rem',\n    md: '1rem',\n    lg: '1.5rem',\n    xl: '2rem',\n} as const);\n\nuseMarginUtility(s, {\n    '0': '0',\n    sm: ref(spacingSm),\n    md: ref(spacingMd),\n    lg: ref(spacingLg),\n    xl: ref(spacingXl),\n    auto: 'auto',\n});\n\nexport default s;\n",[702,1807,1808,1828,1848,1868,1872,1886,1902,1906,1945,1959,1973,1987,2003,2019,2031,2035,2045,2064,2076,2088,2101,2114,2130,2138,2142],{"__ignoreMap":788},[792,1809,1810,1812,1814,1816,1818,1820,1822,1824,1826],{"class":794,"line":795},[792,1811,799],{"class":798},[792,1813,803],{"class":802},[792,1815,807],{"class":806},[792,1817,810],{"class":802},[792,1819,813],{"class":798},[792,1821,816],{"class":802},[792,1823,820],{"class":819},[792,1825,823],{"class":802},[792,1827,826],{"class":802},[792,1829,1830,1832,1834,1836,1838,1840,1842,1844,1846],{"class":794,"line":829},[792,1831,799],{"class":798},[792,1833,803],{"class":802},[792,1835,836],{"class":806},[792,1837,810],{"class":802},[792,1839,813],{"class":798},[792,1841,816],{"class":802},[792,1843,845],{"class":819},[792,1845,823],{"class":802},[792,1847,826],{"class":802},[792,1849,1850,1852,1854,1856,1858,1860,1862,1864,1866],{"class":794,"line":852},[792,1851,799],{"class":798},[792,1853,803],{"class":802},[792,1855,859],{"class":806},[792,1857,810],{"class":802},[792,1859,813],{"class":798},[792,1861,816],{"class":802},[792,1863,845],{"class":819},[792,1865,823],{"class":802},[792,1867,826],{"class":802},[792,1869,1870],{"class":794,"line":874},[792,1871,877],{"emptyLinePlaceholder":223},[792,1873,1874,1876,1878,1880,1882,1884],{"class":794,"line":880},[792,1875,884],{"class":883},[792,1877,887],{"class":806},[792,1879,890],{"class":802},[792,1881,807],{"class":893},[792,1883,896],{"class":806},[792,1885,826],{"class":802},[792,1887,1888,1890,1892,1894,1896,1898,1900],{"class":794,"line":901},[792,1889,884],{"class":883},[792,1891,803],{"class":802},[792,1893,908],{"class":806},[792,1895,911],{"class":802},[792,1897,914],{"class":802},[792,1899,917],{"class":806},[792,1901,826],{"class":802},[792,1903,1904],{"class":794,"line":922},[792,1905,877],{"emptyLinePlaceholder":223},[792,1907,1908,1910,1912,1914,1916,1918,1920,1923,1925,1928,1930,1933,1935,1937,1939,1941,1943],{"class":794,"line":927},[792,1909,884],{"class":883},[792,1911,803],{"class":802},[792,1913,941],{"class":806},[792,1915,944],{"class":802},[792,1917,947],{"class":806},[792,1919,944],{"class":802},[792,1921,1922],{"class":806}," spacingMd",[792,1924,944],{"class":802},[792,1926,1927],{"class":806}," spacingLg",[792,1929,944],{"class":802},[792,1931,1932],{"class":806}," spacingXl ",[792,1934,911],{"class":802},[792,1936,914],{"class":802},[792,1938,836],{"class":893},[792,1940,961],{"class":806},[792,1942,944],{"class":802},[792,1944,966],{"class":802},[792,1946,1947,1949,1951,1953,1955,1957],{"class":794,"line":934},[792,1948,973],{"class":972},[792,1950,976],{"class":802},[792,1952,979],{"class":802},[792,1954,982],{"class":819},[792,1956,985],{"class":802},[792,1958,988],{"class":802},[792,1960,1961,1963,1965,1967,1969,1971],{"class":794,"line":969},[792,1962,994],{"class":972},[792,1964,976],{"class":802},[792,1966,979],{"class":802},[792,1968,1001],{"class":819},[792,1970,985],{"class":802},[792,1972,988],{"class":802},[792,1974,1975,1977,1979,1981,1983,1985],{"class":794,"line":991},[792,1976,1011],{"class":972},[792,1978,976],{"class":802},[792,1980,979],{"class":802},[792,1982,982],{"class":819},[792,1984,985],{"class":802},[792,1986,988],{"class":802},[792,1988,1989,1992,1994,1996,1999,2001],{"class":794,"line":1008},[792,1990,1991],{"class":972},"    lg",[792,1993,976],{"class":802},[792,1995,979],{"class":802},[792,1997,1998],{"class":819},"1.5rem",[792,2000,985],{"class":802},[792,2002,988],{"class":802},[792,2004,2005,2008,2010,2012,2015,2017],{"class":794,"line":1024},[792,2006,2007],{"class":972},"    xl",[792,2009,976],{"class":802},[792,2011,979],{"class":802},[792,2013,2014],{"class":819},"2rem",[792,2016,985],{"class":802},[792,2018,988],{"class":802},[792,2020,2021,2023,2025,2027,2029],{"class":794,"line":1040},[792,2022,911],{"class":802},[792,2024,1029],{"class":798},[792,2026,1032],{"class":883},[792,2028,1035],{"class":806},[792,2030,826],{"class":802},[792,2032,2033],{"class":794,"line":1045},[792,2034,877],{"emptyLinePlaceholder":223},[792,2036,2037,2039,2041,2043],{"class":794,"line":1051},[792,2038,1769],{"class":893},[792,2040,961],{"class":806},[792,2042,944],{"class":802},[792,2044,966],{"class":802},[792,2046,2047,2050,2052,2054,2056,2058,2060,2062],{"class":794,"line":1069},[792,2048,2049],{"class":802},"    '",[792,2051,1429],{"class":972},[792,2053,985],{"class":802},[792,2055,976],{"class":802},[792,2057,979],{"class":802},[792,2059,1429],{"class":819},[792,2061,985],{"class":802},[792,2063,988],{"class":802},[792,2065,2066,2068,2070,2072,2074],{"class":794,"line":1084},[792,2067,994],{"class":972},[792,2069,976],{"class":802},[792,2071,1076],{"class":893},[792,2073,1079],{"class":806},[792,2075,988],{"class":802},[792,2077,2078,2080,2082,2084,2086],{"class":794,"line":1098},[792,2079,1011],{"class":972},[792,2081,976],{"class":802},[792,2083,1076],{"class":893},[792,2085,1093],{"class":806},[792,2087,988],{"class":802},[792,2089,2090,2092,2094,2096,2099],{"class":794,"line":1107},[792,2091,1991],{"class":972},[792,2093,976],{"class":802},[792,2095,1076],{"class":893},[792,2097,2098],{"class":806},"(spacingLg)",[792,2100,988],{"class":802},[792,2102,2103,2105,2107,2109,2112],{"class":794,"line":1112},[792,2104,2007],{"class":972},[792,2106,976],{"class":802},[792,2108,1076],{"class":893},[792,2110,2111],{"class":806},"(spacingXl)",[792,2113,988],{"class":802},[792,2115,2116,2119,2121,2123,2126,2128],{"class":794,"line":1118},[792,2117,2118],{"class":972},"    auto",[792,2120,976],{"class":802},[792,2122,979],{"class":802},[792,2124,2125],{"class":819},"auto",[792,2127,985],{"class":802},[792,2129,988],{"class":802},[792,2131,2132,2134,2136],{"class":794,"line":1166},[792,2133,911],{"class":802},[792,2135,1035],{"class":806},[792,2137,826],{"class":802},[792,2139,2140],{"class":794,"line":1171},[792,2141,877],{"emptyLinePlaceholder":223},[792,2143,2145,2147,2149,2151],{"class":794,"line":2144},25,[792,2146,1174],{"class":798},[792,2148,1177],{"class":798},[792,2150,917],{"class":806},[792,2152,826],{"class":802},[778,2154,2155],{"icon":154,"label":326},[782,2156,2158],{"className":1186,"code":2157,"filename":1188,"language":1189,"meta":788,"style":788},":root {\n    --spacing: 1rem;\n    --spacing--sm: 0.5rem;\n    --spacing--md: 1rem;\n    --spacing--lg: 1.5rem;\n    --spacing--xl: 2rem;\n}\n\n._margin\\:0 { margin: 0; }\n._margin\\:sm { margin: var(--spacing--sm); }\n._margin\\:md { margin: var(--spacing--md); }\n._margin\\:lg { margin: var(--spacing--lg); }\n._margin\\:xl { margin: var(--spacing--xl); }\n._margin\\:auto { margin: auto; }\n",[702,2159,2160,2168,2178,2188,2198,2210,2222,2226,2230,2254,2280,2306,2334,2362],{"__ignoreMap":788},[792,2161,2162,2164,2166],{"class":794,"line":795},[792,2163,976],{"class":802},[792,2165,1198],{"class":883},[792,2167,966],{"class":802},[792,2169,2170,2172,2174,2176],{"class":794,"line":829},[792,2171,1205],{"class":806},[792,2173,976],{"class":802},[792,2175,1211],{"class":1210},[792,2177,826],{"class":802},[792,2179,2180,2182,2184,2186],{"class":794,"line":852},[792,2181,1218],{"class":806},[792,2183,976],{"class":802},[792,2185,1223],{"class":1210},[792,2187,826],{"class":802},[792,2189,2190,2192,2194,2196],{"class":794,"line":874},[792,2191,1230],{"class":806},[792,2193,976],{"class":802},[792,2195,1211],{"class":1210},[792,2197,826],{"class":802},[792,2199,2200,2203,2205,2208],{"class":794,"line":880},[792,2201,2202],{"class":806},"    --spacing--lg",[792,2204,976],{"class":802},[792,2206,2207],{"class":1210}," 1.5rem",[792,2209,826],{"class":802},[792,2211,2212,2215,2217,2220],{"class":794,"line":901},[792,2213,2214],{"class":806},"    --spacing--xl",[792,2216,976],{"class":802},[792,2218,2219],{"class":1210}," 2rem",[792,2221,826],{"class":802},[792,2223,2224],{"class":794,"line":922},[792,2225,1241],{"class":802},[792,2227,2228],{"class":794,"line":927},[792,2229,877],{"emptyLinePlaceholder":223},[792,2231,2232,2234,2236,2238,2240,2242,2244,2246,2249,2252],{"class":794,"line":934},[792,2233,1255],{"class":802},[792,2235,1259],{"class":1258},[792,2237,1262],{"class":806},[792,2239,1429],{"class":1258},[792,2241,803],{"class":802},[792,2243,1271],{"class":1270},[792,2245,976],{"class":802},[792,2247,2248],{"class":1210}," 0",[792,2250,2251],{"class":802},";",[792,2253,1288],{"class":802},[792,2255,2256,2258,2260,2262,2264,2266,2268,2270,2272,2274,2276,2278],{"class":794,"line":969},[792,2257,1255],{"class":802},[792,2259,1259],{"class":1258},[792,2261,1262],{"class":806},[792,2263,1265],{"class":1258},[792,2265,803],{"class":802},[792,2267,1271],{"class":1270},[792,2269,976],{"class":802},[792,2271,1276],{"class":893},[792,2273,1279],{"class":802},[792,2275,1282],{"class":806},[792,2277,1285],{"class":802},[792,2279,1288],{"class":802},[792,2281,2282,2284,2286,2288,2290,2292,2294,2296,2298,2300,2302,2304],{"class":794,"line":991},[792,2283,1255],{"class":802},[792,2285,1259],{"class":1258},[792,2287,1262],{"class":806},[792,2289,1299],{"class":1258},[792,2291,803],{"class":802},[792,2293,1271],{"class":1270},[792,2295,976],{"class":802},[792,2297,1276],{"class":893},[792,2299,1279],{"class":802},[792,2301,1312],{"class":806},[792,2303,1285],{"class":802},[792,2305,1288],{"class":802},[792,2307,2308,2310,2312,2314,2317,2319,2321,2323,2325,2327,2330,2332],{"class":794,"line":1008},[792,2309,1255],{"class":802},[792,2311,1259],{"class":1258},[792,2313,1262],{"class":806},[792,2315,2316],{"class":1258},"lg",[792,2318,803],{"class":802},[792,2320,1271],{"class":1270},[792,2322,976],{"class":802},[792,2324,1276],{"class":893},[792,2326,1279],{"class":802},[792,2328,2329],{"class":806},"--spacing--lg",[792,2331,1285],{"class":802},[792,2333,1288],{"class":802},[792,2335,2336,2338,2340,2342,2345,2347,2349,2351,2353,2355,2358,2360],{"class":794,"line":1024},[792,2337,1255],{"class":802},[792,2339,1259],{"class":1258},[792,2341,1262],{"class":806},[792,2343,2344],{"class":1258},"xl",[792,2346,803],{"class":802},[792,2348,1271],{"class":1270},[792,2350,976],{"class":802},[792,2352,1276],{"class":893},[792,2354,1279],{"class":802},[792,2356,2357],{"class":806},"--spacing--xl",[792,2359,1285],{"class":802},[792,2361,1288],{"class":802},[792,2363,2364,2366,2368,2370,2372,2374,2376,2378,2381,2383],{"class":794,"line":1040},[792,2365,1255],{"class":802},[792,2367,1259],{"class":1258},[792,2369,1262],{"class":806},[792,2371,2125],{"class":1258},[792,2373,803],{"class":802},[792,2375,1271],{"class":1270},[792,2377,976],{"class":802},[792,2379,2380],{"class":806}," auto",[792,2382,2251],{"class":802},[792,2384,1288],{"class":802},[778,2386,2387],{"icon":520,"label":1509},[782,2388,2390],{"className":1512,"code":2389,"language":1514,"meta":788,"style":788},"\u003Cdiv class=\"_margin:md\">Medium margin all sides\u003C\u002Fdiv>\n\u003Cdiv class=\"_margin:auto\">Auto margin (for centering)\u003C\u002Fdiv>\n",[702,2391,2392,2419],{"__ignoreMap":788},[792,2393,2394,2396,2398,2400,2402,2404,2406,2408,2410,2413,2415,2417],{"class":794,"line":795},[792,2395,1526],{"class":802},[792,2397,1529],{"class":972},[792,2399,1532],{"class":883},[792,2401,890],{"class":802},[792,2403,823],{"class":802},[792,2405,1539],{"class":819},[792,2407,823],{"class":802},[792,2409,1544],{"class":802},[792,2411,2412],{"class":806},"Medium margin all sides",[792,2414,1550],{"class":802},[792,2416,1529],{"class":972},[792,2418,1555],{"class":802},[792,2420,2421,2423,2425,2427,2429,2431,2434,2436,2438,2441,2443,2445],{"class":794,"line":829},[792,2422,1526],{"class":802},[792,2424,1529],{"class":972},[792,2426,1532],{"class":883},[792,2428,890],{"class":802},[792,2430,823],{"class":802},[792,2432,2433],{"class":819},"_margin:auto",[792,2435,823],{"class":802},[792,2437,1544],{"class":802},[792,2439,2440],{"class":806},"Auto margin (for centering)",[792,2442,1550],{"class":802},[792,2444,1529],{"class":972},[792,2446,1555],{"class":802},[1678,2448,2450],{"id":2449},"directional-margin-variants","Directional Margin Variants",[1690,2452,2453,2465],{},[1693,2454,2455],{},[1696,2456,2457,2460,2463],{},[1699,2458,2459],{},"Utility",[1699,2461,2462],{},"CSS Property",[1699,2464,1707],{},[1709,2466,2467,2481,2499,2517,2533,2549,2563,2577,2591,2605,2620],{},[1696,2468,2469,2473,2478],{},[1714,2470,2471],{},[702,2472,1769],{},[1714,2474,2475],{},[702,2476,2477],{},"margin",[1714,2479,2480],{},"All sides",[1696,2482,2483,2488,2496],{},[1714,2484,2485],{},[702,2486,2487],{},"useMarginXUtility",[1714,2489,2490,1722,2493],{},[702,2491,2492],{},"margin-left",[702,2494,2495],{},"margin-right",[1714,2497,2498],{},"Horizontal (left & right)",[1696,2500,2501,2506,2514],{},[1714,2502,2503],{},[702,2504,2505],{},"useMarginYUtility",[1714,2507,2508,1722,2511],{},[702,2509,2510],{},"margin-top",[702,2512,2513],{},"margin-bottom",[1714,2515,2516],{},"Vertical (top & bottom)",[1696,2518,2519,2524,2530],{},[1714,2520,2521],{},[702,2522,2523],{},"useMarginInlineUtility",[1714,2525,2526,1722,2528],{},[702,2527,2492],{},[702,2529,2495],{},[1714,2531,2532],{},"Horizontal (left & right, logical)",[1696,2534,2535,2540,2546],{},[1714,2536,2537],{},[702,2538,2539],{},"useMarginBlockUtility",[1714,2541,2542,1722,2544],{},[702,2543,2510],{},[702,2545,2513],{},[1714,2547,2548],{},"Vertical (top & bottom, logical)",[1696,2550,2551,2556,2560],{},[1714,2552,2553],{},[702,2554,2555],{},"useMarginTopUtility",[1714,2557,2558],{},[702,2559,2510],{},[1714,2561,2562],{},"Top only",[1696,2564,2565,2570,2574],{},[1714,2566,2567],{},[702,2568,2569],{},"useMarginRightUtility",[1714,2571,2572],{},[702,2573,2495],{},[1714,2575,2576],{},"Right only",[1696,2578,2579,2584,2588],{},[1714,2580,2581],{},[702,2582,2583],{},"useMarginBottomUtility",[1714,2585,2586],{},[702,2587,2513],{},[1714,2589,2590],{},"Bottom only",[1696,2592,2593,2598,2602],{},[1714,2594,2595],{},[702,2596,2597],{},"useMarginLeftUtility",[1714,2599,2600],{},[702,2601,2492],{},[1714,2603,2604],{},"Left only",[1696,2606,2607,2612,2617],{},[1714,2608,2609],{},[702,2610,2611],{},"useMarginInlineStartUtility",[1714,2613,2614],{},[702,2615,2616],{},"margin-inline-start",[1714,2618,2619],{},"Inline start (RTL-aware)",[1696,2621,2622,2627,2632],{},[1714,2623,2624],{},[702,2625,2626],{},"useMarginInlineEndUtility",[1714,2628,2629],{},[702,2630,2631],{},"margin-inline-end",[1714,2633,2634],{},"Inline end (RTL-aware)",[775,2636,2637,2911,3057],{},[778,2638,2639],{"icon":780,"label":290},[782,2640,2642],{"className":784,"code":2641,"filename":786,"language":787,"meta":788,"style":788},"import { styleframe } from \"styleframe\";\nimport {\n    useMarginUtility,\n    useMarginInlineUtility,\n    useMarginBlockUtility,\n    useMarginTopUtility,\n    useMarginBottomUtility,\n} from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst spacingValues = {\n    '0': '0',\n    sm: '0.5rem',\n    md: '1rem',\n    lg: '1.5rem',\n    auto: 'auto',\n};\n\nuseMarginUtility(s, spacingValues);\nuseMarginInlineUtility(s, spacingValues);\nuseMarginBlockUtility(s, spacingValues);\nuseMarginTopUtility(s, spacingValues);\nuseMarginBottomUtility(s, spacingValues);\n\nexport default s;\n",[702,2643,2644,2664,2670,2677,2684,2691,2698,2705,2719,2723,2737,2741,2752,2770,2784,2798,2812,2826,2831,2835,2848,2860,2872,2884,2896,2900],{"__ignoreMap":788},[792,2645,2646,2648,2650,2652,2654,2656,2658,2660,2662],{"class":794,"line":795},[792,2647,799],{"class":798},[792,2649,803],{"class":802},[792,2651,807],{"class":806},[792,2653,810],{"class":802},[792,2655,813],{"class":798},[792,2657,816],{"class":802},[792,2659,820],{"class":819},[792,2661,823],{"class":802},[792,2663,826],{"class":802},[792,2665,2666,2668],{"class":794,"line":829},[792,2667,799],{"class":798},[792,2669,966],{"class":802},[792,2671,2672,2675],{"class":794,"line":852},[792,2673,2674],{"class":806},"    useMarginUtility",[792,2676,988],{"class":802},[792,2678,2679,2682],{"class":794,"line":874},[792,2680,2681],{"class":806},"    useMarginInlineUtility",[792,2683,988],{"class":802},[792,2685,2686,2689],{"class":794,"line":880},[792,2687,2688],{"class":806},"    useMarginBlockUtility",[792,2690,988],{"class":802},[792,2692,2693,2696],{"class":794,"line":901},[792,2694,2695],{"class":806},"    useMarginTopUtility",[792,2697,988],{"class":802},[792,2699,2700,2703],{"class":794,"line":922},[792,2701,2702],{"class":806},"    useMarginBottomUtility",[792,2704,988],{"class":802},[792,2706,2707,2709,2711,2713,2715,2717],{"class":794,"line":927},[792,2708,911],{"class":802},[792,2710,813],{"class":798},[792,2712,816],{"class":802},[792,2714,845],{"class":819},[792,2716,823],{"class":802},[792,2718,826],{"class":802},[792,2720,2721],{"class":794,"line":934},[792,2722,877],{"emptyLinePlaceholder":223},[792,2724,2725,2727,2729,2731,2733,2735],{"class":794,"line":969},[792,2726,884],{"class":883},[792,2728,887],{"class":806},[792,2730,890],{"class":802},[792,2732,807],{"class":893},[792,2734,896],{"class":806},[792,2736,826],{"class":802},[792,2738,2739],{"class":794,"line":991},[792,2740,877],{"emptyLinePlaceholder":223},[792,2742,2743,2745,2748,2750],{"class":794,"line":1008},[792,2744,884],{"class":883},[792,2746,2747],{"class":806}," spacingValues ",[792,2749,890],{"class":802},[792,2751,966],{"class":802},[792,2753,2754,2756,2758,2760,2762,2764,2766,2768],{"class":794,"line":1024},[792,2755,2049],{"class":802},[792,2757,1429],{"class":972},[792,2759,985],{"class":802},[792,2761,976],{"class":802},[792,2763,979],{"class":802},[792,2765,1429],{"class":819},[792,2767,985],{"class":802},[792,2769,988],{"class":802},[792,2771,2772,2774,2776,2778,2780,2782],{"class":794,"line":1040},[792,2773,994],{"class":972},[792,2775,976],{"class":802},[792,2777,979],{"class":802},[792,2779,1001],{"class":819},[792,2781,985],{"class":802},[792,2783,988],{"class":802},[792,2785,2786,2788,2790,2792,2794,2796],{"class":794,"line":1045},[792,2787,1011],{"class":972},[792,2789,976],{"class":802},[792,2791,979],{"class":802},[792,2793,982],{"class":819},[792,2795,985],{"class":802},[792,2797,988],{"class":802},[792,2799,2800,2802,2804,2806,2808,2810],{"class":794,"line":1051},[792,2801,1991],{"class":972},[792,2803,976],{"class":802},[792,2805,979],{"class":802},[792,2807,1998],{"class":819},[792,2809,985],{"class":802},[792,2811,988],{"class":802},[792,2813,2814,2816,2818,2820,2822,2824],{"class":794,"line":1069},[792,2815,2118],{"class":972},[792,2817,976],{"class":802},[792,2819,979],{"class":802},[792,2821,2125],{"class":819},[792,2823,985],{"class":802},[792,2825,988],{"class":802},[792,2827,2828],{"class":794,"line":1084},[792,2829,2830],{"class":802},"};\n",[792,2832,2833],{"class":794,"line":1098},[792,2834,877],{"emptyLinePlaceholder":223},[792,2836,2837,2839,2841,2843,2846],{"class":794,"line":1107},[792,2838,1769],{"class":893},[792,2840,961],{"class":806},[792,2842,944],{"class":802},[792,2844,2845],{"class":806}," spacingValues)",[792,2847,826],{"class":802},[792,2849,2850,2852,2854,2856,2858],{"class":794,"line":1112},[792,2851,2523],{"class":893},[792,2853,961],{"class":806},[792,2855,944],{"class":802},[792,2857,2845],{"class":806},[792,2859,826],{"class":802},[792,2861,2862,2864,2866,2868,2870],{"class":794,"line":1118},[792,2863,2539],{"class":893},[792,2865,961],{"class":806},[792,2867,944],{"class":802},[792,2869,2845],{"class":806},[792,2871,826],{"class":802},[792,2873,2874,2876,2878,2880,2882],{"class":794,"line":1166},[792,2875,2555],{"class":893},[792,2877,961],{"class":806},[792,2879,944],{"class":802},[792,2881,2845],{"class":806},[792,2883,826],{"class":802},[792,2885,2886,2888,2890,2892,2894],{"class":794,"line":1171},[792,2887,2583],{"class":893},[792,2889,961],{"class":806},[792,2891,944],{"class":802},[792,2893,2845],{"class":806},[792,2895,826],{"class":802},[792,2897,2898],{"class":794,"line":2144},[792,2899,877],{"emptyLinePlaceholder":223},[792,2901,2903,2905,2907,2909],{"class":794,"line":2902},26,[792,2904,1174],{"class":798},[792,2906,1177],{"class":798},[792,2908,917],{"class":806},[792,2910,826],{"class":802},[778,2912,2913],{"icon":154,"label":326},[782,2914,2916],{"className":1186,"code":2915,"filename":1188,"language":1189,"meta":788,"style":788},"._margin\\:md { margin: 1rem; }\n._margin-inline\\:md { margin-left: 1rem; margin-right: 1rem; }\n._margin-block\\:md { margin-top: 1rem; margin-bottom: 1rem; }\n._margin-top\\:md { margin-top: 1rem; }\n._margin-bottom\\:md { margin-bottom: 1rem; }\n\u002F* ... more values *\u002F\n",[702,2917,2918,2940,2973,3006,3029,3052],{"__ignoreMap":788},[792,2919,2920,2922,2924,2926,2928,2930,2932,2934,2936,2938],{"class":794,"line":795},[792,2921,1255],{"class":802},[792,2923,1259],{"class":1258},[792,2925,1262],{"class":806},[792,2927,1299],{"class":1258},[792,2929,803],{"class":802},[792,2931,1271],{"class":1270},[792,2933,976],{"class":802},[792,2935,1211],{"class":1210},[792,2937,2251],{"class":802},[792,2939,1288],{"class":802},[792,2941,2942,2944,2947,2949,2951,2953,2956,2958,2960,2962,2965,2967,2969,2971],{"class":794,"line":829},[792,2943,1255],{"class":802},[792,2945,2946],{"class":1258},"_margin-inline",[792,2948,1262],{"class":806},[792,2950,1299],{"class":1258},[792,2952,803],{"class":802},[792,2954,2955],{"class":1270}," margin-left",[792,2957,976],{"class":802},[792,2959,1211],{"class":1210},[792,2961,2251],{"class":802},[792,2963,2964],{"class":1270}," margin-right",[792,2966,976],{"class":802},[792,2968,1211],{"class":1210},[792,2970,2251],{"class":802},[792,2972,1288],{"class":802},[792,2974,2975,2977,2980,2982,2984,2986,2989,2991,2993,2995,2998,3000,3002,3004],{"class":794,"line":852},[792,2976,1255],{"class":802},[792,2978,2979],{"class":1258},"_margin-block",[792,2981,1262],{"class":806},[792,2983,1299],{"class":1258},[792,2985,803],{"class":802},[792,2987,2988],{"class":1270}," margin-top",[792,2990,976],{"class":802},[792,2992,1211],{"class":1210},[792,2994,2251],{"class":802},[792,2996,2997],{"class":1270}," margin-bottom",[792,2999,976],{"class":802},[792,3001,1211],{"class":1210},[792,3003,2251],{"class":802},[792,3005,1288],{"class":802},[792,3007,3008,3010,3013,3015,3017,3019,3021,3023,3025,3027],{"class":794,"line":874},[792,3009,1255],{"class":802},[792,3011,3012],{"class":1258},"_margin-top",[792,3014,1262],{"class":806},[792,3016,1299],{"class":1258},[792,3018,803],{"class":802},[792,3020,2988],{"class":1270},[792,3022,976],{"class":802},[792,3024,1211],{"class":1210},[792,3026,2251],{"class":802},[792,3028,1288],{"class":802},[792,3030,3031,3033,3036,3038,3040,3042,3044,3046,3048,3050],{"class":794,"line":880},[792,3032,1255],{"class":802},[792,3034,3035],{"class":1258},"_margin-bottom",[792,3037,1262],{"class":806},[792,3039,1299],{"class":1258},[792,3041,803],{"class":802},[792,3043,2997],{"class":1270},[792,3045,976],{"class":802},[792,3047,1211],{"class":1210},[792,3049,2251],{"class":802},[792,3051,1288],{"class":802},[792,3053,3054],{"class":794,"line":901},[792,3055,3056],{"class":930},"\u002F* ... more values *\u002F\n",[778,3058,3059],{"icon":520,"label":1509},[782,3060,3062],{"className":1512,"code":3061,"language":1514,"meta":788,"style":788},"\u003Cdiv class=\"_margin-top:md\">Top margin only\u003C\u002Fdiv>\n\u003Cdiv class=\"_margin-inline:lg\">Left and right margin\u003C\u002Fdiv>\n\u003Cdiv class=\"_margin-block:sm\">Top and bottom margin\u003C\u002Fdiv>\n",[702,3063,3064,3092,3120],{"__ignoreMap":788},[792,3065,3066,3068,3070,3072,3074,3076,3079,3081,3083,3086,3088,3090],{"class":794,"line":795},[792,3067,1526],{"class":802},[792,3069,1529],{"class":972},[792,3071,1532],{"class":883},[792,3073,890],{"class":802},[792,3075,823],{"class":802},[792,3077,3078],{"class":819},"_margin-top:md",[792,3080,823],{"class":802},[792,3082,1544],{"class":802},[792,3084,3085],{"class":806},"Top margin only",[792,3087,1550],{"class":802},[792,3089,1529],{"class":972},[792,3091,1555],{"class":802},[792,3093,3094,3096,3098,3100,3102,3104,3107,3109,3111,3114,3116,3118],{"class":794,"line":829},[792,3095,1526],{"class":802},[792,3097,1529],{"class":972},[792,3099,1532],{"class":883},[792,3101,890],{"class":802},[792,3103,823],{"class":802},[792,3105,3106],{"class":819},"_margin-inline:lg",[792,3108,823],{"class":802},[792,3110,1544],{"class":802},[792,3112,3113],{"class":806},"Left and right margin",[792,3115,1550],{"class":802},[792,3117,1529],{"class":972},[792,3119,1555],{"class":802},[792,3121,3122,3124,3126,3128,3130,3132,3135,3137,3139,3142,3144,3146],{"class":794,"line":852},[792,3123,1526],{"class":802},[792,3125,1529],{"class":972},[792,3127,1532],{"class":883},[792,3129,890],{"class":802},[792,3131,823],{"class":802},[792,3133,3134],{"class":819},"_margin-block:sm",[792,3136,823],{"class":802},[792,3138,1544],{"class":802},[792,3140,3141],{"class":806},"Top and bottom margin",[792,3143,1550],{"class":802},[792,3145,1529],{"class":972},[792,3147,1555],{"class":802},[707,3149,3151],{"id":3150},"usepaddingutility",[702,3152,1772],{},[711,3154,1794,3155,3158],{},[702,3156,3157],{},"usePaddingUtility()"," function creates utility classes for setting padding.",[775,3160,3161,3469,3660],{},[778,3162,3163],{"icon":780,"label":290},[782,3164,3166],{"className":784,"code":3165,"filename":786,"language":787,"meta":788,"style":788},"import { styleframe } from \"styleframe\";\nimport { useSpacingDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { usePaddingUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { spacingSm, spacingMd, spacingLg, spacingXl } = useSpacingDesignTokens(s, {\n    sm: '0.5rem',\n    md: '1rem',\n    lg: '1.5rem',\n    xl: '2rem',\n} as const);\n\nusePaddingUtility(s, {\n    '0': '0',\n    sm: ref(spacingSm),\n    md: ref(spacingMd),\n    lg: ref(spacingLg),\n    xl: ref(spacingXl),\n});\n\nexport default s;\n",[702,3167,3168,3188,3208,3229,3233,3247,3263,3267,3299,3313,3327,3341,3355,3367,3371,3381,3399,3411,3423,3435,3447,3455,3459],{"__ignoreMap":788},[792,3169,3170,3172,3174,3176,3178,3180,3182,3184,3186],{"class":794,"line":795},[792,3171,799],{"class":798},[792,3173,803],{"class":802},[792,3175,807],{"class":806},[792,3177,810],{"class":802},[792,3179,813],{"class":798},[792,3181,816],{"class":802},[792,3183,820],{"class":819},[792,3185,823],{"class":802},[792,3187,826],{"class":802},[792,3189,3190,3192,3194,3196,3198,3200,3202,3204,3206],{"class":794,"line":829},[792,3191,799],{"class":798},[792,3193,803],{"class":802},[792,3195,836],{"class":806},[792,3197,810],{"class":802},[792,3199,813],{"class":798},[792,3201,816],{"class":802},[792,3203,845],{"class":819},[792,3205,823],{"class":802},[792,3207,826],{"class":802},[792,3209,3210,3212,3214,3217,3219,3221,3223,3225,3227],{"class":794,"line":852},[792,3211,799],{"class":798},[792,3213,803],{"class":802},[792,3215,3216],{"class":806}," usePaddingUtility",[792,3218,810],{"class":802},[792,3220,813],{"class":798},[792,3222,816],{"class":802},[792,3224,845],{"class":819},[792,3226,823],{"class":802},[792,3228,826],{"class":802},[792,3230,3231],{"class":794,"line":874},[792,3232,877],{"emptyLinePlaceholder":223},[792,3234,3235,3237,3239,3241,3243,3245],{"class":794,"line":880},[792,3236,884],{"class":883},[792,3238,887],{"class":806},[792,3240,890],{"class":802},[792,3242,807],{"class":893},[792,3244,896],{"class":806},[792,3246,826],{"class":802},[792,3248,3249,3251,3253,3255,3257,3259,3261],{"class":794,"line":901},[792,3250,884],{"class":883},[792,3252,803],{"class":802},[792,3254,908],{"class":806},[792,3256,911],{"class":802},[792,3258,914],{"class":802},[792,3260,917],{"class":806},[792,3262,826],{"class":802},[792,3264,3265],{"class":794,"line":922},[792,3266,877],{"emptyLinePlaceholder":223},[792,3268,3269,3271,3273,3275,3277,3279,3281,3283,3285,3287,3289,3291,3293,3295,3297],{"class":794,"line":927},[792,3270,884],{"class":883},[792,3272,803],{"class":802},[792,3274,947],{"class":806},[792,3276,944],{"class":802},[792,3278,1922],{"class":806},[792,3280,944],{"class":802},[792,3282,1927],{"class":806},[792,3284,944],{"class":802},[792,3286,1932],{"class":806},[792,3288,911],{"class":802},[792,3290,914],{"class":802},[792,3292,836],{"class":893},[792,3294,961],{"class":806},[792,3296,944],{"class":802},[792,3298,966],{"class":802},[792,3300,3301,3303,3305,3307,3309,3311],{"class":794,"line":934},[792,3302,994],{"class":972},[792,3304,976],{"class":802},[792,3306,979],{"class":802},[792,3308,1001],{"class":819},[792,3310,985],{"class":802},[792,3312,988],{"class":802},[792,3314,3315,3317,3319,3321,3323,3325],{"class":794,"line":969},[792,3316,1011],{"class":972},[792,3318,976],{"class":802},[792,3320,979],{"class":802},[792,3322,982],{"class":819},[792,3324,985],{"class":802},[792,3326,988],{"class":802},[792,3328,3329,3331,3333,3335,3337,3339],{"class":794,"line":991},[792,3330,1991],{"class":972},[792,3332,976],{"class":802},[792,3334,979],{"class":802},[792,3336,1998],{"class":819},[792,3338,985],{"class":802},[792,3340,988],{"class":802},[792,3342,3343,3345,3347,3349,3351,3353],{"class":794,"line":1008},[792,3344,2007],{"class":972},[792,3346,976],{"class":802},[792,3348,979],{"class":802},[792,3350,2014],{"class":819},[792,3352,985],{"class":802},[792,3354,988],{"class":802},[792,3356,3357,3359,3361,3363,3365],{"class":794,"line":1024},[792,3358,911],{"class":802},[792,3360,1029],{"class":798},[792,3362,1032],{"class":883},[792,3364,1035],{"class":806},[792,3366,826],{"class":802},[792,3368,3369],{"class":794,"line":1040},[792,3370,877],{"emptyLinePlaceholder":223},[792,3372,3373,3375,3377,3379],{"class":794,"line":1045},[792,3374,1772],{"class":893},[792,3376,961],{"class":806},[792,3378,944],{"class":802},[792,3380,966],{"class":802},[792,3382,3383,3385,3387,3389,3391,3393,3395,3397],{"class":794,"line":1051},[792,3384,2049],{"class":802},[792,3386,1429],{"class":972},[792,3388,985],{"class":802},[792,3390,976],{"class":802},[792,3392,979],{"class":802},[792,3394,1429],{"class":819},[792,3396,985],{"class":802},[792,3398,988],{"class":802},[792,3400,3401,3403,3405,3407,3409],{"class":794,"line":1069},[792,3402,994],{"class":972},[792,3404,976],{"class":802},[792,3406,1076],{"class":893},[792,3408,1079],{"class":806},[792,3410,988],{"class":802},[792,3412,3413,3415,3417,3419,3421],{"class":794,"line":1084},[792,3414,1011],{"class":972},[792,3416,976],{"class":802},[792,3418,1076],{"class":893},[792,3420,1093],{"class":806},[792,3422,988],{"class":802},[792,3424,3425,3427,3429,3431,3433],{"class":794,"line":1098},[792,3426,1991],{"class":972},[792,3428,976],{"class":802},[792,3430,1076],{"class":893},[792,3432,2098],{"class":806},[792,3434,988],{"class":802},[792,3436,3437,3439,3441,3443,3445],{"class":794,"line":1107},[792,3438,2007],{"class":972},[792,3440,976],{"class":802},[792,3442,1076],{"class":893},[792,3444,2111],{"class":806},[792,3446,988],{"class":802},[792,3448,3449,3451,3453],{"class":794,"line":1112},[792,3450,911],{"class":802},[792,3452,1035],{"class":806},[792,3454,826],{"class":802},[792,3456,3457],{"class":794,"line":1118},[792,3458,877],{"emptyLinePlaceholder":223},[792,3460,3461,3463,3465,3467],{"class":794,"line":1166},[792,3462,1174],{"class":798},[792,3464,1177],{"class":798},[792,3466,917],{"class":806},[792,3468,826],{"class":802},[778,3470,3471],{"icon":154,"label":326},[782,3472,3474],{"className":1186,"code":3473,"filename":1188,"language":1189,"meta":788,"style":788},":root {\n    --spacing--sm: 0.5rem;\n    --spacing--md: 1rem;\n    --spacing--lg: 1.5rem;\n    --spacing--xl: 2rem;\n}\n\n._padding\\:0 { padding: 0; }\n._padding\\:sm { padding: var(--spacing--sm); }\n._padding\\:md { padding: var(--spacing--md); }\n._padding\\:lg { padding: var(--spacing--lg); }\n._padding\\:xl { padding: var(--spacing--xl); }\n",[702,3475,3476,3484,3494,3504,3514,3524,3528,3532,3556,3582,3608,3634],{"__ignoreMap":788},[792,3477,3478,3480,3482],{"class":794,"line":795},[792,3479,976],{"class":802},[792,3481,1198],{"class":883},[792,3483,966],{"class":802},[792,3485,3486,3488,3490,3492],{"class":794,"line":829},[792,3487,1218],{"class":806},[792,3489,976],{"class":802},[792,3491,1223],{"class":1210},[792,3493,826],{"class":802},[792,3495,3496,3498,3500,3502],{"class":794,"line":852},[792,3497,1230],{"class":806},[792,3499,976],{"class":802},[792,3501,1211],{"class":1210},[792,3503,826],{"class":802},[792,3505,3506,3508,3510,3512],{"class":794,"line":874},[792,3507,2202],{"class":806},[792,3509,976],{"class":802},[792,3511,2207],{"class":1210},[792,3513,826],{"class":802},[792,3515,3516,3518,3520,3522],{"class":794,"line":880},[792,3517,2214],{"class":806},[792,3519,976],{"class":802},[792,3521,2219],{"class":1210},[792,3523,826],{"class":802},[792,3525,3526],{"class":794,"line":901},[792,3527,1241],{"class":802},[792,3529,3530],{"class":794,"line":922},[792,3531,877],{"emptyLinePlaceholder":223},[792,3533,3534,3536,3539,3541,3543,3545,3548,3550,3552,3554],{"class":794,"line":927},[792,3535,1255],{"class":802},[792,3537,3538],{"class":1258},"_padding",[792,3540,1262],{"class":806},[792,3542,1429],{"class":1258},[792,3544,803],{"class":802},[792,3546,3547],{"class":1270}," padding",[792,3549,976],{"class":802},[792,3551,2248],{"class":1210},[792,3553,2251],{"class":802},[792,3555,1288],{"class":802},[792,3557,3558,3560,3562,3564,3566,3568,3570,3572,3574,3576,3578,3580],{"class":794,"line":934},[792,3559,1255],{"class":802},[792,3561,3538],{"class":1258},[792,3563,1262],{"class":806},[792,3565,1265],{"class":1258},[792,3567,803],{"class":802},[792,3569,3547],{"class":1270},[792,3571,976],{"class":802},[792,3573,1276],{"class":893},[792,3575,1279],{"class":802},[792,3577,1282],{"class":806},[792,3579,1285],{"class":802},[792,3581,1288],{"class":802},[792,3583,3584,3586,3588,3590,3592,3594,3596,3598,3600,3602,3604,3606],{"class":794,"line":969},[792,3585,1255],{"class":802},[792,3587,3538],{"class":1258},[792,3589,1262],{"class":806},[792,3591,1299],{"class":1258},[792,3593,803],{"class":802},[792,3595,3547],{"class":1270},[792,3597,976],{"class":802},[792,3599,1276],{"class":893},[792,3601,1279],{"class":802},[792,3603,1312],{"class":806},[792,3605,1285],{"class":802},[792,3607,1288],{"class":802},[792,3609,3610,3612,3614,3616,3618,3620,3622,3624,3626,3628,3630,3632],{"class":794,"line":991},[792,3611,1255],{"class":802},[792,3613,3538],{"class":1258},[792,3615,1262],{"class":806},[792,3617,2316],{"class":1258},[792,3619,803],{"class":802},[792,3621,3547],{"class":1270},[792,3623,976],{"class":802},[792,3625,1276],{"class":893},[792,3627,1279],{"class":802},[792,3629,2329],{"class":806},[792,3631,1285],{"class":802},[792,3633,1288],{"class":802},[792,3635,3636,3638,3640,3642,3644,3646,3648,3650,3652,3654,3656,3658],{"class":794,"line":1008},[792,3637,1255],{"class":802},[792,3639,3538],{"class":1258},[792,3641,1262],{"class":806},[792,3643,2344],{"class":1258},[792,3645,803],{"class":802},[792,3647,3547],{"class":1270},[792,3649,976],{"class":802},[792,3651,1276],{"class":893},[792,3653,1279],{"class":802},[792,3655,2357],{"class":806},[792,3657,1285],{"class":802},[792,3659,1288],{"class":802},[778,3661,3662],{"icon":520,"label":1509},[782,3663,3665],{"className":1512,"code":3664,"language":1514,"meta":788,"style":788},"\u003Cdiv class=\"_padding:md\">Medium padding all sides\u003C\u002Fdiv>\n\u003Cdiv class=\"_padding:lg\">Large padding all sides\u003C\u002Fdiv>\n",[702,3666,3667,3695],{"__ignoreMap":788},[792,3668,3669,3671,3673,3675,3677,3679,3682,3684,3686,3689,3691,3693],{"class":794,"line":795},[792,3670,1526],{"class":802},[792,3672,1529],{"class":972},[792,3674,1532],{"class":883},[792,3676,890],{"class":802},[792,3678,823],{"class":802},[792,3680,3681],{"class":819},"_padding:md",[792,3683,823],{"class":802},[792,3685,1544],{"class":802},[792,3687,3688],{"class":806},"Medium padding all sides",[792,3690,1550],{"class":802},[792,3692,1529],{"class":972},[792,3694,1555],{"class":802},[792,3696,3697,3699,3701,3703,3705,3707,3710,3712,3714,3717,3719,3721],{"class":794,"line":829},[792,3698,1526],{"class":802},[792,3700,1529],{"class":972},[792,3702,1532],{"class":883},[792,3704,890],{"class":802},[792,3706,823],{"class":802},[792,3708,3709],{"class":819},"_padding:lg",[792,3711,823],{"class":802},[792,3713,1544],{"class":802},[792,3715,3716],{"class":806},"Large padding all sides",[792,3718,1550],{"class":802},[792,3720,1529],{"class":972},[792,3722,1555],{"class":802},[1678,3724,3726],{"id":3725},"directional-padding-variants","Directional Padding Variants",[1690,3728,3729,3739],{},[1693,3730,3731],{},[1696,3732,3733,3735,3737],{},[1699,3734,2459],{},[1699,3736,2462],{},[1699,3738,1707],{},[1709,3740,3741,3754,3771,3788,3803,3818,3831,3844,3857,3870,3884],{},[1696,3742,3743,3747,3752],{},[1714,3744,3745],{},[702,3746,1772],{},[1714,3748,3749],{},[702,3750,3751],{},"padding",[1714,3753,2480],{},[1696,3755,3756,3761,3769],{},[1714,3757,3758],{},[702,3759,3760],{},"usePaddingXUtility",[1714,3762,3763,1722,3766],{},[702,3764,3765],{},"padding-left",[702,3767,3768],{},"padding-right",[1714,3770,2498],{},[1696,3772,3773,3778,3786],{},[1714,3774,3775],{},[702,3776,3777],{},"usePaddingYUtility",[1714,3779,3780,1722,3783],{},[702,3781,3782],{},"padding-top",[702,3784,3785],{},"padding-bottom",[1714,3787,2516],{},[1696,3789,3790,3795,3801],{},[1714,3791,3792],{},[702,3793,3794],{},"usePaddingInlineUtility",[1714,3796,3797,1722,3799],{},[702,3798,3765],{},[702,3800,3768],{},[1714,3802,2532],{},[1696,3804,3805,3810,3816],{},[1714,3806,3807],{},[702,3808,3809],{},"usePaddingBlockUtility",[1714,3811,3812,1722,3814],{},[702,3813,3782],{},[702,3815,3785],{},[1714,3817,2548],{},[1696,3819,3820,3825,3829],{},[1714,3821,3822],{},[702,3823,3824],{},"usePaddingTopUtility",[1714,3826,3827],{},[702,3828,3782],{},[1714,3830,2562],{},[1696,3832,3833,3838,3842],{},[1714,3834,3835],{},[702,3836,3837],{},"usePaddingRightUtility",[1714,3839,3840],{},[702,3841,3768],{},[1714,3843,2576],{},[1696,3845,3846,3851,3855],{},[1714,3847,3848],{},[702,3849,3850],{},"usePaddingBottomUtility",[1714,3852,3853],{},[702,3854,3785],{},[1714,3856,2590],{},[1696,3858,3859,3864,3868],{},[1714,3860,3861],{},[702,3862,3863],{},"usePaddingLeftUtility",[1714,3865,3866],{},[702,3867,3765],{},[1714,3869,2604],{},[1696,3871,3872,3877,3882],{},[1714,3873,3874],{},[702,3875,3876],{},"usePaddingInlineStartUtility",[1714,3878,3879],{},[702,3880,3881],{},"padding-inline-start",[1714,3883,2619],{},[1696,3885,3886,3891,3896],{},[1714,3887,3888],{},[702,3889,3890],{},"usePaddingInlineEndUtility",[1714,3892,3893],{},[702,3894,3895],{},"padding-inline-end",[1714,3897,2634],{},[707,3899,3901],{"id":3900},"usespaceutility",[702,3902,1775],{},[711,3904,1794,3905,3908],{},[702,3906,3907],{},"useSpaceUtility()"," creates spacing between child elements using the \"lobotomized owl\" selector pattern.",[775,3910,3911,4162,4357],{},[778,3912,3913],{"icon":780,"label":290},[782,3914,3916],{"className":784,"code":3915,"filename":786,"language":787,"meta":788,"style":788},"import { styleframe } from \"styleframe\";\nimport { useSpaceXUtility, useSpaceYUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseSpaceXUtility(s, {\n    '0': '0',\n    sm: '0.5rem',\n    md: '1rem',\n    lg: '1.5rem',\n});\n\nuseSpaceYUtility(s, {\n    '0': '0',\n    sm: '0.5rem',\n    md: '1rem',\n    lg: '1.5rem',\n});\n\nexport default s;\n",[702,3917,3918,3938,3964,3968,3982,3986,3997,4015,4029,4043,4057,4065,4069,4080,4098,4112,4126,4140,4148,4152],{"__ignoreMap":788},[792,3919,3920,3922,3924,3926,3928,3930,3932,3934,3936],{"class":794,"line":795},[792,3921,799],{"class":798},[792,3923,803],{"class":802},[792,3925,807],{"class":806},[792,3927,810],{"class":802},[792,3929,813],{"class":798},[792,3931,816],{"class":802},[792,3933,820],{"class":819},[792,3935,823],{"class":802},[792,3937,826],{"class":802},[792,3939,3940,3942,3944,3947,3949,3952,3954,3956,3958,3960,3962],{"class":794,"line":829},[792,3941,799],{"class":798},[792,3943,803],{"class":802},[792,3945,3946],{"class":806}," useSpaceXUtility",[792,3948,944],{"class":802},[792,3950,3951],{"class":806}," useSpaceYUtility",[792,3953,810],{"class":802},[792,3955,813],{"class":798},[792,3957,816],{"class":802},[792,3959,845],{"class":819},[792,3961,823],{"class":802},[792,3963,826],{"class":802},[792,3965,3966],{"class":794,"line":852},[792,3967,877],{"emptyLinePlaceholder":223},[792,3969,3970,3972,3974,3976,3978,3980],{"class":794,"line":874},[792,3971,884],{"class":883},[792,3973,887],{"class":806},[792,3975,890],{"class":802},[792,3977,807],{"class":893},[792,3979,896],{"class":806},[792,3981,826],{"class":802},[792,3983,3984],{"class":794,"line":880},[792,3985,877],{"emptyLinePlaceholder":223},[792,3987,3988,3991,3993,3995],{"class":794,"line":901},[792,3989,3990],{"class":893},"useSpaceXUtility",[792,3992,961],{"class":806},[792,3994,944],{"class":802},[792,3996,966],{"class":802},[792,3998,3999,4001,4003,4005,4007,4009,4011,4013],{"class":794,"line":922},[792,4000,2049],{"class":802},[792,4002,1429],{"class":972},[792,4004,985],{"class":802},[792,4006,976],{"class":802},[792,4008,979],{"class":802},[792,4010,1429],{"class":819},[792,4012,985],{"class":802},[792,4014,988],{"class":802},[792,4016,4017,4019,4021,4023,4025,4027],{"class":794,"line":927},[792,4018,994],{"class":972},[792,4020,976],{"class":802},[792,4022,979],{"class":802},[792,4024,1001],{"class":819},[792,4026,985],{"class":802},[792,4028,988],{"class":802},[792,4030,4031,4033,4035,4037,4039,4041],{"class":794,"line":934},[792,4032,1011],{"class":972},[792,4034,976],{"class":802},[792,4036,979],{"class":802},[792,4038,982],{"class":819},[792,4040,985],{"class":802},[792,4042,988],{"class":802},[792,4044,4045,4047,4049,4051,4053,4055],{"class":794,"line":969},[792,4046,1991],{"class":972},[792,4048,976],{"class":802},[792,4050,979],{"class":802},[792,4052,1998],{"class":819},[792,4054,985],{"class":802},[792,4056,988],{"class":802},[792,4058,4059,4061,4063],{"class":794,"line":991},[792,4060,911],{"class":802},[792,4062,1035],{"class":806},[792,4064,826],{"class":802},[792,4066,4067],{"class":794,"line":1008},[792,4068,877],{"emptyLinePlaceholder":223},[792,4070,4071,4074,4076,4078],{"class":794,"line":1024},[792,4072,4073],{"class":893},"useSpaceYUtility",[792,4075,961],{"class":806},[792,4077,944],{"class":802},[792,4079,966],{"class":802},[792,4081,4082,4084,4086,4088,4090,4092,4094,4096],{"class":794,"line":1040},[792,4083,2049],{"class":802},[792,4085,1429],{"class":972},[792,4087,985],{"class":802},[792,4089,976],{"class":802},[792,4091,979],{"class":802},[792,4093,1429],{"class":819},[792,4095,985],{"class":802},[792,4097,988],{"class":802},[792,4099,4100,4102,4104,4106,4108,4110],{"class":794,"line":1045},[792,4101,994],{"class":972},[792,4103,976],{"class":802},[792,4105,979],{"class":802},[792,4107,1001],{"class":819},[792,4109,985],{"class":802},[792,4111,988],{"class":802},[792,4113,4114,4116,4118,4120,4122,4124],{"class":794,"line":1051},[792,4115,1011],{"class":972},[792,4117,976],{"class":802},[792,4119,979],{"class":802},[792,4121,982],{"class":819},[792,4123,985],{"class":802},[792,4125,988],{"class":802},[792,4127,4128,4130,4132,4134,4136,4138],{"class":794,"line":1069},[792,4129,1991],{"class":972},[792,4131,976],{"class":802},[792,4133,979],{"class":802},[792,4135,1998],{"class":819},[792,4137,985],{"class":802},[792,4139,988],{"class":802},[792,4141,4142,4144,4146],{"class":794,"line":1084},[792,4143,911],{"class":802},[792,4145,1035],{"class":806},[792,4147,826],{"class":802},[792,4149,4150],{"class":794,"line":1098},[792,4151,877],{"emptyLinePlaceholder":223},[792,4153,4154,4156,4158,4160],{"class":794,"line":1107},[792,4155,1174],{"class":798},[792,4157,1177],{"class":798},[792,4159,917],{"class":806},[792,4161,826],{"class":802},[778,4163,4164],{"icon":154,"label":326},[782,4165,4167],{"className":1186,"code":4166,"filename":1188,"language":1189,"meta":788,"style":788},"._space-x\\:sm > * + * { margin-left: 0.5rem; }\n._space-x\\:md > * + * { margin-left: 1rem; }\n._space-x\\:lg > * + * { margin-left: 1.5rem; }\n\n._space-y\\:sm > * + * { margin-top: 0.5rem; }\n._space-y\\:md > * + * { margin-top: 1rem; }\n._space-y\\:lg > * + * { margin-top: 1.5rem; }\n",[702,4168,4169,4202,4232,4262,4266,4297,4327],{"__ignoreMap":788},[792,4170,4171,4173,4176,4178,4180,4183,4185,4188,4190,4192,4194,4196,4198,4200],{"class":794,"line":795},[792,4172,1255],{"class":802},[792,4174,4175],{"class":1258},"_space-x",[792,4177,1262],{"class":806},[792,4179,1265],{"class":1258},[792,4181,4182],{"class":802}," >",[792,4184,1369],{"class":1258},[792,4186,4187],{"class":802}," +",[792,4189,1369],{"class":1258},[792,4191,803],{"class":802},[792,4193,2955],{"class":1270},[792,4195,976],{"class":802},[792,4197,1223],{"class":1210},[792,4199,2251],{"class":802},[792,4201,1288],{"class":802},[792,4203,4204,4206,4208,4210,4212,4214,4216,4218,4220,4222,4224,4226,4228,4230],{"class":794,"line":829},[792,4205,1255],{"class":802},[792,4207,4175],{"class":1258},[792,4209,1262],{"class":806},[792,4211,1299],{"class":1258},[792,4213,4182],{"class":802},[792,4215,1369],{"class":1258},[792,4217,4187],{"class":802},[792,4219,1369],{"class":1258},[792,4221,803],{"class":802},[792,4223,2955],{"class":1270},[792,4225,976],{"class":802},[792,4227,1211],{"class":1210},[792,4229,2251],{"class":802},[792,4231,1288],{"class":802},[792,4233,4234,4236,4238,4240,4242,4244,4246,4248,4250,4252,4254,4256,4258,4260],{"class":794,"line":852},[792,4235,1255],{"class":802},[792,4237,4175],{"class":1258},[792,4239,1262],{"class":806},[792,4241,2316],{"class":1258},[792,4243,4182],{"class":802},[792,4245,1369],{"class":1258},[792,4247,4187],{"class":802},[792,4249,1369],{"class":1258},[792,4251,803],{"class":802},[792,4253,2955],{"class":1270},[792,4255,976],{"class":802},[792,4257,2207],{"class":1210},[792,4259,2251],{"class":802},[792,4261,1288],{"class":802},[792,4263,4264],{"class":794,"line":874},[792,4265,877],{"emptyLinePlaceholder":223},[792,4267,4268,4270,4273,4275,4277,4279,4281,4283,4285,4287,4289,4291,4293,4295],{"class":794,"line":880},[792,4269,1255],{"class":802},[792,4271,4272],{"class":1258},"_space-y",[792,4274,1262],{"class":806},[792,4276,1265],{"class":1258},[792,4278,4182],{"class":802},[792,4280,1369],{"class":1258},[792,4282,4187],{"class":802},[792,4284,1369],{"class":1258},[792,4286,803],{"class":802},[792,4288,2988],{"class":1270},[792,4290,976],{"class":802},[792,4292,1223],{"class":1210},[792,4294,2251],{"class":802},[792,4296,1288],{"class":802},[792,4298,4299,4301,4303,4305,4307,4309,4311,4313,4315,4317,4319,4321,4323,4325],{"class":794,"line":901},[792,4300,1255],{"class":802},[792,4302,4272],{"class":1258},[792,4304,1262],{"class":806},[792,4306,1299],{"class":1258},[792,4308,4182],{"class":802},[792,4310,1369],{"class":1258},[792,4312,4187],{"class":802},[792,4314,1369],{"class":1258},[792,4316,803],{"class":802},[792,4318,2988],{"class":1270},[792,4320,976],{"class":802},[792,4322,1211],{"class":1210},[792,4324,2251],{"class":802},[792,4326,1288],{"class":802},[792,4328,4329,4331,4333,4335,4337,4339,4341,4343,4345,4347,4349,4351,4353,4355],{"class":794,"line":922},[792,4330,1255],{"class":802},[792,4332,4272],{"class":1258},[792,4334,1262],{"class":806},[792,4336,2316],{"class":1258},[792,4338,4182],{"class":802},[792,4340,1369],{"class":1258},[792,4342,4187],{"class":802},[792,4344,1369],{"class":1258},[792,4346,803],{"class":802},[792,4348,2988],{"class":1270},[792,4350,976],{"class":802},[792,4352,2207],{"class":1210},[792,4354,2251],{"class":802},[792,4356,1288],{"class":802},[778,4358,4359],{"icon":520,"label":1509},[782,4360,4362],{"className":1512,"code":4361,"language":1514,"meta":788,"style":788},"\u003Cdiv class=\"_space-x:md\">\n    \u003Cspan>Item 1\u003C\u002Fspan>\n    \u003Cspan>Item 2\u003C\u002Fspan>\n    \u003Cspan>Item 3\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"_space-y:lg\">\n    \u003Cdiv>Row 1\u003C\u002Fdiv>\n    \u003Cdiv>Row 2\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[702,4363,4364,4383,4401,4418,4435,4443,4462,4479,4496],{"__ignoreMap":788},[792,4365,4366,4368,4370,4372,4374,4376,4379,4381],{"class":794,"line":795},[792,4367,1526],{"class":802},[792,4369,1529],{"class":972},[792,4371,1532],{"class":883},[792,4373,890],{"class":802},[792,4375,823],{"class":802},[792,4377,4378],{"class":819},"_space-x:md",[792,4380,823],{"class":802},[792,4382,1555],{"class":802},[792,4384,4385,4388,4390,4392,4395,4397,4399],{"class":794,"line":829},[792,4386,4387],{"class":802},"    \u003C",[792,4389,792],{"class":972},[792,4391,1544],{"class":802},[792,4393,4394],{"class":806},"Item 1",[792,4396,1550],{"class":802},[792,4398,792],{"class":972},[792,4400,1555],{"class":802},[792,4402,4403,4405,4407,4409,4412,4414,4416],{"class":794,"line":852},[792,4404,4387],{"class":802},[792,4406,792],{"class":972},[792,4408,1544],{"class":802},[792,4410,4411],{"class":806},"Item 2",[792,4413,1550],{"class":802},[792,4415,792],{"class":972},[792,4417,1555],{"class":802},[792,4419,4420,4422,4424,4426,4429,4431,4433],{"class":794,"line":874},[792,4421,4387],{"class":802},[792,4423,792],{"class":972},[792,4425,1544],{"class":802},[792,4427,4428],{"class":806},"Item 3",[792,4430,1550],{"class":802},[792,4432,792],{"class":972},[792,4434,1555],{"class":802},[792,4436,4437,4439,4441],{"class":794,"line":880},[792,4438,1550],{"class":802},[792,4440,1529],{"class":972},[792,4442,1555],{"class":802},[792,4444,4445,4447,4449,4451,4453,4455,4458,4460],{"class":794,"line":901},[792,4446,1526],{"class":802},[792,4448,1529],{"class":972},[792,4450,1532],{"class":883},[792,4452,890],{"class":802},[792,4454,823],{"class":802},[792,4456,4457],{"class":819},"_space-y:lg",[792,4459,823],{"class":802},[792,4461,1555],{"class":802},[792,4463,4464,4466,4468,4470,4473,4475,4477],{"class":794,"line":922},[792,4465,4387],{"class":802},[792,4467,1529],{"class":972},[792,4469,1544],{"class":802},[792,4471,4472],{"class":806},"Row 1",[792,4474,1550],{"class":802},[792,4476,1529],{"class":972},[792,4478,1555],{"class":802},[792,4480,4481,4483,4485,4487,4490,4492,4494],{"class":794,"line":927},[792,4482,4387],{"class":802},[792,4484,1529],{"class":972},[792,4486,1544],{"class":802},[792,4488,4489],{"class":806},"Row 2",[792,4491,1550],{"class":802},[792,4493,1529],{"class":972},[792,4495,1555],{"class":802},[792,4497,4498,4500,4502],{"class":794,"line":934},[792,4499,1550],{"class":802},[792,4501,1529],{"class":972},[792,4503,1555],{"class":802},[1764,4505,4506,4509,4510,4513,4514,4517],{},[692,4507,4508],{},"Pro tip",": For flex and grid layouts, prefer ",[702,4511,4512],{},"gap"," utilities over ",[702,4515,4516],{},"space"," utilities. Gap doesn't require negative margins and works more predictably.",[707,4519,4521],{"id":4520},"examples","Examples",[1678,4523,4525],{"id":4524},"card-with-consistent-padding","Card with Consistent Padding",[775,4527,4528,4797],{},[778,4529,4530],{"icon":780,"label":290},[782,4531,4533],{"className":784,"code":4532,"filename":786,"language":787,"meta":788,"style":788},"import { styleframe } from \"styleframe\";\nimport { useSpacingDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { usePaddingUtility, useMarginBottomUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { spacingMd, spacingLg } = useSpacingDesignTokens(s, {\n    md: '1rem',\n    lg: '1.5rem',\n} as const);\n\nusePaddingUtility(s, {\n    md: ref(spacingMd),\n    lg: ref(spacingLg),\n});\n\nuseMarginBottomUtility(s, {\n    md: ref(spacingMd),\n});\n\nexport default s;\n",[702,4534,4535,4555,4575,4600,4604,4618,4634,4638,4663,4677,4691,4703,4707,4717,4729,4741,4749,4753,4763,4775,4783,4787],{"__ignoreMap":788},[792,4536,4537,4539,4541,4543,4545,4547,4549,4551,4553],{"class":794,"line":795},[792,4538,799],{"class":798},[792,4540,803],{"class":802},[792,4542,807],{"class":806},[792,4544,810],{"class":802},[792,4546,813],{"class":798},[792,4548,816],{"class":802},[792,4550,820],{"class":819},[792,4552,823],{"class":802},[792,4554,826],{"class":802},[792,4556,4557,4559,4561,4563,4565,4567,4569,4571,4573],{"class":794,"line":829},[792,4558,799],{"class":798},[792,4560,803],{"class":802},[792,4562,836],{"class":806},[792,4564,810],{"class":802},[792,4566,813],{"class":798},[792,4568,816],{"class":802},[792,4570,845],{"class":819},[792,4572,823],{"class":802},[792,4574,826],{"class":802},[792,4576,4577,4579,4581,4583,4585,4588,4590,4592,4594,4596,4598],{"class":794,"line":852},[792,4578,799],{"class":798},[792,4580,803],{"class":802},[792,4582,3216],{"class":806},[792,4584,944],{"class":802},[792,4586,4587],{"class":806}," useMarginBottomUtility",[792,4589,810],{"class":802},[792,4591,813],{"class":798},[792,4593,816],{"class":802},[792,4595,845],{"class":819},[792,4597,823],{"class":802},[792,4599,826],{"class":802},[792,4601,4602],{"class":794,"line":874},[792,4603,877],{"emptyLinePlaceholder":223},[792,4605,4606,4608,4610,4612,4614,4616],{"class":794,"line":880},[792,4607,884],{"class":883},[792,4609,887],{"class":806},[792,4611,890],{"class":802},[792,4613,807],{"class":893},[792,4615,896],{"class":806},[792,4617,826],{"class":802},[792,4619,4620,4622,4624,4626,4628,4630,4632],{"class":794,"line":901},[792,4621,884],{"class":883},[792,4623,803],{"class":802},[792,4625,908],{"class":806},[792,4627,911],{"class":802},[792,4629,914],{"class":802},[792,4631,917],{"class":806},[792,4633,826],{"class":802},[792,4635,4636],{"class":794,"line":922},[792,4637,877],{"emptyLinePlaceholder":223},[792,4639,4640,4642,4644,4646,4648,4651,4653,4655,4657,4659,4661],{"class":794,"line":927},[792,4641,884],{"class":883},[792,4643,803],{"class":802},[792,4645,1922],{"class":806},[792,4647,944],{"class":802},[792,4649,4650],{"class":806}," spacingLg ",[792,4652,911],{"class":802},[792,4654,914],{"class":802},[792,4656,836],{"class":893},[792,4658,961],{"class":806},[792,4660,944],{"class":802},[792,4662,966],{"class":802},[792,4664,4665,4667,4669,4671,4673,4675],{"class":794,"line":934},[792,4666,1011],{"class":972},[792,4668,976],{"class":802},[792,4670,979],{"class":802},[792,4672,982],{"class":819},[792,4674,985],{"class":802},[792,4676,988],{"class":802},[792,4678,4679,4681,4683,4685,4687,4689],{"class":794,"line":969},[792,4680,1991],{"class":972},[792,4682,976],{"class":802},[792,4684,979],{"class":802},[792,4686,1998],{"class":819},[792,4688,985],{"class":802},[792,4690,988],{"class":802},[792,4692,4693,4695,4697,4699,4701],{"class":794,"line":991},[792,4694,911],{"class":802},[792,4696,1029],{"class":798},[792,4698,1032],{"class":883},[792,4700,1035],{"class":806},[792,4702,826],{"class":802},[792,4704,4705],{"class":794,"line":1008},[792,4706,877],{"emptyLinePlaceholder":223},[792,4708,4709,4711,4713,4715],{"class":794,"line":1024},[792,4710,1772],{"class":893},[792,4712,961],{"class":806},[792,4714,944],{"class":802},[792,4716,966],{"class":802},[792,4718,4719,4721,4723,4725,4727],{"class":794,"line":1040},[792,4720,1011],{"class":972},[792,4722,976],{"class":802},[792,4724,1076],{"class":893},[792,4726,1093],{"class":806},[792,4728,988],{"class":802},[792,4730,4731,4733,4735,4737,4739],{"class":794,"line":1045},[792,4732,1991],{"class":972},[792,4734,976],{"class":802},[792,4736,1076],{"class":893},[792,4738,2098],{"class":806},[792,4740,988],{"class":802},[792,4742,4743,4745,4747],{"class":794,"line":1051},[792,4744,911],{"class":802},[792,4746,1035],{"class":806},[792,4748,826],{"class":802},[792,4750,4751],{"class":794,"line":1069},[792,4752,877],{"emptyLinePlaceholder":223},[792,4754,4755,4757,4759,4761],{"class":794,"line":1084},[792,4756,2583],{"class":893},[792,4758,961],{"class":806},[792,4760,944],{"class":802},[792,4762,966],{"class":802},[792,4764,4765,4767,4769,4771,4773],{"class":794,"line":1098},[792,4766,1011],{"class":972},[792,4768,976],{"class":802},[792,4770,1076],{"class":893},[792,4772,1093],{"class":806},[792,4774,988],{"class":802},[792,4776,4777,4779,4781],{"class":794,"line":1107},[792,4778,911],{"class":802},[792,4780,1035],{"class":806},[792,4782,826],{"class":802},[792,4784,4785],{"class":794,"line":1112},[792,4786,877],{"emptyLinePlaceholder":223},[792,4788,4789,4791,4793,4795],{"class":794,"line":1118},[792,4790,1174],{"class":798},[792,4792,1177],{"class":798},[792,4794,917],{"class":806},[792,4796,826],{"class":802},[778,4798,4799],{"icon":154,"label":326},[782,4800,4802],{"className":1186,"code":4801,"filename":1188,"language":1189,"meta":788,"style":788},":root {\n    --spacing--md: 1rem;\n    --spacing--lg: 1.5rem;\n}\n\n._padding\\:md { padding: var(--spacing--md); }\n._padding\\:lg { padding: var(--spacing--lg); }\n\n._margin-bottom\\:md { margin-bottom: var(--spacing--md); }\n",[702,4803,4804,4812,4822,4832,4836,4840,4866,4892,4896],{"__ignoreMap":788},[792,4805,4806,4808,4810],{"class":794,"line":795},[792,4807,976],{"class":802},[792,4809,1198],{"class":883},[792,4811,966],{"class":802},[792,4813,4814,4816,4818,4820],{"class":794,"line":829},[792,4815,1230],{"class":806},[792,4817,976],{"class":802},[792,4819,1211],{"class":1210},[792,4821,826],{"class":802},[792,4823,4824,4826,4828,4830],{"class":794,"line":852},[792,4825,2202],{"class":806},[792,4827,976],{"class":802},[792,4829,2207],{"class":1210},[792,4831,826],{"class":802},[792,4833,4834],{"class":794,"line":874},[792,4835,1241],{"class":802},[792,4837,4838],{"class":794,"line":880},[792,4839,877],{"emptyLinePlaceholder":223},[792,4841,4842,4844,4846,4848,4850,4852,4854,4856,4858,4860,4862,4864],{"class":794,"line":901},[792,4843,1255],{"class":802},[792,4845,3538],{"class":1258},[792,4847,1262],{"class":806},[792,4849,1299],{"class":1258},[792,4851,803],{"class":802},[792,4853,3547],{"class":1270},[792,4855,976],{"class":802},[792,4857,1276],{"class":893},[792,4859,1279],{"class":802},[792,4861,1312],{"class":806},[792,4863,1285],{"class":802},[792,4865,1288],{"class":802},[792,4867,4868,4870,4872,4874,4876,4878,4880,4882,4884,4886,4888,4890],{"class":794,"line":922},[792,4869,1255],{"class":802},[792,4871,3538],{"class":1258},[792,4873,1262],{"class":806},[792,4875,2316],{"class":1258},[792,4877,803],{"class":802},[792,4879,3547],{"class":1270},[792,4881,976],{"class":802},[792,4883,1276],{"class":893},[792,4885,1279],{"class":802},[792,4887,2329],{"class":806},[792,4889,1285],{"class":802},[792,4891,1288],{"class":802},[792,4893,4894],{"class":794,"line":927},[792,4895,877],{"emptyLinePlaceholder":223},[792,4897,4898,4900,4902,4904,4906,4908,4910,4912,4914,4916,4918,4920],{"class":794,"line":934},[792,4899,1255],{"class":802},[792,4901,3035],{"class":1258},[792,4903,1262],{"class":806},[792,4905,1299],{"class":1258},[792,4907,803],{"class":802},[792,4909,2997],{"class":1270},[792,4911,976],{"class":802},[792,4913,1276],{"class":893},[792,4915,1279],{"class":802},[792,4917,1312],{"class":806},[792,4919,1285],{"class":802},[792,4921,1288],{"class":802},[711,4923,4924],{},"Usage in HTML:",[782,4926,4928],{"className":1512,"code":4927,"language":1514,"meta":788,"style":788},"\u003Cdiv class=\"card _padding:lg\">\n    \u003Ch2 class=\"_margin-bottom:md\">Card Title\u003C\u002Fh2>\n    \u003Cp>Card content goes here.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[702,4929,4930,4949,4977,4994],{"__ignoreMap":788},[792,4931,4932,4934,4936,4938,4940,4942,4945,4947],{"class":794,"line":795},[792,4933,1526],{"class":802},[792,4935,1529],{"class":972},[792,4937,1532],{"class":883},[792,4939,890],{"class":802},[792,4941,823],{"class":802},[792,4943,4944],{"class":819},"card _padding:lg",[792,4946,823],{"class":802},[792,4948,1555],{"class":802},[792,4950,4951,4953,4955,4957,4959,4961,4964,4966,4968,4971,4973,4975],{"class":794,"line":829},[792,4952,4387],{"class":802},[792,4954,707],{"class":972},[792,4956,1532],{"class":883},[792,4958,890],{"class":802},[792,4960,823],{"class":802},[792,4962,4963],{"class":819},"_margin-bottom:md",[792,4965,823],{"class":802},[792,4967,1544],{"class":802},[792,4969,4970],{"class":806},"Card Title",[792,4972,1550],{"class":802},[792,4974,707],{"class":972},[792,4976,1555],{"class":802},[792,4978,4979,4981,4983,4985,4988,4990,4992],{"class":794,"line":852},[792,4980,4387],{"class":802},[792,4982,711],{"class":972},[792,4984,1544],{"class":802},[792,4986,4987],{"class":806},"Card content goes here.",[792,4989,1550],{"class":802},[792,4991,711],{"class":972},[792,4993,1555],{"class":802},[792,4995,4996,4998,5000],{"class":794,"line":874},[792,4997,1550],{"class":802},[792,4999,1529],{"class":972},[792,5001,1555],{"class":802},[1678,5003,5005],{"id":5004},"centered-container-with-auto-margins","Centered Container with Auto Margins",[775,5007,5008,5163],{},[778,5009,5010],{"icon":780,"label":290},[782,5011,5013],{"className":784,"code":5012,"filename":786,"language":787,"meta":788,"style":788},"import { styleframe } from \"styleframe\";\nimport { useMarginInlineUtility, usePaddingInlineUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseMarginInlineUtility(s, { auto: 'auto' });\nusePaddingInlineUtility(s, { md: '1rem', lg: '2rem' });\n\nexport default s;\n",[702,5014,5015,5035,5061,5065,5079,5083,5109,5149,5153],{"__ignoreMap":788},[792,5016,5017,5019,5021,5023,5025,5027,5029,5031,5033],{"class":794,"line":795},[792,5018,799],{"class":798},[792,5020,803],{"class":802},[792,5022,807],{"class":806},[792,5024,810],{"class":802},[792,5026,813],{"class":798},[792,5028,816],{"class":802},[792,5030,820],{"class":819},[792,5032,823],{"class":802},[792,5034,826],{"class":802},[792,5036,5037,5039,5041,5044,5046,5049,5051,5053,5055,5057,5059],{"class":794,"line":829},[792,5038,799],{"class":798},[792,5040,803],{"class":802},[792,5042,5043],{"class":806}," useMarginInlineUtility",[792,5045,944],{"class":802},[792,5047,5048],{"class":806}," usePaddingInlineUtility",[792,5050,810],{"class":802},[792,5052,813],{"class":798},[792,5054,816],{"class":802},[792,5056,845],{"class":819},[792,5058,823],{"class":802},[792,5060,826],{"class":802},[792,5062,5063],{"class":794,"line":852},[792,5064,877],{"emptyLinePlaceholder":223},[792,5066,5067,5069,5071,5073,5075,5077],{"class":794,"line":874},[792,5068,884],{"class":883},[792,5070,887],{"class":806},[792,5072,890],{"class":802},[792,5074,807],{"class":893},[792,5076,896],{"class":806},[792,5078,826],{"class":802},[792,5080,5081],{"class":794,"line":880},[792,5082,877],{"emptyLinePlaceholder":223},[792,5084,5085,5087,5089,5091,5093,5095,5097,5099,5101,5103,5105,5107],{"class":794,"line":901},[792,5086,2523],{"class":893},[792,5088,961],{"class":806},[792,5090,944],{"class":802},[792,5092,803],{"class":802},[792,5094,2380],{"class":972},[792,5096,976],{"class":802},[792,5098,979],{"class":802},[792,5100,2125],{"class":819},[792,5102,985],{"class":802},[792,5104,810],{"class":802},[792,5106,1035],{"class":806},[792,5108,826],{"class":802},[792,5110,5111,5113,5115,5117,5119,5122,5124,5126,5128,5130,5132,5135,5137,5139,5141,5143,5145,5147],{"class":794,"line":922},[792,5112,3794],{"class":893},[792,5114,961],{"class":806},[792,5116,944],{"class":802},[792,5118,803],{"class":802},[792,5120,5121],{"class":972}," md",[792,5123,976],{"class":802},[792,5125,979],{"class":802},[792,5127,982],{"class":819},[792,5129,985],{"class":802},[792,5131,944],{"class":802},[792,5133,5134],{"class":972}," lg",[792,5136,976],{"class":802},[792,5138,979],{"class":802},[792,5140,2014],{"class":819},[792,5142,985],{"class":802},[792,5144,810],{"class":802},[792,5146,1035],{"class":806},[792,5148,826],{"class":802},[792,5150,5151],{"class":794,"line":927},[792,5152,877],{"emptyLinePlaceholder":223},[792,5154,5155,5157,5159,5161],{"class":794,"line":934},[792,5156,1174],{"class":798},[792,5158,1177],{"class":798},[792,5160,917],{"class":806},[792,5162,826],{"class":802},[778,5164,5165],{"icon":154,"label":326},[782,5166,5168],{"className":1186,"code":5167,"filename":1188,"language":1189,"meta":788,"style":788},"._margin-inline\\:auto { margin-left: auto; margin-right: auto; }\n\n._padding-inline\\:md { padding-left: 1rem; padding-right: 1rem; }\n._padding-inline\\:lg { padding-left: 2rem; padding-right: 2rem; }\n",[702,5169,5170,5200,5204,5237],{"__ignoreMap":788},[792,5171,5172,5174,5176,5178,5180,5182,5184,5186,5188,5190,5192,5194,5196,5198],{"class":794,"line":795},[792,5173,1255],{"class":802},[792,5175,2946],{"class":1258},[792,5177,1262],{"class":806},[792,5179,2125],{"class":1258},[792,5181,803],{"class":802},[792,5183,2955],{"class":1270},[792,5185,976],{"class":802},[792,5187,2380],{"class":806},[792,5189,2251],{"class":802},[792,5191,2964],{"class":1270},[792,5193,976],{"class":802},[792,5195,2380],{"class":806},[792,5197,2251],{"class":802},[792,5199,1288],{"class":802},[792,5201,5202],{"class":794,"line":829},[792,5203,877],{"emptyLinePlaceholder":223},[792,5205,5206,5208,5211,5213,5215,5217,5220,5222,5224,5226,5229,5231,5233,5235],{"class":794,"line":852},[792,5207,1255],{"class":802},[792,5209,5210],{"class":1258},"_padding-inline",[792,5212,1262],{"class":806},[792,5214,1299],{"class":1258},[792,5216,803],{"class":802},[792,5218,5219],{"class":1270}," padding-left",[792,5221,976],{"class":802},[792,5223,1211],{"class":1210},[792,5225,2251],{"class":802},[792,5227,5228],{"class":1270}," padding-right",[792,5230,976],{"class":802},[792,5232,1211],{"class":1210},[792,5234,2251],{"class":802},[792,5236,1288],{"class":802},[792,5238,5239,5241,5243,5245,5247,5249,5251,5253,5255,5257,5259,5261,5263,5265],{"class":794,"line":874},[792,5240,1255],{"class":802},[792,5242,5210],{"class":1258},[792,5244,1262],{"class":806},[792,5246,2316],{"class":1258},[792,5248,803],{"class":802},[792,5250,5219],{"class":1270},[792,5252,976],{"class":802},[792,5254,2219],{"class":1210},[792,5256,2251],{"class":802},[792,5258,5228],{"class":1270},[792,5260,976],{"class":802},[792,5262,2219],{"class":1210},[792,5264,2251],{"class":802},[792,5266,1288],{"class":802},[711,5268,4924],{},[782,5270,5272],{"className":1512,"code":5271,"language":1514,"meta":788,"style":788},"\u003Cdiv class=\"_margin-inline:auto _padding-inline:md\" style=\"max-width: 1200px;\">\n    Centered content with horizontal padding\n\u003C\u002Fdiv>\n",[702,5273,5274,5305,5310],{"__ignoreMap":788},[792,5275,5276,5278,5280,5282,5284,5286,5289,5291,5294,5296,5298,5301,5303],{"class":794,"line":795},[792,5277,1526],{"class":802},[792,5279,1529],{"class":972},[792,5281,1532],{"class":883},[792,5283,890],{"class":802},[792,5285,823],{"class":802},[792,5287,5288],{"class":819},"_margin-inline:auto _padding-inline:md",[792,5290,823],{"class":802},[792,5292,5293],{"class":883}," style",[792,5295,890],{"class":802},[792,5297,823],{"class":802},[792,5299,5300],{"class":819},"max-width: 1200px;",[792,5302,823],{"class":802},[792,5304,1555],{"class":802},[792,5306,5307],{"class":794,"line":829},[792,5308,5309],{"class":806},"    Centered content with horizontal padding\n",[792,5311,5312,5314,5316],{"class":794,"line":852},[792,5313,1550],{"class":802},[792,5315,1529],{"class":972},[792,5317,1555],{"class":802},[707,5319,5321],{"id":5320},"best-practices","Best Practices",[722,5323,5324,5334,5340,5349,5355],{},[725,5325,5326,5329,5330,5333],{},[692,5327,5328],{},"Use design tokens",": Reference your spacing scale with ",[702,5331,5332],{},"ref()"," for consistent spacing",[725,5335,5336,5339],{},[692,5337,5338],{},"Prefer gap over space utilities",": For flex\u002Fgrid, gap is cleaner and more predictable",[725,5341,5342,5345,5346,5348],{},[692,5343,5344],{},"Use logical properties for RTL",": ",[702,5347,2616],{}," adapts to text direction",[725,5350,5351,5354],{},[692,5352,5353],{},"Keep spacing scales consistent",": Use the same scale for both margin and padding",[725,5356,5357,5360],{},[692,5358,5359],{},"Avoid magic numbers",": Use named spacing values instead of arbitrary pixel values",[707,5362,5364],{"id":5363},"faq","FAQ",[5366,5367,5368,5374,5390,5398,5402],"accordion",{},[5369,5370,5373],"accordion-item",{"icon":5371,"label":5372},"i-lucide-circle-help","When should I use margin vs padding?","Use margin for space between elements and padding for space inside elements. Margins can collapse (vertically), while padding cannot. Use padding when you need the space to be part of the element's clickable area or background.",[5369,5375,5377,5380,5381,5383,5384,5386,5387,5389],{"icon":5371,"label":5376},"What's the difference between margin-inline and margin-x?",[702,5378,5379],{},"margin-inline"," uses CSS logical properties that adapt to text direction (LTR\u002FRTL). In LTR, ",[702,5382,2616],{}," equals ",[702,5385,2492],{},". In RTL, it equals ",[702,5388,2495],{},". Use logical properties for better internationalization support.",[5369,5391,5393,5394,5397],{"icon":5371,"label":5392},"Why might space utilities cause issues?","Space utilities use the ",[702,5395,5396],{},"* + *"," selector which adds margin to all children except the first. This can cause issues with hidden elements, dynamically rendered content, or when combined with other margin utilities. Gap utilities are generally more predictable.",[5369,5399,5401],{"icon":5371,"label":5400},"Can I use negative margins?","Yes, you can define negative margin values in your utility configuration. Negative margins are useful for pulling elements together or creating overlapping effects, but use them sparingly as they can make layouts harder to understand.",[5369,5403,5405,5406,5408,5409,1722,5411,5413,5414,5416,5417,5420,5421,5424],{"icon":5371,"label":5404},"How do multiplier values work?","Multiplier values use the ",[702,5407,1687],{}," prefix with a numeric value like ",[702,5410,1129],{},[702,5412,1138],{},", or ",[702,5415,1156],{},". These automatically generate ",[702,5418,5419],{},"calc(var(--spacing) * multiplier)"," expressions. Pass values as an array to the utility creator: ",[702,5422,5423],{},"createMargin([\"@1.5\", \"@2\", \"@-1\"])",". This is useful when you need spacing values that don't fit neatly into your named scale.",[5426,5427,5428],"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 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}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":788,"searchDepth":829,"depth":829,"links":5430},[5431,5432,5433,5436,5439,5442,5443,5447,5448],{"id":709,"depth":829,"text":78},{"id":716,"depth":829,"text":717},{"id":757,"depth":829,"text":758,"children":5434},[5435],{"id":1680,"depth":852,"text":1681},{"id":1789,"depth":829,"text":1769,"children":5437},[5438],{"id":2449,"depth":852,"text":2450},{"id":3150,"depth":829,"text":1772,"children":5440},[5441],{"id":3725,"depth":852,"text":3726},{"id":3900,"depth":829,"text":1775},{"id":4520,"depth":829,"text":4521,"children":5444},[5445,5446],{"id":4524,"depth":852,"text":4525},{"id":5004,"depth":852,"text":5005},{"id":5320,"depth":829,"text":5321},{"id":5363,"depth":829,"text":5364},"Create spacing utilities for margin and padding with directional variants and full type safety.",null,{},{"title":229,"icon":232},{"title":684,"description":5449},"gRbzbKsd_BohNroOQb0KSsdR56AUGHhc4dztviTOwG4",[5456,5458],{"title":606,"path":607,"stem":608,"description":5457,"icon":609,"children":-1},"Create sizing utilities for width, height, min\u002Fmax dimensions with full type safety.",{"title":614,"path":615,"stem":616,"description":5459,"icon":617,"children":-1},"Create SVG utilities for fill, stroke, and stroke-width with full type safety.",1781596353730]