@mattermost/compass-ui 0.1.0-alpha.6 → 0.1.0-alpha.8

package/dist/components/emoji-popover/EmojiPopover.js

@@ -0,0 +1,244 @@
+import { jsxs as n, jsx as o, Fragment as X } from "react/jsx-runtime";
+import { useState as t, useRef as _, useId as Y, useEffect as Z } from "react";
+import __ee from "@mattermost/compass-icons/components/close.js";const ee=__ee&&__ee.default?__ee.default:__ee;
+import oe from "../button/Button.js";
+import ie from "../emoji/Emoji.js";
+import j from "../emoji-button/EmojiButton.js";
+import re from "../empty-state/EmptyState.js";
+import M from "../icon/Icon.js";
+import x from "../icon-button/IconButton.js";
+import O from "../menu-group-heading/MenuGroupHeading.js";
+import ne from "../scrollbar/Scrollbar.js";
+import se from "../search-input/SearchInput.js";
+import le from "../../illustrations/search.svg.js";
+import i from "./EmojiPopover.module.scss.js";
+const P = ["🖐️", "🖐🏻", "🖐🏼", "🖐🏽", "🖐🏾", "🖐🏿"], ae = ["", "🏻", "🏼", "🏽", "🏾", "🏿"], te = /* @__PURE__ */ new Set([
+  "👋",
+  "🤚",
+  "✋",
+  "🖐️",
+  "🖖",
+  "👌",
+  "🤌",
+  "🤏",
+  "✌️",
+  "🤞",
+  "🫰",
+  "🤟",
+  "🤘",
+  "🤙",
+  "👈",
+  "👉",
+  "👆",
+  "👇",
+  "☝️",
+  "🫵",
+  "👍",
+  "👎",
+  "✊",
+  "👊",
+  "🤛",
+  "🤜",
+  "👏",
+  "🙌",
+  "🫶",
+  "👐",
+  "🤲",
+  "🙏",
+  "💅",
+  "🤳",
+  "💪",
+  "🦵",
+  "🦶",
+  "👂",
+  "🦻",
+  "👃"
+]);
+function ce(c, s) {
+  return !s || !te.has(c) ? c : c.replace("️", "") + s;
+}
+function Ce({
+  className: c = "",
+  categories: s,
+  shortcodes: m = {},
+  defaultQuery: D = "",
+  autoFocus: k = !1,
+  onEmojiSelect: d,
+  onSearch: u,
+  onCustomEmojiClick: g,
+  customEmojiLabel: H = "Custom emoji"
+}) {
+  var R;
+  const [l, $] = t(D), [A, F] = t(((R = s[0]) == null ? void 0 : R.id) ?? ""), [N, y] = t(null), [K, I] = t(null), [v, L] = t(0), [a, h] = t(!1), S = _(null), C = `${Y()}-skin-tone-picker`, Q = ae[v], b = _(null), w = _({});
+  Z(() => {
+    var e;
+    k && ((e = S.current) == null || e.focus());
+  }, [k]);
+  const B = (e) => {
+    $(e), u == null || u(e);
+  }, q = [...new Set(s.flatMap((e) => e.emojis))], T = l ? q.filter((e) => (m[e] ?? "").includes(l.toLowerCase()) || e === l) : [], f = l ? T.length > 0 ? "search-results" : "empty" : "default";
+  function G(e) {
+    return m[e] ? `:${m[e]}:` : e;
+  }
+  function V(e) {
+    const r = w.current[e], p = b.current;
+    if (!r || !p) return;
+    const W = r.getBoundingClientRect().top - p.getBoundingClientRect().top + p.scrollTop;
+    p.scrollTo({ top: W, behavior: "smooth" });
+  }
+  const J = [i["emoji-popover"], c].filter(Boolean).join(" "), U = {
+    "aria-label": "",
+    width: "80px",
+    height: "60px",
+    children: /* @__PURE__ */ o(le, {})
+  }, E = (e) => {
+    const r = ce(e, Q);
+    return /* @__PURE__ */ o(
+      j,
+      {
+        emoji: r,
+        size: "medium",
+        padding: "compact",
+        "aria-label": r,
+        onMouseEnter: () => {
+          y(r), I(e);
+        },
+        onMouseLeave: () => {
+          y(null), I(null);
+        },
+        onClick: () => d == null ? void 0 : d(r)
+      },
+      e
+    );
+  }, z = () => f === "empty" ? /* @__PURE__ */ o(
+    re,
+    {
+      illustration: U,
+      title: "No emojis found",
+      description: "Try a different search term."
+    }
+  ) : f === "search-results" ? /* @__PURE__ */ o("div", { className: i["emoji-popover__emoji-list"], children: /* @__PURE__ */ n("div", { className: i["emoji-popover__group"], children: [
+    /* @__PURE__ */ o(O, { label: "Search Results" }),
+    /* @__PURE__ */ o("div", { className: i["emoji-popover__emoji-row"], children: T.map(E) })
+  ] }) }) : /* @__PURE__ */ o("div", { className: i["emoji-popover__emoji-list"], children: s.map((e) => /* @__PURE__ */ n("div", { ref: (r) => {
+    w.current[e.id] = r;
+  }, className: i["emoji-popover__group"], children: [
+    /* @__PURE__ */ o(O, { label: e.label }),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: [
+          i["emoji-popover__emoji-row"],
+          e.wrap === !1 ? i["emoji-popover__emoji-row--nowrap"] : ""
+        ].filter(Boolean).join(" "),
+        children: e.emojis.map(E)
+      }
+    )
+  ] }, e.id)) });
+  return /* @__PURE__ */ n("div", { className: J, children: [
+    /* @__PURE__ */ n("div", { className: i["emoji-popover__header"], children: [
+      /* @__PURE__ */ n("div", { className: i["emoji-popover__header-panels"], children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: [
+              i["emoji-popover__header-main"],
+              a ? i["emoji-popover__header-main--hidden"] : ""
+            ].filter(Boolean).join(" "),
+            inert: a,
+            "aria-hidden": a || void 0,
+            children: /* @__PURE__ */ n("div", { className: i["emoji-popover__search-row"], children: [
+              /* @__PURE__ */ o(
+                se,
+                {
+                  ref: S,
+                  placeholder: "Search emojis",
+                  size: "small",
+                  className: i["emoji-popover__search-input"],
+                  value: l,
+                  onChange: (e) => B(e.target.value),
+                  onClear: () => B("")
+                }
+              ),
+              !l && /* @__PURE__ */ o(
+                j,
+                {
+                  emoji: P[v],
+                  size: "small",
+                  "aria-label": "Select skin tone",
+                  "aria-expanded": a,
+                  "aria-controls": C,
+                  onClick: () => h(!0)
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            id: C,
+            className: [
+              i["emoji-popover__skin-tone-picker"],
+              a ? i["emoji-popover__skin-tone-picker--visible"] : ""
+            ].filter(Boolean).join(" "),
+            inert: !a,
+            "aria-hidden": !a || void 0,
+            children: [
+              /* @__PURE__ */ o("span", { className: i["emoji-popover__skin-tone-label"], children: "Skin tone" }),
+              /* @__PURE__ */ o("div", { className: i["emoji-popover__skin-tone-options"], children: P.map((e, r) => /* @__PURE__ */ o(
+                j,
+                {
+                  emoji: e,
+                  size: "small",
+                  toggled: v === r,
+                  "aria-label": r === 0 ? "Default skin tone" : `Skin tone ${r}`,
+                  onClick: () => {
+                    L(r), h(!1);
+                  }
+                },
+                r
+              )) }),
+              /* @__PURE__ */ o(
+                x,
+                {
+                  size: "small",
+                  padding: "compact",
+                  icon: /* @__PURE__ */ o(M, { glyph: /* @__PURE__ */ o(ee, {}), size: "16" }),
+                  "aria-label": "Close skin tone picker",
+                  onClick: () => h(!1)
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      !l && /* @__PURE__ */ o("div", { className: i["emoji-popover__categories"], children: s.map((e) => /* @__PURE__ */ o(
+        x,
+        {
+          size: "small",
+          padding: "compact",
+          icon: /* @__PURE__ */ o(M, { glyph: /* @__PURE__ */ o(e.icon, {}), size: "16" }),
+          "aria-label": e.label,
+          active: A === e.id,
+          onClick: () => {
+            F(e.id), V(e.id);
+          }
+        },
+        e.id
+      )) })
+    ] }),
+    /* @__PURE__ */ o("div", { className: i["emoji-popover__scroll-view"], children: f === "empty" ? z() : /* @__PURE__ */ o(ne, { alwaysVisible: !0, ref: b, children: z() }) }),
+    /* @__PURE__ */ n("div", { className: i["emoji-popover__footer"], children: [
+      /* @__PURE__ */ o("div", { className: i["emoji-popover__footer-preview"], children: N ? /* @__PURE__ */ n(X, { children: [
+        /* @__PURE__ */ o(ie, { emoji: N, size: "32" }),
+        /* @__PURE__ */ o("span", { className: i["emoji-popover__footer-shortcode"], children: G(K ?? "") })
+      ] }) : /* @__PURE__ */ o("span", { className: i["emoji-popover__footer-hint"], children: "Select an Emoji" }) }),
+      g && /* @__PURE__ */ o(oe, { emphasis: "tertiary", size: "small", onClick: g, children: H })
+    ] })
+  ] });
+}
+export {
+  Ce as default
+};
+//# sourceMappingURL=EmojiPopover.js.map

package/dist/components/emoji-popover/EmojiPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPopover.js","sources":["../../../src/components/emoji-popover/EmojiPopover.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\nimport type { ComponentType } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Button from '@/components/button/Button';\nimport Emoji from '@/components/emoji/Emoji';\nimport EmojiButton from '@/components/emoji-button/EmojiButton';\nimport EmptyState from '@/components/empty-state/EmptyState';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport MenuGroupHeading from '@/components/menu-group-heading/MenuGroupHeading';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport SearchInput from '@/components/search-input/SearchInput';\nimport SearchIllustration from '@/illustrations/search';\nimport styles from './EmojiPopover.module.scss';\n\nexport interface EmojiCategory {\n  id: string;\n  label: string;\n  /** Icon component rendered in the category navigation bar. */\n  icon: ComponentType;\n  emojis: string[];\n  /** When false the row does not wrap (e.g. Recently Used). @default true */\n  wrap?: boolean;\n}\n\nexport interface EmojiPopoverProps {\n  className?: string;\n  /** Emoji categories to display, supplied by the host. */\n  categories: EmojiCategory[];\n  /** Map of base emoji → shortcode name used for footer display. */\n  shortcodes?: Record<string, string>;\n  /** Pre-seeds the search field. Useful for static specimen demos. */\n  defaultQuery?: string;\n  /** Focus the search field on mount. */\n  autoFocus?: boolean;\n  /** Called with the selected emoji character. */\n  onEmojiSelect?: (emoji: string) => void;\n  /**\n   * Called on every query change. Use this to trigger async custom-emoji\n   * searches on the host side; local filtering over `categories` always runs.\n   */\n  onSearch?: (query: string) => void;\n  /** Shows a tertiary button in the footer right. Omit to hide the button. */\n  onCustomEmojiClick?: () => void;\n  /** Label for the custom emoji button. @default 'Custom emoji' */\n  customEmojiLabel?: string;\n}\n\nconst SKIN_TONES = ['🖐️', '🖐🏻', '🖐🏼', '🖐🏽', '🖐🏾', '🖐🏿'];\nconst SKIN_TONE_MODIFIERS = ['', '\\u{1F3FB}', '\\u{1F3FC}', '\\u{1F3FD}', '\\u{1F3FE}', '\\u{1F3FF}'];\n\nconst MODIFIER_BASES = new Set([\n  '👋', '🤚', '✋', '🖐️', '🖖', '👌', '🤌', '🤏', '✌️', '🤞', '🫰',\n  '🤟', '🤘', '🤙', '👈', '👉', '👆', '👇', '☝️', '🫵', '👍', '👎',\n  '✊', '👊', '🤛', '🤜', '👏', '🙌', '🫶', '👐', '🤲', '🙏', '💅',\n  '🤳', '💪', '🦵', '🦶', '👂', '🦻', '👃',\n]);\n\nfunction applyModifier(emoji: string, modifier: string): string {\n  if (!modifier || !MODIFIER_BASES.has(emoji)) return emoji;\n  // Strip VS16 before the modifier so composed sequences render correctly\n  return emoji.replace('️', '') + modifier;\n}\n\nexport default function EmojiPopover({\n  className = '',\n  categories,\n  shortcodes = {},\n  defaultQuery = '',\n  autoFocus = false,\n  onEmojiSelect,\n  onSearch,\n  onCustomEmojiClick,\n  customEmojiLabel = 'Custom emoji',\n}: EmojiPopoverProps) {\n  const [query, setQuery] = useState(defaultQuery);\n  const [activeCategoryId, setActiveCategoryId] = useState(categories[0]?.id ?? '');\n  const [hoveredEmoji, setHoveredEmoji] = useState<string | null>(null);\n  const [hoveredBase, setHoveredBase] = useState<string | null>(null);\n  const [skinToneIndex, setSkinToneIndex] = useState(0);\n  const [showSkinTonePicker, setShowSkinTonePicker] = useState(false);\n\n  const searchRef = useRef<HTMLInputElement>(null);\n  const generatedId = useId();\n  const skinTonePickerId = `${generatedId}-skin-tone-picker`;\n  const skinToneModifier = SKIN_TONE_MODIFIERS[skinToneIndex];\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const groupRefs = useRef<Record<string, HTMLDivElement | null>>({});\n\n  useEffect(() => {\n    if (autoFocus) searchRef.current?.focus();\n  }, [autoFocus]);\n\n  const handleQueryChange = (next: string) => {\n    setQuery(next);\n    onSearch?.(next);\n  };\n\n  const allEmojis = [...new Set(categories.flatMap((c) => c.emojis))];\n  const searchResults = query\n    ? allEmojis.filter((emoji) => {\n        const name = shortcodes[emoji] ?? '';\n        return name.includes(query.toLowerCase()) || emoji === query;\n      })\n    : [];\n\n  const computedState = query\n    ? searchResults.length > 0 ? 'search-results' : 'empty'\n    : 'default';\n\n  function getShortcode(emoji: string): string {\n    return shortcodes[emoji] ? `:${shortcodes[emoji]}:` : emoji;\n  }\n\n  function scrollToCategory(id: string) {\n    const group = groupRefs.current[id];\n    const scroller = scrollRef.current;\n    if (!group || !scroller) return;\n    const top = group.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;\n    scroller.scrollTo({ top, behavior: 'smooth' });\n  }\n\n  const rootClass = [styles['emoji-popover'], className].filter(Boolean).join(' ');\n\n  const emptyIllustration = {\n    'aria-label': '' as const,\n    width: '80px',\n    height: '60px',\n    children: <SearchIllustration />,\n  };\n\n  const renderEmoji = (emoji: string) => {\n    const displayed = applyModifier(emoji, skinToneModifier);\n    return (\n      <EmojiButton\n        key={emoji}\n        emoji={displayed}\n        size=\"medium\"\n        padding=\"compact\"\n        aria-label={displayed}\n        onMouseEnter={() => { setHoveredEmoji(displayed); setHoveredBase(emoji); }}\n        onMouseLeave={() => { setHoveredEmoji(null); setHoveredBase(null); }}\n        onClick={() => onEmojiSelect?.(displayed)}\n      />\n    );\n  };\n\n  const renderBody = () => {\n    if (computedState === 'empty') {\n      return (\n        <EmptyState\n          illustration={emptyIllustration}\n          title=\"No emojis found\"\n          description=\"Try a different search term.\"\n        />\n      );\n    }\n\n    if (computedState === 'search-results') {\n      return (\n        <div className={styles['emoji-popover__emoji-list']}>\n          <div className={styles['emoji-popover__group']}>\n            <MenuGroupHeading label=\"Search Results\" />\n            <div className={styles['emoji-popover__emoji-row']}>\n              {searchResults.map(renderEmoji)}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div className={styles['emoji-popover__emoji-list']}>\n        {categories.map((cat) => (\n          <div key={cat.id} ref={(el) => { groupRefs.current[cat.id] = el; }} className={styles['emoji-popover__group']}>\n            <MenuGroupHeading label={cat.label} />\n            <div\n              className={[\n                styles['emoji-popover__emoji-row'],\n                cat.wrap === false ? styles['emoji-popover__emoji-row--nowrap'] : '',\n              ].filter(Boolean).join(' ')}\n            >\n              {cat.emojis.map(renderEmoji)}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  };\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['emoji-popover__header']}>\n        <div className={styles['emoji-popover__header-panels']}>\n          <div\n            className={[\n              styles['emoji-popover__header-main'],\n              showSkinTonePicker ? styles['emoji-popover__header-main--hidden'] : '',\n            ].filter(Boolean).join(' ')}\n            inert={showSkinTonePicker}\n            aria-hidden={showSkinTonePicker || undefined}\n          >\n            <div className={styles['emoji-popover__search-row']}>\n              <SearchInput\n                ref={searchRef}\n                placeholder=\"Search emojis\"\n                size=\"small\"\n                className={styles['emoji-popover__search-input']}\n                value={query}\n                onChange={(e) => handleQueryChange(e.target.value)}\n                onClear={() => handleQueryChange('')}\n              />\n              {!query && (\n                <EmojiButton\n                  emoji={SKIN_TONES[skinToneIndex]}\n                  size=\"small\"\n                  aria-label=\"Select skin tone\"\n                  aria-expanded={showSkinTonePicker}\n                  aria-controls={skinTonePickerId}\n                  onClick={() => setShowSkinTonePicker(true)}\n                />\n              )}\n            </div>\n          </div>\n\n          <div\n            id={skinTonePickerId}\n            className={[\n              styles['emoji-popover__skin-tone-picker'],\n              showSkinTonePicker ? styles['emoji-popover__skin-tone-picker--visible'] : '',\n            ].filter(Boolean).join(' ')}\n            inert={!showSkinTonePicker}\n            aria-hidden={!showSkinTonePicker || undefined}\n          >\n            <span className={styles['emoji-popover__skin-tone-label']}>Skin tone</span>\n            <div className={styles['emoji-popover__skin-tone-options']}>\n              {SKIN_TONES.map((emoji, i) => (\n                <EmojiButton\n                  key={i}\n                  emoji={emoji}\n                  size=\"small\"\n                  toggled={skinToneIndex === i}\n                  aria-label={i === 0 ? 'Default skin tone' : `Skin tone ${i}`}\n                  onClick={() => { setSkinToneIndex(i); setShowSkinTonePicker(false); }}\n                />\n              ))}\n            </div>\n            <IconButton\n              size=\"small\"\n              padding=\"compact\"\n              icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n              aria-label=\"Close skin tone picker\"\n              onClick={() => setShowSkinTonePicker(false)}\n            />\n          </div>\n        </div>\n\n        {!query && (\n          <div className={styles['emoji-popover__categories']}>\n            {categories.map((cat) => (\n              <IconButton\n                key={cat.id}\n                size=\"small\"\n                padding=\"compact\"\n                icon={<Icon glyph={<cat.icon />} size=\"16\" />}\n                aria-label={cat.label}\n                active={activeCategoryId === cat.id}\n                onClick={() => { setActiveCategoryId(cat.id); scrollToCategory(cat.id); }}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div className={styles['emoji-popover__scroll-view']}>\n        {computedState === 'empty' ? (\n          renderBody()\n        ) : (\n          <Scrollbar alwaysVisible ref={scrollRef}>{renderBody()}</Scrollbar>\n        )}\n      </div>\n\n      <div className={styles['emoji-popover__footer']}>\n        <div className={styles['emoji-popover__footer-preview']}>\n          {hoveredEmoji ? (\n            <>\n              <Emoji emoji={hoveredEmoji} size='32' />\n              <span className={styles['emoji-popover__footer-shortcode']}>\n                {getShortcode(hoveredBase ?? '')}\n              </span>\n            </>\n          ) : (\n            <span className={styles['emoji-popover__footer-hint']}>\n              Select an Emoji\n            </span>\n          )}\n        </div>\n        {onCustomEmojiClick && (\n          <Button emphasis=\"tertiary\" size=\"small\" onClick={onCustomEmojiClick}>\n            {customEmojiLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["SKIN_TONES","SKIN_TONE_MODIFIERS","MODIFIER_BASES","applyModifier","emoji","modifier","EmojiPopover","className","categories","shortcodes","defaultQuery","autoFocus","onEmojiSelect","onSearch","onCustomEmojiClick","customEmojiLabel","query","setQuery","useState","activeCategoryId","setActiveCategoryId","_a","hoveredEmoji","setHoveredEmoji","hoveredBase","setHoveredBase","skinToneIndex","setSkinToneIndex","showSkinTonePicker","setShowSkinTonePicker","searchRef","useRef","skinTonePickerId","useId","skinToneModifier","scrollRef","groupRefs","useEffect","handleQueryChange","next","allEmojis","c","searchResults","computedState","getShortcode","scrollToCategory","id","group","scroller","top","rootClass","styles","emptyIllustration","SearchIllustration","renderEmoji","displayed","jsx","EmojiButton","renderBody","EmptyState","jsxs","MenuGroupHeading","cat","el","SearchInput","i","IconButton","Icon","CloseIcon","Scrollbar","Fragment","Emoji","Button"],"mappings":"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"}

package/dist/components/emoji-popover/EmojiPopover.module.css

@@ -0,0 +1 @@
+._emoji-popover_ffrmi_2{box-sizing:border-box;display:flex;flex-direction:column;width:348px;height:436px;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);box-shadow:var(--elevation-4);overflow:hidden}._emoji-popover__header_ffrmi_14{display:flex;flex-direction:column;flex-shrink:0;background-color:var(--center-channel-bg);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12)}._emoji-popover__search-row_ffrmi_21{display:flex;align-items:center;gap:var(--spacing-xxs);padding:var(--spacing-m) var(--spacing-m) var(--spacing-xxxs)}._emoji-popover__search-input_ffrmi_27{flex:1;min-width:0}._emoji-popover__header-panels_ffrmi_31{position:relative;overflow:hidden}._emoji-popover__header-main_ffrmi_35{transition:transform var(--duration-quick) var(--ease-transition)}._emoji-popover__header-main--hidden_ffrmi_38{transform:translate(-100%)}._emoji-popover__skin-tone-picker_ffrmi_41{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xs) var(--spacing-m);transform:translate(100%);transition:transform var(--duration-quick) var(--ease-transition);background-color:var(--center-channel-bg)}._emoji-popover__skin-tone-picker--visible_ffrmi_55{transform:translate(0)}._emoji-popover__skin-tone-label_ffrmi_58{flex-shrink:0;font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--center-channel-color);padding-left:var(--spacing-xxs)}._emoji-popover__skin-tone-options_ffrmi_66{display:flex;flex:1;align-items:center;justify-content:space-between}._emoji-popover__categories_ffrmi_72{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xxs) var(--spacing-m)}._emoji-popover__scroll-view_ffrmi_78{display:flex;flex-direction:column;flex:1;min-height:0}._emoji-popover__scroll-view_ffrmi_78>*{flex:1;min-height:0}._emoji-popover__emoji-list_ffrmi_88{display:flex;flex-direction:column;gap:var(--spacing-xxs);padding:var(--spacing-xxxs) 0}._emoji-popover__group_ffrmi_94{display:flex;flex-direction:column}._emoji-popover__emoji-row_ffrmi_98{display:flex;flex-wrap:wrap;align-items:flex-start;padding:0 var(--spacing-s);gap:0}._emoji-popover__emoji-row--nowrap_ffrmi_105{flex-wrap:nowrap}._emoji-popover__footer_ffrmi_108{display:flex;align-items:center;gap:var(--spacing-xs);height:56px;flex-shrink:0;padding:0 var(--spacing-l);border-top:1px solid rgba(var(--center-channel-color-rgb),.12);background-color:var(--center-channel-bg)}._emoji-popover__footer-preview_ffrmi_118{display:flex;align-items:center;gap:var(--spacing-xs);flex:1;min-width:0}._emoji-popover__footer-hint_ffrmi_125{font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);color:var(--center-channel-color)}._emoji-popover__footer-shortcode_ffrmi_130{font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);color:rgba(var(--center-channel-color-rgb),.72)}

package/dist/components/emoji-popover/EmojiPopover.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./EmojiPopover.module.css');const o={"emoji-popover":"_emoji-popover_ffrmi_2","emoji-popover__header":"_emoji-popover__header_ffrmi_14","emoji-popover__search-row":"_emoji-popover__search-row_ffrmi_21","emoji-popover__search-input":"_emoji-popover__search-input_ffrmi_27","emoji-popover__header-panels":"_emoji-popover__header-panels_ffrmi_31","emoji-popover__header-main":"_emoji-popover__header-main_ffrmi_35","emoji-popover__header-main--hidden":"_emoji-popover__header-main--hidden_ffrmi_38","emoji-popover__skin-tone-picker":"_emoji-popover__skin-tone-picker_ffrmi_41","emoji-popover__skin-tone-picker--visible":"_emoji-popover__skin-tone-picker--visible_ffrmi_55","emoji-popover__skin-tone-label":"_emoji-popover__skin-tone-label_ffrmi_58","emoji-popover__skin-tone-options":"_emoji-popover__skin-tone-options_ffrmi_66","emoji-popover__categories":"_emoji-popover__categories_ffrmi_72","emoji-popover__scroll-view":"_emoji-popover__scroll-view_ffrmi_78","emoji-popover__emoji-list":"_emoji-popover__emoji-list_ffrmi_88","emoji-popover__group":"_emoji-popover__group_ffrmi_94","emoji-popover__emoji-row":"_emoji-popover__emoji-row_ffrmi_98","emoji-popover__emoji-row--nowrap":"_emoji-popover__emoji-row--nowrap_ffrmi_105","emoji-popover__footer":"_emoji-popover__footer_ffrmi_108","emoji-popover__footer-preview":"_emoji-popover__footer-preview_ffrmi_118","emoji-popover__footer-hint":"_emoji-popover__footer-hint_ffrmi_125","emoji-popover__footer-shortcode":"_emoji-popover__footer-shortcode_ffrmi_130"};exports.default=o;
+//# sourceMappingURL=EmojiPopover.module.scss.cjs.map

package/dist/components/emoji-popover/EmojiPopover.module.scss.cjs.map

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

package/dist/components/emoji-popover/EmojiPopover.module.scss.js

@@ -0,0 +1,27 @@
+import './EmojiPopover.module.css';const o = {
+  "emoji-popover": "_emoji-popover_ffrmi_2",
+  "emoji-popover__header": "_emoji-popover__header_ffrmi_14",
+  "emoji-popover__search-row": "_emoji-popover__search-row_ffrmi_21",
+  "emoji-popover__search-input": "_emoji-popover__search-input_ffrmi_27",
+  "emoji-popover__header-panels": "_emoji-popover__header-panels_ffrmi_31",
+  "emoji-popover__header-main": "_emoji-popover__header-main_ffrmi_35",
+  "emoji-popover__header-main--hidden": "_emoji-popover__header-main--hidden_ffrmi_38",
+  "emoji-popover__skin-tone-picker": "_emoji-popover__skin-tone-picker_ffrmi_41",
+  "emoji-popover__skin-tone-picker--visible": "_emoji-popover__skin-tone-picker--visible_ffrmi_55",
+  "emoji-popover__skin-tone-label": "_emoji-popover__skin-tone-label_ffrmi_58",
+  "emoji-popover__skin-tone-options": "_emoji-popover__skin-tone-options_ffrmi_66",
+  "emoji-popover__categories": "_emoji-popover__categories_ffrmi_72",
+  "emoji-popover__scroll-view": "_emoji-popover__scroll-view_ffrmi_78",
+  "emoji-popover__emoji-list": "_emoji-popover__emoji-list_ffrmi_88",
+  "emoji-popover__group": "_emoji-popover__group_ffrmi_94",
+  "emoji-popover__emoji-row": "_emoji-popover__emoji-row_ffrmi_98",
+  "emoji-popover__emoji-row--nowrap": "_emoji-popover__emoji-row--nowrap_ffrmi_105",
+  "emoji-popover__footer": "_emoji-popover__footer_ffrmi_108",
+  "emoji-popover__footer-preview": "_emoji-popover__footer-preview_ffrmi_118",
+  "emoji-popover__footer-hint": "_emoji-popover__footer-hint_ffrmi_125",
+  "emoji-popover__footer-shortcode": "_emoji-popover__footer-shortcode_ffrmi_130"
+};
+export {
+  o as default
+};
+//# sourceMappingURL=EmojiPopover.module.scss.js.map

package/dist/components/emoji-popover/EmojiPopover.module.scss.js.map

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

package/dist/components/{message-reactions → emoji-popover}/index.cjs

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

package/dist/components/emoji-popover/index.cjs.map

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

package/dist/components/emoji-popover/index.d.ts

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

package/dist/components/emoji-popover/index.d.ts.map

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

package/dist/components/emoji-popover/index.js

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

package/dist/components/emoji-popover/index.js.map

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

package/dist/components/global-banner/GlobalBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalBanner.cjs","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. */\n  message: string;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. */\n  actionLabel?: string;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            {leadingIcon}\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          className={styles['global-banner__dismiss']}\n          aria-label=\"Dismiss\"\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","typeClass","styles","rootClass","jsxs","jsx","Button","IconButton","Icon","CloseIcon"],"mappings":"+VAqCA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,EACA,KAAAC,EAAO,UACP,YAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAsB,CACpB,MAAMC,EACJL,IAAS,UACLM,UAAO,uBAAuBN,EAAK,YAAA,CAAa,EAAE,EAClD,GAEAO,EAAY,CAACD,UAAO,eAAe,EAAGD,EAAWP,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEU,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAW,KAAK,SAC9B,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAL,GAAe,YACb,OAAA,CAAK,UAAWK,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACxD,SAAAL,CAAA,CACH,QAED,OAAA,CAAK,UAAWK,EAAAA,QAAO,wBAAwB,EAAI,SAAAP,EAAQ,EAC3DG,GAAe,MACdO,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWJ,EAAAA,QAAO,uBAAuB,EACzC,WAAW,UACX,SAAS,WACT,KAAK,UACL,QAASH,EAER,SAAAD,CAAA,CAAA,CACH,EAEJ,EACCE,GAAa,MACZK,EAAAA,IAACE,EAAAA,QAAA,CACC,UAAWL,EAAAA,QAAO,wBAAwB,EAC1C,aAAW,UACX,KAAK,QACL,WAAOM,UAAA,CAAK,YAAQC,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAAST,CAAA,CAAA,CACX,EAEJ,CAEJ"}
+{"version":3,"file":"GlobalBanner.cjs","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. */\n  message: string;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon (e.g. `<Icon glyph={<SomeIcon />} size=\"16\" />`). The slot does not resize raw SVG children. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. */\n  actionLabel?: string;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            {leadingIcon}\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          className={styles['global-banner__dismiss']}\n          aria-label=\"Dismiss\"\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","typeClass","styles","rootClass","jsxs","jsx","Button","IconButton","Icon","CloseIcon"],"mappings":"+VAqCA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,EACA,KAAAC,EAAO,UACP,YAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAsB,CACpB,MAAMC,EACJL,IAAS,UACLM,UAAO,uBAAuBN,EAAK,YAAA,CAAa,EAAE,EAClD,GAEAO,EAAY,CAACD,UAAO,eAAe,EAAGD,EAAWP,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEU,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAW,KAAK,SAC9B,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAL,GAAe,YACb,OAAA,CAAK,UAAWK,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACxD,SAAAL,CAAA,CACH,QAED,OAAA,CAAK,UAAWK,EAAAA,QAAO,wBAAwB,EAAI,SAAAP,EAAQ,EAC3DG,GAAe,MACdO,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWJ,EAAAA,QAAO,uBAAuB,EACzC,WAAW,UACX,SAAS,WACT,KAAK,UACL,QAASH,EAER,SAAAD,CAAA,CAAA,CACH,EAEJ,EACCE,GAAa,MACZK,EAAAA,IAACE,EAAAA,QAAA,CACC,UAAWL,EAAAA,QAAO,wBAAwB,EAC1C,aAAW,UACX,KAAK,QACL,WAAOM,UAAA,CAAK,YAAQC,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAAST,CAAA,CAAA,CACX,EAEJ,CAEJ"}

