@sudobility/components-rn 1.0.42 → 1.0.43

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { clsx } from "clsx";
 import * as React from "react";
 import React__default, { useState, useRef, useCallback, useEffect, createContext, useContext } from "react";
 import { Animated, View, Text as Text$1, Pressable, ActivityIndicator, TextInput, Dimensions, Modal as Modal$1, SafeAreaView, FlatList, StyleSheet, TouchableOpacity, Image, KeyboardAvoidingView, ScrollView, Platform, PanResponder, Linking, TouchableWithoutFeedback, useWindowDimensions, RefreshControl, UIManager, LayoutAnimation, Alert as Alert$1 } from "react-native";
-import { colors, variants, getCardVariantColors, textVariants, designTokens } from "@sudobility/design";
+import { colors, variants, getCardVariantColors, textVariants, designTokens, statusIndicatorColors, ui } from "@sudobility/design";
 import { colors as colors2, designTokens as designTokens2, textVariants as textVariants2, variants as variants2 } from "@sudobility/design";
 import { cva } from "class-variance-authority";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -1762,7 +1762,7 @@ const sizeMap = {
 };
 const colorMap = {
   default: colors.raw.blue[600],
-  white: "#ffffff",
+  white: colors.raw.neutral[0],
   success: colors.raw.green[600],
   warning: colors.raw.orange[600],
   error: colors.raw.red[600]
@@ -2460,7 +2460,7 @@ const TextArea = ({
           readOnly && "bg-gray-50 dark:bg-gray-900",
           inputClassName
         ),
-        placeholderTextColor: "#9CA3AF",
+        placeholderTextColor: colors.raw.neutral[400],
         accessibilityRole: "text",
         accessibilityState: { disabled },
         ...textInputProps
@@ -2482,6 +2482,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 = 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,
@@ -2505,31 +2527,33 @@ const Checkbox = ({
     sm: {
       box: "w-4 h-4",
       check: "w-2 h-2",
-      text: "text-sm",
-      desc: "text-xs"
+      text: designTokens.typography.size.sm,
+      desc: designTokens.typography.size.xs
     },
     md: {
       box: "w-5 h-5",
       check: "w-3 h-3",
-      text: "text-base",
-      desc: "text-sm"
+      text: designTokens.typography.size.base,
+      desc: designTokens.typography.size.sm
     },
     lg: {
       box: "w-6 h-6",
       check: "w-4 h-4",
-      text: "text-lg",
-      desc: "text-base"
+      text: designTokens.typography.size.lg,
+      desc: 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];
   };
@@ -2598,7 +2622,13 @@ const Checkbox = ({
         ]
       }
     ),
-    errorMessage && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: errorMessage })
+    errorMessage && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Text$1,
+      {
+        className: `mt-1 ${designTokens.typography.size.sm} text-red-600 dark:text-red-400`,
+        children: errorMessage
+      }
+    )
   ] });
 };
 const Switch = React.forwardRef(
@@ -2694,8 +2724,8 @@ const HelperText = ({
   ...textProps
 }) => {
   const sizeClasses = {
-    sm: "text-sm",
-    base: "text-base"
+    sm: designTokens.typography.size.sm,
+    base: designTokens.typography.size.base
   };
   const iconSize = {
     sm: "w-4 h-4",
@@ -2703,19 +2733,19 @@ const HelperText = ({
   };
   const variantConfig2 = {
     default: {
-      text: "text-gray-600 dark:text-gray-400",
+      text: colors.component.alert.info.icon,
       icon: "ℹ"
     },
     error: {
-      text: "text-red-600 dark:text-red-400",
+      text: colors.component.alert.error.icon,
       icon: "⚠"
     },
     success: {
-      text: "text-green-600 dark:text-green-400",
+      text: colors.component.alert.success.icon,
       icon: "✓"
     },
     warning: {
-      text: "text-yellow-600 dark:text-yellow-400",
+      text: colors.component.alert.warning.icon,
       icon: "⚠"
     }
   };
@@ -2725,6 +2755,7 @@ const HelperText = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(sizeClasses[size], config.text), ...textProps, children })
   ] });
 };
