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

package/dist/components/radio/Radio.css

@@ -1 +1 @@
-._radio_difs7_2{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_difs7_2:has(._radio__input_difs7_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_difs7_13{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_difs7_13:focus-visible{outline:none}._radio__circle_difs7_33{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-full);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_difs7_13:focus-visible~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__circle_difs7_33{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_difs7_13:disabled~._radio__circle_difs7_33{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_difs7_13:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--button-bg)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__input_difs7_13:checked~._radio__circle_difs7_33{border-color:var(--button-bg)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--button-bg)}._radio__input_difs7_13:focus-visible:checked~._radio__circle_difs7_33{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_difs7_13:disabled:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_difs7_13:disabled:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_difs7_80 ._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:not(:checked)~._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:focus-visible~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_difs7_80 ._radio__input_difs7_13:focus-visible:checked~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_difs7_59{display:block;border-radius:var(--radius-full);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{transform:scale(1)}._radio__label_difs7_116{line-height:1}._radio--size-small_difs7_119{gap:var(--spacing-xs)}._radio--size-small_difs7_119 ._radio__input_difs7_13,._radio--size-small_difs7_119 ._radio__circle_difs7_33{width:12px;height:12px}._radio--size-small_difs7_119 ._radio__dot_difs7_59{width:6px;height:6px}._radio--size-small_difs7_119 ._radio__label_difs7_116{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_difs7_138{gap:var(--spacing-xs)}._radio--size-medium_difs7_138 ._radio__input_difs7_13,._radio--size-medium_difs7_138 ._radio__circle_difs7_33{width:16px;height:16px}._radio--size-medium_difs7_138 ._radio__dot_difs7_59{width:8px;height:8px}._radio--size-medium_difs7_138 ._radio__label_difs7_116{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_difs7_157{gap:var(--spacing-s)}._radio--size-large_difs7_157 ._radio__input_difs7_13,._radio--size-large_difs7_157 ._radio__circle_difs7_33{width:20px;height:20px}._radio--size-large_difs7_157 ._radio__dot_difs7_59{width:10px;height:10px}._radio--size-large_difs7_157 ._radio__label_difs7_116{font-size:var(--font-size-200);line-height:var(--line-height-200)}
+._radio_11lrl_2{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_11lrl_2:has(._radio__input_11lrl_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_11lrl_13{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_11lrl_13:focus-visible{outline:none}._radio__circle_11lrl_33{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_11lrl_13:focus-visible~._radio__circle_11lrl_33{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover ._radio__circle_11lrl_33{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_11lrl_13:disabled~._radio__circle_11lrl_33{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_11lrl_13:checked~._radio__circle_11lrl_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_11lrl_13:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{background-color:var(--button-bg)}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33{border-color:var(--button-bg)}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{background-color:var(--button-bg)}._radio__input_11lrl_13:focus-visible:checked~._radio__circle_11lrl_33{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_11lrl_13:disabled:checked~._radio__circle_11lrl_33{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_11lrl_13:disabled:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_11lrl_80 ._radio__circle_11lrl_33{border-color:var(--error-text, var(--color-danger))}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover._radio--invalid_11lrl_80 ._radio__input_11lrl_13:not(:checked)~._radio__circle_11lrl_33{border-color:var(--error-text, var(--color-danger))}._radio--invalid_11lrl_80 ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_11lrl_80 ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{background-color:var(--error-text, var(--color-danger))}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover._radio--invalid_11lrl_80 ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33{border-color:var(--error-text, var(--color-danger))}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover._radio--invalid_11lrl_80 ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{background-color:var(--error-text, var(--color-danger))}._radio--invalid_11lrl_80 ._radio__input_11lrl_13:focus-visible~._radio__circle_11lrl_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_11lrl_80 ._radio__input_11lrl_13:focus-visible:checked~._radio__circle_11lrl_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_11lrl_59{display:block;border-radius:var(--radius-pill);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_11lrl_13:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{transform:scale(1)}._radio__label_11lrl_116{line-height:1}._radio--size-small_11lrl_119{gap:var(--spacing-xs)}._radio--size-small_11lrl_119 ._radio__input_11lrl_13,._radio--size-small_11lrl_119 ._radio__circle_11lrl_33{width:12px;height:12px}._radio--size-small_11lrl_119 ._radio__dot_11lrl_59{width:6px;height:6px}._radio--size-small_11lrl_119 ._radio__label_11lrl_116{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_11lrl_138{gap:var(--spacing-xs)}._radio--size-medium_11lrl_138 ._radio__input_11lrl_13,._radio--size-medium_11lrl_138 ._radio__circle_11lrl_33{width:16px;height:16px}._radio--size-medium_11lrl_138 ._radio__dot_11lrl_59{width:8px;height:8px}._radio--size-medium_11lrl_138 ._radio__label_11lrl_116{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_11lrl_157{gap:var(--spacing-s)}._radio--size-large_11lrl_157 ._radio__input_11lrl_13,._radio--size-large_11lrl_157 ._radio__circle_11lrl_33{width:20px;height:20px}._radio--size-large_11lrl_157 ._radio__dot_11lrl_59{width:10px;height:10px}._radio--size-large_11lrl_157 ._radio__label_11lrl_116{font-size:var(--font-size-200);line-height:var(--line-height-200)}

package/dist/components/radio/Radio.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const i="_radio_difs7_2",_="_radio__input_difs7_13",d="_radio__circle_difs7_33",o="_radio__dot_difs7_59",a="_radio__label_difs7_116",r={radio:i,radio__input:_,radio__circle:d,radio__dot:o,"radio--invalid":"_radio--invalid_difs7_80",radio__label:a,"radio--size-small":"_radio--size-small_difs7_119","radio--size-medium":"_radio--size-medium_difs7_138","radio--size-large":"_radio--size-large_difs7_157"};exports.default=r;exports.radio=i;exports.radio__circle=d;exports.radio__dot=o;exports.radio__input=_;exports.radio__label=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const _="_radio_11lrl_2",i="_radio__input_11lrl_13",r="_radio__circle_11lrl_33",l="_radio__dot_11lrl_59",o="_radio__label_11lrl_116",a={radio:_,radio__input:i,radio__circle:r,radio__dot:l,"radio--invalid":"_radio--invalid_11lrl_80",radio__label:o,"radio--size-small":"_radio--size-small_11lrl_119","radio--size-medium":"_radio--size-medium_11lrl_138","radio--size-large":"_radio--size-large_11lrl_157"};exports.default=a;exports.radio=_;exports.radio__circle=r;exports.radio__dot=l;exports.radio__input=i;exports.radio__label=o;
 //# sourceMappingURL=Radio.module.scss.cjs.map

package/dist/components/radio/Radio.module.scss.js

@@ -1,20 +1,20 @@
-import './Radio.css';const _ = "_radio_difs7_2", i = "_radio__input_difs7_13", d = "_radio__circle_difs7_33", a = "_radio__dot_difs7_59", o = "_radio__label_difs7_116", r = {
+import './Radio.css';const _ = "_radio_11lrl_2", i = "_radio__input_11lrl_13", r = "_radio__circle_11lrl_33", l = "_radio__dot_11lrl_59", a = "_radio__label_11lrl_116", o = {
   radio: _,
   radio__input: i,
-  radio__circle: d,
-  radio__dot: a,
-  "radio--invalid": "_radio--invalid_difs7_80",
-  radio__label: o,
-  "radio--size-small": "_radio--size-small_difs7_119",
-  "radio--size-medium": "_radio--size-medium_difs7_138",
-  "radio--size-large": "_radio--size-large_difs7_157"
+  radio__circle: r,
+  radio__dot: l,
+  "radio--invalid": "_radio--invalid_11lrl_80",
+  radio__label: a,
+  "radio--size-small": "_radio--size-small_11lrl_119",
+  "radio--size-medium": "_radio--size-medium_11lrl_138",
+  "radio--size-large": "_radio--size-large_11lrl_157"
 };
 export {
-  r as default,
+  o as default,
   _ as radio,
-  d as radio__circle,
-  a as radio__dot,
+  r as radio__circle,
+  l as radio__dot,
   i as radio__input,
-  o as radio__label
+  a as radio__label
 };
 //# sourceMappingURL=Radio.module.scss.js.map

package/dist/components/reaction-button/ReactionButton.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),n=require("react"),t=require("./ReactionButton.module.scss.cjs");function b({emoji:a,count:e,byCurrentUser:i=!1,className:l="",onClick:d,...f}){const o=n.useRef(e),u=n.useRef(void 0),[s,c]=n.useState(null);n.useEffect(()=>(e!==o.current&&(clearTimeout(u.current),c(e>o.current?"up":"down"),o.current=e,u.current=setTimeout(()=>c(null),300)),()=>clearTimeout(u.current)),[e]);const m=[t.default["reaction-button"],i?t.default["reaction-button--mine"]:"",l].filter(Boolean).join(" "),_=[t.default["reaction-button__count"],s==="up"?t.default["reaction-button__count--anim-up"]:"",s==="down"?t.default["reaction-button__count--anim-down"]:""].filter(Boolean).join(" ");return r.jsxs("button",{type:"button",className:m,onClick:d,"aria-label":`${a} ${e} reaction${e!==1?"s":""}`,"aria-pressed":i,...f,children:[r.jsx("span",{className:t.default["reaction-button__emoji"],"aria-hidden":!0,children:a}),r.jsx("span",{className:_,children:e})]})}exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),o=require("react"),t=require("./ReactionButton.module.scss.cjs"),p=(n,e)=>`${n} ${e} reaction${e!==1?"s":""}`;function R({emoji:n,count:e,byCurrentUser:i=!1,formatLabel:c=p,className:d="",onClick:f,...m}){const u=o.useRef(e),a=o.useRef(void 0),[s,l]=o.useState(null);o.useEffect(()=>(e!==u.current&&(clearTimeout(a.current),l(e>u.current?"up":"down"),u.current=e,a.current=setTimeout(()=>l(null),300)),()=>clearTimeout(a.current)),[e]);const b=[t.default["reaction-button"],i?t.default["reaction-button--mine"]:"",d].filter(Boolean).join(" "),_=[t.default["reaction-button__count"],s==="up"?t.default["reaction-button__count--anim-up"]:"",s==="down"?t.default["reaction-button__count--anim-down"]:""].filter(Boolean).join(" ");return r.jsxs("button",{type:"button",className:b,onClick:f,"aria-label":c(n,e),"aria-pressed":i,...m,children:[r.jsx("span",{className:t.default["reaction-button__emoji"],"aria-hidden":!0,children:n}),r.jsx("span",{className:_,children:e})]})}exports.default=R;
 //# sourceMappingURL=ReactionButton.cjs.map

package/dist/components/reaction-button/ReactionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionButton.cjs","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport styles from './ReactionButton.module.scss';\n\nexport interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The emoji character to display. */\n  emoji: string;\n  /** Number of users who reacted with this emoji. */\n  count: number;\n  /** Whether the current user has reacted with this emoji. */\n  byCurrentUser?: boolean;\n}\n\n/**\n * A single emoji reaction button — shows the emoji, count, and highlights when the current user\n * has reacted. Fires onClick when clicked; the host owns toggle logic.\n *\n * The count animates up or down when the `count` prop changes.\n */\nexport default function ReactionButton({\n  emoji,\n  count,\n  byCurrentUser = false,\n  className = '',\n  onClick,\n  ...rest\n}: ReactionButtonProps) {\n  const prevCountRef = useRef(count);\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const [countAnim, setCountAnim] = useState<'up' | 'down' | null>(null);\n\n  useEffect(() => {\n    if (count !== prevCountRef.current) {\n      clearTimeout(timerRef.current);\n      setCountAnim(count > prevCountRef.current ? 'up' : 'down');\n      prevCountRef.current = count;\n      timerRef.current = setTimeout(() => setCountAnim(null), 300);\n    }\n    return () => clearTimeout(timerRef.current);\n  }, [count]);\n\n  const rootClass = [\n    styles['reaction-button'],\n    byCurrentUser ? styles['reaction-button--mine'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const countClass = [\n    styles['reaction-button__count'],\n    countAnim === 'up' ? styles['reaction-button__count--anim-up'] : '',\n    countAnim === 'down' ? styles['reaction-button__count--anim-down'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={rootClass}\n      onClick={onClick}\n      aria-label={`${emoji} ${count} reaction${count !== 1 ? 's' : ''}`}\n      aria-pressed={byCurrentUser}\n      {...rest}\n    >\n      <span className={styles['reaction-button__emoji']} aria-hidden>\n        {emoji}\n      </span>\n      <span className={countClass}>{count}</span>\n    </button>\n  );\n}\n"],"names":["ReactionButton","emoji","count","byCurrentUser","className","onClick","rest","prevCountRef","useRef","timerRef","countAnim","setCountAnim","useState","useEffect","rootClass","styles","countClass","jsxs","jsx"],"mappings":"kNAmBA,SAAwBA,EAAe,CACrC,MAAAC,EACA,MAAAC,EACA,cAAAC,EAAgB,GAChB,UAAAC,EAAY,GACZ,QAAAC,EACA,GAAGC,CACL,EAAwB,CACtB,MAAMC,EAAeC,EAAAA,OAAON,CAAK,EAC3BO,EAAWD,EAAAA,OAAsC,MAAS,EAC1D,CAACE,EAAWC,CAAY,EAAIC,EAAAA,SAA+B,IAAI,EAErEC,EAAAA,UAAU,KACJX,IAAUK,EAAa,UACzB,aAAaE,EAAS,OAAO,EAC7BE,EAAaT,EAAQK,EAAa,QAAU,KAAO,MAAM,EACzDA,EAAa,QAAUL,EACvBO,EAAS,QAAU,WAAW,IAAME,EAAa,IAAI,EAAG,GAAG,GAEtD,IAAM,aAAaF,EAAS,OAAO,GACzC,CAACP,CAAK,CAAC,EAEV,MAAMY,EAAY,CAChBC,EAAAA,QAAO,iBAAiB,EACxBZ,EAAgBY,EAAAA,QAAO,uBAAuB,EAAI,GAClDX,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELY,EAAa,CACjBD,EAAAA,QAAO,wBAAwB,EAC/BL,IAAc,KAAOK,UAAO,iCAAiC,EAAI,GACjEL,IAAc,OAASK,UAAO,mCAAmC,EAAI,EAAA,EAEpE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWH,EACX,QAAAT,EACA,aAAY,GAAGJ,CAAK,IAAIC,CAAK,YAAYA,IAAU,EAAI,IAAM,EAAE,GAC/D,eAAcC,EACb,GAAGG,EAEJ,SAAA,CAAAY,EAAAA,IAAC,QAAK,UAAWH,UAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAAd,EACH,EACAiB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAa,SAAAd,CAAA,CAAM,CAAA,CAAA,CAAA,CAG1C"}
+{"version":3,"file":"ReactionButton.cjs","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport styles from './ReactionButton.module.scss';\n\nexport interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The emoji character to display. */\n  emoji: string;\n  /** Number of users who reacted with this emoji. */\n  count: number;\n  /** Whether the current user has reacted with this emoji. */\n  byCurrentUser?: boolean;\n  /** Accessible name. Default: `{emoji} {count} reaction(s)`. An explicit `aria-label` still wins. */\n  formatLabel?: (emoji: string, count: number) => string;\n}\n\nconst defaultFormatLabel = (emoji: string, count: number) =>\n  `${emoji} ${count} reaction${count !== 1 ? 's' : ''}`;\n\n/**\n * A single emoji reaction button — shows the emoji, count, and highlights when the current user\n * has reacted. Fires onClick when clicked; the host owns toggle logic.\n *\n * The count animates up or down when the `count` prop changes.\n */\nexport default function ReactionButton({\n  emoji,\n  count,\n  byCurrentUser = false,\n  formatLabel = defaultFormatLabel,\n  className = '',\n  onClick,\n  ...rest\n}: ReactionButtonProps) {\n  const prevCountRef = useRef(count);\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const [countAnim, setCountAnim] = useState<'up' | 'down' | null>(null);\n\n  useEffect(() => {\n    if (count !== prevCountRef.current) {\n      clearTimeout(timerRef.current);\n      setCountAnim(count > prevCountRef.current ? 'up' : 'down');\n      prevCountRef.current = count;\n      timerRef.current = setTimeout(() => setCountAnim(null), 300);\n    }\n    return () => clearTimeout(timerRef.current);\n  }, [count]);\n\n  const rootClass = [\n    styles['reaction-button'],\n    byCurrentUser ? styles['reaction-button--mine'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const countClass = [\n    styles['reaction-button__count'],\n    countAnim === 'up' ? styles['reaction-button__count--anim-up'] : '',\n    countAnim === 'down' ? styles['reaction-button__count--anim-down'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={rootClass}\n      onClick={onClick}\n      aria-label={formatLabel(emoji, count)}\n      aria-pressed={byCurrentUser}\n      {...rest}\n    >\n      <span className={styles['reaction-button__emoji']} aria-hidden>\n        {emoji}\n      </span>\n      <span className={countClass}>{count}</span>\n    </button>\n  );\n}\n"],"names":["defaultFormatLabel","emoji","count","ReactionButton","byCurrentUser","formatLabel","className","onClick","rest","prevCountRef","useRef","timerRef","countAnim","setCountAnim","useState","useEffect","rootClass","styles","countClass","jsxs","jsx"],"mappings":"kNAeMA,EAAqB,CAACC,EAAeC,IACzC,GAAGD,CAAK,IAAIC,CAAK,YAAYA,IAAU,EAAI,IAAM,EAAE,GAQrD,SAAwBC,EAAe,CACrC,MAAAF,EACA,MAAAC,EACA,cAAAE,EAAgB,GAChB,YAAAC,EAAcL,EACd,UAAAM,EAAY,GACZ,QAAAC,EACA,GAAGC,CACL,EAAwB,CACtB,MAAMC,EAAeC,EAAAA,OAAOR,CAAK,EAC3BS,EAAWD,EAAAA,OAAsC,MAAS,EAC1D,CAACE,EAAWC,CAAY,EAAIC,EAAAA,SAA+B,IAAI,EAErEC,EAAAA,UAAU,KACJb,IAAUO,EAAa,UACzB,aAAaE,EAAS,OAAO,EAC7BE,EAAaX,EAAQO,EAAa,QAAU,KAAO,MAAM,EACzDA,EAAa,QAAUP,EACvBS,EAAS,QAAU,WAAW,IAAME,EAAa,IAAI,EAAG,GAAG,GAEtD,IAAM,aAAaF,EAAS,OAAO,GACzC,CAACT,CAAK,CAAC,EAEV,MAAMc,EAAY,CAChBC,EAAAA,QAAO,iBAAiB,EACxBb,EAAgBa,EAAAA,QAAO,uBAAuB,EAAI,GAClDX,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELY,EAAa,CACjBD,EAAAA,QAAO,wBAAwB,EAC/BL,IAAc,KAAOK,UAAO,iCAAiC,EAAI,GACjEL,IAAc,OAASK,UAAO,mCAAmC,EAAI,EAAA,EAEpE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWH,EACX,QAAAT,EACA,aAAYF,EAAYJ,EAAOC,CAAK,EACpC,eAAcE,EACb,GAAGI,EAEJ,SAAA,CAAAY,EAAAA,IAAC,QAAK,UAAWH,UAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAAhB,EACH,EACAmB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAa,SAAAhB,CAAA,CAAM,CAAA,CAAA,CAAA,CAG1C"}

package/dist/components/reaction-button/ReactionButton.d.ts

@@ -6,6 +6,8 @@ export interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElem
     count: number;
     /** Whether the current user has reacted with this emoji. */
     byCurrentUser?: boolean;
+    /** Accessible name. Default: `{emoji} {count} reaction(s)`. An explicit `aria-label` still wins. */
+    formatLabel?: (emoji: string, count: number) => string;
 }
 /**
  * A single emoji reaction button — shows the emoji, count, and highlights when the current user
@@ -13,5 +15,5 @@ export interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElem
  *
  * The count animates up or down when the `count` prop changes.
  */
-export default function ReactionButton({ emoji, count, byCurrentUser, className, onClick, ...rest }: ReactionButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function ReactionButton({ emoji, count, byCurrentUser, formatLabel, className, onClick, ...rest }: ReactionButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ReactionButton.d.ts.map

package/dist/components/reaction-button/ReactionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAClF,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,SAAc,EACd,OAAO,EACP,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA8CrB"}
+{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAClF,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oGAAoG;IACpG,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACxD;AAKD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,WAAgC,EAChC,SAAc,EACd,OAAO,EACP,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA8CrB"}

package/dist/components/reaction-button/ReactionButton.js

@@ -1,42 +1,44 @@
-import { jsxs as b, jsx as u } from "react/jsx-runtime";
-import { useRef as c, useState as _, useEffect as h } from "react";
+import { jsxs as _, jsx as u } from "react/jsx-runtime";
+import { useRef as c, useState as h, useEffect as j } from "react";
 import e from "./ReactionButton.module.scss.js";
-function x({
-  emoji: r,
+const R = (n, t) => `${n} ${t} reaction${t !== 1 ? "s" : ""}`;
+function C({
+  emoji: n,
   count: t,
   byCurrentUser: a = !1,
-  className: l = "",
-  onClick: m,
-  ...f
+  formatLabel: l = R,
+  className: m = "",
+  onClick: f,
+  ...d
 }) {
-  const n = c(t), o = c(void 0), [i, s] = _(null);
-  h(() => (t !== n.current && (clearTimeout(o.current), s(t > n.current ? "up" : "down"), n.current = t, o.current = setTimeout(() => s(null), 300)), () => clearTimeout(o.current)), [t]);
+  const o = c(t), r = c(void 0), [i, s] = h(null);
+  j(() => (t !== o.current && (clearTimeout(r.current), s(t > o.current ? "up" : "down"), o.current = t, r.current = setTimeout(() => s(null), 300)), () => clearTimeout(r.current)), [t]);
   const p = [
     e["reaction-button"],
     a ? e["reaction-button--mine"] : "",
-    l
-  ].filter(Boolean).join(" "), d = [
+    m
+  ].filter(Boolean).join(" "), b = [
     e["reaction-button__count"],
     i === "up" ? e["reaction-button__count--anim-up"] : "",
     i === "down" ? e["reaction-button__count--anim-down"] : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ _(
     "button",
     {
       type: "button",
       className: p,
-      onClick: m,
-      "aria-label": `${r} ${t} reaction${t !== 1 ? "s" : ""}`,
+      onClick: f,
+      "aria-label": l(n, t),
       "aria-pressed": a,
-      ...f,
+      ...d,
       children: [
-        /* @__PURE__ */ u("span", { className: e["reaction-button__emoji"], "aria-hidden": !0, children: r }),
-        /* @__PURE__ */ u("span", { className: d, children: t })
+        /* @__PURE__ */ u("span", { className: e["reaction-button__emoji"], "aria-hidden": !0, children: n }),
+        /* @__PURE__ */ u("span", { className: b, children: t })
       ]
     }
   );
 }
 export {
-  x as default
+  C as default
 };
 //# sourceMappingURL=ReactionButton.js.map

package/dist/components/reaction-button/ReactionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionButton.js","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport styles from './ReactionButton.module.scss';\n\nexport interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The emoji character to display. */\n  emoji: string;\n  /** Number of users who reacted with this emoji. */\n  count: number;\n  /** Whether the current user has reacted with this emoji. */\n  byCurrentUser?: boolean;\n}\n\n/**\n * A single emoji reaction button — shows the emoji, count, and highlights when the current user\n * has reacted. Fires onClick when clicked; the host owns toggle logic.\n *\n * The count animates up or down when the `count` prop changes.\n */\nexport default function ReactionButton({\n  emoji,\n  count,\n  byCurrentUser = false,\n  className = '',\n  onClick,\n  ...rest\n}: ReactionButtonProps) {\n  const prevCountRef = useRef(count);\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const [countAnim, setCountAnim] = useState<'up' | 'down' | null>(null);\n\n  useEffect(() => {\n    if (count !== prevCountRef.current) {\n      clearTimeout(timerRef.current);\n      setCountAnim(count > prevCountRef.current ? 'up' : 'down');\n      prevCountRef.current = count;\n      timerRef.current = setTimeout(() => setCountAnim(null), 300);\n    }\n    return () => clearTimeout(timerRef.current);\n  }, [count]);\n\n  const rootClass = [\n    styles['reaction-button'],\n    byCurrentUser ? styles['reaction-button--mine'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const countClass = [\n    styles['reaction-button__count'],\n    countAnim === 'up' ? styles['reaction-button__count--anim-up'] : '',\n    countAnim === 'down' ? styles['reaction-button__count--anim-down'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={rootClass}\n      onClick={onClick}\n      aria-label={`${emoji} ${count} reaction${count !== 1 ? 's' : ''}`}\n      aria-pressed={byCurrentUser}\n      {...rest}\n    >\n      <span className={styles['reaction-button__emoji']} aria-hidden>\n        {emoji}\n      </span>\n      <span className={countClass}>{count}</span>\n    </button>\n  );\n}\n"],"names":["ReactionButton","emoji","count","byCurrentUser","className","onClick","rest","prevCountRef","useRef","timerRef","countAnim","setCountAnim","useState","useEffect","rootClass","styles","countClass","jsxs","jsx"],"mappings":";;;AAmBA,SAAwBA,EAAe;AAAA,EACrC,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAeC,EAAON,CAAK,GAC3BO,IAAWD,EAAsC,MAAS,GAC1D,CAACE,GAAWC,CAAY,IAAIC,EAA+B,IAAI;AAErE,EAAAC,EAAU,OACJX,MAAUK,EAAa,YACzB,aAAaE,EAAS,OAAO,GAC7BE,EAAaT,IAAQK,EAAa,UAAU,OAAO,MAAM,GACzDA,EAAa,UAAUL,GACvBO,EAAS,UAAU,WAAW,MAAME,EAAa,IAAI,GAAG,GAAG,IAEtD,MAAM,aAAaF,EAAS,OAAO,IACzC,CAACP,CAAK,CAAC;AAEV,QAAMY,IAAY;AAAA,IAChBC,EAAO,iBAAiB;AAAA,IACxBZ,IAAgBY,EAAO,uBAAuB,IAAI;AAAA,IAClDX;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELY,IAAa;AAAA,IACjBD,EAAO,wBAAwB;AAAA,IAC/BL,MAAc,OAAOK,EAAO,iCAAiC,IAAI;AAAA,IACjEL,MAAc,SAASK,EAAO,mCAAmC,IAAI;AAAA,EAAA,EAEpE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWH;AAAA,MACX,SAAAT;AAAA,MACA,cAAY,GAAGJ,CAAK,IAAIC,CAAK,YAAYA,MAAU,IAAI,MAAM,EAAE;AAAA,MAC/D,gBAAcC;AAAA,MACb,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY,EAAC,UAAK,WAAWH,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAAd,GACH;AAAA,QACA,gBAAAiB,EAAC,QAAA,EAAK,WAAWF,GAAa,UAAAd,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;"}
+{"version":3,"file":"ReactionButton.js","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport styles from './ReactionButton.module.scss';\n\nexport interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The emoji character to display. */\n  emoji: string;\n  /** Number of users who reacted with this emoji. */\n  count: number;\n  /** Whether the current user has reacted with this emoji. */\n  byCurrentUser?: boolean;\n  /** Accessible name. Default: `{emoji} {count} reaction(s)`. An explicit `aria-label` still wins. */\n  formatLabel?: (emoji: string, count: number) => string;\n}\n\nconst defaultFormatLabel = (emoji: string, count: number) =>\n  `${emoji} ${count} reaction${count !== 1 ? 's' : ''}`;\n\n/**\n * A single emoji reaction button — shows the emoji, count, and highlights when the current user\n * has reacted. Fires onClick when clicked; the host owns toggle logic.\n *\n * The count animates up or down when the `count` prop changes.\n */\nexport default function ReactionButton({\n  emoji,\n  count,\n  byCurrentUser = false,\n  formatLabel = defaultFormatLabel,\n  className = '',\n  onClick,\n  ...rest\n}: ReactionButtonProps) {\n  const prevCountRef = useRef(count);\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const [countAnim, setCountAnim] = useState<'up' | 'down' | null>(null);\n\n  useEffect(() => {\n    if (count !== prevCountRef.current) {\n      clearTimeout(timerRef.current);\n      setCountAnim(count > prevCountRef.current ? 'up' : 'down');\n      prevCountRef.current = count;\n      timerRef.current = setTimeout(() => setCountAnim(null), 300);\n    }\n    return () => clearTimeout(timerRef.current);\n  }, [count]);\n\n  const rootClass = [\n    styles['reaction-button'],\n    byCurrentUser ? styles['reaction-button--mine'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const countClass = [\n    styles['reaction-button__count'],\n    countAnim === 'up' ? styles['reaction-button__count--anim-up'] : '',\n    countAnim === 'down' ? styles['reaction-button__count--anim-down'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={rootClass}\n      onClick={onClick}\n      aria-label={formatLabel(emoji, count)}\n      aria-pressed={byCurrentUser}\n      {...rest}\n    >\n      <span className={styles['reaction-button__emoji']} aria-hidden>\n        {emoji}\n      </span>\n      <span className={countClass}>{count}</span>\n    </button>\n  );\n}\n"],"names":["defaultFormatLabel","emoji","count","ReactionButton","byCurrentUser","formatLabel","className","onClick","rest","prevCountRef","useRef","timerRef","countAnim","setCountAnim","useState","useEffect","rootClass","styles","countClass","jsxs","jsx"],"mappings":";;;AAeA,MAAMA,IAAqB,CAACC,GAAeC,MACzC,GAAGD,CAAK,IAAIC,CAAK,YAAYA,MAAU,IAAI,MAAM,EAAE;AAQrD,SAAwBC,EAAe;AAAA,EACrC,OAAAF;AAAA,EACA,OAAAC;AAAA,EACA,eAAAE,IAAgB;AAAA,EAChB,aAAAC,IAAcL;AAAA,EACd,WAAAM,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAeC,EAAOR,CAAK,GAC3BS,IAAWD,EAAsC,MAAS,GAC1D,CAACE,GAAWC,CAAY,IAAIC,EAA+B,IAAI;AAErE,EAAAC,EAAU,OACJb,MAAUO,EAAa,YACzB,aAAaE,EAAS,OAAO,GAC7BE,EAAaX,IAAQO,EAAa,UAAU,OAAO,MAAM,GACzDA,EAAa,UAAUP,GACvBS,EAAS,UAAU,WAAW,MAAME,EAAa,IAAI,GAAG,GAAG,IAEtD,MAAM,aAAaF,EAAS,OAAO,IACzC,CAACT,CAAK,CAAC;AAEV,QAAMc,IAAY;AAAA,IAChBC,EAAO,iBAAiB;AAAA,IACxBb,IAAgBa,EAAO,uBAAuB,IAAI;AAAA,IAClDX;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELY,IAAa;AAAA,IACjBD,EAAO,wBAAwB;AAAA,IAC/BL,MAAc,OAAOK,EAAO,iCAAiC,IAAI;AAAA,IACjEL,MAAc,SAASK,EAAO,mCAAmC,IAAI;AAAA,EAAA,EAEpE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWH;AAAA,MACX,SAAAT;AAAA,MACA,cAAYF,EAAYJ,GAAOC,CAAK;AAAA,MACpC,gBAAcE;AAAA,MACb,GAAGI;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY,EAAC,UAAK,WAAWH,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAAhB,GACH;AAAA,QACA,gBAAAmB,EAAC,QAAA,EAAK,WAAWF,GAAa,UAAAhB,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;"}

package/dist/components/reactions-row/ReactionsRow.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),h=require("../icon-button/IconButton.cjs"),l=require("../icon/Icon.cjs"),w=require("../reaction-button/ReactionButton.cjs"),__p=require("@mattermost/compass-icons/components/check-circle-outline.js"),p=__p?.default??__p,__b=require("@mattermost/compass-icons/components/emoticon-plus-outline.js"),b=__b?.default??__b,a=require("./ReactionsRow.module.scss.cjs"),N=[{emoji:"👍",count:1},{emoji:"😀",count:4},{emoji:"🙌",count:1}];function q({reactions:n=N,showAddReaction:c=!1,acknowledged:i=!1,acknowledgeCount:r=0,currentUserAcknowledged:s=!1,onAddReaction:u,onReactionClick:t,onAcknowledge:d,className:f="",..._}){const j=[a.default["reactions-row"],f].filter(Boolean).join(" ");return e.jsxs("div",{className:j,..._,children:[i&&e.jsxs("button",{type:"button",className:[a.default["reactions-row__ack"],s?a.default["reactions-row__ack--active"]:""].filter(Boolean).join(" "),onClick:d,"aria-pressed":s,"aria-label":"Acknowledge message",children:[e.jsx("span",{className:a.default["reactions-row__ack-icon"],"aria-hidden":!0,children:e.jsx(l.default,{size:"16",glyph:e.jsx(p,{})})}),s?e.jsx("span",{className:a.default["reactions-row__ack-count"],children:r}):e.jsx("span",{className:a.default["reactions-row__ack-label"],children:"Acknowledge"})]}),e.jsxs("div",{className:a.default["reactions-row__buttons"],children:[n.map(({emoji:o,count:m,byCurrentUser:x})=>e.jsx(w.default,{emoji:o,count:m,byCurrentUser:x,onClick:()=>t==null?void 0:t(o)},o)),c&&e.jsx(h.default,{"aria-label":"Add reaction",className:a.default["reactions-row__add-reaction"],size:"x-small",onClick:u,icon:e.jsx(l.default,{size:"16",glyph:e.jsx(b,{})})})]})]})}exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("../icon-button/IconButton.cjs"),l=require("../icon/Icon.cjs"),q=require("../reaction-button/ReactionButton.cjs"),__g=require("@mattermost/compass-icons/components/check-circle-outline.js"),g=__g?.default??__g,__k=require("@mattermost/compass-icons/components/emoticon-plus-outline.js"),k=__k?.default??__k,a=require("./ReactionsRow.module.scss.cjs"),v=[{emoji:"👍",count:1},{emoji:"😀",count:4},{emoji:"🙌",count:1}];function I({reactions:n=v,showAddReaction:c=!1,acknowledged:r=!1,acknowledgeCount:i=0,currentUserAcknowledged:s=!1,onAddReaction:u,onReactionClick:t,onAcknowledge:d,acknowledgeLabel:f="Acknowledge",acknowledgeAriaLabel:_="Acknowledge message",addReactionLabel:j="Add reaction",formatReactionLabel:m,className:x="",...h}){const w=[a.default["reactions-row"],x].filter(Boolean).join(" ");return e.jsxs("div",{className:w,...h,children:[r&&e.jsxs("button",{type:"button",className:[a.default["reactions-row__ack"],s?a.default["reactions-row__ack--active"]:""].filter(Boolean).join(" "),onClick:d,"aria-pressed":s,"aria-label":_,children:[e.jsx("span",{className:a.default["reactions-row__ack-icon"],"aria-hidden":!0,children:e.jsx(l.default,{size:"16",glyph:e.jsx(g,{})})}),s?e.jsx("span",{className:a.default["reactions-row__ack-count"],children:i}):e.jsx("span",{className:a.default["reactions-row__ack-label"],children:f})]}),e.jsxs("div",{className:a.default["reactions-row__buttons"],children:[n.map(({emoji:o,count:b,byCurrentUser:p})=>e.jsx(q.default,{emoji:o,count:b,byCurrentUser:p,formatLabel:m,onClick:()=>t==null?void 0:t(o)},o)),c&&e.jsx(N.default,{"aria-label":j,className:a.default["reactions-row__add-reaction"],size:"x-small",onClick:u,icon:e.jsx(l.default,{size:"16",glyph:e.jsx(k,{})})})]})]})}exports.default=I;
 //# sourceMappingURL=ReactionsRow.cjs.map

package/dist/components/reactions-row/ReactionsRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionsRow.cjs","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport ReactionButton from '@/components/reaction-button/ReactionButton';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport styles from './ReactionsRow.module.scss';\n\nexport interface ReactionItem {\n  emoji: string;\n  count: number;\n  /** Whether the current user reacted with this emoji. */\n  byCurrentUser?: boolean;\n}\n\nexport interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** List of reactions to display. */\n  reactions?: ReactionItem[];\n  /** Whether to show the add-reaction button. Default: false. */\n  showAddReaction?: boolean;\n  /** Whether to show the acknowledge button. */\n  acknowledged?: boolean;\n  /** Acknowledge count. */\n  acknowledgeCount?: number;\n  /** Whether the current user has acknowledged. Default: false. */\n  currentUserAcknowledged?: boolean;\n  /** Called when add-reaction is clicked. */\n  onAddReaction?: () => void;\n  /** Called when a Reaction Button is clicked. */\n  onReactionClick?: (emoji: string) => void;\n  /** Called when the acknowledge button is clicked. */\n  onAcknowledge?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_REACTIONS: ReactionItem[] = [\n  { emoji: '👍', count: 1 },\n  { emoji: '😀', count: 4 },\n  { emoji: '🙌', count: 1 },\n];\n\n/**\n * Reactions Row is the strip of Reaction Buttons below a message — the lightest weight way to\n * respond, applaud, or acknowledge without adding to the thread. The component handles the\n * count, the \"this is mine\" highlight, and the add-reaction affordance.\n */\nexport default function ReactionsRow({\n  reactions = DEFAULT_REACTIONS,\n  showAddReaction = false,\n  acknowledged = false,\n  acknowledgeCount = 0,\n  currentUserAcknowledged = false,\n  onAddReaction,\n  onReactionClick,\n  onAcknowledge,\n  className = '',\n  ...rest\n}: ReactionsRowProps) {\n  const rootClass = [styles['reactions-row'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {/* Acknowledge button */}\n      {acknowledged && (\n        <button\n          type=\"button\"\n          className={[\n            styles['reactions-row__ack'],\n            currentUserAcknowledged ? styles['reactions-row__ack--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onAcknowledge}\n          aria-pressed={currentUserAcknowledged}\n          aria-label=\"Acknowledge message\"\n        >\n          <span className={styles['reactions-row__ack-icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<CheckCircleOutlineIcon />} />\n          </span>\n          {currentUserAcknowledged ? (\n            <span className={styles['reactions-row__ack-count']}>\n              {acknowledgeCount}\n            </span>\n          ) : (\n            <span className={styles['reactions-row__ack-label']}>\n              Acknowledge\n            </span>\n          )}\n        </button>\n      )}\n\n      {/* Reaction buttons */}\n      <div className={styles['reactions-row__buttons']}>\n        {reactions.map(({ emoji, count, byCurrentUser }) => (\n          <ReactionButton\n            key={emoji}\n            emoji={emoji}\n            count={count}\n            byCurrentUser={byCurrentUser}\n            onClick={() => onReactionClick?.(emoji)}\n          />\n        ))}\n\n        {/* Add reaction button */}\n        {showAddReaction && (\n          <IconButton\n            aria-label=\"Add reaction\"\n            className={styles['reactions-row__add-reaction']}\n            size=\"x-small\"\n            onClick={onAddReaction}\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DEFAULT_REACTIONS","ReactionsRow","reactions","showAddReaction","acknowledged","acknowledgeCount","currentUserAcknowledged","onAddReaction","onReactionClick","onAcknowledge","className","rest","rootClass","styles","jsxs","jsx","Icon","CheckCircleOutlineIcon","emoji","count","byCurrentUser","ReactionButton","IconButton","EmoticonPlusOutlineIcon"],"mappings":"scAoCMA,EAAoC,CACxC,CAAE,MAAO,KAAM,MAAO,CAAA,EACtB,CAAE,MAAO,KAAM,MAAO,CAAA,EACtB,CAAE,MAAO,KAAM,MAAO,CAAA,CACxB,EAOA,SAAwBC,EAAa,CACnC,UAAAC,EAAYF,EACZ,gBAAAG,EAAkB,GAClB,aAAAC,EAAe,GACf,iBAAAC,EAAmB,EACnB,wBAAAC,EAA0B,GAC1B,cAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAACC,UAAO,eAAe,EAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAY,GAAGD,EAE5B,SAAA,CAAAP,GACCU,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTD,EAAAA,QAAO,oBAAoB,EAC3BP,EAA0BO,EAAAA,QAAO,4BAA4B,EAAI,EAAA,EAEhE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcH,EACd,aAAW,sBAEX,SAAA,CAAAS,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAC7D,SAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAuB,EAAI,EACrD,EACCX,EACCS,EAAAA,IAAC,OAAA,CAAK,UAAWF,UAAO,0BAA0B,EAC/C,SAAAR,CAAA,CACH,QAEC,OAAA,CAAK,UAAWQ,EAAAA,QAAO,0BAA0B,EAAG,SAAA,aAAA,CAErD,CAAA,CAAA,CAAA,EAMNC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAX,EAAU,IAAI,CAAC,CAAE,MAAAgB,EAAO,MAAAC,EAAO,cAAAC,KAC9BL,EAAAA,IAACM,EAAAA,QAAA,CAEC,MAAAH,EACA,MAAAC,EACA,cAAAC,EACA,QAAS,IAAMZ,GAAA,YAAAA,EAAkBU,EAAK,EAJjCA,CAAA,CAMR,EAGAf,GACCY,EAAAA,IAACO,EAAAA,QAAA,CACC,aAAW,eACX,UAAWT,EAAAA,QAAO,6BAA6B,EAC/C,KAAK,UACL,QAASN,EACT,WAAOS,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACQ,IAAwB,CAAA,CAAI,CAAA,CAAA,CAC5D,CAAA,CAEJ,CAAA,EACF,CAEJ"}
+{"version":3,"file":"ReactionsRow.cjs","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport ReactionButton from '@/components/reaction-button/ReactionButton';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport styles from './ReactionsRow.module.scss';\n\nexport interface ReactionItem {\n  emoji: string;\n  count: number;\n  /** Whether the current user reacted with this emoji. */\n  byCurrentUser?: boolean;\n}\n\nexport interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** List of reactions to display. */\n  reactions?: ReactionItem[];\n  /** Whether to show the add-reaction button. Default: false. */\n  showAddReaction?: boolean;\n  /** Whether to show the acknowledge button. */\n  acknowledged?: boolean;\n  /** Acknowledge count. */\n  acknowledgeCount?: number;\n  /** Whether the current user has acknowledged. Default: false. */\n  currentUserAcknowledged?: boolean;\n  /** Called when add-reaction is clicked. */\n  onAddReaction?: () => void;\n  /** Called when a Reaction Button is clicked. */\n  onReactionClick?: (emoji: string) => void;\n  /** Called when the acknowledge button is clicked. */\n  onAcknowledge?: () => void;\n  /** Visible acknowledge button text. Default: \"Acknowledge\". */\n  acknowledgeLabel?: ReactNode;\n  /** Accessible name for the acknowledge button. Default: \"Acknowledge message\". */\n  acknowledgeAriaLabel?: string;\n  /** Accessible name for the add-reaction button. Default: \"Add reaction\". */\n  addReactionLabel?: string;\n  /** Accessible name for each reaction button. Default: `{emoji} {count} reaction(s)`. */\n  formatReactionLabel?: (emoji: string, count: number) => string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_REACTIONS: ReactionItem[] = [\n  { emoji: '👍', count: 1 },\n  { emoji: '😀', count: 4 },\n  { emoji: '🙌', count: 1 },\n];\n\n/**\n * Reactions Row is the strip of Reaction Buttons below a message — the lightest weight way to\n * respond, applaud, or acknowledge without adding to the thread. The component handles the\n * count, the \"this is mine\" highlight, and the add-reaction affordance.\n */\nexport default function ReactionsRow({\n  reactions = DEFAULT_REACTIONS,\n  showAddReaction = false,\n  acknowledged = false,\n  acknowledgeCount = 0,\n  currentUserAcknowledged = false,\n  onAddReaction,\n  onReactionClick,\n  onAcknowledge,\n  acknowledgeLabel = 'Acknowledge',\n  acknowledgeAriaLabel = 'Acknowledge message',\n  addReactionLabel = 'Add reaction',\n  formatReactionLabel,\n  className = '',\n  ...rest\n}: ReactionsRowProps) {\n  const rootClass = [styles['reactions-row'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {/* Acknowledge button */}\n      {acknowledged && (\n        <button\n          type=\"button\"\n          className={[\n            styles['reactions-row__ack'],\n            currentUserAcknowledged ? styles['reactions-row__ack--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onAcknowledge}\n          aria-pressed={currentUserAcknowledged}\n          aria-label={acknowledgeAriaLabel}\n        >\n          <span className={styles['reactions-row__ack-icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<CheckCircleOutlineIcon />} />\n          </span>\n          {currentUserAcknowledged ? (\n            <span className={styles['reactions-row__ack-count']}>\n              {acknowledgeCount}\n            </span>\n          ) : (\n            <span className={styles['reactions-row__ack-label']}>\n              {acknowledgeLabel}\n            </span>\n          )}\n        </button>\n      )}\n\n      {/* Reaction buttons */}\n      <div className={styles['reactions-row__buttons']}>\n        {reactions.map(({ emoji, count, byCurrentUser }) => (\n          <ReactionButton\n            key={emoji}\n            emoji={emoji}\n            count={count}\n            byCurrentUser={byCurrentUser}\n            formatLabel={formatReactionLabel}\n            onClick={() => onReactionClick?.(emoji)}\n          />\n        ))}\n\n        {/* Add reaction button */}\n        {showAddReaction && (\n          <IconButton\n            aria-label={addReactionLabel}\n            className={styles['reactions-row__add-reaction']}\n            size=\"x-small\"\n            onClick={onAddReaction}\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DEFAULT_REACTIONS","ReactionsRow","reactions","showAddReaction","acknowledged","acknowledgeCount","currentUserAcknowledged","onAddReaction","onReactionClick","onAcknowledge","acknowledgeLabel","acknowledgeAriaLabel","addReactionLabel","formatReactionLabel","className","rest","rootClass","styles","jsxs","jsx","Icon","CheckCircleOutlineIcon","emoji","count","byCurrentUser","ReactionButton","IconButton","EmoticonPlusOutlineIcon"],"mappings":"scA4CMA,EAAoC,CACxC,CAAE,MAAO,KAAM,MAAO,CAAA,EACtB,CAAE,MAAO,KAAM,MAAO,CAAA,EACtB,CAAE,MAAO,KAAM,MAAO,CAAA,CACxB,EAOA,SAAwBC,EAAa,CACnC,UAAAC,EAAYF,EACZ,gBAAAG,EAAkB,GAClB,aAAAC,EAAe,GACf,iBAAAC,EAAmB,EACnB,wBAAAC,EAA0B,GAC1B,cAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,iBAAAC,EAAmB,cACnB,qBAAAC,EAAuB,sBACvB,iBAAAC,EAAmB,eACnB,oBAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAACC,UAAO,eAAe,EAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAY,GAAGD,EAE5B,SAAA,CAAAX,GACCc,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTD,EAAAA,QAAO,oBAAoB,EAC3BX,EAA0BW,EAAAA,QAAO,4BAA4B,EAAI,EAAA,EAEhE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASR,EACT,eAAcH,EACd,aAAYK,EAEZ,SAAA,CAAAQ,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAC7D,SAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAuB,EAAI,EACrD,EACCf,EACCa,EAAAA,IAAC,OAAA,CAAK,UAAWF,UAAO,0BAA0B,EAC/C,SAAAZ,CAAA,CACH,QAEC,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAC/C,SAAAP,CAAA,CACH,CAAA,CAAA,CAAA,EAMNQ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAf,EAAU,IAAI,CAAC,CAAE,MAAAoB,EAAO,MAAAC,EAAO,cAAAC,KAC9BL,EAAAA,IAACM,EAAAA,QAAA,CAEC,MAAAH,EACA,MAAAC,EACA,cAAAC,EACA,YAAaX,EACb,QAAS,IAAML,GAAA,YAAAA,EAAkBc,EAAK,EALjCA,CAAA,CAOR,EAGAnB,GACCgB,EAAAA,IAACO,EAAAA,QAAA,CACC,aAAYd,EACZ,UAAWK,EAAAA,QAAO,6BAA6B,EAC/C,KAAK,UACL,QAASV,EACT,WAAOa,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACQ,IAAwB,CAAA,CAAI,CAAA,CAAA,CAC5D,CAAA,CAEJ,CAAA,EACF,CAEJ"}

package/dist/components/reactions-row/ReactionsRow.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface ReactionItem {
     emoji: string;
     count: number;
@@ -22,6 +22,14 @@ export interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {
     onReactionClick?: (emoji: string) => void;
     /** Called when the acknowledge button is clicked. */
     onAcknowledge?: () => void;
+    /** Visible acknowledge button text. Default: "Acknowledge". */
+    acknowledgeLabel?: ReactNode;
+    /** Accessible name for the acknowledge button. Default: "Acknowledge message". */
+    acknowledgeAriaLabel?: string;
+    /** Accessible name for the add-reaction button. Default: "Add reaction". */
+    addReactionLabel?: string;
+    /** Accessible name for each reaction button. Default: `{emoji} {count} reaction(s)`. */
+    formatReactionLabel?: (emoji: string, count: number) => string;
     /** Optional CSS class name. */
     className?: string;
 }
@@ -30,5 +38,5 @@ export interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {
  * respond, applaud, or acknowledge without adding to the thread. The component handles the
  * count, the "this is mine" highlight, and the add-reaction affordance.
  */
-export default function ReactionsRow({ reactions, showAddReaction, acknowledged, acknowledgeCount, currentUserAcknowledged, onAddReaction, onReactionClick, onAcknowledge, className, ...rest }: ReactionsRowProps): import("react/jsx-runtime").JSX.Element;
+export default function ReactionsRow({ reactions, showAddReaction, acknowledged, acknowledgeCount, currentUserAcknowledged, onAddReaction, onReactionClick, onAcknowledge, acknowledgeLabel, acknowledgeAriaLabel, addReactionLabel, formatReactionLabel, className, ...rest }: ReactionsRowProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ReactionsRow.d.ts.map

package/dist/components/reactions-row/ReactionsRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionsRow.d.ts","sourceRoot":"","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,oCAAoC;IACpC,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAA6B,EAC7B,eAAuB,EACvB,YAAoB,EACpB,gBAAoB,EACpB,uBAA+B,EAC/B,aAAa,EACb,eAAe,EACf,aAAa,EACb,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CA6DnB"}
+{"version":3,"file":"ReactionsRow.d.ts","sourceRoot":"","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,oCAAoC;IACpC,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kFAAkF;IAClF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wFAAwF;IACxF,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/D,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAA6B,EAC7B,eAAuB,EACvB,YAAoB,EACpB,gBAAoB,EACpB,uBAA+B,EAC/B,aAAa,EACb,eAAe,EACf,aAAa,EACb,gBAAgC,EAChC,oBAA4C,EAC5C,gBAAiC,EACjC,mBAAmB,EACnB,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CA8DnB"}

package/dist/components/reactions-row/ReactionsRow.js

@@ -1,30 +1,34 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import N from "../icon-button/IconButton.js";
-import t from "../icon/Icon.js";
-import b from "../reaction-button/ReactionButton.js";
-import __j from "@mattermost/compass-icons/components/check-circle-outline.js";const j=__j&&__j.default?__j.default:__j;
-import __k from "@mattermost/compass-icons/components/emoticon-plus-outline.js";const k=__k&&__k.default?__k.default:__k;
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import I from "../icon-button/IconButton.js";
+import i from "../icon/Icon.js";
+import x from "../reaction-button/ReactionButton.js";
+import __y from "@mattermost/compass-icons/components/check-circle-outline.js";const y=__y&&__y.default?__y.default:__y;
+import __B from "@mattermost/compass-icons/components/emoticon-plus-outline.js";const B=__B&&__B.default?__B.default:__B;
 import a from "./ReactionsRow.module.scss.js";
-const I = [
+const g = [
   { emoji: "👍", count: 1 },
   { emoji: "😀", count: 4 },
   { emoji: "🙌", count: 1 }
 ];
-function C({
-  reactions: n = I,
+function T({
+  reactions: n = g,
   showAddReaction: c = !1,
   acknowledged: l = !1,
   acknowledgeCount: m = 0,
   currentUserAcknowledged: e = !1,
   onAddReaction: p,
   onReactionClick: s,
-  onAcknowledge: _,
-  className: d = "",
-  ...f
+  onAcknowledge: f,
+  acknowledgeLabel: _ = "Acknowledge",
+  acknowledgeAriaLabel: d = "Acknowledge message",
+  addReactionLabel: u = "Add reaction",
+  formatReactionLabel: h,
+  className: w = "",
+  ...N
 }) {
-  const u = [a["reactions-row"], d].filter(Boolean).join(" ");
-  return /* @__PURE__ */ i("div", { className: u, ...f, children: [
-    l && /* @__PURE__ */ i(
+  const b = [a["reactions-row"], w].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t("div", { className: b, ...N, children: [
+    l && /* @__PURE__ */ t(
       "button",
       {
         type: "button",
@@ -32,40 +36,41 @@ function C({
           a["reactions-row__ack"],
           e ? a["reactions-row__ack--active"] : ""
         ].filter(Boolean).join(" "),
-        onClick: _,
+        onClick: f,
         "aria-pressed": e,
-        "aria-label": "Acknowledge message",
+        "aria-label": d,
         children: [
-          /* @__PURE__ */ o("span", { className: a["reactions-row__ack-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(t, { size: "16", glyph: /* @__PURE__ */ o(j, {}) }) }),
-          e ? /* @__PURE__ */ o("span", { className: a["reactions-row__ack-count"], children: m }) : /* @__PURE__ */ o("span", { className: a["reactions-row__ack-label"], children: "Acknowledge" })
+          /* @__PURE__ */ o("span", { className: a["reactions-row__ack-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(i, { size: "16", glyph: /* @__PURE__ */ o(y, {}) }) }),
+          e ? /* @__PURE__ */ o("span", { className: a["reactions-row__ack-count"], children: m }) : /* @__PURE__ */ o("span", { className: a["reactions-row__ack-label"], children: _ })
         ]
       }
     ),
-    /* @__PURE__ */ i("div", { className: a["reactions-row__buttons"], children: [
-      n.map(({ emoji: r, count: h, byCurrentUser: w }) => /* @__PURE__ */ o(
-        b,
+    /* @__PURE__ */ t("div", { className: a["reactions-row__buttons"], children: [
+      n.map(({ emoji: r, count: j, byCurrentUser: k }) => /* @__PURE__ */ o(
+        x,
         {
           emoji: r,
-          count: h,
-          byCurrentUser: w,
+          count: j,
+          byCurrentUser: k,
+          formatLabel: h,
           onClick: () => s == null ? void 0 : s(r)
         },
         r
       )),
       c && /* @__PURE__ */ o(
-        N,
+        I,
         {
-          "aria-label": "Add reaction",
+          "aria-label": u,
           className: a["reactions-row__add-reaction"],
           size: "x-small",
           onClick: p,
-          icon: /* @__PURE__ */ o(t, { size: "16", glyph: /* @__PURE__ */ o(k, {}) })
+          icon: /* @__PURE__ */ o(i, { size: "16", glyph: /* @__PURE__ */ o(B, {}) })
         }
       )
     ] })
   ] });
 }
 export {
-  C as default
+  T as default
 };
 //# sourceMappingURL=ReactionsRow.js.map

package/dist/components/reactions-row/ReactionsRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionsRow.js","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport ReactionButton from '@/components/reaction-button/ReactionButton';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport styles from './ReactionsRow.module.scss';\n\nexport interface ReactionItem {\n  emoji: string;\n  count: number;\n  /** Whether the current user reacted with this emoji. */\n  byCurrentUser?: boolean;\n}\n\nexport interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** List of reactions to display. */\n  reactions?: ReactionItem[];\n  /** Whether to show the add-reaction button. Default: false. */\n  showAddReaction?: boolean;\n  /** Whether to show the acknowledge button. */\n  acknowledged?: boolean;\n  /** Acknowledge count. */\n  acknowledgeCount?: number;\n  /** Whether the current user has acknowledged. Default: false. */\n  currentUserAcknowledged?: boolean;\n  /** Called when add-reaction is clicked. */\n  onAddReaction?: () => void;\n  /** Called when a Reaction Button is clicked. */\n  onReactionClick?: (emoji: string) => void;\n  /** Called when the acknowledge button is clicked. */\n  onAcknowledge?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_REACTIONS: ReactionItem[] = [\n  { emoji: '👍', count: 1 },\n  { emoji: '😀', count: 4 },\n  { emoji: '🙌', count: 1 },\n];\n\n/**\n * Reactions Row is the strip of Reaction Buttons below a message — the lightest weight way to\n * respond, applaud, or acknowledge without adding to the thread. The component handles the\n * count, the \"this is mine\" highlight, and the add-reaction affordance.\n */\nexport default function ReactionsRow({\n  reactions = DEFAULT_REACTIONS,\n  showAddReaction = false,\n  acknowledged = false,\n  acknowledgeCount = 0,\n  currentUserAcknowledged = false,\n  onAddReaction,\n  onReactionClick,\n  onAcknowledge,\n  className = '',\n  ...rest\n}: ReactionsRowProps) {\n  const rootClass = [styles['reactions-row'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {/* Acknowledge button */}\n      {acknowledged && (\n        <button\n          type=\"button\"\n          className={[\n            styles['reactions-row__ack'],\n            currentUserAcknowledged ? styles['reactions-row__ack--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onAcknowledge}\n          aria-pressed={currentUserAcknowledged}\n          aria-label=\"Acknowledge message\"\n        >\n          <span className={styles['reactions-row__ack-icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<CheckCircleOutlineIcon />} />\n          </span>\n          {currentUserAcknowledged ? (\n            <span className={styles['reactions-row__ack-count']}>\n              {acknowledgeCount}\n            </span>\n          ) : (\n            <span className={styles['reactions-row__ack-label']}>\n              Acknowledge\n            </span>\n          )}\n        </button>\n      )}\n\n      {/* Reaction buttons */}\n      <div className={styles['reactions-row__buttons']}>\n        {reactions.map(({ emoji, count, byCurrentUser }) => (\n          <ReactionButton\n            key={emoji}\n            emoji={emoji}\n            count={count}\n            byCurrentUser={byCurrentUser}\n            onClick={() => onReactionClick?.(emoji)}\n          />\n        ))}\n\n        {/* Add reaction button */}\n        {showAddReaction && (\n          <IconButton\n            aria-label=\"Add reaction\"\n            className={styles['reactions-row__add-reaction']}\n            size=\"x-small\"\n            onClick={onAddReaction}\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DEFAULT_REACTIONS","ReactionsRow","reactions","showAddReaction","acknowledged","acknowledgeCount","currentUserAcknowledged","onAddReaction","onReactionClick","onAcknowledge","className","rest","rootClass","styles","jsxs","jsx","Icon","CheckCircleOutlineIcon","emoji","count","byCurrentUser","ReactionButton","IconButton","EmoticonPlusOutlineIcon"],"mappings":";;;;;;;AAoCA,MAAMA,IAAoC;AAAA,EACxC,EAAE,OAAO,MAAM,OAAO,EAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,EAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,EAAA;AACxB;AAOA,SAAwBC,EAAa;AAAA,EACnC,WAAAC,IAAYF;AAAA,EACZ,iBAAAG,IAAkB;AAAA,EAClB,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,yBAAAC,IAA0B;AAAA,EAC1B,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY,CAACC,EAAO,eAAe,GAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GAAY,GAAGD,GAE5B,UAAA;AAAA,IAAAP,KACC,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,UACTD,EAAO,oBAAoB;AAAA,UAC3BP,IAA0BO,EAAO,4BAA4B,IAAI;AAAA,QAAA,EAEhE,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,SAASJ;AAAA,QACT,gBAAcH;AAAA,QACd,cAAW;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAS,EAAC,QAAA,EAAK,WAAWF,EAAO,yBAAyB,GAAG,eAAW,IAC7D,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAuB,GAAI,GACrD;AAAA,UACCX,IACC,gBAAAS,EAAC,QAAA,EAAK,WAAWF,EAAO,0BAA0B,GAC/C,UAAAR,EAAA,CACH,sBAEC,QAAA,EAAK,WAAWQ,EAAO,0BAA0B,GAAG,UAAA,cAAA,CAErD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAMN,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAA;AAAA,MAAAX,EAAU,IAAI,CAAC,EAAE,OAAAgB,GAAO,OAAAC,GAAO,eAAAC,QAC9B,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,OAAAH;AAAA,UACA,OAAAC;AAAA,UACA,eAAAC;AAAA,UACA,SAAS,MAAMZ,KAAA,gBAAAA,EAAkBU;AAAA,QAAK;AAAA,QAJjCA;AAAA,MAAA,CAMR;AAAA,MAGAf,KACC,gBAAAY;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,cAAW;AAAA,UACX,WAAWT,EAAO,6BAA6B;AAAA,UAC/C,MAAK;AAAA,UACL,SAASN;AAAA,UACT,wBAAOS,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACQ,KAAwB,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5D,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"ReactionsRow.js","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport ReactionButton from '@/components/reaction-button/ReactionButton';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport styles from './ReactionsRow.module.scss';\n\nexport interface ReactionItem {\n  emoji: string;\n  count: number;\n  /** Whether the current user reacted with this emoji. */\n  byCurrentUser?: boolean;\n}\n\nexport interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** List of reactions to display. */\n  reactions?: ReactionItem[];\n  /** Whether to show the add-reaction button. Default: false. */\n  showAddReaction?: boolean;\n  /** Whether to show the acknowledge button. */\n  acknowledged?: boolean;\n  /** Acknowledge count. */\n  acknowledgeCount?: number;\n  /** Whether the current user has acknowledged. Default: false. */\n  currentUserAcknowledged?: boolean;\n  /** Called when add-reaction is clicked. */\n  onAddReaction?: () => void;\n  /** Called when a Reaction Button is clicked. */\n  onReactionClick?: (emoji: string) => void;\n  /** Called when the acknowledge button is clicked. */\n  onAcknowledge?: () => void;\n  /** Visible acknowledge button text. Default: \"Acknowledge\". */\n  acknowledgeLabel?: ReactNode;\n  /** Accessible name for the acknowledge button. Default: \"Acknowledge message\". */\n  acknowledgeAriaLabel?: string;\n  /** Accessible name for the add-reaction button. Default: \"Add reaction\". */\n  addReactionLabel?: string;\n  /** Accessible name for each reaction button. Default: `{emoji} {count} reaction(s)`. */\n  formatReactionLabel?: (emoji: string, count: number) => string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_REACTIONS: ReactionItem[] = [\n  { emoji: '👍', count: 1 },\n  { emoji: '😀', count: 4 },\n  { emoji: '🙌', count: 1 },\n];\n\n/**\n * Reactions Row is the strip of Reaction Buttons below a message — the lightest weight way to\n * respond, applaud, or acknowledge without adding to the thread. The component handles the\n * count, the \"this is mine\" highlight, and the add-reaction affordance.\n */\nexport default function ReactionsRow({\n  reactions = DEFAULT_REACTIONS,\n  showAddReaction = false,\n  acknowledged = false,\n  acknowledgeCount = 0,\n  currentUserAcknowledged = false,\n  onAddReaction,\n  onReactionClick,\n  onAcknowledge,\n  acknowledgeLabel = 'Acknowledge',\n  acknowledgeAriaLabel = 'Acknowledge message',\n  addReactionLabel = 'Add reaction',\n  formatReactionLabel,\n  className = '',\n  ...rest\n}: ReactionsRowProps) {\n  const rootClass = [styles['reactions-row'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {/* Acknowledge button */}\n      {acknowledged && (\n        <button\n          type=\"button\"\n          className={[\n            styles['reactions-row__ack'],\n            currentUserAcknowledged ? styles['reactions-row__ack--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onAcknowledge}\n          aria-pressed={currentUserAcknowledged}\n          aria-label={acknowledgeAriaLabel}\n        >\n          <span className={styles['reactions-row__ack-icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<CheckCircleOutlineIcon />} />\n          </span>\n          {currentUserAcknowledged ? (\n            <span className={styles['reactions-row__ack-count']}>\n              {acknowledgeCount}\n            </span>\n          ) : (\n            <span className={styles['reactions-row__ack-label']}>\n              {acknowledgeLabel}\n            </span>\n          )}\n        </button>\n      )}\n\n      {/* Reaction buttons */}\n      <div className={styles['reactions-row__buttons']}>\n        {reactions.map(({ emoji, count, byCurrentUser }) => (\n          <ReactionButton\n            key={emoji}\n            emoji={emoji}\n            count={count}\n            byCurrentUser={byCurrentUser}\n            formatLabel={formatReactionLabel}\n            onClick={() => onReactionClick?.(emoji)}\n          />\n        ))}\n\n        {/* Add reaction button */}\n        {showAddReaction && (\n          <IconButton\n            aria-label={addReactionLabel}\n            className={styles['reactions-row__add-reaction']}\n            size=\"x-small\"\n            onClick={onAddReaction}\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DEFAULT_REACTIONS","ReactionsRow","reactions","showAddReaction","acknowledged","acknowledgeCount","currentUserAcknowledged","onAddReaction","onReactionClick","onAcknowledge","acknowledgeLabel","acknowledgeAriaLabel","addReactionLabel","formatReactionLabel","className","rest","rootClass","styles","jsxs","jsx","Icon","CheckCircleOutlineIcon","emoji","count","byCurrentUser","ReactionButton","IconButton","EmoticonPlusOutlineIcon"],"mappings":";;;;;;;AA4CA,MAAMA,IAAoC;AAAA,EACxC,EAAE,OAAO,MAAM,OAAO,EAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,EAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,EAAA;AACxB;AAOA,SAAwBC,EAAa;AAAA,EACnC,WAAAC,IAAYF;AAAA,EACZ,iBAAAG,IAAkB;AAAA,EAClB,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,yBAAAC,IAA0B;AAAA,EAC1B,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,sBAAAC,IAAuB;AAAA,EACvB,kBAAAC,IAAmB;AAAA,EACnB,qBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY,CAACC,EAAO,eAAe,GAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GAAY,GAAGD,GAE5B,UAAA;AAAA,IAAAX,KACC,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,UACTD,EAAO,oBAAoB;AAAA,UAC3BX,IAA0BW,EAAO,4BAA4B,IAAI;AAAA,QAAA,EAEhE,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,SAASR;AAAA,QACT,gBAAcH;AAAA,QACd,cAAYK;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWF,EAAO,yBAAyB,GAAG,eAAW,IAC7D,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAuB,GAAI,GACrD;AAAA,UACCf,IACC,gBAAAa,EAAC,QAAA,EAAK,WAAWF,EAAO,0BAA0B,GAC/C,UAAAZ,EAAA,CACH,sBAEC,QAAA,EAAK,WAAWY,EAAO,0BAA0B,GAC/C,UAAAP,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAMN,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAA;AAAA,MAAAf,EAAU,IAAI,CAAC,EAAE,OAAAoB,GAAO,OAAAC,GAAO,eAAAC,QAC9B,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,OAAAH;AAAA,UACA,OAAAC;AAAA,UACA,eAAAC;AAAA,UACA,aAAaX;AAAA,UACb,SAAS,MAAML,KAAA,gBAAAA,EAAkBc;AAAA,QAAK;AAAA,QALjCA;AAAA,MAAA,CAOR;AAAA,MAGAnB,KACC,gBAAAgB;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,cAAYd;AAAA,UACZ,WAAWK,EAAO,6BAA6B;AAAA,UAC/C,MAAK;AAAA,UACL,SAASV;AAAA,UACT,wBAAOa,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACQ,KAAwB,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5D,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__g=require("@mattermost/compass-icons/components/arrow-back-ios.js"),g=__g?.default??__g,__m=require("@mattermost/compass-icons/components/arrow-collapse.js"),m=__m?.default??__m,__p=require("@mattermost/compass-icons/components/arrow-expand.js"),p=__p?.default??__p,__N=require("@mattermost/compass-icons/components/close.js"),N=__N?.default??__N,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),q=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function v({title:f,secondaryTitle:i,tag:l,tagType:j="info",leadingIcon:t,onBack:d,onExpand:c,expanded:n=!1,onClose:o,actionLabel:u,onActionClick:_,actionActive:h=!1,className:x=""}){const b=[a.default["right-sidebar-header"],x].filter(Boolean).join(" ");return e.jsxs("div",{className:b,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[d&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":"Back",onClick:d,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(g,{})})}),t&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:t}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:f}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(q.default,{label:l,type:j,size:"x-small",casing:"all-caps"})})]}),i&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:i})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[u&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],h?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:_,"aria-pressed":h?!0:void 0,children:u}),c&&e.jsx(r.default,{size:"small","aria-label":n?"Collapse":"Expand",onClick:c,icon:e.jsx(s.default,{size:"16",glyph:n?e.jsx(m,{}):e.jsx(p,{})})}),o&&e.jsx(r.default,{size:"small","aria-label":"Close",onClick:o,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(N,{})})})]})]})}exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__q=require("@mattermost/compass-icons/components/arrow-back-ios.js"),q=__q?.default??__q,__v=require("@mattermost/compass-icons/components/arrow-collapse.js"),v=__v?.default??__v,__y=require("@mattermost/compass-icons/components/arrow-expand.js"),y=__y?.default??__y,__C=require("@mattermost/compass-icons/components/close.js"),C=__C?.default??__C,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),z=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function k({title:f,secondaryTitle:i,tag:l,tagType:j="info",leadingIcon:t,onBack:d,backLabel:_="Back",onExpand:c,expanded:n=!1,expandLabel:x="Expand",collapseLabel:b="Collapse",onClose:o,closeLabel:g="Close",actionLabel:u,onActionClick:m,actionActive:h=!1,className:p=""}){const N=[a.default["right-sidebar-header"],p].filter(Boolean).join(" ");return e.jsxs("div",{className:N,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[d&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":_,onClick:d,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(q,{})})}),t&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:t}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:f}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(z.default,{label:l,type:j,size:"x-small",casing:"all-caps"})})]}),i&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:i})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[u&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],h?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:m,"aria-pressed":h?!0:void 0,children:u}),c&&e.jsx(r.default,{size:"small","aria-label":n?b:x,onClick:c,icon:e.jsx(s.default,{size:"16",glyph:n?e.jsx(v,{}):e.jsx(y,{})})}),o&&e.jsx(r.default,{size:"small","aria-label":g,onClick:o,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(C,{})})})]})]})}exports.default=k;
 //# sourceMappingURL=RightSidebarHeader.cjs.map

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. */\n  title: string;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: string;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: string;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Optional inline action label (e.g. \"Follow\"). */\n  actionLabel?: string;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  onExpand,\n  expanded = false,\n  onClose,\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label=\"Back\"\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? 'Collapse' : 'Expand'}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label=\"Close\"\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","onExpand","expanded","onClose","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","CloseIcon"],"mappings":"giBAuCA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EACA,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAT,GACCW,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAW,OACX,QAAST,EACT,WAAOa,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDf,GACCY,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAV,EACH,QAED,OAAA,CAAK,UAAWU,EAAAA,QAAO,6BAA6B,EAAI,SAAAd,EAAM,EAC9DE,GACCc,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOlB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCe,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJH,GACCU,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYV,EAAW,WAAa,SACpC,QAASD,EACT,KACEU,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOX,EAAWS,MAACK,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILd,GACCQ,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAW,QACX,QAAST,EACT,WAAOU,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}
+{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","CloseIcon"],"mappings":"giBA+CA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,OACZ,SAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EAAc,SACd,cAAAC,EAAgB,WAChB,QAAAC,EACA,WAAAC,EAAa,QACb,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAb,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAYZ,EACZ,QAASD,EACT,WAAOiB,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDnB,GACCgB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAd,EACH,QAED,OAAA,CAAK,UAAWc,EAAAA,QAAO,6BAA6B,EAAI,SAAAlB,EAAM,EAC9DE,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOtB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCmB,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJN,GACCa,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYb,EAAWE,EAAgBD,EACvC,QAASF,EACT,KACEa,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOd,EAAWY,MAACK,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILf,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYT,EACZ,QAASD,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts

@@ -1,31 +1,39 @@
 import { ReactNode } from 'react';
 import { TagType } from '../tag/Tag';
 export interface RightSidebarHeaderProps {
-    /** Primary title text. */
-    title: string;
+    /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    title: ReactNode;
     /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */
-    secondaryTitle?: string;
+    secondaryTitle?: ReactNode;
     /** Optional tag rendered next to the title (e.g. "BETA"). */
-    tag?: string;
+    tag?: ReactNode;
     /** Tag visual style. Default: Info. */
     tagType?: TagType;
     /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size="20" />` to align with the title text. */
     leadingIcon?: ReactNode;
     /** When set, shows a back button and calls this on click. */
     onBack?: () => void;
+    /** Accessible name for the back button. Default: "Back". */
+    backLabel?: string;
     /** When set, shows an expand/collapse button and calls this on click. */
     onExpand?: () => void;
     /** When true, the expand button shows the collapse icon. Requires `onExpand`. */
     expanded?: boolean;
+    /** Accessible name for the expand button while collapsed. Default: "Expand". */
+    expandLabel?: string;
+    /** Accessible name for the expand button while expanded. Default: "Collapse". */
+    collapseLabel?: string;
     /** When set, shows a close button and calls this on click. */
     onClose?: () => void;
-    /** Optional inline action label (e.g. "Follow"). */
-    actionLabel?: string;
+    /** Accessible name for the close button. Default: "Close". */
+    closeLabel?: string;
+    /** Optional inline action label (e.g. "Follow"). Accepts translated nodes. */
+    actionLabel?: ReactNode;
     /** Click handler for the action label. */
     onActionClick?: () => void;
     /** When true, the action button shows in its active state. */
     actionActive?: boolean;
     className?: string;
 }
-export default function RightSidebarHeader({ title, secondaryTitle, tag, tagType, leadingIcon, onBack, onExpand, expanded, onClose, actionLabel, onActionClick, actionActive, className, }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function RightSidebarHeader({ title, secondaryTitle, tag, tagType, leadingIcon, onBack, backLabel, onExpand, expanded, expandLabel, collapseLabel, onClose, closeLabel, actionLabel, onActionClick, actionActive, className, }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RightSidebarHeader.d.ts.map

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,QAAQ,EACR,QAAgB,EAChB,OAAO,EACP,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CAsFzB"}
+{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,SAAkB,EAClB,QAAQ,EACR,QAAgB,EAChB,WAAsB,EACtB,aAA0B,EAC1B,OAAO,EACP,UAAoB,EACpB,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CAsFzB"}