package/dist/components/global-banner/GlobalBanner.d.ts

@@ -7,7 +7,7 @@ export interface GlobalBannerProps {
     message: string;
     /** Optional type for color-coding. Default: General. */
     type?: GlobalBannerType;
-    /** Optional leading icon. */
+    /** Optional leading icon (e.g. `<Icon glyph={<SomeIcon />} size="16" />`). The slot does not resize raw SVG children. */
     leadingIcon?: ReactNode;
     /** Label for the optional action button. */
     actionLabel?: string;

package/dist/components/global-banner/GlobalBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalBanner.d.ts","sourceRoot":"","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,EACP,IAAgB,EAChB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CA0CnB"}
+{"version":3,"file":"GlobalBanner.d.ts","sourceRoot":"","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,yHAAyH;IACzH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,EACP,IAAgB,EAChB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CA0CnB"}

package/dist/components/global-banner/GlobalBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalBanner.js","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. */\n  message: string;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. */\n  actionLabel?: string;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            {leadingIcon}\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          className={styles['global-banner__dismiss']}\n          aria-label=\"Dismiss\"\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","typeClass","styles","rootClass","jsxs","jsx","Button","IconButton","Icon","CloseIcon"],"mappings":";;;;;;AAqCA,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IACJL,MAAS,YACLM,EAAO,uBAAuBN,EAAK,YAAA,CAAa,EAAE,IAClD,IAEAO,IAAY,CAACD,EAAO,eAAe,GAAGD,GAAWP,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAU,EAAC,OAAA,EAAI,WAAWD,GAAW,MAAK,UAC9B,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,wBAAwB,GAC5C,UAAA;AAAA,MAAAL,KAAe,0BACb,QAAA,EAAK,WAAWK,EAAO,qBAAqB,GAAG,eAAW,IACxD,UAAAL,EAAA,CACH;AAAA,wBAED,QAAA,EAAK,WAAWK,EAAO,wBAAwB,GAAI,UAAAP,GAAQ;AAAA,MAC3DG,KAAe,QACd,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWJ,EAAO,uBAAuB;AAAA,UACzC,YAAW;AAAA,UACX,UAAS;AAAA,UACT,MAAK;AAAA,UACL,SAASH;AAAA,UAER,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,IACCE,KAAa,QACZ,gBAAAK;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAWL,EAAO,wBAAwB;AAAA,QAC1C,cAAW;AAAA,QACX,MAAK;AAAA,QACL,wBAAOM,GAAA,EAAK,yBAAQC,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,QAC5C,SAAST;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}
+{"version":3,"file":"GlobalBanner.js","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. */\n  message: string;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon (e.g. `<Icon glyph={<SomeIcon />} size=\"16\" />`). The slot does not resize raw SVG children. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. */\n  actionLabel?: string;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            {leadingIcon}\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          className={styles['global-banner__dismiss']}\n          aria-label=\"Dismiss\"\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","typeClass","styles","rootClass","jsxs","jsx","Button","IconButton","Icon","CloseIcon"],"mappings":";;;;;;AAqCA,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IACJL,MAAS,YACLM,EAAO,uBAAuBN,EAAK,YAAA,CAAa,EAAE,IAClD,IAEAO,IAAY,CAACD,EAAO,eAAe,GAAGD,GAAWP,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAU,EAAC,OAAA,EAAI,WAAWD,GAAW,MAAK,UAC9B,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,wBAAwB,GAC5C,UAAA;AAAA,MAAAL,KAAe,0BACb,QAAA,EAAK,WAAWK,EAAO,qBAAqB,GAAG,eAAW,IACxD,UAAAL,EAAA,CACH;AAAA,wBAED,QAAA,EAAK,WAAWK,EAAO,wBAAwB,GAAI,UAAAP,GAAQ;AAAA,MAC3DG,KAAe,QACd,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWJ,EAAO,uBAAuB;AAAA,UACzC,YAAW;AAAA,UACX,UAAS;AAAA,UACT,MAAK;AAAA,UACL,SAASH;AAAA,UAER,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,IACCE,KAAa,QACZ,gBAAAK;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAWL,EAAO,wBAAwB;AAAA,QAC1C,cAAW;AAAA,QACX,MAAK;AAAA,QACL,wBAAOM,GAAA,EAAK,yBAAQC,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,QAC5C,SAAST;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}

