@fanvue/ui 3.12.1 → 3.14.0

package/dist/cjs/components/Icons/GridViewIcon.cjs

@@ -0,0 +1,50 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const BaseIcon = require("./BaseIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const VARIANTS = {
+  16: {
+    outlined: [
+      {
+        d: "M14.667 5.68V2.653c0-.94-.427-1.32-1.487-1.32h-2.693c-1.06 0-1.487.38-1.487 1.32v3.02c0 .947.427 1.32 1.487 1.32h2.693c1.06.007 1.487-.373 1.487-1.313m0 7.5v-2.693C14.667 9.427 14.24 9 13.18 9h-2.693C9.427 9 9 9.427 9 10.487v2.693c0 1.06.427 1.487 1.487 1.487h2.693c1.06 0 1.487-.427 1.487-1.487M7 5.68V2.653c0-.94-.427-1.32-1.487-1.32H2.82c-1.06 0-1.487.38-1.487 1.32v3.02c0 .947.427 1.32 1.487 1.32h2.693C6.573 7 7 6.62 7 5.68m0 7.5v-2.693C7 9.427 6.573 9 5.513 9H2.82c-1.06 0-1.487.427-1.487 1.487v2.693c0 1.06.427 1.487 1.487 1.487h2.693C6.573 14.667 7 14.24 7 13.18"
+      }
+    ]
+  },
+  24: {
+    outlined: [
+      {
+        d: "M22 8.52V3.98C22 2.57 21.36 2 19.77 2h-4.04c-1.59 0-2.23.57-2.23 1.98v4.53c0 1.42.64 1.98 2.23 1.98h4.04c1.59.01 2.23-.56 2.23-1.97m0 11.25v-4.04c0-1.59-.64-2.23-2.23-2.23h-4.04c-1.59 0-2.23.64-2.23 2.23v4.04c0 1.59.64 2.23 2.23 2.23h4.04c1.59 0 2.23-.64 2.23-2.23M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98v4.53c0 1.42.64 1.98 2.23 1.98h4.04c1.59.01 2.23-.56 2.23-1.97m0 11.25v-4.04c0-1.59-.64-2.23-2.23-2.23H4.23c-1.59 0-2.23.64-2.23 2.23v4.04C2 21.36 2.64 22 4.23 22h4.04c1.59 0 2.23-.64 2.23-2.23"
+      }
+    ]
+  },
+  32: {
+    outlined: [
+      {
+        d: "M29.333 11.36V5.307c0-1.88-.853-2.64-2.973-2.64h-5.387c-2.12 0-2.973.76-2.973 2.64v6.04c0 1.893.853 2.64 2.973 2.64h5.387c2.12.013 2.973-.747 2.973-2.627m0 15v-5.387c0-2.12-.853-2.973-2.973-2.973h-5.387c-2.12 0-2.973.853-2.973 2.973v5.387c0 2.12.853 2.973 2.973 2.973h5.387c2.12 0 2.973-.853 2.973-2.973M14 11.36V5.307c0-1.88-.853-2.64-2.973-2.64H5.64c-2.12 0-2.973.76-2.973 2.64v6.04c0 1.893.853 2.64 2.973 2.64h5.387C13.147 14 14 13.24 14 11.36m0 15v-5.387c0-2.12-.853-2.973-2.973-2.973H5.64c-2.12 0-2.973.853-2.973 2.973v5.387c0 2.12.853 2.973 2.973 2.973h5.387c2.12 0 2.973-.853 2.973-2.973"
+      }
+    ]
+  }
+};
+const GridViewIcon = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(BaseIcon.BaseIcon, { ref, variants: VARIANTS, ...props }));
+GridViewIcon.displayName = "GridViewIcon";
+exports.GridViewIcon = GridViewIcon;
+//# sourceMappingURL=GridViewIcon.cjs.map

