@descope/web-components-ui 1.0.296 → 1.0.298

package/dist/cjs/index.cjs.js

@@ -2,6 +2,7 @@
 
 var merge = require('lodash.merge');
 var Color = require('color');
+var markdownit = require('markdown-it');
 
 const DESCOPE_PREFIX = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
@@ -630,7 +631,7 @@ const globals = {
   fonts,
   direction,
 };
-const vars$E = getThemeVars(globals);
+const vars$F = getThemeVars(globals);
 
 const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
 
@@ -2576,7 +2577,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$N = getComponentName('button');
+const componentName$O = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -2678,7 +2679,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$N,
+    componentName: componentName$O,
   })
 );
 
@@ -2715,31 +2716,31 @@ loadingIndicatorStyles = `
 	}
 `;
 
-const globalRefs$n = getThemeRefs(globals);
+const globalRefs$o = getThemeRefs(globals);
 const compVars$5 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$n.colors.primary,
-  secondary: globalRefs$n.colors.secondary,
-  success: globalRefs$n.colors.success,
-  error: globalRefs$n.colors.error,
-  surface: globalRefs$n.colors.surface,
+  primary: globalRefs$o.colors.primary,
+  secondary: globalRefs$o.colors.secondary,
+  success: globalRefs$o.colors.success,
+  error: globalRefs$o.colors.error,
+  surface: globalRefs$o.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$N);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$O);
 
 const button = {
   ...helperTheme$3,
 
-  [compVars$5.fontFamily]: globalRefs$n.fonts.font1.family,
+  [compVars$5.fontFamily]: globalRefs$o.fonts.font1.family,
 
   [compVars$5.cursor]: 'pointer',
   [compVars$5.hostHeight]: '3em',
   [compVars$5.hostWidth]: 'auto',
-  [compVars$5.hostDirection]: globalRefs$n.direction,
+  [compVars$5.hostDirection]: globalRefs$o.direction,
 
-  [compVars$5.borderRadius]: globalRefs$n.radius.sm,
-  [compVars$5.borderWidth]: globalRefs$n.border.xs,
+  [compVars$5.borderRadius]: globalRefs$o.radius.sm,
+  [compVars$5.borderWidth]: globalRefs$o.border.xs,
   [compVars$5.borderStyle]: 'solid',
   [compVars$5.borderColor]: 'transparent',
 
@@ -2782,10 +2783,10 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$n.colors.surface.light,
-    [helperVars$3.dark]: globalRefs$n.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$n.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$n.colors.surface.main,
+    [helperVars$3.main]: globalRefs$o.colors.surface.light,
+    [helperVars$3.dark]: globalRefs$o.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$o.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$o.colors.surface.main,
   },
 
   variant: {
@@ -2833,7 +2834,7 @@ const button = {
   },
 };
 
-const vars$D = {
+const vars$E = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -2841,7 +2842,7 @@ const vars$D = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$D
+  vars: vars$E
 });
 
 const {
@@ -3049,7 +3050,7 @@ const resetInputLabelPosition = (name) => `
     }
 `;
 
-const componentName$M = getComponentName('text-field');
+const componentName$N = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -3099,29 +3100,29 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$M,
+    componentName: componentName$N,
   })
 );
 
-const componentName$L = getComponentName('input-wrapper');
-const globalRefs$m = getThemeRefs(globals);
+const componentName$M = getComponentName('input-wrapper');
+const globalRefs$n = getThemeRefs(globals);
 
-const [theme$1, refs, vars$C] = createHelperVars(
+const [theme$1, refs, vars$D] = createHelperVars(
   {
-    labelTextColor: globalRefs$m.colors.surface.dark,
+    labelTextColor: globalRefs$n.colors.surface.dark,
     labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
-    valueTextColor: globalRefs$m.colors.surface.contrast,
-    placeholderTextColor: globalRefs$m.colors.surface.dark,
+    valueTextColor: globalRefs$n.colors.surface.contrast,
+    placeholderTextColor: globalRefs$n.colors.surface.dark,
     requiredIndicator: "'*'",
-    helperTextColor: globalRefs$m.colors.surface.dark,
-    errorMessageTextColor: globalRefs$m.colors.error.main,
-    successMessageTextColor: globalRefs$m.colors.success.main,
+    helperTextColor: globalRefs$n.colors.surface.dark,
+    errorMessageTextColor: globalRefs$n.colors.error.main,
+    successMessageTextColor: globalRefs$n.colors.success.main,
 
-    borderWidth: globalRefs$m.border.xs,
-    borderRadius: globalRefs$m.radius.xs,
+    borderWidth: globalRefs$n.border.xs,
+    borderRadius: globalRefs$n.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$m.border.sm,
+    outlineWidth: globalRefs$n.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -3132,11 +3133,11 @@ const [theme$1, refs, vars$C] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$m.colors.surface.main,
+    backgroundColor: globalRefs$n.colors.surface.main,
 
-    fontFamily: globalRefs$m.fonts.font1.family,
+    fontFamily: globalRefs$n.fonts.font1.family,
 
-    direction: globalRefs$m.direction,
+    direction: globalRefs$n.direction,
 
     overlayOpacity: '0.3',
 
@@ -3152,69 +3153,69 @@ const [theme$1, refs, vars$C] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$m.colors.surface.light,
+      outlineColor: globalRefs$n.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$m.colors.error.main,
+        outlineColor: globalRefs$n.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$m.border.xs,
-      borderColor: globalRefs$m.colors.surface.light,
+      outlineWidth: globalRefs$n.border.xs,
+      borderColor: globalRefs$n.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$m.colors.error.main,
+        borderColor: globalRefs$n.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$m.colors.surface.light,
-      borderColor: globalRefs$m.colors.surface.light,
-      valueTextColor: globalRefs$m.colors.surface.light,
-      placeholderTextColor: globalRefs$m.colors.surface.light,
-      helperTextColor: globalRefs$m.colors.surface.light,
-      backgroundColor: globalRefs$m.colors.surface.main,
+      labelTextColor: globalRefs$n.colors.surface.light,
+      borderColor: globalRefs$n.colors.surface.light,
+      valueTextColor: globalRefs$n.colors.surface.light,
+      placeholderTextColor: globalRefs$n.colors.surface.light,
+      helperTextColor: globalRefs$n.colors.surface.light,
+      backgroundColor: globalRefs$n.colors.surface.main,
     },
   },
-  componentName$L
+  componentName$M
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$C
+  vars: vars$D
 });
 
