@12min/ds 1.0.0 → 3.0.0

package/dist/index.native.js

@@ -20,21 +20,31 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.native.ts
 var index_native_exports = {};
 __export(index_native_exports, {
-  ActionItem: () => ActionItem,
   Alert: () => Alert,
   Button: () => Button,
+  ButtonIcon: () => ButtonIcon,
   Checkbox: () => Checkbox,
   Chip: () => Chip,
+  ChoiceCard: () => ChoiceCard,
   DSThemeProvider: () => DSThemeProvider,
+  DismissButton: () => DismissButton,
   Input: () => Input,
+  InputField: () => InputField,
+  ListItem: () => ListItem,
   ProgressBar: () => ProgressBar,
   RadioGroup: () => RadioGroup,
-  RadioItem: () => RadioItem,
   RatingScale: () => RatingScale,
   Stepper: () => Stepper,
+  ToggleSwitch: () => ToggleSwitch,
+  borderWidth: () => borderWidth,
   colors: () => colors,
   darkTheme: () => darkTheme,
+  grid: () => grid,
   lightTheme: () => lightTheme,
+  opacity: () => opacity,
+  radius: () => radius,
+  shadow: () => shadow,
+  spacing: () => spacing,
   typography: () => typography,
   useTheme: () => useTheme
 });
@@ -44,12 +54,12 @@ module.exports = __toCommonJS(index_native_exports);
 var colors = {
   marianBlue: {
     50: "#FAFBFF",
-    100: "#F1F4FE",
+    100: "#F6F8FF",
     200: "#E1E7FF",
     300: "#C3CCF7",
     400: "#94A5F2",
     500: "#697DD6",
-    600: "#475CBB",
+    600: "#4357AD",
     700: "#31428B",
     800: "#25326A",
     900: "#131937"
@@ -61,12 +71,15 @@ var colors = {
     300: "#474747",
     400: "#3D3D3D",
     500: "#333333",
-    600: "#1E1E1E",
+    600: "#292929",
     700: "#161616",
     800: "#141414",
     900: "#0A0A0A"
   },
   gray: {
+    15: "#F4F5F8",
+    25: "#EDEEF1",
+    35: "#DDE0E6",
     50: "#B1B5BE",
     100: "#A6ABB5",
     200: "#9BA0AB",
@@ -78,7 +91,20 @@ var colors = {
     800: "#5D636F",
     900: "#545964"
   },
-  mustard: {
+  amber: {
+    50: "#FFFBEB",
+    100: "#FEF3C7",
+    200: "#FDE68A",
+    300: "#FCD34D",
+    400: "#FBBF24",
+    500: "#F59E0B",
+    600: "#D97706",
+    700: "#B45309",
+    800: "#92400E",
+    900: "#78350F",
+    text: "#BA5C0A"
+  },
+  yellow: {
     50: "#FFF2D6",
     100: "#FFECC2",
     200: "#FFE5AD",
@@ -91,97 +117,337 @@ var colors = {
     900: "#FFB81F"
   },
   ketchup: {
-    50: "#FFD6D6",
-    100: "#FFC2C2",
-    200: "#FFADAD",
-    300: "#FF9999",
-    400: "#FF8585",
-    500: "#FF7070",
-    600: "#FF5C5C",
-    700: "#FF4040",
-    800: "#FF3333",
-    900: "#FF1F1F"
+    50: "#FEF2F2",
+    100: "#FEE2E2",
+    200: "#FECACA",
+    300: "#FCA5A5",
+    400: "#F87171",
+    500: "#EF4444",
+    600: "#DC2626",
+    700: "#B91C1C",
+    800: "#991B1B",
+    900: "#7F1D1D",
+    text: "#D91F3C"
+  },
+  green: {
+    50: "#F2FDF4",
+    100: "#E5FBE9",
+    200: "#C7F4D0",
+    300: "#99E5AC",
+    400: "#5FCD80",
+    500: "#36B260",
+    600: "#258F4B",
+    700: "#1B6F3B",
+    800: "#145430",
+    900: "#0E3622",
+    text: "#0E8745"
+  },
+  blue: {
+    50: "#EFF6FF",
+    100: "#DBEAFE",
+    200: "#BFDBFE",
+    300: "#93C5FD",
+    400: "#60A5FA",
+    500: "#3B82F6",
+    600: "#2563EB",
+    700: "#1D4ED8",
+    800: "#1E40AF",
+    900: "#1E3A8A",
+    text: "#1E40AF"
+  },
+  // Single brand accent green — the vibrant tone that was previously green/300
+  // before the green scale was retuned to muted values in the Figma v2 palette.
+  brandGreen: "#6DFFB4",
+  overlayBlack: {
+    5: "#0000000D",
+    8: "#00000014",
+    12: "#0000001F",
+    16: "#00000029"
   },
-  mint: {
-    50: "#A7F1B7",
-    100: "#96EEA9",
-    200: "#84EB9A",
-    300: "#73E88C",
-    400: "#61E57E",
-    500: "#50E26F",
-    600: "#3EE061",
-    700: "#24DC4C",
-    800: "#22D348",
-    900: "#1FC142"
+  overlayWhite: {
+    5: "#FFFFFF0D",
+    8: "#FFFFFF14",
+    12: "#FFFFFF1F",
+    16: "#FFFFFF29"
   },
   white: "#FFFFFF",
-  successBg: "#E5FBE9"
+  black: "#000000"
 };
 
 // src/tokens/typography.ts
 var typography = {
-  display: { fontSize: 32, fontWeight: "700", lineHeight: 1.2, fontFamily: "Poppins" },
-  h1: { fontSize: 24, fontWeight: "700", lineHeight: 1.3, fontFamily: "Poppins" },
-  h2: { fontSize: 20, fontWeight: "600", lineHeight: 1.3, fontFamily: "Poppins" },
-  h3: { fontSize: 18, fontWeight: "600", lineHeight: 1.4, fontFamily: "Poppins" },
-  bodyLarge: { fontSize: 16, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
-  bodyDefault: { fontSize: 14, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
-  bodySmall: { fontSize: 12, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
-  labelLarge: { fontSize: 16, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
-  labelDefault: { fontSize: 14, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
-  labelSmall: { fontSize: 12, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
-  caption: { fontSize: 12, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
-  overline: { fontSize: 10, fontWeight: "600", lineHeight: 1, fontFamily: "Inter" },
-  buttonLarge: { fontSize: 16, fontWeight: "600", lineHeight: 1.5, fontFamily: "Inter" },
-  buttonDefault: { fontSize: 14, fontWeight: "600", lineHeight: 1.5, fontFamily: "Inter" }
+  display1: { fontFamily: "Poppins", fontSize: 32, fontWeight: "700", lineHeight: 40, letterSpacing: -1, textTransform: "none" },
+  display2: { fontFamily: "Poppins", fontSize: 32, fontWeight: "700", lineHeight: 40, letterSpacing: -1, textTransform: "none" },
+  h1: { fontFamily: "Poppins", fontSize: 24, fontWeight: "700", lineHeight: 32, letterSpacing: -1, textTransform: "none" },
+  h2: { fontFamily: "Poppins", fontSize: 20, fontWeight: "700", lineHeight: 28, letterSpacing: 0, textTransform: "none" },
+  h3: { fontFamily: "Poppins", fontSize: 16, fontWeight: "600", lineHeight: 24, letterSpacing: 0, textTransform: "none" },
+  bodyLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "500", lineHeight: 24, letterSpacing: 0, textTransform: "none" },
+  bodyDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "500", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  bodySmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "400", lineHeight: 16, letterSpacing: 0.2, textTransform: "none" },
+  labelLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  labelDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  labelSmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "600", lineHeight: 16, letterSpacing: 0.2, textTransform: "none" },
+  labelTiny: { fontFamily: "Inter", fontSize: 10, fontWeight: "600", lineHeight: 14, letterSpacing: 0, textTransform: "none" },
+  caption: { fontFamily: "Inter", fontSize: 12, fontWeight: "500", lineHeight: 16, letterSpacing: 0.5, textTransform: "none" },
+  captionUppercase: { fontFamily: "Inter", fontSize: 12, fontWeight: "500", lineHeight: 16, letterSpacing: 0.5, textTransform: "uppercase" },
+  overline: { fontFamily: "Inter", fontSize: 10, fontWeight: "600", lineHeight: 16, letterSpacing: 8, textTransform: "uppercase" },
+  buttonLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  buttonDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  buttonSmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "600", lineHeight: 16, letterSpacing: 0, textTransform: "none" }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  unit: 4,
+  gap: {
+    "0.5": 2,
+    "1": 4,
+    "2": 8,
+    "3": 12,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "8": 32,
+    "10": 40,
+    "12": 48,
+    "14": 56,
+    "16": 64,
+    "18": 72,
+    "20": 80,
+    "22": 88,
+    "24": 96
+  },
+  screen: {
+    x: 16,
+    y: 24
+  }
+};
+
+// src/tokens/grid.ts
+var grid = {
+  // 8px square baseline — line-height/* steps 16/24/32/40 snap; 20 and 28 land on a half-cell
+  baseline: 8,
+  breakpoints: {
+    mobile: 0,
+    tablet: 768,
+    desktop: 1024
+  },
+  columns: {
+    mobile: 4,
+    tablet: 8,
+    desktop: 12
+  },
+  gutter: {
+    mobile: 8,
+    tablet: 16,
+    desktop: 24
+  },
+  margin: {
+    mobile: 20,
+    tablet: 24,
+    desktop: 32
+  }
+};
+
+// src/tokens/radius.ts
+var radius = {
+  none: 0,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  full: 9999,
+  button: 16,
+  card: 20,
+  input: 12,
+  chip: 9999,
+  badge: 8
+};
+
+// src/tokens/borderWidth.ts
+var borderWidth = {
+  default: 1,
+  strong: 1.5,
+  heavy: 2
+};
+
+// src/tokens/shadow.ts
+var shadow = {
+  sm: { offsetX: 0, offsetY: 1, blur: 3, spread: 0, color: "#000000", opacity: { light: 0.08, dark: 0.4 } },
+  md: { offsetX: 0, offsetY: 4, blur: 12, spread: 0, color: "#000000", opacity: { light: 0.1, dark: 0.5 } },
+  lg: { offsetX: 0, offsetY: 8, blur: 24, spread: -4, color: "#000000", opacity: { light: 0.12, dark: 0.6 } }
+};
+
+// src/tokens/opacity.ts
+var opacity = {
+  disabled: 0.4,
+  hover: 0.08,
+  pressed: 0.12
 };
 
 // src/themes/lightTheme.ts
 var lightTheme = {
-  background: colors.marianBlue[50],
-  surface: colors.marianBlue[100],
-  border: colors.marianBlue[200],
-  onBackground: colors.midnight[900],
-  onSurface: colors.midnight[700],
-  muted: colors.gray[500],
-  primary: colors.marianBlue[600],
-  secondary: colors.midnight[900],
-  success: colors.mint[800],
-  error: colors.ketchup[600],
-  warning: colors.mustard[500],
-  info: colors.marianBlue[500],
-  surfaceDisabled: colors.gray[50],
-  successBg: colors.successBg,
-  textSecondary: colors.gray[700],
-  textTertiary: colors.gray[500],
-  textInverse: colors.white,
-  borderStrong: colors.marianBlue[600],
-  borderSubtle: colors.marianBlue[200],
-  interactivePressed: colors.marianBlue[800]
+  bg: {
+    primary: colors.marianBlue[600],
+    primaryHover: colors.marianBlue[700],
+    primaryPressed: colors.marianBlue[800],
+    primarySubtle: colors.marianBlue[200],
+    primarySubtleHover: colors.marianBlue[300],
+    primarySubtlePressed: colors.marianBlue[400],
+    surface: colors.white,
+    surfaceRaised: colors.marianBlue[50],
+    surfaceHover: colors.gray[15],
+    surfacePressed: colors.gray[35],
+    overlay: colors.marianBlue[900],
+    overlaySubtle: colors.overlayBlack[8],
+    overlaySubtleHover: colors.overlayBlack[12],
+    overlaySubtlePressed: colors.overlayBlack[16],
+    success: colors.green[600],
+    successSubtle: colors.green[100],
+    error: colors.ketchup[600],
+    errorSubtle: colors.ketchup[100],
+    warning: colors.amber[500],
+    warningSubtle: colors.amber[100],
+    info: colors.blue[500],
+    infoSubtle: colors.blue[100],
+    highlight: colors.brandGreen,
+    accent: colors.amber[500],
+    accentSubtle: colors.amber[100],
+    disabled: colors.gray[25]
+  },
+  text: {
+    primary: colors.marianBlue[900],
+    secondary: colors.gray[700],
+    inverse: colors.white,
+    brand: colors.marianBlue[600],
+    link: colors.marianBlue[600],
+    placeholder: colors.gray[400],
+    success: colors.green.text,
+    error: colors.ketchup.text,
+    warning: colors.amber.text,
+    info: colors.blue.text,
+    highlight: colors.marianBlue[900],
+    accent: colors.amber.text,
+    disabled: colors.gray[400],
+    onSuccess: colors.white,
+    onError: colors.white,
+    onWarning: colors.midnight[900],
+    onHighlight: colors.midnight[900]
+  },
+  border: {
+    default: colors.marianBlue[200],
+    strong: colors.marianBlue[600],
+    subtle: colors.overlayBlack[5],
+    focus: colors.black,
+    accent: colors.amber[700],
+    success: colors.green.text,
+    error: colors.ketchup[600],
+    warning: colors.amber[700],
+    info: colors.blue[600],
+    disabled: colors.gray[50]
+  },
+  icon: {
+    primary: colors.marianBlue[900],
+    secondary: colors.gray[600],
+    inverse: colors.white,
+    brand: colors.marianBlue[600],
+    accent: colors.amber[700],
+    success: colors.green.text,
+    error: colors.ketchup[600],
+    warning: colors.amber[600],
+    info: colors.blue[600],
+    highlight: colors.marianBlue[900],
+    disabled: colors.gray[400]
+  },
+  interactive: {
+    hover: colors.overlayBlack[8],
+    pressed: colors.overlayBlack[12],
+    selected: colors.marianBlue[700],
+    selectedSubtle: colors.marianBlue[200]
+  }
 };
 
 // src/themes/darkTheme.ts
 var darkTheme = {
-  background: colors.midnight[900],
-  surface: colors.midnight[700],
-  border: colors.midnight[500],
-  onBackground: colors.marianBlue[50],
-  onSurface: colors.gray[50],
-  muted: colors.gray[600],
-  primary: colors.marianBlue[400],
-  secondary: colors.marianBlue[50],
-  success: colors.mint[400],
-  error: colors.ketchup[400],
-  warning: colors.mustard[400],
-  info: colors.marianBlue[300],
-  surfaceDisabled: colors.midnight[600],
-  successBg: colors.midnight[800],
-  textSecondary: colors.gray[400],
-  textTertiary: colors.gray[500],
-  textInverse: colors.midnight[900],
-  borderStrong: colors.marianBlue[400],
-  borderSubtle: colors.midnight[600],
-  interactivePressed: colors.marianBlue[300]
+  bg: {
+    primary: colors.marianBlue[600],
+    primaryHover: colors.marianBlue[500],
+    primaryPressed: colors.marianBlue[600],
+    primarySubtle: colors.marianBlue[900],
+    primarySubtleHover: colors.marianBlue[800],
+    primarySubtlePressed: colors.marianBlue[700],
+    surface: colors.midnight[900],
+    surfaceRaised: colors.midnight[800],
+    surfaceHover: colors.midnight[800],
+    surfacePressed: colors.midnight[600],
+    overlay: colors.black,
+    overlaySubtle: colors.overlayWhite[8],
+    overlaySubtleHover: colors.overlayWhite[12],
+    overlaySubtlePressed: colors.overlayWhite[16],
+    success: colors.green[300],
+    successSubtle: colors.green[800],
+    error: colors.ketchup[900],
+    errorSubtle: colors.ketchup[800],
+    warning: colors.amber[900],
+    warningSubtle: colors.amber[800],
+    info: colors.blue[600],
+    infoSubtle: colors.blue[700],
+    highlight: colors.brandGreen,
+    accent: colors.amber[900],
+    accentSubtle: colors.amber[900],
+    disabled: colors.midnight[700]
+  },
+  text: {
+    primary: colors.white,
+    secondary: colors.gray[300],
+    inverse: colors.midnight[900],
+    brand: colors.marianBlue[300],
+    link: colors.marianBlue[300],
+    placeholder: colors.gray[400],
+    success: colors.green[500],
+    error: colors.ketchup[600],
+    warning: colors.amber[500],
+    info: colors.blue[100],
+    highlight: colors.marianBlue[900],
+    accent: colors.amber.text,
+    disabled: colors.gray[600],
+    onSuccess: colors.white,
+    onError: colors.white,
+    onWarning: colors.midnight[900],
+    onHighlight: colors.midnight[900]
+  },
+  border: {
+    default: colors.midnight[50],
+    strong: colors.marianBlue[300],
+    subtle: colors.overlayWhite[5],
+    focus: colors.white,
+    accent: colors.amber.text,
+    success: colors.green.text,
+    error: colors.ketchup[500],
+    warning: colors.amber[600],
+    info: colors.blue[500],
+    disabled: colors.midnight[700]
+  },
+  icon: {
+    primary: colors.white,
+    secondary: colors.gray[400],
+    inverse: colors.midnight[900],
+    brand: colors.marianBlue[300],
+    accent: colors.amber[700],
+    success: colors.green.text,
+    error: colors.ketchup.text,
+    warning: colors.amber[100],
+    info: colors.blue[100],
+    highlight: colors.marianBlue[900],
+    disabled: colors.gray[600]
+  },
+  interactive: {
+    hover: colors.overlayWhite[8],
+    pressed: colors.overlayWhite[12],
+    selected: colors.marianBlue[800],
+    selectedSubtle: colors.marianBlue[900]
+  }
 };
 
 // src/context/ThemeProvider.tsx
@@ -208,25 +474,32 @@ var import_react_native = require("react-native");
 // src/components/Button/Button.styles.ts
 var buttonTokens = {
   sizes: {
-    sm: { height: 36, paddingHorizontal: 14, fontSize: 14 },
-    md: { height: 48, paddingHorizontal: 16, fontSize: 16 },
-    lg: { height: 56, paddingHorizontal: 24, fontSize: 18 }
+    sm: { height: 32, paddingHorizontal: 12 },
+    md: { height: 40, paddingHorizontal: 16 },
+    lg: { height: 48, paddingHorizontal: 24 }
   },
-  borderRadius: 9999
+  borderRadius: radius.full
 };
 
 // src/components/Button/Button.native.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Button({ variant = "primary", size = "md", disabled = false, children, onPress }) {
+var textStyleBySize = {
+  sm: typography.buttonSmall,
+  md: typography.buttonDefault,
+  lg: typography.buttonLarge
+};
+function Button({ variant = "primary", size = "lg", disabled = false, children, onPress }) {
   const { theme } = useTheme();
-  const { sizes, borderRadius } = buttonTokens;
-  const sizeStyle = sizes[size];
-  const bgColor = disabled ? theme.surfaceDisabled : variant === "primary" ? theme.primary : variant === "secondary" ? theme.surface : "transparent";
-  const textColor = variant === "primary" ? theme.textInverse : variant === "secondary" ? theme.onBackground : theme.primary;
+  const { sizes: sizes2, borderRadius } = buttonTokens;
+  const sizeStyle = sizes2[size];
+  const textStyle = textStyleBySize[size];
+  const bgColor = disabled ? variant === "ghost" ? "transparent" : theme.bg.disabled : variant === "primary" ? theme.bg.primary : variant === "secondary" ? theme.bg.primarySubtle : "transparent";
+  const textColor = disabled ? theme.text.disabled : variant === "primary" ? theme.text.inverse : variant === "secondary" ? theme.text.primary : theme.text.brand;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_native.Pressable,
     {
       onPress: disabled ? void 0 : onPress,
+      disabled,
       style: ({ pressed }) => [
         styles.base,
         {
@@ -234,147 +507,265 @@ function Button({ variant = "primary", size = "md", disabled = false, children,
           paddingHorizontal: sizeStyle.paddingHorizontal,
           borderRadius,
           backgroundColor: bgColor,
-          opacity: disabled ? 0.5 : pressed ? 0.85 : 1
+          opacity: !disabled && pressed ? 1 - opacity.pressed : 1
         }
       ],
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: [styles.label, { fontSize: sizeStyle.fontSize, color: textColor }], children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: [textStyle, { color: textColor }], children })
     }
   );
 }
 var styles = import_react_native.StyleSheet.create({
-  base: { flexDirection: "row", alignItems: "center", justifyContent: "center" },
-  label: { fontWeight: "600" }
+  base: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8 }
 });
 
-// src/components/Chip/Chip.native.tsx
+// src/components/ButtonIcon/ButtonIcon.native.tsx
 var import_react_native2 = require("react-native");
-
-// src/components/Chip/Chip.styles.ts
-var chipTokens = {
-  size: { height: 48, paddingHorizontal: 16, fontSize: 14 },
-  borderRadius: 56
-};
-
-// src/components/Chip/Chip.native.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function Chip({ children, checked = false, onPress, style }) {
-  const { theme } = useTheme();
-  const { size, borderRadius } = chipTokens;
-  const bg = checked ? theme.primary : theme.surface;
-  const textColor = checked ? theme.textInverse : theme.onBackground;
+var sizeBySize = {
+  sm: 40,
+  md: 48,
+  lg: 64
+};
+function ButtonIcon({ icon, accessibilityLabel, variant = "primary", size = "md", disabled = false, onPress }) {
+  const { theme, colorScheme } = useTheme();
+  const dimension = sizeBySize[size];
+  const bgColor = disabled ? variant === "ghost" ? "transparent" : theme.bg.disabled : variant === "primary" ? theme.bg.primary : variant === "secondary" ? theme.bg.primarySubtle : variant === "overlay" ? colorScheme === "dark" ? colors.overlayWhite[8] : colors.overlayBlack[8] : "transparent";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_react_native2.Pressable,
     {
-      onPress,
+      onPress: disabled ? void 0 : onPress,
+      disabled,
       style: ({ pressed }) => [
         styles2.base,
-        { height: size.height, paddingHorizontal: size.paddingHorizontal, borderRadius, backgroundColor: bg, opacity: pressed ? 0.85 : 1 },
-        style
+        {
+          width: dimension,
+          height: dimension,
+          borderRadius: radius.full,
+          backgroundColor: bgColor,
+          opacity: !disabled && pressed ? 1 - opacity.pressed : 1
+        }
       ],
       accessibilityRole: "button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Text, { style: { fontSize: size.fontSize, color: textColor, fontWeight: checked ? "600" : "500" }, children })
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      children: icon
     }
   );
 }
 var styles2 = import_react_native2.StyleSheet.create({
-  base: { flexDirection: "row", alignItems: "center", justifyContent: "center" }
+  base: { alignItems: "center", justifyContent: "center" }
 });
 
-// src/components/Alert/Alert.native.tsx
+// src/components/DismissButton/DismissButton.native.tsx
 var import_react_native3 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var containerSize = { xs: 20, sm: 32, md: 40 };
+var glyphSize = { xs: 12, sm: 16, md: 20 };
+function DismissButton({ accessibilityLabel = "Fechar", variant = "subtle", size = "sm", disabled = false, onPress }) {
+  const { theme, colorScheme } = useTheme();
+  const dimension = containerSize[size];
+  const glyph2 = glyphSize[size];
+  const bgColor = disabled ? variant === "ghost" ? "transparent" : theme.bg.disabled : variant === "subtle" ? colorScheme === "dark" ? colors.overlayWhite[8] : colors.overlayBlack[8] : "transparent";
+  const glyphColor = disabled ? theme.text.disabled : theme.icon.primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_native3.Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      style: ({ pressed }) => [
+        styles3.base,
+        {
+          width: dimension,
+          height: dimension,
+          borderRadius: radius.full,
+          backgroundColor: bgColor,
+          opacity: !disabled && pressed ? 1 - opacity.pressed : 1
+        }
+      ],
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: { width: glyph2, height: glyph2, alignItems: "center", justifyContent: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.line, { width: glyph2, backgroundColor: glyphColor, transform: [{ rotate: "45deg" }] }] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.line, { width: glyph2, backgroundColor: glyphColor, transform: [{ rotate: "-45deg" }] }] })
+      ] })
+    }
+  );
+}
+var styles3 = import_react_native3.StyleSheet.create({
+  base: { alignItems: "center", justifyContent: "center" },
+  line: { position: "absolute", height: 2, borderRadius: 1 }
+});
+
+// src/components/Chip/Chip.native.tsx
+var import_react_native4 = require("react-native");
 
