@descope/web-components-ui 1.0.306 → 1.0.307

package/dist/index.esm.js

@@ -1344,6 +1344,70 @@ const inputEventsDispatchingMixin = (superclass) =>
     }
   };
 
+/* eslint-disable no-use-before-define */
+
+const componentName$T = getComponentName('icon');
+
+class RawIcon extends createBaseClass({ componentName: componentName$T, baseSelector: 'slot' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host > slot {
+				box-sizing: border-box;
+				width: 100%;
+				height: 100%;
+				display: flex;
+				overflow: auto;
+			}
+			:host {
+				display: inline-block;
+			}
+		</style>
+		<slot></slot>
+	`;
+  }
+
+  get items() {
+    return this.shadowRoot.querySelector('slot').assignedNodes();
+  }
+
+  #onChildrenChange() {
+    // force hide icon if empty.
+    if (this.items?.length > 0) {
+      this.shadowRoot.host.style.setProperty('display', 'inline-block');
+    } else {
+      this.shadowRoot.host.style.setProperty('display', 'none');
+    }
+
+    // set fill for all inner svgs to fill var and a fallback
+    const elems = this.querySelectorAll('*[fill]');
+    elems.forEach((ele) =>
+      ele.setAttribute(
+        'fill',
+        `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
+      )
+    );
+  }
+
+  init() {
+    observeChildren(this, this.#onChildrenChange.bind(this));
+  }
+}
+
+const IconClass = compose(
+  createStyleMixin({
+    mappings: {
+      fill: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawIcon);
+
+customElements.define(componentName$T, IconClass);
+
 const clickableMixin = (superclass) =>
   class ClickableMixinClass extends superclass {
     get isLoading() {
@@ -1425,6 +1489,10 @@ const ButtonClass = compose(
       verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
 
       labelTextColor: { property: 'color' },
+      iconColor: {
+        selector: () => `::slotted(${IconClass.componentName})`,
+        property: IconClass.cssVarList.fill,
+      },
       labelTextDecoration: { ...label$a, property: 'text-decoration' },
       labelSpacing: { ...label$a, property: 'gap' },
       textAlign: { ...label$a, property: 'justify-content', fallback: 'center' },
@@ -6983,7 +7051,7 @@ class RawUploadFile extends BaseInputClass$3 {
 }
 
 const buttonVars = ButtonClass.cssVarList;
-const { host: host$8, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
+const { host: host$8, wrapper, icon: icon$2, title, description, requiredIndicator: requiredIndicator$2 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '::slotted(*)' },
@@ -7018,7 +7086,7 @@ const UploadFileClass = compose(
         { ...title, property: 'color' },
         { ...description, property: 'color' },
       ],
-      iconSize: { ...icon, property: 'width' },
+      iconSize: { ...icon$2, property: 'width' },
       requiredIndicator: { ...requiredIndicator$2, property: 'content' },
     },
   }),
@@ -10824,7 +10892,7 @@ const globals = {
   fonts,
   direction,
 };
-const vars$F = getThemeVars(globals);
+const vars$G = getThemeVars(globals);
 
 const globalRefs$o = getThemeRefs(globals);
 const compVars$5 = ButtonClass.cssVarList;
@@ -10897,6 +10965,7 @@ const button = {
     [helperVars$3.dark]: globalRefs$o.colors.surface.dark,
     [helperVars$3.light]: globalRefs$o.colors.surface.light,
     [helperVars$3.contrast]: globalRefs$o.colors.surface.main,
+    [compVars$5.iconColor]: globalRefs$o.colors.surface.main,
   },
 
   variant: {
@@ -10944,7 +11013,7 @@ const button = {
   },
 };
 
-const vars$E = {
+const vars$F = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -10952,13 +11021,13 @@ const vars$E = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$E
+  vars: vars$F
 });
 
 const componentName = getComponentName('input-wrapper');
 const globalRefs$n = getThemeRefs(globals);
 
-const [theme$1, refs, vars$D] = createHelperVars(
+const [theme$1, refs, vars$E] = createHelperVars(
   {
     labelTextColor: globalRefs$n.colors.surface.dark,
     labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
@@ -11035,22 +11104,64 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$D
+  vars: vars$E
 });
 
-const vars$C = TextFieldClass.cssVarList;
+const vars$D = TextFieldClass.cssVarList;
 
 const textField = {
+  [vars$D.hostWidth]: refs.width,
+  [vars$D.hostMinWidth]: refs.minWidth,
+  [vars$D.hostDirection]: refs.direction,
+  [vars$D.fontSize]: refs.fontSize,
+  [vars$D.fontFamily]: refs.fontFamily,
+  [vars$D.labelTextColor]: refs.labelTextColor,
+  [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$D.inputValueTextColor]: refs.valueTextColor,
+  [vars$D.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$D.inputBorderWidth]: refs.borderWidth,
+  [vars$D.inputBorderStyle]: refs.borderStyle,
+  [vars$D.inputBorderColor]: refs.borderColor,
+  [vars$D.inputBorderRadius]: refs.borderRadius,
+  [vars$D.inputOutlineWidth]: refs.outlineWidth,
+  [vars$D.inputOutlineStyle]: refs.outlineStyle,
+  [vars$D.inputOutlineColor]: refs.outlineColor,
+  [vars$D.inputOutlineOffset]: refs.outlineOffset,
+  [vars$D.inputBackgroundColor]: refs.backgroundColor,
+  [vars$D.inputHeight]: refs.inputHeight,
+  [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$D.helperTextColor]: refs.helperTextColor,
+  textAlign: {
+    right: { [vars$D.inputTextAlign]: 'right' },
+    left: { [vars$D.inputTextAlign]: 'left' },
+    center: { [vars$D.inputTextAlign]: 'center' },
+  },
+};
+
+var textField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: textField,
+  textField: textField,
+  vars: vars$D
+});
+
+const globalRefs$m = getThemeRefs(globals);
+const vars$C = PasswordClass.cssVarList;
+
+const password = {
   [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.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$C.inputHeight]: refs.inputHeight,
+  [vars$C.inputBackgroundColor]: refs.backgroundColor,
+  [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$C.inputValueTextColor]: refs.valueTextColor,
-  [vars$C.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$C.inputPlaceholderTextColor]: refs.placeholderTextColor,
   [vars$C.inputBorderWidth]: refs.borderWidth,
   [vars$C.inputBorderStyle]: refs.borderStyle,
   [vars$C.inputBorderColor]: refs.borderColor,
@@ -11059,40 +11170,29 @@ const textField = {
   [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' },
-  },
+  [vars$C.revealButtonOffset]: globalRefs$m.spacing.md,
+  [vars$C.revealButtonSize]: refs.toggleButtonSize,
+  [vars$C.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$C
 });
 
-const globalRefs$m = getThemeRefs(globals);
-const vars$B = PasswordClass.cssVarList;
+const vars$B = NumberFieldClass.cssVarList;
 
-const password = {
+const numberField = {
   [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.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.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$B.inputBorderWidth]: refs.borderWidth,
   [vars$B.inputBorderStyle]: refs.borderStyle,
   [vars$B.inputBorderColor]: refs.borderColor,
@@ -11101,20 +11201,21 @@ const password = {
   [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,
+  [vars$B.inputBackgroundColor]: refs.backgroundColor,
+  [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$B.inputHeight]: refs.inputHeight,
 };
 
-var password$1 = /*#__PURE__*/Object.freeze({
+var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: password,
+  default: numberField,
   vars: vars$B
 });
 
-const vars$A = NumberFieldClass.cssVarList;
+const vars$A = EmailFieldClass.cssVarList;
 
-const numberField = {
+const emailField = {
   [vars$A.hostWidth]: refs.width,
   [vars$A.hostMinWidth]: refs.minWidth,
   [vars$A.hostDirection]: refs.direction,
@@ -11123,6 +11224,7 @@ const numberField = {
   [vars$A.labelTextColor]: refs.labelTextColor,
   [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$A.inputValueTextColor]: refs.valueTextColor,
+  [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
   [vars$A.inputBorderWidth]: refs.borderWidth,
   [vars$A.inputBorderStyle]: refs.borderStyle,
@@ -11133,197 +11235,164 @@ const numberField = {
   [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({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: numberField,
+  default: emailField,
   vars: vars$A
 });
 
-const vars$z = EmailFieldClass.cssVarList;
+const vars$z = TextAreaClass.cssVarList;
 
-const emailField = {
+const textArea = {
   [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.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$z.inputBackgroundColor]: refs.backgroundColor,
   [vars$z.inputValueTextColor]: refs.valueTextColor,
-  [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$z.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$z.inputBorderRadius]: refs.borderRadius,
   [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,
+  [vars$z.inputResizeType]: 'vertical',
+  [vars$z.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars$z.inputTextAlign]: 'right' },
+    left: { [vars$z.inputTextAlign]: 'left' },
+    center: { [vars$z.inputTextAlign]: 'center' },
+  },
+
+  _readonly: {
+    [vars$z.inputResizeType]: 'none',
+  },
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: emailField,
+  default: textArea,
   vars: vars$z
 });
 
-const vars$y = TextAreaClass.cssVarList;
+const vars$y = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-const textArea = {
+const checkbox = {
   [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.labelFontWeight]: '400',
+  [vars$y.labelLineHeight]: checkboxSize,
+  [vars$y.labelSpacing]: '1em',
   [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$y.inputBackgroundColor]: refs.backgroundColor,
-  [vars$y.inputValueTextColor]: refs.valueTextColor,
-  [vars$y.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$y.inputOutlineWidth]: refs.outlineWidth,
+  [vars$y.inputOutlineOffset]: refs.outlineOffset,
+  [vars$y.inputOutlineColor]: refs.outlineColor,
+  [vars$y.inputOutlineStyle]: refs.outlineStyle,
   [vars$y.inputBorderRadius]: refs.borderRadius,
+  [vars$y.inputBorderColor]: refs.borderColor,
   [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$y.inputTextAlign]: 'right' },
-    left: { [vars$y.inputTextAlign]: 'left' },
-    center: { [vars$y.inputTextAlign]: 'center' },
+  [vars$y.inputBackgroundColor]: refs.backgroundColor,
+  [vars$y.inputSize]: checkboxSize,
+
+  _checked: {
+    [vars$y.inputValueTextColor]: refs.valueTextColor,
   },
 
-  _readonly: {
-    [vars$y.inputResizeType]: 'none',
+  _disabled: {
+    [vars$y.labelTextColor]: refs.labelTextColor,
   },
 };
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: textArea,
+  default: checkbox,
   vars: vars$y
 });
 
-const vars$x = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const checkbox = {
+const globalRefs$l = getThemeRefs(globals);
+const vars$x = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
   [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$x.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars$x.labelTextColor]: refs.labelTextColor,
-  },
-};
-
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$x
-});
 
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
+  [vars$x.trackBorderStyle]: refs.borderStyle,
+  [vars$x.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$x.trackBorderColor]: refs.borderColor,
+  [vars$x.trackBackgroundColor]: refs.backgroundColor,
+  [vars$x.trackBorderRadius]: globalRefs$l.radius.md,
+  [vars$x.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$x.trackHeight]: checkboxHeight,
+
+  [vars$x.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$x.knobRadius]: '50%',
+  [vars$x.knobTopOffset]: '1px',
+  [vars$x.knobLeftOffset]: knobMargin,
+  [vars$x.knobColor]: refs.labelTextColor,
+  [vars$x.knobTransitionDuration]: '0.3s',
 
-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.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,
+  [vars$x.labelTextColor]: refs.labelTextColor,
+  [vars$x.labelFontWeight]: '400',
+  [vars$x.labelLineHeight]: '1.35em',
+  [vars$x.labelSpacing]: '1em',
+  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [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,
+    [vars$x.trackBorderColor]: refs.borderColor,
+    [vars$x.knobLeftOffset]: `calc(100% - var(${vars$x.knobSize}) - ${knobMargin})`,
+    [vars$x.knobColor]: refs.valueTextColor,
+    [vars$x.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [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,
+    [vars$x.knobColor]: globalRefs$l.colors.surface.light,
+    [vars$x.trackBorderColor]: globalRefs$l.colors.surface.light,
+    [vars$x.trackBackgroundColor]: globalRefs$l.colors.surface.main,
+    [vars$x.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$w.knobColor]: globalRefs$l.colors.surface.light,
-      [vars$w.trackBackgroundColor]: globalRefs$l.colors.surface.main,
+      [vars$x.knobColor]: globalRefs$l.colors.surface.light,
+      [vars$x.trackBackgroundColor]: globalRefs$l.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$w.trackBorderColor]: globalRefs$l.colors.error.main,
-    [vars$w.knobColor]: globalRefs$l.colors.error.main,
+    [vars$x.trackBorderColor]: globalRefs$l.colors.error.main,
+    [vars$x.knobColor]: globalRefs$l.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$w
+  vars: vars$x
 });
 
 const globalRefs$k = getThemeRefs(globals);
@@ -11434,7 +11503,7 @@ const container = {
   },
 };
 
-const vars$v = {
+const vars$w = {
   ...compVars$4,
   ...helperVars$2,
 };
@@ -11442,252 +11511,252 @@ const vars$v = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$v
+  vars: vars$w
 });
 
-const vars$u = LogoClass.cssVarList;
+const vars$v = LogoClass.cssVarList;
 
 const logo$2 = {
-  [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$v.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$u
+  vars: vars$v
 });
 
-const vars$t = TotpImageClass.cssVarList;
+const vars$u = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$t
+  vars: vars$u
 });
 
-const vars$s = NotpImageClass.cssVarList;
+const vars$t = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$s
+  vars: vars$t
 });
 
 const globalRefs$j = getThemeRefs(globals);
-const vars$r = TextClass.cssVarList;
+const vars$s = 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,
+  [vars$s.hostDirection]: globalRefs$j.direction,
+  [vars$s.textLineHeight]: '1.35em',
+  [vars$s.textAlign]: 'left',
+  [vars$s.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,
+      [vars$s.fontSize]: globalRefs$j.typography.h1.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.h1.weight,
+      [vars$s.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,
+      [vars$s.fontSize]: globalRefs$j.typography.h2.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.h2.weight,
+      [vars$s.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,
+      [vars$s.fontSize]: globalRefs$j.typography.h3.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.h3.weight,
+      [vars$s.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,
+      [vars$s.fontSize]: globalRefs$j.typography.subtitle1.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.subtitle1.weight,
+      [vars$s.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,
+      [vars$s.fontSize]: globalRefs$j.typography.subtitle2.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.subtitle2.weight,
+      [vars$s.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,
+      [vars$s.fontSize]: globalRefs$j.typography.body1.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.body1.weight,
+      [vars$s.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,
+      [vars$s.fontSize]: globalRefs$j.typography.body2.size,
+      [vars$s.fontWeight]: globalRefs$j.typography.body2.weight,
+      [vars$s.fontFamily]: globalRefs$j.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$r.textColor]: globalRefs$j.colors.surface.contrast,
+      [vars$s.textColor]: globalRefs$j.colors.surface.contrast,
     },
     secondary: {
-      [vars$r.textColor]: globalRefs$j.colors.surface.dark,
+      [vars$s.textColor]: globalRefs$j.colors.surface.dark,
     },
     error: {
-      [vars$r.textColor]: globalRefs$j.colors.error.main,
+      [vars$s.textColor]: globalRefs$j.colors.error.main,
     },
     success: {
-      [vars$r.textColor]: globalRefs$j.colors.success.main,
+      [vars$s.textColor]: globalRefs$j.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$r.textAlign]: 'right' },
-    left: { [vars$r.textAlign]: 'left' },
-    center: { [vars$r.textAlign]: 'center' },
+    right: { [vars$s.textAlign]: 'right' },
+    left: { [vars$s.textAlign]: 'left' },
+    center: { [vars$s.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$r.hostWidth]: '100%',
+    [vars$s.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$r.fontStyle]: 'italic',
+    [vars$s.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$r.textTransform]: 'uppercase',
+    [vars$s.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$r.textTransform]: 'lowercase',
+    [vars$s.textTransform]: 'lowercase',
   },
 };
 
 var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text,
-  vars: vars$r
+  vars: vars$s
 });
 
 const globalRefs$i = getThemeRefs(globals);
-const vars$q = EnrichedTextClass.cssVarList;
+const vars$r = EnrichedTextClass.cssVarList;
 
 const EnrichedText = {
-  [vars$q.hostDirection]: globalRefs$i.direction,
+  [vars$r.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$r.fontSize]: globalRefs$i.typography.body1.size,
+  [vars$r.fontWeight]: globalRefs$i.typography.body1.weight,
+  [vars$r.fontFamily]: globalRefs$i.typography.body1.font,
 
-  [vars$q.textLineHeight]: '1.35em',
-  [vars$q.textAlign]: 'left',
-  [vars$q.textColor]: globalRefs$i.colors.surface.dark,
+  [vars$r.textLineHeight]: '1.35em',
+  [vars$r.textAlign]: 'left',
+  [vars$r.textColor]: globalRefs$i.colors.surface.dark,
 
-  [vars$q.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
+  [vars$r.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
 
   mode: {
     primary: {
-      [vars$q.textColor]: globalRefs$i.colors.surface.contrast,
+      [vars$r.textColor]: globalRefs$i.colors.surface.contrast,
     },
     secondary: {
-      [vars$q.textColor]: globalRefs$i.colors.surface.dark,
+      [vars$r.textColor]: globalRefs$i.colors.surface.dark,
     },
     error: {
-      [vars$q.textColor]: globalRefs$i.colors.error.main,
+      [vars$r.textColor]: globalRefs$i.colors.error.main,
     },
     success: {
-      [vars$q.textColor]: globalRefs$i.colors.success.main,
+      [vars$r.textColor]: globalRefs$i.colors.success.main,
     },
   },
 
   variant: {
     h1: {
-      [vars$q.fontSize]: globalRefs$i.typography.h1.size,
-      [vars$q.fontWeight]: globalRefs$i.typography.h1.weight,
-      [vars$q.fontFamily]: globalRefs$i.typography.h1.font,
+      [vars$r.fontSize]: globalRefs$i.typography.h1.size,
+      [vars$r.fontWeight]: globalRefs$i.typography.h1.weight,
+      [vars$r.fontFamily]: globalRefs$i.typography.h1.font,
     },
     h2: {
-      [vars$q.fontSize]: globalRefs$i.typography.h2.size,
-      [vars$q.fontWeight]: globalRefs$i.typography.h2.weight,
-      [vars$q.fontFamily]: globalRefs$i.typography.h2.font,
+      [vars$r.fontSize]: globalRefs$i.typography.h2.size,
+      [vars$r.fontWeight]: globalRefs$i.typography.h2.weight,
+      [vars$r.fontFamily]: globalRefs$i.typography.h2.font,
     },
     h3: {
-      [vars$q.fontSize]: globalRefs$i.typography.h3.size,
-      [vars$q.fontWeight]: globalRefs$i.typography.h3.weight,
-      [vars$q.fontFamily]: globalRefs$i.typography.h3.font,
+      [vars$r.fontSize]: globalRefs$i.typography.h3.size,
+      [vars$r.fontWeight]: globalRefs$i.typography.h3.weight,
+      [vars$r.fontFamily]: globalRefs$i.typography.h3.font,
     },
     subtitle1: {
-      [vars$q.fontSize]: globalRefs$i.typography.subtitle1.size,
-      [vars$q.fontWeight]: globalRefs$i.typography.subtitle1.weight,
-      [vars$q.fontFamily]: globalRefs$i.typography.subtitle1.font,
+      [vars$r.fontSize]: globalRefs$i.typography.subtitle1.size,
+      [vars$r.fontWeight]: globalRefs$i.typography.subtitle1.weight,
+      [vars$r.fontFamily]: globalRefs$i.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$q.fontSize]: globalRefs$i.typography.subtitle2.size,
-      [vars$q.fontWeight]: globalRefs$i.typography.subtitle2.weight,
-      [vars$q.fontFamily]: globalRefs$i.typography.subtitle2.font,
+      [vars$r.fontSize]: globalRefs$i.typography.subtitle2.size,
+      [vars$r.fontWeight]: globalRefs$i.typography.subtitle2.weight,
+      [vars$r.fontFamily]: globalRefs$i.typography.subtitle2.font,
     },
     body1: {
-      [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$r.fontSize]: globalRefs$i.typography.body1.size,
+      [vars$r.fontWeight]: globalRefs$i.typography.body1.weight,
+      [vars$r.fontFamily]: globalRefs$i.typography.body1.font,
     },
     body2: {
-      [vars$q.fontSize]: globalRefs$i.typography.body2.size,
-      [vars$q.fontWeight]: globalRefs$i.typography.body2.weight,
-      [vars$q.fontFamily]: globalRefs$i.typography.body2.font,
+      [vars$r.fontSize]: globalRefs$i.typography.body2.size,
+      [vars$r.fontWeight]: globalRefs$i.typography.body2.weight,
+      [vars$r.fontFamily]: globalRefs$i.typography.body2.font,
     },
   },
 
   textAlign: {
-    right: { [vars$q.textAlign]: 'right' },
-    left: { [vars$q.textAlign]: 'left' },
-    center: { [vars$q.textAlign]: 'center' },
+    right: { [vars$r.textAlign]: 'right' },
+    left: { [vars$r.textAlign]: 'left' },
+    center: { [vars$r.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$q.hostWidth]: '100%',
+    [vars$r.hostWidth]: '100%',
   },
 };
 
 var EnrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: EnrichedText,
-  vars: vars$q
+  vars: vars$r
 });
 
 const globalRefs$h = getThemeRefs(globals);
-const vars$p = LinkClass.cssVarList;
+const vars$q = LinkClass.cssVarList;
 
 const link = {
-  [vars$p.hostDirection]: globalRefs$h.direction,
-  [vars$p.cursor]: 'pointer',
+  [vars$q.hostDirection]: globalRefs$h.direction,
+  [vars$q.cursor]: 'pointer',
 
-  [vars$p.textColor]: globalRefs$h.colors.primary.main,
+  [vars$q.textColor]: globalRefs$h.colors.primary.main,
 
   textAlign: {
-    right: { [vars$p.textAlign]: 'right' },
-    left: { [vars$p.textAlign]: 'left' },
-    center: { [vars$p.textAlign]: 'center' },
+    right: { [vars$q.textAlign]: 'right' },
+    left: { [vars$q.textAlign]: 'left' },
+    center: { [vars$q.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$p.hostWidth]: '100%',
+    [vars$q.hostWidth]: '100%',
   },
 
   mode: {
     primary: {
-      [vars$p.textColor]: globalRefs$h.colors.primary.main,
+      [vars$q.textColor]: globalRefs$h.colors.primary.main,
     },
     secondary: {
-      [vars$p.textColor]: globalRefs$h.colors.secondary.main,
+      [vars$q.textColor]: globalRefs$h.colors.secondary.main,
     },
     error: {
-      [vars$p.textColor]: globalRefs$h.colors.error.main,
+      [vars$q.textColor]: globalRefs$h.colors.error.main,
     },
     success: {
-      [vars$p.textColor]: globalRefs$h.colors.success.main,
+      [vars$q.textColor]: globalRefs$h.colors.success.main,
     },
   },
 };
@@ -11695,7 +11764,7 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$p
+  vars: vars$q
 });
 
 const globalRefs$g = getThemeRefs(globals);
@@ -11737,7 +11806,7 @@ const divider = {
   },
 };
 
