fuse-importer 0.24.0 → 0.24.4

package/lib/esm/Importer/Stepper/ConfirmCloseModal.js

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div } from "../../styled";
+import { Button, Modal } from "../../common";
+import { errorIcon } from "./common/icons";
+import { useTranslation } from "react-i18next";
+export var ConfirmCloseModal = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, onCloseImporter = _a.onCloseImporter;
+    var t = useTranslation("general").t;
+    return (_jsx(Modal, __assign({ isOpen: isOpen, onClose: onClose }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 60 }, { children: [_jsx(Div, __assign({ textAlignCenter: true, mb: 10, mt: 5 }, { children: errorIcon })), _jsx(Div, __assign({ h5: true, mt: 10 }, { children: t("confirm_close_modal.title") })), _jsx(Div, __assign({ body1: true, mt: 12, w: 448, textAlignCenter: true }, { children: t("confirm_close_modal.description") })), _jsxs(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: [_jsx(Button, __assign({ w: 115, variant: "secondary", mr: 10, onClick: onClose, "data-test-id": "confirm-close-modal-cancel" }, { children: t("confirm_close_modal.cancel") })), _jsx(Button, __assign({ w: 140, ml: 10, onClick: function () {
+                                onCloseImporter();
+                                onClose();
+                            } }, { children: t("confirm_close_modal.close") }))] }))] })) })));
+};

package/lib/esm/Importer/Stepper/Step.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Step: ({ index, label, isSelected, isCompleted }: {
     index: any;
     label: any;

package/lib/esm/Importer/Stepper/StepIndex.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StepIndex: ({ index, isSelected, isCompleted }: {
     index: any;
     isSelected: any;

package/lib/esm/Importer/Stepper/StepperSubmitModal.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-declare type StepperSubmitModalProps = {
+type StepperSubmitModalProps = {
     isSubmitModalOpen: boolean;
     onCloseModal: () => void;
     onSubmit: () => void;

package/lib/esm/Importer/Stepper/StepperSubmitModal.js

@@ -13,10 +13,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div } from "../../styled";
 import { Button, Modal } from "../../common";
 import { submitIcon } from "./common/icons";
+import { useTranslation } from "react-i18next";
 export var StepperSubmitModal = function (_a) {
     var isSubmitModalOpen = _a.isSubmitModalOpen, onCloseModal = _a.onCloseModal, onSubmit = _a.onSubmit;
-    return (_jsx(Modal, __assign({ isOpen: isSubmitModalOpen, onClose: function () { return onCloseModal(); } }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 60 }, { children: [_jsx(Div, { children: submitIcon }), _jsx(Div, __assign({ h5: true, mt: 20 }, { children: "Ready to submit?" })), _jsx(Div, __assign({ body1: true, mt: 12, w: 448, textAlignCenter: true }, { children: "We didn't find anything wrong with your file. You're good to go!" })), _jsxs(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: [_jsx(Button, __assign({ w: 115, variant: "secondary", mr: 10, onClick: function () { return onCloseModal(); }, "data-test-id": "submit-modal-go-back" }, { children: "Go back" })), _jsx(Button, __assign({ w: 140, ml: 10, onClick: function () {
+    var t = useTranslation("general").t;
+    return (_jsx(Modal, __assign({ isOpen: isSubmitModalOpen, onClose: function () { return onCloseModal(); } }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 60 }, { children: [_jsx(Div, { children: submitIcon }), _jsx(Div, __assign({ h5: true, mt: 20 }, { children: t("submit_modal.title") })), _jsx(Div, __assign({ body1: true, mt: 12, w: 448, textAlignCenter: true }, { children: t("submit_modal.description") })), _jsxs(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: [_jsx(Button, __assign({ w: 115, variant: "secondary", mr: 10, onClick: function () { return onCloseModal(); }, "data-test-id": "submit-modal-go-back" }, { children: t("submit_modal.cancel") })), _jsx(Button, __assign({ w: 140, ml: 10, onClick: function () {
                                 onSubmit();
                                 onCloseModal();
-                            } }, { children: "Yes, submit" }))] }))] })) })));
+                            } }, { children: t("submit_modal.submit") }))] }))] })) })));
 };

