@mattermost/compass-ui 0.1.0-alpha.0 → 0.1.0-alpha.10

package/dist/components/global-header/GlobalHeader.js

@@ -0,0 +1,157 @@
+import { jsxs as o, jsx as a, Fragment as b } from "react/jsx-runtime";
+import __g from "@mattermost/compass-icons/components/products.js";const g=__g&&__g.default?__g.default:__g;
+import __f from "@mattermost/compass-icons/components/product-channels.js";const f=__f&&__f.default?__f.default:__f;
+import ___ from "@mattermost/compass-icons/components/product-playbooks.js";const _=___&&___.default?___.default:___;
+import __y from "@mattermost/compass-icons/components/product-boards.js";const y=__y&&__y.default?__y.default:__y;
+import __I from "@mattermost/compass-icons/components/arrow-left.js";const I=__I&&__I.default?__I.default:__I;
+import __N from "@mattermost/compass-icons/components/arrow-right.js";const N=__N&&__N.default?__N.default:__N;
+import __v from "@mattermost/compass-icons/components/magnify.js";const v=__v&&__v.default?__v.default:__v;
+import __i from "@mattermost/compass-icons/components/help-circle-outline.js";const i=__i&&__i.default?__i.default:__i;
+import __L from "@mattermost/compass-icons/components/cog-outline.js";const L=__L&&__L.default?__L.default:__L;
+import __k from "@mattermost/compass-icons/components/at.js";const k=__k&&__k.default?__k.default:__k;
+import __B from "@mattermost/compass-icons/components/bookmark-outline.js";const B=__B&&__B.default?__B.default:__B;
+import __P from "@mattermost/compass-icons/components/checkbox-multiple-marked-outline.js";const P=__P&&__P.default?__P.default:__P;
+import C from "../button/Button.js";
+import t from "../icon/Icon.js";
+import O from "../icon-button/IconButton.js";
+import z from "../user-avatar/UserAvatar.js";
+import e from "./GlobalHeader.module.scss.js";
+const A = {
+  channels: f,
+  playbooks: _,
+  boards: y
+}, w = {
+  channels: "Channels",
+  playbooks: "Playbooks",
+  boards: "Boards"
+};
+function r({
+  ariaLabel: n,
+  glyph: l
+}) {
+  return /* @__PURE__ */ a(
+    O,
+    {
+      "aria-label": n,
+      size: "small",
+      padding: "compact",
+      style: "inverted",
+      icon: /* @__PURE__ */ a(t, { size: "16", glyph: l })
+    }
+  );
+}
+function x({ product: n }) {
+  const l = A[n];
+  return /* @__PURE__ */ o("div", { className: e["global-header__product"], children: [
+    /* @__PURE__ */ a("span", { className: e["global-header__product-icon"], "aria-hidden": !0, children: /* @__PURE__ */ a(t, { size: "20", glyph: /* @__PURE__ */ a(l, {}) }) }),
+    /* @__PURE__ */ a("span", { className: e["global-header__product-name"], children: w[n] })
+  ] });
+}
+function U() {
+  return /* @__PURE__ */ o("div", { className: e["global-header__navigator"], children: [
+    /* @__PURE__ */ a(r, { ariaLabel: "Back", glyph: /* @__PURE__ */ a(I, {}) }),
+    /* @__PURE__ */ a(r, { ariaLabel: "Forward", glyph: /* @__PURE__ */ a(N, {}) })
+  ] });
+}
+function Z({
+  className: n = "",
+  product: l = "channels",
+  showChannelsBranding: c = !0,
+  showUpgradeButton: d = !1,
+  userAvatarSrc: h,
+  userAvatarAlt: m = "User"
+}) {
+  const s = l === "channels", p = s ? c : !0, u = [
+    e["global-header"],
+    s ? e["global-header--channels"] : e["global-header--product-only"],
+    n
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("header", { className: u, children: [
+    /* @__PURE__ */ o("div", { className: e["global-header__left"], children: [
+      /* @__PURE__ */ a(
+        r,
+        {
+          ariaLabel: "Product switcher",
+          glyph: /* @__PURE__ */ a(g, {})
+        }
+      ),
+      p && /* @__PURE__ */ a(x, { product: l }),
+      /* @__PURE__ */ a(U, {})
+    ] }),
+    s && /* @__PURE__ */ o("div", { className: e["global-header__center"], children: [
+      /* @__PURE__ */ o("div", { className: e["global-header__search"], children: [
+        /* @__PURE__ */ a("span", { className: e["global-header__search-icon"], "aria-hidden": !0, children: /* @__PURE__ */ a(t, { size: "12", glyph: /* @__PURE__ */ a(v, {}) }) }),
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "search",
+            className: e["global-header__search-input"],
+            placeholder: "Search",
+            "aria-label": "Search"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(
+        r,
+        {
+          ariaLabel: "Help",
+          glyph: /* @__PURE__ */ a(i, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("div", { className: e["global-header__right"], children: [
+      d && /* @__PURE__ */ a(C, { emphasis: "primary", size: "x-small", children: "Upgrade" }),
+      l === "playbooks" && /* @__PURE__ */ a(
+        r,
+        {
+          ariaLabel: "Tasks",
+          glyph: /* @__PURE__ */ a(P, {})
+        }
+      ),
+      s && /* @__PURE__ */ o(b, { children: [
+        /* @__PURE__ */ a(
+          r,
+          {
+            ariaLabel: "Recent mentions",
+            glyph: /* @__PURE__ */ a(k, {})
+          }
+        ),
+        /* @__PURE__ */ a(
+          r,
+          {
+            ariaLabel: "Saved messages",
+            glyph: /* @__PURE__ */ a(B, {})
+          }
+        )
+      ] }),
+      !s && /* @__PURE__ */ a(
+        r,
+        {
+          ariaLabel: "Help",
+          glyph: /* @__PURE__ */ a(i, {})
+        }
+      ),
+      /* @__PURE__ */ a(r, { ariaLabel: "Settings", glyph: /* @__PURE__ */ a(L, {}) }),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          className: e["global-header__account"],
+          "aria-label": "Account menu",
+          children: /* @__PURE__ */ a(
+            z,
+            {
+              src: h,
+              alt: m,
+              size: "24",
+              status: !0
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Z as default
+};
+//# sourceMappingURL=GlobalHeader.js.map

package/dist/components/global-header/GlobalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalHeader.js","sources":["../../../src/components/global-header/GlobalHeader.tsx"],"sourcesContent":["import ProductsIcon from '@mattermost/compass-icons/components/products';\nimport ProductChannelsIcon from '@mattermost/compass-icons/components/product-channels';\nimport ProductPlaybooksIcon from '@mattermost/compass-icons/components/product-playbooks';\nimport ProductBoardsIcon from '@mattermost/compass-icons/components/product-boards';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport ArrowRightIcon from '@mattermost/compass-icons/components/arrow-right';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport HelpCircleOutlineIcon from '@mattermost/compass-icons/components/help-circle-outline';\nimport CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';\nimport AtIcon from '@mattermost/compass-icons/components/at';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport CheckboxMultipleMarkedOutlineIcon from '@mattermost/compass-icons/components/checkbox-multiple-marked-outline';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { ComponentType } from 'react';\nimport styles from './GlobalHeader.module.scss';\n\nexport type GlobalHeaderProduct = 'channels' | 'playbooks' | 'boards';\n\nexport interface GlobalHeaderProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Product context. Controls branding + right-side controls. Default: Channels. */\n  product?: GlobalHeaderProduct;\n  /** When true and product is Channels, shows the Channels product icon + label. */\n  showChannelsBranding?: boolean;\n  /** When true, shows the Upgrade button in the right controls. */\n  showUpgradeButton?: boolean;\n  /** URL for the signed-in user avatar. Omit for initials fallback. */\n  userAvatarSrc?: string;\n  /** Alt text for the signed-in user avatar. */\n  userAvatarAlt?: string;\n}\n\nconst PRODUCT_ICON: Record<\n  GlobalHeaderProduct,\n  ComponentType<{ size?: number }>\n> = {\n  channels: ProductChannelsIcon,\n  playbooks: ProductPlaybooksIcon,\n  boards: ProductBoardsIcon,\n};\n\nconst PRODUCT_LABEL: Record<GlobalHeaderProduct, string> = {\n  channels: 'Channels',\n  playbooks: 'Playbooks',\n  boards: 'Boards',\n};\n\nfunction InvertedIconButton({\n  ariaLabel,\n  glyph,\n}: {\n  ariaLabel: string;\n  glyph: React.ReactNode;\n}) {\n  return (\n    <IconButton\n      aria-label={ariaLabel}\n      size=\"small\"\n      padding=\"compact\"\n      style=\"inverted\"\n      icon={<Icon size=\"16\" glyph={glyph} />}\n    />\n  );\n}\n\nfunction ProductBrand({ product }: { product: GlobalHeaderProduct }) {\n  const ProductIcon = PRODUCT_ICON[product];\n  return (\n    <div className={styles['global-header__product']}>\n      <span className={styles['global-header__product-icon']} aria-hidden>\n        <Icon size=\"20\" glyph={<ProductIcon />} />\n      </span>\n      <span className={styles['global-header__product-name']}>\n        {PRODUCT_LABEL[product]}\n      </span>\n    </div>\n  );\n}\n\nfunction Navigator() {\n  return (\n    <div className={styles['global-header__navigator']}>\n      <InvertedIconButton ariaLabel=\"Back\" glyph={<ArrowLeftIcon />} />\n      <InvertedIconButton ariaLabel=\"Forward\" glyph={<ArrowRightIcon />} />\n    </div>\n  );\n}\n\n/**\n * Global Header pattern — top bar spanning the full viewport that contains\n * the product switcher, product branding, navigator, and session-level\n * controls (search, mentions, saved, settings, account).\n *\n * Layout uses a three-column CSS grid for Channels (left | centered search + help | session)\n * so session controls stay anchored to the trailing edge. Playbooks/Boards omit the center\n * column and use two tracks (left product block | session).\n *\n * Matches Figma Global Header v1.2.1 (node 613:4135).\n */\nexport default function GlobalHeader({\n  className = '',\n  product = 'channels',\n  showChannelsBranding = true,\n  showUpgradeButton = false,\n  userAvatarSrc,\n  userAvatarAlt = 'User',\n}: GlobalHeaderProps) {\n  const isChannels = product === 'channels';\n  const showBrand = isChannels ? showChannelsBranding : true;\n\n  const rootClass = [\n    styles['global-header'],\n    isChannels\n      ? styles['global-header--channels']\n      : styles['global-header--product-only'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <header className={rootClass}>\n      <div className={styles['global-header__left']}>\n        <InvertedIconButton\n          ariaLabel=\"Product switcher\"\n          glyph={<ProductsIcon />}\n        />\n        {showBrand && <ProductBrand product={product} />}\n        <Navigator />\n      </div>\n\n      {isChannels && (\n        <div className={styles['global-header__center']}>\n          <div className={styles['global-header__search']}>\n            <span className={styles['global-header__search-icon']} aria-hidden>\n              <Icon size=\"12\" glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              type=\"search\"\n              className={styles['global-header__search-input']}\n              placeholder=\"Search\"\n              aria-label=\"Search\"\n            />\n          </div>\n          <InvertedIconButton\n            ariaLabel=\"Help\"\n            glyph={<HelpCircleOutlineIcon />}\n          />\n        </div>\n      )}\n\n      <div className={styles['global-header__right']}>\n        {showUpgradeButton && (\n          <Button emphasis=\"primary\" size=\"x-small\">\n            Upgrade\n          </Button>\n        )}\n        {product === 'playbooks' && (\n          <InvertedIconButton\n            ariaLabel=\"Tasks\"\n            glyph={<CheckboxMultipleMarkedOutlineIcon />}\n          />\n        )}\n        {isChannels && (\n          <>\n            <InvertedIconButton\n              ariaLabel=\"Recent mentions\"\n              glyph={<AtIcon />}\n            />\n            <InvertedIconButton\n              ariaLabel=\"Saved messages\"\n              glyph={<BookmarkOutlineIcon />}\n            />\n          </>\n        )}\n        {!isChannels && (\n          <InvertedIconButton\n            ariaLabel=\"Help\"\n            glyph={<HelpCircleOutlineIcon />}\n          />\n        )}\n        <InvertedIconButton ariaLabel=\"Settings\" glyph={<CogOutlineIcon />} />\n        <button\n          className={styles['global-header__account']}\n          aria-label=\"Account menu\"\n        >\n          <UserAvatar\n            src={userAvatarSrc}\n            alt={userAvatarAlt}\n            size=\"24\"\n            status\n          />\n        </button>\n      </div>\n    </header>\n  );\n}\n"],"names":["PRODUCT_ICON","ProductChannelsIcon","ProductPlaybooksIcon","ProductBoardsIcon","PRODUCT_LABEL","InvertedIconButton","ariaLabel","glyph","jsx","IconButton","Icon","ProductBrand","product","ProductIcon","jsxs","styles","Navigator","ArrowLeftIcon","ArrowRightIcon","GlobalHeader","className","showChannelsBranding","showUpgradeButton","userAvatarSrc","userAvatarAlt","isChannels","showBrand","rootClass","ProductsIcon","MagnifyIcon","HelpCircleOutlineIcon","Button","CheckboxMultipleMarkedOutlineIcon","Fragment","AtIcon","BookmarkOutlineIcon","CogOutlineIcon","UserAvatar"],"mappings":"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"}

package/dist/components/global-header/GlobalHeader.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./GlobalHeader.css');const a={"global-header":"_global-header_11raj_2","global-header--channels":"_global-header--channels_11raj_13","global-header--product-only":"_global-header--product-only_11raj_16","global-header__left":"_global-header__left_11raj_19","global-header__product":"_global-header__product_11raj_28","global-header__product-icon":"_global-header__product-icon_11raj_34","global-header__product-name":"_global-header__product-name_11raj_42","global-header__navigator":"_global-header__navigator_11raj_51","global-header__center":"_global-header__center_11raj_56","global-header__search":"_global-header__search_11raj_68","global-header__search-icon":"_global-header__search-icon_11raj_83","global-header__search-input":"_global-header__search-input_11raj_89","global-header__right":"_global-header__right_11raj_109","global-header__account":"_global-header__account_11raj_124"};exports.default=a;
+//# sourceMappingURL=GlobalHeader.module.scss.cjs.map

package/dist/components/global-header/GlobalHeader.module.scss.cjs.map

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

package/dist/components/global-header/GlobalHeader.module.scss.js

@@ -0,0 +1,20 @@
+import './GlobalHeader.css';const a = {
+  "global-header": "_global-header_11raj_2",
+  "global-header--channels": "_global-header--channels_11raj_13",
+  "global-header--product-only": "_global-header--product-only_11raj_16",
+  "global-header__left": "_global-header__left_11raj_19",
+  "global-header__product": "_global-header__product_11raj_28",
+  "global-header__product-icon": "_global-header__product-icon_11raj_34",
+  "global-header__product-name": "_global-header__product-name_11raj_42",
+  "global-header__navigator": "_global-header__navigator_11raj_51",
+  "global-header__center": "_global-header__center_11raj_56",
+  "global-header__search": "_global-header__search_11raj_68",
+  "global-header__search-icon": "_global-header__search-icon_11raj_83",
+  "global-header__search-input": "_global-header__search-input_11raj_89",
+  "global-header__right": "_global-header__right_11raj_109",
+  "global-header__account": "_global-header__account_11raj_124"
+};
+export {
+  a as default
+};
+//# sourceMappingURL=GlobalHeader.module.scss.js.map

package/dist/components/global-header/GlobalHeader.module.scss.js.map

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

package/dist/components/global-header/index.cjs

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

package/dist/components/global-header/index.cjs.map

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

package/dist/components/global-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/global-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/global-header/index.js

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

package/dist/components/global-header/index.js.map

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

package/dist/components/help-menu/HelpMenu.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__n=require("@mattermost/compass-icons/components/alert-outline.js"),n=__n?.default??__n,__a=require("@mattermost/compass-icons/components/file-text-outline.js"),a=__a?.default??__a,__o=require("@mattermost/compass-icons/components/help-circle-outline.js"),o=__o?.default??__o,__d=require("@mattermost/compass-icons/components/keyboard-outline.js"),d=__d?.default??__d,__c=require("@mattermost/compass-icons/components/lightbulb-outline.js"),c=__c?.default??__c,l=require("../icon/Icon.cjs"),u=require("../menu-item/MenuItem.cjs"),s=require("../popover-menu/PopoverMenu.cjs");function j({className:t="",style:i,...r}){return e.jsx(s.default,{className:t,style:i,...r,children:e.jsxs(s.PopoverMenuGroup,{children:[e.jsx(u.default,{label:"Mattermost user guide",leadingVisual:e.jsx(l.default,{glyph:e.jsx(a,{}),size:"16"})}),e.jsx(u.default,{label:"Training resources",leadingVisual:e.jsx(l.default,{glyph:e.jsx(c,{}),size:"16"})}),e.jsx(u.default,{label:"Ask the community",leadingVisual:e.jsx(l.default,{glyph:e.jsx(o,{}),size:"16"})}),e.jsx(u.default,{label:"Report a problem",leadingVisual:e.jsx(l.default,{glyph:e.jsx(n,{}),size:"16"})}),e.jsx(u.default,{label:"Keyboard shortcuts",leadingVisual:e.jsx(l.default,{glyph:e.jsx(d,{}),size:"16"})})]})})}exports.default=j;
+//# sourceMappingURL=HelpMenu.cjs.map

package/dist/components/help-menu/HelpMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpMenu.cjs","sources":["../../../src/components/help-menu/HelpMenu.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport FileTextOutlineIcon from '@mattermost/compass-icons/components/file-text-outline';\nimport HelpCircleOutlineIcon from '@mattermost/compass-icons/components/help-circle-outline';\nimport KeyboardOutlineIcon from '@mattermost/compass-icons/components/keyboard-outline';\nimport LightbulbOutlineIcon from '@mattermost/compass-icons/components/lightbulb-outline';\nimport Icon from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n  PopoverMenuGroup,\n} from '@/components/popover-menu/PopoverMenu';\n\nexport interface HelpMenuProps extends HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Global header help menu — docs, community, and shortcuts.\n */\nexport default function HelpMenu({\n  className = '',\n  style,\n  ...rest\n}: HelpMenuProps) {\n  return (\n    <PopoverMenu\n      className={className}\n      style={style}\n      {...rest}\n    >\n      <PopoverMenuGroup>\n        <MenuItem\n          label=\"Mattermost user guide\"\n          leadingVisual={<Icon glyph={<FileTextOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Training resources\"\n          leadingVisual={<Icon glyph={<LightbulbOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Ask the community\"\n          leadingVisual={<Icon glyph={<HelpCircleOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Report a problem\"\n          leadingVisual={<Icon glyph={<AlertOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Keyboard shortcuts\"\n          leadingVisual={<Icon glyph={<KeyboardOutlineIcon />} size=\"16\" />}\n        />\n      </PopoverMenuGroup>\n    </PopoverMenu>\n  );\n}\n"],"names":["HelpMenu","className","style","rest","jsx","PopoverMenu","PopoverMenuGroup","MenuItem","Icon","FileTextOutlineIcon","LightbulbOutlineIcon","HelpCircleOutlineIcon","AlertOutlineIcon","KeyboardOutlineIcon"],"mappings":"klBAiBA,SAAwBA,EAAS,CAC/B,UAAAC,EAAY,GACZ,MAAAC,EACA,GAAGC,CACL,EAAkB,CAChB,OACEC,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAAJ,EACA,MAAAC,EACC,GAAGC,EAEJ,gBAACG,mBAAA,CACC,SAAA,CAAAF,EAAAA,IAACG,EAAAA,QAAA,CACC,MAAM,wBACN,oBAAgBC,EAAAA,QAAA,CAAK,YAAQC,EAAA,CAAA,CAAoB,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,EAEjEL,EAAAA,IAACG,EAAAA,QAAA,CACC,MAAM,qBACN,oBAAgBC,EAAAA,QAAA,CAAK,YAAQE,EAAA,CAAA,CAAqB,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,EAElEN,EAAAA,IAACG,EAAAA,QAAA,CACC,MAAM,oBACN,oBAAgBC,EAAAA,QAAA,CAAK,YAAQG,EAAA,CAAA,CAAsB,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,EAEnEP,EAAAA,IAACG,EAAAA,QAAA,CACC,MAAM,mBACN,oBAAgBC,EAAAA,QAAA,CAAK,YAAQI,EAAA,CAAA,CAAiB,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,EAE9DR,EAAAA,IAACG,EAAAA,QAAA,CACC,MAAM,qBACN,oBAAgBC,EAAAA,QAAA,CAAK,YAAQK,EAAA,CAAA,CAAoB,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,CACjE,CAAA,CACF,CAAA,CAAA,CAGN"}

package/dist/components/help-menu/HelpMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpMenu.d.ts","sourceRoot":"","sources":["../../../src/components/help-menu/HelpMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAY5C,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;CAAG;AAExE;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,SAAc,EACd,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,2CA+Bf"}

package/dist/components/help-menu/HelpMenu.js

@@ -0,0 +1,64 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import __u from "@mattermost/compass-icons/components/alert-outline.js";const u=__u&&__u.default?__u.default:__u;
+import __m from "@mattermost/compass-icons/components/file-text-outline.js";const m=__m&&__m.default?__m.default:__m;
+import __a from "@mattermost/compass-icons/components/help-circle-outline.js";const a=__a&&__a.default?__a.default:__a;
+import __p from "@mattermost/compass-icons/components/keyboard-outline.js";const p=__p&&__p.default?__p.default:__p;
+import __s from "@mattermost/compass-icons/components/lightbulb-outline.js";const s=__s&&__s.default?__s.default:__s;
+import l from "../icon/Icon.js";
+import i from "../menu-item/MenuItem.js";
+import c, { PopoverMenuGroup as g } from "../popover-menu/PopoverMenu.js";
+function V({
+  className: o = "",
+  style: r,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    c,
+    {
+      className: o,
+      style: r,
+      ...t,
+      children: /* @__PURE__ */ n(g, { children: [
+        /* @__PURE__ */ e(
+          i,
+          {
+            label: "Mattermost user guide",
+            leadingVisual: /* @__PURE__ */ e(l, { glyph: /* @__PURE__ */ e(m, {}), size: "16" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            label: "Training resources",
+            leadingVisual: /* @__PURE__ */ e(l, { glyph: /* @__PURE__ */ e(s, {}), size: "16" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            label: "Ask the community",
+            leadingVisual: /* @__PURE__ */ e(l, { glyph: /* @__PURE__ */ e(a, {}), size: "16" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            label: "Report a problem",
+            leadingVisual: /* @__PURE__ */ e(l, { glyph: /* @__PURE__ */ e(u, {}), size: "16" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            label: "Keyboard shortcuts",
+            leadingVisual: /* @__PURE__ */ e(l, { glyph: /* @__PURE__ */ e(p, {}), size: "16" })
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  V as default
+};
+//# sourceMappingURL=HelpMenu.js.map

package/dist/components/help-menu/HelpMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpMenu.js","sources":["../../../src/components/help-menu/HelpMenu.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport FileTextOutlineIcon from '@mattermost/compass-icons/components/file-text-outline';\nimport HelpCircleOutlineIcon from '@mattermost/compass-icons/components/help-circle-outline';\nimport KeyboardOutlineIcon from '@mattermost/compass-icons/components/keyboard-outline';\nimport LightbulbOutlineIcon from '@mattermost/compass-icons/components/lightbulb-outline';\nimport Icon from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n  PopoverMenuGroup,\n} from '@/components/popover-menu/PopoverMenu';\n\nexport interface HelpMenuProps extends HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Global header help menu — docs, community, and shortcuts.\n */\nexport default function HelpMenu({\n  className = '',\n  style,\n  ...rest\n}: HelpMenuProps) {\n  return (\n    <PopoverMenu\n      className={className}\n      style={style}\n      {...rest}\n    >\n      <PopoverMenuGroup>\n        <MenuItem\n          label=\"Mattermost user guide\"\n          leadingVisual={<Icon glyph={<FileTextOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Training resources\"\n          leadingVisual={<Icon glyph={<LightbulbOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Ask the community\"\n          leadingVisual={<Icon glyph={<HelpCircleOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Report a problem\"\n          leadingVisual={<Icon glyph={<AlertOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Keyboard shortcuts\"\n          leadingVisual={<Icon glyph={<KeyboardOutlineIcon />} size=\"16\" />}\n        />\n      </PopoverMenuGroup>\n    </PopoverMenu>\n  );\n}\n"],"names":["HelpMenu","className","style","rest","jsx","PopoverMenu","PopoverMenuGroup","MenuItem","Icon","FileTextOutlineIcon","LightbulbOutlineIcon","HelpCircleOutlineIcon","AlertOutlineIcon","KeyboardOutlineIcon"],"mappings":";;;;;;;;;AAiBA,SAAwBA,EAAS;AAAA,EAC/B,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAJ;AAAA,MACA,OAAAC;AAAA,MACC,GAAGC;AAAA,MAEJ,4BAACG,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,iCAAgBC,GAAA,EAAK,yBAAQC,GAAA,CAAA,CAAoB,GAAI,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjE,gBAAAL;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,iCAAgBC,GAAA,EAAK,yBAAQE,GAAA,CAAA,CAAqB,GAAI,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAElE,gBAAAN;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,iCAAgBC,GAAA,EAAK,yBAAQG,GAAA,CAAA,CAAsB,GAAI,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnE,gBAAAP;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,iCAAgBC,GAAA,EAAK,yBAAQI,GAAA,CAAA,CAAiB,GAAI,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAE9D,gBAAAR;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,iCAAgBC,GAAA,EAAK,yBAAQK,GAAA,CAAA,CAAoB,GAAI,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACjE,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/help-menu/index.cjs

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

package/dist/components/help-menu/index.cjs.map

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

package/dist/components/help-menu/index.d.ts.map

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

package/dist/components/help-menu/index.js

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

package/dist/components/help-menu/index.js.map

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

package/dist/components/icon/Icon.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),n=require("react"),___=require("@mattermost/compass-icons/components/emoticon-happy-outline.js"),_=___?.default??___,e=require("./Icon.module.scss.cjs"),l={10:12,12:14,16:18,20:24,24:28,28:32,32:36,40:48,52:60,64:72,104:120},u=n.createContext(null),a=()=>n.useContext(u),C={10:e.default["icon--size-10"],12:e.default["icon--size-12"],16:e.default["icon--size-16"],20:e.default["icon--size-20"],24:e.default["icon--size-24"],28:e.default["icon--size-28"],32:e.default["icon--size-32"],40:e.default["icon--size-40"],52:e.default["icon--size-52"],64:e.default["icon--size-64"],104:e.default["icon--size-104"]};function I({className:r="",glyph:t=null,size:d}){var c;const f=(c=a())==null?void 0:c.size,i=d??f??"24",z=C[i],S=[e.default.icon,z,r].filter(Boolean).join(" "),s=l[i],x=t==null?o.jsx(_,{size:s,"aria-hidden":!0}):n.isValidElement(t)?n.cloneElement(t,{size:s}):t;return o.jsx("div",{className:S,"aria-hidden":!0,children:o.jsx("div",{className:e.default["icon__glyph-area"],children:x})})}exports.IconSlotContext=u;exports.SVG_SIZE_MAP=l;exports.default=I;exports.useIconSlotContext=a;
+//# sourceMappingURL=Icon.cjs.map

package/dist/components/icon/Icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.cjs","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, createContext, useContext } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport styles from './Icon.module.scss';\n\nexport type IconSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\n/**\n * Maps container size → SVG render size. Icons bleed slightly past the container\n * to strip the built-in clear-space padding from compass-icons SVGs.\n * Pass SVG_SIZE_MAP[size] as the `size` prop on any compass-icons component\n * used as a glyph (e.g. <GlobeIcon size={SVG_SIZE_MAP['24']} />).\n */\nexport const SVG_SIZE_MAP: Record<IconSize, number> = {\n  '10': 12,\n  '12': 14,\n  '16': 18,\n  '20': 24,\n  '24': 28,\n  '28': 32,\n  '32': 36,\n  '40': 48,\n  '52': 60,\n  '64': 72,\n  '104': 120,\n};\n\n/**\n * Context published by components that host an icon slot (Button, IconButton,\n * MenuItem, etc.). Icon reads this as a fallback when no `size` prop is passed,\n * so consumers can pass `<Icon glyph={<X />} />` without specifying a size.\n */\nexport const IconSlotContext = createContext<{ size: IconSize } | null>(null);\nexport const useIconSlotContext = () => useContext(IconSlotContext);\n\nexport interface IconProps {\n  /** Optional CSS class name applied to the container. */\n  className?: string;\n  /**\n   * Icon SVG from @mattermost/compass-icons (e.g. `<GlobeIcon />`).\n   * Icon automatically injects the correct SVG size — no need to pass a size\n   * prop on the glyph element. When omitted, shows emoticon-happy-outline.\n   */\n  glyph?: ReactNode | null;\n  /** Container size from the Mattermost icon scale. Default 24. */\n  size?: IconSize;\n}\n\nconst SIZE_CLASS_MAP: Record<IconSize, string> = {\n  '10': styles['icon--size-10'],\n  '12': styles['icon--size-12'],\n  '16': styles['icon--size-16'],\n  '20': styles['icon--size-20'],\n  '24': styles['icon--size-24'],\n  '28': styles['icon--size-28'],\n  '32': styles['icon--size-32'],\n  '40': styles['icon--size-40'],\n  '52': styles['icon--size-52'],\n  '64': styles['icon--size-64'],\n  '104': styles['icon--size-104'],\n};\n\n/**\n * Icon is the standard wrapper for any glyph from `@mattermost/compass-icons`. It enforces a\n * consistent container size, strips the package's built-in clear-space padding, and keeps\n * icons aligned with text and other icons across the system.\n */\nexport default function Icon({\n  className = '',\n  glyph = null,\n  size,\n}: IconProps) {\n  const contextSize = useIconSlotContext()?.size;\n  const resolvedSize: IconSize = size ?? contextSize ?? '24';\n  const sizeClass = SIZE_CLASS_MAP[resolvedSize];\n  const rootClass = [styles.icon, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const svgSize = SVG_SIZE_MAP[resolvedSize];\n  const glyphContent = (() => {\n    if (glyph === undefined || glyph === null) {\n      return <EmoticonHappyOutlineIcon size={svgSize} aria-hidden />;\n    }\n    // Inject the correct SVG size into the glyph so callers don't need to\n    // know about SVG_SIZE_MAP — the container size is all that's needed.\n    if (React.isValidElement(glyph)) {\n      return React.cloneElement(\n        glyph as React.ReactElement<{ size?: number }>,\n        {\n          size: svgSize,\n        },\n      );\n    }\n    return glyph;\n  })();\n\n  return (\n    <div className={rootClass} aria-hidden>\n      <div className={styles['icon__glyph-area']}>{glyphContent}</div>\n    </div>\n  );\n}\n"],"names":["SVG_SIZE_MAP","IconSlotContext","createContext","useIconSlotContext","useContext","SIZE_CLASS_MAP","styles","Icon","className","glyph","size","contextSize","_a","resolvedSize","sizeClass","rootClass","svgSize","glyphContent","jsx","EmoticonHappyOutlineIcon","React"],"mappings":"iRAuBaA,EAAyC,CACpD,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,IAAO,GACT,EAOaC,EAAkBC,EAAAA,cAAyC,IAAI,EAC/DC,EAAqB,IAAMC,EAAAA,WAAWH,CAAe,EAe5DI,EAA2C,CAC/C,GAAMC,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,IAAOA,EAAAA,QAAO,gBAAgB,CAChC,EAOA,SAAwBC,EAAK,CAC3B,UAAAC,EAAY,GACZ,MAAAC,EAAQ,KACR,KAAAC,CACF,EAAc,OACZ,MAAMC,GAAcC,EAAAT,MAAA,YAAAS,EAAsB,KACpCC,EAAyBH,GAAQC,GAAe,KAChDG,EAAYT,EAAeQ,CAAY,EACvCE,EAAY,CAACT,UAAO,KAAMQ,EAAWN,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EAELQ,EAAUhB,EAAaa,CAAY,EACnCI,EACuBR,GAAU,KAC5BS,EAAAA,IAACC,EAAA,CAAyB,KAAMH,EAAS,cAAW,GAAC,EAI1DI,EAAM,eAAeX,CAAK,EACrBW,EAAM,aACXX,EACA,CACE,KAAMO,CAAA,CACR,EAGGP,EAGT,OACES,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAW,cAAW,GACpC,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWZ,UAAO,kBAAkB,EAAI,WAAa,EAC5D,CAEJ"}

package/dist/components/icon/Icon.css

@@ -0,0 +1 @@
+._icon_1i355_2{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon__glyph-area_1i355_9{position:relative;overflow:visible;flex-shrink:0}._icon__glyph-area_1i355_9>*{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;max-width:none}._icon--size-10_1i355_22,._icon--size-10_1i355_22 ._icon__glyph-area_1i355_9{width:var(--icon-size-10);height:var(--icon-size-10)}._icon--size-12_1i355_30,._icon--size-12_1i355_30 ._icon__glyph-area_1i355_9{width:var(--icon-size-12);height:var(--icon-size-12)}._icon--size-16_1i355_38,._icon--size-16_1i355_38 ._icon__glyph-area_1i355_9{width:var(--icon-size-16);height:var(--icon-size-16)}._icon--size-20_1i355_46,._icon--size-20_1i355_46 ._icon__glyph-area_1i355_9{width:var(--icon-size-20);height:var(--icon-size-20)}._icon--size-24_1i355_54,._icon--size-24_1i355_54 ._icon__glyph-area_1i355_9{width:var(--icon-size-24);height:var(--icon-size-24)}._icon--size-28_1i355_62,._icon--size-28_1i355_62 ._icon__glyph-area_1i355_9{width:var(--icon-size-28);height:var(--icon-size-28)}._icon--size-32_1i355_70,._icon--size-32_1i355_70 ._icon__glyph-area_1i355_9{width:var(--icon-size-32);height:var(--icon-size-32)}._icon--size-40_1i355_78,._icon--size-40_1i355_78 ._icon__glyph-area_1i355_9{width:var(--icon-size-40);height:var(--icon-size-40)}._icon--size-52_1i355_86,._icon--size-52_1i355_86 ._icon__glyph-area_1i355_9{width:var(--icon-size-52);height:var(--icon-size-52)}._icon--size-64_1i355_94,._icon--size-64_1i355_94 ._icon__glyph-area_1i355_9{width:var(--icon-size-64);height:var(--icon-size-64)}._icon--size-104_1i355_102,._icon--size-104_1i355_102 ._icon__glyph-area_1i355_9{width:var(--icon-size-104);height:var(--icon-size-104)}

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,39 @@
+import { default as React, ReactNode } from 'react';
+export type IconSize = '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '52' | '64' | '104';
+/**
+ * Maps container size → SVG render size. Icons bleed slightly past the container
+ * to strip the built-in clear-space padding from compass-icons SVGs.
+ * Pass SVG_SIZE_MAP[size] as the `size` prop on any compass-icons component
+ * used as a glyph (e.g. <GlobeIcon size={SVG_SIZE_MAP['24']} />).
+ */
+export declare const SVG_SIZE_MAP: Record<IconSize, number>;
+/**
+ * Context published by components that host an icon slot (Button, IconButton,
+ * MenuItem, etc.). Icon reads this as a fallback when no `size` prop is passed,
+ * so consumers can pass `<Icon glyph={<X />} />` without specifying a size.
+ */
+export declare const IconSlotContext: React.Context<{
+    size: IconSize;
+} | null>;
+export declare const useIconSlotContext: () => {
+    size: IconSize;
+} | null;
+export interface IconProps {
+    /** Optional CSS class name applied to the container. */
+    className?: string;
+    /**
+     * Icon SVG from @mattermost/compass-icons (e.g. `<GlobeIcon />`).
+     * Icon automatically injects the correct SVG size — no need to pass a size
+     * prop on the glyph element. When omitted, shows emoticon-happy-outline.
+     */
+    glyph?: ReactNode | null;
+    /** Container size from the Mattermost icon scale. Default 24. */
+    size?: IconSize;
+}
+/**
+ * Icon is the standard wrapper for any glyph from `@mattermost/compass-icons`. It enforces a
+ * consistent container size, strips the package's built-in clear-space padding, and keeps
+ * icons aligned with text and other icons across the system.
+ */
+export default function Icon({ className, glyph, size, }: IconProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAA6B,MAAM,OAAO,CAAC;AAIzE,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAC;AAEV;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAYjD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe;UAAyB,QAAQ;SAAgB,CAAC;AAC9E,eAAO,MAAM,kBAAkB;UADsB,QAAQ;QACM,CAAC;AAEpE,MAAM,WAAW,SAAS;IACxB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,iEAAiE;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAgBD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,SAAc,EACd,KAAY,EACZ,IAAI,GACL,EAAE,SAAS,2CA+BX"}

package/dist/components/icon/Icon.js

@@ -0,0 +1,50 @@
+import { jsx as n } from "react/jsx-runtime";
+import c, { createContext as m, useContext as f } from "react";
+import __S from "@mattermost/compass-icons/components/emoticon-happy-outline.js";const S=__S&&__S.default?__S.default:__S;
+import e from "./Icon.module.scss.js";
+const C = {
+  10: 12,
+  12: 14,
+  16: 18,
+  20: 24,
+  24: 28,
+  28: 32,
+  32: 36,
+  40: 48,
+  52: 60,
+  64: 72,
+  104: 120
+}, _ = m(null), x = () => f(_), I = {
+  10: e["icon--size-10"],
+  12: e["icon--size-12"],
+  16: e["icon--size-16"],
+  20: e["icon--size-20"],
+  24: e["icon--size-24"],
+  28: e["icon--size-28"],
+  32: e["icon--size-32"],
+  40: e["icon--size-40"],
+  52: e["icon--size-52"],
+  64: e["icon--size-64"],
+  104: e["icon--size-104"]
+};
+function h({
+  className: r = "",
+  glyph: o = null,
+  size: l
+}) {
+  var s;
+  const a = (s = x()) == null ? void 0 : s.size, i = l ?? a ?? "24", z = I[i], u = [e.icon, z, r].filter(Boolean).join(" "), t = C[i], d = o == null ? /* @__PURE__ */ n(S, { size: t, "aria-hidden": !0 }) : c.isValidElement(o) ? c.cloneElement(
+    o,
+    {
+      size: t
+    }
+  ) : o;
+  return /* @__PURE__ */ n("div", { className: u, "aria-hidden": !0, children: /* @__PURE__ */ n("div", { className: e["icon__glyph-area"], children: d }) });
+}
+export {
+  _ as IconSlotContext,
+  C as SVG_SIZE_MAP,
+  h as default,
+  x as useIconSlotContext
+};
+//# sourceMappingURL=Icon.js.map

package/dist/components/icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, createContext, useContext } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport styles from './Icon.module.scss';\n\nexport type IconSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\n/**\n * Maps container size → SVG render size. Icons bleed slightly past the container\n * to strip the built-in clear-space padding from compass-icons SVGs.\n * Pass SVG_SIZE_MAP[size] as the `size` prop on any compass-icons component\n * used as a glyph (e.g. <GlobeIcon size={SVG_SIZE_MAP['24']} />).\n */\nexport const SVG_SIZE_MAP: Record<IconSize, number> = {\n  '10': 12,\n  '12': 14,\n  '16': 18,\n  '20': 24,\n  '24': 28,\n  '28': 32,\n  '32': 36,\n  '40': 48,\n  '52': 60,\n  '64': 72,\n  '104': 120,\n};\n\n/**\n * Context published by components that host an icon slot (Button, IconButton,\n * MenuItem, etc.). Icon reads this as a fallback when no `size` prop is passed,\n * so consumers can pass `<Icon glyph={<X />} />` without specifying a size.\n */\nexport const IconSlotContext = createContext<{ size: IconSize } | null>(null);\nexport const useIconSlotContext = () => useContext(IconSlotContext);\n\nexport interface IconProps {\n  /** Optional CSS class name applied to the container. */\n  className?: string;\n  /**\n   * Icon SVG from @mattermost/compass-icons (e.g. `<GlobeIcon />`).\n   * Icon automatically injects the correct SVG size — no need to pass a size\n   * prop on the glyph element. When omitted, shows emoticon-happy-outline.\n   */\n  glyph?: ReactNode | null;\n  /** Container size from the Mattermost icon scale. Default 24. */\n  size?: IconSize;\n}\n\nconst SIZE_CLASS_MAP: Record<IconSize, string> = {\n  '10': styles['icon--size-10'],\n  '12': styles['icon--size-12'],\n  '16': styles['icon--size-16'],\n  '20': styles['icon--size-20'],\n  '24': styles['icon--size-24'],\n  '28': styles['icon--size-28'],\n  '32': styles['icon--size-32'],\n  '40': styles['icon--size-40'],\n  '52': styles['icon--size-52'],\n  '64': styles['icon--size-64'],\n  '104': styles['icon--size-104'],\n};\n\n/**\n * Icon is the standard wrapper for any glyph from `@mattermost/compass-icons`. It enforces a\n * consistent container size, strips the package's built-in clear-space padding, and keeps\n * icons aligned with text and other icons across the system.\n */\nexport default function Icon({\n  className = '',\n  glyph = null,\n  size,\n}: IconProps) {\n  const contextSize = useIconSlotContext()?.size;\n  const resolvedSize: IconSize = size ?? contextSize ?? '24';\n  const sizeClass = SIZE_CLASS_MAP[resolvedSize];\n  const rootClass = [styles.icon, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const svgSize = SVG_SIZE_MAP[resolvedSize];\n  const glyphContent = (() => {\n    if (glyph === undefined || glyph === null) {\n      return <EmoticonHappyOutlineIcon size={svgSize} aria-hidden />;\n    }\n    // Inject the correct SVG size into the glyph so callers don't need to\n    // know about SVG_SIZE_MAP — the container size is all that's needed.\n    if (React.isValidElement(glyph)) {\n      return React.cloneElement(\n        glyph as React.ReactElement<{ size?: number }>,\n        {\n          size: svgSize,\n        },\n      );\n    }\n    return glyph;\n  })();\n\n  return (\n    <div className={rootClass} aria-hidden>\n      <div className={styles['icon__glyph-area']}>{glyphContent}</div>\n    </div>\n  );\n}\n"],"names":["SVG_SIZE_MAP","IconSlotContext","createContext","useIconSlotContext","useContext","SIZE_CLASS_MAP","styles","Icon","className","glyph","size","contextSize","_a","resolvedSize","sizeClass","rootClass","svgSize","glyphContent","jsx","EmoticonHappyOutlineIcon","React"],"mappings":";;;;AAuBO,MAAMA,IAAyC;AAAA,EACpD,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,KAAO;AACT,GAOaC,IAAkBC,EAAyC,IAAI,GAC/DC,IAAqB,MAAMC,EAAWH,CAAe,GAe5DI,IAA2C;AAAA,EAC/C,IAAMC,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,KAAOA,EAAO,gBAAgB;AAChC;AAOA,SAAwBC,EAAK;AAAA,EAC3B,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,MAAAC;AACF,GAAc;;AACZ,QAAMC,KAAcC,IAAAT,QAAA,gBAAAS,EAAsB,MACpCC,IAAyBH,KAAQC,KAAe,MAChDG,IAAYT,EAAeQ,CAAY,GACvCE,IAAY,CAACT,EAAO,MAAMQ,GAAWN,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,GAELQ,IAAUhB,EAAaa,CAAY,GACnCI,IACuBR,KAAU,OAC5B,gBAAAS,EAACC,GAAA,EAAyB,MAAMH,GAAS,eAAW,IAAC,IAI1DI,EAAM,eAAeX,CAAK,IACrBW,EAAM;AAAA,IACXX;AAAA,IACA;AAAA,MACE,MAAMO;AAAA,IAAA;AAAA,EACR,IAGGP;AAGT,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAWH,GAAW,eAAW,IACpC,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWZ,EAAO,kBAAkB,GAAI,aAAa,GAC5D;AAEJ;"}

package/dist/components/icon/Icon.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Icon.css');const i="_icon_1i355_2",_={icon:i,"icon__glyph-area":"_icon__glyph-area_1i355_9","icon--size-10":"_icon--size-10_1i355_22","icon--size-12":"_icon--size-12_1i355_30","icon--size-16":"_icon--size-16_1i355_38","icon--size-20":"_icon--size-20_1i355_46","icon--size-24":"_icon--size-24_1i355_54","icon--size-28":"_icon--size-28_1i355_62","icon--size-32":"_icon--size-32_1i355_70","icon--size-40":"_icon--size-40_1i355_78","icon--size-52":"_icon--size-52_1i355_86","icon--size-64":"_icon--size-64_1i355_94","icon--size-104":"_icon--size-104_1i355_102"};exports.default=_;exports.icon=i;
+//# sourceMappingURL=Icon.module.scss.cjs.map

package/dist/components/icon/Icon.module.scss.cjs.map

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

package/dist/components/icon/Icon.module.scss.js

@@ -0,0 +1,20 @@
+import './Icon.css';const i = "_icon_1i355_2", _ = {
+  icon: i,
+  "icon__glyph-area": "_icon__glyph-area_1i355_9",
+  "icon--size-10": "_icon--size-10_1i355_22",
+  "icon--size-12": "_icon--size-12_1i355_30",
+  "icon--size-16": "_icon--size-16_1i355_38",
+  "icon--size-20": "_icon--size-20_1i355_46",
+  "icon--size-24": "_icon--size-24_1i355_54",
+  "icon--size-28": "_icon--size-28_1i355_62",
+  "icon--size-32": "_icon--size-32_1i355_70",
+  "icon--size-40": "_icon--size-40_1i355_78",
+  "icon--size-52": "_icon--size-52_1i355_86",
+  "icon--size-64": "_icon--size-64_1i355_94",
+  "icon--size-104": "_icon--size-104_1i355_102"
+};
+export {
+  _ as default,
+  i as icon
+};
+//# sourceMappingURL=Icon.module.scss.js.map

package/dist/components/icon/Icon.module.scss.js.map

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

package/dist/components/icon/index.cjs

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

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

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

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

@@ -0,0 +1,3 @@
+export { default as Icon, SVG_SIZE_MAP, IconSlotContext, useIconSlotContext } from './Icon';
+export type { IconProps, IconSize } from './Icon';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5F,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/icon/index.js

@@ -0,0 +1,8 @@
+import { default as e, IconSlotContext as n, SVG_SIZE_MAP as I, useIconSlotContext as S } from "./Icon.js";
+export {
+  e as Icon,
+  n as IconSlotContext,
+  I as SVG_SIZE_MAP,
+  S as useIconSlotContext
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/icon-button/IconButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),z=require("../icon/Icon.cjs"),y=require("../spinner/Spinner.cjs"),E=require("../../utils/string.cjs"),t=require("./IconButton.module.scss.cjs"),d={"x-small":"12",small:"16",medium:"20",large:"24"};function M({active:o=!1,className:r="",count:a,destructive:f=!1,icon:b,loading:n=!1,padding:v="default",rounded:C=!1,size:u="medium",style:i="default",toggled:s,unreadBadge:_=!1,disabled:m,type:p="button","aria-label":I,...N}){const j=t.default[`icon-button--size-${E.toKebab(u)}`],x=v==="compact"?t.default["icon-button--padding-compact"]:"",S=i==="inverted"?t.default["icon-button--style-inverted"]:"",h=f?t.default["icon-button--destructive"]:"",O=C?t.default["icon-button--rounded"]:"",g=s?t.default["icon-button--toggled"]:"",q=o?t.default["icon-button--active"]:"",l=a!==void 0,B=l?t.default["icon-button--has-count"]:"",T=[t.default["icon-button"],j,x,S,h,O,g,q,B,r].filter(Boolean).join(" "),c=d[u];return e.jsxs("button",{className:T,type:p,disabled:m||n,"aria-label":I,"aria-pressed":s===void 0?void 0:s,"data-active":o?"true":void 0,...N,children:[e.jsxs("span",{className:t.default["icon-button__icon-slot"],"aria-hidden":!0,children:[n?e.jsx(y.default,{size:c,inverted:i==="inverted"}):e.jsx(z.IconSlotContext.Provider,{value:{size:c},children:b}),_&&!n&&e.jsx("span",{className:t.default["icon-button__unread-badge"]})]}),l&&e.jsx("span",{className:t.default["icon-button__count"],children:a})]})}exports.ICON_BUTTON_ICON_SIZES=d;exports.default=M;
+//# sourceMappingURL=IconButton.cjs.map

package/dist/components/icon-button/IconButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.cjs","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Figma \"Style\": Default (light context) | Inverted (dark context). */\nexport type IconButtonStyle = 'default' | 'inverted';\n\nexport type IconButtonPadding = 'default' | 'compact';\n\nexport interface IconButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'style'\n> {\n  /** When true, forces the subtler pressed/active visual (lighter than toggled). */\n  active?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Numeric count shown inline after the icon. Figma: Count. */\n  count?: number;\n  /** When true, uses destructive (danger) styling. Figma: Destructive. */\n  destructive?: boolean;\n  /** Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. */\n  icon: ReactNode;\n  /** When true, shows a Spinner in place of the icon and disables the button. */\n  loading?: boolean;\n  /** Padding variant. Figma: Padding = Default | Compact. */\n  padding?: IconButtonPadding;\n  /** When true, uses full border radius (pill). Figma: Rounded = On. */\n  rounded?: boolean;\n  /** Size variant. Figma: Size. Default: Medium. */\n  size?: IconButtonSize;\n  /** Default | Inverted. Figma: Style (for light vs dark backgrounds). */\n  style?: IconButtonStyle;\n  /** When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. */\n  toggled?: boolean;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n}\n\n/**\n * @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n */\nexport const ICON_BUTTON_ICON_SIZES: Record<\n  IconButtonSize,\n  '12' | '16' | '20' | '24'\n> = {\n  'x-small': '12',\n  small: '16',\n  medium: '20',\n  large: '24',\n};\n\n/**\n * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\nexport default function IconButton({\n  active = false,\n  className = '',\n  count,\n  destructive = false,\n  icon,\n  loading = false,\n  padding = 'default',\n  rounded = false,\n  size = 'medium',\n  style = 'default',\n  toggled,\n  unreadBadge = false,\n  disabled,\n  type = 'button',\n  'aria-label': ariaLabel,\n  ...rest\n}: IconButtonProps) {\n  const sizeClass = styles[`icon-button--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['icon-button--padding-compact'] : '';\n  const styleClass =\n    style === 'inverted' ? styles['icon-button--style-inverted'] : '';\n  const destructiveClass = destructive\n    ? styles['icon-button--destructive']\n    : '';\n  const roundedClass = rounded ? styles['icon-button--rounded'] : '';\n  const toggledClass = toggled ? styles['icon-button--toggled'] : '';\n  const activeClass = active ? styles['icon-button--active'] : '';\n  const hasCount = count !== undefined;\n  const hasCountClass = hasCount ? styles['icon-button--has-count'] : '';\n\n  const rootClass = [\n    styles['icon-button'],\n    sizeClass,\n    paddingClass,\n    styleClass,\n    destructiveClass,\n    roundedClass,\n    toggledClass,\n    activeClass,\n    hasCountClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n\n  return (\n    <button\n      className={rootClass}\n      type={type}\n      disabled={disabled || loading}\n      aria-label={ariaLabel}\n      aria-pressed={toggled === undefined ? undefined : toggled}\n      data-active={active ? 'true' : undefined}\n      {...rest}\n    >\n      <span className={styles['icon-button__icon-slot']} aria-hidden>\n        {loading\n          ? <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n          : <IconSlotContext.Provider value={{ size: spinnerSize }}>{icon}</IconSlotContext.Provider>}\n        {unreadBadge && !loading && (\n          <span className={styles['icon-button__unread-badge']} />\n        )}\n      </span>\n      {hasCount && (\n        <span className={styles['icon-button__count']}>{count}</span>\n      )}\n    </button>\n  );\n}\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx","IconSlotContext"],"mappings":"iSA+CaA,EAGT,CACF,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAQA,SAAwBC,EAAW,CACjC,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,MAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,QAAAC,EAAU,GACV,QAAAC,EAAU,UACV,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,MAAAC,EAAQ,UACR,QAAAC,EACA,YAAAC,EAAc,GACd,SAAAC,EACA,KAAAC,EAAO,SACP,aAAcC,EACd,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAYC,EAAAA,QAAO,qBAAqBC,EAAAA,QAAQV,CAAI,CAAC,EAAE,EACvDW,EACJb,IAAY,UAAYW,EAAAA,QAAO,8BAA8B,EAAI,GAC7DG,EACJX,IAAU,WAAaQ,EAAAA,QAAO,6BAA6B,EAAI,GAC3DI,EAAmBlB,EACrBc,UAAO,0BAA0B,EACjC,GACEK,EAAef,EAAUU,UAAO,sBAAsB,EAAI,GAC1DM,EAAeb,EAAUO,UAAO,sBAAsB,EAAI,GAC1DO,EAAcxB,EAASiB,UAAO,qBAAqB,EAAI,GACvDQ,EAAWvB,IAAU,OACrBwB,EAAgBD,EAAWR,UAAO,wBAAwB,EAAI,GAE9DU,EAAY,CAChBV,EAAAA,QAAO,aAAa,EACpBD,EACAG,EACAC,EACAC,EACAC,EACAC,EACAC,EACAE,EACAzB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL2B,EAAc9B,EAAuBU,CAAI,EAE/C,OACEqB,EAAAA,KAAC,SAAA,CACC,UAAWF,EACX,KAAAd,EACA,SAAUD,GAAYP,EACtB,aAAYS,EACZ,eAAcJ,IAAY,OAAY,OAAYA,EAClD,cAAaV,EAAS,OAAS,OAC9B,GAAGe,EAEJ,SAAA,CAAAc,OAAC,QAAK,UAAWZ,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAA,CAAAZ,QACIyB,EAAAA,QAAA,CAAQ,KAAMF,EAAa,SAAUnB,IAAU,WAAY,EAC5DsB,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMJ,CAAA,EAAgB,SAAAxB,EAAK,EACjEO,GAAe,CAACN,GACf0B,MAAC,QAAK,UAAWd,EAAAA,QAAO,2BAA2B,CAAA,CAAG,CAAA,EAE1D,EACCQ,GACCM,EAAAA,IAAC,OAAA,CAAK,UAAWd,EAAAA,QAAO,oBAAoB,EAAI,SAAAf,CAAA,CAAM,CAAA,CAAA,CAAA,CAI9D"}

package/dist/components/icon-button/IconButton.css

@@ -0,0 +1 @@
+._icon-button_u2ufj_2{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:0;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);background-color:transparent;color:rgba(var(--center-channel-color-rgb),.64);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._icon-button_u2ufj_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._icon-button_u2ufj_2:disabled{cursor:not-allowed;opacity:.5}._icon-button_u2ufj_2:hover:not(:disabled):not(:active):not(._icon-button--active_u2ufj_25):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._icon-button_u2ufj_2:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button__icon-slot_u2ufj_33{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon-button__unread-badge_u2ufj_40{position:absolute;top:-1px;right:-1px;width:6px;height:6px;border-radius:var(--radius-full);background-color:var(--sidebar-text-active-border);box-shadow:0 0 0 2px var(--center-channel-bg);pointer-events:none}._icon-button__count_u2ufj_51{font-weight:var(--font-weight-semibold);color:inherit}._icon-button--size-x-small_u2ufj_55{width:24px;height:24px;padding:var(--spacing-xxs)}._icon-button--size-x-small_u2ufj_55 ._icon-button__count_u2ufj_51{font-size:var(--font-size-75);line-height:12px}._icon-button--size-x-small_u2ufj_55._icon-button--padding-compact_u2ufj_64{width:20px;height:20px;padding:var(--spacing-xxxs)}._icon-button--size-small_u2ufj_69{width:32px;height:32px;padding:var(--spacing-xs)}._icon-button--size-small_u2ufj_69 ._icon-button__count_u2ufj_51{font-size:var(--font-size-100);line-height:14px}._icon-button--size-small_u2ufj_69._icon-button--padding-compact_u2ufj_64{width:28px;height:28px;padding:var(--spacing-xxs)}._icon-button--size-medium_u2ufj_83{width:40px;height:40px;padding:var(--spacing-s)}._icon-button--size-medium_u2ufj_83 ._icon-button__count_u2ufj_51{font-size:var(--font-size-200);line-height:16px}._icon-button--size-medium_u2ufj_83._icon-button--padding-compact_u2ufj_64{width:36px;height:36px;padding:var(--spacing-xs)}._icon-button--size-large_u2ufj_97{width:48px;height:48px;padding:var(--spacing-m)}._icon-button--size-large_u2ufj_97 ._icon-button__count_u2ufj_51{font-size:var(--font-size-300);line-height:18px}._icon-button--size-large_u2ufj_97._icon-button--padding-compact_u2ufj_64{width:44px;height:44px;padding:var(--spacing-s)}._icon-button--has-count_u2ufj_111{width:auto;gap:var(--spacing-xxxs)}._icon-button--rounded_u2ufj_115{border-radius:var(--radius-full)}._icon-button--active_u2ufj_25:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--active_u2ufj_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--active_u2ufj_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--toggled_u2ufj_25{background-color:var(--button-bg);color:var(--button-color)}._icon-button--toggled_u2ufj_25:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_u2ufj_25:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_u2ufj_25 ._icon-button__unread-badge_u2ufj_40{box-shadow:0 0 0 2px var(--button-bg)}._icon-button--style-inverted_u2ufj_145{background-color:transparent;color:rgba(var(--sidebar-text-rgb),.64)}._icon-button--style-inverted_u2ufj_145 ._icon-button__unread-badge_u2ufj_40{box-shadow:0 0 0 2px var(--sidebar-header-bg)}._icon-button--style-inverted_u2ufj_145:hover:not(:disabled):not(:active):not(._icon-button--toggled_u2ufj_25):not(._icon-button--active_u2ufj_25){background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._icon-button--style-inverted_u2ufj_145:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--active_u2ufj_25:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--active_u2ufj_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--active_u2ufj_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25:hover:not(:disabled):not(:active){background-color:rgba(var(--sidebar-text-rgb),.92);color:var(--sidebar-bg)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88);color:var(--sidebar-bg)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25 ._icon-button__unread-badge_u2ufj_40{box-shadow:0 0 0 2px var(--sidebar-text)}._icon-button--style-inverted_u2ufj_145._icon-button--destructive_u2ufj_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_u2ufj_145._icon-button--destructive_u2ufj_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_u2ufj_145._icon-button--destructive_u2ufj_187:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._icon-button--destructive_u2ufj_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--destructive_u2ufj_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--destructive_u2ufj_187:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}