@12min/ds 1.0.0 → 3.0.0

package/dist/index.native.mjs

@@ -3,11 +3,17 @@ import {
   darkTheme,
   lightTheme,
   ratingScaleTokens
-} from "./chunk-CC3QVZS2.mjs";
+} from "./chunk-ZKPOS2PD.mjs";
 import {
+  borderWidth,
   colors,
+  grid,
+  opacity,
+  radius,
+  shadow,
+  spacing,
   typography
-} from "./chunk-NK4IHR7O.mjs";
+} from "./chunk-ZK7NW4WW.mjs";
 
 // src/context/ThemeProvider.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -33,25 +39,32 @@ import { Pressable, Text, StyleSheet } from "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
 import { jsx as jsx2 } from "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__ */ jsx2(
     Pressable,
     {
       onPress: disabled ? void 0 : onPress,
+      disabled,
       style: ({ pressed }) => [
         styles.base,
         {
@@ -59,146 +72,264 @@ 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__ */ jsx2(Text, { style: [styles.label, { fontSize: sizeStyle.fontSize, color: textColor }], children })
+      children: /* @__PURE__ */ jsx2(Text, { style: [textStyle, { color: textColor }], children })
     }
   );
 }
 var styles = 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
-import { Pressable as Pressable2, Text as Text2, StyleSheet as StyleSheet2 } from "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
+// src/components/ButtonIcon/ButtonIcon.native.tsx
+import { Pressable as Pressable2, StyleSheet as StyleSheet2 } from "react-native";
 import { jsx as jsx3 } from "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__ */ jsx3(
     Pressable2,
     {
-      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__ */ jsx3(Text2, { style: { fontSize: size.fontSize, color: textColor, fontWeight: checked ? "600" : "500" }, children })
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      children: icon
     }
   );
 }
 var styles2 = StyleSheet2.create({
-  base: { flexDirection: "row", alignItems: "center", justifyContent: "center" }
+  base: { alignItems: "center", justifyContent: "center" }
 });
 
-// src/components/Alert/Alert.native.tsx
-import { View, Text as Text3, StyleSheet as StyleSheet3 } from "react-native";
+// src/components/DismissButton/DismissButton.native.tsx
+import { Pressable as Pressable3, View, StyleSheet as StyleSheet3 } from "react-native";
+import { jsx as jsx4, jsxs } from "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__ */ jsx4(
+    Pressable3,
+    {
+      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__ */ jsxs(View, { style: { width: glyph2, height: glyph2, alignItems: "center", justifyContent: "center" }, children: [
+        /* @__PURE__ */ jsx4(View, { style: [styles3.line, { width: glyph2, backgroundColor: glyphColor, transform: [{ rotate: "45deg" }] }] }),
+        /* @__PURE__ */ jsx4(View, { style: [styles3.line, { width: glyph2, backgroundColor: glyphColor, transform: [{ rotate: "-45deg" }] }] })
+      ] })
+    }
+  );
+}
+var styles3 = StyleSheet3.create({
+  base: { alignItems: "center", justifyContent: "center" },
+  line: { position: "absolute", height: 2, borderRadius: 1 }
+});
+
+// src/components/Chip/Chip.native.tsx
+import { Pressable as Pressable4, Text as Text2, StyleSheet as StyleSheet4 } from "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
+import { jsx as jsx5, jsxs as jsxs2 } from "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__ */ jsxs2(
+    Pressable4,
+    {
+      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__ */ jsx5(Text2, { style: [textStyle, { color: textColor }], children }),
+        trailing
+      ]
+    }
+  );
+}
+var styles4 = StyleSheet4.create({
+  base: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8, borderStyle: "solid" }
+});
 
 // src/components/Alert/Alert.native.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-function Alert({ variant = "info", title, description }) {