package/lib/esm/Importer/Stepper/UnmatchedHeadersModal.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-declare type UnmatchedHeadersModalProps = {
+type UnmatchedHeadersModalProps = {
     isUnmatchedHeadersModalOpen: boolean;
     unmatchedHeadersCount: number;
     onSetStep: () => void;

package/lib/esm/Importer/Stepper/UnmatchedHeadersModal.js

@@ -13,11 +13,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div } from "../../styled";
 import { Button, Modal } from "../../common";
 import { errorIcon } from "./common/icons";
+import { useTranslation } from "react-i18next";
 export var UnmatchedHeadersModal = function (_a) {
     var isUnmatchedHeadersModalOpen = _a.isUnmatchedHeadersModalOpen, unmatchedHeadersCount = _a.unmatchedHeadersCount, onSetStep = _a.onSetStep, onCloseUnmatchedHeadersModal = _a.onCloseUnmatchedHeadersModal;
     var skipStep = function () {
         onSetStep();
         onCloseUnmatchedHeadersModal();
     };
-    return (_jsx(Modal, __assign({ isOpen: isUnmatchedHeadersModalOpen, onClose: function () { return onCloseUnmatchedHeadersModal(); } }, { children: _jsxs(Div, __assign({ p: "17px 20px" }, { children: [_jsx(Div, __assign({ textAlignCenter: true, mb: 24, mt: 5 }, { children: errorIcon })), _jsx(Div, __assign({ textAlignCenter: true, h5: true }, { children: "Unmatched Column Headers" })), _jsxs(Div, __assign({ w: 448, mt: 12, textAlignCenter: true, body1: true }, { children: [unmatchedHeadersCount === 1 ? "There is " : "There are ", unmatchedHeadersCount, " unmatched column headers. You will have to fill these out manually if you proceed."] })), _jsxs(Div, __assign({ dflex: true, centered: true, mt: 40 }, { children: [_jsx(Button, __assign({ variant: "secondary", onClick: function () { return onCloseUnmatchedHeadersModal(); }, w: 160, mr: 16 }, { children: "Assign Headers" })), _jsx(Button, __assign({ w: 83, variant: "primary", onClick: skipStep }, { children: "Skip" }))] }))] })) })));
+    var t = useTranslation("general").t;
+    return (_jsx(Modal, __assign({ isOpen: isUnmatchedHeadersModalOpen, onClose: function () { return onCloseUnmatchedHeadersModal(); } }, { children: _jsxs(Div, __assign({ p: "17px 20px" }, { children: [_jsx(Div, __assign({ textAlignCenter: true, mb: 24, mt: 5 }, { children: errorIcon })), _jsx(Div, __assign({ textAlignCenter: true, h5: true }, { children: t("unmatched_headers_modal.title") })), _jsx(Div, __assign({ w: 448, mt: 12, textAlignCenter: true, body1: true }, { children: unmatchedHeadersCount === 1
+                        ? t("unmatched_headers_modal.description_singular", {
+                            count: unmatchedHeadersCount,
+                        })
+                        : t("unmatched_headers_modal.description_plural", {
+                            count: unmatchedHeadersCount,
+                        }) })), _jsxs(Div, __assign({ dflex: true, centered: true, mt: 40 }, { children: [_jsx(Button, __assign({ variant: "secondary", onClick: function () { return onCloseUnmatchedHeadersModal(); }, w: 160, mr: 16 }, { children: t("unmatched_headers_modal.assign_headers") })), _jsx(Button, __assign({ variant: "primary", onClick: skipStep }, { children: t("unmatched_headers_modal.skip") }))] }))] })) })));
 };

package/lib/esm/Importer/Stepper/common/getEnumFieldValueMatchingsInitialValue.d.ts

@@ -1,6 +1,6 @@
 import { TemplateHeader } from "../../../types";
 import { EnumFieldValueMatchings, UploadedDataEnumFieldValues } from "../../contexts/ImporterContextProvider";
-declare type GetEnumFieldValueMatchingsInitialValueArgs = {
+type GetEnumFieldValueMatchingsInitialValueArgs = {
     uploadedDataEnumFieldValues: UploadedDataEnumFieldValues;
     templateHeaders: TemplateHeader[];
 };

package/lib/esm/Importer/Stepper/common/icons.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const submitIcon: JSX.Element;
 export declare const errorIcon: JSX.Element;

package/lib/esm/Importer/Stepper/index.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-declare type StepperProps = {
+type StepperProps = {
     stepLabels: string[];
     logoURL?: string;
 };

package/lib/esm/Importer/Stepper/index.js

@@ -26,15 +26,19 @@ import { getEnumFieldValueMatchingsInitialValue } from "./common/getEnumFieldVal
 import { Step } from "./Step";
 import { StepperSubmitModal } from "./StepperSubmitModal";
 import { UnmatchedHeadersModal } from "./UnmatchedHeadersModal";
+import { ConfirmCloseModal } from "./ConfirmCloseModal";
+import { useTranslation } from "react-i18next";
 var StepperWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  user-select: none;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  user-select: none;\n"])), function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.gray300; });
 var Logo = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 70px;\n  max-width: 300px;\n  position: absolute;\n  left: 41px;\n"], ["\n  max-height: 70px;\n  max-width: 300px;\n  position: absolute;\n  left: 41px;\n"])));
 var CloseIcon = styled(Div)(function () { return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    right: 41px;\n  "], ["\n    position: absolute;\n    right: 41px;\n  "]))); });
 export var Stepper = function (_a) {
     var stepLabels = _a.stepLabels, logoURL = _a.logoURL;
     var _b = useState(false), isUnmatchedHeadersModalOpen = _b[0], setIsUnmatchedHeadersModalOpen = _b[1];
+    var t = useTranslation("general").t;
     var _c = useState(false), isSubmitModalOpen = _c[0], setIsSubmitModalOpen = _c[1];
-    var _d = useReviewContext(), appResponse = _d.appResponse, isSubmitDisabled = _d.isSubmitDisabled, onSubmit = _d.onSubmit;
-    var _e = useImporterContext(), currentStepIndex = _e.currentStepIndex, templateHeaderMatchings = _e.templateHeaderMatchings, matcherSubstep = _e.matcherSubstep, templateHeaders = _e.templateHeaders, uploadedDataEnumFieldValues = _e.uploadedDataEnumFieldValues, setEnumFieldValueMatchings = _e.setEnumFieldValueMatchings, setMatcherSubstep = _e.setMatcherSubstep, setCurrentStepIndex = _e.setCurrentStepIndex, onClose = _e.onClose;
+    var _d = useState(false), isConfirmCloseModalOpen = _d[0], setIsConfirmCloseModalOpen = _d[1];
+    var _e = useReviewContext(), appResponse = _e.appResponse, isSubmitDisabled = _e.isSubmitDisabled, onSubmit = _e.onSubmit;
+    var _f = useImporterContext(), currentStepIndex = _f.currentStepIndex, templateHeaderMatchings = _f.templateHeaderMatchings, matcherSubstep = _f.matcherSubstep, templateHeaders = _f.templateHeaders, uploadedDataEnumFieldValues = _f.uploadedDataEnumFieldValues, setEnumFieldValueMatchings = _f.setEnumFieldValueMatchings, setMatcherSubstep = _f.setMatcherSubstep, setCurrentStepIndex = _f.setCurrentStepIndex, onClose = _f.onClose;
     var templateHeaderLabels = Object.keys(templateHeaderMatchings || []);
     var unmatchedHeadersCount = templateHeaderLabels.filter(function (templateHeaderLabel) { return !templateHeaderMatchings[templateHeaderLabel]; }).length;
     var isLastSubMatchStep = matcherSubstep === 1;
@@ -88,10 +92,13 @@ export var Stepper = function (_a) {
             var isCompleted = index < currentStepIndex;
             return (_jsxs(Div, __assign({ centered: true }, { children: [_jsx(Step, { index: index, label: label, isCompleted: isCompleted, isSelected: index === currentStepIndex }), !isLast && (_jsx(Div, __assign({ ml: 18, mr: 18, dflex: true }, { children: _jsx(ChevronRightIcon, {}) })))] }), index));
         }) })));
-    var leftButtonUI = (_jsx(Div, __assign({ w: 100 }, { children: currentStepIndex > 0 && !appResponse && (_jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: "Go back" }))) })));
-    var rightButtonUI = (_jsxs(Div, __assign({ w: 100 }, { children: [isMatchStep && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: "Continue" }))), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: isSubmitDisabled, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: "Submit" })))] })));
-    return (_jsxs(_Fragment, { children: [_jsxs(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 96, centered: true }, { children: [logoURL && _jsx(Logo, { src: logoURL, alt: "" }), _jsxs(Div, __assign({ spaceBetween: true, w: contentWidth }, { children: [leftButtonUI, _jsx(Div, __assign({ alignCenter: true }, { children: stepsUI })), rightButtonUI] })), _jsx(CloseIcon, __assign({ "data-test-id": "close-importer", centered: true, clickable: true, onClick: onClose }, { children: closeIconCondensed }))] })), _jsx(UnmatchedHeadersModal, { isUnmatchedHeadersModalOpen: isUnmatchedHeadersModalOpen, unmatchedHeadersCount: unmatchedHeadersCount, onSetStep: function () { return setStep(); }, onCloseUnmatchedHeadersModal: function () {
+    var leftButtonUI = (_jsx(Div, { children: currentStepIndex > 0 && !appResponse && (_jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: t("stepper.go_back") }))) }));
+    var rightButtonUI = (_jsxs(Div, __assign({ w: 100 }, { children: [isMatchStep && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: t("stepper.continue") }))), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: isSubmitDisabled, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: t("stepper.submit") })))] })));
+    var handleOnClose = function () {
+        setIsConfirmCloseModalOpen(true);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 96, centered: true }, { children: [logoURL && _jsx(Logo, { src: logoURL, alt: "" }), _jsxs(Div, __assign({ spaceBetween: true, w: contentWidth }, { children: [leftButtonUI, _jsx(Div, __assign({ alignCenter: true }, { children: stepsUI })), rightButtonUI] })), _jsx(CloseIcon, __assign({ "data-test-id": "close-importer", centered: true, clickable: true, onClick: handleOnClose }, { children: closeIconCondensed }))] })), _jsx(UnmatchedHeadersModal, { isUnmatchedHeadersModalOpen: isUnmatchedHeadersModalOpen, unmatchedHeadersCount: unmatchedHeadersCount, onSetStep: function () { return setStep(); }, onCloseUnmatchedHeadersModal: function () {
                     return setIsUnmatchedHeadersModalOpen(false);
-                } }), _jsx(StepperSubmitModal, { isSubmitModalOpen: isSubmitModalOpen, onCloseModal: function () { return setIsSubmitModalOpen(false); }, onSubmit: onSubmit })] }));
+                } }), _jsx(StepperSubmitModal, { isSubmitModalOpen: isSubmitModalOpen, onCloseModal: function () { return setIsSubmitModalOpen(false); }, onSubmit: onSubmit }), _jsx(ConfirmCloseModal, { isOpen: isConfirmCloseModalOpen, onClose: function () { return setIsConfirmCloseModalOpen(false); }, onCloseImporter: onClose })] }));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/Importer/TrialModeBanner.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const TrialModeBanner: () => JSX.Element;

