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

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":"8aASMA,EAAuB,IAyC7B,SAAwBC,EAAiB,CACvC,WAAAC,EAAa,gBACb,UAAAC,EACA,UAAAC,EAAY,WACZ,YAAAC,EAAc,6IACd,SAAAC,EACA,gBAAAC,EAAkB,eAClB,qBAAAC,EACA,UAAAC,EACA,aAAAC,EAAe,2BACf,cAAAC,EAAgB,YAChB,cAAAC,EAAgB,YAChB,UAAAC,EAAY,EACd,EAA0B,CACxB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAS,EAAK,EAC5C,CAACC,EAAiBC,CAAkB,EAAIF,EAAAA,SAAS,EAAK,EACtD,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SAAS,CAAC,EACxCK,EAAUC,EAAAA,OAAuB,IAAI,EAE3CC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAKH,EAAQ,QACnB,GAAI,CAACG,EAAI,OACT,MAAMC,EAAU,IAAM,CACpB,MAAMC,EAAOF,EAAG,aAChBJ,EAAcM,CAAI,EAClBR,EAAmBQ,EAAO1B,CAAoB,CAChD,EACAyB,EAAA,EACA,MAAME,EAAK,IAAI,eAAeF,CAAO,EACrC,OAAAE,EAAG,QAAQH,CAAE,EACN,IAAMG,EAAG,WAAA,CAClB,EAAG,CAAA,CAAE,EAEL,MAAMC,EAAY,CAACC,UAAO,mBAAmB,EAAGhB,CAAS,EACtD,OAAO,OAAO,EACd,KAAK,GAAG,EAELiB,EAAY,CAChBD,EAAAA,QAAO,8BAA8B,EACrCZ,EAAkBY,EAAAA,QAAO,yCAAyC,EAAI,GACtEf,EAAae,EAAAA,QAAO,wCAAwC,EAAI,EAAA,EAE/D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACb,SAAA,CAAAnB,GAAa,MACZsB,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACC,UAAWJ,EAAAA,QAAO,mCAAmC,EACrD,cAAW,EAAA,CAAA,EAEbI,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWL,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,UACL,QAAQ,UACR,aAAYnB,EACZ,WAAOyB,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACG,IAAU,EAAI,EAC5C,QAAS3B,CAAA,CAAA,CACX,EACF,EAGFsB,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,yBAAyB,EAC9C,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,2BAA2B,EAChD,SAAA,CAAAI,MAACI,EAAAA,SAAW,IAAKlC,EAAW,IAAKD,EAAY,KAAK,KAAK,EACvD+B,EAAAA,IAACK,EAAAA,QAAA,CAAc,SAAUpC,EAAY,UAAAE,CAAA,CAAsB,CAAA,EAC7D,EACA2B,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,yBAAyB,EAC9C,SAAA,CAAAI,EAAAA,IAAC,MAAA,CACC,IAAKZ,EACL,UAAWS,EACX,MACE,CACE,kCAAmC,GAAGX,CAAU,IAAA,EAInD,YACCc,EAAAA,IAAC,IAAA,CAAE,UAAWJ,EAAAA,QAAO,yBAAyB,EAC3C,SAAAxB,CAAA,CACH,CAAA,CAAA,EAGHY,GACCgB,EAAAA,IAAC,SAAA,CACC,UAAWJ,EAAAA,QAAO,8BAA8B,EAChD,QAAUU,GAAM,CACdA,EAAE,gBAAA,EACFxB,EAAeyB,GAAS,CAACA,CAAI,CAC/B,EAEC,WAAa5B,EAAgBD,CAAA,CAAA,CAChC,CAAA,CAEJ,CAAA,EACF,QACC,IAAA,CAAE,UAAWkB,EAAAA,QAAO,2BAA2B,EAC7C,YAAwBE,EAAAA,KAAAC,EAAAA,SAAA,CAAE,SAAA,CAAA,wBAAsBzB,CAAA,CAAA,CAAgB,CAAA,CACnE,CAAA,CAAA,CACF,CAAA,EACF,CAEJ"}

