@embedreach/components 0.2.0 → 0.2.2

package/dist/chunks/index.js

@@ -77367,1045 +77367,142 @@ const AutomationsEditorHeader = ({ showBackButton, onDuplicationCreated, onBefor
     )
   ] });
 };
-function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
-  return function handleEvent(event) {
-    originalEventHandler?.(event);
-    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
-      return ourEventHandler?.(event);
-    }
-  };
-}
-function createContextScope(scopeName, createContextScopeDeps = []) {
-  let defaultContexts = [];
-  function createContext3(rootComponentName, defaultContext) {
-    const BaseContext2 = React.createContext(defaultContext);
-    const index2 = defaultContexts.length;
-    defaultContexts = [...defaultContexts, defaultContext];
-    const Provider2 = (props2) => {
-      const { scope, children: children2, ...context2 } = props2;
-      const Context2 = scope?.[scopeName]?.[index2] || BaseContext2;
-      const value = React.useMemo(() => context2, Object.values(context2));
-      return /* @__PURE__ */ jsx(Context2.Provider, { value, children: children2 });
-    };
-    Provider2.displayName = rootComponentName + "Provider";
-    function useContext2(consumerName, scope) {
-      const Context2 = scope?.[scopeName]?.[index2] || BaseContext2;
-      const context2 = React.useContext(Context2);
-      if (context2) return context2;
-      if (defaultContext !== void 0) return defaultContext;
-      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-    }
-    return [Provider2, useContext2];
-  }
-  const createScope = () => {
-    const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React.createContext(defaultContext);
-    });
-    return function useScope(scope) {
-      const contexts = scope?.[scopeName] || scopeContexts;
-      return React.useMemo(
-        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
-        [scope, contexts]
-      );
-    };
-  };
-  createScope.scopeName = scopeName;
-  return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
-}
-function composeContextScopes(...scopes) {
-  const baseScope = scopes[0];
-  if (scopes.length === 1) return baseScope;
-  const createScope = () => {
-    const scopeHooks = scopes.map((createScope2) => ({
-      useScope: createScope2(),
-      scopeName: createScope2.scopeName
-    }));
-    return function useComposedScopes(overrideScopes) {
-      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
-        const scopeProps = useScope(overrideScopes);
-        const currentScope = scopeProps[`__scope${scopeName}`];
-        return { ...nextScopes2, ...currentScope };
-      }, {});
-      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
-    };
-  };
-  createScope.scopeName = baseScope.scopeName;
-  return createScope;
-}
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    return ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    let hasCleanup = false;
-    const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node);
-      if (!hasCleanup && typeof cleanup == "function") {
-        hasCleanup = true;
-      }
-      return cleanup;
-    });
-    if (hasCleanup) {
-      return () => {
-        for (let i3 = 0; i3 < cleanups.length; i3++) {
-          const cleanup = cleanups[i3];
-          if (typeof cleanup == "function") {
-            cleanup();
-          } else {
-            setRef(refs[i3], null);
-          }
-        }
-      };
-    }
-  };
-}
-function useComposedRefs(...refs) {
-  return React.useCallback(composeRefs(...refs), refs);
-}
-// @__NO_SIDE_EFFECTS__
-function createSlot(ownerName) {
-  const SlotClone2 = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React.forwardRef((props2, forwardedRef) => {
-    const { children: children2, ...slotProps } = props2;
-    const childrenArray = React.Children.toArray(children2);
-    const slottable = childrenArray.find(isSlottable);
-    if (slottable) {
-      const newElement = slottable.props.children;
-      const newChildren = childrenArray.map((child) => {
-        if (child === slottable) {
-          if (React.Children.count(newElement) > 1) return React.Children.only(null);
-          return React.isValidElement(newElement) ? newElement.props.children : null;
-        } else {
-          return child;
-        }
-      });
-      return /* @__PURE__ */ jsx(SlotClone2, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
-    }
-    return /* @__PURE__ */ jsx(SlotClone2, { ...slotProps, ref: forwardedRef, children: children2 });
-  });
-  Slot2.displayName = `${ownerName}.Slot`;
-  return Slot2;
-}
-// @__NO_SIDE_EFFECTS__
-function createSlotClone(ownerName) {
-  const SlotClone2 = React.forwardRef((props2, forwardedRef) => {
-    const { children: children2, ...slotProps } = props2;
-    if (React.isValidElement(children2)) {
-      const childrenRef = getElementRef$1(children2);
-      const props22 = mergeProps(slotProps, children2.props);
-      if (children2.type !== React.Fragment) {
-        props22.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+const AutomationsEditorStatsTab = () => {
+  const automation2 = useAutomation();
+  const { isLoading: isStatisticsLoading } = useGetBusinessAutomationStatistics(
+    automation2?.id
+  );
+  if (!automation2 || isStatisticsLoading) {
+    return /* @__PURE__ */ jsx(
+      BasicLoader,
+      {
+        text: [`Fetching ${t$1("engage:insight", { count: 2 })}`, "Finishing up"]
       }
-      return React.cloneElement(children2, props22);
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(
+    AutomationStatistics,
+    {
+      automationId: automation2.id,
+      automation: automation2,
+      includeSales: true
     }
-    return React.Children.count(children2) > 1 ? React.Children.only(null) : null;
-  });
-  SlotClone2.displayName = `${ownerName}.SlotClone`;
-  return SlotClone2;
-}
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
-function isSlottable(child) {
-  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
-function mergeProps(slotProps, childProps) {
-  const overrideProps = { ...childProps };
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args) => {
-          childPropValue(...args);
-          slotPropValue(...args);
-        };
-      } else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
+  ) });
+};
+const AutomationsEditorRecipientsTab = () => {
+  const automation2 = useAutomation();
+  const {
+    recipients,
+    isLoading: isLoadingRecipients,
+    fetchError
+  } = useGetBusinessAutomationRecipients(automation2?.id ?? "");
+  const columns = [
+    {
+      accessorFn: (row) => `${row.firstName || ""} ${row.lastName || ""}`.trim(),
+      id: "name",
+      header: "Name",
+      cell: ({ row }) => {
+        const firstName = row.original.firstName || "";
+        const lastName = row.original.lastName || "";
+        const fullName = `${firstName} ${lastName}`.trim();
+        return fullName ? fullName : /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Not provided" });
       }
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    },
+    {
+      accessorKey: "email",
+      header: "Email",
+      cell: ({ row }) => row.original.email || /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Not provided" })
+    },
+    {
+      accessorKey: "phone",
+      header: "Phone",
+      cell: ({ row }) => row.original.phone || /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Not provided" })
     }
+  ];
+  if (!automation2 || isLoadingRecipients || !recipients) {
+    return /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching Recipients", "Finishing up"] });
   }
-  return { ...slotProps, ...overrideProps };
-}
-function getElementRef$1(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
+  if (fetchError) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      "Error: ",
+      fetchError.message
+    ] });
   }
-  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
+  if (!recipients || recipients.recipients.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-8 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(IconDefinitions.UserIcon, { className: "h-12 w-12 text-gray-400" }) }),
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold text-gray-700", children: "No Recipients Found" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-gray-500", children: [
+        "This ",
+        t$1("engage:automation"),
+        " currently has no assigned recipients. Please update the include or exclude",
+        " ",
+        t$1("engage:segment", { count: 2 }),
+        " to add recipients."
+      ] })
+    ] });
   }
-  return element.props.ref || element.ref;
-}
-function createCollection(name) {
-  const PROVIDER_NAME2 = name + "CollectionProvider";
-  const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME2);
-  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
-    PROVIDER_NAME2,
-    { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
-  );
-  const CollectionProvider = (props2) => {
-    const { scope, children: children2 } = props2;
-    const ref = React__default.useRef(null);
-    const itemMap = React__default.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children: children2 });
-  };
-  CollectionProvider.displayName = PROVIDER_NAME2;
-  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlotImpl = /* @__PURE__ */ createSlot(COLLECTION_SLOT_NAME);
-  const CollectionSlot = React__default.forwardRef(
-    (props2, forwardedRef) => {
-      const { scope, children: children2 } = props2;
-      const context2 = useCollectionContext(COLLECTION_SLOT_NAME, scope);
-      const composedRefs = useComposedRefs(forwardedRef, context2.collectionRef);
-      return /* @__PURE__ */ jsx(CollectionSlotImpl, { ref: composedRefs, children: children2 });
-    }
-  );
-  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
-  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
-  const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlotImpl = /* @__PURE__ */ createSlot(ITEM_SLOT_NAME);
-  const CollectionItemSlot = React__default.forwardRef(
-    (props2, forwardedRef) => {
-      const { scope, children: children2, ...itemData } = props2;
-      const ref = React__default.useRef(null);
-      const composedRefs = useComposedRefs(forwardedRef, ref);
-      const context2 = useCollectionContext(ITEM_SLOT_NAME, scope);
-      React__default.useEffect(() => {
-        context2.itemMap.set(ref, { ref, ...itemData });
-        return () => void context2.itemMap.delete(ref);
-      });
-      return /* @__PURE__ */ jsx(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children: children2 });
+  return /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(
+    TanstackTable,
+    {
+      data: recipients.recipients,
+      columns,
+      paginationMode: "standard",
+      initialPageSize: 10,
+      isLoading: isLoadingRecipients
     }
-  );
-  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
-  function useCollection2(scope) {
-    const context2 = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React__default.useCallback(() => {
-      const collectionNode = context2.collectionRef.current;
-      if (!collectionNode) return [];
-      const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
-      const items = Array.from(context2.itemMap.values());
-      const orderedItems = items.sort(
-        (a4, b3) => orderedNodes.indexOf(a4.ref.current) - orderedNodes.indexOf(b3.ref.current)
-      );
-      return orderedItems;
-    }, [context2.collectionRef, context2.itemMap]);
-    return getItems;
-  }
-  return [
-    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
-    useCollection2,
-    createCollectionScope2
-  ];
-}
-var useLayoutEffect2 = globalThis?.document ? React.useLayoutEffect : () => {
+  ) });
 };