package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterDropzone.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const ImporterDropzone: () => JSX.Element;
 export { ImporterDropzone };

package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterDropzone.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDropzone } from "react-dropzone";
 import styled, { css } from "styled-components";
-import XLSX from "xlsx";
+import * as XLSX from "xlsx";
 import { useUploaderContext } from "../UploaderContextProvider";
 import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { Div } from "../../../styled/utils";
@@ -24,19 +24,19 @@ import { theme } from "../../../styled/theme";
 import { addToast } from "../../../common/Toast";
 import { Button } from "../../../common/buttons";
 import { DragAndDropSvg, UploadIndicatorSvg } from "./backgrounds";
+import { useTranslation } from "react-i18next";
 var DragAndDropCard = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 832px;\n  height: 530px;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n  ", "\n"], ["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 832px;\n  height: 530px;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n  ", "\n"])), function (props) { return (props.isDragActive ? "-10px" : "revert"); }, theme.colors.white, theme.colors.red50, function (props) {
     return props.isDragActive && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      border: 1px solid ", ";\n      justify-content: center;\n    "], ["\n      background: ", ";\n      border: 1px solid ", ";\n      justify-content: center;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
 });
-var UploadingBg = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-image: url(", ");\n  background-position: 100% 100%;\n  background-size: cover;\n  max-width: 40px;\n  min-width: 40px;\n  max-height: 40px;\n  min-height: 40px;\n  height: 2.9vw;\n  width: 2.9vw;\n  position: relative;\n"], ["\n  background-image: url(", ");\n  background-position: 100% 100%;\n  background-size: cover;\n  max-width: 40px;\n  min-width: 40px;\n  max-height: 40px;\n  min-height: 40px;\n  height: 2.9vw;\n  width: 2.9vw;\n  position: relative;\n"])), function (props) { return props.src; });
-var DragAndDropBg = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-image: url(", ");\n  background-position: 100% 100%;\n  background-size: cover;\n  max-width: 118px;\n  min-width: 118px;\n  max-height: 68px;\n  min-height: 68px;\n  height: 5vw;\n  width: 8.2vw;\n  position: relative;\n"], ["\n  background-image: url(", ");\n  background-position: 100% 100%;\n  background-size: cover;\n  max-width: 118px;\n  min-width: 118px;\n  max-height: 68px;\n  min-height: 68px;\n  height: 5vw;\n  width: 8.2vw;\n  position: relative;\n"])), function (props) { return props.src; });
 var DropzoneUploadingContainer = styled(Div)(function (_a) {
     var _b = _a.theme, colors = _b.colors, c = _b.css;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    background: ", ";\n    border: 1px solid ", ";\n  "], ["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    background: ", ";\n    border: 1px solid ", ";\n  "])), theme.colors.blue100, theme.colors.blue500);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    background: ", ";\n    border: 1px solid ", ";\n  "], ["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    background: ", ";\n    border: 1px solid ", ";\n  "])), theme.colors.blue100, theme.colors.blue500);
 });
 var dropzoneUploadingUI = (_jsx(DropzoneUploadingContainer, __assign({ centered: true }, { children: _jsxs(Div, { children: [_jsx(Div, __assign({ centered: true, mb: 12 }, { children: UploadIndicatorSvg })), _jsx(Div, __assign({ h5: true }, { children: " Drop your file here to upload!" }))] }) })));
 var DragAndDropComponent = function (_a) {
     var openUploadFileDialog = _a.openUploadFileDialog;
-    return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(Div, __assign({ mb: 12 }, { children: DragAndDropSvg })), _jsx(Div, __assign({ h4: true }, { children: "Drag & drop your file here" })), _jsx(Div, __assign({ body1: true, textAlignCenter: true, m: 20 }, { children: "Or" })), _jsx(Button, __assign({ variant: "secondary", w: 133, isSmall: true, onClick: openUploadFileDialog }, { children: "Browse Files" }))] })));
+    var t = useTranslation("upload").t;
+    return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(Div, __assign({ mb: 12 }, { children: DragAndDropSvg })), _jsx(Div, __assign({ h4: true }, { children: t("dropzone.title") })), _jsx(Div, __assign({ body1: true, textAlignCenter: true, m: 20 }, { children: t("dropzone.description") })), _jsx(Button, __assign({ variant: "secondary", w: "fit-content", p: 12, isSmall: true, onClick: openUploadFileDialog }, { children: t("dropzone.button") }))] })));
 };
 var ImporterDropzone = function () {
     var _a = useUploaderContext(), setIsUploading = _a.setIsUploading, setFileName = _a.setFileName;
@@ -63,11 +63,12 @@ var ImporterDropzone = function () {
                 var getDataFromFile = function (fileResults) {
                     var workBook = XLSX.read(fileResults, {
                         type: "array",
+                        codepage: 65001,
                         raw: true,
                     });
                     var workBookName = workBook.SheetNames[0];
                     var sheet = workBook.Sheets[workBookName];
-                    return XLSX.utils.sheet_to_json(sheet, { header: 1 });
+                    return XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });
                 };
                 var fileData = getDataFromFile(results);
                 var headersCount = fileData[0].length;
@@ -98,11 +99,11 @@ var ImporterDropzone = function () {
         onDropRejected: onDropRejected,
         noClick: true,
         noKeyboard: true,
-        accept: ".csv,.tsv, .xls, .xlsx",
+        accept: ".csv, .tsv, .xls, .xlsx",
         maxFiles: 1,
         maxSize: 10000000,
     }), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, open = _b.open, isDragActive = _b.isDragActive;
-    return (_jsxs(DragAndDropCard, __assign({ centered: true, pRelative: true }, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), isDragActive && dropzoneUploadingUI, _jsx(DragAndDropComponent, { openUploadFileDialog: open })] })));
+    return (_jsxs(DragAndDropCard, __assign({ isDragActive: isDragActive, centered: true, pRelative: true }, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), isDragActive && dropzoneUploadingUI, _jsx(DragAndDropComponent, { openUploadFileDialog: open })] })));
 };
 export { ImporterDropzone };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/Importer/Uploader/DragAndDropImporter/backgrounds.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const DragAndDropSvg: JSX.Element;
 export declare const UploadIndicatorSvg: JSX.Element;

package/lib/esm/Importer/Uploader/DragAndDropImporter/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ErrorCard: () => JSX.Element;
 declare const DragAndDropImporter: () => JSX.Element;
 export { DragAndDropImporter };

