fuse-importer 0.0.1-staging

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

@@ -0,0 +1,118 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled, { css } from "styled-components";
+import { Button, ChevronRightIcon, closeIconCondensed } from "../../common";
+import { Div } from "../../styled/utils";
+import { ColumnType } from "../Matcher/common/types";
+import { useReviewContext } from "../Review/ReviewContextProvider";
+import { useImporterContext } from "../contexts/ImporterContextProvider";
+import { ConfirmCloseModal } from "./ConfirmCloseModal";
+import { Step } from "./Step";
+import { StepperSubmitModal } from "./StepperSubmitModal";
+import { UnmatchedHeadersModal } from "./UnmatchedHeadersModal";
+import { getEnumFieldValueMatchingsInitialValue } from "./common/getEnumFieldValueMatchingsInitialValue";
+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 StepperContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  padding-left: 32px;\n  padding-right: 32px;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  padding-left: 32px;\n  padding-right: 32px;\n  width: 100%;\n"])));
+var Steps = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  @media (max-width: 630px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 630px) {\n    display: none;\n  }\n"])));
+var Logo = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-height: 70px;\n  max-width: 300px;\n"], ["\n  max-height: 70px;\n  max-width: 300px;\n"])));
+var StepperButtonContainer = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: 1;\n  gap: 32px;\n  justify-content: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  flex: 1;\n  gap: 32px;\n  justify-content: ", ";\n"])), function (_a) {
+    var align = _a.align;
+    return align === "left" ? "flex-start" : "flex-end";
+});
+var GoBackButtonWrapper = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  @media (max-width: 740px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 740px) {\n    display: none;\n  }\n"])));
+var CloseIcon = styled(Div)(function () { return css(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""]))); });
+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 = useState(false), isConfirmCloseModalOpen = _d[0], setIsConfirmCloseModalOpen = _d[1];
+    var _e = useReviewContext(), appResponse = _e.appResponse, isSubmitDisabled = _e.isSubmitDisabled, onSubmit = _e.onSubmit;
+    var _f = useImporterContext(), initialRecords = _f.initialRecords, 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, isUsingManualImport = _f.isUsingManualImport, resetImporterWhenUsingManualImport = _f.resetImporterWhenUsingManualImport, uploadedData = _f.uploadedData;
+    var templateHeaderLabels = Object.keys(templateHeaderMatchings || []);
+    var unmatchedHeadersCount = templateHeaderLabels.filter(function (templateHeaderLabel) { return !templateHeaderMatchings[templateHeaderLabel]; }).length;
+    var isLastSubMatchStep = matcherSubstep === 1;
+    var setStep = function () {
+        var templateHasEnumFields = !!(templateHeaders === null || templateHeaders === void 0 ? void 0 : templateHeaders.find(function (header) { return header.column_type === ColumnType.enum; }));
+        if (templateHasEnumFields) {
+            var _enumFieldValueMatchings = getEnumFieldValueMatchingsInitialValue({
+                uploadedDataEnumFieldValues: uploadedDataEnumFieldValues,
+                templateHeaders: templateHeaders,
+            });
+            var anyTemplateEnumFieldsMatched = Object.keys(_enumFieldValueMatchings).length > 0;
+            if (anyTemplateEnumFieldsMatched) {
+                setEnumFieldValueMatchings(_enumFieldValueMatchings);
+                setMatcherSubstep(1);
+            }
+            else {
+                setCurrentStepIndex(2);
+            }
+        }
+        else {
+            setCurrentStepIndex(2);
+        }
+    };
+    var openUnmatchedModal = function () {
+        unmatchedHeadersCount ? setIsUnmatchedHeadersModalOpen(true) : setStep();
+    };
+    var continueToNextStep = function () {
+        if (isVerifyStep) {
+            setCurrentStepIndex(1);
+        }
+        else if (isLastSubMatchStep) {
+            setIsUnmatchedHeadersModalOpen(false);
+            setCurrentStepIndex(2);
+        }
+        else {
+            openUnmatchedModal();
+        }
+    };
+    var goBack = function () {
+        if (isUsingManualImport.current) {
+            return resetImporterWhenUsingManualImport();
+        }
+        var isMatchingColumnValues = matcherSubstep === 1;
+        var isInMachStep = currentStepIndex === 1;
+        var shouldBackOnlyMatcherSubStep = isMatchingColumnValues && isInMachStep;
+        if (shouldBackOnlyMatcherSubStep) {
+            setMatcherSubstep(matcherSubstep - 1);
+        }
+        else {
+            setCurrentStepIndex(currentStepIndex - 1);
+        }
+    };
+    var handleOnClose = function () {
+        setIsConfirmCloseModalOpen(true);
+    };
+    var isVerifyStep = currentStepIndex === 0 && !!uploadedData;
+    var isMatchStep = currentStepIndex === 1;
+    var isReviewStep = currentStepIndex === 2;
+    var stepsUI = (_jsx(Div, __assign({ dflex: true, centered: true }, { children: !initialRecords &&
+            stepLabels.map(function (label, index) {
+                var isLast = index === stepLabels.length - 1;
+                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({ style: { flex: 1 } }, { children: !initialRecords && (_jsxs(StepperButtonContainer, __assign({ align: "left" }, { children: [logoURL && (_jsx(Div, __assign({ forDesktop: true }, { children: _jsx(Logo, { src: logoURL, alt: "" }) }))), currentStepIndex > 0 && !appResponse && (_jsx(GoBackButtonWrapper, { children: _jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: t("stepper.go_back") })) }))] }))) })));
+    var rightButtonUI = (_jsxs(StepperButtonContainer, __assign({ align: "right" }, { children: [(isMatchStep || isVerifyStep) && (_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") }))), _jsx(CloseIcon, __assign({ "data-test-id": "close-importer", centered: true, clickable: true, onClick: handleOnClose }, { children: closeIconCondensed }))] })));
+    return (_jsxs(_Fragment, { children: [_jsx(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 72, centered: true }, { children: _jsxs(StepperContainer, { children: [leftButtonUI, _jsx(Steps, __assign({ alignCenter: true }, { children: stepsUI })), rightButtonUI] }) })), _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(ConfirmCloseModal, { isOpen: isConfirmCloseModalOpen, onClose: function () { return setIsConfirmCloseModalOpen(false); }, onCloseImporter: onClose })] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -0,0 +1 @@
+export declare const TrialModeBanner: () => JSX.Element;

package/lib/esm/Importer/TrialModeBanner.js

@@ -0,0 +1,22 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "../common";
+import { Div, Span, theme } from "../styled";
+import { exclamationPointIcon } from "./common/icons";
+import { useImporterContext } from "./contexts/ImporterContextProvider";
+export var TrialModeBanner = function () {
+    var inTrialMode = useImporterContext().inTrialMode;
+    return (_jsx(_Fragment, { children: inTrialMode && (_jsxs(Div, __assign({ bg: theme.colors.orange100, h: 80, dflex: true, alignCenter: true, justifyCenter: true }, { children: [_jsx(Div, __assign({ ml: 33, mr: 8 }, { children: exclamationPointIcon })), _jsx(Span, __assign({ mr: 16 }, { children: "You're currently in Trial mode. Subscribe to a plan to deploy to your website." })), _jsx(Button, __assign({ w: 120, br: 8, variant: "secondary", onClick: function () {
+                        window.location.href = "".concat(process.env.REACT_APP_API_BASE_URL, "/account/billing");
+                    } }, { children: "Select plan" }))] }))) }));
+};

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

@@ -0,0 +1,3 @@
+export declare const ImporterSectionContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
+export declare const ErrorCardContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
+export declare const LoadingCardWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;

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

@@ -0,0 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+import { theme } from "../../../styled/theme";
+import { Div } from "../../../styled/utils";
+export var ImporterSectionContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 16px;\n  width: 100%;\n  height: 100%;\n\n  @media (max-width: 1050px) {\n    flex-direction: column;\n  }\n"], ["\n  display: flex;\n  gap: 16px;\n  width: 100%;\n  height: 100%;\n\n  @media (max-width: 1050px) {\n    flex-direction: column;\n  }\n"])));
+export var ErrorCardContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  align-self: center;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px dashed ", ";\n  display: flex;\n  flex-direction: column;\n  height: 550px;\n  justify-content: center;\n  width: 1120px;\n"], ["\n  align-items: center;\n  align-self: center;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px dashed ", ";\n  display: flex;\n  flex-direction: column;\n  height: 550px;\n  justify-content: center;\n  width: 1120px;\n"])), theme.colors.blue100, theme.colors.blue500);
+export var LoadingCardWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __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 templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,2 @@
+declare const ImporterDropzone: () => JSX.Element;
+export { ImporterDropzone };

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

@@ -0,0 +1,111 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { useDropzone } from "react-dropzone";
+import styled, { css } from "styled-components";
+import * as XLSX from "xlsx";
+import { useUploaderContext } from "../UploaderContextProvider";
+import { useImporterContext } from "../../contexts/ImporterContextProvider";
+import { Div } from "../../../styled/utils";
+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: 100%;\n  height: 100%;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n\n  @media (max-width: 1050px) {\n    padding: 24px;\n    width: auto;\n  }\n\n  ", "\n"], ["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 100%;\n  height: 100%;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n\n  @media (max-width: 1050px) {\n    padding: 24px;\n    width: auto;\n  }\n\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 DropzoneUploadingContainer = styled(Div)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, c = _b.css;
+    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;
+    var t = useTranslation("upload").t;
+    var manualDataImportSelected = useImporterContext().manualDataImportSelected;
+    return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(Div, __assign({ mb: 12 }, { children: DragAndDropSvg })), _jsx(Div, __assign({ h5: true }, { children: t("dropzone.title") })), _jsx(Button, __assign({ mt: 20, variant: "secondary", w: "fit-content", p: 12, isSmall: true, onClick: openUploadFileDialog }, { children: t("dropzone.button") })), _jsx(Div, __assign({ body1: true, textAlignCenter: true, m: 4, mt: 24 }, { children: t("dropzone.description") })), _jsx(Div, { children: _jsx(Button, __assign({ variant: "link", w: "fit-content", p: 12, isSmall: true, onClick: manualDataImportSelected }, { children: t("dropzone.enter_data_manually") })) })] })));
+};
+var ImporterDropzone = function () {
+    var _a = useUploaderContext(), setIsUploading = _a.setIsUploading, setFileName = _a.setFileName;
+    var setUploadedData = useImporterContext().setUploadedData;
+    var validHeadersCount = function (headersLength) {
+        var headersCountLimit = 60;
+        if (headersLength > headersCountLimit) {
+            addToast("File cannot contain more than ".concat(headersCountLimit, " columns"), "error");
+            return false;
+        }
+        else {
+            return true;
+        }
+    };
+    var onDrop = function (acceptedFiles) {
+        acceptedFiles.forEach(function (file) {
+            setIsUploading(true);
+            setFileName(file.name);
+            var reader = new FileReader();
+            reader.onabort = function () { return console.log("file reading was aborted"); };
+            reader.onerror = function () { return console.log("file reading has failed"); };
+            reader.onload = function (event) {
+                var _a;
+                var results = event.target.result;
+                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, raw: false });
+                };
+                var fileData = getDataFromFile(results);
+                var headersCount = (_a = fileData[0]) === null || _a === void 0 ? void 0 : _a.length;
+                if (validHeadersCount(headersCount)) {
+                    setUploadedData(fileData);
+                }
+                setIsUploading(false);
+            };
+            reader.readAsArrayBuffer(file);
+        });
+    };
+    var onDropRejected = function (rejectedFiles) {
+        var errorMessages = rejectedFiles.map(function (file) {
+            if (file.errors[0].code === "file-too-large") {
+                return "Maximum file size is 10MB";
+            }
+            else {
+                return file.errors[0].message;
+            }
+        });
+        var uniqueMessages = Array.from(new Set(errorMessages));
+        uniqueMessages.forEach(function (message) {
+            addToast(message, "error");
+        });
+    };
+    var _b = useDropzone({
+        onDrop: onDrop,
+        onDropRejected: onDropRejected,
+        noClick: true,
+        noKeyboard: true,
+        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({ 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;

package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterSectionHeader/ImporterSectionHeader.styles.d.ts

@@ -0,0 +1,7 @@
+type HeaderListItemProps = {
+    isLast: boolean;
+};
+export declare const HeaderCardWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../../styled/utils").CSSProps, never>;
+export declare const HeaderCardContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../../styled/utils").CSSProps, never>;
+export declare const HeaderListItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../../styled/utils").CSSProps & HeaderListItemProps, never>;
+export {};

package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterSectionHeader/ImporterSectionHeader.styles.js

@@ -0,0 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+import { Div } from "../../../../styled/utils";
+import { theme } from "../../../../styled/theme";
+export var HeaderCardWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: fit-content;\n"], ["\n  height: fit-content;\n"])));
+export var HeaderCardContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 24px;\n  box-sizing: border-box;\n  overflow-y: auto;\n  ", ";\n  background: ", ";\n  max-height: 596px;\n  width: 332px;\n\n  @media (max-width: 1050px) {\n    width: 100%;\n  }\n"], ["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 24px;\n  box-sizing: border-box;\n  overflow-y: auto;\n  ", ";\n  background: ", ";\n  max-height: 596px;\n  width: 332px;\n\n  @media (max-width: 1050px) {\n    width: 100%;\n  }\n"])), theme.colors.gray200, function (p) { return p.theme.css.scrollbarDark; }, function (p) { return p.theme.colors.white; });
+export 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 templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,7 @@
+import { DivCSSProps } from "../../../../styled/utils";
+import { TemplateHeader } from "../../../../types";
+type HeaderCardProps = {
+    templateHeaders: TemplateHeader[];
+} & DivCSSProps;
+export declare const HeaderCard: ({ templateHeaders, ...props }: HeaderCardProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,44 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div } from "../../../../styled/utils";
+import { useTranslation } from "react-i18next";
+import * as S from "./ImporterSectionHeader.styles";
+var HeadersList = function (_a) {
+    var title = _a.title, headers = _a.headers, props = __rest(_a, ["title", "headers"]);
+    return (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ label3: true }, props, { children: title })), headers.map(function (header, index) {
+                var isLast = index === headers.length - 1;
+                return (_jsx(S.HeaderListItem, __assign({ body1: true, isLast: isLast, mt: 16 }, { children: header }), index));
+            })] }));
+};
+export var HeaderCard = function (_a) {
+    var templateHeaders = _a.templateHeaders, props = __rest(_a, ["templateHeaders"]);
+    var requiredHeaders = templateHeaders
+        .filter(function (h) { return h.required; })
+        .map(function (h) { return "".concat(h.label, "*"); });
+    var optionalHeaders = templateHeaders
+        .filter(function (h) { return !h.required; })
+        .map(function (h) { return h.label; });
+    var t = useTranslation("upload").t;
+    return (_jsx(S.HeaderCardWrapper, { children: _jsxs(S.HeaderCardContainer, __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 }))] })) }));
+};

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

