@descope/flow-components 2.0.412 → 2.0.413

package/dist/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var React = require('react');
 var webComponentsUi = require('@descope/web-components-ui');
+var React = require('react');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -9,11 +9,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const Checkbox = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-checkbox", { ...props, ref: ref }));
 
-const Switch = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-switch-toggle", { ...props, ref: ref }));
-Switch.defaultProps = {
-    // eslint-disable-next-line react/default-props-match-prop-types
-    size: 'md'
-};
+const Switch = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-switch-toggle", { size: size, ...props, ref: ref })));
 
 const Boolean = React__default.default.forwardRef(({ type, ...props }, ref) => {
     switch (type) {
@@ -95,17 +91,12 @@ const Icon = ({ icon, noColor, ...props }) => {
     return React__default.default.createElement("descope-icon", { "fill-color": noColor, src: icon });
 };
 
-const Button = React__default.default.forwardRef(({ children, startIcon, startIconColorText, color, ...props }, ref) => {
+const Button = React__default.default.forwardRef(({ children, startIcon, startIconColorText, color = 'primary', size = 'md', variant = 'contained', ...props }, ref) => {
     const isSquare = React.useMemo(() => !!(startIcon && !children), [startIcon, children]);
-    return (React__default.default.createElement("descope-button", { ...props, mode: color, ref: ref, square: isSquare },
+    return (React__default.default.createElement("descope-button", { ...props, size: size, variant: variant, mode: color, ref: ref, square: isSquare },
         startIcon && React__default.default.createElement(Icon, { icon: startIcon, noColor: startIconColorText }),
         children));
 });
-Button.defaultProps = {
-    size: 'md',
-    variant: 'contained',
-    color: 'primary'
-};
 
 const Code = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-passcode", { ref: ref, ...props }));
 
@@ -124,9 +115,10 @@ const alignItems = {
     baseline: 'baseline',
     stretch: 'stretch'
 };
-const Container = React__default.default.forwardRef(({ background, justify, paddingX = '0', paddingY = '0', shadow, width, align, spaceBetween, backgroundImageUrl, ...props }, ref) => {
+const Container = React__default.default.forwardRef(({ background, justify, paddingX = '0', paddingY = '0', shadow, width, align, spaceBetween, backgroundImageUrl, direction = 'row', ...props }, ref) => {
     const mergedProps = {
         ...props,
+        direction,
         shadow,
         'st-horizontal-padding': `${Number.parseInt(paddingX, 10) / 4}rem`,
         'st-vertical-padding': `${Number.parseInt(paddingY, 10) / 4}rem`,
@@ -142,56 +134,35 @@ const Container = React__default.default.forwardRef(({ background, justify, padd
     // eslint-disable-next-line react/jsx-props-no-spreading
     return React__default.default.createElement("descope-container", { ...mergedProps, ref: ref });
 });
-Container.defaultProps = {
-    direction: 'row'
-};
 
 const Divider = React__default.default.forwardRef(({ children, ...restProps }, ref) => (React__default.default.createElement("descope-divider", { ...restProps, ref: ref }, children)));
 
 const Image = React__default.default.forwardRef(({ width, height, ...restProps }, ref) => (React__default.default.createElement("descope-image", { ...restProps, ref: ref, "st-width": width, "st-height": height })));
 
-const NumberField = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-number-field", { ...props, ref: ref }));
-NumberField.defaultProps = {
-    size: 'md'
-};
+const NumberField = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-number-field", { size: size, ...props, ref: ref })));
 
-const EmailField = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-email-field", { ...props, ref: ref }));
-EmailField.defaultProps = {
-    size: 'md'
-};
+const EmailField = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-email-field", { size: size, ...props, ref: ref })));
 
-const TextField = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-text-field", { ...props, ref: ref }));
-TextField.defaultProps = {
-    size: 'md'
-};
+const TextField = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-text-field", { size: size, ...props, ref: ref })));
 
-const Password = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-password", { ...props, ref: ref }));
-Password.defaultProps = {
-    size: 'md'
-};
+const Password = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-password", { size: size, ...props, ref: ref })));
 
-const DateField = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-date-field", { ...props, ref: ref }));
-DateField.defaultProps = {
-    size: 'md'
-};
+const DateField = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-date-field", { size: size, ...props, ref: ref })));
 
-const Input = React__default.default.forwardRef(({ type, ...rest }, ref) => {
+const Input = React__default.default.forwardRef(({ type, size = 'md', ...rest }, ref) => {
     switch (type) {
         case 'email':
-            return React__default.default.createElement(EmailField, { ...rest, ref: ref });
+            return React__default.default.createElement(EmailField, { size: size, ...rest, ref: ref });
         case 'password':
-            return React__default.default.createElement(Password, { ...rest, ref: ref });
+            return React__default.default.createElement(Password, { size: size, ...rest, ref: ref });
         case 'number':
-            return React__default.default.createElement(NumberField, { ...rest, ref: ref });
+            return React__default.default.createElement(NumberField, { size: size, ...rest, ref: ref });
         case 'date':
-            return React__default.default.createElement(DateField, { ...rest, ref: ref });
+            return React__default.default.createElement(DateField, { size: size, ...rest, ref: ref });
         default:
-            return React__default.default.createElement(TextField, { ...rest, ref: ref });
+            return React__default.default.createElement(TextField, { size: size, ...rest, ref: ref });
     }
 });
-Input.defaultProps = {
-    size: 'md'
-};
 
 const Link = React__default.default.forwardRef(({ children, ...restProps }, ref) => (React__default.default.createElement("descope-link", { ...restProps, ref: ref }, children)));
 
@@ -209,37 +180,21 @@ const Loader = React__default.default.forwardRef(({ variant, color, ...restProps
 
 const Logo = React__default.default.forwardRef(({ width, height, ...props }, ref) => (React__default.default.createElement("descope-logo", { "st-width": width, "st-height": height, ref: ref, ...props })));
 
-const NewPassword = React__default.default.forwardRef((props, ref) => {
+const NewPassword = React__default.default.forwardRef(({ 'has-validation': hasValidation = false, 'policy-label': policyLabel = 'Passwords must have:', 
+// in the future, 'active-policies' can be injected in runtime
+'active-policies': activePolicies = [], 'data-password-policy-pattern-minlength': patternMinLength = '^.{{{value}},}$', 'data-password-policy-pattern-lowercase': patternLowercase = '[a-z]', 'data-password-policy-pattern-uppercase': patternUppercase = '[A-Z]', 'data-password-policy-pattern-number': patternNumber = '\\d', 'data-password-policy-pattern-nonalphanumeric': patternNonAlphanumeric = '[^a-zA-Z0-9]', 
+// props to override with data from policy
+'data-password-policy-value-minlength': valueMinLength = '8', 
+// translatable props
+'data-password-policy-message-minlength': errorMessageMinLength = 'At least {{value}} characters', 'data-password-policy-message-lowercase': errorMessageLowercase = '1 lowercase letter', 'data-password-policy-message-uppercase': errorMessageUppercase = '1 uppercase letter', 'data-password-policy-message-number': errorMessageNumber = '1 number', 'data-password-policy-message-nonalphanumeric': errorMessageNonAlphanumeric = '1 symbol', 'st-policy-preview-background-color': stPreviewBgColor = 'transparent', 'st-policy-preview-padding': stPreviewPadding = '0', ...props }, ref) => {
     const availablePolicies = props?.['active-policies'].map((id) => ({
         id,
         message: props[`data-password-policy-message-${id}`],
         pattern: props[`data-password-policy-pattern-${id}`],
         data: props[`data-password-policy-data-${id}`]
     }));
-    return (React__default.default.createElement("descope-new-password", { ...props, ref: ref, "available-policies": JSON.stringify(availablePolicies || []) }));
+    return (React__default.default.createElement("descope-new-password", { "has-validation": hasValidation, "policy-label": policyLabel, "active-policies": activePolicies, "data-password-policy-pattern-minlength": patternMinLength, "data-password-policy-pattern-lowercase": patternLowercase, "data-password-policy-pattern-uppercase": patternUppercase, "data-password-policy-pattern-number": patternNumber, "data-password-policy-pattern-nonalphanumeric": patternNonAlphanumeric, "data-password-policy-value-minlength": valueMinLength, "data-password-policy-message-minlength": errorMessageMinLength, "data-password-policy-message-lowercase": errorMessageLowercase, "data-password-policy-message-uppercase": errorMessageUppercase, "data-password-policy-message-number": errorMessageNumber, "data-password-policy-message-nonalphanumeric": errorMessageNonAlphanumeric, "st-policy-preview-background-color": stPreviewBgColor, "st-policy-preview-padding": stPreviewPadding, ...props, ref: ref, "available-policies": JSON.stringify(availablePolicies || []) }));
 });
-NewPassword.defaultProps = {
-    'has-validation': false,
-    'policy-label': 'Passwords must have:',
-    // in the future, 'active-policies' can be injected in runtime
-    'active-policies': [],
-    // non-user-editable patterns
-    'data-password-policy-pattern-minlength': '^.{{{value}},}$',
-    'data-password-policy-pattern-lowercase': '[a-z]',
-    'data-password-policy-pattern-uppercase': '[A-Z]',
-    'data-password-policy-pattern-number': '\\d',
-    'data-password-policy-pattern-nonalphanumeric': '[^a-zA-Z0-9]',
-    // props to override with data from policy
-    'data-password-policy-value-minlength': '8',
-    // translatable props
-    'data-password-policy-message-minlength': 'At least {{value}} characters',
-    'data-password-policy-message-lowercase': '1 lowercase letter',
-    'data-password-policy-message-uppercase': '1 uppercase letter',
-    'data-password-policy-message-number': '1 number',
-    'data-password-policy-message-nonalphanumeric': '1 symbol',
-    'st-policy-preview-background-color': 'transparent',
-    'st-policy-preview-padding': '0'
-};
 
 const PhoneCountrySelection = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-phone-field", { ...props, ref: ref }));
 
@@ -252,13 +207,9 @@ const Phone = React__default.default.forwardRef(({ variant, ...props }, ref) =>
     return React__default.default.createElement(PhoneCountrySelection, { ...props, ref: ref });
 });
 
-const Select = React__default.default.forwardRef(({ children, data, ...restProps }, ref) => (React__default.default.createElement("descope-combo-box", { ...restProps, ref: ref, data: 
+const Select = React__default.default.forwardRef(({ children, data, size = 'md', ...restProps }, ref) => (React__default.default.createElement("descope-combo-box", { size: size, ...restProps, ref: ref, data: 
     // eslint-disable-next-line no-nested-ternary
     data ? (typeof data !== 'string' ? JSON.stringify(data) : data) : '' }, children)));
-Select.defaultProps = {
-    // eslint-disable-next-line react/default-props-match-prop-types
-    size: 'md'
-};
 
 const Text = React__default.default.forwardRef(({ isEnriched, ...props }, ref) => {
     if (isEnriched) {
@@ -267,10 +218,7 @@ const Text = React__default.default.forwardRef(({ isEnriched, ...props }, ref) =
     return (React__default.default.createElement("descope-text", { ...props, ref: ref }, props.children));
 });
 
-const Textarea = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-text-area", { ...props, ref: ref }));
-Textarea.defaultProps = {
-    size: 'md'
-};
+const Textarea = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-text-area", { size: size, ...props, ref: ref })));
 
 const TOTPImage = React__default.default.forwardRef(({ width, height, ...props }, ref) => (React__default.default.createElement("descope-totp-image", { "st-width": width, "st-height": height, ref: ref, ...props })));
 
@@ -301,27 +249,11 @@ const Recaptcha = React__default.default.forwardRef(({ variant, textLabel = defa
 const defaultText = 'This site is protected by reCAPTCHA and the Google [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply.';
 const RecaptchaV2 = React__default.default.forwardRef(({ textLabel = defaultText, textVariant = 'body1', textMode = 'primary', textAlign = 'left', 'full-width': fullWidth, readOnly, connector, enterprise, action, ...props }, ref) => (React__default.default.createElement("descope-enriched-text", { ref: ref, "full-width": fullWidth, readonly: readOnly, variant: textVariant, mode: textMode, "text-align": textAlign, ...props }, textLabel)));
 
-const ButtonSelectionGroup = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-button-selection-group", { ...props, ref: ref }));
-ButtonSelectionGroup.defaultProps = {
-    // eslint-disable-next-line react/default-props-match-prop-types
-    size: 'md'
-};
+const ButtonSelectionGroup = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-button-selection-group", { size: size, ...props, ref: ref })));
 
-const ComboBox = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-combo-box", { ...props, ref: ref }));
-ComboBox.defaultProps = {
-    // eslint-disable-next-line react/default-props-match-prop-types
-    size: 'md',
-    // eslint-disable-next-line react/default-props-match-prop-types
-    bordered: true
-};
+const ComboBox = React__default.default.forwardRef(({ size = 'md', bordered = true, ...props }, ref) => (React__default.default.createElement("descope-combo-box", { size: size, bordered: bordered, ...props, ref: ref })));
 
-const RadioGroup = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-radio-group", { ...props, ref: ref }));
-RadioGroup.defaultProps = {
-    // eslint-disable-next-line react/default-props-match-prop-types
-    size: 'md',
-    // eslint-disable-next-line react/default-props-match-prop-types
-    layout: 'horizontal'
-};
+const RadioGroup = React__default.default.forwardRef(({ size = 'md', layout = 'horizontal', ...props }, ref) => (React__default.default.createElement("descope-radio-group", { size: size, layout: layout, ...props, ref: ref })));
 
 const SingleSelect = React__default.default.forwardRef(({ variant, data, allowClearValue, ...props }, ref) => {
     if (variant === 'buttonSelectionGroup') {
@@ -347,7 +279,7 @@ const Badge = React__default.default.forwardRef((props, ref) => React__default.d
 
 const Modal = React__default.default.forwardRef((props, ref) => (React__default.default.createElement("descope-modal", { ...props, ref: ref })));
 
-const ButtonMultiSelectionGroup = React__default.default.forwardRef(({ 'default-values': defaultValues, ...props }, ref) => {
+const ButtonMultiSelectionGroup = React__default.default.forwardRef(({ 'default-values': defaultValues, size = 'md', ...props }, ref) => {
     const serializedDefaultValues = React.useMemo(() => {
         if (!defaultValues)
             return undefined;
@@ -360,14 +292,10 @@ const ButtonMultiSelectionGroup = React__default.default.forwardRef(({ 'default-
             return '';
         }
     }, [defaultValues]);
-    return (React__default.default.createElement("descope-button-multi-selection-group", { ...props, "default-values": serializedDefaultValues ?? undefined, ref: ref }));
+    return (React__default.default.createElement("descope-button-multi-selection-group", { size: size, ...props, "default-values": serializedDefaultValues ?? undefined, ref: ref }));
 });
-ButtonMultiSelectionGroup.defaultProps = {
-    // eslint-disable-next-line react/default-props-match-prop-types
-    size: 'md'
-};
 
-const MultiSelectComboBox = React__default.default.forwardRef(({ 'default-values': defaultValues, ...props }, ref) => {
+const MultiSelectComboBox = React__default.default.forwardRef(({ 'default-values': defaultValues, size = 'md', bordered = true, ...props }, ref) => {
     const serializedDefaultValues = React.useMemo(() => {
         if (!defaultValues)
             return undefined;
@@ -380,14 +308,8 @@ const MultiSelectComboBox = React__default.default.forwardRef(({ 'default-values
             return '';
         }
     }, [defaultValues]);
-    return (React__default.default.createElement("descope-multi-select-combo-box", { ...props, "clear-button-visible": "true", "item-label-path": "data-name", "item-value-path": "data-id", "default-values": serializedDefaultValues ?? undefined, ref: ref }));
+    return (React__default.default.createElement("descope-multi-select-combo-box", { size: size, bordered: bordered, ...props, "clear-button-visible": "true", "item-label-path": "data-name", "item-value-path": "data-id", "default-values": serializedDefaultValues ?? undefined, ref: ref }));
 });
-MultiSelectComboBox.defaultProps = {
-    // eslint-disable-next-line react/default-props-match-prop-types
-    size: 'md',
-    // eslint-disable-next-line react/default-props-match-prop-types
-    bordered: true
-};
 
 const MultiSelect = React__default.default.forwardRef(({ variant, data, ...props }, ref) => {
     if (variant === 'dynamicCombobox') {
@@ -399,7 +321,7 @@ const MultiSelect = React__default.default.forwardRef(({ variant, data, ...props
     return (React__default.default.createElement(MultiSelectComboBox, { ...props, "allow-custom-value": "false", ref: ref }, data?.map(({ label, value }) => (React__default.default.createElement("span", { "data-name": label, "data-id": value, key: value }, label)))));
 });
 
-const MappingsField = React__default.default.forwardRef(({ 'default-values': defaultValues, options, ...props }, ref) => {
+const MappingsField = React__default.default.forwardRef(({ 'default-values': defaultValues, options, size = 'md', ...props }, ref) => {
     const serializedDefaultValues = React.useMemo(() => {
         if (!defaultValues)
             return undefined;
@@ -424,14 +346,10 @@ const MappingsField = React__default.default.forwardRef(({ 'default-values': def
             return '';
         }
     }, [options]);
-    return (React__default.default.createElement("descope-mappings-field", { ...props, "default-values": serializedDefaultValues ?? undefined, options: serializedOptions ?? undefined, ref: ref }));
+    return (React__default.default.createElement("descope-mappings-field", { size: size, ...props, "default-values": serializedDefaultValues ?? undefined, options: serializedOptions ?? undefined, ref: ref }));
 });
-MappingsField.defaultProps = {
-    // eslint-disable-next-line react/default-props-match-prop-types
-    size: 'md'
-};
 
-const SAMLGroupMappings = React__default.default.forwardRef(({ options, ...props }, ref) => {
+const SAMLGroupMappings = React__default.default.forwardRef(({ options, size = 'md', ...props }, ref) => {
     const serializedOptions = React.useMemo(() => {
         if (!options)
             return undefined;
@@ -444,28 +362,16 @@ const SAMLGroupMappings = React__default.default.forwardRef(({ options, ...props
             return '';
         }
     }, [options]);
-    return (React__default.default.createElement("descope-saml-group-mappings", { ...props, options: serializedOptions ?? undefined, ref: ref }));
+    return (React__default.default.createElement("descope-saml-group-mappings", { size: size, ...props, options: serializedOptions ?? undefined, ref: ref }));
 });
-SAMLGroupMappings.defaultProps = {
-    // eslint-disable-next-line react/default-props-match-prop-types
-    size: 'md'
-};
 
 const UserAuthMethod = React__default.default.forwardRef(({ methodIcon, buttonIcon, ...props }, ref) => (React__default.default.createElement("descope-user-auth-method", { ...props, ref: ref },
     React__default.default.createElement(Icon, { icon: methodIcon, slot: "method-icon", noColor: true }),
     React__default.default.createElement(Icon, { icon: buttonIcon, slot: "button-icon", noColor: true, width: "1em", height: "1em" }))));
-UserAuthMethod.defaultProps = {};
 
-const UserAttribute = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-user-attribute", { ...props, ref: ref }));
-UserAttribute.defaultProps = {
-    required: false
-};
+const UserAttribute = React__default.default.forwardRef(({ required = false, ...props }, ref) => (React__default.default.createElement("descope-user-attribute", { required: required, ...props, ref: ref })));
 
-const Avatar = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-avatar", { ...props, ref: ref }));
-Avatar.defaultProps = {
-    size: 'md',
-    editable: false
-};
+const Avatar = React__default.default.forwardRef(({ size = 'md', editable = false, ...props }, ref) => (React__default.default.createElement("descope-avatar", { size: size, editable: editable, ...props, ref: ref })));
 
 const CodeSnippet = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-code-snippet", { ...props, ref: ref }));
 
@@ -486,74 +392,193 @@ const SecurityQuestionsVerify = React__default.default.forwardRef(({ questions,
 
 const ThirdPartyAppLogo = React__default.default.forwardRef(({ ...props }, ref) => React__default.default.createElement("descope-third-party-app-logo", { ...props, ref: ref }));
 
-const HybridField = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-hybrid-field", { ...props, ref: ref }));
-HybridField.defaultProps = {
-    size: 'md'
-};
+const HybridField = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-hybrid-field", { size: size, ...props, ref: ref })));
 
 const Alert = React__default.default.forwardRef(({ children, ...props }, ref) => (React__default.default.createElement("descope-alert", { ...props, ref: ref }, children)));
 
+const globalsThemeToStyle = webComponentsUi.globalsThemeToStyle;
+const createComponentsTheme = webComponentsUi.createComponentsTheme;
+const themeToStyle = webComponentsUi.themeToStyle;
+const componentsThemeManager = webComponentsUi.componentsThemeManager;
+const genColor = webComponentsUi.genColor;
+const themeVars = webComponentsUi.themeVars;
+const defaultTheme = webComponentsUi.defaultTheme;
+const darkTheme = webComponentsUi.darkTheme;
+// component classes
+const CheckboxClass = webComponentsUi.CheckboxClass;
+const SwitchToggleClass = webComponentsUi.SwitchToggleClass;
+const ButtonClass = webComponentsUi.ButtonClass;
+const LoaderLinearClass = webComponentsUi.LoaderLinearClass;
+const LoaderRadialClass = webComponentsUi.LoaderRadialClass;
+const ContainerClass = webComponentsUi.ContainerClass;
+const DividerClass = webComponentsUi.DividerClass;
+const EmailFieldClass = webComponentsUi.EmailFieldClass;
+const LinkClass = webComponentsUi.LinkClass;
+const LogoClass = webComponentsUi.LogoClass;
+const TotpImageClass = webComponentsUi.TotpImageClass;
+const NotpImageClass = webComponentsUi.NotpImageClass;
+const NumberFieldClass = webComponentsUi.NumberFieldClass;
+const PasscodeClass = webComponentsUi.PasscodeClass;
+const PasswordClass = webComponentsUi.PasswordClass;
+const TextClass = webComponentsUi.TextClass;
+const EnrichedTextClass = webComponentsUi.EnrichedTextClass;
+const TextAreaClass = webComponentsUi.TextAreaClass;
+const TextFieldClass = webComponentsUi.TextFieldClass;
+const ImageClass = webComponentsUi.ImageClass;
+const PhoneFieldClass = webComponentsUi.PhoneFieldClass;
+const PhoneFieldInputBoxClass = webComponentsUi.PhoneFieldInputBoxClass;
+const NewPasswordClass = webComponentsUi.NewPasswordClass;
+const RecaptchaClass = webComponentsUi.RecaptchaClass;
+const UploadFileClass = webComponentsUi.UploadFileClass;
+const ButtonSelectionGroupClass = webComponentsUi.ButtonSelectionGroupClass;
+const ButtonMultiSelectionGroupClass = webComponentsUi.ButtonMultiSelectionGroupClass;
+const ButtonSelectionGroupItemClass = webComponentsUi.ButtonSelectionGroupItemClass;
+const ModalClass = webComponentsUi.ModalClass;
+const NotificationClass = webComponentsUi.NotificationClass;
+const GridClass = webComponentsUi.GridClass;
+const BadgeClass = webComponentsUi.BadgeClass;
+const MultiSelectComboBoxClass = webComponentsUi.MultiSelectComboBoxClass;
+const AvatarClass = webComponentsUi.AvatarClass;
+const UserAttributeClass = webComponentsUi.UserAttributeClass;
+const UserAuthMethodClass = webComponentsUi.UserAuthMethodClass;
+const MappingsFieldClass = webComponentsUi.MappingsFieldClass;
+const SamlGroupMappingsClass = webComponentsUi.SamlGroupMappingsClass;
+const PolicyValidationClass = webComponentsUi.PolicyValidationClass;
+const CodeSnippetClass = webComponentsUi.CodeSnippetClass;
+const RadioGroupClass = webComponentsUi.RadioGroupClass;
+const RadioButtonClass = webComponentsUi.RadioButtonClass;
+const DateFieldClass = webComponentsUi.DateFieldClass;
+const CalendarClass = webComponentsUi.CalendarClass;
+const ListClass = webComponentsUi.ListClass;
+const ListItemClass = webComponentsUi.ListItemClass;
+const AppsListClass = webComponentsUi.AppsListClass;
+const ScopesListClass = webComponentsUi.ScopesListClass;
+const ThirdPartyAppLogoClass = webComponentsUi.ThirdPartyAppLogoClass;
+const SecurityQuestionsSetupClass = webComponentsUi.SecurityQuestionsSetupClass;
+const SecurityQuestionsVerifyClass = webComponentsUi.SecurityQuestionsVerifyClass;
+const HybridFieldClass = webComponentsUi.HybridFieldClass;
+const AlertClass = webComponentsUi.AlertClass;
+
 exports.Alert = Alert;
+exports.AlertClass = AlertClass;
 exports.AppsList = AppsList;
+exports.AppsListClass = AppsListClass;
 exports.Avatar = Avatar;
+exports.AvatarClass = AvatarClass;
 exports.Badge = Badge;
+exports.BadgeClass = BadgeClass;
 exports.Boolean = Boolean;
 exports.Button = Button;
+exports.ButtonClass = ButtonClass;
+exports.ButtonMultiSelectionGroupClass = ButtonMultiSelectionGroupClass;
+exports.ButtonSelectionGroupClass = ButtonSelectionGroupClass;
+exports.ButtonSelectionGroupItemClass = ButtonSelectionGroupItemClass;
+exports.CalendarClass = CalendarClass;
 exports.Checkbox = Checkbox;
+exports.CheckboxClass = CheckboxClass;
 exports.Code = Code;
 exports.CodeSnippet = CodeSnippet;
+exports.CodeSnippetClass = CodeSnippetClass;
 exports.ComboBox = ComboBox;
 exports.Container = Container;
+exports.ContainerClass = ContainerClass;
 exports.DateField = DateField;
+exports.DateFieldClass = DateFieldClass;
 exports.Divider = Divider;
+exports.DividerClass = DividerClass;
+exports.EmailFieldClass = EmailFieldClass;
+exports.EnrichedTextClass = EnrichedTextClass;
 exports.Grid = Grid;
+exports.GridClass = GridClass;
 exports.GridCustomColumn = GridCustomColumn;
 exports.GridItemDetailsColumn = GridItemDetailsColumn;
 exports.GridSelectionColumn = GridSelectionColumn;
 exports.GridTextColumn = GridTextColumn;
 exports.HybridField = HybridField;
+exports.HybridFieldClass = HybridFieldClass;
 exports.Image = Image;
+exports.ImageClass = ImageClass;
 exports.Input = Input;
 exports.Link = Link;
+exports.LinkClass = LinkClass;
 exports.List = List;
+exports.ListClass = ListClass;
 exports.ListItem = ListItem;
+exports.ListItemClass = ListItemClass;
 exports.Loader = Loader;
+exports.LoaderLinearClass = LoaderLinearClass;
+exports.LoaderRadialClass = LoaderRadialClass;
 exports.Logo = Logo;
+exports.LogoClass = LogoClass;
 exports.MappingsField = MappingsField;
+exports.MappingsFieldClass = MappingsFieldClass;
 exports.Modal = Modal;
+exports.ModalClass = ModalClass;
 exports.MultiSelect = MultiSelect;
+exports.MultiSelectComboBoxClass = MultiSelectComboBoxClass;
 exports.NOTPImage = NOTPImage;
 exports.NOTPLink = NOTPLink;
 exports.NewPassword = NewPassword;
+exports.NewPasswordClass = NewPasswordClass;
+exports.NotificationClass = NotificationClass;
+exports.NotpImageClass = NotpImageClass;
 exports.NumberField = NumberField;
+exports.NumberFieldClass = NumberFieldClass;
+exports.PasscodeClass = PasscodeClass;
 exports.Password = Password;
+exports.PasswordClass = PasswordClass;
 exports.Phone = Phone;
+exports.PhoneFieldClass = PhoneFieldClass;
+exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
+exports.PolicyValidationClass = PolicyValidationClass;
+exports.RadioButtonClass = RadioButtonClass;
+exports.RadioGroupClass = RadioGroupClass;
 exports.Recaptcha = Recaptcha;
+exports.RecaptchaClass = RecaptchaClass;
 exports.RecaptchaV2 = RecaptchaV2;
 exports.SAMLGroupMappings = SAMLGroupMappings;
+exports.SamlGroupMappingsClass = SamlGroupMappingsClass;
 exports.ScopesList = ScopesList;
+exports.ScopesListClass = ScopesListClass;
 exports.SecurityQuestionsSetup = SecurityQuestionsSetup;
+exports.SecurityQuestionsSetupClass = SecurityQuestionsSetupClass;
 exports.SecurityQuestionsVerify = SecurityQuestionsVerify;
+exports.SecurityQuestionsVerifyClass = SecurityQuestionsVerifyClass;
 exports.Select = Select;
 exports.SingleSelect = SingleSelect;
 exports.Switch = Switch;
+exports.SwitchToggleClass = SwitchToggleClass;
 exports.TOTPImage = TOTPImage;
 exports.TOTPLink = TOTPLink;
 exports.Text = Text;
+exports.TextAreaClass = TextAreaClass;
+exports.TextClass = TextClass;
 exports.TextField = TextField;
+exports.TextFieldClass = TextFieldClass;
 exports.Textarea = Textarea;
 exports.ThirdPartyAppLogo = ThirdPartyAppLogo;
+exports.ThirdPartyAppLogoClass = ThirdPartyAppLogoClass;
+exports.TotpImageClass = TotpImageClass;
 exports.UploadFile = UploadFile;
+exports.UploadFileClass = UploadFileClass;
 exports.UserAttribute = UserAttribute;
+exports.UserAttributeClass = UserAttributeClass;
 exports.UserAuthMethod = UserAuthMethod;
+exports.UserAuthMethodClass = UserAuthMethodClass;
 exports.apple = apple;
 exports.authenticator = authenticator;
+exports.componentsThemeManager = componentsThemeManager;
+exports.createComponentsTheme = createComponentsTheme;
+exports.darkTheme = darkTheme;
+exports.defaultTheme = defaultTheme;
 exports.discord = discord;
 exports.edit = edit;
 exports.facebook = facebook;
 exports.fingerprint = fingerprint;
+exports.genColor = genColor;
 exports.github = github;
 exports.gitlab = gitlab;
+exports.globalsThemeToStyle = globalsThemeToStyle;
 exports.google = google;
 exports.linkedin = linkedin;
 exports.microsoft = microsoft;
@@ -563,6 +588,8 @@ exports.plus = plus;
 exports.reload = reload;
 exports.slack = slack;
 exports.sso = sso;
+exports.themeToStyle = themeToStyle;
+exports.themeVars = themeVars;
 exports.whatsapp = whatsapp;
 Object.keys(webComponentsUi).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {