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

package/dist/cjs/mapping/index.js

@@ -1,51 +1,14 @@
 'use strict';
 
 var React = require('react');
-var arrow = require('../commons/icons/arrow.js');
 var mapping = require('./components/mapping.js');
-var index = require('../commons/constants/index.js');
-var draftModal = require('../commons/components/draftModal.js');
+var EventSetup = require('./components/EventSetup.js');
+var MappingHeader = require('./components/MappingHeader.js');
 require('../node_modules/dayjs/dayjs.min.js');
-var NamingModal = require('../commons/components/NamingModal.js');
+require('../commons/constants/index.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,
@@ -56,7 +19,7 @@ const Mapping = ({
   setFields,
   integrationFields,
   setIntegrationFields,
-  apiURL = index.surveySparrowURL,
+  apiURL,
   token,
   accounts,
   events,
@@ -81,7 +44,7 @@ const Mapping = ({
       setFields(editField.fieldValues);
       setPreviousMapping(true);
     }
-  }, []);
+  }, [editField == null ? void 0 : editField.id, editField == null ? void 0 : editField.fieldValues, setFields]);
   return /* @__PURE__ */ React.createElement(
     themeProvider.ThemeProvider,
     {
@@ -93,7 +56,7 @@ const Mapping = ({
       }
     },
     /* @__PURE__ */ React.createElement(box.Box, { css: { height: "100vh", width: "100vw" } }, /* @__PURE__ */ React.createElement(
-      MappingHeader,
+      MappingHeader.default,
       {
         navigateMappingPage,
         accounts,
@@ -113,7 +76,7 @@ const Mapping = ({
         configuration
       }
     ), !isMappingPage ? /* @__PURE__ */ React.createElement(
-      EventSetup,
+      EventSetup.default,
       {
         surveyDetails,
         accounts,
@@ -143,574 +106,6 @@ 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.Mapping = Mapping;
 //# sourceMappingURL=index.js.map