@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.31

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

@@ -0,0 +1,44 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether the overlay is shown. Setting it to `false` plays the exit and then unmounts. */
+    open: boolean;
+    /** Called when the backdrop is pressed. Presses that start inside the dialog do not call it. */
+    onClose?: () => void;
+    /**
+     * Called once the exit finishes and the overlay has unmounted. Not called if
+     * the overlay itself is unmounted before the exit finishes, so do any
+     * cleanup on unmount as well.
+     */
+    onExited?: () => void;
+    /**
+     * Portal node. Defaults to `document.body`; pass another element so a modal
+     * inside another top layer can join it. `null` renders nothing until the node
+     * exists (e.g. a ref held in state). Override `position` through `style`
+     * when the container is a positioned stage. Scroll lock applies to that
+     * node's document.
+     */
+    container?: HTMLElement | null;
+    /**
+     * Lock `document.body` scroll while the overlay is mounted. Turn off for an
+     * overlay staged inside a frame (docs, Storybook) so it doesn't freeze the page.
+     */
+    lockScroll?: boolean;
+    /**
+     * Stacking order. Defaults to `--z-modal` (1050, the webapp's modal layer).
+     * A confirm opened over another modal should pass `var(--z-confirm-modal)`
+     * (1060); other host chrome that sits higher passes a value or redefines
+     * `--z-modal`. Applied before `style`, so `style.zIndex` wins.
+     */
+    zIndex?: number | string;
+    /** Usually a `Modal`. */
+    children?: ReactNode;
+}
+/**
+ * Modal scrim: portals to `document.body` (or `container`), locks body scroll
+ * while shown (opt out with `lockScroll={false}`), closes on backdrop press, and stays mounted for
+ * `--duration-quick` after `open` becomes false so the fade-out can play.
+ * Escape and focus stay on `Modal`. Hosts that already position their own
+ * node can use `modalOverlayStyles` instead.
+ */
+export default function ModalOverlay({ open, onClose, onExited, container, lockScroll, zIndex, className, style, children, onMouseDown, onClick, ...rest }: ModalOverlayProps): import('react').ReactPortal | null;
+//# sourceMappingURL=ModalOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,4FAA4F;IAC5F,IAAI,EAAE,OAAO,CAAC;IACd,gGAAgG;IAChG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,EACX,OAAO,EACP,GAAG,IAAI,EACR,EAAE,iBAAiB,sCAgDnB"}

package/dist/components/modal/ModalOverlay.js

