@sudobility/components-rn 1.0.42 → 1.0.44

package/dist/index.cjs.js

@@ -1779,7 +1779,7 @@ const sizeMap = {
 };
 const colorMap = {
   default: design.colors.raw.blue[600],
-  white: "#ffffff",
+  white: design.colors.raw.neutral[0],
   success: design.colors.raw.green[600],
   warning: design.colors.raw.orange[600],
   error: design.colors.raw.red[600]
@@ -2477,7 +2477,7 @@ const TextArea = ({
           readOnly && "bg-gray-50 dark:bg-gray-900",
           inputClassName
         ),
-        placeholderTextColor: "#9CA3AF",
+        placeholderTextColor: design.colors.raw.neutral[400],
         accessibilityRole: "text",
         accessibilityState: { disabled },
         ...textInputProps
@@ -2499,6 +2499,28 @@ const TextArea = ({
     ) })
   ] });
 };
+let _checkboxColors = null;
+function getCheckboxColors() {
+  if (!_checkboxColors) _checkboxColors = buildCheckboxColors();
+  return _checkboxColors;
+}
+function buildCheckboxColors() {
+  function extractCheckedColor(base) {
+    const parts = base.split(" ");
+    const bg = parts.find(
+      (c) => c.startsWith("bg-") && !c.includes("hover:") && !c.includes("active:")
+    ) || "";
+    return `${bg} ${bg.replace("bg-", "border-")}`;
+  }
+  const btn = design.colors.component.button;
+  return {
+    primary: extractCheckedColor(btn.primary.base),
+    success: extractCheckedColor(btn.success.base),
+    warning: "bg-yellow-600 border-yellow-600",
+    // DS has no yellow button; local fallback
+    error: extractCheckedColor(btn.destructive.base)
+  };
+}
 const Checkbox = ({
   checked: controlledChecked,
   defaultChecked = false,
@@ -2522,31 +2544,33 @@ const Checkbox = ({
     sm: {
       box: "w-4 h-4",
       check: "w-2 h-2",
-      text: "text-sm",
-      desc: "text-xs"
+      text: design.designTokens.typography.size.sm,
+      desc: design.designTokens.typography.size.xs
     },
     md: {
       box: "w-5 h-5",
       check: "w-3 h-3",
-      text: "text-base",
-      desc: "text-sm"
+      text: design.designTokens.typography.size.base,
+      desc: design.designTokens.typography.size.sm
     },
     lg: {
       box: "w-6 h-6",
       check: "w-4 h-4",
-      text: "text-lg",
-      desc: "text-base"
+      text: design.designTokens.typography.size.lg,
+      desc: design.designTokens.typography.size.base
     }
   };
   const getVariantClasses = () => {
+    const checkedColors = getCheckboxColors();
     if (error) {
-      return checked ? "bg-red-600 border-red-600" : "border-red-600 dark:border-red-500";
+      return checked ? checkedColors.error : "border-red-600 dark:border-red-500";
     }
+    const unchecked = "border-gray-300 dark:border-gray-600";
     const variantClasses = {
-      primary: checked ? "bg-blue-600 border-blue-600" : "border-gray-300 dark:border-gray-600",
-      success: checked ? "bg-green-600 border-green-600" : "border-gray-300 dark:border-gray-600",
-      warning: checked ? "bg-yellow-600 border-yellow-600" : "border-gray-300 dark:border-gray-600",
-      error: checked ? "bg-red-600 border-red-600" : "border-gray-300 dark:border-gray-600"
+      primary: checked ? checkedColors.primary : unchecked,
+      success: checked ? checkedColors.success : unchecked,
+      warning: checked ? checkedColors.warning : unchecked,
+      error: checked ? checkedColors.error : unchecked
     };
     return variantClasses[variant];
   };
@@ -2615,7 +2639,13 @@ const Checkbox = ({
         ]
       }
     ),
-    errorMessage && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: errorMessage })
+    errorMessage && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      reactNative.Text,
+      {
+        className: `mt-1 ${design.designTokens.typography.size.sm} text-red-600 dark:text-red-400`,
+        children: errorMessage
+      }
+    )
   ] });
 };
 const Switch = React__namespace.forwardRef(
@@ -2711,8 +2741,8 @@ const HelperText = ({
   ...textProps
 }) => {
   const sizeClasses = {
-    sm: "text-sm",
-    base: "text-base"
+    sm: design.designTokens.typography.size.sm,
+    base: design.designTokens.typography.size.base
   };
   const iconSize = {
     sm: "w-4 h-4",
@@ -2720,19 +2750,19 @@ const HelperText = ({
   };
   const variantConfig2 = {
     default: {
-      text: "text-gray-600 dark:text-gray-400",
+      text: design.colors.component.alert.info.icon,
       icon: "ℹ"
     },
     error: {
-      text: "text-red-600 dark:text-red-400",
+      text: design.colors.component.alert.error.icon,
       icon: "⚠"
     },
     success: {
-      text: "text-green-600 dark:text-green-400",
+      text: design.colors.component.alert.success.icon,
       icon: "✓"
     },
     warning: {
-      text: "text-yellow-600 dark:text-yellow-400",
+      text: design.colors.component.alert.warning.icon,
       icon: "⚠"
     }
   };
@@ -2742,6 +2772,7 @@ const HelperText = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(sizeClasses[size], config.text), ...textProps, children })
   ] });
 };
