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

package/dist/components/select/Select.module.scss.js

@@ -1,40 +1,40 @@
-import './Select.module.css';const e = "_select_117uv_2", _ = "_select__wrapper_117uv_8", l = "_select__label_117uv_26", t = "_select__control_117uv_56", s = "_select__value_117uv_82", c = "_select__leadingIcon_117uv_92", o = "_select__trailingIcon_117uv_99", n = "_select__popup_117uv_111", i = "_select__menu_117uv_127", a = "_select__list_117uv_132", u = "_select__option_117uv_137", p = {
+import './Select.css';const e = "_select_ew42w_13", _ = "_select__wrapper_ew42w_19", l = "_select__label_ew42w_37", s = "_select__message_ew42w_67", t = "_select__control_ew42w_70", c = "_select__value_ew42w_96", o = "_select__popup_ew42w_125", w = "_select__menu_ew42w_141", n = "_select__list_ew42w_146", i = "_select__option_ew42w_151", a = {
   select: e,
   select__wrapper: _,
-  "select--disabled": "_select--disabled_117uv_16",
+  "select--disabled": "_select--disabled_ew42w_27",
   select__label: l,
-  "select--label-floated": "_select--label-floated_117uv_47",
+  "select--label-floated": "_select--label-floated_ew42w_58",
+  select__message: s,
   select__control: t,
-  "select__control--placeholder": "_select__control--placeholder_117uv_82",
-  select__value: s,
-  select__leadingIcon: c,
-  select__trailingIcon: o,
-  "select--open": "_select--open_117uv_108",
-  select__popup: n,
-  "select__popup--above": "_select__popup--above_117uv_118",
-  "select__popup--visible": "_select__popup--visible_117uv_121",
-  select__menu: i,
-  select__list: a,
-  select__option: u,
-  "select__option-content--disabled": "_select__option-content--disabled_117uv_145",
-  "select--size-small": "_select--size-small_117uv_148",
-  "select--size-medium": "_select--size-medium_117uv_167",
-  "select--size-large": "_select--size-large_117uv_190",
-  "select--invalid": "_select--invalid_117uv_217",
-  "select--has-leading-icon": "_select--has-leading-icon_117uv_229"
+  "select__control--placeholder": "_select__control--placeholder_ew42w_96",
+  select__value: c,
+  "select__leading-icon": "_select__leading-icon_ew42w_106",
+  "select__trailing-icon": "_select__trailing-icon_ew42w_113",
+  "select--open": "_select--open_ew42w_122",
+  select__popup: o,
+  "select__popup--above": "_select__popup--above_ew42w_132",
+  "select__popup--visible": "_select__popup--visible_ew42w_135",
+  select__menu: w,
+  select__list: n,
+  select__option: i,
+  "select__option-content--disabled": "_select__option-content--disabled_ew42w_159",
+  "select--size-small": "_select--size-small_ew42w_162",
+  "select--size-medium": "_select--size-medium_ew42w_182",
+  "select--size-large": "_select--size-large_ew42w_207",
+  "select--invalid": "_select--invalid_ew42w_235",
+  "select--has-leading-icon": "_select--has-leading-icon_ew42w_247"
 };
 export {
-  p as default,
+  a as default,
   e as select,
   t as select__control,
   l as select__label,
-  c as select__leadingIcon,
-  a as select__list,
-  i as select__menu,
-  u as select__option,
-  n as select__popup,
-  o as select__trailingIcon,
-  s as select__value,
+  n as select__list,
+  w as select__menu,
+  s as select__message,
+  i as select__option,
+  o as select__popup,
+  c as select__value,
   _ as select__wrapper
 };
 //# sourceMappingURL=Select.module.scss.js.map

package/dist/components/select/Select.module.scss.js.map

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

package/dist/components/shortcut-tag/ShortcutTag.css

@@ -0,0 +1 @@
+._shortcut-tag__key_f7hop_13{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--radius-s);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);white-space:nowrap}._shortcut-tag__key--size-small_f7hop_24{padding:var(--spacing-xxxxs) var(--spacing-xxxs);font-size:var(--font-size-75);line-height:var(--line-height-75)}._shortcut-tag__key--size-medium_f7hop_29{padding:var(--spacing-xxxxs) var(--spacing-xxs);font-size:var(--font-size-100);line-height:var(--line-height-100)}._shortcut-tag__key--size-large_f7hop_34{padding:var(--spacing-xxxxs) var(--spacing-xs);font-size:var(--font-size-200);line-height:var(--line-height-200)}._shortcut-tag__key--location-default_f7hop_39{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._shortcut-tag__key--location-tooltips_f7hop_43{background-color:color-mix(in srgb,var(--neutral-0) 8%,transparent);color:color-mix(in srgb,var(--neutral-0) 72%,transparent)}._shortcut-tag-group_f7hop_48{display:inline-flex;align-items:center;gap:var(--spacing-xxxxs);vertical-align:text-bottom}

package/dist/components/shortcut-tag/ShortcutTag.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ShortcutTag.module.css');const t={"shortcut-tag__key":"_shortcut-tag__key_mn7ou_2","shortcut-tag__key--size-small":"_shortcut-tag__key--size-small_mn7ou_13","shortcut-tag__key--size-medium":"_shortcut-tag__key--size-medium_mn7ou_18","shortcut-tag__key--size-large":"_shortcut-tag__key--size-large_mn7ou_23","shortcut-tag__key--location-default":"_shortcut-tag__key--location-default_mn7ou_28","shortcut-tag__key--location-tooltips":"_shortcut-tag__key--location-tooltips_mn7ou_32","shortcut-tag-group":"_shortcut-tag-group_mn7ou_37"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ShortcutTag.css');const t={"shortcut-tag__key":"_shortcut-tag__key_f7hop_13","shortcut-tag__key--size-small":"_shortcut-tag__key--size-small_f7hop_24","shortcut-tag__key--size-medium":"_shortcut-tag__key--size-medium_f7hop_29","shortcut-tag__key--size-large":"_shortcut-tag__key--size-large_f7hop_34","shortcut-tag__key--location-default":"_shortcut-tag__key--location-default_f7hop_39","shortcut-tag__key--location-tooltips":"_shortcut-tag__key--location-tooltips_f7hop_43","shortcut-tag-group":"_shortcut-tag-group_f7hop_48"};exports.default=t;
 //# sourceMappingURL=ShortcutTag.module.scss.cjs.map

package/dist/components/shortcut-tag/ShortcutTag.module.scss.js

@@ -1,11 +1,11 @@
-import './ShortcutTag.module.css';const t = {
-  "shortcut-tag__key": "_shortcut-tag__key_mn7ou_2",
-  "shortcut-tag__key--size-small": "_shortcut-tag__key--size-small_mn7ou_13",
-  "shortcut-tag__key--size-medium": "_shortcut-tag__key--size-medium_mn7ou_18",
-  "shortcut-tag__key--size-large": "_shortcut-tag__key--size-large_mn7ou_23",
-  "shortcut-tag__key--location-default": "_shortcut-tag__key--location-default_mn7ou_28",
-  "shortcut-tag__key--location-tooltips": "_shortcut-tag__key--location-tooltips_mn7ou_32",
-  "shortcut-tag-group": "_shortcut-tag-group_mn7ou_37"
+import './ShortcutTag.css';const t = {
+  "shortcut-tag__key": "_shortcut-tag__key_f7hop_13",
+  "shortcut-tag__key--size-small": "_shortcut-tag__key--size-small_f7hop_24",
+  "shortcut-tag__key--size-medium": "_shortcut-tag__key--size-medium_f7hop_29",
+  "shortcut-tag__key--size-large": "_shortcut-tag__key--size-large_f7hop_34",
+  "shortcut-tag__key--location-default": "_shortcut-tag__key--location-default_f7hop_39",
+  "shortcut-tag__key--location-tooltips": "_shortcut-tag__key--location-tooltips_f7hop_43",
+  "shortcut-tag-group": "_shortcut-tag-group_f7hop_48"
 };
 export {
   t as default

package/dist/components/spinner/Spinner.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),t=require("./Spinner.module.scss.cjs");function d({size:e=16,inverted:n=!1,className:r="","aria-label":a="Loading",style:i,...s}){const o=Math.max(1,Math.min(3,Math.round(e*.1))),l=[t.default.spinner,n?t.default["spinner--inverted"]:"",r].filter(Boolean).join(" ");return u.jsx("span",{className:l,role:"status","aria-label":a,style:{width:`${e}px`,height:`${e}px`,"--spinner-stroke-width":`${o}px`,...i},...s})}exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),t=require("./Spinner.module.scss.cjs");function p({size:n="16",inverted:r=!1,className:s="","aria-label":i="Loading",style:a,...o}){const e=Number(n),l=Math.max(1,Math.min(3,Math.round(e*.1))),u=[t.default.spinner,r?t.default["spinner--inverted"]:"",s].filter(Boolean).join(" ");return d.jsx("span",{className:u,role:"status","aria-label":i,style:{width:`${e}px`,height:`${e}px`,"--spinner-stroke-width":`${l}px`,...a},...o})}exports.default=p;
 //# sourceMappingURL=Spinner.cjs.map

