@mattermost/compass-ui 0.1.0-alpha.18 → 0.1.0-alpha.19

package/dist/compass-ui.css

@@ -259,6 +259,7 @@
     --elevation-4: 0 8px 24px 0 #0000001f;
     --elevation-5: 0 12px 32px 0 #0000001f;
     --elevation-6: 0 20px 32px 0 #0000001f;
+    --modal-overlay-bg: rgba(var(--color-neutral-1200-rgb), 0.64);
     --duration-quick: 150ms;
     --duration-moderate: 300ms;
     --ease-transition: ease-in-out;

package/dist/components/modal/Modal.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),n=require("react"),T=require("../../hooks/use-modal-focus.cjs"),$=require("../../hooks/use-popover-transition.cjs"),A=require("../scrollbar/Scrollbar.cjs"),D=require("../modal-footer/ModalFooter.cjs"),G=require("../modal-header/ModalHeader.cjs"),J=require("../../utils/string.cjs"),e=require("./Modal.module.scss.cjs");function Q({className:s="",style:a,size:i="small",title:r,subtitle:l,subtitlePlacement:c="below",hideTitle:u=!1,showBackButton:t=!1,onBack:d,backLabel:x,backButtonProps:y,onClose:m,closeLabel:I,closeButtonProps:R,headerDivider:g=!0,headerAction:F,headerSlot:w,bodyPadding:b="default",scrollable:N=!0,children:P,footer:_,footerLeading:v,footerType:f="2-actions",footerDivider:S=!0,closeOnEscape:k=!0,initialFocusRef:p,active:z,transition:j,visible:B,...C}){const M=n.useRef(null);T.useModalFocus(M,{initialFocusRef:p,closeOnEscape:k,onClose:m,active:z});const q=n.useId(),H=e.default[`modal--size-${J.toKebab(i)}`],K=[e.default["modal__body-inner"],b==="menu"&&e.default["modal__body-inner--menu"],b==="none"&&e.default["modal__body-inner--none"]].filter(Boolean).join(" "),h=o.jsx("div",{className:K,children:P}),O=_!=null||v!=null||f==="spacer-small"||f==="spacer-large";return o.jsxs("div",{...C,ref:M,tabIndex:-1,className:[e.default.modal,H,j&&e.default["modal--transition"],j&&B&&e.default["modal--visible"],s].filter(Boolean).join(" "),style:a,role:"dialog","aria-modal":"true","aria-labelledby":q,children:[o.jsx(G.default,{title:r,titleId:q,subtitle:l,subtitlePlacement:c,hideTitle:u,showBackButton:t,onBack:d,backLabel:x,backButtonProps:y,onClose:m,closeLabel:I,closeButtonProps:R,divider:g,headerAction:F,headerSlot:w}),o.jsx("div",{className:e.default.modal__body,children:N?o.jsx(A.default,{children:h}):h}),O&&o.jsx(D.default,{type:f,divider:S,leading:v,children:_})]})}function U({open:s,onExited:a,...i}){const r=s!==void 0,{mounted:l,visible:c}=$.usePopoverTransition(s??!0),u=n.useRef(l),t=n.useRef(a);return t.current=a,n.useEffect(()=>{var d;u.current&&!l&&r&&((d=t.current)==null||d.call(t)),u.current=l},[l,r]),r&&!l?null:o.jsx(Q,{...i,active:s??!0,transition:r,visible:c})}exports.default=U;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),a=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"),e=require("./Modal.module.scss.cjs");function V({className:r="",style:n,size:i="small",title:s,subtitle:l,subtitlePlacement:c="below",hideTitle:u=!1,showBackButton:t=!1,onBack:d,backLabel:x,backButtonProps:y,onClose:m,closeLabel:I,closeButtonProps:R,headerDivider:g=!0,headerAction:F,headerSlot:N,bodyPadding:_="default",scrollable:b=!0,children:w,footer:v,footerLeading:j,footerType:f="2-actions",footerDivider:B=!0,closeOnEscape:P=!0,manageFocus:S=!0,initialFocusRef:k,active:p,transition:M,visible:z,...C}){const q=a.useRef(null);A.useModalFocus(q,{initialFocusRef:k,closeOnEscape:P,manageFocus:S,onClose:m,active:p});const h=a.useId(),H=e.default[`modal--size-${U.toKebab(i)}`],K=[e.default["modal__body-inner"],_==="menu"&&e.default["modal__body-inner--menu"],_==="none"&&e.default["modal__body-inner--none"],!b&&e.default["modal__body-inner--fill"]].filter(Boolean).join(" "),O=o.jsx("div",{className:K,children:w}),T=[e.default.modal__scroll,!b&&e.default["modal__scroll--fill"]].filter(Boolean).join(" "),$=v!=null||j!=null||f==="spacer-small"||f==="spacer-large";return o.jsxs("div",{...C,ref:q,tabIndex:-1,className:[e.default.modal,H,M&&e.default["modal--transition"],M&&z&&e.default["modal--visible"],r].filter(Boolean).join(" "),style:n,role:"dialog","aria-modal":"true","aria-labelledby":h,children:[o.jsx(Q.default,{title:s,titleId:h,subtitle:l,subtitlePlacement:c,hideTitle:u,showBackButton:t,onBack:d,backLabel:x,backButtonProps:y,onClose:m,closeLabel:I,closeButtonProps:R,divider:g,headerAction:F,headerSlot:N}),o.jsx("div",{className:e.default.modal__body,children:o.jsx(G.default,{className:T,children:O})}),$&&o.jsx(J.default,{type:f,divider:B,leading:j,children:v})]})}function W({open:r,onExited:n,...i}){const s=r!==void 0,{mounted:l,visible:c}=D.usePopoverTransition(r??!0),u=a.useRef(l),t=a.useRef(n);return t.current=n,a.useEffect(()=>{var d;u.current&&!l&&s&&((d=t.current)==null||d.call(t)),u.current=l},[l,s]),s&&!l?null:o.jsx(V,{...i,active:r??!0,transition:s,visible:c})}exports.default=W;
 //# 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 {\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 true (default), wraps body content in Scrollbar. Set false when the\n   * host manages scroll inside panes.\n   */\n  scrollable?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n  footer?: ReactNode;\n  /** Left footer slot (pagination status, PaginationDots, …). */\n  footerLeading?: ReactNode;\n  /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n  footerType?: ModalFooterType;\n  /** Show divider between body and footer. Default: true. */\n  footerDivider?: boolean;\n  /**\n   * 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   * 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  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    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  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      {...rest}\n      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        {scrollable ? <Scrollbar>{bodyInner}</Scrollbar> : bodyInner}\n      </div>\n\n      {showFooter && (\n        <ModalFooter\n          type={footerType}\n          divider={footerDivider}\n          leading={footerLeading}\n        >\n          {footer}\n        </ModalFooter>\n      )}\n    </div>\n  );\n}\n\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","initialFocusRef","active","transition","visible","rest","rootRef","useRef","useModalFocus","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter","Modal","open","onExited","props","controlled","mounted","usePopoverTransition","wasMounted","onExitedRef","useEffect","_a"],"mappings":"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"}