-// src/components/Alert/Alert.styles.ts
-var alertTokens = {
-  padding: 20,
-  borderRadius: 32
+// src/components/Chip/Chip.styles.ts
+var chipSizes = {
+  sm: { height: 32, paddingHorizontal: 12 },
+  md: { height: 44, paddingHorizontal: 16 }
 };
+var chipRadius = radius.chip;
+
+// src/components/Chip/Chip.native.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Chip({ children, checked = false, disabled = false, size = "md", leading, trailing, onPress, style }) {
+  const { theme } = useTheme();
+  const { height, paddingHorizontal } = chipSizes[size];
+  const bg = disabled ? theme.bg.disabled : checked ? theme.interactive.selected : "transparent";
+  const borderColor = disabled ? theme.border.disabled : checked ? theme.interactive.selected : theme.border.default;
+  const textColor = disabled ? theme.text.disabled : checked ? theme.text.inverse : theme.text.primary;
+  const baseText = size === "sm" ? typography.caption : typography.bodyDefault;
+  const textStyle = { ...baseText, fontWeight: checked ? "600" : baseText.fontWeight };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_react_native4.Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      style: ({ pressed }) => [
+        styles4.base,
+        {
+          height,
+          paddingHorizontal,
+          borderRadius: chipRadius,
+          backgroundColor: bg,
+          borderColor,
+          borderWidth: borderWidth.default,
+          opacity: !disabled && pressed ? 1 - opacity.pressed : 1
+        },
+        style
+      ],
+      accessibilityRole: "button",
+      accessibilityState: { selected: checked, disabled },
+      children: [
+        leading,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: [textStyle, { color: textColor }], children }),
+        trailing
+      ]
+    }
+  );
+}
+var styles4 = import_react_native4.StyleSheet.create({
+  base: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8, borderStyle: "solid" }
+});
 
 // src/components/Alert/Alert.native.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function Alert({ variant = "info", title, description }) {
