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

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

@@ -1,55 +1,18 @@
 'use strict';
 
-var string = require('../node_modules/@internationalized/date/dist/string.js');
-var editConfirmation = require('../commons/components/edit-confirmation.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
 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 dayjs_min = require('../node_modules/dayjs/dayjs.min.js');
+var mapping = require('./components/mapping.js');
+var MappingHeader = require('./components/MappingHeader.js');
+var ConfigurationSetup = require('./components/ConfigurationSetup.js');
+var useEditState = require('./hooks/useEditState.js');
 var themeProvider = require('../node_modules/@sparrowengg/twigs-react/dist/es/theme-provider/theme-provider.js');
 var tooltip = require('../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.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 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 heading = require('../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
-var button = require('../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
-var text = require('../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
-var dropdown = require('../node_modules/@sparrowengg/twigs-react/dist/es/dropdown/dropdown.js');
-var input = require('../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js');
-var chevronDown = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-down.js');
-var calendar = require('../node_modules/@sparrowengg/twigs-react/dist/es/calendar/calendar.js');
-var radio = require('../node_modules/@sparrowengg/twigs-react/dist/es/radio/radio.js');
-var formLabel = require('../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.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 select = require('../node_modules/@sparrowengg/twigs-react/dist/es/select/select.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 SingleMapping = ({
   integrationFields,
   configuration,
@@ -74,31 +37,26 @@ const SingleMapping = ({
     derivedQuestions: []
   });
   const [isEditConfirmationOpen, setIsEditConfirmationOpen] = React.useState(false);
-  const [originalMappingData, setOriginalMappingData] = React.useState(null);
-  const [originalConfigurationFields, setOriginalConfigurationFields] = React.useState(null);
-  const [originalConfiguredFields, setOriginalConfiguredFields] = React.useState(null);
-  const [originalImportResponse, setOriginalImportResponse] = React.useState(null);
-  const [isInitialLoad, setIsInitialLoad] = React.useState(true);
-  React.useEffect(() => {
-    if (!!(editField == null ? void 0 : editField.id)) {
-      navigateMappingPage(true);
-      setOriginalConfigurationFields(
-        JSON.parse(JSON.stringify(configuration.configurationFields))
-      );
-      setOriginalConfiguredFields(
-        JSON.parse(JSON.stringify(configuration.configuredFields))
-      );
-      setOriginalImportResponse(JSON.parse(JSON.stringify(importResponse)));
-    }
-  }, []);
-  const hasFieldsChanged = () => {
-    if (!(editField == null ? void 0 : editField.id) || !originalMappingData)
-      return true;
-    const mappingDataChanged = JSON.stringify(ssMappingData) !== JSON.stringify(originalMappingData);
-    JSON.stringify(JSON.parse(JSON.stringify(importResponse))) !== JSON.stringify(originalImportResponse);
-    const configFieldsChanged = JSON.stringify(configuration.configurationFields) !== JSON.stringify(originalConfigurationFields);
-    const configuredFieldsChanged = JSON.stringify(configuration.configuredFields) !== JSON.stringify(originalConfiguredFields);
-    return configFieldsChanged || configuredFieldsChanged || !isInitialLoad && mappingDataChanged;
+  const {
+    originalMappingData,
+    setOriginalMappingData,
+    isInitialLoad,
+    setIsInitialLoad,
+    hasFieldsChanged
+  } = useEditState.useEditState({
+    editField,
+    configuration,
+    importResponse,
+    navigateMappingPage
+  });
+  const handleSaveConfiguration = () => {
+    configuration.onSaveHandler();
+  };
+  const handleNavigateConfigPage = () => {
+    navigateMappingPage(false);
+  };
+  const handleSaveMapping = () => {
+    onSaveHandler((editField == null ? void 0 : editField.id) ? editField : {});
   };
   return /* @__PURE__ */ React.createElement(
     themeProvider.ThemeProvider,
@@ -111,7 +69,7 @@ const SingleMapping = ({
       }
     },
     /* @__PURE__ */ React.createElement(tooltip.TooltipProvider, null, /* @__PURE__ */ React.createElement(box.Box, { css: { width: "100%" } }, /* @__PURE__ */ React.createElement(
-      MappingHeader,
+      MappingHeader.MappingHeader,
       {
         isEditConfirmationOpen,
         setIsEditConfirmationOpen,
@@ -120,16 +78,12 @@ const SingleMapping = ({
         ssMappingData,
         configuration,
         hasFieldsChanged: hasFieldsChanged(),
-        saveConfiguration: () => {
-          configuration.onSaveHandler();
-        },
+        saveConfiguration: handleSaveConfiguration,
         isMappingPage,
         hasExistingMapping,
-        navigateConfigPage: () => navigateMappingPage(false),
+        navigateConfigPage: handleNavigateConfigPage,
         previousMappingHandler,
-        onSaveHandler: () => {
-          onSaveHandler((editField == null ? void 0 : editField.id) ? editField : {});
-        }
+        onSaveHandler: handleSaveMapping
       }
     ), !isMappingPage && configuration.hasConfiguration ? /* @__PURE__ */ React.createElement(
       flex.Flex,
@@ -139,7 +93,7 @@ const SingleMapping = ({
         css: { marginTop: "$40" }
       },
       /* @__PURE__ */ React.createElement(
-        ConfigurationSetup,
+        ConfigurationSetup.ConfigurationSetup,
         {
           configuration,
           surveyName: surveyDetails.surveyName,
@@ -165,869 +119,7 @@ const SingleMapping = ({
     )))
   );
 };
-const MappingHeader = ({
-  isEditConfirmationOpen,
-  editField,
-  importResponse,
-  hasExistingMapping,
-  ssMappingData,
-  isMappingPage,
-  navigateConfigPage,
-  onSaveHandler,
-  previousMappingHandler,
-  saveConfiguration,
-  configuration,
-  setIsEditConfirmationOpen,
-  hasFieldsChanged
-}) => {
-  const isButtonDisabled = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
-    if (isMappingPage) {
-      if (editField == null ? void 0 : editField.id) {
-        return !hasFieldsChanged;
-      }
-      if (((_a = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a.importMethod) === "SEND_ALL_DATA") {
-        return !(((_b = ssMappingData == null ? void 0 : ssMappingData.questions) == null ? void 0 : _b.length) || ((_c = ssMappingData == null ? void 0 : ssMappingData.variables) == null ? void 0 : _c.length) || ((_d = ssMappingData == null ? void 0 : ssMappingData.contactProperties) == null ? void 0 : _d.length) || ((_e = ssMappingData == null ? void 0 : ssMappingData.expressions) == null ? void 0 : _e.length) || ((_f = ssMappingData == null ? void 0 : ssMappingData.property) == null ? void 0 : _f.length) || ((_g = ssMappingData == null ? void 0 : ssMappingData.derivedQuestions) == null ? void 0 : _g.length));
-      } else {
-        const isMappingDisabled = ((_h = ssMappingData == null ? void 0 : ssMappingData.questions) == null ? void 0 : _h.some((question) => question.isEnabled)) || ((_i = ssMappingData == null ? void 0 : ssMappingData.variables) == null ? void 0 : _i.some((variable) => variable.isEnabled)) || ((_j = ssMappingData == null ? void 0 : ssMappingData.contactProperties) == null ? void 0 : _j.some(
-          (property) => property.isEnabled
-        )) || ((_k = ssMappingData == null ? void 0 : ssMappingData.expressions) == null ? void 0 : _k.some(
-          (expression) => expression.isEnabled
-        )) || ((_l = ssMappingData == null ? void 0 : ssMappingData.derivedQuestions) == null ? void 0 : _l.some(
-          (derivedQuestion) => derivedQuestion.isEnabled
-        )) || ((_m = ssMappingData == null ? void 0 : ssMappingData.property) == null ? void 0 : _m.some((property) => property.isEnabled));
-        return !isMappingDisabled;
-      }
-    } else {
-      const isAllFieldsDisabled = (_n = Object.values(
-        (configuration == null ? void 0 : configuration.configurationFields) || {}
-      )) == null ? void 0 : _n.some(
-        (field) => (field == null ? void 0 : field.value) === null || (field == null ? void 0 : field.value) === void 0
-      );
-      if ((_p = (_o = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _o.find(
-        (field) => (field == null ? void 0 : field.id) === "responseImportSettings"
-      )) == null ? void 0 : _p.value) {
-        return isAllFieldsDisabled || !((_q = configuration == null ? void 0 : configuration.configuredFields) == null ? void 0 : _q.responseImportType);
-      } else {
-        return isAllFieldsDisabled;
-      }
-    }
-  };
-  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.createElement(
-    flex.Flex,
-    {
-      alignItems: "center",
-      justifyContent: "space-between",
-      css: {
-        borderBottom: "$borderWidths$xs solid $neutral200",
-        padding: "$8 $12"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      flex.Flex,
-      {
-        gap: "$6",
-        alignItems: "center",
-        css: { visibility: hasExistingMapping ? "visible" : "hidden" }
-      },
-      /* @__PURE__ */ React.createElement(
-        iconButton.IconButton,
-        {
-          onClick: () => previousMappingHandler == null ? void 0 : previousMappingHandler(),
-          color: "default",
-          icon: /* @__PURE__ */ React.createElement(arrowLeft.ArrowLeftIcon, null),
-          size: "lg"
-        }
-      ),
-      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6" }, (editField == null ? void 0 : editField.id) ? "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 && navigateConfigPage()
-        },
-        "Configuration"
-      ),
-      /* @__PURE__ */ React.createElement(arrow.default, null),
-      /* @__PURE__ */ React.createElement(
-        button.Button,
-        {
-          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.createElement(
-      flex.Flex,
-      {
-        justifyContent: "end",
-        css: {
-          width: "180px"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        button.Button,
-        {
-          size: "lg",
-          disabled: isButtonDisabled(),
-          onClick: () => {
-            if (isMappingPage) {
-              if (editField == null ? void 0 : editField.id) {
-                setIsEditConfirmationOpen(true);
-              } else {
-                onSaveHandler({});
-              }
-            } else {
-              saveConfiguration();
-            }
-          }
-        },
-        isMappingPage ? (editField == null ? void 0 : editField.id) ? "Update Mapping" : "Save Mapping" : "Continue, Mapping"
-      )
-    ),
-    isEditConfirmationOpen && /* @__PURE__ */ React.createElement(
-      editConfirmation.default,
-      {
-        name: "Are you sure?",
-        description: "Saving this updated mapping properties will generate new sheet with the revised mapping.",
-        onConfirm: async () => {
-          await onSaveHandler({});
-          setIsEditConfirmationOpen(false);
-        },
-        onCancel: () => {
-          setIsEditConfirmationOpen(false);
-        }
-      }
-    )
-  );
-};
-const ConfigurationSetup = ({
-  configuration,
-  surveyName,
-  editField
-}) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
-  return /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, "Event Details"), /* @__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
-        }
-      );
-    }),
-    configuration.importOptions.showImportOptions && /* @__PURE__ */ React.createElement(
-      flex.Flex,
-      {
-        gap: "$2",
-        flexDirection: "column",
-        css: {
-          marginTop: "-4px !important"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        CustomDropdown,
-        {
-          editField,
-          data: configuration.importOptions.options,
-          value: (_d = (_c = (_b = configuration == null ? void 0 : configuration.configuredFields) == null ? void 0 : _b.responseImportType) == null ? void 0 : _c.value) != null ? _d : configuration.importOptions.options[0],
-          onChangeHandler: configuration.importOptions.onChangeHandler
-        }
-      )
-    ),
-    ((_g = (_f = (_e = configuration.configuredFields) == null ? void 0 : _e.responseImportType) == null ? void 0 : _f.value) == null ? void 0 : _g.type) === "date" && /* @__PURE__ */ React.createElement(
-      text.Text,
-      {
-        size: "sm",
-        weight: "regular",
-        css: { color: "$neutral600", marginTop: "-$6" }
-      },
-      `Existing responses from ${(_j = (_i = (_h = configuration.configuredFields) == null ? void 0 : _h.responseImportType) == null ? void 0 : _i.value) == null ? void 0 : _j.value} will be imported`
-    ),
-    configuration.importOptions.excludeResponse && ((_m = (_l = (_k = configuration.configuredFields) == null ? void 0 : _k.responseImportType) == null ? void 0 : _l.value) == null ? void 0 : _m.type) === "dateRange" && /* @__PURE__ */ React.createElement(
-      Configuration,
-      {
-        field: configuration.importOptions.excludeResponse,
-        configuredFields: configuration.configuredFields,
-        responseImportType: (_q = (_p = (_o = (_n = configuration.configuredFields) == null ? void 0 : _n.responseImportType) == null ? void 0 : _o.value) == null ? void 0 : _p.value) == null ? void 0 : _q.label
-      }
-    )
-  ));
-};
-const CustomDropdown = ({ data, onChangeHandler, value, editField }) => {
-  var _a, _b, _c, _d, _e;
-  const [date, setDate] = React.useState(() => {
-    try {
-      return value ? string.parseDate(dayjs_min.default(value).format("YYYY-MM-DD")) : string.parseDate(dayjs_min.default().format("YYYY-MM-DD"));
-    } catch (e) {
-      return string.parseDate(dayjs_min.default().format("YYYY-MM-DD"));
-    }
-  });
-  const [days, setDays] = React.useState((_b = (_a = value == null ? void 0 : value.value) == null ? void 0 : _a.value) != null ? _b : 0);
-  const [open, setOpen] = React.useState(false);
-  const [hasBeenOpened, setHasBeenOpened] = React.useState(false);
-  React.useEffect(() => {
-    if (!(editField == null ? void 0 : editField.id) && !hasBeenOpened) {
-      setOpen(true);
-      setHasBeenOpened(true);
-    }
-  }, [editField == null ? void 0 : editField.id, hasBeenOpened]);
-  return /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-    input.Input,
-    {
-      size: "lg",
-      rightIcon: /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 30, color: "#6A6A6A" }),
-      placeholder: "Choose",
-      value: (value == null ? void 0 : value.type) === "date" ? `${value == null ? void 0 : value.label} > ${value == null ? void 0 : value.value}` : (value == null ? void 0 : value.type) === "dateRange" ? `${value == null ? void 0 : value.label} - ${((_c = value == null ? void 0 : value.value) == null ? void 0 : _c.type) === "custom" ? `${(_d = value == null ? void 0 : value.value) == null ? void 0 : _d.value} days` : (_e = value == null ? void 0 : value.value) == null ? void 0 : _e.label}` : value == null ? void 0 : value.label,
-      css: {
-        "& input": {
-          textAlign: "left !important"
-        }
-      }
-    }
-  )), /* @__PURE__ */ React.createElement(
-    dropdown.DropdownMenuContent,
-    {
-      css: {
-        width: "488px",
-        marginBlockStart: "$2",
-        p: {
-          margin: "0px !important"
-        },
-        zIndex: "99 !important"
-      },
-      className: "dm-sans"
-    },
-    data.map((option) => {
-      var _a2;
-      if (!option.type) {
-        return /* @__PURE__ */ React.createElement(
-          tooltip.Tooltip,
-          {
-            content: option.tooltip || "",
-            css: {
-              zIndex: "9999999 !important",
-              fontFamily: "DM Sans !important"
-            }
-          },
-          /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
-            dropdown.DropdownMenuItem,
-            {
-              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"
-              },
-              onClick: () => onChangeHandler({
-                id: "responseImportType",
-                value: option
-              })
-            },
-            /* @__PURE__ */ React.createElement(
-              flex.Flex,
-              {
-                justifyContent: "space-between",
-                alignItems: "center",
-                css: {
-                  width: "100%"
-                }
-              },
-              /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center", flexDirection: "column" }, /* @__PURE__ */ React.createElement(
-                text.Text,
-                {
-                  size: "sm",
-                  weight: "regular",
-                  css: { color: "$neutral900" }
-                },
-                option.label
-              ), /* @__PURE__ */ React.createElement(
-                text.Text,
-                {
-                  size: "xs",
-                  weight: "regular",
-                  css: { color: "$neutral700" }
-                },
-                option.description
-              ))
-            )
-          ))
-        );
-      } else {
-        return /* @__PURE__ */ React.createElement(
-          tooltip.Tooltip,
-          {
-            content: option.tooltip || "",
-            css: {
-              fontFamily: "DM Sans !important",
-              zIndex: "9999999 !important"
-            }
-          },
-          /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuSub, null, /* @__PURE__ */ React.createElement(
-            dropdown.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.createElement(
-              flex.Flex,
-              {
-                justifyContent: "space-between",
-                alignItems: "center",
-                css: {
-                  width: "100%"
-                }
-              },
-              /* @__PURE__ */ React.createElement(
-                flex.Flex,
-                {
-                  css: { cursor: "pointer" },
-                  justifyContent: "center",
-                  flexDirection: "column"
-                },
-                /* @__PURE__ */ React.createElement(
-                  text.Text,
-                  {
-                    size: "sm",
-                    weight: "regular",
-                    css: { color: "$neutral900" }
-                  },
-                  option.label
-                ),
-                /* @__PURE__ */ React.createElement(
-                  text.Text,
-                  {
-                    size: "xs",
-                    weight: "regular",
-                    css: { color: "$neutral700" }
-                  },
-                  option.description
-                )
-              )
-            )
-          ), /* @__PURE__ */ React.createElement(
-            dropdown.DropdownMenuSubContent,
-            {
-              sideOffset: 10,
-              alignOffset: -5,
-              css: __spreadProps(__spreadValues({
-                padding: "0px !important",
-                maxHeight: "500px",
-                minWidth: "224px",
-                maxWidth: "260px",
-                margin: "0px !important"
-              }, option.type === "date" && {
-                border: "none !important"
-              }), {
-                p: {
-                  margin: "0px !important"
-                },
-                marginBlockEnd: "$10 !important"
-              }),
-              className: "dm-sans"
-            },
-            option.type === "date" && /* @__PURE__ */ React.createElement(
-              calendar.Calendar,
-              __spreadProps(__spreadValues(__spreadValues({
-                footerActionText: "Apply",
-                size: "md",
-                value: date,
-                onChange: setDate
-              }, (option == null ? void 0 : option.minValue) && {
-                minValue: string.parseDate(option == null ? void 0 : option.minValue)
-              }), (option == null ? void 0 : option.maxValue) && {
-                maxValue: string.parseDate(option == null ? void 0 : option.maxValue)
-              }), {
-                footerAction: () => {
-                  onChangeHandler({
-                    id: "responseImportType",
-                    value: __spreadProps(__spreadValues({}, option), {
-                      value: dayjs_min.default(date.toString()).format(
-                        "MMM D, YYYY"
-                      )
-                    })
-                  });
-                  setOpen(false);
-                }
-              })
-            ),
-            option.type === "dateRange" && /* @__PURE__ */ React.createElement(
-              flex.Flex,
-              {
-                css: {
-                  paddingInline: "$4 !important",
-                  paddingBlock: "$8 !important"
-                },
-                flexDirection: "column",
-                gap: "$4"
-              },
-              /* @__PURE__ */ React.createElement(
-                radio.RadioGroup,
-                {
-                  defaultValue: value == null ? void 0 : value.value,
-                  onChange: (value2) => {
-                    var _a3;
-                    onChangeHandler({
-                      id: "responseImportType",
-                      value: __spreadProps(__spreadValues({}, option), {
-                        value: {
-                          type: value2,
-                          value: value2,
-                          label: (_a3 = index.dynamicDateOptions.find(
-                            (option2) => option2.value === value2
-                          )) == null ? void 0 : _a3.label
-                        }
-                      })
-                    });
-                  }
-                },
-                index.dynamicDateOptions.map((option2) => /* @__PURE__ */ React.createElement(
-                  box.Box,
-                  {
-                    css: {
-                      padding: "$4 !important"
-                    }
-                  },
-                  /* @__PURE__ */ React.createElement(radio.Radio, { value: option2.value }, " ", option2.label, " ")
-                ))
-              ),
-              ((_a2 = value == null ? void 0 : value.value) == null ? void 0 : _a2.type) === "custom" && /* @__PURE__ */ React.createElement(
-                box.Box,
-                {
-                  css: {
-                    paddingRight: "$4 !important",
-                    position: "relative"
-                  }
-                },
-                /* @__PURE__ */ React.createElement(
-                  input.Input,
-                  {
-                    size: "md",
-                    variant: "filled",
-                    value: days,
-                    onChange: (e) => setDays(e.target.value)
-                  }
-                ),
-                /* @__PURE__ */ React.createElement(
-                  text.Text,
-                  {
-                    css: {
-                      position: "absolute",
-                      right: "$8",
-                      top: "$3"
-                    }
-                  },
-                  "Days"
-                )
-              ),
-              /* @__PURE__ */ React.createElement(
-                flex.Flex,
-                {
-                  justifyContent: "space-between",
-                  css: {
-                    borderBlockStart: "$borderWidths$xs, solid, $neutral200 !important",
-                    padding: "$8"
-                  }
-                },
-                /* @__PURE__ */ React.createElement(button.Button, { size: "sm", variant: "ghost", color: "secondary" }, "Cancel"),
-                /* @__PURE__ */ React.createElement(
-                  button.Button,
-                  {
-                    size: "sm",
-                    variant: "ghost",
-                    color: "primary",
-                    onClick: () => {
-                      var _a3, _b2;
-                      onChangeHandler({
-                        id: "responseImportType",
-                        value: __spreadProps(__spreadValues({}, option), {
-                          value: {
-                            type: (_a3 = value == null ? void 0 : value.value) == null ? void 0 : _a3.type,
-                            value: days,
-                            label: (_b2 = value == null ? void 0 : value.value) == null ? void 0 : _b2.label
-                          }
-                        })
-                      });
-                      setOpen(false);
-                    }
-                  },
-                  "Apply"
-                )
-              )
-            )
-          )))
-        );
-      }
-    })
-  ));
-};
-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.SingleMapping = SingleMapping;
+exports.default = SingleMapping;
 //# sourceMappingURL=index.js.map