+const { typography: typography$h } = design.designTokens;
 const Select = ({
   value,
   onValueChange,
@@ -2780,8 +2811,8 @@ const Select = ({
           reactNative.Text,
           {
             className: cn(
-              "text-base",
-              item.value === value ? "text-blue-600 dark:text-blue-400 font-medium" : "text-gray-900 dark:text-gray-100"
+              typography$h.size.base,
+              item.value === value ? `text-blue-600 dark:text-blue-400 ${typography$h.weight.medium}` : "text-gray-900 dark:text-gray-100"
             ),
             children: item.label
           }
@@ -2810,7 +2841,8 @@ const Select = ({
             reactNative.Text,
             {
               className: cn(
-                "text-base flex-1",
+                typography$h.size.base,
+                "flex-1",
                 selectedOption ? "text-gray-900 dark:text-gray-100" : "text-gray-400 dark:text-gray-500"
               ),
               numberOfLines: 1,
@@ -2830,8 +2862,27 @@ const Select = ({
         onRequestClose: () => setIsOpen(false),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-1 justify-end bg-black/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.SafeAreaView, { className: "bg-white dark:bg-gray-800 rounded-t-xl", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Pressable, { onPress: () => setIsOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-blue-600 dark:text-blue-400 text-base", children: "Cancel" }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-base font-semibold text-gray-900 dark:text-white", children: title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Pressable, { onPress: () => setIsOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              reactNative.Text,
+              {
+                className: cn(
+                  "text-blue-600 dark:text-blue-400",
+                  typography$h.size.base
+                ),
+                children: "Cancel"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              reactNative.Text,
+              {
+                className: cn(
+                  typography$h.size.base,
+                  typography$h.weight.semibold,
+                  "text-gray-900 dark:text-white"
+                ),
+                children: title
+              }
+            ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { style: { width: 60 } })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2967,11 +3018,11 @@ const styles$4 = reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-between",
     borderWidth: 1,
-    borderColor: "#d1d5db",
+    borderColor: design.colors.raw.neutral[300],
     borderRadius: 8,
     paddingHorizontal: 12,
     paddingVertical: 12,
-    backgroundColor: "#ffffff"
+    backgroundColor: design.colors.raw.neutral[0]
   },
   triggerDisabled: {
     opacity: 0.5
@@ -2979,19 +3030,19 @@ const styles$4 = reactNative.StyleSheet.create({
   triggerText: {
     flex: 1,
     fontSize: 16,
-    color: "#1a1a1a"
+    color: design.colors.raw.neutral[900]
   },
   triggerPlaceholder: {
-    color: "#9ca3af"
+    color: design.colors.raw.neutral[400]
   },
   triggerArrow: {
     fontSize: 10,
-    color: "#9ca3af",
+    color: design.colors.raw.neutral[400],
     marginLeft: 8
   },
   modalContainer: {
     flex: 1,
-    backgroundColor: "#ffffff"
+    backgroundColor: design.colors.raw.neutral[0]
   },
   modalHeader: {
     flexDirection: "row",
@@ -3000,12 +3051,12 @@ const styles$4 = reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 12,
     borderBottomWidth: 1,
-    borderBottomColor: "#e9ecef"
+    borderBottomColor: design.colors.raw.neutral[200]
   },
   modalTitle: {
     fontSize: 18,
     fontWeight: "600",
-    color: "#1a1a1a"
+    color: design.colors.raw.neutral[900]
   },
   closeButton: {
     padding: 8
@@ -3013,7 +3064,7 @@ const styles$4 = reactNative.StyleSheet.create({
   closeButtonText: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#3b82f6"
+    color: design.colors.raw.blue[500]
   },
   listContent: {
     padding: 16
@@ -3022,27 +3073,27 @@ const styles$4 = reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     padding: 16,
-    backgroundColor: "#f8f9fa",
+    backgroundColor: design.colors.raw.neutral[50],
     borderRadius: 12
   },
   optionItemSelected: {
-    backgroundColor: "#e0f2fe"
+    backgroundColor: design.colors.raw.blue[100]
   },
   optionLabel: {
     flex: 1,
     fontSize: 16,
-    color: "#1a1a1a"
+    color: design.colors.raw.neutral[900]
   },
   optionLabelSelected: {
     fontWeight: "600",
-    color: "#3b82f6"
+    color: design.colors.raw.blue[500]
   },
   optionDisabled: {
     opacity: 0.5
   },
   checkmark: {
     fontSize: 18,
-    color: "#3b82f6",
+    color: design.colors.raw.blue[500],
     fontWeight: "bold"
   },
   separator: {
@@ -3128,7 +3179,7 @@ const SearchInput = ({
           disabled && "opacity-50",
           loading && "opacity-60"
         ),
-        placeholderTextColor: "#9CA3AF",
+        placeholderTextColor: design.colors.raw.neutral[400],
         accessibilityRole: "search",
         accessibilityState: { disabled },
         ...textInputProps
@@ -3145,7 +3196,7 @@ const SearchInput = ({
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(sizeConfig2.icon, "text-gray-400"), children: "✕" })
       }
     ),
-    loading && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "absolute inset-y-0 right-0 flex items-center justify-center pr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: "small", color: "#9CA3AF" }) })
+    loading && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "absolute inset-y-0 right-0 flex items-center justify-center pr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: "small", color: design.colors.raw.neutral[400] }) })
   ] });
 };
 const NumberInput = ({
@@ -3349,7 +3400,7 @@ const NumberInput = ({
     }
   );
 };
-const { typography: typography$2 } = design.designTokens;
+const { typography: typography$g } = design.designTokens;
 const colorClasses$1 = {
   default: "text-gray-900 dark:text-gray-100",
   muted: "text-gray-600 dark:text-gray-400",
@@ -3372,11 +3423,11 @@ const Text = ({
     reactNative.Text,
     {
       className: cn(
-        typography$2.size[size],
-        typography$2.weight[weight],
+        typography$g.size[size],
+        typography$g.weight[weight],
         colorClasses$1[color],
-        align ? typography$2.align[align] : "",
-        transform !== "none" ? typography$2.transform[transform] : "",
+        align ? typography$g.align[align] : "",
+        transform !== "none" ? typography$g.transform[transform] : "",
         className
       ),
       numberOfLines,
@@ -3384,7 +3435,7 @@ const Text = ({
     }
   );
 };
-const { typography: typography$1 } = design.designTokens;
+const { typography: typography$f } = design.designTokens;
 const colorClasses = {
   default: "text-gray-900 dark:text-gray-100",
   muted: "text-gray-700 dark:text-gray-300",
@@ -3412,12 +3463,12 @@ const Heading = ({
     reactNative.Text,
     {
       className: cn(
-        typography$1.size[actualSize],
-        typography$1.weight[weight],
-        typography$1.leading.heading,
-        typography$1.tracking.heading,
+        typography$f.size[actualSize],
+        typography$f.weight[weight],
+        typography$f.leading.heading,
+        typography$f.tracking.heading,
         colorClasses[color],
-        align ? typography$1.align[align] : "",
+        align ? typography$f.align[align] : "",
         className
       ),
       accessibilityRole: "header",
@@ -3425,6 +3476,41 @@ const Heading = ({
     }
   );
 };
+let _codeColors = null;
+function getCodeColors() {
+  if (!_codeColors) _codeColors = buildCodeColors();
+  return _codeColors;
+}
+function buildCodeColors() {
+  const alert2 = design.colors.component.alert;
+  function splitClasses(base, dark) {
+    const all = `${base} ${dark}`.split(" ");
+    return {
+      bg: all.filter((c) => c.includes("bg-")).join(" "),
+      text: all.filter((c) => c.includes("text-")).join(" ")
+    };
+  }
+  const info = splitClasses(alert2.info.base, alert2.info.dark);
+  const success = splitClasses(alert2.success.base, alert2.success.dark);
+  const warning = splitClasses(alert2.warning.base, alert2.warning.dark);
+  const error = splitClasses(alert2.error.base, alert2.error.dark);
+  return {
+    bg: {
+      default: "bg-gray-100 dark:bg-gray-800",
+      primary: info.bg,
+      success: success.bg,
+      warning: warning.bg,
+      danger: error.bg
+    },
+    text: {
+      default: "text-gray-900 dark:text-gray-100",
+      primary: info.text,
+      success: success.text,
+      warning: warning.text,
+      danger: error.text
+    }
+  };
+}
 const Code = ({
   children,
   size = "md",
@@ -3432,24 +3518,13 @@ const Code = ({
   className
 }) => {
   const sizeClasses = {
-    sm: "text-xs px-1 py-0.5",
-    md: "text-sm px-1.5 py-0.5",
-    lg: "text-base px-2 py-1"
-  };
-  const variantBgClasses = {
-    default: "bg-gray-100 dark:bg-gray-800",
-    primary: "bg-blue-50 dark:bg-blue-900/30",
-    success: "bg-green-50 dark:bg-green-900/30",
-    warning: "bg-yellow-50 dark:bg-yellow-900/30",
-    danger: "bg-red-50 dark:bg-red-900/30"
-  };
-  const variantTextClasses = {
-    default: "text-gray-900 dark:text-gray-100",
-    primary: "text-blue-700 dark:text-blue-300",
-    success: "text-green-700 dark:text-green-300",
-    warning: "text-yellow-700 dark:text-yellow-300",
-    danger: "text-red-700 dark:text-red-300"
+    sm: `${design.designTokens.typography.size.xs} px-1 py-0.5`,
+    md: `${design.designTokens.typography.size.sm} px-1.5 py-0.5`,
+    lg: `${design.designTokens.typography.size.base} px-2 py-1`
   };
+  const codeColors = getCodeColors();
+  const variantBgClasses = codeColors.bg;
+  const variantTextClasses = codeColors.text;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     reactNative.View,
     {
@@ -3462,7 +3537,11 @@ const Code = ({
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         reactNative.Text,
         {
-          className: cn("font-mono font-medium", variantTextClasses[variant]),
+          className: cn(
+            design.designTokens.typography.family.mono,
+            design.designTokens.typography.weight.medium,
+            variantTextClasses[variant]
+          ),
           style: { fontFamily: "monospace" },
           children
         }
@@ -3521,7 +3600,7 @@ const AppVersion = ({
     }
   );
 };
-function splitBadgeClasses(base, dark) {
+function splitBadgeClasses$1(base, dark) {
   const all = `${base} ${dark}`.split(" ");
   return {
     bg: all.filter((c) => c.includes("bg-")).join(" "),
@@ -3536,11 +3615,11 @@ function getBadgeColors() {
 function buildBadgeColors() {
   const badge = design.colors.component.badge;
   return {
-    default: splitBadgeClasses(badge.default.base, badge.default.dark),
-    primary: splitBadgeClasses(badge.primary.base, badge.primary.dark),
-    success: splitBadgeClasses(badge.success.base, badge.success.dark),
-    warning: splitBadgeClasses(badge.warning.base, badge.warning.dark),
-    error: splitBadgeClasses(badge.error.base, badge.error.dark)
+    default: splitBadgeClasses$1(badge.default.base, badge.default.dark),
+    primary: splitBadgeClasses$1(badge.primary.base, badge.primary.dark),
+    success: splitBadgeClasses$1(badge.success.base, badge.success.dark),
+    warning: splitBadgeClasses$1(badge.warning.base, badge.warning.dark),
+    error: splitBadgeClasses$1(badge.error.base, badge.error.dark)
   };
 }
 const Badge = ({
@@ -3698,10 +3777,14 @@ const Avatar = ({
     xl: "w-4 h-4"
   };
   const statusClasses = {
-    online: "bg-green-500",
-    offline: "bg-gray-400",
+    online: design.statusIndicatorColors.success,
+    // bg-green-500
+    offline: design.statusIndicatorColors.neutral,
+    // bg-gray-500
     away: "bg-yellow-500",
-    busy: "bg-red-500"
+    // local fallback, no DS yellow status
+    busy: design.statusIndicatorColors.error
+    // bg-red-500
   };
   const generateInitials = (name2) => {
     const parts = name2.trim().split(/\s+/);
@@ -4034,10 +4117,10 @@ const IconText = ({
   };
   const variantClasses = {
     default: "text-gray-700 dark:text-gray-300",
-    primary: "text-blue-600 dark:text-blue-400",
-    success: "text-green-600 dark:text-green-400",
-    warning: "text-yellow-600 dark:text-yellow-400",
-    danger: "text-red-600 dark:text-red-400",
+    primary: design.colors.component.alert.info.icon,
+    success: design.colors.component.alert.success.icon,
+    warning: design.colors.component.alert.warning.icon,
+    danger: design.colors.component.alert.error.icon,
     muted: "text-gray-500 dark:text-gray-400"
   };
   const layoutClasses = {
@@ -4181,6 +4264,35 @@ const InfoBox = ({
     }
   );
 };
+let _progressColors = null;
+function getProgressColors() {
+  if (!_progressColors) _progressColors = buildProgressColors();
+  return _progressColors;
+}
+function buildProgressColors() {
+  function extractBg(base, darkStr) {
+    const bg = base.split(" ").find(
+      (c) => c.startsWith("bg-") && !c.includes("hover:") && !c.includes("active:")
+    ) || "";
+    const darkBg = darkStr.split(" ").find(
+      (c) => c.startsWith("dark:bg-") && !c.includes("hover:") && !c.includes("active:")
+    ) || "";
+    return `${bg} ${darkBg}`;
+  }
+  const btn = design.colors.component.button;
+  return {
+    default: extractBg(btn.primary.base, btn.primary.dark),
+    primary: extractBg(btn.primary.base, btn.primary.dark),
+    success: extractBg(btn.success.base, btn.success.dark),
+    warning: "bg-yellow-600 dark:bg-yellow-500",
+    // DS has no yellow button; local fallback
+    danger: extractBg(btn.destructive.base, btn.destructive.dark),
+    purple: "bg-purple-600 dark:bg-purple-500",
+    // DS has no purple button; local fallback
+    gray: "bg-gray-600 dark:bg-gray-500"
+    // local fallback
+  };
+}
 const Progress = ({
   value = 0,
   max = 100,
@@ -4211,11 +4323,12 @@ const Progress = ({
     }
   }, [indeterminate, animatedValue]);
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  const allColors = getProgressColors();
   const colorClasses2 = {
-    default: "bg-blue-600 dark:bg-blue-500",
-    success: "bg-green-600 dark:bg-green-500",
-    warning: "bg-yellow-600 dark:bg-yellow-500",
-    danger: "bg-red-600 dark:bg-red-500"
+    default: allColors.default,
+    success: allColors.success,
+    warning: allColors.warning,
+    danger: allColors.danger
   };
   const sizeClasses = {
     sm: "h-1",
@@ -4255,7 +4368,13 @@ const Progress = ({
         )
       }
     ),
-    (showLabel || label) && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xs text-gray-600 dark:text-gray-400 text-right", children: label || `${Math.round(percentage)}%` }) })
+    (showLabel || label) && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      reactNative.Text,
+      {
+        className: `${design.designTokens.typography.size.xs} text-gray-600 dark:text-gray-400 text-right`,
+        children: label || `${Math.round(percentage)}%`
+      }
+    ) })
   ] });
 };
 const ProgressBar = ({
@@ -4271,13 +4390,14 @@ const ProgressBar = ({
 }) => {
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
   const displayLabel = label || `${Math.round(percentage)}%`;
+  const progressColors = getProgressColors();
   const variantClasses = {
-    primary: "bg-blue-600 dark:bg-blue-500",
-    success: "bg-green-600 dark:bg-green-500",
-    warning: "bg-yellow-600 dark:bg-yellow-500",
-    danger: "bg-red-600 dark:bg-red-500",
-    purple: "bg-purple-600 dark:bg-purple-500",
-    gray: "bg-gray-600 dark:bg-gray-500"
+    primary: progressColors.primary,
+    success: progressColors.success,
+    warning: progressColors.warning,
+    danger: progressColors.danger,
+    purple: progressColors.purple,
+    gray: progressColors.gray
   };
   const sizeClasses = {
     sm: "h-1",
@@ -4307,9 +4427,16 @@ const ProgressBar = ({
         )
       }
     ),
-    showLabel && labelPosition === "outside" && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm font-medium text-gray-600 dark:text-gray-400", children: displayLabel })
+    showLabel && labelPosition === "outside" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      reactNative.Text,
+      {
+        className: `${design.designTokens.typography.size.sm} ${design.designTokens.typography.weight.medium} text-gray-600 dark:text-gray-400`,
+        children: displayLabel
+      }
+    )
   ] }) });
 };
+const { typography: typography$e } = design.designTokens;
 const Modal = ({
   isOpen,
   onClose,
@@ -4360,7 +4487,17 @@ const Modal = ({
                   ),
                   children: [
                     (title || showCloseButton) && /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700", children: [
-                      title && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-lg font-semibold text-gray-900 dark:text-white flex-1", children: title }),
+                      title && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        reactNative.Text,
+                        {
+                          className: cn(
+                            typography$e.size.lg,
+                            typography$e.weight.semibold,
+                            "text-gray-900 dark:text-white flex-1"
+                          ),
+                          children: title
+                        }
+                      ),
                       showCloseButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
                         reactNative.Pressable,
                         {
@@ -4368,7 +4505,16 @@ const Modal = ({
                           className: "p-1 -mr-1 rounded-full",
                           accessibilityRole: "button",
                           accessibilityLabel: "Close modal",
-                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xl text-gray-500 dark:text-gray-400", children: "✕" })
+                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            reactNative.Text,
+                            {
+                              className: cn(
+                                typography$e.size.xl,
+                                "text-gray-500 dark:text-gray-400"
+                              ),
+                              children: "✕"
+                            }
+                          )
                         }
                       )
                     ] }),
@@ -4713,6 +4859,7 @@ const Backdrop = ({
     }
   );
 };
+const { typography: typography$d } = design.designTokens;
 const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH$1 } = reactNative.Dimensions.get("window");
 const Sheet = ({
   isOpen,
@@ -4903,8 +5050,28 @@ const Sheet = ({
                   ),
                   (title || description || showCloseButton) && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "px-4 py-4 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex flex-row items-start justify-between", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-1", children: [
-                      title && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
-                      description && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "mt-1 text-sm text-gray-600 dark:text-gray-400", children: description })
+                      title && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        reactNative.Text,
+                        {
+                          className: cn(
+                            typography$d.size.lg,
+                            typography$d.weight.semibold,
+                            "text-gray-900 dark:text-white"
+                          ),
+                          children: title
+                        }
+                      ),
+                      description && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        reactNative.Text,
+                        {
+                          className: cn(
+                            "mt-1",
+                            typography$d.size.sm,
+                            "text-gray-600 dark:text-gray-400"
+                          ),
+                          children: description
+                        }
+                      )
                     ] }),
                     showCloseButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
                       reactNative.Pressable,
@@ -4913,7 +5080,7 @@ const Sheet = ({
                         className: "ml-4 p-1",
                         accessibilityRole: "button",
                         accessibilityLabel: "Close sheet",
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xl text-gray-400", children: "✕" })
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(typography$d.size.xl, "text-gray-400"), children: "✕" })
                       }
                     )
                   ] }) }),
@@ -4928,6 +5095,30 @@ const Sheet = ({
     }
   );
 };
+let _tooltipColors = null;
+function getTooltipColors() {
+  if (!_tooltipColors) {
+    let extractBg = function(base, darkStr) {
+      const bg = base.split(" ").find(
+        (c) => c.startsWith("bg-") && !c.includes("hover:") && !c.includes("active:")
+      ) || "";
+      const darkBg = darkStr.split(" ").find(
+        (c) => c.startsWith("dark:bg-") && !c.includes("hover:") && !c.includes("active:")
+      ) || "";
+      return `${bg} ${darkBg}`;
+    };
+    const btn = design.colors.component.button;
+    _tooltipColors = {
+      default: "bg-gray-900 dark:bg-gray-700",
+      info: extractBg(btn.primary.base, btn.primary.dark),
+      success: extractBg(btn.success.base, btn.success.dark),
+      warning: "bg-yellow-600 dark:bg-yellow-500",
+      // DS has no yellow button; local fallback
+      error: extractBg(btn.destructive.base, btn.destructive.dark)
+    };
+  }
+  return _tooltipColors;
+}
 const Tooltip = ({
   content,
   children,
@@ -4980,13 +5171,7 @@ const Tooltip = ({
     }
     setIsVisible(false);
   };
-  const variantClasses = {
-    default: "bg-gray-900 dark:bg-gray-700",
-    info: "bg-blue-600 dark:bg-blue-500",
-    success: "bg-green-600 dark:bg-green-500",
-    warning: "bg-yellow-600 dark:bg-yellow-500",
-    error: "bg-red-600 dark:bg-red-500"
-  };
+  const variantClasses = getTooltipColors();
   const getTooltipPosition = () => {
     const TOOLTIP_OFFSET = 8;
     const TOOLTIP_HEIGHT = 32;
@@ -5052,7 +5237,13 @@ const Tooltip = ({
                   variantClasses[variant],
                   className
                 ),
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xs font-medium text-white", children: content })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  reactNative.Text,
+                  {
+                    className: `${design.designTokens.typography.size.xs} ${design.designTokens.typography.weight.medium} text-white`,
+                    children: content
+                  }
+                )
               }
             )
           }
@@ -5304,7 +5495,9 @@ const TabsList = ({
     horizontal: true,
     showsHorizontalScrollIndicator: false,
     className: cn(
-      "flex-row bg-gray-100 dark:bg-gray-800 rounded-lg p-1",
+      "flex-row bg-gray-100 dark:bg-gray-800",
+      design.designTokens.radius.lg,
+      "p-1",
       className
     ),
     contentContainerStyle: { flexGrow: 1 },
@@ -5337,7 +5530,9 @@ const TabsTrigger = ({
         reactNative.Text,
         {
           className: cn(
-            "text-sm font-medium text-center",
+            design.designTokens.typography.size.sm,
+            design.designTokens.typography.weight.medium,
+            "text-center",
             isSelected ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-400"
           ),
           children
@@ -5369,11 +5564,11 @@ const Link = ({
 }) => {
   const isExternal = href.startsWith("http://") || href.startsWith("https://");
   const variantClasses = {
-    default: "text-blue-600 dark:text-blue-400",
-    primary: "text-blue-600 dark:text-blue-400 font-medium",
-    secondary: "text-gray-600 dark:text-gray-400",
+    default: design.textVariants.link.subtle(),
+    primary: `${design.textVariants.link.default()} font-medium`,
+    secondary: design.textVariants.link.muted(),
     muted: "text-gray-500 dark:text-gray-500",
-    underline: "text-blue-600 dark:text-blue-400 underline"
+    underline: design.textVariants.link.default()
   };
   const handlePress = async () => {
     if (disabled) return;
@@ -5409,6 +5604,7 @@ const Link = ({
     }
   );
 };
+const { typography: typography$c } = design.designTokens;
 const Breadcrumb = ({
   items,
   separator = "/",
@@ -5418,9 +5614,9 @@ const Breadcrumb = ({
 }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const sizeClasses = {
-    sm: "text-sm",
-    md: "text-base",
-    lg: "text-lg"
+    sm: typography$c.size.sm,
+    md: typography$c.size.base,
+    lg: typography$c.size.lg
   };
   const getDisplayItems = () => {
     if (!maxItems || items.length <= maxItems || isExpanded) {
@@ -5441,7 +5637,7 @@ const Breadcrumb = ({
           {
             className: cn(
               sizeClasses[size],
-              "text-gray-900 dark:text-white font-medium"
+              `text-gray-900 dark:text-white ${typography$c.weight.medium}`
             ),
             accessibilityRole: "text",
             children: item.label
@@ -5479,7 +5675,7 @@ const Breadcrumb = ({
         {
           className: cn(
             sizeClasses[size],
-            isCurrent ? "text-gray-900 dark:text-white font-medium" : "text-gray-600 dark:text-gray-400"
+            isCurrent ? `text-gray-900 dark:text-white ${typography$c.weight.medium}` : "text-gray-600 dark:text-gray-400"
           ),
           children: item.label
         }
@@ -5527,6 +5723,7 @@ const Breadcrumb = ({
     }
   );
 };
+const { typography: typography$b } = design.designTokens;
 const Pagination = ({
   currentPage,
   totalPages,
@@ -5541,18 +5738,18 @@ const Pagination = ({
   const sizeConfig2 = {
     sm: {
       button: "h-8 w-8",
-      text: "text-xs",
-      icon: "text-xs"
+      text: typography$b.size.xs,
+      icon: typography$b.size.xs
     },
     md: {
       button: "h-10 w-10",
-      text: "text-sm",
-      icon: "text-sm"
+      text: typography$b.size.sm,
+      icon: typography$b.size.sm
     },
     lg: {
       button: "h-12 w-12",
-      text: "text-base",
-      icon: "text-base"
+      text: typography$b.size.base,
+      icon: typography$b.size.base
     }
   };
   const config = sizeConfig2[size];
@@ -5702,6 +5899,7 @@ const Pagination = ({
     }
   );
 };
+const { typography: typography$a } = design.designTokens;
 const SettingsList = ({
   settings,
   selectedSetting,
@@ -5734,7 +5932,7 @@ const SettingsList = ({
                 reactNative.Text,
                 {
                   className: cn(
-                    "text-sm",
+                    typography$a.size.sm,
                     isSelected ? "text-orange-700 dark:text-orange-300" : "text-gray-700 dark:text-gray-300"
                   ),
                   numberOfLines: 1,
@@ -5749,6 +5947,7 @@ const SettingsList = ({
     }
   );
 };
+const { typography: typography$9 } = design.designTokens;
 const NavigationList = ({
   items,
   selectedPath,
@@ -5790,15 +5989,34 @@ const NavigationList = ({
                 reactNative.Text,
                 {
                   className: cn(
-                    "font-medium",
+                    typography$9.weight.medium,
                     isSelected ? "text-blue-600 dark:text-blue-400" : "text-gray-700 dark:text-gray-300"
                   ),
                   children: item.label
                 }
               ),
-              item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "ml-2 px-2 py-0.5 bg-blue-100 dark:bg-blue-900 rounded-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xs font-medium text-blue-800 dark:text-blue-200", children: item.badge }) })
+              item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "ml-2 px-2 py-0.5 bg-blue-100 dark:bg-blue-900 rounded-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                reactNative.Text,
+                {
+                  className: cn(
+                    typography$9.size.xs,
+                    typography$9.weight.medium,
+                    "text-blue-800 dark:text-blue-200"
+                  ),
+                  children: item.badge
+                }
+              ) })
             ] }),
-            item.description && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: item.description })
+            item.description && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              reactNative.Text,
+              {
+                className: cn(
+                  typography$9.size.xs,
+                  "text-gray-500 dark:text-gray-400 mt-0.5"
+                ),
+                children: item.description
+              }
+            )
           ] })
         ]
       },
@@ -5806,6 +6024,7 @@ const NavigationList = ({
     );
   }) });
 };
+const { typography: typography$8 } = design.designTokens;
 const Dropdown = ({
   trigger,
   items,
@@ -5898,7 +6117,7 @@ const Dropdown = ({
                       reactNative.Text,
                       {
                         className: cn(
-                          "text-sm",
+                          typography$8.size.sm,
                           item.disabled ? "text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-200"
                         ),
                         children: item.label
@@ -5968,7 +6187,7 @@ const AspectFitView = ({
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: cn("flex-1", className), onLayout, children: size && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: cn("items-center", innerClassName), children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.ScrollView, { style: { width: innerWidth, height: innerHeight }, children }) }) });
 };
-const { typography } = design.designTokens;
+const { typography: typography$7 } = design.designTokens;
 const QuickActions = ({
   actions,
   orientation = "horizontal",
@@ -6032,7 +6251,7 @@ const QuickActions = ({
         accessibilityState: { disabled: action.disabled },
         children: [
           action.icon && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "w-5 h-5", children: action.icon }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(typography.weight.medium, styles2.text), children: action.label })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(typography$7.weight.medium, styles2.text), children: action.label })
         ]
       },
       action.id
@@ -6110,6 +6329,7 @@ const EmptyState = ({
     }
   );
 };
+const { typography: typography$6 } = design.designTokens;
 const Calendar = ({
   value,
   onChange,
@@ -6198,10 +6418,29 @@ const Calendar = ({
           className: "p-2 active:bg-gray-100 dark:active:bg-gray-800 rounded-md",
           accessibilityRole: "button",
           accessibilityLabel: "Previous month",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-lg text-gray-700 dark:text-gray-300", children: "‹" })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            reactNative.Text,
+            {
+              className: cn(
+                typography$6.size.lg,
+                "text-gray-700 dark:text-gray-300"
+              ),
+              children: "‹"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reactNative.Text,
+        {
+          className: cn(
+            typography$6.size.base,
+            typography$6.weight.semibold,
+            "text-gray-900 dark:text-white"
+          ),
+          children: monthYear
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-base font-semibold text-gray-900 dark:text-white", children: monthYear }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         reactNative.Pressable,
         {
@@ -6209,11 +6448,30 @@ const Calendar = ({
           className: "p-2 active:bg-gray-100 dark:active:bg-gray-800 rounded-md",
           accessibilityRole: "button",
           accessibilityLabel: "Next month",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-lg text-gray-700 dark:text-gray-300", children: "›" })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            reactNative.Text,
+            {
+              className: cn(
+                typography$6.size.lg,
+                "text-gray-700 dark:text-gray-300"
+              ),
+              children: "›"
+            }
+          )
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-row mb-2", children: weekDays.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-1 items-center py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: day }) }, day)) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-row mb-2", children: weekDays.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-1 items-center py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      reactNative.Text,
+      {
+        className: cn(
+          typography$6.size.xs,
+          typography$6.weight.medium,
+          "text-gray-600 dark:text-gray-400"
+        ),
+        children: day
+      }
+    ) }, day)) }),
     weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-row", children: week.map((date, dayIndex) => {
       if (!date) {
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -6250,9 +6508,9 @@ const Calendar = ({
             reactNative.Text,
             {
               className: cn(
-                "text-sm",
+                typography$6.size.sm,
                 isCurrentMonth ? "text-gray-900 dark:text-white" : "text-gray-400 dark:text-gray-600",
-                isSelected && "text-white font-semibold"
+                isSelected && `text-white ${typography$6.weight.semibold}`
               ),
               children: date.getDate()
             }
@@ -6280,18 +6538,40 @@ function DataList({
   };
   const renderHeader = () => {
     if (!showHeader) return null;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-row bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: columns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
       reactNative.View,
       {
         className: cn(
-          compact ? "px-3 py-2" : "px-4 py-3",
-          alignClasses[column.align || "left"]
+          "flex-row",
+          design.ui.table.thead,
+          "border-b border-gray-200 dark:border-gray-700"
         ),
-        style: { flex: column.flex || 1 },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: column.label })
-      },
-      column.key
-    )) });
+        children: columns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          reactNative.View,
+          {
+            className: cn(
+              compact ? "px-3 py-2" : "px-4 py-3",
+              alignClasses[column.align || "left"]
+            ),
+            style: { flex: column.flex || 1 },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              reactNative.Text,
+              {
+                className: cn(
+                  design.designTokens.typography.size.xs,
+                  design.designTokens.typography.weight.medium,
+                  "text-gray-700 dark:text-gray-300",
+                  design.designTokens.typography.transform.uppercase,
+                  design.designTokens.typography.tracking.wider
+                ),
+                children: column.label
+              }
+            )
+          },
+          column.key
+        ))
+      }
+    );
   };
   const renderRow = ({ item, index }) => {
     const isOdd = index % 2 === 1;
@@ -6301,7 +6581,7 @@ function DataList({
         onPress: () => onRowPress == null ? void 0 : 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 && design.ui.table.trAlt,
           onRowPress && "active:bg-gray-100 dark:active:bg-gray-800"
         ),
         disabled: !onRowPress,
@@ -6318,7 +6598,10 @@ function DataList({
             children: column.render ? column.render(item, index) : /* @__PURE__ */ jsxRuntimeExports.jsx(
               reactNative.Text,
               {
-                className: "text-sm text-gray-900 dark:text-white",
+                className: cn(
+                  design.designTokens.typography.size.sm,
+                  "text-gray-900 dark:text-white"
+                ),
                 numberOfLines: 1,
                 children: String(item[column.key] ?? "")
               }
@@ -6330,7 +6613,7 @@ function DataList({
     );
   };
   const renderEmpty = () => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "py-8 items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm text-gray-500 dark:text-gray-400", children: emptyMessage }) });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: cn("bg-white dark:bg-gray-900", className), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: cn(design.ui.table.tr, className), children: [
     renderHeader(),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       reactNative.FlatList,
@@ -6442,7 +6725,7 @@ const MultiSelect = ({
               value: searchQuery,
               onChangeText: setSearchQuery,
               placeholder: searchPlaceholder,
-              placeholderTextColor: "#9ca3af",
+              placeholderTextColor: design.colors.raw.neutral[400],
               className: "px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white rounded-md"
             }
           ) }),
@@ -6606,6 +6889,7 @@ const ProgressCircle = ({
     }
   );
 };
+const { typography: typography$5 } = design.designTokens;
 const SideNav = ({ items, className }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: cn("gap-1", className), accessibilityRole: "list", children: items.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     reactNative.Pressable,
@@ -6624,13 +6908,23 @@ const SideNav = ({ items, className }) => {
           reactNative.Text,
           {
             className: cn(
-              "flex-1 font-medium",
+              "flex-1",
+              typography$5.weight.medium,
               item.active ? "text-blue-600 dark:text-blue-400" : "text-gray-700 dark:text-gray-300"
             ),
             children: item.label
           }
         ),
-        item.badge !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xs text-gray-700 dark:text-gray-300", children: item.badge }) })
+        item.badge !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          reactNative.Text,
+          {
+            className: cn(
+              typography$5.size.xs,
+              "text-gray-700 dark:text-gray-300"
+            ),
+            children: item.badge
+          }
+        ) })
       ]
     },
     item.id