package/lib/esm/Importer/Uploader/DragAndDropImporter/index.js

@@ -33,11 +33,13 @@ import { closeIconWithCircle, errorIcon, fileExtensionIcon, } from "../../common
 import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { useUploaderContext } from "../UploaderContextProvider";
 import { ImporterDropzone } from "./ImporterDropzone";
+import { useTranslation } from "react-i18next";
 var HeaderCardWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 24px;\n  box-sizing: border-box;\n  width: 256px;\n  overflow-y: auto;\n  ", ";\n  background: ", ";\n  max-height: 530px;\n"], ["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 24px;\n  box-sizing: border-box;\n  width: 256px;\n  overflow-y: auto;\n  ", ";\n  background: ", ";\n  max-height: 530px;\n"])), theme.colors.gray200, function (p) { return p.theme.css.scrollbarDark; }, function (p) { return p.theme.colors.white; });
 var ErrorCardContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  width: 1120px;\n  height: 550px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  justify-content: center;\n"], ["\n  border-radius: 8px;\n  width: 1120px;\n  height: 550px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  justify-content: center;\n"])), theme.colors.blue100, theme.colors.blue500);
 export var ErrorCard = function () {
     var templateError = useImporterContext().templateError;
-    return (_jsxs(ErrorCardContainer, { children: [_jsx(Div, __assign({ mb: 28 }, { children: errorIcon })), _jsx(Div, __assign({ h3: true, mb: 16 }, { children: "Something\u2019s wrong" })), _jsx(Div, __assign({ body1: true }, { children: templateError }))] }));
+    var t = useTranslation("upload").t;
+    return (_jsxs(ErrorCardContainer, { children: [_jsx(Div, __assign({ mb: 28 }, { children: errorIcon })), _jsx(Div, __assign({ h3: true, mb: 16 }, { children: t("error.title") })), _jsx(Div, __assign({ body1: true }, { children: templateError }))] }));
 };
 var HeaderListItem = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-bottom: ", "px;\n"], ["\n  margin-bottom: ", "px;\n"])), function (p) { return (p.isLast ? 0 : 8); });
 var HeadersList = function (_a) {
@@ -55,15 +57,17 @@ var HeaderCard = function (_a) {
     var optionalHeaders = templateHeaders
         .filter(function (h) { return !h.required; })
         .map(function (h) { return h.label; });
-    return (_jsx(Div, { children: _jsxs(HeaderCardWrapper, __assign({}, props, { children: [_jsx(Div, __assign({ body3: true, mb: 24 }, { children: "Make sure your document contains data similar to this:" })), requiredHeaders.length > 0 && (_jsx(HeadersList, { title: "Required Headers", headers: requiredHeaders })), optionalHeaders.length > 0 && (_jsx(HeadersList, { title: "Optional Headers", headers: optionalHeaders, mt: 30 }))] })) }));
+    var t = useTranslation("upload").t;
+    return (_jsx(Div, { children: _jsxs(HeaderCardWrapper, __assign({}, props, { children: [_jsx(Div, __assign({ body3: true, mb: 24 }, { children: t("header.title") })), requiredHeaders.length > 0 && (_jsx(HeadersList, { title: t("header.required_headers"), headers: requiredHeaders })), optionalHeaders.length > 0 && (_jsx(HeadersList, { title: t("header.optional_headers"), headers: optionalHeaders, mt: 30 }))] })) }));
 };
 var LoadingCardWrapper = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-shadow: 0px 0px 12px rgba(33, 75, 167, 0.24);\n  border-radius: 8px;\n  max-width: 544px;\n  height: 102px;\n  padding-left: 30px;\n  padding-right: 30px;\n  background: ", ";\n"], ["\n  box-shadow: 0px 0px 12px rgba(33, 75, 167, 0.24);\n  border-radius: 8px;\n  max-width: 544px;\n  height: 102px;\n  padding-left: 30px;\n  padding-right: 30px;\n  background: ", ";\n"])), function (p) { return p.theme.colors.white; });
 var LoadingCard = function () {
     var fileName = useUploaderContext().fileName;
     var resetImport = useImporterContext().resetImport;
+    var t = useTranslation("upload").t;
     var fileExtension = fileName && fileName.slice(fileName.lastIndexOf("."));
     var fileExtensionUI = (_jsxs(Div, { children: [fileExtensionIcon, _jsx(Div, __assign({ c: colors.gray900, helperText: true, mt: -26, ml: 7 }, { children: fileExtension }))] }));
-    return (_jsxs(LoadingCardWrapper, __assign({ spaceBetween: true, centered: true }, { children: [fileExtensionUI, _jsxs(Div, __assign({ mr: 30, ml: 30 }, { children: [_jsx(Div, __assign({ label2: true }, { children: fileName })), _jsx(Div, __assign({ helperText: true, c: colors.gray500 }, { children: "Uploading..." }))] })), _jsx(Div, __assign({ clickable: true, onClick: resetImport }, { children: closeIconWithCircle }))] })));
+    return (_jsxs(LoadingCardWrapper, __assign({ spaceBetween: true, centered: true }, { children: [fileExtensionUI, _jsxs(Div, __assign({ mr: 30, ml: 30 }, { children: [_jsx(Div, __assign({ label2: true }, { children: fileName })), _jsx(Div, __assign({ helperText: true, c: colors.gray500 }, { children: t("loading.title") }))] })), _jsx(Div, __assign({ clickable: true, onClick: resetImport }, { children: closeIconWithCircle }))] })));
 };
 var ImporterSection = function () {
     var _a = useImporterContext(), templateHeaders = _a.templateHeaders, templateError = _a.templateError;
@@ -71,7 +75,8 @@ var ImporterSection = function () {
 };
 var DragAndDropImporter = function () {
     var isUploading = useUploaderContext().isUploading;
-    var headerUI = (_jsxs(Div, __assign({ textAlignCenter: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16, mt: 64 }, { children: "Upload a File to Import your Data" })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "Upload any .csv, .tsv, .xls, .xlsx spreadsheet file with any set of columns as long as it has one record per row." }))] })));
+    var t = useTranslation("upload").t;
+    var headerUI = (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ textAlignCenter: true, dflex: true, centered: true }, { children: _jsx(Div, __assign({ h2: true, mb: 16, mt: 64 }, { children: t("title") })) })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: t("description") }))] }));
     return (_jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [headerUI, isUploading ? (_jsx(Div, __assign({ mt: 40 }, { children: _jsx(LoadingCard, {}) }))) : (_jsx(ImporterSection, {}))] })));
 };
 export { DragAndDropImporter };