-const vars$B = TextFieldClass.cssVarList;
+const vars$C = TextFieldClass.cssVarList;
 
 const textField$1 = {
-  [vars$B.hostWidth]: refs.width,
-  [vars$B.hostMinWidth]: refs.minWidth,
-  [vars$B.hostDirection]: refs.direction,
-  [vars$B.fontSize]: refs.fontSize,
-  [vars$B.fontFamily]: refs.fontFamily,
-  [vars$B.labelTextColor]: refs.labelTextColor,
-  [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$B.inputValueTextColor]: refs.valueTextColor,
-  [vars$B.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$B.inputBorderWidth]: refs.borderWidth,
-  [vars$B.inputBorderStyle]: refs.borderStyle,
-  [vars$B.inputBorderColor]: refs.borderColor,
-  [vars$B.inputBorderRadius]: refs.borderRadius,
-  [vars$B.inputOutlineWidth]: refs.outlineWidth,
-  [vars$B.inputOutlineStyle]: refs.outlineStyle,
-  [vars$B.inputOutlineColor]: refs.outlineColor,
-  [vars$B.inputOutlineOffset]: refs.outlineOffset,
-  [vars$B.inputBackgroundColor]: refs.backgroundColor,
-  [vars$B.inputHeight]: refs.inputHeight,
-  [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$B.helperTextColor]: refs.helperTextColor,
+  [vars$C.hostWidth]: refs.width,
+  [vars$C.hostMinWidth]: refs.minWidth,
+  [vars$C.hostDirection]: refs.direction,
+  [vars$C.fontSize]: refs.fontSize,
+  [vars$C.fontFamily]: refs.fontFamily,
+  [vars$C.labelTextColor]: refs.labelTextColor,
+  [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$C.inputValueTextColor]: refs.valueTextColor,
+  [vars$C.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$C.inputBorderWidth]: refs.borderWidth,
+  [vars$C.inputBorderStyle]: refs.borderStyle,
+  [vars$C.inputBorderColor]: refs.borderColor,
+  [vars$C.inputBorderRadius]: refs.borderRadius,
+  [vars$C.inputOutlineWidth]: refs.outlineWidth,
+  [vars$C.inputOutlineStyle]: refs.outlineStyle,
+  [vars$C.inputOutlineColor]: refs.outlineColor,
+  [vars$C.inputOutlineOffset]: refs.outlineOffset,
+  [vars$C.inputBackgroundColor]: refs.backgroundColor,
+  [vars$C.inputHeight]: refs.inputHeight,
+  [vars$C.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$C.helperTextColor]: refs.helperTextColor,
   textAlign: {
-    right: { [vars$B.inputTextAlign]: 'right' },
-    left: { [vars$B.inputTextAlign]: 'left' },
-    center: { [vars$B.inputTextAlign]: 'center' },
+    right: { [vars$C.inputTextAlign]: 'right' },
+    left: { [vars$C.inputTextAlign]: 'left' },
+    center: { [vars$C.inputTextAlign]: 'center' },
   },
 };
 
@@ -3222,7 +3223,7 @@ var textField$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textField$1,
   textField: textField$1,
-  vars: vars$B
+  vars: vars$C
 });
 
 const passwordDraggableMixin = (superclass) =>
@@ -3259,7 +3260,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$K = getComponentName('password');
+const componentName$L = getComponentName('password');
 
 const {
   host: host$l,
@@ -3388,46 +3389,46 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$K,
+    componentName: componentName$L,
   })
 );
 
-const globalRefs$l = getThemeRefs(globals);
-const vars$A = PasswordClass.cssVarList;
+const globalRefs$m = getThemeRefs(globals);
+const vars$B = PasswordClass.cssVarList;
 
 const password = {
-  [vars$A.hostWidth]: refs.width,
-  [vars$A.hostDirection]: refs.direction,
-  [vars$A.fontSize]: refs.fontSize,
-  [vars$A.fontFamily]: refs.fontFamily,
-  [vars$A.labelTextColor]: refs.labelTextColor,
-  [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$A.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$A.inputHeight]: refs.inputHeight,
-  [vars$A.inputBackgroundColor]: refs.backgroundColor,
-  [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$A.inputValueTextColor]: refs.valueTextColor,
-  [vars$A.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$A.inputBorderWidth]: refs.borderWidth,
-  [vars$A.inputBorderStyle]: refs.borderStyle,
-  [vars$A.inputBorderColor]: refs.borderColor,
-  [vars$A.inputBorderRadius]: refs.borderRadius,
-  [vars$A.inputOutlineWidth]: refs.outlineWidth,
-  [vars$A.inputOutlineStyle]: refs.outlineStyle,
-  [vars$A.inputOutlineColor]: refs.outlineColor,
-  [vars$A.inputOutlineOffset]: refs.outlineOffset,
-  [vars$A.revealButtonOffset]: globalRefs$l.spacing.md,
-  [vars$A.revealButtonSize]: refs.toggleButtonSize,
-  [vars$A.revealButtonColor]: refs.placeholderTextColor,
+  [vars$B.hostWidth]: refs.width,
+  [vars$B.hostDirection]: refs.direction,
+  [vars$B.fontSize]: refs.fontSize,
+  [vars$B.fontFamily]: refs.fontFamily,
+  [vars$B.labelTextColor]: refs.labelTextColor,
+  [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$B.inputHeight]: refs.inputHeight,
+  [vars$B.inputBackgroundColor]: refs.backgroundColor,
+  [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$B.inputValueTextColor]: refs.valueTextColor,
+  [vars$B.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$B.inputBorderWidth]: refs.borderWidth,
+  [vars$B.inputBorderStyle]: refs.borderStyle,
+  [vars$B.inputBorderColor]: refs.borderColor,
+  [vars$B.inputBorderRadius]: refs.borderRadius,
+  [vars$B.inputOutlineWidth]: refs.outlineWidth,
+  [vars$B.inputOutlineStyle]: refs.outlineStyle,
+  [vars$B.inputOutlineColor]: refs.outlineColor,
+  [vars$B.inputOutlineOffset]: refs.outlineOffset,
+  [vars$B.revealButtonOffset]: globalRefs$m.spacing.md,
+  [vars$B.revealButtonSize]: refs.toggleButtonSize,
+  [vars$B.revealButtonColor]: refs.placeholderTextColor,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: password,
-  vars: vars$A
+  vars: vars$B
 });
 
