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

package/dist/es/mapping/index.js

@@ -1,49 +1,11 @@
 import React__default, { useState, useEffect } from 'react';
-import Arrow from '../commons/icons/arrow.js';
 import { Mapping as Mapping$1 } from './components/mapping.js';
-import { surveySparrowURL } from '../commons/constants/index.js';
-import DraftModal from '../commons/components/draftModal.js';
-import '../node_modules/dayjs/dayjs.min.js';
-import NamingModal from '../commons/components/NamingModal.js';
+import { MappingHeader } from './components/MappingHeader.js';
+import { EventSetup } from './components/EventSetup.js';
+export { API_CONSTANTS, CONFIG_FIELD_IDS, CUSTOM_SELECT_STYLES, DEFAULT_FIELD_VALUE, DEFAULT_NUMBER_WORD, DRAFT_CONSTANTS, DROPDOWN_TYPES, FIELD_TYPES, FIELD_TYPE_NAMES, FIELD_VALIDATION, HTTP_MESSAGES, MAPPING_ERROR_MESSAGES, MAPPING_PROPERTY_VALUES, MAPPING_TAB_VALUES, MAPPING_TYPE_VALUES, NUMBER_WORDS, QUERY_PARAMS, SAMPLE_INTEGRATION_FIELDS, STYLE_CONSTANTS, SUB_MENU_CUSTOM_STYLES, TOKEN_MIN_LENGTH, UI_CONSTANTS, UI_TEXT, isValidToken } from './constants/index.js';
 import { ThemeProvider } from '../node_modules/@sparrowengg/twigs-react/dist/es/theme-provider/theme-provider.js';
 import { Box } from '../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
