@mattermost/compass-ui 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { TagType } from '../tag/Tag';
+export interface RightSidebarHeaderProps {
+    /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    title: ReactNode;
+    /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */
+    secondaryTitle?: ReactNode;
+    /** Optional tag rendered next to the title (e.g. "BETA"). */
+    tag?: ReactNode;
+    /** Tag visual style. Default: Info. */
+    tagType?: TagType;
+    /** 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. */
+    leadingIcon?: ReactNode;
+    /** When set, shows a back button and calls this on click. */
+    onBack?: () => void;
+    /** Accessible name for the back button. Default: "Back". */
+    backLabel?: string;
+    /** When set, shows an expand/collapse button and calls this on click. */
+    onExpand?: () => void;
+    /** When true, the expand button shows the collapse icon. Requires `onExpand`. */
+    expanded?: boolean;
+    /** Accessible name for the expand button while collapsed. Default: "Expand". */
+    expandLabel?: string;
+    /** Accessible name for the expand button while expanded. Default: "Collapse". */
+    collapseLabel?: string;
+    /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */
+    onPopout?: () => void;
+    /** Accessible name for the pop out button. Default: "Open in new window". */
+    popoutLabel?: string;
+    /** When set, shows a close button and calls this on click. */
+    onClose?: () => void;
+    /** Accessible name for the close button. Default: "Close". */
+    closeLabel?: string;
+    /** Optional inline action label (e.g. "Follow"). Accepts translated nodes. */
+    actionLabel?: ReactNode;
+    /** Click handler for the action label. */
+    onActionClick?: () => void;
+    /** When true, the action button shows in its active state. */
+    actionActive?: boolean;
+    className?: string;
+}
+export default function RightSidebarHeader({ title, secondaryTitle, tag, tagType, leadingIcon, onBack, backLabel, onExpand, expanded, expandLabel, collapseLabel, onPopout, popoutLabel, onClose, closeLabel, actionLabel, onActionClick, actionActive, className, }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RightSidebarHeader.d.ts.map

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,SAAkB,EAClB,QAAQ,EACR,QAAgB,EAChB,WAAsB,EACtB,aAA0B,EAC1B,QAAQ,EACR,WAAkC,EAClC,OAAO,EACP,UAAoB,EACpB,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CA8FzB"}

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

@@ -0,0 +1,113 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import __u from "@mattermost/compass-icons/components/arrow-back-ios.js";const u=__u&&__u.default?__u.default:__u;
+import __v from "@mattermost/compass-icons/components/arrow-collapse.js";const v=__v&&__v.default?__v.default:__v;
+import __x from "@mattermost/compass-icons/components/arrow-expand.js";const x=__x&&__x.default?__x.default:__x;
+import __j from "@mattermost/compass-icons/components/close.js";const j=__j&&__j.default?__j.default:__j;
+import __B from "@mattermost/compass-icons/components/dock-window.js";const B=__B&&__B.default?__B.default:__B;
+import i from "../icon/Icon.js";
+import s from "../icon-button/IconButton.js";
+import A from "../tag/Tag.js";
+import a from "./RightSidebarHeader.module.scss.js";
+function J({
+  title: b,
+  secondaryTitle: l,
+  tag: o,
+  tagType: g = "info",
+  leadingIcon: c,
+  onBack: d,
+  backLabel: f = "Back",
+  onExpand: n,
+  expanded: t = !1,
+  expandLabel: N = "Expand",
+  collapseLabel: y = "Collapse",
+  onPopout: h,
+  popoutLabel: z = "Open in new window",
+  onClose: m,
+  closeLabel: C = "Close",
+  actionLabel: p,
+  onActionClick: k,
+  actionActive: _ = !1,
+  className: w = ""
+}) {
+  const I = [a["right-sidebar-header"], w].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("div", { className: I, children: [
+    /* @__PURE__ */ r("div", { className: a["right-sidebar-header__left"], children: [
+      /* @__PURE__ */ r("div", { className: a["right-sidebar-header__primary"], children: [
+        d && /* @__PURE__ */ e(
+          s,
+          {
+            className: a["right-sidebar-header__back"],
+            size: "small",
+            "aria-label": f,
+            onClick: d,
+            icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(u, {}) })
+          }
+        ),
+        c && /* @__PURE__ */ e("span", { className: a["right-sidebar-header__leading-icon"], children: c }),
+        /* @__PURE__ */ e("span", { className: a["right-sidebar-header__title"], children: b }),
+        o && /* @__PURE__ */ e("span", { className: a["right-sidebar-header__tag"], children: /* @__PURE__ */ e(
+          A,
+          {
+            label: o,
+            type: g,
+            size: "x-small",
+            casing: "all-caps"
+          }
+        ) })
+      ] }),
+      l && /* @__PURE__ */ e("div", { className: a["right-sidebar-header__secondary"], children: /* @__PURE__ */ e("span", { className: a["right-sidebar-header__secondary-text"], children: l }) })
+    ] }),
+    /* @__PURE__ */ r("div", { className: a["right-sidebar-header__actions"], children: [
+      p && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: [
+            a["right-sidebar-header__action"],
+            _ ? a["right-sidebar-header__action--active"] : ""
+          ].filter(Boolean).join(" "),
+          onClick: k,
+          "aria-pressed": _ ? !0 : void 0,
+          children: p
+        }
+      ),
+      n && /* @__PURE__ */ e(
+        s,
+        {
+          size: "small",
+          "aria-label": t ? y : N,
+          onClick: n,
+          icon: /* @__PURE__ */ e(
+            i,
+            {
+              size: "16",
+              glyph: t ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(x, {})
+            }
+          )
+        }
+      ),
+      h && /* @__PURE__ */ e(
+        s,
+        {
+          size: "small",
+          "aria-label": z,
+          onClick: h,
+          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(B, {}) })
+        }
+      ),
+      m && /* @__PURE__ */ e(
+        s,
+        {
+          size: "small",
+          "aria-label": C,
+          onClick: m,
+          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(j, {}) })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  J as default
+};
+//# sourceMappingURL=RightSidebarHeader.js.map

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

@@ -0,0 +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 DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\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 pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: 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  onPopout,\n  popoutLabel = 'Open in new window',\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        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\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","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"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"}

package/dist/components/right-sidebar-header/RightSidebarHeader.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./RightSidebarHeader.css');const e={"right-sidebar-header":"_right-sidebar-header_11chd_2","right-sidebar-header__left":"_right-sidebar-header__left_11chd_12","right-sidebar-header__primary":"_right-sidebar-header__primary_11chd_18","right-sidebar-header__back":"_right-sidebar-header__back_11chd_25","right-sidebar-header__leading-icon":"_right-sidebar-header__leading-icon_11chd_28","right-sidebar-header__tag":"_right-sidebar-header__tag_11chd_33","right-sidebar-header__title":"_right-sidebar-header__title_11chd_37","right-sidebar-header__secondary":"_right-sidebar-header__secondary_11chd_47","right-sidebar-header__secondary-text":"_right-sidebar-header__secondary-text_11chd_55","right-sidebar-header__actions":"_right-sidebar-header__actions_11chd_65","right-sidebar-header__action":"_right-sidebar-header__action_11chd_65","right-sidebar-header__action--active":"_right-sidebar-header__action--active_11chd_99"};exports.default=e;
+//# sourceMappingURL=RightSidebarHeader.module.scss.cjs.map

package/dist/components/right-sidebar-header/RightSidebarHeader.module.scss.cjs.map

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

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