package/dist/components/permalink-preview/PermalinkPreview.d.ts

@@ -1,13 +1,13 @@
 import { default as React } from 'react';
 export interface PermalinkPreviewProps {
-    /** Sender's display name. */
+    /** Sender's display name. Kept as `string`: it's also the avatar's alt text. */
     authorName?: string;
     /** Avatar image src. */
     avatarSrc: string;
     /** Timestamp label. */
-    timestamp?: string;
+    timestamp?: React.ReactNode;
     /** The quoted message body text. Ignored when `children` is provided. */
-    messageText?: string;
+    messageText?: React.ReactNode;
     /**
      * Rich content to render in the message body instead of the plain `messageText` string.
      * Use this to embed structured content such as attachment cards or formatted fields.
@@ -15,9 +15,20 @@ export interface PermalinkPreviewProps {
      */
     children?: React.ReactNode;
     /** "Originally posted in ~Channel" footer text. */
-    originalChannel?: string;
+    originalChannel?: React.ReactNode;
+    /**
+     * Full footer line. Default: `Originally posted in {originalChannel}`.
+     * Pass a translated node to localize the surrounding copy.
+     */
+    originalChannelLabel?: React.ReactNode;
     /** Called when the dismiss control is clicked. Shown on hover when provided. */
     onDismiss?: () => void;
+    /** Accessible name for the dismiss button. Default: "Remove permalink preview". */
+    dismissLabel?: string;
+    /** Expand toggle text. Default: "Show more". */
+    showMoreLabel?: React.ReactNode;
+    /** Collapse toggle text. Default: "Show less". */
+    showLessLabel?: React.ReactNode;
     /** Optional CSS class name. */
     className?: string;
 }
