@embedreach/components 0.2.9 → 0.2.11

package/dist/chunks/index.js

@@ -6230,21 +6230,21 @@ function H$1(e4, t3) {
   var n2 = (65535 & e4) + (65535 & t3);
   return (e4 >> 16) + (t3 >> 16) + (n2 >> 16) << 16 | 65535 & n2;
 }
-function z(e4, t3, n2, r2, o2, i3) {
+function z$1(e4, t3, n2, r2, o2, i3) {
   return H$1((a4 = H$1(H$1(t3, e4), H$1(r2, i3))) << (s4 = o2) | a4 >>> 32 - s4, n2);
   var a4, s4;
 }
 function K$2(e4, t3, n2, r2, o2, i3, a4) {
-  return z(t3 & n2 | ~t3 & r2, e4, t3, o2, i3, a4);
+  return z$1(t3 & n2 | ~t3 & r2, e4, t3, o2, i3, a4);
 }
 function _(e4, t3, n2, r2, o2, i3, a4) {
-  return z(t3 & r2 | n2 & ~r2, e4, t3, o2, i3, a4);
+  return z$1(t3 & r2 | n2 & ~r2, e4, t3, o2, i3, a4);
 }
 function J$1(e4, t3, n2, r2, o2, i3, a4) {
-  return z(t3 ^ n2 ^ r2, e4, t3, o2, i3, a4);
+  return z$1(t3 ^ n2 ^ r2, e4, t3, o2, i3, a4);
 }
 function B$1(e4, t3, n2, r2, o2, i3, a4) {
-  return z(n2 ^ (t3 | ~r2), e4, t3, o2, i3, a4);
+  return z$1(n2 ^ (t3 | ~r2), e4, t3, o2, i3, a4);
 }
 var G$2 = M$1("v3", 48, function(e4) {
   if ("string" == typeof e4) {
@@ -6337,7 +6337,7 @@ var ee$1 = Object.freeze({ __proto__: null, v1: function(e4, t3, n2) {
   return parseInt(e4.substr(14, 1), 16);
 }, validate: L, stringify: F$1, parse: V });
 const te = ["debug", "info", "warn", "error", "none"];
-var ne = { commonBasicLogger: function(e4, t3) {
+var ne$1 = { commonBasicLogger: function(e4, t3) {
   if (e4 && e4.destination && "function" != typeof e4.destination) throw new Error("destination for basicLogger was set to a non-function");
   function n2(e5) {
     return function(t4) {
@@ -6450,7 +6450,7 @@ var ie = { bootstrapInvalid: function() {
 }, unknownOption: (e4) => 'Ignoring unknown config option "' + e4 + '"', contextNotSpecified: function() {
   return "No context specified." + oe$1;
 }, unrecoverableStreamError: (e4) => `Error on stream connection ${re$1(e4)}, giving up permanently`, wrongOptionType: (e4, t3, n2) => 'Config option "' + e4 + '" should be of type ' + t3 + ", got " + n2 + ", using default value", wrongOptionTypeBoolean: (e4, t3) => 'Config option "' + e4 + '" should be a boolean, got ' + t3 + ", converting to boolean" };
-const { validateLogger: ae } = ne, se = { baseUrl: { default: "https://app.launchdarkly.com" }, streamUrl: { default: "https://clientstream.launchdarkly.com" }, eventsUrl: { default: "https://events.launchdarkly.com" }, sendEvents: { default: true }, streaming: { type: "boolean" }, sendLDHeaders: { default: true }, requestHeaderTransform: { type: "function" }, sendEventsOnlyForVariation: { default: false }, useReport: { default: false }, evaluationReasons: { default: false }, eventCapacity: { default: 100, minimum: 1 }, flushInterval: { default: 2e3, minimum: 2e3 }, samplingInterval: { default: 0, minimum: 0 }, streamReconnectDelay: { default: 1e3, minimum: 0 }, allAttributesPrivate: { default: false }, privateAttributes: { default: [] }, bootstrap: { type: "string|object" }, diagnosticRecordingInterval: { default: 9e5, minimum: 2e3 }, diagnosticOptOut: { default: false }, wrapperName: { type: "string" }, wrapperVersion: { type: "string" }, stateProvider: { type: "object" }, application: { validator: function(e4, t3, n2) {
+const { validateLogger: ae } = ne$1, se = { baseUrl: { default: "https://app.launchdarkly.com" }, streamUrl: { default: "https://clientstream.launchdarkly.com" }, eventsUrl: { default: "https://events.launchdarkly.com" }, sendEvents: { default: true }, streaming: { type: "boolean" }, sendLDHeaders: { default: true }, requestHeaderTransform: { type: "function" }, sendEventsOnlyForVariation: { default: false }, useReport: { default: false }, evaluationReasons: { default: false }, eventCapacity: { default: 100, minimum: 1 }, flushInterval: { default: 2e3, minimum: 2e3 }, samplingInterval: { default: 0, minimum: 0 }, streamReconnectDelay: { default: 1e3, minimum: 0 }, allAttributesPrivate: { default: false }, privateAttributes: { default: [] }, bootstrap: { type: "string|object" }, diagnosticRecordingInterval: { default: 9e5, minimum: 2e3 }, diagnosticOptOut: { default: false }, wrapperName: { type: "string" }, wrapperVersion: { type: "string" }, stateProvider: { type: "object" }, application: { validator: function(e4, t3, n2) {
   const r2 = {};
   t3.id && (r2.id = le$1(`${e4}.id`, t3.id, n2));
   t3.version && (r2.version = le$1(`${e4}.version`, t3.version, n2));
@@ -6548,7 +6548,7 @@ var he$1 = function(e4, t3, n2) {
     });
   }, o2;
 };
-const { commonBasicLogger: ye$1 } = ne;
+const { commonBasicLogger: ye$1 } = ne$1;
 function we$1(e4) {
   return "string" == typeof e4 && "kind" !== e4 && e4.match(/^(\w|\.|-)+$/);
 }
@@ -7065,7 +7065,7 @@ var dt = function(e4, t3) {
     }, 1e3 * e4);
   });
 };
-const { commonBasicLogger: ft } = ne, { checkContext: gt } = ke$1, { InspectorTypes: pt, InspectorManager: mt } = ut, ht = "change", yt = "internal-change";
+const { commonBasicLogger: ft } = ne$1, { checkContext: gt } = ke$1, { InspectorTypes: pt, InspectorManager: mt } = ut, ht = "change", yt = "internal-change";
 var wt = { initialize: function(e4, t3, n2, r2, o2) {
   const i3 = function() {
     if (n2 && n2.logger) return n2.logger;
@@ -8255,7 +8255,10 @@ let D$1 = class D extends Component {
     return React__default.createElement(a4.Provider, { value: { flags: e4, flagKeyMap: r2, ldClient: n2, error: o2 } }, this.props.children);
   }
 };
-const oe = (e4) => {
+const ne = (e4) => {
+  const { flags: t3 } = useContext$1(u$1.reactContext);
+  return t3;
+}, oe = (e4) => {
   const { ldClient: t3 } = useContext$1(u$1.reactContext);
   return t3;
 };
@@ -13020,7 +13023,7 @@ const ToastClose = React.forwardRef(({ className: className2, ...props2 }, ref)
   {
     ref,
     className: cn$1(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className2
     ),
     "toast-close": "",
@@ -16421,7 +16424,7 @@ const account_settings$1 = "Account Settings";
 const manage_account_settings$1 = "Manage your account settings";
 const copy$1 = "Copy";
 const copied$1 = "Copied";
-const error$1 = "An error occurred";
+const error$2 = "An error occurred";
 const filter$2 = "Filter";
 const finishingUp$1 = "Finishing up...";
 const loading$1 = "Loading...";
@@ -16830,7 +16833,7 @@ const enCommon = {
   manage_account_settings: manage_account_settings$1,
   copy: copy$1,
   copied: copied$1,
-  error: error$1,
+  error: error$2,
   filter: filter$2,
   finishingUp: finishingUp$1,
   loading: loading$1,
@@ -16889,7 +16892,7 @@ const account_settings = "Configuración de cuenta";
 const manage_account_settings = "Configuración de tu cuenta";
 const copy = "Copiar";
 const copied = "Copiado";
-const error = "Se produjo un error";
+const error$1 = "Se produjo un error";
 const filter$1 = "Filtrar";
 const finishingUp = "Finalizando...";
 const loading = "Cargando...";
@@ -17298,7 +17301,7 @@ const esCommon = {
   manage_account_settings,
   copy,
   copied,
-  error,
+  error: error$1,
   filter: filter$1,
   finishingUp,
   loading,
@@ -19048,11 +19051,11 @@ var TraceAPI = (
       return this._instance;
     };
     TraceAPI2.prototype.setGlobalTracerProvider = function(provider) {
-      var success = registerGlobal(API_NAME, this._proxyTracerProvider, DiagAPI.instance());
-      if (success) {
+      var success2 = registerGlobal(API_NAME, this._proxyTracerProvider, DiagAPI.instance());
+      if (success2) {
         this._proxyTracerProvider.setDelegate(provider);
       }
-      return success;
+      return success2;
     };
     TraceAPI2.prototype.getTracerProvider = function() {
       return getGlobal(API_NAME) || this._proxyTracerProvider;
@@ -38205,7 +38208,7 @@ function PopChild({ children: children2, isPresent, anchorX }) {
   }, [isPresent]);
   return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size2, children: React.cloneElement(children2, { ref }) });
 }
-const PresenceChild = ({ children: children2, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX }) => {
+const PresenceChild = ({ children: children2, initial, isPresent, onExitComplete, custom: custom2, presenceAffectsLayout, mode, anchorX }) => {
   const presenceChildren = useConstant(newChildrenMap);
   const id2 = useId$6();
   const memoizedOnExitComplete = useCallback((childId) => {
@@ -38221,7 +38224,7 @@ const PresenceChild = ({ children: children2, initial, isPresent, onExitComplete
       id: id2,
       initial,
       isPresent,
-      custom,
+      custom: custom2,
       onExitComplete: memoizedOnExitComplete,
       register: (childId) => {
         presenceChildren.set(childId, false);
@@ -38273,7 +38276,7 @@ function onlyElements(children2) {
 }
 const isBrowser$1 = typeof window !== "undefined";
 const useIsomorphicLayoutEffect$4 = isBrowser$1 ? useLayoutEffect : useEffect;
-const AnimatePresence = ({ children: children2, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left" }) => {
+const AnimatePresence = ({ children: children2, custom: custom2, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left" }) => {
   const [isParentPresent, safeToRemove] = usePresence$2(propagate);
   const presentChildren = useMemo(() => onlyElements(children2), [children2]);
   const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
@@ -38339,14 +38342,14 @@ const AnimatePresence = ({ children: children2, custom, initial = true, onExitCo
         onExitComplete && onExitComplete();
       }
     };
-    return jsx(PresenceChild, { isPresent, initial: !isInitialRender.current || initial ? void 0 : false, custom, presenceAffectsLayout, mode, onExitComplete: isPresent ? void 0 : onExit, anchorX, children: child }, key);
+    return jsx(PresenceChild, { isPresent, initial: !isInitialRender.current || initial ? void 0 : false, custom: custom2, presenceAffectsLayout, mode, onExitComplete: isPresent ? void 0 : onExit, anchorX, children: child }, key);
   }) });
 };
 const noop = /* @__NO_SIDE_EFFECTS__ */ (any) => any;
-let warning$1 = noop;
+let warning$2 = noop;
 let invariant$1 = noop;
 if (process.env.NODE_ENV !== "production") {
-  warning$1 = (check, message2) => {
+  warning$2 = (check, message2) => {
     if (!check && typeof console !== "undefined") {
       console.warn(message2);
     }
@@ -38839,7 +38842,7 @@ function useStrictMode(configAndProps, preloadedFeatures) {
   const isStrict = useContext$1(LazyContext).strict;
   if (process.env.NODE_ENV !== "production" && preloadedFeatures && isStrict) {
     const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
-    configAndProps.ignoreStrict ? warning$1(false, strictMessage) : invariant$1(false, strictMessage);
+    configAndProps.ignoreStrict ? warning$2(false, strictMessage) : invariant$1(false, strictMessage);
   }
 }
 function getProjectionFunctionality(props2) {
@@ -39286,17 +39289,17 @@ function getValueState(visualElement) {
   });
   return state;
 }
-function resolveVariantFromProps(props2, definition, custom, visualElement) {
+function resolveVariantFromProps(props2, definition, custom2, visualElement) {
   if (typeof definition === "function") {
     const [current, velocity] = getValueState(visualElement);
-    definition = definition(custom !== void 0 ? custom : props2.custom, current, velocity);
+    definition = definition(custom2 !== void 0 ? custom2 : props2.custom, current, velocity);
   }
   if (typeof definition === "string") {
     definition = props2.variants && props2.variants[definition];
   }
   if (typeof definition === "function") {
     const [current, velocity] = getValueState(visualElement);
-    definition = definition(custom !== void 0 ? custom : props2.custom, current, velocity);
+    definition = definition(custom2 !== void 0 ? custom2 : props2.custom, current, velocity);
   }
   return definition;
 }
@@ -39501,9 +39504,9 @@ function createMotionComponentFactory(preloadedFeatures, createVisualElement) {
     return createRendererMotionComponent(config);
   };
 }
-function resolveVariant(visualElement, definition, custom) {
+function resolveVariant(visualElement, definition, custom2) {
   const props2 = visualElement.getProps();
-  return resolveVariantFromProps(props2, definition, custom !== void 0 ? custom : props2.custom, visualElement);
+  return resolveVariantFromProps(props2, definition, custom2 !== void 0 ? custom2 : props2.custom, visualElement);
 }
 const supportsScrollTimeline = /* @__PURE__ */ memo$1(() => window.ScrollTimeline !== void 0);
 class BaseGroupPlaybackControls {
@@ -39782,7 +39785,7 @@ function press(elementOrSelector, onPressStart, options = {}) {
       return;
     isPressing.add(element);
     const onPressEnd = onPressStart(element, startEvent);
-    const onPointerEnd = (endEvent, success) => {
+    const onPointerEnd = (endEvent, success2) => {
       window.removeEventListener("pointerup", onPointerUp);
       window.removeEventListener("pointercancel", onPointerCancel);
       if (!isValidPressEvent(endEvent) || !isPressing.has(element)) {
@@ -39790,7 +39793,7 @@ function press(elementOrSelector, onPressStart, options = {}) {
       }
       isPressing.delete(element);
       if (typeof onPressEnd === "function") {
-        onPressEnd(endEvent, { success });
+        onPressEnd(endEvent, { success: success2 });
       }
     };
     const onPointerUp = (upEvent) => {
@@ -40784,7 +40787,7 @@ function canAnimate(keyframes2, name, type, velocity) {
   const targetKeyframe = keyframes2[keyframes2.length - 1];
   const isOriginAnimatable = isAnimatable(originKeyframe, name);
   const isTargetAnimatable = isAnimatable(targetKeyframe, name);
-  warning$1(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+  warning$2(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
   if (!isOriginAnimatable || !isTargetAnimatable) {
     return false;
   }
@@ -40939,7 +40942,7 @@ const colorTypes = [hex, rgba, hsla];
 const getColorType = (v2) => colorTypes.find((type) => type.test(v2));
 function asRGBA(color2) {
   const type = getColorType(color2);
-  warning$1(Boolean(type), `'${color2}' is not an animatable color. Use the equivalent color code instead.`);
+  warning$2(Boolean(type), `'${color2}' is not an animatable color. Use the equivalent color code instead.`);
   if (!Boolean(type))
     return false;
   let model = type.parse(color2);
@@ -41038,7 +41041,7 @@ const mixComplex = (origin, target) => {
     }
     return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template2);
   } else {
-    warning$1(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
+    warning$2(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
     return mixImmediate(origin, target);
   }
 };
@@ -41087,7 +41090,7 @@ const safeMin = 1e-3;
 function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass }) {
   let envelope;
   let derivative;
-  warning$1(duration <= /* @__PURE__ */ secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
+  warning$2(duration <= /* @__PURE__ */ secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
   let dampingRatio = 1 - bounce;
   dampingRatio = clamp$2(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
   duration = clamp$2(springDefaults.minDuration, springDefaults.maxDuration, /* @__PURE__ */ millisecondsToSeconds(duration));
@@ -44852,7 +44855,7 @@ class PressGesture extends Feature {
       return;
     this.unmount = press(current, (_element, startEvent) => {
       handlePressEvent(this.node, startEvent, "Start");
-      return (endEvent, { success }) => handlePressEvent(this.node, endEvent, success ? "End" : "Cancel");
+      return (endEvent, { success: success2 }) => handlePressEvent(this.node, endEvent, success2 ? "End" : "Cancel");
     }, { useGlobalTarget: this.node.props.globalTapTarget });
   }
   unmount() {
@@ -46491,44 +46494,44 @@ const BlurDiv = ({ children: children2, className: className2 }) => {
     }
   );
 };
-const base$2 = "reach-styles-module__base___gfFyc";
+const base$3 = "reach-styles-module__base___gfFyc";
 const destructive$2 = "reach-styles-module__destructive___XjBvS";
 const outline$2 = "reach-styles-module__outline___gFp3i";
 const secondary$2 = "reach-styles-module__secondary___Pd-e3";
 const ghost = "reach-styles-module__ghost___GcnJq";
 const link = "reach-styles-module__link___EgS2H";
-const sizeDefault$1 = "reach-styles-module__sizeDefault___8kU5A";
-const sizeSm$1 = "reach-styles-module__sizeSm___zPIEh";
-const sizeLg = "reach-styles-module__sizeLg___D2G8z";
+const sizeDefault$2 = "reach-styles-module__sizeDefault___8kU5A";
+const sizeSm$2 = "reach-styles-module__sizeSm___zPIEh";
+const sizeLg$1 = "reach-styles-module__sizeLg___D2G8z";
 const sizeIcon = "reach-styles-module__sizeIcon___5XkYW";
-const styles$5 = {
-  base: base$2,
+const styles$6 = {
+  base: base$3,
   "default": "reach-styles-module__default___ny1h7",
   destructive: destructive$2,
   outline: outline$2,
   secondary: secondary$2,
   ghost,
   link,
-  sizeDefault: sizeDefault$1,
-  sizeSm: sizeSm$1,
-  sizeLg,
+  sizeDefault: sizeDefault$2,
+  sizeSm: sizeSm$2,
+  sizeLg: sizeLg$1,
   sizeIcon
 };
-const buttonVariants = cva([styles$5.base], {
+const buttonVariants = cva([styles$6.base], {
   variants: {
     variant: {
-      default: styles$5.default,
-      destructive: styles$5.destructive,
-      outline: styles$5.outline,
-      secondary: styles$5.secondary,
-      ghost: styles$5.ghost,
-      link: styles$5.link
+      default: styles$6.default,
+      destructive: styles$6.destructive,
+      outline: styles$6.outline,
+      secondary: styles$6.secondary,
+      ghost: styles$6.ghost,
+      link: styles$6.link
     },
     size: {
-      default: styles$5.sizeDefault,
-      sm: styles$5.sizeSm,
-      lg: styles$5.sizeLg,
-      icon: styles$5.sizeIcon
+      default: styles$6.sizeDefault,
+      sm: styles$6.sizeSm,
+      lg: styles$6.sizeLg,
+      icon: styles$6.sizeIcon
     }
   },
   defaultVariants: {
@@ -46671,7 +46674,7 @@ const IconDefinitions = {
   CommunicationIcon: Mail,
   WaitUntilNextFixedTimeIcon: Timer
 };
-const styles$4 = {
+const styles$5 = {
   title: "text-3xl mb-8",
   grid: "grid grid-cols-2 gap-6",
   container: "relative p-6  rounded-lg",
@@ -46684,9 +46687,9 @@ const ChooseAutomationType = ({ onNext }) => {
   const onClick = (type) => {
     onNext(type);
   };
-  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: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$5.container, children: [
+    /* @__PURE__ */ jsx("h1", { className: styles$5.title, children: "Choose Your Automation Type" }),
+    /* @__PURE__ */ jsxs("div", { className: styles$5.grid, children: [
       /* @__PURE__ */ jsx(
         BigSelector,
         {
@@ -46736,14 +46739,14 @@ const ChooseAutomationType = ({ onNext }) => {
     ] })
   ] });
 };
-const base$1 = "reach-styles-module__base___WFahB";
+const base$2 = "reach-styles-module__base___WFahB";
 const secondary$1 = "reach-styles-module__secondary___VQ4iH";
 const destructive$1 = "reach-styles-module__destructive___RLaRD";
 const outline$1 = "reach-styles-module__outline___L2VtW";
 const google = "reach-styles-module__google___HcEij";
 const date = "reach-styles-module__date___-6BC4";
-const sizeDefault = "reach-styles-module__sizeDefault___iGTp4";
-const sizeSm = "reach-styles-module__sizeSm___6T2oK";
+const sizeDefault$1 = "reach-styles-module__sizeDefault___iGTp4";
+const sizeSm$1 = "reach-styles-module__sizeSm___6T2oK";
 const iconOnly = "reach-styles-module__iconOnly___8vUSp";
 const iconOnlySm = "reach-styles-module__iconOnlySm___9ZKv9";
 const container = "reach-styles-module__container___6PQqs";
@@ -46756,16 +46759,16 @@ const statusRunning = "reach-styles-module__statusRunning___1iEjx";
 const segmentAllUsers = "reach-styles-module__segmentAllUsers___1aXpc";
 const segmentManaged = "reach-styles-module__segmentManaged___o0gOu";
 const segmentCustom = "reach-styles-module__segmentCustom___xc3lG";
-const styles$3 = {
-  base: base$1,
+const styles$4 = {
+  base: base$2,
   "default": "reach-styles-module__default___zeGU1",
   secondary: secondary$1,
   destructive: destructive$1,
   outline: outline$1,
   google,
   date,
-  sizeDefault,
-  sizeSm,
+  sizeDefault: sizeDefault$1,
+  sizeSm: sizeSm$1,
   iconOnly,
   iconOnlySm,
   container,
@@ -46779,31 +46782,31 @@ const styles$3 = {
   segmentManaged,
   segmentCustom
 };
-const badgeVariants = cva([styles$3.base], {
+const badgeVariants = cva([styles$4.base], {
   variants: {
     variant: {
-      default: styles$3.default,
-      secondary: styles$3.secondary,
-      destructive: styles$3.destructive,
-      outline: styles$3.outline,
-      google: styles$3.google,
-      date: styles$3.date,
-      statusActive: styles$3.statusActive,
-      statusCompleted: styles$3.statusCompleted,
-      statusDraft: styles$3.statusDraft,
-      statusDeactivated: styles$3.statusDeactivated,
-      statusFailed: styles$3.statusFailed,
-      statusRunning: styles$3.statusRunning,
-      segmentAllUsers: styles$3.segmentAllUsers,
-      segmentManaged: styles$3.segmentManaged,
-      segmentCustom: styles$3.segmentCustom
+      default: styles$4.default,
+      secondary: styles$4.secondary,
+      destructive: styles$4.destructive,
+      outline: styles$4.outline,
+      google: styles$4.google,
+      date: styles$4.date,
+      statusActive: styles$4.statusActive,
+      statusCompleted: styles$4.statusCompleted,
+      statusDraft: styles$4.statusDraft,
+      statusDeactivated: styles$4.statusDeactivated,
+      statusFailed: styles$4.statusFailed,
+      statusRunning: styles$4.statusRunning,
+      segmentAllUsers: styles$4.segmentAllUsers,
+      segmentManaged: styles$4.segmentManaged,
+      segmentCustom: styles$4.segmentCustom
     },
     size: {
-      default: styles$3.sizeDefault,
-      sm: styles$3.sizeSm
+      default: styles$4.sizeDefault,
+      sm: styles$4.sizeSm
     },
     iconOnly: {
-      true: styles$3.iconOnly,
+      true: styles$4.iconOnly,
       false: ""
     }
   },
@@ -46811,7 +46814,7 @@ const badgeVariants = cva([styles$3.base], {
     {
       iconOnly: true,
       size: "sm",
-      class: styles$3.iconOnlySm
+      class: styles$4.iconOnlySm
     }
   ],
   defaultVariants: {
@@ -46838,7 +46841,7 @@ const Badge = React.forwardRef(
 );
 Badge.displayName = "Badge";
 const BadgeContainer = React.forwardRef(({ className: className2, ...props2 }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles$3.container, className2), ...props2 });
+  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles$4.container, className2), ...props2 });
 });
 BadgeContainer.displayName = "BadgeContainer";
 const stepIndicatorContainer = "reach-styles-module__stepIndicatorContainer___FoKXB";
@@ -46850,7 +46853,7 @@ const minusIconInactive = "reach-styles-module__minusIconInactive___JtvVB";
 const label = "reach-styles-module__label___tiCMA";
 const labelActive = "reach-styles-module__labelActive___EXydD";
 const labelInactive = "reach-styles-module__labelInactive___g-J3r";
-const styles$2 = {
+const styles$3 = {
   stepIndicatorContainer,
   iconContainer,
   checkIcon,
@@ -46868,13 +46871,13 @@ const StepIndicator = ({
   onClick
 }) => {
   const Container = onClick ? "button" : "div";
-  return /* @__PURE__ */ jsxs(Container, { className: styles$2.stepIndicatorContainer, onClick, children: [
-    isCompleted ? /* @__PURE__ */ jsx("div", { className: styles$2.iconContainer, children: /* @__PURE__ */ jsx(Check, { className: styles$2.checkIcon }) }) : /* @__PURE__ */ jsx("div", { className: styles$2.iconContainer, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Container, { className: styles$3.stepIndicatorContainer, onClick, children: [
+    isCompleted ? /* @__PURE__ */ jsx("div", { className: styles$3.iconContainer, children: /* @__PURE__ */ jsx(Check, { className: styles$3.checkIcon }) }) : /* @__PURE__ */ jsx("div", { className: styles$3.iconContainer, children: /* @__PURE__ */ jsx(
       Minus,
       {
         className: cn$1(
-          styles$2.minusIcon,
-          isActive ? styles$2.minusIconActive : styles$2.minusIconInactive
+          styles$3.minusIcon,
+          isActive ? styles$3.minusIconActive : styles$3.minusIconInactive
         )
       }
     ) }),
@@ -46882,8 +46885,8 @@ const StepIndicator = ({
       "span",
       {
         className: cn$1(
-          styles$2.label,
-          isActive ? styles$2.labelActive : styles$2.labelInactive
+          styles$3.label,
+          isActive ? styles$3.labelActive : styles$3.labelInactive
         ),
         children: label2
       }
@@ -54546,7 +54549,7 @@ function TanstackTable({
     )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results found" }) }) })
   ] });
   const TableSkeleton = () => /* @__PURE__ */ jsx("div", { className: "h-full w-full flex items-center justify-center", children: /* @__PURE__ */ jsx(BasicLoader, {}) });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full border rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full border rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-3 py-4 px-2 sticky top-0 z-20 bg-primary/5 border-b rounded-t-md md:flex-row md:items-center md:justify-between", children: [
       /* @__PURE__ */ jsx("div", { className: "w-full md:w-1/4", children: /* @__PURE__ */ jsx(
         Input,
@@ -54773,7 +54776,7 @@ function createMemoryHistory(options = {}) {
       state,
       key
     );
-    warning(
+    warning$1(
       location2.pathname.charAt(0) === "/",
       `relative pathnames are not supported in memory history: ${JSON.stringify(
         to
@@ -54846,7 +54849,7 @@ function invariant(value, message2) {
     throw new Error(message2);
   }
 }
-function warning(cond, message2) {
+function warning$1(cond, message2) {
   if (!cond) {
     if (typeof console !== "undefined") console.warn(message2);
     try {
@@ -55118,7 +55121,7 @@ function matchPath(pattern, pathname) {
   };
 }
 function compilePath(path2, caseSensitive = false, end = true) {
-  warning(
+  warning$1(
     path2 === "*" || !path2.endsWith("*") || path2.endsWith("/*"),
     `Route path "${path2}" will be treated as if it were "${path2.replace(/\*$/, "/*")}" because the \`*\` character must always follow a \`/\` in the pattern. To get rid of this warning, please change the route path to "${path2.replace(/\*$/, "/*")}".`
   );
@@ -55145,7 +55148,7 @@ function decodePath(value) {
   try {
     return value.split("/").map((v2) => decodeURIComponent(v2).replace(/\//g, "%2F")).join("/");
   } catch (error2) {
-    warning(
+    warning$1(
       false,
       `The URL path "${value}" could not be decoded because it is a malformed URL segment. This is probably due to a bad percent encoding (${error2}).`
     );
@@ -55356,7 +55359,7 @@ function useNavigateUnstable() {
   });
   let navigate = React.useCallback(
     (to, options = {}) => {
-      warning(activeRef.current, navigateEffectWarning);
+      warning$1(activeRef.current, navigateEffectWarning);
       if (!activeRef.current) return;
       if (typeof to === "number") {
         navigator2.go(to);
@@ -55445,11 +55448,11 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
   }
   let matches = !isStatic && dataRouterState && dataRouterState.matches && dataRouterState.matches.length > 0 ? dataRouterState.matches : matchRoutes(routes, { pathname: remainingPathname });
   {
-    warning(
+    warning$1(
       parentRoute || matches != null,
       `No routes matched location "${location2.pathname}${location2.search}${location2.hash}" `
     );
-    warning(
+    warning$1(
       matches == null || matches[matches.length - 1].route.element !== void 0 || matches[matches.length - 1].route.Component !== void 0 || matches[matches.length - 1].route.lazy !== void 0,
       `Matched leaf route at location "${location2.pathname}${location2.search}${location2.hash}" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`
     );
@@ -55723,7 +55726,7 @@ function useNavigateStable() {
   });
   let navigate = React.useCallback(
     async (to, options = {}) => {
-      warning(activeRef.current, navigateEffectWarning);
+      warning$1(activeRef.current, navigateEffectWarning);
       if (!activeRef.current) return;
       if (typeof to === "number") {
         router.navigate(to);
@@ -55739,7 +55742,7 @@ var alreadyWarned = {};
 function warningOnce(key, cond, message2) {
   if (!cond && !alreadyWarned[key]) {
     alreadyWarned[key] = true;
-    warning(false, message2);
+    warning$1(false, message2);
   }
 }
 React.memo(DataRoutes);
@@ -55835,7 +55838,7 @@ function Router({
       navigationType
     };
   }, [basename, pathname, search, hash, state, key, navigationType]);
-  warning(
+  warning$1(
     locationContext != null,
     `<Router basename="${basename}"> is not able to match the URL "${pathname}${search}${hash}" because it does not start with the basename, so the <Router> won't render anything.`
   );
@@ -55912,7 +55915,7 @@ var supportedFormEncTypes = /* @__PURE__ */ new Set([
 ]);
 function getFormEncType(encType) {
   if (encType != null && !supportedFormEncTypes.has(encType)) {
-    warning(
+    warning$1(
       false,
       `"${encType}" is not a valid \`encType\` for \`<Form>\`/\`<fetcher.Form>\` and will default to "${defaultEncType}"`
     );
@@ -56391,7 +56394,7 @@ var Link = React.forwardRef(
             isExternal = true;
           }
         } catch (e4) {
-          warning(
+          warning$1(
             false,
             `<Link to="${to}"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.`
           );
@@ -56602,7 +56605,7 @@ function useLinkClickHandler(to, {
   );
 }
 function useSearchParams(defaultInit) {
-  warning(
+  warning$1(
     typeof URLSearchParams !== "undefined",
     `You cannot use the \`useSearchParams\` hook in a browser that does not support the URLSearchParams API. If you need to support Internet Explorer 11, we recommend you load a polyfill such as https://github.com/ungap/url-search-params.`
   );
@@ -57979,20 +57982,20 @@ const STATUS_DISPLAY = {
   [AutomationStatus.DEACTIVATED]: "Deactivated"
 };
 const STATUS_COLORS = {
-  [AutomationStatus.DRAFT]: "bg-gray-400",
-  [AutomationStatus.ACTIVE]: "bg-green-500",
-  [AutomationStatus.RUNNING]: "bg-blue-500",
-  [AutomationStatus.COMPLETED]: "bg-purple-500",
+  [AutomationStatus.DRAFT]: "bg-gray-500",
+  [AutomationStatus.ACTIVE]: "bg-blue-500",
+  [AutomationStatus.RUNNING]: "bg-yellow-500",
+  [AutomationStatus.COMPLETED]: "bg-green-500",
   [AutomationStatus.FAILED]: "bg-red-500",
-  [AutomationStatus.DEACTIVATED]: "bg-gray-500"
+  [AutomationStatus.DEACTIVATED]: "bg-red-500"
 };
 const STATUS_BG_COLORS = {
-  [AutomationStatus.DRAFT]: "bg-gray-100 text-gray-900 hover:bg-gray-200",
-  [AutomationStatus.ACTIVE]: "bg-green-100 text-green-900 hover:bg-green-200",
-  [AutomationStatus.RUNNING]: "bg-blue-100 text-blue-900 hover:bg-blue-200",
-  [AutomationStatus.COMPLETED]: "bg-purple-100 text-purple-900 hover:bg-purple-200",
-  [AutomationStatus.FAILED]: "bg-red-100 text-red-900 hover:bg-red-200",
-  [AutomationStatus.DEACTIVATED]: "bg-gray-100 text-gray-700 hover:bg-gray-200"
+  [AutomationStatus.DRAFT]: "bg-gray-100 text-gray-700 px-2 py-1",
+  [AutomationStatus.ACTIVE]: "bg-blue-100 text-blue-700 px-2 py-1",
+  [AutomationStatus.RUNNING]: "bg-yellow-100 text-yellow-700 px-2 py-1",
+  [AutomationStatus.COMPLETED]: "bg-green-100 text-green-700 px-2 py-1",
+  [AutomationStatus.FAILED]: "bg-red-100 text-red-700 px-2 py-1",
+  [AutomationStatus.DEACTIVATED]: "bg-red-100 text-red-700 px-2 py-1"
 };
 const STATUS_EXPLANATIONS = {
   [AutomationStatus.DRAFT]: `Draft ${t$1("engage:automation")?.toLowerCase()} can be activated or deactivated`,
@@ -60349,13 +60352,7 @@ const InfoTooltip = ({ title: title2, alertText, Icon: Icon2 = Info, onClick, as
     }
   };
   return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild, children: /* @__PURE__ */ jsx(
-      Icon2,
-      {
-        className: "h-3.5 w-3.5 cursor-pointer transition-colors",
-        onClick: handleClick
-      }
-    ) }),
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild, onClick: handleClick, children: /* @__PURE__ */ jsx(Icon2, { className: "h-3.5 w-3.5 cursor-pointer transition-colors" }) }),
     /* @__PURE__ */ jsx(TooltipContent, { className: "text-left", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-2 max-w-[300px]", children: [
       alertText && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(AlertIcon, {}),
@@ -65449,9 +65446,9 @@ const EditCampaignContentDialog = ({ open, onOpenChange }) => {
 };
 const MacOSWindowButtons = () => {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-[#FF605C] border border-zinc-300 shadow-sm" }),
-    /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-[#FFBD44] border border-zinc-300 shadow-sm" }),
-    /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-[#00CA4E] border border-zinc-300 shadow-sm" })
+    /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-zinc-300 border border-zinc-300 shadow-sm" }),
+    /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-zinc-300 border border-zinc-300 shadow-sm" }),
+    /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-zinc-300 border border-zinc-300 shadow-sm" })
   ] });
 };
 const AutomationEditorPreviewContainer = ({ children: children2, actionButtons }) => {
@@ -65509,7 +65506,7 @@ const EmailDetailsPreview = () => {
   const subject = communicationGroup.emailSubject;
   const previewText = communicationGroup.emailPreviewText;
   const fromName = emailChannelSender?.channelSenderMetadata.emailFromName;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground leading-none", children: "From" }),
       /* @__PURE__ */ jsxs("div", { className: "text-base font-medium", children: [
@@ -66169,15 +66166,15 @@ const AutomationEditorTabs = ({
 };
 const h2 = "reach-styles-module__h2___J-48W";
 const minorText = "reach-styles-module__minorText___1TEN6";
-const styles$1 = {
+const styles$2 = {
   h2,
   minorText
 };
 const H2 = ({ children: children2, className: className2 }) => {
-  return /* @__PURE__ */ jsx("h2", { className: cn$1(styles$1.h2, className2), children: children2 });
+  return /* @__PURE__ */ jsx("h2", { className: cn$1(styles$2.h2, className2), children: children2 });
 };
 const MinorText = ({ children: children2, className: className2 }) => {
-  return /* @__PURE__ */ jsx("p", { className: cn$1(styles$1.minorText, className2), children: children2 });
+  return /* @__PURE__ */ jsx("p", { className: cn$1(styles$2.minorText, className2), children: children2 });
 };
 const MainPageWrapper = ({ title: title2, children: children2, headerActions }) => {
   return /* @__PURE__ */ jsxs("div", { className: "max-w-[1000px] mx-auto w-full flex-1 flex flex-col gap-4 pt-4", children: [
@@ -67319,7 +67316,7 @@ var formatters$1 = {
     }
   },
   // Timezone (specific non-location)
-  z: function z2(date2, token, _localize, options) {
+  z: function z(date2, token, _localize, options) {
     var originalDate = options._originalDate || date2;
     var timezoneOffset = originalDate.getTimezoneOffset();
     switch (token) {
@@ -73477,20 +73474,20 @@ const OneTimeWizardWrapper = ({ children: children2, actionId }) => {
 };
 const OneTimeBroadcast = () => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$4.iconWrapper, children: /* @__PURE__ */ jsx(IconDefinitions.OneTimeBroadcast, {}) }),
-    /* @__PURE__ */ jsxs("h3", { className: styles$4.cardTitle, children: [
+    /* @__PURE__ */ jsx("div", { className: styles$5.iconWrapper, children: /* @__PURE__ */ jsx(IconDefinitions.OneTimeBroadcast, {}) }),
+    /* @__PURE__ */ jsxs("h3", { className: styles$5.cardTitle, children: [
       t$1("engage: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("p", { className: styles$5.cardDescription, children: "Send a single message to your current list, like announcing a sale or newsletter." })
   ] });
 };
 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(IconDefinitions.RealtimeActivity, {}) }),
-    /* @__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(IconDefinitions.RealtimeActivity, {}) }),
+    /* @__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 SetAutomationNameAndDescription = ({
@@ -73685,7 +73682,7 @@ const CreateAutomationModal = ({
     });
   };
   if (isCreating || startedCreating) {
-    return /* @__PURE__ */ jsx("div", { className: styles$4.container, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: styles$5.container, children: /* @__PURE__ */ jsx(
       BasicLoader,
       {
         text: [`Creating ${t$1("engage:one_time")}`, "Finishing up"]
@@ -73887,7 +73884,7 @@ const formatCurrency = (amount) => {
     maximumFractionDigits: 2
   }).format(num);
 };
-const base = "reach-styles-module__base___zJcoE";
+const base$1 = "reach-styles-module__base___zJcoE";
 const destructive = "reach-styles-module__destructive___5EWhN";
 const outline = "reach-styles-module__outline___gj9sC";
 const secondary = "reach-styles-module__secondary___cN5Wj";
@@ -73896,8 +73893,8 @@ const title = "reach-styles-module__title___n1hA9";
 const description = "reach-styles-module__description___EvXM-";
 const content = "reach-styles-module__content___okv68";
 const footer = "reach-styles-module__footer___YA4U4";
-const styles = {
-  base,
+const styles$1 = {
+  base: base$1,
   "default": "reach-styles-module__default___88Q0d",
   destructive,
   outline,
@@ -73908,13 +73905,13 @@ const styles = {
   content,
   footer
 };
-const cardVariants = cva(styles.base, {
+const cardVariants = cva(styles$1.base, {
   variants: {
     variant: {
-      default: styles.default,
-      destructive: styles.destructive,
-      outline: styles.outline,
-      secondary: styles.secondary
+      default: styles$1.default,
+      destructive: styles$1.destructive,
+      outline: styles$1.outline,
+      secondary: styles$1.secondary
     }
   },
   defaultVariants: {
@@ -73934,15 +73931,15 @@ const Card = React.forwardRef(
   }
 );
 Card.displayName = "Card";
-const CardHeader = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles.header, className2), ...props2 }));
+const CardHeader = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles$1.header, className2), ...props2 }));
 CardHeader.displayName = "CardHeader";
-const CardTitle = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles.title, className2), ...props2 }));
+const CardTitle = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles$1.title, className2), ...props2 }));
 CardTitle.displayName = "CardTitle";
-const CardDescription = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles.description, className2), ...props2 }));
+const CardDescription = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles$1.description, className2), ...props2 }));
 CardDescription.displayName = "CardDescription";
-const CardContent = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles.content, className2), ...props2 }));
+const CardContent = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles$1.content, className2), ...props2 }));
 CardContent.displayName = "CardContent";
-const CardFooter = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles.footer, className2), ...props2 }));
+const CardFooter = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles$1.footer, className2), ...props2 }));
 CardFooter.displayName = "CardFooter";
 const StatCard = ({
   Icon: Icon2,
@@ -74410,7 +74407,7 @@ const AutoParseConfirmWebsite = ({ setAutoParse, onBrandSettingsGenerated, onFor
         exit: { opacity: 0 },
         className: "flex-1 h-full",
         children: /* @__PURE__ */ jsx(
-          BrandSettingsModal,
+          BrandSettings,
           {
             initialBrandSettings: brandSettings,
             onSave: handleUpdateBrandSettings,
@@ -74642,7 +74639,7 @@ const AutoParseConfirmWebsite = ({ setAutoParse, onBrandSettingsGenerated, onFor
   ] });
 };
 const DEFAULT_COLORS = ["#a91919", "#2563eb", "#16a34a", "#f59e0b", "#6d28d9"];
-const BrandSettingsModal = ({ initialBrandSettings, onSave, onBack, showAutoParseButton = true }) => {
+const BrandSettings = ({ initialBrandSettings, onSave, onBack, showAutoParseButton = true }) => {
   const {
     data: meResponse,
     isLoading: isLoadingMe,
@@ -74859,12 +74856,8 @@ const BrandSettingsModal = ({ initialBrandSettings, onSave, onBack, showAutoPars
       }
     );
   }
-  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col bg-white rounded-lg overflow-hidden", children: [
-    /* @__PURE__ */ jsx("div", { className: "w-full h-16 px-6 flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-800", children: "Brand Settings" }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-500 text-sm", children: initialBrandSettings ? "Review and confirm your extracted brand identity" : "Craft your brand's visual identity" })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col bg-white rounded-lg overflow-hidden gap-4 pt-16", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto space-y-4 px-6 pt-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow border border-gray-100 overflow-hidden", children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -75410,7 +75403,7 @@ const BrandSettingsModal = ({ initialBrandSettings, onSave, onBack, showAutoPars
                   Badge,
                   {
                     variant: "outline",
-                    className: "px-3 py-1.5 border-2 hover:border-red-100 group transition-colors",
+                    className: "px-3 py-1.5 border-2 hover:border-red-100 group transition-colors text-primary",
                     style: {
                       borderColor: `${brandSettings.primaryColor}30` || "#f3f4f6",
                       backgroundColor: `${brandSettings.primaryColor}08` || "#f9fafb"
@@ -75461,7 +75454,7 @@ const BrandSettingsModal = ({ initialBrandSettings, onSave, onBack, showAutoPars
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(DialogFooter, { className: "p-4 pb-0", children: [
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "pb-4 px-6", children: [
       onBack ? /* @__PURE__ */ jsx(Button$1, { variant: "outline", className: "gap-1.5", onClick: onBack, children: "Go Back" }) : showAutoParseButton && /* @__PURE__ */ jsxs(
         Button$1,
         {
@@ -75487,449 +75480,6 @@ const BrandSettingsModal = ({ initialBrandSettings, onSave, onBack, showAutoPars
     ] })
   ] });
 };
-function BrandSettingsDialog({
-  open,
-  setOpen
-}) {
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(
-    DialogContent,
-    {
-      className: "flex w-[90vw] h-[90vh] flex-col gap-0 overflow-hidden sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl",
-      hideCloseButton: true,
-      children: [
-        /* @__PURE__ */ jsxs(VisuallyHidden$2, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: "Brand Settings" }),
-          /* @__PURE__ */ jsx(DialogDescription, { children: "Edit your business brand settings" })
-        ] }),
-        /* @__PURE__ */ jsx(BrandSettingsModal, {})
-      ]
-    }
-  ) });
-}
-const useAutomationStatusToggle = (id2) => {
-  const { updateAutomation: updateAutomation2, updateError, isUpdateSuccess } = useUpdateBusinessAutomation(id2);
-  const { toast: toast2 } = useToast();
-  const toggleStatus = async (isActive) => {
-    try {
-      await updateAutomation2({
-        status: isActive ? AutomationStatus.ACTIVE : AutomationStatus.DRAFT
-      });
-      return true;
-    } catch (error2) {
-      console.error("Update failed:", error2);
-      toast2({
-        title: "Error updating status",
-        description: "Please try again",
-        variant: "destructive"
-      });
-      return false;
-    }
-  };
-  useEffect(() => {
-    if (isUpdateSuccess) {
-      toast2({
-        title: "Status updated",
-        description: "The status has been updated successfully"
-      });
-    } else if (updateError) {
-      toast2({
-        title: "Error updating status",
-        description: "Please try again",
-        variant: "destructive"
-      });
-    }
-  }, [isUpdateSuccess, updateError, toast2]);
-  return { toggleStatus };
-};
-const DEFAULT_PAGE_SIZE$2 = 10;
-function AutomationList() {
-  const { toast: toast2 } = useToast();
-  const [updatingId, setUpdatingId] = useState(null);
-  const { toggleStatus } = useAutomationStatusToggle(updatingId || "");
-  const navigate = useNavigate();
-  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$2);
-  const [cursorForQuery, setCursorForQuery] = useState(
-    void 0
-  );
-  const [searchQuery, setSearchQuery] = useState("");
-  const {
-    automations,
-    nextCursor,
-    isLoading,
-    error: error2,
-    isFetching,
-    isPlaceholderData
-  } = useListBusinessAutomations({
-    cursor: cursorForQuery,
-    limit: pageSizeForQuery,
-    triggerType: AutomationTriggerType.TRIGGER_BASED,
-    search: searchQuery || void 0
-  });
-  useEffect(() => {
-    if (error2) {
-      toast2({
-        title: `Error Fetching ${t$1("engage:automation")}`,
-        description: error2?.message || "Please try again.",
-        variant: "destructive"
-      });
-    }
-  }, [error2, toast2]);
-  const mappedItems = useMemo(() => {
-    return (automations || []).map((automation2) => ({
-      ...automation2,
-      emailsSent: 0,
-      smsSent: 0,
-      updated_at: automation2.updatedAt || automation2.createdAt
-    }));
-  }, [automations]);
-  const handleToggle = useCallback(
-    async (id2, newStatus) => {
-      try {
-        setUpdatingId(id2);
-        const shouldBeActive = newStatus === AutomationStatus.ACTIVE;
-        await toggleStatus(shouldBeActive);
-      } finally {
-        setUpdatingId(null);
-      }
-    },
-    [toggleStatus, setUpdatingId]
-  );
-  const handleQueryParametersChange = useCallback(
-    (params) => {
-      setCursorForQuery(params.cursor);
-      setPageSizeForQuery(params.pageSize);
-    },
-    []
-  );
-  const setUrl = useCallback(
-    (id2) => `/automations/view-modal/${id2}?showBackButton=true`,
-    []
-  );
-  const columns = useMemo(
-    () => createColumns({
-      automationName: t$1("engage:automation"),
-      setUrl,
-      onToggle: handleToggle,
-      vsaasManaged: true
-    }),
-    [handleToggle, setUrl]
-  );
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-[75vh] flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-grow min-h-0 p-2", children: /* @__PURE__ */ jsx(
-    TanstackTable,
-    {
-      data: mappedItems,
-      columns,
-      paginationMode: "cursor",
-      initialPageSize: pageSizeForQuery,
-      isLoading: isLoading && !isPlaceholderData,
-      onRowClick: (row) => {
-        navigate(`/automations/view-modal/${row.id}?showBackButton=true`);
-      },
-      cursorPaginationQueryResult: {
-        nextCursor,
-        isLoading,
-        isFetching,
-        isPlaceholderData
-      },
-      onQueryParametersChange: handleQueryParametersChange,
-      searchValue: searchQuery,
-      onSearchChange: setSearchQuery
-    }
-  ) }) });
-}
-const DEFAULT_PAGE_SIZE$1 = 10;
-function BroadcastList() {
-  const { toast: toast2 } = useToast();
-  const [createDialogOpen, setCreateDialogOpen] = useState(false);
-  const [updatingId, setUpdatingId] = useState(null);
-  const { toggleStatus } = useAutomationStatusToggle(updatingId || "");
-  const navigate = useNavigate();
-  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$1);
-  const [cursorForQuery, setCursorForQuery] = useState(
-    void 0
-  );
-  const [searchQuery, setSearchQuery] = useState("");
-  const {
-    automations,
-    nextCursor,
-    isLoading,
-    error: error2,
-    isFetching,
-    isPlaceholderData
-  } = useListBusinessAutomations({
-    cursor: cursorForQuery,
-    limit: pageSizeForQuery,
-    triggerType: AutomationTriggerType.ONE_TIME,
-    search: searchQuery || void 0
-  });
-  useEffect(() => {
-    if (error2) {
-      toast2({
-        title: `Error Fetching ${t$1("engage:one_time")}`,
-        description: error2?.message || "Please try again.",
-        variant: "destructive"
-      });
-    }
-  }, [error2, toast2]);
-  const broadcasts = useMemo(() => {
-    return (automations || []).map((automation2) => ({
-      ...automation2,
-      updated_at: automation2.updatedAt
-    }));
-  }, [automations]);
-  const handleToggle = useCallback(
-    async (id2, newStatus) => {
-      try {
-        setUpdatingId(id2);
-        const shouldBeActive = newStatus === AutomationStatus.ACTIVE;
-        await toggleStatus(shouldBeActive);
-      } finally {
-        setUpdatingId(null);
-      }
-    },
-    [toggleStatus, setUpdatingId]
-  );
-  const handleQueryParametersChange = useCallback(
-    (params) => {
-      setCursorForQuery(params.cursor);
-      setPageSizeForQuery(params.pageSize);
-    },
-    []
-  );
-  const resetListPagination = () => {
-    setCursorForQuery(void 0);
-    setPageSizeForQuery(DEFAULT_PAGE_SIZE$1);
-    setSearchQuery("");
-  };
-  const onDialogClose = (result) => {
-    console.log("result", result);
-    handleDialogClose(
-      setCreateDialogOpen,
-      toast2,
-      result,
-      `Error creating ${t$1("engage:one_time")}`,
-      "Please try again"
-    );
-    resetListPagination();
-    if (result !== false) {
-      navigate(`/automations/view-modal/${result}?showBackButton=true`);
-    }
-  };
-  const setUrl = useCallback(
-    (id2) => `/automations/view-modal/${id2}?showBackButton=true`,
-    []
-  );
-  const columns = useMemo(
-    () => createColumns({
-      automationName: t$1("engage:one_time"),
-      setUrl,
-      onToggle: handleToggle
-    }),
-    [handleToggle, setUrl]
-  );
-  const headerActionsContent = /* @__PURE__ */ jsxs(Button$1, { className: "bg-primary", onClick: () => setCreateDialogOpen(true), children: [
-    /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-1" }),
-    "New"
-  ] });
-  return /* @__PURE__ */ jsxs("div", { className: "w-full h-[75vh] flex flex-col", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex-grow min-h-0 p-2", children: /* @__PURE__ */ jsx(
-      TanstackTable,
-      {
-        data: broadcasts,
-        columns,
-        paginationMode: "cursor",
-        initialPageSize: pageSizeForQuery,
-        headerActions: headerActionsContent,
-        isLoading: isLoading && !isPlaceholderData,
-        cursorPaginationQueryResult: {
-          nextCursor,
-          isLoading,
-          isFetching,
-          isPlaceholderData
-        },
-        onRowClick: (row) => {
-          navigate(`/automations/view-modal/${row.id}?showBackButton=true`);
-        },
-        onQueryParametersChange: handleQueryParametersChange,
-        searchValue: searchQuery,
-        onSearchChange: setSearchQuery
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      CreateAutomationDialog,
-      {
-        open: createDialogOpen,
-        setOpen: setCreateDialogOpen,
-        onClose: onDialogClose,
-        automationType: AutomationTriggerType.ONE_TIME
-      }
-    )
-  ] });
-}
-const DEFAULT_PAGE_SIZE = 10;
-function SegmentList() {
-  const { toast: toast2 } = useToast();
-  const [createDialogOpen, setCreateDialogOpen] = useState(false);
-  const [selectedSegment, setSelectedSegment] = useState(null);
-  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE);
-  const [cursorForQuery, setCursorForQuery] = useState(
-    void 0
-  );
-  const [searchQuery, setSearchQuery] = useState("");
-  const { segments, isLoading, nextCursor, isFetching, isPlaceholderData } = useListSegments({
-    search: searchQuery || void 0,
-    cursor: cursorForQuery,
-    limit: pageSizeForQuery
-  });
-  const toggleSelectedSegment = useCallback(
-    (id2) => {
-      setSelectedSegment(id2);
-      setCreateDialogOpen(true);
-    },
-    [setSelectedSegment]
-  );
-  const columns = useMemo(
-    () => createSegmentColumns(toggleSelectedSegment),
-    [toggleSelectedSegment]
-  );
-  const segmentsMapped = useMemo(
-    () => segments ? segments.map((segment2) => ({
-      ...segment2,
-      updated_at: segment2.createdAt.toString(),
-      user_count: segment2.userCount,
-      user_count_updated_at: segment2.userCountUpdatedAt
-    })) : [],
-    [segments]
-  );
-  const headerActionsContent = useMemo(() => {
-    return /* @__PURE__ */ jsxs(
-      Button$1,
-      {
-        onClick: () => {
-          setSelectedSegment(null);
-          setCreateDialogOpen(true);
-        },
-        children: [
-          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
-          "New List"
-        ]
-      }
-    );
-  }, []);
-  const handleQueryParametersChange = useCallback(
-    (params) => {
-      setCursorForQuery(params.cursor);
-      setPageSizeForQuery(params.pageSize);
-    },
-    []
-  );
-  const resetListPagination = () => {
-    setCursorForQuery(void 0);
-    setPageSizeForQuery(DEFAULT_PAGE_SIZE);
-    setSearchQuery("");
-  };
-  const onDialogClose = (result) => {
-    handleDialogClose(
-      setCreateDialogOpen,
-      toast2,
-      result,
-      `Error creating ${t$1("engage:segment")}`,
-      "Please try again"
-    );
-    resetListPagination();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "w-full h-[75vh] flex flex-col", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex-grow min-h-0 p-2", children: /* @__PURE__ */ jsx(
-      TanstackTable,
-      {
-        data: segmentsMapped,
-        columns,
-        paginationMode: "cursor",
-        initialPageSize: pageSizeForQuery,
-        headerActions: headerActionsContent,
-        isLoading: isLoading && !isPlaceholderData,
-        cursorPaginationQueryResult: {
-          nextCursor,
-          isLoading,
-          isFetching,
-          isPlaceholderData
-        },
-        onQueryParametersChange: handleQueryParametersChange,
-        onRowClick: (row) => {
-          setSelectedSegment(row.id);
-          setCreateDialogOpen(true);
-        },
-        searchValue: searchQuery,
-        onSearchChange: setSearchQuery
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      SegmentBuilderDialog,
-      {
-        open: createDialogOpen,
-        setOpen: setCreateDialogOpen,
-        segmentId: selectedSegment ?? void 0,
-        onSegmentUpdated: onDialogClose
-      }
-    )
-  ] });
-}
-const EngageMain = () => {
-  const engageListTabs = [
-    {
-      id: "broadcasts",
-      label: t$1("engage:one_time", { count: 2 }),
-      content: /* @__PURE__ */ jsx(BroadcastList, {})
-    },
-    {
-      id: "automations",
-      label: t$1("engage:automation", { count: 2 }),
-      content: /* @__PURE__ */ jsx(AutomationList, {})
-    },
-    {
-      id: "segments",
-      label: t$1("engage:segment", { count: 2 }),
-      content: /* @__PURE__ */ jsx(SegmentList, {})
-    },
-    {
-      id: "statistics",
-      label: t$1("engage:insight", { count: 2 }),
-      content: /* @__PURE__ */ jsx(AutomationStatistics, {})
-    }
-  ];
-  const queryClient = useQueryClient();
-  const [engageSettingsOpen, setEngageSettingsOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState(engageListTabs[0].id);
-  useEffect(() => {
-    queryClient.prefetchQuery({
-      queryKey: automationKeys.list()
-    });
-    queryClient.prefetchQuery({
-      queryKey: segmentKeys.lists()
-    });
-  }, [queryClient]);
-  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx(
-      BrandSettingsDialog,
-      {
-        open: engageSettingsOpen,
-        setOpen: setEngageSettingsOpen
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button$1, { variant: "outline", onClick: () => setEngageSettingsOpen(true), children: /* @__PURE__ */ jsx(Settings, { className: "w-4 h-4" }) }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 w-full h-full flex flex-col gap-4", children: /* @__PURE__ */ jsx(
-      AnimatedTabs,
-      {
-        activeTab,
-        tabs: engageListTabs,
-        onTabChange: setActiveTab
-      }
-    ) })
-  ] });
-};
-const Engage = () => {
-  return /* @__PURE__ */ jsx(Provider$1, { children: /* @__PURE__ */ jsx(EngageMain, {}) });
-};
 var isCheckBoxInput = (element) => element.type === "checkbox";
 var isDateObject = (value) => value instanceof Date;
 var isNullOrUndefined = (value) => value == null;
@@ -77671,6 +77221,305 @@ var n = function(r2, e4) {
     }
   };
 };
+const base = "reach-styles-module__base___r-a1U";
+const primary = "reach-styles-module__primary___mGKjo";
+const success = "reach-styles-module__success___xn1Y1";
+const warning = "reach-styles-module__warning___jdyU9";
+const error = "reach-styles-module__error___Z-3IS";
+const sizeDefault = "reach-styles-module__sizeDefault___oS6W2";
+const sizeSm = "reach-styles-module__sizeSm___GI826";
+const sizeLg = "reach-styles-module__sizeLg___J--WF";
+const positionDefault = "reach-styles-module__positionDefault___visr6";
+const positionTop = "reach-styles-module__positionTop___y6h-n";
+const positionBottom = "reach-styles-module__positionBottom___vYLkd";
+const positionInline = "reach-styles-module__positionInline___NjZsw";
+const styles = {
+  base,
+  "default": "reach-styles-module__default___vu2Rt",
+  primary,
+  success,
+  warning,
+  error,
+  sizeDefault,
+  sizeSm,
+  sizeLg,
+  positionDefault,
+  positionTop,
+  positionBottom,
+  positionInline
+};
+const bannerVariants = cva([styles.base], {
+  variants: {
+    variant: {
+      default: styles.default,
+      primary: styles.primary,
+      success: styles.success,
+      warning: styles.warning,
+      error: styles.error
+    },
+    size: {
+      default: styles.sizeDefault,
+      sm: styles.sizeSm,
+      lg: styles.sizeLg
+    },
+    position: {
+      default: styles.positionDefault,
+      top: styles.positionTop,
+      bottom: styles.positionBottom,
+      inline: styles.positionInline
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+    position: "default"
+  }
+});
+const Form = FormProvider;
+const FormFieldContext = React.createContext(
+  {}
+);
+const FormField = ({
+  ...props2
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props2.name }, children: /* @__PURE__ */ jsx(Controller, { ...props2 }) });
+};
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id: id2 } = itemContext;
+  return {
+    id: id2,
+    name: fieldContext.name,
+    formItemId: `${id2}-form-item`,
+    formDescriptionId: `${id2}-form-item-description`,
+    formMessageId: `${id2}-form-item-message`,
+    ...fieldState
+  };
+};
+const FormItemContext = React.createContext(
+  {}
+);
+const FormItem = React.forwardRef(({ className: className2, ...props2 }, ref) => {
+  const id2 = React.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id: id2 }, children: /* @__PURE__ */ jsx("div", { ref, className: cn$1("space-y-2", className2), ...props2 }) });
+});
+FormItem.displayName = "FormItem";
+const FormLabel = React.forwardRef(({ className: className2, ...props2 }, ref) => {
+  const { error: error2, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label$1,
+    {
+      ref,
+      className: cn$1(error2 && "text-destructive", className2),
+      htmlFor: formItemId,
+      ...props2
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+const FormControl = React.forwardRef(({ ...props2 }, ref) => {
+  const { error: error2, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot$4,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error2 ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error2,
+      ...props2
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+const FormDescription = React.forwardRef(({ className: className2, ...props2 }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn$1("text-[0.8rem] text-muted-foreground", className2),
+      ...props2
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+const FormMessage = React.forwardRef(({ className: className2, children: children2, ...props2 }, ref) => {
+  const { error: error2, formMessageId } = useFormField();
+  const body = error2 ? String(error2?.message) : children2;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn$1("text-[0.8rem] font-medium text-destructive", className2),
+      ...props2,
+      children: body
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+const CompanyFormFields = ({
+  control,
+  disabled,
+  legalNameRef
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name: "company.legalName",
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(FormLabel, { className: "text-sm", children: "Legal Company Name" }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...field,
+            ref: legalNameRef,
+            disabled,
+            className: "h-8"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+      ] })
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name: "company.type",
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(FormLabel, { className: "text-sm", children: "Company Type" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            onValueChange: field.onChange,
+            defaultValue: field.value,
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select company type" }) }) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "corporation", children: "Corporation" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "llc", children: "LLC" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+      ] })
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name: "company.ein",
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(FormLabel, { className: "text-sm", children: "EIN (Employer Identification Number)" }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { ...field, type: "text", disabled, className: "h-8" }) }),
+        /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+      ] })
+    }
+  )
+] });
+const RepresentativeFormFields = ({
+  control,
+  disabled
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name: "representative.title",
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(FormLabel, { className: "text-sm", children: "Title" }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { ...field, disabled, className: "h-8" }) }),
+        /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+      ] })
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name: "representative.firstName",
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(FormLabel, { className: "text-sm", children: "First Name" }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { ...field, disabled, className: "h-8" }) }),
+        /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+      ] })
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name: "representative.email",
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(FormLabel, { className: "text-sm", children: "Email" }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...field,
+            type: "email",
+            disabled,
+            className: "h-8"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+      ] })
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name: "representative.phone",
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(FormLabel, { className: "text-sm", children: "Contact Phone Number" }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { ...field, type: "tel", disabled, className: "h-8" }) }),
+        /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+      ] })
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name: "representative.position",
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(FormLabel, { className: "text-sm", children: "Position" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            onValueChange: field.onChange,
+            defaultValue: field.value,
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select position" }) }) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "owner", children: "Owner" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "manager", children: "Manager" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "director", children: "Director" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+      ] })
+    }
+  )
+] });
 var util;
 (function(util2) {
   util2.assertEqual = (val) => val;
@@ -77820,6 +77669,10 @@ const ZodIssueCode = util.arrayToEnum([
   "not_multiple_of",
   "not_finite"
 ]);
+const quotelessJson = (obj) => {
+  const json = JSON.stringify(obj, null, 2);
+  return json.replace(/"([^"]+)":/g, "$1:");
+};
 class ZodError extends Error {
   get errors() {
     return this.issues;
@@ -78012,6 +77865,9 @@ const errorMap = (issue, _ctx) => {
   return { message: message2 };
 };
 let overrideErrorMap = errorMap;
+function setErrorMap(map) {
+  overrideErrorMap = map;
+}
 function getErrorMap() {
   return overrideErrorMap;
 }
@@ -78040,6 +77896,7 @@ const makeIssue = (params) => {
     message: errorMessage
   };
 };
+const EMPTY_PATH = [];
 function addIssueToContext(ctx, issueData) {
   const overrideMap = getErrorMap();
   const issue = makeIssue({
@@ -81391,6 +81248,7 @@ ZodNaN.create = (params) => {
     ...processCreateParams(params)
   });
 };
+const BRAND = Symbol("zod_brand");
 class ZodBranded extends ZodType {
   _parse(input) {
     const { ctx } = this._processInputParams(input);
@@ -81482,9 +81340,38 @@ ZodReadonly.create = (type, params) => {
     ...processCreateParams(params)
   });
 };
-({
+function cleanParams(params, data) {
+  const p2 = typeof params === "function" ? params(data) : typeof params === "string" ? { message: params } : params;
+  const p22 = typeof p2 === "string" ? { message: p2 } : p2;
+  return p22;
+}
+function custom(check, _params = {}, fatal) {
+  if (check)
+    return ZodAny.create().superRefine((data, ctx) => {
+      var _a2, _b;
+      const r2 = check(data);
+      if (r2 instanceof Promise) {
+        return r2.then((r3) => {
+          var _a3, _b2;
+          if (!r3) {
+            const params = cleanParams(_params, data);
+            const _fatal = (_b2 = (_a3 = params.fatal) !== null && _a3 !== void 0 ? _a3 : fatal) !== null && _b2 !== void 0 ? _b2 : true;
+            ctx.addIssue({ code: "custom", ...params, fatal: _fatal });
+          }
+        });
+      }
+      if (!r2) {
+        const params = cleanParams(_params, data);
+        const _fatal = (_b = (_a2 = params.fatal) !== null && _a2 !== void 0 ? _a2 : fatal) !== null && _b !== void 0 ? _b : true;
+        ctx.addIssue({ code: "custom", ...params, fatal: _fatal });
+      }
+      return;
+    });
+  return ZodAny.create();
+}
+const late = {
   object: ZodObject.lazycreate
-});
+};
 var ZodFirstPartyTypeKind;
 (function(ZodFirstPartyTypeKind2) {
   ZodFirstPartyTypeKind2["ZodString"] = "ZodString";
@@ -81524,133 +81411,824 @@ var ZodFirstPartyTypeKind;
   ZodFirstPartyTypeKind2["ZodPipeline"] = "ZodPipeline";
   ZodFirstPartyTypeKind2["ZodReadonly"] = "ZodReadonly";
 })(ZodFirstPartyTypeKind || (ZodFirstPartyTypeKind = {}));
+const instanceOfType = (cls, params = {
+  message: `Input not instance of ${cls.name}`
+}) => custom((data) => data instanceof cls, params);
 const stringType = ZodString.create;
-ZodNumber.create;
-ZodNaN.create;
-ZodBigInt.create;
-ZodBoolean.create;
-ZodDate.create;
-ZodSymbol.create;
-ZodUndefined.create;
-ZodNull.create;
-ZodAny.create;
-ZodUnknown.create;
-ZodNever.create;
-ZodVoid.create;
-ZodArray.create;
+const numberType = ZodNumber.create;
+const nanType = ZodNaN.create;
+const bigIntType = ZodBigInt.create;
+const booleanType = ZodBoolean.create;
+const dateType = ZodDate.create;
+const symbolType = ZodSymbol.create;
+const undefinedType = ZodUndefined.create;
+const nullType = ZodNull.create;
+const anyType = ZodAny.create;
+const unknownType = ZodUnknown.create;
+const neverType = ZodNever.create;
+const voidType = ZodVoid.create;
+const arrayType = ZodArray.create;
 const objectType = ZodObject.create;
-ZodObject.strictCreate;
-ZodUnion.create;
-ZodDiscriminatedUnion.create;
-ZodIntersection.create;
-ZodTuple.create;
-ZodRecord.create;
-ZodMap.create;
-ZodSet.create;
-ZodFunction.create;
-ZodLazy.create;
-ZodLiteral.create;
-ZodEnum.create;
-ZodNativeEnum.create;
-ZodPromise.create;
-ZodEffects.create;
-ZodOptional.create;
-ZodNullable.create;
-ZodEffects.createWithPreprocess;
-ZodPipeline.create;
-const Form = FormProvider;
-const FormFieldContext = React.createContext(
-  {}
-);
-const FormField = ({
-  ...props2
-}) => {
-  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props2.name }, children: /* @__PURE__ */ jsx(Controller, { ...props2 }) });
+const strictObjectType = ZodObject.strictCreate;
+const unionType = ZodUnion.create;
+const discriminatedUnionType = ZodDiscriminatedUnion.create;
+const intersectionType = ZodIntersection.create;
+const tupleType = ZodTuple.create;
+const recordType = ZodRecord.create;
+const mapType = ZodMap.create;
+const setType = ZodSet.create;
+const functionType = ZodFunction.create;
+const lazyType = ZodLazy.create;
+const literalType = ZodLiteral.create;
+const enumType = ZodEnum.create;
+const nativeEnumType = ZodNativeEnum.create;
+const promiseType = ZodPromise.create;
+const effectsType = ZodEffects.create;
+const optionalType = ZodOptional.create;
+const nullableType = ZodNullable.create;
+const preprocessType = ZodEffects.createWithPreprocess;
+const pipelineType = ZodPipeline.create;
+const ostring = () => stringType().optional();
+const onumber = () => numberType().optional();
+const oboolean = () => booleanType().optional();
+const coerce = {
+  string: (arg) => ZodString.create({ ...arg, coerce: true }),
+  number: (arg) => ZodNumber.create({ ...arg, coerce: true }),
+  boolean: (arg) => ZodBoolean.create({
+    ...arg,
+    coerce: true
+  }),
+  bigint: (arg) => ZodBigInt.create({ ...arg, coerce: true }),
+  date: (arg) => ZodDate.create({ ...arg, coerce: true })
 };
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-  const fieldState = getFieldState(fieldContext.name, formState);
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-  const { id: id2 } = itemContext;
-  return {
-    id: id2,
-    name: fieldContext.name,
-    formItemId: `${id2}-form-item`,
-    formDescriptionId: `${id2}-form-item-description`,
-    formMessageId: `${id2}-form-item-message`,
-    ...fieldState
+const NEVER = INVALID;
+var z2 = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  defaultErrorMap: errorMap,
+  setErrorMap,
+  getErrorMap,
+  makeIssue,
+  EMPTY_PATH,
+  addIssueToContext,
+  ParseStatus,
+  INVALID,
+  DIRTY,
+  OK,
+  isAborted,
+  isDirty,
+  isValid,
+  isAsync,
+  get util() {
+    return util;
+  },
+  get objectUtil() {
+    return objectUtil;
+  },
+  ZodParsedType,
+  getParsedType,
+  ZodType,
+  datetimeRegex,
+  ZodString,
+  ZodNumber,
+  ZodBigInt,
+  ZodBoolean,
+  ZodDate,
+  ZodSymbol,
+  ZodUndefined,
+  ZodNull,
+  ZodAny,
+  ZodUnknown,
+  ZodNever,
+  ZodVoid,
+  ZodArray,
+  ZodObject,
+  ZodUnion,
+  ZodDiscriminatedUnion,
+  ZodIntersection,
+  ZodTuple,
+  ZodRecord,
+  ZodMap,
+  ZodSet,
+  ZodFunction,
+  ZodLazy,
+  ZodLiteral,
+  ZodEnum,
+  ZodNativeEnum,
+  ZodPromise,
+  ZodEffects,
+  ZodTransformer: ZodEffects,
+  ZodOptional,
+  ZodNullable,
+  ZodDefault,
+  ZodCatch,
+  ZodNaN,
+  BRAND,
+  ZodBranded,
+  ZodPipeline,
+  ZodReadonly,
+  custom,
+  Schema: ZodType,
+  ZodSchema: ZodType,
+  late,
+  get ZodFirstPartyTypeKind() {
+    return ZodFirstPartyTypeKind;
+  },
+  coerce,
+  any: anyType,
+  array: arrayType,
+  bigint: bigIntType,
+  boolean: booleanType,
+  date: dateType,
+  discriminatedUnion: discriminatedUnionType,
+  effect: effectsType,
+  "enum": enumType,
+  "function": functionType,
+  "instanceof": instanceOfType,
+  intersection: intersectionType,
+  lazy: lazyType,
+  literal: literalType,
+  map: mapType,
+  nan: nanType,
+  nativeEnum: nativeEnumType,
+  never: neverType,
+  "null": nullType,
+  nullable: nullableType,
+  number: numberType,
+  object: objectType,
+  oboolean,
+  onumber,
+  optional: optionalType,
+  ostring,
+  pipeline: pipelineType,
+  preprocess: preprocessType,
+  promise: promiseType,
+  record: recordType,
+  set: setType,
+  strictObject: strictObjectType,
+  string: stringType,
+  symbol: symbolType,
+  transformer: effectsType,
+  tuple: tupleType,
+  "undefined": undefinedType,
+  union: unionType,
+  unknown: unknownType,
+  "void": voidType,
+  NEVER,
+  ZodIssueCode,
+  quotelessJson,
+  ZodError
+});
+const phoneSettingsSchema = z2.object({
+  company: z2.object({
+    legalName: z2.string().min(1, "Legal company name is required"),
+    type: z2.enum(["corporation", "llc"]).optional(),
+    ein: z2.string().min(1, "EIN is required")
+  }),
+  representative: z2.object({
+    title: z2.string().min(1, "Title is required"),
+    firstName: z2.string().min(1, "First name is required"),
+    email: z2.string().email("Invalid email address"),
+    phone: z2.string().min(1, "Phone number is required"),
+    position: z2.enum(["owner", "manager", "director"]).optional()
+  })
+});
+const PHONE_NUMBER = null;
+const PhoneSettings = ({ onSave, onBack }) => {
+  const legalNameRef = useRef(null);
+  const { isUpdatingBrandSettings, data: meResponse } = useBusiness();
+  const { toast: toast2 } = useToast();
+  const [hideBanner, sethideBanner] = useState(Boolean(PHONE_NUMBER));
+  useEffect(() => {
+    legalNameRef.current?.focus();
+  }, []);
+  const form = useForm({
+    resolver: t2(phoneSettingsSchema),
+    defaultValues: {
+      company: { legalName: "", type: void 0, ein: "" },
+      representative: {
+        title: "",
+        firstName: "",
+        email: "",
+        phone: "",
+        position: void 0
+      }
+    }
+  });
+  const onSubmit = async (data) => {
+    try {
+      console.log("Submitted Phone Settings data", data);
+      toast2({ title: "Settings saved 🚀" });
+      onSave?.();
+    } catch (error2) {
+      toast2({ title: "Error saving settings", variant: "destructive" });
+    }
   };
+  const primaryColor = meResponse?.branding?.primaryColor || "#000000";
+  const errorCount = Object.entries(form.formState.errors).reduce(
+    (acc, [key, error2]) => {
+      if (key === "company" || key === "representative") {
+        return acc + Object.keys(error2).length;
+      }
+      return acc + 1;
+    },
+    0
+  );
+  return /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: form.handleSubmit(onSubmit),
+      className: "w-full h-full flex flex-col bg-white rounded-lg",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 px-6 pt-16 overflow-y-auto relative", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 w-full min-h-[400px] @container flex flex-col gap-2", children: [
+          !hideBanner && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn$1(
+                bannerVariants({
+                  variant: "warning",
+                  size: "default",
+                  position: "inline"
+                }),
+                styles.base,
+                "p-4 relative"
+              ),
+              role: "alert",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+                /* @__PURE__ */ jsx("div", { className: "mr-3 shrink-0 pt-0.5", children: /* @__PURE__ */ jsx(TriangleAlert, { className: "h-6 w-6" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-grow", children: [
+                  /* @__PURE__ */ jsx("h5", { className: "text-sm font-medium mb-1", children: "Complete Required Information" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-sm", children: "Please complete the required information to get your Twilio phone number." })
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "bg-card rounded-lg border shadow-sm", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-6", children: [
+              /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: "Twilio Application" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Status:" }),
+                /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-800", children: "Pending" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "py-4 @md:grid @md:grid-cols-2 @md:gap-8 px-6", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-base font-medium pb-2 border-b border-border", children: "Company" }),
+                /* @__PURE__ */ jsx("div", { className: "space-y-4 py-4", children: /* @__PURE__ */ jsx(
+                  CompanyFormFields,
+                  {
+                    control: form.control,
+                    disabled: isUpdatingBrandSettings,
+                    legalNameRef
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-base font-medium pb-2 border-b border-border", children: "Authorized Representative" }),
+                /* @__PURE__ */ jsx("div", { className: "space-y-4 py-4", children: /* @__PURE__ */ jsx(
+                  RepresentativeFormFields,
+                  {
+                    control: form.control,
+                    disabled: isUpdatingBrandSettings
+                  }
+                ) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "h-4", children: " " })
+        ] }) }),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "py-4 px-6", children: [
+          onBack && /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              variant: "outline",
+              className: "gap-1.5",
+              onClick: onBack,
+              disabled: isUpdatingBrandSettings,
+              children: "Go Back"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            errorCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm text-destructive flex items-center gap-1.5", children: [
+              "Please fix the ",
+              /* @__PURE__ */ jsx("span", { className: "font-bold", children: errorCount }),
+              " ",
+              "fields that need attention"
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                type: "submit",
+                className: "px-4",
+                style: { backgroundColor: primaryColor },
+                disabled: isUpdatingBrandSettings || !form.formState.isDirty,
+                children: isUpdatingBrandSettings ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }),
+                  "Saving"
+                ] }) : "Save Changes"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  ) });
 };
-const FormItemContext = React.createContext(
-  {}
-);
-const FormItem = React.forwardRef(({ className: className2, ...props2 }, ref) => {
-  const id2 = React.useId();
-  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id: id2 }, children: /* @__PURE__ */ jsx("div", { ref, className: cn$1("space-y-2", className2), ...props2 }) });
-});
-FormItem.displayName = "FormItem";
-const FormLabel = React.forwardRef(({ className: className2, ...props2 }, ref) => {
-  const { error: error2, formItemId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    Label$1,
+function SidebarTabLayout({
+  tabs,
+  activeTab,
+  onTabChange,
+  title: title2
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-48 py-2 pl-4", children: [
+      title2 && /* @__PURE__ */ jsx("h2", { className: "px-4 pt-4 pb-5 text-lg font-medium", children: title2 }),
+      tabs.map((tab) => /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          variant: "ghost",
+          className: cn$1(
+            "w-full justify-start mb-1",
+            activeTab === tab.id && "bg-accent"
+          ),
+          onClick: () => onTabChange(tab.id),
+          children: tab.label
+        },
+        tab.id
+      ))
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1", children: tabs.find((tab) => tab.id === activeTab)?.content })
+  ] });
+}
+function EngageSettingsDialog({
+  open,
+  setOpen
+}) {
+  const [activeTab, setActiveTab] = useState("brand");
+  const flags = ne();
+  const isSettingsModalEnabled = flags["show-settings-modal"] ?? false;
+  useEffect(() => {
+    if (open) {
+      setActiveTab("brand");
+    }
+  }, [open]);
+  const tabs = isSettingsModalEnabled ? [
     {
-      ref,
-      className: cn$1(error2 && "text-destructive", className2),
-      htmlFor: formItemId,
-      ...props2
+      id: "brand",
+      label: "Brand",
+      content: /* @__PURE__ */ jsx(BrandSettings, {})
+    },
+    {
+      id: "phone-number",
+      label: "Phone Number",
+      content: /* @__PURE__ */ jsx(PhoneSettings, {})
     }
-  );
-});
-FormLabel.displayName = "FormLabel";
-const FormControl = React.forwardRef(({ ...props2 }, ref) => {
-  const { error: error2, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    Slot$4,
+  ] : [
     {
-      ref,
-      id: formItemId,
-      "aria-describedby": !error2 ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-      "aria-invalid": !!error2,
-      ...props2
+      id: "brand",
+      label: "Brand",
+      content: /* @__PURE__ */ jsx(BrandSettings, {})
     }
+  ];
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex w-[90vw] h-[90vh] flex-col gap-0 overflow-hidden sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl p-0", children: [
+    /* @__PURE__ */ jsxs(VisuallyHidden$2, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Settings" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Edit your business and brand settings" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+      SidebarTabLayout,
+      {
+        tabs,
+        activeTab,
+        onTabChange: setActiveTab,
+        title: "Settings"
+      }
+    ) })
+  ] }) });
+}
+const useAutomationStatusToggle = (id2) => {
+  const { updateAutomation: updateAutomation2, updateError, isUpdateSuccess } = useUpdateBusinessAutomation(id2);
+  const { toast: toast2 } = useToast();
+  const toggleStatus = async (isActive) => {
+    try {
+      await updateAutomation2({
+        status: isActive ? AutomationStatus.ACTIVE : AutomationStatus.DRAFT
+      });
+      return true;
+    } catch (error2) {
+      console.error("Update failed:", error2);
+      toast2({
+        title: "Error updating status",
+        description: "Please try again",
+        variant: "destructive"
+      });
+      return false;
+    }
+  };
+  useEffect(() => {
+    if (isUpdateSuccess) {
+      toast2({
+        title: "Status updated",
+        description: "The status has been updated successfully"
+      });
+    } else if (updateError) {
+      toast2({
+        title: "Error updating status",
+        description: "Please try again",
+        variant: "destructive"
+      });
+    }
+  }, [isUpdateSuccess, updateError, toast2]);
+  return { toggleStatus };
+};
+const DEFAULT_PAGE_SIZE$2 = 10;
+function AutomationList() {
+  const { toast: toast2 } = useToast();
+  const [updatingId, setUpdatingId] = useState(null);
+  const { toggleStatus } = useAutomationStatusToggle(updatingId || "");
+  const navigate = useNavigate();
+  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$2);
+  const [cursorForQuery, setCursorForQuery] = useState(
+    void 0
   );
-});
-FormControl.displayName = "FormControl";
-const FormDescription = React.forwardRef(({ className: className2, ...props2 }, ref) => {
-  const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      ref,
-      id: formDescriptionId,
-      className: cn$1("text-[0.8rem] text-muted-foreground", className2),
-      ...props2
+  const [searchQuery, setSearchQuery] = useState("");
+  const {
+    automations,
+    nextCursor,
+    isLoading,
+    error: error2,
+    isFetching,
+    isPlaceholderData
+  } = useListBusinessAutomations({
+    cursor: cursorForQuery,
+    limit: pageSizeForQuery,
+    triggerType: AutomationTriggerType.TRIGGER_BASED,
+    search: searchQuery || void 0
+  });
+  useEffect(() => {
+    if (error2) {
+      toast2({
+        title: `Error Fetching ${t$1("engage:automation")}`,
+        description: error2?.message || "Please try again.",
+        variant: "destructive"
+      });
     }
+  }, [error2, toast2]);
+  const mappedItems = useMemo(() => {
+    return (automations || []).map((automation2) => ({
+      ...automation2,
+      emailsSent: 0,
+      smsSent: 0,
+      updated_at: automation2.updatedAt || automation2.createdAt
+    }));
+  }, [automations]);
+  const handleToggle = useCallback(
+    async (id2, newStatus) => {
+      try {
+        setUpdatingId(id2);
+        const shouldBeActive = newStatus === AutomationStatus.ACTIVE;
+        await toggleStatus(shouldBeActive);
+      } finally {
+        setUpdatingId(null);
+      }
+    },
+    [toggleStatus, setUpdatingId]
   );
-});
-FormDescription.displayName = "FormDescription";
-const FormMessage = React.forwardRef(({ className: className2, children: children2, ...props2 }, ref) => {
-  const { error: error2, formMessageId } = useFormField();
-  const body = error2 ? String(error2?.message) : children2;
-  if (!body) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "p",
+  const handleQueryParametersChange = useCallback(
+    (params) => {
+      setCursorForQuery(params.cursor);
+      setPageSizeForQuery(params.pageSize);
+    },
+    []
+  );
+  const setUrl = useCallback(
+    (id2) => `/automations/view-modal/${id2}?showBackButton=true`,
+    []
+  );
+  const columns = useMemo(
+    () => createColumns({
+      automationName: t$1("engage:automation"),
+      setUrl,
+      onToggle: handleToggle,
+      vsaasManaged: true
+    }),
+    [handleToggle, setUrl]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-[75vh] flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-grow min-h-0 p-2", children: /* @__PURE__ */ jsx(
+    TanstackTable,
     {
-      ref,
-      id: formMessageId,
-      className: cn$1("text-[0.8rem] font-medium text-destructive", className2),
-      ...props2,
-      children: body
+      data: mappedItems,
+      columns,
+      paginationMode: "cursor",
+      initialPageSize: pageSizeForQuery,
+      isLoading: isLoading && !isPlaceholderData,
+      onRowClick: (row) => {
+        navigate(`/automations/view-modal/${row.id}?showBackButton=true`);
+      },
+      cursorPaginationQueryResult: {
+        nextCursor,
+        isLoading,
+        isFetching,
+        isPlaceholderData
+      },
+      onQueryParametersChange: handleQueryParametersChange,
+      searchValue: searchQuery,
+      onSearchChange: setSearchQuery
     }
+  ) }) });
+}
+const DEFAULT_PAGE_SIZE$1 = 10;
+function BroadcastList() {
+  const { toast: toast2 } = useToast();
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [updatingId, setUpdatingId] = useState(null);
+  const { toggleStatus } = useAutomationStatusToggle(updatingId || "");
+  const navigate = useNavigate();
+  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$1);
+  const [cursorForQuery, setCursorForQuery] = useState(
+    void 0
   );
