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