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