@12min/ds 1.0.0 → 3.0.0

package/dist/index.web.mjs

@@ -2,11 +2,17 @@ import {
   DEFAULT_OPTIONS,
   darkTheme,
   lightTheme
-} from "./chunk-CC3QVZS2.mjs";
+} from "./chunk-ZKPOS2PD.mjs";
 import {
+  borderWidth,
   colors,
+  grid,
+  opacity,
+  radius,
+  shadow,
+  spacing,
   typography
-} from "./chunk-NK4IHR7O.mjs";
+} from "./chunk-ZK7NW4WW.mjs";
 
 // src/components/Button/Button.web.tsx
 import { cva } from "class-variance-authority";
@@ -21,23 +27,23 @@ function cn(...inputs) {
 // src/components/Button/Button.web.tsx
 import { jsx } from "react/jsx-runtime";
 var button = 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"
     }
   }
 );
@@ -54,54 +60,192 @@ function Button({ variant, size, disabled, children, onClick, type = "button", c
   );
 }
 
-// src/components/Chip/Chip.web.tsx
+// src/components/ButtonIcon/ButtonIcon.web.tsx
+import { cva as cva2 } from "class-variance-authority";
 import { jsx as jsx2 } from "react/jsx-runtime";
-function Chip({ children, checked = false, onClick, className }) {
+var buttonIcon = cva2(
+  "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__ */ jsx2(
+    "button",
+    {
+      type,
+      disabled,
+      onClick,
+      "aria-label": label,
+      className: cn(buttonIcon({ variant, size }), className),
+      children: icon
+    }
+  );
+}
+
+// src/components/DismissButton/DismissButton.web.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var dismissButton = cva3(
+  "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__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick,
+      "aria-label": label,
+      className: cn(dismissButton({ variant, size }), className),
+      children: /* @__PURE__ */ jsx3("svg", { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: "M18 6 6 18M6 6l12 12" }) })
+    }
+  );
+}
+
+// src/components/Chip/Chip.web.tsx
+import { jsx as jsx4, jsxs } from "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__ */ 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__ */ jsx4("span", { className: "shrink-0", children: leading }),
+        children,
+        trailing && /* @__PURE__ */ jsx4("span", { className: "shrink-0", children: trailing })
+      ]
     }
   );
 }
 
 // src/components/Alert/Alert.web.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-function Alert({ variant = "info", title, description, className }) {
-  return /* @__PURE__ */ jsxs(
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "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__ */ jsxs2("svg", { ...common, children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx5("path", { d: "M8.5 12.5 11 15l4.5-5" })
+      ] });
+    case "error":
+      return /* @__PURE__ */ jsxs2("svg", { ...common, children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx5("path", { d: "M15 9l-6 6M9 9l6 6" })
+      ] });
+    case "warning":
+      return /* @__PURE__ */ jsxs2("svg", { ...common, children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx5("path", { d: "M12 7.5v5M12 16h.01" })
+      ] });
+    case "info":
+      return /* @__PURE__ */ jsxs2("svg", { ...common, children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx5("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__ */ jsx5("span", { className: cn("shrink-0", styles.icon), children: /* @__PURE__ */ jsx5(AlertIcon, { variant }) });
+  const body = description && /* @__PURE__ */ jsx5("p", { className: "text-body-default text-gray-700 dark:text-gray-300 w-full", children: description });
+  const close = onDismiss && /* @__PURE__ */ jsx5("button", { type: "button", onClick: onDismiss, "aria-label": "Fechar", className: "shrink-0 text-marian-blue-900 dark:text-white", children: /* @__PURE__ */ jsx5("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18M6 6l12 12" }) }) });
+  return /* @__PURE__ */ jsxs2(
     "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__ */ jsx3(
-          "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__ */ jsx3("p", { className: "mt-3 font-medium text-sm leading-normal text-gray-700 dark:text-gray-400", children: description })
+        layout === "inline" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          icon,
+          body
+        ] }) : /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-col gap-2 min-w-0", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+            icon,
+            title && /* @__PURE__ */ jsx5("p", { className: "flex-1 text-h3 text-marian-blue-900 dark:text-white", children: title })
+          ] }),
+          body
+        ] }),
+        close
       ]
     }
   );
 }
 
 // src/components/ProgressBar/ProgressBar.web.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function ProgressBar({ value, className }) {
   const pct = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       role: "progressbar",
@@ -109,13 +253,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__ */ jsx4(
+      children: /* @__PURE__ */ jsx6(
         "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}%` }
         }
       )
@@ -124,22 +268,22 @@ function ProgressBar({ value, className }) {
 }
 
 // src/components/Input/Input.web.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-function Input({ value, placeholder = "exemplo@email.com", state = "default", leadingIcon, onChange, className }) {
+import { jsx as jsx7, jsxs as jsxs3 } from "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__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "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__ */ jsx5("span", { className: "shrink-0 text-current", children: leadingIcon }),
-        /* @__PURE__ */ jsx5(
+        leadingIcon && /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-current", children: leadingIcon }),
+        /* @__PURE__ */ jsx7(
           "input",
           {
             type: "text",
@@ -147,109 +291,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__ */ jsx7("span", { className: "shrink-0 text-current", children: trailingIcon })
       ]
     }
   );
 }
 
+// src/components/InputField/InputField.web.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "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__ */ jsxs4("div", { className: cn("flex flex-col gap-2 w-full", className), children: [
+    /* @__PURE__ */ jsxs4("label", { className: "flex flex-col gap-2", children: [
+      label && /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-0.5 text-label-default text-marian-blue-900 dark:text-white", children: [
+        label,
+        required && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-ketchup-text dark:text-ketchup-600", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx8(
+        Input,
+        {
+          state,
+          value,
+          placeholder,
+          leadingIcon,
+          trailingIcon,
+          onChange
+        }
+      )
+    ] }),
+    helperText && /* @__PURE__ */ jsx8("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
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var boxSize = {
+  xs: "size-4",
+  sm: "size-5",
+  md: "size-6"
+};
 function CheckIcon() {
-  return /* @__PURE__ */ jsx6("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("path", { d: "M1 5L4.5 8.5L11 1.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "none", className: "w-3/4 h-3/4", "aria-hidden": "true", children: /* @__PURE__ */ jsx9("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__ */ jsxs3(
+function Checkbox({ checked = false, onChange, disabled = false, size = "sm", className }) {
+  return /* @__PURE__ */ jsxs5(
     "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__ */ jsx6(
+        /* @__PURE__ */ jsx9(
           "input",
           {
             type: "checkbox",
             checked,
             disabled,
             onChange: () => onChange?.(!checked),
-            className: "sr-only"
+            className: "peer sr-only"
           }
         ),
-        checked && /* @__PURE__ */ jsx6(CheckIcon, {})
+        /* @__PURE__ */ jsx9(
+          "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__ */ jsx9(CheckIcon, {})
+          }
+        )
       ]
     }
   );
 }
 
-// src/components/RadioItem/RadioItem.web.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function RadioIndicator({ selected }) {
-  return /* @__PURE__ */ jsx7(
-    "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__ */ jsx7("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("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__ */ jsxs4(
+// src/components/ToggleSwitch/ToggleSwitch.web.tsx
+import { jsx as jsx10 } from "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__ */ jsx10(
     "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__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
-          icon && /* @__PURE__ */ jsx7("span", { className: "shrink-0 size-5", children: icon }),
-          /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsx7(
-              "span",
-              {
-                className: cn(
-                  "text-sm leading-normal",
-                  selected ? "font-bold" : "font-medium"
-                ),
-                children: label
-              }
-            ),
-            description && /* @__PURE__ */ jsx7(
-              "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__ */ jsx7(RadioIndicator, { selected })
-      ]
+      children: /* @__PURE__ */ jsx10(
+        "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
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function RadioGroup({ children, label, className }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       role: "radiogroup",
@@ -260,128 +447,207 @@ function RadioGroup({ children, label, className }) {
   );
 }
 
-// src/components/ActionItem/ActionItem.web.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function ChevronRight() {
-  return /* @__PURE__ */ jsx9("svg", { width: "8", height: "14", viewBox: "0 0 8 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx9("path", { d: "M1 1L7 7L1 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+// src/components/ChoiceCard/ChoiceCard.web.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "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__ */ jsxs5(
+function CheckGlyph() {
+  return /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", fill: "none", className: "w-3/4 h-3/4", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("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__ */ jsx12("span", { className: cn("shrink-0", disabled ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400"), children: /* @__PURE__ */ jsx12("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__ */ jsx12("path", { d: "M9 6l6 6-6 6" }) }) });
+  }
+  if (type === "checkbox") {
+    return /* @__PURE__ */ jsx12("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__ */ jsx12(CheckGlyph, {}) });
+  }
+  return /* @__PURE__ */ jsx12("span", { className: cn("flex size-6 shrink-0 items-center justify-center rounded-full border-2", selected ? on : off), children: selected && /* @__PURE__ */ jsx12("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__ */ jsxs6(
     "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__ */ jsxs5("div", { className: "flex flex-1 items-center gap-4 min-w-0", children: [
-          icon && /* @__PURE__ */ jsx9("span", { className: "shrink-0", children: icon }),
-          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium leading-normal whitespace-nowrap", children: label }),
-            description && /* @__PURE__ */ jsx9("span", { className: "text-xs font-normal text-gray-700 dark:text-gray-400 leading-normal tracking-[0.024px]", children: description })
-          ] })
+        leading && /* @__PURE__ */ jsx12("span", { className: "flex size-6 shrink-0 items-center justify-center", children: leading }),
+        /* @__PURE__ */ jsxs6("span", { className: "flex flex-1 flex-col gap-1 min-w-0", children: [
+          /* @__PURE__ */ jsx12("span", { className: cn("text-sm leading-5", description ? "font-semibold" : "font-medium", textColor), children: label }),
+          description && /* @__PURE__ */ jsx12("span", { className: cn("text-sm font-medium leading-5", descColor), children: description })
         ] }),
-        /* @__PURE__ */ jsx9("span", { className: "shrink-0", children: /* @__PURE__ */ jsx9(ChevronRight, {}) })
+        showTrailing && /* @__PURE__ */ jsx12(Trailing, { type, selected: isSelected, disabled })
       ]
     }
   );
 }
 
-// src/components/Stepper/Stepper.web.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-function Dot({ state }) {
-  return /* @__PURE__ */ jsx10(
-    "div",
+// src/components/ListItem/ListItem.web.tsx
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function CheckGlyph2() {
+  return /* @__PURE__ */ jsx13("svg", { viewBox: "0 0 24 24", fill: "none", className: "w-3/4 h-3/4", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("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__ */ jsx13("span", { className: cn("shrink-0", disabled ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400"), children: /* @__PURE__ */ jsx13("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__ */ jsx13("path", { d: "M9 6l6 6-6 6" }) }) });
+  }
+  if (trailing === "checkbox") {
+    return /* @__PURE__ */ jsx13("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__ */ jsx13(CheckGlyph2, {}) });
+  }
+  return /* @__PURE__ */ jsx13("span", { className: cn("flex size-6 shrink-0 items-center justify-center rounded-full border-2", selected ? on : off), children: selected && /* @__PURE__ */ jsx13("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__ */ jsxs7(Fragment2, { children: [
+    leading && /* @__PURE__ */ jsx13("span", { className: "flex size-6 shrink-0 items-center justify-center", children: leading }),
+    /* @__PURE__ */ jsxs7("span", { className: "flex flex-1 flex-col gap-1 min-w-0", children: [
+      /* @__PURE__ */ jsx13("span", { className: cn("text-sm leading-5", description ? "font-semibold" : "font-medium", textColor), children: label }),
+      description && /* @__PURE__ */ jsx13("span", { className: cn("text-sm font-medium leading-5", descColor), children: description })
+    ] }),
+    trailing === "switch" ? /* @__PURE__ */ jsx13(ToggleSwitch, { size: "sm", value: switchValue, onChange: onSwitchChange, disabled, label }) : trailing !== "none" ? /* @__PURE__ */ jsx13(TrailingVisual, { trailing, selected: isSelected, disabled }) : null
+  ] });
+  if (trailing === "switch" || trailing === "none") {
+    return /* @__PURE__ */ jsx13("div", { className: base, children: content });
+  }
+  return /* @__PURE__ */ jsx13(
+    "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__ */ jsxs6("div", { className: "w-full h-1 rounded-lg overflow-hidden bg-marian-blue-200 dark:bg-midnight-600", children: [
-    state === "completed" && /* @__PURE__ */ jsx10("div", { className: "h-full w-full bg-marian-blue-600 rounded-lg dark:bg-marian-blue-400" }),
-    state === "active" && /* @__PURE__ */ jsx10("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
+import { jsx as jsx14 } from "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__ */ jsx10("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__ */ jsxs6("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
-      state === "active" && /* @__PURE__ */ jsx10("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__ */ jsx10("div", { className: "h-[10px]" }),
-      /* @__PURE__ */ jsx10(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__ */ jsx10(Dot, { state: prevState }, `dot-${i}`), el];
-  }, []) });
+function Stepper({ totalSteps, currentStep, className }) {
+  return /* @__PURE__ */ jsx14(
+    "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__ */ jsx14("div", { "aria-hidden": "true", className: cn("h-1 flex-1 rounded-full", segmentClass(i, currentStep)) }, i))
+    }
+  );
 }
 
 // src/components/RatingScale/RatingScale.web.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, className }) {
-  return /* @__PURE__ */ jsx11("div", { className: cn("flex items-start justify-between", className), children: options.map((option, index) => {
-    const itemValue = index + 1;
-    const selected = value === itemValue;
-    return /* @__PURE__ */ jsxs7(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChange?.(itemValue),
-        className: "flex w-[60px] flex-col items-center gap-2",
-        "aria-pressed": selected,
-        children: [
-          /* @__PURE__ */ jsx11(
-            "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"
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, disabled = false, className }) {
+  return /* @__PURE__ */ jsx15(
+    "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__ */ jsxs8(
+          "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__ */ jsx15(
+                "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__ */ jsx15("span", { className: cn("select-none text-[28px] leading-none", disabled && "opacity-40"), children: option.emoji })
+                }
               ),
-              children: /* @__PURE__ */ jsx11("span", { className: "select-none text-[38px] leading-none", children: option.emoji })
-            }
-          ),
-          /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col items-center gap-[11px]", children: [
-            /* @__PURE__ */ jsx11(
-              "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__ */ jsx11("span", { className: "text-[10px] font-semibold leading-none tracking-[0.8px] text-gray-500", children: itemValue })
-          ] })
-        ]
-      },
-      itemValue
-    );
-  }) });
+              /* @__PURE__ */ jsx15(
+                "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__ */ jsx15("span", { className: "text-[10px] font-semibold leading-none tracking-[0.8px] text-gray-400 dark:text-gray-600", children: itemValue })
+            ]
+          },
+          itemValue
+        );
+      })
+    }
+  );
 }
 export {
-  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.mjs.map