@descope/flow-components 2.0.458 → 2.0.460

package/dist/dts/TimerButton/TimerButton.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TextAlign } from '../types';
+type Props = React.JSX.IntrinsicElements['button'] & {
+    variant?: string;
+    color?: string;
+    size?: string;
+    horizontal?: boolean;
+    'text-align'?: TextAlign;
+    'full-width'?: boolean;
+    'timer-seconds'?: number;
+    'timer-hide-icon'?: boolean;
+    'timer-paused'?: boolean;
+};
+declare global {
+    namespace React.JSX {
+        interface IntrinsicElements {
+            'descope-timer-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & Props;
+        }
+    }
+}
+declare const TimerButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: string;
+    color?: string;
+    size?: string;
+    horizontal?: boolean;
+    'text-align'?: TextAlign;
+    'full-width'?: boolean;
+    'timer-seconds'?: number;
+    'timer-hide-icon'?: boolean;
+    'timer-paused'?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default TimerButton;

package/dist/dts/TimerButton/index.d.ts

@@ -0,0 +1 @@
+export { default as TimerButton } from './TimerButton';

package/dist/dts/index.d.ts

@@ -82,6 +82,7 @@ export declare const SecurityQuestionsVerifyClass: ComponentClass;
 export declare const HybridFieldClass: ComponentClass;
 export declare const AlertClass: ComponentClass;
 export declare const AddressFieldClass: ComponentClass;
+export declare const TimerButtonClass: ComponentClass;
 export { globalsThemeToStyle, createComponentsTheme, themeToStyle, componentsThemeManager, darkTheme, genColor, defaultTheme, themeVars };
 export type Theme = {
     globals: {
@@ -155,4 +156,5 @@ export * from './DateField';
 export * from './HybridField';
 export * from './Alert';
 export * from './AddressField';
+export * from './TimerButton';
 export * from '@descope/web-components-ui';

package/dist/index.cjs.js

@@ -93856,7 +93856,7 @@ descope-boolean-field-internal {
 	  vars: vars$3
 	});
 
-	var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNiAwQzIuNyAwIDAgMi43IDAgNkMwIDkuMyAyLjcgMTIgNiAxMkM5LjMgMTIgMTIgOS4zIDEyIDZDMTIgMi43IDkuMyAwIDYgMFpNNiAxMC41QzMuNTI1IDEwLjUgMS41IDguNDc1IDEuNSA2QzEuNSAzLjUyNSAzLjUyNSAxLjUgNiAxLjVDOC40NzUgMS41IDEwLjUgMy41MjUgMTAuNSA2QzEwLjUgOC40NzUgOC40NzUgMTAuNSA2IDEwLjVaIiBmaWxsPSIjMTgxQTFDIi8+CiAgPHBhdGggZD0iTTYgMi4yNUg1LjI1VjYuNzVIOVY2SDZWMi4yNVoiIGZpbGw9IiMxODFBMUMiLz4KPC9zdmc+Cg==";
+	var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwMSAxMDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+CjxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+Cjwvc3ZnPgo=";
 
 	const fmt = (val, pad = 2) => String(val).padStart(pad, '0');
 
@@ -93877,7 +93877,7 @@ descope-boolean-field-internal {
 
 	const componentName$3 = getComponentName('timer');
 
-	const observedAttributes$1 = ['seconds', 'hide-icon'];
+	const observedAttributes$1 = ['seconds', 'hide-icon', 'paused'];
 
 	const BaseClass$2 = createBaseClass$1({
 	  componentName: componentName$3,
@@ -93935,57 +93935,63 @@ descope-boolean-field-internal {
 	    return Math.max(0, secs);
 	  }
 
+	  // we use `pause` attribute for allowing preview mode by executing `pause`
+	  get isPaused() {
+	    return this.getAttribute('paused') === 'true';
+	  }
+
 	  init() {
 	    super.init?.();
 
 	    this.#timeRemains = this.seconds;
 	  }
 
-	  start() {
-	    this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));
-
-	    this.startInterval();
-	  }
-
-	  startInterval() {    
+	  startInterval() {
 	    const intervalCycle = () => {
+	      this.#decreaseInterval();
+	      if (!this.#timeRemains) this.stop();
 	      this.#updateDisplay(this.#timeRemains);
-
-	      if (!this.#timeRemains) {
-	        this.stop();
-	      } else {
-	        this.#decreaseInterval();
-	      }
 	    };
 
-	    intervalCycle();
-
 	    if (this.#timeRemains) {
 	      this.#intervalId = setInterval(intervalCycle, DEFAULT_INTERVAL);
+	    } else {
+	      this.stop();
 	    }
 	  }
 
+	  stopInterval() {
+	    clearInterval(this.#intervalId);
+	  }
+
 	  #decreaseInterval() {
-	    this.#timeRemains = Math.max(this.#timeRemains - DEFAULT_INTERVAL, 0);
+	    this.#timeRemains = this.#timeRemains - DEFAULT_INTERVAL;
 	  }
 
 	  reset() {
 	    this.#timeRemains = this.seconds;
-	    this.start();
+	    this.#updateDisplay(this.#timeRemains);
+
+	    if (this.isPaused) return;
+
+	    this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));
+	    this.startInterval();
 	  }
 
 	  stop() {
-	    this.pause();
+	    this.stopInterval();
 	    this.#timeRemains = 0;
 	    this.#updateDisplay(this.#timeRemains);
 	    this.dispatchEvent(new CustomEvent('timer-ended', { bubbles: true }));
 	  }
 
 	  pause() {
-	    clearInterval(this.#intervalId);
+	    this.setAttribute('paused', 'true');
+	    this.stopInterval();
 	  }
 
 	  resume() {
+	    this.removeAttribute('paused');
 	    this.startInterval();
 	  }
 
@@ -93997,6 +94003,19 @@ descope-boolean-field-internal {
 	    this.icon.classList.toggle('hidden', val === 'true');
 	  }
 
+	  #handlePause(paused) {
+	    setTimeout(() => {
+	      if (paused) {
+	        this.pause();
+	      } else {
+	        // we want to prevent a another interval from starting in case previous interval was not yet cleared
+	        if (!this.#intervalId) {
+	          this.resume();
+	        }
+	      }
+	    });
+	  }
+
 	  attributeChangedCallback(attrName, oldValue, newValue) {
 	    super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -94007,28 +94026,31 @@ descope-boolean-field-internal {
 	      if (attrName === 'hide-icon') {
 	        this.#toggleIcon(newValue);
 	      }
+	      if (attrName === 'paused') {
+	        this.#handlePause(newValue === 'true');
+	      }
 	    }
 	  }
 	}
 
 	const { host: host$1, icon, timer: timer$2 } = {
 	  host: { selector: () => ':host' },
-	  icon: { selector: '.icon' },
-	  timer: { selector: '.timer' },
+	  icon: { selector: () => '.icon' },
+	  timer: { selector: () => '.timer' },
 	};
 
 	const TimerClass = compose(
 	  createStyleMixin$1({
 	    mappings: {
-	      backgroundColor: {},
-	      fontSize: [{}, { ...icon }],
+	      fontSize: {},
 	      iconSize: [
 	        { ...icon, property: 'width' },
 	        { ...icon, property: 'height' },
 	      ],
 	      fontFamily: {},
+	      minHeight: {},
 	      fontWeight: { ...timer$2 },
-	      lineHeight: { property: 'min-height' },
+	      lineHeight: { ...timer$2 },
 	      textColor: { ...timer$2, property: 'color' },
 	      gap: {},
 	      textAlign: { property: 'justify-content' },
@@ -94048,7 +94070,8 @@ descope-boolean-field-internal {
 	  [vars$2.hostDirection]: globalRefs$1.direction,
 	  [vars$2.gap]: '0.25em',
 	  [vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
-	  [vars$2.lineHeight]: '2em',
+	  [vars$2.minHeight]: '1.5em',
+	  [vars$2.lineHeight]: '1em',
 	  [vars$2.fontWeight]: globalRefs$1.fonts.font1.fontWeight,
 	  [vars$2.textColor]: globalRefs$1.colors.surface.contrast,
 	  [vars$2.iconColor]: globalRefs$1.colors.surface.contrast,
@@ -94096,6 +94119,7 @@ descope-boolean-field-internal {
 	const timerAttrs = [
 	  'timer-seconds',
 	  'timer-hide-icon',
+	  'timer-paused',
 	  'size',
 	  'text-align',
 	  'full-width',
@@ -94104,6 +94128,7 @@ descope-boolean-field-internal {
 	const mapTimerAttrs = {
 	  'timer-seconds': 'seconds',
 	  'timer-hide-icon': 'hide-icon',
+	  'timer-paused': 'paused',
 	};
 
 	const BaseClass$1 = createBaseClass$1({
@@ -94118,7 +94143,7 @@ descope-boolean-field-internal {
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
       <div class="wrapper">
         <descope-timer class="timer"></descope-timer>
-        <descope-button class="button">
+        <descope-button class="button" disabled="true">
           <slot></slot>
         </descope-button>
       </div>
@@ -94164,6 +94189,14 @@ descope-boolean-field-internal {
 	      includeAttrs: timerAttrs,
 	      mapAttrs: mapTimerAttrs,
 	    });
+
+	    // When we sync attributes, the `disabled` attribute is being compared to the attribute
+	    // on Vaadin component; since the Vaadin component has no `disabled` attribute, we sync
+	    // that back to our component.
+	    // This is pending a more generic fix in the way we sync attibutes.
+	    this.button.shadowRoot
+	      .querySelector('vaadin-button')
+	      .setAttribute('disabled', 'true');
 	  }
 
 	  onTimerStarted() {
@@ -94179,9 +94212,11 @@ descope-boolean-field-internal {
 	  }
 
 	  toggleButtonDisable(isDisabled) {
-	    isDisabled
-	      ? this.button.setAttribute('disabled', 'true')
-	      : this.button.removeAttribute('disabled');
+	    setTimeout(() => {
+	      isDisabled
+	        ? this.button.setAttribute('disabled', 'true')
+	        : this.button.removeAttribute('disabled');
+	    });
 	  }
 	}
 
@@ -95187,6 +95222,8 @@ const Alert = React__default.default.forwardRef(({ children, ...props }, ref) =>
 
 const AddressField = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-address-field", { size: size, ...props, ref: ref })));
 
+const TimerButton = React__default.default.forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', horizontal = false, 'text-align': textAlign = 'center', 'timer-seconds': timerSeconds = 0, 'timer-hide-icon': timerHideIcon = false, 'timer-paused': timerPause = false, ...props }, ref) => (React__default.default.createElement("descope-timer-button", { ...props, size: size, "text-align": textAlign, horizontal: horizontal, "button-variant": variant, "button-mode": color, "timer-hide-icon": timerHideIcon, "timer-seconds": timerSeconds, "timer-paused": timerPause, ref: ref }, children)));
+
 const globalsThemeToStyle = index_cjsExports.globalsThemeToStyle;
 const createComponentsTheme = index_cjsExports.createComponentsTheme;
 const themeToStyle = index_cjsExports.themeToStyle;
@@ -95249,6 +95286,7 @@ const SecurityQuestionsVerifyClass = index_cjsExports.SecurityQuestionsVerifyCla
 const HybridFieldClass = index_cjsExports.HybridFieldClass;
 const AlertClass = index_cjsExports.AlertClass;
 const AddressFieldClass = index_cjsExports.AddressFieldClass;
+const TimerButtonClass = index_cjsExports.TimerButtonClass;
 
 exports.AddressField = AddressField;
 exports.AddressFieldClass = AddressFieldClass;
@@ -95350,6 +95388,8 @@ exports.TextFieldClass = TextFieldClass;
 exports.Textarea = Textarea;
 exports.ThirdPartyAppLogo = ThirdPartyAppLogo;
 exports.ThirdPartyAppLogoClass = ThirdPartyAppLogoClass;
+exports.TimerButton = TimerButton;
+exports.TimerButtonClass = TimerButtonClass;
 exports.TotpImageClass = TotpImageClass;
 exports.UploadFile = UploadFile;
 exports.UploadFileClass = UploadFileClass;

package/dist/index.d.ts

@@ -51,8 +51,8 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "r
 type BooleanType = {
     type: 'switch' | 'checkbox';
 };
-type Props$F = React.ComponentProps<typeof Checkbox> & React.ComponentProps<typeof Switch> & BooleanType;
-declare const Boolean: React.ForwardRefExoticComponent<Omit<Props$F, "ref"> & React.RefAttributes<HTMLInputElement>>;
+type Props$G = React.ComponentProps<typeof Checkbox> & React.ComponentProps<typeof Switch> & BooleanType;
+declare const Boolean: React.ForwardRefExoticComponent<Omit<Props$G, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 declare global {
     namespace React.JSX {
@@ -77,17 +77,17 @@ declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes
     'data-name'?: string;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type Props$E = {
+type Props$F = {
     digits?: number;
 };
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-passcode': DescopeInputProps & Props$E;
+            'descope-passcode': DescopeInputProps & Props$F;
         }
     }
 }
-declare const Code: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$E, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Code: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$F, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 type Never<T extends Record<string, any>> = {
     [K in keyof T]: never;
@@ -103,7 +103,7 @@ type ContainerAlignment = {
     'vertical-alignment'?: FlexAlignment;
     'space-between'?: 'sm' | 'md' | 'lg';
 };
-type Props$D = {
+type Props$E = {
     direction?: 'row' | 'column';
     shadow?: 'md' | 'lg' | 'xl' | '2xl';
     borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
@@ -121,9 +121,9 @@ declare global {
         }
     }
 }
-declare const Container: React.ForwardRefExoticComponent<(Props$D & React.HTMLAttributes<HTMLDivElement>) & React.RefAttributes<HTMLDivElement>>;
+declare const Container: React.ForwardRefExoticComponent<(Props$E & React.HTMLAttributes<HTMLDivElement>) & React.RefAttributes<HTMLDivElement>>;
 
-type Props$C = {
+type Props$D = {
     vertical?: boolean;
     italic?: boolean;
     variant?: TypographyVariants;
@@ -133,15 +133,15 @@ type Props$C = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-divider': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & Omit<Props$C, 'children'>;
+            'descope-divider': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & Omit<Props$D, 'children'>;
         }
     }
 }
-declare const Divider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & Props$C, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Divider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & Props$D, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 declare const ReactComponent: (props: SVGProps) => React.JSX.Element;
 
-type Props$B = {
+type Props$C = {
     width?: string;
     height?: string;
     alt?: string;
@@ -150,15 +150,15 @@ type Props$B = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$B;
+            'descope-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$C;
         }
     }
 }
-declare const Image: React.ForwardRefExoticComponent<Props$B & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+declare const Image: React.ForwardRefExoticComponent<Props$C & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 
 declare const Input: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$A = {
+type Props$B = {
     href?: string | undefined;
     italic?: boolean;
     variant?: TypographyVariants;
@@ -170,18 +170,18 @@ type Props$A = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-link': React.DetailedHTMLProps<React.HTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & Omit<Props$A, 'children'>;
+            'descope-link': React.DetailedHTMLProps<React.HTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & Omit<Props$B, 'children'>;
         }
     }
 }
-declare const Link: React.ForwardRefExoticComponent<Props$A & React.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React.ForwardRefExoticComponent<Props$B & React.RefAttributes<HTMLAnchorElement>>;
 
-type Props$z = {
+type Props$A = {
     variant?: 'linear' | 'radial';
     size?: 'xs' | 'sm' | 'md' | 'lg';
     color?: Mode;
 };
-type LoaderType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$z>;
+type LoaderType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$A>;
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
@@ -190,22 +190,22 @@ declare global {
         }
     }
 }
-declare const Loader: React.ForwardRefExoticComponent<Props$z & React.RefAttributes<HTMLDivElement>>;
+declare const Loader: React.ForwardRefExoticComponent<Props$A & React.RefAttributes<HTMLDivElement>>;
 
-type Props$y = {
+type Props$z = {
     width?: string;
     height?: string;
 };
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-logo': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$y>;
+            'descope-logo': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$z>;
         }
     }
 }
-declare const Logo: React.ForwardRefExoticComponent<Props$y & React.RefAttributes<HTMLDivElement>>;
+declare const Logo: React.ForwardRefExoticComponent<Props$z & React.RefAttributes<HTMLDivElement>>;
 
-type Props$x = {
+type Props$y = {
     'password-label'?: string;
     'password-placeholder'?: string;
     'confirm-label'?: string;
@@ -231,11 +231,11 @@ type Props$x = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-new-password': DescopeInputProps & Props$x;
+            'descope-new-password': DescopeInputProps & Props$y;
         }
     }
 }
-declare const NewPassword: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$x, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const NewPassword: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$y, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 declare global {
     namespace React.JSX {
@@ -255,16 +255,16 @@ declare global {
 }
 declare const Password: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$w = {
+type Props$x = {
     variant: 'countrySelection' | 'inputBox';
     'default-code'?: string;
     'phone-input-placeholder'?: string;
     'country-input-placeholder'?: string;
     'restrict-countries'?: string;
 } & DescopeInputProps;
-declare const Phone: React.ForwardRefExoticComponent<Omit<Props$w, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Phone: React.ForwardRefExoticComponent<Omit<Props$x, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$v = {
+type Props$w = {
     children?: React.JSX.Element[];
     data?: string | Record<string, string>[];
 };
@@ -277,9 +277,9 @@ declare global {
         }
     }
 }
-declare const Select: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$v, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Select: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$w, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$u = {
+type Props$v = {
     italic?: boolean;
     variant?: string;
     mode?: string;
@@ -291,14 +291,14 @@ type Props$u = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-text': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$u;
-            'descope-enriched-text': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$u & {
+            'descope-text': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$v;
+            'descope-enriched-text': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$v & {
                 readonly?: boolean;
             };
         }
     }
 }
-declare const Text: React.ForwardRefExoticComponent<Omit<Props$u & {
+declare const Text: React.ForwardRefExoticComponent<Omit<Props$v & {
     typography?: TypographyVariants;
 } & Omit<React.HTMLProps<HTMLSpanElement>, "mode">, "ref"> & React.RefAttributes<HTMLElement>>;
 
@@ -320,39 +320,39 @@ declare global {
 }
 declare const TextField: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$t = {
+type Props$u = {
     width?: string;
     height?: string;
 };
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-totp-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$t>;
+            'descope-totp-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$u>;
         }
     }
 }
-declare const TOTPImage: React.ForwardRefExoticComponent<Props$t & React.RefAttributes<HTMLDivElement>>;
+declare const TOTPImage: React.ForwardRefExoticComponent<Props$u & React.RefAttributes<HTMLDivElement>>;
 
-type Props$s = Omit<React.ComponentProps<typeof Link>, 'href'>;
-declare const TOTPLink: React.ForwardRefExoticComponent<Omit<Props$s, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+type Props$t = Omit<React.ComponentProps<typeof Link>, 'href'>;
+declare const TOTPLink: React.ForwardRefExoticComponent<Omit<Props$t, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
-type Props$r = {
+type Props$s = {
     width?: string;
     height?: string;
 };
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-notp-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$r>;
+            'descope-notp-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$s>;
         }
     }
 }
-declare const NOTPImage: React.ForwardRefExoticComponent<Props$r & React.RefAttributes<HTMLDivElement>>;
+declare const NOTPImage: React.ForwardRefExoticComponent<Props$s & React.RefAttributes<HTMLDivElement>>;
 
-type Props$q = Omit<React.ComponentProps<typeof Link>, 'href'>;
-declare const NOTPLink: React.ForwardRefExoticComponent<Omit<Props$q, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+type Props$r = Omit<React.ComponentProps<typeof Link>, 'href'>;
+declare const NOTPLink: React.ForwardRefExoticComponent<Omit<Props$r, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
-type Props$p = {
+type Props$q = {
     title?: string;
     description?: string;
     icon?: string;
@@ -371,13 +371,13 @@ type Props$p = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-upload-file': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$p;
+            'descope-upload-file': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$q;
         }
     }
 }
-declare const UploadFile: React.ForwardRefExoticComponent<Props$p & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const UploadFile: React.ForwardRefExoticComponent<Props$q & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
-type Props$o = {
+type Props$p = {
     enabled?: boolean;
     'site-key'?: string;
     enterprise?: boolean;
@@ -396,13 +396,13 @@ declare global {
     }
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-recaptcha': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$o;
+            'descope-recaptcha': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$p;
         }
     }
 }
-declare const Recaptcha: React.ForwardRefExoticComponent<Props$o & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Recaptcha: React.ForwardRefExoticComponent<Props$p & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
-type Props$n = {
+type Props$o = {
     connector?: string;
     enterprise?: boolean;
     action?: string;
@@ -413,16 +413,16 @@ type Props$n = {
     'full-width'?: boolean;
     readOnly?: boolean;
 };
-declare const RecaptchaV2: React.ForwardRefExoticComponent<Props$n & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const RecaptchaV2: React.ForwardRefExoticComponent<Props$o & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
-type Props$m = DescopeInputProps & {
+type Props$n = DescopeInputProps & {
     'default-value'?: string;
     'allow-deselect'?: boolean;
 };
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-button-selection-group': Props$m;
+            'descope-button-selection-group': Props$n;
             'descope-button-selection-group-item': React.JSX.IntrinsicElements['span'] & {
                 value: string;
                 children: string;
@@ -448,10 +448,10 @@ type SingleSelectType = {
     layout?: 'horizontal' | 'vertical';
     'label-type'?: LabelType;
 };
-type Props$l = Omit<React.ComponentProps<typeof ButtonSelectionGroup>, 'allow-deselect'> & SingleSelectType;
-declare const SingleSelect: React.ForwardRefExoticComponent<Omit<Props$l, "ref"> & React.RefAttributes<HTMLInputElement>>;
+type Props$m = Omit<React.ComponentProps<typeof ButtonSelectionGroup>, 'allow-deselect'> & SingleSelectType;
+declare const SingleSelect: React.ForwardRefExoticComponent<Omit<Props$m, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$k = DescopeInputProps & {
+type Props$l = DescopeInputProps & {
     'default-value'?: string;
     'item-label-path'?: string;
     'item-value-path'?: string;
@@ -459,7 +459,7 @@ type Props$k = DescopeInputProps & {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-combobox': Props$k;
+            'descope-combobox': Props$l;
         }
     }
 }
@@ -481,7 +481,7 @@ type Column = {
         resizable: boolean;
     };
 };
-type Props$j = {
+type Props$k = {
     identifier: any;
     children?: React.JSX.Element[];
     size?: Omit<ComponentSize, 'xl'>;
@@ -497,7 +497,7 @@ declare global {
         }
     }
 }
-declare const Grid: React.ForwardRefExoticComponent<Props$j & React.RefAttributes<HTMLInputElement>>;
+declare const Grid: React.ForwardRefExoticComponent<Props$k & React.RefAttributes<HTMLInputElement>>;
 
 type ColumnProps = {
     sortable?: boolean;
@@ -546,7 +546,7 @@ declare global {
 }
 declare const GridItemDetailsColumn: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HTMLInputElement>>;
 
-type Props$i = {
+type Props$j = {
     mode?: string;
     size?: string;
     bordered?: boolean;
@@ -555,11 +555,11 @@ type Props$i = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-badge': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$i;
+            'descope-badge': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$j;
         }
     }
 }
-declare const Badge: React.ForwardRefExoticComponent<Props$i & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+declare const Badge: React.ForwardRefExoticComponent<Props$j & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 
 declare global {
     namespace React.JSX {
@@ -568,12 +568,12 @@ declare global {
         }
     }
 }
-type Props$h = {
+type Props$i = {
     opened?: boolean;
 };
-declare const Modal: React.ForwardRefExoticComponent<Props$h & React.RefAttributes<HTMLDivElement>>;
+declare const Modal: React.ForwardRefExoticComponent<Props$i & React.RefAttributes<HTMLDivElement>>;
 
-type Props$g = DescopeInputProps & {
+type Props$h = DescopeInputProps & {
     size?: 'xs' | 'sm' | 'md' | 'lg';
     'min-items-selection'?: number;
     'max-items-selection'?: number;
@@ -581,7 +581,7 @@ type Props$g = DescopeInputProps & {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-button-multi-selection-group': Props$g & {
+            'descope-button-multi-selection-group': Props$h & {
                 'default-values'?: string;
             };
             'descope-button-selection-group-item': React.JSX.IntrinsicElements['span'] & {
@@ -608,16 +608,16 @@ type MultiSelectType = {
     'max-items-selection'?: number;
     'label-type'?: string;
 };
-type Props$f = Omit<React.ComponentProps<typeof ButtonMultiSelectionGroup>, 'default-values'> & MultiSelectType & {
+type Props$g = Omit<React.ComponentProps<typeof ButtonMultiSelectionGroup>, 'default-values'> & MultiSelectType & {
     'default-values'?: string[];
 };
-declare const MultiSelect: React.ForwardRefExoticComponent<Omit<Props$f, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const MultiSelect: React.ForwardRefExoticComponent<Omit<Props$g, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 type Item$2 = {
     label: string;
     value: string;
 };
-type Props$e = Omit<DescopeInputProps, 'bordered' | 'label' | 'placeholder' | 'helper-text' | 'data-errormessage-pattern-mismatch' | 'data-errormessage-value-missing'> & {
+type Props$f = Omit<DescopeInputProps, 'bordered' | 'label' | 'placeholder' | 'helper-text' | 'data-errormessage-pattern-mismatch' | 'data-errormessage-value-missing'> & {
     'label-value'?: string;
     'label-attr'?: string;
     'button-label'?: string;
@@ -629,20 +629,20 @@ type Props$e = Omit<DescopeInputProps, 'bordered' | 'label' | 'placeholder' | 'h
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-mappings-field': Omit<Props$e, 'default-values' | 'options'> & {
+            'descope-mappings-field': Omit<Props$f, 'default-values' | 'options'> & {
                 'default-values'?: string;
                 options?: string;
             };
         }
     }
 }
-declare const MappingsField: React.ForwardRefExoticComponent<Omit<Props$e, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const MappingsField: React.ForwardRefExoticComponent<Omit<Props$f, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 type Item$1 = {
     label: string;
     value: string;
 };
-type Props$d = Omit<DescopeInputProps, 'bordered' | 'label' | 'placeholder' | 'helper-text' | 'data-errormessage-pattern-mismatch' | 'data-errormessage-value-missing'> & {
+type Props$e = Omit<DescopeInputProps, 'bordered' | 'label' | 'placeholder' | 'helper-text' | 'data-errormessage-pattern-mismatch' | 'data-errormessage-value-missing'> & {
     'label-value'?: string;
     'label-attr'?: string;
     'label-group'?: string;
@@ -654,13 +654,13 @@ type Props$d = Omit<DescopeInputProps, 'bordered' | 'label' | 'placeholder' | 'h
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-saml-group-mappings': Omit<Props$d, 'options'> & {
+            'descope-saml-group-mappings': Omit<Props$e, 'options'> & {
                 options?: string;
             };
         }
     }
 }
-declare const SAMLGroupMappings: React.ForwardRefExoticComponent<Omit<Props$d, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const SAMLGroupMappings: React.ForwardRefExoticComponent<Omit<Props$e, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 declare global {
     namespace React.JSX {
@@ -681,7 +681,7 @@ declare const UserAuthMethod: React.ForwardRefExoticComponent<Omit<React.ClassAt
     buttonIcon?: string;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type Props$c = {
+type Props$d = {
     'badge-tooltip-text'?: string;
     'badge-label'?: string;
     value?: string;
@@ -693,13 +693,13 @@ type Props$c = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-user-attribute': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$c;
+            'descope-user-attribute': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$d;
         }
     }
 }
-declare const UserAttribute: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Props$c, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const UserAttribute: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Props$d, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type Props$b = {
+type Props$c = {
     img?: string;
     'display-name'?: string;
     size?: string;
@@ -708,26 +708,26 @@ type Props$b = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-avatar': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$b;
+            'descope-avatar': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$c;
         }
     }
 }
-declare const Avatar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Props$b, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Avatar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Props$c, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type Props$a = {
+type Props$b = {
     lang?: 'xml' | 'html' | 'javascript' | 'css' | 'json';
     inline?: boolean;
 };
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-code-snippet': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$a;
+            'descope-code-snippet': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$b;
         }
     }
 }
-declare const CodeSnippet: React.ForwardRefExoticComponent<Props$a & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+declare const CodeSnippet: React.ForwardRefExoticComponent<Props$b & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 
-type Props$9 = {
+type Props$a = {
     emptyState?: React.ReactNode;
     children?: React.ReactNode[];
     variant?: 'list' | 'tiles';
@@ -735,26 +735,26 @@ type Props$9 = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$9>;
+            'descope-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$a>;
         }
     }
 }
-declare const List: React.ForwardRefExoticComponent<Props$9 & React.RefAttributes<HTMLDivElement>>;
+declare const List: React.ForwardRefExoticComponent<Props$a & React.RefAttributes<HTMLDivElement>>;
 
-type Props$8 = {
+type Props$9 = {
     variant?: 'row' | 'tile';
     children?: React.ReactNode;
 };
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-list-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$8>;
+            'descope-list-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$9>;
         }
     }
 }
-declare const ListItem: React.ForwardRefExoticComponent<Props$8 & React.RefAttributes<HTMLDivElement>>;
+declare const ListItem: React.ForwardRefExoticComponent<Props$9 & React.RefAttributes<HTMLDivElement>>;
 
-type Props$7 = {
+type Props$8 = {
     emptyState?: React.ReactNode;
     variant?: 'list' | 'tiles';
     data?: any[];
@@ -763,18 +763,18 @@ type Props$7 = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-apps-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$7>;
+            'descope-apps-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$8>;
         }
     }
 }
-declare const AppsList: React.ForwardRefExoticComponent<Props$7 & React.RefAttributes<HTMLDivElement>>;
+declare const AppsList: React.ForwardRefExoticComponent<Props$8 & React.RefAttributes<HTMLDivElement>>;
 
 type Item = {
     desc: string;
     id: string;
     required?: boolean;
 };
-type Props$6 = {
+type Props$7 = {
     variant?: 'checkbox' | 'switch';
     data?: Item[];
     readonly?: boolean;
@@ -783,17 +783,17 @@ type Props$6 = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-scopes-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$6>;
+            'descope-scopes-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$7>;
         }
     }
 }
-declare const ScopesList: React.ForwardRefExoticComponent<Props$6 & React.RefAttributes<HTMLDivElement>>;
+declare const ScopesList: React.ForwardRefExoticComponent<Props$7 & React.RefAttributes<HTMLDivElement>>;
 
 type Question$1 = {
     id: string;
     text: string;
 };
-type Props$5 = {
+type Props$6 = {
     questions?: Question$1[];
     readonly?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -808,17 +808,17 @@ type Props$5 = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-security-questions-setup': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$5>;
+            'descope-security-questions-setup': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$6>;
         }
     }
 }
-declare const SecurityQuestionsSetup: React.ForwardRefExoticComponent<Props$5 & React.RefAttributes<HTMLDivElement>>;
+declare const SecurityQuestionsSetup: React.ForwardRefExoticComponent<Props$6 & React.RefAttributes<HTMLDivElement>>;
 
 type Question = {
     id: string;
     text: string;
 };
-type Props$4 = {
+type Props$5 = {
     questions?: Question[];
     readonly?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -832,23 +832,23 @@ type Props$4 = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-security-questions-verify': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$4>;
+            'descope-security-questions-verify': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$5>;
         }
     }
 }
-declare const SecurityQuestionsVerify: React.ForwardRefExoticComponent<Props$4 & React.RefAttributes<HTMLDivElement>>;
+declare const SecurityQuestionsVerify: React.ForwardRefExoticComponent<Props$5 & React.RefAttributes<HTMLDivElement>>;
 
-type Props$3 = {
+type Props$4 = {
     size: 'xs' | 'sm' | 'md' | 'lg';
 };
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-third-party-app-logo': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$3>;
+            'descope-third-party-app-logo': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$4>;
         }
     }
 }
-declare const ThirdPartyAppLogo: React.ForwardRefExoticComponent<Props$3 & React.RefAttributes<HTMLDivElement>>;
+declare const ThirdPartyAppLogo: React.ForwardRefExoticComponent<Props$4 & React.RefAttributes<HTMLDivElement>>;
 
 declare global {
     namespace React.JSX {
@@ -859,7 +859,7 @@ declare global {
 }
 declare const DateField: React.ForwardRefExoticComponent<Omit<Omit<DescopeInputProps, "external-input">, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$2 = {
+type Props$3 = {
     variant?: 'countrySelection' | 'inputBox';
     'default-code'?: string;
     'phone-input-label'?: string;
@@ -880,7 +880,7 @@ type Props$2 = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-hybrid-field': React.DetailedHTMLProps<React.HTMLAttributes<HTMLInputElement>, HTMLInputElement> & PropsToAttrs<Props$2>;
+            'descope-hybrid-field': React.DetailedHTMLProps<React.HTMLAttributes<HTMLInputElement>, HTMLInputElement> & PropsToAttrs<Props$3>;
         }
     }
 }
@@ -903,7 +903,7 @@ declare const HybridField: React.ForwardRefExoticComponent<Omit<React.ClassAttri
     'external-input'?: boolean;
 } & HTMLInputAttrs & DescopeInputExtraProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$1 = {
+type Props$2 = {
     mode?: string;
     variant?: string;
     bordered?: boolean;
@@ -915,13 +915,13 @@ type Props$1 = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-alert': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$1;
+            'descope-alert': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$2;
         }
     }
 }
-declare const Alert: React.ForwardRefExoticComponent<Props$1 & React.RefAttributes<HTMLElement>>;
+declare const Alert: React.ForwardRefExoticComponent<Props$2 & React.RefAttributes<HTMLElement>>;
 
-type Props = {
+type Props$1 = {
     'data-connector-id'?: string;
     'connector-template'?: string;
     'min-search-length'?: number;
@@ -930,11 +930,41 @@ type Props = {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-address-field': Omit<DescopeInputProps, 'external-input'> & Props;
+            'descope-address-field': Omit<DescopeInputProps, 'external-input'> & Props$1;
         }
     }
 }
-declare const AddressField: React.ForwardRefExoticComponent<Omit<Omit<DescopeInputProps, "external-input"> & Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const AddressField: React.ForwardRefExoticComponent<Omit<Omit<DescopeInputProps, "external-input"> & Props$1, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+type Props = React.JSX.IntrinsicElements['button'] & {
+    variant?: string;
+    color?: string;
+    size?: string;
+    horizontal?: boolean;
+    'text-align'?: TextAlign;
+    'full-width'?: boolean;
+    'timer-seconds'?: number;
+    'timer-hide-icon'?: boolean;
+    'timer-paused'?: boolean;
+};
+declare global {
+    namespace React.JSX {
+        interface IntrinsicElements {
+            'descope-timer-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & Props;
+        }
+    }
+}
+declare const TimerButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: string;
+    color?: string;
+    size?: string;
+    horizontal?: boolean;
+    'text-align'?: TextAlign;
+    'full-width'?: boolean;
+    'timer-seconds'?: number;
+    'timer-hide-icon'?: boolean;
+    'timer-paused'?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
 type ComponentClass = {
     cssVarList: Record<string, string>;
@@ -1020,6 +1050,7 @@ declare const SecurityQuestionsVerifyClass: ComponentClass;
 declare const HybridFieldClass: ComponentClass;
 declare const AlertClass: ComponentClass;
 declare const AddressFieldClass: ComponentClass;
+declare const TimerButtonClass: ComponentClass;
 
 type Theme = {
     globals: {
@@ -1044,4 +1075,4 @@ type Theme = {
     };
 };
 
-export { AddressField, AddressFieldClass, Alert, AlertClass, AppsList, AppsListClass, Avatar, AvatarClass, Badge, BadgeClass, Boolean, Button, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, Checkbox, CheckboxClass, Code, CodeSnippet, CodeSnippetClass, ComboBox, ComboBoxClass, Container, ContainerClass, DateField, DateFieldClass, Divider, DividerClass, EmailFieldClass, EnrichedTextClass, Grid, GridClass, GridCustomColumn, GridItemDetailsColumn, GridSelectionColumn, GridTextColumn, HybridField, HybridFieldClass, IconClass, Image, ImageClass, Input, Link, LinkClass, List, ListClass, ListItem, Loader, LoaderLinearClass, LoaderRadialClass, Logo, LogoClass, MappingsField, MappingsFieldClass, Modal, ModalClass, MultiSelect, MultiSelectComboBoxClass, NOTPImage, NOTPLink, NewPassword, NewPasswordClass, NotificationClass, NotpImageClass, NumberField, NumberFieldClass, PasscodeClass, Password, PasswordClass, Phone, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, Recaptcha, RecaptchaClass, RecaptchaV2, SAMLGroupMappings, SamlGroupMappingsClass, ScopesList, ScopesListClass, SecurityQuestionsSetup, SecurityQuestionsSetupClass, SecurityQuestionsVerify, SecurityQuestionsVerifyClass, Select, SingleSelect, Switch, SwitchToggleClass, TOTPImage, TOTPLink, Text, TextAreaClass, TextClass, TextField, TextFieldClass, Textarea, type Theme, ThirdPartyAppLogo, ThirdPartyAppLogoClass, TotpImageClass, UploadFile, UploadFileClass, UserAttribute, UserAttributeClass, UserAuthMethod, UserAuthMethodClass, ReactComponent as apple, ReactComponent as authenticator, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, ReactComponent as discord, ReactComponent as edit, ReactComponent as facebook, ReactComponent as fingerprint, genColor, ReactComponent as github, ReactComponent as gitlab, globalsThemeToStyle, ReactComponent as google, ReactComponent as linkedin, ReactComponent as microsoft, ReactComponent as passkey, ReactComponent as password, ReactComponent as plus, ReactComponent as reload, ReactComponent as slack, ReactComponent as sso, themeToStyle, themeVars, ReactComponent as whatsapp };
+export { AddressField, AddressFieldClass, Alert, AlertClass, AppsList, AppsListClass, Avatar, AvatarClass, Badge, BadgeClass, Boolean, Button, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, Checkbox, CheckboxClass, Code, CodeSnippet, CodeSnippetClass, ComboBox, ComboBoxClass, Container, ContainerClass, DateField, DateFieldClass, Divider, DividerClass, EmailFieldClass, EnrichedTextClass, Grid, GridClass, GridCustomColumn, GridItemDetailsColumn, GridSelectionColumn, GridTextColumn, HybridField, HybridFieldClass, IconClass, Image, ImageClass, Input, Link, LinkClass, List, ListClass, ListItem, Loader, LoaderLinearClass, LoaderRadialClass, Logo, LogoClass, MappingsField, MappingsFieldClass, Modal, ModalClass, MultiSelect, MultiSelectComboBoxClass, NOTPImage, NOTPLink, NewPassword, NewPasswordClass, NotificationClass, NotpImageClass, NumberField, NumberFieldClass, PasscodeClass, Password, PasswordClass, Phone, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, Recaptcha, RecaptchaClass, RecaptchaV2, SAMLGroupMappings, SamlGroupMappingsClass, ScopesList, ScopesListClass, SecurityQuestionsSetup, SecurityQuestionsSetupClass, SecurityQuestionsVerify, SecurityQuestionsVerifyClass, Select, SingleSelect, Switch, SwitchToggleClass, TOTPImage, TOTPLink, Text, TextAreaClass, TextClass, TextField, TextFieldClass, Textarea, type Theme, ThirdPartyAppLogo, ThirdPartyAppLogoClass, TimerButton, TimerButtonClass, TotpImageClass, UploadFile, UploadFileClass, UserAttribute, UserAttributeClass, UserAuthMethod, UserAuthMethodClass, ReactComponent as apple, ReactComponent as authenticator, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, ReactComponent as discord, ReactComponent as edit, ReactComponent as facebook, ReactComponent as fingerprint, genColor, ReactComponent as github, ReactComponent as gitlab, globalsThemeToStyle, ReactComponent as google, ReactComponent as linkedin, ReactComponent as microsoft, ReactComponent as passkey, ReactComponent as password, ReactComponent as plus, ReactComponent as reload, ReactComponent as slack, ReactComponent as sso, themeToStyle, themeVars, ReactComponent as whatsapp };

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { globalsThemeToStyle as globalsThemeToStyle$1, createComponentsTheme as createComponentsTheme$1, themeToStyle as themeToStyle$1, componentsThemeManager as componentsThemeManager$1, genColor as genColor$1, themeVars as themeVars$1, defaultTheme as defaultTheme$1, darkTheme as darkTheme$1, IconClass as IconClass$1, CheckboxClass as CheckboxClass$1, SwitchToggleClass as SwitchToggleClass$1, ButtonClass as ButtonClass$1, LoaderLinearClass as LoaderLinearClass$1, LoaderRadialClass as LoaderRadialClass$1, ContainerClass as ContainerClass$1, DividerClass as DividerClass$1, EmailFieldClass as EmailFieldClass$1, LinkClass as LinkClass$1, LogoClass as LogoClass$1, TotpImageClass as TotpImageClass$1, NotpImageClass as NotpImageClass$1, NumberFieldClass as NumberFieldClass$1, PasscodeClass as PasscodeClass$1, PasswordClass as PasswordClass$1, TextClass as TextClass$1, EnrichedTextClass as EnrichedTextClass$1, TextAreaClass as TextAreaClass$1, TextFieldClass as TextFieldClass$1, ImageClass as ImageClass$1, PhoneFieldClass as PhoneFieldClass$1, PhoneFieldInputBoxClass as PhoneFieldInputBoxClass$1, NewPasswordClass as NewPasswordClass$1, RecaptchaClass as RecaptchaClass$1, UploadFileClass as UploadFileClass$1, ButtonSelectionGroupClass as ButtonSelectionGroupClass$1, ButtonMultiSelectionGroupClass as ButtonMultiSelectionGroupClass$1, ModalClass as ModalClass$1, NotificationClass as NotificationClass$1, GridClass as GridClass$1, BadgeClass as BadgeClass$1, MultiSelectComboBoxClass as MultiSelectComboBoxClass$1, AvatarClass as AvatarClass$1, UserAttributeClass as UserAttributeClass$1, UserAuthMethodClass as UserAuthMethodClass$1, MappingsFieldClass as MappingsFieldClass$1, SamlGroupMappingsClass as SamlGroupMappingsClass$1, PolicyValidationClass as PolicyValidationClass$1, CodeSnippetClass as CodeSnippetClass$1, ComboBoxClass as ComboBoxClass$1, RadioGroupClass as RadioGroupClass$1, DateFieldClass as DateFieldClass$1, CalendarClass as CalendarClass$1, ListClass as ListClass$1, AppsListClass as AppsListClass$1, ScopesListClass as ScopesListClass$1, ThirdPartyAppLogoClass as ThirdPartyAppLogoClass$1, SecurityQuestionsSetupClass as SecurityQuestionsSetupClass$1, SecurityQuestionsVerifyClass as SecurityQuestionsVerifyClass$1, HybridFieldClass as HybridFieldClass$1, AlertClass as AlertClass$1, AddressFieldClass as AddressFieldClass$1 } from '@descope/web-components-ui';
+import { globalsThemeToStyle as globalsThemeToStyle$1, createComponentsTheme as createComponentsTheme$1, themeToStyle as themeToStyle$1, componentsThemeManager as componentsThemeManager$1, genColor as genColor$1, themeVars as themeVars$1, defaultTheme as defaultTheme$1, darkTheme as darkTheme$1, IconClass as IconClass$1, CheckboxClass as CheckboxClass$1, SwitchToggleClass as SwitchToggleClass$1, ButtonClass as ButtonClass$1, LoaderLinearClass as LoaderLinearClass$1, LoaderRadialClass as LoaderRadialClass$1, ContainerClass as ContainerClass$1, DividerClass as DividerClass$1, EmailFieldClass as EmailFieldClass$1, LinkClass as LinkClass$1, LogoClass as LogoClass$1, TotpImageClass as TotpImageClass$1, NotpImageClass as NotpImageClass$1, NumberFieldClass as NumberFieldClass$1, PasscodeClass as PasscodeClass$1, PasswordClass as PasswordClass$1, TextClass as TextClass$1, EnrichedTextClass as EnrichedTextClass$1, TextAreaClass as TextAreaClass$1, TextFieldClass as TextFieldClass$1, ImageClass as ImageClass$1, PhoneFieldClass as PhoneFieldClass$1, PhoneFieldInputBoxClass as PhoneFieldInputBoxClass$1, NewPasswordClass as NewPasswordClass$1, RecaptchaClass as RecaptchaClass$1, UploadFileClass as UploadFileClass$1, ButtonSelectionGroupClass as ButtonSelectionGroupClass$1, ButtonMultiSelectionGroupClass as ButtonMultiSelectionGroupClass$1, ModalClass as ModalClass$1, NotificationClass as NotificationClass$1, GridClass as GridClass$1, BadgeClass as BadgeClass$1, MultiSelectComboBoxClass as MultiSelectComboBoxClass$1, AvatarClass as AvatarClass$1, UserAttributeClass as UserAttributeClass$1, UserAuthMethodClass as UserAuthMethodClass$1, MappingsFieldClass as MappingsFieldClass$1, SamlGroupMappingsClass as SamlGroupMappingsClass$1, PolicyValidationClass as PolicyValidationClass$1, CodeSnippetClass as CodeSnippetClass$1, ComboBoxClass as ComboBoxClass$1, RadioGroupClass as RadioGroupClass$1, DateFieldClass as DateFieldClass$1, CalendarClass as CalendarClass$1, ListClass as ListClass$1, AppsListClass as AppsListClass$1, ScopesListClass as ScopesListClass$1, ThirdPartyAppLogoClass as ThirdPartyAppLogoClass$1, SecurityQuestionsSetupClass as SecurityQuestionsSetupClass$1, SecurityQuestionsVerifyClass as SecurityQuestionsVerifyClass$1, HybridFieldClass as HybridFieldClass$1, AlertClass as AlertClass$1, AddressFieldClass as AddressFieldClass$1, TimerButtonClass as TimerButtonClass$1 } from '@descope/web-components-ui';
 export * from '@descope/web-components-ui';
 import React, { useMemo } from 'react';
 
@@ -434,6 +434,8 @@ const Alert = React.forwardRef(({ children, ...props }, ref) => (React.createEle
 
 const AddressField = React.forwardRef(({ size = 'md', ...props }, ref) => (React.createElement("descope-address-field", { size: size, ...props, ref: ref })));
 
+const TimerButton = React.forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', horizontal = false, 'text-align': textAlign = 'center', 'timer-seconds': timerSeconds = 0, 'timer-hide-icon': timerHideIcon = false, 'timer-paused': timerPause = false, ...props }, ref) => (React.createElement("descope-timer-button", { ...props, size: size, "text-align": textAlign, horizontal: horizontal, "button-variant": variant, "button-mode": color, "timer-hide-icon": timerHideIcon, "timer-seconds": timerSeconds, "timer-paused": timerPause, ref: ref }, children)));
+
 const globalsThemeToStyle = globalsThemeToStyle$1;
 const createComponentsTheme = createComponentsTheme$1;
 const themeToStyle = themeToStyle$1;
@@ -496,5 +498,6 @@ const SecurityQuestionsVerifyClass = SecurityQuestionsVerifyClass$1;
 const HybridFieldClass = HybridFieldClass$1;
 const AlertClass = AlertClass$1;
 const AddressFieldClass = AddressFieldClass$1;
+const TimerButtonClass = TimerButtonClass$1;
 
-export { AddressField, AddressFieldClass, Alert, AlertClass, AppsList, AppsListClass, Avatar, AvatarClass, Badge, BadgeClass, Boolean, Button, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, Checkbox, CheckboxClass, Code, CodeSnippet, CodeSnippetClass, ComboBox, ComboBoxClass, Container, ContainerClass, DateField, DateFieldClass, Divider, DividerClass, EmailFieldClass, EnrichedTextClass, Grid, GridClass, GridCustomColumn, GridItemDetailsColumn, GridSelectionColumn, GridTextColumn, HybridField, HybridFieldClass, IconClass, Image, ImageClass, Input, Link, LinkClass, List, ListClass, ListItem, Loader, LoaderLinearClass, LoaderRadialClass, Logo, LogoClass, MappingsField, MappingsFieldClass, Modal, ModalClass, MultiSelect, MultiSelectComboBoxClass, NOTPImage, NOTPLink, NewPassword, NewPasswordClass, NotificationClass, NotpImageClass, NumberField, NumberFieldClass, PasscodeClass, Password, PasswordClass, Phone, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, Recaptcha, RecaptchaClass, RecaptchaV2, SAMLGroupMappings, SamlGroupMappingsClass, ScopesList, ScopesListClass, SecurityQuestionsSetup, SecurityQuestionsSetupClass, SecurityQuestionsVerify, SecurityQuestionsVerifyClass, Select, SingleSelect, Switch, SwitchToggleClass, TOTPImage, TOTPLink, Text, TextAreaClass, TextClass, TextField, TextFieldClass, Textarea, ThirdPartyAppLogo, ThirdPartyAppLogoClass, TotpImageClass, UploadFile, UploadFileClass, UserAttribute, UserAttributeClass, UserAuthMethod, UserAuthMethodClass, apple, authenticator, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, discord, edit, facebook, fingerprint, genColor, github, gitlab, globalsThemeToStyle, google, linkedin, microsoft, passkey, password, plus, reload, slack, sso, themeToStyle, themeVars, whatsapp };
+export { AddressField, AddressFieldClass, Alert, AlertClass, AppsList, AppsListClass, Avatar, AvatarClass, Badge, BadgeClass, Boolean, Button, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, Checkbox, CheckboxClass, Code, CodeSnippet, CodeSnippetClass, ComboBox, ComboBoxClass, Container, ContainerClass, DateField, DateFieldClass, Divider, DividerClass, EmailFieldClass, EnrichedTextClass, Grid, GridClass, GridCustomColumn, GridItemDetailsColumn, GridSelectionColumn, GridTextColumn, HybridField, HybridFieldClass, IconClass, Image, ImageClass, Input, Link, LinkClass, List, ListClass, ListItem, Loader, LoaderLinearClass, LoaderRadialClass, Logo, LogoClass, MappingsField, MappingsFieldClass, Modal, ModalClass, MultiSelect, MultiSelectComboBoxClass, NOTPImage, NOTPLink, NewPassword, NewPasswordClass, NotificationClass, NotpImageClass, NumberField, NumberFieldClass, PasscodeClass, Password, PasswordClass, Phone, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, Recaptcha, RecaptchaClass, RecaptchaV2, SAMLGroupMappings, SamlGroupMappingsClass, ScopesList, ScopesListClass, SecurityQuestionsSetup, SecurityQuestionsSetupClass, SecurityQuestionsVerify, SecurityQuestionsVerifyClass, Select, SingleSelect, Switch, SwitchToggleClass, TOTPImage, TOTPLink, Text, TextAreaClass, TextClass, TextField, TextFieldClass, Textarea, ThirdPartyAppLogo, ThirdPartyAppLogoClass, TimerButton, TimerButtonClass, TotpImageClass, UploadFile, UploadFileClass, UserAttribute, UserAttributeClass, UserAuthMethod, UserAuthMethodClass, apple, authenticator, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, discord, edit, facebook, fingerprint, genColor, github, gitlab, globalsThemeToStyle, google, linkedin, microsoft, passkey, password, plus, reload, slack, sso, themeToStyle, themeVars, whatsapp };

package/dist/types/src/TimerButton/TimerButton.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TextAlign } from '../types';
+type Props = React.JSX.IntrinsicElements['button'] & {
+    variant?: string;
+    color?: string;
+    size?: string;
+    horizontal?: boolean;
+    'text-align'?: TextAlign;
+    'full-width'?: boolean;
+    'timer-seconds'?: number;
+    'timer-hide-icon'?: boolean;
+    'timer-paused'?: boolean;
+};
+declare global {
+    namespace React.JSX {
+        interface IntrinsicElements {
+            'descope-timer-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & Props;
+        }
+    }
+}
+declare const TimerButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: string;
+    color?: string;
+    size?: string;
+    horizontal?: boolean;
+    'text-align'?: TextAlign;
+    'full-width'?: boolean;
+    'timer-seconds'?: number;
+    'timer-hide-icon'?: boolean;
+    'timer-paused'?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default TimerButton;

package/dist/types/src/TimerButton/index.d.ts

@@ -0,0 +1 @@
+export { default as TimerButton } from './TimerButton';

package/dist/types/src/index.d.ts

@@ -82,6 +82,7 @@ export declare const SecurityQuestionsVerifyClass: ComponentClass;
 export declare const HybridFieldClass: ComponentClass;
 export declare const AlertClass: ComponentClass;
 export declare const AddressFieldClass: ComponentClass;
+export declare const TimerButtonClass: ComponentClass;
 export { globalsThemeToStyle, createComponentsTheme, themeToStyle, componentsThemeManager, darkTheme, genColor, defaultTheme, themeVars };
 export type Theme = {
     globals: {
@@ -155,4 +156,5 @@ export * from './DateField';
 export * from './HybridField';
 export * from './Alert';
 export * from './AddressField';
+export * from './TimerButton';
 export * from '@descope/web-components-ui';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/flow-components",
-	"version": "2.0.458",
+	"version": "2.0.460",
 	"description": "",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.esm.js",
@@ -104,7 +104,7 @@
 		"typescript": "^5.7.2"
 	},
 	"dependencies": {
-		"@descope/web-components-ui": "1.43.0"
+		"@descope/web-components-ui": "1.44.0"
 	},
 	"peerDependencies": {
 		"react": ">= 18"