@sparrowengg/integrations-templates-frontend 1.9.66 → 1.9.68

package/dist/cjs/integration-template/components/dashboard.js

@@ -62,8 +62,8 @@ const Dashboard = ({
       justifyContent: "space-between",
       alignItems: "center"
     },
-    /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$2" }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, integrationName), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, dashboardDescription)),
-    /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, hasMultiAccounts && /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "default", leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null) }, "Add Account"), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$2" }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, integrationName), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral700" } }, dashboardDescription)),
+    /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, hasMultiAccounts && /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "default", leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null) }, "Add Account"), hasDropdownComponents.mapping && !hasDropdownComponents.trigger ? /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "primary", leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null), onClick: () => handleConfigurationType("MAPPING") }, "New Mapping") : null, hasDropdownComponents.trigger && hasDropdownComponents.mapping ? /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(
       tooltip.Tooltip,
       {
         content: !triggerEnabled && !mappingEnabled ? "You have reached the maximum limit for creating triggers/mappings" : ""
@@ -83,10 +83,14 @@ const Dashboard = ({
         className: "dm-sans",
         sideOffset: 4,
         align: "start",
-        css: { maxWidth: 240, zIndex: 10, "& p": {
-          margin: "0 !important",
-          padding: "0 !important"
-        } }
+        css: {
+          maxWidth: 240,
+          zIndex: 10,
+          "& p": {
+            margin: "0 !important",
+            padding: "0 !important"
+          }
+        }
       },
       hasDropdownComponents.trigger ? /* @__PURE__ */ React.createElement(
         DropdownItem,
@@ -110,7 +114,7 @@ const Dashboard = ({
           onClickHandler: () => handleConfigurationType("MAPPING")
         }
       ) : null
-    )))
+    )) : null)
   ), /* @__PURE__ */ React.createElement(
     box.Box,
     {
@@ -422,23 +426,25 @@ const SingleAccountDashboard = ({
         deleteFieldHandler
       }
     );
-  })) : null, ((_c = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _c.type) === "SINGLE_MAPPING" && !!((_e = (_d = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _d.fields) == null ? void 0 : _e.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_g = (_f = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _f.fields) == null ? void 0 : _g.map((field, index) => {
-    return /* @__PURE__ */ React.createElement(
-      SingleMappingDashboardItem,
-      {
-        onMappingEditHandler,
-        syncMapping,
-        field,
-        key: field == null ? void 0 : field.id,
-        integrationName,
-        icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-        handleEditField,
-        handleDashboardPage,
-        toggleDashboardField,
-        deleteFieldHandler
-      }
-    );
-  })) : null);
+  })) : null, ((_c = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _c.type) === "SINGLE_MAPPING" && !!((_e = (_d = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _d.fields) == null ? void 0 : _e.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_g = (_f = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _f.fields) == null ? void 0 : _g.map(
+    (field, index) => {
+      return /* @__PURE__ */ React.createElement(
+        SingleMappingDashboardItem,
+        {
+          onMappingEditHandler,
+          syncMapping,
+          field,
+          key: field == null ? void 0 : field.id,
+          integrationName,
+          icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+          handleEditField,
+          handleDashboardPage,
+          toggleDashboardField,
+          deleteFieldHandler
+        }
+      );
+    }
+  )) : null);
 };
 const TriggerDasboardItem = ({
   isDraft,
@@ -480,7 +486,12 @@ const TriggerDasboardItem = ({
     flex.Flex,
     {
       flexDirection: "column",
-      css: { width: "100%", height: "100%", overflow: "auto", marginTop: "$8" }
+      css: {
+        width: "100%",
+        height: "100%",
+        overflow: "auto",
+        marginTop: "$8"
+      }
     },
     /* @__PURE__ */ React.createElement(
       flex.Flex,
@@ -555,10 +566,14 @@ const TriggerDasboardItem = ({
         dropdown.DropdownMenuContent,
         {
           className: "dm-sans",
-          css: { minWidth: 180, zIndex: 10, "& p": {
-            margin: "0 !important",
-            padding: "0 !important"
-          } },
+          css: {
+            minWidth: 180,
+            zIndex: 10,
+            "& p": {
+              margin: "0 !important",
+              padding: "0 !important"
+            }
+          },
           sideOffset: 4,
           align: "end"
         },
@@ -579,9 +594,16 @@ const TriggerDasboardItem = ({
           },
           /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
         ),
-        /* @__PURE__ */ React.createElement(dropdown.DropdownMenuItem, { onClick: () => setIsDeleteModalOpen(true), css: {
-          cursor: "pointer"
-        } }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete")))
+        /* @__PURE__ */ React.createElement(
+          dropdown.DropdownMenuItem,
+          {
+            onClick: () => setIsDeleteModalOpen(true),
+            css: {
+              cursor: "pointer"
+            }
+          },
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete"))
+        )
       )))
     ),
     isMappingDisplayed && /* @__PURE__ */ React.createElement(
@@ -624,7 +646,9 @@ const TriggerDasboardItem = ({
           }
         }
       )) : null,
-      ((_e = (_d = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _d.variables) == null ? void 0 : _e.filter((variable) => variable.isEnabled).length) ? /* @__PURE__ */ React.createElement(
+      ((_e = (_d = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _d.variables) == null ? void 0 : _e.filter(
+        (variable) => variable.isEnabled
+      ).length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: ((_g = (_f = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _f.variables) == null ? void 0 : _g.length) > 1 ? "PASSING VARIABLES TO SURVEY" : "PASSING VARIABLE TO SURVEY",
@@ -632,27 +656,36 @@ const TriggerDasboardItem = ({
           backgroundColor: "$positive100"
         }
       ) : null,
-      /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6", css: { paddingBlock: "$8" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold" }, "SEND SURVEY"), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, ((_i = (_h = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _h.shareType) == null ? void 0 : _i.value) ? /* @__PURE__ */ React.createElement(
-        EventComponent,
-        {
-          heading: "Share Type:",
-          description: (_k = (_j = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _j.shareType) == null ? void 0 : _k.label
-        }
-      ) : null, ((_m = (_l = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _l.shareRecipient) == null ? void 0 : _m.value) ? /* @__PURE__ */ React.createElement(
-        EventComponent,
-        {
-          heading: "Recipient:",
-          hasBorder: true,
-          description: (_o = (_n = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _n.shareRecipient) == null ? void 0 : _o.label
-        }
-      ) : null, ((_q = (_p = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _p.shareChannel) == null ? void 0 : _q.value) ? /* @__PURE__ */ React.createElement(
-        EventComponent,
+      /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        flex.Flex,
         {
-          hasBorder: true,
-          heading: "Share Channel:",
-          description: (_s = (_r = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _r.shareChannel) == null ? void 0 : _s.label
-        }
-      ) : null)))
+          flexDirection: "column",
+          gap: "$6",
+          css: { paddingBlock: "$8" }
+        },
+        /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold" }, "SEND SURVEY"),
+        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, ((_i = (_h = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _h.shareType) == null ? void 0 : _i.value) ? /* @__PURE__ */ React.createElement(
+          EventComponent,
+          {
+            heading: "Share Type:",
+            description: (_k = (_j = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _j.shareType) == null ? void 0 : _k.label
+          }
+        ) : null, ((_m = (_l = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _l.shareRecipient) == null ? void 0 : _m.value) ? /* @__PURE__ */ React.createElement(
+          EventComponent,
+          {
+            heading: "Recipient:",
+            hasBorder: true,
+            description: (_o = (_n = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _n.shareRecipient) == null ? void 0 : _o.label
+          }
+        ) : null, ((_q = (_p = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _p.shareChannel) == null ? void 0 : _q.value) ? /* @__PURE__ */ React.createElement(
+          EventComponent,
+          {
+            hasBorder: true,
+            heading: "Share Channel:",
+            description: (_s = (_r = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _r.shareChannel) == null ? void 0 : _s.label
+          }
+        ) : null)
+      ))
     ),
     isMappingDisplayed && /* @__PURE__ */ React.createElement(
       box.Box,
@@ -714,7 +747,12 @@ const SingleMappingDashboardItem = ({
     flex.Flex,
     {
       flexDirection: "column",
-      css: { width: "100%", height: "100%", overflow: "auto", marginTop: "$8" }
+      css: {
+        width: "100%",
+        height: "100%",
+        overflow: "auto",
+        marginTop: "$8"
+      }
     },
     /* @__PURE__ */ React.createElement(
       flex.Flex,
@@ -722,7 +760,7 @@ const SingleMappingDashboardItem = ({
         css: {
           border: isMappingDisplayed ? "$borderWidths$xs solid $black400" : "$borderWidths$xs solid $neutral200",
           borderRadius: isMappingDisplayed ? "$2xl $2xl 0 0" : "$2xl",
-          padding: "$10 $12",
+          padding: "15px $12",
           width: "100%",
           backgroundColor: isMappingDisplayed ? "rgba(100, 116, 139, 0.04)" : "$white900"
         },
@@ -738,29 +776,60 @@ const SingleMappingDashboardItem = ({
           onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
         },
         isMappingDisplayed ? /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 40, color: "#848484" }),
-        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (_d = (_c = (_b = (_a = field == null ? void 0 : field.configurationFields) == null ? void 0 : _a.account) == null ? void 0 : _b.value) == null ? void 0 : _c.label) != null ? _d : "Mapping"), ((_e = field == null ? void 0 : field.configurationFields) == null ? void 0 : _e.sheetURL) ? /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", alignItems: "center" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, `Sync `), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold", css: { color: "$neutral600" } }, (field == null ? void 0 : field.importMethod) === "SEND_ALL_DATA" ? "All" : "Specific"), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, "Survey responses to"), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold", css: { color: "$neutral600" } }, typeof ((_f = field == null ? void 0 : field.configurationFields) == null ? void 0 : _f.spreadsheet) === "object" ? (_i = (_h = (_g = field == null ? void 0 : field.configurationFields) == null ? void 0 : _g.spreadsheet) == null ? void 0 : _h.value) == null ? void 0 : _i.label : (_k = (_j = field == null ? void 0 : field.configurationFields) == null ? void 0 : _j.spreadsheet) == null ? void 0 : _k.value)) : null))
+        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? icon : null, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (_d = (_c = (_b = (_a = field == null ? void 0 : field.configurationFields) == null ? void 0 : _a.account) == null ? void 0 : _b.value) == null ? void 0 : _c.label) != null ? _d : "Mapping"), ((_e = field == null ? void 0 : field.configurationFields) == null ? void 0 : _e.sheetURL) && (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", alignItems: "center" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, `Sync `), /* @__PURE__ */ React.createElement(
+          text.Text,
+          {
+            size: "sm",
+            weight: "bold",
+            css: { color: "$neutral600" }
+          },
+          (field == null ? void 0 : field.importMethod) === "SEND_ALL_DATA" ? "All" : "Specific"
+        ), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, "Survey responses to"), /* @__PURE__ */ React.createElement(
+          text.Text,
+          {
+            size: "sm",
+            weight: "bold",
+            css: { color: "$neutral600" }
+          },
+          typeof ((_f = field == null ? void 0 : field.configurationFields) == null ? void 0 : _f.spreadsheet) === "object" ? (_i = (_h = (_g = field == null ? void 0 : field.configurationFields) == null ? void 0 : _g.spreadsheet) == null ? void 0 : _h.value) == null ? void 0 : _i.label : (_k = (_j = field == null ? void 0 : field.configurationFields) == null ? void 0 : _j.spreadsheet) == null ? void 0 : _k.value
+        )) : null))
       ),
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(flex.Flex, { className: `rotating-div ${isSyncing === field.id ? "rotate" : ""}`, justifyContent: "center", alignItems: "center", css: {
-        cursor: "pointer",
-        marginInlineEnd: "$3"
-      }, onClick: async () => {
-        setIsSyncing(field.id);
-        setTimeout(async () => {
-          await (syncMapping == null ? void 0 : syncMapping(field.id));
-          setIsSyncing(null);
-        }, 2e3);
-      } }, /* @__PURE__ */ React.createElement(sync.default, null)), (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(box.Box, { css: {
-        width: "1px",
-        height: "20px",
-        background: "#64748B33"
-      } }) : null, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Sync", className: "dm-sans" }, /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          className: `rotating-div ${isSyncing === field.id ? "rotate" : ""}`,
+          justifyContent: "center",
+          alignItems: "center",
+          css: {
+            cursor: "pointer",
+            marginInlineEnd: "$3"
+          },
+          onClick: async () => {
+            setIsSyncing(field.id);
+            setTimeout(async () => {
+              await (syncMapping == null ? void 0 : syncMapping(field.id));
+              setIsSyncing(null);
+            }, 2e3);
+          }
+        },
+        /* @__PURE__ */ React.createElement(sync.default, null)
+      )), (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          css: {
+            width: "1px",
+            height: "20px",
+            background: "#64748B33"
+          }
+        }
+      ) : null, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(
         _switch.Switch,
         {
           size: "md",
           checked: field.isEnabled,
           onChange: (value) => toggleDashboardField == null ? void 0 : toggleDashboardField(field.id, value)
         }
-      ) : null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+      ) : null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "More", className: "dm-sans" }, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
         iconButton.IconButton,
         {
           variant: "ghost",
@@ -768,14 +837,18 @@ const SingleMappingDashboardItem = ({
           size: "lg",
           icon: /* @__PURE__ */ React.createElement(ellipsisVertical.EllipsisVerticalIcon, null)
         }
-      )), /* @__PURE__ */ React.createElement(
+      ))), /* @__PURE__ */ React.createElement(
         dropdown.DropdownMenuContent,
         {
           className: "dm-sans",
-          css: { minWidth: 180, zIndex: 10, "& p": {
-            margin: "0 !important",
-            padding: "0 !important"
-          } },
+          css: {
+            minWidth: 180,
+            zIndex: 10,
+            "& p": {
+              margin: "0 !important",
+              padding: "0 !important"
+            }
+          },
           sideOffset: 4,
           align: "end"
         },
@@ -797,101 +870,123 @@ const SingleMappingDashboardItem = ({
           },
           /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
         ),
-        /* @__PURE__ */ React.createElement(dropdown.DropdownMenuItem, { onClick: () => setIsDeleteModalOpen(true), css: {
-          cursor: "pointer"
-        } }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete")))
+        /* @__PURE__ */ React.createElement(
+          dropdown.DropdownMenuItem,
+          {
+            onClick: () => setIsDeleteModalOpen(true),
+            css: {
+              cursor: "pointer"
+            }
+          },
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete"))
+        )
       )))
     ),
