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

package/dist/components/message-separator/MessageSeparator.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MessageSeparator.module.css');const e={"message-separator":"_message-separator_1c3en_3","message-separator__line":"_message-separator__line_1c3en_10","message-separator__label":"_message-separator__label_1c3en_16","message-separator__text":"_message-separator__text_1c3en_22","message-separator__summarize":"_message-separator__summarize_1c3en_30","message-separator__summarize-icon":"_message-separator__summarize-icon_1c3en_54","message-separator__reply-gutter":"_message-separator__reply-gutter_1c3en_62","message-separator__reply-line-start":"_message-separator__reply-line-start_1c3en_68","message-separator--date":"_message-separator--date_1c3en_73","message-separator--new":"_message-separator--new_1c3en_76","message-separator--reply":"_message-separator--reply_1c3en_82"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MessageSeparator.css');const e={"message-separator":"_message-separator_2us0g_14","message-separator__line":"_message-separator__line_2us0g_21","message-separator__label":"_message-separator__label_2us0g_27","message-separator__text":"_message-separator__text_2us0g_33","message-separator__summarize":"_message-separator__summarize_2us0g_41","message-separator__summarize-icon":"_message-separator__summarize-icon_2us0g_65","message-separator__reply-gutter":"_message-separator__reply-gutter_2us0g_73","message-separator__reply-line-start":"_message-separator__reply-line-start_2us0g_79","message-separator--date":"_message-separator--date_2us0g_84","message-separator--new":"_message-separator--new_2us0g_87","message-separator--reply":"_message-separator--reply_2us0g_93"};exports.default=e;
 //# sourceMappingURL=MessageSeparator.module.scss.cjs.map

package/dist/components/message-separator/MessageSeparator.module.scss.js

