@descope/web-components-ui 1.0.295 → 1.0.297

package/dist/index.esm.js

@@ -5,6 +5,7 @@ import '@vaadin/text-field';
 import '@vaadin/email-field';
 import '@vaadin/number-field';
 import '@vaadin/password-field';
+import markdownit from 'markdown-it';
 import '@vaadin/text-area';
 import '@vaadin/combo-box';
 import '@vaadin/grid';
@@ -630,7 +631,7 @@ const normalizeBooleanAttributesMixin = (superclass) =>
               }
             } else if (!attrVal) {
               // eslint-disable-next-line no-console
-              console.warn(
+              console.debug(
                 `attribute "${attr}" has no value, should it be added to the boolean attributes list?`
               );
             }
@@ -1354,7 +1355,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$R = getComponentName('button');
+const componentName$S = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1456,7 +1457,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$R,
+    componentName: componentName$S,
   })
 );
 
@@ -1493,7 +1494,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$R, ButtonClass);
+customElements.define(componentName$S, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1503,11 +1504,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$Q = getComponentName('boolean-field-internal');
+const componentName$R = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$Q, baseSelector: 'div' });
+const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$R, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$8 {
   static get observedAttributes() {
@@ -1583,14 +1584,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$Q}
+				<${componentName$R}
 					tabindex="-1"
 					slot="input"
-				></${componentName$Q}>
+				></${componentName$R}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$Q);
+      this.inputElement = this.shadowRoot.querySelector(componentName$R);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1789,7 +1790,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$P = getComponentName('checkbox');
+const componentName$Q = getComponentName('checkbox');
 
 const {
   host: host$m,
@@ -1895,15 +1896,15 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$P,
+    componentName: componentName$Q,
   })
 );
 
-customElements.define(componentName$Q, BooleanInputInternal);
+customElements.define(componentName$R, BooleanInputInternal);
 
-customElements.define(componentName$P, CheckboxClass);
+customElements.define(componentName$Q, CheckboxClass);
 
-const componentName$O = getComponentName('switch-toggle');
+const componentName$P = getComponentName('switch-toggle');
 
 const {
   host: host$l,
@@ -2035,17 +2036,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$O,
+    componentName: componentName$P,
   })
 );
 
-customElements.define(componentName$O, SwitchToggleClass);
+customElements.define(componentName$P, SwitchToggleClass);
 
-const componentName$N = getComponentName('loader-linear');
+const componentName$O = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$N, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$O, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$N;
+    return componentName$O;
   }
 
   constructor() {
@@ -2106,11 +2107,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$N, LoaderLinearClass);
+customElements.define(componentName$O, LoaderLinearClass);
 
-const componentName$M = getComponentName('loader-radial');
+const componentName$N = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$M, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$N, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2154,11 +2155,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$M, LoaderRadialClass);
+customElements.define(componentName$N, LoaderRadialClass);
 
-const componentName$L = getComponentName('container');
+const componentName$M = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$L, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$M, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2211,33 +2212,10 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$L, ContainerClass);
-
-// eslint-disable-next-line max-classes-per-file
-
-const componentName$K = getComponentName('text');
-
-class RawText extends createBaseClass({ componentName: componentName$K, baseSelector: ':host > slot' }) {
-  constructor() {
-    super();
+customElements.define(componentName$M, ContainerClass);
 
-    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';
     }
@@ -2252,6 +2230,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$L = getComponentName('text');
+
+const BaseTextClass = createBaseTextClass(componentName$L);
+
 const TextClass = compose(
   createStyleMixin({
     mappings: {
@@ -2274,11 +2281,11 @@ const TextClass = compose(
   }),
   draggableMixin,
   componentNameValidationMixin,
-  customTextMixin
-)(RawText);
+  hideWhenEmptyMixin
+)(BaseTextClass);
 
-const componentName$J = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > div' }) {
+const componentName$K = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$K, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2377,9 +2384,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$K, TextClass);
+customElements.define(componentName$L, TextClass);
 
-customElements.define(componentName$J, DividerClass);
+customElements.define(componentName$K, DividerClass);
 
 const {
   host: host$i,
@@ -2457,7 +2464,7 @@ var textFieldMappings = {
   ],
 };
 
-const componentName$I = getComponentName('email-field');
+const componentName$J = getComponentName('email-field');
 
 const customMixin$8 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
@@ -2492,15 +2499,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$I,
+    componentName: componentName$J,
   })
 );
 
-customElements.define(componentName$I, EmailFieldClass);
+customElements.define(componentName$J, EmailFieldClass);
 
-const componentName$H = getComponentName('link');
+const componentName$I = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$H, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$I, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2565,7 +2572,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$H, LinkClass);
+customElements.define(componentName$I, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2617,37 +2624,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$G = getComponentName('logo');
+const componentName$H = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$G,
+  componentName: componentName$H,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$G, LogoClass);
+customElements.define(componentName$H, LogoClass);
 
-const componentName$F = getComponentName('totp-image');
+const componentName$G = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$F,
+  componentName: componentName$G,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$F, TotpImageClass);
+customElements.define(componentName$G, TotpImageClass);
 
-const componentName$E = getComponentName('notp-image');
+const componentName$F = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$E,
+  componentName: componentName$F,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$E, NotpImageClass);
+customElements.define(componentName$F, NotpImageClass);
 
-const componentName$D = getComponentName('number-field');
+const componentName$E = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2673,11 +2680,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$D,
+    componentName: componentName$E,
   })
 );
 
-customElements.define(componentName$D, NumberFieldClass);
+customElements.define(componentName$E, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2695,13 +2702,13 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$C = getComponentName('passcode-internal');
+const componentName$D = getComponentName('passcode-internal');
 
 const observedAttributes$5 = ['digits', 'loading'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -2927,7 +2934,7 @@ class PasscodeInternal extends BaseInputClass$7 {
   }
 }
 
-const componentName$B = getComponentName('text-field');
+const componentName$C = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -2977,11 +2984,11 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$B,
+    componentName: componentName$C,
   })
 );
 
-const componentName$A = getComponentName('passcode');
+const componentName$B = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
@@ -3000,17 +3007,17 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$C}
+      <${componentName$D}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$C}>
+      ><slot></slot></${componentName$D}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$C);
+      this.inputElement = this.shadowRoot.querySelector(componentName$D);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -3157,15 +3164,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$A,
+    componentName: componentName$B,
   })
 );
 
-customElements.define(componentName$B, TextFieldClass);
+customElements.define(componentName$C, TextFieldClass);
 
-customElements.define(componentName$C, PasscodeInternal);
+customElements.define(componentName$D, PasscodeInternal);
 
-customElements.define(componentName$A, PasscodeClass);
+customElements.define(componentName$B, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -3201,7 +3208,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$z = getComponentName('password');
+const componentName$A = getComponentName('password');
 
 const {
   host: host$f,
@@ -3330,11 +3337,146 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$z,
+    componentName: componentName$A,
   })
 );
 
-customElements.define(componentName$z, PasswordClass);
+customElements.define(componentName$A, PasswordClass);
+
+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('markdown-content');
+
+const BaseMarkdownContentClass = createBaseTextClass(componentName$z);
+
+const markdownContentMixin = (superclass) =>
+  class MarkdownContentMixinClass 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.#initMarkdown();
+      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.#initMarkdown(newValue);
+          this.#parseChildren();
+        }
+      }
+    }
+
+    #initMarkdown() {
+      this.markdown = 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.markdown.parse(node.textContent, { references: undefined });
+        const result = this.markdown.renderer.render(enrichTokens(tokens), {
+          breaks: this.lineBreak,
+        });
+
+        if (result !== node.textContent) {
+          const span = document.createElement('div');
+          span.classList.add('markdown-wrapper');
+          // eslint-disable-next-line no-use-before-define
+          span.innerHTML = `${getStyleReset()}${result}`;
+          span.addEventListener('copy', onClipboardCopy);
+          node.parentNode.replaceChild(span, node);
+        }
+      }
+    }
+  };
+
+const MarkdownContentClass = 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,
+  markdownContentMixin,
+  hideWhenEmptyMixin
+)(BaseMarkdownContentClass);
+
+function getStyleReset() {
+  return `
+  <style>
+    .markdown-wrapper > * { margin:0 }
+    .markdown-wrapper > *:not(:only-child):not(:last-child) {
+      margin-bottom: var(${MarkdownContentClass.cssVarList.textLineHeight})
+    }
+  </style>
+  `;
+}
+
+customElements.define(componentName$z, MarkdownContentClass);
 
 const componentName$y = getComponentName('text-area');
 
@@ -9854,6 +9996,7 @@ class RawUserAuthMethod extends createBaseClass({
 
         .hidden-btn {
           width: 0;
+          overflow: hidden;
         }
 
         slot[name="method-icon"]{
@@ -9876,7 +10019,7 @@ class RawUserAuthMethod extends createBaseClass({
           <div class="fulfilled-indicator">
             <vaadin-icon src=${greenVIcon}></vaadin-icon>
           </div>
-          <descope-button class="hidden-btn"size="sm" variant="link" mode="primary"></descope-button>
+          <descope-button class="hidden-btn" size="sm" variant="link" mode="primary"></descope-button>
         </div>
       </div>
 		`;
@@ -10646,33 +10789,33 @@ const globals = {
   fonts,
   direction,
 };
-const vars$E = getThemeVars(globals);
+const vars$F = getThemeVars(globals);
 
-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$R);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$S);
 
 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',
 
@@ -10715,10 +10858,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: {
@@ -10766,7 +10909,7 @@ const button = {
   },
 };
 
-const vars$D = {
+const vars$E = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -10774,28 +10917,28 @@ const vars$D = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$D
+  vars: vars$E
 });
 
 const componentName = getComponentName('input-wrapper');
-const globalRefs$m = getThemeRefs(globals);
+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
@@ -10806,11 +10949,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',
 
@@ -10826,28 +10969,28 @@ 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
@@ -10857,22 +11000,64 @@ 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 = {
+  [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$C.inputTextAlign]: 'right' },
+    left: { [vars$C.inputTextAlign]: 'left' },
+    center: { [vars$C.inputTextAlign]: 'center' },
+  },
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$C
+});
+
+const globalRefs$m = getThemeRefs(globals);
+const vars$B = PasswordClass.cssVarList;
+
+const password = {
   [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.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.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$B.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$B.inputBorderWidth]: refs.borderWidth,
   [vars$B.inputBorderStyle]: refs.borderStyle,
   [vars$B.inputBorderColor]: refs.borderColor,
@@ -10881,40 +11066,29 @@ const textField = {
   [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,
-  textAlign: {
-    right: { [vars$B.inputTextAlign]: 'right' },
-    left: { [vars$B.inputTextAlign]: 'left' },
-    center: { [vars$B.inputTextAlign]: 'center' },
-  },
+  [vars$B.revealButtonOffset]: globalRefs$m.spacing.md,
+  [vars$B.revealButtonSize]: refs.toggleButtonSize,
+  [vars$B.revealButtonColor]: refs.placeholderTextColor,
 };
 
-var textField$1 = /*#__PURE__*/Object.freeze({
+var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textField,
-  textField: textField,
+  default: password,
   vars: vars$B
 });
 
-const globalRefs$l = getThemeRefs(globals);
-const vars$A = PasswordClass.cssVarList;
+const vars$A = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [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.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.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$A.inputBorderWidth]: refs.borderWidth,
   [vars$A.inputBorderStyle]: refs.borderStyle,
   [vars$A.inputBorderColor]: refs.borderColor,
@@ -10923,20 +11097,21 @@ const password = {
   [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$A.inputBackgroundColor]: refs.backgroundColor,
+  [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$A.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$A.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$A
 });
 
-const vars$z = NumberFieldClass.cssVarList;
+const vars$z = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$z.hostWidth]: refs.width,
   [vars$z.hostMinWidth]: refs.minWidth,
   [vars$z.hostDirection]: refs.direction,
@@ -10945,6 +11120,7 @@ const numberField = {
   [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,
@@ -10955,200 +11131,167 @@ const numberField = {
   [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,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$z
 });
 
-const vars$y = EmailFieldClass.cssVarList;
+const vars$y = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [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.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
+  [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.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$y.inputResizeType]: 'vertical',
+  [vars$y.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars$y.inputTextAlign]: 'right' },
+    left: { [vars$y.inputTextAlign]: 'left' },
+    center: { [vars$y.inputTextAlign]: 'center' },
+  },
+
+  _readonly: {
+    [vars$y.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$y
 });
 
-const vars$x = TextAreaClass.cssVarList;
+const vars$x = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [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.labelFontWeight]: '400',
+  [vars$x.labelLineHeight]: checkboxSize,
+  [vars$x.labelSpacing]: '1em',
   [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$x.inputBackgroundColor]: refs.backgroundColor,
-  [vars$x.inputValueTextColor]: refs.valueTextColor,
-  [vars$x.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [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.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',
-  textAlign: {
-    right: { [vars$x.inputTextAlign]: 'right' },
-    left: { [vars$x.inputTextAlign]: 'left' },
-    center: { [vars$x.inputTextAlign]: 'center' },
+  [vars$x.inputBackgroundColor]: refs.backgroundColor,
+  [vars$x.inputSize]: checkboxSize,
+
+  _checked: {
+    [vars$x.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$x.inputResizeType]: 'none',
+  _disabled: {
+    [vars$x.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$x
 });
 
-const vars$w = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+const globalRefs$l = getThemeRefs(globals);
+const vars$w = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
   [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,
 
-  _checked: {
-    [vars$w.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars$w.labelTextColor]: refs.labelTextColor,
-  },
-};
+  [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',
 
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$w
-});
-
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
-
-const globalRefs$k = getThemeRefs(globals);
-const vars$v = 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.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 globalRefs$j = getThemeRefs(globals);
+const globalRefs$k = getThemeRefs(globals);
 
 const compVars$4 = ContainerClass.cssVarList;
 
@@ -11170,7 +11313,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$L
+  componentName$M
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -11180,10 +11323,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' },
@@ -11229,34 +11372,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,
 };
@@ -11264,53 +11407,164 @@ const vars$u = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$u
+  vars: vars$v
 });
 
-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 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 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$s
+});
+
+const globalRefs$j = getThemeRefs(globals);
+const vars$r = TextClass.cssVarList;
+
+const text = {
+  [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$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: text,
   vars: vars$r
 });
 
 const globalRefs$i = getThemeRefs(globals);
-const vars$q = TextClass.cssVarList;
+const vars$q = MarkdownContentClass.cssVarList;
 
-const text = {
+const markdownContent = {
   [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,
@@ -11349,21 +11603,6 @@ const text = {
     },
   },
 
-  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' },
@@ -11373,23 +11612,11 @@ const text = {
   _fullWidth: {
     [vars$q.hostWidth]: '100%',
   },
-
-  _italic: {
-    [vars$q.fontStyle]: 'italic',
-  },
-
-  _uppercase: {
-    [vars$q.textTransform]: 'uppercase',
-  },
-
-  _lowercase: {
-    [vars$q.textTransform]: 'lowercase',
-  },
 };
 
-var text$1 = /*#__PURE__*/Object.freeze({
+var markdownContent$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: text,
+  default: markdownContent,
   vars: vars$q
 });
 
@@ -11442,7 +11669,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$J
+  componentName$K
 );
 
 const divider = {
@@ -11585,7 +11812,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$M
+  componentName$N
 );
 
 const loaderRadial = {
@@ -12340,6 +12567,7 @@ const components = {
   totpImage,
   notpImage,
   text: text$1,
+  markdownContent: markdownContent$1,
   link: link$1,
   divider: divider$1,
   passcode: passcode$1,
@@ -12378,7 +12606,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: {
@@ -12424,5 +12652,5 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, MarkdownContentClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map