@asgardeo/javascript 0.1.9 → 0.1.10

package/dist/cjs/index.js

@@ -3363,10 +3363,31 @@ var toCssVariables = (theme) => {
       }
     });
   }
+  if (theme.components?.Button?.styleOverrides?.root?.borderRadius) {
+    cssVars[`--${prefix}-component-button-root-borderRadius`] = theme.components.Button.styleOverrides.root.borderRadius;
+  }
+  if (theme.components?.Field?.styleOverrides?.root?.borderRadius) {
+    cssVars[`--${prefix}-component-field-root-borderRadius`] = theme.components.Field.styleOverrides.root.borderRadius;
+  }
   return cssVars;
 };
 var toThemeVars = (theme) => {
   const prefix = theme.cssVarPrefix || VendorConstants_default.VENDOR_PREFIX;
+  const componentVars = {};
+  if (theme.components?.Button?.styleOverrides?.root?.borderRadius) {
+    componentVars.Button = {
+      root: {
+        borderRadius: `var(--${prefix}-component-button-root-borderRadius)`
+      }
+    };
+  }
+  if (theme.components?.Field?.styleOverrides?.root?.borderRadius) {
+    componentVars.Field = {
+      root: {
+        borderRadius: `var(--${prefix}-component-field-root-borderRadius)`
+      }
+    };
+  }
   const themeVars = {
     colors: {
       action: {
@@ -3467,6 +3488,9 @@ var toThemeVars = (theme) => {
       };
     });
   }
+  if (Object.keys(componentVars).length > 0) {
+    themeVars.components = componentVars;
+  }
   return themeVars;
 };
 var createTheme = (config = {}, isDark = false) => {
@@ -3990,7 +4014,7 @@ var transformThemeVariant = (themeVariant, isDark = false) => {
   const buttons = themeVariant.buttons;
   const inputs = themeVariant.inputs;
   const images = themeVariant.images;
-  return {
+  const config = {
     colors: {
       action: {
         active: isDark ? "rgba(255, 255, 255, 0.70)" : "rgba(0, 0, 0, 0.54)",
@@ -4051,13 +4075,6 @@ var transformThemeVariant = (themeVariant, isDark = false) => {
         dark: colors?.alerts?.warning?.dark || colors?.alerts?.warning?.main
       }
     },
-    // Extract border radius from buttons or inputs
-    borderRadius: {
-      small: buttons?.primary?.base?.border?.borderRadius || inputs?.base?.border?.borderRadius,
-      medium: buttons?.secondary?.base?.border?.borderRadius,
-      large: buttons?.externalConnection?.base?.border?.borderRadius
-    },
-    // Extract and transform images
     images: {
       favicon: images?.favicon ? {
         url: images.favicon.imgURL,
@@ -4071,6 +4088,31 @@ var transformThemeVariant = (themeVariant, isDark = false) => {
       } : void 0
     }
   };
+  const buttonBorderRadius = buttons?.primary?.base?.border?.borderRadius;
+  const fieldBorderRadius = inputs?.base?.border?.borderRadius;
+  if (buttonBorderRadius || fieldBorderRadius) {
+    config.components = {
+      ...buttonBorderRadius && {
+        Button: {
+          styleOverrides: {
+            root: {
+              borderRadius: buttonBorderRadius
+            }
+          }
+        }
+      },
+      ...fieldBorderRadius && {
+        Field: {
+          styleOverrides: {
+            root: {
+              borderRadius: fieldBorderRadius
+            }
+          }
+        }
+      }
+    };
+  }
+  return config;
 };
 var transformBrandingPreferenceToTheme = (brandingPreference, forceTheme) => {
   const themeConfig = brandingPreference?.preference?.theme;