@sparrowengg/integrations-templates-frontend 2.1.0-beta.1 → 2.1.0-beta.2

package/dist/cjs/mapping/index.js

@@ -1,13 +1,51 @@
 'use strict';
 
 var React = require('react');
+var arrow = require('../commons/icons/arrow.js');
 var mapping = require('./components/mapping.js');
-var MappingHeader = require('./components/MappingHeader.js');
-var EventSetup = require('./components/EventSetup.js');
-var index = require('./constants/index.js');
+var index = require('../commons/constants/index.js');
+var draftModal = require('../commons/components/draftModal.js');
+require('../node_modules/dayjs/dayjs.min.js');
+var NamingModal = require('../commons/components/NamingModal.js');
 var themeProvider = require('../node_modules/@sparrowengg/twigs-react/dist/es/theme-provider/theme-provider.js');
 var box = require('../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var flex = require('../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var heading = require('../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var text = require('../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var formLabel = require('../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js');
+var select = require('../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js');
+var button = require('../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var chevronRight = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
+var iconButton = require('../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
+var arrowLeft = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/arrow-left.js');
+var tooltip = require('../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+var formInput = require('../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
+var checkbox = require('../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.js');
+var _switch = require('../node_modules/@sparrowengg/twigs-react/dist/es/switch/switch.js');
+var indexA301f526_esm = require('../node_modules/react-select/dist/index-a301f526.esm.js');
+var plus = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.js');
+var chip = require('../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js');
+var tickCircleFill = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/tick-circle-fill.js');
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const Mapping = ({
   hasNamingModal,
   havingTypeDropdown,
@@ -18,7 +56,7 @@ const Mapping = ({
   setFields,
   integrationFields,
   setIntegrationFields,
-  apiURL,
+  apiURL = index.surveySparrowURL,
   token,
   accounts,
   events,
@@ -35,16 +73,15 @@ const Mapping = ({
   draftHandler,
   configuration
 }) => {
-  const [previousMapping, setPreviousMapping] = React.useState(hasPreviousMapping != null ? hasPreviousMapping : false);
+  const [previousMapping, setPreviousMapping] = React.useState(
+    hasPreviousMapping != null ? hasPreviousMapping : false
+  );
   React.useEffect(() => {
-    if (editField == null ? void 0 : editField.id) {
+    if (!!(editField == null ? void 0 : editField.id)) {
       setFields(editField.fieldValues);
       setPreviousMapping(true);
     }
-  }, [editField == null ? void 0 : editField.id]);
-  const handleNavigateEventPage = () => {
-    navigateMappingPage(false);
-  };
+  }, []);
   return /* @__PURE__ */ React.createElement(
     themeProvider.ThemeProvider,
     {
@@ -56,7 +93,7 @@ const Mapping = ({
       }
     },
     /* @__PURE__ */ React.createElement(box.Box, { css: { height: "100vh", width: "100vw" } }, /* @__PURE__ */ React.createElement(
-      MappingHeader.MappingHeader,
+      MappingHeader,
       {
         navigateMappingPage,
         accounts,
@@ -69,14 +106,14 @@ const Mapping = ({
         fields,
         editFieldId: editField == null ? void 0 : editField.id,
         onSaveHandler,
-        navigateEventPage: handleNavigateEventPage,
+        navigateEventPage: () => navigateMappingPage(false),
         previousMappingHandler,
         draftHandler,
         hasNamingModal,
         configuration
       }
     ), !isMappingPage ? /* @__PURE__ */ React.createElement(
-      EventSetup.EventSetup,
+      EventSetup,
       {
         surveyDetails,
         accounts,
@@ -106,31 +143,574 @@ const Mapping = ({
     ))
   );
 };
+const EventSetup = ({
+  surveyDetails,
+  accounts,
+  events,
+  actions,
+  navigateMappingPage,
+  configuration,
+  editFieldId
+}) => {
+  React.useEffect(() => {
+    if (actions == null ? void 0 : actions.value) {
+      actions == null ? void 0 : actions.onChangeHandler(actions == null ? void 0 : actions.value);
+    }
+    if (events == null ? void 0 : events.value) {
+      events == null ? void 0 : events.onChangeHandler(events == null ? void 0 : events.value);
+    }
+  }, [actions == null ? void 0 : actions.value, events == null ? void 0 : events.value]);
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      css: { paddingTop: "$40" },
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    /* @__PURE__ */ React.createElement(box.Box, { css: { width: 488 } }, configuration.hasConfiguration ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      ConfigurationSetup,
+      {
+        configuration,
+        surveyName: surveyDetails.surveyName,
+        editField: editFieldId
+      }
+    )) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, "Survey Name:"), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, surveyDetails.surveyName)), /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8", css: { marginTop: "$16" } }, (accounts == null ? void 0 : accounts.hasAccounts) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Choose Account"), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        value: accounts.value,
+        options: accounts.options,
+        placeholder: "",
+        onChange: (value) => accounts.onChangeHandler(
+          value
+        ),
+        size: "lg"
+      }
+    )), (events == null ? void 0 : events.hasEvents) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Choose Object"), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        options: events.options,
+        value: events == null ? void 0 : events.value,
+        placeholder: "",
+        onChange: (value) => events.onChangeHandler(
+          value
+        ),
+        size: "lg"
+      }
+    )), (actions == null ? void 0 : actions.hasActions) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Choose Action"), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        size: "lg",
+        options: actions.options,
+        value: actions == null ? void 0 : actions.value,
+        placeholder: "",
+        onChange: (value) => actions.onChangeHandler(
+          value
+        )
+      }
+    )))), /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        disabled: configuration.hasConfiguration ? false : !(actions == null ? void 0 : actions.value) || !(events == null ? void 0 : events.value),
+        rightIcon: /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, null),
+        css: { marginTop: "$16" },
+        onClick: () => navigateMappingPage()
+      },
+      "Continue Mapping"
+    ))
+  );
+};
+const MappingHeader = ({
+  hasNamingModal,
+  navigateMappingPage,
+  accounts,
+  events,
+  actions,
+  havingTypeDropdown,
+  onSaveMappingLoader,
+  hasPreviousMapping,
+  isMappingPage,
+  fields,
+  navigateEventPage,
+  onSaveHandler,
+  previousMappingHandler,
+  editFieldId,
+  draftHandler,
+  configuration
+}) => {
+  const isDisabled = !(actions == null ? void 0 : actions.value) || !(events == null ? void 0 : events.value);
+  const [isDraftModalOpen, setIsDraftModalOpen] = React.useState(false);
+  const [isNamingModalOpen, setIsNamingModalOpen] = React.useState(false);
+  const isAllEssentialMapped = (fields2) => {
+    let status = true;
+    fields2 == null ? void 0 : fields2.map((field) => {
+      if (field == null ? void 0 : field.isEssentialField) {
+        status = status && (field == null ? void 0 : field.surveySparrowField) !== null;
+        if (havingTypeDropdown) {
+          status = status && (field == null ? void 0 : field.integrationFieldType) !== null && (field == null ? void 0 : field.integrationField) !== null;
+        }
+      } else {
+        if (!!(field == null ? void 0 : field.integrationField) || !!(field == null ? void 0 : field.surveySparrowField)) {
+          status = status && !!(field == null ? void 0 : field.integrationField) && !!(field == null ? void 0 : field.surveySparrowField);
+        }
+      }
+    });
+    return status;
+  };
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        position: "sticky",
+        width: "100%",
+        top: "1px",
+        zIndex: "99",
+        background: "#ffff",
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    isDraftModalOpen && /* @__PURE__ */ React.createElement(
+      draftModal.default,
+      {
+        onSaveHandler: async () => {
+          await draftHandler("MAPPING", editFieldId == null ? void 0 : editFieldId.toString());
+          setIsDraftModalOpen(false);
+          await previousMappingHandler();
+        },
+        onCloseHandler: () => setIsDraftModalOpen(false),
+        onCancel: async () => {
+          await previousMappingHandler();
+          setIsDraftModalOpen(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasPreviousMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          onClick: () => previousMappingHandler(),
+          color: "default",
+          icon: /* @__PURE__ */ React.createElement(arrowLeft.ArrowLeftIcon, null),
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6" }, editFieldId ? "Edit Mapping" : "New Mapping")
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          "& button": { background: "transparent !important", fontSize: "$md" }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          css: { color: !isMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          onClick: () => isMappingPage && navigateEventPage()
+        },
+        "Event Setup"
+      ),
+      /* @__PURE__ */ React.createElement(arrow.default, null),
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          onClick: () => navigateMappingPage(),
+          css: { color: !isDisabled ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          disabled: isDisabled
+        },
+        "Mapping"
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        disabled: !isAllEssentialMapped(fields),
+        onClick: () => {
+          if (hasNamingModal) {
+            setIsNamingModalOpen(true);
+          } else {
+            onSaveHandler(editFieldId);
+          }
+        },
+        css: { visibility: isMappingPage ? "visible" : "hidden" }
+      },
+      editFieldId ? "Update Mapping" : "Save Mapping"
+    ),
+    hasNamingModal && /* @__PURE__ */ React.createElement(
+      NamingModal.default,
+      {
+        editFieldId,
+        mappingLoader: onSaveMappingLoader,
+        saveHandler: () => onSaveHandler(editFieldId),
+        closeHandler: () => setIsNamingModalOpen(false),
+        value: (configuration == null ? void 0 : configuration.currentMappingName) || "",
+        setValue: (value) => {
+          var _a;
+          return (_a = configuration == null ? void 0 : configuration.setMappingName) == null ? void 0 : _a.call(configuration, value);
+        },
+        isOpen: isNamingModalOpen
+      }
+    )
+  );
+};
+const ConfigurationSetup = ({
+  configuration,
+  surveyName,
+  editField
+}) => {
+  var _a;
+  return /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, "Survey Name:"), /* @__PURE__ */ React.createElement(
+    tooltip.Tooltip,
+    {
+      content: (surveyName == null ? void 0 : surveyName.length) > 25 ? surveyName : "",
+      css: {
+        zIndex: "9999999 !important",
+        fontFamily: "DM Sans !important"
+      }
+    },
+    /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "sm",
+        weight: "medium",
+        truncate: true,
+        css: { color: "$neutral800", maxWidth: "270px" }
+      },
+      surveyName
+    ))
+  )), /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      flexDirection: "column",
+      gap: "$8",
+      css: {
+        marginTop: "$12",
+        "& label": {
+          color: "$neutral800"
+        }
+      }
+    },
+    (_a = configuration.configurationFields) == null ? void 0 : _a.map((field) => {
+      return /* @__PURE__ */ React.createElement(
+        Configuration,
+        {
+          field,
+          configuredFields: configuration.configuredFields
+        }
+      );
+    })
+  ));
+};
+const Configuration = ({
+  field,
+  configuredFields,
+  responseImportType = null
+}) => {
+  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] = React.useState({
+    errorMessage: "",
+    error: false,
+    id: null
+  });
+  switch (field.fieldType) {
+    case "switch":
+      return /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          gap: "$4",
+          alignItems: "center",
+          css: {
+            marginBlockStart: "$12",
+            borderTop: "$borderWidths$xs solid $neutral200",
+            paddingTop: "$16"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          _switch.Switch,
+          {
+            disabled: field == null ? void 0 : field.disabled,
+            size: "sm",
+            checked: field == null ? void 0 : field.value,
+            onChange: (value) => field.onChangeHandler({
+              id: field.id,
+              value
+            })
+          }
+        ),
+        /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "regular", css: { color: "$neutral900" } }, field.label)
+      );
+    case "checkbox":
+      return /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", alignItems: "start", gap: "$4" }, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$4", alignItems: "center" }, /* @__PURE__ */ React.createElement(
+        checkbox.Checkbox,
+        {
+          disabled: field == null ? void 0 : field.disabled,
+          checked: !!fieldValue,
+          onChange: (value) => field.onChangeHandler({
+            id: field.id,
+            value
+          })
+        }
+      ), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral900" } }, field.label)), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral500" } }, field.value ? field.ifChecked() : field.ifUnchecked(responseImportType)));
+    case "input":
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, (field == null ? void 0 : field.id) === "spreadsheet" ? /* @__PURE__ */ React.createElement(React.Fragment, null, ((_c = configuredFields == null ? void 0 : configuredFields.action) == null ? void 0 : _c.value) ? /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          className: "dm-sans",
+          css: {
+            label: {
+              fontSize: "$xs !important"
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          formInput.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
+                });
+              }
+            }
+          })
+        )
+      ) : null) : /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          className: "dm-sans",
+          css: {
+            label: {
+              fontSize: "$xs !important"
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          formInput.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.createElement(React.Fragment, null, field.id === "spreadsheet" ? /* @__PURE__ */ React.createElement(React.Fragment, null, ((_d = configuredFields == null ? void 0 : configuredFields.action) == null ? void 0 : _d.value) ? /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          gap: "$2",
+          flexDirection: "column",
+          css: {
+            cursor: "pointer !important",
+            ".twigs-select__indicator": {
+              width: "14px !important",
+              color: "#848484 !important"
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, field.label),
+        /* @__PURE__ */ React.createElement(CustomAddNewSelect, { field })
+      ) : null) : /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          gap: "$2",
+          flexDirection: "column",
+          css: {
+            cursor: "pointer !important",
+            ".twigs-select__indicator": {
+              width: "14px !important",
+              color: "#848484 !important"
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, field.label),
+        /* @__PURE__ */ React.createElement(CustomAddNewSelect, { field })
+      ));
+  }
+};
+const CustomAddNewSelect = ({ field }) => {
+  return /* @__PURE__ */ React.createElement(
+    select.Select,
+    {
+      isDisabled: field == null ? void 0 : field.disabled,
+      placeholder: "",
+      size: "lg",
+      css: {
+        cursor: "pointer"
+      },
+      components: {
+        Option: CustomShareOption,
+        SingleValue: CustomSingleValue
+      },
+      styles: {
+        singleValue: (provided, state) => __spreadProps(__spreadValues({}, provided), {
+          display: "flex",
+          alignItems: "center",
+          cursor: "pointer"
+        })
+      },
+      value: field.value,
+      onChange: (value) => {
+        var _a;
+        field.onChangeHandler({
+          id: (_a = field == null ? void 0 : field.id) != null ? _a : field == null ? void 0 : field.label,
+          value
+        });
+      },
+      options: field.options
+    }
+  );
+};
+const CustomShareOption = (props) => {
+  if (props.data.value === "ADD_NEW") {
+    return /* @__PURE__ */ React.createElement(
+      tooltip.Tooltip,
+      {
+        content: props.data.tooltip || "",
+        css: {
+          zIndex: 999999999,
+          fontFamily: "DM Sans !important"
+        }
+      },
+      /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          css: { cursor: "pointer", zIndex: 999999999 }
+        },
+        /* @__PURE__ */ React.createElement(
+          flex.Flex,
+          {
+            gap: "$2",
+            alignItems: "center",
+            css: {
+              color: "$primary500",
+              fontSize: "$sm",
+              fontWeight: "$7"
+            }
+          },
+          /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16, color: "#4A9CA6" }),
+          "Add Account"
+        )
+      )))
+    );
+  } else {
+    return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        css: { cursor: "pointer", zIndex: 999999999 },
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "$2"
+      },
+      /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.label),
+      " ",
+      props.data.isAddonAccount && /* @__PURE__ */ React.createElement(
+        chip.Chip,
+        {
+          color: "primary",
+          size: "sm",
+          leftElement: /* @__PURE__ */ React.createElement(tickCircleFill.TickCircleFillIcon, null)
+        },
+        "In Use (Add-on)"
+      )
+    ));
+  }
+};
+const CustomSingleValue = (props) => {
+  if (props.data.value === "ADD_NEW") {
+    return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.data.label)));
+  } else {
+    return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.data.label)));
+  }
+};
 