+var import_react_native5 = require("react-native");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var glyph = { success: "\u2713", info: "i", warning: "!", error: "\u2715" };
+function Alert({ variant = "info", size = "default", layout = "stacked", title, description, onDismiss }) {
   const { theme } = useTheme();
-  const { padding, borderRadius } = alertTokens;
-  const bg = variant === "success" ? theme.successBg : theme.surface;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: [styles3.container, { backgroundColor: bg, padding, borderColor: theme.border }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.Text, { style: [styles3.title, { color: theme.onBackground }], children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.Text, { style: [styles3.description, { color: theme.muted }], children: description })
-  ] });
+  const bg = { success: theme.bg.successSubtle, info: theme.bg.infoSubtle, warning: theme.bg.warningSubtle, error: theme.bg.errorSubtle }[variant];
+  const iconColor = { success: theme.icon.success, info: theme.icon.info, warning: theme.icon.warning, error: theme.icon.error }[variant];
+  const borderColor = theme.border.subtle;
+  const padding = size === "compact" ? 12 : 20;
+  const outerGap = size === "compact" ? 8 : 12;
+  const iconEl = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: [styles5.icon, { borderColor: iconColor }], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: { color: iconColor, fontSize: 13, fontWeight: "700", lineHeight: 16 }, children: glyph[variant] }) });
+  const bodyEl = description ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: [typography.bodyDefault, { color: theme.text.secondary, flex: layout === "inline" ? 1 : void 0 }], children: description }) : null;
+  const closeEl = onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Pressable, { onPress: onDismiss, accessibilityRole: "button", accessibilityLabel: "Fechar", style: styles5.close, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: { color: theme.text.primary, fontSize: 16, lineHeight: 20 }, children: "\u2715" }) }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react_native5.View,
+    {
+      style: [styles5.container, { backgroundColor: bg, borderColor, padding, gap: outerGap }],
+      accessibilityRole: variant === "error" ? "alert" : void 0,
+      accessibilityLiveRegion: variant === "error" ? "assertive" : "polite",
+      children: [
+        layout === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          iconEl,
+          bodyEl
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.content, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.header, children: [
+            iconEl,
+            title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: [typography.h3, styles5.title, { color: theme.text.primary }], children: title }) : null
+          ] }),
+          bodyEl
+        ] }),
+        closeEl
+      ]
+    }
+  );
 }
-var styles3 = import_react_native3.StyleSheet.create({
+var styles5 = import_react_native5.StyleSheet.create({
   container: {
     width: "100%",
-    borderWidth: 1,
-    borderTopLeftRadius: 32,
-    borderTopRightRadius: 32,
-    borderBottomRightRadius: 32,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    borderWidth: borderWidth.default,
+    borderStyle: "solid",
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    borderBottomRightRadius: 24,
     borderBottomLeftRadius: 0
   },
-  title: { fontWeight: "600", fontSize: 16, lineHeight: 22 },
-  description: { fontWeight: "500", fontSize: 14, lineHeight: 21, marginTop: 12 }
+  content: { flex: 1, flexDirection: "column", gap: 8 },
+  header: { flexDirection: "row", alignItems: "center", gap: 12 },
+  title: { flex: 1 },
+  icon: { width: 24, height: 24, borderRadius: 12, borderWidth: 2, alignItems: "center", justifyContent: "center" },
+  close: {}
 });
 
 // src/components/ProgressBar/ProgressBar.native.tsx
-var import_react_native4 = require("react-native");
+var import_react_native6 = require("react-native");
 
 // src/components/ProgressBar/ProgressBar.styles.ts
 var progressBarTokens = {
   height: 8,
-  borderRadius: 999,
-  fillBorderRadius: 24
+  borderRadius: radius.full,
+  fillBorderRadius: radius.full
 };
 
 // src/components/ProgressBar/ProgressBar.native.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ProgressBar({ value }) {
   const { theme } = useTheme();
   const { height, borderRadius, fillBorderRadius } = progressBarTokens;
   const pct = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_react_native4.View,
+  const trackColor = theme.bg.surfaceHover;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_native6.View,
     {
-      style: [styles4.track, { height, borderRadius, backgroundColor: theme.border }],
+      style: [styles6.track, { height, borderRadius, backgroundColor: trackColor }],
       accessibilityRole: "progressbar",
       accessibilityValue: { min: 0, max: 100, now: pct },
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: { height, width: `${pct}%`, borderRadius: fillBorderRadius, backgroundColor: theme.primary } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: { height, width: `${pct}%`, borderRadius: fillBorderRadius, backgroundColor: theme.bg.primary } })
     }
   );
 }
