@embedreach/components 0.1.46 → 0.1.48

package/dist/chunks/index.js

@@ -5109,8 +5109,8 @@ function getMutationStatusColor({
 }) {
   return isPaused ? "purple" : status === "error" ? "red" : status === "pending" ? "yellow" : status === "success" ? "green" : "gray";
 }
-function getQueryStatusColorByLabel(label) {
-  return label === "fresh" ? "green" : label === "stale" ? "yellow" : label === "paused" ? "purple" : label === "inactive" ? "gray" : "blue";
+function getQueryStatusColorByLabel(label2) {
+  return label2 === "fresh" ? "green" : label2 === "stale" ? "yellow" : label2 === "paused" ? "purple" : label2 === "inactive" ? "gray" : "blue";
 }
 var displayValue = (value, beautify = false) => {
   const {
@@ -12538,7 +12538,7 @@ var [ToastProviderProvider, useToastProviderContext] = createToastContext(PROVID
 var ToastProvider$1 = (props) => {
   const {
     __scopeToast,
-    label = "Notification",
+    label: label2 = "Notification",
     duration = 5e3,
     swipeDirection = "right",
     swipeThreshold = 50,
@@ -12548,7 +12548,7 @@ var ToastProvider$1 = (props) => {
   const [toastCount, setToastCount] = React.useState(0);
   const isFocusedToastEscapeKeyDownRef = React.useRef(false);
   const isClosePausedRef = React.useRef(false);
-  if (!label.trim()) {
+  if (!label2.trim()) {
     console.error(
       `Invalid prop \`label\` supplied to \`${PROVIDER_NAME$1}\`. Expected non-empty \`string\`.`
     );
@@ -12557,7 +12557,7 @@ var ToastProvider$1 = (props) => {
     ToastProviderProvider,
     {
       scope: __scopeToast,
-      label,
+      label: label2,
       duration,
       swipeDirection,
       swipeThreshold,
@@ -12582,7 +12582,7 @@ var ToastViewport$1 = React.forwardRef(
     const {
       __scopeToast,
       hotkey = VIEWPORT_DEFAULT_HOTKEY,
-      label = "Notifications ({hotkey})",
+      label: label2 = "Notifications ({hotkey})",
       ...viewportProps
     } = props;
     const context = useToastProviderContext(VIEWPORT_NAME$1, __scopeToast);
@@ -12689,7 +12689,7 @@ var ToastViewport$1 = React.forwardRef(
       {
         ref: wrapperRef,
         role: "region",
-        "aria-label": label.replace("{hotkey}", hotkeyLabel),
+        "aria-label": label2.replace("{hotkey}", hotkeyLabel),
         tabIndex: -1,
         style: { pointerEvents: hasToasts ? void 0 : "none" },
         children: [
@@ -14033,11 +14033,11 @@ const imageLabels = /* @__PURE__ */ new Set(["image", "url"]);
 const isArbitraryImage = (value) => getIsArbitraryValue(value, imageLabels, isImage);
 const isArbitraryShadow = (value) => getIsArbitraryValue(value, "", isShadow);
 const isAny = () => true;
-const getIsArbitraryValue = (value, label, testValue) => {
+const getIsArbitraryValue = (value, label2, testValue) => {
   const result = arbitraryValueRegex.exec(value);
   if (result) {
     if (result[1]) {
-      return typeof label === "string" ? result[1] === label : label.has(result[1]);
+      return typeof label2 === "string" ? result[1] === label2 : label2.has(result[1]);
     }
     return testValue(result[2]);
   }
@@ -20847,8 +20847,8 @@ function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
     max: resolvePointElastic(dragElastic, maxLabel)
   };
 }
-function resolvePointElastic(dragElastic, label) {
-  return typeof dragElastic === "number" ? dragElastic : dragElastic[label] || 0;
+function resolvePointElastic(dragElastic, label2) {
+  return typeof dragElastic === "number" ? dragElastic : dragElastic[label2] || 0;
 }
 const createAxisDelta = () => ({
   translate: 0,
@@ -23752,6 +23752,7 @@ const BUSINESS_AUTOMATION_PATH = "/automations";
 const CHANNEL_SENDER_PATH = "/channel/senders";
 const CHANNEL_ACCOUNT_PATH = "/channel/accounts";
 const COMMUNICATION_GROUP_PATH = "/communication-groups";
+const STRIPO_PATH = "/stripo";
 const createAutomation = async (params) => {
   const response = await baseRequest(
     BUSINESS_AUTOMATION_PATH,
@@ -24021,7 +24022,7 @@ const sizeDefault$1 = "reach-styles-module__sizeDefault___8kU5A";
 const sizeSm$1 = "reach-styles-module__sizeSm___zPIEh";
 const sizeLg = "reach-styles-module__sizeLg___D2G8z";
 const sizeIcon = "reach-styles-module__sizeIcon___5XkYW";
-const styles$6 = {
+const styles$7 = {
   base: base$2,
   "default": "reach-styles-module__default___ny1h7",
   destructive: destructive$2,
@@ -24034,21 +24035,21 @@ const styles$6 = {
   sizeLg,
   sizeIcon
 };
-const buttonVariants = cva([styles$6.base], {
+const buttonVariants = cva([styles$7.base], {
   variants: {
     variant: {
-      default: styles$6.default,
-      destructive: styles$6.destructive,
-      outline: styles$6.outline,
-      secondary: styles$6.secondary,
-      ghost: styles$6.ghost,
-      link: styles$6.link
+      default: styles$7.default,
+      destructive: styles$7.destructive,
+      outline: styles$7.outline,
+      secondary: styles$7.secondary,
+      ghost: styles$7.ghost,
+      link: styles$7.link
     },
     size: {
-      default: styles$6.sizeDefault,
-      sm: styles$6.sizeSm,
-      lg: styles$6.sizeLg,
-      icon: styles$6.sizeIcon
+      default: styles$7.sizeDefault,
+      sm: styles$7.sizeSm,
+      lg: styles$7.sizeLg,
+      icon: styles$7.sizeIcon
     }
   },
   defaultVariants: {
@@ -24137,7 +24138,7 @@ const BigSelector = ({ onClick, title: title2, subtitle, icon, selected, disable
     }
   );
 };
-const styles$5 = {
+const styles$6 = {
   title: "text-3xl mb-8",
   grid: "grid grid-cols-2 gap-6",
   container: "relative p-6  rounded-lg"
@@ -24146,9 +24147,9 @@ const ChooseAutomationType = ({ onNext, iconDefinitions }) => {
   const onClick = (type) => {
     onNext(type);
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles$5.container, children: [
-    /* @__PURE__ */ jsx("h1", { className: styles$5.title, children: "Choose Your Automation Type" }),
-    /* @__PURE__ */ jsxs("div", { className: styles$5.grid, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$6.container, children: [
+    /* @__PURE__ */ jsx("h1", { className: styles$6.title, children: "Choose Your Automation Type" }),
+    /* @__PURE__ */ jsxs("div", { className: styles$6.grid, children: [
       /* @__PURE__ */ jsx(
         BigSelector,
         {
@@ -24203,16 +24204,16 @@ function UnreachableCaseStatement(x3, enumObj) {
     `Unreachable case statement: ${JSON.stringify(x3)}. Valid values are: ${Object.values(enumObj).join(", ")}`
   );
 }
-const styles$4 = {
+const styles$5 = {
   iconWrapper: "mb-4 flex items-center justify-center",
   cardTitle: "text-lg font-medium mb-2",
   cardDescription: "text-sm text-gray-600"
 };
 const OneTimeBroadcast = ({ iconDefinitions }) => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$4.iconWrapper, children: /* @__PURE__ */ jsx(iconDefinitions.OneTimeBroadcast, {}) }),
-    /* @__PURE__ */ jsx("h3", { className: styles$4.cardTitle, children: "One-Time Broadcast" }),
-    /* @__PURE__ */ jsx("p", { className: styles$4.cardDescription, children: "Send a single message to your current list, like announcing a sale or newsletter." })
+    /* @__PURE__ */ jsx("div", { className: styles$5.iconWrapper, children: /* @__PURE__ */ jsx(iconDefinitions.OneTimeBroadcast, {}) }),
+    /* @__PURE__ */ jsx("h3", { className: styles$5.cardTitle, children: "One-Time Broadcast" }),
+    /* @__PURE__ */ jsx("p", { className: styles$5.cardDescription, children: "Send a single message to your current list, like announcing a sale or newsletter." })
   ] });
 };
 const SetAutomationName = ({ selectedType, setAutomationName, automationName, iconDefinitions }) => {
@@ -24320,7 +24321,7 @@ const CreateAutomationModal = ({
     });
   };
   if (isCreating || startedCreating) {
-    return /* @__PURE__ */ jsx("div", { className: styles$5.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Creating Automation", "Finishing up"] }) });
+    return /* @__PURE__ */ jsx("div", { className: styles$6.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Creating Automation", "Finishing up"] }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden", children: [
     /* @__PURE__ */ jsxs(AnimatePresence, { mode: "wait", children: [
@@ -28533,7 +28534,7 @@ const sizeSm = "reach-styles-module__sizeSm___6T2oK";
 const iconOnly = "reach-styles-module__iconOnly___8vUSp";
 const iconOnlySm = "reach-styles-module__iconOnlySm___9ZKv9";
 const container = "reach-styles-module__container___6PQqs";
-const styles$3 = {
+const styles$4 = {
   base: base$1,
   "default": "reach-styles-module__default___zeGU1",
   secondary: secondary$1,
@@ -28547,22 +28548,22 @@ const styles$3 = {
   iconOnlySm,
   container
 };
-const badgeVariants = cva([styles$3.base], {
+const badgeVariants = cva([styles$4.base], {
   variants: {
     variant: {
-      default: styles$3.default,
-      secondary: styles$3.secondary,
-      destructive: styles$3.destructive,
-      outline: styles$3.outline,
-      google: styles$3.google,
-      date: styles$3.date
+      default: styles$4.default,
+      secondary: styles$4.secondary,
+      destructive: styles$4.destructive,
+      outline: styles$4.outline,
+      google: styles$4.google,
+      date: styles$4.date
     },
     size: {
-      default: styles$3.sizeDefault,
-      sm: styles$3.sizeSm
+      default: styles$4.sizeDefault,
+      sm: styles$4.sizeSm
     },
     iconOnly: {
-      true: styles$3.iconOnly,
+      true: styles$4.iconOnly,
       false: ""
     }
   },
@@ -28570,7 +28571,7 @@ const badgeVariants = cva([styles$3.base], {
     {
       iconOnly: true,
       size: "sm",
-      class: styles$3.iconOnlySm
+      class: styles$4.iconOnlySm
     }
   ],
   defaultVariants: {
@@ -28597,7 +28598,7 @@ const Badge = React.forwardRef(
 );
 Badge.displayName = "Badge";
 const BadgeContainer = React.forwardRef(({ className: className2, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles$3.container, className2), ...props });
+  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(styles$4.container, className2), ...props });
 });
 BadgeContainer.displayName = "BadgeContainer";
 var U = 1, Y$1 = 0.9, H = 0.8, J = 0.17, p = 0.1, u = 0.999, $ = 0.9999;
@@ -33497,7 +33498,7 @@ const MultiSelect = React.forwardRef(
                         children: "Close"
                       }
                     ),
-                    extraCommandItems && extraCommandItems
+                    extraCommandItems && extraCommandItems.map((item) => item(setIsPopoverOpen))
                   ] }) })
                 ] })
               ] })
@@ -35037,14 +35038,15 @@ const NameAndDescription = ({ nameAndDescriptionState, setNameAndDescriptionStat
     ] })
   ] }) });
 };
-const styles$2 = {
+const styles$3 = {
   container: "relative rounded-lg"
 };
 const SegmentBuilder = ({
   onClose,
-  iconDefinitions,
+  iconDefinitions: passedInIconDefinitions,
   segmentId
 }) => {
+  const iconDefinitions = mergeIconDefinitions(passedInIconDefinitions);
   const SEGMENT_ID = segmentId || void 0;
   const { toast: toast2 } = useToast();
   const { segment: existingSegment } = useGetSegment(SEGMENT_ID);
@@ -35059,7 +35061,7 @@ const SegmentBuilder = ({
   });
   const [conditionNameToMetadata, setConditionNameToMetadata] = useState({});
   const isReadyToCreate = nameAndDescriptionState.name && nameAndDescriptionState.description && conditionState.some(
-    (condition) => condition.field && condition.operator && condition.value.length > 0
+    (condition) => condition.field && condition.operator && (condition.operator === "exists" || condition.value.length > 0)
   );
   useEffect(() => {
     if (!segmentsConditions) return;
@@ -35191,17 +35193,17 @@ const SegmentBuilder = ({
     }
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: styles$2.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Segment data", "Finishing up"] }) });
+    return /* @__PURE__ */ jsx("div", { className: styles$3.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Segment data", "Finishing up"] }) });
   }
   if (isCreating || startedCreating) {
-    return /* @__PURE__ */ jsx("div", { className: styles$2.container, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: styles$3.container, children: /* @__PURE__ */ jsx(
       SpinLoader,
       {
         text: SEGMENT_ID && existingSegment ? ["Updating Segment", "Finishing up"] : ["Creating Segment", "Finishing up"]
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: styles$2.container, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$3.container, children: [
     /* @__PURE__ */ jsx("div", { className: "relative w-full flex justify-end mb-4", children: /* @__PURE__ */ jsx(
       Button$1,
       {
@@ -35959,14 +35961,14 @@ const InfoTooltip = ({ title: title2, alertText, Icon: Icon2 = Info, onClick })
     ] }) })
   ] }) });
 };
-const styles$1 = {
+const styles$2 = {
   container: "flex flex-col items-center justify-center h-full"
 };
 const AutomationStatistics = ({ automationId, iconDefinitions }) => {
   const [activeTab, setActiveTab] = useState("email");
   const { statistics, isLoading: isStatisticsLoading } = useGetBusinessAutomationStatistics(automationId);
   if (isStatisticsLoading || !statistics) {
-    return /* @__PURE__ */ jsx("div", { className: styles$1.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Statistics", "Finishing up"] }) });
+    return /* @__PURE__ */ jsx("div", { className: styles$2.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Statistics", "Finishing up"] }) });
   }
   const StatsGrid = () => {
     const statGridMainDiv = "flex items-center bg-white rounded-lg p-4 shadow-sm border border-gray-200 transform transition-all duration-300 hover:shadow-md";
@@ -38826,7 +38828,7 @@ const MissingDataForPreview = ({
   ] });
 };
 const EmailPreviewHtmlRenderer = ({ html, height, width }) => {
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full min-h-[300px] bg-white rounded-lg border-0 overflow-hidden transition-all duration-300 ease-in-out", children: html ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full min-h-[300px] bg-white rounded-lg border-0 overflow-hidden transition-all duration-300 ease-in-out flex items-center justify-center", children: html ? /* @__PURE__ */ jsx(
     "iframe",
     {
       title: "Email Preview",
@@ -38848,7 +38850,27 @@ const EmailPreview$1 = ({
   emailBody,
   emailBaseDomain
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 ", children: [
+  const [emailPreviewDimensions, setEmailPreviewDimensions] = useState({
+    width: 0,
+    height: 0
+  });
+  const emailPreviewDiv = useRef(null);
+  useEffect(() => {
+    const updateHeight = () => {
+      if (emailPreviewDiv.current) {
+        requestAnimationFrame(() => {
+          setEmailPreviewDimensions({
+            width: emailPreviewDiv.current ? emailPreviewDiv.current.offsetWidth - 100 : 0,
+            height: emailPreviewDiv.current ? emailPreviewDiv.current.offsetHeight - 100 : 0
+          });
+        });
+      }
+    };
+    updateHeight();
+    window.addEventListener("resize", updateHeight);
+    return () => window.removeEventListener("resize", updateHeight);
+  }, [emailPreviewDiv]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 h-full", children: [
     /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 p-5 rounded-lg space-y-4 border border-gray-100", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700 w-24", children: "From:" }),
@@ -38863,7 +38885,21 @@ const EmailPreview$1 = ({
         /* @__PURE__ */ jsx("span", { className: "text-gray-600 italic", children: emailPreviewText })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "border rounded-lg p-6 min-h-[300px] bg-white shadow-inner flex", children: /* @__PURE__ */ jsx(EmailPreviewHtmlRenderer, { html: emailBody, height: 500, width: 500 }) })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "border rounded-lg p-6  bg-white shadow-inner flex-1 h-full w-full items-center justify-center",
+        ref: emailPreviewDiv,
+        children: /* @__PURE__ */ jsx(
+          EmailPreviewHtmlRenderer,
+          {
+            html: emailBody,
+            height: emailPreviewDimensions.height,
+            width: emailPreviewDimensions.width
+          }
+        )
+      }
+    )
   ] });
 };
 const SMSPreview$1 = ({ fromPhone, body }) => {
@@ -39119,7 +39155,7 @@ const AutomationRecipients = ({ automationId, iconDefinitions }) => {
   const { recipients, isLoading, fetchError } = useGetBusinessAutomationRecipients(automationId);
   const { isLoading: isStatisticsLoading } = useGetBusinessAutomationStatistics(automationId);
   if (isLoading || isStatisticsLoading) {
-    return /* @__PURE__ */ jsx("div", { className: styles$1.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Recipients", "Finishing up"] }) });
+    return /* @__PURE__ */ jsx("div", { className: styles$2.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Recipients", "Finishing up"] }) });
   }
   if (fetchError) {
     return /* @__PURE__ */ jsxs("div", { children: [
@@ -40496,18 +40532,38 @@ const DropdownMenuSeparator = React.forwardRef(({ className: className2, ...prop
   }
 ));
 DropdownMenuSeparator.displayName = Separator2.displayName;
-const StepIndicator = ({
+const stepIndicatorContainer = "reach-styles-module__stepIndicatorContainer___FoKXB";
+const iconContainer = "reach-styles-module__iconContainer___Ki-1n";
+const checkIcon = "reach-styles-module__checkIcon___-krUS";
+const minusIcon = "reach-styles-module__minusIcon___r5cKs";
+const minusIconActive = "reach-styles-module__minusIconActive___-4JHM";
+const minusIconInactive = "reach-styles-module__minusIconInactive___JtvVB";
+const label = "reach-styles-module__label___tiCMA";
+const labelActive = "reach-styles-module__labelActive___EXydD";
+const labelInactive = "reach-styles-module__labelInactive___g-J3r";
+const styles$1 = {
+  stepIndicatorContainer,
+  iconContainer,
+  checkIcon,
+  minusIcon,
+  minusIconActive,
+  minusIconInactive,
   label,
+  labelActive,
+  labelInactive
+};
+const StepIndicator = ({
+  label: label2,
   isCompleted,
   isActive
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-3", children: [
-    isCompleted ? /* @__PURE__ */ jsx("div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-emerald-500" }) }) : /* @__PURE__ */ jsx("div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: styles$1.stepIndicatorContainer, children: [
+    isCompleted ? /* @__PURE__ */ jsx("div", { className: styles$1.iconContainer, children: /* @__PURE__ */ jsx(Check, { className: styles$1.checkIcon }) }) : /* @__PURE__ */ jsx("div", { className: styles$1.iconContainer, children: /* @__PURE__ */ jsx(
       Minus,
       {
         className: cn$1(
-          "w-4 h-4",
-          isActive ? "text-[var(--reach-primary)]" : "text-gray-600"
+          styles$1.minusIcon,
+          isActive ? styles$1.minusIconActive : styles$1.minusIconInactive
         )
       }
     ) }),
@@ -40515,10 +40571,10 @@ const StepIndicator = ({
       "span",
       {
         className: cn$1(
-          "text-sm font-medium",
-          isActive ? "text-gray-900" : "text-gray-400"
+          styles$1.label,
+          isActive ? styles$1.labelActive : styles$1.labelInactive
         ),
-        children: label
+        children: label2
       }
     )
   ] });
@@ -40775,16 +40831,18 @@ const stripoKeys = {
   demoTemplate: () => [...stripoKeys.templates(), "demo"]
 };
 const getStripoToken = async () => {
-  const response = await baseRequest("/stripo/token");
+  const response = await baseRequest(`${STRIPO_PATH}/token`);
   return response.data;
 };
 const getEditorData = async () => {
-  const response = await baseRequest("/stripo/editor-data");
+  const response = await baseRequest(
+    `${STRIPO_PATH}/editor-data`
+  );
   return response.data;
 };
 const getTemplate = async (automationId) => {
   const response = await baseRequest(
-    `/stripo/template/${automationId}`
+    `${STRIPO_PATH}/template/${automationId}`
   );
   return response.data;
 };
@@ -41052,8 +41110,8 @@ const EmailPreview = ({ automation }) => {
       if (emailPreviewDiv.current) {
         requestAnimationFrame(() => {
           setEmailPreviewDimensions({
-            width: emailPreviewDiv.current?.offsetWidth || 0,
-            height: emailPreviewDiv.current?.offsetHeight || 0
+            width: emailPreviewDiv.current ? emailPreviewDiv.current.offsetWidth - 100 : 0,
+            height: emailPreviewDiv.current ? emailPreviewDiv.current.offsetHeight - 100 : 0
           });
         });
       }
@@ -41123,12 +41181,6 @@ const EmailPreview = ({ automation }) => {
       getCommunicationGroup2(communicationGroupId, {
         onSuccess: (data) => {
           setDataFromFetch(data);
-        },
-        onError: () => {
-          console.log("error");
-        },
-        onSettled: () => {
-          console.log("onSettled");
         }
       });
     }
@@ -41594,7 +41646,7 @@ const SMSPreview = ({ automation, iconDefinitions }) => {
     return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Loading..."] }) });
   }
   const smsChannelSenders = channelSenders.channel_senders?.filter(
-    (sender) => sender.channel_sender_metadata.from
+    (sender) => sender.channel_sender_metadata.from || sender.channel_sender_metadata.messageServiceSid
   );
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(Dialog, { open: showSmsEditor, onOpenChange: setShowSmsEditor, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
@@ -45234,11 +45286,11 @@ function WeekNumber(props) {
   if (!onWeekNumberClick) {
     return jsx("span", { className: classNames.weeknumber, style: styles2.weeknumber, children: content2 });
   }
-  var label = labelWeekNumber2(Number(weekNumber), { locale: locale2 });
+  var label2 = labelWeekNumber2(Number(weekNumber), { locale: locale2 });
   var handleClick = function(e4) {
     onWeekNumberClick(weekNumber, dates2, e4);
   };
-  return jsx(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles2.weeknumber, onClick: handleClick, children: content2 });
+  return jsx(Button, { name: "week-number", "aria-label": label2, className: classNames.weeknumber, style: styles2.weeknumber, onClick: handleClick, children: content2 });
 }
 function Row(props) {
   var _a, _b;
@@ -45941,7 +45993,7 @@ const SegmentSection = ({
   allSegments,
   onAddSegment,
   onRemoveSegment,
-  onCreateSegment,
+  setOpenCreateSegmentDialog,
   iconDefinitions
 }) => {
   const handleValueChange = (newValues) => {
@@ -45950,54 +46002,43 @@ const SegmentSection = ({
     segmentsToAdd.forEach(onAddSegment);
     segmentsToRemove.forEach(onRemoveSegment);
   };
-  const [openSegmentBuilder, setOpenSegmentBuilder] = useState(false);
   const [segmentSelectedIds, setSegmentSelectedIds] = useState([]);
   const options = allSegments.map((segment) => ({
     label: segment.name,
     value: segment.id
   }));
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Dialog, { open: openSegmentBuilder, onOpenChange: setOpenSegmentBuilder, children: /* @__PURE__ */ jsx(DialogContent, { hideCloseButton: true, children: /* @__PURE__ */ jsx(
-      SegmentBuilder,
-      {
-        iconDefinitions,
-        onClose: (createdSegment) => {
-          if (createdSegment === "error") {
-            console.error("Error creating segment");
-            setOpenSegmentBuilder(false);
-          } else if (createdSegment === false) {
-            setOpenSegmentBuilder(false);
-          } else if (createdSegment) {
-            onCreateSegment();
-            setOpenSegmentBuilder(false);
-          }
-        }
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx(
-      MultiSelect,
-      {
-        selectedValues: segmentSelectedIds,
-        setSelectedValues: setSegmentSelectedIds,
-        options,
-        defaultValue: segments,
-        onValueChange: handleValueChange,
-        placeholder: "Select segments",
-        maxCount: 5,
-        extraCommandItems: /* @__PURE__ */ jsxs(
+  useEffect(() => {
+    setSegmentSelectedIds(segments);
+  }, [segments]);
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    MultiSelect,
+    {
+      selectedValues: segmentSelectedIds,
+      setSelectedValues: setSegmentSelectedIds,
+      options,
+      defaultValue: segments,
+      onValueChange: handleValueChange,
+      placeholder: "Select segments",
+      maxCount: 5,
+      extraCommandItems: [
+        (closePopup) => /* @__PURE__ */ jsxs(
           CommandItem,
           {
-            onSelect: () => setOpenSegmentBuilder(true),
+            onSelect: () => {
+              closePopup(false);
+              setOpenCreateSegmentDialog(true);
+            },
             className: "cursor-pointer",
             children: [
               /* @__PURE__ */ jsx(iconDefinitions.PlusIcon, { className: "w-4 h-4" }),
               "New"
             ]
-          }
+          },
+          "new-segment"
         )
-      }
-    )
-  ] });
+      ]
+    }
+  ) });
 };
 const SelectSegments = ({
   iconDefinitions,
@@ -46005,7 +46046,7 @@ const SelectSegments = ({
   excludedSegments,
   handleAddSegment,
   handleRemoveSegment,
-  handleCreateSegment,
+  setOpenCreateSegmentDialog,
   segments,
   defaultIsExcludeOpen = false
 }) => {
@@ -46018,7 +46059,7 @@ const SelectSegments = ({
         allSegments: segments?.segments || [],
         onAddSegment: (id2) => handleAddSegment(id2, "include"),
         onRemoveSegment: (id2) => handleRemoveSegment(id2, "include"),
-        onCreateSegment: handleCreateSegment,
+        setOpenCreateSegmentDialog,
         iconDefinitions
       }
     ),
@@ -46058,7 +46099,7 @@ const SelectSegments = ({
               allSegments: segments?.segments || [],
               onAddSegment: (id2) => handleAddSegment(id2, "exclude"),
               onRemoveSegment: (id2) => handleRemoveSegment(id2, "exclude"),
-              onCreateSegment: handleCreateSegment,
+              setOpenCreateSegmentDialog,
               iconDefinitions
             }
           )
@@ -46068,6 +46109,7 @@ const SelectSegments = ({
   ] });
 };
 const SelectAudience = ({ iconDefinitions, automation }) => {
+  const { toast: toast2 } = useToast();
   const [openCreateSegmentDialog, setOpenCreateSegmentDialog] = React__default.useState(false);
   const [initialStateSet, setInitialStateSet] = React__default.useState(false);
   const { segments, isLoading, refetchSegments } = useListSegments();
@@ -46101,8 +46143,9 @@ const SelectAudience = ({ iconDefinitions, automation }) => {
       setExcludedSegments((prev) => prev.filter((id2) => id2 !== segmentId));
     }
   };
-  const handleCreateSegment = () => {
-    setOpenCreateSegmentDialog(true);
+  const handleCreateSegment = (segmentId) => {
+    refetchSegments();
+    setIncludedSegments((prev) => [...prev, segmentId]);
   };
   useEffect(() => {
     const hasSegmentsChanged = JSON.stringify(automation.includeSegmentIds) !== JSON.stringify(includedSegments) || JSON.stringify(automation.excludeSegmentIds) !== JSON.stringify(excludedSegments);
@@ -46152,6 +46195,8 @@ const SelectAudience = ({ iconDefinitions, automation }) => {
       setInitialStateSet(true);
       return;
     }
+    console.log("automation.includeSegmentIds", automation.includeSegmentIds);
+    console.log("automation.excludeSegmentIds", automation.excludeSegmentIds);
     if (allUsersSelected) {
       setSelectedAudience("all");
     } else {
@@ -46167,8 +46212,8 @@ const SelectAudience = ({ iconDefinitions, automation }) => {
     allUsersSelected,
     getAllUsersSegment,
     updateAutomation2,
-    automation.includeSegmentIds.length,
-    automation.excludeSegmentIds.length
+    automation.includeSegmentIds,
+    automation.excludeSegmentIds
   ]);
   if (isLoading || !segments || !initialStateSet) {
     return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching segments", "Finishing up"] }) });
@@ -46178,19 +46223,35 @@ const SelectAudience = ({ iconDefinitions, automation }) => {
       Dialog,
       {
         open: openCreateSegmentDialog,
+        modal: true,
         onOpenChange: setOpenCreateSegmentDialog,
-        children: /* @__PURE__ */ jsx(DialogContent, { className: "max-w-4xl", children: /* @__PURE__ */ jsx(
-          SegmentBuilder,
-          {
-            iconDefinitions,
-            onClose: (result) => {
-              if (result !== false && result !== "error") {
-                refetchSegments();
+        children: /* @__PURE__ */ jsxs(DialogContent, { hideCloseButton: true, children: [
+          /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: "Create Segment" }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: "Create a new segment to use in your automation." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            SegmentBuilder,
+            {
+              iconDefinitions,
+              onClose: (createdSegment) => {
+                if (createdSegment === "error") {
+                  toast2({
+                    title: "Error creating segment",
+                    description: "Please try again",
+                    variant: "destructive"
+                  });
+                  setOpenCreateSegmentDialog(false);
+                } else if (createdSegment === false) {
+                  setOpenCreateSegmentDialog(false);
+                } else if (createdSegment) {
+                  handleCreateSegment(createdSegment);
+                  setOpenCreateSegmentDialog(false);
+                }
               }
-              setOpenCreateSegmentDialog(false);
             }
-          }
-        ) })
+          )
+        ] })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: " w-full", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
@@ -46227,7 +46288,7 @@ const SelectAudience = ({ iconDefinitions, automation }) => {
                     excludedSegments,
                     handleAddSegment,
                     handleRemoveSegment,
-                    handleCreateSegment,
+                    setOpenCreateSegmentDialog,
                     segments,
                     defaultIsExcludeOpen: automation.excludeSegmentIds?.length > 0
                   }
@@ -46827,7 +46888,7 @@ const ViewAutomationHeader = ({
             /* @__PURE__ */ jsx(iconDefinitions.DropdownMenuTrigger, { className: "ml-2 h-4 w-4" })
           ] }) }),
           /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
-            (automation.status === AutomationStatus.DRAFT || automation.status === AutomationStatus.ACTIVE) && /* @__PURE__ */ jsx(
+            automation.status === AutomationStatus.DRAFT && /* @__PURE__ */ jsx(
               DropdownMenuItem,
               {
                 onClick: () => setOpenEditAutomationPopup(true),
@@ -46892,12 +46953,13 @@ const ViewAutomationHeader = ({
   ] });
 };
 const ViewAutomationModalContent = ({
-  iconDefinitions,
+  iconDefinitions: passedInIconDefinitions,
   autoOpenEditPopup,
   automationId,
   showBackButton = false,
   logoUrl
 }) => {
+  const iconDefinitions = mergeIconDefinitions(passedInIconDefinitions);
   const params = useParams();
   const [searchParams] = useSearchParams();
   const FINAL_AUTOMATION_ID = automationId || params?.automationId || searchParams.get("automationId");
@@ -46909,7 +46971,7 @@ const ViewAutomationModalContent = ({
     return /* @__PURE__ */ jsx("div", { children: "Invalid automation ID" });
   }
   if (!automation && (isFetching || isLoading)) {
-    return /* @__PURE__ */ jsx("div", { className: styles$5.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Automation data", "Finishing up"] }) });
+    return /* @__PURE__ */ jsx("div", { className: styles$6.container, children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching Automation data", "Finishing up"] }) });
   }
   if (fetchError) {
     return /* @__PURE__ */ jsxs("div", { children: [
@@ -46920,7 +46982,7 @@ const ViewAutomationModalContent = ({
   if (!automation) {
     return /* @__PURE__ */ jsx("div", { children: "No automation found" });
   }
-  return /* @__PURE__ */ jsxs("div", { className: styles$5.container, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$6.container, children: [
     /* @__PURE__ */ jsx(
       ViewAutomationHeader,
       {