package/dist/components/spinner/Spinner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.cjs","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = 10 | 12 | 16 | 20 | 24 | 28 | 32;\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = 16,\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(size * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${size}px`,\n        height: `${size}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","strokeWidth","rootClass","styles","jsx"],"mappings":"wLAkBA,SAAwBA,EAAQ,CAC9B,KAAAC,EAAO,GACP,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,aAAcC,EAAY,UAC1B,MAAAC,EACA,GAAGC,CACL,EAAiB,CACf,MAAMC,EAAc,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,KAAK,MAAMN,EAAO,EAAG,CAAC,CAAC,EAE7DO,EAAY,CAChBC,EAAAA,QAAO,QACPP,EAAWO,EAAAA,QAAO,mBAAmB,EAAI,GACzCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,OAAA,CACC,UAAWF,EACX,KAAK,SACL,aAAYJ,EACZ,MAAO,CACL,MAAO,GAAGH,CAAI,KACd,OAAQ,GAAGA,CAAI,KACd,yBAAqC,GAAGM,CAAW,KACpD,GAAGF,CAAA,EAEJ,GAAGC,CAAA,CAAA,CAGV"}
+{"version":3,"file":"Spinner.cjs","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = '10' | '12' | '16' | '20' | '24' | '28' | '32';\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  /** Accessible name announced with `role=\"status\"`. Default: \"Loading\". Pass a translated string to localize. */\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = '16',\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const sizePx = Number(size);\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(sizePx * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${sizePx}px`,\n        height: `${sizePx}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","sizePx","strokeWidth","rootClass","styles","jsx"],"mappings":"wLAmBA,SAAwBA,EAAQ,CAC9B,KAAAC,EAAO,KACP,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,aAAcC,EAAY,UAC1B,MAAAC,EACA,GAAGC,CACL,EAAiB,CACf,MAAMC,EAAS,OAAON,CAAI,EACpBO,EAAc,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,KAAK,MAAMD,EAAS,EAAG,CAAC,CAAC,EAE/DE,EAAY,CAChBC,EAAAA,QAAO,QACPR,EAAWQ,EAAAA,QAAO,mBAAmB,EAAI,GACzCP,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEQ,EAAAA,IAAC,OAAA,CACC,UAAWF,EACX,KAAK,SACL,aAAYL,EACZ,MAAO,CACL,MAAO,GAAGG,CAAM,KAChB,OAAQ,GAAGA,CAAM,KAChB,yBAAqC,GAAGC,CAAW,KACpD,GAAGH,CAAA,EAEJ,GAAGC,CAAA,CAAA,CAGV"}

package/dist/components/spinner/Spinner.css

@@ -0,0 +1 @@
+@keyframes _spinner-spin_mvrwe_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._spinner_mvrwe_21{display:inline-block;border-radius:var(--radius-pill);animation:_spinner-spin_mvrwe_1 .75s linear infinite;background:conic-gradient(rgba(var(--center-channel-color-rgb),0),rgba(var(--center-channel-color-rgb),.64));-webkit-mask-image:radial-gradient(farthest-side,transparent calc(100% - var(--spinner-stroke-width, 2px)),white calc(100% - var(--spinner-stroke-width, 2px)));mask-image:radial-gradient(farthest-side,transparent calc(100% - var(--spinner-stroke-width, 2px)),white calc(100% - var(--spinner-stroke-width, 2px)))}._spinner--inverted_mvrwe_28{background:conic-gradient(rgba(var(--button-color-rgb),0),rgba(var(--button-color-rgb),.64))}

package/dist/components/spinner/Spinner.d.ts

@@ -1,8 +1,9 @@
 import { HTMLAttributes } from 'react';
-export type SpinnerSize = 10 | 12 | 16 | 20 | 24 | 28 | 32;
+export type SpinnerSize = '10' | '12' | '16' | '20' | '24' | '28' | '32';
 export interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'role'> {
     size?: SpinnerSize;
     inverted?: boolean;
+    /** Accessible name announced with `role="status"`. Default: "Loading". Pass a translated string to localize. */
     'aria-label'?: string;
 }
 /**

package/dist/components/spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE3D,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,cAAc,CAAC,eAAe,CAAC,EAC/B,MAAM,CACP;IACC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAS,EACT,QAAgB,EAChB,SAAc,EACd,YAAY,EAAE,SAAqB,EACnC,KAAK,EACL,GAAG,SAAS,EACb,EAAE,YAAY,2CAyBd"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzE,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,cAAc,CAAC,eAAe,CAAC,EAC/B,MAAM,CACP;IACC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gHAAgH;IAChH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAW,EACX,QAAgB,EAChB,SAAc,EACd,YAAY,EAAE,SAAqB,EACnC,KAAK,EACL,GAAG,SAAS,EACb,EAAE,YAAY,2CA0Bd"}

package/dist/components/spinner/Spinner.js

@@ -1,35 +1,35 @@
-import { jsx as p } from "react/jsx-runtime";
-import a from "./Spinner.module.scss.js";
-function m({
-  size: t = 16,
+import { jsx as h } from "react/jsx-runtime";
+import e from "./Spinner.module.scss.js";
+function x({
+  size: s = "16",
   inverted: n = !1,
   className: r = "",
-  "aria-label": e = "Loading",
-  style: o,
-  ...s
+  "aria-label": a = "Loading",
+  style: i,
+  ...o
 }) {
-  const i = Math.max(1, Math.min(3, Math.round(t * 0.1))), l = [
-    a.spinner,
-    n ? a["spinner--inverted"] : "",
+  const t = Number(s), l = Math.max(1, Math.min(3, Math.round(t * 0.1))), p = [
+    e.spinner,
+    n ? e["spinner--inverted"] : "",
     r
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ h(
     "span",
     {
-      className: l,
+      className: p,
       role: "status",
-      "aria-label": e,
+      "aria-label": a,
       style: {
         width: `${t}px`,
         height: `${t}px`,
-        "--spinner-stroke-width": `${i}px`,
-        ...o
+        "--spinner-stroke-width": `${l}px`,
+        ...i
       },
-      ...s
+      ...o
     }
   );
 }
 export {
-  m as default
+  x as default
 };
 //# sourceMappingURL=Spinner.js.map

package/dist/components/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = 10 | 12 | 16 | 20 | 24 | 28 | 32;\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = 16,\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(size * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${size}px`,\n        height: `${size}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","strokeWidth","rootClass","styles","jsx"],"mappings":";;AAkBA,SAAwBA,EAAQ;AAAA,EAC9B,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,cAAcC,IAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAMN,IAAO,GAAG,CAAC,CAAC,GAE7DO,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPP,IAAWO,EAAO,mBAAmB,IAAI;AAAA,IACzCN;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAK;AAAA,MACL,cAAYJ;AAAA,MACZ,OAAO;AAAA,QACL,OAAO,GAAGH,CAAI;AAAA,QACd,QAAQ,GAAGA,CAAI;AAAA,QACd,0BAAqC,GAAGM,CAAW;AAAA,QACpD,GAAGF;AAAA,MAAA;AAAA,MAEJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = '10' | '12' | '16' | '20' | '24' | '28' | '32';\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  /** Accessible name announced with `role=\"status\"`. Default: \"Loading\". Pass a translated string to localize. */\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = '16',\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const sizePx = Number(size);\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(sizePx * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${sizePx}px`,\n        height: `${sizePx}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","sizePx","strokeWidth","rootClass","styles","jsx"],"mappings":";;AAmBA,SAAwBA,EAAQ;AAAA,EAC9B,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,cAAcC,IAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAS,OAAON,CAAI,GACpBO,IAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAMD,IAAS,GAAG,CAAC,CAAC,GAE/DE,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPR,IAAWQ,EAAO,mBAAmB,IAAI;AAAA,IACzCP;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAK;AAAA,MACL,cAAYL;AAAA,MACZ,OAAO;AAAA,QACL,OAAO,GAAGG,CAAM;AAAA,QAChB,QAAQ,GAAGA,CAAM;AAAA,QAChB,0BAAqC,GAAGC,CAAW;AAAA,QACpD,GAAGH;AAAA,MAAA;AAAA,MAEJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/spinner/Spinner.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Spinner.module.css');const e="_spinner_16qg7_10",n={spinner:e,"spinner--inverted":"_spinner--inverted_16qg7_17"};exports.default=n;exports.spinner=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Spinner.css');const e="_spinner_mvrwe_21",n={spinner:e,"spinner--inverted":"_spinner--inverted_mvrwe_28"};exports.default=n;exports.spinner=e;
 //# sourceMappingURL=Spinner.module.scss.cjs.map