-});
-FormMessage.displayName = "FormMessage";
+  const [searchQuery, setSearchQuery] = useState("");
+  const {
+    automations,
+    nextCursor,
+    isLoading,
+    error: error2,
+    isFetching,
+    isPlaceholderData
+  } = useListBusinessAutomations({
+    cursor: cursorForQuery,
+    limit: pageSizeForQuery,
+    triggerType: AutomationTriggerType.ONE_TIME,
+    search: searchQuery || void 0
+  });
+  useEffect(() => {
+    if (error2) {
+      toast2({
+        title: `Error Fetching ${t$1("engage:one_time")}`,
+        description: error2?.message || "Please try again.",
+        variant: "destructive"
+      });
+    }
+  }, [error2, toast2]);
+  const broadcasts = useMemo(() => {
+    return (automations || []).map((automation2) => ({
+      ...automation2,
+      updated_at: automation2.updatedAt
+    }));
+  }, [automations]);
+  const handleToggle = useCallback(
+    async (id2, newStatus) => {
+      try {
+        setUpdatingId(id2);
+        const shouldBeActive = newStatus === AutomationStatus.ACTIVE;
+        await toggleStatus(shouldBeActive);
+      } finally {
+        setUpdatingId(null);
+      }
+    },
+    [toggleStatus, setUpdatingId]
+  );
+  const handleQueryParametersChange = useCallback(
+    (params) => {
+      setCursorForQuery(params.cursor);
+      setPageSizeForQuery(params.pageSize);
+    },
+    []
+  );
+  const resetListPagination = () => {
+    setCursorForQuery(void 0);
+    setPageSizeForQuery(DEFAULT_PAGE_SIZE$1);
+    setSearchQuery("");
+  };
+  const onDialogClose = (result) => {
+    console.log("result", result);
+    handleDialogClose(
+      setCreateDialogOpen,
+      toast2,
+      result,
+      `Error creating ${t$1("engage:one_time")}`,
+      "Please try again"
+    );
+    resetListPagination();
+    if (result !== false) {
+      navigate(`/automations/view-modal/${result}?showBackButton=true`);
+    }
+  };
+  const setUrl = useCallback(
+    (id2) => `/automations/view-modal/${id2}?showBackButton=true`,
+    []
+  );
+  const columns = useMemo(
+    () => createColumns({
+      automationName: t$1("engage:one_time"),
+      setUrl,
+      onToggle: handleToggle
+    }),
+    [handleToggle, setUrl]
+  );
+  const headerActionsContent = /* @__PURE__ */ jsxs(Button$1, { className: "bg-primary", onClick: () => setCreateDialogOpen(true), children: [
+    /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-1" }),
+    "New"
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-[75vh] flex flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-grow min-h-0 p-2", children: /* @__PURE__ */ jsx(
+      TanstackTable,
+      {
+        data: broadcasts,
+        columns,
+        paginationMode: "cursor",
+        initialPageSize: pageSizeForQuery,
+        headerActions: headerActionsContent,
+        isLoading: isLoading && !isPlaceholderData,
+        cursorPaginationQueryResult: {
+          nextCursor,
+          isLoading,
+          isFetching,
+          isPlaceholderData
+        },
+        onRowClick: (row) => {
+          navigate(`/automations/view-modal/${row.id}?showBackButton=true`);
+        },
+        onQueryParametersChange: handleQueryParametersChange,
+        searchValue: searchQuery,
+        onSearchChange: setSearchQuery
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      CreateAutomationDialog,
+      {
+        open: createDialogOpen,
+        setOpen: setCreateDialogOpen,
+        onClose: onDialogClose,
+        automationType: AutomationTriggerType.ONE_TIME
+      }
+    )
+  ] });
+}
+const DEFAULT_PAGE_SIZE = 10;
+function SegmentList() {
+  const { toast: toast2 } = useToast();
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [selectedSegment, setSelectedSegment] = useState(null);
+  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE);
+  const [cursorForQuery, setCursorForQuery] = useState(
+    void 0
+  );
+  const [searchQuery, setSearchQuery] = useState("");
+  const { segments, isLoading, nextCursor, isFetching, isPlaceholderData } = useListSegments({
+    search: searchQuery || void 0,
+    cursor: cursorForQuery,
+    limit: pageSizeForQuery
+  });
+  const toggleSelectedSegment = useCallback(
+    (id2) => {
+      setSelectedSegment(id2);
+      setCreateDialogOpen(true);
+    },
+    [setSelectedSegment]
+  );
+  const columns = useMemo(
+    () => createSegmentColumns(toggleSelectedSegment),
+    [toggleSelectedSegment]
+  );
+  const segmentsMapped = useMemo(
+    () => segments ? segments.map((segment2) => ({
+      ...segment2,
+      updated_at: segment2.createdAt.toString(),
+      user_count: segment2.userCount,
+      user_count_updated_at: segment2.userCountUpdatedAt
+    })) : [],
+    [segments]
+  );
+  const headerActionsContent = useMemo(() => {
+    return /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        onClick: () => {
+          setSelectedSegment(null);
+          setCreateDialogOpen(true);
+        },
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+          "New List"
+        ]
+      }
+    );
+  }, []);
+  const handleQueryParametersChange = useCallback(
+    (params) => {
+      setCursorForQuery(params.cursor);
+      setPageSizeForQuery(params.pageSize);
+    },
+    []
+  );
+  const resetListPagination = () => {
+    setCursorForQuery(void 0);
+    setPageSizeForQuery(DEFAULT_PAGE_SIZE);
+    setSearchQuery("");
+  };
+  const onDialogClose = (result) => {
+    handleDialogClose(
+      setCreateDialogOpen,
+      toast2,
+      result,
+      `Error creating ${t$1("engage:segment")}`,
+      "Please try again"
+    );
+    resetListPagination();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-[75vh] flex flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-grow min-h-0 p-2", children: /* @__PURE__ */ jsx(
+      TanstackTable,
+      {
+        data: segmentsMapped,
+        columns,
+        paginationMode: "cursor",
+        initialPageSize: pageSizeForQuery,
+        headerActions: headerActionsContent,
+        isLoading: isLoading && !isPlaceholderData,
+        cursorPaginationQueryResult: {
+          nextCursor,
+          isLoading,
+          isFetching,
+          isPlaceholderData
+        },
+        onQueryParametersChange: handleQueryParametersChange,
+        onRowClick: (row) => {
+          setSelectedSegment(row.id);
+          setCreateDialogOpen(true);
+        },
+        searchValue: searchQuery,
+        onSearchChange: setSearchQuery
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      SegmentBuilderDialog,
+      {
+        open: createDialogOpen,
+        setOpen: setCreateDialogOpen,
+        segmentId: selectedSegment ?? void 0,
+        onSegmentUpdated: onDialogClose
+      }
+    )
+  ] });
+}
+const EngageMain = () => {
+  const engageListTabs = [
+    {
+      id: "broadcasts",
+      label: t$1("engage:one_time", { count: 2 }),
+      content: /* @__PURE__ */ jsx(BroadcastList, {})
+    },
+    {
+      id: "automations",
+      label: t$1("engage:automation", { count: 2 }),
+      content: /* @__PURE__ */ jsx(AutomationList, {})
+    },
+    {
+      id: "segments",
+      label: t$1("engage:segment", { count: 2 }),
+      content: /* @__PURE__ */ jsx(SegmentList, {})
+    },
+    {
+      id: "statistics",
+      label: t$1("engage:insight", { count: 2 }),
+      content: /* @__PURE__ */ jsx(AutomationStatistics, {})
+    }
+  ];
+  const queryClient = useQueryClient();
+  const [engageSettingsOpen, setEngageSettingsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState(engageListTabs[0].id);
+  useEffect(() => {
+    queryClient.prefetchQuery({
+      queryKey: automationKeys.list()
+    });
+    queryClient.prefetchQuery({
+      queryKey: segmentKeys.lists()
+    });
+  }, [queryClient]);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(
+      EngageSettingsDialog,
+      {
+        open: engageSettingsOpen,
+        setOpen: setEngageSettingsOpen
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button$1, { variant: "outline", onClick: () => setEngageSettingsOpen(true), children: /* @__PURE__ */ jsx(Settings, { className: "w-4 h-4" }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 w-full h-full flex flex-col gap-4", children: /* @__PURE__ */ jsx(
+      AnimatedTabs,
+      {
+        activeTab,
+        tabs: engageListTabs,
+        onTabChange: setActiveTab
+      }
+    ) })
+  ] });
+};
+const Engage = () => {
+  return /* @__PURE__ */ jsx(Provider$1, { children: /* @__PURE__ */ jsx(EngageMain, {}) });
+};
 const formSchema$1 = objectType({
   name: stringType().min(2, "Title must be at least 2 characters"),
   description: stringType()
@@ -82013,18 +82591,66 @@ const AutomationsEditorHeader = ({ showBackButton, onDuplicationCreated, onBefor
     if (!showSwitch) {
       return /* @__PURE__ */ jsx(Badge, { variant: getAutomationStatusVariant(automation2.status), children: STATUS_DISPLAY[automation2.status] });
     } else {
-      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-[12ch] cursor-pointer", children: [
-        isActive ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(CircleX, { className: "w-4 h-4" }),
-        /* @__PURE__ */ jsx("div", { className: "text-[13px] font-medium", children: isActive ? "Active" : "Inactive" }),
-        /* @__PURE__ */ jsx(
-          Switch,
-          {
-            checked: isActive,
-            onCheckedChange: handleStatusChange,
-            disabled: disableSwitch
+      switch (automation2.triggerType) {
+        case AutomationTriggerType.TRIGGER_BASED:
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-[12ch] cursor-pointer", children: [
+            isActive ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(CircleX, { className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx("div", { className: "text-[13px] font-medium", children: isActive ? "Active" : "Inactive" }),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: isActive,
+                onCheckedChange: handleStatusChange,
+                disabled: disableSwitch
+              }
+            )
+          ] });
+        case AutomationTriggerType.ONE_TIME: {
+          if (!automation2.triggerMetadata || automation2.triggerMetadata?.triggerType === AutomationTriggerType.ONE_TIME && !automation2.triggerMetadata?.scheduledAt) {
+            return /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                variant: "outline",
+                className: "flex items-center gap-2",
+                disabled: true,
+                children: "Set Scheduled Time"
+              }
+            );
           }
-        )
-      ] });
+          if (!isActive) {
+            let sendText = "Schedule Send";
+            if (automation2.triggerMetadata.triggerType === AutomationTriggerType.ONE_TIME && automation2.triggerMetadata.scheduledAt && new Date(automation2.triggerMetadata.scheduledAt) < new Date(Date.now() + 5 * 60 * 1e3)) {
+              sendText = "Send Now";
+            }
+            return /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                variant: "default",
+                className: "flex items-center gap-2",
+                onClick: () => handleStatusChange(!isActive),
+                disabled: disableSwitch,
+                children: sendText
+              }
+            );
+          } else {
+            return /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                variant: "outline",
+                className: "flex items-center gap-2",
+                onClick: () => handleStatusChange(!isActive),
+                disabled: disableSwitch,
+                children: "Convert to Draft"
+              }
+            );
+          }
+        }
+        default:
+          throw UnreachableCaseStatement(
+            automation2.triggerType,
+            AutomationTriggerType
+          );
+      }
     }
   }, [
     automation2,
@@ -82045,24 +82671,38 @@ const AutomationsEditorHeader = ({ showBackButton, onDuplicationCreated, onBefor
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ml-auto flex gap-4 items-center", children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 text-muted-foreground", children: automation2.triggerType === AutomationTriggerType.ONE_TIME && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10 cursor-pointer", children: /* @__PURE__ */ jsx(
-          InfoTooltip,
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            title: "Edit",
-            Icon: IconDefinitions.EditIcon,
-            asChild: false,
-            onClick: () => setIsEditDialogOpen(true)
+            className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10 cursor-pointer",
+            onClick: () => setIsEditDialogOpen(true),
+            children: /* @__PURE__ */ jsx(
+              InfoTooltip,
+              {
+                title: "Edit",
+                Icon: IconDefinitions.EditIcon,
+                asChild: false,
+                onClick: () => setIsEditDialogOpen(true)
+              }
+            )
           }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10 cursor-pointer", children: /* @__PURE__ */ jsx(
-          InfoTooltip,
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            title: "Duplicate",
-            Icon: IconDefinitions.DuplicateIcon,
-            asChild: false,
-            onClick: () => setIsDuplicateDialogOpen(true)
+            className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10 cursor-pointer",
+            onClick: () => setIsDuplicateDialogOpen(true),
+            children: /* @__PURE__ */ jsx(
+              InfoTooltip,
+              {
+                title: "Duplicate",
+                Icon: IconDefinitions.DuplicateIcon,
+                asChild: false,
+                onClick: () => setIsDuplicateDialogOpen(true)
+              }
+            )
           }
-        ) })
+        )
       ] }) }),
       editingStatus ? /* @__PURE__ */ jsx("div", { className: "flex items-center text-muted-foreground pr-8", children: /* @__PURE__ */ jsx(BasicLoader, {}) }) : renderSwitch()
     ] }),
