@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/components/emoji/Emoji.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Emoji.cjs","sources":["../../../src/components/emoji/Emoji.tsx"],"sourcesContent":["import styles from './Emoji.module.scss';\n\nexport type EmojiSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\nexport interface EmojiProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size from the Mattermost icon scale. Default 24. */\n  size?: EmojiSize;\n}\n\nconst SIZE_CLASS_MAP: Record<EmojiSize, string> = {\n  '10': styles['emoji--size-10'],\n  '12': styles['emoji--size-12'],\n  '16': styles['emoji--size-16'],\n  '20': styles['emoji--size-20'],\n  '24': styles['emoji--size-24'],\n  '28': styles['emoji--size-28'],\n  '32': styles['emoji--size-32'],\n  '40': styles['emoji--size-40'],\n  '52': styles['emoji--size-52'],\n  '64': styles['emoji--size-64'],\n  '104': styles['emoji--size-104'],\n};\n\n/**\n * Emoji is a compact, inline visual for conveying emotion, intent, or status — on messages,\n * in reactions, in pickers, or sprinkled through UI copy. The component standardises sizing\n * so native Unicode and custom workspace emoji render at a consistent footprint alongside\n * Icon.\n */\nexport default function Emoji({\n  className = '',\n  emoji,\n  size = '24',\n}: EmojiProps) {\n  const sizeClass = SIZE_CLASS_MAP[size];\n  const rootClass = [\n    styles.emoji,\n    sizeClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={rootClass} role=\"img\" aria-hidden>\n      {emoji}\n    </span>\n  );\n}\n"],"names":["SIZE_CLASS_MAP","styles","Emoji","className","emoji","size","sizeClass","rootClass","jsx"],"mappings":"sLAwBMA,EAA4C,CAChD,GAAMC,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,IAAOA,EAAAA,QAAO,iBAAiB,CACjC,EAQA,SAAwBC,EAAM,CAC5B,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,IACT,EAAe,CACb,MAAMC,EAAYN,EAAeK,CAAI,EAC/BE,EAAY,CAChBN,EAAAA,QAAO,MACPK,EACAH,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEK,MAAC,QAAK,UAAWD,EAAW,KAAK,MAAM,cAAW,GAC/C,SAAAH,CAAA,CACH,CAEJ"}
+{"version":3,"file":"Emoji.cjs","sources":["../../../src/components/emoji/Emoji.tsx"],"sourcesContent":["import styles from './Emoji.module.scss';\n\nexport type EmojiSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\nexport interface EmojiProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size from the Mattermost icon scale. Default 24. */\n  size?: EmojiSize;\n}\n\nconst SIZE_CLASS_MAP: Record<EmojiSize, string> = {\n  '10': styles['emoji--size-10'],\n  '12': styles['emoji--size-12'],\n  '16': styles['emoji--size-16'],\n  '20': styles['emoji--size-20'],\n  '24': styles['emoji--size-24'],\n  '28': styles['emoji--size-28'],\n  '32': styles['emoji--size-32'],\n  '40': styles['emoji--size-40'],\n  '52': styles['emoji--size-52'],\n  '64': styles['emoji--size-64'],\n  '104': styles['emoji--size-104'],\n};\n\n/**\n * Emoji is a compact, inline visual for conveying emotion, intent, or status — on messages,\n * in reactions, in pickers, or sprinkled through UI copy. The component standardises sizing\n * so native Unicode and custom workspace emoji render at a consistent footprint alongside\n * Icon.\n */\nexport default function Emoji({\n  className = '',\n  emoji,\n  size = '24',\n}: EmojiProps) {\n  const sizeClass = SIZE_CLASS_MAP[size];\n  const rootClass = [styles.emoji, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={rootClass} role=\"img\" aria-hidden>\n      {emoji}\n    </span>\n  );\n}\n"],"names":["SIZE_CLASS_MAP","styles","Emoji","className","emoji","size","sizeClass","rootClass","jsx"],"mappings":"sLAwBMA,EAA4C,CAChD,GAAMC,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,IAAOA,EAAAA,QAAO,iBAAiB,CACjC,EAQA,SAAwBC,EAAM,CAC5B,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,IACT,EAAe,CACb,MAAMC,EAAYN,EAAeK,CAAI,EAC/BE,EAAY,CAACN,UAAO,MAAOK,EAAWH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEK,MAAC,QAAK,UAAWD,EAAW,KAAK,MAAM,cAAW,GAC/C,SAAAH,CAAA,CACH,CAEJ"}

package/dist/components/emoji/Emoji.css

