@purpur/library 9.6.0 → 9.7.0

package/dist/library.es.js.map

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

package/dist/modal-DJn9idcw.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),c=require("./index-2cFVyGXq.js"),s=require("react"),V=require("./button-DmybVApa.js"),K=require("./heading-drD5ugCC.js"),k=require("./close.es-VL3lKi1O.js"),G=require("./paragraph-By4jMjnH.js");require("./ThemeProvider-D7oXcAde.js");const J=require("./useThemePortalContainer-D9BYjEvT.js"),Q=require("./visually-hidden-C2CKovZx.js"),X=require("./bind-DeUYJ6m9.js"),Y="_fadeIn_1nrj3_1",Z="_fadeOut_1nrj3_1",ee="_slideUp_1nrj3_1",te="_slideDown_1nrj3_1",re={"purpur-modal-content":"_purpur-modal-content_1nrj3_1",fadeIn:Y,fadeOut:Z,slideUp:ee,slideDown:te,"purpur-modal-content__overlay":"_purpur-modal-content__overlay_1nrj3_49","purpur-modal-content__close-button":"_purpur-modal-content__close-button_1nrj3_65","purpur-modal-content__wrapper":"_purpur-modal-content__wrapper_1nrj3_75","purpur-modal-content__wrapper-inner":"_purpur-modal-content__wrapper-inner_1nrj3_85","purpur-modal-content__image-wrapper":"_purpur-modal-content__image-wrapper_1nrj3_89","purpur-modal-content__header":"_purpur-modal-content__header_1nrj3_112","purpur-modal-content__title":"_purpur-modal-content__title_1nrj3_125","purpur-modal-content__heading":"_purpur-modal-content__heading_1nrj3_128","purpur-modal-content__description":"_purpur-modal-content__description_1nrj3_131","purpur-modal-content__body":"_purpur-modal-content__body_1nrj3_134","purpur-modal-content__body-inner":"_purpur-modal-content__body-inner_1nrj3_142","purpur-modal-content__actions-buttons":"_purpur-modal-content__actions-buttons_1nrj3_154","purpur-modal-content__notification":"_purpur-modal-content__notification_1nrj3_172","purpur-modal-content--with-image":"_purpur-modal-content--with-image_1nrj3_175","purpur-modal-content--overflow":"_purpur-modal-content--overflow_1nrj3_175","purpur-modal-content__actions":"_purpur-modal-content__actions_1nrj3_154","purpur-modal-content__actions-separator":"_purpur-modal-content__actions-separator_1nrj3_206","purpur-modal-content--sticky-footer":"_purpur-modal-content--sticky-footer_1nrj3_216"},N=n=>n.showCloseButton===!0,r=X.c.bind(re),t="purpur-modal-content",ne=s.forwardRef(({["data-testid"]:n,actions:o,children:a,className:u,description:_,disableCloseOnClickOutside:y,hideDescription:b,image:p,stickyButtons:v=!0,title:D,notification:x=void 0,zIndex:$,container:C,onCloseAutoFocus:O,...g},P)=>{const{closeButtonAriaLabel:h,showCloseButton:E,...H}=g,[I,M]=s.useState(!1),[S,T]=s.useState(0),m=s.useRef(null),j=s.useRef(null),B=J.useThemePortalContainer(),W=C===void 0?B:C??void 0,z=r(t,{[`${t}--with-image`]:!!p},{[`${t}--overflow`]:I},{[`${t}--sticky-footer`]:v},u),d=l=>n?`${n} ${l}`:void 0,A=l=>{y&&l.preventDefault()},i=s.useCallback(()=>{if(!m.current||!j.current)return;const l=window.getComputedStyle(m.current,null),f=parseFloat(l.getPropertyValue("height")),U=j.current.offsetHeight;M(f<U),T((m.current.offsetWidth??0)-(m.current.clientWidth??0))},[]),F=()=>{const l=j.current;if(l){const f=l.querySelector("h2");f&&setTimeout(()=>{f.focus()})}},L=l=>{y&&!E&&l.preventDefault()};return s.useEffect(()=>(window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}),[i]),s.useEffect(()=>{i()},[x,a,i]),e.jsxs(c.Portal,{container:W,children:[e.jsx(c.Overlay,{className:r(`${t}__overlay`),style:{zIndex:$}}),e.jsxs(c.Content,{...H,className:z,"data-testid":n,ref:P,...!_&&{"aria-describedby":void 0},onPointerDownOutside:A,onOpenAutoFocus:()=>{i(),F()},onEscapeKeyDown:L,onCloseAutoFocus:O,style:{zIndex:`calc(${$} + 1)`},children:[e.jsxs("div",{ref:m,className:r(`${t}__wrapper`),children:[N(g)&&h&&p&&e.jsx(q,{"aria-label":h,hasImage:!0,scrollbarWidth:S,"data-testid":d("close-button")}),e.jsxs("div",{ref:j,className:r(`${t}__wrapper-inner`),children:[e.jsxs("div",{className:r(`${t}__header`),children:[N(g)&&h&&!p&&e.jsx(q,{"aria-label":h,"data-testid":d("close-button")}),e.jsx(c.Title,{asChild:!0,className:r(`${t}__title`),"data-testid":d("title"),children:e.jsx(K.Heading,{tag:"h2",variant:"display-10",tabIndex:-1,className:r(`${t}__heading`),children:D})})]}),p&&e.jsx("div",{className:r(`${t}__image-wrapper`),"data-testid":d("image"),children:p}),e.jsx("div",{className:r(`${t}__body`),children:e.jsxs("div",{className:r(`${t}__body-inner`),children:[_&&b&&e.jsx(Q.VisuallyHidden,{asChild:!0,children:e.jsx(c.Description,{"data-testid":d("description"),children:_})}),_&&!b&&e.jsx(c.Description,{asChild:!0,className:r(`${t}__description`),"data-testid":d("description"),children:e.jsx(G.Paragraph,{variant:"paragraph-100",children:_})}),e.jsx("div",{children:a}),!v&&e.jsx(R,{actions:o,notification:x})]})})]})]}),v&&e.jsx(R,{actions:o,notification:x})]})]})}),q=({["aria-label"]:n,hasImage:o,scrollbarWidth:a,["data-testid"]:u})=>e.jsx(c.Close,{asChild:!0,children:e.jsx(V.Button,{variant:o?"primary":"tertiary-purple",negative:o,size:"sm",iconOnly:!0,"aria-label":n,className:r(`${t}__close-button`),style:{right:`calc(var(--purpur-spacing-100) + ${a||0}px)`},"data-testid":u,children:e.jsx(k.r,{})})}),R=({actions:n,notification:o})=>{const a=s.useRef(null);return s.useEffect(()=>{o&&a?.current?.scrollIntoView?.(!1)},[o]),n?e.jsxs("div",{className:r(`${t}__actions`),children:[e.jsx("div",{className:r(`${t}__actions-buttons`),"data-testid":"modal actions",children:n}),o&&e.jsx("div",{className:r(`${t}__notification`),ref:a,children:o}),e.jsx("span",{className:r(`${t}__actions-separator`)})]}):null},oe=s.forwardRef(({children:n,...o},a)=>e.jsx(c.Trigger,{asChild:!0,ref:a,...o,children:n})),w=({["data-testid"]:n,children:o,open:a,onOpenChange:u})=>e.jsx(c.Root,{open:a,onOpenChange:u,"data-testid":n,children:o});w.Trigger=oe;w.Content=ne;w.displayName="Modal";exports.Modal=w;
+//# sourceMappingURL=modal-DJn9idcw.js.map

package/dist/modal-DJn9idcw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-DJn9idcw.js","sources":["../../../components/modal/src/modal-content.tsx","../../../components/modal/src/modal-trigger.tsx","../../../components/modal/src/modal.tsx"],"sourcesContent":["import React, { forwardRef, type ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\nimport { Button } from \"@purpur/button\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { Heading } from \"@purpur/heading\";\nimport { IconClose } from \"@purpur/icon/close\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport { useThemePortalContainer } from \"@purpur/theme\";\nimport { VisuallyHidden } from \"@purpur/visually-hidden\";\nimport {\n  Close as RadixClose,\n  Content as RadixContent,\n  Description as RadixDescription,\n  Overlay as RadixOverlay,\n  Portal as RadixPortal,\n  Title as RadixTitle,\n} from \"@radix-ui/react-dialog\";\nimport c from \"classnames/bind\";\n\nimport \"@purpur/notification/styles\";\nimport styles from \"./modal-content.module.scss\";\n\nexport type DefaultProps = Omit<BaseProps, \"children\"> & {\n  /**\n   * One or several CTA links or buttons\n   * */\n  actions?: ReactNode;\n  children: ReactNode;\n  /**\n   * An optional accessible description to be announced when the dialog is opened.\n   * */\n  description?: string;\n  /**\n   * Prevents the modal from closing on click outside if set to `true`.\n   * */\n  disableCloseOnClickOutside?: boolean;\n  /**\n   * Visually hides the description if set to `true`.\n   * */\n  hideDescription?: boolean;\n  /**\n   * An optional image to be displayed at the top of the modal.\n   * */\n  image?: ReactNode;\n  /**\n   * Provide a Purpur Notification which will render beneath the modal buttons, otherwise leave it undefined.\n   * */\n  notification?: ReactNode;\n  /**\n   * Determines whether the button group should be fixed at the bottom or scroll with the content.\n   * */\n  stickyButtons?: boolean;\n  /**\n   * An accessible title to be announced when the dialog is opened.\n   * */\n  title: string;\n  /**\n   * z-index of the modal\n   * */\n  zIndex?: number;\n  /**\n   * Optional DOM element to portal the modal content into. When omitted,\n   * the modal renders inside the nearest `ThemeProvider` so it inherits\n   * the active color scheme. Pass `document.body` (or any other element) to\n   * override. Pass `null` to fall back to Radix' default (`document.body`).\n   * */\n  container?: HTMLElement | null;\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * */\n  onCloseAutoFocus?: (e: Event) => void;\n};\n\ntype NoCloseButtonProps = {\n  /**\n   * An accessible label for the close button.\n   * */\n  closeButtonAriaLabel?: never;\n  /**\n   * Shows the close button if set to `true`. Must be used in conjunction with `closeButtonAriaLabel`.\n   * */\n  showCloseButton?: false;\n};\n\ntype CloseButtonProps = {\n  /**\n   * An accessible label for the close button.\n   * */\n  closeButtonAriaLabel: string;\n  /**\n   * Shows the close button if set to `true`. Must be used in conjunction with `closeButtonAriaLabel`.\n   * */\n  showCloseButton: true;\n};\n\nexport type ModalContentProps = DefaultProps & (CloseButtonProps | NoCloseButtonProps);\n\nconst hasCloseButtonProps = (\n  props: CloseButtonProps | NoCloseButtonProps\n): props is CloseButtonProps => (props as CloseButtonProps).showCloseButton === true;\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-modal-content\";\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n  (\n    {\n      [\"data-testid\"]: dataTestId,\n      actions,\n      children,\n      className,\n      description,\n      disableCloseOnClickOutside,\n      hideDescription,\n      image,\n      stickyButtons = true,\n      title,\n      notification = undefined,\n      zIndex,\n      container,\n      onCloseAutoFocus,\n      ...props\n    },\n    ref\n  ) => {\n    const { closeButtonAriaLabel, showCloseButton, ...rest } = props;\n    const [contentOverflow, setContentOverflow] = useState(false);\n    const [scrollbarWidth, setScrollbarWidth] = useState(0);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperInnerRef = useRef<HTMLDivElement>(null);\n    const themePortalContainer = useThemePortalContainer();\n    const portalContainer =\n      container === undefined ? themePortalContainer : container ?? undefined;\n\n    const classes = cx(\n      rootClassName,\n      { [`${rootClassName}--with-image`]: !!image },\n      { [`${rootClassName}--overflow`]: contentOverflow },\n      { [`${rootClassName}--sticky-footer`]: stickyButtons },\n      className\n    );\n\n    const getTestId = (id: string) => (dataTestId ? `${dataTestId} ${id}` : undefined);\n\n    const handlePointerDownOutside = (event: CustomEvent<{ originalEvent: PointerEvent }>) => {\n      if (disableCloseOnClickOutside) {\n        event.preventDefault();\n      }\n    };\n\n    const handleContentOverflow = useCallback(() => {\n      if (!wrapperRef.current || !wrapperInnerRef.current) {\n        return;\n      }\n\n      const computedStyle = window.getComputedStyle(wrapperRef.current, null);\n      const wrapperHeight = parseFloat(computedStyle.getPropertyValue(\"height\"));\n      const innerHeight = wrapperInnerRef.current.offsetHeight;\n\n      setContentOverflow(wrapperHeight < innerHeight);\n\n      setScrollbarWidth(\n        (wrapperRef.current.offsetWidth ?? 0) - (wrapperRef.current.clientWidth ?? 0)\n      );\n    }, []);\n\n    const handleInitialFocus = () => {\n      const frame = wrapperInnerRef.current;\n      if (frame) {\n        const heading = frame.querySelector(\"h2\");\n\n        heading &&\n          setTimeout(() => {\n            heading.focus();\n          });\n      }\n    };\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n      if (disableCloseOnClickOutside && !showCloseButton) {\n        event.preventDefault();\n      }\n    };\n\n    useEffect(() => {\n      window.addEventListener(\"resize\", handleContentOverflow);\n\n      return () => {\n        window.removeEventListener(\"resize\", handleContentOverflow);\n      };\n    }, [handleContentOverflow]);\n\n    useEffect(() => {\n      handleContentOverflow();\n    }, [notification, children, handleContentOverflow]);\n\n    return (\n      <RadixPortal container={portalContainer}>\n        <RadixOverlay className={cx(`${rootClassName}__overlay`)} style={{ zIndex }} />\n        <RadixContent\n          {...rest}\n          className={classes}\n          data-testid={dataTestId}\n          ref={ref}\n          {...(!description && { [\"aria-describedby\"]: undefined })}\n          onPointerDownOutside={handlePointerDownOutside}\n          onOpenAutoFocus={() => {\n            handleContentOverflow();\n            handleInitialFocus();\n          }}\n          onEscapeKeyDown={handleEscapeKeyDown}\n          onCloseAutoFocus={onCloseAutoFocus}\n          style={{ zIndex: `calc(${zIndex} + 1)` }}\n        >\n          <div ref={wrapperRef} className={cx(`${rootClassName}__wrapper`)}>\n            {hasCloseButtonProps(props) && closeButtonAriaLabel && image && (\n              <CloseButton\n                aria-label={closeButtonAriaLabel}\n                hasImage\n                scrollbarWidth={scrollbarWidth}\n                data-testid={getTestId(\"close-button\")}\n              />\n            )}\n            <div ref={wrapperInnerRef} className={cx(`${rootClassName}__wrapper-inner`)}>\n              <div className={cx(`${rootClassName}__header`)}>\n                {hasCloseButtonProps(props) && closeButtonAriaLabel && !image && (\n                  <CloseButton\n                    aria-label={closeButtonAriaLabel}\n                    data-testid={getTestId(\"close-button\")}\n                  />\n                )}\n                <RadixTitle\n                  asChild\n                  className={cx(`${rootClassName}__title`)}\n                  data-testid={getTestId(\"title\")}\n                >\n                  <Heading\n                    tag=\"h2\"\n                    variant=\"display-10\"\n                    tabIndex={-1}\n                    className={cx(`${rootClassName}__heading`)}\n                  >\n                    {title}\n                  </Heading>\n                </RadixTitle>\n              </div>\n              {image && (\n                <div\n                  className={cx(`${rootClassName}__image-wrapper`)}\n                  data-testid={getTestId(\"image\")}\n                >\n                  {image}\n                </div>\n              )}\n              <div className={cx(`${rootClassName}__body`)}>\n                <div className={cx(`${rootClassName}__body-inner`)}>\n                  {description && hideDescription && (\n                    <VisuallyHidden asChild>\n                      <RadixDescription data-testid={getTestId(\"description\")}>\n                        {description}\n                      </RadixDescription>\n                    </VisuallyHidden>\n                  )}\n                  {description && !hideDescription && (\n                    <RadixDescription\n                      asChild\n                      className={cx(`${rootClassName}__description`)}\n                      data-testid={getTestId(\"description\")}\n                    >\n                      <Paragraph variant=\"paragraph-100\">{description}</Paragraph>\n                    </RadixDescription>\n                  )}\n                  <div>{children}</div>\n                  {!stickyButtons && <ModalActions actions={actions} notification={notification} />}\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {stickyButtons && <ModalActions actions={actions} notification={notification} />}\n        </RadixContent>\n      </RadixPortal>\n    );\n  }\n);\n\nconst CloseButton = ({\n  [\"aria-label\"]: ariaLabel,\n  hasImage,\n  scrollbarWidth,\n  [\"data-testid\"]: dataTestId,\n}: {\n  [\"aria-label\"]: string;\n  hasImage?: boolean;\n  scrollbarWidth?: number;\n  [\"data-testid\"]?: string;\n}) => (\n  <RadixClose asChild>\n    <Button\n      variant={hasImage ? \"primary\" : \"tertiary-purple\"}\n      negative={hasImage}\n      size=\"sm\"\n      iconOnly\n      aria-label={ariaLabel}\n      className={cx(`${rootClassName}__close-button`)}\n      style={{ right: `calc(var(--purpur-spacing-100) + ${scrollbarWidth || 0}px)` }}\n      data-testid={dataTestId}\n    >\n      <IconClose />\n    </Button>\n  </RadixClose>\n);\n\nexport const MAX_NUMBER_OF_ACTIONS = 3;\n\nexport const ModalActions = ({\n  actions,\n  notification,\n}: Pick<ModalContentProps, \"actions\" | \"notification\">) => {\n  const notificationRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (notification) {\n      notificationRef?.current?.scrollIntoView?.(false);\n    }\n  }, [notification]);\n\n  return actions ? (\n    <div className={cx(`${rootClassName}__actions`)}>\n      <div className={cx(`${rootClassName}__actions-buttons`)} data-testid=\"modal actions\">\n        {actions}\n      </div>\n      {notification && (\n        <div className={cx(`${rootClassName}__notification`)} ref={notificationRef}>\n          {notification}\n        </div>\n      )}\n      <span className={cx(`${rootClassName}__actions-separator`)} />\n    </div>\n  ) : null;\n};\n","import React, { forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { Trigger as RadixTrigger } from \"@radix-ui/react-dialog\";\n\nexport type ModalTriggerProps = Omit<BaseProps<\"button\">, \"children\"> & {\n  children: ReactNode;\n};\n\nexport const ModalTrigger = forwardRef<HTMLButtonElement, ModalTriggerProps>(\n  ({ children, ...props }, ref) => {\n    return (\n      <RadixTrigger asChild ref={ref} {...props}>\n        {children}\n      </RadixTrigger>\n    );\n  }\n);\n","import React, { type ReactNode } from \"react\";\nimport { Root as RadixRoot } from \"@radix-ui/react-dialog\";\n\nimport { ModalContent } from \"./modal-content\";\nimport { ModalTrigger } from \"./modal-trigger\";\n\nexport type ModalProps = {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  /**\n   * Event handler called when the open state of the dialog changes.\n   * */\n  onOpenChange?: (value: boolean) => void;\n  /**\n   * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n   * */\n  open?: boolean;\n};\n\nexport const Modal = ({\n  [\"data-testid\"]: dataTestId,\n  children,\n  open,\n  onOpenChange,\n}: ModalProps) => (\n  <RadixRoot open={open} onOpenChange={onOpenChange} data-testid={dataTestId}>\n    {children}\n  </RadixRoot>\n);\n\nModal.Trigger = ModalTrigger;\nModal.Content = ModalContent;\n\nModal.displayName = \"Modal\";\n"],"names":["hasCloseButtonProps","props","cx","c","styles","rootClassName","ModalContent","forwardRef","dataTestId","actions","children","className","description","disableCloseOnClickOutside","hideDescription","image","stickyButtons","title","notification","zIndex","container","onCloseAutoFocus","ref","closeButtonAriaLabel","showCloseButton","rest","contentOverflow","setContentOverflow","useState","scrollbarWidth","setScrollbarWidth","wrapperRef","useRef","wrapperInnerRef","themePortalContainer","useThemePortalContainer","portalContainer","classes","getTestId","id","handlePointerDownOutside","event","handleContentOverflow","useCallback","computedStyle","wrapperHeight","innerHeight","handleInitialFocus","frame","heading","handleEscapeKeyDown","useEffect","jsxs","RadixPortal","jsx","RadixOverlay","RadixContent","CloseButton","RadixTitle","Heading","VisuallyHidden","RadixDescription","Paragraph","ModalActions","ariaLabel","hasImage","RadixClose","Button","IconClose","notificationRef","ModalTrigger","RadixTrigger","Modal","open","onOpenChange","RadixRoot"],"mappings":"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"}