@@ -84337,9 +84977,7 @@ const DEFAULT_BG = "rgba(245, 246, 247, 1)";
 const STEP_METADATA = {
   [ActionType.SEND_COMMUNICATION]: {
     color: {
-      bg: "rgba(205, 241, 225, 1)",
-      text: "rgba(30, 108, 74, 1)",
-      bgUnselected: DEFAULT_BG
+      bg: DEFAULT_BG
     },
     clickable: true
   },
@@ -84762,12 +85400,15 @@ const AutomationFlowMain = () => {
     }
     return step.actionData.actionType === "send_communication";
   });
-  let renderTriggerAndAudienceStep = () => /* @__PURE__ */ jsx("div", {});
+  let renderTriggerAndAudienceStep = () => (
+    // We need this otherwise we can get a 'Encountered two children with the same key, ``.'
+    /* @__PURE__ */ jsx("div", {}, "empty-trigger-audience")
+  );
   if (isDetailsVisible || automation2.triggerType === AutomationTriggerType.ONE_TIME) {
     renderTriggerAndAudienceStep = () => {
       return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
         automation2.triggerType === AutomationTriggerType.ONE_TIME && /* @__PURE__ */ jsx(AutomationAudienceSelector, {}),
-        /* @__PURE__ */ jsx(AutomationEditorTrigger, {})
+        automation2.triggerType !== AutomationTriggerType.ONE_TIME && /* @__PURE__ */ jsx(AutomationEditorTrigger, {})
       ] });
     };
   }
@@ -84870,7 +85511,8 @@ const AutomationFlowMain = () => {
           children: /* @__PURE__ */ jsx(AutomationsEditorStep, { actionDataWithMetadata: actionData })
         },
         actionData.actionData.actionMetadata?.currentActionId ?? index2
-      ))
+      )),
+      automation2.triggerType === AutomationTriggerType.ONE_TIME && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsx(AutomationEditorTrigger, {}) })
     ] }) })
   ] });
 };