@mattermost/compass-ui 0.1.0-alpha.4 → 0.1.0-alpha.5

package/dist/components/radio/Radio.js

@@ -4,10 +4,10 @@ import { useControllable as v } from "../../hooks/use-controllable.js";
 import { toKebab as x } from "../../utils/string.js";
 import a from "./Radio.module.scss.js";
 function K({
-  className: t = "",
-  size: l = "medium",
-  valid: i = !0,
-  children: s,
+  className: n = "",
+  size: t = "medium",
+  invalid: s = !1,
+  children: i,
   id: d,
   checked: r,
   defaultChecked: e,
@@ -15,14 +15,14 @@ function K({
   onChange: c,
   name: p,
   value: u,
-  ..._
+  ...f
 }) {
-  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: [
+  const _ = j(), l = d ?? _, [, b] = v(r, e, c), C = a[`radio--size-${x(t)}`], N = s ? a["radio--invalid"] : "", h = [a.radio, C, N, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ g("label", { className: h, htmlFor: l, children: [
     /* @__PURE__ */ o(
       "input",
       {
-        id: n,
+        id: l,
         type: "radio",
         name: p,
         value: u,
@@ -30,13 +30,13 @@ function K({
         checked: r,
         defaultChecked: e,
         disabled: m,
-        "aria-invalid": i ? void 0 : !0,
+        "aria-invalid": s ? !0 : void 0,
         onChange: b,
-        ..._
+        ...f
       }
     ),
     /* @__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 })
   ] });
 }
 export {

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 { 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 */\nexport default function Radio({\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}: 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 = 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        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"],"names":["Radio","className","size","invalid","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,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,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,IAAUgB,EAAO,gBAAgB,IAAI,IAEpDG,IAAY,CAACH,EAAO,OAAOD,GAAWG,GAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAsB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAASP,GAEpC,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,IAAU,KAAO;AAAA,QAC/B,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;"}

package/dist/components/radio/Radio.module.css

@@ -1 +1 @@
-._radio_1e67f_2{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_1e67f_2:has(._radio__input_1e67f_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_1e67f_13{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_1e67f_13:focus-visible{outline:none}._radio__circle_1e67f_33{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-full);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_1e67f_13:focus-visible~._radio__circle_1e67f_33{box-shadow:0 0 0 4px rgba(var(--button-bg-rgb),.56)}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover ._radio__circle_1e67f_33{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_1e67f_13:disabled~._radio__circle_1e67f_33{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_1e67f_13:checked~._radio__circle_1e67f_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_1e67f_13:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{background-color:var(--button-bg)}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33{border-color:var(--button-bg)}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{background-color:var(--button-bg)}._radio__input_1e67f_13:focus-visible:checked~._radio__circle_1e67f_33{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_1e67f_13:disabled:checked~._radio__circle_1e67f_33{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_1e67f_13:disabled:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_1e67f_80 ._radio__circle_1e67f_33{border-color:var(--error-text, var(--color-danger))}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover._radio--invalid_1e67f_80 ._radio__input_1e67f_13:not(:checked)~._radio__circle_1e67f_33{border-color:var(--error-text, var(--color-danger))}._radio--invalid_1e67f_80 ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_1e67f_80 ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{background-color:var(--error-text, var(--color-danger))}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover._radio--invalid_1e67f_80 ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33{border-color:var(--error-text, var(--color-danger))}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover._radio--invalid_1e67f_80 ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{background-color:var(--error-text, var(--color-danger))}._radio--invalid_1e67f_80 ._radio__input_1e67f_13:focus-visible~._radio__circle_1e67f_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_1e67f_80 ._radio__input_1e67f_13:focus-visible:checked~._radio__circle_1e67f_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_1e67f_59{display:block;border-radius:var(--radius-full);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_1e67f_13:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{transform:scale(1)}._radio__label_1e67f_116{line-height:1}._radio--size-small_1e67f_119{gap:var(--spacing-xs)}._radio--size-small_1e67f_119 ._radio__input_1e67f_13,._radio--size-small_1e67f_119 ._radio__circle_1e67f_33{width:12px;height:12px}._radio--size-small_1e67f_119 ._radio__dot_1e67f_59{width:6px;height:6px}._radio--size-small_1e67f_119 ._radio__label_1e67f_116{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_1e67f_138{gap:var(--spacing-xs)}._radio--size-medium_1e67f_138 ._radio__input_1e67f_13,._radio--size-medium_1e67f_138 ._radio__circle_1e67f_33{width:16px;height:16px}._radio--size-medium_1e67f_138 ._radio__dot_1e67f_59{width:8px;height:8px}._radio--size-medium_1e67f_138 ._radio__label_1e67f_116{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_1e67f_157{gap:var(--spacing-s)}._radio--size-large_1e67f_157 ._radio__input_1e67f_13,._radio--size-large_1e67f_157 ._radio__circle_1e67f_33{width:20px;height:20px}._radio--size-large_1e67f_157 ._radio__dot_1e67f_59{width:10px;height:10px}._radio--size-large_1e67f_157 ._radio__label_1e67f_116{font-size:var(--font-size-200);line-height:var(--line-height-200)}
+._radio_difs7_2{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_difs7_2:has(._radio__input_difs7_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_difs7_13{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_difs7_13:focus-visible{outline:none}._radio__circle_difs7_33{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-full);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_difs7_13:focus-visible~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__circle_difs7_33{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_difs7_13:disabled~._radio__circle_difs7_33{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_difs7_13:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--button-bg)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__input_difs7_13:checked~._radio__circle_difs7_33{border-color:var(--button-bg)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--button-bg)}._radio__input_difs7_13:focus-visible:checked~._radio__circle_difs7_33{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_difs7_13:disabled:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_difs7_13:disabled:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_difs7_80 ._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:not(:checked)~._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:focus-visible~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_difs7_80 ._radio__input_difs7_13:focus-visible:checked~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_difs7_59{display:block;border-radius:var(--radius-full);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{transform:scale(1)}._radio__label_difs7_116{line-height:1}._radio--size-small_difs7_119{gap:var(--spacing-xs)}._radio--size-small_difs7_119 ._radio__input_difs7_13,._radio--size-small_difs7_119 ._radio__circle_difs7_33{width:12px;height:12px}._radio--size-small_difs7_119 ._radio__dot_difs7_59{width:6px;height:6px}._radio--size-small_difs7_119 ._radio__label_difs7_116{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_difs7_138{gap:var(--spacing-xs)}._radio--size-medium_difs7_138 ._radio__input_difs7_13,._radio--size-medium_difs7_138 ._radio__circle_difs7_33{width:16px;height:16px}._radio--size-medium_difs7_138 ._radio__dot_difs7_59{width:8px;height:8px}._radio--size-medium_difs7_138 ._radio__label_difs7_116{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_difs7_157{gap:var(--spacing-s)}._radio--size-large_difs7_157 ._radio__input_difs7_13,._radio--size-large_difs7_157 ._radio__circle_difs7_33{width:20px;height:20px}._radio--size-large_difs7_157 ._radio__dot_difs7_59{width:10px;height:10px}._radio--size-large_difs7_157 ._radio__label_difs7_116{font-size:var(--font-size-200);line-height:var(--line-height-200)}

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.module.css');const i="_radio_difs7_2",_="_radio__input_difs7_13",d="_radio__circle_difs7_33",o="_radio__dot_difs7_59",a="_radio__label_difs7_116",r={radio:i,radio__input:_,radio__circle:d,radio__dot:o,"radio--invalid":"_radio--invalid_difs7_80",radio__label:a,"radio--size-small":"_radio--size-small_difs7_119","radio--size-medium":"_radio--size-medium_difs7_138","radio--size-large":"_radio--size-large_difs7_157"};exports.default=r;exports.radio=i;exports.radio__circle=d;exports.radio__dot=o;exports.radio__input=_;exports.radio__label=a;
 //# sourceMappingURL=Radio.module.scss.cjs.map

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

@@ -1,20 +1,20 @@
-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.module.css';const _ = "_radio_difs7_2", i = "_radio__input_difs7_13", d = "_radio__circle_difs7_33", a = "_radio__dot_difs7_59", o = "_radio__label_difs7_116", r = {
   radio: _,
   radio__input: i,
-  radio__circle: a,
-  radio__dot: o,
-  "radio--invalid": "_radio--invalid_1e67f_80",
-  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__circle: d,
+  radio__dot: a,
+  "radio--invalid": "_radio--invalid_difs7_80",
+  radio__label: o,
+  "radio--size-small": "_radio--size-small_difs7_119",
+  "radio--size-medium": "_radio--size-medium_difs7_138",
+  "radio--size-large": "_radio--size-large_difs7_157"
 };
 export {
   r as default,
   _ as radio,
-  a as radio__circle,
-  o as radio__dot,
+  d as radio__circle,
+  a as radio__dot,
   i as radio__input,
-  d as radio__label
+  o as radio__label
 };
 //# sourceMappingURL=Radio.module.scss.js.map

package/dist/components/search-input/SearchInput.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),$=require("../../utils/string.cjs"),g=require("../icon/Icon.cjs"),__B=require("@mattermost/compass-icons/components/magnify.js"),B=__B?.default??__B,__D=require("@mattermost/compass-icons/components/close-circle.js"),D=__D?.default??__D,s=require("./SearchInput.module.scss.cjs"),G={small:"12",medium:"16",large:"20"},H=a.forwardRef(function({className:q="",size:p="medium",label:o,onClear:d,id:y,value:f,defaultValue:I,placeholder:C,onFocus:n,onBlur:r,onChange:l,disabled:i,...k},u){const R=a.useId(),_=y??R,h=a.useRef(null),c=f!==void 0,[z,m]=a.useState(I??""),j=c?f:z,x=j!=null&&j!=="",[M,b]=a.useState(!1),w=M||x,T=a.useCallback(e=>{b(!0),n==null||n(e)},[n]),V=a.useCallback(e=>{b(!1),r==null||r(e)},[r]),F=a.useCallback(e=>{c||m(e.target.value),l==null||l(e)},[c,l]),O=a.useCallback(e=>{h.current=e,typeof u=="function"?u(e):u&&(u.current=e)},[u]),A=a.useCallback(()=>{var S;if(i)return;if(d){d(),(S=h.current)==null||S.focus();return}const e=h.current;e!=null&&(e.value="",c||m(""),l==null||l({target:e,currentTarget:e}),e.focus())},[i,c,l,d]),v=x&&!i,E=s.default[`searchInput--size-${$.toKebab(p)}`],K=o!=null&&w?s.default["searchInput--label-floated"]:"",L=s.default["searchInput--has-leading-icon"],U=v?s.default["searchInput--has-trailing-icon"]:"",N=G[p],Z=[s.default.searchInput,E,K,L,U,q].filter(Boolean).join(" ");return t.jsx("div",{className:Z,children:t.jsxs("div",{className:s.default.searchInput__wrapper,children:[o!=null&&t.jsx("label",{className:s.default.searchInput__label,htmlFor:_,children:o}),t.jsxs("div",{className:s.default.searchInput__inner,children:[t.jsx("span",{className:s.default.searchInput__leadingIcon,"aria-hidden":!0,children:t.jsx(g.default,{size:N,glyph:t.jsx(B,{})})}),t.jsx("input",{ref:O,id:_,type:"search",className:s.default.searchInput__input,value:c?f:void 0,defaultValue:c?void 0:I,placeholder:C,disabled:i,onFocus:T,onBlur:V,onChange:F,...k}),v&&t.jsx("span",{className:s.default.searchInput__trailingIcon,children:t.jsx("button",{type:"button",className:s.default.searchInput__clearButton,onClick:A,"aria-label":"Clear search",tabIndex:-1,children:t.jsx(g.default,{size:N,glyph:t.jsx(D,{})})})})]})]})})});exports.default=H;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),a=require("react"),W=require("../../utils/string.cjs"),k=require("../icon/Icon.cjs"),__X=require("@mattermost/compass-icons/components/magnify.js"),X=__X?.default??__X,__Y=require("@mattermost/compass-icons/components/close-circle.js"),Y=__Y?.default??__Y,t=require("./SearchInput.module.scss.cjs"),B={small:"12",medium:"16",large:"20"},D={small:"12",medium:"16",large:"16"},K=a.forwardRef(function({className:q="",size:f="medium",label:h,invalid:I=!1,onClear:p,id:R,value:_,defaultValue:j,placeholder:y,onFocus:i,onBlur:r,onChange:l,disabled:u,onKeyDown:d,...M},n){const z=a.useId(),x=R??z,m=a.useRef(null),c=_!==void 0,[E,b]=a.useState(j??""),C=c?_:E,o=C!=null&&C!=="",[A,S]=a.useState(!1),O=A||o,T=a.useCallback(e=>{S(!0),i==null||i(e)},[i]),V=a.useCallback(e=>{S(!1),r==null||r(e)},[r]),F=a.useCallback(e=>{c||b(e.target.value),l==null||l(e)},[c,l]),L=a.useCallback(e=>{m.current=e,typeof n=="function"?n(e):n&&(n.current=e)},[n]),v=a.useCallback(()=>{var g;if(u)return;if(p){p(),(g=m.current)==null||g.focus();return}const e=m.current;e!=null&&(e.value="",c||b(""),l==null||l({target:e,currentTarget:e}),e.focus())},[u,c,l,p]),P=a.useCallback(e=>{d==null||d(e),!(e.defaultPrevented||u)&&e.key==="Escape"&&o&&(e.preventDefault(),v())},[u,v,o,d]),N=o&&!u,Z=t.default[`search-input--size-${W.toKebab(f)}`],U=I?t.default["search-input--invalid"]:"",$=h!=null&&O?t.default["search-input--label-floated"]:"",w=t.default["search-input--has-leading-icon"],G=N?t.default["search-input--has-trailing-icon"]:"",H=B[f],J=D[f],Q=[t.default["search-input"],Z,U,$,w,G,q].filter(Boolean).join(" ");return s.jsx("div",{className:Q,children:s.jsxs("div",{className:t.default["search-input__wrapper"],children:[h!=null&&s.jsx("label",{className:t.default["search-input__label"],htmlFor:x,children:h}),s.jsxs("div",{className:t.default["search-input__inner"],children:[s.jsx("span",{className:t.default["search-input__leading-icon"],"aria-hidden":!0,children:s.jsx(k.default,{size:H,glyph:s.jsx(X,{})})}),s.jsx("input",{ref:L,id:x,type:"search",className:t.default["search-input__input"],value:c?_:void 0,defaultValue:c?void 0:j,placeholder:y,disabled:u,onFocus:T,onBlur:V,onChange:F,onKeyDown:P,"aria-invalid":I?!0:void 0,...M}),N&&s.jsx("span",{className:t.default["search-input__trailing-icon"],children:s.jsx("button",{type:"button",className:t.default["search-input__clear-button"],onClick:v,"aria-label":"Clear search",tabIndex:-1,children:s.jsx(k.default,{size:J,glyph:s.jsx(Y,{})})})})]})]})})});exports.default=K;
 //# sourceMappingURL=SearchInput.cjs.map

package/dist/components/search-input/SearchInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.cjs","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport {\n  forwardRef,\n  useId,\n  useState,\n  useCallback,\n  useRef,\n} from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      onClear,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const handleClear = useCallback(() => {\n      if (disabled) return;\n\n      if (onClear) {\n        onClear();\n        inputRef.current?.focus();\n        return;\n      }\n\n      const input = inputRef.current;\n      if (input == null) return;\n\n      input.value = '';\n      if (!isControlled) setUncontrolledValue('');\n\n      onChange?.({\n        target: input,\n        currentTarget: input,\n      } as ChangeEvent<HTMLInputElement>);\n\n      input.focus();\n    }, [disabled, isControlled, onChange, onClear]);\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`searchInput--size-${toKebab(size)}`];\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['searchInput--label-floated'] : '';\n    const hasLeadingClass = styles['searchInput--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['searchInput--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles.searchInput,\n      sizeClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={rootClass}>\n        <div className={styles.searchInput__wrapper}>\n          {label != null && (\n            <label className={styles.searchInput__label} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles.searchInput__inner}>\n            <span className={styles.searchInput__leadingIcon} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles.searchInput__input}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles.searchInput__trailingIcon}>\n                <button\n                  type=\"button\"\n                  className={styles.searchInput__clearButton}\n                  onClick={handleClear}\n                  aria-label=\"Clear search\"\n                  tabIndex={-1}\n                >\n                  <Icon size={iconSize} glyph={<CloseCircleIcon />} />\n                </button>\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","showClearButton","sizeClass","styles","toKebab","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}
+{"version":3,"file":"SearchInput.cjs","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n} from 'react';\nimport {\n  forwardRef,\n  useId,\n  useState,\n  useCallback,\n  useRef,\n} from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nconst CLEAR_ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      onClear,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      onKeyDown,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const handleClear = useCallback(() => {\n      if (disabled) return;\n\n      if (onClear) {\n        onClear();\n        inputRef.current?.focus();\n        return;\n      }\n\n      const input = inputRef.current;\n      if (input == null) return;\n\n      input.value = '';\n      if (!isControlled) setUncontrolledValue('');\n\n      onChange?.({\n        target: input,\n        currentTarget: input,\n      } as ChangeEvent<HTMLInputElement>);\n\n      input.focus();\n    }, [disabled, isControlled, onChange, onClear]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(e);\n        if (e.defaultPrevented || disabled) return;\n        if (e.key === 'Escape' && hasValue) {\n          e.preventDefault();\n          handleClear();\n        }\n      },\n      [disabled, handleClear, hasValue, onKeyDown],\n    );\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['search-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['search-input--label-floated'] : '';\n    const hasLeadingClass = styles['search-input--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['search-input--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n    const clearIconSize = CLEAR_ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['search-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['search-input__wrapper']}>\n          {label != null && (\n            <label className={styles['search-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['search-input__inner']}>\n            <span className={styles['search-input__leading-icon']} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles['search-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              aria-invalid={invalid ? true : undefined}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles['search-input__trailing-icon']}>\n                <button\n                  type=\"button\"\n                  className={styles['search-input__clear-button']}\n                  onClick={handleClear}\n                  aria-label=\"Clear search\"\n                  tabIndex={-1}\n                >\n                  <Icon size={clearIconSize} glyph={<CloseCircleIcon />} />\n                </button>\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","CLEAR_ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","onKeyDown","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","handleKeyDown","showClearButton","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","clearIconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/search-input/SearchInput.d.ts

@@ -3,6 +3,8 @@ export type SearchInputSize = 'small' | 'medium' | 'large';
 export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     /** Optional CSS class name. */
     className?: string;
+    /** When true, shows invalid/error styling. */
+    invalid?: boolean;
     /** Floating label (placeholder-style). Floats above border when filled. */
     label?: ReactNode;
     /** Size variant. Default: Medium. */

package/dist/components/search-input/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAezE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAQ3D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,+GA4JhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AAef,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAc3D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,+GA+KhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/search-input/SearchInput.js

@@ -1,102 +1,116 @@
 import { jsx as s, jsxs as x } from "react/jsx-runtime";
-import { forwardRef as D, useId as G, useRef as H, useState as z, useCallback as n } from "react";
-import { toKebab as J } from "../../utils/string.js";
-import R from "../icon/Icon.js";
-import __Q from "@mattermost/compass-icons/components/magnify.js";const Q=__Q&&__Q.default?__Q.default:__Q;
-import __W from "@mattermost/compass-icons/components/close-circle.js";const W=__W&&__W.default?__W.default:__W;
+import { forwardRef as Y, useId as B, useRef as D, useState as z, useCallback as i } from "react";
+import { toKebab as K } from "../../utils/string.js";
+import E from "../icon/Icon.js";
+import __tt from "@mattermost/compass-icons/components/magnify.js";const tt=__tt&&__tt.default?__tt.default:__tt;
+import __et from "@mattermost/compass-icons/components/close-circle.js";const et=__et&&__et.default?__et.default:__et;
 import e from "./SearchInput.module.scss.js";
-const X = {
+const st = {
   small: "12",
   medium: "16",
   large: "20"
-}, nt = D(
+}, at = {
+  small: "12",
+  medium: "16",
+  large: "16"
+}, dt = Y(
   function({
     className: j = "",
-    size: m = "medium",
-    label: u,
-    onClear: p,
-    id: w,
-    value: d,
-    defaultValue: f,
-    placeholder: C,
-    onFocus: r,
-    onBlur: i,
+    size: d = "medium",
+    label: f,
+    invalid: v = !1,
+    onClear: m,
+    id: k,
+    value: h,
+    defaultValue: N,
+    placeholder: A,
+    onFocus: n,
+    onBlur: u,
     onChange: a,
-    disabled: o,
-    ...V
-  }, l) {
-    const k = G(), I = w ?? k, h = H(null), c = d !== void 0, [F, _] = z(
-      f ?? ""
-    ), v = c ? d : F, N = v != null && v !== "", [M, b] = z(!1), T = M || N, A = n(
+    disabled: l,
+    onKeyDown: o,
+    ...M
+  }, r) {
+    const V = B(), S = k ?? V, _ = D(null), c = h !== void 0, [F, b] = z(
+      N ?? ""
+    ), g = c ? h : F, p = g != null && g !== "", [L, C] = z(!1), O = L || p, T = i(
       (t) => {
-        b(!0), r == null || r(t);
+        C(!0), n == null || n(t);
       },
-      [r]
-    ), E = n(
+      [n]
+    ), Z = i(
       (t) => {
-        b(!1), i == null || i(t);
+        C(!1), u == null || u(t);
       },
-      [i]
-    ), K = n(
+      [u]
+    ), P = i(
       (t) => {
-        c || _(t.target.value), a == null || a(t);
+        c || b(t.target.value), a == null || a(t);
       },
       [c, a]
-    ), L = n(
+    ), U = i(
       (t) => {
-        h.current = t, typeof l == "function" ? l(t) : l && (l.current = t);
+        _.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
       },
-      [l]
-    ), O = n(() => {
-      var S;
-      if (o) return;
-      if (p) {
-        p(), (S = h.current) == null || S.focus();
+      [r]
+    ), I = i(() => {
+      var R;
+      if (l) return;
+      if (m) {
+        m(), (R = _.current) == null || R.focus();
         return;
       }
-      const t = h.current;
-      t != null && (t.value = "", c || _(""), a == null || a({
+      const t = _.current;
+      t != null && (t.value = "", c || b(""), a == null || a({
         target: t,
         currentTarget: t
       }), t.focus());
-    }, [o, c, a, p]), y = N && !o, U = e[`searchInput--size-${J(m)}`], Z = u != null && T ? e["searchInput--label-floated"] : "", $ = e["searchInput--has-leading-icon"], q = y ? e["searchInput--has-trailing-icon"] : "", g = X[m], B = [
-      e.searchInput,
-      U,
-      Z,
-      $,
+    }, [l, c, a, m]), $ = i(
+      (t) => {
+        o == null || o(t), !(t.defaultPrevented || l) && t.key === "Escape" && p && (t.preventDefault(), I());
+      },
+      [l, I, p, o]
+    ), y = p && !l, q = e[`search-input--size-${K(d)}`], w = v ? e["search-input--invalid"] : "", G = f != null && O ? e["search-input--label-floated"] : "", H = e["search-input--has-leading-icon"], J = y ? e["search-input--has-trailing-icon"] : "", Q = st[d], W = at[d], X = [
+      e["search-input"],
       q,
+      w,
+      G,
+      H,
+      J,
       j
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("div", { className: B, children: /* @__PURE__ */ x("div", { className: e.searchInput__wrapper, children: [
-      u != null && /* @__PURE__ */ s("label", { className: e.searchInput__label, htmlFor: I, children: u }),
-      /* @__PURE__ */ x("div", { className: e.searchInput__inner, children: [
-        /* @__PURE__ */ s("span", { className: e.searchInput__leadingIcon, "aria-hidden": !0, children: /* @__PURE__ */ s(R, { size: g, glyph: /* @__PURE__ */ s(Q, {}) }) }),
+    return /* @__PURE__ */ s("div", { className: X, children: /* @__PURE__ */ x("div", { className: e["search-input__wrapper"], children: [
+      f != null && /* @__PURE__ */ s("label", { className: e["search-input__label"], htmlFor: S, children: f }),
+      /* @__PURE__ */ x("div", { className: e["search-input__inner"], children: [
+        /* @__PURE__ */ s("span", { className: e["search-input__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ s(E, { size: Q, glyph: /* @__PURE__ */ s(tt, {}) }) }),
         /* @__PURE__ */ s(
           "input",
           {
-            ref: L,
-            id: I,
+            ref: U,
+            id: S,
             type: "search",
-            className: e.searchInput__input,
-            value: c ? d : void 0,
-            defaultValue: c ? void 0 : f,
-            placeholder: C,
-            disabled: o,
-            onFocus: A,
-            onBlur: E,
-            onChange: K,
-            ...V
+            className: e["search-input__input"],
+            value: c ? h : void 0,
+            defaultValue: c ? void 0 : N,
+            placeholder: A,
+            disabled: l,
+            onFocus: T,
+            onBlur: Z,
+            onChange: P,
+            onKeyDown: $,
+            "aria-invalid": v ? !0 : void 0,
+            ...M
           }
         ),
-        y && /* @__PURE__ */ s("span", { className: e.searchInput__trailingIcon, children: /* @__PURE__ */ s(
+        y && /* @__PURE__ */ s("span", { className: e["search-input__trailing-icon"], children: /* @__PURE__ */ s(
           "button",
           {
             type: "button",
-            className: e.searchInput__clearButton,
-            onClick: O,
+            className: e["search-input__clear-button"],
+            onClick: I,
             "aria-label": "Clear search",
             tabIndex: -1,
-            children: /* @__PURE__ */ s(R, { size: g, glyph: /* @__PURE__ */ s(W, {}) })
+            children: /* @__PURE__ */ s(E, { size: W, glyph: /* @__PURE__ */ s(et, {}) })
           }
         ) })
       ] })
@@ -104,6 +118,6 @@ const X = {
   }
 );
 export {
-  nt as default
+  dt as default
 };
 //# sourceMappingURL=SearchInput.js.map

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport {\n  forwardRef,\n  useId,\n  useState,\n  useCallback,\n  useRef,\n} from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      onClear,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const handleClear = useCallback(() => {\n      if (disabled) return;\n\n      if (onClear) {\n        onClear();\n        inputRef.current?.focus();\n        return;\n      }\n\n      const input = inputRef.current;\n      if (input == null) return;\n\n      input.value = '';\n      if (!isControlled) setUncontrolledValue('');\n\n      onChange?.({\n        target: input,\n        currentTarget: input,\n      } as ChangeEvent<HTMLInputElement>);\n\n      input.focus();\n    }, [disabled, isControlled, onChange, onClear]);\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`searchInput--size-${toKebab(size)}`];\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['searchInput--label-floated'] : '';\n    const hasLeadingClass = styles['searchInput--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['searchInput--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles.searchInput,\n      sizeClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={rootClass}>\n        <div className={styles.searchInput__wrapper}>\n          {label != null && (\n            <label className={styles.searchInput__label} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles.searchInput__inner}>\n            <span className={styles.searchInput__leadingIcon} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles.searchInput__input}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles.searchInput__trailingIcon}>\n                <button\n                  type=\"button\"\n                  className={styles.searchInput__clearButton}\n                  onClick={handleClear}\n                  aria-label=\"Clear search\"\n                  tabIndex={-1}\n                >\n                  <Icon size={iconSize} glyph={<CloseCircleIcon />} />\n                </button>\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","showClearButton","sizeClass","styles","toKebab","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n} from 'react';\nimport {\n  forwardRef,\n  useId,\n  useState,\n  useCallback,\n  useRef,\n} from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nconst CLEAR_ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      onClear,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      onKeyDown,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const handleClear = useCallback(() => {\n      if (disabled) return;\n\n      if (onClear) {\n        onClear();\n        inputRef.current?.focus();\n        return;\n      }\n\n      const input = inputRef.current;\n      if (input == null) return;\n\n      input.value = '';\n      if (!isControlled) setUncontrolledValue('');\n\n      onChange?.({\n        target: input,\n        currentTarget: input,\n      } as ChangeEvent<HTMLInputElement>);\n\n      input.focus();\n    }, [disabled, isControlled, onChange, onClear]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(e);\n        if (e.defaultPrevented || disabled) return;\n        if (e.key === 'Escape' && hasValue) {\n          e.preventDefault();\n          handleClear();\n        }\n      },\n      [disabled, handleClear, hasValue, onKeyDown],\n    );\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['search-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['search-input--label-floated'] : '';\n    const hasLeadingClass = styles['search-input--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['search-input--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n    const clearIconSize = CLEAR_ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['search-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['search-input__wrapper']}>\n          {label != null && (\n            <label className={styles['search-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['search-input__inner']}>\n            <span className={styles['search-input__leading-icon']} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles['search-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              aria-invalid={invalid ? true : undefined}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles['search-input__trailing-icon']}>\n                <button\n                  type=\"button\"\n                  className={styles['search-input__clear-button']}\n                  onClick={handleClear}\n                  aria-label=\"Clear search\"\n                  tabIndex={-1}\n                >\n                  <Icon size={clearIconSize} glyph={<CloseCircleIcon />} />\n                </button>\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","CLEAR_ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","onKeyDown","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","handleKeyDown","showClearButton","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","clearIconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/search-input/SearchInput.module.css

@@ -1 +1 @@
-._searchInput_1wqgu_2{display:flex;flex-direction:column;width:100%}._searchInput__wrapper_1wqgu_7{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:not(:disabled)):hover:not(:focus-within) ._searchInput__wrapper_1wqgu_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:focus-visible) ._searchInput__wrapper_1wqgu_7{box-shadow:inset 0 0 0 1px var(--button-bg),0 0 0 1px var(--button-bg)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:disabled) ._searchInput__wrapper_1wqgu_7{background-color:var(--center-channel-bg);opacity:.56}._searchInput__label_1wqgu_27{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._searchInput__inner_1wqgu_54{display:flex;align-items:center;flex:1;min-width:0}._searchInput__input_1wqgu_17{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._searchInput__input_1wqgu_17::-webkit-search-decoration,._searchInput__input_1wqgu_17::-webkit-search-cancel-button{-webkit-appearance:none}._searchInput__input_1wqgu_17:focus{outline:none}._searchInput__input_1wqgu_17::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._searchInput__input_1wqgu_17:disabled{cursor:not-allowed}._searchInput__leadingIcon_1wqgu_85,._searchInput__trailingIcon_1wqgu_85{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._searchInput__leadingIcon_1wqgu_85{margin-right:var(--spacing-xs);pointer-events:none}._searchInput__trailingIcon_1wqgu_85{margin-left:var(--spacing-xs)}._searchInput__clearButton_1wqgu_99{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;transition:color var(--duration-quick) var(--ease-transition)}._searchInput__clearButton_1wqgu_99:hover{color:var(--center-channel-color)}._searchInput--size-small_1wqgu_114 ._searchInput__wrapper_1wqgu_7{min-height:32px}._searchInput--size-small_1wqgu_114 ._searchInput__inner_1wqgu_54{padding:var(--spacing-xs) var(--spacing-m)}._searchInput--size-small_1wqgu_114 ._searchInput__input_1wqgu_17{font-size:var(--font-size-75);line-height:var(--line-height-25)}._searchInput--size-small_1wqgu_114._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._searchInput--size-medium_1wqgu_130 ._searchInput__wrapper_1wqgu_7{min-height:40px}._searchInput--size-medium_1wqgu_130 ._searchInput__inner_1wqgu_54{padding:var(--spacing-s) var(--spacing-l)}._searchInput--size-medium_1wqgu_130 ._searchInput__input_1wqgu_17{font-size:var(--font-size-100);line-height:var(--line-height-100)}._searchInput--size-medium_1wqgu_130 ._searchInput__label_1wqgu_27{font-size:var(--font-size-100);left:var(--spacing-m)}._searchInput--size-medium_1wqgu_130._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._searchInput--size-large_1wqgu_150 ._searchInput__wrapper_1wqgu_7{min-height:48px}._searchInput--size-large_1wqgu_150 ._searchInput__inner_1wqgu_54{padding:var(--spacing-m) var(--spacing-l)}._searchInput--size-large_1wqgu_150 ._searchInput__input_1wqgu_17{font-size:var(--font-size-200);line-height:var(--line-height-200)}._searchInput--size-large_1wqgu_150 ._searchInput__label_1wqgu_27{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._searchInput--size-large_1wqgu_150._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._searchInput--has-leading-icon_1wqgu_171 ._searchInput__label_1wqgu_27{left:var(--spacing-xxxl)}._searchInput--has-leading-icon_1wqgu_171._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{left:var(--spacing-xs)}._searchInput--has-leading-icon_1wqgu_171._searchInput--size-medium_1wqgu_130 ._searchInput__label_1wqgu_27,._searchInput--has-leading-icon_1wqgu_171._searchInput--size-large_1wqgu_150 ._searchInput__label_1wqgu_27{left:36px}._searchInput--has-leading-icon_1wqgu_171._searchInput--size-medium_1wqgu_130._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27,._searchInput--has-leading-icon_1wqgu_171._searchInput--size-large_1wqgu_150._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{left:var(--spacing-m)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:focus-visible) ._searchInput__label_1wqgu_27{color:var(--button-bg)}._searchInput_1wqgu_2:has(._searchInput__label_1wqgu_27):not(._searchInput--label-floated_1wqgu_47) ._searchInput__input_1wqgu_17::placeholder{color:transparent}
+._search-input_1iq6i_2{display:flex;flex-direction:column;width:100%}._search-input__wrapper_1iq6i_7{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._search-input_1iq6i_2:has(._search-input__input_1iq6i_17:not(:disabled)):hover:not(:focus-within) ._search-input__wrapper_1iq6i_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._search-input_1iq6i_2:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__wrapper_1iq6i_7{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._search-input_1iq6i_2:has(._search-input__input_1iq6i_17:disabled) ._search-input__wrapper_1iq6i_7{background-color:var(--center-channel-bg);opacity:.56}._search-input__label_1iq6i_27{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._search-input__inner_1iq6i_54{display:flex;align-items:center;flex:1;min-width:0}._search-input__input_1iq6i_17{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._search-input__input_1iq6i_17::-webkit-search-decoration,._search-input__input_1iq6i_17::-webkit-search-cancel-button{-webkit-appearance:none}._search-input__input_1iq6i_17:focus{outline:none}._search-input__input_1iq6i_17::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._search-input__input_1iq6i_17:disabled{cursor:not-allowed}._search-input__leading-icon_1iq6i_85,._search-input__trailing-icon_1iq6i_85{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._search-input__leading-icon_1iq6i_85{margin-right:var(--spacing-xs);pointer-events:none}._search-input__trailing-icon_1iq6i_85{margin-left:var(--spacing-xs)}._search-input__clear-button_1iq6i_99{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;transition:color var(--duration-quick) var(--ease-transition)}._search-input__clear-button_1iq6i_99:hover{color:var(--center-channel-color)}._search-input--size-small_1iq6i_114 ._search-input__wrapper_1iq6i_7{min-height:32px}._search-input--size-small_1iq6i_114 ._search-input__inner_1iq6i_54{padding:var(--spacing-xs) var(--spacing-m)}._search-input--size-small_1iq6i_114 ._search-input__input_1iq6i_17{font-size:var(--font-size-75);line-height:var(--line-height-25)}._search-input--size-small_1iq6i_114._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--size-medium_1iq6i_130 ._search-input__wrapper_1iq6i_7{min-height:40px}._search-input--size-medium_1iq6i_130 ._search-input__inner_1iq6i_54{padding:var(--spacing-s) var(--spacing-l)}._search-input--size-medium_1iq6i_130 ._search-input__input_1iq6i_17{font-size:var(--font-size-100);line-height:var(--line-height-100)}._search-input--size-medium_1iq6i_130 ._search-input__label_1iq6i_27{font-size:var(--font-size-100);left:var(--spacing-m)}._search-input--size-medium_1iq6i_130._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--size-large_1iq6i_150 ._search-input__wrapper_1iq6i_7{min-height:48px}._search-input--size-large_1iq6i_150 ._search-input__inner_1iq6i_54{padding:var(--spacing-m) var(--spacing-l)}._search-input--size-large_1iq6i_150 ._search-input__input_1iq6i_17{font-size:var(--font-size-200);line-height:var(--line-height-200)}._search-input--size-large_1iq6i_150 ._search-input__label_1iq6i_27{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._search-input--size-large_1iq6i_150._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--has-leading-icon_1iq6i_171 ._search-input__label_1iq6i_27{left:var(--spacing-xxxl)}._search-input--has-leading-icon_1iq6i_171._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{left:var(--spacing-xs)}._search-input--has-leading-icon_1iq6i_171._search-input--size-medium_1iq6i_130 ._search-input__label_1iq6i_27,._search-input--has-leading-icon_1iq6i_171._search-input--size-large_1iq6i_150 ._search-input__label_1iq6i_27{left:36px}._search-input--has-leading-icon_1iq6i_171._search-input--size-medium_1iq6i_130._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27,._search-input--has-leading-icon_1iq6i_171._search-input--size-large_1iq6i_150._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{left:var(--spacing-m)}._search-input_1iq6i_2:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__label_1iq6i_27{color:var(--button-bg)}._search-input_1iq6i_2:has(._search-input__label_1iq6i_27):not(._search-input--label-floated_1iq6i_47) ._search-input__input_1iq6i_17::placeholder{color:transparent}._search-input--invalid_1iq6i_189 ._search-input__wrapper_1iq6i_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._search-input--invalid_1iq6i_189:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__wrapper_1iq6i_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._search-input--invalid_1iq6i_189 ._search-input__label_1iq6i_27{color:var(--error-text, var(--color-danger))}._search-input--invalid_1iq6i_189:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__label_1iq6i_27{color:var(--error-text, var(--color-danger))}

package/dist/components/search-input/SearchInput.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SearchInput.module.css');const _="_searchInput_1wqgu_2",e="_searchInput__wrapper_1wqgu_7",n="_searchInput__input_1wqgu_17",a="_searchInput__label_1wqgu_27",t="_searchInput__inner_1wqgu_54",u="_searchInput__leadingIcon_1wqgu_85",r="_searchInput__trailingIcon_1wqgu_85",c="_searchInput__clearButton_1wqgu_99",s={searchInput:_,searchInput__wrapper:e,searchInput__input:n,searchInput__label:a,"searchInput--label-floated":"_searchInput--label-floated_1wqgu_47",searchInput__inner:t,searchInput__leadingIcon:u,searchInput__trailingIcon:r,searchInput__clearButton:c,"searchInput--size-small":"_searchInput--size-small_1wqgu_114","searchInput--size-medium":"_searchInput--size-medium_1wqgu_130","searchInput--size-large":"_searchInput--size-large_1wqgu_150","searchInput--has-leading-icon":"_searchInput--has-leading-icon_1wqgu_171"};exports.default=s;exports.searchInput=_;exports.searchInput__clearButton=c;exports.searchInput__inner=t;exports.searchInput__input=n;exports.searchInput__label=a;exports.searchInput__leadingIcon=u;exports.searchInput__trailingIcon=r;exports.searchInput__wrapper=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SearchInput.module.css');const i={"search-input":"_search-input_1iq6i_2","search-input__wrapper":"_search-input__wrapper_1iq6i_7","search-input__input":"_search-input__input_1iq6i_17","search-input__label":"_search-input__label_1iq6i_27","search-input--label-floated":"_search-input--label-floated_1iq6i_47","search-input__inner":"_search-input__inner_1iq6i_54","search-input__leading-icon":"_search-input__leading-icon_1iq6i_85","search-input__trailing-icon":"_search-input__trailing-icon_1iq6i_85","search-input__clear-button":"_search-input__clear-button_1iq6i_99","search-input--size-small":"_search-input--size-small_1iq6i_114","search-input--size-medium":"_search-input--size-medium_1iq6i_130","search-input--size-large":"_search-input--size-large_1iq6i_150","search-input--has-leading-icon":"_search-input--has-leading-icon_1iq6i_171","search-input--invalid":"_search-input--invalid_1iq6i_189"};exports.default=i;
 //# sourceMappingURL=SearchInput.module.scss.cjs.map

package/dist/components/search-input/SearchInput.module.scss.js

@@ -1,27 +1,20 @@
-import './SearchInput.module.css';const _ = "_searchInput_1wqgu_2", n = "_searchInput__wrapper_1wqgu_7", e = "_searchInput__input_1wqgu_17", a = "_searchInput__label_1wqgu_27", t = "_searchInput__inner_1wqgu_54", s = "_searchInput__leadingIcon_1wqgu_85", u = "_searchInput__trailingIcon_1wqgu_85", c = "_searchInput__clearButton_1wqgu_99", r = {
-  searchInput: _,
-  searchInput__wrapper: n,
-  searchInput__input: e,
-  searchInput__label: a,
-  "searchInput--label-floated": "_searchInput--label-floated_1wqgu_47",
-  searchInput__inner: t,
-  searchInput__leadingIcon: s,
-  searchInput__trailingIcon: u,
-  searchInput__clearButton: c,
-  "searchInput--size-small": "_searchInput--size-small_1wqgu_114",
-  "searchInput--size-medium": "_searchInput--size-medium_1wqgu_130",
-  "searchInput--size-large": "_searchInput--size-large_1wqgu_150",
-  "searchInput--has-leading-icon": "_searchInput--has-leading-icon_1wqgu_171"
+import './SearchInput.module.css';const i = {
+  "search-input": "_search-input_1iq6i_2",
+  "search-input__wrapper": "_search-input__wrapper_1iq6i_7",
+  "search-input__input": "_search-input__input_1iq6i_17",
+  "search-input__label": "_search-input__label_1iq6i_27",
+  "search-input--label-floated": "_search-input--label-floated_1iq6i_47",
+  "search-input__inner": "_search-input__inner_1iq6i_54",
+  "search-input__leading-icon": "_search-input__leading-icon_1iq6i_85",
+  "search-input__trailing-icon": "_search-input__trailing-icon_1iq6i_85",
+  "search-input__clear-button": "_search-input__clear-button_1iq6i_99",
+  "search-input--size-small": "_search-input--size-small_1iq6i_114",
+  "search-input--size-medium": "_search-input--size-medium_1iq6i_130",
+  "search-input--size-large": "_search-input--size-large_1iq6i_150",
+  "search-input--has-leading-icon": "_search-input--has-leading-icon_1iq6i_171",
+  "search-input--invalid": "_search-input--invalid_1iq6i_189"
 };
 export {
-  r as default,
-  _ as searchInput,
-  c as searchInput__clearButton,
-  t as searchInput__inner,
-  e as searchInput__input,
-  a as searchInput__label,
-  s as searchInput__leadingIcon,
-  u as searchInput__trailingIcon,
-  n as searchInput__wrapper
+  i as default
 };
 //# sourceMappingURL=SearchInput.module.scss.js.map

package/dist/components/search-input/SearchInput.module.scss.js.map

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