-var useReactId = React[" useId ".trim().toString()] || (() => void 0);
-var count = 0;
-function useId$1(deterministicId) {
-  const [id2, setId] = React.useState(useReactId());
-  useLayoutEffect2(() => {
-    setId((reactId) => reactId ?? String(count++));
-  }, [deterministicId]);
-  return deterministicId || (id2 ? `radix-${id2}` : "");
-}
-var NODES = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "select",
-  "span",
-  "svg",
-  "ul"
-];
-var Primitive = NODES.reduce((primitive, node) => {
-  const Slot2 = /* @__PURE__ */ createSlot(`Primitive.${node}`);
-  const Node2 = React.forwardRef((props2, forwardedRef) => {
-    const { asChild, ...primitiveProps } = props2;
-    const Comp = asChild ? Slot2 : node;
-    if (typeof window !== "undefined") {
-      window[Symbol.for("radix-ui")] = true;
-    }
-    return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
-  });
-  Node2.displayName = `Primitive.${node}`;
-  return { ...primitive, [node]: Node2 };
-}, {});
-function useCallbackRef(callback) {
-  const callbackRef = React.useRef(callback);
-  React.useEffect(() => {
-    callbackRef.current = callback;
-  });
-  return React.useMemo(() => (...args) => callbackRef.current?.(...args), []);
-}
-var useInsertionEffect = React[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
-function useControllableState({
-  prop,
-  defaultProp,
-  onChange = () => {
-  },
-  caller
-}) {
-  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
-    defaultProp,
-    onChange
-  });
-  const isControlled = prop !== void 0;
-  const value = isControlled ? prop : uncontrolledProp;
-  {
-    const isControlledRef = React.useRef(prop !== void 0);
-    React.useEffect(() => {
-      const wasControlled = isControlledRef.current;
-      if (wasControlled !== isControlled) {
-        const from = wasControlled ? "controlled" : "uncontrolled";
-        const to = isControlled ? "controlled" : "uncontrolled";
-        console.warn(
-          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
-        );
-      }
-      isControlledRef.current = isControlled;
-    }, [isControlled, caller]);
+const PanelGroupContext = createContext$1(null);
+PanelGroupContext.displayName = "PanelGroupContext";
+const DATA_ATTRIBUTES = {
+  group: "data-panel-group",
+  groupDirection: "data-panel-group-direction",
+  groupId: "data-panel-group-id",
+  panel: "data-panel",
+  panelCollapsible: "data-panel-collapsible",
+  panelId: "data-panel-id",
+  panelSize: "data-panel-size",
+  resizeHandle: "data-resize-handle",
+  resizeHandleActive: "data-resize-handle-active",
+  resizeHandleEnabled: "data-panel-resize-handle-enabled",
+  resizeHandleId: "data-panel-resize-handle-id",
+  resizeHandleState: "data-resize-handle-state"
+};
+const PRECISION = 10;
+const useIsomorphicLayoutEffect = useLayoutEffect;
+const useId$1 = React["useId".toString()];
+const wrappedUseId = typeof useId$1 === "function" ? useId$1 : () => null;
+let counter = 0;
+function useUniqueId(idFromParams = null) {
+  const idFromUseId = wrappedUseId();
+  const idRef = useRef(idFromParams || idFromUseId || null);
+  if (idRef.current === null) {
+    idRef.current = "" + counter++;
   }
-  const setValue = React.useCallback(
-    (nextValue) => {
-      if (isControlled) {
-        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
-        if (value2 !== prop) {
-          onChangeRef.current?.(value2);
-        }
-      } else {
-        setUncontrolledProp(nextValue);
-      }
-    },
-    [isControlled, prop, setUncontrolledProp, onChangeRef]
-  );
-  return [value, setValue];
+  return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
 }
-function useUncontrolledState({
-  defaultProp,
-  onChange
+function PanelWithForwardedRef({
+  children: children2,
+  className: classNameFromProps = "",
+  collapsedSize,
+  collapsible,
+  defaultSize,
+  forwardedRef,
+  id: idFromProps,
+  maxSize,
+  minSize,
+  onCollapse,
+  onExpand,
+  onResize,
+  order: order2,
+  style: styleFromProps,
+  tagName: Type = "div",
+  ...rest
 }) {
-  const [value, setValue] = React.useState(defaultProp);
-  const prevValueRef = React.useRef(value);
-  const onChangeRef = React.useRef(onChange);
-  useInsertionEffect(() => {
-    onChangeRef.current = onChange;
-  }, [onChange]);
-  React.useEffect(() => {
-    if (prevValueRef.current !== value) {
-      onChangeRef.current?.(value);
-      prevValueRef.current = value;
-    }
-  }, [value, prevValueRef]);
-  return [value, setValue, onChangeRef];
-}
-function isFunction(value) {
-  return typeof value === "function";
-}
-var DirectionContext = React.createContext(void 0);
-function useDirection(localDir) {
-  const globalDir = React.useContext(DirectionContext);
-  return localDir || globalDir || "ltr";
-}
-var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
-var EVENT_OPTIONS = { bubbles: false, cancelable: true };
-var GROUP_NAME = "RovingFocusGroup";
-var [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME);
-var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
-  GROUP_NAME,
-  [createCollectionScope]
-);
-var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
-var RovingFocusGroup = React.forwardRef(
-  (props2, forwardedRef) => {
-    return /* @__PURE__ */ jsx(Collection.Provider, { scope: props2.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props2.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, { ...props2, ref: forwardedRef }) }) });
-  }
-);
-RovingFocusGroup.displayName = GROUP_NAME;
-var RovingFocusGroupImpl = React.forwardRef((props2, forwardedRef) => {
-  const {
-    __scopeRovingFocusGroup,
-    orientation,
-    loop = false,
-    dir,
-    currentTabStopId: currentTabStopIdProp,
-    defaultCurrentTabStopId,
-    onCurrentTabStopIdChange,
-    onEntryFocus,
-    preventScrollOnEntryFocus = false,
-    ...groupProps
-  } = props2;
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  const direction = useDirection(dir);
-  const [currentTabStopId, setCurrentTabStopId] = useControllableState({
-    prop: currentTabStopIdProp,
-    defaultProp: defaultCurrentTabStopId ?? null,
-    onChange: onCurrentTabStopIdChange,
-    caller: GROUP_NAME
-  });
-  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
-  const handleEntryFocus = useCallbackRef(onEntryFocus);
-  const getItems = useCollection(__scopeRovingFocusGroup);
-  const isClickFocusRef = React.useRef(false);
-  const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
-  React.useEffect(() => {
-    const node = ref.current;
-    if (node) {
-      node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
-      return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
-    }
-  }, [handleEntryFocus]);
-  return /* @__PURE__ */ jsx(
-    RovingFocusProvider,
-    {
-      scope: __scopeRovingFocusGroup,
-      orientation,
-      dir: direction,
-      loop,
-      currentTabStopId,
-      onItemFocus: React.useCallback(
-        (tabStopId) => setCurrentTabStopId(tabStopId),
-        [setCurrentTabStopId]
-      ),
-      onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(true), []),
-      onFocusableItemAdd: React.useCallback(
-        () => setFocusableItemsCount((prevCount) => prevCount + 1),
-        []
-      ),
-      onFocusableItemRemove: React.useCallback(
-        () => setFocusableItemsCount((prevCount) => prevCount - 1),
-        []
-      ),
-      children: /* @__PURE__ */ jsx(
-        Primitive.div,
-        {
-          tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
-          "data-orientation": orientation,
-          ...groupProps,
-          ref: composedRefs,
-          style: { outline: "none", ...props2.style },
-          onMouseDown: composeEventHandlers(props2.onMouseDown, () => {
-            isClickFocusRef.current = true;
-          }),
-          onFocus: composeEventHandlers(props2.onFocus, (event) => {
-            const isKeyboardFocus = !isClickFocusRef.current;
-            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
-              const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
-              event.currentTarget.dispatchEvent(entryFocusEvent);
-              if (!entryFocusEvent.defaultPrevented) {
-                const items = getItems().filter((item) => item.focusable);
-                const activeItem = items.find((item) => item.active);
-                const currentItem = items.find((item) => item.id === currentTabStopId);
-                const candidateItems = [activeItem, currentItem, ...items].filter(
-                  Boolean
-                );
-                const candidateNodes = candidateItems.map((item) => item.ref.current);
-                focusFirst(candidateNodes, preventScrollOnEntryFocus);
-              }
-            }
-            isClickFocusRef.current = false;
-          }),
-          onBlur: composeEventHandlers(props2.onBlur, () => setIsTabbingBackOut(false))
-        }
-      )
-    }
-  );
-});
-var ITEM_NAME = "RovingFocusGroupItem";
-var RovingFocusGroupItem = React.forwardRef(
-  (props2, forwardedRef) => {
-    const {
-      __scopeRovingFocusGroup,
-      focusable = true,
-      active = false,
-      tabStopId,
-      children: children2,
-      ...itemProps
-    } = props2;
-    const autoId = useId$1();
-    const id2 = tabStopId || autoId;
-    const context2 = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup);
-    const isCurrentTabStop = context2.currentTabStopId === id2;
-    const getItems = useCollection(__scopeRovingFocusGroup);
-    const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context2;
-    React.useEffect(() => {
-      if (focusable) {
-        onFocusableItemAdd();
-        return () => onFocusableItemRemove();
-      }
-    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    return /* @__PURE__ */ jsx(
-      Collection.ItemSlot,
-      {
-        scope: __scopeRovingFocusGroup,
-        id: id2,
-        focusable,
-        active,
-        children: /* @__PURE__ */ jsx(
-          Primitive.span,
-          {
-            tabIndex: isCurrentTabStop ? 0 : -1,
-            "data-orientation": context2.orientation,
-            ...itemProps,
-            ref: forwardedRef,
-            onMouseDown: composeEventHandlers(props2.onMouseDown, (event) => {
-              if (!focusable) event.preventDefault();
-              else context2.onItemFocus(id2);
-            }),
-            onFocus: composeEventHandlers(props2.onFocus, () => context2.onItemFocus(id2)),
-            onKeyDown: composeEventHandlers(props2.onKeyDown, (event) => {
-              if (event.key === "Tab" && event.shiftKey) {
-                context2.onItemShiftTab();
-                return;
-              }
-              if (event.target !== event.currentTarget) return;
-              const focusIntent = getFocusIntent(event, context2.orientation, context2.dir);
-              if (focusIntent !== void 0) {
-                if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
-                event.preventDefault();
-                const items = getItems().filter((item) => item.focusable);
-                let candidateNodes = items.map((item) => item.ref.current);
-                if (focusIntent === "last") candidateNodes.reverse();
-                else if (focusIntent === "prev" || focusIntent === "next") {
-                  if (focusIntent === "prev") candidateNodes.reverse();
-                  const currentIndex = candidateNodes.indexOf(event.currentTarget);
-                  candidateNodes = context2.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
-                }
-                setTimeout(() => focusFirst(candidateNodes));
-              }
-            }),
-            children: typeof children2 === "function" ? children2({ isCurrentTabStop, hasTabStop: currentTabStopId != null }) : children2
-          }
-        )
-      }
-    );
-  }
-);
-RovingFocusGroupItem.displayName = ITEM_NAME;
-var MAP_KEY_TO_FOCUS_INTENT = {
-  ArrowLeft: "prev",
-  ArrowUp: "prev",
-  ArrowRight: "next",
-  ArrowDown: "next",
-  PageUp: "first",
-  Home: "first",
-  PageDown: "last",
-  End: "last"
-};
-function getDirectionAwareKey(key, dir) {
-  if (dir !== "rtl") return key;
-  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
-}
-function getFocusIntent(event, orientation, dir) {
-  const key = getDirectionAwareKey(event.key, dir);
-  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
-  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
-  return MAP_KEY_TO_FOCUS_INTENT[key];
-}
-function focusFirst(candidates, preventScroll = false) {
-  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
-  for (const candidate of candidates) {
-    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
-    candidate.focus({ preventScroll });
-    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
-  }
-}
-function wrapArray(array, startIndex2) {
-  return array.map((_2, index2) => array[(startIndex2 + index2) % array.length]);
-}
-var Root$1 = RovingFocusGroup;
-var Item = RovingFocusGroupItem;
-function useStateMachine(initialState2, machine) {
-  return React.useReducer((state, event) => {
-    const nextState = machine[state][event];
-    return nextState ?? state;
-  }, initialState2);
-}
-var Presence = (props2) => {
-  const { present, children: children2 } = props2;
-  const presence = usePresence(present);
-  const child = typeof children2 === "function" ? children2({ present: presence.isPresent }) : React.Children.only(children2);
-  const ref = useComposedRefs(presence.ref, getElementRef(child));
-  const forceMount = typeof children2 === "function";
-  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
-};
-Presence.displayName = "Presence";
-function usePresence(present) {
-  const [node, setNode] = React.useState();
-  const stylesRef = React.useRef(null);
-  const prevPresentRef = React.useRef(present);
-  const prevAnimationNameRef = React.useRef("none");
-  const initialState2 = present ? "mounted" : "unmounted";
-  const [state, send] = useStateMachine(initialState2, {
-    mounted: {
-      UNMOUNT: "unmounted",
-      ANIMATION_OUT: "unmountSuspended"
-    },
-    unmountSuspended: {
-      MOUNT: "mounted",
-      ANIMATION_END: "unmounted"
-    },
-    unmounted: {
-      MOUNT: "mounted"
-    }
-  });
-  React.useEffect(() => {
-    const currentAnimationName = getAnimationName(stylesRef.current);
-    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
-  }, [state]);
-  useLayoutEffect2(() => {
-    const styles2 = stylesRef.current;
-    const wasPresent = prevPresentRef.current;
-    const hasPresentChanged = wasPresent !== present;
-    if (hasPresentChanged) {
-      const prevAnimationName = prevAnimationNameRef.current;
-      const currentAnimationName = getAnimationName(styles2);
-      if (present) {
-        send("MOUNT");
-      } else if (currentAnimationName === "none" || styles2?.display === "none") {
-        send("UNMOUNT");
-      } else {
-        const isAnimating = prevAnimationName !== currentAnimationName;
-        if (wasPresent && isAnimating) {
-          send("ANIMATION_OUT");
-        } else {
-          send("UNMOUNT");
-        }
-      }
-      prevPresentRef.current = present;
-    }
-  }, [present, send]);
-  useLayoutEffect2(() => {
-    if (node) {
-      let timeoutId;
-      const ownerWindow = node.ownerDocument.defaultView ?? window;
-      const handleAnimationEnd = (event) => {
-        const currentAnimationName = getAnimationName(stylesRef.current);
-        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
-        if (event.target === node && isCurrentAnimation) {
-          send("ANIMATION_END");
-          if (!prevPresentRef.current) {
-            const currentFillMode = node.style.animationFillMode;
-            node.style.animationFillMode = "forwards";
-            timeoutId = ownerWindow.setTimeout(() => {
-              if (node.style.animationFillMode === "forwards") {
-                node.style.animationFillMode = currentFillMode;
-              }
-            });
-          }
-        }
-      };
-      const handleAnimationStart = (event) => {
-        if (event.target === node) {
-          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
-        }
-      };
-      node.addEventListener("animationstart", handleAnimationStart);
-      node.addEventListener("animationcancel", handleAnimationEnd);
-      node.addEventListener("animationend", handleAnimationEnd);
-      return () => {
-        ownerWindow.clearTimeout(timeoutId);
-        node.removeEventListener("animationstart", handleAnimationStart);
-        node.removeEventListener("animationcancel", handleAnimationEnd);
-        node.removeEventListener("animationend", handleAnimationEnd);
-      };
-    } else {
-      send("ANIMATION_END");
-    }
-  }, [node, send]);
-  return {
-    isPresent: ["mounted", "unmountSuspended"].includes(state),
-    ref: React.useCallback((node2) => {
-      stylesRef.current = node2 ? getComputedStyle(node2) : null;
-      setNode(node2);
-    }, [])
-  };
-}
-function getAnimationName(styles2) {
-  return styles2?.animationName || "none";
-}
-function getElementRef(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
-}
-var TABS_NAME = "Tabs";
-var [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
-  createRovingFocusGroupScope
-]);
-var useRovingFocusGroupScope = createRovingFocusGroupScope();
-var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
-var Tabs$1 = React.forwardRef(
-  (props2, forwardedRef) => {
-    const {
-      __scopeTabs,
-      value: valueProp,
-      onValueChange,
-      defaultValue,
-      orientation = "horizontal",
-      dir,
-      activationMode = "automatic",
-      ...tabsProps
-    } = props2;
-    const direction = useDirection(dir);
-    const [value, setValue] = useControllableState({
-      prop: valueProp,
-      onChange: onValueChange,
-      defaultProp: defaultValue ?? "",
-      caller: TABS_NAME
-    });
-    return /* @__PURE__ */ jsx(
-      TabsProvider,
-      {
-        scope: __scopeTabs,
-        baseId: useId$1(),
-        value,
-        onValueChange: setValue,
-        orientation,
-        dir: direction,
-        activationMode,
-        children: /* @__PURE__ */ jsx(
-          Primitive.div,
-          {
-            dir: direction,
-            "data-orientation": orientation,
-            ...tabsProps,
-            ref: forwardedRef
-          }
-        )
-      }
-    );
-  }
-);
-Tabs$1.displayName = TABS_NAME;
-var TAB_LIST_NAME = "TabsList";
-var TabsList$1 = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeTabs, loop = true, ...listProps } = props2;
-    const context2 = useTabsContext(TAB_LIST_NAME, __scopeTabs);
-    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
-    return /* @__PURE__ */ jsx(
-      Root$1,
-      {
-        asChild: true,
-        ...rovingFocusGroupScope,
-        orientation: context2.orientation,
-        dir: context2.dir,
-        loop,
-        children: /* @__PURE__ */ jsx(
-          Primitive.div,
-          {
-            role: "tablist",
-            "aria-orientation": context2.orientation,
-            ...listProps,
-            ref: forwardedRef
-          }
-        )
-      }
-    );
-  }
-);
-TabsList$1.displayName = TAB_LIST_NAME;
-var TRIGGER_NAME = "TabsTrigger";
-var TabsTrigger$1 = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeTabs, value, disabled = false, ...triggerProps } = props2;
-    const context2 = useTabsContext(TRIGGER_NAME, __scopeTabs);
-    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
-    const triggerId = makeTriggerId(context2.baseId, value);
-    const contentId = makeContentId(context2.baseId, value);
-    const isSelected = value === context2.value;
-    return /* @__PURE__ */ jsx(
-      Item,
-      {
-        asChild: true,
-        ...rovingFocusGroupScope,
-        focusable: !disabled,
-        active: isSelected,
-        children: /* @__PURE__ */ jsx(
-          Primitive.button,
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": isSelected,
-            "aria-controls": contentId,
-            "data-state": isSelected ? "active" : "inactive",
-            "data-disabled": disabled ? "" : void 0,
-            disabled,
-            id: triggerId,
-            ...triggerProps,
-            ref: forwardedRef,
-            onMouseDown: composeEventHandlers(props2.onMouseDown, (event) => {
-              if (!disabled && event.button === 0 && event.ctrlKey === false) {
-                context2.onValueChange(value);
-              } else {
-                event.preventDefault();
-              }
-            }),
-            onKeyDown: composeEventHandlers(props2.onKeyDown, (event) => {
-              if ([" ", "Enter"].includes(event.key)) context2.onValueChange(value);
-            }),
-            onFocus: composeEventHandlers(props2.onFocus, () => {
-              const isAutomaticActivation = context2.activationMode !== "manual";
-              if (!isSelected && !disabled && isAutomaticActivation) {
-                context2.onValueChange(value);
-              }
-            })
-          }
-        )
-      }
-    );
-  }
-);
-TabsTrigger$1.displayName = TRIGGER_NAME;
-var CONTENT_NAME = "TabsContent";
-var TabsContent$1 = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeTabs, value, forceMount, children: children2, ...contentProps } = props2;
-    const context2 = useTabsContext(CONTENT_NAME, __scopeTabs);
-    const triggerId = makeTriggerId(context2.baseId, value);
-    const contentId = makeContentId(context2.baseId, value);
-    const isSelected = value === context2.value;
-    const isMountAnimationPreventedRef = React.useRef(isSelected);
-    React.useEffect(() => {
-      const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
-      return () => cancelAnimationFrame(rAF);
-    }, []);
-    return /* @__PURE__ */ jsx(Presence, { present: forceMount || isSelected, children: ({ present }) => /* @__PURE__ */ jsx(
-      Primitive.div,
-      {
-        "data-state": isSelected ? "active" : "inactive",
-        "data-orientation": context2.orientation,
-        role: "tabpanel",
-        "aria-labelledby": triggerId,
-        hidden: !present,
-        id: contentId,
-        tabIndex: 0,
-        ...contentProps,
-        ref: forwardedRef,
-        style: {
-          ...props2.style,
-          animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0
-        },
-        children: present && children2
-      }
-    ) });
-  }
-);
-TabsContent$1.displayName = CONTENT_NAME;
-function makeTriggerId(baseId, value) {
-  return `${baseId}-trigger-${value}`;
-}
-function makeContentId(baseId, value) {
-  return `${baseId}-content-${value}`;
-}
-var Root2 = Tabs$1;
-var List = TabsList$1;
-var Trigger = TabsTrigger$1;
-var Content = TabsContent$1;
-const Tabs = Root2;
-const TabsList = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx(
-  List,
-  {
-    ref,
-    className: cn$1(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className2
-    ),
-    ...props2
-  }
-));
-TabsList.displayName = List.displayName;
-const TabsTrigger = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx(
-  Trigger,
-  {
-    ref,
-    className: cn$1(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className2
-    ),
-    ...props2
-  }
-));
-TabsTrigger.displayName = Trigger.displayName;
-const TabsContent = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx(
-  Content,
-  {
-    ref,
-    className: cn$1(
-      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className2
-    ),
-    ...props2
-  }
-));
-TabsContent.displayName = Content.displayName;
-const AutomationsEditorStatsTab = () => {
-  const automation2 = useAutomation();
-  const { isLoading: isStatisticsLoading } = useGetBusinessAutomationStatistics(
-    automation2?.id
-  );
-  if (!automation2 || isStatisticsLoading) {
-    return /* @__PURE__ */ jsx(
-      BasicLoader,
-      {
-        text: [`Fetching ${t$1("engage:insight", { count: 2 })}`, "Finishing up"]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(
-    AutomationStatistics,
-    {
-      automationId: automation2.id,
-      automation: automation2,
-      includeSales: true
-    }
-  ) });
-};
-const AutomationsEditorRecipientsTab = () => {
-  const automation2 = useAutomation();
-  const {
-    recipients,
-    isLoading: isLoadingRecipients,
-    fetchError
-  } = useGetBusinessAutomationRecipients(automation2?.id ?? "");
-  const columns = [
-    {
-      accessorFn: (row) => `${row.firstName || ""} ${row.lastName || ""}`.trim(),
-      id: "name",
-      header: "Name",
-      cell: ({ row }) => {
-        const firstName = row.original.firstName || "";
-        const lastName = row.original.lastName || "";
-        const fullName = `${firstName} ${lastName}`.trim();
-        return fullName ? fullName : /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Not provided" });
-      }
-    },
-    {
-      accessorKey: "email",
-      header: "Email",
-      cell: ({ row }) => row.original.email || /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Not provided" })
-    },
-    {
-      accessorKey: "phone",
-      header: "Phone",
-      cell: ({ row }) => row.original.phone || /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Not provided" })
-    }
-  ];
-  if (!automation2 || isLoadingRecipients || !recipients) {
-    return /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching Recipients", "Finishing up"] });
-  }
-  if (fetchError) {
-    return /* @__PURE__ */ jsxs("div", { children: [
-      "Error: ",
-      fetchError.message
-    ] });
-  }
-  if (!recipients || recipients.recipients.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-8 text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(IconDefinitions.UserIcon, { className: "h-12 w-12 text-gray-400" }) }),
-      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold text-gray-700", children: "No Recipients Found" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-gray-500", children: [
-        "This ",
-        t$1("engage:automation"),
-        " currently has no assigned recipients. Please update the include or exclude",
-        " ",
-        t$1("engage:segment", { count: 2 }),
-        " to add recipients."
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(
-    TanstackTable,
-    {
-      data: recipients.recipients,
-      columns,
-      paginationMode: "standard",
-      initialPageSize: 10,
-      isLoading: isLoadingRecipients
-    }
-  ) });
-};
-const PanelGroupContext = createContext$1(null);
-PanelGroupContext.displayName = "PanelGroupContext";
-const DATA_ATTRIBUTES = {
-  group: "data-panel-group",
-  groupDirection: "data-panel-group-direction",
-  groupId: "data-panel-group-id",
-  panel: "data-panel",
-  panelCollapsible: "data-panel-collapsible",
-  panelId: "data-panel-id",
-  panelSize: "data-panel-size",
-  resizeHandle: "data-resize-handle",
-  resizeHandleActive: "data-resize-handle-active",
-  resizeHandleEnabled: "data-panel-resize-handle-enabled",
-  resizeHandleId: "data-panel-resize-handle-id",
-  resizeHandleState: "data-resize-handle-state"
-};
-const PRECISION = 10;
-const useIsomorphicLayoutEffect = useLayoutEffect;
-const useId = React["useId".toString()];
-const wrappedUseId = typeof useId === "function" ? useId : () => null;
-let counter = 0;
-function useUniqueId(idFromParams = null) {
-  const idFromUseId = wrappedUseId();
-  const idRef = useRef(idFromParams || idFromUseId || null);
-  if (idRef.current === null) {
-    idRef.current = "" + counter++;
-  }
-  return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
-}
-function PanelWithForwardedRef({
-  children: children2,
-  className: classNameFromProps = "",
-  collapsedSize,
-  collapsible,
-  defaultSize,
-  forwardedRef,
-  id: idFromProps,
-  maxSize,
-  minSize,
-  onCollapse,
-  onExpand,
-  onResize,
-  order: order2,
-  style: styleFromProps,
-  tagName: Type = "div",
-  ...rest
-}) {
-  const context2 = useContext$1(PanelGroupContext);
-  if (context2 === null) {
-    throw Error(`Panel components must be rendered within a PanelGroup container`);
+  const context2 = useContext$1(PanelGroupContext);
+  if (context2 === null) {
+    throw Error(`Panel components must be rendered within a PanelGroup container`);
   }
   const {
     collapsePanel,
@@ -79849,12 +78946,238 @@ function PanelGroupWithForwardedRef({
           if (onLayout2) {
             onLayout2(nextLayout);
           }
-          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+        }
+      }
+    }
+  }, []);
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
+    const {
+      onLayout: onLayout2
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    if (panelData.constraints.collapsible) {
+      const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints);
+      const {
+        collapsedSize = 0,
+        panelSize = 0,
+        minSize: minSizeFromProps = 0,
+        pivotIndices
+      } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
+      if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
+        const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
+        const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+        const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          initialLayout: prevLayout,
+          panelConstraints: panelConstraintsArray,
+          pivotIndices,
+          prevLayout,
+          trigger: "imperative-api"
+        });
+        if (!compareLayouts(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+          eagerValuesRef.current.layout = nextLayout;
+          if (onLayout2) {
+            onLayout2(nextLayout);
+          }
+          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+        }
+      }
+    }
+  }, []);
+  const getPanelSize = useCallback((panelData) => {
+    const {
+      layout: layout3,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout3);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    return panelSize;
+  }, []);
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
+    return computePanelFlexBoxStyle({
+      defaultSize,
+      dragState,
+      layout: layout2,
+      panelData: panelDataArray,
+      panelIndex
+    });
+  }, [dragState, layout2]);
+  const isPanelCollapsed = useCallback((panelData) => {
+    const {
+      layout: layout3,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize = 0,
+      collapsible,
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout3);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    return collapsible === true && fuzzyNumbersEqual$1(panelSize, collapsedSize);
+  }, []);
+  const isPanelExpanded = useCallback((panelData) => {
+    const {
+      layout: layout3,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize = 0,
+      collapsible,
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout3);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
+  }, []);
+  const registerPanel = useCallback((panelData) => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+    panelDataArray.push(panelData);
+    panelDataArray.sort((panelA, panelB) => {
+      const orderA = panelA.order;
+      const orderB = panelB.order;
+      if (orderA == null && orderB == null) {
+        return 0;
+      } else if (orderA == null) {
+        return -1;
+      } else if (orderB == null) {
+        return 1;
+      } else {
+        return orderA - orderB;
+      }
+    });
+    eagerValuesRef.current.panelDataArrayChanged = true;
+    forceUpdate();
+  }, [forceUpdate]);
+  useIsomorphicLayoutEffect(() => {
+    if (eagerValuesRef.current.panelDataArrayChanged) {
+      eagerValuesRef.current.panelDataArrayChanged = false;
+      const {
+        autoSaveId: autoSaveId2,
+        onLayout: onLayout2,
+        storage: storage2
+      } = committedValuesRef.current;
+      const {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current;
+      let unsafeLayout = null;
+      if (autoSaveId2) {
+        const state = loadPanelGroupState(autoSaveId2, panelDataArray, storage2);
+        if (state) {
+          panelSizeBeforeCollapseRef.current = new Map(Object.entries(state.expandToSizes));
+          unsafeLayout = state.layout;
+        }
+      }
+      if (unsafeLayout == null) {
+        unsafeLayout = calculateUnsafeDefaultLayout({
+          panelDataArray
+        });
+      }
+      const nextLayout = validatePanelGroupLayout({
+        layout: unsafeLayout,
+        panelConstraints: panelDataArray.map((panelData) => panelData.constraints)
+      });
+      if (!areEqual(prevLayout, nextLayout)) {
+        setLayout(nextLayout);
+        eagerValuesRef.current.layout = nextLayout;
+        if (onLayout2) {
+          onLayout2(nextLayout);
+        }
+        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+      }
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
+  const registerResizeHandle2 = useCallback((dragHandleId) => {
+    let isRTL2 = false;
+    const panelGroupElement = panelGroupElementRef.current;
+    if (panelGroupElement) {
+      const style3 = window.getComputedStyle(panelGroupElement, null);
+      if (style3.getPropertyValue("direction") === "rtl") {
+        isRTL2 = true;
+      }
+    }
+    return function resizeHandler(event) {
+      event.preventDefault();
+      const panelGroupElement2 = panelGroupElementRef.current;
+      if (!panelGroupElement2) {
+        return () => null;
+      }
+      const {
+        direction: direction2,
+        dragState: dragState2,
+        id: groupId2,
+        keyboardResizeBy: keyboardResizeBy2,
+        onLayout: onLayout2
+      } = committedValuesRef.current;
+      const {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current;
+      const {
+        initialLayout
+      } = dragState2 !== null && dragState2 !== void 0 ? dragState2 : {};
+      const pivotIndices = determinePivotIndices(groupId2, dragHandleId, panelGroupElement2);
+      let delta = calculateDeltaPercentage(event, dragHandleId, direction2, dragState2, keyboardResizeBy2, panelGroupElement2);
+      const isHorizontal = direction2 === "horizontal";
+      if (isHorizontal && isRTL2) {
+        delta = -delta;
+      }
+      const panelConstraints = panelDataArray.map((panelData) => panelData.constraints);
+      const nextLayout = adjustLayoutByDelta({
+        delta,
+        initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
+        panelConstraints,
+        pivotIndices,
+        prevLayout,
+        trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
+      });
+      const layoutChanged = !compareLayouts(prevLayout, nextLayout);
+      if (isPointerEvent(event) || isMouseEvent(event)) {
+        if (prevDeltaRef.current != delta) {
+          prevDeltaRef.current = delta;
+          if (!layoutChanged && delta !== 0) {
+            if (isHorizontal) {
+              reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX);
+            } else {
+              reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX);
+            }
+          } else {
+            reportConstraintsViolation(dragHandleId, 0);
+          }
         }
       }
-    }
+      if (layoutChanged) {
+        setLayout(nextLayout);
+        eagerValuesRef.current.layout = nextLayout;
+        if (onLayout2) {
+          onLayout2(nextLayout);
+        }
+        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+      }
+    };
   }, []);
-  const expandPanel = useCallback((panelData, minSizeOverride) => {
+  const resizePanel2 = useCallback((panelData, unsafePanelSize) => {
     const {
       onLayout: onLayout2
     } = committedValuesRef.current;
@@ -79862,1116 +79185,1793 @@ function PanelGroupWithForwardedRef({
       layout: prevLayout,
       panelDataArray
     } = eagerValuesRef.current;
-    if (panelData.constraints.collapsible) {
-      const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints);
-      const {
-        collapsedSize = 0,
-        panelSize = 0,
-        minSize: minSizeFromProps = 0,
-        pivotIndices
-      } = panelDataHelper(panelDataArray, panelData, prevLayout);
-      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
-      if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
-        const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
-        const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
-        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
-        const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
-        const nextLayout = adjustLayoutByDelta({
-          delta,
-          initialLayout: prevLayout,
-          panelConstraints: panelConstraintsArray,
-          pivotIndices,
-          prevLayout,
-          trigger: "imperative-api"
-        });
-        if (!compareLayouts(prevLayout, nextLayout)) {
-          setLayout(nextLayout);
-          eagerValuesRef.current.layout = nextLayout;
-          if (onLayout2) {
-            onLayout2(nextLayout);
-          }
-          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-        }
+    const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints);
+    const {
+      panelSize,
+      pivotIndices
+    } = panelDataHelper(panelDataArray, panelData, prevLayout);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+    const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
+    const nextLayout = adjustLayoutByDelta({
+      delta,
+      initialLayout: prevLayout,
+      panelConstraints: panelConstraintsArray,
+      pivotIndices,
+      prevLayout,
+      trigger: "imperative-api"
+    });
+    if (!compareLayouts(prevLayout, nextLayout)) {
+      setLayout(nextLayout);
+      eagerValuesRef.current.layout = nextLayout;
+      if (onLayout2) {
+        onLayout2(nextLayout);
       }
+      callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
-  const getPanelSize = useCallback((panelData) => {
+  const reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
     const {
       layout: layout3,
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      panelSize
-    } = panelDataHelper(panelDataArray, panelData, layout3);
-    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
-    return panelSize;
-  }, []);
-  const getPanelStyle = useCallback((panelData, defaultSize) => {
-    const {
-      panelDataArray
-    } = eagerValuesRef.current;
-    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
-    return computePanelFlexBoxStyle({
-      defaultSize,
-      dragState,
-      layout: layout2,
-      panelData: panelDataArray,
-      panelIndex
-    });
-  }, [dragState, layout2]);
-  const isPanelCollapsed = useCallback((panelData) => {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible
+    } = prevConstraints;
     const {
-      layout: layout3,
-      panelDataArray
-    } = eagerValuesRef.current;
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
     const {
-      collapsedSize = 0,
-      collapsible,
-      panelSize
+      panelSize: prevPanelSize
     } = panelDataHelper(panelDataArray, panelData, layout3);
-    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
-    return collapsible === true && fuzzyNumbersEqual$1(panelSize, collapsedSize);
-  }, []);
-  const isPanelExpanded = useCallback((panelData) => {
+    if (prevPanelSize == null) {
+      return;
+    }
+    if (prevCollapsible && nextCollapsible && fuzzyNumbersEqual$1(prevPanelSize, prevCollapsedSize)) {
+      if (!fuzzyNumbersEqual$1(prevCollapsedSize, nextCollapsedSize)) {
+        resizePanel2(panelData, nextCollapsedSize);
+      }
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel2(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel2(panelData, nextMaxSize);
+    }
+  }, [resizePanel2]);
+  const startDragging = useCallback((dragHandleId, event) => {
     const {
-      layout: layout3,
-      panelDataArray
-    } = eagerValuesRef.current;
+      direction: direction2
+    } = committedValuesRef.current;
     const {
-      collapsedSize = 0,
-      collapsible,
-      panelSize
-    } = panelDataHelper(panelDataArray, panelData, layout3);
-    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
-    return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
+      layout: layout3
+    } = eagerValuesRef.current;
+    if (!panelGroupElementRef.current) {
+      return;
+    }
+    const handleElement = getResizeHandleElement(dragHandleId, panelGroupElementRef.current);
+    assert(handleElement, `Drag handle element not found for id "${dragHandleId}"`);
+    const initialCursorPosition = getResizeEventCursorPosition(direction2, event);
+    setDragState({
+      dragHandleId,
+      dragHandleRect: handleElement.getBoundingClientRect(),
+      initialCursorPosition,
+      initialLayout: layout3
+    });
   }, []);
-  const registerPanel = useCallback((panelData) => {
+  const stopDragging = useCallback(() => {
+    setDragState(null);
+  }, []);
+  const unregisterPanel = useCallback((panelData) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
-    panelDataArray.push(panelData);
-    panelDataArray.sort((panelA, panelB) => {
-      const orderA = panelA.order;
-      const orderB = panelB.order;
-      if (orderA == null && orderB == null) {
-        return 0;
-      } else if (orderA == null) {
-        return -1;
-      } else if (orderB == null) {
-        return 1;
-      } else {
-        return orderA - orderB;
+    const index2 = findPanelDataIndex(panelDataArray, panelData);
+    if (index2 >= 0) {
+      panelDataArray.splice(index2, 1);
+      delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
+      eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
+    }
+  }, [forceUpdate]);
+  const context2 = useMemo(() => ({
+    collapsePanel,
+    direction,
+    dragState,
+    expandPanel,
+    getPanelSize,
+    getPanelStyle,
+    groupId,
+    isPanelCollapsed,
+    isPanelExpanded,
+    reevaluatePanelConstraints,
+    registerPanel,
+    registerResizeHandle: registerResizeHandle2,
+    resizePanel: resizePanel2,
+    startDragging,
+    stopDragging,
+    unregisterPanel,
+    panelGroupElement: panelGroupElementRef.current
+  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, reevaluatePanelConstraints, registerPanel, registerResizeHandle2, resizePanel2, startDragging, stopDragging, unregisterPanel]);
+  const style2 = {
+    display: "flex",
+    flexDirection: direction === "horizontal" ? "row" : "column",
+    height: "100%",
+    overflow: "hidden",
+    width: "100%"
+  };
+  return createElement$1(PanelGroupContext.Provider, {
+    value: context2
+  }, createElement$1(Type, {
+    ...rest,
+    children: children2,
+    className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
+    style: {
+      ...style2,
+      ...styleFromProps
+    },
+    // CSS selectors
+    [DATA_ATTRIBUTES.group]: "",
+    [DATA_ATTRIBUTES.groupDirection]: direction,
+    [DATA_ATTRIBUTES.groupId]: groupId
+  }));
+}
+const PanelGroup = forwardRef((props2, ref) => createElement$1(PanelGroupWithForwardedRef, {
+  ...props2,
+  forwardedRef: ref
+}));
+PanelGroupWithForwardedRef.displayName = "PanelGroup";
+PanelGroup.displayName = "forwardRef(PanelGroup)";
+function findPanelDataIndex(panelDataArray, panelData) {
+  return panelDataArray.findIndex((prevPanelData) => prevPanelData === panelData || prevPanelData.id === panelData.id);
+}
+function panelDataHelper(panelDataArray, panelData, layout2) {
+  const panelIndex = findPanelDataIndex(panelDataArray, panelData);
+  const isLastPanel = panelIndex === panelDataArray.length - 1;
+  const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
+  const panelSize = layout2[panelIndex];
+  return {
+    ...panelData.constraints,
+    panelSize,
+    pivotIndices
+  };
+}
+function useWindowSplitterResizeHandlerBehavior({
+  disabled,
+  handleId,
+  resizeHandler,
+  panelGroupElement
+}) {
+  useEffect(() => {
+    if (disabled || resizeHandler == null || panelGroupElement == null) {
+      return;
+    }
+    const handleElement = getResizeHandleElement(handleId, panelGroupElement);
+    if (handleElement == null) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented) {
+        return;
       }
-    });
-    eagerValuesRef.current.panelDataArrayChanged = true;
-    forceUpdate();
-  }, [forceUpdate]);
-  useIsomorphicLayoutEffect(() => {
-    if (eagerValuesRef.current.panelDataArrayChanged) {
-      eagerValuesRef.current.panelDataArrayChanged = false;
-      const {
-        autoSaveId: autoSaveId2,
-        onLayout: onLayout2,
-        storage: storage2
-      } = committedValuesRef.current;
-      const {
-        layout: prevLayout,
-        panelDataArray
-      } = eagerValuesRef.current;
-      let unsafeLayout = null;
-      if (autoSaveId2) {
-        const state = loadPanelGroupState(autoSaveId2, panelDataArray, storage2);
-        if (state) {
-          panelSizeBeforeCollapseRef.current = new Map(Object.entries(state.expandToSizes));
-          unsafeLayout = state.layout;
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "ArrowUp":
+        case "End":
+        case "Home": {
+          event.preventDefault();
+          resizeHandler(event);
+          break;
         }
-      }
-      if (unsafeLayout == null) {
-        unsafeLayout = calculateUnsafeDefaultLayout({
-          panelDataArray
-        });
-      }
-      const nextLayout = validatePanelGroupLayout({
-        layout: unsafeLayout,
-        panelConstraints: panelDataArray.map((panelData) => panelData.constraints)
-      });
-      if (!areEqual(prevLayout, nextLayout)) {
-        setLayout(nextLayout);
-        eagerValuesRef.current.layout = nextLayout;
-        if (onLayout2) {
-          onLayout2(nextLayout);
+        case "F6": {
+          event.preventDefault();
+          const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
+          assert(groupId, `No group element found for id "${groupId}"`);
+          const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
+          const index2 = getResizeHandleElementIndex(groupId, handleId, panelGroupElement);
+          assert(index2 !== null, `No resize element found for id "${handleId}"`);
+          const nextIndex = event.shiftKey ? index2 > 0 ? index2 - 1 : handles.length - 1 : index2 + 1 < handles.length ? index2 + 1 : 0;
+          const nextHandle = handles[nextIndex];
+          nextHandle.focus();
+          break;
         }
-        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
       }
-    }
-  });
-  useIsomorphicLayoutEffect(() => {
-    const eagerValues = eagerValuesRef.current;
+    };
+    handleElement.addEventListener("keydown", onKeyDown);
     return () => {
-      eagerValues.layout = [];
+      handleElement.removeEventListener("keydown", onKeyDown);
     };
-  }, []);
-  const registerResizeHandle2 = useCallback((dragHandleId) => {
-    let isRTL2 = false;
-    const panelGroupElement = panelGroupElementRef.current;
-    if (panelGroupElement) {
-      const style3 = window.getComputedStyle(panelGroupElement, null);
-      if (style3.getPropertyValue("direction") === "rtl") {
-        isRTL2 = true;
-      }
+  }, [panelGroupElement, disabled, handleId, resizeHandler]);
+}
+function PanelResizeHandle({
+  children: children2 = null,
+  className: classNameFromProps = "",
+  disabled = false,
+  hitAreaMargins,
+  id: idFromProps,
+  onBlur,
+  onClick,
+  onDragging,
+  onFocus,
+  onPointerDown,
+  onPointerUp,
+  style: styleFromProps = {},
+  tabIndex = 0,
+  tagName: Type = "div",
+  ...rest
+}) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
+  const elementRef = useRef(null);
+  const callbacksRef = useRef({
+    onClick,
+    onDragging,
+    onPointerDown,
+    onPointerUp
+  });
+  useEffect(() => {
+    callbacksRef.current.onClick = onClick;
+    callbacksRef.current.onDragging = onDragging;
+    callbacksRef.current.onPointerDown = onPointerDown;
+    callbacksRef.current.onPointerUp = onPointerUp;
+  });
+  const panelGroupContext = useContext$1(PanelGroupContext);
+  if (panelGroupContext === null) {
+    throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+  }
+  const {
+    direction,
+    groupId,
+    registerResizeHandle: registerResizeHandleWithParentGroup,
+    startDragging,
+    stopDragging,
+    panelGroupElement
+  } = panelGroupContext;
+  const resizeHandleId = useUniqueId(idFromProps);
+  const [state, setState] = useState("inactive");
+  const [isFocused, setIsFocused] = useState(false);
+  const [resizeHandler, setResizeHandler] = useState(null);
+  const committedValuesRef = useRef({
+    state
+  });
+  useIsomorphicLayoutEffect(() => {
+    committedValuesRef.current.state = state;
+  });
+  useEffect(() => {
+    if (disabled) {
+      setResizeHandler(null);
+    } else {
+      const resizeHandler2 = registerResizeHandleWithParentGroup(resizeHandleId);
+      setResizeHandler(() => resizeHandler2);
     }
-    return function resizeHandler(event) {
-      event.preventDefault();
-      const panelGroupElement2 = panelGroupElementRef.current;
-      if (!panelGroupElement2) {
-        return () => null;
-      }
-      const {
-        direction: direction2,
-        dragState: dragState2,
-        id: groupId2,
-        keyboardResizeBy: keyboardResizeBy2,
-        onLayout: onLayout2
-      } = committedValuesRef.current;
-      const {
-        layout: prevLayout,
-        panelDataArray
-      } = eagerValuesRef.current;
-      const {
-        initialLayout
-      } = dragState2 !== null && dragState2 !== void 0 ? dragState2 : {};
-      const pivotIndices = determinePivotIndices(groupId2, dragHandleId, panelGroupElement2);
-      let delta = calculateDeltaPercentage(event, dragHandleId, direction2, dragState2, keyboardResizeBy2, panelGroupElement2);
-      const isHorizontal = direction2 === "horizontal";
-      if (isHorizontal && isRTL2) {
-        delta = -delta;
+  }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
+  useEffect(() => {
+    if (disabled || resizeHandler == null) {
+      return;
+    }
+    const element = elementRef.current;
+    assert(element, "Element ref not attached");
+    let didMove = false;
+    const setResizeHandlerState = (action, isActive, event) => {
+      if (!isActive) {
+        setState("inactive");
+        return;
       }
-      const panelConstraints = panelDataArray.map((panelData) => panelData.constraints);
-      const nextLayout = adjustLayoutByDelta({
-        delta,
-        initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
-        panelConstraints,
-        pivotIndices,
-        prevLayout,
-        trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
-      });
-      const layoutChanged = !compareLayouts(prevLayout, nextLayout);
-      if (isPointerEvent(event) || isMouseEvent(event)) {
-        if (prevDeltaRef.current != delta) {
-          prevDeltaRef.current = delta;
-          if (!layoutChanged && delta !== 0) {
-            if (isHorizontal) {
-              reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX);
-            } else {
-              reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX);
-            }
-          } else {
-            reportConstraintsViolation(dragHandleId, 0);
+      switch (action) {
+        case "down": {
+          setState("drag");
+          didMove = false;
+          assert(event, 'Expected event to be defined for "down" action');
+          startDragging(resizeHandleId, event);
+          const {
+            onDragging: onDragging2,
+            onPointerDown: onPointerDown2
+          } = callbacksRef.current;
+          onDragging2 === null || onDragging2 === void 0 ? void 0 : onDragging2(true);
+          onPointerDown2 === null || onPointerDown2 === void 0 ? void 0 : onPointerDown2();
+          break;
+        }
+        case "move": {
+          const {
+            state: state2
+          } = committedValuesRef.current;
+          didMove = true;
+          if (state2 !== "drag") {
+            setState("hover");
+          }
+          assert(event, 'Expected event to be defined for "move" action');
+          resizeHandler(event);
+          break;
+        }
+        case "up": {
+          setState("hover");
+          stopDragging();
+          const {
+            onClick: onClick2,
+            onDragging: onDragging2,
+            onPointerUp: onPointerUp2
+          } = callbacksRef.current;
+          onDragging2 === null || onDragging2 === void 0 ? void 0 : onDragging2(false);
+          onPointerUp2 === null || onPointerUp2 === void 0 ? void 0 : onPointerUp2();
+          if (!didMove) {
+            onClick2 === null || onClick2 === void 0 ? void 0 : onClick2();
           }
+          break;
         }
       }
-      if (layoutChanged) {
-        setLayout(nextLayout);
-        eagerValuesRef.current.layout = nextLayout;
-        if (onLayout2) {
-          onLayout2(nextLayout);
-        }
-        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-      }
     };
-  }, []);
-  const resizePanel2 = useCallback((panelData, unsafePanelSize) => {
-    const {
-      onLayout: onLayout2
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints);
-    const {
-      panelSize,
-      pivotIndices
-    } = panelDataHelper(panelDataArray, panelData, prevLayout);
-    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
-    const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
-    const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
-    const nextLayout = adjustLayoutByDelta({
-      delta,
-      initialLayout: prevLayout,
-      panelConstraints: panelConstraintsArray,
-      pivotIndices,
-      prevLayout,
-      trigger: "imperative-api"
-    });
-    if (!compareLayouts(prevLayout, nextLayout)) {
-      setLayout(nextLayout);
-      eagerValuesRef.current.layout = nextLayout;
-      if (onLayout2) {
-        onLayout2(nextLayout);
-      }
-      callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+    return registerResizeHandle(resizeHandleId, element, direction, {
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
+    }, setResizeHandlerState);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  useWindowSplitterResizeHandlerBehavior({
+    disabled,
+    handleId: resizeHandleId,
+    resizeHandler,
+    panelGroupElement
+  });
+  const style2 = {
+    touchAction: "none",
+    userSelect: "none"
+  };
+  return createElement$1(Type, {
+    ...rest,
+    children: children2,
+    className: classNameFromProps,
+    id: idFromProps,
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
+    ref: elementRef,
+    role: "separator",
+    style: {
+      ...style2,
+      ...styleFromProps
+    },
+    tabIndex,
+    // CSS selectors
+    [DATA_ATTRIBUTES.groupDirection]: direction,
+    [DATA_ATTRIBUTES.groupId]: groupId,
+    [DATA_ATTRIBUTES.resizeHandle]: "",
+    [DATA_ATTRIBUTES.resizeHandleActive]: state === "drag" ? "pointer" : isFocused ? "keyboard" : void 0,
+    [DATA_ATTRIBUTES.resizeHandleEnabled]: !disabled,
+    [DATA_ATTRIBUTES.resizeHandleId]: resizeHandleId,
+    [DATA_ATTRIBUTES.resizeHandleState]: state
+  });
+}
+PanelResizeHandle.displayName = "PanelResizeHandle";
+const ResizablePanelGroup = ({
+  className: className2,
+  ...props2
+}) => /* @__PURE__ */ jsx(
+  PanelGroup,
+  {
+    className: cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className2
+    ),
+    ...props2
+  }
+);
+const ResizablePanel = Panel;
+const ResizableHandle = ({
+  withHandle,
+  className: className2,
+  ...props2
+}) => /* @__PURE__ */ jsx(
+  PanelResizeHandle,
+  {
+    className: cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className2
+    ),
+    ...props2,
+    children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-2.5 w-2.5" }) })
+  }
+);
+const sortAutomationSteps = (args) => {
+  const { steps, rootActionId } = args;
+  if (!steps || !rootActionId) return steps ?? [];
+  const stepMap = new Map(
+    steps.map((step) => [step.actionMetadata.currentActionId, step])
+  );
+  const startStep = stepMap.get(rootActionId);
+  if (!startStep) return steps;
+  const sortedSteps = [];
+  let currentStep = startStep;
+  while (currentStep) {
+    sortedSteps.push(currentStep);
+    const nextId = currentStep.actionMetadata.nextActionId;
+    if (!nextId) break;
+    currentStep = stepMap.get(nextId);
+  }
+  return sortedSteps;
+};
+var BuiltInActionIds = /* @__PURE__ */ ((BuiltInActionIds2) => {
+  BuiltInActionIds2["EditAudience"] = "edit-audience";
+  BuiltInActionIds2["EditTime"] = "edit-time";
+  return BuiltInActionIds2;
+})(BuiltInActionIds || {});
+const AutomationFlowLabel = ({ copyText }) => {
+  return /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: copyText });
+};
+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
+    },
+    clickable: true
+  },
+  [ActionType.WAIT_UNTIL_NEXT_FIXED_TIME]: {
+    color: {
+      bg: DEFAULT_BG
+    },
+    clickable: false
+  }
+};
+const STEP_TYPES = {
+  [ActionType.SEND_COMMUNICATION]: "Send Email & SMS",
+  [ActionType.WAIT_UNTIL_NEXT_FIXED_TIME]: "Wait"
+};
+const BasicsButton = ({
+  children: children2,
+  onClick,
+  iconBgColor,
+  iconStrokeColor,
+  Icon: Icon2,
+  disabled = false,
+  selected = false
+}) => {
+  const IconComponent = Icon2;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      layout: true,
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -20 },
+      transition: { duration: 0.2, ease: "easeInOut" },
+      style: {
+        backgroundColor: selected ? iconBgColor : DEFAULT_BG
+      },
+      className: cn$1(
+        "flex gap-2 items-center rounded-md transition-colors group",
+        "border-2 border-transparent overflow-hidden",
+        !disabled && "hover:border-primary cursor-pointer",
+        selected && "border-primary"
+      ),
+      children: /* @__PURE__ */ jsxs(
+        Button$1,
+        {
+          variant: "ghost",
+          className: "text-left w-full h-full flex items-center gap-2 min-h-none  whitespace-normal rounded-none px-2 group/trigger-audience",
+          onClick,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn$1(
+                  "bg-purple-50 rounded-md p-2 flex items-center justify-center w-8 h-8 flex-shrink-0 transition-colors",
+                  !disabled && "group-hover/trigger-audience:bg-background",
+                  iconBgColor
+                ),
+                children: /* @__PURE__ */ jsx(
+                  IconComponent,
+                  {
+                    className: cn$1(
+                      "w-4 h-4 stroke-purple-500 group-hover/trigger-audience:fill-purple-50 transition-colors",
+                      iconStrokeColor
+                    )
+                  }
+                )
+              }
+            ),
+            children2
+          ]
+        }
+      )
     }
-  }, []);
-  const reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
-    const {
-      layout: layout3,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const {
-      collapsedSize: prevCollapsedSize = 0,
-      collapsible: prevCollapsible
-    } = prevConstraints;
-    const {
-      collapsedSize: nextCollapsedSize = 0,
-      collapsible: nextCollapsible,
-      maxSize: nextMaxSize = 100,
-      minSize: nextMinSize = 0
-    } = panelData.constraints;
-    const {
-      panelSize: prevPanelSize
-    } = panelDataHelper(panelDataArray, panelData, layout3);
-    if (prevPanelSize == null) {
+  );
+};
+const SegmentPill = ({ segmentName }) => {
+  return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center bg-white border border-gray-200 rounded-md px-2 py-0.5 text-sm font-medium shadow-sm", children: segmentName });
+};
+const AutomationAudienceSelector = () => {
+  const automation2 = useAutomation();
+  const {
+    setActionId: setActionId2,
+    state: { selectedActionId }
+  } = useContext$1(Context);
+  const [includeSegmentIds, setIncludeSegmentIds] = useState(
+    automation2?.includeSegmentIds || null
+  );
+  const [excludeSegmentIds, setExcludeSegmentIds] = useState(
+    automation2?.excludeSegmentIds || null
+  );
+  const { segments } = useListSegments();
+  const getAllUsersSegment = useCallback(() => {
+    return segments?.find(
+      (segment2) => segment2.type === BusinessSegmentTypeEnum.ALL_USERS
+    );
+  }, [segments]);
+  useEffect(() => {
+    if (!automation2 || !segments) {
       return;
     }
-    if (prevCollapsible && nextCollapsible && fuzzyNumbersEqual$1(prevPanelSize, prevCollapsedSize)) {
-      if (!fuzzyNumbersEqual$1(prevCollapsedSize, nextCollapsedSize)) {
-        resizePanel2(panelData, nextCollapsedSize);
+    if (includeSegmentIds === null && excludeSegmentIds === null) {
+      setIncludeSegmentIds(automation2?.includeSegmentIds || null);
+      setExcludeSegmentIds(automation2?.excludeSegmentIds || null);
+      if (automation2.includeSegmentIds.length === 0 && automation2.excludeSegmentIds.length === 0) {
+        setIncludeSegmentIds([getAllUsersSegment()?.id || ""]);
+        setExcludeSegmentIds([]);
+      }
+    } else {
+      if (JSON.stringify(automation2.includeSegmentIds) !== JSON.stringify(includeSegmentIds)) {
+        setIncludeSegmentIds(automation2.includeSegmentIds);
+      }
+      if (JSON.stringify(automation2.excludeSegmentIds) !== JSON.stringify(excludeSegmentIds)) {
+        setExcludeSegmentIds(automation2.excludeSegmentIds);
       }
-    } else if (prevPanelSize < nextMinSize) {
-      resizePanel2(panelData, nextMinSize);
-    } else if (prevPanelSize > nextMaxSize) {
-      resizePanel2(panelData, nextMaxSize);
-    }
-  }, [resizePanel2]);
-  const startDragging = useCallback((dragHandleId, event) => {
-    const {
-      direction: direction2
-    } = committedValuesRef.current;
-    const {
-      layout: layout3
-    } = eagerValuesRef.current;
-    if (!panelGroupElementRef.current) {
-      return;
     }
-    const handleElement = getResizeHandleElement(dragHandleId, panelGroupElementRef.current);
-    assert(handleElement, `Drag handle element not found for id "${dragHandleId}"`);
-    const initialCursorPosition = getResizeEventCursorPosition(direction2, event);
-    setDragState({
-      dragHandleId,
-      dragHandleRect: handleElement.getBoundingClientRect(),
-      initialCursorPosition,
-      initialLayout: layout3
-    });
-  }, []);
-  const stopDragging = useCallback(() => {
-    setDragState(null);
-  }, []);
-  const unregisterPanel = useCallback((panelData) => {
-    const {
-      panelDataArray
-    } = eagerValuesRef.current;
-    const index2 = findPanelDataIndex(panelDataArray, panelData);
-    if (index2 >= 0) {
-      panelDataArray.splice(index2, 1);
-      delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
-      eagerValuesRef.current.panelDataArrayChanged = true;
-      forceUpdate();
+  }, [
+    automation2,
+    excludeSegmentIds,
+    includeSegmentIds,
+    segments,
+    getAllUsersSegment
+  ]);
+  if (!automation2 || !includeSegmentIds || !excludeSegmentIds) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    BasicsButton,
+    {
+      selected: selectedActionId === BuiltInActionIds.EditAudience,
+      iconBgColor: "bg-purple-50",
+      iconStrokeColor: "stroke-purple-500",
+      onClick: () => {
+        setActionId2(BuiltInActionIds.EditAudience);
+      },
+      Icon: IconDefinitions.AudienceIcon,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
+        /* @__PURE__ */ jsx(MinorText, { children: "Audience" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+          /* @__PURE__ */ jsx(
+            AutomationFlowLabel,
+            {
+              copyText: `Send to all ${t$1("engage:user", {
+                count: 2
+              })} in ${includeSegmentIds.length === 1 ? "this" : "these"} ${t$1(
+                "engage:segment",
+                {
+                  count: includeSegmentIds.length
+                }
+              ).toLowerCase()}`
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-1 flex-wrap", children: includeSegmentIds.map((id2) => {
+            const segment2 = segments?.find((segment22) => segment22.id === id2);
+            if (!segment2) return null;
+            return /* @__PURE__ */ jsx(SegmentPill, { segmentName: segment2.name }, id2);
+          }) })
+        ] })
+      ] })
+    }
+  ) });
+};
+const AutomationEditorTrigger = () => {
+  const automation2 = useAutomation();
+  const {
+    setActionId: setActionId2,
+    state: { selectedActionId }
+  } = useContext$1(Context);
+  const { segments } = useListSegments();
+  const START_THIS_AUTOMATION_COPY_TEXT = `Start this ${t$1("engage:automation").toLowerCase()}`;
+  if (!automation2 || !segments) {
+    return null;
+  }
+  const renderTriggerData = () => {
+    switch (automation2.triggerType) {
+      case AutomationTriggerType.TRIGGER_BASED: {
+        if (automation2.triggerMetadata.triggerType !== AutomationTriggerType.TRIGGER_BASED || automation2.triggerMetadata.eventName !== "USER_JOINED_SEGMENT" || !automation2.triggerMetadata.eventFilter.segment_id) {
+          return null;
+        }
+        const segmentId = automation2.triggerMetadata.eventFilter.segment_id;
+        const segmentName = segments.find(
+          (segment2) => segment2.id === segmentId
+        )?.name;
+        if (!segmentName) {
+          return null;
+        }
+        return /* @__PURE__ */ jsx(
+          BasicsButton,
+          {
+            iconBgColor: "bg-amber-100",
+            disabled: true,
+            iconStrokeColor: "stroke-amber-500",
+            onClick: () => {
+            },
+            Icon: IconDefinitions.TriggerIcon,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
+              /* @__PURE__ */ jsx(MinorText, { children: START_THIS_AUTOMATION_COPY_TEXT }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                /* @__PURE__ */ jsx(
+                  AutomationFlowLabel,
+                  {
+                    copyText: `When ${t$1("engage:user").toLowerCase()} joins the`
+                  }
+                ),
+                /* @__PURE__ */ jsx(SegmentPill, { segmentName })
+              ] })
+            ] })
+          }
+        );
+      }
+      case AutomationTriggerType.ONE_TIME: {
+        const needsDate = !automation2.triggerMetadata || !("scheduledAt" in automation2.triggerMetadata);
+        return /* @__PURE__ */ jsxs(
+          BasicsButton,
+          {
+            iconBgColor: "bg-amber-100",
+            iconStrokeColor: "stroke-amber-500",
+            onClick: () => {
+              setActionId2(BuiltInActionIds.EditTime);
+            },
+            selected: selectedActionId === BuiltInActionIds.EditTime,
+            Icon: IconDefinitions.TriggerIcon,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
+                /* @__PURE__ */ jsx(MinorText, { children: START_THIS_AUTOMATION_COPY_TEXT }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                  needsDate ? /* @__PURE__ */ jsx(
+                    AutomationFlowLabel,
+                    {
+                      copyText: `Click to set the date and time for this ${t$1("engage:one_time")}`
+                    }
+                  ) : /* @__PURE__ */ jsx(AutomationFlowLabel, { copyText: "Bulk send at" }),
+                  needsDate === false && "scheduledAt" in automation2.triggerMetadata && automation2.triggerMetadata.scheduledAt && /* @__PURE__ */ jsx("div", { className: "text-xs font-medium", children: /* @__PURE__ */ jsx(
+                    SegmentPill,
+                    {
+                      segmentName: format$1(
+                        new Date(automation2.triggerMetadata.scheduledAt),
+                        "h:mma MM/dd/yy"
+                      )
+                    }
+                  ) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "", children: needsDate && /* @__PURE__ */ jsx(AlertIcon, { className: "group-hover/trigger-send-date:bg-red-500 group-hover/trigger-send-date:text-white transition-colors" }) })
+            ]
+          }
+        );
+      }
+      default:
+        throw UnreachableCaseStatement(
+          automation2.triggerType,
+          AutomationTriggerType
+        );
     }
-  }, [forceUpdate]);
-  const context2 = useMemo(() => ({
-    collapsePanel,
-    direction,
-    dragState,
-    expandPanel,
-    getPanelSize,
-    getPanelStyle,
-    groupId,
-    isPanelCollapsed,
-    isPanelExpanded,
-    reevaluatePanelConstraints,
-    registerPanel,
-    registerResizeHandle: registerResizeHandle2,
-    resizePanel: resizePanel2,
-    startDragging,
-    stopDragging,
-    unregisterPanel,
-    panelGroupElement: panelGroupElementRef.current
-  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, reevaluatePanelConstraints, registerPanel, registerResizeHandle2, resizePanel2, startDragging, stopDragging, unregisterPanel]);
-  const style2 = {
-    display: "flex",
-    flexDirection: direction === "horizontal" ? "row" : "column",
-    height: "100%",
-    overflow: "hidden",
-    width: "100%"
-  };
-  return createElement$1(PanelGroupContext.Provider, {
-    value: context2
-  }, createElement$1(Type, {
-    ...rest,
-    children: children2,
-    className: classNameFromProps,
-    id: idFromProps,
-    ref: panelGroupElementRef,
-    style: {
-      ...style2,
-      ...styleFromProps
-    },
-    // CSS selectors
-    [DATA_ATTRIBUTES.group]: "",
-    [DATA_ATTRIBUTES.groupDirection]: direction,
-    [DATA_ATTRIBUTES.groupId]: groupId
-  }));
-}
-const PanelGroup = forwardRef((props2, ref) => createElement$1(PanelGroupWithForwardedRef, {
-  ...props2,
-  forwardedRef: ref
-}));
-PanelGroupWithForwardedRef.displayName = "PanelGroup";
-PanelGroup.displayName = "forwardRef(PanelGroup)";
-function findPanelDataIndex(panelDataArray, panelData) {
-  return panelDataArray.findIndex((prevPanelData) => prevPanelData === panelData || prevPanelData.id === panelData.id);
-}
-function panelDataHelper(panelDataArray, panelData, layout2) {
-  const panelIndex = findPanelDataIndex(panelDataArray, panelData);
-  const isLastPanel = panelIndex === panelDataArray.length - 1;
-  const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
-  const panelSize = layout2[panelIndex];
-  return {
-    ...panelData.constraints,
-    panelSize,
-    pivotIndices
   };
-}
-function useWindowSplitterResizeHandlerBehavior({
-  disabled,
-  handleId,
-  resizeHandler,
-  panelGroupElement
-}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: renderTriggerData() });
+};
+const actionTypeToHumanReadable = (actionType) => {
+  switch (actionType) {
+    case ActionType.SEND_COMMUNICATION:
+      return "Send Communication";
+    case ActionType.WAIT_UNTIL_NEXT_FIXED_TIME:
+      return "Wait";
+    default:
+      throw UnreachableCaseStatement$1(actionType, ActionType);
+  }
+};
+const AutomationFlowUtils = {
+  actionTypeToHumanReadable
+};
+const getStepIcon = (type) => {
+  switch (type) {
+    case ActionType.SEND_COMMUNICATION:
+      return /* @__PURE__ */ jsx(IconDefinitions.CommunicationIcon, { className: "w-4 h-4" });
+    case ActionType.WAIT_UNTIL_NEXT_FIXED_TIME:
+      return /* @__PURE__ */ jsx(IconDefinitions.WaitUntilNextFixedTimeIcon, { className: "w-4 h-4" });
+    default:
+      throw UnreachableCaseStatement(type, ActionType);
+  }
+};
+const getWaitStepDetail = (actionMetadata) => {
+  if (!actionMetadata || actionMetadata.actionType !== ActionType.WAIT_UNTIL_NEXT_FIXED_TIME || !("hour" in actionMetadata) || !("minute" in actionMetadata) || !("timezone" in actionMetadata))
+    return null;
+  const { hour, minute, timezone } = actionMetadata;
+  const formattedTime = `${hour?.toString().padStart(2, "0")}:${minute?.toString().padStart(2, "0")}`;
+  return `Wait until next ${formattedTime} ${timezone}`;
+};
+const AutomationsEditorStep = ({
+  actionData
+}) => {
+  const {
+    state: { selectedActionId },
+    setActionId: setActionId2
+  } = useContext$1(Context);
+  const isSelected = useMemo(
+    () => selectedActionId === actionData.actionMetadata.currentActionId,
+    [selectedActionId, actionData.actionMetadata.currentActionId]
+  );
+  const metadata = STEP_METADATA[actionData.actionType];
+  const colors = metadata.color;
+  const clickable = metadata.clickable;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      layout: true,
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -20 },
+      transition: { duration: 0.2, ease: "easeInOut" },
+      className: cn$1(
+        "p-2 pr-3 flex gap-2 items-center rounded-md transition-colors cursor-pointer group",
+        " border-2 border-transparent",
+        isSelected && "border-primary",
+        actionData.actionType !== ActionType.WAIT_UNTIL_NEXT_FIXED_TIME && "hover:border-primary"
+      ),
+      style: {
+        backgroundColor: isSelected ? colors.bg : colors.bgUnselected ?? DEFAULT_BG
+      },
+      onClick: () => {
+        if (clickable) {
+          setActionId2(actionData.actionMetadata.currentActionId);
+        }
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "rounded-md p-2 flex items-center justify-center w-8 h-8 flex-shrink-0 bg-white", children: getStepIcon(actionData.actionType) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                color: isSelected ? colors.text : colors.textUnselected
+              },
+              children: /* @__PURE__ */ jsx(MinorText, { children: STEP_TYPES[actionData.actionType] })
+            }
+          ),
+          actionData.actionType === ActionType.WAIT_UNTIL_NEXT_FIXED_TIME ? /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground font-normal rounded bg-muted/40  w-fit max-w-full truncate", children: getWaitStepDetail(actionData.actionMetadata) }) : /* @__PURE__ */ jsx("div", { className: "text-xs font-medium", children: AutomationFlowUtils.actionTypeToHumanReadable(
+            actionData.actionType
+          ) })
+        ] })
+      ] })
+    }
+  );
+};
+const AutomationFlowMain = () => {
+  const [isDetailsVisible, setIsDetailsVisible] = useState(false);
+  const automation2 = useAutomation();
+  const {
+    setActionId: setActionId2,
+    state: { selectedActionId }
+  } = useContext$1(Context);
   useEffect(() => {
-    if (disabled || resizeHandler == null || panelGroupElement == null) {
+    if (!automation2) {
       return;
     }
-    const handleElement = getResizeHandleElement(handleId, panelGroupElement);
-    if (handleElement == null) {
+    if (selectedActionId) {
       return;
     }
-    const onKeyDown = (event) => {
-      if (event.defaultPrevented) {
-        return;
+    const firstSendCommunicationAction = automation2.actionData?.find(
+      (action) => action.actionType === "send_communication"
+    );
+    if (firstSendCommunicationAction) {
+      setActionId2(firstSendCommunicationAction.actionMetadata.currentActionId);
+    }
+  }, [automation2, setActionId2, selectedActionId]);
+  if (!automation2) {
+    return null;
+  }
+  const automationSteps = sortAutomationSteps({
+    steps: automation2.actionData?.filter((step) => {
+      if (isDetailsVisible) {
+        return true;
       }
-      switch (event.key) {
-        case "ArrowDown":
-        case "ArrowLeft":
-        case "ArrowRight":
-        case "ArrowUp":
-        case "End":
-        case "Home": {
-          event.preventDefault();
-          resizeHandler(event);
-          break;
-        }
-        case "F6": {
-          event.preventDefault();
-          const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
-          assert(groupId, `No group element found for id "${groupId}"`);
-          const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-          const index2 = getResizeHandleElementIndex(groupId, handleId, panelGroupElement);
-          assert(index2 !== null, `No resize element found for id "${handleId}"`);
-          const nextIndex = event.shiftKey ? index2 > 0 ? index2 - 1 : handles.length - 1 : index2 + 1 < handles.length ? index2 + 1 : 0;
-          const nextHandle = handles[nextIndex];
-          nextHandle.focus();
-          break;
-        }
+      return step.actionType === "send_communication";
+    }),
+    rootActionId: automation2.triggerMetadata?.triggerType === AutomationTriggerType.TRIGGER_BASED ? automation2.triggerMetadata.rootActionId : void 0
+  });
+  let renderTriggerAndAudienceStep = () => /* @__PURE__ */ jsx("div", {});
+  if (isDetailsVisible || automation2.triggerType === AutomationTriggerType.ONE_TIME) {
+    renderTriggerAndAudienceStep = () => {
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx(AutomationEditorTrigger, {}),
+        automation2.triggerType === AutomationTriggerType.ONE_TIME && /* @__PURE__ */ jsx(AutomationAudienceSelector, {})
+      ] });
+    };
+  }
+  const renderAutomationDescription = () => {
+    if (!automation2.description) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "w-full mx-auto rounded-xl bg-neutral-50 dark:bg-neutral-900 shadow-sm px-4 py-3 my-2 border border-neutral-200 dark:border-neutral-800 text-neutral-800 dark:text-neutral-100 text-[15px] font-medium leading-snug tracking-tight justify-start",
+        style: {
+          /* Container queries for mobile optimization */
+          containerType: "inline-size"
+        },
+        children: automation2.description
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-2 w-full overflow-visible", children: [
+    renderAutomationDescription(),
+    automation2.triggerType === AutomationTriggerType.TRIGGER_BASED && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center justify-between", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[13px] text-muted-foreground", children: "Messages sent in listed order" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[13px] font-medium", children: "Show all details" }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            defaultChecked: isDetailsVisible,
+            onCheckedChange: () => {
+              setIsDetailsVisible(!isDetailsVisible);
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", children: [
+      renderTriggerAndAudienceStep(),
+      automationSteps.map((actionData, index2) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { opacity: 0, y: 20 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: -20 },
+          transition: {
+            duration: 0.2,
+            delay: index2 * 0.05,
+            ease: "easeInOut"
+          },
+          children: /* @__PURE__ */ jsx(AutomationsEditorStep, { actionData })
+        },
+        actionData.actionMetadata?.currentActionId ?? index2
+      ))
+    ] }) })
+  ] });
+};
+const AutomationsEditorSidebar = () => {
+  const automation2 = useAutomation();
+  const { segments } = useListSegments();
+  if (!automation2 || !segments) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
+      BasicLoader,
+      {
+        text: [
+          `Getting details on your ${t$1("engage:automation", { count: 1 }).toLowerCase()}`,
+          "Finishing up"
+        ]
       }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "h-full pt-4 relative", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-y-auto flex flex-col gap-3", children: /* @__PURE__ */ jsx(AutomationFlowMain, {}) }) });
+};
+const emailActiveIcon = "data:image/svg+xml,%3csvg%20width='17'%20height='16'%20viewBox='0%200%2017%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.32'%20d='M6.66683%201.5C4.79999%201.5%203.86657%201.5%203.15353%201.86331C2.52632%202.18289%202.01639%202.69282%201.69681%203.32003C1.3335%204.03307%201.3335%204.96649%201.3335%206.83333V9.16667C1.3335%2011.0335%201.3335%2011.9669%201.69681%2012.68C2.01639%2013.3072%202.52632%2013.8171%203.15353%2014.1367C3.86657%2014.5%204.79999%2014.5%206.66683%2014.5H10.3335C12.2003%2014.5%2013.1338%2014.5%2013.8468%2014.1367C14.474%2013.8171%2014.9839%2013.3072%2015.3035%2012.68C15.6668%2011.9669%2015.6668%2011.0335%2015.6668%209.16667V6.83333C15.6668%204.96649%2015.6668%204.03307%2015.3035%203.32003C14.9839%202.69282%2014.474%202.18289%2013.8468%201.86331C13.1338%201.5%2012.2003%201.5%2010.3335%201.5H6.66683Z'%20fill='%230B66E4'%20/%3e%3cpath%20d='M12.3125%204.86981C12.5278%204.7825%2012.7821%204.85543%2012.916%205.05633C13.05%205.25736%2013.0191%205.52008%2012.8554%205.68524L12.7773%205.74969L12.1103%206.19403C11.0645%206.89127%2010.4559%207.30338%209.79783%207.50164C9.05705%207.72477%208.27301%207.75304%207.52146%207.58563L7.20212%207.50164C6.7086%207.35295%206.24273%207.08397%205.59958%206.66473L4.88962%206.19403L4.22263%205.74969L4.14451%205.68524C3.98082%205.52008%203.95%205.25736%204.08396%205.05633C4.21789%204.85543%204.47213%204.7825%204.68747%204.86981L4.77732%204.91766L5.44431%205.36199L6.16013%205.83563C6.77757%206.23725%207.12913%206.43582%207.49021%206.54461L7.73923%206.60906C8.32376%206.73923%208.93361%206.71818%209.50974%206.54461C9.99112%206.39957%2010.4556%206.09534%2011.5556%205.36199L12.2226%204.91766L12.3125%204.86981Z'%20fill='%230B66E4'%20/%3e%3c/svg%3e";
+const emailInactiveIcon = "data:image/svg+xml,%3csvg%20width='17'%20height='16'%20viewBox='0%200%2017%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.32'%20d='M6.66683%201.5C4.79999%201.5%203.86657%201.5%203.15353%201.86331C2.52632%202.18289%202.01639%202.69282%201.69681%203.32003C1.3335%204.03307%201.3335%204.96649%201.3335%206.83333V9.16667C1.3335%2011.0335%201.3335%2011.9669%201.69681%2012.68C2.01639%2013.3072%202.52632%2013.8171%203.15353%2014.1367C3.86657%2014.5%204.79999%2014.5%206.66683%2014.5H10.3335C12.2003%2014.5%2013.1338%2014.5%2013.8468%2014.1367C14.474%2013.8171%2014.9839%2013.3072%2015.3035%2012.68C15.6668%2011.9669%2015.6668%2011.0335%2015.6668%209.16667V6.83333C15.6668%204.96649%2015.6668%204.03307%2015.3035%203.32003C14.9839%202.69282%2014.474%202.18289%2013.8468%201.86331C13.1338%201.5%2012.2003%201.5%2010.3335%201.5H6.66683Z'%20fill='%237A8599'%20/%3e%3cpath%20d='M12.3125%204.86981C12.5278%204.7825%2012.7821%204.85543%2012.916%205.05633C13.05%205.25736%2013.0191%205.52008%2012.8554%205.68524L12.7773%205.74969L12.1103%206.19403C11.0645%206.89127%2010.4559%207.30338%209.79783%207.50164C9.05705%207.72477%208.27301%207.75304%207.52146%207.58563L7.20212%207.50164C6.7086%207.35295%206.24273%207.08397%205.59958%206.66473L4.88962%206.19403L4.22263%205.74969L4.14451%205.68524C3.98082%205.52008%203.95%205.25736%204.08396%205.05633C4.21789%204.85543%204.47213%204.7825%204.68747%204.86981L4.77732%204.91766L5.44431%205.36199L6.16013%205.83563C6.77757%206.23725%207.12913%206.43582%207.49021%206.54461L7.73923%206.60906C8.32376%206.73923%208.93361%206.71818%209.50974%206.54461C9.99112%206.39957%2010.4556%206.09534%2011.5556%205.36199L12.2226%204.91766L12.3125%204.86981Z'%20fill='%237A8599'%20/%3e%3c/svg%3e";
+const smsActiveIcon = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.32'%20d='M7.09967%200.833328C5.6062%200.833328%204.85946%200.833328%204.28903%201.12398C3.78727%201.37964%203.37932%201.78759%203.12366%202.28935C2.83301%202.85978%202.83301%203.60652%202.83301%205.09999V10.9C2.83301%2012.3935%202.83301%2013.1402%203.12366%2013.7106C3.37932%2014.2124%203.78727%2014.6204%204.28903%2014.876C4.85946%2015.1667%205.6062%2015.1667%207.09967%2015.1667H8.89967C10.3931%2015.1667%2011.1399%2015.1667%2011.7103%2014.876C12.2121%2014.6204%2012.62%2014.2124%2012.8757%2013.7106C13.1663%2013.1402%2013.1663%2012.3935%2013.1663%2010.9V5.1C13.1663%203.60652%2013.1663%202.85978%2012.8757%202.28935C12.62%201.78759%2012.2121%201.37964%2011.7103%201.12398C11.1399%200.833328%2010.3931%200.833328%208.89968%200.833328H7.09967Z'%20fill='%230B66E4'%20/%3e%3cpath%20d='M9.43457%2012.1764C9.66223%2012.2232%209.83398%2012.4252%209.83398%2012.6667C9.83398%2012.9082%209.66223%2013.1101%209.43457%2013.1569L9.33398%2013.1667H6.66699C6.39085%2013.1667%206.16699%2012.9428%206.16699%2012.6667C6.16699%2012.3905%206.39085%2012.1667%206.66699%2012.1667H9.33398L9.43457%2012.1764ZM8.08594%203.17058C8.50572%203.21356%208.83382%203.56859%208.83398%203.99968C8.83398%204.45981%208.46009%204.83349%208%204.83366C7.56881%204.8335%207.21375%204.50553%207.1709%204.08562L7.16699%203.99968L7.1709%203.91472C7.2136%203.49464%207.5687%203.16684%208%203.16667L8.08594%203.17058Z'%20fill='%230B66E4'%20/%3e%3c/svg%3e";
+const smsInactiveIcon = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.32'%20d='M7.09967%200.833328C5.6062%200.833328%204.85946%200.833328%204.28903%201.12398C3.78727%201.37964%203.37932%201.78759%203.12366%202.28935C2.83301%202.85978%202.83301%203.60652%202.83301%205.09999V10.9C2.83301%2012.3935%202.83301%2013.1402%203.12366%2013.7106C3.37932%2014.2124%203.78727%2014.6204%204.28903%2014.876C4.85946%2015.1667%205.6062%2015.1667%207.09967%2015.1667H8.89967C10.3931%2015.1667%2011.1399%2015.1667%2011.7103%2014.876C12.2121%2014.6204%2012.62%2014.2124%2012.8757%2013.7106C13.1663%2013.1402%2013.1663%2012.3935%2013.1663%2010.9V5.1C13.1663%203.60652%2013.1663%202.85978%2012.8757%202.28935C12.62%201.78759%2012.2121%201.37964%2011.7103%201.12398C11.1399%200.833328%2010.3931%200.833328%208.89968%200.833328H7.09967Z'%20fill='%237A8599'%20/%3e%3cpath%20d='M9.43457%2012.1764C9.66223%2012.2232%209.83398%2012.4252%209.83398%2012.6667C9.83398%2012.9082%209.66223%2013.1101%209.43457%2013.1569L9.33398%2013.1667H6.66699C6.39085%2013.1667%206.16699%2012.9428%206.16699%2012.6667C6.16699%2012.3905%206.39085%2012.1667%206.66699%2012.1667H9.33398L9.43457%2012.1764ZM8.08594%203.17058C8.50572%203.21356%208.83382%203.56859%208.83398%203.99968C8.83398%204.45981%208.46009%204.83349%208%204.83366C7.56881%204.8335%207.21375%204.50553%207.1709%204.08562L7.16699%203.99968L7.1709%203.91472C7.2136%203.49464%207.5687%203.16684%208%203.16667L8.08594%203.17058Z'%20fill='%237A8599'%20/%3e%3c/svg%3e";
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+}
+function createContextScope(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext3(rootComponentName, defaultContext) {
+    const BaseContext2 = React.createContext(defaultContext);
+    const index2 = defaultContexts.length;
+    defaultContexts = [...defaultContexts, defaultContext];
+    const Provider2 = (props2) => {
+      const { scope, children: children2, ...context2 } = props2;
+      const Context2 = scope?.[scopeName]?.[index2] || BaseContext2;
+      const value = React.useMemo(() => context2, Object.values(context2));
+      return /* @__PURE__ */ jsx(Context2.Provider, { value, children: children2 });
     };
-    handleElement.addEventListener("keydown", onKeyDown);
-    return () => {
-      handleElement.removeEventListener("keydown", onKeyDown);
+    Provider2.displayName = rootComponentName + "Provider";
+    function useContext2(consumerName, scope) {
+      const Context2 = scope?.[scopeName]?.[index2] || BaseContext2;
+      const context2 = React.useContext(Context2);
+      if (context2) return context2;
+      if (defaultContext !== void 0) return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    return [Provider2, useContext2];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map((defaultContext) => {
+      return React.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = scope?.[scopeName] || scopeContexts;
+      return React.useMemo(
+        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
+        [scope, contexts]
+      );
     };
-  }, [panelGroupElement, disabled, handleId, resizeHandler]);
+  };
+  createScope.scopeName = scopeName;
+  return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
 }
-function PanelResizeHandle({
-  children: children2 = null,
-  className: classNameFromProps = "",
-  disabled = false,
-  hitAreaMargins,
-  id: idFromProps,
-  onBlur,
-  onClick,
-  onDragging,
-  onFocus,
-  onPointerDown,
-  onPointerUp,
-  style: styleFromProps = {},
-  tabIndex = 0,
-  tagName: Type = "div",
-  ...rest
-}) {
-  var _hitAreaMargins$coars, _hitAreaMargins$fine;
-  const elementRef = useRef(null);
-  const callbacksRef = useRef({
-    onClick,
-    onDragging,
-    onPointerDown,
-    onPointerUp
-  });
-  useEffect(() => {
-    callbacksRef.current.onClick = onClick;
-    callbacksRef.current.onDragging = onDragging;
-    callbacksRef.current.onPointerDown = onPointerDown;
-    callbacksRef.current.onPointerUp = onPointerUp;
-  });
-  const panelGroupContext = useContext$1(PanelGroupContext);
-  if (panelGroupContext === null) {
-    throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+function composeContextScopes(...scopes) {
+  const baseScope = scopes[0];
+  if (scopes.length === 1) return baseScope;
+  const createScope = () => {
+    const scopeHooks = scopes.map((createScope2) => ({
+      useScope: createScope2(),
+      scopeName: createScope2.scopeName
+    }));
+    return function useComposedScopes(overrideScopes) {
+      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+        const scopeProps = useScope(overrideScopes);
+        const currentScope = scopeProps[`__scope${scopeName}`];
+        return { ...nextScopes2, ...currentScope };
+      }, {});
+      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
+  };
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
   }
-  const {
-    direction,
-    groupId,
-    registerResizeHandle: registerResizeHandleWithParentGroup,
-    startDragging,
-    stopDragging,
-    panelGroupElement
-  } = panelGroupContext;
-  const resizeHandleId = useUniqueId(idFromProps);
-  const [state, setState] = useState("inactive");
-  const [isFocused, setIsFocused] = useState(false);
-  const [resizeHandler, setResizeHandler] = useState(null);
-  const committedValuesRef = useRef({
-    state
-  });
-  useIsomorphicLayoutEffect(() => {
-    committedValuesRef.current.state = state;
-  });
-  useEffect(() => {
-    if (disabled) {
-      setResizeHandler(null);
-    } else {
-      const resizeHandler2 = registerResizeHandleWithParentGroup(resizeHandleId);
-      setResizeHandler(() => resizeHandler2);
-    }
-  }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
-  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
-  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
-  useEffect(() => {
-    if (disabled || resizeHandler == null) {
-      return;
-    }
-    const element = elementRef.current;
-    assert(element, "Element ref not attached");
-    let didMove = false;
-    const setResizeHandlerState = (action, isActive, event) => {
-      if (!isActive) {
-        setState("inactive");
-        return;
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
       }
-      switch (action) {
-        case "down": {
-          setState("drag");
-          didMove = false;
-          assert(event, 'Expected event to be defined for "down" action');
-          startDragging(resizeHandleId, event);
-          const {
-            onDragging: onDragging2,
-            onPointerDown: onPointerDown2
-          } = callbacksRef.current;
-          onDragging2 === null || onDragging2 === void 0 ? void 0 : onDragging2(true);
-          onPointerDown2 === null || onPointerDown2 === void 0 ? void 0 : onPointerDown2();
-          break;
-        }
-        case "move": {
-          const {
-            state: state2
-          } = committedValuesRef.current;
-          didMove = true;
-          if (state2 !== "drag") {
-            setState("hover");
-          }
-          assert(event, 'Expected event to be defined for "move" action');
-          resizeHandler(event);
-          break;
-        }
-        case "up": {
-          setState("hover");
-          stopDragging();
-          const {
-            onClick: onClick2,
-            onDragging: onDragging2,
-            onPointerUp: onPointerUp2
-          } = callbacksRef.current;
-          onDragging2 === null || onDragging2 === void 0 ? void 0 : onDragging2(false);
-          onPointerUp2 === null || onPointerUp2 === void 0 ? void 0 : onPointerUp2();
-          if (!didMove) {
-            onClick2 === null || onClick2 === void 0 ? void 0 : onClick2();
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i3 = 0; i3 < cleanups.length; i3++) {
+          const cleanup = cleanups[i3];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i3], null);
           }
-          break;
         }
-      }
-    };
-    return registerResizeHandle(resizeHandleId, element, direction, {
-      coarse: coarseHitAreaMargins,
-      fine: fineHitAreaMargins
-    }, setResizeHandlerState);
-  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
-  useWindowSplitterResizeHandlerBehavior({
-    disabled,
-    handleId: resizeHandleId,
-    resizeHandler,
-    panelGroupElement
-  });
-  const style2 = {
-    touchAction: "none",
-    userSelect: "none"
+      };
+    }
   };
-  return createElement$1(Type, {
-    ...rest,
-    children: children2,
-    className: classNameFromProps,
-    id: idFromProps,
-    onBlur: () => {
-      setIsFocused(false);
-      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    },
-    onFocus: () => {
-      setIsFocused(true);
-      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-    },
-    ref: elementRef,
-    role: "separator",
-    style: {
-      ...style2,
-      ...styleFromProps
-    },
-    tabIndex,
-    // CSS selectors
-    [DATA_ATTRIBUTES.groupDirection]: direction,
-    [DATA_ATTRIBUTES.groupId]: groupId,
-    [DATA_ATTRIBUTES.resizeHandle]: "",
-    [DATA_ATTRIBUTES.resizeHandleActive]: state === "drag" ? "pointer" : isFocused ? "keyboard" : void 0,
-    [DATA_ATTRIBUTES.resizeHandleEnabled]: !disabled,
-    [DATA_ATTRIBUTES.resizeHandleId]: resizeHandleId,
-    [DATA_ATTRIBUTES.resizeHandleState]: state
+}
+function useComposedRefs(...refs) {
+  return React.useCallback(composeRefs(...refs), refs);
+}
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone2 = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React.forwardRef((props2, forwardedRef) => {
+    const { children: children2, ...slotProps } = props2;
+    const childrenArray = React.Children.toArray(children2);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React.Children.count(newElement) > 1) return React.Children.only(null);
+          return React.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx(SlotClone2, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx(SlotClone2, { ...slotProps, ref: forwardedRef, children: children2 });
   });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
 }
-PanelResizeHandle.displayName = "PanelResizeHandle";
-const ResizablePanelGroup = ({
-  className: className2,
-  ...props2
-}) => /* @__PURE__ */ jsx(
-  PanelGroup,
-  {
-    className: cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className2
-    ),
-    ...props2
-  }
-);
-const ResizablePanel = Panel;
-const ResizableHandle = ({
-  withHandle,
-  className: className2,
-  ...props2
-}) => /* @__PURE__ */ jsx(
-  PanelResizeHandle,
-  {
-    className: cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className2
-    ),
-    ...props2,
-    children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-2.5 w-2.5" }) })
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone2 = React.forwardRef((props2, forwardedRef) => {
+    const { children: children2, ...slotProps } = props2;
+    if (React.isValidElement(children2)) {
+      const childrenRef = getElementRef$1(children2);
+      const props22 = mergeProps(slotProps, children2.props);
+      if (children2.type !== React.Fragment) {
+        props22.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React.cloneElement(children2, props22);
+    }
+    return React.Children.count(children2) > 1 ? React.Children.only(null) : null;
+  });
+  SlotClone2.displayName = `${ownerName}.SlotClone`;
+  return SlotClone2;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
   }
-);
-const sortAutomationSteps = (args) => {
-  const { steps, rootActionId } = args;
-  if (!steps || !rootActionId) return steps ?? [];
-  const stepMap = new Map(
-    steps.map((step) => [step.actionMetadata.currentActionId, step])
-  );
-  const startStep = stepMap.get(rootActionId);
-  if (!startStep) return steps;
-  const sortedSteps = [];
-  let currentStep = startStep;
-  while (currentStep) {
-    sortedSteps.push(currentStep);
-    const nextId = currentStep.actionMetadata.nextActionId;
-    if (!nextId) break;
-    currentStep = stepMap.get(nextId);
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef$1(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
   }
-  return sortedSteps;
-};
-var BuiltInActionIds = /* @__PURE__ */ ((BuiltInActionIds2) => {
-  BuiltInActionIds2["EditAudience"] = "edit-audience";
-  BuiltInActionIds2["EditTime"] = "edit-time";
-  return BuiltInActionIds2;
-})(BuiltInActionIds || {});
-const AutomationFlowLabel = ({ copyText }) => {
-  return /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: copyText });
-};
-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
-    },
-    clickable: true
-  },
-  [ActionType.WAIT_UNTIL_NEXT_FIXED_TIME]: {
-    color: {
-      bg: DEFAULT_BG
-    },
-    clickable: false
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
   }
