@sudobility/components-rn 1.0.41 → 1.0.43

package/dist/index.cjs.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const clsx = require("clsx");
 const React = require("react");
 const reactNative = require("react-native");
-const classVarianceAuthority = require("class-variance-authority");
 const design = require("@sudobility/design");
+const classVarianceAuthority = require("class-variance-authority");
 const reactNativeSafeAreaContext = require("react-native-safe-area-context");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -1371,34 +1371,42 @@ logger.withContext("API");
 logger.withContext("CONTRACT");
 logger.withContext("ENS");
 logger.withContext("STORAGE");
+const alert$1 = design.colors.component.alert;
+function splitAlertClasses$2(base, dark) {
+  const all = `${base} ${dark}`.split(" ");
+  return {
+    container: all.filter((c) => c.includes("bg-") || c.includes("border-")).join(" "),
+    text: all.filter((c) => c.includes("text-")).join(" ")
+  };
+}
+const dsInfo$1 = splitAlertClasses$2(alert$1.info.base, alert$1.info.dark);
+const dsSuccess$1 = splitAlertClasses$2(alert$1.success.base, alert$1.success.dark);
+const dsWarning$1 = splitAlertClasses$2(alert$1.warning.base, alert$1.warning.dark);
+const dsError$1 = splitAlertClasses$2(alert$1.error.base, alert$1.error.dark);
 const variantConfig = {
   [InfoType.INFO]: {
     icon: "ℹ",
-    container: "bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800",
-    iconColor: "text-blue-600 dark:text-blue-400",
-    titleColor: "text-blue-900 dark:text-blue-100",
-    descriptionColor: "text-blue-700 dark:text-blue-300"
+    container: dsInfo$1.container,
+    iconColor: alert$1.info.icon,
+    textColor: dsInfo$1.text
   },
   [InfoType.SUCCESS]: {
     icon: "✓",
-    container: "bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800",
-    iconColor: "text-green-600 dark:text-green-400",
-    titleColor: "text-green-900 dark:text-green-100",
-    descriptionColor: "text-green-700 dark:text-green-300"
+    container: dsSuccess$1.container,
+    iconColor: alert$1.success.icon,
+    textColor: dsSuccess$1.text
   },
   [InfoType.WARNING]: {
     icon: "⚠",
-    container: "bg-yellow-50 dark:bg-amber-950 border-yellow-200 dark:border-amber-800",
-    iconColor: "text-yellow-600 dark:text-amber-400",
-    titleColor: "text-yellow-900 dark:text-amber-100",
-    descriptionColor: "text-yellow-700 dark:text-amber-300"
+    container: dsWarning$1.container,
+    iconColor: alert$1.warning.icon,
+    textColor: dsWarning$1.text
   },
   [InfoType.ERROR]: {
     icon: "✗",
-    container: "bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800",
-    iconColor: "text-red-600 dark:text-red-400",
-    titleColor: "text-red-900 dark:text-red-100",
-    descriptionColor: "text-red-700 dark:text-red-300"
+    container: dsError$1.container,
+    iconColor: alert$1.error.icon,
+    textColor: dsError$1.text
   }
 };
 const Banner = ({
@@ -1495,8 +1503,8 @@ const Banner = ({
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-shrink-0 mt-0.5", children: icon || /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn("text-lg", config.iconColor), children: config.icon }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn("font-semibold", config.titleColor), children: title }),
-              description ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn("text-sm mt-1", config.descriptionColor), children: description }) : null
+              /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn("font-semibold", config.textColor), children: title }),
+              description ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn("text-sm mt-1", config.textColor), children: description }) : null
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               reactNative.Pressable,
@@ -1648,7 +1656,7 @@ const Button = React__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
-const calloutStyle = "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800";
+const calloutStyle = design.getCardVariantColors("info");
 const paddingStyles = {
   none: "",
   sm: "p-3",
@@ -1725,6 +1733,9 @@ const CardFooter = ({
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: cn("flex-row items-center pt-4", className), ...props, children });
 };