@@ -6654,7 +6948,7 @@ const SectionHeader = ({
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-row items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: title }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-row items-center gap-2", children: [
-          loading && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: "small", color: "#2563eb" }),
+          loading && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: "small", color: design.colors.raw.blue[600] }),
           actions,
           onAdd && /* @__PURE__ */ jsxRuntimeExports.jsx(
             reactNative.Pressable,
@@ -6874,7 +7168,7 @@ const PhoneInput = ({
           value,
           onChangeText: handleInputChange,
           placeholder,
-          placeholderTextColor: "#9ca3af",
+          placeholderTextColor: design.colors.raw.neutral[400],
           keyboardType: "phone-pad",
           editable: !disabled,
           className: cn(
@@ -6907,7 +7201,7 @@ const PhoneInput = ({
               value: searchQuery,
               onChangeText: setSearchQuery,
               placeholder: "Search countries...",
-              placeholderTextColor: "#9ca3af",
+              placeholderTextColor: design.colors.raw.neutral[400],
               className: "px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white rounded-md"
             }
           ) }),
@@ -7252,7 +7546,7 @@ const Combobox = ({
               value: searchQuery,
               onChangeText: setSearchQuery,
               placeholder: searchPlaceholder,
-              placeholderTextColor: "#9ca3af",
+              placeholderTextColor: design.colors.raw.neutral[400],
               autoFocus: true,
               className: "px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white rounded-md"
             }
@@ -7515,6 +7809,32 @@ const AddressLink = ({
     ] })
   ] });
 };
+let _displayColors = null;
+function getDisplayColors() {
+  if (!_displayColors) _displayColors = buildDisplayColors();
+  return _displayColors;
+}
+function buildDisplayColors() {
+  const alert2 = design.colors.component.alert;
+  function splitClasses(base, dark) {
+    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(alert2.info.base, alert2.info.dark);
+  const success = splitClasses(alert2.success.base, alert2.success.dark);
+  const warning = splitClasses(alert2.warning.base, alert2.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"
+  };
+}
 const CodeDisplay = ({
   children,
   variant = "primary",
@@ -7524,28 +7844,22 @@ const CodeDisplay = ({
   wrap = false,
   className
 }) => {
-  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"
-  };
+  const variantClasses = getDisplayColors();
   const sizeClasses = {
     xs: {
-      text: "text-xs",
+      text: design.designTokens.typography.size.xs,
       padding: inline ? "px-1.5 py-0.5" : "px-2 py-1"
     },
     sm: {
-      text: "text-sm",
+      text: design.designTokens.typography.size.sm,
       padding: inline ? "px-2 py-0.5" : "px-3 py-1.5"
     },
     md: {
-      text: "text-base",
+      text: design.designTokens.typography.size.base,
       padding: inline ? "px-2.5 py-1" : "px-4 py-2"
     },
     lg: {
-      text: "text-lg",
+      text: design.designTokens.typography.size.lg,
       padding: inline ? "px-3 py-1" : "px-4 py-2"
     }
   };
@@ -7555,13 +7869,15 @@ const CodeDisplay = ({
     right: "text-right"
   };
   const sizeConfig2 = sizeClasses[size];
-  const [textColorClass, bgClass] = variantClasses[variant].split(" ");
+  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 /* @__PURE__ */ jsxRuntimeExports.jsx(
       reactNative.Text,
       {
         className: cn(
-          "font-mono rounded-lg",
+          `${design.designTokens.typography.family.mono} rounded-lg`,
           textColorClass,
           bgClass,
           sizeConfig2.text,
@@ -7576,7 +7892,7 @@ const CodeDisplay = ({
     reactNative.Text,
     {
       className: cn(
-        "font-mono",
+        design.designTokens.typography.family.mono,
         textColorClass,
         sizeConfig2.text,
         !inline && alignClasses[align],
@@ -7904,7 +8220,7 @@ function InfiniteScroll({
   const defaultEmptyComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-1 justify-center items-center py-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-gray-500 dark:text-gray-400", children: "No items found" }) });
   const ListFooterComponent = React.useCallback(() => {
     const footerLoader = /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-row justify-center items-center py-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: "small", color: "#3b82f6" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: "small", color: design.colors.raw.blue[500] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "ml-2 text-sm text-gray-600 dark:text-gray-400", children: "Loading..." })
     ] });
     const footerEndMessage = /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-row justify-center items-center py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm text-gray-600 dark:text-gray-400", children: "No more items to load" }) });
@@ -7972,9 +8288,9 @@ const ExternalLink = ({
     lg: "text-base"
   };
   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: design.textVariants.link.external(),
+    primary: `${design.textVariants.link.default()} font-semibold`,
+    muted: design.textVariants.link.muted()
   };
   const handlePress = React.useCallback(async () => {
     onPress == null ? void 0 : onPress();
@@ -8078,7 +8394,7 @@ const TextInputModal = ({
                   value,
                   onChangeText: setValue,
                   placeholder,
-                  placeholderTextColor: "#9ca3af",
+                  placeholderTextColor: design.colors.raw.neutral[400],
                   maxLength,
                   editable: !isLoading,
                   autoFocus: true,
@@ -8275,37 +8591,54 @@ const SectionBadge = ({
     }
   );
 };
-const chainConfig = {
-  evm: {
-    label: "EVM",
-    emoji: "⟠",
-    bgColor: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800",
-    textColor: "text-blue-700 dark:text-blue-300"
-  },
-  solana: {
-    label: "SOL",
-    emoji: "◎",
-    bgColor: "bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800",
-    textColor: "text-purple-700 dark:text-purple-300"
+function splitBadgeClasses(base, dark) {
+  const all = `${base} ${dark}`.split(" ");
+  return {
+    bg: all.filter((c) => c.includes("bg-")).join(" "),
+    text: all.filter((c) => c.includes("text-")).join(" ")
+  };
+}
+let _chainColors = null;
+function getChainColors() {
+  if (!_chainColors) _chainColors = buildChainColors();
+  return _chainColors;
+}
+function buildChainColors() {
+  const badge = design.colors.component.badge;
+  return {
+    evm: splitBadgeClasses(badge.ethereum.base, badge.ethereum.dark),
+    solana: splitBadgeClasses(badge.solana.base, badge.solana.dark),
+    bitcoin: splitBadgeClasses(badge.bitcoin.base, badge.bitcoin.dark),
+    // DS has no cosmos badge — use local fallback (indigo)
+    cosmos: {
+      bg: "bg-indigo-50 dark:bg-indigo-900/20",
+      text: "text-indigo-700 dark:text-indigo-300"
+    }
+  };
+}
+const chainMeta = {
+  evm: { label: "EVM", emoji: "⟠" },
+  solana: { label: "SOL", emoji: "◎" },
+  bitcoin: { label: "BTC", emoji: "₿" },
+  cosmos: { label: "ATOM", emoji: "⚛" }
+};
+const sizeConfig = {
+  sm: {
+    padding: "px-1.5 py-0.5",
+    text: design.designTokens.typography.size.xs,
+    gap: "gap-0.5"
   },
-  bitcoin: {
-    label: "BTC",
-    emoji: "₿",
-    bgColor: "bg-orange-50 dark:bg-orange-900/20 border-orange-200 dark:border-orange-800",
-    textColor: "text-orange-700 dark:text-orange-300"
+  md: {
+    padding: "px-2 py-1",
+    text: design.designTokens.typography.size.sm,
+    gap: "gap-1"
   },
-  cosmos: {
-    label: "ATOM",
-    emoji: "⚛",
-    bgColor: "bg-indigo-50 dark:bg-indigo-900/20 border-indigo-200 dark:border-indigo-800",
-    textColor: "text-indigo-700 dark:text-indigo-300"
+  lg: {
+    padding: "px-2.5 py-1.5",
+    text: design.designTokens.typography.size.base,
+    gap: "gap-1.5"
   }
 };
-const sizeConfig = {
-  sm: { padding: "px-1.5 py-0.5", text: "text-xs", gap: "gap-0.5" },
-  md: { padding: "px-2 py-1", text: "text-sm", gap: "gap-1" },
-  lg: { padding: "px-2.5 py-1.5", text: "text-base", gap: "gap-1.5" }
-};
 const ChainBadge = ({
   chainType,
   size = "md",
@@ -8313,23 +8646,34 @@ const ChainBadge = ({
   className,
   ...props
 }) => {
-  const chain = chainConfig[chainType];
+  const chainColors = getChainColors()[chainType];
+  const meta = chainMeta[chainType];
   const sizeStyles = sizeConfig[size];
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     reactNative.View,
     {
       className: cn(
         "flex-row items-center rounded-md border",
-        chain.bgColor,
+        chainColors.bg,
         sizeStyles.padding,
         sizeStyles.gap,
         className
       ),
-      accessibilityLabel: `${chain.label} chain`,
+      accessibilityLabel: `${meta.label} chain`,
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(sizeStyles.text, chain.textColor), children: chain.emoji }),
-        showLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn("font-medium", sizeStyles.text, chain.textColor), children: chain.label })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(sizeStyles.text, chainColors.text), children: meta.emoji }),
+        showLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          reactNative.Text,
+          {
+            className: cn(
+              design.designTokens.typography.weight.medium,
+              sizeStyles.text,
+              chainColors.text
+            ),
+            children: meta.label
+          }
+        )
       ]
     }
   );
@@ -8376,7 +8720,7 @@ const ListItemWithAction = ({
               reactNative.ActivityIndicator,
               {
                 size: "small",
-                color: destructive ? "#dc2626" : "#6b7280"
+                color: destructive ? design.colors.raw.red[600] : design.colors.raw.neutral[500]
               }
             ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               actionIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "mr-1", children: actionIcon }),
@@ -8525,7 +8869,7 @@ const TransferList = ({
         value: searchValue,
         onChangeText: onSearchChange,
         placeholder: searchPlaceholder,
-        placeholderTextColor: "#9ca3af",
+        placeholderTextColor: design.colors.raw.neutral[400],
         className: "px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-700 rounded-md"
       }
     ) }),
@@ -9030,6 +9374,26 @@ const Masonry = ({
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: cn("flex-row", className), style: { gap }, children: columnArrays.map((column, columnIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-1", style: { gap }, children: column.map((item, itemIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { children: item }, itemIndex)) }, columnIndex)) });
 };
+let _iconContainerColors = null;
+function getIconContainerColors() {
+  if (!_iconContainerColors) {
+    let extractBg = function(base, dark) {
+      const all = `${base} ${dark}`.split(" ");
+      return all.filter((c) => c.includes("bg-")).join(" ");
+    };
+    const badge = design.colors.component.badge;
+    _iconContainerColors = {
+      primary: extractBg(badge.primary.base, badge.primary.dark),
+      secondary: "bg-purple-100 dark:bg-purple-900/30",
+      // DS has no purple badge variant; local fallback
+      success: extractBg(badge.success.base, badge.success.dark),
+      warning: extractBg(badge.warning.base, badge.warning.dark),
+      error: extractBg(badge.error.base, badge.error.dark),
+      neutral: extractBg(badge.default.base, badge.default.dark)
+    };
+  }
+  return _iconContainerColors;
+}
 const IconContainer = ({
   children,
   size = "md",
@@ -9043,14 +9407,7 @@ const IconContainer = ({
     lg: "w-16 h-16",
     xl: "w-20 h-20"
   };
-  const variantClasses = {
-    primary: "bg-blue-100 dark:bg-blue-900/30",
-    secondary: "bg-purple-100 dark:bg-purple-900/30",
-    success: "bg-green-100 dark:bg-green-900/30",
-    warning: "bg-yellow-100 dark:bg-yellow-900/30",
-    error: "bg-red-100 dark:bg-red-900/30",
-    neutral: "bg-gray-100 dark:bg-gray-800"
-  };
+  const variantClasses = getIconContainerColors();
   const shapeClasses = {
     square: "rounded-lg",
     rounded: "rounded-2xl",
@@ -9070,6 +9427,27 @@ const IconContainer = ({
     }
   );
 };
+let _gradientIconColors = null;
+function getGradientIconColors() {
+  if (!_gradientIconColors) {
+    let extractBg = function(base) {
+      return base.split(" ").find(
+        (c) => c.startsWith("bg-") && !c.includes("hover:") && !c.includes("active:")
+      ) || "";
+    };
+    const btn = design.colors.component.button;
+    _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;
+}
 const GradientIconContainer = ({
   children,
   size = "md",
@@ -9088,13 +9466,7 @@ const GradientIconContainer = ({
     rounded: "rounded-xl",
     circle: "rounded-full"
   };
-  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"
-  };
+  const variantClasses = getGradientIconColors();
   const config = sizeConfig2[size];
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     reactNative.View,
@@ -9175,7 +9547,7 @@ const PageSectionHeader = ({
               }
             ),
             loading && /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-row items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: "small", color: "#3b82f6" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: "small", color: design.colors.raw.blue[500] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 reactNative.Text,
                 {
@@ -9227,6 +9599,7 @@ const styles = reactNative.StyleSheet.create({
     // clipPath: 'inset(50%)', // Not supported in RN
   }
 });
+const { typography: typography$4 } = design.designTokens;
 const BreadcrumbNav = ({
   items,
   separator = "/",
@@ -9239,14 +9612,42 @@ const BreadcrumbNav = ({
       accessibilityRole: "none",
       accessibilityLabel: "Breadcrumb navigation",
       children: items.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React__namespace.Fragment, { children: [
-        index > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-gray-400 dark:text-gray-600 text-sm", children: typeof separator === "string" ? separator : separator }),
-        index === items.length - 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-gray-900 dark:text-white font-medium text-sm", children: item.label }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        index > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          reactNative.Text,
+          {
+            className: cn(
+              "text-gray-400 dark:text-gray-600",
+              typography$4.size.sm
+            ),
+            children: typeof separator === "string" ? separator : separator
+          }
+        ),
+        index === items.length - 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          reactNative.Text,
+          {
+            className: cn(
+              "text-gray-900 dark:text-white",
+              typography$4.weight.medium,
+              typography$4.size.sm
+            ),
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           reactNative.Pressable,
           {
             onPress: item.onPress,
             accessibilityRole: "link",
             accessibilityLabel: item.label,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-blue-600 dark:text-blue-400 text-sm", children: item.label })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              reactNative.Text,
+              {
+                className: cn(
+                  "text-blue-600 dark:text-blue-400",
+                  typography$4.size.sm
+                ),
+                children: item.label
+              }
+            )
           }
         )
       ] }, index))
@@ -9325,7 +9726,8 @@ function Table({
           reactNative.View,
           {
             className: cn(
-              "flex-row bg-gray-50 dark:bg-gray-800",
+              "flex-row",
+              design.ui.table.thead,
               "border-b border-gray-200 dark:border-gray-700"
             ),
             children: columns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -9348,7 +9750,19 @@ function Table({
                       alignClasses[column.align || "left"]
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: column.label }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        reactNative.Text,
+                        {
+                          className: cn(
+                            design.designTokens.typography.size.xs,
+                            design.designTokens.typography.weight.medium,
+                            "text-gray-700 dark:text-gray-300",
+                            design.designTokens.typography.transform.uppercase,
+                            design.designTokens.typography.tracking.wider
+                          ),
+                          children: column.label
+                        }
+                      ),
                       column.sortable && (sort == null ? void 0 : sort.column) === column.key && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xs text-gray-500", children: sort.direction === "asc" ? "↑" : "↓" })
                     ]
                   }
@@ -9358,7 +9772,7 @@ function Table({
             ))
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "bg-white dark:bg-gray-900", children: data.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "px-4 py-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-center text-sm text-gray-500 dark:text-gray-400", children: emptyMessage }) }) : data.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: design.ui.table.tr, children: data.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "px-4 py-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-center text-sm text-gray-500 dark:text-gray-400", children: emptyMessage }) }) : data.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           reactNative.Pressable,
           {
             onPress: () => onRowPress == null ? void 0 : onRowPress(row, rowIndex),
@@ -9366,7 +9780,7 @@ function Table({
             className: cn(
               "flex-row",
               "border-b border-gray-200 dark:border-gray-700",
-              striped && rowIndex % 2 === 1 && "bg-gray-50 dark:bg-gray-800/50"
+              striped && rowIndex % 2 === 1 && design.ui.table.trAlt
             ),
             accessibilityRole: "button",
             children: columns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -9378,7 +9792,16 @@ function Table({
                   bordered && "border-r border-gray-200 dark:border-gray-700 last:border-r-0"
                 ),
                 style: { width: column.width },
-                children: column.render ? column.render(row, rowIndex) : /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm text-gray-900 dark:text-white", children: String(row[column.key] ?? "") })
+                children: column.render ? column.render(row, rowIndex) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  reactNative.Text,
+                  {
+                    className: cn(
+                      design.designTokens.typography.size.sm,
+                      "text-gray-900 dark:text-white"
+                    ),
+                    children: String(row[column.key] ?? "")
+                  }
+                )
               },
               column.key
             ))
@@ -9473,7 +9896,7 @@ const Command = ({
                           value: searchQuery,
                           onChangeText: setSearchQuery,
                           placeholder,
-                          placeholderTextColor: "#9ca3af",
+                          placeholderTextColor: design.colors.raw.neutral[400],
                           className: "flex-1 text-gray-900 dark:text-white text-base",
                           autoCapitalize: "none",
                           autoCorrect: false,
@@ -9699,6 +10122,7 @@ const StandardPageLayout = ({
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: cn("flex-1", backgroundClassName), children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: cn("flex-1", contentClassName), children }) });
 };
+const { typography: typography$3 } = design.designTokens;
 const StepList = ({
   items,
   type = "ordered",
@@ -9709,10 +10133,30 @@ const StepList = ({
   const renderStepNumber = (index) => {
     if (type === "ordered") {
       if (variant === "enhanced") {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "w-6 h-6 bg-blue-600 rounded-full items-center justify-center mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-white text-sm font-medium", children: index + 1 }) });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "w-6 h-6 bg-blue-600 rounded-full items-center justify-center mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          reactNative.Text,
+          {
+            className: cn(
+              "text-white",
+              typography$3.size.sm,
+              typography$3.weight.medium
+            ),
+            children: index + 1
+          }
+        ) });
       }
       if (variant === "minimal") {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "w-6 h-6 bg-blue-100 dark:bg-blue-900/20 rounded-full items-center justify-center mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-blue-600 dark:text-blue-400 text-sm font-medium", children: index + 1 }) });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "w-6 h-6 bg-blue-100 dark:bg-blue-900/20 rounded-full items-center justify-center mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          reactNative.Text,
+          {
+            className: cn(
+              "text-blue-600 dark:text-blue-400",
+              typography$3.size.sm,
+              typography$3.weight.medium
+            ),
+            children: index + 1
+          }
+        ) });
       }
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.Text, { className: "text-gray-600 dark:text-gray-400 mr-2", children: [
         index + 1,
@@ -9743,7 +10187,16 @@ const StepList = ({
             typeof content === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-gray-600 dark:text-gray-400", children: content }) : content,
             subItems && subItems.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "mt-2 ml-4 gap-1", children: subItems.map((subItem, subIndex) => /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-row", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-gray-500 dark:text-gray-500 mr-2", children: "•" }),
-              typeof subItem === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm text-gray-500 dark:text-gray-500 flex-1", children: subItem }) : subItem
+              typeof subItem === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                reactNative.Text,
+                {
+                  className: cn(
+                    typography$3.size.sm,
+                    "text-gray-500 dark:text-gray-500 flex-1"
+                  ),
+                  children: subItem
+                }
+              ) : subItem
             ] }, subIndex)) })
           ] })
         ]