@@ -0,0 +1 @@
+._emoji_o7g7z_13{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}._emoji--size-10_o7g7z_21{width:var(--icon-size-10);height:var(--icon-size-10);font-size:var(--icon-size-10)}._emoji--size-12_o7g7z_26{width:var(--icon-size-12);height:var(--icon-size-12);font-size:var(--icon-size-12)}._emoji--size-16_o7g7z_31{width:var(--icon-size-16);height:var(--icon-size-16);font-size:var(--icon-size-16)}._emoji--size-20_o7g7z_36{width:var(--icon-size-20);height:var(--icon-size-20);font-size:var(--icon-size-20)}._emoji--size-24_o7g7z_41{width:var(--icon-size-24);height:var(--icon-size-24);font-size:var(--icon-size-24)}._emoji--size-28_o7g7z_46{width:var(--icon-size-28);height:var(--icon-size-28);font-size:var(--icon-size-28)}._emoji--size-32_o7g7z_51{width:var(--icon-size-32);height:var(--icon-size-32);font-size:var(--icon-size-32)}._emoji--size-40_o7g7z_56{width:var(--icon-size-40);height:var(--icon-size-40);font-size:var(--icon-size-40)}._emoji--size-52_o7g7z_61{width:var(--icon-size-52);height:var(--icon-size-52);font-size:var(--icon-size-52)}._emoji--size-64_o7g7z_66{width:var(--icon-size-64);height:var(--icon-size-64);font-size:var(--icon-size-64)}._emoji--size-104_o7g7z_71{width:var(--icon-size-104);height:var(--icon-size-104);font-size:var(--icon-size-104)}

package/dist/components/emoji/Emoji.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Emoji.d.ts","sourceRoot":"","sources":["../../../src/components/emoji/Emoji.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GACjB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAC;AAEV,MAAM,WAAW,UAAU;IACzB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAgBD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,KAAK,EACL,IAAW,GACZ,EAAE,UAAU,2CAeZ"}
+{"version":3,"file":"Emoji.d.ts","sourceRoot":"","sources":["../../../src/components/emoji/Emoji.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GACjB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAC;AAEV,MAAM,WAAW,UAAU;IACzB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAgBD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,KAAK,EACL,IAAW,GACZ,EAAE,UAAU,2CAWZ"}

package/dist/components/emoji/Emoji.js

@@ -18,11 +18,7 @@ function a({
   emoji: o,
   size: s = "24"
 }) {
-  const m = t[s], j = [
-    e.emoji,
-    m,
-    i
-  ].filter(Boolean).join(" ");
+  const m = t[s], j = [e.emoji, m, i].filter(Boolean).join(" ");
   return /* @__PURE__ */ r("span", { className: j, role: "img", "aria-hidden": !0, children: o });
 }
 export {

package/dist/components/emoji/Emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"Emoji.js","sources":["../../../src/components/emoji/Emoji.tsx"],"sourcesContent":["import styles from './Emoji.module.scss';\n\nexport type EmojiSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\nexport interface EmojiProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size from the Mattermost icon scale. Default 24. */\n  size?: EmojiSize;\n}\n\nconst SIZE_CLASS_MAP: Record<EmojiSize, string> = {\n  '10': styles['emoji--size-10'],\n  '12': styles['emoji--size-12'],\n  '16': styles['emoji--size-16'],\n  '20': styles['emoji--size-20'],\n  '24': styles['emoji--size-24'],\n  '28': styles['emoji--size-28'],\n  '32': styles['emoji--size-32'],\n  '40': styles['emoji--size-40'],\n  '52': styles['emoji--size-52'],\n  '64': styles['emoji--size-64'],\n  '104': styles['emoji--size-104'],\n};\n\n/**\n * Emoji is a compact, inline visual for conveying emotion, intent, or status — on messages,\n * in reactions, in pickers, or sprinkled through UI copy. The component standardises sizing\n * so native Unicode and custom workspace emoji render at a consistent footprint alongside\n * Icon.\n */\nexport default function Emoji({\n  className = '',\n  emoji,\n  size = '24',\n}: EmojiProps) {\n  const sizeClass = SIZE_CLASS_MAP[size];\n  const rootClass = [\n    styles.emoji,\n    sizeClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={rootClass} role=\"img\" aria-hidden>\n      {emoji}\n    </span>\n  );\n}\n"],"names":["SIZE_CLASS_MAP","styles","Emoji","className","emoji","size","sizeClass","rootClass","jsx"],"mappings":";;AAwBA,MAAMA,IAA4C;AAAA,EAChD,IAAMC,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,KAAOA,EAAO,iBAAiB;AACjC;AAQA,SAAwBC,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,MAAAC,IAAO;AACT,GAAe;AACb,QAAMC,IAAYN,EAAeK,CAAI,GAC/BE,IAAY;AAAA,IAChBN,EAAO;AAAA,IACPK;AAAA,IACAH;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAK,EAAC,UAAK,WAAWD,GAAW,MAAK,OAAM,eAAW,IAC/C,UAAAH,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"Emoji.js","sources":["../../../src/components/emoji/Emoji.tsx"],"sourcesContent":["import styles from './Emoji.module.scss';\n\nexport type EmojiSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\nexport interface EmojiProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size from the Mattermost icon scale. Default 24. */\n  size?: EmojiSize;\n}\n\nconst SIZE_CLASS_MAP: Record<EmojiSize, string> = {\n  '10': styles['emoji--size-10'],\n  '12': styles['emoji--size-12'],\n  '16': styles['emoji--size-16'],\n  '20': styles['emoji--size-20'],\n  '24': styles['emoji--size-24'],\n  '28': styles['emoji--size-28'],\n  '32': styles['emoji--size-32'],\n  '40': styles['emoji--size-40'],\n  '52': styles['emoji--size-52'],\n  '64': styles['emoji--size-64'],\n  '104': styles['emoji--size-104'],\n};\n\n/**\n * Emoji is a compact, inline visual for conveying emotion, intent, or status — on messages,\n * in reactions, in pickers, or sprinkled through UI copy. The component standardises sizing\n * so native Unicode and custom workspace emoji render at a consistent footprint alongside\n * Icon.\n */\nexport default function Emoji({\n  className = '',\n  emoji,\n  size = '24',\n}: EmojiProps) {\n  const sizeClass = SIZE_CLASS_MAP[size];\n  const rootClass = [styles.emoji, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={rootClass} role=\"img\" aria-hidden>\n      {emoji}\n    </span>\n  );\n}\n"],"names":["SIZE_CLASS_MAP","styles","Emoji","className","emoji","size","sizeClass","rootClass","jsx"],"mappings":";;AAwBA,MAAMA,IAA4C;AAAA,EAChD,IAAMC,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,KAAOA,EAAO,iBAAiB;AACjC;AAQA,SAAwBC,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,MAAAC,IAAO;AACT,GAAe;AACb,QAAMC,IAAYN,EAAeK,CAAI,GAC/BE,IAAY,CAACN,EAAO,OAAOK,GAAWH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAK,EAAC,UAAK,WAAWD,GAAW,MAAK,OAAM,eAAW,IAC/C,UAAAH,EAAA,CACH;AAEJ;"}

package/dist/components/emoji/Emoji.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Emoji.module.css');const e="_emoji_1pc05_2",i={emoji:e,"emoji--size-10":"_emoji--size-10_1pc05_10","emoji--size-12":"_emoji--size-12_1pc05_15","emoji--size-16":"_emoji--size-16_1pc05_20","emoji--size-20":"_emoji--size-20_1pc05_25","emoji--size-24":"_emoji--size-24_1pc05_30","emoji--size-28":"_emoji--size-28_1pc05_35","emoji--size-32":"_emoji--size-32_1pc05_40","emoji--size-40":"_emoji--size-40_1pc05_45","emoji--size-52":"_emoji--size-52_1pc05_50","emoji--size-64":"_emoji--size-64_1pc05_55","emoji--size-104":"_emoji--size-104_1pc05_60"};exports.default=i;exports.emoji=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Emoji.css');const e="_emoji_o7g7z_13",i={emoji:e,"emoji--size-10":"_emoji--size-10_o7g7z_21","emoji--size-12":"_emoji--size-12_o7g7z_26","emoji--size-16":"_emoji--size-16_o7g7z_31","emoji--size-20":"_emoji--size-20_o7g7z_36","emoji--size-24":"_emoji--size-24_o7g7z_41","emoji--size-28":"_emoji--size-28_o7g7z_46","emoji--size-32":"_emoji--size-32_o7g7z_51","emoji--size-40":"_emoji--size-40_o7g7z_56","emoji--size-52":"_emoji--size-52_o7g7z_61","emoji--size-64":"_emoji--size-64_o7g7z_66","emoji--size-104":"_emoji--size-104_o7g7z_71"};exports.default=i;exports.emoji=e;
 //# sourceMappingURL=Emoji.module.scss.cjs.map

