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