@embedreach/components 0.1.17 → 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 {
@@ -4316,19 +4316,19 @@ function Portal$5(props) {
         createRoot((dispose2) => insert(el, () => !clean() ? content() : dispose2(), null));
         onCleanup(cleanup);
       } else {
-        const container = createElement(props.isSVG ? "g" : "div", props.isSVG), renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+        const container2 = createElement(props.isSVG ? "g" : "div", props.isSVG), renderRoot = useShadow && container2.attachShadow ? container2.attachShadow({
           mode: "open"
-        }) : container;
-        Object.defineProperty(container, "_$host", {
+        }) : container2;
+        Object.defineProperty(container2, "_$host", {
           get() {
             return marker.parentNode;
           },
           configurable: true
         });
         insert(renderRoot, content);
-        el.appendChild(container);
-        props.ref && props.ref(container);
-        onCleanup(() => el.removeChild(container));
+        el.appendChild(container2);
+        props.ref && props.ref(container2);
+        onCleanup(() => el.removeChild(container2));
       }
     },
     void 0,
@@ -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) {
@@ -7993,11 +7993,64 @@ const normalizeColor = (color2) => {
   return computed;
 };
 const isValidColor = (color2) => {
+  if (/^\d+\s+\d+(?:\.\d+)?%\s+\d+(?:\.\d+)?%$/.test(color2.trim())) {
+    return true;
+  }
   const div = document.createElement("div");
   const prevColor = div.style.color;
   div.style.color = color2;
   return div.style.color !== prevColor;
 };
+const rgbToShadcnHsl = (r2, g2, b3) => {
+  r2 /= 255;
+  g2 /= 255;
+  b3 /= 255;
+  const max2 = Math.max(r2, g2, b3);
+  const min2 = Math.min(r2, g2, b3);
+  let h4 = 0, s3 = 0;
+  const l2 = (max2 + min2) / 2;
+  if (max2 !== min2) {
+    const d4 = max2 - min2;
+    s3 = l2 > 0.5 ? d4 / (2 - max2 - min2) : d4 / (max2 + min2);
+    switch (max2) {
+      case r2:
+        h4 = (g2 - b3) / d4 + (g2 < b3 ? 6 : 0);
+        break;
+      case g2:
+        h4 = (b3 - r2) / d4 + 2;
+        break;
+      case b3:
+        h4 = (r2 - g2) / d4 + 4;
+        break;
+    }
+    h4 *= 60;
+  }
+  return `${Math.round(h4)} ${Math.round(s3 * 100)}% ${Math.round(l2 * 100)}%`;
+};
+const extractRgb = (rgbColor) => {
+  const matches = rgbColor.match(/\d+/g);
+  if (!matches || matches.length < 3) {
+    throw new Error(`Invalid RGB color format: ${rgbColor}`);
+  }
+  return [
+    parseInt(matches[0], 10),
+    parseInt(matches[1], 10),
+    parseInt(matches[2], 10)
+  ];
+};
+const toShadcnFormat = (color2) => {
+  if (/^\d+\s+\d+(?:\.\d+)?%\s+\d+(?:\.\d+)?%$/.test(color2.trim())) {
+    return color2.trim();
+  }
+  try {
+    const rgbColor = normalizeColor(color2);
+    const [r2, g2, b3] = extractRgb(rgbColor);
+    return rgbToShadcnHsl(r2, g2, b3);
+  } catch (e4) {
+    console.warn(`Failed to convert color to shadcn format: ${color2}`, e4);
+    return color2;
+  }
+};
 const DEFAULT_THEME_STYLES = {
   primary: "hsl(222.2 47.4% 11.2%)",
   background: "hsl(0 0% 100%)",
@@ -8031,13 +8084,17 @@ const applyThemeStyles = (styles2) => {
       ${Object.entries(DEFAULT_THEME_STYLES).map(([key, defaultValue]) => {
     const userValue = styles2[key];
     let finalValue = defaultValue;
-    if (userValue && isValidColor(userValue)) {
-      try {
-        finalValue = normalizeColor(userValue);
-      } catch {
-        console.warn(
-          `Failed to normalize color for ${key}, using default`
-        );
+    if (userValue !== void 0) {
+      if (key === "radius") {
+        finalValue = userValue;
+      } else if (isValidColor(userValue)) {
+        try {
+          finalValue = toShadcnFormat(userValue);
+        } catch (e4) {
+          console.warn(
+            `Failed to convert color for ${key}, using default`
+          );
+        }
       }
     }
     return `--reach-${key}: ${finalValue};`;
@@ -8047,10 +8104,17 @@ 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":
-      if (action.payload) {
+      if (action.payload && !state.theme) {
         applyThemeStyles(action.payload.styles);
       }
       return {
@@ -8077,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,
@@ -8086,10 +8150,32 @@ const { Provider } = createDataContext(
   },
   {
     theme: null,
-    loading: false,
+    loading: true,
     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 = {
   "&amp;": "&",
@@ -10715,7 +10801,7 @@ class Browser {
 }
 Browser.type = "languageDetector";
 const ad_spend$1 = "Ad Spend";
-const date$1 = "Date";
+const date$2 = "Date";
 const close$1 = "Close";
 const connected$1 = "Connected";
 const connecting$1 = "Connecting...";
@@ -11059,7 +11145,7 @@ const empty_state$1 = {
 };
 const enCommon = {
   ad_spend: ad_spend$1,
-  date: date$1,
+  date: date$2,
   close: close$1,
   "continue": "Continue",
   connected: connected$1,
@@ -11098,7 +11184,7 @@ const enCommon = {
   empty_state: empty_state$1
 };
 const ad_spend = "Gasto en anuncios";
-const date = "Fecha";
+const date$1 = "Fecha";
 const close = "Cerrar";
 const connected = "Conectado";
 const connecting = "Conectando...";
@@ -11442,7 +11528,7 @@ const empty_state = {
 };
 const esCommon = {
   ad_spend,
-  date,
+  date: date$1,
   close,
   "continue": "Continuar",
   connected,
@@ -11532,6 +11618,7 @@ const I18nProvider = ({ children: children2 }) => {
 const ReachProvider = ({
   authToken: authToken2,
   tenantExternalId,
+  theme: theme2,
   children: children2
 }) => {
   const [queryClient] = React__default.useState(() => {
@@ -11540,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,
@@ -21881,7 +21976,7 @@ const ActionButtons$1 = ({
     )
   ] }) });
 };
-const styles$4 = {
+const styles$5 = {
   iconWrapper: "mb-4",
   cardTitle: "text-lg font-medium mb-2",
   cardDescription: "text-sm text-gray-600",
@@ -21889,36 +21984,36 @@ const styles$4 = {
 };
 const OneTimeBroadcast = () => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$4.iconWrapper, children: "📨" }),
-    /* @__PURE__ */ jsx("h3", { className: styles$4.cardTitle, children: "One-Time Broadcast" }),
-    /* @__PURE__ */ jsx("p", { className: styles$4.cardDescription, children: "Send a single message to your current list, like announcing a sale or newsletter." })
+    /* @__PURE__ */ jsx("div", { className: styles$5.iconWrapper, children: "📨" }),
+    /* @__PURE__ */ jsx("h3", { className: styles$5.cardTitle, children: "One-Time Broadcast" }),
+    /* @__PURE__ */ jsx("p", { className: styles$5.cardDescription, children: "Send a single message to your current list, like announcing a sale or newsletter." })
   ] });
 };
 const PatronEntersList = () => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$4.comingSoonBadge, children: "Coming Soon" }),
-    /* @__PURE__ */ jsx("div", { className: styles$4.iconWrapper, children: "✉️" }),
-    /* @__PURE__ */ jsx("h3", { className: styles$4.cardTitle, children: "Patron Enters a List" }),
-    /* @__PURE__ */ jsx("p", { className: styles$4.cardDescription, children: "Send whenever someone becomes qualified, like welcoming new subscribers who meet specific criteria." })
+    /* @__PURE__ */ jsx("div", { className: styles$5.comingSoonBadge, children: "Coming Soon" }),
+    /* @__PURE__ */ jsx("div", { className: styles$5.iconWrapper, children: "✉️" }),
+    /* @__PURE__ */ jsx("h3", { className: styles$5.cardTitle, children: "Patron Enters a List" }),
+    /* @__PURE__ */ jsx("p", { className: styles$5.cardDescription, children: "Send whenever someone becomes qualified, like welcoming new subscribers who meet specific criteria." })
   ] });
 };
 const DateMilestone = () => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$4.comingSoonBadge, children: "Coming Soon" }),
-    /* @__PURE__ */ jsx("div", { className: styles$4.iconWrapper, children: "📅" }),
-    /* @__PURE__ */ jsx("h3", { className: styles$4.cardTitle, children: "Date Milestone" }),
-    /* @__PURE__ */ jsx("p", { className: styles$4.cardDescription, children: "Schedules around specific dates in your contact data, like birthdays, membership anniversaries, or renewal dates." })
+    /* @__PURE__ */ jsx("div", { className: styles$5.comingSoonBadge, children: "Coming Soon" }),
+    /* @__PURE__ */ jsx("div", { className: styles$5.iconWrapper, children: "📅" }),
+    /* @__PURE__ */ jsx("h3", { className: styles$5.cardTitle, children: "Date Milestone" }),
+    /* @__PURE__ */ jsx("p", { className: styles$5.cardDescription, children: "Schedules around specific dates in your contact data, like birthdays, membership anniversaries, or renewal dates." })
   ] });
 };
 const RealtimeActivity = () => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$4.comingSoonBadge, children: "Coming Soon" }),