+const inputFocusClass = "border-blue-500 dark:border-blue-400";
+const inputErrorClass = "border-red-500 dark:border-red-400";
+const inputDisabledClass = "opacity-50 bg-gray-100 dark:bg-gray-800";
 const Input = React__namespace.forwardRef(
   ({ className, error, disabled, editable, onFocus, onBlur, ...props }, ref) => {
     const [isFocused, setIsFocused] = React__namespace.useState(false);
@@ -1743,9 +1754,9 @@ const Input = React__namespace.forwardRef(
         ref,
         className: cn(
           design.variants.input.default(),
-          isFocused && "border-blue-500 dark:border-blue-400",
-          error && "border-red-500 dark:border-red-400",
-          disabled && "opacity-50 bg-gray-100 dark:bg-gray-800",
+          isFocused && inputFocusClass,
+          error && inputErrorClass,
+          disabled && inputDisabledClass,
           className
         ),
         editable: isEditable,
@@ -1767,15 +1778,11 @@ const sizeMap = {
   extraLarge: "large"
 };
 const colorMap = {
-  default: "#2563eb",
-  // blue-600
-  white: "#ffffff",
-  success: "#16a34a",
-  // green-600
-  warning: "#ea580c",
-  // orange-600
-  error: "#dc2626"
-  // red-600
+  default: design.colors.raw.blue[600],
+  white: design.colors.raw.neutral[0],
+  success: design.colors.raw.green[600],
+  warning: design.colors.raw.orange[600],
+  error: design.colors.raw.red[600]
 };
 const Spinner = ({
   size = "default",
@@ -1797,7 +1804,7 @@ const Spinner = ({
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: activitySize, color }),
-        showText && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "mt-2 text-gray-600 dark:text-gray-400 text-sm", children: loadingText })
+        showText && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(design.textVariants.body.sm(), "mt-2"), children: loadingText })
       ]
     }
   );
@@ -1809,8 +1816,8 @@ const defaultIcons = {
   attention: "🔔",
   error: "✕"
 };
-const AlertTitle = ({ children, className }) => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn("font-medium mb-1", className), children });
-const AlertDescription = ({ children, className }) => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn("text-sm", className), children });
+const AlertTitle = ({ children, className }) => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(design.textVariants.label.default(), "mb-1", className), children });
+const AlertDescription = ({ children, className }) => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(design.textVariants.body.sm(), className), children });
 const Alert = ({
   variant = "info",
   title,
@@ -1831,8 +1838,8 @@ const Alert = ({
       children: [
         IconComponent && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "flex-shrink-0", children: IconComponent }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "font-medium mb-1", children: title }),
-          description && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm", children: description }),
+          title && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(design.textVariants.label.default(), "mb-1"), children: title }),
+          description && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: design.textVariants.body.sm(), children: description }),
           children
         ] })
       ]
@@ -2077,6 +2084,11 @@ const Stack = ({
 };
 const VStack = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { direction: "vertical", ...props });
 const HStack = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { direction: "horizontal", ...props });