-const componentName$J = getComponentName('number-field');
+const componentName$K = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -3453,43 +3454,43 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$J,
+    componentName: componentName$K,
   })
 );
 
-const vars$z = NumberFieldClass.cssVarList;
+const vars$A = NumberFieldClass.cssVarList;
 
 const numberField = {
-  [vars$z.hostWidth]: refs.width,
-  [vars$z.hostMinWidth]: refs.minWidth,
-  [vars$z.hostDirection]: refs.direction,
-  [vars$z.fontSize]: refs.fontSize,
-  [vars$z.fontFamily]: refs.fontFamily,
-  [vars$z.labelTextColor]: refs.labelTextColor,
-  [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$z.inputValueTextColor]: refs.valueTextColor,
-  [vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$z.inputBorderWidth]: refs.borderWidth,
-  [vars$z.inputBorderStyle]: refs.borderStyle,
-  [vars$z.inputBorderColor]: refs.borderColor,
-  [vars$z.inputBorderRadius]: refs.borderRadius,
-  [vars$z.inputOutlineWidth]: refs.outlineWidth,
-  [vars$z.inputOutlineStyle]: refs.outlineStyle,
-  [vars$z.inputOutlineColor]: refs.outlineColor,
-  [vars$z.inputOutlineOffset]: refs.outlineOffset,
-  [vars$z.inputBackgroundColor]: refs.backgroundColor,
-  [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$z.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$z.inputHeight]: refs.inputHeight,
+  [vars$A.hostWidth]: refs.width,
+  [vars$A.hostMinWidth]: refs.minWidth,
+  [vars$A.hostDirection]: refs.direction,
+  [vars$A.fontSize]: refs.fontSize,
+  [vars$A.fontFamily]: refs.fontFamily,
+  [vars$A.labelTextColor]: refs.labelTextColor,
+  [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$A.inputValueTextColor]: refs.valueTextColor,
+  [vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$A.inputBorderWidth]: refs.borderWidth,
+  [vars$A.inputBorderStyle]: refs.borderStyle,
+  [vars$A.inputBorderColor]: refs.borderColor,
+  [vars$A.inputBorderRadius]: refs.borderRadius,
+  [vars$A.inputOutlineWidth]: refs.outlineWidth,
+  [vars$A.inputOutlineStyle]: refs.outlineStyle,
+  [vars$A.inputOutlineColor]: refs.outlineColor,
+  [vars$A.inputOutlineOffset]: refs.outlineOffset,
+  [vars$A.inputBackgroundColor]: refs.backgroundColor,
+  [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$A.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$A.inputHeight]: refs.inputHeight,
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: numberField,
-  vars: vars$z
+  vars: vars$A
 });
 
-const componentName$I = getComponentName('email-field');
+const componentName$J = getComponentName('email-field');
 
 const customMixin$7 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
@@ -3524,43 +3525,43 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$I,
+    componentName: componentName$J,
   })
 );
 
-const vars$y = EmailFieldClass.cssVarList;
+const vars$z = EmailFieldClass.cssVarList;
 
 const emailField = {
-  [vars$y.hostWidth]: refs.width,
-  [vars$y.hostMinWidth]: refs.minWidth,
-  [vars$y.hostDirection]: refs.direction,
-  [vars$y.fontSize]: refs.fontSize,
-  [vars$y.fontFamily]: refs.fontFamily,
-  [vars$y.labelTextColor]: refs.labelTextColor,
-  [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$y.inputValueTextColor]: refs.valueTextColor,
-  [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$y.inputBorderWidth]: refs.borderWidth,
-  [vars$y.inputBorderStyle]: refs.borderStyle,
-  [vars$y.inputBorderColor]: refs.borderColor,
-  [vars$y.inputBorderRadius]: refs.borderRadius,
-  [vars$y.inputOutlineWidth]: refs.outlineWidth,
-  [vars$y.inputOutlineStyle]: refs.outlineStyle,
-  [vars$y.inputOutlineColor]: refs.outlineColor,
-  [vars$y.inputOutlineOffset]: refs.outlineOffset,
-  [vars$y.inputBackgroundColor]: refs.backgroundColor,
-  [vars$y.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$y.inputHeight]: refs.inputHeight,
+  [vars$z.hostWidth]: refs.width,
+  [vars$z.hostMinWidth]: refs.minWidth,
+  [vars$z.hostDirection]: refs.direction,
+  [vars$z.fontSize]: refs.fontSize,
+  [vars$z.fontFamily]: refs.fontFamily,
+  [vars$z.labelTextColor]: refs.labelTextColor,
+  [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$z.inputValueTextColor]: refs.valueTextColor,
+  [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$z.inputBorderWidth]: refs.borderWidth,
+  [vars$z.inputBorderStyle]: refs.borderStyle,
+  [vars$z.inputBorderColor]: refs.borderColor,
+  [vars$z.inputBorderRadius]: refs.borderRadius,
+  [vars$z.inputOutlineWidth]: refs.outlineWidth,
+  [vars$z.inputOutlineStyle]: refs.outlineStyle,
+  [vars$z.inputOutlineColor]: refs.outlineColor,
+  [vars$z.inputOutlineOffset]: refs.outlineOffset,
+  [vars$z.inputBackgroundColor]: refs.backgroundColor,
+  [vars$z.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$z.inputHeight]: refs.inputHeight,
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: emailField,
-  vars: vars$y
+  vars: vars$z
 });
 