-exports.MappingFields = mapping.Mapping;
-exports.API_CONSTANTS = index.API_CONSTANTS;
-exports.CONFIG_FIELD_IDS = index.CONFIG_FIELD_IDS;
-exports.CUSTOM_SELECT_STYLES = index.CUSTOM_SELECT_STYLES;
-exports.DEFAULT_FIELD_VALUE = index.DEFAULT_FIELD_VALUE;
-exports.DEFAULT_NUMBER_WORD = index.DEFAULT_NUMBER_WORD;
-exports.DRAFT_CONSTANTS = index.DRAFT_CONSTANTS;
-exports.DROPDOWN_TYPES = index.DROPDOWN_TYPES;
-exports.FIELD_TYPES = index.FIELD_TYPES;
-exports.FIELD_TYPE_NAMES = index.FIELD_TYPE_NAMES;
-exports.FIELD_VALIDATION = index.FIELD_VALIDATION;
-exports.HTTP_MESSAGES = index.HTTP_MESSAGES;
-exports.MAPPING_ERROR_MESSAGES = index.MAPPING_ERROR_MESSAGES;
-exports.MAPPING_PROPERTY_VALUES = index.MAPPING_PROPERTY_VALUES;
-exports.MAPPING_TAB_VALUES = index.MAPPING_TAB_VALUES;
-exports.MAPPING_TYPE_VALUES = index.MAPPING_TYPE_VALUES;
-exports.NUMBER_WORDS = index.NUMBER_WORDS;
-exports.QUERY_PARAMS = index.QUERY_PARAMS;
-exports.SAMPLE_INTEGRATION_FIELDS = index.SAMPLE_INTEGRATION_FIELDS;
-exports.STYLE_CONSTANTS = index.STYLE_CONSTANTS;
-exports.SUB_MENU_CUSTOM_STYLES = index.SUB_MENU_CUSTOM_STYLES;
-exports.TOKEN_MIN_LENGTH = index.TOKEN_MIN_LENGTH;
-exports.UI_CONSTANTS = index.UI_CONSTANTS;
-exports.UI_TEXT = index.UI_TEXT;
-exports.isValidToken = index.isValidToken;
 exports.Mapping = Mapping;
 //# sourceMappingURL=index.js.map