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