npm - @veeqo/ui - Versions diffs - 14.7.0 → 14.7.1-beta-1 - Mend

@veeqo/ui 14.7.0 → 14.7.1-beta-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/dist/components/Modal/Modal.js CHANGED Viewed

@@ -1,16 +1,37 @@
 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);
@@ -49,11 +70,15 @@ 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(NonScrollableBody, null),
+        React__default.createElement(ScrollLock, 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(MainSection, { onScroll: onScroll, ref: setMainSectionRef, isScrollable: isContentOverflowing, fullBleed: fullBleed }, children),
+                React__default.createElement("section", { onScroll: onScroll, ref: setMainSectionRef, className: buildClassnames([
+                        modalStyles.mainSection,
+                        fullBleed && modalStyles.fullBleed,
+                        isContentOverflowing && modalStyles.scrollable,
+                    ]) }, 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 CHANGED Viewed

	@@ -1 +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 { 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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"}
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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"}

package/dist/components/Modal/Modal.module.scss.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+'use strict';
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+___$insertStyle("/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes _fadeIn_6h63u_1 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n._dialog_6h63u_17 {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  /* Targets Card.Footer */\n}\n._dialog_6h63u_17::backdrop {\n  animation: _fadeIn_6h63u_1 0.25s ease forwards;\n  background-color: rgba(55, 66, 77, 0.5);\n  width: 100%;\n  height: 100%;\n}\n._dialog_6h63u_17 > :first-child {\n  display: flex;\n  flex-direction: column;\n}\n._dialog_6h63u_17 > :first-child ._mainSection_6h63u_37 {\n  padding-bottom: var(--sizes-md);\n}\n._dialog_6h63u_17 > :first-child footer {\n  margin-top: 0;\n}\n\n._secondaryAppearance_6h63u_44::backdrop {\n  animation: none;\n  opacity: 0;\n}\n\n/* ---------- MainSection ---------- */\n._mainSection_6h63u_37 {\n  flex: 1;\n  overflow-y: auto;\n}\n\n._mainSection_6h63u_37:not(._fullBleed_6h63u_55) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n._mainSection_6h63u_37._scrollable_6h63u_60 + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n._modal_6h63u_65 {\n  min-width: 464px;\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n}\n._modal_6h63u_65:not([open]) {\n  display: block;\n  position: fixed;\n  inset: 0;\n  transform: translate(-50%, -50%);\n}\n\n/* ---------- Side drawer shared base ---------- */\n._leftDrawer_6h63u_78,\n._rightDrawer_6h63u_79 {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n  /* Critical for framer-motion exit animations */\n}\n._leftDrawer_6h63u_78 > :first-child,\n._rightDrawer_6h63u_79 > :first-child {\n  border-radius: 0;\n  height: 100%;\n}\n._leftDrawer_6h63u_78:not([open]),\n._rightDrawer_6h63u_79:not([open]) {\n  display: block;\n}\n\n._leftDrawer_6h63u_78 {\n  inset: 0 auto 0 0;\n}\n\n._rightDrawer_6h63u_79 {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Variant-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n._xs-variant_6h63u_111 {\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n}\n._xs-variant_6h63u_111 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 640px) {\n  ._xs-variant_6h63u_111 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._xs-variant_6h63u_111, ._xs-variant_6h63u_111 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 60vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 48vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 36vw;\n  }\n}\n@media (width >= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 32vw;\n  }\n}\n\n._sm-variant_6h63u_152 {\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n}\n._sm-variant_6h63u_152 > :first-child {\n  max-height: 72vh;\n}\n@media (width <= 640px) {\n  ._sm-variant_6h63u_152 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._sm-variant_6h63u_152, ._sm-variant_6h63u_152 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 56vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 44vw;\n  }\n}\n@media (width >= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 40vw;\n  }\n}\n\n._base-variant_6h63u_193 {\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n}\n._base-variant_6h63u_193 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 720px) {\n  ._base-variant_6h63u_193 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._base-variant_6h63u_193, ._base-variant_6h63u_193 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._base-variant_6h63u_193 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 52vw;\n  }\n}\n\n._lg-variant_6h63u_229 {\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n}\n._lg-variant_6h63u_229 > :first-child {\n  max-height: 96vh;\n}\n@media (width <= 960px) {\n  ._lg-variant_6h63u_229 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._lg-variant_6h63u_229, ._lg-variant_6h63u_229 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 80vw;\n  }\n}");
+var modalStyles = {"dialog":"_dialog_6h63u_17","fadeIn":"_fadeIn_6h63u_1","mainSection":"_mainSection_6h63u_37","secondaryAppearance":"_secondaryAppearance_6h63u_44","fullBleed":"_fullBleed_6h63u_55","scrollable":"_scrollable_6h63u_60","modal":"_modal_6h63u_65","leftDrawer":"_leftDrawer_6h63u_78","rightDrawer":"_rightDrawer_6h63u_79","xs-variant":"_xs-variant_6h63u_111","sm-variant":"_sm-variant_6h63u_152","base-variant":"_base-variant_6h63u_193","lg-variant":"_lg-variant_6h63u_229"};
+module.exports = modalStyles;
+//# sourceMappingURL=Modal.module.scss.cjs.map

package/dist/components/Modal/Modal.module.scss.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Modal.module.scss.cjs","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.dialog {\n padding: 0;\n border: none;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-lg);\n z-index: var(--layers-modal);\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: rgba(55, 66, 77, 0.5);\n width: 100%;\n height: 100%;\n }\n\n /* Targets Card.Surface: the sole direct child of dialog.\n Wave 3 (Card migration) can update to CSS Module class reference. */\n & > :first-child {\n display: flex;\n flex-direction: column;\n }\n\n & > :first-child .mainSection {\n padding-bottom: var(--sizes-md);\n }\n\n /* Targets Card.Footer */\n & > :first-child footer {\n margin-top: 0;\n }\n}\n\n.secondaryAppearance {\n &::backdrop {\n animation: none;\n opacity: 0;\n }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n flex: 1;\n overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n min-width: 464px;\n\n /* Critical for framer-motion exit animations: prevents HTML dialog from\n hiding via UA stylesheet when 'open' attribute is removed. */\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > :first-child {\n border-radius: 0;\n height: 100%;\n }\n\n /* Critical for framer-motion exit animations */\n &:not([open]) {\n display: block;\n }\n}\n\n.leftDrawer {\n inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n inset: 0 0 0 auto;\n}\n\n/* ---------- Variant-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n\n.xs-variant {\n & > :first-child {\n max-height: 84vh;\n }\n\n /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n @media (width <= 640px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 641px) and (width <= 720px) {\n max-width: 60vw;\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 48vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 36vw;\n }\n\n @media (width >= 1280px) {\n max-width: 32vw;\n }\n}\n\n.sm-variant {\n & > :first-child {\n max-height: 72vh;\n }\n\n /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n @media (width <= 640px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 641px) and (width <= 720px) {\n max-width: 72vw;\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 56vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 44vw;\n }\n\n @media (width >= 1280px) {\n max-width: 40vw;\n }\n}\n\n.base-variant {\n & > :first-child {\n max-height: 84vh;\n }\n\n /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n @media (width <= 720px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 88vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 72vw;\n }\n\n @media (width >= 1280px) {\n max-width: 52vw;\n }\n}\n\n.lg-variant {\n & > :first-child {\n max-height: 96vh;\n }\n\n /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n @media (width <= 960px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 88vw;\n }\n\n @media (width >= 1280px) {\n max-width: 80vw;\n }\n}\n"],"names":[],"mappings":";;;;AAAA,eAAA,CAAA,4yLAAA;AAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,uBAAA;;;;"}

package/dist/components/Modal/Modal.module.scss.js ADDED Viewed

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+insertStyle("/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes _fadeIn_6h63u_1 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n._dialog_6h63u_17 {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  /* Targets Card.Footer */\n}\n._dialog_6h63u_17::backdrop {\n  animation: _fadeIn_6h63u_1 0.25s ease forwards;\n  background-color: rgba(55, 66, 77, 0.5);\n  width: 100%;\n  height: 100%;\n}\n._dialog_6h63u_17 > :first-child {\n  display: flex;\n  flex-direction: column;\n}\n._dialog_6h63u_17 > :first-child ._mainSection_6h63u_37 {\n  padding-bottom: var(--sizes-md);\n}\n._dialog_6h63u_17 > :first-child footer {\n  margin-top: 0;\n}\n\n._secondaryAppearance_6h63u_44::backdrop {\n  animation: none;\n  opacity: 0;\n}\n\n/* ---------- MainSection ---------- */\n._mainSection_6h63u_37 {\n  flex: 1;\n  overflow-y: auto;\n}\n\n._mainSection_6h63u_37:not(._fullBleed_6h63u_55) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n._mainSection_6h63u_37._scrollable_6h63u_60 + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n._modal_6h63u_65 {\n  min-width: 464px;\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n}\n._modal_6h63u_65:not([open]) {\n  display: block;\n  position: fixed;\n  inset: 0;\n  transform: translate(-50%, -50%);\n}\n\n/* ---------- Side drawer shared base ---------- */\n._leftDrawer_6h63u_78,\n._rightDrawer_6h63u_79 {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n  /* Critical for framer-motion exit animations */\n}\n._leftDrawer_6h63u_78 > :first-child,\n._rightDrawer_6h63u_79 > :first-child {\n  border-radius: 0;\n  height: 100%;\n}\n._leftDrawer_6h63u_78:not([open]),\n._rightDrawer_6h63u_79:not([open]) {\n  display: block;\n}\n\n._leftDrawer_6h63u_78 {\n  inset: 0 auto 0 0;\n}\n\n._rightDrawer_6h63u_79 {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Variant-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n._xs-variant_6h63u_111 {\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n}\n._xs-variant_6h63u_111 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 640px) {\n  ._xs-variant_6h63u_111 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._xs-variant_6h63u_111, ._xs-variant_6h63u_111 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 60vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 48vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 36vw;\n  }\n}\n@media (width >= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 32vw;\n  }\n}\n\n._sm-variant_6h63u_152 {\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n}\n._sm-variant_6h63u_152 > :first-child {\n  max-height: 72vh;\n}\n@media (width <= 640px) {\n  ._sm-variant_6h63u_152 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._sm-variant_6h63u_152, ._sm-variant_6h63u_152 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 56vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 44vw;\n  }\n}\n@media (width >= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 40vw;\n  }\n}\n\n._base-variant_6h63u_193 {\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n}\n._base-variant_6h63u_193 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 720px) {\n  ._base-variant_6h63u_193 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._base-variant_6h63u_193, ._base-variant_6h63u_193 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._base-variant_6h63u_193 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 52vw;\n  }\n}\n\n._lg-variant_6h63u_229 {\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n}\n._lg-variant_6h63u_229 > :first-child {\n  max-height: 96vh;\n}\n@media (width <= 960px) {\n  ._lg-variant_6h63u_229 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._lg-variant_6h63u_229, ._lg-variant_6h63u_229 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 80vw;\n  }\n}");
+var modalStyles = {"dialog":"_dialog_6h63u_17","fadeIn":"_fadeIn_6h63u_1","mainSection":"_mainSection_6h63u_37","secondaryAppearance":"_secondaryAppearance_6h63u_44","fullBleed":"_fullBleed_6h63u_55","scrollable":"_scrollable_6h63u_60","modal":"_modal_6h63u_65","leftDrawer":"_leftDrawer_6h63u_78","rightDrawer":"_rightDrawer_6h63u_79","xs-variant":"_xs-variant_6h63u_111","sm-variant":"_sm-variant_6h63u_152","base-variant":"_base-variant_6h63u_193","lg-variant":"_lg-variant_6h63u_229"};
+export { modalStyles as default };
+//# sourceMappingURL=Modal.module.scss.js.map