-    isMappingDisplayed ? /* @__PURE__ */ React.createElement(
+    isMappingDisplayed ? /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
       box.Box,
-      null,
-      /* @__PURE__ */ React.createElement(
-        box.Box,
+      {
+        css: {
+          borderInline: "$borderWidths$xs solid $black400",
+          maxHeight: 734,
+          height: "100%",
+          position: "relative",
+          overflow: "auto",
+          padding: "$16 $36"
+        }
+      },
+      /* @__PURE__ */ React.createElement(SingleMappingEventWrapper, { field }),
+      !!((_m = (_l = field == null ? void 0 : field.mappedFields) == null ? void 0 : _l.questions) == null ? void 0 : _m.filter(
+        (question) => question.isEnabled
+      ).length) ? /* @__PURE__ */ React.createElement(
+        SingleMappingChipWrapper,
         {
-          css: {
-            borderInline: "$borderWidths$xs solid $black400",
-            maxHeight: 734,
-            height: "100%",
-            position: "relative",
-            overflow: "auto",
-            padding: "$16 $36"
-          }
-        },
-        /* @__PURE__ */ React.createElement(SingleMappingEventWrapper, { field }),
-        !!((_m = (_l = field == null ? void 0 : field.mappedFields) == null ? void 0 : _l.questions) == null ? void 0 : _m.filter((question) => question.isEnabled).length) ? /* @__PURE__ */ React.createElement(
-          SingleMappingChipWrapper,
-          {
-            heading: "Questions",
-            fields: (_o = (_n = field == null ? void 0 : field.mappedFields) == null ? void 0 : _n.questions) == null ? void 0 : _o.filter((question) => question.isEnabled),
-            backgroundColor: "#E5F2FF"
-          }
-        ) : null,
-        !!((_q = (_p = field == null ? void 0 : field.mappedFields) == null ? void 0 : _p.variables) == null ? void 0 : _q.filter((variable) => variable.isEnabled).length) ? /* @__PURE__ */ React.createElement(
-          SingleMappingChipWrapper,
-          {
-            heading: "Variables",
-            fields: (_s = (_r = field == null ? void 0 : field.mappedFields) == null ? void 0 : _r.variables) == null ? void 0 : _s.filter((variable) => variable.isEnabled),
-            backgroundColor: "$positive100"
-          }
-        ) : null,
-        !!((_u = (_t = field == null ? void 0 : field.mappedFields) == null ? void 0 : _t.contactProperties) == null ? void 0 : _u.filter((property) => property.isEnabled).length) ? /* @__PURE__ */ React.createElement(
-          SingleMappingChipWrapper,
-          {
-            heading: "Contacts",
-            fields: (_w = (_v = field == null ? void 0 : field.mappedFields) == null ? void 0 : _v.contactProperties) == null ? void 0 : _w.filter((property) => property.isEnabled),
-            backgroundColor: "$negative100"
-          }
-        ) : null,
-        !!((_y = (_x = field == null ? void 0 : field.mappedFields) == null ? void 0 : _x.expressions) == null ? void 0 : _y.filter((expression) => expression.isEnabled).length) ? /* @__PURE__ */ React.createElement(
-          SingleMappingChipWrapper,
-          {
-            heading: "Expression",
-            backgroundColor: "$neutral100",
-            fields: (_A = (_z = field == null ? void 0 : field.mappedFields) == null ? void 0 : _z.expressions) == null ? void 0 : _A.filter((expression) => expression.isEnabled)
-          }
-        ) : null,
-        !!((_C = (_B = field == null ? void 0 : field.mappedFields) == null ? void 0 : _B.property) == null ? void 0 : _C.filter((property) => property.isEnabled).length) ? /* @__PURE__ */ React.createElement(
-          SingleMappingChipWrapper,
-          {
-            heading: "Property",
-            hideBorder: true,
-            fields: (_E = (_D = field == null ? void 0 : field.mappedFields) == null ? void 0 : _D.property) == null ? void 0 : _E.filter((property) => property.isEnabled),
-            backgroundColor: "rgba(74, 156, 166, 0.15)"
-          }
-        ) : null
-      ),
-      isMappingDisplayed && /* @__PURE__ */ React.createElement(
-        box.Box,
+          heading: "Questions",
+          fields: (_o = (_n = field == null ? void 0 : field.mappedFields) == null ? void 0 : _n.questions) == null ? void 0 : _o.filter(
+            (question) => question.isEnabled
+          ),
+          backgroundColor: "#E5F2FF"
+        }
+      ) : null,
+      !!((_q = (_p = field == null ? void 0 : field.mappedFields) == null ? void 0 : _p.variables) == null ? void 0 : _q.filter(
+        (variable) => variable.isEnabled
+      ).length) ? /* @__PURE__ */ React.createElement(
+        SingleMappingChipWrapper,
         {
-          css: {
-            padding: "$8 $32",
-            border: "$borderWidths$xs solid $black400",
-            borderTop: "$borderWidths$xs solid $neutral200",
-            borderRadius: "0 0 $2xl $2xl",
-            height: "100%"
+          heading: "Variables",
+          fields: (_s = (_r = field == null ? void 0 : field.mappedFields) == null ? void 0 : _r.variables) == null ? void 0 : _s.filter(
+            (variable) => variable.isEnabled
+          ),
+          backgroundColor: "$positive100"
+        }
+      ) : null,
+      !!((_u = (_t = field == null ? void 0 : field.mappedFields) == null ? void 0 : _t.contactProperties) == null ? void 0 : _u.filter(
+        (property) => property.isEnabled
+      ).length) ? /* @__PURE__ */ React.createElement(
+        SingleMappingChipWrapper,
+        {
+          heading: "Contacts",
+          fields: (_w = (_v = field == null ? void 0 : field.mappedFields) == null ? void 0 : _v.contactProperties) == null ? void 0 : _w.filter(
+            (property) => property.isEnabled
+          ),
+          backgroundColor: "$negative100"
+        }
+      ) : null,
+      !!((_y = (_x = field == null ? void 0 : field.mappedFields) == null ? void 0 : _x.expressions) == null ? void 0 : _y.filter(
+        (expression) => expression.isEnabled
+      ).length) ? /* @__PURE__ */ React.createElement(
+        SingleMappingChipWrapper,
+        {
+          heading: "Expression",
+          backgroundColor: "$neutral100",
+          fields: (_A = (_z = field == null ? void 0 : field.mappedFields) == null ? void 0 : _z.expressions) == null ? void 0 : _A.filter(
+            (expression) => expression.isEnabled
+          )
+        }
+      ) : null,
+      !!((_C = (_B = field == null ? void 0 : field.mappedFields) == null ? void 0 : _B.property) == null ? void 0 : _C.filter(
+        (property) => property.isEnabled
+      ).length) ? /* @__PURE__ */ React.createElement(
+        SingleMappingChipWrapper,
+        {
+          heading: "Property",
+          hideBorder: true,
+          fields: (_E = (_D = field == null ? void 0 : field.mappedFields) == null ? void 0 : _D.property) == null ? void 0 : _E.filter(
+            (property) => property.isEnabled
+          ),
+          backgroundColor: "rgba(74, 156, 166, 0.15)"
+        }
+      ) : null
+    ), isMappingDisplayed && /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        css: {
+          padding: "$8 $32",
+          border: "$borderWidths$xs solid $black400",
+          borderTop: "$borderWidths$xs solid $neutral200",
+          borderRadius: "0 0 $2xl $2xl",
+          height: "100%"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          size: "sm",
+          leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
+          color: "primary",
+          variant: "ghost",
+          onClick: () => {
+            onMappingEditHandler(field.id);
+            handleEditField({
+              type: "SINGLE_MAPPING",
+              values: field,
+              id: field.id
+            });
+            handleDashboardPage(false, "MAPPING");
           }
         },
-        /* @__PURE__ */ React.createElement(
-          button.Button,
-          {
-            size: "sm",
-            leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
-            color: "primary",
-            variant: "ghost",
-            onClick: () => {
-              onMappingEditHandler(field.id);
-              handleEditField({
-                type: "SINGLE_MAPPING",
-                values: field,
-                id: field.id
-              });
-              handleDashboardPage(false, "MAPPING");
-            }
-          },
-          "Edit Mapping"
-        )
+        "Edit Mapping"
       )
