@sudobility/components-rn 1.0.42 → 1.0.44

package/src/ui/CodeDisplay/CodeDisplay.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, designTokens } from '@sudobility/design';
 
 export interface CodeDisplayProps {
   /** Code or text to display */
@@ -40,6 +41,36 @@ export interface CodeDisplayProps {
  * </CodeDisplay>
  * ```
  */
+
+// Lazily derive display colors from DS to avoid ESM issues in tests.
+let _displayColors: ReturnType<typeof buildDisplayColors> | null = null;
+function getDisplayColors() {
+  if (!_displayColors) _displayColors = buildDisplayColors();
+  return _displayColors;
+}
+function buildDisplayColors() {
+  const alert = colors.component.alert;
+  function splitClasses(base: string, dark: string) {
+    const all = `${base} ${dark}`.split(' ');
+    return {
+      text: all.filter(c => c.includes('text-')).join(' '),
+      bg: all.filter(c => c.includes('bg-')).join(' '),
+    };
+  }
+  const info = splitClasses(alert.info.base, alert.info.dark);
+  const success = splitClasses(alert.success.base, alert.success.dark);
+  const warning = splitClasses(alert.warning.base, alert.warning.dark);
+  return {
+    primary: `${info.text} ${info.bg}`,
+    // secondary uses purple — no DS mapping, keep local
+    secondary:
+      'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/30',
+    success: `${success.text} ${success.bg}`,
+    warning: `${warning.text} ${warning.bg}`,
+    neutral: 'text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800',
+  } as Record<string, string>;
+}
+
 export const CodeDisplay: React.FC<CodeDisplayProps> = ({
   children,
   variant = 'primary',
@@ -49,34 +80,25 @@ export const CodeDisplay: React.FC<CodeDisplayProps> = ({
   wrap = false,
   className,
 }) => {
-  // Color variant configurations
-  const variantClasses = {
-    primary: 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30',
-    secondary:
-      'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/30',
-    success:
-      'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/30',
-    warning:
-      'text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/30',
-    neutral: 'text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800',
-  };
+  // Color variant configurations from DS
+  const variantClasses = getDisplayColors();
 
-  // Size configurations
+  // Size configurations using DS typography tokens
   const sizeClasses = {
     xs: {
-      text: 'text-xs',
+      text: designTokens.typography.size.xs,
       padding: inline ? 'px-1.5 py-0.5' : 'px-2 py-1',
     },
     sm: {
-      text: 'text-sm',
+      text: designTokens.typography.size.sm,
       padding: inline ? 'px-2 py-0.5' : 'px-3 py-1.5',
     },
     md: {
-      text: 'text-base',
+      text: designTokens.typography.size.base,
       padding: inline ? 'px-2.5 py-1' : 'px-4 py-2',
     },
     lg: {
-      text: 'text-lg',
+      text: designTokens.typography.size.lg,
       padding: inline ? 'px-3 py-1' : 'px-4 py-2',
     },
   };
@@ -90,14 +112,18 @@ export const CodeDisplay: React.FC<CodeDisplayProps> = ({
 
   const sizeConfig = sizeClasses[size];
 
-  // Extract background and text color classes
-  const [textColorClass, bgClass] = variantClasses[variant].split(' ');
+  // Extract background and text color classes from combined variant string
+  const variantParts = variantClasses[variant].split(' ');
+  const textColorClass = variantParts
+    .filter(c => c.includes('text-'))
+    .join(' ');
+  const bgClass = variantParts.filter(c => c.includes('bg-')).join(' ');
 
   if (inline) {
     return (
       <Text
         className={cn(
-          'font-mono rounded-lg',
+          `${designTokens.typography.family.mono} rounded-lg`,
           textColorClass,
           bgClass,
           sizeConfig.text,
@@ -113,7 +139,7 @@ export const CodeDisplay: React.FC<CodeDisplayProps> = ({
   const content = (
     <Text
       className={cn(
-        'font-mono',
+        designTokens.typography.family.mono,
         textColorClass,
         sizeConfig.text,
         !inline && alignClasses[align],

package/src/ui/CollapsibleSection/CollapsibleSection.tsx

@@ -10,6 +10,9 @@ import {
   UIManager,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 // Enable LayoutAnimation on Android
 if (
@@ -126,7 +129,8 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
         >
           <Text
             className={cn(
-              'text-base font-medium',
+              typography.size.base,
+              typography.weight.medium,
               isSelected && !selectedSubsection
                 ? 'text-blue-700 dark:text-blue-300'
                 : 'text-gray-700 dark:text-gray-300'
@@ -145,7 +149,7 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
             accessibilityLabel={isExpanded ? 'Collapse' : 'Expand'}
           >
             <Animated.View style={{ transform: [{ rotate: rotation }] }}>
-              <Text className='text-gray-500 text-lg'>›</Text>
+              <Text className={cn('text-gray-500', typography.size.lg)}>›</Text>
             </Animated.View>
           </Pressable>
         )}
@@ -172,7 +176,7 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
               >
                 <Text
                   className={cn(
-                    'text-sm',
+                    typography.size.sm,
                     selectedSubsection === subsection.id
                       ? 'text-blue-700 dark:text-blue-300'
                       : 'text-gray-600 dark:text-gray-400'

package/src/ui/Combobox/Combobox.tsx

@@ -10,6 +10,7 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface ComboboxOption {
   /** Option value */
@@ -143,7 +144,7 @@ export const Combobox: React.FC<ComboboxProps> = ({
                     value={searchQuery}
                     onChangeText={setSearchQuery}
                     placeholder={searchPlaceholder}
-                    placeholderTextColor='#9ca3af'
+                    placeholderTextColor={colors.raw.neutral[400]}
                     autoFocus
                     className='px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white rounded-md'
                   />

package/src/ui/Command/Command.tsx

@@ -11,6 +11,7 @@ import {
   Platform,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface CommandItem {
   /** Item ID */
@@ -159,7 +160,7 @@ export const Command: React.FC<CommandProps> = ({
                   value={searchQuery}
                   onChangeText={setSearchQuery}
                   placeholder={placeholder}
-                  placeholderTextColor='#9ca3af'
+                  placeholderTextColor={colors.raw.neutral[400]}
                   className='flex-1 text-gray-900 dark:text-white text-base'
                   autoCapitalize='none'
                   autoCorrect={false}

package/src/ui/DashboardStatCard/DashboardStatCard.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens, getCardVariantColors } from '@sudobility/design';
 
 export interface DashboardStatCardProps {
   /** Stat title */
@@ -36,6 +37,22 @@ export interface DashboardStatCardProps {
  * />
  * ```
  */
+
+// Lazily derive card variant colors from DS to avoid ESM issues in tests.
+let _cardColors: Record<string, string> | null = null;
+function getDashboardCardColors() {
+  if (!_cardColors) {
+    _cardColors = {
+      default: getCardVariantColors('default'),
+      primary: getCardVariantColors('info'),
+      success: getCardVariantColors('success'),
+      warning: getCardVariantColors('warning'),
+      danger: getCardVariantColors('error'),
+    };
+  }
+  return _cardColors;
+}
+
 export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
   title,
   value,
@@ -45,13 +62,7 @@ export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
   variant = 'default',
   className,
 }) => {
-  const variantClasses = {
-    default: 'bg-white dark:bg-gray-900',
-    primary: 'bg-blue-50 dark:bg-blue-900/20',
-    success: 'bg-green-50 dark:bg-green-900/20',
-    warning: 'bg-yellow-50 dark:bg-yellow-900/20',
-    danger: 'bg-red-50 dark:bg-red-900/20',
-  };
+  const variantClasses = getDashboardCardColors();
 
   const isPositive = change !== undefined && change >= 0;
 
@@ -65,7 +76,9 @@ export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
     >
       {/* Header */}
       <View className='flex-row items-start justify-between mb-2'>
-        <Text className='text-sm font-medium text-gray-600 dark:text-gray-400'>
+        <Text
+          className={`${designTokens.typography.size.sm} ${designTokens.typography.weight.medium} text-gray-600 dark:text-gray-400`}
+        >
           {title}
         </Text>
         {icon && (
@@ -74,7 +87,9 @@ export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
       </View>
 
       {/* Value */}
-      <Text className='text-3xl font-bold text-gray-900 dark:text-white'>
+      <Text
+        className={`${designTokens.typography.size['3xl']} ${designTokens.typography.weight.bold} text-gray-900 dark:text-white`}
+      >
         {value}
       </Text>
 
@@ -83,7 +98,8 @@ export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
         <View className='flex-row items-center gap-1 mt-2'>
           <Text
             className={cn(
-              'text-sm font-medium',
+              designTokens.typography.size.sm,
+              designTokens.typography.weight.medium,
               isPositive
                 ? 'text-green-600 dark:text-green-400'
                 : 'text-red-600 dark:text-red-400'
@@ -91,7 +107,9 @@ export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
           >
             {isPositive ? '↑' : '↓'} {Math.abs(change)}%
           </Text>
-          <Text className='text-xs text-gray-500 dark:text-gray-400'>
+          <Text
+            className={`${designTokens.typography.size.xs} text-gray-500 dark:text-gray-400`}
+          >
             {changePeriod}
           </Text>
         </View>

package/src/ui/DataList/DataList.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, Pressable, FlatList } from 'react-native';
 import { cn } from '../../lib/utils';
+import { ui, designTokens } from '@sudobility/design';
 
 export interface DataListColumn<T> {
   /** Column key */
@@ -74,7 +75,13 @@ export function DataList<T extends Record<string, unknown>>({
     if (!showHeader) return null;
 
     return (
-      <View className='flex-row bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700'>
+      <View
+        className={cn(
+          'flex-row',
+          ui.table.thead,
+          'border-b border-gray-200 dark:border-gray-700'
+        )}
+      >
         {columns.map(column => (
           <View
             key={column.key}
@@ -84,7 +91,15 @@ export function DataList<T extends Record<string, unknown>>({
             )}
             style={{ flex: column.flex || 1 }}
           >
-            <Text className='text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider'>
+            <Text
+              className={cn(
+                designTokens.typography.size.xs,
+                designTokens.typography.weight.medium,
+                'text-gray-700 dark:text-gray-300',
+                designTokens.typography.transform.uppercase,
+                designTokens.typography.tracking.wider
+              )}
+            >
               {column.label}
             </Text>
           </View>
@@ -101,7 +116,7 @@ export function DataList<T extends Record<string, unknown>>({
         onPress={() => onRowPress?.(item, index)}
         className={cn(
           'flex-row border-b border-gray-200 dark:border-gray-700',
-          isOdd && 'bg-gray-50 dark:bg-gray-800/50',
+          isOdd && ui.table.trAlt,
           onRowPress && 'active:bg-gray-100 dark:active:bg-gray-800'
         )}
         disabled={!onRowPress}
@@ -121,7 +136,10 @@ export function DataList<T extends Record<string, unknown>>({
               column.render(item, index)
             ) : (
               <Text
-                className='text-sm text-gray-900 dark:text-white'
+                className={cn(
+                  designTokens.typography.size.sm,
+                  'text-gray-900 dark:text-white'
+                )}
                 numberOfLines={1}
               >
                 {String(item[column.key] ?? '')}
@@ -142,7 +160,7 @@ export function DataList<T extends Record<string, unknown>>({
   );
 
   return (
-    <View className={cn('bg-white dark:bg-gray-900', className)}>
+    <View className={cn(ui.table.tr, className)}>
       {renderHeader()}
       <FlatList
         data={data}

package/src/ui/Dropdown/Dropdown.tsx

@@ -8,6 +8,9 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 export interface DropdownItem {
   /** Unique identifier */
@@ -156,7 +159,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
                     {item.icon && <View className='w-5 h-5'>{item.icon}</View>}
                     <Text
                       className={cn(
-                        'text-sm',
+                        typography.size.sm,
                         item.disabled
                           ? 'text-gray-400 dark:text-gray-500'
                           : 'text-gray-700 dark:text-gray-200'

package/src/ui/ExternalLink/ExternalLink.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import { Text, Pressable, Linking } from 'react-native';
 import { cn } from '../../lib/utils';
+import { textVariants } from '@sudobility/design';
 
 export interface ExternalLinkProps {
   /** Link URL */
@@ -63,11 +64,11 @@ export const ExternalLink: React.FC<ExternalLinkProps> = ({
     lg: 'text-base',
   };
 
-  // Color variant configurations
+  // Color variant configurations using DS textVariants.link
   const variantClasses = {
-    default: 'text-blue-600 dark:text-blue-400',
-    primary: 'text-blue-700 dark:text-blue-300 font-semibold',
-    muted: 'text-gray-600 dark:text-gray-400',
+    default: textVariants.link.external(),
+    primary: `${textVariants.link.default()} font-semibold`,
+    muted: textVariants.link.muted(),
   };
 
   const handlePress = useCallback(async () => {

package/src/ui/FeatureCard/FeatureCard.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
 
 export type FeatureCardColor =
   | 'green'
@@ -69,57 +70,58 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
   borderColor = false,
   className,
 }) => {
-  // Color configurations
+  // Color configurations -- derived from colors.raw.* palette
+  // Each Tailwind class maps to a colors.raw hex value at the same shade
   const colorClasses: Record<FeatureCardColor, string> = {
-    blue: 'text-blue-600 dark:text-blue-400',
-    green: 'text-green-600 dark:text-green-400',
+    blue: 'text-blue-600 dark:text-blue-400', // colors.raw.blue[600] / [400]
+    green: 'text-green-600 dark:text-green-400', // colors.raw.green[600] / [400]
     purple: 'text-purple-600 dark:text-purple-400',
-    orange: 'text-orange-600 dark:text-orange-400',
+    orange: 'text-orange-600 dark:text-orange-400', // colors.raw.orange[600] / [400]
     pink: 'text-pink-600 dark:text-pink-400',
-    gray: 'text-gray-600 dark:text-gray-400',
-    red: 'text-red-600 dark:text-red-400',
+    gray: 'text-gray-600 dark:text-gray-400', // colors.raw.neutral[600] / [400]
+    red: 'text-red-600 dark:text-red-400', // colors.raw.red[600] / [400]
     indigo: 'text-indigo-600 dark:text-indigo-400',
     cyan: 'text-cyan-600 dark:text-cyan-400',
     emerald: 'text-emerald-600 dark:text-emerald-400',
   };
 
   const borderColorClasses: Record<FeatureCardColor, string> = {
-    green: 'border-l-4 border-l-green-500',
-    blue: 'border-l-4 border-l-blue-500',
-    purple: 'border-l-4 border-l-purple-500',
-    orange: 'border-l-4 border-l-orange-500',
-    red: 'border-l-4 border-l-red-500',
+    green: 'border-l-4 border-l-green-500', // colors.raw.green[500]
+    blue: 'border-l-4 border-l-blue-500', // colors.raw.blue[500]
+    purple: 'border-l-4 border-l-purple-500', // colors.raw.purple[500]
+    orange: 'border-l-4 border-l-orange-500', // colors.raw.orange[500]
+    red: 'border-l-4 border-l-red-500', // colors.raw.red[500]
     indigo: 'border-l-4 border-l-indigo-500',
     cyan: 'border-l-4 border-l-cyan-500',
     emerald: 'border-l-4 border-l-emerald-500',
     pink: 'border-l-4 border-l-pink-500',
-    gray: 'border-l-4 border-l-gray-500',
+    gray: 'border-l-4 border-l-gray-500', // colors.raw.neutral[500]
   };
 
   const iconBackgroundClasses: Record<FeatureCardColor, string> = {
-    green: 'bg-green-100 dark:bg-green-900/20',
-    blue: 'bg-blue-100 dark:bg-blue-900/20',
-    purple: 'bg-purple-100 dark:bg-purple-900/20',
-    orange: 'bg-orange-100 dark:bg-orange-900/20',
-    red: 'bg-red-100 dark:bg-red-900/20',
+    green: 'bg-green-100 dark:bg-green-900/20', // colors.raw.green[100] / [900]
+    blue: 'bg-blue-100 dark:bg-blue-900/20', // colors.raw.blue[100] / [900]
+    purple: 'bg-purple-100 dark:bg-purple-900/20', // colors.raw.purple[100] / [900]
+    orange: 'bg-orange-100 dark:bg-orange-900/20', // colors.raw.orange[100] / [900]
+    red: 'bg-red-100 dark:bg-red-900/20', // colors.raw.red[100] / [900]
     indigo: 'bg-indigo-100 dark:bg-indigo-900/20',
     cyan: 'bg-cyan-100 dark:bg-cyan-900/20',
     emerald: 'bg-emerald-100 dark:bg-emerald-900/20',
     pink: 'bg-pink-100 dark:bg-pink-900/20',
-    gray: 'bg-gray-100 dark:bg-gray-900/20',
+    gray: 'bg-gray-100 dark:bg-gray-900/20', // colors.raw.neutral[100] / [900]
   };
 
   const bulletColorClasses: Record<FeatureCardColor, string> = {
-    green: 'bg-green-500',
-    blue: 'bg-blue-500',
-    purple: 'bg-purple-500',
-    orange: 'bg-orange-500',
-    red: 'bg-red-500',
+    green: 'bg-green-500', // colors.raw.green[500]
+    blue: 'bg-blue-500', // colors.raw.blue[500]
+    purple: 'bg-purple-500', // colors.raw.purple[500]
+    orange: 'bg-orange-500', // colors.raw.orange[500]
+    red: 'bg-red-500', // colors.raw.red[500]
     indigo: 'bg-indigo-500',
     cyan: 'bg-cyan-500',
     emerald: 'bg-emerald-500',
     pink: 'bg-pink-500',
-    gray: 'bg-gray-500',
+    gray: 'bg-gray-500', // colors.raw.neutral[500]
   };
 
   const CardContent = () => (
@@ -139,12 +141,24 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
       )}
 
       {/* Title */}
-      <Text className='text-xl font-semibold text-gray-900 dark:text-white mb-3'>
+      <Text
+        className={cn(
+          designTokens.typography.size.xl,
+          designTokens.typography.weight.semibold,
+          'text-gray-900 dark:text-white mb-3'
+        )}
+      >
         {title}
       </Text>
 
       {/* Description */}
-      <Text className='text-gray-600 dark:text-gray-300 mb-4 leading-relaxed'>
+      <Text
+        className={cn(
+          designTokens.typography.size.base,
+          designTokens.typography.leading.relaxed,
+          'text-gray-600 dark:text-gray-300 mb-4'
+        )}
+      >
         {description}
       </Text>
 
@@ -162,7 +176,13 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
                   bulletColorClasses[color]
                 )}
               />
-              <Text className='flex-1 text-sm text-gray-600 dark:text-gray-400'>
+              <Text
+                className={cn(
+                  'flex-1',
+                  designTokens.typography.size.sm,
+                  'text-gray-600 dark:text-gray-400'
+                )}
+              >
                 {benefit}
               </Text>
             </View>
@@ -178,10 +198,21 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
               key={index}
               className='flex-1 min-w-[80px] items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg'
             >
-              <Text className={cn('text-lg font-bold', colorClasses[color])}>
+              <Text
+                className={cn(
+                  designTokens.typography.size.lg,
+                  designTokens.typography.weight.bold,
+                  colorClasses[color]
+                )}
+              >
                 {value}
               </Text>
-              <Text className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+              <Text
+                className={cn(
+                  designTokens.typography.size.xs,
+                  'text-gray-500 dark:text-gray-400 mt-1'
+                )}
+              >
                 {key}
               </Text>
             </View>

package/src/ui/FeatureGrid/FeatureGrid.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, getCardVariantColors } from '@sudobility/design';
 
 export interface Feature {
   /** Unique identifier */
@@ -72,13 +73,12 @@ export const FeatureGrid: React.FC<FeatureGridProps> = ({
     lg: 'w-20 h-20',
   };
 
+  // Badge variants using DS badge colors
   const badgeVariants = {
-    success:
-      'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300',
-    info: 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300',
-    warning:
-      'bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300',
-    default: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300',
+    success: `${colors.component.badge.success.base} ${colors.component.badge.success.dark}`,
+    info: `${colors.component.badge.primary.base} ${colors.component.badge.primary.dark}`,
+    warning: `${colors.component.badge.attention.base} ${colors.component.badge.attention.dark}`,
+    default: `${colors.component.badge.default.base} ${colors.component.badge.default.dark}`,
   };
 
   const renderFeature = (feature: Feature, index: number) => {
@@ -87,7 +87,7 @@ export const FeatureGrid: React.FC<FeatureGridProps> = ({
         className={cn(
           'items-center',
           cardVariant === 'card' &&
-            'bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg',
+            `${getCardVariantColors('elevated')} rounded-2xl p-6`,
           cardVariant === 'minimal' && 'gap-4'
         )}
       >

package/src/ui/GradientIconContainer/GradientIconContainer.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface GradientIconContainerProps {
   /** Icon element */
@@ -28,6 +29,36 @@ export interface GradientIconContainerProps {
  * </GradientIconContainer>
  * ```
  */
+
+// Lazily derive gradient icon colors from DS to avoid ESM issues in tests.
+let _gradientIconColors: Record<string, string> | null = null;
+function getGradientIconColors() {
+  if (!_gradientIconColors) {
+    const btn = colors.component.button;
+    // Extract the leading bg-* class from DS button base strings (solid colors)
+    function extractBg(base: string) {
+      return (
+        base
+          .split(' ')
+          .find(
+            c =>
+              c.startsWith('bg-') &&
+              !c.includes('hover:') &&
+              !c.includes('active:')
+          ) || ''
+      );
+    }
+    _gradientIconColors = {
+      blue: extractBg(btn.primary.base),
+      purple: 'bg-purple-600', // DS has no purple button; local fallback
+      green: extractBg(btn.success.base),
+      orange: 'bg-orange-600', // DS has no orange button; local fallback
+      gray: 'bg-gray-700 dark:bg-gray-600',
+    };
+  }
+  return _gradientIconColors;
+}
+
 export const GradientIconContainer: React.FC<GradientIconContainerProps> = ({
   children,
   size = 'md',
@@ -50,14 +81,8 @@ export const GradientIconContainer: React.FC<GradientIconContainerProps> = ({
     circle: 'rounded-full',
   };
 
-  // Color variants (solid colors approximating gradients)
-  const variantClasses = {
-    blue: 'bg-blue-600',
-    purple: 'bg-purple-600',
-    green: 'bg-green-600',
-    orange: 'bg-orange-600',
-    gray: 'bg-gray-700 dark:bg-gray-600',
-  };
+  // Color variants from DS (solid colors approximating gradients)
+  const variantClasses = getGradientIconColors();
 
   const config = sizeConfig[size];