fuse-importer 0.17.0 → 0.22.0

package/lib/esm/Importer/Stepper.js

@@ -31,15 +31,15 @@ var StepIndexWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __mak
     return p.isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 32px;\n      width: 32px;\n      border: solid 1px ", ";\n      color: ", ";\n      background-color: ", ";\n    "], ["\n      height: 32px;\n      width: 32px;\n      border: solid 1px ", ";\n      color: ", ";\n      background-color: ", ";\n    "])), function (p) { return p.theme.colors.blue500; }, function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.blue500; });
 });
 var StepperWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  user-select: none;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  user-select: none;\n  border-bottom: 1px solid ", ";\n"])), function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.gray300; });
-var Logo = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-height: 70px;\n  position: absolute;\n  left: 41px;\n"], ["\n  max-height: 70px;\n  position: absolute;\n  left: 41px;\n"])));
+var Logo = styled.img(templateObject_4 || (templateObject_4 = __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 StepIndex = function (_a) {
     var index = _a.index, isSelected = _a.isSelected, isCompleted = _a.isCompleted;
-    return (_jsx(_Fragment, { children: isCompleted ? (_jsx(Div, __assign({ centered: true, body2: true, bold: true, mr: 8 }, { children: whiteCheckIcon }), void 0)) : (_jsx(StepIndexWrapper, __assign({ centered: true, body2: true, bold: true, mr: 8, isSelected: isSelected }, { children: index }), void 0)) }, void 0));
+    return (_jsx(_Fragment, { children: isCompleted ? (_jsx(Div, __assign({ centered: true, body2: true, bold: true, mr: 8 }, { children: whiteCheckIcon }))) : (_jsx(StepIndexWrapper, __assign({ centered: true, body2: true, bold: true, mr: 8, isSelected: isSelected }, { children: index }))) }));
 };
 var Step = function (_a) {
     var index = _a.index, label = _a.label, isSelected = _a.isSelected, isCompleted = _a.isCompleted;
     var isActive = isCompleted || isSelected;
-    return (_jsxs(Div, __assign({ centered: true, buttonText: true, c: isActive ? colors.text : colors.gray400 }, { children: [_jsx(StepIndex, { index: index + 1, isSelected: isSelected, isCompleted: isCompleted }, void 0), label] }), void 0));
+    return (_jsxs(Div, __assign({ centered: true, buttonText: true, c: isActive ? colors.text : colors.gray400 }, { children: [_jsx(StepIndex, { index: index + 1, isSelected: isSelected, isCompleted: isCompleted }), label] })));
 };
 var getEnumFieldValueMatchingsInitialValue = function (_a) {
     var uploadedDataEnumFieldValues = _a.uploadedDataEnumFieldValues, templateHeaders = _a.templateHeaders;
@@ -67,15 +67,15 @@ var Stepper = function (_a) {
     var _c = useSpreadsheetReviewContext(), appResponse = _c.appResponse, isSpreadsheetReviewComplete = _c.isSpreadsheetReviewComplete, onSubmit = _c.onSubmit;
     var _d = useState(false), isSubmitModalOpen = _d[0], setIsSubmitModalOpen = _d[1];
     var _e = useImporterContext(), currentStepIndex = _e.currentStepIndex, setEnumFieldValueMatchings = _e.setEnumFieldValueMatchings, setCurrentStepIndex = _e.setCurrentStepIndex, templateHeaderMatchings = _e.templateHeaderMatchings, matcherSubstep = _e.matcherSubstep, setMatcherSubstep = _e.setMatcherSubstep, templateHeaders = _e.templateHeaders, uploadedDataEnumFieldValues = _e.uploadedDataEnumFieldValues, onClose = _e.onClose;
-    var submitModalUI = (_jsx(Modal, __assign({ isOpen: isSubmitModalOpen, onClose: function () { return setIsSubmitModalOpen(false); } }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 60 }, { children: [_jsx(Div, { children: submitSvg }, void 0), _jsx(Div, __assign({ h5: true, mt: 20 }, { children: "Ready to submit?" }), void 0), _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!" }), void 0), _jsxs(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: [_jsx(Button, __assign({ w: 115, variant: "secondary", mr: 10, onClick: function () { return setIsSubmitModalOpen(false); } }, { children: "Go back" }), void 0), _jsx(Button, __assign({ w: 140, ml: 10, onClick: function () {
+    var submitModalUI = (_jsx(Modal, __assign({ isOpen: isSubmitModalOpen, onClose: function () { return setIsSubmitModalOpen(false); } }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 60 }, { children: [_jsx(Div, { children: submitSvg }), _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 setIsSubmitModalOpen(false); } }, { children: "Go back" })), _jsx(Button, __assign({ w: 140, ml: 10, onClick: function () {
                                 onSubmit();
                                 setIsSubmitModalOpen(false);
-                            } }, { children: "Yes, submit" }), void 0)] }), void 0)] }), void 0) }), void 0));
+                            } }, { children: "Yes, submit" }))] }))] })) })));
     var stepsUI = (_jsx(Div, __assign({ dflex: true, centered: true }, { children: 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 }, void 0), !isLast && (_jsx(Div, __assign({ ml: 18, mr: 18, dflex: true }, { children: _jsx(ChevronRightIcon, {}, void 0) }), void 0))] }), index));
