@descope/web-components-ui 1.0.179 → 1.0.181

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone
 export { NewPasswordClass } from './components/descope-new-password';
 export { RecaptchaClass } from './components/descope-recaptcha';
 export { UploadFileClass } from './components/descope-upload-file';
+export { ButtonSelectionGroupClass } from './components/descope-button-selection-group/ButtonSelectionGroupClass';
 
 export type Theme = {
   globals: {

package/dist/index.esm.js

@@ -286,6 +286,8 @@ const createStyleMixin =
 
       #styleAttributes;
 
+      #getRootElement;
+
       // we are using this mixin also for portalMixin
       // so we should be able to inject styles to other DOM elements
       // this is why we need to support these overrides
@@ -298,16 +300,12 @@ const createStyleMixin =
         super();
         this.#componentNameSuffix = componentNameSuffix;
         this.#themeSection = themeSection;
-        this.#rootElement = getRootElement?.(this) || this.shadowRoot;
         this.#baseSelector = baseSelector ?? this.baseSelector;
+        this.#getRootElement = getRootElement;
 
         this.#styleAttributes = Object.keys(mappings).map((key) =>
           kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
         );
-
-        this.#createMappingStyle();
-        this.#createComponentTheme();
-        this.#createOverridesStyle();
       }
 
       // eslint-disable-next-line class-methods-use-this
@@ -396,8 +394,14 @@ const createStyleMixin =
       init() {
         super.init?.();
         if (this.shadowRoot.isConnected) {
+          this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
+
           this.#addClassName(componentName);
 
+          this.#createMappingStyle();
+          this.#createComponentTheme();
+          this.#createOverridesStyle();
+
           // this is instead attributeChangedCallback because we cannot use static methods in this case
           observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
         }
@@ -896,124 +900,129 @@ const getNestedInput = (ele) => {
   return undefined;
 };
 
-const proxyInputMixin = (superclass) =>
-  class ProxyInputMixinClass extends inputValidationMixin(superclass) {
-    static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...errorAttrs];
-    }
+const proxyInputMixin =
+  ({ proxyProps = [] }) =>
+  (superclass) =>
+    class ProxyInputMixinClass extends inputValidationMixin(superclass) {
+      static get observedAttributes() {
+        return [...(superclass.observedAttributes || []), ...errorAttrs];
+      }
 
-    #inputElement;
+      #inputElement;
 
-    #dispatchChange = createDispatchEvent.bind(this, 'change');
+      #dispatchChange = createDispatchEvent.bind(this, 'change');
 
-    constructor() {
-      super();
+      constructor() {
+        super();
 
-      this.#inputElement = super.inputElement;
-    }
+        this.#inputElement = super.inputElement;
+      }
 
-    // the web-component does not loaded immediately, so we want to defer the warning
-    // and show it only if the input element was not found after the component is loaded
-    warnIfInputElementIsMissing() {
-      clearTimeout(this.inputElementTimerId);
+      // the web-component does not loaded immediately, so we want to defer the warning
+      // and show it only if the input element was not found after the component is loaded
+      warnIfInputElementIsMissing() {
+        clearTimeout(this.inputElementTimerId);
 
-      this.inputElementTimerId = setTimeout(() => {
-        // eslint-disable-next-line no-console
-        !this.#inputElement && console.warn(this.localName, 'no input was found');
-      }, 0);
-    }
+        this.inputElementTimerId = setTimeout(() => {
+          // eslint-disable-next-line no-console
+          !this.#inputElement && console.warn(this.localName, 'no input was found');
+        }, 0);
+      }
 
-    get inputElement() {
-      if (this.#inputElement) return this.#inputElement;
+      get inputElement() {
+        if (this.#inputElement) return this.#inputElement;
 
-      this.warnIfInputElementIsMissing();
+        this.warnIfInputElementIsMissing();
 
-      const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
-      const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
+        const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
+        const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
 
-      this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+        this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
 
-      return this.#inputElement;
-    }
+        return this.#inputElement;
+      }
 
-    set inputElement(ele) {
-      this.#inputElement = ele;
-    }
+      set inputElement(ele) {
+        this.#inputElement = ele;
+      }
 
-    getValidity() {
-      return this.inputElement?.validity || {};
-    }
+      getValidity() {
+        return this.inputElement?.validity || {};
+      }
 
-    handleInternalInputErrorMessage() {
-      if (!this.inputElement.checkValidity()) {
-        this.inputElement.setCustomValidity(this.validationMessage);
+      handleInternalInputErrorMessage() {
+        if (!this.inputElement.checkValidity()) {
+          this.inputElement.setCustomValidity(this.validationMessage);
+        }
       }
-    }
 
-    #handleErrorMessage() {
-      this.handleInternalInputErrorMessage();
-      this.setAttribute('error-message', this.validationMessage);
-    }
+      #handleErrorMessage() {
+        this.handleInternalInputErrorMessage();
+        this.setAttribute('error-message', this.validationMessage);
+      }
 
-    init() {
-      super.init?.();
+      init() {
+        super.init?.();
 
-      // on some cases the base element is not ready so the inputElement is empty
-      // we are deferring this section to make sure the base element is ready
-      setTimeout(() => {
-        this.inputElement?.addEventListener('input', (e) => {
-          if (!this.inputElement.checkValidity()) {
-            this.inputElement.setCustomValidity('');
-            // after updating the input validity we want to trigger set validity on the wrapping element
-            // so we will get the updated validity
-            this.setCustomValidity('');
-
-            // Vaadin is getting the input event before us,
-            // so in order to make sure they use the updated validity
-            // we calling their fn after updating the input validity
-            this.baseElement.__onInput(e);
+        // on some cases the base element is not ready so the inputElement is empty
+        // we are deferring this section to make sure the base element is ready
+        setTimeout(() => {
+          this.inputElement?.addEventListener('input', (e) => {
+            if (!this.inputElement.checkValidity()) {
+              this.inputElement.setCustomValidity('');
+              // after updating the input validity we want to trigger set validity on the wrapping element
+              // so we will get the updated validity
+              this.setCustomValidity('');
+
+              // Vaadin is getting the input event before us,
+              // so in order to make sure they use the updated validity
+              // we calling their fn after updating the input validity
+              this.baseElement.__onInput(e);
+
+              this.#handleErrorMessage();
+            }
+          });
 
-            this.#handleErrorMessage();
-          }
-        });
+          this.baseElement.addEventListener('change', () => {
+            this.#dispatchChange();
+          });
 
-        this.baseElement.addEventListener('change', () => {
-          this.#dispatchChange();
-        });
+          this.#inputElement.addEventListener('blur', () => {
+            if (!this.checkValidity()) {
+              this.setAttribute('invalid', 'true');
+              this.#handleErrorMessage();
+            }
+          });
 
-        this.#inputElement.addEventListener('blur', () => {
-          if (!this.checkValidity()) {
-            this.setAttribute('invalid', 'true');
+          this.addEventListener('invalid', () => {
+            if (!this.checkValidity()) {
+              this.setAttribute('invalid', 'true');
+            }
             this.#handleErrorMessage();
-          }
-        });
+          });
 
-        this.addEventListener('invalid', () => {
-          if (!this.checkValidity()) {
-            this.setAttribute('invalid', 'true');
-          }
-          this.#handleErrorMessage();
-        });
+          this.handleInternalInputErrorMessage();
 
-        this.handleInternalInputErrorMessage();
+          // sync properties
+          proxyProps.forEach((prop) => {
+            propertyObserver(this, this.inputElement, prop);
+          });
 
-        // sync properties
-        propertyObserver(this, this.inputElement, 'value');
-        propertyObserver(this, this.inputElement, 'selectionStart');
-        this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+          this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 
-        forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
-      });
-    }
-  };
+          forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+        });
+      }
+    };
 
-const composedProxyInputMixin = compose(
-  proxyInputMixin,
-  // in order to use input-wrapper across all our input components, we need to inject its theme
-  // to every proxy input mixin, to allow its css vars to be scoped properly and accessible
-  // in the proxy input component
-  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
-);
+const composedProxyInputMixin = (proxyInputMixinConfig) =>
+  compose(
+    proxyInputMixin(proxyInputMixinConfig),
+    // in order to use input-wrapper across all our input components, we need to inject its theme
+    // to every proxy input mixin, to allow its css vars to be scoped properly and accessible
+    // in the proxy input component
+    createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
+  );
 
 // this is needed because we might generate the same css vars names
 // e.g. "overlayColor" attribute in style mixin's mapping,
@@ -1659,7 +1668,7 @@ const CheckboxClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   booleanFieldMixin
 )(
@@ -1761,7 +1770,7 @@ const SwitchToggleClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   booleanFieldMixin
 )(
@@ -2176,7 +2185,7 @@ const EmailFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin$6
 )(
@@ -2346,7 +2355,7 @@ const NumberFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin
 )(
   createProxy({
@@ -2617,7 +2626,7 @@ const TextFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin$5
 )(
@@ -2734,7 +2743,7 @@ const PasscodeClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin$4
 )(
@@ -2922,7 +2931,7 @@ const PasswordClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   passwordDraggableMixin
 )(
@@ -3036,7 +3045,7 @@ const TextAreaClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin
 )(
   createProxy({
@@ -3158,6 +3167,16 @@ const ComboBoxMixin = (superclass) =>
       this.#overrideOverlaySettings();
       observeChildren(this, this.#onChildrenChange.bind(this));
     }
+
+    set value(val) {
+      this.baseElement.selectedItem = this.baseElement.items.find(
+        (item) => item['data-id'] === val
+      );
+    }
+
+    get value() {
+      return this.baseElement.selectedItem?.['data-id'] || '';
+    }
   };
 
 const {
@@ -3182,11 +3201,6 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-// const { slotted, selected } = {
-// 	slotted: { selector: () => '::slotted(*)' },
-// 	selected: { selector: () => '::slotted([selected])' }
-// }
-
 const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
@@ -3230,6 +3244,9 @@ const ComboBoxClass = compose(
       // at this time.
       overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
       overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
+      overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
+      overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
+      overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
     },
   }),
   draggableMixin,
@@ -3238,17 +3255,18 @@ const ComboBoxClass = compose(
     selector: '',
     mappings: {
       backgroundColor: { selector: 'vaadin-combo-box-scroller' },
-      cursor: { selector: 'vaadin-combo-box-item' }, // TODO: this mapping doesn't work, needs fixing.
       minHeight: { selector: 'vaadin-combo-box-overlay' },
       margin: { selector: 'vaadin-combo-box-overlay' },
+      cursor: { selector: 'vaadin-combo-box-item' },
       fontFamily: { selector: 'vaadin-combo-box-item' },
+      fontSize: { selector: 'vaadin-combo-box-item' },
     },
     forward: {
       include: false,
       attributes: ['size'],
     },
   }),
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['selectionStart'] }),
   componentNameValidationMixin,
   ComboBoxMixin
 )(
@@ -4517,9 +4535,9 @@ const getCountryFlag = (code) =>
 const comboBoxItem = ({ code, dialCode, name: country }) => `
 	<div
 		style="display:flex; flex-direction: column;"
-		data-id="${code}"
+		data-id="${dialCode}"
 		data-name="${code} ${dialCode} ${country}"
-		data-dial-code="${dialCode}"
+		data-country-code="${code}"
 	>
 		<div>
 			<span>
@@ -4564,9 +4582,9 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
         >
         ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
         </descope-combo-box>
-      <div class="separator"></div>
+        <div class="separator"></div>
         <descope-text-field type="tel"></descope-text-field>
-     </div>
+    </div>
     `;
 
     this.countryCodeInput = this.querySelector('descope-combo-box');
@@ -4638,12 +4656,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
 
   getCountryByDialCode(countryDialCode) {
     return this.countryCodeInput.items?.find(
-      (c) => c.getAttribute('data-dial-code') === countryDialCode
+      (c) => c.getAttribute('data-country-code') === countryDialCode
     );
   }
 
   getCountryByCodeId(countryCode) {
-    return this.countryCodeInput.items?.find((c) => c['data-id'] === countryCode)?.['data-name'];
+    return this.countryCodeInput.items?.find(
+      (c) => c.getAttribute('data-country-code') === countryCode
+    );
   }
 
   updateCountryCodeItems(restrictCountries) {
@@ -4881,7 +4901,7 @@ const PhoneFieldClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$3
 )(
   createProxy({
@@ -5082,7 +5102,7 @@ class PhoneFieldInternal extends BaseInputClass$2 {
 
   getCountryByDialCode(countryDialCode) {
     return this.countryCodeInput.items?.find(
-      (c) => c.getAttribute('data-dial-code') === countryDialCode
+      (c) => c.getAttribute('data-country-code') === countryDialCode
     );
   }
 
@@ -5212,7 +5232,7 @@ const PhoneFieldInputBoxClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$2
 )(
   createProxy({
@@ -5355,7 +5375,7 @@ const NewPasswordClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$1
 )(
   createProxy({
@@ -5980,9 +6000,9 @@ const UploadFileClass = compose(
 
 customElements.define(componentName$4, UploadFileClass);
 
-const componentName$3 = getComponentName('single-select-internal');
+const componentName$3 = getComponentName('button-selection-group-internal');
 
-class SingleSelectInternalClass extends createBaseInputClass({
+class ButtonSelectionGroupInternalClass extends createBaseInputClass({
   componentName: componentName$3,
   baseSelector: 'slot',
 }) {
@@ -6108,17 +6128,17 @@ class SingleSelectInternalClass extends createBaseInputClass({
   }
 }
 
-const componentName$2 = getComponentName('single-select');
+const componentName$2 = getComponentName('button-selection-group');
 
 const customMixin = (superclass) =>
-  class SingleSelectMixinClass extends superclass {
+  class ButtonSelectionGroupMixinClass extends superclass {
     init() {
       super.init?.();
       const template = document.createElement('template');
 
       template.innerHTML = `
 			<${componentName$3}
-				name="single-select"
+				name="button-selection-group"
 				slot="input"
         tabindex="-1"
 			>
@@ -6138,11 +6158,11 @@ const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-  internalWrapper: { selector: 'descope-single-select-internal slot' },
+  internalWrapper: { selector: 'descope-button-selection-group-internal slot' },
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const SingleSelectClass = compose(
+const ButtonSelectionGroupClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host, property: 'width' },
@@ -6157,7 +6177,7 @@ const SingleSelectClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin
 )(
@@ -6177,7 +6197,7 @@ const SingleSelectClass = compose(
 				background-color: transparent;
 			}
 
-			descope-single-select-internal {
+			descope-button-selection-group-internal {
 				-webkit-mask-image: none;
 				padding: 0;
 				width: 100%;
@@ -6222,11 +6242,11 @@ const SingleSelectClass = compose(
   })
 );
 
-customElements.define(componentName$3, SingleSelectInternalClass);
+customElements.define(componentName$3, ButtonSelectionGroupInternalClass);
 
-customElements.define(componentName$2, SingleSelectClass);
+customElements.define(componentName$2, ButtonSelectionGroupClass);
 
-const componentName$1 = getComponentName('select-item');
+const componentName$1 = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
   componentName: componentName$1,
@@ -6294,7 +6314,7 @@ class RawSelectItem extends createBaseClass({
   }
 }
 
-const SelectItemClass = compose(
+const ButtonSelectionGroupItemClass = compose(
   createStyleMixin({
     mappings: {
       backgroundColor: {
@@ -6323,7 +6343,7 @@ const SelectItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$1, SelectItemClass);
+customElements.define(componentName$1, ButtonSelectionGroupItemClass);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -6973,7 +6993,7 @@ const vars$k = TextAreaClass.cssVarList;
 const textArea = {
   [vars$k.hostWidth]: refs.width,
   [vars$k.hostMinWidth]: refs.minWidth,
-  [vars$k.fontSize]: globalRefs$a.typography.body2.size,
+  [vars$k.fontSize]: refs.fontSize,
   [vars$k.fontFamily]: refs.fontFamily,
   [vars$k.labelTextColor]: refs.labelTextColor,
   [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
@@ -7594,12 +7614,14 @@ const comboBox = {
     [vars$8.inputDropdownButtonCursor]: 'default',
   },
 
-  [vars$8.overlay.minHeight]: '400px',
-  [vars$8.overlay.margin]: '0 auto',
+  // Overlay theme exposed via the component:
+  [vars$8.overlayFontSize]: refs.fontSize,
+  [vars$8.overlayFontFamily]: refs.fontFamily,
+  [vars$8.overlayCursor]: 'pointer',
 
-  // [vars.overlayCursor]: 'pointer',
-  // [vars.overlayBackground]: globalRefs.colors.surface.light,
-  // [vars.overlayBorder]: `2px solid red`,
+  // Overlay direct theme:
+  [vars$8.overlay.minHeight]: '400px',
+  [vars$8.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
@@ -7776,9 +7798,9 @@ var uploadFile$1 = /*#__PURE__*/Object.freeze({
 
 const globalRefs$1 = getThemeRefs(globals);
 
-const vars$2 = SelectItemClass.cssVarList;
+const vars$2 = ButtonSelectionGroupItemClass.cssVarList;
 
-const selectItem = {
+const buttonSelectionGroupItem = {
   [vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
   [vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
   [vars$2.borderColor]: globalRefs$1.colors.surface.main,
@@ -7796,16 +7818,16 @@ const selectItem = {
   },
 };
 
-var selectItem$1 = /*#__PURE__*/Object.freeze({
+var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: selectItem,
+  default: buttonSelectionGroupItem,
   vars: vars$2
 });
 
 const globalRefs = getThemeRefs(globals);
-const vars$1 = SingleSelectClass.cssVarList;
+const vars$1 = ButtonSelectionGroupClass.cssVarList;
 
-const singleSelect = {
+const buttonSelectionGroup = {
   [vars$1.fontFamily]: refs.fontFamily,
   [vars$1.labelTextColor]: refs.labelTextColor,
   [vars$1.labelRequiredIndicator]: refs.requiredIndicator,
@@ -7814,9 +7836,9 @@ const singleSelect = {
   [vars$1.hostWidth]: refs.width,
 };
 
-var singleSelect$1 = /*#__PURE__*/Object.freeze({
+var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: singleSelect,
+  default: buttonSelectionGroup,
   vars: vars$1
 });
 
@@ -7845,8 +7867,8 @@ const components = {
   newPassword: newPassword$1,
   inputWrapper,
   uploadFile: uploadFile$1,
-  selectItem: selectItem$1,
-  singleSelect: singleSelect$1,
+  buttonSelectionGroupItem: buttonSelectionGroupItem$1,
+  buttonSelectionGroup: buttonSelectionGroup$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -7861,5 +7883,5 @@ const vars = Object.keys(components).reduce(
 const defaultTheme = { globals, components: theme };
 const themeVars = { globals: vars$r, components: vars };
 
-export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SelectItemClass, SingleSelectClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map