-const vars$o = {
+const vars$p = {
   ...compVars$3,
   ...helperVars$1,
 };
@@ -11745,93 +11814,93 @@ const vars$o = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$o
+  vars: vars$p
 });
 
-const vars$n = PasscodeClass.cssVarList;
+const vars$o = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$n.hostDirection]: refs.direction,
-  [vars$n.fontFamily]: refs.fontFamily,
-  [vars$n.fontSize]: refs.fontSize,
-  [vars$n.labelTextColor]: refs.labelTextColor,
-  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$n.digitValueTextColor]: refs.valueTextColor,
-  [vars$n.digitPadding]: '0',
-  [vars$n.digitTextAlign]: 'center',
-  [vars$n.digitSpacing]: '4px',
-  [vars$n.hostWidth]: refs.width,
-  [vars$n.digitOutlineColor]: 'transparent',
-  [vars$n.digitOutlineWidth]: refs.outlineWidth,
-  [vars$n.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$n.digitSize]: refs.inputHeight,
+  [vars$o.hostDirection]: refs.direction,
+  [vars$o.fontFamily]: refs.fontFamily,
+  [vars$o.fontSize]: refs.fontSize,
+  [vars$o.labelTextColor]: refs.labelTextColor,
+  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$o.digitValueTextColor]: refs.valueTextColor,
+  [vars$o.digitPadding]: '0',
+  [vars$o.digitTextAlign]: 'center',
+  [vars$o.digitSpacing]: '4px',
+  [vars$o.hostWidth]: refs.width,
+  [vars$o.digitOutlineColor]: 'transparent',
+  [vars$o.digitOutlineWidth]: refs.outlineWidth,
+  [vars$o.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$o.digitSize]: refs.inputHeight,
 
   size: {
-    xs: { [vars$n.spinnerSize]: '15px' },
-    sm: { [vars$n.spinnerSize]: '20px' },
-    md: { [vars$n.spinnerSize]: '20px' },
-    lg: { [vars$n.spinnerSize]: '20px' },
+    xs: { [vars$o.spinnerSize]: '15px' },
+    sm: { [vars$o.spinnerSize]: '20px' },
+    md: { [vars$o.spinnerSize]: '20px' },
+    lg: { [vars$o.spinnerSize]: '20px' },
   },
 
   _hideCursor: {
-    [vars$n.digitCaretTextColor]: 'transparent',
+    [vars$o.digitCaretTextColor]: 'transparent',
   },
 
   _loading: {
-    [vars$n.overlayOpacity]: refs.overlayOpacity,
+    [vars$o.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$n
+  vars: vars$o
 });
 
 const globalRefs$f = getThemeRefs(globals);
