@dynatrace/strato-components 3.12.2 → 3.13.0

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

@@ -1,5 +1,5 @@
 import "./Overlay.css";
-var overlayCSS = "_1dhu6810-3-12-2";
+var overlayCSS = "_1dhu6810-3-13-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-12-2';"],
+  "sourcesContent": ["import './Overlay.css';\nexport var overlayCSS = '_1dhu6810-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/overlays/sheet/Sheet.css

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

package/esm/overlays/sheet/Sheet.js

@@ -25,7 +25,7 @@ import { useOverlayStacking } from "../../core/hooks/useOverlayStacking.js";
 import { OverlayStackingProvider } from "../../core/providers/OverlayStackingProvider.js";
 import { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from "../../core/utils/can-receive-default-text-format.js";
 import { attemptFocus as _attemptFocus } from "../../core/utils/focus-management/attempt-focus.js";
-import { getFirstFocusableChild as _getFirstFocusableChild } from "../../core/utils/focus-management/get-first-focusable-child.js";
+import { getFirstTabbableChild as _getFirstTabbableChild } from "../../core/utils/focus-management/get-first-tabbable-child.js";
 import {
   fadeInEasing,
   fadeOutEasing,
@@ -131,11 +131,11 @@ const Sheet = /* @__PURE__ */ forwardRef(
     const actionScopeRef = useRef(null);
     const focusFirstChildElement = () => {
       if (childrenScopeRef.current && actionScopeRef.current) {
-        let firstFocusableChild = _getFirstFocusableChild(
+        let firstFocusableChild = _getFirstTabbableChild(
           childrenScopeRef.current
         );
         if (!firstFocusableChild) {
-          firstFocusableChild = _getFirstFocusableChild(actionScopeRef.current);
+          firstFocusableChild = _getFirstTabbableChild(actionScopeRef.current);
         }
         firstFocusableChild && _attemptFocus(firstFocusableChild);
       }
@@ -187,7 +187,7 @@ const Sheet = /* @__PURE__ */ forwardRef(
                       {
                         ..._mergeProps(overlayProps, dialogProps, {
                           style: breakpointStyle
-                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                          // oxlint-disable-next-line typescript/no-explicit-any
                         }),
                         className: sheetCSS,
                         "data-ismodal": true,
@@ -206,6 +206,7 @@ const Sheet = /* @__PURE__ */ forwardRef(
                           motion.div,
                           {
                             className: sheetScrollableContainerCSS,
+                            tabIndex: -1,
                             style: { height: `calc(100% - ${topoffset}px)` },
                             variants: animationVariants.content,
                             initial: "exitFade",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/sheet/Sheet.tsx"],
-  "sourcesContent": ["import { AnimatePresence, motion, Variants } from 'framer-motion';\nimport {\n  type CSSProperties,\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\n\nimport { calculateBreakpointFromContainerSize } from './sheet-container-utils.js';\nimport {\n  sheetBackdropCSS,\n  sheetCSS,\n  sheetHeadingCSS,\n  sheetScrollableContainerCSS,\n  sheetWrapperCSS,\n} from './Sheet.sty.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport { 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 { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { attemptFocus as _attemptFocus } from '../../core/utils/focus-management/attempt-focus.js';\nimport { getFirstFocusableChild as _getFirstFocusableChild } from '../../core/utils/focus-management/get-first-focusable-child.js';\nimport {\n  fadeInEasing,\n  fadeOutEasing,\n  slideInEasing,\n  slideOutEasing,\n} from '../../core/utils/framer-motion-easings.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Heading } from '../../typography/heading/Heading.js';\nimport { useDialog } from '../hooks/useDialog.js';\nimport { useOverlay } from '../hooks/useOverlay.js';\n\nconst COMPONENT_NAME = 'Sheet';\n\n/**\n * @public\n */\nexport interface SheetProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** The title which is displayed at the top of the sheet. */\n  title?: string | ReactElement;\n\n  /**\n   * Toggles the visibility of the sheet component.\n   * @defaultValue false\n   */\n  show?: boolean;\n\n  /**\n   * The offset to the top of the App which should not be covered.\n   * @defaultValue 28\n   */\n  topoffset?: number;\n\n  /**\n   * Actions will be rendered to the top right, next to the title.\n   * They usually contain buttons like 'Apply' or 'Cancel'.\n   */\n  actions?: ReactNode;\n\n  /** Handler that is only called if the sheet is closed with the Escape key. */\n  onDismiss?: () => void;\n}\n\n/** Animation variants */\nconst getAnimationVariants = (topOffset: number): Record<string, Variants> => ({\n  backdrop: {\n    enterBackdrop: {\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.FadeIn.Duration.Fast,\n        ease: fadeInEasing,\n      },\n    },\n    exitBackdrop: {\n      opacity: 0,\n      transition: {\n        duration: AnimationsJS.FadeOut.Duration.Fast,\n        ease: fadeOutEasing,\n        delay: AnimationsJS.FadeOut.Duration.Base,\n      },\n    },\n  },\n  sheet: {\n    enterSlide: {\n      top: topOffset,\n      opacity: 1,\n      transition: {\n        duration: AnimationsJS.SlideIn.Duration.Slow,\n        ease: slideInEasing,\n      },\n    },\n    exitSlide: () => ({\n      top: `calc(${topOffset}px + 10%)`,\n      opacity: 0.3,\n      transition: {\n        duration: AnimationsJS.SlideOut.Duration.Slow,\n        ease: slideOutEasing,\n      },\n    }),\n  },\n  content: {\n    enterFade: {\n      opacity: 1,\n      transition: {\n        duration: AnimationsJS.SlideIn.Duration.Slow,\n        ease: fadeInEasing,\n      },\n    },\n    exitFade: {\n      opacity: 0,\n      transition: {\n        duration: AnimationsJS.SlideOut.Duration.Slow,\n        ease: fadeOutEasing,\n      },\n    },\n  },\n});\n\n/**\n * The `Sheet` component allows you to show additional content in an overlay of your\n * application. It is essential to add at least one focusable element\n * inside the `Sheet` to be keyboard accessible. If none is available the\n * focus will be lost and given to the `window.document` when opening the\n * sheet.\n *\n * The developer is responsible for the sheet's visibility via\n * the `show` prop. This prop must be updated to false in the `onDismiss`\n * callback to ensure keyboard accessibility.\n * @public\n */\nexport const Sheet = /* @__PURE__ */ forwardRef<HTMLDivElement, SheetProps>(\n  (props, forwardedRef) => {\n    const {\n      show = false,\n      title,\n      children,\n      onDismiss,\n      actions,\n      topoffset = 28,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n    const { 'aria-labelledby': ariaLabelledBy, ...ariaLabelingProps } =\n      _useAriaLabelingProps(remainingProps);\n\n    const ref = useRef(null);\n    const animationVariants = getAnimationVariants(topoffset);\n\n    // adds all aria labels to dialog as well as tabindex & role\n    const { dialogProps } = useDialog(remainingProps);\n\n    // Handle interacting outside the dialog and pressing the Escape key to\n    // close the sheet.\n    const { overlayProps } = useOverlay(\n      {\n        ...props,\n        onClose: () => {\n          onDismiss?.();\n        },\n        isOpen: show,\n        isDismissible: false,\n        isKeyboardDismissDisabled: false,\n      },\n      ref,\n    );\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    // Scope the passed children to be able to focus the first element of children\n    const childrenScopeRef = useRef<HTMLDivElement>(null);\n    const actionScopeRef = useRef<HTMLDivElement>(null);\n\n    const focusFirstChildElement = () => {\n      if (childrenScopeRef.current && actionScopeRef.current) {\n        let firstFocusableChild = _getFirstFocusableChild(\n          childrenScopeRef.current,\n        );\n\n        // If we do not find an interactive element in the children\n        // search for one in the actions.\n        if (!firstFocusableChild) {\n          firstFocusableChild = _getFirstFocusableChild(actionScopeRef.current);\n        }\n\n        firstFocusableChild &&\n          _attemptFocus(firstFocusableChild as HTMLElement);\n      }\n    };\n\n    // Get the ref from the grid container to calculate its size.\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const containerSize = useContainerSize(containerRef);\n\n    const mergedRef = useMergeRefs([containerRef, forwardedRef]);\n\n    const breakpointStyle = useMemo<CSSProperties>(\n      () => calculateBreakpointFromContainerSize(containerSize),\n      [containerSize],\n    );\n\n    const overlayContainerProps = useOverlayStacking(0, 'overlay');\n    const headingId = useId();\n\n    return (\n      <OverlayContainer\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        style={{ ...overlayContainerProps.style, ...consumerStyle }}\n        className={consumerClassName}\n        {...restProps}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <AnimatePresence>\n          {show && (\n            <motion.div\n              // Within this container the animation is rendered. The applied\n              // style contains an important overflow: hidden which prevents\n              // ugly moving scrollbars during the animation.\n              variants={animationVariants.backdrop}\n              initial=\"exitBackdrop\"\n              animate=\"enterBackdrop\"\n              exit=\"exitBackdrop\"\n              className={sheetWrapperCSS}\n            >\n              <div\n                // Transparent div which prevents the user from clicking\n                // main page elements on the left or right of the sheet.\n                ref={mergedRef}\n                onPointerDown={(event: ReactMouseEvent) => {\n                  if (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?.();\n                  }\n                }}\n                className={sheetBackdropCSS}\n              >\n                <FocusScope\n                  // If no focusable children are provided the default focus\n                  // is on the actions. This makes sense anyways and more\n                  // importantly is needed to even make a sheet without\n                  // focusable children dismissible with the Escape key.\n                  contain\n                >\n                  <motion.div\n                    // The react-aria spread needs to be cast to Record<string, any> as there\n                    // is a mismatch between lib.dom HTMLElement and the\n                    // react-synthetic event and spreads can only be applied on objects.\n                    {...(_mergeProps(overlayProps, dialogProps, {\n                      style: breakpointStyle,\n                      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                    }) as Record<string, any>)}\n                    className={sheetCSS}\n                    data-ismodal={true}\n                    variants={animationVariants.sheet}\n                    initial=\"exitSlide\"\n                    animate=\"enterSlide\"\n                    exit=\"exitSlide\"\n                    onAnimationComplete={() => {\n                      show && focusFirstChildElement();\n                      window.dispatchEvent(new Event('animationDone'));\n                    }}\n                    ref={ref}\n                    aria-labelledby={ariaLabelledBy ?? headingId}\n                    {...ariaLabelingProps}\n                  >\n                    <motion.div\n                      className={sheetScrollableContainerCSS}\n                      style={{ height: `calc(100% - ${topoffset}px)` }}\n                      variants={animationVariants.content}\n                      initial=\"exitFade\"\n                      animate=\"enterFade\"\n                      exit=\"exitFade\"\n                    >\n                      <OverlayStackingProvider>\n                        <Flex gap={16} flexDirection=\"column\" height=\"100%\">\n                          {(title || actions) && (\n                            <Flex\n                              justifyContent={\n                                title ? 'space-between' : 'flex-end'\n                              }\n                              alignItems=\"flex-start\"\n                            >\n                              {title &&\n                                (_canReceiveDefaultTextFormat(title) ? (\n                                  <Heading\n                                    level={5}\n                                    as=\"h2\"\n                                    id={headingId}\n                                    className={sheetHeadingCSS}\n                                  >\n                                    {title}\n                                  </Heading>\n                                ) : (\n                                  <div\n                                    style={{ display: 'contents' }}\n                                    id={headingId}\n                                  >\n                                    {title}\n                                  </div>\n                                ))}\n                              {actions && (\n                                <Flex\n                                  flexWrap=\"wrap\"\n                                  justifyContent=\"flex-end\"\n                                  ref={actionScopeRef}\n                                >\n                                  {actions}\n                                </Flex>\n                              )}\n                            </Flex>\n                          )}\n                          <div\n                            ref={childrenScopeRef}\n                            style={{\n                              position: 'relative',\n                              height: '100%',\n                              minHeight: 0,\n                            }}\n                          >\n                            {children}\n                          </div>\n                        </Flex>\n                      </OverlayStackingProvider>\n                    </motion.div>\n                  </motion.div>\n                </FocusScope>\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </OverlayContainer>\n    );\n  },\n);\n(Sheet as typeof Sheet & { displayName: string }).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { AnimatePresence, motion, Variants } from 'framer-motion';\nimport {\n  type CSSProperties,\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\n\nimport { calculateBreakpointFromContainerSize } from './sheet-container-utils.js';\nimport {\n  sheetBackdropCSS,\n  sheetCSS,\n  sheetHeadingCSS,\n  sheetScrollableContainerCSS,\n  sheetWrapperCSS,\n} from './Sheet.sty.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport { 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 { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { attemptFocus as _attemptFocus } from '../../core/utils/focus-management/attempt-focus.js';\nimport { getFirstTabbableChild as _getFirstTabbableChild } from '../../core/utils/focus-management/get-first-tabbable-child.js';\nimport {\n  fadeInEasing,\n  fadeOutEasing,\n  slideInEasing,\n  slideOutEasing,\n} from '../../core/utils/framer-motion-easings.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Heading } from '../../typography/heading/Heading.js';\nimport { useDialog } from '../hooks/useDialog.js';\nimport { useOverlay } from '../hooks/useOverlay.js';\n\nconst COMPONENT_NAME = 'Sheet';\n\n/**\n * @public\n */\nexport interface SheetProps\n  extends\n    WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** The title which is displayed at the top of the sheet. */\n  title?: string | ReactElement;\n\n  /**\n   * Toggles the visibility of the sheet component.\n   * @defaultValue false\n   */\n  show?: boolean;\n\n  /**\n   * The offset to the top of the App which should not be covered.\n   * @defaultValue 28\n   */\n  topoffset?: number;\n\n  /**\n   * Actions will be rendered to the top right, next to the title.\n   * They usually contain buttons like 'Apply' or 'Cancel'.\n   */\n  actions?: ReactNode;\n\n  /** Handler that is only called if the sheet is closed with the Escape key. */\n  onDismiss?: () => void;\n}\n\n/** Animation variants */\nconst getAnimationVariants = (topOffset: number): Record<string, Variants> => ({\n  backdrop: {\n    enterBackdrop: {\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.FadeIn.Duration.Fast,\n        ease: fadeInEasing,\n      },\n    },\n    exitBackdrop: {\n      opacity: 0,\n      transition: {\n        duration: AnimationsJS.FadeOut.Duration.Fast,\n        ease: fadeOutEasing,\n        delay: AnimationsJS.FadeOut.Duration.Base,\n      },\n    },\n  },\n  sheet: {\n    enterSlide: {\n      top: topOffset,\n      opacity: 1,\n      transition: {\n        duration: AnimationsJS.SlideIn.Duration.Slow,\n        ease: slideInEasing,\n      },\n    },\n    exitSlide: () => ({\n      top: `calc(${topOffset}px + 10%)`,\n      opacity: 0.3,\n      transition: {\n        duration: AnimationsJS.SlideOut.Duration.Slow,\n        ease: slideOutEasing,\n      },\n    }),\n  },\n  content: {\n    enterFade: {\n      opacity: 1,\n      transition: {\n        duration: AnimationsJS.SlideIn.Duration.Slow,\n        ease: fadeInEasing,\n      },\n    },\n    exitFade: {\n      opacity: 0,\n      transition: {\n        duration: AnimationsJS.SlideOut.Duration.Slow,\n        ease: fadeOutEasing,\n      },\n    },\n  },\n});\n\n/**\n * The `Sheet` component allows you to show additional content in an overlay of your\n * application. It is essential to add at least one focusable element\n * inside the `Sheet` to be keyboard accessible. If none is available the\n * focus will be lost and given to the `window.document` when opening the\n * sheet.\n *\n * The developer is responsible for the sheet's visibility via\n * the `show` prop. This prop must be updated to false in the `onDismiss`\n * callback to ensure keyboard accessibility.\n * @public\n */\nexport const Sheet = /* @__PURE__ */ forwardRef<HTMLDivElement, SheetProps>(\n  (props, forwardedRef) => {\n    const {\n      show = false,\n      title,\n      children,\n      onDismiss,\n      actions,\n      topoffset = 28,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n    const { 'aria-labelledby': ariaLabelledBy, ...ariaLabelingProps } =\n      _useAriaLabelingProps(remainingProps);\n\n    const ref = useRef(null);\n    const animationVariants = getAnimationVariants(topoffset);\n\n    // adds all aria labels to dialog as well as tabindex & role\n    const { dialogProps } = useDialog(remainingProps);\n\n    // Handle interacting outside the dialog and pressing the Escape key to\n    // close the sheet.\n    const { overlayProps } = useOverlay(\n      {\n        ...props,\n        onClose: () => {\n          onDismiss?.();\n        },\n        isOpen: show,\n        isDismissible: false,\n        isKeyboardDismissDisabled: false,\n      },\n      ref,\n    );\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    // Scope the passed children to be able to focus the first element of children\n    const childrenScopeRef = useRef<HTMLDivElement>(null);\n    const actionScopeRef = useRef<HTMLDivElement>(null);\n\n    const focusFirstChildElement = () => {\n      if (childrenScopeRef.current && actionScopeRef.current) {\n        let firstFocusableChild = _getFirstTabbableChild(\n          childrenScopeRef.current,\n        );\n\n        // If we do not find an interactive element in the children\n        // search for one in the actions.\n        if (!firstFocusableChild) {\n          firstFocusableChild = _getFirstTabbableChild(actionScopeRef.current);\n        }\n\n        firstFocusableChild &&\n          _attemptFocus(firstFocusableChild as HTMLElement);\n      }\n    };\n\n    // Get the ref from the grid container to calculate its size.\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const containerSize = useContainerSize(containerRef);\n\n    const mergedRef = useMergeRefs([containerRef, forwardedRef]);\n\n    const breakpointStyle = useMemo<CSSProperties>(\n      () => calculateBreakpointFromContainerSize(containerSize),\n      [containerSize],\n    );\n\n    const overlayContainerProps = useOverlayStacking(0, 'overlay');\n    const headingId = useId();\n\n    return (\n      <OverlayContainer\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        style={{ ...overlayContainerProps.style, ...consumerStyle }}\n        className={consumerClassName}\n        {...restProps}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <AnimatePresence>\n          {show && (\n            <motion.div\n              // Within this container the animation is rendered. The applied\n              // style contains an important overflow: hidden which prevents\n              // ugly moving scrollbars during the animation.\n              variants={animationVariants.backdrop}\n              initial=\"exitBackdrop\"\n              animate=\"enterBackdrop\"\n              exit=\"exitBackdrop\"\n              className={sheetWrapperCSS}\n            >\n              <div\n                // Transparent div which prevents the user from clicking\n                // main page elements on the left or right of the sheet.\n                ref={mergedRef}\n                onPointerDown={(event: ReactMouseEvent) => {\n                  if (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?.();\n                  }\n                }}\n                className={sheetBackdropCSS}\n              >\n                <FocusScope\n                  // If no focusable children are provided the default focus\n                  // is on the actions. This makes sense anyways and more\n                  // importantly is needed to even make a sheet without\n                  // focusable children dismissible with the Escape key.\n                  contain\n                >\n                  <motion.div\n                    // The react-aria spread needs to be cast to Record<string, any> as there\n                    // is a mismatch between lib.dom HTMLElement and the\n                    // react-synthetic event and spreads can only be applied on objects.\n                    {...(_mergeProps(overlayProps, dialogProps, {\n                      style: breakpointStyle,\n                      // oxlint-disable-next-line typescript/no-explicit-any\n                    }) as Record<string, any>)}\n                    className={sheetCSS}\n                    data-ismodal={true}\n                    variants={animationVariants.sheet}\n                    initial=\"exitSlide\"\n                    animate=\"enterSlide\"\n                    exit=\"exitSlide\"\n                    onAnimationComplete={() => {\n                      show && focusFirstChildElement();\n                      window.dispatchEvent(new Event('animationDone'));\n                    }}\n                    ref={ref}\n                    aria-labelledby={ariaLabelledBy ?? headingId}\n                    {...ariaLabelingProps}\n                  >\n                    <motion.div\n                      className={sheetScrollableContainerCSS}\n                      // Chrome turns an overflowing scroll container into a\n                      // keyboard focusable element when it has no focusable\n                      // descendants. That would add a tab stop on the sheet\n                      // body itself, so opt out explicitly \u2014 the same way\n                      // `useDialog` does for the sheet surface.\n                      tabIndex={-1}\n                      style={{ height: `calc(100% - ${topoffset}px)` }}\n                      variants={animationVariants.content}\n                      initial=\"exitFade\"\n                      animate=\"enterFade\"\n                      exit=\"exitFade\"\n                    >\n                      <OverlayStackingProvider>\n                        <Flex gap={16} flexDirection=\"column\" height=\"100%\">\n                          {(title || actions) && (\n                            <Flex\n                              justifyContent={\n                                title ? 'space-between' : 'flex-end'\n                              }\n                              alignItems=\"flex-start\"\n                            >\n                              {title &&\n                                (_canReceiveDefaultTextFormat(title) ? (\n                                  <Heading\n                                    level={5}\n                                    as=\"h2\"\n                                    id={headingId}\n                                    className={sheetHeadingCSS}\n                                  >\n                                    {title}\n                                  </Heading>\n                                ) : (\n                                  <div\n                                    style={{ display: 'contents' }}\n                                    id={headingId}\n                                  >\n                                    {title}\n                                  </div>\n                                ))}\n                              {actions && (\n                                <Flex\n                                  flexWrap=\"wrap\"\n                                  justifyContent=\"flex-end\"\n                                  ref={actionScopeRef}\n                                >\n                                  {actions}\n                                </Flex>\n                              )}\n                            </Flex>\n                          )}\n                          <div\n                            ref={childrenScopeRef}\n                            style={{\n                              position: 'relative',\n                              height: '100%',\n                              minHeight: 0,\n                            }}\n                          >\n                            {children}\n                          </div>\n                        </Flex>\n                      </OverlayStackingProvider>\n                    </motion.div>\n                  </motion.div>\n                </FocusScope>\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </OverlayContainer>\n    );\n  },\n);\n(Sheet as typeof Sheet & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/sheet/Sheet.css.ts"],
-  "sourcesContent": ["import './Sheet.css';\nexport var sheetBackdropCSS = '_d76u1n0-3-12-2';\nexport var sheetCSS = '_d76u1n1-3-12-2';\nexport var sheetHeadingCSS = '_d76u1n4-3-12-2';\nexport var sheetScrollableContainerCSS = '_d76u1n2-3-12-2';\nexport var sheetWrapperCSS = '_d76u1n3-3-12-2';"],
+  "sourcesContent": ["import './Sheet.css';\nexport var sheetBackdropCSS = '_d76u1n0-3-13-0';\nexport var sheetCSS = '_d76u1n1-3-13-0';\nexport var sheetHeadingCSS = '_d76u1n4-3-13-0';\nexport var sheetScrollableContainerCSS = '_d76u1n2-3-13-0';\nexport var sheetWrapperCSS = '_d76u1n3-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,WAAW;AACf,IAAI,kBAAkB;AACtB,IAAI,8BAA8B;AAClC,IAAI,kBAAkB;",
   "names": []
 }

package/esm/overlays/tooltip/Tooltip.js

@@ -72,7 +72,7 @@ const Tooltip = /* @__PURE__ */ forwardRef(
         }
         return () => closeTooltip();
       },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // oxlint-disable-next-line react-hooks/exhaustive-deps
       []
     );
     useEffect(() => {

package/esm/overlays/tooltip/Tooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/tooltip/Tooltip.tsx"],
-  "sourcesContent": ["import { useReducedMotion } from 'framer-motion';\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { TooltipProps } from './tooltip.types.js';\nimport { TooltipElement } from './TooltipElement.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useModality } from '../../core/hooks/useModality.js';\nimport { usePoliteContainer } from '../hooks/usePoliteContainer.js';\nimport { useTooltipState } from '../hooks/useTooltipState.js';\n\nconst COMPONENT_NAME = 'Tooltip';\n\n/**\n * Use the `Tooltip` component to display extra information when users hover on a trigger element.\n * @public\n */\nexport const Tooltip = /* @__PURE__ */ forwardRef<HTMLDivElement, TooltipProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      text,\n      placement = 'top',\n      open,\n      defaultOpen,\n      onOpenChange,\n      delay = 'default',\n      disabled,\n      id: propId,\n      fallbackPlacements,\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const {\n      'data-dt-name': dataDtName = 'Trigger',\n      ...remainingBehavioralTrackingProps\n    } = behavioralTrackingProps;\n\n    const generatedId = useId();\n    const id = propId ?? generatedId;\n    const shouldReduceMotion = useReducedMotion();\n\n    const {\n      isOpen,\n      open: openTooltip,\n      close: closeTooltip,\n    } = useTooltipState({\n      open,\n      defaultOpen,\n      onOpenChange,\n      delay: shouldReduceMotion || delay === 'none' ? 0 : undefined,\n    });\n\n    const tooltipWrapperRef = useRef<HTMLSpanElement | null>(null);\n    const [tooltipReferenceElement, setTooltipReferenceElement] = useState<\n      Element | undefined\n    >(undefined);\n\n    /**\n     * The tooltip/popper needs a reference element for positioning. As display contents on the span wrapper is necessary\n     * to not interfere with flow content of any layout parent, this will invalidate any getBoundingClientRect() results on\n     * the wrapping span. That is why we pass the first child element instead. Since the first child element could change\n     * dynamically, we need to watch for changes in the DOM, to ensure the tooltip always has a reference element.\n     */\n    const mutationObserverRef = useRef(\n      new MutationObserver((entries) => {\n        for (const entry of entries) {\n          const firstNode = entry.addedNodes.item(0);\n          if (\n            entry.type === 'childList' &&\n            firstNode !== null &&\n            firstNode instanceof Element &&\n            firstNode !== tooltipReferenceElement\n          ) {\n            setTooltipReferenceElement(firstNode);\n          }\n        }\n      }),\n    );\n\n    useEffect(\n      () => {\n        if (tooltipWrapperRef.current) {\n          setTooltipReferenceElement(tooltipWrapperRef.current?.children?.[0]);\n          mutationObserverRef.current.observe(tooltipWrapperRef.current, {\n            childList: true,\n            subtree: false, // only observe changes in the direct children of the wrapper, not deeper in the DOM\n          });\n        }\n\n        return () => closeTooltip();\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // If disabled switches to true at runtime and a tooltip is shown, it should\n    // close immediately\n    useEffect(() => {\n      if (disabled) {\n        closeTooltip();\n      }\n    }, [closeTooltip, disabled]);\n\n    const isTooltipHovered = useRef(false);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => e.code === 'Escape' && closeTooltip(),\n      [closeTooltip],\n    );\n\n    useEffect(() => {\n      document.addEventListener('keydown', handleKeyDown);\n\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown);\n      };\n    }, [handleKeyDown]);\n\n    // Create a singleton container with live region attribute to read the contents\n    // of the tooltip when it pops up\n    const PoliteContainer = usePoliteContainer();\n\n    const modality = useModality();\n\n    return (\n      <>\n        <span\n          style={{\n            // Safari has currently an outstanding issue that results in content\n            // being inaccessible, when rendered within a display: contents.\n            display: 'contents',\n          }}\n          ref={tooltipWrapperRef}\n          onMouseEnter={() => !disabled && openTooltip()}\n          onMouseLeave={() =>\n            // we need to wrap this in a requestAnimationFrame to be able to first set the isTooltipHovered state correctly in case the TooltipElement (including the gap) is hovered\n            // if we don't, the tooltip is closed before the onMouseOver event of the TooltipElement is triggered (to set the right state), as the onMouseLeave of the tooltip trigger would be queued up afterwards\n            requestAnimationFrame(() => {\n              if (!disabled && !isTooltipHovered.current) {\n                closeTooltip();\n              }\n            })\n          }\n          onFocus={() =>\n            !disabled &&\n            modality !== 'pointer' &&\n            modality !== 'touch' &&\n            openTooltip(true)\n          }\n          onBlur={\n            () => !disabled && !isTooltipHovered.current && closeTooltip() // prevent closing when clicking on the gap\n          }\n          data-dt-name={dataDtName}\n          {...remainingBehavioralTrackingProps}\n          {...restProps}\n          data-dt-component={dataDtComponent}\n        >\n          {children}\n        </span>\n        <PoliteContainer>\n          {isOpen && (\n            <TooltipElement\n              ref={forwardedRef}\n              triggerElement={tooltipReferenceElement}\n              placement={placement}\n              fallbackPlacements={fallbackPlacements}\n              id={id}\n              data-testid={dataTestId}\n              data-dtrum-mask={dataDtrumMask}\n              data-dtrum-allow={dataDtrumAllow}\n              className={consumerClassName}\n              style={consumerStyle}\n              onMouseLeave={(event) =>\n                !disabled &&\n                // only close the tooltip if the mouse isn't over the trigger element\n                event.relatedTarget !== tooltipReferenceElement &&\n                closeTooltip()\n              }\n              onTooltipHovered={(isHovered: boolean) =>\n                (isTooltipHovered.current = isHovered)\n              }\n              {...behavioralTrackingProps}\n              data-dt-component={dataDtComponent}\n            >\n              {text}\n            </TooltipElement>\n          )}\n        </PoliteContainer>\n      </>\n    );\n  },\n);\n(Tooltip as typeof Tooltip & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "sourcesContent": ["import { useReducedMotion } from 'framer-motion';\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { TooltipProps } from './tooltip.types.js';\nimport { TooltipElement } from './TooltipElement.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useModality } from '../../core/hooks/useModality.js';\nimport { usePoliteContainer } from '../hooks/usePoliteContainer.js';\nimport { useTooltipState } from '../hooks/useTooltipState.js';\n\nconst COMPONENT_NAME = 'Tooltip';\n\n/**\n * Use the `Tooltip` component to display extra information when users hover on a trigger element.\n * @public\n */\nexport const Tooltip = /* @__PURE__ */ forwardRef<HTMLDivElement, TooltipProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      text,\n      placement = 'top',\n      open,\n      defaultOpen,\n      onOpenChange,\n      delay = 'default',\n      disabled,\n      id: propId,\n      fallbackPlacements,\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const {\n      'data-dt-name': dataDtName = 'Trigger',\n      ...remainingBehavioralTrackingProps\n    } = behavioralTrackingProps;\n\n    const generatedId = useId();\n    const id = propId ?? generatedId;\n    const shouldReduceMotion = useReducedMotion();\n\n    const {\n      isOpen,\n      open: openTooltip,\n      close: closeTooltip,\n    } = useTooltipState({\n      open,\n      defaultOpen,\n      onOpenChange,\n      delay: shouldReduceMotion || delay === 'none' ? 0 : undefined,\n    });\n\n    const tooltipWrapperRef = useRef<HTMLSpanElement | null>(null);\n    const [tooltipReferenceElement, setTooltipReferenceElement] = useState<\n      Element | undefined\n    >(undefined);\n\n    /**\n     * The tooltip/popper needs a reference element for positioning. As display contents on the span wrapper is necessary\n     * to not interfere with flow content of any layout parent, this will invalidate any getBoundingClientRect() results on\n     * the wrapping span. That is why we pass the first child element instead. Since the first child element could change\n     * dynamically, we need to watch for changes in the DOM, to ensure the tooltip always has a reference element.\n     */\n    const mutationObserverRef = useRef(\n      new MutationObserver((entries) => {\n        for (const entry of entries) {\n          const firstNode = entry.addedNodes.item(0);\n          if (\n            entry.type === 'childList' &&\n            firstNode !== null &&\n            firstNode instanceof Element &&\n            firstNode !== tooltipReferenceElement\n          ) {\n            setTooltipReferenceElement(firstNode);\n          }\n        }\n      }),\n    );\n\n    useEffect(\n      () => {\n        if (tooltipWrapperRef.current) {\n          setTooltipReferenceElement(tooltipWrapperRef.current?.children?.[0]);\n          mutationObserverRef.current.observe(tooltipWrapperRef.current, {\n            childList: true,\n            subtree: false, // only observe changes in the direct children of the wrapper, not deeper in the DOM\n          });\n        }\n\n        return () => closeTooltip();\n      },\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // If disabled switches to true at runtime and a tooltip is shown, it should\n    // close immediately\n    useEffect(() => {\n      if (disabled) {\n        closeTooltip();\n      }\n    }, [closeTooltip, disabled]);\n\n    const isTooltipHovered = useRef(false);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => e.code === 'Escape' && closeTooltip(),\n      [closeTooltip],\n    );\n\n    useEffect(() => {\n      document.addEventListener('keydown', handleKeyDown);\n\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown);\n      };\n    }, [handleKeyDown]);\n\n    // Create a singleton container with live region attribute to read the contents\n    // of the tooltip when it pops up\n    const PoliteContainer = usePoliteContainer();\n\n    const modality = useModality();\n\n    return (\n      <>\n        <span\n          style={{\n            // Safari has currently an outstanding issue that results in content\n            // being inaccessible, when rendered within a display: contents.\n            display: 'contents',\n          }}\n          ref={tooltipWrapperRef}\n          onMouseEnter={() => !disabled && openTooltip()}\n          onMouseLeave={() =>\n            // we need to wrap this in a requestAnimationFrame to be able to first set the isTooltipHovered state correctly in case the TooltipElement (including the gap) is hovered\n            // if we don't, the tooltip is closed before the onMouseOver event of the TooltipElement is triggered (to set the right state), as the onMouseLeave of the tooltip trigger would be queued up afterwards\n            requestAnimationFrame(() => {\n              if (!disabled && !isTooltipHovered.current) {\n                closeTooltip();\n              }\n            })\n          }\n          onFocus={() =>\n            !disabled &&\n            modality !== 'pointer' &&\n            modality !== 'touch' &&\n            openTooltip(true)\n          }\n          onBlur={\n            () => !disabled && !isTooltipHovered.current && closeTooltip() // prevent closing when clicking on the gap\n          }\n          data-dt-name={dataDtName}\n          {...remainingBehavioralTrackingProps}\n          {...restProps}\n          data-dt-component={dataDtComponent}\n        >\n          {children}\n        </span>\n        <PoliteContainer>\n          {isOpen && (\n            <TooltipElement\n              ref={forwardedRef}\n              triggerElement={tooltipReferenceElement}\n              placement={placement}\n              fallbackPlacements={fallbackPlacements}\n              id={id}\n              data-testid={dataTestId}\n              data-dtrum-mask={dataDtrumMask}\n              data-dtrum-allow={dataDtrumAllow}\n              className={consumerClassName}\n              style={consumerStyle}\n              onMouseLeave={(event) =>\n                !disabled &&\n                // only close the tooltip if the mouse isn't over the trigger element\n                event.relatedTarget !== tooltipReferenceElement &&\n                closeTooltip()\n              }\n              onTooltipHovered={(isHovered: boolean) =>\n                (isTooltipHovered.current = isHovered)\n              }\n              {...behavioralTrackingProps}\n              data-dt-component={dataDtComponent}\n            >\n              {text}\n            </TooltipElement>\n          )}\n        </PoliteContainer>\n      </>\n    );\n  },\n);\n(Tooltip as typeof Tooltip & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
   "mappings": "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",
   "names": []
 }

package/esm/overlays/tooltip/tooltip.css

@@ -1,54 +1,54 @@
-._hplwyr1-3-12-2 {
+._hplwyr1-3-13-0 {
   max-width: 240px;
   word-break: normal;
   overflow-wrap: anywhere;
   pointer-events: auto;
 }
-._hplwyr1-3-12-2[data-popper-placement^="top"]::after {
+._hplwyr1-3-13-0[data-popper-placement^="top"]::after {
   content: "";
   position: absolute;
   width: 100%;
-  height: var(--_hplwyr0-3-12-2);
+  height: var(--_hplwyr0-3-13-0);
   left: 0;
-  bottom: calc(var(--_hplwyr0-3-12-2) * -1);
+  bottom: calc(var(--_hplwyr0-3-13-0) * -1);
 }
-._hplwyr1-3-12-2[data-popper-placement^="bottom"]::after {
+._hplwyr1-3-13-0[data-popper-placement^="bottom"]::after {
   content: "";
   position: absolute;
   width: 100%;
-  height: var(--_hplwyr0-3-12-2);
+  height: var(--_hplwyr0-3-13-0);
   left: 0;
-  top: calc(var(--_hplwyr0-3-12-2) * -1);
+  top: calc(var(--_hplwyr0-3-13-0) * -1);
 }
-._hplwyr1-3-12-2[data-popper-placement^="left"]::after {
+._hplwyr1-3-13-0[data-popper-placement^="left"]::after {
   content: "";
   position: absolute;
   height: 100%;
-  width: var(--_hplwyr0-3-12-2);
+  width: var(--_hplwyr0-3-13-0);
   top: 0;
-  right: calc(var(--_hplwyr0-3-12-2) * -1);
+  right: calc(var(--_hplwyr0-3-13-0) * -1);
 }
-._hplwyr1-3-12-2[data-popper-placement^="right"]::after {
+._hplwyr1-3-13-0[data-popper-placement^="right"]::after {
   content: "";
   position: absolute;
   height: 100%;
-  width: var(--_hplwyr0-3-12-2);
+  width: var(--_hplwyr0-3-13-0);
   top: 0;
-  left: calc(var(--_hplwyr0-3-12-2) * -1);
+  left: calc(var(--_hplwyr0-3-13-0) * -1);
 }
-._hplwyr1-3-12-2[data-popper-placement^="top"] > div {
+._hplwyr1-3-13-0[data-popper-placement^="top"] > div {
   transform-origin: center bottom;
 }
-._hplwyr1-3-12-2[data-popper-placement^="bottom"] > div {
+._hplwyr1-3-13-0[data-popper-placement^="bottom"] > div {
   transform-origin: center top;
 }
-._hplwyr1-3-12-2[data-popper-placement^="left"] > div {
+._hplwyr1-3-13-0[data-popper-placement^="left"] > div {
   transform-origin: right center;
 }
-._hplwyr1-3-12-2[data-popper-placement^="right"] > div {
+._hplwyr1-3-13-0[data-popper-placement^="right"] > div {
   transform-origin: left center;
 }
-._hplwyr2-3-12-2 {
+._hplwyr2-3-13-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);

package/esm/overlays/tooltip/tooltip.sty.js

@@ -1,7 +1,7 @@
 import "./tooltip.css";
-var tooltipAnimationWrapperCSS = "_hplwyr2-3-12-2";
-var tooltipElementCSS = "_hplwyr1-3-12-2";
-var tooltipOffsetVar = "var(--_hplwyr0-3-12-2)";
+var tooltipAnimationWrapperCSS = "_hplwyr2-3-13-0";
+var tooltipElementCSS = "_hplwyr1-3-13-0";
+var tooltipOffsetVar = "var(--_hplwyr0-3-13-0)";
 export {
   tooltipAnimationWrapperCSS,
   tooltipElementCSS,

package/esm/overlays/tooltip/tooltip.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/tooltip/tooltip.css.ts"],
-  "sourcesContent": ["import './tooltip.css';\nexport var tooltipAnimationWrapperCSS = '_hplwyr2-3-12-2';\nexport var tooltipElementCSS = '_hplwyr1-3-12-2';\nexport var tooltipOffsetVar = 'var(--_hplwyr0-3-12-2)';"],
+  "sourcesContent": ["import './tooltip.css';\nexport var tooltipAnimationWrapperCSS = '_hplwyr2-3-13-0';\nexport var tooltipElementCSS = '_hplwyr1-3-13-0';\nexport var tooltipOffsetVar = 'var(--_hplwyr0-3-13-0)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,6BAA6B;AACjC,IAAI,oBAAoB;AACxB,IAAI,mBAAmB;",
   "names": []
 }

package/esm/overlays/utils/popper-modifiers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/utils/popper-modifiers.ts"],
-  "sourcesContent": ["import type {\n  Instance as PopperInstance,\n  Modifier,\n  ModifierArguments,\n} from '@popperjs/core';\n\nimport { isBrowser as _isBrowser } from '../../core/utils/isBrowser.js';\nimport type {\n  HeightStrategy,\n  OverlaySizeStrategyRange,\n  WidthStrategy,\n} from '../types/sizing.types.js';\n\ntype PopperEnrichedElement = HTMLElement & {\n  __popperInstance__: PopperInstance;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction isPopperEnrichedElement(value: any): value is PopperEnrichedElement {\n  return value !== undefined && value['__popperInstance__'] !== undefined;\n}\n\n/**\n * Check if widthStrategy is OverlaySizeStrategyRange\n * @internal\n */\nexport function isOverlaySizeStrategyRange(\n  widthStrategy: WidthStrategy,\n): widthStrategy is OverlaySizeStrategyRange {\n  return (\n    (widthStrategy as OverlaySizeStrategyRange).min !== undefined ||\n    (widthStrategy as OverlaySizeStrategyRange).max !== undefined\n  );\n}\n\n/**\n * Popper.js modifier which listens to the overlay element size and calls update\n * on the popper instance to reposition the element correctly.\n * @internal\n */\nexport const observeOverlaySize: Modifier<\n  'observeOverlaySize',\n  { resizeObserverInstance: ResizeObserver | false }\n> = {\n  name: 'observeOverlaySize',\n  enabled: true,\n  phase: 'main',\n  options: {\n    resizeObserverInstance:\n      _isBrowser &&\n      window.ResizeObserver &&\n      new ResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { target } = entry;\n          if (isPopperEnrichedElement(target)) {\n            void target['__popperInstance__'].update();\n          }\n        }\n      }),\n  },\n  // needed a function even though it seems optional\n  fn: () => undefined,\n  effect: ({ state, options, instance }) => {\n    const { popper: overlayElement, reference } = state.elements;\n    const { resizeObserverInstance } = options;\n    if (resizeObserverInstance instanceof ResizeObserver) {\n      resizeObserverInstance?.observe(overlayElement);\n      (overlayElement as PopperEnrichedElement)['__popperInstance__'] =\n        instance;\n\n      // Also listen to the trigger size and adjust position\n      if (reference instanceof HTMLElement) {\n        resizeObserverInstance?.observe(reference);\n        (reference as PopperEnrichedElement)['__popperInstance__'] = instance;\n      }\n\n      return () => {\n        resizeObserverInstance?.unobserve(overlayElement);\n        if (isPopperEnrichedElement(overlayElement)) {\n          delete (overlayElement as Partial<PopperEnrichedElement>)[\n            '__popperInstance__'\n          ];\n        }\n        if (reference instanceof HTMLElement) {\n          resizeObserverInstance?.unobserve(reference);\n          if (isPopperEnrichedElement(overlayElement)) {\n            delete (reference as Partial<PopperEnrichedElement>)[\n              '__popperInstance__'\n            ];\n          }\n        }\n      };\n    }\n  },\n};\n\n/**\n * Popper.js modifier which listens to the animation done event\n * to update the popper instance position.\n\n* @internal\n*/\nexport const observeAnimationDone: Modifier<'observeAnimationDone', object> = {\n  name: 'observeAnimationDone',\n  enabled: true,\n  phase: 'main',\n  // needed a function even though it seems optional (throws a console error otherwise)\n  fn: () => undefined,\n  effect: ({ state, instance }: ModifierArguments<object>) => {\n    const { popper: overlayElement } = state.elements;\n    (overlayElement as PopperEnrichedElement)['__popperInstance__'] = instance;\n\n    const updatePosition = () => {\n      if (isPopperEnrichedElement(overlayElement)) {\n        requestAnimationFrame(() => {\n          void instance.update();\n        });\n      }\n    };\n\n    window?.addEventListener('animationDone', updatePosition, false);\n\n    return () => {\n      window?.removeEventListener('animationDone', updatePosition, false);\n\n      if (isPopperEnrichedElement(overlayElement)) {\n        delete (overlayElement as Partial<PopperEnrichedElement>)[\n          '__popperInstance__'\n        ];\n      }\n    };\n  },\n};\n\n/**\n * Popper.js modifier which sets the popper max and/or min width of the overlay\n\n* @internal\n*/\nexport const overlayWidthStrategyHandling: Modifier<\n  'overlayWidthStrategyHandling',\n  { widthStrategy: WidthStrategy }\n> = {\n  name: 'overlayWidthStrategyHandling',\n  enabled: true,\n  fn: ({ state, options }) => {\n    const widthStrategy = options.widthStrategy as WidthStrategy;\n\n    if (widthStrategy === 'trigger') {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    } else if (isOverlaySizeStrategyRange(widthStrategy)) {\n      state.styles.popper.minWidth = `${widthStrategy.min || 0}px`;\n      state.styles.popper.maxWidth =\n        widthStrategy.max !== undefined ? `${widthStrategy.max}px` : '100%';\n    }\n  },\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n};\n\n/**\n * Popper.js modifier which sets the popper max height of the overlay\n\n* @internal\n*/\nexport const overlayHeightStrategyHandling: Modifier<\n  'overlayHeightStrategyHandling',\n  { heightStrategy: HeightStrategy }\n> = {\n  name: 'overlayHeightStrategyHandling',\n  enabled: true,\n  fn: ({ state, options }): void => {\n    const heightStrategy = options.heightStrategy as HeightStrategy;\n    if (heightStrategy === 'maxViewport') {\n      let maxHeight = state.rects.reference.y;\n      // add 10px spacing so the overlay does not extend all the way to the edges of the screen\n      const spacing = 10;\n      const viewportHeight = Math.max(\n        document.documentElement.clientHeight || 0,\n        window.innerHeight || 0,\n      );\n      if (maxHeight < viewportHeight / 2) {\n        maxHeight = viewportHeight - maxHeight - state.rects.reference.height;\n      }\n      state.styles.popper.maxHeight = `${maxHeight - spacing}px`;\n    } else if (isOverlaySizeStrategyRange(heightStrategy)) {\n      state.styles.popper.minHeight = `${heightStrategy.min || 0}px`;\n      state.styles.popper.maxHeight =\n        heightStrategy.max !== undefined ? `${heightStrategy.max}px` : '100%';\n    }\n  },\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n};\n"],
+  "sourcesContent": ["import type {\n  Instance as PopperInstance,\n  Modifier,\n  ModifierArguments,\n} from '@popperjs/core';\n\nimport { isBrowser as _isBrowser } from '../../core/utils/isBrowser.js';\nimport type {\n  HeightStrategy,\n  OverlaySizeStrategyRange,\n  WidthStrategy,\n} from '../types/sizing.types.js';\n\ntype PopperEnrichedElement = HTMLElement & {\n  __popperInstance__: PopperInstance;\n};\n\n// oxlint-disable-next-line typescript/no-explicit-any\nfunction isPopperEnrichedElement(value: any): value is PopperEnrichedElement {\n  return value !== undefined && value['__popperInstance__'] !== undefined;\n}\n\n/**\n * Check if widthStrategy is OverlaySizeStrategyRange\n * @internal\n */\nexport function isOverlaySizeStrategyRange(\n  widthStrategy: WidthStrategy,\n): widthStrategy is OverlaySizeStrategyRange {\n  return (\n    (widthStrategy as OverlaySizeStrategyRange).min !== undefined ||\n    (widthStrategy as OverlaySizeStrategyRange).max !== undefined\n  );\n}\n\n/**\n * Popper.js modifier which listens to the overlay element size and calls update\n * on the popper instance to reposition the element correctly.\n * @internal\n */\nexport const observeOverlaySize: Modifier<\n  'observeOverlaySize',\n  { resizeObserverInstance: ResizeObserver | false }\n> = {\n  name: 'observeOverlaySize',\n  enabled: true,\n  phase: 'main',\n  options: {\n    resizeObserverInstance:\n      _isBrowser &&\n      window.ResizeObserver &&\n      new ResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { target } = entry;\n          if (isPopperEnrichedElement(target)) {\n            void target['__popperInstance__'].update();\n          }\n        }\n      }),\n  },\n  // needed a function even though it seems optional\n  fn: () => undefined,\n  effect: ({ state, options, instance }) => {\n    const { popper: overlayElement, reference } = state.elements;\n    const { resizeObserverInstance } = options;\n    if (resizeObserverInstance instanceof ResizeObserver) {\n      resizeObserverInstance?.observe(overlayElement);\n      (overlayElement as PopperEnrichedElement)['__popperInstance__'] =\n        instance;\n\n      // Also listen to the trigger size and adjust position\n      if (reference instanceof HTMLElement) {\n        resizeObserverInstance?.observe(reference);\n        (reference as PopperEnrichedElement)['__popperInstance__'] = instance;\n      }\n\n      return () => {\n        resizeObserverInstance?.unobserve(overlayElement);\n        if (isPopperEnrichedElement(overlayElement)) {\n          delete (overlayElement as Partial<PopperEnrichedElement>)[\n            '__popperInstance__'\n          ];\n        }\n        if (reference instanceof HTMLElement) {\n          resizeObserverInstance?.unobserve(reference);\n          if (isPopperEnrichedElement(overlayElement)) {\n            delete (reference as Partial<PopperEnrichedElement>)[\n              '__popperInstance__'\n            ];\n          }\n        }\n      };\n    }\n  },\n};\n\n/**\n * Popper.js modifier which listens to the animation done event\n * to update the popper instance position.\n\n* @internal\n*/\nexport const observeAnimationDone: Modifier<'observeAnimationDone', object> = {\n  name: 'observeAnimationDone',\n  enabled: true,\n  phase: 'main',\n  // needed a function even though it seems optional (throws a console error otherwise)\n  fn: () => undefined,\n  effect: ({ state, instance }: ModifierArguments<object>) => {\n    const { popper: overlayElement } = state.elements;\n    (overlayElement as PopperEnrichedElement)['__popperInstance__'] = instance;\n\n    const updatePosition = () => {\n      if (isPopperEnrichedElement(overlayElement)) {\n        requestAnimationFrame(() => {\n          void instance.update();\n        });\n      }\n    };\n\n    window?.addEventListener('animationDone', updatePosition, false);\n\n    return () => {\n      window?.removeEventListener('animationDone', updatePosition, false);\n\n      if (isPopperEnrichedElement(overlayElement)) {\n        delete (overlayElement as Partial<PopperEnrichedElement>)[\n          '__popperInstance__'\n        ];\n      }\n    };\n  },\n};\n\n/**\n * Popper.js modifier which sets the popper max and/or min width of the overlay\n\n* @internal\n*/\nexport const overlayWidthStrategyHandling: Modifier<\n  'overlayWidthStrategyHandling',\n  { widthStrategy: WidthStrategy }\n> = {\n  name: 'overlayWidthStrategyHandling',\n  enabled: true,\n  fn: ({ state, options }) => {\n    const widthStrategy = options.widthStrategy as WidthStrategy;\n\n    if (widthStrategy === 'trigger') {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    } else if (isOverlaySizeStrategyRange(widthStrategy)) {\n      state.styles.popper.minWidth = `${widthStrategy.min || 0}px`;\n      state.styles.popper.maxWidth =\n        widthStrategy.max !== undefined ? `${widthStrategy.max}px` : '100%';\n    }\n  },\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n};\n\n/**\n * Popper.js modifier which sets the popper max height of the overlay\n\n* @internal\n*/\nexport const overlayHeightStrategyHandling: Modifier<\n  'overlayHeightStrategyHandling',\n  { heightStrategy: HeightStrategy }\n> = {\n  name: 'overlayHeightStrategyHandling',\n  enabled: true,\n  fn: ({ state, options }): void => {\n    const heightStrategy = options.heightStrategy as HeightStrategy;\n    if (heightStrategy === 'maxViewport') {\n      let maxHeight = state.rects.reference.y;\n      // add 10px spacing so the overlay does not extend all the way to the edges of the screen\n      const spacing = 10;\n      const viewportHeight = Math.max(\n        document.documentElement.clientHeight || 0,\n        window.innerHeight || 0,\n      );\n      if (maxHeight < viewportHeight / 2) {\n        maxHeight = viewportHeight - maxHeight - state.rects.reference.height;\n      }\n      state.styles.popper.maxHeight = `${maxHeight - spacing}px`;\n    } else if (isOverlaySizeStrategyRange(heightStrategy)) {\n      state.styles.popper.minHeight = `${heightStrategy.min || 0}px`;\n      state.styles.popper.maxHeight =\n        heightStrategy.max !== undefined ? `${heightStrategy.max}px` : '100%';\n    }\n  },\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n};\n"],
   "mappings": "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",
   "names": []
 }

package/esm/styles/colorUtils.css

@@ -1,75 +1,75 @@
-._17bwkb04-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-critical-default, #bb0731);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-critical-default, #bb0731);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-critical-default, #f6d6d5);
+._17bwkb04-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-critical-default, #bb0731);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._17bwkb05-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-neutral-default, #2f2f4f);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-neutral-default, #dadbe4);
+._17bwkb05-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._17bwkb06-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-primary-default, #464cce);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-primary-default, #464cce);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-primary-default, #d5dbf6);
+._17bwkb06-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-primary-default, #464cce);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-primary-default, #464cce);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._17bwkb07-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-success-default, #2d6761);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-success-default, #2d6761);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-success-default, #d3dedd);
+._17bwkb07-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-success-default, #2d6761);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-success-default, #2d6761);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-success-default, #d3dedd);
 }
-._17bwkb08-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-warning-default, #855400);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-warning-default, #855400);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-warning-default, #f9ebdb);
+._17bwkb08-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-warning-default, #855400);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-warning-default, #855400);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._17bwkb0d-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-primary-accent, #464cce);
+._17bwkb0d-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-primary-accent, #464cce);
 }
-._17bwkb0e-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-success-accent, #2d6761);
+._17bwkb0e-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-success-accent, #2d6761);
 }
-._17bwkb0f-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-warning-on-accent-default, #272024);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-warning-on-accent-default, #272024);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-warning-accent, #855400);
+._17bwkb0f-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-warning-on-accent-default, #272024);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-warning-on-accent-default, #272024);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-warning-accent, #855400);
 }
-._17bwkb0g-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-critical-accent, #bb0731);
+._17bwkb0g-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._17bwkb0h-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-neutral-accent, #595a7d);
+._17bwkb0h-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._17bwkb0i-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-primary-disabled, #595a7d80);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-primary-disabled, #595a7d80);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-primary-disabled, #dadbe480);
+._17bwkb0i-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-primary-disabled, #595a7d80);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-primary-disabled, #595a7d80);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._17bwkb0j-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-success-disabled, #595a7d80);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-success-disabled, #595a7d80);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-success-disabled, #dadbe480);
+._17bwkb0j-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-success-disabled, #595a7d80);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-success-disabled, #595a7d80);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-success-disabled, #dadbe480);
 }
-._17bwkb0k-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-warning-disabled, #595a7d80);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-warning-disabled, #595a7d80);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-warning-disabled, #dadbe480);
+._17bwkb0k-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-warning-disabled, #595a7d80);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-warning-disabled, #595a7d80);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-warning-disabled, #dadbe480);
 }
-._17bwkb0l-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-critical-disabled, #595a7d80);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-critical-disabled, #595a7d80);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-critical-disabled, #dadbe480);
+._17bwkb0l-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-critical-disabled, #595a7d80);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-critical-disabled, #595a7d80);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._17bwkb0m-3-12-2 {
-  --_17bwkb00-3-12-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_17bwkb01-3-12-2: var(--dt-colors-icon-neutral-disabled, #595a7d80);
-  --_17bwkb02-3-12-2: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._17bwkb0m-3-13-0 {
+  --_17bwkb00-3-13-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_17bwkb01-3-13-0: var(--dt-colors-icon-neutral-disabled, #595a7d80);
+  --_17bwkb02-3-13-0: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }

package/esm/styles/colorUtils.sty.js

@@ -1,7 +1,7 @@
 import "./colorUtils.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var colorUtils = _7a468({ defaultClassName: "_17bwkb03-3-12-2", variantClassNames: { color: { critical: "_17bwkb04-3-12-2", neutral: "_17bwkb05-3-12-2", primary: "_17bwkb06-3-12-2", success: "_17bwkb07-3-12-2", warning: "_17bwkb08-3-12-2" }, variant: { "default": "_17bwkb09-3-12-2", accent: "_17bwkb0a-3-12-2" }, disabled: { true: "_17bwkb0b-3-12-2", false: "_17bwkb0c-3-12-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_17bwkb0d-3-12-2"], [{ color: "success", variant: "accent" }, "_17bwkb0e-3-12-2"], [{ color: "warning", variant: "accent" }, "_17bwkb0f-3-12-2"], [{ color: "critical", variant: "accent" }, "_17bwkb0g-3-12-2"], [{ color: "neutral", variant: "accent" }, "_17bwkb0h-3-12-2"], [{ color: "primary", disabled: true }, "_17bwkb0i-3-12-2"], [{ color: "success", disabled: true }, "_17bwkb0j-3-12-2"], [{ color: "warning", disabled: true }, "_17bwkb0k-3-12-2"], [{ color: "critical", disabled: true }, "_17bwkb0l-3-12-2"], [{ color: "neutral", disabled: true }, "_17bwkb0m-3-12-2"]] });
-var colorUtilsVars = { text: "var(--_17bwkb00-3-12-2)", icon: "var(--_17bwkb01-3-12-2)", borderColor: "var(--_17bwkb02-3-12-2)" };
+var colorUtils = _7a468({ defaultClassName: "_17bwkb03-3-13-0", variantClassNames: { color: { critical: "_17bwkb04-3-13-0", neutral: "_17bwkb05-3-13-0", primary: "_17bwkb06-3-13-0", success: "_17bwkb07-3-13-0", warning: "_17bwkb08-3-13-0" }, variant: { "default": "_17bwkb09-3-13-0", accent: "_17bwkb0a-3-13-0" }, disabled: { true: "_17bwkb0b-3-13-0", false: "_17bwkb0c-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_17bwkb0d-3-13-0"], [{ color: "success", variant: "accent" }, "_17bwkb0e-3-13-0"], [{ color: "warning", variant: "accent" }, "_17bwkb0f-3-13-0"], [{ color: "critical", variant: "accent" }, "_17bwkb0g-3-13-0"], [{ color: "neutral", variant: "accent" }, "_17bwkb0h-3-13-0"], [{ color: "primary", disabled: true }, "_17bwkb0i-3-13-0"], [{ color: "success", disabled: true }, "_17bwkb0j-3-13-0"], [{ color: "warning", disabled: true }, "_17bwkb0k-3-13-0"], [{ color: "critical", disabled: true }, "_17bwkb0l-3-13-0"], [{ color: "neutral", disabled: true }, "_17bwkb0m-3-13-0"]] });
+var colorUtilsVars = { text: "var(--_17bwkb00-3-13-0)", icon: "var(--_17bwkb01-3-13-0)", borderColor: "var(--_17bwkb02-3-13-0)" };
 export {
   colorUtils,
   colorUtilsVars