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