+import { Pressable as Pressable5, View as View2, Text as Text3, StyleSheet as StyleSheet5 } from "react-native";
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "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__ */ jsxs(View, { style: [styles3.container, { backgroundColor: bg, padding, borderColor: theme.border }], children: [
-    /* @__PURE__ */ jsx4(Text3, { style: [styles3.title, { color: theme.onBackground }], children: title }),
-    description && /* @__PURE__ */ jsx4(Text3, { 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__ */ jsx6(View2, { style: [styles5.icon, { borderColor: iconColor }], children: /* @__PURE__ */ jsx6(Text3, { style: { color: iconColor, fontSize: 13, fontWeight: "700", lineHeight: 16 }, children: glyph[variant] }) });
+  const bodyEl = description ? /* @__PURE__ */ jsx6(Text3, { style: [typography.bodyDefault, { color: theme.text.secondary, flex: layout === "inline" ? 1 : void 0 }], children: description }) : null;
+  const closeEl = onDismiss ? /* @__PURE__ */ jsx6(Pressable5, { onPress: onDismiss, accessibilityRole: "button", accessibilityLabel: "Fechar", style: styles5.close, children: /* @__PURE__ */ jsx6(Text3, { style: { color: theme.text.primary, fontSize: 16, lineHeight: 20 }, children: "\u2715" }) }) : null;
+  return /* @__PURE__ */ jsxs3(
+    View2,
+    {
+      style: [styles5.container, { backgroundColor: bg, borderColor, padding, gap: outerGap }],
+      accessibilityRole: variant === "error" ? "alert" : void 0,
+      accessibilityLiveRegion: variant === "error" ? "assertive" : "polite",
+      children: [
+        layout === "inline" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          iconEl,
+          bodyEl
+        ] }) : /* @__PURE__ */ jsxs3(View2, { style: styles5.content, children: [
+          /* @__PURE__ */ jsxs3(View2, { style: styles5.header, children: [
+            iconEl,
+            title ? /* @__PURE__ */ jsx6(Text3, { style: [typography.h3, styles5.title, { color: theme.text.primary }], children: title }) : null
+          ] }),
+          bodyEl
+        ] }),
+        closeEl
+      ]
+    }
+  );
 }