-};
-const STEP_TYPES = {
-  [ActionType.SEND_COMMUNICATION]: "Send Email & SMS",
-  [ActionType.WAIT_UNTIL_NEXT_FIXED_TIME]: "Wait"
-};
-const BasicsButton = ({
-  children: children2,
-  onClick,
-  iconBgColor,
-  iconStrokeColor,
-  Icon: Icon2,
-  disabled = false,
-  selected = false
-}) => {
-  const IconComponent = Icon2;
-  return /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      layout: true,
-      initial: { opacity: 0, y: 20 },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: -20 },
-      transition: { duration: 0.2, ease: "easeInOut" },
-      style: {
-        backgroundColor: selected ? iconBgColor : DEFAULT_BG
-      },
-      className: cn$1(
-        "flex gap-2 items-center rounded-md transition-colors group",
-        "border-2 border-transparent overflow-hidden",
-        !disabled && "hover:border-primary cursor-pointer",
-        selected && "border-primary"
-      ),
-      children: /* @__PURE__ */ jsxs(
-        Button$1,
-        {
-          variant: "ghost",
-          className: "text-left w-full h-full flex items-center gap-2 min-h-none  whitespace-normal rounded-none px-2 group/trigger-audience",
-          onClick,
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn$1(
-                  "bg-purple-50 rounded-md p-2 flex items-center justify-center w-8 h-8 flex-shrink-0 transition-colors",
-                  !disabled && "group-hover/trigger-audience:bg-background",
-                  iconBgColor
-                ),
-                children: /* @__PURE__ */ jsx(
-                  IconComponent,
-                  {
-                    className: cn$1(
-                      "w-4 h-4 stroke-purple-500 group-hover/trigger-audience:fill-purple-50 transition-colors",
-                      iconStrokeColor
-                    )
-                  }
-                )
-              }
-            ),
-            children2
-          ]
-        }
-      )
-    }
+  return element.props.ref || element.ref;
+}
+function createCollection(name) {
+  const PROVIDER_NAME2 = name + "CollectionProvider";
+  const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME2);
+  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
+    PROVIDER_NAME2,
+    { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
   );