@@ -26,5 +37,5 @@ export interface PermalinkPreviewProps {
  * Sender, timestamp, body, and origin channel — enough context to recognise the quoted
  * message without leaving where you are.
  */
-export default function PermalinkPreview({ authorName, avatarSrc, timestamp, messageText, children, originalChannel, onDismiss, className, }: PermalinkPreviewProps): import("react/jsx-runtime").JSX.Element;
+export default function PermalinkPreview({ authorName, avatarSrc, timestamp, messageText, children, originalChannel, originalChannelLabel, onDismiss, dismissLabel, showMoreLabel, showLessLabel, className, }: PermalinkPreviewProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PermalinkPreview.d.ts.map

package/dist/components/permalink-preview/PermalinkPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PermalinkPreview.d.ts","sourceRoot":"","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D,MAAM,WAAW,qBAAqB;IACpC,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,UAA4B,EAC5B,SAAS,EACT,SAAsB,EACtB,WAA0J,EAC1J,QAAQ,EACR,eAAgC,EAChC,SAAS,EACT,SAAc,GACf,EAAE,qBAAqB,2CA4FvB"}
+{"version":3,"file":"PermalinkPreview.d.ts","sourceRoot":"","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D,MAAM,WAAW,qBAAqB;IACpC,gFAAgF;IAChF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mDAAmD;IACnD,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kDAAkD;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,UAA4B,EAC5B,SAAS,EACT,SAAsB,EACtB,WAA0J,EAC1J,QAAQ,EACR,eAAgC,EAChC,oBAAoB,EACpB,SAAS,EACT,YAAyC,EACzC,aAA2B,EAC3B,aAA2B,EAC3B,SAAc,GACf,EAAE,qBAAqB,2CA4FvB"}

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

@@ -1,41 +1,45 @@
-import { jsxs as r, Fragment as C, jsx as i } from "react/jsx-runtime";
-import { useState as l, useRef as H, useEffect as I } from "react";
-import R from "../user-avatar/UserAvatar.js";
-import A from "../message-header/MessageHeader.js";
-import T from "../icon/Icon.js";
-import j from "../icon-button/IconButton.js";
-import __z from "@mattermost/compass-icons/components/close.js";const z=__z&&__z.default?__z.default:__z;
+import { jsxs as r, Fragment as v, jsx as i } from "react/jsx-runtime";
+import { useState as l, useRef as T, useEffect as j } from "react";
+import z from "../user-avatar/UserAvatar.js";
+import B from "../message-header/MessageHeader.js";
+import E from "../icon/Icon.js";
+import P from "../icon-button/IconButton.js";
+import __M from "@mattermost/compass-icons/components/close.js";const M=__M&&__M.default?__M.default:__M;
 import e from "./PermalinkPreview.module.scss.js";
-const B = 100;
-function G({
+const O = 100;
+function D({
   authorName: n = "Leonard Riley",
-  avatarSrc: v,
-  timestamp: u = "10:43 AM",
-  messageText: _ = "At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.",
-  children: f,
-  originalChannel: h = "~Desktop App",
+  avatarSrc: u,
+  timestamp: _ = "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: h,
+  originalChannel: w = "~Desktop App",
+  originalChannelLabel: k,
   onDismiss: o,
-  className: w = ""
+  dismissLabel: g = "Remove permalink preview",
+  showMoreLabel: N = "Show more",
+  showLessLabel: y = "Show less",
+  className: b = ""
 }) {
-  const [t, k] = l(!1), [p, g] = l(!1), [N, y] = l(0), m = H(null);
-  I(() => {
+  const [t, x] = l(!1), [p, C] = l(!1), [H, I] = l(0), m = T(null);
+  j(() => {
     const s = m.current;
     if (!s) return;
     const a = () => {
       const d = s.scrollHeight;
-      y(d), g(d > B);
+      I(d), C(d > O);
     };
     a();
     const c = new ResizeObserver(a);
     return c.observe(s), () => c.disconnect();
   }, []);
-  const b = [e["permalink-preview"], w].filter(Boolean).join(" "), x = [
+  const R = [e["permalink-preview"], b].filter(Boolean).join(" "), A = [
     e["permalink-preview__body-clip"],
     p ? e["permalink-preview__body-clip--truncated"] : "",
     t ? e["permalink-preview__body-clip--expanded"] : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("div", { className: b, children: [
-    o != null && /* @__PURE__ */ r(C, { children: [
+  return /* @__PURE__ */ r("div", { className: R, children: [
+    o != null && /* @__PURE__ */ r(v, { children: [
       /* @__PURE__ */ i(
         "div",
         {
@@ -44,13 +48,13 @@ function G({
         }
       ),
       /* @__PURE__ */ i(
-        j,
+        P,
         {
           className: e["permalink-preview__dismiss"],
           size: "x-small",
           padding: "compact",
-          "aria-label": "Remove permalink preview",
-          icon: /* @__PURE__ */ i(T, { size: "12", glyph: /* @__PURE__ */ i(z, {}) }),
+          "aria-label": g,
+          icon: /* @__PURE__ */ i(E, { size: "12", glyph: /* @__PURE__ */ i(M, {}) }),
           onClick: o
         }
       )
@@ -58,19 +62,19 @@ function G({
     /* @__PURE__ */ r("div", { className: e["permalink-preview__card"], children: [
       /* @__PURE__ */ r("div", { className: e["permalink-preview__message"], children: [
         /* @__PURE__ */ r("div", { className: e["permalink-preview__header"], children: [
-          /* @__PURE__ */ i(R, { src: v, alt: n, size: "24" }),
-          /* @__PURE__ */ i(A, { username: n, timestamp: u })
+          /* @__PURE__ */ i(z, { src: u, alt: n, size: "24" }),
+          /* @__PURE__ */ i(B, { username: n, timestamp: _ })
         ] }),
         /* @__PURE__ */ r("div", { className: e["permalink-preview__body"], children: [
           /* @__PURE__ */ i(
             "div",
             {
               ref: m,
-              className: x,
+              className: A,
               style: {
-                "--permalink-preview-body-height": `${N}px`
+                "--permalink-preview-body-height": `${H}px`
               },
-              children: f ?? /* @__PURE__ */ i("p", { className: e["permalink-preview__text"], children: _ })
+              children: h ?? /* @__PURE__ */ i("p", { className: e["permalink-preview__text"], children: f })
             }
           ),
           p && /* @__PURE__ */ i(
@@ -78,21 +82,21 @@ function G({
             {
               className: e["permalink-preview__show-more"],
               onClick: (s) => {
-                s.stopPropagation(), k((a) => !a);
+                s.stopPropagation(), x((a) => !a);
               },
-              children: t ? "Show less" : "Show more"
+              children: t ? y : N
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ r("p", { className: e["permalink-preview__origin"], children: [
+      /* @__PURE__ */ i("p", { className: e["permalink-preview__origin"], children: k ?? /* @__PURE__ */ r(v, { children: [
         "Originally posted in ",
-        h
-      ] })
+        w
+      ] }) })
     ] })
   ] });
 }
 export {
-  G as default
+  D as default
 };
 //# sourceMappingURL=PermalinkPreview.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PermalinkPreview.js","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.js","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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"}

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__d=require("@mattermost/compass-icons/components/pin-outline.js"),d=__d?.default??__d,__l=require("@mattermost/compass-icons/components/bookmark-outline.js"),l=__l?.default??__l,a=require("../icon/Icon.cjs"),n=require("./PinnedSavedIndicators.module.scss.cjs");function r({className:s=""}){const i=[n.default["pinned-saved-indicators"],s].filter(Boolean).join(" ");return e.jsxs("div",{className:i,"aria-label":"Pinned and Saved",children:[e.jsxs("div",{className:n.default["pinned-saved-indicators__icons"],children:[e.jsx(a.default,{size:"12",glyph:e.jsx(d,{}),"aria-hidden":!0}),e.jsx(a.default,{size:"12",glyph:e.jsx(l,{}),"aria-hidden":!0})]}),e.jsxs("div",{className:n.default["pinned-saved-indicators__labels"],children:[e.jsx("span",{className:n.default["pinned-saved-indicators__label"],children:"Pinned"}),e.jsx("span",{className:n.default["pinned-saved-indicators__sep"],"aria-hidden":!0,children:"•"}),e.jsx("span",{className:n.default["pinned-saved-indicators__label"],children:"Saved"})]})]})}exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__t=require("@mattermost/compass-icons/components/pin-outline.js"),t=__t?.default??__t,__c=require("@mattermost/compass-icons/components/bookmark-outline.js"),c=__c?.default??__c,n=require("../icon/Icon.cjs"),a=require("./PinnedSavedIndicators.module.scss.cjs");function o({className:i="","aria-label":s="Pinned and Saved",pinnedLabel:d="Pinned",savedLabel:l="Saved"}){const r=[a.default["pinned-saved-indicators"],i].filter(Boolean).join(" ");return e.jsxs("div",{className:r,"aria-label":s,children:[e.jsxs("div",{className:a.default["pinned-saved-indicators__icons"],children:[e.jsx(n.default,{size:"12",glyph:e.jsx(t,{}),"aria-hidden":!0}),e.jsx(n.default,{size:"12",glyph:e.jsx(c,{}),"aria-hidden":!0})]}),e.jsxs("div",{className:a.default["pinned-saved-indicators__labels"],children:[e.jsx("span",{className:a.default["pinned-saved-indicators__label"],children:d}),e.jsx("span",{className:a.default["pinned-saved-indicators__sep"],"aria-hidden":!0,children:"•"}),e.jsx("span",{className:a.default["pinned-saved-indicators__label"],children:l})]})]})}exports.default=o;
 //# sourceMappingURL=PinnedSavedIndicators.cjs.map

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedSavedIndicators.cjs","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"sourcesContent":["import PinOutlineIcon from '@mattermost/compass-icons/components/pin-outline';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport Icon from '@/components/icon/Icon';\nimport styles from './PinnedSavedIndicators.module.scss';\n\nexport interface PinnedSavedIndicatorsProps {\n  /** Optional CSS class on the root. */\n  className?: string;\n}\n\n/**\n * Pinned + Saved row shown above a message when applicable (Patterns — Message).\n */\nexport default function PinnedSavedIndicators({\n  className = '',\n}: PinnedSavedIndicatorsProps) {\n  const rootClass = [styles['pinned-saved-indicators'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} aria-label=\"Pinned and Saved\">\n      <div className={styles['pinned-saved-indicators__icons']}>\n        <Icon size=\"12\" glyph={<PinOutlineIcon />} aria-hidden />\n        <Icon size=\"12\" glyph={<BookmarkOutlineIcon />} aria-hidden />\n      </div>\n      <div className={styles['pinned-saved-indicators__labels']}>\n        <span className={styles['pinned-saved-indicators__label']}>Pinned</span>\n        <span className={styles['pinned-saved-indicators__sep']} aria-hidden>\n          •\n        </span>\n        <span className={styles['pinned-saved-indicators__label']}>Saved</span>\n      </div>\n    </div>\n  );\n}\n"],"names":["PinnedSavedIndicators","className","rootClass","styles","jsxs","jsx","Icon","PinOutlineIcon","BookmarkOutlineIcon"],"mappings":"qWAaA,SAAwBA,EAAsB,CAC5C,UAAAC,EAAY,EACd,EAA+B,CAC7B,MAAMC,EAAY,CAACC,UAAO,yBAAyB,EAAGF,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAW,aAAW,mBACpC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,gCAAgC,EACrD,SAAA,CAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,YAAQC,EAAA,CAAA,CAAe,EAAI,cAAW,EAAA,CAAC,EACvDF,EAAAA,IAACC,EAAAA,SAAK,KAAK,KAAK,MAAOD,EAAAA,IAACG,EAAA,CAAA,CAAoB,EAAI,cAAW,EAAA,CAAC,CAAA,EAC9D,EACAJ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iCAAiC,EACtD,SAAA,CAAAE,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,gCAAgC,EAAG,SAAA,SAAM,EACjEE,EAAAA,IAAC,QAAK,UAAWF,UAAO,8BAA8B,EAAG,cAAW,GAAC,SAAA,IAErE,QACC,OAAA,CAAK,UAAWA,EAAAA,QAAO,gCAAgC,EAAG,SAAA,OAAA,CAAK,CAAA,CAAA,CAClE,CAAA,EACF,CAEJ"}
+{"version":3,"file":"PinnedSavedIndicators.cjs","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport PinOutlineIcon from '@mattermost/compass-icons/components/pin-outline';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport Icon from '@/components/icon/Icon';\nimport styles from './PinnedSavedIndicators.module.scss';\n\nexport interface PinnedSavedIndicatorsProps {\n  /** Optional CSS class on the root. */\n  className?: string;\n  /** Accessible name for the row. Default: \"Pinned and Saved\". */\n  'aria-label'?: string;\n  /** Default: \"Pinned\". */\n  pinnedLabel?: ReactNode;\n  /** Default: \"Saved\". */\n  savedLabel?: ReactNode;\n}\n\n/**\n * Pinned + Saved row shown above a message when applicable (Patterns — Message).\n */\nexport default function PinnedSavedIndicators({\n  className = '',\n  'aria-label': ariaLabel = 'Pinned and Saved',\n  pinnedLabel = 'Pinned',\n  savedLabel = 'Saved',\n}: PinnedSavedIndicatorsProps) {\n  const rootClass = [styles['pinned-saved-indicators'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} aria-label={ariaLabel}>\n      <div className={styles['pinned-saved-indicators__icons']}>\n        <Icon size=\"12\" glyph={<PinOutlineIcon />} aria-hidden />\n        <Icon size=\"12\" glyph={<BookmarkOutlineIcon />} aria-hidden />\n      </div>\n      <div className={styles['pinned-saved-indicators__labels']}>\n        <span className={styles['pinned-saved-indicators__label']}>\n          {pinnedLabel}\n        </span>\n        <span className={styles['pinned-saved-indicators__sep']} aria-hidden>\n          •\n        </span>\n        <span className={styles['pinned-saved-indicators__label']}>\n          {savedLabel}\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"names":["PinnedSavedIndicators","className","ariaLabel","pinnedLabel","savedLabel","rootClass","styles","jsxs","jsx","Icon","PinOutlineIcon","BookmarkOutlineIcon"],"mappings":"qWAoBA,SAAwBA,EAAsB,CAC5C,UAAAC,EAAY,GACZ,aAAcC,EAAY,mBAC1B,YAAAC,EAAc,SACd,WAAAC,EAAa,OACf,EAA+B,CAC7B,MAAMC,EAAY,CAACC,UAAO,yBAAyB,EAAGL,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAW,aAAYH,EACrC,SAAA,CAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,gCAAgC,EACrD,SAAA,CAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,YAAQC,EAAA,CAAA,CAAe,EAAI,cAAW,EAAA,CAAC,EACvDF,EAAAA,IAACC,EAAAA,SAAK,KAAK,KAAK,MAAOD,EAAAA,IAACG,EAAA,CAAA,CAAoB,EAAI,cAAW,EAAA,CAAC,CAAA,EAC9D,EACAJ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iCAAiC,EACtD,SAAA,CAAAE,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,gCAAgC,EACrD,SAAAH,EACH,EACAK,EAAAA,IAAC,QAAK,UAAWF,UAAO,8BAA8B,EAAG,cAAW,GAAC,SAAA,IAErE,QACC,OAAA,CAAK,UAAWA,EAAAA,QAAO,gCAAgC,EACrD,SAAAF,CAAA,CACH,CAAA,CAAA,CACF,CAAA,EACF,CAEJ"}

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.d.ts

@@ -1,9 +1,16 @@
+import { ReactNode } from 'react';
 export interface PinnedSavedIndicatorsProps {
     /** Optional CSS class on the root. */
     className?: string;
+    /** Accessible name for the row. Default: "Pinned and Saved". */
+    'aria-label'?: string;
+    /** Default: "Pinned". */
+    pinnedLabel?: ReactNode;
+    /** Default: "Saved". */
+    savedLabel?: ReactNode;
 }
 /**
  * Pinned + Saved row shown above a message when applicable (Patterns — Message).
  */
-export default function PinnedSavedIndicators({ className, }: PinnedSavedIndicatorsProps): import("react/jsx-runtime").JSX.Element;
+export default function PinnedSavedIndicators({ className, 'aria-label': ariaLabel, pinnedLabel, savedLabel, }: PinnedSavedIndicatorsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PinnedSavedIndicators.d.ts.map

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedSavedIndicators.d.ts","sourceRoot":"","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,0BAA0B;IACzC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,SAAc,GACf,EAAE,0BAA0B,2CAoB5B"}
+{"version":3,"file":"PinnedSavedIndicators.d.ts","sourceRoot":"","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,0BAA0B;IACzC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yBAAyB;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wBAAwB;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,SAAc,EACd,YAAY,EAAE,SAA8B,EAC5C,WAAsB,EACtB,UAAoB,GACrB,EAAE,0BAA0B,2CAwB5B"}

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.js

@@ -1,25 +1,28 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import __r from "@mattermost/compass-icons/components/pin-outline.js";const r=__r&&__r.default?__r.default:__r;
-import __o from "@mattermost/compass-icons/components/bookmark-outline.js";const o=__o&&__o.default?__o.default:__o;
-import a from "../icon/Icon.js";
-import e from "./PinnedSavedIndicators.module.scss.js";
-function v({
-  className: d = ""
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import __c from "@mattermost/compass-icons/components/pin-outline.js";const c=__c&&__c.default?__c.default:__c;
+import __t from "@mattermost/compass-icons/components/bookmark-outline.js";const t=__t&&__t.default?__t.default:__t;
+import n from "../icon/Icon.js";
+import a from "./PinnedSavedIndicators.module.scss.js";
+function f({
+  className: d = "",
+  "aria-label": s = "Pinned and Saved",
+  pinnedLabel: r = "Pinned",
+  savedLabel: l = "Saved"
 }) {
-  const s = [e["pinned-saved-indicators"], d].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { className: s, "aria-label": "Pinned and Saved", children: [
-    /* @__PURE__ */ n("div", { className: e["pinned-saved-indicators__icons"], children: [
-      /* @__PURE__ */ i(a, { size: "12", glyph: /* @__PURE__ */ i(r, {}), "aria-hidden": !0 }),
-      /* @__PURE__ */ i(a, { size: "12", glyph: /* @__PURE__ */ i(o, {}), "aria-hidden": !0 })
+  const o = [a["pinned-saved-indicators"], d].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("div", { className: o, "aria-label": s, children: [
+    /* @__PURE__ */ e("div", { className: a["pinned-saved-indicators__icons"], children: [
+      /* @__PURE__ */ i(n, { size: "12", glyph: /* @__PURE__ */ i(c, {}), "aria-hidden": !0 }),
+      /* @__PURE__ */ i(n, { size: "12", glyph: /* @__PURE__ */ i(t, {}), "aria-hidden": !0 })
     ] }),
-    /* @__PURE__ */ n("div", { className: e["pinned-saved-indicators__labels"], children: [
-      /* @__PURE__ */ i("span", { className: e["pinned-saved-indicators__label"], children: "Pinned" }),
-      /* @__PURE__ */ i("span", { className: e["pinned-saved-indicators__sep"], "aria-hidden": !0, children: "•" }),
-      /* @__PURE__ */ i("span", { className: e["pinned-saved-indicators__label"], children: "Saved" })
+    /* @__PURE__ */ e("div", { className: a["pinned-saved-indicators__labels"], children: [
+      /* @__PURE__ */ i("span", { className: a["pinned-saved-indicators__label"], children: r }),
+      /* @__PURE__ */ i("span", { className: a["pinned-saved-indicators__sep"], "aria-hidden": !0, children: "•" }),
+      /* @__PURE__ */ i("span", { className: a["pinned-saved-indicators__label"], children: l })
     ] })
   ] });
 }
 export {
-  v as default
+  f as default
 };
 //# sourceMappingURL=PinnedSavedIndicators.js.map

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedSavedIndicators.js","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"sourcesContent":["import PinOutlineIcon from '@mattermost/compass-icons/components/pin-outline';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport Icon from '@/components/icon/Icon';\nimport styles from './PinnedSavedIndicators.module.scss';\n\nexport interface PinnedSavedIndicatorsProps {\n  /** Optional CSS class on the root. */\n  className?: string;\n}\n\n/**\n * Pinned + Saved row shown above a message when applicable (Patterns — Message).\n */\nexport default function PinnedSavedIndicators({\n  className = '',\n}: PinnedSavedIndicatorsProps) {\n  const rootClass = [styles['pinned-saved-indicators'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} aria-label=\"Pinned and Saved\">\n      <div className={styles['pinned-saved-indicators__icons']}>\n        <Icon size=\"12\" glyph={<PinOutlineIcon />} aria-hidden />\n        <Icon size=\"12\" glyph={<BookmarkOutlineIcon />} aria-hidden />\n      </div>\n      <div className={styles['pinned-saved-indicators__labels']}>\n        <span className={styles['pinned-saved-indicators__label']}>Pinned</span>\n        <span className={styles['pinned-saved-indicators__sep']} aria-hidden>\n          •\n        </span>\n        <span className={styles['pinned-saved-indicators__label']}>Saved</span>\n      </div>\n    </div>\n  );\n}\n"],"names":["PinnedSavedIndicators","className","rootClass","styles","jsxs","jsx","Icon","PinOutlineIcon","BookmarkOutlineIcon"],"mappings":";;;;;AAaA,SAAwBA,EAAsB;AAAA,EAC5C,WAAAC,IAAY;AACd,GAA+B;AAC7B,QAAMC,IAAY,CAACC,EAAO,yBAAyB,GAAGF,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GAAW,cAAW,oBACpC,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWD,EAAO,gCAAgC,GACrD,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,MAAK,yBAAQC,GAAA,CAAA,CAAe,GAAI,eAAW,GAAA,CAAC;AAAA,MACvD,gBAAAF,EAACC,KAAK,MAAK,MAAK,OAAO,gBAAAD,EAACG,GAAA,CAAA,CAAoB,GAAI,eAAW,GAAA,CAAC;AAAA,IAAA,GAC9D;AAAA,IACA,gBAAAJ,EAAC,OAAA,EAAI,WAAWD,EAAO,iCAAiC,GACtD,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,gCAAgC,GAAG,UAAA,UAAM;AAAA,MACjE,gBAAAE,EAAC,UAAK,WAAWF,EAAO,8BAA8B,GAAG,eAAW,IAAC,UAAA,KAErE;AAAA,wBACC,QAAA,EAAK,WAAWA,EAAO,gCAAgC,GAAG,UAAA,QAAA,CAAK;AAAA,IAAA,EAAA,CAClE;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"PinnedSavedIndicators.js","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport PinOutlineIcon from '@mattermost/compass-icons/components/pin-outline';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport Icon from '@/components/icon/Icon';\nimport styles from './PinnedSavedIndicators.module.scss';\n\nexport interface PinnedSavedIndicatorsProps {\n  /** Optional CSS class on the root. */\n  className?: string;\n  /** Accessible name for the row. Default: \"Pinned and Saved\". */\n  'aria-label'?: string;\n  /** Default: \"Pinned\". */\n  pinnedLabel?: ReactNode;\n  /** Default: \"Saved\". */\n  savedLabel?: ReactNode;\n}\n\n/**\n * Pinned + Saved row shown above a message when applicable (Patterns — Message).\n */\nexport default function PinnedSavedIndicators({\n  className = '',\n  'aria-label': ariaLabel = 'Pinned and Saved',\n  pinnedLabel = 'Pinned',\n  savedLabel = 'Saved',\n}: PinnedSavedIndicatorsProps) {\n  const rootClass = [styles['pinned-saved-indicators'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} aria-label={ariaLabel}>\n      <div className={styles['pinned-saved-indicators__icons']}>\n        <Icon size=\"12\" glyph={<PinOutlineIcon />} aria-hidden />\n        <Icon size=\"12\" glyph={<BookmarkOutlineIcon />} aria-hidden />\n      </div>\n      <div className={styles['pinned-saved-indicators__labels']}>\n        <span className={styles['pinned-saved-indicators__label']}>\n          {pinnedLabel}\n        </span>\n        <span className={styles['pinned-saved-indicators__sep']} aria-hidden>\n          •\n        </span>\n        <span className={styles['pinned-saved-indicators__label']}>\n          {savedLabel}\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"names":["PinnedSavedIndicators","className","ariaLabel","pinnedLabel","savedLabel","rootClass","styles","jsxs","jsx","Icon","PinOutlineIcon","BookmarkOutlineIcon"],"mappings":";;;;;AAoBA,SAAwBA,EAAsB;AAAA,EAC5C,WAAAC,IAAY;AAAA,EACZ,cAAcC,IAAY;AAAA,EAC1B,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AACf,GAA+B;AAC7B,QAAMC,IAAY,CAACC,EAAO,yBAAyB,GAAGL,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWF,GAAW,cAAYH,GACrC,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,gCAAgC,GACrD,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,MAAK,yBAAQC,GAAA,CAAA,CAAe,GAAI,eAAW,GAAA,CAAC;AAAA,MACvD,gBAAAF,EAACC,KAAK,MAAK,MAAK,OAAO,gBAAAD,EAACG,GAAA,CAAA,CAAoB,GAAI,eAAW,GAAA,CAAC;AAAA,IAAA,GAC9D;AAAA,IACA,gBAAAJ,EAAC,OAAA,EAAI,WAAWD,EAAO,iCAAiC,GACtD,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,gCAAgC,GACrD,UAAAH,GACH;AAAA,MACA,gBAAAK,EAAC,UAAK,WAAWF,EAAO,8BAA8B,GAAG,eAAW,IAAC,UAAA,KAErE;AAAA,wBACC,QAAA,EAAK,WAAWA,EAAO,gCAAgC,GACrD,UAAAF,EAAA,CACH;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}