fuse-importer 0.25.6 → 0.25.8

package/lib/esm/Importer/ImporterWithContext.js

@@ -45,10 +45,13 @@ var steps = [
         component: _jsx(Review, {}),
     },
 ];
-export var Layout = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  height: 100vh;\n  width: 100vw;\n  overflow-y: scroll;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: ", ";\n  ", ";\n"], ["\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  height: 100vh;\n  width: 100vw;\n  overflow-y: scroll;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: ", ";\n  ", ";\n"])), function (p) { return p.zIndex; }, function (p) { return p.theme.css.scrollbarDark; });
-var Content = styled(Div)(function (_a) {
-    var colors = _a.theme.colors;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n  "], ["\n    background-color: ", ";\n  "])), colors.backgroundInterface);
+export var Layout = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  left: 0;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: ", ";\n  ", ";\n"], ["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  left: 0;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.backgroundInterface;
+}, function (p) { return p.zIndex; }, function (p) { return p.theme.css.scrollbarDark; });
+var Content = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var colors = _a.theme.colors, inTrialMode = _a.inTrialMode;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    flex: ", ";\n  "], ["\n    background-color: ", ";\n    flex: ", ";\n  "])), colors.backgroundInterface, inTrialMode ? "none" : 1);
 });
 export var ImporterWithContext = function () {
     var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode;
@@ -58,9 +61,9 @@ export var ImporterWithContext = function () {
         layoutRef.current.scrollTo(0, 0);
     }, [currentStepIndex, matcherSubstep]);
     function renderContent() {
-        return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [previewMode && _jsx(PreviewModeBanner, {}), !previewMode && _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: steps.map(function (step) { return t(step.label); }), logoURL: logoURL })] }), _jsx(Content, { children: steps[currentStepIndex].component }), inTrialMode && (_jsx(Content, { children: _jsx(Footer, {}) }))] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [previewMode && _jsx(PreviewModeBanner, {}), !previewMode && _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: steps.map(function (step) { return t(step.label); }), logoURL: logoURL })] }), _jsx(Content, { children: steps[currentStepIndex].component }), inTrialMode && (_jsx(Content, __assign({ inTrialMode: inTrialMode }, { children: _jsx(Footer, {}) })))] }));
     }
     var shouldShowPreviewFirstTime = previewFirstTime && previewMode;
     return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), _jsx(ReviewContextProvider, { children: _jsx(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: shouldShowPreviewFirstTime ? _jsx(PreviewFirstTime, {}) : renderContent() })) })] })));
 };
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/tableColumns.js

@@ -41,7 +41,7 @@ export var tableColumns = [
                 newEnumFieldValueMatchings[templateHeaderLabel][uploadedDataValue] = selected;
                 setEnumFieldValueMatchings(newEnumFieldValueMatchings);
             };
-            return (_jsx(Div, __assign({ w100: true }, { children: _jsx(Autocomplete, { w: "90%", placeholder: t("columns.placeholder"), onChange: onChange, value: uploadedDataValueMatching, options: valueOptions.map(function (vo) { return ({
+            return (_jsx(Div, __assign({ w100: true }, { children: _jsx(Autocomplete, { w: "90%", placeholder: t("columns.placeholder"), onChange: onChange, placement: "bottom", value: uploadedDataValueMatching, options: valueOptions.map(function (vo) { return ({
                         value: vo,
                         label: vo,
                     }); }) }) })));

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/index.js

@@ -11,14 +11,13 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Div } from "../../../styled/utils";
-import { contentWidth } from "../../common/index";
 import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { EnumFieldMatcher } from "./EnumFieldMatcher";
 import { useTranslation } from "react-i18next";
 export var EnumFieldsMatchers = function () {
     var t = useTranslation("match").t;
     var enumFieldValueMatchings = useImporterContext().enumFieldValueMatchings;
-    return (_jsxs(_Fragment, { children: [_jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: t("title") })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true, maxw: 928 }, { children: t("enum_description") }))] })), _jsx(Div, __assign({ flexColumn: true, alignCenter: true, mb: 20, centered: true }, { children: Object.keys(enumFieldValueMatchings).map(function (templateHeaderLabel, index) {
-                    return (_jsx(Div, __assign({ w: contentWidth }, { children: _jsx(EnumFieldMatcher, { templateHeaderLabel: templateHeaderLabel }) }), index));
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, __assign({ flexColumn: true, ml: 32 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16, mt: 40 }, { children: t("title") })), _jsx(Div, __assign({ body1: true, mb: 40, maxw: 928 }, { children: t("enum_description") }))] })), _jsx(Div, __assign({ flexColumn: true, alignCenter: true, mb: 20, ml: 32, mr: 32, centered: true }, { children: Object.keys(enumFieldValueMatchings).map(function (templateHeaderLabel, index) {
+                    return (_jsx(Div, __assign({ w: "100%" }, { children: _jsx(EnumFieldMatcher, { templateHeaderLabel: templateHeaderLabel }) }), index));
                 }) }))] }));
 };