+{"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

@@ -1 +1 @@
-._modal_14reu_2{background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-l);box-shadow:var(--elevation-6);display:flex;flex-direction:column;overflow:hidden}._modal--transition_14reu_11{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_14reu_11{transform:none;transition:none}}._modal--visible_14reu_24{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_14reu_24{transition:none}}._modal_14reu_2:focus{outline:none}._modal--size-small_14reu_38{width:600px}._modal--size-medium_14reu_41{width:704px}._modal--size-large_14reu_44{width:832px}._modal__body_14reu_47{flex:1;min-height:0}._modal__body-inner_14reu_51{padding:28px var(--spacing-xxxl)}._modal__body-inner--menu_14reu_54{padding:var(--spacing-xs) var(--spacing-l)}._modal__body-inner--none_14reu_57{padding:0}._modal__body_14reu_47>._modal__body-inner_14reu_51{height:100%}
+._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

@@ -57,8 +57,9 @@ export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
      */
     bodyPadding?: ModalBodyPadding;
     /**
-     * When true (default), wraps body content in Scrollbar. Set false when the
-     * host manages scroll inside panes.
+     * 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. */
@@ -76,6 +77,14 @@ export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
      * 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.

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,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;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oEAAoE;IACpE,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;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;AAsHD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,kDAwBrE"}
+{"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

@@ -1,99 +1,105 @@
-import { jsx as n, jsxs as A } from "react/jsx-runtime";
-import { useRef as c, useEffect as D, useId as G } from "react";
-import { useModalFocus as J } from "../../hooks/use-modal-focus.js";
-import { usePopoverTransition as O } from "../../hooks/use-popover-transition.js";
-import Q from "../scrollbar/Scrollbar.js";
-import U from "../modal-footer/ModalFooter.js";
-import V from "../modal-header/ModalHeader.js";
-import { toKebab as W } from "../../utils/string.js";
+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 X({
-  className: t = "",
-  style: a,
+function Z({
+  className: a = "",
+  style: t,
   size: d = "small",
-  title: e,
-  subtitle: r,
+  title: r,
+  subtitle: l,
   subtitlePlacement: m = "below",
   hideTitle: s = !1,
-  showBackButton: l = !1,
+  showBackButton: e = !1,
   onBack: i,
-  backLabel: I,
-  backButtonProps: j,
+  backLabel: j,
+  backButtonProps: I,
   onClose: f,
-  closeLabel: w,
-  closeButtonProps: F,
-  headerDivider: N = !0,
-  headerAction: x,
-  headerSlot: z,
+  closeLabel: N,
+  closeButtonProps: w,
+  headerDivider: B = !0,
+  headerAction: F,
+  headerSlot: x,
   bodyPadding: b = "default",
-  scrollable: B = !0,
-  children: g,
+  scrollable: _ = !0,
+  children: z,
   footer: p,
   footerLeading: v,
-  footerType: u = "2-actions",
+  footerType: c = "2-actions",
   footerDivider: C = !0,
-  closeOnEscape: H = !0,
+  closeOnEscape: g = !0,
+  manageFocus: H = !0,
   initialFocusRef: K,
   active: P,
-  transition: _,
+  transition: y,
   visible: R,
   ...S
 }) {
-  const y = c(null);
-  J(y, {
+  const M = u(null);
+  Q(M, {
     initialFocusRef: K,
-    closeOnEscape: H,
+    closeOnEscape: g,
+    manageFocus: H,
     onClose: f,
     active: P
   });
-  const M = G(), $ = o[`modal--size-${W(d)}`], k = [
+  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"]
-  ].filter(Boolean).join(" "), h = /* @__PURE__ */ n("div", { className: k, children: g }), q = p != null || v != null || u === "spacer-small" || u === "spacer-large";
-  return /* @__PURE__ */ A(
+    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: y,
+      ref: M,
       tabIndex: -1,
       className: [
         o.modal,
         $,
-        _ && o["modal--transition"],
-        _ && R && o["modal--visible"],
-        t
+        y && o["modal--transition"],
+        y && R && o["modal--visible"],
+        a
       ].filter(Boolean).join(" "),
-      style: a,
+      style: t,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": M,
+      "aria-labelledby": h,
       children: [
         /* @__PURE__ */ n(
-          V,
+          X,
           {
-            title: e,
-            titleId: M,
-            subtitle: r,
+            title: r,
+            titleId: h,
+            subtitle: l,
             subtitlePlacement: m,
             hideTitle: s,
-            showBackButton: l,
+            showBackButton: e,
             onBack: i,
-            backLabel: I,
-            backButtonProps: j,
+            backLabel: j,
+            backButtonProps: I,
             onClose: f,
-            closeLabel: w,
-            closeButtonProps: F,
-            divider: N,
-            headerAction: x,
-            headerSlot: z
+            closeLabel: N,
+            closeButtonProps: w,
+            divider: B,
+            headerAction: F,
+            headerSlot: x
           }
         ),
-        /* @__PURE__ */ n("div", { className: o.modal__body, children: B ? /* @__PURE__ */ n(Q, { children: h }) : h }),
-        q && /* @__PURE__ */ n(
-          U,
+        /* @__PURE__ */ n("div", { className: o.modal__body, children: /* @__PURE__ */ n(V, { className: A, children: q }) }),
+        D && /* @__PURE__ */ n(
+          W,
           {
-            type: u,
+            type: c,
             divider: C,
             leading: v,
             children: p
@@ -103,22 +109,22 @@ function X({
     }
   );
 }
-function no({ open: t, onExited: a, ...d }) {
-  const e = t !== void 0, { mounted: r, visible: m } = O(t ?? !0), s = c(r), l = c(a);
-  return l.current = a, D(() => {
+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 && !r && e && ((i = l.current) == null || i.call(l)), s.current = r;
-  }, [r, e]), e && !r ? null : /* @__PURE__ */ n(
-    X,
+    s.current && !l && r && ((i = e.current) == null || i.call(e)), s.current = l;
+  }, [l, r]), r && !l ? null : /* @__PURE__ */ n(
+    Z,
     {
       ...d,
-      active: t ?? !0,
-      transition: e,
+      active: a ?? !0,
+      transition: r,
       visible: m
     }
   );
 }
 export {
-  no as default
+  to 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 {\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 true (default), wraps body content in Scrollbar. Set false when the\n   * host manages scroll inside panes.\n   */\n  scrollable?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n  footer?: ReactNode;\n  /** Left footer slot (pagination status, PaginationDots, …). */\n  footerLeading?: ReactNode;\n  /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n  footerType?: ModalFooterType;\n  /** Show divider between body and footer. Default: true. */\n  footerDivider?: boolean;\n  /**\n   * 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   * 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  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    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  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      {...rest}\n      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        {scrollable ? <Scrollbar>{bodyInner}</Scrollbar> : bodyInner}\n      </div>\n\n      {showFooter && (\n        <ModalFooter\n          type={footerType}\n          divider={footerDivider}\n          leading={footerLeading}\n        >\n          {footer}\n        </ModalFooter>\n      )}\n    </div>\n  );\n}\n\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","initialFocusRef","active","transition","visible","rest","rootRef","useRef","useModalFocus","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter","Modal","open","onExited","props","controlled","mounted","usePopoverTransition","wasMounted","onExitedRef","useEffect","_a"],"mappings":"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"}
+{"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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Modal.css');const _="_modal_14reu_2",e="_modal__body_14reu_47",o={modal:_,"modal--transition":"_modal--transition_14reu_11","modal--visible":"_modal--visible_14reu_24","modal--size-small":"_modal--size-small_14reu_38","modal--size-medium":"_modal--size-medium_14reu_41","modal--size-large":"_modal--size-large_14reu_44",modal__body:e,"modal__body-inner":"_modal__body-inner_14reu_51","modal__body-inner--menu":"_modal__body-inner--menu_14reu_54","modal__body-inner--none":"_modal__body-inner--none_14reu_57"};exports.default=o;exports.modal=_;exports.modal__body=e;
+"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.js

@@ -1,18 +1,22 @@
-import './Modal.css';const _ = "_modal_14reu_2", o = "_modal__body_14reu_47", e = {
+import './Modal.css';const _ = "_modal_z87u6_2", l = "_modal__body_z87u6_56", o = "_modal__scroll_z87u6_63", d = {
   modal: _,
-  "modal--transition": "_modal--transition_14reu_11",
-  "modal--visible": "_modal--visible_14reu_24",
-  "modal--size-small": "_modal--size-small_14reu_38",
-  "modal--size-medium": "_modal--size-medium_14reu_41",
-  "modal--size-large": "_modal--size-large_14reu_44",
-  modal__body: o,
-  "modal__body-inner": "_modal__body-inner_14reu_51",
-  "modal__body-inner--menu": "_modal__body-inner--menu_14reu_54",
-  "modal__body-inner--none": "_modal__body-inner--none_14reu_57"
+  "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 {
-  e as default,
+  d as default,
   _ as modal,
-  o as modal__body
+  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.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

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

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

@@ -1,3 +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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,SAAS,EACT,sBAAsB,GACvB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,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

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

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

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

package/dist/components/popover-notice/PopoverNotice.css

@@ -1 +1 @@
-._popover-notice_7o9fb_2{position:relative;display:flex;flex-direction:column;align-items:flex-end;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);box-shadow:var(--elevation-4);width:386px}._popover-notice_7o9fb_2 p:not([class]),._popover-notice_7o9fb_2 ul:not([class]),._popover-notice_7o9fb_2 ol:not([class]){margin:0}._popover-notice--no-icon_7o9fb_18 ._popover-notice__content_7o9fb_18{padding-left:var(--spacing-l)}._popover-notice__content_7o9fb_18{display:flex;gap:var(--spacing-m);align-items:flex-start;padding:var(--spacing-m);width:100%}._popover-notice__icon_7o9fb_28{display:flex;align-items:flex-start;flex-shrink:0;color:var(--center-channel-color)}._popover-notice__icon--info_7o9fb_34{color:var(--color-info)}._popover-notice__icon--success_7o9fb_37{color:var(--color-success)}._popover-notice__icon--warning_7o9fb_40{color:var(--color-warning)}._popover-notice__icon--danger_7o9fb_43{color:var(--error-text, var(--color-danger))}._popover-notice__body_7o9fb_46{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1 0 0;min-width:0;overflow:hidden;padding-right:var(--spacing-xl)}._popover-notice__body_7o9fb_46>:last-child{margin-bottom:0}._popover-notice__title-row_7o9fb_58{display:flex;align-items:flex-start;width:100%}._popover-notice__title_7o9fb_58{flex:1 0 0;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color);min-width:0}._popover-notice__description_7o9fb_71{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color)}._popover-notice__description_7o9fb_71>:last-child{margin-bottom:0}._popover-notice__actions_7o9fb_80{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xxs) 0}._popover-notice__close_7o9fb_86{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs)}
+._popover-notice_iuib4_2{position:relative;display:flex;flex-direction:column;align-items:flex-end;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-m);box-shadow:var(--elevation-4);width:386px}._popover-notice_iuib4_2 p:not([class]),._popover-notice_iuib4_2 ul:not([class]),._popover-notice_iuib4_2 ol:not([class]){margin:0}._popover-notice--no-icon_iuib4_18 ._popover-notice__content_iuib4_18{padding-left:var(--spacing-l)}._popover-notice__content_iuib4_18{display:flex;gap:var(--spacing-m);align-items:flex-start;padding:var(--spacing-m);width:100%}._popover-notice__icon_iuib4_28{display:flex;align-items:flex-start;flex-shrink:0;color:var(--center-channel-color)}._popover-notice__icon--info_iuib4_34{color:var(--color-info)}._popover-notice__icon--success_iuib4_37{color:var(--color-success)}._popover-notice__icon--warning_iuib4_40{color:var(--color-warning)}._popover-notice__icon--danger_iuib4_43{color:var(--error-text, var(--color-danger))}._popover-notice__body_iuib4_46{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1 0 0;min-width:0;overflow:hidden;padding-right:var(--spacing-xl)}._popover-notice__body_iuib4_46>:last-child{margin-bottom:0}._popover-notice__title-row_iuib4_58{display:flex;align-items:flex-start;width:100%}._popover-notice__title_iuib4_58{flex:1 0 0;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color);min-width:0}._popover-notice__description_iuib4_71{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color)}._popover-notice__description_iuib4_71>:last-child{margin-bottom:0}._popover-notice__actions_iuib4_80{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xxs) 0}._popover-notice__close_iuib4_86{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs)}

package/dist/components/popover-notice/PopoverNotice.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PopoverNotice.css');const o={"popover-notice":"_popover-notice_7o9fb_2","popover-notice--no-icon":"_popover-notice--no-icon_7o9fb_18","popover-notice__content":"_popover-notice__content_7o9fb_18","popover-notice__icon":"_popover-notice__icon_7o9fb_28","popover-notice__icon--info":"_popover-notice__icon--info_7o9fb_34","popover-notice__icon--success":"_popover-notice__icon--success_7o9fb_37","popover-notice__icon--warning":"_popover-notice__icon--warning_7o9fb_40","popover-notice__icon--danger":"_popover-notice__icon--danger_7o9fb_43","popover-notice__body":"_popover-notice__body_7o9fb_46","popover-notice__title-row":"_popover-notice__title-row_7o9fb_58","popover-notice__title":"_popover-notice__title_7o9fb_58","popover-notice__description":"_popover-notice__description_7o9fb_71","popover-notice__actions":"_popover-notice__actions_7o9fb_80","popover-notice__close":"_popover-notice__close_7o9fb_86"};exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PopoverNotice.css');const o={"popover-notice":"_popover-notice_iuib4_2","popover-notice--no-icon":"_popover-notice--no-icon_iuib4_18","popover-notice__content":"_popover-notice__content_iuib4_18","popover-notice__icon":"_popover-notice__icon_iuib4_28","popover-notice__icon--info":"_popover-notice__icon--info_iuib4_34","popover-notice__icon--success":"_popover-notice__icon--success_iuib4_37","popover-notice__icon--warning":"_popover-notice__icon--warning_iuib4_40","popover-notice__icon--danger":"_popover-notice__icon--danger_iuib4_43","popover-notice__body":"_popover-notice__body_iuib4_46","popover-notice__title-row":"_popover-notice__title-row_iuib4_58","popover-notice__title":"_popover-notice__title_iuib4_58","popover-notice__description":"_popover-notice__description_iuib4_71","popover-notice__actions":"_popover-notice__actions_iuib4_80","popover-notice__close":"_popover-notice__close_iuib4_86"};exports.default=o;
 //# sourceMappingURL=PopoverNotice.module.scss.cjs.map

package/dist/components/popover-notice/PopoverNotice.module.scss.js

@@ -1,18 +1,18 @@
 import './PopoverNotice.css';const o = {
-  "popover-notice": "_popover-notice_7o9fb_2",
-  "popover-notice--no-icon": "_popover-notice--no-icon_7o9fb_18",
-  "popover-notice__content": "_popover-notice__content_7o9fb_18",
-  "popover-notice__icon": "_popover-notice__icon_7o9fb_28",
-  "popover-notice__icon--info": "_popover-notice__icon--info_7o9fb_34",
-  "popover-notice__icon--success": "_popover-notice__icon--success_7o9fb_37",
-  "popover-notice__icon--warning": "_popover-notice__icon--warning_7o9fb_40",
-  "popover-notice__icon--danger": "_popover-notice__icon--danger_7o9fb_43",
-  "popover-notice__body": "_popover-notice__body_7o9fb_46",
-  "popover-notice__title-row": "_popover-notice__title-row_7o9fb_58",
-  "popover-notice__title": "_popover-notice__title_7o9fb_58",
-  "popover-notice__description": "_popover-notice__description_7o9fb_71",
-  "popover-notice__actions": "_popover-notice__actions_7o9fb_80",
-  "popover-notice__close": "_popover-notice__close_7o9fb_86"
+  "popover-notice": "_popover-notice_iuib4_2",
+  "popover-notice--no-icon": "_popover-notice--no-icon_iuib4_18",
+  "popover-notice__content": "_popover-notice__content_iuib4_18",
+  "popover-notice__icon": "_popover-notice__icon_iuib4_28",
+  "popover-notice__icon--info": "_popover-notice__icon--info_iuib4_34",
+  "popover-notice__icon--success": "_popover-notice__icon--success_iuib4_37",
+  "popover-notice__icon--warning": "_popover-notice__icon--warning_iuib4_40",
+  "popover-notice__icon--danger": "_popover-notice__icon--danger_iuib4_43",
+  "popover-notice__body": "_popover-notice__body_iuib4_46",
+  "popover-notice__title-row": "_popover-notice__title-row_iuib4_58",
+  "popover-notice__title": "_popover-notice__title_iuib4_58",
+  "popover-notice__description": "_popover-notice__description_iuib4_71",
+  "popover-notice__actions": "_popover-notice__actions_iuib4_80",
+  "popover-notice__close": "_popover-notice__close_iuib4_86"
 };
 export {
   o as default

package/dist/components/scrollbar/Scrollbar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./simplebar-vendor.css');const m=require("react/jsx-runtime"),s=require("react"),q=require("simplebar-react");;/* empty css                        */const S=require("./Scrollbar.module.scss.cjs"),j=s.forwardRef(function({children:n,color:l,alwaysVisible:u=!1,className:a,style:i,onScroll:o,...d},e){const r=s.useRef(void 0),f=s.useCallback(t=>{var c;(c=r.current)==null||c.call(r),r.current=void 0,t&&o&&(t.addEventListener("scroll",o),r.current=()=>t.removeEventListener("scroll",o)),typeof e=="function"?e(t):e&&(e.current=t)},[o,e]),b={...i,...l?{"--scrollbar-color":`var(${l})`}:null},v=[S.default.scrollbar,a].filter(Boolean).join(" ");return m.jsx(q,{...d,autoHide:!u,scrollableNodeProps:{ref:f},className:v,style:b,tabIndex:-1,children:n})});exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./simplebar-vendor.css');const S=require("react/jsx-runtime"),s=require("react"),g=require("simplebar-react"),j=require("../../utils/string.cjs");;/* empty css                        */const c=require("./Scrollbar.module.scss.cjs"),y=s.forwardRef(function({children:n,color:l,alwaysVisible:i=!1,size:u="default",className:d,style:f,onScroll:o,...b},e){const r=s.useRef(void 0),v=s.useCallback(t=>{var a;(a=r.current)==null||a.call(r),r.current=void 0,t&&o&&(t.addEventListener("scroll",o),r.current=()=>t.removeEventListener("scroll",o)),typeof e=="function"?e(t):e&&(e.current=t)},[o,e]),m={...f,...l?{"--scrollbar-color":`var(${l})`}:null},q=[c.default.scrollbar,u!=="default"&&c.default[`scrollbar--size-${j.toKebab(u)}`],d].filter(Boolean).join(" ");return S.jsx(g,{...b,autoHide:!i,scrollableNodeProps:{ref:v},className:q,style:m,tabIndex:-1,children:n})});exports.default=y;
 //# sourceMappingURL=Scrollbar.cjs.map