@12min/ds 1.0.0 → 3.0.0

package/dist/index.web.js

@@ -20,20 +20,30 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.web.ts
 var index_web_exports = {};
 __export(index_web_exports, {
-  ActionItem: () => ActionItem,
   Alert: () => Alert,
   Button: () => Button,
+  ButtonIcon: () => ButtonIcon,
   Checkbox: () => Checkbox,
   Chip: () => Chip,
+  ChoiceCard: () => ChoiceCard,
+  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
 });
 module.exports = __toCommonJS(index_web_exports);
@@ -42,12 +52,12 @@ module.exports = __toCommonJS(index_web_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"
@@ -59,12 +69,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",
@@ -76,7 +89,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",
@@ -89,97 +115,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"
   },
-  mint: {
-    50: "#A7F1B7",
-    100: "#96EEA9",
-    200: "#84EB9A",
-    300: "#73E88C",
-    400: "#61E57E",
-    500: "#50E26F",
-    600: "#3EE061",
-    700: "#24DC4C",
-    800: "#22D348",
-    900: "#1FC142"
+  // 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"
+  },
+  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/components/Button/Button.web.tsx
@@ -195,23 +461,23 @@ function cn(...inputs) {
 // src/components/Button/Button.web.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var button = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center font-semibold rounded-full transition-opacity disabled:cursor-not-allowed",
+  "inline-flex items-center justify-center gap-2 rounded-full transition-colors disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white",
   {
     variants: {
       variant: {
-        primary: "bg-marian-blue-700 text-white disabled:bg-gray-50 disabled:opacity-50 dark:bg-marian-blue-400 dark:text-midnight-900 dark:disabled:bg-midnight-600",
-        secondary: "bg-marian-blue-200 text-marian-blue-900 disabled:opacity-50 dark:bg-midnight-700 dark:text-marian-blue-200",
-        ghost: "bg-transparent text-marian-blue-700 disabled:opacity-50 dark:text-marian-blue-300"
+        primary: "bg-marian-blue-600 text-white dark:text-midnight-900 enabled:hover:bg-marian-blue-700 dark:enabled:hover:bg-marian-blue-500 enabled:active:bg-marian-blue-800 dark:enabled:active:bg-marian-blue-600 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600",
+        secondary: "bg-marian-blue-200 text-marian-blue-900 dark:bg-marian-blue-900 dark:text-white enabled:hover:bg-marian-blue-300 dark:enabled:hover:bg-marian-blue-800 enabled:active:bg-marian-blue-400 dark:enabled:active:bg-marian-blue-700 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600",
+        ghost: "bg-transparent text-marian-blue-600 dark:text-marian-blue-300 enabled:hover:bg-marian-blue-200 dark:enabled:hover:bg-marian-blue-900 enabled:active:bg-marian-blue-300 dark:enabled:active:bg-marian-blue-800 disabled:text-gray-400 dark:disabled:text-gray-600"
       },
       size: {
-        sm: "h-9 px-3.5 text-sm",
-        md: "h-12 px-4 text-base",
-        lg: "h-14 px-6 text-lg"
+        sm: "h-8 px-3 text-button-small",
+        md: "h-10 px-4 text-button-default",
+        lg: "h-12 px-6 text-button-large"
       }
     },
     defaultVariants: {
       variant: "primary",
-      size: "md"
+      size: "lg"
     }
   }
 );
@@ -228,54 +494,192 @@ function Button({ variant, size, disabled, children, onClick, type = "button", c
   );
 }
 