package/lib/esm/Importer/Uploader/HeaderButtons.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const HeaderButtons: () => JSX.Element;

package/lib/esm/Importer/Uploader/HeaderButtons.js

@@ -18,12 +18,14 @@ import styled from "styled-components";
 import { Button } from "../../common/buttons";
 import { Div } from "../../styled/utils";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
+import { useTranslation } from "react-i18next";
 var HeaderButtonsWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > div {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n"], ["\n  > div {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n"])));
 export var HeaderButtons = function () {
+    var t = useTranslation("upload").t;
     var _a = useImporterContext(), setCurrentStepIndex = _a.setCurrentStepIndex, resetImport = _a.resetImport;
     var onClick = function () {
         setCurrentStepIndex(1);
     };
-    return (_jsxs(HeaderButtonsWrapper, __assign({ dflex: true, spaceBetween: true, mb: 12 }, { children: [_jsx(Button, __assign({ w: 180, isSmall: true, variant: "secondary", onClick: resetImport }, { children: "No, Re-upload file" })), _jsx(Button, __assign({ w: 142, isSmall: true, onClick: onClick }, { children: "Yes, continue" }))] })));
+    return (_jsxs(HeaderButtonsWrapper, __assign({ dflex: true, spaceBetween: true, mb: 12 }, { children: [_jsx(Button, __assign({ isSmall: true, variant: "secondary", onClick: resetImport }, { children: t("headers_preview.cancel") })), _jsx(Button, __assign({ isSmall: true, onClick: onClick }, { children: t("headers_preview.continue") }))] })));
 };
 var templateObject_1;

package/lib/esm/Importer/Uploader/HeadersPreview.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const HeadersPreview: () => JSX.Element;
 export default HeadersPreview;

package/lib/esm/Importer/Uploader/HeadersPreview.js

@@ -15,8 +15,15 @@ import Spreadsheet from "../common/Spreadsheet";
 import { getSpreadsheetRowWidth } from "../common/utils";
 import { useReviewContext } from "../Review/ReviewContextProvider";
 import { HeaderButtons } from "./HeaderButtons";
+import { useImporterContext } from "../contexts/ImporterContextProvider";
+import { useTranslation } from "react-i18next";
 var HeadersPreview = function () {
     var _a = useReviewContext(), fields = _a.previewFields, initialDataSet = _a.previewInitialDataSet;
-    return (_jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Verify Your Column Headers" })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." })), _jsx(HeaderButtons, {}), _jsx(Div, __assign({ w100: true, centered: true, mb: 36 }, { children: initialDataSet && (_jsx(Spreadsheet, { rowWidth: getSpreadsheetRowWidth(fields, 6), isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true })) }))] })));
+    var t = useTranslation("upload").t;
+    var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows;
+    return (_jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: t("headers_preview.title") })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: t("headers_preview.description") })), _jsx(HeaderButtons, {}), _jsx(Div, __assign({ w100: true, centered: true, mb: 36 }, { children: initialDataSet && (_jsx(Spreadsheet, { rowWidth: getSpreadsheetRowWidth(fields, 6), isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
+                        showCheckboxColumn: true,
+                        firstRowIsHeader: true,
+                    }, selectedRows: selectedRows, setSelectedRows: setSelectedRows })) }))] })));
 };
 export default HeadersPreview;