+const lineVariantClasses = {
+  light: "bg-gray-200 dark:bg-gray-700",
+  medium: "bg-gray-300 dark:bg-gray-600",
+  dark: "bg-gray-400 dark:bg-gray-500"
+};
 const Divider = ({
   label,
   labelPosition = "center",
@@ -2109,18 +2121,13 @@ const Divider = ({
     medium: 2,
     thick: 4
   };
-  const variantClasses = {
-    light: "bg-gray-200 dark:bg-gray-700",
-    medium: "bg-gray-300 dark:bg-gray-600",
-    dark: "bg-gray-400 dark:bg-gray-500"
-  };
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       reactNative.View,
       {
         className: cn(
           "self-stretch",
-          variantClasses[variant],
+          lineVariantClasses[variant],
           spacingClasses.vertical[spacing],
           className
         ),
@@ -2136,7 +2143,7 @@ const Divider = ({
       {
         className: cn(
           "w-full",
-          variantClasses[variant],
+          lineVariantClasses[variant],
           spacingClasses.horizontal[spacing],
           lineClassName,
           className
@@ -2167,24 +2174,15 @@ const Divider = ({
         labelPosition !== "left" && /* @__PURE__ */ jsxRuntimeExports.jsx(
           reactNative.View,
           {
-            className: cn("flex-1", variantClasses[variant], lineClassName),
+            className: cn("flex-1", lineVariantClasses[variant], lineClassName),
             style: { height: thicknessValues[thickness] }
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          reactNative.Text,
-          {
-            className: cn(
-              design.textVariants.body.sm(),
-              "px-3 text-gray-500 dark:text-gray-400"
-            ),
-            children: label
-          }
-        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(design.textVariants.caption.default(), "px-3"), children: label }),
         labelPosition !== "right" && /* @__PURE__ */ jsxRuntimeExports.jsx(
           reactNative.View,
           {
-            className: cn("flex-1", variantClasses[variant], lineClassName),
+            className: cn("flex-1", lineVariantClasses[variant], lineClassName),
             style: { height: thicknessValues[thickness] }
           }
         )
@@ -2422,7 +2420,7 @@ const Label = React__namespace.forwardRef(
         ...props,
         children: [
           children,
-          required && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-red-500 ml-1", children: "*" })
+          required && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-red-600 dark:text-red-400 ml-1", children: "*" })
         ]
       }
     );
@@ -2479,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
@@ -2501,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,
@@ -2524,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];
   };
@@ -2617,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(
@@ -2713,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",
@@ -2722,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: "⚠"
     }
   };
@@ -2744,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,
@@ -2782,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
           }
@@ -2812,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,
@@ -2832,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(
@@ -2969,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
@@ -2981,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",
@@ -3002,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
@@ -3015,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
@@ -3024,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: {
@@ -3130,7 +3179,7 @@ const SearchInput = ({
           disabled && "opacity-50",
           loading && "opacity-60"
         ),
-        placeholderTextColor: "#9CA3AF",
+        placeholderTextColor: design.colors.raw.neutral[400],
         accessibilityRole: "search",
         accessibilityState: { disabled },
         ...textInputProps
@@ -3147,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 = ({
@@ -3351,6 +3400,15 @@ const NumberInput = ({
     }
   );
 };
+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",
+  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"
+};
 const Text = ({
   children,
   size = "base",
@@ -3361,51 +3419,15 @@ const Text = ({
   numberOfLines,
   className
 }) => {
-  const sizeClasses = {
-    xs: "text-xs",
-    sm: "text-sm",
-    base: "text-base",
-    lg: "text-lg",
-    xl: "text-xl",
-    "2xl": "text-2xl",
-    "3xl": "text-3xl",
-    "4xl": "text-4xl"
-  };
-  const weightClasses = {
-    light: "font-light",
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold"
-  };
-  const colorClasses = {
-    default: "text-gray-900 dark:text-gray-100",
-    muted: "text-gray-600 dark:text-gray-400",
-    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"
-  };
-  const alignClasses = align ? {
-    left: "text-left",
-    center: "text-center",
-    right: "text-right"
-  }[align] : "";
-  const transformClasses = {
-    none: "",
-    uppercase: "uppercase",
-    lowercase: "lowercase",
-    capitalize: "capitalize"
-  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     reactNative.Text,
     {
       className: cn(
-        sizeClasses[size],
-        weightClasses[weight],
-        colorClasses[color],
-        alignClasses,
-        transformClasses[transform],
+        typography$g.size[size],
+        typography$g.weight[weight],
+        colorClasses$1[color],
+        align ? typography$g.align[align] : "",
+        transform !== "none" ? typography$g.transform[transform] : "",
         className
       ),
       numberOfLines,
@@ -3413,6 +3435,12 @@ const Text = ({
     }
   );
 };
+const { typography: typography$f } = design.designTokens;
+const colorClasses = {
+  default: "text-gray-900 dark:text-gray-100",
+  muted: "text-gray-700 dark:text-gray-300",
+  primary: "text-blue-600 dark:text-blue-400"
+};
 const Heading = ({
   children,
   level = 2,
@@ -3431,39 +3459,16 @@ const Heading = ({
     6: "base"
   };
   const actualSize = size || defaultSizes[level];
-  const sizeClasses = {
-    "4xl": "text-4xl",
-    "3xl": "text-3xl",
-    "2xl": "text-2xl",
-    xl: "text-xl",
-    lg: "text-lg",
-    base: "text-base"
-  };
-  const weightClasses = {
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold",
-    extrabold: "font-extrabold"
-  };
-  const colorClasses = {
-    default: "text-gray-900 dark:text-gray-100",
-    muted: "text-gray-700 dark:text-gray-300",
-    primary: "text-blue-600 dark:text-blue-400"
-  };
-  const alignClasses = align ? {
-    left: "text-left",
-    center: "text-center",
-    right: "text-right"
-  }[align] : "";
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     reactNative.Text,
     {
       className: cn(
-        sizeClasses[actualSize],
-        weightClasses[weight],
+        typography$f.size[actualSize],
+        typography$f.weight[weight],
+        typography$f.leading.heading,
+        typography$f.tracking.heading,
         colorClasses[color],
-        alignClasses,
+        align ? typography$f.align[align] : "",
         className
       ),
       accessibilityRole: "header",
@@ -3471,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",
@@ -3478,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,
     {
@@ -3508,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
         }
@@ -3567,6 +3600,28 @@ const AppVersion = ({
     }
   );
 };
+function splitBadgeClasses$1(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 _badgeColors = null;
+function getBadgeColors() {
+  if (!_badgeColors) _badgeColors = buildBadgeColors();
+  return _badgeColors;
+}
+function buildBadgeColors() {
+  const badge = design.colors.component.badge;
+  return {
+    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 = ({
   children,
   variant = "default",
@@ -3582,29 +3637,30 @@ const Badge = ({
   maxCount,
   className
 }) => {
+  const ds = getBadgeColors();
   const variantClasses = {
-    default: "bg-gray-100 dark:bg-gray-700",
-    primary: "bg-blue-100 dark:bg-blue-900/30",
-    success: "bg-green-100 dark:bg-green-900/30",
-    warning: "bg-yellow-100 dark:bg-yellow-900/30",
-    danger: "bg-red-100 dark:bg-red-900/30",
-    info: "bg-blue-100 dark:bg-blue-900/30",
+    default: ds.default.bg,
+    primary: ds.primary.bg,
+    success: ds.success.bg,
+    warning: ds.warning.bg,
+    danger: ds.error.bg,
+    info: ds.primary.bg,
     purple: "bg-purple-100 dark:bg-purple-900/30"
   };
   const variantTextClasses = {
-    default: "text-gray-800 dark:text-gray-300",
-    primary: "text-blue-800 dark:text-blue-400",
-    success: "text-green-800 dark:text-green-400",
-    warning: "text-yellow-800 dark:text-yellow-400",
-    danger: "text-red-800 dark:text-red-400",
-    info: "text-blue-800 dark:text-blue-400",
+    default: ds.default.text,
+    primary: ds.primary.text,
+    success: ds.success.text,
+    warning: ds.warning.text,
+    danger: ds.error.text,
+    info: ds.primary.text,
     purple: "text-purple-800 dark:text-purple-400"
   };
   const outlineClasses = {
     default: "border border-gray-300 dark:border-gray-600",
     primary: "border border-blue-600 dark:border-blue-400",
     success: "border border-green-600 dark:border-green-400",
-    warning: "border border-yellow-600 dark:border-yellow-400",
+    warning: "border border-orange-600 dark:border-orange-400",
     danger: "border border-red-600 dark:border-red-400",
     info: "border border-blue-600 dark:border-blue-400",
     purple: "border border-purple-600 dark:border-purple-400"
@@ -3613,7 +3669,7 @@ const Badge = ({
     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",
+    warning: "text-orange-600 dark:text-orange-400",
     danger: "text-red-600 dark:text-red-400",
     info: "text-blue-600 dark:text-blue-400",
     purple: "text-purple-600 dark:text-purple-400"
@@ -3623,16 +3679,11 @@ const Badge = ({
     md: "px-2.5 py-1",
     lg: "px-3 py-1.5"
   };
-  const textSizeClasses = {
-    sm: "text-xs",
-    md: "text-sm",
-    lg: "text-base"
-  };
   const dotColorClasses = {
     default: "bg-gray-600 dark:bg-gray-400",
     primary: "bg-blue-600 dark:bg-blue-400",
     success: "bg-green-600 dark:bg-green-400",
-    warning: "bg-yellow-600 dark:bg-yellow-400",
+    warning: "bg-orange-600 dark:bg-orange-400",
     danger: "bg-red-600 dark:bg-red-400",
     info: "bg-blue-600 dark:bg-blue-400",
     purple: "bg-purple-600 dark:bg-purple-400"
@@ -3645,9 +3696,15 @@ const Badge = ({
     pill ? "rounded-full" : "rounded",
     className
   );
+  const { typography: typography2 } = design.designTokens;
+  const textSizeMap = {
+    sm: typography2.size.xs,
+    md: typography2.size.sm,
+    lg: typography2.size.base
+  };
   const textClasses = cn(
-    textSizeClasses[size],
-    "font-medium",
+    textSizeMap[size],
+    typography2.weight.medium,
     outline ? outlineTextClasses[variant] : variantTextClasses[variant]
   );
   const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -3720,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+/);
@@ -4056,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 = {
@@ -4123,6 +4184,19 @@ const FormattedNumber = ({
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(className), children: formatNumber() });
 };
+const alert = design.colors.component.alert;
+function splitAlertClasses$1(base, dark) {
+  const all = `${base} ${dark}`.split(" ");
+  return {
+    bg: all.filter((c) => c.includes("bg-")).join(" "),
+    border: all.filter((c) => c.includes("border-")).join(" "),
+    text: all.filter((c) => c.includes("text-")).join(" ")
+  };
+}
+const dsInfo = splitAlertClasses$1(alert.info.base, alert.info.dark);
+const dsSuccess = splitAlertClasses$1(alert.success.base, alert.success.dark);
+const dsWarning = splitAlertClasses$1(alert.warning.base, alert.warning.dark);
+const dsError = splitAlertClasses$1(alert.error.base, alert.error.dark);
 const InfoBox = ({
   children,
   title,
@@ -4134,28 +4208,28 @@ const InfoBox = ({
 }) => {
   const variantClasses = {
     info: {
-      bg: "bg-blue-50 dark:bg-blue-900/20",
-      border: "border-blue-200 dark:border-blue-800",
-      title: "text-blue-900 dark:text-blue-300",
-      text: "text-blue-800 dark:text-blue-400"
+      bg: dsInfo.bg,
+      border: dsInfo.border,
+      title: dsInfo.text,
+      text: dsInfo.text
     },
     success: {
-      bg: "bg-green-50 dark:bg-green-900/20",
-      border: "border-green-200 dark:border-green-800",
-      title: "text-green-900 dark:text-green-300",
-      text: "text-green-800 dark:text-green-400"
+      bg: dsSuccess.bg,
+      border: dsSuccess.border,
+      title: dsSuccess.text,
+      text: dsSuccess.text
     },
     warning: {
-      bg: "bg-yellow-50 dark:bg-yellow-900/20",
-      border: "border-yellow-200 dark:border-yellow-800",
-      title: "text-yellow-900 dark:text-yellow-300",
-      text: "text-yellow-800 dark:text-yellow-400"
+      bg: dsWarning.bg,
+      border: dsWarning.border,
+      title: dsWarning.text,
+      text: dsWarning.text
     },
     danger: {
-      bg: "bg-red-50 dark:bg-red-900/20",
-      border: "border-red-200 dark:border-red-800",
-      title: "text-red-900 dark:text-red-300",
-      text: "text-red-800 dark:text-red-400"
+      bg: dsError.bg,
+      border: dsError.border,
+      title: dsError.text,
+      text: dsError.text
     },
     neutral: {
       bg: "bg-gray-50 dark:bg-gray-800",
@@ -4190,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,
@@ -4220,11 +4323,12 @@ const Progress = ({
     }
   }, [indeterminate, animatedValue]);
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
-  const colorClasses = {
-    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"
+  const allColors = getProgressColors();
+  const colorClasses2 = {
+    default: allColors.default,
+    success: allColors.success,
+    warning: allColors.warning,
+    danger: allColors.danger
   };
   const sizeClasses = {
     sm: "h-1",
@@ -4252,19 +4356,25 @@ const Progress = ({
         children: indeterminate ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           reactNative.Animated.View,
           {
-            className: cn("h-full rounded-full", colorClasses[variant]),
+            className: cn("h-full rounded-full", colorClasses2[variant]),
             style: { width: interpolatedWidth, opacity: 0.7 }
           }
         ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           reactNative.View,
           {
-            className: cn("h-full rounded-full", colorClasses[variant]),
+            className: cn("h-full rounded-full", colorClasses2[variant]),
             style: { width: `${percentage}%` }
           }
         )
       }
     ),
-    (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 = ({
@@ -4280,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",
@@ -4316,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,
@@ -4369,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,
                         {
@@ -4377,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: "✕"
+                            }
+                          )
                         }
                       )
                     ] }),
@@ -4422,6 +4559,26 @@ const ModalFooter = ({
     children
   }
 );
+function splitAlertClasses(base, dark) {
+  const all = `${base} ${dark}`.split(" ");
+  return {
+    container: all.filter((c) => c.includes("bg-") || c.includes("border-")).join(" "),
+    icon: all.filter((c) => c.includes("text-")).join(" ")
+  };
+}
+let _alertColors = null;
+function getAlertColors() {
+  if (!_alertColors) {
+    const alert2 = design.colors.component.alert;
+    _alertColors = {
+      success: splitAlertClasses(alert2.success.base, alert2.success.dark),
+      error: splitAlertClasses(alert2.error.base, alert2.error.dark),
+      warning: splitAlertClasses(alert2.warning.base, alert2.warning.dark),
+      info: splitAlertClasses(alert2.info.base, alert2.info.dark)
+    };
+  }
+  return _alertColors;
+}
 const ToastContext = React.createContext(void 0);
 const useToast = () => {
   const context = React.useContext(ToastContext);
@@ -4440,19 +4597,21 @@ const Toast = ({ toast, onRemove }) => {
       friction: 8
     }).start();
   }, [slideAnim]);
+  const ac = getAlertColors();
   const variantBgClasses = {
     default: "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700",
-    success: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800",
-    error: "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800",
-    warning: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800",
-    info: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800"
+    success: ac.success.container,
+    error: ac.error.container,
+    warning: ac.warning.container,
+    info: ac.info.container
   };
+  const alert2 = design.colors.component.alert;
   const iconColorClasses = {
     default: "text-gray-600 dark:text-gray-400",
-    success: "text-green-600 dark:text-green-400",
-    error: "text-red-600 dark:text-red-400",
-    warning: "text-yellow-600 dark:text-yellow-400",
-    info: "text-blue-600 dark:text-blue-400"
+    success: alert2.success.icon,
+    error: alert2.error.icon,
+    warning: alert2.warning.icon,
+    info: alert2.info.icon
   };
   const icons = {
     default: "ℹ",
@@ -4473,8 +4632,17 @@ const Toast = ({ toast, onRemove }) => {
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: cn("flex-shrink-0", iconColorClasses[variant]), children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-lg", children: icons[variant] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "flex-1 min-w-0", children: [
-          title && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "font-semibold text-gray-900 dark:text-white", children: title }),
-          description && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm text-gray-600 dark:text-gray-300 mt-1", children: description }),
+          title && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            reactNative.Text,
+            {
+              className: cn(
+                design.textVariants.label.default(),
+                "text-gray-900 dark:text-white"
+              ),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(design.textVariants.body.sm(), "mt-1"), children: description }),
           action && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Pressable, { onPress: action.onPress, className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm font-medium text-blue-600 dark:text-blue-400", children: action.label }) })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4691,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,
@@ -4881,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,
@@ -4891,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: "✕" })
                       }
                     )
                   ] }) }),
@@ -4906,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,
@@ -4958,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;
@@ -5030,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
+                  }
+                )
               }
             )
           }
@@ -5282,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 },
@@ -5315,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
@@ -5347,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;
@@ -5387,6 +5604,7 @@ const Link = ({
     }
   );
 };
+const { typography: typography$c } = design.designTokens;
 const Breadcrumb = ({
   items,
   separator = "/",
@@ -5396,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) {
@@ -5419,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
@@ -5457,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
         }
@@ -5505,6 +5723,7 @@ const Breadcrumb = ({
     }
   );
 };
+const { typography: typography$b } = design.designTokens;
 const Pagination = ({
   currentPage,
   totalPages,
@@ -5519,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];
@@ -5680,6 +5899,7 @@ const Pagination = ({
     }
   );
 };
+const { typography: typography$a } = design.designTokens;
 const SettingsList = ({
   settings,
   selectedSetting,
@@ -5712,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,
@@ -5727,6 +5947,7 @@ const SettingsList = ({
     }
   );
 };
+const { typography: typography$9 } = design.designTokens;
 const NavigationList = ({
   items,
   selectedPath,
@@ -5768,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
+              }
+            )
           ] })
         ]
       },
@@ -5784,6 +6024,7 @@ const NavigationList = ({
     );
   }) });
 };
+const { typography: typography$8 } = design.designTokens;
 const Dropdown = ({
   trigger,
   items,
@@ -5876,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
@@ -5946,6 +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: typography$7 } = design.designTokens;
 const QuickActions = ({
   actions,
   orientation = "horizontal",
@@ -5959,23 +6201,23 @@ const QuickActions = ({
       text: "text-gray-900 dark:text-white"
     },
     primary: {
-      bg: "bg-blue-500 border-blue-500",
-      bgActive: "active:bg-blue-600",
+      bg: "bg-blue-600 border-blue-600",
+      bgActive: "active:bg-blue-800",
       text: "text-white"
     },
     success: {
-      bg: "bg-green-500 border-green-500",
-      bgActive: "active:bg-green-600",
+      bg: "bg-green-600 border-green-600",
+      bgActive: "active:bg-green-800",
       text: "text-white"
     },
     warning: {
-      bg: "bg-yellow-500 border-yellow-500",
-      bgActive: "active:bg-yellow-600",
+      bg: "bg-orange-600 border-orange-600",
+      bgActive: "active:bg-orange-800",
       text: "text-white"
     },
     danger: {
-      bg: "bg-red-500 border-red-500",
-      bgActive: "active:bg-red-600",
+      bg: "bg-red-600 border-red-600",
+      bgActive: "active:bg-red-800",
       text: "text-white"
     }
   };
@@ -6009,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("font-medium", styles2.text), children: action.label })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: cn(typography$7.weight.medium, styles2.text), children: action.label })
         ]
       },
       action.id
