@descope/flow-components 2.0.64 → 2.0.65

package/dist/index.cjs.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var tailwindMerge = require('tailwind-merge');
 var webComponentsUi = require('@descope/web-components-ui');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -106,22 +105,29 @@ const Code = React__default.default.forwardRef((props, ref) => React__default.de
 
 const justifyContent = {
     start: 'flex-start',
-    center: 'center',
+    center: 'safe center',
     end: 'flex-end',
     between: 'space-between',
     around: 'space-around',
     evenly: 'space-evenly'
 };
+const alignItems = {
+    start: 'start',
+    end: 'end',
+    center: 'safe center',
+    baseline: 'baseline',
+    stretch: 'stretch'
+};
 const Container = React__default.default.forwardRef(({ background, justify, paddingX = '0', paddingY = '0', shadow, width, align, spaceBetween, ...props }, ref) => {
     const mergedProps = {
         ...props,
         shadow,
         'st-horizontal-padding': `${Number.parseInt(paddingX, 10) / 4}rem`,
         'st-vertical-padding': `${Number.parseInt(paddingY, 10) / 4}rem`,
-        'st-align-items': align,
+        'st-align-items': alignItems[align],
         'st-justify-content': justifyContent[justify],
         'st-background-color': background,
-        'st-width': width,
+        'st-host-width': width,
         'st-gap': spaceBetween && `${Number.parseInt(spaceBetween, 10) / 4}rem`
     };
     // eslint-disable-next-line react/jsx-props-no-spreading
@@ -204,15 +210,14 @@ Textarea.defaultProps = {
     size: 'md'
 };
 
-const CssVarImage = React__default.default.forwardRef(({ className, width, height, varName, fallback = '', style }, ref) => {
-    const divClasses = tailwindMerge.twMerge(className, 'shrink-0', 'pointer-events-none', 'object-contain', 'max-w-full');
-    return (React__default.default.createElement("div", { className: divClasses, ref: ref, style: {
-            ...style,
-            content: `var(--${varName}, ${fallback})`,
-            width: width || 'initial',
-            height: height || 'initial'
-        } }));
-});
+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

package/dist/index.d.ts

@@ -333,7 +333,6 @@ type Props$2 = {
     fallback?: string;
     width?: number;
     height?: number;
-    className?: string;
 };
 declare const CssVarImage: React.ForwardRefExoticComponent<Props$2 & React.HTMLAttributes<HTMLImageElement> & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.esm.js

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { twMerge } from 'tailwind-merge';
 export * from '@descope/web-components-ui';
 
 const Checkbox = React.forwardRef((props, ref) => React.createElement("descope-checkbox", { ...props, ref: ref }));
@@ -100,22 +99,29 @@ const Code = React.forwardRef((props, ref) => React.createElement("descope-passc
 
 const justifyContent = {
     start: 'flex-start',
-    center: 'center',
+    center: 'safe center',
     end: 'flex-end',
     between: 'space-between',
     around: 'space-around',
     evenly: 'space-evenly'
 };
+const alignItems = {
+    start: 'start',
+    end: 'end',
+    center: 'safe center',
+    baseline: 'baseline',
+    stretch: 'stretch'
+};
 const Container = React.forwardRef(({ background, justify, paddingX = '0', paddingY = '0', shadow, width, align, spaceBetween, ...props }, ref) => {
     const mergedProps = {
         ...props,
         shadow,
         'st-horizontal-padding': `${Number.parseInt(paddingX, 10) / 4}rem`,
         'st-vertical-padding': `${Number.parseInt(paddingY, 10) / 4}rem`,
-        'st-align-items': align,
+        'st-align-items': alignItems[align],
         'st-justify-content': justifyContent[justify],
         'st-background-color': background,
-        'st-width': width,
+        'st-host-width': width,
         'st-gap': spaceBetween && `${Number.parseInt(spaceBetween, 10) / 4}rem`
     };
     // eslint-disable-next-line react/jsx-props-no-spreading
@@ -198,15 +204,14 @@ Textarea.defaultProps = {
     size: 'md'
 };
 
-const CssVarImage = React.forwardRef(({ className, width, height, varName, fallback = '', style }, ref) => {
-    const divClasses = twMerge(className, 'shrink-0', 'pointer-events-none', 'object-contain', 'max-w-full');
-    return (React.createElement("div", { className: divClasses, ref: ref, style: {
-            ...style,
-            content: `var(--${varName}, ${fallback})`,
-            width: width || 'initial',
-            height: height || 'initial'
-        } }));
-});
+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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/flow-components",
-	"version": "2.0.64",
+	"version": "2.0.65",
 	"description": "",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.esm.js",
@@ -99,9 +99,8 @@
 		"typescript": "^4.5.3"
 	},
 	"dependencies": {
-		"@descope/web-components-ui": "1.0.115",
-		"rollup-plugin-dts": "^5.3.0",
-		"tailwind-merge": "1.14.0"
+		"@descope/web-components-ui": "1.0.116",
+		"rollup-plugin-dts": "^5.3.0"
 	},
 	"peerDependencies": {
 		"react": ">=17"