@descope/web-components-ui 1.0.258 → 1.0.260

package/dist/index.esm.js

@@ -209,8 +209,7 @@ class ComponentsThemeManager {
 
 const componentsThemeManager = new ComponentsThemeManager();
 
-const createCssVarFallback = (first, ...rest) =>
-  `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
+const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
 
 const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
   isFunction(relativeSelectorOrSelectorFn)
@@ -263,13 +262,15 @@ const createStyle = (componentName, baseSelector, mappings) => {
 
     const cssVarName = getCssVarName(componentName, attr);
 
-    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property, important }) => {
-      style.add(
-        createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
-        isFunction(property) ? property() : property,
-        createCssVarFallback(cssVarName) + (important ? '!important' : '')
-      );
-    });
+    attrConfig.forEach(
+      ({ selector: relativeSelectorOrSelectorFn, property, important, fallback }) => {
+        style.add(
+          createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
+          isFunction(property) ? property() : property,
+          createCssVar(cssVarName, fallback) + (important ? '!important' : '')
+        );
+      }
+    );
   });
 
   return style.toString();
@@ -1287,7 +1288,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$G = getComponentName('button');
+const componentName$H = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1306,7 +1307,6 @@ const resetStyles = `
 		box-shadow: none;
 	}
 	vaadin-button::part(label) {
-    justify-content: center;
 		padding: 0;
     width: 100%;
 	}
@@ -1360,7 +1360,7 @@ const ButtonClass = compose(
       labelTextColor: { property: 'color' },
       labelTextDecoration: { ...label$a, property: 'text-decoration' },
       labelSpacing: { ...label$a, property: 'gap' },
-      textAlign: { ...label$a, property: 'justify-content', important: true },
+      textAlign: { ...label$a, property: 'justify-content', fallback: 'center' },
     },
   }),
   clickableMixin,
@@ -1390,7 +1390,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$G,
+    componentName: componentName$H,
   })
 );
 
@@ -1427,7 +1427,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$G, ButtonClass);
+customElements.define(componentName$H, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1437,11 +1437,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$F = getComponentName('boolean-field-internal');
+const componentName$G = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$F, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$G, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -1517,14 +1517,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$F}
+				<${componentName$G}
 					tabindex="-1"
 					slot="input"
-				></${componentName$F}>
+				></${componentName$G}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$F);
+      this.inputElement = this.shadowRoot.querySelector(componentName$G);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1723,7 +1723,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$E = getComponentName('checkbox');
+const componentName$F = getComponentName('checkbox');
 
 const {
   host: host$g,
@@ -1829,15 +1829,15 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$E,
+    componentName: componentName$F,
   })
 );
 
-customElements.define(componentName$F, BooleanInputInternal);
+customElements.define(componentName$G, BooleanInputInternal);
 
-customElements.define(componentName$E, CheckboxClass);
+customElements.define(componentName$F, CheckboxClass);
 
-const componentName$D = getComponentName('switch-toggle');
+const componentName$E = getComponentName('switch-toggle');
 
 const {
   host: host$f,
@@ -1969,17 +1969,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$D,
+    componentName: componentName$E,
   })
 );
 
-customElements.define(componentName$D, SwitchToggleClass);
+customElements.define(componentName$E, SwitchToggleClass);
 
-const componentName$C = getComponentName('loader-linear');
+const componentName$D = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$C;
+    return componentName$D;
   }
 
   constructor() {
@@ -2040,11 +2040,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$C, LoaderLinearClass);
+customElements.define(componentName$D, LoaderLinearClass);
 
-const componentName$B = getComponentName('loader-radial');
+const componentName$C = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2088,11 +2088,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$B, LoaderRadialClass);
+customElements.define(componentName$C, LoaderRadialClass);
 
-const componentName$A = getComponentName('container');
+const componentName$B = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$A, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$B, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2144,13 +2144,13 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$A, ContainerClass);
+customElements.define(componentName$B, ContainerClass);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$z = getComponentName('text');
+const componentName$A = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2210,8 +2210,8 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-const componentName$y = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
+const componentName$z = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2310,9 +2310,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$z, TextClass);
+customElements.define(componentName$A, TextClass);
 
-customElements.define(componentName$y, DividerClass);
+customElements.define(componentName$z, DividerClass);
 
 const { host: host$c, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$9, inputField: inputField$6, input, helperText: helperText$7, errorMessage: errorMessage$9 } =
   {
@@ -2369,7 +2369,7 @@ var textFieldMappings = {
   inputPlaceholderColor: { ...placeholder$3, property: 'color' },
 };
 
-const componentName$x = getComponentName('email-field');
+const componentName$y = getComponentName('email-field');
 
 const customMixin$6 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
@@ -2404,15 +2404,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$x,
+    componentName: componentName$y,
   })
 );
 
-customElements.define(componentName$x, EmailFieldClass);
+customElements.define(componentName$y, EmailFieldClass);
 
-const componentName$w = getComponentName('link');
+const componentName$x = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$w, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$x, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2477,7 +2477,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$w, LinkClass);
+customElements.define(componentName$x, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2529,25 +2529,35 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$v = getComponentName('logo');
+const componentName$w = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$v,
+  componentName: componentName$w,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$v, LogoClass);
+customElements.define(componentName$w, LogoClass);
 
-const componentName$u = getComponentName('totp-image');
+const componentName$v = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
+  componentName: componentName$v,
+  varName: 'url',
+  fallbackVarName: 'fallbackUrl',
+});
+
+customElements.define(componentName$v, TotpImageClass);
+
+const componentName$u = getComponentName('notp-image');
+
+const NotpImageClass = createCssVarImageClass({
   componentName: componentName$u,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$u, TotpImageClass);
+customElements.define(componentName$u, NotpImageClass);
 
 const componentName$t = getComponentName('number-field');
 
@@ -8555,7 +8565,7 @@ const globals = {
   fonts,
   direction,
 };
-const vars$x = getThemeVars(globals);
+const vars$y = getThemeVars(globals);
 
 const globalRefs$i = getThemeRefs(globals);
 const compVars$4 = ButtonClass.cssVarList;
@@ -8568,7 +8578,7 @@ const mode = {
   surface: globalRefs$i.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$G);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$H);
 
 const button = {
   ...helperTheme$3,
@@ -8673,7 +8683,7 @@ const button = {
   },
 };
 
-const vars$w = {
+const vars$x = {
   ...compVars$4,
   ...helperVars$3,
 };
@@ -8681,13 +8691,13 @@ const vars$w = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$w
+  vars: vars$x
 });
 
 const componentName$1 = getComponentName('input-wrapper');
 const globalRefs$h = getThemeRefs(globals);
 
-const [theme$1, refs, vars$v] = createHelperVars(
+const [theme$1, refs, vars$w] = createHelperVars(
   {
     labelTextColor: globalRefs$h.colors.surface.contrast,
     valueTextColor: globalRefs$h.colors.surface.contrast,
@@ -8760,22 +8770,63 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$v
+  vars: vars$w
 });
 
-const vars$u = TextFieldClass.cssVarList;
+const vars$v = TextFieldClass.cssVarList;
 
 const textField = {
+  [vars$v.hostWidth]: refs.width,
+  [vars$v.hostMinWidth]: refs.minWidth,
+  [vars$v.hostDirection]: refs.direction,
+  [vars$v.fontSize]: refs.fontSize,
+  [vars$v.fontFamily]: refs.fontFamily,
+  [vars$v.labelTextColor]: refs.labelTextColor,
+  [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$v.inputValueTextColor]: refs.valueTextColor,
+  [vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$v.inputBorderWidth]: refs.borderWidth,
+  [vars$v.inputBorderStyle]: refs.borderStyle,
+  [vars$v.inputBorderColor]: refs.borderColor,
+  [vars$v.inputBorderRadius]: refs.borderRadius,
+  [vars$v.inputOutlineWidth]: refs.outlineWidth,
+  [vars$v.inputOutlineStyle]: refs.outlineStyle,
+  [vars$v.inputOutlineColor]: refs.outlineColor,
+  [vars$v.inputOutlineOffset]: refs.outlineOffset,
+  [vars$v.inputBackgroundColor]: refs.backgroundColor,
+  [vars$v.inputHeight]: refs.inputHeight,
+  [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
+  textAlign: {
+    right: { [vars$v.inputTextAlign]: 'right' },
+    left: { [vars$v.inputTextAlign]: 'left' },
+    center: { [vars$v.inputTextAlign]: 'center' },
+  },
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$v
+});
+
+const globalRefs$g = getThemeRefs(globals);
+const vars$u = PasswordClass.cssVarList;
+
+const password = {
   [vars$u.hostWidth]: refs.width,
-  [vars$u.hostMinWidth]: refs.minWidth,
   [vars$u.hostDirection]: refs.direction,
   [vars$u.fontSize]: refs.fontSize,
   [vars$u.fontFamily]: refs.fontFamily,
   [vars$u.labelTextColor]: refs.labelTextColor,
-  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$u.inputHeight]: refs.inputHeight,
+  [vars$u.inputBackgroundColor]: refs.backgroundColor,
+  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$u.inputValueTextColor]: refs.valueTextColor,
-  [vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$u.inputBorderWidth]: refs.borderWidth,
   [vars$u.inputBorderStyle]: refs.borderStyle,
   [vars$u.inputBorderColor]: refs.borderColor,
@@ -8784,39 +8835,28 @@ const textField = {
   [vars$u.inputOutlineStyle]: refs.outlineStyle,
   [vars$u.inputOutlineColor]: refs.outlineColor,
   [vars$u.inputOutlineOffset]: refs.outlineOffset,
-  [vars$u.inputBackgroundColor]: refs.backgroundColor,
-  [vars$u.inputHeight]: refs.inputHeight,
-  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
-  textAlign: {
-    right: { [vars$u.inputTextAlign]: 'right' },
-    left: { [vars$u.inputTextAlign]: 'left' },
-    center: { [vars$u.inputTextAlign]: 'center' },
-  },
+  [vars$u.revealButtonOffset]: globalRefs$g.spacing.md,
+  [vars$u.revealButtonSize]: refs.toggleButtonSize,
 };
 
-var textField$1 = /*#__PURE__*/Object.freeze({
+var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textField,
-  textField: textField,
+  default: password,
   vars: vars$u
 });
 
-const globalRefs$g = getThemeRefs(globals);
-const vars$t = PasswordClass.cssVarList;
+const vars$t = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [vars$t.hostWidth]: refs.width,
+  [vars$t.hostMinWidth]: refs.minWidth,
   [vars$t.hostDirection]: refs.direction,
   [vars$t.fontSize]: refs.fontSize,
   [vars$t.fontFamily]: refs.fontFamily,
   [vars$t.labelTextColor]: refs.labelTextColor,
   [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$t.inputHeight]: refs.inputHeight,
-  [vars$t.inputBackgroundColor]: refs.backgroundColor,
-  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$t.inputValueTextColor]: refs.valueTextColor,
-  [vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$t.inputBorderWidth]: refs.borderWidth,
   [vars$t.inputBorderStyle]: refs.borderStyle,
   [vars$t.inputBorderColor]: refs.borderColor,
@@ -8825,19 +8865,21 @@ const password = {
   [vars$t.inputOutlineStyle]: refs.outlineStyle,
   [vars$t.inputOutlineColor]: refs.outlineColor,
   [vars$t.inputOutlineOffset]: refs.outlineOffset,
-  [vars$t.revealButtonOffset]: globalRefs$g.spacing.md,
-  [vars$t.revealButtonSize]: refs.toggleButtonSize,
+  [vars$t.inputBackgroundColor]: refs.backgroundColor,
+  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$t.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$t
 });
 
-const vars$s = NumberFieldClass.cssVarList;
+const vars$s = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$s.hostWidth]: refs.width,
   [vars$s.hostMinWidth]: refs.minWidth,
   [vars$s.hostDirection]: refs.direction,
@@ -8846,6 +8888,7 @@ const numberField = {
   [vars$s.labelTextColor]: refs.labelTextColor,
   [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$s.inputValueTextColor]: refs.valueTextColor,
+  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$s.inputBorderWidth]: refs.borderWidth,
   [vars$s.inputBorderStyle]: refs.borderStyle,
@@ -8856,203 +8899,170 @@ const numberField = {
   [vars$s.inputOutlineColor]: refs.outlineColor,
   [vars$s.inputOutlineOffset]: refs.outlineOffset,
   [vars$s.inputBackgroundColor]: refs.backgroundColor,
-  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$s.inputHeight]: refs.inputHeight,
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$s
 });
 
-const vars$r = EmailFieldClass.cssVarList;
+const globalRefs$f = getThemeRefs(globals);
+const vars$r = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [vars$r.hostWidth]: refs.width,
   [vars$r.hostMinWidth]: refs.minWidth,
   [vars$r.hostDirection]: refs.direction,
   [vars$r.fontSize]: refs.fontSize,
   [vars$r.fontFamily]: refs.fontFamily,
   [vars$r.labelTextColor]: refs.labelTextColor,
+  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$r.inputBackgroundColor]: refs.backgroundColor,
   [vars$r.inputValueTextColor]: refs.valueTextColor,
-  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$r.inputBorderRadius]: refs.borderRadius,
   [vars$r.inputBorderWidth]: refs.borderWidth,
   [vars$r.inputBorderStyle]: refs.borderStyle,
   [vars$r.inputBorderColor]: refs.borderColor,
-  [vars$r.inputBorderRadius]: refs.borderRadius,
   [vars$r.inputOutlineWidth]: refs.outlineWidth,
   [vars$r.inputOutlineStyle]: refs.outlineStyle,
   [vars$r.inputOutlineColor]: refs.outlineColor,
   [vars$r.inputOutlineOffset]: refs.outlineOffset,
-  [vars$r.inputBackgroundColor]: refs.backgroundColor,
-  [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$r.inputHeight]: refs.inputHeight,
+  [vars$r.inputResizeType]: 'vertical',
+  [vars$r.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars$r.inputTextAlign]: 'right' },
+    left: { [vars$r.inputTextAlign]: 'left' },
+    center: { [vars$r.inputTextAlign]: 'center' },
+  },
+
+  _disabled: {
+    [vars$r.inputBackgroundColor]: globalRefs$f.colors.surface.light,
+  },
+
+  _readonly: {
+    [vars$r.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$r
 });
 
-const globalRefs$f = getThemeRefs(globals);
-const vars$q = TextAreaClass.cssVarList;
+const vars$q = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [vars$q.hostWidth]: refs.width,
-  [vars$q.hostMinWidth]: refs.minWidth,
   [vars$q.hostDirection]: refs.direction,
   [vars$q.fontSize]: refs.fontSize,
   [vars$q.fontFamily]: refs.fontFamily,
   [vars$q.labelTextColor]: refs.labelTextColor,
   [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$q.labelFontWeight]: '400',
+  [vars$q.labelLineHeight]: checkboxSize,
+  [vars$q.labelSpacing]: '1em',
   [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$q.inputBackgroundColor]: refs.backgroundColor,
-  [vars$q.inputValueTextColor]: refs.valueTextColor,
-  [vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$q.inputOutlineWidth]: refs.outlineWidth,
+  [vars$q.inputOutlineOffset]: refs.outlineOffset,
+  [vars$q.inputOutlineColor]: refs.outlineColor,
+  [vars$q.inputOutlineStyle]: refs.outlineStyle,
   [vars$q.inputBorderRadius]: refs.borderRadius,
+  [vars$q.inputBorderColor]: refs.borderColor,
   [vars$q.inputBorderWidth]: refs.borderWidth,
   [vars$q.inputBorderStyle]: refs.borderStyle,
-  [vars$q.inputBorderColor]: refs.borderColor,
-  [vars$q.inputOutlineWidth]: refs.outlineWidth,
-  [vars$q.inputOutlineStyle]: refs.outlineStyle,
-  [vars$q.inputOutlineColor]: refs.outlineColor,
-  [vars$q.inputOutlineOffset]: refs.outlineOffset,
-  [vars$q.inputResizeType]: 'vertical',
-  [vars$q.inputMinHeight]: '5em',
-  textAlign: {
-    right: { [vars$q.inputTextAlign]: 'right' },
-    left: { [vars$q.inputTextAlign]: 'left' },
-    center: { [vars$q.inputTextAlign]: 'center' },
-  },
+  [vars$q.inputBackgroundColor]: refs.backgroundColor,
+  [vars$q.inputSize]: checkboxSize,
 
-  _disabled: {
-    [vars$q.inputBackgroundColor]: globalRefs$f.colors.surface.light,
+  _checked: {
+    [vars$q.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$q.inputResizeType]: 'none',
+  _disabled: {
+    [vars$q.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$q
 });
 
-const vars$p = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+const globalRefs$e = getThemeRefs(globals);
+const vars$p = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
   [vars$p.hostWidth]: refs.width,
   [vars$p.hostDirection]: refs.direction,
   [vars$p.fontSize]: refs.fontSize,
   [vars$p.fontFamily]: refs.fontFamily,
-  [vars$p.labelTextColor]: refs.labelTextColor,
-  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$p.labelFontWeight]: '400',
-  [vars$p.labelLineHeight]: checkboxSize,
-  [vars$p.labelSpacing]: '1em',
-  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
+
   [vars$p.inputOutlineWidth]: refs.outlineWidth,
   [vars$p.inputOutlineOffset]: refs.outlineOffset,
   [vars$p.inputOutlineColor]: refs.outlineColor,
   [vars$p.inputOutlineStyle]: refs.outlineStyle,
-  [vars$p.inputBorderRadius]: refs.borderRadius,
-  [vars$p.inputBorderColor]: refs.borderColor,
-  [vars$p.inputBorderWidth]: refs.borderWidth,
-  [vars$p.inputBorderStyle]: refs.borderStyle,
-  [vars$p.inputBackgroundColor]: refs.backgroundColor,
-  [vars$p.inputSize]: checkboxSize,
-
-  _checked: {
-    [vars$p.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars$p.labelTextColor]: refs.labelTextColor,
-  },
-};
-
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$p
-});
-
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
 
-const globalRefs$e = getThemeRefs(globals);
-const vars$o = SwitchToggleClass.cssVarList;
+  [vars$p.trackBorderStyle]: refs.borderStyle,
+  [vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$p.trackBorderColor]: refs.borderColor,
+  [vars$p.trackBackgroundColor]: 'none',
+  [vars$p.trackBorderRadius]: globalRefs$e.radius.md,
+  [vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$p.trackHeight]: checkboxHeight,
+
+  [vars$p.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$p.knobRadius]: '50%',
+  [vars$p.knobTopOffset]: '1px',
+  [vars$p.knobLeftOffset]: knobMargin,
+  [vars$p.knobColor]: refs.valueTextColor,
+  [vars$p.knobTransitionDuration]: '0.3s',
 
-const switchToggle = {
-  [vars$o.hostWidth]: refs.width,
-  [vars$o.hostDirection]: refs.direction,
-  [vars$o.fontSize]: refs.fontSize,
-  [vars$o.fontFamily]: refs.fontFamily,
-
-  [vars$o.inputOutlineWidth]: refs.outlineWidth,
-  [vars$o.inputOutlineOffset]: refs.outlineOffset,
-  [vars$o.inputOutlineColor]: refs.outlineColor,
-  [vars$o.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$o.trackBorderStyle]: refs.borderStyle,
-  [vars$o.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$o.trackBorderColor]: refs.borderColor,
-  [vars$o.trackBackgroundColor]: 'none',
-  [vars$o.trackBorderRadius]: globalRefs$e.radius.md,
-  [vars$o.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$o.trackHeight]: checkboxHeight,
-
-  [vars$o.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$o.knobRadius]: '50%',
-  [vars$o.knobTopOffset]: '1px',
-  [vars$o.knobLeftOffset]: knobMargin,
-  [vars$o.knobColor]: refs.valueTextColor,
-  [vars$o.knobTransitionDuration]: '0.3s',
-
-  [vars$o.labelTextColor]: refs.labelTextColor,
-  [vars$o.labelFontWeight]: '400',
-  [vars$o.labelLineHeight]: '1.35em',
-  [vars$o.labelSpacing]: '1em',
-  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$p.labelTextColor]: refs.labelTextColor,
+  [vars$p.labelFontWeight]: '400',
+  [vars$p.labelLineHeight]: '1.35em',
+  [vars$p.labelSpacing]: '1em',
+  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$o.trackBorderColor]: refs.borderColor,
-    [vars$o.trackBackgroundColor]: refs.backgroundColor,
-    [vars$o.knobLeftOffset]: `calc(100% - var(${vars$o.knobSize}) - ${knobMargin})`,
-    [vars$o.knobColor]: refs.valueTextColor,
-    [vars$o.knobTextColor]: refs.valueTextColor,
+    [vars$p.trackBorderColor]: refs.borderColor,
+    [vars$p.trackBackgroundColor]: refs.backgroundColor,
+    [vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
+    [vars$p.knobColor]: refs.valueTextColor,
+    [vars$p.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$o.knobColor]: globalRefs$e.colors.surface.light,
-    [vars$o.trackBorderColor]: globalRefs$e.colors.surface.main,
-    [vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
-    [vars$o.labelTextColor]: refs.labelTextColor,
+    [vars$p.knobColor]: globalRefs$e.colors.surface.light,
+    [vars$p.trackBorderColor]: globalRefs$e.colors.surface.main,
+    [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
+    [vars$p.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$o.knobColor]: globalRefs$e.colors.surface.light,
-      [vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
+      [vars$p.knobColor]: globalRefs$e.colors.surface.light,
+      [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$o.trackBorderColor]: globalRefs$e.colors.error.main,
-    [vars$o.knobColor]: globalRefs$e.colors.error.main,
+    [vars$p.trackBorderColor]: globalRefs$e.colors.error.main,
+    [vars$p.knobColor]: globalRefs$e.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$o
+  vars: vars$p
 });
 
 const globalRefs$d = getThemeRefs(globals);
@@ -9077,7 +9087,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$A
+  componentName$B
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -9162,7 +9172,7 @@ const container = {
   },
 };
 
-const vars$n = {
+const vars$o = {
   ...compVars$3,
   ...helperVars$2,
 };
@@ -9170,28 +9180,40 @@ const vars$n = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
+  vars: vars$o
+});
+
+const vars$n = LogoClass.cssVarList;
+
+const logo$2 = {
+  [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+};
+
+var logo$3 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: logo$2,
   vars: vars$n
 });
 
-const vars$m = LogoClass.cssVarList;
+const vars$m = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
-var logo$2 = /*#__PURE__*/Object.freeze({
+var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
   vars: vars$m
 });
 
-const vars$l = TotpImageClass.cssVarList;
+const vars$l = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
-var totpImage = /*#__PURE__*/Object.freeze({
+var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
   vars: vars$l
@@ -9336,7 +9358,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$y
+  componentName$z
 );
 
 const divider = {
@@ -9479,7 +9501,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$B
+  componentName$C
 );
 
 const loaderRadial = {
@@ -10173,8 +10195,9 @@ const components = {
   checkbox: checkbox$1,
   switchToggle: switchToggle$1,
   container: container$1,
-  logo: logo$2,
+  logo: logo$3,
   totpImage,
+  notpImage,
   text: text$1,
   link: link$1,
   divider: divider$1,
@@ -10208,7 +10231,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$x, components: vars };
+const themeVars = { globals: vars$y, components: vars };
 
-export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map