@@ -9779,51 +10232,74 @@ const FeatureCard = ({
 }) => {
   const colorClasses2 = {
     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",
+    // colors.raw.orange[600] / [400]
     pink: "text-pink-600 dark:text-pink-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 = {
     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"
+    // colors.raw.neutral[500]
   };
   const iconBackgroundClasses = {
     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"
+    // colors.raw.neutral[100] / [900]
   };
   const bulletColorClasses = {
     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"
+    // colors.raw.neutral[500]
   };
   const CardContent2 = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     borderColor ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -9836,8 +10312,28 @@ const FeatureCard = ({
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: colorClasses2[color], children: icon })
       }
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: cn("mb-4", colorClasses2[color]), children: icon }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xl font-semibold text-gray-900 dark:text-white mb-3", children: title }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-gray-600 dark:text-gray-300 mb-4 leading-relaxed", children: description }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      reactNative.Text,
+      {
+        className: cn(
+          design.designTokens.typography.size.xl,
+          design.designTokens.typography.weight.semibold,
+          "text-gray-900 dark:text-white mb-3"
+        ),
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      reactNative.Text,
+      {
+        className: cn(
+          design.designTokens.typography.size.base,
+          design.designTokens.typography.leading.relaxed,
+          "text-gray-600 dark:text-gray-300 mb-4"
+        ),
+        children: description
+      }
+    ),
     cta && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "mt-3 mb-4", children: cta }),
     benefits && benefits.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "gap-2 mb-4", children: benefits.map((benefit, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-row items-start", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -9849,15 +10345,44 @@ const FeatureCard = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "flex-1 text-sm text-gray-600 dark:text-gray-400", children: benefit })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reactNative.Text,
+        {
+          className: cn(
+            "flex-1",
+            design.designTokens.typography.size.sm,
+            "text-gray-600 dark:text-gray-400"
+          ),
+          children: benefit
+        }
+      )
     ] }, index)) }),
     metrics && Object.keys(metrics).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-row flex-wrap gap-4 mt-4", children: Object.entries(metrics).map(([key, value], index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       reactNative.View,
       {
         className: "flex-1 min-w-[80px] items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg",
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn("text-lg font-bold", colorClasses2[color]), children: value }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: key })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            reactNative.Text,
+            {
+              className: cn(
+                design.designTokens.typography.size.lg,
+                design.designTokens.typography.weight.bold,
+                colorClasses2[color]
+              ),
+              children: value
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            reactNative.Text,
+            {
+              className: cn(
+                design.designTokens.typography.size.xs,
+                "text-gray-500 dark:text-gray-400 mt-1"
+              ),
+              children: key
+            }
+          )
         ]
       },
       index