@@ -0,0 +1,59 @@
+import { jsx as h } from "react/jsx-runtime";
+import { useRef as E, useEffect as N } from "react";
+import { createPortal as O } from "react-dom";
+import { usePopoverTransition as P } from "../../hooks/use-popover-transition.js";
+import { mergeClassNames as b } from "../../utils/props.js";
+import { lockBodyScroll as j } from "../../utils/scrollLock.js";
+import { useOnExited as B } from "../../utils/useOnExited.js";
+import n from "./ModalOverlay.module.scss.js";
+function J({
+  open: a,
+  onClose: m,
+  onExited: c,
+  container: i,
+  lockScroll: u = !0,
+  zIndex: f,
+  className: l,
+  style: p,
+  children: v,
+  onMouseDown: o,
+  onClick: s,
+  ...y
+}) {
+  const { mounted: e } = P(a);
+  B(e, c);
+  const d = E(!1), t = i === void 0 ? typeof document > "u" ? null : document.body : i;
+  if (N(() => {
+    if (!(!e || !t || !u))
+      return j(t.ownerDocument);
+  }, [e, t, u]), !e || !t) return null;
+  const g = (r) => {
+    d.current = r.target !== r.currentTarget, o == null || o(r);
+  }, x = (r) => {
+    const T = d.current;
+    d.current = !1, s == null || s(r), a && !T && r.target === r.currentTarget && (m == null || m());
+  };
+  return O(
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- backdrop click is a pointer shortcut; keyboard users close with Escape (handled by Modal)
+    /* @__PURE__ */ h(
+      "div",
+      {
+        ...y,
+        className: b(
+          n["modal-overlay"],
+          !a && n["modal-overlay--exiting"],
+          l
+        ),
+        style: { ...f !== void 0 && { zIndex: f }, ...p },
+        onMouseDown: g,
+        onClick: x,
+        children: v
+      }
+    ),
+    t
+  );
+}
+export {
+  J as default
+};
+//# sourceMappingURL=ModalOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOverlay.js","sources":["../../../src/components/modal/ModalOverlay.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeClassNames } from '@/utils/props';\nimport { lockBodyScroll } from '@/utils/scrollLock';\nimport { useOnExited } from '@/utils/useOnExited';\nimport styles from './ModalOverlay.module.scss';\n\nexport interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the overlay is shown. Setting it to `false` plays the exit and then unmounts. */\n  open: boolean;\n  /** Called when the backdrop is pressed. Presses that start inside the dialog do not call it. */\n  onClose?: () => void;\n  /**\n   * Called once the exit finishes and the overlay has unmounted. Not called if\n   * the overlay itself is unmounted before the exit finishes, so do any\n   * cleanup on unmount as well.\n   */\n  onExited?: () => void;\n  /**\n   * Portal node. Defaults to `document.body`; pass another element so a modal\n   * inside another top layer can join it. `null` renders nothing until the node\n   * exists (e.g. a ref held in state). Override `position` through `style`\n   * when the container is a positioned stage. Scroll lock applies to that\n   * node's document.\n   */\n  container?: HTMLElement | null;\n  /**\n   * Lock `document.body` scroll while the overlay is mounted. Turn off for an\n   * overlay staged inside a frame (docs, Storybook) so it doesn't freeze the page.\n   */\n  lockScroll?: boolean;\n  /**\n   * Stacking order. Defaults to `--z-modal` (1050, the webapp's modal layer).\n   * A confirm opened over another modal should pass `var(--z-confirm-modal)`\n   * (1060); other host chrome that sits higher passes a value or redefines\n   * `--z-modal`. Applied before `style`, so `style.zIndex` wins.\n   */\n  zIndex?: number | string;\n  /** Usually a `Modal`. */\n  children?: ReactNode;\n}\n\n/**\n * Modal scrim: portals to `document.body` (or `container`), locks body scroll\n * while shown (opt out with `lockScroll={false}`), closes on backdrop press, and stays mounted for\n * `--duration-quick` after `open` becomes false so the fade-out can play.\n * Escape and focus stay on `Modal`. Hosts that already position their own\n * node can use `modalOverlayStyles` instead.\n */\nexport default function ModalOverlay({\n  open,\n  onClose,\n  onExited,\n  container,\n  lockScroll = true,\n  zIndex,\n  className,\n  style,\n  children,\n  onMouseDown,\n  onClick,\n  ...rest\n}: ModalOverlayProps) {\n  const { mounted } = usePopoverTransition(open);\n  useOnExited(mounted, onExited);\n  const pressStartedInside = useRef(false);\n\n  const target =\n    container === undefined\n      ? typeof document === 'undefined'\n        ? null\n        : document.body\n      : container;\n\n  useEffect(() => {\n    if (!mounted || !target || !lockScroll) return undefined;\n    return lockBodyScroll(target.ownerDocument);\n  }, [mounted, target, lockScroll]);\n\n  if (!mounted || !target) return null;\n\n  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n    pressStartedInside.current = e.target !== e.currentTarget;\n    onMouseDown?.(e);\n  };\n\n  const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n    const startedInside = pressStartedInside.current;\n    pressStartedInside.current = false;\n    onClick?.(e);\n    if (open && !startedInside && e.target === e.currentTarget) onClose?.();\n  };\n\n  return createPortal(\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- backdrop click is a pointer shortcut; keyboard users close with Escape (handled by Modal)\n    <div\n      {...rest}\n      className={mergeClassNames(\n        styles['modal-overlay'],\n        !open && styles['modal-overlay--exiting'],\n        className,\n      )}\n      style={{ ...(zIndex !== undefined && { zIndex }), ...style }}\n      onMouseDown={handleMouseDown}\n      onClick={handleClick}\n    >\n      {children}\n    </div>,\n    target,\n  );\n}\n"],"names":["ModalOverlay","open","onClose","onExited","container","lockScroll","zIndex","className","style","children","onMouseDown","onClick","rest","mounted","usePopoverTransition","useOnExited","pressStartedInside","useRef","target","useEffect","lockBodyScroll","handleMouseDown","e","handleClick","startedInside","createPortal","jsx","mergeClassNames","styles"],"mappings":";;;;;;;;AAwDA,SAAwBA,EAAa;AAAA,EACnC,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAqBb,CAAI;AAC7C,EAAAc,EAAYF,GAASV,CAAQ;AAC7B,QAAMa,IAAqBC,EAAO,EAAK,GAEjCC,IACJd,MAAc,SACV,OAAO,WAAa,MAClB,OACA,SAAS,OACXA;AAON,MALAe,EAAU,MAAM;AACd,QAAI,GAACN,KAAW,CAACK,KAAU,CAACb;AAC5B,aAAOe,EAAeF,EAAO,aAAa;AAAA,EAC5C,GAAG,CAACL,GAASK,GAAQb,CAAU,CAAC,GAE5B,CAACQ,KAAW,CAACK,EAAQ,QAAO;AAEhC,QAAMG,IAAkB,CAACC,MAAkC;AACzD,IAAAN,EAAmB,UAAUM,EAAE,WAAWA,EAAE,eAC5CZ,KAAA,QAAAA,EAAcY;AAAA,EAChB,GAEMC,IAAc,CAACD,MAAkC;AACrD,UAAME,IAAgBR,EAAmB;AACzC,IAAAA,EAAmB,UAAU,IAC7BL,KAAA,QAAAA,EAAUW,IACNrB,KAAQ,CAACuB,KAAiBF,EAAE,WAAWA,EAAE,kBAAepB,KAAA,QAAAA;AAAA,EAC9D;AAEA,SAAOuB;AAAA;AAAA,IAEL,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGd;AAAA,QACJ,WAAWe;AAAA,UACTC,EAAO,eAAe;AAAA,UACtB,CAAC3B,KAAQ2B,EAAO,wBAAwB;AAAA,UACxCrB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,GAAID,MAAW,UAAa,EAAE,QAAAA,EAAA,GAAW,GAAGE,EAAA;AAAA,QACrD,aAAaa;AAAA,QACb,SAASE;AAAA,QAER,UAAAd;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHS;AAAA,EAAA;AAEJ;"}