-const componentName$H = getComponentName('text-area');
+const componentName$I = getComponentName('text-area');
 
 const {
   host: host$k,
@@ -3636,49 +3637,49 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$H,
+    componentName: componentName$I,
   })
 );
 
-const vars$x = TextAreaClass.cssVarList;
+const vars$y = TextAreaClass.cssVarList;
 
 const textArea = {
-  [vars$x.hostWidth]: refs.width,
-  [vars$x.hostMinWidth]: refs.minWidth,
-  [vars$x.hostDirection]: refs.direction,
-  [vars$x.fontSize]: refs.fontSize,
-  [vars$x.fontFamily]: refs.fontFamily,
-  [vars$x.labelTextColor]: refs.labelTextColor,
-  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$x.inputBackgroundColor]: refs.backgroundColor,
-  [vars$x.inputValueTextColor]: refs.valueTextColor,
-  [vars$x.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$x.inputBorderRadius]: refs.borderRadius,
-  [vars$x.inputBorderWidth]: refs.borderWidth,
-  [vars$x.inputBorderStyle]: refs.borderStyle,
-  [vars$x.inputBorderColor]: refs.borderColor,
-  [vars$x.inputOutlineWidth]: refs.outlineWidth,
-  [vars$x.inputOutlineStyle]: refs.outlineStyle,
-  [vars$x.inputOutlineColor]: refs.outlineColor,
-  [vars$x.inputOutlineOffset]: refs.outlineOffset,
-  [vars$x.inputResizeType]: 'vertical',
-  [vars$x.inputMinHeight]: '5em',
+  [vars$y.hostWidth]: refs.width,
+  [vars$y.hostMinWidth]: refs.minWidth,
+  [vars$y.hostDirection]: refs.direction,
+  [vars$y.fontSize]: refs.fontSize,
+  [vars$y.fontFamily]: refs.fontFamily,
+  [vars$y.labelTextColor]: refs.labelTextColor,
+  [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$y.inputBackgroundColor]: refs.backgroundColor,
+  [vars$y.inputValueTextColor]: refs.valueTextColor,
+  [vars$y.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$y.inputBorderRadius]: refs.borderRadius,
+  [vars$y.inputBorderWidth]: refs.borderWidth,
+  [vars$y.inputBorderStyle]: refs.borderStyle,
+  [vars$y.inputBorderColor]: refs.borderColor,
+  [vars$y.inputOutlineWidth]: refs.outlineWidth,
+  [vars$y.inputOutlineStyle]: refs.outlineStyle,
+  [vars$y.inputOutlineColor]: refs.outlineColor,
+  [vars$y.inputOutlineOffset]: refs.outlineOffset,
+  [vars$y.inputResizeType]: 'vertical',
+  [vars$y.inputMinHeight]: '5em',
   textAlign: {
-    right: { [vars$x.inputTextAlign]: 'right' },
-    left: { [vars$x.inputTextAlign]: 'left' },
-    center: { [vars$x.inputTextAlign]: 'center' },
+    right: { [vars$y.inputTextAlign]: 'right' },
+    left: { [vars$y.inputTextAlign]: 'left' },
+    center: { [vars$y.inputTextAlign]: 'center' },
   },
 
   _readonly: {
-    [vars$x.inputResizeType]: 'none',
+    [vars$y.inputResizeType]: 'none',
   },
 };
 
 var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textArea,
-  vars: vars$x
+  vars: vars$y
 });
 
 const createBaseInputClass = (...args) =>
@@ -3689,9 +3690,9 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$G = getComponentName('boolean-field-internal');
+const componentName$H = getComponentName('boolean-field-internal');
 
-createBaseInputClass({ componentName: componentName$G, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$H, baseSelector: 'div' });
 
 const booleanFieldMixin = (superclass) =>
   class BooleanFieldMixinClass extends superclass {
@@ -3700,14 +3701,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$G}
+				<${componentName$H}
 					tabindex="-1"
 					slot="input"
-				></${componentName$G}>
+				></${componentName$H}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$G);
+      this.inputElement = this.shadowRoot.querySelector(componentName$H);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -3777,7 +3778,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$F = getComponentName('checkbox');
+const componentName$G = getComponentName('checkbox');
 
 const {
   host: host$j,
@@ -3883,51 +3884,51 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$F,
+    componentName: componentName$G,
   })
 );
 