-import { Flex } from '../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
-import { Heading } from '../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js';
-import { Text } from '../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
-import { FormLabel } from '../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js';
-import { Select } from '../node_modules/@sparrowengg/twigs-react/dist/es/select/select.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 { IconButton } from '../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
-import { ArrowLeftIcon } from '../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/arrow-left.js';
-import { Tooltip } from '../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js';
-import { FormInput } from '../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js';
-import { Checkbox } from '../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.js';
-import { Switch } from '../node_modules/@sparrowengg/twigs-react/dist/es/switch/switch.js';
-import { c as components } from '../node_modules/react-select/dist/index-a301f526.esm.js';
-import { PlusIcon } from '../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.js';
-import { Chip } from '../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js';
-import { TickCircleFillIcon } from '../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,
@@ -54,7 +16,7 @@ const Mapping = ({
   setFields,
   integrationFields,
   setIntegrationFields,
-  apiURL = surveySparrowURL,
+  apiURL,
   token,
   accounts,
   events,
@@ -71,15 +33,16 @@ const Mapping = ({
   draftHandler,
   configuration
 }) => {
-  const [previousMapping, setPreviousMapping] = useState(
-    hasPreviousMapping != null ? hasPreviousMapping : false
-  );
+  const [previousMapping, setPreviousMapping] = useState(hasPreviousMapping != null ? hasPreviousMapping : false);
   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__default.createElement(
     ThemeProvider,
     {
@@ -104,7 +67,7 @@ const Mapping = ({
         fields,
         editFieldId: editField == null ? void 0 : editField.id,
         onSaveHandler,
-        navigateEventPage: () => navigateMappingPage(false),
+        navigateEventPage: handleNavigateEventPage,
         previousMappingHandler,
         draftHandler,
         hasNamingModal,
@@ -141,574 +104,6 @@ const Mapping = ({
     ))
   );
 };
-const EventSetup = ({
-  surveyDetails,
-  accounts,
-  events,
-  actions,
-  navigateMappingPage,
-  configuration,
-  editFieldId
-}) => {
-  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__default.createElement(
-    Flex,
-    {
-      css: { paddingTop: "$40" },
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    /* @__PURE__ */ React__default.createElement(Box, { css: { width: 488 } }, configuration.hasConfiguration ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-      ConfigurationSetup,
-      {
-        configuration,
-        surveyName: surveyDetails.surveyName,
-        editField: editFieldId
-      }
-    )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__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" } }, surveyDetails.surveyName)), /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$8", css: { marginTop: "$16" } }, (accounts == null ? void 0 : accounts.hasAccounts) && /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Choose Account"), /* @__PURE__ */ React__default.createElement(
-      Select,
-      {
-        value: accounts.value,
-        options: accounts.options,
-        placeholder: "",
-        onChange: (value) => accounts.onChangeHandler(
-          value
-        ),
-        size: "lg"
-      }
-    )), (events == null ? void 0 : events.hasEvents) && /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Choose Object"), /* @__PURE__ */ React__default.createElement(
-      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__default.createElement(Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Choose Action"), /* @__PURE__ */ React__default.createElement(
-      Select,
-      {
-        size: "lg",
-        options: actions.options,
-        value: actions == null ? void 0 : actions.value,
-        placeholder: "",
-        onChange: (value) => actions.onChangeHandler(
-          value
-        )
-      }
-    )))), /* @__PURE__ */ React__default.createElement(
-      Button,
-      {
-        size: "lg",
-        disabled: configuration.hasConfiguration ? false : !(actions == null ? void 0 : actions.value) || !(events == null ? void 0 : events.value),
-        rightIcon: /* @__PURE__ */ React__default.createElement(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] = useState(false);
-  const [isNamingModalOpen, setIsNamingModalOpen] = 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__default.createElement(
-    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__default.createElement(
-      DraftModal,
-      {
-        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__default.createElement(
-      Flex,
-      {
-        gap: "$6",
-        alignItems: "center",
-        css: { visibility: hasPreviousMapping ? "visible" : "hidden" }
-      },
-      /* @__PURE__ */ React__default.createElement(
-        IconButton,
-        {
-          onClick: () => previousMappingHandler(),
-          color: "default",
-          icon: /* @__PURE__ */ React__default.createElement(ArrowLeftIcon, null),
-          size: "lg"
-        }
-      ),
-      /* @__PURE__ */ React__default.createElement(Heading, { size: "h6" }, editFieldId ? "Edit Mapping" : "New Mapping")
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      Flex,
-      {
-        alignItems: "center",
-        gap: "$4",
-        css: {
-          "& button": { background: "transparent !important", fontSize: "$md" }
-        }
-      },
-      /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          css: { color: !isMappingPage ? "$neutral900" : "$neutral800" },
-          color: "default",
-          variant: "ghost",
-          size: "md",
-          onClick: () => isMappingPage && navigateEventPage()
-        },
-        "Event Setup"
-      ),
-      /* @__PURE__ */ React__default.createElement(Arrow, null),
-      /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          onClick: () => navigateMappingPage(),
-          css: { color: !isDisabled ? "$neutral900" : "$neutral800" },
-          color: "default",
-          variant: "ghost",
-          size: "md",
-          disabled: isDisabled
-        },
-        "Mapping"
-      )
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      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__default.createElement(
-      NamingModal,
-      {
-        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__default.createElement(Box, { css: { maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__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) > 25 ? 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",
-      gap: "$8",
-      css: {
-        marginTop: "$12",
-        "& label": {
-          color: "$neutral800"
-        }
-      }
-    },
-    (_a = configuration.configurationFields) == null ? void 0 : _a.map((field) => {
-      return /* @__PURE__ */ React__default.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] = useState({
-    errorMessage: "",
-    error: false,
-    id: null
-  });
-  switch (field.fieldType) {
-    case "switch":
-      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,
-          {
-            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__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(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 {
-                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(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 }) => {
-  return /* @__PURE__ */ React__default.createElement(
-    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__default.createElement(
-      Tooltip,
-      {
-        content: props.data.tooltip || "",
-        css: {
-          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", zIndex: 999999999 },
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: "$2"
-      },
-      /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, props.label),
-      " ",
-      props.data.isAddonAccount && /* @__PURE__ */ React__default.createElement(
-        Chip,
-        {
-          color: "primary",
-          size: "sm",
-          leftElement: /* @__PURE__ */ React__default.createElement(TickCircleFillIcon, null)
-        },
-        "In Use (Add-on)"
-      )
-    ));
-  }
-};
-const CustomSingleValue = (props) => {
-  if (props.data.value === "ADD_NEW") {
-    return /* @__PURE__ */ React__default.createElement(components.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(PlusIcon, { size: 16 }), /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, props.data.label)));
-  } else {
-    return /* @__PURE__ */ React__default.createElement(components.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, props.data.label)));
-  }
-};
 
-export { Mapping };
+export { Mapping, Mapping$1 as MappingFields };
 //# sourceMappingURL=index.js.map