@@ -6087,6 +6329,7 @@ const EmptyState = ({
     }
   );
 };
+const { typography: typography$6 } = design.designTokens;
 const Calendar = ({
   value,
   onChange,
@@ -6175,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,
         {
@@ -6186,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(
@@ -6227,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()
             }
@@ -6257,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;
@@ -6278,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,
@@ -6295,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] ?? "")
               }
@@ -6307,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,
@@ -6419,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"
             }
           ) }),
@@ -6496,15 +6802,15 @@ const ProgressCircle = ({
   label,
   variant = "primary",
   color,
-  trackColor = "#e5e7eb",
+  trackColor = design.colors.raw.neutral[200],
   className
 }) => {
   const progress = Math.min(100, Math.max(0, value));
   const variantColors = {
-    primary: "#2563eb",
-    success: "#16a34a",
-    warning: "#ca8a04",
-    danger: "#dc2626"
+    primary: design.colors.raw.blue[600],
+    success: design.colors.raw.green[600],
+    warning: design.colors.raw.amber[600],
+    danger: design.colors.raw.red[600]
   };
   const progressColor = color || variantColors[variant];
   const innerSize = size - strokeWidth * 2;
@@ -6583,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,
@@ -6601,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
@@ -6631,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,
@@ -6851,7 +7168,7 @@ const PhoneInput = ({
           value,
           onChangeText: handleInputChange,
           placeholder,
-          placeholderTextColor: "#9ca3af",
+          placeholderTextColor: design.colors.raw.neutral[400],
           keyboardType: "phone-pad",
           editable: !disabled,
           className: cn(
@@ -6884,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"
             }
           ) }),
