@dynatrace/strato-components 3.13.3 → 3.14.0

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-13-3';\nexport var backdropOpacityVar = '--strato-modal-fade-opacity';\nexport var base = '_dmotjm0-3-13-3';\nexport var content = {withFooter:'_dmotjm7-3-13-3',withoutFooter:'_dmotjm8-3-13-3'};\nexport var dividerWrapper = '_dmotjm6-3-13-3';\nexport var footerSection = '_dmotjm9-3-13-3';\nexport var header = '_dmotjm5-3-13-3';\nexport var sizes = {small:'_dmotjm1-3-13-3',medium:'_dmotjm2-3-13-3',large:'_dmotjm3-3-13-3'};"],
+  "sourcesContent": ["import './Modal.css';\nexport var backdrop = '_dmotjm4-3-14-0';\nexport var backdropOpacityVar = '--strato-modal-fade-opacity';\nexport var base = '_dmotjm0-3-14-0';\nexport var content = {withFooter:'_dmotjm7-3-14-0',withoutFooter:'_dmotjm8-3-14-0'};\nexport var dividerWrapper = '_dmotjm6-3-14-0';\nexport var footerSection = '_dmotjm9-3-14-0';\nexport var header = '_dmotjm5-3-14-0';\nexport var sizes = {small:'_dmotjm1-3-14-0',medium:'_dmotjm2-3-14-0',large:'_dmotjm3-3-14-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-13-3 {
+._1dhu6810-3-14-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.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/overlay/Overlay.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { overlayCSS } from './Overlay.sty.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.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 type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport type { OverlayProps } from '../hooks/useOverlayWithTrigger.js';\n\nconst COMPONENT_NAME = 'Overlay';\n\n/**\n * @public\n */\nexport interface OverlayComponentProps\n  extends AriaLabelingProps,\n    WithChildren,\n    DataTestId,\n    StylingProps,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** Whether the overlay is open. */\n  isOpen: OverlayProps['overlayState']['isOpen'];\n  /**\n   * Properties for connecting the overlay to the overlay trigger.\n   * Includes styles and accessibility attributes.\n   */\n  overlayProps?: OverlayProps['overlayProps'];\n  /**\n   * Properties to pass to the overlay container.\n   */\n  overlayContainerProps?: OverlayProps['overlayContainerProps'];\n}\n\n/**\n * The `Overlay` component allows you to show additional content when the user\n * clicks on a particular element in the UI. The `Overlay` is placed\n * at the border of its trigger element. To define a UI element as\n * a trigger, use the `useOverlayWithTrigger` hook. The Overlay only\n * exists in a controlled manner, so the `isOpen` prop must be\n * updated by the developer.\n * @public\n */\nexport const Overlay = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  OverlayComponentProps\n>((props, forwardedRef) => {\n  const {\n    isOpen,\n    children,\n    overlayProps,\n    overlayContainerProps,\n    className: customClassName,\n    style: customStyles,\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  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const {\n    'data-dt-name': dataDtName = COMPONENT_NAME,\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\n  const ariaProps = useAriaLabelingProps(restProps);\n\n  const defaultOverlayContainerProps = useOverlayStacking(\n    undefined,\n    'dropdown',\n  );\n  const overlayContainerPropsApplied = _mergeProps(\n    defaultOverlayContainerProps,\n    overlayContainerProps,\n  );\n  const { trapFocus, ...remainingOverlayProps } = overlayProps ?? {};\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <OverlayContainer\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dt-name={dataDtName}\n      {...remainingBehavioralTrackingProps}\n      {...overlayContainerPropsApplied}\n      data-dt-component={dataDtComponent}\n    >\n      <FocusScope contain={trapFocus} autoFocus>\n        <div\n          ref={forwardedRef}\n          {..._mergeProps(remainingOverlayProps, ariaProps)}\n          className={clsx(\n            overlayCSS,\n            remainingOverlayProps.className,\n            customClassName,\n          )}\n          style={{\n            ...remainingOverlayProps.style,\n            ...customStyles,\n          }}\n        >\n          <OverlayStackingProvider>{children}</OverlayStackingProvider>\n        </div>\n      </FocusScope>\n    </OverlayContainer>\n  );\n});\n\n(Overlay as typeof Overlay & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAqHU;AArHV,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AAOxC,SAAS,cAAc,mBAAmB;AAG1C,MAAM,iBAAiB;AAkChB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA;AAAA,IAEpB,qBAAqB,kBAAkB;AAAA,IACvC,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM;AAAA,IACJ,gBAAgB,aAAa;AAAA,IAC7B,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,YAAY,qBAAqB,SAAS;AAEhD,QAAM,+BAA+B;AAAA,IACnC;AAAA,IACA;AAAA,EACF;AACA,QAAM,+BAA+B;AAAA,IACnC;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,WAAW,GAAG,sBAAsB,IAAI,gBAAgB,CAAC;AAEjE,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,gBAAc;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB,8BAAC,cAAW,SAAS,WAAW,WAAS,MACvC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACJ,GAAG,YAAY,uBAAuB,SAAS;AAAA,UAChD,WAAW;AAAA,YACT;AAAA,YACA,sBAAsB;AAAA,YACtB;AAAA,UACF;AAAA,UACA,OAAO;AAAA,YACL,GAAG,sBAAsB;AAAA,YACzB,GAAG;AAAA,UACL;AAAA,UAEA,8BAAC,2BAAyB,UAAS;AAAA;AAAA,MACrC,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { overlayCSS } from './Overlay.sty.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.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 type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport type { OverlayProps } from '../hooks/useOverlayWithTrigger.js';\n\nconst COMPONENT_NAME = 'Overlay';\n\n/**\n * @public\n */\nexport interface OverlayComponentProps\n  extends\n    AriaLabelingProps,\n    WithChildren,\n    DataTestId,\n    StylingProps,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** Whether the overlay is open. */\n  isOpen: OverlayProps['overlayState']['isOpen'];\n  /**\n   * Properties for connecting the overlay to the overlay trigger.\n   * Includes styles and accessibility attributes.\n   */\n  overlayProps?: OverlayProps['overlayProps'];\n  /**\n   * Properties to pass to the overlay container.\n   */\n  overlayContainerProps?: OverlayProps['overlayContainerProps'];\n}\n\n/**\n * The `Overlay` component allows you to show additional content when the user\n * clicks on a particular element in the UI. The `Overlay` is placed\n * at the border of its trigger element. To define a UI element as\n * a trigger, use the `useOverlayWithTrigger` hook. The Overlay only\n * exists in a controlled manner, so the `isOpen` prop must be\n * updated by the developer.\n * @public\n */\nexport const Overlay = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  OverlayComponentProps\n>((props, forwardedRef) => {\n  const {\n    isOpen,\n    children,\n    overlayProps,\n    overlayContainerProps,\n    className: customClassName,\n    style: customStyles,\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  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const {\n    'data-dt-name': dataDtName = COMPONENT_NAME,\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\n  const ariaProps = useAriaLabelingProps(restProps);\n\n  const defaultOverlayContainerProps = useOverlayStacking(\n    undefined,\n    'dropdown',\n  );\n  const overlayContainerPropsApplied = _mergeProps(\n    defaultOverlayContainerProps,\n    overlayContainerProps,\n  );\n  const { trapFocus, ...remainingOverlayProps } = overlayProps ?? {};\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <OverlayContainer\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dt-name={dataDtName}\n      {...remainingBehavioralTrackingProps}\n      {...overlayContainerPropsApplied}\n      data-dt-component={dataDtComponent}\n    >\n      <FocusScope contain={trapFocus} autoFocus>\n        <div\n          ref={forwardedRef}\n          {..._mergeProps(remainingOverlayProps, ariaProps)}\n          className={clsx(\n            overlayCSS,\n            remainingOverlayProps.className,\n            customClassName,\n          )}\n          style={{\n            ...remainingOverlayProps.style,\n            ...customStyles,\n          }}\n        >\n          <OverlayStackingProvider>{children}</OverlayStackingProvider>\n        </div>\n      </FocusScope>\n    </OverlayContainer>\n  );\n});\n\n(Overlay as typeof Overlay & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAsHU;AAtHV,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AAOxC,SAAS,cAAc,mBAAmB;AAG1C,MAAM,iBAAiB;AAmChB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA;AAAA,IAEpB,qBAAqB,kBAAkB;AAAA,IACvC,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM;AAAA,IACJ,gBAAgB,aAAa;AAAA,IAC7B,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,YAAY,qBAAqB,SAAS;AAEhD,QAAM,+BAA+B;AAAA,IACnC;AAAA,IACA;AAAA,EACF;AACA,QAAM,+BAA+B;AAAA,IACnC;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,WAAW,GAAG,sBAAsB,IAAI,gBAAgB,CAAC;AAEjE,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,gBAAc;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB,8BAAC,cAAW,SAAS,WAAW,WAAS,MACvC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACJ,GAAG,YAAY,uBAAuB,SAAS;AAAA,UAChD,WAAW;AAAA,YACT;AAAA,YACA,sBAAsB;AAAA,YACtB;AAAA,UACF;AAAA,UACA,OAAO;AAAA,YACL,GAAG,sBAAsB;AAAA,YACzB,GAAG;AAAA,UACL;AAAA,UAEA,8BAAC,2BAAyB,UAAS;AAAA;AAAA,MACrC,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
   "names": []
 }

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

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

package/esm/overlays/sheet/Sheet.css

@@ -1,4 +1,4 @@
-._d76u1n0-3-13-3 {
+._d76u1n0-3-14-0 {
   width: 100%;
   display: flex;
   justify-content: center;
@@ -7,7 +7,7 @@
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._d76u1n1-3-13-3 {
+._d76u1n1-3-14-0 {
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -25,17 +25,17 @@
   padding-bottom: var(--dt-spacings-size-16, 16px);
   margin-top: var(--dt-spacings-size-12, 12px);
 }
-._d76u1n1-3-13-3:after {
+._d76u1n1-3-14-0:after {
   content: "";
   display: block;
   padding-bottom: var(--dt-spacings-size-32, 32px);
 }
-._d76u1n2-3-13-3 {
+._d76u1n2-3-14-0 {
   overflow: auto;
   outline: none;
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._d76u1n3-3-13-3 {
+._d76u1n3-3-14-0 {
   height: 100vh;
   position: fixed;
   top: 0;
@@ -44,12 +44,12 @@
   z-index: var(--dt-elevations-overlay, 20);
   background: var(--dt-colors-background-surface-backdrop, #f9f9facc);
 }
-._d76u1n4-3-13-3 {
+._d76u1n4-3-14-0 {
   word-break: normal;
   overflow-wrap: anywhere;
 }
 @media screen and (min-width: 641px) {
-  ._d76u1n1-3-13-3 {
+  ._d76u1n1-3-14-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-13-3";
-var sheetCSS = "_d76u1n1-3-13-3";
-var sheetHeadingCSS = "_d76u1n4-3-13-3";
-var sheetScrollableContainerCSS = "_d76u1n2-3-13-3";
-var sheetWrapperCSS = "_d76u1n3-3-13-3";
+var sheetBackdropCSS = "_d76u1n0-3-14-0";
+var sheetCSS = "_d76u1n1-3-14-0";
+var sheetHeadingCSS = "_d76u1n4-3-14-0";
+var sheetScrollableContainerCSS = "_d76u1n2-3-14-0";
+var sheetWrapperCSS = "_d76u1n3-3-14-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-13-3';\nexport var sheetCSS = '_d76u1n1-3-13-3';\nexport var sheetHeadingCSS = '_d76u1n4-3-13-3';\nexport var sheetScrollableContainerCSS = '_d76u1n2-3-13-3';\nexport var sheetWrapperCSS = '_d76u1n3-3-13-3';"],
+  "sourcesContent": ["import './Sheet.css';\nexport var sheetBackdropCSS = '_d76u1n0-3-14-0';\nexport var sheetCSS = '_d76u1n1-3-14-0';\nexport var sheetHeadingCSS = '_d76u1n4-3-14-0';\nexport var sheetScrollableContainerCSS = '_d76u1n2-3-14-0';\nexport var sheetWrapperCSS = '_d76u1n3-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,WAAW;AACf,IAAI,kBAAkB;AACtB,IAAI,8BAA8B;AAClC,IAAI,kBAAkB;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/tooltip/TooltipElement.tsx"],
-  "sourcesContent": ["import { eventListeners, Placement } from '@popperjs/core';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport {\n  tooltipAnimationWrapperCSS,\n  tooltipElementCSS,\n  tooltipOffsetVar,\n} from './tooltip.sty.js';\nimport type { TooltipProps } from './tooltip.types.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.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 { Text } from '../../typography/text/Text.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n} from '../utils/popper-modifiers.js';\nimport { usePopper } from '../utils/use-popper-compat.js';\n\nconst TOOLTIP_OFFSET = 4;\n\ninterface TooltipElementProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps,\n    Pick<TooltipProps, 'placement' | 'fallbackPlacements' | 'id'> {\n  /** Reference to the trigger element */\n  triggerElement?: Element;\n  /** Callback triggered when the mouse leaves the tooltip element. */\n  onMouseLeave?: (e: ReactMouseEvent<HTMLDivElement>) => void;\n  /** Callback triggered when the tooltip hover state changes. */\n  onTooltipHovered?: (isTooltipHovered: boolean) => void;\n  /** Allows behavior tracking. */\n  'data-dt-component'?: string;\n}\n\n// #endregion\n\n/** The tooltip element / portal that is being rendered into the tooltip */\nexport const TooltipElement = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TooltipElementProps\n>((props: TooltipElementProps, forwardedRef) => {\n  const {\n    children,\n    placement,\n    triggerElement,\n    id,\n    fallbackPlacements: fallbackPlacementsProp,\n    onMouseLeave,\n    onTooltipHovered,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dt-component': dataDtComponent,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  const {\n    'data-dt-name': dataDtName = 'Overlay',\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\n\n  const [tooltipRef, setTooltipRef] = useState<HTMLDivElement | null>(null);\n\n  // Forwards the ref to the opened tooltip.\n  // DISCUSS: This stays on the tooltip element rather than the wrapping span\n  // in order to not break the behavior and api. We should definitely\n  // think about switching this up.\n  const mergedTooltipRef = useMergeRefs([forwardedRef, setTooltipRef]);\n\n  // Defines fallback placements. In order to flip _correctly_, we adjust\n  // the fallback list based on the desired positioning.\n  const fallbackPlacements = useMemo<Placement[] | undefined>(() => {\n    if (fallbackPlacementsProp) {\n      return fallbackPlacementsProp;\n    }\n\n    switch (placement) {\n      case 'top':\n        return ['bottom', 'left', 'right'];\n      case 'bottom':\n        return ['top', 'left', 'right'];\n      case 'left':\n        return ['right', 'top', 'bottom'];\n      case 'right':\n        return ['left', 'top', 'bottom'];\n    }\n  }, [placement, fallbackPlacementsProp]);\n\n  const { styles, attributes } = usePopper(triggerElement, tooltipRef, {\n    placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, TOOLTIP_OFFSET],\n        },\n      },\n      {\n        name: 'flip',\n        options: {\n          fallbackPlacements,\n        },\n      },\n      observeOverlaySize,\n      observeAnimationDone,\n      eventListeners,\n    ],\n  });\n\n  // Get the zIndex for the stacked overlay to apply to the tooltip\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  const tooltipHovered = useRef(false);\n\n  const handleMouseLeaveTooltip = useCallback(\n    (e: ReactMouseEvent<HTMLDivElement>) => {\n      tooltipHovered.current = false;\n      onMouseLeave?.(e);\n      onTooltipHovered?.(tooltipHovered.current);\n    },\n    [onMouseLeave, onTooltipHovered],\n  );\n\n  return (\n    <div\n      ref={mergedTooltipRef}\n      id={id}\n      style={{\n        ...styles.popper,\n        zIndex: stackingContext.style.zIndex,\n        ...consumerStyle,\n        ...assignInlineVars({ [tooltipOffsetVar]: `${TOOLTIP_OFFSET}px` }),\n      }}\n      className={clsx(tooltipElementCSS, consumerClassName)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      role=\"tooltip\"\n      onMouseEnter={() => {\n        tooltipHovered.current = true;\n        onTooltipHovered?.(tooltipHovered.current);\n      }}\n      onMouseLeave={handleMouseLeaveTooltip}\n      {...attributes.popper}\n      {...remainingBehavioralTrackingProps}\n      data-dt-name={dataDtName}\n      data-dt-component={dataDtComponent}\n    >\n      <div className={tooltipAnimationWrapperCSS}>\n        {typeof children === 'string' ? (\n          <Text textStyle=\"small\" as=\"p\">\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </div>\n    </div>\n  );\n});\n\n(\n  TooltipElement as typeof TooltipElement & { displayName: string }\n).displayName = 'TooltipElement';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { eventListeners, Placement } from '@popperjs/core';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport {\n  tooltipAnimationWrapperCSS,\n  tooltipElementCSS,\n  tooltipOffsetVar,\n} from './tooltip.sty.js';\nimport type { TooltipProps } from './tooltip.types.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.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 { Text } from '../../typography/text/Text.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n} from '../utils/popper-modifiers.js';\nimport { usePopper } from '../utils/use-popper-compat.js';\n\nconst TOOLTIP_OFFSET = 4;\n\ninterface TooltipElementProps\n  extends\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps,\n    Pick<TooltipProps, 'placement' | 'fallbackPlacements' | 'id'> {\n  /** Reference to the trigger element */\n  triggerElement?: Element;\n  /** Callback triggered when the mouse leaves the tooltip element. */\n  onMouseLeave?: (e: ReactMouseEvent<HTMLDivElement>) => void;\n  /** Callback triggered when the tooltip hover state changes. */\n  onTooltipHovered?: (isTooltipHovered: boolean) => void;\n  /** Allows behavior tracking. */\n  'data-dt-component'?: string;\n}\n\n// #endregion\n\n/** The tooltip element / portal that is being rendered into the tooltip */\nexport const TooltipElement = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TooltipElementProps\n>((props: TooltipElementProps, forwardedRef) => {\n  const {\n    children,\n    placement,\n    triggerElement,\n    id,\n    fallbackPlacements: fallbackPlacementsProp,\n    onMouseLeave,\n    onTooltipHovered,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dt-component': dataDtComponent,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  const {\n    'data-dt-name': dataDtName = 'Overlay',\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\n\n  const [tooltipRef, setTooltipRef] = useState<HTMLDivElement | null>(null);\n\n  // Forwards the ref to the opened tooltip.\n  // DISCUSS: This stays on the tooltip element rather than the wrapping span\n  // in order to not break the behavior and api. We should definitely\n  // think about switching this up.\n  const mergedTooltipRef = useMergeRefs([forwardedRef, setTooltipRef]);\n\n  // Defines fallback placements. In order to flip _correctly_, we adjust\n  // the fallback list based on the desired positioning.\n  const fallbackPlacements = useMemo<Placement[] | undefined>(() => {\n    if (fallbackPlacementsProp) {\n      return fallbackPlacementsProp;\n    }\n\n    switch (placement) {\n      case 'top':\n        return ['bottom', 'left', 'right'];\n      case 'bottom':\n        return ['top', 'left', 'right'];\n      case 'left':\n        return ['right', 'top', 'bottom'];\n      case 'right':\n        return ['left', 'top', 'bottom'];\n    }\n  }, [placement, fallbackPlacementsProp]);\n\n  const { styles, attributes } = usePopper(triggerElement, tooltipRef, {\n    placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, TOOLTIP_OFFSET],\n        },\n      },\n      {\n        name: 'flip',\n        options: {\n          fallbackPlacements,\n        },\n      },\n      observeOverlaySize,\n      observeAnimationDone,\n      eventListeners,\n    ],\n  });\n\n  // Get the zIndex for the stacked overlay to apply to the tooltip\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  const tooltipHovered = useRef(false);\n\n  const handleMouseLeaveTooltip = useCallback(\n    (e: ReactMouseEvent<HTMLDivElement>) => {\n      tooltipHovered.current = false;\n      onMouseLeave?.(e);\n      onTooltipHovered?.(tooltipHovered.current);\n    },\n    [onMouseLeave, onTooltipHovered],\n  );\n\n  return (\n    <div\n      ref={mergedTooltipRef}\n      id={id}\n      style={{\n        ...styles.popper,\n        zIndex: stackingContext.style.zIndex,\n        ...consumerStyle,\n        ...assignInlineVars({ [tooltipOffsetVar]: `${TOOLTIP_OFFSET}px` }),\n      }}\n      className={clsx(tooltipElementCSS, consumerClassName)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      role=\"tooltip\"\n      onMouseEnter={() => {\n        tooltipHovered.current = true;\n        onTooltipHovered?.(tooltipHovered.current);\n      }}\n      onMouseLeave={handleMouseLeaveTooltip}\n      {...attributes.popper}\n      {...remainingBehavioralTrackingProps}\n      data-dt-name={dataDtName}\n      data-dt-component={dataDtComponent}\n    >\n      <div className={tooltipAnimationWrapperCSS}>\n        {typeof children === 'string' ? (\n          <Text textStyle=\"small\" as=\"p\">\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </div>\n    </div>\n  );\n});\n\n(\n  TooltipElement as typeof TooltipElement & { displayName: string }\n).displayName = 'TooltipElement';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/overlays/tooltip/tooltip.css

@@ -1,54 +1,54 @@
-._hplwyr1-3-13-3 {
+._hplwyr1-3-14-0 {
   max-width: 240px;
   word-break: normal;
   overflow-wrap: anywhere;
   pointer-events: auto;
 }
-._hplwyr1-3-13-3[data-popper-placement^="top"]::after {
+._hplwyr1-3-14-0[data-popper-placement^="top"]::after {
   content: "";
   position: absolute;
   width: 100%;
-  height: var(--_hplwyr0-3-13-3);
+  height: var(--_hplwyr0-3-14-0);
   left: 0;
-  bottom: calc(var(--_hplwyr0-3-13-3) * -1);
+  bottom: calc(var(--_hplwyr0-3-14-0) * -1);
 }
-._hplwyr1-3-13-3[data-popper-placement^="bottom"]::after {
+._hplwyr1-3-14-0[data-popper-placement^="bottom"]::after {
   content: "";
   position: absolute;
   width: 100%;
-  height: var(--_hplwyr0-3-13-3);
+  height: var(--_hplwyr0-3-14-0);
   left: 0;
-  top: calc(var(--_hplwyr0-3-13-3) * -1);
+  top: calc(var(--_hplwyr0-3-14-0) * -1);
 }
-._hplwyr1-3-13-3[data-popper-placement^="left"]::after {
+._hplwyr1-3-14-0[data-popper-placement^="left"]::after {
   content: "";
   position: absolute;
   height: 100%;
-  width: var(--_hplwyr0-3-13-3);
+  width: var(--_hplwyr0-3-14-0);
   top: 0;
-  right: calc(var(--_hplwyr0-3-13-3) * -1);
+  right: calc(var(--_hplwyr0-3-14-0) * -1);
 }
-._hplwyr1-3-13-3[data-popper-placement^="right"]::after {
+._hplwyr1-3-14-0[data-popper-placement^="right"]::after {
   content: "";
   position: absolute;
   height: 100%;
-  width: var(--_hplwyr0-3-13-3);
+  width: var(--_hplwyr0-3-14-0);
   top: 0;
-  left: calc(var(--_hplwyr0-3-13-3) * -1);
+  left: calc(var(--_hplwyr0-3-14-0) * -1);
 }
-._hplwyr1-3-13-3[data-popper-placement^="top"] > div {
+._hplwyr1-3-14-0[data-popper-placement^="top"] > div {
   transform-origin: center bottom;
 }
-._hplwyr1-3-13-3[data-popper-placement^="bottom"] > div {
+._hplwyr1-3-14-0[data-popper-placement^="bottom"] > div {
   transform-origin: center top;
 }
-._hplwyr1-3-13-3[data-popper-placement^="left"] > div {
+._hplwyr1-3-14-0[data-popper-placement^="left"] > div {
   transform-origin: right center;
 }
-._hplwyr1-3-13-3[data-popper-placement^="right"] > div {
+._hplwyr1-3-14-0[data-popper-placement^="right"] > div {
   transform-origin: left center;
 }
-._hplwyr2-3-13-3 {
+._hplwyr2-3-14-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-13-3";
-var tooltipElementCSS = "_hplwyr1-3-13-3";
-var tooltipOffsetVar = "var(--_hplwyr0-3-13-3)";
+var tooltipAnimationWrapperCSS = "_hplwyr2-3-14-0";
+var tooltipElementCSS = "_hplwyr1-3-14-0";
+var tooltipOffsetVar = "var(--_hplwyr0-3-14-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-13-3';\nexport var tooltipElementCSS = '_hplwyr1-3-13-3';\nexport var tooltipOffsetVar = 'var(--_hplwyr0-3-13-3)';"],
+  "sourcesContent": ["import './tooltip.css';\nexport var tooltipAnimationWrapperCSS = '_hplwyr2-3-14-0';\nexport var tooltipElementCSS = '_hplwyr1-3-14-0';\nexport var tooltipOffsetVar = 'var(--_hplwyr0-3-14-0)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,6BAA6B;AACjC,IAAI,oBAAoB;AACxB,IAAI,mBAAmB;",
   "names": []
 }

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

@@ -80,7 +80,7 @@ const overlayWidthStrategyHandling = {
       state.styles.popper.width = `${state.rects.reference.width}px`;
     } else if (isOverlaySizeStrategyRange(widthStrategy)) {
       state.styles.popper.minWidth = `${widthStrategy.min || 0}px`;
-      state.styles.popper.maxWidth = widthStrategy.max !== void 0 ? `${widthStrategy.max}px` : "100%";
+      state.styles.popper.maxWidth = widthStrategy.max !== void 0 ? `min(${widthStrategy.max}px, 100vw)` : "100%";
     }
   },
   phase: "beforeWrite",

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// 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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",
+  "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\n          ? `min(${widthStrategy.max}px, 100vw)`\n          : '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/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/esm/styles/colorUtils.css

@@ -1,75 +1,75 @@
-._17bwkb04-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-critical-default, #bb0731);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-critical-default, #bb0731);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-critical-default, #f6d6d5);
+._17bwkb04-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-critical-default, #bb0731);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._17bwkb05-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-neutral-default, #2f2f4f);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-neutral-default, #dadbe4);
+._17bwkb05-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._17bwkb06-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-primary-default, #464cce);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-primary-default, #464cce);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-primary-default, #d5dbf6);
+._17bwkb06-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-primary-default, #464cce);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-primary-default, #464cce);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._17bwkb07-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-success-default, #2d6761);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-success-default, #2d6761);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-success-default, #d3dedd);
+._17bwkb07-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-success-default, #2d6761);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-success-default, #2d6761);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-success-default, #d3dedd);
 }
-._17bwkb08-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-warning-default, #855400);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-warning-default, #855400);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-warning-default, #f9ebdb);
+._17bwkb08-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-warning-default, #855400);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-warning-default, #855400);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._17bwkb0d-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-primary-accent, #464cce);
+._17bwkb0d-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-primary-accent, #464cce);
 }
-._17bwkb0e-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-success-accent, #2d6761);
+._17bwkb0e-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-success-accent, #2d6761);
 }
-._17bwkb0f-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-warning-on-accent-default, #272024);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-warning-on-accent-default, #272024);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-warning-accent, #855400);
+._17bwkb0f-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-warning-on-accent-default, #272024);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-warning-on-accent-default, #272024);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-warning-accent, #855400);
 }
-._17bwkb0g-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-critical-accent, #bb0731);
+._17bwkb0g-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._17bwkb0h-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-neutral-accent, #595a7d);
+._17bwkb0h-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._17bwkb0i-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-primary-disabled, #595a7d80);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-primary-disabled, #595a7d80);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-primary-disabled, #dadbe480);
+._17bwkb0i-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-primary-disabled, #595a7d80);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-primary-disabled, #595a7d80);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._17bwkb0j-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-success-disabled, #595a7d80);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-success-disabled, #595a7d80);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-success-disabled, #dadbe480);
+._17bwkb0j-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-success-disabled, #595a7d80);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-success-disabled, #595a7d80);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-success-disabled, #dadbe480);
 }
-._17bwkb0k-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-warning-disabled, #595a7d80);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-warning-disabled, #595a7d80);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-warning-disabled, #dadbe480);
+._17bwkb0k-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-warning-disabled, #595a7d80);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-warning-disabled, #595a7d80);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-warning-disabled, #dadbe480);
 }
-._17bwkb0l-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-critical-disabled, #595a7d80);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-critical-disabled, #595a7d80);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-critical-disabled, #dadbe480);
+._17bwkb0l-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-critical-disabled, #595a7d80);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-critical-disabled, #595a7d80);
+  --_17bwkb02-3-14-0: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._17bwkb0m-3-13-3 {
-  --_17bwkb00-3-13-3: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_17bwkb01-3-13-3: var(--dt-colors-icon-neutral-disabled, #595a7d80);
-  --_17bwkb02-3-13-3: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._17bwkb0m-3-14-0 {
+  --_17bwkb00-3-14-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_17bwkb01-3-14-0: var(--dt-colors-icon-neutral-disabled, #595a7d80);
+  --_17bwkb02-3-14-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-13-3", variantClassNames: { color: { critical: "_17bwkb04-3-13-3", neutral: "_17bwkb05-3-13-3", primary: "_17bwkb06-3-13-3", success: "_17bwkb07-3-13-3", warning: "_17bwkb08-3-13-3" }, variant: { "default": "_17bwkb09-3-13-3", accent: "_17bwkb0a-3-13-3" }, disabled: { true: "_17bwkb0b-3-13-3", false: "_17bwkb0c-3-13-3" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_17bwkb0d-3-13-3"], [{ color: "success", variant: "accent" }, "_17bwkb0e-3-13-3"], [{ color: "warning", variant: "accent" }, "_17bwkb0f-3-13-3"], [{ color: "critical", variant: "accent" }, "_17bwkb0g-3-13-3"], [{ color: "neutral", variant: "accent" }, "_17bwkb0h-3-13-3"], [{ color: "primary", disabled: true }, "_17bwkb0i-3-13-3"], [{ color: "success", disabled: true }, "_17bwkb0j-3-13-3"], [{ color: "warning", disabled: true }, "_17bwkb0k-3-13-3"], [{ color: "critical", disabled: true }, "_17bwkb0l-3-13-3"], [{ color: "neutral", disabled: true }, "_17bwkb0m-3-13-3"]] });
-var colorUtilsVars = { text: "var(--_17bwkb00-3-13-3)", icon: "var(--_17bwkb01-3-13-3)", borderColor: "var(--_17bwkb02-3-13-3)" };
+var colorUtils = _7a468({ defaultClassName: "_17bwkb03-3-14-0", variantClassNames: { color: { critical: "_17bwkb04-3-14-0", neutral: "_17bwkb05-3-14-0", primary: "_17bwkb06-3-14-0", success: "_17bwkb07-3-14-0", warning: "_17bwkb08-3-14-0" }, variant: { "default": "_17bwkb09-3-14-0", accent: "_17bwkb0a-3-14-0" }, disabled: { true: "_17bwkb0b-3-14-0", false: "_17bwkb0c-3-14-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_17bwkb0d-3-14-0"], [{ color: "success", variant: "accent" }, "_17bwkb0e-3-14-0"], [{ color: "warning", variant: "accent" }, "_17bwkb0f-3-14-0"], [{ color: "critical", variant: "accent" }, "_17bwkb0g-3-14-0"], [{ color: "neutral", variant: "accent" }, "_17bwkb0h-3-14-0"], [{ color: "primary", disabled: true }, "_17bwkb0i-3-14-0"], [{ color: "success", disabled: true }, "_17bwkb0j-3-14-0"], [{ color: "warning", disabled: true }, "_17bwkb0k-3-14-0"], [{ color: "critical", disabled: true }, "_17bwkb0l-3-14-0"], [{ color: "neutral", disabled: true }, "_17bwkb0m-3-14-0"]] });
+var colorUtilsVars = { text: "var(--_17bwkb00-3-14-0)", icon: "var(--_17bwkb01-3-14-0)", borderColor: "var(--_17bwkb02-3-14-0)" };
 export {
   colorUtils,
   colorUtilsVars

package/esm/styles/colorUtils.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styles/colorUtils.css.ts"],
-  "sourcesContent": ["import './colorUtils.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var colorUtils = _7a468({defaultClassName:'_17bwkb03-3-13-3',variantClassNames:{color:{critical:'_17bwkb04-3-13-3',neutral:'_17bwkb05-3-13-3',primary:'_17bwkb06-3-13-3',success:'_17bwkb07-3-13-3',warning:'_17bwkb08-3-13-3'},variant:{'default':'_17bwkb09-3-13-3',accent:'_17bwkb0a-3-13-3'},disabled:{true:'_17bwkb0b-3-13-3',false:'_17bwkb0c-3-13-3'}},defaultVariants:{},compoundVariants:[[{color:'primary',variant:'accent'},'_17bwkb0d-3-13-3'],[{color:'success',variant:'accent'},'_17bwkb0e-3-13-3'],[{color:'warning',variant:'accent'},'_17bwkb0f-3-13-3'],[{color:'critical',variant:'accent'},'_17bwkb0g-3-13-3'],[{color:'neutral',variant:'accent'},'_17bwkb0h-3-13-3'],[{color:'primary',disabled:true},'_17bwkb0i-3-13-3'],[{color:'success',disabled:true},'_17bwkb0j-3-13-3'],[{color:'warning',disabled:true},'_17bwkb0k-3-13-3'],[{color:'critical',disabled:true},'_17bwkb0l-3-13-3'],[{color:'neutral',disabled:true},'_17bwkb0m-3-13-3']]});\nexport var colorUtilsVars = {text:'var(--_17bwkb00-3-13-3)',icon:'var(--_17bwkb01-3-13-3)',borderColor:'var(--_17bwkb02-3-13-3)'};"],
+  "sourcesContent": ["import './colorUtils.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var colorUtils = _7a468({defaultClassName:'_17bwkb03-3-14-0',variantClassNames:{color:{critical:'_17bwkb04-3-14-0',neutral:'_17bwkb05-3-14-0',primary:'_17bwkb06-3-14-0',success:'_17bwkb07-3-14-0',warning:'_17bwkb08-3-14-0'},variant:{'default':'_17bwkb09-3-14-0',accent:'_17bwkb0a-3-14-0'},disabled:{true:'_17bwkb0b-3-14-0',false:'_17bwkb0c-3-14-0'}},defaultVariants:{},compoundVariants:[[{color:'primary',variant:'accent'},'_17bwkb0d-3-14-0'],[{color:'success',variant:'accent'},'_17bwkb0e-3-14-0'],[{color:'warning',variant:'accent'},'_17bwkb0f-3-14-0'],[{color:'critical',variant:'accent'},'_17bwkb0g-3-14-0'],[{color:'neutral',variant:'accent'},'_17bwkb0h-3-14-0'],[{color:'primary',disabled:true},'_17bwkb0i-3-14-0'],[{color:'success',disabled:true},'_17bwkb0j-3-14-0'],[{color:'warning',disabled:true},'_17bwkb0k-3-14-0'],[{color:'critical',disabled:true},'_17bwkb0l-3-14-0'],[{color:'neutral',disabled:true},'_17bwkb0m-3-14-0']]});\nexport var colorUtilsVars = {text:'var(--_17bwkb00-3-14-0)',icon:'var(--_17bwkb01-3-14-0)',borderColor:'var(--_17bwkb02-3-14-0)'};"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,OAAM,EAAC,UAAS,oBAAmB,SAAQ,oBAAmB,SAAQ,oBAAmB,SAAQ,oBAAmB,SAAQ,mBAAkB,GAAE,SAAQ,EAAC,WAAU,oBAAmB,QAAO,mBAAkB,GAAE,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,SAAQ,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;AACv6B,IAAI,iBAAiB,EAAC,MAAK,2BAA0B,MAAK,2BAA0B,aAAY,0BAAyB;",
   "names": []
 }