package/dist/{modal-fp37VbrH.mjs → modal-EIP36327.mjs}

@@ -1,18 +1,20 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { P as k, O as q, C as G, T as J, D, a as Q, b as X, R as Y } from "./index-3NV-ckDX.mjs";
-import { forwardRef as H, useState as O, useRef as b, useCallback as Z, useEffect as g } from "react";
-import { b as tt } from "./button-4-yWOgtD.mjs";
-import { H as et } from "./heading-xwBuT_-9.mjs";
-import { r as rt } from "./close.es-BPmk2wkU.mjs";
-import { P as nt } from "./paragraph-DSxXmX_0.mjs";
-import { V as ot } from "./visually-hidden-BYFkJEp1.mjs";
-import { c as at } from "./bind-CU-R61T-.mjs";
-const lt = "_fadeIn_1nrj3_1", st = "_fadeOut_1nrj3_1", _t = "_slideUp_1nrj3_1", dt = "_slideDown_1nrj3_1", ct = {
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { P as J, O as Q, C as X, T as Y, D as O, a as Z, b as tt, R as et } from "./index-3NV-ckDX.mjs";
+import { forwardRef as I, useState as P, useRef as b, useCallback as rt, useEffect as g } from "react";
+import { b as nt } from "./button-4-yWOgtD.mjs";
+import { H as ot } from "./heading-xwBuT_-9.mjs";
+import { r as at } from "./close.es-BPmk2wkU.mjs";
+import { P as st } from "./paragraph-DSxXmX_0.mjs";
+import "./ThemeProvider-DiDBfyFA.mjs";
+import { u as lt } from "./useThemePortalContainer-tFLTaYKN.mjs";
+import { V as _t } from "./visually-hidden-BYFkJEp1.mjs";
+import { c as dt } from "./bind-CU-R61T-.mjs";
+const it = "_fadeIn_1nrj3_1", ct = "_fadeOut_1nrj3_1", ut = "_slideUp_1nrj3_1", pt = "_slideDown_1nrj3_1", mt = {
   "purpur-modal-content": "_purpur-modal-content_1nrj3_1",
-  fadeIn: lt,
-  fadeOut: st,
-  slideUp: _t,
-  slideDown: dt,
+  fadeIn: it,
+  fadeOut: ct,
+  slideUp: ut,
+  slideDown: pt,
   "purpur-modal-content__overlay": "_purpur-modal-content__overlay_1nrj3_49",
   "purpur-modal-content__close-button": "_purpur-modal-content__close-button_1nrj3_65",
   "purpur-modal-content__wrapper": "_purpur-modal-content__wrapper_1nrj3_75",
@@ -31,104 +33,105 @@ const lt = "_fadeIn_1nrj3_1", st = "_fadeOut_1nrj3_1", _t = "_slideUp_1nrj3_1",
   "purpur-modal-content__actions": "_purpur-modal-content__actions_1nrj3_154",
   "purpur-modal-content__actions-separator": "_purpur-modal-content__actions-separator_1nrj3_206",
   "purpur-modal-content--sticky-footer": "_purpur-modal-content--sticky-footer_1nrj3_216"
-}, P = (n) => n.showCloseButton === !0, r = at.bind(ct), e = "purpur-modal-content", it = H(
+}, R = (n) => n.showCloseButton === !0, r = dt.bind(mt), e = "purpur-modal-content", ht = I(
   ({
     ["data-testid"]: n,
     actions: o,
     children: a,
-    className: c,
-    description: i,
+    className: i,
+    description: c,
     disableCloseOnClickOutside: $,
-    hideDescription: N,
+    hideDescription: C,
     image: u,
     stickyButtons: w = !0,
-    title: I,
+    title: M,
     notification: v = void 0,
-    zIndex: C,
-    onCloseAutoFocus: M,
+    zIndex: N,
+    container: D,
+    onCloseAutoFocus: T,
     ...y
   }, E) => {
-    const { closeButtonAriaLabel: m, showCloseButton: S, ...T } = y, [B, V] = O(!1), [W, z] = O(0), p = b(null), h = b(null), A = r(
+    const { closeButtonAriaLabel: m, showCloseButton: S, ...B } = y, [V, W] = P(!1), [z, A] = P(0), p = b(null), h = b(null), F = lt(), L = D === void 0 ? F : D ?? void 0, U = r(
       e,
       { [`${e}--with-image`]: !!u },
-      { [`${e}--overflow`]: B },
+      { [`${e}--overflow`]: V },
       { [`${e}--sticky-footer`]: w },
-      c
-    ), _ = (l) => n ? `${n} ${l}` : void 0, F = (l) => {
-      $ && l.preventDefault();
-    }, d = Z(() => {
+      i
+    ), _ = (s) => n ? `${n} ${s}` : void 0, K = (s) => {
+      $ && s.preventDefault();
+    }, d = rt(() => {
       if (!p.current || !h.current)
         return;
-      const l = window.getComputedStyle(p.current, null), f = parseFloat(l.getPropertyValue("height")), K = h.current.offsetHeight;
-      V(f < K), z(
+      const s = window.getComputedStyle(p.current, null), f = parseFloat(s.getPropertyValue("height")), G = h.current.offsetHeight;
+      W(f < G), A(
         (p.current.offsetWidth ?? 0) - (p.current.clientWidth ?? 0)
       );
-    }, []), L = () => {
-      const l = h.current;
-      if (l) {
-        const f = l.querySelector("h2");
+    }, []), k = () => {
+      const s = h.current;
+      if (s) {
+        const f = s.querySelector("h2");
         f && setTimeout(() => {
           f.focus();
         });
       }
-    }, U = (l) => {
-      $ && !S && l.preventDefault();
+    }, q = (s) => {
+      $ && !S && s.preventDefault();
     };
     return g(() => (window.addEventListener("resize", d), () => {
       window.removeEventListener("resize", d);
     }), [d]), g(() => {
       d();
-    }, [v, a, d]), /* @__PURE__ */ s(k, { children: [
-      /* @__PURE__ */ t(q, { className: r(`${e}__overlay`), style: { zIndex: C } }),
-      /* @__PURE__ */ s(
-        G,
+    }, [v, a, d]), /* @__PURE__ */ l(J, { container: L, children: [
+      /* @__PURE__ */ t(Q, { className: r(`${e}__overlay`), style: { zIndex: N } }),
+      /* @__PURE__ */ l(
+        X,
         {
-          ...T,
-          className: A,
+          ...B,
+          className: U,
           "data-testid": n,
           ref: E,
-          ...!i && { "aria-describedby": void 0 },
-          onPointerDownOutside: F,
+          ...!c && { "aria-describedby": void 0 },
+          onPointerDownOutside: K,
           onOpenAutoFocus: () => {
-            d(), L();
+            d(), k();
           },
-          onEscapeKeyDown: U,
-          onCloseAutoFocus: M,
-          style: { zIndex: `calc(${C} + 1)` },
+          onEscapeKeyDown: q,
+          onCloseAutoFocus: T,
+          style: { zIndex: `calc(${N} + 1)` },
           children: [
-            /* @__PURE__ */ s("div", { ref: p, className: r(`${e}__wrapper`), children: [
-              P(y) && m && u && /* @__PURE__ */ t(
-                R,
+            /* @__PURE__ */ l("div", { ref: p, className: r(`${e}__wrapper`), children: [
+              R(y) && m && u && /* @__PURE__ */ t(
+                x,
                 {
                   "aria-label": m,
                   hasImage: !0,
-                  scrollbarWidth: W,
+                  scrollbarWidth: z,
                   "data-testid": _("close-button")
                 }
               ),
-              /* @__PURE__ */ s("div", { ref: h, className: r(`${e}__wrapper-inner`), children: [
-                /* @__PURE__ */ s("div", { className: r(`${e}__header`), children: [
-                  P(y) && m && !u && /* @__PURE__ */ t(
-                    R,
+              /* @__PURE__ */ l("div", { ref: h, className: r(`${e}__wrapper-inner`), children: [
+                /* @__PURE__ */ l("div", { className: r(`${e}__header`), children: [
+                  R(y) && m && !u && /* @__PURE__ */ t(
+                    x,
                     {
                       "aria-label": m,
                       "data-testid": _("close-button")
                     }
                   ),
                   /* @__PURE__ */ t(
-                    J,
+                    Y,
                     {
                       asChild: !0,
                       className: r(`${e}__title`),
                       "data-testid": _("title"),
                       children: /* @__PURE__ */ t(
-                        et,
+                        ot,
                         {
                           tag: "h2",
                           variant: "display-10",
                           tabIndex: -1,
                           className: r(`${e}__heading`),
-                          children: I
+                          children: M
                         }
                       )
                     }
@@ -142,35 +145,35 @@ const lt = "_fadeIn_1nrj3_1", st = "_fadeOut_1nrj3_1", _t = "_slideUp_1nrj3_1",
                     children: u
                   }
                 ),
-                /* @__PURE__ */ t("div", { className: r(`${e}__body`), children: /* @__PURE__ */ s("div", { className: r(`${e}__body-inner`), children: [
-                  i && N && /* @__PURE__ */ t(ot, { asChild: !0, children: /* @__PURE__ */ t(D, { "data-testid": _("description"), children: i }) }),
-                  i && !N && /* @__PURE__ */ t(
-                    D,
+                /* @__PURE__ */ t("div", { className: r(`${e}__body`), children: /* @__PURE__ */ l("div", { className: r(`${e}__body-inner`), children: [
+                  c && C && /* @__PURE__ */ t(_t, { asChild: !0, children: /* @__PURE__ */ t(O, { "data-testid": _("description"), children: c }) }),
+                  c && !C && /* @__PURE__ */ t(
+                    O,
                     {
                       asChild: !0,
                       className: r(`${e}__description`),
                       "data-testid": _("description"),
-                      children: /* @__PURE__ */ t(nt, { variant: "paragraph-100", children: i })
+                      children: /* @__PURE__ */ t(st, { variant: "paragraph-100", children: c })
                     }
                   ),
                   /* @__PURE__ */ t("div", { children: a }),
-                  !w && /* @__PURE__ */ t(x, { actions: o, notification: v })
+                  !w && /* @__PURE__ */ t(H, { actions: o, notification: v })
                 ] }) })
               ] })
             ] }),
-            w && /* @__PURE__ */ t(x, { actions: o, notification: v })
+            w && /* @__PURE__ */ t(H, { actions: o, notification: v })
           ]
         }
       )
     ] });
   }
-), R = ({
+), x = ({
   ["aria-label"]: n,
   hasImage: o,
   scrollbarWidth: a,
-  ["data-testid"]: c
-}) => /* @__PURE__ */ t(Q, { asChild: !0, children: /* @__PURE__ */ t(
-  tt,
+  ["data-testid"]: i
+}) => /* @__PURE__ */ t(Z, { asChild: !0, children: /* @__PURE__ */ t(
+  nt,
   {
     variant: o ? "primary" : "tertiary-purple",
     negative: o,
@@ -179,33 +182,33 @@ const lt = "_fadeIn_1nrj3_1", st = "_fadeOut_1nrj3_1", _t = "_slideUp_1nrj3_1",
     "aria-label": n,
     className: r(`${e}__close-button`),
     style: { right: `calc(var(--purpur-spacing-100) + ${a || 0}px)` },
-    "data-testid": c,
-    children: /* @__PURE__ */ t(rt, {})
+    "data-testid": i,
+    children: /* @__PURE__ */ t(at, {})
   }
-) }), x = ({
+) }), H = ({
   actions: n,
   notification: o
 }) => {
   const a = b(null);
   return g(() => {
     o && a?.current?.scrollIntoView?.(!1);
-  }, [o]), n ? /* @__PURE__ */ s("div", { className: r(`${e}__actions`), children: [
+  }, [o]), n ? /* @__PURE__ */ l("div", { className: r(`${e}__actions`), children: [
     /* @__PURE__ */ t("div", { className: r(`${e}__actions-buttons`), "data-testid": "modal actions", children: n }),
     o && /* @__PURE__ */ t("div", { className: r(`${e}__notification`), ref: a, children: o }),
     /* @__PURE__ */ t("span", { className: r(`${e}__actions-separator`) })
   ] }) : null;
-}, ut = H(
-  ({ children: n, ...o }, a) => /* @__PURE__ */ t(X, { asChild: !0, ref: a, ...o, children: n })
+}, ft = I(
+  ({ children: n, ...o }, a) => /* @__PURE__ */ t(tt, { asChild: !0, ref: a, ...o, children: n })
 ), j = ({
   ["data-testid"]: n,
   children: o,
   open: a,
-  onOpenChange: c
-}) => /* @__PURE__ */ t(Y, { open: a, onOpenChange: c, "data-testid": n, children: o });
-j.Trigger = ut;
-j.Content = it;
+  onOpenChange: i
+}) => /* @__PURE__ */ t(et, { open: a, onOpenChange: i, "data-testid": n, children: o });
+j.Trigger = ft;
+j.Content = ht;
 j.displayName = "Modal";
 export {
   j as M
 };
-//# sourceMappingURL=modal-fp37VbrH.mjs.map
+//# sourceMappingURL=modal-EIP36327.mjs.map

package/dist/modal-EIP36327.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-EIP36327.mjs","sources":["../../../components/modal/src/modal-content.tsx","../../../components/modal/src/modal-trigger.tsx","../../../components/modal/src/modal.tsx"],"sourcesContent":["import React, { forwardRef, type ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\nimport { Button } from \"@purpur/button\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { Heading } from \"@purpur/heading\";\nimport { IconClose } from \"@purpur/icon/close\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport { useThemePortalContainer } from \"@purpur/theme\";\nimport { VisuallyHidden } from \"@purpur/visually-hidden\";\nimport {\n  Close as RadixClose,\n  Content as RadixContent,\n  Description as RadixDescription,\n  Overlay as RadixOverlay,\n  Portal as RadixPortal,\n  Title as RadixTitle,\n} from \"@radix-ui/react-dialog\";\nimport c from \"classnames/bind\";\n\nimport \"@purpur/notification/styles\";\nimport styles from \"./modal-content.module.scss\";\n\nexport type DefaultProps = Omit<BaseProps, \"children\"> & {\n  /**\n   * One or several CTA links or buttons\n   * */\n  actions?: ReactNode;\n  children: ReactNode;\n  /**\n   * An optional accessible description to be announced when the dialog is opened.\n   * */\n  description?: string;\n  /**\n   * Prevents the modal from closing on click outside if set to `true`.\n   * */\n  disableCloseOnClickOutside?: boolean;\n  /**\n   * Visually hides the description if set to `true`.\n   * */\n  hideDescription?: boolean;\n  /**\n   * An optional image to be displayed at the top of the modal.\n   * */\n  image?: ReactNode;\n  /**\n   * Provide a Purpur Notification which will render beneath the modal buttons, otherwise leave it undefined.\n   * */\n  notification?: ReactNode;\n  /**\n   * Determines whether the button group should be fixed at the bottom or scroll with the content.\n   * */\n  stickyButtons?: boolean;\n  /**\n   * An accessible title to be announced when the dialog is opened.\n   * */\n  title: string;\n  /**\n   * z-index of the modal\n   * */\n  zIndex?: number;\n  /**\n   * Optional DOM element to portal the modal content into. When omitted,\n   * the modal renders inside the nearest `ThemeProvider` so it inherits\n   * the active color scheme. Pass `document.body` (or any other element) to\n   * override. Pass `null` to fall back to Radix' default (`document.body`).\n   * */\n  container?: HTMLElement | null;\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * */\n  onCloseAutoFocus?: (e: Event) => void;\n};\n\ntype NoCloseButtonProps = {\n  /**\n   * An accessible label for the close button.\n   * */\n  closeButtonAriaLabel?: never;\n  /**\n   * Shows the close button if set to `true`. Must be used in conjunction with `closeButtonAriaLabel`.\n   * */\n  showCloseButton?: false;\n};\n\ntype CloseButtonProps = {\n  /**\n   * An accessible label for the close button.\n   * */\n  closeButtonAriaLabel: string;\n  /**\n   * Shows the close button if set to `true`. Must be used in conjunction with `closeButtonAriaLabel`.\n   * */\n  showCloseButton: true;\n};\n\nexport type ModalContentProps = DefaultProps & (CloseButtonProps | NoCloseButtonProps);\n\nconst hasCloseButtonProps = (\n  props: CloseButtonProps | NoCloseButtonProps\n): props is CloseButtonProps => (props as CloseButtonProps).showCloseButton === true;\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-modal-content\";\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n  (\n    {\n      [\"data-testid\"]: dataTestId,\n      actions,\n      children,\n      className,\n      description,\n      disableCloseOnClickOutside,\n      hideDescription,\n      image,\n      stickyButtons = true,\n      title,\n      notification = undefined,\n      zIndex,\n      container,\n      onCloseAutoFocus,\n      ...props\n    },\n    ref\n  ) => {\n    const { closeButtonAriaLabel, showCloseButton, ...rest } = props;\n    const [contentOverflow, setContentOverflow] = useState(false);\n    const [scrollbarWidth, setScrollbarWidth] = useState(0);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperInnerRef = useRef<HTMLDivElement>(null);\n    const themePortalContainer = useThemePortalContainer();\n    const portalContainer =\n      container === undefined ? themePortalContainer : container ?? undefined;\n\n    const classes = cx(\n      rootClassName,\n      { [`${rootClassName}--with-image`]: !!image },\n      { [`${rootClassName}--overflow`]: contentOverflow },\n      { [`${rootClassName}--sticky-footer`]: stickyButtons },\n      className\n    );\n\n    const getTestId = (id: string) => (dataTestId ? `${dataTestId} ${id}` : undefined);\n\n    const handlePointerDownOutside = (event: CustomEvent<{ originalEvent: PointerEvent }>) => {\n      if (disableCloseOnClickOutside) {\n        event.preventDefault();\n      }\n    };\n\n    const handleContentOverflow = useCallback(() => {\n      if (!wrapperRef.current || !wrapperInnerRef.current) {\n        return;\n      }\n\n      const computedStyle = window.getComputedStyle(wrapperRef.current, null);\n      const wrapperHeight = parseFloat(computedStyle.getPropertyValue(\"height\"));\n      const innerHeight = wrapperInnerRef.current.offsetHeight;\n\n      setContentOverflow(wrapperHeight < innerHeight);\n\n      setScrollbarWidth(\n        (wrapperRef.current.offsetWidth ?? 0) - (wrapperRef.current.clientWidth ?? 0)\n      );\n    }, []);\n\n    const handleInitialFocus = () => {\n      const frame = wrapperInnerRef.current;\n      if (frame) {\n        const heading = frame.querySelector(\"h2\");\n\n        heading &&\n          setTimeout(() => {\n            heading.focus();\n          });\n      }\n    };\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n      if (disableCloseOnClickOutside && !showCloseButton) {\n        event.preventDefault();\n      }\n    };\n\n    useEffect(() => {\n      window.addEventListener(\"resize\", handleContentOverflow);\n\n      return () => {\n        window.removeEventListener(\"resize\", handleContentOverflow);\n      };\n    }, [handleContentOverflow]);\n\n    useEffect(() => {\n      handleContentOverflow();\n    }, [notification, children, handleContentOverflow]);\n\n    return (\n      <RadixPortal container={portalContainer}>\n        <RadixOverlay className={cx(`${rootClassName}__overlay`)} style={{ zIndex }} />\n        <RadixContent\n          {...rest}\n          className={classes}\n          data-testid={dataTestId}\n          ref={ref}\n          {...(!description && { [\"aria-describedby\"]: undefined })}\n          onPointerDownOutside={handlePointerDownOutside}\n          onOpenAutoFocus={() => {\n            handleContentOverflow();\n            handleInitialFocus();\n          }}\n          onEscapeKeyDown={handleEscapeKeyDown}\n          onCloseAutoFocus={onCloseAutoFocus}\n          style={{ zIndex: `calc(${zIndex} + 1)` }}\n        >\n          <div ref={wrapperRef} className={cx(`${rootClassName}__wrapper`)}>\n            {hasCloseButtonProps(props) && closeButtonAriaLabel && image && (\n              <CloseButton\n                aria-label={closeButtonAriaLabel}\n                hasImage\n                scrollbarWidth={scrollbarWidth}\n                data-testid={getTestId(\"close-button\")}\n              />\n            )}\n            <div ref={wrapperInnerRef} className={cx(`${rootClassName}__wrapper-inner`)}>\n              <div className={cx(`${rootClassName}__header`)}>\n                {hasCloseButtonProps(props) && closeButtonAriaLabel && !image && (\n                  <CloseButton\n                    aria-label={closeButtonAriaLabel}\n                    data-testid={getTestId(\"close-button\")}\n                  />\n                )}\n                <RadixTitle\n                  asChild\n                  className={cx(`${rootClassName}__title`)}\n                  data-testid={getTestId(\"title\")}\n                >\n                  <Heading\n                    tag=\"h2\"\n                    variant=\"display-10\"\n                    tabIndex={-1}\n                    className={cx(`${rootClassName}__heading`)}\n                  >\n                    {title}\n                  </Heading>\n                </RadixTitle>\n              </div>\n              {image && (\n                <div\n                  className={cx(`${rootClassName}__image-wrapper`)}\n                  data-testid={getTestId(\"image\")}\n                >\n                  {image}\n                </div>\n              )}\n              <div className={cx(`${rootClassName}__body`)}>\n                <div className={cx(`${rootClassName}__body-inner`)}>\n                  {description && hideDescription && (\n                    <VisuallyHidden asChild>\n                      <RadixDescription data-testid={getTestId(\"description\")}>\n                        {description}\n                      </RadixDescription>\n                    </VisuallyHidden>\n                  )}\n                  {description && !hideDescription && (\n                    <RadixDescription\n                      asChild\n                      className={cx(`${rootClassName}__description`)}\n                      data-testid={getTestId(\"description\")}\n                    >\n                      <Paragraph variant=\"paragraph-100\">{description}</Paragraph>\n                    </RadixDescription>\n                  )}\n                  <div>{children}</div>\n                  {!stickyButtons && <ModalActions actions={actions} notification={notification} />}\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {stickyButtons && <ModalActions actions={actions} notification={notification} />}\n        </RadixContent>\n      </RadixPortal>\n    );\n  }\n);\n\nconst CloseButton = ({\n  [\"aria-label\"]: ariaLabel,\n  hasImage,\n  scrollbarWidth,\n  [\"data-testid\"]: dataTestId,\n}: {\n  [\"aria-label\"]: string;\n  hasImage?: boolean;\n  scrollbarWidth?: number;\n  [\"data-testid\"]?: string;\n}) => (\n  <RadixClose asChild>\n    <Button\n      variant={hasImage ? \"primary\" : \"tertiary-purple\"}\n      negative={hasImage}\n      size=\"sm\"\n      iconOnly\n      aria-label={ariaLabel}\n      className={cx(`${rootClassName}__close-button`)}\n      style={{ right: `calc(var(--purpur-spacing-100) + ${scrollbarWidth || 0}px)` }}\n      data-testid={dataTestId}\n    >\n      <IconClose />\n    </Button>\n  </RadixClose>\n);\n\nexport const MAX_NUMBER_OF_ACTIONS = 3;\n\nexport const ModalActions = ({\n  actions,\n  notification,\n}: Pick<ModalContentProps, \"actions\" | \"notification\">) => {\n  const notificationRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (notification) {\n      notificationRef?.current?.scrollIntoView?.(false);\n    }\n  }, [notification]);\n\n  return actions ? (\n    <div className={cx(`${rootClassName}__actions`)}>\n      <div className={cx(`${rootClassName}__actions-buttons`)} data-testid=\"modal actions\">\n        {actions}\n      </div>\n      {notification && (\n        <div className={cx(`${rootClassName}__notification`)} ref={notificationRef}>\n          {notification}\n        </div>\n      )}\n      <span className={cx(`${rootClassName}__actions-separator`)} />\n    </div>\n  ) : null;\n};\n","import React, { forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { Trigger as RadixTrigger } from \"@radix-ui/react-dialog\";\n\nexport type ModalTriggerProps = Omit<BaseProps<\"button\">, \"children\"> & {\n  children: ReactNode;\n};\n\nexport const ModalTrigger = forwardRef<HTMLButtonElement, ModalTriggerProps>(\n  ({ children, ...props }, ref) => {\n    return (\n      <RadixTrigger asChild ref={ref} {...props}>\n        {children}\n      </RadixTrigger>\n    );\n  }\n);\n","import React, { type ReactNode } from \"react\";\nimport { Root as RadixRoot } from \"@radix-ui/react-dialog\";\n\nimport { ModalContent } from \"./modal-content\";\nimport { ModalTrigger } from \"./modal-trigger\";\n\nexport type ModalProps = {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  /**\n   * Event handler called when the open state of the dialog changes.\n   * */\n  onOpenChange?: (value: boolean) => void;\n  /**\n   * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n   * */\n  open?: boolean;\n};\n\nexport const Modal = ({\n  [\"data-testid\"]: dataTestId,\n  children,\n  open,\n  onOpenChange,\n}: ModalProps) => (\n  <RadixRoot open={open} onOpenChange={onOpenChange} data-testid={dataTestId}>\n    {children}\n  </RadixRoot>\n);\n\nModal.Trigger = ModalTrigger;\nModal.Content = ModalContent;\n\nModal.displayName = \"Modal\";\n"],"names":["hasCloseButtonProps","props","cx","c","styles","rootClassName","ModalContent","forwardRef","dataTestId","actions","children","className","description","disableCloseOnClickOutside","hideDescription","image","stickyButtons","title","notification","zIndex","container","onCloseAutoFocus","ref","closeButtonAriaLabel","showCloseButton","rest","contentOverflow","setContentOverflow","useState","scrollbarWidth","setScrollbarWidth","wrapperRef","useRef","wrapperInnerRef","themePortalContainer","useThemePortalContainer","portalContainer","classes","getTestId","id","handlePointerDownOutside","event","handleContentOverflow","useCallback","computedStyle","wrapperHeight","innerHeight","handleInitialFocus","frame","heading","handleEscapeKeyDown","useEffect","jsxs","RadixPortal","jsx","RadixOverlay","RadixContent","CloseButton","RadixTitle","Heading","VisuallyHidden","RadixDescription","Paragraph","ModalActions","ariaLabel","hasImage","RadixClose","Button","IconClose","notificationRef","ModalTrigger","RadixTrigger","Modal","open","onOpenChange","RadixRoot"],"mappings":"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"}

package/dist/modal.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./modal-Baisuc6m.js");exports.Modal=e.Modal;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./modal-DJn9idcw.js");exports.Modal=e.Modal;
 //# sourceMappingURL=modal.cjs.js.map

package/dist/modal.es.js

@@ -1,4 +1,4 @@
-import { M as r } from "./modal-fp37VbrH.mjs";
+import { M as r } from "./modal-EIP36327.mjs";
 export {
   r as Modal
 };