@@ -7229,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"
             }
@@ -7492,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",
@@ -7501,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"
     }
   };
@@ -7532,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,
@@ -7553,7 +7892,7 @@ const CodeDisplay = ({
     reactNative.Text,
     {
       className: cn(
-        "font-mono",
+        design.designTokens.typography.family.mono,
         textColorClass,
         sizeConfig2.text,
         !inline && alignClasses[align],
@@ -7881,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" }) });
@@ -7949,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();
@@ -8055,7 +8394,7 @@ const TextInputModal = ({
                   value,
                   onChangeText: setValue,
                   placeholder,
-                  placeholderTextColor: "#9ca3af",
+                  placeholderTextColor: design.colors.raw.neutral[400],
                   maxLength,
                   editable: !isLoading,
                   autoFocus: true,
@@ -8252,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",
@@ -8290,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
+          }
+        )
       ]
     }
   );
@@ -8353,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 }),
@@ -8502,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"
       }
     ) }),
@@ -9007,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",
@@ -9020,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",
@@ -9047,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",
@@ -9065,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,
@@ -9152,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,
                 {
@@ -9204,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 = "/",
@@ -9216,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))
@@ -9302,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(
@@ -9325,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" ? "↑" : "↓" })
                     ]
                   }
@@ -9335,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),
@@ -9343,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(
@@ -9355,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
             ))
