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