+const { typography: typography$h } = designTokens;
 const Select = ({
   value,
   onValueChange,
@@ -2763,8 +2794,8 @@ const Select = ({
           Text$1,
           {
             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
           }
@@ -2793,7 +2824,8 @@ const Select = ({
             Text$1,
             {
               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,
@@ -2813,8 +2845,27 @@ const Select = ({
         onRequestClose: () => setIsOpen(false),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-1 justify-end bg-black/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(SafeAreaView, { className: "bg-white dark:bg-gray-800 rounded-t-xl", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(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(Pressable, { onPress: () => setIsOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-blue-600 dark:text-blue-400 text-base", children: "Cancel" }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-base font-semibold text-gray-900 dark:text-white", children: title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Pressable, { onPress: () => setIsOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Text$1,
+              {
+                className: cn(
+                  "text-blue-600 dark:text-blue-400",
+                  typography$h.size.base
+                ),
+                children: "Cancel"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Text$1,
+              {
+                className: cn(
+                  typography$h.size.base,
+                  typography$h.weight.semibold,
+                  "text-gray-900 dark:text-white"
+                ),
+                children: title
+              }
+            ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(View, { style: { width: 60 } })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2950,11 +3001,11 @@ const styles$4 = StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-between",
     borderWidth: 1,
-    borderColor: "#d1d5db",
+    borderColor: colors.raw.neutral[300],
     borderRadius: 8,
     paddingHorizontal: 12,
     paddingVertical: 12,
-    backgroundColor: "#ffffff"
+    backgroundColor: colors.raw.neutral[0]
   },
   triggerDisabled: {
     opacity: 0.5
@@ -2962,19 +3013,19 @@ const styles$4 = StyleSheet.create({
   triggerText: {
     flex: 1,
     fontSize: 16,
-    color: "#1a1a1a"
+    color: colors.raw.neutral[900]
   },
   triggerPlaceholder: {
-    color: "#9ca3af"
+    color: colors.raw.neutral[400]
   },
   triggerArrow: {
     fontSize: 10,
-    color: "#9ca3af",
+    color: colors.raw.neutral[400],
     marginLeft: 8
   },
   modalContainer: {
     flex: 1,
-    backgroundColor: "#ffffff"
+    backgroundColor: colors.raw.neutral[0]
   },
   modalHeader: {
     flexDirection: "row",
@@ -2983,12 +3034,12 @@ const styles$4 = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 12,
     borderBottomWidth: 1,
-    borderBottomColor: "#e9ecef"
+    borderBottomColor: colors.raw.neutral[200]
   },
   modalTitle: {
     fontSize: 18,
     fontWeight: "600",
-    color: "#1a1a1a"
+    color: colors.raw.neutral[900]
   },
   closeButton: {
     padding: 8
@@ -2996,7 +3047,7 @@ const styles$4 = StyleSheet.create({
   closeButtonText: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#3b82f6"
+    color: colors.raw.blue[500]
   },
   listContent: {
     padding: 16
@@ -3005,27 +3056,27 @@ const styles$4 = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     padding: 16,
-    backgroundColor: "#f8f9fa",
+    backgroundColor: colors.raw.neutral[50],
     borderRadius: 12
   },
   optionItemSelected: {
-    backgroundColor: "#e0f2fe"
+    backgroundColor: colors.raw.blue[100]
   },
   optionLabel: {
     flex: 1,
     fontSize: 16,
-    color: "#1a1a1a"
+    color: colors.raw.neutral[900]
   },
   optionLabelSelected: {
     fontWeight: "600",
-    color: "#3b82f6"
+    color: colors.raw.blue[500]
   },
   optionDisabled: {
     opacity: 0.5
   },
   checkmark: {
     fontSize: 18,
-    color: "#3b82f6",
+    color: colors.raw.blue[500],
     fontWeight: "bold"
   },
   separator: {
@@ -3111,7 +3162,7 @@ const SearchInput = ({
           disabled && "opacity-50",
           loading && "opacity-60"
         ),
-        placeholderTextColor: "#9CA3AF",
+        placeholderTextColor: colors.raw.neutral[400],
         accessibilityRole: "search",
         accessibilityState: { disabled },
         ...textInputProps
@@ -3128,7 +3179,7 @@ const SearchInput = ({
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(sizeConfig2.icon, "text-gray-400"), children: "✕" })
       }
     ),
-    loading && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "absolute inset-y-0 right-0 flex items-center justify-center pr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityIndicator, { size: "small", color: "#9CA3AF" }) })
+    loading && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "absolute inset-y-0 right-0 flex items-center justify-center pr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityIndicator, { size: "small", color: colors.raw.neutral[400] }) })
   ] });
 };
 const NumberInput = ({
@@ -3332,7 +3383,7 @@ const NumberInput = ({
     }
   );
 };
-const { typography: typography$2 } = designTokens;
+const { typography: typography$g } = designTokens;
 const colorClasses$1 = {
   default: "text-gray-900 dark:text-gray-100",
   muted: "text-gray-600 dark:text-gray-400",
@@ -3355,11 +3406,11 @@ const Text = ({
     Text$1,
     {
       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,
@@ -3367,7 +3418,7 @@ const Text = ({
     }
   );
 };
-const { typography: typography$1 } = designTokens;
+const { typography: typography$f } = designTokens;
 const colorClasses = {
   default: "text-gray-900 dark:text-gray-100",
   muted: "text-gray-700 dark:text-gray-300",
@@ -3395,12 +3446,12 @@ const Heading = ({
     Text$1,
     {
       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",
@@ -3408,6 +3459,41 @@ const Heading = ({
     }
   );
 };
+let _codeColors = null;
+function getCodeColors() {
+  if (!_codeColors) _codeColors = buildCodeColors();
+  return _codeColors;
+}
+function buildCodeColors() {
+  const alert2 = 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",
@@ -3415,24 +3501,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: `${designTokens.typography.size.xs} px-1 py-0.5`,
+    md: `${designTokens.typography.size.sm} px-1.5 py-0.5`,
+    lg: `${designTokens.typography.size.base} px-2 py-1`
   };
+  const codeColors = getCodeColors();
+  const variantBgClasses = codeColors.bg;
+  const variantTextClasses = codeColors.text;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     View,
     {
@@ -3445,7 +3520,11 @@ const Code = ({
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Text$1,
         {
-          className: cn("font-mono font-medium", variantTextClasses[variant]),
+          className: cn(
+            designTokens.typography.family.mono,
+            designTokens.typography.weight.medium,
+            variantTextClasses[variant]
+          ),
           style: { fontFamily: "monospace" },
           children
         }
@@ -3504,7 +3583,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(" "),
@@ -3519,11 +3598,11 @@ function getBadgeColors() {
 function buildBadgeColors() {
   const badge = 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 = ({
@@ -3681,10 +3760,14 @@ const Avatar = ({
     xl: "w-4 h-4"
   };
   const statusClasses = {
-    online: "bg-green-500",
-    offline: "bg-gray-400",
+    online: statusIndicatorColors.success,
+    // bg-green-500
+    offline: statusIndicatorColors.neutral,
+    // bg-gray-500
     away: "bg-yellow-500",
-    busy: "bg-red-500"
+    // local fallback, no DS yellow status
+    busy: statusIndicatorColors.error
+    // bg-red-500
   };
   const generateInitials = (name2) => {
     const parts = name2.trim().split(/\s+/);
@@ -4017,10 +4100,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: colors.component.alert.info.icon,
+    success: colors.component.alert.success.icon,
+    warning: colors.component.alert.warning.icon,
+    danger: colors.component.alert.error.icon,
     muted: "text-gray-500 dark:text-gray-400"
   };
   const layoutClasses = {
@@ -4164,6 +4247,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 = 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,
@@ -4194,11 +4306,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",
@@ -4238,7 +4351,13 @@ const Progress = ({
         )
       }
     ),
-    (showLabel || label) && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xs text-gray-600 dark:text-gray-400 text-right", children: label || `${Math.round(percentage)}%` }) })
+    (showLabel || label) && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Text$1,
+      {
+        className: `${designTokens.typography.size.xs} text-gray-600 dark:text-gray-400 text-right`,
+        children: label || `${Math.round(percentage)}%`
+      }
+    ) })
   ] });
 };
 const ProgressBar = ({
@@ -4254,13 +4373,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",
@@ -4290,9 +4410,16 @@ const ProgressBar = ({
         )
       }
     ),
-    showLabel && labelPosition === "outside" && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-sm font-medium text-gray-600 dark:text-gray-400", children: displayLabel })
+    showLabel && labelPosition === "outside" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Text$1,
+      {
+        className: `${designTokens.typography.size.sm} ${designTokens.typography.weight.medium} text-gray-600 dark:text-gray-400`,
+        children: displayLabel
+      }
+    )
   ] }) });
 };
+const { typography: typography$e } = designTokens;
 const Modal = ({
   isOpen,
   onClose,
@@ -4343,7 +4470,17 @@ const Modal = ({
                   ),
                   children: [
                     (title || showCloseButton) && /* @__PURE__ */ jsxRuntimeExports.jsxs(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(Text$1, { className: "text-lg font-semibold text-gray-900 dark:text-white flex-1", children: title }),
+                      title && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Text$1,
+                        {
+                          className: cn(
+                            typography$e.size.lg,
+                            typography$e.weight.semibold,
+                            "text-gray-900 dark:text-white flex-1"
+                          ),
+                          children: title
+                        }
+                      ),
                       showCloseButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
                         Pressable,
                         {
@@ -4351,7 +4488,16 @@ const Modal = ({
                           className: "p-1 -mr-1 rounded-full",
                           accessibilityRole: "button",
                           accessibilityLabel: "Close modal",
-                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xl text-gray-500 dark:text-gray-400", children: "✕" })
+                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            Text$1,
+                            {
+                              className: cn(
+                                typography$e.size.xl,
+                                "text-gray-500 dark:text-gray-400"
+                              ),
+                              children: "✕"
+                            }
+                          )
                         }
                       )
                     ] }),
@@ -4696,6 +4842,7 @@ const Backdrop = ({
     }
   );
 };
+const { typography: typography$d } = designTokens;
 const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH$1 } = Dimensions.get("window");
 const Sheet = ({
   isOpen,
@@ -4886,8 +5033,28 @@ const Sheet = ({
                   ),
                   (title || description || showCloseButton) && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "px-4 py-4 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex flex-row items-start justify-between", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-1", children: [
-                      title && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
-                      description && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "mt-1 text-sm text-gray-600 dark:text-gray-400", children: description })
+                      title && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Text$1,
+                        {
+                          className: cn(
+                            typography$d.size.lg,
+                            typography$d.weight.semibold,
+                            "text-gray-900 dark:text-white"
+                          ),
+                          children: title
+                        }
+                      ),
+                      description && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Text$1,
+                        {
+                          className: cn(
+                            "mt-1",
+                            typography$d.size.sm,
+                            "text-gray-600 dark:text-gray-400"
+                          ),
+                          children: description
+                        }
+                      )
                     ] }),
                     showCloseButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
                       Pressable,
@@ -4896,7 +5063,7 @@ const Sheet = ({
                         className: "ml-4 p-1",
                         accessibilityRole: "button",
                         accessibilityLabel: "Close sheet",
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xl text-gray-400", children: "✕" })
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(typography$d.size.xl, "text-gray-400"), children: "✕" })
                       }
                     )
                   ] }) }),
@@ -4911,6 +5078,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 = 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,
@@ -4963,13 +5154,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;
@@ -5035,7 +5220,13 @@ const Tooltip = ({
                   variantClasses[variant],
                   className
                 ),
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xs font-medium text-white", children: content })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Text$1,
+                  {
+                    className: `${designTokens.typography.size.xs} ${designTokens.typography.weight.medium} text-white`,
+                    children: content
+                  }
+                )
               }
             )
           }
@@ -5287,7 +5478,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",
+      designTokens.radius.lg,
+      "p-1",
       className
     ),
     contentContainerStyle: { flexGrow: 1 },
@@ -5320,7 +5513,9 @@ const TabsTrigger = ({
         Text$1,
         {
           className: cn(
-            "text-sm font-medium text-center",
+            designTokens.typography.size.sm,
+            designTokens.typography.weight.medium,
+            "text-center",
             isSelected ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-400"
           ),
           children
@@ -5352,11 +5547,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: textVariants.link.subtle(),
+    primary: `${textVariants.link.default()} font-medium`,
+    secondary: textVariants.link.muted(),
     muted: "text-gray-500 dark:text-gray-500",
-    underline: "text-blue-600 dark:text-blue-400 underline"
+    underline: textVariants.link.default()
   };
   const handlePress = async () => {
     if (disabled) return;
@@ -5392,6 +5587,7 @@ const Link = ({
     }
   );
 };
+const { typography: typography$c } = designTokens;
 const Breadcrumb = ({
   items,
   separator = "/",
@@ -5401,9 +5597,9 @@ const Breadcrumb = ({
 }) => {
   const [isExpanded, setIsExpanded] = 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) {
@@ -5424,7 +5620,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
@@ -5462,7 +5658,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
         }
@@ -5510,6 +5706,7 @@ const Breadcrumb = ({
     }
   );
 };
+const { typography: typography$b } = designTokens;
 const Pagination = ({
   currentPage,
   totalPages,
@@ -5524,18 +5721,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];
@@ -5685,6 +5882,7 @@ const Pagination = ({
     }
   );
 };
+const { typography: typography$a } = designTokens;
 const SettingsList = ({
   settings,
   selectedSetting,
@@ -5717,7 +5915,7 @@ const SettingsList = ({
                 Text$1,
                 {
                   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,
@@ -5732,6 +5930,7 @@ const SettingsList = ({
     }
   );
 };
+const { typography: typography$9 } = designTokens;
 const NavigationList = ({
   items,
   selectedPath,
@@ -5773,15 +5972,34 @@ const NavigationList = ({
                 Text$1,
                 {
                   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(View, { className: "ml-2 px-2 py-0.5 bg-blue-100 dark:bg-blue-900 rounded-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { 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(View, { className: "ml-2 px-2 py-0.5 bg-blue-100 dark:bg-blue-900 rounded-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Text$1,
+                {
+                  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(Text$1, { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: item.description })
+            item.description && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Text$1,
+              {
+                className: cn(
+                  typography$9.size.xs,
+                  "text-gray-500 dark:text-gray-400 mt-0.5"
+                ),
+                children: item.description
+              }
+            )
           ] })
         ]
       },
@@ -5789,6 +6007,7 @@ const NavigationList = ({
     );
   }) });
 };
+const { typography: typography$8 } = designTokens;
 const Dropdown = ({
   trigger,
   items,
@@ -5881,7 +6100,7 @@ const Dropdown = ({
                       Text$1,
                       {
                         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
@@ -5951,7 +6170,7 @@ const AspectFitView = ({
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("flex-1", className), onLayout, children: size && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("items-center", innerClassName), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollView, { style: { width: innerWidth, height: innerHeight }, children }) }) });
 };
-const { typography } = designTokens;
+const { typography: typography$7 } = designTokens;
 const QuickActions = ({
   actions,
   orientation = "horizontal",
@@ -6015,7 +6234,7 @@ const QuickActions = ({
         accessibilityState: { disabled: action.disabled },
         children: [
           action.icon && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "w-5 h-5", children: action.icon }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(typography.weight.medium, styles2.text), children: action.label })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(typography$7.weight.medium, styles2.text), children: action.label })
         ]
       },
       action.id
@@ -6093,6 +6312,7 @@ const EmptyState = ({
     }
   );
 };
+const { typography: typography$6 } = designTokens;
 const Calendar = ({
   value,
   onChange,
@@ -6181,10 +6401,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(Text$1, { className: "text-lg text-gray-700 dark:text-gray-300", children: "‹" })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text$1,
+            {
+              className: cn(
+                typography$6.size.lg,
+                "text-gray-700 dark:text-gray-300"
+              ),
+              children: "‹"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Text$1,
+        {
+          className: cn(
+            typography$6.size.base,
+            typography$6.weight.semibold,
+            "text-gray-900 dark:text-white"
+          ),
+          children: monthYear
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-base font-semibold text-gray-900 dark:text-white", children: monthYear }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Pressable,
         {
@@ -6192,11 +6431,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(Text$1, { className: "text-lg text-gray-700 dark:text-gray-300", children: "›" })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text$1,
+            {
+              className: cn(
+                typography$6.size.lg,
+                "text-gray-700 dark:text-gray-300"
+              ),
+              children: "›"
+            }
+          )
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-row mb-2", children: weekDays.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-1 items-center py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: day }) }, day)) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-row mb-2", children: weekDays.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-1 items-center py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Text$1,
+      {
+        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(View, { className: "flex-row", children: week.map((date, dayIndex) => {
       if (!date) {
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -6233,9 +6491,9 @@ const Calendar = ({
             Text$1,
             {
               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()
             }
@@ -6263,18 +6521,40 @@ function DataList({
   };
   const renderHeader = () => {
     if (!showHeader) return null;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(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(
       View,
       {
         className: cn(
-          compact ? "px-3 py-2" : "px-4 py-3",
-          alignClasses[column.align || "left"]
+          "flex-row",
+          ui.table.thead,
+          "border-b border-gray-200 dark:border-gray-700"
         ),
-        style: { flex: column.flex || 1 },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { 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(
+          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(
+              Text$1,
+              {
+                className: cn(
+                  designTokens.typography.size.xs,
+                  designTokens.typography.weight.medium,
+                  "text-gray-700 dark:text-gray-300",
+                  designTokens.typography.transform.uppercase,
+                  designTokens.typography.tracking.wider
+                ),
+                children: column.label
+              }
+            )
+          },
+          column.key
+        ))
+      }
+    );
   };
   const renderRow = ({ item, index }) => {
     const isOdd = index % 2 === 1;
@@ -6284,7 +6564,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 && ui.table.trAlt,
           onRowPress && "active:bg-gray-100 dark:active:bg-gray-800"
         ),
         disabled: !onRowPress,
@@ -6301,7 +6581,10 @@ function DataList({
             children: column.render ? column.render(item, index) : /* @__PURE__ */ jsxRuntimeExports.jsx(
               Text$1,
               {
-                className: "text-sm text-gray-900 dark:text-white",
+                className: cn(
+                  designTokens.typography.size.sm,
+                  "text-gray-900 dark:text-white"
+                ),
                 numberOfLines: 1,
                 children: String(item[column.key] ?? "")
               }
@@ -6313,7 +6596,7 @@ function DataList({
     );
   };
   const renderEmpty = () => /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "py-8 items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-sm text-gray-500 dark:text-gray-400", children: emptyMessage }) });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: cn("bg-white dark:bg-gray-900", className), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: cn(ui.table.tr, className), children: [
     renderHeader(),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       FlatList,
@@ -6425,7 +6708,7 @@ const MultiSelect = ({
               value: searchQuery,
               onChangeText: setSearchQuery,
               placeholder: searchPlaceholder,
-              placeholderTextColor: "#9ca3af",
+              placeholderTextColor: 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"
             }
           ) }),
@@ -6589,6 +6872,7 @@ const ProgressCircle = ({
     }
   );
 };
+const { typography: typography$5 } = designTokens;
 const SideNav = ({ items, className }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("gap-1", className), accessibilityRole: "list", children: items.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Pressable,
@@ -6607,13 +6891,23 @@ const SideNav = ({ items, className }) => {
           Text$1,
           {
             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(View, { className: "px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xs text-gray-700 dark:text-gray-300", children: item.badge }) })
+        item.badge !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Text$1,
+          {
+            className: cn(
+              typography$5.size.xs,
+              "text-gray-700 dark:text-gray-300"
+            ),
+            children: item.badge
+          }
+        ) })
       ]
     },
     item.id
@@ -6637,7 +6931,7 @@ const SectionHeader = ({
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: title }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center gap-2", children: [
-          loading && /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityIndicator, { size: "small", color: "#2563eb" }),
+          loading && /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityIndicator, { size: "small", color: colors.raw.blue[600] }),
           actions,
           onAdd && /* @__PURE__ */ jsxRuntimeExports.jsx(
             Pressable,
@@ -6857,7 +7151,7 @@ const PhoneInput = ({
           value,
           onChangeText: handleInputChange,
           placeholder,
-          placeholderTextColor: "#9ca3af",
+          placeholderTextColor: colors.raw.neutral[400],
           keyboardType: "phone-pad",
           editable: !disabled,
           className: cn(
@@ -6890,7 +7184,7 @@ const PhoneInput = ({
               value: searchQuery,
               onChangeText: setSearchQuery,
               placeholder: "Search countries...",
-              placeholderTextColor: "#9ca3af",
+              placeholderTextColor: 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"
             }
           ) }),
@@ -7235,7 +7529,7 @@ const Combobox = ({
               value: searchQuery,
               onChangeText: setSearchQuery,
               placeholder: searchPlaceholder,
-              placeholderTextColor: "#9ca3af",
+              placeholderTextColor: 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"
             }
@@ -7498,6 +7792,32 @@ const AddressLink = ({
     ] })
   ] });
 };
+let _displayColors = null;
+function getDisplayColors() {
+  if (!_displayColors) _displayColors = buildDisplayColors();
+  return _displayColors;
+}
+function buildDisplayColors() {
+  const alert2 = 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",
@@ -7507,28 +7827,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: designTokens.typography.size.xs,
       padding: inline ? "px-1.5 py-0.5" : "px-2 py-1"
     },
     sm: {
-      text: "text-sm",
+      text: designTokens.typography.size.sm,
       padding: inline ? "px-2 py-0.5" : "px-3 py-1.5"
     },
     md: {
-      text: "text-base",
+      text: designTokens.typography.size.base,
       padding: inline ? "px-2.5 py-1" : "px-4 py-2"
     },
     lg: {
-      text: "text-lg",
+      text: designTokens.typography.size.lg,
       padding: inline ? "px-3 py-1" : "px-4 py-2"
     }
   };
@@ -7538,13 +7852,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(
       Text$1,
       {
         className: cn(
-          "font-mono rounded-lg",
+          `${designTokens.typography.family.mono} rounded-lg`,
           textColorClass,
           bgClass,
           sizeConfig2.text,
@@ -7559,7 +7875,7 @@ const CodeDisplay = ({
     Text$1,
     {
       className: cn(
-        "font-mono",
+        designTokens.typography.family.mono,
         textColorClass,
         sizeConfig2.text,
         !inline && alignClasses[align],
@@ -7887,7 +8203,7 @@ function InfiniteScroll({
   const defaultEmptyComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-1 justify-center items-center py-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-gray-500 dark:text-gray-400", children: "No items found" }) });
   const ListFooterComponent = useCallback(() => {
     const footerLoader = /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row justify-center items-center py-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityIndicator, { size: "small", color: "#3b82f6" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityIndicator, { size: "small", color: colors.raw.blue[500] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "ml-2 text-sm text-gray-600 dark:text-gray-400", children: "Loading..." })
     ] });
     const footerEndMessage = /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-row justify-center items-center py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-sm text-gray-600 dark:text-gray-400", children: "No more items to load" }) });
@@ -7955,9 +8271,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: textVariants.link.external(),
+    primary: `${textVariants.link.default()} font-semibold`,
+    muted: textVariants.link.muted()
   };
   const handlePress = useCallback(async () => {
     onPress == null ? void 0 : onPress();
@@ -8061,7 +8377,7 @@ const TextInputModal = ({
                   value,
                   onChangeText: setValue,
                   placeholder,
-                  placeholderTextColor: "#9ca3af",
+                  placeholderTextColor: colors.raw.neutral[400],
                   maxLength,
                   editable: !isLoading,
                   autoFocus: true,
@@ -8258,37 +8574,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 = 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: 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: 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: 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",
@@ -8296,23 +8629,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(
     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(Text$1, { className: cn(sizeStyles.text, chain.textColor), children: chain.emoji }),
-        showLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("font-medium", sizeStyles.text, chain.textColor), children: chain.label })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(sizeStyles.text, chainColors.text), children: meta.emoji }),
+        showLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Text$1,
+          {
+            className: cn(
+              designTokens.typography.weight.medium,
+              sizeStyles.text,
+              chainColors.text
+            ),
+            children: meta.label
+          }
+        )
       ]
     }
   );
@@ -8359,7 +8703,7 @@ const ListItemWithAction = ({
               ActivityIndicator,
               {
                 size: "small",
-                color: destructive ? "#dc2626" : "#6b7280"
+                color: destructive ? colors.raw.red[600] : colors.raw.neutral[500]
               }
             ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               actionIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "mr-1", children: actionIcon }),
@@ -8508,7 +8852,7 @@ const TransferList = ({
         value: searchValue,
         onChangeText: onSearchChange,
         placeholder: searchPlaceholder,
-        placeholderTextColor: "#9ca3af",
+        placeholderTextColor: 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"
       }
     ) }),
@@ -9013,6 +9357,26 @@ const Masonry = ({
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("flex-row", className), style: { gap }, children: columnArrays.map((column, columnIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-1", style: { gap }, children: column.map((item, itemIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(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 = 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",
@@ -9026,14 +9390,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",
@@ -9053,6 +9410,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 = 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",
@@ -9071,13 +9449,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(
     View,
@@ -9158,7 +9530,7 @@ const PageSectionHeader = ({
               }
             ),
             loading && /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityIndicator, { size: "small", color: "#3b82f6" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityIndicator, { size: "small", color: colors.raw.blue[500] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Text$1,
                 {
@@ -9210,6 +9582,7 @@ const styles = StyleSheet.create({
     // clipPath: 'inset(50%)', // Not supported in RN
   }
 });
+const { typography: typography$4 } = designTokens;
 const BreadcrumbNav = ({
   items,
   separator = "/",
@@ -9222,14 +9595,42 @@ const BreadcrumbNav = ({
       accessibilityRole: "none",
       accessibilityLabel: "Breadcrumb navigation",
       children: items.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
-        index > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-gray-400 dark:text-gray-600 text-sm", children: typeof separator === "string" ? separator : separator }),
-        index === items.length - 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-gray-900 dark:text-white font-medium text-sm", children: item.label }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        index > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Text$1,
+          {
+            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(
+          Text$1,
+          {
+            className: cn(
+              "text-gray-900 dark:text-white",
+              typography$4.weight.medium,
+              typography$4.size.sm
+            ),
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           Pressable,
           {
             onPress: item.onPress,
             accessibilityRole: "link",
             accessibilityLabel: item.label,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-blue-600 dark:text-blue-400 text-sm", children: item.label })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Text$1,
+              {
+                className: cn(
+                  "text-blue-600 dark:text-blue-400",
+                  typography$4.size.sm
+                ),
+                children: item.label
+              }
+            )
           }
         )
       ] }, index))
@@ -9308,7 +9709,8 @@ function Table({
           View,
           {
             className: cn(
-              "flex-row bg-gray-50 dark:bg-gray-800",
+              "flex-row",
+              ui.table.thead,
               "border-b border-gray-200 dark:border-gray-700"
             ),
             children: columns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -9331,7 +9733,19 @@ function Table({
                       alignClasses[column.align || "left"]
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: column.label }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Text$1,
+                        {
+                          className: cn(
+                            designTokens.typography.size.xs,
+                            designTokens.typography.weight.medium,
+                            "text-gray-700 dark:text-gray-300",
+                            designTokens.typography.transform.uppercase,
+                            designTokens.typography.tracking.wider
+                          ),
+                          children: column.label
+                        }
+                      ),
                       column.sortable && (sort == null ? void 0 : sort.column) === column.key && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xs text-gray-500", children: sort.direction === "asc" ? "↑" : "↓" })
                     ]
                   }
@@ -9341,7 +9755,7 @@ function Table({
             ))
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "bg-white dark:bg-gray-900", children: data.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "px-4 py-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-center text-sm text-gray-500 dark:text-gray-400", children: emptyMessage }) }) : data.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: ui.table.tr, children: data.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "px-4 py-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-center text-sm text-gray-500 dark:text-gray-400", children: emptyMessage }) }) : data.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           Pressable,
           {
             onPress: () => onRowPress == null ? void 0 : onRowPress(row, rowIndex),
@@ -9349,7 +9763,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 && ui.table.trAlt
             ),
             accessibilityRole: "button",
             children: columns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -9361,7 +9775,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(Text$1, { className: "text-sm text-gray-900 dark:text-white", children: String(row[column.key] ?? "") })
+                children: column.render ? column.render(row, rowIndex) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Text$1,
+                  {
+                    className: cn(
+                      designTokens.typography.size.sm,
+                      "text-gray-900 dark:text-white"
+                    ),
+                    children: String(row[column.key] ?? "")
+                  }
+                )
               },
               column.key
             ))
@@ -9456,7 +9879,7 @@ const Command = ({
                           value: searchQuery,
                           onChangeText: setSearchQuery,
                           placeholder,
-                          placeholderTextColor: "#9ca3af",
+                          placeholderTextColor: colors.raw.neutral[400],
                           className: "flex-1 text-gray-900 dark:text-white text-base",
                           autoCapitalize: "none",
                           autoCorrect: false,
@@ -9682,6 +10105,7 @@ const StandardPageLayout = ({
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("flex-1", backgroundClassName), children: /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("flex-1", contentClassName), children }) });
 };
+const { typography: typography$3 } = designTokens;
 const StepList = ({
   items,
   type = "ordered",
@@ -9692,10 +10116,30 @@ const StepList = ({
   const renderStepNumber = (index) => {
     if (type === "ordered") {
       if (variant === "enhanced") {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "w-6 h-6 bg-blue-600 rounded-full items-center justify-center mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-white text-sm font-medium", children: index + 1 }) });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "w-6 h-6 bg-blue-600 rounded-full items-center justify-center mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Text$1,
+          {
+            className: cn(
+              "text-white",
+              typography$3.size.sm,
+              typography$3.weight.medium
+            ),
+            children: index + 1
+          }
+        ) });
       }
       if (variant === "minimal") {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(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(Text$1, { className: "text-blue-600 dark:text-blue-400 text-sm font-medium", children: index + 1 }) });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(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(
+          Text$1,
+          {
+            className: cn(
+              "text-blue-600 dark:text-blue-400",
+              typography$3.size.sm,
+              typography$3.weight.medium
+            ),
+            children: index + 1
+          }
+        ) });
       }
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(Text$1, { className: "text-gray-600 dark:text-gray-400 mr-2", children: [
         index + 1,
@@ -9726,7 +10170,16 @@ const StepList = ({
             typeof content === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-gray-600 dark:text-gray-400", children: content }) : content,
             subItems && subItems.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "mt-2 ml-4 gap-1", children: subItems.map((subItem, subIndex) => /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-gray-500 dark:text-gray-500 mr-2", children: "•" }),
-              typeof subItem === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-sm text-gray-500 dark:text-gray-500 flex-1", children: subItem }) : subItem
+              typeof subItem === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Text$1,
+                {
+                  className: cn(
+                    typography$3.size.sm,
+                    "text-gray-500 dark:text-gray-500 flex-1"
+                  ),
+                  children: subItem
+                }
+              ) : subItem
             ] }, subIndex)) })
           ] })
         ]