@@ -9450,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,
@@ -9676,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",
@@ -9686,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,
@@ -9720,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)) })
           ] })
         ]
@@ -9754,53 +10230,76 @@ const FeatureCard = ({
   borderColor = false,
   className
 }) => {
-  const colorClasses = {
+  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(
@@ -9810,11 +10309,31 @@ const FeatureCard = ({
           "w-12 h-12 rounded-lg items-center justify-center mb-4",
           iconBackgroundClasses[color]
         ),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: colorClasses[color], children: icon })
+        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: 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
       }
-    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: cn("mb-4", colorClasses[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 }),
+    ),
     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(
@@ -9826,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", colorClasses[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
@@ -9880,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(
@@ -9891,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: [
@@ -9975,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(
@@ -10062,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
       ),
@@ -10114,6 +10664,7 @@ const PromotionalBanner = ({
     }
   );
 };
+const { typography: typography$2 } = design.designTokens;
 if (reactNative.Platform.OS === "android" && reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
   reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
 }
@@ -10163,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
@@ -10178,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: "›" }) })
         }
       )
     ] }),
@@ -10198,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
@@ -10209,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,
@@ -10218,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,
@@ -10236,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: [
@@ -10256,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: {
@@ -10298,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",
@@ -10326,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
               }
             ),
@@ -10338,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,
@@ -10355,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,
@@ -10373,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];
@@ -10416,6 +11034,7 @@ const KeyValuePair = ({
     }
   );
 };
+const { typography } = design.designTokens;
 const SmartLink = ({
   to,
   href,
@@ -10436,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;