package/dist/components/spinner/Spinner.module.scss.js

@@ -1,9 +1,9 @@
-import './Spinner.module.css';const n = "_spinner_16qg7_10", e = {
-  spinner: n,
-  "spinner--inverted": "_spinner--inverted_16qg7_17"
+import './Spinner.css';const e = "_spinner_mvrwe_21", n = {
+  spinner: e,
+  "spinner--inverted": "_spinner--inverted_mvrwe_28"
 };
 export {
-  e as default,
-  n as spinner
+  n as default,
+  e as spinner
 };
 //# sourceMappingURL=Spinner.module.scss.js.map

package/dist/components/status-badge/StatusBadge.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),__d=require("@mattermost/compass-icons/components/check-circle.js"),d=__d?.default??__d,__b=require("@mattermost/compass-icons/components/circle-outline.js"),b=__b?.default??__b,__g=require("@mattermost/compass-icons/components/clock.js"),g=__g?.default??__g,__m=require("@mattermost/compass-icons/components/minus-circle.js"),m=__m?.default??__m,a=require("../../utils/string.cjs"),e=require("./StatusBadge.module.scss.cjs"),f={"xx-small":10,"x-small":12,small:16,medium:20,large:32},C={online:d,away:g,"do-not-disturb":m,offline:b};function _({className:n="",size:l="x-small",status:s="online"}){const o=e.default[`status-badge--size-${a.toKebab(l)}`],i=e.default[`status-badge--status-${a.toKebab(s)}`],r=[e.default["status-badge"],o,i,n].filter(Boolean).join(" "),u=f[l],c=C[s];return t.jsx("span",{className:r,role:"img","aria-label":s,children:t.jsx("span",{className:e.default["status-badge__glyph"],children:t.jsx(c,{size:u})})})}exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),__g=require("@mattermost/compass-icons/components/check-circle.js"),g=__g?.default??__g,__b=require("@mattermost/compass-icons/components/circle-outline.js"),b=__b?.default??__b,__m=require("@mattermost/compass-icons/components/clock.js"),m=__m?.default??__m,__f=require("@mattermost/compass-icons/components/minus-circle.js"),f=__f?.default??__f,a=require("../../utils/string.cjs"),e=require("./StatusBadge.module.scss.cjs"),x={"xx-small":10,"x-small":12,small:16,medium:20,large:28,"x-large":32},C={online:g,away:m,"do-not-disturb":f,offline:b};function _({className:n="",size:l="x-small",status:s="online",label:o}){const i=e.default[`status-badge--size-${a.toKebab(l)}`],r=e.default[`status-badge--status-${a.toKebab(s)}`],u=[e.default["status-badge"],i,r,n].filter(Boolean).join(" "),c=x[l],d=C[s];return t.jsx("span",{className:u,role:"img","aria-label":o??s,children:t.jsx("span",{className:e.default["status-badge__glyph"],children:t.jsx(d,{size:c})})})}exports.default=_;
 //# sourceMappingURL=StatusBadge.cjs.map