@@ -9762,51 +10215,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(
@@ -9819,8 +10295,28 @@ const FeatureCard = ({
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: colorClasses2[color], children: icon })
       }
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("mb-4", colorClasses2[color]), children: icon }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xl font-semibold text-gray-900 dark:text-white mb-3", children: title }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-gray-600 dark:text-gray-300 mb-4 leading-relaxed", children: description }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Text$1,
+      {
+        className: cn(
+          designTokens.typography.size.xl,
+          designTokens.typography.weight.semibold,
+          "text-gray-900 dark:text-white mb-3"
+        ),
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Text$1,
+      {
+        className: cn(
+          designTokens.typography.size.base,
+          designTokens.typography.leading.relaxed,
+          "text-gray-600 dark:text-gray-300 mb-4"
+        ),
+        children: description
+      }
+    ),
     cta && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "mt-3 mb-4", children: cta }),
     benefits && benefits.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "gap-2 mb-4", children: benefits.map((benefit, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-start", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -9832,15 +10328,44 @@ const FeatureCard = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "flex-1 text-sm text-gray-600 dark:text-gray-400", children: benefit })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Text$1,
+        {
+          className: cn(
+            "flex-1",
+            designTokens.typography.size.sm,
+            "text-gray-600 dark:text-gray-400"
+          ),
+          children: benefit
+        }
+      )
     ] }, index)) }),
     metrics && Object.keys(metrics).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-row flex-wrap gap-4 mt-4", children: Object.entries(metrics).map(([key, value], index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       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(Text$1, { className: cn("text-lg font-bold", colorClasses2[color]), children: value }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: key })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text$1,