package/lib/esm/Importer/Matcher/HeaderMatcher/index.js

@@ -19,13 +19,13 @@ import styled from "styled-components";
 import { defaultTableHeaderHeightPx, TableView, } from "../../../common/Table/TableView";
 import { colors } from "../../../styled/theme";
 import { Div } from "../../../styled/utils";
-import { contentWidth, getTableHeight } from "../../common/index";
+import { getTableHeight } from "../../common/index";
 import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { MAX_VISIBLE_ROWS } from "../common";
 import { MatcherStatus } from "../common/types";
 import { tableColumns } from "./tableColumns";
 import { useTranslation } from "react-i18next";
-var CardContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n  > div {\n    margin: 16px;\n  }\n"], ["\n  flex-direction: row;\n  > div {\n    margin: 16px;\n  }\n"])));
+var CardContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 var HeaderMatcher = function () {
     var t = useTranslation("match").t;
     var _a = useImporterContext(), templateHeaders = _a.templateHeaders, templateHeaderMatchings = _a.templateHeaderMatchings;
@@ -52,10 +52,10 @@ var HeaderMatcher = function () {
         dataCount: data.length,
         maxVisibleRows: MAX_VISIBLE_ROWS,
     });
-    return (_jsx(_Fragment, { children: _jsx(Div, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: t("title") })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: t("description", {
-                            numberOfMatchedHeaders: numberOfMatchedHeaders,
-                            totalNumberOfHeaders: templateHeaders.length,
-                        }) })), _jsx(CardContainer, __assign({ dflex: true, centered: true, alignStart: true }, { children: _jsx(Div, __assign({ w: contentWidth }, { children: _jsx(TableView, { h: tableHeight, data: sortedData, rowHeight: tableRowHeight, columns: tableColumns, bg: colors.white }) })) }))] })) }) }));
+    return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, h100: true }, { children: [_jsxs(Div, __assign({ ml: 32, mr: 32 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16, mt: 40 }, { children: t("title") })), _jsx(Div, __assign({ body1: true, mb: 24 }, { children: t("description", {
+                                numberOfMatchedHeaders: numberOfMatchedHeaders,
+                                totalNumberOfHeaders: templateHeaders.length,
+                            }) }))] })), _jsx(CardContainer, __assign({ dflex: true, centered: true, alignStart: true, w100: true, h100: true }, { children: _jsx(Div, __assign({ w100: true, h100: true }, { children: _jsx(TableView, { h: tableHeight, data: sortedData, rowHeight: tableRowHeight, columns: tableColumns, bg: colors.white, style: { height: "100%" } }) })) }))] })) }));
 };
 export { HeaderMatcher };
 var templateObject_1;

package/lib/esm/Importer/Matcher/HeaderMatcher/tableColumns.js

@@ -27,7 +27,7 @@ export var tableColumns = [
                 newTemplateHeaderMatchings[ourColumns] = selected;
                 setTemplateHeaderMatchings(newTemplateHeaderMatchings);
             };