-const vars$m = LoaderLinearClass.cssVarList;
+const vars$n = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$m.hostDisplay]: 'inline-block',
-  [vars$m.hostWidth]: '100%',
+  [vars$n.hostDisplay]: 'inline-block',
+  [vars$n.hostWidth]: '100%',
 
-  [vars$m.barColor]: globalRefs$f.colors.surface.contrast,
-  [vars$m.barWidth]: '20%',
+  [vars$n.barColor]: globalRefs$f.colors.surface.contrast,
+  [vars$n.barWidth]: '20%',
 
-  [vars$m.barBackgroundColor]: globalRefs$f.colors.surface.light,
-  [vars$m.barBorderRadius]: '4px',
+  [vars$n.barBackgroundColor]: globalRefs$f.colors.surface.light,
+  [vars$n.barBorderRadius]: '4px',
 
-  [vars$m.animationDuration]: '2s',
-  [vars$m.animationTimingFunction]: 'linear',
-  [vars$m.animationIterationCount]: 'infinite',
-  [vars$m.verticalPadding]: '0.25em',
+  [vars$n.animationDuration]: '2s',
+  [vars$n.animationTimingFunction]: 'linear',
+  [vars$n.animationIterationCount]: 'infinite',
+  [vars$n.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$m.barHeight]: '2px' },
-    sm: { [vars$m.barHeight]: '4px' },
-    md: { [vars$m.barHeight]: '6px' },
-    lg: { [vars$m.barHeight]: '8px' },
+    xs: { [vars$n.barHeight]: '2px' },
+    sm: { [vars$n.barHeight]: '4px' },
+    md: { [vars$n.barHeight]: '6px' },
+    lg: { [vars$n.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$m.barColor]: globalRefs$f.colors.primary.main,
+      [vars$n.barColor]: globalRefs$f.colors.primary.main,
     },
     secondary: {
-      [vars$m.barColor]: globalRefs$f.colors.secondary.main,
+      [vars$n.barColor]: globalRefs$f.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$m.hostDisplay]: 'none',
+    [vars$n.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$m
+  vars: vars$n
 });
 
 const globalRefs$e = getThemeRefs(globals);