-const vars$w = CheckboxClass.cssVarList;
+const vars$x = CheckboxClass.cssVarList;
 const checkboxSize = '1.35em';
 
 const checkbox = {
-  [vars$w.hostWidth]: refs.width,
-  [vars$w.hostDirection]: refs.direction,
-  [vars$w.fontSize]: refs.fontSize,
-  [vars$w.fontFamily]: refs.fontFamily,
-  [vars$w.labelTextColor]: refs.labelTextColor,
-  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$w.labelFontWeight]: '400',
-  [vars$w.labelLineHeight]: checkboxSize,
-  [vars$w.labelSpacing]: '1em',
-  [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$w.inputOutlineWidth]: refs.outlineWidth,
-  [vars$w.inputOutlineOffset]: refs.outlineOffset,
-  [vars$w.inputOutlineColor]: refs.outlineColor,
-  [vars$w.inputOutlineStyle]: refs.outlineStyle,
-  [vars$w.inputBorderRadius]: refs.borderRadius,
-  [vars$w.inputBorderColor]: refs.borderColor,
-  [vars$w.inputBorderWidth]: refs.borderWidth,
-  [vars$w.inputBorderStyle]: refs.borderStyle,
-  [vars$w.inputBackgroundColor]: refs.backgroundColor,
-  [vars$w.inputSize]: checkboxSize,
+  [vars$x.hostWidth]: refs.width,
+  [vars$x.hostDirection]: refs.direction,
+  [vars$x.fontSize]: refs.fontSize,
+  [vars$x.fontFamily]: refs.fontFamily,
+  [vars$x.labelTextColor]: refs.labelTextColor,
+  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$x.labelFontWeight]: '400',
+  [vars$x.labelLineHeight]: checkboxSize,
+  [vars$x.labelSpacing]: '1em',
+  [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$x.inputOutlineWidth]: refs.outlineWidth,
+  [vars$x.inputOutlineOffset]: refs.outlineOffset,
+  [vars$x.inputOutlineColor]: refs.outlineColor,
+  [vars$x.inputOutlineStyle]: refs.outlineStyle,
+  [vars$x.inputBorderRadius]: refs.borderRadius,
+  [vars$x.inputBorderColor]: refs.borderColor,
+  [vars$x.inputBorderWidth]: refs.borderWidth,
+  [vars$x.inputBorderStyle]: refs.borderStyle,
+  [vars$x.inputBackgroundColor]: refs.backgroundColor,
+  [vars$x.inputSize]: checkboxSize,
 
   _checked: {
-    [vars$w.inputValueTextColor]: refs.valueTextColor,
+    [vars$x.inputValueTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$w.labelTextColor]: refs.labelTextColor,
+    [vars$x.labelTextColor]: refs.labelTextColor,
   },
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: checkbox,
-  vars: vars$w
+  vars: vars$x
 });
 
-const componentName$E = getComponentName('switch-toggle');
+const componentName$F = getComponentName('switch-toggle');
 
 const {
   host: host$i,
@@ -4059,82 +4060,82 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$E,
+    componentName: componentName$F,
   })
 );
 
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
-const globalRefs$k = getThemeRefs(globals);
-const vars$v = SwitchToggleClass.cssVarList;
+const globalRefs$l = getThemeRefs(globals);
+const vars$w = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
-  [vars$v.hostWidth]: refs.width,
-  [vars$v.hostDirection]: refs.direction,
-  [vars$v.fontSize]: refs.fontSize,
-  [vars$v.fontFamily]: refs.fontFamily,
-
-  [vars$v.inputOutlineWidth]: refs.outlineWidth,
-  [vars$v.inputOutlineOffset]: refs.outlineOffset,
-  [vars$v.inputOutlineColor]: refs.outlineColor,
-  [vars$v.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$v.trackBorderStyle]: refs.borderStyle,
-  [vars$v.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$v.trackBorderColor]: refs.borderColor,
-  [vars$v.trackBackgroundColor]: refs.backgroundColor,
-  [vars$v.trackBorderRadius]: globalRefs$k.radius.md,
-  [vars$v.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$v.trackHeight]: checkboxHeight,
-
-  [vars$v.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$v.knobRadius]: '50%',
-  [vars$v.knobTopOffset]: '1px',
-  [vars$v.knobLeftOffset]: knobMargin,
-  [vars$v.knobColor]: refs.labelTextColor,
-  [vars$v.knobTransitionDuration]: '0.3s',
-
-  [vars$v.labelTextColor]: refs.labelTextColor,
-  [vars$v.labelFontWeight]: '400',
-  [vars$v.labelLineHeight]: '1.35em',
-  [vars$v.labelSpacing]: '1em',
-  [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$w.hostWidth]: refs.width,
+  [vars$w.hostDirection]: refs.direction,
+  [vars$w.fontSize]: refs.fontSize,
+  [vars$w.fontFamily]: refs.fontFamily,
+
+  [vars$w.inputOutlineWidth]: refs.outlineWidth,
+  [vars$w.inputOutlineOffset]: refs.outlineOffset,
+  [vars$w.inputOutlineColor]: refs.outlineColor,
+  [vars$w.inputOutlineStyle]: refs.outlineStyle,
+
+  [vars$w.trackBorderStyle]: refs.borderStyle,
+  [vars$w.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$w.trackBorderColor]: refs.borderColor,
+  [vars$w.trackBackgroundColor]: refs.backgroundColor,
+  [vars$w.trackBorderRadius]: globalRefs$l.radius.md,
+  [vars$w.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$w.trackHeight]: checkboxHeight,
+
+  [vars$w.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$w.knobRadius]: '50%',
+  [vars$w.knobTopOffset]: '1px',
+  [vars$w.knobLeftOffset]: knobMargin,
+  [vars$w.knobColor]: refs.labelTextColor,
+  [vars$w.knobTransitionDuration]: '0.3s',
+
+  [vars$w.labelTextColor]: refs.labelTextColor,
+  [vars$w.labelFontWeight]: '400',
+  [vars$w.labelLineHeight]: '1.35em',
+  [vars$w.labelSpacing]: '1em',
+  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$v.trackBorderColor]: refs.borderColor,
-    [vars$v.knobLeftOffset]: `calc(100% - var(${vars$v.knobSize}) - ${knobMargin})`,
-    [vars$v.knobColor]: refs.valueTextColor,
-    [vars$v.knobTextColor]: refs.valueTextColor,
+    [vars$w.trackBorderColor]: refs.borderColor,
+    [vars$w.knobLeftOffset]: `calc(100% - var(${vars$w.knobSize}) - ${knobMargin})`,
+    [vars$w.knobColor]: refs.valueTextColor,
+    [vars$w.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$v.knobColor]: globalRefs$k.colors.surface.light,
-    [vars$v.trackBorderColor]: globalRefs$k.colors.surface.light,
-    [vars$v.trackBackgroundColor]: globalRefs$k.colors.surface.main,
-    [vars$v.labelTextColor]: refs.labelTextColor,
+    [vars$w.knobColor]: globalRefs$l.colors.surface.light,
+    [vars$w.trackBorderColor]: globalRefs$l.colors.surface.light,
+    [vars$w.trackBackgroundColor]: globalRefs$l.colors.surface.main,
+    [vars$w.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$v.knobColor]: globalRefs$k.colors.surface.light,
-      [vars$v.trackBackgroundColor]: globalRefs$k.colors.surface.main,
+      [vars$w.knobColor]: globalRefs$l.colors.surface.light,
+      [vars$w.trackBackgroundColor]: globalRefs$l.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$v.trackBorderColor]: globalRefs$k.colors.error.main,
-    [vars$v.knobColor]: globalRefs$k.colors.error.main,
+    [vars$w.trackBorderColor]: globalRefs$l.colors.error.main,
+    [vars$w.knobColor]: globalRefs$l.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$v
+  vars: vars$w
 });
 