-            return (_jsx(Autocomplete, { w: "92%", onChange: onChange, value: yourColumns, id: "your-column-".concat(ourColumns), options: uploadedDataHeaders.map(function (h) { return ({
+            return (_jsx(Autocomplete, { w: "92%", onChange: onChange, value: yourColumns, placement: "bottom", id: "your-column-".concat(ourColumns), options: uploadedDataHeaders.map(function (h) { return ({
                     value: h,
                     label: h,
                 }); }) }));

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

@@ -2,21 +2,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 React, { useMemo } from "react";
+import React from "react";
 import styled, { css } from "styled-components";
-import { FieldTypes } from "../..";
 import { Div } from "../../styled/utils";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
 import { HeaderMatcher } from "./HeaderMatcher";
@@ -27,12 +15,8 @@ var Dot = styled(Div)(function (_a) {
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    height: 8px;\n    width: 8px;\n    border-radius: 100%;\n    background: ", ";\n    ", "\n  "], ["\n    height: 8px;\n    width: 8px;\n    border-radius: 100%;\n    background: ", ";\n    ", "\n  "])), colors.outlineInputs, isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 12px;\n      width: 12px;\n      background: ", ";\n    "], ["\n      height: 12px;\n      width: 12px;\n      background: ", ";\n    "])), colors.highlight01));
 });
 var Matcher = function () {
-    var _a = useImporterContext(), matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders;
-    var enumFieldsCount = useMemo(function () {
-        return templateHeaders.filter(function (th) { return th.column_type === FieldTypes.enum; }).length;
-    }, [templateHeaders]);
-    var dotsUI = (_jsxs(_Fragment, { children: [_jsx(Dot, { isSelected: matcherSubstep === 0 }), _jsx(Dot, { isSelected: matcherSubstep === 1 })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 30, mt: 40, mb: 16, alignCenter: true, spaceBetween: true }, { children: enumFieldsCount > 0 && dotsUI })) })), matcherSubstep === 0 && _jsx(HeaderMatcher, {}), matcherSubstep === 1 && _jsx(EnumFieldsMatchers, {})] }));
+    var matcherSubstep = useImporterContext().matcherSubstep;
+    return (_jsxs(_Fragment, { children: [matcherSubstep === 0 && _jsx(HeaderMatcher, {}), matcherSubstep === 1 && _jsx(EnumFieldsMatchers, {})] }));
 };
 export default React.memo(Matcher, areEqual);
 var templateObject_1, templateObject_2;

package/lib/esm/Importer/Review/ReviewWithContext.js

@@ -16,23 +16,19 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
 import { Div } from "../../styled/utils";
-import { Span } from "../../styled";
 import Spreadsheet from "../common/Spreadsheet";
 import { getSpreadsheetRowWidth } from "../common/utils";
 import { AppResponseModal } from "./AppResponseModal";
 import { useReviewContext } from "./ReviewContextProvider";
-import { Button } from "../../common/buttons";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
-var downloadIcon = (_jsxs("svg", __assign({ width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M1.66659 8.99996C1.33325 7.99996 1.33325 6.99996 1.33325 6.3042C1.33325 3.98541 3.40957 1.66663 5.97083 1.66663C7.68739 1.66663 9.18612 2.59924 9.98798 3.98541H10.6084C12.5293 3.98541 14.3333 5.33329 14.3333 6.99996C14.3333 7.66663 14.3333 8.33329 13.9999 8.99996", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4.94434 13.2211L7.66656 15.8333L10.3888 13.2211", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7.66675 15.1462L7.66675 7.75005", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round" })] })));
-var TitleContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 99%;\n"], ["\n  width: 99%;\n"])));
-var ExportButtonContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  right: 32px;\n"], ["\n  position: absolute;\n  right: 32px;\n"])));
+var TitleContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var ReviewWithContext = function () {
-    var _a = useReviewContext(), fields = _a.reviewFields, initialDataSet = _a.reviewInitialDataSet, options = _a.options, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, onExport = _a.onExport;
+    var _a = useReviewContext(), fields = _a.reviewFields, initialDataSet = _a.reviewInitialDataSet, options = _a.options, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged;
     var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows, isUsingManualImport = _b.isUsingManualImport;
     var t = useTranslation("review").t;
     var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { options: __assign(__assign({}, options), { showCheckboxColumn: true }), selectedRows: selectedRows, setSelectedRows: setSelectedRows, initialDataSet: initialDataSet, fields: fields, rowWidth: getSpreadsheetRowWidth(fields, 6), onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }));
