@descope/flow-components 2.2.13 → 2.2.15

package/dist/index.cjs.js

@@ -82899,10 +82899,10 @@ function requireIndex_cjs () {
 	  surface: globalRefs$H.colors.surface,
 	};
 
-	const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1({ mode }, componentName$1e);
+	const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$1e);
 
 	const button = {
-	  ...helperTheme$5,
+	  ...helperTheme$6,
 
 	  [compVars$9.fontFamily]: globalRefs$H.fonts.font1.family,
 
@@ -82954,66 +82954,66 @@ function requireIndex_cjs () {
 
 	  _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({
@@ -86531,7 +86531,7 @@ descope-enriched-text {
 	  end: { horizontalAlignment: 'end' },
 	};
 
-	const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars(
+	const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars(
 	  {
 	    verticalAlignment,
 	    horizontalAlignment,
@@ -86540,10 +86540,10 @@ descope-enriched-text {
 	  componentName$13
 	);
 
-	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%',
@@ -86580,22 +86580,22 @@ descope-enriched-text {
 	  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',
 	        },
 	      },
 	    },
@@ -86609,20 +86609,20 @@ descope-enriched-text {
 
 	  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}`,
 	    },
 	  },
 
@@ -86639,7 +86639,7 @@ descope-enriched-text {
 
 	const vars$W = {
 	  ...compVars$8,
-	  ...helperVars$4,
+	  ...helperVars$5,
 	};
 
 	var container$1 = /*#__PURE__*/Object.freeze({
@@ -87194,7 +87194,7 @@ descope-enriched-text {
 	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',
@@ -87203,7 +87203,7 @@ descope-enriched-text {
 	);
 
 	const divider = {
-	  ...helperTheme$3,
+	  ...helperTheme$4,
 
 	  [compVars$7.hostDirection]: globalRefs$y.direction,
 	  [compVars$7.alignItems]: 'center',
@@ -87212,27 +87212,27 @@ descope-enriched-text {
 	  [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({
@@ -87686,7 +87686,7 @@ descope-enriched-text {
 	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: {
@@ -87702,7 +87702,7 @@ descope-enriched-text {
 	);
 
 	const loaderRadial = {
-	  ...helperTheme$2,
+	  ...helperTheme$3,
 
 	  [compVars$6.animationDuration]: '2s',
 	  [compVars$6.animationTimingFunction]: 'linear',
@@ -87710,9 +87710,9 @@ descope-enriched-text {
 	  [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: {
@@ -87729,7 +87729,7 @@ descope-enriched-text {
 	};
 	const vars$M = {
 	  ...compVars$6,
-	  ...helperVars$2,
+	  ...helperVars$3,
 	};
 
 	var loaderRadial$1 = /*#__PURE__*/Object.freeze({
@@ -92847,7 +92847,7 @@ descope-enriched-text {
 	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',
@@ -92855,7 +92855,7 @@ descope-enriched-text {
 	  [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,
@@ -97730,7 +97730,7 @@ descope-enriched-text {
 	)(RawDateFieldClass);
 
 	const globalRefs$c = getThemeRefs(globals$1);
-	const shadowColor$2 = '#00000020';
+	const shadowColor$3 = '#00000020';
 	const { shadow } = globalRefs$c;
 
 	const vars$m = DateFieldClass.cssVarList;
@@ -97744,7 +97744,7 @@ descope-enriched-text {
 	  [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',
@@ -98196,15 +98196,15 @@ descope-enriched-text {
 
 	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,
@@ -98216,7 +98216,7 @@ descope-enriched-text {
 	  [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',
@@ -98240,7 +98240,7 @@ descope-enriched-text {
 
 	const vars$k = {
 	  ...compVars$3,
-	  ...helperVars$1,
+	  ...helperVars$2,
 	};
 
 	var list$1 = /*#__PURE__*/Object.freeze({
@@ -101462,17 +101462,17 @@ descope-enriched-text {
 
 	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$7
 	);
 
-	const { shadowColor } = helperRefs;
+	const { shadowColor: shadowColor$1 } = helperRefs$1;
 
 	const collapsibleContainer = {
-	  ...helperTheme,
+	  ...helperTheme$1,
 
 	  [compVars$1.hostWidth]: '100%',
 	  [compVars$1.boxShadow]: 'none',
@@ -101520,20 +101520,20 @@ descope-enriched-text {
 
 	  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}`,
 	    },
 	  },
 
@@ -101568,7 +101568,7 @@ descope-enriched-text {
 
 	const vars$6 = {
 	  ...compVars$1,
-	  ...helperVars,
+	  ...helperVars$1,
 	};
 
 	var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
@@ -102663,6 +102663,24 @@ descope-enriched-text {
 	    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();
 
@@ -102671,15 +102689,29 @@ descope-enriched-text {
 	    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() {
@@ -102744,7 +102776,10 @@ descope-enriched-text {
 	      // 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 = () => {};
 
@@ -102838,7 +102873,18 @@ descope-enriched-text {
 	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$2
+	);
+
+	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,
@@ -102851,7 +102897,26 @@ descope-enriched-text {
 	  [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({
@@ -103594,7 +103659,7 @@ const Icon = ({ icon, noColor, ...props }) => {
     return React__default.default.createElement("descope-icon", { "fill-color": noColor, src: icon });
 };
 
-const Tooltip = React__default.default.forwardRef(({ text, hideDelay = 0, hoverDelay = 0, children, readonly, ...props }, ref) => (React__default.default.createElement("descope-tooltip", { text: text, "hide-delay": hideDelay, "hover-delay": hoverDelay, readonly: readonly, ref: ref, ...props }, children)));
+const Tooltip = React__default.default.forwardRef(({ text, hideDelay = 0, hoverDelay = 0, children, readonly, staticDisplay, ...props }, ref) => (React__default.default.createElement("descope-tooltip", { text: text, "hide-delay": hideDelay, "hover-delay": hoverDelay, readonly: readonly, "static-display": staticDisplay, ref: ref, ...props }, children)));
 
 const Button = React__default.default.forwardRef(({ 
 // Button props

package/dist/index.d.ts

@@ -134,6 +134,7 @@ type Props$M = {
     hideDelay?: number;
     opened?: boolean;
     readonly?: boolean;
+    staticDisplay?: boolean;
     children?: React.ReactNode;
 };
 declare module 'react' {
@@ -158,6 +159,7 @@ interface ITooltip {
     tooltipHideDelay?: number;
     tooltipOpened?: boolean;
     tooltipReadOnly?: boolean;
+    tooltipStaticDisplay?: boolean;
 }
 
 declare global {

package/dist/index.esm.js

@@ -152,7 +152,7 @@ const Icon = ({ icon, noColor, ...props }) => {
     return React.createElement("descope-icon", { "fill-color": noColor, src: icon });
 };
 
-const Tooltip = React.forwardRef(({ text, hideDelay = 0, hoverDelay = 0, children, readonly, ...props }, ref) => (React.createElement("descope-tooltip", { text: text, "hide-delay": hideDelay, "hover-delay": hoverDelay, readonly: readonly, ref: ref, ...props }, children)));
+const Tooltip = React.forwardRef(({ text, hideDelay = 0, hoverDelay = 0, children, readonly, staticDisplay, ...props }, ref) => (React.createElement("descope-tooltip", { text: text, "hide-delay": hideDelay, "hover-delay": hoverDelay, readonly: readonly, "static-display": staticDisplay, ref: ref, ...props }, children)));
 
 const Button = React.forwardRef(({ 
 // Button props

package/dist/types/Tooltip/Tooltip.d.ts

@@ -7,6 +7,7 @@ type Props = {
     hideDelay?: number;
     opened?: boolean;
     readonly?: boolean;
+    staticDisplay?: boolean;
     children?: React.ReactNode;
 };
 declare module 'react' {
@@ -31,4 +32,5 @@ export interface ITooltip {
     tooltipHideDelay?: number;
     tooltipOpened?: boolean;
     tooltipReadOnly?: boolean;
+    tooltipStaticDisplay?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/flow-components",
-  "version": "2.2.13",
+  "version": "2.2.15",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -96,7 +96,7 @@
     "webpack-dev-server": "5.2.2"
   },
   "dependencies": {
-    "@descope/web-components-ui": "2.2.13"
+    "@descope/web-components-ui": "2.2.15"
   },
   "peerDependencies": {
     "react": ">= 18"