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

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

@@ -1,25 +1,25 @@
-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 { jsxs as n, jsx as o, Fragment as ae } from "react/jsx-runtime";
+import { useState as c, useRef as _, useId as te, useEffect as ce } from "react";
+import __pe from "@mattermost/compass-icons/components/close.js";const pe=__pe&&__pe.default?__pe.default:__pe;
+import me from "../button/Button.js";
+import de from "../emoji/Emoji.js";
 import j from "../emoji-button/EmojiButton.js";
-import re from "../empty-state/EmptyState.js";
+import ue 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 L from "../menu-group-heading/MenuGroupHeading.js";
+import ve from "../scrollbar/Scrollbar.js";
+import he from "../search-input/SearchInput.js";
+import fe from "../../illustrations/search.svg.js";
 import i from "./EmojiPopover.module.scss.js";
-const P = ["🖐️", "🖐🏻", "🖐🏼", "🖐🏽", "🖐🏾", "🖐🏿"], ae = [
+const _e = (s) => s === 0 ? "Default skin tone" : `Skin tone ${s}`, O = ["🖐️", "🖐🏻", "🖐🏼", "🖐🏽", "🖐🏾", "🖐🏿"], je = [
   "",
   "🏻",
   "🏼",
   "🏽",
   "🏾",
   "🏿"
-], te = /* @__PURE__ */ new Set([
+], ke = /* @__PURE__ */ new Set([
   "👋",
   "🤚",
   "✋",
@@ -61,47 +61,57 @@ const P = ["🖐️", "🖐🏻", "🖐🏼", "🖐🏽", "🖐🏾", "🖐🏿"
   "🦻",
   "👃"
 ]);
-function ce(c, s) {
-  return !s || !te.has(c) ? c : c.replace("️", "") + s;
+function ge(s, l) {
+  return !l || !ke.has(s) ? s : s.replace("️", "") + l;
 }
-function Ce({
-  className: c = "",
-  categories: s,
+function Oe({
+  className: s = "",
+  categories: l,
   shortcodes: m = {},
-  defaultQuery: D = "",
+  defaultQuery: P = "",
   autoFocus: k = !1,
   onEmojiSelect: d,
   onSearch: u,
   onCustomEmojiClick: g,
-  customEmojiLabel: H = "Custom emoji"
+  customEmojiLabel: D = "Custom emoji",
+  searchPlaceholder: F = "Search emojis",
+  searchClearLabel: H,
+  searchResultsLabel: $ = "Search Results",
+  emptyTitle: A = "No emojis found",
+  emptyDescription: K = "Try a different search term.",
+  previewHintLabel: Q = "Select an Emoji",
+  skinToneButtonLabel: q = "Select skin tone",
+  skinToneLabel: G = "Skin tone",
+  formatSkinToneLabel: V = _e,
+  closeSkinTonePickerLabel: J = "Close skin tone picker"
 }) {
   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(() => {
+  const [a, U] = c(P), [W, X] = c(
+    ((R = l[0]) == null ? void 0 : R.id) ?? ""
+  ), [N, y] = c(null), [Y, I] = c(null), [v, Z] = c(0), [t, h] = c(!1), S = _(null), b = `${te()}-skin-tone-picker`, ee = je[v], C = _(null), w = _({});
+  ce(() => {
     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) {
+    U(e), u == null || u(e);
+  }, oe = [...new Set(l.flatMap((e) => e.emojis))], T = a ? oe.filter((e) => (m[e] ?? "").includes(a.toLowerCase()) || e === a) : [], f = a ? T.length > 0 ? "search-results" : "empty" : "default";
+  function ie(e) {
     return m[e] ? `:${m[e]}:` : e;
   }
-  function V(e) {
-    const r = w.current[e], p = b.current;
+  function re(e) {
+    const r = w.current[e], p = C.current;
     if (!r || !p) return;
-    const W = r.getBoundingClientRect().top - p.getBoundingClientRect().top + p.scrollTop;
-    p.scrollTo({ top: W, behavior: "smooth" });
+    const le = r.getBoundingClientRect().top - p.getBoundingClientRect().top + p.scrollTop;
+    p.scrollTo({ top: le, behavior: "smooth" });
   }
-  const J = [i["emoji-popover"], c].filter(Boolean).join(" "), U = {
+  const ne = [i["emoji-popover"], s].filter(Boolean).join(" "), se = {
     "aria-label": "",
     width: "80px",
     height: "60px",
-    children: /* @__PURE__ */ o(le, {})
+    children: /* @__PURE__ */ o(fe, {})
   }, E = (e) => {
-    const r = ce(e, Q);
+    const r = ge(e, ee);
     return /* @__PURE__ */ o(
       j,
       {
@@ -120,16 +130,16 @@ function Ce({
       e
     );
   }, z = () => f === "empty" ? /* @__PURE__ */ o(
-    re,
+    ue,
     {
-      illustration: U,
-      title: "No emojis found",
-      description: "Try a different search term."
+      illustration: se,
+      title: A,
+      description: K
     }
   ) : 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(L, { label: $ }),
     /* @__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(
+  ] }) }) : /* @__PURE__ */ o("div", { className: i["emoji-popover__emoji-list"], children: l.map((e) => /* @__PURE__ */ n(
     "div",
     {
       ref: (r) => {
@@ -137,7 +147,7 @@ function Ce({
       },
       className: i["emoji-popover__group"],
       children: [
-        /* @__PURE__ */ o(O, { label: e.label }),
+        /* @__PURE__ */ o(L, { label: e.label }),
         /* @__PURE__ */ o(
           "div",
           {
@@ -152,7 +162,7 @@ function Ce({
     },
     e.id
   )) });
-  return /* @__PURE__ */ n("div", { className: J, children: [
+  return /* @__PURE__ */ n("div", { className: ne, children: [
     /* @__PURE__ */ n("div", { className: i["emoji-popover__header"], children: [
       /* @__PURE__ */ n("div", { className: i["emoji-popover__header-panels"], children: [
         /* @__PURE__ */ o(
@@ -160,31 +170,32 @@ function Ce({
           {
             className: [
               i["emoji-popover__header-main"],
-              a ? i["emoji-popover__header-main--hidden"] : ""
+              t ? i["emoji-popover__header-main--hidden"] : ""
             ].filter(Boolean).join(" "),
-            inert: a,
-            "aria-hidden": a || void 0,
+            inert: t,
+            "aria-hidden": t || void 0,
             children: /* @__PURE__ */ n("div", { className: i["emoji-popover__search-row"], children: [
               /* @__PURE__ */ o(
-                se,
+                he,
                 {
                   ref: S,
-                  placeholder: "Search emojis",
+                  placeholder: F,
                   size: "small",
                   className: i["emoji-popover__search-input"],
-                  value: l,
+                  value: a,
                   onChange: (e) => B(e.target.value),
-                  onClear: () => B("")
+                  onClear: () => B(""),
+                  clearLabel: H
                 }
               ),
-              !l && /* @__PURE__ */ o(
+              !a && /* @__PURE__ */ o(
                 j,
                 {
-                  emoji: P[v],
+                  emoji: O[v],
                   size: "small",
-                  "aria-label": "Select skin tone",
-                  "aria-expanded": a,
-                  "aria-controls": C,
+                  "aria-label": q,
+                  "aria-expanded": t,
+                  "aria-controls": b,
                   onClick: () => h(!0)
                 }
               )
@@ -194,24 +205,24 @@ function Ce({
         /* @__PURE__ */ n(
           "div",
           {
-            id: C,
+            id: b,
             className: [
               i["emoji-popover__skin-tone-picker"],
-              a ? i["emoji-popover__skin-tone-picker--visible"] : ""
+              t ? i["emoji-popover__skin-tone-picker--visible"] : ""
             ].filter(Boolean).join(" "),
-            inert: !a,
-            "aria-hidden": !a || void 0,
+            inert: !t,
+            "aria-hidden": !t || 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(
+              /* @__PURE__ */ o("span", { className: i["emoji-popover__skin-tone-label"], children: G }),
+              /* @__PURE__ */ o("div", { className: i["emoji-popover__skin-tone-options"], children: O.map((e, r) => /* @__PURE__ */ o(
                 j,
                 {
                   emoji: e,
                   size: "small",
                   toggled: v === r,
-                  "aria-label": r === 0 ? "Default skin tone" : `Skin tone ${r}`,
+                  "aria-label": V(r),
                   onClick: () => {
-                    L(r), h(!1);
+                    Z(r), h(!1);
                   }
                 },
                 r
@@ -221,8 +232,8 @@ function Ce({
                 {
                   size: "small",
                   padding: "compact",
-                  icon: /* @__PURE__ */ o(M, { glyph: /* @__PURE__ */ o(ee, {}), size: "16" }),
-                  "aria-label": "Close skin tone picker",
+                  icon: /* @__PURE__ */ o(M, { glyph: /* @__PURE__ */ o(pe, {}), size: "16" }),
+                  "aria-label": J,
                   onClick: () => h(!1)
                 }
               )
@@ -230,32 +241,32 @@ function Ce({
           }
         )
       ] }),
-      !l && /* @__PURE__ */ o("div", { className: i["emoji-popover__categories"], children: s.map((e) => /* @__PURE__ */ o(
+      !a && /* @__PURE__ */ o("div", { className: i["emoji-popover__categories"], children: l.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,
+          active: W === e.id,
           onClick: () => {
-            F(e.id), V(e.id);
+            X(e.id), re(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__ */ o("div", { className: i["emoji-popover__scroll-view"], children: f === "empty" ? z() : /* @__PURE__ */ o(ve, { alwaysVisible: !0, ref: C, 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 })
+      /* @__PURE__ */ o("div", { className: i["emoji-popover__footer-preview"], children: N ? /* @__PURE__ */ n(ae, { children: [
+        /* @__PURE__ */ o(de, { emoji: N, size: "32" }),
+        /* @__PURE__ */ o("span", { className: i["emoji-popover__footer-shortcode"], children: ie(Y ?? "") })
+      ] }) : /* @__PURE__ */ o("span", { className: i["emoji-popover__footer-hint"], children: Q }) }),
+      g && /* @__PURE__ */ o(me, { emphasis: "tertiary", size: "small", onClick: g, children: D })
     ] })
   ] });
 }
 export {
-  Ce as default
+  Oe as default
 };
 //# sourceMappingURL=EmojiPopover.js.map

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

@@ -1 +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 = [\n  '',\n  '\\u{1F3FB}',\n  '\\u{1F3FC}',\n  '\\u{1F3FD}',\n  '\\u{1F3FE}',\n  '\\u{1F3FF}',\n];\n\nconst MODIFIER_BASES = new Set([\n  '👋',\n  '🤚',\n  '✋',\n  '🖐️',\n  '🖖',\n  '👌',\n  '🤌',\n  '🤏',\n  '✌️',\n  '🤞',\n  '🫰',\n  '🤟',\n  '🤘',\n  '🤙',\n  '👈',\n  '👉',\n  '👆',\n  '👇',\n  '☝️',\n  '🫵',\n  '👍',\n  '👎',\n  '✊',\n  '👊',\n  '🤛',\n  '🤜',\n  '👏',\n  '🙌',\n  '🫶',\n  '👐',\n  '🤲',\n  '🙏',\n  '💅',\n  '🤳',\n  '💪',\n  '🦵',\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(\n    categories[0]?.id ?? '',\n  );\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\n      ? 'search-results'\n      : '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 =\n      group.getBoundingClientRect().top -\n      scroller.getBoundingClientRect().top +\n      scroller.scrollTop;\n    scroller.scrollTo({ top, behavior: 'smooth' });\n  }\n\n  const rootClass = [styles['emoji-popover'], className]\n    .filter(Boolean)\n    .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={() => {\n          setHoveredEmoji(displayed);\n          setHoveredBase(emoji);\n        }}\n        onMouseLeave={() => {\n          setHoveredEmoji(null);\n          setHoveredBase(null);\n        }}\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\n            key={cat.id}\n            ref={(el) => {\n              groupRefs.current[cat.id] = el;\n            }}\n            className={styles['emoji-popover__group']}\n          >\n            <MenuGroupHeading label={cat.label} />\n            <div\n              className={[\n                styles['emoji-popover__emoji-row'],\n                cat.wrap === false\n                  ? styles['emoji-popover__emoji-row--nowrap']\n                  : '',\n              ]\n                .filter(Boolean)\n                .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\n                ? styles['emoji-popover__header-main--hidden']\n                : '',\n            ]\n              .filter(Boolean)\n              .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\n                ? styles['emoji-popover__skin-tone-picker--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            inert={!showSkinTonePicker}\n            aria-hidden={!showSkinTonePicker || undefined}\n          >\n            <span className={styles['emoji-popover__skin-tone-label']}>\n              Skin tone\n            </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={() => {\n                    setSkinToneIndex(i);\n                    setShowSkinTonePicker(false);\n                  }}\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={() => {\n                  setActiveCategoryId(cat.id);\n                  scrollToCategory(cat.id);\n                }}\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}>\n            {renderBody()}\n          </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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"}
+{"version":3,"file":"EmojiPopover.js","sources":["../../../src/components/emoji-popover/EmojiPopover.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\nimport type { ComponentType, ReactNode } 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  /** Group heading and category button name. Kept as `string`: it's the button's `aria-label`. */\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. Accepts translated nodes. @default 'Custom emoji' */\n  customEmojiLabel?: ReactNode;\n  /** Search field placeholder. @default 'Search emojis' */\n  searchPlaceholder?: string;\n  /** Accessible name for the search clear button. @default 'Clear search' */\n  searchClearLabel?: string;\n  /** Heading above search results. @default 'Search Results' */\n  searchResultsLabel?: ReactNode;\n  /** Empty search title. @default 'No emojis found' */\n  emptyTitle?: ReactNode;\n  /** Empty search description. @default 'Try a different search term.' */\n  emptyDescription?: ReactNode;\n  /** Footer hint when no emoji is hovered. @default 'Select an Emoji' */\n  previewHintLabel?: ReactNode;\n  /** Accessible name for the skin tone button. @default 'Select skin tone' */\n  skinToneButtonLabel?: string;\n  /** Skin tone picker heading. @default 'Skin tone' */\n  skinToneLabel?: ReactNode;\n  /** Accessible name per skin tone (0 = default). @default 'Default skin tone' / `Skin tone {index}` */\n  formatSkinToneLabel?: (index: number) => string;\n  /** Accessible name for closing the skin tone picker. @default 'Close skin tone picker' */\n  closeSkinTonePickerLabel?: string;\n}\n\nconst defaultFormatSkinToneLabel = (index: number) =>\n  index === 0 ? 'Default skin tone' : `Skin tone ${index}`;\n\nconst SKIN_TONES = ['🖐️', '🖐🏻', '🖐🏼', '🖐🏽', '🖐🏾', '🖐🏿'];\nconst SKIN_TONE_MODIFIERS = [\n  '',\n  '\\u{1F3FB}',\n  '\\u{1F3FC}',\n  '\\u{1F3FD}',\n  '\\u{1F3FE}',\n  '\\u{1F3FF}',\n];\n\nconst MODIFIER_BASES = new Set([\n  '👋',\n  '🤚',\n  '✋',\n  '🖐️',\n  '🖖',\n  '👌',\n  '🤌',\n  '🤏',\n  '✌️',\n  '🤞',\n  '🫰',\n  '🤟',\n  '🤘',\n  '🤙',\n  '👈',\n  '👉',\n  '👆',\n  '👇',\n  '☝️',\n  '🫵',\n  '👍',\n  '👎',\n  '✊',\n  '👊',\n  '🤛',\n  '🤜',\n  '👏',\n  '🙌',\n  '🫶',\n  '👐',\n  '🤲',\n  '🙏',\n  '💅',\n  '🤳',\n  '💪',\n  '🦵',\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  searchPlaceholder = 'Search emojis',\n  searchClearLabel,\n  searchResultsLabel = 'Search Results',\n  emptyTitle = 'No emojis found',\n  emptyDescription = 'Try a different search term.',\n  previewHintLabel = 'Select an Emoji',\n  skinToneButtonLabel = 'Select skin tone',\n  skinToneLabel = 'Skin tone',\n  formatSkinToneLabel = defaultFormatSkinToneLabel,\n  closeSkinTonePickerLabel = 'Close skin tone picker',\n}: EmojiPopoverProps) {\n  const [query, setQuery] = useState(defaultQuery);\n  const [activeCategoryId, setActiveCategoryId] = useState(\n    categories[0]?.id ?? '',\n  );\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\n      ? 'search-results'\n      : '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 =\n      group.getBoundingClientRect().top -\n      scroller.getBoundingClientRect().top +\n      scroller.scrollTop;\n    scroller.scrollTo({ top, behavior: 'smooth' });\n  }\n\n  const rootClass = [styles['emoji-popover'], className]\n    .filter(Boolean)\n    .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={() => {\n          setHoveredEmoji(displayed);\n          setHoveredBase(emoji);\n        }}\n        onMouseLeave={() => {\n          setHoveredEmoji(null);\n          setHoveredBase(null);\n        }}\n        onClick={() => onEmojiSelect?.(displayed)}\n      />\n    );\n  };\n\n  const renderBody = () => {\n    if (computedState === 'empty') {\n      return (\n        <EmptyState\n          illustration={emptyIllustration}\n          title={emptyTitle}\n          description={emptyDescription}\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={searchResultsLabel} />\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\n            key={cat.id}\n            ref={(el) => {\n              groupRefs.current[cat.id] = el;\n            }}\n            className={styles['emoji-popover__group']}\n          >\n            <MenuGroupHeading label={cat.label} />\n            <div\n              className={[\n                styles['emoji-popover__emoji-row'],\n                cat.wrap === false\n                  ? styles['emoji-popover__emoji-row--nowrap']\n                  : '',\n              ]\n                .filter(Boolean)\n                .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\n                ? styles['emoji-popover__header-main--hidden']\n                : '',\n            ]\n              .filter(Boolean)\n              .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={searchPlaceholder}\n                size=\"small\"\n                className={styles['emoji-popover__search-input']}\n                value={query}\n                onChange={(e) => handleQueryChange(e.target.value)}\n                onClear={() => handleQueryChange('')}\n                clearLabel={searchClearLabel}\n              />\n              {!query && (\n                <EmojiButton\n                  emoji={SKIN_TONES[skinToneIndex]}\n                  size=\"small\"\n                  aria-label={skinToneButtonLabel}\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\n                ? styles['emoji-popover__skin-tone-picker--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            inert={!showSkinTonePicker}\n            aria-hidden={!showSkinTonePicker || undefined}\n          >\n            <span className={styles['emoji-popover__skin-tone-label']}>\n              {skinToneLabel}\n            </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={formatSkinToneLabel(i)}\n                  onClick={() => {\n                    setSkinToneIndex(i);\n                    setShowSkinTonePicker(false);\n                  }}\n                />\n              ))}\n            </div>\n            <IconButton\n              size=\"small\"\n              padding=\"compact\"\n              icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n              aria-label={closeSkinTonePickerLabel}\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={() => {\n                  setActiveCategoryId(cat.id);\n                  scrollToCategory(cat.id);\n                }}\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}>\n            {renderBody()}\n          </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              {previewHintLabel}\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":["defaultFormatSkinToneLabel","index","SKIN_TONES","SKIN_TONE_MODIFIERS","MODIFIER_BASES","applyModifier","emoji","modifier","EmojiPopover","className","categories","shortcodes","defaultQuery","autoFocus","onEmojiSelect","onSearch","onCustomEmojiClick","customEmojiLabel","searchPlaceholder","searchClearLabel","searchResultsLabel","emptyTitle","emptyDescription","previewHintLabel","skinToneButtonLabel","skinToneLabel","formatSkinToneLabel","closeSkinTonePickerLabel","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/empty-state/EmptyState.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),i=require("../button/Button.cjs"),n=require("../illustration/Illustration.cjs"),d=require("../scrollbar/Scrollbar.cjs"),t=require("./EmptyState.module.scss.cjs");function c({illustration:l,title:u,description:s,action:a,className:r=""}){return e.jsx(d.default,{className:[t.default["empty-state"],r].filter(Boolean).join(" "),children:e.jsxs("div",{className:t.default["empty-state__container"],children:[l!=null&&e.jsx("div",{className:t.default["empty-state__illustration"],children:e.jsx(n.default,{...l})}),e.jsxs("div",{className:t.default["empty-state__titles"],children:[e.jsx("h2",{className:t.default["empty-state__title"],children:u}),s!=null&&e.jsx("p",{className:t.default["empty-state__description"],children:s})]}),a!=null&&e.jsx("div",{className:t.default["empty-state__action"],children:e.jsx(i.default,{...a})})]})})}exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("../button/Button.cjs"),d=require("../illustration/Illustration.cjs"),c=require("../scrollbar/Scrollbar.cjs"),t=require("./EmptyState.module.scss.cjs");function m({illustration:l,title:u,description:s,action:a,className:r="",...i}){return e.jsx(c.default,{...i,className:[t.default["empty-state"],r].filter(Boolean).join(" "),children:e.jsxs("div",{className:t.default["empty-state__container"],children:[l!=null&&e.jsx("div",{className:t.default["empty-state__illustration"],children:e.jsx(d.default,{...l})}),e.jsxs("div",{className:t.default["empty-state__titles"],children:[e.jsx("h2",{className:t.default["empty-state__title"],children:u}),s!=null&&e.jsx("p",{className:t.default["empty-state__description"],children:s})]}),a!=null&&e.jsx("div",{className:t.default["empty-state__action"],children:e.jsx(n.default,{...a})})]})})}exports.default=m;
 //# sourceMappingURL=EmptyState.cjs.map

package/dist/components/empty-state/EmptyState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.cjs","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport interface EmptyStateProps {\n  /** Illustration props (children = the SVG component). Rendered above the title. */\n  illustration?: IllustrationProps;\n  /** Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body description. Supports ReactNode for inline formatting. */\n  description?: ReactNode;\n  /** Button props (children = label). Rendered below the description. */\n  action?: ButtonProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n  illustration,\n  title,\n  description,\n  action,\n  className = '',\n}: EmptyStateProps) {\n  return (\n    <Scrollbar\n      className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n    >\n      <div className={styles['empty-state__container']}>\n        {illustration != null && (\n          <div className={styles['empty-state__illustration']}>\n            <Illustration {...illustration} />\n          </div>\n        )}\n        <div className={styles['empty-state__titles']}>\n          <h2 className={styles['empty-state__title']}>{title}</h2>\n          {description != null && (\n            <p className={styles['empty-state__description']}>{description}</p>\n          )}\n        </div>\n        {action != null && (\n          <div className={styles['empty-state__action']}>\n            <Button {...action} />\n          </div>\n        )}\n      </div>\n    </Scrollbar>\n  );\n}\n"],"names":["EmptyState","illustration","title","description","action","className","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":"mTA0BA,SAAwBA,EAAW,CACjC,aAAAC,EACA,MAAAC,EACA,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,EACd,EAAoB,CAClB,OACEC,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAW,CAACC,UAAO,aAAa,EAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAEtE,SAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWD,UAAO,wBAAwB,EAC5C,SAAA,CAAAP,GAAgB,MACfK,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAO,2BAA2B,EAChD,SAAAF,EAAAA,IAACI,EAAAA,QAAA,CAAc,GAAGT,CAAA,CAAc,CAAA,CAClC,EAEFQ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,qBAAqB,EAC1C,SAAA,CAAAF,MAAC,KAAA,CAAG,UAAWE,EAAAA,QAAO,oBAAoB,EAAI,SAAAN,EAAM,EACnDC,GAAe,MACdG,EAAAA,IAAC,IAAA,CAAE,UAAWE,EAAAA,QAAO,0BAA0B,EAAI,SAAAL,CAAA,CAAY,CAAA,EAEnE,EACCC,GAAU,MACTE,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAO,qBAAqB,EAC1C,SAAAF,EAAAA,IAACK,EAAAA,QAAA,CAAQ,GAAGP,CAAA,CAAQ,CAAA,CACtB,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN"}
+{"version":3,"file":"EmptyState.cjs","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport interface EmptyStateProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'onScroll'\n> {\n  /** Illustration props (children = the SVG component). Rendered above the title. */\n  illustration?: IllustrationProps;\n  /** Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body description. Supports ReactNode for inline formatting. */\n  description?: ReactNode;\n  /** Button props (children = label). Rendered below the description. */\n  action?: ButtonProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n  illustration,\n  title,\n  description,\n  action,\n  className = '',\n  ...rest\n}: EmptyStateProps) {\n  return (\n    <Scrollbar\n      {...rest}\n      className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n    >\n      <div className={styles['empty-state__container']}>\n        {illustration != null && (\n          <div className={styles['empty-state__illustration']}>\n            <Illustration {...illustration} />\n          </div>\n        )}\n        <div className={styles['empty-state__titles']}>\n          <h2 className={styles['empty-state__title']}>{title}</h2>\n          {description != null && (\n            <p className={styles['empty-state__description']}>{description}</p>\n          )}\n        </div>\n        {action != null && (\n          <div className={styles['empty-state__action']}>\n            <Button {...action} />\n          </div>\n        )}\n      </div>\n    </Scrollbar>\n  );\n}\n"],"names":["EmptyState","illustration","title","description","action","className","rest","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":"mTA6BA,SAAwBA,EAAW,CACjC,aAAAC,EACA,MAAAC,EACA,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAoB,CAClB,OACEC,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGF,EACJ,UAAW,CAACG,UAAO,aAAa,EAAGJ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAEtE,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWD,UAAO,wBAAwB,EAC5C,SAAA,CAAAR,GAAgB,MACfM,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAO,2BAA2B,EAChD,SAAAF,EAAAA,IAACI,EAAAA,QAAA,CAAc,GAAGV,CAAA,CAAc,CAAA,CAClC,EAEFS,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,qBAAqB,EAC1C,SAAA,CAAAF,MAAC,KAAA,CAAG,UAAWE,EAAAA,QAAO,oBAAoB,EAAI,SAAAP,EAAM,EACnDC,GAAe,MACdI,EAAAA,IAAC,IAAA,CAAE,UAAWE,EAAAA,QAAO,0BAA0B,EAAI,SAAAN,CAAA,CAAY,CAAA,EAEnE,EACCC,GAAU,MACTG,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAO,qBAAqB,EAC1C,SAAAF,EAAAA,IAACK,EAAAA,QAAA,CAAQ,GAAGR,CAAA,CAAQ,CAAA,CACtB,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN"}

package/dist/components/empty-state/EmptyState.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { ButtonProps } from '../button/Button';
 import { IllustrationProps } from '../illustration/Illustration';
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'onScroll'> {
     /** Illustration props (children = the SVG component). Rendered above the title. */
     illustration?: IllustrationProps;
     /** Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
@@ -18,5 +18,5 @@ export interface EmptyStateProps {
  * search results, no files. It pairs an illustration with a short explanation and, when
  * there's something the user can do next, a single action.
  */
-export default function EmptyState({ illustration, title, description, action, className, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export default function EmptyState({ illustration, title, description, action, className, ...rest }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EmptyState.d.ts.map

package/dist/components/empty-state/EmptyState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAIhF,MAAM,WAAW,eAAe;IAC9B,mFAAmF;IACnF,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,2EAA2E;IAC3E,KAAK,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uEAAuE;IACvE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,YAAY,EACZ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAc,GACf,EAAE,eAAe,2CAyBjB"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAIhF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,UAAU,CAClC;IACC,mFAAmF;IACnF,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,2EAA2E;IAC3E,KAAK,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uEAAuE;IACvE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,YAAY,EACZ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAc,EACd,GAAG,IAAI,EACR,EAAE,eAAe,2CA0BjB"}

package/dist/components/empty-state/EmptyState.js

@@ -1,31 +1,33 @@
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import n from "../button/Button.js";
-import o from "../illustration/Illustration.js";
-import c from "../scrollbar/Scrollbar.js";
+import o from "../button/Button.js";
+import c from "../illustration/Illustration.js";
+import p from "../scrollbar/Scrollbar.js";
 import e from "./EmptyState.module.scss.js";
-function h({
+function u({
   illustration: l,
   title: r,
   description: s,
   action: a,
-  className: i = ""
+  className: i = "",
+  ...n
 }) {
   return /* @__PURE__ */ t(
-    c,
+    p,
     {
+      ...n,
       className: [e["empty-state"], i].filter(Boolean).join(" "),
       children: /* @__PURE__ */ m("div", { className: e["empty-state__container"], children: [
-        l != null && /* @__PURE__ */ t("div", { className: e["empty-state__illustration"], children: /* @__PURE__ */ t(o, { ...l }) }),
+        l != null && /* @__PURE__ */ t("div", { className: e["empty-state__illustration"], children: /* @__PURE__ */ t(c, { ...l }) }),
         /* @__PURE__ */ m("div", { className: e["empty-state__titles"], children: [
           /* @__PURE__ */ t("h2", { className: e["empty-state__title"], children: r }),
           s != null && /* @__PURE__ */ t("p", { className: e["empty-state__description"], children: s })
         ] }),
-        a != null && /* @__PURE__ */ t("div", { className: e["empty-state__action"], children: /* @__PURE__ */ t(n, { ...a }) })
+        a != null && /* @__PURE__ */ t("div", { className: e["empty-state__action"], children: /* @__PURE__ */ t(o, { ...a }) })
       ] })
     }
   );
 }
 export {
-  h as default
+  u as default
 };
 //# sourceMappingURL=EmptyState.js.map

package/dist/components/empty-state/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport interface EmptyStateProps {\n  /** Illustration props (children = the SVG component). Rendered above the title. */\n  illustration?: IllustrationProps;\n  /** Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body description. Supports ReactNode for inline formatting. */\n  description?: ReactNode;\n  /** Button props (children = label). Rendered below the description. */\n  action?: ButtonProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n  illustration,\n  title,\n  description,\n  action,\n  className = '',\n}: EmptyStateProps) {\n  return (\n    <Scrollbar\n      className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n    >\n      <div className={styles['empty-state__container']}>\n        {illustration != null && (\n          <div className={styles['empty-state__illustration']}>\n            <Illustration {...illustration} />\n          </div>\n        )}\n        <div className={styles['empty-state__titles']}>\n          <h2 className={styles['empty-state__title']}>{title}</h2>\n          {description != null && (\n            <p className={styles['empty-state__description']}>{description}</p>\n          )}\n        </div>\n        {action != null && (\n          <div className={styles['empty-state__action']}>\n            <Button {...action} />\n          </div>\n        )}\n      </div>\n    </Scrollbar>\n  );\n}\n"],"names":["EmptyState","illustration","title","description","action","className","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":";;;;;AA0BA,SAAwBA,EAAW;AAAA,EACjC,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAoB;AAClB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,aAAa,GAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEtE,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAA;AAAA,QAAAP,KAAgB,QACf,gBAAAK,EAAC,OAAA,EAAI,WAAWE,EAAO,2BAA2B,GAChD,UAAA,gBAAAF,EAACI,GAAA,EAAc,GAAGT,EAAA,CAAc,EAAA,CAClC;AAAA,QAEF,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,qBAAqB,GAC1C,UAAA;AAAA,UAAA,gBAAAF,EAAC,MAAA,EAAG,WAAWE,EAAO,oBAAoB,GAAI,UAAAN,GAAM;AAAA,UACnDC,KAAe,QACd,gBAAAG,EAAC,KAAA,EAAE,WAAWE,EAAO,0BAA0B,GAAI,UAAAL,EAAA,CAAY;AAAA,QAAA,GAEnE;AAAA,QACCC,KAAU,QACT,gBAAAE,EAAC,OAAA,EAAI,WAAWE,EAAO,qBAAqB,GAC1C,UAAA,gBAAAF,EAACK,GAAA,EAAQ,GAAGP,EAAA,CAAQ,EAAA,CACtB;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"EmptyState.js","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport interface EmptyStateProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'onScroll'\n> {\n  /** Illustration props (children = the SVG component). Rendered above the title. */\n  illustration?: IllustrationProps;\n  /** Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body description. Supports ReactNode for inline formatting. */\n  description?: ReactNode;\n  /** Button props (children = label). Rendered below the description. */\n  action?: ButtonProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n  illustration,\n  title,\n  description,\n  action,\n  className = '',\n  ...rest\n}: EmptyStateProps) {\n  return (\n    <Scrollbar\n      {...rest}\n      className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n    >\n      <div className={styles['empty-state__container']}>\n        {illustration != null && (\n          <div className={styles['empty-state__illustration']}>\n            <Illustration {...illustration} />\n          </div>\n        )}\n        <div className={styles['empty-state__titles']}>\n          <h2 className={styles['empty-state__title']}>{title}</h2>\n          {description != null && (\n            <p className={styles['empty-state__description']}>{description}</p>\n          )}\n        </div>\n        {action != null && (\n          <div className={styles['empty-state__action']}>\n            <Button {...action} />\n          </div>\n        )}\n      </div>\n    </Scrollbar>\n  );\n}\n"],"names":["EmptyState","illustration","title","description","action","className","rest","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":";;;;;AA6BA,SAAwBA,EAAW;AAAA,EACjC,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAoB;AAClB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAW,CAACG,EAAO,aAAa,GAAGJ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEtE,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAA;AAAA,QAAAR,KAAgB,QACf,gBAAAM,EAAC,OAAA,EAAI,WAAWE,EAAO,2BAA2B,GAChD,UAAA,gBAAAF,EAACI,GAAA,EAAc,GAAGV,EAAA,CAAc,EAAA,CAClC;AAAA,QAEF,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,qBAAqB,GAC1C,UAAA;AAAA,UAAA,gBAAAF,EAAC,MAAA,EAAG,WAAWE,EAAO,oBAAoB,GAAI,UAAAP,GAAM;AAAA,UACnDC,KAAe,QACd,gBAAAI,EAAC,KAAA,EAAE,WAAWE,EAAO,0BAA0B,GAAI,UAAAN,EAAA,CAAY;AAAA,QAAA,GAEnE;AAAA,QACCC,KAAU,QACT,gBAAAG,EAAC,OAAA,EAAI,WAAWE,EAAO,qBAAqB,GAC1C,UAAA,gBAAAF,EAACK,GAAA,EAAQ,GAAGR,EAAA,CAAQ,EAAA,CACtB;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/error-message/ErrorMessage.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("../icon/Icon.cjs"),__o=require("@mattermost/compass-icons/components/alert-circle-outline.js"),o=__o?.default??__o,r=require("./ErrorMessage.module.scss.cjs");function n({className:s="",message:t}){const a=[r.default["error-message"],s].filter(Boolean).join(" ");return e.jsxs("div",{className:a,role:"alert",children:[e.jsx("span",{className:r.default["error-message__icon"],"aria-hidden":!0,children:e.jsx(l.default,{size:"12",glyph:e.jsx(o,{})})}),e.jsx("span",{className:r.default["error-message__text"],children:t})]})}exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("../icon/Icon.cjs"),__n=require("@mattermost/compass-icons/components/alert-circle-outline.js"),n=__n?.default??__n,r=require("./ErrorMessage.module.scss.cjs");function i({className:s="",message:t,...a}){const l=[r.default["error-message"],s].filter(Boolean).join(" ");return e.jsxs("div",{...a,className:l,role:"alert",children:[e.jsx("span",{className:r.default["error-message__icon"],"aria-hidden":!0,children:e.jsx(o.default,{size:"12",glyph:e.jsx(n,{})})}),e.jsx("span",{className:r.default["error-message__text"],children:t})]})}exports.default=i;
 //# sourceMappingURL=ErrorMessage.cjs.map

package/dist/components/error-message/ErrorMessage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.cjs","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport styles from './ErrorMessage.module.scss';\n\nexport interface ErrorMessageProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The error message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n}\n\n/**\n * Error Message is the inline red error line that appears below a form input when validation\n * fails. It pairs an alert glyph with a short, human-readable explanation so the user can\n * fix the field and move on.\n */\nexport default function ErrorMessage({\n  className = '',\n  message,\n}: ErrorMessageProps) {\n  const rootClass = [styles['error-message'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"alert\">\n      <span className={styles['error-message__icon']} aria-hidden>\n        <Icon size=\"12\" glyph={<AlertCircleOutlineIcon />} />\n      </span>\n      <span className={styles['error-message__text']}>{message}</span>\n    </div>\n  );\n}\n"],"names":["ErrorMessage","className","message","rootClass","styles","jsxs","jsx","Icon","AlertCircleOutlineIcon"],"mappings":"kSAiBA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,CACF,EAAsB,CACpB,MAAMC,EAAY,CAACC,UAAO,eAAe,EAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAW,KAAK,QAC9B,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAuB,EAAI,EACrD,QACC,OAAA,CAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAI,SAAAF,CAAA,CAAQ,CAAA,EAC3D,CAEJ"}
+{"version":3,"file":"ErrorMessage.cjs","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport styles from './ErrorMessage.module.scss';\n\nexport interface ErrorMessageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The error message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n}\n\n/**\n * Error Message is the inline red error line that appears below a form input when validation\n * fails. It pairs an alert glyph with a short, human-readable explanation so the user can\n * fix the field and move on.\n */\nexport default function ErrorMessage({\n  className = '',\n  message,\n  ...rest\n}: ErrorMessageProps) {\n  const rootClass = [styles['error-message'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div {...rest} className={rootClass} role=\"alert\">\n      <span className={styles['error-message__icon']} aria-hidden>\n        <Icon size=\"12\" glyph={<AlertCircleOutlineIcon />} />\n      </span>\n      <span className={styles['error-message__text']}>{message}</span>\n    </div>\n  );\n}\n"],"names":["ErrorMessage","className","message","rest","rootClass","styles","jsx","Icon","AlertCircleOutlineIcon"],"mappings":"kSAiBA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,EACA,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAACC,UAAO,eAAe,EAAGJ,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,cACG,MAAA,CAAK,GAAGE,EAAM,UAAWC,EAAW,KAAK,QACxC,SAAA,CAAAE,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAC,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAuB,EAAI,EACrD,QACC,OAAA,CAAK,UAAWH,EAAAA,QAAO,qBAAqB,EAAI,SAAAH,CAAA,CAAQ,CAAA,EAC3D,CAEJ"}

package/dist/components/error-message/ErrorMessage.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-export interface ErrorMessageProps {
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ErrorMessageProps extends HTMLAttributes<HTMLDivElement> {
     /** Optional CSS class name. */
     className?: string;
     /** The error message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
@@ -10,5 +10,5 @@ export interface ErrorMessageProps {
  * fails. It pairs an alert glyph with a short, human-readable explanation so the user can
  * fix the field and move on.
  */
-export default function ErrorMessage({ className, message, }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
+export default function ErrorMessage({ className, message, ...rest }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ErrorMessage.d.ts.map

package/dist/components/error-message/ErrorMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,OAAO,EAAE,SAAS,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,GACR,EAAE,iBAAiB,2CAanB"}
+{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,OAAO,EAAE,SAAS,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,EACP,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAanB"}

package/dist/components/error-message/ErrorMessage.js

@@ -1,18 +1,19 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import i from "../icon/Icon.js";
-import __l from "@mattermost/compass-icons/components/alert-circle-outline.js";const l=__l&&__l.default?__l.default:__l;
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import l from "../icon/Icon.js";
+import __n from "@mattermost/compass-icons/components/alert-circle-outline.js";const n=__n&&__n.default?__n.default:__n;
 import e from "./ErrorMessage.module.scss.js";
-function d({
+function f({
   className: s = "",
-  message: o
+  message: o,
+  ...a
 }) {
-  const a = [e["error-message"], s].filter(Boolean).join(" ");
-  return /* @__PURE__ */ t("div", { className: a, role: "alert", children: [
-    /* @__PURE__ */ r("span", { className: e["error-message__icon"], "aria-hidden": !0, children: /* @__PURE__ */ r(i, { size: "12", glyph: /* @__PURE__ */ r(l, {}) }) }),
+  const t = [e["error-message"], s].filter(Boolean).join(" ");
+  return /* @__PURE__ */ i("div", { ...a, className: t, role: "alert", children: [
+    /* @__PURE__ */ r("span", { className: e["error-message__icon"], "aria-hidden": !0, children: /* @__PURE__ */ r(l, { size: "12", glyph: /* @__PURE__ */ r(n, {}) }) }),
     /* @__PURE__ */ r("span", { className: e["error-message__text"], children: o })
   ] });
 }
 export {
-  d as default
+  f as default
 };
 //# sourceMappingURL=ErrorMessage.js.map