-// src/components/Chip/Chip.web.tsx
+// src/components/ButtonIcon/ButtonIcon.web.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Chip({ children, checked = false, onClick, className }) {
+var buttonIcon = (0, import_class_variance_authority2.cva)(
+  "inline-flex items-center justify-center shrink-0 rounded-full transition-colors disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white",
+  {
+    variants: {
+      variant: {
+        primary: "bg-marian-blue-600 text-white dark:text-midnight-900 enabled:hover:bg-marian-blue-700 dark:enabled:hover:bg-marian-blue-500 enabled:active:bg-marian-blue-800 dark:enabled:active:bg-marian-blue-600 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600",
+        secondary: "bg-marian-blue-200 text-marian-blue-900 dark:bg-marian-blue-900 dark:text-white enabled:hover:bg-marian-blue-300 dark:enabled:hover:bg-marian-blue-800 enabled:active:bg-marian-blue-400 dark:enabled:active:bg-marian-blue-700 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600",
+        ghost: "bg-transparent text-marian-blue-600 dark:text-marian-blue-300 enabled:hover:bg-marian-blue-200 dark:enabled:hover:bg-marian-blue-900 enabled:active:bg-marian-blue-300 dark:enabled:active:bg-marian-blue-800 disabled:text-gray-400 dark:disabled:text-gray-600",
+        overlay: "bg-overlay-black-8 text-marian-blue-900 dark:bg-overlay-white-8 dark:text-white enabled:hover:bg-overlay-black-12 dark:enabled:hover:bg-overlay-white-12 enabled:active:bg-overlay-black-16 dark:enabled:active:bg-overlay-white-16 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600"
+      },
+      size: {
+        sm: "size-10",
+        md: "size-12",
+        lg: "size-16"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function ButtonIcon({ variant, size, icon, label, disabled, onClick, type = "button", className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type,
+      disabled,
+      onClick,
+      "aria-label": label,
+      className: cn(buttonIcon({ variant, size }), className),
+      children: icon
+    }
+  );
+}
+
+// src/components/DismissButton/DismissButton.web.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var dismissButton = (0, import_class_variance_authority3.cva)(
+  "inline-flex items-center justify-center shrink-0 rounded-full transition-colors disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white",
+  {
+    variants: {
+      variant: {
+        subtle: "bg-overlay-black-8 text-marian-blue-900 dark:bg-overlay-white-8 dark:text-white enabled:hover:bg-overlay-black-12 dark:enabled:hover:bg-overlay-white-12 enabled:active:bg-overlay-black-16 dark:enabled:active:bg-overlay-white-16 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600",
+        ghost: "bg-transparent text-marian-blue-900 dark:text-white enabled:hover:bg-marian-blue-200 dark:enabled:hover:bg-marian-blue-900 enabled:active:bg-marian-blue-300 dark:enabled:active:bg-marian-blue-800 disabled:text-gray-400 dark:disabled:text-gray-600"
+      },
+      size: {
+        xs: "size-5",
+        sm: "size-8",
+        md: "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "subtle",
+      size: "sm"
+    }
+  }
+);
+var glyphSize = {
+  xs: 12,
+  sm: 16,
+  md: 20
+};
+function DismissButton({ variant, size = "sm", label = "Fechar", disabled, onClick, className }) {
+  const s = glyphSize[size ?? "sm"];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
       type: "button",
+      disabled,
+      onClick,
+      "aria-label": label,
+      className: cn(dismissButton({ variant, size }), className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) })
+    }
+  );
+}
+
+// src/components/Chip/Chip.web.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var sizeCls = {
+  sm: "h-8 px-3 text-xs leading-4 tracking-[0.5px]",
+  md: "h-11 px-4 text-sm leading-5"
+};
+function Chip({ children, checked = false, disabled = false, size = "md", leading, trailing, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "button",
+      "aria-pressed": checked,
+      disabled,
       onClick,
       className: cn(
-        "inline-flex items-center justify-center h-12 px-4 rounded-full text-sm transition-colors",
-        checked ? "bg-marian-blue-600 text-white font-semibold dark:bg-marian-blue-500 dark:text-white" : "bg-marian-blue-100 text-marian-blue-900 font-medium dark:bg-midnight-700 dark:text-marian-blue-100",
+        "inline-flex items-center justify-center gap-2 rounded-full border border-solid transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white",
+        sizeCls[size],
+        checked ? "font-semibold" : "font-medium",
+        disabled ? "cursor-not-allowed border-gray-50 bg-gray-25 text-gray-400 dark:border-midnight-700 dark:bg-midnight-700 dark:text-gray-600" : checked ? "cursor-pointer border-marian-blue-700 bg-marian-blue-700 text-white enabled:hover:bg-marian-blue-800 enabled:active:bg-marian-blue-900 dark:border-marian-blue-800 dark:bg-marian-blue-800 dark:enabled:hover:bg-marian-blue-900" : "cursor-pointer border-marian-blue-200 bg-transparent text-marian-blue-900 enabled:hover:bg-marian-blue-700/[0.08] enabled:active:bg-marian-blue-700/[0.12] dark:border-midnight-50 dark:text-white dark:enabled:hover:bg-marian-blue-800/[0.08] dark:enabled:active:bg-marian-blue-800/[0.12]",
         className
       ),
-      children
+      children: [
+        leading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0", children: leading }),
+        children,
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0", children: trailing })
+      ]
     }
   );
 }
 
 // src/components/Alert/Alert.web.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Alert({ variant = "info", title, description, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var variantStyles = {
