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

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

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

@@ -1 +1 @@
-._pagination-dots_1r0u8_2{display:inline-flex;overflow:visible}._pagination-dots--horizontal_1r0u8_6{flex-direction:row;align-items:center}._pagination-dots--vertical_1r0u8_10{flex-direction:column;justify-content:center}._pagination-dots--inverted_1r0u8_14 ._pagination-dots__dot_1r0u8_14{background-color:rgba(var(--sidebar-text-rgb),.4)}._pagination-dots--inverted_1r0u8_14 ._pagination-dots__dot--active_1r0u8_17{background-color:var(--sidebar-text);box-shadow:0 0 0 4px rgba(var(--sidebar-text-rgb),.16)}._pagination-dots--on-primary_1r0u8_21{--focus-ring-color: var(--button-color)}._pagination-dots--on-primary_1r0u8_21 ._pagination-dots__dot_1r0u8_14{background-color:rgba(var(--button-color-rgb),.4)}._pagination-dots--on-primary_1r0u8_21 ._pagination-dots__dot--active_1r0u8_17{background-color:var(--button-color);box-shadow:0 0 0 4px rgba(var(--button-color-rgb),.24)}._pagination-dots__item_1r0u8_31{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;border-radius:var(--radius-full);cursor:pointer;flex-shrink:0;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._pagination-dots__item_1r0u8_31:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._pagination-dots__dot_1r0u8_14{display:block;width:6px;height:6px;border-radius:var(--radius-full);background-color:rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),width var(--duration-quick) var(--ease-transition),height var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._pagination-dots__dot--active_1r0u8_17{background-color:var(--button-bg);box-shadow:0 0 0 4px rgba(var(--button-bg-rgb),.16)}
+._pagination-dots_1j47i_2{display:inline-flex;overflow:visible}._pagination-dots--horizontal_1j47i_6{flex-direction:row;align-items:center}._pagination-dots--vertical_1j47i_10{flex-direction:column;justify-content:center}._pagination-dots--inverted_1j47i_14 ._pagination-dots__dot_1j47i_14{background-color:rgba(var(--sidebar-text-rgb),.4)}._pagination-dots--inverted_1j47i_14 ._pagination-dots__dot--active_1j47i_17{background-color:var(--sidebar-text);box-shadow:0 0 0 4px rgba(var(--sidebar-text-rgb),.16)}._pagination-dots--on-primary_1j47i_21{--focus-ring-color: var(--button-color)}._pagination-dots--on-primary_1j47i_21 ._pagination-dots__dot_1j47i_14{background-color:rgba(var(--button-color-rgb),.4)}._pagination-dots--on-primary_1j47i_21 ._pagination-dots__dot--active_1j47i_17{background-color:var(--button-color);box-shadow:0 0 0 4px rgba(var(--button-color-rgb),.24)}._pagination-dots__item_1j47i_31{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:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._pagination-dots__item_1j47i_31:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._pagination-dots__dot_1j47i_14{display:block;width:6px;height:6px;border-radius:var(--radius-pill);background-color:rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),width var(--duration-quick) var(--ease-transition),height var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._pagination-dots__dot--active_1j47i_17{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

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationDots.js","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":";;AAyBA,SAAwBA,EAAe;AAAA,EACrC,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAwB;AACtB,QAAMC,IAAaJ,MAAgB,YAC7BK,IAAaJ,MAAa,YAC1BK,IAAcL,MAAa,cAE3BM,IAAmBH,IACrBI,EAAO,2BAA2B,IAClCA,EAAO,6BAA6B,GAClCC,IAAaJ,IACfG,EAAO,2BAA2B,IAClCF,IACEE,EAAO,6BAA6B,IACpC;AAEN,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACTF,EAAO,iBAAiB;AAAA,QACxBD;AAAA,QACAE;AAAA,QACAN;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,MAAK;AAAA,MACL,cAAW;AAAA,MAEV,UAAA,MAAM,KAAK,EAAE,QAAQL,KAAS,CAACa,GAAGC,MAAM;AACvC,cAAMC,IAAOD,IAAI,GACXE,IAAWD,MAASd,GACpBgB,IAAW;AAAA,UACfP,EAAO,sBAAsB;AAAA,UAC7BM,IAAWN,EAAO,8BAA8B,IAAI;AAAA,QAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,eACE,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,iBAAeI;AAAA,YACf,cAAY,QAAQD,CAAI;AAAA,YACxB,WAAWL,EAAO,uBAAuB;AAAA,YACzC,SAAS,MAAMN,KAAA,gBAAAA,EAAeW;AAAA,YAE9B,UAAA,gBAAAH,EAAC,QAAA,EAAK,WAAWK,EAAA,CAAU;AAAA,UAAA;AAAA,UARtBF;AAAA,QAAA;AAAA,MAWX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"PaginationDots.js","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":";;AAwBA,MAAMA,IAAyB,CAACC,MAAiB,QAAQA,CAAI;AAO7D,SAAwBC,EAAe;AAAA,EACrC,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,iBAAAC,IAAkBV;AACpB,GAAwB;AACtB,QAAMW,IAAaN,MAAgB,YAC7BO,IAAaN,MAAa,YAC1BO,IAAcP,MAAa,cAE3BQ,IAAmBH,IACrBI,EAAO,2BAA2B,IAClCA,EAAO,6BAA6B,GAClCC,IAAaJ,IACfG,EAAO,2BAA2B,IAClCF,IACEE,EAAO,6BAA6B,IACpC;AAEN,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACTF,EAAO,iBAAiB;AAAA,QACxBD;AAAA,QACAE;AAAA,QACAR;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,MAAK;AAAA,MACL,cAAYC;AAAA,MAEX,UAAA,MAAM,KAAK,EAAE,QAAQN,KAAS,CAACe,GAAGC,MAAM;AACvC,cAAMlB,IAAOkB,IAAI,GACXC,IAAWnB,MAASG,GACpBiB,IAAW;AAAA,UACfN,EAAO,sBAAsB;AAAA,UAC7BK,IAAWL,EAAO,8BAA8B,IAAI;AAAA,QAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,eACE,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,iBAAeG;AAAA,YACf,cAAYV,EAAgBT,CAAI;AAAA,YAChC,WAAWc,EAAO,uBAAuB;AAAA,YACzC,SAAS,MAAMR,KAAA,gBAAAA,EAAeN;AAAA,YAE9B,UAAA,gBAAAgB,EAAC,QAAA,EAAK,WAAWI,EAAA,CAAU;AAAA,UAAA;AAAA,UARtBpB;AAAA,QAAA;AAAA,MAWX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PaginationDots.css');const t={"pagination-dots":"_pagination-dots_1r0u8_2","pagination-dots--horizontal":"_pagination-dots--horizontal_1r0u8_6","pagination-dots--vertical":"_pagination-dots--vertical_1r0u8_10","pagination-dots--inverted":"_pagination-dots--inverted_1r0u8_14","pagination-dots__dot":"_pagination-dots__dot_1r0u8_14","pagination-dots__dot--active":"_pagination-dots__dot--active_1r0u8_17","pagination-dots--on-primary":"_pagination-dots--on-primary_1r0u8_21","pagination-dots__item":"_pagination-dots__item_1r0u8_31"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PaginationDots.css');const i={"pagination-dots":"_pagination-dots_1j47i_2","pagination-dots--horizontal":"_pagination-dots--horizontal_1j47i_6","pagination-dots--vertical":"_pagination-dots--vertical_1j47i_10","pagination-dots--inverted":"_pagination-dots--inverted_1j47i_14","pagination-dots__dot":"_pagination-dots__dot_1j47i_14","pagination-dots__dot--active":"_pagination-dots__dot--active_1j47i_17","pagination-dots--on-primary":"_pagination-dots--on-primary_1j47i_21","pagination-dots__item":"_pagination-dots__item_1j47i_31"};exports.default=i;
 //# sourceMappingURL=PaginationDots.module.scss.cjs.map

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

@@ -1,14 +1,14 @@
-import './PaginationDots.css';const t = {
-  "pagination-dots": "_pagination-dots_1r0u8_2",
-  "pagination-dots--horizontal": "_pagination-dots--horizontal_1r0u8_6",
-  "pagination-dots--vertical": "_pagination-dots--vertical_1r0u8_10",
-  "pagination-dots--inverted": "_pagination-dots--inverted_1r0u8_14",
-  "pagination-dots__dot": "_pagination-dots__dot_1r0u8_14",
-  "pagination-dots__dot--active": "_pagination-dots__dot--active_1r0u8_17",
-  "pagination-dots--on-primary": "_pagination-dots--on-primary_1r0u8_21",
-  "pagination-dots__item": "_pagination-dots__item_1r0u8_31"
+import './PaginationDots.css';const i = {
+  "pagination-dots": "_pagination-dots_1j47i_2",
+  "pagination-dots--horizontal": "_pagination-dots--horizontal_1j47i_6",
+  "pagination-dots--vertical": "_pagination-dots--vertical_1j47i_10",
+  "pagination-dots--inverted": "_pagination-dots--inverted_1j47i_14",
+  "pagination-dots__dot": "_pagination-dots__dot_1j47i_14",
+  "pagination-dots__dot--active": "_pagination-dots__dot--active_1j47i_17",
+  "pagination-dots--on-primary": "_pagination-dots--on-primary_1j47i_21",
+  "pagination-dots__item": "_pagination-dots__item_1j47i_31"
 };
 export {
-  t as default
+  i as default
 };
 //# sourceMappingURL=PaginationDots.module.scss.js.map

package/dist/components/permalink-preview/PermalinkPreview.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("react"),N=require("../user-avatar/UserAvatar.cjs"),y=require("../message-header/MessageHeader.cjs"),q=require("../icon/Icon.cjs"),R=require("../icon-button/IconButton.cjs"),__P=require("@mattermost/compass-icons/components/close.js"),P=__P?.default??__P,s=require("./PermalinkPreview.module.scss.cjs"),S=100;function C({authorName:l="Leonard Riley",avatarSrc:p,timestamp:m="10:43 AM",messageText:f="At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.",children:v,originalChannel:_="~Desktop App",onDismiss:t,className:x=""}){const[n,h]=r.useState(!1),[d,w]=r.useState(!1),[j,k]=r.useState(0),o=r.useRef(null);r.useEffect(()=>{const i=o.current;if(!i)return;const a=()=>{const u=i.scrollHeight;k(u),w(u>S)};a();const c=new ResizeObserver(a);return c.observe(i),()=>c.disconnect()},[]);const g=[s.default["permalink-preview"],x].filter(Boolean).join(" "),b=[s.default["permalink-preview__body-clip"],d?s.default["permalink-preview__body-clip--truncated"]:"",n?s.default["permalink-preview__body-clip--expanded"]:""].filter(Boolean).join(" ");return e.jsxs("div",{className:g,children:[t!=null&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.default["permalink-preview__dismiss-bridge"],"aria-hidden":!0}),e.jsx(R.default,{className:s.default["permalink-preview__dismiss"],size:"x-small",padding:"compact","aria-label":"Remove permalink preview",icon:e.jsx(q.default,{size:"12",glyph:e.jsx(P,{})}),onClick:t})]}),e.jsxs("div",{className:s.default["permalink-preview__card"],children:[e.jsxs("div",{className:s.default["permalink-preview__message"],children:[e.jsxs("div",{className:s.default["permalink-preview__header"],children:[e.jsx(N.default,{src:p,alt:l,size:"24"}),e.jsx(y.default,{username:l,timestamp:m})]}),e.jsxs("div",{className:s.default["permalink-preview__body"],children:[e.jsx("div",{ref:o,className:b,style:{"--permalink-preview-body-height":`${j}px`},children:v??e.jsx("p",{className:s.default["permalink-preview__text"],children:f})}),d&&e.jsx("button",{className:s.default["permalink-preview__show-more"],onClick:i=>{i.stopPropagation(),h(a=>!a)},children:n?"Show less":"Show more"})]})]}),e.jsxs("p",{className:s.default["permalink-preview__origin"],children:["Originally posted in ",_]})]})]})}exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("react"),P=require("../user-avatar/UserAvatar.cjs"),S=require("../message-header/MessageHeader.cjs"),C=require("../icon/Icon.cjs"),H=require("../icon-button/IconButton.cjs"),__I=require("@mattermost/compass-icons/components/close.js"),I=__I?.default??__I,s=require("./PermalinkPreview.module.scss.cjs"),T=100;function A({authorName:l="Leonard Riley",avatarSrc:p,timestamp:m="10:43 AM",messageText:f="At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.",children:v,originalChannel:_="~Desktop App",originalChannelLabel:x,onDismiss:t,dismissLabel:h="Remove permalink preview",showMoreLabel:j="Show more",showLessLabel:w="Show less",className:g=""}){const[n,k]=r.useState(!1),[d,b]=r.useState(!1),[N,y]=r.useState(0),o=r.useRef(null);r.useEffect(()=>{const i=o.current;if(!i)return;const a=()=>{const u=i.scrollHeight;y(u),b(u>T)};a();const c=new ResizeObserver(a);return c.observe(i),()=>c.disconnect()},[]);const q=[s.default["permalink-preview"],g].filter(Boolean).join(" "),R=[s.default["permalink-preview__body-clip"],d?s.default["permalink-preview__body-clip--truncated"]:"",n?s.default["permalink-preview__body-clip--expanded"]:""].filter(Boolean).join(" ");return e.jsxs("div",{className:q,children:[t!=null&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.default["permalink-preview__dismiss-bridge"],"aria-hidden":!0}),e.jsx(H.default,{className:s.default["permalink-preview__dismiss"],size:"x-small",padding:"compact","aria-label":h,icon:e.jsx(C.default,{size:"12",glyph:e.jsx(I,{})}),onClick:t})]}),e.jsxs("div",{className:s.default["permalink-preview__card"],children:[e.jsxs("div",{className:s.default["permalink-preview__message"],children:[e.jsxs("div",{className:s.default["permalink-preview__header"],children:[e.jsx(P.default,{src:p,alt:l,size:"24"}),e.jsx(S.default,{username:l,timestamp:m})]}),e.jsxs("div",{className:s.default["permalink-preview__body"],children:[e.jsx("div",{ref:o,className:R,style:{"--permalink-preview-body-height":`${N}px`},children:v??e.jsx("p",{className:s.default["permalink-preview__text"],children:f})}),d&&e.jsx("button",{className:s.default["permalink-preview__show-more"],onClick:i=>{i.stopPropagation(),k(a=>!a)},children:n?w:j})]})]}),e.jsx("p",{className:s.default["permalink-preview__origin"],children:x??e.jsxs(e.Fragment,{children:["Originally posted in ",_]})})]})]})}exports.default=A;
 //# sourceMappingURL=PermalinkPreview.cjs.map

