@descope/web-components-ui 1.35.0 → 1.37.0

package/dist/index.esm.js

@@ -1,12 +1,12 @@
-import '@vaadin/button';
 import debounce from 'lodash.debounce';
 import merge from 'lodash.merge';
 import Color from 'color';
 import 'element-internals-polyfill';
-import DOMPurify from 'dompurify';
 import '@vaadin/checkbox';
 import '@vaadin/text-field';
 import '@vaadin/combo-box';
+import DOMPurify from 'dompurify';
+import '@vaadin/button';
 import '@vaadin/popover/src/vaadin-popover';
 import '@vaadin/icons';
 import '@vaadin/icon';
@@ -1813,6 +1813,8 @@ const composedProxyInputMixin$1 = (proxyInputMixinConfig) =>
 // because of that, we are adding this separator that is also used as a differentiator
 const DISPLAY_NAME_SEPARATOR$1 = '_';
 
+const sanitizeSelector$1 = (selector) => selector.replace(/[^\w\s]/gi, '');
+
 const withWaitForShadowRoot$1 = (getRootElementFn) => async (that) => {
   const ele = await getRootElementFn(that);
 
@@ -1843,7 +1845,7 @@ const withWaitForShadowRoot$1 = (getRootElementFn) => async (that) => {
 const portalMixin$1 =
   ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
   (superclass) => {
-    const eleDisplayName = name;
+    const eleDisplayName = name || sanitizeSelector$1(selector);
 
     const BaseClass = createStyleMixin$1({
       mappings,
@@ -2264,455 +2266,146 @@ const externalInputMixin =
       }
     };
 
-const getFileExtension = (path) => {
-  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
-  return match ? match[1] : null;
-};
-
-const base64Prefix = 'data:image/svg+xml;base64,';
-
-const isBase64Svg = (src) => src.startsWith(base64Prefix);
-
-const createImgEle = (src) => {
-  const ele = document.createElement('img');
-  ele.setAttribute('src', src);
-  return ele;
-};
-
-const createSvgEle = (text) => {
-  // we want to purify the SVG to avoid XSS attacks
-  const clean = DOMPurify.sanitize(text, { USE_PROFILES: { svg: true, svgFilters: true } });
-
-  const parser = new DOMParser();
-  const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');
-  return ele;
-};
-
-const createIcon = async (src) => {
-  try {
-    let ele;
-    if (isBase64Svg(src)) {
-      // handle base64 source
-      const svgXml = atob(src.slice(base64Prefix.length));
-      ele = createSvgEle(svgXml);
-    } else if (getFileExtension(src) === 'svg') {
-      // handle urls
-      const fetchedSrc = await fetch(src);
-      const text = await fetchedSrc.text();
-      ele = createSvgEle(text);
-    } else {
-      // handle binary
-      ele = createImgEle(src);
-    }
-
-    ele.style.setProperty('max-width', '100%');
-    ele.style.setProperty('max-height', '100%');
+const createBaseInputClass$1 = (...args) =>
+  compose$1(
+    inputValidationMixin$1,
+    changeMixin$1,
+    normalizeBooleanAttributesMixin$1,
+    inputEventsDispatchingMixin$1
+  )(createBaseClass$1(...args));
 
-    return ele;
-  } catch {
-    return null;
-  }
-};
+const componentName$1b = getComponentName$1('boolean-field-internal');
 
-/* eslint-disable no-use-before-define */
+const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const componentName$1b = getComponentName$1('icon');
+const BaseInputClass$c = createBaseInputClass$1({ componentName: componentName$1b, baseSelector: 'div' });
 
-class RawIcon extends createBaseClass$1({ componentName: componentName$1b, baseSelector: 'slot' }) {
+class BooleanInputInternal extends BaseInputClass$c {
   static get observedAttributes() {
-    return ['src'];
+    return ['readonly'];
   }
 
-  #icon;
-
   constructor() {
     super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<slot></slot>
-	`;
-
-    injectStyle(
-      `
-			:host > slot {
-				box-sizing: border-box;
-				width: 100%;
-				height: 100%;
-				display: flex;
-				overflow: hidden;
-			}
-			:host {
-				display: inline-block;
-			}
-  `,
-      this
-    );
+    this.innerHTML = `
+			<div class="wrapper">
+				<vaadin-checkbox></vaadin-checkbox>
+			</div>
+		`;
+    this.wrapperEle = this.querySelector('div');
+    this.checkbox = this.querySelector('vaadin-checkbox');
   }
 
-  init() {
-    super.init?.();
-    this.toggleVisibility(this.src);
+  get value() {
+    return this.checkbox?.checked;
   }
 
-  toggleVisibility(isVisible) {
-    this.style.display = isVisible ? '' : 'none';
+  set value(val) {
+    this.checkbox.checked = val;
   }
 
-  get src() {
-    return this.getAttribute('src');
+  get checked() {
+    return this.value;
   }
 
-  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
-  // with the value from the `st-fill` attribute
-  // eslint-disable-next-line class-methods-use-this
-  updateFillColor(node) {
-    // set fill to root node and all its relevant selectors
-    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
+  set checked(val) {
+    this.value = val;
+  }
 
-    elementsToReplace.forEach((ele) => {
-      ele.setAttribute(
-        'fill',
-        `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
-      );
+  init() {
+    this.addEventListener('focus', (e) => {
+      if (e.isTrusted) {
+        this.checkbox.focus();
+      }
     });
+    super.init?.();
+
+    forwardAttrs$1(this, this.checkbox, { includeAttrs: forwardAttributes$1 });
+    syncAttrs$1(this, this.checkbox, { includeAttrs: ['checked'] });
+
+    // we need it in order to set the focus ring and trigger validation on descope-checkbox
+    this.handleFocusEventsDispatching([this.checkbox]);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-    if (oldValue === newValue) return;
+    if (attrName === 'readonly') {
+      this.onReadOnlyChange(newValue !== null);
+    }
+  }
 
-    if (attrName === 'src') {
-      this.toggleVisibility(newValue);
+  onReadOnlyChange(val) {
+    this.baseElement.setAttribute('inert', val);
+  }
 
-      createIcon(this.src).then((res) => {
-        this.innerHTML = '';
-        if (res) {
-          const clonedNode = res.cloneNode(true);
-          this.updateFillColor(clonedNode);
-          this.appendChild(clonedNode);
-        }
-      });
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
     }
+    return {};
   }
 }
 
-const IconClass = compose$1(
-  createStyleMixin$1({
-    mappings: {
-      fill: {},
-    },
-  }),
-  draggableMixin$1,
-  componentNameValidationMixin$1
-)(RawIcon);
+const booleanFieldMixin = (superclass) =>
+  class BooleanFieldMixinClass extends superclass {
+    init() {
+      super.init?.();
 
-const clickableMixin = (superclass) =>
-  class ClickableMixinClass extends superclass {
-    get isLoading() {
-      return this.getAttribute('loading') === 'true';
-    }
+      const template = document.createElement('template');
+      template.innerHTML = `
+				<${componentName$1b}
+					tabindex="-1"
+					slot="input"
+				></${componentName$1b}>
+			`;
 
-    click() {
-      this.isLoading || super.click();
+      this.baseElement.appendChild(template.content.cloneNode(true));
+      this.inputElement = this.shadowRoot.querySelector(componentName$1b);
+      this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
+
+      forwardAttrs$1(this, this.inputElement, {
+        includeAttrs: [
+          'required',
+          'full-width',
+          'size',
+          'label',
+          'invalid',
+          'disabled',
+          'readonly',
+        ],
+      });
+
+      forwardProps$3(this.inputElement, this, ['checked']);
+      syncAttrs$1(this, this.inputElement, { includeAttrs: ['checked'] });
     }
   };
 
-const componentName$1a = getComponentName$1('button');
+const useHostExternalPadding = (cssVarList) => `
+    :host {
+        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
+    }
+`;
 
-const resetStyles = `
-	:host {
-		display: inline-block;
-		box-sizing: border-box;
-	}
-	vaadin-button::before,
-	vaadin-button::after {
-		opacity: 0;
-	}
-	vaadin-button {
-		margin: 0;
-		min-width: 0;
-		width: 100%;
-		height: auto;
-		box-shadow: none;
-	}
-	vaadin-button::part(label) {
-		padding: 0;
-    width: 100%;
-	}
-	vaadin-button::part(prefix) {
-		margin-left: 0;
-		margin-right: 0;
-	}
+const resetInputFieldUnderlayingBorder = (name) => `
+    ${name}::part(input-field)::after {
+        border: none;
+    }
 `;
 
-const iconStyles = `
-	vaadin-button::part(prefix),
-	vaadin-button::part(label) {
-		display: flex;
-		align-items: center;
+const resetInitialHeight = (name) => `
+    ${name}::before {
+		height: unset;
 	}
 `;
 
-const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
-
-const { host: host$q, label: label$a, slottedIcon } = {
-  host: { selector: () => ':host' },
-  label: { selector: '::part(label)' },
-  slottedIcon: { selector: () => '::slotted(descope-icon)' },
-};
-
-let loadingIndicatorStyles;
-
-const ButtonClass = compose$1(
-  createStyleMixin$1({
-    mappings: {
-      hostWidth: { property: 'width' },
-      hostHeight: { property: 'height' },
-      hostDirection: { ...host$q, property: 'direction' },
-      fontSize: {},
-      fontFamily: {},
-
-      cursor: {},
-      backgroundColor: {},
-
-      outlineOffset: {},
-      outlineColor: {},
-      outlineStyle: {},
-      outlineWidth: {},
-
-      borderRadius: {},
-      borderColor: {},
-      borderStyle: {},
-      borderWidth: {},
-
-      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
-      horizontalPadding: [
-        { property: 'padding-right', fallback: '0.875em' },
-        { property: 'padding-left', fallback: '0.875em' },
-      ],
-
-      labelTextColor: { property: 'color' },
-      iconColor: {
-        selector: () => `::slotted(*)`,
-        property: IconClass.cssVarList.fill,
-      },
-      labelTextDecoration: { ...label$a, property: 'text-decoration' },
-      labelSpacing: { ...label$a, property: 'gap' },
-      textAlign: { ...label$a, property: 'justify-content', fallback: 'center' },
-
-      iconSize: [
-        { ...slottedIcon, property: 'width' },
-        { ...slottedIcon, property: 'height' },
-      ],
-    },
-  }),
-  clickableMixin,
-  draggableMixin$1,
-  componentNameValidationMixin$1
-)(
-  createProxy$1({
-    slots: ['', 'prefix', 'label', 'suffix'],
-    wrappedEleName: 'vaadin-button',
-    style: () => `
-			${resetStyles}
-			${iconStyles}
-			${loadingIndicatorStyles}
-			${editorOverrides}
-			:host {
-				padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}));
-			}
-      :host([full-width="true"]) {
-        width: var(${ButtonClass.cssVarList.hostWidth});
-      }
-			vaadin-button {
-				height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
-			}
-			[square="true"]:not([full-width="true"]) {
-				width: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
-        padding: 0;
-			}
-		`,
-    excludeAttrsSync: ['tabindex'],
-    componentName: componentName$1a,
-  })
-);
-
-const { color, fontSize } = ButtonClass.cssVarList;
-loadingIndicatorStyles = `
-	@keyframes spin {
-		0% { -webkit-transform: rotate(0deg); }
-		100% { -webkit-transform: rotate(360deg); }
-	}
-	:host([loading="true"]) ::before {
-		animation: spin 2s linear infinite;
-		position: absolute;
-		content: '';
-		z-index: 1;
-		box-sizing: border-box;
-		border-radius: 50%;
-		border-bottom-color: transparent;
-		border-left-color: transparent;
-		border-style: solid;
-		color: var(${color});
-		top: calc(50% - (var(${fontSize}) / 2));
-		left: calc(50% - (var(${fontSize}) / 2));
-		border-width: calc(var(${fontSize}) / 10);
-		width: var(${fontSize});
-		height: var(${fontSize});
-	}
-	:host([disabled="true"]),
-	:host([loading="true"]) {
-		pointer-events: none;
-	}
-	:host([loading="true"])::part(prefix),
-	:host([loading="true"])::part(label) {
-		visibility: hidden;
-	}
-`;
-
-customElements.define(componentName$1a, ButtonClass);
-
-const createBaseInputClass$1 = (...args) =>
-  compose$1(
-    inputValidationMixin$1,
-    changeMixin$1,
-    normalizeBooleanAttributesMixin$1,
-    inputEventsDispatchingMixin$1
-  )(createBaseClass$1(...args));
-
-const componentName$19 = getComponentName$1('boolean-field-internal');
-
-const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
-
-const BaseInputClass$c = createBaseInputClass$1({ componentName: componentName$19, baseSelector: 'div' });
-
-class BooleanInputInternal extends BaseInputClass$c {
-  static get observedAttributes() {
-    return ['readonly'];
-  }
-
-  constructor() {
-    super();
-    this.innerHTML = `
-			<div class="wrapper">
-				<vaadin-checkbox></vaadin-checkbox>
-			</div>
-		`;
-    this.wrapperEle = this.querySelector('div');
-    this.checkbox = this.querySelector('vaadin-checkbox');
-  }
-
-  get value() {
-    return this.checkbox?.checked;
-  }
-
-  set value(val) {
-    this.checkbox.checked = val;
-  }
-
-  get checked() {
-    return this.value;
-  }
-
-  set checked(val) {
-    this.value = val;
-  }
-
-  init() {
-    this.addEventListener('focus', (e) => {
-      if (e.isTrusted) {
-        this.checkbox.focus();
-      }
-    });
-    super.init?.();
-
-    forwardAttrs$1(this, this.checkbox, { includeAttrs: forwardAttributes$1 });
-    syncAttrs$1(this, this.checkbox, { includeAttrs: ['checked'] });
-
-    // we need it in order to set the focus ring and trigger validation on descope-checkbox
-    this.handleFocusEventsDispatching([this.checkbox]);
-  }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-    if (attrName === 'readonly') {
-      this.onReadOnlyChange(newValue !== null);
-    }
-  }
-
-  onReadOnlyChange(val) {
-    this.baseElement.setAttribute('inert', val);
-  }
-
-  getValidity() {
-    if (this.isRequired && !this.value) {
-      return { valueMissing: true };
-    }
-    return {};
-  }
-}
-
-const booleanFieldMixin = (superclass) =>
-  class BooleanFieldMixinClass extends superclass {
-    init() {
-      super.init?.();
-
-      const template = document.createElement('template');
-      template.innerHTML = `
-				<${componentName$19}
-					tabindex="-1"
-					slot="input"
-				></${componentName$19}>
-			`;
-
-      this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$19);
-      this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
-
-      forwardAttrs$1(this, this.inputElement, {
-        includeAttrs: [
-          'required',
-          'full-width',
-          'size',
-          'label',
-          'invalid',
-          'disabled',
-          'readonly',
-        ],
-      });
-
-      forwardProps$3(this.inputElement, this, ['checked']);
-      syncAttrs$1(this, this.inputElement, { includeAttrs: ['checked'] });
-    }
-  };
-
-const useHostExternalPadding = (cssVarList) => `
-    :host {
-        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
-    }
-`;
-
-const resetInputFieldUnderlayingBorder = (name) => `
-    ${name}::part(input-field)::after {
-        border: none;
-    }
-`;
-
-const resetInitialHeight = (name) => `
-    ${name}::before {
-		height: unset;
-	}
-`;
-
-const resetInputElement = (name) => `
-    ${name} > input {
-        -webkit-mask-image: none;
-        min-height: 0;
-        box-sizing: border-box;
-    }
-`;
+const resetInputElement = (name) => `
+    ${name} > input {
+        -webkit-mask-image: none;
+        min-height: 0;
+        box-sizing: border-box;
+    }
+`;
 
 const resetInputContainer = (name) => `
     ${name} {
@@ -2882,10 +2575,10 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$18 = getComponentName$1('checkbox');
+const componentName$1a = getComponentName$1('checkbox');
 
 const {
-  host: host$p,
+  host: host$q,
   component: component$1,
   checkboxElement,
   checkboxSurface,
@@ -2907,10 +2600,10 @@ const {
 const CheckboxClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$p, property: 'width' },
-      hostDirection: { ...host$p, property: 'direction' },
+      hostWidth: { ...host$q, property: 'width' },
+      hostDirection: { ...host$q, property: 'direction' },
 
-      fontSize: [host$p, checkboxElement, checkboxLabel$1],
+      fontSize: [host$q, checkboxElement, checkboxLabel$1],
       fontFamily: [checkboxLabel$1, helperText$a, errorMessage$d],
 
       labelTextColor: { ...checkboxLabel$1, property: 'color' },
@@ -2999,18 +2692,18 @@ const CheckboxClass = compose$1(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$18,
+    componentName: componentName$1a,
   })
 );
 
-customElements.define(componentName$19, BooleanInputInternal);
+customElements.define(componentName$1b, BooleanInputInternal);
 
-customElements.define(componentName$18, CheckboxClass);
+customElements.define(componentName$1a, CheckboxClass);
 
-const componentName$17 = getComponentName$1('switch-toggle');
+const componentName$19 = getComponentName$1('switch-toggle');
 
 const {
-  host: host$o,
+  host: host$p,
   component,
   checkboxElement: track,
   checkboxSurface: knob,
@@ -3032,8 +2725,8 @@ const {
 const SwitchToggleClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$o, property: 'width' },
-      hostDirection: { ...host$o, property: 'direction' },
+      hostWidth: { ...host$p, property: 'width' },
+      hostDirection: { ...host$p, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
       fontFamily: [checkboxLabel, helperText$9, errorMessage$c],
@@ -3145,17 +2838,17 @@ const SwitchToggleClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$17,
+    componentName: componentName$19,
   })
 );
 
-customElements.define(componentName$17, SwitchToggleClass);
+customElements.define(componentName$19, SwitchToggleClass);
 
-const componentName$16 = getComponentName$1('loader-linear');
+const componentName$18 = getComponentName$1('loader-linear');
 
-class RawLoaderLinear extends createBaseClass$1({ componentName: componentName$16, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass$1({ componentName: componentName$18, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$16;
+    return componentName$18;
   }
 
   constructor() {
@@ -3195,18 +2888,18 @@ const selectors$2 = {
   host: { selector: () => ':host' },
 };
 
-const { after: after$1, host: host$n } = selectors$2;
+const { after: after$1, host: host$o } = selectors$2;
 
 const LoaderLinearClass = compose$1(
   createStyleMixin$1({
     mappings: {
       hostDisplay: {},
-      hostWidth: { ...host$n, property: 'width' },
+      hostWidth: { ...host$o, property: 'width' },
       barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
       barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
       verticalPadding: [
-        { ...host$n, property: 'padding-top' },
-        { ...host$n, property: 'padding-bottom' },
+        { ...host$o, property: 'padding-top' },
+        { ...host$o, property: 'padding-bottom' },
       ],
       barBackgroundColor: { property: 'background-color' },
       barColor: { ...after$1, property: 'background-color' },
@@ -3220,11 +2913,11 @@ const LoaderLinearClass = compose$1(
   componentNameValidationMixin$1
 )(RawLoaderLinear);
 
-customElements.define(componentName$16, LoaderLinearClass);
+customElements.define(componentName$18, LoaderLinearClass);
 
-const componentName$15 = getComponentName$1('loader-radial');
+const componentName$17 = getComponentName$1('loader-radial');
 
-class RawLoaderRadial extends createBaseClass$1({ componentName: componentName$15, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass$1({ componentName: componentName$17, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -3272,11 +2965,11 @@ const LoaderRadialClass = compose$1(
   componentNameValidationMixin$1
 )(RawLoaderRadial);
 
-customElements.define(componentName$15, LoaderRadialClass);
+customElements.define(componentName$17, LoaderRadialClass);
 
-const componentName$14 = getComponentName$1('container');
+const componentName$16 = getComponentName$1('container');
 
-class RawContainer extends createBaseClass$1({ componentName: componentName$14, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass$1({ componentName: componentName$16, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -3339,7 +3032,7 @@ const ContainerClass = compose$1(
   componentNameValidationMixin$1
 )(RawContainer);
 
-customElements.define(componentName$14, ContainerClass);
+customElements.define(componentName$16, ContainerClass);
 
 const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
 
@@ -4512,6 +4205,9 @@ const composedProxyInputMixin = (proxyInputMixinConfig) =>
 const DISPLAY_NAME_SEPARATOR = '_';
 const PORTAL_THEME_PREFIX = '@';
 
+
+const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
+
 const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
   const ele = await getRootElementFn(that);
 
@@ -4542,7 +4238,7 @@ const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
 const portalMixin =
   ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
   (superclass) => {
-    const eleDisplayName = name;
+    const eleDisplayName = name || sanitizeSelector(selector);
 
     const BaseClass = createStyleMixin({
       mappings,
@@ -4565,9 +4261,14 @@ const portalMixin =
         // we cannot use "this" before calling "super"
         const getRootElement = async (that) => {
           const baseEle = (that.shadowRoot || that).querySelector(that.baseSelector);
-          {
+          if (!selector) {
             return baseEle;
           }
+
+          // in case we have a selector, we should first wait for the base element shadow root
+          //  and then look for the internal element
+          const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
+          return baseEleShadowRoot.querySelector(selector);
         };
 
         const getPortalElement = withWaitForShadowRoot(getRootElement);
@@ -4673,7 +4374,7 @@ const connectorMixin =
       }
     };
 
-const componentName$13 = getComponentName('combo-box');
+const componentName$15 = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -5025,13 +4726,13 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$m,
+  host: host$n,
   inputField: inputField$6,
   inputElement: inputElement$3,
   placeholder: placeholder$3,
   toggle: toggle$1,
   clearButton: clearButton$1,
-  label: label$9,
+  label: label$a,
   requiredIndicator: requiredIndicator$9,
   helperText: helperText$8,
   errorMessage: errorMessage$b,
@@ -5057,15 +4758,15 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$m, property: 'width' },
-      hostDirection: { ...host$m, property: 'direction' },
+      hostWidth: { ...host$n, property: 'width' },
+      hostDirection: { ...host$n, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$m],
-      fontFamily: [label$9, placeholder$3, inputField$6, helperText$8, errorMessage$b],
-      labelFontSize: { ...label$9, property: 'font-size' },
-      labelFontWeight: { ...label$9, property: 'font-weight' },
+      fontSize: [{}, host$n],
+      fontFamily: [label$a, placeholder$3, inputField$6, helperText$8, errorMessage$b],
+      labelFontSize: { ...label$a, property: 'font-size' },
+      labelFontWeight: { ...label$a, property: 'font-weight' },
       labelTextColor: [
-        { ...label$9, property: 'color' },
+        { ...label$a, property: 'color' },
         { ...requiredIndicator$9, property: 'color' },
       ],
       errorMessageTextColor: { ...errorMessage$b, property: 'color' },
@@ -5117,15 +4818,15 @@ const ComboBoxClass = compose(
         { ...inputElement$3, property: 'padding-right' },
       ],
 
-      labelPosition: { ...label$9, property: 'position' },
-      labelTopPosition: { ...label$9, property: 'top' },
+      labelPosition: { ...label$a, property: 'position' },
+      labelTopPosition: { ...label$a, property: 'top' },
       labelHorizontalPosition: [
-        { ...label$9, property: 'left' },
-        { ...label$9, property: 'right' },
+        { ...label$a, property: 'left' },
+        { ...label$a, property: 'right' },
       ],
-      inputTransformY: { ...label$9, property: 'transform' },
-      inputTransition: { ...label$9, property: 'transition' },
-      marginInlineStart: { ...label$9, property: 'margin-inline-start' },
+      inputTransformY: { ...label$a, property: 'transform' },
+      inputTransition: { ...label$a, property: 'transition' },
+      marginInlineStart: { ...label$a, property: 'margin-inline-start' },
       placeholderOpacity: { ...placeholder$3, property: 'opacity' },
       inputVerticalAlignment: { ...inputField$6, property: 'align-items' },
       valueInputHeight: { ...inputElement$3, property: 'height' },
@@ -5321,12 +5022,321 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'loading'],
-    componentName: componentName$13,
+    componentName: componentName$15,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
 );
 
-customElements.define(componentName$13, ComboBoxClass);
+customElements.define(componentName$15, ComboBoxClass);
+
+const getFileExtension = (path) => {
+  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
+  return match ? match[1] : null;
+};
+
+const base64Prefix = 'data:image/svg+xml;base64,';
+
+const isBase64Svg = (src) => src.startsWith(base64Prefix);
+
+const createImgEle = (src) => {
+  const ele = document.createElement('img');
+  ele.setAttribute('src', src);
+  return ele;
+};
+
+const createSvgEle = (text) => {
+  // we want to purify the SVG to avoid XSS attacks
+  const clean = DOMPurify.sanitize(text, { USE_PROFILES: { svg: true, svgFilters: true } });
+
+  const parser = new DOMParser();
+  const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');
+  return ele;
+};
+
+const createIcon = async (src) => {
+  try {
+    let ele;
+    if (isBase64Svg(src)) {
+      // handle base64 source
+      const svgXml = atob(src.slice(base64Prefix.length));
+      ele = createSvgEle(svgXml);
+    } else if (getFileExtension(src) === 'svg') {
+      // handle urls
+      const fetchedSrc = await fetch(src);
+      const text = await fetchedSrc.text();
+      ele = createSvgEle(text);
+    } else {
+      // handle binary
+      ele = createImgEle(src);
+    }
+
+    ele.style.setProperty('max-width', '100%');
+    ele.style.setProperty('max-height', '100%');
+
+    return ele;
+  } catch {
+    return null;
+  }
+};
+
+/* eslint-disable no-use-before-define */
+
+const componentName$14 = getComponentName('icon');
+
+class RawIcon extends createBaseClass({ componentName: componentName$14, baseSelector: 'slot' }) {
+  static get observedAttributes() {
+    return ['src'];
+  }
+
+  #icon;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<slot></slot>
+	`;
+
+    injectStyle(
+      `
+			:host > slot {
+				box-sizing: border-box;
+				width: 100%;
+				height: 100%;
+				display: flex;
+				overflow: hidden;
+			}
+			:host {
+				display: inline-block;
+			}
+  `,
+      this
+    );
+  }
+
+  init() {
+    super.init?.();
+    this.toggleVisibility(this.src);
+  }
+
+  toggleVisibility(isVisible) {
+    this.style.display = isVisible ? '' : 'none';
+  }
+
+  get src() {
+    return this.getAttribute('src');
+  }
+
+  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
+  // with the value from the `st-fill` attribute
+  // eslint-disable-next-line class-methods-use-this
+  updateFillColor(node) {
+    // set fill to root node and all its relevant selectors
+    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
+
+    elementsToReplace.forEach((ele) => {
+      ele.setAttribute(
+        'fill',
+        `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
+      );
+    });
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue === newValue) return;
+
+    if (attrName === 'src') {
+      this.toggleVisibility(newValue);
+
+      createIcon(this.src).then((res) => {
+        this.innerHTML = '';
+        if (res) {
+          const clonedNode = res.cloneNode(true);
+          this.updateFillColor(clonedNode);
+          this.appendChild(clonedNode);
+        }
+      });
+    }
+  }
+}
+
+const IconClass = compose(
+  createStyleMixin({
+    mappings: {
+      fill: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawIcon);
+
+const clickableMixin = (superclass) =>
+  class ClickableMixinClass extends superclass {
+    get isLoading() {
+      return this.getAttribute('loading') === 'true';
+    }
+
+    click() {
+      this.isLoading || super.click();
+    }
+  };
+
+const componentName$13 = getComponentName('button');
+
+const resetStyles = `
+	:host {
+		display: inline-block;
+		box-sizing: border-box;
+	}
+	vaadin-button::before,
+	vaadin-button::after {
+		opacity: 0;
+	}
+	vaadin-button {
+		margin: 0;
+		min-width: 0;
+		width: 100%;
+		height: auto;
+		box-shadow: none;
+	}
+	vaadin-button::part(label) {
+		padding: 0;
+    width: 100%;
+	}
+	vaadin-button::part(prefix) {
+		margin-left: 0;
+		margin-right: 0;
+	}
+`;
+
+const iconStyles = `
+	vaadin-button::part(prefix),
+	vaadin-button::part(label) {
+		display: flex;
+		align-items: center;
+	}
+`;
+
+const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
+
+const { host: host$m, label: label$9, slottedIcon } = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  slottedIcon: { selector: () => '::slotted(descope-icon)' },
+};
+
+let loadingIndicatorStyles;
+
+const ButtonClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { property: 'width' },
+      hostHeight: { property: 'height' },
+      hostDirection: { ...host$m, property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+
+      cursor: {},
+      backgroundColor: {},
+
+      outlineOffset: {},
+      outlineColor: {},
+      outlineStyle: {},
+      outlineWidth: {},
+
+      borderRadius: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [
+        { property: 'padding-right', fallback: '0.875em' },
+        { property: 'padding-left', fallback: '0.875em' },
+      ],
+
+      labelTextColor: { property: 'color' },
+      iconColor: {
+        selector: () => `::slotted(*)`,
+        property: IconClass.cssVarList.fill,
+      },
+      labelTextDecoration: { ...label$9, property: 'text-decoration' },
+      labelSpacing: { ...label$9, property: 'gap' },
+      textAlign: { ...label$9, property: 'justify-content', fallback: 'center' },
+
+      iconSize: [
+        { ...slottedIcon, property: 'width' },
+        { ...slottedIcon, property: 'height' },
+      ],
+    },
+  }),
+  clickableMixin,
+  draggableMixin,
+  componentNameValidationMixin
+)(
+  createProxy({
+    slots: ['', 'prefix', 'label', 'suffix'],
+    wrappedEleName: 'vaadin-button',
+    style: () => `
+			${resetStyles}
+			${iconStyles}
+			${loadingIndicatorStyles}
+			${editorOverrides}
+			:host {
+				padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}));
+			}
+      :host([full-width="true"]) {
+        width: var(${ButtonClass.cssVarList.hostWidth});
+      }
+			vaadin-button {
+				height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
+			}
+			[square="true"]:not([full-width="true"]) {
+				width: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
+        padding: 0;
+			}
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName: componentName$13,
+  })
+);
+
+const { color, fontSize } = ButtonClass.cssVarList;
+loadingIndicatorStyles = `
+	@keyframes spin {
+		0% { -webkit-transform: rotate(0deg); }
+		100% { -webkit-transform: rotate(360deg); }
+	}
+	:host([loading="true"]) ::before {
+		animation: spin 2s linear infinite;
+		position: absolute;
+		content: '';
+		z-index: 1;
+		box-sizing: border-box;
+		border-radius: 50%;
+		border-bottom-color: transparent;
+		border-left-color: transparent;
+		border-style: solid;
+		color: var(${color});
+		top: calc(50% - (var(${fontSize}) / 2));
+		left: calc(50% - (var(${fontSize}) / 2));
+		border-width: calc(var(${fontSize}) / 10);
+		width: var(${fontSize});
+		height: var(${fontSize});
+	}
+	:host([disabled="true"]),
+	:host([loading="true"]) {
+		pointer-events: none;
+	}
+	:host([loading="true"])::part(prefix),
+	:host([loading="true"])::part(label) {
+		visibility: hidden;
+	}
+`;
+
+customElements.define(componentName$13, ButtonClass);
 
 const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
 
@@ -5644,7 +5654,7 @@ const nextMonth = (timestamp) => {
 
 const componentName$12 = getComponentName$1('calendar');
 
-const observedAttrs$4 = [
+const observedAttrs$5 = [
   'initial-value',
   'initial-year',
   'initial-month',
@@ -5663,7 +5673,7 @@ const BaseInputClass$b = createBaseInputClass$1({ componentName: componentName$1
 
 class RawCalendar extends BaseInputClass$b {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$b.observedAttributes || [], observedAttrs$4, calendarUiAttrs);
+    return [].concat(BaseInputClass$b.observedAttributes || [], observedAttrs$5, calendarUiAttrs);
   }
 
   // preview state timestamp
@@ -6436,12 +6446,12 @@ var textFieldMappings = {
 
 const componentName$11 = getComponentName$1('text-field');
 
-const observedAttrs$3 = ['type', 'label-type', 'copy-to-clipboard'];
+const observedAttrs$4 = ['type', 'label-type', 'copy-to-clipboard'];
 
 const customMixin$e = (superclass) =>
   class TextFieldClass extends superclass {
     static get observedAttributes() {
-      return observedAttrs$3.concat(superclass.observedAttributes || []);
+      return observedAttrs$4.concat(superclass.observedAttributes || []);
     }
 
     icon;
@@ -6702,7 +6712,7 @@ const BaseInputClass$a = createBaseInputClass$1({ componentName: componentName$1
 
 const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly'];
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
-const observedAttrs$2 = [...dateFieldAttrs, ...calendarAttrs];
+const observedAttrs$3 = [...dateFieldAttrs, ...calendarAttrs];
 
 class RawDateFieldClass extends BaseInputClass$a {
   timestamp = '';
@@ -6718,7 +6728,7 @@ class RawDateFieldClass extends BaseInputClass$a {
   ];
 
   static get observedAttributes() {
-    return [].concat(BaseInputClass$a.observedAttributes || [], observedAttrs$2);
+    return [].concat(BaseInputClass$a.observedAttributes || [], observedAttrs$3);
   }
 
   constructor() {
@@ -11049,6 +11059,7 @@ const {
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
+  placeholder: { selector: '> input:placeholder-shown' },
   inputElement: { selector: 'input' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   inputField: { selector: () => 'vaadin-text-field::part(input-field)' },
@@ -14602,14 +14613,19 @@ customElements.define(componentName$s, BadgeClass);
 
 const componentName$r = getComponentName$1('modal');
 
+const observedAttrs$2 = ['opened'];
+
 const customMixin$7 = (superclass) =>
   class ModalMixinClass extends superclass {
+    static get observedAttributes() {
+      return [].concat(superclass.observedAttributes || [], observedAttrs$2);
+    }
+
     get opened() {
       return this.getAttribute('opened') === 'true';
     }
 
     handleOpened() {
-      forwardAttrs$1(this, this.baseElement, { includeAttrs: ['opened'] });
       if (this.opened) {
         this.style.display = '';
       } else {
@@ -14617,6 +14633,14 @@ const customMixin$7 = (superclass) =>
       }
     }
 
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback?.(name, oldValue, newValue);
+
+      if (name === 'opened') {
+        this.handleOpened();
+      }
+    }
+
     init() {
       super.init?.();
       this.style.display = 'none';
@@ -14633,6 +14657,7 @@ const customMixin$7 = (superclass) =>
           .appendChild(document.createElement('slot'));
 
         this.#overrideOverlaySettings();
+        forwardAttrs$1(this, this.baseElement, { includeAttrs: ['opened'] });
 
         // we need to always open the modal in `opened=false`
         // to prevent it from rendering outside the dialog
@@ -14940,8 +14965,6 @@ const NotificationClass = compose$1(
 
 customElements.define(componentName$p, NotificationClass);
 
-customElements.define(componentName$1b, IconClass);
-
 const componentName$o = getComponentName$1('mappings-field-internal');
 
 const BaseInputClass$4 = createBaseInputClass$1({ componentName: componentName$o, baseSelector: 'div' });
@@ -17226,6 +17249,8 @@ const ThirdPartyAppLogoClass = compose$1(
   componentNameValidationMixin$1
 )(RawThirdPartyAppLogoClass);
 
+customElements.define(componentName$14, IconClass);
+
 customElements.define(componentName$a, ThirdPartyAppLogoClass);
 
 const componentName$9 = getComponentName$1('security-questions-setup');
@@ -18268,19 +18293,196 @@ const genColor = (color, theme) => {
   return res;
 };
 
-const genColors = (colors) => {
-  return Object.keys(colors).reduce((acc, colorName) => {
-    const currentColor = colors[colorName];
-
-    return Object.assign(acc, {
-      [colorName]: genColor(currentColor),
-    });
-  }, {});
+const genColors = (colors) => {
+  return Object.keys(colors).reduce((acc, colorName) => {
+    const currentColor = colors[colorName];
+
+    return Object.assign(acc, {
+      [colorName]: genColor(currentColor),
+    });
+  }, {});
+};
+
+const direction$1 = 'ltr';
+
+const colors$2 = genColors({
+  surface: {
+    main: '#ffffff',
+    dark: '#636c74',
+    light: '#cfd3d7',
+    highlight: '#f4f5f6',
+    contrast: '#181a1c',
+  },
+  primary: {
+    main: '#006af5',
+    dark: '#004094',
+    light: '#71aeff',
+    highlight: '#f0f6ff',
+    contrast: '#ffffff',
+  },
+  secondary: {
+    main: '#802ed6',
+    dark: '#6410bc',
+    light: '#be89f5',
+    highlight: '#ede7f6',
+    contrast: '#ffffff',
+  },
+  success: {
+    main: '#008000',
+    dark: '#005700',
+    light: '#8bc38b',
+    highlight: '#f5faf5',
+    contrast: '#ffffff',
+  },
+  error: {
+    main: '#e21d12',
+    dark: '#b3170f',
+    light: '#f4807a',
+    highlight: '#fef1f1',
+    contrast: '#ffffff',
+  },
+});
+
+const fonts$1 = {
+  font1: {
+    family: [
+      'Roboto',
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji',
+    ],
+    label: 'Roboto',
+    url: 'https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900',
+  },
+  font2: {
+    family: [
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Roboto',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji',
+    ],
+    label: 'Sans Serif',
+  },
+};
+
+const fontsRef$1 = getThemeRefs({ fonts: fonts$1 }).fonts;
+
+const typography$1 = {
+  h1: {
+    font: fontsRef$1.font1.family,
+    weight: '900',
+    size: '48px',
+  },
+  h2: {
+    font: fontsRef$1.font1.family,
+    weight: '800',
+    size: '38px',
+  },
+  h3: {
+    font: fontsRef$1.font1.family,
+    weight: '600',
+    size: '28px',
+  },
+  subtitle1: {
+    font: fontsRef$1.font2.family,
+    weight: '500',
+    size: '22px',
+  },
+  subtitle2: {
+    font: fontsRef$1.font2.family,
+    weight: '400',
+    size: '20px',
+  },
+  body1: {
+    font: fontsRef$1.font1.family,
+    weight: '400',
+    size: '16px',
+  },
+  body2: {
+    font: fontsRef$1.font1.family,
+    weight: '400',
+    size: '14px',
+  },
+};
+
+const spacing$1 = {
+  xs: '2px',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  xl: '32px',
+};
+
+const border$1 = {
+  xs: '1px',
+  sm: '2px',
+  md: '3px',
+  lg: '4px',
+  xl: '5px',
+};
+
+const radius$1 = {
+  xs: '5px',
+  sm: '10px',
+  md: '15px',
+  lg: '20px',
+  xl: '25px',
+  '2xl': '30px',
+  '3xl': '35px',
+};
+
+const shadow$2 = {
+  wide: {
+    sm: '0 2px 3px -0.5px',
+    md: '0 4px 6px -1px',
+    lg: '0 10px 15px -3px',
+    xl: '0 20px 25px -5px',
+    '2xl': '0 25px 50px -12px',
+  },
+  narrow: {
+    sm: '0 1px 2px -1px',
+    md: '0 2px 4px -2px',
+    lg: '0 4px 6px -4px',
+    xl: '0 8px 10px -6px',
+    '2xl': '0 16px 16px -8px',
+  },
+};
+
+const globals$1 = {
+  colors: colors$2,
+  typography: typography$1,
+  spacing: spacing$1,
+  border: border$1,
+  radius: radius$1,
+  shadow: shadow$2,
+  fonts: fonts$1,
+  direction: direction$1,
 };
+const vars$X = getThemeVars(globals$1);
 
-const direction$1 = 'ltr';
+const direction = 'ltr';
 
-const colors$2 = genColors({
+const colors$1 = genColors$1({
   surface: {
     main: '#ffffff',
     dark: '#636c74',
@@ -18318,7 +18520,7 @@ const colors$2 = genColors({
   },
 });
 
-const fonts$1 = {
+const fonts = {
   font1: {
     family: [
       'Roboto',
@@ -18360,47 +18562,47 @@ const fonts$1 = {
   },
 };
 
-const fontsRef$1 = getThemeRefs({ fonts: fonts$1 }).fonts;
+const fontsRef = getThemeRefs$1({ fonts }).fonts;
 
-const typography$1 = {
+const typography = {
   h1: {
-    font: fontsRef$1.font1.family,
+    font: fontsRef.font1.family,
     weight: '900',
     size: '48px',
   },
   h2: {
-    font: fontsRef$1.font1.family,
+    font: fontsRef.font1.family,
     weight: '800',
     size: '38px',
   },
   h3: {
-    font: fontsRef$1.font1.family,
+    font: fontsRef.font1.family,
     weight: '600',
     size: '28px',
   },
   subtitle1: {
-    font: fontsRef$1.font2.family,
+    font: fontsRef.font2.family,
     weight: '500',
     size: '22px',
   },
   subtitle2: {
-    font: fontsRef$1.font2.family,
+    font: fontsRef.font2.family,
     weight: '400',
     size: '20px',
   },
   body1: {
-    font: fontsRef$1.font1.family,
+    font: fontsRef.font1.family,
     weight: '400',
     size: '16px',
   },
   body2: {
-    font: fontsRef$1.font1.family,
+    font: fontsRef.font1.family,
     weight: '400',
     size: '14px',
   },
 };
 
-const spacing$1 = {
+const spacing = {
   xs: '2px',
   sm: '4px',
   md: '8px',
@@ -18408,7 +18610,7 @@ const spacing$1 = {
   xl: '32px',
 };
 
-const border$1 = {
+const border = {
   xs: '1px',
   sm: '2px',
   md: '3px',
@@ -18416,7 +18618,7 @@ const border$1 = {
   xl: '5px',
 };
 
-const radius$1 = {
+const radius = {
   xs: '5px',
   sm: '10px',
   md: '15px',
@@ -18426,7 +18628,7 @@ const radius$1 = {
   '3xl': '35px',
 };
 
-const shadow$2 = {
+const shadow$1 = {
   wide: {
     sm: '0 2px 3px -0.5px',
     md: '0 4px 6px -1px',
@@ -18443,19 +18645,19 @@ const shadow$2 = {
   },
 };
 
-const globals$1 = {
-  colors: colors$2,
-  typography: typography$1,
-  spacing: spacing$1,
-  border: border$1,
-  radius: radius$1,
-  shadow: shadow$2,
-  fonts: fonts$1,
-  direction: direction$1,
+const globals = {
+  colors: colors$1,
+  typography,
+  spacing,
+  border,
+  radius,
+  shadow: shadow$1,
+  fonts,
+  direction,
 };
-const vars$X = getThemeVars(globals$1);
+getThemeVars$1(globals);
 
-const globalRefs$B = getThemeRefs(globals$1);
+const globalRefs$B = getThemeRefs$1(globals);
 const compVars$6 = ButtonClass.cssVarList;
 
 const mode = {
@@ -18466,7 +18668,7 @@ const mode = {
   surface: globalRefs$B.colors.surface,
 };
 
-const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$1a);
+const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars$1({ mode }, componentName$13);
 
 const button = {
   ...helperTheme$4,
@@ -18495,7 +18697,7 @@ const button = {
   [compVars$6.verticalPadding]: '1em',
   [compVars$6.horizontalPadding]: '0.875em',
 
-  [compVars$6.outlineWidth]: globals$1.border.sm,
+  [compVars$6.outlineWidth]: globals.border.sm,
   [compVars$6.outlineOffset]: '0px', // keep `px` unit for external calc
   [compVars$6.outlineStyle]: 'solid',
   [compVars$6.outlineColor]: 'transparent',
@@ -19126,7 +19328,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$14
+  componentName$16
 );
 
 const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -19268,183 +19470,6 @@ var notpImage = /*#__PURE__*/Object.freeze({
   vars: vars$K
 });
 
-const direction = 'ltr';
-
-const colors$1 = genColors$1({
-  surface: {
-    main: '#ffffff',
-    dark: '#636c74',
-    light: '#cfd3d7',
-    highlight: '#f4f5f6',
-    contrast: '#181a1c',
-  },
-  primary: {
-    main: '#006af5',
-    dark: '#004094',
-    light: '#71aeff',
-    highlight: '#f0f6ff',
-    contrast: '#ffffff',
-  },
-  secondary: {
-    main: '#802ed6',
-    dark: '#6410bc',
-    light: '#be89f5',
-    highlight: '#ede7f6',
-    contrast: '#ffffff',
-  },
-  success: {
-    main: '#008000',
-    dark: '#005700',
-    light: '#8bc38b',
-    highlight: '#f5faf5',
-    contrast: '#ffffff',
-  },
-  error: {
-    main: '#e21d12',
-    dark: '#b3170f',
-    light: '#f4807a',
-    highlight: '#fef1f1',
-    contrast: '#ffffff',
-  },
-});
-
-const fonts = {
-  font1: {
-    family: [
-      'Roboto',
-      'ui-sans-serif',
-      'system-ui',
-      '-apple-system',
-      'BlinkMacSystemFont',
-      'Segoe UI',
-      'Helvetica Neue',
-      'Arial',
-      'Noto Sans',
-      'sans-serif',
-      'Apple Color Emoji',
-      'Segoe UI Emoji',
-      'Segoe UI Symbol',
-      'Noto Color Emoji',
-    ],
-    label: 'Roboto',
-    url: 'https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900',
-  },
-  font2: {
-    family: [
-      'ui-sans-serif',
-      'system-ui',
-      '-apple-system',
-      'BlinkMacSystemFont',
-      'Segoe UI',
-      'Roboto',
-      'Helvetica Neue',
-      'Arial',
-      'Noto Sans',
-      'sans-serif',
-      'Apple Color Emoji',
-      'Segoe UI Emoji',
-      'Segoe UI Symbol',
-      'Noto Color Emoji',
-    ],
-    label: 'Sans Serif',
-  },
-};
-
-const fontsRef = getThemeRefs$1({ fonts }).fonts;
-
-const typography = {
-  h1: {
-    font: fontsRef.font1.family,
-    weight: '900',
-    size: '48px',
-  },
-  h2: {
-    font: fontsRef.font1.family,
-    weight: '800',
-    size: '38px',
-  },
-  h3: {
-    font: fontsRef.font1.family,
-    weight: '600',
-    size: '28px',
-  },
-  subtitle1: {
-    font: fontsRef.font2.family,
-    weight: '500',
-    size: '22px',
-  },
-  subtitle2: {
-    font: fontsRef.font2.family,
-    weight: '400',
-    size: '20px',
-  },
-  body1: {
-    font: fontsRef.font1.family,
-    weight: '400',
-    size: '16px',
-  },
-  body2: {
-    font: fontsRef.font1.family,
-    weight: '400',
-    size: '14px',
-  },
-};
-
-const spacing = {
-  xs: '2px',
-  sm: '4px',
-  md: '8px',
-  lg: '16px',
-  xl: '32px',
-};
-
-const border = {
-  xs: '1px',
-  sm: '2px',
-  md: '3px',
-  lg: '4px',
-  xl: '5px',
-};
-
-const radius = {
-  xs: '5px',
-  sm: '10px',
-  md: '15px',
-  lg: '20px',
-  xl: '25px',
-  '2xl': '30px',
-  '3xl': '35px',
-};
-
-const shadow$1 = {
-  wide: {
-    sm: '0 2px 3px -0.5px',
-    md: '0 4px 6px -1px',
-    lg: '0 10px 15px -3px',
-    xl: '0 20px 25px -5px',
-    '2xl': '0 25px 50px -12px',
-  },
-  narrow: {
-    sm: '0 1px 2px -1px',
-    md: '0 2px 4px -2px',
-    lg: '0 4px 6px -4px',
-    xl: '0 8px 10px -6px',
-    '2xl': '0 16px 16px -8px',
-  },
-};
-
-const globals = {
-  colors: colors$1,
-  typography,
-  spacing,
-  border,
-  radius,
-  shadow: shadow$1,
-  fonts,
-  direction,
-};
-getThemeVars$1(globals);
-
 const globalRefs$v = getThemeRefs$1(globals);
 const vars$J = TextClass.cssVarList;
 
@@ -19768,7 +19793,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
       },
     },
   },
-  componentName$15
+  componentName$17
 );
 
 const loaderRadial = {
@@ -20791,6 +20816,7 @@ const globalRefs$a = getThemeRefs(globals$1);
 const vars$g = CodeSnippetClass.cssVarList;
 
 const light = {
+  color1: '#fa0',
   color2: '#d73a49',
   color3: '#6f42c1',
   color4: '#005cc5',
@@ -20800,10 +20826,13 @@ const light = {
   color8: '#24292e',
   color9: '#735c0f',
   color10: '#f0fff4',
+  color11: '#b31d28',
+  color12: '#ffeef0',
   color13: '#032f62',
 };
 
 const dark = {
+  color1: '#c9d1d9',
   color2: '#ff7b72',
   color3: '#d2a8ff',
   color4: '#79c0ff',
@@ -20813,6 +20842,8 @@ const dark = {
   color8: '#c9d1d9',
   color9: '#735c0f',
   color10: '#f0fff4',
+  color11: '#67060c',
+  color12: '#ffeef0',
   color13: '#a5d6ff',
 };