package/dist/components/modal/ModalOverlay.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ModalOverlay.css');const e={"modal-overlay":"_modal-overlay_1oqns_18","modal-overlay-fade-in":"_modal-overlay-fade-in_1oqns_1","modal-overlay--exiting":"_modal-overlay--exiting_1oqns_30"};exports.default=e;
+//# sourceMappingURL=ModalOverlay.module.scss.cjs.map

package/dist/components/modal/ModalOverlay.module.scss.cjs.map

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

package/dist/components/modal/ModalOverlay.module.scss.js

@@ -0,0 +1,9 @@
+import './ModalOverlay.css';const o = {
+  "modal-overlay": "_modal-overlay_1oqns_18",
+  "modal-overlay-fade-in": "_modal-overlay-fade-in_1oqns_1",
+  "modal-overlay--exiting": "_modal-overlay--exiting_1oqns_30"
+};
+export {
+  o as default
+};
+//# sourceMappingURL=ModalOverlay.module.scss.js.map

package/dist/components/modal/ModalOverlay.module.scss.js.map

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

package/dist/components/modal/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Modal.cjs");exports.Modal=e.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Modal.cjs"),l=require("./ModalOverlay.cjs"),a=require("./ModalOverlay.module.scss.cjs");exports.Modal=e.default;exports.ModalOverlay=l.default;exports.modalOverlayStyles=a.default;
 //# sourceMappingURL=index.cjs.map

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

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

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

@@ -1 +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,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
+{"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,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,SAAS,EACT,sBAAsB,GACvB,MAAM,SAAS,CAAC"}

package/dist/components/modal/index.js

