@tenerife.music/ui 1.1.1 → 1.2.0

package/dist/styles.css

@@ -494,9 +494,6 @@ body {
 .right-0 {
   right: 0;
 }
-.right-1 {
-  right: 0.25rem;
-}
 .right-md {
   right: 1rem;
 }
@@ -602,9 +599,6 @@ body {
 .mb-4 {
   margin-bottom: 1rem;
 }
-.mb-8 {
-  margin-bottom: 2rem;
-}
 .mb-lg {
   margin-bottom: 1.5rem;
 }
@@ -1073,9 +1067,6 @@ body {
 .max-w-md {
   max-width: 28rem;
 }
-.max-w-none {
-  max-width: none;
-}
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1327,6 +1318,12 @@ body {
 .resize {
   resize: both;
 }
+.list-inside {
+  list-style-position: inside;
+}
+.list-disc {
+  list-style-type: disc;
+}
 .list-none {
   list-style-type: none;
 }
@@ -1921,6 +1918,9 @@ body {
 .bg-muted {
   background-color: hsl(var(--muted));
 }
+.bg-muted\/30 {
+  background-color: hsl(var(--muted) / 0.3);
+}
 .bg-muted\/50 {
   background-color: hsl(var(--muted) / 0.5);
 }
@@ -2191,18 +2191,12 @@ body {
 .pb-sm {
   padding-bottom: 0.5rem;
 }
-.pl-10 {
-  padding-left: 2.5rem;
-}
 .pl-8 {
   padding-left: 2rem;
 }
 .pl-lg {
   padding-left: 1.5rem;
 }
-.pr-10 {
-  padding-right: 2.5rem;
-}
 .pr-8 {
   padding-right: 2rem;
 }
@@ -2242,6 +2236,17 @@ body {
     Roboto,
     sans-serif;
 }
+.font-mono {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    Liberation Mono,
+    Courier New,
+    monospace;
+}
 .text-2xl {
   font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
   line-height: 2rem;
@@ -2460,10 +2465,6 @@ body {
 .text-foreground\/95 {
   color: hsl(var(--foreground) / 0.95);
 }
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
-}
 .text-green-700 {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity, 1));
@@ -2550,9 +2551,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
-.text-white\/80 {
-  color: rgb(255 255 255 / 0.8);
-}
 .text-yellow-500 {
   --tw-text-opacity: 1;
   color: rgb(234 179 8 / var(--tw-text-opacity, 1));
@@ -3009,8 +3007,8 @@ body {
 .hover\:text-accent-foreground:hover {
   color: hsl(var(--tm-accent-foreground));
 }
-.hover\:text-accent-foreground\/80:hover {
-  color: hsl(var(--tm-accent-foreground) / 0.8);
+.hover\:text-accent\/80:hover {
+  color: hsl(var(--tm-accent) / 0.8);
 }
 .hover\:text-destructive\/80:hover {
   color: hsl(var(--destructive) / 0.8);
@@ -3018,9 +3016,6 @@ body {
 .hover\:text-foreground:hover {
   color: hsl(var(--foreground));
 }
-.hover\:text-primary:hover {
-  color: hsl(var(--tm-primary));
-}
 .hover\:text-primary\/80:hover {
   color: hsl(var(--tm-primary) / 0.8);
 }
@@ -3051,13 +3046,6 @@ body {
   --tw-scale-y: 1.05;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.focus\:opacity-100:focus {
-  opacity: 1;
-}
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
 .focus\:outline:focus {
   outline-style: solid;
 }
@@ -3070,14 +3058,6 @@ body {
 .focus\:outline-ring:focus {
   outline-color: hsl(var(--ring));
 }
-.focus\:ring-1:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
 .focus-visible\:bg-\[hsl\(var\(--accent\)\)\]:focus-visible {
   background-color: hsl(var(--accent));
 }
@@ -3374,21 +3354,6 @@ body {
   .md\:justify-end {
     justify-content: flex-end;
   }
-  .md\:text-3xl {
-    font-size: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
-    line-height: 2.25rem;
-    letter-spacing: -0.05em;
-  }
-  .md\:text-4xl {
-    font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
-    line-height: 2.5rem;
-    letter-spacing: -0.025em;
-  }
-  .md\:text-5xl {
-    font-size: clamp(3rem, 2rem + 5vw, 4rem);
-    line-height: 1;
-    letter-spacing: -0.025em;
-  }
   .md\:text-sm {
     font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
     line-height: 1.25rem;
@@ -3408,16 +3373,6 @@ body {
   .lg\:gap-xl {
     gap: 2rem;
   }
-  .lg\:text-5xl {
-    font-size: clamp(3rem, 2rem + 5vw, 4rem);
-    line-height: 1;
-    letter-spacing: -0.025em;
-  }
-  .lg\:text-6xl {
-    font-size: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
-    line-height: 1;
-    letter-spacing: -0.05em;
-  }
 }
 @media (min-width: 1280px) {
   .xl\:grid-cols-4 {

package/dist/theme/index.cjs

@@ -121,6 +121,74 @@ var init_default = __esm({
   }
 });
 
+// src/themes/--help.ts
+var help_exports = {};
+__export(help_exports, {
+  helpTheme: () => helpTheme
+});
+var helpTheme;
+var init_help = __esm({
+  "src/themes/--help.ts"() {
+    helpTheme = {
+      name: "--help",
+      description: "Custom theme:  Help"
+      // Override primary colors (optional)
+      // primaryColors: {
+      //   500: "210 75% 45%", // HSL format
+      //   600: "210 70% 40%",
+      // },
+      // Override accent colors (optional)
+      // accentColors: {
+      //   500: "285 80% 60%",
+      // },
+      // Override secondary colors (optional)
+      // secondaryColors: {
+      //   500: "170 90% 45%",
+      // },
+      // Override base colors for day mode (optional)
+      // baseColorsDay: {
+      //   background: "0 0% 100%",
+      //   foreground: "0 0% 9%",
+      // },
+      // Override base colors for night mode (optional)
+      // baseColorsNight: {
+      //   background: "240 10% 3.9%",
+      //   foreground: "0 0% 89.8%",
+      // },
+      // Override surface colors for day mode (optional)
+      // surfaceColorsDay: {
+      //   base: "0 0% 100%",
+      //   elevated1: "0 0% 98%",
+      // },
+      // Override surface colors for night mode (optional)
+      // surfaceColorsNight: {
+      //   base: "240 10% 2%",
+      //   elevated1: "240 10% 3%",
+      // },
+      // Override semantic colors for day mode (optional)
+      // semanticColorsDay: {
+      //   success: "145 75% 40%",
+      //   error: "0 84.2% 60.2%",
+      // },
+      // Override semantic colors for night mode (optional)
+      // semanticColorsNight: {
+      //   success: "145 70% 48%",
+      //   error: "0 62.8% 30.6%",
+      // },
+      // Override text colors for day mode (optional)
+      // textColorsDay: {
+      //   primary: "0 0% 9%",
+      //   secondary: "0 0% 45%",
+      // },
+      // Override text colors for night mode (optional)
+      // textColorsNight: {
+      //   primary: "0 0% 89.8%",
+      //   secondary: "0 0% 65%",
+      // },
+    };
+  }
+});
+
 // src/FOUNDATION/tokens/colors.ts
 var primaryColors = {
   50: "210 40% 98%",
@@ -2430,7 +2498,8 @@ function removeBrandOverrides(namespace) {
 var themes = {
   default: () => Promise.resolve().then(() => (init_default(), default_exports)).then((m) => m.defaultTheme),
   dark: () => Promise.resolve().then(() => (init_dark(), dark_exports)).then((m) => m.darkTheme),
-  brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme)
+  brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme),
+  "--help": () => Promise.resolve().then(() => (init_help(), help_exports)).then((m) => m.helpTheme)
 };
 async function getTheme(name) {
   const themeLoader = themes[name];
@@ -3572,21 +3641,23 @@ function ThemeProvider({
     applyDocumentTheme(initialMode, initialTheme, initialBrand);
     if (typeof document !== "undefined" && document.documentElement) {
       setTimeout(() => {
-        const afterApply = document.documentElement.style.getPropertyValue("--tm-primary");
-        fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            location: "ThemeProvider.tsx:289",
-            message: "ThemeProvider useEffect after applyDocumentTheme",
-            data: { afterValue: afterApply, hasValue: !!afterApply },
-            timestamp: Date.now(),
-            sessionId: "debug-session",
-            runId: "run1",
-            hypothesisId: "C"
-          })
-        }).catch(() => {
-        });
+        if (typeof document !== "undefined" && document.documentElement) {
+          const afterApply = document.documentElement.style.getPropertyValue("--tm-primary");
+          fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              location: "ThemeProvider.tsx:289",
+              message: "ThemeProvider useEffect after applyDocumentTheme",
+              data: { afterValue: afterApply, hasValue: !!afterApply },
+              timestamp: Date.now(),
+              sessionId: "debug-session",
+              runId: "run1",
+              hypothesisId: "C"
+            })
+          }).catch(() => {
+          });
+        }
       }, 100);
     }
     persistMode(initialMode, storageKey);

package/dist/theme/index.mjs

@@ -115,6 +115,74 @@ var init_default = __esm({
   }
 });
 
+// src/themes/--help.ts
+var help_exports = {};
+__export(help_exports, {
+  helpTheme: () => helpTheme
+});
+var helpTheme;
+var init_help = __esm({
+  "src/themes/--help.ts"() {
+    helpTheme = {
+      name: "--help",
+      description: "Custom theme:  Help"
+      // Override primary colors (optional)
+      // primaryColors: {
+      //   500: "210 75% 45%", // HSL format
+      //   600: "210 70% 40%",
+      // },
+      // Override accent colors (optional)
+      // accentColors: {
+      //   500: "285 80% 60%",
+      // },
+      // Override secondary colors (optional)
+      // secondaryColors: {
+      //   500: "170 90% 45%",
+      // },
+      // Override base colors for day mode (optional)
+      // baseColorsDay: {
+      //   background: "0 0% 100%",
+      //   foreground: "0 0% 9%",
+      // },
+      // Override base colors for night mode (optional)
+      // baseColorsNight: {
+      //   background: "240 10% 3.9%",
+      //   foreground: "0 0% 89.8%",
+      // },
+      // Override surface colors for day mode (optional)
+      // surfaceColorsDay: {
+      //   base: "0 0% 100%",
+      //   elevated1: "0 0% 98%",
+      // },
+      // Override surface colors for night mode (optional)
+      // surfaceColorsNight: {
+      //   base: "240 10% 2%",
+      //   elevated1: "240 10% 3%",
+      // },
+      // Override semantic colors for day mode (optional)
+      // semanticColorsDay: {
+      //   success: "145 75% 40%",
+      //   error: "0 84.2% 60.2%",
+      // },
+      // Override semantic colors for night mode (optional)
+      // semanticColorsNight: {
+      //   success: "145 70% 48%",
+      //   error: "0 62.8% 30.6%",
+      // },
+      // Override text colors for day mode (optional)
+      // textColorsDay: {
+      //   primary: "0 0% 9%",
+      //   secondary: "0 0% 45%",
+      // },
+      // Override text colors for night mode (optional)
+      // textColorsNight: {
+      //   primary: "0 0% 89.8%",
+      //   secondary: "0 0% 65%",
+      // },
+    };
+  }
+});
+
 // src/FOUNDATION/tokens/colors.ts
 var primaryColors = {
   50: "210 40% 98%",
@@ -2424,7 +2492,8 @@ function removeBrandOverrides(namespace) {
 var themes = {
   default: () => Promise.resolve().then(() => (init_default(), default_exports)).then((m) => m.defaultTheme),
   dark: () => Promise.resolve().then(() => (init_dark(), dark_exports)).then((m) => m.darkTheme),
-  brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme)
+  brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme),
+  "--help": () => Promise.resolve().then(() => (init_help(), help_exports)).then((m) => m.helpTheme)
 };
 async function getTheme(name) {
   const themeLoader = themes[name];
@@ -3566,21 +3635,23 @@ function ThemeProvider({
     applyDocumentTheme(initialMode, initialTheme, initialBrand);
     if (typeof document !== "undefined" && document.documentElement) {
       setTimeout(() => {
-        const afterApply = document.documentElement.style.getPropertyValue("--tm-primary");
-        fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            location: "ThemeProvider.tsx:289",
-            message: "ThemeProvider useEffect after applyDocumentTheme",
-            data: { afterValue: afterApply, hasValue: !!afterApply },
-            timestamp: Date.now(),
-            sessionId: "debug-session",
-            runId: "run1",
-            hypothesisId: "C"
-          })
-        }).catch(() => {
-        });
+        if (typeof document !== "undefined" && document.documentElement) {
+          const afterApply = document.documentElement.style.getPropertyValue("--tm-primary");
+          fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              location: "ThemeProvider.tsx:289",
+              message: "ThemeProvider useEffect after applyDocumentTheme",
+              data: { afterValue: afterApply, hasValue: !!afterApply },
+              timestamp: Date.now(),
+              sessionId: "debug-session",
+              runId: "run1",
+              hypothesisId: "C"
+            })
+          }).catch(() => {
+          });
+        }
       }, 100);
     }
     persistMode(initialMode, storageKey);

package/dist/tokens/index.cjs

@@ -660,15 +660,16 @@ var BUTTON_TOKENS = {
   /**
    * Icon size within buttons by button size
    * Scales proportionally with button size for visual balance
+   * Contains full SVG selector classes for direct use in CVA
    */
   iconSize: {
-    sm: "size-3.5",
+    sm: "[&_svg]:w-3.5 [&_svg]:h-3.5",
     // 14px (0.875rem) - smaller icon for small buttons
-    md: "size-4",
+    md: "[&_svg]:w-4 [&_svg]:h-4",
     // 16px (1rem) - medium icon for medium buttons
-    lg: "size-5",
+    lg: "[&_svg]:w-5 [&_svg]:h-5",
     // 20px (1.25rem) - larger icon for large buttons
-    icon: "size-4"
+    icon: "[&_svg]:w-4 [&_svg]:h-4"
     // 16px (1rem) - medium icon for icon-only buttons
   },
   /**

package/dist/tokens/index.d.cts

@@ -1,5 +1,5 @@
 export { B as BaseColorTokens, C as ChartColors, a as ColorScale, b as ColorTokens, M as Mode, S as SemanticColors, c as SurfaceColors, T as TextColors, d as accentColors, e as baseColors, f as chartColors, g as colorCSSVariables, h as cssVariableColorTokens, p as primaryColors, s as secondaryColors, i as semanticColors, j as surfaceColors, t as tailwindThemeColors, k as textColors } from '../colors-BrFmCQv-.cjs';
-export { A as ALERT_TOKENS, j as AlertVariant, cr as AlignOffsetToken, b9 as Animation, cs as AnimationPresetToken, ct as AspectRatioToken, B as BUTTON_TOKENS, bC as BorderRadius, k as ButtonFontSize, l as ButtonHeight, m as ButtonPaddingHorizontal, n as ButtonPaddingVertical, o as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, c7 as CanonicalFontSize, c8 as CanonicalFontWeight, c9 as CanonicalLetterSpacing, ca as CanonicalLineHeight, cb as CanonicalTextColor, p as CardPadding, q as CardRadius, r as CardShadow, s as CardSize, t as CardSpacingVertical, u as CheckboxSize, v as CheckboxState, w as CheckboxVariant, cu as ColorToken, bI as ColoredShadow, bD as ComponentRadius, bW as ComponentSpacing, cv as ContainerMaxWidthToken, cw as ContainerPaddingToken, bX as ContainerSpacing, D as DATA_TOKENS, x as DataListLabelWidth, y as DataListRowPadding, cx as DelayToken, ba as Duration, bb as Easing, bJ as ElevationShadow, E as EmptyStateIconSize, cy as FlexBasisToken, bK as FocusRing, cc as FontFamily, cd as FontSize, ce as FontWeight, bL as GlowEffect, bY as GridSpacing, I as ICON_TOKENS, b as INPUT_TOKENS, z as IconColor, F as IconSize, G as IconStroke, H as InputFontSize, J as InputHeight, K as InputPaddingHorizontal, L as InputPaddingVertical, Q as InputRadius, U as InputSize, bc as Keyframe, cz as LayoutSpaceToken, cf as LetterSpacing, cg as LineHeight, M as MENU_TOKENS, c as MOTION_TOKENS, V as MenuContentMinWidth, W as MenuContentPadding, X as MenuContentRadius, Y as MenuContentShadow, Z as MenuIndicatorOffset, _ as MenuIndicatorSize, $ as MenuItemGap, a0 as MenuItemHeight, a1 as MenuItemPadding, a2 as MenuItemRadius, a3 as MenuLabelPadding, a4 as MenuSeparatorMargin, cA as ModalFooterAlignToken, cB as ModalHeightToken, cC as ModalSizeToken, cD as ModalWidthToken, a5 as MotionAnimation, a6 as MotionDuration, cE as MotionDurationToken, a7 as MotionEasing, cF as MotionEasingToken, cG as MotionToken, a8 as MotionTransition, a9 as MotionTransitionPreset, cH as MotionTransitionToken, bo as MotionV2CombinedType, bp as MotionV2Duration, bq as MotionV2Easing, br as MotionV2SlideDirection, bs as MotionV2Transition, N as NAVIGATION_TOKENS, d as NOTIFICATION_TOKENS, aa as NavigationItemPadding, ab as NavigationListGap, ac as NavigationRadius, ad as NavigationShadow, ae as NavigationSize, af as NavigationState, ag as NotificationPanelWidth, ah as NotificationVariant, O as OVERLAY_TOKENS, ai as OverlayBackdropVariant, aj as OverlayModalSize, P as POPOVER_TOKENS, ak as PopoverArrowOffset, al as PopoverArrowSize, am as PopoverContentPadding, an as PopoverContentRadius, ao as PopoverContentShadow, ap as PopoverContentWidth, R as RADIO_TOKENS, aq as RadioSize, ar as RadioState, as as RadioVariant, cI as RadiusToken, cJ as ResponsiveAlignOffset, cK as ResponsiveAnimationPreset, cL as ResponsiveAspectRatio, cM as ResponsiveColor, cN as ResponsiveContainerMaxWidth, cO as ResponsiveContainerPadding, cP as ResponsiveDelay, cQ as ResponsiveFlexBasis, cR as ResponsiveModalHeight, cS as ResponsiveModalSize, cT as ResponsiveModalWidth, cU as ResponsiveMotion, cV as ResponsiveRadius, cW as ResponsiveSelectSize, cX as ResponsiveSelectWidth, cY as ResponsiveShadow, cZ as ResponsiveSideOffset, c_ as ResponsiveSpace, c$ as ResponsiveSurface, d0 as ResponsiveTextLineHeight, d1 as ResponsiveTextSize, d2 as ResponsiveTextWeight, S as SECTION_TOKENS, e as SELECT_TOKENS, f as SURFACE_TOKENS, g as SWITCH_TOKENS, at as SectionGap, au as SectionPadding, bZ as SectionSpacing, av as SelectContentPadding, aw as SelectContentRadius, ax as SelectItemFontSize, ay as SelectItemPaddingHorizontal, az as SelectItemPaddingVertical, aA as SelectItemRadius, aB as SelectLabelFontSize, aC as SelectLabelPaddingHorizontal, aD as SelectLabelPaddingVertical, aE as SelectSeparatorMarginHorizontal, aF as SelectSeparatorMarginVertical, d3 as SelectSizeToken, d4 as SelectStateToken, aG as SelectTriggerFontSize, aH as SelectTriggerHeight, aI as SelectTriggerPaddingHorizontal, aJ as SelectTriggerPaddingVertical, aK as SelectTriggerRadius, d5 as SelectVariantToken, d6 as SelectWidthToken, b_ as SemanticSpacing, d7 as ShadowToken, d8 as SideOffsetToken, aL as SkeletonAnimation, aM as SkeletonBackground, aN as SkeletonVariant, d9 as SpaceToken, b$ as Spacing, da as SpacingToken, bd as Spring, c0 as StackSpacing, aO as SurfacePadding, aP as SurfaceRadius, aQ as SurfaceShadow, db as SurfaceToken, aR as SurfaceVariant, aS as SwitchSize, aT as SwitchState, aU as SwitchVariant, T as TEXT_TOKENS, h as TOAST_TOKENS, i as TOOLTIP_TOKENS, aV as TableCellPadding, aW as TableGap, aX as TableHeaderPadding, aY as TableRowHeight, aZ as TableShadow, a_ as TextFontSize, a$ as TextFontWeight, b0 as TextLetterSpacing, dc as TextLetterSpacingToken, b1 as TextLineHeight, dd as TextLineHeightToken, de as TextSizeToken, ch as TextStyle, df as TextWeightToken, b2 as ToastVariant, b3 as TooltipContentRadius, b4 as TooltipContentShadow, be as Transition, c6 as UI_COLORS, bM as accentColoredShadows, b5 as allCSSVariables, b6 as allCSSVariablesCSS, bf as animations, bE as borderRadius, bF as componentRadius, bN as componentShadowMapping, bg as durations, bh as easings, bO as elevationShadows, bP as focusRings, ci as fontFamily, cj as fontSize, ck as fontSizeWithMd, cl as fontWeight, b7 as generateCSSVariablesCSS, bQ as glowEffects, bi as keyframes, c1 as layoutSpacing, cm as letterSpacing, cn as lineHeight, bj as motionCSSVariables, bt as motionV2CSSVariables, bu as motionV2Combined, bv as motionV2Durations, bw as motionV2Easings, bx as motionV2Fade, by as motionV2Scale, bz as motionV2Slide, bA as motionV2TailwindConfig, bB as motionV2Transitions, bR as primaryColoredShadows, bG as radiusCSSVariables, bk as reducedMotion, c2 as semanticSpacing, bS as shadowBase, bT as shadowCSSVariables, bU as shadowOpacity, c3 as spacing, c4 as spacingCSSVariables, bl as springs, bm as tailwindMotionConfig, bH as tailwindRadiusConfig, bV as tailwindShadowConfig, c5 as tailwindSpacingConfig, co as tailwindTypographyConfig, cp as textStyles, b8 as tokenSystemSummary, bn as transitions, cq as typographyCSSVariables } from '../index-DInIMlaR.cjs';
+export { A as ALERT_TOKENS, j as AlertVariant, cr as AlignOffsetToken, b9 as Animation, cs as AnimationPresetToken, ct as AspectRatioToken, B as BUTTON_TOKENS, bC as BorderRadius, k as ButtonFontSize, l as ButtonHeight, m as ButtonPaddingHorizontal, n as ButtonPaddingVertical, o as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, c7 as CanonicalFontSize, c8 as CanonicalFontWeight, c9 as CanonicalLetterSpacing, ca as CanonicalLineHeight, cb as CanonicalTextColor, p as CardPadding, q as CardRadius, r as CardShadow, s as CardSize, t as CardSpacingVertical, u as CheckboxSize, v as CheckboxState, w as CheckboxVariant, cu as ColorToken, bI as ColoredShadow, bD as ComponentRadius, bW as ComponentSpacing, cv as ContainerMaxWidthToken, cw as ContainerPaddingToken, bX as ContainerSpacing, D as DATA_TOKENS, x as DataListLabelWidth, y as DataListRowPadding, cx as DelayToken, ba as Duration, bb as Easing, bJ as ElevationShadow, E as EmptyStateIconSize, cy as FlexBasisToken, bK as FocusRing, cc as FontFamily, cd as FontSize, ce as FontWeight, bL as GlowEffect, bY as GridSpacing, I as ICON_TOKENS, b as INPUT_TOKENS, z as IconColor, F as IconSize, G as IconStroke, H as InputFontSize, J as InputHeight, K as InputPaddingHorizontal, L as InputPaddingVertical, Q as InputRadius, U as InputSize, bc as Keyframe, cz as LayoutSpaceToken, cf as LetterSpacing, cg as LineHeight, M as MENU_TOKENS, c as MOTION_TOKENS, V as MenuContentMinWidth, W as MenuContentPadding, X as MenuContentRadius, Y as MenuContentShadow, Z as MenuIndicatorOffset, _ as MenuIndicatorSize, $ as MenuItemGap, a0 as MenuItemHeight, a1 as MenuItemPadding, a2 as MenuItemRadius, a3 as MenuLabelPadding, a4 as MenuSeparatorMargin, cA as ModalFooterAlignToken, cB as ModalHeightToken, cC as ModalSizeToken, cD as ModalWidthToken, a5 as MotionAnimation, a6 as MotionDuration, cE as MotionDurationToken, a7 as MotionEasing, cF as MotionEasingToken, cG as MotionToken, a8 as MotionTransition, a9 as MotionTransitionPreset, cH as MotionTransitionToken, bo as MotionV2CombinedType, bp as MotionV2Duration, bq as MotionV2Easing, br as MotionV2SlideDirection, bs as MotionV2Transition, N as NAVIGATION_TOKENS, d as NOTIFICATION_TOKENS, aa as NavigationItemPadding, ab as NavigationListGap, ac as NavigationRadius, ad as NavigationShadow, ae as NavigationSize, af as NavigationState, ag as NotificationPanelWidth, ah as NotificationVariant, O as OVERLAY_TOKENS, ai as OverlayBackdropVariant, aj as OverlayModalSize, P as POPOVER_TOKENS, ak as PopoverArrowOffset, al as PopoverArrowSize, am as PopoverContentPadding, an as PopoverContentRadius, ao as PopoverContentShadow, ap as PopoverContentWidth, R as RADIO_TOKENS, aq as RadioSize, ar as RadioState, as as RadioVariant, cI as RadiusToken, cJ as ResponsiveAlignOffset, cK as ResponsiveAnimationPreset, cL as ResponsiveAspectRatio, cM as ResponsiveColor, cN as ResponsiveContainerMaxWidth, cO as ResponsiveContainerPadding, cP as ResponsiveDelay, cQ as ResponsiveFlexBasis, cR as ResponsiveModalHeight, cS as ResponsiveModalSize, cT as ResponsiveModalWidth, cU as ResponsiveMotion, cV as ResponsiveRadius, cW as ResponsiveSelectSize, cX as ResponsiveSelectWidth, cY as ResponsiveShadow, cZ as ResponsiveSideOffset, c_ as ResponsiveSpace, c$ as ResponsiveSurface, d0 as ResponsiveTextLineHeight, d1 as ResponsiveTextSize, d2 as ResponsiveTextWeight, S as SECTION_TOKENS, e as SELECT_TOKENS, f as SURFACE_TOKENS, g as SWITCH_TOKENS, at as SectionGap, au as SectionPadding, bZ as SectionSpacing, av as SelectContentPadding, aw as SelectContentRadius, ax as SelectItemFontSize, ay as SelectItemPaddingHorizontal, az as SelectItemPaddingVertical, aA as SelectItemRadius, aB as SelectLabelFontSize, aC as SelectLabelPaddingHorizontal, aD as SelectLabelPaddingVertical, aE as SelectSeparatorMarginHorizontal, aF as SelectSeparatorMarginVertical, d3 as SelectSizeToken, d4 as SelectStateToken, aG as SelectTriggerFontSize, aH as SelectTriggerHeight, aI as SelectTriggerPaddingHorizontal, aJ as SelectTriggerPaddingVertical, aK as SelectTriggerRadius, d5 as SelectVariantToken, d6 as SelectWidthToken, b_ as SemanticSpacing, d7 as ShadowToken, d8 as SideOffsetToken, aL as SkeletonAnimation, aM as SkeletonBackground, aN as SkeletonVariant, d9 as SpaceToken, b$ as Spacing, da as SpacingToken, bd as Spring, c0 as StackSpacing, aO as SurfacePadding, aP as SurfaceRadius, aQ as SurfaceShadow, db as SurfaceToken, aR as SurfaceVariant, aS as SwitchSize, aT as SwitchState, aU as SwitchVariant, T as TEXT_TOKENS, h as TOAST_TOKENS, i as TOOLTIP_TOKENS, aV as TableCellPadding, aW as TableGap, aX as TableHeaderPadding, aY as TableRowHeight, aZ as TableShadow, a_ as TextFontSize, a$ as TextFontWeight, b0 as TextLetterSpacing, dc as TextLetterSpacingToken, b1 as TextLineHeight, dd as TextLineHeightToken, de as TextSizeToken, ch as TextStyle, df as TextWeightToken, b2 as ToastVariant, b3 as TooltipContentRadius, b4 as TooltipContentShadow, be as Transition, c6 as UI_COLORS, bM as accentColoredShadows, b5 as allCSSVariables, b6 as allCSSVariablesCSS, bf as animations, bE as borderRadius, bF as componentRadius, bN as componentShadowMapping, bg as durations, bh as easings, bO as elevationShadows, bP as focusRings, ci as fontFamily, cj as fontSize, ck as fontSizeWithMd, cl as fontWeight, b7 as generateCSSVariablesCSS, bQ as glowEffects, bi as keyframes, c1 as layoutSpacing, cm as letterSpacing, cn as lineHeight, bj as motionCSSVariables, bt as motionV2CSSVariables, bu as motionV2Combined, bv as motionV2Durations, bw as motionV2Easings, bx as motionV2Fade, by as motionV2Scale, bz as motionV2Slide, bA as motionV2TailwindConfig, bB as motionV2Transitions, bR as primaryColoredShadows, bG as radiusCSSVariables, bk as reducedMotion, c2 as semanticSpacing, bS as shadowBase, bT as shadowCSSVariables, bU as shadowOpacity, c3 as spacing, c4 as spacingCSSVariables, bl as springs, bm as tailwindMotionConfig, bH as tailwindRadiusConfig, bV as tailwindShadowConfig, c5 as tailwindSpacingConfig, co as tailwindTypographyConfig, cp as textStyles, b8 as tokenSystemSummary, bn as transitions, cq as typographyCSSVariables } from '../index-DXmHg8ji.cjs';
 
 /**
  * Artist Card Component Tokens

package/dist/tokens/index.d.ts

@@ -1,5 +1,5 @@
 export { B as BaseColorTokens, C as ChartColors, a as ColorScale, b as ColorTokens, M as Mode, S as SemanticColors, c as SurfaceColors, T as TextColors, d as accentColors, e as baseColors, f as chartColors, g as colorCSSVariables, h as cssVariableColorTokens, p as primaryColors, s as secondaryColors, i as semanticColors, j as surfaceColors, t as tailwindThemeColors, k as textColors } from '../colors-BrFmCQv-.js';
-export { A as ALERT_TOKENS, j as AlertVariant, cr as AlignOffsetToken, b9 as Animation, cs as AnimationPresetToken, ct as AspectRatioToken, B as BUTTON_TOKENS, bC as BorderRadius, k as ButtonFontSize, l as ButtonHeight, m as ButtonPaddingHorizontal, n as ButtonPaddingVertical, o as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, c7 as CanonicalFontSize, c8 as CanonicalFontWeight, c9 as CanonicalLetterSpacing, ca as CanonicalLineHeight, cb as CanonicalTextColor, p as CardPadding, q as CardRadius, r as CardShadow, s as CardSize, t as CardSpacingVertical, u as CheckboxSize, v as CheckboxState, w as CheckboxVariant, cu as ColorToken, bI as ColoredShadow, bD as ComponentRadius, bW as ComponentSpacing, cv as ContainerMaxWidthToken, cw as ContainerPaddingToken, bX as ContainerSpacing, D as DATA_TOKENS, x as DataListLabelWidth, y as DataListRowPadding, cx as DelayToken, ba as Duration, bb as Easing, bJ as ElevationShadow, E as EmptyStateIconSize, cy as FlexBasisToken, bK as FocusRing, cc as FontFamily, cd as FontSize, ce as FontWeight, bL as GlowEffect, bY as GridSpacing, I as ICON_TOKENS, b as INPUT_TOKENS, z as IconColor, F as IconSize, G as IconStroke, H as InputFontSize, J as InputHeight, K as InputPaddingHorizontal, L as InputPaddingVertical, Q as InputRadius, U as InputSize, bc as Keyframe, cz as LayoutSpaceToken, cf as LetterSpacing, cg as LineHeight, M as MENU_TOKENS, c as MOTION_TOKENS, V as MenuContentMinWidth, W as MenuContentPadding, X as MenuContentRadius, Y as MenuContentShadow, Z as MenuIndicatorOffset, _ as MenuIndicatorSize, $ as MenuItemGap, a0 as MenuItemHeight, a1 as MenuItemPadding, a2 as MenuItemRadius, a3 as MenuLabelPadding, a4 as MenuSeparatorMargin, cA as ModalFooterAlignToken, cB as ModalHeightToken, cC as ModalSizeToken, cD as ModalWidthToken, a5 as MotionAnimation, a6 as MotionDuration, cE as MotionDurationToken, a7 as MotionEasing, cF as MotionEasingToken, cG as MotionToken, a8 as MotionTransition, a9 as MotionTransitionPreset, cH as MotionTransitionToken, bo as MotionV2CombinedType, bp as MotionV2Duration, bq as MotionV2Easing, br as MotionV2SlideDirection, bs as MotionV2Transition, N as NAVIGATION_TOKENS, d as NOTIFICATION_TOKENS, aa as NavigationItemPadding, ab as NavigationListGap, ac as NavigationRadius, ad as NavigationShadow, ae as NavigationSize, af as NavigationState, ag as NotificationPanelWidth, ah as NotificationVariant, O as OVERLAY_TOKENS, ai as OverlayBackdropVariant, aj as OverlayModalSize, P as POPOVER_TOKENS, ak as PopoverArrowOffset, al as PopoverArrowSize, am as PopoverContentPadding, an as PopoverContentRadius, ao as PopoverContentShadow, ap as PopoverContentWidth, R as RADIO_TOKENS, aq as RadioSize, ar as RadioState, as as RadioVariant, cI as RadiusToken, cJ as ResponsiveAlignOffset, cK as ResponsiveAnimationPreset, cL as ResponsiveAspectRatio, cM as ResponsiveColor, cN as ResponsiveContainerMaxWidth, cO as ResponsiveContainerPadding, cP as ResponsiveDelay, cQ as ResponsiveFlexBasis, cR as ResponsiveModalHeight, cS as ResponsiveModalSize, cT as ResponsiveModalWidth, cU as ResponsiveMotion, cV as ResponsiveRadius, cW as ResponsiveSelectSize, cX as ResponsiveSelectWidth, cY as ResponsiveShadow, cZ as ResponsiveSideOffset, c_ as ResponsiveSpace, c$ as ResponsiveSurface, d0 as ResponsiveTextLineHeight, d1 as ResponsiveTextSize, d2 as ResponsiveTextWeight, S as SECTION_TOKENS, e as SELECT_TOKENS, f as SURFACE_TOKENS, g as SWITCH_TOKENS, at as SectionGap, au as SectionPadding, bZ as SectionSpacing, av as SelectContentPadding, aw as SelectContentRadius, ax as SelectItemFontSize, ay as SelectItemPaddingHorizontal, az as SelectItemPaddingVertical, aA as SelectItemRadius, aB as SelectLabelFontSize, aC as SelectLabelPaddingHorizontal, aD as SelectLabelPaddingVertical, aE as SelectSeparatorMarginHorizontal, aF as SelectSeparatorMarginVertical, d3 as SelectSizeToken, d4 as SelectStateToken, aG as SelectTriggerFontSize, aH as SelectTriggerHeight, aI as SelectTriggerPaddingHorizontal, aJ as SelectTriggerPaddingVertical, aK as SelectTriggerRadius, d5 as SelectVariantToken, d6 as SelectWidthToken, b_ as SemanticSpacing, d7 as ShadowToken, d8 as SideOffsetToken, aL as SkeletonAnimation, aM as SkeletonBackground, aN as SkeletonVariant, d9 as SpaceToken, b$ as Spacing, da as SpacingToken, bd as Spring, c0 as StackSpacing, aO as SurfacePadding, aP as SurfaceRadius, aQ as SurfaceShadow, db as SurfaceToken, aR as SurfaceVariant, aS as SwitchSize, aT as SwitchState, aU as SwitchVariant, T as TEXT_TOKENS, h as TOAST_TOKENS, i as TOOLTIP_TOKENS, aV as TableCellPadding, aW as TableGap, aX as TableHeaderPadding, aY as TableRowHeight, aZ as TableShadow, a_ as TextFontSize, a$ as TextFontWeight, b0 as TextLetterSpacing, dc as TextLetterSpacingToken, b1 as TextLineHeight, dd as TextLineHeightToken, de as TextSizeToken, ch as TextStyle, df as TextWeightToken, b2 as ToastVariant, b3 as TooltipContentRadius, b4 as TooltipContentShadow, be as Transition, c6 as UI_COLORS, bM as accentColoredShadows, b5 as allCSSVariables, b6 as allCSSVariablesCSS, bf as animations, bE as borderRadius, bF as componentRadius, bN as componentShadowMapping, bg as durations, bh as easings, bO as elevationShadows, bP as focusRings, ci as fontFamily, cj as fontSize, ck as fontSizeWithMd, cl as fontWeight, b7 as generateCSSVariablesCSS, bQ as glowEffects, bi as keyframes, c1 as layoutSpacing, cm as letterSpacing, cn as lineHeight, bj as motionCSSVariables, bt as motionV2CSSVariables, bu as motionV2Combined, bv as motionV2Durations, bw as motionV2Easings, bx as motionV2Fade, by as motionV2Scale, bz as motionV2Slide, bA as motionV2TailwindConfig, bB as motionV2Transitions, bR as primaryColoredShadows, bG as radiusCSSVariables, bk as reducedMotion, c2 as semanticSpacing, bS as shadowBase, bT as shadowCSSVariables, bU as shadowOpacity, c3 as spacing, c4 as spacingCSSVariables, bl as springs, bm as tailwindMotionConfig, bH as tailwindRadiusConfig, bV as tailwindShadowConfig, c5 as tailwindSpacingConfig, co as tailwindTypographyConfig, cp as textStyles, b8 as tokenSystemSummary, bn as transitions, cq as typographyCSSVariables } from '../index-DInIMlaR.js';
+export { A as ALERT_TOKENS, j as AlertVariant, cr as AlignOffsetToken, b9 as Animation, cs as AnimationPresetToken, ct as AspectRatioToken, B as BUTTON_TOKENS, bC as BorderRadius, k as ButtonFontSize, l as ButtonHeight, m as ButtonPaddingHorizontal, n as ButtonPaddingVertical, o as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, c7 as CanonicalFontSize, c8 as CanonicalFontWeight, c9 as CanonicalLetterSpacing, ca as CanonicalLineHeight, cb as CanonicalTextColor, p as CardPadding, q as CardRadius, r as CardShadow, s as CardSize, t as CardSpacingVertical, u as CheckboxSize, v as CheckboxState, w as CheckboxVariant, cu as ColorToken, bI as ColoredShadow, bD as ComponentRadius, bW as ComponentSpacing, cv as ContainerMaxWidthToken, cw as ContainerPaddingToken, bX as ContainerSpacing, D as DATA_TOKENS, x as DataListLabelWidth, y as DataListRowPadding, cx as DelayToken, ba as Duration, bb as Easing, bJ as ElevationShadow, E as EmptyStateIconSize, cy as FlexBasisToken, bK as FocusRing, cc as FontFamily, cd as FontSize, ce as FontWeight, bL as GlowEffect, bY as GridSpacing, I as ICON_TOKENS, b as INPUT_TOKENS, z as IconColor, F as IconSize, G as IconStroke, H as InputFontSize, J as InputHeight, K as InputPaddingHorizontal, L as InputPaddingVertical, Q as InputRadius, U as InputSize, bc as Keyframe, cz as LayoutSpaceToken, cf as LetterSpacing, cg as LineHeight, M as MENU_TOKENS, c as MOTION_TOKENS, V as MenuContentMinWidth, W as MenuContentPadding, X as MenuContentRadius, Y as MenuContentShadow, Z as MenuIndicatorOffset, _ as MenuIndicatorSize, $ as MenuItemGap, a0 as MenuItemHeight, a1 as MenuItemPadding, a2 as MenuItemRadius, a3 as MenuLabelPadding, a4 as MenuSeparatorMargin, cA as ModalFooterAlignToken, cB as ModalHeightToken, cC as ModalSizeToken, cD as ModalWidthToken, a5 as MotionAnimation, a6 as MotionDuration, cE as MotionDurationToken, a7 as MotionEasing, cF as MotionEasingToken, cG as MotionToken, a8 as MotionTransition, a9 as MotionTransitionPreset, cH as MotionTransitionToken, bo as MotionV2CombinedType, bp as MotionV2Duration, bq as MotionV2Easing, br as MotionV2SlideDirection, bs as MotionV2Transition, N as NAVIGATION_TOKENS, d as NOTIFICATION_TOKENS, aa as NavigationItemPadding, ab as NavigationListGap, ac as NavigationRadius, ad as NavigationShadow, ae as NavigationSize, af as NavigationState, ag as NotificationPanelWidth, ah as NotificationVariant, O as OVERLAY_TOKENS, ai as OverlayBackdropVariant, aj as OverlayModalSize, P as POPOVER_TOKENS, ak as PopoverArrowOffset, al as PopoverArrowSize, am as PopoverContentPadding, an as PopoverContentRadius, ao as PopoverContentShadow, ap as PopoverContentWidth, R as RADIO_TOKENS, aq as RadioSize, ar as RadioState, as as RadioVariant, cI as RadiusToken, cJ as ResponsiveAlignOffset, cK as ResponsiveAnimationPreset, cL as ResponsiveAspectRatio, cM as ResponsiveColor, cN as ResponsiveContainerMaxWidth, cO as ResponsiveContainerPadding, cP as ResponsiveDelay, cQ as ResponsiveFlexBasis, cR as ResponsiveModalHeight, cS as ResponsiveModalSize, cT as ResponsiveModalWidth, cU as ResponsiveMotion, cV as ResponsiveRadius, cW as ResponsiveSelectSize, cX as ResponsiveSelectWidth, cY as ResponsiveShadow, cZ as ResponsiveSideOffset, c_ as ResponsiveSpace, c$ as ResponsiveSurface, d0 as ResponsiveTextLineHeight, d1 as ResponsiveTextSize, d2 as ResponsiveTextWeight, S as SECTION_TOKENS, e as SELECT_TOKENS, f as SURFACE_TOKENS, g as SWITCH_TOKENS, at as SectionGap, au as SectionPadding, bZ as SectionSpacing, av as SelectContentPadding, aw as SelectContentRadius, ax as SelectItemFontSize, ay as SelectItemPaddingHorizontal, az as SelectItemPaddingVertical, aA as SelectItemRadius, aB as SelectLabelFontSize, aC as SelectLabelPaddingHorizontal, aD as SelectLabelPaddingVertical, aE as SelectSeparatorMarginHorizontal, aF as SelectSeparatorMarginVertical, d3 as SelectSizeToken, d4 as SelectStateToken, aG as SelectTriggerFontSize, aH as SelectTriggerHeight, aI as SelectTriggerPaddingHorizontal, aJ as SelectTriggerPaddingVertical, aK as SelectTriggerRadius, d5 as SelectVariantToken, d6 as SelectWidthToken, b_ as SemanticSpacing, d7 as ShadowToken, d8 as SideOffsetToken, aL as SkeletonAnimation, aM as SkeletonBackground, aN as SkeletonVariant, d9 as SpaceToken, b$ as Spacing, da as SpacingToken, bd as Spring, c0 as StackSpacing, aO as SurfacePadding, aP as SurfaceRadius, aQ as SurfaceShadow, db as SurfaceToken, aR as SurfaceVariant, aS as SwitchSize, aT as SwitchState, aU as SwitchVariant, T as TEXT_TOKENS, h as TOAST_TOKENS, i as TOOLTIP_TOKENS, aV as TableCellPadding, aW as TableGap, aX as TableHeaderPadding, aY as TableRowHeight, aZ as TableShadow, a_ as TextFontSize, a$ as TextFontWeight, b0 as TextLetterSpacing, dc as TextLetterSpacingToken, b1 as TextLineHeight, dd as TextLineHeightToken, de as TextSizeToken, ch as TextStyle, df as TextWeightToken, b2 as ToastVariant, b3 as TooltipContentRadius, b4 as TooltipContentShadow, be as Transition, c6 as UI_COLORS, bM as accentColoredShadows, b5 as allCSSVariables, b6 as allCSSVariablesCSS, bf as animations, bE as borderRadius, bF as componentRadius, bN as componentShadowMapping, bg as durations, bh as easings, bO as elevationShadows, bP as focusRings, ci as fontFamily, cj as fontSize, ck as fontSizeWithMd, cl as fontWeight, b7 as generateCSSVariablesCSS, bQ as glowEffects, bi as keyframes, c1 as layoutSpacing, cm as letterSpacing, cn as lineHeight, bj as motionCSSVariables, bt as motionV2CSSVariables, bu as motionV2Combined, bv as motionV2Durations, bw as motionV2Easings, bx as motionV2Fade, by as motionV2Scale, bz as motionV2Slide, bA as motionV2TailwindConfig, bB as motionV2Transitions, bR as primaryColoredShadows, bG as radiusCSSVariables, bk as reducedMotion, c2 as semanticSpacing, bS as shadowBase, bT as shadowCSSVariables, bU as shadowOpacity, c3 as spacing, c4 as spacingCSSVariables, bl as springs, bm as tailwindMotionConfig, bH as tailwindRadiusConfig, bV as tailwindShadowConfig, c5 as tailwindSpacingConfig, co as tailwindTypographyConfig, cp as textStyles, b8 as tokenSystemSummary, bn as transitions, cq as typographyCSSVariables } from '../index-DXmHg8ji.js';
 
 /**
  * Artist Card Component Tokens

package/dist/tokens/index.mjs

@@ -658,15 +658,16 @@ var BUTTON_TOKENS = {
   /**
    * Icon size within buttons by button size
    * Scales proportionally with button size for visual balance
+   * Contains full SVG selector classes for direct use in CVA
    */
   iconSize: {
-    sm: "size-3.5",
+    sm: "[&_svg]:w-3.5 [&_svg]:h-3.5",
     // 14px (0.875rem) - smaller icon for small buttons
-    md: "size-4",
+    md: "[&_svg]:w-4 [&_svg]:h-4",
     // 16px (1rem) - medium icon for medium buttons
-    lg: "size-5",
+    lg: "[&_svg]:w-5 [&_svg]:h-5",
     // 20px (1.25rem) - larger icon for large buttons
-    icon: "size-4"
+    icon: "[&_svg]:w-4 [&_svg]:h-4"
     // 16px (1rem) - medium icon for icon-only buttons
   },
   /**