package/dist/cjs/components/Icons/GridViewIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridViewIcon.cjs","sources":["../../../../src/components/Icons/GridViewIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n  16: {\n    outlined: [\n      {\n        d: \"M14.667 5.68V2.653c0-.94-.427-1.32-1.487-1.32h-2.693c-1.06 0-1.487.38-1.487 1.32v3.02c0 .947.427 1.32 1.487 1.32h2.693c1.06.007 1.487-.373 1.487-1.313m0 7.5v-2.693C14.667 9.427 14.24 9 13.18 9h-2.693C9.427 9 9 9.427 9 10.487v2.693c0 1.06.427 1.487 1.487 1.487h2.693c1.06 0 1.487-.427 1.487-1.487M7 5.68V2.653c0-.94-.427-1.32-1.487-1.32H2.82c-1.06 0-1.487.38-1.487 1.32v3.02c0 .947.427 1.32 1.487 1.32h2.693C6.573 7 7 6.62 7 5.68m0 7.5v-2.693C7 9.427 6.573 9 5.513 9H2.82c-1.06 0-1.487.427-1.487 1.487v2.693c0 1.06.427 1.487 1.487 1.487h2.693C6.573 14.667 7 14.24 7 13.18\",\n      },\n    ],\n  },\n  24: {\n    outlined: [\n      {\n        d: \"M22 8.52V3.98C22 2.57 21.36 2 19.77 2h-4.04c-1.59 0-2.23.57-2.23 1.98v4.53c0 1.42.64 1.98 2.23 1.98h4.04c1.59.01 2.23-.56 2.23-1.97m0 11.25v-4.04c0-1.59-.64-2.23-2.23-2.23h-4.04c-1.59 0-2.23.64-2.23 2.23v4.04c0 1.59.64 2.23 2.23 2.23h4.04c1.59 0 2.23-.64 2.23-2.23M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98v4.53c0 1.42.64 1.98 2.23 1.98h4.04c1.59.01 2.23-.56 2.23-1.97m0 11.25v-4.04c0-1.59-.64-2.23-2.23-2.23H4.23c-1.59 0-2.23.64-2.23 2.23v4.04C2 21.36 2.64 22 4.23 22h4.04c1.59 0 2.23-.64 2.23-2.23\",\n      },\n    ],\n  },\n  32: {\n    outlined: [\n      {\n        d: \"M29.333 11.36V5.307c0-1.88-.853-2.64-2.973-2.64h-5.387c-2.12 0-2.973.76-2.973 2.64v6.04c0 1.893.853 2.64 2.973 2.64h5.387c2.12.013 2.973-.747 2.973-2.627m0 15v-5.387c0-2.12-.853-2.973-2.973-2.973h-5.387c-2.12 0-2.973.853-2.973 2.973v5.387c0 2.12.853 2.973 2.973 2.973h5.387c2.12 0 2.973-.853 2.973-2.973M14 11.36V5.307c0-1.88-.853-2.64-2.973-2.64H5.64c-2.12 0-2.973.76-2.973 2.64v6.04c0 1.893.853 2.64 2.973 2.64h5.387C13.147 14 14 13.24 14 11.36m0 15v-5.387c0-2.12-.853-2.973-2.973-2.973H5.64c-2.12 0-2.973.853-2.973 2.973v5.387c0 2.12.853 2.973 2.973 2.973h5.387c2.12 0 2.973-.853 2.973-2.973\",\n      },\n    ],\n  },\n};\n\n/** Props for {@link GridViewIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type GridViewIconProps = BaseIconProps;\n\n/**\n * Grid view icon. Renders at sizes 16, 24, or 32 px.\n *\n * @example\n * ```tsx\n * <GridViewIcon size={24} />\n * ```\n */\nexport const GridViewIcon = React.forwardRef<SVGSVGElement, GridViewIconProps>((props, ref) => (\n  <BaseIcon ref={ref} variants={VARIANTS} {...props} />\n));\n\nGridViewIcon.displayName = \"GridViewIcon\";\n"],"names":["React","jsx","BaseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAaO,MAAM,eAAeA,iBAAM,WAA6C,CAAC,OAAO,QACrFC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,KAAU,UAAU,UAAW,GAAG,OAAO,CACpD;AAED,aAAa,cAAc;;"}

package/dist/cjs/components/Icons/ListViewIcon.cjs

@@ -0,0 +1,50 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const BaseIcon = require("./BaseIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const VARIANTS = {
+  16: {
+    outlined: [
+      {
+        d: "M13.267 9H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487v-2.693c0-1.06-.4-1.487-1.4-1.487m0-7.667H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487V2.82c0-1.06-.4-1.487-1.4-1.487"
+      }
+    ]
+  },
+  24: {
+    outlined: [
+      {
+        d: "M19.9 13.5H4.1c-1.5 0-2.1.64-2.1 2.23v4.04C2 21.36 2.6 22 4.1 22h15.8c1.5 0 2.1-.64 2.1-2.23v-4.04c0-1.59-.6-2.23-2.1-2.23m0-11.5H4.1C2.6 2 2 2.64 2 4.23v4.04c0 1.59.6 2.23 2.1 2.23h15.8c1.5 0 2.1-.64 2.1-2.23V4.23C22 2.64 21.4 2 19.9 2"
+      }
+    ]
+  },
+  32: {
+    outlined: [
+      {
+        d: "M26.533 18H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.853 2.8-2.973v-5.387c0-2.12-.8-2.973-2.8-2.973m0-15.333H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.854 2.8-2.973V5.64c0-2.12-.8-2.973-2.8-2.973"
+      }
+    ]
+  }
+};
+const ListViewIcon = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(BaseIcon.BaseIcon, { ref, variants: VARIANTS, ...props }));
+ListViewIcon.displayName = "ListViewIcon";
+exports.ListViewIcon = ListViewIcon;
+//# sourceMappingURL=ListViewIcon.cjs.map

package/dist/cjs/components/Icons/ListViewIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListViewIcon.cjs","sources":["../../../../src/components/Icons/ListViewIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n  16: {\n    outlined: [\n      {\n        d: \"M13.267 9H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487v-2.693c0-1.06-.4-1.487-1.4-1.487m0-7.667H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487V2.82c0-1.06-.4-1.487-1.4-1.487\",\n      },\n    ],\n  },\n  24: {\n    outlined: [\n      {\n        d: \"M19.9 13.5H4.1c-1.5 0-2.1.64-2.1 2.23v4.04C2 21.36 2.6 22 4.1 22h15.8c1.5 0 2.1-.64 2.1-2.23v-4.04c0-1.59-.6-2.23-2.1-2.23m0-11.5H4.1C2.6 2 2 2.64 2 4.23v4.04c0 1.59.6 2.23 2.1 2.23h15.8c1.5 0 2.1-.64 2.1-2.23V4.23C22 2.64 21.4 2 19.9 2\",\n      },\n    ],\n  },\n  32: {\n    outlined: [\n      {\n        d: \"M26.533 18H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.853 2.8-2.973v-5.387c0-2.12-.8-2.973-2.8-2.973m0-15.333H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.854 2.8-2.973V5.64c0-2.12-.8-2.973-2.8-2.973\",\n      },\n    ],\n  },\n};\n\n/** Props for {@link ListViewIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type ListViewIconProps = BaseIconProps;\n\n/**\n * List view icon. Renders at sizes 16, 24, or 32 px.\n *\n * @example\n * ```tsx\n * <ListViewIcon size={24} />\n * ```\n */\nexport const ListViewIcon = React.forwardRef<SVGSVGElement, ListViewIconProps>((props, ref) => (\n  <BaseIcon ref={ref} variants={VARIANTS} {...props} />\n));\n\nListViewIcon.displayName = \"ListViewIcon\";\n"],"names":["React","jsx","BaseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAaO,MAAM,eAAeA,iBAAM,WAA6C,CAAC,OAAO,QACrFC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,KAAU,UAAU,UAAW,GAAG,OAAO,CACpD;AAED,aAAa,cAAc;;"}

package/dist/cjs/components/ProgressBar/ProgressBar.cjs

@@ -40,11 +40,36 @@ function getDefaultTextColor(value) {
   return "text-error-content";
 }
 function resolveColors(variant, value) {
+  const neutralTrack = "bg-neutral-alphas-50";
+  if (variant === "brand")
+    return {
+      barColor: "bg-progress-bar-brand-active",
+      textColor: "text-brand-primary-default",
+      trackColor: "bg-progress-bar-brand-inactive"
+    };
+  if (variant === "mono")
+    return {
+      barColor: "bg-progress-bar-mono-active",
+      textColor: "text-content-primary",
+      trackColor: "bg-progress-bar-mono-inactive"
+    };
   if (variant === "neutral")
-    return { barColor: "bg-content-tertiary", textColor: "text-content-tertiary" };
+    return {
+      barColor: "bg-content-tertiary",
+      textColor: "text-content-tertiary",
+      trackColor: neutralTrack
+    };
   if (variant === "generic")
-    return { barColor: "bg-brand-primary-default", textColor: "text-brand-primary-default" };
-  return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };
+    return {
+      barColor: "bg-brand-primary-default",
+      textColor: "text-brand-primary-default",
+      trackColor: neutralTrack
+    };
+  return {
+    barColor: getDefaultBarColor(value),
+    textColor: getDefaultTextColor(value),
+    trackColor: neutralTrack
+  };
 }
 const ProgressBar = React__namespace.forwardRef(
   ({
@@ -64,7 +89,7 @@ const ProgressBar = React__namespace.forwardRef(
   }, ref) => {
     const clampedValue = Math.min(100, Math.max(0, value));
     const isSmall = size === "small";
-    const { barColor, textColor } = resolveColors(variant, clampedValue);
+    const { barColor, textColor, trackColor } = resolveColors(variant, clampedValue);
     const showHeader = title != null || showCompletion || stepsLabel != null;
     const showFooter = leftIcon != null || helperLeft != null || helperRight != null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex w-full flex-col", GAP[size], className), ...props, children: [
@@ -94,7 +119,7 @@ const ProgressBar = React__namespace.forwardRef(
           "aria-valuemin": 0,
           "aria-valuemax": 100,
           "aria-valuetext": ariaValueText,
-          className: cn.cn("relative w-full rounded-full bg-neutral-alphas-50", TRACK_HEIGHT[size]),
+          className: cn.cn("relative w-full rounded-full", trackColor, TRACK_HEIGHT[size]),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {

package/dist/cjs/components/ProgressBar/ProgressBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Track height — `\"default\"` (12px) or `\"small\"` (6px). */\nexport type ProgressBarSize = \"default\" | \"small\";\n/** Colour mode — `\"default\"` uses red/yellow/green by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. */\nexport type ProgressBarVariant = \"default\" | \"generic\" | \"neutral\";\n\nexport interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Current progress value, clamped to 0–100. */\n  value: number;\n  /** Track height — `\"default\"` (12px) or `\"small\"` (6px). @default \"default\" */\n  size?: ProgressBarSize;\n  /** Colour mode — `\"default\"` is colour-coded by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. @default \"default\" */\n  variant?: ProgressBarVariant;\n  /** Title content shown at the top-left of the bar. */\n  title?: React.ReactNode;\n  /** Whether to display the completion percentage above the track. @default false */\n  showCompletion?: boolean;\n  /** Steps label shown at the top-right (e.g. `\"2/8 steps\"`). */\n  stepsLabel?: React.ReactNode;\n  /** Helper content at the bottom-left of the bar. */\n  helperLeft?: React.ReactNode;\n  /** Helper content at the bottom-right of the bar. */\n  helperRight?: React.ReactNode;\n  /** Icon shown at the bottom-left before the helper text. */\n  leftIcon?: React.ReactNode;\n  /** Accessible label for the `progressbar` role. @default \"Progress\" */\n  ariaLabel?: string;\n  /** Human-readable text alternative for the current value (e.g. \"Step 3 of 5\"). */\n  ariaValueText?: string;\n}\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  default: \"h-3\",\n  small: \"h-1.5\",\n};\n\nconst GAP: Record<ProgressBarSize, string> = {\n  default: \"gap-3\",\n  small: \"gap-1\",\n};\n\nfunction getDefaultBarColor(value: number): string {\n  if (value >= 100) return \"bg-success-content\";\n  if (value >= 40) return \"bg-warning-content\";\n  return \"bg-error-content\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n  if (value >= 100) return \"text-success-content\";\n  if (value >= 40) return \"text-warning-content\";\n  return \"text-error-content\";\n}\n\nfunction resolveColors(\n  variant: ProgressBarVariant,\n  value: number,\n): { barColor: string; textColor: string } {\n  if (variant === \"neutral\")\n    return { barColor: \"bg-content-tertiary\", textColor: \"text-content-tertiary\" };\n  if (variant === \"generic\")\n    return { barColor: \"bg-brand-primary-default\", textColor: \"text-brand-primary-default\" };\n  return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };\n}\n\n/**\n * A horizontal progress indicator with optional title, completion percentage,\n * step count, and helper text. The bar colour reflects progress when using the\n * `\"default\"` variant.\n *\n * @example\n * ```tsx\n * <ProgressBar value={65} title=\"Upload\" showCompletion />\n * ```\n */\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value,\n      size = \"default\",\n      variant = \"default\",\n      title,\n      showCompletion = false,\n      stepsLabel,\n      helperLeft,\n      helperRight,\n      leftIcon,\n      ariaLabel,\n      ariaValueText,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const isSmall = size === \"small\";\n    const { barColor, textColor } = resolveColors(variant, clampedValue);\n\n    const showHeader = title != null || showCompletion || stepsLabel != null;\n    const showFooter = leftIcon != null || helperLeft != null || helperRight != null;\n\n    return (\n      <div ref={ref} className={cn(\"flex w-full flex-col\", GAP[size], className)} {...props}>\n        {showHeader && (\n          <div className=\"flex w-full items-end justify-between\">\n            {title != null && (\n              <p className=\"typography-description-12px-semibold text-content-primary\">{title}</p>\n            )}\n            {showCompletion && (\n              <span\n                className={cn(\n                  textColor,\n                  isSmall ? \"typography-header-heading-sm\" : \"typography-header-heading-xl\",\n                )}\n              >\n                {Math.round(clampedValue)}%\n              </span>\n            )}\n            {stepsLabel != null && (\n              <span className=\"typography-description-12px-regular text-content-primary\">\n                {stepsLabel}\n              </span>\n            )}\n          </div>\n        )}\n\n        <div\n          role=\"progressbar\"\n          aria-label={ariaLabel ?? \"Progress\"}\n          aria-valuenow={clampedValue}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuetext={ariaValueText}\n          className={cn(\"relative w-full rounded-full bg-neutral-alphas-50\", TRACK_HEIGHT[size])}\n        >\n          <div\n            className={cn(\n              \"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-in-out\",\n              barColor,\n            )}\n            style={{ width: `${clampedValue}%` }}\n          />\n        </div>\n\n        {showFooter && (\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"flex items-center gap-1\">\n              {leftIcon != null && (\n                <span className=\"flex size-5 items-center justify-center\" aria-hidden=\"true\">\n                  {leftIcon}\n                </span>\n              )}\n              {helperLeft != null && (\n                <span className=\"typography-description-12px-regular text-content-primary\">\n                  {helperLeft}\n                </span>\n              )}\n            </div>\n            {helperRight != null && (\n              <span className=\"typography-description-12px-regular text-content-primary\">\n                {helperRight}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":"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"}
+{"version":3,"file":"ProgressBar.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Track height — `\"default\"` (12px) or `\"small\"` (6px). */\nexport type ProgressBarSize = \"default\" | \"small\";\n/**\n * Colour mode.\n * - `\"brand\"` — V2 brand (green) fill on a tinted track.\n * - `\"mono\"` — V2 monochrome fill on a tinted track (theme-aware).\n * - `\"default\"` — legacy value-coded red/yellow/green.\n * - `\"generic\"` — legacy solid brand green on a neutral track.\n * - `\"neutral\"` — legacy theme-aware inverse colour on a neutral track.\n */\nexport type ProgressBarVariant = \"brand\" | \"mono\" | \"default\" | \"generic\" | \"neutral\";\n\nexport interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Current progress value, clamped to 0–100. */\n  value: number;\n  /** Track height — `\"default\"` (12px) or `\"small\"` (6px). @default \"default\" */\n  size?: ProgressBarSize;\n  /** Colour mode. Prefer `\"brand\"` or `\"mono\"` (V2); `\"default\"`/`\"generic\"`/`\"neutral\"` are legacy. @default \"default\" */\n  variant?: ProgressBarVariant;\n  /** Title content shown at the top-left of the bar. */\n  title?: React.ReactNode;\n  /** Whether to display the completion percentage above the track. @default false */\n  showCompletion?: boolean;\n  /** Steps label shown at the top-right (e.g. `\"2/8 steps\"`). */\n  stepsLabel?: React.ReactNode;\n  /** Helper content at the bottom-left of the bar. */\n  helperLeft?: React.ReactNode;\n  /** Helper content at the bottom-right of the bar. */\n  helperRight?: React.ReactNode;\n  /** Icon shown at the bottom-left before the helper text. */\n  leftIcon?: React.ReactNode;\n  /** Accessible label for the `progressbar` role. @default \"Progress\" */\n  ariaLabel?: string;\n  /** Human-readable text alternative for the current value (e.g. \"Step 3 of 5\"). */\n  ariaValueText?: string;\n}\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  default: \"h-3\",\n  small: \"h-1.5\",\n};\n\nconst GAP: Record<ProgressBarSize, string> = {\n  default: \"gap-3\",\n  small: \"gap-1\",\n};\n\nfunction getDefaultBarColor(value: number): string {\n  if (value >= 100) return \"bg-success-content\";\n  if (value >= 40) return \"bg-warning-content\";\n  return \"bg-error-content\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n  if (value >= 100) return \"text-success-content\";\n  if (value >= 40) return \"text-warning-content\";\n  return \"text-error-content\";\n}\n\nfunction resolveColors(\n  variant: ProgressBarVariant,\n  value: number,\n): { barColor: string; textColor: string; trackColor: string } {\n  const neutralTrack = \"bg-neutral-alphas-50\";\n  if (variant === \"brand\")\n    return {\n      barColor: \"bg-progress-bar-brand-active\",\n      textColor: \"text-brand-primary-default\",\n      trackColor: \"bg-progress-bar-brand-inactive\",\n    };\n  if (variant === \"mono\")\n    return {\n      barColor: \"bg-progress-bar-mono-active\",\n      textColor: \"text-content-primary\",\n      trackColor: \"bg-progress-bar-mono-inactive\",\n    };\n  if (variant === \"neutral\")\n    return {\n      barColor: \"bg-content-tertiary\",\n      textColor: \"text-content-tertiary\",\n      trackColor: neutralTrack,\n    };\n  if (variant === \"generic\")\n    return {\n      barColor: \"bg-brand-primary-default\",\n      textColor: \"text-brand-primary-default\",\n      trackColor: neutralTrack,\n    };\n  return {\n    barColor: getDefaultBarColor(value),\n    textColor: getDefaultTextColor(value),\n    trackColor: neutralTrack,\n  };\n}\n\n/**\n * A horizontal progress indicator with optional title, completion percentage,\n * step count, and helper text. The bar colour reflects progress when using the\n * `\"default\"` variant.\n *\n * @example\n * ```tsx\n * <ProgressBar value={65} title=\"Upload\" showCompletion />\n * ```\n */\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value,\n      size = \"default\",\n      variant = \"default\",\n      title,\n      showCompletion = false,\n      stepsLabel,\n      helperLeft,\n      helperRight,\n      leftIcon,\n      ariaLabel,\n      ariaValueText,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const isSmall = size === \"small\";\n    const { barColor, textColor, trackColor } = resolveColors(variant, clampedValue);\n\n    const showHeader = title != null || showCompletion || stepsLabel != null;\n    const showFooter = leftIcon != null || helperLeft != null || helperRight != null;\n\n    return (\n      <div ref={ref} className={cn(\"flex w-full flex-col\", GAP[size], className)} {...props}>\n        {showHeader && (\n          <div className=\"flex w-full items-end justify-between\">\n            {title != null && (\n              <p className=\"typography-description-12px-semibold text-content-primary\">{title}</p>\n            )}\n            {showCompletion && (\n              <span\n                className={cn(\n                  textColor,\n                  isSmall ? \"typography-header-heading-sm\" : \"typography-header-heading-xl\",\n                )}\n              >\n                {Math.round(clampedValue)}%\n              </span>\n            )}\n            {stepsLabel != null && (\n              <span className=\"typography-description-12px-regular text-content-primary\">\n                {stepsLabel}\n              </span>\n            )}\n          </div>\n        )}\n\n        <div\n          role=\"progressbar\"\n          aria-label={ariaLabel ?? \"Progress\"}\n          aria-valuenow={clampedValue}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuetext={ariaValueText}\n          className={cn(\"relative w-full rounded-full\", trackColor, TRACK_HEIGHT[size])}\n        >\n          <div\n            className={cn(\n              \"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-in-out\",\n              barColor,\n            )}\n            style={{ width: `${clampedValue}%` }}\n          />\n        </div>\n\n        {showFooter && (\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"flex items-center gap-1\">\n              {leftIcon != null && (\n                <span className=\"flex size-5 items-center justify-center\" aria-hidden=\"true\">\n                  {leftIcon}\n                </span>\n              )}\n              {helperLeft != null && (\n                <span className=\"typography-description-12px-regular text-content-primary\">\n                  {helperLeft}\n                </span>\n              )}\n            </div>\n            {helperRight != null && (\n              <span className=\"typography-description-12px-regular text-content-primary\">\n                {helperRight}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":"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"}

package/dist/cjs/components/ProgressBar/ProgressBarItem.cjs

@@ -0,0 +1,49 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ACTIVE_COLOR = {
+  brand: "bg-progress-bar-brand-active",
+  mono: "bg-progress-bar-mono-active"
+};
+const INACTIVE_COLOR = {
+  brand: "bg-progress-bar-brand-inactive",
+  mono: "bg-progress-bar-mono-inactive"
+};
+const ProgressBarItem = React__namespace.forwardRef(
+  ({ active = false, variant = "brand", size = "default", className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn.cn(
+        "w-full rounded-full",
+        size === "small" ? "h-1" : "h-2",
+        active ? ACTIVE_COLOR[variant] : INACTIVE_COLOR[variant],
+        className
+      ),
+      ...props
+    }
+  )
+);
+ProgressBarItem.displayName = "ProgressBarItem";
+exports.ProgressBarItem = ProgressBarItem;
+//# sourceMappingURL=ProgressBarItem.cjs.map

package/dist/cjs/components/ProgressBar/ProgressBarItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarItem.cjs","sources":["../../../../src/components/ProgressBar/ProgressBarItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Colour mode for a progress bar item — brand green or theme-aware monochrome. */\nexport type ProgressBarItemVariant = \"brand\" | \"mono\";\n/** Pill thickness — `\"default\"` (8px) or `\"small\"` (4px). */\nexport type ProgressBarItemSize = \"default\" | \"small\";\n\nexport interface ProgressBarItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether this item is filled (completed). @default false */\n  active?: boolean;\n  /** Colour mode. @default \"brand\" */\n  variant?: ProgressBarItemVariant;\n  /** Pill thickness — `\"default\"` (8px) or `\"small\"` (4px). @default \"default\" */\n  size?: ProgressBarItemSize;\n}\n\nconst ACTIVE_COLOR: Record<ProgressBarItemVariant, string> = {\n  brand: \"bg-progress-bar-brand-active\",\n  mono: \"bg-progress-bar-mono-active\",\n};\n\nconst INACTIVE_COLOR: Record<ProgressBarItemVariant, string> = {\n  brand: \"bg-progress-bar-brand-inactive\",\n  mono: \"bg-progress-bar-mono-inactive\",\n};\n\n/**\n * A single rounded segment used to compose a stepped progress indicator. Render\n * a row of these (see {@link ProgressBarSteps}) to represent discrete steps.\n *\n * @example\n * ```tsx\n * <ProgressBarItem active variant=\"brand\" />\n * ```\n */\nexport const ProgressBarItem = React.forwardRef<HTMLDivElement, ProgressBarItemProps>(\n  ({ active = false, variant = \"brand\", size = \"default\", className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"w-full rounded-full\",\n        size === \"small\" ? \"h-1\" : \"h-2\",\n        active ? ACTIVE_COLOR[variant] : INACTIVE_COLOR[variant],\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\n\nProgressBarItem.displayName = \"ProgressBarItem\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,eAAuD;AAAA,EAC3D,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,iBAAyD;AAAA,EAC7D,OAAO;AAAA,EACP,MAAM;AACR;AAWO,MAAM,kBAAkBA,iBAAM;AAAA,EACnC,CAAC,EAAE,SAAS,OAAO,UAAU,SAAS,OAAO,WAAW,WAAW,GAAG,MAAA,GAAS,QAC7EC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA,SAAS,UAAU,QAAQ;AAAA,QAC3B,SAAS,aAAa,OAAO,IAAI,eAAe,OAAO;AAAA,QACvD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,gBAAgB,cAAc;;"}

package/dist/cjs/components/ProgressBar/ProgressBarSteps.cjs

@@ -0,0 +1,66 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const ProgressBarItem = require("./ProgressBarItem.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ProgressBarSteps = React__namespace.forwardRef(
+  ({
+    steps,
+    value,
+    variant = "brand",
+    size = "default",
+    ariaLabel,
+    ariaValueText,
+    className,
+    ...props
+  }, ref) => {
+    const total = Math.max(1, Math.floor(steps));
+    const completed = Math.min(total, Math.max(0, Math.floor(value)));
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-label": ariaLabel ?? "Progress",
+        "aria-valuemin": 0,
+        "aria-valuemax": total,
+        "aria-valuenow": completed,
+        "aria-valuetext": ariaValueText,
+        className: cn.cn("flex w-full items-center gap-1", className),
+        ...props,
+        children: Array.from({ length: total }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          ProgressBarItem.ProgressBarItem,
+          {
+            active: index < completed,
+            variant,
+            size,
+            className: "flex-1"
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+ProgressBarSteps.displayName = "ProgressBarSteps";
+exports.ProgressBarSteps = ProgressBarSteps;
+//# sourceMappingURL=ProgressBarSteps.cjs.map

package/dist/cjs/components/ProgressBar/ProgressBarSteps.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarSteps.cjs","sources":["../../../../src/components/ProgressBar/ProgressBarSteps.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport {\n  ProgressBarItem,\n  type ProgressBarItemSize,\n  type ProgressBarItemVariant,\n} from \"./ProgressBarItem\";\n\nexport interface ProgressBarStepsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Total number of steps (segments). Values below 1 are treated as 1. */\n  steps: number;\n  /** Number of completed steps, clamped to `0`–`steps`. */\n  value: number;\n  /** Colour mode. @default \"brand\" */\n  variant?: ProgressBarItemVariant;\n  /** Pill thickness — `\"default\"` (8px) or `\"small\"` (4px). @default \"default\" */\n  size?: ProgressBarItemSize;\n  /** Accessible label for the `progressbar` role. @default \"Progress\" */\n  ariaLabel?: string;\n  /** Human-readable text alternative for the current value (e.g. \"Step 2 of 4\"). */\n  ariaValueText?: string;\n}\n\n/**\n * A segmented (stepped) progress indicator built from {@link ProgressBarItem}\n * pills. Fills the first `value` of `steps` segments.\n *\n * @example\n * ```tsx\n * <ProgressBarSteps steps={4} value={2} variant=\"brand\" />\n * ```\n */\nexport const ProgressBarSteps = React.forwardRef<HTMLDivElement, ProgressBarStepsProps>(\n  (\n    {\n      steps,\n      value,\n      variant = \"brand\",\n      size = \"default\",\n      ariaLabel,\n      ariaValueText,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const total = Math.max(1, Math.floor(steps));\n    const completed = Math.min(total, Math.max(0, Math.floor(value)));\n\n    return (\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-label={ariaLabel ?? \"Progress\"}\n        aria-valuemin={0}\n        aria-valuemax={total}\n        aria-valuenow={completed}\n        aria-valuetext={ariaValueText}\n        className={cn(\"flex w-full items-center gap-1\", className)}\n        {...props}\n      >\n        {Array.from({ length: total }, (_, index) => (\n          <ProgressBarItem\n            key={index}\n            active={index < completed}\n            variant={variant}\n            size={size}\n            className=\"flex-1\"\n          />\n        ))}\n      </div>\n    );\n  },\n);\n\nProgressBarSteps.displayName = \"ProgressBarSteps\";\n"],"names":["React","jsx","cn","ProgressBarItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgCO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC;AAC3C,UAAM,YAAY,KAAK,IAAI,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,aAAa;AAAA,QACzB,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,WAAWC,GAAAA,GAAG,kCAAkC,SAAS;AAAA,QACxD,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,CAAC,GAAG,UACjCD,2BAAAA;AAAAA,UAACE,gBAAAA;AAAAA,UAAA;AAAA,YAEC,QAAQ,QAAQ;AAAA,YAChB;AAAA,YACA;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,UAJL;AAAA,QAAA,CAMR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,iBAAiB,cAAc;;"}

package/dist/cjs/components/SegmentedControl/SegmentedControl.cjs

@@ -35,11 +35,47 @@ function warnMissingAccessibleName(ariaLabel, ariaLabelledBy) {
     }
   }
 }
+function warnMissingOptionAccessibleName(options) {
+  if (process.env.NODE_ENV !== "production") {
+    for (const option of options) {
+      if (option.icon && !option.label?.trim()) {
+        console.warn(
+          `SegmentedControl: icon-only segment "${option.value}" is missing a non-empty \`label\` to use as its accessible name.`
+        );
+      }
+    }
+  }
+}
+function getSegmentClassName({
+  appearance,
+  size,
+  variant,
+  isSelected,
+  disabled
+}) {
+  return cn.cn(
+    "relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full",
+    "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
+    "focus-visible:shadow-focus-ring focus-visible:outline-none",
+    variant === "fill" ? "flex-1" : "shrink-0",
+    appearance === "plain" ? cn.cn(
+      // Padding + negative margin enlarge the hit target without changing the
+      // visual footprint, which must stay glyph-only to match the design.
+      "-m-1 p-1",
+      isSelected ? "text-icons-primary" : "text-icons-tertiary hover:text-icons-primary"
+    ) : cn.cn(
+      sizeClasses[size],
+      isSelected ? "bg-buttons-primary-default text-content-primary-inverted shadow-sm" : "text-content-primary hover:bg-buttons-switch-hover"
+    ),
+    disabled && "pointer-events-none"
+  );
+}
 const SegmentedControl = React__namespace.forwardRef(
   ({
     className,
     size = "32",
     variant = "hug",
+    appearance = "pill",
     options,
     value: controlledValue,
     defaultValue,
@@ -48,6 +84,7 @@ const SegmentedControl = React__namespace.forwardRef(
     ...props
   }, ref) => {
     warnMissingAccessibleName(props["aria-label"], props["aria-labelledby"]);
+    warnMissingOptionAccessibleName(options);
     const [internalValue, setInternalValue] = React__namespace.useState(defaultValue ?? options[0]?.value);
     const isControlled = controlledValue !== void 0;
     const currentValue = isControlled ? controlledValue : internalValue;
@@ -74,8 +111,9 @@ const SegmentedControl = React__namespace.forwardRef(
         ref,
         role: "radiogroup",
         className: cn.cn(
-          "relative items-center rounded-full bg-surface-tertiary p-1",
+          "relative items-center rounded-full",
           variant === "fill" ? "flex w-full" : "inline-flex",
+          appearance === "plain" ? "gap-2" : "bg-surface-tertiary p-1",
           disabled && "cursor-not-allowed opacity-50",
           className
         ),
@@ -95,18 +133,11 @@ const SegmentedControl = React__namespace.forwardRef(
                 "aria-checked": isSelected,
                 tabIndex: isSelected || !anySelected && index === 0 ? 0 : -1,
                 disabled,
+                "aria-label": option.icon ? option.label : void 0,
                 onClick: () => handleSelect(option.value),
                 onKeyDown: (e) => handleKeyDown(e, index),
-                className: cn.cn(
-                  "relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full",
-                  "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
-                  "focus-visible:shadow-focus-ring focus-visible:outline-none",
-                  variant === "fill" ? "flex-1" : "shrink-0",
-                  sizeClasses[size],
-                  isSelected ? "bg-buttons-primary-default text-content-primary-inverted shadow-sm" : "text-content-primary hover:bg-buttons-switch-hover",
-                  disabled && "pointer-events-none"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
+                className: getSegmentClassName({ appearance, size, variant, isSelected, disabled }),
+                children: option.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center justify-center", "aria-hidden": "true", children: option.icon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
               },
               option.value
             )

package/dist/cjs/components/SegmentedControl/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.cjs","sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the segmented control in pixels. */\nexport type SegmentedControlSize = \"32\" | \"40\" | \"48\";\n\n/**\n * Segment layout.\n * - `\"hug\"`: each segment is sized to its content.\n * - `\"fill\"`: the control spans the full width of its container and each segment grows equally.\n */\nexport type SegmentedControlVariant = \"hug\" | \"fill\";\n\n/** Describes one selectable segment. */\nexport interface SegmentedControlOption {\n  /** Display label for the segment. */\n  label: string;\n  /** Value identifier returned via `onChange`. */\n  value: string;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Height of the control in pixels. @default \"32\" */\n  size?: SegmentedControlSize;\n  /** Segment layout. @default \"hug\" */\n  variant?: SegmentedControlVariant;\n  /** The selectable segments. Designed for two or three mutually exclusive options. */\n  options: SegmentedControlOption[];\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). Defaults to the first option. */\n  defaultValue?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the control is disabled. @default false */\n  disabled?: boolean;\n}\n\n/** Padding and typography per size. Combined with the container's `p-1` these hit the 32/40/48px heights. */\nconst sizeClasses: Record<SegmentedControlSize, string> = {\n  \"32\": \"px-2 py-1 typography-description-12px-semibold\",\n  \"40\": \"px-3 py-1.75 typography-body-small-14px-semibold\",\n  \"48\": \"px-4 py-2 typography-body-default-16px-semibold\",\n};\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"SegmentedControl: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A compact selector for choosing between two or three mutually exclusive\n * options where the choice affects the content immediately below it. Use\n * instead of tabs when the options are more like settings or filters than\n * navigation, such as toggling a list/grid view or a monthly/annual price.\n *\n * Rendered as a `radiogroup` with roving-tabindex keyboard navigation. Supports\n * both controlled and uncontrolled usage.\n *\n * @example\n * ```tsx\n * <SegmentedControl\n *   options={[\n *     { label: \"Net\", value: \"net\" },\n *     { label: \"Gross\", value: \"gross\" },\n *   ]}\n *   value={amount}\n *   onChange={setAmount}\n *   aria-label=\"Amount type\"\n * />\n * ```\n */\nexport const SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  (\n    {\n      className,\n      size = \"32\",\n      variant = \"hug\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0]?.value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const anySelected = options.some((o) => o.value === currentValue);\n    const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled || optionValue === currentValue) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const nextIndex =\n        e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n          ? (index + 1) % options.length\n          : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n            ? (index - 1 + options.length) % options.length\n            : null;\n      if (nextIndex === null) return;\n      e.preventDefault();\n      const nextOption = options[nextIndex] as SegmentedControlOption;\n      handleSelect(nextOption.value);\n      buttonRefs.current[nextIndex]?.focus();\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative items-center rounded-full bg-surface-tertiary p-1\",\n          variant === \"fill\" ? \"flex w-full\" : \"inline-flex\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={cn(\n                \"relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full\",\n                \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                variant === \"fill\" ? \"flex-1\" : \"shrink-0\",\n                sizeClasses[size],\n                isSelected\n                  ? \"bg-buttons-primary-default text-content-primary-inverted shadow-sm\"\n                  : \"text-content-primary hover:bg-buttons-switch-hover\",\n                disabled && \"pointer-events-none\",\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSegmentedControl.displayName = \"SegmentedControl\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,cAAoD;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,SAAS,0BAA0B,WAAoB,gBAAyB;AAC9E,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,aAAa,CAAC,gBAAgB;AACjC,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;AAwBO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,GAEL,QACG;AACH,8BAA0B,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAGvE,UAAM,CAAC,eAAe,gBAAgB,IAAIA,iBAAM,SAAS,gBAAgB,QAAQ,CAAC,GAAG,KAAK;AAC1F,UAAM,eAAe,oBAAoB;AACzC,UAAM,eAAe,eAAe,kBAAkB;AACtD,UAAM,cAAc,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,YAAY;AAChE,UAAM,aAAaA,iBAAM,OAAqC,EAAE;AAEhE,UAAM,eAAe,CAAC,gBAAwB;AAC5C,UAAI,YAAY,gBAAgB,aAAc;AAC9C,UAAI,CAAC,cAAc;AACjB,yBAAiB,WAAW;AAAA,MAC9B;AACA,iBAAW,WAAW;AAAA,IACxB;AAEA,UAAM,gBAAgB,CAAC,GAAwB,UAAkB;AAC/D,YAAM,YACJ,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,eAC/B,QAAQ,KAAK,QAAQ,SACtB,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAChC,QAAQ,IAAI,QAAQ,UAAU,QAAQ,SACvC;AACR,UAAI,cAAc,KAAM;AACxB,QAAE,eAAA;AACF,YAAM,aAAa,QAAQ,SAAS;AACpC,mBAAa,WAAW,KAAK;AAC7B,iBAAW,QAAQ,SAAS,GAAG,MAAA;AAAA,IACjC;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY,SAAS,gBAAgB;AAAA,UACrC,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,aAAa,iBAAiB,OAAO;AAC3C;AAAA;AAAA,YAEED,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,KAAK,CAAC,OAAO;AACX,6BAAW,QAAQ,KAAK,IAAI;AAAA,gBAC9B;AAAA,gBACA,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,gBAAc;AAAA,gBACd,UAAU,cAAe,CAAC,eAAe,UAAU,IAAK,IAAI;AAAA,gBAC5D;AAAA,gBACA,SAAS,MAAM,aAAa,OAAO,KAAK;AAAA,gBACxC,WAAW,CAAC,MAAM,cAAc,GAAG,KAAK;AAAA,gBACxC,WAAWC,GAAAA;AAAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,YAAY,SAAS,WAAW;AAAA,kBAChC,YAAY,IAAI;AAAA,kBAChB,aACI,uEACA;AAAA,kBACJ,YAAY;AAAA,gBAAA;AAAA,gBAGd,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,iBAAO,MAAA,CAAM;AAAA,cAAA;AAAA,cAvB5C,OAAO;AAAA,YAAA;AAAA;AAAA,QA0BlB,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,iBAAiB,cAAc;;"}
+{"version":3,"file":"SegmentedControl.cjs","sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the segmented control in pixels. */\nexport type SegmentedControlSize = \"32\" | \"40\" | \"48\";\n\n/**\n * Segment layout.\n * - `\"hug\"`: each segment is sized to its content.\n * - `\"fill\"`: the control spans the full width of its container and each segment grows equally.\n */\nexport type SegmentedControlVariant = \"hug\" | \"fill\";\n\n/**\n * Visual style of the control.\n * - `\"pill\"`: the container has a muted background and the selected segment shows a filled pill (default).\n * - `\"plain\"`: no container or selected-pill background; segments are bare content and selection is\n *   communicated by color alone. Designed for icon-only toggles (e.g. a list/grid view switch).\n */\nexport type SegmentedControlAppearance = \"pill\" | \"plain\";\n\n/** Describes one selectable segment. */\nexport interface SegmentedControlOption {\n  /**\n   * Display label for the segment. When `icon` is provided, the segment renders icon-only and\n   * this value is used as its accessible name (applied as `aria-label`) instead of visible text.\n   */\n  label: string;\n  /** Value identifier returned via `onChange`. */\n  value: string;\n  /**\n   * Icon to render instead of the visible label. When set, the segment renders icon-only and\n   * `label` becomes required as its accessible name — it is applied as `aria-label` and no\n   * visible text is rendered.\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Height of the control in pixels. @default \"32\" */\n  size?: SegmentedControlSize;\n  /** Segment layout. @default \"hug\" */\n  variant?: SegmentedControlVariant;\n  /** Visual style of the control. @default \"pill\" */\n  appearance?: SegmentedControlAppearance;\n  /** The selectable segments. Designed for two or three mutually exclusive options. */\n  options: SegmentedControlOption[];\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). Defaults to the first option. */\n  defaultValue?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the control is disabled. @default false */\n  disabled?: boolean;\n}\n\n/** Padding and typography per size. Combined with the container's `p-1` these hit the 32/40/48px heights. */\nconst sizeClasses: Record<SegmentedControlSize, string> = {\n  \"32\": \"px-2 py-1 typography-description-12px-semibold\",\n  \"40\": \"px-3 py-1.75 typography-body-small-14px-semibold\",\n  \"48\": \"px-4 py-2 typography-body-default-16px-semibold\",\n};\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"SegmentedControl: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction warnMissingOptionAccessibleName(options: SegmentedControlOption[]) {\n  if (process.env.NODE_ENV !== \"production\") {\n    for (const option of options) {\n      if (option.icon && !option.label?.trim()) {\n        console.warn(\n          `SegmentedControl: icon-only segment \"${option.value}\" is missing a non-empty \\`label\\` to use as its accessible name.`,\n        );\n      }\n    }\n  }\n}\n\nfunction getSegmentClassName({\n  appearance,\n  size,\n  variant,\n  isSelected,\n  disabled,\n}: {\n  appearance: SegmentedControlAppearance;\n  size: SegmentedControlSize;\n  variant: SegmentedControlVariant;\n  isSelected: boolean;\n  disabled: boolean;\n}) {\n  return cn(\n    \"relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full\",\n    \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n    \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n    variant === \"fill\" ? \"flex-1\" : \"shrink-0\",\n    appearance === \"plain\"\n      ? cn(\n          // Padding + negative margin enlarge the hit target without changing the\n          // visual footprint, which must stay glyph-only to match the design.\n          \"-m-1 p-1\",\n          isSelected ? \"text-icons-primary\" : \"text-icons-tertiary hover:text-icons-primary\",\n        )\n      : cn(\n          sizeClasses[size],\n          isSelected\n            ? \"bg-buttons-primary-default text-content-primary-inverted shadow-sm\"\n            : \"text-content-primary hover:bg-buttons-switch-hover\",\n        ),\n    disabled && \"pointer-events-none\",\n  );\n}\n\n/**\n * A compact selector for choosing between two or three mutually exclusive\n * options where the choice affects the content immediately below it. Use\n * instead of tabs when the options are more like settings or filters than\n * navigation, such as toggling a list/grid view or a monthly/annual price.\n *\n * Rendered as a `radiogroup` with roving-tabindex keyboard navigation. Supports\n * both controlled and uncontrolled usage.\n *\n * @example\n * ```tsx\n * <SegmentedControl\n *   options={[\n *     { label: \"Net\", value: \"net\" },\n *     { label: \"Gross\", value: \"gross\" },\n *   ]}\n *   value={amount}\n *   onChange={setAmount}\n *   aria-label=\"Amount type\"\n * />\n * ```\n *\n * @example Icon-only segments (e.g. a list/grid view toggle)\n * ```tsx\n * <SegmentedControl\n *   appearance=\"plain\"\n *   options={[\n *     { label: \"List view\", value: \"list\", icon: <ListViewIcon size={16} /> },\n *     { label: \"Grid view\", value: \"grid\", icon: <GridViewIcon size={16} /> },\n *   ]}\n *   value={view}\n *   onChange={setView}\n *   aria-label=\"View\"\n * />\n * ```\n */\nexport const SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  (\n    {\n      className,\n      size = \"32\",\n      variant = \"hug\",\n      appearance = \"pill\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n    warnMissingOptionAccessibleName(options);\n\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0]?.value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const anySelected = options.some((o) => o.value === currentValue);\n    const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled || optionValue === currentValue) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const nextIndex =\n        e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n          ? (index + 1) % options.length\n          : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n            ? (index - 1 + options.length) % options.length\n            : null;\n      if (nextIndex === null) return;\n      e.preventDefault();\n      const nextOption = options[nextIndex] as SegmentedControlOption;\n      handleSelect(nextOption.value);\n      buttonRefs.current[nextIndex]?.focus();\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative items-center rounded-full\",\n          variant === \"fill\" ? \"flex w-full\" : \"inline-flex\",\n          appearance === \"plain\" ? \"gap-2\" : \"bg-surface-tertiary p-1\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              aria-label={option.icon ? option.label : undefined}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={getSegmentClassName({ appearance, size, variant, isSelected, disabled })}\n            >\n              {option.icon ? (\n                <span className=\"flex shrink-0 items-center justify-center\" aria-hidden=\"true\">\n                  {option.icon}\n                </span>\n              ) : (\n                <span className=\"min-w-0 truncate\">{option.label}</span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSegmentedControl.displayName = \"SegmentedControl\";\n"],"names":["cn","React","jsx"],"mappings":"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"}

package/dist/cjs/components/TextArea/TextArea.cjs

@@ -51,8 +51,8 @@ const CLEAR_BUTTON_RIGHT = {
 };
 function getContainerClassName(size, error, disabled) {
   return cn.cn(
-    "relative rounded-sm border bg-neutral-alphas-50 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors",
-    error ? "border-error-content" : "border-transparent",
+    "relative rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors",
+    error ? "border-error-content" : "border-border-primary",
     !disabled && !error && "hover:border-neutral-alphas-400",
     CONTAINER_MIN_HEIGHT[size],
     disabled && "opacity-50"
@@ -60,7 +60,7 @@ function getContainerClassName(size, error, disabled) {
 }
 function getTextareaClassName(size, hasClearButton, hasMinRows, resizable) {
   return cn.cn(
-    "h-full w-full bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed",
+    "h-full w-full bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed",
     resizable ? "resize-y" : "resize-none",
     !hasMinRows && "min-h-[80px]",
     TEXTAREA_SIZE_CLASSES[size],
@@ -179,7 +179,7 @@ const TextArea = React__namespace.forwardRef(
             "label",
             {
               htmlFor: inputId,
-              className: "typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary",
+              className: "typography-description-12px-semibold pb-2 text-content-primary",
               children: label
             }
           ),

package/dist/cjs/components/TextArea/TextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. */\nexport type TextAreaSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextAreaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n  /** Label text displayed above the textarea. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Minimum height of the text area in pixels. @default \"48\" */\n  size?: TextAreaSize;\n  /** Whether the text area is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text area is validated. @default false */\n  validated?: boolean;\n  /** Whether the text area stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Whether to show a clear button when text is present. @default false */\n  showClearButton?: boolean;\n  /** Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. */\n  onClear?: () => void;\n  /** Minimum number of rows (lines) for the textarea. */\n  minRows?: number;\n  /** Maximum number of rows (lines) for the textarea. */\n  maxRows?: number;\n  /** Whether the textarea can be resized by the user. @default true */\n  resizable?: boolean;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n  \"48\": \"py-3 typography-body-default-16px-regular autofill-body-lg\",\n  \"40\": \"py-2 typography-body-default-16px-regular autofill-body-lg\",\n  \"32\": \"py-2 typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n  \"48\": \"pr-11\",\n  \"40\": \"pr-11\",\n  \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"right-4 top-3\",\n  \"40\": \"right-4 top-2\",\n  \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative rounded-sm border bg-neutral-alphas-50 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-content\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_MIN_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getTextareaClassName(\n  size: TextAreaSize,\n  hasClearButton: boolean,\n  hasMinRows: boolean,\n  resizable: boolean,\n) {\n  return cn(\n    \"h-full w-full bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed\",\n    resizable ? \"resize-y\" : \"resize-none\",\n    !hasMinRows && \"min-h-[80px]\",\n    TEXTAREA_SIZE_CLASSES[size],\n    PADDING_HORIZONTAL[size],\n    hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n  );\n}\n\nfunction TextAreaHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-description-12px-regular px-2 pt-1 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string | undefined {\n  if (!maxRows) return undefined;\n\n  // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n  const lineHeight = size === \"32\" ? 20 : 24;\n  // py-2 = 8px, py-3 = 12px\n  const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n  return `${lineHeight * maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n  value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n  defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n  showClearButton: boolean,\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n  onClear?: () => void,\n  textareaRef?: React.RefObject<HTMLTextAreaElement | null>,\n) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n  const resolvedValue = value !== undefined ? value : internalValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setInternalValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    setInternalValue(\"\");\n\n    if (onChange && textareaRef?.current) {\n      const syntheticEvent = {\n        target: { ...textareaRef.current, value: \"\" },\n        currentTarget: { ...textareaRef.current, value: \"\" },\n      } as React.ChangeEvent<HTMLTextAreaElement>;\n      onChange(syntheticEvent);\n    }\n\n    onClear?.();\n  };\n\n  return {\n    resolvedValue,\n    displayValue: showClearButton ? resolvedValue : value,\n    resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n    handleChange,\n    handleClear,\n  };\n}\n\n/**\n * A multi-line text input with optional label, helper/error text, and clear button.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextArea\n *   label=\"Description\"\n *   placeholder=\"Enter your description...\"\n *   showClearButton\n *   error={!!descError}\n *   errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      showClearButton = false,\n      onClear,\n      value,\n      defaultValue,\n      onChange,\n      minRows,\n      maxRows,\n      resizable = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n    const maxHeight = calculateMaxHeight(size, maxRows);\n\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n    const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n      useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n    const mergedRef = (node: HTMLTextAreaElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n      }\n    };\n\n    const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n    const showValidated = validated && !showClear;\n    const ariaDescribedBy = bottomText ? helperTextId : undefined;\n    const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <textarea\n            ref={mergedRef}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={error || undefined}\n            className={getTextareaClassName(size, showClear, !!minRows, resizable)}\n            value={displayValue}\n            defaultValue={resolvedDefaultValue}\n            onChange={handleChange}\n            rows={minRows}\n            style={textareaStyle}\n            {...props}\n          />\n\n          {showClear && (\n            <IconButton\n              variant=\"tertiary\"\n              size=\"24\"\n              icon={<CloseIcon />}\n              aria-label=\"Clear text\"\n              onClick={handleClear}\n              className={cn(\n                \"absolute flex size-5 items-center justify-center self-end\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            />\n          )}\n          {showValidated && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute flex size-5 items-center justify-center\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            >\n              <CheckOutlineIcon className=\"text-success-content\" />\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextAreaHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextAreaHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":["cn","jsx","React","jsxs","IconButton","CloseIcon","CheckOutlineIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,uBAAqD;AAAA,EACzD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,wBAAsD;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,qBAAmD;AAAA,EACvD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,2BAAyD;AAAA,EAC7D,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,qBAAmD;AAAA,EACvD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,SAAS,sBAAsB,MAAoB,OAAgB,UAAoB;AACrF,SAAOA,GAAAA;AAAAA,IACL;AAAA,IACA,QAAQ,yBAAyB;AAAA,IACjC,CAAC,YAAY,CAAC,SAAS;AAAA,IACvB,qBAAqB,IAAI;AAAA,IACzB,YAAY;AAAA,EAAA;AAEhB;AAEA,SAAS,qBACP,MACA,gBACA,YACA,WACA;AACA,SAAOA,GAAAA;AAAAA,IACL;AAAA,IACA,YAAY,aAAa;AAAA,IACzB,CAAC,cAAc;AAAA,IACf,sBAAsB,IAAI;AAAA,IAC1B,mBAAmB,IAAI;AAAA,IACvB,iBAAiB,yBAAyB,IAAI,IAAI;AAAA,EAAA;AAEtD;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWD,GAAAA;AAAAA,QACT;AAAA,QACA,QAAQ,uBAAuB;AAAA,MAAA;AAAA,MAGhC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,0BAA0B,OAAgB,WAAoB,gBAAyB;AAC9F,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,SAAS,CAAC,aAAa,CAAC,gBAAgB;AAC3C,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,SAAS,mBAAmB,MAAoB,SAAsC;AACpF,MAAI,CAAC,QAAS,QAAO;AAGrB,QAAM,aAAa,SAAS,OAAO,KAAK;AAExC,QAAM,kBAAkB,SAAS,OAAO,IAAI,SAAS,OAAO,IAAI;AAEhE,SAAO,GAAG,aAAa,UAAU,kBAAkB,CAAC;AACtD;AAEA,SAAS,iBACP,OACA,cACA,iBACA,UACA,SACA,aACA;AACA,QAAM,CAAC,eAAe,gBAAgB,IAAIE,iBAAM,SAAS,gBAAgB,EAAE;AAC3E,QAAM,gBAAgB,UAAU,SAAY,QAAQ;AAEpD,QAAM,eAAe,CAAC,MAA8C;AAClE,qBAAiB,EAAE,OAAO,KAAK;AAC/B,eAAW,CAAC;AAAA,EACd;AAEA,QAAM,cAAc,MAAM;AACxB,qBAAiB,EAAE;AAEnB,QAAI,YAAY,aAAa,SAAS;AACpC,YAAM,iBAAiB;AAAA,QACrB,QAAQ,EAAE,GAAG,YAAY,SAAS,OAAO,GAAA;AAAA,QACzC,eAAe,EAAE,GAAG,YAAY,SAAS,OAAO,GAAA;AAAA,MAAG;AAErD,eAAS,cAAc;AAAA,IACzB;AAEA,cAAA;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA,cAAc,kBAAkB,gBAAgB;AAAA,IAChD,sBAAsB,kBAAkB,SAAY;AAAA,IACpD;AAAA,IACA;AAAA,EAAA;AAEJ;AAmBO,MAAM,WAAWA,iBAAM;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAcA,iBAAM,MAAA;AAC1B,UAAM,UAAU,MAAM;AACtB,UAAM,eAAe,GAAG,OAAO;AAC/B,UAAM,aAAa,SAAS,eAAe,eAAe;AAC1D,UAAM,YAAY,mBAAmB,MAAM,OAAO;AAElD,UAAM,cAAcA,iBAAM,OAA4B,IAAI;AAE1D,UAAM,EAAE,eAAe,cAAc,sBAAsB,cAAc,YAAA,IACvE,iBAAiB,OAAO,cAAc,iBAAiB,UAAU,SAAS,WAAW;AAEvF,UAAM,YAAY,CAAC,SAAqC;AACtD,kBAAY,UAAU;AACtB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,WAAW,KAAK;AACb,YAA2D,UAAU;AAAA,MACxE;AAAA,IACF;AAEA,UAAM,YAAY,mBAAmB,kBAAkB,MAAM,CAAC;AAC9D,UAAM,gBAAgB,aAAa,CAAC;AACpC,UAAM,kBAAkB,aAAa,eAAe;AACpD,UAAM,gBAAgB,YAAY,EAAE,UAAA,IAAc;AAElD,8BAA0B,OAAO,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAE9E,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH,GAAAA,GAAG,iBAAiB,aAAa,UAAU,SAAS;AAAA,QAC/D,iBAAe,WAAW,KAAK;AAAA,QAC/B,cAAY,QAAQ,KAAK;AAAA,QAExB,UAAA;AAAA,UAAA,SACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAU;AAAA,cAET,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,0CAIJ,OAAA,EAAI,WAAW,sBAAsB,MAAM,OAAO,QAAQ,GACzD,UAAA;AAAA,YAAAA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK;AAAA,gBACL,IAAI;AAAA,gBACJ;AAAA,gBACA,oBAAkB;AAAA,gBAClB,gBAAc,SAAS;AAAA,gBACvB,WAAW,qBAAqB,MAAM,WAAW,CAAC,CAAC,SAAS,SAAS;AAAA,gBACrE,OAAO;AAAA,gBACP,cAAc;AAAA,gBACd,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,OAAO;AAAA,gBACN,GAAG;AAAA,cAAA;AAAA,YAAA;AAAA,YAGL,aACCA,2BAAAA;AAAAA,cAACG,WAAAA;AAAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,qCAAOC,UAAAA,WAAA,EAAU;AAAA,gBACjB,cAAW;AAAA,gBACX,SAAS;AAAA,gBACT,WAAWL,GAAAA;AAAAA,kBACT;AAAA,kBACA,mBAAmB,IAAI;AAAA,gBAAA;AAAA,cACzB;AAAA,YAAA;AAAA,YAGH,iBACCC,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWD,GAAAA;AAAAA,kBACT;AAAA,kBACA,mBAAmB,IAAI;AAAA,gBAAA;AAAA,gBAGzB,UAAAC,2BAAAA,IAACK,iBAAAA,kBAAA,EAAiB,WAAU,uBAAA,CAAuB;AAAA,cAAA;AAAA,YAAA;AAAA,UACrD,GAEJ;AAAA,UAEC,cACCL,2BAAAA,IAAC,oBAAA,EAAmB,IAAI,cAAc,OACnC,UAAA,WAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,SAAS,cAAc;;"}
+{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. */\nexport type TextAreaSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextAreaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n  /** Label text displayed above the textarea. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Minimum height of the text area in pixels. @default \"48\" */\n  size?: TextAreaSize;\n  /** Whether the text area is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text area is validated. @default false */\n  validated?: boolean;\n  /** Whether the text area stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Whether to show a clear button when text is present. @default false */\n  showClearButton?: boolean;\n  /** Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. */\n  onClear?: () => void;\n  /** Minimum number of rows (lines) for the textarea. */\n  minRows?: number;\n  /** Maximum number of rows (lines) for the textarea. */\n  maxRows?: number;\n  /** Whether the textarea can be resized by the user. @default true */\n  resizable?: boolean;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n  \"48\": \"py-3 typography-body-default-16px-regular autofill-body-lg\",\n  \"40\": \"py-2 typography-body-default-16px-regular autofill-body-lg\",\n  \"32\": \"py-2 typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n  \"48\": \"pr-11\",\n  \"40\": \"pr-11\",\n  \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"right-4 top-3\",\n  \"40\": \"right-4 top-2\",\n  \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-content\" : \"border-border-primary\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_MIN_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getTextareaClassName(\n  size: TextAreaSize,\n  hasClearButton: boolean,\n  hasMinRows: boolean,\n  resizable: boolean,\n) {\n  return cn(\n    \"h-full w-full bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed\",\n    resizable ? \"resize-y\" : \"resize-none\",\n    !hasMinRows && \"min-h-[80px]\",\n    TEXTAREA_SIZE_CLASSES[size],\n    PADDING_HORIZONTAL[size],\n    hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n  );\n}\n\nfunction TextAreaHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-description-12px-regular px-2 pt-1 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string | undefined {\n  if (!maxRows) return undefined;\n\n  // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n  const lineHeight = size === \"32\" ? 20 : 24;\n  // py-2 = 8px, py-3 = 12px\n  const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n  return `${lineHeight * maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n  value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n  defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n  showClearButton: boolean,\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n  onClear?: () => void,\n  textareaRef?: React.RefObject<HTMLTextAreaElement | null>,\n) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n  const resolvedValue = value !== undefined ? value : internalValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setInternalValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    setInternalValue(\"\");\n\n    if (onChange && textareaRef?.current) {\n      const syntheticEvent = {\n        target: { ...textareaRef.current, value: \"\" },\n        currentTarget: { ...textareaRef.current, value: \"\" },\n      } as React.ChangeEvent<HTMLTextAreaElement>;\n      onChange(syntheticEvent);\n    }\n\n    onClear?.();\n  };\n\n  return {\n    resolvedValue,\n    displayValue: showClearButton ? resolvedValue : value,\n    resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n    handleChange,\n    handleClear,\n  };\n}\n\n/**\n * A multi-line text input with optional label, helper/error text, and clear button.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextArea\n *   label=\"Description\"\n *   placeholder=\"Enter your description...\"\n *   showClearButton\n *   error={!!descError}\n *   errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      showClearButton = false,\n      onClear,\n      value,\n      defaultValue,\n      onChange,\n      minRows,\n      maxRows,\n      resizable = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n    const maxHeight = calculateMaxHeight(size, maxRows);\n\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n    const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n      useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n    const mergedRef = (node: HTMLTextAreaElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n      }\n    };\n\n    const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n    const showValidated = validated && !showClear;\n    const ariaDescribedBy = bottomText ? helperTextId : undefined;\n    const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <textarea\n            ref={mergedRef}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={error || undefined}\n            className={getTextareaClassName(size, showClear, !!minRows, resizable)}\n            value={displayValue}\n            defaultValue={resolvedDefaultValue}\n            onChange={handleChange}\n            rows={minRows}\n            style={textareaStyle}\n            {...props}\n          />\n\n          {showClear && (\n            <IconButton\n              variant=\"tertiary\"\n              size=\"24\"\n              icon={<CloseIcon />}\n              aria-label=\"Clear text\"\n              onClick={handleClear}\n              className={cn(\n                \"absolute flex size-5 items-center justify-center self-end\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            />\n          )}\n          {showValidated && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute flex size-5 items-center justify-center\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            >\n              <CheckOutlineIcon className=\"text-success-content\" />\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextAreaHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextAreaHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":["cn","jsx","React","jsxs","IconButton","CloseIcon","CheckOutlineIcon"],"mappings":"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"}