-};
-const SegmentPill = ({ segmentName }) => {
-  return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center bg-white border border-gray-200 rounded-md px-2 py-0.5 text-sm font-medium shadow-sm", children: segmentName });
-};
-const AutomationAudienceSelector = () => {
-  const automation2 = useAutomation();
-  const {
-    setActionId: setActionId2,
-    state: { selectedActionId }
-  } = useContext$1(Context);
-  const [includeSegmentIds, setIncludeSegmentIds] = useState(
-    automation2?.includeSegmentIds || null
+  const CollectionProvider = (props2) => {
+    const { scope, children: children2 } = props2;
+    const ref = React__default.useRef(null);
+    const itemMap = React__default.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children: children2 });
+  };
+  CollectionProvider.displayName = PROVIDER_NAME2;
+  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const CollectionSlotImpl = /* @__PURE__ */ createSlot(COLLECTION_SLOT_NAME);
+  const CollectionSlot = React__default.forwardRef(
+    (props2, forwardedRef) => {
+      const { scope, children: children2 } = props2;
+      const context2 = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+      const composedRefs = useComposedRefs(forwardedRef, context2.collectionRef);
+      return /* @__PURE__ */ jsx(CollectionSlotImpl, { ref: composedRefs, children: children2 });
+    }
   );
-  const [excludeSegmentIds, setExcludeSegmentIds] = useState(
-    automation2?.excludeSegmentIds || null
+  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
+  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_DATA_ATTR = "data-radix-collection-item";
+  const CollectionItemSlotImpl = /* @__PURE__ */ createSlot(ITEM_SLOT_NAME);
+  const CollectionItemSlot = React__default.forwardRef(
+    (props2, forwardedRef) => {
+      const { scope, children: children2, ...itemData } = props2;
+      const ref = React__default.useRef(null);
+      const composedRefs = useComposedRefs(forwardedRef, ref);
+      const context2 = useCollectionContext(ITEM_SLOT_NAME, scope);
+      React__default.useEffect(() => {
+        context2.itemMap.set(ref, { ref, ...itemData });
+        return () => void context2.itemMap.delete(ref);
+      });
+      return /* @__PURE__ */ jsx(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children: children2 });
+    }
   );
-  const { segments } = useListSegments();
-  const getAllUsersSegment = useCallback(() => {
-    return segments?.find(
-      (segment2) => segment2.type === BusinessSegmentTypeEnum.ALL_USERS
-    );
-  }, [segments]);
-  useEffect(() => {
-    if (!automation2 || !segments) {
-      return;
+  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
+  function useCollection2(scope) {
+    const context2 = useCollectionContext(name + "CollectionConsumer", scope);
+    const getItems = React__default.useCallback(() => {
+      const collectionNode = context2.collectionRef.current;
+      if (!collectionNode) return [];
+      const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
+      const items = Array.from(context2.itemMap.values());
+      const orderedItems = items.sort(
+        (a4, b3) => orderedNodes.indexOf(a4.ref.current) - orderedNodes.indexOf(b3.ref.current)
+      );
+      return orderedItems;
+    }, [context2.collectionRef, context2.itemMap]);
+    return getItems;
+  }
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection2,
+    createCollectionScope2
+  ];
+}
+var useLayoutEffect2 = globalThis?.document ? React.useLayoutEffect : () => {
+};
+var useReactId = React[" useId ".trim().toString()] || (() => void 0);
+var count = 0;
+function useId(deterministicId) {
+  const [id2, setId] = React.useState(useReactId());
+  useLayoutEffect2(() => {
+    setId((reactId) => reactId ?? String(count++));
+  }, [deterministicId]);
+  return deterministicId || (id2 ? `radix-${id2}` : "");
+}
+var NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive = NODES.reduce((primitive, node) => {
+  const Slot2 = /* @__PURE__ */ createSlot(`Primitive.${node}`);
+  const Node2 = React.forwardRef((props2, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props2;
+    const Comp = asChild ? Slot2 : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
     }
-    if (includeSegmentIds === null && excludeSegmentIds === null) {
-      setIncludeSegmentIds(automation2?.includeSegmentIds || null);
-      setExcludeSegmentIds(automation2?.excludeSegmentIds || null);
-      if (automation2.includeSegmentIds.length === 0 && automation2.excludeSegmentIds.length === 0) {
-        setIncludeSegmentIds([getAllUsersSegment()?.id || ""]);
-        setExcludeSegmentIds([]);
-      }
-    } else {
-      if (JSON.stringify(automation2.includeSegmentIds) !== JSON.stringify(includeSegmentIds)) {
-        setIncludeSegmentIds(automation2.includeSegmentIds);
+    return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+function useCallbackRef(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+}
+var useInsertionEffect = React[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {
+  },
+  caller
+}) {
+  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolledProp;
+  {
+    const isControlledRef = React.useRef(prop !== void 0);
+    React.useEffect(() => {
+      const wasControlled = isControlledRef.current;
+      if (wasControlled !== isControlled) {
+        const from = wasControlled ? "controlled" : "uncontrolled";
+        const to = isControlled ? "controlled" : "uncontrolled";
+        console.warn(
+          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
+        );
       }
-      if (JSON.stringify(automation2.excludeSegmentIds) !== JSON.stringify(excludeSegmentIds)) {
-        setExcludeSegmentIds(automation2.excludeSegmentIds);
+      isControlledRef.current = isControlled;
+    }, [isControlled, caller]);
+  }
+  const setValue = React.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+        if (value2 !== prop) {
+          onChangeRef.current?.(value2);
+        }
+      } else {
+        setUncontrolledProp(nextValue);
       }
+    },
+    [isControlled, prop, setUncontrolledProp, onChangeRef]
+  );
+  return [value, setValue];
+}
+function useUncontrolledState({
+  defaultProp,
+  onChange
+}) {
+  const [value, setValue] = React.useState(defaultProp);
+  const prevValueRef = React.useRef(value);
+  const onChangeRef = React.useRef(onChange);
+  useInsertionEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      onChangeRef.current?.(value);
+      prevValueRef.current = value;
     }
-  }, [
-    automation2,
-    excludeSegmentIds,
-    includeSegmentIds,
-    segments,
-    getAllUsersSegment
-  ]);
-  if (!automation2 || !includeSegmentIds || !excludeSegmentIds) {
-    return null;
+  }, [value, prevValueRef]);
+  return [value, setValue, onChangeRef];
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+var DirectionContext = React.createContext(void 0);
+function useDirection(localDir) {
+  const globalDir = React.useContext(DirectionContext);
+  return localDir || globalDir || "ltr";
+}
+var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+var EVENT_OPTIONS = { bubbles: false, cancelable: true };
+var GROUP_NAME = "RovingFocusGroup";
+var [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME);
+var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
+  GROUP_NAME,
+  [createCollectionScope]
+);
+var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
+var RovingFocusGroup = React.forwardRef(
+  (props2, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Collection.Provider, { scope: props2.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props2.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, { ...props2, ref: forwardedRef }) }) });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    BasicsButton,
+);
+RovingFocusGroup.displayName = GROUP_NAME;
+var RovingFocusGroupImpl = React.forwardRef((props2, forwardedRef) => {
+  const {
+    __scopeRovingFocusGroup,
+    orientation,
+    loop = false,
+    dir,
+    currentTabStopId: currentTabStopIdProp,
+    defaultCurrentTabStopId,
+    onCurrentTabStopIdChange,
+    onEntryFocus,
+    preventScrollOnEntryFocus = false,
+    ...groupProps
+  } = props2;
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const direction = useDirection(dir);
+  const [currentTabStopId, setCurrentTabStopId] = useControllableState({
+    prop: currentTabStopIdProp,
+    defaultProp: defaultCurrentTabStopId ?? null,
+    onChange: onCurrentTabStopIdChange,
+    caller: GROUP_NAME
+  });
+  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
+  const handleEntryFocus = useCallbackRef(onEntryFocus);
+  const getItems = useCollection(__scopeRovingFocusGroup);
+  const isClickFocusRef = React.useRef(false);
+  const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
+      return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+    }
+  }, [handleEntryFocus]);
+  return /* @__PURE__ */ jsx(
+    RovingFocusProvider,
     {
-      selected: selectedActionId === BuiltInActionIds.EditAudience,
-      iconBgColor: "bg-purple-50",
-      iconStrokeColor: "stroke-purple-500",
-      onClick: () => {
-        setActionId2(BuiltInActionIds.EditAudience);
-      },
-      Icon: IconDefinitions.AudienceIcon,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
-        /* @__PURE__ */ jsx(MinorText, { children: "Audience" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-          /* @__PURE__ */ jsx(
-            AutomationFlowLabel,
-            {
-              copyText: `Send to all ${t$1("engage:user", {
-                count: 2
-              })} in ${includeSegmentIds.length === 1 ? "this" : "these"} ${t$1(
-                "engage:segment",
-                {
-                  count: includeSegmentIds.length
-                }
-              ).toLowerCase()}`
+      scope: __scopeRovingFocusGroup,
+      orientation,
+      dir: direction,
+      loop,
+      currentTabStopId,
+      onItemFocus: React.useCallback(
+        (tabStopId) => setCurrentTabStopId(tabStopId),
+        [setCurrentTabStopId]
+      ),
+      onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(true), []),
+      onFocusableItemAdd: React.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount + 1),
+        []
+      ),
+      onFocusableItemRemove: React.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount - 1),
+        []
+      ),
+      children: /* @__PURE__ */ jsx(
+        Primitive.div,
+        {
+          tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
+          "data-orientation": orientation,
+          ...groupProps,
+          ref: composedRefs,
+          style: { outline: "none", ...props2.style },
+          onMouseDown: composeEventHandlers(props2.onMouseDown, () => {
+            isClickFocusRef.current = true;
+          }),
+          onFocus: composeEventHandlers(props2.onFocus, (event) => {
+            const isKeyboardFocus = !isClickFocusRef.current;
+            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+              const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+              event.currentTarget.dispatchEvent(entryFocusEvent);
+              if (!entryFocusEvent.defaultPrevented) {
+                const items = getItems().filter((item) => item.focusable);
+                const activeItem = items.find((item) => item.active);
+                const currentItem = items.find((item) => item.id === currentTabStopId);
+                const candidateItems = [activeItem, currentItem, ...items].filter(
+                  Boolean
+                );
+                const candidateNodes = candidateItems.map((item) => item.ref.current);
+                focusFirst(candidateNodes, preventScrollOnEntryFocus);
+              }
             }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "flex gap-1 flex-wrap", children: includeSegmentIds.map((id2) => {
-            const segment2 = segments?.find((segment22) => segment22.id === id2);
-            if (!segment2) return null;
-            return /* @__PURE__ */ jsx(SegmentPill, { segmentName: segment2.name }, id2);
-          }) })
-        ] })
-      ] })
-    }
-  ) });
-};
-const AutomationEditorTrigger = () => {
-  const automation2 = useAutomation();
-  const {
-    setActionId: setActionId2,
-    state: { selectedActionId }
-  } = useContext$1(Context);
-  const { segments } = useListSegments();
-  const START_THIS_AUTOMATION_COPY_TEXT = `Start this ${t$1("engage:automation").toLowerCase()}`;
-  if (!automation2 || !segments) {
-    return null;
-  }
-  const renderTriggerData = () => {
-    switch (automation2.triggerType) {
-      case AutomationTriggerType.TRIGGER_BASED: {
-        if (automation2.triggerMetadata.triggerType !== AutomationTriggerType.TRIGGER_BASED || automation2.triggerMetadata.eventName !== "USER_JOINED_SEGMENT" || !automation2.triggerMetadata.eventFilter.segment_id) {
-          return null;
-        }
-        const segmentId = automation2.triggerMetadata.eventFilter.segment_id;
-        const segmentName = segments.find(
-          (segment2) => segment2.id === segmentId
-        )?.name;
-        if (!segmentName) {
-          return null;
+            isClickFocusRef.current = false;
+          }),
+          onBlur: composeEventHandlers(props2.onBlur, () => setIsTabbingBackOut(false))
         }
-        return /* @__PURE__ */ jsx(
-          BasicsButton,
-          {
-            iconBgColor: "bg-amber-100",
-            disabled: true,
-            iconStrokeColor: "stroke-amber-500",
-            onClick: () => {
-            },
-            Icon: IconDefinitions.TriggerIcon,
-            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
-              /* @__PURE__ */ jsx(MinorText, { children: START_THIS_AUTOMATION_COPY_TEXT }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                /* @__PURE__ */ jsx(
-                  AutomationFlowLabel,
-                  {
-                    copyText: `When ${t$1("engage:user").toLowerCase()} joins the`
-                  }
-                ),
-                /* @__PURE__ */ jsx(SegmentPill, { segmentName })
-              ] })
-            ] })
-          }
-        );
+      )
+    }
+  );
+});
+var ITEM_NAME = "RovingFocusGroupItem";
+var RovingFocusGroupItem = React.forwardRef(
+  (props2, forwardedRef) => {
+    const {
+      __scopeRovingFocusGroup,
+      focusable = true,
+      active = false,
+      tabStopId,
+      children: children2,
+      ...itemProps
+    } = props2;
+    const autoId = useId();
+    const id2 = tabStopId || autoId;
+    const context2 = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup);
+    const isCurrentTabStop = context2.currentTabStopId === id2;
+    const getItems = useCollection(__scopeRovingFocusGroup);
+    const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context2;
+    React.useEffect(() => {
+      if (focusable) {
+        onFocusableItemAdd();
+        return () => onFocusableItemRemove();
       }
-      case AutomationTriggerType.ONE_TIME: {
-        const needsDate = !automation2.triggerMetadata || !("scheduledAt" in automation2.triggerMetadata);
-        return /* @__PURE__ */ jsxs(
-          BasicsButton,
+    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
+    return /* @__PURE__ */ jsx(
+      Collection.ItemSlot,
+      {
+        scope: __scopeRovingFocusGroup,
+        id: id2,
+        focusable,
+        active,
+        children: /* @__PURE__ */ jsx(
+          Primitive.span,
           {
-            iconBgColor: "bg-amber-100",
-            iconStrokeColor: "stroke-amber-500",
-            onClick: () => {
-              setActionId2(BuiltInActionIds.EditTime);
-            },
-            selected: selectedActionId === BuiltInActionIds.EditTime,
-            Icon: IconDefinitions.TriggerIcon,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
-                /* @__PURE__ */ jsx(MinorText, { children: START_THIS_AUTOMATION_COPY_TEXT }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                  needsDate ? /* @__PURE__ */ jsx(
-                    AutomationFlowLabel,
-                    {
-                      copyText: `Click to set the date and time for this ${t$1("engage:one_time")}`
-                    }
-                  ) : /* @__PURE__ */ jsx(AutomationFlowLabel, { copyText: "Bulk send at" }),
-                  needsDate === false && "scheduledAt" in automation2.triggerMetadata && automation2.triggerMetadata.scheduledAt && /* @__PURE__ */ jsx("div", { className: "text-xs font-medium", children: /* @__PURE__ */ jsx(
-                    SegmentPill,
-                    {
-                      segmentName: format$1(
-                        new Date(automation2.triggerMetadata.scheduledAt),
-                        "h:mma MM/dd/yy"
-                      )
-                    }
-                  ) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "", children: needsDate && /* @__PURE__ */ jsx(AlertIcon, { className: "group-hover/trigger-send-date:bg-red-500 group-hover/trigger-send-date:text-white transition-colors" }) })
-            ]
+            tabIndex: isCurrentTabStop ? 0 : -1,
+            "data-orientation": context2.orientation,
+            ...itemProps,
+            ref: forwardedRef,
+            onMouseDown: composeEventHandlers(props2.onMouseDown, (event) => {
+              if (!focusable) event.preventDefault();
+              else context2.onItemFocus(id2);
+            }),
+            onFocus: composeEventHandlers(props2.onFocus, () => context2.onItemFocus(id2)),
+            onKeyDown: composeEventHandlers(props2.onKeyDown, (event) => {
+              if (event.key === "Tab" && event.shiftKey) {
+                context2.onItemShiftTab();
+                return;
+              }
+              if (event.target !== event.currentTarget) return;
+              const focusIntent = getFocusIntent(event, context2.orientation, context2.dir);
+              if (focusIntent !== void 0) {
+                if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+                event.preventDefault();
+                const items = getItems().filter((item) => item.focusable);
+                let candidateNodes = items.map((item) => item.ref.current);
+                if (focusIntent === "last") candidateNodes.reverse();
+                else if (focusIntent === "prev" || focusIntent === "next") {
+                  if (focusIntent === "prev") candidateNodes.reverse();
+                  const currentIndex = candidateNodes.indexOf(event.currentTarget);
+                  candidateNodes = context2.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+                }
+                setTimeout(() => focusFirst(candidateNodes));
+              }
+            }),
+            children: typeof children2 === "function" ? children2({ isCurrentTabStop, hasTabStop: currentTabStopId != null }) : children2
           }
-        );
+        )
+      }
+    );
+  }
+);
+RovingFocusGroupItem.displayName = ITEM_NAME;
+var MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, orientation, dir) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray(array, startIndex2) {
+  return array.map((_2, index2) => array[(startIndex2 + index2) % array.length]);
+}
+var Root$1 = RovingFocusGroup;
+var Item = RovingFocusGroupItem;
+function useStateMachine(initialState2, machine) {
+  return React.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState2);
+}
+var Presence = (props2) => {
+  const { present, children: children2 } = props2;
+  const presence = usePresence(present);
+  const child = typeof children2 === "function" ? children2({ present: presence.isPresent }) : React.Children.only(children2);
+  const ref = useComposedRefs(presence.ref, getElementRef(child));
+  const forceMount = typeof children2 === "function";
+  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
+};
+Presence.displayName = "Presence";
+function usePresence(present) {
+  const [node, setNode] = React.useState();
+  const stylesRef = React.useRef(null);
+  const prevPresentRef = React.useRef(present);
+  const prevAnimationNameRef = React.useRef("none");
+  const initialState2 = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine(initialState2, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect2(() => {
+    const styles2 = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName(styles2);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles2?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
       }
-      default:
-        throw UnreachableCaseStatement(
-          automation2.triggerType,
-          AutomationTriggerType
-        );
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect2(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
     }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: renderTriggerData() });
-};
-const actionTypeToHumanReadable = (actionType) => {
-  switch (actionType) {
-    case ActionType.SEND_COMMUNICATION:
-      return "Send Communication";
-    case ActionType.WAIT_UNTIL_NEXT_FIXED_TIME:
-      return "Wait";
-    default:
-      throw UnreachableCaseStatement$1(actionType, ActionType);
+}
+function getAnimationName(styles2) {
+  return styles2?.animationName || "none";
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
   }
-};
-const AutomationFlowUtils = {
-  actionTypeToHumanReadable
-};
-const getStepIcon = (type) => {
-  switch (type) {
-    case ActionType.SEND_COMMUNICATION:
-      return /* @__PURE__ */ jsx(IconDefinitions.CommunicationIcon, { className: "w-4 h-4" });
-    case ActionType.WAIT_UNTIL_NEXT_FIXED_TIME:
-      return /* @__PURE__ */ jsx(IconDefinitions.WaitUntilNextFixedTimeIcon, { className: "w-4 h-4" });
-    default:
-      throw UnreachableCaseStatement(type, ActionType);
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
   }
-};
-const getWaitStepDetail = (actionMetadata) => {
-  if (!actionMetadata || actionMetadata.actionType !== ActionType.WAIT_UNTIL_NEXT_FIXED_TIME || !("hour" in actionMetadata) || !("minute" in actionMetadata) || !("timezone" in actionMetadata))
-    return null;
-  const { hour, minute, timezone } = actionMetadata;
-  const formattedTime = `${hour?.toString().padStart(2, "0")}:${minute?.toString().padStart(2, "0")}`;
-  return `Wait until next ${formattedTime} ${timezone}`;
-};
-const AutomationsEditorStep = ({
-  actionData
-}) => {
-  const {
-    state: { selectedActionId },
-    setActionId: setActionId2
-  } = useContext$1(Context);
-  const isSelected = useMemo(
-    () => selectedActionId === actionData.actionMetadata.currentActionId,
-    [selectedActionId, actionData.actionMetadata.currentActionId]
-  );
-  const metadata = STEP_METADATA[actionData.actionType];
-  const colors = metadata.color;
-  const clickable = metadata.clickable;
-  return /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      layout: true,
-      initial: { opacity: 0, y: 20 },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: -20 },
-      transition: { duration: 0.2, ease: "easeInOut" },
-      className: cn$1(
-        "p-2 pr-3 flex gap-2 items-center rounded-md transition-colors cursor-pointer group",
-        " border-2 border-transparent",
-        isSelected && "border-primary",
-        actionData.actionType !== ActionType.WAIT_UNTIL_NEXT_FIXED_TIME && "hover:border-primary"
-      ),
-      style: {
-        backgroundColor: isSelected ? colors.bg : colors.bgUnselected ?? DEFAULT_BG
-      },
-      onClick: () => {
-        if (clickable) {
-          setActionId2(actionData.actionMetadata.currentActionId);
-        }
-      },
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "rounded-md p-2 flex items-center justify-center w-8 h-8 flex-shrink-0 bg-white", children: getStepIcon(actionData.actionType) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                color: isSelected ? colors.text : colors.textUnselected
-              },
-              children: /* @__PURE__ */ jsx(MinorText, { children: STEP_TYPES[actionData.actionType] })
-            }
-          ),
-          actionData.actionType === ActionType.WAIT_UNTIL_NEXT_FIXED_TIME ? /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground font-normal rounded bg-muted/40  w-fit max-w-full truncate", children: getWaitStepDetail(actionData.actionMetadata) }) : /* @__PURE__ */ jsx("div", { className: "text-xs font-medium", children: AutomationFlowUtils.actionTypeToHumanReadable(
-            actionData.actionType
-          ) })
-        ] })
-      ] })
-    }
-  );
-};
-const AutomationFlowMain = () => {
-  const [isDetailsVisible, setIsDetailsVisible] = useState(false);
-  const automation2 = useAutomation();
-  const {
-    setActionId: setActionId2,
-    state: { selectedActionId }
-  } = useContext$1(Context);
-  useEffect(() => {
-    if (!automation2) {
-      return;
-    }
-    if (selectedActionId) {
-      return;
-    }
-    const firstSendCommunicationAction = automation2.actionData?.find(
-      (action) => action.actionType === "send_communication"
+  return element.props.ref || element.ref;
+}
+var TABS_NAME = "Tabs";
+var [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
+  createRovingFocusGroupScope
+]);
+var useRovingFocusGroupScope = createRovingFocusGroupScope();
+var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
+var Tabs$1 = React.forwardRef(
+  (props2, forwardedRef) => {
+    const {
+      __scopeTabs,
+      value: valueProp,
+      onValueChange,
+      defaultValue,
+      orientation = "horizontal",
+      dir,
+      activationMode = "automatic",
+      ...tabsProps
+    } = props2;
+    const direction = useDirection(dir);
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      onChange: onValueChange,
+      defaultProp: defaultValue ?? "",
+      caller: TABS_NAME
+    });
+    return /* @__PURE__ */ jsx(
+      TabsProvider,
+      {
+        scope: __scopeTabs,
+        baseId: useId(),
+        value,
+        onValueChange: setValue,
+        orientation,
+        dir: direction,
+        activationMode,
+        children: /* @__PURE__ */ jsx(
+          Primitive.div,
+          {
+            dir: direction,
+            "data-orientation": orientation,
+            ...tabsProps,
+            ref: forwardedRef
+          }
+        )
+      }
     );
-    if (firstSendCommunicationAction) {
-      setActionId2(firstSendCommunicationAction.actionMetadata.currentActionId);
-    }
-  }, [automation2, setActionId2, selectedActionId]);
-  if (!automation2) {
-    return null;
   }
