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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type {\n  CSSProperties,\n  HTMLAttributes,\n  ReactNode,\n  RefObject,\n} from 'react';\nimport { useEffect, useId, useRef } from 'react';\nimport { useModalFocus } from '@/hooks/use-modal-focus';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'style'\n> {\n  /** Extra class on the dialog root (size + chrome classes still apply). */\n  className?: string;\n  /** Inline style on the dialog root — prefer `className` for layout overrides. */\n  style?: CSSProperties;\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n  title: ReactNode;\n  /** Optional secondary line — placement via `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits. Figma Modal Header: Below | Beside.\n   * Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n  hideTitle?: boolean;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Go back\". */\n  backLabel?: string;\n  /** Extra attributes for the back button (e.g. `data-testid`). */\n  backButtonProps?: BuiltInButtonProps;\n  /** Called when the × close button is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Show divider between header and body. Default: true. */\n  headerDivider?: boolean;\n  /** Optional control before close (Button, search field, …). */\n  headerAction?: ReactNode;\n  /**\n   * Full-width slot rendered below the title row and above the header divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   */\n  headerSlot?: ReactNode;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists. Use `none` when the host owns padding.\n   */\n  bodyPadding?: ModalBodyPadding;\n  /**\n   * When false, the body fills the dialog height so host panes can manage\n   * their own scroll regions (settings-style layouts). Default true sizes the\n   * body to its content. Overflow always uses Scrollbar (default track width).\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   * Close on Escape via a document listener while mounted. Escapes already\n   * handled by an inner widget (`defaultPrevented`) are ignored. Default: true.\n   */\n  closeOnEscape?: boolean;\n  /**\n   * Initial focus, Tab trap and focus restore. Set false when the host owns\n   * focus (e.g. a floating-ui `FloatingFocusManager`); pair with\n   * `closeOnEscape={false}` when the host also handles Escape. Initial focus\n   * and restore use the value at mount; the Tab trap follows later updates.\n   * Default: true.\n   */\n  manageFocus?: boolean;\n  /**\n   * Element to focus when the modal mounts (e.g. the first form field).\n   * Default: the dialog root.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /**\n   * Controlled visibility with the Compass enter/exit transition (fade + drop from the top + subtle scale 98%→100%,\n   * reverse on close, `--duration-quick`); the modal unmounts after the exit,\n   * and focus is restored then. Omit to keep the mount-controlled behavior\n   * (always rendered, no transition). The host still owns the state.\n   */\n  open?: boolean;\n  /** Called after the exit transition finishes and the modal unmounts (only when `open` is controlled). */\n  onExited?: () => void;\n}\n\ninterface ModalPanelState {\n  active: boolean;\n  transition: boolean;\n  visible: boolean;\n}\n\nfunction ModalPanel({\n  className = '',\n  style,\n  size = 'small',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  showBackButton = false,\n  onBack,\n  backLabel,\n  backButtonProps,\n  onClose,\n  closeLabel,\n  closeButtonProps,\n  headerDivider = true,\n  headerAction,\n  headerSlot,\n  bodyPadding = 'default',\n  scrollable = true,\n  children,\n  footer,\n  footerLeading,\n  footerType = '2-actions',\n  footerDivider = true,\n  closeOnEscape = true,\n  manageFocus = true,\n  initialFocusRef,\n  active,\n  transition,\n  visible,\n  ...rest\n}: ModalProps & ModalPanelState) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  useModalFocus(rootRef, {\n    initialFocusRef,\n    closeOnEscape,\n    manageFocus,\n    onClose,\n    active,\n  });\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    !scrollable && styles['modal__body-inner--fill'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const scrollClass = [\n    styles['modal__scroll'],\n    !scrollable && styles['modal__scroll--fill'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      {...rest}\n      ref={rootRef}\n      tabIndex={-1}\n      className={[\n        styles.modal,\n        sizeClass,\n        transition && styles['modal--transition'],\n        transition && visible && styles['modal--visible'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={style}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <ModalHeader\n        title={title}\n        titleId={titleId}\n        subtitle={subtitle}\n        subtitlePlacement={subtitlePlacement}\n        hideTitle={hideTitle}\n        showBackButton={showBackButton}\n        onBack={onBack}\n        backLabel={backLabel}\n        backButtonProps={backButtonProps}\n        onClose={onClose}\n        closeLabel={closeLabel}\n        closeButtonProps={closeButtonProps}\n        divider={headerDivider}\n        headerAction={headerAction}\n        headerSlot={headerSlot}\n      />\n\n      <div className={styles['modal__body']}>\n        <Scrollbar className={scrollClass}>{bodyInner}</Scrollbar>\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\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Owns dialog-level focus and keyboard behavior: initial focus, Tab trap,\n * Escape, and focus restore on unmount. Host owns portal, overlay/backdrop,\n * scroll lock, stacking, and open state. Mount-controlled by default; pass\n * `open` for the enter/exit transition.\n */\nexport default function Modal({ open, onExited, ...props }: ModalProps) {\n  const controlled = open !== undefined;\n  const { mounted, visible } = usePopoverTransition(open ?? true);\n  const wasMounted = useRef(mounted);\n  const onExitedRef = useRef(onExited);\n  onExitedRef.current = onExited;\n\n  useEffect(() => {\n    if (wasMounted.current && !mounted && controlled) {\n      onExitedRef.current?.();\n    }\n    wasMounted.current = mounted;\n  }, [mounted, controlled]);\n\n  if (controlled && !mounted) return null;\n\n  return (\n    <ModalPanel\n      {...props}\n      active={open ?? true}\n      transition={controlled}\n      visible={visible}\n    />\n  );\n}\n"],"names":["ModalPanel","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","headerDivider","headerAction","headerSlot","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","closeOnEscape","manageFocus","initialFocusRef","active","transition","visible","rest","rootRef","useRef","useModalFocus","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","scrollClass","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter","Modal","open","onExited","props","controlled","mounted","usePopoverTransition","wasMounted","onExitedRef","useEffect","_a"],"mappings":"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"}

package/dist/components/modal/Modal.css

@@ -0,0 +1 @@
+._modal_z87u6_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;max-width:calc(100vw - 2 * var(--spacing-xl));max-height:calc(100vh - 4 * var(--spacing-xxxxl));max-height:calc(100dvh - 4 * var(--spacing-xxxxl))}@media(min-height:900px){._modal_z87u6_2{max-height:calc(100vh - 6 * var(--spacing-xxxxl));max-height:calc(100dvh - 6 * var(--spacing-xxxxl))}}._modal--transition_z87u6_20{opacity:0;transform:translateY(calc(-1 * var(--spacing-xxxl))) scale(.98);transform-origin:top center;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}@media(prefers-reduced-motion:reduce){._modal--transition_z87u6_20{transform:none;transition:none}}._modal--visible_z87u6_33{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}@media(prefers-reduced-motion:reduce){._modal--visible_z87u6_33{transition:none}}._modal_z87u6_2:focus{outline:none}._modal--size-small_z87u6_47{width:600px}._modal--size-medium_z87u6_50{width:704px}._modal--size-large_z87u6_53{width:832px}._modal__body_z87u6_56{flex:1 1 auto;min-height:0;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr)}._modal__scroll_z87u6_63{min-height:0;max-height:100%}._modal__scroll--fill_z87u6_67 .simplebar-content{height:100%}._modal__body-inner_z87u6_70{padding:28px var(--spacing-xxxl)}._modal__body-inner--menu_z87u6_73{padding:var(--spacing-xs) var(--spacing-l)}._modal__body-inner--none_z87u6_76{padding:0}._modal__body-inner--fill_z87u6_79{height:100%;min-height:0}

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

@@ -0,0 +1,111 @@
+import { CSSProperties, HTMLAttributes, ReactNode, RefObject } from 'react';
+import { ModalFooterType } from '../modal-footer/ModalFooter';
+import { ModalSubtitlePlacement } from '../modal-header/ModalHeader';
+import { BuiltInButtonProps } from '../../utils/props';
+export type ModalSize = 'small' | 'medium' | 'large';
+/**
+ * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so
+ * row labels align with the 32px header/footer margins. `none` removes inset
+ * for host-owned full-bleed layouts (e.g. settings sidebars).
+ */
+export type ModalBodyPadding = 'default' | 'menu' | 'none';
+export type { ModalFooterType, ModalSubtitlePlacement };
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'style'> {
+    /** Extra class on the dialog root (size + chrome classes still apply). */
+    className?: string;
+    /** Inline style on the dialog root — prefer `className` for layout overrides. */
+    style?: CSSProperties;
+    /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */
+    size?: ModalSize;
+    /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */
+    title: ReactNode;
+    /** Optional secondary line — placement via `subtitlePlacement`. */
+    subtitle?: ReactNode;
+    /**
+     * Where the subtitle sits. Figma Modal Header: Below | Beside.
+     * Default: `below`.
+     */
+    subtitlePlacement?: ModalSubtitlePlacement;
+    /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */
+    hideTitle?: boolean;
+    /** When true, shows a back-arrow button before the title. */
+    showBackButton?: boolean;
+    /** Called when the back button is clicked. */
+    onBack?: () => void;
+    /** Accessible name for the back button. Default: "Go back". */
+    backLabel?: string;
+    /** Extra attributes for the back button (e.g. `data-testid`). */
+    backButtonProps?: BuiltInButtonProps;
+    /** Called when the × close button is clicked. */
+    onClose?: () => void;
+    /** Accessible name for the close button. Default: "Close". */
+    closeLabel?: string;
+    /** Extra attributes for the close button (e.g. `data-testid`). */
+    closeButtonProps?: BuiltInButtonProps;
+    /** Show divider between header and body. Default: true. */
+    headerDivider?: boolean;
+    /** Optional control before close (Button, search field, …). */
+    headerAction?: ReactNode;
+    /**
+     * Full-width slot rendered below the title row and above the header divider.
+     * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.
+     */
+    headerSlot?: ReactNode;
+    /**
+     * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for
+     * MenuItem lists. Use `none` when the host owns padding.
+     */
+    bodyPadding?: ModalBodyPadding;
+    /**
+     * When false, the body fills the dialog height so host panes can manage
+     * their own scroll regions (settings-style layouts). Default true sizes the
+     * body to its content. Overflow always uses Scrollbar (default track width).
+     */
+    scrollable?: boolean;
+    /** Body content. */
+    children: ReactNode;
+    /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */
+    footer?: ReactNode;
+    /** Left footer slot (pagination status, PaginationDots, …). */
+    footerLeading?: ReactNode;
+    /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */
+    footerType?: ModalFooterType;
+    /** Show divider between body and footer. Default: true. */
+    footerDivider?: boolean;
+    /**
+     * Close on Escape via a document listener while mounted. Escapes already
+     * handled by an inner widget (`defaultPrevented`) are ignored. Default: true.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Initial focus, Tab trap and focus restore. Set false when the host owns
+     * focus (e.g. a floating-ui `FloatingFocusManager`); pair with
+     * `closeOnEscape={false}` when the host also handles Escape. Initial focus
+     * and restore use the value at mount; the Tab trap follows later updates.
+     * Default: true.
+     */
+    manageFocus?: boolean;
+    /**
+     * Element to focus when the modal mounts (e.g. the first form field).
+     * Default: the dialog root.
+     */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /**
+     * Controlled visibility with the Compass enter/exit transition (fade + drop from the top + subtle scale 98%→100%,
+     * reverse on close, `--duration-quick`); the modal unmounts after the exit,
+     * and focus is restored then. Omit to keep the mount-controlled behavior
+     * (always rendered, no transition). The host still owns the state.
+     */
+    open?: boolean;
+    /** Called after the exit transition finishes and the modal unmounts (only when `open` is controlled). */
+    onExited?: () => void;
+}
+/**
+ * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.
+ * Owns dialog-level focus and keyboard behavior: initial focus, Tab trap,
+ * Escape, and focus restore on unmount. Host owns portal, overlay/backdrop,
+ * scroll lock, stacking, and open state. Mount-controlled by default; pass
+ * `open` for the enter/exit transition.
+ */
+export default function Modal({ open, onExited, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAE5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,CAAC;AAExD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,OAAO,CAC/B;IACC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;;OAIG;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;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yGAAyG;IACzG,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA+HD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,kDAwBrE"}

package/dist/components/modal/Modal.js

@@ -0,0 +1,130 @@
+import { jsx as n, jsxs as G } from "react/jsx-runtime";
+import { useRef as u, useEffect as J, useId as O } from "react";
+import { useModalFocus as Q } from "../../hooks/use-modal-focus.js";
+import { usePopoverTransition as U } from "../../hooks/use-popover-transition.js";
+import V from "../scrollbar/Scrollbar.js";
+import W from "../modal-footer/ModalFooter.js";
+import X from "../modal-header/ModalHeader.js";
+import { toKebab as Y } from "../../utils/string.js";
+import o from "./Modal.module.scss.js";
+function Z({
+  className: a = "",
+  style: t,
+  size: d = "small",
+  title: r,
+  subtitle: l,
+  subtitlePlacement: m = "below",
+  hideTitle: s = !1,
+  showBackButton: e = !1,
+  onBack: i,
+  backLabel: j,
+  backButtonProps: I,
+  onClose: f,
+  closeLabel: N,
+  closeButtonProps: w,
+  headerDivider: B = !0,
+  headerAction: F,
+  headerSlot: x,
+  bodyPadding: b = "default",
+  scrollable: _ = !0,
+  children: z,
+  footer: p,
+  footerLeading: v,
+  footerType: c = "2-actions",
+  footerDivider: C = !0,
+  closeOnEscape: g = !0,
+  manageFocus: H = !0,
+  initialFocusRef: K,
+  active: P,
+  transition: y,
+  visible: R,
+  ...S
+}) {
+  const M = u(null);
+  Q(M, {
+    initialFocusRef: K,
+    closeOnEscape: g,
+    manageFocus: H,
+    onClose: f,
+    active: P
+  });
+  const h = O(), $ = o[`modal--size-${Y(d)}`], k = [
+    o["modal__body-inner"],
+    b === "menu" && o["modal__body-inner--menu"],
+    b === "none" && o["modal__body-inner--none"],
+    !_ && o["modal__body-inner--fill"]
+  ].filter(Boolean).join(" "), q = /* @__PURE__ */ n("div", { className: k, children: z }), A = [
+    o.modal__scroll,
+    !_ && o["modal__scroll--fill"]
+  ].filter(Boolean).join(" "), D = p != null || v != null || c === "spacer-small" || c === "spacer-large";
+  return /* @__PURE__ */ G(
+    "div",
+    {
+      ...S,
+      ref: M,
+      tabIndex: -1,
+      className: [
+        o.modal,
+        $,
+        y && o["modal--transition"],
+        y && R && o["modal--visible"],
+        a
+      ].filter(Boolean).join(" "),
+      style: t,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": h,
+      children: [
+        /* @__PURE__ */ n(
+          X,
+          {
+            title: r,
+            titleId: h,
+            subtitle: l,
+            subtitlePlacement: m,
+            hideTitle: s,
+            showBackButton: e,
+            onBack: i,
+            backLabel: j,
+            backButtonProps: I,
+            onClose: f,
+            closeLabel: N,
+            closeButtonProps: w,
+            divider: B,
+            headerAction: F,
+            headerSlot: x
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: o.modal__body, children: /* @__PURE__ */ n(V, { className: A, children: q }) }),
+        D && /* @__PURE__ */ n(
+          W,
+          {
+            type: c,
+            divider: C,
+            leading: v,
+            children: p
+          }
+        )
+      ]
+    }
+  );
+}
+function to({ open: a, onExited: t, ...d }) {
+  const r = a !== void 0, { mounted: l, visible: m } = U(a ?? !0), s = u(l), e = u(t);
+  return e.current = t, J(() => {
+    var i;
+    s.current && !l && r && ((i = e.current) == null || i.call(e)), s.current = l;
+  }, [l, r]), r && !l ? null : /* @__PURE__ */ n(
+    Z,
+    {
+      ...d,
+      active: a ?? !0,
+      transition: r,
+      visible: m
+    }
+  );
+}
+export {
+  to as default
+};
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type {\n  CSSProperties,\n  HTMLAttributes,\n  ReactNode,\n  RefObject,\n} from 'react';\nimport { useEffect, useId, useRef } from 'react';\nimport { useModalFocus } from '@/hooks/use-modal-focus';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'style'\n> {\n  /** Extra class on the dialog root (size + chrome classes still apply). */\n  className?: string;\n  /** Inline style on the dialog root — prefer `className` for layout overrides. */\n  style?: CSSProperties;\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n  title: ReactNode;\n  /** Optional secondary line — placement via `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits. Figma Modal Header: Below | Beside.\n   * Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n  hideTitle?: boolean;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Go back\". */\n  backLabel?: string;\n  /** Extra attributes for the back button (e.g. `data-testid`). */\n  backButtonProps?: BuiltInButtonProps;\n  /** Called when the × close button is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Show divider between header and body. Default: true. */\n  headerDivider?: boolean;\n  /** Optional control before close (Button, search field, …). */\n  headerAction?: ReactNode;\n  /**\n   * Full-width slot rendered below the title row and above the header divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   */\n  headerSlot?: ReactNode;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists. Use `none` when the host owns padding.\n   */\n  bodyPadding?: ModalBodyPadding;\n  /**\n   * When false, the body fills the dialog height so host panes can manage\n   * their own scroll regions (settings-style layouts). Default true sizes the\n   * body to its content. Overflow always uses Scrollbar (default track width).\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   * Close on Escape via a document listener while mounted. Escapes already\n   * handled by an inner widget (`defaultPrevented`) are ignored. Default: true.\n   */\n  closeOnEscape?: boolean;\n  /**\n   * Initial focus, Tab trap and focus restore. Set false when the host owns\n   * focus (e.g. a floating-ui `FloatingFocusManager`); pair with\n   * `closeOnEscape={false}` when the host also handles Escape. Initial focus\n   * and restore use the value at mount; the Tab trap follows later updates.\n   * Default: true.\n   */\n  manageFocus?: boolean;\n  /**\n   * Element to focus when the modal mounts (e.g. the first form field).\n   * Default: the dialog root.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /**\n   * Controlled visibility with the Compass enter/exit transition (fade + drop from the top + subtle scale 98%→100%,\n   * reverse on close, `--duration-quick`); the modal unmounts after the exit,\n   * and focus is restored then. Omit to keep the mount-controlled behavior\n   * (always rendered, no transition). The host still owns the state.\n   */\n  open?: boolean;\n  /** Called after the exit transition finishes and the modal unmounts (only when `open` is controlled). */\n  onExited?: () => void;\n}\n\ninterface ModalPanelState {\n  active: boolean;\n  transition: boolean;\n  visible: boolean;\n}\n\nfunction ModalPanel({\n  className = '',\n  style,\n  size = 'small',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  showBackButton = false,\n  onBack,\n  backLabel,\n  backButtonProps,\n  onClose,\n  closeLabel,\n  closeButtonProps,\n  headerDivider = true,\n  headerAction,\n  headerSlot,\n  bodyPadding = 'default',\n  scrollable = true,\n  children,\n  footer,\n  footerLeading,\n  footerType = '2-actions',\n  footerDivider = true,\n  closeOnEscape = true,\n  manageFocus = true,\n  initialFocusRef,\n  active,\n  transition,\n  visible,\n  ...rest\n}: ModalProps & ModalPanelState) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  useModalFocus(rootRef, {\n    initialFocusRef,\n    closeOnEscape,\n    manageFocus,\n    onClose,\n    active,\n  });\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    !scrollable && styles['modal__body-inner--fill'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const scrollClass = [\n    styles['modal__scroll'],\n    !scrollable && styles['modal__scroll--fill'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      {...rest}\n      ref={rootRef}\n      tabIndex={-1}\n      className={[\n        styles.modal,\n        sizeClass,\n        transition && styles['modal--transition'],\n        transition && visible && styles['modal--visible'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={style}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <ModalHeader\n        title={title}\n        titleId={titleId}\n        subtitle={subtitle}\n        subtitlePlacement={subtitlePlacement}\n        hideTitle={hideTitle}\n        showBackButton={showBackButton}\n        onBack={onBack}\n        backLabel={backLabel}\n        backButtonProps={backButtonProps}\n        onClose={onClose}\n        closeLabel={closeLabel}\n        closeButtonProps={closeButtonProps}\n        divider={headerDivider}\n        headerAction={headerAction}\n        headerSlot={headerSlot}\n      />\n\n      <div className={styles['modal__body']}>\n        <Scrollbar className={scrollClass}>{bodyInner}</Scrollbar>\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\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Owns dialog-level focus and keyboard behavior: initial focus, Tab trap,\n * Escape, and focus restore on unmount. Host owns portal, overlay/backdrop,\n * scroll lock, stacking, and open state. Mount-controlled by default; pass\n * `open` for the enter/exit transition.\n */\nexport default function Modal({ open, onExited, ...props }: ModalProps) {\n  const controlled = open !== undefined;\n  const { mounted, visible } = usePopoverTransition(open ?? true);\n  const wasMounted = useRef(mounted);\n  const onExitedRef = useRef(onExited);\n  onExitedRef.current = onExited;\n\n  useEffect(() => {\n    if (wasMounted.current && !mounted && controlled) {\n      onExitedRef.current?.();\n    }\n    wasMounted.current = mounted;\n  }, [mounted, controlled]);\n\n  if (controlled && !mounted) return null;\n\n  return (\n    <ModalPanel\n      {...props}\n      active={open ?? true}\n      transition={controlled}\n      visible={visible}\n    />\n  );\n}\n"],"names":["ModalPanel","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","headerDivider","headerAction","headerSlot","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","closeOnEscape","manageFocus","initialFocusRef","active","transition","visible","rest","rootRef","useRef","useModalFocus","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","scrollClass","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter","Modal","open","onExited","props","controlled","mounted","usePopoverTransition","wasMounted","onExitedRef","useEffect","_a"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Modal.css');const _="_modal_z87u6_2",l="_modal__body_z87u6_56",o="_modal__scroll_z87u6_63",d={modal:_,"modal--transition":"_modal--transition_z87u6_20","modal--visible":"_modal--visible_z87u6_33","modal--size-small":"_modal--size-small_z87u6_47","modal--size-medium":"_modal--size-medium_z87u6_50","modal--size-large":"_modal--size-large_z87u6_53",modal__body:l,modal__scroll:o,"modal__scroll--fill":"_modal__scroll--fill_z87u6_67","modal__body-inner":"_modal__body-inner_z87u6_70","modal__body-inner--menu":"_modal__body-inner--menu_z87u6_73","modal__body-inner--none":"_modal__body-inner--none_z87u6_76","modal__body-inner--fill":"_modal__body-inner--fill_z87u6_79"};exports.default=d;exports.modal=_;exports.modal__body=l;exports.modal__scroll=o;
+//# sourceMappingURL=Modal.module.scss.cjs.map

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

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

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

@@ -0,0 +1,22 @@
+import './Modal.css';const _ = "_modal_z87u6_2", l = "_modal__body_z87u6_56", o = "_modal__scroll_z87u6_63", d = {
+  modal: _,
+  "modal--transition": "_modal--transition_z87u6_20",
+  "modal--visible": "_modal--visible_z87u6_33",
+  "modal--size-small": "_modal--size-small_z87u6_47",
+  "modal--size-medium": "_modal--size-medium_z87u6_50",
+  "modal--size-large": "_modal--size-large_z87u6_53",
+  modal__body: l,
+  modal__scroll: o,
+  "modal__scroll--fill": "_modal__scroll--fill_z87u6_67",
+  "modal__body-inner": "_modal__body-inner_z87u6_70",
+  "modal__body-inner--menu": "_modal__body-inner--menu_z87u6_73",
+  "modal__body-inner--none": "_modal__body-inner--none_z87u6_76",
+  "modal__body-inner--fill": "_modal__body-inner--fill_z87u6_79"
+};
+export {
+  d as default,
+  _ as modal,
+  l as modal__body,
+  o as modal__scroll
+};
+//# sourceMappingURL=Modal.module.scss.js.map

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

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

package/dist/components/modal/ModalOverlay.css

@@ -0,0 +1 @@
+@keyframes _modal-overlay-fade-in_gzgmt_1{0%{opacity:0}}._modal-overlay_gzgmt_7{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl) var(--spacing-xl) calc(var(--spacing-xl) + 2 * var(--spacing-xxl));background-color:var(--modal-overlay-bg);animation:_modal-overlay-fade-in_gzgmt_1 var(--duration-quick) var(--ease-entrance);transition:opacity var(--duration-quick) var(--ease-exit)}._modal-overlay--exiting_gzgmt_18{opacity:0;pointer-events:none}@media(prefers-reduced-motion:reduce){._modal-overlay_gzgmt_7{animation:none;transition:none}}

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_gzgmt_7","modal-overlay-fade-in":"_modal-overlay-fade-in_gzgmt_1","modal-overlay--exiting":"_modal-overlay--exiting_gzgmt_18"};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 a = {
+  "modal-overlay": "_modal-overlay_gzgmt_7",
+  "modal-overlay-fade-in": "_modal-overlay-fade-in_gzgmt_1",
+  "modal-overlay--exiting": "_modal-overlay--exiting_gzgmt_18"
+};
+export {
+  a 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

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

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

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

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

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

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

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

package/dist/components/modal/index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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   * Full-width slot rendered below the title row and above the divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   * Padding is provided by the slot container; no extra wrapper is needed.\n   */\n  headerSlot?: ReactNode;\n}\n\n/**\n * Modal Header — title row, optional subtitle (below or beside), optional back,\n * optional header action, and close. Compose into `Modal` or use standalone.\n *\n * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921\n */\nexport default function ModalHeader({\n  className = '',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  titleId,\n  showBackButton = false,\n  onBack,\n  backLabel = 'Go back',\n  backButtonProps,\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  divider = true,\n  headerAction,\n  headerSlot,\n}: ModalHeaderProps) {\n  const showTitleBlock = !hideTitle && title != null;\n  const showSubtitle = showTitleBlock && subtitle != null;\n  const beside = subtitlePlacement === 'beside' && showSubtitle;\n\n  return (\n    <div\n      className={[\n        styles['modal-header'],\n        !divider && styles['modal-header--no-divider'],\n        hideTitle && styles['modal-header--close-only'],\n        headerSlot && styles['modal-header--has-slot'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['modal-header__content']}>\n        {showTitleBlock ? (\n          <div className={styles['modal-header__titles']}>\n            <div className={styles['modal-header__primary']}>\n              {showBackButton && (\n                <IconButton\n                  {...backButtonProps}\n                  aria-label={backLabel}\n                  icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n                  onClick={onBack}\n                />\n              )}\n              <h2 id={titleId} className={styles['modal-header__title']}>\n                {title}\n              </h2>\n              {beside && (\n                <div className={styles['modal-header__subtitle-beside']}>\n                  <span\n                    className={styles['modal-header__subtitle-divider']}\n                    aria-hidden\n                  />\n                  <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n                </div>\n              )}\n            </div>\n            {showSubtitle && !beside && (\n              <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        ) : titleId != null && title != null ? (\n          <h2 id={titleId} className={styles['modal-header__title-sr']}>\n            {title}\n          </h2>\n        ) : null}\n\n        <div className={styles['modal-header__actions']}>\n          {headerAction}\n          <IconButton\n            {...closeButtonProps}\n            aria-label={closeLabel}\n            className={mergeClassNames(\n              styles['modal-header__close'],\n              closeButtonProps?.className,\n            )}\n            icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n            onClick={onClose}\n          />\n        </div>\n      </div>\n      {headerSlot && (\n        <div className={styles['modal-header__slot']}>{headerSlot}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["ModalHeader","className","title","subtitle","subtitlePlacement","hideTitle","titleId","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","divider","headerAction","headerSlot","showTitleBlock","showSubtitle","beside","jsxs","styles","jsx","IconButton","Icon","ArrowLeftIcon","mergeClassNames","CloseIcon"],"mappings":"4ZA4DA,SAAwBA,EAAY,CAClC,UAAAC,EAAY,GACZ,MAAAC,EACA,SAAAC,EACA,kBAAAC,EAAoB,QACpB,UAAAC,EAAY,GACZ,QAAAC,EACA,eAAAC,EAAiB,GACjB,OAAAC,EACA,UAAAC,EAAY,UACZ,gBAAAC,EACA,QAAAC,EACA,WAAAC,EAAa,QACb,iBAAAC,EACA,QAAAC,EAAU,GACV,aAAAC,EACA,WAAAC,CACF,EAAqB,CACnB,MAAMC,EAAiB,CAACZ,GAAaH,GAAS,KACxCgB,EAAeD,GAAkBd,GAAY,KAC7CgB,EAASf,IAAsB,UAAYc,EAEjD,OACEE,EAAAA,KAAC,MAAA,CACC,UAAW,CACTC,EAAAA,QAAO,cAAc,EACrB,CAACP,GAAWO,EAAAA,QAAO,0BAA0B,EAC7ChB,GAAagB,EAAAA,QAAO,0BAA0B,EAC9CL,GAAcK,EAAAA,QAAO,wBAAwB,EAC7CpB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAmB,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAJ,EACCG,EAAAA,KAAC,MAAA,CAAI,UAAWC,UAAO,sBAAsB,EAC3C,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAd,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGb,EACJ,aAAYD,EACZ,WAAOe,UAAA,CAAK,YAAQC,EAAA,EAAc,EAAI,KAAK,KAAK,EAChD,QAASjB,CAAA,CAAA,EAGbc,EAAAA,IAAC,MAAG,GAAIhB,EAAS,UAAWe,EAAAA,QAAO,qBAAqB,EACrD,SAAAnB,EACH,EACCiB,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAWC,UAAO,+BAA+B,EACpD,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAAA,QAAO,gCAAgC,EAClD,cAAW,EAAA,CAAA,QAEZ,IAAA,CAAE,UAAWA,EAAAA,QAAO,wBAAwB,EAAI,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAC5D,CAAA,EAEJ,EACCe,GAAgB,CAACC,GAChBG,EAAAA,IAAC,KAAE,UAAWD,EAAAA,QAAO,wBAAwB,EAAI,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAE9D,EACEG,GAAW,MAAQJ,GAAS,KAC9BoB,EAAAA,IAAC,KAAA,CAAG,GAAIhB,EAAS,UAAWe,UAAO,wBAAwB,EACxD,WACH,EACE,KAEJD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAN,EACDO,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGV,EACJ,aAAYD,EACZ,UAAWc,EAAAA,gBACTL,EAAAA,QAAO,qBAAqB,EAC5BR,GAAA,YAAAA,EAAkB,SAAA,EAEpB,WAAOW,UAAA,CAAK,YAAQG,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAAShB,CAAA,CAAA,CACX,CAAA,CACF,CAAA,EACF,EACCK,GACCM,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,oBAAoB,EAAI,SAAAL,CAAA,CAAW,CAAA,CAAA,CAAA,CAIlE"}

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

@@ -0,0 +1 @@
+._modal-header_1wwv5_2{display:flex;flex-direction:column;flex-shrink:0;border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12)}._modal-header--no-divider_1wwv5_8{border-bottom:none}._modal-header--no-divider_1wwv5_8 ._modal-header__content_1wwv5_11,._modal-header--has-slot_1wwv5_14 ._modal-header__content_1wwv5_11{padding-bottom:0}._modal-header--close-only_1wwv5_17 ._modal-header__content_1wwv5_11{justify-content:flex-end}._modal-header__content_1wwv5_11{display:flex;align-items:flex-start;gap:10px;width:100%;padding:var(--spacing-xxl) var(--spacing-xxxl)}._modal-header__titles_1wwv5_27{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:var(--spacing-m);min-width:0;padding:var(--spacing-xxxxs) 0}._modal-header__primary_1wwv5_36{display:flex;align-items:center;gap:var(--spacing-m);width:100%;min-height:var(--line-height-500)}._modal-header__title_1wwv5_27{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_1wwv5_53{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}._modal-header__subtitle_1wwv5_64{margin:0;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.72)}._modal-header__subtitle-beside_1wwv5_72{display:flex;flex-shrink:0;align-items:center;gap:var(--spacing-xs)}._modal-header__subtitle-beside_1wwv5_72 ._modal-header__subtitle_1wwv5_64{line-height:var(--line-height-200);white-space:nowrap}._modal-header__subtitle-divider_1wwv5_82{display:block;width:1px;height:var(--line-height-500);background-color:rgba(var(--center-channel-color-rgb),.16)}._modal-header__actions_1wwv5_88{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:7px;height:28px}._modal-header__close_1wwv5_96{margin-right:-12px;margin-top:-6px;margin-bottom:-6px}._modal-header__slot_1wwv5_101{padding:var(--spacing-l) var(--spacing-xxxl) var(--spacing-xxl)}