[{"data":1,"prerenderedAt":3976},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-breakpoints":682,"-docs-theme-design-tokens-breakpoints-surround":3971},{"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":3965,"extension":1151,"links":3966,"meta":3967,"navigation":3968,"path":191,"seo":3969,"stem":192,"__hash__":3970},"docs_theme\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints.md","Breakpoints Design Tokens",{"type":686,"value":687,"toc":3950},"minimark",[688,714,718,722,726,729,757,762,769,1134,1156,1178,1183,1186,1446,1450,1453,1771,1774,1778,1781,2445,2452,2456,2460,2463,2931,2935,2938,3834,3838,3885,3895,3899,3946],[689,690,691,695,696,700,701,705,706,709,710,713],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Design Tokens Preset:"," ",[697,698,699],"code",{},"useBreakpointDesignTokens"," is included in the ",[702,703,704],"a",{"href":171},"Design Tokens Preset"," (",[697,707,708],{},"useDesignTokensPreset",") and you can configure it through the preset's ",[697,711,712],{},"breakpoint"," option. For most projects, applying it via the preset is the recommended approach.",[715,716,78],"h2",{"id":717},"overview",[719,720,721],"p",{},"The breakpoint composable helps you create consistent responsive design systems with minimal code. It generates breakpoint variables that can be easily referenced in media queries throughout your application, enabling flexible theming and consistent responsive behavior across different screen sizes.",[715,723,725],{"id":724},"why-use-breakpoint-composables","Why use breakpoint composables?",[719,727,728],{},"Breakpoint composables help you:",[730,731,732,739,745,751],"ul",{},[733,734,735,738],"li",{},[692,736,737],{},"Centralize breakpoint values",": Define all your responsive breakpoints in one place for easy management.",[733,740,741,744],{},[692,742,743],{},"Enable flexible theming",": Override breakpoint values to instantly adjust responsive behavior across your application.",[733,746,747,750],{},[692,748,749],{},"Maintain consistency",": Use semantic names to ensure consistent breakpoint usage throughout your design system.",[733,752,753,756],{},[692,754,755],{},"Simplify media queries",": Reference breakpoint variables instead of hard-coding pixel values in every media query.",[715,758,760],{"id":759},"usebreakpointdesigntokens",[697,761,699],{},[719,763,764,765,768],{},"The ",[697,766,767],{},"useBreakpointDesignTokens()"," function creates a set of breakpoint variables from a simple object of breakpoint value definitions.",[770,771,772,1036],"tabs",{},[773,774,776],"tabs-item",{"icon":775,"label":290},"i-lucide-code",[777,778,784],"pre",{"className":779,"code":780,"filename":781,"language":782,"meta":783,"style":783},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F**\n * Use default breakpoint values\n * {\n *   xs: 0,\n *   sm: 576,\n *   md: 768,\n *   lg: 992,\n *   xl: 1200,\n *   '2xl': 1440,\n * }\n *\u002F\nconst {\n    breakpointXs,\n    breakpointSm,\n    breakpointMd,\n    breakpointLg,\n    breakpointXl,\n    breakpoint2xl,\n} = useBreakpointDesignTokens(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,785,786,822,845,851,872,877,884,890,896,902,908,914,920,926,932,938,944,952,961,969,977,985,993,1001,1017,1022],{"__ignoreMap":783},[787,788,791,795,799,803,806,809,812,816,819],"span",{"class":789,"line":790},"line",1,[787,792,794],{"class":793},"s7zQu","import",[787,796,798],{"class":797},"sMK4o"," {",[787,800,802],{"class":801},"sTEyZ"," styleframe",[787,804,805],{"class":797}," }",[787,807,808],{"class":793}," from",[787,810,811],{"class":797}," '",[787,813,815],{"class":814},"sfazB","styleframe",[787,817,818],{"class":797},"'",[787,820,821],{"class":797},";\n",[787,823,825,827,829,832,834,836,838,841,843],{"class":789,"line":824},2,[787,826,794],{"class":793},[787,828,798],{"class":797},[787,830,831],{"class":801}," useBreakpointDesignTokens",[787,833,805],{"class":797},[787,835,808],{"class":793},[787,837,811],{"class":797},[787,839,840],{"class":814},"@styleframe\u002Ftheme",[787,842,818],{"class":797},[787,844,821],{"class":797},[787,846,848],{"class":789,"line":847},3,[787,849,850],{"emptyLinePlaceholder":223},"\n",[787,852,854,858,861,864,867,870],{"class":789,"line":853},4,[787,855,857],{"class":856},"spNyl","const",[787,859,860],{"class":801}," s ",[787,862,863],{"class":797},"=",[787,865,802],{"class":866},"s2Zo4",[787,868,869],{"class":801},"()",[787,871,821],{"class":797},[787,873,875],{"class":789,"line":874},5,[787,876,850],{"emptyLinePlaceholder":223},[787,878,880],{"class":789,"line":879},6,[787,881,883],{"class":882},"sHwdD","\u002F**\n",[787,885,887],{"class":789,"line":886},7,[787,888,889],{"class":882}," * Use default breakpoint values\n",[787,891,893],{"class":789,"line":892},8,[787,894,895],{"class":882}," * {\n",[787,897,899],{"class":789,"line":898},9,[787,900,901],{"class":882}," *   xs: 0,\n",[787,903,905],{"class":789,"line":904},10,[787,906,907],{"class":882}," *   sm: 576,\n",[787,909,911],{"class":789,"line":910},11,[787,912,913],{"class":882}," *   md: 768,\n",[787,915,917],{"class":789,"line":916},12,[787,918,919],{"class":882}," *   lg: 992,\n",[787,921,923],{"class":789,"line":922},13,[787,924,925],{"class":882}," *   xl: 1200,\n",[787,927,929],{"class":789,"line":928},14,[787,930,931],{"class":882}," *   '2xl': 1440,\n",[787,933,935],{"class":789,"line":934},15,[787,936,937],{"class":882}," * }\n",[787,939,941],{"class":789,"line":940},16,[787,942,943],{"class":882}," *\u002F\n",[787,945,947,949],{"class":789,"line":946},17,[787,948,857],{"class":856},[787,950,951],{"class":797}," {\n",[787,953,955,958],{"class":789,"line":954},18,[787,956,957],{"class":801},"    breakpointXs",[787,959,960],{"class":797},",\n",[787,962,964,967],{"class":789,"line":963},19,[787,965,966],{"class":801},"    breakpointSm",[787,968,960],{"class":797},[787,970,972,975],{"class":789,"line":971},20,[787,973,974],{"class":801},"    breakpointMd",[787,976,960],{"class":797},[787,978,980,983],{"class":789,"line":979},21,[787,981,982],{"class":801},"    breakpointLg",[787,984,960],{"class":797},[787,986,988,991],{"class":789,"line":987},22,[787,989,990],{"class":801},"    breakpointXl",[787,992,960],{"class":797},[787,994,996,999],{"class":789,"line":995},23,[787,997,998],{"class":801},"    breakpoint2xl",[787,1000,960],{"class":797},[787,1002,1004,1007,1010,1012,1015],{"class":789,"line":1003},24,[787,1005,1006],{"class":797},"}",[787,1008,1009],{"class":797}," =",[787,1011,831],{"class":866},[787,1013,1014],{"class":801},"(s)",[787,1016,821],{"class":797},[787,1018,1020],{"class":789,"line":1019},25,[787,1021,850],{"emptyLinePlaceholder":223},[787,1023,1025,1028,1031,1034],{"class":789,"line":1024},26,[787,1026,1027],{"class":793},"export",[787,1029,1030],{"class":793}," default",[787,1032,1033],{"class":801}," s",[787,1035,821],{"class":797},[773,1037,1038],{"icon":154,"label":326},[777,1039,1044],{"className":1040,"code":1041,"filename":1042,"language":1043,"meta":783,"style":783},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --breakpoint--xs: 0;\n    --breakpoint--sm: 576;\n    --breakpoint--md: 768;\n    --breakpoint--lg: 992;\n    --breakpoint--xl: 1200;\n    --breakpoint--2xl: 1440;\n}\n","styleframe\u002Findex.css","css",[697,1045,1046,1056,1069,1081,1093,1105,1117,1129],{"__ignoreMap":783},[787,1047,1048,1051,1054],{"class":789,"line":790},[787,1049,1050],{"class":797},":",[787,1052,1053],{"class":856},"root",[787,1055,951],{"class":797},[787,1057,1058,1061,1063,1067],{"class":789,"line":824},[787,1059,1060],{"class":801},"    --breakpoint--xs",[787,1062,1050],{"class":797},[787,1064,1066],{"class":1065},"sbssI"," 0",[787,1068,821],{"class":797},[787,1070,1071,1074,1076,1079],{"class":789,"line":847},[787,1072,1073],{"class":801},"    --breakpoint--sm",[787,1075,1050],{"class":797},[787,1077,1078],{"class":1065}," 576",[787,1080,821],{"class":797},[787,1082,1083,1086,1088,1091],{"class":789,"line":853},[787,1084,1085],{"class":801},"    --breakpoint--md",[787,1087,1050],{"class":797},[787,1089,1090],{"class":1065}," 768",[787,1092,821],{"class":797},[787,1094,1095,1098,1100,1103],{"class":789,"line":874},[787,1096,1097],{"class":801},"    --breakpoint--lg",[787,1099,1050],{"class":797},[787,1101,1102],{"class":1065}," 992",[787,1104,821],{"class":797},[787,1106,1107,1110,1112,1115],{"class":789,"line":879},[787,1108,1109],{"class":801},"    --breakpoint--xl",[787,1111,1050],{"class":797},[787,1113,1114],{"class":1065}," 1200",[787,1116,821],{"class":797},[787,1118,1119,1122,1124,1127],{"class":789,"line":886},[787,1120,1121],{"class":801},"    --breakpoint--2xl",[787,1123,1050],{"class":797},[787,1125,1126],{"class":1065}," 1440",[787,1128,821],{"class":797},[787,1130,1131],{"class":789,"line":892},[787,1132,1133],{"class":797},"}\n",[719,1135,1136,1137,1140,1141,1144,1145,1148,1149,1144,1152,1155],{},"Each key in the object becomes a breakpoint variable with the prefix ",[697,1138,1139],{},"breakpoint--",", and the export name is automatically converted to camelCase (e.g., ",[697,1142,1143],{},"xs"," → ",[697,1146,1147],{},"breakpointXs",", ",[697,1150,1151],{},"md",[697,1153,1154],{},"breakpointMd",").",[1157,1158,1159,1162,1163,1148,1165,1148,1168,1148,1170,1173,1174,1177],"tip",{},[692,1160,1161],{},"Pro tip:"," Use semantic names like ",[697,1164,1143],{},[697,1166,1167],{},"sm",[697,1169,1151],{},[697,1171,1172],{},"lg",", and ",[697,1175,1176],{},"xl"," to create a consistent responsive system that's easy to understand and maintain across your application.",[1179,1180,1182],"h3",{"id":1181},"creating-custom-breakpoint-variables","Creating Custom Breakpoint Variables",[719,1184,1185],{},"You can provide your own custom breakpoint values to match your design system's needs.",[770,1187,1188,1383],{},[773,1189,1190],{"icon":775,"label":290},[777,1191,1193],{"className":779,"code":1192,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    breakpointMobile,\n    breakpointTablet,\n    breakpointLaptop,\n    breakpointDesktop,\n} = useBreakpointDesignTokens(s, {\n    mobile: 320,\n    tablet: 768,\n    laptop: 1024,\n    desktop: 1440,\n} as const);\n\nexport default s;\n",[697,1194,1195,1215,1235,1239,1253,1257,1263,1270,1277,1284,1291,1307,1320,1331,1343,1354,1369,1373],{"__ignoreMap":783},[787,1196,1197,1199,1201,1203,1205,1207,1209,1211,1213],{"class":789,"line":790},[787,1198,794],{"class":793},[787,1200,798],{"class":797},[787,1202,802],{"class":801},[787,1204,805],{"class":797},[787,1206,808],{"class":793},[787,1208,811],{"class":797},[787,1210,815],{"class":814},[787,1212,818],{"class":797},[787,1214,821],{"class":797},[787,1216,1217,1219,1221,1223,1225,1227,1229,1231,1233],{"class":789,"line":824},[787,1218,794],{"class":793},[787,1220,798],{"class":797},[787,1222,831],{"class":801},[787,1224,805],{"class":797},[787,1226,808],{"class":793},[787,1228,811],{"class":797},[787,1230,840],{"class":814},[787,1232,818],{"class":797},[787,1234,821],{"class":797},[787,1236,1237],{"class":789,"line":847},[787,1238,850],{"emptyLinePlaceholder":223},[787,1240,1241,1243,1245,1247,1249,1251],{"class":789,"line":853},[787,1242,857],{"class":856},[787,1244,860],{"class":801},[787,1246,863],{"class":797},[787,1248,802],{"class":866},[787,1250,869],{"class":801},[787,1252,821],{"class":797},[787,1254,1255],{"class":789,"line":874},[787,1256,850],{"emptyLinePlaceholder":223},[787,1258,1259,1261],{"class":789,"line":879},[787,1260,857],{"class":856},[787,1262,951],{"class":797},[787,1264,1265,1268],{"class":789,"line":886},[787,1266,1267],{"class":801},"    breakpointMobile",[787,1269,960],{"class":797},[787,1271,1272,1275],{"class":789,"line":892},[787,1273,1274],{"class":801},"    breakpointTablet",[787,1276,960],{"class":797},[787,1278,1279,1282],{"class":789,"line":898},[787,1280,1281],{"class":801},"    breakpointLaptop",[787,1283,960],{"class":797},[787,1285,1286,1289],{"class":789,"line":904},[787,1287,1288],{"class":801},"    breakpointDesktop",[787,1290,960],{"class":797},[787,1292,1293,1295,1297,1299,1302,1305],{"class":789,"line":910},[787,1294,1006],{"class":797},[787,1296,1009],{"class":797},[787,1298,831],{"class":866},[787,1300,1301],{"class":801},"(s",[787,1303,1304],{"class":797},",",[787,1306,951],{"class":797},[787,1308,1309,1313,1315,1318],{"class":789,"line":916},[787,1310,1312],{"class":1311},"swJcz","    mobile",[787,1314,1050],{"class":797},[787,1316,1317],{"class":1065}," 320",[787,1319,960],{"class":797},[787,1321,1322,1325,1327,1329],{"class":789,"line":922},[787,1323,1324],{"class":1311},"    tablet",[787,1326,1050],{"class":797},[787,1328,1090],{"class":1065},[787,1330,960],{"class":797},[787,1332,1333,1336,1338,1341],{"class":789,"line":928},[787,1334,1335],{"class":1311},"    laptop",[787,1337,1050],{"class":797},[787,1339,1340],{"class":1065}," 1024",[787,1342,960],{"class":797},[787,1344,1345,1348,1350,1352],{"class":789,"line":934},[787,1346,1347],{"class":1311},"    desktop",[787,1349,1050],{"class":797},[787,1351,1126],{"class":1065},[787,1353,960],{"class":797},[787,1355,1356,1358,1361,1364,1367],{"class":789,"line":940},[787,1357,1006],{"class":797},[787,1359,1360],{"class":793}," as",[787,1362,1363],{"class":856}," const",[787,1365,1366],{"class":801},")",[787,1368,821],{"class":797},[787,1370,1371],{"class":789,"line":946},[787,1372,850],{"emptyLinePlaceholder":223},[787,1374,1375,1377,1379,1381],{"class":789,"line":954},[787,1376,1027],{"class":793},[787,1378,1030],{"class":793},[787,1380,1033],{"class":801},[787,1382,821],{"class":797},[773,1384,1385],{"icon":154,"label":326},[777,1386,1388],{"className":1040,"code":1387,"filename":1042,"language":1043,"meta":783,"style":783},":root {\n    --breakpoint--mobile: 320;\n    --breakpoint--tablet: 768;\n    --breakpoint--laptop: 1024;\n    --breakpoint--desktop: 1440;\n}\n",[697,1389,1390,1398,1409,1420,1431,1442],{"__ignoreMap":783},[787,1391,1392,1394,1396],{"class":789,"line":790},[787,1393,1050],{"class":797},[787,1395,1053],{"class":856},[787,1397,951],{"class":797},[787,1399,1400,1403,1405,1407],{"class":789,"line":824},[787,1401,1402],{"class":801},"    --breakpoint--mobile",[787,1404,1050],{"class":797},[787,1406,1317],{"class":1065},[787,1408,821],{"class":797},[787,1410,1411,1414,1416,1418],{"class":789,"line":847},[787,1412,1413],{"class":801},"    --breakpoint--tablet",[787,1415,1050],{"class":797},[787,1417,1090],{"class":1065},[787,1419,821],{"class":797},[787,1421,1422,1425,1427,1429],{"class":789,"line":853},[787,1423,1424],{"class":801},"    --breakpoint--laptop",[787,1426,1050],{"class":797},[787,1428,1340],{"class":1065},[787,1430,821],{"class":797},[787,1432,1433,1436,1438,1440],{"class":789,"line":874},[787,1434,1435],{"class":801},"    --breakpoint--desktop",[787,1437,1050],{"class":797},[787,1439,1126],{"class":1065},[787,1441,821],{"class":797},[787,1443,1444],{"class":789,"line":879},[787,1445,1133],{"class":797},[1179,1447,1449],{"id":1448},"extending-the-default-breakpoint-variables","Extending the Default Breakpoint Variables",[719,1451,1452],{},"Styleframe provides default breakpoint values that you can import and use directly, so you don't have to manually define common breakpoint scales:",[770,1454,1455,1681],{},[773,1456,1457],{"icon":775,"label":290},[777,1458,1460],{"className":779,"code":1459,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens, defaultBreakpointValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F**\n * Use default breakpoint values\n * {\n *   xs: 0,\n *   sm: 576,\n *   md: 768,\n *   lg: 992,\n *   xl: 1200,\n *   '2xl': 1440,\n * }\n *\u002F\nconst {\n    breakpointXs,\n    breakpointSm,\n    breakpointMd,\n    breakpointLg,\n    breakpointXl,\n    breakpoint2xl,\n} = useBreakpointDesignTokens(s, {\n    ...defaultBreakpointValues,\n    '3xl': 1920,\n});\n\nexport default s;\n",[697,1461,1462,1482,1507,1511,1525,1529,1533,1537,1541,1545,1549,1553,1557,1561,1565,1569,1573,1579,1585,1591,1597,1603,1609,1615,1629,1639,1656,1665,1670],{"__ignoreMap":783},[787,1463,1464,1466,1468,1470,1472,1474,1476,1478,1480],{"class":789,"line":790},[787,1465,794],{"class":793},[787,1467,798],{"class":797},[787,1469,802],{"class":801},[787,1471,805],{"class":797},[787,1473,808],{"class":793},[787,1475,811],{"class":797},[787,1477,815],{"class":814},[787,1479,818],{"class":797},[787,1481,821],{"class":797},[787,1483,1484,1486,1488,1490,1492,1495,1497,1499,1501,1503,1505],{"class":789,"line":824},[787,1485,794],{"class":793},[787,1487,798],{"class":797},[787,1489,831],{"class":801},[787,1491,1304],{"class":797},[787,1493,1494],{"class":801}," defaultBreakpointValues",[787,1496,805],{"class":797},[787,1498,808],{"class":793},[787,1500,811],{"class":797},[787,1502,840],{"class":814},[787,1504,818],{"class":797},[787,1506,821],{"class":797},[787,1508,1509],{"class":789,"line":847},[787,1510,850],{"emptyLinePlaceholder":223},[787,1512,1513,1515,1517,1519,1521,1523],{"class":789,"line":853},[787,1514,857],{"class":856},[787,1516,860],{"class":801},[787,1518,863],{"class":797},[787,1520,802],{"class":866},[787,1522,869],{"class":801},[787,1524,821],{"class":797},[787,1526,1527],{"class":789,"line":874},[787,1528,850],{"emptyLinePlaceholder":223},[787,1530,1531],{"class":789,"line":879},[787,1532,883],{"class":882},[787,1534,1535],{"class":789,"line":886},[787,1536,889],{"class":882},[787,1538,1539],{"class":789,"line":892},[787,1540,895],{"class":882},[787,1542,1543],{"class":789,"line":898},[787,1544,901],{"class":882},[787,1546,1547],{"class":789,"line":904},[787,1548,907],{"class":882},[787,1550,1551],{"class":789,"line":910},[787,1552,913],{"class":882},[787,1554,1555],{"class":789,"line":916},[787,1556,919],{"class":882},[787,1558,1559],{"class":789,"line":922},[787,1560,925],{"class":882},[787,1562,1563],{"class":789,"line":928},[787,1564,931],{"class":882},[787,1566,1567],{"class":789,"line":934},[787,1568,937],{"class":882},[787,1570,1571],{"class":789,"line":940},[787,1572,943],{"class":882},[787,1574,1575,1577],{"class":789,"line":946},[787,1576,857],{"class":856},[787,1578,951],{"class":797},[787,1580,1581,1583],{"class":789,"line":954},[787,1582,957],{"class":801},[787,1584,960],{"class":797},[787,1586,1587,1589],{"class":789,"line":963},[787,1588,966],{"class":801},[787,1590,960],{"class":797},[787,1592,1593,1595],{"class":789,"line":971},[787,1594,974],{"class":801},[787,1596,960],{"class":797},[787,1598,1599,1601],{"class":789,"line":979},[787,1600,982],{"class":801},[787,1602,960],{"class":797},[787,1604,1605,1607],{"class":789,"line":987},[787,1606,990],{"class":801},[787,1608,960],{"class":797},[787,1610,1611,1613],{"class":789,"line":995},[787,1612,998],{"class":801},[787,1614,960],{"class":797},[787,1616,1617,1619,1621,1623,1625,1627],{"class":789,"line":1003},[787,1618,1006],{"class":797},[787,1620,1009],{"class":797},[787,1622,831],{"class":866},[787,1624,1301],{"class":801},[787,1626,1304],{"class":797},[787,1628,951],{"class":797},[787,1630,1631,1634,1637],{"class":789,"line":1019},[787,1632,1633],{"class":797},"    ...",[787,1635,1636],{"class":801},"defaultBreakpointValues",[787,1638,960],{"class":797},[787,1640,1641,1644,1647,1649,1651,1654],{"class":789,"line":1024},[787,1642,1643],{"class":797},"    '",[787,1645,1646],{"class":1311},"3xl",[787,1648,818],{"class":797},[787,1650,1050],{"class":797},[787,1652,1653],{"class":1065}," 1920",[787,1655,960],{"class":797},[787,1657,1659,1661,1663],{"class":789,"line":1658},27,[787,1660,1006],{"class":797},[787,1662,1366],{"class":801},[787,1664,821],{"class":797},[787,1666,1668],{"class":789,"line":1667},28,[787,1669,850],{"emptyLinePlaceholder":223},[787,1671,1673,1675,1677,1679],{"class":789,"line":1672},29,[787,1674,1027],{"class":793},[787,1676,1030],{"class":793},[787,1678,1033],{"class":801},[787,1680,821],{"class":797},[773,1682,1683],{"icon":154,"label":326},[777,1684,1686],{"className":1040,"code":1685,"filename":1042,"language":1043,"meta":783,"style":783},":root {\n    --breakpoint--xs: 0;\n    --breakpoint--sm: 576;\n    --breakpoint--md: 768;\n    --breakpoint--lg: 992;\n    --breakpoint--xl: 1200;\n    --breakpoint--2xl: 1440;\n    --breakpoint--3xl: 1920;\n}\n",[697,1687,1688,1696,1706,1716,1726,1736,1746,1756,1767],{"__ignoreMap":783},[787,1689,1690,1692,1694],{"class":789,"line":790},[787,1691,1050],{"class":797},[787,1693,1053],{"class":856},[787,1695,951],{"class":797},[787,1697,1698,1700,1702,1704],{"class":789,"line":824},[787,1699,1060],{"class":801},[787,1701,1050],{"class":797},[787,1703,1066],{"class":1065},[787,1705,821],{"class":797},[787,1707,1708,1710,1712,1714],{"class":789,"line":847},[787,1709,1073],{"class":801},[787,1711,1050],{"class":797},[787,1713,1078],{"class":1065},[787,1715,821],{"class":797},[787,1717,1718,1720,1722,1724],{"class":789,"line":853},[787,1719,1085],{"class":801},[787,1721,1050],{"class":797},[787,1723,1090],{"class":1065},[787,1725,821],{"class":797},[787,1727,1728,1730,1732,1734],{"class":789,"line":874},[787,1729,1097],{"class":801},[787,1731,1050],{"class":797},[787,1733,1102],{"class":1065},[787,1735,821],{"class":797},[787,1737,1738,1740,1742,1744],{"class":789,"line":879},[787,1739,1109],{"class":801},[787,1741,1050],{"class":797},[787,1743,1114],{"class":1065},[787,1745,821],{"class":797},[787,1747,1748,1750,1752,1754],{"class":789,"line":886},[787,1749,1121],{"class":801},[787,1751,1050],{"class":797},[787,1753,1126],{"class":1065},[787,1755,821],{"class":797},[787,1757,1758,1761,1763,1765],{"class":789,"line":892},[787,1759,1760],{"class":801},"    --breakpoint--3xl",[787,1762,1050],{"class":797},[787,1764,1653],{"class":1065},[787,1766,821],{"class":797},[787,1768,1769],{"class":789,"line":898},[787,1770,1133],{"class":797},[719,1772,1773],{},"Using these defaults ensures consistency across your project and reduces boilerplate code. You can always override them by passing your own custom values when needed.",[715,1775,1777],{"id":1776},"using-breakpoint-variables-in-media-queries","Using Breakpoint Variables in Media Queries",[719,1779,1780],{},"Once created, breakpoint variables can be used in media queries throughout your styles:",[770,1782,1783,2241],{},[773,1784,1785],{"icon":775,"label":290},[777,1786,1788],{"className":779,"code":1787,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, media } = s;\n\nconst { breakpointSm, breakpointMd, breakpointLg } = useBreakpointDesignTokens(s, {\n    sm: 576,\n    md: 768,\n    lg: 992,\n} as const);\n\nselector('.container', {\n    width: '100%',\n    padding: '1rem',\n});\n\n\u002F\u002F Tablet and up\nmedia(`screen and (min-width: ${breakpointMd.value}px)`, () => {\n    selector('.container', {\n        maxWidth: '720px',\n        margin: '0 auto',\n    });\n});\n\n\u002F\u002F Desktop and up\nmedia(`screen and (min-width: ${breakpointLg.value}px)`, () => {\n    selector('.container', {\n        maxWidth: '960px',\n    });\n});\n\nexport default s;\n",[697,1789,1790,1810,1830,1834,1848,1875,1879,1910,1921,1932,1943,1955,1959,1978,1994,2010,2018,2022,2027,2068,2085,2101,2117,2126,2134,2138,2143,2176,2192,2207,2216,2225,2230],{"__ignoreMap":783},[787,1791,1792,1794,1796,1798,1800,1802,1804,1806,1808],{"class":789,"line":790},[787,1793,794],{"class":793},[787,1795,798],{"class":797},[787,1797,802],{"class":801},[787,1799,805],{"class":797},[787,1801,808],{"class":793},[787,1803,811],{"class":797},[787,1805,815],{"class":814},[787,1807,818],{"class":797},[787,1809,821],{"class":797},[787,1811,1812,1814,1816,1818,1820,1822,1824,1826,1828],{"class":789,"line":824},[787,1813,794],{"class":793},[787,1815,798],{"class":797},[787,1817,831],{"class":801},[787,1819,805],{"class":797},[787,1821,808],{"class":793},[787,1823,811],{"class":797},[787,1825,840],{"class":814},[787,1827,818],{"class":797},[787,1829,821],{"class":797},[787,1831,1832],{"class":789,"line":847},[787,1833,850],{"emptyLinePlaceholder":223},[787,1835,1836,1838,1840,1842,1844,1846],{"class":789,"line":853},[787,1837,857],{"class":856},[787,1839,860],{"class":801},[787,1841,863],{"class":797},[787,1843,802],{"class":866},[787,1845,869],{"class":801},[787,1847,821],{"class":797},[787,1849,1850,1852,1854,1857,1859,1862,1864,1867,1869,1871,1873],{"class":789,"line":874},[787,1851,857],{"class":856},[787,1853,798],{"class":797},[787,1855,1856],{"class":801}," ref",[787,1858,1304],{"class":797},[787,1860,1861],{"class":801}," selector",[787,1863,1304],{"class":797},[787,1865,1866],{"class":801}," media ",[787,1868,1006],{"class":797},[787,1870,1009],{"class":797},[787,1872,1033],{"class":801},[787,1874,821],{"class":797},[787,1876,1877],{"class":789,"line":879},[787,1878,850],{"emptyLinePlaceholder":223},[787,1880,1881,1883,1885,1888,1890,1893,1895,1898,1900,1902,1904,1906,1908],{"class":789,"line":886},[787,1882,857],{"class":856},[787,1884,798],{"class":797},[787,1886,1887],{"class":801}," breakpointSm",[787,1889,1304],{"class":797},[787,1891,1892],{"class":801}," breakpointMd",[787,1894,1304],{"class":797},[787,1896,1897],{"class":801}," breakpointLg ",[787,1899,1006],{"class":797},[787,1901,1009],{"class":797},[787,1903,831],{"class":866},[787,1905,1301],{"class":801},[787,1907,1304],{"class":797},[787,1909,951],{"class":797},[787,1911,1912,1915,1917,1919],{"class":789,"line":892},[787,1913,1914],{"class":1311},"    sm",[787,1916,1050],{"class":797},[787,1918,1078],{"class":1065},[787,1920,960],{"class":797},[787,1922,1923,1926,1928,1930],{"class":789,"line":898},[787,1924,1925],{"class":1311},"    md",[787,1927,1050],{"class":797},[787,1929,1090],{"class":1065},[787,1931,960],{"class":797},[787,1933,1934,1937,1939,1941],{"class":789,"line":904},[787,1935,1936],{"class":1311},"    lg",[787,1938,1050],{"class":797},[787,1940,1102],{"class":1065},[787,1942,960],{"class":797},[787,1944,1945,1947,1949,1951,1953],{"class":789,"line":910},[787,1946,1006],{"class":797},[787,1948,1360],{"class":793},[787,1950,1363],{"class":856},[787,1952,1366],{"class":801},[787,1954,821],{"class":797},[787,1956,1957],{"class":789,"line":916},[787,1958,850],{"emptyLinePlaceholder":223},[787,1960,1961,1964,1967,1969,1972,1974,1976],{"class":789,"line":922},[787,1962,1963],{"class":866},"selector",[787,1965,1966],{"class":801},"(",[787,1968,818],{"class":797},[787,1970,1971],{"class":814},".container",[787,1973,818],{"class":797},[787,1975,1304],{"class":797},[787,1977,951],{"class":797},[787,1979,1980,1983,1985,1987,1990,1992],{"class":789,"line":928},[787,1981,1982],{"class":1311},"    width",[787,1984,1050],{"class":797},[787,1986,811],{"class":797},[787,1988,1989],{"class":814},"100%",[787,1991,818],{"class":797},[787,1993,960],{"class":797},[787,1995,1996,1999,2001,2003,2006,2008],{"class":789,"line":934},[787,1997,1998],{"class":1311},"    padding",[787,2000,1050],{"class":797},[787,2002,811],{"class":797},[787,2004,2005],{"class":814},"1rem",[787,2007,818],{"class":797},[787,2009,960],{"class":797},[787,2011,2012,2014,2016],{"class":789,"line":940},[787,2013,1006],{"class":797},[787,2015,1366],{"class":801},[787,2017,821],{"class":797},[787,2019,2020],{"class":789,"line":946},[787,2021,850],{"emptyLinePlaceholder":223},[787,2023,2024],{"class":789,"line":954},[787,2025,2026],{"class":882},"\u002F\u002F Tablet and up\n",[787,2028,2029,2032,2034,2037,2040,2043,2045,2048,2051,2053,2056,2058,2060,2063,2066],{"class":789,"line":963},[787,2030,2031],{"class":866},"media",[787,2033,1966],{"class":801},[787,2035,2036],{"class":797},"`",[787,2038,2039],{"class":814},"screen and (min-width: ",[787,2041,2042],{"class":797},"${",[787,2044,1154],{"class":801},[787,2046,2047],{"class":797},".",[787,2049,2050],{"class":801},"value",[787,2052,1006],{"class":797},[787,2054,2055],{"class":814},"px)",[787,2057,2036],{"class":797},[787,2059,1304],{"class":797},[787,2061,2062],{"class":797}," ()",[787,2064,2065],{"class":856}," =>",[787,2067,951],{"class":797},[787,2069,2070,2073,2075,2077,2079,2081,2083],{"class":789,"line":971},[787,2071,2072],{"class":866},"    selector",[787,2074,1966],{"class":1311},[787,2076,818],{"class":797},[787,2078,1971],{"class":814},[787,2080,818],{"class":797},[787,2082,1304],{"class":797},[787,2084,951],{"class":797},[787,2086,2087,2090,2092,2094,2097,2099],{"class":789,"line":979},[787,2088,2089],{"class":1311},"        maxWidth",[787,2091,1050],{"class":797},[787,2093,811],{"class":797},[787,2095,2096],{"class":814},"720px",[787,2098,818],{"class":797},[787,2100,960],{"class":797},[787,2102,2103,2106,2108,2110,2113,2115],{"class":789,"line":987},[787,2104,2105],{"class":1311},"        margin",[787,2107,1050],{"class":797},[787,2109,811],{"class":797},[787,2111,2112],{"class":814},"0 auto",[787,2114,818],{"class":797},[787,2116,960],{"class":797},[787,2118,2119,2122,2124],{"class":789,"line":995},[787,2120,2121],{"class":797},"    }",[787,2123,1366],{"class":1311},[787,2125,821],{"class":797},[787,2127,2128,2130,2132],{"class":789,"line":1003},[787,2129,1006],{"class":797},[787,2131,1366],{"class":801},[787,2133,821],{"class":797},[787,2135,2136],{"class":789,"line":1019},[787,2137,850],{"emptyLinePlaceholder":223},[787,2139,2140],{"class":789,"line":1024},[787,2141,2142],{"class":882},"\u002F\u002F Desktop and up\n",[787,2144,2145,2147,2149,2151,2153,2155,2158,2160,2162,2164,2166,2168,2170,2172,2174],{"class":789,"line":1658},[787,2146,2031],{"class":866},[787,2148,1966],{"class":801},[787,2150,2036],{"class":797},[787,2152,2039],{"class":814},[787,2154,2042],{"class":797},[787,2156,2157],{"class":801},"breakpointLg",[787,2159,2047],{"class":797},[787,2161,2050],{"class":801},[787,2163,1006],{"class":797},[787,2165,2055],{"class":814},[787,2167,2036],{"class":797},[787,2169,1304],{"class":797},[787,2171,2062],{"class":797},[787,2173,2065],{"class":856},[787,2175,951],{"class":797},[787,2177,2178,2180,2182,2184,2186,2188,2190],{"class":789,"line":1667},[787,2179,2072],{"class":866},[787,2181,1966],{"class":1311},[787,2183,818],{"class":797},[787,2185,1971],{"class":814},[787,2187,818],{"class":797},[787,2189,1304],{"class":797},[787,2191,951],{"class":797},[787,2193,2194,2196,2198,2200,2203,2205],{"class":789,"line":1672},[787,2195,2089],{"class":1311},[787,2197,1050],{"class":797},[787,2199,811],{"class":797},[787,2201,2202],{"class":814},"960px",[787,2204,818],{"class":797},[787,2206,960],{"class":797},[787,2208,2210,2212,2214],{"class":789,"line":2209},30,[787,2211,2121],{"class":797},[787,2213,1366],{"class":1311},[787,2215,821],{"class":797},[787,2217,2219,2221,2223],{"class":789,"line":2218},31,[787,2220,1006],{"class":797},[787,2222,1366],{"class":801},[787,2224,821],{"class":797},[787,2226,2228],{"class":789,"line":2227},32,[787,2229,850],{"emptyLinePlaceholder":223},[787,2231,2233,2235,2237,2239],{"class":789,"line":2232},33,[787,2234,1027],{"class":793},[787,2236,1030],{"class":793},[787,2238,1033],{"class":801},[787,2240,821],{"class":797},[773,2242,2243],{"icon":154,"label":326},[777,2244,2246],{"className":1040,"code":2245,"filename":1042,"language":1043,"meta":783,"style":783},":root {\n    --breakpoint--sm: 576;\n    --breakpoint--md: 768;\n    --breakpoint--lg: 992;\n}\n\n.container {\n    width: 100%;\n    padding: 1rem;\n}\n\n@media (min-width: 768px) {\n    .container {\n        max-width: 720px;\n        margin: 0 auto;\n    }\n}\n\n@media (min-width: 992px) {\n    .container {\n        max-width: 960px;\n    }\n}\n",[697,2247,2248,2256,2266,2276,2286,2290,2294,2304,2316,2327,2331,2335,2354,2363,2375,2388,2393,2397,2401,2418,2426,2437,2441],{"__ignoreMap":783},[787,2249,2250,2252,2254],{"class":789,"line":790},[787,2251,1050],{"class":797},[787,2253,1053],{"class":856},[787,2255,951],{"class":797},[787,2257,2258,2260,2262,2264],{"class":789,"line":824},[787,2259,1073],{"class":801},[787,2261,1050],{"class":797},[787,2263,1078],{"class":1065},[787,2265,821],{"class":797},[787,2267,2268,2270,2272,2274],{"class":789,"line":847},[787,2269,1085],{"class":801},[787,2271,1050],{"class":797},[787,2273,1090],{"class":1065},[787,2275,821],{"class":797},[787,2277,2278,2280,2282,2284],{"class":789,"line":853},[787,2279,1097],{"class":801},[787,2281,1050],{"class":797},[787,2283,1102],{"class":1065},[787,2285,821],{"class":797},[787,2287,2288],{"class":789,"line":874},[787,2289,1133],{"class":797},[787,2291,2292],{"class":789,"line":879},[787,2293,850],{"emptyLinePlaceholder":223},[787,2295,2296,2298,2302],{"class":789,"line":886},[787,2297,2047],{"class":797},[787,2299,2301],{"class":2300},"sBMFI","container",[787,2303,951],{"class":797},[787,2305,2306,2309,2311,2314],{"class":789,"line":892},[787,2307,1982],{"class":2308},"sqsOY",[787,2310,1050],{"class":797},[787,2312,2313],{"class":1065}," 100%",[787,2315,821],{"class":797},[787,2317,2318,2320,2322,2325],{"class":789,"line":898},[787,2319,1998],{"class":2308},[787,2321,1050],{"class":797},[787,2323,2324],{"class":1065}," 1rem",[787,2326,821],{"class":797},[787,2328,2329],{"class":789,"line":904},[787,2330,1133],{"class":797},[787,2332,2333],{"class":789,"line":910},[787,2334,850],{"emptyLinePlaceholder":223},[787,2336,2337,2340,2342,2345,2347,2350,2352],{"class":789,"line":916},[787,2338,2339],{"class":793},"@media",[787,2341,705],{"class":797},[787,2343,2344],{"class":2300},"min-width",[787,2346,1050],{"class":797},[787,2348,2349],{"class":1065}," 768px",[787,2351,1366],{"class":797},[787,2353,951],{"class":797},[787,2355,2356,2359,2361],{"class":789,"line":922},[787,2357,2358],{"class":797},"    .",[787,2360,2301],{"class":2300},[787,2362,951],{"class":797},[787,2364,2365,2368,2370,2373],{"class":789,"line":928},[787,2366,2367],{"class":2308},"        max-width",[787,2369,1050],{"class":797},[787,2371,2372],{"class":1065}," 720px",[787,2374,821],{"class":797},[787,2376,2377,2379,2381,2383,2386],{"class":789,"line":934},[787,2378,2105],{"class":2308},[787,2380,1050],{"class":797},[787,2382,1066],{"class":1065},[787,2384,2385],{"class":801}," auto",[787,2387,821],{"class":797},[787,2389,2390],{"class":789,"line":940},[787,2391,2392],{"class":797},"    }\n",[787,2394,2395],{"class":789,"line":946},[787,2396,1133],{"class":797},[787,2398,2399],{"class":789,"line":954},[787,2400,850],{"emptyLinePlaceholder":223},[787,2402,2403,2405,2407,2409,2411,2414,2416],{"class":789,"line":963},[787,2404,2339],{"class":793},[787,2406,705],{"class":797},[787,2408,2344],{"class":2300},[787,2410,1050],{"class":797},[787,2412,2413],{"class":1065}," 992px",[787,2415,1366],{"class":797},[787,2417,951],{"class":797},[787,2419,2420,2422,2424],{"class":789,"line":971},[787,2421,2358],{"class":797},[787,2423,2301],{"class":2300},[787,2425,951],{"class":797},[787,2427,2428,2430,2432,2435],{"class":789,"line":979},[787,2429,2367],{"class":2308},[787,2431,1050],{"class":797},[787,2433,2434],{"class":1065}," 960px",[787,2436,821],{"class":797},[787,2438,2439],{"class":789,"line":987},[787,2440,2392],{"class":797},[787,2442,2443],{"class":789,"line":995},[787,2444,1133],{"class":797},[2446,2447,2448,2451],"caution",{},[692,2449,2450],{},"Important:"," We reference breakpoint values in media queries because CSS does not support referencing variables in media queries yet.",[715,2453,2455],{"id":2454},"examples","Examples",[1179,2457,2459],{"id":2458},"range-based-media-queries","Range-Based Media Queries",[719,2461,2462],{},"Use breakpoints to create range-based media queries for specific viewport sizes:",[770,2464,2465,2781],{},[773,2466,2467],{"icon":775,"label":290},[777,2468,2470],{"className":779,"code":2469,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens, defaultBreakpointValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, media } = s;\n\nconst { breakpointSm, breakpointMd, breakpointLg } = \n    useBreakpointDesignTokens(s, defaultBreakpointValues);\n\nselector('.sidebar', {\n    display: 'none',\n});\n\n\u002F\u002F Show sidebar only on tablets (between sm and lg)\nmedia({ \n    minWidth: ref(breakpointSm), \n    maxWidth: ref(breakpointLg) \n}, () => {\n    selector('.sidebar', {\n        display: 'block',\n        width: '250px',\n    });\n});\n\nexport default s;\n",[697,2471,2472,2492,2516,2520,2534,2558,2562,2585,2599,2603,2620,2636,2644,2648,2653,2664,2680,2692,2703,2719,2735,2751,2759,2767,2771],{"__ignoreMap":783},[787,2473,2474,2476,2478,2480,2482,2484,2486,2488,2490],{"class":789,"line":790},[787,2475,794],{"class":793},[787,2477,798],{"class":797},[787,2479,802],{"class":801},[787,2481,805],{"class":797},[787,2483,808],{"class":793},[787,2485,811],{"class":797},[787,2487,815],{"class":814},[787,2489,818],{"class":797},[787,2491,821],{"class":797},[787,2493,2494,2496,2498,2500,2502,2504,2506,2508,2510,2512,2514],{"class":789,"line":824},[787,2495,794],{"class":793},[787,2497,798],{"class":797},[787,2499,831],{"class":801},[787,2501,1304],{"class":797},[787,2503,1494],{"class":801},[787,2505,805],{"class":797},[787,2507,808],{"class":793},[787,2509,811],{"class":797},[787,2511,840],{"class":814},[787,2513,818],{"class":797},[787,2515,821],{"class":797},[787,2517,2518],{"class":789,"line":847},[787,2519,850],{"emptyLinePlaceholder":223},[787,2521,2522,2524,2526,2528,2530,2532],{"class":789,"line":853},[787,2523,857],{"class":856},[787,2525,860],{"class":801},[787,2527,863],{"class":797},[787,2529,802],{"class":866},[787,2531,869],{"class":801},[787,2533,821],{"class":797},[787,2535,2536,2538,2540,2542,2544,2546,2548,2550,2552,2554,2556],{"class":789,"line":874},[787,2537,857],{"class":856},[787,2539,798],{"class":797},[787,2541,1856],{"class":801},[787,2543,1304],{"class":797},[787,2545,1861],{"class":801},[787,2547,1304],{"class":797},[787,2549,1866],{"class":801},[787,2551,1006],{"class":797},[787,2553,1009],{"class":797},[787,2555,1033],{"class":801},[787,2557,821],{"class":797},[787,2559,2560],{"class":789,"line":879},[787,2561,850],{"emptyLinePlaceholder":223},[787,2563,2564,2566,2568,2570,2572,2574,2576,2578,2580,2582],{"class":789,"line":886},[787,2565,857],{"class":856},[787,2567,798],{"class":797},[787,2569,1887],{"class":801},[787,2571,1304],{"class":797},[787,2573,1892],{"class":801},[787,2575,1304],{"class":797},[787,2577,1897],{"class":801},[787,2579,1006],{"class":797},[787,2581,1009],{"class":797},[787,2583,2584],{"class":801}," \n",[787,2586,2587,2590,2592,2594,2597],{"class":789,"line":892},[787,2588,2589],{"class":866},"    useBreakpointDesignTokens",[787,2591,1301],{"class":801},[787,2593,1304],{"class":797},[787,2595,2596],{"class":801}," defaultBreakpointValues)",[787,2598,821],{"class":797},[787,2600,2601],{"class":789,"line":898},[787,2602,850],{"emptyLinePlaceholder":223},[787,2604,2605,2607,2609,2611,2614,2616,2618],{"class":789,"line":904},[787,2606,1963],{"class":866},[787,2608,1966],{"class":801},[787,2610,818],{"class":797},[787,2612,2613],{"class":814},".sidebar",[787,2615,818],{"class":797},[787,2617,1304],{"class":797},[787,2619,951],{"class":797},[787,2621,2622,2625,2627,2629,2632,2634],{"class":789,"line":910},[787,2623,2624],{"class":1311},"    display",[787,2626,1050],{"class":797},[787,2628,811],{"class":797},[787,2630,2631],{"class":814},"none",[787,2633,818],{"class":797},[787,2635,960],{"class":797},[787,2637,2638,2640,2642],{"class":789,"line":916},[787,2639,1006],{"class":797},[787,2641,1366],{"class":801},[787,2643,821],{"class":797},[787,2645,2646],{"class":789,"line":922},[787,2647,850],{"emptyLinePlaceholder":223},[787,2649,2650],{"class":789,"line":928},[787,2651,2652],{"class":882},"\u002F\u002F Show sidebar only on tablets (between sm and lg)\n",[787,2654,2655,2657,2659,2662],{"class":789,"line":934},[787,2656,2031],{"class":866},[787,2658,1966],{"class":801},[787,2660,2661],{"class":797},"{",[787,2663,2584],{"class":801},[787,2665,2666,2669,2671,2673,2676,2678],{"class":789,"line":940},[787,2667,2668],{"class":1311},"    minWidth",[787,2670,1050],{"class":797},[787,2672,1856],{"class":866},[787,2674,2675],{"class":801},"(breakpointSm)",[787,2677,1304],{"class":797},[787,2679,2584],{"class":801},[787,2681,2682,2685,2687,2689],{"class":789,"line":946},[787,2683,2684],{"class":1311},"    maxWidth",[787,2686,1050],{"class":797},[787,2688,1856],{"class":866},[787,2690,2691],{"class":801},"(breakpointLg) \n",[787,2693,2694,2697,2699,2701],{"class":789,"line":954},[787,2695,2696],{"class":797},"},",[787,2698,2062],{"class":797},[787,2700,2065],{"class":856},[787,2702,951],{"class":797},[787,2704,2705,2707,2709,2711,2713,2715,2717],{"class":789,"line":963},[787,2706,2072],{"class":866},[787,2708,1966],{"class":1311},[787,2710,818],{"class":797},[787,2712,2613],{"class":814},[787,2714,818],{"class":797},[787,2716,1304],{"class":797},[787,2718,951],{"class":797},[787,2720,2721,2724,2726,2728,2731,2733],{"class":789,"line":971},[787,2722,2723],{"class":1311},"        display",[787,2725,1050],{"class":797},[787,2727,811],{"class":797},[787,2729,2730],{"class":814},"block",[787,2732,818],{"class":797},[787,2734,960],{"class":797},[787,2736,2737,2740,2742,2744,2747,2749],{"class":789,"line":979},[787,2738,2739],{"class":1311},"        width",[787,2741,1050],{"class":797},[787,2743,811],{"class":797},[787,2745,2746],{"class":814},"250px",[787,2748,818],{"class":797},[787,2750,960],{"class":797},[787,2752,2753,2755,2757],{"class":789,"line":987},[787,2754,2121],{"class":797},[787,2756,1366],{"class":1311},[787,2758,821],{"class":797},[787,2760,2761,2763,2765],{"class":789,"line":995},[787,2762,1006],{"class":797},[787,2764,1366],{"class":801},[787,2766,821],{"class":797},[787,2768,2769],{"class":789,"line":1003},[787,2770,850],{"emptyLinePlaceholder":223},[787,2772,2773,2775,2777,2779],{"class":789,"line":1019},[787,2774,1027],{"class":793},[787,2776,1030],{"class":793},[787,2778,1033],{"class":801},[787,2780,821],{"class":797},[773,2782,2783],{"icon":154,"label":326},[777,2784,2786],{"className":1040,"code":2785,"filename":1042,"language":1043,"meta":783,"style":783},":root {\n    --breakpoint--sm: 576;\n    --breakpoint--md: 768;\n    --breakpoint--lg: 992;\n}\n\n.sidebar {\n    display: none;\n}\n\n@media (min-width: 576px) and (max-width: 992px) {\n    .sidebar {\n        display: block;\n        width: 250px;\n    }\n}\n",[697,2787,2788,2796,2806,2816,2826,2830,2834,2843,2854,2858,2862,2893,2901,2912,2923,2927],{"__ignoreMap":783},[787,2789,2790,2792,2794],{"class":789,"line":790},[787,2791,1050],{"class":797},[787,2793,1053],{"class":856},[787,2795,951],{"class":797},[787,2797,2798,2800,2802,2804],{"class":789,"line":824},[787,2799,1073],{"class":801},[787,2801,1050],{"class":797},[787,2803,1078],{"class":1065},[787,2805,821],{"class":797},[787,2807,2808,2810,2812,2814],{"class":789,"line":847},[787,2809,1085],{"class":801},[787,2811,1050],{"class":797},[787,2813,1090],{"class":1065},[787,2815,821],{"class":797},[787,2817,2818,2820,2822,2824],{"class":789,"line":853},[787,2819,1097],{"class":801},[787,2821,1050],{"class":797},[787,2823,1102],{"class":1065},[787,2825,821],{"class":797},[787,2827,2828],{"class":789,"line":874},[787,2829,1133],{"class":797},[787,2831,2832],{"class":789,"line":879},[787,2833,850],{"emptyLinePlaceholder":223},[787,2835,2836,2838,2841],{"class":789,"line":886},[787,2837,2047],{"class":797},[787,2839,2840],{"class":2300},"sidebar",[787,2842,951],{"class":797},[787,2844,2845,2847,2849,2852],{"class":789,"line":892},[787,2846,2624],{"class":2308},[787,2848,1050],{"class":797},[787,2850,2851],{"class":801}," none",[787,2853,821],{"class":797},[787,2855,2856],{"class":789,"line":898},[787,2857,1133],{"class":797},[787,2859,2860],{"class":789,"line":904},[787,2861,850],{"emptyLinePlaceholder":223},[787,2863,2864,2866,2868,2870,2872,2875,2877,2880,2882,2885,2887,2889,2891],{"class":789,"line":910},[787,2865,2339],{"class":793},[787,2867,705],{"class":797},[787,2869,2344],{"class":2300},[787,2871,1050],{"class":797},[787,2873,2874],{"class":1065}," 576px",[787,2876,1366],{"class":797},[787,2878,2879],{"class":797}," and",[787,2881,705],{"class":797},[787,2883,2884],{"class":2300},"max-width",[787,2886,1050],{"class":797},[787,2888,2413],{"class":1065},[787,2890,1366],{"class":797},[787,2892,951],{"class":797},[787,2894,2895,2897,2899],{"class":789,"line":916},[787,2896,2358],{"class":797},[787,2898,2840],{"class":2300},[787,2900,951],{"class":797},[787,2902,2903,2905,2907,2910],{"class":789,"line":922},[787,2904,2723],{"class":2308},[787,2906,1050],{"class":797},[787,2908,2909],{"class":801}," block",[787,2911,821],{"class":797},[787,2913,2914,2916,2918,2921],{"class":789,"line":928},[787,2915,2739],{"class":2308},[787,2917,1050],{"class":797},[787,2919,2920],{"class":1065}," 250px",[787,2922,821],{"class":797},[787,2924,2925],{"class":789,"line":934},[787,2926,2392],{"class":797},[787,2928,2929],{"class":789,"line":940},[787,2930,1133],{"class":797},[1179,2932,2934],{"id":2933},"custom-breakpoint-scale","Custom Breakpoint Scale",[719,2936,2937],{},"Create a custom breakpoint scale tailored to your specific design needs:",[770,2939,2940,3544],{},[773,2941,2942],{"icon":775,"label":290},[777,2943,2945],{"className":779,"code":2944,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, media } = s;\n\n\u002F\u002F Custom breakpoints for a specific application\nconst {\n    breakpointMobile,\n    breakpointTablet,\n    breakpointDesktop,\n    breakpointWide,\n    breakpointUltrawide,\n} = useBreakpointDesignTokens(s, {\n    mobile: 0,\n    tablet: 768,\n    desktop: 1024,\n    wide: 1920,\n    ultrawide: 2560,\n} as const);\n\nselector('.hero', {\n    minHeight: '400px',\n    fontSize: '1.5rem',\n});\n\nmedia(`screen and (min-width: ${breakpointTablet.value}px)`, () => {\n    selector('.hero', {\n        minHeight: '500px',\n        fontSize: '2rem',\n    });\n});\n\nmedia(`screen and (min-width: ${breakpointDesktop.value}px)`, () => {\n    selector('.hero', {\n        minHeight: '600px',\n        fontSize: '2.5rem',\n    });\n});\n\nmedia(`screen and (min-width: ${breakpointWide.value}px)`, () => {\n    selector('.hero', {\n        minHeight: '800px',\n        fontSize: '3rem',\n    });\n});\n\nexport default s;\n",[697,2946,2947,2967,2987,2991,3005,3029,3033,3038,3044,3050,3056,3062,3069,3076,3090,3100,3110,3120,3131,3143,3155,3159,3176,3192,3208,3216,3220,3253,3269,3285,3301,3309,3317,3321,3355,3372,3388,3404,3413,3422,3427,3461,3478,3494,3510,3519,3528,3533],{"__ignoreMap":783},[787,2948,2949,2951,2953,2955,2957,2959,2961,2963,2965],{"class":789,"line":790},[787,2950,794],{"class":793},[787,2952,798],{"class":797},[787,2954,802],{"class":801},[787,2956,805],{"class":797},[787,2958,808],{"class":793},[787,2960,811],{"class":797},[787,2962,815],{"class":814},[787,2964,818],{"class":797},[787,2966,821],{"class":797},[787,2968,2969,2971,2973,2975,2977,2979,2981,2983,2985],{"class":789,"line":824},[787,2970,794],{"class":793},[787,2972,798],{"class":797},[787,2974,831],{"class":801},[787,2976,805],{"class":797},[787,2978,808],{"class":793},[787,2980,811],{"class":797},[787,2982,840],{"class":814},[787,2984,818],{"class":797},[787,2986,821],{"class":797},[787,2988,2989],{"class":789,"line":847},[787,2990,850],{"emptyLinePlaceholder":223},[787,2992,2993,2995,2997,2999,3001,3003],{"class":789,"line":853},[787,2994,857],{"class":856},[787,2996,860],{"class":801},[787,2998,863],{"class":797},[787,3000,802],{"class":866},[787,3002,869],{"class":801},[787,3004,821],{"class":797},[787,3006,3007,3009,3011,3013,3015,3017,3019,3021,3023,3025,3027],{"class":789,"line":874},[787,3008,857],{"class":856},[787,3010,798],{"class":797},[787,3012,1856],{"class":801},[787,3014,1304],{"class":797},[787,3016,1861],{"class":801},[787,3018,1304],{"class":797},[787,3020,1866],{"class":801},[787,3022,1006],{"class":797},[787,3024,1009],{"class":797},[787,3026,1033],{"class":801},[787,3028,821],{"class":797},[787,3030,3031],{"class":789,"line":879},[787,3032,850],{"emptyLinePlaceholder":223},[787,3034,3035],{"class":789,"line":886},[787,3036,3037],{"class":882},"\u002F\u002F Custom breakpoints for a specific application\n",[787,3039,3040,3042],{"class":789,"line":892},[787,3041,857],{"class":856},[787,3043,951],{"class":797},[787,3045,3046,3048],{"class":789,"line":898},[787,3047,1267],{"class":801},[787,3049,960],{"class":797},[787,3051,3052,3054],{"class":789,"line":904},[787,3053,1274],{"class":801},[787,3055,960],{"class":797},[787,3057,3058,3060],{"class":789,"line":910},[787,3059,1288],{"class":801},[787,3061,960],{"class":797},[787,3063,3064,3067],{"class":789,"line":916},[787,3065,3066],{"class":801},"    breakpointWide",[787,3068,960],{"class":797},[787,3070,3071,3074],{"class":789,"line":922},[787,3072,3073],{"class":801},"    breakpointUltrawide",[787,3075,960],{"class":797},[787,3077,3078,3080,3082,3084,3086,3088],{"class":789,"line":928},[787,3079,1006],{"class":797},[787,3081,1009],{"class":797},[787,3083,831],{"class":866},[787,3085,1301],{"class":801},[787,3087,1304],{"class":797},[787,3089,951],{"class":797},[787,3091,3092,3094,3096,3098],{"class":789,"line":934},[787,3093,1312],{"class":1311},[787,3095,1050],{"class":797},[787,3097,1066],{"class":1065},[787,3099,960],{"class":797},[787,3101,3102,3104,3106,3108],{"class":789,"line":940},[787,3103,1324],{"class":1311},[787,3105,1050],{"class":797},[787,3107,1090],{"class":1065},[787,3109,960],{"class":797},[787,3111,3112,3114,3116,3118],{"class":789,"line":946},[787,3113,1347],{"class":1311},[787,3115,1050],{"class":797},[787,3117,1340],{"class":1065},[787,3119,960],{"class":797},[787,3121,3122,3125,3127,3129],{"class":789,"line":954},[787,3123,3124],{"class":1311},"    wide",[787,3126,1050],{"class":797},[787,3128,1653],{"class":1065},[787,3130,960],{"class":797},[787,3132,3133,3136,3138,3141],{"class":789,"line":963},[787,3134,3135],{"class":1311},"    ultrawide",[787,3137,1050],{"class":797},[787,3139,3140],{"class":1065}," 2560",[787,3142,960],{"class":797},[787,3144,3145,3147,3149,3151,3153],{"class":789,"line":971},[787,3146,1006],{"class":797},[787,3148,1360],{"class":793},[787,3150,1363],{"class":856},[787,3152,1366],{"class":801},[787,3154,821],{"class":797},[787,3156,3157],{"class":789,"line":979},[787,3158,850],{"emptyLinePlaceholder":223},[787,3160,3161,3163,3165,3167,3170,3172,3174],{"class":789,"line":987},[787,3162,1963],{"class":866},[787,3164,1966],{"class":801},[787,3166,818],{"class":797},[787,3168,3169],{"class":814},".hero",[787,3171,818],{"class":797},[787,3173,1304],{"class":797},[787,3175,951],{"class":797},[787,3177,3178,3181,3183,3185,3188,3190],{"class":789,"line":995},[787,3179,3180],{"class":1311},"    minHeight",[787,3182,1050],{"class":797},[787,3184,811],{"class":797},[787,3186,3187],{"class":814},"400px",[787,3189,818],{"class":797},[787,3191,960],{"class":797},[787,3193,3194,3197,3199,3201,3204,3206],{"class":789,"line":1003},[787,3195,3196],{"class":1311},"    fontSize",[787,3198,1050],{"class":797},[787,3200,811],{"class":797},[787,3202,3203],{"class":814},"1.5rem",[787,3205,818],{"class":797},[787,3207,960],{"class":797},[787,3209,3210,3212,3214],{"class":789,"line":1019},[787,3211,1006],{"class":797},[787,3213,1366],{"class":801},[787,3215,821],{"class":797},[787,3217,3218],{"class":789,"line":1024},[787,3219,850],{"emptyLinePlaceholder":223},[787,3221,3222,3224,3226,3228,3230,3232,3235,3237,3239,3241,3243,3245,3247,3249,3251],{"class":789,"line":1658},[787,3223,2031],{"class":866},[787,3225,1966],{"class":801},[787,3227,2036],{"class":797},[787,3229,2039],{"class":814},[787,3231,2042],{"class":797},[787,3233,3234],{"class":801},"breakpointTablet",[787,3236,2047],{"class":797},[787,3238,2050],{"class":801},[787,3240,1006],{"class":797},[787,3242,2055],{"class":814},[787,3244,2036],{"class":797},[787,3246,1304],{"class":797},[787,3248,2062],{"class":797},[787,3250,2065],{"class":856},[787,3252,951],{"class":797},[787,3254,3255,3257,3259,3261,3263,3265,3267],{"class":789,"line":1667},[787,3256,2072],{"class":866},[787,3258,1966],{"class":1311},[787,3260,818],{"class":797},[787,3262,3169],{"class":814},[787,3264,818],{"class":797},[787,3266,1304],{"class":797},[787,3268,951],{"class":797},[787,3270,3271,3274,3276,3278,3281,3283],{"class":789,"line":1672},[787,3272,3273],{"class":1311},"        minHeight",[787,3275,1050],{"class":797},[787,3277,811],{"class":797},[787,3279,3280],{"class":814},"500px",[787,3282,818],{"class":797},[787,3284,960],{"class":797},[787,3286,3287,3290,3292,3294,3297,3299],{"class":789,"line":2209},[787,3288,3289],{"class":1311},"        fontSize",[787,3291,1050],{"class":797},[787,3293,811],{"class":797},[787,3295,3296],{"class":814},"2rem",[787,3298,818],{"class":797},[787,3300,960],{"class":797},[787,3302,3303,3305,3307],{"class":789,"line":2218},[787,3304,2121],{"class":797},[787,3306,1366],{"class":1311},[787,3308,821],{"class":797},[787,3310,3311,3313,3315],{"class":789,"line":2227},[787,3312,1006],{"class":797},[787,3314,1366],{"class":801},[787,3316,821],{"class":797},[787,3318,3319],{"class":789,"line":2232},[787,3320,850],{"emptyLinePlaceholder":223},[787,3322,3324,3326,3328,3330,3332,3334,3337,3339,3341,3343,3345,3347,3349,3351,3353],{"class":789,"line":3323},34,[787,3325,2031],{"class":866},[787,3327,1966],{"class":801},[787,3329,2036],{"class":797},[787,3331,2039],{"class":814},[787,3333,2042],{"class":797},[787,3335,3336],{"class":801},"breakpointDesktop",[787,3338,2047],{"class":797},[787,3340,2050],{"class":801},[787,3342,1006],{"class":797},[787,3344,2055],{"class":814},[787,3346,2036],{"class":797},[787,3348,1304],{"class":797},[787,3350,2062],{"class":797},[787,3352,2065],{"class":856},[787,3354,951],{"class":797},[787,3356,3358,3360,3362,3364,3366,3368,3370],{"class":789,"line":3357},35,[787,3359,2072],{"class":866},[787,3361,1966],{"class":1311},[787,3363,818],{"class":797},[787,3365,3169],{"class":814},[787,3367,818],{"class":797},[787,3369,1304],{"class":797},[787,3371,951],{"class":797},[787,3373,3375,3377,3379,3381,3384,3386],{"class":789,"line":3374},36,[787,3376,3273],{"class":1311},[787,3378,1050],{"class":797},[787,3380,811],{"class":797},[787,3382,3383],{"class":814},"600px",[787,3385,818],{"class":797},[787,3387,960],{"class":797},[787,3389,3391,3393,3395,3397,3400,3402],{"class":789,"line":3390},37,[787,3392,3289],{"class":1311},[787,3394,1050],{"class":797},[787,3396,811],{"class":797},[787,3398,3399],{"class":814},"2.5rem",[787,3401,818],{"class":797},[787,3403,960],{"class":797},[787,3405,3407,3409,3411],{"class":789,"line":3406},38,[787,3408,2121],{"class":797},[787,3410,1366],{"class":1311},[787,3412,821],{"class":797},[787,3414,3416,3418,3420],{"class":789,"line":3415},39,[787,3417,1006],{"class":797},[787,3419,1366],{"class":801},[787,3421,821],{"class":797},[787,3423,3425],{"class":789,"line":3424},40,[787,3426,850],{"emptyLinePlaceholder":223},[787,3428,3430,3432,3434,3436,3438,3440,3443,3445,3447,3449,3451,3453,3455,3457,3459],{"class":789,"line":3429},41,[787,3431,2031],{"class":866},[787,3433,1966],{"class":801},[787,3435,2036],{"class":797},[787,3437,2039],{"class":814},[787,3439,2042],{"class":797},[787,3441,3442],{"class":801},"breakpointWide",[787,3444,2047],{"class":797},[787,3446,2050],{"class":801},[787,3448,1006],{"class":797},[787,3450,2055],{"class":814},[787,3452,2036],{"class":797},[787,3454,1304],{"class":797},[787,3456,2062],{"class":797},[787,3458,2065],{"class":856},[787,3460,951],{"class":797},[787,3462,3464,3466,3468,3470,3472,3474,3476],{"class":789,"line":3463},42,[787,3465,2072],{"class":866},[787,3467,1966],{"class":1311},[787,3469,818],{"class":797},[787,3471,3169],{"class":814},[787,3473,818],{"class":797},[787,3475,1304],{"class":797},[787,3477,951],{"class":797},[787,3479,3481,3483,3485,3487,3490,3492],{"class":789,"line":3480},43,[787,3482,3273],{"class":1311},[787,3484,1050],{"class":797},[787,3486,811],{"class":797},[787,3488,3489],{"class":814},"800px",[787,3491,818],{"class":797},[787,3493,960],{"class":797},[787,3495,3497,3499,3501,3503,3506,3508],{"class":789,"line":3496},44,[787,3498,3289],{"class":1311},[787,3500,1050],{"class":797},[787,3502,811],{"class":797},[787,3504,3505],{"class":814},"3rem",[787,3507,818],{"class":797},[787,3509,960],{"class":797},[787,3511,3513,3515,3517],{"class":789,"line":3512},45,[787,3514,2121],{"class":797},[787,3516,1366],{"class":1311},[787,3518,821],{"class":797},[787,3520,3522,3524,3526],{"class":789,"line":3521},46,[787,3523,1006],{"class":797},[787,3525,1366],{"class":801},[787,3527,821],{"class":797},[787,3529,3531],{"class":789,"line":3530},47,[787,3532,850],{"emptyLinePlaceholder":223},[787,3534,3536,3538,3540,3542],{"class":789,"line":3535},48,[787,3537,1027],{"class":793},[787,3539,1030],{"class":793},[787,3541,1033],{"class":801},[787,3543,821],{"class":797},[773,3545,3546],{"icon":154,"label":326},[777,3547,3549],{"className":1040,"code":3548,"filename":1042,"language":1043,"meta":783,"style":783},":root {\n    --breakpoint--mobile: 0;\n    --breakpoint--tablet: 768;\n    --breakpoint--desktop: 1024;\n    --breakpoint--wide: 1920;\n    --breakpoint--ultrawide: 2560;\n}\n\n.hero {\n    min-height: 400px;\n    font-size: 1.5rem;\n}\n\n@media (min-width: 768px) {\n    .hero {\n        min-height: 500px;\n        font-size: 2rem;\n    }\n}\n\n@media (min-width: 1024px) {\n    .hero {\n        min-height: 600px;\n        font-size: 2.5rem;\n    }\n}\n\n@media (min-width: 1920px) {\n    .hero {\n        min-height: 800px;\n        font-size: 3rem;\n    }\n}\n",[697,3550,3551,3559,3569,3579,3589,3600,3611,3615,3619,3628,3640,3652,3656,3660,3676,3684,3696,3708,3712,3716,3720,3737,3745,3756,3767,3771,3775,3779,3796,3804,3815,3826,3830],{"__ignoreMap":783},[787,3552,3553,3555,3557],{"class":789,"line":790},[787,3554,1050],{"class":797},[787,3556,1053],{"class":856},[787,3558,951],{"class":797},[787,3560,3561,3563,3565,3567],{"class":789,"line":824},[787,3562,1402],{"class":801},[787,3564,1050],{"class":797},[787,3566,1066],{"class":1065},[787,3568,821],{"class":797},[787,3570,3571,3573,3575,3577],{"class":789,"line":847},[787,3572,1413],{"class":801},[787,3574,1050],{"class":797},[787,3576,1090],{"class":1065},[787,3578,821],{"class":797},[787,3580,3581,3583,3585,3587],{"class":789,"line":853},[787,3582,1435],{"class":801},[787,3584,1050],{"class":797},[787,3586,1340],{"class":1065},[787,3588,821],{"class":797},[787,3590,3591,3594,3596,3598],{"class":789,"line":874},[787,3592,3593],{"class":801},"    --breakpoint--wide",[787,3595,1050],{"class":797},[787,3597,1653],{"class":1065},[787,3599,821],{"class":797},[787,3601,3602,3605,3607,3609],{"class":789,"line":879},[787,3603,3604],{"class":801},"    --breakpoint--ultrawide",[787,3606,1050],{"class":797},[787,3608,3140],{"class":1065},[787,3610,821],{"class":797},[787,3612,3613],{"class":789,"line":886},[787,3614,1133],{"class":797},[787,3616,3617],{"class":789,"line":892},[787,3618,850],{"emptyLinePlaceholder":223},[787,3620,3621,3623,3626],{"class":789,"line":898},[787,3622,2047],{"class":797},[787,3624,3625],{"class":2300},"hero",[787,3627,951],{"class":797},[787,3629,3630,3633,3635,3638],{"class":789,"line":904},[787,3631,3632],{"class":2308},"    min-height",[787,3634,1050],{"class":797},[787,3636,3637],{"class":1065}," 400px",[787,3639,821],{"class":797},[787,3641,3642,3645,3647,3650],{"class":789,"line":910},[787,3643,3644],{"class":2308},"    font-size",[787,3646,1050],{"class":797},[787,3648,3649],{"class":1065}," 1.5rem",[787,3651,821],{"class":797},[787,3653,3654],{"class":789,"line":916},[787,3655,1133],{"class":797},[787,3657,3658],{"class":789,"line":922},[787,3659,850],{"emptyLinePlaceholder":223},[787,3661,3662,3664,3666,3668,3670,3672,3674],{"class":789,"line":928},[787,3663,2339],{"class":793},[787,3665,705],{"class":797},[787,3667,2344],{"class":2300},[787,3669,1050],{"class":797},[787,3671,2349],{"class":1065},[787,3673,1366],{"class":797},[787,3675,951],{"class":797},[787,3677,3678,3680,3682],{"class":789,"line":934},[787,3679,2358],{"class":797},[787,3681,3625],{"class":2300},[787,3683,951],{"class":797},[787,3685,3686,3689,3691,3694],{"class":789,"line":940},[787,3687,3688],{"class":2308},"        min-height",[787,3690,1050],{"class":797},[787,3692,3693],{"class":1065}," 500px",[787,3695,821],{"class":797},[787,3697,3698,3701,3703,3706],{"class":789,"line":946},[787,3699,3700],{"class":2308},"        font-size",[787,3702,1050],{"class":797},[787,3704,3705],{"class":1065}," 2rem",[787,3707,821],{"class":797},[787,3709,3710],{"class":789,"line":954},[787,3711,2392],{"class":797},[787,3713,3714],{"class":789,"line":963},[787,3715,1133],{"class":797},[787,3717,3718],{"class":789,"line":971},[787,3719,850],{"emptyLinePlaceholder":223},[787,3721,3722,3724,3726,3728,3730,3733,3735],{"class":789,"line":979},[787,3723,2339],{"class":793},[787,3725,705],{"class":797},[787,3727,2344],{"class":2300},[787,3729,1050],{"class":797},[787,3731,3732],{"class":1065}," 1024px",[787,3734,1366],{"class":797},[787,3736,951],{"class":797},[787,3738,3739,3741,3743],{"class":789,"line":987},[787,3740,2358],{"class":797},[787,3742,3625],{"class":2300},[787,3744,951],{"class":797},[787,3746,3747,3749,3751,3754],{"class":789,"line":995},[787,3748,3688],{"class":2308},[787,3750,1050],{"class":797},[787,3752,3753],{"class":1065}," 600px",[787,3755,821],{"class":797},[787,3757,3758,3760,3762,3765],{"class":789,"line":1003},[787,3759,3700],{"class":2308},[787,3761,1050],{"class":797},[787,3763,3764],{"class":1065}," 2.5rem",[787,3766,821],{"class":797},[787,3768,3769],{"class":789,"line":1019},[787,3770,2392],{"class":797},[787,3772,3773],{"class":789,"line":1024},[787,3774,1133],{"class":797},[787,3776,3777],{"class":789,"line":1658},[787,3778,850],{"emptyLinePlaceholder":223},[787,3780,3781,3783,3785,3787,3789,3792,3794],{"class":789,"line":1667},[787,3782,2339],{"class":793},[787,3784,705],{"class":797},[787,3786,2344],{"class":2300},[787,3788,1050],{"class":797},[787,3790,3791],{"class":1065}," 1920px",[787,3793,1366],{"class":797},[787,3795,951],{"class":797},[787,3797,3798,3800,3802],{"class":789,"line":1672},[787,3799,2358],{"class":797},[787,3801,3625],{"class":2300},[787,3803,951],{"class":797},[787,3805,3806,3808,3810,3813],{"class":789,"line":2209},[787,3807,3688],{"class":2308},[787,3809,1050],{"class":797},[787,3811,3812],{"class":1065}," 800px",[787,3814,821],{"class":797},[787,3816,3817,3819,3821,3824],{"class":789,"line":2218},[787,3818,3700],{"class":2308},[787,3820,1050],{"class":797},[787,3822,3823],{"class":1065}," 3rem",[787,3825,821],{"class":797},[787,3827,3828],{"class":789,"line":2227},[787,3829,2392],{"class":797},[787,3831,3832],{"class":789,"line":2232},[787,3833,1133],{"class":797},[715,3835,3837],{"id":3836},"best-practices","Best Practices",[730,3839,3840,3849,3855,3861,3867,3873,3879],{},[733,3841,3842,3845,3846,3848],{},[692,3843,3844],{},"Use mobile-first approach",": Start with mobile styles and progressively enhance for larger screens using ",[697,3847,2344],{}," media queries.",[733,3850,3851,3854],{},[692,3852,3853],{},"Keep breakpoints consistent",": Limit your breakpoints to 4-6 key sizes. Too many breakpoints make maintenance difficult.",[733,3856,3857,3860],{},[692,3858,3859],{},"Choose meaningful values",": Use semantic values that reflect device categories or layout changes rather than arbitrary sizes.",[733,3862,3863,3866],{},[692,3864,3865],{},"Avoid device-specific breakpoints",": Design for content, not specific devices. Breakpoints should be based on when your layout needs to adapt.",[733,3868,3869,3872],{},[692,3870,3871],{},"Test between breakpoints",": Ensure your design works at all viewport sizes, not just at the exact breakpoint values.",[733,3874,3875,3878],{},[692,3876,3877],{},"Consider orientation",": For mobile devices, you may want separate breakpoints for portrait and landscape orientations.",[733,3880,3881,3884],{},[692,3882,3883],{},"Document your breakpoint strategy",": Make it clear when and why each breakpoint should be used in your design system.",[689,3886,3887,3890,3891,3894],{},[692,3888,3889],{},"Good to know:"," We use ",[697,3892,3893],{},"as const"," to ensure the object is treated as a constant type. This helps TypeScript infer the return type of the composables and provides better type safety and autocomplete support.",[715,3896,3898],{"id":3897},"faq","FAQ",[3900,3901,3902,3908,3915,3919,3923,3927,3942],"accordion",{},[3903,3904,3907],"accordion-item",{"icon":3905,"label":3906},"i-lucide-circle-help","What breakpoint values should I use?","There's no one-size-fits-all answer. The default values (0, 576, 768, 992, 1200, 1440) are based on common device sizes, but you should choose breakpoints based on when your content needs to adapt. Start with your design and add breakpoints where the layout naturally needs to change.",[3903,3909,3911,3912,3914],{"icon":3905,"label":3910},"Should I use mobile-first or desktop-first?","Mobile-first is generally recommended. It encourages progressive enhancement, results in simpler CSS, and aligns with the reality that mobile traffic often exceeds desktop traffic. Start with mobile styles and use ",[697,3913,2344],{}," media queries to enhance for larger screens.",[3903,3916,3918],{"icon":3905,"label":3917},"How many breakpoints should I have?","Aim for 4-6 breakpoints in most cases. Common patterns include: mobile (0), small (576), tablet (768), desktop (992), large desktop (1200-1440). Add more only if your design truly needs them. Too many breakpoints increase complexity and maintenance burden.",[3903,3920,3922],{"icon":3905,"label":3921},"Should I use pixels, ems, or rems for breakpoints?","This is debated, but pixels are commonly used and work well for most cases. Some developers prefer ems\u002Frems because they respect user font size preferences in media queries. However, modern browsers handle media queries consistently, so choose what makes sense for your project and team.",[3903,3924,3926],{"icon":3905,"label":3925},"Can I change breakpoints at runtime?","The breakpoint variables themselves can be changed at runtime by overriding the CSS custom properties. However, media queries are evaluated by the browser based on the actual viewport size, so changing the CSS variable won't affect when media queries trigger. The variables are mainly useful for referencing consistent values throughout your styles.",[3903,3928,3930,3931,3933,3934,3937,3938,3941],{"icon":3905,"label":3929},"Should I define breakpoints in pixels or unitless numbers?","In ",[697,3932,767],{},", define them as unitless numbers (like ",[697,3935,3936],{},"992"," instead of ",[697,3939,3940],{},"'992px'","). This keeps your breakpoint definitions clean and makes them easier to work with in calculations.",[3903,3943,3945],{"icon":3905,"label":3944},"What's the difference between breakpoint variables and hard-coded values?","Breakpoint variables provide a single source of truth, making it easy to adjust your responsive design system globally. They also make your media queries more semantic and self-documenting. Hard-coded values are scattered throughout your codebase and harder to maintain consistently.",[3947,3948,3949],"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 .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}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}",{"title":783,"searchDepth":824,"depth":824,"links":3951},[3952,3953,3954,3958,3959,3963,3964],{"id":717,"depth":824,"text":78},{"id":724,"depth":824,"text":725},{"id":759,"depth":824,"text":699,"children":3955},[3956,3957],{"id":1181,"depth":847,"text":1182},{"id":1448,"depth":847,"text":1449},{"id":1776,"depth":824,"text":1777},{"id":2454,"depth":824,"text":2455,"children":3960},[3961,3962],{"id":2458,"depth":847,"text":2459},{"id":2933,"depth":847,"text":2934},{"id":3836,"depth":824,"text":3837},{"id":3897,"depth":824,"text":3898},"Create and manage responsive breakpoint design tokens with CSS variables for consistent media query handling and adaptive layouts across your application.",null,{},{"title":190,"icon":193},{"title":684,"description":3965},"4H8_UawsplkYHWLu-o5rAF6ZhaA9XeirnGBiMO_19jc",[3972,3974],{"title":185,"path":186,"stem":187,"description":3973,"icon":188,"children":-1},"Create and manage box shadow design tokens with CSS variables for consistent elevation and depth effects across your application.",{"title":195,"path":196,"stem":197,"description":3975,"icon":198,"children":-1},"Create and manage color design tokens with automatic, easily configurable variants, tints, and shades using the oklch color space.",1781596323042]