@@ -9903,10 +10428,10 @@ const FeatureGrid = ({
     lg: "w-20 h-20"
   };
   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: `${design.colors.component.badge.success.base} ${design.colors.component.badge.success.dark}`,
+    info: `${design.colors.component.badge.primary.base} ${design.colors.component.badge.primary.dark}`,
+    warning: `${design.colors.component.badge.attention.base} ${design.colors.component.badge.attention.dark}`,
+    default: `${design.colors.component.badge.default.base} ${design.colors.component.badge.default.dark}`
   };
   const renderFeature = (feature, index) => {
     const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -9914,7 +10439,7 @@ const FeatureGrid = ({
       {
         className: cn(
           "items-center",
-          cardVariant === "card" && "bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg",
+          cardVariant === "card" && `${design.getCardVariantColors("elevated")} rounded-2xl p-6`,
           cardVariant === "minimal" && "gap-4"
         ),
         children: [
@@ -9998,14 +10523,14 @@ const CTASection = ({
     lg: "py-16 px-8"
   };
   const titleSizeClasses = {
-    sm: "text-2xl",
-    md: "text-3xl",
-    lg: "text-4xl"
+    sm: design.designTokens.typography.size["2xl"],
+    md: design.designTokens.typography.size["3xl"],
+    lg: design.designTokens.typography.size["4xl"]
   };
   const descriptionSizeClasses = {
-    sm: "text-base",
-    md: "text-lg",
-    lg: "text-xl"
+    sm: design.designTokens.typography.size.base,
+    md: design.designTokens.typography.size.lg,
+    lg: design.designTokens.typography.size.xl
   };
   const textColorClass = textColor === "light" ? "text-white" : "text-gray-900";
   const renderButton = (button, isPrimary) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -10085,8 +10610,10 @@ const PromotionalBanner = ({
     reactNative.View,
     {
       className: cn(
-        "bg-green-50 dark:bg-green-900/20",
-        "border-b border-green-200 dark:border-green-700",
+        // Derive green palette from DS alert.success colors
+        design.colors.component.alert.success.base,
+        design.colors.component.alert.success.dark,
+        "border-b",
         isProminent && "border-b-2",
         className
       ),
@@ -10137,6 +10664,7 @@ const PromotionalBanner = ({
     }
   );
 };
+const { typography: typography$2 } = design.designTokens;
 if (reactNative.Platform.OS === "android" && reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
   reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
 }
@@ -10186,7 +10714,8 @@ const CollapsibleSection = ({
             reactNative.Text,
             {
               className: cn(
-                "text-base font-medium",
+                typography$2.size.base,
+                typography$2.weight.medium,
                 isSelected && !selectedSubsection ? "text-blue-700 dark:text-blue-300" : "text-gray-700 dark:text-gray-300"
               ),
               children: title
@@ -10201,7 +10730,7 @@ const CollapsibleSection = ({
           className: "p-2 rounded-md",
           accessibilityRole: "button",
           accessibilityLabel: isExpanded ? "Collapse" : "Expand",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Animated.View, { style: { transform: [{ rotate: rotation }] }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-gray-500 text-lg", children: "›" }) })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Animated.View, { style: { transform: [{ rotate: rotation }] }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn("text-gray-500", typography$2.size.lg), children: "›" }) })
         }
       )
     ] }),
@@ -10221,7 +10750,7 @@ const CollapsibleSection = ({
             reactNative.Text,
             {
               className: cn(
-                "text-sm",
+                typography$2.size.sm,
                 selectedSubsection === subsection.id ? "text-blue-700 dark:text-blue-300" : "text-gray-600 dark:text-gray-400"
               ),
               children: subsection.title
@@ -10232,6 +10761,19 @@ const CollapsibleSection = ({
     ] }, subsection.id)) })
   ] });
 };
+let _cardColors = null;
+function getDashboardCardColors() {
+  if (!_cardColors) {
+    _cardColors = {
+      default: design.getCardVariantColors("default"),
+      primary: design.getCardVariantColors("info"),
+      success: design.getCardVariantColors("success"),
+      warning: design.getCardVariantColors("warning"),
+      danger: design.getCardVariantColors("error")
+    };
+  }
+  return _cardColors;
+}
 const DashboardStatCard = ({
   title,
   value,
@@ -10241,13 +10783,7 @@ const DashboardStatCard = ({
   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 !== void 0 && change >= 0;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     reactNative.View,
@@ -10259,16 +10795,29 @@ const DashboardStatCard = ({
       ),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-row items-start justify-between mb-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm font-medium text-gray-600 dark:text-gray-400", children: title }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            reactNative.Text,
+            {
+              className: `${design.designTokens.typography.size.sm} ${design.designTokens.typography.weight.medium} text-gray-600 dark:text-gray-400`,
+              children: title
+            }
+          ),
           icon && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "text-gray-400 dark:text-gray-600", children: icon })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-3xl font-bold text-gray-900 dark:text-white", children: value }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          reactNative.Text,
+          {
+            className: `${design.designTokens.typography.size["3xl"]} ${design.designTokens.typography.weight.bold} text-gray-900 dark:text-white`,
+            children: value
+          }
+        ),
         change !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-row items-center gap-1 mt-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             reactNative.Text,
             {
               className: cn(
-                "text-sm font-medium",
+                design.designTokens.typography.size.sm,
+                design.designTokens.typography.weight.medium,
                 isPositive ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"
               ),
               children: [
@@ -10279,37 +10828,40 @@ const DashboardStatCard = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-xs text-gray-500 dark:text-gray-400", children: changePeriod })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            reactNative.Text,
+            {
+              className: `${design.designTokens.typography.size.xs} text-gray-500 dark:text-gray-400`,
+              children: changePeriod
+            }
+          )
         ] })
       ]
     }
   );
 };