package/dist/components/emoji/Emoji.module.scss.js

@@ -1,16 +1,16 @@
-import './Emoji.module.css';const e = "_emoji_1pc05_2", i = {
+import './Emoji.css';const e = "_emoji_o7g7z_13", i = {
   emoji: e,
-  "emoji--size-10": "_emoji--size-10_1pc05_10",
-  "emoji--size-12": "_emoji--size-12_1pc05_15",
-  "emoji--size-16": "_emoji--size-16_1pc05_20",
-  "emoji--size-20": "_emoji--size-20_1pc05_25",
-  "emoji--size-24": "_emoji--size-24_1pc05_30",
-  "emoji--size-28": "_emoji--size-28_1pc05_35",
-  "emoji--size-32": "_emoji--size-32_1pc05_40",
-  "emoji--size-40": "_emoji--size-40_1pc05_45",
-  "emoji--size-52": "_emoji--size-52_1pc05_50",
-  "emoji--size-64": "_emoji--size-64_1pc05_55",
-  "emoji--size-104": "_emoji--size-104_1pc05_60"
+  "emoji--size-10": "_emoji--size-10_o7g7z_21",
+  "emoji--size-12": "_emoji--size-12_o7g7z_26",
+  "emoji--size-16": "_emoji--size-16_o7g7z_31",
+  "emoji--size-20": "_emoji--size-20_o7g7z_36",
+  "emoji--size-24": "_emoji--size-24_o7g7z_41",
+  "emoji--size-28": "_emoji--size-28_o7g7z_46",
+  "emoji--size-32": "_emoji--size-32_o7g7z_51",
+  "emoji--size-40": "_emoji--size-40_o7g7z_56",
+  "emoji--size-52": "_emoji--size-52_o7g7z_61",
+  "emoji--size-64": "_emoji--size-64_o7g7z_66",
+  "emoji--size-104": "_emoji--size-104_o7g7z_71"
 };
 export {
   i as default,

package/dist/components/emoji-button/EmojiButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),_=require("../../utils/string.cjs"),E=require("../emoji/Emoji.cjs"),t=require("./EmojiButton.module.scss.cjs"),a={"x-small":"12",small:"20",medium:"24",large:"28"};function p({className:i="",emoji:l,size:s="small",padding:u="default",active:n=!1,toggled:e,type:c="button",...d}){const r=t.default[`emoji-button--size-${_.toKebab(s)}`],m=u==="compact"?t.default["emoji-button--padding-compact"]:"",j=n?t.default["emoji-button--active"]:"",f=e?t.default["emoji-button--toggled"]:"",b=[t.default["emoji-button"],r,m,j,f,i].filter(Boolean).join(" ");return o.jsx("button",{type:c,className:b,"aria-pressed":e!==void 0?e:void 0,...d,children:o.jsx("span",{className:t.default["emoji-button__emoji"],children:o.jsx(E.default,{emoji:l,size:a[s]})})})}exports.EMOJI_BUTTON_EMOJI_SIZES=a;exports.default=p;
+//# sourceMappingURL=EmojiButton.cjs.map

package/dist/components/emoji-button/EmojiButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiButton.cjs","sources":["../../../src/components/emoji-button/EmojiButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\nimport { toKebab } from '@/utils/string';\nimport Emoji from '@/components/emoji/Emoji';\nimport type { EmojiSize } from '@/components/emoji/Emoji';\nimport styles from './EmojiButton.module.scss';\n\nexport type EmojiButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Emoji size (px string) per EmojiButton size. Use when you need to override the emoji independently. */\nexport const EMOJI_BUTTON_EMOJI_SIZES: Record<EmojiButtonSize, EmojiSize> = {\n  'x-small': '12',\n  small: '20',\n  medium: '24',\n  large: '28',\n};\n\nexport type EmojiButtonPadding = 'default' | 'compact';\n\nexport interface EmojiButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size variant. Default: small. */\n  size?: EmojiButtonSize;\n  /** Reduces padding within each size tier, matching IconButton compact. Default: default. */\n  padding?: EmojiButtonPadding;\n  /** When true, forces the subtler pressed/active visual. */\n  active?: boolean;\n  /** When true, shows toggled/selected state. */\n  toggled?: boolean;\n}\n\n/**\n * EmojiButton is a compact, label-free button that renders an emoji as its visual — the\n * emoji-picker counterpart to IconButton. Use it for emoji selection grids, skin-tone\n * selectors, and any surface where an emoji character is the primary affordance.\n *\n * Every EmojiButton must pair with an `aria-label` that names the action or the emoji it\n * represents.\n */\nexport default function EmojiButton({\n  className = '',\n  emoji,\n  size = 'small',\n  padding = 'default',\n  active = false,\n  toggled,\n  type = 'button',\n  ...rest\n}: EmojiButtonProps) {\n  const sizeClass = styles[`emoji-button--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['emoji-button--padding-compact'] : '';\n  const activeClass = active ? styles['emoji-button--active'] : '';\n  const toggledClass = toggled ? styles['emoji-button--toggled'] : '';\n\n  const rootClass = [\n    styles['emoji-button'],\n    sizeClass,\n    paddingClass,\n    activeClass,\n    toggledClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type={type}\n      className={rootClass}\n      aria-pressed={toggled !== undefined ? toggled : undefined}\n      {...rest}\n    >\n      <span className={styles['emoji-button__emoji']}>\n        <Emoji emoji={emoji} size={EMOJI_BUTTON_EMOJI_SIZES[size]} />\n      </span>\n    </button>\n  );\n}\n"],"names":["EMOJI_BUTTON_EMOJI_SIZES","EmojiButton","className","emoji","size","padding","active","toggled","type","rest","sizeClass","styles","toKebab","paddingClass","activeClass","toggledClass","rootClass","jsx","Emoji"],"mappings":"gQASaA,EAA+D,CAC1E,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EA2BA,SAAwBC,EAAY,CAClC,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,QACP,QAAAC,EAAU,UACV,OAAAC,EAAS,GACT,QAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAqB,CACnB,MAAMC,EAAYC,EAAAA,QAAO,sBAAsBC,EAAAA,QAAQR,CAAI,CAAC,EAAE,EACxDS,EACJR,IAAY,UAAYM,EAAAA,QAAO,+BAA+B,EAAI,GAC9DG,EAAcR,EAASK,UAAO,sBAAsB,EAAI,GACxDI,EAAeR,EAAUI,UAAO,uBAAuB,EAAI,GAE3DK,EAAY,CAChBL,EAAAA,QAAO,cAAc,EACrBD,EACAG,EACAC,EACAC,EACAb,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEe,EAAAA,IAAC,SAAA,CACC,KAAAT,EACA,UAAWQ,EACX,eAAcT,IAAY,OAAYA,EAAU,OAC/C,GAAGE,EAEJ,SAAAQ,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,qBAAqB,EAC3C,SAAAM,EAAAA,IAACC,EAAAA,QAAA,CAAM,MAAAf,EAAc,KAAMH,EAAyBI,CAAI,EAAG,CAAA,CAC7D,CAAA,CAAA,CAGN"}

package/dist/components/emoji-button/EmojiButton.css

@@ -0,0 +1 @@
+._emoji-button_vz5lf_13{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:0;cursor:pointer;background-color:transparent;outline:none}._emoji-button_vz5lf_13:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_vz5lf_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._emoji-button_vz5lf_13:focus-visible{animation:none}}._emoji-button_vz5lf_13:not(._-host-shadow-a_vz5lf_35):not(._-host-shadow-b_vz5lf_35){box-shadow:none;border-radius:var(--radius-s)}@keyframes _focus-ring-in_vz5lf_1{0%{outline-color:transparent;outline-offset:0}}._emoji-button_vz5lf_13:disabled{cursor:not-allowed;opacity:.5}._emoji-button_vz5lf_13:is(:hover,:focus-visible):not(:disabled):not(:active):not(._emoji-button--active_vz5lf_49):not(._emoji-button--toggled_vz5lf_49){background-color:rgba(var(--center-channel-color-rgb),.08)}._emoji-button__emoji_vz5lf_52{display:inline-flex;transition:transform var(--duration-quick) var(--ease-transition)}._emoji-button_vz5lf_13:is(:hover,:focus-visible):not(:disabled) ._emoji-button__emoji_vz5lf_52{transform:scale(1.2)}._emoji-button_vz5lf_13:active:not(:disabled):not(._emoji-button--toggled_vz5lf_49){background-color:rgba(var(--button-bg-rgb),.08)}._emoji-button--size-x-small_vz5lf_62{width:24px;height:24px;padding:var(--spacing-xxxs)}._emoji-button--size-x-small_vz5lf_62._emoji-button--padding-compact_vz5lf_67{width:20px;height:20px;padding:var(--spacing-xxxxs)}._emoji-button--size-small_vz5lf_72{width:32px;height:32px;padding:var(--spacing-xxs)}._emoji-button--size-small_vz5lf_72._emoji-button--padding-compact_vz5lf_67{width:28px;height:28px;padding:var(--spacing-xxxs)}._emoji-button--size-medium_vz5lf_82{width:40px;height:40px;padding:var(--spacing-xs)}._emoji-button--size-medium_vz5lf_82._emoji-button--padding-compact_vz5lf_67{width:36px;height:36px;padding:var(--spacing-xxs)}._emoji-button--size-large_vz5lf_92{width:48px;height:48px;padding:var(--spacing-s)}._emoji-button--size-large_vz5lf_92._emoji-button--padding-compact_vz5lf_67{width:44px;height:44px;padding:var(--spacing-xs)}._emoji-button--active_vz5lf_49:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._emoji-button--active_vz5lf_49:not(:disabled):is(:hover,:focus-visible):not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12)}._emoji-button--active_vz5lf_49:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16)}._emoji-button--toggled_vz5lf_49{background-color:var(--button-bg)}._emoji-button--toggled_vz5lf_49:is(:hover,:focus-visible):not(:disabled):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._emoji-button--toggled_vz5lf_49:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}

package/dist/components/emoji-button/EmojiButton.d.ts

@@ -0,0 +1,30 @@
+import { ButtonHTMLAttributes } from 'react';
+import { EmojiSize } from '../emoji/Emoji';
+export type EmojiButtonSize = 'x-small' | 'small' | 'medium' | 'large';
+/** Emoji size (px string) per EmojiButton size. Use when you need to override the emoji independently. */
+export declare const EMOJI_BUTTON_EMOJI_SIZES: Record<EmojiButtonSize, EmojiSize>;
+export type EmojiButtonPadding = 'default' | 'compact';
+export interface EmojiButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** Emoji character(s) to display (e.g. "👍", "🎉"). */
+    emoji: string;
+    /** Size variant. Default: small. */
+    size?: EmojiButtonSize;
+    /** Reduces padding within each size tier, matching IconButton compact. Default: default. */
+    padding?: EmojiButtonPadding;
+    /** When true, forces the subtler pressed/active visual. */
+    active?: boolean;
+    /** When true, shows toggled/selected state. */
+    toggled?: boolean;
+}
+/**
+ * EmojiButton is a compact, label-free button that renders an emoji as its visual — the
+ * emoji-picker counterpart to IconButton. Use it for emoji selection grids, skin-tone
+ * selectors, and any surface where an emoji character is the primary affordance.
+ *
+ * Every EmojiButton must pair with an `aria-label` that names the action or the emoji it
+ * represents.
+ */
+export default function EmojiButton({ className, emoji, size, padding, active, toggled, type, ...rest }: EmojiButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EmojiButton.d.ts.map

package/dist/components/emoji-button/EmojiButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiButton.d.ts","sourceRoot":"","sources":["../../../src/components/emoji-button/EmojiButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAG1D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvE,0GAA0G;AAC1G,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,eAAe,EAAE,SAAS,CAKvE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAc,EACd,KAAK,EACL,IAAc,EACd,OAAmB,EACnB,MAAc,EACd,OAAO,EACP,IAAe,EACf,GAAG,IAAI,EACR,EAAE,gBAAgB,2CA8BlB"}

package/dist/components/emoji-button/EmojiButton.js

@@ -0,0 +1,44 @@
+import { jsx as s } from "react/jsx-runtime";
+import { toKebab as b } from "../../utils/string.js";
+import f from "../emoji/Emoji.js";
+import o from "./EmojiButton.module.scss.js";
+const C = {
+  "x-small": "12",
+  small: "20",
+  medium: "24",
+  large: "28"
+};
+function x({
+  className: e = "",
+  emoji: i,
+  size: a = "small",
+  padding: m = "default",
+  active: n = !1,
+  toggled: t,
+  type: l = "button",
+  ...r
+}) {
+  const c = o[`emoji-button--size-${b(a)}`], u = m === "compact" ? o["emoji-button--padding-compact"] : "", d = n ? o["emoji-button--active"] : "", j = t ? o["emoji-button--toggled"] : "", p = [
+    o["emoji-button"],
+    c,
+    u,
+    d,
+    j,
+    e
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      type: l,
+      className: p,
+      "aria-pressed": t !== void 0 ? t : void 0,
+      ...r,
+      children: /* @__PURE__ */ s("span", { className: o["emoji-button__emoji"], children: /* @__PURE__ */ s(f, { emoji: i, size: C[a] }) })
+    }
+  );
+}
+export {
+  C as EMOJI_BUTTON_EMOJI_SIZES,
+  x as default
+};
+//# sourceMappingURL=EmojiButton.js.map

package/dist/components/emoji-button/EmojiButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiButton.js","sources":["../../../src/components/emoji-button/EmojiButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\nimport { toKebab } from '@/utils/string';\nimport Emoji from '@/components/emoji/Emoji';\nimport type { EmojiSize } from '@/components/emoji/Emoji';\nimport styles from './EmojiButton.module.scss';\n\nexport type EmojiButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Emoji size (px string) per EmojiButton size. Use when you need to override the emoji independently. */\nexport const EMOJI_BUTTON_EMOJI_SIZES: Record<EmojiButtonSize, EmojiSize> = {\n  'x-small': '12',\n  small: '20',\n  medium: '24',\n  large: '28',\n};\n\nexport type EmojiButtonPadding = 'default' | 'compact';\n\nexport interface EmojiButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size variant. Default: small. */\n  size?: EmojiButtonSize;\n  /** Reduces padding within each size tier, matching IconButton compact. Default: default. */\n  padding?: EmojiButtonPadding;\n  /** When true, forces the subtler pressed/active visual. */\n  active?: boolean;\n  /** When true, shows toggled/selected state. */\n  toggled?: boolean;\n}\n\n/**\n * EmojiButton is a compact, label-free button that renders an emoji as its visual — the\n * emoji-picker counterpart to IconButton. Use it for emoji selection grids, skin-tone\n * selectors, and any surface where an emoji character is the primary affordance.\n *\n * Every EmojiButton must pair with an `aria-label` that names the action or the emoji it\n * represents.\n */\nexport default function EmojiButton({\n  className = '',\n  emoji,\n  size = 'small',\n  padding = 'default',\n  active = false,\n  toggled,\n  type = 'button',\n  ...rest\n}: EmojiButtonProps) {\n  const sizeClass = styles[`emoji-button--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['emoji-button--padding-compact'] : '';\n  const activeClass = active ? styles['emoji-button--active'] : '';\n  const toggledClass = toggled ? styles['emoji-button--toggled'] : '';\n\n  const rootClass = [\n    styles['emoji-button'],\n    sizeClass,\n    paddingClass,\n    activeClass,\n    toggledClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type={type}\n      className={rootClass}\n      aria-pressed={toggled !== undefined ? toggled : undefined}\n      {...rest}\n    >\n      <span className={styles['emoji-button__emoji']}>\n        <Emoji emoji={emoji} size={EMOJI_BUTTON_EMOJI_SIZES[size]} />\n      </span>\n    </button>\n  );\n}\n"],"names":["EMOJI_BUTTON_EMOJI_SIZES","EmojiButton","className","emoji","size","padding","active","toggled","type","rest","sizeClass","styles","toKebab","paddingClass","activeClass","toggledClass","rootClass","jsx","Emoji"],"mappings":";;;;AASO,MAAMA,IAA+D;AAAA,EAC1E,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AA2BA,SAAwBC,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAYC,EAAO,sBAAsBC,EAAQR,CAAI,CAAC,EAAE,GACxDS,IACJR,MAAY,YAAYM,EAAO,+BAA+B,IAAI,IAC9DG,IAAcR,IAASK,EAAO,sBAAsB,IAAI,IACxDI,IAAeR,IAAUI,EAAO,uBAAuB,IAAI,IAE3DK,IAAY;AAAA,IAChBL,EAAO,cAAc;AAAA,IACrBD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAb;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,WAAWQ;AAAA,MACX,gBAAcT,MAAY,SAAYA,IAAU;AAAA,MAC/C,GAAGE;AAAA,MAEJ,UAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWN,EAAO,qBAAqB,GAC3C,UAAA,gBAAAM,EAACC,GAAA,EAAM,OAAAf,GAAc,MAAMH,EAAyBI,CAAI,GAAG,EAAA,CAC7D;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/emoji-button/EmojiButton.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./EmojiButton.css');const o={"emoji-button":"_emoji-button_vz5lf_13","focus-ring-in":"_focus-ring-in_vz5lf_1","-host-shadow-a":"_-host-shadow-a_vz5lf_35","-host-shadow-b":"_-host-shadow-b_vz5lf_35","emoji-button--active":"_emoji-button--active_vz5lf_49","emoji-button--toggled":"_emoji-button--toggled_vz5lf_49","emoji-button__emoji":"_emoji-button__emoji_vz5lf_52","emoji-button--size-x-small":"_emoji-button--size-x-small_vz5lf_62","emoji-button--padding-compact":"_emoji-button--padding-compact_vz5lf_67","emoji-button--size-small":"_emoji-button--size-small_vz5lf_72","emoji-button--size-medium":"_emoji-button--size-medium_vz5lf_82","emoji-button--size-large":"_emoji-button--size-large_vz5lf_92"};exports.default=o;
+//# sourceMappingURL=EmojiButton.module.scss.cjs.map

package/dist/components/emoji-button/EmojiButton.module.scss.cjs.map

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

package/dist/components/emoji-button/EmojiButton.module.scss.js

@@ -0,0 +1,18 @@
+import './EmojiButton.css';const o = {
+  "emoji-button": "_emoji-button_vz5lf_13",
+  "focus-ring-in": "_focus-ring-in_vz5lf_1",
+  "-host-shadow-a": "_-host-shadow-a_vz5lf_35",
+  "-host-shadow-b": "_-host-shadow-b_vz5lf_35",
+  "emoji-button--active": "_emoji-button--active_vz5lf_49",
+  "emoji-button--toggled": "_emoji-button--toggled_vz5lf_49",
+  "emoji-button__emoji": "_emoji-button__emoji_vz5lf_52",
+  "emoji-button--size-x-small": "_emoji-button--size-x-small_vz5lf_62",
+  "emoji-button--padding-compact": "_emoji-button--padding-compact_vz5lf_67",
+  "emoji-button--size-small": "_emoji-button--size-small_vz5lf_72",
+  "emoji-button--size-medium": "_emoji-button--size-medium_vz5lf_82",
+  "emoji-button--size-large": "_emoji-button--size-large_vz5lf_92"
+};
+export {
+  o as default
+};
+//# sourceMappingURL=EmojiButton.module.scss.js.map

package/dist/components/emoji-button/EmojiButton.module.scss.js.map

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

package/dist/components/emoji-button/index.cjs

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

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

@@ -0,0 +1,3 @@
+export { default as EmojiButton } from './EmojiButton';
+export { EMOJI_BUTTON_EMOJI_SIZES, type EmojiButtonProps, type EmojiButtonPadding, type EmojiButtonSize, } from './EmojiButton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/emoji-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EACL,wBAAwB,EACxB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,6 @@
+import { EMOJI_BUTTON_EMOJI_SIZES as E, default as I } from "./EmojiButton.js";
+export {
+  E as EMOJI_BUTTON_EMOJI_SIZES,
+  I as EmojiButton
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPopover.cjs","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","e","IconButton","Icon","CloseIcon","Scrollbar","Fragment","Emoji","Button"],"mappings":"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"}

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

@@ -0,0 +1 @@
+._emoji-popover_fk3y6_13{box-sizing:border-box;display:flex;flex-direction:column;width:348px;height:436px;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-m);box-shadow:var(--elevation-4);overflow:hidden}._emoji-popover__header_fk3y6_25{display:flex;flex-direction:column;flex-shrink:0;background-color:var(--center-channel-bg);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12)}._emoji-popover__search-row_fk3y6_32{display:flex;align-items:center;gap:var(--spacing-xxs);padding:var(--spacing-m) var(--spacing-m) var(--spacing-xxxs)}._emoji-popover__search-input_fk3y6_38{flex:1;min-width:0}._emoji-popover__header-panels_fk3y6_42{position:relative;overflow:hidden}._emoji-popover__header-main_fk3y6_46{transition:transform var(--duration-quick) var(--ease-transition)}._emoji-popover__header-main--hidden_fk3y6_49{transform:translate(-100%)}._emoji-popover__skin-tone-picker_fk3y6_52{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xs) var(--spacing-m);transform:translate(100%);transition:transform var(--duration-quick) var(--ease-transition);background-color:var(--center-channel-bg)}._emoji-popover__skin-tone-picker--visible_fk3y6_66{transform:translate(0)}._emoji-popover__skin-tone-label_fk3y6_69{flex-shrink:0;font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--center-channel-color);padding-left:var(--spacing-xxs)}._emoji-popover__skin-tone-options_fk3y6_77{display:flex;flex:1;align-items:center;justify-content:space-between}._emoji-popover__categories_fk3y6_83{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xxs) var(--spacing-m)}._emoji-popover__scroll-view_fk3y6_89{display:flex;flex-direction:column;flex:1;min-height:0}._emoji-popover__scroll-view_fk3y6_89>*{flex:1;min-height:0}._emoji-popover__emoji-list_fk3y6_99{display:flex;flex-direction:column;gap:var(--spacing-xxs);padding:var(--spacing-xxxs) 0}._emoji-popover__group_fk3y6_105{display:flex;flex-direction:column}._emoji-popover__emoji-row_fk3y6_109{display:flex;flex-wrap:wrap;align-items:flex-start;padding:0 var(--spacing-s);gap:0}._emoji-popover__emoji-row--nowrap_fk3y6_116{flex-wrap:nowrap}._emoji-popover__footer_fk3y6_119{display:flex;align-items:center;gap:var(--spacing-xs);height:56px;flex-shrink:0;padding:0 var(--spacing-l);border-top:1px solid rgba(var(--center-channel-color-rgb),.12);background-color:var(--center-channel-bg)}._emoji-popover__footer-preview_fk3y6_129{display:flex;align-items:center;gap:var(--spacing-xs);flex:1;min-width:0}._emoji-popover__footer-hint_fk3y6_136{font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);color:var(--center-channel-color)}._emoji-popover__footer-shortcode_fk3y6_141{font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);color:rgba(var(--center-channel-color-rgb),.72)}

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