@@ -1,5 +1,9 @@
-import { default as d } from "./Modal.js";
+import { default as l } from "./Modal.js";
+import { default as r } from "./ModalOverlay.js";
+import { default as d } from "./ModalOverlay.module.scss.js";
 export {
-  d as Modal
+  l as Modal,
+  r as ModalOverlay,
+  d as modalOverlayStyles
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"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_npl2l_13{display:flex;flex-direction:column;flex-shrink:0;align-items:stretch}._modal-footer--divider_npl2l_19{border-top:1px solid rgba(var(--center-channel-color-rgb),.12)}._modal-footer--no-divider_npl2l_22 ._modal-footer__content_npl2l_22{padding-top:0}._modal-footer__content_npl2l_22{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_npl2l_33{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_npl2l_44{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:var(--spacing-xs)}._modal-footer--type-2-actions-separated_npl2l_51 ._modal-footer__content_npl2l_22{justify-content:space-between}._modal-footer--type-2-actions-separated_npl2l_51 ._modal-footer__actions_npl2l_44:only-child{flex:1 1 auto;justify-content:space-between}._modal-footer--type-pagination_npl2l_58 ._modal-footer__content_npl2l_22,._modal-footer--type-stepped-progress_npl2l_58 ._modal-footer__content_npl2l_22{justify-content:space-between}._modal-footer--type-spacer-small_npl2l_61{padding:var(--spacing-l);min-height:calc(var(--spacing-l) * 2)}._modal-footer--type-spacer-large_npl2l_65{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_npl2l_13","modal-footer--divider":"_modal-footer--divider_npl2l_19","modal-footer--no-divider":"_modal-footer--no-divider_npl2l_22","modal-footer__content":"_modal-footer__content_npl2l_22","modal-footer__leading":"_modal-footer__leading_npl2l_33","modal-footer__actions":"_modal-footer__actions_npl2l_44","modal-footer--type-2-actions-separated":"_modal-footer--type-2-actions-separated_npl2l_51","modal-footer--type-pagination":"_modal-footer--type-pagination_npl2l_58","modal-footer--type-stepped-progress":"_modal-footer--type-stepped-progress_npl2l_58","modal-footer--type-spacer-small":"_modal-footer--type-spacer-small_npl2l_61","modal-footer--type-spacer-large":"_modal-footer--type-spacer-large_npl2l_65"};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_npl2l_13",
+  "modal-footer--divider": "_modal-footer--divider_npl2l_19",
+  "modal-footer--no-divider": "_modal-footer--no-divider_npl2l_22",
+  "modal-footer__content": "_modal-footer__content_npl2l_22",
+  "modal-footer__leading": "_modal-footer__leading_npl2l_33",
+  "modal-footer__actions": "_modal-footer__actions_npl2l_44",
+  "modal-footer--type-2-actions-separated": "_modal-footer--type-2-actions-separated_npl2l_51",
+  "modal-footer--type-pagination": "_modal-footer--type-pagination_npl2l_58",
+  "modal-footer--type-stepped-progress": "_modal-footer--type-stepped-progress_npl2l_58",
+  "modal-footer--type-spacer-small": "_modal-footer--type-spacer-small_npl2l_61",
+  "modal-footer--type-spacer-large": "_modal-footer--type-spacer-large_npl2l_65"
+};
+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.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-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"),__z=require("@mattermost/compass-icons/components/close.js"),z=__z?.default??__z,__H=require("@mattermost/compass-icons/components/arrow-left.js"),H=__H?.default??__H,f=require("../icon/Icon.cjs"),j=require("../icon-button/IconButton.cjs"),x=require("../../utils/props.cjs"),a=require("./ModalHeader.module.scss.cjs");function I({className:N="",title:l,subtitle:r,subtitlePlacement:v="below",hideTitle:o=!1,titleId:c,showBackButton:b=!1,onBack:g,backLabel:q="Go back",backButtonProps:d,onClose:C,closeLabel:y="Close",closeButtonProps:s,divider:w=!0,headerAction:M,leading:m,headerSlot:n}){const i=!!m,u=!o&&!i&&l!=null,t=u&&r!=null,h=v==="beside"&&t,_=b?e.jsx(j.default,{...d,"aria-label":q,className:x.mergeClassNames(a.default["modal-header__back"],d==null?void 0:d.className),icon:e.jsx(f.default,{glyph:e.jsx(H,{}),size:"20"}),onClick:g}):null;return e.jsxs("div",{className:[a.default["modal-header"],!w&&a.default["modal-header--no-divider"],o&&!i&&a.default["modal-header--close-only"],i&&a.default["modal-header--has-leading"],n&&a.default["modal-header--has-slot"],N].filter(Boolean).join(" "),children:[e.jsxs("div",{className:a.default["modal-header__content"],children:[u?e.jsxs("div",{className:a.default["modal-header__titles"],children:[e.jsxs("div",{className:a.default["modal-header__primary"],children:[_,e.jsx("h2",{id:c,className:a.default["modal-header__title"],children:l}),h&&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:r})]})]}),t&&!h&&e.jsx("p",{className:a.default["modal-header__subtitle"],children:r})]}):c!=null&&l!=null?e.jsx("h2",{id:c,className:a.default["modal-header__title-sr"],children:l}):null,i&&e.jsxs("div",{className:a.default["modal-header__leading"],children:[_,m]}),e.jsxs("div",{className:a.default["modal-header__actions"],children:[M,e.jsx(j.default,{...s,"aria-label":y,className:x.mergeClassNames(a.default["modal-header__close"],s==null?void 0:s.className),icon:e.jsx(f.default,{glyph:e.jsx(z,{}),size:"20"}),onClick:C})]})]}),n&&e.jsx("div",{className:a.default["modal-header__slot"],children:n})]})}exports.default=I;
+//# 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 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   * Custom content in the title position: left aligned, vertically centered\n   * with the close button. Not wrapped in the heading and not given heading\n   * type, so a control keeps its own styles. `title` stays the accessible\n   * name and is visually hidden, the same as `hideTitle`. The subtitle is\n   * omitted. `showBackButton` still renders before this content. Without\n   * this prop, `hideTitle` stays the close-only header.\n   */\n  leading?: 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\n * leading content in place of the visible title, optional back, optional\n * 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  leading,\n  headerSlot,\n}: ModalHeaderProps) {\n  const hasLeading = Boolean(leading);\n  const showTitleBlock = !hideTitle && !hasLeading && title != null;\n  const showSubtitle = showTitleBlock && subtitle != null;\n  const beside = subtitlePlacement === 'beside' && showSubtitle;\n  const backButton = showBackButton ? (\n    <IconButton\n      {...backButtonProps}\n      aria-label={backLabel}\n      className={mergeClassNames(\n        styles['modal-header__back'],\n        backButtonProps?.className,\n      )}\n      icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n      onClick={onBack}\n    />\n  ) : null;\n\n  return (\n    <div\n      className={[\n        styles['modal-header'],\n        !divider && styles['modal-header--no-divider'],\n        hideTitle && !hasLeading && styles['modal-header--close-only'],\n        hasLeading && styles['modal-header--has-leading'],\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              {backButton}\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        {hasLeading && (\n          <div className={styles['modal-header__leading']}>\n            {backButton}\n            {leading}\n          </div>\n        )}\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","leading","headerSlot","hasLeading","showTitleBlock","showSubtitle","beside","backButton","jsx","IconButton","mergeClassNames","styles","Icon","ArrowLeftIcon","jsxs","CloseIcon"],"mappings":"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"}

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