+  success: { bg: "bg-green-100 dark:bg-green-800", icon: "text-green-text" },
+  info: { bg: "bg-blue-100 dark:bg-blue-700", icon: "text-blue-600 dark:text-blue-100" },
+  warning: { bg: "bg-amber-100 dark:bg-amber-800", icon: "text-amber-600 dark:text-amber-100" },
+  error: { bg: "bg-ketchup-100 dark:bg-ketchup-800", icon: "text-ketchup-600 dark:text-ketchup-text" }
+};
+function AlertIcon({ variant }) {
+  const common = { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
+  switch (variant) {
+    case "success":
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ...common, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8.5 12.5 11 15l4.5-5" })
+      ] });
+    case "error":
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ...common, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 9l-6 6M9 9l6 6" })
+      ] });
+    case "warning":
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ...common, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 7.5v5M12 16h.01" })
+      ] });
+    case "info":
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ...common, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 11v5M12 8h.01" })
+      ] });
+  }
+}
+function Alert({ variant = "info", size = "default", layout = "stacked", title, description, onDismiss, className }) {
+  const styles = variantStyles[variant];
+  const pad = size === "compact" ? "p-3" : "p-5";
+  const gap = size === "compact" ? "gap-2" : "gap-3";
+  const icon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("shrink-0", styles.icon), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AlertIcon, { variant }) });
+  const body = description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-body-default text-gray-700 dark:text-gray-300 w-full", children: description });
+  const close = onDismiss && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", onClick: onDismiss, "aria-label": "Fechar", className: "shrink-0 text-marian-blue-900 dark:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
+      role: variant === "error" ? "alert" : "status",
       className: cn(
-        "w-full p-5 rounded-tl-[32px] rounded-tr-[32px] rounded-br-[32px] border border-marian-blue-200 dark:border-midnight-600",
-        variant === "success" ? "bg-success-bg dark:bg-midnight-800" : "bg-marian-blue-50 dark:bg-midnight-700",
+        "flex w-full items-start rounded-tl-2xl rounded-tr-2xl rounded-br-2xl border border-solid border-overlay-black-5 dark:border-overlay-white-5",
+        pad,
+        gap,
+        styles.bg,
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "p",
-          {
-            className: "[font-family:'Poppins',sans-serif] font-semibold text-base leading-snug text-marian-blue-900 dark:text-marian-blue-100",
-            children: title
-          }
-        ),
-        description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-3 font-medium text-sm leading-normal text-gray-700 dark:text-gray-400", children: description })
+        layout === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          icon,
+          body
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-1 flex-col gap-2 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-3", children: [
+            icon,
+            title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "flex-1 text-h3 text-marian-blue-900 dark:text-white", children: title })
+          ] }),
+          body
+        ] }),
+        close
       ]
     }
   );
 }
 
 // src/components/ProgressBar/ProgressBar.web.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ProgressBar({ value, className }) {
   const pct = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       role: "progressbar",