package/dist/components/permalink-preview/PermalinkPreview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PermalinkPreview.cjs","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MessageHeader from '@/components/message-header/MessageHeader';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './PermalinkPreview.module.scss';\n\n// Keep in sync with max-height in PermalinkPreview.module.scss __body-clip\nconst TRUNCATION_HEIGHT_PX = 100;\n\nexport interface PermalinkPreviewProps {\n  /** Sender's display name. */\n  authorName?: string;\n  /** Avatar image src. */\n  avatarSrc: string;\n  /** Timestamp label. */\n  timestamp?: string;\n  /** The quoted message body text. Ignored when `children` is provided. */\n  messageText?: string;\n  /**\n   * Rich content to render in the message body instead of the plain `messageText` string.\n   * Use this to embed structured content such as attachment cards or formatted fields.\n   * When present, `messageText` is not rendered.\n   */\n  children?: React.ReactNode;\n  /** \"Originally posted in ~Channel\" footer text. */\n  originalChannel?: string;\n  /** Called when the dismiss control is clicked. Shown on hover when provided. */\n  onDismiss?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * A Permalink Preview renders an inline card for a message that another message links to.\n * Sender, timestamp, body, and origin channel — enough context to recognise the quoted\n * message without leaving where you are.\n */\nexport default function PermalinkPreview({\n  authorName = 'Leonard Riley',\n  avatarSrc,\n  timestamp = '10:43 AM',\n  messageText = 'At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.',\n  children,\n  originalChannel = '~Desktop App',\n  onDismiss,\n  className = '',\n}: PermalinkPreviewProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [needsTruncation, setNeedsTruncation] = useState(false);\n  const [bodyHeight, setBodyHeight] = useState(0);\n  const clipRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const el = clipRef.current;\n    if (!el) return;\n    const measure = () => {\n      const full = el.scrollHeight;\n      setBodyHeight(full);\n      setNeedsTruncation(full > TRUNCATION_HEIGHT_PX);\n    };\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rootClass = [styles['permalink-preview'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const clipClass = [\n    styles['permalink-preview__body-clip'],\n    needsTruncation ? styles['permalink-preview__body-clip--truncated'] : '',\n    isExpanded ? styles['permalink-preview__body-clip--expanded'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      {onDismiss != null && (\n        <>\n          <div\n            className={styles['permalink-preview__dismiss-bridge']}\n            aria-hidden\n          />\n          <IconButton\n            className={styles['permalink-preview__dismiss']}\n            size=\"x-small\"\n            padding=\"compact\"\n            aria-label=\"Remove permalink preview\"\n            icon={<Icon size=\"12\" glyph={<CloseIcon />} />}\n            onClick={onDismiss}\n          />\n        </>\n      )}\n\n      <div className={styles['permalink-preview__card']}>\n        <div className={styles['permalink-preview__message']}>\n          <div className={styles['permalink-preview__header']}>\n            <UserAvatar src={avatarSrc} alt={authorName} size=\"24\" />\n            <MessageHeader username={authorName} timestamp={timestamp} />\n          </div>\n          <div className={styles['permalink-preview__body']}>\n            <div\n              ref={clipRef}\n              className={clipClass}\n              style={\n                {\n                  '--permalink-preview-body-height': `${bodyHeight}px`,\n                } as React.CSSProperties\n              }\n            >\n              {children ?? (\n                <p className={styles['permalink-preview__text']}>\n                  {messageText}\n                </p>\n              )}\n            </div>\n            {needsTruncation && (\n              <button\n                className={styles['permalink-preview__show-more']}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setIsExpanded((prev) => !prev);\n                }}\n              >\n                {isExpanded ? 'Show less' : 'Show more'}\n              </button>\n            )}\n          </div>\n        </div>\n        <p className={styles['permalink-preview__origin']}>\n          Originally posted in {originalChannel}\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"names":["TRUNCATION_HEIGHT_PX","PermalinkPreview","authorName","avatarSrc","timestamp","messageText","children","originalChannel","onDismiss","className","isExpanded","setIsExpanded","useState","needsTruncation","setNeedsTruncation","bodyHeight","setBodyHeight","clipRef","useRef","useEffect","el","measure","full","ro","rootClass","styles","clipClass","jsxs","Fragment","jsx","IconButton","Icon","CloseIcon","UserAvatar","MessageHeader","e","prev"],"mappings":"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"}
+{"version":3,"file":"PermalinkPreview.cjs","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MessageHeader from '@/components/message-header/MessageHeader';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './PermalinkPreview.module.scss';\n\n// Keep in sync with max-height in PermalinkPreview.module.scss __body-clip\nconst TRUNCATION_HEIGHT_PX = 100;\n\nexport interface PermalinkPreviewProps {\n  /** Sender's display name. Kept as `string`: it's also the avatar's alt text. */\n  authorName?: string;\n  /** Avatar image src. */\n  avatarSrc: string;\n  /** Timestamp label. */\n  timestamp?: React.ReactNode;\n  /** The quoted message body text. Ignored when `children` is provided. */\n  messageText?: React.ReactNode;\n  /**\n   * Rich content to render in the message body instead of the plain `messageText` string.\n   * Use this to embed structured content such as attachment cards or formatted fields.\n   * When present, `messageText` is not rendered.\n   */\n  children?: React.ReactNode;\n  /** \"Originally posted in ~Channel\" footer text. */\n  originalChannel?: React.ReactNode;\n  /**\n   * Full footer line. Default: `Originally posted in {originalChannel}`.\n   * Pass a translated node to localize the surrounding copy.\n   */\n  originalChannelLabel?: React.ReactNode;\n  /** Called when the dismiss control is clicked. Shown on hover when provided. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Remove permalink preview\". */\n  dismissLabel?: string;\n  /** Expand toggle text. Default: \"Show more\". */\n  showMoreLabel?: React.ReactNode;\n  /** Collapse toggle text. Default: \"Show less\". */\n  showLessLabel?: React.ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * A Permalink Preview renders an inline card for a message that another message links to.\n * Sender, timestamp, body, and origin channel — enough context to recognise the quoted\n * message without leaving where you are.\n */\nexport default function PermalinkPreview({\n  authorName = 'Leonard Riley',\n  avatarSrc,\n  timestamp = '10:43 AM',\n  messageText = 'At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.',\n  children,\n  originalChannel = '~Desktop App',\n  originalChannelLabel,\n  onDismiss,\n  dismissLabel = 'Remove permalink preview',\n  showMoreLabel = 'Show more',\n  showLessLabel = 'Show less',\n  className = '',\n}: PermalinkPreviewProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [needsTruncation, setNeedsTruncation] = useState(false);\n  const [bodyHeight, setBodyHeight] = useState(0);\n  const clipRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const el = clipRef.current;\n    if (!el) return;\n    const measure = () => {\n      const full = el.scrollHeight;\n      setBodyHeight(full);\n      setNeedsTruncation(full > TRUNCATION_HEIGHT_PX);\n    };\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rootClass = [styles['permalink-preview'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const clipClass = [\n    styles['permalink-preview__body-clip'],\n    needsTruncation ? styles['permalink-preview__body-clip--truncated'] : '',\n    isExpanded ? styles['permalink-preview__body-clip--expanded'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      {onDismiss != null && (\n        <>\n          <div\n            className={styles['permalink-preview__dismiss-bridge']}\n            aria-hidden\n          />\n          <IconButton\n            className={styles['permalink-preview__dismiss']}\n            size=\"x-small\"\n            padding=\"compact\"\n            aria-label={dismissLabel}\n            icon={<Icon size=\"12\" glyph={<CloseIcon />} />}\n            onClick={onDismiss}\n          />\n        </>\n      )}\n\n      <div className={styles['permalink-preview__card']}>\n        <div className={styles['permalink-preview__message']}>\n          <div className={styles['permalink-preview__header']}>\n            <UserAvatar src={avatarSrc} alt={authorName} size=\"24\" />\n            <MessageHeader username={authorName} timestamp={timestamp} />\n          </div>\n          <div className={styles['permalink-preview__body']}>\n            <div\n              ref={clipRef}\n              className={clipClass}\n              style={\n                {\n                  '--permalink-preview-body-height': `${bodyHeight}px`,\n                } as React.CSSProperties\n              }\n            >\n              {children ?? (\n                <p className={styles['permalink-preview__text']}>\n                  {messageText}\n                </p>\n              )}\n            </div>\n            {needsTruncation && (\n              <button\n                className={styles['permalink-preview__show-more']}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setIsExpanded((prev) => !prev);\n                }}\n              >\n                {isExpanded ? showLessLabel : showMoreLabel}\n              </button>\n            )}\n          </div>\n        </div>\n        <p className={styles['permalink-preview__origin']}>\n          {originalChannelLabel ?? <>Originally posted in {originalChannel}</>}\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"names":["TRUNCATION_HEIGHT_PX","PermalinkPreview","authorName","avatarSrc","timestamp","messageText","children","originalChannel","originalChannelLabel","onDismiss","dismissLabel","showMoreLabel","showLessLabel","className","isExpanded","setIsExpanded","useState","needsTruncation","setNeedsTruncation","bodyHeight","setBodyHeight","clipRef","useRef","useEffect","el","measure","full","ro","rootClass","styles","clipClass","jsxs","Fragment","jsx","IconButton","Icon","CloseIcon","UserAvatar","MessageHeader","e","prev"],"mappings":"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"}