@@ -0,0 +1 @@
+._modal-header_14bu2_13{display:flex;flex-direction:column;flex-shrink:0;border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12)}._modal-header--no-divider_14bu2_19{border-bottom:none}._modal-header--no-divider_14bu2_19 ._modal-header__content_14bu2_22,._modal-header--has-slot_14bu2_25 ._modal-header__content_14bu2_22{padding-bottom:0}._modal-header--close-only_14bu2_28 ._modal-header__content_14bu2_22{justify-content:flex-end}._modal-header--has-leading_14bu2_31 ._modal-header__content_14bu2_22{align-items:center}._modal-header__content_14bu2_22{display:flex;align-items:flex-start;gap:var(--spacing-s);width:100%;padding:var(--spacing-xxl) var(--spacing-xxxl)}._modal-header__leading_14bu2_41{display:flex;flex:1 1 auto;align-items:center;gap:var(--spacing-m);min-width:0}._modal-header__titles_14bu2_48{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_14bu2_57{display:flex;align-items:center;gap:var(--spacing-m);width:100%;min-height:var(--line-height-500)}._modal-header__title_14bu2_48{flex:0 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_14bu2_74{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}._modal-header__subtitle_14bu2_85{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_14bu2_93{display:flex;flex-shrink:0;align-items:center;gap:var(--spacing-xs)}._modal-header__subtitle-beside_14bu2_93 ._modal-header__subtitle_14bu2_85{line-height:var(--line-height-200);white-space:nowrap}._modal-header__subtitle-divider_14bu2_103{display:block;width:1px;height:var(--line-height-500);background-color:rgba(var(--center-channel-color-rgb),.16)}._modal-header__actions_14bu2_109{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:7px;height:28px}._modal-header__back_14bu2_117{margin-left:calc(-1 * var(--spacing-m));margin-top:calc(-1 * var(--spacing-xxs));margin-bottom:calc(-1 * var(--spacing-xxs))}._modal-header__close_14bu2_122{margin-right:calc(-1 * var(--spacing-m));margin-top:calc(-1 * var(--spacing-xxs));margin-bottom:calc(-1 * var(--spacing-xxs))}._modal-header__slot_14bu2_127{padding:var(--spacing-l) var(--spacing-xxxl) var(--spacing-xxl)}

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

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
+export type ModalSubtitlePlacement = 'below' | 'beside';
+export interface ModalHeaderProps {
+    className?: string;
+    /** Heading text. Omit (with `hideTitle`) for close-only headers. */
+    title?: ReactNode;
+    /** Optional secondary text — placement controlled by `subtitlePlacement`. */
+    subtitle?: ReactNode;
+    /**
+     * Where the subtitle sits relative to the title.
+     * Figma: Subtitle = Below | Beside. Default: `below`.
+     */
+    subtitlePlacement?: ModalSubtitlePlacement;
+    /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */
+    hideTitle?: boolean;
+    /** id for the title element — pair with dialog `aria-labelledby`. */
+    titleId?: string;
+    /** Back arrow before the title. */
+    showBackButton?: boolean;
+    onBack?: () => void;
+    /** Accessible name for the back button. Default: "Go back". */
+    backLabel?: string;
+    /** Extra attributes for the back button (e.g. `data-testid`). */
+    backButtonProps?: BuiltInButtonProps;
+    /** Called when the × is clicked. */
+    onClose?: () => void;
+    /** Accessible name for the close button. Default: "Close". */
+    closeLabel?: string;
+    /** Extra attributes for the close button (e.g. `data-testid`). */
+    closeButtonProps?: BuiltInButtonProps;
+    /** Show bottom border. Figma: Divider = On. Default: true. */
+    divider?: boolean;
+    /**
+     * Optional control before close (Figma Controls = Button / Small Input / …).
+     * Host owns the Button, TextInput, etc.
+     */
+    headerAction?: ReactNode;
+    /**
+     * Custom content in the title position: left aligned, vertically centered
+     * with the close button. Not wrapped in the heading and not given heading
+     * type, so a control keeps its own styles. `title` stays the accessible
+     * name and is visually hidden, the same as `hideTitle`. The subtitle is
+     * omitted. `showBackButton` still renders before this content. Without
+     * this prop, `hideTitle` stays the close-only header.
+     */
+    leading?: 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
+ * leading content in place of the visible title, optional back, optional
+ * header action, and close. Compose into `Modal` or use standalone.
+ *
+ * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921
+ */
+export default function ModalHeader({ className, title, subtitle, subtitlePlacement, hideTitle, titleId, showBackButton, onBack, backLabel, backButtonProps, onClose, closeLabel, closeButtonProps, divider, headerAction, leading, headerSlot, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mCAAmC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;GAMG;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,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,2CAqFlB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './ModalHeader.module.scss';\n\nexport type ModalSubtitlePlacement = 'below' | 'beside';\n\nexport interface ModalHeaderProps {\n  className?: string;\n  /** Heading text. Omit (with `hideTitle`) for close-only headers. */\n  title?: ReactNode;\n  /** Optional secondary text — placement controlled by `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits relative to the title.\n   * Figma: Subtitle = Below | Beside. Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */\n  hideTitle?: boolean;\n  /** id for the title element — pair with dialog `aria-labelledby`. */\n  titleId?: string;\n  /** Back arrow before the title. */\n  showBackButton?: boolean;\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Go back\". */\n  backLabel?: string;\n  /** Extra attributes for the back button (e.g. `data-testid`). */\n  backButtonProps?: BuiltInButtonProps;\n  /** Called when the × is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Show bottom border. Figma: Divider = On. Default: true. */\n  divider?: boolean;\n  /**\n   * Optional control before close (Figma Controls = Button / Small Input / …).\n   * Host owns the Button, TextInput, etc.\n   */\n  headerAction?: ReactNode;\n  /**\n   * Custom content in the title position: left aligned, vertically centered\n   * with the close button. Not wrapped in the heading and not given heading\n   * type, so a control keeps its own styles. `title` stays the accessible\n   * name and is visually hidden, the same as `hideTitle`. The subtitle is\n   * omitted. `showBackButton` still renders before this content. Without\n   * this prop, `hideTitle` stays the close-only header.\n   */\n  leading?: 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\n * leading content in place of the visible title, optional back, optional\n * 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  leading,\n  headerSlot,\n}: ModalHeaderProps) {\n  const hasLeading = Boolean(leading);\n  const showTitleBlock = !hideTitle && !hasLeading && title != null;\n  const showSubtitle = showTitleBlock && subtitle != null;\n  const beside = subtitlePlacement === 'beside' && showSubtitle;\n  const backButton = showBackButton ? (\n    <IconButton\n      {...backButtonProps}\n      aria-label={backLabel}\n      className={mergeClassNames(\n        styles['modal-header__back'],\n        backButtonProps?.className,\n      )}\n      icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n      onClick={onBack}\n    />\n  ) : null;\n\n  return (\n    <div\n      className={[\n        styles['modal-header'],\n        !divider && styles['modal-header--no-divider'],\n        hideTitle && !hasLeading && styles['modal-header--close-only'],\n        hasLeading && styles['modal-header--has-leading'],\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              {backButton}\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        {hasLeading && (\n          <div className={styles['modal-header__leading']}>\n            {backButton}\n            {leading}\n          </div>\n        )}\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","leading","headerSlot","hasLeading","showTitleBlock","showSubtitle","beside","backButton","jsx","IconButton","mergeClassNames","styles","Icon","ArrowLeftIcon","jsxs","CloseIcon"],"mappings":"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"}

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_14bu2_13","modal-header--no-divider":"_modal-header--no-divider_14bu2_19","modal-header__content":"_modal-header__content_14bu2_22","modal-header--has-slot":"_modal-header--has-slot_14bu2_25","modal-header--close-only":"_modal-header--close-only_14bu2_28","modal-header--has-leading":"_modal-header--has-leading_14bu2_31","modal-header__leading":"_modal-header__leading_14bu2_41","modal-header__titles":"_modal-header__titles_14bu2_48","modal-header__primary":"_modal-header__primary_14bu2_57","modal-header__title":"_modal-header__title_14bu2_48","modal-header__title-sr":"_modal-header__title-sr_14bu2_74","modal-header__subtitle":"_modal-header__subtitle_14bu2_85","modal-header__subtitle-beside":"_modal-header__subtitle-beside_14bu2_93","modal-header__subtitle-divider":"_modal-header__subtitle-divider_14bu2_103","modal-header__actions":"_modal-header__actions_14bu2_109","modal-header__back":"_modal-header__back_14bu2_117","modal-header__close":"_modal-header__close_14bu2_122","modal-header__slot":"_modal-header__slot_14bu2_127"};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,24 @@
+import './ModalHeader.css';const _ = {
+  "modal-header": "_modal-header_14bu2_13",
+  "modal-header--no-divider": "_modal-header--no-divider_14bu2_19",
+  "modal-header__content": "_modal-header__content_14bu2_22",
+  "modal-header--has-slot": "_modal-header--has-slot_14bu2_25",
+  "modal-header--close-only": "_modal-header--close-only_14bu2_28",
+  "modal-header--has-leading": "_modal-header--has-leading_14bu2_31",
+  "modal-header__leading": "_modal-header__leading_14bu2_41",
+  "modal-header__titles": "_modal-header__titles_14bu2_48",
+  "modal-header__primary": "_modal-header__primary_14bu2_57",
+  "modal-header__title": "_modal-header__title_14bu2_48",
+  "modal-header__title-sr": "_modal-header__title-sr_14bu2_74",
+  "modal-header__subtitle": "_modal-header__subtitle_14bu2_85",
+  "modal-header__subtitle-beside": "_modal-header__subtitle-beside_14bu2_93",
+  "modal-header__subtitle-divider": "_modal-header__subtitle-divider_14bu2_103",
+  "modal-header__actions": "_modal-header__actions_14bu2_109",
+  "modal-header__back": "_modal-header__back_14bu2_117",
+  "modal-header__close": "_modal-header__close_14bu2_122",
+  "modal-header__slot": "_modal-header__slot_14bu2_127"
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=ModalHeader.module.scss.js.map