@mattermost/compass-ui 0.1.0-alpha.2 → 0.1.0-alpha.21

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

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
+export type ModalSubtitlePlacement = 'below' | 'beside';
+export interface ModalHeaderProps {
+    className?: string;
+    /** Heading text. Omit (with `hideTitle`) for close-only headers. */
+    title?: ReactNode;
+    /** Optional secondary text — placement controlled by `subtitlePlacement`. */
+    subtitle?: ReactNode;
+    /**
+     * Where the subtitle sits relative to the title.
+     * Figma: Subtitle = Below | Beside. Default: `below`.
+     */
+    subtitlePlacement?: ModalSubtitlePlacement;
+    /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */
+    hideTitle?: boolean;
+    /** id for the title element — pair with dialog `aria-labelledby`. */
+    titleId?: string;
+    /** Back arrow before the title. */
+    showBackButton?: boolean;
+    onBack?: () => void;
+    /** Accessible name for the back button. Default: "Go back". */
+    backLabel?: string;
+    /** Extra attributes for the back button (e.g. `data-testid`). */
+    backButtonProps?: BuiltInButtonProps;
+    /** Called when the × is clicked. */
+    onClose?: () => void;
+    /** Accessible name for the close button. Default: "Close". */
+    closeLabel?: string;
+    /** Extra attributes for the close button (e.g. `data-testid`). */
+    closeButtonProps?: BuiltInButtonProps;
+    /** Show bottom border. Figma: Divider = On. Default: true. */
+    divider?: boolean;
+    /**
+     * Optional control before close (Figma Controls = Button / Small Input / …).
+     * Host owns the Button, TextInput, etc.
+     */
+    headerAction?: ReactNode;
+    /**
+     * Full-width slot rendered below the title row and above the divider.
+     * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.
+     * Padding is provided by the slot container; no extra wrapper is needed.
+     */
+    headerSlot?: ReactNode;
+}
+/**
+ * Modal Header — title row, optional subtitle (below or beside), optional back,
+ * optional header action, and close. Compose into `Modal` or use standalone.
+ *
+ * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921
+ */
+export default function ModalHeader({ className, title, subtitle, subtitlePlacement, hideTitle, titleId, showBackButton, onBack, backLabel, backButtonProps, onClose, closeLabel, closeButtonProps, divider, headerAction, headerSlot, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mCAAmC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAc,EACd,KAAK,EACL,QAAQ,EACR,iBAA2B,EAC3B,SAAiB,EACjB,OAAO,EACP,cAAsB,EACtB,MAAM,EACN,SAAqB,EACrB,eAAe,EACf,OAAO,EACP,UAAoB,EACpB,gBAAgB,EAChB,OAAc,EACd,YAAY,EACZ,UAAU,GACX,EAAE,gBAAgB,2CAuElB"}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+import './ModalHeader.css';const e = {
+  "modal-header": "_modal-header_1wwv5_2",
+  "modal-header--no-divider": "_modal-header--no-divider_1wwv5_8",
+  "modal-header__content": "_modal-header__content_1wwv5_11",
+  "modal-header--has-slot": "_modal-header--has-slot_1wwv5_14",
+  "modal-header--close-only": "_modal-header--close-only_1wwv5_17",
+  "modal-header__titles": "_modal-header__titles_1wwv5_27",
+  "modal-header__primary": "_modal-header__primary_1wwv5_36",
+  "modal-header__title": "_modal-header__title_1wwv5_27",
+  "modal-header__title-sr": "_modal-header__title-sr_1wwv5_53",
+  "modal-header__subtitle": "_modal-header__subtitle_1wwv5_64",
+  "modal-header__subtitle-beside": "_modal-header__subtitle-beside_1wwv5_72",
+  "modal-header__subtitle-divider": "_modal-header__subtitle-divider_1wwv5_82",
+  "modal-header__actions": "_modal-header__actions_1wwv5_88",
+  "modal-header__close": "_modal-header__close_1wwv5_96",
+  "modal-header__slot": "_modal-header__slot_1wwv5_101"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=ModalHeader.module.scss.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+._more-unreads-banner_1jk9k_2{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xs) var(--spacing-m);background-color:var(--mention-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._more-unreads-banner_1jk9k_2:hover{background-color:rgba(var(--mention-bg-rgb),.92);box-shadow:var(--elevation-2)}._more-unreads-banner_1jk9k_2:active{box-shadow:var(--elevation-1)}._more-unreads-banner_1jk9k_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._more-unreads-banner__icon_1jk9k_28{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mention-color)}._more-unreads-banner__label_1jk9k_35{font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--mention-color);white-space:nowrap}._more-unreads-banner--size-small_1jk9k_42{padding:var(--spacing-xxs) var(--spacing-s)}._more-unreads-banner--size-small_1jk9k_42 ._more-unreads-banner__label_1jk9k_35{font-size:var(--font-size-75)}._more-unreads-banner--size-large_1jk9k_48{padding:var(--spacing-s) var(--spacing-l)}._more-unreads-banner--size-large_1jk9k_48 ._more-unreads-banner__label_1jk9k_35{font-size:var(--font-size-100)}._more-unreads-banner--size-large_1jk9k_48 ._more-unreads-banner__icon_1jk9k_28 svg{width:var(--icon-size-16);height:var(--icon-size-16)}

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export type MoreUnreadsBannerDirection = 'up' | 'down';
+export type MoreUnreadsBannerSize = 'small' | 'medium' | 'large';
+export interface MoreUnreadsBannerProps {
+    /** Optional CSS class name. */
+    className?: string;
+    /** Arrow direction. Default: Up. */
+    direction?: MoreUnreadsBannerDirection;
+    /** Size variant. Default: Medium. */
+    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, label, }: MoreUnreadsBannerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MoreUnreadsBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,22 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import n from "../icon/Icon.js";
+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 y({
+  className: o = "",
+  direction: s = "up",
+  size: a = "medium",
+  onClick: t,
+  label: i = "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 {
+  y as default
+};
+//# sourceMappingURL=MoreUnreadsBanner.js.map

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MoreUnreadsBanner.css');const e={"more-unreads-banner":"_more-unreads-banner_1jk9k_2","more-unreads-banner__icon":"_more-unreads-banner__icon_1jk9k_28","more-unreads-banner__label":"_more-unreads-banner__label_1jk9k_35","more-unreads-banner--size-small":"_more-unreads-banner--size-small_1jk9k_42","more-unreads-banner--size-large":"_more-unreads-banner--size-large_1jk9k_48"};exports.default=e;
+//# sourceMappingURL=MoreUnreadsBanner.module.scss.cjs.map

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

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

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

@@ -0,0 +1,11 @@
+import './MoreUnreadsBanner.css';const e = {
+  "more-unreads-banner": "_more-unreads-banner_1jk9k_2",
+  "more-unreads-banner__icon": "_more-unreads-banner__icon_1jk9k_28",
+  "more-unreads-banner__label": "_more-unreads-banner__label_1jk9k_35",
+  "more-unreads-banner--size-small": "_more-unreads-banner--size-small_1jk9k_42",
+  "more-unreads-banner--size-large": "_more-unreads-banner--size-large_1jk9k_48"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=MoreUnreadsBanner.module.scss.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/more-unreads-banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,2 @@
+"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

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

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

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

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

@@ -0,0 +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. 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, 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,52 @@
+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 _(a, s) {
+  if (typeof a == "string")
+    return typeof s == "string" ? `${a}, ${s}` : a;
+}
+function C({
+  className: a = "",
+  type: s = "jump-to-unreads",
+  countLabel: r,
+  onClick: m,
+  onDismiss: o,
+  jumpLabel: t = "Jump to unreads",
+  jumpAriaLabel: u,
+  newRepliesLabel: d = "New replies",
+  dismissLabel: p = "Dismiss"
+}) {
+  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: 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" && 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: o,
+        "aria-label": p,
+        children: /* @__PURE__ */ e(l, { size: "16", glyph: /* @__PURE__ */ e(w, {}) })
+      }
+    )
+  ] });
+}
+export {
+  C as default
+};
+//# sourceMappingURL=NewMessageBanner.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import './NewMessageBanner.css';const e = {
+  "new-message-banner": "_new-message-banner_1we1b_2",
+  "new-message-banner__main": "_new-message-banner__main_1we1b_12",
+  "new-message-banner__left": "_new-message-banner__left_1we1b_28",
+  "new-message-banner__icon": "_new-message-banner__icon_1we1b_35",
+  "new-message-banner__jump-label": "_new-message-banner__jump-label_1we1b_42",
+  "new-message-banner__count": "_new-message-banner__count_1we1b_50",
+  "new-message-banner__dismiss": "_new-message-banner__dismiss_1we1b_64",
+  "new-message-banner--type-jump-to-unreads": "_new-message-banner--type-jump-to-unreads_1we1b_90",
+  "new-message-banner--type-new-replies": "_new-message-banner--type-new-replies_1we1b_94"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=NewMessageBanner.module.scss.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/new-message-banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +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  /** Accessible name for the dot list. Default: \"Pages\". */\n  label?: string;\n  /** Accessible name for each dot. Default: `Page {page}`. */\n  formatPageLabel?: (page: number) => string;\n}\n\nconst defaultFormatPageLabel = (page: number) => `Page ${page}`;\n\n/**\n * Pagination Dots indicate progress through a fixed sequence of steps — most often a\n * multi-step onboarding flow or a swipeable carousel. One dot per step, the active one\n * filled, the rest quiet.\n */\nexport default function PaginationDots({\n  pages,\n  activePage,\n  orientation = 'horizontal',\n  dotStyle = 'default',\n  onPageChange,\n  className = '',\n  label = 'Pages',\n  formatPageLabel = defaultFormatPageLabel,\n}: PaginationDotsProps) {\n  const isVertical = orientation === 'vertical';\n  const isInverted = dotStyle === 'inverted';\n  const isOnPrimary = dotStyle === 'on-primary';\n\n  const orientationClass = isVertical\n    ? styles['pagination-dots--vertical']\n    : styles['pagination-dots--horizontal'];\n  const styleClass = isInverted\n    ? styles['pagination-dots--inverted']\n    : isOnPrimary\n      ? styles['pagination-dots--on-primary']\n      : '';\n\n  return (\n    <div\n      className={[\n        styles['pagination-dots'],\n        orientationClass,\n        styleClass,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"tablist\"\n      aria-label={label}\n    >\n      {Array.from({ length: pages }, (_, i) => {\n        const page = i + 1;\n        const isActive = page === activePage;\n        const dotClass = [\n          styles['pagination-dots__dot'],\n          isActive ? styles['pagination-dots__dot--active'] : '',\n        ]\n          .filter(Boolean)\n          .join(' ');\n\n        return (\n          <button\n            key={page}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isActive}\n            aria-label={formatPageLabel(page)}\n            className={styles['pagination-dots__item']}\n            onClick={() => onPageChange?.(page)}\n          >\n            <span className={dotClass} />\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["defaultFormatPageLabel","page","PaginationDots","pages","activePage","orientation","dotStyle","onPageChange","className","label","formatPageLabel","isVertical","isInverted","isOnPrimary","orientationClass","styles","styleClass","jsx","_","i","isActive","dotClass"],"mappings":"+LAwBMA,EAA0BC,GAAiB,QAAQA,CAAI,GAO7D,SAAwBC,EAAe,CACrC,MAAAC,EACA,WAAAC,EACA,YAAAC,EAAc,aACd,SAAAC,EAAW,UACX,aAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EAAQ,QACR,gBAAAC,EAAkBV,CACpB,EAAwB,CACtB,MAAMW,EAAaN,IAAgB,WAC7BO,EAAaN,IAAa,WAC1BO,EAAcP,IAAa,aAE3BQ,EAAmBH,EACrBI,EAAAA,QAAO,2BAA2B,EAClCA,EAAAA,QAAO,6BAA6B,EAClCC,EAAaJ,EACfG,UAAO,2BAA2B,EAClCF,EACEE,EAAAA,QAAO,6BAA6B,EACpC,GAEN,OACEE,EAAAA,IAAC,MAAA,CACC,UAAW,CACTF,EAAAA,QAAO,iBAAiB,EACxBD,EACAE,EACAR,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,UACL,aAAYC,EAEX,SAAA,MAAM,KAAK,CAAE,OAAQN,GAAS,CAACe,EAAGC,IAAM,CACvC,MAAMlB,EAAOkB,EAAI,EACXC,EAAWnB,IAASG,EACpBiB,EAAW,CACfN,EAAAA,QAAO,sBAAsB,EAC7BK,EAAWL,EAAAA,QAAO,8BAA8B,EAAI,EAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,IAAC,SAAA,CAEC,KAAK,SACL,KAAK,MACL,gBAAeG,EACf,aAAYV,EAAgBT,CAAI,EAChC,UAAWc,EAAAA,QAAO,uBAAuB,EACzC,QAAS,IAAMR,GAAA,YAAAA,EAAeN,GAE9B,SAAAgB,EAAAA,IAAC,OAAA,CAAK,UAAWI,CAAA,CAAU,CAAA,EARtBpB,CAAA,CAWX,CAAC,CAAA,CAAA,CAGP"}

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

@@ -0,0 +1 @@
+._pagination-dots_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)}