-    return (_jsxs(Div, __assign({ centered: true, flexColumn: true, h100: true }, { children: [_jsx(AppResponseModal, {}), _jsxs(Div, __assign({ w100: true, h100: true }, { children: [_jsxs(TitleContainer, __assign({ centered: true, textAlignCenter: true, flexColumn: true }, { children: [_jsx(Div, __assign({ h2: true, mt: 40 }, { children: t(isUsingManualImport.current ? "manual_importer_title" : "title") })), _jsx(ExportButtonContainer, __assign({ mb: 16, mt: 64 }, { children: _jsxs(Button, __assign({ w: 120, br: 8, variant: "secondary", svgNormalFillColorOverride: "transparent", svgActiveFillColorOverride: "transparent", svgActiveStrokeColorOverride: "white", onClick: onExport }, { children: [downloadIcon, " ", _jsxs(Span, __assign({ ml: 6 }, { children: [" ", t("export")] }))] })) }))] })), _jsx(Div, __assign({ centered: true, textAlignCenter: true, flexColumn: true }, { children: _jsx(Div, __assign({ body1: true, mt: 20, w: 540, mb: 15 }, { children: t("description") })) })), spreadsheetUI] }))] })));
+    return (_jsxs(Div, __assign({ centered: true, flexColumn: true, h100: true }, { children: [_jsx(AppResponseModal, {}), _jsxs(Div, __assign({ w100: true, h100: true, flexColumn: true }, { children: [_jsx(TitleContainer, __assign({ flexColumn: true, ml: 32 }, { children: _jsx(Div, __assign({ h2: true, mt: 40, mb: 40 }, { children: t(isUsingManualImport.current ? "manual_importer_title" : "title") })) })), _jsx(Div, __assign({ h100: true, w100: true, justifyCenter: true }, { children: spreadsheetUI }))] }))] })));
 };
 export default ReviewWithContext;
-var templateObject_1, templateObject_2;
+var templateObject_1;

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

@@ -15,13 +15,13 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-import { whiteCheckIcon } from "../../common";
+import { WhiteCheckIcon } from "../../common";
 import { Div } from "../../styled";
 var StepIndexWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 22px;\n  width: 22px;\n  color: ", ";\n  border-radius: 50%;\n  background-color: none;\n  border: 1px solid ", ";\n\n  ", ";\n"], ["\n  height: 22px;\n  width: 22px;\n  color: ", ";\n  border-radius: 50%;\n  background-color: none;\n  border: 1px solid ", ";\n\n  ", ";\n"])), function (p) { return p.theme.colors.gray400; }, function (p) { return p.theme.colors.gray400; }, function (p) {
     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; });
 });
 export 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 }))) : (_jsx(StepIndexWrapper, __assign({ centered: true, body2: true, bold: true, mr: 8, isSelected: isSelected }, { children: index }))) }));
+    return (_jsx(_Fragment, { children: isCompleted ? (_jsx(Div, __assign({ centered: true, body2: true, bold: true, mr: 8 }, { children: _jsx(WhiteCheckIcon, {}) }))) : (_jsx(StepIndexWrapper, __assign({ centered: true, body2: true, bold: true, mr: 8, isSelected: isSelected }, { children: index }))) }));
 };
 var templateObject_1, templateObject_2;

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

@@ -18,7 +18,6 @@ import { useState } from "react";
 import styled, { css } from "styled-components";
 import { Button, closeIconCondensed, ChevronRightIcon } from "../../common";
 import { Div } from "../../styled/utils";
-import { contentWidth } from "../common";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
 import { useReviewContext } from "../Review/ReviewContextProvider";
 import { ColumnType } from "../Matcher/common/types";
