@asgardeo/react 0.23.4 → 0.23.6

package/dist/index.js

@@ -7748,7 +7748,7 @@ import {
   withVendorCSSClassPrefix as withVendorCSSClassPrefix22
 } from "@asgardeo/browser";
 import { cx as cx23 } from "@emotion/css";
-import { useState as useState19, useCallback as useCallback13 } from "react";
+import { useState as useState19, useCallback as useCallback13, useContext as useContext11 } from "react";
 
 // src/utils/v2/resolveTranslationsInObject.ts
 import { resolveFlowTemplateLiterals as resolveFlowTemplateLiterals2 } from "@asgardeo/browser";
@@ -7886,7 +7886,7 @@ import {
 } from "@asgardeo/browser";
 import { css as css21 } from "@emotion/css";
 import DOMPurify from "dompurify";
-import { cloneElement, useContext as useContext11 } from "react";
+import { cloneElement } from "react";
 
 // src/components/presentation/auth/OrganizationUnitPicker/v2/OrganizationUnitPicker.tsx
 import { cx as cx20 } from "@emotion/css";
@@ -8874,8 +8874,8 @@ var matchesSocialProvider = (actionId, eventType, buttonText, provider, authType
   return providerMatches;
 };
 var createAuthComponentFromFlow = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, authType, options = {}) => {
-  const { theme } = useTheme_default();
-  const customRenderers = useContext11(ComponentRendererContext_default);
+  const theme = options._theme;
+  const customRenderers = options._customRenderers ?? {};
   const key = options.key || component.id;
   const customRenderer = customRenderers[component.id] ?? customRenderers[component.type];
   if (customRenderer) {
@@ -9103,7 +9103,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
         const formStyles = {
           display: "flex",
           flexDirection: "column",
-          gap: `calc(${theme.vars.spacing.unit} * 2)`
+          gap: `calc(${theme?.vars?.spacing?.unit ?? "4px"} * 2)`
         };
         const blockComponents = component.components.map(
           (childComponent, index) => createAuthComponentFromFlow(
@@ -9300,6 +9300,7 @@ var BaseSignInContent2 = ({
 }) => {
   const { meta } = useAsgardeo_default();
   const { theme } = useTheme_default();
+  const customRenderers = useContext11(ComponentRendererContext_default);
   const { t } = useTranslation_default();
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
@@ -9443,6 +9444,8 @@ var BaseSignInContent2 = ({
       isFormValid,
       handleInputChange,
       {
+        _customRenderers: customRenderers,
+        _theme: theme,
         additionalData,
         buttonClassName: buttonClasses,
         inputClassName: inputClasses,
@@ -9457,12 +9460,14 @@ var BaseSignInContent2 = ({
     ),
     [
       additionalData,
+      customRenderers,
       formValues,
       touchedFields,
       formErrors,
       isFormValid,
       meta,
       t,
+      theme,
       isLoading,
       size,
       variant,
@@ -11476,7 +11481,7 @@ import {
   createPackageComponentLogger as createPackageComponentLogger8
 } from "@asgardeo/browser";
 import { cx as cx25 } from "@emotion/css";
-import { useEffect as useEffect20, useState as useState22, useCallback as useCallback15, useRef as useRef9 } from "react";
+import { useCallback as useCallback15, useContext as useContext12, useEffect as useEffect20, useRef as useRef9, useState as useState22 } from "react";
 
 // src/utils/v2/getAuthComponentHeadings.ts
 var getAuthComponentHeadings = (components, flowTitle, flowSubtitle, defaultTitle, defaultSubtitle) => {
@@ -11565,6 +11570,7 @@ var BaseSignUpContent2 = ({
   showSubtitle = true
 }) => {
   const { theme, colorScheme } = useTheme_default();
+  const customRenderers = useContext12(ComponentRendererContext_default);
   const { t } = useTranslation_default();
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   const { meta, isInitialized: isSdkInitialized, getStorageManager } = useAsgardeo_default();
@@ -11985,6 +11991,8 @@ var BaseSignUpContent2 = ({
       isFormValid,
       handleInputChange,
       {
+        _customRenderers: customRenderers,
+        _theme: theme,
         buttonClassName: buttonClasses,
         inputClassName: inputClasses,
         onInputBlur: handleInputBlur,
@@ -11994,12 +12002,14 @@ var BaseSignUpContent2 = ({
       }
     ),
     [
+      customRenderers,
       formValues,
       touchedFields,
       formErrors,
       isFormValid,
       isLoading,
       size,
+      theme,
       variant,
       inputClasses,
       buttonClasses,
@@ -12283,7 +12293,7 @@ import {
   logger as logger10
 } from "@asgardeo/browser";
 import { cx as cx26 } from "@emotion/css";
-import { useCallback as useCallback16, useEffect as useEffect21, useRef as useRef10, useState as useState23 } from "react";
+import { useCallback as useCallback16, useContext as useContext13, useEffect as useEffect21, useRef as useRef10, useState as useState23 } from "react";
 
 // src/components/presentation/auth/InviteUser/v2/BaseInviteUser.styles.ts
 import { css as css23 } from "@emotion/css";
@@ -12345,6 +12355,7 @@ var BaseInviteUser = ({
   const { meta, isInitialized: isSdkInitialized, getStorageManager } = useAsgardeo_default();
   const { t } = useTranslation_default(preferences?.i18n);
   const { theme } = useTheme_default();
+  const customRenderers = useContext13(ComponentRendererContext_default);
   const styles = BaseInviteUser_styles_default(theme, theme.vars.colors.text.primary);
   const [isLoading, setIsLoading] = useState23(false);
   const [isFlowInitialized, setIsFlowInitialized] = useState23(false);
@@ -12582,6 +12593,8 @@ var BaseInviteUser = ({
       isFormValid,
       handleInputChange,
       {
+        _customRenderers: customRenderers,
+        _theme: theme,
         additionalData: currentFlow?.data?.additionalData,
         fetchOrganizationUnitChildren,
         onInputBlur: handleInputBlur,
@@ -12591,6 +12604,7 @@ var BaseInviteUser = ({
       }
     ),
     [
+      customRenderers,
       currentFlow?.data?.additionalData,
       fetchOrganizationUnitChildren,
       formValues,
@@ -12602,6 +12616,7 @@ var BaseInviteUser = ({
       handleInputBlur,
       handleSubmit,
       size,
+      theme,
       variant
     ]
   );
@@ -12739,7 +12754,7 @@ import { useMemo as useMemo32 } from "react";
 
 // src/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.tsx
 import { cx as cx27 } from "@emotion/css";
-import { useCallback as useCallback18, useEffect as useEffect22, useRef as useRef11, useState as useState24 } from "react";
+import { useCallback as useCallback18, useContext as useContext14, useEffect as useEffect22, useRef as useRef11, useState as useState24 } from "react";
 
 // src/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.styles.ts
 import { css as css24 } from "@emotion/css";
@@ -12802,6 +12817,7 @@ var BaseAcceptInvite = ({
   const { meta, isInitialized, getStorageManager } = useAsgardeo_default();
   const { t } = useTranslation_default(preferences?.i18n);
   const { theme } = useTheme_default();
+  const customRenderers = useContext14(ComponentRendererContext_default);
   const styles = BaseAcceptInvite_styles_default(theme, theme.vars.colors.text.primary);
   const [isLoading, setIsLoading] = useState24(false);
   const [isValidatingToken, setIsValidatingToken] = useState24(true);
@@ -13145,6 +13161,8 @@ var BaseAcceptInvite = ({
           isFormValid,
           handleInputChange,
           {
+            _customRenderers: customRenderers,
+            _theme: theme,
             onInputBlur: handleInputBlur,
             onSubmit: handleSubmit,
             size,
@@ -13820,7 +13838,7 @@ import {
   createContext as createContext12,
   forwardRef as forwardRef10,
   isValidElement,
-  useContext as useContext12,
+  useContext as useContext15,
   useLayoutEffect,
   useMemo as useMemo37,
   useState as useState25
@@ -14022,7 +14040,7 @@ function useDialog({
 }
 var DialogContext = createContext12(null);
 var useDialogContext = () => {
-  const context = useContext12(DialogContext);
+  const context = useContext15(DialogContext);
   if (context == null) {
     throw new Error("Dialog components must be wrapped in <Dialog />");
   }
@@ -18234,9 +18252,9 @@ import { resolveLocaleDisplayName, resolveLocaleEmoji } from "@asgardeo/browser"
 import { useEffect as useEffect27, useMemo as useMemo48 } from "react";
 
 // src/contexts/FlowMeta/useFlowMeta.ts
-import { useContext as useContext13 } from "react";
+import { useContext as useContext16 } from "react";
 var useFlowMeta = () => {
-  const context = useContext13(FlowMetaContext_default);
+  const context = useContext16(FlowMetaContext_default);
   if (!context) {
     throw new Error("useFlowMeta must be used within a FlowMetaProvider");
   }