@mattermost/compass-ui 0.1.0-alpha.6 → 0.1.0-alpha.8

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,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,yIAAyI;AACzI,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,UAAU;IACzB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,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,gFAAgF;IAChF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gFAAgF;IAChF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAc,EACd,KAAK,EACL,QAAQ,EACR,cAAsB,EACtB,MAAM,EACN,OAAO,EACP,aAAoB,EACpB,WAAuB,EACvB,QAAQ,EACR,MAAM,EACN,aAAoB,GACrB,EAAE,UAAU,2CA0EZ"}
+{"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"}

package/dist/components/modal/Modal.js

@@ -1,86 +1,68 @@
-import { jsxs as e, jsx as l } from "react/jsx-runtime";
-import { useId as v } from "react";
-import d from "../icon-button/IconButton.js";
-import m from "../icon/Icon.js";
-import y from "../scrollbar/Scrollbar.js";
-import __j from "@mattermost/compass-icons/components/close.js";const j=__j&&__j.default?__j.default:__j;
-import __B from "@mattermost/compass-icons/components/arrow-left.js";const B=__B&&__B.default?__B.default:__B;
-import { toKebab as I } from "../../utils/string.js";
-import o from "./Modal.module.scss.js";
-function L({
-  size: n = "small",
-  title: s,
-  subtitle: a,
-  showBackButton: t = !1,
-  onBack: c,
-  onClose: _,
-  headerDivider: f = !0,
-  bodyPadding: h = "default",
-  children: p,
-  footer: i,
-  footerDivider: u = !0
+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 l from "./Modal.module.scss.js";
+function E({
+  className: d = "",
+  style: m,
+  size: t = "small",
+  title: c,
+  subtitle: u,
+  subtitlePlacement: b = "below",
+  hideTitle: f = !1,
+  showBackButton: p = !1,
+  onBack: _,
+  onClose: y,
+  headerDivider: h = !0,
+  headerAction: v,
+  bodyPadding: r = "default",
+  scrollable: j = !0,
+  children: I,
+  footer: a,
+  footerLeading: n,
+  footerType: e = "2-actions",
+  footerDivider: x = !0
 }) {
-  const r = v(), b = o[`modal--size-${I(n)}`], N = h === "menu";
-  return /* @__PURE__ */ e(
+  const i = B(), M = l[`modal--size-${H(t)}`], N = [
+    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(
     "div",
     {
-      className: [o.modal, b].filter(Boolean).join(" "),
+      className: [l.modal, M, d].filter(Boolean).join(" "),
+      style: m,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": r,
+      "aria-labelledby": i,
       children: [
-        /* @__PURE__ */ e(
-          "div",
+        /* @__PURE__ */ o(
+          g,
           {
-            className: [
-              o.modal__header,
-              !f && o["modal__header--no-divider"]
-            ].filter(Boolean).join(" "),
-            children: [
-              /* @__PURE__ */ e("div", { className: o["modal__header-inner"], children: [
-                t && /* @__PURE__ */ l(
-                  d,
-                  {
-                    "aria-label": "Go back",
-                    icon: /* @__PURE__ */ l(m, { glyph: /* @__PURE__ */ l(B, {}), size: "20" }),
-                    onClick: c
-                  }
-                ),
-                /* @__PURE__ */ e("div", { className: o["modal__title-group"], children: [
-                  /* @__PURE__ */ l("h2", { id: r, className: o.modal__title, children: s }),
-                  a && /* @__PURE__ */ l("p", { className: o.modal__subtitle, children: a })
-                ] })
-              ] }),
-              /* @__PURE__ */ l(
-                d,
-                {
-                  "aria-label": "Close",
-                  className: o.modal__close,
-                  icon: /* @__PURE__ */ l(m, { glyph: /* @__PURE__ */ l(j, {}), size: "20" }),
-                  onClick: _
-                }
-              )
-            ]
+            title: c,
+            titleId: i,
+            subtitle: u,
+            subtitlePlacement: b,
+            hideTitle: f,
+            showBackButton: p,
+            onBack: _,
+            onClose: y,
+            divider: h,
+            headerAction: v
           }
         ),
-        /* @__PURE__ */ l("div", { className: o.modal__body, children: /* @__PURE__ */ l(y, { children: /* @__PURE__ */ l(
-          "div",
+        /* @__PURE__ */ o("div", { className: l.modal__body, children: j ? /* @__PURE__ */ o(C, { children: s }) : s }),
+        w && /* @__PURE__ */ o(
+          F,
           {
-            className: [
-              o["modal__body-inner"],
-              N && o["modal__body-inner--menu"]
-            ].filter(Boolean).join(" "),
-            children: p
-          }
-        ) }) }),
-        i && /* @__PURE__ */ l(
-          "div",
-          {
-            className: [
-              o.modal__footer,
-              !u && o["modal__footer--no-divider"]
-            ].filter(Boolean).join(" "),
-            children: i
+            type: e,
+            divider: x,
+            leading: n,
+            children: a
           }
         )
       ]
@@ -88,6 +70,6 @@ function L({
   );
 }
 export {
-  L as default
+  E 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 { ReactNode } from 'react';\nimport { useId } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/** Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so row labels align with the 32px header/footer margins. */\nexport type ModalBodyPadding = 'default' | 'menu';\n\nexport interface ModalProps {\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Always visible. */\n  title: ReactNode;\n  /** Optional secondary line below the title. */\n  subtitle?: ReactNode;\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. Figma: Divider = On. Default: true. */\n  headerDivider?: boolean;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists (8px vertical / 16px horizontal so row labels align with\n   * the 32px header/footer margins).\n   */\n  bodyPadding?: ModalBodyPadding;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically a group of Buttons, right-aligned by default. */\n  footer?: ReactNode;\n  /** Show divider between body and footer. Figma: Divider = On. Default: true. */\n  footerDivider?: boolean;\n}\n\nexport default function Modal({\n  size = 'small',\n  title,\n  subtitle,\n  showBackButton = false,\n  onBack,\n  onClose,\n  headerDivider = true,\n  bodyPadding = 'default',\n  children,\n  footer,\n  footerDivider = true,\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const menuBody = bodyPadding === 'menu';\n\n  return (\n    <div\n      className={[styles.modal, sizeClass].filter(Boolean).join(' ')}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <div\n        className={[\n          styles['modal__header'],\n          !headerDivider && styles['modal__header--no-divider'],\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div className={styles['modal__header-inner']}>\n          {showBackButton && (\n            <IconButton\n              aria-label=\"Go back\"\n              icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n              onClick={onBack}\n            />\n          )}\n          <div className={styles['modal__title-group']}>\n            <h2 id={titleId} className={styles['modal__title']}>\n              {title}\n            </h2>\n            {subtitle && (\n              <p className={styles['modal__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        </div>\n        <IconButton\n          aria-label=\"Close\"\n          className={styles['modal__close']}\n          icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n          onClick={onClose}\n        />\n      </div>\n\n      <div className={styles['modal__body']}>\n        <Scrollbar>\n          <div\n            className={[\n              styles['modal__body-inner'],\n              menuBody && styles['modal__body-inner--menu'],\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {children}\n          </div>\n        </Scrollbar>\n      </div>\n\n      {footer && (\n        <div\n          className={[\n            styles['modal__footer'],\n            !footerDivider && styles['modal__footer--no-divider'],\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["Modal","size","title","subtitle","showBackButton","onBack","onClose","headerDivider","bodyPadding","children","footer","footerDivider","titleId","useId","sizeClass","styles","toKebab","menuBody","jsxs","jsx","IconButton","Icon","ArrowLeftIcon","CloseIcon","Scrollbar"],"mappings":";;;;;;;;;AA4CA,SAAwBA,EAAM;AAAA,EAC5B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,GAAe;AACb,QAAMC,IAAUC,EAAA,GACVC,IAAYC,EAAO,eAAeC,EAAQf,CAAI,CAAC,EAAE,GACjDgB,IAAWT,MAAgB;AAEjC,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACH,EAAO,OAAOD,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC7D,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiBF;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTH,EAAO;AAAA,cACP,CAACR,KAAiBQ,EAAO,2BAA2B;AAAA,YAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YAEX,UAAA;AAAA,cAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qBAAqB,GACzC,UAAA;AAAA,gBAAAX,KACC,gBAAAe;AAAA,kBAACC;AAAA,kBAAA;AAAA,oBACC,cAAW;AAAA,oBACX,wBAAOC,GAAA,EAAK,yBAAQC,GAAA,EAAc,GAAI,MAAK,MAAK;AAAA,oBAChD,SAASjB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGb,gBAAAa,EAAC,OAAA,EAAI,WAAWH,EAAO,oBAAoB,GACzC,UAAA;AAAA,kBAAA,gBAAAI,EAAC,QAAG,IAAIP,GAAS,WAAWG,EAAO,cAChC,UAAAb,GACH;AAAA,kBACCC,KACC,gBAAAgB,EAAC,KAAA,EAAE,WAAWJ,EAAO,iBAAqB,UAAAZ,EAAA,CAAS;AAAA,gBAAA,EAAA,CAEvD;AAAA,cAAA,GACF;AAAA,cACA,gBAAAgB;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACC,cAAW;AAAA,kBACX,WAAWL,EAAO;AAAA,kBAClB,wBAAOM,GAAA,EAAK,yBAAQE,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,kBAC5C,SAASjB;AAAA,gBAAA;AAAA,cAAA;AAAA,YACX;AAAA,UAAA;AAAA,QAAA;AAAA,0BAGD,OAAA,EAAI,WAAWS,EAAO,aACrB,4BAACS,GAAA,EACC,UAAA,gBAAAL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTJ,EAAO,mBAAmB;AAAA,cAC1BE,KAAYF,EAAO,yBAAyB;AAAA,YAAA,EAE3C,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YAEV,UAAAN;AAAA,UAAA;AAAA,QAAA,GAEL,EAAA,CACF;AAAA,QAECC,KACC,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTJ,EAAO;AAAA,cACP,CAACJ,KAAiBI,EAAO,2BAA2B;AAAA,YAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YAEV,UAAAL;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, 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;"}

package/dist/components/modal/Modal.module.css

@@ -1 +1 @@
-._modal_1wwq4_2{background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-l);box-shadow:var(--elevation-6);display:flex;flex-direction:column;overflow:hidden}._modal--size-small_1wwq4_11{width:600px}._modal--size-medium_1wwq4_14{width:704px}._modal--size-large_1wwq4_17{width:832px}._modal__header_1wwq4_20{display:flex;align-items:flex-start;gap:var(--spacing-s);padding:var(--spacing-xxl) var(--spacing-xxxl);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12);flex-shrink:0}._modal__header--no-divider_1wwq4_28{border-bottom:none;padding-bottom:0}._modal__header-inner_1wwq4_32{display:flex;align-items:center;gap:var(--spacing-m);flex:1;min-width:0;padding:var(--spacing-xxxxs) 0}._modal__title-group_1wwq4_40{display:flex;flex-direction:column;gap:var(--spacing-xxxs);min-width:0}._modal__title_1wwq4_40{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);margin:0}._modal__subtitle_1wwq4_54{font-family:var(--font-family-body);font-size:var(--font-size-100);line-height:var(--line-height-200);color:rgba(var(--center-channel-color-rgb),.72);margin:0}._modal__close_1wwq4_61{margin-right:-12px;margin-top:-6px;margin-bottom:-6px}._modal__body_1wwq4_66{flex:1;min-height:0}._modal__body-inner_1wwq4_70{padding:28px var(--spacing-xxxl)}._modal__body-inner--menu_1wwq4_73{padding:var(--spacing-xs) var(--spacing-l)}._modal__footer_1wwq4_76{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-xs);padding:var(--spacing-xxl) var(--spacing-xxxl);border-top:1px solid rgba(var(--center-channel-color-rgb),.12);flex-shrink:0}._modal__footer--no-divider_1wwq4_85{border-top:none;padding-top:0}
+._modal_18mtm_2{background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-l);box-shadow:var(--elevation-6);display:flex;flex-direction:column;overflow:hidden}._modal--size-small_18mtm_11{width:600px}._modal--size-medium_18mtm_14{width:704px}._modal--size-large_18mtm_17{width:832px}._modal__body_18mtm_20{flex:1;min-height:0}._modal__body-inner_18mtm_24{padding:28px var(--spacing-xxxl)}._modal__body-inner--menu_18mtm_27{padding:var(--spacing-xs) var(--spacing-l)}._modal__body-inner--none_18mtm_30{padding:0}._modal__body_18mtm_20>._modal__body-inner_18mtm_24{height:100%}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Modal.module.css');const _="_modal_1wwq4_2",o="_modal__header_1wwq4_20",d="_modal__title_1wwq4_40",l="_modal__subtitle_1wwq4_54",e="_modal__close_1wwq4_61",a="_modal__body_1wwq4_66",m="_modal__footer_1wwq4_76",t={modal:_,"modal--size-small":"_modal--size-small_1wwq4_11","modal--size-medium":"_modal--size-medium_1wwq4_14","modal--size-large":"_modal--size-large_1wwq4_17",modal__header:o,"modal__header--no-divider":"_modal__header--no-divider_1wwq4_28","modal__header-inner":"_modal__header-inner_1wwq4_32","modal__title-group":"_modal__title-group_1wwq4_40",modal__title:d,modal__subtitle:l,modal__close:e,modal__body:a,"modal__body-inner":"_modal__body-inner_1wwq4_70","modal__body-inner--menu":"_modal__body-inner--menu_1wwq4_73",modal__footer:m,"modal__footer--no-divider":"_modal__footer--no-divider_1wwq4_85"};exports.default=t;exports.modal=_;exports.modal__body=a;exports.modal__close=e;exports.modal__footer=m;exports.modal__header=o;exports.modal__subtitle=l;exports.modal__title=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Modal.module.css');const _="_modal_18mtm_2",m="_modal__body_18mtm_20",o={modal:_,"modal--size-small":"_modal--size-small_18mtm_11","modal--size-medium":"_modal--size-medium_18mtm_14","modal--size-large":"_modal--size-large_18mtm_17",modal__body:m,"modal__body-inner":"_modal__body-inner_18mtm_24","modal__body-inner--menu":"_modal__body-inner--menu_18mtm_27","modal__body-inner--none":"_modal__body-inner--none_18mtm_30"};exports.default=o;exports.modal=_;exports.modal__body=m;
 //# sourceMappingURL=Modal.module.scss.cjs.map

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

@@ -1,29 +1,16 @@
-import './Modal.module.css';const _ = "_modal_1wwq4_2", o = "_modal__header_1wwq4_20", d = "_modal__title_1wwq4_40", l = "_modal__subtitle_1wwq4_54", e = "_modal__close_1wwq4_61", a = "_modal__body_1wwq4_66", m = "_modal__footer_1wwq4_76", t = {
-  modal: _,
-  "modal--size-small": "_modal--size-small_1wwq4_11",
-  "modal--size-medium": "_modal--size-medium_1wwq4_14",
-  "modal--size-large": "_modal--size-large_1wwq4_17",
-  modal__header: o,
-  "modal__header--no-divider": "_modal__header--no-divider_1wwq4_28",
-  "modal__header-inner": "_modal__header-inner_1wwq4_32",
-  "modal__title-group": "_modal__title-group_1wwq4_40",
-  modal__title: d,
-  modal__subtitle: l,
-  modal__close: e,
-  modal__body: a,
-  "modal__body-inner": "_modal__body-inner_1wwq4_70",
-  "modal__body-inner--menu": "_modal__body-inner--menu_1wwq4_73",
-  modal__footer: m,
-  "modal__footer--no-divider": "_modal__footer--no-divider_1wwq4_85"
+import './Modal.module.css';const m = "_modal_18mtm_2", _ = "_modal__body_18mtm_20", o = {
+  modal: m,
+  "modal--size-small": "_modal--size-small_18mtm_11",
+  "modal--size-medium": "_modal--size-medium_18mtm_14",
+  "modal--size-large": "_modal--size-large_18mtm_17",
+  modal__body: _,
+  "modal__body-inner": "_modal__body-inner_18mtm_24",
+  "modal__body-inner--menu": "_modal__body-inner--menu_18mtm_27",
+  "modal__body-inner--none": "_modal__body-inner--none_18mtm_30"
 };
 export {
-  t as default,
-  _ as modal,
-  a as modal__body,
-  e as modal__close,
-  m as modal__footer,
-  o as modal__header,
-  l as modal__subtitle,
-  d as modal__title
+  o as default,
+  m as modal,
+  _ as modal__body
 };
 //# sourceMappingURL=Modal.module.scss.js.map

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

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

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

@@ -1,3 +1,3 @@
 export { default as Modal } from './Modal';
-export type { ModalBodyPadding, ModalProps, ModalSize } from './Modal';
+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,gBAAgB,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,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,SAAS,EACT,sBAAsB,GACvB,MAAM,SAAS,CAAC"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export type ModalSubtitlePlacement = 'below' | 'beside';
+export interface ModalHeaderProps {
+    className?: string;
+    /** Heading text. Omit (with `hideTitle`) for close-only headers. */
+    title?: ReactNode;
+    /** Optional secondary text — placement controlled by `subtitlePlacement`. */
+    subtitle?: ReactNode;
+    /**
+     * Where the subtitle sits relative to the title.
+     * Figma: Subtitle = Below | Beside. Default: `below`.
+     */
+    subtitlePlacement?: ModalSubtitlePlacement;
+    /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */
+    hideTitle?: boolean;
+    /** id for the title element — pair with dialog `aria-labelledby`. */
+    titleId?: string;
+    /** Back arrow before the title. */
+    showBackButton?: boolean;
+    onBack?: () => void;
+    /** Called when the × is clicked. */
+    onClose?: () => void;
+    /** Show bottom border. Figma: Divider = On. Default: true. */
+    divider?: boolean;
+    /**
+     * Optional control before close (Figma Controls = Button / Small Input / …).
+     * Host owns the Button, TextInput, etc.
+     */
+    headerAction?: ReactNode;
+}
+/**
+ * Modal Header — title row, optional subtitle (below or beside), optional back,
+ * optional header action, and close. Compose into `Modal` or use standalone.
+ *
+ * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921
+ */
+export default function ModalHeader({ className, title, subtitle, subtitlePlacement, hideTitle, titleId, showBackButton, onBack, onClose, divider, headerAction, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mCAAmC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAc,EACd,KAAK,EACL,QAAQ,EACR,iBAA2B,EAC3B,SAAiB,EACjB,OAAO,EACP,cAAsB,EACtB,MAAM,EACN,OAAO,EACP,OAAc,EACd,YAAY,GACb,EAAE,gBAAgB,2CA8DlB"}

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

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