-var styles4 = import_react_native4.StyleSheet.create({
+var styles6 = import_react_native6.StyleSheet.create({
   track: { width: "100%", overflow: "hidden" }
 });
 
 // src/components/Input/Input.native.tsx
 var import_react2 = require("react");
-var import_react_native5 = require("react-native");
+var import_react_native7 = require("react-native");
 
 // src/components/Input/Input.styles.ts
 var inputTokens = {
   height: 48,
   padding: 12,
   gap: 8,
-  borderRadius: 12,
-  fontSize: 14
+  borderRadius: radius.input
 };
 
 // src/components/Input/Input.native.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function Input({ value, placeholder = "exemplo@email.com", state = "default", leadingIcon, onChangeText, onFocus, onBlur, style }) {
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Input({ value, placeholder = "exemplo@email.com", state = "default", leadingIcon, trailingIcon, onChangeText, onFocus, onBlur, style }) {
   const { theme } = useTheme();
-  const { height, padding, gap, borderRadius, fontSize } = inputTokens;
+  const { height, padding, gap, borderRadius } = inputTokens;
   const [isFocused, setIsFocused] = (0, import_react2.useState)(false);
   const isDisabled = state === "disabled";
   const isError = state === "error";
   const isFilled = state === "filled";
-  const bg = isDisabled ? theme.background : theme.surface;
-  const borderColor = isDisabled ? theme.muted : isError ? theme.error : isFocused ? theme.primary : theme.border;
-  const borderWidth = isFocused ? 2 : 1;
-  const textColor = isDisabled ? theme.muted : isError ? theme.error : isFilled || isFocused ? theme.onBackground : theme.muted;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: [styles5.container, { height, padding, gap, borderRadius, backgroundColor: bg, borderColor, borderWidth }, style], children: [
+  const bg = isDisabled ? theme.bg.disabled : theme.bg.surface;
+  const borderColor = isDisabled ? theme.border.disabled : isError ? theme.border.error : isFocused ? theme.border.focus : theme.border.default;
+  const inputBorderWidth = isFocused ? borderWidth.heavy : borderWidth.default;
+  const textColor = isDisabled ? theme.text.disabled : isError ? theme.text.error : isFilled || isFocused ? theme.text.primary : theme.text.secondary;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: [styles7.container, { height, padding, gap, borderRadius, backgroundColor: bg, borderColor, borderWidth: inputBorderWidth }, style], children: [
     leadingIcon,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native5.TextInput,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react_native7.TextInput,
       {
         value,
         placeholder,
@@ -389,346 +780,425 @@ function Input({ value, placeholder = "exemplo@email.com", state = "default", le
           setIsFocused(false);
           onBlur?.();
         },
-        style: [styles5.input, { fontSize, color: textColor }]
+        style: [typography.bodyDefault, styles7.input, { color: textColor }]
       }
-    )
+    ),
+    trailingIcon
   ] });
 }
-var styles5 = import_react_native5.StyleSheet.create({
+var styles7 = import_react_native7.StyleSheet.create({
   container: { flexDirection: "row", alignItems: "center", borderStyle: "solid" },
-  input: { flex: 1, fontWeight: "500", padding: 0 }
+  input: { flex: 1, padding: 0 }
 });
 
+// src/components/InputField/InputField.native.tsx
+var import_react_native8 = require("react-native");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function InputField({
+  label,
+  required,
+  helperText,
+  error,
+  value,
+  placeholder,
+  disabled,
+  leadingIcon,
+  trailingIcon,
+  onChangeText,
+  onFocus,
+  onBlur
+}) {
+  const { theme } = useTheme();
+  const state = disabled ? "disabled" : error ? "error" : "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { style: { gap: 8, width: "100%" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.Text, { style: [typography.labelDefault, { color: theme.text.primary }], children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.Text, { style: { color: theme.text.error }, children: " *" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Input,
+      {
+        state,
+        value,
+        placeholder,
+        leadingIcon,
+        trailingIcon,
+        onChangeText,
+        onFocus,
+        onBlur
+      }
+    ),
+    helperText && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.Text, { style: [typography.caption, { color: error ? theme.text.error : theme.text.secondary }], children: helperText })
+  ] });
+}
+
 // src/components/Checkbox/Checkbox.native.tsx
-var import_react_native6 = require("react-native");
+var import_react_native9 = require("react-native");
 
 // src/components/Checkbox/Checkbox.styles.ts
-var checkboxTokens = {
-  size: 20,
-  borderRadius: 6
+var checkboxSizes = {
+  xs: { box: 16, radius: 4 },
+  sm: { box: 20, radius: 5 },
+  md: { box: 24, radius: 6 }
 };
 
 // src/components/Checkbox/Checkbox.native.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function Checkbox({ checked = false, onChange, disabled = false }) {
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Checkbox({ checked = false, onChange, disabled = false, size = "sm" }) {
   const { theme } = useTheme();
-  const { size, borderRadius } = checkboxTokens;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react_native6.Pressable,
+  const { box, radius: radius2 } = checkboxSizes[size];
+  const boxBg = checked ? disabled ? theme.bg.disabled : theme.interactive.selected : "transparent";
+  const boxBorder = checked ? boxBg : disabled ? theme.text.disabled : theme.icon.secondary;
+  const checkColor = disabled ? theme.text.disabled : colors.white;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_native9.Pressable,
     {
       onPress: disabled ? void 0 : () => onChange?.(!checked),
+      disabled,
       style: ({ pressed }) => [
-        styles6.base,
-        {
-          width: size,
-          height: size,
-          borderRadius,
-          backgroundColor: checked ? theme.primary : "transparent",
-          borderWidth: checked ? 0 : 1,
-          borderColor: theme.primary,
-          opacity: disabled ? 0.5 : pressed ? 0.85 : 1
-        }
+        styles8.wrapper,
+        // state layer: interactive/selected at ~12% (8-digit hex alpha).
+        { backgroundColor: !disabled && pressed ? `${theme.interactive.selected}1F` : "transparent" }
       ],
       accessibilityRole: "checkbox",
       accessibilityState: { checked, disabled },
-      children: checked && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.checkmark, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: [styles6.checkLine, { borderColor: theme.textInverse }] }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_react_native9.View,
+        {
+          style: [
+            styles8.box,
+            {
+              width: box,
+              height: box,
+              borderRadius: radius2,
+              backgroundColor: boxBg,
+              borderColor: boxBorder,
+              borderWidth: checked ? 0 : borderWidth.heavy
+            }
+          ],
+          children: checked && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_react_native9.View,
+            {
+              style: {
+                width: box * 0.5,
+                height: box * 0.4,
+                borderLeftWidth: 1.5,
+                borderBottomWidth: 1.5,
+                borderColor: checkColor,
+                transform: [{ rotate: "-45deg" }, { translateY: -box * 0.1 }]
+              }
+            }
+          )
+        }
+      )
     }
   );
 }
