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

package/dist/components/modal-header/ModalHeader.js

@@ -1,74 +1,89 @@
-import { jsx as a, jsxs as l } from "react/jsx-runtime";
-import __v from "@mattermost/compass-icons/components/close.js";const v=__v&&__v.default?__v.default:__v;
-import __y from "@mattermost/compass-icons/components/arrow-left.js";const y=__y&&__y.default?__y.default:__y;
-import n from "../icon/Icon.js";
-import h from "../icon-button/IconButton.js";
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import __g from "@mattermost/compass-icons/components/close.js";const g=__g&&__g.default?__g.default:__g;
+import __j from "@mattermost/compass-icons/components/arrow-left.js";const j=__j&&__j.default?__j.default:__j;
+import _ from "../icon/Icon.js";
+import t from "../icon-button/IconButton.js";
+import { mergeClassNames as x } from "../../utils/props.js";
 import e from "./ModalHeader.module.scss.js";
-function g({
-  className: t = "",
-  title: o,
-  subtitle: d,
-  subtitlePlacement: _ = "below",
-  hideTitle: s = !1,
-  titleId: r,
-  showBackButton: u = !1,
+function q({
+  className: N = "",
+  title: d,
+  subtitle: s,
+  subtitlePlacement: f = "below",
+  hideTitle: o = !1,
+  titleId: i,
+  showBackButton: b = !1,
   onBack: p,
-  onClose: f,
-  divider: N = !0,
-  headerAction: b
+  backLabel: u = "Go back",
+  backButtonProps: v,
+  onClose: y,
+  closeLabel: C = "Close",
+  closeButtonProps: r,
+  divider: k = !0,
+  headerAction: w,
+  headerSlot: m
 }) {
-  const i = !s && o != null, c = i && d != null, m = _ === "beside" && c;
-  return /* @__PURE__ */ a(
+  const c = !o && d != null, n = c && s != null, h = f === "beside" && n;
+  return /* @__PURE__ */ l(
     "div",
     {
       className: [
         e["modal-header"],
-        !N && e["modal-header--no-divider"],
-        s && e["modal-header--close-only"],
-        t
+        !k && e["modal-header--no-divider"],
+        o && e["modal-header--close-only"],
+        m && e["modal-header--has-slot"],
+        N
       ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ l("div", { className: e["modal-header__content"], children: [
-        i ? /* @__PURE__ */ l("div", { className: e["modal-header__titles"], children: [
-          /* @__PURE__ */ l("div", { className: e["modal-header__primary"], children: [
-            u && /* @__PURE__ */ a(
-              h,
-              {
-                "aria-label": "Go back",
-                icon: /* @__PURE__ */ a(n, { glyph: /* @__PURE__ */ a(y, {}), size: "20" }),
-                onClick: p
-              }
-            ),
-            /* @__PURE__ */ a("h2", { id: r, className: e["modal-header__title"], children: o }),
-            m && /* @__PURE__ */ l("div", { className: e["modal-header__subtitle-beside"], children: [
-              /* @__PURE__ */ a(
-                "span",
+      children: [
+        /* @__PURE__ */ l("div", { className: e["modal-header__content"], children: [
+          c ? /* @__PURE__ */ l("div", { className: e["modal-header__titles"], children: [
+            /* @__PURE__ */ l("div", { className: e["modal-header__primary"], children: [
+              b && /* @__PURE__ */ a(
+                t,
                 {
-                  className: e["modal-header__subtitle-divider"],
-                  "aria-hidden": !0
+                  ...v,
+                  "aria-label": u,
+                  icon: /* @__PURE__ */ a(_, { glyph: /* @__PURE__ */ a(j, {}), size: "20" }),
+                  onClick: p
                 }
               ),
-              /* @__PURE__ */ a("p", { className: e["modal-header__subtitle"], children: d })
-            ] })
-          ] }),
-          c && !m && /* @__PURE__ */ a("p", { className: e["modal-header__subtitle"], children: d })
-        ] }) : r != null && o != null ? /* @__PURE__ */ a("h2", { id: r, className: e["modal-header__title-sr"], children: o }) : null,
-        /* @__PURE__ */ l("div", { className: e["modal-header__actions"], children: [
-          b,
-          /* @__PURE__ */ a(
-            h,
-            {
-              "aria-label": "Close",
-              className: e["modal-header__close"],
-              icon: /* @__PURE__ */ a(n, { glyph: /* @__PURE__ */ a(v, {}), size: "20" }),
-              onClick: f
-            }
-          )
-        ] })
-      ] })
+              /* @__PURE__ */ a("h2", { id: i, className: e["modal-header__title"], children: d }),
+              h && /* @__PURE__ */ l("div", { className: e["modal-header__subtitle-beside"], children: [
+                /* @__PURE__ */ a(
+                  "span",
+                  {
+                    className: e["modal-header__subtitle-divider"],
+                    "aria-hidden": !0
+                  }
+                ),
+                /* @__PURE__ */ a("p", { className: e["modal-header__subtitle"], children: s })
+              ] })
+            ] }),
+            n && !h && /* @__PURE__ */ a("p", { className: e["modal-header__subtitle"], children: s })
+          ] }) : i != null && d != null ? /* @__PURE__ */ a("h2", { id: i, className: e["modal-header__title-sr"], children: d }) : null,
+          /* @__PURE__ */ l("div", { className: e["modal-header__actions"], children: [
+            w,
+            /* @__PURE__ */ a(
+              t,
+              {
+                ...r,
+                "aria-label": C,
+                className: x(
+                  e["modal-header__close"],
+                  r == null ? void 0 : r.className
+                ),
+                icon: /* @__PURE__ */ a(_, { glyph: /* @__PURE__ */ a(g, {}), size: "20" }),
+                onClick: y
+              }
+            )
+          ] })
+        ] }),
+        m && /* @__PURE__ */ a("div", { className: e["modal-header__slot"], children: m })
+      ]
     }
   );
 }
 export {
-  g as default
+  q as default
 };
 //# sourceMappingURL=ModalHeader.js.map

package/dist/components/modal-header/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ModalHeader.module.scss';\n\nexport type ModalSubtitlePlacement = 'below' | 'beside';\n\nexport interface ModalHeaderProps {\n  className?: string;\n  /** Heading text. Omit (with `hideTitle`) for close-only headers. */\n  title?: ReactNode;\n  /** Optional secondary text — placement controlled by `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits relative to the title.\n   * Figma: Subtitle = Below | Beside. Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */\n  hideTitle?: boolean;\n  /** id for the title element — pair with dialog `aria-labelledby`. */\n  titleId?: string;\n  /** Back arrow before the title. */\n  showBackButton?: boolean;\n  onBack?: () => void;\n  /** Called when the × is clicked. */\n  onClose?: () => void;\n  /** Show bottom border. Figma: Divider = On. Default: true. */\n  divider?: boolean;\n  /**\n   * Optional control before close (Figma Controls = Button / Small Input / …).\n   * Host owns the Button, TextInput, etc.\n   */\n  headerAction?: ReactNode;\n}\n\n/**\n * Modal Header — title row, optional subtitle (below or beside), optional back,\n * optional header action, and close. Compose into `Modal` or use standalone.\n *\n * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921\n */\nexport default function ModalHeader({\n  className = '',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  titleId,\n  showBackButton = false,\n  onBack,\n  onClose,\n  divider = true,\n  headerAction,\n}: ModalHeaderProps) {\n  const showTitleBlock = !hideTitle && title != null;\n  const showSubtitle = showTitleBlock && subtitle != null;\n  const beside = subtitlePlacement === 'beside' && showSubtitle;\n\n  return (\n    <div\n      className={[\n        styles['modal-header'],\n        !divider && styles['modal-header--no-divider'],\n        hideTitle && styles['modal-header--close-only'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['modal-header__content']}>\n        {showTitleBlock ? (\n          <div className={styles['modal-header__titles']}>\n            <div className={styles['modal-header__primary']}>\n              {showBackButton && (\n                <IconButton\n                  aria-label=\"Go back\"\n                  icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n                  onClick={onBack}\n                />\n              )}\n              <h2 id={titleId} className={styles['modal-header__title']}>\n                {title}\n              </h2>\n              {beside && (\n                <div className={styles['modal-header__subtitle-beside']}>\n                  <span\n                    className={styles['modal-header__subtitle-divider']}\n                    aria-hidden\n                  />\n                  <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n                </div>\n              )}\n            </div>\n            {showSubtitle && !beside && (\n              <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        ) : titleId != null && title != null ? (\n          <h2 id={titleId} className={styles['modal-header__title-sr']}>\n            {title}\n          </h2>\n        ) : null}\n\n        <div className={styles['modal-header__actions']}>\n          {headerAction}\n          <IconButton\n            aria-label=\"Close\"\n            className={styles['modal-header__close']}\n            icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n            onClick={onClose}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["ModalHeader","className","title","subtitle","subtitlePlacement","hideTitle","titleId","showBackButton","onBack","onClose","divider","headerAction","showTitleBlock","showSubtitle","beside","jsx","styles","jsxs","IconButton","Icon","ArrowLeftIcon","CloseIcon"],"mappings":";;;;;;AA4CA,SAAwBA,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,cAAAC;AACF,GAAqB;AACnB,QAAMC,IAAiB,CAACP,KAAaH,KAAS,MACxCW,IAAeD,KAAkBT,KAAY,MAC7CW,IAASV,MAAsB,YAAYS;AAEjD,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACTC,EAAO,cAAc;AAAA,QACrB,CAACN,KAAWM,EAAO,0BAA0B;AAAA,QAC7CX,KAAaW,EAAO,0BAA0B;AAAA,QAC9Cf;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC3C,UAAA;AAAA,QAAAJ,IACC,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,sBAAsB,GAC3C,UAAA;AAAA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC3C,UAAA;AAAA,YAAAT,KACC,gBAAAQ;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,cAAW;AAAA,gBACX,wBAAOC,GAAA,EAAK,yBAAQC,GAAA,EAAc,GAAI,MAAK,MAAK;AAAA,gBAChD,SAASZ;AAAA,cAAA;AAAA,YAAA;AAAA,YAGb,gBAAAO,EAAC,QAAG,IAAIT,GAAS,WAAWU,EAAO,qBAAqB,GACrD,UAAAd,GACH;AAAA,YACCY,KACC,gBAAAG,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACpD,UAAA;AAAA,cAAA,gBAAAD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWC,EAAO,gCAAgC;AAAA,kBAClD,eAAW;AAAA,gBAAA;AAAA,cAAA;AAAA,gCAEZ,KAAA,EAAE,WAAWA,EAAO,wBAAwB,GAAI,UAAAb,EAAA,CAAS;AAAA,YAAA,EAAA,CAC5D;AAAA,UAAA,GAEJ;AAAA,UACCU,KAAgB,CAACC,KAChB,gBAAAC,EAAC,OAAE,WAAWC,EAAO,wBAAwB,GAAI,UAAAb,EAAA,CAAS;AAAA,QAAA,EAAA,CAE9D,IACEG,KAAW,QAAQJ,KAAS,OAC9B,gBAAAa,EAAC,MAAA,EAAG,IAAIT,GAAS,WAAWU,EAAO,wBAAwB,GACxD,aACH,IACE;AAAA,QAEJ,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC3C,UAAA;AAAA,UAAAL;AAAA,UACD,gBAAAI;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,cAAW;AAAA,cACX,WAAWF,EAAO,qBAAqB;AAAA,cACvC,wBAAOG,GAAA,EAAK,yBAAQE,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,cAC5C,SAASZ;AAAA,YAAA;AAAA,UAAA;AAAA,QACX,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './ModalHeader.module.scss';\n\nexport type ModalSubtitlePlacement = 'below' | 'beside';\n\nexport interface ModalHeaderProps {\n  className?: string;\n  /** Heading text. Omit (with `hideTitle`) for close-only headers. */\n  title?: ReactNode;\n  /** Optional secondary text — placement controlled by `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits relative to the title.\n   * Figma: Subtitle = Below | Beside. Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */\n  hideTitle?: boolean;\n  /** id for the title element — pair with dialog `aria-labelledby`. */\n  titleId?: string;\n  /** Back arrow before the title. */\n  showBackButton?: boolean;\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Go back\". */\n  backLabel?: string;\n  /** Extra attributes for the back button (e.g. `data-testid`). */\n  backButtonProps?: BuiltInButtonProps;\n  /** Called when the × is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Show bottom border. Figma: Divider = On. Default: true. */\n  divider?: boolean;\n  /**\n   * Optional control before close (Figma Controls = Button / Small Input / …).\n   * Host owns the Button, TextInput, etc.\n   */\n  headerAction?: ReactNode;\n  /**\n   * Full-width slot rendered below the title row and above the divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   * Padding is provided by the slot container; no extra wrapper is needed.\n   */\n  headerSlot?: ReactNode;\n}\n\n/**\n * Modal Header — title row, optional subtitle (below or beside), optional back,\n * optional header action, and close. Compose into `Modal` or use standalone.\n *\n * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921\n */\nexport default function ModalHeader({\n  className = '',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  titleId,\n  showBackButton = false,\n  onBack,\n  backLabel = 'Go back',\n  backButtonProps,\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  divider = true,\n  headerAction,\n  headerSlot,\n}: ModalHeaderProps) {\n  const showTitleBlock = !hideTitle && title != null;\n  const showSubtitle = showTitleBlock && subtitle != null;\n  const beside = subtitlePlacement === 'beside' && showSubtitle;\n\n  return (\n    <div\n      className={[\n        styles['modal-header'],\n        !divider && styles['modal-header--no-divider'],\n        hideTitle && styles['modal-header--close-only'],\n        headerSlot && styles['modal-header--has-slot'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['modal-header__content']}>\n        {showTitleBlock ? (\n          <div className={styles['modal-header__titles']}>\n            <div className={styles['modal-header__primary']}>\n              {showBackButton && (\n                <IconButton\n                  {...backButtonProps}\n                  aria-label={backLabel}\n                  icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n                  onClick={onBack}\n                />\n              )}\n              <h2 id={titleId} className={styles['modal-header__title']}>\n                {title}\n              </h2>\n              {beside && (\n                <div className={styles['modal-header__subtitle-beside']}>\n                  <span\n                    className={styles['modal-header__subtitle-divider']}\n                    aria-hidden\n                  />\n                  <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n                </div>\n              )}\n            </div>\n            {showSubtitle && !beside && (\n              <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        ) : titleId != null && title != null ? (\n          <h2 id={titleId} className={styles['modal-header__title-sr']}>\n            {title}\n          </h2>\n        ) : null}\n\n        <div className={styles['modal-header__actions']}>\n          {headerAction}\n          <IconButton\n            {...closeButtonProps}\n            aria-label={closeLabel}\n            className={mergeClassNames(\n              styles['modal-header__close'],\n              closeButtonProps?.className,\n            )}\n            icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n            onClick={onClose}\n          />\n        </div>\n      </div>\n      {headerSlot && (\n        <div className={styles['modal-header__slot']}>{headerSlot}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["ModalHeader","className","title","subtitle","subtitlePlacement","hideTitle","titleId","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","divider","headerAction","headerSlot","showTitleBlock","showSubtitle","beside","jsxs","styles","jsx","IconButton","Icon","ArrowLeftIcon","mergeClassNames","CloseIcon"],"mappings":";;;;;;;AA4DA,SAAwBA,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,iBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,kBAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,cAAAC;AAAA,EACA,YAAAC;AACF,GAAqB;AACnB,QAAMC,IAAiB,CAACZ,KAAaH,KAAS,MACxCgB,IAAeD,KAAkBd,KAAY,MAC7CgB,IAASf,MAAsB,YAAYc;AAEjD,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACTC,EAAO,cAAc;AAAA,QACrB,CAACP,KAAWO,EAAO,0BAA0B;AAAA,QAC7ChB,KAAagB,EAAO,0BAA0B;AAAA,QAC9CL,KAAcK,EAAO,wBAAwB;AAAA,QAC7CpB;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAWC,EAAO,uBAAuB,GAC3C,UAAA;AAAA,UAAAJ,IACC,gBAAAG,EAAC,OAAA,EAAI,WAAWC,EAAO,sBAAsB,GAC3C,UAAA;AAAA,YAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,uBAAuB,GAC3C,UAAA;AAAA,cAAAd,KACC,gBAAAe;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACE,GAAGb;AAAA,kBACJ,cAAYD;AAAA,kBACZ,wBAAOe,GAAA,EAAK,yBAAQC,GAAA,EAAc,GAAI,MAAK,MAAK;AAAA,kBAChD,SAASjB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGb,gBAAAc,EAAC,QAAG,IAAIhB,GAAS,WAAWe,EAAO,qBAAqB,GACrD,UAAAnB,GACH;AAAA,cACCiB,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,+BAA+B,GACpD,UAAA;AAAA,gBAAA,gBAAAC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWD,EAAO,gCAAgC;AAAA,oBAClD,eAAW;AAAA,kBAAA;AAAA,gBAAA;AAAA,kCAEZ,KAAA,EAAE,WAAWA,EAAO,wBAAwB,GAAI,UAAAlB,EAAA,CAAS;AAAA,cAAA,EAAA,CAC5D;AAAA,YAAA,GAEJ;AAAA,YACCe,KAAgB,CAACC,KAChB,gBAAAG,EAAC,OAAE,WAAWD,EAAO,wBAAwB,GAAI,UAAAlB,EAAA,CAAS;AAAA,UAAA,EAAA,CAE9D,IACEG,KAAW,QAAQJ,KAAS,OAC9B,gBAAAoB,EAAC,MAAA,EAAG,IAAIhB,GAAS,WAAWe,EAAO,wBAAwB,GACxD,aACH,IACE;AAAA,UAEJ,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,uBAAuB,GAC3C,UAAA;AAAA,YAAAN;AAAA,YACD,gBAAAO;AAAA,cAACC;AAAA,cAAA;AAAA,gBACE,GAAGV;AAAA,gBACJ,cAAYD;AAAA,gBACZ,WAAWc;AAAA,kBACTL,EAAO,qBAAqB;AAAA,kBAC5BR,KAAA,gBAAAA,EAAkB;AAAA,gBAAA;AAAA,gBAEpB,wBAAOW,GAAA,EAAK,yBAAQG,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,gBAC5C,SAAShB;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QACCK,KACC,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,oBAAoB,GAAI,UAAAL,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIlE;"}

package/dist/components/modal-header/ModalHeader.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ModalHeader.css');const e={"modal-header":"_modal-header_1aii1_2","modal-header--no-divider":"_modal-header--no-divider_1aii1_8","modal-header__content":"_modal-header__content_1aii1_11","modal-header--close-only":"_modal-header--close-only_1aii1_14","modal-header__titles":"_modal-header__titles_1aii1_24","modal-header__primary":"_modal-header__primary_1aii1_33","modal-header__title":"_modal-header__title_1aii1_24","modal-header__title-sr":"_modal-header__title-sr_1aii1_50","modal-header__subtitle":"_modal-header__subtitle_1aii1_61","modal-header__subtitle-beside":"_modal-header__subtitle-beside_1aii1_69","modal-header__subtitle-divider":"_modal-header__subtitle-divider_1aii1_79","modal-header__actions":"_modal-header__actions_1aii1_85","modal-header__close":"_modal-header__close_1aii1_93"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ModalHeader.css');const e={"modal-header":"_modal-header_1wwv5_2","modal-header--no-divider":"_modal-header--no-divider_1wwv5_8","modal-header__content":"_modal-header__content_1wwv5_11","modal-header--has-slot":"_modal-header--has-slot_1wwv5_14","modal-header--close-only":"_modal-header--close-only_1wwv5_17","modal-header__titles":"_modal-header__titles_1wwv5_27","modal-header__primary":"_modal-header__primary_1wwv5_36","modal-header__title":"_modal-header__title_1wwv5_27","modal-header__title-sr":"_modal-header__title-sr_1wwv5_53","modal-header__subtitle":"_modal-header__subtitle_1wwv5_64","modal-header__subtitle-beside":"_modal-header__subtitle-beside_1wwv5_72","modal-header__subtitle-divider":"_modal-header__subtitle-divider_1wwv5_82","modal-header__actions":"_modal-header__actions_1wwv5_88","modal-header__close":"_modal-header__close_1wwv5_96","modal-header__slot":"_modal-header__slot_1wwv5_101"};exports.default=e;
 //# sourceMappingURL=ModalHeader.module.scss.cjs.map

package/dist/components/modal-header/ModalHeader.module.scss.js

@@ -1,17 +1,19 @@
 import './ModalHeader.css';const e = {
-  "modal-header": "_modal-header_1aii1_2",
-  "modal-header--no-divider": "_modal-header--no-divider_1aii1_8",
-  "modal-header__content": "_modal-header__content_1aii1_11",
-  "modal-header--close-only": "_modal-header--close-only_1aii1_14",
-  "modal-header__titles": "_modal-header__titles_1aii1_24",
-  "modal-header__primary": "_modal-header__primary_1aii1_33",
-  "modal-header__title": "_modal-header__title_1aii1_24",
-  "modal-header__title-sr": "_modal-header__title-sr_1aii1_50",
-  "modal-header__subtitle": "_modal-header__subtitle_1aii1_61",
-  "modal-header__subtitle-beside": "_modal-header__subtitle-beside_1aii1_69",
-  "modal-header__subtitle-divider": "_modal-header__subtitle-divider_1aii1_79",
-  "modal-header__actions": "_modal-header__actions_1aii1_85",
-  "modal-header__close": "_modal-header__close_1aii1_93"
+  "modal-header": "_modal-header_1wwv5_2",
+  "modal-header--no-divider": "_modal-header--no-divider_1wwv5_8",
+  "modal-header__content": "_modal-header__content_1wwv5_11",
+  "modal-header--has-slot": "_modal-header--has-slot_1wwv5_14",
+  "modal-header--close-only": "_modal-header--close-only_1wwv5_17",
+  "modal-header__titles": "_modal-header__titles_1wwv5_27",
+  "modal-header__primary": "_modal-header__primary_1wwv5_36",
+  "modal-header__title": "_modal-header__title_1wwv5_27",
+  "modal-header__title-sr": "_modal-header__title-sr_1wwv5_53",
+  "modal-header__subtitle": "_modal-header__subtitle_1wwv5_64",
+  "modal-header__subtitle-beside": "_modal-header__subtitle-beside_1wwv5_72",
+  "modal-header__subtitle-divider": "_modal-header__subtitle-divider_1wwv5_82",
+  "modal-header__actions": "_modal-header__actions_1wwv5_88",
+  "modal-header__close": "_modal-header__close_1wwv5_96",
+  "modal-header__slot": "_modal-header__slot_1wwv5_101"
 };
 export {
   e as default

package/dist/components/modal-header/ModalHeader.module.scss.js.map

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

package/dist/components/more-unreads-banner/MoreUnreadsBanner.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("../icon/Icon.cjs"),__d=require("@mattermost/compass-icons/components/arrow-up.js"),d=__d?.default??__d,__i=require("@mattermost/compass-icons/components/arrow-down.js"),i=__i?.default??__i,r=require("./MoreUnreadsBanner.module.scss.cjs");function c({className:s="",direction:a="up",size:o="medium",onClick:t}){const u=r.default[`more-unreads-banner--size-${o.toLowerCase()}`],l=[r.default["more-unreads-banner"],u,s].filter(Boolean).join(" ");return e.jsxs("button",{className:l,type:"button",onClick:t,children:[e.jsx("span",{className:r.default["more-unreads-banner__icon"],"aria-hidden":!0,children:a==="up"?e.jsx(n.default,{size:"12",glyph:e.jsx(d,{})}):e.jsx(n.default,{size:"12",glyph:e.jsx(i,{})})}),e.jsx("span",{className:r.default["more-unreads-banner__label"],children:"More unreads"})]})}exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("../icon/Icon.cjs"),__i=require("@mattermost/compass-icons/components/arrow-up.js"),i=__i?.default??__i,__c=require("@mattermost/compass-icons/components/arrow-down.js"),c=__c?.default??__c,r=require("./MoreUnreadsBanner.module.scss.cjs");function m({className:s="",direction:a="up",size:o="medium",onClick:t,label:u="More unreads"}){const l=r.default[`more-unreads-banner--size-${o.toLowerCase()}`],d=[r.default["more-unreads-banner"],l,s].filter(Boolean).join(" ");return e.jsxs("button",{className:d,type:"button",onClick:t,children:[e.jsx("span",{className:r.default["more-unreads-banner__icon"],"aria-hidden":!0,children:a==="up"?e.jsx(n.default,{size:"12",glyph:e.jsx(i,{})}):e.jsx(n.default,{size:"12",glyph:e.jsx(c,{})})}),e.jsx("span",{className:r.default["more-unreads-banner__label"],children:u})]})}exports.default=m;
 //# sourceMappingURL=MoreUnreadsBanner.cjs.map

package/dist/components/more-unreads-banner/MoreUnreadsBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MoreUnreadsBanner.cjs","sources":["../../../src/components/more-unreads-banner/MoreUnreadsBanner.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport ArrowUpIcon from '@mattermost/compass-icons/components/arrow-up';\nimport ArrowDownIcon from '@mattermost/compass-icons/components/arrow-down';\nimport styles from './MoreUnreadsBanner.module.scss';\n\nexport type MoreUnreadsBannerDirection = 'up' | 'down';\nexport type MoreUnreadsBannerSize = 'small' | 'medium' | 'large';\n\nexport interface MoreUnreadsBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Arrow direction. Default: Up. */\n  direction?: MoreUnreadsBannerDirection;\n  /** Size variant. Default: Medium. */\n  size?: MoreUnreadsBannerSize;\n  /** Callback when the banner is clicked. */\n  onClick?: () => void;\n}\n\n/**\n * The More Unreads Banner is the small pill that floats inside the channel sidebar to tell\n * the user there are unread channels above or below the current scroll position. One arrow,\n * one label — clicking it scrolls to the next unread.\n */\nexport default function MoreUnreadsBanner({\n  className = '',\n  direction = 'up',\n  size = 'medium',\n  onClick,\n}: MoreUnreadsBannerProps) {\n  const sizeClass = styles[`more-unreads-banner--size-${size.toLowerCase()}`];\n\n  const rootClass = [styles['more-unreads-banner'], sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type=\"button\" onClick={onClick}>\n      <span className={styles['more-unreads-banner__icon']} aria-hidden>\n        {direction === 'up' ? (\n          <Icon size=\"12\" glyph={<ArrowUpIcon />} />\n        ) : (\n          <Icon size=\"12\" glyph={<ArrowDownIcon />} />\n        )}\n      </span>\n      <span className={styles['more-unreads-banner__label']}>More unreads</span>\n    </button>\n  );\n}\n"],"names":["MoreUnreadsBanner","className","direction","size","onClick","sizeClass","styles","rootClass","jsx","Icon","ArrowUpIcon","ArrowDownIcon"],"mappings":"wVAwBA,SAAwBA,EAAkB,CACxC,UAAAC,EAAY,GACZ,UAAAC,EAAY,KACZ,KAAAC,EAAO,SACP,QAAAC,CACF,EAA2B,CACzB,MAAMC,EAAYC,EAAAA,QAAO,6BAA6BH,EAAK,YAAA,CAAa,EAAE,EAEpEI,EAAY,CAACD,UAAO,qBAAqB,EAAGD,EAAWJ,CAAS,EACnE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,cACG,SAAA,CAAO,UAAWM,EAAW,KAAK,SAAS,QAAAH,EAC1C,SAAA,CAAAI,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC9D,SAAAJ,IAAc,KACbM,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAY,CAAA,CAAI,EAExCF,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACG,EAAA,CAAA,CAAc,CAAA,CAAI,EAE9C,QACC,OAAA,CAAK,UAAWL,EAAAA,QAAO,4BAA4B,EAAG,SAAA,cAAA,CAAY,CAAA,EACrE,CAEJ"}
+{"version":3,"file":"MoreUnreadsBanner.cjs","sources":["../../../src/components/more-unreads-banner/MoreUnreadsBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport ArrowUpIcon from '@mattermost/compass-icons/components/arrow-up';\nimport ArrowDownIcon from '@mattermost/compass-icons/components/arrow-down';\nimport styles from './MoreUnreadsBanner.module.scss';\n\nexport type MoreUnreadsBannerDirection = 'up' | 'down';\nexport type MoreUnreadsBannerSize = 'small' | 'medium' | 'large';\n\nexport interface MoreUnreadsBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Arrow direction. Default: Up. */\n  direction?: MoreUnreadsBannerDirection;\n  /** Size variant. Default: Medium. */\n  size?: MoreUnreadsBannerSize;\n  /** Callback when the banner is clicked. */\n  onClick?: () => void;\n  /** Visible label. Default: \"More unreads\". */\n  label?: ReactNode;\n}\n\n/**\n * The More Unreads Banner is the small pill that floats inside the channel sidebar to tell\n * the user there are unread channels above or below the current scroll position. One arrow,\n * one label — clicking it scrolls to the next unread.\n */\nexport default function MoreUnreadsBanner({\n  className = '',\n  direction = 'up',\n  size = 'medium',\n  onClick,\n  label = 'More unreads',\n}: MoreUnreadsBannerProps) {\n  const sizeClass = styles[`more-unreads-banner--size-${size.toLowerCase()}`];\n\n  const rootClass = [styles['more-unreads-banner'], sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type=\"button\" onClick={onClick}>\n      <span className={styles['more-unreads-banner__icon']} aria-hidden>\n        {direction === 'up' ? (\n          <Icon size=\"12\" glyph={<ArrowUpIcon />} />\n        ) : (\n          <Icon size=\"12\" glyph={<ArrowDownIcon />} />\n        )}\n      </span>\n      <span className={styles['more-unreads-banner__label']}>{label}</span>\n    </button>\n  );\n}\n"],"names":["MoreUnreadsBanner","className","direction","size","onClick","label","sizeClass","styles","rootClass","jsx","Icon","ArrowUpIcon","ArrowDownIcon"],"mappings":"wVA2BA,SAAwBA,EAAkB,CACxC,UAAAC,EAAY,GACZ,UAAAC,EAAY,KACZ,KAAAC,EAAO,SACP,QAAAC,EACA,MAAAC,EAAQ,cACV,EAA2B,CACzB,MAAMC,EAAYC,EAAAA,QAAO,6BAA6BJ,EAAK,YAAA,CAAa,EAAE,EAEpEK,EAAY,CAACD,UAAO,qBAAqB,EAAGD,EAAWL,CAAS,EACnE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,cACG,SAAA,CAAO,UAAWO,EAAW,KAAK,SAAS,QAAAJ,EAC1C,SAAA,CAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC9D,SAAAL,IAAc,KACbO,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAY,CAAA,CAAI,EAExCF,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACG,EAAA,CAAA,CAAc,CAAA,CAAI,EAE9C,QACC,OAAA,CAAK,UAAWL,EAAAA,QAAO,4BAA4B,EAAI,SAAAF,CAAA,CAAM,CAAA,EAChE,CAEJ"}

package/dist/components/more-unreads-banner/MoreUnreadsBanner.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export type MoreUnreadsBannerDirection = 'up' | 'down';
 export type MoreUnreadsBannerSize = 'small' | 'medium' | 'large';
 export interface MoreUnreadsBannerProps {
@@ -9,11 +10,13 @@ export interface MoreUnreadsBannerProps {
     size?: MoreUnreadsBannerSize;
     /** Callback when the banner is clicked. */
     onClick?: () => void;
+    /** Visible label. Default: "More unreads". */
+    label?: ReactNode;
 }
 /**
  * The More Unreads Banner is the small pill that floats inside the channel sidebar to tell
  * the user there are unread channels above or below the current scroll position. One arrow,
  * one label — clicking it scrolls to the next unread.
  */
-export default function MoreUnreadsBanner({ className, direction, size, onClick, }: MoreUnreadsBannerProps): import("react/jsx-runtime").JSX.Element;
+export default function MoreUnreadsBanner({ className, direction, size, onClick, label, }: MoreUnreadsBannerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MoreUnreadsBanner.d.ts.map

package/dist/components/more-unreads-banner/MoreUnreadsBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoreUnreadsBanner.d.ts","sourceRoot":"","sources":["../../../src/components/more-unreads-banner/MoreUnreadsBanner.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG,IAAI,GAAG,MAAM,CAAC;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjE,MAAM,WAAW,sBAAsB;IACrC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC,qCAAqC;IACrC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAc,EACd,SAAgB,EAChB,IAAe,EACf,OAAO,GACR,EAAE,sBAAsB,2CAmBxB"}
+{"version":3,"file":"MoreUnreadsBanner.d.ts","sourceRoot":"","sources":["../../../src/components/more-unreads-banner/MoreUnreadsBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,0BAA0B,GAAG,IAAI,GAAG,MAAM,CAAC;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjE,MAAM,WAAW,sBAAsB;IACrC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC,qCAAqC;IACrC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAc,EACd,SAAgB,EAChB,IAAe,EACf,OAAO,EACP,KAAsB,GACvB,EAAE,sBAAsB,2CAmBxB"}

package/dist/components/more-unreads-banner/MoreUnreadsBanner.js

@@ -1,21 +1,22 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
 import n from "../icon/Icon.js";
-import __p from "@mattermost/compass-icons/components/arrow-up.js";const p=__p&&__p.default?__p.default:__p;
-import __u from "@mattermost/compass-icons/components/arrow-down.js";const u=__u&&__u.default?__u.default:__u;
+import __u from "@mattermost/compass-icons/components/arrow-up.js";const u=__u&&__u.default?__u.default:__u;
+import __c from "@mattermost/compass-icons/components/arrow-down.js";const c=__c&&__c.default?__c.default:__c;
 import e from "./MoreUnreadsBanner.module.scss.js";
-function w({
+function y({
   className: o = "",
   direction: s = "up",
   size: a = "medium",
-  onClick: t
+  onClick: t,
+  label: i = "More unreads"
 }) {
-  const i = e[`more-unreads-banner--size-${a.toLowerCase()}`], m = [e["more-unreads-banner"], i, o].filter(Boolean).join(" ");
-  return /* @__PURE__ */ l("button", { className: m, type: "button", onClick: t, children: [
-    /* @__PURE__ */ r("span", { className: e["more-unreads-banner__icon"], "aria-hidden": !0, children: s === "up" ? /* @__PURE__ */ r(n, { size: "12", glyph: /* @__PURE__ */ r(p, {}) }) : /* @__PURE__ */ r(n, { size: "12", glyph: /* @__PURE__ */ r(u, {}) }) }),
-    /* @__PURE__ */ r("span", { className: e["more-unreads-banner__label"], children: "More unreads" })
+  const m = e[`more-unreads-banner--size-${a.toLowerCase()}`], l = [e["more-unreads-banner"], m, o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ p("button", { className: l, type: "button", onClick: t, children: [
+    /* @__PURE__ */ r("span", { className: e["more-unreads-banner__icon"], "aria-hidden": !0, children: s === "up" ? /* @__PURE__ */ r(n, { size: "12", glyph: /* @__PURE__ */ r(u, {}) }) : /* @__PURE__ */ r(n, { size: "12", glyph: /* @__PURE__ */ r(c, {}) }) }),
+    /* @__PURE__ */ r("span", { className: e["more-unreads-banner__label"], children: i })
   ] });
 }
 export {
-  w as default
+  y as default
 };
 //# sourceMappingURL=MoreUnreadsBanner.js.map

package/dist/components/more-unreads-banner/MoreUnreadsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"MoreUnreadsBanner.js","sources":["../../../src/components/more-unreads-banner/MoreUnreadsBanner.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport ArrowUpIcon from '@mattermost/compass-icons/components/arrow-up';\nimport ArrowDownIcon from '@mattermost/compass-icons/components/arrow-down';\nimport styles from './MoreUnreadsBanner.module.scss';\n\nexport type MoreUnreadsBannerDirection = 'up' | 'down';\nexport type MoreUnreadsBannerSize = 'small' | 'medium' | 'large';\n\nexport interface MoreUnreadsBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Arrow direction. Default: Up. */\n  direction?: MoreUnreadsBannerDirection;\n  /** Size variant. Default: Medium. */\n  size?: MoreUnreadsBannerSize;\n  /** Callback when the banner is clicked. */\n  onClick?: () => void;\n}\n\n/**\n * The More Unreads Banner is the small pill that floats inside the channel sidebar to tell\n * the user there are unread channels above or below the current scroll position. One arrow,\n * one label — clicking it scrolls to the next unread.\n */\nexport default function MoreUnreadsBanner({\n  className = '',\n  direction = 'up',\n  size = 'medium',\n  onClick,\n}: MoreUnreadsBannerProps) {\n  const sizeClass = styles[`more-unreads-banner--size-${size.toLowerCase()}`];\n\n  const rootClass = [styles['more-unreads-banner'], sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type=\"button\" onClick={onClick}>\n      <span className={styles['more-unreads-banner__icon']} aria-hidden>\n        {direction === 'up' ? (\n          <Icon size=\"12\" glyph={<ArrowUpIcon />} />\n        ) : (\n          <Icon size=\"12\" glyph={<ArrowDownIcon />} />\n        )}\n      </span>\n      <span className={styles['more-unreads-banner__label']}>More unreads</span>\n    </button>\n  );\n}\n"],"names":["MoreUnreadsBanner","className","direction","size","onClick","sizeClass","styles","rootClass","jsx","Icon","ArrowUpIcon","ArrowDownIcon"],"mappings":";;;;;AAwBA,SAAwBA,EAAkB;AAAA,EACxC,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC;AACF,GAA2B;AACzB,QAAMC,IAAYC,EAAO,6BAA6BH,EAAK,YAAA,CAAa,EAAE,GAEpEI,IAAY,CAACD,EAAO,qBAAqB,GAAGD,GAAWJ,CAAS,EACnE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,UAAA,EAAO,WAAWM,GAAW,MAAK,UAAS,SAAAH,GAC1C,UAAA;AAAA,IAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWF,EAAO,2BAA2B,GAAG,eAAW,IAC9D,UAAAJ,MAAc,OACb,gBAAAM,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAY,EAAA,CAAI,IAExC,gBAAAF,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACG,GAAA,CAAA,CAAc,EAAA,CAAI,GAE9C;AAAA,sBACC,QAAA,EAAK,WAAWL,EAAO,4BAA4B,GAAG,UAAA,eAAA,CAAY;AAAA,EAAA,GACrE;AAEJ;"}
+{"version":3,"file":"MoreUnreadsBanner.js","sources":["../../../src/components/more-unreads-banner/MoreUnreadsBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport ArrowUpIcon from '@mattermost/compass-icons/components/arrow-up';\nimport ArrowDownIcon from '@mattermost/compass-icons/components/arrow-down';\nimport styles from './MoreUnreadsBanner.module.scss';\n\nexport type MoreUnreadsBannerDirection = 'up' | 'down';\nexport type MoreUnreadsBannerSize = 'small' | 'medium' | 'large';\n\nexport interface MoreUnreadsBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Arrow direction. Default: Up. */\n  direction?: MoreUnreadsBannerDirection;\n  /** Size variant. Default: Medium. */\n  size?: MoreUnreadsBannerSize;\n  /** Callback when the banner is clicked. */\n  onClick?: () => void;\n  /** Visible label. Default: \"More unreads\". */\n  label?: ReactNode;\n}\n\n/**\n * The More Unreads Banner is the small pill that floats inside the channel sidebar to tell\n * the user there are unread channels above or below the current scroll position. One arrow,\n * one label — clicking it scrolls to the next unread.\n */\nexport default function MoreUnreadsBanner({\n  className = '',\n  direction = 'up',\n  size = 'medium',\n  onClick,\n  label = 'More unreads',\n}: MoreUnreadsBannerProps) {\n  const sizeClass = styles[`more-unreads-banner--size-${size.toLowerCase()}`];\n\n  const rootClass = [styles['more-unreads-banner'], sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type=\"button\" onClick={onClick}>\n      <span className={styles['more-unreads-banner__icon']} aria-hidden>\n        {direction === 'up' ? (\n          <Icon size=\"12\" glyph={<ArrowUpIcon />} />\n        ) : (\n          <Icon size=\"12\" glyph={<ArrowDownIcon />} />\n        )}\n      </span>\n      <span className={styles['more-unreads-banner__label']}>{label}</span>\n    </button>\n  );\n}\n"],"names":["MoreUnreadsBanner","className","direction","size","onClick","label","sizeClass","styles","rootClass","jsx","Icon","ArrowUpIcon","ArrowDownIcon"],"mappings":";;;;;AA2BA,SAAwBA,EAAkB;AAAA,EACxC,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,OAAAC,IAAQ;AACV,GAA2B;AACzB,QAAMC,IAAYC,EAAO,6BAA6BJ,EAAK,YAAA,CAAa,EAAE,GAEpEK,IAAY,CAACD,EAAO,qBAAqB,GAAGD,GAAWL,CAAS,EACnE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,UAAA,EAAO,WAAWO,GAAW,MAAK,UAAS,SAAAJ,GAC1C,UAAA;AAAA,IAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWF,EAAO,2BAA2B,GAAG,eAAW,IAC9D,UAAAL,MAAc,OACb,gBAAAO,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAY,EAAA,CAAI,IAExC,gBAAAF,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACG,GAAA,CAAA,CAAc,EAAA,CAAI,GAE9C;AAAA,sBACC,QAAA,EAAK,WAAWL,EAAO,4BAA4B,GAAI,UAAAF,EAAA,CAAM;AAAA,EAAA,GAChE;AAEJ;"}

package/dist/components/new-message-banner/NewMessageBanner.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../icon/Icon.cjs"),__i=require("@mattermost/compass-icons/components/arrow-down.js"),i=__i?.default??__i,__m=require("@mattermost/compass-icons/components/close.js"),m=__m?.default??__m,s=require("./NewMessageBanner.module.scss.cjs");function c({className:l="",type:n="jump-to-unreads",countLabel:a,onClick:t,onDismiss:r}){const d=s.default[`new-message-banner--type-${n==="jump-to-unreads"?"jump-to-unreads":"new-replies"}`],o=[s.default["new-message-banner"],d,l].filter(Boolean).join(" ");return e.jsxs("div",{className:o,children:[e.jsx("button",{className:s.default["new-message-banner__main"],type:"button",onClick:t,"aria-label":n==="jump-to-unreads"?a!=null?`Jump to unreads, ${a}`:"Jump to unreads":void 0,children:e.jsxs("span",{className:s.default["new-message-banner__left"],children:[e.jsx("span",{className:s.default["new-message-banner__icon"],"aria-hidden":!0,children:e.jsx(u.default,{size:"16",glyph:e.jsx(i,{})})}),e.jsx("span",{className:s.default["new-message-banner__jump-label"],children:n==="jump-to-unreads"?"Jump to unreads":"New replies"})]})}),n==="jump-to-unreads"&&a!=null&&e.jsx("span",{className:s.default["new-message-banner__count"],"aria-hidden":!0,children:a}),r!=null&&e.jsx("button",{className:s.default["new-message-banner__dismiss"],type:"button",onClick:r,"aria-label":"Dismiss",children:e.jsx(u.default,{size:"16",glyph:e.jsx(m,{})})})]})}exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("../icon/Icon.cjs"),__j=require("@mattermost/compass-icons/components/arrow-down.js"),j=__j?.default??__j,__p=require("@mattermost/compass-icons/components/close.js"),p=__p?.default??__p,s=require("./NewMessageBanner.module.scss.cjs");function g(a,n){if(typeof a=="string")return typeof n=="string"?`${a}, ${n}`:a}function _({className:a="",type:n="jump-to-unreads",countLabel:r,onClick:i,onDismiss:t,jumpLabel:u="Jump to unreads",jumpAriaLabel:o,newRepliesLabel:d="New replies",dismissLabel:c="Dismiss"}){const m=s.default[`new-message-banner--type-${n==="jump-to-unreads"?"jump-to-unreads":"new-replies"}`],f=[s.default["new-message-banner"],m,a].filter(Boolean).join(" ");return e.jsxs("div",{className:f,children:[e.jsx("button",{className:s.default["new-message-banner__main"],type:"button",onClick:i,"aria-label":n==="jump-to-unreads"?o??g(u,r):void 0,children:e.jsxs("span",{className:s.default["new-message-banner__left"],children:[e.jsx("span",{className:s.default["new-message-banner__icon"],"aria-hidden":!0,children:e.jsx(l.default,{size:"16",glyph:e.jsx(j,{})})}),e.jsx("span",{className:s.default["new-message-banner__jump-label"],children:n==="jump-to-unreads"?u:d})]})}),n==="jump-to-unreads"&&r!=null&&e.jsx("span",{className:s.default["new-message-banner__count"],"aria-hidden":!0,children:r}),t!=null&&e.jsx("button",{className:s.default["new-message-banner__dismiss"],type:"button",onClick:t,"aria-label":c,children:e.jsx(l.default,{size:"16",glyph:e.jsx(p,{})})})]})}exports.default=_;
 //# sourceMappingURL=NewMessageBanner.cjs.map

package/dist/components/new-message-banner/NewMessageBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NewMessageBanner.cjs","sources":["../../../src/components/new-message-banner/NewMessageBanner.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport ArrowDownIcon from '@mattermost/compass-icons/components/arrow-down';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './NewMessageBanner.module.scss';\n\nexport type NewMessageBannerType = 'jump-to-unreads' | 'new-replies';\n\nexport interface NewMessageBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls the layout. Default: JumpToUnreads. */\n  type?: NewMessageBannerType;\n  /** Unread count label text (e.g. \"21 new messages since Saturday\"). Used in JumpToUnreads type. */\n  countLabel?: string;\n  /** Called when the banner itself is clicked. */\n  onClick?: () => void;\n  /** Called when the dismiss (×) button is clicked. */\n  onDismiss?: () => void;\n}\n\n/**\n * The New Messages Banner alerts the user that there's fresh activity in the channel they're\n * reading. It floats over the message stream so they can jump to the unread region in one\n * click — or dismiss it if they'd rather keep scrolling.\n */\nexport default function NewMessageBanner({\n  className = '',\n  type = 'jump-to-unreads',\n  countLabel,\n  onClick,\n  onDismiss,\n}: NewMessageBannerProps) {\n  const typeClass =\n    styles[\n      `new-message-banner--type-${type === 'jump-to-unreads' ? 'jump-to-unreads' : 'new-replies'}`\n    ];\n\n  const rootClass = [styles['new-message-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <button\n        className={styles['new-message-banner__main']}\n        type=\"button\"\n        onClick={onClick}\n        aria-label={\n          type === 'jump-to-unreads'\n            ? countLabel != null\n              ? `Jump to unreads, ${countLabel}`\n              : 'Jump to unreads'\n            : undefined\n        }\n      >\n        <span className={styles['new-message-banner__left']}>\n          <span className={styles['new-message-banner__icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<ArrowDownIcon />} />\n          </span>\n          <span className={styles['new-message-banner__jump-label']}>\n            {type === 'jump-to-unreads' ? 'Jump to unreads' : 'New replies'}\n          </span>\n        </span>\n      </button>\n      {type === 'jump-to-unreads' && countLabel != null && (\n        <span className={styles['new-message-banner__count']} aria-hidden>\n          {countLabel}\n        </span>\n      )}\n      {onDismiss != null && (\n        <button\n          className={styles['new-message-banner__dismiss']}\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label=\"Dismiss\"\n        >\n          <Icon size=\"16\" glyph={<CloseIcon />} />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["NewMessageBanner","className","type","countLabel","onClick","onDismiss","typeClass","styles","rootClass","jsxs","jsx","Icon","ArrowDownIcon","CloseIcon"],"mappings":"oVAyBA,SAAwBA,EAAiB,CACvC,UAAAC,EAAY,GACZ,KAAAC,EAAO,kBACP,WAAAC,EACA,QAAAC,EACA,UAAAC,CACF,EAA0B,CACxB,MAAMC,EACJC,EAAAA,QACE,4BAA4BL,IAAS,kBAAoB,kBAAoB,aAAa,EAC5F,EAEIM,EAAY,CAACD,UAAO,oBAAoB,EAAGD,EAAWL,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEQ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EACd,SAAA,CAAAE,EAAAA,IAAC,SAAA,CACC,UAAWH,EAAAA,QAAO,0BAA0B,EAC5C,KAAK,SACL,QAAAH,EACA,aACEF,IAAS,kBACLC,GAAc,KACZ,oBAAoBA,CAAU,GAC9B,kBACF,OAGN,SAAAM,EAAAA,KAAC,OAAA,CAAK,UAAWF,UAAO,0BAA0B,EAChD,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC9D,SAAAG,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAc,EAAI,EAC5C,EACAF,EAAAA,IAAC,QAAK,UAAWH,UAAO,gCAAgC,EACrD,SAAAL,IAAS,kBAAoB,kBAAoB,aAAA,CACpD,CAAA,CAAA,CACF,CAAA,CAAA,EAEDA,IAAS,mBAAqBC,GAAc,MAC3CO,EAAAA,IAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC9D,SAAAJ,CAAA,CACH,EAEDE,GAAa,MACZK,EAAAA,IAAC,SAAA,CACC,UAAWH,EAAAA,QAAO,6BAA6B,EAC/C,KAAK,SACL,QAASF,EACT,aAAW,UAEX,eAACM,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACG,IAAU,CAAA,CAAI,CAAA,CAAA,CACxC,EAEJ,CAEJ"}
+{"version":3,"file":"NewMessageBanner.cjs","sources":["../../../src/components/new-message-banner/NewMessageBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport ArrowDownIcon from '@mattermost/compass-icons/components/arrow-down';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './NewMessageBanner.module.scss';\n\nexport type NewMessageBannerType = 'jump-to-unreads' | 'new-replies';\n\nexport interface NewMessageBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls the layout. Default: JumpToUnreads. */\n  type?: NewMessageBannerType;\n  /** Unread count label text (e.g. \"21 new messages since Saturday\"). Used in JumpToUnreads type. Accepts translated nodes. */\n  countLabel?: ReactNode;\n  /** Called when the banner itself is clicked. */\n  onClick?: () => void;\n  /** Called when the dismiss (×) button is clicked. */\n  onDismiss?: () => void;\n  /** Visible label for the JumpToUnreads type. Default: \"Jump to unreads\". */\n  jumpLabel?: ReactNode;\n  /**\n   * Accessible name for the jump button. Default: `{jumpLabel}, {countLabel}`\n   * when both are strings. Pass it when either is a translated node.\n   */\n  jumpAriaLabel?: string;\n  /** Visible label for the NewReplies type. Default: \"New replies\". */\n  newRepliesLabel?: ReactNode;\n  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n}\n\nfunction defaultJumpAriaLabel(\n  jumpLabel: ReactNode,\n  countLabel: ReactNode,\n): string | undefined {\n  if (typeof jumpLabel !== 'string') return undefined;\n  return typeof countLabel === 'string'\n    ? `${jumpLabel}, ${countLabel}`\n    : jumpLabel;\n}\n\n/**\n * The New Messages Banner alerts the user that there's fresh activity in the channel they're\n * reading. It floats over the message stream so they can jump to the unread region in one\n * click — or dismiss it if they'd rather keep scrolling.\n */\nexport default function NewMessageBanner({\n  className = '',\n  type = 'jump-to-unreads',\n  countLabel,\n  onClick,\n  onDismiss,\n  jumpLabel = 'Jump to unreads',\n  jumpAriaLabel,\n  newRepliesLabel = 'New replies',\n  dismissLabel = 'Dismiss',\n}: NewMessageBannerProps) {\n  const typeClass =\n    styles[\n      `new-message-banner--type-${type === 'jump-to-unreads' ? 'jump-to-unreads' : 'new-replies'}`\n    ];\n\n  const rootClass = [styles['new-message-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <button\n        className={styles['new-message-banner__main']}\n        type=\"button\"\n        onClick={onClick}\n        aria-label={\n          type === 'jump-to-unreads'\n            ? (jumpAriaLabel ?? defaultJumpAriaLabel(jumpLabel, countLabel))\n            : undefined\n        }\n      >\n        <span className={styles['new-message-banner__left']}>\n          <span className={styles['new-message-banner__icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<ArrowDownIcon />} />\n          </span>\n          <span className={styles['new-message-banner__jump-label']}>\n            {type === 'jump-to-unreads' ? jumpLabel : newRepliesLabel}\n          </span>\n        </span>\n      </button>\n      {type === 'jump-to-unreads' && countLabel != null && (\n        <span className={styles['new-message-banner__count']} aria-hidden>\n          {countLabel}\n        </span>\n      )}\n      {onDismiss != null && (\n        <button\n          className={styles['new-message-banner__dismiss']}\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label={dismissLabel}\n        >\n          <Icon size=\"16\" glyph={<CloseIcon />} />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["defaultJumpAriaLabel","jumpLabel","countLabel","NewMessageBanner","className","type","onClick","onDismiss","jumpAriaLabel","newRepliesLabel","dismissLabel","typeClass","styles","rootClass","jsxs","jsx","Icon","ArrowDownIcon","CloseIcon"],"mappings":"oVAgCA,SAASA,EACPC,EACAC,EACoB,CACpB,GAAI,OAAOD,GAAc,SACzB,OAAO,OAAOC,GAAe,SACzB,GAAGD,CAAS,KAAKC,CAAU,GAC3BD,CACN,CAOA,SAAwBE,EAAiB,CACvC,UAAAC,EAAY,GACZ,KAAAC,EAAO,kBACP,WAAAH,EACA,QAAAI,EACA,UAAAC,EACA,UAAAN,EAAY,kBACZ,cAAAO,EACA,gBAAAC,EAAkB,cAClB,aAAAC,EAAe,SACjB,EAA0B,CACxB,MAAMC,EACJC,EAAAA,QACE,4BAA4BP,IAAS,kBAAoB,kBAAoB,aAAa,EAC5F,EAEIQ,EAAY,CAACD,UAAO,oBAAoB,EAAGD,EAAWP,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEU,EAAAA,KAAC,MAAA,CAAI,UAAWD,EACd,SAAA,CAAAE,EAAAA,IAAC,SAAA,CACC,UAAWH,EAAAA,QAAO,0BAA0B,EAC5C,KAAK,SACL,QAAAN,EACA,aACED,IAAS,kBACJG,GAAiBR,EAAqBC,EAAWC,CAAU,EAC5D,OAGN,SAAAY,EAAAA,KAAC,OAAA,CAAK,UAAWF,UAAO,0BAA0B,EAChD,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC9D,SAAAG,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAc,EAAI,EAC5C,EACAF,EAAAA,IAAC,QAAK,UAAWH,UAAO,gCAAgC,EACrD,SAAAP,IAAS,kBAAoBJ,EAAYQ,CAAA,CAC5C,CAAA,CAAA,CACF,CAAA,CAAA,EAEDJ,IAAS,mBAAqBH,GAAc,MAC3Ca,EAAAA,IAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC9D,SAAAV,CAAA,CACH,EAEDK,GAAa,MACZQ,EAAAA,IAAC,SAAA,CACC,UAAWH,EAAAA,QAAO,6BAA6B,EAC/C,KAAK,SACL,QAASL,EACT,aAAYG,EAEZ,eAACM,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACG,IAAU,CAAA,CAAI,CAAA,CAAA,CACxC,EAEJ,CAEJ"}

package/dist/components/new-message-banner/NewMessageBanner.d.ts

@@ -1,20 +1,32 @@
+import { ReactNode } from 'react';
 export type NewMessageBannerType = 'jump-to-unreads' | 'new-replies';
 export interface NewMessageBannerProps {
     /** Optional CSS class name. */
     className?: string;
     /** Type controls the layout. Default: JumpToUnreads. */
     type?: NewMessageBannerType;
-    /** Unread count label text (e.g. "21 new messages since Saturday"). Used in JumpToUnreads type. */
-    countLabel?: string;
+    /** Unread count label text (e.g. "21 new messages since Saturday"). Used in JumpToUnreads type. Accepts translated nodes. */
+    countLabel?: ReactNode;
     /** Called when the banner itself is clicked. */
     onClick?: () => void;
     /** Called when the dismiss (×) button is clicked. */
     onDismiss?: () => void;
+    /** Visible label for the JumpToUnreads type. Default: "Jump to unreads". */
+    jumpLabel?: ReactNode;
+    /**
+     * Accessible name for the jump button. Default: `{jumpLabel}, {countLabel}`
+     * when both are strings. Pass it when either is a translated node.
+     */
+    jumpAriaLabel?: string;
+    /** Visible label for the NewReplies type. Default: "New replies". */
+    newRepliesLabel?: ReactNode;
+    /** Accessible name for the dismiss button. Default: "Dismiss". */
+    dismissLabel?: string;
 }
 /**
  * The New Messages Banner alerts the user that there's fresh activity in the channel they're
  * reading. It floats over the message stream so they can jump to the unread region in one
  * click — or dismiss it if they'd rather keep scrolling.
  */
-export default function NewMessageBanner({ className, type, countLabel, onClick, onDismiss, }: NewMessageBannerProps): import("react/jsx-runtime").JSX.Element;
+export default function NewMessageBanner({ className, type, countLabel, onClick, onDismiss, jumpLabel, jumpAriaLabel, newRepliesLabel, dismissLabel, }: NewMessageBannerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NewMessageBanner.d.ts.map

package/dist/components/new-message-banner/NewMessageBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewMessageBanner.d.ts","sourceRoot":"","sources":["../../../src/components/new-message-banner/NewMessageBanner.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,GAAG,aAAa,CAAC;AAErE,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,mGAAmG;IACnG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAc,EACd,IAAwB,EACxB,UAAU,EACV,OAAO,EACP,SAAS,GACV,EAAE,qBAAqB,2CAkDvB"}
+{"version":3,"file":"NewMessageBanner.d.ts","sourceRoot":"","sources":["../../../src/components/new-message-banner/NewMessageBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,GAAG,aAAa,CAAC;AAErE,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,6HAA6H;IAC7H,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAYD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAc,EACd,IAAwB,EACxB,UAAU,EACV,OAAO,EACP,SAAS,EACT,SAA6B,EAC7B,aAAa,EACb,eAA+B,EAC/B,YAAwB,GACzB,EAAE,qBAAqB,2CAgDvB"}

package/dist/components/new-message-banner/NewMessageBanner.js

@@ -1,44 +1,52 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import m from "../icon/Icon.js";
-import __p from "@mattermost/compass-icons/components/arrow-down.js";const p=__p&&__p.default?__p.default:__p;
-import __d from "@mattermost/compass-icons/components/close.js";const d=__d&&__d.default?__d.default:__d;
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import l from "../icon/Icon.js";
+import __g from "@mattermost/compass-icons/components/arrow-down.js";const g=__g&&__g.default?__g.default:__g;
+import __w from "@mattermost/compass-icons/components/close.js";const w=__w&&__w.default?__w.default:__w;
 import n from "./NewMessageBanner.module.scss.js";
-function h({
-  className: l = "",
+function _(a, s) {
+  if (typeof a == "string")
+    return typeof s == "string" ? `${a}, ${s}` : a;
+}
+function C({
+  className: a = "",
   type: s = "jump-to-unreads",
-  countLabel: a,
-  onClick: t,
-  onDismiss: r
+  countLabel: r,
+  onClick: m,
+  onDismiss: o,
+  jumpLabel: t = "Jump to unreads",
+  jumpAriaLabel: u,
+  newRepliesLabel: d = "New replies",
+  dismissLabel: p = "Dismiss"
 }) {
-  const i = n[`new-message-banner--type-${s === "jump-to-unreads" ? "jump-to-unreads" : "new-replies"}`], u = [n["new-message-banner"], i, l].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o("div", { className: u, children: [
+  const c = n[`new-message-banner--type-${s === "jump-to-unreads" ? "jump-to-unreads" : "new-replies"}`], f = [n["new-message-banner"], c, a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ i("div", { className: f, children: [
     /* @__PURE__ */ e(
       "button",
       {
         className: n["new-message-banner__main"],
         type: "button",
-        onClick: t,
-        "aria-label": s === "jump-to-unreads" ? a != null ? `Jump to unreads, ${a}` : "Jump to unreads" : void 0,
-        children: /* @__PURE__ */ o("span", { className: n["new-message-banner__left"], children: [
-          /* @__PURE__ */ e("span", { className: n["new-message-banner__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(m, { size: "16", glyph: /* @__PURE__ */ e(p, {}) }) }),
-          /* @__PURE__ */ e("span", { className: n["new-message-banner__jump-label"], children: s === "jump-to-unreads" ? "Jump to unreads" : "New replies" })
+        onClick: m,
+        "aria-label": s === "jump-to-unreads" ? u ?? _(t, r) : void 0,
+        children: /* @__PURE__ */ i("span", { className: n["new-message-banner__left"], children: [
+          /* @__PURE__ */ e("span", { className: n["new-message-banner__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(l, { size: "16", glyph: /* @__PURE__ */ e(g, {}) }) }),
+          /* @__PURE__ */ e("span", { className: n["new-message-banner__jump-label"], children: s === "jump-to-unreads" ? t : d })
         ] })
       }
     ),
-    s === "jump-to-unreads" && a != null && /* @__PURE__ */ e("span", { className: n["new-message-banner__count"], "aria-hidden": !0, children: a }),
-    r != null && /* @__PURE__ */ e(
+    s === "jump-to-unreads" && r != null && /* @__PURE__ */ e("span", { className: n["new-message-banner__count"], "aria-hidden": !0, children: r }),
+    o != null && /* @__PURE__ */ e(
       "button",
       {
         className: n["new-message-banner__dismiss"],
         type: "button",
-        onClick: r,
-        "aria-label": "Dismiss",
-        children: /* @__PURE__ */ e(m, { size: "16", glyph: /* @__PURE__ */ e(d, {}) })
+        onClick: o,
+        "aria-label": p,
+        children: /* @__PURE__ */ e(l, { size: "16", glyph: /* @__PURE__ */ e(w, {}) })
       }
     )
   ] });
 }
 export {
-  h as default
+  C as default
 };
 //# sourceMappingURL=NewMessageBanner.js.map

package/dist/components/new-message-banner/NewMessageBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"NewMessageBanner.js","sources":["../../../src/components/new-message-banner/NewMessageBanner.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport ArrowDownIcon from '@mattermost/compass-icons/components/arrow-down';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './NewMessageBanner.module.scss';\n\nexport type NewMessageBannerType = 'jump-to-unreads' | 'new-replies';\n\nexport interface NewMessageBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls the layout. Default: JumpToUnreads. */\n  type?: NewMessageBannerType;\n  /** Unread count label text (e.g. \"21 new messages since Saturday\"). Used in JumpToUnreads type. */\n  countLabel?: string;\n  /** Called when the banner itself is clicked. */\n  onClick?: () => void;\n  /** Called when the dismiss (×) button is clicked. */\n  onDismiss?: () => void;\n}\n\n/**\n * The New Messages Banner alerts the user that there's fresh activity in the channel they're\n * reading. It floats over the message stream so they can jump to the unread region in one\n * click — or dismiss it if they'd rather keep scrolling.\n */\nexport default function NewMessageBanner({\n  className = '',\n  type = 'jump-to-unreads',\n  countLabel,\n  onClick,\n  onDismiss,\n}: NewMessageBannerProps) {\n  const typeClass =\n    styles[\n      `new-message-banner--type-${type === 'jump-to-unreads' ? 'jump-to-unreads' : 'new-replies'}`\n    ];\n\n  const rootClass = [styles['new-message-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <button\n        className={styles['new-message-banner__main']}\n        type=\"button\"\n        onClick={onClick}\n        aria-label={\n          type === 'jump-to-unreads'\n            ? countLabel != null\n              ? `Jump to unreads, ${countLabel}`\n              : 'Jump to unreads'\n            : undefined\n        }\n      >\n        <span className={styles['new-message-banner__left']}>\n          <span className={styles['new-message-banner__icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<ArrowDownIcon />} />\n          </span>\n          <span className={styles['new-message-banner__jump-label']}>\n            {type === 'jump-to-unreads' ? 'Jump to unreads' : 'New replies'}\n          </span>\n        </span>\n      </button>\n      {type === 'jump-to-unreads' && countLabel != null && (\n        <span className={styles['new-message-banner__count']} aria-hidden>\n          {countLabel}\n        </span>\n      )}\n      {onDismiss != null && (\n        <button\n          className={styles['new-message-banner__dismiss']}\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label=\"Dismiss\"\n        >\n          <Icon size=\"16\" glyph={<CloseIcon />} />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["NewMessageBanner","className","type","countLabel","onClick","onDismiss","typeClass","styles","rootClass","jsxs","jsx","Icon","ArrowDownIcon","CloseIcon"],"mappings":";;;;;AAyBA,SAAwBA,EAAiB;AAAA,EACvC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAA0B;AACxB,QAAMC,IACJC,EACE,4BAA4BL,MAAS,oBAAoB,oBAAoB,aAAa,EAC5F,GAEIM,IAAY,CAACD,EAAO,oBAAoB,GAAGD,GAAWL,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,GACd,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH,EAAO,0BAA0B;AAAA,QAC5C,MAAK;AAAA,QACL,SAAAH;AAAA,QACA,cACEF,MAAS,oBACLC,KAAc,OACZ,oBAAoBA,CAAU,KAC9B,oBACF;AAAA,QAGN,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAWF,EAAO,0BAA0B,GAChD,UAAA;AAAA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,0BAA0B,GAAG,eAAW,IAC9D,UAAA,gBAAAG,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAc,GAAI,GAC5C;AAAA,UACA,gBAAAF,EAAC,UAAK,WAAWH,EAAO,gCAAgC,GACrD,UAAAL,MAAS,oBAAoB,oBAAoB,cAAA,CACpD;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEDA,MAAS,qBAAqBC,KAAc,QAC3C,gBAAAO,EAAC,QAAA,EAAK,WAAWH,EAAO,2BAA2B,GAAG,eAAW,IAC9D,UAAAJ,EAAA,CACH;AAAA,IAEDE,KAAa,QACZ,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH,EAAO,6BAA6B;AAAA,QAC/C,MAAK;AAAA,QACL,SAASF;AAAA,QACT,cAAW;AAAA,QAEX,4BAACM,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACG,KAAU,EAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACxC,GAEJ;AAEJ;"}
+{"version":3,"file":"NewMessageBanner.js","sources":["../../../src/components/new-message-banner/NewMessageBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport ArrowDownIcon from '@mattermost/compass-icons/components/arrow-down';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './NewMessageBanner.module.scss';\n\nexport type NewMessageBannerType = 'jump-to-unreads' | 'new-replies';\n\nexport interface NewMessageBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls the layout. Default: JumpToUnreads. */\n  type?: NewMessageBannerType;\n  /** Unread count label text (e.g. \"21 new messages since Saturday\"). Used in JumpToUnreads type. Accepts translated nodes. */\n  countLabel?: ReactNode;\n  /** Called when the banner itself is clicked. */\n  onClick?: () => void;\n  /** Called when the dismiss (×) button is clicked. */\n  onDismiss?: () => void;\n  /** Visible label for the JumpToUnreads type. Default: \"Jump to unreads\". */\n  jumpLabel?: ReactNode;\n  /**\n   * Accessible name for the jump button. Default: `{jumpLabel}, {countLabel}`\n   * when both are strings. Pass it when either is a translated node.\n   */\n  jumpAriaLabel?: string;\n  /** Visible label for the NewReplies type. Default: \"New replies\". */\n  newRepliesLabel?: ReactNode;\n  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n}\n\nfunction defaultJumpAriaLabel(\n  jumpLabel: ReactNode,\n  countLabel: ReactNode,\n): string | undefined {\n  if (typeof jumpLabel !== 'string') return undefined;\n  return typeof countLabel === 'string'\n    ? `${jumpLabel}, ${countLabel}`\n    : jumpLabel;\n}\n\n/**\n * The New Messages Banner alerts the user that there's fresh activity in the channel they're\n * reading. It floats over the message stream so they can jump to the unread region in one\n * click — or dismiss it if they'd rather keep scrolling.\n */\nexport default function NewMessageBanner({\n  className = '',\n  type = 'jump-to-unreads',\n  countLabel,\n  onClick,\n  onDismiss,\n  jumpLabel = 'Jump to unreads',\n  jumpAriaLabel,\n  newRepliesLabel = 'New replies',\n  dismissLabel = 'Dismiss',\n}: NewMessageBannerProps) {\n  const typeClass =\n    styles[\n      `new-message-banner--type-${type === 'jump-to-unreads' ? 'jump-to-unreads' : 'new-replies'}`\n    ];\n\n  const rootClass = [styles['new-message-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <button\n        className={styles['new-message-banner__main']}\n        type=\"button\"\n        onClick={onClick}\n        aria-label={\n          type === 'jump-to-unreads'\n            ? (jumpAriaLabel ?? defaultJumpAriaLabel(jumpLabel, countLabel))\n            : undefined\n        }\n      >\n        <span className={styles['new-message-banner__left']}>\n          <span className={styles['new-message-banner__icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<ArrowDownIcon />} />\n          </span>\n          <span className={styles['new-message-banner__jump-label']}>\n            {type === 'jump-to-unreads' ? jumpLabel : newRepliesLabel}\n          </span>\n        </span>\n      </button>\n      {type === 'jump-to-unreads' && countLabel != null && (\n        <span className={styles['new-message-banner__count']} aria-hidden>\n          {countLabel}\n        </span>\n      )}\n      {onDismiss != null && (\n        <button\n          className={styles['new-message-banner__dismiss']}\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label={dismissLabel}\n        >\n          <Icon size=\"16\" glyph={<CloseIcon />} />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["defaultJumpAriaLabel","jumpLabel","countLabel","NewMessageBanner","className","type","onClick","onDismiss","jumpAriaLabel","newRepliesLabel","dismissLabel","typeClass","styles","rootClass","jsxs","jsx","Icon","ArrowDownIcon","CloseIcon"],"mappings":";;;;;AAgCA,SAASA,EACPC,GACAC,GACoB;AACpB,MAAI,OAAOD,KAAc;AACzB,WAAO,OAAOC,KAAe,WACzB,GAAGD,CAAS,KAAKC,CAAU,KAC3BD;AACN;AAOA,SAAwBE,EAAiB;AAAA,EACvC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,YAAAH;AAAA,EACA,SAAAI;AAAA,EACA,WAAAC;AAAA,EACA,WAAAN,IAAY;AAAA,EACZ,eAAAO;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,cAAAC,IAAe;AACjB,GAA0B;AACxB,QAAMC,IACJC,EACE,4BAA4BP,MAAS,oBAAoB,oBAAoB,aAAa,EAC5F,GAEIQ,IAAY,CAACD,EAAO,oBAAoB,GAAGD,GAAWP,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAU,EAAC,OAAA,EAAI,WAAWD,GACd,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH,EAAO,0BAA0B;AAAA,QAC5C,MAAK;AAAA,QACL,SAAAN;AAAA,QACA,cACED,MAAS,oBACJG,KAAiBR,EAAqBC,GAAWC,CAAU,IAC5D;AAAA,QAGN,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAWF,EAAO,0BAA0B,GAChD,UAAA;AAAA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,0BAA0B,GAAG,eAAW,IAC9D,UAAA,gBAAAG,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAc,GAAI,GAC5C;AAAA,UACA,gBAAAF,EAAC,UAAK,WAAWH,EAAO,gCAAgC,GACrD,UAAAP,MAAS,oBAAoBJ,IAAYQ,EAAA,CAC5C;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEDJ,MAAS,qBAAqBH,KAAc,QAC3C,gBAAAa,EAAC,QAAA,EAAK,WAAWH,EAAO,2BAA2B,GAAG,eAAW,IAC9D,UAAAV,EAAA,CACH;AAAA,IAEDK,KAAa,QACZ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH,EAAO,6BAA6B;AAAA,QAC/C,MAAK;AAAA,QACL,SAASL;AAAA,QACT,cAAYG;AAAA,QAEZ,4BAACM,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACG,KAAU,EAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACxC,GAEJ;AAEJ;"}

package/dist/components/pagination-dots/PaginationDots.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("./PaginationDots.module.scss.cjs");function b({pages:s,activePage:l,orientation:r="horizontal",dotStyle:o="default",onPageChange:i,className:d=""}){const c=r==="vertical",u=o==="inverted",f=o==="on-primary",p=c?t.default["pagination-dots--vertical"]:t.default["pagination-dots--horizontal"],m=u?t.default["pagination-dots--inverted"]:f?t.default["pagination-dots--on-primary"]:"";return e.jsx("div",{className:[t.default["pagination-dots"],p,m,d].filter(Boolean).join(" "),role:"tablist","aria-label":"Pages",children:Array.from({length:s},(g,v)=>{const a=v+1,n=a===l,_=[t.default["pagination-dots__dot"],n?t.default["pagination-dots__dot--active"]:""].filter(Boolean).join(" ");return e.jsx("button",{type:"button",role:"tab","aria-selected":n,"aria-label":`Page ${a}`,className:t.default["pagination-dots__item"],onClick:()=>i==null?void 0:i(a),children:e.jsx("span",{className:_})},a)})})}exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),t=require("./PaginationDots.module.scss.cjs"),j=e=>`Page ${e}`;function y({pages:e,activePage:l,orientation:r="horizontal",dotStyle:n="default",onPageChange:i,className:d="",label:c="Pages",formatPageLabel:u=j}){const f=r==="vertical",p=n==="inverted",m=n==="on-primary",v=f?t.default["pagination-dots--vertical"]:t.default["pagination-dots--horizontal"],_=p?t.default["pagination-dots--inverted"]:m?t.default["pagination-dots--on-primary"]:"";return o.jsx("div",{className:[t.default["pagination-dots"],v,_,d].filter(Boolean).join(" "),role:"tablist","aria-label":c,children:Array.from({length:e},(x,b)=>{const a=b+1,s=a===l,g=[t.default["pagination-dots__dot"],s?t.default["pagination-dots__dot--active"]:""].filter(Boolean).join(" ");return o.jsx("button",{type:"button",role:"tab","aria-selected":s,"aria-label":u(a),className:t.default["pagination-dots__item"],onClick:()=>i==null?void 0:i(a),children:o.jsx("span",{className:g})},a)})})}exports.default=y;
 //# sourceMappingURL=PaginationDots.cjs.map

package/dist/components/pagination-dots/PaginationDots.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationDots.cjs","sources":["../../../src/components/pagination-dots/PaginationDots.tsx"],"sourcesContent":["import styles from './PaginationDots.module.scss';\n\nexport type PaginationDotsOrientation = 'horizontal' | 'vertical';\nexport type PaginationDotsStyle = 'default' | 'inverted' | 'on-primary';\n\nexport interface PaginationDotsProps {\n  /** Total number of pages/steps. */\n  pages: number;\n  /** Currently active page (1-indexed). */\n  activePage: number;\n  /** Layout orientation. Default: Horizontal. */\n  orientation?: PaginationDotsOrientation;\n  /** Color style. Default: Default. */\n  dotStyle?: PaginationDotsStyle;\n  /** Called when a dot is clicked. Receives the 1-indexed page number. */\n  onPageChange?: (page: number) => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Pagination Dots indicate progress through a fixed sequence of steps — most often a\n * multi-step onboarding flow or a swipeable carousel. One dot per step, the active one\n * filled, the rest quiet.\n */\nexport default function PaginationDots({\n  pages,\n  activePage,\n  orientation = 'horizontal',\n  dotStyle = 'default',\n  onPageChange,\n  className = '',\n}: PaginationDotsProps) {\n  const isVertical = orientation === 'vertical';\n  const isInverted = dotStyle === 'inverted';\n  const isOnPrimary = dotStyle === 'on-primary';\n\n  const orientationClass = isVertical\n    ? styles['pagination-dots--vertical']\n    : styles['pagination-dots--horizontal'];\n  const styleClass = isInverted\n    ? styles['pagination-dots--inverted']\n    : isOnPrimary\n      ? styles['pagination-dots--on-primary']\n      : '';\n\n  return (\n    <div\n      className={[\n        styles['pagination-dots'],\n        orientationClass,\n        styleClass,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"tablist\"\n      aria-label=\"Pages\"\n    >\n      {Array.from({ length: pages }, (_, i) => {\n        const page = i + 1;\n        const isActive = page === activePage;\n        const dotClass = [\n          styles['pagination-dots__dot'],\n          isActive ? styles['pagination-dots__dot--active'] : '',\n        ]\n          .filter(Boolean)\n          .join(' ');\n\n        return (\n          <button\n            key={page}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isActive}\n            aria-label={`Page ${page}`}\n            className={styles['pagination-dots__item']}\n            onClick={() => onPageChange?.(page)}\n          >\n            <span className={dotClass} />\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["PaginationDots","pages","activePage","orientation","dotStyle","onPageChange","className","isVertical","isInverted","isOnPrimary","orientationClass","styles","styleClass","jsx","_","i","page","isActive","dotClass"],"mappings":"+LAyBA,SAAwBA,EAAe,CACrC,MAAAC,EACA,WAAAC,EACA,YAAAC,EAAc,aACd,SAAAC,EAAW,UACX,aAAAC,EACA,UAAAC,EAAY,EACd,EAAwB,CACtB,MAAMC,EAAaJ,IAAgB,WAC7BK,EAAaJ,IAAa,WAC1BK,EAAcL,IAAa,aAE3BM,EAAmBH,EACrBI,EAAAA,QAAO,2BAA2B,EAClCA,EAAAA,QAAO,6BAA6B,EAClCC,EAAaJ,EACfG,UAAO,2BAA2B,EAClCF,EACEE,EAAAA,QAAO,6BAA6B,EACpC,GAEN,OACEE,EAAAA,IAAC,MAAA,CACC,UAAW,CACTF,EAAAA,QAAO,iBAAiB,EACxBD,EACAE,EACAN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,UACL,aAAW,QAEV,SAAA,MAAM,KAAK,CAAE,OAAQL,GAAS,CAACa,EAAGC,IAAM,CACvC,MAAMC,EAAOD,EAAI,EACXE,EAAWD,IAASd,EACpBgB,EAAW,CACfP,EAAAA,QAAO,sBAAsB,EAC7BM,EAAWN,EAAAA,QAAO,8BAA8B,EAAI,EAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,IAAC,SAAA,CAEC,KAAK,SACL,KAAK,MACL,gBAAeI,EACf,aAAY,QAAQD,CAAI,GACxB,UAAWL,EAAAA,QAAO,uBAAuB,EACzC,QAAS,IAAMN,GAAA,YAAAA,EAAeW,GAE9B,SAAAH,EAAAA,IAAC,OAAA,CAAK,UAAWK,CAAA,CAAU,CAAA,EARtBF,CAAA,CAWX,CAAC,CAAA,CAAA,CAGP"}
+{"version":3,"file":"PaginationDots.cjs","sources":["../../../src/components/pagination-dots/PaginationDots.tsx"],"sourcesContent":["import styles from './PaginationDots.module.scss';\n\nexport type PaginationDotsOrientation = 'horizontal' | 'vertical';\nexport type PaginationDotsStyle = 'default' | 'inverted' | 'on-primary';\n\nexport interface PaginationDotsProps {\n  /** Total number of pages/steps. */\n  pages: number;\n  /** Currently active page (1-indexed). */\n  activePage: number;\n  /** Layout orientation. Default: Horizontal. */\n  orientation?: PaginationDotsOrientation;\n  /** Color style. Default: Default. */\n  dotStyle?: PaginationDotsStyle;\n  /** Called when a dot is clicked. Receives the 1-indexed page number. */\n  onPageChange?: (page: number) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Accessible name for the dot list. Default: \"Pages\". */\n  label?: string;\n  /** Accessible name for each dot. Default: `Page {page}`. */\n  formatPageLabel?: (page: number) => string;\n}\n\nconst defaultFormatPageLabel = (page: number) => `Page ${page}`;\n\n/**\n * Pagination Dots indicate progress through a fixed sequence of steps — most often a\n * multi-step onboarding flow or a swipeable carousel. One dot per step, the active one\n * filled, the rest quiet.\n */\nexport default function PaginationDots({\n  pages,\n  activePage,\n  orientation = 'horizontal',\n  dotStyle = 'default',\n  onPageChange,\n  className = '',\n  label = 'Pages',\n  formatPageLabel = defaultFormatPageLabel,\n}: PaginationDotsProps) {\n  const isVertical = orientation === 'vertical';\n  const isInverted = dotStyle === 'inverted';\n  const isOnPrimary = dotStyle === 'on-primary';\n\n  const orientationClass = isVertical\n    ? styles['pagination-dots--vertical']\n    : styles['pagination-dots--horizontal'];\n  const styleClass = isInverted\n    ? styles['pagination-dots--inverted']\n    : isOnPrimary\n      ? styles['pagination-dots--on-primary']\n      : '';\n\n  return (\n    <div\n      className={[\n        styles['pagination-dots'],\n        orientationClass,\n        styleClass,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"tablist\"\n      aria-label={label}\n    >\n      {Array.from({ length: pages }, (_, i) => {\n        const page = i + 1;\n        const isActive = page === activePage;\n        const dotClass = [\n          styles['pagination-dots__dot'],\n          isActive ? styles['pagination-dots__dot--active'] : '',\n        ]\n          .filter(Boolean)\n          .join(' ');\n\n        return (\n          <button\n            key={page}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isActive}\n            aria-label={formatPageLabel(page)}\n            className={styles['pagination-dots__item']}\n            onClick={() => onPageChange?.(page)}\n          >\n            <span className={dotClass} />\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["defaultFormatPageLabel","page","PaginationDots","pages","activePage","orientation","dotStyle","onPageChange","className","label","formatPageLabel","isVertical","isInverted","isOnPrimary","orientationClass","styles","styleClass","jsx","_","i","isActive","dotClass"],"mappings":"+LAwBMA,EAA0BC,GAAiB,QAAQA,CAAI,GAO7D,SAAwBC,EAAe,CACrC,MAAAC,EACA,WAAAC,EACA,YAAAC,EAAc,aACd,SAAAC,EAAW,UACX,aAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EAAQ,QACR,gBAAAC,EAAkBV,CACpB,EAAwB,CACtB,MAAMW,EAAaN,IAAgB,WAC7BO,EAAaN,IAAa,WAC1BO,EAAcP,IAAa,aAE3BQ,EAAmBH,EACrBI,EAAAA,QAAO,2BAA2B,EAClCA,EAAAA,QAAO,6BAA6B,EAClCC,EAAaJ,EACfG,UAAO,2BAA2B,EAClCF,EACEE,EAAAA,QAAO,6BAA6B,EACpC,GAEN,OACEE,EAAAA,IAAC,MAAA,CACC,UAAW,CACTF,EAAAA,QAAO,iBAAiB,EACxBD,EACAE,EACAR,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,UACL,aAAYC,EAEX,SAAA,MAAM,KAAK,CAAE,OAAQN,GAAS,CAACe,EAAGC,IAAM,CACvC,MAAMlB,EAAOkB,EAAI,EACXC,EAAWnB,IAASG,EACpBiB,EAAW,CACfN,EAAAA,QAAO,sBAAsB,EAC7BK,EAAWL,EAAAA,QAAO,8BAA8B,EAAI,EAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,IAAC,SAAA,CAEC,KAAK,SACL,KAAK,MACL,gBAAeG,EACf,aAAYV,EAAgBT,CAAI,EAChC,UAAWc,EAAAA,QAAO,uBAAuB,EACzC,QAAS,IAAMR,GAAA,YAAAA,EAAeN,GAE9B,SAAAgB,EAAAA,IAAC,OAAA,CAAK,UAAWI,CAAA,CAAU,CAAA,EARtBpB,CAAA,CAWX,CAAC,CAAA,CAAA,CAGP"}