@@ -283,13 +687,13 @@ function ProgressBar({ value, className }) {
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       className: cn(
-        "relative h-2 w-full rounded-full bg-marian-blue-200 overflow-hidden dark:bg-midnight-600",
+        "relative h-2 w-full rounded-full bg-gray-15 overflow-hidden dark:bg-midnight-800",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "div",
         {
-          className: "absolute inset-y-0 left-0 bg-marian-blue-700 rounded-[24px] transition-[width] dark:bg-marian-blue-400",
+          className: "absolute inset-y-0 left-0 bg-marian-blue-600 rounded-full transition-[width]",
           style: { width: `${pct}%` }
         }
       )
@@ -298,22 +702,22 @@ function ProgressBar({ value, className }) {
 }
 
 // src/components/Input/Input.web.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function Input({ value, placeholder = "exemplo@email.com", state = "default", leadingIcon, onChange, className }) {
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Input({ value, placeholder = "exemplo@email.com", state = "default", leadingIcon, trailingIcon, onChange, className }) {
   const isDisabled = state === "disabled";
   const isError = state === "error";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: cn(
-        "flex items-center gap-2 h-12 px-3 rounded-xl border text-sm font-medium",
-        "focus-within:border-2 focus-within:border-marian-blue-600 dark:focus-within:border-marian-blue-400",
-        isDisabled ? "bg-marian-blue-50 border-gray-200 text-gray-200 cursor-not-allowed dark:bg-midnight-800 dark:border-midnight-500 dark:text-gray-600" : isError ? "bg-marian-blue-100 border-ketchup-600 text-ketchup-700 dark:bg-midnight-700 dark:border-ketchup-400 dark:text-ketchup-400" : "bg-marian-blue-100 border-marian-blue-200 text-gray-500 dark:bg-midnight-700 dark:border-midnight-600 dark:text-gray-500",
+        "flex items-center gap-2 h-12 px-3 rounded-input border border-solid text-body-default transition-colors",
+        "focus-within:ring-2 focus-within:ring-black dark:focus-within:ring-white",
+        isDisabled ? "bg-gray-25 border-gray-50 text-gray-400 cursor-not-allowed dark:bg-midnight-700 dark:border-midnight-700 dark:text-gray-600" : isError ? "bg-white border-ketchup-600 text-ketchup-text dark:bg-midnight-900 dark:border-ketchup-500 dark:text-ketchup-600" : "bg-white border-marian-blue-200 text-marian-blue-900 dark:bg-midnight-900 dark:border-midnight-50 dark:text-white",
         className
       ),
       children: [
-        leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "shrink-0 text-current", children: leadingIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 text-current", children: leadingIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             type: "text",
@@ -321,109 +725,152 @@ function Input({ value, placeholder = "exemplo@email.com", state = "default", le
             placeholder,
             disabled: isDisabled,
             onChange,
-            className: "flex-1 bg-transparent outline-none placeholder:text-current text-current min-w-0 focus:text-marian-blue-900 dark:focus:text-marian-blue-100"
+            className: "flex-1 bg-transparent outline-none text-current placeholder:text-gray-500 min-w-0"
           }
-        )
+        ),
+        trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 text-current", children: trailingIcon })
       ]
     }
   );
 }
 
+// src/components/InputField/InputField.web.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function InputField({
+  label,
+  required,
+  helperText,
+  error,
+  value,
+  placeholder,
+  disabled,
+  leadingIcon,
+  trailingIcon,
+  onChange,
+  className
+}) {
+  const state = disabled ? "disabled" : error ? "error" : "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("flex flex-col gap-2 w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex flex-col gap-2", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "inline-flex items-center gap-0.5 text-label-default text-marian-blue-900 dark:text-white", children: [
+        label,
+        required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", className: "text-ketchup-text dark:text-ketchup-600", children: "*" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Input,
+        {
+          state,
+          value,
+          placeholder,
+          leadingIcon,
+          trailingIcon,
+          onChange
+        }
+      )
+    ] }),
+    helperText && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("text-caption", error ? "text-ketchup-text dark:text-ketchup-600" : "text-gray-700 dark:text-gray-300"), children: helperText })
+  ] });
+}
+
 // src/components/Checkbox/Checkbox.web.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var boxSize = {
