npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.12 → 0.1.0-alpha.13 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (360) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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