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