@@ -11878,7 +11947,7 @@ const loaderRadial = {
     [compVars$2.hostDisplay]: 'none',
   },
 };
-const vars$l = {
+const vars$m = {
   ...compVars$2,
   ...helperVars,
 };
@@ -11886,78 +11955,114 @@ const vars$l = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$l
+  vars: vars$m
 });
 
 const globalRefs$d = getThemeRefs(globals);
-const vars$k = ComboBoxClass.cssVarList;
+const vars$l = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$k.hostWidth]: refs.width,
-  [vars$k.hostDirection]: refs.direction,
-  [vars$k.fontSize]: refs.fontSize,
-  [vars$k.fontFamily]: refs.fontFamily,
-  [vars$k.labelTextColor]: refs.labelTextColor,
-  [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$k.inputBorderColor]: refs.borderColor,
-  [vars$k.inputBorderWidth]: refs.borderWidth,
-  [vars$k.inputBorderStyle]: refs.borderStyle,
-  [vars$k.inputBorderRadius]: refs.borderRadius,
-  [vars$k.inputOutlineColor]: refs.outlineColor,
-  [vars$k.inputOutlineOffset]: refs.outlineOffset,
-  [vars$k.inputOutlineWidth]: refs.outlineWidth,
-  [vars$k.inputOutlineStyle]: refs.outlineStyle,
-  [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$k.inputValueTextColor]: refs.valueTextColor,
-  [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$k.inputBackgroundColor]: refs.backgroundColor,
-  [vars$k.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$k.inputHeight]: refs.inputHeight,
-  [vars$k.inputDropdownButtonColor]: globalRefs$d.colors.surface.dark,
-  [vars$k.inputDropdownButtonCursor]: 'pointer',
-  [vars$k.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$k.inputDropdownButtonOffset]: globalRefs$d.spacing.xs,
-  [vars$k.overlayItemPaddingInlineStart]: globalRefs$d.spacing.xs,
-  [vars$k.overlayItemPaddingInlineEnd]: globalRefs$d.spacing.lg,
+  [vars$l.hostWidth]: refs.width,
+  [vars$l.hostDirection]: refs.direction,
+  [vars$l.fontSize]: refs.fontSize,
+  [vars$l.fontFamily]: refs.fontFamily,
+  [vars$l.labelTextColor]: refs.labelTextColor,
+  [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$l.inputBorderColor]: refs.borderColor,
+  [vars$l.inputBorderWidth]: refs.borderWidth,
+  [vars$l.inputBorderStyle]: refs.borderStyle,
+  [vars$l.inputBorderRadius]: refs.borderRadius,
+  [vars$l.inputOutlineColor]: refs.outlineColor,
+  [vars$l.inputOutlineOffset]: refs.outlineOffset,
+  [vars$l.inputOutlineWidth]: refs.outlineWidth,
+  [vars$l.inputOutlineStyle]: refs.outlineStyle,
+  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$l.inputValueTextColor]: refs.valueTextColor,
+  [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$l.inputBackgroundColor]: refs.backgroundColor,
+  [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$l.inputHeight]: refs.inputHeight,
+  [vars$l.inputDropdownButtonColor]: globalRefs$d.colors.surface.dark,
+  [vars$l.inputDropdownButtonCursor]: 'pointer',
+  [vars$l.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$l.inputDropdownButtonOffset]: globalRefs$d.spacing.xs,
+  [vars$l.overlayItemPaddingInlineStart]: globalRefs$d.spacing.xs,
+  [vars$l.overlayItemPaddingInlineEnd]: globalRefs$d.spacing.lg,
 
   _readonly: {
-    [vars$k.inputDropdownButtonCursor]: 'default',
+    [vars$l.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$k.overlayFontSize]: refs.fontSize,
-  [vars$k.overlayFontFamily]: refs.fontFamily,
-  [vars$k.overlayCursor]: 'pointer',
-  [vars$k.overlayItemBoxShadow]: 'none',
-  [vars$k.overlayBackground]: refs.backgroundColor,
-  [vars$k.overlayTextColor]: refs.valueTextColor,
+  [vars$l.overlayFontSize]: refs.fontSize,
+  [vars$l.overlayFontFamily]: refs.fontFamily,
+  [vars$l.overlayCursor]: 'pointer',
+  [vars$l.overlayItemBoxShadow]: 'none',
+  [vars$l.overlayBackground]: refs.backgroundColor,
+  [vars$l.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$k.overlay.minHeight]: '400px',
-  [vars$k.overlay.margin]: '0',
+  [vars$l.overlay.minHeight]: '400px',
+  [vars$l.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$k
+  vars: vars$l
 });
 
-const vars$j = ImageClass.cssVarList;
+const vars$k = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$j
+  vars: vars$k
 });
 
-const vars$i = PhoneFieldClass.cssVarList;
+const vars$j = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$i.hostWidth]: refs.width,
+  [vars$j.hostWidth]: refs.width,
+  [vars$j.hostDirection]: refs.direction,
+  [vars$j.fontSize]: refs.fontSize,
+  [vars$j.fontFamily]: refs.fontFamily,
+  [vars$j.labelTextColor]: refs.labelTextColor,
+  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$j.inputValueTextColor]: refs.valueTextColor,
+  [vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$j.inputBorderStyle]: refs.borderStyle,
+  [vars$j.inputBorderWidth]: refs.borderWidth,
+  [vars$j.inputBorderColor]: refs.borderColor,
+  [vars$j.inputBorderRadius]: refs.borderRadius,
+  [vars$j.inputOutlineStyle]: refs.outlineStyle,
+  [vars$j.inputOutlineWidth]: refs.outlineWidth,
+  [vars$j.inputOutlineColor]: refs.outlineColor,
+  [vars$j.inputOutlineOffset]: refs.outlineOffset,
+  [vars$j.phoneInputWidth]: refs.minWidth,
+  [vars$j.countryCodeInputWidth]: '5em',
+  [vars$j.countryCodeDropdownWidth]: '20em',
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneField,
+  vars: vars$j
+});
+
+const vars$i = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars$i.hostWidth]: '16em',
+  [vars$i.hostMinWidth]: refs.minWidth,
   [vars$i.hostDirection]: refs.direction,
   [vars$i.fontSize]: refs.fontSize,
   [vars$i.fontFamily]: refs.fontFamily,
@@ -11974,181 +12079,145 @@ const phoneField = {
   [vars$i.inputOutlineWidth]: refs.outlineWidth,
   [vars$i.inputOutlineColor]: refs.outlineColor,
   [vars$i.inputOutlineOffset]: refs.outlineOffset,
-  [vars$i.phoneInputWidth]: refs.minWidth,
-  [vars$i.countryCodeInputWidth]: '5em',
-  [vars$i.countryCodeDropdownWidth]: '20em',
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
-};
-
-var phoneField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneField,
-  vars: vars$i
-});
-
-const vars$h = PhoneFieldInputBoxClass.cssVarList;
-
-const phoneInputBoxField = {
-  [vars$h.hostWidth]: '16em',
-  [vars$h.hostMinWidth]: refs.minWidth,
-  [vars$h.hostDirection]: refs.direction,
-  [vars$h.fontSize]: refs.fontSize,
-  [vars$h.fontFamily]: refs.fontFamily,
-  [vars$h.labelTextColor]: refs.labelTextColor,
-  [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$h.inputValueTextColor]: refs.valueTextColor,
-  [vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$h.inputBorderStyle]: refs.borderStyle,
-  [vars$h.inputBorderWidth]: refs.borderWidth,
-  [vars$h.inputBorderColor]: refs.borderColor,
-  [vars$h.inputBorderRadius]: refs.borderRadius,
-  [vars$h.inputOutlineStyle]: refs.outlineStyle,
-  [vars$h.inputOutlineWidth]: refs.outlineWidth,
-  [vars$h.inputOutlineColor]: refs.outlineColor,
-  [vars$h.inputOutlineOffset]: refs.outlineOffset,
   _fullWidth: {
-    [vars$h.hostWidth]: refs.width,
+    [vars$i.hostWidth]: refs.width,
   },
 };
 
 var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneInputBoxField,
-  vars: vars$h
+  vars: vars$i
 });
 
 const globalRefs$c = getThemeRefs(globals);
-const vars$g = NewPasswordClass.cssVarList;
+const vars$h = NewPasswordClass.cssVarList;
 
 const newPassword = {
-  [vars$g.hostWidth]: refs.width,
-  [vars$g.hostMinWidth]: refs.minWidth,
-  [vars$g.hostDirection]: refs.direction,
-  [vars$g.fontSize]: refs.fontSize,
-  [vars$g.fontFamily]: refs.fontFamily,
-  [vars$g.spaceBetweenInputs]: '1em',
-  [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$g.policyPreviewBackgroundColor]: 'none',
-  [vars$g.policyPreviewPadding]: globalRefs$c.spacing.lg,
+  [vars$h.hostWidth]: refs.width,
+  [vars$h.hostMinWidth]: refs.minWidth,
+  [vars$h.hostDirection]: refs.direction,
+  [vars$h.fontSize]: refs.fontSize,
+  [vars$h.fontFamily]: refs.fontFamily,
+  [vars$h.spaceBetweenInputs]: '1em',
+  [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$h.policyPreviewBackgroundColor]: 'none',
+  [vars$h.policyPreviewPadding]: globalRefs$c.spacing.lg,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
     // We do that by injecting `::after` element, and populating it with requiredIndicator content.
-    [vars$g.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$h.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
   },
 };
 
 var newPassword$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: newPassword,
-  vars: vars$g
+  vars: vars$h
 });
 
-const vars$f = UploadFileClass.cssVarList;
+const vars$g = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$f.hostDirection]: refs.direction,
-  [vars$f.labelTextColor]: refs.labelTextColor,
-  [vars$f.fontFamily]: refs.fontFamily,
+  [vars$g.hostDirection]: refs.direction,
+  [vars$g.labelTextColor]: refs.labelTextColor,
+  [vars$g.fontFamily]: refs.fontFamily,
 
-  [vars$f.iconSize]: '2em',
+  [vars$g.iconSize]: '2em',
 
-  [vars$f.hostPadding]: '0.75em',
-  [vars$f.gap]: '0.5em',
+  [vars$g.hostPadding]: '0.75em',
+  [vars$g.gap]: '0.5em',
 
-  [vars$f.fontSize]: '16px',
-  [vars$f.titleFontWeight]: '500',
-  [vars$f.lineHeight]: '1em',
+  [vars$g.fontSize]: '16px',
+  [vars$g.titleFontWeight]: '500',
+  [vars$g.lineHeight]: '1em',
 
-  [vars$f.borderWidth]: refs.borderWidth,
-  [vars$f.borderColor]: refs.borderColor,
-  [vars$f.borderRadius]: refs.borderRadius,
-  [vars$f.borderStyle]: 'dashed',
+  [vars$g.borderWidth]: refs.borderWidth,
+  [vars$g.borderColor]: refs.borderColor,
+  [vars$g.borderRadius]: refs.borderRadius,
+  [vars$g.borderStyle]: 'dashed',
 
   _required: {
-    [vars$f.requiredIndicator]: refs.requiredIndicator,
+    [vars$g.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$f.hostHeight]: '196px',
-      [vars$f.hostWidth]: '200px',
-      [vars$f.titleFontSize]: '0.875em',
-      [vars$f.descriptionFontSize]: '0.875em',
-      [vars$f.lineHeight]: '1.25em',
+      [vars$g.hostHeight]: '196px',
+      [vars$g.hostWidth]: '200px',
+      [vars$g.titleFontSize]: '0.875em',
+      [vars$g.descriptionFontSize]: '0.875em',
+      [vars$g.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$f.hostHeight]: '216px',
-      [vars$f.hostWidth]: '230px',
-      [vars$f.titleFontSize]: '1em',
-      [vars$f.descriptionFontSize]: '0.875em',
-      [vars$f.lineHeight]: '1.25em',
+      [vars$g.hostHeight]: '216px',
+      [vars$g.hostWidth]: '230px',
+      [vars$g.titleFontSize]: '1em',
+      [vars$g.descriptionFontSize]: '0.875em',
+      [vars$g.lineHeight]: '1.25em',
     },
     md: {
-      [vars$f.hostHeight]: '256px',
-      [vars$f.hostWidth]: '312px',
-      [vars$f.titleFontSize]: '1.125em',
-      [vars$f.descriptionFontSize]: '1em',
-      [vars$f.lineHeight]: '1.5em',
+      [vars$g.hostHeight]: '256px',
+      [vars$g.hostWidth]: '312px',
+      [vars$g.titleFontSize]: '1.125em',
+      [vars$g.descriptionFontSize]: '1em',
+      [vars$g.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$f.hostHeight]: '280px',
-      [vars$f.hostWidth]: '336px',
-      [vars$f.titleFontSize]: '1.125em',
-      [vars$f.descriptionFontSize]: '1.125em',
-      [vars$f.lineHeight]: '1.75em',
+      [vars$g.hostHeight]: '280px',
+      [vars$g.hostWidth]: '336px',
+      [vars$g.titleFontSize]: '1.125em',
+      [vars$g.descriptionFontSize]: '1.125em',
+      [vars$g.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$f.hostWidth]: refs.width,
+    [vars$g.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$f
+  vars: vars$g
 });
 
 const globalRefs$b = getThemeRefs(globals);
 
-const vars$e = ButtonSelectionGroupItemClass.cssVarList;
+const vars$f = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$e.hostDirection]: 'inherit',
-  [vars$e.backgroundColor]: globalRefs$b.colors.surface.main,
-  [vars$e.labelTextColor]: globalRefs$b.colors.surface.contrast,
-  [vars$e.borderColor]: globalRefs$b.colors.surface.light,
-  [vars$e.borderStyle]: 'solid',
-  [vars$e.borderRadius]: globalRefs$b.radius.sm,
-  [vars$e.outlineColor]: 'transparent',
-  [vars$e.borderWidth]: globalRefs$b.border.xs,
+  [vars$f.hostDirection]: 'inherit',
+  [vars$f.backgroundColor]: globalRefs$b.colors.surface.main,
+  [vars$f.labelTextColor]: globalRefs$b.colors.surface.contrast,
+  [vars$f.borderColor]: globalRefs$b.colors.surface.light,
+  [vars$f.borderStyle]: 'solid',
+  [vars$f.borderRadius]: globalRefs$b.radius.sm,
+  [vars$f.outlineColor]: 'transparent',
+  [vars$f.borderWidth]: globalRefs$b.border.xs,
 
   _hover: {
-    [vars$e.backgroundColor]: globalRefs$b.colors.surface.highlight,
+    [vars$f.backgroundColor]: globalRefs$b.colors.surface.highlight,
   },
 
   _focused: {
-    [vars$e.outlineColor]: globalRefs$b.colors.surface.light,
+    [vars$f.outlineColor]: globalRefs$b.colors.surface.light,
   },
 
   _selected: {
-    [vars$e.borderColor]: globalRefs$b.colors.surface.contrast,
-    [vars$e.backgroundColor]: globalRefs$b.colors.surface.contrast,
-    [vars$e.labelTextColor]: globalRefs$b.colors.surface.main,
+    [vars$f.borderColor]: globalRefs$b.colors.surface.contrast,
+    [vars$f.backgroundColor]: globalRefs$b.colors.surface.contrast,
+    [vars$f.labelTextColor]: globalRefs$b.colors.surface.main,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$e
+  vars: vars$f
 });
 
 const globalRefs$a = getThemeRefs(globals);
@@ -12163,28 +12232,28 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostWidth]: refs.width,
 });
 
-const vars$d = ButtonSelectionGroupClass.cssVarList;
+const vars$e = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$d),
+  ...createBaseButtonSelectionGroupMappings(vars$e),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$d
+  vars: vars$e
 });
 
-const vars$c = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$d = ButtonMultiSelectionGroupClass.cssVarList;
 
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$c),
+  ...createBaseButtonSelectionGroupMappings(vars$d),
 };
 
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$c
+  vars: vars$d
 });
 
 const globalRefs$9 = getThemeRefs(globals);
@@ -12197,46 +12266,46 @@ const modal = {
   [compVars$1.overlayWidth]: '540px',
 };
 
-const vars$b = {
+const vars$c = {
   ...compVars$1,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$b
+  vars: vars$c
 });
 
 const globalRefs$8 = getThemeRefs(globals);
-const vars$a = GridClass.cssVarList;
+const vars$b = GridClass.cssVarList;
 
 const grid = {
-  [vars$a.hostWidth]: '100%',
-  [vars$a.hostHeight]: '100%',
-  [vars$a.hostMinHeight]: '400px',
-  [vars$a.fontWeight]: '400',
-  [vars$a.backgroundColor]: globalRefs$8.colors.surface.main,
+  [vars$b.hostWidth]: '100%',
+  [vars$b.hostHeight]: '100%',
+  [vars$b.hostMinHeight]: '400px',
+  [vars$b.fontWeight]: '400',
+  [vars$b.backgroundColor]: globalRefs$8.colors.surface.main,
 
-  [vars$a.fontSize]: refs.fontSize,
-  [vars$a.fontFamily]: refs.fontFamily,
+  [vars$b.fontSize]: refs.fontSize,
+  [vars$b.fontFamily]: refs.fontFamily,
 
-  [vars$a.sortIndicatorsColor]: globalRefs$8.colors.surface.light,
-  [vars$a.activeSortIndicator]: globalRefs$8.colors.surface.dark,
-  [vars$a.resizeHandleColor]: globalRefs$8.colors.surface.light,
+  [vars$b.sortIndicatorsColor]: globalRefs$8.colors.surface.light,
+  [vars$b.activeSortIndicator]: globalRefs$8.colors.surface.dark,
+  [vars$b.resizeHandleColor]: globalRefs$8.colors.surface.light,
 
-  [vars$a.borderWidth]: refs.borderWidth,
-  [vars$a.borderStyle]: refs.borderStyle,
-  [vars$a.borderRadius]: refs.borderRadius,
-  [vars$a.borderColor]: 'transparent',
+  [vars$b.borderWidth]: refs.borderWidth,
+  [vars$b.borderStyle]: refs.borderStyle,
+  [vars$b.borderRadius]: refs.borderRadius,
+  [vars$b.borderColor]: 'transparent',
 
-  [vars$a.headerRowTextColor]: globalRefs$8.colors.surface.dark,
-  [vars$a.separatorColor]: globalRefs$8.colors.surface.light,
+  [vars$b.headerRowTextColor]: globalRefs$8.colors.surface.dark,
+  [vars$b.separatorColor]: globalRefs$8.colors.surface.light,
 
-  [vars$a.valueTextColor]: globalRefs$8.colors.surface.contrast,
-  [vars$a.selectedBackgroundColor]: globalRefs$8.colors.surface.highlight,
+  [vars$b.valueTextColor]: globalRefs$8.colors.surface.contrast,
+  [vars$b.selectedBackgroundColor]: globalRefs$8.colors.surface.highlight,
 
   _bordered: {
-    [vars$a.borderColor]: refs.borderColor,
+    [vars$b.borderColor]: refs.borderColor,
   },
 };
 
@@ -12244,53 +12313,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$a
+  vars: vars$b
 });
 
 const globalRefs$7 = getThemeRefs(globals);
-const vars$9 = NotificationCardClass.cssVarList;
+const vars$a = NotificationCardClass.cssVarList;
 
 const shadowColor = '#00000020';
 
 const notification = {
-  [vars$9.hostMinWidth]: '415px',
-  [vars$9.fontFamily]: globalRefs$7.fonts.font1.family,
-  [vars$9.fontSize]: globalRefs$7.typography.body1.size,
-  [vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
-  [vars$9.textColor]: globalRefs$7.colors.surface.contrast,
-  [vars$9.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${shadowColor}`,
-  [vars$9.verticalPadding]: '0.625em',
-  [vars$9.horizontalPadding]: '1.5em',
-  [vars$9.borderRadius]: globalRefs$7.radius.xs,
+  [vars$a.hostMinWidth]: '415px',
+  [vars$a.fontFamily]: globalRefs$7.fonts.font1.family,
+  [vars$a.fontSize]: globalRefs$7.typography.body1.size,
+  [vars$a.backgroundColor]: globalRefs$7.colors.surface.main,
+  [vars$a.textColor]: globalRefs$7.colors.surface.contrast,
+  [vars$a.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${shadowColor}`,
+  [vars$a.verticalPadding]: '0.625em',
+  [vars$a.horizontalPadding]: '1.5em',
+  [vars$a.borderRadius]: globalRefs$7.radius.xs,
 
   _bordered: {
-    [vars$9.borderWidth]: globalRefs$7.border.sm,
-    [vars$9.borderStyle]: 'solid',
-    [vars$9.borderColor]: 'transparent',
+    [vars$a.borderWidth]: globalRefs$7.border.sm,
+    [vars$a.borderStyle]: 'solid',
+    [vars$a.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$9.fontSize]: '12px' },
-    sm: { [vars$9.fontSize]: '14px' },
-    md: { [vars$9.fontSize]: '16px' },
-    lg: { [vars$9.fontSize]: '18px' },
+    xs: { [vars$a.fontSize]: '12px' },
+    sm: { [vars$a.fontSize]: '14px' },
+    md: { [vars$a.fontSize]: '16px' },
+    lg: { [vars$a.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$9.backgroundColor]: globalRefs$7.colors.primary.main,
-      [vars$9.textColor]: globalRefs$7.colors.primary.contrast,
-      [vars$9.borderColor]: globalRefs$7.colors.primary.light,
+      [vars$a.backgroundColor]: globalRefs$7.colors.primary.main,
+      [vars$a.textColor]: globalRefs$7.colors.primary.contrast,
+      [vars$a.borderColor]: globalRefs$7.colors.primary.light,
     },
     success: {
-      [vars$9.backgroundColor]: globalRefs$7.colors.success.main,
-      [vars$9.textColor]: globalRefs$7.colors.success.contrast,
-      [vars$9.borderColor]: globalRefs$7.colors.success.light,
+      [vars$a.backgroundColor]: globalRefs$7.colors.success.main,
+      [vars$a.textColor]: globalRefs$7.colors.success.contrast,
+      [vars$a.borderColor]: globalRefs$7.colors.success.light,
     },
     error: {
-      [vars$9.backgroundColor]: globalRefs$7.colors.error.main,
-      [vars$9.textColor]: globalRefs$7.colors.error.contrast,
-      [vars$9.borderColor]: globalRefs$7.colors.error.light,
+      [vars$a.backgroundColor]: globalRefs$7.colors.error.main,
+      [vars$a.textColor]: globalRefs$7.colors.error.contrast,
+      [vars$a.borderColor]: globalRefs$7.colors.error.light,
     },
   },
 };
@@ -12298,128 +12367,128 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$9
+  vars: vars$a
 });
 
 const globalRefs$6 = getThemeRefs(globals);
-const vars$8 = MultiSelectComboBoxClass.cssVarList;
+const vars$9 = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$8.hostWidth]: refs.width,
-  [vars$8.hostDirection]: refs.direction,
-  [vars$8.fontSize]: refs.fontSize,
-  [vars$8.fontFamily]: refs.fontFamily,
-  [vars$8.labelTextColor]: refs.labelTextColor,
-  [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$8.inputBorderColor]: refs.borderColor,
-  [vars$8.inputBorderWidth]: refs.borderWidth,
-  [vars$8.inputBorderStyle]: refs.borderStyle,
-  [vars$8.inputBorderRadius]: refs.borderRadius,
-  [vars$8.inputOutlineColor]: refs.outlineColor,
-  [vars$8.inputOutlineOffset]: refs.outlineOffset,
-  [vars$8.inputOutlineWidth]: refs.outlineWidth,
-  [vars$8.inputOutlineStyle]: refs.outlineStyle,
-  [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$8.inputValueTextColor]: refs.valueTextColor,
-  [vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$8.inputBackgroundColor]: refs.backgroundColor,
-  [vars$8.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$8.inputVerticalPadding]: refs.verticalPadding,
-  [vars$8.inputHeight]: refs.inputHeight,
-  [vars$8.inputDropdownButtonColor]: globalRefs$6.colors.surface.dark,
-  [vars$8.inputDropdownButtonCursor]: 'pointer',
-  [vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$8.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
-  [vars$8.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
-  [vars$8.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
-  [vars$8.chipFontSize]: refs.chipFontSize,
-  [vars$8.chipTextColor]: globalRefs$6.colors.surface.contrast,
-  [vars$8.chipBackgroundColor]: globalRefs$6.colors.surface.light,
+  [vars$9.hostWidth]: refs.width,
+  [vars$9.hostDirection]: refs.direction,
+  [vars$9.fontSize]: refs.fontSize,
+  [vars$9.fontFamily]: refs.fontFamily,
+  [vars$9.labelTextColor]: refs.labelTextColor,
+  [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$9.inputBorderColor]: refs.borderColor,
+  [vars$9.inputBorderWidth]: refs.borderWidth,
+  [vars$9.inputBorderStyle]: refs.borderStyle,
+  [vars$9.inputBorderRadius]: refs.borderRadius,
+  [vars$9.inputOutlineColor]: refs.outlineColor,
+  [vars$9.inputOutlineOffset]: refs.outlineOffset,
+  [vars$9.inputOutlineWidth]: refs.outlineWidth,
+  [vars$9.inputOutlineStyle]: refs.outlineStyle,
+  [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$9.inputValueTextColor]: refs.valueTextColor,
+  [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$9.inputBackgroundColor]: refs.backgroundColor,
+  [vars$9.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$9.inputVerticalPadding]: refs.verticalPadding,
+  [vars$9.inputHeight]: refs.inputHeight,
+  [vars$9.inputDropdownButtonColor]: globalRefs$6.colors.surface.dark,
+  [vars$9.inputDropdownButtonCursor]: 'pointer',
+  [vars$9.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$9.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
+  [vars$9.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
+  [vars$9.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
+  [vars$9.chipFontSize]: refs.chipFontSize,
+  [vars$9.chipTextColor]: globalRefs$6.colors.surface.contrast,
+  [vars$9.chipBackgroundColor]: globalRefs$6.colors.surface.light,
 
   _readonly: {
-    [vars$8.inputDropdownButtonCursor]: 'default',
+    [vars$9.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$8.overlayFontSize]: refs.fontSize,
-  [vars$8.overlayFontFamily]: refs.fontFamily,
-  [vars$8.overlayCursor]: 'pointer',
-  [vars$8.overlayItemBoxShadow]: 'none',
-  [vars$8.overlayBackground]: refs.backgroundColor,
-  [vars$8.overlayTextColor]: refs.valueTextColor,
+  [vars$9.overlayFontSize]: refs.fontSize,
+  [vars$9.overlayFontFamily]: refs.fontFamily,
+  [vars$9.overlayCursor]: 'pointer',
+  [vars$9.overlayItemBoxShadow]: 'none',
+  [vars$9.overlayBackground]: refs.backgroundColor,
+  [vars$9.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$8.overlay.minHeight]: '400px',
-  [vars$8.overlay.margin]: '0',
+  [vars$9.overlay.minHeight]: '400px',
+  [vars$9.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$8
+  vars: vars$9
 });
 
 const globalRefs$5 = getThemeRefs(globals);
-const vars$7 = BadgeClass.cssVarList;
+const vars$8 = BadgeClass.cssVarList;
 
 const badge = {
-  [vars$7.hostWidth]: 'fit-content',
-  [vars$7.hostDirection]: globalRefs$5.direction,
+  [vars$8.hostWidth]: 'fit-content',
+  [vars$8.hostDirection]: globalRefs$5.direction,
 
-  [vars$7.textAlign]: 'center',
+  [vars$8.textAlign]: 'center',
 
-  [vars$7.fontFamily]: globalRefs$5.fonts.font1.family,
-  [vars$7.fontWeight]: '400',
+  [vars$8.fontFamily]: globalRefs$5.fonts.font1.family,
+  [vars$8.fontWeight]: '400',
 
-  [vars$7.verticalPadding]: '0.25em',
-  [vars$7.horizontalPadding]: '0.5em',
+  [vars$8.verticalPadding]: '0.25em',
+  [vars$8.horizontalPadding]: '0.5em',
 
-  [vars$7.borderWidth]: globalRefs$5.border.xs,
-  [vars$7.borderRadius]: globalRefs$5.radius.xs,
-  [vars$7.borderColor]: 'transparent',
-  [vars$7.borderStyle]: 'solid',
+  [vars$8.borderWidth]: globalRefs$5.border.xs,
+  [vars$8.borderRadius]: globalRefs$5.radius.xs,
+  [vars$8.borderColor]: 'transparent',
+  [vars$8.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$7.hostWidth]: '100%',
+    [vars$8.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$7.fontSize]: '12px' },
-    sm: { [vars$7.fontSize]: '14px' },
-    md: { [vars$7.fontSize]: '16px' },
-    lg: { [vars$7.fontSize]: '18px' },
+    xs: { [vars$8.fontSize]: '12px' },
+    sm: { [vars$8.fontSize]: '14px' },
+    md: { [vars$8.fontSize]: '16px' },
+    lg: { [vars$8.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$7.textColor]: globalRefs$5.colors.surface.dark,
+      [vars$8.textColor]: globalRefs$5.colors.surface.dark,
       _bordered: {
-        [vars$7.borderColor]: globalRefs$5.colors.surface.light,
+        [vars$8.borderColor]: globalRefs$5.colors.surface.light,
       },
     },
     primary: {
-      [vars$7.textColor]: globalRefs$5.colors.primary.main,
+      [vars$8.textColor]: globalRefs$5.colors.primary.main,
       _bordered: {
-        [vars$7.borderColor]: globalRefs$5.colors.primary.light,
+        [vars$8.borderColor]: globalRefs$5.colors.primary.light,
       },
     },
     secondary: {
-      [vars$7.textColor]: globalRefs$5.colors.secondary.main,
+      [vars$8.textColor]: globalRefs$5.colors.secondary.main,
       _bordered: {
-        [vars$7.borderColor]: globalRefs$5.colors.secondary.light,
+        [vars$8.borderColor]: globalRefs$5.colors.secondary.light,
       },
     },
     error: {
-      [vars$7.textColor]: globalRefs$5.colors.error.main,
+      [vars$8.textColor]: globalRefs$5.colors.error.main,
       _bordered: {
-        [vars$7.borderColor]: globalRefs$5.colors.error.light,
+        [vars$8.borderColor]: globalRefs$5.colors.error.light,
       },
     },
     success: {
-      [vars$7.textColor]: globalRefs$5.colors.success.main,
+      [vars$8.textColor]: globalRefs$5.colors.success.main,
       _bordered: {
-        [vars$7.borderColor]: globalRefs$5.colors.success.light,
+        [vars$8.borderColor]: globalRefs$5.colors.success.light,
       },
     },
   },
@@ -12428,7 +12497,7 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
-  vars: vars$7
+  vars: vars$8
 });
 
 const globalRefs$4 = getThemeRefs(globals);
@@ -12466,127 +12535,137 @@ const avatar = {
   },
 };
 
-const vars$6 = {
+const vars$7 = {
   ...compVars,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$6
+  vars: vars$7
 });
 
 const globalRefs$3 = getThemeRefs(globals);
 
-const vars$5 = MappingsFieldClass.cssVarList;
+const vars$6 = MappingsFieldClass.cssVarList;
 
 const mappingsField = {
-  [vars$5.hostWidth]: refs.width,
-  [vars$5.hostDirection]: refs.direction,
-  [vars$5.fontSize]: refs.fontSize,
-  [vars$5.fontFamily]: refs.fontFamily,
-  [vars$5.separatorFontSize]: '14px',
-  [vars$5.labelsFontSize]: '14px',
-  [vars$5.labelsLineHeight]: '1',
-  [vars$5.labelsMarginBottom]: '6px',
-  [vars$5.labelTextColor]: refs.labelTextColor,
-  [vars$5.itemMarginBottom]: '1em',
+  [vars$6.hostWidth]: refs.width,
+  [vars$6.hostDirection]: refs.direction,
+  [vars$6.fontSize]: refs.fontSize,
+  [vars$6.fontFamily]: refs.fontFamily,
+  [vars$6.separatorFontSize]: '14px',
+  [vars$6.labelsFontSize]: '14px',
+  [vars$6.labelsLineHeight]: '1',
+  [vars$6.labelsMarginBottom]: '6px',
+  [vars$6.labelTextColor]: refs.labelTextColor,
+  [vars$6.itemMarginBottom]: '1em',
   // To be positioned correctly, the min width has to match the text field min width
-  [vars$5.valueLabelMinWidth]: refs.minWidth,
+  [vars$6.valueLabelMinWidth]: refs.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
-  [vars$5.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$3.border.xs})`,
-  [vars$5.separatorWidth]: '70px',
-  [vars$5.removeButtonWidth]: '60px',
+  [vars$6.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$3.border.xs})`,
+  [vars$6.separatorWidth]: '70px',
+  [vars$6.removeButtonWidth]: '60px',
 };
 
 var mappingsField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: mappingsField,
   mappingsField: mappingsField,
-  vars: vars$5
+  vars: vars$6
 });
 
 const globalRefs$2 = getThemeRefs(globals);
-const vars$4 = UserAttributeClass.cssVarList;
+const vars$5 = UserAttributeClass.cssVarList;
 
 const userAttribute = {
-  [vars$4.hostDirection]: globalRefs$2.direction,
-  [vars$4.labelTextWidth]: '150px',
-  [vars$4.valueTextWidth]: '200px',
-  [vars$4.badgeMaxWidth]: '85px',
-  [vars$4.itemsGap]: '16px',
-  [vars$4.hostMinWidth]: '530px',
+  [vars$5.hostDirection]: globalRefs$2.direction,
+  [vars$5.labelTextWidth]: '150px',
+  [vars$5.valueTextWidth]: '200px',
+  [vars$5.badgeMaxWidth]: '85px',
+  [vars$5.itemsGap]: '16px',
+  [vars$5.hostMinWidth]: '530px',
   _fullWidth: {
-    [vars$4.hostWidth]: '100%',
+    [vars$5.hostWidth]: '100%',
   },
 };
 
 var userAttribute$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAttribute,
-  vars: vars$4
+  vars: vars$5
 });
 
 const globalRefs$1 = getThemeRefs(globals);
-const vars$3 = UserAuthMethodClass.cssVarList;
+const vars$4 = UserAuthMethodClass.cssVarList;
 
 const userAuthMethod = {
-  [vars$3.hostDirection]: globalRefs$1.direction,
-  [vars$3.labelTextWidth]: '200px',
-  [vars$3.itemsGap]: '16px',
-  [vars$3.hostMinWidth]: '530px',
-  [vars$3.iconSize]: '24px',
+  [vars$4.hostDirection]: globalRefs$1.direction,
+  [vars$4.labelTextWidth]: '200px',
+  [vars$4.itemsGap]: '16px',
+  [vars$4.hostMinWidth]: '530px',
+  [vars$4.iconSize]: '24px',
   _fullWidth: {
-    [vars$3.hostWidth]: '100%',
+    [vars$4.hostWidth]: '100%',
   },
 };
 
 var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAuthMethod,
-  vars: vars$3
+  vars: vars$4
 });
 
-const vars$2 = SamlGroupMappingsClass.cssVarList;
+const vars$3 = SamlGroupMappingsClass.cssVarList;
 
 const samlGroupMappings = {
-  [vars$2.hostWidth]: refs.width,
-  [vars$2.hostDirection]: refs.direction,
-  [vars$2.groupNameInputMarginBottom]: '1em',
+  [vars$3.hostWidth]: refs.width,
+  [vars$3.hostDirection]: refs.direction,
+  [vars$3.groupNameInputMarginBottom]: '1em',
 };
 
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: samlGroupMappings,
   samlGroupMappings: samlGroupMappings,
-  vars: vars$2
+  vars: vars$3
 });
 
 const globalRefs = getThemeRefs(globals);
-const vars$1 = PolicyValidationClass.cssVarList;
+const vars$2 = PolicyValidationClass.cssVarList;
 
 const policyValidation = {
-  [vars$1.fontFamily]: refs.fontFamily,
-  [vars$1.fontSize]: refs.labelFontSize,
-  [vars$1.textColor]: refs.labelTextColor,
-  [vars$1.borderWidth]: refs.borderWidth,
-  [vars$1.borderStyle]: refs.borderStyle,
-  [vars$1.borderColor]: refs.borderColor,
-  [vars$1.borderRadius]: globalRefs.radius.sm,
-  [vars$1.backgroundColor]: 'none',
-  [vars$1.padding]: '0px',
-  [vars$1.labelMargin]: globalRefs.spacing.sm,
-  [vars$1.itemsSpacing]: globalRefs.spacing.lg,
-  [vars$1.itemSymbolDefault]: "'\\2022'", // "•"
-  [vars$1.itemSymbolSuccess]: "'\\2713'", // "✓"
-  [vars$1.itemSymbolError]: "'\\2A09'", // "⨉"
-  [vars$1.itemSymbolSuccessColor]: globalRefs.colors.success.main,
-  [vars$1.itemSymbolErrorColor]: globalRefs.colors.error.main,
+  [vars$2.fontFamily]: refs.fontFamily,
+  [vars$2.fontSize]: refs.labelFontSize,
+  [vars$2.textColor]: refs.labelTextColor,
+  [vars$2.borderWidth]: refs.borderWidth,
+  [vars$2.borderStyle]: refs.borderStyle,
+  [vars$2.borderColor]: refs.borderColor,
+  [vars$2.borderRadius]: globalRefs.radius.sm,
+  [vars$2.backgroundColor]: 'none',
+  [vars$2.padding]: '0px',
+  [vars$2.labelMargin]: globalRefs.spacing.sm,
+  [vars$2.itemsSpacing]: globalRefs.spacing.lg,
+  [vars$2.itemSymbolDefault]: "'\\2022'", // "•"
+  [vars$2.itemSymbolSuccess]: "'\\2713'", // "✓"
+  [vars$2.itemSymbolError]: "'\\2A09'", // "⨉"
+  [vars$2.itemSymbolSuccessColor]: globalRefs.colors.success.main,
+  [vars$2.itemSymbolErrorColor]: globalRefs.colors.error.main,
 };
 
 var policyValidation$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: policyValidation,
+  vars: vars$2
+});
+
+const vars$1 = IconClass.cssVarList;
+
+const icon = {};
+
+var icon$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: icon,
   vars: vars$1
 });
 
@@ -12631,6 +12710,7 @@ const components = {
   userAuthMethod: userAuthMethod$1,
   samlGroupMappings: samlGroupMappings$1,
   policyValidation: policyValidation$1,
+  icon: icon$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -12643,7 +12723,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$F, components: vars };
+const themeVars = { globals: vars$G, components: vars };
 
 const colors = {
   surface: {
@@ -12689,5 +12769,5 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, EnrichedTextClass, 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, EnrichedTextClass, GridClass, IconClass, 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 };
 //# sourceMappingURL=index.esm.js.map