+  xs: "size-4",
+  sm: "size-5",
+  md: "size-6"
+};
 function CheckIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M1 5L4.5 8.5L11 1.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", className: "w-3/4 h-3/4", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M5 12.5 10 17.5 19 7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function Checkbox({ checked = false, onChange, disabled = false, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+function Checkbox({ checked = false, onChange, disabled = false, size = "sm", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "label",
     {
       className: cn(
-        "relative size-5 rounded-md flex items-center justify-center transition-colors",
-        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-        checked ? "bg-marian-blue-800 text-white dark:bg-marian-blue-400 dark:text-midnight-900" : "border border-marian-blue-600 bg-transparent dark:border-marian-blue-400",
+        "inline-flex items-center justify-center rounded-full p-1 transition-colors",
+        disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-marian-blue-700/[0.08] active:bg-marian-blue-700/[0.12] dark:hover:bg-marian-blue-800/[0.08] dark:active:bg-marian-blue-800/[0.12]",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "input",
           {
             type: "checkbox",
             checked,
             disabled,
             onChange: () => onChange?.(!checked),
-            className: "sr-only"
+            className: "peer sr-only"
           }
         ),
-        checked && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {})
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "span",
+          {
+            className: cn(
+              "flex items-center justify-center rounded-[6px] border-2 transition-colors",
+              "peer-focus-visible:ring-2 peer-focus-visible:ring-marian-blue-900 dark:peer-focus-visible:ring-white",
+              boxSize[size],
+              checked ? disabled ? "bg-gray-25 border-gray-25 text-gray-400 dark:bg-midnight-700 dark:border-midnight-700 dark:text-gray-600" : "bg-marian-blue-700 border-marian-blue-700 text-white dark:bg-marian-blue-800 dark:border-marian-blue-800" : disabled ? "border-gray-400 dark:border-gray-600" : "border-gray-600 dark:border-gray-400"
+            ),
+            children: checked && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckIcon, {})
+          }
+        )
       ]
     }
   );
 }
 
-// src/components/RadioItem/RadioItem.web.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function RadioIndicator({ selected }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "div",
-    {
-      className: cn(
-        "size-5 rounded-full border flex items-center justify-center shrink-0",
-        selected ? "border-marian-blue-100" : "border-marian-blue-800 dark:border-marian-blue-300"
-      ),
-      children: selected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M1 4L3.5 6.5L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-    }
-  );
-}
-function RadioItem({ label, description, selected = false, icon, onClick, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+// src/components/ToggleSwitch/ToggleSwitch.web.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var trackSize = {
+  xs: "w-8 h-5",
+  sm: "w-10 h-6",
+  md: "w-[52px] h-8"
+};
+var knobSize = {
+  xs: "size-4",
+  sm: "size-5",
+  md: "size-7"
+};
+var knobOn = {
+  xs: "translate-x-3",
+  sm: "translate-x-4",
+  md: "translate-x-5"
+};
+function ToggleSwitch({ value = false, onChange, disabled = false, size = "sm", label, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       type: "button",
-      role: "radio",
-      "aria-checked": selected,
-      onClick,
+      role: "switch",
+      "aria-checked": value,
+      "aria-label": label,
+      disabled,
+      onClick: () => onChange?.(!value),
       className: cn(
-        "flex items-center justify-between h-12 px-4 rounded-2xl transition-colors text-left",
-        selected ? "bg-marian-blue-600 text-white dark:bg-marian-blue-500" : "bg-marian-blue-100 text-marian-blue-900 dark:bg-midnight-700 dark:text-marian-blue-100",
+        "inline-flex shrink-0 items-center rounded-full p-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white",
+        trackSize[size],
+        disabled ? "cursor-not-allowed bg-gray-25 dark:bg-midnight-700" : value ? "cursor-pointer bg-marian-blue-700 dark:bg-marian-blue-800" : "cursor-pointer bg-gray-25 dark:bg-midnight-700",
         className
       ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-3", children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 size-5", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "span",
-              {
-                className: cn(
-                  "text-sm leading-normal",
-                  selected ? "font-bold" : "font-medium"
-                ),
-                children: label
-              }
-            ),
-            description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "span",
-              {
-                className: cn(
-                  "text-xs leading-normal tracking-[0.024px]",
-                  selected ? "text-current opacity-80" : "text-gray-700 dark:text-gray-500"
-                ),
-                children: description
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadioIndicator, { selected })
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "span",
+        {
+          className: cn(
+            "rounded-full transition-transform",
+            knobSize[size],
+            disabled ? "bg-gray-400 dark:bg-gray-600" : "bg-white dark:bg-midnight-900",
+            value ? knobOn[size] : "translate-x-0"
+          )
+        }
+      )
     }
   );
 }
 
 // src/components/RadioGroup/RadioGroup.web.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function RadioGroup({ children, label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       role: "radiogroup",
