@sparrowengg/integrations-templates-frontend 2.1.0-notion-release.33 → 2.1.0-notion-release.35

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

@@ -5,11 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cursor = require('../../commons/icons/cursor.js');
 var mapping = require('../../commons/icons/mapping.js');
-var index = require('../../node_modules/html-react-parser/esm/index.js');
-var index$1 = require('../../commons/constants/index.js');
-var confirmationModal = require('../../commons/components/confirmation-modal.js');
-var sync = require('../../commons/icons/sync.js');
-var conditionDescriptionBuilder = require('../../mapping/utils/conditionDescriptionBuilder.js');
+var dashboardConstants = require('./dashboard-constants.js');
+var DropdownItem = require('./dashboard/DropdownItem.js');
+var MultiAccountFallback = require('./dashboard/MultiAccountFallback.js');
+var TriggerDashboardItem = require('./dashboard/TriggerDashboardItem.js');
+var SingleMappingDashboardItem = require('./dashboard/SingleMappingDashboardItem.js');
+var DashboardItem = require('./dashboard/DashboardItem.js');
 var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
 var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
 var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
@@ -20,24 +21,7 @@ var dropdown = require('../../node_modules/@sparrowengg/twigs-react/dist/es/drop
 var tooltip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
 var chevronDown = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-down.js');
 var tabs = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tabs/tabs.js');
-var chevronRight = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
-var chip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js');
-var _switch = require('../../node_modules/@sparrowengg/twigs-react/dist/es/switch/switch.js');
-var iconButton = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
-var ellipsisVertical = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/ellipsis-vertical.js');
-var pencil = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/pencil.js');
-var _delete = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/delete.js');
-var table = require('../../node_modules/@sparrowengg/twigs-react/dist/es/table/table.js');
 
-const trasformToPastTense = (value) => {
-  if (value.endsWith("e")) {
-    return value + "d";
-  } else if (value.endsWith("y")) {
-    return value.slice(0, -1) + "ied";
-  } else {
-    return value + "ed";
-  }
-};
 const Dashboard = ({
   hasEditMapping,
   onMappingEditHandler,
@@ -65,7 +49,7 @@ const Dashboard = ({
       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: "$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(
+    /* @__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) }, dashboardConstants.DASHBOARD_UI_STRINGS.ADD_ACCOUNT), hasDropdownComponents.mapping && !hasDropdownComponents.trigger ? /* @__PURE__ */ React.createElement(
       button.Button,
       {
         size: "lg",
@@ -74,11 +58,11 @@ const Dashboard = ({
         leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null),
         onClick: () => handleConfigurationType("MAPPING")
       },
-      "New Mapping"
+      dashboardConstants.DASHBOARD_UI_STRINGS.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" : ""
+        content: !triggerEnabled && !mappingEnabled ? dashboardConstants.DASHBOARD_UI_STRINGS.TRIGGER_MAPPING_LIMIT_REACHED : ""
       },
       /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
         button.Button,
@@ -87,7 +71,7 @@ const Dashboard = ({
           disabled: !triggerEnabled && !mappingEnabled,
           rightIcon: /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, null)
         },
-        "Add New"
+        dashboardConstants.DASHBOARD_UI_STRINGS.ADD_NEW
       ))
     ), /* @__PURE__ */ React.createElement(
       dropdown.DropdownMenuContent,
@@ -105,23 +89,23 @@ const Dashboard = ({
         }
       },
       hasDropdownComponents.trigger ? /* @__PURE__ */ React.createElement(
-        DropdownItem,
+        DropdownItem.DropdownItem,
         {
-          toolTipContent: "You have reached the maximum limit for creating triggers",
+          toolTipContent: dashboardConstants.DASHBOARD_UI_STRINGS.TRIGGER_LIMIT_REACHED,
           isDisabled: !triggerEnabled,
           icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 24, color: "#6A6A6A" }),
-          heading: "Trigger",
-          description: "Trigger the Survey when a record is created/updated",
+          heading: dashboardConstants.DASHBOARD_UI_STRINGS.TRIGGER,
+          description: dashboardConstants.DASHBOARD_UI_STRINGS.TRIGGER_DESCRIPTION,
           onClickHandler: () => handleConfigurationType("TRIGGER")
         }
       ) : null,
       hasDropdownComponents.mapping ? /* @__PURE__ */ React.createElement(
-        DropdownItem,
+        DropdownItem.DropdownItem,
         {
           isDisabled: !mappingEnabled,
-          toolTipContent: "You have reached the maximum limit for creating mappings",
+          toolTipContent: dashboardConstants.DASHBOARD_UI_STRINGS.MAPPING_LIMIT_REACHED,
           icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 24, color: "#6A6A6A" }),
-          heading: "Mapping",
+          heading: dashboardConstants.DASHBOARD_UI_STRINGS.MAPPING,
           description: `Create/Update record in ${integrationName} from survey responses`,
           onClickHandler: () => handleConfigurationType("MAPPING")
         }
@@ -195,9 +179,9 @@ const MultiAccountDashboard = ({
         "& button": { color: "$neutral900" }
       }
     },
-    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "ALL" }, "All"),
-    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "TRIGGER" }, "Trigger"),
-    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "MAPPING" }, "Mapping")
+    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "ALL" }, dashboardConstants.DASHBOARD_UI_STRINGS.ALL),
+    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "TRIGGER" }, dashboardConstants.DASHBOARD_UI_STRINGS.TRIGGER),
+    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "MAPPING" }, dashboardConstants.DASHBOARD_UI_STRINGS.MAPPING)
   ), /* @__PURE__ */ React.createElement(
     tabs.TabsContent,
     {
@@ -205,18 +189,18 @@ const MultiAccountDashboard = ({
       css: { paddingBlock: "$12", paddingInline: 0 }
     },
     /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, triggerFields == null ? void 0 : triggerFields.map((field) => {
-      var _a2, _b2, _c2, _d2, _e;
+      var _a2, _b2, _c2;
       return /* @__PURE__ */ React.createElement(
-        DashboardItem,
+        DashboardItem.DashboardItem,
         {
           hasEditMapping,
           key: field.id,
           isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
-          heading: (_c2 = (_b2 = field.domain) != null ? _b2 : field.email) != null ? _c2 : "Field",
+          heading: (_c2 = (_b2 = field.domain) != null ? _b2 : field.email) != null ? _c2 : dashboardConstants.DASHBOARD_UI_STRINGS.TRIGGER_HEADING,
           id: field.id,
-          description: `Trigger survey when an ${(_d2 = field == null ? void 0 : field.object) == null ? void 0 : _d2.toLowerCase()} is ${(_e = field == null ? void 0 : field.action) == null ? void 0 : _e.toLowerCase()} in ${integrationName}`,
+          description: dashboardConstants.getTriggerDescription(integrationName, field),
           fields: field.fields,
           mappingConditions: field.mappingConditions,
           isEnabled: field.isEnabled,
@@ -230,18 +214,18 @@ const MultiAccountDashboard = ({
       );
     })) : null, !!((_a = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _a.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _b.map(
       (field) => {
-        var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i;
+        var _a2, _b2, _c2;
         return /* @__PURE__ */ React.createElement(React.Fragment, null, (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
-          DashboardItem,
+          DashboardItem.DashboardItem,
           {
             hasEditMapping,
             key: field.id,
             isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
             onMappingEditHandler,
             icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-            heading: (_c2 = (_b2 = field.domain) != null ? _b2 : field.email) != null ? _c2 : "Field",
+            heading: (_c2 = (_b2 = field.domain) != null ? _b2 : field.email) != null ? _c2 : dashboardConstants.DASHBOARD_UI_STRINGS.MAPPING_HEADING,
             id: field.id,
-            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_f = (_e = (_d2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _d2.events) == null ? void 0 : _e.label) == null ? void 0 : _f.toLowerCase()} is ${trasformToPastTense(`${(_i = (_h = (_g = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _g.action) == null ? void 0 : _h.label) == null ? void 0 : _i.toLowerCase()}`)}`,
+            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName}`,
             fields: field.fields,
             isEnabled: field.isEnabled,
             integrationName,
@@ -253,7 +237,7 @@ const MultiAccountDashboard = ({
             deleteFieldHandler
           }
         ) : /* @__PURE__ */ React.createElement(
-          SingleMappingDashboardItem,
+          SingleMappingDashboardItem.SingleMappingDashboardItem,
           {
             hasEditMapping,
             key: field.id,
@@ -277,18 +261,18 @@ const MultiAccountDashboard = ({
       css: { paddingBlock: "$12", paddingInline: 0 }
     },
     !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, triggerFields == null ? void 0 : triggerFields.map((field) => {
-      var _a2, _b2, _c2;
+      var _a2;
       return /* @__PURE__ */ React.createElement(
-        DashboardItem,
+        DashboardItem.DashboardItem,
         {
           mappingConditions: field.mappingConditions,
           key: field.id,
           isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
-          heading: "Trigger",
+          heading: dashboardConstants.DASHBOARD_UI_STRINGS.TRIGGER,
           id: field.id,
-          description: `Trigger survey when an ${(_b2 = field == null ? void 0 : field.object) == null ? void 0 : _b2.toLowerCase()} is ${(_c2 = field == null ? void 0 : field.action) == null ? void 0 : _c2.toLowerCase()} in ${integrationName}`,
+          description: dashboardConstants.getTriggerDescription(integrationName, field),
           fields: field.fields,
           isEnabled: field.isEnabled,
           integrationName,
@@ -300,9 +284,9 @@ const MultiAccountDashboard = ({
         }
       );
     })) : /* @__PURE__ */ React.createElement(
-      MultiAccountFallback,
+      MultiAccountFallback.MultiAccountFallback,
       {
-        title: "Trigger",
+        title: dashboardConstants.DASHBOARD_UI_STRINGS.TRIGGER,
         onClickHandler: () => handleConfigurationType("TRIGGER")
       }
     )
@@ -314,18 +298,18 @@ const MultiAccountDashboard = ({
     },
     !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map(
       (field) => {
-        var _a2, _b2, _c2, _d2, _e, _f, _g;
+        var _a2;
         return /* @__PURE__ */ React.createElement(React.Fragment, null, (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
-          DashboardItem,
+          DashboardItem.DashboardItem,
           {
             mappingConditions: field.mappingConditions,
             key: field.id,
             isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
             onMappingEditHandler,
             icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-            heading: (field == null ? void 0 : field.mappingName) || "Mapping",
+            heading: (field == null ? void 0 : field.mappingName) || dashboardConstants.DASHBOARD_UI_STRINGS.MAPPING,
             id: field.id,
-            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()} is ${trasformToPastTense(`${(_g = (_f = (_e = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e.action) == null ? void 0 : _f.label) == null ? void 0 : _g.toLowerCase()}`)}`,
+            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName}`,
             fields: field.fields,
             isEnabled: field.isEnabled,
             integrationName,
@@ -336,7 +320,7 @@ const MultiAccountDashboard = ({
             deleteFieldHandler
           }
         ) : /* @__PURE__ */ React.createElement(
-          SingleMappingDashboardItem,
+          SingleMappingDashboardItem.SingleMappingDashboardItem,
           {
             key: field.id,
             field,
@@ -352,52 +336,14 @@ const MultiAccountDashboard = ({
         ));
       }
     ))) : /* @__PURE__ */ React.createElement(
-      MultiAccountFallback,
+      MultiAccountFallback.MultiAccountFallback,
       {
-        title: "Mapping",
+        title: dashboardConstants.DASHBOARD_UI_STRINGS.MAPPING,
         onClickHandler: () => handleConfigurationType("MAPPING")
       }
     )
   )));
 };
-const MultiAccountFallback = ({
-  title,
-  onClickHandler
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    flex.Flex,
-    {
-      justifyContent: "center",
-      flexDirection: "column",
-      alignItems: "center",
-      css: { paddingTop: 182 }
-    },
-    /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, `Zero ${title} Entries`),
-    /* @__PURE__ */ React.createElement(
-      text.Text,
-      {
-        css: {
-          textAlign: "center",
-          maxWidth: 400,
-          marginBlock: "$4 $12",
-          color: "$neutral800"
-        },
-        size: "md"
-      },
-      "Creating one is as easy as a breeze. Just a click away to get started."
-    ),
-    /* @__PURE__ */ React.createElement(
-      button.Button,
-      {
-        size: "lg",
-        leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null),
-        variant: "outline",
-        onClick: onClickHandler
-      },
-      `New ${title}`
-    )
-  );
-};
 const SingleAccountDashboard = ({
   hasEditMapping,
   syncMapping,
@@ -415,14 +361,14 @@ const SingleAccountDashboard = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: "$20" } }, triggerFields == null ? void 0 : triggerFields.map((field) => {
-    var _a2, _b2, _c2, _d2, _e2;
+    var _a2;
     return /* @__PURE__ */ React.createElement(
-      TriggerDasboardItem,
+      TriggerDashboardItem.TriggerDashboardItem,
       {
         isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
         fieldOptions,
         field,
-        description: `Trigger survey when ${/^[aeiouAEIOU]$/.test(((_b2 = field == null ? void 0 : field.object) == null ? void 0 : _b2[0]) || "") ? "an" : "a"} ${(_c2 = field == null ? void 0 : field.object) == null ? void 0 : _c2.toLowerCase()} is ${Array.isArray(field == null ? void 0 : field.action) ? (_d2 = field == null ? void 0 : field.action) == null ? void 0 : _d2.map((action) => action.toLowerCase()).join(" or ") : (_e2 = field == null ? void 0 : field.action) == null ? void 0 : _e2.toLowerCase()} in ${integrationName}`,
+        description: dashboardConstants.getTriggerDescription(integrationName, field),
         key: field.id,
         integrationName,
         icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
@@ -434,19 +380,19 @@ const SingleAccountDashboard = ({
     );
   })) : null, (mappingFields == null ? void 0 : mappingFields.type) === "DYNAMIC_MAPPING" ? /* @__PURE__ */ React.createElement(React.Fragment, null, !!((_a = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _a.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_b = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _b.map(
     (field) => {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+      var _a2;
       if ((field == null ? void 0 : field.type) === "MULTI_MAPPING") {
         return /* @__PURE__ */ React.createElement(
-          DashboardItem,
+          DashboardItem.DashboardItem,
           {
             mappingConditions: field.mappingConditions,
             hasEditMapping,
             isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
             onMappingEditHandler,
             icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-            heading: (field == null ? void 0 : field.mappingName) || "Mapping",
+            heading: (field == null ? void 0 : field.mappingName) || dashboardConstants.DASHBOARD_UI_STRINGS.MAPPING,
             id: field.id,
-            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()} is ${trasformToPastTense(`${(_g2 = (_f2 = (_e2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e2.action) == null ? void 0 : _f2.label) == null ? void 0 : _g2.toLowerCase()}`)}`,
+            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName}`,
             fields: field.fields,
             isEnabled: field.isEnabled,
             integrationName,
@@ -459,7 +405,7 @@ const SingleAccountDashboard = ({
         );
       } else {
         return /* @__PURE__ */ React.createElement(
-          SingleMappingDashboardItem,
+          SingleMappingDashboardItem.SingleMappingDashboardItem,
           {
             hasEditMapping,
             onMappingEditHandler,
@@ -478,17 +424,17 @@ const SingleAccountDashboard = ({
     }
   )) : null) : /* @__PURE__ */ React.createElement(React.Fragment, null, !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) && (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map(
     (field) => {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+      var _a2;
       return /* @__PURE__ */ React.createElement(
-        DashboardItem,
+        DashboardItem.DashboardItem,
         {
           mappingConditions: field.mappingConditions,
           isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-          heading: (field == null ? void 0 : field.mappingName) || "Mapping",
+          heading: (field == null ? void 0 : field.mappingName) || dashboardConstants.DASHBOARD_UI_STRINGS.MAPPING,
           id: field.id,
-          description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()} is ${trasformToPastTense(`${(_g2 = (_f2 = (_e2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e2.action) == null ? void 0 : _f2.label) == null ? void 0 : _g2.toLowerCase()}`)}`,
+          description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName}`,
           fields: field.fields,
           isEnabled: field.isEnabled,
           integrationName,
@@ -503,7 +449,7 @@ const SingleAccountDashboard = ({
   )) : null, ((_e = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _e.type) === "SINGLE_MAPPING" && !!((_g = (_f = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _f.fields) == null ? void 0 : _g.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_i = (_h = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _h.fields) == null ? void 0 : _i.map(
     (field, index) => {
       return /* @__PURE__ */ React.createElement(
-        SingleMappingDashboardItem,
+        SingleMappingDashboardItem.SingleMappingDashboardItem,
         {
           onMappingEditHandler,
           syncMapping,
@@ -520,1092 +466,6 @@ const SingleAccountDashboard = ({
     }
   )) : null));
 };
-const TriggerDasboardItem = ({
-  isDraft,
-  fieldOptions,
-  icon,
-  field,
-  description,
-  integrationName,
-  handleEditField,
-  handleDashboardPage,
-  toggleDashboardField,
-  deleteFieldHandler
-}) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
-  const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
-  const transformDataToString = (data) => {
-    const filterConditions = data.filters.map((filterGroup) => {
-      var _a2;
-      return (_a2 = filterGroup.filter.map((filter) => {
-        var _a3, _b2, _c2, _d2;
-        const field2 = filter.field;
-        const comparator = filter.comparator;
-        const value = filter.value;
-        const formattedComparator = ((_a3 = index$1.operatorOptions.find((option) => option.value === comparator)) == null ? void 0 : _a3.label) || comparator;
-        const fieldLabel = (_d2 = (_c2 = (_b2 = fieldOptions.find(
-          (options) => options.value === field2
-        )) == null ? void 0 : _b2.label) != null ? _c2 : field2 == null ? void 0 : field2.label) != null ? _d2 : field2;
-        return `${fieldLabel} ${formattedComparator === "NO_PREFERENCE" ? "has no preference" : formattedComparator} ${value}`;
-      })) == null ? void 0 : _a2.join(
-        ` <span style="color: #6A6A6A;font-weight: 600;">${filterGroup.condition.toLowerCase()}</span> `
-      );
-    }).join(
-      `<br /> <span style="color: #6A6A6A;font-weight: 600;">${data.condition.toLowerCase() === "or" ? "Or" : "And"} When,</span> `
-    );
-    return `<p style="font-family: 'DM Sans'; font-size: 13.33px; font-weight: 400;line-height: 30px; color: #848484;"><span style="color: #6A6A6A;font-weight: 600;">When</span> ${filterConditions}</p>`;
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    flex.Flex,
-    {
-      flexDirection: "column",
-      css: {
-        width: "100%",
-        height: "100%",
-        overflow: "auto",
-        marginTop: "$8"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      flex.Flex,
-      {
-        css: {
-          border: isMappingDisplayed ? "$borderWidths$xs solid $black400" : "$borderWidths$xs solid $neutral200",
-          borderRadius: isMappingDisplayed ? "$2xl $2xl 0 0" : "$2xl",
-          padding: "$10 $12",
-          width: "100%",
-          backgroundColor: isMappingDisplayed ? "rgba(100, 116, 139, 0.04)" : "$white900"
-        },
-        justifyContent: "space-between",
-        alignItems: "center"
-      },
-      /* @__PURE__ */ React.createElement(
-        flex.Flex,
-        {
-          alignItems: "center",
-          gap: "$4",
-          css: { cursor: "pointer" },
-          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" }, (_a = field == null ? void 0 : field.email) != null ? _a : "Trigger"), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, description != null ? description : `Trigger survey when an event happens in ${integrationName}`)))
-      ),
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, isDraft && /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(chip.Chip, { rounded: "full", size: "sm" }, /* @__PURE__ */ React.createElement(
-        box.Box,
-        {
-          css: {
-            background: "$neutral500",
-            borderRadius: "50%",
-            marginRight: "$1",
-            width: "$4",
-            height: "$4"
-          }
-        }
-      ), /* @__PURE__ */ React.createElement(
-        text.Text,
-        {
-          size: "sm",
-          weight: "bold",
-          css: {
-            color: "$neutral800"
-          }
-        },
-        "DRAFT"
-      )), /* @__PURE__ */ React.createElement(
-        box.Box,
-        {
-          css: {
-            width: "1px",
-            height: "20px",
-            background: "#64748B20"
-          }
-        }
-      )), /* @__PURE__ */ React.createElement(
-        _switch.Switch,
-        {
-          size: "md",
-          checked: field.isEnabled,
-          onChange: (value) => toggleDashboardField == null ? void 0 : toggleDashboardField(field.id, value)
-        }
-      ), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-        iconButton.IconButton,
-        {
-          variant: "ghost",
-          color: "default",
-          size: "lg",
-          icon: /* @__PURE__ */ React.createElement(ellipsisVertical.EllipsisVerticalIcon, null)
-        }
-      )), /* @__PURE__ */ React.createElement(
-        dropdown.DropdownMenuContent,
-        {
-          className: "dm-sans",
-          css: {
-            minWidth: 180,
-            zIndex: 10,
-            "& p": {
-              margin: "0 !important",
-              padding: "0 !important"
-            }
-          },
-          sideOffset: 4,
-          align: "end"
-        },
-        /* @__PURE__ */ React.createElement(
-          dropdown.DropdownMenuItem,
-          {
-            css: {
-              cursor: "pointer"
-            },
-            onClick: () => {
-              handleEditField({
-                type: "TRIGGER",
-                values: field,
-                id: field.id
-              });
-              handleDashboardPage(false, "TRIGGER");
-            }
-          },
-          /* @__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"))
-        )
-      )))
-    ),
-    isMappingDisplayed && /* @__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, { isTrigger: true, field }),
-      ((_c = (_b = field.fields) == null ? void 0 : _b.filters) == null ? void 0 : _c.length) ? /* @__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",
-            css: { textTransform: "uppercase" }
-          },
-          "CONDITION"
-        ),
-        index.default(transformDataToString(field.fields))
-      ), /* @__PURE__ */ React.createElement(
-        box.Box,
-        {
-          css: {
-            marginBlock: "$4",
-            height: "1px",
-            background: "$neutral100"
-          }
-        }
-      )) : null,
-      ((_g = (_f = (_e = (_d = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _d.variables) == null ? void 0 : _e.filter) == null ? void 0 : _f.call(_e, (variable) => variable.isEnabled)) == null ? void 0 : _g.length) ? /* @__PURE__ */ React.createElement(
-        SingleMappingChipWrapper,
-        {
-          heading: ((_i = (_h = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _h.variables) == null ? void 0 : _i.length) > 1 ? "PASSING VARIABLES TO SURVEY" : "PASSING VARIABLE TO SURVEY",
-          fields: field.triggerDetails.variables,
-          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" }, ((_k = (_j = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _j.shareType) == null ? void 0 : _k.value) ? /* @__PURE__ */ React.createElement(
-          EventComponent,
-          {
-            heading: "Share Type:",
-            description: (_m = (_l = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _l.shareType) == null ? void 0 : _m.label
-          }
-        ) : null, ((_o = (_n = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _n.shareRecipient) == null ? void 0 : _o.value) ? /* @__PURE__ */ React.createElement(
-          EventComponent,
-          {
-            heading: "Recipient:",
-            hasBorder: true,
-            description: (_q = (_p = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _p.shareRecipient) == null ? void 0 : _q.label
-          }
-        ) : null, ((_s = (_r = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _r.shareChannel) == null ? void 0 : _s.value) ? /* @__PURE__ */ React.createElement(
-          EventComponent,
-          {
-            hasBorder: true,
-            heading: "Share Channel:",
-            description: (_u = (_t = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _t.shareChannel) == null ? void 0 : _u.label
-          }
-        ) : 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: () => {
-            handleEditField({
-              type: "TRIGGER",
-              values: field,
-              id: field.id
-            });
-            handleDashboardPage(false, "TRIGGER");
-          }
-        },
-        "Edit Trigger"
-      )
-    )
-  ), isDeleteModalOpen && /* @__PURE__ */ React.createElement(
-    confirmationModal.default,
-    {
-      name: "Delete Trigger?",
-      description: `Are you sure you want to delete the trigger? This action cannot be undone.`,
-      onConfirm: () => deleteFieldHandler == null ? void 0 : deleteFieldHandler(field.id),
-      onCancel: () => setIsDeleteModalOpen(false)
-    }
-  ));
-};
-const SingleMappingDashboardItem = ({
-  hasEditMapping,
-  fieldOptions,
-  icon,
-  field,
-  handleEditField,
-  handleDashboardPage,
-  toggleDashboardField,
-  deleteFieldHandler,
-  syncMapping,
-  integrationName,
-  onMappingEditHandler
-}) => {
-  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, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$;
-  const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
-  const [isSyncing, setIsSyncing] = React.useState(null);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    flex.Flex,
-    {
-      flexDirection: "column",
-      css: {
-        width: "100%",
-        height: "100%",
-        overflow: "auto",
-        marginTop: "$8"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      flex.Flex,
-      {
-        css: {
-          border: isMappingDisplayed ? "$borderWidths$xs solid $black400" : "$borderWidths$xs solid $neutral200",
-          borderRadius: isMappingDisplayed ? "$2xl $2xl 0 0" : "$2xl",
-          padding: (field == null ? void 0 : field.mappingName) || (field == null ? void 0 : field.mappingDescription) ? "$10 $12" : "15px $12",
-          width: "100%",
-          backgroundColor: isMappingDisplayed ? "rgba(100, 116, 139, 0.04)" : "$white900"
-        },
-        justifyContent: "space-between",
-        alignItems: "center"
-      },
-      /* @__PURE__ */ React.createElement(
-        flex.Flex,
-        {
-          alignItems: "center",
-          gap: "$4",
-          css: { cursor: "pointer" },
-          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" }, (() => (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" }, (field == null ? void 0 : field.mappingName) ? field == null ? void 0 : field.mappingName : (_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"), (field == null ? void 0 : field.mappingDescription) && /* @__PURE__ */ React.createElement(
-          text.Text,
-          {
-            size: "sm",
-            css: {
-              "& span": {
-                fontFamily: "'DM Sans', sans-serif !important"
-              },
-              color: "$neutral600",
-              "& b": {
-                fontWeight: "$6 !important",
-                fontFamily: "'DM Sans', sans-serif !important"
-              }
-            },
-            dangerouslySetInnerHTML: {
-              __html: (field == null ? void 0 : field.mappingDescription) ? field == null ? void 0 : field.mappingDescription : `Sync survey responses to ${integrationName} when ${(_g = (_f = (_e = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e.events) == null ? void 0 : _f.label) == null ? void 0 : _g.toLowerCase()} is ${trasformToPastTense(`${(_j = (_i = (_h = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _h.action) == null ? void 0 : _i.label) == null ? void 0 : _j.toLowerCase()}`)}`
-            }
-          }
-        )))
-      ),
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, syncMapping ? /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Sync", className: "dm-sans" }, /* @__PURE__ */ React.createElement(
-        button.Button,
-        {
-          variant: "ghost",
-          size: "lg",
-          color: "default",
-          css: {
-            width: "40px !important",
-            height: "40px !important",
-            marginInlineEnd: "$3"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          flex.Flex,
-          {
-            className: `rotating-div ${isSyncing === field.id ? "rotate" : ""}`,
-            justifyContent: "center",
-            alignItems: "center",
-            onClick: async () => {
-              setIsSyncing(field.id);
-              setTimeout(async () => {
-                await (syncMapping == null ? void 0 : syncMapping(field.id));
-                setIsSyncing(null);
-              }, 2e3);
-            }
-          },
-          /* @__PURE__ */ React.createElement(sync.default, null)
-        )
-      )) : null, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0 && syncMapping)() ? /* @__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(tooltip.Tooltip, { content: "More", className: "dm-sans" }, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-        iconButton.IconButton,
-        {
-          variant: "ghost",
-          color: "default",
-          size: "lg",
-          icon: /* @__PURE__ */ React.createElement(ellipsisVertical.EllipsisVerticalIcon, null)
-        }
-      ))), /* @__PURE__ */ React.createElement(
-        dropdown.DropdownMenuContent,
-        {
-          className: "dm-sans",
-          css: {
-            minWidth: 180,
-            zIndex: 10,
-            "& p": {
-              margin: "0 !important",
-              padding: "0 !important"
-            }
-          },
-          sideOffset: 4,
-          align: "end"
-        },
-        hasEditMapping === void 0 || hasEditMapping ? /* @__PURE__ */ React.createElement(
-          dropdown.DropdownMenuItem,
-          {
-            css: {
-              cursor: "pointer"
-            },
-            onClick: () => {
-              onMappingEditHandler(field.id);
-              handleEditField({
-                type: "MAPPING",
-                values: field,
-                id: field.id
-              });
-              handleDashboardPage(false, "MAPPING");
-            }
-          },
-          /* @__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"))
-        ) : null,
-        /* @__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(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 }),
-      !!((_n = (_m = (_l = (_k = field == null ? void 0 : field.mappedFields) == null ? void 0 : _k.questions) == null ? void 0 : _l.filter) == null ? void 0 : _m.call(_l, (question) => question.isEnabled)) == null ? void 0 : _n.length) ? /* @__PURE__ */ React.createElement(
-        SingleMappingChipWrapper,
-        {
-          heading: "Questions",
-          fields: (_q = (_p = (_o = field == null ? void 0 : field.mappedFields) == null ? void 0 : _o.questions) == null ? void 0 : _p.filter) == null ? void 0 : _q.call(_p, (question) => question.isEnabled),
-          backgroundColor: "#E5F2FF"
-        }
-      ) : null,
-      !!((_u = (_t = (_s = (_r = field == null ? void 0 : field.mappedFields) == null ? void 0 : _r.derivedQuestions) == null ? void 0 : _s.filter) == null ? void 0 : _t.call(
-        _s,
-        (derivedQuestion) => derivedQuestion.isEnabled
-      )) == null ? void 0 : _u.length) ? /* @__PURE__ */ React.createElement(
-        SingleMappingChipWrapper,
-        {
-          heading: "Enrich",
-          fields: (_x = (_w = (_v = field == null ? void 0 : field.mappedFields) == null ? void 0 : _v.derivedQuestions) == null ? void 0 : _w.filter) == null ? void 0 : _x.call(
-            _w,
-            (derivedQuestion) => derivedQuestion.isEnabled
-          ),
-          backgroundColor: "#E5F2FF"
-        }
-      ) : null,
-      !!((_B = (_A = (_z = (_y = field == null ? void 0 : field.mappedFields) == null ? void 0 : _y.variables) == null ? void 0 : _z.filter) == null ? void 0 : _A.call(_z, (variable) => variable.isEnabled)) == null ? void 0 : _B.length) ? /* @__PURE__ */ React.createElement(
-        SingleMappingChipWrapper,
-        {
-          heading: "Variables",
-          fields: (_E = (_D = (_C = field == null ? void 0 : field.mappedFields) == null ? void 0 : _C.variables) == null ? void 0 : _D.filter) == null ? void 0 : _E.call(_D, (variable) => variable.isEnabled),
-          backgroundColor: "$positive100"
-        }
-      ) : null,
-      !!((_I = (_H = (_G = (_F = field == null ? void 0 : field.mappedFields) == null ? void 0 : _F.contactProperties) == null ? void 0 : _G.filter) == null ? void 0 : _H.call(_G, (property) => property.isEnabled)) == null ? void 0 : _I.length) ? /* @__PURE__ */ React.createElement(
-        SingleMappingChipWrapper,
-        {
-          heading: "Contacts",
-          fields: (_L = (_K = (_J = field == null ? void 0 : field.mappedFields) == null ? void 0 : _J.contactProperties) == null ? void 0 : _K.filter) == null ? void 0 : _L.call(_K, (property) => property.isEnabled),
-          backgroundColor: "$negative100"
-        }
-      ) : null,
-      !!((_P = (_O = (_N = (_M = field == null ? void 0 : field.mappedFields) == null ? void 0 : _M.expressions) == null ? void 0 : _N.filter) == null ? void 0 : _O.call(_N, (expression) => expression.isEnabled)) == null ? void 0 : _P.length) ? /* @__PURE__ */ React.createElement(
-        SingleMappingChipWrapper,
-        {
-          heading: "Expression",
-          backgroundColor: "$neutral100",
-          fields: (_S = (_R = (_Q = field == null ? void 0 : field.mappedFields) == null ? void 0 : _Q.expressions) == null ? void 0 : _R.filter) == null ? void 0 : _S.call(_R, (expression) => expression.isEnabled)
-        }
-      ) : null,
-      !!((_W = (_V = (_U = (_T = field == null ? void 0 : field.mappedFields) == null ? void 0 : _T.property) == null ? void 0 : _U.filter) == null ? void 0 : _V.call(_U, (property) => property.isEnabled)) == null ? void 0 : _W.length) ? /* @__PURE__ */ React.createElement(
-        SingleMappingChipWrapper,
-        {
-          heading: "Property",
-          hideBorder: true,
-          fields: (_Z = (_Y = (_X = field == null ? void 0 : field.mappedFields) == null ? void 0 : _X.property) == null ? void 0 : _Y.filter) == null ? void 0 : _Z.call(_Y, (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: hasEditMapping === void 0 || hasEditMapping ? "$borderWidths$xs solid $neutral200" : "none",
-          borderRadius: "0 0 $2xl $2xl",
-          height: "100%"
-        }
-      },
-      ((_$ = (__ = field == null ? void 0 : field.mappingConditions) == null ? void 0 : __.filterGroups) == null ? void 0 : _$.length) ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", justifyContent: "center" }, /* @__PURE__ */ React.createElement(text.Text, { className: "dm-sans", size: "sm", weight: "bold", css: { textTransform: "uppercase", color: "$neutral900", fontFamily: "DM Sans !important", paddingLeft: "$4" } }, "CONDITION"), /* @__PURE__ */ React.createElement(flex.Flex, { css: {
-        marginTop: "$2 !important"
-      } }, /* @__PURE__ */ React.createElement(
-        conditionDescriptionBuilder.ConditionCard,
-        {
-          isEditable: false,
-          conditionsData: field == null ? void 0 : field.mappingConditions,
-          showMoreMenu: false
-        }
-      ))) : null,
-      /* @__PURE__ */ React.createElement(
-        button.Button,
-        {
-          size: "sm",
-          leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
-          color: "primary",
-          variant: "ghost",
-          css: {
-            display: hasEditMapping === void 0 || hasEditMapping ? "flex" : "none"
-          },
-          onClick: () => {
-            onMappingEditHandler(field.id);
-            handleEditField({
-              type: "SINGLE_MAPPING",
-              values: field,
-              id: field.id
-            });
-            handleDashboardPage(false, "MAPPING");
-          }
-        },
-        "Edit Mapping"
-      )
-    )) : null
-  ), isDeleteModalOpen && /* @__PURE__ */ React.createElement(
-    confirmationModal.default,
-    {
-      name: "Delete Mapping?",
-      description: `Are you sure you want to delete the mapping? This action cannot be undone.`,
-      onConfirm: () => deleteFieldHandler == null ? void 0 : deleteFieldHandler(field.id),
-      onCancel: () => setIsDeleteModalOpen(false)
-    }
-  ));
-};
-const EventComponent = ({
-  heading,
-  description,
-  hasBorder,
-  hasLink = ""
-}) => {
-  return /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, hasBorder && /* @__PURE__ */ React.createElement(box.Box, { css: { paddingInline: "$3" } }, /* @__PURE__ */ React.createElement(
-    box.Box,
-    {
-      css: {
-        height: "$3",
-        width: "1px",
-        background: "$neutral200",
-        marginInline: "$4"
-      }
-    }
-  )), /* @__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: "$primary500",
-        textDecoration: "underline",
-        cursor: "pointer",
-        "&:hover": {
-          color: "$primary600 !important"
-        }
-      },
-      onClick: () => window.open(`${hasLink}`, "_blank")
-    },
-    description
-  ) : /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, description)));
-};
-const SingleMappingEventWrapper = ({
-  field,
-  isTrigger
-}) => {
-  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, _E, _F, _G, _H, _I, _J, _K, _L;
-  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 == null ? void 0 : field.configurationFields) || !!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" }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$20" }, !!(field == null ? void 0 : field.object) ? /* @__PURE__ */ React.createElement(
-    EventComponent,
-    {
-      heading: "Object:",
-      description: field == null ? void 0 : field.object
-    }
-  ) : null, !!(field == null ? void 0 : field.action) ? /* @__PURE__ */ React.createElement(
-    EventComponent,
-    {
-      heading: "Action:",
-      description: Array.isArray(field == null ? void 0 : field.action) ? (_d = field == null ? void 0 : field.action) == null ? void 0 : _d.map((action) => action).join(", ") : field == null ? void 0 : field.action
-    }
-  ) : null), !!((_g = (_f = (_e = field == null ? void 0 : field.configurationFields) == null ? void 0 : _e.account) == null ? void 0 : _f.value) == null ? void 0 : _g.label) ? /* @__PURE__ */ React.createElement(
-    EventComponent,
-    {
-      heading: "Account:",
-      description: (_j = (_i = (_h = field == null ? void 0 : field.configurationFields) == null ? void 0 : _h.account) == null ? void 0 : _i.value) == null ? void 0 : _j.label
-    }
-  ) : null, !!((_m = (_l = (_k = field == null ? void 0 : field.configurationFields) == null ? void 0 : _k.object) == null ? void 0 : _l.value) == null ? void 0 : _m.label) ? /* @__PURE__ */ React.createElement(
-    EventComponent,
-    {
-      heading: "Object:",
-      description: (_q = (_p = (_o = (_n = field == null ? void 0 : field.configurationFields) == null ? void 0 : _n.object) == null ? void 0 : _o.value) == null ? void 0 : _p.label) == null ? void 0 : _q.replace(/^./, (char) => char == null ? void 0 : char.toUpperCase())
-    }
-  ) : null, !!((_s = (_r = field == null ? void 0 : field.configurationFields) == null ? void 0 : _r.action) == null ? void 0 : _s.hasAction) ? /* @__PURE__ */ React.createElement(
-    EventComponent,
-    {
-      hasBorder: true,
-      heading: "Action:",
-      description: (_v = (_u = (_t = field == null ? void 0 : field.configurationFields) == null ? void 0 : _t.action) == null ? void 0 : _u.value) == null ? void 0 : _v.label
-    }
-  ) : null, !!((_x = (_w = field == null ? void 0 : field.configurationFields) == null ? void 0 : _w.spreadsheet) == null ? void 0 : _x.value) ? /* @__PURE__ */ React.createElement(
-    EventComponent,
-    {
-      hasLink: (_y = field == null ? void 0 : field.configurationFields) == null ? void 0 : _y.sheetURL,
-      hasBorder: true,
-      heading: "Sheet:",
-      description: typeof ((_z = field == null ? void 0 : field.configurationFields) == null ? void 0 : _z.spreadsheet) === "object" ? (_C = (_B = (_A = field == null ? void 0 : field.configurationFields) == null ? void 0 : _A.spreadsheet) == null ? void 0 : _B.value) == null ? void 0 : _C.label : (_E = (_D = field == null ? void 0 : field.configurationFields) == null ? void 0 : _D.spreadsheet) == null ? void 0 : _E.value
-    }
-  ) : null, !!((_F = field == null ? void 0 : field.configurationFields) == null ? void 0 : _F.reference) ? /* @__PURE__ */ React.createElement(
-    EventComponent,
-    {
-      hasLink: (_H = (_G = field == null ? void 0 : field.configurationFields) == null ? void 0 : _G.reference) == null ? void 0 : _H.referenceURL,
-      hasBorder: false,
-      heading: (_J = (_I = field == null ? void 0 : field.configurationFields) == null ? void 0 : _I.reference) == null ? void 0 : _J.title,
-      description: (_L = (_K = field == null ? void 0 : field.configurationFields) == null ? void 0 : _K.reference) == null ? void 0 : _L.description
-    }
-  ) : null), /* @__PURE__ */ React.createElement(
-    box.Box,
-    {
-      css: {
-        marginBlock: "$4",
-        height: "1px",
-        background: "$neutral100"
-      }
-    }
-  )) : null);
-};
-const SingleMappingChipWrapper = ({
-  heading,
-  fields,
-  hideBorder,
-  placeholder,
-  backgroundColor
-}) => {
-  const modifiedFields = fields.filter(
-    (field) => field.id !== "ALL"
-  );
-  return /* @__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", css: { textTransform: "uppercase" } }, heading), /* @__PURE__ */ React.createElement(
-    flex.Flex,
-    {
-      wrap: "wrap",
-      css: {
-        columnGap: "$2",
-        rowGap: "$4",
-        "& > * ": {
-          fontFamily: "'Roboto Mono', monospace !important",
-          fontWeight: "$4 !important"
-        }
-      }
-    },
-    modifiedFields.map((field) => {
-      var _a, _b;
-      const chipRef = React.useRef(null);
-      const name = `${!!placeholder ? placeholder : ""}${(_a = field == null ? void 0 : field.name) != null ? _a : field == null ? void 0 : field.label}`;
-      (_b = chipRef.current) == null ? void 0 : _b.offsetWidth;
-      return /* @__PURE__ */ React.createElement(
-        tooltip.Tooltip,
-        {
-          delayDuration: 300,
-          content: (name == null ? void 0 : name.length) > 52 ? name : "",
-          size: "md",
-          sideOffset: 4,
-          className: "dm-sans"
-        },
-        /* @__PURE__ */ React.createElement(
-          chip.Chip,
-          {
-            ref: chipRef,
-            size: "md",
-            css: {
-              background: backgroundColor,
-              borderRadius: "4px !important",
-              span: {
-                textAlign: "center !important",
-                alignContent: "center !important",
-                display: "block",
-                maxWidth: "230px",
-                overflow: "hidden",
-                fontFamily: "'Roboto Mono', monospace !important",
-                fontWeight: "$4 !important",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              }
-            }
-          },
-          "$" + name
-        )
-      );
-    })
-  )), !hideBorder && /* @__PURE__ */ React.createElement(
-    box.Box,
-    {
-      css: { marginBlock: "$4", height: "1px", background: "$neutral100" }
-    }
-  ));
-};
-const DashboardItem = ({
-  hasEditMapping,
-  isDraft,
-  onMappingEditHandler,
-  icon,
-  heading,
-  description,
-  fields,
-  integrationName,
-  isEnabled,
-  handleEditField,
-  id,
-  handleDashboardPage,
-  type,
-  toggleDashboardField,
-  deleteFieldHandler,
-  mappingConditions
-}) => {
-  var _a;
-  const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
-  const getDefaultFieldValue = (defaultValue) => {
-    var _a2;
-    let field = "--";
-    switch (defaultValue == null ? void 0 : defaultValue.type) {
-      case "DATE_TIME": {
-        field = defaultValue == null ? void 0 : defaultValue.value;
-        break;
-      }
-      case "STRING": {
-        field = defaultValue == null ? void 0 : defaultValue.value;
-        break;
-      }
-      default: {
-        field = ((_a2 = defaultValue == null ? void 0 : defaultValue.value) == null ? void 0 : _a2.label) || "--";
-        break;
-      }
-    }
-    return field;
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    flex.Flex,
-    {
-      flexDirection: "column",
-      css: {
-        marginTop: "$8"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      flex.Flex,
-      {
-        css: {
-          border: isMappingDisplayed ? "$borderWidths$xs solid $black400" : "$borderWidths$xs solid $neutral200",
-          borderRadius: isMappingDisplayed ? "$2xl $2xl 0 0" : "$2xl",
-          padding: "$10 $12",
-          width: "100%",
-          backgroundColor: isMappingDisplayed ? "rgba(100, 116, 139, 0.04)" : "$white900"
-        },
-        justifyContent: "space-between",
-        alignItems: "center"
-      },
-      /* @__PURE__ */ React.createElement(
-        flex.Flex,
-        {
-          alignItems: "center",
-          gap: "$4",
-          css: { cursor: "pointer" },
-          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" }, heading), /* @__PURE__ */ React.createElement(
-          text.Text,
-          {
-            size: "sm",
-            css: {
-              "& span": {
-                fontFamily: "'DM Sans', sans-serif !important"
-              },
-              color: "$neutral600",
-              "& b": {
-                fontWeight: "$6 !important",
-                fontFamily: "'DM Sans', sans-serif !important"
-              }
-            },
-            dangerouslySetInnerHTML: { __html: description }
-          }
-        )))
-      ),
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, isDraft && /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(chip.Chip, { rounded: "full", size: "sm" }, /* @__PURE__ */ React.createElement(
-        box.Box,
-        {
-          css: {
-            background: "$neutral500",
-            borderRadius: "50%",
-            marginRight: "$1",
-            width: "$4",
-            height: "$4"
-          }
-        }
-      ), /* @__PURE__ */ React.createElement(
-        text.Text,
-        {
-          size: "sm",
-          weight: "bold",
-          css: {
-            color: "$neutral800"
-          }
-        },
-        "DRAFT"
-      )), /* @__PURE__ */ React.createElement(
-        box.Box,
-        {
-          css: {
-            width: "1px",
-            height: "20px",
-            background: "#64748B20"
-          }
-        }
-      )), /* @__PURE__ */ React.createElement(
-        _switch.Switch,
-        {
-          size: "md",
-          checked: isEnabled,
-          onChange: (value) => toggleDashboardField(id, value)
-        }
-      ), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-        iconButton.IconButton,
-        {
-          variant: "ghost",
-          color: "default",
-          size: "lg",
-          icon: /* @__PURE__ */ React.createElement(ellipsisVertical.EllipsisVerticalIcon, null)
-        }
-      )), /* @__PURE__ */ React.createElement(
-        dropdown.DropdownMenuContent,
-        {
-          className: "dm-sans",
-          css: {
-            minWidth: 180,
-            zIndex: 10,
-            "& p": {
-              margin: "0 !important",
-              padding: "0 !important"
-            }
-          },
-          sideOffset: 4,
-          align: "end"
-        },
-        hasEditMapping === void 0 || hasEditMapping ? /* @__PURE__ */ React.createElement(
-          dropdown.DropdownMenuItem,
-          {
-            css: {
-              cursor: "pointer"
-            },
-            onClick: () => {
-              onMappingEditHandler(id);
-              handleEditField({
-                type,
-                values: fields,
-                id
-              });
-              handleDashboardPage(false, type);
-            }
-          },
-          /* @__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"))
-        ) : null,
-        /* @__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(
-      box.Box,
-      {
-        css: {
-          height: isMappingDisplayed ? "100%" : 0
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        box.Box,
-        {
-          css: {
-            borderInline: "$borderWidths$xs solid $black400",
-            maxHeight: 432,
-            height: "100%",
-            position: "relative",
-            overflow: "auto"
-          }
-        },
-        (fields == null ? void 0 : fields.length) ? /* @__PURE__ */ React.createElement(table.Table, { css: { borderCollapse: "collapse", width: "100%" } }, /* @__PURE__ */ React.createElement(
-          table.Thead,
-          {
-            css: {
-              background: "$white900",
-              "& th": {
-                padding: "$7 $8",
-                fontSize: "$sm",
-                lineHeight: "$sm",
-                textAlign: "left",
-                borderInline: "none"
-              },
-              borderBottom: "$borderWidths$xs solid $neutral100",
-              position: "sticky",
-              top: 0,
-              zIndex: 10
-            }
-          },
-          /* @__PURE__ */ React.createElement(table.Th, { css: { paddingLeft: "$38 !important" } }, "Type"),
-          /* @__PURE__ */ React.createElement(table.Th, null, "SurveySparrow Field"),
-          /* @__PURE__ */ React.createElement(table.Th, null, `${integrationName} Field`),
-          /* @__PURE__ */ React.createElement(table.Th, { css: { paddingRight: "$20 !important" } }, "Default Value")
-        ), /* @__PURE__ */ React.createElement(
-          table.Tbody,
-          {
-            css: {
-              "& tr:last-child": {
-                borderBottom: 0,
-                "& td": {
-                  borderBottom: 0
-                }
-              }
-            }
-          },
-          fields.map((field) => {
-            var _a2, _b, _c, _d, _e, _f, _g;
-            return /* @__PURE__ */ React.createElement(
-              table.Tr,
-              {
-                css: {
-                  borderBottom: "$borderWidths$xs solid $neutral100",
-                  "& td": {
-                    padding: "$7 $8",
-                    fontSize: "$sm",
-                    lineHeight: "$sm",
-                    borderInline: "none"
-                  },
-                  "&:hover": {
-                    background: "none !important"
-                  },
-                  "& td:first-child": {
-                    paddingLeft: "$38 !important"
-                  },
-                  "& td:last-child": {
-                    paddingRight: "$20 !important"
-                  }
-                }
-              },
-              /* @__PURE__ */ React.createElement(table.Td, null, (_b = (_a2 = field.mappedType) == null ? void 0 : _a2.label) != null ? _b : "--"),
-              /* @__PURE__ */ React.createElement(table.Td, null, (_d = (_c = field.surveySparrowField) == null ? void 0 : _c.label) != null ? _d : "--"),
-              /* @__PURE__ */ React.createElement(table.Td, null, (_f = (_e = field.integrationField) == null ? void 0 : _e.label) != null ? _f : "--"),
-              /* @__PURE__ */ React.createElement(table.Td, null, (_g = getDefaultFieldValue(field.defaultValue)) != null ? _g : "--")
-            );
-          })
-        )) : null
-      ),
-      isMappingDisplayed && /* @__PURE__ */ React.createElement(
-        box.Box,
-        {
-          css: {
-            padding: "$8 $32",
-            border: "$borderWidths$xs solid $black400",
-            borderTop: hasEditMapping === void 0 || hasEditMapping ? "$borderWidths$xs solid $neutral200" : "none",
-            borderRadius: "0 0 $2xl $2xl",
-            height: "100%"
-          }
-        },
-        ((_a = mappingConditions == null ? void 0 : mappingConditions.filterGroups) == null ? void 0 : _a.length) ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", justifyContent: "center" }, /* @__PURE__ */ React.createElement(text.Text, { className: "dm-sans", size: "sm", weight: "bold", css: { textTransform: "uppercase", color: "$neutral900", fontFamily: "DM Sans !important", paddingLeft: "$4" } }, "CONDITION"), /* @__PURE__ */ React.createElement(flex.Flex, { css: {
-          marginTop: "$2 !important"
-        } }, /* @__PURE__ */ React.createElement(
-          conditionDescriptionBuilder.ConditionCard,
-          {
-            isEditable: false,
-            conditionsData: mappingConditions,
-            showMoreMenu: false
-          }
-        ))) : null,
-        /* @__PURE__ */ React.createElement(
-          button.Button,
-          {
-            size: "sm",
-            onClick: () => {
-              onMappingEditHandler(id);
-              handleEditField({
-                type,
-                values: fields,
-                id
-              });
-              handleDashboardPage(false, type);
-            },
-            css: {
-              visibility: hasEditMapping === void 0 || hasEditMapping ? "visible" : "hidden"
-            },
-            leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
-            color: "primary",
-            variant: "ghost"
-          },
-          `Edit ${heading}`
-        )
-      )
-    )
-  ), isDeleteModalOpen && /* @__PURE__ */ React.createElement(
-    confirmationModal.default,
-    {
-      name: "Delete Mapping?",
-      description: `Are you sure you want to delete the mapping? This action cannot be undone.`,
-      onConfirm: () => {
-        deleteFieldHandler(id);
-        setIsDeleteModalOpen(false);
-      },
-      onCancel: () => {
-        setIsDeleteModalOpen(false);
-      }
-    }
-  ));
-};
-const DropdownItem = ({
-  icon,
-  heading,
-  description,
-  onClickHandler,
-  isDisabled,
-  toolTipContent
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    tooltip.Tooltip,
-    {
-      content: isDisabled ? toolTipContent : "",
-      css: {
-        zIndex: "99999999",
-        minWidth: "280px",
-        textAlign: "center"
-      }
-    },
-    /* @__PURE__ */ React.createElement(flex.Flex, null, /* @__PURE__ */ React.createElement(
-      dropdown.DropdownMenuItem,
-      {
-        css: { cursor: isDisabled ? "not-allowed !important" : "pointer" },
-        onClick: onClickHandler,
-        disabled: isDisabled
-      },
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "flex-start", gap: "$4" }, /* @__PURE__ */ React.createElement(box.Box, { css: { width: "$6" } }, icon), /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md" }, heading), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral700" } }, description)))
-    ))
-  );
-};
 
 exports.default = Dashboard;
 //# sourceMappingURL=dashboard.js.map