@veeqo/ui 14.9.0-beta-2 → 14.9.1

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

@@ -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

@@ -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

@@ -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

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

@@ -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

@@ -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

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

@@ -3,7 +3,7 @@ export declare const PageLimitContainer: import("styled-components").StyledCompo
     alignItems?: ("baseline" | "center" | "flex-start" | "flex-end" | "stretch") | undefined;
     justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") | undefined;
     gap?: keyof import("../../theme/modules/sizes").SizeScale | undefined;
-    flexWrap?: ("nowrap" | "wrap" | "wrap-reverse") | undefined;
+    flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const PaginationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
@@ -21,13 +21,11 @@ export declare const PaginationButton: import("styled-components").StyledCompone
 } & 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;
-    placeholder?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
-    list?: string | undefined;
     className?: string | undefined;
     children?: import("react").ReactNode;
     defaultChecked?: boolean | undefined;
@@ -36,7 +34,7 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -44,9 +42,10 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    placeholder?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    translate?: "no" | "yes" | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
@@ -82,7 +81,7 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -91,7 +90,7 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -283,13 +282,13 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     onAnimationIterationCapture?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEnd?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEndCapture?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
+    alt?: string | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    alt?: string | undefined;
     autoComplete?: string | undefined;
     accept?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
@@ -301,16 +300,17 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     maxLength?: number | undefined;
     minLength?: number | undefined;
     src?: string | undefined;
+    list?: string | undefined;
+    name?: string | undefined;
     height?: string | number | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
-    name?: string | undefined;
     width?: string | number | undefined;
-    wrap?: string | undefined;
-    step?: string | number | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
+    step?: string | number | undefined;
     rows?: number | undefined;
+    wrap?: string | undefined;
 } & {
     value?: string | undefined;
     type?: import("../TextField").TextFieldType | undefined;

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

@@ -1,13 +1,11 @@
 /// <reference types="react" />
 export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     rel?: string | undefined;
-    placeholder?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
-    list?: string | undefined;
     className?: string | undefined;
     children?: import("react").ReactNode;
     defaultChecked?: boolean | undefined;
@@ -16,7 +14,7 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -24,9 +22,10 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    placeholder?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    translate?: "no" | "yes" | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
@@ -62,7 +61,7 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -71,7 +70,7 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -263,13 +262,13 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     onAnimationIterationCapture?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEnd?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEndCapture?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
+    alt?: string | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    alt?: string | undefined;
     autoComplete?: string | undefined;
     accept?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
@@ -281,16 +280,17 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     maxLength?: number | undefined;
     minLength?: number | undefined;
     src?: string | undefined;
+    list?: string | undefined;
+    name?: string | undefined;
     height?: string | number | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
-    name?: string | undefined;
     width?: string | number | undefined;
-    wrap?: string | undefined;
-    step?: string | number | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
+    step?: string | number | undefined;
     rows?: number | undefined;
+    wrap?: string | undefined;
 } & {
     value?: string | undefined;
     type?: import("..").TextFieldType | undefined;

package/dist/components/Popover/Popover.cjs

@@ -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

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

@@ -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

@@ -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

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

@@ -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

@@ -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

@@ -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

@@ -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;;;;"}