[{"data":1,"prerenderedAt":3683},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-composables-breakpoints":407,"-docs-theme-design-tokens-composables-breakpoints-surround":3678},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":3671,"extension":855,"links":3672,"meta":3673,"navigation":3674,"path":178,"seo":3675,"sitemap":3676,"stem":179,"__hash__":3677},"docs_theme/docs/theme/design-tokens/02.composables/03.breakpoints.md","Breakpoints Design Tokens",{"type":411,"value":412,"toc":3656},"minimark",[413,417,421,425,428,457,464,471,838,860,882,887,890,1150,1154,1157,1475,1478,1482,1485,2150,2157,2161,2165,2168,2636,2640,2643,3539,3543,3590,3601,3605,3652],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"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.",[414,422,424],{"id":423},"why-use-breakpoint-composables","Why use breakpoint composables?",[418,426,427],{},"Breakpoint composables help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Centralize breakpoint values",": Define all your responsive breakpoints in one place for easy management.",[432,440,441,444],{},[435,442,443],{},"Enable flexible theming",": Override breakpoint values to instantly adjust responsive behavior across your application.",[432,446,447,450],{},[435,448,449],{},"Maintain consistency",": Use semantic names to ensure consistent breakpoint usage throughout your design system.",[432,452,453,456],{},[435,454,455],{},"Simplify media queries",": Reference breakpoint variables instead of hard-coding pixel values in every media query.",[414,458,460],{"id":459},"usebreakpointdesigntokens",[461,462,463],"code",{},"useBreakpointDesignTokens",[418,465,466,467,470],{},"The ",[461,468,469],{},"useBreakpointDesignTokens()"," function creates a set of breakpoint variables from a simple object of breakpoint value definitions.",[472,473,474,739],"tabs",{},[475,476,479],"tabs-item",{"icon":477,"label":478},"i-lucide-code","Code",[480,481,487],"pre",{"className":482,"code":483,"filename":484,"language":485,"meta":486,"style":486},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\n/**\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 */\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","",[461,488,489,525,548,554,575,580,587,593,599,605,611,617,623,629,635,641,647,655,664,672,680,688,696,704,720,725],{"__ignoreMap":486},[490,491,494,498,502,506,509,512,515,519,522],"span",{"class":492,"line":493},"line",1,[490,495,497],{"class":496},"s7zQu","import",[490,499,501],{"class":500},"sMK4o"," {",[490,503,505],{"class":504},"sTEyZ"," styleframe",[490,507,508],{"class":500}," }",[490,510,511],{"class":496}," from",[490,513,514],{"class":500}," '",[490,516,518],{"class":517},"sfazB","styleframe",[490,520,521],{"class":500},"'",[490,523,524],{"class":500},";\n",[490,526,528,530,532,535,537,539,541,544,546],{"class":492,"line":527},2,[490,529,497],{"class":496},[490,531,501],{"class":500},[490,533,534],{"class":504}," useBreakpointDesignTokens",[490,536,508],{"class":500},[490,538,511],{"class":496},[490,540,514],{"class":500},[490,542,543],{"class":517},"@styleframe/theme",[490,545,521],{"class":500},[490,547,524],{"class":500},[490,549,551],{"class":492,"line":550},3,[490,552,553],{"emptyLinePlaceholder":206},"\n",[490,555,557,561,564,567,570,573],{"class":492,"line":556},4,[490,558,560],{"class":559},"spNyl","const",[490,562,563],{"class":504}," s ",[490,565,566],{"class":500},"=",[490,568,505],{"class":569},"s2Zo4",[490,571,572],{"class":504},"()",[490,574,524],{"class":500},[490,576,578],{"class":492,"line":577},5,[490,579,553],{"emptyLinePlaceholder":206},[490,581,583],{"class":492,"line":582},6,[490,584,586],{"class":585},"sHwdD","/**\n",[490,588,590],{"class":492,"line":589},7,[490,591,592],{"class":585}," * Use default breakpoint values\n",[490,594,596],{"class":492,"line":595},8,[490,597,598],{"class":585}," * {\n",[490,600,602],{"class":492,"line":601},9,[490,603,604],{"class":585}," *   xs: 0,\n",[490,606,608],{"class":492,"line":607},10,[490,609,610],{"class":585}," *   sm: 576,\n",[490,612,614],{"class":492,"line":613},11,[490,615,616],{"class":585}," *   md: 768,\n",[490,618,620],{"class":492,"line":619},12,[490,621,622],{"class":585}," *   lg: 992,\n",[490,624,626],{"class":492,"line":625},13,[490,627,628],{"class":585}," *   xl: 1200,\n",[490,630,632],{"class":492,"line":631},14,[490,633,634],{"class":585}," *   '2xl': 1440,\n",[490,636,638],{"class":492,"line":637},15,[490,639,640],{"class":585}," * }\n",[490,642,644],{"class":492,"line":643},16,[490,645,646],{"class":585}," */\n",[490,648,650,652],{"class":492,"line":649},17,[490,651,560],{"class":559},[490,653,654],{"class":500}," {\n",[490,656,658,661],{"class":492,"line":657},18,[490,659,660],{"class":504},"    breakpointXs",[490,662,663],{"class":500},",\n",[490,665,667,670],{"class":492,"line":666},19,[490,668,669],{"class":504},"    breakpointSm",[490,671,663],{"class":500},[490,673,675,678],{"class":492,"line":674},20,[490,676,677],{"class":504},"    breakpointMd",[490,679,663],{"class":500},[490,681,683,686],{"class":492,"line":682},21,[490,684,685],{"class":504},"    breakpointLg",[490,687,663],{"class":500},[490,689,691,694],{"class":492,"line":690},22,[490,692,693],{"class":504},"    breakpointXl",[490,695,663],{"class":500},[490,697,699,702],{"class":492,"line":698},23,[490,700,701],{"class":504},"    breakpoint2xl",[490,703,663],{"class":500},[490,705,707,710,713,715,718],{"class":492,"line":706},24,[490,708,709],{"class":500},"}",[490,711,712],{"class":500}," =",[490,714,534],{"class":569},[490,716,717],{"class":504},"(s)",[490,719,524],{"class":500},[490,721,723],{"class":492,"line":722},25,[490,724,553],{"emptyLinePlaceholder":206},[490,726,728,731,734,737],{"class":492,"line":727},26,[490,729,730],{"class":496},"export",[490,732,733],{"class":496}," default",[490,735,736],{"class":504}," s",[490,738,524],{"class":500},[475,740,742],{"icon":140,"label":741},"Output",[480,743,748],{"className":744,"code":745,"filename":746,"language":747,"meta":486,"style":486},"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/index.css","css",[461,749,750,760,773,785,797,809,821,833],{"__ignoreMap":486},[490,751,752,755,758],{"class":492,"line":493},[490,753,754],{"class":500},":",[490,756,757],{"class":559},"root",[490,759,654],{"class":500},[490,761,762,765,767,771],{"class":492,"line":527},[490,763,764],{"class":504},"    --breakpoint--xs",[490,766,754],{"class":500},[490,768,770],{"class":769},"sbssI"," 0",[490,772,524],{"class":500},[490,774,775,778,780,783],{"class":492,"line":550},[490,776,777],{"class":504},"    --breakpoint--sm",[490,779,754],{"class":500},[490,781,782],{"class":769}," 576",[490,784,524],{"class":500},[490,786,787,790,792,795],{"class":492,"line":556},[490,788,789],{"class":504},"    --breakpoint--md",[490,791,754],{"class":500},[490,793,794],{"class":769}," 768",[490,796,524],{"class":500},[490,798,799,802,804,807],{"class":492,"line":577},[490,800,801],{"class":504},"    --breakpoint--lg",[490,803,754],{"class":500},[490,805,806],{"class":769}," 992",[490,808,524],{"class":500},[490,810,811,814,816,819],{"class":492,"line":582},[490,812,813],{"class":504},"    --breakpoint--xl",[490,815,754],{"class":500},[490,817,818],{"class":769}," 1200",[490,820,524],{"class":500},[490,822,823,826,828,831],{"class":492,"line":589},[490,824,825],{"class":504},"    --breakpoint--2xl",[490,827,754],{"class":500},[490,829,830],{"class":769}," 1440",[490,832,524],{"class":500},[490,834,835],{"class":492,"line":595},[490,836,837],{"class":500},"}\n",[418,839,840,841,844,845,848,849,852,853,848,856,859],{},"Each key in the object becomes a breakpoint variable with the prefix ",[461,842,843],{},"breakpoint--",", and the export name is automatically converted to camelCase (e.g., ",[461,846,847],{},"xs"," → ",[461,850,851],{},"breakpointXs",", ",[461,854,855],{},"md",[461,857,858],{},"breakpointMd",").",[861,862,863,866,867,852,869,852,872,852,874,877,878,881],"tip",{},[435,864,865],{},"Pro tip:"," Use semantic names like ",[461,868,847],{},[461,870,871],{},"sm",[461,873,855],{},[461,875,876],{},"lg",", and ",[461,879,880],{},"xl"," to create a consistent responsive system that's easy to understand and maintain across your application.",[883,884,886],"h3",{"id":885},"creating-custom-breakpoint-variables","Creating Custom Breakpoint Variables",[418,888,889],{},"You can provide your own custom breakpoint values to match your design system's needs.",[472,891,892,1087],{},[475,893,894],{"icon":477,"label":478},[480,895,897],{"className":482,"code":896,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens } from '@styleframe/theme';\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",[461,898,899,919,939,943,957,961,967,974,981,988,995,1011,1024,1035,1047,1058,1073,1077],{"__ignoreMap":486},[490,900,901,903,905,907,909,911,913,915,917],{"class":492,"line":493},[490,902,497],{"class":496},[490,904,501],{"class":500},[490,906,505],{"class":504},[490,908,508],{"class":500},[490,910,511],{"class":496},[490,912,514],{"class":500},[490,914,518],{"class":517},[490,916,521],{"class":500},[490,918,524],{"class":500},[490,920,921,923,925,927,929,931,933,935,937],{"class":492,"line":527},[490,922,497],{"class":496},[490,924,501],{"class":500},[490,926,534],{"class":504},[490,928,508],{"class":500},[490,930,511],{"class":496},[490,932,514],{"class":500},[490,934,543],{"class":517},[490,936,521],{"class":500},[490,938,524],{"class":500},[490,940,941],{"class":492,"line":550},[490,942,553],{"emptyLinePlaceholder":206},[490,944,945,947,949,951,953,955],{"class":492,"line":556},[490,946,560],{"class":559},[490,948,563],{"class":504},[490,950,566],{"class":500},[490,952,505],{"class":569},[490,954,572],{"class":504},[490,956,524],{"class":500},[490,958,959],{"class":492,"line":577},[490,960,553],{"emptyLinePlaceholder":206},[490,962,963,965],{"class":492,"line":582},[490,964,560],{"class":559},[490,966,654],{"class":500},[490,968,969,972],{"class":492,"line":589},[490,970,971],{"class":504},"    breakpointMobile",[490,973,663],{"class":500},[490,975,976,979],{"class":492,"line":595},[490,977,978],{"class":504},"    breakpointTablet",[490,980,663],{"class":500},[490,982,983,986],{"class":492,"line":601},[490,984,985],{"class":504},"    breakpointLaptop",[490,987,663],{"class":500},[490,989,990,993],{"class":492,"line":607},[490,991,992],{"class":504},"    breakpointDesktop",[490,994,663],{"class":500},[490,996,997,999,1001,1003,1006,1009],{"class":492,"line":613},[490,998,709],{"class":500},[490,1000,712],{"class":500},[490,1002,534],{"class":569},[490,1004,1005],{"class":504},"(s",[490,1007,1008],{"class":500},",",[490,1010,654],{"class":500},[490,1012,1013,1017,1019,1022],{"class":492,"line":619},[490,1014,1016],{"class":1015},"swJcz","    mobile",[490,1018,754],{"class":500},[490,1020,1021],{"class":769}," 320",[490,1023,663],{"class":500},[490,1025,1026,1029,1031,1033],{"class":492,"line":625},[490,1027,1028],{"class":1015},"    tablet",[490,1030,754],{"class":500},[490,1032,794],{"class":769},[490,1034,663],{"class":500},[490,1036,1037,1040,1042,1045],{"class":492,"line":631},[490,1038,1039],{"class":1015},"    laptop",[490,1041,754],{"class":500},[490,1043,1044],{"class":769}," 1024",[490,1046,663],{"class":500},[490,1048,1049,1052,1054,1056],{"class":492,"line":637},[490,1050,1051],{"class":1015},"    desktop",[490,1053,754],{"class":500},[490,1055,830],{"class":769},[490,1057,663],{"class":500},[490,1059,1060,1062,1065,1068,1071],{"class":492,"line":643},[490,1061,709],{"class":500},[490,1063,1064],{"class":496}," as",[490,1066,1067],{"class":559}," const",[490,1069,1070],{"class":504},")",[490,1072,524],{"class":500},[490,1074,1075],{"class":492,"line":649},[490,1076,553],{"emptyLinePlaceholder":206},[490,1078,1079,1081,1083,1085],{"class":492,"line":657},[490,1080,730],{"class":496},[490,1082,733],{"class":496},[490,1084,736],{"class":504},[490,1086,524],{"class":500},[475,1088,1089],{"icon":140,"label":741},[480,1090,1092],{"className":744,"code":1091,"filename":746,"language":747,"meta":486,"style":486},":root {\n    --breakpoint--mobile: 320;\n    --breakpoint--tablet: 768;\n    --breakpoint--laptop: 1024;\n    --breakpoint--desktop: 1440;\n}\n",[461,1093,1094,1102,1113,1124,1135,1146],{"__ignoreMap":486},[490,1095,1096,1098,1100],{"class":492,"line":493},[490,1097,754],{"class":500},[490,1099,757],{"class":559},[490,1101,654],{"class":500},[490,1103,1104,1107,1109,1111],{"class":492,"line":527},[490,1105,1106],{"class":504},"    --breakpoint--mobile",[490,1108,754],{"class":500},[490,1110,1021],{"class":769},[490,1112,524],{"class":500},[490,1114,1115,1118,1120,1122],{"class":492,"line":550},[490,1116,1117],{"class":504},"    --breakpoint--tablet",[490,1119,754],{"class":500},[490,1121,794],{"class":769},[490,1123,524],{"class":500},[490,1125,1126,1129,1131,1133],{"class":492,"line":556},[490,1127,1128],{"class":504},"    --breakpoint--laptop",[490,1130,754],{"class":500},[490,1132,1044],{"class":769},[490,1134,524],{"class":500},[490,1136,1137,1140,1142,1144],{"class":492,"line":577},[490,1138,1139],{"class":504},"    --breakpoint--desktop",[490,1141,754],{"class":500},[490,1143,830],{"class":769},[490,1145,524],{"class":500},[490,1147,1148],{"class":492,"line":582},[490,1149,837],{"class":500},[883,1151,1153],{"id":1152},"extending-the-default-breakpoint-variables","Extending the Default Breakpoint Variables",[418,1155,1156],{},"Styleframe provides default breakpoint values that you can import and use directly, so you don't have to manually define common breakpoint scales:",[472,1158,1159,1385],{},[475,1160,1161],{"icon":477,"label":478},[480,1162,1164],{"className":482,"code":1163,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens, defaultBreakpointValues } from '@styleframe/theme';\n\nconst s = styleframe();\n\n/**\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 */\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",[461,1165,1166,1186,1211,1215,1229,1233,1237,1241,1245,1249,1253,1257,1261,1265,1269,1273,1277,1283,1289,1295,1301,1307,1313,1319,1333,1343,1360,1369,1374],{"__ignoreMap":486},[490,1167,1168,1170,1172,1174,1176,1178,1180,1182,1184],{"class":492,"line":493},[490,1169,497],{"class":496},[490,1171,501],{"class":500},[490,1173,505],{"class":504},[490,1175,508],{"class":500},[490,1177,511],{"class":496},[490,1179,514],{"class":500},[490,1181,518],{"class":517},[490,1183,521],{"class":500},[490,1185,524],{"class":500},[490,1187,1188,1190,1192,1194,1196,1199,1201,1203,1205,1207,1209],{"class":492,"line":527},[490,1189,497],{"class":496},[490,1191,501],{"class":500},[490,1193,534],{"class":504},[490,1195,1008],{"class":500},[490,1197,1198],{"class":504}," defaultBreakpointValues",[490,1200,508],{"class":500},[490,1202,511],{"class":496},[490,1204,514],{"class":500},[490,1206,543],{"class":517},[490,1208,521],{"class":500},[490,1210,524],{"class":500},[490,1212,1213],{"class":492,"line":550},[490,1214,553],{"emptyLinePlaceholder":206},[490,1216,1217,1219,1221,1223,1225,1227],{"class":492,"line":556},[490,1218,560],{"class":559},[490,1220,563],{"class":504},[490,1222,566],{"class":500},[490,1224,505],{"class":569},[490,1226,572],{"class":504},[490,1228,524],{"class":500},[490,1230,1231],{"class":492,"line":577},[490,1232,553],{"emptyLinePlaceholder":206},[490,1234,1235],{"class":492,"line":582},[490,1236,586],{"class":585},[490,1238,1239],{"class":492,"line":589},[490,1240,592],{"class":585},[490,1242,1243],{"class":492,"line":595},[490,1244,598],{"class":585},[490,1246,1247],{"class":492,"line":601},[490,1248,604],{"class":585},[490,1250,1251],{"class":492,"line":607},[490,1252,610],{"class":585},[490,1254,1255],{"class":492,"line":613},[490,1256,616],{"class":585},[490,1258,1259],{"class":492,"line":619},[490,1260,622],{"class":585},[490,1262,1263],{"class":492,"line":625},[490,1264,628],{"class":585},[490,1266,1267],{"class":492,"line":631},[490,1268,634],{"class":585},[490,1270,1271],{"class":492,"line":637},[490,1272,640],{"class":585},[490,1274,1275],{"class":492,"line":643},[490,1276,646],{"class":585},[490,1278,1279,1281],{"class":492,"line":649},[490,1280,560],{"class":559},[490,1282,654],{"class":500},[490,1284,1285,1287],{"class":492,"line":657},[490,1286,660],{"class":504},[490,1288,663],{"class":500},[490,1290,1291,1293],{"class":492,"line":666},[490,1292,669],{"class":504},[490,1294,663],{"class":500},[490,1296,1297,1299],{"class":492,"line":674},[490,1298,677],{"class":504},[490,1300,663],{"class":500},[490,1302,1303,1305],{"class":492,"line":682},[490,1304,685],{"class":504},[490,1306,663],{"class":500},[490,1308,1309,1311],{"class":492,"line":690},[490,1310,693],{"class":504},[490,1312,663],{"class":500},[490,1314,1315,1317],{"class":492,"line":698},[490,1316,701],{"class":504},[490,1318,663],{"class":500},[490,1320,1321,1323,1325,1327,1329,1331],{"class":492,"line":706},[490,1322,709],{"class":500},[490,1324,712],{"class":500},[490,1326,534],{"class":569},[490,1328,1005],{"class":504},[490,1330,1008],{"class":500},[490,1332,654],{"class":500},[490,1334,1335,1338,1341],{"class":492,"line":722},[490,1336,1337],{"class":500},"    ...",[490,1339,1340],{"class":504},"defaultBreakpointValues",[490,1342,663],{"class":500},[490,1344,1345,1348,1351,1353,1355,1358],{"class":492,"line":727},[490,1346,1347],{"class":500},"    '",[490,1349,1350],{"class":1015},"3xl",[490,1352,521],{"class":500},[490,1354,754],{"class":500},[490,1356,1357],{"class":769}," 1920",[490,1359,663],{"class":500},[490,1361,1363,1365,1367],{"class":492,"line":1362},27,[490,1364,709],{"class":500},[490,1366,1070],{"class":504},[490,1368,524],{"class":500},[490,1370,1372],{"class":492,"line":1371},28,[490,1373,553],{"emptyLinePlaceholder":206},[490,1375,1377,1379,1381,1383],{"class":492,"line":1376},29,[490,1378,730],{"class":496},[490,1380,733],{"class":496},[490,1382,736],{"class":504},[490,1384,524],{"class":500},[475,1386,1387],{"icon":140,"label":741},[480,1388,1390],{"className":744,"code":1389,"filename":746,"language":747,"meta":486,"style":486},":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",[461,1391,1392,1400,1410,1420,1430,1440,1450,1460,1471],{"__ignoreMap":486},[490,1393,1394,1396,1398],{"class":492,"line":493},[490,1395,754],{"class":500},[490,1397,757],{"class":559},[490,1399,654],{"class":500},[490,1401,1402,1404,1406,1408],{"class":492,"line":527},[490,1403,764],{"class":504},[490,1405,754],{"class":500},[490,1407,770],{"class":769},[490,1409,524],{"class":500},[490,1411,1412,1414,1416,1418],{"class":492,"line":550},[490,1413,777],{"class":504},[490,1415,754],{"class":500},[490,1417,782],{"class":769},[490,1419,524],{"class":500},[490,1421,1422,1424,1426,1428],{"class":492,"line":556},[490,1423,789],{"class":504},[490,1425,754],{"class":500},[490,1427,794],{"class":769},[490,1429,524],{"class":500},[490,1431,1432,1434,1436,1438],{"class":492,"line":577},[490,1433,801],{"class":504},[490,1435,754],{"class":500},[490,1437,806],{"class":769},[490,1439,524],{"class":500},[490,1441,1442,1444,1446,1448],{"class":492,"line":582},[490,1443,813],{"class":504},[490,1445,754],{"class":500},[490,1447,818],{"class":769},[490,1449,524],{"class":500},[490,1451,1452,1454,1456,1458],{"class":492,"line":589},[490,1453,825],{"class":504},[490,1455,754],{"class":500},[490,1457,830],{"class":769},[490,1459,524],{"class":500},[490,1461,1462,1465,1467,1469],{"class":492,"line":595},[490,1463,1464],{"class":504},"    --breakpoint--3xl",[490,1466,754],{"class":500},[490,1468,1357],{"class":769},[490,1470,524],{"class":500},[490,1472,1473],{"class":492,"line":601},[490,1474,837],{"class":500},[418,1476,1477],{},"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.",[414,1479,1481],{"id":1480},"using-breakpoint-variables-in-media-queries","Using Breakpoint Variables in Media Queries",[418,1483,1484],{},"Once created, breakpoint variables can be used in media queries throughout your styles:",[472,1486,1487,1945],{},[475,1488,1489],{"icon":477,"label":478},[480,1490,1492],{"className":482,"code":1491,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens } from '@styleframe/theme';\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// 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// Desktop and up\nmedia(`screen and (min-width: ${breakpointLg.value}px)`, () => {\n    selector('.container', {\n        maxWidth: '960px',\n    });\n});\n\nexport default s;\n",[461,1493,1494,1514,1534,1538,1552,1579,1583,1614,1625,1636,1647,1659,1663,1682,1698,1714,1722,1726,1731,1772,1789,1805,1821,1830,1838,1842,1847,1880,1896,1911,1920,1929,1934],{"__ignoreMap":486},[490,1495,1496,1498,1500,1502,1504,1506,1508,1510,1512],{"class":492,"line":493},[490,1497,497],{"class":496},[490,1499,501],{"class":500},[490,1501,505],{"class":504},[490,1503,508],{"class":500},[490,1505,511],{"class":496},[490,1507,514],{"class":500},[490,1509,518],{"class":517},[490,1511,521],{"class":500},[490,1513,524],{"class":500},[490,1515,1516,1518,1520,1522,1524,1526,1528,1530,1532],{"class":492,"line":527},[490,1517,497],{"class":496},[490,1519,501],{"class":500},[490,1521,534],{"class":504},[490,1523,508],{"class":500},[490,1525,511],{"class":496},[490,1527,514],{"class":500},[490,1529,543],{"class":517},[490,1531,521],{"class":500},[490,1533,524],{"class":500},[490,1535,1536],{"class":492,"line":550},[490,1537,553],{"emptyLinePlaceholder":206},[490,1539,1540,1542,1544,1546,1548,1550],{"class":492,"line":556},[490,1541,560],{"class":559},[490,1543,563],{"class":504},[490,1545,566],{"class":500},[490,1547,505],{"class":569},[490,1549,572],{"class":504},[490,1551,524],{"class":500},[490,1553,1554,1556,1558,1561,1563,1566,1568,1571,1573,1575,1577],{"class":492,"line":577},[490,1555,560],{"class":559},[490,1557,501],{"class":500},[490,1559,1560],{"class":504}," ref",[490,1562,1008],{"class":500},[490,1564,1565],{"class":504}," selector",[490,1567,1008],{"class":500},[490,1569,1570],{"class":504}," media ",[490,1572,709],{"class":500},[490,1574,712],{"class":500},[490,1576,736],{"class":504},[490,1578,524],{"class":500},[490,1580,1581],{"class":492,"line":582},[490,1582,553],{"emptyLinePlaceholder":206},[490,1584,1585,1587,1589,1592,1594,1597,1599,1602,1604,1606,1608,1610,1612],{"class":492,"line":589},[490,1586,560],{"class":559},[490,1588,501],{"class":500},[490,1590,1591],{"class":504}," breakpointSm",[490,1593,1008],{"class":500},[490,1595,1596],{"class":504}," breakpointMd",[490,1598,1008],{"class":500},[490,1600,1601],{"class":504}," breakpointLg ",[490,1603,709],{"class":500},[490,1605,712],{"class":500},[490,1607,534],{"class":569},[490,1609,1005],{"class":504},[490,1611,1008],{"class":500},[490,1613,654],{"class":500},[490,1615,1616,1619,1621,1623],{"class":492,"line":595},[490,1617,1618],{"class":1015},"    sm",[490,1620,754],{"class":500},[490,1622,782],{"class":769},[490,1624,663],{"class":500},[490,1626,1627,1630,1632,1634],{"class":492,"line":601},[490,1628,1629],{"class":1015},"    md",[490,1631,754],{"class":500},[490,1633,794],{"class":769},[490,1635,663],{"class":500},[490,1637,1638,1641,1643,1645],{"class":492,"line":607},[490,1639,1640],{"class":1015},"    lg",[490,1642,754],{"class":500},[490,1644,806],{"class":769},[490,1646,663],{"class":500},[490,1648,1649,1651,1653,1655,1657],{"class":492,"line":613},[490,1650,709],{"class":500},[490,1652,1064],{"class":496},[490,1654,1067],{"class":559},[490,1656,1070],{"class":504},[490,1658,524],{"class":500},[490,1660,1661],{"class":492,"line":619},[490,1662,553],{"emptyLinePlaceholder":206},[490,1664,1665,1668,1671,1673,1676,1678,1680],{"class":492,"line":625},[490,1666,1667],{"class":569},"selector",[490,1669,1670],{"class":504},"(",[490,1672,521],{"class":500},[490,1674,1675],{"class":517},".container",[490,1677,521],{"class":500},[490,1679,1008],{"class":500},[490,1681,654],{"class":500},[490,1683,1684,1687,1689,1691,1694,1696],{"class":492,"line":631},[490,1685,1686],{"class":1015},"    width",[490,1688,754],{"class":500},[490,1690,514],{"class":500},[490,1692,1693],{"class":517},"100%",[490,1695,521],{"class":500},[490,1697,663],{"class":500},[490,1699,1700,1703,1705,1707,1710,1712],{"class":492,"line":637},[490,1701,1702],{"class":1015},"    padding",[490,1704,754],{"class":500},[490,1706,514],{"class":500},[490,1708,1709],{"class":517},"1rem",[490,1711,521],{"class":500},[490,1713,663],{"class":500},[490,1715,1716,1718,1720],{"class":492,"line":643},[490,1717,709],{"class":500},[490,1719,1070],{"class":504},[490,1721,524],{"class":500},[490,1723,1724],{"class":492,"line":649},[490,1725,553],{"emptyLinePlaceholder":206},[490,1727,1728],{"class":492,"line":657},[490,1729,1730],{"class":585},"// Tablet and up\n",[490,1732,1733,1736,1738,1741,1744,1747,1749,1752,1755,1757,1760,1762,1764,1767,1770],{"class":492,"line":666},[490,1734,1735],{"class":569},"media",[490,1737,1670],{"class":504},[490,1739,1740],{"class":500},"`",[490,1742,1743],{"class":517},"screen and (min-width: ",[490,1745,1746],{"class":500},"${",[490,1748,858],{"class":504},[490,1750,1751],{"class":500},".",[490,1753,1754],{"class":504},"value",[490,1756,709],{"class":500},[490,1758,1759],{"class":517},"px)",[490,1761,1740],{"class":500},[490,1763,1008],{"class":500},[490,1765,1766],{"class":500}," ()",[490,1768,1769],{"class":559}," =>",[490,1771,654],{"class":500},[490,1773,1774,1777,1779,1781,1783,1785,1787],{"class":492,"line":674},[490,1775,1776],{"class":569},"    selector",[490,1778,1670],{"class":1015},[490,1780,521],{"class":500},[490,1782,1675],{"class":517},[490,1784,521],{"class":500},[490,1786,1008],{"class":500},[490,1788,654],{"class":500},[490,1790,1791,1794,1796,1798,1801,1803],{"class":492,"line":682},[490,1792,1793],{"class":1015},"        maxWidth",[490,1795,754],{"class":500},[490,1797,514],{"class":500},[490,1799,1800],{"class":517},"720px",[490,1802,521],{"class":500},[490,1804,663],{"class":500},[490,1806,1807,1810,1812,1814,1817,1819],{"class":492,"line":690},[490,1808,1809],{"class":1015},"        margin",[490,1811,754],{"class":500},[490,1813,514],{"class":500},[490,1815,1816],{"class":517},"0 auto",[490,1818,521],{"class":500},[490,1820,663],{"class":500},[490,1822,1823,1826,1828],{"class":492,"line":698},[490,1824,1825],{"class":500},"    }",[490,1827,1070],{"class":1015},[490,1829,524],{"class":500},[490,1831,1832,1834,1836],{"class":492,"line":706},[490,1833,709],{"class":500},[490,1835,1070],{"class":504},[490,1837,524],{"class":500},[490,1839,1840],{"class":492,"line":722},[490,1841,553],{"emptyLinePlaceholder":206},[490,1843,1844],{"class":492,"line":727},[490,1845,1846],{"class":585},"// Desktop and up\n",[490,1848,1849,1851,1853,1855,1857,1859,1862,1864,1866,1868,1870,1872,1874,1876,1878],{"class":492,"line":1362},[490,1850,1735],{"class":569},[490,1852,1670],{"class":504},[490,1854,1740],{"class":500},[490,1856,1743],{"class":517},[490,1858,1746],{"class":500},[490,1860,1861],{"class":504},"breakpointLg",[490,1863,1751],{"class":500},[490,1865,1754],{"class":504},[490,1867,709],{"class":500},[490,1869,1759],{"class":517},[490,1871,1740],{"class":500},[490,1873,1008],{"class":500},[490,1875,1766],{"class":500},[490,1877,1769],{"class":559},[490,1879,654],{"class":500},[490,1881,1882,1884,1886,1888,1890,1892,1894],{"class":492,"line":1371},[490,1883,1776],{"class":569},[490,1885,1670],{"class":1015},[490,1887,521],{"class":500},[490,1889,1675],{"class":517},[490,1891,521],{"class":500},[490,1893,1008],{"class":500},[490,1895,654],{"class":500},[490,1897,1898,1900,1902,1904,1907,1909],{"class":492,"line":1376},[490,1899,1793],{"class":1015},[490,1901,754],{"class":500},[490,1903,514],{"class":500},[490,1905,1906],{"class":517},"960px",[490,1908,521],{"class":500},[490,1910,663],{"class":500},[490,1912,1914,1916,1918],{"class":492,"line":1913},30,[490,1915,1825],{"class":500},[490,1917,1070],{"class":1015},[490,1919,524],{"class":500},[490,1921,1923,1925,1927],{"class":492,"line":1922},31,[490,1924,709],{"class":500},[490,1926,1070],{"class":504},[490,1928,524],{"class":500},[490,1930,1932],{"class":492,"line":1931},32,[490,1933,553],{"emptyLinePlaceholder":206},[490,1935,1937,1939,1941,1943],{"class":492,"line":1936},33,[490,1938,730],{"class":496},[490,1940,733],{"class":496},[490,1942,736],{"class":504},[490,1944,524],{"class":500},[475,1946,1947],{"icon":140,"label":741},[480,1948,1950],{"className":744,"code":1949,"filename":746,"language":747,"meta":486,"style":486},":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",[461,1951,1952,1960,1970,1980,1990,1994,1998,2008,2020,2031,2035,2039,2059,2068,2080,2093,2098,2102,2106,2123,2131,2142,2146],{"__ignoreMap":486},[490,1953,1954,1956,1958],{"class":492,"line":493},[490,1955,754],{"class":500},[490,1957,757],{"class":559},[490,1959,654],{"class":500},[490,1961,1962,1964,1966,1968],{"class":492,"line":527},[490,1963,777],{"class":504},[490,1965,754],{"class":500},[490,1967,782],{"class":769},[490,1969,524],{"class":500},[490,1971,1972,1974,1976,1978],{"class":492,"line":550},[490,1973,789],{"class":504},[490,1975,754],{"class":500},[490,1977,794],{"class":769},[490,1979,524],{"class":500},[490,1981,1982,1984,1986,1988],{"class":492,"line":556},[490,1983,801],{"class":504},[490,1985,754],{"class":500},[490,1987,806],{"class":769},[490,1989,524],{"class":500},[490,1991,1992],{"class":492,"line":577},[490,1993,837],{"class":500},[490,1995,1996],{"class":492,"line":582},[490,1997,553],{"emptyLinePlaceholder":206},[490,1999,2000,2002,2006],{"class":492,"line":589},[490,2001,1751],{"class":500},[490,2003,2005],{"class":2004},"sBMFI","container",[490,2007,654],{"class":500},[490,2009,2010,2013,2015,2018],{"class":492,"line":595},[490,2011,1686],{"class":2012},"sqsOY",[490,2014,754],{"class":500},[490,2016,2017],{"class":769}," 100%",[490,2019,524],{"class":500},[490,2021,2022,2024,2026,2029],{"class":492,"line":601},[490,2023,1702],{"class":2012},[490,2025,754],{"class":500},[490,2027,2028],{"class":769}," 1rem",[490,2030,524],{"class":500},[490,2032,2033],{"class":492,"line":607},[490,2034,837],{"class":500},[490,2036,2037],{"class":492,"line":613},[490,2038,553],{"emptyLinePlaceholder":206},[490,2040,2041,2044,2047,2050,2052,2055,2057],{"class":492,"line":619},[490,2042,2043],{"class":496},"@media",[490,2045,2046],{"class":500}," (",[490,2048,2049],{"class":2004},"min-width",[490,2051,754],{"class":500},[490,2053,2054],{"class":769}," 768px",[490,2056,1070],{"class":500},[490,2058,654],{"class":500},[490,2060,2061,2064,2066],{"class":492,"line":625},[490,2062,2063],{"class":500},"    .",[490,2065,2005],{"class":2004},[490,2067,654],{"class":500},[490,2069,2070,2073,2075,2078],{"class":492,"line":631},[490,2071,2072],{"class":2012},"        max-width",[490,2074,754],{"class":500},[490,2076,2077],{"class":769}," 720px",[490,2079,524],{"class":500},[490,2081,2082,2084,2086,2088,2091],{"class":492,"line":637},[490,2083,1809],{"class":2012},[490,2085,754],{"class":500},[490,2087,770],{"class":769},[490,2089,2090],{"class":504}," auto",[490,2092,524],{"class":500},[490,2094,2095],{"class":492,"line":643},[490,2096,2097],{"class":500},"    }\n",[490,2099,2100],{"class":492,"line":649},[490,2101,837],{"class":500},[490,2103,2104],{"class":492,"line":657},[490,2105,553],{"emptyLinePlaceholder":206},[490,2107,2108,2110,2112,2114,2116,2119,2121],{"class":492,"line":666},[490,2109,2043],{"class":496},[490,2111,2046],{"class":500},[490,2113,2049],{"class":2004},[490,2115,754],{"class":500},[490,2117,2118],{"class":769}," 992px",[490,2120,1070],{"class":500},[490,2122,654],{"class":500},[490,2124,2125,2127,2129],{"class":492,"line":674},[490,2126,2063],{"class":500},[490,2128,2005],{"class":2004},[490,2130,654],{"class":500},[490,2132,2133,2135,2137,2140],{"class":492,"line":682},[490,2134,2072],{"class":2012},[490,2136,754],{"class":500},[490,2138,2139],{"class":769}," 960px",[490,2141,524],{"class":500},[490,2143,2144],{"class":492,"line":690},[490,2145,2097],{"class":500},[490,2147,2148],{"class":492,"line":698},[490,2149,837],{"class":500},[2151,2152,2153,2156],"caution",{},[435,2154,2155],{},"Important:"," We reference breakpoint values in media queries because CSS does not support referencing variables in media queries yet.",[414,2158,2160],{"id":2159},"examples","Examples",[883,2162,2164],{"id":2163},"range-based-media-queries","Range-Based Media Queries",[418,2166,2167],{},"Use breakpoints to create range-based media queries for specific viewport sizes:",[472,2169,2170,2486],{},[475,2171,2172],{"icon":477,"label":478},[480,2173,2175],{"className":482,"code":2174,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens, defaultBreakpointValues } from '@styleframe/theme';\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// 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",[461,2176,2177,2197,2221,2225,2239,2263,2267,2290,2304,2308,2325,2341,2349,2353,2358,2369,2385,2397,2408,2424,2440,2456,2464,2472,2476],{"__ignoreMap":486},[490,2178,2179,2181,2183,2185,2187,2189,2191,2193,2195],{"class":492,"line":493},[490,2180,497],{"class":496},[490,2182,501],{"class":500},[490,2184,505],{"class":504},[490,2186,508],{"class":500},[490,2188,511],{"class":496},[490,2190,514],{"class":500},[490,2192,518],{"class":517},[490,2194,521],{"class":500},[490,2196,524],{"class":500},[490,2198,2199,2201,2203,2205,2207,2209,2211,2213,2215,2217,2219],{"class":492,"line":527},[490,2200,497],{"class":496},[490,2202,501],{"class":500},[490,2204,534],{"class":504},[490,2206,1008],{"class":500},[490,2208,1198],{"class":504},[490,2210,508],{"class":500},[490,2212,511],{"class":496},[490,2214,514],{"class":500},[490,2216,543],{"class":517},[490,2218,521],{"class":500},[490,2220,524],{"class":500},[490,2222,2223],{"class":492,"line":550},[490,2224,553],{"emptyLinePlaceholder":206},[490,2226,2227,2229,2231,2233,2235,2237],{"class":492,"line":556},[490,2228,560],{"class":559},[490,2230,563],{"class":504},[490,2232,566],{"class":500},[490,2234,505],{"class":569},[490,2236,572],{"class":504},[490,2238,524],{"class":500},[490,2240,2241,2243,2245,2247,2249,2251,2253,2255,2257,2259,2261],{"class":492,"line":577},[490,2242,560],{"class":559},[490,2244,501],{"class":500},[490,2246,1560],{"class":504},[490,2248,1008],{"class":500},[490,2250,1565],{"class":504},[490,2252,1008],{"class":500},[490,2254,1570],{"class":504},[490,2256,709],{"class":500},[490,2258,712],{"class":500},[490,2260,736],{"class":504},[490,2262,524],{"class":500},[490,2264,2265],{"class":492,"line":582},[490,2266,553],{"emptyLinePlaceholder":206},[490,2268,2269,2271,2273,2275,2277,2279,2281,2283,2285,2287],{"class":492,"line":589},[490,2270,560],{"class":559},[490,2272,501],{"class":500},[490,2274,1591],{"class":504},[490,2276,1008],{"class":500},[490,2278,1596],{"class":504},[490,2280,1008],{"class":500},[490,2282,1601],{"class":504},[490,2284,709],{"class":500},[490,2286,712],{"class":500},[490,2288,2289],{"class":504}," \n",[490,2291,2292,2295,2297,2299,2302],{"class":492,"line":595},[490,2293,2294],{"class":569},"    useBreakpointDesignTokens",[490,2296,1005],{"class":504},[490,2298,1008],{"class":500},[490,2300,2301],{"class":504}," defaultBreakpointValues)",[490,2303,524],{"class":500},[490,2305,2306],{"class":492,"line":601},[490,2307,553],{"emptyLinePlaceholder":206},[490,2309,2310,2312,2314,2316,2319,2321,2323],{"class":492,"line":607},[490,2311,1667],{"class":569},[490,2313,1670],{"class":504},[490,2315,521],{"class":500},[490,2317,2318],{"class":517},".sidebar",[490,2320,521],{"class":500},[490,2322,1008],{"class":500},[490,2324,654],{"class":500},[490,2326,2327,2330,2332,2334,2337,2339],{"class":492,"line":613},[490,2328,2329],{"class":1015},"    display",[490,2331,754],{"class":500},[490,2333,514],{"class":500},[490,2335,2336],{"class":517},"none",[490,2338,521],{"class":500},[490,2340,663],{"class":500},[490,2342,2343,2345,2347],{"class":492,"line":619},[490,2344,709],{"class":500},[490,2346,1070],{"class":504},[490,2348,524],{"class":500},[490,2350,2351],{"class":492,"line":625},[490,2352,553],{"emptyLinePlaceholder":206},[490,2354,2355],{"class":492,"line":631},[490,2356,2357],{"class":585},"// Show sidebar only on tablets (between sm and lg)\n",[490,2359,2360,2362,2364,2367],{"class":492,"line":637},[490,2361,1735],{"class":569},[490,2363,1670],{"class":504},[490,2365,2366],{"class":500},"{",[490,2368,2289],{"class":504},[490,2370,2371,2374,2376,2378,2381,2383],{"class":492,"line":643},[490,2372,2373],{"class":1015},"    minWidth",[490,2375,754],{"class":500},[490,2377,1560],{"class":569},[490,2379,2380],{"class":504},"(breakpointSm)",[490,2382,1008],{"class":500},[490,2384,2289],{"class":504},[490,2386,2387,2390,2392,2394],{"class":492,"line":649},[490,2388,2389],{"class":1015},"    maxWidth",[490,2391,754],{"class":500},[490,2393,1560],{"class":569},[490,2395,2396],{"class":504},"(breakpointLg) \n",[490,2398,2399,2402,2404,2406],{"class":492,"line":657},[490,2400,2401],{"class":500},"},",[490,2403,1766],{"class":500},[490,2405,1769],{"class":559},[490,2407,654],{"class":500},[490,2409,2410,2412,2414,2416,2418,2420,2422],{"class":492,"line":666},[490,2411,1776],{"class":569},[490,2413,1670],{"class":1015},[490,2415,521],{"class":500},[490,2417,2318],{"class":517},[490,2419,521],{"class":500},[490,2421,1008],{"class":500},[490,2423,654],{"class":500},[490,2425,2426,2429,2431,2433,2436,2438],{"class":492,"line":674},[490,2427,2428],{"class":1015},"        display",[490,2430,754],{"class":500},[490,2432,514],{"class":500},[490,2434,2435],{"class":517},"block",[490,2437,521],{"class":500},[490,2439,663],{"class":500},[490,2441,2442,2445,2447,2449,2452,2454],{"class":492,"line":682},[490,2443,2444],{"class":1015},"        width",[490,2446,754],{"class":500},[490,2448,514],{"class":500},[490,2450,2451],{"class":517},"250px",[490,2453,521],{"class":500},[490,2455,663],{"class":500},[490,2457,2458,2460,2462],{"class":492,"line":690},[490,2459,1825],{"class":500},[490,2461,1070],{"class":1015},[490,2463,524],{"class":500},[490,2465,2466,2468,2470],{"class":492,"line":698},[490,2467,709],{"class":500},[490,2469,1070],{"class":504},[490,2471,524],{"class":500},[490,2473,2474],{"class":492,"line":706},[490,2475,553],{"emptyLinePlaceholder":206},[490,2477,2478,2480,2482,2484],{"class":492,"line":722},[490,2479,730],{"class":496},[490,2481,733],{"class":496},[490,2483,736],{"class":504},[490,2485,524],{"class":500},[475,2487,2488],{"icon":140,"label":741},[480,2489,2491],{"className":744,"code":2490,"filename":746,"language":747,"meta":486,"style":486},":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",[461,2492,2493,2501,2511,2521,2531,2535,2539,2548,2559,2563,2567,2598,2606,2617,2628,2632],{"__ignoreMap":486},[490,2494,2495,2497,2499],{"class":492,"line":493},[490,2496,754],{"class":500},[490,2498,757],{"class":559},[490,2500,654],{"class":500},[490,2502,2503,2505,2507,2509],{"class":492,"line":527},[490,2504,777],{"class":504},[490,2506,754],{"class":500},[490,2508,782],{"class":769},[490,2510,524],{"class":500},[490,2512,2513,2515,2517,2519],{"class":492,"line":550},[490,2514,789],{"class":504},[490,2516,754],{"class":500},[490,2518,794],{"class":769},[490,2520,524],{"class":500},[490,2522,2523,2525,2527,2529],{"class":492,"line":556},[490,2524,801],{"class":504},[490,2526,754],{"class":500},[490,2528,806],{"class":769},[490,2530,524],{"class":500},[490,2532,2533],{"class":492,"line":577},[490,2534,837],{"class":500},[490,2536,2537],{"class":492,"line":582},[490,2538,553],{"emptyLinePlaceholder":206},[490,2540,2541,2543,2546],{"class":492,"line":589},[490,2542,1751],{"class":500},[490,2544,2545],{"class":2004},"sidebar",[490,2547,654],{"class":500},[490,2549,2550,2552,2554,2557],{"class":492,"line":595},[490,2551,2329],{"class":2012},[490,2553,754],{"class":500},[490,2555,2556],{"class":504}," none",[490,2558,524],{"class":500},[490,2560,2561],{"class":492,"line":601},[490,2562,837],{"class":500},[490,2564,2565],{"class":492,"line":607},[490,2566,553],{"emptyLinePlaceholder":206},[490,2568,2569,2571,2573,2575,2577,2580,2582,2585,2587,2590,2592,2594,2596],{"class":492,"line":613},[490,2570,2043],{"class":496},[490,2572,2046],{"class":500},[490,2574,2049],{"class":2004},[490,2576,754],{"class":500},[490,2578,2579],{"class":769}," 576px",[490,2581,1070],{"class":500},[490,2583,2584],{"class":500}," and",[490,2586,2046],{"class":500},[490,2588,2589],{"class":2004},"max-width",[490,2591,754],{"class":500},[490,2593,2118],{"class":769},[490,2595,1070],{"class":500},[490,2597,654],{"class":500},[490,2599,2600,2602,2604],{"class":492,"line":619},[490,2601,2063],{"class":500},[490,2603,2545],{"class":2004},[490,2605,654],{"class":500},[490,2607,2608,2610,2612,2615],{"class":492,"line":625},[490,2609,2428],{"class":2012},[490,2611,754],{"class":500},[490,2613,2614],{"class":504}," block",[490,2616,524],{"class":500},[490,2618,2619,2621,2623,2626],{"class":492,"line":631},[490,2620,2444],{"class":2012},[490,2622,754],{"class":500},[490,2624,2625],{"class":769}," 250px",[490,2627,524],{"class":500},[490,2629,2630],{"class":492,"line":637},[490,2631,2097],{"class":500},[490,2633,2634],{"class":492,"line":643},[490,2635,837],{"class":500},[883,2637,2639],{"id":2638},"custom-breakpoint-scale","Custom Breakpoint Scale",[418,2641,2642],{},"Create a custom breakpoint scale tailored to your specific design needs:",[472,2644,2645,3249],{},[475,2646,2647],{"icon":477,"label":478},[480,2648,2650],{"className":482,"code":2649,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { ref, selector, media } = s;\n\n// 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",[461,2651,2652,2672,2692,2696,2710,2734,2738,2743,2749,2755,2761,2767,2774,2781,2795,2805,2815,2825,2836,2848,2860,2864,2881,2897,2913,2921,2925,2958,2974,2990,3006,3014,3022,3026,3060,3077,3093,3109,3118,3127,3132,3166,3183,3199,3215,3224,3233,3238],{"__ignoreMap":486},[490,2653,2654,2656,2658,2660,2662,2664,2666,2668,2670],{"class":492,"line":493},[490,2655,497],{"class":496},[490,2657,501],{"class":500},[490,2659,505],{"class":504},[490,2661,508],{"class":500},[490,2663,511],{"class":496},[490,2665,514],{"class":500},[490,2667,518],{"class":517},[490,2669,521],{"class":500},[490,2671,524],{"class":500},[490,2673,2674,2676,2678,2680,2682,2684,2686,2688,2690],{"class":492,"line":527},[490,2675,497],{"class":496},[490,2677,501],{"class":500},[490,2679,534],{"class":504},[490,2681,508],{"class":500},[490,2683,511],{"class":496},[490,2685,514],{"class":500},[490,2687,543],{"class":517},[490,2689,521],{"class":500},[490,2691,524],{"class":500},[490,2693,2694],{"class":492,"line":550},[490,2695,553],{"emptyLinePlaceholder":206},[490,2697,2698,2700,2702,2704,2706,2708],{"class":492,"line":556},[490,2699,560],{"class":559},[490,2701,563],{"class":504},[490,2703,566],{"class":500},[490,2705,505],{"class":569},[490,2707,572],{"class":504},[490,2709,524],{"class":500},[490,2711,2712,2714,2716,2718,2720,2722,2724,2726,2728,2730,2732],{"class":492,"line":577},[490,2713,560],{"class":559},[490,2715,501],{"class":500},[490,2717,1560],{"class":504},[490,2719,1008],{"class":500},[490,2721,1565],{"class":504},[490,2723,1008],{"class":500},[490,2725,1570],{"class":504},[490,2727,709],{"class":500},[490,2729,712],{"class":500},[490,2731,736],{"class":504},[490,2733,524],{"class":500},[490,2735,2736],{"class":492,"line":582},[490,2737,553],{"emptyLinePlaceholder":206},[490,2739,2740],{"class":492,"line":589},[490,2741,2742],{"class":585},"// Custom breakpoints for a specific application\n",[490,2744,2745,2747],{"class":492,"line":595},[490,2746,560],{"class":559},[490,2748,654],{"class":500},[490,2750,2751,2753],{"class":492,"line":601},[490,2752,971],{"class":504},[490,2754,663],{"class":500},[490,2756,2757,2759],{"class":492,"line":607},[490,2758,978],{"class":504},[490,2760,663],{"class":500},[490,2762,2763,2765],{"class":492,"line":613},[490,2764,992],{"class":504},[490,2766,663],{"class":500},[490,2768,2769,2772],{"class":492,"line":619},[490,2770,2771],{"class":504},"    breakpointWide",[490,2773,663],{"class":500},[490,2775,2776,2779],{"class":492,"line":625},[490,2777,2778],{"class":504},"    breakpointUltrawide",[490,2780,663],{"class":500},[490,2782,2783,2785,2787,2789,2791,2793],{"class":492,"line":631},[490,2784,709],{"class":500},[490,2786,712],{"class":500},[490,2788,534],{"class":569},[490,2790,1005],{"class":504},[490,2792,1008],{"class":500},[490,2794,654],{"class":500},[490,2796,2797,2799,2801,2803],{"class":492,"line":637},[490,2798,1016],{"class":1015},[490,2800,754],{"class":500},[490,2802,770],{"class":769},[490,2804,663],{"class":500},[490,2806,2807,2809,2811,2813],{"class":492,"line":643},[490,2808,1028],{"class":1015},[490,2810,754],{"class":500},[490,2812,794],{"class":769},[490,2814,663],{"class":500},[490,2816,2817,2819,2821,2823],{"class":492,"line":649},[490,2818,1051],{"class":1015},[490,2820,754],{"class":500},[490,2822,1044],{"class":769},[490,2824,663],{"class":500},[490,2826,2827,2830,2832,2834],{"class":492,"line":657},[490,2828,2829],{"class":1015},"    wide",[490,2831,754],{"class":500},[490,2833,1357],{"class":769},[490,2835,663],{"class":500},[490,2837,2838,2841,2843,2846],{"class":492,"line":666},[490,2839,2840],{"class":1015},"    ultrawide",[490,2842,754],{"class":500},[490,2844,2845],{"class":769}," 2560",[490,2847,663],{"class":500},[490,2849,2850,2852,2854,2856,2858],{"class":492,"line":674},[490,2851,709],{"class":500},[490,2853,1064],{"class":496},[490,2855,1067],{"class":559},[490,2857,1070],{"class":504},[490,2859,524],{"class":500},[490,2861,2862],{"class":492,"line":682},[490,2863,553],{"emptyLinePlaceholder":206},[490,2865,2866,2868,2870,2872,2875,2877,2879],{"class":492,"line":690},[490,2867,1667],{"class":569},[490,2869,1670],{"class":504},[490,2871,521],{"class":500},[490,2873,2874],{"class":517},".hero",[490,2876,521],{"class":500},[490,2878,1008],{"class":500},[490,2880,654],{"class":500},[490,2882,2883,2886,2888,2890,2893,2895],{"class":492,"line":698},[490,2884,2885],{"class":1015},"    minHeight",[490,2887,754],{"class":500},[490,2889,514],{"class":500},[490,2891,2892],{"class":517},"400px",[490,2894,521],{"class":500},[490,2896,663],{"class":500},[490,2898,2899,2902,2904,2906,2909,2911],{"class":492,"line":706},[490,2900,2901],{"class":1015},"    fontSize",[490,2903,754],{"class":500},[490,2905,514],{"class":500},[490,2907,2908],{"class":517},"1.5rem",[490,2910,521],{"class":500},[490,2912,663],{"class":500},[490,2914,2915,2917,2919],{"class":492,"line":722},[490,2916,709],{"class":500},[490,2918,1070],{"class":504},[490,2920,524],{"class":500},[490,2922,2923],{"class":492,"line":727},[490,2924,553],{"emptyLinePlaceholder":206},[490,2926,2927,2929,2931,2933,2935,2937,2940,2942,2944,2946,2948,2950,2952,2954,2956],{"class":492,"line":1362},[490,2928,1735],{"class":569},[490,2930,1670],{"class":504},[490,2932,1740],{"class":500},[490,2934,1743],{"class":517},[490,2936,1746],{"class":500},[490,2938,2939],{"class":504},"breakpointTablet",[490,2941,1751],{"class":500},[490,2943,1754],{"class":504},[490,2945,709],{"class":500},[490,2947,1759],{"class":517},[490,2949,1740],{"class":500},[490,2951,1008],{"class":500},[490,2953,1766],{"class":500},[490,2955,1769],{"class":559},[490,2957,654],{"class":500},[490,2959,2960,2962,2964,2966,2968,2970,2972],{"class":492,"line":1371},[490,2961,1776],{"class":569},[490,2963,1670],{"class":1015},[490,2965,521],{"class":500},[490,2967,2874],{"class":517},[490,2969,521],{"class":500},[490,2971,1008],{"class":500},[490,2973,654],{"class":500},[490,2975,2976,2979,2981,2983,2986,2988],{"class":492,"line":1376},[490,2977,2978],{"class":1015},"        minHeight",[490,2980,754],{"class":500},[490,2982,514],{"class":500},[490,2984,2985],{"class":517},"500px",[490,2987,521],{"class":500},[490,2989,663],{"class":500},[490,2991,2992,2995,2997,2999,3002,3004],{"class":492,"line":1913},[490,2993,2994],{"class":1015},"        fontSize",[490,2996,754],{"class":500},[490,2998,514],{"class":500},[490,3000,3001],{"class":517},"2rem",[490,3003,521],{"class":500},[490,3005,663],{"class":500},[490,3007,3008,3010,3012],{"class":492,"line":1922},[490,3009,1825],{"class":500},[490,3011,1070],{"class":1015},[490,3013,524],{"class":500},[490,3015,3016,3018,3020],{"class":492,"line":1931},[490,3017,709],{"class":500},[490,3019,1070],{"class":504},[490,3021,524],{"class":500},[490,3023,3024],{"class":492,"line":1936},[490,3025,553],{"emptyLinePlaceholder":206},[490,3027,3029,3031,3033,3035,3037,3039,3042,3044,3046,3048,3050,3052,3054,3056,3058],{"class":492,"line":3028},34,[490,3030,1735],{"class":569},[490,3032,1670],{"class":504},[490,3034,1740],{"class":500},[490,3036,1743],{"class":517},[490,3038,1746],{"class":500},[490,3040,3041],{"class":504},"breakpointDesktop",[490,3043,1751],{"class":500},[490,3045,1754],{"class":504},[490,3047,709],{"class":500},[490,3049,1759],{"class":517},[490,3051,1740],{"class":500},[490,3053,1008],{"class":500},[490,3055,1766],{"class":500},[490,3057,1769],{"class":559},[490,3059,654],{"class":500},[490,3061,3063,3065,3067,3069,3071,3073,3075],{"class":492,"line":3062},35,[490,3064,1776],{"class":569},[490,3066,1670],{"class":1015},[490,3068,521],{"class":500},[490,3070,2874],{"class":517},[490,3072,521],{"class":500},[490,3074,1008],{"class":500},[490,3076,654],{"class":500},[490,3078,3080,3082,3084,3086,3089,3091],{"class":492,"line":3079},36,[490,3081,2978],{"class":1015},[490,3083,754],{"class":500},[490,3085,514],{"class":500},[490,3087,3088],{"class":517},"600px",[490,3090,521],{"class":500},[490,3092,663],{"class":500},[490,3094,3096,3098,3100,3102,3105,3107],{"class":492,"line":3095},37,[490,3097,2994],{"class":1015},[490,3099,754],{"class":500},[490,3101,514],{"class":500},[490,3103,3104],{"class":517},"2.5rem",[490,3106,521],{"class":500},[490,3108,663],{"class":500},[490,3110,3112,3114,3116],{"class":492,"line":3111},38,[490,3113,1825],{"class":500},[490,3115,1070],{"class":1015},[490,3117,524],{"class":500},[490,3119,3121,3123,3125],{"class":492,"line":3120},39,[490,3122,709],{"class":500},[490,3124,1070],{"class":504},[490,3126,524],{"class":500},[490,3128,3130],{"class":492,"line":3129},40,[490,3131,553],{"emptyLinePlaceholder":206},[490,3133,3135,3137,3139,3141,3143,3145,3148,3150,3152,3154,3156,3158,3160,3162,3164],{"class":492,"line":3134},41,[490,3136,1735],{"class":569},[490,3138,1670],{"class":504},[490,3140,1740],{"class":500},[490,3142,1743],{"class":517},[490,3144,1746],{"class":500},[490,3146,3147],{"class":504},"breakpointWide",[490,3149,1751],{"class":500},[490,3151,1754],{"class":504},[490,3153,709],{"class":500},[490,3155,1759],{"class":517},[490,3157,1740],{"class":500},[490,3159,1008],{"class":500},[490,3161,1766],{"class":500},[490,3163,1769],{"class":559},[490,3165,654],{"class":500},[490,3167,3169,3171,3173,3175,3177,3179,3181],{"class":492,"line":3168},42,[490,3170,1776],{"class":569},[490,3172,1670],{"class":1015},[490,3174,521],{"class":500},[490,3176,2874],{"class":517},[490,3178,521],{"class":500},[490,3180,1008],{"class":500},[490,3182,654],{"class":500},[490,3184,3186,3188,3190,3192,3195,3197],{"class":492,"line":3185},43,[490,3187,2978],{"class":1015},[490,3189,754],{"class":500},[490,3191,514],{"class":500},[490,3193,3194],{"class":517},"800px",[490,3196,521],{"class":500},[490,3198,663],{"class":500},[490,3200,3202,3204,3206,3208,3211,3213],{"class":492,"line":3201},44,[490,3203,2994],{"class":1015},[490,3205,754],{"class":500},[490,3207,514],{"class":500},[490,3209,3210],{"class":517},"3rem",[490,3212,521],{"class":500},[490,3214,663],{"class":500},[490,3216,3218,3220,3222],{"class":492,"line":3217},45,[490,3219,1825],{"class":500},[490,3221,1070],{"class":1015},[490,3223,524],{"class":500},[490,3225,3227,3229,3231],{"class":492,"line":3226},46,[490,3228,709],{"class":500},[490,3230,1070],{"class":504},[490,3232,524],{"class":500},[490,3234,3236],{"class":492,"line":3235},47,[490,3237,553],{"emptyLinePlaceholder":206},[490,3239,3241,3243,3245,3247],{"class":492,"line":3240},48,[490,3242,730],{"class":496},[490,3244,733],{"class":496},[490,3246,736],{"class":504},[490,3248,524],{"class":500},[475,3250,3251],{"icon":140,"label":741},[480,3252,3254],{"className":744,"code":3253,"filename":746,"language":747,"meta":486,"style":486},":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",[461,3255,3256,3264,3274,3284,3294,3305,3316,3320,3324,3333,3345,3357,3361,3365,3381,3389,3401,3413,3417,3421,3425,3442,3450,3461,3472,3476,3480,3484,3501,3509,3520,3531,3535],{"__ignoreMap":486},[490,3257,3258,3260,3262],{"class":492,"line":493},[490,3259,754],{"class":500},[490,3261,757],{"class":559},[490,3263,654],{"class":500},[490,3265,3266,3268,3270,3272],{"class":492,"line":527},[490,3267,1106],{"class":504},[490,3269,754],{"class":500},[490,3271,770],{"class":769},[490,3273,524],{"class":500},[490,3275,3276,3278,3280,3282],{"class":492,"line":550},[490,3277,1117],{"class":504},[490,3279,754],{"class":500},[490,3281,794],{"class":769},[490,3283,524],{"class":500},[490,3285,3286,3288,3290,3292],{"class":492,"line":556},[490,3287,1139],{"class":504},[490,3289,754],{"class":500},[490,3291,1044],{"class":769},[490,3293,524],{"class":500},[490,3295,3296,3299,3301,3303],{"class":492,"line":577},[490,3297,3298],{"class":504},"    --breakpoint--wide",[490,3300,754],{"class":500},[490,3302,1357],{"class":769},[490,3304,524],{"class":500},[490,3306,3307,3310,3312,3314],{"class":492,"line":582},[490,3308,3309],{"class":504},"    --breakpoint--ultrawide",[490,3311,754],{"class":500},[490,3313,2845],{"class":769},[490,3315,524],{"class":500},[490,3317,3318],{"class":492,"line":589},[490,3319,837],{"class":500},[490,3321,3322],{"class":492,"line":595},[490,3323,553],{"emptyLinePlaceholder":206},[490,3325,3326,3328,3331],{"class":492,"line":601},[490,3327,1751],{"class":500},[490,3329,3330],{"class":2004},"hero",[490,3332,654],{"class":500},[490,3334,3335,3338,3340,3343],{"class":492,"line":607},[490,3336,3337],{"class":2012},"    min-height",[490,3339,754],{"class":500},[490,3341,3342],{"class":769}," 400px",[490,3344,524],{"class":500},[490,3346,3347,3350,3352,3355],{"class":492,"line":613},[490,3348,3349],{"class":2012},"    font-size",[490,3351,754],{"class":500},[490,3353,3354],{"class":769}," 1.5rem",[490,3356,524],{"class":500},[490,3358,3359],{"class":492,"line":619},[490,3360,837],{"class":500},[490,3362,3363],{"class":492,"line":625},[490,3364,553],{"emptyLinePlaceholder":206},[490,3366,3367,3369,3371,3373,3375,3377,3379],{"class":492,"line":631},[490,3368,2043],{"class":496},[490,3370,2046],{"class":500},[490,3372,2049],{"class":2004},[490,3374,754],{"class":500},[490,3376,2054],{"class":769},[490,3378,1070],{"class":500},[490,3380,654],{"class":500},[490,3382,3383,3385,3387],{"class":492,"line":637},[490,3384,2063],{"class":500},[490,3386,3330],{"class":2004},[490,3388,654],{"class":500},[490,3390,3391,3394,3396,3399],{"class":492,"line":643},[490,3392,3393],{"class":2012},"        min-height",[490,3395,754],{"class":500},[490,3397,3398],{"class":769}," 500px",[490,3400,524],{"class":500},[490,3402,3403,3406,3408,3411],{"class":492,"line":649},[490,3404,3405],{"class":2012},"        font-size",[490,3407,754],{"class":500},[490,3409,3410],{"class":769}," 2rem",[490,3412,524],{"class":500},[490,3414,3415],{"class":492,"line":657},[490,3416,2097],{"class":500},[490,3418,3419],{"class":492,"line":666},[490,3420,837],{"class":500},[490,3422,3423],{"class":492,"line":674},[490,3424,553],{"emptyLinePlaceholder":206},[490,3426,3427,3429,3431,3433,3435,3438,3440],{"class":492,"line":682},[490,3428,2043],{"class":496},[490,3430,2046],{"class":500},[490,3432,2049],{"class":2004},[490,3434,754],{"class":500},[490,3436,3437],{"class":769}," 1024px",[490,3439,1070],{"class":500},[490,3441,654],{"class":500},[490,3443,3444,3446,3448],{"class":492,"line":690},[490,3445,2063],{"class":500},[490,3447,3330],{"class":2004},[490,3449,654],{"class":500},[490,3451,3452,3454,3456,3459],{"class":492,"line":698},[490,3453,3393],{"class":2012},[490,3455,754],{"class":500},[490,3457,3458],{"class":769}," 600px",[490,3460,524],{"class":500},[490,3462,3463,3465,3467,3470],{"class":492,"line":706},[490,3464,3405],{"class":2012},[490,3466,754],{"class":500},[490,3468,3469],{"class":769}," 2.5rem",[490,3471,524],{"class":500},[490,3473,3474],{"class":492,"line":722},[490,3475,2097],{"class":500},[490,3477,3478],{"class":492,"line":727},[490,3479,837],{"class":500},[490,3481,3482],{"class":492,"line":1362},[490,3483,553],{"emptyLinePlaceholder":206},[490,3485,3486,3488,3490,3492,3494,3497,3499],{"class":492,"line":1371},[490,3487,2043],{"class":496},[490,3489,2046],{"class":500},[490,3491,2049],{"class":2004},[490,3493,754],{"class":500},[490,3495,3496],{"class":769}," 1920px",[490,3498,1070],{"class":500},[490,3500,654],{"class":500},[490,3502,3503,3505,3507],{"class":492,"line":1376},[490,3504,2063],{"class":500},[490,3506,3330],{"class":2004},[490,3508,654],{"class":500},[490,3510,3511,3513,3515,3518],{"class":492,"line":1913},[490,3512,3393],{"class":2012},[490,3514,754],{"class":500},[490,3516,3517],{"class":769}," 800px",[490,3519,524],{"class":500},[490,3521,3522,3524,3526,3529],{"class":492,"line":1922},[490,3523,3405],{"class":2012},[490,3525,754],{"class":500},[490,3527,3528],{"class":769}," 3rem",[490,3530,524],{"class":500},[490,3532,3533],{"class":492,"line":1931},[490,3534,2097],{"class":500},[490,3536,3537],{"class":492,"line":1936},[490,3538,837],{"class":500},[414,3540,3542],{"id":3541},"best-practices","Best Practices",[429,3544,3545,3554,3560,3566,3572,3578,3584],{},[432,3546,3547,3550,3551,3553],{},[435,3548,3549],{},"Use mobile-first approach",": Start with mobile styles and progressively enhance for larger screens using ",[461,3552,2049],{}," media queries.",[432,3555,3556,3559],{},[435,3557,3558],{},"Keep breakpoints consistent",": Limit your breakpoints to 4-6 key sizes. Too many breakpoints make maintenance difficult.",[432,3561,3562,3565],{},[435,3563,3564],{},"Choose meaningful values",": Use semantic values that reflect device categories or layout changes rather than arbitrary sizes.",[432,3567,3568,3571],{},[435,3569,3570],{},"Avoid device-specific breakpoints",": Design for content, not specific devices. Breakpoints should be based on when your layout needs to adapt.",[432,3573,3574,3577],{},[435,3575,3576],{},"Test between breakpoints",": Ensure your design works at all viewport sizes, not just at the exact breakpoint values.",[432,3579,3580,3583],{},[435,3581,3582],{},"Consider orientation",": For mobile devices, you may want separate breakpoints for portrait and landscape orientations.",[432,3585,3586,3589],{},[435,3587,3588],{},"Document your breakpoint strategy",": Make it clear when and why each breakpoint should be used in your design system.",[3591,3592,3593,3596,3597,3600],"note",{},[435,3594,3595],{},"Good to know:"," We use ",[461,3598,3599],{},"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.",[414,3602,3604],{"id":3603},"faq","FAQ",[3606,3607,3608,3614,3621,3625,3629,3633,3648],"accordion",{},[3609,3610,3613],"accordion-item",{"icon":3611,"label":3612},"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.",[3609,3615,3617,3618,3620],{"icon":3611,"label":3616},"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 ",[461,3619,2049],{}," media queries to enhance for larger screens.",[3609,3622,3624],{"icon":3611,"label":3623},"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.",[3609,3626,3628],{"icon":3611,"label":3627},"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/rems 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.",[3609,3630,3632],{"icon":3611,"label":3631},"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.",[3609,3634,3636,3637,3639,3640,3643,3644,3647],{"icon":3611,"label":3635},"Should I define breakpoints in pixels or unitless numbers?","In ",[461,3638,469],{},", define them as unitless numbers (like ",[461,3641,3642],{},"992"," instead of ",[461,3645,3646],{},"'992px'","). This keeps your breakpoint definitions clean and makes them easier to work with in calculations.",[3609,3649,3651],{"icon":3611,"label":3650},"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.",[3653,3654,3655],"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":486,"searchDepth":527,"depth":527,"links":3657},[3658,3659,3660,3664,3665,3669,3670],{"id":416,"depth":527,"text":64},{"id":423,"depth":527,"text":424},{"id":459,"depth":527,"text":463,"children":3661},[3662,3663],{"id":885,"depth":550,"text":886},{"id":1152,"depth":550,"text":1153},{"id":1480,"depth":527,"text":1481},{"id":2159,"depth":527,"text":2160,"children":3666},[3667,3668],{"id":2163,"depth":550,"text":2164},{"id":2638,"depth":550,"text":2639},{"id":3541,"depth":527,"text":3542},{"id":3603,"depth":527,"text":3604},"Create and manage responsive breakpoint design tokens with CSS variables for consistent media query handling and adaptive layouts across your application.",null,{},{"title":177,"icon":7},{"title":409,"description":3671},{"loc":178},"Eot6NSFRuCQzxTdMU_Z5D0BLNC1PClsHJXM3Ll-NsyY",[3679,3681],{"title":173,"path":174,"stem":175,"description":3680,"icon":7,"children":-1},"Create and manage box shadow design tokens with CSS variables for consistent elevation and depth effects across your application.",{"title":181,"path":182,"stem":183,"description":3682,"icon":7,"children":-1},"Create and manage color design tokens with automatic, easily configurable variants, tints, and shades using the oklch color space.",1776621132727]