-  const automationSteps = sortAutomationSteps({
-    steps: automation2.actionData?.filter((step) => {
-      if (isDetailsVisible) {
-        return true;
+);
+Tabs$1.displayName = TABS_NAME;
+var TAB_LIST_NAME = "TabsList";
+var TabsList$1 = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeTabs, loop = true, ...listProps } = props2;
+    const context2 = useTabsContext(TAB_LIST_NAME, __scopeTabs);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
+    return /* @__PURE__ */ jsx(
+      Root$1,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        orientation: context2.orientation,
+        dir: context2.dir,
+        loop,
+        children: /* @__PURE__ */ jsx(
+          Primitive.div,
+          {
+            role: "tablist",
+            "aria-orientation": context2.orientation,
+            ...listProps,
+            ref: forwardedRef
+          }
+        )
       }
-      return step.actionType === "send_communication";
-    }),
-    rootActionId: automation2.triggerMetadata?.triggerType === AutomationTriggerType.TRIGGER_BASED ? automation2.triggerMetadata.rootActionId : void 0
-  });
-  let renderTriggerAndAudienceStep = () => /* @__PURE__ */ jsx(Fragment, {});
-  if (isDetailsVisible || automation2.triggerType === AutomationTriggerType.ONE_TIME) {
-    renderTriggerAndAudienceStep = () => {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(AutomationEditorTrigger, {}),
-        automation2.triggerType === AutomationTriggerType.ONE_TIME && /* @__PURE__ */ jsx(AutomationAudienceSelector, {})
-      ] });
-    };
+    );
   }