-const componentName$D = getComponentName('container');
+const componentName$E = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$D, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$E, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -4187,7 +4188,7 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-const globalRefs$j = getThemeRefs(globals);
+const globalRefs$k = getThemeRefs(globals);
 
 const compVars$4 = ContainerClass.cssVarList;
 
@@ -4209,7 +4210,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$D
+  componentName$E
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -4219,10 +4220,10 @@ const container = {
 
   [compVars$4.hostWidth]: '100%',
   [compVars$4.boxShadow]: 'none',
-  [compVars$4.backgroundColor]: globalRefs$j.colors.surface.main,
-  [compVars$4.color]: globalRefs$j.colors.surface.contrast,
+  [compVars$4.backgroundColor]: globalRefs$k.colors.surface.main,
+  [compVars$4.color]: globalRefs$k.colors.surface.contrast,
   [compVars$4.borderRadius]: '0px',
-  [compVars$4.hostDirection]: globalRefs$j.direction,
+  [compVars$4.hostDirection]: globalRefs$k.direction,
 
   verticalPadding: {
     sm: { [compVars$4.verticalPadding]: '5px' },
@@ -4268,34 +4269,34 @@ const container = {
 
   shadow: {
     sm: {
-      [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.sm} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.sm} ${shadowColor$1}`,
     },
     md: {
-      [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.md} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.md} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.md} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.md} ${shadowColor$1}`,
     },
     lg: {
-      [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.lg} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.lg} ${shadowColor$1}`,
     },
     xl: {
-      [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.xl} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.xl} ${shadowColor$1}`,
     },
     '2xl': {
       [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide['2xl']} ${shadowColor$1}`,
+      [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide['2xl']} ${shadowColor$1}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$4.borderRadius]: globalRefs$j.radius.sm },
-    md: { [compVars$4.borderRadius]: globalRefs$j.radius.md },
-    lg: { [compVars$4.borderRadius]: globalRefs$j.radius.lg },
-    xl: { [compVars$4.borderRadius]: globalRefs$j.radius.xl },
-    '2xl': { [compVars$4.borderRadius]: globalRefs$j.radius['2xl'] },
-    '3xl': { [compVars$4.borderRadius]: globalRefs$j.radius['3xl'] },
+    sm: { [compVars$4.borderRadius]: globalRefs$k.radius.sm },
+    md: { [compVars$4.borderRadius]: globalRefs$k.radius.md },
+    lg: { [compVars$4.borderRadius]: globalRefs$k.radius.lg },
+    xl: { [compVars$4.borderRadius]: globalRefs$k.radius.xl },
+    '2xl': { [compVars$4.borderRadius]: globalRefs$k.radius['2xl'] },
+    '3xl': { [compVars$4.borderRadius]: globalRefs$k.radius['3xl'] },
   },
 };
 
-const vars$u = {
+const vars$v = {
   ...compVars$4,
   ...helperVars$2,
 };
@@ -4303,7 +4304,7 @@ const vars$u = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$u
+  vars: vars$v
 });
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4356,91 +4357,68 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$C = getComponentName('logo');
+const componentName$D = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$C,
+  componentName: componentName$D,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$t = LogoClass.cssVarList;
+const vars$u = LogoClass.cssVarList;
 
 const logo$2 = {
-  [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$t
+  vars: vars$u
 });
 
-const componentName$B = getComponentName('totp-image');
+const componentName$C = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$B,
+  componentName: componentName$C,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$s = TotpImageClass.cssVarList;
+const vars$t = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$s
+  vars: vars$t
 });
 
-const componentName$A = getComponentName('notp-image');
+const componentName$B = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$A,
+  componentName: componentName$B,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$r = NotpImageClass.cssVarList;
+const vars$s = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$r
+  vars: vars$s
 });
 
-// eslint-disable-next-line max-classes-per-file
-
-const componentName$z = getComponentName('text');
-
-class RawText extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > slot' }) {
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			:host {
-				display: inline-block;
-			}
-			:host > slot {
-				width: 100%;
-				display: inline-block;
-			}
-		</style>
-		<slot part="text-wrapper"></slot>
-		`;
-  }
-}
-
-const customTextMixin = (superclass) =>
-  class CustomTextMixin extends superclass {
+const hideWhenEmptyMixin = (superclass) =>
+  class HideWhenEmptyMixinClass extends superclass {
     get hideWhenEmpty() {
       return this.getAttribute('hide-when-empty') === 'true';
     }
@@ -4455,6 +4433,35 @@ const customTextMixin = (superclass) =>
     }
   };
 
+const createBaseTextClass = (componentName) => {
+  class BaseText extends createBaseClass({ componentName, baseSelector: ':host > slot' }) {
+    constructor() {
+      super();
+
+      this.attachShadow({ mode: 'open' }).innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+        }
+        :host > slot {
+          width: 100%;
+          display: inline-block;
+        }
+      </style>
+      <slot part="text-wrapper"></slot>
+      `;
+
+      this.textSlot = this.shadowRoot.querySelector('slot');
+    }
+  }
+
+  return BaseText;
+};
+
+const componentName$A = getComponentName('text');
+
+const BaseTextClass = createBaseTextClass(componentName$A);
+
 const TextClass = compose(
   createStyleMixin({
     mappings: {
@@ -4477,17 +4484,261 @@ const TextClass = compose(
   }),
   draggableMixin,
   componentNameValidationMixin,
-  customTextMixin
-)(RawText);
+  hideWhenEmptyMixin
+)(BaseTextClass);
 
-const globalRefs$i = getThemeRefs(globals);
-const vars$q = TextClass.cssVarList;
+const globalRefs$j = getThemeRefs(globals);
+const vars$r = TextClass.cssVarList;
 
 const text$2 = {
+  [vars$r.hostDirection]: globalRefs$j.direction,
+  [vars$r.textLineHeight]: '1.35em',
+  [vars$r.textAlign]: 'left',
+  [vars$r.textColor]: globalRefs$j.colors.surface.dark,
+  variant: {
+    h1: {
+      [vars$r.fontSize]: globalRefs$j.typography.h1.size,
+      [vars$r.fontWeight]: globalRefs$j.typography.h1.weight,
+      [vars$r.fontFamily]: globalRefs$j.typography.h1.font,
+    },
+    h2: {
+      [vars$r.fontSize]: globalRefs$j.typography.h2.size,
+      [vars$r.fontWeight]: globalRefs$j.typography.h2.weight,
+      [vars$r.fontFamily]: globalRefs$j.typography.h2.font,
+    },
+    h3: {
+      [vars$r.fontSize]: globalRefs$j.typography.h3.size,
+      [vars$r.fontWeight]: globalRefs$j.typography.h3.weight,
+      [vars$r.fontFamily]: globalRefs$j.typography.h3.font,
+    },
+    subtitle1: {
+      [vars$r.fontSize]: globalRefs$j.typography.subtitle1.size,
+      [vars$r.fontWeight]: globalRefs$j.typography.subtitle1.weight,
+      [vars$r.fontFamily]: globalRefs$j.typography.subtitle1.font,
+    },
+    subtitle2: {
+      [vars$r.fontSize]: globalRefs$j.typography.subtitle2.size,
+      [vars$r.fontWeight]: globalRefs$j.typography.subtitle2.weight,
+      [vars$r.fontFamily]: globalRefs$j.typography.subtitle2.font,
+    },
+    body1: {
+      [vars$r.fontSize]: globalRefs$j.typography.body1.size,
+      [vars$r.fontWeight]: globalRefs$j.typography.body1.weight,
+      [vars$r.fontFamily]: globalRefs$j.typography.body1.font,
+    },
+    body2: {
+      [vars$r.fontSize]: globalRefs$j.typography.body2.size,
+      [vars$r.fontWeight]: globalRefs$j.typography.body2.weight,
+      [vars$r.fontFamily]: globalRefs$j.typography.body2.font,
+    },
+  },
+
+  mode: {
+    primary: {
+      [vars$r.textColor]: globalRefs$j.colors.surface.contrast,
+    },
+    secondary: {
+      [vars$r.textColor]: globalRefs$j.colors.surface.dark,
+    },
+    error: {
+      [vars$r.textColor]: globalRefs$j.colors.error.main,
+    },
+    success: {
+      [vars$r.textColor]: globalRefs$j.colors.success.main,
+    },
+  },
+
+  textAlign: {
+    right: { [vars$r.textAlign]: 'right' },
+    left: { [vars$r.textAlign]: 'left' },
+    center: { [vars$r.textAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars$r.hostWidth]: '100%',
+  },
+
+  _italic: {
+    [vars$r.fontStyle]: 'italic',
+  },
+
+  _uppercase: {
+    [vars$r.textTransform]: 'uppercase',
+  },
+
+  _lowercase: {
+    [vars$r.textTransform]: 'lowercase',
+  },
+};
+
+var text$3 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: text$2,
+  vars: vars$r
+});
+
+const customEleMap = {
+  a: 'descope-link',
+};
+
+const getTokenTag = (token) => customEleMap[token.tag] || token.tag;
+
+const isImageToken = (token) => token?.children?.[0].type === 'image';
+
+const enrichTokens = (tokens) =>
+  tokens.map((token) => {
+    const tag = getTokenTag(token);
+
+    if (isImageToken(token)) {
+      token.children[0].attrs.push(['style', 'width:100%']);
+      return {
+        ...token,
+        tag,
+      };
+    }
+
+    if (token?.children?.length > 0) {
+      return {
+        ...token,
+        tag,
+        children: enrichTokens(token.children),
+      };
+    }
+
+    return {
+      ...token,
+      tag,
+    };
+  });
+
+const onClipboardCopy = (e) => {
+  const selection = document.getSelection().toString();
+  const clipdata = e.clipboardData || window.clipboardData;
+  clipdata.setData('text/plain', selection);
+  clipdata.setData('text/html', selection);
+  e.preventDefault();
+};
+
+const componentName$z = getComponentName('enriched-text');
+
+const BaseEnrichedTextClass = createBaseTextClass(componentName$z);
+
+const EnrichedTextMixin = (superclass) =>
+  class EnrichedTextMixinClass extends superclass {
+    static get observedAttributes() {
+      return ['disabled-rules', 'line-break'];
+    }
+
+    get lineBreak() {
+      return this.getAttribute('line-break');
+    }
+
+    get disabledRules() {
+      return (this.getAttribute('disabled-rules') || '').split(',').filter(Boolean);
+    }
+
+    init() {
+      super.init();
+      this.#initProcessor();
+      this.textSlot.addEventListener('slotchange', this.#parseChildren.bind(this));
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+      if (attrName === 'disabled-rules') {
+        if (newValue !== oldValue) {
+          this.#initProcessor(newValue);
+          this.#parseChildren();
+        }
+      }
+    }
+
+    #initProcessor() {
+      this.processor = markdownit({ breaks: this.lineBreak }).disable(this.disabledRules);
+    }
+
+    #parseChildren() {
+      const node = this.textSlot.assignedNodes({ flatten: true })?.[0];
+
+      if (node && node.nodeType === Node.TEXT_NODE) {
+        const tokens = this.processor.parse(node.textContent, { references: undefined });
+        const result = this.processor.renderer.render(enrichTokens(tokens), {
+          breaks: this.lineBreak,
+        });
+
+        if (result !== node.textContent) {
+          const span = document.createElement('div');
+          span.classList.add('enriched-text');
+          // eslint-disable-next-line no-use-before-define
+          span.innerHTML = `${getStyleReset()}${result}`;
+          span.addEventListener('copy', onClipboardCopy);
+          node.parentNode.replaceChild(span, node);
+        }
+      }
+    }
+  };
+
+const EnrichedTextClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+      fontWeight: {},
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      marginReset: { selector: '*', property: 'margin' },
+      textAlign: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  EnrichedTextMixin,
+  hideWhenEmptyMixin
+)(BaseEnrichedTextClass);
+
+function getStyleReset() {
+  return `
+  <style>
+    .enriched-text > * { margin:0 }
+    .enriched-text > *:not(:only-child):not(:last-child) {
+      margin-bottom: var(${EnrichedTextClass.cssVarList.textLineHeight})
+    }
+  </style>
+  `;
+}
+
+const globalRefs$i = getThemeRefs(globals);
+const vars$q = EnrichedTextClass.cssVarList;
+
+const EnrichedText = {
   [vars$q.hostDirection]: globalRefs$i.direction,
+
+  [vars$q.fontSize]: globalRefs$i.typography.body1.size,
+  [vars$q.fontWeight]: globalRefs$i.typography.body1.weight,
+  [vars$q.fontFamily]: globalRefs$i.typography.body1.font,
+
   [vars$q.textLineHeight]: '1.35em',
   [vars$q.textAlign]: 'left',
   [vars$q.textColor]: globalRefs$i.colors.surface.dark,
+
+  mode: {
+    primary: {
+      [vars$q.textColor]: globalRefs$i.colors.surface.contrast,
+    },
+    secondary: {
+      [vars$q.textColor]: globalRefs$i.colors.surface.dark,
+    },
+    error: {
+      [vars$q.textColor]: globalRefs$i.colors.error.main,
+    },
+    success: {
+      [vars$q.textColor]: globalRefs$i.colors.success.main,
+    },
+  },
+
   variant: {
     h1: {
       [vars$q.fontSize]: globalRefs$i.typography.h1.size,
@@ -4526,21 +4777,6 @@ const text$2 = {
     },
   },
 
-  mode: {
-    primary: {
-      [vars$q.textColor]: globalRefs$i.colors.surface.contrast,
-    },
-    secondary: {
-      [vars$q.textColor]: globalRefs$i.colors.surface.dark,
-    },
-    error: {
-      [vars$q.textColor]: globalRefs$i.colors.error.main,
-    },
-    success: {
-      [vars$q.textColor]: globalRefs$i.colors.success.main,
-    },
-  },
-
   textAlign: {
     right: { [vars$q.textAlign]: 'right' },
     left: { [vars$q.textAlign]: 'left' },
@@ -4550,23 +4786,11 @@ const text$2 = {
   _fullWidth: {
     [vars$q.hostWidth]: '100%',
   },
-
-  _italic: {
-    [vars$q.fontStyle]: 'italic',
-  },
-
-  _uppercase: {
-    [vars$q.textTransform]: 'uppercase',
-  },
-
-  _lowercase: {
-    [vars$q.textTransform]: 'lowercase',
-  },
 };
 
-var text$3 = /*#__PURE__*/Object.freeze({
+var EnrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: text$2,
+  default: EnrichedText,
   vars: vars$q
 });
 
@@ -11224,6 +11448,7 @@ const components = {
   totpImage,
   notpImage,
   text: text$3,
+  EnrichedText: EnrichedText$1,
   link: link$1,
   divider: divider$1,
   passcode: passcode$1,
@@ -11262,7 +11487,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$E, components: vars };
+const themeVars = { globals: vars$F, components: vars };
 
 const colors = {
   surface: {
@@ -11574,6 +11799,7 @@ exports.CheckboxClass = CheckboxClass;
 exports.ContainerClass = ContainerClass;
 exports.DividerClass = DividerClass;
 exports.EmailFieldClass = EmailFieldClass;
+exports.EnrichedTextClass = EnrichedTextClass;
 exports.GridClass = GridClass;
 exports.ImageClass = ImageClass;
 exports.LinkClass = LinkClass;