@sparrowengg/integrations-templates-frontend 1.9.66 → 1.9.68

package/dist/es/single-mapping/index.js

@@ -11,12 +11,11 @@ import { IconButton } from '../node_modules/@sparrowengg/twigs-react/dist/es/but
 import { ArrowLeftIcon } from '../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/arrow-left.js';
 import { Heading } from '../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js';
 import { Button } from '../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
-import { ChevronRightIcon } from '../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js';
 import { Text } from '../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { Tooltip } from '../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from '../node_modules/@sparrowengg/twigs-react/dist/es/dropdown/dropdown.js';
 import { Input } from '../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js';
 import { ChevronDownIcon } from '../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-down.js';
-import { Tooltip } from '../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js';
 import { Calendar } from '../node_modules/@sparrowengg/twigs-react/dist/es/calendar/calendar.js';
 import { RadioGroup, Radio } from '../node_modules/@sparrowengg/twigs-react/dist/es/radio/radio.js';
 import { FormLabel } from '../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js';
@@ -56,7 +55,7 @@ const SingleMapping = ({
   apiURL = surveySparrowURL,
   surveyDetails,
   importResponse,
-  hasPreviousMapping,
+  hasExistingMapping,
   onSaveHandler,
   editField,
   previousMappingHandler
@@ -68,13 +67,9 @@ const SingleMapping = ({
     expressions: [],
     property: []
   });
-  const [previousMapping, setPreviousMapping] = useState(
-    hasPreviousMapping != null ? hasPreviousMapping : false
-  );
   useEffect(() => {
     if (!!(editField == null ? void 0 : editField.id)) {
       navigateMappingPage(true);
-      setPreviousMapping(true);
     }
   }, []);
   return /* @__PURE__ */ React__default.createElement(
@@ -98,7 +93,7 @@ const SingleMapping = ({
           configuration.onSaveHandler();
         },
         isMappingPage,
-        hasPreviousMapping: previousMapping,
+        hasExistingMapping,
         navigateConfigPage: () => navigateMappingPage(false),
         previousMappingHandler,
         onSaveHandler: () => {
@@ -145,7 +140,7 @@ const SingleMapping = ({
 const MappingHeader = ({
   editField,
   importResponse,
-  hasPreviousMapping,
+  hasExistingMapping,
   ssMappingData,
   isMappingPage,
   navigateConfigPage,
@@ -172,6 +167,15 @@ const MappingHeader = ({
       }
     }
   };
+  const isMappingPageDisabled = () => {
+    var _a, _b, _c, _d;
+    const isAllFieldsDisabled = (_a = Object.values((configuration == null ? void 0 : configuration.configurationFields) || {})) == null ? void 0 : _a.some((field) => (field == null ? void 0 : field.value) === null || (field == null ? void 0 : field.value) === void 0);
+    if ((_c = (_b = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _b.find((field) => (field == null ? void 0 : field.id) === "responseImportSettings")) == null ? void 0 : _c.value) {
+      return isAllFieldsDisabled || !((_d = configuration == null ? void 0 : configuration.configuredFields) == null ? void 0 : _d.responseImportType);
+    } else {
+      return isAllFieldsDisabled;
+    }
+  };
   return /* @__PURE__ */ React__default.createElement(
     Flex,
     {
@@ -187,7 +191,7 @@ const MappingHeader = ({
       {
         gap: "$6",
         alignItems: "center",
-        css: { visibility: hasPreviousMapping ? "visible" : "hidden" }
+        css: { visibility: hasExistingMapping ? "visible" : "hidden" }
       },
       /* @__PURE__ */ React__default.createElement(
         IconButton,
@@ -224,15 +228,25 @@ const MappingHeader = ({
       /* @__PURE__ */ React__default.createElement(
         Button,
         {
-          css: { color: isMappingPage ? "$neutral900" : "$neutral800" },
+          disabled: isMappingPageDisabled(),
+          css: { color: isMappingPage ? "$neutral900" : "$neutral800", cursor: isMappingPageDisabled() ? "not-allowed" : "pointer" },
           color: "default",
           variant: "ghost",
+          onClick: () => {
+            if (isMappingPage) {
+              onSaveHandler();
+            } else {
+              saveConfiguration();
+            }
+          },
           size: "md"
         },
         "Mapping"
       )
     ),
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(Flex, { justifyContent: "center", css: {
+      width: "180px"
+    } }, /* @__PURE__ */ React__default.createElement(
       Button,
       {
         size: "lg",
@@ -243,11 +257,10 @@ const MappingHeader = ({
           } else {
             saveConfiguration();
           }
-        },
-        rightIcon: /* @__PURE__ */ React__default.createElement(ChevronRightIcon, null)
+        }
       },
       isMappingPage ? (editField == null ? void 0 : editField.id) ? "Update Mapping" : "Save Mapping" : "Continue, Mapping"
-    )
+    ))
   );
 };
 const ConfigurationSetup = ({
@@ -255,7 +268,19 @@ const ConfigurationSetup = ({
   surveyName
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
-  return /* @__PURE__ */ React__default.createElement(Box, { css: { maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5" }, "Event Details"), /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$neutral500" } }, "Survey Name:"), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, surveyName)), /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Box, { css: { maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5" }, "Event Details"), /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$neutral500" } }, "Survey Name:"), /* @__PURE__ */ React__default.createElement(Tooltip, { content: (surveyName == null ? void 0 : surveyName.length) > 30 ? surveyName : "", css: {
+    zIndex: "9999999 !important",
+    fontFamily: "DM Sans !important"
+  } }, /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(
+    Text,
+    {
+      size: "sm",
+      weight: "medium",
+      truncate: true,
+      css: { color: "$neutral800", maxWidth: "270px" }
+    },
+    surveyName
+  )))), /* @__PURE__ */ React__default.createElement(
     Flex,
     {
       flexDirection: "column",
@@ -268,11 +293,49 @@ const ConfigurationSetup = ({
       }
     },
     (_a = configuration.configurationFields) == null ? void 0 : _a.map((field) => {
-      return /* @__PURE__ */ React__default.createElement(Configuration, { field, configuredFields: configuration.configuredFields });
+      return /* @__PURE__ */ React__default.createElement(
+        Configuration,
+        {
+          field,
+          configuredFields: configuration.configuredFields
+        }
+      );
     }),
-    configuration.importOptions.showImportOptions && /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", flexDirection: "column", css: { marginBlock: "$8" } }, /* @__PURE__ */ React__default.createElement(CustomDropdown, { data: configuration.importOptions.options, value: (_c = (_b = configuration == null ? void 0 : configuration.configuredFields) == null ? void 0 : _b.responseImportType) == null ? void 0 : _c.value, onChangeHandler: configuration.importOptions.onChangeHandler })),
-    ((_f = (_e = (_d = configuration.configuredFields) == null ? void 0 : _d.responseImportType) == null ? void 0 : _e.value) == null ? void 0 : _f.type) === "date" && /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "regular", css: { color: "$neutral500" } }, `Existing responses from ${(_i = (_h = (_g = configuration.configuredFields) == null ? void 0 : _g.responseImportType) == null ? void 0 : _h.value) == null ? void 0 : _i.value} will be imported`),
-    configuration.importOptions.excludeResponse && ((_l = (_k = (_j = configuration.configuredFields) == null ? void 0 : _j.responseImportType) == null ? void 0 : _k.value) == null ? void 0 : _l.type) === "dateRange" && /* @__PURE__ */ React__default.createElement(Configuration, { field: configuration.importOptions.excludeResponse, configuredFields: configuration.configuredFields, responseImportType: (_p = (_o = (_n = (_m = configuration.configuredFields) == null ? void 0 : _m.responseImportType) == null ? void 0 : _n.value) == null ? void 0 : _o.value) == null ? void 0 : _p.label })
+    configuration.importOptions.showImportOptions && /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        gap: "$2",
+        flexDirection: "column",
+        css: {
+          marginTop: "-4px !important"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        CustomDropdown,
+        {
+          data: configuration.importOptions.options,
+          value: (_c = (_b = configuration == null ? void 0 : configuration.configuredFields) == null ? void 0 : _b.responseImportType) == null ? void 0 : _c.value,
+          onChangeHandler: configuration.importOptions.onChangeHandler
+        }
+      )
+    ),
+    ((_f = (_e = (_d = configuration.configuredFields) == null ? void 0 : _d.responseImportType) == null ? void 0 : _e.value) == null ? void 0 : _f.type) === "date" && /* @__PURE__ */ React__default.createElement(
+      Text,
+      {
+        size: "sm",
+        weight: "regular",
+        css: { color: "$neutral600", marginTop: "-$6" }
+      },
+      `Existing responses from ${(_i = (_h = (_g = configuration.configuredFields) == null ? void 0 : _g.responseImportType) == null ? void 0 : _h.value) == null ? void 0 : _i.value} will be imported`
+    ),
+    configuration.importOptions.excludeResponse && ((_l = (_k = (_j = configuration.configuredFields) == null ? void 0 : _j.responseImportType) == null ? void 0 : _k.value) == null ? void 0 : _l.type) === "dateRange" && /* @__PURE__ */ React__default.createElement(
+      Configuration,
+      {
+        field: configuration.importOptions.excludeResponse,
+        configuredFields: configuration.configuredFields,
+        responseImportType: (_p = (_o = (_n = (_m = configuration.configuredFields) == null ? void 0 : _m.responseImportType) == null ? void 0 : _n.value) == null ? void 0 : _o.value) == null ? void 0 : _p.label
+      }
+    )
   ));
 };
 const CustomDropdown = ({ data, onChangeHandler, value }) => {
@@ -320,7 +383,8 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
           {
             content: option.tooltip || "",
             css: {
-              zIndex: "9999999 !important"
+              zIndex: "9999999 !important",
+              fontFamily: "DM Sans !important"
             }
           },
           /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(
@@ -328,7 +392,8 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
             {
               disabled: option == null ? void 0 : option.disabled,
               css: {
-                cursor: (option == null ? void 0 : option.disabled) ? "not-allowed !important" : "pointer !important"
+                cursor: (option == null ? void 0 : option.disabled) ? "not-allowed !important" : "pointer !important",
+                background: (value == null ? void 0 : value.type) === option.type ? "#4A9CA626 !important" : "transparent !important"
               },
               onClick: () => onChangeHandler({
                 id: "responseImportType",
@@ -348,8 +413,7 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
                 Flex,
                 {
                   justifyContent: "center",
-                  flexDirection: "column",
-                  gap: "$2"
+                  flexDirection: "column"
                 },
                 /* @__PURE__ */ React__default.createElement(
                   Text,
@@ -363,9 +427,9 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
                 /* @__PURE__ */ React__default.createElement(
                   Text,
                   {
-                    size: "sm",
-                    weight: "medium",
-                    css: { color: "$neutral500" }
+                    size: "xs",
+                    weight: "regular",
+                    css: { color: "$neutral700" }
                   },
                   option.description
                 )
@@ -379,10 +443,11 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
           {
             content: option.tooltip || "",
             css: {
+              fontFamily: "DM Sans !important",
               zIndex: "9999999 !important"
             }
           },
-          /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(DropdownMenuSub, null, /* @__PURE__ */ React__default.createElement(DropdownMenuSubTrigger, { disabled: option == null ? void 0 : option.disabled, css: { cursor: (option == null ? void 0 : option.disabled) ? "not-allowed !important" : "pointer !important" } }, " ", /* @__PURE__ */ React__default.createElement(
+          /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(DropdownMenuSub, null, /* @__PURE__ */ React__default.createElement(DropdownMenuSubTrigger, { disabled: option == null ? void 0 : option.disabled, css: { cursor: (option == null ? void 0 : option.disabled) ? "not-allowed !important" : "pointer !important", background: (value == null ? void 0 : value.type) === option.type ? "#4A9CA626 !important" : "transparent !important" } }, " ", /* @__PURE__ */ React__default.createElement(
             Flex,
             {
               justifyContent: "space-between",
@@ -396,8 +461,7 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
               {
                 css: { cursor: "pointer" },
                 justifyContent: "center",
-                flexDirection: "column",
-                gap: "$2"
+                flexDirection: "column"
               },
               /* @__PURE__ */ React__default.createElement(
                 Text,
@@ -411,9 +475,9 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
               /* @__PURE__ */ React__default.createElement(
                 Text,
                 {
-                  size: "sm",
-                  weight: "medium",
-                  css: { color: "$neutral500" }
+                  size: "xs",
+                  weight: "regular",
+                  css: { color: "$neutral700" }
                 },
                 option.description
               )
@@ -503,7 +567,7 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
   ));
 };
 const Configuration = ({ field, configuredFields, responseImportType = null }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   let fieldValue = null;
   fieldValue = (_b = (_a = configuredFields == null ? void 0 : configuredFields[field.id]) == null ? void 0 : _a.value) != null ? _b : null;
   const [error, setError] = useState({
@@ -513,8 +577,10 @@ const Configuration = ({ field, configuredFields, responseImportType = null }) =
   });
   switch (field.fieldType) {
     case "switch":
-      return /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", alignItems: "center", css: {
-        marginBlockStart: "$12"
+      return /* @__PURE__ */ React__default.createElement(Flex, { gap: "$4", alignItems: "center", css: {
+        marginBlockStart: "$12",
+        borderTop: "$borderWidths$xs solid $neutral200",
+        paddingTop: "$16"
       } }, /* @__PURE__ */ React__default.createElement(
         Switch,
         {
@@ -526,58 +592,152 @@ const Configuration = ({ field, configuredFields, responseImportType = null }) =
             value
           })
         }
-      ), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "regular", css: { color: "$neutral900" } }, field.label));
+      ), /* @__PURE__ */ React__default.createElement(Text, { size: "md", weight: "regular", css: { color: "$neutral900" } }, field.label));
     case "checkbox":
       return /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", alignItems: "start", gap: "$4" }, /* @__PURE__ */ React__default.createElement(Flex, { gap: "$4", alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Checkbox, { disabled: field == null ? void 0 : field.disabled, checked: !!fieldValue, onChange: (value) => field.onChangeHandler({
         id: field.id,
         value
       }) }), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "regular", css: { color: "$neutral900" } }, field.label)), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "regular", css: { color: "$neutral500" } }, field.value ? field.ifChecked() : field.ifUnchecked(responseImportType)));
     case "input":
-      return /* @__PURE__ */ React__default.createElement(
-        FormInput,
-        __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-          disabled: field == null ? void 0 : field.disabled
-        }, error.id === field.id && {
-          error: error.errorMessage,
-          errorBorder: error.error
-        }), {
-          label: field.label,
-          value: typeof fieldValue === "object" ? "" : fieldValue || "",
-          size: "lg"
-        }), field.pattern && {
-          pattern: field.pattern
-        }), {
-          onChange: (event) => {
-            if (field == null ? void 0 : field.pattern) {
-              const pattern = new RegExp(field.pattern);
-              if (!pattern.test(event.currentTarget.value) && event.currentTarget.value !== "") {
-                setError({
-                  errorMessage: field.errorMessage,
-                  error: true,
-                  id: field.id
+      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (field == null ? void 0 : field.id) === "spreadsheet" ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ((_c = configuredFields == null ? void 0 : configuredFields.action) == null ? void 0 : _c.value) ? /* @__PURE__ */ React__default.createElement(
+        Box,
+        {
+          className: "dm-sans",
+          css: {
+            label: {
+              fontSize: "$xs !important"
+            }
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          FormInput,
+          __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+            disabled: field == null ? void 0 : field.disabled
+          }, error.id === field.id && {
+            error: error.errorMessage,
+            errorBorder: error.error
+          }), {
+            label: field.label,
+            value: typeof fieldValue === "object" ? "" : fieldValue || "",
+            size: "lg"
+          }), field.pattern && {
+            pattern: field.pattern
+          }), {
+            onChange: (event) => {
+              if (field == null ? void 0 : field.pattern) {
+                const pattern = new RegExp(field.pattern);
+                if (!pattern.test(event.currentTarget.value) && event.currentTarget.value !== "") {
+                  setError({
+                    errorMessage: field.errorMessage,
+                    error: true,
+                    id: field.id
+                  });
+                } else {
+                  setError({
+                    errorMessage: "",
+                    error: false,
+                    id: null
+                  });
+                }
+                field.onChangeHandler({
+                  id: field.id,
+                  value: event.currentTarget.value
                 });
               } else {
-                setError({
-                  errorMessage: "",
-                  error: false,
-                  id: null
+                field.onChangeHandler({
+                  id: field.id,
+                  value: event.currentTarget.value
                 });
               }
-              field.onChangeHandler({
-                id: field.id,
-                value: event.currentTarget.value
-              });
-            } else {
-              field.onChangeHandler({
-                id: field.id,
-                value: event.currentTarget.value
-              });
+            }
+          })
+        )
+      ) : null) : /* @__PURE__ */ React__default.createElement(
+        Box,
+        {
+          className: "dm-sans",
+          css: {
+            label: {
+              fontSize: "$xs !important"
             }
           }
-        })
-      );
+        },
+        /* @__PURE__ */ React__default.createElement(
+          FormInput,
+          __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+            disabled: field == null ? void 0 : field.disabled
+          }, error.id === field.id && {
+            error: error.errorMessage,
+            errorBorder: error.error
+          }), {
+            label: field.label,
+            value: typeof fieldValue === "object" ? "" : fieldValue || "",
+            size: "lg"
+          }), field.pattern && {
+            pattern: field.pattern
+          }), {
+            onChange: (event) => {
+              if (field == null ? void 0 : field.pattern) {
+                const pattern = new RegExp(field.pattern);
+                if (!pattern.test(event.currentTarget.value) && event.currentTarget.value !== "") {
+                  setError({
+                    errorMessage: field.errorMessage,
+                    error: true,
+                    id: field.id
+                  });
+                } else {
+                  setError({
+                    errorMessage: "",
+                    error: false,
+                    id: null
+                  });
+                }
+                field.onChangeHandler({
+                  id: field.id,
+                  value: event.currentTarget.value
+                });
+              } else {
+                field.onChangeHandler({
+                  id: field.id,
+                  value: event.currentTarget.value
+                });
+              }
+            }
+          })
+        )
+      ));
     default:
-      return /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(FormLabel, { size: "sm", css: { fontWeight: "$5" } }, field.label), /* @__PURE__ */ React__default.createElement(CustomAddNewSelect, { field }));
+      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, field.id === "spreadsheet" ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ((_d = configuredFields == null ? void 0 : configuredFields.action) == null ? void 0 : _d.value) ? /* @__PURE__ */ React__default.createElement(
+        Flex,
+        {
+          gap: "$2",
+          flexDirection: "column",
+          css: {
+            cursor: "pointer !important",
+            ".twigs-select__indicator": {
+              width: "14px !important",
+              color: "#848484 !important"
+            }
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, field.label),
+        /* @__PURE__ */ React__default.createElement(CustomAddNewSelect, { field })
+      ) : null) : /* @__PURE__ */ React__default.createElement(
+        Flex,
+        {
+          gap: "$2",
+          flexDirection: "column",
+          css: {
+            cursor: "pointer !important",
+            ".twigs-select__indicator": {
+              width: "14px !important",
+              color: "#848484 !important"
+            }
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, field.label),
+        /* @__PURE__ */ React__default.createElement(CustomAddNewSelect, { field })
+      ));
   }
 };
 const CustomAddNewSelect = ({ field }) => {
@@ -587,6 +747,9 @@ const CustomAddNewSelect = ({ field }) => {
       isDisabled: field == null ? void 0 : field.disabled,
       placeholder: "",
       size: "lg",
+      css: {
+        cursor: "pointer"
+      },
       components: {
         Option: CustomShareOption,
         SingleValue: CustomSingleValue
@@ -594,7 +757,8 @@ const CustomAddNewSelect = ({ field }) => {
       styles: {
         singleValue: (provided, state) => __spreadProps(__spreadValues({}, provided), {
           display: "flex",
-          alignItems: "center"
+          alignItems: "center",
+          cursor: "pointer"
         })
       },
       value: field.value,
@@ -612,19 +776,15 @@ const CustomAddNewSelect = ({ field }) => {
 const CustomShareOption = (props) => {
   if (props.data.value === "ADD_NEW") {
     return /* @__PURE__ */ React__default.createElement(Tooltip, { content: props.data.tooltip || "", css: {
-      zIndex: 999999999
-    } }, /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(components.Option, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Flex, { justifyContent: "center", alignItems: "center" }, /* @__PURE__ */ React__default.createElement(
-      Button,
-      {
-        size: "sm",
-        variant: "ghost",
-        color: "primary",
-        leftIcon: /* @__PURE__ */ React__default.createElement(PlusIcon, { size: 16 })
-      },
-      "Add New"
-    )))));
+      zIndex: 999999999,
+      fontFamily: "DM Sans !important"
+    } }, /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(components.Option, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Flex, { justifyContent: "center", alignItems: "center", css: { cursor: "pointer", zIndex: 999999999 } }, /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", alignItems: "center", css: {
+      color: "$primary500",
+      fontSize: "$sm",
+      fontWeight: "$7"
+    } }, /* @__PURE__ */ React__default.createElement(PlusIcon, { size: 16, color: "#4A9CA6" }), "Add Account")))));
   } else {
-    return /* @__PURE__ */ React__default.createElement(components.Option, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, props.label)));
+    return /* @__PURE__ */ React__default.createElement(components.Option, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Flex, { css: { cursor: "pointer", zIndex: 999999999 }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, props.label)));
   }
 };
 const CustomSingleValue = (props) => {