package/dist/components/status-badge/StatusBadge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.cjs","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport CircleOutlineIcon from '@mattermost/compass-icons/components/circle-outline';\nimport ClockIcon from '@mattermost/compass-icons/components/clock';\nimport MinusCircleIcon from '@mattermost/compass-icons/components/minus-circle';\nimport { toKebab } from '@/utils/string';\nimport styles from './StatusBadge.module.scss';\n\n/** Figma Status Badge size. */\nexport type StatusBadgeSize =\n  | 'xx-small'\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large';\n\n/** Figma Status Badge status variant. */\nexport type StatusBadgeStatus =\n  | 'online'\n  | 'away'\n  | 'do-not-disturb'\n  | 'offline';\n\nexport interface StatusBadgeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Size. Default: X-Small. */\n  size?: StatusBadgeSize;\n  /** Status variant. Figma: Status. Default: Online. */\n  status?: StatusBadgeStatus;\n}\n\n/** Compass icon size in px per StatusBadge size — Figma. */\nconst BADGE_ICON_SIZE_PX: Record<StatusBadgeSize, number> = {\n  'xx-small': 10,\n  'x-small': 12,\n  small: 16,\n  medium: 20,\n  large: 32,\n};\n\n/** Compass icon component per status variant. */\nconst GLYPH_COMPONENT: Record<StatusBadgeStatus, ElementType> = {\n  online: CheckCircleIcon,\n  away: ClockIcon,\n  'do-not-disturb': MinusCircleIcon,\n  offline: CircleOutlineIcon,\n};\n\n/**\n * A Status Badge tells you whether someone is reachable. It pairs with an avatar or username\n * so a glance is enough to know if a teammate is online, focused, away, or signed out.\n */\nexport default function StatusBadge({\n  className = '',\n  size = 'x-small',\n  status = 'online',\n}: StatusBadgeProps) {\n  const sizeClass = styles[`status-badge--size-${toKebab(size)}`];\n  const statusClass = styles[`status-badge--status-${toKebab(status)}`];\n  const rootClass = [styles['status-badge'], sizeClass, statusClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSizePx = BADGE_ICON_SIZE_PX[size];\n  const GlyphIcon = GLYPH_COMPONENT[status];\n\n  return (\n    <span className={rootClass} role=\"img\" aria-label={status}>\n      <span className={styles['status-badge__glyph']}>\n        <GlyphIcon size={iconSizePx} />\n      </span>\n    </span>\n  );\n}\n"],"names":["BADGE_ICON_SIZE_PX","GLYPH_COMPONENT","CheckCircleIcon","ClockIcon","MinusCircleIcon","CircleOutlineIcon","StatusBadge","className","size","status","sizeClass","styles","toKebab","statusClass","rootClass","iconSizePx","GlyphIcon","jsx"],"mappings":"udAiCMA,EAAsD,CAC1D,WAAY,GACZ,UAAW,GACX,MAAO,GACP,OAAQ,GACR,MAAO,EACT,EAGMC,EAA0D,CAC9D,OAAQC,EACR,KAAMC,EACN,iBAAkBC,EAClB,QAASC,CACX,EAMA,SAAwBC,EAAY,CAClC,UAAAC,EAAY,GACZ,KAAAC,EAAO,UACP,OAAAC,EAAS,QACX,EAAqB,CACnB,MAAMC,EAAYC,EAAAA,QAAO,sBAAsBC,EAAAA,QAAQJ,CAAI,CAAC,EAAE,EACxDK,EAAcF,EAAAA,QAAO,wBAAwBC,EAAAA,QAAQH,CAAM,CAAC,EAAE,EAC9DK,EAAY,CAACH,EAAAA,QAAO,cAAc,EAAGD,EAAWG,EAAaN,CAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAAG,EAELQ,EAAaf,EAAmBQ,CAAI,EACpCQ,EAAYf,EAAgBQ,CAAM,EAExC,aACG,OAAA,CAAK,UAAWK,EAAW,KAAK,MAAM,aAAYL,EACjD,SAAAQ,EAAAA,IAAC,QAAK,UAAWN,EAAAA,QAAO,qBAAqB,EAC3C,SAAAM,EAAAA,IAACD,GAAU,KAAMD,EAAY,EAC/B,CAAA,CACF,CAEJ"}
+{"version":3,"file":"StatusBadge.cjs","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport CircleOutlineIcon from '@mattermost/compass-icons/components/circle-outline';\nimport ClockIcon from '@mattermost/compass-icons/components/clock';\nimport MinusCircleIcon from '@mattermost/compass-icons/components/minus-circle';\nimport { toKebab } from '@/utils/string';\nimport styles from './StatusBadge.module.scss';\n\n/** Figma Status Badge size. */\nexport type StatusBadgeSize =\n  | 'xx-small'\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large';\n\n/** Figma Status Badge status variant. */\nexport type StatusBadgeStatus =\n  | 'online'\n  | 'away'\n  | 'do-not-disturb'\n  | 'offline';\n\nexport interface StatusBadgeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Size. Default: X-Small. */\n  size?: StatusBadgeSize;\n  /** Status variant. Figma: Status. Default: Online. */\n  status?: StatusBadgeStatus;\n  /** Accessible name for the badge. Defaults to the `status` value; pass a translated string. */\n  label?: string;\n}\n\n/** Compass icon size in px per StatusBadge size — Figma. */\nconst BADGE_ICON_SIZE_PX: Record<StatusBadgeSize, number> = {\n  'xx-small': 10,\n  'x-small': 12,\n  small: 16,\n  medium: 20,\n  large: 28,\n  'x-large': 32,\n};\n\n/** Compass icon component per status variant. */\nconst GLYPH_COMPONENT: Record<StatusBadgeStatus, ElementType> = {\n  online: CheckCircleIcon,\n  away: ClockIcon,\n  'do-not-disturb': MinusCircleIcon,\n  offline: CircleOutlineIcon,\n};\n\n/**\n * A Status Badge tells you whether someone is reachable. It pairs with an avatar or username\n * so a glance is enough to know if a teammate is online, focused, away, or signed out.\n */\nexport default function StatusBadge({\n  className = '',\n  size = 'x-small',\n  status = 'online',\n  label,\n}: StatusBadgeProps) {\n  const sizeClass = styles[`status-badge--size-${toKebab(size)}`];\n  const statusClass = styles[`status-badge--status-${toKebab(status)}`];\n  const rootClass = [styles['status-badge'], sizeClass, statusClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSizePx = BADGE_ICON_SIZE_PX[size];\n  const GlyphIcon = GLYPH_COMPONENT[status];\n\n  return (\n    <span className={rootClass} role=\"img\" aria-label={label ?? status}>\n      <span className={styles['status-badge__glyph']}>\n        <GlyphIcon size={iconSizePx} />\n      </span>\n    </span>\n  );\n}\n"],"names":["BADGE_ICON_SIZE_PX","GLYPH_COMPONENT","CheckCircleIcon","ClockIcon","MinusCircleIcon","CircleOutlineIcon","StatusBadge","className","size","status","label","sizeClass","styles","toKebab","statusClass","rootClass","iconSizePx","GlyphIcon","jsx"],"mappings":"udAoCMA,EAAsD,CAC1D,WAAY,GACZ,UAAW,GACX,MAAO,GACP,OAAQ,GACR,MAAO,GACP,UAAW,EACb,EAGMC,EAA0D,CAC9D,OAAQC,EACR,KAAMC,EACN,iBAAkBC,EAClB,QAASC,CACX,EAMA,SAAwBC,EAAY,CAClC,UAAAC,EAAY,GACZ,KAAAC,EAAO,UACP,OAAAC,EAAS,SACT,MAAAC,CACF,EAAqB,CACnB,MAAMC,EAAYC,EAAAA,QAAO,sBAAsBC,EAAAA,QAAQL,CAAI,CAAC,EAAE,EACxDM,EAAcF,EAAAA,QAAO,wBAAwBC,EAAAA,QAAQJ,CAAM,CAAC,EAAE,EAC9DM,EAAY,CAACH,EAAAA,QAAO,cAAc,EAAGD,EAAWG,EAAaP,CAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAAG,EAELS,EAAahB,EAAmBQ,CAAI,EACpCS,EAAYhB,EAAgBQ,CAAM,EAExC,OACES,MAAC,QAAK,UAAWH,EAAW,KAAK,MAAM,aAAYL,GAASD,EAC1D,SAAAS,EAAAA,IAAC,QAAK,UAAWN,EAAAA,QAAO,qBAAqB,EAC3C,SAAAM,EAAAA,IAACD,GAAU,KAAMD,EAAY,EAC/B,CAAA,CACF,CAEJ"}

package/dist/components/status-badge/StatusBadge.css

@@ -0,0 +1 @@
+._status-badge_1vv61_13{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);color:var(--center-channel-color);box-sizing:border-box;overflow:hidden}._status-badge__glyph_1vv61_24{display:flex;align-items:center;justify-content:center;flex-shrink:0}._status-badge--size-xx-small_1vv61_30{width:var(--icon-size-12);height:var(--icon-size-12)}._status-badge--size-xx-small_1vv61_30 ._status-badge__glyph_1vv61_24{width:var(--icon-size-10);height:var(--icon-size-10)}._status-badge--size-x-small_1vv61_38,._status-badge--size-x-small_1vv61_38 ._status-badge__glyph_1vv61_24{width:var(--icon-size-12);height:var(--icon-size-12)}._status-badge--size-small_1vv61_46,._status-badge--size-small_1vv61_46 ._status-badge__glyph_1vv61_24{width:var(--icon-size-16);height:var(--icon-size-16)}._status-badge--size-medium_1vv61_54{width:var(--icon-size-24);height:var(--icon-size-24)}._status-badge--size-medium_1vv61_54 ._status-badge__glyph_1vv61_24{width:var(--icon-size-20);height:var(--icon-size-20)}._status-badge--size-large_1vv61_62,._status-badge--size-large_1vv61_62 ._status-badge__glyph_1vv61_24{width:var(--icon-size-28);height:var(--icon-size-28)}._status-badge--size-x-large_1vv61_70{width:var(--icon-size-32);height:var(--icon-size-32)}._status-badge--size-x-large_1vv61_70 ._status-badge__glyph_1vv61_24{width:36px;height:36px;margin:calc(-1 * var(--spacing-xxxxs))}._status-badge--status-online_1vv61_80{color:var(--online-indicator, var(--color-success));background-color:var(--status-badge-bg, var(--center-channel-bg))}._status-badge--status-away_1vv61_84{color:var(--away-indicator, var(--color-warning));background-color:var(--status-badge-bg, var(--center-channel-bg))}._status-badge--status-do-not-disturb_1vv61_88{color:var(--dnd-indicator, var(--color-danger));background-color:var(--status-badge-bg, var(--center-channel-bg))}._status-badge--status-offline_1vv61_92{color:var(--status-badge-offline-color, rgba(var(--center-channel-color-rgb), .32));background-color:var(--status-badge-bg, var(--center-channel-bg))}

package/dist/components/status-badge/StatusBadge.d.ts

@@ -1,5 +1,5 @@
 /** Figma Status Badge size. */