@@ -0,0 +1,55 @@
+import { ComponentType, ReactNode } from 'react';
+export interface EmojiCategory {
+    id: string;
+    /** Group heading and category button name. Kept as `string`: it's the button's `aria-label`. */
+    label: string;
+    /** Icon component rendered in the category navigation bar. */
+    icon: ComponentType;
+    emojis: string[];
+    /** When false the row does not wrap (e.g. Recently Used). @default true */
+    wrap?: boolean;
+}
+export interface EmojiPopoverProps {
+    className?: string;
+    /** Emoji categories to display, supplied by the host. */
+    categories: EmojiCategory[];
+    /** Map of base emoji → shortcode name used for footer display. */
+    shortcodes?: Record<string, string>;
+    /** Pre-seeds the search field. Useful for static specimen demos. */
+    defaultQuery?: string;
+    /** Focus the search field on mount. */
+    autoFocus?: boolean;
+    /** Called with the selected emoji character. */
+    onEmojiSelect?: (emoji: string) => void;
+    /**
+     * Called on every query change. Use this to trigger async custom-emoji
+     * searches on the host side; local filtering over `categories` always runs.
+     */
+    onSearch?: (query: string) => void;
+    /** Shows a tertiary button in the footer right. Omit to hide the button. */
+    onCustomEmojiClick?: () => void;
+    /** Label for the custom emoji button. Accepts translated nodes. @default 'Custom emoji' */
+    customEmojiLabel?: ReactNode;
+    /** Search field placeholder. @default 'Search emojis' */
+    searchPlaceholder?: string;
+    /** Accessible name for the search clear button. @default 'Clear search' */
+    searchClearLabel?: string;
+    /** Heading above search results. @default 'Search Results' */
+    searchResultsLabel?: ReactNode;
+    /** Empty search title. @default 'No emojis found' */
+    emptyTitle?: ReactNode;
+    /** Empty search description. @default 'Try a different search term.' */
+    emptyDescription?: ReactNode;
+    /** Footer hint when no emoji is hovered. @default 'Select an Emoji' */
+    previewHintLabel?: ReactNode;
+    /** Accessible name for the skin tone button. @default 'Select skin tone' */
+    skinToneButtonLabel?: string;
+    /** Skin tone picker heading. @default 'Skin tone' */
+    skinToneLabel?: ReactNode;
+    /** Accessible name per skin tone (0 = default). @default 'Default skin tone' / `Skin tone {index}` */
+    formatSkinToneLabel?: (index: number) => string;
+    /** Accessible name for closing the skin tone picker. @default 'Close skin tone picker' */
+    closeSkinTonePickerLabel?: string;
+}
+export default function EmojiPopover({ className, categories, shortcodes, defaultQuery, autoFocus, onEmojiSelect, onSearch, onCustomEmojiClick, customEmojiLabel, searchPlaceholder, searchClearLabel, searchResultsLabel, emptyTitle, emptyDescription, previewHintLabel, skinToneButtonLabel, skinToneLabel, formatSkinToneLabel, closeSkinTonePickerLabel, }: EmojiPopoverProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EmojiPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPopover.d.ts","sourceRoot":"","sources":["../../../src/components/emoji-popover/EmojiPopover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AActD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,gGAAgG;IAChG,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4EAA4E;IAC5E,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,2FAA2F;IAC3F,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,qDAAqD;IACrD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,4EAA4E;IAC5E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qDAAqD;IACrD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,sGAAsG;IACtG,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,0FAA0F;IAC1F,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;AAgED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,UAAU,EACV,UAAe,EACf,YAAiB,EACjB,SAAiB,EACjB,aAAa,EACb,QAAQ,EACR,kBAAkB,EAClB,gBAAiC,EACjC,iBAAmC,EACnC,gBAAgB,EAChB,kBAAqC,EACrC,UAA8B,EAC9B,gBAAiD,EACjD,gBAAoC,EACpC,mBAAwC,EACxC,aAA2B,EAC3B,mBAAgD,EAChD,wBAAmD,GACpD,EAAE,iBAAiB,2CAmRnB"}