-  const renderAutomationDescription = () => {
-    if (!automation2.description) return null;
+);
+TabsList$1.displayName = TAB_LIST_NAME;
+var TRIGGER_NAME = "TabsTrigger";
+var TabsTrigger$1 = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeTabs, value, disabled = false, ...triggerProps } = props2;
+    const context2 = useTabsContext(TRIGGER_NAME, __scopeTabs);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
+    const triggerId = makeTriggerId(context2.baseId, value);
+    const contentId = makeContentId(context2.baseId, value);
+    const isSelected = value === context2.value;
     return /* @__PURE__ */ jsx(
-      "div",
+      Item,
       {
-        className: "w-full mx-auto rounded-xl bg-neutral-50 dark:bg-neutral-900 shadow-sm px-4 py-3 my-2 border border-neutral-200 dark:border-neutral-800 text-neutral-800 dark:text-neutral-100 text-[15px] font-medium leading-snug tracking-tight justify-start",
-        style: {
-          /* Container queries for mobile optimization */
-          containerType: "inline-size"
-        },
-        children: automation2.description
-      }
-    );
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-2 w-full overflow-visible", children: [
-    renderAutomationDescription(),
-    automation2.triggerType === AutomationTriggerType.TRIGGER_BASED && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center justify-between", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-[13px] text-muted-foreground", children: "Messages sent in listed order" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-[13px] font-medium", children: "Show all details" }),
-        /* @__PURE__ */ jsx(
-          Switch,
+        asChild: true,
+        ...rovingFocusGroupScope,
+        focusable: !disabled,
+        active: isSelected,
+        children: /* @__PURE__ */ jsx(
+          Primitive.button,
           {
-            defaultChecked: isDetailsVisible,
-            onCheckedChange: () => {
-              setIsDetailsVisible(!isDetailsVisible);
-            }
+            type: "button",
+            role: "tab",
+            "aria-selected": isSelected,
+            "aria-controls": contentId,
+            "data-state": isSelected ? "active" : "inactive",
+            "data-disabled": disabled ? "" : void 0,
+            disabled,
+            id: triggerId,
+            ...triggerProps,
+            ref: forwardedRef,
+            onMouseDown: composeEventHandlers(props2.onMouseDown, (event) => {
+              if (!disabled && event.button === 0 && event.ctrlKey === false) {
+                context2.onValueChange(value);
+              } else {
+                event.preventDefault();
+              }
+            }),
+            onKeyDown: composeEventHandlers(props2.onKeyDown, (event) => {
+              if ([" ", "Enter"].includes(event.key)) context2.onValueChange(value);
+            }),
+            onFocus: composeEventHandlers(props2.onFocus, () => {
+              const isAutomaticActivation = context2.activationMode !== "manual";
+              if (!isSelected && !disabled && isAutomaticActivation) {
+                context2.onValueChange(value);
+              }
+            })
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", children: [
-      renderTriggerAndAudienceStep(),
-      automationSteps.map((actionData, index2) => /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          initial: { opacity: 0, y: 20 },
-          animate: { opacity: 1, y: 0 },
-          exit: { opacity: 0, y: -20 },
-          transition: {
-            duration: 0.2,
-            delay: index2 * 0.05,
-            ease: "easeInOut"
-          },
-          children: /* @__PURE__ */ jsx(AutomationsEditorStep, { actionData })
-        },
-        actionData.actionMetadata?.currentActionId ?? index2
-      ))
-    ] }) })
-  ] });
-};
-const AutomationsEditorSidebar = () => {
-  const automation2 = useAutomation();
-  const { segments } = useListSegments();
-  if (!automation2 || !segments) {
-    return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
-      BasicLoader,
+      }
+    );
+  }
+);
+TabsTrigger$1.displayName = TRIGGER_NAME;
+var CONTENT_NAME = "TabsContent";
+var TabsContent$1 = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeTabs, value, forceMount, children: children2, ...contentProps } = props2;
+    const context2 = useTabsContext(CONTENT_NAME, __scopeTabs);
+    const triggerId = makeTriggerId(context2.baseId, value);
+    const contentId = makeContentId(context2.baseId, value);
+    const isSelected = value === context2.value;
+    const isMountAnimationPreventedRef = React.useRef(isSelected);
+    React.useEffect(() => {
+      const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
+      return () => cancelAnimationFrame(rAF);
+    }, []);
+    return /* @__PURE__ */ jsx(Presence, { present: forceMount || isSelected, children: ({ present }) => /* @__PURE__ */ jsx(
+      Primitive.div,
       {
-        text: [
-          `Getting details on your ${t$1("engage:automation", { count: 1 }).toLowerCase()}`,
-          "Finishing up"
-        ]
+        "data-state": isSelected ? "active" : "inactive",
+        "data-orientation": context2.orientation,
+        role: "tabpanel",
+        "aria-labelledby": triggerId,
+        hidden: !present,
+        id: contentId,
+        tabIndex: 0,
+        ...contentProps,
+        ref: forwardedRef,
+        style: {
+          ...props2.style,
+          animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0
+        },
+        children: present && children2
       }
     ) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "h-full pt-4 relative", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-y-auto flex flex-col gap-3", children: /* @__PURE__ */ jsx(AutomationFlowMain, {}) }) });
-};
-const emailActiveIcon = "data:image/svg+xml,%3csvg%20width='17'%20height='16'%20viewBox='0%200%2017%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.32'%20d='M6.66683%201.5C4.79999%201.5%203.86657%201.5%203.15353%201.86331C2.52632%202.18289%202.01639%202.69282%201.69681%203.32003C1.3335%204.03307%201.3335%204.96649%201.3335%206.83333V9.16667C1.3335%2011.0335%201.3335%2011.9669%201.69681%2012.68C2.01639%2013.3072%202.52632%2013.8171%203.15353%2014.1367C3.86657%2014.5%204.79999%2014.5%206.66683%2014.5H10.3335C12.2003%2014.5%2013.1338%2014.5%2013.8468%2014.1367C14.474%2013.8171%2014.9839%2013.3072%2015.3035%2012.68C15.6668%2011.9669%2015.6668%2011.0335%2015.6668%209.16667V6.83333C15.6668%204.96649%2015.6668%204.03307%2015.3035%203.32003C14.9839%202.69282%2014.474%202.18289%2013.8468%201.86331C13.1338%201.5%2012.2003%201.5%2010.3335%201.5H6.66683Z'%20fill='%230B66E4'%20/%3e%3cpath%20d='M12.3125%204.86981C12.5278%204.7825%2012.7821%204.85543%2012.916%205.05633C13.05%205.25736%2013.0191%205.52008%2012.8554%205.68524L12.7773%205.74969L12.1103%206.19403C11.0645%206.89127%2010.4559%207.30338%209.79783%207.50164C9.05705%207.72477%208.27301%207.75304%207.52146%207.58563L7.20212%207.50164C6.7086%207.35295%206.24273%207.08397%205.59958%206.66473L4.88962%206.19403L4.22263%205.74969L4.14451%205.68524C3.98082%205.52008%203.95%205.25736%204.08396%205.05633C4.21789%204.85543%204.47213%204.7825%204.68747%204.86981L4.77732%204.91766L5.44431%205.36199L6.16013%205.83563C6.77757%206.23725%207.12913%206.43582%207.49021%206.54461L7.73923%206.60906C8.32376%206.73923%208.93361%206.71818%209.50974%206.54461C9.99112%206.39957%2010.4556%206.09534%2011.5556%205.36199L12.2226%204.91766L12.3125%204.86981Z'%20fill='%230B66E4'%20/%3e%3c/svg%3e";
-const emailInactiveIcon = "data:image/svg+xml,%3csvg%20width='17'%20height='16'%20viewBox='0%200%2017%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.32'%20d='M6.66683%201.5C4.79999%201.5%203.86657%201.5%203.15353%201.86331C2.52632%202.18289%202.01639%202.69282%201.69681%203.32003C1.3335%204.03307%201.3335%204.96649%201.3335%206.83333V9.16667C1.3335%2011.0335%201.3335%2011.9669%201.69681%2012.68C2.01639%2013.3072%202.52632%2013.8171%203.15353%2014.1367C3.86657%2014.5%204.79999%2014.5%206.66683%2014.5H10.3335C12.2003%2014.5%2013.1338%2014.5%2013.8468%2014.1367C14.474%2013.8171%2014.9839%2013.3072%2015.3035%2012.68C15.6668%2011.9669%2015.6668%2011.0335%2015.6668%209.16667V6.83333C15.6668%204.96649%2015.6668%204.03307%2015.3035%203.32003C14.9839%202.69282%2014.474%202.18289%2013.8468%201.86331C13.1338%201.5%2012.2003%201.5%2010.3335%201.5H6.66683Z'%20fill='%237A8599'%20/%3e%3cpath%20d='M12.3125%204.86981C12.5278%204.7825%2012.7821%204.85543%2012.916%205.05633C13.05%205.25736%2013.0191%205.52008%2012.8554%205.68524L12.7773%205.74969L12.1103%206.19403C11.0645%206.89127%2010.4559%207.30338%209.79783%207.50164C9.05705%207.72477%208.27301%207.75304%207.52146%207.58563L7.20212%207.50164C6.7086%207.35295%206.24273%207.08397%205.59958%206.66473L4.88962%206.19403L4.22263%205.74969L4.14451%205.68524C3.98082%205.52008%203.95%205.25736%204.08396%205.05633C4.21789%204.85543%204.47213%204.7825%204.68747%204.86981L4.77732%204.91766L5.44431%205.36199L6.16013%205.83563C6.77757%206.23725%207.12913%206.43582%207.49021%206.54461L7.73923%206.60906C8.32376%206.73923%208.93361%206.71818%209.50974%206.54461C9.99112%206.39957%2010.4556%206.09534%2011.5556%205.36199L12.2226%204.91766L12.3125%204.86981Z'%20fill='%237A8599'%20/%3e%3c/svg%3e";
-const smsActiveIcon = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.32'%20d='M7.09967%200.833328C5.6062%200.833328%204.85946%200.833328%204.28903%201.12398C3.78727%201.37964%203.37932%201.78759%203.12366%202.28935C2.83301%202.85978%202.83301%203.60652%202.83301%205.09999V10.9C2.83301%2012.3935%202.83301%2013.1402%203.12366%2013.7106C3.37932%2014.2124%203.78727%2014.6204%204.28903%2014.876C4.85946%2015.1667%205.6062%2015.1667%207.09967%2015.1667H8.89967C10.3931%2015.1667%2011.1399%2015.1667%2011.7103%2014.876C12.2121%2014.6204%2012.62%2014.2124%2012.8757%2013.7106C13.1663%2013.1402%2013.1663%2012.3935%2013.1663%2010.9V5.1C13.1663%203.60652%2013.1663%202.85978%2012.8757%202.28935C12.62%201.78759%2012.2121%201.37964%2011.7103%201.12398C11.1399%200.833328%2010.3931%200.833328%208.89968%200.833328H7.09967Z'%20fill='%230B66E4'%20/%3e%3cpath%20d='M9.43457%2012.1764C9.66223%2012.2232%209.83398%2012.4252%209.83398%2012.6667C9.83398%2012.9082%209.66223%2013.1101%209.43457%2013.1569L9.33398%2013.1667H6.66699C6.39085%2013.1667%206.16699%2012.9428%206.16699%2012.6667C6.16699%2012.3905%206.39085%2012.1667%206.66699%2012.1667H9.33398L9.43457%2012.1764ZM8.08594%203.17058C8.50572%203.21356%208.83382%203.56859%208.83398%203.99968C8.83398%204.45981%208.46009%204.83349%208%204.83366C7.56881%204.8335%207.21375%204.50553%207.1709%204.08562L7.16699%203.99968L7.1709%203.91472C7.2136%203.49464%207.5687%203.16684%208%203.16667L8.08594%203.17058Z'%20fill='%230B66E4'%20/%3e%3c/svg%3e";
-const smsInactiveIcon = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.32'%20d='M7.09967%200.833328C5.6062%200.833328%204.85946%200.833328%204.28903%201.12398C3.78727%201.37964%203.37932%201.78759%203.12366%202.28935C2.83301%202.85978%202.83301%203.60652%202.83301%205.09999V10.9C2.83301%2012.3935%202.83301%2013.1402%203.12366%2013.7106C3.37932%2014.2124%203.78727%2014.6204%204.28903%2014.876C4.85946%2015.1667%205.6062%2015.1667%207.09967%2015.1667H8.89967C10.3931%2015.1667%2011.1399%2015.1667%2011.7103%2014.876C12.2121%2014.6204%2012.62%2014.2124%2012.8757%2013.7106C13.1663%2013.1402%2013.1663%2012.3935%2013.1663%2010.9V5.1C13.1663%203.60652%2013.1663%202.85978%2012.8757%202.28935C12.62%201.78759%2012.2121%201.37964%2011.7103%201.12398C11.1399%200.833328%2010.3931%200.833328%208.89968%200.833328H7.09967Z'%20fill='%237A8599'%20/%3e%3cpath%20d='M9.43457%2012.1764C9.66223%2012.2232%209.83398%2012.4252%209.83398%2012.6667C9.83398%2012.9082%209.66223%2013.1101%209.43457%2013.1569L9.33398%2013.1667H6.66699C6.39085%2013.1667%206.16699%2012.9428%206.16699%2012.6667C6.16699%2012.3905%206.39085%2012.1667%206.66699%2012.1667H9.33398L9.43457%2012.1764ZM8.08594%203.17058C8.50572%203.21356%208.83382%203.56859%208.83398%203.99968C8.83398%204.45981%208.46009%204.83349%208%204.83366C7.56881%204.8335%207.21375%204.50553%207.1709%204.08562L7.16699%203.99968L7.1709%203.91472C7.2136%203.49464%207.5687%203.16684%208%203.16667L8.08594%203.17058Z'%20fill='%237A8599'%20/%3e%3c/svg%3e";
+);
+TabsContent$1.displayName = CONTENT_NAME;
+function makeTriggerId(baseId, value) {
+  return `${baseId}-trigger-${value}`;
+}
+function makeContentId(baseId, value) {
+  return `${baseId}-content-${value}`;
+}
+var Root2 = Tabs$1;
+var List = TabsList$1;
+var Trigger = TabsTrigger$1;
+var Content = TabsContent$1;
+const Tabs = Root2;
+const TabsList = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx(
+  List,
+  {
+    ref,
+    className: cn$1(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className2
+    ),
+    ...props2
+  }
+));
+TabsList.displayName = List.displayName;
+const TabsTrigger = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx(
+  Trigger,
+  {
+    ref,
+    className: cn$1(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className2
+    ),
+    ...props2
+  }
+));
+TabsTrigger.displayName = Trigger.displayName;
+const TabsContent = React.forwardRef(({ className: className2, ...props2 }, ref) => /* @__PURE__ */ jsx(
+  Content,
+  {
+    ref,
+    className: cn$1(
+      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className2
+    ),
+    ...props2
+  }
+));
+TabsContent.displayName = Content.displayName;
 const StatCard = ({
   value,
   label,
@@ -83924,80 +83924,32 @@ const AutomationsEditorWorkflowTab = () => {
 };
 const AutomationsEditorTabs = () => {
   const [activeTab, setActiveTab] = React__default.useState("workflow");
-  const tabsRef = React__default.useRef([]);
-  const [lineStyles, setLineStyles] = React__default.useState({
-    width: 0,
-    left: 0
-  });
-  React__default.useEffect(() => {
-    const tabs = ["workflow", "recipients", "insights"];
-    const activeTabElement = tabsRef.current[tabs.indexOf(activeTab)];
-    if (activeTabElement) {
-      setLineStyles({
-        width: activeTabElement.offsetWidth,
-        left: activeTabElement.offsetLeft
-      });
+  const tabs = [
+    {
+      id: "workflow",
+      label: "Workflow",
+      content: /* @__PURE__ */ jsx(AutomationsEditorWorkflowTab, {})
+    },
+    {
+      id: "recipients",
+      label: "Recipients",
+      content: /* @__PURE__ */ jsx(AutomationsEditorRecipientsTab, {})
+    },
+    {
+      id: "insights",
+      label: t$1("engage:insight", { count: 2 }),
+      content: /* @__PURE__ */ jsx(AutomationsEditorStatsTab, {})
     }
-  }, [activeTab]);
-  return /* @__PURE__ */ jsxs(
-    Tabs,
+  ];
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx(
+    AnimatedTabs,
     {
-      value: activeTab,
-      onValueChange: setActiveTab,
-      orientation: "horizontal",
-      className: "h-full w-full flex flex-col",
-      activationMode: "manual",
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative mt-1 mb-2", children: [
-          /* @__PURE__ */ jsxs(TabsList, { className: "w-full justify-start rounded-none bg-transparent gap-2 flex min-w-0 h-auto py-1", children: [
-            /* @__PURE__ */ jsx(
-              TabsTrigger,
-              {
-                value: "workflow",
-                tabIndex: 0,
-                ref: (el) => tabsRef.current[0] = el,
-                className: "data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none text-base font-normal px-3 hover:bg-muted data-[state=active]:cursor-default",
-                children: "Workflow"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TabsTrigger,
-              {
-                value: "recipients",
-                tabIndex: 0,
-                ref: (el) => tabsRef.current[1] = el,
-                className: "data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none text-base font-normal px-3 hover:bg-muted data-[state=active]:cursor-default",
-                children: "Recipients"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TabsTrigger,
-              {
-                value: "insights",
-                tabIndex: 0,
-                ref: (el) => tabsRef.current[2] = el,
-                className: "data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none text-base font-normal px-3 hover:bg-muted data-[state=active]:cursor-default",
-                children: t$1("engage:insight", { count: 2 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute bottom-0 h-[2px] rounded-full transition-all duration-300 ease-out\n                     bg-gradient-to-r from-primary to-primary/90\n                     shadow-[0_0_8px_rgba(var(--primary-rgb),0.3)]",
-              style: {
-                width: `${lineStyles.width}px`,
-                left: `${lineStyles.left}px`
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "workflow", className: "flex-1 px-1", children: /* @__PURE__ */ jsx(AutomationsEditorWorkflowTab, {}) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "recipients", className: "flex-1 px-1", children: /* @__PURE__ */ jsx(AutomationsEditorRecipientsTab, {}) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "insights", className: "flex-1 px-1", children: /* @__PURE__ */ jsx(AutomationsEditorStatsTab, {}) })
-      ]
+      tabs,
+      activeTab,
+      onTabChange: setActiveTab,
+      tabsLocation: "left"
     }
-  );
+  ) });
 };
 const ViewAutomationMain = ({
   showBackButton = false,