@veeqo/ui 14.7.1-beta-1 → 14.8.0

package/dist/components/InputAffix/InputAffix.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import { FormComponentProps } from '../types';
-export type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;
-export declare function InputAffix({ children, ...otherProps }: InputAffixProps): React.JSX.Element;
-export declare namespace InputAffix {
-    var Container: import("styled-components").StyledComponent<"div", any, React.HTMLAttributes<HTMLDivElement> & FormComponentProps, never>;
-}
+export type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & {
+    compact?: boolean;
+};
+export declare function InputAffix({ children, compact, className, ...otherProps }: InputAffixProps): React.JSX.Element;

package/dist/components/InputAffix/InputAffix.js

@@ -1,16 +1,13 @@
 import React__default from 'react';
-import styled from 'styled-components';
-import { inputFullStyles } from '../../utils/forms/inputStyles.js';
-import { theme } from '../../theme/index.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { Text } from '../Text/Text.js';
+import styles from './InputAffix.module.scss.js';
 
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--zm6t34" }) `user-select:none;flex-shrink:0;${inputFullStyles} [data-input-group]:has(:disabled)&{background-color:${theme.colors.neutral.grey.light};}`;
-const StyledHint = styled(Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--8xnkei" }) `font-size:${theme.text.body.fontSize};`;
-function InputAffix({ children, ...otherProps }) {
-    return (React__default.createElement(Container, { ...otherProps },
-        React__default.createElement(StyledHint, { variant: "hintText" }, children)));
+function InputAffix({ children, compact, className, ...otherProps }) {
+    return (React__default.createElement("div", { className: buildClassnames([styles.container, compact && styles.compact, className]), ...otherProps },
+        React__default.createElement(Text, { variant: "hintText", className: styles.hint }, children)));
 }
-InputAffix.Container = Container;
 
 export { InputAffix };
 //# sourceMappingURL=InputAffix.js.map

package/dist/components/InputAffix/InputAffix.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputAffix.js","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n  user-select: none;\n  flex-shrink: 0;\n\n  ${inputFullStyles}\n\n  [data-input-group]:has(:disabled) & {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n  font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n  return (\n    <Container {...otherProps}>\n      <StyledHint variant=\"hintText\">{children}</StyledHint>\n    </Container>\n  );\n}\n\nInputAffix.Container = Container;\n"],"names":["React"],"mappings":";;;;;;AASA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAIxB,eAAe,CAAA,qDAAA,EAGK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAC/C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}
+{"version":3,"file":"InputAffix.js","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\n\nimport styles from './InputAffix.module.scss';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & {\n  compact?: boolean;\n};\n\nexport function InputAffix({ children, compact, className, ...otherProps }: InputAffixProps) {\n  return (\n    <div\n      className={buildClassnames([styles.container, compact && styles.compact, className])}\n      {...otherProps}\n    >\n      <Text variant=\"hintText\" className={styles.hint}>\n        {children}\n      </Text>\n    </div>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;AAUM,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU,EAAmB,EAAA;IACzF,QACEA,sCACE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA,GAChF,UAAU,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,EAC5C,QAAQ,CACJ,CACH;AAEV;;;;"}

package/dist/components/InputAffix/InputAffix.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_nmclh_1 {\n  user-select: none;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  background-color: white;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n  display: flex;\n  align-items: center;\n}\n[data-input-group] > ._container_nmclh_1:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n[data-input-group] > ._container_nmclh_1:last-child {\n  padding-left: var(--sizes-2);\n}\n[data-input-group] > ._container_nmclh_1:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n[data-input-group]:has(:disabled) ._container_nmclh_1 {\n  background-color: var(--colors-neutral-grey-light);\n}\n\n._compact_nmclh_26 {\n  min-height: var(--sizes-8);\n}\n\n._hint_nmclh_30 {\n  font-size: var(--text-body-font-size);\n}");
+var styles = {"container":"_container_nmclh_1","compact":"_compact_nmclh_26","hint":"_hint_nmclh_30"};
+
+module.exports = styles;
+//# sourceMappingURL=InputAffix.module.scss.cjs.map

package/dist/components/InputAffix/InputAffix.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputAffix.module.scss.cjs","sources":["../../../src/components/InputAffix/InputAffix.module.scss"],"sourcesContent":[".container {\n  user-select: none;\n  flex-shrink: 0;\n  box-sizing: border-box;\n\n  background-color: white;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n\n  display: flex;\n  align-items: center;\n\n  [data-input-group] > &:first-child {\n    padding-right: calc(var(--sizes-3) - var(--sizes-1));\n  }\n\n  [data-input-group] > &:last-child {\n    padding-left: var(--sizes-2);\n  }\n\n  [data-input-group] > &:not(:first-child):not(:last-child) {\n    padding-inline: var(--sizes-2);\n  }\n\n  [data-input-group]:has(:disabled) & {\n    background-color: var(--colors-neutral-grey-light);\n  }\n}\n\n.compact {\n  min-height: var(--sizes-8);\n}\n\n.hint {\n  font-size: var(--text-body-font-size);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,45BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

package/dist/components/InputAffix/InputAffix.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_nmclh_1 {\n  user-select: none;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  background-color: white;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n  display: flex;\n  align-items: center;\n}\n[data-input-group] > ._container_nmclh_1:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n[data-input-group] > ._container_nmclh_1:last-child {\n  padding-left: var(--sizes-2);\n}\n[data-input-group] > ._container_nmclh_1:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n[data-input-group]:has(:disabled) ._container_nmclh_1 {\n  background-color: var(--colors-neutral-grey-light);\n}\n\n._compact_nmclh_26 {\n  min-height: var(--sizes-8);\n}\n\n._hint_nmclh_30 {\n  font-size: var(--text-body-font-size);\n}");
+var styles = {"container":"_container_nmclh_1","compact":"_compact_nmclh_26","hint":"_hint_nmclh_30"};
+
+export { styles as default };
+//# sourceMappingURL=InputAffix.module.scss.js.map

package/dist/components/InputAffix/InputAffix.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputAffix.module.scss.js","sources":["../../../src/components/InputAffix/InputAffix.module.scss"],"sourcesContent":[".container {\n  user-select: none;\n  flex-shrink: 0;\n  box-sizing: border-box;\n\n  background-color: white;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n\n  display: flex;\n  align-items: center;\n\n  [data-input-group] > &:first-child {\n    padding-right: calc(var(--sizes-3) - var(--sizes-1));\n  }\n\n  [data-input-group] > &:last-child {\n    padding-left: var(--sizes-2);\n  }\n\n  [data-input-group] > &:not(:first-child):not(:last-child) {\n    padding-inline: var(--sizes-2);\n  }\n\n  [data-input-group]:has(:disabled) & {\n    background-color: var(--colors-neutral-grey-light);\n  }\n}\n\n.compact {\n  min-height: var(--sizes-8);\n}\n\n.hint {\n  font-size: var(--text-body-font-size);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,45BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

package/dist/components/Modal/Modal.cjs

@@ -2,42 +2,21 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
+var styled = require('./components/styled.cjs');
 var types = require('./types.cjs');
 var Dialog = require('./components/Dialog/Dialog.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-require('uid/secure');
 var useIsOverflowing = require('../../hooks/useIsOverflowing.cjs');
 var Button = require('../Button/Button.cjs');
 var Card = require('../Card/Card.cjs');
 var CardHeader = require('../CardHeader/CardHeader.cjs');
 var Stack = require('../Stack/Stack.cjs');
 var utils = require('./utils.cjs');
-var Modal_module = require('./Modal.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 /* eslint-disable react/destructuring-assignment */
-/**
- * Manages body scroll-lock as a component mounted inside AnimatePresence.
- * Reference-counted so multiple simultaneous modals don't conflict:
- * the class only removes when the last modal unmounts.
- */
-let scrollLockCount = 0;
-const ScrollLock = () => {
-    React.useEffect(() => {
-        scrollLockCount += 1;
-        document.body.classList.add('veeqo-modal-open');
-        return () => {
-            scrollLockCount -= 1;
-            if (scrollLockCount === 0) {
-                document.body.classList.remove('veeqo-modal-open');
-            }
-        };
-    }, []);
-    return null;
-};
 const Modal = (props) => {
     const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false, variant = 'base', onClose: parentOnClose, children, ...rest } = props;
     const modalRef = React.useRef(null);
@@ -76,15 +55,11 @@ const Modal = (props) => {
             handleClose();
     };
     return (React__default.default.createElement(framerMotion.AnimatePresence, null, shouldShow && (React__default.default.createElement("div", { "data-testid": "dialog-wrapper", style: { position: 'absolute' } },
-        React__default.default.createElement(ScrollLock, null),
+        React__default.default.createElement(styled.NonScrollableBody, null),
         React__default.default.createElement(Dialog.Dialog, { "data-dialog-type": "modal", displayMode: displayMode, variant: variant, ref: modalRef, onClose: handleClose, onKeyDown: preventClose ? utils.preventDefaultEventOnESC : handleKeyDown, onClick: handleBackdropClick, ...rest, "aria-describedby": "modal_title", appearance: (types.isSideDraw(props) && props.appearance) || 'primary' },
             React__default.default.createElement(Card.Card.Surface, null,
                 types.hasHeaderSlot(props) ? (props.headerSlot) : (React__default.default.createElement(CardHeader.CardHeader, { id: "modal_title", headerVariant: "headingLarge", title: props.headerTitle, subtitle: props.headerSubtitle, ...(showHeaderCloseButton && { onClickClose: handleClose }) })),
-                React__default.default.createElement("section", { onScroll: onScroll, ref: setMainSectionRef, className: buildClassnames.buildClassnames([
-                        Modal_module.mainSection,
-                        fullBleed && Modal_module.fullBleed,
-                        isContentOverflowing && Modal_module.scrollable,
-                    ]) }, children),
+                React__default.default.createElement(styled.MainSection, { onScroll: onScroll, ref: setMainSectionRef, isScrollable: isContentOverflowing, fullBleed: fullBleed }, children),
                 types.hasFooterSlot(props) && props.footerSlot,
                 !types.hasFooterSlot(props) && (props.leftActions || props.rightActions) && (React__default.default.createElement(Card.Card.Footer, null,
                     React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignX: props.leftActions ? 'between' : 'end' },

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { buildClassnames } from '../../utils';\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { Stack } from '../Stack';\nimport { preventDefaultEventOnESC } from './utils';\nimport modalStyles from './Modal.module.scss';\n\n/**\n * Manages body scroll-lock as a component mounted inside AnimatePresence.\n * Reference-counted so multiple simultaneous modals don't conflict:\n * the class only removes when the last modal unmounts.\n */\nlet scrollLockCount = 0;\n\nconst ScrollLock = () => {\n  useEffect(() => {\n    scrollLockCount += 1;\n    document.body.classList.add('veeqo-modal-open');\n    return () => {\n      scrollLockCount -= 1;\n      if (scrollLockCount === 0) {\n        document.body.classList.remove('veeqo-modal-open');\n      }\n    };\n  }, []);\n  return null;\n};\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <ScrollLock />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            variant={variant}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <section\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                className={buildClassnames([\n                  modalStyles.mainSection,\n                  fullBleed && modalStyles.fullBleed,\n                  isContentOverflowing && modalStyles.scrollable,\n                ])}\n              >\n                {children}\n              </section>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["useEffect","useRef","useState","useIsOverflowing","React","AnimatePresence","Dialog","preventDefaultEventOnESC","isSideDraw","Card","hasHeaderSlot","CardHeader","buildClassnames","modalStyles","hasFooterSlot","Stack","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAgBA;;;;AAIG;AACH,IAAI,eAAe,GAAG,CAAC;AAEvB,MAAM,UAAU,GAAG,MAAK;IACtBA,eAAS,CAAC,MAAK;QACb,eAAe,IAAI,CAAC;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC;AAC/C,QAAA,OAAO,MAAK;YACV,eAAe,IAAI,CAAC;YACpB,IAAI,eAAe,KAAK,CAAC,EAAE;gBACzB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC;AACnD,YAAA;AACH,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;AACN,IAAA,OAAO,IAAI;AACb,CAAC;AAEM,MAAM,KAAK,GAAG,CAAC,KAAiB,KAAI;AACzC,IAAA,MAAM,EACJ,UAAU,EACV,qBAAqB,GAAG,IAAI,EAC5B,YAAY,GAAG,KAAK,EACpB,WAAW,GAAG,OAAO,EACrB,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,MAAM,EAChB,OAAO,EAAE,aAAa,EACtB,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK;AAET,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAA2B,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC;IAE9EF,eAAS,CAAC,MAAK;;AACb,QAAA,IAAI,UAAU,EAAE;YACd,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,eAAe,CAAC,MAAM,CAAC,CAAC;AAC1C,YAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,EAAE;AAC9B,QAAA;AACH,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,QAAQ,EAAE,GAAGG,iCAAgB,CAAC,cAAc,CAAC;IAE1F,MAAM,WAAW,GAAG,MAAK;;AACvB,QAAA,IAAI,YAAY;YAAE;AAElB,QAAA,MAAM,MAAM,GAAG,aAAa,EAAE;QAC9B,IAAI,MAAM,KAAK,KAAK;AAAE,YAAA,OAAO;AAE7B,QAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE;AAC3B,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAyC,KAAI;AAClE,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;AACtB,YAAA,CAAC,CAAC,cAAc,EAAE,CAAC;;YAGnB,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC;AAC7D,YAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC;gBAAE;AAEnE,YAAA,WAAW,EAAE;AACd,QAAA;AACH,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,OAAO,CAAsC,KAAI;QAC3E,IAAI,WAAW,KAAK,OAAO;YAAE;AAC7B,QAAA,IAAI,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO;AAAE,YAAA,WAAW,EAAE;AAClD,IAAA,CAAC;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,4BAAe,EAAA,IAAA,EACb,UAAU,KACTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAA;AAC/D,QAAAA,sBAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA,CAAG;QACdA,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAA,EAAA,kBAAA,EACY,OAAO,EACxB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,YAAY,GAAGC,8BAAwB,GAAG,aAAa,EAClE,OAAO,EAAE,mBAAmB,EAAA,GACxB,IAAI,EAAA,kBAAA,EACS,aAAa,EAC9B,UAAU,EAAE,CAACC,gBAAU,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,UAAU,KAAK,SAAS,EAAA;YAEhEJ,sBAAA,CAAA,aAAA,CAACK,SAAI,CAAC,OAAO,EAAA,IAAA;gBACVC,mBAAa,CAAC,KAAK,CAAC,IACnB,KAAK,CAAC,UAAU,KAEhBN,sBAAA,CAAA,aAAA,CAACO,qBAAU,IACT,EAAE,EAAC,aAAa,EAChB,aAAa,EAAC,cAAc,EAC5B,KAAK,EAAE,KAAK,CAAC,WAAW,EACxB,QAAQ,EAAE,KAAK,CAAC,cAAc,MACzB,qBAAqB,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC,EAAA,CAC5D,CACH;gBAEDP,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAEQ,+BAAe,CAAC;AACzB,wBAAAC,YAAW,CAAC,WAAW;wBACvB,SAAS,IAAIA,YAAW,CAAC,SAAS;wBAClC,oBAAoB,IAAIA,YAAW,CAAC,UAAU;qBAC/C,CAAC,EAAA,EAED,QAAQ,CACD;AAET,gBAAAC,mBAAa,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,UAAU;AAExC,gBAAA,CAACA,mBAAa,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,YAAY,CAAC,KACjEV,sBAAA,CAAA,aAAA,CAACK,SAAI,CAAC,MAAM,EAAA,IAAA;AACV,oBAAAL,sBAAA,CAAA,aAAA,CAACW,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAE,KAAK,CAAC,WAAW,GAAG,SAAS,GAAG,KAAK,EAAA;wBACxE,KAAK,CAAC,WAAW,KAChBX,sBAAA,CAAA,aAAA,CAACW,WAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,OAAO,EAAA,aAAA,EACF,wBAAwB,EAAA,EAEnC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC/CX,sBAAA,CAAA,aAAA,CAACY,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA,GAAK,WAAW,EAAA,EAC9C,KAAK,CACC,CACV,CAAC,CACI,CACT;AACA,wBAAA,KAAK,CAAC,YAAY,KACjBZ,sBAAA,CAAA,aAAA,CAACW,WAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,KAAK,EAAA,aAAA,EACA,yBAAyB,EAAA,EAEpC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAChDX,sBAAA,CAAA,aAAA,CAACY,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA,GAAK,WAAW,EAAA,EAC9C,KAAK,CACC,CACV,CAAC,CACI,CACT,CACK,CACI,CACf,CACY,CACR,CACL,CACP,CACe;AAEtB;;;;"}
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { MainSection, NonScrollableBody } from './components/styled';\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { Stack } from '../Stack';\nimport { preventDefaultEventOnESC } from './utils';\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <NonScrollableBody />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            variant={variant}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <MainSection\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                isScrollable={isContentOverflowing}\n                fullBleed={fullBleed}\n              >\n                {children}\n              </MainSection>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["useRef","useState","useEffect","useIsOverflowing","React","AnimatePresence","NonScrollableBody","Dialog","preventDefaultEventOnESC","isSideDraw","Card","hasHeaderSlot","CardHeader","MainSection","hasFooterSlot","Stack","Button"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAeO,MAAM,KAAK,GAAG,CAAC,KAAiB,KAAI;AACzC,IAAA,MAAM,EACJ,UAAU,EACV,qBAAqB,GAAG,IAAI,EAC5B,YAAY,GAAG,KAAK,EACpB,WAAW,GAAG,OAAO,EACrB,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,MAAM,EAChB,OAAO,EAAE,aAAa,EACtB,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK;AAET,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAA2B,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC;IAE9EC,eAAS,CAAC,MAAK;;AACb,QAAA,IAAI,UAAU,EAAE;YACd,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,eAAe,CAAC,MAAM,CAAC,CAAC;AAC1C,YAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,EAAE;AAC9B,QAAA;AACH,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,QAAQ,EAAE,GAAGC,iCAAgB,CAAC,cAAc,CAAC;IAE1F,MAAM,WAAW,GAAG,MAAK;;AACvB,QAAA,IAAI,YAAY;YAAE;AAElB,QAAA,MAAM,MAAM,GAAG,aAAa,EAAE;QAC9B,IAAI,MAAM,KAAK,KAAK;AAAE,YAAA,OAAO;AAE7B,QAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE;AAC3B,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAyC,KAAI;AAClE,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;AACtB,YAAA,CAAC,CAAC,cAAc,EAAE,CAAC;;YAGnB,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC;AAC7D,YAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC;gBAAE;AAEnE,YAAA,WAAW,EAAE;AACd,QAAA;AACH,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,OAAO,CAAsC,KAAI;QAC3E,IAAI,WAAW,KAAK,OAAO;YAAE;AAC7B,QAAA,IAAI,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO;AAAE,YAAA,WAAW,EAAE;AAClD,IAAA,CAAC;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,4BAAe,EAAA,IAAA,EACb,UAAU,KACTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAA;AAC/D,QAAAA,sBAAA,CAAA,aAAA,CAACE,wBAAiB,EAAA,IAAA,CAAG;QACrBF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAA,kBAAA,EACY,OAAO,EACxB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,YAAY,GAAGC,8BAAwB,GAAG,aAAa,EAClE,OAAO,EAAE,mBAAmB,EAAA,GACxB,IAAI,EAAA,kBAAA,EACS,aAAa,EAC9B,UAAU,EAAE,CAACC,gBAAU,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,UAAU,KAAK,SAAS,EAAA;YAEhEL,sBAAA,CAAA,aAAA,CAACM,SAAI,CAAC,OAAO,EAAA,IAAA;gBACVC,mBAAa,CAAC,KAAK,CAAC,IACnB,KAAK,CAAC,UAAU,KAEhBP,sBAAA,CAAA,aAAA,CAACQ,qBAAU,IACT,EAAE,EAAC,aAAa,EAChB,aAAa,EAAC,cAAc,EAC5B,KAAK,EAAE,KAAK,CAAC,WAAW,EACxB,QAAQ,EAAE,KAAK,CAAC,cAAc,MACzB,qBAAqB,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC,EAAA,CAC5D,CACH;AAED,gBAAAR,sBAAA,CAAA,aAAA,CAACS,kBAAW,EAAA,EACV,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,iBAAiB,EACtB,YAAY,EAAE,oBAAoB,EAClC,SAAS,EAAE,SAAS,EAAA,EAEnB,QAAQ,CACG;AAEb,gBAAAC,mBAAa,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,UAAU;AAExC,gBAAA,CAACA,mBAAa,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,YAAY,CAAC,KACjEV,sBAAA,CAAA,aAAA,CAACM,SAAI,CAAC,MAAM,EAAA,IAAA;AACV,oBAAAN,sBAAA,CAAA,aAAA,CAACW,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAE,KAAK,CAAC,WAAW,GAAG,SAAS,GAAG,KAAK,EAAA;wBACxE,KAAK,CAAC,WAAW,KAChBX,sBAAA,CAAA,aAAA,CAACW,WAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,OAAO,EAAA,aAAA,EACF,wBAAwB,EAAA,EAEnC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC/CX,sBAAA,CAAA,aAAA,CAACY,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA,GAAK,WAAW,EAAA,EAC9C,KAAK,CACC,CACV,CAAC,CACI,CACT;AACA,wBAAA,KAAK,CAAC,YAAY,KACjBZ,sBAAA,CAAA,aAAA,CAACW,WAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,KAAK,EAAA,aAAA,EACA,yBAAyB,EAAA,EAEpC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAChDX,sBAAA,CAAA,aAAA,CAACY,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA,GAAK,WAAW,EAAA,EAC9C,KAAK,CACC,CACV,CAAC,CACI,CACT,CACK,CACI,CACf,CACY,CACR,CACL,CACP,CACe;AAEtB;;;;"}

package/dist/components/Modal/Modal.js

@@ -1,37 +1,16 @@
 import React__default, { useRef, useState, useEffect } from 'react';
 import { AnimatePresence } from 'framer-motion';
+import { NonScrollableBody, MainSection } from './components/styled.js';
 import { isSideDraw, hasHeaderSlot, hasFooterSlot } from './types.js';
 import { Dialog } from './components/Dialog/Dialog.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import 'uid/secure';
 import { useIsOverflowing } from '../../hooks/useIsOverflowing.js';
 import { Button } from '../Button/Button.js';
 import { Card } from '../Card/Card.js';
 import { CardHeader } from '../CardHeader/CardHeader.js';
 import { Stack } from '../Stack/Stack.js';
 import { preventDefaultEventOnESC } from './utils.js';
-import modalStyles from './Modal.module.scss.js';
 
 /* eslint-disable react/destructuring-assignment */
-/**
- * Manages body scroll-lock as a component mounted inside AnimatePresence.
- * Reference-counted so multiple simultaneous modals don't conflict:
- * the class only removes when the last modal unmounts.
- */
-let scrollLockCount = 0;
-const ScrollLock = () => {
-    useEffect(() => {
-        scrollLockCount += 1;
-        document.body.classList.add('veeqo-modal-open');
-        return () => {
-            scrollLockCount -= 1;
-            if (scrollLockCount === 0) {
-                document.body.classList.remove('veeqo-modal-open');
-            }
-        };
-    }, []);
-    return null;
-};
 const Modal = (props) => {
     const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false, variant = 'base', onClose: parentOnClose, children, ...rest } = props;
     const modalRef = useRef(null);
@@ -70,15 +49,11 @@ const Modal = (props) => {
             handleClose();
     };
     return (React__default.createElement(AnimatePresence, null, shouldShow && (React__default.createElement("div", { "data-testid": "dialog-wrapper", style: { position: 'absolute' } },
-        React__default.createElement(ScrollLock, null),
+        React__default.createElement(NonScrollableBody, null),
         React__default.createElement(Dialog, { "data-dialog-type": "modal", displayMode: displayMode, variant: variant, ref: modalRef, onClose: handleClose, onKeyDown: preventClose ? preventDefaultEventOnESC : handleKeyDown, onClick: handleBackdropClick, ...rest, "aria-describedby": "modal_title", appearance: (isSideDraw(props) && props.appearance) || 'primary' },
             React__default.createElement(Card.Surface, null,
                 hasHeaderSlot(props) ? (props.headerSlot) : (React__default.createElement(CardHeader, { id: "modal_title", headerVariant: "headingLarge", title: props.headerTitle, subtitle: props.headerSubtitle, ...(showHeaderCloseButton && { onClickClose: handleClose }) })),
-                React__default.createElement("section", { onScroll: onScroll, ref: setMainSectionRef, className: buildClassnames([
-                        modalStyles.mainSection,
-                        fullBleed && modalStyles.fullBleed,
-                        isContentOverflowing && modalStyles.scrollable,
-                    ]) }, children),
+                React__default.createElement(MainSection, { onScroll: onScroll, ref: setMainSectionRef, isScrollable: isContentOverflowing, fullBleed: fullBleed }, children),
                 hasFooterSlot(props) && props.footerSlot,
                 !hasFooterSlot(props) && (props.leftActions || props.rightActions) && (React__default.createElement(Card.Footer, null,
                     React__default.createElement(Stack, { direction: "horizontal", alignX: props.leftActions ? 'between' : 'end' },

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { buildClassnames } from '../../utils';\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { Stack } from '../Stack';\nimport { preventDefaultEventOnESC } from './utils';\nimport modalStyles from './Modal.module.scss';\n\n/**\n * Manages body scroll-lock as a component mounted inside AnimatePresence.\n * Reference-counted so multiple simultaneous modals don't conflict:\n * the class only removes when the last modal unmounts.\n */\nlet scrollLockCount = 0;\n\nconst ScrollLock = () => {\n  useEffect(() => {\n    scrollLockCount += 1;\n    document.body.classList.add('veeqo-modal-open');\n    return () => {\n      scrollLockCount -= 1;\n      if (scrollLockCount === 0) {\n        document.body.classList.remove('veeqo-modal-open');\n      }\n    };\n  }, []);\n  return null;\n};\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <ScrollLock />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            variant={variant}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <section\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                className={buildClassnames([\n                  modalStyles.mainSection,\n                  fullBleed && modalStyles.fullBleed,\n                  isContentOverflowing && modalStyles.scrollable,\n                ])}\n              >\n                {children}\n              </section>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { MainSection, NonScrollableBody } from './components/styled';\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { Stack } from '../Stack';\nimport { preventDefaultEventOnESC } from './utils';\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <NonScrollableBody />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            variant={variant}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <MainSection\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                isScrollable={isContentOverflowing}\n                fullBleed={fullBleed}\n              >\n                {children}\n              </MainSection>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Modal/components/Dialog/Dialog.cjs

@@ -1,46 +1,13 @@
 'use strict';
 
 var React = require('react');
-var framerMotion = require('framer-motion');
-var buildClassnames = require('../../../../utils/buildClassnames.cjs');
-require('uid/secure');
-var Modal_module = require('../../Modal.module.scss.cjs');
+var styled = require('./styled.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-// Animation configurations
-const animations = {
-    leftDrawer: {
-        initial: { opacity: 0, x: -300, bounce: 0 },
-        exit: { opacity: 0, x: -300, bounce: 0 },
-        animate: { opacity: 1, x: 0, bounce: 0 },
-    },
-    rightDrawer: {
-        initial: { opacity: 0, x: 300, bounce: 0 },
-        exit: { opacity: 0, x: 300, bounce: 0 },
-        animate: { opacity: 1, x: 0, bounce: 0 },
-    },
-    modal: {
-        initial: { opacity: 0, y: -50, bounce: 0 },
-        exit: { opacity: 0, y: -50, bounce: 0 },
-        animate: { opacity: 1, y: 0, bounce: 0 },
-    },
-};
-const Dialog = React__default.default.forwardRef(({ variant, displayMode, appearance, className, children, onClose, ...rest }, ref) => {
-    // framer-motion's type definitions for motion.dialog omit the standard
-    // HTML dialog onClose handler. Cast through a focused type to pass it
-    // safely to the underlying DOM element.
-    const closeHandler = { onClose };
-    return (React__default.default.createElement(framerMotion.motion.dialog, { ref: ref, className: buildClassnames.buildClassnames([
-            Modal_module.dialog,
-            Modal_module[displayMode],
-            Modal_module[`${variant}-variant`],
-            appearance === 'secondary' && Modal_module.secondaryAppearance,
-            className,
-        ]), initial: animations[displayMode].initial, animate: animations[displayMode].animate, exit: animations[displayMode].exit, transition: { type: 'tween', duration: 0.25 }, ...closeHandler, ...rest }, children));
-});
+const Dialog = React__default.default.forwardRef(({ ...rest }, ref) => React__default.default.createElement(styled.StyledDialog, { ref: ref, ...rest }));
 
 exports.Dialog = Dialog;
 //# sourceMappingURL=Dialog.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance, ModalTypes, ModalVariants } from '../../types';\nimport { buildClassnames } from '../../../../utils';\nimport modalStyles from '../../Modal.module.scss';\n\n// Animation configurations\nconst animations = {\n  leftDrawer: {\n    initial: { opacity: 0, x: -300, bounce: 0 },\n    exit: { opacity: 0, x: -300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  rightDrawer: {\n    initial: { opacity: 0, x: 300, bounce: 0 },\n    exit: { opacity: 0, x: 300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  modal: {\n    initial: { opacity: 0, y: -50, bounce: 0 },\n    exit: { opacity: 0, y: -50, bounce: 0 },\n    animate: { opacity: 1, y: 0, bounce: 0 },\n  },\n};\n\ntype DialogProps = {\n  variant: ModalVariants;\n  displayMode: ModalTypes;\n  appearance?: ModalAppearance;\n  className?: string;\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDialogElement>;\n  onClick?: React.MouseEventHandler<HTMLDialogElement>;\n  style?: React.CSSProperties;\n  [key: `data-${string}`]: string | undefined;\n  [key: `aria-${string}`]: string | undefined;\n};\n\nexport const Dialog = React.forwardRef<HTMLDialogElement, DialogProps>(\n  ({ variant, displayMode, appearance, className, children, onClose, ...rest }, ref) => {\n    // framer-motion's type definitions for motion.dialog omit the standard\n    // HTML dialog onClose handler. Cast through a focused type to pass it\n    // safely to the underlying DOM element.\n    const closeHandler = { onClose } as Pick<\n      React.DialogHTMLAttributes<HTMLDialogElement>,\n      'onClose'\n    >;\n\n    return (\n      <motion.dialog\n        ref={ref}\n        className={buildClassnames([\n          modalStyles.dialog,\n          modalStyles[displayMode],\n          modalStyles[`${variant}-variant`],\n          appearance === 'secondary' && modalStyles.secondaryAppearance,\n          className,\n        ])}\n        initial={animations[displayMode].initial}\n        animate={animations[displayMode].animate}\n        exit={animations[displayMode].exit}\n        transition={{ type: 'tween', duration: 0.25 }}\n        {...closeHandler}\n        {...rest}\n      >\n        {children}\n      </motion.dialog>\n    );\n  },\n);\n"],"names":["React","motion","buildClassnames","modalStyles"],"mappings":";;;;;;;;;;;;AAMA;AACA,MAAM,UAAU,GAAG;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;CACF;AAgBM,MAAM,MAAM,GAAGA,sBAAK,CAAC,UAAU,CACpC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;;;;AAInF,IAAA,MAAM,YAAY,GAAG,EAAE,OAAO,EAG7B;AAED,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,mBAAM,CAAC,MAAM,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,YAAW,CAAC,MAAM;YAClBA,YAAW,CAAC,WAAW,CAAC;AACxB,YAAAA,YAAW,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;AACjC,YAAA,UAAU,KAAK,WAAW,IAAIA,YAAW,CAAC,mBAAmB;YAC7D,SAAS;SACV,CAAC,EACF,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,EAClC,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KACzC,YAAY,EAAA,GACZ,IAAI,EAAA,EAEP,QAAQ,CACK;AAEpB,CAAC;;;;"}
+{"version":3,"file":"Dialog.cjs","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledDialog } from './styled';\nimport { ModalAppearance, ModalVariants } from '../../types';\n\ntype ModifiedDialogProps = {\n  variant: ModalVariants;\n  appearance?: ModalAppearance;\n} & React.ComponentProps<typeof StyledDialog>;\n\nexport const Dialog = React.forwardRef<HTMLDialogElement, ModifiedDialogProps>(\n  ({ ...rest }, ref) => <StyledDialog ref={ref} {...rest} />,\n);\n"],"names":["React","StyledDialog"],"mappings":";;;;;;;;;AASO,MAAM,MAAM,GAAGA,sBAAK,CAAC,UAAU,CACpC,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAKA,sBAAA,CAAA,aAAA,CAACC,mBAAY,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,EAAA,CAAI;;;;"}

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

@@ -1,17 +1,9 @@
 import React from 'react';
-import { ModalAppearance, ModalTypes, ModalVariants } from '../../types';
-type DialogProps = {
+import { StyledDialog } from './styled';
+import { ModalAppearance, ModalVariants } from '../../types';
+type ModifiedDialogProps = {
     variant: ModalVariants;
-    displayMode: ModalTypes;
     appearance?: ModalAppearance;
-    className?: string;
-    children?: React.ReactNode;
-    onClose?: () => void;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDialogElement>;
-    onClick?: React.MouseEventHandler<HTMLDialogElement>;
-    style?: React.CSSProperties;
-    [key: `data-${string}`]: string | undefined;
-    [key: `aria-${string}`]: string | undefined;
-};
-export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDialogElement>>;
+} & React.ComponentProps<typeof StyledDialog>;
+export declare const Dialog: React.ForwardRefExoticComponent<Omit<ModifiedDialogProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
 export {};

package/dist/components/Modal/components/Dialog/Dialog.js

@@ -1,40 +1,7 @@
 import React__default from 'react';
-import { motion } from 'framer-motion';
-import { buildClassnames } from '../../../../utils/buildClassnames.js';
-import 'uid/secure';
-import modalStyles from '../../Modal.module.scss.js';
+import { StyledDialog } from './styled.js';
 
-// Animation configurations
-const animations = {
-    leftDrawer: {
-        initial: { opacity: 0, x: -300, bounce: 0 },
-        exit: { opacity: 0, x: -300, bounce: 0 },
-        animate: { opacity: 1, x: 0, bounce: 0 },
-    },
-    rightDrawer: {
-        initial: { opacity: 0, x: 300, bounce: 0 },
-        exit: { opacity: 0, x: 300, bounce: 0 },
-        animate: { opacity: 1, x: 0, bounce: 0 },
-    },
-    modal: {
-        initial: { opacity: 0, y: -50, bounce: 0 },
-        exit: { opacity: 0, y: -50, bounce: 0 },
-        animate: { opacity: 1, y: 0, bounce: 0 },
-    },
-};
-const Dialog = React__default.forwardRef(({ variant, displayMode, appearance, className, children, onClose, ...rest }, ref) => {
-    // framer-motion's type definitions for motion.dialog omit the standard
-    // HTML dialog onClose handler. Cast through a focused type to pass it
-    // safely to the underlying DOM element.
-    const closeHandler = { onClose };
-    return (React__default.createElement(motion.dialog, { ref: ref, className: buildClassnames([
-            modalStyles.dialog,
-            modalStyles[displayMode],
-            modalStyles[`${variant}-variant`],
-            appearance === 'secondary' && modalStyles.secondaryAppearance,
-            className,
-        ]), initial: animations[displayMode].initial, animate: animations[displayMode].animate, exit: animations[displayMode].exit, transition: { type: 'tween', duration: 0.25 }, ...closeHandler, ...rest }, children));
-});
+const Dialog = React__default.forwardRef(({ ...rest }, ref) => React__default.createElement(StyledDialog, { ref: ref, ...rest }));
 
 export { Dialog };
 //# sourceMappingURL=Dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance, ModalTypes, ModalVariants } from '../../types';\nimport { buildClassnames } from '../../../../utils';\nimport modalStyles from '../../Modal.module.scss';\n\n// Animation configurations\nconst animations = {\n  leftDrawer: {\n    initial: { opacity: 0, x: -300, bounce: 0 },\n    exit: { opacity: 0, x: -300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  rightDrawer: {\n    initial: { opacity: 0, x: 300, bounce: 0 },\n    exit: { opacity: 0, x: 300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  modal: {\n    initial: { opacity: 0, y: -50, bounce: 0 },\n    exit: { opacity: 0, y: -50, bounce: 0 },\n    animate: { opacity: 1, y: 0, bounce: 0 },\n  },\n};\n\ntype DialogProps = {\n  variant: ModalVariants;\n  displayMode: ModalTypes;\n  appearance?: ModalAppearance;\n  className?: string;\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDialogElement>;\n  onClick?: React.MouseEventHandler<HTMLDialogElement>;\n  style?: React.CSSProperties;\n  [key: `data-${string}`]: string | undefined;\n  [key: `aria-${string}`]: string | undefined;\n};\n\nexport const Dialog = React.forwardRef<HTMLDialogElement, DialogProps>(\n  ({ variant, displayMode, appearance, className, children, onClose, ...rest }, ref) => {\n    // framer-motion's type definitions for motion.dialog omit the standard\n    // HTML dialog onClose handler. Cast through a focused type to pass it\n    // safely to the underlying DOM element.\n    const closeHandler = { onClose } as Pick<\n      React.DialogHTMLAttributes<HTMLDialogElement>,\n      'onClose'\n    >;\n\n    return (\n      <motion.dialog\n        ref={ref}\n        className={buildClassnames([\n          modalStyles.dialog,\n          modalStyles[displayMode],\n          modalStyles[`${variant}-variant`],\n          appearance === 'secondary' && modalStyles.secondaryAppearance,\n          className,\n        ])}\n        initial={animations[displayMode].initial}\n        animate={animations[displayMode].animate}\n        exit={animations[displayMode].exit}\n        transition={{ type: 'tween', duration: 0.25 }}\n        {...closeHandler}\n        {...rest}\n      >\n        {children}\n      </motion.dialog>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;AAMA;AACA,MAAM,UAAU,GAAG;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;CACF;AAgBM,MAAM,MAAM,GAAGA,cAAK,CAAC,UAAU,CACpC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;;;;AAInF,IAAA,MAAM,YAAY,GAAG,EAAE,OAAO,EAG7B;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,CAAC,MAAM,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,WAAW,CAAC,MAAM;YAClB,WAAW,CAAC,WAAW,CAAC;AACxB,YAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;AACjC,YAAA,UAAU,KAAK,WAAW,IAAI,WAAW,CAAC,mBAAmB;YAC7D,SAAS;SACV,CAAC,EACF,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,EAClC,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KACzC,YAAY,EAAA,GACZ,IAAI,EAAA,EAEP,QAAQ,CACK;AAEpB,CAAC;;;;"}
+{"version":3,"file":"Dialog.js","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledDialog } from './styled';\nimport { ModalAppearance, ModalVariants } from '../../types';\n\ntype ModifiedDialogProps = {\n  variant: ModalVariants;\n  appearance?: ModalAppearance;\n} & React.ComponentProps<typeof StyledDialog>;\n\nexport const Dialog = React.forwardRef<HTMLDialogElement, ModifiedDialogProps>(\n  ({ ...rest }, ref) => <StyledDialog ref={ref} {...rest} />,\n);\n"],"names":["React"],"mappings":";;;AASO,MAAM,MAAM,GAAGA,cAAK,CAAC,UAAU,CACpC,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAKA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,EAAA,CAAI;;;;"}

package/dist/components/Modal/components/Dialog/constants.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var breakpoints = require('../../../../theme/modules/breakpoints.cjs');
+
+const heightMap = {
+    xs: '84vh',
+    sm: '72vh',
+    base: '84vh',
+    lg: '96vh',
+};
+const widthMap = {
+    [breakpoints.breakpoints.mobile]: {
+        xs: '60vw',
+        sm: '72vw',
+        base: '100vw',
+        lg: '100vw',
+    },
+    [breakpoints.breakpoints.tablet]: {
+        xs: '60vw',
+        sm: '72vw',
+        base: '100vw',
+        lg: '100vw',
+    },
+    [breakpoints.breakpoints.lgTablet]: {
+        xs: '48vw',
+        sm: '56vw',
+        base: '88vw',
+        lg: '100vw',
+    },
+    [breakpoints.breakpoints.desktop]: {
+        xs: '36vw',
+        sm: '44vw',
+        base: '72vw',
+        lg: '88vw',
+    },
+    [breakpoints.breakpoints.lgDesktop]: {
+        xs: '32vw',
+        sm: '40vw',
+        base: '52vw',
+        lg: '80vw',
+    },
+};
+const fullScreenBreakpointMap = {
+    xs: breakpoints.breakpoints.mobile,
+    sm: breakpoints.breakpoints.mobile,
+    base: breakpoints.breakpoints.tablet,
+    lg: breakpoints.breakpoints.lgTablet,
+};
+
+exports.fullScreenBreakpointMap = fullScreenBreakpointMap;
+exports.heightMap = heightMap;
+exports.widthMap = widthMap;
+//# sourceMappingURL=constants.cjs.map

package/dist/components/Modal/components/Dialog/constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.cjs","sources":["../../../../../src/components/Modal/components/Dialog/constants.ts"],"sourcesContent":["import { breakpoints } from '../../../../theme/modules/breakpoints';\n\nexport const heightMap = {\n  xs: '84vh',\n  sm: '72vh',\n  base: '84vh',\n  lg: '96vh',\n} as const;\n\nexport const widthMap = {\n  [breakpoints.mobile]: {\n    xs: '60vw',\n    sm: '72vw',\n    base: '100vw',\n    lg: '100vw',\n  },\n  [breakpoints.tablet]: {\n    xs: '60vw',\n    sm: '72vw',\n    base: '100vw',\n    lg: '100vw',\n  },\n  [breakpoints.lgTablet]: {\n    xs: '48vw',\n    sm: '56vw',\n    base: '88vw',\n    lg: '100vw',\n  },\n  [breakpoints.desktop]: {\n    xs: '36vw',\n    sm: '44vw',\n    base: '72vw',\n    lg: '88vw',\n  },\n  [breakpoints.lgDesktop]: {\n    xs: '32vw',\n    sm: '40vw',\n    base: '52vw',\n    lg: '80vw',\n  },\n} as const;\n\nexport const fullScreenBreakpointMap = {\n  xs: breakpoints.mobile,\n  sm: breakpoints.mobile,\n  base: breakpoints.tablet,\n  lg: breakpoints.lgTablet,\n} as const;\n"],"names":["breakpoints"],"mappings":";;;;AAEO,MAAM,SAAS,GAAG;AACvB,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;;AAGL,MAAM,QAAQ,GAAG;AACtB,IAAA,CAACA,uBAAW,CAAC,MAAM,GAAG;AACpB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,EAAE,EAAE,OAAO;AACZ,KAAA;AACD,IAAA,CAACA,uBAAW,CAAC,MAAM,GAAG;AACpB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,EAAE,EAAE,OAAO;AACZ,KAAA;AACD,IAAA,CAACA,uBAAW,CAAC,QAAQ,GAAG;AACtB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,EAAE,EAAE,OAAO;AACZ,KAAA;AACD,IAAA,CAACA,uBAAW,CAAC,OAAO,GAAG;AACrB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,CAACA,uBAAW,CAAC,SAAS,GAAG;AACvB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;;AAGI,MAAM,uBAAuB,GAAG;IACrC,EAAE,EAAEA,uBAAW,CAAC,MAAM;IACtB,EAAE,EAAEA,uBAAW,CAAC,MAAM;IACtB,IAAI,EAAEA,uBAAW,CAAC,MAAM;IACxB,EAAE,EAAEA,uBAAW,CAAC,QAAQ;;;;;;;"}

package/dist/components/Modal/components/Dialog/constants.d.ts

@@ -0,0 +1,44 @@
+export declare const heightMap: {
+    readonly xs: "84vh";
+    readonly sm: "72vh";
+    readonly base: "84vh";
+    readonly lg: "96vh";
+};
+export declare const widthMap: {
+    readonly "640px": {
+        readonly xs: "60vw";
+        readonly sm: "72vw";
+        readonly base: "100vw";
+        readonly lg: "100vw";
+    };
+    readonly "720px": {
+        readonly xs: "60vw";
+        readonly sm: "72vw";
+        readonly base: "100vw";
+        readonly lg: "100vw";
+    };
+    readonly "960px": {
+        readonly xs: "48vw";
+        readonly sm: "56vw";
+        readonly base: "88vw";
+        readonly lg: "100vw";
+    };
+    readonly "1280px": {
+        readonly xs: "36vw";
+        readonly sm: "44vw";
+        readonly base: "72vw";
+        readonly lg: "88vw";
+    };
+    readonly "1440px": {
+        readonly xs: "32vw";
+        readonly sm: "40vw";
+        readonly base: "52vw";
+        readonly lg: "80vw";
+    };
+};
+export declare const fullScreenBreakpointMap: {
+    readonly xs: "640px";
+    readonly sm: "640px";
+    readonly base: "720px";
+    readonly lg: "960px";
+};

package/dist/components/Modal/components/Dialog/constants.js

@@ -0,0 +1,49 @@
+import { breakpoints } from '../../../../theme/modules/breakpoints.js';
+
+const heightMap = {
+    xs: '84vh',
+    sm: '72vh',
+    base: '84vh',
+    lg: '96vh',
+};
+const widthMap = {
+    [breakpoints.mobile]: {
+        xs: '60vw',
+        sm: '72vw',
+        base: '100vw',
+        lg: '100vw',
+    },
+    [breakpoints.tablet]: {
+        xs: '60vw',
+        sm: '72vw',
+        base: '100vw',
+        lg: '100vw',
+    },
+    [breakpoints.lgTablet]: {
+        xs: '48vw',
+        sm: '56vw',
+        base: '88vw',
+        lg: '100vw',
+    },
+    [breakpoints.desktop]: {
+        xs: '36vw',
+        sm: '44vw',
+        base: '72vw',
+        lg: '88vw',
+    },
+    [breakpoints.lgDesktop]: {
+        xs: '32vw',
+        sm: '40vw',
+        base: '52vw',
+        lg: '80vw',
+    },
+};
+const fullScreenBreakpointMap = {
+    xs: breakpoints.mobile,
+    sm: breakpoints.mobile,
+    base: breakpoints.tablet,
+    lg: breakpoints.lgTablet,
+};
+
+export { fullScreenBreakpointMap, heightMap, widthMap };
+//# sourceMappingURL=constants.js.map

package/dist/components/Modal/components/Dialog/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../src/components/Modal/components/Dialog/constants.ts"],"sourcesContent":["import { breakpoints } from '../../../../theme/modules/breakpoints';\n\nexport const heightMap = {\n  xs: '84vh',\n  sm: '72vh',\n  base: '84vh',\n  lg: '96vh',\n} as const;\n\nexport const widthMap = {\n  [breakpoints.mobile]: {\n    xs: '60vw',\n    sm: '72vw',\n    base: '100vw',\n    lg: '100vw',\n  },\n  [breakpoints.tablet]: {\n    xs: '60vw',\n    sm: '72vw',\n    base: '100vw',\n    lg: '100vw',\n  },\n  [breakpoints.lgTablet]: {\n    xs: '48vw',\n    sm: '56vw',\n    base: '88vw',\n    lg: '100vw',\n  },\n  [breakpoints.desktop]: {\n    xs: '36vw',\n    sm: '44vw',\n    base: '72vw',\n    lg: '88vw',\n  },\n  [breakpoints.lgDesktop]: {\n    xs: '32vw',\n    sm: '40vw',\n    base: '52vw',\n    lg: '80vw',\n  },\n} as const;\n\nexport const fullScreenBreakpointMap = {\n  xs: breakpoints.mobile,\n  sm: breakpoints.mobile,\n  base: breakpoints.tablet,\n  lg: breakpoints.lgTablet,\n} as const;\n"],"names":[],"mappings":";;AAEO,MAAM,SAAS,GAAG;AACvB,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;;AAGL,MAAM,QAAQ,GAAG;AACtB,IAAA,CAAC,WAAW,CAAC,MAAM,GAAG;AACpB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,EAAE,EAAE,OAAO;AACZ,KAAA;AACD,IAAA,CAAC,WAAW,CAAC,MAAM,GAAG;AACpB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,EAAE,EAAE,OAAO;AACZ,KAAA;AACD,IAAA,CAAC,WAAW,CAAC,QAAQ,GAAG;AACtB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,EAAE,EAAE,OAAO;AACZ,KAAA;AACD,IAAA,CAAC,WAAW,CAAC,OAAO,GAAG;AACrB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,CAAC,WAAW,CAAC,SAAS,GAAG;AACvB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;;AAGI,MAAM,uBAAuB,GAAG;IACrC,EAAE,EAAE,WAAW,CAAC,MAAM;IACtB,EAAE,EAAE,WAAW,CAAC,MAAM;IACtB,IAAI,EAAE,WAAW,CAAC,MAAM;IACxB,EAAE,EAAE,WAAW,CAAC,QAAQ;;;;;"}