@descope/web-components-ui 1.0.257 → 1.0.259

package/dist/cjs/index.cjs.js

@@ -528,8 +528,7 @@ const globals = {
 };
 const vars$x = getThemeVars(globals);
 
-const createCssVarFallback = (first, ...rest) =>
-  `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
+const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
 
 const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
   isFunction(relativeSelectorOrSelectorFn)
@@ -582,13 +581,15 @@ const createStyle = (componentName, baseSelector, mappings) => {
 
     const cssVarName = getCssVarName(componentName, attr);
 
-    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property, important }) => {
-      style.add(
-        createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
-        isFunction(property) ? property() : property,
-        createCssVarFallback(cssVarName) + (important ? '!important' : '')
-      );
-    });
+    attrConfig.forEach(
+      ({ selector: relativeSelectorOrSelectorFn, property, important, fallback }) => {
+        style.add(
+          createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
+          isFunction(property) ? property() : property,
+          createCssVar(cssVarName, fallback) + (important ? '!important' : '')
+        );
+      }
+    );
   });
 
   return style.toString();
@@ -2485,7 +2486,7 @@ const ButtonClass = compose(
       labelTextColor: { property: 'color' },
       labelTextDecoration: { ...label$a, property: 'text-decoration' },
       labelSpacing: { ...label$a, property: 'gap' },
-      textAlign: { ...label$a, property: 'justify-content' },
+      textAlign: { ...label$a, property: 'justify-content', fallback: 'center' },
     },
   }),
   clickableMixin,