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