-export type StatusBadgeSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';
+export type StatusBadgeSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 /** Figma Status Badge status variant. */
 export type StatusBadgeStatus = 'online' | 'away' | 'do-not-disturb' | 'offline';
 export interface StatusBadgeProps {
@@ -9,10 +9,12 @@ export interface StatusBadgeProps {
     size?: StatusBadgeSize;
     /** Status variant. Figma: Status. Default: Online. */
     status?: StatusBadgeStatus;
+    /** Accessible name for the badge. Defaults to the `status` value; pass a translated string. */
+    label?: string;
 }
 /**
  * A Status Badge tells you whether someone is reachable. It pairs with an avatar or username
  * so a glance is enough to know if a teammate is online, focused, away, or signed out.
  */
-export default function StatusBadge({ className, size, status, }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+export default function StatusBadge({ className, size, status, label, }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StatusBadge.d.ts.map

package/dist/components/status-badge/StatusBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"names":[],"mappings":"AAQA,+BAA+B;AAC/B,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,SAAS,GACT,OAAO,GACP,QAAQ,GACR,OAAO,CAAC;AAEZ,yCAAyC;AACzC,MAAM,MAAM,iBAAiB,GACzB,QAAQ,GACR,MAAM,GACN,gBAAgB,GAChB,SAAS,CAAC;AAEd,MAAM,WAAW,gBAAgB;IAC/B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sDAAsD;IACtD,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAmBD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAc,EACd,IAAgB,EAChB,MAAiB,GAClB,EAAE,gBAAgB,2CAiBlB"}
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"names":[],"mappings":"AAQA,+BAA+B;AAC/B,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,SAAS,GACT,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,CAAC;AAEd,yCAAyC;AACzC,MAAM,MAAM,iBAAiB,GACzB,QAAQ,GACR,MAAM,GACN,gBAAgB,GAChB,SAAS,CAAC;AAEd,MAAM,WAAW,gBAAgB;IAC/B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sDAAsD;IACtD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,+FAA+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAc,EACd,IAAgB,EAChB,MAAiB,EACjB,KAAK,GACN,EAAE,gBAAgB,2CAiBlB"}

package/dist/components/status-badge/StatusBadge.js

@@ -1,31 +1,33 @@
 import { jsx as t } from "react/jsx-runtime";
-import __f from "@mattermost/compass-icons/components/check-circle.js";const f=__f&&__f.default?__f.default:__f;
-import __p from "@mattermost/compass-icons/components/circle-outline.js";const p=__p&&__p.default?__p.default:__p;
-import __u from "@mattermost/compass-icons/components/clock.js";const u=__u&&__u.default?__u.default:__u;
-import __d from "@mattermost/compass-icons/components/minus-circle.js";const d=__d&&__d.default?__d.default:__d;
+import __p from "@mattermost/compass-icons/components/check-circle.js";const p=__p&&__p.default?__p.default:__p;
+import __u from "@mattermost/compass-icons/components/circle-outline.js";const u=__u&&__u.default?__u.default:__u;
+import __d from "@mattermost/compass-icons/components/clock.js";const d=__d&&__d.default?__d.default:__d;
+import __C from "@mattermost/compass-icons/components/minus-circle.js";const C=__C&&__C.default?__C.default:__C;
 import { toKebab as l } from "../../utils/string.js";
 import o from "./StatusBadge.module.scss.js";
-const C = {
+const g = {
   "xx-small": 10,
   "x-small": 12,
   small: 16,
   medium: 20,
-  large: 32
+  large: 28,
+  "x-large": 32
 }, b = {
-  online: f,
-  away: u,
-  "do-not-disturb": d,
-  offline: p
+  online: p,
+  away: d,
+  "do-not-disturb": C,
+  offline: u
 };
-function O({
+function P({
   className: e = "",
   size: a = "x-small",
-  status: s = "online"
+  status: s = "online",
+  label: n
 }) {
-  const n = o[`status-badge--size-${l(a)}`], i = o[`status-badge--status-${l(s)}`], r = [o["status-badge"], n, i, e].filter(Boolean).join(" "), c = C[a], m = b[s];
-  return /* @__PURE__ */ t("span", { className: r, role: "img", "aria-label": s, children: /* @__PURE__ */ t("span", { className: o["status-badge__glyph"], children: /* @__PURE__ */ t(m, { size: c }) }) });
+  const r = o[`status-badge--size-${l(a)}`], i = o[`status-badge--status-${l(s)}`], c = [o["status-badge"], r, i, e].filter(Boolean).join(" "), m = g[a], f = b[s];
+  return /* @__PURE__ */ t("span", { className: c, role: "img", "aria-label": n ?? s, children: /* @__PURE__ */ t("span", { className: o["status-badge__glyph"], children: /* @__PURE__ */ t(f, { size: m }) }) });
 }
 export {
-  O as default
+  P as default
 };
 //# sourceMappingURL=StatusBadge.js.map

package/dist/components/status-badge/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport CircleOutlineIcon from '@mattermost/compass-icons/components/circle-outline';\nimport ClockIcon from '@mattermost/compass-icons/components/clock';\nimport MinusCircleIcon from '@mattermost/compass-icons/components/minus-circle';\nimport { toKebab } from '@/utils/string';\nimport styles from './StatusBadge.module.scss';\n\n/** Figma Status Badge size. */\nexport type StatusBadgeSize =\n  | 'xx-small'\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large';\n\n/** Figma Status Badge status variant. */\nexport type StatusBadgeStatus =\n  | 'online'\n  | 'away'\n  | 'do-not-disturb'\n  | 'offline';\n\nexport interface StatusBadgeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Size. Default: X-Small. */\n  size?: StatusBadgeSize;\n  /** Status variant. Figma: Status. Default: Online. */\n  status?: StatusBadgeStatus;\n}\n\n/** Compass icon size in px per StatusBadge size — Figma. */\nconst BADGE_ICON_SIZE_PX: Record<StatusBadgeSize, number> = {\n  'xx-small': 10,\n  'x-small': 12,\n  small: 16,\n  medium: 20,\n  large: 32,\n};\n\n/** Compass icon component per status variant. */\nconst GLYPH_COMPONENT: Record<StatusBadgeStatus, ElementType> = {\n  online: CheckCircleIcon,\n  away: ClockIcon,\n  'do-not-disturb': MinusCircleIcon,\n  offline: CircleOutlineIcon,\n};\n\n/**\n * A Status Badge tells you whether someone is reachable. It pairs with an avatar or username\n * so a glance is enough to know if a teammate is online, focused, away, or signed out.\n */\nexport default function StatusBadge({\n  className = '',\n  size = 'x-small',\n  status = 'online',\n}: StatusBadgeProps) {\n  const sizeClass = styles[`status-badge--size-${toKebab(size)}`];\n  const statusClass = styles[`status-badge--status-${toKebab(status)}`];\n  const rootClass = [styles['status-badge'], sizeClass, statusClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSizePx = BADGE_ICON_SIZE_PX[size];\n  const GlyphIcon = GLYPH_COMPONENT[status];\n\n  return (\n    <span className={rootClass} role=\"img\" aria-label={status}>\n      <span className={styles['status-badge__glyph']}>\n        <GlyphIcon size={iconSizePx} />\n      </span>\n    </span>\n  );\n}\n"],"names":["BADGE_ICON_SIZE_PX","GLYPH_COMPONENT","CheckCircleIcon","ClockIcon","MinusCircleIcon","CircleOutlineIcon","StatusBadge","className","size","status","sizeClass","styles","toKebab","statusClass","rootClass","iconSizePx","GlyphIcon","jsx"],"mappings":";;;;;;;AAiCA,MAAMA,IAAsD;AAAA,EAC1D,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAGMC,IAA0D;AAAA,EAC9D,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,kBAAkBC;AAAA,EAClB,SAASC;AACX;AAMA,SAAwBC,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AACX,GAAqB;AACnB,QAAMC,IAAYC,EAAO,sBAAsBC,EAAQJ,CAAI,CAAC,EAAE,GACxDK,IAAcF,EAAO,wBAAwBC,EAAQH,CAAM,CAAC,EAAE,GAC9DK,IAAY,CAACH,EAAO,cAAc,GAAGD,GAAWG,GAAaN,CAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAAG,GAELQ,IAAaf,EAAmBQ,CAAI,GACpCQ,IAAYf,EAAgBQ,CAAM;AAExC,2BACG,QAAA,EAAK,WAAWK,GAAW,MAAK,OAAM,cAAYL,GACjD,UAAA,gBAAAQ,EAAC,UAAK,WAAWN,EAAO,qBAAqB,GAC3C,UAAA,gBAAAM,EAACD,KAAU,MAAMD,GAAY,GAC/B,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport CircleOutlineIcon from '@mattermost/compass-icons/components/circle-outline';\nimport ClockIcon from '@mattermost/compass-icons/components/clock';\nimport MinusCircleIcon from '@mattermost/compass-icons/components/minus-circle';\nimport { toKebab } from '@/utils/string';\nimport styles from './StatusBadge.module.scss';\n\n/** Figma Status Badge size. */\nexport type StatusBadgeSize =\n  | 'xx-small'\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large';\n\n/** Figma Status Badge status variant. */\nexport type StatusBadgeStatus =\n  | 'online'\n  | 'away'\n  | 'do-not-disturb'\n  | 'offline';\n\nexport interface StatusBadgeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Size. Default: X-Small. */\n  size?: StatusBadgeSize;\n  /** Status variant. Figma: Status. Default: Online. */\n  status?: StatusBadgeStatus;\n  /** Accessible name for the badge. Defaults to the `status` value; pass a translated string. */\n  label?: string;\n}\n\n/** Compass icon size in px per StatusBadge size — Figma. */\nconst BADGE_ICON_SIZE_PX: Record<StatusBadgeSize, number> = {\n  'xx-small': 10,\n  'x-small': 12,\n  small: 16,\n  medium: 20,\n  large: 28,\n  'x-large': 32,\n};\n\n/** Compass icon component per status variant. */\nconst GLYPH_COMPONENT: Record<StatusBadgeStatus, ElementType> = {\n  online: CheckCircleIcon,\n  away: ClockIcon,\n  'do-not-disturb': MinusCircleIcon,\n  offline: CircleOutlineIcon,\n};\n\n/**\n * A Status Badge tells you whether someone is reachable. It pairs with an avatar or username\n * so a glance is enough to know if a teammate is online, focused, away, or signed out.\n */\nexport default function StatusBadge({\n  className = '',\n  size = 'x-small',\n  status = 'online',\n  label,\n}: StatusBadgeProps) {\n  const sizeClass = styles[`status-badge--size-${toKebab(size)}`];\n  const statusClass = styles[`status-badge--status-${toKebab(status)}`];\n  const rootClass = [styles['status-badge'], sizeClass, statusClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSizePx = BADGE_ICON_SIZE_PX[size];\n  const GlyphIcon = GLYPH_COMPONENT[status];\n\n  return (\n    <span className={rootClass} role=\"img\" aria-label={label ?? status}>\n      <span className={styles['status-badge__glyph']}>\n        <GlyphIcon size={iconSizePx} />\n      </span>\n    </span>\n  );\n}\n"],"names":["BADGE_ICON_SIZE_PX","GLYPH_COMPONENT","CheckCircleIcon","ClockIcon","MinusCircleIcon","CircleOutlineIcon","StatusBadge","className","size","status","label","sizeClass","styles","toKebab","statusClass","rootClass","iconSizePx","GlyphIcon","jsx"],"mappings":";;;;;;;AAoCA,MAAMA,IAAsD;AAAA,EAC1D,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AACb,GAGMC,IAA0D;AAAA,EAC9D,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,kBAAkBC;AAAA,EAClB,SAASC;AACX;AAMA,SAAwBC,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC;AACF,GAAqB;AACnB,QAAMC,IAAYC,EAAO,sBAAsBC,EAAQL,CAAI,CAAC,EAAE,GACxDM,IAAcF,EAAO,wBAAwBC,EAAQJ,CAAM,CAAC,EAAE,GAC9DM,IAAY,CAACH,EAAO,cAAc,GAAGD,GAAWG,GAAaP,CAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAAG,GAELS,IAAahB,EAAmBQ,CAAI,GACpCS,IAAYhB,EAAgBQ,CAAM;AAExC,SACE,gBAAAS,EAAC,UAAK,WAAWH,GAAW,MAAK,OAAM,cAAYL,KAASD,GAC1D,UAAA,gBAAAS,EAAC,UAAK,WAAWN,EAAO,qBAAqB,GAC3C,UAAA,gBAAAM,EAACD,KAAU,MAAMD,GAAY,GAC/B,EAAA,CACF;AAEJ;"}

package/dist/components/status-badge/StatusBadge.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./StatusBadge.module.css');const s={"status-badge":"_status-badge_umpvw_2","status-badge__glyph":"_status-badge__glyph_umpvw_13","status-badge--size-xx-small":"_status-badge--size-xx-small_umpvw_19","status-badge--size-x-small":"_status-badge--size-x-small_umpvw_27","status-badge--size-small":"_status-badge--size-small_umpvw_35","status-badge--size-medium":"_status-badge--size-medium_umpvw_43","status-badge--size-large":"_status-badge--size-large_umpvw_51","status-badge--status-online":"_status-badge--status-online_umpvw_60","status-badge--status-away":"_status-badge--status-away_umpvw_64","status-badge--status-do-not-disturb":"_status-badge--status-do-not-disturb_umpvw_68","status-badge--status-offline":"_status-badge--status-offline_umpvw_72"};exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./StatusBadge.css');const s={"status-badge":"_status-badge_1vv61_13","status-badge__glyph":"_status-badge__glyph_1vv61_24","status-badge--size-xx-small":"_status-badge--size-xx-small_1vv61_30","status-badge--size-x-small":"_status-badge--size-x-small_1vv61_38","status-badge--size-small":"_status-badge--size-small_1vv61_46","status-badge--size-medium":"_status-badge--size-medium_1vv61_54","status-badge--size-large":"_status-badge--size-large_1vv61_62","status-badge--size-x-large":"_status-badge--size-x-large_1vv61_70","status-badge--status-online":"_status-badge--status-online_1vv61_80","status-badge--status-away":"_status-badge--status-away_1vv61_84","status-badge--status-do-not-disturb":"_status-badge--status-do-not-disturb_1vv61_88","status-badge--status-offline":"_status-badge--status-offline_1vv61_92"};exports.default=s;
 //# sourceMappingURL=StatusBadge.module.scss.cjs.map

package/dist/components/status-badge/StatusBadge.module.scss.js

@@ -1,15 +1,16 @@
-import './StatusBadge.module.css';const s = {
-  "status-badge": "_status-badge_umpvw_2",
-  "status-badge__glyph": "_status-badge__glyph_umpvw_13",
-  "status-badge--size-xx-small": "_status-badge--size-xx-small_umpvw_19",
-  "status-badge--size-x-small": "_status-badge--size-x-small_umpvw_27",
-  "status-badge--size-small": "_status-badge--size-small_umpvw_35",
-  "status-badge--size-medium": "_status-badge--size-medium_umpvw_43",
-  "status-badge--size-large": "_status-badge--size-large_umpvw_51",
-  "status-badge--status-online": "_status-badge--status-online_umpvw_60",
-  "status-badge--status-away": "_status-badge--status-away_umpvw_64",
-  "status-badge--status-do-not-disturb": "_status-badge--status-do-not-disturb_umpvw_68",
-  "status-badge--status-offline": "_status-badge--status-offline_umpvw_72"
+import './StatusBadge.css';const s = {
+  "status-badge": "_status-badge_1vv61_13",
+  "status-badge__glyph": "_status-badge__glyph_1vv61_24",
+  "status-badge--size-xx-small": "_status-badge--size-xx-small_1vv61_30",
+  "status-badge--size-x-small": "_status-badge--size-x-small_1vv61_38",
+  "status-badge--size-small": "_status-badge--size-small_1vv61_46",
+  "status-badge--size-medium": "_status-badge--size-medium_1vv61_54",
+  "status-badge--size-large": "_status-badge--size-large_1vv61_62",
+  "status-badge--size-x-large": "_status-badge--size-x-large_1vv61_70",
+  "status-badge--status-online": "_status-badge--status-online_1vv61_80",
+  "status-badge--status-away": "_status-badge--status-away_1vv61_84",
+  "status-badge--status-do-not-disturb": "_status-badge--status-do-not-disturb_1vv61_88",
+  "status-badge--status-offline": "_status-badge--status-offline_1vv61_92"
 };
 export {
   s as default

package/dist/components/status-badge/StatusBadge.module.scss.js.map

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

package/dist/components/switch/Switch.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),C=require("react"),N=require("../../hooks/use-controllable.cjs"),g=require("../../utils/string.cjs"),s=require("./Switch.module.scss.cjs");function q({className:c="",size:o="medium",children:l,secondaryLabel:t,semiBold:u=!1,id:r,checked:a,defaultChecked:n,disabled:d,onChange:h,..._}){const m=C.useId(),i=r??m,[f,w]=N.useControllable(a,n,h),b=s.default[`switch--size-${g.toKebab(o)}`],j=u?s.default["switch--semi-bold"]:"",p=t!=null?s.default["switch--with-secondary"]:"",x=[s.default.switch,b,j,p,c].filter(Boolean).join(" ");return e.jsxs("label",{className:x,htmlFor:i,children:[(l!=null||t!=null)&&e.jsxs("span",{className:s.default.switch__labels,children:[l!=null&&e.jsx("span",{className:s.default.switch__label,children:l}),t!=null&&e.jsx("span",{className:s.default["switch__secondary-label"],children:t})]}),e.jsxs("span",{className:s.default.switch__track,"aria-hidden":!0,children:[e.jsx("input",{id:i,type:"checkbox",role:"switch",className:s.default.switch__input,checked:a,defaultChecked:n,disabled:d,"aria-checked":f,onChange:w,..._}),e.jsx("span",{className:s.default.switch__knob})]})]})}exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("react"),S=require("../../hooks/use-controllable.cjs"),q=require("../../utils/string.cjs"),s=require("./Switch.module.scss.cjs"),o=c.forwardRef(function({className:u="",size:r="medium",children:l,secondaryLabel:t,semiBold:d=!1,id:h,checked:a,defaultChecked:i,disabled:w,onChange:_,...f},m){const b=c.useId(),n=h??b,[j,p]=S.useControllable(a,i,_),x=s.default[`switch--size-${q.toKebab(r)}`],C=d?s.default["switch--semi-bold"]:"",N=t!=null?s.default["switch--with-secondary"]:"",g=[s.default.switch,x,C,N,u].filter(Boolean).join(" ");return e.jsxs("label",{className:g,htmlFor:n,children:[(l!=null||t!=null)&&e.jsxs("span",{className:s.default.switch__labels,children:[l!=null&&e.jsx("span",{className:s.default.switch__label,children:l}),t!=null&&e.jsx("span",{className:s.default["switch__secondary-label"],children:t})]}),e.jsxs("span",{className:s.default.switch__track,children:[e.jsx("input",{ref:m,id:n,type:"checkbox",role:"switch",className:s.default.switch__input,checked:a,defaultChecked:i,disabled:w,"aria-checked":j,onChange:p,...f}),e.jsx("span",{className:s.default.switch__knob,"aria-hidden":!0})]})]})});o.displayName="Switch";exports.default=o;
 //# sourceMappingURL=Switch.cjs.map

package/dist/components/switch/Switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.cjs","sources":["../../../src/components/switch/Switch.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 './Switch.module.scss';\n\nexport type SwitchSize = 'small' | 'medium' | 'large';\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (16px), Medium (20px), Large (24px). Default: Medium. */\n  size?: SwitchSize;\n  /** Primary label content. Rendered to the left of the switch. */\n  children?: React.ReactNode;\n  /** Optional secondary label (e.g. description) below the primary label. */\n  secondaryLabel?: React.ReactNode;\n  /** When true, primary label uses semi-bold (600) weight. Default: false. */\n  semiBold?: boolean;\n}\n\n/**\n * A Switch is a real-world toggle: flip it, and the change happens. Use it for binary\n * settings that take effect immediately and don't need a separate \"Save\" step.\n */\nexport default function Switch({\n  className = '',\n  size = 'medium',\n  children,\n  secondaryLabel,\n  semiBold = false,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  ...rest\n}: SwitchProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const sizeClass = styles[`switch--size-${toKebab(size)}`];\n  const semiBoldClass = semiBold ? styles['switch--semi-bold'] : '';\n  const secondaryClass =\n    secondaryLabel != null ? styles['switch--with-secondary'] : '';\n\n  const rootClass = [\n    styles.switch,\n    sizeClass,\n    semiBoldClass,\n    secondaryClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {(children != null || secondaryLabel != null) && (\n        <span className={styles['switch__labels']}>\n          {children != null && (\n            <span className={styles['switch__label']}>{children}</span>\n          )}\n          {secondaryLabel != null && (\n            <span className={styles['switch__secondary-label']}>\n              {secondaryLabel}\n            </span>\n          )}\n        </span>\n      )}\n      <span className={styles['switch__track']} aria-hidden>\n        {/* Native checkbox (visually hidden via CSS); provides semantics, keyboard, and form support */}\n        <input\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles['switch__input']}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          aria-checked={resolvedChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={styles['switch__knob']} />\n      </span>\n    </label>\n  );\n}\n"],"names":["Switch","className","size","children","secondaryLabel","semiBold","idProp","checked","defaultChecked","disabled","onChange","rest","generatedId","useId","id","resolvedChecked","handleChange","useControllable","sizeClass","styles","toKebab","semiBoldClass","secondaryClass","rootClass","jsxs","jsx"],"mappings":"2RA4BA,SAAwBA,EAAO,CAC7B,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,SAAAC,EACA,eAAAC,EACA,SAAAC,EAAW,GACX,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAgB,CACd,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKR,GAAUM,EACf,CAACG,EAAiBC,CAAY,EAAIC,EAAAA,gBACtCV,EACAC,EACAE,CAAA,EAGIQ,EAAYC,EAAAA,QAAO,gBAAgBC,EAAAA,QAAQlB,CAAI,CAAC,EAAE,EAClDmB,EAAgBhB,EAAWc,UAAO,mBAAmB,EAAI,GACzDG,EACJlB,GAAkB,KAAOe,EAAAA,QAAO,wBAAwB,EAAI,GAExDI,EAAY,CAChBJ,EAAAA,QAAO,OACPD,EACAG,EACAC,EACArB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEuB,EAAAA,KAAC,QAAA,CAAM,UAAWD,EAAW,QAAST,EAClC,SAAA,EAAAX,GAAY,MAAQC,GAAkB,OACtCoB,EAAAA,KAAC,QAAK,UAAWL,EAAAA,QAAO,eACrB,SAAA,CAAAhB,GAAY,MACXsB,EAAAA,IAAC,OAAA,CAAK,UAAWN,UAAO,cAAmB,SAAAhB,EAAS,EAErDC,GAAkB,MACjBqB,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,yBAAyB,EAC9C,SAAAf,CAAA,CACH,CAAA,EAEJ,SAED,OAAA,CAAK,UAAWe,EAAAA,QAAO,cAAkB,cAAW,GAEnD,SAAA,CAAAM,EAAAA,IAAC,QAAA,CACC,GAAAX,EACA,KAAK,WACL,KAAK,SACL,UAAWK,EAAAA,QAAO,cAClB,QAAAZ,EACA,eAAAC,EACA,SAAAC,EACA,eAAcM,EACd,SAAUC,EACT,GAAGL,CAAA,CAAA,EAENc,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,YAAc,CAAG,CAAA,CAAA,CAC3C,CAAA,EACF,CAEJ"}
+{"version":3,"file":"Switch.cjs","sources":["../../../src/components/switch/Switch.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 './Switch.module.scss';\n\nexport type SwitchSize = 'small' | 'medium' | 'large';\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (16px), Medium (20px), Large (24px). Default: Medium. */\n  size?: SwitchSize;\n  /** Primary label content. Rendered to the left of the switch. */\n  children?: React.ReactNode;\n  /** Optional secondary label (e.g. description) below the primary label. */\n  secondaryLabel?: React.ReactNode;\n  /** When true, primary label uses semi-bold (600) weight. Default: false. */\n  semiBold?: boolean;\n}\n\n/**\n * A Switch is a real-world toggle: flip it, and the change happens. Use it for binary\n * settings that take effect immediately and don't need a separate \"Save\" step.\n */\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    className = '',\n    size = 'medium',\n    children,\n    secondaryLabel,\n    semiBold = false,\n    id: idProp,\n    checked,\n    defaultChecked,\n    disabled,\n    onChange,\n    ...rest\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const sizeClass = styles[`switch--size-${toKebab(size)}`];\n  const semiBoldClass = semiBold ? styles['switch--semi-bold'] : '';\n  const secondaryClass =\n    secondaryLabel != null ? styles['switch--with-secondary'] : '';\n\n  const rootClass = [\n    styles.switch,\n    sizeClass,\n    semiBoldClass,\n    secondaryClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {(children != null || secondaryLabel != null) && (\n        <span className={styles['switch__labels']}>\n          {children != null && (\n            <span className={styles['switch__label']}>{children}</span>\n          )}\n          {secondaryLabel != null && (\n            <span className={styles['switch__secondary-label']}>\n              {secondaryLabel}\n            </span>\n          )}\n        </span>\n      )}\n      <span className={styles['switch__track']}>\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles['switch__input']}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          aria-checked={resolvedChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={styles['switch__knob']} aria-hidden />\n      </span>\n    </label>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","className","size","children","secondaryLabel","semiBold","idProp","checked","defaultChecked","disabled","onChange","rest","ref","generatedId","useId","id","resolvedChecked","handleChange","useControllable","sizeClass","styles","toKebab","semiBoldClass","secondaryClass","rootClass","jsxs","jsx"],"mappings":"2RA4BMA,EAASC,EAAAA,WAA0C,SACvD,CACE,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,SAAAC,EACA,eAAAC,EACA,SAAAC,EAAW,GACX,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKT,GAAUO,EACf,CAACG,EAAiBC,CAAY,EAAIC,EAAAA,gBACtCX,EACAC,EACAE,CAAA,EAGIS,EAAYC,EAAAA,QAAO,gBAAgBC,EAAAA,QAAQnB,CAAI,CAAC,EAAE,EAClDoB,EAAgBjB,EAAWe,UAAO,mBAAmB,EAAI,GACzDG,EACJnB,GAAkB,KAAOgB,EAAAA,QAAO,wBAAwB,EAAI,GAExDI,EAAY,CAChBJ,EAAAA,QAAO,OACPD,EACAG,EACAC,EACAtB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEwB,EAAAA,KAAC,QAAA,CAAM,UAAWD,EAAW,QAAST,EAClC,SAAA,EAAAZ,GAAY,MAAQC,GAAkB,OACtCqB,EAAAA,KAAC,QAAK,UAAWL,EAAAA,QAAO,eACrB,SAAA,CAAAjB,GAAY,MACXuB,EAAAA,IAAC,OAAA,CAAK,UAAWN,UAAO,cAAmB,SAAAjB,EAAS,EAErDC,GAAkB,MACjBsB,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,yBAAyB,EAC9C,SAAAhB,CAAA,CACH,CAAA,EAEJ,EAEFqB,EAAAA,KAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,cACtB,SAAA,CAAAM,EAAAA,IAAC,QAAA,CACC,IAAAd,EACA,GAAAG,EACA,KAAK,WACL,KAAK,SACL,UAAWK,EAAAA,QAAO,cAClB,QAAAb,EACA,eAAAC,EACA,SAAAC,EACA,eAAcO,EACd,SAAUC,EACT,GAAGN,CAAA,CAAA,QAEL,OAAA,CAAK,UAAWS,EAAAA,QAAO,aAAiB,cAAW,EAAA,CAAC,CAAA,CAAA,CACvD,CAAA,EACF,CAEJ,CAAC,EAEDrB,EAAO,YAAc"}

package/dist/components/switch/Switch.css

@@ -0,0 +1 @@
+._switch_fs0k8_13{display:flex;align-items:flex-start;width:100%;gap:var(--spacing-m);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}._switch_fs0k8_13._switch_fs0k8_13{margin:0}._switch_fs0k8_13:has(._switch__input_fs0k8_27:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._switch_fs0k8_13:has(._switch__input_fs0k8_27:disabled) ._switch__secondary-label_fs0k8_31{color:rgba(var(--center-channel-color-rgb),.56)}._switch__input_fs0k8_27{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;opacity:0;width:100%;height:100%;border:0;cursor:inherit}._switch__input_fs0k8_27:focus-visible{outline:none}._switch__labels_fs0k8_48{display:flex;flex-direction:column;flex:1 1 0;justify-content:center;min-width:0}._switch__label_fs0k8_48{line-height:1}._switch__secondary-label_fs0k8_31{color:rgba(var(--center-channel-color-rgb),.72);margin-top:var(--spacing-xxxxs)}._switch__track_fs0k8_62{position:relative;flex-shrink:0;display:block;box-sizing:border-box;background-color:rgba(var(--center-channel-color-rgb),.32);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._switch__track_fs0k8_62:has(._switch__input_fs0k8_27:focus-visible){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch_fs0k8_13:has(._switch__input_fs0k8_27:not(:disabled)):hover ._switch__track_fs0k8_62{background-color:rgba(var(--center-channel-color-rgb),.4)}._switch__track_fs0k8_62:has(._switch__input_fs0k8_27:checked){background-color:var(--button-bg)}._switch_fs0k8_13:has(._switch__input_fs0k8_27:not(:disabled)):hover ._switch__track_fs0k8_62:has(._switch__input_fs0k8_27:checked){background-color:var(--button-bg)}._switch__track_fs0k8_62:has(._switch__input_fs0k8_27:focus-visible:checked){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch__track_fs0k8_62:has(._switch__input_fs0k8_27:disabled){opacity:.32}._switch__track_fs0k8_62:has(._switch__input_fs0k8_27:disabled:checked){background-color:rgba(var(--center-channel-color-rgb),.32)}._switch__knob_fs0k8_92{position:absolute;left:2px;top:50%;transform:translateY(-50%) translate(0);border-radius:var(--radius-pill);background-color:var(--button-color);box-shadow:var(--elevation-1);transition:transform var(--duration-quick) var(--ease-transition);pointer-events:none}._switch--size-small_fs0k8_103 ._switch__track_fs0k8_62{width:26px;height:16px}._switch--size-small_fs0k8_103 ._switch__track_fs0k8_62:has(._switch__input_fs0k8_27:checked) ._switch__knob_fs0k8_92{transform:translateY(-50%) translate(10px)}._switch--size-small_fs0k8_103 ._switch__knob_fs0k8_92{width:12px;height:12px}._switch--size-small_fs0k8_103 ._switch__label_fs0k8_48,._switch--size-small_fs0k8_103 ._switch__secondary-label_fs0k8_31{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-medium_fs0k8_122 ._switch__track_fs0k8_62{width:32px;height:20px}._switch--size-medium_fs0k8_122 ._switch__track_fs0k8_62:has(._switch__input_fs0k8_27:checked) ._switch__knob_fs0k8_92{transform:translateY(-50%) translate(12px)}._switch--size-medium_fs0k8_122 ._switch__knob_fs0k8_92{width:16px;height:16px}._switch--size-medium_fs0k8_122 ._switch__label_fs0k8_48{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--size-medium_fs0k8_122 ._switch__secondary-label_fs0k8_31{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-large_fs0k8_141 ._switch__track_fs0k8_62{width:40px;height:24px}._switch--size-large_fs0k8_141 ._switch__track_fs0k8_62:has(._switch__input_fs0k8_27:checked) ._switch__knob_fs0k8_92{transform:translateY(-50%) translate(16px)}._switch--size-large_fs0k8_141 ._switch__knob_fs0k8_92{width:20px;height:20px}._switch--size-large_fs0k8_141 ._switch__label_fs0k8_48{font-size:var(--font-size-200);line-height:var(--line-height-200)}._switch--size-large_fs0k8_141 ._switch__secondary-label_fs0k8_31{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--semi-bold_fs0k8_160 ._switch__label_fs0k8_48{font-weight:var(--font-weight-semibold)}._switch--with-secondary_fs0k8_163{align-items:center}._switch--with-secondary_fs0k8_163 ._switch__labels_fs0k8_48{padding-top:0;padding-bottom:0}

package/dist/components/switch/Switch.d.ts

@@ -16,5 +16,6 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * A Switch is a real-world toggle: flip it, and the change happens. Use it for binary
  * settings that take effect immediately and don't need a separate "Save" step.
  */
-export default function Switch({ className, size, children, secondaryLabel, semiBold, id: idProp, checked, defaultChecked, disabled, onChange, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Switch;
 //# sourceMappingURL=Switch.d.ts.map

package/dist/components/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,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,UAAU,CAAC;IAClB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2EAA2E;IAC3E,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,SAAc,EACd,IAAe,EACf,QAAQ,EACR,cAAc,EACd,QAAgB,EAChB,EAAE,EAAE,MAAM,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,2CAwDb"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,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,UAAU,CAAC;IAClB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2EAA2E;IAC3E,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,QAAA,MAAM,MAAM,0GAuEV,CAAC;AAIH,eAAe,MAAM,CAAC"}