-    /* @__PURE__ */ jsx("div", { className: styles$4.iconWrapper, children: "📬" }),
-    /* @__PURE__ */ jsx("h3", { className: styles$4.cardTitle, children: "Realtime Activity" }),
-    /* @__PURE__ */ jsx("p", { className: styles$4.cardDescription, children: "Responds to immediate actions your contacts take, like abandoned carts, form submissions, or appointment bookings." })
+    /* @__PURE__ */ jsx("div", { className: styles$5.comingSoonBadge, children: "Coming Soon" }),
+    /* @__PURE__ */ jsx("div", { className: styles$5.iconWrapper, children: "📬" }),
+    /* @__PURE__ */ jsx("h3", { className: styles$5.cardTitle, children: "Realtime Activity" }),
+    /* @__PURE__ */ jsx("p", { className: styles$5.cardDescription, children: "Responds to immediate actions your contacts take, like abandoned carts, form submissions, or appointment bookings." })
   ] });
 };
-const styles$3 = {
+const styles$4 = {
   title: "text-3xl mb-8",
   grid: "grid grid-cols-2 gap-6",
   card: "relative p-6 rounded-lg border border-gray-200 cursor-pointer flex flex-col items-center text-center hover:border-indigo-500 transition-colors",
@@ -21929,20 +22024,20 @@ const ChooseAutomationType = ({ onNext }) => {
   const onClick = (type) => {
     onNext(type);
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles$3.container, children: [
-    /* @__PURE__ */ jsx("h1", { className: styles$3.title, children: "Choose Your Automation Type" }),
-    /* @__PURE__ */ jsxs("div", { className: styles$3.grid, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$4.container, children: [
+    /* @__PURE__ */ jsx("h1", { className: styles$4.title, children: "Choose Your Automation Type" }),
+    /* @__PURE__ */ jsxs("div", { className: styles$4.grid, children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: styles$3.card,
+          className: styles$4.card,
           onClick: () => onClick(AutomationTriggerType.ONE_TIME),
           children: /* @__PURE__ */ jsx(OneTimeBroadcast, {})
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: `${styles$3.card} ${styles$3.cardDisabled}`, children: /* @__PURE__ */ jsx(PatronEntersList, {}) }),
-      /* @__PURE__ */ jsx("div", { className: `${styles$3.card} ${styles$3.cardDisabled}`, children: /* @__PURE__ */ jsx(DateMilestone, {}) }),
-      /* @__PURE__ */ jsx("div", { className: `${styles$3.card} ${styles$3.cardDisabled}`, children: /* @__PURE__ */ jsx(RealtimeActivity, {}) })
+      /* @__PURE__ */ jsx("div", { className: `${styles$4.card} ${styles$4.cardDisabled}`, children: /* @__PURE__ */ jsx(PatronEntersList, {}) }),
+      /* @__PURE__ */ jsx("div", { className: `${styles$4.card} ${styles$4.cardDisabled}`, children: /* @__PURE__ */ jsx(DateMilestone, {}) }),
+      /* @__PURE__ */ jsx("div", { className: `${styles$4.card} ${styles$4.cardDisabled}`, children: /* @__PURE__ */ jsx(RealtimeActivity, {}) })
     ] })
   ] });
 };
@@ -22060,7 +22155,7 @@ const CreateAutomationModal = ({
     });
   };
   if (isCreating || startedCreating) {
-    return /* @__PURE__ */ jsx("div", { className: styles$3.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Creating Automation", "Finishing up"] }) });
+    return /* @__PURE__ */ jsx("div", { className: styles$4.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Creating Automation", "Finishing up"] }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden", children: [
     /* @__PURE__ */ jsxs(AnimatePresence, { mode: "wait", children: [
@@ -22393,7 +22488,7 @@ const NameAndDescription = ({ nameAndDescriptionState, setNameAndDescriptionStat
     ] })
   ] }) });
 };
-const styles$2 = {
+const styles$3 = {
   container: "relative p-6 border border-gray-200 rounded-lg"
 };
 const SegmentBuilder = ({
@@ -22470,12 +22565,12 @@ const SegmentBuilder = ({
     });
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: styles$2.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Segment data", "Finishing up"] }) });
+    return /* @__PURE__ */ jsx("div", { className: styles$3.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Segment data", "Finishing up"] }) });
   }
   if (isCreating || startedCreating) {
-    return /* @__PURE__ */ jsx("div", { className: styles$2.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Creating Segment", "Finishing up"] }) });
+    return /* @__PURE__ */ jsx("div", { className: styles$3.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Creating Segment", "Finishing up"] }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: styles$2.container, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$3.container, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -22524,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}\``);
@@ -22547,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}\``);
@@ -23454,13 +23549,13 @@ const TableCell = React.forwardRef(({ className: className2, ...props }, ref) =>
   }
 ));
 TableCell.displayName = "TableCell";
-const styles$1 = {
+const styles$2 = {
   container: "flex flex-col items-center justify-center h-full"
 };
 const AutomationRecipients = ({ automationId }) => {
   const { recipients, isLoading, fetchError } = useGetBusinessAutomationRecipients(automationId);
   if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: styles$1.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Recipients", "Finishing up"] }) });
+    return /* @__PURE__ */ jsx("div", { className: styles$2.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Recipients", "Finishing up"] }) });
   }
   if (fetchError) {
     return /* @__PURE__ */ jsxs("div", { children: [
@@ -25040,36 +25135,36 @@ const cva = (base2, config) => (props) => {
   }, []);
   return cx(base2, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
 };
-const base = "reach-styles-module__base___RP4iu";
-const destructive = "reach-styles-module__destructive___BZSYi";
-const outline = "reach-styles-module__outline___bNcaI";
-const secondary = "reach-styles-module__secondary___osvqQ";
+const base$1 = "reach-styles-module__base___RP4iu";
+const destructive$1 = "reach-styles-module__destructive___BZSYi";
+const outline$1 = "reach-styles-module__outline___bNcaI";
+const secondary$1 = "reach-styles-module__secondary___osvqQ";
 const ghost = "reach-styles-module__ghost___uU77B";
 const link = "reach-styles-module__link___nSLOW";
-const styles = {
-  base,
+const styles$1 = {
+  base: base$1,
   "default": "reach-styles-module__default___pajjj",
-  destructive,
-  outline,
-  secondary,
+  destructive: destructive$1,
+  outline: outline$1,
+  secondary: secondary$1,
   ghost,
   link
 };
-const buttonVariants$1 = cva([styles.base, "debug-button"], {
+const buttonVariants = cva([styles$1.base], {
   variants: {
     variant: {
-      default: styles.default,
-      destructive: styles.destructive,
-      outline: styles.outline,
-      secondary: styles.secondary,
-      ghost: styles.ghost,
-      link: styles.link
+      default: styles$1.default,
+      destructive: styles$1.destructive,
+      outline: styles$1.outline,
+      secondary: styles$1.secondary,
+      ghost: styles$1.ghost,
+      link: styles$1.link
     },
     size: {
-      default: styles["size-default"],
-      sm: styles["size-sm"],
-      lg: styles["size-lg"],
-      icon: styles["size-icon"]
+      default: styles$1["size-default"],
+      sm: styles$1["size-sm"],
+      lg: styles$1["size-lg"],
+      icon: styles$1["size-icon"]
     }
   },
   defaultVariants: {
@@ -25083,7 +25178,7 @@ const Button$1 = React.forwardRef(
     return /* @__PURE__ */ jsx(
       Comp,
       {
-        className: cn$1(buttonVariants$1({ variant, size: size2, className: className2 })),
+        className: cn$1(buttonVariants({ variant, size: size2, className: className2 })),
         ref,
         ...props
       }
@@ -25316,7 +25411,7 @@ var FocusScope = React.forwardRef((props, forwardedRef) => {
     onUnmountAutoFocus: onUnmountAutoFocusProp,
     ...scopeProps
   } = props;
-  const [container, setContainer] = React.useState(null);
+  const [container2, setContainer] = React.useState(null);
   const onMountAutoFocus = useCallbackRef$1(onMountAutoFocusProp);
   const onUnmountAutoFocus = useCallbackRef$1(onUnmountAutoFocusProp);
   const lastFocusedElementRef = React.useRef(null);
@@ -25333,69 +25428,69 @@ var FocusScope = React.forwardRef((props, forwardedRef) => {
   React.useEffect(() => {
     if (trapped) {
       let handleFocusIn2 = function(event) {
-        if (focusScope.paused || !container) return;
+        if (focusScope.paused || !container2) return;
         const target = event.target;
-        if (container.contains(target)) {
+        if (container2.contains(target)) {
           lastFocusedElementRef.current = target;
         } else {
           focus(lastFocusedElementRef.current, { select: true });
         }
       }, handleFocusOut2 = function(event) {
-        if (focusScope.paused || !container) return;
+        if (focusScope.paused || !container2) return;
         const relatedTarget = event.relatedTarget;
         if (relatedTarget === null) return;
-        if (!container.contains(relatedTarget)) {
+        if (!container2.contains(relatedTarget)) {
           focus(lastFocusedElementRef.current, { select: true });
         }
       }, handleMutations2 = function(mutations) {
         const focusedElement = document.activeElement;
         if (focusedElement !== document.body) return;
         for (const mutation of mutations) {
-          if (mutation.removedNodes.length > 0) focus(container);
+          if (mutation.removedNodes.length > 0) focus(container2);
         }
       };
       document.addEventListener("focusin", handleFocusIn2);
       document.addEventListener("focusout", handleFocusOut2);
       const mutationObserver = new MutationObserver(handleMutations2);
-      if (container) mutationObserver.observe(container, { childList: true, subtree: true });
+      if (container2) mutationObserver.observe(container2, { childList: true, subtree: true });
       return () => {
         document.removeEventListener("focusin", handleFocusIn2);
         document.removeEventListener("focusout", handleFocusOut2);
         mutationObserver.disconnect();
       };
     }
-  }, [trapped, container, focusScope.paused]);
+  }, [trapped, container2, focusScope.paused]);
   React.useEffect(() => {
-    if (container) {
+    if (container2) {
       focusScopesStack.add(focusScope);
       const previouslyFocusedElement = document.activeElement;
-      const hasFocusedCandidate = container.contains(previouslyFocusedElement);
+      const hasFocusedCandidate = container2.contains(previouslyFocusedElement);
       if (!hasFocusedCandidate) {
         const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
-        container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
-        container.dispatchEvent(mountEvent);
+        container2.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+        container2.dispatchEvent(mountEvent);
         if (!mountEvent.defaultPrevented) {
-          focusFirst$1(removeLinks(getTabbableCandidates(container)), { select: true });
+          focusFirst$1(removeLinks(getTabbableCandidates(container2)), { select: true });
           if (document.activeElement === previouslyFocusedElement) {
-            focus(container);
+            focus(container2);
           }
         }
       }
       return () => {
-        container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+        container2.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
         setTimeout(() => {
           const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
-          container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
-          container.dispatchEvent(unmountEvent);
+          container2.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+          container2.dispatchEvent(unmountEvent);
           if (!unmountEvent.defaultPrevented) {
             focus(previouslyFocusedElement ?? document.body, { select: true });
           }
-          container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+          container2.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
           focusScopesStack.remove(focusScope);
         }, 0);
       };
     }
-  }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
+  }, [container2, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
   const handleKeyDown = React.useCallback(
     (event) => {
       if (!loop && !trapped) return;
@@ -25403,11 +25498,11 @@ var FocusScope = React.forwardRef((props, forwardedRef) => {
       const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
       const focusedElement = document.activeElement;
       if (isTabKey && focusedElement) {
-        const container2 = event.currentTarget;
-        const [first, last] = getTabbableEdges(container2);
+        const container22 = event.currentTarget;
+        const [first, last] = getTabbableEdges(container22);
         const hasTabbableElementsInside = first && last;
         if (!hasTabbableElementsInside) {
-          if (focusedElement === container2) event.preventDefault();
+          if (focusedElement === container22) event.preventDefault();
         } else {
           if (!event.shiftKey && focusedElement === last) {
             event.preventDefault();
@@ -25431,15 +25526,15 @@ function focusFirst$1(candidates, { select = false } = {}) {
     if (document.activeElement !== previouslyFocusedElement) return;
   }
 }
-function getTabbableEdges(container) {
-  const candidates = getTabbableCandidates(container);
-  const first = findVisible(candidates, container);
-  const last = findVisible(candidates.reverse(), container);
+function getTabbableEdges(container2) {
+  const candidates = getTabbableCandidates(container2);
+  const first = findVisible(candidates, container2);
+  const last = findVisible(candidates.reverse(), container2);
   return [first, last];
 }
-function getTabbableCandidates(container) {
+function getTabbableCandidates(container2) {
   const nodes = [];
-  const walker2 = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+  const walker2 = document.createTreeWalker(container2, NodeFilter.SHOW_ELEMENT, {
     acceptNode: (node) => {
       const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
       if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
@@ -25449,9 +25544,9 @@ function getTabbableCandidates(container) {
   while (walker2.nextNode()) nodes.push(walker2.currentNode);
   return nodes;
 }
-function findVisible(elements, container) {
+function findVisible(elements, container2) {
   for (const element of elements) {
-    if (!isHidden(element, { upTo: container })) return element;
+    if (!isHidden(element, { upTo: container2 })) return element;
   }
 }
 function isHidden(node, { upTo }) {
@@ -25508,8 +25603,8 @@ var Portal$4 = React.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = React.useState(false);
   useLayoutEffect2(() => setMounted(true), []);
-  const container = containerProp || mounted && globalThis?.document?.body;
-  return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+  const container2 = containerProp || mounted && globalThis?.document?.body;
+  return container2 ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container2) : null;
 });
 Portal$4.displayName = PORTAL_NAME$5;
 var count = 0;
@@ -26374,9 +26469,9 @@ var [PortalProvider$2, usePortalContext$2] = createDialogContext(PORTAL_NAME$4,
   forceMount: void 0
 });
 var DialogPortal$1 = (props) => {
-  const { __scopeDialog, forceMount, children: children2, container } = props;
+  const { __scopeDialog, forceMount, children: children2, container: container2 } = props;
   const context = useDialogContext(PORTAL_NAME$4, __scopeDialog);
-  return /* @__PURE__ */ jsx(PortalProvider$2, { scope: __scopeDialog, forceMount, children: React.Children.map(children2, (child) => /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$4, { asChild: true, container, children: child }) })) });
+  return /* @__PURE__ */ jsx(PortalProvider$2, { scope: __scopeDialog, forceMount, children: React.Children.map(children2, (child) => /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$4, { asChild: true, container: container2, children: child }) })) });
 };
 DialogPortal$1.displayName = PORTAL_NAME$4;
 var OVERLAY_NAME = "DialogOverlay";
@@ -29113,9 +29208,9 @@ var [PortalProvider$1, usePortalContext$1] = createMenuContext(PORTAL_NAME$3, {
   forceMount: void 0
 });
 var MenuPortal = (props) => {
-  const { __scopeMenu, forceMount, children: children2, container } = props;
+  const { __scopeMenu, forceMount, children: children2, container: container2 } = props;
   const context = useMenuContext(PORTAL_NAME$3, __scopeMenu);
-  return /* @__PURE__ */ jsx(PortalProvider$1, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$4, { asChild: true, container, children: children2 }) }) });
+  return /* @__PURE__ */ jsx(PortalProvider$1, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$4, { asChild: true, container: container2, children: children2 }) }) });
 };
 MenuPortal.displayName = PORTAL_NAME$3;
 var CONTENT_NAME$3 = "MenuContent";
@@ -35323,31 +35418,6 @@ function RootProvider(props) {
 function DayPicker(props) {
   return jsx(RootProvider, __assign({}, props, { children: jsx(Root, { initialProps: props }) }));
 }
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
 function Calendar({
   className: className2,
   classNames,
@@ -35487,9 +35557,9 @@ var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME, {
   forceMount: void 0
 });
 var PopoverPortal = (props) => {
-  const { __scopePopover, forceMount, children: children2, container } = props;
+  const { __scopePopover, forceMount, children: children2, container: container2 } = props;
   const context = usePopoverContext(PORTAL_NAME, __scopePopover);
-  return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopePopover, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$4, { asChild: true, container, children: children2 }) }) });
+  return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopePopover, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$4, { asChild: true, container: container2, children: children2 }) }) });
 };
 PopoverPortal.displayName = PORTAL_NAME;
 var CONTENT_NAME = "PopoverContent";
@@ -36546,61 +36616,76 @@ const EditAutomationPopup = ({
     ) })
   ] });
 };
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-        google: "border-transparent bg-blue-100 font-normal dark:bg-blue-900/30 text-blue-700 dark:text-blue-300",
-        date: "border-transparent bg-gray-200 font-normal dark:bg-gray-800 text-gray-700 dark:text-gray-300"
-      },
-      size: {
-        default: "px-2.5 py-0.5",
-        sm: "px-1.5 py-0.5 text-[10px]"
-      },
-      iconOnly: {
-        true: "w-5 h-5 p-0 justify-center",
-        false: ""
-      }
+const base = "reach-styles-module__base___eJmcH";
+const secondary = "reach-styles-module__secondary___H-ae8";
+const destructive = "reach-styles-module__destructive___JsRNh";
+const outline = "reach-styles-module__outline___9FFlV";
+const google = "reach-styles-module__google___7eHwU";
+const date = "reach-styles-module__date___gU3Tt";
+const container = "reach-styles-module__container___5PrOx";
+const styles = {
+  base,
+  "default": "reach-styles-module__default___8NuEB",
+  secondary,
+  destructive,
+  outline,
+  google,
+  date,
+  container
+};
+const badgeVariants = cva([styles.base], {
+  variants: {
+    variant: {
+      default: styles.default,
+      secondary: styles.secondary,
+      destructive: styles.destructive,
+      outline: styles.outline,
+      google: styles.google,
+      date: styles.date
     },
-    compoundVariants: [
+    size: {
+      default: styles["size-default"],
+      sm: styles["size-sm"]
+    },
+    iconOnly: {
+      true: styles["icon-only"],
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      iconOnly: true,
+      size: "sm",
+      class: styles["icon-only-sm"]
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+    iconOnly: false
+  }
+});
+const Badge = React.forwardRef(
+  ({ className: className2, variant, size: size2, iconOnly, truncate, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        iconOnly: true,
-        size: "sm",
-        class: "w-4 h-4"
+        ref,
+        className: cn(
+          badgeVariants({ variant, size: size2, iconOnly }),
+          truncate && "max-w-[90px]",
+          className2
+        ),
+        ...props
       }
-    ],
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      iconOnly: false
-    }
+    );
   }
 );
-function Badge({
-  className: className2,
-  variant,
-  size: size2,
-  iconOnly,
-  truncate,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn$1(
-        badgeVariants({ variant, size: size2, iconOnly }),
-        truncate && "max-w-[90px]",
-        className2
-      ),
-      ...props
-    }
-  );
-}
+Badge.displayName = "Badge";
+const BadgeContainer = React.forwardRef(({ className: className2, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(styles.container, className2), ...props });
+});
+BadgeContainer.displayName = "BadgeContainer";
 const StatusBadge = ({
   status
 }) => {
@@ -36733,7 +36818,7 @@ const ViewAutomationModal = ({
   const mergedIconDefinitions = mergeIconDefinitions(iconDefinitions);
   const { automation, isFetching, isLoading, fetchError } = useGetBusinessAutomation(AUTOMATION_ID);
   if (!automation && (isFetching || isLoading)) {
-    return /* @__PURE__ */ jsx("div", { className: styles$3.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Automation data", "Finishing up"] }) });
+    return /* @__PURE__ */ jsx("div", { className: styles$4.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Automation data", "Finishing up"] }) });
   }
   if (fetchError) {
     return /* @__PURE__ */ jsxs("div", { children: [
@@ -36744,7 +36829,7 @@ const ViewAutomationModal = ({
   if (!automation) {
     return /* @__PURE__ */ jsx("div", { children: "No automation found" });
   }
-  return /* @__PURE__ */ jsxs("div", { className: styles$3.container, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$4.container, children: [
     /* @__PURE__ */ jsx(
       ViewAutomationHeader,
       {