-var styles6 = import_react_native6.StyleSheet.create({
-  base: { alignItems: "center", justifyContent: "center" },
-  checkmark: { width: 10, height: 8, alignItems: "center", justifyContent: "center" },
-  checkLine: { width: 10, height: 8, borderLeftWidth: 1.5, borderBottomWidth: 1.5, transform: [{ rotate: "-45deg" }, { translateY: -2 }] }
+var styles8 = import_react_native9.StyleSheet.create({
+  wrapper: { padding: 4, borderRadius: 9999, alignItems: "center", justifyContent: "center" },
+  box: { alignItems: "center", justifyContent: "center" }
 });
 
-// src/components/RadioItem/RadioItem.native.tsx
-var import_react_native7 = require("react-native");
-
-// src/components/RadioItem/RadioItem.styles.ts
-var radioItemTokens = {
-  height: 48,
-  padding: 16,
-  gap: 12,
-  borderRadius: 16,
-  radioSize: 20,
-  fontSize: 14
+// src/components/ToggleSwitch/ToggleSwitch.native.tsx
+var import_react3 = require("react");
+var import_react_native10 = require("react-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var sizes = {
+  xs: { w: 32, h: 20, knob: 16 },
+  sm: { w: 40, h: 24, knob: 20 },
+  md: { w: 52, h: 32, knob: 28 }
 };
-
-// src/components/RadioItem/RadioItem.native.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function RadioItem({ label, description, selected = false, icon, onPress, style }) {
+function ToggleSwitch({ value = false, onChange, disabled = false, size = "sm", accessibilityLabel }) {
   const { theme } = useTheme();
-  const { height, padding, gap, borderRadius, radioSize, fontSize } = radioItemTokens;
-  const bg = selected ? theme.primary : theme.surface;
-  const textColor = selected ? theme.textInverse : theme.onBackground;
-  const descColor = selected ? theme.textInverse : theme.textSecondary;
-  const descOpacity = selected ? 0.8 : 1;
-  const radioBorderColor = selected ? theme.textInverse : theme.onBackground;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    import_react_native7.Pressable,
+  const { w, h, knob } = sizes[size];
+  const travel = w - knob - 4;
+  const anim = (0, import_react3.useRef)(new import_react_native10.Animated.Value(value ? 1 : 0)).current;
+  (0, import_react3.useEffect)(() => {
+    import_react_native10.Animated.timing(anim, { toValue: value ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+  }, [value, anim]);
+  const translateX = anim.interpolate({ inputRange: [0, 1], outputRange: [0, travel] });
+  const trackColor = disabled ? theme.bg.disabled : value ? theme.interactive.selected : theme.bg.disabled;
+  const knobColor = disabled ? theme.text.disabled : theme.text.inverse;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_native10.Pressable,
     {
-      onPress,
-      style: ({ pressed }) => [
-        styles7.container,
-        { height, paddingHorizontal: padding, gap, borderRadius, backgroundColor: bg, opacity: pressed ? 0.9 : 1 },
-        style
-      ],
-      accessibilityRole: "radio",
-      accessibilityState: { selected },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: styles7.left, children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: styles7.icon, children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: styles7.textContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles7.label, { fontSize, color: textColor, fontWeight: selected ? "700" : "500" }], children: label }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles7.description, { color: descColor, opacity: descOpacity }], children: description })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: [styles7.radio, { width: radioSize, height: radioSize, borderRadius: radioSize / 2, borderColor: radioBorderColor }] })
-      ]
+      onPress: disabled ? void 0 : () => onChange?.(!value),
+      disabled,
+      style: { width: w, height: h, borderRadius: radius.full, backgroundColor: trackColor, padding: 2, justifyContent: "center" },
+      accessibilityRole: "switch",
+      accessibilityState: { checked: value, disabled },
+      accessibilityLabel,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_react_native10.Animated.View,
+        {
+          style: { width: knob, height: knob, borderRadius: radius.full, backgroundColor: knobColor, transform: [{ translateX }] }
+        }
+      )
     }
   );
 }
-var styles7 = import_react_native7.StyleSheet.create({
-  container: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-  left: { flexDirection: "row", alignItems: "center", gap: 12 },
-  icon: { width: 20, height: 20 },
-  textContainer: { flexDirection: "column", gap: 2 },
-  label: { lineHeight: 21 },
-  description: { fontSize: 12, fontWeight: "400", lineHeight: 18, letterSpacing: 0.024 },
-  radio: { borderWidth: 1 }
-});
 
 // src/components/RadioGroup/RadioGroup.native.tsx
-var import_react_native8 = require("react-native");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react_native11 = require("react-native");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function RadioGroup({ children, label, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.View, { accessibilityRole: "radiogroup", accessibilityLabel: label, style: [{ gap: 8 }, style], children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { accessibilityRole: "radiogroup", accessibilityLabel: label, style: [{ gap: 8 }, style], children });
 }
 
-// src/components/ActionItem/ActionItem.native.tsx
-var import_react_native9 = require("react-native");
-
-// src/components/ActionItem/ActionItem.styles.ts
-var actionItemTokens = {
-  height: 56,
-  padding: 16,
-  gap: 20,
-  innerGap: 16,
-  borderRadius: 16,
-  fontSize: 14
-};
-
-// src/components/ActionItem/ActionItem.native.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function ActionItem({ label, description, selected = false, icon, onPress, style }) {
+// src/components/ChoiceCard/ChoiceCard.native.tsx
+var import_react_native12 = require("react-native");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Trailing({ type, selected, disabled }) {
   const { theme } = useTheme();
-  const { height, padding, gap, innerGap, borderRadius, fontSize } = actionItemTokens;
-  const bg = selected ? theme.border : theme.surface;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    import_react_native9.Pressable,
+  const offColor = disabled ? theme.text.disabled : theme.icon.secondary;
+  const onColor = theme.interactive.selected;
+  if (type === "action") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles9.caret, { borderColor: disabled ? theme.text.disabled : theme.icon.secondary }] });
+  }
+  if (type === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles9.indicator, styles9.checkbox, { borderColor: selected ? onColor : offColor, backgroundColor: selected ? onColor : "transparent" }], children: selected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles9.check, { borderColor: colors.white }] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles9.indicator, styles9.radio, { borderColor: selected ? onColor : offColor }], children: selected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles9.dot, { backgroundColor: onColor }] }) });
+}
+function ChoiceCard({ type = "radio", label, description, selected = false, disabled = false, leading, showTrailing = true, onPress }) {
+  const { theme } = useTheme();
+  const isSelected = type === "action" ? false : selected;
+  const baseBg = disabled ? theme.bg.surface : isSelected ? theme.bg.primarySubtle : theme.bg.surface;
+  const pressedBg = isSelected ? theme.bg.primarySubtlePressed : theme.bg.surfacePressed;
+  const borderColor = disabled ? theme.border.disabled : isSelected ? theme.border.strong : theme.border.default;
+  const textColor = disabled ? theme.text.disabled : theme.text.primary;
+  const descColor = disabled ? theme.text.disabled : theme.text.secondary;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    import_react_native12.Pressable,
     {
-      onPress,
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      accessibilityRole: type === "radio" ? "radio" : type === "checkbox" ? "checkbox" : "button",
+      accessibilityState: { selected: isSelected, checked: isSelected, disabled },
       style: ({ pressed }) => [
-        styles8.container,
+        styles9.card,
         {
-          height,
-          paddingHorizontal: padding,
-          gap,
-          borderRadius,
-          backgroundColor: bg,
-          borderWidth: selected ? 2 : 0,
-          borderColor: selected ? theme.primary : "transparent",
-          opacity: pressed ? 0.9 : 1
-        },
-        style
+          backgroundColor: !disabled && pressed ? pressedBg : baseBg,
+          borderColor,
+          borderWidth: isSelected ? borderWidth.heavy : borderWidth.default
+        }
       ],
-      accessibilityRole: "button",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: [styles8.content, { gap: innerGap }], children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { style: styles8.icon, children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles8.textContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.Text, { style: [styles8.label, { fontSize, color: theme.onBackground }], numberOfLines: 1, children: label }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.Text, { style: [styles8.description, { color: theme.textSecondary }], numberOfLines: 1, children: description })
-          ] })
+        leading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: styles9.leading, children: leading }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native12.View, { style: styles9.text, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Text, { style: [description ? typography.labelDefault : typography.bodyDefault, { color: textColor }], children: label }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Text, { style: [typography.bodyDefault, { color: descColor }], children: description }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { style: styles8.chevron, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.Text, { style: [styles8.chevronText, { color: theme.onBackground }], children: "\u203A" }) })
+        showTrailing && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Trailing, { type, selected: isSelected, disabled })
       ]
     }
   );
 }
-var styles8 = import_react_native9.StyleSheet.create({
-  container: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-  content: { flex: 1, flexDirection: "row", alignItems: "center", minWidth: 0 },
-  icon: { width: 24, height: 24, overflow: "hidden", flexShrink: 0 },
-  textContainer: { flex: 1, flexDirection: "column", gap: 4, minWidth: 0 },
-  label: { fontWeight: "500", lineHeight: 21 },
-  description: { fontSize: 12, fontWeight: "400", lineHeight: 18, letterSpacing: 0.024 },
-  chevron: { width: 24, height: 24, alignItems: "center", justifyContent: "center", flexShrink: 0 },
-  chevronText: { fontSize: 20 }
+var styles9 = import_react_native12.StyleSheet.create({
+  card: { width: "100%", flexDirection: "row", alignItems: "center", gap: 12, padding: 16, borderRadius: 20, borderStyle: "solid" },
+  leading: { width: 24, height: 24, alignItems: "center", justifyContent: "center" },
+  text: { flex: 1, flexDirection: "column", gap: 4 },
+  indicator: { width: 24, height: 24, alignItems: "center", justifyContent: "center", borderWidth: 2 },
+  checkbox: { borderRadius: 6 },
+  radio: { borderRadius: 12 },
+  dot: { width: 12, height: 12, borderRadius: 6 },
+  check: { width: 12, height: 8, borderLeftWidth: 2, borderBottomWidth: 2, transform: [{ rotate: "-45deg" }, { translateY: -1 }] },
+  caret: { width: 10, height: 10, borderTopWidth: 2, borderRightWidth: 2, transform: [{ rotate: "45deg" }] }
+});
+
+// src/components/ListItem/ListItem.native.tsx
+var import_react_native13 = require("react-native");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function TrailingVisual({ trailing, selected, disabled }) {
+  const { theme } = useTheme();
+  const offColor = disabled ? theme.text.disabled : theme.icon.secondary;
+  const onColor = theme.interactive.selected;
+  if (trailing === "action") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [styles10.caret, { borderColor: disabled ? theme.text.disabled : theme.icon.secondary }] });
+  }
+  if (trailing === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [styles10.indicator, styles10.checkbox, { borderColor: selected ? onColor : offColor, backgroundColor: selected ? onColor : "transparent" }], children: selected && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [styles10.check, { borderColor: colors.white }] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [styles10.indicator, styles10.radio, { borderColor: selected ? onColor : offColor }], children: selected && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [styles10.dot, { backgroundColor: onColor }] }) });
+}
+function ListItem({ trailing = "none", label, description, selected = false, disabled = false, leading, switchValue = false, onSwitchChange, onPress }) {
+  const { theme } = useTheme();
+  const isSelected = trailing === "radio" || trailing === "checkbox" ? selected : false;
+  const textColor = disabled ? theme.text.disabled : theme.text.primary;
+  const descColor = disabled ? theme.text.disabled : theme.text.secondary;
+  const selectedBg = theme.bg.primarySubtle;
+  const selectedPressedBg = theme.bg.primarySubtlePressed;
+  const neutralPressedBg = theme.bg.surfacePressed;
+  const rowStyle = (pressed) => [
+    styles10.row,
+    { padding: description ? 16 : 10 },
+    isSelected ? { backgroundColor: !disabled && pressed ? selectedPressedBg : selectedBg } : { backgroundColor: !disabled && pressed ? neutralPressedBg : "transparent" }
+  ];
+  const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    leading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: styles10.leading, children: leading }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native13.View, { style: styles10.text, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.Text, { style: [description ? typography.labelDefault : typography.bodyDefault, { color: textColor }], children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.Text, { style: [typography.bodyDefault, { color: descColor }], children: description }) : null
+    ] }),
+    trailing === "switch" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToggleSwitch, { size: "sm", value: switchValue, onChange: onSwitchChange, disabled, accessibilityLabel: label }) : trailing !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TrailingVisual, { trailing, selected: isSelected, disabled }) : null
+  ] });
+  if (trailing === "switch" || trailing === "none") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: rowStyle(false), children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_native13.Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      accessibilityRole: trailing === "radio" ? "radio" : trailing === "checkbox" ? "checkbox" : "button",
+      accessibilityState: { selected: isSelected, checked: isSelected, disabled },
+      style: ({ pressed }) => rowStyle(pressed),
+      children: content
+    }
+  );
+}
+var styles10 = import_react_native13.StyleSheet.create({
+  row: { width: "100%", flexDirection: "row", alignItems: "center", gap: 12 },
+  leading: { width: 24, height: 24, alignItems: "center", justifyContent: "center" },
+  text: { flex: 1, flexDirection: "column", gap: 4 },
+  indicator: { width: 24, height: 24, alignItems: "center", justifyContent: "center", borderWidth: 2 },
+  checkbox: { borderRadius: 6 },
+  radio: { borderRadius: 12 },
+  dot: { width: 12, height: 12, borderRadius: 6 },
+  check: { width: 12, height: 8, borderLeftWidth: 2, borderBottomWidth: 2, transform: [{ rotate: "-45deg" }, { translateY: -1 }] },
+  caret: { width: 10, height: 10, borderTopWidth: 2, borderRightWidth: 2, transform: [{ rotate: "45deg" }] }
 });
 
 // src/components/Stepper/Stepper.native.tsx
-var import_react_native10 = require("react-native");
+var import_react_native14 = require("react-native");
 
 // src/components/Stepper/Stepper.styles.ts
 var stepperTokens = {
-  trackHeight: 4,
-  trackRadius: 8,
-  dotSize: 4,
-  labelFontSize: 10,
+  segmentHeight: 4,
+  segmentRadius: radius.full,
   gap: 4
 };
 
 // src/components/Stepper/Stepper.native.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function Stepper({ steps, currentStep, style }) {
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Stepper({ totalSteps, currentStep, style }) {
   const { theme } = useTheme();
-  const { trackHeight, trackRadius, dotSize, labelFontSize, gap } = stepperTokens;
-  const getState = (i) => i < currentStep ? "completed" : i === currentStep ? "active" : "upcoming";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: [styles9.container, { gap }, style], children: steps.map((step, i) => {
-    const state = getState(i);
-    const isLast = i === steps.length - 1;
-    const trackBg = state === "completed" ? theme.primary : theme.border;
-    const dotBg = state === "completed" ? theme.primary : theme.border;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: { flexDirection: "row", alignItems: "flex-end", flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles9.stepItem, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: styles9.labelRow, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react_native10.Text,
-          {
-            style: [styles9.label, { fontSize: labelFontSize, color: theme.onBackground, opacity: state === "active" ? 1 : 0 }],
-            numberOfLines: 1,
-            children: step.label
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: [styles9.track, { height: trackHeight, borderRadius: trackRadius, backgroundColor: trackBg }], children: state === "active" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react_native10.View,
-          {
-            style: [styles9.trackFill, { height: trackHeight, borderRadius: trackRadius, backgroundColor: theme.onBackground, right: 12 }]
-          }
-        ) })
-      ] }),
-      !isLast && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: [styles9.dot, { width: dotSize, height: dotSize, borderRadius: dotSize / 2, backgroundColor: dotBg }] })
-    ] }, step.label);
-  }) });
+  const { segmentHeight, segmentRadius, gap } = stepperTokens;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react_native14.View,
+    {
+      style: [{ flexDirection: "row", alignItems: "flex-start", width: "100%", gap }, style],
+      accessibilityRole: "progressbar",
+      accessibilityValue: { min: 1, max: totalSteps, now: currentStep },
+      accessibilityLabel: `Etapa ${currentStep} de ${totalSteps}`,
+      children: Array.from({ length: totalSteps }, (_, i) => {
+        const color = i < currentStep - 1 ? theme.bg.primary : i === currentStep - 1 ? theme.bg.primarySubtle : theme.bg.disabled;
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native14.View, { style: { flex: 1, height: segmentHeight, borderRadius: segmentRadius, backgroundColor: color } }, i);
+      })
+    }
+  );
 }