package/dist/components/global-header/GlobalHeader.module.css

@@ -1 +1 @@
-._global-header_r14zh_2{position:relative;display:grid;align-items:center;width:100%;height:40px;padding:0 var(--spacing-xxxxs);background:var(--sidebar-header-bg)}._global-header--channels_r14zh_12{grid-template-columns:max-content minmax(0,1fr) max-content}._global-header--product-only_r14zh_15{grid-template-columns:auto minmax(0,1fr)}._global-header__left_r14zh_18{grid-column:1;grid-row:1;display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xxxs) var(--spacing-xs);flex-shrink:0}._global-header__product_r14zh_27{display:flex;align-items:center;gap:var(--spacing-xxxs);padding:2px 0}._global-header__product-icon_r14zh_33{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--sidebar-text);opacity:.64}._global-header__product-name_r14zh_41{margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);line-height:var(--line-height-200);color:rgba(var(--sidebar-text-rgb),.64);white-space:nowrap}._global-header__navigator_r14zh_50{display:flex;align-items:center;gap:var(--spacing-xxxs)}._global-header__center_r14zh_55{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxxs) 0 var(--spacing-xxxxs) var(--spacing-xxxs);min-width:0;width:max-content;max-width:100%}._global-header__search_r14zh_67{display:flex;align-items:center;gap:var(--spacing-xs);width:432px;height:28px;padding:var(--spacing-xs) var(--spacing-m) var(--spacing-xs) var(--spacing-xs);background:rgba(var(--sidebar-text-rgb),.08);border-radius:var(--radius-s);cursor:text;transition:background-color var(--duration-quick) var(--ease-transition)}._global-header__search_r14zh_67:hover{background:rgba(var(--sidebar-text-rgb),.12)}._global-header__search-icon_r14zh_82{display:inline-flex;align-items:center;flex-shrink:0;color:rgba(var(--sidebar-text-rgb),.64)}._global-header__search-input_r14zh_88{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);letter-spacing:.02em;color:var(--sidebar-text)}._global-header__search-input_r14zh_88:focus{outline:none}._global-header__search-input_r14zh_88::placeholder{color:rgba(var(--sidebar-text-rgb),.64)}._global-header__right_r14zh_108{grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-xxxs);padding:0 var(--spacing-xs);flex-shrink:0}._global-header--channels_r14zh_12 ._global-header__right_r14zh_108{grid-column:3}._global-header--product-only_r14zh_15 ._global-header__right_r14zh_108{grid-column:2}._global-header__account_r14zh_123{--status-badge-bg: var(--sidebar-header-bg);display:inline-flex;align-items:center;padding:var(--spacing-xxxxs) var(--spacing-xs);background:transparent;border:0;border-radius:var(--radius-s);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition)}._global-header__account_r14zh_123:hover{background:rgba(var(--sidebar-text-rgb),.08)}
+._global-header_11raj_2{position:relative;display:grid;align-items:center;width:100%;height:40px;flex-shrink:0;padding:0 var(--spacing-xxxxs);background:var(--sidebar-header-bg)}._global-header--channels_11raj_13{grid-template-columns:max-content minmax(0,1fr) max-content}._global-header--product-only_11raj_16{grid-template-columns:auto minmax(0,1fr)}._global-header__left_11raj_19{grid-column:1;grid-row:1;display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xxxs) var(--spacing-xs);flex-shrink:0}._global-header__product_11raj_28{display:flex;align-items:center;gap:var(--spacing-xxxs);padding:2px 0}._global-header__product-icon_11raj_34{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--sidebar-text);opacity:.64}._global-header__product-name_11raj_42{margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);line-height:var(--line-height-200);color:rgba(var(--sidebar-text-rgb),.64);white-space:nowrap}._global-header__navigator_11raj_51{display:flex;align-items:center;gap:var(--spacing-xxxs)}._global-header__center_11raj_56{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxxs) 0 var(--spacing-xxxxs) var(--spacing-xxxs);min-width:0;width:max-content;max-width:100%}._global-header__search_11raj_68{display:flex;align-items:center;gap:var(--spacing-xs);width:432px;height:28px;padding:var(--spacing-xs) var(--spacing-m) var(--spacing-xs) var(--spacing-xs);background:rgba(var(--sidebar-text-rgb),.08);border-radius:var(--radius-s);cursor:text;transition:background-color var(--duration-quick) var(--ease-transition)}._global-header__search_11raj_68:hover{background:rgba(var(--sidebar-text-rgb),.12)}._global-header__search-icon_11raj_83{display:inline-flex;align-items:center;flex-shrink:0;color:rgba(var(--sidebar-text-rgb),.64)}._global-header__search-input_11raj_89{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);letter-spacing:.02em;color:var(--sidebar-text)}._global-header__search-input_11raj_89:focus{outline:none}._global-header__search-input_11raj_89::placeholder{color:rgba(var(--sidebar-text-rgb),.64)}._global-header__right_11raj_109{grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-xxxs);padding:0 var(--spacing-xs);flex-shrink:0}._global-header--channels_11raj_13 ._global-header__right_11raj_109{grid-column:3}._global-header--product-only_11raj_16 ._global-header__right_11raj_109{grid-column:2}._global-header__account_11raj_124{--status-badge-bg: var(--sidebar-header-bg);display:inline-flex;align-items:center;padding:var(--spacing-xxxxs) var(--spacing-xs);background:transparent;border:0;border-radius:var(--radius-s);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition)}._global-header__account_11raj_124:hover{background:rgba(var(--sidebar-text-rgb),.08)}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./GlobalHeader.module.css');const _={"global-header":"_global-header_r14zh_2","global-header--channels":"_global-header--channels_r14zh_12","global-header--product-only":"_global-header--product-only_r14zh_15","global-header__left":"_global-header__left_r14zh_18","global-header__product":"_global-header__product_r14zh_27","global-header__product-icon":"_global-header__product-icon_r14zh_33","global-header__product-name":"_global-header__product-name_r14zh_41","global-header__navigator":"_global-header__navigator_r14zh_50","global-header__center":"_global-header__center_r14zh_55","global-header__search":"_global-header__search_r14zh_67","global-header__search-icon":"_global-header__search-icon_r14zh_82","global-header__search-input":"_global-header__search-input_r14zh_88","global-header__right":"_global-header__right_r14zh_108","global-header__account":"_global-header__account_r14zh_123"};exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./GlobalHeader.module.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.js

