@descope/web-components-ui 2.2.13 → 2.2.15

package/dist/index.esm.js

@@ -19809,10 +19809,10 @@ const mode = {
   surface: globalRefs$H.colors.surface,
 };
 
-const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1({ mode }, componentName$19);
+const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$19);
 
 const button = {
-  ...helperTheme$5,
+  ...helperTheme$6,
 
   [compVars$9.fontFamily]: globalRefs$H.fonts.font1.family,
 
@@ -19864,66 +19864,66 @@ const button = {
 
   _loading: {
     [compVars$9.cursor]: 'wait',
-    [compVars$9.labelTextColor]: helperRefs$5.main,
+    [compVars$9.labelTextColor]: helperRefs$6.main,
   },
 
   _disabled: {
-    [helperVars$5.main]: globalRefs$H.colors.surface.light,
-    [helperVars$5.dark]: globalRefs$H.colors.surface.dark,
-    [helperVars$5.light]: globalRefs$H.colors.surface.light,
-    [helperVars$5.contrast]: globalRefs$H.colors.surface.main,
+    [helperVars$6.main]: globalRefs$H.colors.surface.light,
+    [helperVars$6.dark]: globalRefs$H.colors.surface.dark,
+    [helperVars$6.light]: globalRefs$H.colors.surface.light,
+    [helperVars$6.contrast]: globalRefs$H.colors.surface.main,
     [compVars$9.iconColor]: globalRefs$H.colors.surface.main,
   },
 
   variant: {
     contained: {
-      [compVars$9.labelTextColor]: helperRefs$5.contrast,
-      [compVars$9.backgroundColor]: helperRefs$5.main,
+      [compVars$9.labelTextColor]: helperRefs$6.contrast,
+      [compVars$9.backgroundColor]: helperRefs$6.main,
       _hover: {
-        [compVars$9.backgroundColor]: helperRefs$5.dark,
+        [compVars$9.backgroundColor]: helperRefs$6.dark,
         _loading: {
-          [compVars$9.backgroundColor]: helperRefs$5.main,
+          [compVars$9.backgroundColor]: helperRefs$6.main,
         },
       },
       _active: {
-        [compVars$9.backgroundColor]: helperRefs$5.main,
+        [compVars$9.backgroundColor]: helperRefs$6.main,
       },
     },
 
     outline: {
-      [compVars$9.labelTextColor]: helperRefs$5.main,
-      [compVars$9.borderColor]: helperRefs$5.main,
+      [compVars$9.labelTextColor]: helperRefs$6.main,
+      [compVars$9.borderColor]: helperRefs$6.main,
       _hover: {
-        [compVars$9.labelTextColor]: helperRefs$5.dark,
-        [compVars$9.borderColor]: helperRefs$5.dark,
+        [compVars$9.labelTextColor]: helperRefs$6.dark,
+        [compVars$9.borderColor]: helperRefs$6.dark,
       },
       _active: {
-        [compVars$9.labelTextColor]: helperRefs$5.main,
-        [compVars$9.borderColor]: helperRefs$5.main,
+        [compVars$9.labelTextColor]: helperRefs$6.main,
+        [compVars$9.borderColor]: helperRefs$6.main,
       },
     },
 
     link: {
-      [compVars$9.labelTextColor]: helperRefs$5.main,
+      [compVars$9.labelTextColor]: helperRefs$6.main,
       [compVars$9.horizontalPadding]: '0.125em',
       _hover: {
-        [compVars$9.labelTextColor]: helperRefs$5.dark,
+        [compVars$9.labelTextColor]: helperRefs$6.dark,
         [compVars$9.labelTextDecoration]: 'underline',
       },
       _active: {
-        [compVars$9.labelTextColor]: helperRefs$5.main,
+        [compVars$9.labelTextColor]: helperRefs$6.main,
       },
     },
   },
 
   _focused: {
-    [compVars$9.outlineColor]: helperRefs$5.light,
+    [compVars$9.outlineColor]: helperRefs$6.light,
   },
 };
 
 const vars$13 = {
   ...compVars$9,
-  ...helperVars$5,
+  ...helperVars$6,
 };
 
 var button$1 = /*#__PURE__*/Object.freeze({
@@ -20471,7 +20471,7 @@ const horizontalAlignment = {
   end: { horizontalAlignment: 'end' },
 };
 
-const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars(
+const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars(
   {
     verticalAlignment,
     horizontalAlignment,
@@ -20480,10 +20480,10 @@ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars(
   componentName$1d
 );
 
-const { shadowColor: shadowColor$4 } = helperRefs$4;
+const { shadowColor: shadowColor$5 } = helperRefs$5;
 
 const container = {
-  ...helperTheme$4,
+  ...helperTheme$5,
 
   [compVars$8.itemsGrow]: '0',
   [compVars$8.hostWidth]: '100%',
@@ -20520,22 +20520,22 @@ const container = {
   direction: {
     row: {
       [compVars$8.flexDirection]: 'row',
-      [compVars$8.alignItems]: helperRefs$4.verticalAlignment,
-      [compVars$8.justifyContent]: helperRefs$4.horizontalAlignment,
+      [compVars$8.alignItems]: helperRefs$5.verticalAlignment,
+      [compVars$8.justifyContent]: helperRefs$5.horizontalAlignment,
       [compVars$8.flexWrap]: 'wrap',
       horizontalAlignment: {
         spaceBetween: {
-          [helperVars$4.horizontalAlignment]: 'space-between',
+          [helperVars$5.horizontalAlignment]: 'space-between',
         },
       },
     },
     column: {
       [compVars$8.flexDirection]: 'column',
-      [compVars$8.alignItems]: helperRefs$4.horizontalAlignment,
-      [compVars$8.justifyContent]: helperRefs$4.verticalAlignment,
+      [compVars$8.alignItems]: helperRefs$5.horizontalAlignment,
+      [compVars$8.justifyContent]: helperRefs$5.verticalAlignment,
       verticalAlignment: {
         spaceBetween: {
-          [helperVars$4.verticalAlignment]: 'space-between',
+          [helperVars$5.verticalAlignment]: 'space-between',
         },
       },
     },
@@ -20549,20 +20549,20 @@ const container = {
 
   shadow: {
     sm: {
-      [compVars$8.boxShadow]: `${globalRefs$C.shadow.wide.sm} ${shadowColor$4}, ${globalRefs$C.shadow.narrow.sm} ${shadowColor$4}`,
+      [compVars$8.boxShadow]: `${globalRefs$C.shadow.wide.sm} ${shadowColor$5}, ${globalRefs$C.shadow.narrow.sm} ${shadowColor$5}`,
     },
     md: {
-      [compVars$8.boxShadow]: `${globalRefs$C.shadow.wide.md} ${shadowColor$4}, ${globalRefs$C.shadow.narrow.md} ${shadowColor$4}`,
+      [compVars$8.boxShadow]: `${globalRefs$C.shadow.wide.md} ${shadowColor$5}, ${globalRefs$C.shadow.narrow.md} ${shadowColor$5}`,
     },
     lg: {
-      [compVars$8.boxShadow]: `${globalRefs$C.shadow.wide.lg} ${shadowColor$4}, ${globalRefs$C.shadow.narrow.lg} ${shadowColor$4}`,
+      [compVars$8.boxShadow]: `${globalRefs$C.shadow.wide.lg} ${shadowColor$5}, ${globalRefs$C.shadow.narrow.lg} ${shadowColor$5}`,
     },
     xl: {
-      [compVars$8.boxShadow]: `${globalRefs$C.shadow.wide.xl} ${shadowColor$4}, ${globalRefs$C.shadow.narrow.xl} ${shadowColor$4}`,
+      [compVars$8.boxShadow]: `${globalRefs$C.shadow.wide.xl} ${shadowColor$5}, ${globalRefs$C.shadow.narrow.xl} ${shadowColor$5}`,
     },
     '2xl': {
-      [helperVars$4.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$8.boxShadow]: `${globalRefs$C.shadow.wide['2xl']} ${shadowColor$4}`,
+      [helperVars$5.shadowColor]: '#00000050', // mimic daisyUI shadow settings
+      [compVars$8.boxShadow]: `${globalRefs$C.shadow.wide['2xl']} ${shadowColor$5}`,
     },
   },
 
@@ -20579,7 +20579,7 @@ const container = {
 
 const vars$W = {
   ...compVars$8,
-  ...helperVars$4,
+  ...helperVars$5,
 };
 
 var container$1 = /*#__PURE__*/Object.freeze({
@@ -20804,7 +20804,7 @@ var enrichedText$1 = /*#__PURE__*/Object.freeze({
 const globalRefs$y = getThemeRefs(globals$1);
 const compVars$7 = DividerClass.cssVarList;
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
+const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars(
   {
     thickness: '2px',
     spacing: '10px',
@@ -20813,7 +20813,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
 );
 
 const divider = {
-  ...helperTheme$3,
+  ...helperTheme$4,
 
   [compVars$7.hostDirection]: globalRefs$y.direction,
   [compVars$7.alignItems]: 'center',
@@ -20822,27 +20822,27 @@ const divider = {
   [compVars$7.hostWidth]: '100%',
   [compVars$7.stripeColor]: globalRefs$y.colors.surface.light,
   [compVars$7.stripeColorOpacity]: '0.5',
-  [compVars$7.stripeHorizontalThickness]: helperRefs$3.thickness,
+  [compVars$7.stripeHorizontalThickness]: helperRefs$4.thickness,
   [compVars$7.labelTextWidth]: 'fit-content',
   [compVars$7.labelTextMaxWidth]: 'calc(100% - 100px)',
-  [compVars$7.labelTextHorizontalSpacing]: helperRefs$3.spacing,
+  [compVars$7.labelTextHorizontalSpacing]: helperRefs$4.spacing,
   [compVars$7.textAlign]: 'center',
 
   _vertical: {
     [compVars$7.minHeight]: '200px',
     [compVars$7.flexDirection]: 'column',
     [compVars$7.hostWidth]: 'fit-content',
-    [compVars$7.hostPadding]: `0 calc(${helperRefs$3.thickness} * 3)`,
-    [compVars$7.stripeVerticalThickness]: helperRefs$3.thickness,
+    [compVars$7.hostPadding]: `0 calc(${helperRefs$4.thickness} * 3)`,
+    [compVars$7.stripeVerticalThickness]: helperRefs$4.thickness,
     [compVars$7.labelTextWidth]: 'fit-content',
     [compVars$7.labelTextMaxWidth]: '100%',
-    [compVars$7.labelTextVerticalSpacing]: helperRefs$3.spacing,
+    [compVars$7.labelTextVerticalSpacing]: helperRefs$4.spacing,
   },
 };
 
 const vars$P = {
   ...compVars$7,
-  ...helperVars$3,
+  ...helperVars$4,
 };
 
 var divider$1 = /*#__PURE__*/Object.freeze({
@@ -20948,7 +20948,7 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
 const globalRefs$w = getThemeRefs(globals$1);
 const compVars$6 = LoaderRadialClass.cssVarList;
 
-const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
   {
     spinnerColor: globalRefs$w.colors.surface.contrast,
     mode: {
@@ -20964,7 +20964,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
 );
 
 const loaderRadial = {
-  ...helperTheme$2,
+  ...helperTheme$3,
 
   [compVars$6.animationDuration]: '2s',
   [compVars$6.animationTimingFunction]: 'linear',
@@ -20972,9 +20972,9 @@ const loaderRadial = {
   [compVars$6.spinnerBorderStyle]: 'solid',
   [compVars$6.spinnerBorderWidth]: '0.2em',
   [compVars$6.spinnerBorderRadius]: '50%',
-  [compVars$6.spinnerQuadrant1Color]: helperRefs$2.spinnerColor,
+  [compVars$6.spinnerQuadrant1Color]: helperRefs$3.spinnerColor,
   [compVars$6.spinnerQuadrant2Color]: 'transparent',
-  [compVars$6.spinnerQuadrant3Color]: helperRefs$2.spinnerColor,
+  [compVars$6.spinnerQuadrant3Color]: helperRefs$3.spinnerColor,
   [compVars$6.spinnerQuadrant4Color]: 'transparent',
 
   size: {
@@ -20991,7 +20991,7 @@ const loaderRadial = {
 };
 const vars$M = {
   ...compVars$6,
-  ...helperVars$2,
+  ...helperVars$3,
 };
 
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
@@ -21591,7 +21591,7 @@ var grid$1 = /*#__PURE__*/Object.freeze({
 const globalRefs$o = getThemeRefs(globals$1);
 const vars$B = NotificationCardClass.cssVarList;
 
-const shadowColor$3 = '#00000020';
+const shadowColor$4 = '#00000020';
 
 const notification = {
   [vars$B.hostMinWidth]: '415px',
@@ -21599,7 +21599,7 @@ const notification = {
   [vars$B.fontSize]: globalRefs$o.typography.body1.size,
   [vars$B.backgroundColor]: globalRefs$o.colors.surface.main,
   [vars$B.textColor]: globalRefs$o.colors.surface.contrast,
-  [vars$B.boxShadow]: `${globalRefs$o.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$o.shadow.narrow.xl} ${shadowColor$3}`,
+  [vars$B.boxShadow]: `${globalRefs$o.shadow.wide.xl} ${shadowColor$4}, ${globalRefs$o.shadow.narrow.xl} ${shadowColor$4}`,
   [vars$B.verticalPadding]: '0.625em',
   [vars$B.horizontalPadding]: '1.5em',
   [vars$B.borderRadius]: globalRefs$o.radius.xs,
@@ -22421,7 +22421,7 @@ var calendar$1 = /*#__PURE__*/Object.freeze({
 });
 
 const globalRefs$c = getThemeRefs(globals$1);
-const shadowColor$2 = '#00000020';
+const shadowColor$3 = '#00000020';
 const { shadow } = globalRefs$c;
 
 const vars$m = DateFieldClass.cssVarList;
@@ -22435,7 +22435,7 @@ const dateField = {
   [vars$m.overlay.backgroundColor]: refs$1.backgroundColor,
   [vars$m.overlay.backdropBackgroundColor]: 'transparent',
   [vars$m.overlay.backdropPointerEvents]: 'all',
-  [vars$m.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$2}, ${shadow.narrow.xl} ${shadowColor$2}`,
+  [vars$m.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$3}, ${shadow.narrow.xl} ${shadowColor$3}`,
   [vars$m.overlay.outlineWidth]: '0',
   [vars$m.overlay.outlineColor]: 'transparent',
   [vars$m.overlay.outlineStyle]: 'none',
@@ -22657,15 +22657,15 @@ const globalRefs$a = getThemeRefs$1(globals);
 
 const compVars$3 = ListClass.cssVarList;
 
-const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars$1(
+const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars$1(
   { shadowColor: '#00000020' },
   componentName$n
 );
 
-const { shadowColor: shadowColor$1 } = helperRefs$1;
+const { shadowColor: shadowColor$2 } = helperRefs$2;
 
 const list = {
-  ...helperTheme$1,
+  ...helperTheme$2,
 
   [compVars$3.hostWidth]: '100%',
   [compVars$3.backgroundColor]: globalRefs$a.colors.surface.main,
@@ -22677,7 +22677,7 @@ const list = {
   [compVars$3.gap]: globalRefs$a.spacing.md,
   [compVars$3.verticalPadding]: globalRefs$a.spacing.lg,
   [compVars$3.horizontalPadding]: globalRefs$a.spacing.lg,
-  [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.sm} ${shadowColor$1}`,
+  [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.sm} ${shadowColor$2}, ${globalRefs$a.shadow.narrow.sm} ${shadowColor$2}`,
   [compVars$3.maxHeight]: '100%',
   [compVars$3.hostDirection]: globalRefs$a.direction,
   [compVars$3.minItemsWidth]: '150px',
@@ -22701,7 +22701,7 @@ const list = {
 
 const vars$k = {
   ...compVars$3,
-  ...helperVars$1,
+  ...helperVars$2,
 };
 
 var list$1 = /*#__PURE__*/Object.freeze({
@@ -24688,17 +24688,17 @@ const globalRefs$2 = getThemeRefs$1(globals);
 
 const compVars$1 = CollapsibleContainerClass.cssVarList;
 
-const [helperTheme, helperRefs, helperVars] = createHelperVars$1(
+const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
   componentName$5
 );
 
-const { shadowColor } = helperRefs;
+const { shadowColor: shadowColor$1 } = helperRefs$1;
 
 const collapsibleContainer = {
-  ...helperTheme,
+  ...helperTheme$1,
 
   [compVars$1.hostWidth]: '100%',
   [compVars$1.boxShadow]: 'none',
@@ -24746,20 +24746,20 @@ const collapsibleContainer = {
 
   shadow: {
     sm: {
-      [compVars$1.boxShadow]: `${globalRefs$2.shadow.wide.sm} ${shadowColor}, ${globalRefs$2.shadow.narrow.sm} ${shadowColor}`,
+      [compVars$1.boxShadow]: `${globalRefs$2.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$2.shadow.narrow.sm} ${shadowColor$1}`,
     },
     md: {
-      [compVars$1.boxShadow]: `${globalRefs$2.shadow.wide.md} ${shadowColor}, ${globalRefs$2.shadow.narrow.md} ${shadowColor}`,
+      [compVars$1.boxShadow]: `${globalRefs$2.shadow.wide.md} ${shadowColor$1}, ${globalRefs$2.shadow.narrow.md} ${shadowColor$1}`,
     },
     lg: {
-      [compVars$1.boxShadow]: `${globalRefs$2.shadow.wide.lg} ${shadowColor}, ${globalRefs$2.shadow.narrow.lg} ${shadowColor}`,
+      [compVars$1.boxShadow]: `${globalRefs$2.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$2.shadow.narrow.lg} ${shadowColor$1}`,
     },
     xl: {
-      [compVars$1.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${shadowColor}`,
+      [compVars$1.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$2.shadow.narrow.xl} ${shadowColor$1}`,
     },
     '2xl': {
-      [helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$1.boxShadow]: `${globalRefs$2.shadow.wide['2xl']} ${shadowColor}`,
+      [helperVars$1.shadowColor]: '#00000050', // mimic daisyUI shadow settings
+      [compVars$1.boxShadow]: `${globalRefs$2.shadow.wide['2xl']} ${shadowColor$1}`,
     },
   },
 
@@ -24794,7 +24794,7 @@ const collapsibleContainer = {
 
 const vars$6 = {
   ...compVars$1,
-  ...helperVars,
+  ...helperVars$1,
 };
 
 var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
@@ -25889,6 +25889,24 @@ class RawTooltip extends BaseClass {
     return this.getAttribute('text')?.trim() || '';
   }
 
+  get isStaticDisplay() {
+    return this.getAttribute('static-display') === 'true';
+  }
+
+  // We use `static-display` for presentation purposes, to show the tooltip content.
+  // This should be used only when `opened` is `true`. Once `static-display` is set,
+  // the overlay would become a `static` element, and will have layout in the presenting page.
+  // This is mainly aimed to solve the presentation problem on our Styles Page in the Console.
+  #handleStaticDisplay() {
+    if (this.isStaticDisplay) {
+      this.#revealWrappedParts();
+      this.setAttribute('inert', 'true');
+    } else {
+      this.#hideWrappedParts();
+      this.removeAttribute('inert');
+    }
+  }
+
   init() {
     super.init();
 
@@ -25897,15 +25915,29 @@ class RawTooltip extends BaseClass {
     this.insertAdjacentHTML('beforeend', '<vaadin-tooltip></vaadin-tooltip>');
     this.tooltip = this.querySelector('vaadin-tooltip');
 
+    this.#hideWrappedParts();
+
+    this.#setTooltipTarget();
+
+    setTimeout(() => this.#onOverlayReady());
+  }
+
+  #hideWrappedParts() {
     this.tooltip.style.width = '0';
     this.tooltip.style.height = '0';
     this.tooltip.style.display = 'block';
     this.tooltip.style.overflow = 'hidden';
     this.tooltip.style.position = 'absolute';
-
-    this.#setTooltipTarget();
-
-    setTimeout(() => this.#onOverlayReady());
+  }
+  
+  #revealWrappedParts() {
+    this.tooltip.style.width = '100%';
+    this.tooltip.style.height = '100%';
+    this.tooltip.style.position = 'static';
+    this.tooltip.style.overflow = 'visible';
+    this.tooltip.textContent = '';
+    this.overlay.style.display = 'block';
+    this.overlay.style.position = 'static';
   }
 
   #onOverlayReady() {
@@ -25970,7 +26002,10 @@ class RawTooltip extends BaseClass {
       // When `opened` attr is used, vaadin doesn't execute `_attachOverlay`,
       // and the overlay element is rendered outside the component, on the top
       // level. We need to move it back to the local component's DOM.
-      setTimeout(() => this.tooltip.shadowRoot.appendChild(this.overlay));
+      setTimeout(() => {
+        this.tooltip.shadowRoot.appendChild(this.overlay);
+        this.#handleStaticDisplay();
+      });
     } else {
       this.overlay._detachOverlay = () => {};
 
@@ -26064,7 +26099,18 @@ const TooltipClass = compose$1(
 const globalRefs = getThemeRefs$1(globals);
 const vars$1 = TooltipClass.cssVarList;
 
+const [helperTheme, helperRefs, helperVars] = createHelperVars$1(
+  {
+    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
+  },
+  componentName
+);
+
+const { shadowColor } = helperRefs;
+const defaultShadow = `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`;
+
 const tooltip = {
+  ...helperTheme,
   [vars$1.fontFamily]: globalRefs.fonts.font1.family,
   [vars$1.fontSize]: globals.typography.body2.size,
   [vars$1.fontWeight]: globals.typography.body2.weight,
@@ -26077,7 +26123,26 @@ const tooltip = {
   [vars$1.borderRadius]: globalRefs.radius.xs,
   [vars$1.horizontalPadding]: globalRefs.spacing.md,
   [vars$1.verticalPadding]: globalRefs.spacing.sm,
-  [vars$1.boxShadow]: globalRefs.shadow.wide.sm,
+  [vars$1.boxShadow]: defaultShadow,
+
+  shadow: {
+    sm: {
+      [vars$1.boxShadow]: defaultShadow,
+    },
+    md: {
+      [vars$1.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}`,
+    },
+    lg: {
+      [vars$1.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}`,
+    },
+    xl: {
+      [vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
+    },
+    '2xl': {
+      [helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
+      [vars$1.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`,
+    },
+  },
 };
 
 var tooltip$1 = /*#__PURE__*/Object.freeze({