@embedreach/components 0.1.18 → 0.1.19

package/dist/chunks/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { createContext as createContext$1, Component, useReducer, useMemo, useEffect, createElement as createElement$1, useRef, useId as useId$2, useContext as useContext$1, useInsertionEffect, useCallback, Children, isValidElement, useLayoutEffect, useState, forwardRef, Fragment as Fragment$1 } from "react";
+import React__default, { createContext as createContext$1, Component, useReducer, useMemo, useEffect, useContext as useContext$1, createElement as createElement$1, useRef, useId as useId$2, useInsertionEffect, useCallback, Children, isValidElement, useLayoutEffect, useState, forwardRef, Fragment as Fragment$1 } from "react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 var Subscribable = class {
@@ -7873,7 +7873,7 @@ const createQueryClient = () => new QueryClient({
   }
 });
 const createDataContext = (reducer, actions, defaultValue, listeners) => {
-  const Context = React__default.createContext({
+  const Context2 = React__default.createContext({
     state: defaultValue
   });
   const Provider2 = ({ children: children2 }) => {
@@ -7905,9 +7905,9 @@ const createDataContext = (reducer, actions, defaultValue, listeners) => {
       () => ({ state, ...boundActions }),
       [state, boundActions]
     );
-    return /* @__PURE__ */ jsx(Context.Provider, { value: contextValue, children: children2 });
+    return /* @__PURE__ */ jsx(Context2.Provider, { value: contextValue, children: children2 });
   };
-  return { Context, Provider: Provider2 };
+  return { Context: Context2, Provider: Provider2 };
 };
 const authReducer = (state, action) => {
   switch (action.type) {
@@ -8104,6 +8104,13 @@ const applyThemeStyles = (styles2) => {
   styleElement.textContent = cssText;
   document.head.appendChild(styleElement);
 };
+const mergeThemeStyles = (themeConfig, overrides) => {
+  return {
+    ...DEFAULT_THEME_STYLES,
+    ...themeConfig?.styles || {},
+    ...{}
+  };
+};
 const themeReducer = (state, action) => {
   switch (action.type) {
     case "set_theme":
@@ -8134,7 +8141,7 @@ const themeReducer = (state, action) => {
 const setTheme = (dispatch) => (theme2) => dispatch({ type: "set_theme", payload: theme2 });
 const setLoading = (dispatch) => (loading2) => dispatch({ type: "set_loading", payload: loading2 });
 const setError = (dispatch) => (error2) => dispatch({ type: "set_error", payload: error2 });
-const { Provider } = createDataContext(
+const { Context, Provider } = createDataContext(
   themeReducer,
   {
     setTheme,
@@ -8147,6 +8154,28 @@ const { Provider } = createDataContext(
     error: null
   }
 );
+const useThemeContext = () => {
+  const context = useContext$1(Context);
+  if (context === void 0) {
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  }
+  const applyTheme = (themeConfig) => {
+    if (!themeConfig) return;
+    const mergedStyles = mergeThemeStyles(themeConfig);
+    const finalTheme = {
+      styles: mergedStyles
+    };
+    context.setTheme(finalTheme);
+  };
+  return {
+    ...context.state,
+    setTheme: context.setTheme,
+    setLoading: context.setLoading,
+    setError: context.setError,
+    // Add the helper function
+    applyTheme
+  };
+};
 const matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g;
 const htmlEntities = {
   "&": "&",
@@ -11589,6 +11618,7 @@ const I18nProvider = ({ children: children2 }) => {
 const ReachProvider = ({
   authToken: authToken2,
   tenantExternalId,
+  theme: theme2,
   children: children2
 }) => {
   const [queryClient] = React__default.useState(() => {
@@ -11597,6 +11627,14 @@ const ReachProvider = ({
     }
     return createQueryClient();
   });
+  const themeApplied = useRef(false);
+  const { applyTheme } = useThemeContext();
+  useEffect(() => {
+    if (!themeApplied.current && theme2) {
+      applyTheme(theme2);
+      themeApplied.current = true;
+    }
+  }, [applyTheme, theme2]);
   return /* @__PURE__ */ jsxs(QueryClientProvider, { client: queryClient, children: [
     /* @__PURE__ */ jsx(
       D,
@@ -22581,15 +22619,15 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
   };
 }
 function createContext2(rootComponentName, defaultContext) {
-  const Context = React.createContext(defaultContext);
+  const Context2 = React.createContext(defaultContext);
   const Provider2 = (props) => {
     const { children: children2, ...context } = props;
     const value = React.useMemo(() => context, Object.values(context));
-    return /* @__PURE__ */ jsx(Context.Provider, { value, children: children2 });
+    return /* @__PURE__ */ jsx(Context2.Provider, { value, children: children2 });
   };
   Provider2.displayName = rootComponentName + "Provider";
   function useContext2(consumerName) {
-    const context = React.useContext(Context);
+    const context = React.useContext(Context2);
     if (context) return context;
     if (defaultContext !== void 0) return defaultContext;
     throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
@@ -22604,14 +22642,14 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider2 = (props) => {
       const { scope, children: children2, ...context } = props;
-      const Context = scope?.[scopeName]?.[index2] || BaseContext;
+      const Context2 = scope?.[scopeName]?.[index2] || BaseContext;
       const value = React.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx(Context.Provider, { value, children: children2 });
+      return /* @__PURE__ */ jsx(Context2.Provider, { value, children: children2 });
     };
     Provider2.displayName = rootComponentName + "Provider";
     function useContext2(consumerName, scope) {
-      const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const context = React.useContext(Context);
+      const Context2 = scope?.[scopeName]?.[index2] || BaseContext;
+      const context = React.useContext(Context2);
       if (context) return context;
       if (defaultContext !== void 0) return defaultContext;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);