@12min/ds 0.1.0 → 1.0.0

package/dist/index.web.js

@@ -20,88 +20,552 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.web.ts
 var index_web_exports = {};
 __export(index_web_exports, {
+  ActionItem: () => ActionItem,
+  Alert: () => Alert,
+  Button: () => Button,
+  Checkbox: () => Checkbox,
+  Chip: () => Chip,
+  Input: () => Input,
+  ProgressBar: () => ProgressBar,
+  RadioGroup: () => RadioGroup,
+  RadioItem: () => RadioItem,
+  RatingScale: () => RatingScale,
+  Stepper: () => Stepper,
   colors: () => colors,
   darkTheme: () => darkTheme,
-  lightTheme: () => lightTheme
+  lightTheme: () => lightTheme,
+  typography: () => typography
 });
 module.exports = __toCommonJS(index_web_exports);
 
 // src/tokens/colors.ts
 var colors = {
-  brand: {
-    primary: "#FF6B35",
-    secondary: "#1A1A2E"
+  marianBlue: {
+    50: "#FAFBFF",
+    100: "#F1F4FE",
+    200: "#E1E7FF",
+    300: "#C3CCF7",
+    400: "#94A5F2",
+    500: "#697DD6",
+    600: "#475CBB",
+    700: "#31428B",
+    800: "#25326A",
+    900: "#131937"
   },
-  neutral: {
-    0: "#FFFFFF",
-    50: "#FAFAFA",
-    100: "#F5F5F5",
-    200: "#E5E5E5",
-    300: "#D4D4D4",
-    400: "#A3A3A3",
-    500: "#737373",
-    600: "#525252",
-    700: "#404040",
-    800: "#262626",
-    900: "#121212"
+  midnight: {
+    50: "#707070",
+    100: "#5C5C5C",
+    200: "#525252",
+    300: "#474747",
+    400: "#3D3D3D",
+    500: "#333333",
+    600: "#1E1E1E",
+    700: "#161616",
+    800: "#141414",
+    900: "#0A0A0A"
   },
-  success: {
-    light: "#4ADE80",
-    default: "#22C55E",
-    dark: "#16A34A"
+  gray: {
+    50: "#B1B5BE",
+    100: "#A6ABB5",
+    200: "#9BA0AB",
+    300: "#9095A2",
+    400: "#858B99",
+    500: "#7A8190",
+    600: "#6F7685",
+    700: "#5E6471",
+    800: "#5D636F",
+    900: "#545964"
   },
-  error: {
-    light: "#F87171",
-    default: "#EF4444",
-    dark: "#DC2626"
+  mustard: {
+    50: "#FFF2D6",
+    100: "#FFECC2",
+    200: "#FFE5AD",
+    300: "#FFDF99",
+    400: "#FFD885",
+    500: "#FFD270",
+    600: "#FFCB5C",
+    700: "#FFC140",
+    800: "#FFBE33",
+    900: "#FFB81F"
   },
-  warning: {
-    light: "#FCD34D",
-    default: "#F59E0B",
-    dark: "#D97706"
+  ketchup: {
+    50: "#FFD6D6",
+    100: "#FFC2C2",
+    200: "#FFADAD",
+    300: "#FF9999",
+    400: "#FF8585",
+    500: "#FF7070",
+    600: "#FF5C5C",
+    700: "#FF4040",
+    800: "#FF3333",
+    900: "#FF1F1F"
   },
-  info: {
-    light: "#60A5FA",
-    default: "#3B82F6",
-    dark: "#2563EB"
-  }
+  mint: {
+    50: "#A7F1B7",
+    100: "#96EEA9",
+    200: "#84EB9A",
+    300: "#73E88C",
+    400: "#61E57E",
+    500: "#50E26F",
+    600: "#3EE061",
+    700: "#24DC4C",
+    800: "#22D348",
+    900: "#1FC142"
+  },
+  white: "#FFFFFF",
+  successBg: "#E5FBE9"
+};
+
+// src/tokens/typography.ts
+var typography = {
+  display: { fontSize: 32, fontWeight: "700", lineHeight: 1.2, fontFamily: "Poppins" },
+  h1: { fontSize: 24, fontWeight: "700", lineHeight: 1.3, fontFamily: "Poppins" },
+  h2: { fontSize: 20, fontWeight: "600", lineHeight: 1.3, fontFamily: "Poppins" },
+  h3: { fontSize: 18, fontWeight: "600", lineHeight: 1.4, fontFamily: "Poppins" },
+  bodyLarge: { fontSize: 16, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
+  bodyDefault: { fontSize: 14, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
+  bodySmall: { fontSize: 12, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
+  labelLarge: { fontSize: 16, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  labelDefault: { fontSize: 14, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  labelSmall: { fontSize: 12, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  caption: { fontSize: 12, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  overline: { fontSize: 10, fontWeight: "600", lineHeight: 1, fontFamily: "Inter" },
+  buttonLarge: { fontSize: 16, fontWeight: "600", lineHeight: 1.5, fontFamily: "Inter" },
+  buttonDefault: { fontSize: 14, fontWeight: "600", lineHeight: 1.5, fontFamily: "Inter" }
 };
 
 // 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
+  background: colors.marianBlue[50],
+  surface: colors.marianBlue[100],
+  border: colors.marianBlue[200],
+  onBackground: colors.midnight[900],
+  onSurface: colors.midnight[700],
+  muted: colors.gray[500],
+  primary: colors.marianBlue[600],
+  secondary: colors.midnight[900],
+  success: colors.mint[800],
+  error: colors.ketchup[600],
+  warning: colors.mustard[500],
+  info: colors.marianBlue[500],
+  surfaceDisabled: colors.gray[50],
+  successBg: colors.successBg,
+  textSecondary: colors.gray[700],
+  textTertiary: colors.gray[500],
+  textInverse: colors.white,
+  borderStrong: colors.marianBlue[600],
+  borderSubtle: colors.marianBlue[200],
+  interactivePressed: colors.marianBlue[800]
 };
 
 // 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
+  background: colors.midnight[900],
+  surface: colors.midnight[700],
+  border: colors.midnight[500],
+  onBackground: colors.marianBlue[50],
+  onSurface: colors.gray[50],
+  muted: colors.gray[600],
+  primary: colors.marianBlue[400],
+  secondary: colors.marianBlue[50],
+  success: colors.mint[400],
+  error: colors.ketchup[400],
+  warning: colors.mustard[400],
+  info: colors.marianBlue[300],
+  surfaceDisabled: colors.midnight[600],
+  successBg: colors.midnight[800],
+  textSecondary: colors.gray[400],
+  textTertiary: colors.gray[500],
+  textInverse: colors.midnight[900],
+  borderStrong: colors.marianBlue[400],
+  borderSubtle: colors.midnight[600],
+  interactivePressed: colors.marianBlue[300]
 };
+
+// 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 font-semibold rounded-full transition-opacity disabled:cursor-not-allowed",
+  {
+    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"
+      },
+      size: {
+        sm: "h-9 px-3.5 text-sm",
+        md: "h-12 px-4 text-base",
+        lg: "h-14 px-6 text-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+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/Chip/Chip.web.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Chip({ children, checked = false, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      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",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/Alert/Alert.web.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Alert({ variant = "info", title, description, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      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",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "p",
+          {
+            className: "[font-family:'Poppins',sans-serif] font-semibold text-base leading-snug text-marian-blue-900 dark:text-marian-blue-100",
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-3 font-medium text-sm leading-normal text-gray-700 dark:text-gray-400", children: description })
+      ]
+    }
+  );
+}
+
+// src/components/ProgressBar/ProgressBar.web.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ProgressBar({ value, className }) {
+  const pct = Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": pct,
+      "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",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          className: "absolute inset-y-0 left-0 bg-marian-blue-700 rounded-[24px] transition-[width] dark:bg-marian-blue-400",
+          style: { width: `${pct}%` }
+        }
+      )
+    }
+  );
+}
+
+// src/components/Input/Input.web.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Input({ value, placeholder = "exemplo@email.com", state = "default", leadingIcon, onChange, className }) {
+  const isDisabled = state === "disabled";
+  const isError = state === "error";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 h-12 px-3 rounded-xl border text-sm font-medium",
+        "focus-within:border-2 focus-within:border-marian-blue-600 dark:focus-within:border-marian-blue-400",
+        isDisabled ? "bg-marian-blue-50 border-gray-200 text-gray-200 cursor-not-allowed dark:bg-midnight-800 dark:border-midnight-500 dark:text-gray-600" : isError ? "bg-marian-blue-100 border-ketchup-600 text-ketchup-700 dark:bg-midnight-700 dark:border-ketchup-400 dark:text-ketchup-400" : "bg-marian-blue-100 border-marian-blue-200 text-gray-500 dark:bg-midnight-700 dark:border-midnight-600 dark:text-gray-500",
+        className
+      ),
+      children: [
+        leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "shrink-0 text-current", children: leadingIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            type: "text",
+            value,
+            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"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Checkbox/Checkbox.web.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CheckIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M1 5L4.5 8.5L11 1.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Checkbox({ checked = false, onChange, disabled = false, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "label",
+    {
+      className: cn(
+        "relative size-5 rounded-md flex items-center justify-center transition-colors",
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        checked ? "bg-marian-blue-800 text-white dark:bg-marian-blue-400 dark:text-midnight-900" : "border border-marian-blue-600 bg-transparent dark:border-marian-blue-400",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            disabled,
+            onChange: () => onChange?.(!checked),
+            className: "sr-only"
+          }
+        ),
+        checked && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {})
+      ]
+    }
+  );
+}
+
+// src/components/RadioItem/RadioItem.web.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function RadioIndicator({ selected }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: cn(
+        "size-5 rounded-full border flex items-center justify-center shrink-0",
+        selected ? "border-marian-blue-100" : "border-marian-blue-800 dark:border-marian-blue-300"
+      ),
+      children: selected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M1 4L3.5 6.5L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    }
+  );
+}
+function RadioItem({ label, description, selected = false, icon, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": selected,
+      onClick,
+      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",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-3", children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 size-5", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "span",
+              {
+                className: cn(
+                  "text-sm leading-normal",
+                  selected ? "font-bold" : "font-medium"
+                ),
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "span",
+              {
+                className: cn(
+                  "text-xs leading-normal tracking-[0.024px]",
+                  selected ? "text-current opacity-80" : "text-gray-700 dark:text-gray-500"
+                ),
+                children: description
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadioIndicator, { selected })
+      ]
+    }
+  );
+}
+
+// src/components/RadioGroup/RadioGroup.web.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function RadioGroup({ children, label, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cn("flex flex-col gap-2", className),
+      children
+    }
+  );
+}
+
+// src/components/ActionItem/ActionItem.web.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ChevronRight() {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width: "8", height: "14", viewBox: "0 0 8 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M1 1L7 7L1 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ActionItem({ label, description, selected = false, icon, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "button",
+    {
+      type: "button",
+      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",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-1 items-center gap-4 min-w-0", children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "shrink-0", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium leading-normal whitespace-nowrap", children: label }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-normal text-gray-700 dark:text-gray-400 leading-normal tracking-[0.024px]", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronRight, {}) })
+      ]
+    }
+  );
+}
+
+// src/components/Stepper/Stepper.web.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Dot({ state }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      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"
+      )
+    }
+  );
+}
+function Track({ state }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full h-1 rounded-lg overflow-hidden bg-marian-blue-200 dark:bg-midnight-600", children: [
+    state === "completed" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-full w-full bg-marian-blue-600 rounded-lg dark:bg-marian-blue-400" }),
+    state === "active" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-full w-[calc(100%-12px)] bg-marian-blue-900 rounded-lg dark:bg-marian-blue-100" })
+  ] });
+}
+function Stepper({ steps, currentStep, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex items-end gap-1 w-full", className), children: steps.map((step, i) => {
+    const state = i < currentStep ? "completed" : i === currentStep ? "active" : "upcoming";
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
+      state === "active" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] font-semibold text-marian-blue-900 dark:text-marian-blue-100 leading-none tracking-[0.8px] uppercase truncate", children: step.label }),
+      (state === "completed" || state === "upcoming") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-[10px]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Track, { state })
+    ] }, step.label);
+  }).reduce((acc, el, i) => {
+    if (i === 0) return [el];
+    const prevState = i - 1 < currentStep ? "completed" : i - 1 === currentStep ? "active" : "upcoming";
+    return [...acc, /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Dot, { state: prevState }, `dot-${i}`), el];
+  }, []) });
+}
+
+// src/components/RatingScale/RatingScale.styles.ts
+var DEFAULT_OPTIONS = [
+  { emoji: "\u{1F61E}", label: "Nada\na ver" },
+  { emoji: "\u{1F641}", label: "Pouco\na ver" },
+  { emoji: "\u{1F610}", label: "Mais ou\nmenos" },
+  { emoji: "\u{1F642}", label: "Tem\na ver" },
+  { emoji: "\u{1F60A}", label: "Totalmente\neu" }
+];
+
+// src/components/RatingScale/RatingScale.web.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex items-start justify-between", className), children: options.map((option, index) => {
+    const itemValue = index + 1;
+    const selected = value === itemValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange?.(itemValue),
+        className: "flex w-[60px] flex-col items-center gap-2",
+        "aria-pressed": selected,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              className: cn(
+                "flex size-[60px] items-center justify-center overflow-hidden rounded-full p-[8px] transition-colors",
+                selected ? "bg-marian-blue-600" : "border border-marian-blue-200 bg-marian-blue-50 dark:border-midnight-500 dark:bg-midnight-700"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "select-none text-[38px] leading-none", children: option.emoji })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col items-center gap-[11px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "span",
+              {
+                className: cn(
+                  "w-full whitespace-pre-line text-center text-[12px] leading-[1.3] tracking-[0.06px]",
+                  selected ? "font-bold text-marian-blue-600" : "font-medium text-marian-blue-900 dark:text-marian-blue-100"
+                ),
+                children: option.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[10px] font-semibold leading-none tracking-[0.8px] text-gray-500", children: itemValue })
+          ] })
+        ]
+      },
+      itemValue
+    );
+  }) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActionItem,
+  Alert,
+  Button,
+  Checkbox,
+  Chip,
+  Input,
+  ProgressBar,
+  RadioGroup,
+  RadioItem,
+  RatingScale,
+  Stepper,
   colors,
   darkTheme,
-  lightTheme
+  lightTheme,
+  typography
 });
 //# sourceMappingURL=index.web.js.map