@dynatrace/strato-components 3.11.3 → 3.12.0

package/esm/overlays/drawer/Drawer.css

@@ -1,4 +1,4 @@
-._14971970-3-11-3 {
+._14971970-3-12-0 {
   pointer-events: initial;
   position: absolute;
   height: 100vh;
@@ -11,40 +11,40 @@
   margin: 0;
   color: inherit;
 }
-._14971971-3-11-3 {
+._14971971-3-12-0 {
   left: 0;
   right: auto;
   border-radius: 0 var(--dt-borders-radius-surface-default, 12px) var(--dt-borders-radius-surface-default, 12px) 0;
 }
-._14971972-3-11-3 {
+._14971972-3-12-0 {
   left: auto;
   right: 0;
   border-radius: var(--dt-borders-radius-surface-default, 12px) 0 0 var(--dt-borders-radius-surface-default, 12px);
 }
-._14971973-3-11-3 {
+._14971973-3-12-0 {
   width: 25%;
   min-width: min(calc(100% - 64px), 320px);
 }
-._14971974-3-11-3 {
+._14971974-3-12-0 {
   width: 50%;
   min-width: min(calc(100% - 56px), 640px);
 }
-._14971975-3-11-3 {
+._14971975-3-12-0 {
   width: 75%;
   min-width: min(calc(100% - 48px), 960px);
 }
-._14971976-3-11-3 {
+._14971976-3-12-0 {
   width: 100%;
   border-radius: 0;
 }
-._14971977-3-11-3 {
+._14971977-3-12-0 {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   z-index: var(--dt-elevations-default, 1);
 }
-._14971978-3-11-3 {
+._14971978-3-12-0 {
   width: 100%;
   height: 100%;
 }

package/esm/overlays/drawer/Drawer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/drawer/Drawer.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport {\n  type ReactNode,\n  forwardRef,\n  useRef,\n  type CSSProperties,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  DrawerBackdropCSS,\n  DrawerCSS,\n  DrawerContentCSS,\n  DrawerPlacementCSS,\n  DrawerWidthStyles,\n} from './Drawer.sty.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport {\n  fadeInEasing,\n  fadeOutEasing,\n  slideInEasing,\n  slideOutEasing,\n} from '../../core/utils/framer-motion-easings.js';\nimport { type OverlayAria, useOverlay } from '../hooks/useOverlay.js';\n\nconst COMPONENT_NAME = 'Drawer';\n\n//#region Props\n\n/**\n * Props for the {@link _Drawer} component.\n * @internal\n */\nexport type DrawerProps = WithChildren &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps & {\n    /** Handler that is called when the Drawer should be dismissed e.g. when pressing `ESC` or clicking on the backdrop. */\n    onDismiss: (state: boolean, reason: string) => void;\n    /** If the Drawer is currently dismissed or open. */\n    isDismissed: boolean;\n    /**\n     * The side from which the Drawer enters and takes up the most space.\n     * @defaultValue 'right'\n     */\n    placement?: 'left' | 'right';\n    /**\n     * The width of the Drawer. It supports predefined values and px, vw, rem and %.\n     * @defaultValue 'medium'\n     */\n    width?:\n      | 'narrow'\n      | 'medium'\n      | 'wide'\n      | 'full'\n      | `${number}px`\n      | `${number}vw`\n      | `${number}rem`\n      | `${number}%`;\n    /**\n     * The modality of the drawer.\n     * When set to true, interaction with outside elements will be disabled and\n     * only drawer content will be visible to screen readers.\n     * @defaultValue true\n     */\n    modal?: boolean;\n    /**\n     * Whether the animations should be disabled.\n     * @defaultValue false\n     */\n    disableAnimations?: boolean;\n  };\n\n//#endregion\n\n//#region animations\nconst slideAnimation = ($placement: 'left' | 'right') => ({\n  visible: {\n    x: '0',\n    transition: {\n      duration: AnimationsJS.SlideIn.Duration.Slow,\n      ease: slideInEasing,\n    },\n    // Workaround to fix remaining style (transform: translateX(0)) on Drawer\n    // as this breaks any child element with position: fixed\n    // https://github.com/framer/motion/issues/823\n    transitionEnd: {\n      x: 0,\n    },\n  },\n  hidden: {\n    x: $placement === 'left' ? '-100%' : '100%',\n    transition: {\n      duration: AnimationsJS.SlideOut.Duration.Slow,\n      ease: slideOutEasing,\n    },\n  },\n});\n\nconst fade = {\n  fadeIn: {\n    // For the opacity we need to use the default value here. Framer motion would complain\n    // about too complex values, when transitioning from two custom property values within\n    // an rgba value apparently.\n    opacity: 1,\n    transition: {\n      duration: AnimationsJS.SlideIn.Duration.Slow,\n      ease: fadeInEasing,\n    },\n  },\n  fadeOut: {\n    opacity: 0,\n    transition: {\n      duration: AnimationsJS.SlideOut.Duration.Slow,\n      ease: fadeOutEasing,\n    },\n  },\n};\n//#endregion\n\n/**\n * A drawer component that slides in from the side and displays additional content. Its presence is fully controlled by props.\n * @internal\n */\nexport const Drawer = /* @__PURE__ */ forwardRef<\n  HTMLDialogElement,\n  DrawerProps\n>((props, forwardedRef) => {\n  const {\n    placement = 'right',\n    width = 'medium',\n    isDismissed,\n    onDismiss,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    modal = true,\n    'data-testid': dataTestId,\n    disableAnimations = false,\n    ...remainingProps\n  }: DrawerProps = props;\n  const ref = useRef<HTMLDialogElement>(null);\n  const { overlayProps } = useOverlay(\n    {\n      onClose: (reason) => {\n        onDismiss(true, reason);\n      },\n      isOpen: !isDismissed,\n      isDismissible: false,\n      isKeyboardDismissDisabled: false,\n    },\n    ref,\n  );\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const mergedRefs = useMergeRefs<HTMLElement>([ref, forwardedRef]);\n  const overlayContainerProps = useOverlayStacking(0, 'overlay');\n\n  return (\n    <AnimatePresence>\n      {!isDismissed && (\n        <OverlayContainer\n          data-testid=\"drawer-container\"\n          {...overlayContainerProps}\n          style={{\n            ...overlayContainerProps.style,\n            pointerEvents: modal ? undefined : 'none',\n          }}\n        >\n          <DrawerBackdrop\n            modal={modal}\n            overlayProps={overlayProps}\n            onDismiss={onDismiss}\n            disableAnimations={disableAnimations}\n          >\n            <motion.dialog\n              data-testid={dataTestId}\n              ref={mergedRefs}\n              variants={disableAnimations ? {} : slideAnimation(placement)}\n              initial=\"hidden\"\n              animate=\"visible\"\n              exit=\"hidden\"\n              onAnimationComplete={() =>\n                window.dispatchEvent(new Event('animationDone'))\n              }\n              // Prevents that focus is lost when clicking on non-focusable items inside.\n              // Probably worth considering moving that to the focusScope when redoing the overlays.\n              tabIndex={-1}\n              open\n              className={clsx(\n                consumerClassName,\n                DrawerCSS,\n                DrawerPlacementCSS[placement],\n                {\n                  [DrawerWidthStyles.narrow]: width === 'narrow',\n                  [DrawerWidthStyles.medium]: width === 'medium',\n                  [DrawerWidthStyles.wide]: width === 'wide',\n                  [DrawerWidthStyles.full]: width === 'full',\n                },\n              )}\n              style={{\n                width:\n                  // Avoid binding the predefined named widths to the style, but add any other values\n                  width !== 'narrow' &&\n                  width !== 'medium' &&\n                  width !== 'wide' &&\n                  width !== 'full'\n                    ? width\n                    : undefined,\n                ...consumerStyle,\n              }}\n              {...restProps}\n              {...behavioralTrackingProps}\n              aria-modal={modal}\n              data-dt-component={COMPONENT_NAME}\n            >\n              <FocusScope autoFocus contain={modal}>\n                <motion.div\n                  variants={disableAnimations ? {} : fade}\n                  initial=\"fadeOut\"\n                  animate=\"fadeIn\"\n                  exit=\"fadeOut\"\n                  className={DrawerContentCSS}\n                >\n                  <OverlayStackingProvider>{children}</OverlayStackingProvider>\n                </motion.div>\n              </FocusScope>\n            </motion.dialog>\n          </DrawerBackdrop>\n        </OverlayContainer>\n      )}\n    </AnimatePresence>\n  );\n});\n\ntype DrawerBackdropProps = {\n  children: ReactNode;\n  modal: boolean;\n  onDismiss: (state: boolean, reason: string) => void;\n  overlayProps: OverlayAria['overlayProps'];\n  disableAnimations: boolean;\n};\n\nconst DrawerBackdrop = (props: DrawerBackdropProps) => {\n  const { children, modal, disableAnimations, onDismiss, overlayProps } = props;\n\n  return (\n    <motion.div\n      variants={disableAnimations ? {} : fade}\n      initial=\"fadeOut\"\n      animate=\"fadeIn\"\n      exit=\"fadeOut\"\n      data-testid=\"drawer-backdrop\"\n      className={DrawerBackdropCSS}\n      style={{\n        pointerEvents: modal\n          ? undefined\n          : ('none' as CSSProperties['pointerEvents']),\n        backgroundColor: modal ? Colors.Background.Surface.Backdrop : undefined,\n      }}\n      onPointerDown={(event: ReactMouseEvent) => {\n        if (modal === true && event.target === event.currentTarget) {\n          // The useOverlay hook keeps an internal state of the stacked overlays.\n          // However, some overlays don't rely on the hook; hence the list isn't complete\n          // and the overlay is dismissed when clicking on any not registered overlay.\n          // (e.g. Microguide would not influence the dismissing but can't be added to\n          // the list either, because it is always on top and shouldn't be closed)\n          // Therefore, the sheet is manually dismissed on backdrop click.\n          // This topic will be revisited and aligned with the Overlay Rework (APPDEV-3373).\n          onDismiss(true, 'backdrop');\n        }\n      }}\n      {...(overlayProps as Record<string, unknown>)}\n    >\n      {children}\n    </motion.div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport {\n  type ReactNode,\n  forwardRef,\n  useRef,\n  type CSSProperties,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  DrawerBackdropCSS,\n  DrawerCSS,\n  DrawerContentCSS,\n  DrawerPlacementCSS,\n  DrawerWidthStyles,\n} from './Drawer.sty.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport {\n  fadeInEasing,\n  fadeOutEasing,\n  slideInEasing,\n  slideOutEasing,\n} from '../../core/utils/framer-motion-easings.js';\nimport { type OverlayAria, useOverlay } from '../hooks/useOverlay.js';\n\nconst COMPONENT_NAME = 'Drawer';\n\n//#region Props\n\n/**\n * Props for the {@link _Drawer} component.\n * @internal\n */\nexport type DrawerProps = WithChildren &\n  StylingProps &\n  DataTestId &\n  AriaLabelingProps &\n  BehaviorTrackingProps & {\n    /** Handler that is called when the Drawer should be dismissed e.g. when pressing `ESC` or clicking on the backdrop. */\n    onDismiss: (state: boolean, reason: string) => void;\n    /** If the Drawer is currently dismissed or open. */\n    isDismissed: boolean;\n    /**\n     * The side from which the Drawer enters and takes up the most space.\n     * @defaultValue 'right'\n     */\n    placement?: 'left' | 'right';\n    /**\n     * The width of the Drawer. It supports predefined values and px, vw, rem and %.\n     * @defaultValue 'medium'\n     */\n    width?:\n      | 'narrow'\n      | 'medium'\n      | 'wide'\n      | 'full'\n      | `${number}px`\n      | `${number}vw`\n      | `${number}rem`\n      | `${number}%`;\n    /**\n     * The modality of the drawer.\n     * When set to true, interaction with outside elements will be disabled and\n     * only drawer content will be visible to screen readers.\n     * @defaultValue true\n     */\n    modal?: boolean;\n    /**\n     * Whether the animations should be disabled.\n     * @defaultValue false\n     */\n    disableAnimations?: boolean;\n  };\n\n//#endregion\n\n//#region animations\nconst slideAnimation = ($placement: 'left' | 'right') => ({\n  visible: {\n    x: '0',\n    transition: {\n      duration: AnimationsJS.SlideIn.Duration.Slow,\n      ease: slideInEasing,\n    },\n    // Workaround to fix remaining style (transform: translateX(0)) on Drawer\n    // as this breaks any child element with position: fixed\n    // https://github.com/framer/motion/issues/823\n    transitionEnd: {\n      x: 0,\n    },\n  },\n  hidden: {\n    x: $placement === 'left' ? '-100%' : '100%',\n    transition: {\n      duration: AnimationsJS.SlideOut.Duration.Slow,\n      ease: slideOutEasing,\n    },\n  },\n});\n\nconst fade = {\n  fadeIn: {\n    // For the opacity we need to use the default value here. Framer motion would complain\n    // about too complex values, when transitioning from two custom property values within\n    // an rgba value apparently.\n    opacity: 1,\n    transition: {\n      duration: AnimationsJS.SlideIn.Duration.Slow,\n      ease: fadeInEasing,\n    },\n  },\n  fadeOut: {\n    opacity: 0,\n    transition: {\n      duration: AnimationsJS.SlideOut.Duration.Slow,\n      ease: fadeOutEasing,\n    },\n  },\n};\n//#endregion\n\n/**\n * A drawer component that slides in from the side and displays additional content. Its presence is fully controlled by props.\n * @internal\n */\nexport const Drawer = /* @__PURE__ */ forwardRef<\n  HTMLDialogElement,\n  DrawerProps\n>((props, forwardedRef) => {\n  const {\n    placement = 'right',\n    width = 'medium',\n    isDismissed,\n    onDismiss,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    modal = true,\n    'data-testid': dataTestId,\n    disableAnimations = false,\n    ...remainingProps\n  }: DrawerProps = props;\n  const ref = useRef<HTMLDialogElement>(null);\n  const { overlayProps } = useOverlay(\n    {\n      onClose: (reason) => {\n        onDismiss(true, reason);\n      },\n      isOpen: !isDismissed,\n      isDismissible: false,\n      isKeyboardDismissDisabled: false,\n    },\n    ref,\n  );\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const mergedRefs = useMergeRefs<HTMLElement>([ref, forwardedRef]);\n  const overlayContainerProps = useOverlayStacking(0, 'overlay');\n\n  return (\n    <AnimatePresence>\n      {!isDismissed && (\n        <OverlayContainer\n          data-testid=\"drawer-container\"\n          {...overlayContainerProps}\n          style={{\n            ...overlayContainerProps.style,\n            pointerEvents: modal ? undefined : 'none',\n          }}\n        >\n          <DrawerBackdrop\n            modal={modal}\n            overlayProps={overlayProps}\n            onDismiss={onDismiss}\n            disableAnimations={disableAnimations}\n          >\n            <motion.dialog\n              data-testid={dataTestId}\n              ref={mergedRefs}\n              variants={disableAnimations ? {} : slideAnimation(placement)}\n              initial=\"hidden\"\n              animate=\"visible\"\n              exit=\"hidden\"\n              onAnimationComplete={() =>\n                window.dispatchEvent(new Event('animationDone'))\n              }\n              // Prevents that focus is lost when clicking on non-focusable items inside.\n              // Probably worth considering moving that to the focusScope when redoing the overlays.\n              tabIndex={-1}\n              open\n              className={clsx(\n                consumerClassName,\n                DrawerCSS,\n                DrawerPlacementCSS[placement],\n                {\n                  [DrawerWidthStyles.narrow]: width === 'narrow',\n                  [DrawerWidthStyles.medium]: width === 'medium',\n                  [DrawerWidthStyles.wide]: width === 'wide',\n                  [DrawerWidthStyles.full]: width === 'full',\n                },\n              )}\n              style={{\n                width:\n                  // Avoid binding the predefined named widths to the style, but add any other values\n                  width !== 'narrow' &&\n                  width !== 'medium' &&\n                  width !== 'wide' &&\n                  width !== 'full'\n                    ? width\n                    : undefined,\n                ...consumerStyle,\n              }}\n              {...restProps}\n              {...behavioralTrackingProps}\n              aria-modal={modal}\n              data-dt-component={COMPONENT_NAME}\n            >\n              <FocusScope autoFocus contain={modal}>\n                <motion.div\n                  variants={disableAnimations ? {} : fade}\n                  initial=\"fadeOut\"\n                  animate=\"fadeIn\"\n                  exit=\"fadeOut\"\n                  className={DrawerContentCSS}\n                >\n                  <OverlayStackingProvider>{children}</OverlayStackingProvider>\n                </motion.div>\n              </FocusScope>\n            </motion.dialog>\n          </DrawerBackdrop>\n        </OverlayContainer>\n      )}\n    </AnimatePresence>\n  );\n});\n\ntype DrawerBackdropProps = {\n  children: ReactNode;\n  modal: boolean;\n  onDismiss: (state: boolean, reason: string) => void;\n  overlayProps: OverlayAria['overlayProps'];\n  disableAnimations: boolean;\n};\n\nconst DrawerBackdrop = (props: DrawerBackdropProps) => {\n  const { children, modal, disableAnimations, onDismiss, overlayProps } = props;\n\n  return (\n    <motion.div\n      variants={disableAnimations ? {} : fade}\n      initial=\"fadeOut\"\n      animate=\"fadeIn\"\n      exit=\"fadeOut\"\n      data-testid=\"drawer-backdrop\"\n      className={DrawerBackdropCSS}\n      style={{\n        pointerEvents: modal\n          ? undefined\n          : ('none' as CSSProperties['pointerEvents']),\n        backgroundColor: modal ? Colors.Background.Surface.Backdrop : undefined,\n      }}\n      onPointerDown={(event: ReactMouseEvent) => {\n        if (modal === true && event.target === event.currentTarget) {\n          // The useOverlay hook keeps an internal state of the stacked overlays.\n          // However, some overlays don't rely on the hook; hence the list isn't complete\n          // and the overlay is dismissed when clicking on any not registered overlay.\n          // (e.g. Microguide would not influence the dismissing but can't be added to\n          // the list either, because it is always on top and shouldn't be closed)\n          // Therefore, the sheet is manually dismissed on backdrop click.\n          // This topic will be revisited and aligned with the Overlay Rework (APPDEV-3373).\n          onDismiss(true, 'backdrop');\n        }\n      }}\n      {...(overlayProps as Record<string, unknown>)}\n    >\n      {children}\n    </motion.div>\n  );\n};\n"],
+  "mappings": "AAiPkB;AAjPlB,OAAO,UAAU;AACjB,SAAS,iBAAiB,cAAc;AACxC;AAAA,EAEE;AAAA,EACA;AAAA,OAGK;AAEP,OAAO,kBAAkB;AACzB,OAAO,YAAY;AAEnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AAMxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAA2B,kBAAkB;AAE7C,MAAM,iBAAiB;AAoDvB,MAAM,iBAAiB,CAAC,gBAAkC;AAAA,EACxD,SAAS;AAAA,IACP,GAAG;AAAA,IACH,YAAY;AAAA,MACV,UAAU,aAAa,QAAQ,SAAS;AAAA,MACxC,MAAM;AAAA,IACR;AAAA;AAAA;AAAA;AAAA,IAIA,eAAe;AAAA,MACb,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,GAAG,eAAe,SAAS,UAAU;AAAA,IACrC,YAAY;AAAA,MACV,UAAU,aAAa,SAAS,SAAS;AAAA,MACzC,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,MAAM,OAAO;AAAA,EACX,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,IACT,YAAY;AAAA,MACV,UAAU,aAAa,QAAQ,SAAS;AAAA,MACxC,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,MACV,UAAU,aAAa,SAAS,SAAS;AAAA,MACzC,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAOO,MAAM,SAAyB,2BAGpC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAiB;AACjB,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,EAAE,aAAa,IAAI;AAAA,IACvB;AAAA,MACE,SAAS,CAAC,WAAW;AACnB,kBAAU,MAAM,MAAM;AAAA,MACxB;AAAA,MACA,QAAQ,CAAC;AAAA,MACT,eAAe;AAAA,MACf,2BAA2B;AAAA,IAC7B;AAAA,IACA;AAAA,EACF;AAEA,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAM,aAAa,aAA0B,CAAC,KAAK,YAAY,CAAC;AAChE,QAAM,wBAAwB,mBAAmB,GAAG,SAAS;AAE7D,SACE,oBAAC,mBACE,WAAC,eACA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAG;AAAA,MACJ,OAAO;AAAA,QACL,GAAG,sBAAsB;AAAA,QACzB,eAAe,QAAQ,SAAY;AAAA,MACrC;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,UAAU,oBAAoB,CAAC,IAAI,eAAe,SAAS;AAAA,cAC3D,SAAQ;AAAA,cACR,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,qBAAqB,MACnB,OAAO,cAAc,IAAI,MAAM,eAAe,CAAC;AAAA,cAIjD,UAAU;AAAA,cACV,MAAI;AAAA,cACJ,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,mBAAmB,SAAS;AAAA,gBAC5B;AAAA,kBACE,CAAC,kBAAkB,MAAM,GAAG,UAAU;AAAA,kBACtC,CAAC,kBAAkB,MAAM,GAAG,UAAU;AAAA,kBACtC,CAAC,kBAAkB,IAAI,GAAG,UAAU;AAAA,kBACpC,CAAC,kBAAkB,IAAI,GAAG,UAAU;AAAA,gBACtC;AAAA,cACF;AAAA,cACA,OAAO;AAAA,gBACL;AAAA;AAAA,kBAEE,UAAU,YACV,UAAU,YACV,UAAU,UACV,UAAU,SACN,QACA;AAAA;AAAA,gBACN,GAAG;AAAA,cACL;AAAA,cACC,GAAG;AAAA,cACH,GAAG;AAAA,cACJ,cAAY;AAAA,cACZ,qBAAmB;AAAA,cAEnB,8BAAC,cAAW,WAAS,MAAC,SAAS,OAC7B;AAAA,gBAAC,OAAO;AAAA,gBAAP;AAAA,kBACC,UAAU,oBAAoB,CAAC,IAAI;AAAA,kBACnC,SAAQ;AAAA,kBACR,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,WAAW;AAAA,kBAEX,8BAAC,2BAAyB,UAAS;AAAA;AAAA,cACrC,GACF;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GAEJ;AAEJ,CAAC;AAUD,MAAM,iBAAiB,CAAC,UAA+B;AACrD,QAAM,EAAE,UAAU,OAAO,mBAAmB,WAAW,aAAa,IAAI;AAExE,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,UAAU,oBAAoB,CAAC,IAAI;AAAA,MACnC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,QACL,eAAe,QACX,SACC;AAAA,QACL,iBAAiB,QAAQ,OAAO,WAAW,QAAQ,WAAW;AAAA,MAChE;AAAA,MACA,eAAe,CAAC,UAA2B;AACzC,YAAI,UAAU,QAAQ,MAAM,WAAW,MAAM,eAAe;AAQ1D,oBAAU,MAAM,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACC,GAAI;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/overlays/drawer/Drawer.sty.js

@@ -1,9 +1,9 @@
 import "./Drawer.css";
-var DrawerBackdropCSS = "_14971977-3-11-3";
-var DrawerCSS = "_14971970-3-11-3";
-var DrawerContentCSS = "_14971978-3-11-3";
-var DrawerPlacementCSS = { left: "_14971971-3-11-3", right: "_14971972-3-11-3" };
-var DrawerWidthStyles = { narrow: "_14971973-3-11-3", medium: "_14971974-3-11-3", wide: "_14971975-3-11-3", full: "_14971976-3-11-3" };
+var DrawerBackdropCSS = "_14971977-3-12-0";
+var DrawerCSS = "_14971970-3-12-0";
+var DrawerContentCSS = "_14971978-3-12-0";
+var DrawerPlacementCSS = { left: "_14971971-3-12-0", right: "_14971972-3-12-0" };
+var DrawerWidthStyles = { narrow: "_14971973-3-12-0", medium: "_14971974-3-12-0", wide: "_14971975-3-12-0", full: "_14971976-3-12-0" };
 export {
   DrawerBackdropCSS,
   DrawerCSS,

package/esm/overlays/drawer/Drawer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/drawer/Drawer.css.ts"],
-  "sourcesContent": ["import './Drawer.css';\nexport var DrawerBackdropCSS = '_14971977-3-11-3';\nexport var DrawerCSS = '_14971970-3-11-3';\nexport var DrawerContentCSS = '_14971978-3-11-3';\nexport var DrawerPlacementCSS = {left:'_14971971-3-11-3',right:'_14971972-3-11-3'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-11-3',medium:'_14971974-3-11-3',wide:'_14971975-3-11-3',full:'_14971976-3-11-3'};"],
+  "sourcesContent": ["import './Drawer.css';\nexport var DrawerBackdropCSS = '_14971977-3-12-0';\nexport var DrawerCSS = '_14971970-3-12-0';\nexport var DrawerContentCSS = '_14971978-3-12-0';\nexport var DrawerPlacementCSS = {left:'_14971971-3-12-0',right:'_14971972-3-12-0'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-12-0',medium:'_14971974-3-12-0',wide:'_14971975-3-12-0',full:'_14971976-3-12-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,YAAY;AAChB,IAAI,mBAAmB;AACvB,IAAI,qBAAqB,EAAC,MAAK,oBAAmB,OAAM,mBAAkB;AAC1E,IAAI,oBAAoB,EAAC,QAAO,oBAAmB,QAAO,oBAAmB,MAAK,oBAAmB,MAAK,mBAAkB;",
   "names": []
 }

package/esm/overlays/hooks/useOverlayWithTrigger.js

@@ -74,6 +74,7 @@ function useOverlayWithTrigger(props = {}) {
           if (!firstFocusableChild) {
             e.preventDefault();
             close();
+            triggerRef.current?.focus();
             return;
           }
           const isFirstFocusable = firstFocusableChild === e.target;
@@ -81,6 +82,7 @@ function useOverlayWithTrigger(props = {}) {
           if (!trapFocus && (e.shiftKey && isFirstFocusable || !e.shiftKey && isLastFocusable)) {
             e.preventDefault();
             close();
+            triggerRef.current?.focus();
           }
         }
       }
@@ -180,10 +182,14 @@ function useOverlayWithTrigger(props = {}) {
       ..._mergeProps(
         overlayProps,
         { ...dialogPropsWithoutLabelledBy, "aria-labelledby": ariaLabelledBy },
-        // we also need to add the onKeyDown handler in here for closing overlays with interactive content when tabbing and shouldCloseOnBlur is false (default)
-        // if shouldCloseOnBlur is set to true, the focus handlers from the returned useOverlay overlayProps take care of the closing
-        // if there's no interactive content, the trigger keeps the focus, so the onKeyDown event from the triggerProps takes care of closing
-        { onKeyDown: shouldCloseOnBlur ? void 0 : onKeyDown },
+        // onKeyDown intercepts Tab at focusable boundaries: it prevents the default
+        // Tab action, closes the overlay, and restores focus to the trigger. Attaching
+        // it unconditionally (even when shouldCloseOnBlur is true) ensures focus is
+        // correctly restored in all cases. Using e.preventDefault() also prevents the
+        // blur from firing, so the shouldCloseOnBlur blur-handler never double-closes.
+        // If there's no interactive content, the trigger keeps focus and triggerProps'
+        // onKeyDown takes care of closing instead.
+        { onKeyDown },
         { style: positioningStyles.popper, id: overlayId, trapFocus },
         positioningAttributes.popper
       )

package/esm/overlays/hooks/useOverlayWithTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/hooks/useOverlayWithTrigger.ts"],
-  "sourcesContent": ["import { eventListeners } from '@popperjs/core';\nimport {\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  useCallback,\n  type SetStateAction,\n  type Dispatch,\n  type DOMAttributes,\n} from 'react';\n\nimport { useDialog } from './useDialog.js';\nimport { useKeyboardInteractionOutside } from './useKeyboardInteractionOutside.js';\nimport {\n  OverlayTriggerState,\n  useOverlay,\n  useOverlayTriggerState,\n} from './useOverlay.js';\nimport { usePress } from './usePress.js';\nimport { useStateRef } from './useStateRef.js';\nimport type {\n  AriaBaseButtonProps,\n  AriaButtonProps,\n  ButtonAria,\n} from '../../buttons/button/types/button-aria.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport {\n  Elevation,\n  useOverlayStacking,\n} from '../../core/hooks/useOverlayStacking.js';\nimport { getFirstFocusableChild as _getFirstFocusableChild } from '../../core/utils/focus-management/get-first-focusable-child.js';\nimport { getLastFocusableChild as _getLastFocusableChild } from '../../core/utils/focus-management/get-last-focusable-child.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport type { FormControlRef } from '../../forms/shared-types.js';\nimport { isFormControlRef } from '../../forms/shared-types.js';\nimport type { HeightStrategy, WidthStrategy } from '../types/sizing.types.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n  overlayHeightStrategyHandling,\n  overlayWidthStrategyHandling,\n} from '../utils/popper-modifiers.js';\nimport { usePopper } from '../utils/use-popper-compat.js';\n\n//#region Typings\n/**\n * @public\n */\nexport type OverlayPlacement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end';\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerUncontrolledProps {\n  /**\n   * Whether the overlay is open by default.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Determines whether or not the overlay is open in a controlled scenario.\n   */\n  open?: never;\n}\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerControlledProps {\n  /**\n   * Whether the overlay is open by default.\n   */\n  defaultOpen?: never;\n  /**\n   * Determines whether or not the overlay is open in a controlled scenario.\n   */\n  open: boolean;\n}\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerBaseProps {\n  /**\n   * Placement of the overlay\n   * @defaultValue 'bottom'\n   */\n  placement?: OverlayPlacement;\n  /**\n   * Alternative positions that will be assumed if the original placement will not fit\n   * @defaultValue ['top']\n   */\n  placementFallbacks?: OverlayPlacement[];\n  /**\n   * Offset between overlay and target element\n   * @defaultValue 0\n   */\n  offset?: number;\n  /**\n   * Offset along the cross axis between the overlay and target element\n   * @defaultValue 0\n   */\n  crossOffset?: number;\n  /**\n   * An additional z-index elevation value to add to the one derived from the stacking order\n   */\n  additionalElevation?: Elevation;\n  /**\n   * Whether the trigger is disabled or not\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Defines which strategy to use for setting the overlay width\n   * @defaultValue 'content'\n   */\n  widthStrategy?: WidthStrategy;\n  /**\n   * Defines which strategy to use for setting the overlay height\n   * @defaultValue 'content'\n   */\n  heightStrategy?: HeightStrategy;\n  /**\n   * Whether the overlay should trap the focus.\n   * @defaultValue false\n   */\n  trapFocus?: boolean;\n  /**\n   * Callback fired when the open attribute changes.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Whether the overlay should close on blur.\n   * @defaultValue false\n   */\n  shouldCloseOnBlur?: boolean;\n  /**\n   * Id used for the accessible label of the overlay\n   */\n  'aria-labelledby'?: string;\n}\n\n/**\n * @public\n */\nexport type UseOverlayWithTriggerProps = UseOverlayWithTriggerBaseProps &\n  (\n    | UseOverlayWithTriggerUncontrolledProps\n    | UseOverlayWithTriggerControlledProps\n  );\n\n/**\n * @public\n */\nexport interface OverlayRefs {\n  /**\n   * Use this ref and attach it to the trigger element.\n   * State handling of opening and closing will be automatically attached\n   * to the trigger.\n   */\n  triggerRef: Dispatch<SetStateAction<HTMLElement | FormControlRef | null>>;\n  /**\n   * Use this ref to attach it to the overlaying element. This is used\n   * to correctly position the overlay on the screen.\n   */\n  overlayRef: Dispatch<SetStateAction<HTMLElement | null>>;\n  /**\n   * Use this ref in order to give the overlay its anchoring element.\n   * The overlaying element will attach to the target element by following\n   * the provided placement and placementFallback strategies.\n   * If the triggerRef and targetRef should be on the same element, consider\n   * using the `useMergeRefs` from the package core to combine target and trigger\n   * refs.\n   */\n  targetRef: Dispatch<SetStateAction<HTMLElement | FormControlRef | null>>;\n}\n\n/**\n * Type used for defining the 'data-ismodal' property, as well as modal accessibility and styling properties.\n * @public\n */\nexport interface ModalAriaProps extends HTMLAttributes<HTMLElement> {\n  /** Data attribute marks the dom node as a modal for the aria-modal-polyfill. */\n  'data-ismodal'?: boolean;\n}\n\n/**\n * @public\n */\nexport interface OverlayProps {\n  /**\n   * Properties for connecting the overlay to the overlay trigger.\n   * Includes styles and accessibility attributes.\n   */\n  overlayProps: ModalAriaProps & Pick<UseOverlayWithTriggerProps, 'trapFocus'>;\n  /**\n   * Overlay state, which contains information about the open/closed state of the overlay,\n   * as well as opening/closing/toggling methods.\n   */\n  overlayState: OverlayTriggerState;\n  /**\n   * Props for the OverlayContainer component, used in order to ensure correct\n   * zIndex stacking.\n   */\n  overlayContainerProps: Record<string, unknown>;\n}\n\n/**\n * @deprecated Will be removed. Use `OverlayWithTriggerReturnType` to access `overlayTriggerProps` instead. `hasError` was never set.\n * @public\n */\nexport interface OverlayTriggerProps {\n  /** Properties for the behavior and accessibility of the overlay trigger. */\n  overlayTriggerProps: ButtonAria<AnchorHTMLAttributes<HTMLElement>> &\n    AriaButtonProps;\n  /** Whether or not the trigger is used within a component in an error state. */\n  hasError?: boolean;\n}\n\n/**\n * Properties for spreading onto the trigger and overlay container, handling the\n * behavior and accessibility of the trigger and overlay.\n * @deprecated Will be removed. Use `TriggerProps` instead\n * @public\n */\nexport type OverlayWithTriggerProps = OverlayRefs &\n  OverlayProps &\n  OverlayWithTriggerReturnType['overlayTriggerProps'];\n\n/**\n * Type reflecting the properties for the behavior and accessibility of the overlay trigger.\n * @public\n */\nexport type TriggerProps = Pick<\n  AriaBaseButtonProps,\n  'aria-haspopup' | 'aria-expanded' | 'aria-controls' | 'type'\n> &\n  Pick<\n    DOMAttributes<Element & HTMLOrSVGElement>,\n    | 'onKeyDown'\n    | 'onKeyUp'\n    | 'onClick'\n    | 'onMouseDown'\n    | 'onMouseUp'\n    | 'onPointerDown'\n    | 'onPointerUp'\n    | 'onDragStart'\n    | 'onMouseEnter'\n    | 'onMouseLeave'\n    | 'onTouchStart'\n    | 'onTouchEnd'\n    | 'onTouchMove'\n    | 'onTouchCancel'\n  > & {\n    /** Whether the trigger is disabled. */\n    disabled?: boolean;\n  };\n\n/**\n * Properties for spreading onto the trigger and overlay container, handling the\n * behavior and accessibility of the trigger and overlay.\n * @public\n */\nexport type OverlayWithTriggerReturnType = OverlayRefs &\n  OverlayProps & {\n    /** Properties for the behavior and accessibility of the overlay trigger. */\n    overlayTriggerProps: TriggerProps;\n  };\n//#endregion Typings\n\n/**\n * Returns the value for 'aria-haspopup' depending on the type.\n * @internal\n */\nfunction getAriaHasPopup(\n  type: string,\n): boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | undefined {\n  // Aria 1.1 supports multiple values for aria-haspopup other than just menus.\n  // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup\n  // However, we only add it for menus for now because screen readers often\n  // announce it as a menu even for other values.\n  if (type === 'menu') {\n    return true;\n  } else if (type === 'listbox') {\n    return 'listbox';\n  }\n  return undefined;\n}\n\n/**\n * Custom hook used for overlays with trigger.\n * @public\n */\nexport function useOverlayWithTrigger(\n  props: UseOverlayWithTriggerProps = {},\n): OverlayWithTriggerReturnType {\n  const {\n    placement = 'bottom',\n    placementFallbacks = ['top'],\n    offset = 0,\n    crossOffset = 0,\n    additionalElevation,\n    disabled = false,\n    widthStrategy = 'content',\n    heightStrategy = 'content',\n    trapFocus = false,\n    defaultOpen = false,\n    open,\n    onOpenChange,\n    shouldCloseOnBlur = false,\n    'aria-labelledby': ariaLabelledBy,\n  } = props;\n\n  // Create the refs needed for the overlay\n  const [targetElement, setTargetElement] = useStateRef<HTMLElement>();\n  const [overlayElement, setOverlayElement, overlayRef] =\n    useStateRef<HTMLElement>();\n  const [, setTriggerElement, triggerRef] = useStateRef<HTMLElement>();\n\n  const overlayContainerProps = useOverlayStacking(\n    undefined,\n    additionalElevation,\n  );\n\n  // Create state for handling opening/closing of the calendar overlay\n  const overlayState = useOverlayTriggerState({\n    defaultOpen,\n    isOpen: open,\n    onOpenChange,\n  });\n  const { isOpen, close, toggle } = overlayState;\n\n  const overlayId = useId();\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && isOpen) {\n        const overlay = document.getElementById(`${overlayId}`);\n\n        if (overlay) {\n          const firstFocusableChild = _getFirstFocusableChild(overlay);\n          const lastFocusableChild = _getLastFocusableChild(overlay);\n\n          // No focusable children.\n          if (!firstFocusableChild) {\n            e.preventDefault();\n            close();\n            return;\n          }\n\n          const isFirstFocusable = firstFocusableChild === e.target;\n          const isLastFocusable = lastFocusableChild === e.target;\n\n          if (\n            !trapFocus &&\n            ((e.shiftKey && isFirstFocusable) ||\n              (!e.shiftKey && isLastFocusable))\n          ) {\n            e.preventDefault();\n            close();\n          }\n        }\n      }\n    },\n    [close, isOpen, overlayId, trapFocus],\n  );\n\n  // Initialize the trigger to get the correct aria props and connections\n  // between the trigger and the overlay.\n  const triggerProps = {\n    'aria-haspopup': getAriaHasPopup('dialog'),\n    'aria-expanded': isOpen,\n    'aria-controls': isOpen ? overlayId : undefined,\n    onKeyDown,\n  };\n\n  // usePress ensures that focus management is handled correctly across all\n  // browsers. Focus is restored to the button once the popover closes.\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { pressProps } = usePress({\n    onPress: toggle,\n    isDisabled: disabled,\n  });\n\n  const { styles: positioningStyles, attributes: positioningAttributes } =\n    usePopper(targetElement, overlayElement, {\n      placement: placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [crossOffset, offset],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: [placement, ...placementFallbacks],\n          },\n        },\n        overlayWidthStrategyHandling,\n        {\n          name: 'overlayWidthStrategyHandling',\n          enabled: widthStrategy !== 'content',\n          options: { widthStrategy },\n        },\n        overlayHeightStrategyHandling,\n        {\n          name: 'overlayHeightStrategyHandling',\n          enabled: heightStrategy !== 'content',\n          options: { heightStrategy },\n        },\n        observeOverlaySize,\n        observeAnimationDone,\n        eventListeners,\n      ],\n    });\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps } = useOverlay(\n    {\n      isOpen,\n      isDismissible: true,\n      shouldCloseOnInteractOutside: (element) => {\n        const triggerElement = isFormControlRef(triggerRef)\n          ? triggerRef.element\n          : triggerRef;\n\n        // If there is no trigger element, skip trigger hit check\n        if (triggerElement === null) {\n          return true;\n        }\n\n        // Prevent the dismiss when clicking on the trigger itself.\n        // This enables the trigger to handle the toggling, instead of keeping\n        // it inside an endless loop.\n        return (\n          element !== triggerRef.current &&\n          triggerRef.current?.contains(element) === false\n        );\n      },\n      onClose: () => {\n        close();\n      },\n      shouldCloseOnBlur,\n    },\n    overlayRef,\n  );\n\n  // Get props for the dialog and its title.\n  // Strip the auto-generated aria-labelledby from useDialog to avoid a dangling\n  // reference to a non-existent element (WCAG violation). Only pass it through\n  // when the caller explicitly provides it.\n  const { dialogProps } = useDialog({});\n  const { 'aria-labelledby': _unused, ...dialogPropsWithoutLabelledBy } =\n    dialogProps;\n\n  useKeyboardInteractionOutside({\n    ref: overlayRef,\n    isDisabled: !isOpen,\n    onInteractOutside: (event) => {\n      if ((event as unknown as KeyboardEvent).key === 'Escape') {\n        close();\n      }\n    },\n  });\n\n  // A passed ref could be a regular DOM ref or our newly introduced FormControlRef imperative handler\n  const updateTriggerElement = useCallback(\n    (triggerRef: SetStateAction<HTMLElement | FormControlRef | null>) => {\n      const newTriggerElement = isFormControlRef(triggerRef)\n        ? triggerRef.element\n        : (triggerRef as HTMLElement | null);\n      setTriggerElement(newTriggerElement);\n    },\n    [setTriggerElement],\n  );\n\n  // A passed ref could be a regular DOM ref or our newly introduced FormControlRef imperative handler\n  const updateTargetElement = useCallback(\n    (targetRef: SetStateAction<HTMLElement | FormControlRef | null>) => {\n      const newTargetElement = isFormControlRef(targetRef)\n        ? targetRef.element\n        : (targetRef as HTMLElement | null);\n      setTargetElement(newTargetElement);\n    },\n    [setTargetElement],\n  );\n\n  return {\n    triggerRef: updateTriggerElement,\n    targetRef: updateTargetElement,\n    overlayRef: setOverlayElement,\n    overlayProps: {\n      ..._mergeProps(\n        overlayProps,\n        { ...dialogPropsWithoutLabelledBy, 'aria-labelledby': ariaLabelledBy },\n        // we also need to add the onKeyDown handler in here for closing overlays with interactive content when tabbing and shouldCloseOnBlur is false (default)\n        // if shouldCloseOnBlur is set to true, the focus handlers from the returned useOverlay overlayProps take care of the closing\n        // if there's no interactive content, the trigger keeps the focus, so the onKeyDown event from the triggerProps takes care of closing\n        { onKeyDown: shouldCloseOnBlur ? undefined : onKeyDown },\n        { style: positioningStyles.popper, id: overlayId, trapFocus },\n        positioningAttributes.popper,\n      ),\n    },\n    overlayContainerProps,\n    overlayState,\n    overlayTriggerProps: _mergeProps(pressProps, triggerProps, {\n      type: 'button' as AriaBaseButtonProps['type'],\n      disabled,\n    }),\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAC/B;AAAA,EAGE;AAAA,OAIK;AAEP,SAAS,iBAAiB;AAC1B,SAAS,qCAAqC;AAC9C;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAM5B,SAAS,aAAa;AACtB;AAAA,EAEE;AAAA,OACK;AACP,SAAS,0BAA0B,+BAA+B;AAClE,SAAS,yBAAyB,8BAA8B;AAChE,SAAS,cAAc,mBAAmB;AAE1C,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAuP1B,SAAS,gBACP,MACuE;AAKvE,MAAI,SAAS,QAAQ;AACnB,WAAO;AAAA,EACT,WAAW,SAAS,WAAW;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAMO,SAAS,sBACd,QAAoC,CAAC,GACP;AAC9B,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,qBAAqB,CAAC,KAAK;AAAA,IAC3B,SAAS;AAAA,IACT,cAAc;AAAA,IACd;AAAA,IACA,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,EACrB,IAAI;AAGJ,QAAM,CAAC,eAAe,gBAAgB,IAAI,YAAyB;AACnE,QAAM,CAAC,gBAAgB,mBAAmB,UAAU,IAClD,YAAyB;AAC3B,QAAM,CAAC,EAAE,mBAAmB,UAAU,IAAI,YAAyB;AAEnE,QAAM,wBAAwB;AAAA,IAC5B;AAAA,IACA;AAAA,EACF;AAGA,QAAM,eAAe,uBAAuB;AAAA,IAC1C;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,EACF,CAAC;AACD,QAAM,EAAE,QAAQ,OAAO,OAAO,IAAI;AAElC,QAAM,YAAY,MAAM;AAExB,QAAM,YAAY;AAAA,IAChB,CAAC,MAAqB;AACpB,UAAI,EAAE,QAAQ,SAAS,QAAQ;AAC7B,cAAM,UAAU,SAAS,eAAe,GAAG,SAAS,EAAE;AAEtD,YAAI,SAAS;AACX,gBAAM,sBAAsB,wBAAwB,OAAO;AAC3D,gBAAM,qBAAqB,uBAAuB,OAAO;AAGzD,cAAI,CAAC,qBAAqB;AACxB,cAAE,eAAe;AACjB,kBAAM;AACN;AAAA,UACF;AAEA,gBAAM,mBAAmB,wBAAwB,EAAE;AACnD,gBAAM,kBAAkB,uBAAuB,EAAE;AAEjD,cACE,CAAC,cACC,EAAE,YAAY,oBACb,CAAC,EAAE,YAAY,kBAClB;AACA,cAAE,eAAe;AACjB,kBAAM;AAAA,UACR;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ,WAAW,SAAS;AAAA,EACtC;AAIA,QAAM,eAAe;AAAA,IACnB,iBAAiB,gBAAgB,QAAQ;AAAA,IACzC,iBAAiB;AAAA,IACjB,iBAAiB,SAAS,YAAY;AAAA,IACtC;AAAA,EACF;AAKA,QAAM,EAAE,WAAW,IAAI,SAAS;AAAA,IAC9B,SAAS;AAAA,IACT,YAAY;AAAA,EACd,CAAC;AAED,QAAM,EAAE,QAAQ,mBAAmB,YAAY,sBAAsB,IACnE,UAAU,eAAe,gBAAgB;AAAA,IACvC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,QAAQ,CAAC,aAAa,MAAM;AAAA,QAC9B;AAAA,MACF;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,oBAAoB,CAAC,WAAW,GAAG,kBAAkB;AAAA,QACvD;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS,kBAAkB;AAAA,QAC3B,SAAS,EAAE,cAAc;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS,mBAAmB;AAAA,QAC5B,SAAS,EAAE,eAAe;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAIH,QAAM,EAAE,aAAa,IAAI;AAAA,IACvB;AAAA,MACE;AAAA,MACA,eAAe;AAAA,MACf,8BAA8B,CAAC,YAAY;AACzC,cAAM,iBAAiB,iBAAiB,UAAU,IAC9C,WAAW,UACX;AAGJ,YAAI,mBAAmB,MAAM;AAC3B,iBAAO;AAAA,QACT;AAKA,eACE,YAAY,WAAW,WACvB,WAAW,SAAS,SAAS,OAAO,MAAM;AAAA,MAE9C;AAAA,MACA,SAAS,MAAM;AACb,cAAM;AAAA,MACR;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF;AAMA,QAAM,EAAE,YAAY,IAAI,UAAU,CAAC,CAAC;AACpC,QAAM,EAAE,mBAAmB,SAAS,GAAG,6BAA6B,IAClE;AAEF,gCAA8B;AAAA,IAC5B,KAAK;AAAA,IACL,YAAY,CAAC;AAAA,IACb,mBAAmB,CAAC,UAAU;AAC5B,UAAK,MAAmC,QAAQ,UAAU;AACxD,cAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF,CAAC;AAGD,QAAM,uBAAuB;AAAA,IAC3B,CAACA,gBAAoE;AACnE,YAAM,oBAAoB,iBAAiBA,WAAU,IACjDA,YAAW,UACVA;AACL,wBAAkB,iBAAiB;AAAA,IACrC;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAGA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,cAAmE;AAClE,YAAM,mBAAmB,iBAAiB,SAAS,IAC/C,UAAU,UACT;AACL,uBAAiB,gBAAgB;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,cAAc;AAAA,MACZ,GAAG;AAAA,QACD;AAAA,QACA,EAAE,GAAG,8BAA8B,mBAAmB,eAAe;AAAA;AAAA;AAAA;AAAA,QAIrE,EAAE,WAAW,oBAAoB,SAAY,UAAU;AAAA,QACvD,EAAE,OAAO,kBAAkB,QAAQ,IAAI,WAAW,UAAU;AAAA,QAC5D,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB,YAAY,YAAY,cAAc;AAAA,MACzD,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import { eventListeners } from '@popperjs/core';\nimport {\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  useCallback,\n  type SetStateAction,\n  type Dispatch,\n  type DOMAttributes,\n} from 'react';\n\nimport { useDialog } from './useDialog.js';\nimport { useKeyboardInteractionOutside } from './useKeyboardInteractionOutside.js';\nimport {\n  OverlayTriggerState,\n  useOverlay,\n  useOverlayTriggerState,\n} from './useOverlay.js';\nimport { usePress } from './usePress.js';\nimport { useStateRef } from './useStateRef.js';\nimport type {\n  AriaBaseButtonProps,\n  AriaButtonProps,\n  ButtonAria,\n} from '../../buttons/button/types/button-aria.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport {\n  Elevation,\n  useOverlayStacking,\n} from '../../core/hooks/useOverlayStacking.js';\nimport { getFirstFocusableChild as _getFirstFocusableChild } from '../../core/utils/focus-management/get-first-focusable-child.js';\nimport { getLastFocusableChild as _getLastFocusableChild } from '../../core/utils/focus-management/get-last-focusable-child.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport type { FormControlRef } from '../../forms/shared-types.js';\nimport { isFormControlRef } from '../../forms/shared-types.js';\nimport type { HeightStrategy, WidthStrategy } from '../types/sizing.types.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n  overlayHeightStrategyHandling,\n  overlayWidthStrategyHandling,\n} from '../utils/popper-modifiers.js';\nimport { usePopper } from '../utils/use-popper-compat.js';\n\n//#region Typings\n/**\n * @public\n */\nexport type OverlayPlacement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end';\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerUncontrolledProps {\n  /**\n   * Whether the overlay is open by default.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Determines whether or not the overlay is open in a controlled scenario.\n   */\n  open?: never;\n}\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerControlledProps {\n  /**\n   * Whether the overlay is open by default.\n   */\n  defaultOpen?: never;\n  /**\n   * Determines whether or not the overlay is open in a controlled scenario.\n   */\n  open: boolean;\n}\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerBaseProps {\n  /**\n   * Placement of the overlay\n   * @defaultValue 'bottom'\n   */\n  placement?: OverlayPlacement;\n  /**\n   * Alternative positions that will be assumed if the original placement will not fit\n   * @defaultValue ['top']\n   */\n  placementFallbacks?: OverlayPlacement[];\n  /**\n   * Offset between overlay and target element\n   * @defaultValue 0\n   */\n  offset?: number;\n  /**\n   * Offset along the cross axis between the overlay and target element\n   * @defaultValue 0\n   */\n  crossOffset?: number;\n  /**\n   * An additional z-index elevation value to add to the one derived from the stacking order\n   */\n  additionalElevation?: Elevation;\n  /**\n   * Whether the trigger is disabled or not\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Defines which strategy to use for setting the overlay width\n   * @defaultValue 'content'\n   */\n  widthStrategy?: WidthStrategy;\n  /**\n   * Defines which strategy to use for setting the overlay height\n   * @defaultValue 'content'\n   */\n  heightStrategy?: HeightStrategy;\n  /**\n   * Whether the overlay should trap the focus.\n   * @defaultValue false\n   */\n  trapFocus?: boolean;\n  /**\n   * Callback fired when the open attribute changes.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Whether the overlay should close on blur.\n   * @defaultValue false\n   */\n  shouldCloseOnBlur?: boolean;\n  /**\n   * Id used for the accessible label of the overlay\n   */\n  'aria-labelledby'?: string;\n}\n\n/**\n * @public\n */\nexport type UseOverlayWithTriggerProps = UseOverlayWithTriggerBaseProps &\n  (\n    | UseOverlayWithTriggerUncontrolledProps\n    | UseOverlayWithTriggerControlledProps\n  );\n\n/**\n * @public\n */\nexport interface OverlayRefs {\n  /**\n   * Use this ref and attach it to the trigger element.\n   * State handling of opening and closing will be automatically attached\n   * to the trigger.\n   */\n  triggerRef: Dispatch<SetStateAction<HTMLElement | FormControlRef | null>>;\n  /**\n   * Use this ref to attach it to the overlaying element. This is used\n   * to correctly position the overlay on the screen.\n   */\n  overlayRef: Dispatch<SetStateAction<HTMLElement | null>>;\n  /**\n   * Use this ref in order to give the overlay its anchoring element.\n   * The overlaying element will attach to the target element by following\n   * the provided placement and placementFallback strategies.\n   * If the triggerRef and targetRef should be on the same element, consider\n   * using the `useMergeRefs` from the package core to combine target and trigger\n   * refs.\n   */\n  targetRef: Dispatch<SetStateAction<HTMLElement | FormControlRef | null>>;\n}\n\n/**\n * Type used for defining the 'data-ismodal' property, as well as modal accessibility and styling properties.\n * @public\n */\nexport interface ModalAriaProps extends HTMLAttributes<HTMLElement> {\n  /** Data attribute marks the dom node as a modal for the aria-modal-polyfill. */\n  'data-ismodal'?: boolean;\n}\n\n/**\n * @public\n */\nexport interface OverlayProps {\n  /**\n   * Properties for connecting the overlay to the overlay trigger.\n   * Includes styles and accessibility attributes.\n   */\n  overlayProps: ModalAriaProps & Pick<UseOverlayWithTriggerProps, 'trapFocus'>;\n  /**\n   * Overlay state, which contains information about the open/closed state of the overlay,\n   * as well as opening/closing/toggling methods.\n   */\n  overlayState: OverlayTriggerState;\n  /**\n   * Props for the OverlayContainer component, used in order to ensure correct\n   * zIndex stacking.\n   */\n  overlayContainerProps: Record<string, unknown>;\n}\n\n/**\n * @deprecated Will be removed. Use `OverlayWithTriggerReturnType` to access `overlayTriggerProps` instead. `hasError` was never set.\n * @public\n */\nexport interface OverlayTriggerProps {\n  /** Properties for the behavior and accessibility of the overlay trigger. */\n  overlayTriggerProps: ButtonAria<AnchorHTMLAttributes<HTMLElement>> &\n    AriaButtonProps;\n  /** Whether or not the trigger is used within a component in an error state. */\n  hasError?: boolean;\n}\n\n/**\n * Properties for spreading onto the trigger and overlay container, handling the\n * behavior and accessibility of the trigger and overlay.\n * @deprecated Will be removed. Use `TriggerProps` instead\n * @public\n */\nexport type OverlayWithTriggerProps = OverlayRefs &\n  OverlayProps &\n  OverlayWithTriggerReturnType['overlayTriggerProps'];\n\n/**\n * Type reflecting the properties for the behavior and accessibility of the overlay trigger.\n * @public\n */\nexport type TriggerProps = Pick<\n  AriaBaseButtonProps,\n  'aria-haspopup' | 'aria-expanded' | 'aria-controls' | 'type'\n> &\n  Pick<\n    DOMAttributes<Element & HTMLOrSVGElement>,\n    | 'onKeyDown'\n    | 'onKeyUp'\n    | 'onClick'\n    | 'onMouseDown'\n    | 'onMouseUp'\n    | 'onPointerDown'\n    | 'onPointerUp'\n    | 'onDragStart'\n    | 'onMouseEnter'\n    | 'onMouseLeave'\n    | 'onTouchStart'\n    | 'onTouchEnd'\n    | 'onTouchMove'\n    | 'onTouchCancel'\n  > & {\n    /** Whether the trigger is disabled. */\n    disabled?: boolean;\n  };\n\n/**\n * Properties for spreading onto the trigger and overlay container, handling the\n * behavior and accessibility of the trigger and overlay.\n * @public\n */\nexport type OverlayWithTriggerReturnType = OverlayRefs &\n  OverlayProps & {\n    /** Properties for the behavior and accessibility of the overlay trigger. */\n    overlayTriggerProps: TriggerProps;\n  };\n//#endregion Typings\n\n/**\n * Returns the value for 'aria-haspopup' depending on the type.\n * @internal\n */\nfunction getAriaHasPopup(\n  type: string,\n): boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | undefined {\n  // Aria 1.1 supports multiple values for aria-haspopup other than just menus.\n  // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup\n  // However, we only add it for menus for now because screen readers often\n  // announce it as a menu even for other values.\n  if (type === 'menu') {\n    return true;\n  } else if (type === 'listbox') {\n    return 'listbox';\n  }\n  return undefined;\n}\n\n/**\n * Custom hook used for overlays with trigger.\n * @public\n */\nexport function useOverlayWithTrigger(\n  props: UseOverlayWithTriggerProps = {},\n): OverlayWithTriggerReturnType {\n  const {\n    placement = 'bottom',\n    placementFallbacks = ['top'],\n    offset = 0,\n    crossOffset = 0,\n    additionalElevation,\n    disabled = false,\n    widthStrategy = 'content',\n    heightStrategy = 'content',\n    trapFocus = false,\n    defaultOpen = false,\n    open,\n    onOpenChange,\n    shouldCloseOnBlur = false,\n    'aria-labelledby': ariaLabelledBy,\n  } = props;\n\n  // Create the refs needed for the overlay\n  const [targetElement, setTargetElement] = useStateRef<HTMLElement>();\n  const [overlayElement, setOverlayElement, overlayRef] =\n    useStateRef<HTMLElement>();\n  const [, setTriggerElement, triggerRef] = useStateRef<HTMLElement>();\n\n  const overlayContainerProps = useOverlayStacking(\n    undefined,\n    additionalElevation,\n  );\n\n  // Create state for handling opening/closing of the calendar overlay\n  const overlayState = useOverlayTriggerState({\n    defaultOpen,\n    isOpen: open,\n    onOpenChange,\n  });\n  const { isOpen, close, toggle } = overlayState;\n\n  const overlayId = useId();\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && isOpen) {\n        const overlay = document.getElementById(`${overlayId}`);\n\n        if (overlay) {\n          const firstFocusableChild = _getFirstFocusableChild(overlay);\n          const lastFocusableChild = _getLastFocusableChild(overlay);\n\n          // No focusable children.\n          if (!firstFocusableChild) {\n            e.preventDefault();\n            close();\n            triggerRef.current?.focus();\n            return;\n          }\n\n          const isFirstFocusable = firstFocusableChild === e.target;\n          const isLastFocusable = lastFocusableChild === e.target;\n\n          if (\n            !trapFocus &&\n            ((e.shiftKey && isFirstFocusable) ||\n              (!e.shiftKey && isLastFocusable))\n          ) {\n            e.preventDefault();\n            close();\n            triggerRef.current?.focus();\n          }\n        }\n      }\n    },\n    [close, isOpen, overlayId, trapFocus],\n  );\n\n  // Initialize the trigger to get the correct aria props and connections\n  // between the trigger and the overlay.\n  const triggerProps = {\n    'aria-haspopup': getAriaHasPopup('dialog'),\n    'aria-expanded': isOpen,\n    'aria-controls': isOpen ? overlayId : undefined,\n    onKeyDown,\n  };\n\n  // usePress ensures that focus management is handled correctly across all\n  // browsers. Focus is restored to the button once the popover closes.\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { pressProps } = usePress({\n    onPress: toggle,\n    isDisabled: disabled,\n  });\n\n  const { styles: positioningStyles, attributes: positioningAttributes } =\n    usePopper(targetElement, overlayElement, {\n      placement: placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [crossOffset, offset],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: [placement, ...placementFallbacks],\n          },\n        },\n        overlayWidthStrategyHandling,\n        {\n          name: 'overlayWidthStrategyHandling',\n          enabled: widthStrategy !== 'content',\n          options: { widthStrategy },\n        },\n        overlayHeightStrategyHandling,\n        {\n          name: 'overlayHeightStrategyHandling',\n          enabled: heightStrategy !== 'content',\n          options: { heightStrategy },\n        },\n        observeOverlaySize,\n        observeAnimationDone,\n        eventListeners,\n      ],\n    });\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps } = useOverlay(\n    {\n      isOpen,\n      isDismissible: true,\n      shouldCloseOnInteractOutside: (element) => {\n        const triggerElement = isFormControlRef(triggerRef)\n          ? triggerRef.element\n          : triggerRef;\n\n        // If there is no trigger element, skip trigger hit check\n        if (triggerElement === null) {\n          return true;\n        }\n\n        // Prevent the dismiss when clicking on the trigger itself.\n        // This enables the trigger to handle the toggling, instead of keeping\n        // it inside an endless loop.\n        return (\n          element !== triggerRef.current &&\n          triggerRef.current?.contains(element) === false\n        );\n      },\n      onClose: () => {\n        close();\n      },\n      shouldCloseOnBlur,\n    },\n    overlayRef,\n  );\n\n  // Get props for the dialog and its title.\n  // Strip the auto-generated aria-labelledby from useDialog to avoid a dangling\n  // reference to a non-existent element (WCAG violation). Only pass it through\n  // when the caller explicitly provides it.\n  const { dialogProps } = useDialog({});\n  const { 'aria-labelledby': _unused, ...dialogPropsWithoutLabelledBy } =\n    dialogProps;\n\n  useKeyboardInteractionOutside({\n    ref: overlayRef,\n    isDisabled: !isOpen,\n    onInteractOutside: (event) => {\n      if ((event as unknown as KeyboardEvent).key === 'Escape') {\n        close();\n      }\n    },\n  });\n\n  // A passed ref could be a regular DOM ref or our newly introduced FormControlRef imperative handler\n  const updateTriggerElement = useCallback(\n    (triggerRef: SetStateAction<HTMLElement | FormControlRef | null>) => {\n      const newTriggerElement = isFormControlRef(triggerRef)\n        ? triggerRef.element\n        : (triggerRef as HTMLElement | null);\n      setTriggerElement(newTriggerElement);\n    },\n    [setTriggerElement],\n  );\n\n  // A passed ref could be a regular DOM ref or our newly introduced FormControlRef imperative handler\n  const updateTargetElement = useCallback(\n    (targetRef: SetStateAction<HTMLElement | FormControlRef | null>) => {\n      const newTargetElement = isFormControlRef(targetRef)\n        ? targetRef.element\n        : (targetRef as HTMLElement | null);\n      setTargetElement(newTargetElement);\n    },\n    [setTargetElement],\n  );\n\n  return {\n    triggerRef: updateTriggerElement,\n    targetRef: updateTargetElement,\n    overlayRef: setOverlayElement,\n    overlayProps: {\n      ..._mergeProps(\n        overlayProps,\n        { ...dialogPropsWithoutLabelledBy, 'aria-labelledby': ariaLabelledBy },\n        // onKeyDown intercepts Tab at focusable boundaries: it prevents the default\n        // Tab action, closes the overlay, and restores focus to the trigger. Attaching\n        // it unconditionally (even when shouldCloseOnBlur is true) ensures focus is\n        // correctly restored in all cases. Using e.preventDefault() also prevents the\n        // blur from firing, so the shouldCloseOnBlur blur-handler never double-closes.\n        // If there's no interactive content, the trigger keeps focus and triggerProps'\n        // onKeyDown takes care of closing instead.\n        { onKeyDown },\n        { style: positioningStyles.popper, id: overlayId, trapFocus },\n        positioningAttributes.popper,\n      ),\n    },\n    overlayContainerProps,\n    overlayState,\n    overlayTriggerProps: _mergeProps(pressProps, triggerProps, {\n      type: 'button' as AriaBaseButtonProps['type'],\n      disabled,\n    }),\n  };\n}\n"],
+  "mappings": "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",
   "names": ["triggerRef"]
 }

package/esm/overlays/modal/BaseModal.js

@@ -61,17 +61,14 @@ const BaseModal = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       // define `initial`, `animate` or `exit` variants on the component.
       backdrop: {
         enter: {
-          // For the opacity we need to use the default value here. Framer motion would complain
-          // about too complex values, when transitioning from two custom property values within
-          // an rgba value apparently.
-          opacity: 1,
+          [styles.backdropOpacityVar]: 1,
           transition: {
             duration,
             ease: fadeInEasing
           }
         },
         exit: {
-          opacity: 0,
+          [styles.backdropOpacityVar]: 0,
           transition: {
             duration,
             ease: fadeOutEasing

package/esm/overlays/modal/BaseModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/modal/BaseModal.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n  Variants,\n} from 'framer-motion';\nimport {\n  forwardRef,\n  useMemo,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\n\nimport * as styles from './Modal.sty.js';\nimport type { ModalSizeOptionsType } from './types.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport {\n  fadeInEasing,\n  fadeOutEasing,\n} from '../../core/utils/framer-motion-easings.js';\nimport { useDialog } from '../hooks/useDialog.js';\nimport { useOverlay } from '../hooks/useOverlay.js';\n\n/**\n * @public\n */\nexport interface BaseModalProps\n  extends AriaLabelingProps,\n    WithChildren,\n    DataTestId,\n    MaskingProps,\n    StylingProps {\n  /**\n   * Controls when the modal is shown.\n   * @defaultValue false\n   */\n  show?: boolean;\n  /**\n   * Sets the size of the modal.\n   * @defaultValue 'medium'\n   */\n  size?: ModalSizeOptionsType;\n  /** Handler function that is called when the modal is closed. */\n  onDismiss?: () => void;\n  /**\n   * Determines if you can click the backdrop to dismiss the modal.\n   * If true, pressing \"ESC\" also dismisses the modal.\n   * @defaultValue true\n   */\n  dismissible?: boolean;\n}\n\n// #endregion\n\n/**\n * BaseModal component\n * @internal\n */\nexport const BaseModal = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  BaseModalProps & /**\n   * Allows behavior tracking. This is a temporal solution and will be replaced by a hook.\n   */ { 'data-dt-component'?: string }\n>((props, forwardedRef) => {\n  const {\n    show = false,\n    size = 'medium',\n    children,\n    onDismiss,\n    dismissible = true,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-dt-component': dtComponentName,\n    ...remainingProps\n  } = props;\n\n  const ref = useRef(null);\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps } = useOverlay(\n    {\n      ...props,\n      onClose: () => {\n        onDismiss?.();\n      },\n      isOpen: show,\n      isKeyboardDismissDisabled: !dismissible,\n    },\n    ref,\n  );\n\n  // adds all aria labels to title and dialog as well as tabindex & role\n  const { dialogProps, titleProps } = useDialog(remainingProps);\n\n  const overlayContainerProps = useOverlayStacking(undefined, 'overlay');\n\n  const reducedMotion = useReducedMotion();\n\n  /** Animation variants */\n  const animationVariants = useMemo<Record<string, Variants>>(() => {\n    const duration = reducedMotion ? 0 : AnimationsJS.FadeIn.Duration.Fast;\n    return {\n      // When animating AnimatePresence where child components\n      // will also need to transform, they can share the same enter/exit variant states.\n      // The keys will need to be exactly the same, and the child will not need to\n      // define `initial`, `animate` or `exit` variants on the component.\n      backdrop: {\n        enter: {\n          // For the opacity we need to use the default value here. Framer motion would complain\n          // about too complex values, when transitioning from two custom property values within\n          // an rgba value apparently.\n          opacity: 1,\n          transition: {\n            duration,\n            ease: fadeInEasing,\n          },\n        },\n        exit: {\n          opacity: 0,\n          transition: {\n            duration,\n            ease: fadeOutEasing,\n          },\n        },\n      },\n      modal: {\n        enter: {\n          y: 0,\n          scale: 1,\n          transition: {\n            duration,\n            ease: fadeInEasing,\n          },\n        },\n        exit: {\n          y: '5px',\n          scale: 0.98,\n          transition: {\n            duration,\n            ease: fadeInEasing,\n          },\n        },\n      },\n    };\n  }, [reducedMotion]);\n\n  return (\n    <OverlayContainer\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...overlayContainerProps}\n      data-dt-component={dtComponentName}\n    >\n      {show && <div data-modal-scroll-lock=\"\" style={{ display: 'none' }} />}\n      <AnimatePresence>\n        {show && (\n          <motion.div\n            className={styles.backdrop}\n            variants={animationVariants.backdrop}\n            initial=\"exit\"\n            animate=\"enter\"\n            exit=\"exit\"\n            ref={forwardedRef}\n            onPointerDown={(event: ReactMouseEvent) => {\n              if (event.target === event.currentTarget && dismissible) {\n                // The useOverlay hook keeps an internal state of the stacked overlays.\n                // However, some overlays don't rely on the hook; hence the list isn't complete\n                // and the overlay is dismissed when clicking on any not registered overlay.\n                // (e.g. Microguide would not influence the dismissing but can't be added to\n                // the list either, because it is always on top and shouldn't be closed)\n                // Therefore, the sheet is manually dismissed on backdrop click.\n                // This topic will be revisited and aligned with the Overlay Rework (APPDEV-3373).\n                onDismiss?.();\n              }\n            }}\n          >\n            <FocusScope contain autoFocus>\n              <motion.div\n                // The react-aria spread needs to be cast to Record<string, any|unknown> as there\n                // is a mismatch between lib.dom HTMLElement and the react-synthetic\n                // event\n                {...(overlayProps as Record<string, unknown>)}\n                {...(dialogProps as Record<string, unknown>)}\n                {...(titleProps as Record<string, unknown>)}\n                className={clsx(\n                  styles.base,\n                  styles.sizes[size],\n                  consumerClassName,\n                )}\n                style={consumerStyle}\n                ref={ref}\n                variants={animationVariants.modal}\n                {...remainingProps}\n              >\n                <OverlayStackingProvider>{children}</OverlayStackingProvider>\n              </motion.div>\n            </FocusScope>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </OverlayContainer>\n  );\n});\n\n(BaseModal as typeof BaseModal & { displayName: string }).displayName =\n  'BaseModal';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n  Variants,\n} from 'framer-motion';\nimport {\n  forwardRef,\n  useMemo,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\n\nimport * as styles from './Modal.sty.js';\nimport type { ModalSizeOptionsType } from './types.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport {\n  fadeInEasing,\n  fadeOutEasing,\n} from '../../core/utils/framer-motion-easings.js';\nimport { useDialog } from '../hooks/useDialog.js';\nimport { useOverlay } from '../hooks/useOverlay.js';\n\n/**\n * @public\n */\nexport interface BaseModalProps\n  extends AriaLabelingProps,\n    WithChildren,\n    DataTestId,\n    MaskingProps,\n    StylingProps {\n  /**\n   * Controls when the modal is shown.\n   * @defaultValue false\n   */\n  show?: boolean;\n  /**\n   * Sets the size of the modal.\n   * @defaultValue 'medium'\n   */\n  size?: ModalSizeOptionsType;\n  /** Handler function that is called when the modal is closed. */\n  onDismiss?: () => void;\n  /**\n   * Determines if you can click the backdrop to dismiss the modal.\n   * If true, pressing \"ESC\" also dismisses the modal.\n   * @defaultValue true\n   */\n  dismissible?: boolean;\n}\n\n// #endregion\n\n/**\n * BaseModal component\n * @internal\n */\nexport const BaseModal = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  BaseModalProps & /**\n   * Allows behavior tracking. This is a temporal solution and will be replaced by a hook.\n   */ { 'data-dt-component'?: string }\n>((props, forwardedRef) => {\n  const {\n    show = false,\n    size = 'medium',\n    children,\n    onDismiss,\n    dismissible = true,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-dt-component': dtComponentName,\n    ...remainingProps\n  } = props;\n\n  const ref = useRef(null);\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps } = useOverlay(\n    {\n      ...props,\n      onClose: () => {\n        onDismiss?.();\n      },\n      isOpen: show,\n      isKeyboardDismissDisabled: !dismissible,\n    },\n    ref,\n  );\n\n  // adds all aria labels to title and dialog as well as tabindex & role\n  const { dialogProps, titleProps } = useDialog(remainingProps);\n\n  const overlayContainerProps = useOverlayStacking(undefined, 'overlay');\n\n  const reducedMotion = useReducedMotion();\n\n  /** Animation variants */\n  const animationVariants = useMemo<Record<string, Variants>>(() => {\n    const duration = reducedMotion ? 0 : AnimationsJS.FadeIn.Duration.Fast;\n    return {\n      // When animating AnimatePresence where child components\n      // will also need to transform, they can share the same enter/exit variant states.\n      // The keys will need to be exactly the same, and the child will not need to\n      // define `initial`, `animate` or `exit` variants on the component.\n      backdrop: {\n        enter: {\n          [styles.backdropOpacityVar]: 1,\n          transition: {\n            duration,\n            ease: fadeInEasing,\n          },\n        },\n        exit: {\n          [styles.backdropOpacityVar]: 0,\n          transition: {\n            duration,\n            ease: fadeOutEasing,\n          },\n        },\n      },\n      modal: {\n        enter: {\n          y: 0,\n          scale: 1,\n          transition: {\n            duration,\n            ease: fadeInEasing,\n          },\n        },\n        exit: {\n          y: '5px',\n          scale: 0.98,\n          transition: {\n            duration,\n            ease: fadeInEasing,\n          },\n        },\n      },\n    };\n  }, [reducedMotion]);\n\n  return (\n    <OverlayContainer\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...overlayContainerProps}\n      data-dt-component={dtComponentName}\n    >\n      {show && <div data-modal-scroll-lock=\"\" style={{ display: 'none' }} />}\n      <AnimatePresence>\n        {show && (\n          <motion.div\n            className={styles.backdrop}\n            variants={animationVariants.backdrop}\n            initial=\"exit\"\n            animate=\"enter\"\n            exit=\"exit\"\n            ref={forwardedRef}\n            onPointerDown={(event: ReactMouseEvent) => {\n              if (event.target === event.currentTarget && dismissible) {\n                // The useOverlay hook keeps an internal state of the stacked overlays.\n                // However, some overlays don't rely on the hook; hence the list isn't complete\n                // and the overlay is dismissed when clicking on any not registered overlay.\n                // (e.g. Microguide would not influence the dismissing but can't be added to\n                // the list either, because it is always on top and shouldn't be closed)\n                // Therefore, the sheet is manually dismissed on backdrop click.\n                // This topic will be revisited and aligned with the Overlay Rework (APPDEV-3373).\n                onDismiss?.();\n              }\n            }}\n          >\n            <FocusScope contain autoFocus>\n              <motion.div\n                // The react-aria spread needs to be cast to Record<string, any|unknown> as there\n                // is a mismatch between lib.dom HTMLElement and the react-synthetic\n                // event\n                {...(overlayProps as Record<string, unknown>)}\n                {...(dialogProps as Record<string, unknown>)}\n                {...(titleProps as Record<string, unknown>)}\n                className={clsx(\n                  styles.base,\n                  styles.sizes[size],\n                  consumerClassName,\n                )}\n                style={consumerStyle}\n                ref={ref}\n                variants={animationVariants.modal}\n                {...remainingProps}\n              >\n                <OverlayStackingProvider>{children}</OverlayStackingProvider>\n              </motion.div>\n            </FocusScope>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </OverlayContainer>\n  );\n});\n\n(BaseModal as typeof BaseModal & { displayName: string }).displayName =\n  'BaseModal';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/overlays/modal/Modal.css

@@ -1,4 +1,4 @@
-._dmotjm0-3-11-3 {
+._dmotjm0-3-12-0 {
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -12,19 +12,19 @@
   overflow-y: auto;
   overscroll-behavior: contain;
 }
-._dmotjm1-3-11-3 {
+._dmotjm1-3-12-0 {
   max-width: 576px;
 }
-._dmotjm2-3-11-3 {
+._dmotjm2-3-12-0 {
   max-width: 768px;
 }
-._dmotjm3-3-11-3 {
+._dmotjm3-3-12-0 {
   max-width: 1280px;
 }
 body:has([data-modal-scroll-lock]) {
   overflow: hidden;
 }
-._dmotjm4-3-11-3 {
+._dmotjm4-3-12-0 {
   position: fixed;
   top: 0;
   left: 0;
@@ -34,34 +34,35 @@ body:has([data-modal-scroll-lock]) {
   justify-content: center;
   align-items: center;
   background: var(--dt-colors-background-surface-backdrop, #f9f9facc);
+  opacity: var(--strato-modal-fade-opacity, 1);
   z-index: var(--dt-elevations-default, 1);
 }
-._dmotjm5-3-11-3 {
+._dmotjm5-3-12-0 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--dt-spacings-size-8, 8px);
   padding: var(--dt-spacings-size-16, 16px) var(--dt-spacings-size-16, 16px) var(--dt-spacings-size-8, 8px);
 }
-._dmotjm6-3-11-3 {
+._dmotjm6-3-12-0 {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-16, 16px);
 }
-._dmotjm7-3-11-3 {
+._dmotjm7-3-12-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-16, 16px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._dmotjm8-3-11-3 {
+._dmotjm8-3-12-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-16, 16px);
   padding-bottom: var(--dt-spacings-size-24, 24px);
 }
-._dmotjm9-3-11-3 {
+._dmotjm9-3-12-0 {
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
@@ -71,27 +72,27 @@ body:has([data-modal-scroll-lock]) {
   padding-right: var(--dt-spacings-size-16, 16px);
 }
 @supports not (height: 1dvh) {
-  ._dmotjm0-3-11-3 {
+  ._dmotjm0-3-12-0 {
     max-height: 96vh;
   }
 }
 @media screen and (min-width: 641px) {
-  ._dmotjm5-3-11-3 {
+  ._dmotjm5-3-12-0 {
     padding: var(--dt-spacings-size-16, 16px) var(--dt-spacings-size-24, 24px) var(--dt-spacings-size-8, 8px);
   }
-  ._dmotjm6-3-11-3 {
+  ._dmotjm6-3-12-0 {
     padding-left: var(--dt-spacings-size-24, 24px);
     padding-right: var(--dt-spacings-size-24, 24px);
   }
-  ._dmotjm7-3-11-3 {
+  ._dmotjm7-3-12-0 {
     padding-left: var(--dt-spacings-size-24, 24px);
     padding-right: var(--dt-spacings-size-24, 24px);
   }
-  ._dmotjm8-3-11-3 {
+  ._dmotjm8-3-12-0 {
     padding-left: var(--dt-spacings-size-24, 24px);
     padding-right: var(--dt-spacings-size-24, 24px);
   }
-  ._dmotjm9-3-11-3 {
+  ._dmotjm9-3-12-0 {
     padding-left: var(--dt-spacings-size-24, 24px);
     padding-right: var(--dt-spacings-size-24, 24px);
   }

package/esm/overlays/modal/Modal.sty.js

@@ -1,13 +1,15 @@
 import "./Modal.css";
-var backdrop = "_dmotjm4-3-11-3";
-var base = "_dmotjm0-3-11-3";
-var content = { withFooter: "_dmotjm7-3-11-3", withoutFooter: "_dmotjm8-3-11-3" };
-var dividerWrapper = "_dmotjm6-3-11-3";
-var footerSection = "_dmotjm9-3-11-3";
-var header = "_dmotjm5-3-11-3";
-var sizes = { small: "_dmotjm1-3-11-3", medium: "_dmotjm2-3-11-3", large: "_dmotjm3-3-11-3" };
+var backdrop = "_dmotjm4-3-12-0";
+var backdropOpacityVar = "--strato-modal-fade-opacity";
+var base = "_dmotjm0-3-12-0";
+var content = { withFooter: "_dmotjm7-3-12-0", withoutFooter: "_dmotjm8-3-12-0" };
+var dividerWrapper = "_dmotjm6-3-12-0";
+var footerSection = "_dmotjm9-3-12-0";
+var header = "_dmotjm5-3-12-0";
+var sizes = { small: "_dmotjm1-3-12-0", medium: "_dmotjm2-3-12-0", large: "_dmotjm3-3-12-0" };
 export {
   backdrop,
+  backdropOpacityVar,
   base,
   content,
   dividerWrapper,

package/esm/overlays/modal/Modal.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/modal/Modal.css.ts"],
-  "sourcesContent": ["import './Modal.css';\nexport var backdrop = '_dmotjm4-3-11-3';\nexport var base = '_dmotjm0-3-11-3';\nexport var content = {withFooter:'_dmotjm7-3-11-3',withoutFooter:'_dmotjm8-3-11-3'};\nexport var dividerWrapper = '_dmotjm6-3-11-3';\nexport var footerSection = '_dmotjm9-3-11-3';\nexport var header = '_dmotjm5-3-11-3';\nexport var sizes = {small:'_dmotjm1-3-11-3',medium:'_dmotjm2-3-11-3',large:'_dmotjm3-3-11-3'};"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,OAAO;AACX,IAAI,UAAU,EAAC,YAAW,mBAAkB,eAAc,kBAAiB;AAC3E,IAAI,iBAAiB;AACrB,IAAI,gBAAgB;AACpB,IAAI,SAAS;AACb,IAAI,QAAQ,EAAC,OAAM,mBAAkB,QAAO,mBAAkB,OAAM,kBAAiB;",
+  "sourcesContent": ["import './Modal.css';\nexport var backdrop = '_dmotjm4-3-12-0';\nexport var backdropOpacityVar = '--strato-modal-fade-opacity';\nexport var base = '_dmotjm0-3-12-0';\nexport var content = {withFooter:'_dmotjm7-3-12-0',withoutFooter:'_dmotjm8-3-12-0'};\nexport var dividerWrapper = '_dmotjm6-3-12-0';\nexport var footerSection = '_dmotjm9-3-12-0';\nexport var header = '_dmotjm5-3-12-0';\nexport var sizes = {small:'_dmotjm1-3-12-0',medium:'_dmotjm2-3-12-0',large:'_dmotjm3-3-12-0'};"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,qBAAqB;AACzB,IAAI,OAAO;AACX,IAAI,UAAU,EAAC,YAAW,mBAAkB,eAAc,kBAAiB;AAC3E,IAAI,iBAAiB;AACrB,IAAI,gBAAgB;AACpB,IAAI,SAAS;AACb,IAAI,QAAQ,EAAC,OAAM,mBAAkB,QAAO,mBAAkB,OAAM,kBAAiB;",
   "names": []
 }

package/esm/overlays/overlay/Overlay.css

@@ -1,4 +1,4 @@
-._1dhu6810-3-11-3 {
+._1dhu6810-3-12-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);

package/esm/overlays/overlay/Overlay.sty.js

@@ -1,5 +1,5 @@
 import "./Overlay.css";
-var overlayCSS = "_1dhu6810-3-11-3";
+var overlayCSS = "_1dhu6810-3-12-0";
 export {
   overlayCSS
 };

package/esm/overlays/overlay/Overlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/overlay/Overlay.css.ts"],
-  "sourcesContent": ["import './Overlay.css';\nexport var overlayCSS = '_1dhu6810-3-11-3';"],
+  "sourcesContent": ["import './Overlay.css';\nexport var overlayCSS = '_1dhu6810-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/overlays/sheet/Sheet.css

@@ -1,4 +1,4 @@
-._d76u1n0-3-11-3 {
+._d76u1n0-3-12-0 {
   width: 100%;
   display: flex;
   justify-content: center;
@@ -7,7 +7,7 @@
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._d76u1n1-3-11-3 {
+._d76u1n1-3-12-0 {
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -25,16 +25,16 @@
   padding-bottom: var(--dt-spacings-size-16, 16px);
   margin-top: var(--dt-spacings-size-12, 12px);
 }
-._d76u1n1-3-11-3:after {
+._d76u1n1-3-12-0:after {
   content: "";
   display: block;
   padding-bottom: var(--dt-spacings-size-32, 32px);
 }
-._d76u1n2-3-11-3 {
+._d76u1n2-3-12-0 {
   overflow: auto;
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._d76u1n3-3-11-3 {
+._d76u1n3-3-12-0 {
   height: 100vh;
   position: fixed;
   top: 0;
@@ -43,12 +43,12 @@
   z-index: var(--dt-elevations-overlay, 20);
   background: var(--dt-colors-background-surface-backdrop, #f9f9facc);
 }
-._d76u1n4-3-11-3 {
+._d76u1n4-3-12-0 {
   word-break: normal;
   overflow-wrap: anywhere;
 }
 @media screen and (min-width: 641px) {
-  ._d76u1n1-3-11-3 {
+  ._d76u1n1-3-12-0 {
     padding-left: var(--dt-spacings-size-24, 24px);
     padding-right: var(--dt-spacings-size-12, 12px);
   }

package/esm/overlays/sheet/Sheet.sty.js

@@ -1,9 +1,9 @@
 import "./Sheet.css";
-var sheetBackdropCSS = "_d76u1n0-3-11-3";
-var sheetCSS = "_d76u1n1-3-11-3";
-var sheetHeadingCSS = "_d76u1n4-3-11-3";
-var sheetScrollableContainerCSS = "_d76u1n2-3-11-3";
-var sheetWrapperCSS = "_d76u1n3-3-11-3";
+var sheetBackdropCSS = "_d76u1n0-3-12-0";
+var sheetCSS = "_d76u1n1-3-12-0";
+var sheetHeadingCSS = "_d76u1n4-3-12-0";
+var sheetScrollableContainerCSS = "_d76u1n2-3-12-0";
+var sheetWrapperCSS = "_d76u1n3-3-12-0";
 export {
   sheetBackdropCSS,
   sheetCSS,