-const StatDisplay = ({
-  value,
-  label,
-  variant = "neutral",
-  size = "md",
-  align = "center",
-  icon,
-  iconPosition = "top",
-  className
-}) => {
-  const variantClasses = {
+let _statColors = null;
+function getStatColors() {
+  if (!_statColors) _statColors = buildStatColors();
+  return _statColors;
+}
+function buildStatColors() {
+  const alert2 = design.colors.component.alert;
+  return {
     primary: {
-      value: "text-blue-600 dark:text-blue-400",
+      value: `${alert2.info.icon}`,
       label: "text-blue-600/70 dark:text-blue-400/70"
     },
     success: {
-      value: "text-green-600 dark:text-green-400",
+      value: `${alert2.success.icon}`,
       label: "text-green-600/70 dark:text-green-400/70"
     },
     warning: {
-      value: "text-yellow-600 dark:text-yellow-400",
-      label: "text-yellow-600/70 dark:text-yellow-400/70"
+      value: `${alert2.warning.icon}`,
+      label: "text-orange-600/70 dark:text-orange-400/70"
     },
     danger: {
-      value: "text-red-600 dark:text-red-400",
+      value: `${alert2.error.icon}`,
       label: "text-red-600/70 dark:text-red-400/70"
     },
     neutral: {
@@ -10321,11 +10873,35 @@ const StatDisplay = ({
       label: "text-white/70"
     }
   };
+}
+const StatDisplay = ({
+  value,
+  label,
+  variant = "neutral",
+  size = "md",
+  align = "center",
+  icon,
+  iconPosition = "top",
+  className
+}) => {
+  const variantClasses = getStatColors();
   const sizeClasses = {
-    sm: { value: "text-xl", label: "text-xs" },
-    md: { value: "text-2xl", label: "text-sm" },
-    lg: { value: "text-3xl", label: "text-base" },
-    xl: { value: "text-4xl", label: "text-lg" }
+    sm: {
+      value: design.designTokens.typography.size.xl,
+      label: design.designTokens.typography.size.xs
+    },
+    md: {
+      value: design.designTokens.typography.size["2xl"],
+      label: design.designTokens.typography.size.sm
+    },
+    lg: {
+      value: design.designTokens.typography.size["3xl"],
+      label: design.designTokens.typography.size.base
+    },
+    xl: {
+      value: design.designTokens.typography.size["4xl"],
+      label: design.designTokens.typography.size.lg
+    }
   };
   const alignClasses = {
     left: "items-start",
@@ -10349,7 +10925,11 @@ const StatDisplay = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               reactNative.Text,
               {
-                className: cn("font-bold", sizeConfig2.value, variantConfig2.value),
+                className: cn(
+                  design.designTokens.typography.weight.bold,
+                  sizeConfig2.value,
+                  variantConfig2.value
+                ),
                 children: value
               }
             ),
@@ -10361,10 +10941,21 @@ const StatDisplay = ({
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: cn(alignClasses[align], className), children: [
     icon && iconPosition === "top" && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: cn("mb-2", variantConfig2.value), children: icon }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn("font-bold", sizeConfig2.value, variantConfig2.value), children: value }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      reactNative.Text,
+      {
+        className: cn(
+          design.designTokens.typography.weight.bold,
+          sizeConfig2.value,
+          variantConfig2.value
+        ),
+        children: value
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(sizeConfig2.label, variantConfig2.label), children: label })
   ] });
 };
+const { typography: typography$1 } = design.designTokens;
 const KeyValuePair = ({
   label,
   value,
@@ -10378,9 +10969,13 @@ const KeyValuePair = ({
   className
 }) => {
   const sizeClasses = {
-    sm: { label: "text-sm", value: "text-sm", gap: "gap-1" },
-    md: { label: "text-base", value: "text-base", gap: "gap-2" },
-    lg: { label: "text-lg", value: "text-lg", gap: "gap-3" }
+    sm: { label: typography$1.size.sm, value: typography$1.size.sm, gap: "gap-1" },
+    md: {
+      label: typography$1.size.base,
+      value: typography$1.size.base,
+      gap: "gap-2"
+    },
+    lg: { label: typography$1.size.lg, value: typography$1.size.lg, gap: "gap-3" }
   };
   const labelWidthStyles = {
     auto: void 0,
@@ -10396,12 +10991,12 @@ const KeyValuePair = ({
   const labelVariantClasses = {
     default: "text-gray-700 dark:text-gray-300",
     muted: "text-gray-600 dark:text-gray-400",
-    strong: "text-gray-900 dark:text-gray-100 font-semibold"
+    strong: `text-gray-900 dark:text-gray-100 ${typography$1.weight.semibold}`
   };
   const valueVariantClasses = {
     default: "text-gray-900 dark:text-gray-100",
     muted: "text-gray-600 dark:text-gray-400",
-    strong: "text-gray-900 dark:text-gray-100 font-semibold",
+    strong: `text-gray-900 dark:text-gray-100 ${typography$1.weight.semibold}`,
     primary: "text-blue-600 dark:text-blue-400"
   };
   const sizeConfig2 = sizeClasses[size];
@@ -10439,6 +11034,7 @@ const KeyValuePair = ({
     }
   );
 };
+const { typography } = design.designTokens;
 const SmartLink = ({
   to,
   href,
@@ -10459,9 +11055,9 @@ const SmartLink = ({
     inherit: "text-inherit"
   };
   const sizeClasses = {
-    sm: "text-sm",
-    default: "text-base",
-    lg: "text-lg"
+    sm: typography.size.sm,
+    default: typography.size.base,
+    lg: typography.size.lg
   };
   const handlePress = async () => {
     if (disabled || !destination) return;