@@ -0,0 +1,18 @@
+import './RightSidebarHeader.css';const e = {
+  "right-sidebar-header": "_right-sidebar-header_11chd_2",
+  "right-sidebar-header__left": "_right-sidebar-header__left_11chd_12",
+  "right-sidebar-header__primary": "_right-sidebar-header__primary_11chd_18",
+  "right-sidebar-header__back": "_right-sidebar-header__back_11chd_25",
+  "right-sidebar-header__leading-icon": "_right-sidebar-header__leading-icon_11chd_28",
+  "right-sidebar-header__tag": "_right-sidebar-header__tag_11chd_33",
+  "right-sidebar-header__title": "_right-sidebar-header__title_11chd_37",
+  "right-sidebar-header__secondary": "_right-sidebar-header__secondary_11chd_47",
+  "right-sidebar-header__secondary-text": "_right-sidebar-header__secondary-text_11chd_55",
+  "right-sidebar-header__actions": "_right-sidebar-header__actions_11chd_65",
+  "right-sidebar-header__action": "_right-sidebar-header__action_11chd_65",
+  "right-sidebar-header__action--active": "_right-sidebar-header__action--active_11chd_99"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=RightSidebarHeader.module.scss.js.map

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

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

package/dist/components/right-sidebar-header/index.cjs

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

package/dist/components/right-sidebar-header/index.cjs.map

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

package/dist/components/right-sidebar-header/index.d.ts

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

package/dist/components/right-sidebar-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

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

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

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

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

package/dist/components/scrollbar/Scrollbar.cjs

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

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

@@ -0,0 +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 HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport { toKebab } from '@/utils/string';\nimport './simplebar-vendor.scss';\nimport styles from './Scrollbar.module.scss';\n\n/** Track width. `default` is 8px; `wide` is 10px (modals, large panes). */\nexport type ScrollbarSize = 'default' | 'wide';\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  /** Track width. Default: `default` (8px). Use `wide` (10px) in modals. */\n  size?: ScrollbarSize;\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    size = 'default',\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 = [\n    styles.scrollbar,\n    size !== 'default' && styles[`scrollbar--size-${toKebab(size)}`],\n    className,\n  ]\n    .filter(Boolean)\n    .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","size","className","style","onScroll","rest","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","toKebab","jsx","SimpleBar"],"mappings":"2TAiDMA,EAAYC,EAAAA,WAA2C,SAC3D,CACE,SAAAC,EACA,MAAAC,EACA,cAAAC,EAAgB,GAChB,KAAAC,EAAO,UACP,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,GAAIJ,EACC,CAAE,oBAAqB,OAAOA,CAAK,KACpC,IAAA,EAGAe,EAAY,CAChBC,EAAAA,QAAO,UACPd,IAAS,WAAac,UAAO,mBAAmBC,UAAQf,CAAI,CAAC,EAAE,EAC/DC,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEe,EAAAA,IAACC,EAAA,CACE,GAAGb,EACJ,SAAU,CAACL,EACX,oBAAqB,CAAE,IAAKS,CAAA,EAC5B,UAAWK,EACX,MAAOD,EACP,SAAU,GAET,SAAAf,CAAA,CAAA,CAGP,CAAC"}

package/dist/components/scrollbar/Scrollbar.css

@@ -0,0 +1 @@
+._scrollbar_xs0gi_2{width:100%;height:100%;min-height:0;--scrollbar-color: var(--center-channel-color-rgb)}._scrollbar_xs0gi_2 .simplebar-track.simplebar-vertical{width:8px}._scrollbar_xs0gi_2 .simplebar-track.simplebar-horizontal{height:8px}._scrollbar--size-wide_xs0gi_14 .simplebar-track.simplebar-vertical{width:10px}._scrollbar--size-wide_xs0gi_14 .simplebar-track.simplebar-horizontal{height:10px}._scrollbar_xs0gi_2 .simplebar-scrollbar:before{left:2px;right:2px;top:2px;bottom:2px;border-radius:var(--radius-pill);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_xs0gi_2 .simplebar-scrollbar.simplebar-visible:before{opacity:1}._scrollbar_xs0gi_2 .simplebar-track:hover .simplebar-scrollbar:before,._scrollbar_xs0gi_2 .simplebar-scrollbar.simplebar-hover:before{opacity:1;background-color:rgba(var(--scrollbar-color, var(--center-channel-color-rgb)),.4)}._scrollbar_xs0gi_2 .simplebar-track{pointer-events:auto}

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

@@ -0,0 +1,35 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+/** Track width. `default` is 8px; `wide` is 10px (modals, large panes). */
+export type ScrollbarSize = 'default' | 'wide';
+export interface ScrollbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color' | 'onScroll'> {
+    /** Scrollable content. */
+    children: ReactNode;
+    /**
+     * CSS variable name (including the leading `--`) for the thumb RGB triplet.
+     * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).
+     * When omitted, the thumb uses `--center-channel-color-rgb`.
+     */
+    color?: string;
+    /**
+     * Disable auto-hide; the thumb is visible whenever content overflows.
+     * Default: false (auto-hide).
+     */
+    alwaysVisible?: boolean;
+    /** Track width. Default: `default` (8px). Use `wide` (10px) in modals. */
+    size?: ScrollbarSize;
+    /** Class applied to the SimpleBar root. */
+    className?: string;
+    /** Inline style applied to the SimpleBar root. */
+    style?: CSSProperties;
+    /** Scroll handler attached to the inner scrollable element. */
+    onScroll?: (e: Event) => void;
+}
+/**
+ * Scrollbars let people move through content that exceeds the viewport while showing where
+ * they are in the larger whole. Compass uses a single, minimal treatment — a transparent
+ * track with a thin, translucent thumb — so the scrollbar reads as a position indicator
+ * first and a control second.
+ */
+declare const Scrollbar: import('react').ForwardRefExoticComponent<ScrollbarProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Scrollbar;
+//# sourceMappingURL=Scrollbar.d.ts.map

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

@@ -0,0 +1 @@
+{"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;AAGf,OAAO,yBAAyB,CAAC;AAGjC,2EAA2E;AAC3E,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC;AAE/C,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,0EAA0E;IAC1E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,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,2GA6Db,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/components/scrollbar/Scrollbar.js

@@ -0,0 +1,47 @@
+import { jsx as v } from "react/jsx-runtime";
+import { forwardRef as y, useRef as x, useCallback as N } from "react";
+import j from "simplebar-react";
+import { toKebab as B } from "../../utils/string.js";
+import './simplebar-vendor.css';/* empty css                      */
+import i from "./Scrollbar.module.scss.js";
+const k = y(function({
+  children: c,
+  color: s,
+  alwaysVisible: n = !1,
+  size: l = "default",
+  className: f,
+  style: m,
+  onScroll: e,
+  ...d
+}, r) {
+  const o = x(void 0), u = N(
+    (t) => {
+      var a;
+      (a = o.current) == null || a.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]
+  ), b = {
+    ...m,
+    ...s ? { "--scrollbar-color": `var(${s})` } : null
+  }, p = [
+    i.scrollbar,
+    l !== "default" && i[`scrollbar--size-${B(l)}`],
+    f
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ v(
+    j,
+    {
+      ...d,
+      autoHide: !n,
+      scrollableNodeProps: { ref: u },
+      className: p,
+      style: b,
+      tabIndex: -1,
+      children: c
+    }
+  );
+});
+export {
+  k as default
+};
+//# sourceMappingURL=Scrollbar.js.map

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

@@ -0,0 +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 HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport { toKebab } from '@/utils/string';\nimport './simplebar-vendor.scss';\nimport styles from './Scrollbar.module.scss';\n\n/** Track width. `default` is 8px; `wide` is 10px (modals, large panes). */\nexport type ScrollbarSize = 'default' | 'wide';\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  /** Track width. Default: `default` (8px). Use `wide` (10px) in modals. */\n  size?: ScrollbarSize;\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    size = 'default',\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 = [\n    styles.scrollbar,\n    size !== 'default' && styles[`scrollbar--size-${toKebab(size)}`],\n    className,\n  ]\n    .filter(Boolean)\n    .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","size","className","style","onScroll","rest","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","toKebab","jsx","SimpleBar"],"mappings":";;;;;;AAiDA,MAAMA,IAAYC,EAA2C,SAC3D;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,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,GAAIJ,IACC,EAAE,qBAAqB,OAAOA,CAAK,QACpC;AAAA,EAAA,GAGAe,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPd,MAAS,aAAac,EAAO,mBAAmBC,EAAQf,CAAI,CAAC,EAAE;AAAA,IAC/DC;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGb;AAAA,MACJ,UAAU,CAACL;AAAA,MACX,qBAAqB,EAAE,KAAKS,EAAA;AAAA,MAC5B,WAAWK;AAAA,MACX,OAAOD;AAAA,MACP,UAAU;AAAA,MAET,UAAAf;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

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

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

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

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

@@ -0,0 +1,9 @@
+import './Scrollbar.css';const s = "_scrollbar_xs0gi_2", l = {
+  scrollbar: s,
+  "scrollbar--size-wide": "_scrollbar--size-wide_xs0gi_14"
+};
+export {
+  l as default,
+  s as scrollbar
+};
+//# sourceMappingURL=Scrollbar.module.scss.js.map

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

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

package/dist/components/scrollbar/index.cjs

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/scrollbar/index.js

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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),l=require("react"),ae=require("../../utils/string.cjs"),le=require("../icon/Icon.cjs"),__te=require("@mattermost/compass-icons/components/magnify.js"),te=__te?.default??__te,ie=require("../field/FieldClearButton.cjs"),p=require("../field/fieldDescribedBy.cjs"),ne=require("../field/useFieldClear.cjs"),ce=require("../field-message/FieldMessage.cjs"),e=require("./SearchInput.module.scss.cjs"),de={small:"12",medium:"16",large:"20"},ue=l.forwardRef(function({className:M="",size:r="medium",label:o,invalid:R=!1,message:h,messageTone:v,onClear:k,clearLabel:D="Clear search",clearButtonProps:n,id:K,value:f,defaultValue:_,placeholder:V,onFocus:c,onBlur:d,onChange:u,disabled:C,readOnly:m,onKeyDown:z,"aria-describedby":E,...T},i){const $=l.useId(),b=K??$,I=l.useRef(null),t=f!==void 0,[A,g]=l.useState(_??""),j=t?f:A,x=j!=null&&j!=="",[L,q]=l.useState(!1),O=L||x,U=l.useCallback(a=>{q(!0),c==null||c(a)},[c]),Z=l.useCallback(a=>{q(!1),d==null||d(a)},[d]),y=l.useCallback(a=>{t||g(a.target.value),u==null||u(a)},[t,u]),G=l.useCallback(a=>{I.current=a,typeof i=="function"?i(a):i&&(i.current=a)},[i]),{showClearButton:F,handleClear:H,handleKeyDown:J}=ne.useFieldClear({disabled:!!(C||m),hasValue:x,clearEnabled:!0,isControlled:t,onClear:k,onChange:y,onKeyDown:z,inputRef:I,setUncontrolledValue:g}),S=p.isFieldInvalid(R,h,v),N=p.hasFieldMessage(h),Q=e.default[`search-input--size-${ae.toKebab(r)}`],W=S?e.default["search-input--invalid"]:"",X=o!=null&&O?e.default["search-input--label-floated"]:"",Y=e.default["search-input--has-leading-icon"],B=F?e.default["search-input--has-trailing-icon"]:"",P=de[r],ee=[e.default["search-input"],Q,W,X,Y,B,M].filter(Boolean).join(" "),w=N?`${b}-message`:void 0,se=v??"error";return s.jsxs("div",{className:ee,children:[s.jsxs("div",{className:e.default["search-input__wrapper"],children:[o!=null&&s.jsx("label",{className:e.default["search-input__label"],htmlFor:b,children:o}),s.jsxs("div",{className:e.default["search-input__inner"],children:[s.jsx("span",{className:e.default["search-input__leading-icon"],"aria-hidden":!0,children:s.jsx(le.default,{size:P,glyph:s.jsx(te,{})})}),s.jsx("input",{ref:G,id:b,type:"search",className:e.default["search-input__input"],value:t?f:void 0,defaultValue:t?void 0:_,placeholder:V,disabled:C,readOnly:m,onFocus:U,onBlur:Z,onChange:y,onKeyDown:J,"aria-invalid":S?!0:void 0,"aria-describedby":p.mergeFieldDescribedBy(E,w,void 0),...T}),F&&s.jsx("span",{className:e.default["search-input__trailing-icon"],children:s.jsx(ie.default,{size:r,clearLabel:D,clearButtonProps:n,onClick:H,tabIndex:(n==null?void 0:n.tabIndex)??-1})})]})]}),N&&s.jsx(ce.default,{id:w,message:h,tone:se})]})});exports.default=ue;
+//# sourceMappingURL=SearchInput.cjs.map

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

@@ -0,0 +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 FieldClearButton from '@/components/field/FieldClearButton';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport { useFieldClear } from '@/components/field/useFieldClear';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } 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\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  /**\n   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\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      message,\n      messageTone,\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      readOnly,\n      onKeyDown,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(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 { showClearButton, handleClear, handleKeyDown } = useFieldClear({\n      disabled: Boolean(disabled || readOnly),\n      hasValue,\n      clearEnabled: true,\n      isControlled,\n      onClear,\n      onChange: handleChange,\n      onKeyDown: onKeyDown as\n        | ((e: KeyboardEvent<HTMLInputElement>) => void)\n        | undefined,\n      inputRef,\n      setUncontrolledValue,\n    });\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? 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\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    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\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              readOnly={readOnly}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              aria-invalid={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                undefined,\n              )}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles['search-input__trailing-icon']}>\n                <FieldClearButton\n                  size={size}\n                  clearLabel={clearLabel}\n                  clearButtonProps={clearButtonProps}\n                  onClick={handleClear}\n                  tabIndex={clearButtonProps?.tabIndex ?? -1}\n                />\n              </span>\n            )}\n          </div>\n        </div>\n        {showMessage && (\n          <FieldMessage id={messageId} message={message} tone={resolvedTone} />\n        )}\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","message","messageTone","onClear","clearLabel","clearButtonProps","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","onKeyDown","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","showClearButton","handleClear","handleKeyDown","useFieldClear","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","messageId","resolvedTone","jsxs","jsx","Icon","MagnifyIcon","mergeFieldDescribedBy","FieldClearButton","FieldMessage"],"mappings":"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"}

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

@@ -0,0 +1 @@
+._search-input_1h7hr_2{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}._search-input__wrapper_1h7hr_8{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_1h7hr_2:has(._search-input__input_1h7hr_18:not(:disabled)):hover:not(:focus-within) ._search-input__wrapper_1h7hr_8{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._search-input_1h7hr_2:has(._search-input__input_1h7hr_18:focus-visible) ._search-input__wrapper_1h7hr_8{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._search-input_1h7hr_2:has(._search-input__input_1h7hr_18:disabled) ._search-input__wrapper_1h7hr_8{background-color:var(--center-channel-bg);opacity:.56}._search-input__label_1h7hr_28{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_1h7hr_48 ._search-input__label_1h7hr_28{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_1h7hr_55{display:flex;align-items:center;flex:1;min-width:0}._search-input__input_1h7hr_18{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_1h7hr_18::-webkit-search-decoration,._search-input__input_1h7hr_18::-webkit-search-cancel-button{-webkit-appearance:none}._search-input__input_1h7hr_18:focus{outline:none}._search-input__input_1h7hr_18::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._search-input__input_1h7hr_18:disabled{cursor:not-allowed}._search-input__leading-icon_1h7hr_86,._search-input__trailing-icon_1h7hr_86{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._search-input__leading-icon_1h7hr_86{margin-right:var(--spacing-xs);pointer-events:none}._search-input__trailing-icon_1h7hr_86{margin-left:var(--spacing-xs)}._search-input--size-small_1h7hr_100 ._search-input__wrapper_1h7hr_8{min-height:32px}._search-input--size-small_1h7hr_100 ._search-input__inner_1h7hr_55{padding:var(--spacing-xs) var(--spacing-m)}._search-input--size-small_1h7hr_100 ._search-input__input_1h7hr_18{font-size:var(--font-size-75);line-height:var(--line-height-25)}._search-input--size-small_1h7hr_100._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--size-medium_1h7hr_116 ._search-input__wrapper_1h7hr_8{min-height:40px}._search-input--size-medium_1h7hr_116 ._search-input__inner_1h7hr_55{padding:var(--spacing-s) var(--spacing-l)}._search-input--size-medium_1h7hr_116 ._search-input__input_1h7hr_18{font-size:var(--font-size-100);line-height:var(--line-height-100)}._search-input--size-medium_1h7hr_116 ._search-input__label_1h7hr_28{font-size:var(--font-size-100);left:var(--spacing-m)}._search-input--size-medium_1h7hr_116._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--size-large_1h7hr_136 ._search-input__wrapper_1h7hr_8{min-height:48px}._search-input--size-large_1h7hr_136 ._search-input__inner_1h7hr_55{padding:var(--spacing-m) var(--spacing-l)}._search-input--size-large_1h7hr_136 ._search-input__input_1h7hr_18{font-size:var(--font-size-200);line-height:var(--line-height-200)}._search-input--size-large_1h7hr_136 ._search-input__label_1h7hr_28{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._search-input--size-large_1h7hr_136._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--has-leading-icon_1h7hr_157 ._search-input__label_1h7hr_28{left:28px}._search-input--has-leading-icon_1h7hr_157._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{left:var(--spacing-xs)}._search-input--has-leading-icon_1h7hr_157._search-input--size-medium_1h7hr_116 ._search-input__label_1h7hr_28{left:36px}._search-input--has-leading-icon_1h7hr_157._search-input--size-medium_1h7hr_116._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{left:var(--spacing-m)}._search-input--has-leading-icon_1h7hr_157._search-input--size-large_1h7hr_136 ._search-input__label_1h7hr_28{left:40px}._search-input--has-leading-icon_1h7hr_157._search-input--size-large_1h7hr_136._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{left:var(--spacing-m)}._search-input_1h7hr_2:has(._search-input__input_1h7hr_18:focus-visible) ._search-input__label_1h7hr_28{color:var(--button-bg)}._search-input_1h7hr_2:has(._search-input__label_1h7hr_28):not(._search-input--label-floated_1h7hr_48) ._search-input__input_1h7hr_18::placeholder{color:transparent}._search-input--invalid_1h7hr_181 ._search-input__wrapper_1h7hr_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._search-input--invalid_1h7hr_181:has(._search-input__input_1h7hr_18:focus-visible) ._search-input__wrapper_1h7hr_8{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_1h7hr_181 ._search-input__label_1h7hr_28{color:var(--error-text, var(--color-danger))}._search-input--invalid_1h7hr_181:has(._search-input__input_1h7hr_18:focus-visible) ._search-input__label_1h7hr_28{color:var(--error-text, var(--color-danger))}

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

@@ -0,0 +1,35 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { FieldMessageTone } from '../field-message/FieldMessage';
+import { BuiltInButtonProps } from '../../utils/props';
+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. */
+    size?: SearchInputSize;
+    /**
+     * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).
+     * Defaults to error tone (invalid chrome) when set without `messageTone`.
+     */
+    message?: ReactNode;
+    /** Visual tone for `message`. Default: `error` when `message` is set. */
+    messageTone?: FieldMessageTone;
+    /** 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
+ * switcher, member picker, file finder. They look like a text input with a leading magnifier
+ * so the affordance is obvious before the user reads a single word.
+ */
+declare const SearchInput: import('react').ForwardRefExoticComponent<SearchInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default SearchInput;
+//# sourceMappingURL=SearchInput.d.ts.map

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

@@ -0,0 +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;AAcf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,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,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,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,+GA2KhB,CAAC;AAEF,eAAe,WAAW,CAAC"}