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

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

@@ -0,0 +1,3 @@
+export { default as Modal } from './Modal';
+export type { ModalBodyPadding, ModalFooterType, ModalProps, ModalSize, ModalSubtitlePlacement, } from './Modal';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,SAAS,EACT,sBAAsB,GACvB,MAAM,SAAS,CAAC"}

package/dist/components/modal/index.js

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

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

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

package/dist/components/modal-footer/ModalFooter.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),e=require("./ModalFooter.module.scss.cjs");function n({className:r="",type:l="2-actions",divider:i=!0,leading:a,children:d}){const t=l==="spacer-small"||l==="spacer-large",s=i&&!t,u=e.default[`modal-footer--type-${l}`];return o.jsx("div",{className:[e.default["modal-footer"],u,s&&e.default["modal-footer--divider"],!s&&!t&&e.default["modal-footer--no-divider"],r].filter(Boolean).join(" "),children:!t&&o.jsxs("div",{className:e.default["modal-footer__content"],children:[a!=null&&o.jsx("div",{className:e.default["modal-footer__leading"],children:a}),d!=null&&o.jsx("div",{className:e.default["modal-footer__actions"],children:d})]})})}exports.default=n;
+//# sourceMappingURL=ModalFooter.cjs.map

package/dist/components/modal-footer/ModalFooter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.cjs","sources":["../../../src/components/modal-footer/ModalFooter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './ModalFooter.module.scss';\n\n/**\n * Figma Modal Footer Type (kebab-case).\n * - `2-actions` / `1-action` — children end-aligned\n * - `2-actions-separated` — space-between (first child start, rest end… or use `leading`)\n * - `pagination` / `stepped-progress` — `leading` on the left, `children` on the right\n * - `spacer-small` / `spacer-large` — empty padding only\n */\nexport type ModalFooterType =\n  | '2-actions'\n  | '2-actions-separated'\n  | '1-action'\n  | 'pagination'\n  | 'stepped-progress'\n  | 'spacer-small'\n  | 'spacer-large';\n\nexport interface ModalFooterProps {\n  className?: string;\n  /** Layout variant. Figma: Type. Default: `2-actions`. */\n  type?: ModalFooterType;\n  /** Top border. Figma: Divider = On. Default: true (ignored for spacers). */\n  divider?: boolean;\n  /** Left slot — pagination status text, PaginationDots, etc. */\n  leading?: ReactNode;\n  /** Action buttons (or empty for spacers). */\n  children?: ReactNode;\n}\n\n/**\n * Modal Footer chrome — padding, optional divider, and layout for actions /\n * pagination / stepped progress / spacers. Pass Buttons (or other controls) as\n * children; host owns labels and handlers.\n *\n * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=797-8156\n */\nexport default function ModalFooter({\n  className = '',\n  type = '2-actions',\n  divider = true,\n  leading,\n  children,\n}: ModalFooterProps) {\n  const isSpacer = type === 'spacer-small' || type === 'spacer-large';\n  const showDivider = divider && !isSpacer;\n  const typeClass = styles[`modal-footer--type-${type}`];\n\n  return (\n    <div\n      className={[\n        styles['modal-footer'],\n        typeClass,\n        showDivider && styles['modal-footer--divider'],\n        !showDivider && !isSpacer && styles['modal-footer--no-divider'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {!isSpacer && (\n        <div className={styles['modal-footer__content']}>\n          {leading != null && (\n            <div className={styles['modal-footer__leading']}>{leading}</div>\n          )}\n          {children != null && (\n            <div className={styles['modal-footer__actions']}>{children}</div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["ModalFooter","className","type","divider","leading","children","isSpacer","showDivider","typeClass","styles","jsx","jsxs"],"mappings":"4LAsCA,SAAwBA,EAAY,CAClC,UAAAC,EAAY,GACZ,KAAAC,EAAO,YACP,QAAAC,EAAU,GACV,QAAAC,EACA,SAAAC,CACF,EAAqB,CACnB,MAAMC,EAAWJ,IAAS,gBAAkBA,IAAS,eAC/CK,EAAcJ,GAAW,CAACG,EAC1BE,EAAYC,EAAAA,QAAO,sBAAsBP,CAAI,EAAE,EAErD,OACEQ,EAAAA,IAAC,MAAA,CACC,UAAW,CACTD,EAAAA,QAAO,cAAc,EACrBD,EACAD,GAAeE,EAAAA,QAAO,uBAAuB,EAC7C,CAACF,GAAe,CAACD,GAAYG,EAAAA,QAAO,0BAA0B,EAC9DR,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,UAACK,GACAK,EAAAA,KAAC,OAAI,UAAWF,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAL,GAAW,MACVM,MAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAAI,SAAAL,EAAQ,EAE3DC,GAAY,MACXK,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAAI,SAAAJ,CAAA,CAAS,CAAA,CAAA,CAE/D,CAAA,CAAA,CAIR"}

package/dist/components/modal-footer/ModalFooter.css

@@ -0,0 +1 @@
+._modal-footer_1yi4a_2{display:flex;flex-direction:column;flex-shrink:0;align-items:stretch}._modal-footer--divider_1yi4a_8{border-top:1px solid rgba(var(--center-channel-color-rgb),.12)}._modal-footer--no-divider_1yi4a_11 ._modal-footer__content_1yi4a_11{padding-top:0}._modal-footer__content_1yi4a_11{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-xs);width:100%;padding:var(--spacing-xxl) var(--spacing-xxxl)}._modal-footer__leading_1yi4a_22{flex:1 1 auto;min-width:0;display:flex;align-items:center;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64)}._modal-footer__actions_1yi4a_33{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:var(--spacing-xs)}._modal-footer--type-2-actions-separated_1yi4a_40 ._modal-footer__content_1yi4a_11{justify-content:space-between}._modal-footer--type-2-actions-separated_1yi4a_40 ._modal-footer__actions_1yi4a_33:only-child{flex:1 1 auto;justify-content:space-between}._modal-footer--type-pagination_1yi4a_47 ._modal-footer__content_1yi4a_11,._modal-footer--type-stepped-progress_1yi4a_47 ._modal-footer__content_1yi4a_11{justify-content:space-between}._modal-footer--type-spacer-small_1yi4a_50{padding:var(--spacing-l);min-height:calc(var(--spacing-l) * 2)}._modal-footer--type-spacer-large_1yi4a_54{padding:var(--spacing-xxl);min-height:calc(var(--spacing-xxl) * 2)}

package/dist/components/modal-footer/ModalFooter.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+/**
+ * Figma Modal Footer Type (kebab-case).
+ * - `2-actions` / `1-action` — children end-aligned
+ * - `2-actions-separated` — space-between (first child start, rest end… or use `leading`)
+ * - `pagination` / `stepped-progress` — `leading` on the left, `children` on the right
+ * - `spacer-small` / `spacer-large` — empty padding only
+ */
+export type ModalFooterType = '2-actions' | '2-actions-separated' | '1-action' | 'pagination' | 'stepped-progress' | 'spacer-small' | 'spacer-large';
+export interface ModalFooterProps {
+    className?: string;
+    /** Layout variant. Figma: Type. Default: `2-actions`. */
+    type?: ModalFooterType;
+    /** Top border. Figma: Divider = On. Default: true (ignored for spacers). */
+    divider?: boolean;
+    /** Left slot — pagination status text, PaginationDots, etc. */
+    leading?: ReactNode;
+    /** Action buttons (or empty for spacers). */
+    children?: ReactNode;
+}
+/**
+ * Modal Footer chrome — padding, optional divider, and layout for actions /
+ * pagination / stepped progress / spacers. Pass Buttons (or other controls) as
+ * children; host owns labels and handlers.
+ *
+ * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=797-8156
+ */
+export default function ModalFooter({ className, type, divider, leading, children, }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalFooter.d.ts.map

package/dist/components/modal-footer/ModalFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../src/components/modal-footer/ModalFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,qBAAqB,GACrB,UAAU,GACV,YAAY,GACZ,kBAAkB,GAClB,cAAc,GACd,cAAc,CAAC;AAEnB,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAc,EACd,IAAkB,EAClB,OAAc,EACd,OAAO,EACP,QAAQ,GACT,EAAE,gBAAgB,2CA6BlB"}

package/dist/components/modal-footer/ModalFooter.js

@@ -0,0 +1,31 @@
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import o from "./ModalFooter.module.scss.js";
+function v({
+  className: d = "",
+  type: e = "2-actions",
+  divider: i = !0,
+  leading: r,
+  children: s
+}) {
+  const a = e === "spacer-small" || e === "spacer-large", t = i && !a, n = o[`modal-footer--type-${e}`];
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: [
+        o["modal-footer"],
+        n,
+        t && o["modal-footer--divider"],
+        !t && !a && o["modal-footer--no-divider"],
+        d
+      ].filter(Boolean).join(" "),
+      children: !a && /* @__PURE__ */ c("div", { className: o["modal-footer__content"], children: [
+        r != null && /* @__PURE__ */ l("div", { className: o["modal-footer__leading"], children: r }),
+        s != null && /* @__PURE__ */ l("div", { className: o["modal-footer__actions"], children: s })
+      ] })
+    }
+  );
+}
+export {
+  v as default
+};
+//# sourceMappingURL=ModalFooter.js.map

package/dist/components/modal-footer/ModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.js","sources":["../../../src/components/modal-footer/ModalFooter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './ModalFooter.module.scss';\n\n/**\n * Figma Modal Footer Type (kebab-case).\n * - `2-actions` / `1-action` — children end-aligned\n * - `2-actions-separated` — space-between (first child start, rest end… or use `leading`)\n * - `pagination` / `stepped-progress` — `leading` on the left, `children` on the right\n * - `spacer-small` / `spacer-large` — empty padding only\n */\nexport type ModalFooterType =\n  | '2-actions'\n  | '2-actions-separated'\n  | '1-action'\n  | 'pagination'\n  | 'stepped-progress'\n  | 'spacer-small'\n  | 'spacer-large';\n\nexport interface ModalFooterProps {\n  className?: string;\n  /** Layout variant. Figma: Type. Default: `2-actions`. */\n  type?: ModalFooterType;\n  /** Top border. Figma: Divider = On. Default: true (ignored for spacers). */\n  divider?: boolean;\n  /** Left slot — pagination status text, PaginationDots, etc. */\n  leading?: ReactNode;\n  /** Action buttons (or empty for spacers). */\n  children?: ReactNode;\n}\n\n/**\n * Modal Footer chrome — padding, optional divider, and layout for actions /\n * pagination / stepped progress / spacers. Pass Buttons (or other controls) as\n * children; host owns labels and handlers.\n *\n * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=797-8156\n */\nexport default function ModalFooter({\n  className = '',\n  type = '2-actions',\n  divider = true,\n  leading,\n  children,\n}: ModalFooterProps) {\n  const isSpacer = type === 'spacer-small' || type === 'spacer-large';\n  const showDivider = divider && !isSpacer;\n  const typeClass = styles[`modal-footer--type-${type}`];\n\n  return (\n    <div\n      className={[\n        styles['modal-footer'],\n        typeClass,\n        showDivider && styles['modal-footer--divider'],\n        !showDivider && !isSpacer && styles['modal-footer--no-divider'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {!isSpacer && (\n        <div className={styles['modal-footer__content']}>\n          {leading != null && (\n            <div className={styles['modal-footer__leading']}>{leading}</div>\n          )}\n          {children != null && (\n            <div className={styles['modal-footer__actions']}>{children}</div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["ModalFooter","className","type","divider","leading","children","isSpacer","showDivider","typeClass","styles","jsx","jsxs"],"mappings":";;AAsCA,SAAwBA,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,UAAAC;AACF,GAAqB;AACnB,QAAMC,IAAWJ,MAAS,kBAAkBA,MAAS,gBAC/CK,IAAcJ,KAAW,CAACG,GAC1BE,IAAYC,EAAO,sBAAsBP,CAAI,EAAE;AAErD,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACTD,EAAO,cAAc;AAAA,QACrBD;AAAA,QACAD,KAAeE,EAAO,uBAAuB;AAAA,QAC7C,CAACF,KAAe,CAACD,KAAYG,EAAO,0BAA0B;AAAA,QAC9DR;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEV,WAACK,KACA,gBAAAK,EAAC,SAAI,WAAWF,EAAO,uBAAuB,GAC3C,UAAA;AAAA,QAAAL,KAAW,QACV,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAAI,UAAAL,GAAQ;AAAA,QAE3DC,KAAY,QACX,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAAI,UAAAJ,EAAA,CAAS;AAAA,MAAA,EAAA,CAE/D;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/modal-footer/ModalFooter.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ModalFooter.css');const o={"modal-footer":"_modal-footer_1yi4a_2","modal-footer--divider":"_modal-footer--divider_1yi4a_8","modal-footer--no-divider":"_modal-footer--no-divider_1yi4a_11","modal-footer__content":"_modal-footer__content_1yi4a_11","modal-footer__leading":"_modal-footer__leading_1yi4a_22","modal-footer__actions":"_modal-footer__actions_1yi4a_33","modal-footer--type-2-actions-separated":"_modal-footer--type-2-actions-separated_1yi4a_40","modal-footer--type-pagination":"_modal-footer--type-pagination_1yi4a_47","modal-footer--type-stepped-progress":"_modal-footer--type-stepped-progress_1yi4a_47","modal-footer--type-spacer-small":"_modal-footer--type-spacer-small_1yi4a_50","modal-footer--type-spacer-large":"_modal-footer--type-spacer-large_1yi4a_54"};exports.default=o;
+//# sourceMappingURL=ModalFooter.module.scss.cjs.map

package/dist/components/modal-footer/ModalFooter.module.scss.cjs.map

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

package/dist/components/modal-footer/ModalFooter.module.scss.js

@@ -0,0 +1,17 @@
+import './ModalFooter.css';const o = {
+  "modal-footer": "_modal-footer_1yi4a_2",
+  "modal-footer--divider": "_modal-footer--divider_1yi4a_8",
+  "modal-footer--no-divider": "_modal-footer--no-divider_1yi4a_11",
+  "modal-footer__content": "_modal-footer__content_1yi4a_11",
+  "modal-footer__leading": "_modal-footer__leading_1yi4a_22",
+  "modal-footer__actions": "_modal-footer__actions_1yi4a_33",
+  "modal-footer--type-2-actions-separated": "_modal-footer--type-2-actions-separated_1yi4a_40",
+  "modal-footer--type-pagination": "_modal-footer--type-pagination_1yi4a_47",
+  "modal-footer--type-stepped-progress": "_modal-footer--type-stepped-progress_1yi4a_47",
+  "modal-footer--type-spacer-small": "_modal-footer--type-spacer-small_1yi4a_50",
+  "modal-footer--type-spacer-large": "_modal-footer--type-spacer-large_1yi4a_54"
+};
+export {
+  o as default
+};
+//# sourceMappingURL=ModalFooter.module.scss.js.map

package/dist/components/modal-footer/ModalFooter.module.scss.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__b=require("@mattermost/compass-icons/components/close.js"),b=__b?.default??__b,__N=require("@mattermost/compass-icons/components/arrow-left.js"),N=__N?.default??__N,c=require("../icon/Icon.cjs"),n=require("../icon-button/IconButton.cjs"),a=require("./ModalHeader.module.scss.cjs");function v({className:u="",title:l,subtitle:d,subtitlePlacement:h="below",hideTitle:o=!1,titleId:s,showBackButton:m=!1,onBack:f,onClose:_,divider:j=!0,headerAction:x}){const r=!o&&l!=null,i=r&&d!=null,t=h==="beside"&&i;return e.jsx("div",{className:[a.default["modal-header"],!j&&a.default["modal-header--no-divider"],o&&a.default["modal-header--close-only"],u].filter(Boolean).join(" "),children:e.jsxs("div",{className:a.default["modal-header__content"],children:[r?e.jsxs("div",{className:a.default["modal-header__titles"],children:[e.jsxs("div",{className:a.default["modal-header__primary"],children:[m&&e.jsx(n.default,{"aria-label":"Go back",icon:e.jsx(c.default,{glyph:e.jsx(N,{}),size:"20"}),onClick:f}),e.jsx("h2",{id:s,className:a.default["modal-header__title"],children:l}),t&&e.jsxs("div",{className:a.default["modal-header__subtitle-beside"],children:[e.jsx("span",{className:a.default["modal-header__subtitle-divider"],"aria-hidden":!0}),e.jsx("p",{className:a.default["modal-header__subtitle"],children:d})]})]}),i&&!t&&e.jsx("p",{className:a.default["modal-header__subtitle"],children:d})]}):s!=null&&l!=null?e.jsx("h2",{id:s,className:a.default["modal-header__title-sr"],children:l}):null,e.jsxs("div",{className:a.default["modal-header__actions"],children:[x,e.jsx(n.default,{"aria-label":"Close",className:a.default["modal-header__close"],icon:e.jsx(c.default,{glyph:e.jsx(b,{}),size:"20"}),onClick:_})]})]})})}exports.default=v;
+//# sourceMappingURL=ModalHeader.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.cjs","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ModalHeader.module.scss';\n\nexport type ModalSubtitlePlacement = 'below' | 'beside';\n\nexport interface ModalHeaderProps {\n  className?: string;\n  /** Heading text. Omit (with `hideTitle`) for close-only headers. */\n  title?: ReactNode;\n  /** Optional secondary text — placement controlled by `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits relative to the title.\n   * Figma: Subtitle = Below | Beside. Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */\n  hideTitle?: boolean;\n  /** id for the title element — pair with dialog `aria-labelledby`. */\n  titleId?: string;\n  /** Back arrow before the title. */\n  showBackButton?: boolean;\n  onBack?: () => void;\n  /** Called when the × is clicked. */\n  onClose?: () => void;\n  /** Show bottom border. Figma: Divider = On. Default: true. */\n  divider?: boolean;\n  /**\n   * Optional control before close (Figma Controls = Button / Small Input / …).\n   * Host owns the Button, TextInput, etc.\n   */\n  headerAction?: ReactNode;\n}\n\n/**\n * Modal Header — title row, optional subtitle (below or beside), optional back,\n * optional header action, and close. Compose into `Modal` or use standalone.\n *\n * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921\n */\nexport default function ModalHeader({\n  className = '',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  titleId,\n  showBackButton = false,\n  onBack,\n  onClose,\n  divider = true,\n  headerAction,\n}: ModalHeaderProps) {\n  const showTitleBlock = !hideTitle && title != null;\n  const showSubtitle = showTitleBlock && subtitle != null;\n  const beside = subtitlePlacement === 'beside' && showSubtitle;\n\n  return (\n    <div\n      className={[\n        styles['modal-header'],\n        !divider && styles['modal-header--no-divider'],\n        hideTitle && styles['modal-header--close-only'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['modal-header__content']}>\n        {showTitleBlock ? (\n          <div className={styles['modal-header__titles']}>\n            <div className={styles['modal-header__primary']}>\n              {showBackButton && (\n                <IconButton\n                  aria-label=\"Go back\"\n                  icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n                  onClick={onBack}\n                />\n              )}\n              <h2 id={titleId} className={styles['modal-header__title']}>\n                {title}\n              </h2>\n              {beside && (\n                <div className={styles['modal-header__subtitle-beside']}>\n                  <span\n                    className={styles['modal-header__subtitle-divider']}\n                    aria-hidden\n                  />\n                  <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n                </div>\n              )}\n            </div>\n            {showSubtitle && !beside && (\n              <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        ) : titleId != null && title != null ? (\n          <h2 id={titleId} className={styles['modal-header__title-sr']}>\n            {title}\n          </h2>\n        ) : null}\n\n        <div className={styles['modal-header__actions']}>\n          {headerAction}\n          <IconButton\n            aria-label=\"Close\"\n            className={styles['modal-header__close']}\n            icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n            onClick={onClose}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["ModalHeader","className","title","subtitle","subtitlePlacement","hideTitle","titleId","showBackButton","onBack","onClose","divider","headerAction","showTitleBlock","showSubtitle","beside","jsx","styles","jsxs","IconButton","Icon","ArrowLeftIcon","CloseIcon"],"mappings":"yXA4CA,SAAwBA,EAAY,CAClC,UAAAC,EAAY,GACZ,MAAAC,EACA,SAAAC,EACA,kBAAAC,EAAoB,QACpB,UAAAC,EAAY,GACZ,QAAAC,EACA,eAAAC,EAAiB,GACjB,OAAAC,EACA,QAAAC,EACA,QAAAC,EAAU,GACV,aAAAC,CACF,EAAqB,CACnB,MAAMC,EAAiB,CAACP,GAAaH,GAAS,KACxCW,EAAeD,GAAkBT,GAAY,KAC7CW,EAASV,IAAsB,UAAYS,EAEjD,OACEE,EAAAA,IAAC,MAAA,CACC,UAAW,CACTC,EAAAA,QAAO,cAAc,EACrB,CAACN,GAAWM,EAAAA,QAAO,0BAA0B,EAC7CX,GAAaW,EAAAA,QAAO,0BAA0B,EAC9Cf,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAAgB,EAAAA,KAAC,MAAA,CAAI,UAAWD,UAAO,uBAAuB,EAC3C,SAAA,CAAAJ,EACCK,EAAAA,KAAC,MAAA,CAAI,UAAWD,UAAO,sBAAsB,EAC3C,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAT,GACCQ,EAAAA,IAACG,EAAAA,QAAA,CACC,aAAW,UACX,WAAOC,UAAA,CAAK,YAAQC,EAAA,EAAc,EAAI,KAAK,KAAK,EAChD,QAASZ,CAAA,CAAA,EAGbO,EAAAA,IAAC,MAAG,GAAIT,EAAS,UAAWU,EAAAA,QAAO,qBAAqB,EACrD,SAAAd,EACH,EACCY,GACCG,EAAAA,KAAC,MAAA,CAAI,UAAWD,UAAO,+BAA+B,EACpD,SAAA,CAAAD,EAAAA,IAAC,OAAA,CACC,UAAWC,EAAAA,QAAO,gCAAgC,EAClD,cAAW,EAAA,CAAA,QAEZ,IAAA,CAAE,UAAWA,EAAAA,QAAO,wBAAwB,EAAI,SAAAb,CAAA,CAAS,CAAA,CAAA,CAC5D,CAAA,EAEJ,EACCU,GAAgB,CAACC,GAChBC,EAAAA,IAAC,KAAE,UAAWC,EAAAA,QAAO,wBAAwB,EAAI,SAAAb,CAAA,CAAS,CAAA,CAAA,CAE9D,EACEG,GAAW,MAAQJ,GAAS,KAC9Ba,EAAAA,IAAC,KAAA,CAAG,GAAIT,EAAS,UAAWU,UAAO,wBAAwB,EACxD,WACH,EACE,KAEJC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAL,EACDI,EAAAA,IAACG,EAAAA,QAAA,CACC,aAAW,QACX,UAAWF,EAAAA,QAAO,qBAAqB,EACvC,WAAOG,UAAA,CAAK,YAAQE,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAASZ,CAAA,CAAA,CACX,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CAGN"}

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

@@ -0,0 +1 @@
+._modal-header_1aii1_2{display:flex;flex-direction:column;flex-shrink:0;border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12)}._modal-header--no-divider_1aii1_8{border-bottom:none}._modal-header--no-divider_1aii1_8 ._modal-header__content_1aii1_11{padding-bottom:0}._modal-header--close-only_1aii1_14 ._modal-header__content_1aii1_11{justify-content:flex-end}._modal-header__content_1aii1_11{display:flex;align-items:flex-start;gap:10px;width:100%;padding:var(--spacing-xxl) var(--spacing-xxxl)}._modal-header__titles_1aii1_24{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:var(--spacing-m);min-width:0;padding:var(--spacing-xxxxs) 0}._modal-header__primary_1aii1_33{display:flex;align-items:center;gap:var(--spacing-m);width:100%;min-height:var(--line-height-500)}._modal-header__title_1aii1_24{flex:1 1 auto;min-width:0;margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-500);font-weight:var(--font-weight-semibold);line-height:var(--line-height-500);color:var(--center-channel-color)}._modal-header__title-sr_1aii1_50{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}._modal-header__subtitle_1aii1_61{margin:0;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.72)}._modal-header__subtitle-beside_1aii1_69{display:flex;flex-shrink:0;align-items:center;gap:var(--spacing-xs)}._modal-header__subtitle-beside_1aii1_69 ._modal-header__subtitle_1aii1_61{line-height:var(--line-height-200);white-space:nowrap}._modal-header__subtitle-divider_1aii1_79{display:block;width:1px;height:var(--line-height-500);background-color:rgba(var(--center-channel-color-rgb),.16)}._modal-header__actions_1aii1_85{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:7px;height:28px}._modal-header__close_1aii1_93{margin-right:-12px;margin-top:-6px;margin-bottom:-6px}

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

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+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;
+    /** Called when the × is clicked. */
+    onClose?: () => void;
+    /** 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;
+}
+/**
+ * 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, onClose, divider, headerAction, }: 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;AAOvC,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,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;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,OAAO,EACP,OAAc,EACd,YAAY,GACb,EAAE,gBAAgB,2CA8DlB"}

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

@@ -0,0 +1,74 @@
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import __v from "@mattermost/compass-icons/components/close.js";const v=__v&&__v.default?__v.default:__v;
+import __y from "@mattermost/compass-icons/components/arrow-left.js";const y=__y&&__y.default?__y.default:__y;
+import n from "../icon/Icon.js";
+import h from "../icon-button/IconButton.js";
+import e from "./ModalHeader.module.scss.js";
+function g({
+  className: t = "",
+  title: o,
+  subtitle: d,
+  subtitlePlacement: _ = "below",
+  hideTitle: s = !1,
+  titleId: r,
+  showBackButton: u = !1,
+  onBack: p,
+  onClose: f,
+  divider: N = !0,
+  headerAction: b
+}) {
+  const i = !s && o != null, c = i && d != null, m = _ === "beside" && c;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: [
+        e["modal-header"],
+        !N && e["modal-header--no-divider"],
+        s && e["modal-header--close-only"],
+        t
+      ].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ l("div", { className: e["modal-header__content"], children: [
+        i ? /* @__PURE__ */ l("div", { className: e["modal-header__titles"], children: [
+          /* @__PURE__ */ l("div", { className: e["modal-header__primary"], children: [
+            u && /* @__PURE__ */ a(
+              h,
+              {
+                "aria-label": "Go back",
+                icon: /* @__PURE__ */ a(n, { glyph: /* @__PURE__ */ a(y, {}), size: "20" }),
+                onClick: p
+              }
+            ),
+            /* @__PURE__ */ a("h2", { id: r, className: e["modal-header__title"], children: o }),
+            m && /* @__PURE__ */ l("div", { className: e["modal-header__subtitle-beside"], children: [
+              /* @__PURE__ */ a(
+                "span",
+                {
+                  className: e["modal-header__subtitle-divider"],
+                  "aria-hidden": !0
+                }
+              ),
+              /* @__PURE__ */ a("p", { className: e["modal-header__subtitle"], children: d })
+            ] })
+          ] }),
+          c && !m && /* @__PURE__ */ a("p", { className: e["modal-header__subtitle"], children: d })
+        ] }) : r != null && o != null ? /* @__PURE__ */ a("h2", { id: r, className: e["modal-header__title-sr"], children: o }) : null,
+        /* @__PURE__ */ l("div", { className: e["modal-header__actions"], children: [
+          b,
+          /* @__PURE__ */ a(
+            h,
+            {
+              "aria-label": "Close",
+              className: e["modal-header__close"],
+              icon: /* @__PURE__ */ a(n, { glyph: /* @__PURE__ */ a(v, {}), size: "20" }),
+              onClick: f
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  g 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 styles from './ModalHeader.module.scss';\n\nexport type ModalSubtitlePlacement = 'below' | 'beside';\n\nexport interface ModalHeaderProps {\n  className?: string;\n  /** Heading text. Omit (with `hideTitle`) for close-only headers. */\n  title?: ReactNode;\n  /** Optional secondary text — placement controlled by `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits relative to the title.\n   * Figma: Subtitle = Below | Beside. Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */\n  hideTitle?: boolean;\n  /** id for the title element — pair with dialog `aria-labelledby`. */\n  titleId?: string;\n  /** Back arrow before the title. */\n  showBackButton?: boolean;\n  onBack?: () => void;\n  /** Called when the × is clicked. */\n  onClose?: () => void;\n  /** Show bottom border. Figma: Divider = On. Default: true. */\n  divider?: boolean;\n  /**\n   * Optional control before close (Figma Controls = Button / Small Input / …).\n   * Host owns the Button, TextInput, etc.\n   */\n  headerAction?: ReactNode;\n}\n\n/**\n * Modal Header — title row, optional subtitle (below or beside), optional back,\n * optional header action, and close. Compose into `Modal` or use standalone.\n *\n * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921\n */\nexport default function ModalHeader({\n  className = '',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  titleId,\n  showBackButton = false,\n  onBack,\n  onClose,\n  divider = true,\n  headerAction,\n}: ModalHeaderProps) {\n  const showTitleBlock = !hideTitle && title != null;\n  const showSubtitle = showTitleBlock && subtitle != null;\n  const beside = subtitlePlacement === 'beside' && showSubtitle;\n\n  return (\n    <div\n      className={[\n        styles['modal-header'],\n        !divider && styles['modal-header--no-divider'],\n        hideTitle && styles['modal-header--close-only'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['modal-header__content']}>\n        {showTitleBlock ? (\n          <div className={styles['modal-header__titles']}>\n            <div className={styles['modal-header__primary']}>\n              {showBackButton && (\n                <IconButton\n                  aria-label=\"Go back\"\n                  icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n                  onClick={onBack}\n                />\n              )}\n              <h2 id={titleId} className={styles['modal-header__title']}>\n                {title}\n              </h2>\n              {beside && (\n                <div className={styles['modal-header__subtitle-beside']}>\n                  <span\n                    className={styles['modal-header__subtitle-divider']}\n                    aria-hidden\n                  />\n                  <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n                </div>\n              )}\n            </div>\n            {showSubtitle && !beside && (\n              <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        ) : titleId != null && title != null ? (\n          <h2 id={titleId} className={styles['modal-header__title-sr']}>\n            {title}\n          </h2>\n        ) : null}\n\n        <div className={styles['modal-header__actions']}>\n          {headerAction}\n          <IconButton\n            aria-label=\"Close\"\n            className={styles['modal-header__close']}\n            icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n            onClick={onClose}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["ModalHeader","className","title","subtitle","subtitlePlacement","hideTitle","titleId","showBackButton","onBack","onClose","divider","headerAction","showTitleBlock","showSubtitle","beside","jsx","styles","jsxs","IconButton","Icon","ArrowLeftIcon","CloseIcon"],"mappings":";;;;;;AA4CA,SAAwBA,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,cAAAC;AACF,GAAqB;AACnB,QAAMC,IAAiB,CAACP,KAAaH,KAAS,MACxCW,IAAeD,KAAkBT,KAAY,MAC7CW,IAASV,MAAsB,YAAYS;AAEjD,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACTC,EAAO,cAAc;AAAA,QACrB,CAACN,KAAWM,EAAO,0BAA0B;AAAA,QAC7CX,KAAaW,EAAO,0BAA0B;AAAA,QAC9Cf;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC3C,UAAA;AAAA,QAAAJ,IACC,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,sBAAsB,GAC3C,UAAA;AAAA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC3C,UAAA;AAAA,YAAAT,KACC,gBAAAQ;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,cAAW;AAAA,gBACX,wBAAOC,GAAA,EAAK,yBAAQC,GAAA,EAAc,GAAI,MAAK,MAAK;AAAA,gBAChD,SAASZ;AAAA,cAAA;AAAA,YAAA;AAAA,YAGb,gBAAAO,EAAC,QAAG,IAAIT,GAAS,WAAWU,EAAO,qBAAqB,GACrD,UAAAd,GACH;AAAA,YACCY,KACC,gBAAAG,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACpD,UAAA;AAAA,cAAA,gBAAAD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWC,EAAO,gCAAgC;AAAA,kBAClD,eAAW;AAAA,gBAAA;AAAA,cAAA;AAAA,gCAEZ,KAAA,EAAE,WAAWA,EAAO,wBAAwB,GAAI,UAAAb,EAAA,CAAS;AAAA,YAAA,EAAA,CAC5D;AAAA,UAAA,GAEJ;AAAA,UACCU,KAAgB,CAACC,KAChB,gBAAAC,EAAC,OAAE,WAAWC,EAAO,wBAAwB,GAAI,UAAAb,EAAA,CAAS;AAAA,QAAA,EAAA,CAE9D,IACEG,KAAW,QAAQJ,KAAS,OAC9B,gBAAAa,EAAC,MAAA,EAAG,IAAIT,GAAS,WAAWU,EAAO,wBAAwB,GACxD,aACH,IACE;AAAA,QAEJ,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC3C,UAAA;AAAA,UAAAL;AAAA,UACD,gBAAAI;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,cAAW;AAAA,cACX,WAAWF,EAAO,qBAAqB;AAAA,cACvC,wBAAOG,GAAA,EAAK,yBAAQE,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,cAC5C,SAASZ;AAAA,YAAA;AAAA,UAAA;AAAA,QACX,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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_1aii1_2","modal-header--no-divider":"_modal-header--no-divider_1aii1_8","modal-header__content":"_modal-header__content_1aii1_11","modal-header--close-only":"_modal-header--close-only_1aii1_14","modal-header__titles":"_modal-header__titles_1aii1_24","modal-header__primary":"_modal-header__primary_1aii1_33","modal-header__title":"_modal-header__title_1aii1_24","modal-header__title-sr":"_modal-header__title-sr_1aii1_50","modal-header__subtitle":"_modal-header__subtitle_1aii1_61","modal-header__subtitle-beside":"_modal-header__subtitle-beside_1aii1_69","modal-header__subtitle-divider":"_modal-header__subtitle-divider_1aii1_79","modal-header__actions":"_modal-header__actions_1aii1_85","modal-header__close":"_modal-header__close_1aii1_93"};exports.default=e;
+//# 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,19 @@
+import './ModalHeader.css';const e = {
+  "modal-header": "_modal-header_1aii1_2",
+  "modal-header--no-divider": "_modal-header--no-divider_1aii1_8",
+  "modal-header__content": "_modal-header__content_1aii1_11",
+  "modal-header--close-only": "_modal-header--close-only_1aii1_14",
+  "modal-header__titles": "_modal-header__titles_1aii1_24",
+  "modal-header__primary": "_modal-header__primary_1aii1_33",
+  "modal-header__title": "_modal-header__title_1aii1_24",
+  "modal-header__title-sr": "_modal-header__title-sr_1aii1_50",
+  "modal-header__subtitle": "_modal-header__subtitle_1aii1_61",
+  "modal-header__subtitle-beside": "_modal-header__subtitle-beside_1aii1_69",
+  "modal-header__subtitle-divider": "_modal-header__subtitle-divider_1aii1_79",
+  "modal-header__actions": "_modal-header__actions_1aii1_85",
+  "modal-header__close": "_modal-header__close_1aii1_93"
+};
+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"),__d=require("@mattermost/compass-icons/components/arrow-up.js"),d=__d?.default??__d,__i=require("@mattermost/compass-icons/components/arrow-down.js"),i=__i?.default??__i,r=require("./MoreUnreadsBanner.module.scss.cjs");function c({className:s="",direction:a="up",size:o="medium",onClick:t}){const u=r.default[`more-unreads-banner--size-${o.toLowerCase()}`],l=[r.default["more-unreads-banner"],u,s].filter(Boolean).join(" ");return e.jsxs("button",{className:l,type:"button",onClick:t,children:[e.jsx("span",{className:r.default["more-unreads-banner__icon"],"aria-hidden":!0,children:a==="up"?e.jsx(n.default,{size:"12",glyph:e.jsx(d,{})}):e.jsx(n.default,{size:"12",glyph:e.jsx(i,{})})}),e.jsx("span",{className:r.default["more-unreads-banner__label"],children:"More unreads"})]})}exports.default=c;
+//# 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 Icon from '@/components/icon/Icon';\nimport ArrowUpIcon from '@mattermost/compass-icons/components/arrow-up';\nimport ArrowDownIcon from '@mattermost/compass-icons/components/arrow-down';\nimport styles from './MoreUnreadsBanner.module.scss';\n\nexport type MoreUnreadsBannerDirection = 'up' | 'down';\nexport type MoreUnreadsBannerSize = 'small' | 'medium' | 'large';\n\nexport interface MoreUnreadsBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Arrow direction. Default: Up. */\n  direction?: MoreUnreadsBannerDirection;\n  /** Size variant. Default: Medium. */\n  size?: MoreUnreadsBannerSize;\n  /** Callback when the banner is clicked. */\n  onClick?: () => void;\n}\n\n/**\n * The More Unreads Banner is the small pill that floats inside the channel sidebar to tell\n * the user there are unread channels above or below the current scroll position. One arrow,\n * one label — clicking it scrolls to the next unread.\n */\nexport default function MoreUnreadsBanner({\n  className = '',\n  direction = 'up',\n  size = 'medium',\n  onClick,\n}: MoreUnreadsBannerProps) {\n  const sizeClass = styles[`more-unreads-banner--size-${size.toLowerCase()}`];\n\n  const rootClass = [styles['more-unreads-banner'], sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type=\"button\" onClick={onClick}>\n      <span className={styles['more-unreads-banner__icon']} aria-hidden>\n        {direction === 'up' ? (\n          <Icon size=\"12\" glyph={<ArrowUpIcon />} />\n        ) : (\n          <Icon size=\"12\" glyph={<ArrowDownIcon />} />\n        )}\n      </span>\n      <span className={styles['more-unreads-banner__label']}>More unreads</span>\n    </button>\n  );\n}\n"],"names":["MoreUnreadsBanner","className","direction","size","onClick","sizeClass","styles","rootClass","jsx","Icon","ArrowUpIcon","ArrowDownIcon"],"mappings":"wVAwBA,SAAwBA,EAAkB,CACxC,UAAAC,EAAY,GACZ,UAAAC,EAAY,KACZ,KAAAC,EAAO,SACP,QAAAC,CACF,EAA2B,CACzB,MAAMC,EAAYC,EAAAA,QAAO,6BAA6BH,EAAK,YAAA,CAAa,EAAE,EAEpEI,EAAY,CAACD,UAAO,qBAAqB,EAAGD,EAAWJ,CAAS,EACnE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,cACG,SAAA,CAAO,UAAWM,EAAW,KAAK,SAAS,QAAAH,EAC1C,SAAA,CAAAI,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC9D,SAAAJ,IAAc,KACbM,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAY,CAAA,CAAI,EAExCF,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACG,EAAA,CAAA,CAAc,CAAA,CAAI,EAE9C,QACC,OAAA,CAAK,UAAWL,EAAAA,QAAO,4BAA4B,EAAG,SAAA,cAAA,CAAY,CAAA,EACrE,CAEJ"}

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

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

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

@@ -0,0 +1,21 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import n from "../icon/Icon.js";
+import __p from "@mattermost/compass-icons/components/arrow-up.js";const p=__p&&__p.default?__p.default:__p;
+import __u from "@mattermost/compass-icons/components/arrow-down.js";const u=__u&&__u.default?__u.default:__u;
+import e from "./MoreUnreadsBanner.module.scss.js";
+function w({
+  className: o = "",
+  direction: s = "up",
+  size: a = "medium",
+  onClick: t
+}) {
+  const i = e[`more-unreads-banner--size-${a.toLowerCase()}`], m = [e["more-unreads-banner"], i, o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l("button", { className: m, type: "button", onClick: t, children: [
+    /* @__PURE__ */ r("span", { className: e["more-unreads-banner__icon"], "aria-hidden": !0, children: s === "up" ? /* @__PURE__ */ r(n, { size: "12", glyph: /* @__PURE__ */ r(p, {}) }) : /* @__PURE__ */ r(n, { size: "12", glyph: /* @__PURE__ */ r(u, {}) }) }),
+    /* @__PURE__ */ r("span", { className: e["more-unreads-banner__label"], children: "More unreads" })
+  ] });
+}
+export {
+  w 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 Icon from '@/components/icon/Icon';\nimport ArrowUpIcon from '@mattermost/compass-icons/components/arrow-up';\nimport ArrowDownIcon from '@mattermost/compass-icons/components/arrow-down';\nimport styles from './MoreUnreadsBanner.module.scss';\n\nexport type MoreUnreadsBannerDirection = 'up' | 'down';\nexport type MoreUnreadsBannerSize = 'small' | 'medium' | 'large';\n\nexport interface MoreUnreadsBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Arrow direction. Default: Up. */\n  direction?: MoreUnreadsBannerDirection;\n  /** Size variant. Default: Medium. */\n  size?: MoreUnreadsBannerSize;\n  /** Callback when the banner is clicked. */\n  onClick?: () => void;\n}\n\n/**\n * The More Unreads Banner is the small pill that floats inside the channel sidebar to tell\n * the user there are unread channels above or below the current scroll position. One arrow,\n * one label — clicking it scrolls to the next unread.\n */\nexport default function MoreUnreadsBanner({\n  className = '',\n  direction = 'up',\n  size = 'medium',\n  onClick,\n}: MoreUnreadsBannerProps) {\n  const sizeClass = styles[`more-unreads-banner--size-${size.toLowerCase()}`];\n\n  const rootClass = [styles['more-unreads-banner'], sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type=\"button\" onClick={onClick}>\n      <span className={styles['more-unreads-banner__icon']} aria-hidden>\n        {direction === 'up' ? (\n          <Icon size=\"12\" glyph={<ArrowUpIcon />} />\n        ) : (\n          <Icon size=\"12\" glyph={<ArrowDownIcon />} />\n        )}\n      </span>\n      <span className={styles['more-unreads-banner__label']}>More unreads</span>\n    </button>\n  );\n}\n"],"names":["MoreUnreadsBanner","className","direction","size","onClick","sizeClass","styles","rootClass","jsx","Icon","ArrowUpIcon","ArrowDownIcon"],"mappings":";;;;;AAwBA,SAAwBA,EAAkB;AAAA,EACxC,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC;AACF,GAA2B;AACzB,QAAMC,IAAYC,EAAO,6BAA6BH,EAAK,YAAA,CAAa,EAAE,GAEpEI,IAAY,CAACD,EAAO,qBAAqB,GAAGD,GAAWJ,CAAS,EACnE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,UAAA,EAAO,WAAWM,GAAW,MAAK,UAAS,SAAAH,GAC1C,UAAA;AAAA,IAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWF,EAAO,2BAA2B,GAAG,eAAW,IAC9D,UAAAJ,MAAc,OACb,gBAAAM,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAY,EAAA,CAAI,IAExC,gBAAAF,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACG,GAAA,CAAA,CAAc,EAAA,CAAI,GAE9C;AAAA,sBACC,QAAA,EAAK,WAAWL,EAAO,4BAA4B,GAAG,UAAA,eAAA,CAAY;AAAA,EAAA,GACrE;AAEJ;"}

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"),u=require("../icon/Icon.cjs"),__i=require("@mattermost/compass-icons/components/arrow-down.js"),i=__i?.default??__i,__m=require("@mattermost/compass-icons/components/close.js"),m=__m?.default??__m,s=require("./NewMessageBanner.module.scss.cjs");function c({className:l="",type:n="jump-to-unreads",countLabel:a,onClick:t,onDismiss:r}){const d=s.default[`new-message-banner--type-${n==="jump-to-unreads"?"jump-to-unreads":"new-replies"}`],o=[s.default["new-message-banner"],d,l].filter(Boolean).join(" ");return e.jsxs("div",{className:o,children:[e.jsx("button",{className:s.default["new-message-banner__main"],type:"button",onClick:t,"aria-label":n==="jump-to-unreads"?a!=null?`Jump to unreads, ${a}`:"Jump to unreads":void 0,children:e.jsxs("span",{className:s.default["new-message-banner__left"],children:[e.jsx("span",{className:s.default["new-message-banner__icon"],"aria-hidden":!0,children:e.jsx(u.default,{size:"16",glyph:e.jsx(i,{})})}),e.jsx("span",{className:s.default["new-message-banner__jump-label"],children:n==="jump-to-unreads"?"Jump to unreads":"New replies"})]})}),n==="jump-to-unreads"&&a!=null&&e.jsx("span",{className:s.default["new-message-banner__count"],"aria-hidden":!0,children:a}),r!=null&&e.jsx("button",{className:s.default["new-message-banner__dismiss"],type:"button",onClick:r,"aria-label":"Dismiss",children:e.jsx(u.default,{size:"16",glyph:e.jsx(m,{})})})]})}exports.default=c;
+//# 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 Icon from '@/components/icon/Icon';\nimport ArrowDownIcon from '@mattermost/compass-icons/components/arrow-down';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './NewMessageBanner.module.scss';\n\nexport type NewMessageBannerType = 'jump-to-unreads' | 'new-replies';\n\nexport interface NewMessageBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls the layout. Default: JumpToUnreads. */\n  type?: NewMessageBannerType;\n  /** Unread count label text (e.g. \"21 new messages since Saturday\"). Used in JumpToUnreads type. */\n  countLabel?: string;\n  /** Called when the banner itself is clicked. */\n  onClick?: () => void;\n  /** Called when the dismiss (×) button is clicked. */\n  onDismiss?: () => void;\n}\n\n/**\n * The New Messages Banner alerts the user that there's fresh activity in the channel they're\n * reading. It floats over the message stream so they can jump to the unread region in one\n * click — or dismiss it if they'd rather keep scrolling.\n */\nexport default function NewMessageBanner({\n  className = '',\n  type = 'jump-to-unreads',\n  countLabel,\n  onClick,\n  onDismiss,\n}: NewMessageBannerProps) {\n  const typeClass =\n    styles[\n      `new-message-banner--type-${type === 'jump-to-unreads' ? 'jump-to-unreads' : 'new-replies'}`\n    ];\n\n  const rootClass = [styles['new-message-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <button\n        className={styles['new-message-banner__main']}\n        type=\"button\"\n        onClick={onClick}\n        aria-label={\n          type === 'jump-to-unreads'\n            ? countLabel != null\n              ? `Jump to unreads, ${countLabel}`\n              : 'Jump to unreads'\n            : undefined\n        }\n      >\n        <span className={styles['new-message-banner__left']}>\n          <span className={styles['new-message-banner__icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<ArrowDownIcon />} />\n          </span>\n          <span className={styles['new-message-banner__jump-label']}>\n            {type === 'jump-to-unreads' ? 'Jump to unreads' : 'New replies'}\n          </span>\n        </span>\n      </button>\n      {type === 'jump-to-unreads' && countLabel != null && (\n        <span className={styles['new-message-banner__count']} aria-hidden>\n          {countLabel}\n        </span>\n      )}\n      {onDismiss != null && (\n        <button\n          className={styles['new-message-banner__dismiss']}\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label=\"Dismiss\"\n        >\n          <Icon size=\"16\" glyph={<CloseIcon />} />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["NewMessageBanner","className","type","countLabel","onClick","onDismiss","typeClass","styles","rootClass","jsxs","jsx","Icon","ArrowDownIcon","CloseIcon"],"mappings":"oVAyBA,SAAwBA,EAAiB,CACvC,UAAAC,EAAY,GACZ,KAAAC,EAAO,kBACP,WAAAC,EACA,QAAAC,EACA,UAAAC,CACF,EAA0B,CACxB,MAAMC,EACJC,EAAAA,QACE,4BAA4BL,IAAS,kBAAoB,kBAAoB,aAAa,EAC5F,EAEIM,EAAY,CAACD,UAAO,oBAAoB,EAAGD,EAAWL,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEQ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EACd,SAAA,CAAAE,EAAAA,IAAC,SAAA,CACC,UAAWH,EAAAA,QAAO,0BAA0B,EAC5C,KAAK,SACL,QAAAH,EACA,aACEF,IAAS,kBACLC,GAAc,KACZ,oBAAoBA,CAAU,GAC9B,kBACF,OAGN,SAAAM,EAAAA,KAAC,OAAA,CAAK,UAAWF,UAAO,0BAA0B,EAChD,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC9D,SAAAG,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAc,EAAI,EAC5C,EACAF,EAAAA,IAAC,QAAK,UAAWH,UAAO,gCAAgC,EACrD,SAAAL,IAAS,kBAAoB,kBAAoB,aAAA,CACpD,CAAA,CAAA,CACF,CAAA,CAAA,EAEDA,IAAS,mBAAqBC,GAAc,MAC3CO,EAAAA,IAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC9D,SAAAJ,CAAA,CACH,EAEDE,GAAa,MACZK,EAAAA,IAAC,SAAA,CACC,UAAWH,EAAAA,QAAO,6BAA6B,EAC/C,KAAK,SACL,QAASF,EACT,aAAW,UAEX,eAACM,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACG,IAAU,CAAA,CAAI,CAAA,CAAA,CACxC,EAEJ,CAEJ"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewMessageBanner.d.ts","sourceRoot":"","sources":["../../../src/components/new-message-banner/NewMessageBanner.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,GAAG,aAAa,CAAC;AAErE,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,mGAAmG;IACnG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAc,EACd,IAAwB,EACxB,UAAU,EACV,OAAO,EACP,SAAS,GACV,EAAE,qBAAqB,2CAkDvB"}