@@ -434,138 +881,217 @@ function RadioGroup({ children, label, className }) {
   );
 }
 
-// src/components/ActionItem/ActionItem.web.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function ChevronRight() {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width: "8", height: "14", viewBox: "0 0 8 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M1 1L7 7L1 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+// src/components/ChoiceCard/ChoiceCard.web.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function containerClass(selected, disabled) {
+  if (disabled) {
+    return "cursor-not-allowed border border-gray-50 bg-white dark:border-midnight-700 dark:bg-midnight-900";
+  }
+  if (selected) {
+    return "cursor-pointer border-2 border-marian-blue-600 bg-marian-blue-200 enabled:hover:bg-marian-blue-300 enabled:active:bg-marian-blue-400 dark:border-marian-blue-300 dark:bg-marian-blue-900 dark:enabled:hover:bg-marian-blue-800 dark:enabled:active:bg-marian-blue-700";
+  }
+  return "cursor-pointer border border-marian-blue-200 bg-white enabled:hover:bg-gray-15 enabled:active:bg-gray-35 dark:border-midnight-50 dark:bg-midnight-900 dark:enabled:hover:bg-midnight-800 dark:enabled:active:bg-midnight-600";
 }
-function ActionItem({ label, description, selected = false, icon, onClick, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+function CheckGlyph() {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", className: "w-3/4 h-3/4", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M5 12.5 10 17.5 19 7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Trailing({ type, selected, disabled }) {
+  const off = disabled ? "border-gray-400 dark:border-gray-600" : "border-gray-600 dark:border-gray-400";
+  const on = "border-marian-blue-700 dark:border-marian-blue-800";
+  if (type === "action") {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn("shrink-0", disabled ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M9 6l6 6-6 6" }) }) });
+  }
+  if (type === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn("flex size-6 shrink-0 items-center justify-center rounded-[6px] border-2", selected ? cn(on, "bg-marian-blue-700 text-white dark:bg-marian-blue-800") : off), children: selected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckGlyph, {}) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn("flex size-6 shrink-0 items-center justify-center rounded-full border-2", selected ? on : off), children: selected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "size-3 rounded-full bg-marian-blue-700 dark:bg-marian-blue-800" }) });
+}
+function ChoiceCard({ type = "radio", label, description, selected = false, disabled = false, leading, showTrailing = true, onClick, className }) {
+  const isSelected = type === "action" ? false : selected;
+  const textColor = disabled ? "text-gray-400 dark:text-gray-600" : "text-marian-blue-900 dark:text-white";
+  const descColor = disabled ? "text-gray-400 dark:text-gray-600" : "text-gray-700 dark:text-gray-300";
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "button",
     {
       type: "button",
+      role: type === "radio" ? "radio" : type === "checkbox" ? "checkbox" : "button",
+      "aria-checked": type === "action" ? void 0 : isSelected,
+      disabled,
       onClick,
       className: cn(
-        "flex items-center gap-5 h-14 px-4 rounded-2xl transition-colors text-left text-marian-blue-900 dark:text-marian-blue-100",
-        selected ? "bg-marian-blue-200 border-2 border-marian-blue-600 dark:bg-midnight-600 dark:border-marian-blue-400" : "bg-marian-blue-100 dark:bg-midnight-700",
+        "flex w-full items-center gap-3 rounded-[20px] p-4 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white",
+        containerClass(isSelected, disabled),
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-1 items-center gap-4 min-w-0", children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "shrink-0", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium leading-normal whitespace-nowrap", children: label }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-normal text-gray-700 dark:text-gray-400 leading-normal tracking-[0.024px]", children: description })
-          ] })
+        leading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex size-6 shrink-0 items-center justify-center", children: leading }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex flex-1 flex-col gap-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn("text-sm leading-5", description ? "font-semibold" : "font-medium", textColor), children: label }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn("text-sm font-medium leading-5", descColor), children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronRight, {}) })
+        showTrailing && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Trailing, { type, selected: isSelected, disabled })
       ]
     }
   );
 }
 
