@veeqo/ui 14.9.0 → 14.9.1

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

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

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

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

package/dist/components/Tooltip/Tooltip.cjs

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

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { Container } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { Portal } from '../Portal';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <Container className={classNames.container}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              classNames={classNames}\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <Container\n        ref={setHoverableElement}\n        className={classNames.hoverable}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </Container>\n    </Container>\n  );\n};\n"],"names":["React","Portal","useState","Container","AnimatePresence","TooltipPopover"],"mappings":";;;;;;;;;;;;AAOA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAA,CAAA,aAAA,CAACC,aAAM,QAAE,QAAQ,CAAU,GAAGD,4EAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGE,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAA,UAAA,CAAY;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;KACjD;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AAEzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;IAEvC,QACEF,qCAACG,gBAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QACxCH,sBAAA,CAAA,aAAA,CAACI,4BAAe,EAAA,IAAA,EACb,UAAU,KACTJ,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,sBAAA,CAAA,aAAA,CAACK,6BAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACiB,CACtB,CACe;QAElBL,sBAAA,CAAA,aAAA,CAACG,gBAAS,EAAA,EACR,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport { Portal } from '../Portal';\nimport { buildClassnames } from '../../utils';\nimport tooltipStyles from './Tooltip.module.scss';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  hoverableClassName,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  // Backward-compatible suffix classes for monolith consumers that\n  // target sub-elements via the className prefix convention.\n  const legacyClassNames: LegacyClassNames | undefined = className\n    ? {\n        tip: `${className}-tip`,\n        wrap: `${className}-wrap`,\n        triangle: `${className}-triangle`,\n      }\n    : undefined;\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <div className={buildClassnames([tooltipStyles.container, className, className && `${className}-container`])}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n              legacyClassNames={legacyClassNames}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <div\n        ref={setHoverableElement}\n        className={buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-hoverable`])}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","Portal","useState","buildClassnames","tooltipStyles","AnimatePresence","TooltipPopover"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAA,CAAA,aAAA,CAACC,aAAM,QAAE,QAAQ,CAAU,GAAGD,4EAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGE,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEG,+BAAe,CAAC,CAACC,cAAa,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,UAAA,CAAY,CAAC,CAAC,EAAA;QAC1GJ,sBAAA,CAAA,aAAA,CAACK,4BAAe,EAAA,IAAA,EACb,UAAU,KACTL,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,sBAAA,CAAA,aAAA,CAACM,6BAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAN,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAEG,+BAAe,CAAC,CAACC,cAAa,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,YAAY,CAAC,CAAC,EAChH,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAAA,EAEjB,QAAQ,CACL,CACF;AAEV;;;;"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,2 +1,2 @@
 import { TooltipProps } from './types';
