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