package/dist/components/Modal/Modal.module.scss.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Modal.module.scss.js","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.dialog {\n padding: 0;\n border: none;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-lg);\n z-index: var(--layers-modal);\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: rgba(55, 66, 77, 0.5);\n width: 100%;\n height: 100%;\n }\n\n /* Targets Card.Surface: the sole direct child of dialog.\n Wave 3 (Card migration) can update to CSS Module class reference. */\n & > :first-child {\n display: flex;\n flex-direction: column;\n }\n\n & > :first-child .mainSection {\n padding-bottom: var(--sizes-md);\n }\n\n /* Targets Card.Footer */\n & > :first-child footer {\n margin-top: 0;\n }\n}\n\n.secondaryAppearance {\n &::backdrop {\n animation: none;\n opacity: 0;\n }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n flex: 1;\n overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n min-width: 464px;\n\n /* Critical for framer-motion exit animations: prevents HTML dialog from\n hiding via UA stylesheet when 'open' attribute is removed. */\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > :first-child {\n border-radius: 0;\n height: 100%;\n }\n\n /* Critical for framer-motion exit animations */\n &:not([open]) {\n display: block;\n }\n}\n\n.leftDrawer {\n inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n inset: 0 0 0 auto;\n}\n\n/* ---------- Variant-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n\n.xs-variant {\n & > :first-child {\n max-height: 84vh;\n }\n\n /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n @media (width <= 640px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 641px) and (width <= 720px) {\n max-width: 60vw;\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 48vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 36vw;\n }\n\n @media (width >= 1280px) {\n max-width: 32vw;\n }\n}\n\n.sm-variant {\n & > :first-child {\n max-height: 72vh;\n }\n\n /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n @media (width <= 640px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 641px) and (width <= 720px) {\n max-width: 72vw;\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 56vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 44vw;\n }\n\n @media (width >= 1280px) {\n max-width: 40vw;\n }\n}\n\n.base-variant {\n & > :first-child {\n max-height: 84vh;\n }\n\n /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n @media (width <= 720px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 88vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 72vw;\n }\n\n @media (width >= 1280px) {\n max-width: 52vw;\n }\n}\n\n.lg-variant {\n & > :first-child {\n max-height: 96vh;\n }\n\n /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n @media (width <= 960px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 88vw;\n }\n\n @media (width >= 1280px) {\n max-width: 80vw;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAAAA,WAAA,CAAA,4yLAAA;AAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,uBAAA;;;;"}

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

@@ -1,13 +1,46 @@
 'use strict';
 var React = require('react');
-var styled = require('./styled.cjs');
+var framerMotion = require('framer-motion');
+var buildClassnames = require('../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+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);
-const Dialog = React__default.default.forwardRef(({ ...rest }, ref) => React__default.default.createElement(styled.StyledDialog, { ref: ref, ...rest }));
+// 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));
+});
 exports.Dialog = Dialog;
 //# sourceMappingURL=Dialog.cjs.map

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

	@@ -1 +1 @@
1	- {"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~~;;;;"}
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;;;;"}

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

@@ -1,9 +1,17 @@
 import React from 'react';
-import { StyledDialog } from './styled';
-import { ModalAppearance, ModalVariants } from '../../types';
-type ModifiedDialogProps = {
+import { ModalAppearance, ModalTypes, ModalVariants } from '../../types';
+type DialogProps = {
     variant: ModalVariants;
+    displayMode: ModalTypes;
     appearance?: ModalAppearance;
-} & React.ComponentProps<typeof StyledDialog>;
-export declare const Dialog: React.ForwardRefExoticComponent<Omit<ModifiedDialogProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+    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>>;
 export {};

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

@@ -1,7 +1,40 @@
 import React__default from 'react';
-import { StyledDialog } from './styled.js';
+import { motion } from 'framer-motion';
+import { buildClassnames } from '../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import modalStyles from '../../Modal.module.scss.js';
-const Dialog = React__default.forwardRef(({ ...rest }, ref) => React__default.createElement(StyledDialog, { ref: ref, ...rest }));
+// 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));
+});
 export { Dialog };
 //# sourceMappingURL=Dialog.js.map

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

	@@ -1 +1 @@
1	- {"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~~;;;;"}
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;;;;"}

package/dist/components/Pagination/styled.d.ts CHANGED Viewed

@@ -14,6 +14,10 @@ export declare const PaginationButton: import("styled-components").StyledCompone
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
     contentStyles?: import("react").CSSProperties | undefined;
+    as?: import("react").ElementType | undefined;
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const PageInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
     rel?: string | undefined;

package/dist/components/Popover/Popover.cjs CHANGED Viewed

@@ -5,17 +5,19 @@ var reactPopper = require('react-popper');
 var ResizeObserver = require('resize-observer-polyfill');
 var Portal = require('../Portal/Portal.cjs');
 var index = require('../../theme/index.cjs');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
 var generateId = require('../../utils/generateId.cjs');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
 var useUpdateAriaAnchor = require('./hooks/useUpdateAriaAnchor.cjs');
 var useHandleFocus = require('./hooks/useHandleFocus.cjs');
+var Popover_module = require('./Popover.module.scss.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var ResizeObserver__default = /*#__PURE__*/_interopDefaultCompat(ResizeObserver);
-const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, ...dialogProps }) => {
+const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, className, ...dialogProps }) => {
     // Set up PopperJS
     const [popperElement, setPopperElement] = React.useState(null);
     const { styles, attributes, update } = reactPopper.usePopper(anchorElement, popperElement, { placement });
@@ -57,8 +59,9 @@ const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, pl
         };
     }, [update]);
     return (React__default.default.createElement(Portal.Portal, { rootElementRef: rootElementRef },
-        !removeBackdrop && (React__default.default.createElement(styled.Backdrop, { onClick: onClose, zIndex: zIndex, "data-testid": "popover-backdrop" })),
-        React__default.default.createElement(styled.PopoverDialog, { open: true, id: id, "data-dialog-type": "popover", zIndex: zIndex, ref: setPopperElement, style: {
+        !removeBackdrop && (React__default.default.createElement("div", { className: Popover_module.backdrop, style: assignCssVars.assignCssVars({ zIndex }), onClick: onClose, "data-testid": "popover-backdrop" })),
+        React__default.default.createElement("dialog", { open: true, id: id, "data-dialog-type": "popover", className: buildClassnames.buildClassnames([Popover_module.dialog, className]), ref: setPopperElement, style: {
+                ...assignCssVars.assignCssVars({ zIndex: zIndex + 1 }),
                 ...styles.popper,
                 ...style,
                 ...(useAnchorWidth ? { minWidth: anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.clientWidth } : {}),

package/dist/components/Popover/Popover.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { ~~PopoverDialog~~, ~~Backdrop~~ } ~~from './styled';\nimport { generateId~~ } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n ...dialogProps\n}: PopoverProps) => {\n // Set up PopperJS\n const [popperElement, setPopperElement] = useState<HTMLDialogElement \| null>(null);\n const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId \|\| generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n /*\n When content size is changed, force popper update\n /\n useEffect(() => {\n if (!update \|\| !popperElement) return undefined;\n const resizeObserver = new ResizeObserver(update);\n resizeObserver.observe(popperElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [update, popperElement]);\n\n /\n When window is resized, force popper update\n */\n useEffect(() => {\n if (!update) return undefined;\n window.addEventListener('resize', update);\n\n return () => {\n window.removeEventListener('resize', update);\n };\n }, [update]);\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <~~Backdrop onClick~~={~~onClose~~} zIndex={~~zIndex~~} data-testid=\"popover-backdrop\" />\n )}\n <~~PopoverDialog~~\n open\n id={id}\n data-dialog-type=\"popover\"\n ~~zIndex~~={~~zIndex~~}\n ref={setPopperElement}\n style={{\n ...styles.popper,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...attributes.popper}\n {...dialogProps}\n >\n {children}\n </~~PopoverDialog~~>\n </Portal>\n );\n};\n"],"names":["theme","useState","usePopper","useMemo","generateId","useUpdateAriaAnchor","useHandleFocus","useEffect","ResizeObserver","React","Portal","~~Backdrop~~","~~PopoverDialog~~"],"mappings":"~~;;;;;;;;;;;;;;;;;~~MAYa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAGA,WAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAA2B,IAAI,CAAC;AAClF,IAAA,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAGC,qBAAS,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,CAAC;;AAG7F,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,qBAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvEC,uCAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,EAAI;AACnB,IAAA,CAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAGC,6BAAc,CAAC;QACvC,aAAa;QACb,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACHC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,SAAS;AAC/C,QAAA,MAAM,cAAc,GAAG,IAAIC,+BAAc,CAAC,MAAM,CAAC;AACjD,QAAA,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC;AAErC,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,UAAU,EAAE;AAC7B,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE3B;;AAEG;IACHD,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,SAAS;AAC7B,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAEzC,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC9C,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,QACEE,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;~~AACnC~~,~~QAAA,~~CAAC,cAAc,KACdD,sBAAA,CAAA,aAAA,~~CAACE~~,~~eAAQ~~,~~IAAC~~,~~OAAO~~,~~EAAE~~,~~OAAO~~,EAAE,MAAM,EAAE,~~MAAM~~,EAAA,aAAA,~~EAAc~~,kBAAkB,~~GAAG~~,~~CAC9E~~;~~AACD~~,~~QAAAF,~~sBAAA,CAAA,aAAA,~~CAACG~~,~~oBAAa~~,EAAA,~~EACZ~~,IAAI,~~QACJ~~,EAAE,EAAE,EAAE,EAAA,kBAAA,EACW,SAAS,EAC1B,MAAM,EAAE,~~MAAM~~,~~EACd~~,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE;gBACL,GAAG,MAAM,CAAC,MAAM;AAChB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;AACpE,aAAA,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,UAAU,CAAC,MAAM,EAAA,GACjB,WAAW,EAAA,EAEd,QAAQ,~~CACK~~,~~CACT~~;AAEb;;;;"}
1	+ {"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up PopperJS\n const [popperElement, setPopperElement] = useState<HTMLDialogElement \| null>(null);\n const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId \|\| generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n /*\n When content size is changed, force popper update\n /\n useEffect(() => {\n if (!update \|\| !popperElement) return undefined;\n const resizeObserver = new ResizeObserver(update);\n resizeObserver.observe(popperElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [update, popperElement]);\n\n /\n When window is resized, force popper update\n */\n useEffect(() => {\n if (!update) return undefined;\n window.addEventListener('resize', update);\n\n return () => {\n window.removeEventListener('resize', update);\n };\n }, [update]);\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={setPopperElement}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }), // Dialog stacks above its backdrop\n ...styles.popper,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...attributes.popper}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["theme","useState","usePopper","useMemo","generateId","useUpdateAriaAnchor","useHandleFocus","useEffect","ResizeObserver","React","Portal","popoverStyles","assignCssVars","buildClassnames"],"mappings":"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"}

package/dist/components/Popover/Popover.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import React from 'react';
 import { PopoverProps } from './types';
-export declare const Popover: ({ id: passedId, children, zIndex, placement, anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop, useAnchorWidth, ignoreAriaWarnings, ...dialogProps }: PopoverProps) => React.JSX.Element;
+export declare const Popover: ({ id: passedId, children, zIndex, placement, anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop, useAnchorWidth, ignoreAriaWarnings, className, ...dialogProps }: PopoverProps) => React.JSX.Element;

package/dist/components/Popover/Popover.js CHANGED Viewed

@@ -3,12 +3,14 @@ import { usePopper } from 'react-popper';
 import ResizeObserver from 'resize-observer-polyfill';
 import { Portal } from '../Portal/Portal.js';
 import { theme } from '../../theme/index.js';
-import { Backdrop, PopoverDialog } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
 import { generateId } from '../../utils/generateId.js';
+import { assignCssVars } from '../../utils/assignCssVars.js';
 import { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor.js';
 import { useHandleFocus } from './hooks/useHandleFocus.js';
+import popoverStyles from './Popover.module.scss.js';
-const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, ...dialogProps }) => {
+const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, className, ...dialogProps }) => {
     // Set up PopperJS
     const [popperElement, setPopperElement] = useState(null);
     const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });
@@ -50,8 +52,9 @@ const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placemen
         };
     }, [update]);
     return (React__default.createElement(Portal, { rootElementRef: rootElementRef },
-        !removeBackdrop && (React__default.createElement(Backdrop, { onClick: onClose, zIndex: zIndex, "data-testid": "popover-backdrop" })),
-        React__default.createElement(PopoverDialog, { open: true, id: id, "data-dialog-type": "popover", zIndex: zIndex, ref: setPopperElement, style: {
+        !removeBackdrop && (React__default.createElement("div", { className: popoverStyles.backdrop, style: assignCssVars({ zIndex }), onClick: onClose, "data-testid": "popover-backdrop" })),
+        React__default.createElement("dialog", { open: true, id: id, "data-dialog-type": "popover", className: buildClassnames([popoverStyles.dialog, className]), ref: setPopperElement, style: {
+                ...assignCssVars({ zIndex: zIndex + 1 }),
                 ...styles.popper,
                 ...style,
                 ...(useAnchorWidth ? { minWidth: anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.clientWidth } : {}),

package/dist/components/Popover/Popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { ~~PopoverDialog~~, ~~Backdrop~~ } ~~from './styled';\nimport { generateId~~ } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n ...dialogProps\n}: PopoverProps) => {\n // Set up PopperJS\n const [popperElement, setPopperElement] = useState<HTMLDialogElement \| null>(null);\n const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId \|\| generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n /*\n When content size is changed, force popper update\n /\n useEffect(() => {\n if (!update \|\| !popperElement) return undefined;\n const resizeObserver = new ResizeObserver(update);\n resizeObserver.observe(popperElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [update, popperElement]);\n\n /\n When window is resized, force popper update\n */\n useEffect(() => {\n if (!update) return undefined;\n window.addEventListener('resize', update);\n\n return () => {\n window.removeEventListener('resize', update);\n };\n }, [update]);\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <~~Backdrop onClick~~={~~onClose~~} zIndex={~~zIndex~~} data-testid=\"popover-backdrop\" />\n )}\n <~~PopoverDialog~~\n open\n id={id}\n data-dialog-type=\"popover\"\n ~~zIndex~~={~~zIndex~~}\n ref={setPopperElement}\n style={{\n ...styles.popper,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...attributes.popper}\n {...dialogProps}\n >\n {children}\n </~~PopoverDialog~~>\n </Portal>\n );\n};\n"],"names":["React"],"mappings":"~~;;;;;;;;;;~~MAYa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC;AAClF,IAAA,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,CAAC;;AAG7F,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvE,mBAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,EAAI;AACnB,IAAA,CAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,cAAc,CAAC;QACvC,aAAa;QACb,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,SAAS;AAC/C,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC;AACjD,QAAA,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC;AAErC,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,UAAU,EAAE;AAC7B,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE3B;;AAEG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,SAAS;AAC7B,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAEzC,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC9C,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;~~AACnC~~,~~QAAA,~~CAAC,cAAc,KACdA,cAAA,CAAA,aAAA,CAAC,QAAQ,~~IAAC~~,~~OAAO~~,EAAE,~~OAAO~~,EAAE,MAAM,EAAE,~~MAAM~~,EAAA,aAAA,~~EAAc~~,kBAAkB,~~GAAG~~,~~CAC9E~~;~~AACD~~,~~QAAAA,~~cAAA,CAAA,aAAA,~~CAAC~~,~~aAAa~~,EAAA,~~EACZ~~,IAAI,~~QACJ~~,EAAE,EAAE,EAAE,EAAA,kBAAA,EACW,SAAS,EAC1B,~~MAAM~~,EAAE,MAAM,~~EACd~~,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE;gBACL,GAAG,MAAM,CAAC,MAAM;AAChB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;AACpE,aAAA,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,UAAU,CAAC,MAAM,EAAA,GACjB,WAAW,EAAA,EAEd,QAAQ,~~CACK~~,~~CACT~~;AAEb;;;;"}
1	+ {"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up PopperJS\n const [popperElement, setPopperElement] = useState<HTMLDialogElement \| null>(null);\n const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId \|\| generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n /*\n When content size is changed, force popper update\n /\n useEffect(() => {\n if (!update \|\| !popperElement) return undefined;\n const resizeObserver = new ResizeObserver(update);\n resizeObserver.observe(popperElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [update, popperElement]);\n\n /\n When window is resized, force popper update\n */\n useEffect(() => {\n if (!update) return undefined;\n window.addEventListener('resize', update);\n\n return () => {\n window.removeEventListener('resize', update);\n };\n }, [update]);\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={setPopperElement}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }), // Dialog stacks above its backdrop\n ...styles.popper,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...attributes.popper}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;MAYa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC;AAClF,IAAA,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,CAAC;;AAG7F,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvE,mBAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,EAAI;AACnB,IAAA,CAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,cAAc,CAAC;QACvC,aAAa;QACb,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,SAAS;AAC/C,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC;AACjD,QAAA,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC;AAErC,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,UAAU,EAAE;AAC7B,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE3B;;AAEG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,SAAS;AAC7B,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAEzC,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC9C,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;QACnC,CAAC,cAAc,KACdA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,aAAa,CAAC,QAAQ,EACjC,KAAK,EAAE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC,EAChC,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,kBAAkB,EAAA,CAC9B,CACH;QACDA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAA,IAAA,EACJ,EAAE,EAAE,EAAE,EAAA,kBAAA,EACW,SAAS,EAC1B,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAC7D,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE;gBACL,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;gBACxC,GAAG,MAAM,CAAC,MAAM;AAChB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;AACpE,aAAA,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,UAAU,CAAC,MAAM,EAAA,GACjB,WAAW,EAAA,EAEd,QAAQ,CACF,CACF;AAEb;;;;"}

package/dist/components/Popover/Popover.module.scss.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+'use strict';
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+___$insertStyle("._dialog_xax8f_1 {\n  z-index: var(--z-index);\n  /* Remove browser default styling of HTML Dialog. */\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: transparent;\n}\n\n._backdrop_xax8f_10 {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--z-index);\n}");
+var popoverStyles = {"dialog":"_dialog_xax8f_1","backdrop":"_backdrop_xax8f_10"};
+module.exports = popoverStyles;
+//# sourceMappingURL=Popover.module.scss.cjs.map

package/dist/components/Popover/Popover.module.scss.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Popover.module.scss.cjs","sources":["../../../src/components/Popover/Popover.module.scss"],"sourcesContent":[".dialog {\n z-index: var(--z-index);\n\n /* Remove browser default styling of HTML Dialog. */\n padding: 0;\n margin: 0;\n border: none;\n background: transparent;\n}\n\n.backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--z-index);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mTAAA;AAEA,oBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/Popover/Popover.module.scss.js ADDED Viewed

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+insertStyle("._dialog_xax8f_1 {\n  z-index: var(--z-index);\n  /* Remove browser default styling of HTML Dialog. */\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: transparent;\n}\n\n._backdrop_xax8f_10 {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--z-index);\n}");
+var popoverStyles = {"dialog":"_dialog_xax8f_1","backdrop":"_backdrop_xax8f_10"};
+export { popoverStyles as default };
+//# sourceMappingURL=Popover.module.scss.js.map

package/dist/components/Popover/Popover.module.scss.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Popover.module.scss.js","sources":["../../../src/components/Popover/Popover.module.scss"],"sourcesContent":[".dialog {\n z-index: var(--z-index);\n\n /* Remove browser default styling of HTML Dialog. */\n padding: 0;\n margin: 0;\n border: none;\n background: transparent;\n}\n\n.backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--z-index);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mTAAA;AAEA,oBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/Tooltip/Tooltip.cjs CHANGED Viewed

@@ -2,9 +2,11 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
-var styled = require('./components/styled.cjs');
 var TooltipPopover = require('./components/TooltipPopover.cjs');
 var Portal = require('../Portal/Portal.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var Tooltip_module = require('./Tooltip.module.scss.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -13,26 +15,28 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const WithOptionalPortal = ({ usePortal = false, children,
 // eslint-disable-next-line react/jsx-no-useless-fragment
  }) => (usePortal ? React__default.default.createElement(Portal.Portal, null, children) : React__default.default.createElement(React__default.default.Fragment, null, children));
-const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
+const Tooltip = ({ children, text, content, config, reversed = false, className, hoverableClassName, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
     const [shouldShow, setShouldShow] = React.useState(initialShouldShow);
     const [hoverableElement, setHoverableElement] = React.useState(null);
-    const classNames = {
-        container: className && `${className} ${className}-container`,
-        tip: className && `${className}-tip`,
-        wrap: className && `${className}-wrap`,
-        triangle: className && `${className}-triangle`,
-        hoverable: className && `${className}-hoverable`,
-    };
     const hasText = text ? text.trim().length > 0 : false;
     const hasContent = !!(content || hasText);
+    // Backward-compatible suffix classes for monolith consumers that
+    // target sub-elements via the className prefix convention.
+    const legacyClassNames = className
+        ? {
+            tip: `${className}-tip`,
+            wrap: `${className}-wrap`,
+            triangle: `${className}-triangle`,
+        }
+        : undefined;
     if (!hasContent)
         return children;
     const show = () => setShouldShow(true);
     const hide = () => setShouldShow(false);
-    return (React__default.default.createElement(styled.Container, { className: classNames.container },
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([Tooltip_module.container, className, className && `${className}-container`]) },
         React__default.default.createElement(framerMotion.AnimatePresence, null, shouldShow && (React__default.default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
-            React__default.default.createElement(TooltipPopover.TooltipPopover, { key: "tooltip-popover", classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content })))),
-        React__default.default.createElement(styled.Container, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
+            React__default.default.createElement(TooltipPopover.TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
+        React__default.default.createElement("div", { ref: setHoverableElement, className: buildClassnames.buildClassnames([Tooltip_module.hoverable, hoverableClassName, className && `${className}-hoverable`]), onMouseEnter: show, onMouseLeave: hide }, children)));
 };
 exports.Tooltip = Tooltip;