+            {
+              className: cn(
+                designTokens.typography.size.lg,
+                designTokens.typography.weight.bold,
+                colorClasses2[color]
+              ),
+              children: value
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text$1,
+            {
+              className: cn(
+                designTokens.typography.size.xs,
+                "text-gray-500 dark:text-gray-400 mt-1"
+              ),
+              children: key
+            }
+          )
         ]
       },
       index
@@ -9886,10 +10411,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: `${colors.component.badge.success.base} ${colors.component.badge.success.dark}`,
+    info: `${colors.component.badge.primary.base} ${colors.component.badge.primary.dark}`,
+    warning: `${colors.component.badge.attention.base} ${colors.component.badge.attention.dark}`,
+    default: `${colors.component.badge.default.base} ${colors.component.badge.default.dark}`
   };
   const renderFeature = (feature, index) => {
     const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -9897,7 +10422,7 @@ const FeatureGrid = ({
       {
         className: cn(
           "items-center",
-          cardVariant === "card" && "bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg",
+          cardVariant === "card" && `${getCardVariantColors("elevated")} rounded-2xl p-6`,
           cardVariant === "minimal" && "gap-4"
         ),
         children: [
@@ -9981,14 +10506,14 @@ const CTASection = ({
     lg: "py-16 px-8"
   };
   const titleSizeClasses = {
-    sm: "text-2xl",
-    md: "text-3xl",
-    lg: "text-4xl"
+    sm: designTokens.typography.size["2xl"],
+    md: designTokens.typography.size["3xl"],
+    lg: designTokens.typography.size["4xl"]
   };
   const descriptionSizeClasses = {
-    sm: "text-base",
-    md: "text-lg",
-    lg: "text-xl"
+    sm: designTokens.typography.size.base,
+    md: designTokens.typography.size.lg,
+    lg: designTokens.typography.size.xl
   };
   const textColorClass = textColor === "light" ? "text-white" : "text-gray-900";
   const renderButton = (button, isPrimary) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -10068,8 +10593,10 @@ const PromotionalBanner = ({
     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
+        colors.component.alert.success.base,
+        colors.component.alert.success.dark,
+        "border-b",
         isProminent && "border-b-2",
         className
       ),
@@ -10120,6 +10647,7 @@ const PromotionalBanner = ({
     }
   );
 };
+const { typography: typography$2 } = designTokens;
 if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }
@@ -10169,7 +10697,8 @@ const CollapsibleSection = ({
             Text$1,
             {
               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
@@ -10184,7 +10713,7 @@ const CollapsibleSection = ({
           className: "p-2 rounded-md",
           accessibilityRole: "button",
           accessibilityLabel: isExpanded ? "Collapse" : "Expand",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Animated.View, { style: { transform: [{ rotate: rotation }] }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-gray-500 text-lg", children: "›" }) })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Animated.View, { style: { transform: [{ rotate: rotation }] }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("text-gray-500", typography$2.size.lg), children: "›" }) })
         }
       )
     ] }),
@@ -10204,7 +10733,7 @@ const CollapsibleSection = ({
             Text$1,
             {
               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
@@ -10215,6 +10744,19 @@ const CollapsibleSection = ({
     ] }, subsection.id)) })
   ] });
 };
+let _cardColors = null;
+function getDashboardCardColors() {
+  if (!_cardColors) {
+    _cardColors = {
+      default: getCardVariantColors("default"),
+      primary: getCardVariantColors("info"),
+      success: getCardVariantColors("success"),
+      warning: getCardVariantColors("warning"),
+      danger: getCardVariantColors("error")
+    };
+  }
+  return _cardColors;
+}
 const DashboardStatCard = ({
   title,
   value,
@@ -10224,13 +10766,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(
     View,
@@ -10242,16 +10778,29 @@ const DashboardStatCard = ({
       ),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-start justify-between mb-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-sm font-medium text-gray-600 dark:text-gray-400", children: title }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text$1,
+            {
+              className: `${designTokens.typography.size.sm} ${designTokens.typography.weight.medium} text-gray-600 dark:text-gray-400`,
+              children: title
+            }
+          ),
           icon && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "text-gray-400 dark:text-gray-600", children: icon })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-3xl font-bold text-gray-900 dark:text-white", children: value }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Text$1,
+          {
+            className: `${designTokens.typography.size["3xl"]} ${designTokens.typography.weight.bold} text-gray-900 dark:text-white`,
+            children: value
+          }
+        ),
         change !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center gap-1 mt-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             Text$1,
             {
               className: cn(
-                "text-sm font-medium",
+                designTokens.typography.size.sm,
+                designTokens.typography.weight.medium,
                 isPositive ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"
               ),
               children: [
@@ -10262,37 +10811,40 @@ const DashboardStatCard = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xs text-gray-500 dark:text-gray-400", children: changePeriod })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text$1,
+            {
+              className: `${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 = 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: {
@@ -10304,11 +10856,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: designTokens.typography.size.xl,
+      label: designTokens.typography.size.xs
+    },
+    md: {
+      value: designTokens.typography.size["2xl"],
+      label: designTokens.typography.size.sm
+    },
+    lg: {
+      value: designTokens.typography.size["3xl"],
+      label: designTokens.typography.size.base
+    },
+    xl: {
+      value: designTokens.typography.size["4xl"],
+      label: designTokens.typography.size.lg
+    }
   };
   const alignClasses = {
     left: "items-start",
@@ -10332,7 +10908,11 @@ const StatDisplay = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               Text$1,
               {
-                className: cn("font-bold", sizeConfig2.value, variantConfig2.value),
+                className: cn(
+                  designTokens.typography.weight.bold,
+                  sizeConfig2.value,
+                  variantConfig2.value
+                ),
                 children: value
               }
             ),
@@ -10344,10 +10924,21 @@ const StatDisplay = ({
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: cn(alignClasses[align], className), children: [
     icon && iconPosition === "top" && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("mb-2", variantConfig2.value), children: icon }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("font-bold", sizeConfig2.value, variantConfig2.value), children: value }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Text$1,
+      {
+        className: cn(
+          designTokens.typography.weight.bold,
+          sizeConfig2.value,
+          variantConfig2.value
+        ),
+        children: value
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(sizeConfig2.label, variantConfig2.label), children: label })
   ] });
 };
+const { typography: typography$1 } = designTokens;
 const KeyValuePair = ({
   label,
   value,
@@ -10361,9 +10952,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,
@@ -10379,12 +10974,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];
@@ -10422,6 +11017,7 @@ const KeyValuePair = ({
     }
   );
 };
+const { typography } = designTokens;
 const SmartLink = ({
   to,
   href,
@@ -10442,9 +11038,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;