@@ -1,15 +1,15 @@
-import './MessageSeparator.module.css';const e = {
-  "message-separator": "_message-separator_1c3en_3",
-  "message-separator__line": "_message-separator__line_1c3en_10",
-  "message-separator__label": "_message-separator__label_1c3en_16",
-  "message-separator__text": "_message-separator__text_1c3en_22",
-  "message-separator__summarize": "_message-separator__summarize_1c3en_30",
-  "message-separator__summarize-icon": "_message-separator__summarize-icon_1c3en_54",
-  "message-separator__reply-gutter": "_message-separator__reply-gutter_1c3en_62",
-  "message-separator__reply-line-start": "_message-separator__reply-line-start_1c3en_68",
-  "message-separator--date": "_message-separator--date_1c3en_73",
-  "message-separator--new": "_message-separator--new_1c3en_76",
-  "message-separator--reply": "_message-separator--reply_1c3en_82"
+import './MessageSeparator.css';const e = {
+  "message-separator": "_message-separator_2us0g_14",
+  "message-separator__line": "_message-separator__line_2us0g_21",
+  "message-separator__label": "_message-separator__label_2us0g_27",
+  "message-separator__text": "_message-separator__text_2us0g_33",
+  "message-separator__summarize": "_message-separator__summarize_2us0g_41",
+  "message-separator__summarize-icon": "_message-separator__summarize-icon_2us0g_65",
+  "message-separator__reply-gutter": "_message-separator__reply-gutter_2us0g_73",
+  "message-separator__reply-line-start": "_message-separator__reply-line-start_2us0g_79",
+  "message-separator--date": "_message-separator--date_2us0g_84",
+  "message-separator--new": "_message-separator--new_2us0g_87",
+  "message-separator--reply": "_message-separator--reply_2us0g_93"
 };
 export {
   e as default

package/dist/components/modal/Modal.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("react"),o=require("../icon-button/IconButton.cjs"),i=require("../icon/Icon.cjs"),h=require("../scrollbar/Scrollbar.cjs"),__b=require("@mattermost/compass-icons/components/close.js"),b=__b?.default??__b,__v=require("@mattermost/compass-icons/components/arrow-left.js"),v=__v?.default??__v,N=require("../../utils/string.cjs"),l=require("./Modal.module.scss.cjs");function q({size:t="small",title:r,subtitle:a,showBackButton:n=!1,onBack:c,onClose:u,headerDivider:m=!0,children:f,footer:s,footerDivider:_=!0}){const d=x.useId(),j=l.default[`modal--size-${N.toKebab(t)}`];return e.jsxs("div",{className:[l.default.modal,j].filter(Boolean).join(" "),role:"dialog","aria-modal":"true","aria-labelledby":d,children:[e.jsxs("div",{className:[l.default.modal__header,!m&&l.default["modal__header--no-divider"]].filter(Boolean).join(" "),children:[e.jsxs("div",{className:l.default["modal__header-inner"],children:[n&&e.jsx(o.default,{"aria-label":"Go back",icon:e.jsx(i.default,{glyph:e.jsx(v,{}),size:"20"}),onClick:c}),e.jsxs("div",{className:l.default["modal__title-group"],children:[e.jsx("h2",{id:d,className:l.default.modal__title,children:r}),a&&e.jsx("p",{className:l.default.modal__subtitle,children:a})]})]}),e.jsx(o.default,{"aria-label":"Close",className:l.default.modal__close,icon:e.jsx(i.default,{glyph:e.jsx(b,{}),size:"20"}),onClick:u})]}),e.jsx("div",{className:l.default.modal__body,children:e.jsx(h.default,{children:e.jsx("div",{className:l.default["modal__body-inner"],children:f})})}),s&&e.jsx("div",{className:[l.default.modal__footer,!_&&l.default["modal__footer--no-divider"]].filter(Boolean).join(" "),children:s})]})}exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),j=require("react"),A=require("../../hooks/use-modal-focus.cjs"),D=require("../../hooks/use-popover-transition.cjs"),G=require("../scrollbar/Scrollbar.cjs"),J=require("../modal-footer/ModalFooter.cjs"),Q=require("../modal-header/ModalHeader.cjs"),U=require("../../utils/string.cjs"),V=require("../../utils/useOnExited.cjs"),e=require("./Modal.module.scss.cjs");function W({className:o="",style:a,size:n="small",title:s,subtitle:t,subtitlePlacement:r="below",hideTitle:x=!1,showBackButton:q=!1,onBack:M,backLabel:h,backButtonProps:y,onClose:u,closeLabel:g,closeButtonProps:I,headerDivider:F=!0,headerAction:N,headerLeading:R,headerSlot:B,bodyPadding:i="default",scrollable:c=!0,children:O,footer:f,footerLeading:m,footerType:d="2-actions",footerDivider:P=!0,closeOnEscape:S=!0,manageFocus:k=!0,initialFocusRef:p,active:w,transition:_,visible:z,...C}){const b=j.useRef(null);A.useModalFocus(b,{initialFocusRef:p,closeOnEscape:S,manageFocus:k,onClose:u,active:w});const v=j.useId(),E=e.default[`modal--size-${U.toKebab(n)}`],H=[e.default["modal__body-inner"],i==="menu"&&e.default["modal__body-inner--menu"],i==="none"&&e.default["modal__body-inner--none"],!c&&e.default["modal__body-inner--fill"]].filter(Boolean).join(" "),K=l.jsx("div",{className:H,children:O}),T=[e.default.modal__scroll,!c&&e.default["modal__scroll--fill"]].filter(Boolean).join(" "),$=f!=null||m!=null||d==="spacer-small"||d==="spacer-large";return l.jsxs("div",{...C,ref:b,tabIndex:-1,className:[e.default.modal,E,_&&e.default["modal--transition"],_&&z&&e.default["modal--visible"],o].filter(Boolean).join(" "),style:a,role:"dialog","aria-modal":"true","aria-labelledby":v,children:[l.jsx(Q.default,{title:s,titleId:v,subtitle:t,subtitlePlacement:r,hideTitle:x,showBackButton:q,onBack:M,backLabel:h,backButtonProps:y,onClose:u,closeLabel:g,closeButtonProps:I,divider:F,headerAction:N,leading:R,headerSlot:B}),l.jsx("div",{className:e.default.modal__body,children:l.jsx(G.default,{className:T,children:K})}),$&&l.jsx(J.default,{type:d,divider:P,leading:m,children:f})]})}function X({open:o,onExited:a,...n}){const s=o!==void 0,{mounted:t,visible:r}=D.usePopoverTransition(o??!0);return V.useOnExited(t,a,s),s&&!t?null:l.jsx(W,{...n,active:o??!0,transition:s,visible:r})}exports.default=X;
 //# sourceMappingURL=Modal.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","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\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  /** 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  children,\n  footer,\n  footerDivider = true,\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\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 className={styles['modal__body-inner']}>{children}</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","children","footer","footerDivider","titleId","useId","sizeClass","styles","toKebab","jsxs","jsx","IconButton","Icon","ArrowLeftIcon","CloseIcon","Scrollbar"],"mappings":"kdAmCA,SAAwBA,EAAM,CAC5B,KAAAC,EAAO,QACP,MAAAC,EACA,SAAAC,EACA,eAAAC,EAAiB,GACjB,OAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,GAChB,SAAAC,EACA,OAAAC,EACA,cAAAC,EAAgB,EAClB,EAAe,CACb,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQd,CAAI,CAAC,EAAE,EAEvD,OACEe,EAAAA,KAAC,MAAA,CACC,UAAW,CAACF,UAAO,MAAOD,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,KAAK,SACL,aAAW,OACX,kBAAiBF,EAEjB,SAAA,CAAAK,EAAAA,KAAC,MAAA,CACC,UAAW,CACTF,EAAAA,QAAO,cACP,CAACP,GAAiBO,EAAAA,QAAO,2BAA2B,CAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,qBAAqB,EACzC,SAAA,CAAAV,GACCa,EAAAA,IAACC,EAAAA,QAAA,CACC,aAAW,UACX,WAAOC,UAAA,CAAK,YAAQC,EAAA,EAAc,EAAI,KAAK,KAAK,EAChD,QAASf,CAAA,CAAA,EAGbW,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAG,EAAAA,IAAC,MAAG,GAAIN,EAAS,UAAWG,EAAAA,QAAO,aAChC,SAAAZ,EACH,EACCC,GACCc,EAAAA,IAAC,IAAA,CAAE,UAAWH,EAAAA,QAAO,gBAAqB,SAAAX,CAAA,CAAS,CAAA,CAAA,CAEvD,CAAA,EACF,EACAc,EAAAA,IAACC,EAAAA,QAAA,CACC,aAAW,QACX,UAAWJ,EAAAA,QAAO,aAClB,WAAOK,UAAA,CAAK,YAAQE,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAASf,CAAA,CAAA,CACX,CAAA,CAAA,QAGD,MAAA,CAAI,UAAWQ,EAAAA,QAAO,YACrB,SAAAG,EAAAA,IAACK,UAAA,CACC,SAAAL,MAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,mBAAmB,EAAI,SAAAN,CAAA,CAAS,EACzD,EACF,EAECC,GACCQ,EAAAA,IAAC,MAAA,CACC,UAAW,CACTH,EAAAA,QAAO,cACP,CAACJ,GAAiBI,EAAAA,QAAO,2BAA2B,CAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAL,CAAA,CAAA,CACH,CAAA,CAAA,CAIR"}
+{"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 { 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 { useOnExited } from '@/utils/useOnExited';\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   * Custom content in the title position: left aligned and vertically\n   * centered with the close button. Not wrapped in the heading, so it does\n   * not inherit heading type. `title` stays required and names the dialog;\n   * it is visually hidden, the same as `hideTitle`. The subtitle is omitted.\n   * `hideTitle` without this prop stays the close-only header. `headerSlot`\n   * stays the full-width area under the title row.\n   */\n  headerLeading?: 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  headerLeading,\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        leading={headerLeading}\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 (title, or `headerLeading` in the\n * title position), 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  useOnExited(mounted, onExited, 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","headerLeading","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","useOnExited"],"mappings":"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"}

