@12min/ds 0.1.0 → 3.0.0

package/dist/index.web.js

@@ -20,88 +20,1078 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.web.ts
 var index_web_exports = {};
 __export(index_web_exports, {
+  Alert: () => Alert,
+  Button: () => Button,
+  ButtonIcon: () => ButtonIcon,
+  Checkbox: () => Checkbox,
+  Chip: () => Chip,
+  ChoiceCard: () => ChoiceCard,
+  DismissButton: () => DismissButton,
+  Input: () => Input,
+  InputField: () => InputField,
+  ListItem: () => ListItem,
+  ProgressBar: () => ProgressBar,
+  RadioGroup: () => RadioGroup,
+  RatingScale: () => RatingScale,
+  Stepper: () => Stepper,
+  ToggleSwitch: () => ToggleSwitch,
+  borderWidth: () => borderWidth,
   colors: () => colors,
   darkTheme: () => darkTheme,
-  lightTheme: () => lightTheme
+  grid: () => grid,
+  lightTheme: () => lightTheme,
+  opacity: () => opacity,
+  radius: () => radius,
+  shadow: () => shadow,
+  spacing: () => spacing,
+  typography: () => typography
 });
 module.exports = __toCommonJS(index_web_exports);
 
 // src/tokens/colors.ts
 var colors = {
-  brand: {
-    primary: "#FF6B35",
-    secondary: "#1A1A2E"
-  },
-  neutral: {
-    0: "#FFFFFF",
-    50: "#FAFAFA",
-    100: "#F5F5F5",
-    200: "#E5E5E5",
-    300: "#D4D4D4",
-    400: "#A3A3A3",
-    500: "#737373",
-    600: "#525252",
-    700: "#404040",
-    800: "#262626",
-    900: "#121212"
-  },
-  success: {
-    light: "#4ADE80",
-    default: "#22C55E",
-    dark: "#16A34A"
-  },
-  error: {
-    light: "#F87171",
-    default: "#EF4444",
-    dark: "#DC2626"
-  },
-  warning: {
-    light: "#FCD34D",
-    default: "#F59E0B",
-    dark: "#D97706"
-  },
-  info: {
-    light: "#60A5FA",
-    default: "#3B82F6",
-    dark: "#2563EB"
+  marianBlue: {
+    50: "#FAFBFF",
+    100: "#F6F8FF",
+    200: "#E1E7FF",
+    300: "#C3CCF7",
+    400: "#94A5F2",
+    500: "#697DD6",
+    600: "#4357AD",
+    700: "#31428B",
+    800: "#25326A",
+    900: "#131937"
+  },
+  midnight: {
+    50: "#707070",
+    100: "#5C5C5C",
+    200: "#525252",
+    300: "#474747",
+    400: "#3D3D3D",
+    500: "#333333",
+    600: "#292929",
+    700: "#161616",
+    800: "#141414",
+    900: "#0A0A0A"
+  },
+  gray: {
+    15: "#F4F5F8",
+    25: "#EDEEF1",
+    35: "#DDE0E6",
+    50: "#B1B5BE",
+    100: "#A6ABB5",
+    200: "#9BA0AB",
+    300: "#9095A2",
+    400: "#858B99",
+    500: "#7A8190",
+    600: "#6F7685",
+    700: "#5E6471",
+    800: "#5D636F",
+    900: "#545964"
+  },
+  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",
+    300: "#FFDF99",
+    400: "#FFD885",
+    500: "#FFD270",
+    600: "#FFCB5C",
+    700: "#FFC140",
+    800: "#FFBE33",
+    900: "#FFB81F"
+  },
+  ketchup: {
+    50: "#FEF2F2",
+    100: "#FEE2E2",
+    200: "#FECACA",
+    300: "#FCA5A5",
+    400: "#F87171",
+    500: "#EF4444",
+    600: "#DC2626",
+    700: "#B91C1C",
+    800: "#991B1B",
+    900: "#7F1D1D",
+    text: "#D91F3C"
+  },
+  green: {
+    50: "#F2FDF4",
+    100: "#E5FBE9",
+    200: "#C7F4D0",
+    300: "#99E5AC",
+    400: "#5FCD80",
+    500: "#36B260",
+    600: "#258F4B",
+    700: "#1B6F3B",
+    800: "#145430",
+    900: "#0E3622",
+    text: "#0E8745"
+  },
+  blue: {
+    50: "#EFF6FF",
+    100: "#DBEAFE",
+    200: "#BFDBFE",
+    300: "#93C5FD",
+    400: "#60A5FA",
+    500: "#3B82F6",
+    600: "#2563EB",
+    700: "#1D4ED8",
+    800: "#1E40AF",
+    900: "#1E3A8A",
+    text: "#1E40AF"
+  },
+  // Single brand accent green — the vibrant tone that was previously green/300
+  // before the green scale was retuned to muted values in the Figma v2 palette.
+  brandGreen: "#6DFFB4",
+  overlayBlack: {
+    5: "#0000000D",
+    8: "#00000014",
+    12: "#0000001F",
+    16: "#00000029"
+  },
+  overlayWhite: {
+    5: "#FFFFFF0D",
+    8: "#FFFFFF14",
+    12: "#FFFFFF1F",
+    16: "#FFFFFF29"
+  },
+  white: "#FFFFFF",
+  black: "#000000"
+};
+
+// src/tokens/typography.ts
+var typography = {
+  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.neutral[0],
-  surface: colors.neutral[100],
-  border: colors.neutral[200],
-  onBackground: colors.neutral[900],
-  onSurface: colors.neutral[800],
-  muted: colors.neutral[500],
-  primary: colors.brand.primary,
-  secondary: colors.brand.secondary,
-  success: colors.success.default,
-  error: colors.error.default,
-  warning: colors.warning.default,
-  info: colors.info.default
+  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.neutral[900],
-  surface: colors.neutral[800],
-  border: colors.neutral[700],
-  onBackground: colors.neutral[0],
-  onSurface: colors.neutral[100],
-  muted: colors.neutral[400],
-  primary: colors.brand.primary,
-  secondary: colors.brand.secondary,
-  success: colors.success.light,
-  error: colors.error.light,
-  warning: colors.warning.light,
-  info: colors.info.light
+  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
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(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 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-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-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: "lg"
+    }
+  }
+);
+function Button({ variant, size, disabled, children, onClick, type = "button", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type,
+      disabled,
+      onClick,
+      className: cn(button({ variant, size }), className),
+      children
+    }
+  );
+}
+
+// src/components/ButtonIcon/ButtonIcon.web.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+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 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: [
+        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_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(
+        "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: [
+        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_runtime6 = require("react/jsx-runtime");
+function ProgressBar({ value, className }) {
+  const pct = Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": pct,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: cn(
+        "relative h-2 w-full rounded-full bg-gray-15 overflow-hidden dark:bg-midnight-800",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "div",
+        {
+          className: "absolute inset-y-0 left-0 bg-marian-blue-600 rounded-full transition-[width]",
+          style: { width: `${pct}%` }
+        }
+      )
+    }
+  );
+}
+
+// src/components/Input/Input.web.tsx
+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_runtime7.jsxs)(
+    "div",
+    {
+      className: cn(
+        "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_runtime7.jsx)("span", { className: "shrink-0 text-current", children: leadingIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            type: "text",
+            value,
+            placeholder,
+            disabled: isDisabled,
+            onChange,
+            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_runtime9 = require("react/jsx-runtime");
+var boxSize = {
+  xs: "size-4",
+  sm: "size-5",
+  md: "size-6"
+};
+function CheckIcon() {
+  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, size = "sm", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "label",
+    {
+      className: cn(
+        "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_runtime9.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            disabled,
+            onChange: () => onChange?.(!checked),
+            className: "peer sr-only"
+          }
+        ),
+        /* @__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/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: "switch",
+      "aria-checked": value,
+      "aria-label": label,
+      disabled,
+      onClick: () => onChange?.(!value),
+      className: cn(
+        "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_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_runtime11 = require("react/jsx-runtime");
+function RadioGroup({ children, label, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cn("flex flex-col gap-2", className),
+      children
+    }
+  );
+}
+
+// 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 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 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: [
+        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 })
+        ] }),
+        showTrailing && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Trailing, { type, selected: isSelected, disabled })
+      ]
+    }
+  );
+}
+
+// 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",
+    {
+      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
+    }
+  );
+}
+
+// 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({ 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{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_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 })
+                }
+              ),
+              /* @__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 = {
+  Alert,
+  Button,
+  ButtonIcon,
+  Checkbox,
+  Chip,
+  ChoiceCard,
+  DismissButton,
+  Input,
+  InputField,
+  ListItem,
+  ProgressBar,
+  RadioGroup,
+  RatingScale,
+  Stepper,
+  ToggleSwitch,
+  borderWidth,
   colors,
   darkTheme,
-  lightTheme
+  grid,
+  lightTheme,
+  opacity,
+  radius,
+  shadow,
+  spacing,
+  typography
 });
 //# sourceMappingURL=index.web.js.map