[{"data":1,"prerenderedAt":4732},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-composables-layout":407,"-docs-theme-utilities-composables-layout-surround":4727},{"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":4719,"extension":4720,"links":4721,"meta":4722,"navigation":4723,"path":334,"seo":4724,"sitemap":4725,"stem":335,"__hash__":4726},"docs_theme/docs/theme/utilities/02.composables/08.layout.md","Layout Utilities",{"type":411,"value":412,"toc":4695},"minimark",[413,417,421,425,428,457,464,471,1035,1040,1177,1183,1186,1595,1601,1604,2297,2303,2322,2765,2771,2774,3275,3281,3284,3571,3575,3581,3584,3673,3679,3682,3787,3793,3796,3899,3905,3908,3963,3967,3971,4243,4246,4307,4311,4549,4551,4588,4592,4634,4638,4691],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"Layout utilities help you control how elements are displayed and positioned on the page including display types, positioning modes, overflow behavior, visibility, and z-index stacking.",[414,422,424],{"id":423},"why-use-layout-utilities","Why Use Layout Utilities?",[418,426,427],{},"Layout utilities help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Control element display",": Switch between block, flex, grid, and other display modes",[432,440,441,444],{},[435,442,443],{},"Manage positioning",": Control how elements are positioned in the document flow",[432,446,447,450],{},[435,448,449],{},"Handle overflow",": Manage content that exceeds element boundaries",[432,452,453,456],{},[435,454,455],{},"Control visibility",": Show or hide elements while managing their space",[414,458,460],{"id":459},"usedisplayutility",[461,462,463],"code",{},"useDisplayUtility",[418,465,466,467,470],{},"The ",[461,468,469],{},"useDisplayUtility()"," function creates utility classes for the display property with comprehensive defaults.",[472,473,474,616,933],"tabs",{},[475,476,479],"tabs-item",{"icon":477,"label":478},"i-lucide-code","Code",[480,481,487],"pre",{"className":482,"code":483,"filename":484,"language":485,"meta":486,"style":486},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useDisplayUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\n// Uses built-in defaults\nuseDisplayUtility(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[461,488,489,525,548,554,575,580,587,597,602],{"__ignoreMap":486},[490,491,494,498,502,506,509,512,515,519,522],"span",{"class":492,"line":493},"line",1,[490,495,497],{"class":496},"s7zQu","import",[490,499,501],{"class":500},"sMK4o"," {",[490,503,505],{"class":504},"sTEyZ"," styleframe",[490,507,508],{"class":500}," }",[490,510,511],{"class":496}," from",[490,513,514],{"class":500}," \"",[490,516,518],{"class":517},"sfazB","styleframe",[490,520,521],{"class":500},"\"",[490,523,524],{"class":500},";\n",[490,526,528,530,532,535,537,539,541,544,546],{"class":492,"line":527},2,[490,529,497],{"class":496},[490,531,501],{"class":500},[490,533,534],{"class":504}," useDisplayUtility",[490,536,508],{"class":500},[490,538,511],{"class":496},[490,540,514],{"class":500},[490,542,543],{"class":517},"@styleframe/theme",[490,545,521],{"class":500},[490,547,524],{"class":500},[490,549,551],{"class":492,"line":550},3,[490,552,553],{"emptyLinePlaceholder":206},"\n",[490,555,557,561,564,567,570,573],{"class":492,"line":556},4,[490,558,560],{"class":559},"spNyl","const",[490,562,563],{"class":504}," s ",[490,565,566],{"class":500},"=",[490,568,505],{"class":569},"s2Zo4",[490,571,572],{"class":504},"()",[490,574,524],{"class":500},[490,576,578],{"class":492,"line":577},5,[490,579,553],{"emptyLinePlaceholder":206},[490,581,583],{"class":492,"line":582},6,[490,584,586],{"class":585},"sHwdD","// Uses built-in defaults\n",[490,588,590,592,595],{"class":492,"line":589},7,[490,591,463],{"class":569},[490,593,594],{"class":504},"(s)",[490,596,524],{"class":500},[490,598,600],{"class":492,"line":599},8,[490,601,553],{"emptyLinePlaceholder":206},[490,603,605,608,611,614],{"class":492,"line":604},9,[490,606,607],{"class":496},"export",[490,609,610],{"class":496}," default",[490,612,613],{"class":504}," s",[490,615,524],{"class":500},[475,617,619],{"icon":140,"label":618},"Output",[480,620,625],{"className":621,"code":622,"filename":623,"language":624,"meta":486,"style":486},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._display\\:block { display: block; }\n._display\\:inline-block { display: inline-block; }\n._display\\:inline { display: inline; }\n._display\\:flex { display: flex; }\n._display\\:inline-flex { display: inline-flex; }\n._display\\:grid { display: grid; }\n._display\\:inline-grid { display: inline-grid; }\n._display\\:table { display: table; }\n._display\\:contents { display: contents; }\n._display\\:flow-root { display: flow-root; }\n._display\\:list-item { display: list-item; }\n._display\\:hidden { display: none; }\n/* ... more values */\n","styleframe/index.css","css",[461,626,627,660,684,708,732,756,780,804,828,852,877,902,927],{"__ignoreMap":486},[490,628,629,632,636,639,642,644,648,651,654,657],{"class":492,"line":493},[490,630,631],{"class":500},".",[490,633,635],{"class":634},"sBMFI","_display",[490,637,638],{"class":504},"\\:",[490,640,641],{"class":634},"block",[490,643,501],{"class":500},[490,645,647],{"class":646},"sqsOY"," display",[490,649,650],{"class":500},":",[490,652,653],{"class":504}," block",[490,655,656],{"class":500},";",[490,658,659],{"class":500}," }\n",[490,661,662,664,666,668,671,673,675,677,680,682],{"class":492,"line":527},[490,663,631],{"class":500},[490,665,635],{"class":634},[490,667,638],{"class":504},[490,669,670],{"class":634},"inline-block",[490,672,501],{"class":500},[490,674,647],{"class":646},[490,676,650],{"class":500},[490,678,679],{"class":504}," inline-block",[490,681,656],{"class":500},[490,683,659],{"class":500},[490,685,686,688,690,692,695,697,699,701,704,706],{"class":492,"line":550},[490,687,631],{"class":500},[490,689,635],{"class":634},[490,691,638],{"class":504},[490,693,694],{"class":634},"inline",[490,696,501],{"class":500},[490,698,647],{"class":646},[490,700,650],{"class":500},[490,702,703],{"class":504}," inline",[490,705,656],{"class":500},[490,707,659],{"class":500},[490,709,710,712,714,716,719,721,723,725,728,730],{"class":492,"line":556},[490,711,631],{"class":500},[490,713,635],{"class":634},[490,715,638],{"class":504},[490,717,718],{"class":634},"flex",[490,720,501],{"class":500},[490,722,647],{"class":646},[490,724,650],{"class":500},[490,726,727],{"class":504}," flex",[490,729,656],{"class":500},[490,731,659],{"class":500},[490,733,734,736,738,740,743,745,747,749,752,754],{"class":492,"line":577},[490,735,631],{"class":500},[490,737,635],{"class":634},[490,739,638],{"class":504},[490,741,742],{"class":634},"inline-flex",[490,744,501],{"class":500},[490,746,647],{"class":646},[490,748,650],{"class":500},[490,750,751],{"class":504}," inline-flex",[490,753,656],{"class":500},[490,755,659],{"class":500},[490,757,758,760,762,764,767,769,771,773,776,778],{"class":492,"line":582},[490,759,631],{"class":500},[490,761,635],{"class":634},[490,763,638],{"class":504},[490,765,766],{"class":634},"grid",[490,768,501],{"class":500},[490,770,647],{"class":646},[490,772,650],{"class":500},[490,774,775],{"class":504}," grid",[490,777,656],{"class":500},[490,779,659],{"class":500},[490,781,782,784,786,788,791,793,795,797,800,802],{"class":492,"line":589},[490,783,631],{"class":500},[490,785,635],{"class":634},[490,787,638],{"class":504},[490,789,790],{"class":634},"inline-grid",[490,792,501],{"class":500},[490,794,647],{"class":646},[490,796,650],{"class":500},[490,798,799],{"class":504}," inline-grid",[490,801,656],{"class":500},[490,803,659],{"class":500},[490,805,806,808,810,812,815,817,819,821,824,826],{"class":492,"line":599},[490,807,631],{"class":500},[490,809,635],{"class":634},[490,811,638],{"class":504},[490,813,814],{"class":634},"table",[490,816,501],{"class":500},[490,818,647],{"class":646},[490,820,650],{"class":500},[490,822,823],{"class":504}," table",[490,825,656],{"class":500},[490,827,659],{"class":500},[490,829,830,832,834,836,839,841,843,845,848,850],{"class":492,"line":604},[490,831,631],{"class":500},[490,833,635],{"class":634},[490,835,638],{"class":504},[490,837,838],{"class":634},"contents",[490,840,501],{"class":500},[490,842,647],{"class":646},[490,844,650],{"class":500},[490,846,847],{"class":504}," contents",[490,849,656],{"class":500},[490,851,659],{"class":500},[490,853,855,857,859,861,864,866,868,870,873,875],{"class":492,"line":854},10,[490,856,631],{"class":500},[490,858,635],{"class":634},[490,860,638],{"class":504},[490,862,863],{"class":634},"flow-root",[490,865,501],{"class":500},[490,867,647],{"class":646},[490,869,650],{"class":500},[490,871,872],{"class":504}," flow-root",[490,874,656],{"class":500},[490,876,659],{"class":500},[490,878,880,882,884,886,889,891,893,895,898,900],{"class":492,"line":879},11,[490,881,631],{"class":500},[490,883,635],{"class":634},[490,885,638],{"class":504},[490,887,888],{"class":634},"list-item",[490,890,501],{"class":500},[490,892,647],{"class":646},[490,894,650],{"class":500},[490,896,897],{"class":504}," list-item",[490,899,656],{"class":500},[490,901,659],{"class":500},[490,903,905,907,909,911,914,916,918,920,923,925],{"class":492,"line":904},12,[490,906,631],{"class":500},[490,908,635],{"class":634},[490,910,638],{"class":504},[490,912,913],{"class":634},"hidden",[490,915,501],{"class":500},[490,917,647],{"class":646},[490,919,650],{"class":500},[490,921,922],{"class":504}," none",[490,924,656],{"class":500},[490,926,659],{"class":500},[490,928,930],{"class":492,"line":929},13,[490,931,932],{"class":585},"/* ... more values */\n",[475,934,937],{"icon":935,"label":936},"i-lucide-layout","Usage",[480,938,942],{"className":939,"code":940,"language":941,"meta":486,"style":486},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"_display:flex\">Flex container\u003C/div>\n\u003Cdiv class=\"_display:grid\">Grid container\u003C/div>\n\u003Cdiv class=\"_display:hidden\">Hidden element\u003C/div>\n","html",[461,943,944,979,1007],{"__ignoreMap":486},[490,945,946,949,953,956,958,960,963,965,968,971,974,976],{"class":492,"line":493},[490,947,948],{"class":500},"\u003C",[490,950,952],{"class":951},"swJcz","div",[490,954,955],{"class":559}," class",[490,957,566],{"class":500},[490,959,521],{"class":500},[490,961,962],{"class":517},"_display:flex",[490,964,521],{"class":500},[490,966,967],{"class":500},">",[490,969,970],{"class":504},"Flex container",[490,972,973],{"class":500},"\u003C/",[490,975,952],{"class":951},[490,977,978],{"class":500},">\n",[490,980,981,983,985,987,989,991,994,996,998,1001,1003,1005],{"class":492,"line":527},[490,982,948],{"class":500},[490,984,952],{"class":951},[490,986,955],{"class":559},[490,988,566],{"class":500},[490,990,521],{"class":500},[490,992,993],{"class":517},"_display:grid",[490,995,521],{"class":500},[490,997,967],{"class":500},[490,999,1000],{"class":504},"Grid container",[490,1002,973],{"class":500},[490,1004,952],{"class":951},[490,1006,978],{"class":500},[490,1008,1009,1011,1013,1015,1017,1019,1022,1024,1026,1029,1031,1033],{"class":492,"line":550},[490,1010,948],{"class":500},[490,1012,952],{"class":951},[490,1014,955],{"class":559},[490,1016,566],{"class":500},[490,1018,521],{"class":500},[490,1020,1021],{"class":517},"_display:hidden",[490,1023,521],{"class":500},[490,1025,967],{"class":500},[490,1027,1028],{"class":504},"Hidden element",[490,1030,973],{"class":500},[490,1032,952],{"class":951},[490,1034,978],{"class":500},[1036,1037,1039],"h3",{"id":1038},"default-display-values","Default Display Values",[814,1041,1042,1058],{},[1043,1044,1045],"thead",{},[1046,1047,1048,1052,1055],"tr",{},[1049,1050,1051],"th",{},"Key",[1049,1053,1054],{},"Value",[1049,1056,1057],{},"Description",[1059,1060,1061,1075,1088,1101,1113,1126,1138,1151,1164],"tbody",{},[1046,1062,1063,1068,1072],{},[1064,1065,1066],"td",{},[461,1067,641],{},[1064,1069,1070],{},[461,1071,641],{},[1064,1073,1074],{},"Block-level element",[1046,1076,1077,1081,1085],{},[1064,1078,1079],{},[461,1080,670],{},[1064,1082,1083],{},[461,1084,670],{},[1064,1086,1087],{},"Inline with block properties",[1046,1089,1090,1094,1098],{},[1064,1091,1092],{},[461,1093,694],{},[1064,1095,1096],{},[461,1097,694],{},[1064,1099,1100],{},"Inline element",[1046,1102,1103,1107,1111],{},[1064,1104,1105],{},[461,1106,718],{},[1064,1108,1109],{},[461,1110,718],{},[1064,1112,970],{},[1046,1114,1115,1119,1123],{},[1064,1116,1117],{},[461,1118,742],{},[1064,1120,1121],{},[461,1122,742],{},[1064,1124,1125],{},"Inline flex container",[1046,1127,1128,1132,1136],{},[1064,1129,1130],{},[461,1131,766],{},[1064,1133,1134],{},[461,1135,766],{},[1064,1137,1000],{},[1046,1139,1140,1144,1148],{},[1064,1141,1142],{},[461,1143,790],{},[1064,1145,1146],{},[461,1147,790],{},[1064,1149,1150],{},"Inline grid container",[1046,1152,1153,1157,1162],{},[1064,1154,1155],{},[461,1156,913],{},[1064,1158,1159],{},[461,1160,1161],{},"none",[1064,1163,1028],{},[1046,1165,1166,1170,1174],{},[1064,1167,1168],{},[461,1169,838],{},[1064,1171,1172],{},[461,1173,838],{},[1064,1175,1176],{},"Remove element from box tree",[414,1178,1180],{"id":1179},"usepositionutility",[461,1181,1182],{},"usePositionUtility",[418,1184,1185],{},"Control how an element is positioned in the document.",[472,1187,1188,1379,1503],{},[475,1189,1190],{"icon":477,"label":478},[480,1191,1193],{"className":482,"code":1192,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { usePositionUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nusePositionUtility(s, {\n    static: 'static',\n    fixed: 'fixed',\n    absolute: 'absolute',\n    relative: 'relative',\n    sticky: 'sticky',\n});\n\nexport default s;\n",[461,1194,1195,1215,1236,1240,1254,1258,1271,1290,1306,1322,1338,1354,1364,1368],{"__ignoreMap":486},[490,1196,1197,1199,1201,1203,1205,1207,1209,1211,1213],{"class":492,"line":493},[490,1198,497],{"class":496},[490,1200,501],{"class":500},[490,1202,505],{"class":504},[490,1204,508],{"class":500},[490,1206,511],{"class":496},[490,1208,514],{"class":500},[490,1210,518],{"class":517},[490,1212,521],{"class":500},[490,1214,524],{"class":500},[490,1216,1217,1219,1221,1224,1226,1228,1230,1232,1234],{"class":492,"line":527},[490,1218,497],{"class":496},[490,1220,501],{"class":500},[490,1222,1223],{"class":504}," usePositionUtility",[490,1225,508],{"class":500},[490,1227,511],{"class":496},[490,1229,514],{"class":500},[490,1231,543],{"class":517},[490,1233,521],{"class":500},[490,1235,524],{"class":500},[490,1237,1238],{"class":492,"line":550},[490,1239,553],{"emptyLinePlaceholder":206},[490,1241,1242,1244,1246,1248,1250,1252],{"class":492,"line":556},[490,1243,560],{"class":559},[490,1245,563],{"class":504},[490,1247,566],{"class":500},[490,1249,505],{"class":569},[490,1251,572],{"class":504},[490,1253,524],{"class":500},[490,1255,1256],{"class":492,"line":577},[490,1257,553],{"emptyLinePlaceholder":206},[490,1259,1260,1262,1265,1268],{"class":492,"line":582},[490,1261,1182],{"class":569},[490,1263,1264],{"class":504},"(s",[490,1266,1267],{"class":500},",",[490,1269,1270],{"class":500}," {\n",[490,1272,1273,1276,1278,1281,1284,1287],{"class":492,"line":589},[490,1274,1275],{"class":951},"    static",[490,1277,650],{"class":500},[490,1279,1280],{"class":500}," '",[490,1282,1283],{"class":517},"static",[490,1285,1286],{"class":500},"'",[490,1288,1289],{"class":500},",\n",[490,1291,1292,1295,1297,1299,1302,1304],{"class":492,"line":599},[490,1293,1294],{"class":951},"    fixed",[490,1296,650],{"class":500},[490,1298,1280],{"class":500},[490,1300,1301],{"class":517},"fixed",[490,1303,1286],{"class":500},[490,1305,1289],{"class":500},[490,1307,1308,1311,1313,1315,1318,1320],{"class":492,"line":604},[490,1309,1310],{"class":951},"    absolute",[490,1312,650],{"class":500},[490,1314,1280],{"class":500},[490,1316,1317],{"class":517},"absolute",[490,1319,1286],{"class":500},[490,1321,1289],{"class":500},[490,1323,1324,1327,1329,1331,1334,1336],{"class":492,"line":854},[490,1325,1326],{"class":951},"    relative",[490,1328,650],{"class":500},[490,1330,1280],{"class":500},[490,1332,1333],{"class":517},"relative",[490,1335,1286],{"class":500},[490,1337,1289],{"class":500},[490,1339,1340,1343,1345,1347,1350,1352],{"class":492,"line":879},[490,1341,1342],{"class":951},"    sticky",[490,1344,650],{"class":500},[490,1346,1280],{"class":500},[490,1348,1349],{"class":517},"sticky",[490,1351,1286],{"class":500},[490,1353,1289],{"class":500},[490,1355,1356,1359,1362],{"class":492,"line":904},[490,1357,1358],{"class":500},"}",[490,1360,1361],{"class":504},")",[490,1363,524],{"class":500},[490,1365,1366],{"class":492,"line":929},[490,1367,553],{"emptyLinePlaceholder":206},[490,1369,1371,1373,1375,1377],{"class":492,"line":1370},14,[490,1372,607],{"class":496},[490,1374,610],{"class":496},[490,1376,613],{"class":504},[490,1378,524],{"class":500},[475,1380,1381],{"icon":140,"label":618},[480,1382,1384],{"className":621,"code":1383,"filename":623,"language":624,"meta":486,"style":486},"._position\\:static { position: static; }\n._position\\:fixed { position: fixed; }\n._position\\:absolute { position: absolute; }\n._position\\:relative { position: relative; }\n._position\\:sticky { position: sticky; }\n",[461,1385,1386,1411,1434,1457,1480],{"__ignoreMap":486},[490,1387,1388,1390,1393,1395,1397,1399,1402,1404,1407,1409],{"class":492,"line":493},[490,1389,631],{"class":500},[490,1391,1392],{"class":634},"_position",[490,1394,638],{"class":504},[490,1396,1283],{"class":634},[490,1398,501],{"class":500},[490,1400,1401],{"class":646}," position",[490,1403,650],{"class":500},[490,1405,1406],{"class":504}," static",[490,1408,656],{"class":500},[490,1410,659],{"class":500},[490,1412,1413,1415,1417,1419,1421,1423,1425,1427,1430,1432],{"class":492,"line":527},[490,1414,631],{"class":500},[490,1416,1392],{"class":634},[490,1418,638],{"class":504},[490,1420,1301],{"class":634},[490,1422,501],{"class":500},[490,1424,1401],{"class":646},[490,1426,650],{"class":500},[490,1428,1429],{"class":504}," fixed",[490,1431,656],{"class":500},[490,1433,659],{"class":500},[490,1435,1436,1438,1440,1442,1444,1446,1448,1450,1453,1455],{"class":492,"line":550},[490,1437,631],{"class":500},[490,1439,1392],{"class":634},[490,1441,638],{"class":504},[490,1443,1317],{"class":634},[490,1445,501],{"class":500},[490,1447,1401],{"class":646},[490,1449,650],{"class":500},[490,1451,1452],{"class":504}," absolute",[490,1454,656],{"class":500},[490,1456,659],{"class":500},[490,1458,1459,1461,1463,1465,1467,1469,1471,1473,1476,1478],{"class":492,"line":556},[490,1460,631],{"class":500},[490,1462,1392],{"class":634},[490,1464,638],{"class":504},[490,1466,1333],{"class":634},[490,1468,501],{"class":500},[490,1470,1401],{"class":646},[490,1472,650],{"class":500},[490,1474,1475],{"class":504}," relative",[490,1477,656],{"class":500},[490,1479,659],{"class":500},[490,1481,1482,1484,1486,1488,1490,1492,1494,1496,1499,1501],{"class":492,"line":577},[490,1483,631],{"class":500},[490,1485,1392],{"class":634},[490,1487,638],{"class":504},[490,1489,1349],{"class":634},[490,1491,501],{"class":500},[490,1493,1401],{"class":646},[490,1495,650],{"class":500},[490,1497,1498],{"class":504}," sticky",[490,1500,656],{"class":500},[490,1502,659],{"class":500},[475,1504,1505],{"icon":935,"label":936},[480,1506,1508],{"className":939,"code":1507,"language":941,"meta":486,"style":486},"\u003Cdiv class=\"_position:relative\">Relative container\u003C/div>\n\u003Cdiv class=\"_position:absolute\">Absolutely positioned\u003C/div>\n\u003Cheader class=\"_position:sticky\">Sticky header\u003C/header>\n",[461,1509,1510,1538,1566],{"__ignoreMap":486},[490,1511,1512,1514,1516,1518,1520,1522,1525,1527,1529,1532,1534,1536],{"class":492,"line":493},[490,1513,948],{"class":500},[490,1515,952],{"class":951},[490,1517,955],{"class":559},[490,1519,566],{"class":500},[490,1521,521],{"class":500},[490,1523,1524],{"class":517},"_position:relative",[490,1526,521],{"class":500},[490,1528,967],{"class":500},[490,1530,1531],{"class":504},"Relative container",[490,1533,973],{"class":500},[490,1535,952],{"class":951},[490,1537,978],{"class":500},[490,1539,1540,1542,1544,1546,1548,1550,1553,1555,1557,1560,1562,1564],{"class":492,"line":527},[490,1541,948],{"class":500},[490,1543,952],{"class":951},[490,1545,955],{"class":559},[490,1547,566],{"class":500},[490,1549,521],{"class":500},[490,1551,1552],{"class":517},"_position:absolute",[490,1554,521],{"class":500},[490,1556,967],{"class":500},[490,1558,1559],{"class":504},"Absolutely positioned",[490,1561,973],{"class":500},[490,1563,952],{"class":951},[490,1565,978],{"class":500},[490,1567,1568,1570,1573,1575,1577,1579,1582,1584,1586,1589,1591,1593],{"class":492,"line":550},[490,1569,948],{"class":500},[490,1571,1572],{"class":951},"header",[490,1574,955],{"class":559},[490,1576,566],{"class":500},[490,1578,521],{"class":500},[490,1580,1581],{"class":517},"_position:sticky",[490,1583,521],{"class":500},[490,1585,967],{"class":500},[490,1587,1588],{"class":504},"Sticky header",[490,1590,973],{"class":500},[490,1592,1572],{"class":951},[490,1594,978],{"class":500},[414,1596,1598],{"id":1597},"useinsetutility",[461,1599,1600],{},"useInsetUtility",[418,1602,1603],{},"Control the position of positioned elements.",[472,1605,1606,1961,2234],{},[475,1607,1608],{"icon":477,"label":478},[480,1609,1611],{"className":482,"code":1610,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useInsetUtility, useInsetXUtility, useInsetYUtility, useTopUtility, useRightUtility, useBottomUtility, useLeftUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst insetValues = {\n    '0': '0',\n    '1': '0.25rem',\n    '2': '0.5rem',\n    '4': '1rem',\n    auto: 'auto',\n    full: '100%',\n};\n\nuseInsetUtility(s, insetValues);   // All sides\nuseInsetXUtility(s, insetValues);  // Left and right\nuseInsetYUtility(s, insetValues);  // Top and bottom\nuseTopUtility(s, insetValues);\nuseRightUtility(s, insetValues);\nuseBottomUtility(s, insetValues);\nuseLeftUtility(s, insetValues);\n\nexport default s;\n",[461,1612,1613,1633,1684,1688,1702,1706,1717,1737,1757,1777,1797,1813,1829,1834,1838,1855,1872,1889,1903,1917,1931,1945,1950],{"__ignoreMap":486},[490,1614,1615,1617,1619,1621,1623,1625,1627,1629,1631],{"class":492,"line":493},[490,1616,497],{"class":496},[490,1618,501],{"class":500},[490,1620,505],{"class":504},[490,1622,508],{"class":500},[490,1624,511],{"class":496},[490,1626,514],{"class":500},[490,1628,518],{"class":517},[490,1630,521],{"class":500},[490,1632,524],{"class":500},[490,1634,1635,1637,1639,1642,1644,1647,1649,1652,1654,1657,1659,1662,1664,1667,1669,1672,1674,1676,1678,1680,1682],{"class":492,"line":527},[490,1636,497],{"class":496},[490,1638,501],{"class":500},[490,1640,1641],{"class":504}," useInsetUtility",[490,1643,1267],{"class":500},[490,1645,1646],{"class":504}," useInsetXUtility",[490,1648,1267],{"class":500},[490,1650,1651],{"class":504}," useInsetYUtility",[490,1653,1267],{"class":500},[490,1655,1656],{"class":504}," useTopUtility",[490,1658,1267],{"class":500},[490,1660,1661],{"class":504}," useRightUtility",[490,1663,1267],{"class":500},[490,1665,1666],{"class":504}," useBottomUtility",[490,1668,1267],{"class":500},[490,1670,1671],{"class":504}," useLeftUtility",[490,1673,508],{"class":500},[490,1675,511],{"class":496},[490,1677,514],{"class":500},[490,1679,543],{"class":517},[490,1681,521],{"class":500},[490,1683,524],{"class":500},[490,1685,1686],{"class":492,"line":550},[490,1687,553],{"emptyLinePlaceholder":206},[490,1689,1690,1692,1694,1696,1698,1700],{"class":492,"line":556},[490,1691,560],{"class":559},[490,1693,563],{"class":504},[490,1695,566],{"class":500},[490,1697,505],{"class":569},[490,1699,572],{"class":504},[490,1701,524],{"class":500},[490,1703,1704],{"class":492,"line":577},[490,1705,553],{"emptyLinePlaceholder":206},[490,1707,1708,1710,1713,1715],{"class":492,"line":582},[490,1709,560],{"class":559},[490,1711,1712],{"class":504}," insetValues ",[490,1714,566],{"class":500},[490,1716,1270],{"class":500},[490,1718,1719,1722,1725,1727,1729,1731,1733,1735],{"class":492,"line":589},[490,1720,1721],{"class":500},"    '",[490,1723,1724],{"class":951},"0",[490,1726,1286],{"class":500},[490,1728,650],{"class":500},[490,1730,1280],{"class":500},[490,1732,1724],{"class":517},[490,1734,1286],{"class":500},[490,1736,1289],{"class":500},[490,1738,1739,1741,1744,1746,1748,1750,1753,1755],{"class":492,"line":599},[490,1740,1721],{"class":500},[490,1742,1743],{"class":951},"1",[490,1745,1286],{"class":500},[490,1747,650],{"class":500},[490,1749,1280],{"class":500},[490,1751,1752],{"class":517},"0.25rem",[490,1754,1286],{"class":500},[490,1756,1289],{"class":500},[490,1758,1759,1761,1764,1766,1768,1770,1773,1775],{"class":492,"line":604},[490,1760,1721],{"class":500},[490,1762,1763],{"class":951},"2",[490,1765,1286],{"class":500},[490,1767,650],{"class":500},[490,1769,1280],{"class":500},[490,1771,1772],{"class":517},"0.5rem",[490,1774,1286],{"class":500},[490,1776,1289],{"class":500},[490,1778,1779,1781,1784,1786,1788,1790,1793,1795],{"class":492,"line":854},[490,1780,1721],{"class":500},[490,1782,1783],{"class":951},"4",[490,1785,1286],{"class":500},[490,1787,650],{"class":500},[490,1789,1280],{"class":500},[490,1791,1792],{"class":517},"1rem",[490,1794,1286],{"class":500},[490,1796,1289],{"class":500},[490,1798,1799,1802,1804,1806,1809,1811],{"class":492,"line":879},[490,1800,1801],{"class":951},"    auto",[490,1803,650],{"class":500},[490,1805,1280],{"class":500},[490,1807,1808],{"class":517},"auto",[490,1810,1286],{"class":500},[490,1812,1289],{"class":500},[490,1814,1815,1818,1820,1822,1825,1827],{"class":492,"line":904},[490,1816,1817],{"class":951},"    full",[490,1819,650],{"class":500},[490,1821,1280],{"class":500},[490,1823,1824],{"class":517},"100%",[490,1826,1286],{"class":500},[490,1828,1289],{"class":500},[490,1830,1831],{"class":492,"line":929},[490,1832,1833],{"class":500},"};\n",[490,1835,1836],{"class":492,"line":1370},[490,1837,553],{"emptyLinePlaceholder":206},[490,1839,1841,1843,1845,1847,1850,1852],{"class":492,"line":1840},15,[490,1842,1600],{"class":569},[490,1844,1264],{"class":504},[490,1846,1267],{"class":500},[490,1848,1849],{"class":504}," insetValues)",[490,1851,656],{"class":500},[490,1853,1854],{"class":585},"   // All sides\n",[490,1856,1858,1861,1863,1865,1867,1869],{"class":492,"line":1857},16,[490,1859,1860],{"class":569},"useInsetXUtility",[490,1862,1264],{"class":504},[490,1864,1267],{"class":500},[490,1866,1849],{"class":504},[490,1868,656],{"class":500},[490,1870,1871],{"class":585},"  // Left and right\n",[490,1873,1875,1878,1880,1882,1884,1886],{"class":492,"line":1874},17,[490,1876,1877],{"class":569},"useInsetYUtility",[490,1879,1264],{"class":504},[490,1881,1267],{"class":500},[490,1883,1849],{"class":504},[490,1885,656],{"class":500},[490,1887,1888],{"class":585},"  // Top and bottom\n",[490,1890,1892,1895,1897,1899,1901],{"class":492,"line":1891},18,[490,1893,1894],{"class":569},"useTopUtility",[490,1896,1264],{"class":504},[490,1898,1267],{"class":500},[490,1900,1849],{"class":504},[490,1902,524],{"class":500},[490,1904,1906,1909,1911,1913,1915],{"class":492,"line":1905},19,[490,1907,1908],{"class":569},"useRightUtility",[490,1910,1264],{"class":504},[490,1912,1267],{"class":500},[490,1914,1849],{"class":504},[490,1916,524],{"class":500},[490,1918,1920,1923,1925,1927,1929],{"class":492,"line":1919},20,[490,1921,1922],{"class":569},"useBottomUtility",[490,1924,1264],{"class":504},[490,1926,1267],{"class":500},[490,1928,1849],{"class":504},[490,1930,524],{"class":500},[490,1932,1934,1937,1939,1941,1943],{"class":492,"line":1933},21,[490,1935,1936],{"class":569},"useLeftUtility",[490,1938,1264],{"class":504},[490,1940,1267],{"class":500},[490,1942,1849],{"class":504},[490,1944,524],{"class":500},[490,1946,1948],{"class":492,"line":1947},22,[490,1949,553],{"emptyLinePlaceholder":206},[490,1951,1953,1955,1957,1959],{"class":492,"line":1952},23,[490,1954,607],{"class":496},[490,1956,610],{"class":496},[490,1958,613],{"class":504},[490,1960,524],{"class":500},[475,1962,1963],{"icon":140,"label":618},[480,1964,1966],{"className":621,"code":1965,"filename":623,"language":624,"meta":486,"style":486},"._inset\\:0 { inset: 0; }\n._inset\\:1 { inset: 0.25rem; }\n._inset\\:auto { inset: auto; }\n._inset\\:full { inset: 100%; }\n\n._inset-x\\:0 { left: 0; right: 0; }\n._inset-y\\:0 { top: 0; bottom: 0; }\n\n._top\\:0 { top: 0; }\n._right\\:0 { right: 0; }\n._bottom\\:0 { bottom: 0; }\n._left\\:0 { left: 0; }\n/* ... more values */\n",[461,1967,1968,1994,2017,2040,2064,2068,2101,2134,2138,2161,2184,2207,2230],{"__ignoreMap":486},[490,1969,1970,1972,1975,1977,1979,1981,1984,1986,1990,1992],{"class":492,"line":493},[490,1971,631],{"class":500},[490,1973,1974],{"class":634},"_inset",[490,1976,638],{"class":504},[490,1978,1724],{"class":634},[490,1980,501],{"class":500},[490,1982,1983],{"class":646}," inset",[490,1985,650],{"class":500},[490,1987,1989],{"class":1988},"sbssI"," 0",[490,1991,656],{"class":500},[490,1993,659],{"class":500},[490,1995,1996,1998,2000,2002,2004,2006,2008,2010,2013,2015],{"class":492,"line":527},[490,1997,631],{"class":500},[490,1999,1974],{"class":634},[490,2001,638],{"class":504},[490,2003,1743],{"class":634},[490,2005,501],{"class":500},[490,2007,1983],{"class":646},[490,2009,650],{"class":500},[490,2011,2012],{"class":1988}," 0.25rem",[490,2014,656],{"class":500},[490,2016,659],{"class":500},[490,2018,2019,2021,2023,2025,2027,2029,2031,2033,2036,2038],{"class":492,"line":550},[490,2020,631],{"class":500},[490,2022,1974],{"class":634},[490,2024,638],{"class":504},[490,2026,1808],{"class":634},[490,2028,501],{"class":500},[490,2030,1983],{"class":646},[490,2032,650],{"class":500},[490,2034,2035],{"class":504}," auto",[490,2037,656],{"class":500},[490,2039,659],{"class":500},[490,2041,2042,2044,2046,2048,2051,2053,2055,2057,2060,2062],{"class":492,"line":556},[490,2043,631],{"class":500},[490,2045,1974],{"class":634},[490,2047,638],{"class":504},[490,2049,2050],{"class":634},"full",[490,2052,501],{"class":500},[490,2054,1983],{"class":646},[490,2056,650],{"class":500},[490,2058,2059],{"class":1988}," 100%",[490,2061,656],{"class":500},[490,2063,659],{"class":500},[490,2065,2066],{"class":492,"line":577},[490,2067,553],{"emptyLinePlaceholder":206},[490,2069,2070,2072,2075,2077,2079,2081,2084,2086,2088,2090,2093,2095,2097,2099],{"class":492,"line":582},[490,2071,631],{"class":500},[490,2073,2074],{"class":634},"_inset-x",[490,2076,638],{"class":504},[490,2078,1724],{"class":634},[490,2080,501],{"class":500},[490,2082,2083],{"class":646}," left",[490,2085,650],{"class":500},[490,2087,1989],{"class":1988},[490,2089,656],{"class":500},[490,2091,2092],{"class":646}," right",[490,2094,650],{"class":500},[490,2096,1989],{"class":1988},[490,2098,656],{"class":500},[490,2100,659],{"class":500},[490,2102,2103,2105,2108,2110,2112,2114,2117,2119,2121,2123,2126,2128,2130,2132],{"class":492,"line":589},[490,2104,631],{"class":500},[490,2106,2107],{"class":634},"_inset-y",[490,2109,638],{"class":504},[490,2111,1724],{"class":634},[490,2113,501],{"class":500},[490,2115,2116],{"class":646}," top",[490,2118,650],{"class":500},[490,2120,1989],{"class":1988},[490,2122,656],{"class":500},[490,2124,2125],{"class":646}," bottom",[490,2127,650],{"class":500},[490,2129,1989],{"class":1988},[490,2131,656],{"class":500},[490,2133,659],{"class":500},[490,2135,2136],{"class":492,"line":599},[490,2137,553],{"emptyLinePlaceholder":206},[490,2139,2140,2142,2145,2147,2149,2151,2153,2155,2157,2159],{"class":492,"line":604},[490,2141,631],{"class":500},[490,2143,2144],{"class":634},"_top",[490,2146,638],{"class":504},[490,2148,1724],{"class":634},[490,2150,501],{"class":500},[490,2152,2116],{"class":646},[490,2154,650],{"class":500},[490,2156,1989],{"class":1988},[490,2158,656],{"class":500},[490,2160,659],{"class":500},[490,2162,2163,2165,2168,2170,2172,2174,2176,2178,2180,2182],{"class":492,"line":854},[490,2164,631],{"class":500},[490,2166,2167],{"class":634},"_right",[490,2169,638],{"class":504},[490,2171,1724],{"class":634},[490,2173,501],{"class":500},[490,2175,2092],{"class":646},[490,2177,650],{"class":500},[490,2179,1989],{"class":1988},[490,2181,656],{"class":500},[490,2183,659],{"class":500},[490,2185,2186,2188,2191,2193,2195,2197,2199,2201,2203,2205],{"class":492,"line":879},[490,2187,631],{"class":500},[490,2189,2190],{"class":634},"_bottom",[490,2192,638],{"class":504},[490,2194,1724],{"class":634},[490,2196,501],{"class":500},[490,2198,2125],{"class":646},[490,2200,650],{"class":500},[490,2202,1989],{"class":1988},[490,2204,656],{"class":500},[490,2206,659],{"class":500},[490,2208,2209,2211,2214,2216,2218,2220,2222,2224,2226,2228],{"class":492,"line":904},[490,2210,631],{"class":500},[490,2212,2213],{"class":634},"_left",[490,2215,638],{"class":504},[490,2217,1724],{"class":634},[490,2219,501],{"class":500},[490,2221,2083],{"class":646},[490,2223,650],{"class":500},[490,2225,1989],{"class":1988},[490,2227,656],{"class":500},[490,2229,659],{"class":500},[490,2231,2232],{"class":492,"line":929},[490,2233,932],{"class":585},[475,2235,2236],{"icon":935,"label":936},[480,2237,2239],{"className":939,"code":2238,"language":941,"meta":486,"style":486},"\u003Cdiv class=\"_position:absolute _inset:0\">Full coverage overlay\u003C/div>\n\u003Cdiv class=\"_position:absolute _top:0 _right:0\">Top-right positioned\u003C/div>\n",[461,2240,2241,2269],{"__ignoreMap":486},[490,2242,2243,2245,2247,2249,2251,2253,2256,2258,2260,2263,2265,2267],{"class":492,"line":493},[490,2244,948],{"class":500},[490,2246,952],{"class":951},[490,2248,955],{"class":559},[490,2250,566],{"class":500},[490,2252,521],{"class":500},[490,2254,2255],{"class":517},"_position:absolute _inset:0",[490,2257,521],{"class":500},[490,2259,967],{"class":500},[490,2261,2262],{"class":504},"Full coverage overlay",[490,2264,973],{"class":500},[490,2266,952],{"class":951},[490,2268,978],{"class":500},[490,2270,2271,2273,2275,2277,2279,2281,2284,2286,2288,2291,2293,2295],{"class":492,"line":527},[490,2272,948],{"class":500},[490,2274,952],{"class":951},[490,2276,955],{"class":559},[490,2278,566],{"class":500},[490,2280,521],{"class":500},[490,2282,2283],{"class":517},"_position:absolute _top:0 _right:0",[490,2285,521],{"class":500},[490,2287,967],{"class":500},[490,2289,2290],{"class":504},"Top-right positioned",[490,2292,973],{"class":500},[490,2294,952],{"class":951},[490,2296,978],{"class":500},[414,2298,2300],{"id":2299},"usezindexutility",[461,2301,2302],{},"useZIndexUtility",[418,2304,2305,2306,2310,2311,2314,2315,2318,2319,631],{},"Control the stacking order of elements. For a consistent stacking scale, use the ",[2307,2308,2309],"a",{"href":221},"z-index design tokens"," which provide semantic names like ",[461,2312,2313],{},"dropdown",", ",[461,2316,2317],{},"modal",", and ",[461,2320,2321],{},"toast",[472,2323,2324,2431,2673],{},[475,2325,2326],{"icon":477,"label":478},[480,2327,2329],{"className":482,"code":2328,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useZIndexUtility, zIndexValues } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\n// Use semantic z-index tokens\nuseZIndexUtility(s, zIndexValues);\n\nexport default s;\n",[461,2330,2331,2351,2377,2381,2395,2399,2404,2417,2421],{"__ignoreMap":486},[490,2332,2333,2335,2337,2339,2341,2343,2345,2347,2349],{"class":492,"line":493},[490,2334,497],{"class":496},[490,2336,501],{"class":500},[490,2338,505],{"class":504},[490,2340,508],{"class":500},[490,2342,511],{"class":496},[490,2344,514],{"class":500},[490,2346,518],{"class":517},[490,2348,521],{"class":500},[490,2350,524],{"class":500},[490,2352,2353,2355,2357,2360,2362,2365,2367,2369,2371,2373,2375],{"class":492,"line":527},[490,2354,497],{"class":496},[490,2356,501],{"class":500},[490,2358,2359],{"class":504}," useZIndexUtility",[490,2361,1267],{"class":500},[490,2363,2364],{"class":504}," zIndexValues",[490,2366,508],{"class":500},[490,2368,511],{"class":496},[490,2370,514],{"class":500},[490,2372,543],{"class":517},[490,2374,521],{"class":500},[490,2376,524],{"class":500},[490,2378,2379],{"class":492,"line":550},[490,2380,553],{"emptyLinePlaceholder":206},[490,2382,2383,2385,2387,2389,2391,2393],{"class":492,"line":556},[490,2384,560],{"class":559},[490,2386,563],{"class":504},[490,2388,566],{"class":500},[490,2390,505],{"class":569},[490,2392,572],{"class":504},[490,2394,524],{"class":500},[490,2396,2397],{"class":492,"line":577},[490,2398,553],{"emptyLinePlaceholder":206},[490,2400,2401],{"class":492,"line":582},[490,2402,2403],{"class":585},"// Use semantic z-index tokens\n",[490,2405,2406,2408,2410,2412,2415],{"class":492,"line":589},[490,2407,2302],{"class":569},[490,2409,1264],{"class":504},[490,2411,1267],{"class":500},[490,2413,2414],{"class":504}," zIndexValues)",[490,2416,524],{"class":500},[490,2418,2419],{"class":492,"line":599},[490,2420,553],{"emptyLinePlaceholder":206},[490,2422,2423,2425,2427,2429],{"class":492,"line":604},[490,2424,607],{"class":496},[490,2426,610],{"class":496},[490,2428,613],{"class":504},[490,2430,524],{"class":500},[475,2432,2433],{"icon":140,"label":618},[480,2434,2436],{"className":621,"code":2435,"filename":623,"language":624,"meta":486,"style":486},"._z-index\\:hide { z-index: -1; }\n._z-index\\:base { z-index: 0; }\n._z-index\\:dropdown { z-index: 100; }\n._z-index\\:sticky { z-index: 200; }\n._z-index\\:overlay { z-index: 300; }\n._z-index\\:modal { z-index: 400; }\n._z-index\\:popover { z-index: 500; }\n._z-index\\:toast { z-index: 600; }\n._z-index\\:max { z-index: 9999; }\n._z-index\\:auto { z-index: auto; }\n",[461,2437,2438,2464,2487,2510,2533,2557,2580,2604,2627,2651],{"__ignoreMap":486},[490,2439,2440,2442,2445,2447,2450,2452,2455,2457,2460,2462],{"class":492,"line":493},[490,2441,631],{"class":500},[490,2443,2444],{"class":634},"_z-index",[490,2446,638],{"class":504},[490,2448,2449],{"class":634},"hide",[490,2451,501],{"class":500},[490,2453,2454],{"class":646}," z-index",[490,2456,650],{"class":500},[490,2458,2459],{"class":1988}," -1",[490,2461,656],{"class":500},[490,2463,659],{"class":500},[490,2465,2466,2468,2470,2472,2475,2477,2479,2481,2483,2485],{"class":492,"line":527},[490,2467,631],{"class":500},[490,2469,2444],{"class":634},[490,2471,638],{"class":504},[490,2473,2474],{"class":634},"base",[490,2476,501],{"class":500},[490,2478,2454],{"class":646},[490,2480,650],{"class":500},[490,2482,1989],{"class":1988},[490,2484,656],{"class":500},[490,2486,659],{"class":500},[490,2488,2489,2491,2493,2495,2497,2499,2501,2503,2506,2508],{"class":492,"line":550},[490,2490,631],{"class":500},[490,2492,2444],{"class":634},[490,2494,638],{"class":504},[490,2496,2313],{"class":634},[490,2498,501],{"class":500},[490,2500,2454],{"class":646},[490,2502,650],{"class":500},[490,2504,2505],{"class":1988}," 100",[490,2507,656],{"class":500},[490,2509,659],{"class":500},[490,2511,2512,2514,2516,2518,2520,2522,2524,2526,2529,2531],{"class":492,"line":556},[490,2513,631],{"class":500},[490,2515,2444],{"class":634},[490,2517,638],{"class":504},[490,2519,1349],{"class":634},[490,2521,501],{"class":500},[490,2523,2454],{"class":646},[490,2525,650],{"class":500},[490,2527,2528],{"class":1988}," 200",[490,2530,656],{"class":500},[490,2532,659],{"class":500},[490,2534,2535,2537,2539,2541,2544,2546,2548,2550,2553,2555],{"class":492,"line":577},[490,2536,631],{"class":500},[490,2538,2444],{"class":634},[490,2540,638],{"class":504},[490,2542,2543],{"class":634},"overlay",[490,2545,501],{"class":500},[490,2547,2454],{"class":646},[490,2549,650],{"class":500},[490,2551,2552],{"class":1988}," 300",[490,2554,656],{"class":500},[490,2556,659],{"class":500},[490,2558,2559,2561,2563,2565,2567,2569,2571,2573,2576,2578],{"class":492,"line":582},[490,2560,631],{"class":500},[490,2562,2444],{"class":634},[490,2564,638],{"class":504},[490,2566,2317],{"class":634},[490,2568,501],{"class":500},[490,2570,2454],{"class":646},[490,2572,650],{"class":500},[490,2574,2575],{"class":1988}," 400",[490,2577,656],{"class":500},[490,2579,659],{"class":500},[490,2581,2582,2584,2586,2588,2591,2593,2595,2597,2600,2602],{"class":492,"line":589},[490,2583,631],{"class":500},[490,2585,2444],{"class":634},[490,2587,638],{"class":504},[490,2589,2590],{"class":634},"popover",[490,2592,501],{"class":500},[490,2594,2454],{"class":646},[490,2596,650],{"class":500},[490,2598,2599],{"class":1988}," 500",[490,2601,656],{"class":500},[490,2603,659],{"class":500},[490,2605,2606,2608,2610,2612,2614,2616,2618,2620,2623,2625],{"class":492,"line":599},[490,2607,631],{"class":500},[490,2609,2444],{"class":634},[490,2611,638],{"class":504},[490,2613,2321],{"class":634},[490,2615,501],{"class":500},[490,2617,2454],{"class":646},[490,2619,650],{"class":500},[490,2621,2622],{"class":1988}," 600",[490,2624,656],{"class":500},[490,2626,659],{"class":500},[490,2628,2629,2631,2633,2635,2638,2640,2642,2644,2647,2649],{"class":492,"line":604},[490,2630,631],{"class":500},[490,2632,2444],{"class":634},[490,2634,638],{"class":504},[490,2636,2637],{"class":634},"max",[490,2639,501],{"class":500},[490,2641,2454],{"class":646},[490,2643,650],{"class":500},[490,2645,2646],{"class":1988}," 9999",[490,2648,656],{"class":500},[490,2650,659],{"class":500},[490,2652,2653,2655,2657,2659,2661,2663,2665,2667,2669,2671],{"class":492,"line":854},[490,2654,631],{"class":500},[490,2656,2444],{"class":634},[490,2658,638],{"class":504},[490,2660,1808],{"class":634},[490,2662,501],{"class":500},[490,2664,2454],{"class":646},[490,2666,650],{"class":500},[490,2668,2035],{"class":504},[490,2670,656],{"class":500},[490,2672,659],{"class":500},[475,2674,2675],{"icon":935,"label":936},[480,2676,2678],{"className":939,"code":2677,"language":941,"meta":486,"style":486},"\u003Cnav class=\"_z-index:sticky\">Sticky navbar\u003C/nav>\n\u003Cdiv class=\"_z-index:modal\">Modal above navbar\u003C/div>\n\u003Cdiv class=\"_z-index:toast\">Toast above everything\u003C/div>\n",[461,2679,2680,2709,2737],{"__ignoreMap":486},[490,2681,2682,2684,2687,2689,2691,2693,2696,2698,2700,2703,2705,2707],{"class":492,"line":493},[490,2683,948],{"class":500},[490,2685,2686],{"class":951},"nav",[490,2688,955],{"class":559},[490,2690,566],{"class":500},[490,2692,521],{"class":500},[490,2694,2695],{"class":517},"_z-index:sticky",[490,2697,521],{"class":500},[490,2699,967],{"class":500},[490,2701,2702],{"class":504},"Sticky navbar",[490,2704,973],{"class":500},[490,2706,2686],{"class":951},[490,2708,978],{"class":500},[490,2710,2711,2713,2715,2717,2719,2721,2724,2726,2728,2731,2733,2735],{"class":492,"line":527},[490,2712,948],{"class":500},[490,2714,952],{"class":951},[490,2716,955],{"class":559},[490,2718,566],{"class":500},[490,2720,521],{"class":500},[490,2722,2723],{"class":517},"_z-index:modal",[490,2725,521],{"class":500},[490,2727,967],{"class":500},[490,2729,2730],{"class":504},"Modal above navbar",[490,2732,973],{"class":500},[490,2734,952],{"class":951},[490,2736,978],{"class":500},[490,2738,2739,2741,2743,2745,2747,2749,2752,2754,2756,2759,2761,2763],{"class":492,"line":550},[490,2740,948],{"class":500},[490,2742,952],{"class":951},[490,2744,955],{"class":559},[490,2746,566],{"class":500},[490,2748,521],{"class":500},[490,2750,2751],{"class":517},"_z-index:toast",[490,2753,521],{"class":500},[490,2755,967],{"class":500},[490,2757,2758],{"class":504},"Toast above everything",[490,2760,973],{"class":500},[490,2762,952],{"class":951},[490,2764,978],{"class":500},[414,2766,2768],{"id":2767},"useoverflowutility",[461,2769,2770],{},"useOverflowUtility",[418,2772,2773],{},"Control how content overflows element boundaries.",[472,2775,2776,3005,3184],{},[475,2777,2778],{"icon":477,"label":478},[480,2779,2781],{"className":482,"code":2780,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useOverflowUtility, useOverflowXUtility, useOverflowYUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst overflowValues = {\n    auto: 'auto',\n    hidden: 'hidden',\n    clip: 'clip',\n    visible: 'visible',\n    scroll: 'scroll',\n};\n\nuseOverflowUtility(s, overflowValues);\nuseOverflowXUtility(s, overflowValues);\nuseOverflowYUtility(s, overflowValues);\n\nexport default s;\n",[461,2782,2783,2803,2834,2838,2852,2856,2867,2881,2896,2912,2928,2944,2948,2952,2965,2978,2991,2995],{"__ignoreMap":486},[490,2784,2785,2787,2789,2791,2793,2795,2797,2799,2801],{"class":492,"line":493},[490,2786,497],{"class":496},[490,2788,501],{"class":500},[490,2790,505],{"class":504},[490,2792,508],{"class":500},[490,2794,511],{"class":496},[490,2796,514],{"class":500},[490,2798,518],{"class":517},[490,2800,521],{"class":500},[490,2802,524],{"class":500},[490,2804,2805,2807,2809,2812,2814,2817,2819,2822,2824,2826,2828,2830,2832],{"class":492,"line":527},[490,2806,497],{"class":496},[490,2808,501],{"class":500},[490,2810,2811],{"class":504}," useOverflowUtility",[490,2813,1267],{"class":500},[490,2815,2816],{"class":504}," useOverflowXUtility",[490,2818,1267],{"class":500},[490,2820,2821],{"class":504}," useOverflowYUtility",[490,2823,508],{"class":500},[490,2825,511],{"class":496},[490,2827,514],{"class":500},[490,2829,543],{"class":517},[490,2831,521],{"class":500},[490,2833,524],{"class":500},[490,2835,2836],{"class":492,"line":550},[490,2837,553],{"emptyLinePlaceholder":206},[490,2839,2840,2842,2844,2846,2848,2850],{"class":492,"line":556},[490,2841,560],{"class":559},[490,2843,563],{"class":504},[490,2845,566],{"class":500},[490,2847,505],{"class":569},[490,2849,572],{"class":504},[490,2851,524],{"class":500},[490,2853,2854],{"class":492,"line":577},[490,2855,553],{"emptyLinePlaceholder":206},[490,2857,2858,2860,2863,2865],{"class":492,"line":582},[490,2859,560],{"class":559},[490,2861,2862],{"class":504}," overflowValues ",[490,2864,566],{"class":500},[490,2866,1270],{"class":500},[490,2868,2869,2871,2873,2875,2877,2879],{"class":492,"line":589},[490,2870,1801],{"class":951},[490,2872,650],{"class":500},[490,2874,1280],{"class":500},[490,2876,1808],{"class":517},[490,2878,1286],{"class":500},[490,2880,1289],{"class":500},[490,2882,2883,2886,2888,2890,2892,2894],{"class":492,"line":599},[490,2884,2885],{"class":951},"    hidden",[490,2887,650],{"class":500},[490,2889,1280],{"class":500},[490,2891,913],{"class":517},[490,2893,1286],{"class":500},[490,2895,1289],{"class":500},[490,2897,2898,2901,2903,2905,2908,2910],{"class":492,"line":604},[490,2899,2900],{"class":951},"    clip",[490,2902,650],{"class":500},[490,2904,1280],{"class":500},[490,2906,2907],{"class":517},"clip",[490,2909,1286],{"class":500},[490,2911,1289],{"class":500},[490,2913,2914,2917,2919,2921,2924,2926],{"class":492,"line":854},[490,2915,2916],{"class":951},"    visible",[490,2918,650],{"class":500},[490,2920,1280],{"class":500},[490,2922,2923],{"class":517},"visible",[490,2925,1286],{"class":500},[490,2927,1289],{"class":500},[490,2929,2930,2933,2935,2937,2940,2942],{"class":492,"line":879},[490,2931,2932],{"class":951},"    scroll",[490,2934,650],{"class":500},[490,2936,1280],{"class":500},[490,2938,2939],{"class":517},"scroll",[490,2941,1286],{"class":500},[490,2943,1289],{"class":500},[490,2945,2946],{"class":492,"line":904},[490,2947,1833],{"class":500},[490,2949,2950],{"class":492,"line":929},[490,2951,553],{"emptyLinePlaceholder":206},[490,2953,2954,2956,2958,2960,2963],{"class":492,"line":1370},[490,2955,2770],{"class":569},[490,2957,1264],{"class":504},[490,2959,1267],{"class":500},[490,2961,2962],{"class":504}," overflowValues)",[490,2964,524],{"class":500},[490,2966,2967,2970,2972,2974,2976],{"class":492,"line":1840},[490,2968,2969],{"class":569},"useOverflowXUtility",[490,2971,1264],{"class":504},[490,2973,1267],{"class":500},[490,2975,2962],{"class":504},[490,2977,524],{"class":500},[490,2979,2980,2983,2985,2987,2989],{"class":492,"line":1857},[490,2981,2982],{"class":569},"useOverflowYUtility",[490,2984,1264],{"class":504},[490,2986,1267],{"class":500},[490,2988,2962],{"class":504},[490,2990,524],{"class":500},[490,2992,2993],{"class":492,"line":1874},[490,2994,553],{"emptyLinePlaceholder":206},[490,2996,2997,2999,3001,3003],{"class":492,"line":1891},[490,2998,607],{"class":496},[490,3000,610],{"class":496},[490,3002,613],{"class":504},[490,3004,524],{"class":500},[475,3006,3007],{"icon":140,"label":618},[480,3008,3010],{"className":621,"code":3009,"filename":623,"language":624,"meta":486,"style":486},"._overflow\\:auto { overflow: auto; }\n._overflow\\:hidden { overflow: hidden; }\n._overflow\\:clip { overflow: clip; }\n._overflow\\:visible { overflow: visible; }\n._overflow\\:scroll { overflow: scroll; }\n\n._overflow-x\\:auto { overflow-x: auto; }\n._overflow-y\\:auto { overflow-y: auto; }\n/* ... more values */\n",[461,3011,3012,3036,3059,3082,3105,3128,3132,3156,3180],{"__ignoreMap":486},[490,3013,3014,3016,3019,3021,3023,3025,3028,3030,3032,3034],{"class":492,"line":493},[490,3015,631],{"class":500},[490,3017,3018],{"class":634},"_overflow",[490,3020,638],{"class":504},[490,3022,1808],{"class":634},[490,3024,501],{"class":500},[490,3026,3027],{"class":646}," overflow",[490,3029,650],{"class":500},[490,3031,2035],{"class":504},[490,3033,656],{"class":500},[490,3035,659],{"class":500},[490,3037,3038,3040,3042,3044,3046,3048,3050,3052,3055,3057],{"class":492,"line":527},[490,3039,631],{"class":500},[490,3041,3018],{"class":634},[490,3043,638],{"class":504},[490,3045,913],{"class":634},[490,3047,501],{"class":500},[490,3049,3027],{"class":646},[490,3051,650],{"class":500},[490,3053,3054],{"class":504}," hidden",[490,3056,656],{"class":500},[490,3058,659],{"class":500},[490,3060,3061,3063,3065,3067,3069,3071,3073,3075,3078,3080],{"class":492,"line":550},[490,3062,631],{"class":500},[490,3064,3018],{"class":634},[490,3066,638],{"class":504},[490,3068,2907],{"class":634},[490,3070,501],{"class":500},[490,3072,3027],{"class":646},[490,3074,650],{"class":500},[490,3076,3077],{"class":504}," clip",[490,3079,656],{"class":500},[490,3081,659],{"class":500},[490,3083,3084,3086,3088,3090,3092,3094,3096,3098,3101,3103],{"class":492,"line":556},[490,3085,631],{"class":500},[490,3087,3018],{"class":634},[490,3089,638],{"class":504},[490,3091,2923],{"class":634},[490,3093,501],{"class":500},[490,3095,3027],{"class":646},[490,3097,650],{"class":500},[490,3099,3100],{"class":504}," visible",[490,3102,656],{"class":500},[490,3104,659],{"class":500},[490,3106,3107,3109,3111,3113,3115,3117,3119,3121,3124,3126],{"class":492,"line":577},[490,3108,631],{"class":500},[490,3110,3018],{"class":634},[490,3112,638],{"class":504},[490,3114,2939],{"class":634},[490,3116,501],{"class":500},[490,3118,3027],{"class":646},[490,3120,650],{"class":500},[490,3122,3123],{"class":504}," scroll",[490,3125,656],{"class":500},[490,3127,659],{"class":500},[490,3129,3130],{"class":492,"line":582},[490,3131,553],{"emptyLinePlaceholder":206},[490,3133,3134,3136,3139,3141,3143,3145,3148,3150,3152,3154],{"class":492,"line":589},[490,3135,631],{"class":500},[490,3137,3138],{"class":634},"_overflow-x",[490,3140,638],{"class":504},[490,3142,1808],{"class":634},[490,3144,501],{"class":500},[490,3146,3147],{"class":646}," overflow-x",[490,3149,650],{"class":500},[490,3151,2035],{"class":504},[490,3153,656],{"class":500},[490,3155,659],{"class":500},[490,3157,3158,3160,3163,3165,3167,3169,3172,3174,3176,3178],{"class":492,"line":599},[490,3159,631],{"class":500},[490,3161,3162],{"class":634},"_overflow-y",[490,3164,638],{"class":504},[490,3166,1808],{"class":634},[490,3168,501],{"class":500},[490,3170,3171],{"class":646}," overflow-y",[490,3173,650],{"class":500},[490,3175,2035],{"class":504},[490,3177,656],{"class":500},[490,3179,659],{"class":500},[490,3181,3182],{"class":492,"line":604},[490,3183,932],{"class":585},[475,3185,3186],{"icon":935,"label":936},[480,3187,3189],{"className":939,"code":3188,"language":941,"meta":486,"style":486},"\u003Cdiv class=\"_overflow:hidden\">Clip overflow content\u003C/div>\n\u003Cdiv class=\"_overflow:auto\">Scrollable when needed\u003C/div>\n\u003Cdiv class=\"_overflow-x:auto _overflow-y:hidden\">Horizontal scroll only\u003C/div>\n",[461,3190,3191,3219,3247],{"__ignoreMap":486},[490,3192,3193,3195,3197,3199,3201,3203,3206,3208,3210,3213,3215,3217],{"class":492,"line":493},[490,3194,948],{"class":500},[490,3196,952],{"class":951},[490,3198,955],{"class":559},[490,3200,566],{"class":500},[490,3202,521],{"class":500},[490,3204,3205],{"class":517},"_overflow:hidden",[490,3207,521],{"class":500},[490,3209,967],{"class":500},[490,3211,3212],{"class":504},"Clip overflow content",[490,3214,973],{"class":500},[490,3216,952],{"class":951},[490,3218,978],{"class":500},[490,3220,3221,3223,3225,3227,3229,3231,3234,3236,3238,3241,3243,3245],{"class":492,"line":527},[490,3222,948],{"class":500},[490,3224,952],{"class":951},[490,3226,955],{"class":559},[490,3228,566],{"class":500},[490,3230,521],{"class":500},[490,3232,3233],{"class":517},"_overflow:auto",[490,3235,521],{"class":500},[490,3237,967],{"class":500},[490,3239,3240],{"class":504},"Scrollable when needed",[490,3242,973],{"class":500},[490,3244,952],{"class":951},[490,3246,978],{"class":500},[490,3248,3249,3251,3253,3255,3257,3259,3262,3264,3266,3269,3271,3273],{"class":492,"line":550},[490,3250,948],{"class":500},[490,3252,952],{"class":951},[490,3254,955],{"class":559},[490,3256,566],{"class":500},[490,3258,521],{"class":500},[490,3260,3261],{"class":517},"_overflow-x:auto _overflow-y:hidden",[490,3263,521],{"class":500},[490,3265,967],{"class":500},[490,3267,3268],{"class":504},"Horizontal scroll only",[490,3270,973],{"class":500},[490,3272,952],{"class":951},[490,3274,978],{"class":500},[414,3276,3278],{"id":3277},"usevisibilityutility",[461,3279,3280],{},"useVisibilityUtility",[418,3282,3283],{},"Control element visibility without affecting layout.",[472,3285,3286,3432,3508],{},[475,3287,3288],{"icon":477,"label":478},[480,3289,3291],{"className":482,"code":3290,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useVisibilityUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseVisibilityUtility(s, {\n    visible: 'visible',\n    hidden: 'hidden',\n    collapse: 'collapse',\n});\n\nexport default s;\n",[461,3292,3293,3313,3334,3338,3352,3356,3366,3380,3394,3410,3418,3422],{"__ignoreMap":486},[490,3294,3295,3297,3299,3301,3303,3305,3307,3309,3311],{"class":492,"line":493},[490,3296,497],{"class":496},[490,3298,501],{"class":500},[490,3300,505],{"class":504},[490,3302,508],{"class":500},[490,3304,511],{"class":496},[490,3306,514],{"class":500},[490,3308,518],{"class":517},[490,3310,521],{"class":500},[490,3312,524],{"class":500},[490,3314,3315,3317,3319,3322,3324,3326,3328,3330,3332],{"class":492,"line":527},[490,3316,497],{"class":496},[490,3318,501],{"class":500},[490,3320,3321],{"class":504}," useVisibilityUtility",[490,3323,508],{"class":500},[490,3325,511],{"class":496},[490,3327,514],{"class":500},[490,3329,543],{"class":517},[490,3331,521],{"class":500},[490,3333,524],{"class":500},[490,3335,3336],{"class":492,"line":550},[490,3337,553],{"emptyLinePlaceholder":206},[490,3339,3340,3342,3344,3346,3348,3350],{"class":492,"line":556},[490,3341,560],{"class":559},[490,3343,563],{"class":504},[490,3345,566],{"class":500},[490,3347,505],{"class":569},[490,3349,572],{"class":504},[490,3351,524],{"class":500},[490,3353,3354],{"class":492,"line":577},[490,3355,553],{"emptyLinePlaceholder":206},[490,3357,3358,3360,3362,3364],{"class":492,"line":582},[490,3359,3280],{"class":569},[490,3361,1264],{"class":504},[490,3363,1267],{"class":500},[490,3365,1270],{"class":500},[490,3367,3368,3370,3372,3374,3376,3378],{"class":492,"line":589},[490,3369,2916],{"class":951},[490,3371,650],{"class":500},[490,3373,1280],{"class":500},[490,3375,2923],{"class":517},[490,3377,1286],{"class":500},[490,3379,1289],{"class":500},[490,3381,3382,3384,3386,3388,3390,3392],{"class":492,"line":599},[490,3383,2885],{"class":951},[490,3385,650],{"class":500},[490,3387,1280],{"class":500},[490,3389,913],{"class":517},[490,3391,1286],{"class":500},[490,3393,1289],{"class":500},[490,3395,3396,3399,3401,3403,3406,3408],{"class":492,"line":604},[490,3397,3398],{"class":951},"    collapse",[490,3400,650],{"class":500},[490,3402,1280],{"class":500},[490,3404,3405],{"class":517},"collapse",[490,3407,1286],{"class":500},[490,3409,1289],{"class":500},[490,3411,3412,3414,3416],{"class":492,"line":854},[490,3413,1358],{"class":500},[490,3415,1361],{"class":504},[490,3417,524],{"class":500},[490,3419,3420],{"class":492,"line":879},[490,3421,553],{"emptyLinePlaceholder":206},[490,3423,3424,3426,3428,3430],{"class":492,"line":904},[490,3425,607],{"class":496},[490,3427,610],{"class":496},[490,3429,613],{"class":504},[490,3431,524],{"class":500},[475,3433,3434],{"icon":140,"label":618},[480,3435,3437],{"className":621,"code":3436,"filename":623,"language":624,"meta":486,"style":486},"._visibility\\:visible { visibility: visible; }\n._visibility\\:hidden { visibility: hidden; }\n._visibility\\:collapse { visibility: collapse; }\n",[461,3438,3439,3463,3485],{"__ignoreMap":486},[490,3440,3441,3443,3446,3448,3450,3452,3455,3457,3459,3461],{"class":492,"line":493},[490,3442,631],{"class":500},[490,3444,3445],{"class":634},"_visibility",[490,3447,638],{"class":504},[490,3449,2923],{"class":634},[490,3451,501],{"class":500},[490,3453,3454],{"class":646}," visibility",[490,3456,650],{"class":500},[490,3458,3100],{"class":504},[490,3460,656],{"class":500},[490,3462,659],{"class":500},[490,3464,3465,3467,3469,3471,3473,3475,3477,3479,3481,3483],{"class":492,"line":527},[490,3466,631],{"class":500},[490,3468,3445],{"class":634},[490,3470,638],{"class":504},[490,3472,913],{"class":634},[490,3474,501],{"class":500},[490,3476,3454],{"class":646},[490,3478,650],{"class":500},[490,3480,3054],{"class":504},[490,3482,656],{"class":500},[490,3484,659],{"class":500},[490,3486,3487,3489,3491,3493,3495,3497,3499,3501,3504,3506],{"class":492,"line":550},[490,3488,631],{"class":500},[490,3490,3445],{"class":634},[490,3492,638],{"class":504},[490,3494,3405],{"class":634},[490,3496,501],{"class":500},[490,3498,3454],{"class":646},[490,3500,650],{"class":500},[490,3502,3503],{"class":504}," collapse",[490,3505,656],{"class":500},[490,3507,659],{"class":500},[475,3509,3510],{"icon":935,"label":936},[480,3511,3513],{"className":939,"code":3512,"language":941,"meta":486,"style":486},"\u003Cdiv class=\"_visibility:hidden\">Hidden but takes up space\u003C/div>\n\u003Cdiv class=\"_visibility:visible\">Visible element\u003C/div>\n",[461,3514,3515,3543],{"__ignoreMap":486},[490,3516,3517,3519,3521,3523,3525,3527,3530,3532,3534,3537,3539,3541],{"class":492,"line":493},[490,3518,948],{"class":500},[490,3520,952],{"class":951},[490,3522,955],{"class":559},[490,3524,566],{"class":500},[490,3526,521],{"class":500},[490,3528,3529],{"class":517},"_visibility:hidden",[490,3531,521],{"class":500},[490,3533,967],{"class":500},[490,3535,3536],{"class":504},"Hidden but takes up space",[490,3538,973],{"class":500},[490,3540,952],{"class":951},[490,3542,978],{"class":500},[490,3544,3545,3547,3549,3551,3553,3555,3558,3560,3562,3565,3567,3569],{"class":492,"line":527},[490,3546,948],{"class":500},[490,3548,952],{"class":951},[490,3550,955],{"class":559},[490,3552,566],{"class":500},[490,3554,521],{"class":500},[490,3556,3557],{"class":517},"_visibility:visible",[490,3559,521],{"class":500},[490,3561,967],{"class":500},[490,3563,3564],{"class":504},"Visible element",[490,3566,973],{"class":500},[490,3568,952],{"class":951},[490,3570,978],{"class":500},[414,3572,3574],{"id":3573},"more-layout-utilities","More Layout Utilities",[1036,3576,3578],{"id":3577},"useaspectratioutility",[461,3579,3580],{},"useAspectRatioUtility",[418,3582,3583],{},"Set aspect ratios for elements.",[480,3585,3587],{"className":482,"code":3586,"language":485,"meta":486,"style":486},"useAspectRatioUtility(s, {\n    auto: 'auto',\n    square: '1 / 1',\n    video: '16 / 9',\n    '4/3': '4 / 3',\n});\n",[461,3588,3589,3599,3613,3629,3645,3665],{"__ignoreMap":486},[490,3590,3591,3593,3595,3597],{"class":492,"line":493},[490,3592,3580],{"class":569},[490,3594,1264],{"class":504},[490,3596,1267],{"class":500},[490,3598,1270],{"class":500},[490,3600,3601,3603,3605,3607,3609,3611],{"class":492,"line":527},[490,3602,1801],{"class":951},[490,3604,650],{"class":500},[490,3606,1280],{"class":500},[490,3608,1808],{"class":517},[490,3610,1286],{"class":500},[490,3612,1289],{"class":500},[490,3614,3615,3618,3620,3622,3625,3627],{"class":492,"line":550},[490,3616,3617],{"class":951},"    square",[490,3619,650],{"class":500},[490,3621,1280],{"class":500},[490,3623,3624],{"class":517},"1 / 1",[490,3626,1286],{"class":500},[490,3628,1289],{"class":500},[490,3630,3631,3634,3636,3638,3641,3643],{"class":492,"line":556},[490,3632,3633],{"class":951},"    video",[490,3635,650],{"class":500},[490,3637,1280],{"class":500},[490,3639,3640],{"class":517},"16 / 9",[490,3642,1286],{"class":500},[490,3644,1289],{"class":500},[490,3646,3647,3649,3652,3654,3656,3658,3661,3663],{"class":492,"line":577},[490,3648,1721],{"class":500},[490,3650,3651],{"class":951},"4/3",[490,3653,1286],{"class":500},[490,3655,650],{"class":500},[490,3657,1280],{"class":500},[490,3659,3660],{"class":517},"4 / 3",[490,3662,1286],{"class":500},[490,3664,1289],{"class":500},[490,3666,3667,3669,3671],{"class":492,"line":582},[490,3668,1358],{"class":500},[490,3670,1361],{"class":504},[490,3672,524],{"class":500},[1036,3674,3676],{"id":3675},"useobjectfitutility",[461,3677,3678],{},"useObjectFitUtility",[418,3680,3681],{},"Control how replaced elements (images, videos) fit their container.",[480,3683,3685],{"className":482,"code":3684,"language":485,"meta":486,"style":486},"useObjectFitUtility(s, {\n    contain: 'contain',\n    cover: 'cover',\n    fill: 'fill',\n    none: 'none',\n    'scale-down': 'scale-down',\n});\n",[461,3686,3687,3697,3713,3729,3745,3760,3779],{"__ignoreMap":486},[490,3688,3689,3691,3693,3695],{"class":492,"line":493},[490,3690,3678],{"class":569},[490,3692,1264],{"class":504},[490,3694,1267],{"class":500},[490,3696,1270],{"class":500},[490,3698,3699,3702,3704,3706,3709,3711],{"class":492,"line":527},[490,3700,3701],{"class":951},"    contain",[490,3703,650],{"class":500},[490,3705,1280],{"class":500},[490,3707,3708],{"class":517},"contain",[490,3710,1286],{"class":500},[490,3712,1289],{"class":500},[490,3714,3715,3718,3720,3722,3725,3727],{"class":492,"line":550},[490,3716,3717],{"class":951},"    cover",[490,3719,650],{"class":500},[490,3721,1280],{"class":500},[490,3723,3724],{"class":517},"cover",[490,3726,1286],{"class":500},[490,3728,1289],{"class":500},[490,3730,3731,3734,3736,3738,3741,3743],{"class":492,"line":556},[490,3732,3733],{"class":951},"    fill",[490,3735,650],{"class":500},[490,3737,1280],{"class":500},[490,3739,3740],{"class":517},"fill",[490,3742,1286],{"class":500},[490,3744,1289],{"class":500},[490,3746,3747,3750,3752,3754,3756,3758],{"class":492,"line":577},[490,3748,3749],{"class":951},"    none",[490,3751,650],{"class":500},[490,3753,1280],{"class":500},[490,3755,1161],{"class":517},[490,3757,1286],{"class":500},[490,3759,1289],{"class":500},[490,3761,3762,3764,3767,3769,3771,3773,3775,3777],{"class":492,"line":582},[490,3763,1721],{"class":500},[490,3765,3766],{"class":951},"scale-down",[490,3768,1286],{"class":500},[490,3770,650],{"class":500},[490,3772,1280],{"class":500},[490,3774,3766],{"class":517},[490,3776,1286],{"class":500},[490,3778,1289],{"class":500},[490,3780,3781,3783,3785],{"class":492,"line":589},[490,3782,1358],{"class":500},[490,3784,1361],{"class":504},[490,3786,524],{"class":500},[1036,3788,3790],{"id":3789},"useobjectpositionutility",[461,3791,3792],{},"useObjectPositionUtility",[418,3794,3795],{},"Control the position of replaced elements within their container.",[480,3797,3799],{"className":482,"code":3798,"language":485,"meta":486,"style":486},"useObjectPositionUtility(s, {\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    right: 'right',\n    top: 'top',\n});\n",[461,3800,3801,3811,3827,3843,3859,3875,3891],{"__ignoreMap":486},[490,3802,3803,3805,3807,3809],{"class":492,"line":493},[490,3804,3792],{"class":569},[490,3806,1264],{"class":504},[490,3808,1267],{"class":500},[490,3810,1270],{"class":500},[490,3812,3813,3816,3818,3820,3823,3825],{"class":492,"line":527},[490,3814,3815],{"class":951},"    bottom",[490,3817,650],{"class":500},[490,3819,1280],{"class":500},[490,3821,3822],{"class":517},"bottom",[490,3824,1286],{"class":500},[490,3826,1289],{"class":500},[490,3828,3829,3832,3834,3836,3839,3841],{"class":492,"line":550},[490,3830,3831],{"class":951},"    center",[490,3833,650],{"class":500},[490,3835,1280],{"class":500},[490,3837,3838],{"class":517},"center",[490,3840,1286],{"class":500},[490,3842,1289],{"class":500},[490,3844,3845,3848,3850,3852,3855,3857],{"class":492,"line":556},[490,3846,3847],{"class":951},"    left",[490,3849,650],{"class":500},[490,3851,1280],{"class":500},[490,3853,3854],{"class":517},"left",[490,3856,1286],{"class":500},[490,3858,1289],{"class":500},[490,3860,3861,3864,3866,3868,3871,3873],{"class":492,"line":577},[490,3862,3863],{"class":951},"    right",[490,3865,650],{"class":500},[490,3867,1280],{"class":500},[490,3869,3870],{"class":517},"right",[490,3872,1286],{"class":500},[490,3874,1289],{"class":500},[490,3876,3877,3880,3882,3884,3887,3889],{"class":492,"line":582},[490,3878,3879],{"class":951},"    top",[490,3881,650],{"class":500},[490,3883,1280],{"class":500},[490,3885,3886],{"class":517},"top",[490,3888,1286],{"class":500},[490,3890,1289],{"class":500},[490,3892,3893,3895,3897],{"class":492,"line":589},[490,3894,1358],{"class":500},[490,3896,1361],{"class":504},[490,3898,524],{"class":500},[1036,3900,3902],{"id":3901},"useboxutility",[461,3903,3904],{},"useBoxUtility",[418,3906,3907],{},"Control box-sizing behavior.",[480,3909,3911],{"className":482,"code":3910,"language":485,"meta":486,"style":486},"useBoxUtility(s, {\n    border: 'border-box',\n    content: 'content-box',\n});\n",[461,3912,3913,3923,3939,3955],{"__ignoreMap":486},[490,3914,3915,3917,3919,3921],{"class":492,"line":493},[490,3916,3904],{"class":569},[490,3918,1264],{"class":504},[490,3920,1267],{"class":500},[490,3922,1270],{"class":500},[490,3924,3925,3928,3930,3932,3935,3937],{"class":492,"line":527},[490,3926,3927],{"class":951},"    border",[490,3929,650],{"class":500},[490,3931,1280],{"class":500},[490,3933,3934],{"class":517},"border-box",[490,3936,1286],{"class":500},[490,3938,1289],{"class":500},[490,3940,3941,3944,3946,3948,3951,3953],{"class":492,"line":550},[490,3942,3943],{"class":951},"    content",[490,3945,650],{"class":500},[490,3947,1280],{"class":500},[490,3949,3950],{"class":517},"content-box",[490,3952,1286],{"class":500},[490,3954,1289],{"class":500},[490,3956,3957,3959,3961],{"class":492,"line":556},[490,3958,1358],{"class":500},[490,3960,1361],{"class":504},[490,3962,524],{"class":500},[414,3964,3966],{"id":3965},"examples","Examples",[1036,3968,3970],{"id":3969},"modal-overlay","Modal Overlay",[472,3972,3973,4148],{},[475,3974,3975],{"icon":477,"label":478},[480,3976,3978],{"className":482,"code":3977,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useDisplayUtility, usePositionUtility, useInsetUtility, useZIndexUtility, zIndexValues } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseDisplayUtility(s);\nusePositionUtility(s, { fixed: 'fixed' });\nuseInsetUtility(s, { '0': '0' });\nuseZIndexUtility(s, zIndexValues);\n\nexport default s;\n",[461,3979,3980,4000,4036,4040,4054,4058,4066,4092,4122,4134,4138],{"__ignoreMap":486},[490,3981,3982,3984,3986,3988,3990,3992,3994,3996,3998],{"class":492,"line":493},[490,3983,497],{"class":496},[490,3985,501],{"class":500},[490,3987,505],{"class":504},[490,3989,508],{"class":500},[490,3991,511],{"class":496},[490,3993,514],{"class":500},[490,3995,518],{"class":517},[490,3997,521],{"class":500},[490,3999,524],{"class":500},[490,4001,4002,4004,4006,4008,4010,4012,4014,4016,4018,4020,4022,4024,4026,4028,4030,4032,4034],{"class":492,"line":527},[490,4003,497],{"class":496},[490,4005,501],{"class":500},[490,4007,534],{"class":504},[490,4009,1267],{"class":500},[490,4011,1223],{"class":504},[490,4013,1267],{"class":500},[490,4015,1641],{"class":504},[490,4017,1267],{"class":500},[490,4019,2359],{"class":504},[490,4021,1267],{"class":500},[490,4023,2364],{"class":504},[490,4025,508],{"class":500},[490,4027,511],{"class":496},[490,4029,514],{"class":500},[490,4031,543],{"class":517},[490,4033,521],{"class":500},[490,4035,524],{"class":500},[490,4037,4038],{"class":492,"line":550},[490,4039,553],{"emptyLinePlaceholder":206},[490,4041,4042,4044,4046,4048,4050,4052],{"class":492,"line":556},[490,4043,560],{"class":559},[490,4045,563],{"class":504},[490,4047,566],{"class":500},[490,4049,505],{"class":569},[490,4051,572],{"class":504},[490,4053,524],{"class":500},[490,4055,4056],{"class":492,"line":577},[490,4057,553],{"emptyLinePlaceholder":206},[490,4059,4060,4062,4064],{"class":492,"line":582},[490,4061,463],{"class":569},[490,4063,594],{"class":504},[490,4065,524],{"class":500},[490,4067,4068,4070,4072,4074,4076,4078,4080,4082,4084,4086,4088,4090],{"class":492,"line":589},[490,4069,1182],{"class":569},[490,4071,1264],{"class":504},[490,4073,1267],{"class":500},[490,4075,501],{"class":500},[490,4077,1429],{"class":951},[490,4079,650],{"class":500},[490,4081,1280],{"class":500},[490,4083,1301],{"class":517},[490,4085,1286],{"class":500},[490,4087,508],{"class":500},[490,4089,1361],{"class":504},[490,4091,524],{"class":500},[490,4093,4094,4096,4098,4100,4102,4104,4106,4108,4110,4112,4114,4116,4118,4120],{"class":492,"line":599},[490,4095,1600],{"class":569},[490,4097,1264],{"class":504},[490,4099,1267],{"class":500},[490,4101,501],{"class":500},[490,4103,1280],{"class":500},[490,4105,1724],{"class":951},[490,4107,1286],{"class":500},[490,4109,650],{"class":500},[490,4111,1280],{"class":500},[490,4113,1724],{"class":517},[490,4115,1286],{"class":500},[490,4117,508],{"class":500},[490,4119,1361],{"class":504},[490,4121,524],{"class":500},[490,4123,4124,4126,4128,4130,4132],{"class":492,"line":604},[490,4125,2302],{"class":569},[490,4127,1264],{"class":504},[490,4129,1267],{"class":500},[490,4131,2414],{"class":504},[490,4133,524],{"class":500},[490,4135,4136],{"class":492,"line":854},[490,4137,553],{"emptyLinePlaceholder":206},[490,4139,4140,4142,4144,4146],{"class":492,"line":879},[490,4141,607],{"class":496},[490,4143,610],{"class":496},[490,4145,613],{"class":504},[490,4147,524],{"class":500},[475,4149,4150],{"icon":140,"label":618},[480,4151,4153],{"className":621,"code":4152,"filename":623,"language":624,"meta":486,"style":486},"._display\\:flex { display: flex; }\n._position\\:fixed { position: fixed; }\n._inset\\:0 { inset: 0; }\n._z-index\\:modal { z-index: 400; }\n",[461,4154,4155,4177,4199,4221],{"__ignoreMap":486},[490,4156,4157,4159,4161,4163,4165,4167,4169,4171,4173,4175],{"class":492,"line":493},[490,4158,631],{"class":500},[490,4160,635],{"class":634},[490,4162,638],{"class":504},[490,4164,718],{"class":634},[490,4166,501],{"class":500},[490,4168,647],{"class":646},[490,4170,650],{"class":500},[490,4172,727],{"class":504},[490,4174,656],{"class":500},[490,4176,659],{"class":500},[490,4178,4179,4181,4183,4185,4187,4189,4191,4193,4195,4197],{"class":492,"line":527},[490,4180,631],{"class":500},[490,4182,1392],{"class":634},[490,4184,638],{"class":504},[490,4186,1301],{"class":634},[490,4188,501],{"class":500},[490,4190,1401],{"class":646},[490,4192,650],{"class":500},[490,4194,1429],{"class":504},[490,4196,656],{"class":500},[490,4198,659],{"class":500},[490,4200,4201,4203,4205,4207,4209,4211,4213,4215,4217,4219],{"class":492,"line":550},[490,4202,631],{"class":500},[490,4204,1974],{"class":634},[490,4206,638],{"class":504},[490,4208,1724],{"class":634},[490,4210,501],{"class":500},[490,4212,1983],{"class":646},[490,4214,650],{"class":500},[490,4216,1989],{"class":1988},[490,4218,656],{"class":500},[490,4220,659],{"class":500},[490,4222,4223,4225,4227,4229,4231,4233,4235,4237,4239,4241],{"class":492,"line":556},[490,4224,631],{"class":500},[490,4226,2444],{"class":634},[490,4228,638],{"class":504},[490,4230,2317],{"class":634},[490,4232,501],{"class":500},[490,4234,2454],{"class":646},[490,4236,650],{"class":500},[490,4238,2575],{"class":1988},[490,4240,656],{"class":500},[490,4242,659],{"class":500},[418,4244,4245],{},"Usage in HTML:",[480,4247,4249],{"className":939,"code":4248,"language":941,"meta":486,"style":486},"\u003Cdiv class=\"_position:fixed _inset:0 _z-index:modal _display:flex\">\n    \u003Cdiv class=\"modal-content\">Modal content here\u003C/div>\n\u003C/div>\n",[461,4250,4251,4270,4299],{"__ignoreMap":486},[490,4252,4253,4255,4257,4259,4261,4263,4266,4268],{"class":492,"line":493},[490,4254,948],{"class":500},[490,4256,952],{"class":951},[490,4258,955],{"class":559},[490,4260,566],{"class":500},[490,4262,521],{"class":500},[490,4264,4265],{"class":517},"_position:fixed _inset:0 _z-index:modal _display:flex",[490,4267,521],{"class":500},[490,4269,978],{"class":500},[490,4271,4272,4275,4277,4279,4281,4283,4286,4288,4290,4293,4295,4297],{"class":492,"line":527},[490,4273,4274],{"class":500},"    \u003C",[490,4276,952],{"class":951},[490,4278,955],{"class":559},[490,4280,566],{"class":500},[490,4282,521],{"class":500},[490,4284,4285],{"class":517},"modal-content",[490,4287,521],{"class":500},[490,4289,967],{"class":500},[490,4291,4292],{"class":504},"Modal content here",[490,4294,973],{"class":500},[490,4296,952],{"class":951},[490,4298,978],{"class":500},[490,4300,4301,4303,4305],{"class":492,"line":550},[490,4302,973],{"class":500},[490,4304,952],{"class":951},[490,4306,978],{"class":500},[1036,4308,4310],{"id":4309},"sticky-header","Sticky Header",[472,4312,4313,4476],{},[475,4314,4315],{"icon":477,"label":478},[480,4316,4318],{"className":482,"code":4317,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { usePositionUtility, useTopUtility, useZIndexUtility, zIndexValues } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nusePositionUtility(s, { sticky: 'sticky' });\nuseTopUtility(s, { '0': '0' });\nuseZIndexUtility(s, zIndexValues);\n\nexport default s;\n",[461,4319,4320,4340,4372,4376,4390,4394,4420,4450,4462,4466],{"__ignoreMap":486},[490,4321,4322,4324,4326,4328,4330,4332,4334,4336,4338],{"class":492,"line":493},[490,4323,497],{"class":496},[490,4325,501],{"class":500},[490,4327,505],{"class":504},[490,4329,508],{"class":500},[490,4331,511],{"class":496},[490,4333,514],{"class":500},[490,4335,518],{"class":517},[490,4337,521],{"class":500},[490,4339,524],{"class":500},[490,4341,4342,4344,4346,4348,4350,4352,4354,4356,4358,4360,4362,4364,4366,4368,4370],{"class":492,"line":527},[490,4343,497],{"class":496},[490,4345,501],{"class":500},[490,4347,1223],{"class":504},[490,4349,1267],{"class":500},[490,4351,1656],{"class":504},[490,4353,1267],{"class":500},[490,4355,2359],{"class":504},[490,4357,1267],{"class":500},[490,4359,2364],{"class":504},[490,4361,508],{"class":500},[490,4363,511],{"class":496},[490,4365,514],{"class":500},[490,4367,543],{"class":517},[490,4369,521],{"class":500},[490,4371,524],{"class":500},[490,4373,4374],{"class":492,"line":550},[490,4375,553],{"emptyLinePlaceholder":206},[490,4377,4378,4380,4382,4384,4386,4388],{"class":492,"line":556},[490,4379,560],{"class":559},[490,4381,563],{"class":504},[490,4383,566],{"class":500},[490,4385,505],{"class":569},[490,4387,572],{"class":504},[490,4389,524],{"class":500},[490,4391,4392],{"class":492,"line":577},[490,4393,553],{"emptyLinePlaceholder":206},[490,4395,4396,4398,4400,4402,4404,4406,4408,4410,4412,4414,4416,4418],{"class":492,"line":582},[490,4397,1182],{"class":569},[490,4399,1264],{"class":504},[490,4401,1267],{"class":500},[490,4403,501],{"class":500},[490,4405,1498],{"class":951},[490,4407,650],{"class":500},[490,4409,1280],{"class":500},[490,4411,1349],{"class":517},[490,4413,1286],{"class":500},[490,4415,508],{"class":500},[490,4417,1361],{"class":504},[490,4419,524],{"class":500},[490,4421,4422,4424,4426,4428,4430,4432,4434,4436,4438,4440,4442,4444,4446,4448],{"class":492,"line":589},[490,4423,1894],{"class":569},[490,4425,1264],{"class":504},[490,4427,1267],{"class":500},[490,4429,501],{"class":500},[490,4431,1280],{"class":500},[490,4433,1724],{"class":951},[490,4435,1286],{"class":500},[490,4437,650],{"class":500},[490,4439,1280],{"class":500},[490,4441,1724],{"class":517},[490,4443,1286],{"class":500},[490,4445,508],{"class":500},[490,4447,1361],{"class":504},[490,4449,524],{"class":500},[490,4451,4452,4454,4456,4458,4460],{"class":492,"line":599},[490,4453,2302],{"class":569},[490,4455,1264],{"class":504},[490,4457,1267],{"class":500},[490,4459,2414],{"class":504},[490,4461,524],{"class":500},[490,4463,4464],{"class":492,"line":604},[490,4465,553],{"emptyLinePlaceholder":206},[490,4467,4468,4470,4472,4474],{"class":492,"line":854},[490,4469,607],{"class":496},[490,4471,610],{"class":496},[490,4473,613],{"class":504},[490,4475,524],{"class":500},[475,4477,4478],{"icon":140,"label":618},[480,4479,4481],{"className":621,"code":4480,"filename":623,"language":624,"meta":486,"style":486},"._position\\:sticky { position: sticky; }\n._top\\:0 { top: 0; }\n._z-index\\:sticky { z-index: 200; }\n",[461,4482,4483,4505,4527],{"__ignoreMap":486},[490,4484,4485,4487,4489,4491,4493,4495,4497,4499,4501,4503],{"class":492,"line":493},[490,4486,631],{"class":500},[490,4488,1392],{"class":634},[490,4490,638],{"class":504},[490,4492,1349],{"class":634},[490,4494,501],{"class":500},[490,4496,1401],{"class":646},[490,4498,650],{"class":500},[490,4500,1498],{"class":504},[490,4502,656],{"class":500},[490,4504,659],{"class":500},[490,4506,4507,4509,4511,4513,4515,4517,4519,4521,4523,4525],{"class":492,"line":527},[490,4508,631],{"class":500},[490,4510,2144],{"class":634},[490,4512,638],{"class":504},[490,4514,1724],{"class":634},[490,4516,501],{"class":500},[490,4518,2116],{"class":646},[490,4520,650],{"class":500},[490,4522,1989],{"class":1988},[490,4524,656],{"class":500},[490,4526,659],{"class":500},[490,4528,4529,4531,4533,4535,4537,4539,4541,4543,4545,4547],{"class":492,"line":550},[490,4530,631],{"class":500},[490,4532,2444],{"class":634},[490,4534,638],{"class":504},[490,4536,1349],{"class":634},[490,4538,501],{"class":500},[490,4540,2454],{"class":646},[490,4542,650],{"class":500},[490,4544,2528],{"class":1988},[490,4546,656],{"class":500},[490,4548,659],{"class":500},[418,4550,4245],{},[480,4552,4554],{"className":939,"code":4553,"language":941,"meta":486,"style":486},"\u003Cheader class=\"_position:sticky _top:0 _z-index:sticky\">\n    Navigation content\n\u003C/header>\n",[461,4555,4556,4575,4580],{"__ignoreMap":486},[490,4557,4558,4560,4562,4564,4566,4568,4571,4573],{"class":492,"line":493},[490,4559,948],{"class":500},[490,4561,1572],{"class":951},[490,4563,955],{"class":559},[490,4565,566],{"class":500},[490,4567,521],{"class":500},[490,4569,4570],{"class":517},"_position:sticky _top:0 _z-index:sticky",[490,4572,521],{"class":500},[490,4574,978],{"class":500},[490,4576,4577],{"class":492,"line":527},[490,4578,4579],{"class":504},"    Navigation content\n",[490,4581,4582,4584,4586],{"class":492,"line":550},[490,4583,973],{"class":500},[490,4585,1572],{"class":951},[490,4587,978],{"class":500},[414,4589,4591],{"id":4590},"best-practices","Best Practices",[429,4593,4594,4600,4606,4619,4628],{},[432,4595,4596,4599],{},[435,4597,4598],{},"Use z-index sparingly",": Create a z-index scale and stick to it to avoid stacking conflicts",[432,4601,4602,4605],{},[435,4603,4604],{},"Prefer overflow-hidden for containers",": Prevents unexpected scrollbars and layout shifts",[432,4607,4608,4611,4612,2314,4615,4618],{},[435,4609,4610],{},"Use visibility for animations",": Unlike ",[461,4613,4614],{},"display: none",[461,4616,4617],{},"visibility: hidden"," can be animated",[432,4620,4621,4624,4625],{},[435,4622,4623],{},"Set box-sizing globally",": Most designs work better with ",[461,4626,4627],{},"box-sizing: border-box",[432,4629,4630,4633],{},[435,4631,4632],{},"Test overflow on all browsers",": Scrollbar behavior varies between browsers",[414,4635,4637],{"id":4636},"faq","FAQ",[4639,4640,4641,4652,4662,4676],"accordion",{},[4642,4643,4646,4648,4649,4651],"accordion-item",{"icon":4644,"label":4645},"i-lucide-circle-help","What's the difference between display: none and visibility: hidden?",[461,4647,4614],{}," removes the element from the layout entirely (no space is reserved). ",[461,4650,4617],{}," hides the element but still reserves its space in the layout. Use visibility when you need to animate the hide/show transition.",[4642,4653,4655,4656,4658,4659,4661],{"icon":4644,"label":4654},"When should I use position: sticky vs fixed?","Use ",[461,4657,1349],{}," when you want an element to scroll with the page until it reaches a certain point, then stick. Use ",[461,4660,1301],{}," when you want an element to always stay in the same viewport position regardless of scroll.",[4642,4663,4665,4668,4669,4672,4673,4675],{"icon":4644,"label":4664},"What's the difference between overflow: hidden and clip?",[461,4666,4667],{},"overflow: hidden"," hides overflow but allows programmatic scrolling. ",[461,4670,4671],{},"overflow: clip"," is stricter and prevents all scrolling, even programmatic. Use ",[461,4674,2907],{}," when you want to ensure no scrolling is possible.",[4642,4677,4655,4679,4682,4683,4686,4687,4690],{"icon":4644,"label":4678},"How do I center an absolute element?",[461,4680,4681],{},"inset: 0"," with ",[461,4684,4685],{},"margin: auto"," and explicit dimensions. Or use ",[461,4688,4689],{},"top: 50%; left: 50%; transform: translate(-50%, -50%)",". The first approach requires knowing dimensions; the second works with any size.",[4692,4693,4694],"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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":486,"searchDepth":527,"depth":527,"links":4696},[4697,4698,4699,4702,4703,4704,4705,4706,4707,4713,4717,4718],{"id":416,"depth":527,"text":64},{"id":423,"depth":527,"text":424},{"id":459,"depth":527,"text":463,"children":4700},[4701],{"id":1038,"depth":550,"text":1039},{"id":1179,"depth":527,"text":1182},{"id":1597,"depth":527,"text":1600},{"id":2299,"depth":527,"text":2302},{"id":2767,"depth":527,"text":2770},{"id":3277,"depth":527,"text":3280},{"id":3573,"depth":527,"text":3574,"children":4708},[4709,4710,4711,4712],{"id":3577,"depth":550,"text":3580},{"id":3675,"depth":550,"text":3678},{"id":3789,"depth":550,"text":3792},{"id":3901,"depth":550,"text":3904},{"id":3965,"depth":527,"text":3966,"children":4714},[4715,4716],{"id":3969,"depth":550,"text":3970},{"id":4309,"depth":550,"text":4310},{"id":4590,"depth":527,"text":4591},{"id":4636,"depth":527,"text":4637},"Create layout utilities for display, position, overflow, visibility, and more with full type safety.","md",null,{},{"title":333,"icon":7},{"title":409,"description":4719},{"loc":334},"aClVnp1yngFRUlRnOVtEelTboXVbbHZphI-BQzJ91eg",[4728,4730],{"title":329,"path":330,"stem":331,"description":4729,"icon":7,"children":-1},"Create interactivity utilities for cursor styles, pointer events, user selection, and scroll behavior with full type safety.",{"title":337,"path":338,"stem":339,"description":4731,"icon":7,"children":-1},"Create sizing utilities for width, height, min/max dimensions with full type safety.",1776621147974]