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

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

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

package/dist/components/modal-header/index.cjs

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

package/dist/components/modal-header/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ModalHeader } from './ModalHeader';
+export type { ModalHeaderProps, ModalSubtitlePlacement } from './ModalHeader';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/modal-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,5 @@
+import { default as d } from "./ModalHeader.js";
+export {
+  d as ModalHeader
+};
+//# sourceMappingURL=index.js.map

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.css

@@ -0,0 +1 @@
+._more-unreads-banner_1f1xw_13{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xs) var(--spacing-m);background-color:var(--mention-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);cursor:pointer;outline:none}._more-unreads-banner_1f1xw_13:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_1f1xw_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._more-unreads-banner_1f1xw_13:focus-visible{animation:none}}._more-unreads-banner_1f1xw_13:not(._-host-shadow-a_1f1xw_36):not(._-host-shadow-b_1f1xw_36){box-shadow:var(--elevation-1);border-radius:var(--radius-s)}@keyframes _focus-ring-in_1f1xw_1{0%{outline-color:transparent;outline-offset:0}}._more-unreads-banner_1f1xw_13:hover,._more-unreads-banner_1f1xw_13:active{transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._more-unreads-banner_1f1xw_13:hover:not(._-host-shadow-a_1f1xw_36):not(._-host-shadow-b_1f1xw_36){background-color:rgba(var(--mention-bg-rgb),.92);box-shadow:var(--elevation-2)}._more-unreads-banner_1f1xw_13:active:not(._-host-shadow-a_1f1xw_36):not(._-host-shadow-b_1f1xw_36){box-shadow:var(--elevation-1)}._more-unreads-banner__icon_1f1xw_56{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mention-color)}._more-unreads-banner__label_1f1xw_63{font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--mention-color);white-space:nowrap}._more-unreads-banner--size-small_1f1xw_70{padding:var(--spacing-xxs) var(--spacing-s)}._more-unreads-banner--size-small_1f1xw_70 ._more-unreads-banner__label_1f1xw_63{font-size:var(--font-size-75)}._more-unreads-banner--size-large_1f1xw_76{padding:var(--spacing-s) var(--spacing-l)}._more-unreads-banner--size-large_1f1xw_76 ._more-unreads-banner__label_1f1xw_63{font-size:var(--font-size-100)}._more-unreads-banner--size-large_1f1xw_76 ._more-unreads-banner__icon_1f1xw_56 svg{width:var(--icon-size-16);height:var(--icon-size-16)}

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/more-unreads-banner/MoreUnreadsBanner.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MoreUnreadsBanner.module.css');const e={"more-unreads-banner":"_more-unreads-banner_1fap4_2","more-unreads-banner__icon":"_more-unreads-banner__icon_1fap4_26","more-unreads-banner__label":"_more-unreads-banner__label_1fap4_33","more-unreads-banner--size-small":"_more-unreads-banner--size-small_1fap4_40","more-unreads-banner--size-large":"_more-unreads-banner--size-large_1fap4_46"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MoreUnreadsBanner.css');const e={"more-unreads-banner":"_more-unreads-banner_1f1xw_13","focus-ring-in":"_focus-ring-in_1f1xw_1","-host-shadow-a":"_-host-shadow-a_1f1xw_36","-host-shadow-b":"_-host-shadow-b_1f1xw_36","more-unreads-banner__icon":"_more-unreads-banner__icon_1f1xw_56","more-unreads-banner__label":"_more-unreads-banner__label_1f1xw_63","more-unreads-banner--size-small":"_more-unreads-banner--size-small_1f1xw_70","more-unreads-banner--size-large":"_more-unreads-banner--size-large_1f1xw_76"};exports.default=e;
 //# sourceMappingURL=MoreUnreadsBanner.module.scss.cjs.map

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

@@ -1,9 +1,12 @@
-import './MoreUnreadsBanner.module.css';const e = {
-  "more-unreads-banner": "_more-unreads-banner_1fap4_2",
-  "more-unreads-banner__icon": "_more-unreads-banner__icon_1fap4_26",
-  "more-unreads-banner__label": "_more-unreads-banner__label_1fap4_33",
-  "more-unreads-banner--size-small": "_more-unreads-banner--size-small_1fap4_40",
-  "more-unreads-banner--size-large": "_more-unreads-banner--size-large_1fap4_46"
+import './MoreUnreadsBanner.css';const e = {
+  "more-unreads-banner": "_more-unreads-banner_1f1xw_13",
+  "focus-ring-in": "_focus-ring-in_1f1xw_1",
+  "-host-shadow-a": "_-host-shadow-a_1f1xw_36",
+  "-host-shadow-b": "_-host-shadow-b_1f1xw_36",
+  "more-unreads-banner__icon": "_more-unreads-banner__icon_1f1xw_56",
+  "more-unreads-banner__label": "_more-unreads-banner__label_1f1xw_63",
+  "more-unreads-banner--size-small": "_more-unreads-banner--size-small_1f1xw_70",
+  "more-unreads-banner--size-large": "_more-unreads-banner--size-large_1f1xw_76"
 };
 export {
   e as default

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

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

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 = [\n    styles['new-message-banner'],\n    typeClass,\n    className,\n  ]\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,CAChBD,EAAAA,QAAO,oBAAoB,EAC3BD,EACAL,CAAA,EAEC,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.css

@@ -0,0 +1 @@
+._new-message-banner_1cuau_13{position:relative;display:flex;align-items:center;background-color:var(--button-bg);border-radius:var(--radius-s);box-shadow:var(--elevation-2);overflow:hidden;width:100%}._new-message-banner__main_1cuau_23{display:flex;align-items:center;flex:1 0 0;gap:var(--spacing-s);padding:var(--spacing-xxs) var(--spacing-m) var(--spacing-xxs) var(--spacing-s);background:transparent;border:none;cursor:pointer;justify-content:flex-start;min-width:0}._new-message-banner__main_1cuau_23:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(var(--color-neutral-0-rgb),.48)}._new-message-banner__left_1cuau_39{display:flex;align-items:center;gap:var(--spacing-s);height:16px;overflow:hidden}._new-message-banner__icon_1cuau_46{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sidebar-text)}._new-message-banner__jump-label_1cuau_53{font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--sidebar-text);white-space:nowrap;text-align:center}._new-message-banner__count_1cuau_61{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--sidebar-text);white-space:nowrap;text-align:center}._new-message-banner__dismiss_1cuau_75{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-xs);background:transparent;border:none;cursor:pointer;color:var(--sidebar-text);opacity:.72;transition:opacity var(--duration-quick) var(--ease-transition),background-color var(--duration-quick) var(--ease-transition);flex-shrink:0}._new-message-banner__dismiss_1cuau_75:hover{opacity:1;background-color:rgba(var(--color-neutral-0-rgb),.08)}._new-message-banner__dismiss_1cuau_75:active{background-color:rgba(var(--color-neutral-0-rgb),.16)}._new-message-banner__dismiss_1cuau_75:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(var(--color-neutral-0-rgb),.48)}._new-message-banner--type-jump-to-unreads_1cuau_101{container-name:new-message-banner;container-type:inline-size}._new-message-banner--type-new-replies_1cuau_105{display:inline-flex;width:auto}@container new-message-banner (max-width: 749px){._new-message-banner--type-jump-to-unreads_1cuau_101 ._new-message-banner__jump-label_1cuau_53{display:none}}

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,2CAsDvB"}
+{"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,48 +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 = [\n    styles['new-message-banner'],\n    typeClass,\n    className,\n  ]\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;AAAA,IAChBD,EAAO,oBAAoB;AAAA,IAC3BD;AAAA,IACAL;AAAA,EAAA,EAEC,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/new-message-banner/NewMessageBanner.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./NewMessageBanner.module.css');const e={"new-message-banner":"_new-message-banner_1we1b_2","new-message-banner__main":"_new-message-banner__main_1we1b_12","new-message-banner__left":"_new-message-banner__left_1we1b_28","new-message-banner__icon":"_new-message-banner__icon_1we1b_35","new-message-banner__jump-label":"_new-message-banner__jump-label_1we1b_42","new-message-banner__count":"_new-message-banner__count_1we1b_50","new-message-banner__dismiss":"_new-message-banner__dismiss_1we1b_64","new-message-banner--type-jump-to-unreads":"_new-message-banner--type-jump-to-unreads_1we1b_90","new-message-banner--type-new-replies":"_new-message-banner--type-new-replies_1we1b_94"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./NewMessageBanner.css');const e={"new-message-banner":"_new-message-banner_1cuau_13","new-message-banner__main":"_new-message-banner__main_1cuau_23","new-message-banner__left":"_new-message-banner__left_1cuau_39","new-message-banner__icon":"_new-message-banner__icon_1cuau_46","new-message-banner__jump-label":"_new-message-banner__jump-label_1cuau_53","new-message-banner__count":"_new-message-banner__count_1cuau_61","new-message-banner__dismiss":"_new-message-banner__dismiss_1cuau_75","new-message-banner--type-jump-to-unreads":"_new-message-banner--type-jump-to-unreads_1cuau_101","new-message-banner--type-new-replies":"_new-message-banner--type-new-replies_1cuau_105"};exports.default=e;
 //# sourceMappingURL=NewMessageBanner.module.scss.cjs.map

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

@@ -1,13 +1,13 @@
-import './NewMessageBanner.module.css';const e = {
-  "new-message-banner": "_new-message-banner_1we1b_2",
-  "new-message-banner__main": "_new-message-banner__main_1we1b_12",
-  "new-message-banner__left": "_new-message-banner__left_1we1b_28",
-  "new-message-banner__icon": "_new-message-banner__icon_1we1b_35",
-  "new-message-banner__jump-label": "_new-message-banner__jump-label_1we1b_42",
-  "new-message-banner__count": "_new-message-banner__count_1we1b_50",
-  "new-message-banner__dismiss": "_new-message-banner__dismiss_1we1b_64",
-  "new-message-banner--type-jump-to-unreads": "_new-message-banner--type-jump-to-unreads_1we1b_90",
-  "new-message-banner--type-new-replies": "_new-message-banner--type-new-replies_1we1b_94"
+import './NewMessageBanner.css';const e = {
+  "new-message-banner": "_new-message-banner_1cuau_13",
+  "new-message-banner__main": "_new-message-banner__main_1cuau_23",
+  "new-message-banner__left": "_new-message-banner__left_1cuau_39",
+  "new-message-banner__icon": "_new-message-banner__icon_1cuau_46",
+  "new-message-banner__jump-label": "_new-message-banner__jump-label_1cuau_53",
+  "new-message-banner__count": "_new-message-banner__count_1cuau_61",
+  "new-message-banner__dismiss": "_new-message-banner__dismiss_1cuau_75",
+  "new-message-banner--type-jump-to-unreads": "_new-message-banner--type-jump-to-unreads_1cuau_101",
+  "new-message-banner--type-new-replies": "_new-message-banner--type-new-replies_1cuau_105"
 };
 export {
   e as default

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"}

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

@@ -0,0 +1 @@
+._pagination-dots_z2230_13{display:inline-flex;overflow:visible}._pagination-dots--horizontal_z2230_17{flex-direction:row;align-items:center}._pagination-dots--vertical_z2230_21{flex-direction:column;justify-content:center}._pagination-dots--inverted_z2230_25 ._pagination-dots__dot_z2230_25{background-color:rgba(var(--sidebar-text-rgb),.4)}._pagination-dots--inverted_z2230_25 ._pagination-dots__dot--active_z2230_28{background-color:var(--sidebar-text);box-shadow:0 0 0 4px rgba(var(--sidebar-text-rgb),.16)}._pagination-dots--on-primary_z2230_32{--focus-ring-color: var(--button-color)}._pagination-dots--on-primary_z2230_32 ._pagination-dots__dot_z2230_25{background-color:rgba(var(--button-color-rgb),.4)}._pagination-dots--on-primary_z2230_32 ._pagination-dots__dot--active_z2230_28{background-color:var(--button-color);box-shadow:0 0 0 4px rgba(var(--button-color-rgb),.24)}._pagination-dots__item_z2230_42{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;border-radius:var(--radius-pill);cursor:pointer;flex-shrink:0;outline:none}._pagination-dots__item_z2230_42:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:0;animation:_focus-ring-in_z2230_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._pagination-dots__item_z2230_42:focus-visible{animation:none}}._pagination-dots__item_z2230_42:not(._-host-shadow-a_z2230_66):not(._-host-shadow-b_z2230_66){box-shadow:none;border-radius:var(--radius-pill)}@keyframes _focus-ring-in_z2230_1{0%{outline-color:transparent;outline-offset:0}}._pagination-dots__dot_z2230_25{display:block;width:6px;height:6px;border-radius:var(--radius-pill);background-color:rgba(var(--center-channel-color-rgb),.24)}._pagination-dots__dot--active_z2230_28{background-color:var(--button-bg);box-shadow:0 0 0 4px rgba(var(--button-bg-rgb),.16)}

package/dist/components/pagination-dots/PaginationDots.d.ts

@@ -13,11 +13,15 @@ export interface PaginationDotsProps {
     onPageChange?: (page: number) => void;
     /** Optional CSS class name. */
     className?: string;
+    /** Accessible name for the dot list. Default: "Pages". */
+    label?: string;
+    /** Accessible name for each dot. Default: `Page {page}`. */
+    formatPageLabel?: (page: number) => string;
 }
 /**
  * Pagination Dots indicate progress through a fixed sequence of steps — most often a
  * multi-step onboarding flow or a swipeable carousel. One dot per step, the active one
  * filled, the rest quiet.
  */
-export default function PaginationDots({ pages, activePage, orientation, dotStyle, onPageChange, className, }: PaginationDotsProps): import("react/jsx-runtime").JSX.Element;
+export default function PaginationDots({ pages, activePage, orientation, dotStyle, onPageChange, className, label, formatPageLabel, }: PaginationDotsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PaginationDots.d.ts.map

package/dist/components/pagination-dots/PaginationDots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationDots.d.ts","sourceRoot":"","sources":["../../../src/components/pagination-dots/PaginationDots.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,yBAAyB,GAAG,YAAY,GAAG,UAAU,CAAC;AAClE,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;AAExE,MAAM,WAAW,mBAAmB;IAClC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,wEAAwE;IACxE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,UAAU,EACV,WAA0B,EAC1B,QAAoB,EACpB,YAAY,EACZ,SAAc,GACf,EAAE,mBAAmB,2CAqDrB"}
+{"version":3,"file":"PaginationDots.d.ts","sourceRoot":"","sources":["../../../src/components/pagination-dots/PaginationDots.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,yBAAyB,GAAG,YAAY,GAAG,UAAU,CAAC;AAClE,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;AAExE,MAAM,WAAW,mBAAmB;IAClC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,wEAAwE;IACxE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5C;AAID;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,UAAU,EACV,WAA0B,EAC1B,QAAoB,EACpB,YAAY,EACZ,SAAc,EACd,KAAe,EACf,eAAwC,GACzC,EAAE,mBAAmB,2CAqDrB"}

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

@@ -1,48 +1,51 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import t from "./PaginationDots.module.scss.js";
-function j({
-  pages: r,
+const y = (i) => `Page ${i}`;
+function z({
+  pages: i,
   activePage: e,
   orientation: l = "horizontal",
-  dotStyle: n = "default",
+  dotStyle: s = "default",
   onPageChange: o,
-  className: c = ""
+  className: c = "",
+  label: d = "Pages",
+  formatPageLabel: p = y
 }) {
-  const d = l === "vertical", p = n === "inverted", m = n === "on-primary", f = d ? t["pagination-dots--vertical"] : t["pagination-dots--horizontal"], v = p ? t["pagination-dots--inverted"] : m ? t["pagination-dots--on-primary"] : "";
-  return /* @__PURE__ */ a(
+  const m = l === "vertical", f = s === "inverted", u = s === "on-primary", v = m ? t["pagination-dots--vertical"] : t["pagination-dots--horizontal"], b = f ? t["pagination-dots--inverted"] : u ? t["pagination-dots--on-primary"] : "";
+  return /* @__PURE__ */ n(
     "div",
     {
       className: [
         t["pagination-dots"],
-        f,
         v,
+        b,
         c
       ].filter(Boolean).join(" "),
       role: "tablist",
-      "aria-label": "Pages",
-      children: Array.from({ length: r }, (b, u) => {
-        const i = u + 1, s = i === e, _ = [
+      "aria-label": d,
+      children: Array.from({ length: i }, (j, _) => {
+        const a = _ + 1, r = a === e, g = [
           t["pagination-dots__dot"],
-          s ? t["pagination-dots__dot--active"] : ""
+          r ? t["pagination-dots__dot--active"] : ""
         ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ a(
+        return /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             role: "tab",
-            "aria-selected": s,
-            "aria-label": `Page ${i}`,
+            "aria-selected": r,
+            "aria-label": p(a),
             className: t["pagination-dots__item"],
-            onClick: () => o == null ? void 0 : o(i),
-            children: /* @__PURE__ */ a("span", { className: _ })
+            onClick: () => o == null ? void 0 : o(a),
+            children: /* @__PURE__ */ n("span", { className: g })
           },
-          i
+          a
         );
       })
     }
   );
 }
 export {
-  j as default
+  z as default
 };
 //# sourceMappingURL=PaginationDots.js.map