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

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

@@ -1,6 +1,7 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 import { ModalFooterType } from '../modal-footer/ModalFooter';
 import { ModalSubtitlePlacement } from '../modal-header/ModalHeader';
+import { BuiltInButtonProps } from '../../utils/props';
 export type ModalSize = 'small' | 'medium' | 'large';
 /**
  * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so
@@ -9,7 +10,7 @@ export type ModalSize = 'small' | 'medium' | 'large';
  */
 export type ModalBodyPadding = 'default' | 'menu' | 'none';
 export type { ModalFooterType, ModalSubtitlePlacement };
-export interface ModalProps {
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'style'> {
     /** Extra class on the dialog root (size + chrome classes still apply). */
     className?: string;
     /** Inline style on the dialog root — prefer `className` for layout overrides. */
@@ -31,12 +32,25 @@ export interface ModalProps {
     showBackButton?: boolean;
     /** Called when the back button is clicked. */
     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 × close button 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 divider between header and body. Default: true. */
     headerDivider?: boolean;
     /** Optional control before close (Button, search field, …). */
     headerAction?: ReactNode;
+    /**
+     * Full-width slot rendered below the title row and above the header divider.
+     * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.
+     */
+    headerSlot?: ReactNode;
     /**
      * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for
      * MenuItem lists. Use `none` when the host owns padding.
@@ -62,5 +76,5 @@ export interface ModalProps {
  * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.
  * Host owns portal, overlay, focus trap, and open/close.
  */
-export default function Modal({ className, style, size, title, subtitle, subtitlePlacement, hideTitle, showBackButton, onBack, onClose, headerDivider, headerAction, bodyPadding, scrollable, children, footer, footerLeading, footerType, footerDivider, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export default function Modal({ className, style, size, title, subtitle, subtitlePlacement, hideTitle, showBackButton, onBack, backLabel, backButtonProps, onClose, closeLabel, closeButtonProps, headerDivider, headerAction, headerSlot, bodyPadding, scrollable, children, footer, footerLeading, footerType, footerDivider, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Modal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAE5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAInF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,CAAC;AAExD,MAAM,WAAW,UAAU;IACzB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oEAAoE;IACpE,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,KAAK,EACL,IAAc,EACd,KAAK,EACL,QAAQ,EACR,iBAA2B,EAC3B,SAAiB,EACjB,cAAsB,EACtB,MAAM,EACN,OAAO,EACP,aAAoB,EACpB,YAAY,EACZ,WAAuB,EACvB,UAAiB,EACjB,QAAQ,EACR,MAAM,EACN,aAAa,EACb,UAAwB,EACxB,aAAoB,GACrB,EAAE,UAAU,2CAsDZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAE5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,CAAC;AAExD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,OAAO,CAC/B;IACC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,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,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oEAAoE;IACpE,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,KAAK,EACL,IAAc,EACd,KAAK,EACL,QAAQ,EACR,iBAA2B,EAC3B,SAAiB,EACjB,cAAsB,EACtB,MAAM,EACN,SAAS,EACT,eAAe,EACf,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,aAAoB,EACpB,YAAY,EACZ,UAAU,EACV,WAAuB,EACvB,UAAiB,EACjB,QAAQ,EACR,MAAM,EACN,aAAa,EACb,UAAwB,EACxB,aAAoB,EACpB,GAAG,IAAI,EACR,EAAE,UAAU,2CA4DZ"}

package/dist/components/modal/Modal.js

@@ -1,11 +1,11 @@
-import { jsxs as z, jsx as o } from "react/jsx-runtime";
-import { useId as B } from "react";
-import C from "../scrollbar/Scrollbar.js";
-import F from "../modal-footer/ModalFooter.js";
-import g from "../modal-header/ModalHeader.js";
-import { toKebab as H } from "../../utils/string.js";
+import { jsxs as K, jsx as o } from "react/jsx-runtime";
+import { useId as S } from "react";
+import $ from "../scrollbar/Scrollbar.js";
+import k from "../modal-footer/ModalFooter.js";
+import q from "../modal-header/ModalHeader.js";
+import { toKebab as A } from "../../utils/string.js";
 import l from "./Modal.module.scss.js";
-function E({
+function U({
   className: d = "",
   style: m,
   size: t = "small",
@@ -15,33 +15,40 @@ function E({
   hideTitle: f = !1,
   showBackButton: p = !1,
   onBack: _,
-  onClose: y,
-  headerDivider: h = !0,
-  headerAction: v,
+  backLabel: y,
+  backButtonProps: h,
+  onClose: v,
+  closeLabel: j,
+  closeButtonProps: I,
+  headerDivider: x = !0,
+  headerAction: M,
+  headerSlot: N,
   bodyPadding: r = "default",
-  scrollable: j = !0,
-  children: I,
+  scrollable: w = !0,
+  children: z,
   footer: a,
   footerLeading: n,
   footerType: e = "2-actions",
-  footerDivider: x = !0
+  footerDivider: B = !0,
+  ...C
 }) {
-  const i = B(), M = l[`modal--size-${H(t)}`], N = [
+  const i = S(), F = l[`modal--size-${A(t)}`], g = [
     l["modal__body-inner"],
     r === "menu" && l["modal__body-inner--menu"],
     r === "none" && l["modal__body-inner--none"]
-  ].filter(Boolean).join(" "), s = /* @__PURE__ */ o("div", { className: N, children: I }), w = a != null || n != null || e === "spacer-small" || e === "spacer-large";
-  return /* @__PURE__ */ z(
+  ].filter(Boolean).join(" "), s = /* @__PURE__ */ o("div", { className: g, children: z }), H = a != null || n != null || e === "spacer-small" || e === "spacer-large";
+  return /* @__PURE__ */ K(
     "div",
     {
-      className: [l.modal, M, d].filter(Boolean).join(" "),
+      ...C,
+      className: [l.modal, F, d].filter(Boolean).join(" "),
       style: m,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": i,
       children: [
         /* @__PURE__ */ o(
-          g,
+          q,
           {
             title: c,
             titleId: i,
@@ -50,17 +57,22 @@ function E({
             hideTitle: f,
             showBackButton: p,
             onBack: _,
-            onClose: y,
-            divider: h,
-            headerAction: v
+            backLabel: y,
+            backButtonProps: h,
+            onClose: v,
+            closeLabel: j,
+            closeButtonProps: I,
+            divider: x,
+            headerAction: M,
+            headerSlot: N
           }
         ),
-        /* @__PURE__ */ o("div", { className: l.modal__body, children: j ? /* @__PURE__ */ o(C, { children: s }) : s }),
-        w && /* @__PURE__ */ o(
-          F,
+        /* @__PURE__ */ o("div", { className: l.modal__body, children: w ? /* @__PURE__ */ o($, { children: s }) : s }),
+        H && /* @__PURE__ */ o(
+          k,
           {
             type: e,
-            divider: x,
+            divider: B,
             leading: n,
             children: a
           }
@@ -70,6 +82,6 @@ function E({
   );
 }
 export {
-  E as default
+  U as default
 };
 //# sourceMappingURL=Modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useId } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps {\n  /** Extra class on the dialog root (size + chrome classes still apply). */\n  className?: string;\n  /** Inline style on the dialog root — prefer `className` for layout overrides. */\n  style?: CSSProperties;\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n  title: ReactNode;\n  /** Optional secondary line — placement via `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits. Figma Modal Header: Below | Beside.\n   * Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n  hideTitle?: boolean;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Called when the × close button is clicked. */\n  onClose?: () => void;\n  /** Show divider between header and body. Default: true. */\n  headerDivider?: boolean;\n  /** Optional control before close (Button, search field, …). */\n  headerAction?: ReactNode;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists. Use `none` when the host owns padding.\n   */\n  bodyPadding?: ModalBodyPadding;\n  /**\n   * When true (default), wraps body content in Scrollbar. Set false when the\n   * host manages scroll inside panes.\n   */\n  scrollable?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n  footer?: ReactNode;\n  /** Left footer slot (pagination status, PaginationDots, …). */\n  footerLeading?: ReactNode;\n  /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n  footerType?: ModalFooterType;\n  /** Show divider between body and footer. Default: true. */\n  footerDivider?: boolean;\n}\n\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Host owns portal, overlay, focus trap, and open/close.\n */\nexport default function Modal({\n  className = '',\n  style,\n  size = 'small',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  showBackButton = false,\n  onBack,\n  onClose,\n  headerDivider = true,\n  headerAction,\n  bodyPadding = 'default',\n  scrollable = true,\n  children,\n  footer,\n  footerLeading,\n  footerType = '2-actions',\n  footerDivider = true,\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const bodyInnerClass = [\n    styles['modal__body-inner'],\n    bodyPadding === 'menu' && styles['modal__body-inner--menu'],\n    bodyPadding === 'none' && styles['modal__body-inner--none'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      className={[styles.modal, sizeClass, className].filter(Boolean).join(' ')}\n      style={style}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <ModalHeader\n        title={title}\n        titleId={titleId}\n        subtitle={subtitle}\n        subtitlePlacement={subtitlePlacement}\n        hideTitle={hideTitle}\n        showBackButton={showBackButton}\n        onBack={onBack}\n        onClose={onClose}\n        divider={headerDivider}\n        headerAction={headerAction}\n      />\n\n      <div className={styles['modal__body']}>\n        {scrollable ? <Scrollbar>{bodyInner}</Scrollbar> : bodyInner}\n      </div>\n\n      {showFooter && (\n        <ModalFooter\n          type={footerType}\n          divider={footerDivider}\n          leading={footerLeading}\n        >\n          {footer}\n        </ModalFooter>\n      )}\n    </div>\n  );\n}\n"],"names":["Modal","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","onClose","headerDivider","headerAction","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter"],"mappings":";;;;;;;AA2EA,SAAwBA,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,WAAAC,IAAY;AAAA,EACZ,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,eAAAC,IAAgB;AAClB,GAAe;AACb,QAAMC,IAAUC,EAAA,GACVC,IAAYC,EAAO,eAAeC,EAAQrB,CAAI,CAAC,EAAE,GACjDsB,IAAiB;AAAA,IACrBF,EAAO,mBAAmB;AAAA,IAC1BV,MAAgB,UAAUU,EAAO,yBAAyB;AAAA,IAC1DV,MAAgB,UAAUU,EAAO,yBAAyB;AAAA,EAAA,EAEzD,OAAO,OAAO,EACd,KAAK,GAAG,GAELG,IAAY,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GAAiB,UAAAV,GAAS,GACtDa,IACJZ,KAAU,QACVC,KAAiB,QACjBC,MAAe,kBACfA,MAAe;AAEjB,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACN,EAAO,OAAOD,GAAWrB,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACxE,OAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiBkB;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAA1B;AAAA,YACA,SAAAgB;AAAA,YACA,UAAAf;AAAA,YACA,mBAAAC;AAAA,YACA,WAAAC;AAAA,YACA,gBAAAC;AAAA,YACA,QAAAC;AAAA,YACA,SAAAC;AAAA,YACA,SAASC;AAAA,YACT,cAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,gBAAAe,EAAC,OAAA,EAAI,WAAWJ,EAAO,aACpB,UAAAT,IAAa,gBAAAa,EAACI,GAAA,EAAW,UAAAL,EAAA,CAAU,IAAeA,GACrD;AAAA,QAECE,KACC,gBAAAD;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAMd;AAAA,YACN,SAASC;AAAA,YACT,SAASF;AAAA,YAER,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\nimport { useId } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'style'\n> {\n  /** Extra class on the dialog root (size + chrome classes still apply). */\n  className?: string;\n  /** Inline style on the dialog root — prefer `className` for layout overrides. */\n  style?: CSSProperties;\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n  title: ReactNode;\n  /** Optional secondary line — placement via `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits. Figma Modal Header: Below | Beside.\n   * Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n  hideTitle?: boolean;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\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 × close button 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 divider between header and body. Default: true. */\n  headerDivider?: boolean;\n  /** Optional control before close (Button, search field, …). */\n  headerAction?: ReactNode;\n  /**\n   * Full-width slot rendered below the title row and above the header divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   */\n  headerSlot?: ReactNode;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists. Use `none` when the host owns padding.\n   */\n  bodyPadding?: ModalBodyPadding;\n  /**\n   * When true (default), wraps body content in Scrollbar. Set false when the\n   * host manages scroll inside panes.\n   */\n  scrollable?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n  footer?: ReactNode;\n  /** Left footer slot (pagination status, PaginationDots, …). */\n  footerLeading?: ReactNode;\n  /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n  footerType?: ModalFooterType;\n  /** Show divider between body and footer. Default: true. */\n  footerDivider?: boolean;\n}\n\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Host owns portal, overlay, focus trap, and open/close.\n */\nexport default function Modal({\n  className = '',\n  style,\n  size = 'small',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  showBackButton = false,\n  onBack,\n  backLabel,\n  backButtonProps,\n  onClose,\n  closeLabel,\n  closeButtonProps,\n  headerDivider = true,\n  headerAction,\n  headerSlot,\n  bodyPadding = 'default',\n  scrollable = true,\n  children,\n  footer,\n  footerLeading,\n  footerType = '2-actions',\n  footerDivider = true,\n  ...rest\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const bodyInnerClass = [\n    styles['modal__body-inner'],\n    bodyPadding === 'menu' && styles['modal__body-inner--menu'],\n    bodyPadding === 'none' && styles['modal__body-inner--none'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      {...rest}\n      className={[styles.modal, sizeClass, className].filter(Boolean).join(' ')}\n      style={style}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <ModalHeader\n        title={title}\n        titleId={titleId}\n        subtitle={subtitle}\n        subtitlePlacement={subtitlePlacement}\n        hideTitle={hideTitle}\n        showBackButton={showBackButton}\n        onBack={onBack}\n        backLabel={backLabel}\n        backButtonProps={backButtonProps}\n        onClose={onClose}\n        closeLabel={closeLabel}\n        closeButtonProps={closeButtonProps}\n        divider={headerDivider}\n        headerAction={headerAction}\n        headerSlot={headerSlot}\n      />\n\n      <div className={styles['modal__body']}>\n        {scrollable ? <Scrollbar>{bodyInner}</Scrollbar> : bodyInner}\n      </div>\n\n      {showFooter && (\n        <ModalFooter\n          type={footerType}\n          divider={footerDivider}\n          leading={footerLeading}\n        >\n          {footer}\n        </ModalFooter>\n      )}\n    </div>\n  );\n}\n"],"names":["Modal","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","headerDivider","headerAction","headerSlot","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","rest","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter"],"mappings":";;;;;;;AA4FA,SAAwBA,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,WAAAC,IAAY;AAAA,EACZ,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,eAAAC,IAAgB;AAAA,EAChB,GAAGC;AACL,GAAe;AACb,QAAMC,IAAUC,EAAA,GACVC,IAAYC,EAAO,eAAeC,EAAQ3B,CAAI,CAAC,EAAE,GACjD4B,IAAiB;AAAA,IACrBF,EAAO,mBAAmB;AAAA,IAC1BX,MAAgB,UAAUW,EAAO,yBAAyB;AAAA,IAC1DX,MAAgB,UAAUW,EAAO,yBAAyB;AAAA,EAAA,EAEzD,OAAO,OAAO,EACd,KAAK,GAAG,GAELG,IAAY,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GAAiB,UAAAX,GAAS,GACtDc,IACJb,KAAU,QACVC,KAAiB,QACjBC,MAAe,kBACfA,MAAe;AAEjB,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGV;AAAA,MACJ,WAAW,CAACI,EAAO,OAAOD,GAAW3B,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACxE,OAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiBwB;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAAhC;AAAA,YACA,SAAAsB;AAAA,YACA,UAAArB;AAAA,YACA,mBAAAC;AAAA,YACA,WAAAC;AAAA,YACA,gBAAAC;AAAA,YACA,QAAAC;AAAA,YACA,WAAAC;AAAA,YACA,iBAAAC;AAAA,YACA,SAAAC;AAAA,YACA,YAAAC;AAAA,YACA,kBAAAC;AAAA,YACA,SAASC;AAAA,YACT,cAAAC;AAAA,YACA,YAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,gBAAAgB,EAAC,OAAA,EAAI,WAAWJ,EAAO,aACpB,UAAAV,IAAa,gBAAAc,EAACI,GAAA,EAAW,UAAAL,EAAA,CAAU,IAAeA,GACrD;AAAA,QAECE,KACC,gBAAAD;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAMf;AAAA,YACN,SAASC;AAAA,YACT,SAASF;AAAA,YAER,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

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

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

@@ -1 +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"}
+{"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 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":"4ZA4DA,SAAwBA,EAAY,CAClC,UAAAC,EAAY,GACZ,MAAAC,EACA,SAAAC,EACA,kBAAAC,EAAoB,QACpB,UAAAC,EAAY,GACZ,QAAAC,EACA,eAAAC,EAAiB,GACjB,OAAAC,EACA,UAAAC,EAAY,UACZ,gBAAAC,EACA,QAAAC,EACA,WAAAC,EAAa,QACb,iBAAAC,EACA,QAAAC,EAAU,GACV,aAAAC,EACA,WAAAC,CACF,EAAqB,CACnB,MAAMC,EAAiB,CAACZ,GAAaH,GAAS,KACxCgB,EAAeD,GAAkBd,GAAY,KAC7CgB,EAASf,IAAsB,UAAYc,EAEjD,OACEE,EAAAA,KAAC,MAAA,CACC,UAAW,CACTC,EAAAA,QAAO,cAAc,EACrB,CAACP,GAAWO,EAAAA,QAAO,0BAA0B,EAC7ChB,GAAagB,EAAAA,QAAO,0BAA0B,EAC9CL,GAAcK,EAAAA,QAAO,wBAAwB,EAC7CpB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAmB,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAJ,EACCG,EAAAA,KAAC,MAAA,CAAI,UAAWC,UAAO,sBAAsB,EAC3C,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAd,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGb,EACJ,aAAYD,EACZ,WAAOe,UAAA,CAAK,YAAQC,EAAA,EAAc,EAAI,KAAK,KAAK,EAChD,QAASjB,CAAA,CAAA,EAGbc,EAAAA,IAAC,MAAG,GAAIhB,EAAS,UAAWe,EAAAA,QAAO,qBAAqB,EACrD,SAAAnB,EACH,EACCiB,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAWC,UAAO,+BAA+B,EACpD,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAAA,QAAO,gCAAgC,EAClD,cAAW,EAAA,CAAA,QAEZ,IAAA,CAAE,UAAWA,EAAAA,QAAO,wBAAwB,EAAI,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAC5D,CAAA,EAEJ,EACCe,GAAgB,CAACC,GAChBG,EAAAA,IAAC,KAAE,UAAWD,EAAAA,QAAO,wBAAwB,EAAI,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAE9D,EACEG,GAAW,MAAQJ,GAAS,KAC9BoB,EAAAA,IAAC,KAAA,CAAG,GAAIhB,EAAS,UAAWe,UAAO,wBAAwB,EACxD,WACH,EACE,KAEJD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAN,EACDO,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGV,EACJ,aAAYD,EACZ,UAAWc,EAAAA,gBACTL,EAAAA,QAAO,qBAAqB,EAC5BR,GAAA,YAAAA,EAAkB,SAAA,EAEpB,WAAOW,UAAA,CAAK,YAAQG,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAAShB,CAAA,CAAA,CACX,CAAA,CACF,CAAA,EACF,EACCK,GACCM,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,oBAAoB,EAAI,SAAAL,CAAA,CAAW,CAAA,CAAA,CAAA,CAIlE"}

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

@@ -1 +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}
+._modal-header_n5mn4_2{display:flex;flex-direction:column;flex-shrink:0;border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12)}._modal-header--no-divider_n5mn4_8{border-bottom:none}._modal-header--no-divider_n5mn4_8 ._modal-header__content_n5mn4_11,._modal-header--has-slot_n5mn4_14 ._modal-header__content_n5mn4_11{padding-bottom:0}._modal-header--close-only_n5mn4_17 ._modal-header__content_n5mn4_11{justify-content:flex-end}._modal-header__content_n5mn4_11{display:flex;align-items:flex-start;gap:10px;width:100%;padding:var(--spacing-xxl) var(--spacing-xxxl)}._modal-header__titles_n5mn4_27{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_n5mn4_36{display:flex;align-items:center;gap:var(--spacing-m);width:100%;min-height:var(--line-height-500)}._modal-header__title_n5mn4_27{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_n5mn4_53{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}._modal-header__subtitle_n5mn4_64{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_n5mn4_72{display:flex;flex-shrink:0;align-items:center;gap:var(--spacing-xs)}._modal-header__subtitle-beside_n5mn4_72 ._modal-header__subtitle_n5mn4_64{line-height:var(--line-height-200);white-space:nowrap}._modal-header__subtitle-divider_n5mn4_82{display:block;width:1px;height:var(--line-height-500);background-color:rgba(var(--center-channel-color-rgb),.16)}._modal-header__actions_n5mn4_88{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:7px;height:28px}._modal-header__close_n5mn4_96{margin-right:-12px;margin-top:-6px;margin-bottom:-6px}._modal-header__slot_n5mn4_101{padding:var(--spacing-l) var(--spacing-xxxl) var(--spacing-xxl)}

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
 export type ModalSubtitlePlacement = 'below' | 'beside';
 export interface ModalHeaderProps {
     className?: string;
@@ -18,8 +19,16 @@ export interface ModalHeaderProps {
     /** 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;
     /**
@@ -27,6 +36,12 @@ export interface ModalHeaderProps {
      * 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,
@@ -34,5 +49,5 @@ export interface ModalHeaderProps {
  *
  * @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;
+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

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

@@ -1,74 +1,89 @@
-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 { 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 g({
-  className: t = "",
-  title: o,
-  subtitle: d,
-  subtitlePlacement: _ = "below",
-  hideTitle: s = !1,
-  titleId: r,
-  showBackButton: u = !1,
+function q({
+  className: N = "",
+  title: d,
+  subtitle: s,
+  subtitlePlacement: f = "below",
+  hideTitle: o = !1,
+  titleId: i,
+  showBackButton: b = !1,
   onBack: p,
-  onClose: f,
-  divider: N = !0,
-  headerAction: b
+  backLabel: u = "Go back",
+  backButtonProps: v,
+  onClose: y,
+  closeLabel: C = "Close",
+  closeButtonProps: r,
+  divider: k = !0,
+  headerAction: w,
+  headerSlot: m
 }) {
-  const i = !s && o != null, c = i && d != null, m = _ === "beside" && c;
-  return /* @__PURE__ */ a(
+  const c = !o && d != null, n = c && s != null, h = f === "beside" && n;
+  return /* @__PURE__ */ l(
     "div",
     {
       className: [
         e["modal-header"],
-        !N && e["modal-header--no-divider"],
-        s && e["modal-header--close-only"],
-        t
+        !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: [
-        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",
+      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,
                 {
-                  className: e["modal-header__subtitle-divider"],
-                  "aria-hidden": !0
+                  ...v,
+                  "aria-label": u,
+                  icon: /* @__PURE__ */ a(_, { glyph: /* @__PURE__ */ a(j, {}), size: "20" }),
+                  onClick: p
                 }
               ),
-              /* @__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
-            }
-          )
-        ] })
-      ] })
+              /* @__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 {
-  g as default
+  q as default
 };
 //# sourceMappingURL=ModalHeader.js.map

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

@@ -1 +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;"}
+{"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

@@ -1,2 +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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ModalHeader.css');const e={"modal-header":"_modal-header_n5mn4_2","modal-header--no-divider":"_modal-header--no-divider_n5mn4_8","modal-header__content":"_modal-header__content_n5mn4_11","modal-header--has-slot":"_modal-header--has-slot_n5mn4_14","modal-header--close-only":"_modal-header--close-only_n5mn4_17","modal-header__titles":"_modal-header__titles_n5mn4_27","modal-header__primary":"_modal-header__primary_n5mn4_36","modal-header__title":"_modal-header__title_n5mn4_27","modal-header__title-sr":"_modal-header__title-sr_n5mn4_53","modal-header__subtitle":"_modal-header__subtitle_n5mn4_64","modal-header__subtitle-beside":"_modal-header__subtitle-beside_n5mn4_72","modal-header__subtitle-divider":"_modal-header__subtitle-divider_n5mn4_82","modal-header__actions":"_modal-header__actions_n5mn4_88","modal-header__close":"_modal-header__close_n5mn4_96","modal-header__slot":"_modal-header__slot_n5mn4_101"};exports.default=e;
 //# sourceMappingURL=ModalHeader.module.scss.cjs.map

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

@@ -1,17 +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"
+  "modal-header": "_modal-header_n5mn4_2",
+  "modal-header--no-divider": "_modal-header--no-divider_n5mn4_8",
+  "modal-header__content": "_modal-header__content_n5mn4_11",
+  "modal-header--has-slot": "_modal-header--has-slot_n5mn4_14",
+  "modal-header--close-only": "_modal-header--close-only_n5mn4_17",
+  "modal-header__titles": "_modal-header__titles_n5mn4_27",
+  "modal-header__primary": "_modal-header__primary_n5mn4_36",
+  "modal-header__title": "_modal-header__title_n5mn4_27",
+  "modal-header__title-sr": "_modal-header__title-sr_n5mn4_53",
+  "modal-header__subtitle": "_modal-header__subtitle_n5mn4_64",
+  "modal-header__subtitle-beside": "_modal-header__subtitle-beside_n5mn4_72",
+  "modal-header__subtitle-divider": "_modal-header__subtitle-divider_n5mn4_82",
+  "modal-header__actions": "_modal-header__actions_n5mn4_88",
+  "modal-header__close": "_modal-header__close_n5mn4_96",
+  "modal-header__slot": "_modal-header__slot_n5mn4_101"
 };
 export {
   e as default

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

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

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

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