@@ -1,20 +1,20 @@
-import './GlobalHeader.module.css';const _ = {
-  "global-header": "_global-header_r14zh_2",
-  "global-header--channels": "_global-header--channels_r14zh_12",
-  "global-header--product-only": "_global-header--product-only_r14zh_15",
-  "global-header__left": "_global-header__left_r14zh_18",
-  "global-header__product": "_global-header__product_r14zh_27",
-  "global-header__product-icon": "_global-header__product-icon_r14zh_33",
-  "global-header__product-name": "_global-header__product-name_r14zh_41",
-  "global-header__navigator": "_global-header__navigator_r14zh_50",
-  "global-header__center": "_global-header__center_r14zh_55",
-  "global-header__search": "_global-header__search_r14zh_67",
-  "global-header__search-icon": "_global-header__search-icon_r14zh_82",
-  "global-header__search-input": "_global-header__search-input_r14zh_88",
-  "global-header__right": "_global-header__right_r14zh_108",
-  "global-header__account": "_global-header__account_r14zh_123"
+import './GlobalHeader.module.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 {
-  _ as default
+  a as default
 };
 //# sourceMappingURL=GlobalHeader.module.scss.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\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. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size=\"16\" />`. */\n  icon: ReactNode;\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/** Icon size (px) per IconButton size. Use with Icon: size=\"12\" | \"16\" | \"20\" | \"24\". */\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  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  return (\n    <button\n      className={rootClass}\n      type={type}\n      disabled={disabled}\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        {icon}\n        {unreadBadge && (\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","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","jsxs","jsx"],"mappings":"+NAwCaA,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,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,EAAmBjB,EACrBa,UAAO,0BAA0B,EACjC,GACEK,EAAef,EAAUU,UAAO,sBAAsB,EAAI,GAC1DM,EAAeb,EAAUO,UAAO,sBAAsB,EAAI,GAC1DO,EAAcvB,EAASgB,UAAO,qBAAqB,EAAI,GACvDQ,EAAWtB,IAAU,OACrBuB,EAAgBD,EAAWR,UAAO,wBAAwB,EAAI,GAE9DU,EAAY,CAChBV,EAAAA,QAAO,aAAa,EACpBD,EACAG,EACAC,EACAC,EACAC,EACAC,EACAC,EACAE,EACAxB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACE0B,EAAAA,KAAC,SAAA,CACC,UAAWD,EACX,KAAAd,EACA,SAAAD,EACA,aAAYE,EACZ,eAAcJ,IAAY,OAAY,OAAYA,EAClD,cAAaT,EAAS,OAAS,OAC9B,GAAGc,EAEJ,SAAA,CAAAa,OAAC,QAAK,UAAWX,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAA,CAAAZ,EACAM,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWZ,EAAAA,QAAO,2BAA2B,CAAA,CAAG,CAAA,EAE1D,EACCQ,GACCI,EAAAA,IAAC,OAAA,CAAK,UAAWZ,EAAAA,QAAO,oBAAoB,EAAI,SAAAd,CAAA,CAAM,CAAA,CAAA,CAAA,CAI9D"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\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. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size=\"16\" />`. */\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/** Icon size (px) per IconButton size. Use with Icon: size=\"12\" | \"16\" | \"20\" | \"24\". */\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          : icon}\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"],"mappings":"mQA2CaA,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,EAC5DL,EACHO,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.d.ts