-export declare const Tooltip: ({ children, text, content, config, reversed, className, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => JSX.Element | null;
+export declare const Tooltip: ({ children, text, content, config, reversed, className, hoverableClassName, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => JSX.Element | null;

package/dist/components/Tooltip/Tooltip.js

@@ -1,32 +1,36 @@
 import React__default, { useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
-import { Container } from './components/styled.js';
 import { TooltipPopover } from './components/TooltipPopover.js';
 import { Portal } from '../Portal/Portal.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import tooltipStyles from './Tooltip.module.scss.js';
 
 const WithOptionalPortal = ({ usePortal = false, children,
 // eslint-disable-next-line react/jsx-no-useless-fragment
  }) => (usePortal ? React__default.createElement(Portal, null, children) : React__default.createElement(React__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] = useState(initialShouldShow);
     const [hoverableElement, setHoverableElement] = 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.createElement(Container, { className: classNames.container },
+    return (React__default.createElement("div", { className: buildClassnames([tooltipStyles.container, className, className && `${className}-container`]) },
         React__default.createElement(AnimatePresence, null, shouldShow && (React__default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
-            React__default.createElement(TooltipPopover, { key: "tooltip-popover", classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content })))),
-        React__default.createElement(Container, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
+            React__default.createElement(TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
+        React__default.createElement("div", { ref: setHoverableElement, className: buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-hoverable`]), onMouseEnter: show, onMouseLeave: hide }, children)));
 };
 
 export { Tooltip };

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { Container } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { Portal } from '../Portal';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <Container className={classNames.container}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              classNames={classNames}\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <Container\n        ref={setHoverableElement}\n        className={classNames.hoverable}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </Container>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAC,MAAM,QAAE,QAAQ,CAAU,GAAGA,4DAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAA,UAAA,CAAY;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;KACjD;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AAEzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;IAEvC,QACEA,6BAAC,SAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QACxCA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACb,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACiB,CACtB,CACe;QAElBA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport { Portal } from '../Portal';\nimport { buildClassnames } from '../../utils';\nimport tooltipStyles from './Tooltip.module.scss';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  hoverableClassName,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  // Backward-compatible suffix classes for monolith consumers that\n  // target sub-elements via the className prefix convention.\n  const legacyClassNames: LegacyClassNames | undefined = className\n    ? {\n        tip: `${className}-tip`,\n        wrap: `${className}-wrap`,\n        triangle: `${className}-triangle`,\n      }\n    : undefined;\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <div className={buildClassnames([tooltipStyles.container, className, className && `${className}-container`])}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n              legacyClassNames={legacyClassNames}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <div\n        ref={setHoverableElement}\n        className={buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-hoverable`])}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAC,MAAM,QAAE,QAAQ,CAAU,GAAGA,4DAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,UAAA,CAAY,CAAC,CAAC,EAAA;QAC1GA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACb,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,YAAY,CAAC,CAAC,EAChH,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAAA,EAEjB,QAAQ,CACL,CACF;AAEV;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_soh5t_1 {\n  display: inline-block;\n}\n\n._hoverable_soh5t_5 {\n  display: inline-block;\n}\n\n._tip_soh5t_9 {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n}\n._tip_soh5t_9[data-popper-placement^=top-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=top-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  top: -4px;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  top: -4px;\n}\n\n._wrap_soh5t_31 {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_soh5t_14 {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}");
+var tooltipStyles = {"container":"_container_soh5t_1","hoverable":"_hoverable_soh5t_5","tip":"_tip_soh5t_9","triangle":"_triangle_soh5t_14","wrap":"_wrap_soh5t_31"};
+
+module.exports = tooltipStyles;
+//# sourceMappingURL=Tooltip.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.scss.cjs","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n  display: inline-block;\n}\n\n.hoverable {\n  display: inline-block;\n}\n\n.tip {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n\n  &[data-popper-placement^='top-start'] > .triangle {\n    left: 8px;\n    bottom: 0;\n  }\n\n  &[data-popper-placement^='top-end'] > .triangle {\n    right: 8px;\n    bottom: 0;\n  }\n\n  &[data-popper-placement^='bottom-start'] > .triangle {\n    left: 8px;\n    top: -4px;\n  }\n\n  &[data-popper-placement^='bottom-end'] > .triangle {\n    right: 8px;\n    top: -4px;\n  }\n}\n\n.wrap {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,opCAAA;;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_soh5t_1 {\n  display: inline-block;\n}\n\n._hoverable_soh5t_5 {\n  display: inline-block;\n}\n\n._tip_soh5t_9 {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n}\n._tip_soh5t_9[data-popper-placement^=top-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=top-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  top: -4px;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  top: -4px;\n}\n\n._wrap_soh5t_31 {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_soh5t_14 {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}");
+var tooltipStyles = {"container":"_container_soh5t_1","hoverable":"_hoverable_soh5t_5","tip":"_tip_soh5t_9","triangle":"_triangle_soh5t_14","wrap":"_wrap_soh5t_31"};
+
+export { tooltipStyles as default };
+//# sourceMappingURL=Tooltip.module.scss.js.map