@@ -29,8 +28,15 @@ import { UnmatchedHeadersModal } from "./UnmatchedHeadersModal";
 import { ConfirmCloseModal } from "./ConfirmCloseModal";
 import { useTranslation } from "react-i18next";
 var StepperWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  user-select: none;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  user-select: none;\n"])), function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.gray300; });
-var Logo = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 70px;\n  max-width: 300px;\n  position: absolute;\n  left: 41px;\n"], ["\n  max-height: 70px;\n  max-width: 300px;\n  position: absolute;\n  left: 41px;\n"])));
-var CloseIcon = styled(Div)(function () { return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    right: 41px;\n  "], ["\n    position: absolute;\n    right: 41px;\n  "]))); });
+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];
@@ -38,7 +44,7 @@ export var Stepper = function (_a) {
     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(), 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;
+    var _f = useImporterContext(), currentStepIndex = _f.currentStepIndex, templateHeaderMatchings = _f.templateHeaderMatchings, matcherSubstep = _f.matcherSubstep, templateHeaders = _f.templateHeaders, uploadedDataEnumFieldValues = _f.uploadedDataEnumFieldValues, setEnumFieldValueMatchings = _f.setEnumFieldValueMatchings, setMatcherSubstep = _f.setMatcherSubstep, setCurrentStepIndex = _f.setCurrentStepIndex, onClose = _f.onClose, 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;
@@ -66,7 +72,10 @@ export var Stepper = function (_a) {
         unmatchedHeadersCount ? setIsUnmatchedHeadersModalOpen(true) : setStep();
     };
     var continueToNextStep = function () {
-        if (isLastSubMatchStep) {
+        if (isVerifyStep) {
+            setCurrentStepIndex(1);
+        }
+        else if (isLastSubMatchStep) {
             setIsUnmatchedHeadersModalOpen(false);
             setCurrentStepIndex(2);
         }
@@ -88,6 +97,10 @@ export var Stepper = function (_a) {
             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: stepLabels.map(function (label, index) {
@@ -95,13 +108,10 @@ export var Stepper = function (_a) {
             var isCompleted = index < currentStepIndex;
             return (_jsxs(Div, __assign({ centered: true }, { children: [_jsx(Step, { index: index, label: label, isCompleted: isCompleted, isSelected: index === currentStepIndex }), !isLast && (_jsx(Div, __assign({ ml: 18, mr: 18, dflex: true }, { children: _jsx(ChevronRightIcon, {}) })))] }), index));
         }) })));
-    var leftButtonUI = (_jsx(Div, { children: currentStepIndex > 0 && !appResponse && (_jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: t("stepper.go_back") }))) }));
-    var rightButtonUI = (_jsxs(Div, __assign({ w: 100 }, { children: [isMatchStep && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: t("stepper.continue") }))), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: isSubmitDisabled, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: t("stepper.submit") })))] })));
-    var handleOnClose = function () {
-        setIsConfirmCloseModalOpen(true);
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 96, centered: true }, { children: [logoURL && _jsx(Logo, { src: logoURL, alt: "" }), _jsxs(Div, __assign({ spaceBetween: true, w: contentWidth }, { children: [leftButtonUI, _jsx(Div, __assign({ alignCenter: true }, { children: stepsUI })), rightButtonUI] })), _jsx(CloseIcon, __assign({ "data-test-id": "close-importer", centered: true, clickable: true, onClick: handleOnClose }, { children: closeIconCondensed }))] })), _jsx(UnmatchedHeadersModal, { isUnmatchedHeadersModalOpen: isUnmatchedHeadersModalOpen, unmatchedHeadersCount: unmatchedHeadersCount, onSetStep: function () { return setStep(); }, onCloseUnmatchedHeadersModal: function () {
+    var leftButtonUI = (_jsx(Div, __assign({ style: { flex: 1 } }, { children: _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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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.js

@@ -25,7 +25,7 @@ import { addToast } from "../../../common/Toast";
 import { Button } from "../../../common/buttons";
 import { DragAndDropSvg, UploadIndicatorSvg } from "./backgrounds";
 import { useTranslation } from "react-i18next";
-var DragAndDropCard = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 832px;\n  height: 530px;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n  ", "\n"], ["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 832px;\n  height: 530px;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n  ", "\n"])), function (props) { return (props.isDragActive ? "-10px" : "revert"); }, theme.colors.white, theme.colors.red50, function (props) {
+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) {
@@ -37,7 +37,7 @@ 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({ h4: 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 }, { 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") })) })] })));
+    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;

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/index.js

@@ -1,7 +1,3 @@
-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++) {
@@ -13,20 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import styled from "styled-components";
-import { theme } from "../../../styled/theme";
 import { colors } from "../../../styled/theme/colorPalette";
 import { Div } from "../../../styled/utils";
 import { closeIconWithCircle, errorIcon, fileExtensionIcon, } from "../../common/icons";
@@ -34,50 +17,29 @@ import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { useUploaderContext } from "../UploaderContextProvider";
 import { ImporterDropzone } from "./ImporterDropzone";
 import { useTranslation } from "react-i18next";
-var HeaderCardWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 24px;\n  box-sizing: border-box;\n  width: 256px;\n  overflow-y: auto;\n  ", ";\n  background: ", ";\n  max-height: 530px;\n"], ["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 24px;\n  box-sizing: border-box;\n  width: 256px;\n  overflow-y: auto;\n  ", ";\n  background: ", ";\n  max-height: 530px;\n"])), theme.colors.gray200, function (p) { return p.theme.css.scrollbarDark; }, function (p) { return p.theme.colors.white; });
-var ErrorCardContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  width: 1120px;\n  height: 550px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  justify-content: center;\n"], ["\n  border-radius: 8px;\n  width: 1120px;\n  height: 550px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  justify-content: center;\n"])), theme.colors.blue100, theme.colors.blue500);
+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(ErrorCardContainer, { children: [_jsx(Div, __assign({ mb: 28 }, { children: errorIcon })), _jsx(Div, __assign({ h3: true, mb: 16 }, { children: t("error.title") })), _jsx(Div, __assign({ body1: true }, { children: templateError }))] }));
-};
-var HeaderListItem = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-bottom: ", "px;\n"], ["\n  margin-bottom: ", "px;\n"])), function (p) { return (p.isLast ? 0 : 8); });
-var HeadersList = function (_a) {
-    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(HeaderListItem, __assign({ body1: true, isLast: isLast, mt: 16 }, { children: header }), index));
-            })] }));
-};
-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(Div, { children: _jsxs(HeaderCardWrapper, __assign({}, props, { children: [_jsx(Div, __assign({ body3: true, mb: 24 }, { children: t("header.title") })), requiredHeaders.length > 0 && (_jsx(HeadersList, { title: t("header.required_headers"), headers: requiredHeaders })), optionalHeaders.length > 0 && (_jsx(HeadersList, { title: t("header.optional_headers"), headers: optionalHeaders, mt: 30 }))] })) }));
+    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 LoadingCardWrapper = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-shadow: 0px 0px 12px rgba(33, 75, 167, 0.24);\n  border-radius: 8px;\n  max-width: 544px;\n  height: 102px;\n  padding-left: 30px;\n  padding-right: 30px;\n  background: ", ";\n"], ["\n  box-shadow: 0px 0px 12px rgba(33, 75, 167, 0.24);\n  border-radius: 8px;\n  max-width: 544px;\n  height: 102px;\n  padding-left: 30px;\n  padding-right: 30px;\n  background: ", ";\n"])), function (p) { return p.theme.colors.white; });
 var LoadingCard = function () {
     var fileName = useUploaderContext().fileName;
     var resetImport = useImporterContext().resetImport;
     var t = useTranslation("upload").t;
     var fileExtension = fileName && fileName.slice(fileName.lastIndexOf("."));
     var fileExtensionUI = (_jsxs(Div, { children: [fileExtensionIcon, _jsx(Div, __assign({ c: colors.gray900, helperText: true, mt: -26, ml: 7 }, { children: fileExtension }))] }));
-    return (_jsxs(LoadingCardWrapper, __assign({ spaceBetween: true, centered: true }, { children: [fileExtensionUI, _jsxs(Div, __assign({ mr: 30, ml: 30 }, { children: [_jsx(Div, __assign({ label2: true }, { children: fileName })), _jsx(Div, __assign({ helperText: true, c: colors.gray500 }, { children: t("loading.title") }))] })), _jsx(Div, __assign({ clickable: true, onClick: resetImport }, { children: closeIconWithCircle }))] })));
+    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(Div, __assign({ dflex: true }, { children: [_jsx(ImporterDropzone, {}), _jsx(HeaderCard, { ml: 25, templateHeaders: templateHeaders })] }))) }));
+    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 = (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ textAlignCenter: true, dflex: true, centered: true }, { children: _jsx(Div, __assign({ h2: true, mb: 16, mt: 64 }, { children: t("title") })) })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: t("description") }))] }));
-    return (_jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [headerUI, isUploading ? (_jsx(Div, __assign({ mt: 40 }, { children: _jsx(LoadingCard, {}) }))) : (_jsx(ImporterSection, {}))] })));
+    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 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -13,19 +13,16 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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-left: 8px;\n    margin-right: 8px;\n  }\n"], ["\n  > div {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n"])));
+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 _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({ isSmall: true, variant: "secondary", onClick: resetImport }, { children: t("headers_preview.cancel") })), _jsx(Button, __assign({ isSmall: true, onClick: onClick }, { children: t("headers_preview.continue") }))] })));
+    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.js

