@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/components/progress-bar/ProgressBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.cjs","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import styles from './ProgressBar.module.scss';\n\nexport type ProgressBarSize = 'small' | 'large';\n\nexport interface ProgressBarProps {\n  /** Progress value 0–100. Default: 0. */\n  value?: number;\n  /** Size variant. Default: Large. */\n  size?: ProgressBarSize;\n  /**\n   * When true, fill color shifts from green→yellow→red based on percentage.\n   * When false, uses the default brand blue. Default: false.\n   */\n  semanticColors?: boolean;\n  /** Accessible label for the progress bar. */\n  'aria-label'?: string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nfunction getSemanticColorClass(value: number): string {\n  if (value >= 90) return styles['progress-bar__fill--danger'];\n  if (value >= 70) return styles['progress-bar__fill--warning'];\n  return styles['progress-bar__fill--success'];\n}\n\n/**\n * Progress Bar shows determinate progress through a wait state — an upload finishing, a\n * quota filling, an import running. Use it when the duration or total is known; reach for\n * [Spinner](/components/spinner) when it isn't.\n */\nexport default function ProgressBar({\n  value = 0,\n  size = 'large',\n  semanticColors = false,\n  'aria-label': ariaLabel = 'Progress',\n  className = '',\n}: ProgressBarProps) {\n  const clampedValue = Math.min(100, Math.max(0, value));\n  const sizeClass =\n    size === 'small'\n      ? styles['progress-bar--size-small']\n      : styles['progress-bar--size-large'];\n\n  const fillColorClass = semanticColors\n    ? getSemanticColorClass(clampedValue)\n    : styles['progress-bar__fill--default'];\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-valuenow={clampedValue}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label={ariaLabel}\n      className={[styles['progress-bar'], sizeClass, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div\n        className={[styles['progress-bar__fill'], fillColorClass]\n          .filter(Boolean)\n          .join(' ')}\n        style={{ width: `${clampedValue}%` }}\n      />\n    </div>\n  );\n}\n"],"names":["getSemanticColorClass","value","styles","ProgressBar","size","semanticColors","ariaLabel","className","clampedValue","sizeClass","fillColorClass","jsx"],"mappings":"4LAoBA,SAASA,EAAsBC,EAAuB,CACpD,OAAIA,GAAS,GAAWC,EAAAA,QAAO,4BAA4B,EACvDD,GAAS,GAAWC,EAAAA,QAAO,6BAA6B,EACrDA,EAAAA,QAAO,6BAA6B,CAC7C,CAOA,SAAwBC,EAAY,CAClC,MAAAF,EAAQ,EACR,KAAAG,EAAO,QACP,eAAAC,EAAiB,GACjB,aAAcC,EAAY,WAC1B,UAAAC,EAAY,EACd,EAAqB,CACnB,MAAMC,EAAe,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGP,CAAK,CAAC,EAC/CQ,EACJL,IAAS,QACLF,EAAAA,QAAO,0BAA0B,EACjCA,EAAAA,QAAO,0BAA0B,EAEjCQ,EAAiBL,EACnBL,EAAsBQ,CAAY,EAClCN,EAAAA,QAAO,6BAA6B,EAExC,OACES,EAAAA,IAAC,MAAA,CACC,KAAK,cACL,gBAAeH,EACf,gBAAe,EACf,gBAAe,IACf,aAAYF,EACZ,UAAW,CAACJ,EAAAA,QAAO,cAAc,EAAGO,EAAWF,CAAS,EACrD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAAI,EAAAA,IAAC,MAAA,CACC,UAAW,CAACT,UAAO,oBAAoB,EAAGQ,CAAc,EACrD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAO,CAAE,MAAO,GAAGF,CAAY,GAAA,CAAI,CAAA,CACrC,CAAA,CAGN"}
+{"version":3,"file":"ProgressBar.cjs","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './ProgressBar.module.scss';\n\nexport type ProgressBarSize = 'small' | 'large';\n\nexport interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Progress value 0–100. Default: 0. */\n  value?: number;\n  /** Size variant. Default: Large. */\n  size?: ProgressBarSize;\n  /**\n   * When true, fill color shifts from green→yellow→red based on percentage.\n   * When false, uses the default brand blue. Default: false.\n   */\n  semanticColors?: boolean;\n  /**\n   * When true, shows an animated bar for work with an unknown total and omits\n   * `aria-valuenow`. `value` and `semanticColors` are ignored. Default: false.\n   */\n  indeterminate?: boolean;\n  /**\n   * When true, the bar is purely visual: it renders `aria-hidden=\"true\"` and omits\n   * `role=\"progressbar\"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and\n   * `aria-label`. Use it for bars that don't report progress toward a goal (e.g.\n   * rows in a bar chart) and put the accessible text on the surrounding element.\n   * Default: false.\n   */\n  decorative?: boolean;\n  /** Accessible label for the progress bar. Ignored when `decorative`. Default: \"Progress\". */\n  'aria-label'?: string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nfunction getSemanticColorClass(value: number): string {\n  if (value >= 90) return styles['progress-bar__fill--danger'];\n  if (value >= 70) return styles['progress-bar__fill--warning'];\n  return styles['progress-bar__fill--success'];\n}\n\n/**\n * Progress Bar shows determinate progress through a wait state — an upload finishing, a\n * quota filling, an import running. Use it when the duration or total is known; reach for\n * [Spinner](/components/spinner) when it isn't.\n */\nexport default function ProgressBar({\n  value = 0,\n  size = 'large',\n  semanticColors = false,\n  indeterminate = false,\n  decorative = false,\n  'aria-label': ariaLabel = 'Progress',\n  className = '',\n  ...rest\n}: ProgressBarProps) {\n  const clampedValue = Math.min(100, Math.max(0, value));\n  const sizeClass =\n    size === 'small'\n      ? styles['progress-bar--size-small']\n      : styles['progress-bar--size-large'];\n\n  const fillColorClass =\n    semanticColors && !indeterminate\n      ? getSemanticColorClass(clampedValue)\n      : styles['progress-bar__fill--default'];\n\n  return (\n    <div\n      {...rest}\n      {...(decorative\n        ? {\n            'aria-hidden': true,\n            role: undefined,\n            'aria-valuenow': undefined,\n            'aria-valuemin': undefined,\n            'aria-valuemax': undefined,\n            'aria-valuetext': undefined,\n          }\n        : {\n            role: 'progressbar',\n            'aria-valuenow': indeterminate ? undefined : clampedValue,\n            'aria-valuemin': 0,\n            'aria-valuemax': 100,\n            'aria-label': ariaLabel,\n          })}\n      className={[\n        styles['progress-bar'],\n        sizeClass,\n        indeterminate ? styles['progress-bar--indeterminate'] : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div\n        className={[styles['progress-bar__fill'], fillColorClass]\n          .filter(Boolean)\n          .join(' ')}\n        style={indeterminate ? undefined : { width: `${clampedValue}%` }}\n      />\n    </div>\n  );\n}\n"],"names":["getSemanticColorClass","value","styles","ProgressBar","size","semanticColors","indeterminate","decorative","ariaLabel","className","rest","clampedValue","sizeClass","fillColorClass","jsx"],"mappings":"4LAkCA,SAASA,EAAsBC,EAAuB,CACpD,OAAIA,GAAS,GAAWC,EAAAA,QAAO,4BAA4B,EACvDD,GAAS,GAAWC,EAAAA,QAAO,6BAA6B,EACrDA,EAAAA,QAAO,6BAA6B,CAC7C,CAOA,SAAwBC,EAAY,CAClC,MAAAF,EAAQ,EACR,KAAAG,EAAO,QACP,eAAAC,EAAiB,GACjB,cAAAC,EAAgB,GAChB,WAAAC,EAAa,GACb,aAAcC,EAAY,WAC1B,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAqB,CACnB,MAAMC,EAAe,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGV,CAAK,CAAC,EAC/CW,EACJR,IAAS,QACLF,EAAAA,QAAO,0BAA0B,EACjCA,EAAAA,QAAO,0BAA0B,EAEjCW,EACJR,GAAkB,CAACC,EACfN,EAAsBW,CAAY,EAClCT,EAAAA,QAAO,6BAA6B,EAE1C,OACEY,EAAAA,IAAC,MAAA,CACE,GAAGJ,EACH,GAAIH,EACD,CACE,cAAe,GACf,KAAM,OACN,gBAAiB,OACjB,gBAAiB,OACjB,gBAAiB,OACjB,iBAAkB,MAAA,EAEpB,CACE,KAAM,cACN,gBAAiBD,EAAgB,OAAYK,EAC7C,gBAAiB,EACjB,gBAAiB,IACjB,aAAcH,CAAA,EAEpB,UAAW,CACTN,EAAAA,QAAO,cAAc,EACrBU,EACAN,EAAgBJ,EAAAA,QAAO,6BAA6B,EAAI,GACxDO,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAAK,EAAAA,IAAC,MAAA,CACC,UAAW,CAACZ,UAAO,oBAAoB,EAAGW,CAAc,EACrD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAOP,EAAgB,OAAY,CAAE,MAAO,GAAGK,CAAY,GAAA,CAAI,CAAA,CACjE,CAAA,CAGN"}

package/dist/components/progress-bar/ProgressBar.css

@@ -0,0 +1 @@
+@keyframes _progress-bar-indeterminate_3xsuh_1{0%{transform:translate(-100%)}to{transform:translate(250%)}}._progress-bar_3xsuh_21{position:relative;width:100%;background-color:rgba(var(--center-channel-color-rgb),.16);overflow:hidden}._progress-bar--size-small_3xsuh_27{height:4px;border-radius:var(--radius-xs)}._progress-bar--size-small_3xsuh_27 ._progress-bar__fill_3xsuh_31{border-radius:var(--radius-xs)}._progress-bar--size-large_3xsuh_34{height:8px;border-radius:var(--radius-s)}._progress-bar--size-large_3xsuh_34 ._progress-bar__fill_3xsuh_31{border-radius:var(--radius-s)}._progress-bar__fill_3xsuh_31{position:absolute;top:0;bottom:0;left:0;transition:width var(--duration-quick) var(--ease-transition)}._progress-bar__fill--default_3xsuh_48{background-color:var(--button-bg)}._progress-bar__fill--success_3xsuh_51{background-color:var(--color-success)}._progress-bar__fill--warning_3xsuh_54{background-color:var(--color-warning)}._progress-bar__fill--danger_3xsuh_57{background-color:var(--error-text, var(--color-danger))}._progress-bar--indeterminate_3xsuh_60 ._progress-bar__fill_3xsuh_31{width:40%;transition:none;animation:_progress-bar-indeterminate_3xsuh_1 calc(var(--duration-moderate) * 5) var(--ease-transition) infinite}@media(prefers-reduced-motion:reduce){._progress-bar--indeterminate_3xsuh_60 ._progress-bar__fill_3xsuh_31{width:100%;animation:none;opacity:.48}}

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -1,5 +1,6 @@
+import { HTMLAttributes } from 'react';
 export type ProgressBarSize = 'small' | 'large';
-export interface ProgressBarProps {
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
     /** Progress value 0–100. Default: 0. */
     value?: number;
     /** Size variant. Default: Large. */
@@ -9,7 +10,20 @@ export interface ProgressBarProps {
      * When false, uses the default brand blue. Default: false.
      */
     semanticColors?: boolean;
-    /** Accessible label for the progress bar. */
+    /**
+     * When true, shows an animated bar for work with an unknown total and omits
+     * `aria-valuenow`. `value` and `semanticColors` are ignored. Default: false.
+     */
+    indeterminate?: boolean;
+    /**
+     * When true, the bar is purely visual: it renders `aria-hidden="true"` and omits
+     * `role="progressbar"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and
+     * `aria-label`. Use it for bars that don't report progress toward a goal (e.g.
+     * rows in a bar chart) and put the accessible text on the surrounding element.
+     * Default: false.
+     */
+    decorative?: boolean;
+    /** Accessible label for the progress bar. Ignored when `decorative`. Default: "Progress". */
     'aria-label'?: string;
     /** Optional CSS class name. */
     className?: string;
@@ -19,5 +33,5 @@ export interface ProgressBarProps {
  * quota filling, an import running. Use it when the duration or total is known; reach for
  * [Spinner](/components/spinner) when it isn't.
  */
-export default function ProgressBar({ value, size, semanticColors, 'aria-label': ariaLabel, className, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export default function ProgressBar({ value, size, semanticColors, indeterminate, decorative, 'aria-label': ariaLabel, className, ...rest }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/progress-bar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC/B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,IAAc,EACd,cAAsB,EACtB,YAAY,EAAE,SAAsB,EACpC,SAAc,GACf,EAAE,gBAAgB,2CA8BlB"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6FAA6F;IAC7F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,IAAc,EACd,cAAsB,EACtB,aAAqB,EACrB,UAAkB,EAClB,YAAY,EAAE,SAAsB,EACpC,SAAc,EACd,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAgDlB"}

package/dist/components/progress-bar/ProgressBar.js

@@ -1,36 +1,54 @@
 import { jsx as e } from "react/jsx-runtime";
 import r from "./ProgressBar.module.scss.js";
-function g(a) {
+function v(a) {
   return a >= 90 ? r["progress-bar__fill--danger"] : a >= 70 ? r["progress-bar__fill--warning"] : r["progress-bar__fill--success"];
 }
-function c({
+function b({
   value: a = 0,
-  size: l = "large",
-  semanticColors: o = !1,
-  "aria-label": i = "Progress",
-  className: n = ""
+  size: o = "large",
+  semanticColors: i = !1,
+  indeterminate: s = !1,
+  decorative: n = !1,
+  "aria-label": t = "Progress",
+  className: f = "",
+  ...g
 }) {
-  const s = Math.min(100, Math.max(0, a)), t = l === "small" ? r["progress-bar--size-small"] : r["progress-bar--size-large"], f = o ? g(s) : r["progress-bar__fill--default"];
+  const l = Math.min(100, Math.max(0, a)), u = o === "small" ? r["progress-bar--size-small"] : r["progress-bar--size-large"], d = i && !s ? v(l) : r["progress-bar__fill--default"];
   return /* @__PURE__ */ e(
     "div",
     {
-      role: "progressbar",
-      "aria-valuenow": s,
-      "aria-valuemin": 0,
-      "aria-valuemax": 100,
-      "aria-label": i,
-      className: [r["progress-bar"], t, n].filter(Boolean).join(" "),
+      ...g,
+      ...n ? {
+        "aria-hidden": !0,
+        role: void 0,
+        "aria-valuenow": void 0,
+        "aria-valuemin": void 0,
+        "aria-valuemax": void 0,
+        "aria-valuetext": void 0
+      } : {
+        role: "progressbar",
+        "aria-valuenow": s ? void 0 : l,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": t
+      },
+      className: [
+        r["progress-bar"],
+        u,
+        s ? r["progress-bar--indeterminate"] : "",
+        f
+      ].filter(Boolean).join(" "),
       children: /* @__PURE__ */ e(
         "div",
         {
-          className: [r["progress-bar__fill"], f].filter(Boolean).join(" "),
-          style: { width: `${s}%` }
+          className: [r["progress-bar__fill"], d].filter(Boolean).join(" "),
+          style: s ? void 0 : { width: `${l}%` }
         }
       )
     }
   );
 }
 export {
-  c as default
+  b as default
 };
 //# sourceMappingURL=ProgressBar.js.map

package/dist/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import styles from './ProgressBar.module.scss';\n\nexport type ProgressBarSize = 'small' | 'large';\n\nexport interface ProgressBarProps {\n  /** Progress value 0–100. Default: 0. */\n  value?: number;\n  /** Size variant. Default: Large. */\n  size?: ProgressBarSize;\n  /**\n   * When true, fill color shifts from green→yellow→red based on percentage.\n   * When false, uses the default brand blue. Default: false.\n   */\n  semanticColors?: boolean;\n  /** Accessible label for the progress bar. */\n  'aria-label'?: string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nfunction getSemanticColorClass(value: number): string {\n  if (value >= 90) return styles['progress-bar__fill--danger'];\n  if (value >= 70) return styles['progress-bar__fill--warning'];\n  return styles['progress-bar__fill--success'];\n}\n\n/**\n * Progress Bar shows determinate progress through a wait state — an upload finishing, a\n * quota filling, an import running. Use it when the duration or total is known; reach for\n * [Spinner](/components/spinner) when it isn't.\n */\nexport default function ProgressBar({\n  value = 0,\n  size = 'large',\n  semanticColors = false,\n  'aria-label': ariaLabel = 'Progress',\n  className = '',\n}: ProgressBarProps) {\n  const clampedValue = Math.min(100, Math.max(0, value));\n  const sizeClass =\n    size === 'small'\n      ? styles['progress-bar--size-small']\n      : styles['progress-bar--size-large'];\n\n  const fillColorClass = semanticColors\n    ? getSemanticColorClass(clampedValue)\n    : styles['progress-bar__fill--default'];\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-valuenow={clampedValue}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label={ariaLabel}\n      className={[styles['progress-bar'], sizeClass, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div\n        className={[styles['progress-bar__fill'], fillColorClass]\n          .filter(Boolean)\n          .join(' ')}\n        style={{ width: `${clampedValue}%` }}\n      />\n    </div>\n  );\n}\n"],"names":["getSemanticColorClass","value","styles","ProgressBar","size","semanticColors","ariaLabel","className","clampedValue","sizeClass","fillColorClass","jsx"],"mappings":";;AAoBA,SAASA,EAAsBC,GAAuB;AACpD,SAAIA,KAAS,KAAWC,EAAO,4BAA4B,IACvDD,KAAS,KAAWC,EAAO,6BAA6B,IACrDA,EAAO,6BAA6B;AAC7C;AAOA,SAAwBC,EAAY;AAAA,EAClC,OAAAF,IAAQ;AAAA,EACR,MAAAG,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,cAAcC,IAAY;AAAA,EAC1B,WAAAC,IAAY;AACd,GAAqB;AACnB,QAAMC,IAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGP,CAAK,CAAC,GAC/CQ,IACJL,MAAS,UACLF,EAAO,0BAA0B,IACjCA,EAAO,0BAA0B,GAEjCQ,IAAiBL,IACnBL,EAAsBQ,CAAY,IAClCN,EAAO,6BAA6B;AAExC,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAeH;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAYF;AAAA,MACZ,WAAW,CAACJ,EAAO,cAAc,GAAGO,GAAWF,CAAS,EACrD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAACT,EAAO,oBAAoB,GAAGQ,CAAc,EACrD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,OAAO,EAAE,OAAO,GAAGF,CAAY,IAAA;AAAA,QAAI;AAAA,MAAA;AAAA,IACrC;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './ProgressBar.module.scss';\n\nexport type ProgressBarSize = 'small' | 'large';\n\nexport interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Progress value 0–100. Default: 0. */\n  value?: number;\n  /** Size variant. Default: Large. */\n  size?: ProgressBarSize;\n  /**\n   * When true, fill color shifts from green→yellow→red based on percentage.\n   * When false, uses the default brand blue. Default: false.\n   */\n  semanticColors?: boolean;\n  /**\n   * When true, shows an animated bar for work with an unknown total and omits\n   * `aria-valuenow`. `value` and `semanticColors` are ignored. Default: false.\n   */\n  indeterminate?: boolean;\n  /**\n   * When true, the bar is purely visual: it renders `aria-hidden=\"true\"` and omits\n   * `role=\"progressbar\"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and\n   * `aria-label`. Use it for bars that don't report progress toward a goal (e.g.\n   * rows in a bar chart) and put the accessible text on the surrounding element.\n   * Default: false.\n   */\n  decorative?: boolean;\n  /** Accessible label for the progress bar. Ignored when `decorative`. Default: \"Progress\". */\n  'aria-label'?: string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nfunction getSemanticColorClass(value: number): string {\n  if (value >= 90) return styles['progress-bar__fill--danger'];\n  if (value >= 70) return styles['progress-bar__fill--warning'];\n  return styles['progress-bar__fill--success'];\n}\n\n/**\n * Progress Bar shows determinate progress through a wait state — an upload finishing, a\n * quota filling, an import running. Use it when the duration or total is known; reach for\n * [Spinner](/components/spinner) when it isn't.\n */\nexport default function ProgressBar({\n  value = 0,\n  size = 'large',\n  semanticColors = false,\n  indeterminate = false,\n  decorative = false,\n  'aria-label': ariaLabel = 'Progress',\n  className = '',\n  ...rest\n}: ProgressBarProps) {\n  const clampedValue = Math.min(100, Math.max(0, value));\n  const sizeClass =\n    size === 'small'\n      ? styles['progress-bar--size-small']\n      : styles['progress-bar--size-large'];\n\n  const fillColorClass =\n    semanticColors && !indeterminate\n      ? getSemanticColorClass(clampedValue)\n      : styles['progress-bar__fill--default'];\n\n  return (\n    <div\n      {...rest}\n      {...(decorative\n        ? {\n            'aria-hidden': true,\n            role: undefined,\n            'aria-valuenow': undefined,\n            'aria-valuemin': undefined,\n            'aria-valuemax': undefined,\n            'aria-valuetext': undefined,\n          }\n        : {\n            role: 'progressbar',\n            'aria-valuenow': indeterminate ? undefined : clampedValue,\n            'aria-valuemin': 0,\n            'aria-valuemax': 100,\n            'aria-label': ariaLabel,\n          })}\n      className={[\n        styles['progress-bar'],\n        sizeClass,\n        indeterminate ? styles['progress-bar--indeterminate'] : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div\n        className={[styles['progress-bar__fill'], fillColorClass]\n          .filter(Boolean)\n          .join(' ')}\n        style={indeterminate ? undefined : { width: `${clampedValue}%` }}\n      />\n    </div>\n  );\n}\n"],"names":["getSemanticColorClass","value","styles","ProgressBar","size","semanticColors","indeterminate","decorative","ariaLabel","className","rest","clampedValue","sizeClass","fillColorClass","jsx"],"mappings":";;AAkCA,SAASA,EAAsBC,GAAuB;AACpD,SAAIA,KAAS,KAAWC,EAAO,4BAA4B,IACvDD,KAAS,KAAWC,EAAO,6BAA6B,IACrDA,EAAO,6BAA6B;AAC7C;AAOA,SAAwBC,EAAY;AAAA,EAClC,OAAAF,IAAQ;AAAA,EACR,MAAAG,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,eAAAC,IAAgB;AAAA,EAChB,YAAAC,IAAa;AAAA,EACb,cAAcC,IAAY;AAAA,EAC1B,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGV,CAAK,CAAC,GAC/CW,IACJR,MAAS,UACLF,EAAO,0BAA0B,IACjCA,EAAO,0BAA0B,GAEjCW,IACJR,KAAkB,CAACC,IACfN,EAAsBW,CAAY,IAClCT,EAAO,6BAA6B;AAE1C,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACH,GAAIH,IACD;AAAA,QACE,eAAe;AAAA,QACf,MAAM;AAAA,QACN,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MAAA,IAEpB;AAAA,QACE,MAAM;AAAA,QACN,iBAAiBD,IAAgB,SAAYK;AAAA,QAC7C,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,cAAcH;AAAA,MAAA;AAAA,MAEpB,WAAW;AAAA,QACTN,EAAO,cAAc;AAAA,QACrBU;AAAA,QACAN,IAAgBJ,EAAO,6BAA6B,IAAI;AAAA,QACxDO;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAACZ,EAAO,oBAAoB,GAAGW,CAAc,EACrD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,OAAOP,IAAgB,SAAY,EAAE,OAAO,GAAGK,CAAY,IAAA;AAAA,QAAI;AAAA,MAAA;AAAA,IACjE;AAAA,EAAA;AAGN;"}

package/dist/components/progress-bar/ProgressBar.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ProgressBar.module.css');const r={"progress-bar":"_progress-bar_yw4zb_2","progress-bar--size-small":"_progress-bar--size-small_yw4zb_8","progress-bar__fill":"_progress-bar__fill_yw4zb_12","progress-bar--size-large":"_progress-bar--size-large_yw4zb_15","progress-bar__fill--default":"_progress-bar__fill--default_yw4zb_29","progress-bar__fill--success":"_progress-bar__fill--success_yw4zb_32","progress-bar__fill--warning":"_progress-bar__fill--warning_yw4zb_35","progress-bar__fill--danger":"_progress-bar__fill--danger_yw4zb_38"};exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ProgressBar.css');const r={"progress-bar":"_progress-bar_3xsuh_21","progress-bar--size-small":"_progress-bar--size-small_3xsuh_27","progress-bar__fill":"_progress-bar__fill_3xsuh_31","progress-bar--size-large":"_progress-bar--size-large_3xsuh_34","progress-bar__fill--default":"_progress-bar__fill--default_3xsuh_48","progress-bar__fill--success":"_progress-bar__fill--success_3xsuh_51","progress-bar__fill--warning":"_progress-bar__fill--warning_3xsuh_54","progress-bar__fill--danger":"_progress-bar__fill--danger_3xsuh_57","progress-bar--indeterminate":"_progress-bar--indeterminate_3xsuh_60"};exports.default=r;
 //# sourceMappingURL=ProgressBar.module.scss.cjs.map

package/dist/components/progress-bar/ProgressBar.module.scss.js

@@ -1,12 +1,13 @@
-import './ProgressBar.module.css';const r = {
-  "progress-bar": "_progress-bar_yw4zb_2",
-  "progress-bar--size-small": "_progress-bar--size-small_yw4zb_8",
-  "progress-bar__fill": "_progress-bar__fill_yw4zb_12",
-  "progress-bar--size-large": "_progress-bar--size-large_yw4zb_15",
-  "progress-bar__fill--default": "_progress-bar__fill--default_yw4zb_29",
-  "progress-bar__fill--success": "_progress-bar__fill--success_yw4zb_32",
-  "progress-bar__fill--warning": "_progress-bar__fill--warning_yw4zb_35",
-  "progress-bar__fill--danger": "_progress-bar__fill--danger_yw4zb_38"
+import './ProgressBar.css';const r = {
+  "progress-bar": "_progress-bar_3xsuh_21",
+  "progress-bar--size-small": "_progress-bar--size-small_3xsuh_27",
+  "progress-bar__fill": "_progress-bar__fill_3xsuh_31",
+  "progress-bar--size-large": "_progress-bar--size-large_3xsuh_34",
+  "progress-bar__fill--default": "_progress-bar__fill--default_3xsuh_48",
+  "progress-bar__fill--success": "_progress-bar__fill--success_3xsuh_51",
+  "progress-bar__fill--warning": "_progress-bar__fill--warning_3xsuh_54",
+  "progress-bar__fill--danger": "_progress-bar__fill--danger_3xsuh_57",
+  "progress-bar--indeterminate": "_progress-bar--indeterminate_3xsuh_60"
 };
 export {
   r as default

package/dist/components/progress-bar/ProgressBar.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"ProgressBar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/components/radio/Radio.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),C=require("react"),h=require("../../hooks/use-controllable.cjs"),q=require("../../utils/string.cjs"),e=require("./Radio.module.scss.cjs");function v({className:r="",size:n="medium",valid:s=!0,children:t,id:d,checked:o,defaultChecked:i,disabled:u,onChange:c,name:_,value:m,...f}){const b=C.useId(),l=d??b,[,j]=h.useControllable(o,i,c),p=e.default[`radio--size-${q.toKebab(n)}`],g=s?"":e.default["radio--invalid"],x=[e.default.radio,p,g,r].filter(Boolean).join(" ");return a.jsxs("label",{className:x,htmlFor:l,children:[a.jsx("input",{id:l,type:"radio",name:_,value:m,className:e.default.radio__input,checked:o,defaultChecked:i,disabled:u,"aria-invalid":s?void 0:!0,onChange:j,...f}),a.jsx("span",{className:e.default.radio__circle,children:a.jsx("span",{className:e.default.radio__dot,"aria-hidden":!0})}),t!=null&&a.jsx("span",{className:e.default.radio__label,children:t})]})}exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),r=require("react"),h=require("../../hooks/use-controllable.cjs"),q=require("../../utils/string.cjs"),e=require("./Radio.module.scss.cjs"),n=r.forwardRef(function({className:d="",size:u="medium",invalid:s=!1,children:o,id:c,checked:i,defaultChecked:t,disabled:f,onChange:_,name:m,value:b,...j},p){const R=r.useId(),l=c??R,[,g]=h.useControllable(i,t,_),x=e.default[`radio--size-${q.toKebab(u)}`],C=s?e.default["radio--invalid"]:"",N=[e.default.radio,x,C,d].filter(Boolean).join(" ");return a.jsxs("label",{className:N,htmlFor:l,children:[a.jsx("input",{ref:p,id:l,type:"radio",name:m,value:b,className:e.default.radio__input,checked:i,defaultChecked:t,disabled:f,"aria-invalid":s?!0:void 0,onChange:g,...j}),a.jsx("span",{className:e.default.radio__circle,children:a.jsx("span",{className:e.default.radio__dot,"aria-hidden":!0})}),o!=null&&a.jsx("span",{className:e.default.radio__label,children:o})]})});n.displayName="Radio";exports.default=n;
 //# sourceMappingURL=Radio.cjs.map

package/dist/components/radio/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' | 'medium' | 'large';\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: RadioSize;\n  /** When false, uses error/destructive styling (red when checked). Default: true. */\n  valid?: boolean;\n  /** Label content. Rendered next to the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nexport default function Radio({\n  className = '',\n  size = 'medium',\n  valid = true,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  name,\n  value,\n  ...rest\n}: RadioProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n  const sizeClass = styles[`radio--size-${toKebab(size)}`];\n  const invalidClass = valid ? '' : styles['radio--invalid'];\n\n  const rootClass = [styles.radio, sizeClass, invalidClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      <input\n        id={id}\n        type=\"radio\"\n        name={name}\n        value={value}\n        className={styles['radio__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={valid ? undefined : true}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['radio__circle']}>\n        <span className={styles['radio__dot']} aria-hidden />\n      </span>\n      {children != null && (\n        <span className={styles['radio__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["Radio","className","size","valid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":"0RA2BA,SAAwBA,EAAM,CAC5B,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,MAAAC,EAAQ,GACR,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAAe,CACb,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKV,GAAUQ,EACf,CAAA,CAAGG,CAAY,EAAIC,EAAAA,gBAAgBX,EAASC,EAAgBE,CAAQ,EAEpES,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQlB,CAAI,CAAC,EAAE,EACjDmB,EAAelB,EAAQ,GAAKgB,EAAAA,QAAO,gBAAgB,EAEnDG,EAAY,CAACH,UAAO,MAAOD,EAAWG,EAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEsB,EAAAA,KAAC,QAAA,CAAM,UAAWD,EAAW,QAASP,EACpC,SAAA,CAAAS,EAAAA,IAAC,QAAA,CACC,GAAAT,EACA,KAAK,QACL,KAAAL,EACA,MAAAC,EACA,UAAWQ,EAAAA,QAAO,aAClB,QAAAb,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAQ,OAAY,GAClC,SAAUa,EACT,GAAGJ,CAAA,CAAA,EAENY,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,cACtB,SAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,WAAe,cAAW,GAAC,EACrD,EACCf,GAAY,MACXoB,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,aAAkB,SAAAf,CAAA,CAAS,CAAA,EAEvD,CAEJ"}
+{"version":3,"file":"Radio.cjs","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { forwardRef, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' | 'medium' | 'large';\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: RadioSize;\n  /** When true, uses error/destructive styling (red when checked). */\n  invalid?: boolean;\n  /** Label content. Rendered next to the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    className = '',\n    size = 'medium',\n    invalid = false,\n    children,\n    id: idProp,\n    checked,\n    defaultChecked,\n    disabled,\n    onChange,\n    name,\n    value,\n    ...rest\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n  const sizeClass = styles[`radio--size-${toKebab(size)}`];\n  const invalidClass = invalid ? styles['radio--invalid'] : '';\n\n  const rootClass = [styles.radio, sizeClass, invalidClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props -- invalid form contract; radio has no supported invalid ARIA */}\n      <input\n        ref={ref}\n        id={id}\n        type=\"radio\"\n        name={name}\n        value={value}\n        className={styles['radio__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={invalid ? true : undefined}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['radio__circle']}>\n        <span className={styles['radio__dot']} aria-hidden />\n      </span>\n      {children != null && (\n        <span className={styles['radio__label']}>{children}</span>\n      )}\n    </label>\n  );\n});\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["Radio","forwardRef","className","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","ref","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":"0RA2BMA,EAAQC,EAAAA,WAAyC,SACrD,CACE,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKX,GAAUS,EACf,CAAA,CAAGG,CAAY,EAAIC,EAAAA,gBAAgBZ,EAASC,EAAgBE,CAAQ,EAEpEU,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQnB,CAAI,CAAC,EAAE,EACjDoB,EAAenB,EAAUiB,UAAO,gBAAgB,EAAI,GAEpDG,EAAY,CAACH,UAAO,MAAOD,EAAWG,EAAcrB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEuB,EAAAA,KAAC,QAAA,CAAM,UAAWD,EAAW,QAASP,EAEpC,SAAA,CAAAS,EAAAA,IAAC,QAAA,CACC,IAAAZ,EACA,GAAAG,EACA,KAAK,QACL,KAAAN,EACA,MAAAC,EACA,UAAWS,EAAAA,QAAO,aAClB,QAAAd,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAU,GAAO,OAC/B,SAAUc,EACT,GAAGL,CAAA,CAAA,EAENa,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,cACtB,SAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,WAAe,cAAW,GAAC,EACrD,EACChB,GAAY,MACXqB,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,aAAkB,SAAAhB,CAAA,CAAS,CAAA,EAEvD,CAEJ,CAAC,EAEDL,EAAM,YAAc"}

package/dist/components/radio/Radio.css

@@ -0,0 +1 @@
+._radio_1v3hu_13{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_1v3hu_13._radio_1v3hu_13{margin:0}._radio_1v3hu_13:has(._radio__input_1v3hu_28:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_1v3hu_28{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_1v3hu_28:focus-visible{outline:none}._radio__circle_1v3hu_47{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_1v3hu_28:focus-visible~._radio__circle_1v3hu_47{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_1v3hu_13:has(._radio__input_1v3hu_28:not(:disabled)):hover ._radio__circle_1v3hu_47{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_1v3hu_28:disabled~._radio__circle_1v3hu_47{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_1v3hu_28:checked~._radio__circle_1v3hu_47{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_1v3hu_28:checked~._radio__circle_1v3hu_47 ._radio__dot_1v3hu_73{background-color:var(--button-bg)}._radio_1v3hu_13:has(._radio__input_1v3hu_28:not(:disabled)):hover ._radio__input_1v3hu_28:checked~._radio__circle_1v3hu_47{border-color:var(--button-bg)}._radio_1v3hu_13:has(._radio__input_1v3hu_28:not(:disabled)):hover ._radio__input_1v3hu_28:checked~._radio__circle_1v3hu_47 ._radio__dot_1v3hu_73{background-color:var(--button-bg)}._radio__input_1v3hu_28:focus-visible:checked~._radio__circle_1v3hu_47{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_1v3hu_28:disabled:checked~._radio__circle_1v3hu_47{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_1v3hu_28:disabled:checked~._radio__circle_1v3hu_47 ._radio__dot_1v3hu_73{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_1v3hu_94 ._radio__circle_1v3hu_47{border-color:var(--error-text, var(--color-danger))}._radio_1v3hu_13:has(._radio__input_1v3hu_28:not(:disabled)):hover._radio--invalid_1v3hu_94 ._radio__input_1v3hu_28:not(:checked)~._radio__circle_1v3hu_47{border-color:var(--error-text, var(--color-danger))}._radio--invalid_1v3hu_94 ._radio__input_1v3hu_28:checked~._radio__circle_1v3hu_47{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_1v3hu_94 ._radio__input_1v3hu_28:checked~._radio__circle_1v3hu_47 ._radio__dot_1v3hu_73{background-color:var(--error-text, var(--color-danger))}._radio_1v3hu_13:has(._radio__input_1v3hu_28:not(:disabled)):hover._radio--invalid_1v3hu_94 ._radio__input_1v3hu_28:checked~._radio__circle_1v3hu_47{border-color:var(--error-text, var(--color-danger))}._radio_1v3hu_13:has(._radio__input_1v3hu_28:not(:disabled)):hover._radio--invalid_1v3hu_94 ._radio__input_1v3hu_28:checked~._radio__circle_1v3hu_47 ._radio__dot_1v3hu_73{background-color:var(--error-text, var(--color-danger))}._radio--invalid_1v3hu_94 ._radio__input_1v3hu_28:focus-visible~._radio__circle_1v3hu_47{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_1v3hu_94 ._radio__input_1v3hu_28:focus-visible:checked~._radio__circle_1v3hu_47{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_1v3hu_73{display:block;border-radius:var(--radius-pill);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_1v3hu_28:checked~._radio__circle_1v3hu_47 ._radio__dot_1v3hu_73{transform:scale(1)}._radio__label_1v3hu_130{line-height:1}._radio--size-small_1v3hu_133{gap:var(--spacing-xs)}._radio--size-small_1v3hu_133 ._radio__input_1v3hu_28,._radio--size-small_1v3hu_133 ._radio__circle_1v3hu_47{width:var(--icon-size-12);height:var(--icon-size-12);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._radio--size-small_1v3hu_133 ._radio__dot_1v3hu_73{width:6px;height:6px}._radio--size-small_1v3hu_133 ._radio__label_1v3hu_130{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_1v3hu_154{gap:var(--spacing-xs)}._radio--size-medium_1v3hu_154 ._radio__input_1v3hu_28,._radio--size-medium_1v3hu_154 ._radio__circle_1v3hu_47{width:var(--icon-size-16);height:var(--icon-size-16);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._radio--size-medium_1v3hu_154 ._radio__dot_1v3hu_73{width:8px;height:8px}._radio--size-medium_1v3hu_154 ._radio__label_1v3hu_130{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_1v3hu_175{gap:var(--spacing-s)}._radio--size-large_1v3hu_175 ._radio__input_1v3hu_28,._radio--size-large_1v3hu_175 ._radio__circle_1v3hu_47{width:var(--icon-size-20);height:var(--icon-size-20);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._radio--size-large_1v3hu_175 ._radio__dot_1v3hu_73{width:10px;height:10px}._radio--size-large_1v3hu_175 ._radio__label_1v3hu_130{font-size:var(--font-size-200);line-height:var(--line-height-200)}

package/dist/components/radio/Radio.d.ts

@@ -5,8 +5,8 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */
     size?: RadioSize;
-    /** When false, uses error/destructive styling (red when checked). Default: true. */
-    valid?: boolean;
+    /** When true, uses error/destructive styling (red when checked). */
+    invalid?: boolean;
     /** Label content. Rendered next to the radio. */
     children?: React.ReactNode;
 }
@@ -15,5 +15,6 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are
  * few enough to show at once and the user benefits from seeing every option side-by-side.
  */
-export default function Radio({ className, size, valid, children, id: idProp, checked, defaultChecked, disabled, onChange, name, value, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
+declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Radio;
 //# sourceMappingURL=Radio.d.ts.map

package/dist/components/radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,IAAe,EACf,KAAY,EACZ,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,GAAG,IAAI,EACR,EAAE,UAAU,2CAmCZ"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,QAAA,MAAM,KAAK,yGAqDT,CAAC;AAIH,eAAe,KAAK,CAAC"}

package/dist/components/radio/Radio.js

@@ -1,45 +1,47 @@
 import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { useId as j } from "react";
-import { useControllable as v } from "../../hooks/use-controllable.js";
-import { toKebab as x } from "../../utils/string.js";
+import { forwardRef as j, useId as v } from "react";
+import { useControllable as x } from "../../hooks/use-controllable.js";
+import { toKebab as y } from "../../utils/string.js";
 import a from "./Radio.module.scss.js";
-function K({
-  className: t = "",
-  size: l = "medium",
-  valid: i = !0,
-  children: s,
+const z = j(function({
+  className: n = "",
+  size: t = "medium",
+  invalid: s = !1,
+  children: i,
   id: d,
   checked: r,
   defaultChecked: e,
   disabled: m,
   onChange: c,
   name: p,
-  value: u,
-  ..._
-}) {
-  const f = j(), n = d ?? f, [, b] = v(r, e, c), C = a[`radio--size-${x(l)}`], N = i ? "" : a["radio--invalid"], h = [a.radio, C, N, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ g("label", { className: h, htmlFor: n, children: [
+  value: f,
+  ...u
+}, _) {
+  const N = v(), l = d ?? N, [, b] = x(r, e, c), C = a[`radio--size-${y(t)}`], h = s ? a["radio--invalid"] : "", R = [a.radio, C, h, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ g("label", { className: R, htmlFor: l, children: [
     /* @__PURE__ */ o(
       "input",
       {
-        id: n,
+        ref: _,
+        id: l,
         type: "radio",
         name: p,
-        value: u,
+        value: f,
         className: a.radio__input,
         checked: r,
         defaultChecked: e,
         disabled: m,
-        "aria-invalid": i ? void 0 : !0,
+        "aria-invalid": s ? !0 : void 0,
         onChange: b,
-        ..._
+        ...u
       }
     ),
     /* @__PURE__ */ o("span", { className: a.radio__circle, children: /* @__PURE__ */ o("span", { className: a.radio__dot, "aria-hidden": !0 }) }),
-    s != null && /* @__PURE__ */ o("span", { className: a.radio__label, children: s })
+    i != null && /* @__PURE__ */ o("span", { className: a.radio__label, children: i })
   ] });
-}
+});
+z.displayName = "Radio";
 export {
-  K as default
+  z as default
 };
 //# sourceMappingURL=Radio.js.map

package/dist/components/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' | 'medium' | 'large';\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: RadioSize;\n  /** When false, uses error/destructive styling (red when checked). Default: true. */\n  valid?: boolean;\n  /** Label content. Rendered next to the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nexport default function Radio({\n  className = '',\n  size = 'medium',\n  valid = true,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  name,\n  value,\n  ...rest\n}: RadioProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n  const sizeClass = styles[`radio--size-${toKebab(size)}`];\n  const invalidClass = valid ? '' : styles['radio--invalid'];\n\n  const rootClass = [styles.radio, sizeClass, invalidClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      <input\n        id={id}\n        type=\"radio\"\n        name={name}\n        value={value}\n        className={styles['radio__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={valid ? undefined : true}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['radio__circle']}>\n        <span className={styles['radio__dot']} aria-hidden />\n      </span>\n      {children != null && (\n        <span className={styles['radio__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["Radio","className","size","valid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA2BA,SAAwBA,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,QAAMC,IAAcC,EAAA,GACdC,IAAKV,KAAUQ,GACf,CAAA,EAAGG,CAAY,IAAIC,EAAgBX,GAASC,GAAgBE,CAAQ,GAEpES,IAAYC,EAAO,eAAeC,EAAQlB,CAAI,CAAC,EAAE,GACjDmB,IAAelB,IAAQ,KAAKgB,EAAO,gBAAgB,GAEnDG,IAAY,CAACH,EAAO,OAAOD,GAAWG,GAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAsB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAASP,GACpC,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAT;AAAA,QACA,MAAK;AAAA,QACL,MAAAL;AAAA,QACA,OAAAC;AAAA,QACA,WAAWQ,EAAO;AAAA,QAClB,SAAAb;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAQ,SAAY;AAAA,QAClC,UAAUa;AAAA,QACT,GAAGJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,gBAAAY,EAAC,QAAA,EAAK,WAAWL,EAAO,eACtB,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWL,EAAO,YAAe,eAAW,IAAC,GACrD;AAAA,IACCf,KAAY,QACX,gBAAAoB,EAAC,QAAA,EAAK,WAAWL,EAAO,cAAkB,UAAAf,EAAA,CAAS;AAAA,EAAA,GAEvD;AAEJ;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { forwardRef, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' | 'medium' | 'large';\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: RadioSize;\n  /** When true, uses error/destructive styling (red when checked). */\n  invalid?: boolean;\n  /** Label content. Rendered next to the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    className = '',\n    size = 'medium',\n    invalid = false,\n    children,\n    id: idProp,\n    checked,\n    defaultChecked,\n    disabled,\n    onChange,\n    name,\n    value,\n    ...rest\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n  const sizeClass = styles[`radio--size-${toKebab(size)}`];\n  const invalidClass = invalid ? styles['radio--invalid'] : '';\n\n  const rootClass = [styles.radio, sizeClass, invalidClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props -- invalid form contract; radio has no supported invalid ARIA */}\n      <input\n        ref={ref}\n        id={id}\n        type=\"radio\"\n        name={name}\n        value={value}\n        className={styles['radio__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={invalid ? true : undefined}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['radio__circle']}>\n        <span className={styles['radio__dot']} aria-hidden />\n      </span>\n      {children != null && (\n        <span className={styles['radio__label']}>{children}</span>\n      )}\n    </label>\n  );\n});\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["Radio","forwardRef","className","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","ref","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA2BA,MAAMA,IAAQC,EAAyC,SACrD;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAcC,EAAA,GACdC,IAAKX,KAAUS,GACf,CAAA,EAAGG,CAAY,IAAIC,EAAgBZ,GAASC,GAAgBE,CAAQ,GAEpEU,IAAYC,EAAO,eAAeC,EAAQnB,CAAI,CAAC,EAAE,GACjDoB,IAAenB,IAAUiB,EAAO,gBAAgB,IAAI,IAEpDG,IAAY,CAACH,EAAO,OAAOD,GAAWG,GAAcrB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAuB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAASP,GAEpC,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAZ;AAAA,QACA,IAAAG;AAAA,QACA,MAAK;AAAA,QACL,MAAAN;AAAA,QACA,OAAAC;AAAA,QACA,WAAWS,EAAO;AAAA,QAClB,SAAAd;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAU,KAAO;AAAA,QAC/B,UAAUc;AAAA,QACT,GAAGL;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,gBAAAa,EAAC,QAAA,EAAK,WAAWL,EAAO,eACtB,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWL,EAAO,YAAe,eAAW,IAAC,GACrD;AAAA,IACChB,KAAY,QACX,gBAAAqB,EAAC,QAAA,EAAK,WAAWL,EAAO,cAAkB,UAAAhB,EAAA,CAAS;AAAA,EAAA,GAEvD;AAEJ,CAAC;AAEDL,EAAM,cAAc;"}

package/dist/components/radio/Radio.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.module.css');const _="_radio_1e67f_2",i="_radio__input_1e67f_13",o="_radio__circle_1e67f_33",a="_radio__dot_1e67f_59",e="_radio__label_1e67f_116",d={radio:_,radio__input:i,radio__circle:o,radio__dot:a,"radio--invalid":"_radio--invalid_1e67f_80",radio__label:e,"radio--size-small":"_radio--size-small_1e67f_119","radio--size-medium":"_radio--size-medium_1e67f_138","radio--size-large":"_radio--size-large_1e67f_157"};exports.default=d;exports.radio=_;exports.radio__circle=o;exports.radio__dot=a;exports.radio__input=i;exports.radio__label=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const _="_radio_1v3hu_13",i="_radio__input_1v3hu_28",o="_radio__circle_1v3hu_47",a="_radio__dot_1v3hu_73",d="_radio__label_1v3hu_130",r={radio:_,radio__input:i,radio__circle:o,radio__dot:a,"radio--invalid":"_radio--invalid_1v3hu_94",radio__label:d,"radio--size-small":"_radio--size-small_1v3hu_133","radio--size-medium":"_radio--size-medium_1v3hu_154","radio--size-large":"_radio--size-large_1v3hu_175"};exports.default=r;exports.radio=_;exports.radio__circle=o;exports.radio__dot=a;exports.radio__input=i;exports.radio__label=d;
 //# sourceMappingURL=Radio.module.scss.cjs.map

package/dist/components/radio/Radio.module.scss.js

@@ -1,13 +1,13 @@
-import './Radio.module.css';const _ = "_radio_1e67f_2", i = "_radio__input_1e67f_13", a = "_radio__circle_1e67f_33", o = "_radio__dot_1e67f_59", d = "_radio__label_1e67f_116", r = {
+import './Radio.css';const _ = "_radio_1v3hu_13", i = "_radio__input_1v3hu_28", a = "_radio__circle_1v3hu_47", o = "_radio__dot_1v3hu_73", d = "_radio__label_1v3hu_130", r = {
   radio: _,
   radio__input: i,
   radio__circle: a,
   radio__dot: o,
-  "radio--invalid": "_radio--invalid_1e67f_80",
+  "radio--invalid": "_radio--invalid_1v3hu_94",
   radio__label: d,
-  "radio--size-small": "_radio--size-small_1e67f_119",
-  "radio--size-medium": "_radio--size-medium_1e67f_138",
-  "radio--size-large": "_radio--size-large_1e67f_157"
+  "radio--size-small": "_radio--size-small_1v3hu_133",
+  "radio--size-medium": "_radio--size-medium_1v3hu_154",
+  "radio--size-large": "_radio--size-large_1v3hu_175"
 };
 export {
   r as default,

package/dist/components/reaction-button/ReactionButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),o=require("react"),t=require("./ReactionButton.module.scss.cjs"),p=(n,e)=>`${n} ${e} reaction${e!==1?"s":""}`;function R({emoji:n,count:e,byCurrentUser:i=!1,formatLabel:c=p,className:d="",onClick:f,...m}){const u=o.useRef(e),a=o.useRef(void 0),[s,l]=o.useState(null);o.useEffect(()=>(e!==u.current&&(clearTimeout(a.current),l(e>u.current?"up":"down"),u.current=e,a.current=setTimeout(()=>l(null),300)),()=>clearTimeout(a.current)),[e]);const b=[t.default["reaction-button"],i?t.default["reaction-button--mine"]:"",d].filter(Boolean).join(" "),_=[t.default["reaction-button__count"],s==="up"?t.default["reaction-button__count--anim-up"]:"",s==="down"?t.default["reaction-button__count--anim-down"]:""].filter(Boolean).join(" ");return r.jsxs("button",{type:"button",className:b,onClick:f,"aria-label":c(n,e),"aria-pressed":i,...m,children:[r.jsx("span",{className:t.default["reaction-button__emoji"],"aria-hidden":!0,children:n}),r.jsx("span",{className:_,children:e})]})}exports.default=R;
+//# sourceMappingURL=ReactionButton.cjs.map

package/dist/components/reaction-button/ReactionButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.cjs","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport styles from './ReactionButton.module.scss';\n\nexport interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The emoji character to display. */\n  emoji: string;\n  /** Number of users who reacted with this emoji. */\n  count: number;\n  /** Whether the current user has reacted with this emoji. */\n  byCurrentUser?: boolean;\n  /** Accessible name. Default: `{emoji} {count} reaction(s)`. An explicit `aria-label` still wins. */\n  formatLabel?: (emoji: string, count: number) => string;\n}\n\nconst defaultFormatLabel = (emoji: string, count: number) =>\n  `${emoji} ${count} reaction${count !== 1 ? 's' : ''}`;\n\n/**\n * A single emoji reaction button — shows the emoji, count, and highlights when the current user\n * has reacted. Fires onClick when clicked; the host owns toggle logic.\n *\n * The count animates up or down when the `count` prop changes.\n */\nexport default function ReactionButton({\n  emoji,\n  count,\n  byCurrentUser = false,\n  formatLabel = defaultFormatLabel,\n  className = '',\n  onClick,\n  ...rest\n}: ReactionButtonProps) {\n  const prevCountRef = useRef(count);\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const [countAnim, setCountAnim] = useState<'up' | 'down' | null>(null);\n\n  useEffect(() => {\n    if (count !== prevCountRef.current) {\n      clearTimeout(timerRef.current);\n      setCountAnim(count > prevCountRef.current ? 'up' : 'down');\n      prevCountRef.current = count;\n      timerRef.current = setTimeout(() => setCountAnim(null), 300);\n    }\n    return () => clearTimeout(timerRef.current);\n  }, [count]);\n\n  const rootClass = [\n    styles['reaction-button'],\n    byCurrentUser ? styles['reaction-button--mine'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const countClass = [\n    styles['reaction-button__count'],\n    countAnim === 'up' ? styles['reaction-button__count--anim-up'] : '',\n    countAnim === 'down' ? styles['reaction-button__count--anim-down'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={rootClass}\n      onClick={onClick}\n      aria-label={formatLabel(emoji, count)}\n      aria-pressed={byCurrentUser}\n      {...rest}\n    >\n      <span className={styles['reaction-button__emoji']} aria-hidden>\n        {emoji}\n      </span>\n      <span className={countClass}>{count}</span>\n    </button>\n  );\n}\n"],"names":["defaultFormatLabel","emoji","count","ReactionButton","byCurrentUser","formatLabel","className","onClick","rest","prevCountRef","useRef","timerRef","countAnim","setCountAnim","useState","useEffect","rootClass","styles","countClass","jsxs","jsx"],"mappings":"kNAeMA,EAAqB,CAACC,EAAeC,IACzC,GAAGD,CAAK,IAAIC,CAAK,YAAYA,IAAU,EAAI,IAAM,EAAE,GAQrD,SAAwBC,EAAe,CACrC,MAAAF,EACA,MAAAC,EACA,cAAAE,EAAgB,GAChB,YAAAC,EAAcL,EACd,UAAAM,EAAY,GACZ,QAAAC,EACA,GAAGC,CACL,EAAwB,CACtB,MAAMC,EAAeC,EAAAA,OAAOR,CAAK,EAC3BS,EAAWD,EAAAA,OAAsC,MAAS,EAC1D,CAACE,EAAWC,CAAY,EAAIC,EAAAA,SAA+B,IAAI,EAErEC,EAAAA,UAAU,KACJb,IAAUO,EAAa,UACzB,aAAaE,EAAS,OAAO,EAC7BE,EAAaX,EAAQO,EAAa,QAAU,KAAO,MAAM,EACzDA,EAAa,QAAUP,EACvBS,EAAS,QAAU,WAAW,IAAME,EAAa,IAAI,EAAG,GAAG,GAEtD,IAAM,aAAaF,EAAS,OAAO,GACzC,CAACT,CAAK,CAAC,EAEV,MAAMc,EAAY,CAChBC,EAAAA,QAAO,iBAAiB,EACxBb,EAAgBa,EAAAA,QAAO,uBAAuB,EAAI,GAClDX,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELY,EAAa,CACjBD,EAAAA,QAAO,wBAAwB,EAC/BL,IAAc,KAAOK,UAAO,iCAAiC,EAAI,GACjEL,IAAc,OAASK,UAAO,mCAAmC,EAAI,EAAA,EAEpE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWH,EACX,QAAAT,EACA,aAAYF,EAAYJ,EAAOC,CAAK,EACpC,eAAcE,EACb,GAAGI,EAEJ,SAAA,CAAAY,EAAAA,IAAC,QAAK,UAAWH,UAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAAhB,EACH,EACAmB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAa,SAAAhB,CAAA,CAAM,CAAA,CAAA,CAAA,CAG1C"}

package/dist/components/reaction-button/ReactionButton.css

@@ -0,0 +1 @@
+@keyframes _reaction-count-up_195fe_1{0%{transform:translateY(var(--spacing-xxs));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes _reaction-count-down_195fe_1{0%{transform:translateY(calc(var(--spacing-xxs) * -1));opacity:0}to{transform:translateY(0);opacity:1}}._reaction-button_195fe_33{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xxs);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.08);cursor:pointer;outline:none}._reaction-button_195fe_33:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_195fe_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._reaction-button_195fe_33:focus-visible{animation:none}}._reaction-button_195fe_33:not(._-host-shadow-a_195fe_54):not(._-host-shadow-b_195fe_54){box-shadow:none;border-radius:var(--radius-s)}@keyframes _focus-ring-in_195fe_1{0%{outline-color:transparent;outline-offset:0}}._reaction-button_195fe_33:hover:not([aria-pressed]){transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._reaction-button_195fe_33:hover{background-color:rgba(var(--center-channel-color-rgb),.12)}._reaction-button--mine_195fe_70{background-color:rgba(var(--link-color-rgb),.08);box-shadow:inset 0 0 0 1px var(--link-color)}._reaction-button--mine_195fe_70:hover{background-color:rgba(var(--link-color-rgb),.12)}._reaction-button--mine_195fe_70:not(._-host-shadow-a_195fe_54):not(._-host-shadow-b_195fe_54){box-shadow:inset 0 0 0 1px var(--link-color)}._reaction-button--mine_195fe_70 ._reaction-button__count_195fe_80{color:var(--link-color)}._reaction-button__emoji_195fe_83{font-size:var(--font-size-200);line-height:var(--line-height-50)}._reaction-button__count_195fe_80{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.56)}._reaction-button__count--anim-up_195fe_94{animation:_reaction-count-up_195fe_1 var(--duration-moderate) var(--ease-entrance)}._reaction-button__count--anim-down_195fe_97{animation:_reaction-count-down_195fe_1 var(--duration-moderate) var(--ease-entrance)}

package/dist/components/reaction-button/ReactionButton.d.ts

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The emoji character to display. */
+    emoji: string;
+    /** Number of users who reacted with this emoji. */
+    count: number;
+    /** Whether the current user has reacted with this emoji. */
+    byCurrentUser?: boolean;
+    /** Accessible name. Default: `{emoji} {count} reaction(s)`. An explicit `aria-label` still wins. */
+    formatLabel?: (emoji: string, count: number) => string;
+}
+/**
+ * A single emoji reaction button — shows the emoji, count, and highlights when the current user
+ * has reacted. Fires onClick when clicked; the host owns toggle logic.
+ *
+ * The count animates up or down when the `count` prop changes.
+ */
+export default function ReactionButton({ emoji, count, byCurrentUser, formatLabel, className, onClick, ...rest }: ReactionButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReactionButton.d.ts.map

package/dist/components/reaction-button/ReactionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAClF,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oGAAoG;IACpG,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACxD;AAKD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,WAAgC,EAChC,SAAc,EACd,OAAO,EACP,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA8CrB"}

package/dist/components/reaction-button/ReactionButton.js

@@ -0,0 +1,44 @@
+import { jsxs as _, jsx as u } from "react/jsx-runtime";
+import { useRef as c, useState as h, useEffect as j } from "react";
+import e from "./ReactionButton.module.scss.js";
+const R = (n, t) => `${n} ${t} reaction${t !== 1 ? "s" : ""}`;
+function C({
+  emoji: n,
+  count: t,
+  byCurrentUser: a = !1,
+  formatLabel: l = R,
+  className: m = "",
+  onClick: f,
+  ...d
+}) {
+  const o = c(t), r = c(void 0), [i, s] = h(null);
+  j(() => (t !== o.current && (clearTimeout(r.current), s(t > o.current ? "up" : "down"), o.current = t, r.current = setTimeout(() => s(null), 300)), () => clearTimeout(r.current)), [t]);
+  const p = [
+    e["reaction-button"],
+    a ? e["reaction-button--mine"] : "",
+    m
+  ].filter(Boolean).join(" "), b = [
+    e["reaction-button__count"],
+    i === "up" ? e["reaction-button__count--anim-up"] : "",
+    i === "down" ? e["reaction-button__count--anim-down"] : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _(
+    "button",
+    {
+      type: "button",
+      className: p,
+      onClick: f,
+      "aria-label": l(n, t),
+      "aria-pressed": a,
+      ...d,
+      children: [
+        /* @__PURE__ */ u("span", { className: e["reaction-button__emoji"], "aria-hidden": !0, children: n }),
+        /* @__PURE__ */ u("span", { className: b, children: t })
+      ]
+    }
+  );
+}
+export {
+  C as default
+};
+//# sourceMappingURL=ReactionButton.js.map

package/dist/components/reaction-button/ReactionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.js","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport styles from './ReactionButton.module.scss';\n\nexport interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The emoji character to display. */\n  emoji: string;\n  /** Number of users who reacted with this emoji. */\n  count: number;\n  /** Whether the current user has reacted with this emoji. */\n  byCurrentUser?: boolean;\n  /** Accessible name. Default: `{emoji} {count} reaction(s)`. An explicit `aria-label` still wins. */\n  formatLabel?: (emoji: string, count: number) => string;\n}\n\nconst defaultFormatLabel = (emoji: string, count: number) =>\n  `${emoji} ${count} reaction${count !== 1 ? 's' : ''}`;\n\n/**\n * A single emoji reaction button — shows the emoji, count, and highlights when the current user\n * has reacted. Fires onClick when clicked; the host owns toggle logic.\n *\n * The count animates up or down when the `count` prop changes.\n */\nexport default function ReactionButton({\n  emoji,\n  count,\n  byCurrentUser = false,\n  formatLabel = defaultFormatLabel,\n  className = '',\n  onClick,\n  ...rest\n}: ReactionButtonProps) {\n  const prevCountRef = useRef(count);\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const [countAnim, setCountAnim] = useState<'up' | 'down' | null>(null);\n\n  useEffect(() => {\n    if (count !== prevCountRef.current) {\n      clearTimeout(timerRef.current);\n      setCountAnim(count > prevCountRef.current ? 'up' : 'down');\n      prevCountRef.current = count;\n      timerRef.current = setTimeout(() => setCountAnim(null), 300);\n    }\n    return () => clearTimeout(timerRef.current);\n  }, [count]);\n\n  const rootClass = [\n    styles['reaction-button'],\n    byCurrentUser ? styles['reaction-button--mine'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const countClass = [\n    styles['reaction-button__count'],\n    countAnim === 'up' ? styles['reaction-button__count--anim-up'] : '',\n    countAnim === 'down' ? styles['reaction-button__count--anim-down'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={rootClass}\n      onClick={onClick}\n      aria-label={formatLabel(emoji, count)}\n      aria-pressed={byCurrentUser}\n      {...rest}\n    >\n      <span className={styles['reaction-button__emoji']} aria-hidden>\n        {emoji}\n      </span>\n      <span className={countClass}>{count}</span>\n    </button>\n  );\n}\n"],"names":["defaultFormatLabel","emoji","count","ReactionButton","byCurrentUser","formatLabel","className","onClick","rest","prevCountRef","useRef","timerRef","countAnim","setCountAnim","useState","useEffect","rootClass","styles","countClass","jsxs","jsx"],"mappings":";;;AAeA,MAAMA,IAAqB,CAACC,GAAeC,MACzC,GAAGD,CAAK,IAAIC,CAAK,YAAYA,MAAU,IAAI,MAAM,EAAE;AAQrD,SAAwBC,EAAe;AAAA,EACrC,OAAAF;AAAA,EACA,OAAAC;AAAA,EACA,eAAAE,IAAgB;AAAA,EAChB,aAAAC,IAAcL;AAAA,EACd,WAAAM,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAeC,EAAOR,CAAK,GAC3BS,IAAWD,EAAsC,MAAS,GAC1D,CAACE,GAAWC,CAAY,IAAIC,EAA+B,IAAI;AAErE,EAAAC,EAAU,OACJb,MAAUO,EAAa,YACzB,aAAaE,EAAS,OAAO,GAC7BE,EAAaX,IAAQO,EAAa,UAAU,OAAO,MAAM,GACzDA,EAAa,UAAUP,GACvBS,EAAS,UAAU,WAAW,MAAME,EAAa,IAAI,GAAG,GAAG,IAEtD,MAAM,aAAaF,EAAS,OAAO,IACzC,CAACT,CAAK,CAAC;AAEV,QAAMc,IAAY;AAAA,IAChBC,EAAO,iBAAiB;AAAA,IACxBb,IAAgBa,EAAO,uBAAuB,IAAI;AAAA,IAClDX;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELY,IAAa;AAAA,IACjBD,EAAO,wBAAwB;AAAA,IAC/BL,MAAc,OAAOK,EAAO,iCAAiC,IAAI;AAAA,IACjEL,MAAc,SAASK,EAAO,mCAAmC,IAAI;AAAA,EAAA,EAEpE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWH;AAAA,MACX,SAAAT;AAAA,MACA,cAAYF,EAAYJ,GAAOC,CAAK;AAAA,MACpC,gBAAcE;AAAA,MACb,GAAGI;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY,EAAC,UAAK,WAAWH,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAAhB,GACH;AAAA,QACA,gBAAAmB,EAAC,QAAA,EAAK,WAAWF,GAAa,UAAAhB,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;"}

package/dist/components/reaction-button/ReactionButton.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ReactionButton.css');const t={"reaction-button":"_reaction-button_195fe_33","reaction-button--mine":"_reaction-button--mine_195fe_70","reaction-button__count":"_reaction-button__count_195fe_80","reaction-button__emoji":"_reaction-button__emoji_195fe_83","reaction-button__count--anim-up":"_reaction-button__count--anim-up_195fe_94","reaction-button__count--anim-down":"_reaction-button__count--anim-down_195fe_97"};exports.default=t;
+//# sourceMappingURL=ReactionButton.module.scss.cjs.map

package/dist/components/reaction-button/ReactionButton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/reaction-button/ReactionButton.module.scss.js

@@ -0,0 +1,12 @@
+import './ReactionButton.css';const t = {
+  "reaction-button": "_reaction-button_195fe_33",
+  "reaction-button--mine": "_reaction-button--mine_195fe_70",
+  "reaction-button__count": "_reaction-button__count_195fe_80",
+  "reaction-button__emoji": "_reaction-button__emoji_195fe_83",
+  "reaction-button__count--anim-up": "_reaction-button__count--anim-up_195fe_94",
+  "reaction-button__count--anim-down": "_reaction-button__count--anim-down_195fe_97"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=ReactionButton.module.scss.js.map

package/dist/components/reaction-button/ReactionButton.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/reaction-button/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./ReactionButton.cjs");exports.ReactionButton=t.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/reaction-button/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ReactionButton } from './ReactionButton';
+export type { ReactionButtonProps } from './ReactionButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/reaction-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/reaction-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/reaction-button/index.js

@@ -0,0 +1,5 @@
+import { default as a } from "./ReactionButton.js";
+export {
+  a as ReactionButton
+};
+//# sourceMappingURL=index.js.map

package/dist/components/reactions-row/ReactionsRow.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("../icon-button/IconButton.cjs"),l=require("../icon/Icon.cjs"),q=require("../reaction-button/ReactionButton.cjs"),__g=require("@mattermost/compass-icons/components/check-circle-outline.js"),g=__g?.default??__g,__k=require("@mattermost/compass-icons/components/emoticon-plus-outline.js"),k=__k?.default??__k,a=require("./ReactionsRow.module.scss.cjs"),v=[{emoji:"👍",count:1},{emoji:"😀",count:4},{emoji:"🙌",count:1}];function I({reactions:n=v,showAddReaction:c=!1,acknowledged:r=!1,acknowledgeCount:i=0,currentUserAcknowledged:s=!1,onAddReaction:u,onReactionClick:t,onAcknowledge:d,acknowledgeLabel:f="Acknowledge",acknowledgeAriaLabel:_="Acknowledge message",addReactionLabel:j="Add reaction",formatReactionLabel:m,className:x="",...h}){const w=[a.default["reactions-row"],x].filter(Boolean).join(" ");return e.jsxs("div",{className:w,...h,children:[r&&e.jsxs("button",{type:"button",className:[a.default["reactions-row__ack"],s?a.default["reactions-row__ack--active"]:""].filter(Boolean).join(" "),onClick:d,"aria-pressed":s,"aria-label":_,children:[e.jsx("span",{className:a.default["reactions-row__ack-icon"],"aria-hidden":!0,children:e.jsx(l.default,{size:"16",glyph:e.jsx(g,{})})}),s?e.jsx("span",{className:a.default["reactions-row__ack-count"],children:i}):e.jsx("span",{className:a.default["reactions-row__ack-label"],children:f})]}),e.jsxs("div",{className:a.default["reactions-row__buttons"],children:[n.map(({emoji:o,count:b,byCurrentUser:p})=>e.jsx(q.default,{emoji:o,count:b,byCurrentUser:p,formatLabel:m,onClick:()=>t==null?void 0:t(o)},o)),c&&e.jsx(N.default,{"aria-label":j,className:a.default["reactions-row__add-reaction"],size:"x-small",onClick:u,icon:e.jsx(l.default,{size:"16",glyph:e.jsx(k,{})})})]})]})}exports.default=I;
+//# sourceMappingURL=ReactionsRow.cjs.map