[{"data":1,"prerenderedAt":3680},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-svg":682,"-docs-theme-utilities-svg-surround":3675},{"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":3668,"extension":3669,"links":3670,"meta":3671,"navigation":3672,"path":615,"seo":3673,"stem":616,"__hash__":3674},"docs_theme\u002Fdocs\u002Ftheme\u002Futilities\u002F13.svg.md","SVG Utilities",{"type":686,"value":687,"toc":3655},"minimark",[688,706,710,714,718,721,749,755,762,1492,1507,1513,1519,2083,2089,2095,2397,2401,2406,3204,3207,3304,3308,3454,3456,3571,3575,3614,3618,3651],[689,690,691,695,696,700,701,705],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Utilities Preset:"," The utilities on this page are registered by the ",[697,698,699],"a",{"href":565},"Utilities Preset"," (",[702,703,704],"code",{},"useUtilitiesPreset","). For most projects, applying them via the preset is the recommended approach.",[707,708,78],"h2",{"id":709},"overview",[711,712,713],"p",{},"SVG utilities help you style SVG elements including fill colors, stroke colors, and stroke widths. These utilities work with inline SVG elements and SVG icon components.",[707,715,717],{"id":716},"why-use-svg-utilities","Why Use SVG Utilities?",[711,719,720],{},"SVG utilities help you:",[722,723,724,731,737,743],"ul",{},[725,726,727,730],"li",{},[692,728,729],{},"Style icons consistently",": Apply colors from your design system to SVG icons",[725,732,733,736],{},[692,734,735],{},"Support theming",": SVG colors can automatically adapt to theme changes",[725,738,739,742],{},[692,740,741],{},"Create interactive states",": Combine with modifiers for hover and focus colors",[725,744,745,748],{},[692,746,747],{},"Control stroke appearance",": Adjust stroke width for different visual weights",[707,750,752],{"id":751},"usefillutility",[702,753,754],{},"useFillUtility",[711,756,757,758,761],{},"The ",[702,759,760],{},"useFillUtility()"," function creates utility classes for setting SVG fill colors.",[763,764,765,1139,1391],"tabs",{},[766,767,769],"tabs-item",{"icon":768,"label":290},"i-lucide-code",[770,771,777],"pre",{"className":772,"code":773,"filename":774,"language":775,"meta":776,"style":776},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { useFillUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { colorPrimary, colorGray500 } = useColorDesignTokens(s, {\n    primary: '#006cff',\n    gray500: '#6b7280',\n} as const);\n\nuseFillUtility(s, {\n    none: 'none',\n    current: 'currentColor',\n    primary: ref(colorPrimary),\n    gray: ref(colorGray500),\n    white: '#fff',\n    black: '#000',\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[702,778,779,815,838,860,866,887,908,913,943,965,982,998,1003,1014,1031,1048,1063,1078,1095,1112,1121,1126],{"__ignoreMap":776},[780,781,784,788,792,796,799,802,805,809,812],"span",{"class":782,"line":783},"line",1,[780,785,787],{"class":786},"s7zQu","import",[780,789,791],{"class":790},"sMK4o"," {",[780,793,795],{"class":794},"sTEyZ"," styleframe",[780,797,798],{"class":790}," }",[780,800,801],{"class":786}," from",[780,803,804],{"class":790}," \"",[780,806,808],{"class":807},"sfazB","styleframe",[780,810,811],{"class":790},"\"",[780,813,814],{"class":790},";\n",[780,816,818,820,822,825,827,829,831,834,836],{"class":782,"line":817},2,[780,819,787],{"class":786},[780,821,791],{"class":790},[780,823,824],{"class":794}," useColorDesignTokens",[780,826,798],{"class":790},[780,828,801],{"class":786},[780,830,804],{"class":790},[780,832,833],{"class":807},"@styleframe\u002Ftheme",[780,835,811],{"class":790},[780,837,814],{"class":790},[780,839,841,843,845,848,850,852,854,856,858],{"class":782,"line":840},3,[780,842,787],{"class":786},[780,844,791],{"class":790},[780,846,847],{"class":794}," useFillUtility",[780,849,798],{"class":790},[780,851,801],{"class":786},[780,853,804],{"class":790},[780,855,833],{"class":807},[780,857,811],{"class":790},[780,859,814],{"class":790},[780,861,863],{"class":782,"line":862},4,[780,864,865],{"emptyLinePlaceholder":223},"\n",[780,867,869,873,876,879,882,885],{"class":782,"line":868},5,[780,870,872],{"class":871},"spNyl","const",[780,874,875],{"class":794}," s ",[780,877,878],{"class":790},"=",[780,880,795],{"class":881},"s2Zo4",[780,883,884],{"class":794},"()",[780,886,814],{"class":790},[780,888,890,892,894,897,900,903,906],{"class":782,"line":889},6,[780,891,872],{"class":871},[780,893,791],{"class":790},[780,895,896],{"class":794}," ref ",[780,898,899],{"class":790},"}",[780,901,902],{"class":790}," =",[780,904,905],{"class":794}," s",[780,907,814],{"class":790},[780,909,911],{"class":782,"line":910},7,[780,912,865],{"emptyLinePlaceholder":223},[780,914,916,918,920,923,926,929,931,933,935,938,940],{"class":782,"line":915},8,[780,917,872],{"class":871},[780,919,791],{"class":790},[780,921,922],{"class":794}," colorPrimary",[780,924,925],{"class":790},",",[780,927,928],{"class":794}," colorGray500 ",[780,930,899],{"class":790},[780,932,902],{"class":790},[780,934,824],{"class":881},[780,936,937],{"class":794},"(s",[780,939,925],{"class":790},[780,941,942],{"class":790}," {\n",[780,944,946,950,953,956,959,962],{"class":782,"line":945},9,[780,947,949],{"class":948},"swJcz","    primary",[780,951,952],{"class":790},":",[780,954,955],{"class":790}," '",[780,957,958],{"class":807},"#006cff",[780,960,961],{"class":790},"'",[780,963,964],{"class":790},",\n",[780,966,968,971,973,975,978,980],{"class":782,"line":967},10,[780,969,970],{"class":948},"    gray500",[780,972,952],{"class":790},[780,974,955],{"class":790},[780,976,977],{"class":807},"#6b7280",[780,979,961],{"class":790},[780,981,964],{"class":790},[780,983,985,987,990,993,996],{"class":782,"line":984},11,[780,986,899],{"class":790},[780,988,989],{"class":786}," as",[780,991,992],{"class":871}," const",[780,994,995],{"class":794},")",[780,997,814],{"class":790},[780,999,1001],{"class":782,"line":1000},12,[780,1002,865],{"emptyLinePlaceholder":223},[780,1004,1006,1008,1010,1012],{"class":782,"line":1005},13,[780,1007,754],{"class":881},[780,1009,937],{"class":794},[780,1011,925],{"class":790},[780,1013,942],{"class":790},[780,1015,1017,1020,1022,1024,1027,1029],{"class":782,"line":1016},14,[780,1018,1019],{"class":948},"    none",[780,1021,952],{"class":790},[780,1023,955],{"class":790},[780,1025,1026],{"class":807},"none",[780,1028,961],{"class":790},[780,1030,964],{"class":790},[780,1032,1034,1037,1039,1041,1044,1046],{"class":782,"line":1033},15,[780,1035,1036],{"class":948},"    current",[780,1038,952],{"class":790},[780,1040,955],{"class":790},[780,1042,1043],{"class":807},"currentColor",[780,1045,961],{"class":790},[780,1047,964],{"class":790},[780,1049,1051,1053,1055,1058,1061],{"class":782,"line":1050},16,[780,1052,949],{"class":948},[780,1054,952],{"class":790},[780,1056,1057],{"class":881}," ref",[780,1059,1060],{"class":794},"(colorPrimary)",[780,1062,964],{"class":790},[780,1064,1066,1069,1071,1073,1076],{"class":782,"line":1065},17,[780,1067,1068],{"class":948},"    gray",[780,1070,952],{"class":790},[780,1072,1057],{"class":881},[780,1074,1075],{"class":794},"(colorGray500)",[780,1077,964],{"class":790},[780,1079,1081,1084,1086,1088,1091,1093],{"class":782,"line":1080},18,[780,1082,1083],{"class":948},"    white",[780,1085,952],{"class":790},[780,1087,955],{"class":790},[780,1089,1090],{"class":807},"#fff",[780,1092,961],{"class":790},[780,1094,964],{"class":790},[780,1096,1098,1101,1103,1105,1108,1110],{"class":782,"line":1097},19,[780,1099,1100],{"class":948},"    black",[780,1102,952],{"class":790},[780,1104,955],{"class":790},[780,1106,1107],{"class":807},"#000",[780,1109,961],{"class":790},[780,1111,964],{"class":790},[780,1113,1115,1117,1119],{"class":782,"line":1114},20,[780,1116,899],{"class":790},[780,1118,995],{"class":794},[780,1120,814],{"class":790},[780,1122,1124],{"class":782,"line":1123},21,[780,1125,865],{"emptyLinePlaceholder":223},[780,1127,1129,1132,1135,1137],{"class":782,"line":1128},22,[780,1130,1131],{"class":786},"export",[780,1133,1134],{"class":786}," default",[780,1136,905],{"class":794},[780,1138,814],{"class":790},[766,1140,1141],{"icon":154,"label":326},[770,1142,1147],{"className":1143,"code":1144,"filename":1145,"language":1146,"meta":776,"style":776},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --color--primary: oklch(0.5749 0.233917 259.9541 \u002F 1);\n    --color--gray-500: oklch(0.5513 0.0169 264.36 \u002F 1);\n}\n\n._fill\\:none { fill: none; }\n._fill\\:current { fill: currentColor; }\n._fill\\:primary { fill: var(--color--primary); }\n._fill\\:gray { fill: var(--color--gray-500); }\n._fill\\:white { fill: #fff; }\n._fill\\:black { fill: #000; }\n","styleframe\u002Findex.css","css",[702,1148,1149,1158,1190,1216,1221,1225,1256,1280,1310,1338,1365],{"__ignoreMap":776},[780,1150,1151,1153,1156],{"class":782,"line":783},[780,1152,952],{"class":790},[780,1154,1155],{"class":871},"root",[780,1157,942],{"class":790},[780,1159,1160,1163,1165,1168,1171,1175,1178,1181,1184,1187],{"class":782,"line":817},[780,1161,1162],{"class":794},"    --color--primary",[780,1164,952],{"class":790},[780,1166,1167],{"class":881}," oklch",[780,1169,1170],{"class":790},"(",[780,1172,1174],{"class":1173},"sbssI","0.5749",[780,1176,1177],{"class":1173}," 0.233917",[780,1179,1180],{"class":1173}," 259.9541",[780,1182,1183],{"class":794}," \u002F ",[780,1185,1186],{"class":1173},"1",[780,1188,1189],{"class":790},");\n",[780,1191,1192,1195,1197,1199,1201,1204,1207,1210,1212,1214],{"class":782,"line":840},[780,1193,1194],{"class":794},"    --color--gray-500",[780,1196,952],{"class":790},[780,1198,1167],{"class":881},[780,1200,1170],{"class":790},[780,1202,1203],{"class":1173},"0.5513",[780,1205,1206],{"class":1173}," 0.0169",[780,1208,1209],{"class":1173}," 264.36",[780,1211,1183],{"class":794},[780,1213,1186],{"class":1173},[780,1215,1189],{"class":790},[780,1217,1218],{"class":782,"line":862},[780,1219,1220],{"class":790},"}\n",[780,1222,1223],{"class":782,"line":868},[780,1224,865],{"emptyLinePlaceholder":223},[780,1226,1227,1230,1234,1237,1239,1241,1245,1247,1250,1253],{"class":782,"line":889},[780,1228,1229],{"class":790},".",[780,1231,1233],{"class":1232},"sBMFI","_fill",[780,1235,1236],{"class":794},"\\:",[780,1238,1026],{"class":1232},[780,1240,791],{"class":790},[780,1242,1244],{"class":1243},"sqsOY"," fill",[780,1246,952],{"class":790},[780,1248,1249],{"class":794}," none",[780,1251,1252],{"class":790},";",[780,1254,1255],{"class":790}," }\n",[780,1257,1258,1260,1262,1264,1267,1269,1271,1273,1276,1278],{"class":782,"line":910},[780,1259,1229],{"class":790},[780,1261,1233],{"class":1232},[780,1263,1236],{"class":794},[780,1265,1266],{"class":1232},"current",[780,1268,791],{"class":790},[780,1270,1244],{"class":1243},[780,1272,952],{"class":790},[780,1274,1275],{"class":794}," currentColor",[780,1277,1252],{"class":790},[780,1279,1255],{"class":790},[780,1281,1282,1284,1286,1288,1291,1293,1295,1297,1300,1302,1305,1308],{"class":782,"line":915},[780,1283,1229],{"class":790},[780,1285,1233],{"class":1232},[780,1287,1236],{"class":794},[780,1289,1290],{"class":1232},"primary",[780,1292,791],{"class":790},[780,1294,1244],{"class":1243},[780,1296,952],{"class":790},[780,1298,1299],{"class":881}," var",[780,1301,1170],{"class":790},[780,1303,1304],{"class":794},"--color--primary",[780,1306,1307],{"class":790},");",[780,1309,1255],{"class":790},[780,1311,1312,1314,1316,1318,1321,1323,1325,1327,1329,1331,1334,1336],{"class":782,"line":945},[780,1313,1229],{"class":790},[780,1315,1233],{"class":1232},[780,1317,1236],{"class":794},[780,1319,1320],{"class":1232},"gray",[780,1322,791],{"class":790},[780,1324,1244],{"class":1243},[780,1326,952],{"class":790},[780,1328,1299],{"class":881},[780,1330,1170],{"class":790},[780,1332,1333],{"class":794},"--color--gray-500",[780,1335,1307],{"class":790},[780,1337,1255],{"class":790},[780,1339,1340,1342,1344,1346,1349,1351,1353,1355,1358,1361,1363],{"class":782,"line":967},[780,1341,1229],{"class":790},[780,1343,1233],{"class":1232},[780,1345,1236],{"class":794},[780,1347,1348],{"class":1232},"white",[780,1350,791],{"class":790},[780,1352,1244],{"class":1243},[780,1354,952],{"class":790},[780,1356,1357],{"class":790}," #",[780,1359,1360],{"class":794},"fff",[780,1362,1252],{"class":790},[780,1364,1255],{"class":790},[780,1366,1367,1369,1371,1373,1376,1378,1380,1382,1384,1387,1389],{"class":782,"line":984},[780,1368,1229],{"class":790},[780,1370,1233],{"class":1232},[780,1372,1236],{"class":794},[780,1374,1375],{"class":1232},"black",[780,1377,791],{"class":790},[780,1379,1244],{"class":1243},[780,1381,952],{"class":790},[780,1383,1357],{"class":790},[780,1385,1386],{"class":794},"000",[780,1388,1252],{"class":790},[780,1390,1255],{"class":790},[766,1392,1394],{"icon":520,"label":1393},"Usage",[770,1395,1399],{"className":1396,"code":1397,"language":1398,"meta":776,"style":776},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Csvg class=\"_fill:primary\">\u003C!-- Primary colored icon -->\u003C\u002Fsvg>\n\u003Csvg class=\"_fill:current\">\u003C!-- Inherits text color -->\u003C\u002Fsvg>\n\u003Csvg class=\"_fill:none\">\u003C!-- No fill (for stroke icons) -->\u003C\u002Fsvg>\n","html",[702,1400,1401,1436,1464],{"__ignoreMap":776},[780,1402,1403,1406,1409,1412,1414,1416,1419,1421,1424,1428,1431,1433],{"class":782,"line":783},[780,1404,1405],{"class":790},"\u003C",[780,1407,1408],{"class":948},"svg",[780,1410,1411],{"class":871}," class",[780,1413,878],{"class":790},[780,1415,811],{"class":790},[780,1417,1418],{"class":807},"_fill:primary",[780,1420,811],{"class":790},[780,1422,1423],{"class":790},">",[780,1425,1427],{"class":1426},"sHwdD","\u003C!-- Primary colored icon -->",[780,1429,1430],{"class":790},"\u003C\u002F",[780,1432,1408],{"class":948},[780,1434,1435],{"class":790},">\n",[780,1437,1438,1440,1442,1444,1446,1448,1451,1453,1455,1458,1460,1462],{"class":782,"line":817},[780,1439,1405],{"class":790},[780,1441,1408],{"class":948},[780,1443,1411],{"class":871},[780,1445,878],{"class":790},[780,1447,811],{"class":790},[780,1449,1450],{"class":807},"_fill:current",[780,1452,811],{"class":790},[780,1454,1423],{"class":790},[780,1456,1457],{"class":1426},"\u003C!-- Inherits text color -->",[780,1459,1430],{"class":790},[780,1461,1408],{"class":948},[780,1463,1435],{"class":790},[780,1465,1466,1468,1470,1472,1474,1476,1479,1481,1483,1486,1488,1490],{"class":782,"line":840},[780,1467,1405],{"class":790},[780,1469,1408],{"class":948},[780,1471,1411],{"class":871},[780,1473,878],{"class":790},[780,1475,811],{"class":790},[780,1477,1478],{"class":807},"_fill:none",[780,1480,811],{"class":790},[780,1482,1423],{"class":790},[780,1484,1485],{"class":1426},"\u003C!-- No fill (for stroke icons) -->",[780,1487,1430],{"class":790},[780,1489,1408],{"class":948},[780,1491,1435],{"class":790},[1493,1494,1495,1498,1499,1502,1503,1506],"tip",{},[692,1496,1497],{},"Pro tip",": Use ",[702,1500,1501],{},"fill: currentColor"," to make SVG icons inherit their color from the parent element's ",[702,1504,1505],{},"color"," property.",[707,1508,1510],{"id":1509},"usestrokeutility",[702,1511,1512],{},"useStrokeUtility",[711,1514,757,1515,1518],{},[702,1516,1517],{},"useStrokeUtility()"," function creates utility classes for setting SVG stroke colors.",[763,1520,1521,1807,2020],{},[766,1522,1523],{"icon":768,"label":290},[770,1524,1526],{"className":772,"code":1525,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { useStrokeUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { colorPrimary, colorGray500 } = useColorDesignTokens(s, {\n    primary: '#006cff',\n    gray500: '#6b7280',\n} as const);\n\nuseStrokeUtility(s, {\n    none: 'none',\n    current: 'currentColor',\n    primary: ref(colorPrimary),\n    gray: ref(colorGray500),\n    white: '#fff',\n    black: '#000',\n});\n\nexport default s;\n",[702,1527,1528,1548,1568,1589,1593,1607,1623,1627,1651,1665,1679,1691,1695,1705,1719,1733,1745,1757,1771,1785,1793,1797],{"__ignoreMap":776},[780,1529,1530,1532,1534,1536,1538,1540,1542,1544,1546],{"class":782,"line":783},[780,1531,787],{"class":786},[780,1533,791],{"class":790},[780,1535,795],{"class":794},[780,1537,798],{"class":790},[780,1539,801],{"class":786},[780,1541,804],{"class":790},[780,1543,808],{"class":807},[780,1545,811],{"class":790},[780,1547,814],{"class":790},[780,1549,1550,1552,1554,1556,1558,1560,1562,1564,1566],{"class":782,"line":817},[780,1551,787],{"class":786},[780,1553,791],{"class":790},[780,1555,824],{"class":794},[780,1557,798],{"class":790},[780,1559,801],{"class":786},[780,1561,804],{"class":790},[780,1563,833],{"class":807},[780,1565,811],{"class":790},[780,1567,814],{"class":790},[780,1569,1570,1572,1574,1577,1579,1581,1583,1585,1587],{"class":782,"line":840},[780,1571,787],{"class":786},[780,1573,791],{"class":790},[780,1575,1576],{"class":794}," useStrokeUtility",[780,1578,798],{"class":790},[780,1580,801],{"class":786},[780,1582,804],{"class":790},[780,1584,833],{"class":807},[780,1586,811],{"class":790},[780,1588,814],{"class":790},[780,1590,1591],{"class":782,"line":862},[780,1592,865],{"emptyLinePlaceholder":223},[780,1594,1595,1597,1599,1601,1603,1605],{"class":782,"line":868},[780,1596,872],{"class":871},[780,1598,875],{"class":794},[780,1600,878],{"class":790},[780,1602,795],{"class":881},[780,1604,884],{"class":794},[780,1606,814],{"class":790},[780,1608,1609,1611,1613,1615,1617,1619,1621],{"class":782,"line":889},[780,1610,872],{"class":871},[780,1612,791],{"class":790},[780,1614,896],{"class":794},[780,1616,899],{"class":790},[780,1618,902],{"class":790},[780,1620,905],{"class":794},[780,1622,814],{"class":790},[780,1624,1625],{"class":782,"line":910},[780,1626,865],{"emptyLinePlaceholder":223},[780,1628,1629,1631,1633,1635,1637,1639,1641,1643,1645,1647,1649],{"class":782,"line":915},[780,1630,872],{"class":871},[780,1632,791],{"class":790},[780,1634,922],{"class":794},[780,1636,925],{"class":790},[780,1638,928],{"class":794},[780,1640,899],{"class":790},[780,1642,902],{"class":790},[780,1644,824],{"class":881},[780,1646,937],{"class":794},[780,1648,925],{"class":790},[780,1650,942],{"class":790},[780,1652,1653,1655,1657,1659,1661,1663],{"class":782,"line":945},[780,1654,949],{"class":948},[780,1656,952],{"class":790},[780,1658,955],{"class":790},[780,1660,958],{"class":807},[780,1662,961],{"class":790},[780,1664,964],{"class":790},[780,1666,1667,1669,1671,1673,1675,1677],{"class":782,"line":967},[780,1668,970],{"class":948},[780,1670,952],{"class":790},[780,1672,955],{"class":790},[780,1674,977],{"class":807},[780,1676,961],{"class":790},[780,1678,964],{"class":790},[780,1680,1681,1683,1685,1687,1689],{"class":782,"line":984},[780,1682,899],{"class":790},[780,1684,989],{"class":786},[780,1686,992],{"class":871},[780,1688,995],{"class":794},[780,1690,814],{"class":790},[780,1692,1693],{"class":782,"line":1000},[780,1694,865],{"emptyLinePlaceholder":223},[780,1696,1697,1699,1701,1703],{"class":782,"line":1005},[780,1698,1512],{"class":881},[780,1700,937],{"class":794},[780,1702,925],{"class":790},[780,1704,942],{"class":790},[780,1706,1707,1709,1711,1713,1715,1717],{"class":782,"line":1016},[780,1708,1019],{"class":948},[780,1710,952],{"class":790},[780,1712,955],{"class":790},[780,1714,1026],{"class":807},[780,1716,961],{"class":790},[780,1718,964],{"class":790},[780,1720,1721,1723,1725,1727,1729,1731],{"class":782,"line":1033},[780,1722,1036],{"class":948},[780,1724,952],{"class":790},[780,1726,955],{"class":790},[780,1728,1043],{"class":807},[780,1730,961],{"class":790},[780,1732,964],{"class":790},[780,1734,1735,1737,1739,1741,1743],{"class":782,"line":1050},[780,1736,949],{"class":948},[780,1738,952],{"class":790},[780,1740,1057],{"class":881},[780,1742,1060],{"class":794},[780,1744,964],{"class":790},[780,1746,1747,1749,1751,1753,1755],{"class":782,"line":1065},[780,1748,1068],{"class":948},[780,1750,952],{"class":790},[780,1752,1057],{"class":881},[780,1754,1075],{"class":794},[780,1756,964],{"class":790},[780,1758,1759,1761,1763,1765,1767,1769],{"class":782,"line":1080},[780,1760,1083],{"class":948},[780,1762,952],{"class":790},[780,1764,955],{"class":790},[780,1766,1090],{"class":807},[780,1768,961],{"class":790},[780,1770,964],{"class":790},[780,1772,1773,1775,1777,1779,1781,1783],{"class":782,"line":1097},[780,1774,1100],{"class":948},[780,1776,952],{"class":790},[780,1778,955],{"class":790},[780,1780,1107],{"class":807},[780,1782,961],{"class":790},[780,1784,964],{"class":790},[780,1786,1787,1789,1791],{"class":782,"line":1114},[780,1788,899],{"class":790},[780,1790,995],{"class":794},[780,1792,814],{"class":790},[780,1794,1795],{"class":782,"line":1123},[780,1796,865],{"emptyLinePlaceholder":223},[780,1798,1799,1801,1803,1805],{"class":782,"line":1128},[780,1800,1131],{"class":786},[780,1802,1134],{"class":786},[780,1804,905],{"class":794},[780,1806,814],{"class":790},[766,1808,1809],{"icon":154,"label":326},[770,1810,1812],{"className":1143,"code":1811,"filename":1145,"language":1146,"meta":776,"style":776},":root {\n    --color--primary: oklch(0.5749 0.233917 259.9541 \u002F 1);\n    --color--gray-500: oklch(0.5513 0.0169 264.36 \u002F 1);\n}\n\n._stroke\\:none { stroke: none; }\n._stroke\\:current { stroke: currentColor; }\n._stroke\\:primary { stroke: var(--color--primary); }\n._stroke\\:gray { stroke: var(--color--gray-500); }\n._stroke\\:white { stroke: #fff; }\n._stroke\\:black { stroke: #000; }\n",[702,1813,1814,1822,1844,1866,1870,1874,1898,1920,1946,1972,1996],{"__ignoreMap":776},[780,1815,1816,1818,1820],{"class":782,"line":783},[780,1817,952],{"class":790},[780,1819,1155],{"class":871},[780,1821,942],{"class":790},[780,1823,1824,1826,1828,1830,1832,1834,1836,1838,1840,1842],{"class":782,"line":817},[780,1825,1162],{"class":794},[780,1827,952],{"class":790},[780,1829,1167],{"class":881},[780,1831,1170],{"class":790},[780,1833,1174],{"class":1173},[780,1835,1177],{"class":1173},[780,1837,1180],{"class":1173},[780,1839,1183],{"class":794},[780,1841,1186],{"class":1173},[780,1843,1189],{"class":790},[780,1845,1846,1848,1850,1852,1854,1856,1858,1860,1862,1864],{"class":782,"line":840},[780,1847,1194],{"class":794},[780,1849,952],{"class":790},[780,1851,1167],{"class":881},[780,1853,1170],{"class":790},[780,1855,1203],{"class":1173},[780,1857,1206],{"class":1173},[780,1859,1209],{"class":1173},[780,1861,1183],{"class":794},[780,1863,1186],{"class":1173},[780,1865,1189],{"class":790},[780,1867,1868],{"class":782,"line":862},[780,1869,1220],{"class":790},[780,1871,1872],{"class":782,"line":868},[780,1873,865],{"emptyLinePlaceholder":223},[780,1875,1876,1878,1881,1883,1885,1887,1890,1892,1894,1896],{"class":782,"line":889},[780,1877,1229],{"class":790},[780,1879,1880],{"class":1232},"_stroke",[780,1882,1236],{"class":794},[780,1884,1026],{"class":1232},[780,1886,791],{"class":790},[780,1888,1889],{"class":1243}," stroke",[780,1891,952],{"class":790},[780,1893,1249],{"class":794},[780,1895,1252],{"class":790},[780,1897,1255],{"class":790},[780,1899,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918],{"class":782,"line":910},[780,1901,1229],{"class":790},[780,1903,1880],{"class":1232},[780,1905,1236],{"class":794},[780,1907,1266],{"class":1232},[780,1909,791],{"class":790},[780,1911,1889],{"class":1243},[780,1913,952],{"class":790},[780,1915,1275],{"class":794},[780,1917,1252],{"class":790},[780,1919,1255],{"class":790},[780,1921,1922,1924,1926,1928,1930,1932,1934,1936,1938,1940,1942,1944],{"class":782,"line":915},[780,1923,1229],{"class":790},[780,1925,1880],{"class":1232},[780,1927,1236],{"class":794},[780,1929,1290],{"class":1232},[780,1931,791],{"class":790},[780,1933,1889],{"class":1243},[780,1935,952],{"class":790},[780,1937,1299],{"class":881},[780,1939,1170],{"class":790},[780,1941,1304],{"class":794},[780,1943,1307],{"class":790},[780,1945,1255],{"class":790},[780,1947,1948,1950,1952,1954,1956,1958,1960,1962,1964,1966,1968,1970],{"class":782,"line":945},[780,1949,1229],{"class":790},[780,1951,1880],{"class":1232},[780,1953,1236],{"class":794},[780,1955,1320],{"class":1232},[780,1957,791],{"class":790},[780,1959,1889],{"class":1243},[780,1961,952],{"class":790},[780,1963,1299],{"class":881},[780,1965,1170],{"class":790},[780,1967,1333],{"class":794},[780,1969,1307],{"class":790},[780,1971,1255],{"class":790},[780,1973,1974,1976,1978,1980,1982,1984,1986,1988,1990,1992,1994],{"class":782,"line":967},[780,1975,1229],{"class":790},[780,1977,1880],{"class":1232},[780,1979,1236],{"class":794},[780,1981,1348],{"class":1232},[780,1983,791],{"class":790},[780,1985,1889],{"class":1243},[780,1987,952],{"class":790},[780,1989,1357],{"class":790},[780,1991,1360],{"class":794},[780,1993,1252],{"class":790},[780,1995,1255],{"class":790},[780,1997,1998,2000,2002,2004,2006,2008,2010,2012,2014,2016,2018],{"class":782,"line":984},[780,1999,1229],{"class":790},[780,2001,1880],{"class":1232},[780,2003,1236],{"class":794},[780,2005,1375],{"class":1232},[780,2007,791],{"class":790},[780,2009,1889],{"class":1243},[780,2011,952],{"class":790},[780,2013,1357],{"class":790},[780,2015,1386],{"class":794},[780,2017,1252],{"class":790},[780,2019,1255],{"class":790},[766,2021,2022],{"icon":520,"label":1393},[770,2023,2025],{"className":1396,"code":2024,"language":1398,"meta":776,"style":776},"\u003Csvg class=\"_stroke:primary _fill:none\">\u003C!-- Outlined icon -->\u003C\u002Fsvg>\n\u003Csvg class=\"_stroke:current\">\u003C!-- Stroke inherits text color -->\u003C\u002Fsvg>\n",[702,2026,2027,2055],{"__ignoreMap":776},[780,2028,2029,2031,2033,2035,2037,2039,2042,2044,2046,2049,2051,2053],{"class":782,"line":783},[780,2030,1405],{"class":790},[780,2032,1408],{"class":948},[780,2034,1411],{"class":871},[780,2036,878],{"class":790},[780,2038,811],{"class":790},[780,2040,2041],{"class":807},"_stroke:primary _fill:none",[780,2043,811],{"class":790},[780,2045,1423],{"class":790},[780,2047,2048],{"class":1426},"\u003C!-- Outlined icon -->",[780,2050,1430],{"class":790},[780,2052,1408],{"class":948},[780,2054,1435],{"class":790},[780,2056,2057,2059,2061,2063,2065,2067,2070,2072,2074,2077,2079,2081],{"class":782,"line":817},[780,2058,1405],{"class":790},[780,2060,1408],{"class":948},[780,2062,1411],{"class":871},[780,2064,878],{"class":790},[780,2066,811],{"class":790},[780,2068,2069],{"class":807},"_stroke:current",[780,2071,811],{"class":790},[780,2073,1423],{"class":790},[780,2075,2076],{"class":1426},"\u003C!-- Stroke inherits text color -->",[780,2078,1430],{"class":790},[780,2080,1408],{"class":948},[780,2082,1435],{"class":790},[707,2084,2086],{"id":2085},"usestrokewidthutility",[702,2087,2088],{},"useStrokeWidthUtility",[711,2090,757,2091,2094],{},[702,2092,2093],{},"useStrokeWidthUtility()"," function creates utility classes for setting SVG stroke width.",[763,2096,2097,2256,2334],{},[766,2098,2099],{"icon":768,"label":290},[770,2100,2102],{"className":772,"code":2101,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useStrokeWidthUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseStrokeWidthUtility(s, {\n    '0': '0',\n    '1': '1',\n    '2': '2',\n});\n\nexport default s;\n",[702,2103,2104,2124,2145,2149,2163,2167,2177,2197,2215,2234,2242,2246],{"__ignoreMap":776},[780,2105,2106,2108,2110,2112,2114,2116,2118,2120,2122],{"class":782,"line":783},[780,2107,787],{"class":786},[780,2109,791],{"class":790},[780,2111,795],{"class":794},[780,2113,798],{"class":790},[780,2115,801],{"class":786},[780,2117,804],{"class":790},[780,2119,808],{"class":807},[780,2121,811],{"class":790},[780,2123,814],{"class":790},[780,2125,2126,2128,2130,2133,2135,2137,2139,2141,2143],{"class":782,"line":817},[780,2127,787],{"class":786},[780,2129,791],{"class":790},[780,2131,2132],{"class":794}," useStrokeWidthUtility",[780,2134,798],{"class":790},[780,2136,801],{"class":786},[780,2138,804],{"class":790},[780,2140,833],{"class":807},[780,2142,811],{"class":790},[780,2144,814],{"class":790},[780,2146,2147],{"class":782,"line":840},[780,2148,865],{"emptyLinePlaceholder":223},[780,2150,2151,2153,2155,2157,2159,2161],{"class":782,"line":862},[780,2152,872],{"class":871},[780,2154,875],{"class":794},[780,2156,878],{"class":790},[780,2158,795],{"class":881},[780,2160,884],{"class":794},[780,2162,814],{"class":790},[780,2164,2165],{"class":782,"line":868},[780,2166,865],{"emptyLinePlaceholder":223},[780,2168,2169,2171,2173,2175],{"class":782,"line":889},[780,2170,2088],{"class":881},[780,2172,937],{"class":794},[780,2174,925],{"class":790},[780,2176,942],{"class":790},[780,2178,2179,2182,2185,2187,2189,2191,2193,2195],{"class":782,"line":910},[780,2180,2181],{"class":790},"    '",[780,2183,2184],{"class":948},"0",[780,2186,961],{"class":790},[780,2188,952],{"class":790},[780,2190,955],{"class":790},[780,2192,2184],{"class":807},[780,2194,961],{"class":790},[780,2196,964],{"class":790},[780,2198,2199,2201,2203,2205,2207,2209,2211,2213],{"class":782,"line":915},[780,2200,2181],{"class":790},[780,2202,1186],{"class":948},[780,2204,961],{"class":790},[780,2206,952],{"class":790},[780,2208,955],{"class":790},[780,2210,1186],{"class":807},[780,2212,961],{"class":790},[780,2214,964],{"class":790},[780,2216,2217,2219,2222,2224,2226,2228,2230,2232],{"class":782,"line":945},[780,2218,2181],{"class":790},[780,2220,2221],{"class":948},"2",[780,2223,961],{"class":790},[780,2225,952],{"class":790},[780,2227,955],{"class":790},[780,2229,2221],{"class":807},[780,2231,961],{"class":790},[780,2233,964],{"class":790},[780,2235,2236,2238,2240],{"class":782,"line":967},[780,2237,899],{"class":790},[780,2239,995],{"class":794},[780,2241,814],{"class":790},[780,2243,2244],{"class":782,"line":984},[780,2245,865],{"emptyLinePlaceholder":223},[780,2247,2248,2250,2252,2254],{"class":782,"line":1000},[780,2249,1131],{"class":786},[780,2251,1134],{"class":786},[780,2253,905],{"class":794},[780,2255,814],{"class":790},[766,2257,2258],{"icon":154,"label":326},[770,2259,2261],{"className":1143,"code":2260,"filename":1145,"language":1146,"meta":776,"style":776},"._stroke-width\\:0 { stroke-width: 0; }\n._stroke-width\\:1 { stroke-width: 1; }\n._stroke-width\\:2 { stroke-width: 2; }\n",[702,2262,2263,2288,2311],{"__ignoreMap":776},[780,2264,2265,2267,2270,2272,2274,2276,2279,2281,2284,2286],{"class":782,"line":783},[780,2266,1229],{"class":790},[780,2268,2269],{"class":1232},"_stroke-width",[780,2271,1236],{"class":794},[780,2273,2184],{"class":1232},[780,2275,791],{"class":790},[780,2277,2278],{"class":1243}," stroke-width",[780,2280,952],{"class":790},[780,2282,2283],{"class":1173}," 0",[780,2285,1252],{"class":790},[780,2287,1255],{"class":790},[780,2289,2290,2292,2294,2296,2298,2300,2302,2304,2307,2309],{"class":782,"line":817},[780,2291,1229],{"class":790},[780,2293,2269],{"class":1232},[780,2295,1236],{"class":794},[780,2297,1186],{"class":1232},[780,2299,791],{"class":790},[780,2301,2278],{"class":1243},[780,2303,952],{"class":790},[780,2305,2306],{"class":1173}," 1",[780,2308,1252],{"class":790},[780,2310,1255],{"class":790},[780,2312,2313,2315,2317,2319,2321,2323,2325,2327,2330,2332],{"class":782,"line":840},[780,2314,1229],{"class":790},[780,2316,2269],{"class":1232},[780,2318,1236],{"class":794},[780,2320,2221],{"class":1232},[780,2322,791],{"class":790},[780,2324,2278],{"class":1243},[780,2326,952],{"class":790},[780,2328,2329],{"class":1173}," 2",[780,2331,1252],{"class":790},[780,2333,1255],{"class":790},[766,2335,2336],{"icon":520,"label":1393},[770,2337,2339],{"className":1396,"code":2338,"language":1398,"meta":776,"style":776},"\u003Csvg class=\"_stroke:current _stroke-width:1\">Thin stroke\u003C\u002Fsvg>\n\u003Csvg class=\"_stroke:current _stroke-width:2\">Bold stroke\u003C\u002Fsvg>\n",[702,2340,2341,2369],{"__ignoreMap":776},[780,2342,2343,2345,2347,2349,2351,2353,2356,2358,2360,2363,2365,2367],{"class":782,"line":783},[780,2344,1405],{"class":790},[780,2346,1408],{"class":948},[780,2348,1411],{"class":871},[780,2350,878],{"class":790},[780,2352,811],{"class":790},[780,2354,2355],{"class":807},"_stroke:current _stroke-width:1",[780,2357,811],{"class":790},[780,2359,1423],{"class":790},[780,2361,2362],{"class":794},"Thin stroke",[780,2364,1430],{"class":790},[780,2366,1408],{"class":948},[780,2368,1435],{"class":790},[780,2370,2371,2373,2375,2377,2379,2381,2384,2386,2388,2391,2393,2395],{"class":782,"line":817},[780,2372,1405],{"class":790},[780,2374,1408],{"class":948},[780,2376,1411],{"class":871},[780,2378,878],{"class":790},[780,2380,811],{"class":790},[780,2382,2383],{"class":807},"_stroke:current _stroke-width:2",[780,2385,811],{"class":790},[780,2387,1423],{"class":790},[780,2389,2390],{"class":794},"Bold stroke",[780,2392,1430],{"class":790},[780,2394,1408],{"class":948},[780,2396,1435],{"class":790},[707,2398,2400],{"id":2399},"examples","Examples",[2402,2403,2405],"h3",{"id":2404},"themed-icon-component","Themed Icon Component",[763,2407,2408,2888],{},[766,2409,2410],{"icon":768,"label":290},[770,2411,2413],{"className":772,"code":2412,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { useFillUtility, useStrokeUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref, modifier } = s;\n\nconst { colorPrimary, colorGray500 } = useColorDesignTokens(s, {\n    primary: '#006cff',\n    gray500: '#6b7280',\n} as const);\n\n\u002F\u002F Base icon colors\nuseFillUtility(s, {\n    none: 'none',\n    current: 'currentColor',\n    primary: ref(colorPrimary),\n    gray: ref(colorGray500),\n});\n\nuseStrokeUtility(s, {\n    current: 'currentColor',\n    primary: ref(colorPrimary),\n    gray: ref(colorGray500),\n});\n\n\u002F\u002F Hover state modifier\nconst hover = modifier('hover', ({ declarations }) => ({\n    '&:hover': declarations,\n}));\n\n\u002F\u002F Apply primary color on hover\nuseFillUtility(s, { primary: ref(colorPrimary) }, [hover]);\nuseStrokeUtility(s, { primary: ref(colorPrimary) }, [hover]);\n\nexport default s;\n",[702,2414,2415,2435,2455,2479,2483,2497,2518,2522,2546,2560,2574,2586,2590,2595,2605,2619,2633,2645,2657,2665,2669,2679,2693,2706,2719,2728,2733,2739,2781,2797,2807,2812,2818,2847,2872,2877],{"__ignoreMap":776},[780,2416,2417,2419,2421,2423,2425,2427,2429,2431,2433],{"class":782,"line":783},[780,2418,787],{"class":786},[780,2420,791],{"class":790},[780,2422,795],{"class":794},[780,2424,798],{"class":790},[780,2426,801],{"class":786},[780,2428,804],{"class":790},[780,2430,808],{"class":807},[780,2432,811],{"class":790},[780,2434,814],{"class":790},[780,2436,2437,2439,2441,2443,2445,2447,2449,2451,2453],{"class":782,"line":817},[780,2438,787],{"class":786},[780,2440,791],{"class":790},[780,2442,824],{"class":794},[780,2444,798],{"class":790},[780,2446,801],{"class":786},[780,2448,804],{"class":790},[780,2450,833],{"class":807},[780,2452,811],{"class":790},[780,2454,814],{"class":790},[780,2456,2457,2459,2461,2463,2465,2467,2469,2471,2473,2475,2477],{"class":782,"line":840},[780,2458,787],{"class":786},[780,2460,791],{"class":790},[780,2462,847],{"class":794},[780,2464,925],{"class":790},[780,2466,1576],{"class":794},[780,2468,798],{"class":790},[780,2470,801],{"class":786},[780,2472,804],{"class":790},[780,2474,833],{"class":807},[780,2476,811],{"class":790},[780,2478,814],{"class":790},[780,2480,2481],{"class":782,"line":862},[780,2482,865],{"emptyLinePlaceholder":223},[780,2484,2485,2487,2489,2491,2493,2495],{"class":782,"line":868},[780,2486,872],{"class":871},[780,2488,875],{"class":794},[780,2490,878],{"class":790},[780,2492,795],{"class":881},[780,2494,884],{"class":794},[780,2496,814],{"class":790},[780,2498,2499,2501,2503,2505,2507,2510,2512,2514,2516],{"class":782,"line":889},[780,2500,872],{"class":871},[780,2502,791],{"class":790},[780,2504,1057],{"class":794},[780,2506,925],{"class":790},[780,2508,2509],{"class":794}," modifier ",[780,2511,899],{"class":790},[780,2513,902],{"class":790},[780,2515,905],{"class":794},[780,2517,814],{"class":790},[780,2519,2520],{"class":782,"line":910},[780,2521,865],{"emptyLinePlaceholder":223},[780,2523,2524,2526,2528,2530,2532,2534,2536,2538,2540,2542,2544],{"class":782,"line":915},[780,2525,872],{"class":871},[780,2527,791],{"class":790},[780,2529,922],{"class":794},[780,2531,925],{"class":790},[780,2533,928],{"class":794},[780,2535,899],{"class":790},[780,2537,902],{"class":790},[780,2539,824],{"class":881},[780,2541,937],{"class":794},[780,2543,925],{"class":790},[780,2545,942],{"class":790},[780,2547,2548,2550,2552,2554,2556,2558],{"class":782,"line":945},[780,2549,949],{"class":948},[780,2551,952],{"class":790},[780,2553,955],{"class":790},[780,2555,958],{"class":807},[780,2557,961],{"class":790},[780,2559,964],{"class":790},[780,2561,2562,2564,2566,2568,2570,2572],{"class":782,"line":967},[780,2563,970],{"class":948},[780,2565,952],{"class":790},[780,2567,955],{"class":790},[780,2569,977],{"class":807},[780,2571,961],{"class":790},[780,2573,964],{"class":790},[780,2575,2576,2578,2580,2582,2584],{"class":782,"line":984},[780,2577,899],{"class":790},[780,2579,989],{"class":786},[780,2581,992],{"class":871},[780,2583,995],{"class":794},[780,2585,814],{"class":790},[780,2587,2588],{"class":782,"line":1000},[780,2589,865],{"emptyLinePlaceholder":223},[780,2591,2592],{"class":782,"line":1005},[780,2593,2594],{"class":1426},"\u002F\u002F Base icon colors\n",[780,2596,2597,2599,2601,2603],{"class":782,"line":1016},[780,2598,754],{"class":881},[780,2600,937],{"class":794},[780,2602,925],{"class":790},[780,2604,942],{"class":790},[780,2606,2607,2609,2611,2613,2615,2617],{"class":782,"line":1033},[780,2608,1019],{"class":948},[780,2610,952],{"class":790},[780,2612,955],{"class":790},[780,2614,1026],{"class":807},[780,2616,961],{"class":790},[780,2618,964],{"class":790},[780,2620,2621,2623,2625,2627,2629,2631],{"class":782,"line":1050},[780,2622,1036],{"class":948},[780,2624,952],{"class":790},[780,2626,955],{"class":790},[780,2628,1043],{"class":807},[780,2630,961],{"class":790},[780,2632,964],{"class":790},[780,2634,2635,2637,2639,2641,2643],{"class":782,"line":1065},[780,2636,949],{"class":948},[780,2638,952],{"class":790},[780,2640,1057],{"class":881},[780,2642,1060],{"class":794},[780,2644,964],{"class":790},[780,2646,2647,2649,2651,2653,2655],{"class":782,"line":1080},[780,2648,1068],{"class":948},[780,2650,952],{"class":790},[780,2652,1057],{"class":881},[780,2654,1075],{"class":794},[780,2656,964],{"class":790},[780,2658,2659,2661,2663],{"class":782,"line":1097},[780,2660,899],{"class":790},[780,2662,995],{"class":794},[780,2664,814],{"class":790},[780,2666,2667],{"class":782,"line":1114},[780,2668,865],{"emptyLinePlaceholder":223},[780,2670,2671,2673,2675,2677],{"class":782,"line":1123},[780,2672,1512],{"class":881},[780,2674,937],{"class":794},[780,2676,925],{"class":790},[780,2678,942],{"class":790},[780,2680,2681,2683,2685,2687,2689,2691],{"class":782,"line":1128},[780,2682,1036],{"class":948},[780,2684,952],{"class":790},[780,2686,955],{"class":790},[780,2688,1043],{"class":807},[780,2690,961],{"class":790},[780,2692,964],{"class":790},[780,2694,2696,2698,2700,2702,2704],{"class":782,"line":2695},23,[780,2697,949],{"class":948},[780,2699,952],{"class":790},[780,2701,1057],{"class":881},[780,2703,1060],{"class":794},[780,2705,964],{"class":790},[780,2707,2709,2711,2713,2715,2717],{"class":782,"line":2708},24,[780,2710,1068],{"class":948},[780,2712,952],{"class":790},[780,2714,1057],{"class":881},[780,2716,1075],{"class":794},[780,2718,964],{"class":790},[780,2720,2722,2724,2726],{"class":782,"line":2721},25,[780,2723,899],{"class":790},[780,2725,995],{"class":794},[780,2727,814],{"class":790},[780,2729,2731],{"class":782,"line":2730},26,[780,2732,865],{"emptyLinePlaceholder":223},[780,2734,2736],{"class":782,"line":2735},27,[780,2737,2738],{"class":1426},"\u002F\u002F Hover state modifier\n",[780,2740,2742,2744,2747,2749,2752,2754,2756,2759,2761,2763,2766,2770,2773,2776,2778],{"class":782,"line":2741},28,[780,2743,872],{"class":871},[780,2745,2746],{"class":794}," hover ",[780,2748,878],{"class":790},[780,2750,2751],{"class":881}," modifier",[780,2753,1170],{"class":794},[780,2755,961],{"class":790},[780,2757,2758],{"class":807},"hover",[780,2760,961],{"class":790},[780,2762,925],{"class":790},[780,2764,2765],{"class":790}," ({",[780,2767,2769],{"class":2768},"sHdIc"," declarations",[780,2771,2772],{"class":790}," })",[780,2774,2775],{"class":871}," =>",[780,2777,700],{"class":794},[780,2779,2780],{"class":790},"{\n",[780,2782,2784,2786,2789,2791,2793,2795],{"class":782,"line":2783},29,[780,2785,2181],{"class":790},[780,2787,2788],{"class":948},"&:hover",[780,2790,961],{"class":790},[780,2792,952],{"class":790},[780,2794,2769],{"class":794},[780,2796,964],{"class":790},[780,2798,2800,2802,2805],{"class":782,"line":2799},30,[780,2801,899],{"class":790},[780,2803,2804],{"class":794},"))",[780,2806,814],{"class":790},[780,2808,2810],{"class":782,"line":2809},31,[780,2811,865],{"emptyLinePlaceholder":223},[780,2813,2815],{"class":782,"line":2814},32,[780,2816,2817],{"class":1426},"\u002F\u002F Apply primary color on hover\n",[780,2819,2821,2823,2825,2827,2829,2832,2834,2836,2839,2842,2845],{"class":782,"line":2820},33,[780,2822,754],{"class":881},[780,2824,937],{"class":794},[780,2826,925],{"class":790},[780,2828,791],{"class":790},[780,2830,2831],{"class":948}," primary",[780,2833,952],{"class":790},[780,2835,1057],{"class":881},[780,2837,2838],{"class":794},"(colorPrimary) ",[780,2840,2841],{"class":790},"},",[780,2843,2844],{"class":794}," [hover])",[780,2846,814],{"class":790},[780,2848,2850,2852,2854,2856,2858,2860,2862,2864,2866,2868,2870],{"class":782,"line":2849},34,[780,2851,1512],{"class":881},[780,2853,937],{"class":794},[780,2855,925],{"class":790},[780,2857,791],{"class":790},[780,2859,2831],{"class":948},[780,2861,952],{"class":790},[780,2863,1057],{"class":881},[780,2865,2838],{"class":794},[780,2867,2841],{"class":790},[780,2869,2844],{"class":794},[780,2871,814],{"class":790},[780,2873,2875],{"class":782,"line":2874},35,[780,2876,865],{"emptyLinePlaceholder":223},[780,2878,2880,2882,2884,2886],{"class":782,"line":2879},36,[780,2881,1131],{"class":786},[780,2883,1134],{"class":786},[780,2885,905],{"class":794},[780,2887,814],{"class":790},[766,2889,2890],{"icon":154,"label":326},[770,2891,2893],{"className":1143,"code":2892,"filename":1145,"language":1146,"meta":776,"style":776},":root {\n    --color--primary: oklch(0.5749 0.233917 259.9541 \u002F 1);\n    --color--gray-500: oklch(0.5513 0.0169 264.36 \u002F 1);\n}\n\n._fill\\:none { fill: none; }\n._fill\\:current { fill: currentColor; }\n._fill\\:primary { fill: var(--color--primary); }\n._fill\\:gray { fill: var(--color--gray-500); }\n\n._stroke\\:current { stroke: currentColor; }\n._stroke\\:primary { stroke: var(--color--primary); }\n._stroke\\:gray { stroke: var(--color--gray-500); }\n\n._hover\\:fill\\:primary:hover { fill: var(--color--primary); }\n._hover\\:stroke\\:primary:hover { stroke: var(--color--primary); }\n",[702,2894,2895,2903,2925,2947,2951,2955,2977,2999,3025,3051,3055,3077,3103,3129,3133,3169],{"__ignoreMap":776},[780,2896,2897,2899,2901],{"class":782,"line":783},[780,2898,952],{"class":790},[780,2900,1155],{"class":871},[780,2902,942],{"class":790},[780,2904,2905,2907,2909,2911,2913,2915,2917,2919,2921,2923],{"class":782,"line":817},[780,2906,1162],{"class":794},[780,2908,952],{"class":790},[780,2910,1167],{"class":881},[780,2912,1170],{"class":790},[780,2914,1174],{"class":1173},[780,2916,1177],{"class":1173},[780,2918,1180],{"class":1173},[780,2920,1183],{"class":794},[780,2922,1186],{"class":1173},[780,2924,1189],{"class":790},[780,2926,2927,2929,2931,2933,2935,2937,2939,2941,2943,2945],{"class":782,"line":840},[780,2928,1194],{"class":794},[780,2930,952],{"class":790},[780,2932,1167],{"class":881},[780,2934,1170],{"class":790},[780,2936,1203],{"class":1173},[780,2938,1206],{"class":1173},[780,2940,1209],{"class":1173},[780,2942,1183],{"class":794},[780,2944,1186],{"class":1173},[780,2946,1189],{"class":790},[780,2948,2949],{"class":782,"line":862},[780,2950,1220],{"class":790},[780,2952,2953],{"class":782,"line":868},[780,2954,865],{"emptyLinePlaceholder":223},[780,2956,2957,2959,2961,2963,2965,2967,2969,2971,2973,2975],{"class":782,"line":889},[780,2958,1229],{"class":790},[780,2960,1233],{"class":1232},[780,2962,1236],{"class":794},[780,2964,1026],{"class":1232},[780,2966,791],{"class":790},[780,2968,1244],{"class":1243},[780,2970,952],{"class":790},[780,2972,1249],{"class":794},[780,2974,1252],{"class":790},[780,2976,1255],{"class":790},[780,2978,2979,2981,2983,2985,2987,2989,2991,2993,2995,2997],{"class":782,"line":910},[780,2980,1229],{"class":790},[780,2982,1233],{"class":1232},[780,2984,1236],{"class":794},[780,2986,1266],{"class":1232},[780,2988,791],{"class":790},[780,2990,1244],{"class":1243},[780,2992,952],{"class":790},[780,2994,1275],{"class":794},[780,2996,1252],{"class":790},[780,2998,1255],{"class":790},[780,3000,3001,3003,3005,3007,3009,3011,3013,3015,3017,3019,3021,3023],{"class":782,"line":915},[780,3002,1229],{"class":790},[780,3004,1233],{"class":1232},[780,3006,1236],{"class":794},[780,3008,1290],{"class":1232},[780,3010,791],{"class":790},[780,3012,1244],{"class":1243},[780,3014,952],{"class":790},[780,3016,1299],{"class":881},[780,3018,1170],{"class":790},[780,3020,1304],{"class":794},[780,3022,1307],{"class":790},[780,3024,1255],{"class":790},[780,3026,3027,3029,3031,3033,3035,3037,3039,3041,3043,3045,3047,3049],{"class":782,"line":945},[780,3028,1229],{"class":790},[780,3030,1233],{"class":1232},[780,3032,1236],{"class":794},[780,3034,1320],{"class":1232},[780,3036,791],{"class":790},[780,3038,1244],{"class":1243},[780,3040,952],{"class":790},[780,3042,1299],{"class":881},[780,3044,1170],{"class":790},[780,3046,1333],{"class":794},[780,3048,1307],{"class":790},[780,3050,1255],{"class":790},[780,3052,3053],{"class":782,"line":967},[780,3054,865],{"emptyLinePlaceholder":223},[780,3056,3057,3059,3061,3063,3065,3067,3069,3071,3073,3075],{"class":782,"line":984},[780,3058,1229],{"class":790},[780,3060,1880],{"class":1232},[780,3062,1236],{"class":794},[780,3064,1266],{"class":1232},[780,3066,791],{"class":790},[780,3068,1889],{"class":1243},[780,3070,952],{"class":790},[780,3072,1275],{"class":794},[780,3074,1252],{"class":790},[780,3076,1255],{"class":790},[780,3078,3079,3081,3083,3085,3087,3089,3091,3093,3095,3097,3099,3101],{"class":782,"line":1000},[780,3080,1229],{"class":790},[780,3082,1880],{"class":1232},[780,3084,1236],{"class":794},[780,3086,1290],{"class":1232},[780,3088,791],{"class":790},[780,3090,1889],{"class":1243},[780,3092,952],{"class":790},[780,3094,1299],{"class":881},[780,3096,1170],{"class":790},[780,3098,1304],{"class":794},[780,3100,1307],{"class":790},[780,3102,1255],{"class":790},[780,3104,3105,3107,3109,3111,3113,3115,3117,3119,3121,3123,3125,3127],{"class":782,"line":1005},[780,3106,1229],{"class":790},[780,3108,1880],{"class":1232},[780,3110,1236],{"class":794},[780,3112,1320],{"class":1232},[780,3114,791],{"class":790},[780,3116,1889],{"class":1243},[780,3118,952],{"class":790},[780,3120,1299],{"class":881},[780,3122,1170],{"class":790},[780,3124,1333],{"class":794},[780,3126,1307],{"class":790},[780,3128,1255],{"class":790},[780,3130,3131],{"class":782,"line":1016},[780,3132,865],{"emptyLinePlaceholder":223},[780,3134,3135,3137,3140,3142,3145,3147,3149,3151,3153,3155,3157,3159,3161,3163,3165,3167],{"class":782,"line":1033},[780,3136,1229],{"class":790},[780,3138,3139],{"class":1232},"_hover",[780,3141,1236],{"class":794},[780,3143,3144],{"class":1232},"fill",[780,3146,1236],{"class":794},[780,3148,1290],{"class":1232},[780,3150,952],{"class":790},[780,3152,2758],{"class":871},[780,3154,791],{"class":790},[780,3156,1244],{"class":1243},[780,3158,952],{"class":790},[780,3160,1299],{"class":881},[780,3162,1170],{"class":790},[780,3164,1304],{"class":794},[780,3166,1307],{"class":790},[780,3168,1255],{"class":790},[780,3170,3171,3173,3175,3177,3180,3182,3184,3186,3188,3190,3192,3194,3196,3198,3200,3202],{"class":782,"line":1050},[780,3172,1229],{"class":790},[780,3174,3139],{"class":1232},[780,3176,1236],{"class":794},[780,3178,3179],{"class":1232},"stroke",[780,3181,1236],{"class":794},[780,3183,1290],{"class":1232},[780,3185,952],{"class":790},[780,3187,2758],{"class":871},[780,3189,791],{"class":790},[780,3191,1889],{"class":1243},[780,3193,952],{"class":790},[780,3195,1299],{"class":881},[780,3197,1170],{"class":790},[780,3199,1304],{"class":794},[780,3201,1307],{"class":790},[780,3203,1255],{"class":790},[711,3205,3206],{},"Usage in HTML:",[770,3208,3210],{"className":1396,"code":3209,"language":1398,"meta":776,"style":776},"\u003Cbutton>\n    \u003Csvg class=\"_fill:none _stroke:gray _hover:stroke:primary\" width=\"24\" height=\"24\">\n        \u003Cpath d=\"...\" \u002F>\n    \u003C\u002Fsvg>\n\u003C\u002Fbutton>\n",[702,3211,3212,3221,3264,3287,3296],{"__ignoreMap":776},[780,3213,3214,3216,3219],{"class":782,"line":783},[780,3215,1405],{"class":790},[780,3217,3218],{"class":948},"button",[780,3220,1435],{"class":790},[780,3222,3223,3226,3228,3230,3232,3234,3237,3239,3242,3244,3246,3249,3251,3254,3256,3258,3260,3262],{"class":782,"line":817},[780,3224,3225],{"class":790},"    \u003C",[780,3227,1408],{"class":948},[780,3229,1411],{"class":871},[780,3231,878],{"class":790},[780,3233,811],{"class":790},[780,3235,3236],{"class":807},"_fill:none _stroke:gray _hover:stroke:primary",[780,3238,811],{"class":790},[780,3240,3241],{"class":871}," width",[780,3243,878],{"class":790},[780,3245,811],{"class":790},[780,3247,3248],{"class":807},"24",[780,3250,811],{"class":790},[780,3252,3253],{"class":871}," height",[780,3255,878],{"class":790},[780,3257,811],{"class":790},[780,3259,3248],{"class":807},[780,3261,811],{"class":790},[780,3263,1435],{"class":790},[780,3265,3266,3269,3272,3275,3277,3279,3282,3284],{"class":782,"line":840},[780,3267,3268],{"class":790},"        \u003C",[780,3270,3271],{"class":948},"path",[780,3273,3274],{"class":871}," d",[780,3276,878],{"class":790},[780,3278,811],{"class":790},[780,3280,3281],{"class":807},"...",[780,3283,811],{"class":790},[780,3285,3286],{"class":790}," \u002F>\n",[780,3288,3289,3292,3294],{"class":782,"line":862},[780,3290,3291],{"class":790},"    \u003C\u002F",[780,3293,1408],{"class":948},[780,3295,1435],{"class":790},[780,3297,3298,3300,3302],{"class":782,"line":868},[780,3299,1430],{"class":790},[780,3301,3218],{"class":948},[780,3303,1435],{"class":790},[2402,3305,3307],{"id":3306},"icon-with-text-color-inheritance","Icon with Text Color Inheritance",[763,3309,3310,3425],{},[766,3311,3312],{"icon":768,"label":290},[770,3313,3315],{"className":772,"code":3314,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useFillUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseFillUtility(s, {\n    current: 'currentColor',\n});\n\nexport default s;\n",[702,3316,3317,3337,3357,3361,3375,3379,3389,3403,3411,3415],{"__ignoreMap":776},[780,3318,3319,3321,3323,3325,3327,3329,3331,3333,3335],{"class":782,"line":783},[780,3320,787],{"class":786},[780,3322,791],{"class":790},[780,3324,795],{"class":794},[780,3326,798],{"class":790},[780,3328,801],{"class":786},[780,3330,804],{"class":790},[780,3332,808],{"class":807},[780,3334,811],{"class":790},[780,3336,814],{"class":790},[780,3338,3339,3341,3343,3345,3347,3349,3351,3353,3355],{"class":782,"line":817},[780,3340,787],{"class":786},[780,3342,791],{"class":790},[780,3344,847],{"class":794},[780,3346,798],{"class":790},[780,3348,801],{"class":786},[780,3350,804],{"class":790},[780,3352,833],{"class":807},[780,3354,811],{"class":790},[780,3356,814],{"class":790},[780,3358,3359],{"class":782,"line":840},[780,3360,865],{"emptyLinePlaceholder":223},[780,3362,3363,3365,3367,3369,3371,3373],{"class":782,"line":862},[780,3364,872],{"class":871},[780,3366,875],{"class":794},[780,3368,878],{"class":790},[780,3370,795],{"class":881},[780,3372,884],{"class":794},[780,3374,814],{"class":790},[780,3376,3377],{"class":782,"line":868},[780,3378,865],{"emptyLinePlaceholder":223},[780,3380,3381,3383,3385,3387],{"class":782,"line":889},[780,3382,754],{"class":881},[780,3384,937],{"class":794},[780,3386,925],{"class":790},[780,3388,942],{"class":790},[780,3390,3391,3393,3395,3397,3399,3401],{"class":782,"line":910},[780,3392,1036],{"class":948},[780,3394,952],{"class":790},[780,3396,955],{"class":790},[780,3398,1043],{"class":807},[780,3400,961],{"class":790},[780,3402,964],{"class":790},[780,3404,3405,3407,3409],{"class":782,"line":915},[780,3406,899],{"class":790},[780,3408,995],{"class":794},[780,3410,814],{"class":790},[780,3412,3413],{"class":782,"line":945},[780,3414,865],{"emptyLinePlaceholder":223},[780,3416,3417,3419,3421,3423],{"class":782,"line":967},[780,3418,1131],{"class":786},[780,3420,1134],{"class":786},[780,3422,905],{"class":794},[780,3424,814],{"class":790},[766,3426,3427],{"icon":154,"label":326},[770,3428,3430],{"className":1143,"code":3429,"filename":1145,"language":1146,"meta":776,"style":776},"._fill\\:current { fill: currentColor; }\n",[702,3431,3432],{"__ignoreMap":776},[780,3433,3434,3436,3438,3440,3442,3444,3446,3448,3450,3452],{"class":782,"line":783},[780,3435,1229],{"class":790},[780,3437,1233],{"class":1232},[780,3439,1236],{"class":794},[780,3441,1266],{"class":1232},[780,3443,791],{"class":790},[780,3445,1244],{"class":1243},[780,3447,952],{"class":790},[780,3449,1275],{"class":794},[780,3451,1252],{"class":790},[780,3453,1255],{"class":790},[711,3455,3206],{},[770,3457,3459],{"className":1396,"code":3458,"language":1398,"meta":776,"style":776},"\u003Ca href=\"#\" style=\"color: #006cff;\">\n    \u003Csvg class=\"_fill:current\" width=\"16\" height=\"16\">\n        \u003Cpath d=\"...\" \u002F>\n    \u003C\u002Fsvg>\n    Link text\n\u003C\u002Fa>\n",[702,3460,3461,3493,3532,3550,3558,3563],{"__ignoreMap":776},[780,3462,3463,3465,3467,3470,3472,3474,3477,3479,3482,3484,3486,3489,3491],{"class":782,"line":783},[780,3464,1405],{"class":790},[780,3466,697],{"class":948},[780,3468,3469],{"class":871}," href",[780,3471,878],{"class":790},[780,3473,811],{"class":790},[780,3475,3476],{"class":807},"#",[780,3478,811],{"class":790},[780,3480,3481],{"class":871}," style",[780,3483,878],{"class":790},[780,3485,811],{"class":790},[780,3487,3488],{"class":807},"color: #006cff;",[780,3490,811],{"class":790},[780,3492,1435],{"class":790},[780,3494,3495,3497,3499,3501,3503,3505,3507,3509,3511,3513,3515,3518,3520,3522,3524,3526,3528,3530],{"class":782,"line":817},[780,3496,3225],{"class":790},[780,3498,1408],{"class":948},[780,3500,1411],{"class":871},[780,3502,878],{"class":790},[780,3504,811],{"class":790},[780,3506,1450],{"class":807},[780,3508,811],{"class":790},[780,3510,3241],{"class":871},[780,3512,878],{"class":790},[780,3514,811],{"class":790},[780,3516,3517],{"class":807},"16",[780,3519,811],{"class":790},[780,3521,3253],{"class":871},[780,3523,878],{"class":790},[780,3525,811],{"class":790},[780,3527,3517],{"class":807},[780,3529,811],{"class":790},[780,3531,1435],{"class":790},[780,3533,3534,3536,3538,3540,3542,3544,3546,3548],{"class":782,"line":840},[780,3535,3268],{"class":790},[780,3537,3271],{"class":948},[780,3539,3274],{"class":871},[780,3541,878],{"class":790},[780,3543,811],{"class":790},[780,3545,3281],{"class":807},[780,3547,811],{"class":790},[780,3549,3286],{"class":790},[780,3551,3552,3554,3556],{"class":782,"line":862},[780,3553,3291],{"class":790},[780,3555,1408],{"class":948},[780,3557,1435],{"class":790},[780,3559,3560],{"class":782,"line":868},[780,3561,3562],{"class":794},"    Link text\n",[780,3564,3565,3567,3569],{"class":782,"line":889},[780,3566,1430],{"class":790},[780,3568,697],{"class":948},[780,3570,1435],{"class":790},[707,3572,3574],{"id":3573},"best-practices","Best Practices",[722,3576,3577,3583,3593,3602,3608],{},[725,3578,3579,3582],{},[692,3580,3581],{},"Use currentColor for icons",": Makes icons inherit their parent's text color automatically",[725,3584,3585,3588,3589,3592],{},[692,3586,3587],{},"Set fill: none for stroke icons",": Stroke-based icons need ",[702,3590,3591],{},"fill: none"," to appear correctly",[725,3594,3595,1498,3598,3601],{},[692,3596,3597],{},"Reference design tokens",[702,3599,3600],{},"ref()"," for consistent colors across your application",[725,3603,3604,3607],{},[692,3605,3606],{},"Consider accessibility",": Ensure sufficient contrast for icon colors",[725,3609,3610,3613],{},[692,3611,3612],{},"Use viewBox for scalability",": SVGs with viewBox scale properly with width\u002Fheight utilities",[707,3615,3617],{"id":3616},"faq","FAQ",[3619,3620,3621,3630,3639,3643],"accordion",{},[3622,3623,3626,3627,3629],"accordion-item",{"icon":3624,"label":3625},"i-lucide-circle-help","What's the difference between fill and stroke?","Fill colors the interior of SVG shapes, while stroke colors the outline\u002Fborder. Many icons use only stroke (with ",[702,3628,3591],{},") for a lighter appearance. Some icons use both fill and stroke for different parts.",[3622,3631,3633,3635,3636,3638],{"icon":3624,"label":3632},"Why use currentColor for SVG colors?",[702,3634,1043],{}," makes the SVG inherit the ",[702,3637,1505],{}," property from its parent element. This means you can change the icon color by changing the text color, and icons automatically match their surrounding text.",[3622,3640,3642],{"icon":3624,"label":3641},"How do stroke-width units work in SVG?","Stroke width in SVG is relative to the SVG's coordinate system (defined by viewBox), not CSS pixels. A stroke-width of 2 in a 24x24 viewBox SVG will appear different than in a 100x100 viewBox SVG. Icons typically use 1 or 2 for their stroke width.",[3622,3644,3646,3647,3650],{"icon":3624,"label":3645},"Can I animate SVG fills and strokes?","Yes, fill and stroke colors can be animated with CSS transitions. This is useful for hover effects on icons. Add a ",[702,3648,3649],{},"transition"," property to the SVG or path elements for smooth color changes.",[3652,3653,3654],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":776,"searchDepth":817,"depth":817,"links":3656},[3657,3658,3659,3660,3661,3662,3666,3667],{"id":709,"depth":817,"text":78},{"id":716,"depth":817,"text":717},{"id":751,"depth":817,"text":754},{"id":1509,"depth":817,"text":1512},{"id":2085,"depth":817,"text":2088},{"id":2399,"depth":817,"text":2400,"children":3663},[3664,3665],{"id":2404,"depth":840,"text":2405},{"id":3306,"depth":840,"text":3307},{"id":3573,"depth":817,"text":3574},{"id":3616,"depth":817,"text":3617},"Create SVG utilities for fill, stroke, and stroke-width with full type safety.","md",null,{},{"title":614,"icon":617},{"title":684,"description":3668},"j4VtiE4gmBBUa-T8mYvUuB-nrEIvBq6clTJDtofGyBU",[3676,3678],{"title":229,"path":611,"stem":612,"description":3677,"icon":232,"children":-1},"Create spacing utilities for margin and padding with directional variants and full type safety.",{"title":619,"path":620,"stem":621,"description":3679,"icon":315,"children":-1},"Create table utilities for border collapse, spacing, layout, and caption positioning with full type safety.",1781596353741]