-var styles9 = import_react_native10.StyleSheet.create({
-  container: { width: "100%", flexDirection: "row", alignItems: "flex-end" },
-  stepItem: { flex: 1, flexDirection: "column", gap: 4 },
-  labelRow: { height: 12, justifyContent: "flex-end" },
-  label: { fontWeight: "600", letterSpacing: 0.8, textTransform: "uppercase" },
-  track: { overflow: "hidden", position: "relative" },
-  trackFill: { position: "absolute", left: 0 },
-  dot: { alignSelf: "flex-end" }
-});
 
 // src/components/RatingScale/RatingScale.native.tsx
-var import_react_native11 = require("react-native");
+var import_react_native15 = require("react-native");
 
 // src/components/RatingScale/RatingScale.styles.ts
 var ratingScaleTokens = {
   itemWidth: 60,
   circleSize: 60,
-  circlePadding: 8,
   circleRadius: 30,
-  emojiFontSize: 38,
-  emojiLineHeight: 44,
-  labelFontSize: 12,
-  numberFontSize: 10,
-  itemGap: 8,
-  labelNumberGap: 11
+  emojiFontSize: 28,
+  emojiLineHeight: 34,
+  itemGap: 6
 };
 var DEFAULT_OPTIONS = [
-  { emoji: "\u{1F61E}", label: "Nada\na ver" },
-  { emoji: "\u{1F641}", label: "Pouco\na ver" },
-  { emoji: "\u{1F610}", label: "Mais ou\nmenos" },
-  { emoji: "\u{1F642}", label: "Tem\na ver" },
-  { emoji: "\u{1F60A}", label: "Totalmente\neu" }
+  { emoji: "\u{1F621}", label: "P\xE9ssimo" },
+  { emoji: "\u{1F615}", label: "Ruim" },
+  { emoji: "\u{1F610}", label: "Neutro" },
+  { emoji: "\u{1F60A}", label: "Bom" },
+  { emoji: "\u{1F60D}", label: "\xD3timo" }
 ];
 
 // src/components/RatingScale/RatingScale.native.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, style }) {
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, disabled = false, style }) {
   const { theme } = useTheme();
-  const { itemWidth, circleSize, circlePadding, circleRadius, emojiFontSize, emojiLineHeight, labelFontSize, numberFontSize, labelNumberGap } = ratingScaleTokens;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { style: [styles10.container, style], children: options.map((option, index) => {
+  const { circleSize, circleRadius, emojiFontSize, emojiLineHeight, itemGap } = ratingScaleTokens;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.View, { style: [styles11.container, style], children: options.map((option, index) => {
     const itemValue = index + 1;
     const selected = value === itemValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      import_react_native11.Pressable,
+    const circleBg = disabled ? theme.bg.disabled : selected ? theme.bg.primarySubtle : theme.bg.surface;
+    const circleBorderColor = disabled ? theme.border.disabled : selected ? theme.border.strong : theme.border.default;
+    const labelColor = disabled ? theme.text.disabled : theme.text.primary;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      import_react_native15.Pressable,
       {
-        onPress: () => onChange?.(itemValue),
-        style: styles10.item,
-        accessibilityRole: "button",
-        accessibilityState: { selected },
+        onPress: disabled ? void 0 : () => onChange?.(itemValue),
+        disabled,
+        style: [styles11.item, { gap: itemGap }],
+        accessibilityRole: "radio",
+        accessibilityState: { selected, disabled },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_react_native11.View,
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_react_native15.View,
             {
               style: [
-                styles10.circle,
+                styles11.circle,
                 {
                   width: circleSize,
                   height: circleSize,
                   borderRadius: circleRadius,
-                  padding: circlePadding,
-                  backgroundColor: selected ? theme.primary : theme.surface,
-                  borderWidth: selected ? 0 : 1,
-                  borderColor: theme.border
+                  backgroundColor: circleBg,
+                  borderWidth: selected ? borderWidth.heavy : borderWidth.default,
+                  borderColor: circleBorderColor
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Text, { style: [styles10.emoji, { fontSize: emojiFontSize, lineHeight: emojiLineHeight }], children: option.emoji })
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.Text, { style: [styles11.emoji, { fontSize: emojiFontSize, lineHeight: emojiLineHeight, opacity: disabled ? 0.4 : 1 }], children: option.emoji })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native11.View, { style: [styles10.labelContainer, { gap: labelNumberGap }], children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              import_react_native11.Text,
-              {
-                style: [
-                  styles10.label,
-                  {
-                    fontSize: labelFontSize,
-                    color: selected ? theme.primary : theme.onBackground,
-                    fontWeight: selected ? "700" : "500",
-                    width: itemWidth
-                  }
-                ],
-                children: option.label
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Text, { style: [styles10.number, { fontSize: numberFontSize, color: theme.textTertiary }], children: itemValue })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.Text, { style: [typography.caption, styles11.label, { color: labelColor }], children: option.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.Text, { style: [styles11.number, { color: theme.text.disabled }], children: itemValue })
         ]
       },
       itemValue
     );
   }) });
 }
-var styles10 = import_react_native11.StyleSheet.create({
-  container: { flexDirection: "row", justifyContent: "space-between" },
-  item: { alignItems: "center", gap: 8 },
+var styles11 = import_react_native15.StyleSheet.create({
+  container: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8, padding: 16 },
+  item: { flex: 1, alignItems: "center" },
   circle: { alignItems: "center", justifyContent: "center", overflow: "hidden" },
   emoji: { textAlign: "center" },
-  labelContainer: { alignItems: "center" },
-  label: { textAlign: "center", lineHeight: 16 },
-  number: { fontWeight: "600", letterSpacing: 0.8, textAlign: "center", lineHeight: 10 }
+  label: { textAlign: "center" },
+  number: { textAlign: "center", fontFamily: "Inter", fontSize: 10, fontWeight: "600", letterSpacing: 0.8 }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ActionItem,
   Alert,
   Button,
+  ButtonIcon,
   Checkbox,
   Chip,
+  ChoiceCard,
   DSThemeProvider,
+  DismissButton,
   Input,
+  InputField,
+  ListItem,
   ProgressBar,
   RadioGroup,
-  RadioItem,
   RatingScale,
   Stepper,
+  ToggleSwitch,
+  borderWidth,
   colors,
   darkTheme,
+  grid,
   lightTheme,
+  opacity,
+  radius,
+  shadow,
+  spacing,
   typography,
   useTheme
 });