-    ) : null
+    )) : null
   ), isDeleteModalOpen && /* @__PURE__ */ React.createElement(
     confirmationModal.default,
     {
@@ -908,7 +1003,6 @@ const EventComponent = ({
   hasBorder,
   hasLink = ""
 }) => {
-  console.log(hasLink, "hasLink");
   return /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, hasBorder && /* @__PURE__ */ React.createElement(box.Box, { css: { paddingInline: "$3" } }, /* @__PURE__ */ React.createElement(
     box.Box,
     {
@@ -919,7 +1013,23 @@ const EventComponent = ({
         marginInline: "$4"
       }
     }
-  )), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, heading), !!hasLink ? /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$neutral800", textDecoration: "underline", cursor: "pointer" }, onClick: () => window.open(`${hasLink}`, "_blank") }, description) : /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, description)));
+  )), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral700" } }, heading), !!hasLink ? /* @__PURE__ */ React.createElement(
+    text.Text,
+    {
+      size: "sm",
+      weight: "medium",
+      css: {
+        color: "$neutral800",
+        textDecoration: "underline",
+        cursor: "pointer",
+        "&:hover": {
+          color: !!hasLink ? "$neutral900" : "$neutral800"
+        }
+      },
+      onClick: () => window.open(`${hasLink}`, "_blank")
+    },
+    description
+  ) : /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, description)));
 };
 const SingleMappingEventWrapper = ({
   field,
@@ -927,7 +1037,13 @@ const SingleMappingEventWrapper = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
   const hasEventSection = !!((_c = (_b = (_a = field == null ? void 0 : field.configurationFields) == null ? void 0 : _a.account) == null ? void 0 : _b.value) == null ? void 0 : _c.label) || !!field.action || !!field.exisitingSheet || !!field.object && isTrigger;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, hasEventSection ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold", css: { textTransform: "uppercase" } }, "Event"), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, !!((_f = (_e = (_d = field == null ? void 0 : field.configurationFields) == null ? void 0 : _d.account) == null ? void 0 : _e.value) == null ? void 0 : _f.label) ? /* @__PURE__ */ React.createElement(EventComponent, { heading: "Account:", description: (_i = (_h = (_g = field == null ? void 0 : field.configurationFields) == null ? void 0 : _g.account) == null ? void 0 : _h.value) == null ? void 0 : _i.label }) : null, !!((_l = (_k = (_j = field == null ? void 0 : field.configurationFields) == null ? void 0 : _j.object) == null ? void 0 : _k.value) == null ? void 0 : _l.label) ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, hasEventSection ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold", css: { textTransform: "uppercase" } }, "Event"), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, !!((_f = (_e = (_d = field == null ? void 0 : field.configurationFields) == null ? void 0 : _d.account) == null ? void 0 : _e.value) == null ? void 0 : _f.label) ? /* @__PURE__ */ React.createElement(
+    EventComponent,
+    {
+      heading: "Account:",
+      description: (_i = (_h = (_g = field == null ? void 0 : field.configurationFields) == null ? void 0 : _g.account) == null ? void 0 : _h.value) == null ? void 0 : _i.label
+    }
+  ) : null, !!((_l = (_k = (_j = field == null ? void 0 : field.configurationFields) == null ? void 0 : _j.object) == null ? void 0 : _k.value) == null ? void 0 : _l.label) ? /* @__PURE__ */ React.createElement(
     EventComponent,
     {
       heading: "Object:",
@@ -991,9 +1107,10 @@ const SingleMappingChipWrapper = ({
         tooltip.Tooltip,
         {
           delayDuration: 300,
-          content: currentChipWidth >= 248 ? name : "",
+          content: currentChipWidth >= 220 ? name : "",
           size: "md",
-          sideOffset: 4
+          sideOffset: 4,
+          className: "dm-sans"
         },
         /* @__PURE__ */ React.createElement(
           chip.Chip,
@@ -1002,8 +1119,10 @@ const SingleMappingChipWrapper = ({
             size: "md",
             css: {
               background: backgroundColor,
+              borderRadius: "4px !important",
               maxWidth: 248,
               overflow: "hidden",
+              fontFamily: "'Roboto Mono', monospace !important",
               textOverflow: "ellipsis",
               whiteSpace: "nowrap",
               display: "block"
@@ -1138,10 +1257,14 @@ const DashboardItem = ({
         dropdown.DropdownMenuContent,
         {
           className: "dm-sans",
-          css: { minWidth: 180, zIndex: 10, "& p": {
-            margin: "0 !important",
-            padding: "0 !important"
-          } },
+          css: {
+            minWidth: 180,
+            zIndex: 10,
+            "& p": {
+              margin: "0 !important",
+              padding: "0 !important"
+            }
+          },
           sideOffset: 4,
           align: "end"
         },
@@ -1163,9 +1286,16 @@ const DashboardItem = ({
           },
           /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
         ),
-        /* @__PURE__ */ React.createElement(dropdown.DropdownMenuItem, { onClick: () => setIsDeleteModalOpen(true), css: {
-          cursor: "pointer"
-        } }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete")))
+        /* @__PURE__ */ React.createElement(
+          dropdown.DropdownMenuItem,
+          {
+            onClick: () => setIsDeleteModalOpen(true),
+            css: {
+              cursor: "pointer"
+            }
+          },
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete"))
+        )
       )))
     ),
     /* @__PURE__ */ React.createElement(