-var styles3 = StyleSheet3.create({
+var styles5 = StyleSheet5.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
-import { View as View2, StyleSheet as StyleSheet4 } from "react-native";
+import { View as View3, StyleSheet as StyleSheet6 } from "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
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "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__ */ jsx5(
-    View2,
+  const trackColor = theme.bg.surfaceHover;
+  return /* @__PURE__ */ jsx7(
+    View3,
     {
-      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__ */ jsx5(View2, { style: { height, width: `${pct}%`, borderRadius: fillBorderRadius, backgroundColor: theme.primary } })
+      children: /* @__PURE__ */ jsx7(View3, { style: { height, width: `${pct}%`, borderRadius: fillBorderRadius, backgroundColor: theme.bg.primary } })
     }
   );
 }
-var styles4 = StyleSheet4.create({
+var styles6 = StyleSheet6.create({
   track: { width: "100%", overflow: "hidden" }
 });
 
 // src/components/Input/Input.native.tsx
 import { useState } from "react";
-import { View as View3, TextInput, StyleSheet as StyleSheet5 } from "react-native";
+import { View as View4, TextInput, StyleSheet as StyleSheet7 } from "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
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
-function Input({ value, placeholder = "exemplo@email.com", state = "default", leadingIcon, onChangeText, onFocus, onBlur, style }) {
+import { jsx as jsx8, jsxs as jsxs4 } from "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] = 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__ */ jsxs2(View3, { 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__ */ jsxs4(View4, { style: [styles7.container, { height, padding, gap, borderRadius, backgroundColor: bg, borderColor, borderWidth: inputBorderWidth }, style], children: [
     leadingIcon,
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx8(
       TextInput,
       {
         value,
@@ -214,322 +345,405 @@ 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 = StyleSheet5.create({
+var styles7 = StyleSheet7.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
+import { View as View5, Text as Text4 } from "react-native";
+import { jsx as jsx9, jsxs as jsxs5 } from "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__ */ jsxs5(View5, { style: { gap: 8, width: "100%" }, children: [
+    label && /* @__PURE__ */ jsxs5(Text4, { style: [typography.labelDefault, { color: theme.text.primary }], children: [
+      label,
+      required && /* @__PURE__ */ jsx9(Text4, { style: { color: theme.text.error }, children: " *" })
+    ] }),
+    /* @__PURE__ */ jsx9(
+      Input,
+      {
+        state,
+        value,
+        placeholder,
+        leadingIcon,
+        trailingIcon,
+        onChangeText,
+        onFocus,
+        onBlur
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx9(Text4, { style: [typography.caption, { color: error ? theme.text.error : theme.text.secondary }], children: helperText })
+  ] });
+}
+
 // src/components/Checkbox/Checkbox.native.tsx
-import { Pressable as Pressable3, View as View4, StyleSheet as StyleSheet6 } from "react-native";
+import { Pressable as Pressable6, View as View6, StyleSheet as StyleSheet8 } from "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
-import { jsx as jsx7 } from "react/jsx-runtime";
-function Checkbox({ checked = false, onChange, disabled = false }) {
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Checkbox({ checked = false, onChange, disabled = false, size = "sm" }) {
   const { theme } = useTheme();
-  const { size, borderRadius } = checkboxTokens;
-  return /* @__PURE__ */ jsx7(
-    Pressable3,
+  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__ */ jsx10(
+    Pressable6,
     {
       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__ */ jsx7(View4, { style: styles6.checkmark, children: /* @__PURE__ */ jsx7(View4, { style: [styles6.checkLine, { borderColor: theme.textInverse }] }) })
+      children: /* @__PURE__ */ jsx10(
+        View6,
+        {
+          style: [
+            styles8.box,
+            {
+              width: box,
+              height: box,
+              borderRadius: radius2,
+              backgroundColor: boxBg,
+              borderColor: boxBorder,
+              borderWidth: checked ? 0 : borderWidth.heavy
+            }
+          ],
+          children: checked && /* @__PURE__ */ jsx10(
+            View6,
+            {
+              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 = StyleSheet6.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 = StyleSheet8.create({
+  wrapper: { padding: 4, borderRadius: 9999, alignItems: "center", justifyContent: "center" },
+  box: { alignItems: "center", justifyContent: "center" }
 });
 
-// src/components/RadioItem/RadioItem.native.tsx
-import { Pressable as Pressable4, View as View5, Text as Text4, StyleSheet as StyleSheet7 } from "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
+import { useEffect, useRef } from "react";
+import { Pressable as Pressable7, Animated } from "react-native";
+import { jsx as jsx11 } from "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
-import { jsx as jsx8, jsxs as jsxs3 } from "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__ */ jsxs3(
-    Pressable4,
+  const { w, h, knob } = sizes[size];
+  const travel = w - knob - 4;
+  const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
+  useEffect(() => {
+    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__ */ jsx11(
+    Pressable7,
     {
-      onPress,
-      style: ({ pressed }) => [
-        styles7.container,
-        { height, paddingHorizontal: padding, gap, borderRadius, backgroundColor: bg, opacity: pressed ? 0.9 : 1 },
-        style
-      ],
-      accessibilityRole: "radio",
-      accessibilityState: { selected },
-      children: [
-        /* @__PURE__ */ jsxs3(View5, { style: styles7.left, children: [
-          icon && /* @__PURE__ */ jsx8(View5, { style: styles7.icon, children: icon }),
-          /* @__PURE__ */ jsxs3(View5, { style: styles7.textContainer, children: [
-            /* @__PURE__ */ jsx8(Text4, { style: [styles7.label, { fontSize, color: textColor, fontWeight: selected ? "700" : "500" }], children: label }),
-            description && /* @__PURE__ */ jsx8(Text4, { style: [styles7.description, { color: descColor, opacity: descOpacity }], children: description })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx8(View5, { 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__ */ jsx11(
+        Animated.View,
+        {
+          style: { width: knob, height: knob, borderRadius: radius.full, backgroundColor: knobColor, transform: [{ translateX }] }
+        }
+      )
     }
   );
 }
-var styles7 = StyleSheet7.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
-import { View as View6 } from "react-native";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { View as View7 } from "react-native";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function RadioGroup({ children, label, style }) {
-  return /* @__PURE__ */ jsx9(View6, { accessibilityRole: "radiogroup", accessibilityLabel: label, style: [{ gap: 8 }, style], children });
+  return /* @__PURE__ */ jsx12(View7, { accessibilityRole: "radiogroup", accessibilityLabel: label, style: [{ gap: 8 }, style], children });
 }
 
-// src/components/ActionItem/ActionItem.native.tsx
-import { Pressable as Pressable5, View as View7, Text as Text5, StyleSheet as StyleSheet8 } from "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
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-function ActionItem({ label, description, selected = false, icon, onPress, style }) {
+// src/components/ChoiceCard/ChoiceCard.native.tsx
+import { Pressable as Pressable8, View as View8, Text as Text5, StyleSheet as StyleSheet9 } from "react-native";
+import { jsx as jsx13, jsxs as jsxs6 } from "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__ */ jsxs4(
-    Pressable5,
+  const offColor = disabled ? theme.text.disabled : theme.icon.secondary;
+  const onColor = theme.interactive.selected;
+  if (type === "action") {
+    return /* @__PURE__ */ jsx13(View8, { style: [styles9.caret, { borderColor: disabled ? theme.text.disabled : theme.icon.secondary }] });
+  }
+  if (type === "checkbox") {
+    return /* @__PURE__ */ jsx13(View8, { style: [styles9.indicator, styles9.checkbox, { borderColor: selected ? onColor : offColor, backgroundColor: selected ? onColor : "transparent" }], children: selected && /* @__PURE__ */ jsx13(View8, { style: [styles9.check, { borderColor: colors.white }] }) });
+  }
+  return /* @__PURE__ */ jsx13(View8, { style: [styles9.indicator, styles9.radio, { borderColor: selected ? onColor : offColor }], children: selected && /* @__PURE__ */ jsx13(View8, { 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__ */ jsxs6(
+    Pressable8,
     {
-      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__ */ jsxs4(View7, { style: [styles8.content, { gap: innerGap }], children: [
-          icon && /* @__PURE__ */ jsx10(View7, { style: styles8.icon, children: icon }),
-          /* @__PURE__ */ jsxs4(View7, { style: styles8.textContainer, children: [
-            /* @__PURE__ */ jsx10(Text5, { style: [styles8.label, { fontSize, color: theme.onBackground }], numberOfLines: 1, children: label }),
-            description && /* @__PURE__ */ jsx10(Text5, { style: [styles8.description, { color: theme.textSecondary }], numberOfLines: 1, children: description })
-          ] })
+        leading && /* @__PURE__ */ jsx13(View8, { style: styles9.leading, children: leading }),
+        /* @__PURE__ */ jsxs6(View8, { style: styles9.text, children: [
+          /* @__PURE__ */ jsx13(Text5, { style: [description ? typography.labelDefault : typography.bodyDefault, { color: textColor }], children: label }),
+          description ? /* @__PURE__ */ jsx13(Text5, { style: [typography.bodyDefault, { color: descColor }], children: description }) : null
         ] }),
-        /* @__PURE__ */ jsx10(View7, { style: styles8.chevron, children: /* @__PURE__ */ jsx10(Text5, { style: [styles8.chevronText, { color: theme.onBackground }], children: "\u203A" }) })
+        showTrailing && /* @__PURE__ */ jsx13(Trailing, { type, selected: isSelected, disabled })
       ]
     }
   );
 }
-var styles8 = StyleSheet8.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 = StyleSheet9.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
+import { Pressable as Pressable9, View as View9, Text as Text6, StyleSheet as StyleSheet10 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs7 } from "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__ */ jsx14(View9, { style: [styles10.caret, { borderColor: disabled ? theme.text.disabled : theme.icon.secondary }] });
+  }
+  if (trailing === "checkbox") {
+    return /* @__PURE__ */ jsx14(View9, { style: [styles10.indicator, styles10.checkbox, { borderColor: selected ? onColor : offColor, backgroundColor: selected ? onColor : "transparent" }], children: selected && /* @__PURE__ */ jsx14(View9, { style: [styles10.check, { borderColor: colors.white }] }) });
+  }
+  return /* @__PURE__ */ jsx14(View9, { style: [styles10.indicator, styles10.radio, { borderColor: selected ? onColor : offColor }], children: selected && /* @__PURE__ */ jsx14(View9, { 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__ */ jsxs7(Fragment2, { children: [
+    leading && /* @__PURE__ */ jsx14(View9, { style: styles10.leading, children: leading }),
+    /* @__PURE__ */ jsxs7(View9, { style: styles10.text, children: [
+      /* @__PURE__ */ jsx14(Text6, { style: [description ? typography.labelDefault : typography.bodyDefault, { color: textColor }], children: label }),
+      description ? /* @__PURE__ */ jsx14(Text6, { style: [typography.bodyDefault, { color: descColor }], children: description }) : null
+    ] }),
+    trailing === "switch" ? /* @__PURE__ */ jsx14(ToggleSwitch, { size: "sm", value: switchValue, onChange: onSwitchChange, disabled, accessibilityLabel: label }) : trailing !== "none" ? /* @__PURE__ */ jsx14(TrailingVisual, { trailing, selected: isSelected, disabled }) : null
+  ] });
+  if (trailing === "switch" || trailing === "none") {
+    return /* @__PURE__ */ jsx14(View9, { style: rowStyle(false), children: content });
+  }
+  return /* @__PURE__ */ jsx14(
+    Pressable9,
+    {
+      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 = StyleSheet10.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
-import { View as View8, Text as Text6, StyleSheet as StyleSheet9 } from "react-native";
+import { View as View10 } from "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
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
-function Stepper({ steps, currentStep, style }) {
+import { jsx as jsx15 } from "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__ */ jsx11(View8, { 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__ */ jsxs5(View8, { style: { flexDirection: "row", alignItems: "flex-end", flex: 1 }, children: [
-      /* @__PURE__ */ jsxs5(View8, { style: styles9.stepItem, children: [
-        /* @__PURE__ */ jsx11(View8, { style: styles9.labelRow, children: /* @__PURE__ */ jsx11(
-          Text6,
-          {
-            style: [styles9.label, { fontSize: labelFontSize, color: theme.onBackground, opacity: state === "active" ? 1 : 0 }],
-            numberOfLines: 1,
-            children: step.label
-          }
-        ) }),
-        /* @__PURE__ */ jsx11(View8, { style: [styles9.track, { height: trackHeight, borderRadius: trackRadius, backgroundColor: trackBg }], children: state === "active" && /* @__PURE__ */ jsx11(
-          View8,
-          {
-            style: [styles9.trackFill, { height: trackHeight, borderRadius: trackRadius, backgroundColor: theme.onBackground, right: 12 }]
-          }
-        ) })
-      ] }),
-      !isLast && /* @__PURE__ */ jsx11(View8, { style: [styles9.dot, { width: dotSize, height: dotSize, borderRadius: dotSize / 2, backgroundColor: dotBg }] })
-    ] }, step.label);
-  }) });
+  const { segmentHeight, segmentRadius, gap } = stepperTokens;
+  return /* @__PURE__ */ jsx15(
+    View10,
+    {
+      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__ */ jsx15(View10, { style: { flex: 1, height: segmentHeight, borderRadius: segmentRadius, backgroundColor: color } }, i);
+      })
+    }
+  );
 }
-var styles9 = StyleSheet9.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
-import { Pressable as Pressable6, View as View9, Text as Text7, StyleSheet as StyleSheet10 } from "react-native";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, style }) {
+import { Pressable as Pressable10, View as View11, Text as Text7, StyleSheet as StyleSheet11 } from "react-native";
+import { jsx as jsx16, jsxs as jsxs8 } from "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__ */ jsx12(View9, { style: [styles10.container, style], children: options.map((option, index) => {
+  const { circleSize, circleRadius, emojiFontSize, emojiLineHeight, itemGap } = ratingScaleTokens;
+  return /* @__PURE__ */ jsx16(View11, { style: [styles11.container, style], children: options.map((option, index) => {
     const itemValue = index + 1;
     const selected = value === itemValue;
-    return /* @__PURE__ */ jsxs6(
-      Pressable6,
+    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__ */ jsxs8(
+      Pressable10,
       {
-        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__ */ jsx12(
-            View9,
+          /* @__PURE__ */ jsx16(
+            View11,
             {
               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__ */ jsx12(Text7, { style: [styles10.emoji, { fontSize: emojiFontSize, lineHeight: emojiLineHeight }], children: option.emoji })
+              children: /* @__PURE__ */ jsx16(Text7, { style: [styles11.emoji, { fontSize: emojiFontSize, lineHeight: emojiLineHeight, opacity: disabled ? 0.4 : 1 }], children: option.emoji })
             }
           ),
-          /* @__PURE__ */ jsxs6(View9, { style: [styles10.labelContainer, { gap: labelNumberGap }], children: [
-            /* @__PURE__ */ jsx12(
-              Text7,
-              {
-                style: [
-                  styles10.label,
-                  {
-                    fontSize: labelFontSize,
-                    color: selected ? theme.primary : theme.onBackground,
-                    fontWeight: selected ? "700" : "500",
-                    width: itemWidth
-                  }
-                ],
-                children: option.label
-              }
-            ),
-            /* @__PURE__ */ jsx12(Text7, { style: [styles10.number, { fontSize: numberFontSize, color: theme.textTertiary }], children: itemValue })
-          ] })
+          /* @__PURE__ */ jsx16(Text7, { style: [typography.caption, styles11.label, { color: labelColor }], children: option.label }),
+          /* @__PURE__ */ jsx16(Text7, { style: [styles11.number, { color: theme.text.disabled }], children: itemValue })
         ]
       },
       itemValue
     );
   }) });
 }
-var styles10 = StyleSheet10.create({
-  container: { flexDirection: "row", justifyContent: "space-between" },
-  item: { alignItems: "center", gap: 8 },
+var styles11 = StyleSheet11.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 }
 });
 export {
-  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
 };