@@ -14,6 +14,8 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
     destructive?: boolean;
     /** Icon to show. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size="16" />`. */
     icon: ReactNode;
+    /** When true, shows a Spinner in place of the icon and disables the button. */
+    loading?: boolean;
     /** Padding variant. Figma: Padding = Default | Compact. */
     padding?: IconButtonPadding;
     /** When true, uses full border radius (pill). Figma: Rounded = On. */
@@ -35,5 +37,5 @@ export declare const ICON_BUTTON_ICON_SIZES: Record<IconButtonSize, '12' | '16'
  * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the
  * action explicit.
  */
-export default function IconButton({ active, className, count, destructive, icon, padding, rounded, size, style, toggled, unreadBadge, disabled, type, 'aria-label': ariaLabel, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function IconButton({ active, className, count, destructive, icon, loading, padding, rounded, size, style, toggled, unreadBadge, disabled, type, 'aria-label': ariaLabel, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/components/icon-button/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE,wEAAwE;AACxE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,CACR;IACC,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gIAAgI;IAChI,IAAI,EAAE,SAAS,CAAC;IAChB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,wEAAwE;IACxE,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,yFAAyF;AACzF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,cAAc,EACd,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAM1B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,MAAc,EACd,SAAc,EACd,KAAK,EACL,WAAmB,EACnB,IAAI,EACJ,OAAmB,EACnB,OAAe,EACf,IAAe,EACf,KAAiB,EACjB,OAAO,EACP,WAAmB,EACnB,QAAQ,EACR,IAAe,EACf,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,eAAe,2CAmDjB"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE,wEAAwE;AACxE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,CACR;IACC,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gIAAgI;IAChI,IAAI,EAAE,SAAS,CAAC;IAChB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,wEAAwE;IACxE,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,yFAAyF;AACzF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,cAAc,EACd,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAM1B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,MAAc,EACd,SAAc,EACd,KAAK,EACL,WAAmB,EACnB,IAAI,EACJ,OAAe,EACf,OAAmB,EACnB,OAAe,EACf,IAAe,EACf,KAAiB,EACjB,OAAO,EACP,WAAmB,EACnB,QAAQ,EACR,IAAe,EACf,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,eAAe,2CAuDjB"}