@@ -0,0 +1,2 @@
+export declare const DragAndDropSvg: JSX.Element;
+export declare const UploadIndicatorSvg: JSX.Element;

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

@@ -0,0 +1,14 @@
+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";
+export var DragAndDropSvg = (_jsxs("svg", __assign({ width: "164", height: "96", viewBox: "0 0 164 96", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("g", { children: _jsx("path", { d: "M70.5229 74.0865C70.7599 74.9708 70.2351 75.8798 69.3508 76.1167L20.8309 89.1176C19.9466 89.3545 19.0377 88.8297 18.8007 87.9455L1.0238 21.6011C0.786859 20.7168 1.31164 19.8079 2.19593 19.5709L25.801 13.246C26.2207 13.1335 26.6678 13.1904 27.0461 13.4043L58.5194 31.2049C58.9065 31.4238 59.1894 31.7891 59.3045 32.2187L70.5229 74.0865Z", fill: "url(#paint0_linear_1658_47819)" }) }), _jsx("g", { children: _jsx("path", { d: "M26.1516 13.1523L58.22 31.2361L34.3354 37.6359C33.4988 37.8601 32.6389 37.3636 32.4148 36.527L26.1516 13.1523Z", fill: "#E8CF81" }) }), _jsx("g", { children: _jsx("path", { d: "M145.75 88.0883C145.511 88.9799 144.594 89.509 143.703 89.2701L95.2092 76.2763C94.3176 76.0374 93.7885 75.121 94.0274 74.2294L111.797 7.9115C112.036 7.0199 112.953 6.49079 113.844 6.72969L137.431 13.0496C137.854 13.163 138.216 13.4381 138.438 13.8155L156.789 44.9582C157.016 45.3445 157.079 45.8061 156.963 46.2392L145.75 88.0883Z", fill: "url(#paint1_linear_1658_47819)" }) }), _jsx("g", { children: _jsx("path", { d: "M138.09 13.2272L156.82 44.9224L132.676 38.4529C131.983 38.2672 131.571 37.5548 131.757 36.8617L138.09 13.2272Z", fill: "#68CECA" }) }), _jsx("g", { children: _jsx("path", { d: "M118.113 93.183C118.113 94.7388 116.852 96.0001 115.296 96.0001L49.5348 96.0001C47.979 96.0001 46.7177 94.7388 46.7177 93.183L46.7177 2.81711C46.7177 1.2613 47.979 6.91772e-05 49.5348 6.87584e-05L81.2634 6.02178e-05C82.0018 6.00191e-05 82.7108 0.290033 83.2376 0.807552L117.271 34.2418C117.81 34.7715 118.113 35.4956 118.113 36.2514L118.113 93.183Z", fill: "url(#paint2_linear_1658_47819)" }) }), _jsx("g", { children: _jsx("path", { d: "M81.9936 0.00131226L117.054 34.3579H83.8716C82.8344 34.3579 81.9936 33.5171 81.9936 32.4799L81.9936 0.00131226Z", fill: "#6FE7E2" }) }), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "paint0_linear_1658_47819", x1: "40.3734", y1: "13.1259", x2: "-7.01613", y2: "51.8154", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#D0A617" }), _jsx("stop", { offset: "1", stopColor: "#FEE18F" })] })), _jsxs("linearGradient", __assign({ id: "paint1_linear_1658_47819", x1: "119.456", y1: "82.7732", x2: "171.105", y2: "7.1263", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#006BA8" }), _jsx("stop", { offset: "1", stopColor: "#01FFD7" })] })), _jsxs("linearGradient", __assign({ id: "paint2_linear_1658_47819", x1: "82.4156", y1: "96.0001", x2: "103.774", y2: "10.7256", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#24D2EA" }), _jsx("stop", { offset: "1", stopColor: "#10F9EB" })] }))] })] })));
+export var UploadIndicatorSvg = (_jsxs("svg", __assign({ width: "96", height: "96", viewBox: "0 0 96 96", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("g", { children: _jsx("path", { d: "M1 79.3761L95.7523 79.3762L48.3762 32L1 79.3761Z", fill: "url(#paint0_linear_1630_46301)" }) }), _jsx("g", { children: _jsx("path", { d: "M1 55.3761L95.7523 55.3762L48.3762 8L1 55.3761Z", fill: "url(#paint1_linear_1630_46301)" }) }), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "paint0_linear_1630_46301", x1: "48.3761", y1: "32", x2: "40.1872", y2: "94.8016", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#88CDF3" }), _jsx("stop", { offset: "1", stopColor: "#00C7A8", stopOpacity: "0.895833" })] })), _jsxs("linearGradient", __assign({ id: "paint1_linear_1630_46301", x1: "78.6058", y1: "-24.6165", x2: "64.3686", y2: "81.3108", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#0098B9" }), _jsx("stop", { offset: "1", stopColor: "#00A8CD", stopOpacity: "0.895833" })] }))] })] })));

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

@@ -0,0 +1,3 @@
+export declare const ErrorCard: () => JSX.Element;
+declare const DragAndDropImporter: () => JSX.Element;
+export { DragAndDropImporter };

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

@@ -0,0 +1,45 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { colors } from "../../../styled/theme/colorPalette";
+import { Div } from "../../../styled/utils";
+import { closeIconWithCircle, errorIcon, fileExtensionIcon, } from "../../common/icons";
+import { useImporterContext } from "../../contexts/ImporterContextProvider";
+import { useUploaderContext } from "../UploaderContextProvider";
+import { ImporterDropzone } from "./ImporterDropzone";
+import { useTranslation } from "react-i18next";
+import { HeaderCard } from "./ImporterSectionHeader";
+import * as S from "./DragAndDropImporter.styles";
+export var ErrorCard = function () {
+    var templateError = useImporterContext().templateError;
+    var t = useTranslation("upload").t;
+    return (_jsxs(S.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 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(S.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;
+    return templateError ? (_jsx(ErrorCard, {})) : (_jsx(_Fragment, { children: templateHeaders && (_jsxs(S.ImporterSectionContainer, { children: [_jsx(ImporterDropzone, {}), _jsx(HeaderCard, { templateHeaders: templateHeaders })] })) }));
+};
+var DragAndDropImporter = function () {
+    var isUploading = useUploaderContext().isUploading;
+    var t = useTranslation("upload").t;
+    var HeaderUI = function () { return (_jsxs(_Fragment, { children: [_jsx(Div, { children: _jsx(Div, __assign({ h2: true, mb: 16, mt: 40 }, { children: t("title") })) }), _jsx(Div, __assign({ body1: true, mb: 48 }, { children: t("description") }))] })); };
+    return (_jsx(Div, __assign({ flexColumn: true, h100: true }, { children: _jsxs(Div, __assign({ flexColumn: true, pl: 32, pr: 32, pb: 64, h100: true }, { children: [_jsx(HeaderUI, {}), isUploading ? (_jsx(Div, __assign({ mt: 40, justifyCenter: true }, { children: _jsx(LoadingCard, {}) }))) : (_jsx(ImporterSection, {}))] })) })));
+};
+export { DragAndDropImporter };

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

@@ -0,0 +1 @@
+export declare const HeaderButtons: () => JSX.Element;

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

@@ -0,0 +1,28 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 } from "react/jsx-runtime";
+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-right: 8px;\n  }\n"], ["\n  > div {\n    margin-right: 8px;\n  }\n"])));
+export var HeaderButtons = function () {
+    var t = useTranslation("upload").t;
+    var resetImport = useImporterContext().resetImport;
+    return (_jsx(HeaderButtonsWrapper, __assign({ dflex: true, ml: 12 }, { children: _jsx(Button, __assign({ isSmall: true, variant: "secondary", onClick: resetImport }, { children: t("headers_preview.cancel") })) })));
+};
+var templateObject_1;

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

@@ -0,0 +1,2 @@
+declare const HeadersPreview: () => JSX.Element;
+export default HeadersPreview;

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

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { Div } from "../../styled/utils";
+import { useReviewContext } from "../Review/ReviewContextProvider";
+import Spreadsheet from "../common/Spreadsheet";
+import { useImporterContext } from "../contexts/ImporterContextProvider";
+import { HeaderButtons } from "./HeaderButtons";
+var HeaderContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 32px;\n\n  @media (max-width: 1050px) {\n    margin-left: 0px;\n\n    > div:first-of-type {\n      text-align: center;\n    }\n\n    div:last-of-type {\n      margin-left: 0px;\n    }\n  }\n"], ["\n  margin-left: 32px;\n\n  @media (max-width: 1050px) {\n    margin-left: 0px;\n\n    > div:first-of-type {\n      text-align: center;\n    }\n\n    div:last-of-type {\n      margin-left: 0px;\n    }\n  }\n"])));
+var DescriptionAndButtons = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  @media (max-width: 1050px) {\n    flex-direction: column;\n    gap: 16px;\n  }\n"], ["\n  @media (max-width: 1050px) {\n    flex-direction: column;\n    gap: 16px;\n  }\n"])));
+var HeadersPreview = function () {
+    var _a = useReviewContext(), fields = _a.previewFields, initialDataSet = _a.previewInitialDataSet;
+    var t = useTranslation("upload").t;
+    var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows;
+    return (_jsxs(Div, __assign({ flexColumn: true, h100: true }, { children: [_jsxs(HeaderContainer, { children: [_jsx(Div, __assign({ h2: true, mt: 40, mb: 16 }, { children: t("headers_preview.title") })), _jsxs(DescriptionAndButtons, __assign({ body1: true, mb: 24, alignCenter: true }, { children: [t("headers_preview.description"), _jsx(HeaderButtons, {})] }))] }), _jsx(Div, __assign({ w100: true, h100: true, justifyCenter: true }, { children: initialDataSet && (_jsx(Spreadsheet, { isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
+                        showCheckboxColumn: true,
+                        firstRowIsHeader: true,
+                    }, selectedRows: selectedRows, setSelectedRows: setSelectedRows })) }))] })));
+};
+export default HeadersPreview;
+var templateObject_1, templateObject_2;

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

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

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

@@ -0,0 +1,27 @@
+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 } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+var UploaderContext = createContext({});
+export var UploaderContextProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState(false), isUploading = _b[0], setIsUploading = _b[1];
+    var _c = useState(null), fileName = _c[0], setFileName = _c[1];
+    var value = {
+        isUploading: isUploading,
+        setIsUploading: setIsUploading,
+        fileName: fileName,
+        setFileName: setFileName,
+    };
+    return (_jsx(UploaderContext.Provider, __assign({ value: value }, { children: children })));
+};
+export var useUploaderContext = function () { return useContext(UploaderContext); };

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { areEqual } from "react-window";
+import { useImporterContext } from "../contexts/ImporterContextProvider";
+import { DragAndDropImporter } from "./DragAndDropImporter";
+import HeadersPreview from "./HeadersPreview";
+import { UploaderContextProvider } from "./UploaderContextProvider";
+var UploaderWithContext = function () {
+    var uploadedData = useImporterContext().uploadedData;
+    return _jsx(_Fragment, { children: uploadedData ? _jsx(HeadersPreview, {}) : _jsx(DragAndDropImporter, {}) });
+};
+var Uploader = function () { return (_jsx(UploaderContextProvider, { children: _jsx(UploaderWithContext, {}) })); };
+export default React.memo(Uploader, areEqual);

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

@@ -0,0 +1 @@
+export declare const AppLoading: () => JSX.Element;

package/lib/esm/Importer/common/AppLoading.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Div } from "../../styled";
+import { Spinner } from "../../common";
+var LoadingBackdrop = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  background: ", ";\n  opacity: 0.6;\n"], ["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  background: ", ";\n  opacity: 0.6;\n"])), function (props) { return props.theme.colors.white; });
+var ModalContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000000000;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  div {\n    pointer-events: auto;\n  }\n"], ["\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000000000;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  div {\n    pointer-events: auto;\n  }\n"])));
+var LoaderContainer = styled(ModalContainer)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
+export var AppLoading = function () { return (_jsxs(_Fragment, { children: [_jsx(LoadingBackdrop, {}), _jsx(LoaderContainer, { children: _jsx(Div, __assign({ w: 300 }, { children: _jsx(Div, __assign({ pRelative: true }, { children: _jsx(Spinner, {}) })) })) })] })); };
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,2 @@
+declare const Footer: () => JSX.Element;
+export { Footer };