package/lib/esm/Importer/Uploader/UploaderContextProvider.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-declare type State = {
+type State = {
     isUploading: boolean;
     setIsUploading: React.Dispatch<boolean>;
     fileName: string;
     setFileName: React.Dispatch<string>;
 };
-declare type UploaderContextProviderProps = {
+type UploaderContextProviderProps = {
     children: JSX.Element;
 };
 export declare const UploaderContextProvider: ({ children, }: UploaderContextProviderProps) => JSX.Element;

package/lib/esm/Importer/common/AppLoading.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const AppLoading: () => JSX.Element;

package/lib/esm/Importer/common/Footer.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Footer: () => JSX.Element;
 export { Footer };

package/lib/esm/Importer/common/ImporterFonts.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ImporterFonts: () => JSX.Element;

package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider.d.ts

@@ -2,21 +2,24 @@ import React from "react";
 import { SpreadsheetOptions } from "../../..";
 import { Field, OnValidateRecord, Record, RecordDataSet } from "../../../types";
 import { ValidationState } from "./hooks";
-export declare type OnDataSetChanged = (dataSet: RecordDataSet) => void;
-export declare type OnValidationStateChanged = (state: ValidationState) => void;
-declare type State = {
+export type OnDataSetChanged = (dataSet: RecordDataSet) => void;
+export type OnValidationStateChanged = (state: ValidationState) => void;
+type State = {
     rowWidth?: number;
     data: Record[];
     fields: Field[];
     isLoading: boolean;
     isReadOnly?: boolean;
     highlightFirstRow: boolean;
+    options: SpreadsheetOptions;
     sortByFieldErrors: string;
     updateRecord: (record: Record) => void;
     setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
     setSortByFieldErrors: React.Dispatch<React.SetStateAction<string>>;
+    selectedRows: number[];
+    setSelectedRows: React.Dispatch<React.SetStateAction<number[]>>;
 } & ValidationState;
-declare type Props = {
+type Props = {
     initialDataSet: RecordDataSet;
     rowWidth?: number;
     isReadOnly?: boolean;
@@ -27,7 +30,9 @@ declare type Props = {
     onValidationStateChanged?: OnValidationStateChanged;
     onValidateRecord?: OnValidateRecord;
     onDataSetChanged?: OnDataSetChanged;
+    selectedRows: number[];
+    setSelectedRows: React.Dispatch<React.SetStateAction<number[]>>;
 };
-export declare const SpreadsheetContextProvider: ({ initialDataSet, rowWidth, fields, options, isReadOnly, highlightFirstRow, children, onValidateRecord, onDataSetChanged, onValidationStateChanged, }: Props) => JSX.Element;
+export declare const SpreadsheetContextProvider: ({ initialDataSet, rowWidth, fields, options, isReadOnly, highlightFirstRow, children, onValidateRecord, onDataSetChanged, onValidationStateChanged, selectedRows, setSelectedRows, }: Props) => JSX.Element;
 export declare const useSpreadsheetContext: () => State;
 export {};

package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider.js

@@ -26,7 +26,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import { useValidationState } from "./hooks";
 var SpreadsheetContext = createContext({});
 export var SpreadsheetContextProvider = function (_a) {
-    var initialDataSet = _a.initialDataSet, _b = _a.rowWidth, rowWidth = _b === void 0 ? 1 : _b, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, highlightFirstRow = _a.highlightFirstRow, children = _a.children, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged;
+    var initialDataSet = _a.initialDataSet, _b = _a.rowWidth, rowWidth = _b === void 0 ? 1 : _b, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, highlightFirstRow = _a.highlightFirstRow, children = _a.children, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows;
     var _c = useState(initialDataSet), dataSet = _c[0], setDataSet = _c[1];
     var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
     var _e = useState(null), sortByFieldErrors = _e[0], setSortByFieldErrors = _e[1];
@@ -70,7 +70,7 @@ export var SpreadsheetContextProvider = function (_a) {
         sortByCurrentErrorsRef.current = __assign({}, errorsRef.current);
         setSortByFieldErrors(value);
     }, []);
-    var value = __assign(__assign({ data: data, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, rowWidth: rowWidth, sortByFieldErrors: sortByFieldErrors, highlightFirstRow: highlightFirstRow, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate });
+    var value = __assign(__assign({ data: data, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, rowWidth: rowWidth, sortByFieldErrors: sortByFieldErrors, highlightFirstRow: highlightFirstRow, options: options, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows });
     return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
 };
 export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };

package/lib/esm/Importer/common/Spreadsheet/common/index.js

@@ -11,7 +11,7 @@ export var isEmpty = function (value) {
         (typeof value === "string" && value.trim().length === 0));
 };
 export var isEmail = function (value) {
-    var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
     return emailRegex.test(value);
 };
 export var isUrl = function (value) {

package/lib/esm/Importer/common/Spreadsheet/components/FieldHeader.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Field } from "../../../../types";
-export declare type FieldHeaderProps = {
+export type FieldHeaderProps = {
     field: Field;
     sortByFieldErrors: (name: string) => void;
 };

package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetData.js

@@ -32,11 +32,13 @@ import { FieldHeader } from "./FieldHeader";
 import GlobalStyle from "./GlobalStyle";
 import { inputTypes } from "./inputs";
 import { SpreadsheetRowNumbers } from "./SpreadsheetRowNumbers";
+import { SpreadsheetRowCheckboxes } from "./SpreadsheetRowCheckboxes";
 import ValidationProgress from "./ValidationProgress";
 var getItemKey = function (record) { return record._meta.id; };
 var SpreadsheetData = function () {
-    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isLoading = _a.isLoading, isReadOnly = _a.isReadOnly, rowWidth = _a.rowWidth, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors;
+    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isLoading = _a.isLoading, isReadOnly = _a.isReadOnly, rowWidth = _a.rowWidth, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options;
     var rowNumbersGridRef = useRef();
+    var rowCheckboxesGridRef = useRef();
     var sortByErrors = useCallback(function (field) {
         return setSortByFieldErrors(function (sortByFieldErrors) {
             return sortByFieldErrors === field ? null : field;
@@ -57,6 +59,10 @@ var SpreadsheetData = function () {
             var grid = rowNumbersGridRef.current;
             grid.scrollTo({ scrollTop: scrollTop });
         }
+        if (rowCheckboxesGridRef.current) {
+            var grid = rowCheckboxesGridRef.current;
+            grid.scrollTo({ scrollTop: scrollTop });
+        }
     }, []);
     var dataLength = data === null || data === void 0 ? void 0 : data.length;
     var spreadsheetHeight = useMemo(function () {
@@ -69,6 +75,6 @@ var SpreadsheetData = function () {
         });
     }, [dataLength]);
     var showValidationProgress = !isReadOnly && validationPercentage < 100;
-    return (_jsxs(Div, { children: [_jsx(GlobalStyle, {}), _jsx(Div, __assign({ h: 32 }, { children: showValidationProgress && (_jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage })) })), _jsxs(S.SpreadSheetWrapper, __assign({ h: spreadsheetHeight, dflex: true, w: 1400 }, { children: [_jsx(SpreadsheetRowNumbers, { gridRef: rowNumbersGridRef, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight }), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, h: spreadsheetHeight, rowWidth: rowWidth, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey })] }))] }));
+    return (_jsxs(S.SpreadSheetData, { children: [_jsx(GlobalStyle, {}), _jsx(Div, __assign({ h: 32 }, { children: showValidationProgress && (_jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage })) })), _jsxs(S.SpreadSheetWrapper, __assign({ h: spreadsheetHeight, dflex: true }, { children: [options.showCheckboxColumn && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight, firstRowIsHeader: options.firstRowIsHeader })), _jsx(SpreadsheetRowNumbers, { gridRef: rowNumbersGridRef, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight }), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, h: spreadsheetHeight, rowWidth: rowWidth, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey })] }))] }));
 };
 export default React.memo(SpreadsheetData, areEqual);

package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetRowCheckboxes.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { DivCSSProps } from "../../../../styled/utils";
+type Props = {
+    height?: number;
+    spreadsheetHasXScroll?: boolean;
+    gridRef: React.MutableRefObject<any>;
+    firstRowIsHeader?: boolean;
+} & DivCSSProps;
+export declare const SpreadsheetRowCheckboxes: ({ height, spreadsheetHasXScroll, gridRef, firstRowIsHeader, ...props }: Props) => JSX.Element;
+export {};