-        }) }), void 0));
+            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 templateHeaderLabels = Object.keys(templateHeaderMatchings || []);
     var unmatchedHeadersCount = templateHeaderLabels.filter(function (templateHeaderLabel) { return !templateHeaderMatchings[templateHeaderLabel]; }).length;
     var isLastSubMatchStep = matcherSubstep === 1;
@@ -112,19 +112,26 @@ var Stepper = function (_a) {
         }
     };
     var goBack = function () {
-        setMatcherSubstep(0);
-        setCurrentStepIndex(currentStepIndex - 1);
+        var isMatchingColumnValues = matcherSubstep === 1;
+        var isInMachStep = currentStepIndex === 1;
+        var shouldBackOnlyMatcherSubStep = isMatchingColumnValues && isInMachStep;
+        if (shouldBackOnlyMatcherSubStep) {
+            setMatcherSubstep(matcherSubstep - 1);
+        }
+        else {
+            setCurrentStepIndex(currentStepIndex - 1);
+        }
     };
     var skipStep = function () {
         setStep();
         setIsUnmatchedHeadersModalOpen(false);
     };
-    var unmatchedHeadersModalUI = (_jsx(Modal, __assign({ isOpen: isUnmatchedHeadersModalOpen, onClose: function () { return setIsUnmatchedHeadersModalOpen(false); } }, { children: _jsxs(Div, __assign({ p: "17px 20px" }, { children: [_jsx(Div, __assign({ textAlignCenter: true, mb: 24, mt: 5 }, { children: errorIcon }), void 0), _jsx(Div, __assign({ textAlignCenter: true, h5: true }, { children: "Unmatched Column Headers" }), void 0), _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."] }), void 0), _jsxs(Div, __assign({ dflex: true, centered: true, mt: 40 }, { children: [_jsx(Button, __assign({ variant: "secondary", onClick: function () { return setIsUnmatchedHeadersModalOpen(false); }, w: 160, mr: 16 }, { children: "Assign Headers" }), void 0), _jsx(Button, __assign({ w: 83, variant: "primary", onClick: skipStep }, { children: "Skip" }), void 0)] }), void 0)] }), void 0) }), void 0));
+    var unmatchedHeadersModalUI = (_jsx(Modal, __assign({ isOpen: isUnmatchedHeadersModalOpen, onClose: function () { return setIsUnmatchedHeadersModalOpen(false); } }, { 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 setIsUnmatchedHeadersModalOpen(false); }, w: 160, mr: 16 }, { children: "Assign Headers" })), _jsx(Button, __assign({ w: 83, variant: "primary", onClick: skipStep }, { children: "Skip" }))] }))] })) })));
     var isMatchStep = currentStepIndex === 1;
     var isReviewStep = currentStepIndex === 2;
-    var leftButtonUI = (_jsx(Div, __assign({ w: 100 }, { children: currentStepIndex > 0 && !appResponse && (_jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: "Go back" }), void 0)) }), void 0));
-    var rightButtonUI = (_jsxs(Div, __assign({ w: 100 }, { children: [isMatchStep && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: "Continue" }), void 0)), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: !isSpreadsheetReviewComplete, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: "Submit" }), void 0))] }), void 0));
-    return (_jsxs(_Fragment, { children: [unmatchedHeadersModalUI, submitModalUI, _jsxs(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 96, centered: true }, { children: [logoURL && _jsx(Logo, { src: logoURL, alt: "" }, void 0), _jsxs(Content, __assign({ spaceBetween: true, w: contentWidth }, { children: [leftButtonUI, _jsx(Div, __assign({ alignCenter: true }, { children: stepsUI }), void 0), rightButtonUI] }), void 0), _jsx(CloseIcon, __assign({ centered: true, clickable: true, onClick: onClose }, { children: closeIconCondensed }), void 0)] }), void 0)] }, void 0));
+    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: !isSpreadsheetReviewComplete, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: "Submit" })))] })));
+    return (_jsxs(_Fragment, { children: [unmatchedHeadersModalUI, submitModalUI, _jsxs(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 96, centered: true }, { children: [logoURL && _jsx(Logo, { src: logoURL, alt: "" }), _jsxs(Content, __assign({ spaceBetween: true, w: contentWidth }, { children: [leftButtonUI, _jsx(Div, __assign({ alignCenter: true }, { children: stepsUI })), rightButtonUI] })), _jsx(CloseIcon, __assign({ centered: true, clickable: true, onClick: onClose }, { children: closeIconCondensed }))] }))] }));
 };
 var Content = styled(Div)(function (_a) {
     var _b = _a.theme, colors = _b.colors, c = _b.css;
@@ -135,10 +142,10 @@ var CloseIcon = styled(Div)(function (_a) {
     return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: absolute;\n    right: 41px;\n  "], ["\n    position: absolute;\n    right: 41px;\n  "])));
 });
 export { Stepper };
-var submitSvg = (_jsxs("svg", __assign({ width: 64, height: 64, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { fill: "#fff", d: "M0 0h64v64H0z" }, void 0), _jsx("path", { d: "M49.306 6.195a2 2 0 0 1 2.824-.16l10.379 9.27a2 2 0 0 1 .16 2.824L28.148 56.78a2 2 0 0 1-2.824.16l-10.379-9.27a2 2 0 0 1-.16-2.823l34.52-38.652Z", fill: "url(#a)", style: {
+var submitSvg = (_jsxs("svg", __assign({ width: 64, height: 64, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { fill: "#fff", d: "M0 0h64v64H0z" }), _jsx("path", { d: "M49.306 6.195a2 2 0 0 1 2.824-.16l10.379 9.27a2 2 0 0 1 .16 2.824L28.148 56.78a2 2 0 0 1-2.824.16l-10.379-9.27a2 2 0 0 1-.16-2.823l34.52-38.652Z", fill: "url(#a)", style: {
                 mixBlendMode: "multiply",
-            } }, void 0), _jsx("rect", { x: 38.727, y: 44.871, width: 17.915, height: 35.878, rx: 2, transform: "rotate(131.582 38.727 44.87)", fill: "url(#b)", style: {
+            } }), _jsx("rect", { x: 38.727, y: 44.871, width: 17.915, height: 35.878, rx: 2, transform: "rotate(131.582 38.727 44.87)", fill: "url(#b)", style: {
                 mixBlendMode: "darken",
-            } }, void 0), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "a", x1: 18.672, y1: 47.198, x2: 37.603, y2: 58.473, gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#D0A617" }, void 0), _jsx("stop", { offset: 1, stopColor: "#FEE18F" }, void 0)] }), void 0), _jsxs("linearGradient", __assign({ id: "b", x1: 47.684, y1: 44.871, x2: 36.123, y2: 89.527, gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#6BEEFF" }, void 0), _jsx("stop", { offset: 1, stopColor: "#08CABE" }, void 0)] }), void 0)] }, void 0)] }), void 0));
-var errorIcon = (_jsxs("svg", __assign({ width: "68", height: "68", viewBox: "0 0 68 68", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsxs("g", __assign({ clipPath: "url(#clip0_1052_34495)" }, { children: [_jsx("rect", { width: "68", height: "68", fill: "white" }, void 0), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M28.5668 8.05854C29.6943 6.10577 32.5129 6.10576 33.6403 8.05854L59.1466 52.2368C60.274 54.1895 58.8648 56.6305 56.6099 56.6305H5.59726C3.34239 56.6305 1.93309 54.1895 3.06053 52.2368L28.5668 8.05854Z", fill: "url(#paint0_linear_1052_34495)" }, void 0) }), void 0), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M34.4375 9.68867C35.5649 7.73589 38.3835 7.73589 39.511 9.68867L65.816 55.2503C66.9434 57.2031 65.5341 59.6441 63.2793 59.6441H10.6692C8.41432 59.6441 7.00502 57.2031 8.13246 55.2503L34.4375 9.68867Z", fill: "url(#paint1_linear_1052_34495)" }, void 0) }), void 0), _jsx("rect", { x: "29.0371", y: "21.2632", width: "6.43183", height: "21.3972", rx: "2.92916", fill: "#FFFDF8" }, void 0), _jsx("rect", { x: "29.0371", y: "44.7898", width: "6.43183", height: "5.61436", rx: "2.80718", fill: "#FFFDF8" }, void 0)] }), void 0), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "paint0_linear_1052_34495", x1: "10.0099", y1: "28.8136", x2: "30.2646", y2: "54.4823", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#FD5C39" }, void 0), _jsx("stop", { offset: "1", stopColor: "#FFB869" }, void 0)] }), void 0), _jsxs("linearGradient", __assign({ id: "paint1_linear_1052_34495", x1: "18.8007", y1: "74.0811", x2: "85.2567", y2: "33.8684", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#E7C551" }, void 0), _jsx("stop", { offset: "1", stopColor: "#FEE18F" }, void 0)] }), void 0), _jsx("clipPath", __assign({ id: "clip0_1052_34495" }, { children: _jsx("rect", { width: "68", height: "68", fill: "white" }, void 0) }), void 0)] }, void 0)] }), void 0));
+            } }), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "a", x1: 18.672, y1: 47.198, x2: 37.603, y2: 58.473, gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#D0A617" }), _jsx("stop", { offset: 1, stopColor: "#FEE18F" })] })), _jsxs("linearGradient", __assign({ id: "b", x1: 47.684, y1: 44.871, x2: 36.123, y2: 89.527, gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#6BEEFF" }), _jsx("stop", { offset: 1, stopColor: "#08CABE" })] }))] })] })));
+var errorIcon = (_jsxs("svg", __assign({ width: "68", height: "68", viewBox: "0 0 68 68", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsxs("g", __assign({ clipPath: "url(#clip0_1052_34495)" }, { children: [_jsx("rect", { width: "68", height: "68", fill: "white" }), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M28.5668 8.05854C29.6943 6.10577 32.5129 6.10576 33.6403 8.05854L59.1466 52.2368C60.274 54.1895 58.8648 56.6305 56.6099 56.6305H5.59726C3.34239 56.6305 1.93309 54.1895 3.06053 52.2368L28.5668 8.05854Z", fill: "url(#paint0_linear_1052_34495)" }) })), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M34.4375 9.68867C35.5649 7.73589 38.3835 7.73589 39.511 9.68867L65.816 55.2503C66.9434 57.2031 65.5341 59.6441 63.2793 59.6441H10.6692C8.41432 59.6441 7.00502 57.2031 8.13246 55.2503L34.4375 9.68867Z", fill: "url(#paint1_linear_1052_34495)" }) })), _jsx("rect", { x: "29.0371", y: "21.2632", width: "6.43183", height: "21.3972", rx: "2.92916", fill: "#FFFDF8" }), _jsx("rect", { x: "29.0371", y: "44.7898", width: "6.43183", height: "5.61436", rx: "2.80718", fill: "#FFFDF8" })] })), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "paint0_linear_1052_34495", x1: "10.0099", y1: "28.8136", x2: "30.2646", y2: "54.4823", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#FD5C39" }), _jsx("stop", { offset: "1", stopColor: "#FFB869" })] })), _jsxs("linearGradient", __assign({ id: "paint1_linear_1052_34495", x1: "18.8007", y1: "74.0811", x2: "85.2567", y2: "33.8684", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#E7C551" }), _jsx("stop", { offset: "1", stopColor: "#FEE18F" })] })), _jsx("clipPath", __assign({ id: "clip0_1052_34495" }, { children: _jsx("rect", { width: "68", height: "68", fill: "white" }) }))] })] })));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/esm/Importer/TrialModeBanner.js

@@ -16,8 +16,8 @@ import { Div, Span } from "../styled/utils";
 import { useImporterContext } from "./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 }), void 0), _jsx(Span, __assign({ mr: 16 }, { children: "You're currently in Trial mode. Subscribe to a plan to deploy to your website." }), void 0), _jsx(Button, __assign({ w: 120, br: 8, variant: "secondary", onClick: function () {
+    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" }), void 0)] }), void 0)) }, void 0));
+                    } }, { children: "Select plan" }))] }))) }));
 };
-var exclamationPointIcon = (_jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 6C12.5523 6 13 6.44772 13 7V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V7C11 6.44772 11.4477 6 12 6ZM12 15C12.5523 15 13 15.4477 13 16V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V16C11 15.4477 11.4477 15 12 15Z", fill: "#FF9A34" }, void 0) }), void 0));
+var exclamationPointIcon = (_jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 6C12.5523 6 13 6.44772 13 7V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V7C11 6.44772 11.4477 6 12 6ZM12 15C12.5523 15 13 15.4477 13 16V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V16C11 15.4477 11.4477 15 12 15Z", fill: "#FF9A34" }) })));

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

@@ -33,10 +33,10 @@ 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);
 });
-var dropzoneUploadingUI = (_jsx(DropzoneUploadingContainer, __assign({ centered: true }, { children: _jsxs(Div, { children: [_jsx(Div, __assign({ centered: true, mb: 12 }, { children: UploadIndicatorSvg }), void 0), _jsx(Div, __assign({ h5: true }, { children: " Drop your file here to upload!" }), void 0)] }, void 0) }), void 0));
+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 }), void 0), _jsx(Div, __assign({ h4: true }, { children: "Drag & drop your file here" }), void 0), _jsx(Div, __assign({ body1: true, textAlignCenter: true, m: 20 }, { children: "Or" }), void 0), _jsx(Button, __assign({ variant: "secondary", w: 133, isSmall: true, onClick: openUploadFileDialog }, { children: "Browse Files" }), void 0)] }), void 0));
+    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 ImporterDropzone = function () {
     var _a = useUploaderContext(), setIsUploading = _a.setIsUploading, setFileName = _a.setFileName;
@@ -61,7 +61,10 @@ var ImporterDropzone = function () {
             reader.onload = function (event) {
                 var results = event.target.result;
                 var getDataFromFile = function (fileResults) {
-                    var workBook = XLSX.read(fileResults, { type: "array" });
+                    var workBook = XLSX.read(fileResults, {
+                        type: "array",
+                        raw: true,
+                    });
                     var workBookName = workBook.SheetNames[0];
                     var sheet = workBook.Sheets[workBookName];
                     return XLSX.utils.sheet_to_json(sheet, { header: 1 });
@@ -99,7 +102,7 @@ var ImporterDropzone = function () {
         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()), void 0), isDragActive && dropzoneUploadingUI, _jsx(DragAndDropComponent, { openUploadFileDialog: open }, void 0)] }), void 0));
+    return (_jsxs(DragAndDropCard, __assign({ 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;

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

@@ -10,5 +10,5 @@ var __assign = (this && this.__assign) || function () {
     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)" }, void 0) }, void 0), _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" }, void 0) }, void 0), _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)" }, void 0) }, void 0), _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" }, void 0) }, void 0), _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)" }, void 0) }, void 0), _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" }, void 0) }, void 0), _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" }, void 0), _jsx("stop", { offset: "1", stopColor: "#FEE18F" }, void 0)] }), void 0), _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" }, void 0), _jsx("stop", { offset: "1", stopColor: "#01FFD7" }, void 0)] }), void 0), _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" }, void 0), _jsx("stop", { offset: "1", stopColor: "#10F9EB" }, void 0)] }), void 0)] }, void 0)] }), void 0));
-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)" }, void 0) }, void 0), _jsx("g", { children: _jsx("path", { d: "M1 55.3761L95.7523 55.3762L48.3762 8L1 55.3761Z", fill: "url(#paint1_linear_1630_46301)" }, void 0) }, void 0), _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" }, void 0), _jsx("stop", { offset: "1", stopColor: "#00C7A8", stopOpacity: "0.895833" }, void 0)] }), void 0), _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" }, void 0), _jsx("stop", { offset: "1", stopColor: "#00A8CD", stopOpacity: "0.895833" }, void 0)] }), void 0)] }, void 0)] }), void 0));
+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.js

@@ -37,15 +37,15 @@ var HeaderCardWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __ma
 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 }), void 0), _jsx(Div, __assign({ h3: true, mb: 16 }, { children: "Something\u2019s wrong" }), void 0), _jsx(Div, __assign({ body1: true }, { children: templateError }), void 0)] }, void 0));
+    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 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) {
     var title = _a.title, headers = _a.headers, props = __rest(_a, ["title", "headers"]);
-    return (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ label3: true }, props, { children: title }), void 0), headers.map(function (header, index) {
+    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(HeaderListItem, __assign({ body1: true, isLast: isLast, mt: 16 }, { children: header }), index));
-            })] }, void 0));
+            })] }));
 };
 var HeaderCard = function (_a) {
     var templateHeaders = _a.templateHeaders, props = __rest(_a, ["templateHeaders"]);
@@ -55,24 +55,24 @@ 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:" }), void 0), requiredHeaders.length > 0 && (_jsx(HeadersList, { title: "Required Headers", headers: requiredHeaders }, void 0)), optionalHeaders.length > 0 && (_jsx(HeadersList, { title: "Optional Headers", headers: optionalHeaders, mt: 30 }, void 0))] }), void 0) }, void 0));
+    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 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 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 }), void 0)] }, void 0));
-    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 }), void 0), _jsx(Div, __assign({ helperText: true, c: colors.gray500 }, { children: "Uploading..." }), void 0)] }), void 0), _jsx(Div, __assign({ clickable: true, onClick: resetImport }, { children: closeIconWithCircle }), void 0)] }), void 0));
+    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 }))] })));
 };
 var ImporterSection = function () {
     var _a = useImporterContext(), templateHeaders = _a.templateHeaders, templateError = _a.templateError;
-    return templateError ? (_jsx(ErrorCard, {}, void 0)) : (_jsx(_Fragment, { children: templateHeaders && (_jsxs(Div, __assign({ dflex: true }, { children: [_jsx(ImporterDropzone, {}, void 0), _jsx(HeaderCard, { ml: 25, templateHeaders: templateHeaders }, void 0)] }), void 0)) }, void 0));
+    return templateError ? (_jsx(ErrorCard, {})) : (_jsx(_Fragment, { children: templateHeaders && (_jsxs(Div, __assign({ dflex: true }, { children: [_jsx(ImporterDropzone, {}), _jsx(HeaderCard, { ml: 25, templateHeaders: templateHeaders })] }))) }));
 };
 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" }), void 0), _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." }), void 0)] }), void 0));
-    return (_jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [headerUI, isUploading ? (_jsx(Div, __assign({ mt: 40 }, { children: _jsx(LoadingCard, {}, void 0) }), void 0)) : (_jsx(ImporterSection, {}, void 0))] }), void 0));
+    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." }))] })));
+    return (_jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [headerUI, isUploading ? (_jsx(Div, __assign({ mt: 40 }, { children: _jsx(LoadingCard, {}) }))) : (_jsx(ImporterSection, {}))] })));
 };
 export { DragAndDropImporter };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -30,23 +30,25 @@ import { useImporterContext } from "../ImporterContextProvider";
 import { FieldTypes } from "../../types";
 import { Div } from "../../styled/utils";
 import { getSpreadsheetRowWidth } from "../common/utils";
+import { useMemo } from "react";
 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"])));
 var HeaderButtons = function () {
     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" }), void 0), _jsx(Button, __assign({ w: 142, isSmall: true, onClick: onClick }, { children: "Yes, continue" }), void 0)] }), void 0));
+    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" }))] })));
 };
 var HeadersPreview = function () {
     var uploadedData = useImporterContext().uploadedData;
-    var formattedData = (function () {
+    var formattedData = useMemo(function () {
         var firstRowLen = 0;
-        if (uploadedData.length > 0 && Array.isArray(uploadedData[0]))
+        if (uploadedData.length > 0 && Array.isArray(uploadedData[0])) {
             firstRowLen = uploadedData[0].length;
-        var placeholderHeaders = __spreadArray([], Array(firstRowLen), true).map(function (_, i) {
-            return String.fromCharCode(65 + i);
-        });
+        }
+        var placeholderHeaders = new Array(firstRowLen)
+            .fill(null)
+            .map(function (_, i) { return String.fromCharCode(65 + i); });
         var getDataRows = function () {
             var emptyRows = [];
             if (uploadedData.length < 20)
@@ -60,19 +62,19 @@ var HeadersPreview = function () {
                 return entry;
             });
         };
-        var dataRows = getDataRows();
-        return dataRows;
-    })();
-    var placeholderFields = Object.keys(formattedData[0]);
-    var readonlyFields = placeholderFields.map(function (key) {
-        return {
-            label: key,
-            name: key,
-            type: FieldTypes.string,
-            isRequired: false,
-        };
-    });
-    return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Verify Your Column Headers" }), void 0), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." }), void 0), _jsx(HeaderButtons, {}, void 0), _jsx(Div, __assign({ w100: true, centered: true, mb: 36 }, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(readonlyFields, 6), isReadOnly: true, initialData: formattedData }, { fields: readonlyFields }, { highlightFirstRow: true }), void 0) }), void 0)] }), void 0) }, void 0));
+        return getDataRows();
+    }, [uploadedData]);
+    var readonlyFields = useMemo(function () {
+        return Object.keys(formattedData[0]).map(function (key) {
+            return {
+                label: key,
+                name: key,
+                type: FieldTypes.string,
+                isRequired: false,
+            };
+        });
+    }, []);
+    return (_jsx(_Fragment, { children: _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: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(readonlyFields, 6), isReadOnly: true, initialData: formattedData }, { fields: readonlyFields }, { highlightFirstRow: true })) }))] })) }));
 };
 export default HeadersPreview;
 var templateObject_1;

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

@@ -22,6 +22,6 @@ export var UploaderContextProvider = function (_a) {
         fileName: fileName,
         setFileName: setFileName,
     };
-    return (_jsx(UploaderContext.Provider, __assign({ value: value }, { children: children }), void 0));
+    return (_jsx(UploaderContext.Provider, __assign({ value: value }, { children: children })));
 };
 export var useUploaderContext = function () { return useContext(UploaderContext); };

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

@@ -5,9 +5,9 @@ import { UploaderContextProvider } from "./UploaderContextProvider";
 import { useImporterContext } from "../ImporterContextProvider";
 var UploaderWithContext = function () {
     var uploadedData = useImporterContext().uploadedData;
-    return _jsx(_Fragment, { children: uploadedData ? _jsx(HeadersPreview, {}, void 0) : _jsx(DragAndDropImporter, {}, void 0) }, void 0);
+    return _jsx(_Fragment, { children: uploadedData ? _jsx(HeadersPreview, {}) : _jsx(DragAndDropImporter, {}) });
 };
 var Uploader = function () {
-    return (_jsx(UploaderContextProvider, { children: _jsx(UploaderWithContext, {}, void 0) }, void 0));
+    return (_jsx(UploaderContextProvider, { children: _jsx(UploaderWithContext, {}) }));
 };
 export { Uploader };

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

@@ -20,5 +20,5 @@ import { Div } from "../../styled/utils";
 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, {}, void 0), _jsx(LoaderContainer, { children: _jsx(Div, __assign({ w: 300 }, { children: _jsx(Div, __assign({ pRelative: true }, { children: _jsx(Spinner, {}, void 0) }), void 0) }), void 0) }, void 0)] }, void 0)); };
+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/Spreadsheet/SpreadsheetContextProvider.js

@@ -55,7 +55,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState, useMemo, } from "react";
 import { formatBatchErrors } from "../../..";
 import { getRecordErrors, getRenderedRecordWithErrors, recordIsEmpty, } from "./common";
 var MINIMUM_ROW_COUNT = 20;
@@ -102,10 +102,10 @@ export var SpreadsheetContextProvider = function (_a) {
     }), columnErrorCounts = _l.columnErrorCounts, totalErrors = _l.totalErrors, isValidationComplete = _l.isValidationComplete;
     useEffect(function () {
         var init = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var batchValidationDelayMs, batchValidationSize, addEmtpyRows, validateInBatches;
+            var batchValidationDelayMs, batchValidationSize, addEmptyRows, validateInBatches;
             return __generator(this, function (_a) {
                 batchValidationDelayMs = options.batchValidationDelayMs, batchValidationSize = options.batchValidationSize;
-                addEmtpyRows = function () {
+                addEmptyRows = function () {
                     var newData = __spreadArray([], data, true);
                     var emptyRecord = fields.reduce(function (obj, f) {
                         var _a;
@@ -120,7 +120,7 @@ export var SpreadsheetContextProvider = function (_a) {
                     setData(newData);
                 };
                 if (data.length < MINIMUM_ROW_COUNT)
-                    addEmtpyRows();
+                    addEmptyRows();
                 validateInBatches = function () { return __awaiter(void 0, void 0, void 0, function () {
                     var validationErrors, batchSize, batchCount, batchIdx, idx, batch, errors, validationPercentage;
                     return __generator(this, function (_a) {
@@ -252,7 +252,7 @@ export var SpreadsheetContextProvider = function (_a) {
         setIsScrollingEnabled: setIsScrollingEnabled,
         highlightFirstRow: highlightFirstRow,
     };
-    return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children }), void 0));
+    return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
 };
 var useValidationState = function (_a) {
     var data = _a.data, fields = _a.fields, batchValidationErrors = _a.batchValidationErrors, submittedData = _a.submittedData;
@@ -280,7 +280,9 @@ var useValidationState = function (_a) {
         };
         updateErrorCounts();
     }, [data, batchValidationErrors]);
-    var totalErrors = Object.keys(columnErrorCounts).reduce(function (total, key) { return total + (columnErrorCounts[key] || 0); }, 0);
+    var totalErrors = useMemo(function () {
+        return Object.keys(columnErrorCounts).reduce(function (total, key) { return total + (columnErrorCounts[key] || 0); }, 0);
+    }, []);
     var isValidationComplete = batchValidationErrors && totalErrors === 0;
     return { columnErrorCounts: columnErrorCounts, totalErrors: totalErrors, isValidationComplete: isValidationComplete };
 };

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

@@ -37,7 +37,7 @@ export var SpreadsheetRowNumbers = function (_a) {
     var data = useSpreadsheetContext().data;
     var rowRenderer = function (_a) {
         var rowIndex = _a.rowIndex, style = _a.style;
-        return (_jsx(RowNumber, __assign({ style: style, alignCenter: true, justifyEnd: true, isLast: rowIndex === data.length - 1 }, { children: _jsx(Div, __assign({ truncateText: true, mr: 16, textAlignRight: true }, { children: rowIndex + 1 }), void 0) }), rowIndex));
+        return (_jsx(RowNumber, __assign({ style: style, alignCenter: true, justifyEnd: true, isLast: rowIndex === data.length - 1 }, { children: _jsx(Div, __assign({ truncateText: true, mr: 16, textAlignRight: true }, { children: rowIndex + 1 })) }), rowIndex));
     };
     var gridStyles = {
         outline: "none",
@@ -45,7 +45,7 @@ export var SpreadsheetRowNumbers = function (_a) {
         overflowY: "hidden",
         overflowX: "scroll",
     };
-    return (_jsxs(SpreadsheetRowNumbersContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowNumbersHeader, {}, void 0), _jsx(Grid, { scrollTop: scrollTop, style: gridStyles, width: SPREADSHEET_ROW_NUMBERS_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_NUMBERS_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, cellRenderer: rowRenderer, rowCount: data.length }, void 0)] }), void 0));
+    return (_jsxs(SpreadsheetRowNumbersContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowNumbersHeader, {}), _jsx(Grid, { scrollTop: scrollTop, style: gridStyles, width: SPREADSHEET_ROW_NUMBERS_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_NUMBERS_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, cellRenderer: rowRenderer, rowCount: data.length })] })));
 };
 var RowNumber = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\n"])), function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.label3; }, function (p) {
     return !p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), function (p) { return p.theme.colors.gray300; });

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

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

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

@@ -0,0 +1,31 @@
+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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { TooltipProvider } from "../../../../common";
+import { Div } from "../../../../styled/utils";
+import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
+import styled, { css } from "styled-components";
+var ErrorCount = styled(Div)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, c = _b.css;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "], ["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "])), colors.error, colors.red100, colors.error, c.centered);
+});
+export var FieldHeader = function (_a) {
+    var field = _a.field, sortByFieldErrors = _a.sortByFieldErrors;
+    var columnErrorCounts = useSpreadsheetContext().columnErrorCounts;
+    var fieldErrorCount = columnErrorCounts[field.name];
+    return (_jsxs(Div, __assign({ p: "0 16px", spaceBetween: true, w100: true, alignCenter: true }, { children: [_jsxs(Div, __assign({ truncateText: true }, { children: [field.label, field.isRequired && "*"] })), fieldErrorCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(field.label, " errors") }, { children: _jsx(ErrorCount, __assign({ onClick: function () { return sortByFieldErrors(field.name); } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldErrorCount })) })) })) })))] })));
+};
+var templateObject_1;

package/lib/esm/Importer/common/Spreadsheet/common/fields/SpeadsheetAutocomplete.d.ts

@@ -1,7 +1,12 @@
-/// <reference types="react" />
-export declare const SpreadsheetAutocomplete: ({ name, record, options, isInputDisabled, }: {
-    name: any;
-    record: any;
-    options: any;
+import React from "react";
+import { Option } from "../../../../../common/inputs/Autocomplete";
+import { Record, FieldTypes } from "../../../../../types";
+export declare type AutoCompleteOption = Option;
+export declare type SpreadsheetAutocompleteProps = {
+    name: string;
+    record: Record;
+    options: AutoCompleteOption[];
     isInputDisabled?: boolean;
-}) => JSX.Element;
+    fieldType: FieldTypes;
+};
+export declare const SpreadsheetAutocomplete: React.FC<SpreadsheetAutocompleteProps>;

package/lib/esm/Importer/common/Spreadsheet/common/fields/SpeadsheetAutocomplete.js

@@ -15,9 +15,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-import { SpreadsheetField, useSpreadsheetField, useValidationError } from ".";
+import { SpreadsheetField, useSpreadsheetField } from ".";
 import { spreadsheetRowHeightPx } from "..";
-import { Autocomplete as AutocompleteBase } from "../../../../../common/inputs/Autocomplete";
+import { Autocomplete as AutocompleteBase, } from "../../../../../common/inputs/Autocomplete";
 import { SelectMenuDiv, SelectMenuScrollArea, } from "../../../../../common/inputs/SelectMenu";
 import { HTMLInput, TextInputIcon, } from "../../../../../common/inputs/TextInput";
 import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
@@ -26,12 +26,11 @@ var Autocomplete = styled(AutocompleteBase)(templateObject_3 || (templateObject_
 }, function (p) {
     return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), function (p) { return p.theme.colors.error; });
 }, TextInputIcon, SelectMenuDiv, SelectMenuScrollArea);
-export var SpreadsheetAutocomplete = function (_a) {
-    var name = _a.name, record = _a.record, options = _a.options, _b = _a.isInputDisabled, isInputDisabled = _b === void 0 ? false : _b;
-    var validationError = useValidationError(name, record).validationError;
-    var _c = useSpreadsheetField(name, record), value = _c.value, setValue = _c.setValue;
+export var SpreadsheetAutocomplete = function (props) {
+    var name = props.name, record = props.record, options = props.options, fieldType = props.fieldType, _a = props.isInputDisabled, isInputDisabled = _a === void 0 ? false : _a;
+    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError;
     var setIsScrollingEnabled = useSpreadsheetContext().setIsScrollingEnabled;
-    return (_jsx(SpreadsheetField, __assign({}, { name: name, record: record }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, onToggle: function (isOpen) { return setIsScrollingEnabled(!isOpen); }, options: options, value: value, icon: chevronDownIcon, onChange: function (v) { return setValue(v); } }, void 0) }), void 0));
+    return (_jsx(SpreadsheetField, __assign({ validationError: validationError }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, onToggle: function (isOpen) { return setIsScrollingEnabled(!isOpen); }, options: options, value: value, icon: chevronDownIcon, onChange: function (v) { return setValue(v); } }) })));
 };
-var chevronDownIcon = (_jsx("svg", __assign({ width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M8.46289 1L4.98131 4.48159L1.49972 1", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
+var chevronDownIcon = (_jsx("svg", __assign({ width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M8.46289 1L4.98131 4.48159L1.49972 1", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/Importer/common/Spreadsheet/common/fields/SpreadsheetInput.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { HTMLInputCSSProps } from "../../../../../styled/utils";
-import { Record } from "../../../../../types";
-declare type SpreadsheetTextInputArgs = {
+import { FieldTypes, Record } from "../../../../../types";
+export declare type SpreadsheetTextInputArgs = {
     name: string;
     record: Record;
+    fieldType: FieldTypes;
 } & HTMLInputCSSProps;
-export declare const SpreadsheetInput: ({ name, record, ...props }: SpreadsheetTextInputArgs) => JSX.Element;
+export declare const SpreadsheetInput: ({ name, record, fieldType, ...props }: SpreadsheetTextInputArgs) => JSX.Element;
 export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
     hasError: boolean;
 } & import("../../../../../styled/utils").HTMLInputProps & import("../../../../../styled/utils").CSSProps, never>;
-export {};

package/lib/esm/Importer/common/Spreadsheet/common/fields/SpreadsheetInput.js

@@ -26,15 +26,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-import { SpreadsheetField, useSpreadsheetField, useValidationError } from ".";
+import { SpreadsheetField, useSpreadsheetField } from ".";
 export var SpreadsheetInput = function (_a) {
-    var name = _a.name, record = _a.record, props = __rest(_a, ["name", "record"]);
-    var validationError = useValidationError(name, record).validationError;
-    var _b = useSpreadsheetField(name, record), value = _b.value, setValue = _b.setValue;
-    return (_jsx(SpreadsheetField, __assign({}, { name: name, record: record }, { children: _jsx(Input, __assign({ hasError: !!validationError, value: value || "", onChange: function (_a) {
+    var name = _a.name, record = _a.record, fieldType = _a.fieldType, props = __rest(_a, ["name", "record", "fieldType"]);
+    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError;
+    return (_jsx(SpreadsheetField, __assign({ validationError: validationError }, { children: _jsx(Input, __assign({ hasError: !!validationError, value: value || "", onChange: function (_a) {
                 var value = _a.target.value;
                 return setValue(value);
-            } }, props), void 0) }), void 0));
+            } }, props)) })));
 };
 export var Input = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  outline: none;\n  border: none;\n  width: 100%;\n  height: calc(100% - 2px);\n  background: transparent;\n  box-sizing: border-box;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px;\n  ", ";\n  color: ", ";\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", "\n"], ["\n  outline: none;\n  border: none;\n  width: 100%;\n  height: calc(100% - 2px);\n  background: transparent;\n  box-sizing: border-box;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px;\n  ", ";\n  color: ", ";\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", "\n"])), function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.gray1000; }, function (props) { return props.theme.colors.placeholder; }, function (p) {
     return p.hasError && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.error; });

package/lib/esm/Importer/common/Spreadsheet/common/fields/index.d.ts

@@ -1,14 +1,15 @@
 import React from "react";
-import { Record } from "../../../../../types";
+import { FieldTypes, Record } from "../../../../../types";
+export declare const parseValue: (fieldType: FieldTypes, value: any) => any;
 export declare const useValidationError: (fieldName: string, record: Record) => {
     validationError: any;
 };
-export declare const useSpreadsheetField: (name: any, record: Record) => {
+export declare const useSpreadsheetField: (name: any, record: Record, fieldType: FieldTypes) => {
     value: any;
     setValue: React.Dispatch<any>;
+    validationError: any;
 };
-export declare const SpreadsheetField: ({ name, record, children }: {
-    name: any;
-    record: any;
+export declare const SpreadsheetField: ({ validationError, children }: {
+    validationError: any;
     children: any;
 }) => JSX.Element;