package/dist/components/modal/Modal.css

@@ -0,0 +1 @@
+._modal_ry0g9_13{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_ry0g9_13{max-height:calc(100vh - 6 * var(--spacing-xxxxl));max-height:calc(100dvh - 6 * var(--spacing-xxxxl))}}._modal--transition_ry0g9_31{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_ry0g9_31{transform:none;transition:none}}._modal--visible_ry0g9_44{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_ry0g9_44{transition:none}}._modal_ry0g9_13:focus{outline:none}._modal--size-small_ry0g9_58{width:600px}._modal--size-medium_ry0g9_61{width:704px}._modal--size-large_ry0g9_64{width:832px}._modal__body_ry0g9_67{flex:1 1 auto;min-height:0;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr)}._modal__scroll_ry0g9_74{min-height:0;max-height:100%}._modal__scroll--fill_ry0g9_78 .simplebar-content{height:100%}._modal__body-inner_ry0g9_81{padding:28px var(--spacing-xxxl)}._modal__body-inner--menu_ry0g9_84{padding:var(--spacing-xs) var(--spacing-l)}._modal__body-inner--none_ry0g9_87{padding:0}._modal__body-inner--fill_ry0g9_90{height:100%;min-height:0}

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

@@ -1,26 +1,121 @@
-import { ReactNode } from 'react';
+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';
-export interface ModalProps {
+/**
+ * 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. Always visible. */
+    /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */
     title: ReactNode;
-    /** Optional secondary line below the title. */
+    /** 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;
-    /** Show divider between header and body. Figma: Divider = On. Default: true. */
+    /** 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;
+    /**
+     * Custom content in the title position: left aligned and vertically
+     * centered with the close button. Not wrapped in the heading, so it does
+     * not inherit heading type. `title` stays required and names the dialog;
+     * it is visually hidden, the same as `hideTitle`. The subtitle is omitted.
+     * `hideTitle` without this prop stays the close-only header. `headerSlot`
+     * stays the full-width area under the title row.
+     */
+    headerLeading?: 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 a group of Buttons, right-aligned by default. */
+    /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */
     footer?: ReactNode;
-    /** Show divider between body and footer. Figma: Divider = On. Default: true. */
+    /** 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;
 }
-export default function Modal({ size, title, subtitle, showBackButton, onBack, onClose, headerDivider, children, footer, footerDivider, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Modal dialog shell — composes ModalHeader (title, or `headerLeading` in the
+ * title position), 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

@@ -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,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,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,QAAQ,EACR,MAAM,EACN,aAAoB,GACrB,EAAE,UAAU,2CAgEZ"}
+{"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;AAKxD,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;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;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;AAiID;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,kDAerE"}

package/dist/components/modal/Modal.js

@@ -1,83 +1,130 @@
-import { jsxs as e, jsx as l } from "react/jsx-runtime";
-import { useId as N } from "react";
-import d from "../icon-button/IconButton.js";
-import m from "../icon/Icon.js";
-import u from "../scrollbar/Scrollbar.js";
-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 { toKebab as I } from "../../utils/string.js";
+import { jsx as l, jsxs as A } from "react/jsx-runtime";
+import { useRef as D, useId as G } from "react";
+import { useModalFocus as J } from "../../hooks/use-modal-focus.js";
+import { usePopoverTransition as Q } from "../../hooks/use-popover-transition.js";
+import U from "../scrollbar/Scrollbar.js";
+import V from "../modal-footer/ModalFooter.js";
+import W from "../modal-header/ModalHeader.js";
+import { toKebab as X } from "../../utils/string.js";
+import { useOnExited as Y } from "../../utils/useOnExited.js";
 import o from "./Modal.module.scss.js";
-function G({
-  size: s = "small",
-  title: n,
+function Z({
+  className: e = "",
+  style: n,
+  size: i = "small",
+  title: r,
   subtitle: a,
-  showBackButton: c = !1,
-  onBack: t,
-  onClose: _,
-  headerDivider: f = !0,
-  children: h,
-  footer: i,
-  footerDivider: p = !0
+  subtitlePlacement: t = "below",
+  hideTitle: v = !1,
+  showBackButton: y = !1,
+  onBack: h,
+  backLabel: j,
+  backButtonProps: x,
+  onClose: d,
+  closeLabel: I,
+  closeButtonProps: M,
+  headerDivider: N = !0,
+  headerAction: B,
+  headerLeading: F,
+  headerSlot: g,
+  bodyPadding: m = "default",
+  scrollable: c = !0,
+  children: w,
+  footer: u,
+  footerLeading: f,
+  footerType: s = "2-actions",
+  footerDivider: z = !0,
+  closeOnEscape: C = !0,
+  manageFocus: R = !0,
+  initialFocusRef: E,
+  active: H,
+  transition: b,
+  visible: K,
+  ...O
 }) {
-  const r = N(), b = o[`modal--size-${I(s)}`];
-  return /* @__PURE__ */ e(
+  const _ = D(null);
+  J(_, {
+    initialFocusRef: E,
+    closeOnEscape: C,
+    manageFocus: R,
+    onClose: d,
+    active: H
+  });
+  const p = G(), P = o[`modal--size-${X(i)}`], S = [
+    o["modal__body-inner"],
+    m === "menu" && o["modal__body-inner--menu"],
+    m === "none" && o["modal__body-inner--none"],
+    !c && o["modal__body-inner--fill"]
+  ].filter(Boolean).join(" "), $ = /* @__PURE__ */ l("div", { className: S, children: w }), k = [
+    o.modal__scroll,
+    !c && o["modal__scroll--fill"]
+  ].filter(Boolean).join(" "), q = u != null || f != null || s === "spacer-small" || s === "spacer-large";
+  return /* @__PURE__ */ A(
     "div",
     {
-      className: [o.modal, b].filter(Boolean).join(" "),
+      ...O,
+      ref: _,
+      tabIndex: -1,
+      className: [
+        o.modal,
+        P,
+        b && o["modal--transition"],
+        b && K && o["modal--visible"],
+        e
+      ].filter(Boolean).join(" "),
+      style: n,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": r,
+      "aria-labelledby": p,
       children: [
-        /* @__PURE__ */ e(
-          "div",
+        /* @__PURE__ */ l(
+          W,
           {
-            className: [
-              o.modal__header,
-              !f && o["modal__header--no-divider"]
-            ].filter(Boolean).join(" "),
-            children: [
-              /* @__PURE__ */ e("div", { className: o["modal__header-inner"], children: [
-                c && /* @__PURE__ */ l(
-                  d,
-                  {
-                    "aria-label": "Go back",
-                    icon: /* @__PURE__ */ l(m, { glyph: /* @__PURE__ */ l(y, {}), size: "20" }),
-                    onClick: t
-                  }
-                ),
-                /* @__PURE__ */ e("div", { className: o["modal__title-group"], children: [
-                  /* @__PURE__ */ l("h2", { id: r, className: o.modal__title, children: n }),
-                  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(v, {}), size: "20" }),
-                  onClick: _
-                }
-              )
-            ]
+            title: r,
+            titleId: p,
+            subtitle: a,
+            subtitlePlacement: t,
+            hideTitle: v,
+            showBackButton: y,
+            onBack: h,
+            backLabel: j,
+            backButtonProps: x,
+            onClose: d,
+            closeLabel: I,
+            closeButtonProps: M,
+            divider: N,
+            headerAction: B,
+            leading: F,
+            headerSlot: g
           }
         ),
-        /* @__PURE__ */ l("div", { className: o.modal__body, children: /* @__PURE__ */ l(u, { children: /* @__PURE__ */ l("div", { className: o["modal__body-inner"], children: h }) }) }),
-        i && /* @__PURE__ */ l(
-          "div",
+        /* @__PURE__ */ l("div", { className: o.modal__body, children: /* @__PURE__ */ l(U, { className: k, children: $ }) }),
+        q && /* @__PURE__ */ l(
+          V,
           {
-            className: [
-              o.modal__footer,
-              !p && o["modal__footer--no-divider"]
-            ].filter(Boolean).join(" "),
-            children: i
+            type: s,
+            divider: z,
+            leading: f,
+            children: u
           }
         )
       ]
     }
   );
 }
+function so({ open: e, onExited: n, ...i }) {
+  const r = e !== void 0, { mounted: a, visible: t } = Q(e ?? !0);
+  return Y(a, n, r), r && !a ? null : /* @__PURE__ */ l(
+    Z,
+    {
+      ...i,
+      active: e ?? !0,
+      transition: r,
+      visible: t
+    }
+  );
+}
 export {
-  G as default
+  so 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\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  /** 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  children,\n  footer,\n  footerDivider = true,\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\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 className={styles['modal__body-inner']}>{children}</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","children","footer","footerDivider","titleId","useId","sizeClass","styles","toKebab","jsxs","jsx","IconButton","Icon","ArrowLeftIcon","CloseIcon","Scrollbar"],"mappings":";;;;;;;;;AAmCA,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,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,GAAe;AACb,QAAMC,IAAUC,EAAA,GACVC,IAAYC,EAAO,eAAeC,EAAQd,CAAI,CAAC,EAAE;AAEvD,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACF,EAAO,OAAOD,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC7D,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiBF;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTF,EAAO;AAAA,cACP,CAACP,KAAiBO,EAAO,2BAA2B;AAAA,YAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YAEX,UAAA;AAAA,cAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,qBAAqB,GACzC,UAAA;AAAA,gBAAAV,KACC,gBAAAa;AAAA,kBAACC;AAAA,kBAAA;AAAA,oBACC,cAAW;AAAA,oBACX,wBAAOC,GAAA,EAAK,yBAAQC,GAAA,EAAc,GAAI,MAAK,MAAK;AAAA,oBAChD,SAASf;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGb,gBAAAW,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACzC,UAAA;AAAA,kBAAA,gBAAAG,EAAC,QAAG,IAAIN,GAAS,WAAWG,EAAO,cAChC,UAAAZ,GACH;AAAA,kBACCC,KACC,gBAAAc,EAAC,KAAA,EAAE,WAAWH,EAAO,iBAAqB,UAAAX,EAAA,CAAS;AAAA,gBAAA,EAAA,CAEvD;AAAA,cAAA,GACF;AAAA,cACA,gBAAAc;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACC,cAAW;AAAA,kBACX,WAAWJ,EAAO;AAAA,kBAClB,wBAAOK,GAAA,EAAK,yBAAQE,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,kBAC5C,SAASf;AAAA,gBAAA;AAAA,cAAA;AAAA,YACX;AAAA,UAAA;AAAA,QAAA;AAAA,0BAGD,OAAA,EAAI,WAAWQ,EAAO,aACrB,UAAA,gBAAAG,EAACK,GAAA,EACC,UAAA,gBAAAL,EAAC,OAAA,EAAI,WAAWH,EAAO,mBAAmB,GAAI,UAAAN,EAAA,CAAS,GACzD,GACF;AAAA,QAECC,KACC,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTH,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 {\n  CSSProperties,\n  HTMLAttributes,\n  ReactNode,\n  RefObject,\n} from 'react';\nimport { 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 { useOnExited } from '@/utils/useOnExited';\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   * Custom content in the title position: left aligned and vertically\n   * centered with the close button. Not wrapped in the heading, so it does\n   * not inherit heading type. `title` stays required and names the dialog;\n   * it is visually hidden, the same as `hideTitle`. The subtitle is omitted.\n   * `hideTitle` without this prop stays the close-only header. `headerSlot`\n   * stays the full-width area under the title row.\n   */\n  headerLeading?: 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  headerLeading,\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        leading={headerLeading}\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 (title, or `headerLeading` in the\n * title position), 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  useOnExited(mounted, onExited, 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","headerLeading","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","useOnExited"],"mappings":"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"}

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_e32ek_2",e="_modal__header_e32ek_20",o="_modal__title_e32ek_40",d="_modal__subtitle_e32ek_54",l="_modal__close_e32ek_61",a="_modal__body_e32ek_66",m="_modal__footer_e32ek_73",t={modal:_,"modal--size-small":"_modal--size-small_e32ek_11","modal--size-medium":"_modal--size-medium_e32ek_14","modal--size-large":"_modal--size-large_e32ek_17",modal__header:e,"modal__header--no-divider":"_modal__header--no-divider_e32ek_28","modal__header-inner":"_modal__header-inner_e32ek_32","modal__title-group":"_modal__title-group_e32ek_40",modal__title:o,modal__subtitle:d,modal__close:l,modal__body:a,"modal__body-inner":"_modal__body-inner_e32ek_70",modal__footer:m,"modal__footer--no-divider":"_modal__footer--no-divider_e32ek_82"};exports.default=t;exports.modal=_;exports.modal__body=a;exports.modal__close=l;exports.modal__footer=m;exports.modal__header=e;exports.modal__subtitle=d;exports.modal__title=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Modal.css');const _="_modal_ry0g9_13",l="_modal__body_ry0g9_67",o="_modal__scroll_ry0g9_74",d={modal:_,"modal--transition":"_modal--transition_ry0g9_31","modal--visible":"_modal--visible_ry0g9_44","modal--size-small":"_modal--size-small_ry0g9_58","modal--size-medium":"_modal--size-medium_ry0g9_61","modal--size-large":"_modal--size-large_ry0g9_64",modal__body:l,modal__scroll:o,"modal__scroll--fill":"_modal__scroll--fill_ry0g9_78","modal__body-inner":"_modal__body-inner_ry0g9_81","modal__body-inner--menu":"_modal__body-inner--menu_ry0g9_84","modal__body-inner--none":"_modal__body-inner--none_ry0g9_87","modal__body-inner--fill":"_modal__body-inner--fill_ry0g9_90"};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.js

@@ -1,28 +1,22 @@
-import './Modal.module.css';const _ = "_modal_e32ek_2", e = "_modal__header_e32ek_20", o = "_modal__title_e32ek_40", d = "_modal__subtitle_e32ek_54", l = "_modal__close_e32ek_61", a = "_modal__body_e32ek_66", m = "_modal__footer_e32ek_73", t = {
+import './Modal.css';const _ = "_modal_ry0g9_13", l = "_modal__body_ry0g9_67", o = "_modal__scroll_ry0g9_74", d = {
   modal: _,
-  "modal--size-small": "_modal--size-small_e32ek_11",
-  "modal--size-medium": "_modal--size-medium_e32ek_14",
-  "modal--size-large": "_modal--size-large_e32ek_17",
-  modal__header: e,
-  "modal__header--no-divider": "_modal__header--no-divider_e32ek_28",
-  "modal__header-inner": "_modal__header-inner_e32ek_32",
-  "modal__title-group": "_modal__title-group_e32ek_40",
-  modal__title: o,
-  modal__subtitle: d,
-  modal__close: l,
-  modal__body: a,
-  "modal__body-inner": "_modal__body-inner_e32ek_70",
-  modal__footer: m,
-  "modal__footer--no-divider": "_modal__footer--no-divider_e32ek_82"
+  "modal--transition": "_modal--transition_ry0g9_31",
+  "modal--visible": "_modal--visible_ry0g9_44",
+  "modal--size-small": "_modal--size-small_ry0g9_58",
+  "modal--size-medium": "_modal--size-medium_ry0g9_61",
+  "modal--size-large": "_modal--size-large_ry0g9_64",
+  modal__body: l,
+  modal__scroll: o,
+  "modal__scroll--fill": "_modal__scroll--fill_ry0g9_78",
+  "modal__body-inner": "_modal__body-inner_ry0g9_81",
+  "modal__body-inner--menu": "_modal__body-inner--menu_ry0g9_84",
+  "modal__body-inner--none": "_modal__body-inner--none_ry0g9_87",
+  "modal__body-inner--fill": "_modal__body-inner--fill_ry0g9_90"
 };
 export {
-  t as default,
+  d as default,
   _ as modal,
-  a as modal__body,
-  l as modal__close,
-  m as modal__footer,
-  e as modal__header,
-  d as modal__subtitle,
-  o as modal__title
+  l as modal__body,
+  o as modal__scroll
 };
 //# 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/ModalOverlay.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react/jsx-runtime"),l=require("react"),P=require("react-dom"),_=require("../../hooks/use-popover-transition.cjs"),b=require("../../utils/props.cjs"),h=require("../../utils/scrollLock.cjs"),j=require("../../utils/useOnExited.cjs"),f=require("./ModalOverlay.module.scss.cjs");function E({open:u,onClose:s,onExited:m,container:c,lockScroll:d=!0,zIndex:i,className:v,style:g,children:y,onMouseDown:a,onClick:n,...q}){const{mounted:r}=_.usePopoverTransition(u);j.useOnExited(r,m);const o=l.useRef(!1),t=c===void 0?typeof document>"u"?null:document.body:c;if(l.useEffect(()=>{if(!(!r||!t||!d))return h.lockBodyScroll(t.ownerDocument)},[r,t,d]),!r||!t)return null;const p=e=>{o.current=e.target!==e.currentTarget,a==null||a(e)},O=e=>{const T=o.current;o.current=!1,n==null||n(e),u&&!T&&e.target===e.currentTarget&&(s==null||s())};return P.createPortal(x.jsx("div",{...q,className:b.mergeClassNames(f.default["modal-overlay"],!u&&f.default["modal-overlay--exiting"],v),style:{...i!==void 0&&{zIndex:i},...g},onMouseDown:p,onClick:O,children:y}),t)}exports.default=E;
+//# sourceMappingURL=ModalOverlay.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOverlay.cjs","sources":["../../../src/components/modal/ModalOverlay.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeClassNames } from '@/utils/props';\nimport { lockBodyScroll } from '@/utils/scrollLock';\nimport { useOnExited } from '@/utils/useOnExited';\nimport styles from './ModalOverlay.module.scss';\n\nexport interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the overlay is shown. Setting it to `false` plays the exit and then unmounts. */\n  open: boolean;\n  /** Called when the backdrop is pressed. Presses that start inside the dialog do not call it. */\n  onClose?: () => void;\n  /**\n   * Called once the exit finishes and the overlay has unmounted. Not called if\n   * the overlay itself is unmounted before the exit finishes, so do any\n   * cleanup on unmount as well.\n   */\n  onExited?: () => void;\n  /**\n   * Portal node. Defaults to `document.body`; pass another element so a modal\n   * inside another top layer can join it. `null` renders nothing until the node\n   * exists (e.g. a ref held in state). Override `position` through `style`\n   * when the container is a positioned stage. Scroll lock applies to that\n   * node's document.\n   */\n  container?: HTMLElement | null;\n  /**\n   * Lock `document.body` scroll while the overlay is mounted. Turn off for an\n   * overlay staged inside a frame (docs, Storybook) so it doesn't freeze the page.\n   */\n  lockScroll?: boolean;\n  /**\n   * Stacking order. Defaults to `--z-modal` (1050, the webapp's modal layer).\n   * A confirm opened over another modal should pass `var(--z-confirm-modal)`\n   * (1060); other host chrome that sits higher passes a value or redefines\n   * `--z-modal`. Applied before `style`, so `style.zIndex` wins.\n   */\n  zIndex?: number | string;\n  /** Usually a `Modal`. */\n  children?: ReactNode;\n}\n\n/**\n * Modal scrim: portals to `document.body` (or `container`), locks body scroll\n * while shown (opt out with `lockScroll={false}`), closes on backdrop press, and stays mounted for\n * `--duration-quick` after `open` becomes false so the fade-out can play.\n * Escape and focus stay on `Modal`. Hosts that already position their own\n * node can use `modalOverlayStyles` instead.\n */\nexport default function ModalOverlay({\n  open,\n  onClose,\n  onExited,\n  container,\n  lockScroll = true,\n  zIndex,\n  className,\n  style,\n  children,\n  onMouseDown,\n  onClick,\n  ...rest\n}: ModalOverlayProps) {\n  const { mounted } = usePopoverTransition(open);\n  useOnExited(mounted, onExited);\n  const pressStartedInside = useRef(false);\n\n  const target =\n    container === undefined\n      ? typeof document === 'undefined'\n        ? null\n        : document.body\n      : container;\n\n  useEffect(() => {\n    if (!mounted || !target || !lockScroll) return undefined;\n    return lockBodyScroll(target.ownerDocument);\n  }, [mounted, target, lockScroll]);\n\n  if (!mounted || !target) return null;\n\n  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n    pressStartedInside.current = e.target !== e.currentTarget;\n    onMouseDown?.(e);\n  };\n\n  const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n    const startedInside = pressStartedInside.current;\n    pressStartedInside.current = false;\n    onClick?.(e);\n    if (open && !startedInside && e.target === e.currentTarget) onClose?.();\n  };\n\n  return createPortal(\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- backdrop click is a pointer shortcut; keyboard users close with Escape (handled by Modal)\n    <div\n      {...rest}\n      className={mergeClassNames(\n        styles['modal-overlay'],\n        !open && styles['modal-overlay--exiting'],\n        className,\n      )}\n      style={{ ...(zIndex !== undefined && { zIndex }), ...style }}\n      onMouseDown={handleMouseDown}\n      onClick={handleClick}\n    >\n      {children}\n    </div>,\n    target,\n  );\n}\n"],"names":["ModalOverlay","open","onClose","onExited","container","lockScroll","zIndex","className","style","children","onMouseDown","onClick","rest","mounted","usePopoverTransition","useOnExited","pressStartedInside","useRef","target","useEffect","lockBodyScroll","handleMouseDown","handleClick","startedInside","createPortal","jsx","mergeClassNames","styles"],"mappings":"6YAwDA,SAAwBA,EAAa,CACnC,KAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,EAAa,GACb,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,YAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAAsB,CACpB,KAAM,CAAE,QAAAC,CAAA,EAAYC,EAAAA,qBAAqBb,CAAI,EAC7Cc,EAAAA,YAAYF,EAASV,CAAQ,EAC7B,MAAMa,EAAqBC,EAAAA,OAAO,EAAK,EAEjCC,EACJd,IAAc,OACV,OAAO,SAAa,IAClB,KACA,SAAS,KACXA,EAON,GALAe,EAAAA,UAAU,IAAM,CACd,GAAI,GAACN,GAAW,CAACK,GAAU,CAACb,GAC5B,OAAOe,EAAAA,eAAeF,EAAO,aAAa,CAC5C,EAAG,CAACL,EAASK,EAAQb,CAAU,CAAC,EAE5B,CAACQ,GAAW,CAACK,EAAQ,OAAO,KAEhC,MAAMG,EAAmB,GAAkC,CACzDL,EAAmB,QAAU,EAAE,SAAW,EAAE,cAC5CN,GAAA,MAAAA,EAAc,EAChB,EAEMY,EAAe,GAAkC,CACrD,MAAMC,EAAgBP,EAAmB,QACzCA,EAAmB,QAAU,GAC7BL,GAAA,MAAAA,EAAU,GACNV,GAAQ,CAACsB,GAAiB,EAAE,SAAW,EAAE,gBAAerB,GAAA,MAAAA,IAC9D,EAEA,OAAOsB,EAAAA,aAELC,EAAAA,IAAC,MAAA,CACE,GAAGb,EACJ,UAAWc,EAAAA,gBACTC,EAAAA,QAAO,eAAe,EACtB,CAAC1B,GAAQ0B,EAAAA,QAAO,wBAAwB,EACxCpB,CAAA,EAEF,MAAO,CAAE,GAAID,IAAW,QAAa,CAAE,OAAAA,CAAA,EAAW,GAAGE,CAAA,EACrD,YAAaa,EACb,QAASC,EAER,SAAAb,CAAA,CAAA,EAEHS,CAAA,CAEJ"}

package/dist/components/modal/ModalOverlay.css

@@ -0,0 +1 @@
+@keyframes _modal-overlay-fade-in_1oqns_1{0%{opacity:0}}._modal-overlay_1oqns_18{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));z-index:var(--z-modal);background-color:var(--modal-overlay-bg);animation:_modal-overlay-fade-in_1oqns_1 var(--duration-quick) var(--ease-entrance);transition:opacity var(--duration-quick) var(--ease-exit)}._modal-overlay--exiting_1oqns_30{opacity:0;pointer-events:none}@media(prefers-reduced-motion:reduce){._modal-overlay_1oqns_18{animation:none;transition:none}}