@@ -1,3 +1,7 @@
+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++) {
@@ -17,13 +21,17 @@ import { useReviewContext } from "../Review/ReviewContextProvider";
 import { HeaderButtons } from "./HeaderButtons";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+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, centered: true, pt: 40, h100: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: t("headers_preview.title") })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: t("headers_preview.description") })), _jsx(HeaderButtons, {}), _jsx(Div, __assign({ w100: true, h100: true }, { children: initialDataSet && (_jsx(Spreadsheet, { rowWidth: getSpreadsheetRowWidth(fields, 6), isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
+    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, { rowWidth: getSpreadsheetRowWidth(fields, 6), 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/common/Spreadsheet/SpreadsheetContextProvider.d.ts

@@ -25,6 +25,7 @@ type State = {
     filteredInputValue: string;
     setFilteredInputValue: React.Dispatch<React.SetStateAction<string>>;
     addNewRowsToSpreadsheet: () => void;
+    checkboxColumnWidth: number;
 } & ValidationState;
 type Props = {
     initialDataSet: RecordDataSet;

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

@@ -105,7 +105,15 @@ export var SpreadsheetContextProvider = function (_a) {
         setSortByFieldErrors(null);
     }, []);
     var lastClickedIndexRef = useRef(null);
-    var value = __assign(__assign({ data: data, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, rowWidth: rowWidth, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, highlightFirstRow: highlightFirstRow, options: options, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: deleteRecords, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet });
+    var checkboxColumnWidth = useMemo(function () {
+        var _a, _b, _c, _d;
+        var lastRowIndexLength = (_d = (_c = (_b = (_a = data[data.length - 1]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.rowIndex) === null || _c === void 0 ? void 0 : _c.toString()) === null || _d === void 0 ? void 0 : _d.length;
+        var singleLetterWidth = 15;
+        var horizontalSpacing = 8;
+        var baseCheckboxColumnWidth = lastRowIndexLength * singleLetterWidth + horizontalSpacing;
+        return baseCheckboxColumnWidth < 40 ? 40 : baseCheckboxColumnWidth;
+    }, [data]);
+    var value = __assign(__assign({ data: data, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, rowWidth: rowWidth, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, highlightFirstRow: highlightFirstRow, options: options, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: deleteRecords, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, checkboxColumnWidth: checkboxColumnWidth });
     return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
 };
 export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };