@descope/flow-components 2.0.72 → 2.0.74

package/dist/index.cjs.js

@@ -191,7 +191,7 @@ const Loader = React__default.default.forwardRef(({ variant, color, ...restProps
     }
 });
 
-const Logo = React__default.default.forwardRef(({ width, height }, ref) => (React__default.default.createElement("descope-logo", { "st-width": width, "st-height": height, ref: ref })));
+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) => React__default.default.createElement("descope-new-password", { ...props, ref: ref }));
 
@@ -210,19 +210,7 @@ Textarea.defaultProps = {
     size: 'md'
 };
 
-const CssVarImage = React__default.default.forwardRef(({ width, height, varName, fallback = '', style }, ref) => (React__default.default.createElement("div", { 
-    // className={divClasses}
-    ref: ref, style: {
-        ...style,
-        content: `var(--${varName}, ${fallback})`,
-        width: width || 'initial',
-        height: height || 'initial'
-    } })));
-
-// The reason we define TOTPImage as a component, and not injecting the style from another place,
-// is to restrict the dependency between the code that injects this variable style (web-component) to this place only
-// Note: be careful when changing variables here, this can affect other packages implicitly
-const TOTPImage = React__default.default.forwardRef(({ ...props }, ref) => (React__default.default.createElement(CssVarImage, { ref: ref, varName: "totp-image", ...props })));
+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 })));
 
 // The reason we define TOTPLink as a component, and not injecting the style from another place,
 // is to restrict the dependency between the code that injects this variable style (web-component) to this place only

package/dist/index.d.ts

@@ -44,8 +44,8 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "r
 type BooleanType = {
     type: 'switch' | 'checkbox';
 };
-type Props$g = React.ComponentProps<typeof Checkbox> & React.ComponentProps<typeof Switch> & BooleanType;
-declare const Boolean: React.ForwardRefExoticComponent<Omit<Props$g, "ref"> & React.RefAttributes<HTMLInputElement>>;
+type Props$f = React.ComponentProps<typeof Checkbox> & React.ComponentProps<typeof Switch> & BooleanType;
+declare const Boolean: React.ForwardRefExoticComponent<Omit<Props$f, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 declare global {
     namespace JSX {
@@ -66,17 +66,17 @@ declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes
     'full-width'?: boolean;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type Props$f = {
+type Props$e = {
     digits?: number;
 };
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-passcode': DescopeInputProps & Props$f;
+            'descope-passcode': DescopeInputProps & Props$e;
         }
     }
 }
-declare const Code: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$f, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Code: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$e, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 type Never<T extends Record<string, any>> = {
     [K in keyof T]: never;
@@ -92,7 +92,7 @@ type ContainerAlignment = {
     'vertical-alignment'?: FlexAlignment;
     'space-between'?: 'sm' | 'md' | 'lg';
 };
-type Props$e = {
+type Props$d = {
     direction?: 'row' | 'column';
     shadow?: 'md' | 'lg' | 'xl' | '2xl';
     'border-radius'?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
@@ -108,9 +108,9 @@ declare global {
         }
     }
 }
-declare const Container: React.ForwardRefExoticComponent<(Props$e & React.HTMLAttributes<HTMLDivElement>) & React.RefAttributes<HTMLDivElement>>;
+declare const Container: React.ForwardRefExoticComponent<(Props$d & React.HTMLAttributes<HTMLDivElement>) & React.RefAttributes<HTMLDivElement>>;
 
-type Props$d = {
+type Props$c = {
     vertical?: boolean;
     italic?: boolean;
     variant?: TypographyVariants;
@@ -120,11 +120,11 @@ type Props$d = {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-divider': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & Omit<Props$d, 'children'>;
+            'descope-divider': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & Omit<Props$c, 'children'>;
         }
     }
 }
-declare const Divider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & Props$d, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Divider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & Props$c, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 declare const _default$a: ({ noColor }: {
     noColor: any;
@@ -170,22 +170,22 @@ declare const _default: ({ noColor }: {
     noColor: any;
 }) => React.JSX.Element;
 
-type Props$c = {
+type Props$b = {
     width?: number;
     height?: number;
 };
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLImageElement>, HTMLImageElement> & Props$c;
+            'descope-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLImageElement>, HTMLImageElement> & Props$b;
         }
     }
 }
-declare const Image: React.ForwardRefExoticComponent<Props$c & React.HTMLAttributes<HTMLImageElement> & React.RefAttributes<HTMLImageElement>>;
+declare const Image: React.ForwardRefExoticComponent<Props$b & React.HTMLAttributes<HTMLImageElement> & React.RefAttributes<HTMLImageElement>>;
 
 declare const Input: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$b = {
+type Props$a = {
     href?: string | undefined;
     italic?: boolean;
     variant?: TypographyVariants;
@@ -197,18 +197,18 @@ type Props$b = {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-link': React.DetailedHTMLProps<React.HTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & Omit<Props$b, 'children'>;
+            'descope-link': React.DetailedHTMLProps<React.HTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & Omit<Props$a, 'children'>;
         }
     }
 }
-declare const Link: React.ForwardRefExoticComponent<Props$b & React.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React.ForwardRefExoticComponent<Props$a & React.RefAttributes<HTMLAnchorElement>>;
 
-type Props$a = {
+type Props$9 = {
     variant?: 'linear' | 'radial';
     size?: 'xs' | 'sm' | 'md' | 'lg';
     color?: Mode;
 };
-type LoaderType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$a>;
+type LoaderType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$9>;
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -217,22 +217,22 @@ declare global {
         }
     }
 }
-declare const Loader: React.ForwardRefExoticComponent<Props$a & React.RefAttributes<HTMLDivElement>>;
+declare const Loader: React.ForwardRefExoticComponent<Props$9 & React.RefAttributes<HTMLDivElement>>;
 
-type Props$9 = {
+type Props$8 = {
     width?: string;
     height?: string;
 };
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-logo': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$9>;
+            'descope-logo': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$8>;
         }
     }
 }
-declare const Logo: React.ForwardRefExoticComponent<Props$9 & React.RefAttributes<HTMLDivElement>>;
+declare const Logo: React.ForwardRefExoticComponent<Props$8 & React.RefAttributes<HTMLDivElement>>;
 
-type Props$8 = {
+type Props$7 = {
     'password-label'?: string;
     'password-placeholder'?: string;
     'confirm-label'?: string;
@@ -242,11 +242,11 @@ type Props$8 = {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-new-password': DescopeInputProps & Props$8;
+            'descope-new-password': DescopeInputProps & Props$7;
         }
     }
 }
-declare const NewPassword: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$8, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const NewPassword: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$7, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 declare global {
     namespace JSX {
@@ -266,7 +266,7 @@ declare global {
 }
 declare const Password: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$7 = {
+type Props$6 = {
     'default-code'?: string;
     'phone-input-placeholder'?: string;
     'country-input-placeholder'?: string;
@@ -274,13 +274,13 @@ type Props$7 = {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-phone-field': DescopeInputProps & Props$7;
+            'descope-phone-field': DescopeInputProps & Props$6;
         }
     }
 }
-declare const Phone: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$7, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Phone: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$6, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$6 = {
+type Props$5 = {
     children?: JSX.Element[];
 };
 declare global {
@@ -290,9 +290,9 @@ declare global {
         }
     }
 }
-declare const Select: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$6, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Select: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$5, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$5 = {
+type Props$4 = {
     italic?: boolean;
     variant?: string;
     mode?: string;
@@ -302,11 +302,11 @@ type Props$5 = {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-text': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$5;
+            'descope-text': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$4;
         }
     }
 }
-declare const Text: React.ForwardRefExoticComponent<Omit<Props$5 & {
+declare const Text: React.ForwardRefExoticComponent<Omit<Props$4 & {
     typography?: TypographyVariants;
 } & Omit<React.HTMLProps<HTMLSpanElement>, "mode">, "ref"> & React.RefAttributes<HTMLElement>>;
 
@@ -328,16 +328,18 @@ declare global {
 }
 declare const TextField: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$4 = {
-    varName: string;
-    fallback?: string;
-    width?: number;
-    height?: number;
+type Props$3 = {
+    width?: string;
+    height?: string;
 };
-declare const CssVarImage: React.ForwardRefExoticComponent<Props$4 & React.HTMLAttributes<HTMLImageElement> & React.RefAttributes<HTMLDivElement>>;
-
-type Props$3 = Omit<React.ComponentProps<typeof CssVarImage>, 'varName' | 'fallback'>;
-declare const TOTPImage: React.ForwardRefExoticComponent<Omit<Props$3, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'descope-totp-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$3>;
+        }
+    }
+}
+declare const TOTPImage: React.ForwardRefExoticComponent<Props$3 & React.RefAttributes<HTMLDivElement>>;
 
 type Props$2 = Omit<React.ComponentProps<typeof Link>, 'href'>;
 declare const TOTPLink: React.ForwardRefExoticComponent<Omit<Props$2, "ref"> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/index.esm.js

@@ -185,7 +185,7 @@ const Loader = React.forwardRef(({ variant, color, ...restProps }, ref) => {
     }
 });
 
-const Logo = React.forwardRef(({ width, height }, ref) => (React.createElement("descope-logo", { "st-width": width, "st-height": height, ref: ref })));
+const Logo = React.forwardRef(({ width, height, ...props }, ref) => (React.createElement("descope-logo", { "st-width": width, "st-height": height, ref: ref, ...props })));
 
 const NewPassword = React.forwardRef((props, ref) => React.createElement("descope-new-password", { ...props, ref: ref }));
 
@@ -204,19 +204,7 @@ Textarea.defaultProps = {
     size: 'md'
 };
 
-const CssVarImage = React.forwardRef(({ width, height, varName, fallback = '', style }, ref) => (React.createElement("div", { 
-    // className={divClasses}
-    ref: ref, style: {
-        ...style,
-        content: `var(--${varName}, ${fallback})`,
-        width: width || 'initial',
-        height: height || 'initial'
-    } })));
-
-// The reason we define TOTPImage as a component, and not injecting the style from another place,
-// is to restrict the dependency between the code that injects this variable style (web-component) to this place only
-// Note: be careful when changing variables here, this can affect other packages implicitly
-const TOTPImage = React.forwardRef(({ ...props }, ref) => (React.createElement(CssVarImage, { ref: ref, varName: "totp-image", ...props })));
+const TOTPImage = React.forwardRef(({ width, height, ...props }, ref) => (React.createElement("descope-totp-image", { "st-width": width, "st-height": height, ref: ref, ...props })));
 
 // The reason we define TOTPLink as a component, and not injecting the style from another place,
 // is to restrict the dependency between the code that injects this variable style (web-component) to this place only

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/flow-components",
-	"version": "2.0.72",
+	"version": "2.0.74",
 	"description": "",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.esm.js",
@@ -62,7 +62,7 @@
 		"@typescript-eslint/parser": "^5.34.0",
 		"autoprefixer": "^10.4.8",
 		"babel-jest": "29.6.2",
-		"eslint": "8.45.0",
+		"eslint": "8.46.0",
 		"eslint-config-airbnb": "^19.0.4",
 		"eslint-config-airbnb-typescript": "17.1.0",
 		"eslint-config-prettier": "8.9.0",
@@ -100,7 +100,7 @@
 		"typescript": "^4.5.3"
 	},
 	"dependencies": {
-		"@descope/web-components-ui": "1.0.129",
+		"@descope/web-components-ui": "1.0.135",
 		"rollup-plugin-dts": "^5.3.0"
 	},
 	"peerDependencies": {