-// src/components/Stepper/Stepper.web.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function Dot({ state }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "div",
+// src/components/ListItem/ListItem.web.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function CheckGlyph2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", className: "w-3/4 h-3/4", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M5 12.5 10 17.5 19 7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function TrailingVisual({ trailing, selected, disabled }) {
+  const off = disabled ? "border-gray-400 dark:border-gray-600" : "border-gray-600 dark:border-gray-400";
+  const on = "border-marian-blue-700 dark:border-marian-blue-800";
+  if (trailing === "action") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("shrink-0", disabled ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M9 6l6 6-6 6" }) }) });
+  }
+  if (trailing === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("flex size-6 shrink-0 items-center justify-center rounded-[6px] border-2", selected ? cn(on, "bg-marian-blue-700 text-white dark:bg-marian-blue-800") : off), children: selected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CheckGlyph2, {}) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("flex size-6 shrink-0 items-center justify-center rounded-full border-2", selected ? on : off), children: selected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "size-3 rounded-full bg-marian-blue-700 dark:bg-marian-blue-800" }) });
+}
+function ListItem({ trailing = "none", label, description, selected = false, disabled = false, leading, switchValue = false, onSwitchChange, onClick, className }) {
+  const isSelected = trailing === "radio" || trailing === "checkbox" ? selected : false;
+  const pad = description ? "p-4" : "p-2.5";
+  const textColor = disabled ? "text-gray-400 dark:text-gray-600" : "text-marian-blue-900 dark:text-white";
+  const descColor = disabled ? "text-gray-400 dark:text-gray-600" : "text-gray-700 dark:text-gray-300";
+  const hover = disabled ? "" : isSelected ? "hover:bg-marian-blue-300 active:bg-marian-blue-400 dark:hover:bg-marian-blue-800 dark:active:bg-marian-blue-700" : "hover:bg-gray-15 active:bg-gray-35 dark:hover:bg-midnight-800 dark:active:bg-midnight-600";
+  const base = cn("flex w-full items-center gap-3 text-left transition-colors", pad, isSelected && "bg-marian-blue-200 dark:bg-marian-blue-900", hover, className);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    leading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex size-6 shrink-0 items-center justify-center", children: leading }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex flex-1 flex-col gap-1 min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("text-sm leading-5", description ? "font-semibold" : "font-medium", textColor), children: label }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("text-sm font-medium leading-5", descColor), children: description })
+    ] }),
+    trailing === "switch" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToggleSwitch, { size: "sm", value: switchValue, onChange: onSwitchChange, disabled, label }) : trailing !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TrailingVisual, { trailing, selected: isSelected, disabled }) : null
+  ] });
+  if (trailing === "switch" || trailing === "none") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: base, children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "button",
     {
-      className: cn(
-        "shrink-0 size-1 rounded-full",
-        state === "completed" ? "bg-marian-blue-600 dark:bg-marian-blue-400" : "bg-marian-blue-200 dark:bg-midnight-600"
-      )
+      type: "button",
+      role: trailing === "radio" ? "radio" : trailing === "checkbox" ? "checkbox" : "button",
+      "aria-checked": trailing === "radio" || trailing === "checkbox" ? isSelected : void 0,
+      disabled,
+      onClick,
+      className: cn(base, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white"),
+      children: content
     }
   );
 }
-function Track({ state }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full h-1 rounded-lg overflow-hidden bg-marian-blue-200 dark:bg-midnight-600", children: [
-    state === "completed" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-full w-full bg-marian-blue-600 rounded-lg dark:bg-marian-blue-400" }),
-    state === "active" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-full w-[calc(100%-12px)] bg-marian-blue-900 rounded-lg dark:bg-marian-blue-100" })
-  ] });
+
+// src/components/Stepper/Stepper.web.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function segmentClass(index, currentStep) {
+  if (index < currentStep - 1) return "bg-marian-blue-600";
+  if (index === currentStep - 1) return "bg-marian-blue-200 dark:bg-marian-blue-900";
+  return "bg-gray-25 dark:bg-midnight-700";
 }
-function Stepper({ steps, currentStep, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex items-end gap-1 w-full", className), children: steps.map((step, i) => {
-    const state = i < currentStep ? "completed" : i === currentStep ? "active" : "upcoming";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
-      state === "active" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] font-semibold text-marian-blue-900 dark:text-marian-blue-100 leading-none tracking-[0.8px] uppercase truncate", children: step.label }),
-      (state === "completed" || state === "upcoming") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-[10px]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Track, { state })
-    ] }, step.label);
-  }).reduce((acc, el, i) => {
-    if (i === 0) return [el];
-    const prevState = i - 1 < currentStep ? "completed" : i - 1 === currentStep ? "active" : "upcoming";
-    return [...acc, /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Dot, { state: prevState }, `dot-${i}`), el];
-  }, []) });
+function Stepper({ totalSteps, currentStep, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": currentStep,
+      "aria-valuemin": 1,
+      "aria-valuemax": totalSteps,
+      "aria-label": `Etapa ${currentStep} de ${totalSteps}`,
+      className: cn("flex w-full items-start gap-1", className),
+      children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { "aria-hidden": "true", className: cn("h-1 flex-1 rounded-full", segmentClass(i, currentStep)) }, i))
+    }
+  );
 }
 
 // src/components/RatingScale/RatingScale.styles.ts
 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.web.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex items-start justify-between", className), children: options.map((option, index) => {
-    const itemValue = index + 1;
-    const selected = value === itemValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChange?.(itemValue),
-        className: "flex w-[60px] flex-col items-center gap-2",
-        "aria-pressed": selected,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            "div",
-            {
-              className: cn(
-                "flex size-[60px] items-center justify-center overflow-hidden rounded-full p-[8px] transition-colors",
-                selected ? "bg-marian-blue-600" : "border border-marian-blue-200 bg-marian-blue-50 dark:border-midnight-500 dark:bg-midnight-700"
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, disabled = false, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "Avalia\xE7\xE3o de 1 a 5",
+      className: cn("flex items-center justify-center gap-2 p-4", className),
+      children: options.map((option, index) => {
+        const itemValue = index + 1;
+        const selected = value === itemValue;
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": selected,
+            "aria-label": option.label.replace("\n", " "),
+            disabled,
+            onClick: () => onChange?.(itemValue),
+            className: "flex flex-1 flex-col items-center justify-center gap-1.5 py-1 disabled:cursor-not-allowed",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "flex size-[60px] items-center justify-center overflow-hidden rounded-full transition-colors",
+                    disabled ? "border border-gray-50 bg-gray-25 dark:border-midnight-700 dark:bg-midnight-700" : selected ? "border-2 border-marian-blue-600 bg-marian-blue-200 dark:border-marian-blue-300 dark:bg-marian-blue-900" : "border border-marian-blue-200 bg-white dark:border-midnight-50 dark:bg-midnight-900"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("select-none text-[28px] leading-none", disabled && "opacity-40"), children: option.emoji })
+                }
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "select-none text-[38px] leading-none", children: option.emoji })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col items-center gap-[11px]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              "span",
-              {
-                className: cn(
-                  "w-full whitespace-pre-line text-center text-[12px] leading-[1.3] tracking-[0.06px]",
-                  selected ? "font-bold text-marian-blue-600" : "font-medium text-marian-blue-900 dark:text-marian-blue-100"
-                ),
-                children: option.label
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[10px] font-semibold leading-none tracking-[0.8px] text-gray-500", children: itemValue })
-          ] })
-        ]
-      },
-      itemValue
-    );
-  }) });
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "w-full whitespace-pre-line text-center text-caption",
+                    disabled ? "text-gray-400 dark:text-gray-600" : "text-marian-blue-900 dark:text-white"
+                  ),
+                  children: option.label
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] font-semibold leading-none tracking-[0.8px] text-gray-400 dark:text-gray-600", children: itemValue })
+            ]
+          },
+          itemValue
+        );
+      })
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ActionItem,
   Alert,
   Button,
+  ButtonIcon,
   Checkbox,
   Chip,
+  ChoiceCard,
+  DismissButton,
   Input,
+  InputField,
+  ListItem,
   ProgressBar,
   RadioGroup,
-  RadioItem,
   RatingScale,
   Stepper,
+  ToggleSwitch,
+  borderWidth,
   colors,
   darkTheme,
+  grid,
   lightTheme,
+  opacity,
+  radius,
+  shadow,
+  spacing,
   typography
 });
 //# sourceMappingURL=index.web.js.map