@mattermost/compass-ui 0.1.0-alpha.12 → 0.1.0-alpha.13

package/dist/components/right-sidebar-header/RightSidebarHeader.js

@@ -1,29 +1,33 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import __y from "@mattermost/compass-icons/components/arrow-back-ios.js";const y=__y&&__y.default?__y.default:__y;
-import __C from "@mattermost/compass-icons/components/arrow-collapse.js";const C=__C&&__C.default?__C.default:__C;
-import __u from "@mattermost/compass-icons/components/arrow-expand.js";const u=__u&&__u.default?__u.default:__u;
-import __z from "@mattermost/compass-icons/components/close.js";const z=__z&&__z.default?__z.default:__z;
+import __k from "@mattermost/compass-icons/components/arrow-back-ios.js";const k=__k&&__k.default?__k.default:__k;
+import __v from "@mattermost/compass-icons/components/arrow-collapse.js";const v=__v&&__v.default?__v.default:__v;
+import __I from "@mattermost/compass-icons/components/arrow-expand.js";const I=__I&&__I.default?__I.default:__I;
+import __x from "@mattermost/compass-icons/components/close.js";const x=__x&&__x.default?__x.default:__x;
 import i from "../icon/Icon.js";
 import s from "../icon-button/IconButton.js";
-import k from "../tag/Tag.js";
+import j from "../tag/Tag.js";
 import r from "./RightSidebarHeader.module.scss.js";
