@sparrowengg/integrations-templates-frontend 1.9.1 → 1.9.2

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

@@ -15,14 +15,23 @@ import { Tooltip } from '../../node_modules/@sparrowengg/twigs-react/dist/es/too
 import { ChevronDownIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-down.js';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../node_modules/@sparrowengg/twigs-react/dist/es/tabs/tabs.js';
 import { ChevronRightIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js';
+import { Chip } from '../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js';
 import { Switch } from '../../node_modules/@sparrowengg/twigs-react/dist/es/switch/switch.js';
 import { IconButton } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
 import { EllipsisVerticalIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/ellipsis-vertical.js';
 import { PencilIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/pencil.js';
 import { DeleteIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/delete.js';
-import { Chip } from '../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js';
 import { Table, Thead, Th, Tbody, Tr, Td } from '../../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 = ({
   onMappingEditHandler,
   fieldOptions,
@@ -92,40 +101,46 @@ const Dashboard = ({
         }
       ) : null
     )))
-  ), /* @__PURE__ */ React__default.createElement(Box, { css: {
-    marginBottom: "$20 !important"
-  } }, hasMultiAccounts ? /* @__PURE__ */ React__default.createElement(
-    MultiAccountDashboard,
-    {
-      onMappingEditHandler,
-      fieldOptions,
-      triggerEnabled,
-      mappingEnabled,
-      mappingFields,
-      triggerFields,
-      integrationName,
-      handleDashboardPage,
-      handleEditField,
-      handleConfigurationType,
-      toggleDashboardField,
-      deleteFieldHandler
-    }
-  ) : /* @__PURE__ */ React__default.createElement(
-    SingleAccountDashboard,
+  ), /* @__PURE__ */ React__default.createElement(
+    Box,
     {
-      onMappingEditHandler,
-      fieldOptions,
-      triggerEnabled,
-      mappingEnabled,
-      mappingFields,
-      triggerFields,
-      integrationName,
-      handleDashboardPage,
-      handleEditField,
-      toggleDashboardField,
-      deleteFieldHandler
-    }
-  ))));
+      css: {
+        marginBottom: "$20 !important"
+      }
+    },
+    hasMultiAccounts ? /* @__PURE__ */ React__default.createElement(
+      MultiAccountDashboard,
+      {
+        onMappingEditHandler,
+        fieldOptions,
+        triggerEnabled,
+        mappingEnabled,
+        mappingFields,
+        triggerFields,
+        integrationName,
+        handleDashboardPage,
+        handleEditField,
+        handleConfigurationType,
+        toggleDashboardField,
+        deleteFieldHandler
+      }
+    ) : /* @__PURE__ */ React__default.createElement(
+      SingleAccountDashboard,
+      {
+        onMappingEditHandler,
+        fieldOptions,
+        triggerEnabled,
+        mappingEnabled,
+        mappingFields,
+        triggerFields,
+        integrationName,
+        handleDashboardPage,
+        handleEditField,
+        toggleDashboardField,
+        deleteFieldHandler
+      }
+    )
+  )));
 };
 const MultiAccountDashboard = ({
   onMappingEditHandler,
@@ -158,15 +173,16 @@ const MultiAccountDashboard = ({
       css: { paddingBlock: "$12", paddingInline: 0 }
     },
     /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$8" }, !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, triggerFields == null ? void 0 : triggerFields.map((field) => {
-      var _a2;
+      var _a2, _b2, _c2;
       return /* @__PURE__ */ React__default.createElement(
         DashboardItem,
         {
+          isDraft: field == null ? void 0 : field.isDraft,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React__default.createElement(CursorIcon, { size: 32, color: "#56B0BB" }),
           heading: (_a2 = field.domain) != null ? _a2 : field.email,
           id: field.id,
-          description: `Trigger survey when an event happens in ${integrationName}`,
+          description: `Trigger survey when an ${(_b2 = field == null ? void 0 : field.object) == null ? void 0 : _b2.toLowerCase()} event is ${(_c2 = field == null ? void 0 : field.action) == null ? void 0 : _c2.toLowerCase()} in ${integrationName}`,
           fields: field.fields,
           isEnabled: field.isEnabled,
           integrationName,
@@ -178,15 +194,16 @@ const MultiAccountDashboard = ({
         }
       );
     })) : null, !!((_a = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _a.length) ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (_b = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _b.map((field) => {
-      var _a2;
+      var _a2, _b2, _c2, _d2, _e;
       return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mappingFields.type === "MULTI_MAPPING" ? /* @__PURE__ */ React__default.createElement(
         DashboardItem,
         {
+          isDraft: field == null ? void 0 : field.isDraft,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React__default.createElement(MappingIcon, { size: 32, color: "#56B0BB" }),
           heading: (_a2 = field.domain) != null ? _a2 : field.email,
           id: field.id,
-          description: `Sync survey responses to ${integrationName}`,
+          description: `Sync survey responses to ${integrationName} when ${(_c2 = (_b2 = field == null ? void 0 : field.events) == null ? void 0 : _b2.value) == null ? void 0 : _c2.toLowerCase()} is ${trasformToPastTense(`${(_e = (_d2 = field == null ? void 0 : field.actions) == null ? void 0 : _d2.value) == null ? void 0 : _e.toLowerCase()}`)}`,
           fields: field.fields,
           isEnabled: field.isEnabled,
           integrationName,
@@ -216,24 +233,28 @@ const MultiAccountDashboard = ({
       value: "TRIGGER",
       css: { paddingBlock: "$12", paddingInline: 0 }
     },
-    !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$8" }, triggerFields == null ? void 0 : triggerFields.map((field) => /* @__PURE__ */ React__default.createElement(
-      DashboardItem,
-      {
-        onMappingEditHandler,
-        icon: /* @__PURE__ */ React__default.createElement(CursorIcon, { size: 32, color: "#56B0BB" }),
-        heading: "Trigger",
-        id: field.id,
-        description: `Trigger survey when an event happens in ${integrationName}`,
-        fields: field.fields,
-        isEnabled: field.isEnabled,
-        integrationName,
-        handleDashboardPage,
-        handleEditField,
-        type: "TRIGGER",
-        toggleDashboardField,
-        deleteFieldHandler
-      }
-    ))) : /* @__PURE__ */ React__default.createElement(
+    !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$8" }, triggerFields == null ? void 0 : triggerFields.map((field) => {
+      var _a2, _b2;
+      return /* @__PURE__ */ React__default.createElement(
+        DashboardItem,
+        {
+          isDraft: field == null ? void 0 : field.isDraft,
+          onMappingEditHandler,
+          icon: /* @__PURE__ */ React__default.createElement(CursorIcon, { size: 32, color: "#56B0BB" }),
+          heading: "Trigger",
+          id: field.id,
+          description: `Trigger survey when an ${(_a2 = field == null ? void 0 : field.object) == null ? void 0 : _a2.toLowerCase()} event is ${(_b2 = field == null ? void 0 : field.action) == null ? void 0 : _b2.toLowerCase()} in ${integrationName}`,
+          fields: field.fields,
+          isEnabled: field.isEnabled,
+          integrationName,
+          handleDashboardPage,
+          handleEditField,
+          type: "TRIGGER",
+          toggleDashboardField,
+          deleteFieldHandler
+        }
+      );
+    })) : /* @__PURE__ */ React__default.createElement(
       MultiAccountFallback,
       {
         title: "Trigger",
@@ -246,36 +267,40 @@ const MultiAccountDashboard = ({
       value: "MAPPING",
       css: { paddingBlock: "$12", paddingInline: 0 }
     },
-    !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$8" }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map((field) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mappingFields.type === "MULTI_MAPPING" ? /* @__PURE__ */ React__default.createElement(
-      DashboardItem,
-      {
-        onMappingEditHandler,
-        icon: /* @__PURE__ */ React__default.createElement(MappingIcon, { size: 32, color: "#56B0BB" }),
-        heading: "Mapping",
-        id: field.id,
-        description: `Sync survey responses to ${integrationName}`,
-        fields: field.fields,
-        isEnabled: field.isEnabled,
-        integrationName,
-        handleDashboardPage,
-        handleEditField,
-        type: "MAPPING",
-        toggleDashboardField,
-        deleteFieldHandler
-      }
-    ) : /* @__PURE__ */ React__default.createElement(
-      SingleMappingDashboardItem,
-      {
-        field,
-        key: field.id,
-        integrationName,
-        icon: /* @__PURE__ */ React__default.createElement(MappingIcon, { size: 32, color: "#56B0BB" }),
-        handleEditField,
-        handleDashboardPage,
-        toggleDashboardField,
-        deleteFieldHandler
-      }
-    ))))) : /* @__PURE__ */ React__default.createElement(
+    !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$8" }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map((field) => {
+      var _a2, _b2, _c2, _d2;
+      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mappingFields.type === "MULTI_MAPPING" ? /* @__PURE__ */ React__default.createElement(
+        DashboardItem,
+        {
+          isDraft: field == null ? void 0 : field.isDraft,
+          onMappingEditHandler,
+          icon: /* @__PURE__ */ React__default.createElement(MappingIcon, { size: 32, color: "#56B0BB" }),
+          heading: "Mapping",
+          id: field.id,
+          description: `Sync survey responses to ${integrationName} when ${(_b2 = (_a2 = field == null ? void 0 : field.events) == null ? void 0 : _a2.value) == null ? void 0 : _b2.toLowerCase()} is ${trasformToPastTense(`${(_d2 = (_c2 = field == null ? void 0 : field.actions) == null ? void 0 : _c2.value) == null ? void 0 : _d2.toLowerCase()}`)}`,
+          fields: field.fields,
+          isEnabled: field.isEnabled,
+          integrationName,
+          handleDashboardPage,
+          handleEditField,
+          type: "MAPPING",
+          toggleDashboardField,
+          deleteFieldHandler
+        }
+      ) : /* @__PURE__ */ React__default.createElement(
+        SingleMappingDashboardItem,
+        {
+          field,
+          key: field.id,
+          integrationName,
+          icon: /* @__PURE__ */ React__default.createElement(MappingIcon, { size: 32, color: "#56B0BB" }),
+          handleEditField,
+          handleDashboardPage,
+          toggleDashboardField,
+          deleteFieldHandler
+        }
+      ));
+    }))) : /* @__PURE__ */ React__default.createElement(
       MultiAccountFallback,
       {
         title: "Mapping",
@@ -336,38 +361,46 @@ const SingleAccountDashboard = ({
   deleteFieldHandler
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React__default.createElement(Box, { css: { marginTop: "$20" } }, triggerFields == null ? void 0 : triggerFields.map((field) => /* @__PURE__ */ React__default.createElement(
-    TriggerDasboardItem,
-    {
-      fieldOptions,
-      field,
-      description: `Trigger survey when an event happens in ${integrationName}`,
-      key: field.id,
-      integrationName,
-      icon: /* @__PURE__ */ React__default.createElement(CursorIcon, { size: 32, color: "#56B0BB" }),
-      handleEditField,
-      handleDashboardPage,
-      toggleDashboardField,
-      deleteFieldHandler
-    }
-  ))) : null, !!((_a = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _a.length) && (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React__default.createElement(Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_b = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _b.map((field) => /* @__PURE__ */ React__default.createElement(
-    DashboardItem,
-    {
-      onMappingEditHandler,
-      icon: /* @__PURE__ */ React__default.createElement(MappingIcon, { size: 32, color: "#56B0BB" }),
-      heading: "Mapping",
-      id: field.id,
-      description: `Sync survey responses to ${integrationName}`,
-      fields: field.fields,
-      isEnabled: field.isEnabled,
-      integrationName,
-      handleDashboardPage,
-      handleEditField,
-      type: "MAPPING",
-      toggleDashboardField,
-      deleteFieldHandler
-    }
-  ))) : null, (mappingFields == null ? void 0 : mappingFields.type) !== "MULTI_MAPPING" && !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) ? /* @__PURE__ */ React__default.createElement(Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map((field) => /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React__default.createElement(Box, { css: { marginTop: "$20" } }, triggerFields == null ? void 0 : triggerFields.map((field) => {
+    var _a2, _b2;
+    return /* @__PURE__ */ React__default.createElement(
+      TriggerDasboardItem,
+      {
+        isDraft: field == null ? void 0 : field.isDraft,
+        fieldOptions,
+        field,
+        description: `Trigger survey when ${/^[aeiouAEIOU]$/.test(field == null ? void 0 : field.object[0]) ? "an" : "a"} ${(_a2 = field == null ? void 0 : field.object) == null ? void 0 : _a2.toLowerCase()} event is ${(_b2 = field == null ? void 0 : field.action) == null ? void 0 : _b2.toLowerCase()} in ${integrationName}`,
+        key: field.id,
+        integrationName,
+        icon: /* @__PURE__ */ React__default.createElement(CursorIcon, { size: 32, color: "#56B0BB" }),
+        handleEditField,
+        handleDashboardPage,
+        toggleDashboardField,
+        deleteFieldHandler
+      }
+    );
+  })) : null, !!((_a = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _a.length) && (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React__default.createElement(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;
+    return /* @__PURE__ */ React__default.createElement(
+      DashboardItem,
+      {
+        isDraft: field == null ? void 0 : field.isDraft,
+        onMappingEditHandler,
+        icon: /* @__PURE__ */ React__default.createElement(MappingIcon, { size: 32, color: "#56B0BB" }),
+        heading: "Mapping",
+        id: field.id,
+        description: `Sync survey responses to ${integrationName} when ${(_b2 = (_a2 = field == null ? void 0 : field.events) == null ? void 0 : _a2.value) == null ? void 0 : _b2.toLowerCase()} is ${trasformToPastTense(`${(_d2 = (_c2 = field == null ? void 0 : field.actions) == null ? void 0 : _c2.value) == null ? void 0 : _d2.toLowerCase()}`)}`,
+        fields: field.fields,
+        isEnabled: field.isEnabled,
+        integrationName,
+        handleDashboardPage,
+        handleEditField,
+        type: "MAPPING",
+        toggleDashboardField,
+        deleteFieldHandler
+      }
+    );
+  })) : null, (mappingFields == null ? void 0 : mappingFields.type) !== "MULTI_MAPPING" && !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) ? /* @__PURE__ */ React__default.createElement(Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map((field) => /* @__PURE__ */ React__default.createElement(
     SingleMappingDashboardItem,
     {
       field,
@@ -382,6 +415,7 @@ const SingleAccountDashboard = ({
   ))) : null);
 };
 const TriggerDasboardItem = ({
+  isDraft,
   fieldOptions,
   icon,
   field,
@@ -403,7 +437,9 @@ const TriggerDasboardItem = ({
         const comparator = filter.comparator;
         const value = filter.value;
         const formattedComparator = ((_a3 = operatorOptions.find((option) => option.value === comparator)) == null ? void 0 : _a3.label) || comparator;
-        const fieldLabel = (_b2 = fieldOptions.find((options) => options.value === field2)) == null ? void 0 : _b2.label;
+        const fieldLabel = (_b2 = fieldOptions.find(
+          (options) => options.value === field2
+        )) == null ? void 0 : _b2.label;
         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> `
@@ -443,7 +479,32 @@ const TriggerDasboardItem = ({
         isMappingDisplayed ? /* @__PURE__ */ React__default.createElement(ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React__default.createElement(ChevronRightIcon, { size: 40, color: "#848484" }),
         /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React__default.createElement(Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(Text, { size: "md", weight: "bold" }, (_a = field == null ? void 0 : field.email) != null ? _a : "Trigger"), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$neutral600" } }, description != null ? description : `Trigger survey when an event happens in ${integrationName}`)))
       ),
-      /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$12" }, isDraft && /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React__default.createElement(Chip, { rounded: "full", size: "sm" }, /* @__PURE__ */ React__default.createElement(
+        Box,
+        {
+          css: {
+            background: "$neutral500",
+            borderRadius: "50%",
+            marginRight: "$1",
+            width: "$4",
+            height: "$4"
+          }
+        }
+      ), /* @__PURE__ */ React__default.createElement(
+        Text,
+        {
+          size: "sm",
+          weight: "bold",
+          css: {
+            color: "$neutral800"
+          }
+        },
+        "DRAFT"
+      )), /* @__PURE__ */ React__default.createElement(Box, { css: {
+        width: "1px",
+        height: "20px",
+        background: "#64748B20"
+      } })), /* @__PURE__ */ React__default.createElement(
         Switch,
         {
           size: "md",
@@ -788,7 +849,10 @@ const SingleMappingEventWrapper = ({
     EventComponent,
     {
       heading: "Object:",
-      description: (_a = field.object) == null ? void 0 : _a.replace(/^./, (char) => char == null ? void 0 : char.toUpperCase())
+      description: (_a = field.object) == null ? void 0 : _a.replace(
+        /^./,
+        (char) => char == null ? void 0 : char.toUpperCase()
+      )
     }
   ) : null, !!field.action ? /* @__PURE__ */ React__default.createElement(
     EventComponent,
@@ -874,6 +938,7 @@ const SingleMappingChipWrapper = ({
   ));
 };
 const DashboardItem = ({
+  isDraft,
   onMappingEditHandler,
   icon,
   heading,
@@ -942,7 +1007,32 @@ const DashboardItem = ({
         isMappingDisplayed ? /* @__PURE__ */ React__default.createElement(ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React__default.createElement(ChevronRightIcon, { size: 40, color: "#848484" }),
         /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React__default.createElement(Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(Text, { size: "md", weight: "bold" }, heading), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$neutral600" } }, description)))
       ),
-      /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$12" }, isDraft && /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React__default.createElement(Chip, { rounded: "full", size: "sm" }, /* @__PURE__ */ React__default.createElement(
+        Box,
+        {
+          css: {
+            background: "$neutral500",
+            borderRadius: "50%",
+            marginRight: "$1",
+            width: "$4",
+            height: "$4"
+          }
+        }
+      ), /* @__PURE__ */ React__default.createElement(
+        Text,
+        {
+          size: "sm",
+          weight: "bold",
+          css: {
+            color: "$neutral800"
+          }
+        },
+        "DRAFT"
+      )), /* @__PURE__ */ React__default.createElement(Box, { css: {
+        width: "1px",
+        height: "20px",
+        background: "#64748B20"
+      } })), /* @__PURE__ */ React__default.createElement(
         Switch,
         {
           size: "md",
@@ -1107,19 +1197,26 @@ const DropdownItem = ({
   isDisabled,
   toolTipContent
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Tooltip, { content: isDisabled ? toolTipContent : "", css: {
-    zIndex: "99999999",
-    minWidth: "280px",
-    textAlign: "center"
-  } }, /* @__PURE__ */ React__default.createElement(Flex, null, /* @__PURE__ */ React__default.createElement(
-    DropdownMenuItem,
+  return /* @__PURE__ */ React__default.createElement(
+    Tooltip,
     {
-      css: { cursor: isDisabled ? "not-allowed !important" : "pointer" },
-      onClick: onClickHandler,
-      disabled: isDisabled
+      content: isDisabled ? toolTipContent : "",
+      css: {
+        zIndex: "99999999",
+        minWidth: "280px",
+        textAlign: "center"
+      }
     },
-    /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "flex-start", gap: "$4" }, /* @__PURE__ */ React__default.createElement(Box, { css: { width: "$6" } }, icon), /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(Text, { size: "md" }, heading), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$neutral700" } }, description)))
-  )));
+    /* @__PURE__ */ React__default.createElement(Flex, null, /* @__PURE__ */ React__default.createElement(
+      DropdownMenuItem,
+      {
+        css: { cursor: isDisabled ? "not-allowed !important" : "pointer" },
+        onClick: onClickHandler,
+        disabled: isDisabled
+      },
+      /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "flex-start", gap: "$4" }, /* @__PURE__ */ React__default.createElement(Box, { css: { width: "$6" } }, icon), /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(Text, { size: "md" }, heading), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$neutral700" } }, description)))
+    ))
+  );
 };
 
 export { Dashboard as default };