-function R({
+function F({
   title: _,
   secondaryTitle: l,
   tag: o,
   tagType: b = "info",
   leadingIcon: t,
   onBack: d,
+  backLabel: g = "Back",
   onExpand: c,
   expanded: n = !1,
+  expandLabel: f = "Expand",
+  collapseLabel: N = "Collapse",
   onClose: h,
+  closeLabel: y = "Close",
   actionLabel: m,
-  onActionClick: g,
+  onActionClick: C,
   actionActive: p = !1,
-  className: f = ""
+  className: u = ""
 }) {
-  const N = [r["right-sidebar-header"], f].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: N, children: [
+  const z = [r["right-sidebar-header"], u].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("div", { className: z, children: [
     /* @__PURE__ */ a("div", { className: r["right-sidebar-header__left"], children: [
       /* @__PURE__ */ a("div", { className: r["right-sidebar-header__primary"], children: [
         d && /* @__PURE__ */ e(
@@ -31,15 +35,15 @@ function R({
           {
             className: r["right-sidebar-header__back"],
             size: "small",
-            "aria-label": "Back",
+            "aria-label": g,
             onClick: d,
-            icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(y, {}) })
+            icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(k, {}) })
           }
         ),
         t && /* @__PURE__ */ e("span", { className: r["right-sidebar-header__leading-icon"], children: t }),
         /* @__PURE__ */ e("span", { className: r["right-sidebar-header__title"], children: _ }),
         o && /* @__PURE__ */ e("span", { className: r["right-sidebar-header__tag"], children: /* @__PURE__ */ e(
-          k,
+          j,
           {
             label: o,
             type: b,
@@ -59,7 +63,7 @@ function R({
             r["right-sidebar-header__action"],
             p ? r["right-sidebar-header__action--active"] : ""
           ].filter(Boolean).join(" "),
-          onClick: g,
+          onClick: C,
           "aria-pressed": p ? !0 : void 0,
           children: m
         }
@@ -68,13 +72,13 @@ function R({
         s,
         {
           size: "small",
-          "aria-label": n ? "Collapse" : "Expand",
+          "aria-label": n ? N : f,
           onClick: c,
           icon: /* @__PURE__ */ e(
             i,
             {
               size: "16",
-              glyph: n ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ e(u, {})
+              glyph: n ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(I, {})
             }
           )
         }
@@ -83,15 +87,15 @@ function R({
         s,
         {
           size: "small",
-          "aria-label": "Close",
+          "aria-label": y,
           onClick: h,
-          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(z, {}) })
+          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(x, {}) })
         }
       )
     ] })
   ] });
 }
 export {
-  R as default
+  F as default
 };
 //# sourceMappingURL=RightSidebarHeader.js.map

package/dist/components/right-sidebar-header/RightSidebarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. */\n  title: string;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: string;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: string;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Optional inline action label (e.g. \"Follow\"). */\n  actionLabel?: string;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  onExpand,\n  expanded = false,\n  onClose,\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label=\"Back\"\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? 'Collapse' : 'Expand'}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label=\"Close\"\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","onExpand","expanded","onClose","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","CloseIcon"],"mappings":";;;;;;;;;AAuCA,SAAwBA,EAAmB;AAAA,EACzC,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AACd,GAA4B;AAC1B,QAAMC,IAAY,CAACC,EAAO,sBAAsB,GAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GACd,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GACjD,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAA;AAAA,QAAAT,KACC,gBAAAW;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWH,EAAO,4BAA4B;AAAA,YAC9C,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAST;AAAA,YACT,wBAAOa,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACG,KAAiB,EAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGtDf,KACC,gBAAAY,EAAC,QAAA,EAAK,WAAWF,EAAO,oCAAoC,GACzD,UAAAV,GACH;AAAA,0BAED,QAAA,EAAK,WAAWU,EAAO,6BAA6B,GAAI,UAAAd,GAAM;AAAA,QAC9DE,KACC,gBAAAc,EAAC,QAAA,EAAK,WAAWF,EAAO,2BAA2B,GACjD,UAAA,gBAAAE;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,OAAOlB;AAAA,YACP,MAAMC;AAAA,YACN,MAAK;AAAA,YACL,QAAO;AAAA,UAAA;AAAA,QAAA,EACT,CACF;AAAA,MAAA,GAEJ;AAAA,MACCF,KACC,gBAAAe,EAAC,OAAA,EAAI,WAAWF,EAAO,iCAAiC,GACtD,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,sCAAsC,GAC3D,aACH,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IAEA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAA;AAAA,MAAAL,KACC,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW;AAAA,YACTF,EAAO,8BAA8B;AAAA,YACrCH,IACIG,EAAO,sCAAsC,IAC7C;AAAA,UAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,SAASJ;AAAA,UACT,gBAAcC,IAAe,KAAO;AAAA,UAEnC,UAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJH,KACC,gBAAAU;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAYV,IAAW,aAAa;AAAA,UACpC,SAASD;AAAA,UACT,MACE,gBAAAU;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAOX,IAAW,gBAAAS,EAACK,GAAA,CAAA,CAAkB,sBAAMC,GAAA,CAAA,CAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,QAC7D;AAAA,MAAA;AAAA,MAILd,KACC,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAAST;AAAA,UACT,wBAAOU,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACO,KAAU,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","CloseIcon"],"mappings":";;;;;;;;;AA+CA,SAAwBA,EAAmB;AAAA,EACzC,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AACd,GAA4B;AAC1B,QAAMC,IAAY,CAACC,EAAO,sBAAsB,GAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GACd,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GACjD,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAA;AAAA,QAAAb,KACC,gBAAAe;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWH,EAAO,4BAA4B;AAAA,YAC9C,MAAK;AAAA,YACL,cAAYZ;AAAA,YACZ,SAASD;AAAA,YACT,wBAAOiB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACG,KAAiB,EAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGtDnB,KACC,gBAAAgB,EAAC,QAAA,EAAK,WAAWF,EAAO,oCAAoC,GACzD,UAAAd,GACH;AAAA,0BAED,QAAA,EAAK,WAAWc,EAAO,6BAA6B,GAAI,UAAAlB,GAAM;AAAA,QAC9DE,KACC,gBAAAkB,EAAC,QAAA,EAAK,WAAWF,EAAO,2BAA2B,GACjD,UAAA,gBAAAE;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,OAAOtB;AAAA,YACP,MAAMC;AAAA,YACN,MAAK;AAAA,YACL,QAAO;AAAA,UAAA;AAAA,QAAA,EACT,CACF;AAAA,MAAA,GAEJ;AAAA,MACCF,KACC,gBAAAmB,EAAC,OAAA,EAAI,WAAWF,EAAO,iCAAiC,GACtD,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,sCAAsC,GAC3D,aACH,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IAEA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAA;AAAA,MAAAL,KACC,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW;AAAA,YACTF,EAAO,8BAA8B;AAAA,YACrCH,IACIG,EAAO,sCAAsC,IAC7C;AAAA,UAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,SAASJ;AAAA,UACT,gBAAcC,IAAe,KAAO;AAAA,UAEnC,UAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJN,KACC,gBAAAa;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAYb,IAAWE,IAAgBD;AAAA,UACvC,SAASF;AAAA,UACT,MACE,gBAAAa;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAOd,IAAW,gBAAAY,EAACK,GAAA,CAAA,CAAkB,sBAAMC,GAAA,CAAA,CAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,QAC7D;AAAA,MAAA;AAAA,MAILf,KACC,gBAAAS;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAYT;AAAA,UACZ,SAASD;AAAA,UACT,wBAAOW,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACO,KAAU,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/scrollbar/Scrollbar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../node_modules/simplebar-react/dist/simplebar.min.css');const v=require("react/jsx-runtime"),s=require("react"),m=require("simplebar-react");;/* empty css                                                          */const q=require("./Scrollbar.module.scss.cjs"),S=s.forwardRef(function({children:n,color:l,alwaysVisible:u=!1,className:a,style:i,onScroll:o},e){const r=s.useRef(void 0),d=s.useCallback(t=>{var c;(c=r.current)==null||c.call(r),r.current=void 0,t&&o&&(t.addEventListener("scroll",o),r.current=()=>t.removeEventListener("scroll",o)),typeof e=="function"?e(t):e&&(e.current=t)},[o,e]),f={...i,...l?{"--scrollbar-color":`var(${l})`}:null},b=[q.default.scrollbar,a].filter(Boolean).join(" ");return v.jsx(m,{autoHide:!u,scrollableNodeProps:{ref:d},className:b,style:f,tabIndex:-1,children:n})});exports.default=S;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./simplebar-vendor.css');const m=require("react/jsx-runtime"),s=require("react"),q=require("simplebar-react");;/* empty css                        */const S=require("./Scrollbar.module.scss.cjs"),j=s.forwardRef(function({children:n,color:l,alwaysVisible:u=!1,className:a,style:i,onScroll:o,...d},e){const r=s.useRef(void 0),f=s.useCallback(t=>{var c;(c=r.current)==null||c.call(r),r.current=void 0,t&&o&&(t.addEventListener("scroll",o),r.current=()=>t.removeEventListener("scroll",o)),typeof e=="function"?e(t):e&&(e.current=t)},[o,e]),b={...i,...l?{"--scrollbar-color":`var(${l})`}:null},v=[S.default.scrollbar,a].filter(Boolean).join(" ");return m.jsx(q,{...d,autoHide:!u,scrollableNodeProps:{ref:f},className:v,style:b,tabIndex:-1,children:n})});exports.default=j;
 //# sourceMappingURL=Scrollbar.cjs.map

package/dist/components/scrollbar/Scrollbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.cjs","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport 'simplebar-react/dist/simplebar.min.css';\nimport styles from './Scrollbar.module.scss';\n\nexport interface ScrollbarProps {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  { children, color, alwaysVisible = false, className, style, onScroll },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [styles.scrollbar, className].filter(Boolean).join(' ');\n\n  return (\n    <SimpleBar\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","className","style","onScroll","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","jsx","SimpleBar"],"mappings":"yTAuCMA,EAAYC,EAAAA,WAA2C,SAC3D,CAAE,SAAAC,EAAU,MAAAC,EAAO,cAAAC,EAAgB,GAAO,UAAAC,EAAW,MAAAC,EAAO,SAAAC,CAAA,EAC5DC,EACA,CACA,MAAMC,EAAUC,EAAAA,OAAiC,MAAS,EAEpDC,EAAgBC,EAAAA,YACnBC,GAA8B,QAC7BC,EAAAL,EAAQ,UAAR,MAAAK,EAAA,KAAAL,GACAA,EAAQ,QAAU,OAEdI,GAAMN,IACRM,EAAG,iBAAiB,SAAUN,CAAQ,EACtCE,EAAQ,QAAU,IAAMI,EAAG,oBAAoB,SAAUN,CAAQ,GAG/D,OAAOC,GAAQ,WACjBA,EAAIK,CAAE,EACGL,IACRA,EAAsD,QAAUK,EAErE,EACA,CAACN,EAAUC,CAAG,CAAA,EAGVO,EAA6B,CACjC,GAAGT,EACH,GAAIH,EACC,CAAE,oBAAqB,OAAOA,CAAK,KACpC,IAAA,EAGAa,EAAY,CAACC,EAAAA,QAAO,UAAWZ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAExE,OACEa,EAAAA,IAACC,EAAA,CACC,SAAU,CAACf,EACX,oBAAqB,CAAE,IAAKO,CAAA,EAC5B,UAAWK,EACX,MAAOD,EACP,SAAU,GAET,SAAAb,CAAA,CAAA,CAGP,CAAC"}
+{"version":3,"file":"Scrollbar.cjs","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport './simplebar-vendor.scss';\nimport styles from './Scrollbar.module.scss';\n\nexport interface ScrollbarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children' | 'color' | 'onScroll'\n> {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  {\n    children,\n    color,\n    alwaysVisible = false,\n    className,\n    style,\n    onScroll,\n    ...rest\n  },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [styles.scrollbar, className].filter(Boolean).join(' ');\n\n  return (\n    <SimpleBar\n      {...rest}\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","className","style","onScroll","rest","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","jsx","SimpleBar"],"mappings":"uRA2CMA,EAAYC,EAAAA,WAA2C,SAC3D,CACE,SAAAC,EACA,MAAAC,EACA,cAAAC,EAAgB,GAChB,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAUC,EAAAA,OAAiC,MAAS,EAEpDC,EAAgBC,EAAAA,YACnBC,GAA8B,QAC7BC,EAAAL,EAAQ,UAAR,MAAAK,EAAA,KAAAL,GACAA,EAAQ,QAAU,OAEdI,GAAMP,IACRO,EAAG,iBAAiB,SAAUP,CAAQ,EACtCG,EAAQ,QAAU,IAAMI,EAAG,oBAAoB,SAAUP,CAAQ,GAG/D,OAAOE,GAAQ,WACjBA,EAAIK,CAAE,EACGL,IACRA,EAAsD,QAAUK,EAErE,EACA,CAACP,EAAUE,CAAG,CAAA,EAGVO,EAA6B,CACjC,GAAGV,EACH,GAAIH,EACC,CAAE,oBAAqB,OAAOA,CAAK,KACpC,IAAA,EAGAc,EAAY,CAACC,EAAAA,QAAO,UAAWb,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAExE,OACEc,EAAAA,IAACC,EAAA,CACE,GAAGZ,EACJ,SAAU,CAACJ,EACX,oBAAqB,CAAE,IAAKQ,CAAA,EAC5B,UAAWK,EACX,MAAOD,EACP,SAAU,GAET,SAAAd,CAAA,CAAA,CAGP,CAAC"}

package/dist/components/scrollbar/Scrollbar.css

@@ -1 +1 @@
-._scrollbar_1gcpr_2{width:100%;height:100%;min-height:0}._scrollbar_1gcpr_2 .simplebar-track.simplebar-vertical{width:8px}._scrollbar_1gcpr_2 .simplebar-track.simplebar-horizontal{height:8px}._scrollbar_1gcpr_2 .simplebar-scrollbar:before{left:2px;right:2px;top:2px;bottom:2px;border-radius:3px;background-color:rgba(var(--scrollbar-color, var(--center-channel-color-rgb)),.24);transition:opacity var(--duration-quick) var(--ease-exit),background-color var(--duration-quick) var(--ease-transition)}._scrollbar_1gcpr_2 .simplebar-scrollbar.simplebar-visible:before{opacity:1}._scrollbar_1gcpr_2 .simplebar-track:hover .simplebar-scrollbar:before,._scrollbar_1gcpr_2 .simplebar-scrollbar.simplebar-hover:before{opacity:1;background-color:rgba(var(--scrollbar-color, var(--center-channel-color-rgb)),.4)}._scrollbar_1gcpr_2 .simplebar-track{pointer-events:auto}
+._scrollbar_f5sq5_2{width:100%;height:100%;min-height:0;--scrollbar-color: var(--center-channel-color-rgb)}._scrollbar_f5sq5_2 .simplebar-track.simplebar-vertical{width:8px}._scrollbar_f5sq5_2 .simplebar-track.simplebar-horizontal{height:8px}._scrollbar_f5sq5_2 .simplebar-scrollbar:before{left:2px;right:2px;top:2px;bottom:2px;border-radius:3px;background-color:rgba(var(--scrollbar-color, var(--center-channel-color-rgb)),.24);transition:opacity var(--duration-quick) var(--ease-exit),background-color var(--duration-quick) var(--ease-transition)}._scrollbar_f5sq5_2 .simplebar-scrollbar.simplebar-visible:before{opacity:1}._scrollbar_f5sq5_2 .simplebar-track:hover .simplebar-scrollbar:before,._scrollbar_f5sq5_2 .simplebar-scrollbar.simplebar-hover:before{opacity:1;background-color:rgba(var(--scrollbar-color, var(--center-channel-color-rgb)),.4)}._scrollbar_f5sq5_2 .simplebar-track{pointer-events:auto}

package/dist/components/scrollbar/Scrollbar.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties, ReactNode } from 'react';
-export interface ScrollbarProps {
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+export interface ScrollbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color' | 'onScroll'> {
     /** Scrollable content. */
     children: ReactNode;
     /**

package/dist/components/scrollbar/Scrollbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,wCAAwC,CAAC;AAGhD,MAAM,WAAW,cAAc;IAC7B,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2GA6Cb,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,yBAAyB,CAAC;AAGjC,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,OAAO,GAAG,UAAU,CAClC;IACC,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2GAsDb,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/components/scrollbar/Scrollbar.js

@@ -1,32 +1,41 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as p, useRef as b, useCallback as v } from "react";
-import y from "simplebar-react";
-import '../../node_modules/simplebar-react/dist/simplebar.min.css';/* empty css                                                        */
-import x from "./Scrollbar.module.scss.js";
-const R = p(function({ children: a, color: s, alwaysVisible: i = !1, className: n, style: c, onScroll: e }, r) {
-  const o = b(void 0), f = v(
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as b, useRef as v, useCallback as y } from "react";
+import x from "simplebar-react";
+import './simplebar-vendor.css';/* empty css                      */
+import N from "./Scrollbar.module.scss.js";
+const S = b(function({
+  children: a,
+  color: s,
+  alwaysVisible: i = !1,
+  className: n,
+  style: c,
+  onScroll: e,
+  ...f
+}, r) {
+  const o = v(void 0), m = y(
     (t) => {
       var l;
       (l = o.current) == null || l.call(o), o.current = void 0, t && e && (t.addEventListener("scroll", e), o.current = () => t.removeEventListener("scroll", e)), typeof r == "function" ? r(t) : r && (r.current = t);
     },
     [e, r]
-  ), m = {
+  ), d = {
     ...c,
     ...s ? { "--scrollbar-color": `var(${s})` } : null
-  }, d = [x.scrollbar, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ u(
-    y,
+  }, u = [N.scrollbar, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ p(
+    x,
     {
+      ...f,
       autoHide: !i,
-      scrollableNodeProps: { ref: f },
-      className: d,
-      style: m,
+      scrollableNodeProps: { ref: m },
+      className: u,
+      style: d,
       tabIndex: -1,
       children: a
     }
   );
 });
 export {
-  R as default
+  S as default
 };
 //# sourceMappingURL=Scrollbar.js.map

package/dist/components/scrollbar/Scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.js","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport 'simplebar-react/dist/simplebar.min.css';\nimport styles from './Scrollbar.module.scss';\n\nexport interface ScrollbarProps {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  { children, color, alwaysVisible = false, className, style, onScroll },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [styles.scrollbar, className].filter(Boolean).join(' ');\n\n  return (\n    <SimpleBar\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","className","style","onScroll","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","jsx","SimpleBar"],"mappings":";;;;;AAuCA,MAAMA,IAAYC,EAA2C,SAC3D,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,IAAgB,IAAO,WAAAC,GAAW,OAAAC,GAAO,UAAAC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAUC,EAAiC,MAAS,GAEpDC,IAAgBC;AAAA,IACpB,CAACC,MAA8B;;AAC7B,OAAAC,IAAAL,EAAQ,YAAR,QAAAK,EAAA,KAAAL,IACAA,EAAQ,UAAU,QAEdI,KAAMN,MACRM,EAAG,iBAAiB,UAAUN,CAAQ,GACtCE,EAAQ,UAAU,MAAMI,EAAG,oBAAoB,UAAUN,CAAQ,IAG/D,OAAOC,KAAQ,aACjBA,EAAIK,CAAE,IACGL,MACRA,EAAsD,UAAUK;AAAA,IAErE;AAAA,IACA,CAACN,GAAUC,CAAG;AAAA,EAAA,GAGVO,IAA6B;AAAA,IACjC,GAAGT;AAAA,IACH,GAAIH,IACC,EAAE,qBAAqB,OAAOA,CAAK,QACpC;AAAA,EAAA,GAGAa,IAAY,CAACC,EAAO,WAAWZ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAExE,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU,CAACf;AAAA,MACX,qBAAqB,EAAE,KAAKO,EAAA;AAAA,MAC5B,WAAWK;AAAA,MACX,OAAOD;AAAA,MACP,UAAU;AAAA,MAET,UAAAb;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"Scrollbar.js","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport './simplebar-vendor.scss';\nimport styles from './Scrollbar.module.scss';\n\nexport interface ScrollbarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children' | 'color' | 'onScroll'\n> {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  {\n    children,\n    color,\n    alwaysVisible = false,\n    className,\n    style,\n    onScroll,\n    ...rest\n  },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [styles.scrollbar, className].filter(Boolean).join(' ');\n\n  return (\n    <SimpleBar\n      {...rest}\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","className","style","onScroll","rest","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","jsx","SimpleBar"],"mappings":";;;;;AA2CA,MAAMA,IAAYC,EAA2C,SAC3D;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAiC,MAAS,GAEpDC,IAAgBC;AAAA,IACpB,CAACC,MAA8B;;AAC7B,OAAAC,IAAAL,EAAQ,YAAR,QAAAK,EAAA,KAAAL,IACAA,EAAQ,UAAU,QAEdI,KAAMP,MACRO,EAAG,iBAAiB,UAAUP,CAAQ,GACtCG,EAAQ,UAAU,MAAMI,EAAG,oBAAoB,UAAUP,CAAQ,IAG/D,OAAOE,KAAQ,aACjBA,EAAIK,CAAE,IACGL,MACRA,EAAsD,UAAUK;AAAA,IAErE;AAAA,IACA,CAACP,GAAUE,CAAG;AAAA,EAAA,GAGVO,IAA6B;AAAA,IACjC,GAAGV;AAAA,IACH,GAAIH,IACC,EAAE,qBAAqB,OAAOA,CAAK,QACpC;AAAA,EAAA,GAGAc,IAAY,CAACC,EAAO,WAAWb,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAExE,SACE,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGZ;AAAA,MACJ,UAAU,CAACJ;AAAA,MACX,qBAAqB,EAAE,KAAKQ,EAAA;AAAA,MAC5B,WAAWK;AAAA,MACX,OAAOD;AAAA,MACP,UAAU;AAAA,MAET,UAAAd;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/scrollbar/Scrollbar.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Scrollbar.css');const l="_scrollbar_1gcpr_2",e={scrollbar:l};exports.default=e;exports.scrollbar=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Scrollbar.css');const l="_scrollbar_f5sq5_2",e={scrollbar:l};exports.default=e;exports.scrollbar=l;
 //# sourceMappingURL=Scrollbar.module.scss.cjs.map

package/dist/components/scrollbar/Scrollbar.module.scss.js

@@ -1,8 +1,8 @@
-import './Scrollbar.css';const l = "_scrollbar_1gcpr_2", r = {
-  scrollbar: l
+import './Scrollbar.css';const s = "_scrollbar_f5sq5_2", l = {
+  scrollbar: s
 };
 export {
-  r as default,
-  l as scrollbar
+  l as default,
+  s as scrollbar
 };
 //# sourceMappingURL=Scrollbar.module.scss.js.map

package/dist/components/scrollbar/simplebar-vendor.css

@@ -0,0 +1 @@
+@layer compass-ui.base,compass-ui.vendor,compass-ui.webapp-compat,compass-ui.tokens,compass-ui.themes;@layer compass-ui.vendor{[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:" ";display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging,[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:"";background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{top:2px;bottom:2px;left:2px;right:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:0;bottom:0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}}

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

@@ -1,2 +1,2 @@
-"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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),D=require("../../utils/string.cjs"),q=require("../icon/Icon.cjs"),__K=require("@mattermost/compass-icons/components/magnify.js"),K=__K?.default??__K,__P=require("@mattermost/compass-icons/components/close-circle.js"),P=__P?.default??__P,B=require("../../utils/props.cjs"),s=require("./SearchInput.module.scss.cjs"),ee={small:"12",medium:"16",large:"20"},se={small:"12",medium:"16",large:"16"},te=a.forwardRef(function({className:R="",size:h="medium",label:m,invalid:j=!1,onClear:p,clearLabel:y="Clear search",clearButtonProps:c,id:M,value:_,defaultValue:x,placeholder:z,onFocus:r,onBlur:d,onChange:l,disabled:u,onKeyDown:f,...E},n){const A=a.useId(),b=M??A,I=a.useRef(null),i=_!==void 0,[O,C]=a.useState(x??""),N=i?_:O,o=N!=null&&N!=="",[T,S]=a.useState(!1),V=T||o,F=a.useCallback(e=>{S(!0),r==null||r(e)},[r]),L=a.useCallback(e=>{S(!1),d==null||d(e)},[d]),Z=a.useCallback(e=>{i||C(e.target.value),l==null||l(e)},[i,l]),U=a.useCallback(e=>{I.current=e,typeof n=="function"?n(e):n&&(n.current=e)},[n]),v=a.useCallback(()=>{var k;if(u)return;if(p){p(),(k=I.current)==null||k.focus();return}const e=I.current;e!=null&&(e.value="",i||C(""),l==null||l({target:e,currentTarget:e}),e.focus())},[u,i,l,p]),$=a.useCallback(e=>{f==null||f(e),!(e.defaultPrevented||u)&&e.key==="Escape"&&o&&(e.preventDefault(),v())},[u,v,o,f]),g=o&&!u,w=s.default[`search-input--size-${D.toKebab(h)}`],G=j?s.default["search-input--invalid"]:"",H=m!=null&&V?s.default["search-input--label-floated"]:"",J=s.default["search-input--has-leading-icon"],Q=g?s.default["search-input--has-trailing-icon"]:"",W=ee[h],X=se[h],Y=[s.default["search-input"],w,G,H,J,Q,R].filter(Boolean).join(" ");return t.jsx("div",{className:Y,children:t.jsxs("div",{className:s.default["search-input__wrapper"],children:[m!=null&&t.jsx("label",{className:s.default["search-input__label"],htmlFor:b,children:m}),t.jsxs("div",{className:s.default["search-input__inner"],children:[t.jsx("span",{className:s.default["search-input__leading-icon"],"aria-hidden":!0,children:t.jsx(q.default,{size:W,glyph:t.jsx(K,{})})}),t.jsx("input",{ref:U,id:b,type:"search",className:s.default["search-input__input"],value:i?_:void 0,defaultValue:i?void 0:x,placeholder:z,disabled:u,onFocus:F,onBlur:L,onChange:Z,onKeyDown:$,"aria-invalid":j?!0:void 0,...E}),g&&t.jsx("span",{className:s.default["search-input__trailing-icon"],children:t.jsx("button",{...c,type:"button",className:B.mergeClassNames(s.default["search-input__clear-button"],c==null?void 0:c.className),onClick:v,"aria-label":y,tabIndex:(c==null?void 0:c.tabIndex)??-1,children:t.jsx(q.default,{size:X,glyph:t.jsx(P,{})})})})]})]})})});exports.default=te;
 //# 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 {\n  ChangeEvent,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } 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\n        ? styles['search-input--label-floated']\n        : '';\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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"}
+{"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 { forwardRef, useId, useState, useCallback, useRef } 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 type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\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  /** Accessible name for the clear button. Default: \"Clear search\". */\n  clearLabel?: string;\n  /** Extra attributes for the clear button (e.g. `data-testid`). */\n  clearButtonProps?: BuiltInButtonProps;\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      clearLabel = 'Clear search',\n      clearButtonProps,\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\n        ? styles['search-input--label-floated']\n        : '';\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                  {...clearButtonProps}\n                  type=\"button\"\n                  className={mergeClassNames(\n                    styles['search-input__clear-button'],\n                    clearButtonProps?.className,\n                  )}\n                  onClick={handleClear}\n                  aria-label={clearLabel}\n                  tabIndex={clearButtonProps?.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","clearLabel","clearButtonProps","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","mergeClassNames","CloseCircleIcon"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
 export type SearchInputSize = 'small' | 'medium' | 'large';
 export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     /** Optional CSS class name. */
@@ -11,6 +12,10 @@ export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElem
     size?: SearchInputSize;
     /** Called when the clear button is pressed. Omit to use built-in clearing. */
     onClear?: () => void;
+    /** Accessible name for the clear button. Default: "Clear search". */
+    clearLabel?: string;
+    /** Extra attributes for the clear button (e.g. `data-testid`). */
+    clearButtonProps?: BuiltInButtonProps;
 }
 /**
  * Search Inputs are the entry point to filtering or finding content — global search, channel

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,EAEV,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AASf,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,+GAiLhB,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;AAOf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,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;IACrB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;CACvC;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,+GAuLhB,CAAC;AAEF,eAAe,WAAW,CAAC"}