fuse-importer 0.23.3 → 0.23.6

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

@@ -13,42 +13,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 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)
@@ -63,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState, useCallback, } from "react";
 import styled from "styled-components";
+import { debounce } from "lodash";
 import { getTableHeight } from "..";
 import { TableView as TableViewBase, TableViewCellContainer, TableViewRow, } from "../../../common/Table/TableView";
 import { colors } from "../../../styled/theme/colorPalette";
@@ -78,7 +43,7 @@ import { inputTypes } from "./inputs";
 var SpreadSheetWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n"], ["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; });
 var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"])), function (p) { return p.theme.colors.gray50; }, TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; });
 var Spreadsheet = function (_a) {
-    var isReadOnly = _a.isReadOnly, initialData = _a.initialData, rowWidth = _a.rowWidth, fields = _a.fields, appResponse = _a.appResponse, options = _a.options, _b = _a.onValidateRecord, onValidateRecord = _b === void 0 ? null : _b, submittedData = _a.submittedData, setReviewedData = _a.setReviewedData, _c = _a.onValidateBatch, onValidateBatch = _c === void 0 ? null : _c, _d = _a.highlightFirstRow, highlightFirstRow = _d === void 0 ? false : _d;
+    var isReadOnly = _a.isReadOnly, initialData = _a.initialData, rowWidth = _a.rowWidth, fields = _a.fields, appResponse = _a.appResponse, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.onValidateRecord, onValidateRecord = _c === void 0 ? null : _c, submittedData = _a.submittedData, setReviewedData = _a.setReviewedData, _d = _a.onValidateBatch, onValidateBatch = _d === void 0 ? null : _d, _e = _a.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e;
     return (_jsx(SpreadsheetContextProvider, __assign({}, {
         appResponse: appResponse,
         submittedData: submittedData,
@@ -103,9 +68,8 @@ var SpreadSheetWithContext = function () {
 var SpreadsheetData = function () {
     var _a = useSpreadsheetReviewContext(), appResponse = _a.appResponse, isSubmitting = _a.isSubmitting;
     var _b = useSpreadsheetContext(), fields = _b.fields, data = _b.data, isLoading = _b.isLoading, isReadOnly = _b.isReadOnly, rowWidth = _b.rowWidth, sortByFieldErrors = _b.sortByFieldErrors, setSortByFieldErrors = _b.setSortByFieldErrors, validateRenderedRecords = _b.validateRenderedRecords, setIsLoading = _b.setIsLoading;
-    var validationTimeoutRef = useRef(null);
-    var _c = useState(0), scrollTop = _c[0], setScrollTop = _c[1];
-    var _d = useState(true), isSortingTableData = _d[0], setIsSortingTableData = _d[1];
+    var _c = useState(true), isSortingTableData = _c[0], setIsSortingTableData = _c[1];
+    var rowNumbersGridRef = useRef();
     useEffect(function () {
         setIsSortingTableData(true);
         setTimeout(function () {
@@ -113,23 +77,14 @@ var SpreadsheetData = function () {
             setSortByFieldErrors(null);
         }, 10);
     }, [sortByFieldErrors]);
-    var onSectionRendered = useCallback(function (_a) {
+    var onSectionRendered = useCallback(debounce(function (_a) {
         var data = _a.data;
-        return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_b) {
-                if (isSortingTableData)
-                    return [2 /*return*/];
-                if (!isReadOnly)
-                    setIsLoading(true);
-                if (validationTimeoutRef.current)
-                    clearTimeout(validationTimeoutRef.current);
-                validationTimeoutRef.current = setTimeout(function () {
-                    validateRenderedRecords(data);
-                }, 200);
-                return [2 /*return*/];
-            });
-        });
-    }, [isSortingTableData]);
+        if (isSortingTableData)
+            return;
+        if (!isReadOnly)
+            setIsLoading(true);
+        validateRenderedRecords(data);
+    }, 200), [isSortingTableData, validateRenderedRecords]);
     var columns = useMemo(function () {
         return fields.map(function (field) { return ({
             Header: function () { return (_jsx(FieldHeader, { field: field, sortByFieldErrors: setSortByFieldErrors })); },
@@ -144,6 +99,12 @@ var SpreadsheetData = function () {
         data,
         appResponse,
     ]);
+    var onTableScroll = useCallback(function (scrollTop) {
+        if (rowNumbersGridRef.current) {
+            var grid = rowNumbersGridRef.current;
+            grid.scrollTo({ scrollTop: scrollTop });
+        }
+    }, []);
     var spreadsheetHeight = getTableHeight({
         headerHeight: spreadsheetHeaderHeightPx,
         rowHeight: spreadsheetRowHeightPx,
@@ -151,7 +112,7 @@ var SpreadsheetData = function () {
         minimumTableHeight: 450,
         maxVisibleRows: 12,
     });
-    return (_jsxs(_Fragment, { children: [_jsx(GlobalStyle, {}), !isSortingTableData && !isSubmitting && (_jsxs(SpreadSheetWrapper, __assign({ h: spreadsheetHeight, dflex: true, w: 1400 }, { children: [_jsx(SpreadsheetRowNumbers, { spreadsheetHasXScroll: rowWidth > 1, scrollTop: scrollTop, height: spreadsheetHeight }), _jsx(TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, onSectionRendered: onSectionRendered, onTableScroll: function (_scrollTop) { return setScrollTop(_scrollTop); }, h: spreadsheetHeight, rowWidth: rowWidth, data: unsubmittedData, columns: columns, isLoading: isLoading })] })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(GlobalStyle, {}), !isSortingTableData && !isSubmitting && (_jsxs(SpreadSheetWrapper, __assign({ h: spreadsheetHeight, dflex: true, w: 1400 }, { children: [_jsx(SpreadsheetRowNumbers, { gridRef: rowNumbersGridRef, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight }), _jsx(TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, onSectionRendered: onSectionRendered, onTableScroll: onTableScroll, h: spreadsheetHeight, rowWidth: rowWidth, data: unsubmittedData, columns: columns, isLoading: isLoading })] })))] }));
 };
 export { Spreadsheet };
 var templateObject_1, templateObject_2;

package/lib/esm/Importer/index.js

@@ -64,12 +64,12 @@ var Importer = function (_a) {
 };
 var ImporterWithContext = function (_a) {
     var onSubmit = _a.onSubmit;
-    var _b = useImporterContext(), inTrialMode = _b.inTrialMode, currentStepIndex = _b.currentStepIndex, matcherSubstep = _b.matcherSubstep, theme = _b.theme, logoURL = _b.logoURL, zIndex = _b.importerOptions.zIndex;
+    var _b = useImporterContext(), inTrialMode = _b.inTrialMode, currentStepIndex = _b.currentStepIndex, matcherSubstep = _b.matcherSubstep, theme = _b.theme, logoURL = _b.logoURL, _c = _b.importerOptions, zIndex = _c.zIndex, loadingComponent = _c.loadingComponent;
     var layoutRef = useRef(null);
     useEffect(function () {
         layoutRef.current.scrollTo(0, 0);
     }, [currentStepIndex, matcherSubstep]);
-    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), _jsx(SpreadsheetReviewContextProvider, __assign({ onSubmit: onSubmit }, { children: _jsxs(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: [_jsxs(Div, { children: [_jsx(PreviewModeBanner, {}), _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: steps.map(function (step) { return step.label; }), logoURL: logoURL })] }), _jsx(Content, { children: steps[currentStepIndex].component }), inTrialMode && (_jsx(Content, { children: _jsx(Footer, {}) }))] })) }))] })));
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), _jsx(SpreadsheetReviewContextProvider, __assign({ loadingComponent: loadingComponent, onSubmit: onSubmit }, { children: _jsxs(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: [_jsxs(Div, { children: [_jsx(PreviewModeBanner, {}), _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: steps.map(function (step) { return step.label; }), logoURL: logoURL })] }), _jsx(Content, { children: steps[currentStepIndex].component }), inTrialMode && (_jsx(Content, { children: _jsx(Footer, {}) }))] })) }))] })));
 };
 export * from "./common/Spreadsheet";
 export * from "./common/utils";

package/lib/esm/api/index.d.ts

@@ -9,6 +9,7 @@ declare module "axios" {
         withReq?: boolean;
         successMsg?: string | SuccessCallback;
         errorMsg?: string;
+        authToken?: string;
     }
 }
 declare const api: import("axios").AxiosInstance;

package/lib/esm/api/index.js

@@ -26,20 +26,20 @@ var getTTL = function (ttl) {
 };
 var requestInterceptor = {
     onFulFilled: function (_config) {
-        var _a;
+        var _a, _b;
         _config.paramsSerializer = function (params) {
             return Qs.stringify(params, {
                 arrayFormat: config.arrayFormat ? config.arrayFormat : "brackets",
             });
         };
-        var authToken = (_a = JSON.parse(ls === null || ls === void 0 ? void 0 : ls.getItem("user"))) === null || _a === void 0 ? void 0 : _a.token;
+        var authToken = (_a = _config.authToken) !== null && _a !== void 0 ? _a : (_b = JSON.parse(ls === null || ls === void 0 ? void 0 : ls.getItem("user"))) === null || _b === void 0 ? void 0 : _b.token;
         var config = Object.assign(_config);
         if (authToken)
             config.headers.Authorization = "Bearer ".concat(authToken);
         if (!config.toPublicApi)
             config.url = "".concat(process.env.REACT_APP_API_BASE_URL || "").concat(config.url);
         if (config.cache) {
-            var _b = getCacheKeys(config), key = _b.key, ttlKey = _b.ttlKey;
+            var _c = getCacheKeys(config), key = _c.key, ttlKey = _c.ttlKey;
             var ttl = ls === null || ls === void 0 ? void 0 : ls.getItem(ttlKey);
             if (config.refresh || (ttl && ttlIsExpired(ttl))) {
                 ls === null || ls === void 0 ? void 0 : ls.removeItem(key);

package/lib/esm/common/Modal.d.ts

@@ -3,11 +3,14 @@ export declare const ModalContainer: import("styled-components").StyledComponent
 export declare const ModalBackdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../styled/utils").CSSProps, never>;
 export declare const ModalWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../styled/utils").CSSProps, never>;
 export declare const ModalCloseIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../styled/utils").CSSProps, never>;
-export declare const Modal: ({ isOpen, onClose, children, withCloseIcon, withBackdropClose, className, }: {
+declare type ModalProps = {
     isOpen?: boolean;
-    onClose?: any;
-    children: any;
+    onClose?: () => void | null;
+    children?: React.ReactNode;
     withCloseIcon?: boolean;
     withBackdropClose?: boolean;
     className?: string;
-}) => JSX.Element;
+    testId?: string;
+};
+export declare const Modal: ({ isOpen, onClose, children, withCloseIcon, withBackdropClose, className, testId, }: ModalProps) => JSX.Element;
+export {};

package/lib/esm/common/Modal.js

@@ -22,7 +22,7 @@ export var ModalBackdrop = styled(Div)(templateObject_2 || (templateObject_2 = _
 export var ModalWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  padding: 32px 56px;\n  border-radius: 8px;\n  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.32);\n"], ["\n  background: ", ";\n  padding: 32px 56px;\n  border-radius: 8px;\n  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.32);\n"])), function (props) { return props.theme.colors.white; });
 export var ModalCloseIcon = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 0;\n  display: flex;\n  flex-direction: row-reverse;\n"], ["\n  height: 0;\n  display: flex;\n  flex-direction: row-reverse;\n"])));
 export var Modal = function (_a) {
-    var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? null : _c, children = _a.children, _d = _a.withCloseIcon, withCloseIcon = _d === void 0 ? true : _d, _e = _a.withBackdropClose, withBackdropClose = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? "" : _f;
-    return (_jsx(_Fragment, { children: isOpen && (_jsxs(Div, __assign({ className: className }, { children: [_jsx(ModalBackdrop, { onClick: withBackdropClose ? onClose : null }), _jsx(ModalContainer, { children: _jsxs(ModalWrapper, { children: [withCloseIcon && (_jsx(ModalCloseIcon, { children: _jsx(Div, __assign({ clickable: true, mt: -10, mr: -20, onClick: onClose }, { children: closeIcon })) })), _jsx(Div, { children: children })] }) })] }))) }));
+    var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? null : _c, children = _a.children, _d = _a.withCloseIcon, withCloseIcon = _d === void 0 ? true : _d, _e = _a.withBackdropClose, withBackdropClose = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? "" : _f, testId = _a.testId;
+    return (_jsx(_Fragment, { children: isOpen && (_jsxs(Div, __assign({ className: className, "data-testid": testId }, { children: [_jsx(ModalBackdrop, { onClick: withBackdropClose ? onClose : null }), _jsx(ModalContainer, { children: _jsxs(ModalWrapper, { children: [withCloseIcon && (_jsx(ModalCloseIcon, { children: _jsx(Div, __assign({ clickable: true, mt: -10, mr: -20, onClick: onClose }, { children: closeIcon })) })), _jsx(Div, { children: children })] }) })] }))) }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/common/Table/TableDataProvider.js

@@ -57,7 +57,7 @@ export var SortDirection;
 var TableContext = createContext({});
 export var TableDataProvider = function (_a) {
     var children = _a.children, dataUrl = _a.dataUrl, _b = _a.query, query = _b === void 0 ? "" : _b, _c = _a.filters, filters = _c === void 0 ? null : _c, _d = _a.defaultSortBy, defaultSortBy = _d === void 0 ? { field: null, direction: null } : _d, _e = _a.onGetData, onGetData = _e === void 0 ? null : _e;
-    var _f = useState(null), data = _f[0], setData = _f[1];
+    var _f = useState([]), data = _f[0], setData = _f[1];
     var _g = useState(false), isLoading = _g[0], setLoading = _g[1];
     var _h = useState(1), currentPage = _h[0], setCurrentPage = _h[1];
     var _j = useState(null), totalPages = _j[0], setTotalPages = _j[1];
@@ -65,12 +65,15 @@ export var TableDataProvider = function (_a) {
     var _l = useState(0), totalCount = _l[0], setTotalCount = _l[1];
     var _m = useState(7), pageSize = _m[0], setPageSize = _m[1];
     var getData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var payload;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var payload, e_1;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
                     setLoading(true);
+                    _d.label = 1;
+                case 1:
+                    _d.trys.push([1, 3, , 4]);
                     return [4 /*yield*/, api.get(dataUrl, {
                             params: {
                                 query: query,
@@ -81,33 +84,31 @@ export var TableDataProvider = function (_a) {
                                 filters: filters || {},
                             },
                         })];
-                case 1:
-                    payload = (_c.sent()).data;
+                case 2:
+                    payload = (_d.sent()).data;
+                    if (((_a = payload === null || payload === void 0 ? void 0 : payload.data) === null || _a === void 0 ? void 0 : _a.length) === 0 && currentPage > 1) {
+                        setCurrentPage(function (oldValue) { return oldValue - 1; });
+                        return [2 /*return*/];
+                    }
                     if (onGetData) {
                         onGetData(payload);
                     }
                     setData(payload.data);
-                    setTotalPages((_a = payload.pagination) === null || _a === void 0 ? void 0 : _a.total_pages);
-                    setTotalCount((_b = payload.pagination) === null || _b === void 0 ? void 0 : _b.total_count);
+                    setTotalPages((_b = payload.pagination) === null || _b === void 0 ? void 0 : _b.total_pages);
+                    setTotalCount((_c = payload.pagination) === null || _c === void 0 ? void 0 : _c.total_count);
+                    setLoading(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    e_1 = _d.sent();
                     setLoading(false);
-                    return [2 /*return*/];
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
             }
         });
     }); };
-    var resetPagination = function () {
-        setCurrentPage(null);
-        setTimeout(function () {
-            setCurrentPage(1);
-        }, 10);
-    };
-    useEffect(function () {
-        resetPagination();
-    }, [query, dataUrl, sortBy, filters, pageSize]);
     useEffect(function () {
-        if (currentPage) {
-            getData();
-        }
-    }, [currentPage]);
+        getData();
+    }, [query, dataUrl, sortBy, filters, pageSize, currentPage]);
     var value = {
         data: data,
         isLoading: isLoading,

package/lib/esm/common/Table/TableView/TableHeaders.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { TableViewProps } from ".";
 import { DivCSSProps } from "../../../styled/utils";
 import { SortDirection } from "../TableDataProvider";
@@ -15,6 +15,7 @@ export declare const TableHeadersContent: import("styled-components").StyledComp
 declare type TableHeadersProps = Pick<TableViewProps, "columns" | "sortBy" | "setSortBy" | "rowHeight" | "rowWidth"> & {
     scrollLeft: number;
     height: number;
+    containerRef: React.MutableRefObject<HTMLDivElement>;
 } & DivCSSProps;
-export declare const TableHeaders: ({ scrollLeft, columns, sortBy, setSortBy, rowHeight, rowWidth, height, ...props }: TableHeadersProps) => JSX.Element;
+export declare const TableHeaders: ({ scrollLeft, columns, sortBy, rowHeight, containerRef, setSortBy, rowWidth, height, ...props }: TableHeadersProps) => JSX.Element;
 export {};

package/lib/esm/common/Table/TableView/TableHeaders.js

@@ -25,7 +25,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
 import styled, { css } from "styled-components";
 import { Div } from "../../../styled/utils";
 import { chevronDown as chevronDownIcon } from "../icons";
@@ -40,10 +39,7 @@ export var SortIndicator = styled(Div)(templateObject_4 || (templateObject_4 = _
 export var TableHeadersContainer = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
 export var TableHeadersContent = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* table scrollbar offset */\n  border-right: solid 10px ", ";\n"], ["\n  /* table scrollbar offset */\n  border-right: solid 10px ", ";\n"])), function (p) { return p.theme.colors.tableHeader; });
 export var TableHeaders = function (_a) {
-    var _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, columns = _a.columns, sortBy = _a.sortBy, setSortBy = _a.setSortBy, rowHeight = _a.rowHeight, _c = _a.rowWidth, rowWidth = _c === void 0 ? 1 : _c, _d = _a.height, height = _d === void 0 ? defaultTableHeaderHeightPx : _d, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "setSortBy", "rowHeight", "rowWidth", "height"]);
-    var containerRef = useRef(null);
-    if (containerRef.current)
-        containerRef.current.scrollLeft = scrollLeft;
+    var _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, columns = _a.columns, sortBy = _a.sortBy, rowHeight = _a.rowHeight, containerRef = _a.containerRef, setSortBy = _a.setSortBy, _c = _a.rowWidth, rowWidth = _c === void 0 ? 1 : _c, _d = _a.height, height = _d === void 0 ? defaultTableHeaderHeightPx : _d, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "rowHeight", "containerRef", "setSortBy", "rowWidth", "height"]);
     return (_jsx(TableHeadersContainer, __assign({ ref: containerRef }, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: "".concat(100 * rowWidth, "%") }, { children: columns.map(function (column, index) {
                 var header = column.header, Header = column.Header;
                 var onHeaderClick = function () {

package/lib/esm/common/Table/TableView/TableRow.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { TableViewProps } from ".";
 import { DivCSSProps } from "../../../styled/utils";
-export declare const Cell: (props: any) => JSX.Element;
+export declare const Cell: React.MemoExoticComponent<(props: any) => JSX.Element>;
 declare type TableViewRowProps = {
     isHighlighted: boolean;
     isLast: boolean;

package/lib/esm/common/Table/TableView/TableRow.js

@@ -25,18 +25,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from "react";
+import React from "react";
+import { areEqual } from "react-window";
 import styled, { css } from "styled-components";
 import { Div } from "../../../styled/utils";
 import { columnWidthPercentage, TableViewCellContainer } from "./common";
-export var Cell = function (props) {
-    var row = props.row, children = props.children, cellProps = __rest(props, ["row", "children"]);
-    return useMemo(function () { return (_jsx(TableViewCellContainer, __assign({}, cellProps, { children: children }))); }, 
-    // using [row] with usememo optimizes table renders but disables react hotreloading
-    // [row, children] enables hotreloading, missing tests for optimizations
-    // should we use [row] instead of [row, children] for table optimization ?
-    [row]);
-};
+export var Cell = React.memo(function (props) {
+    var children = props.children, cellProps = __rest(props, ["children"]);
+    return (_jsx(TableViewCellContainer, __assign({}, cellProps, { children: children })));
+}, areEqual);
 export var TableViewRow = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: white;\n  ", "\n  ", "\n"], ["\n  background-color: white;\n  ", "\n  ", "\n"])), 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; });
 }, function (p) {
@@ -51,7 +48,7 @@ export var TableRow = function (_a) {
                         ? function () {
                             onRowClick(row);
                         }
-                        : null, w: columnWidthPercentage(column, columns) }, { children: _jsx(_Fragment, { children: Content ? (_jsx(Content, __assign({}, row, { rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }) }), indexJ));
+                        : null, w: columnWidthPercentage(column, columns) }, { children: Content ? (_jsx(Content, __assign({}, row, { rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), indexJ));
             }) })) }));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/Table/TableView/index.d.ts

@@ -4,7 +4,6 @@ import { SortBy } from "../TableDataProvider";
 export * from "./common";
 export * from "./TableHeaders";
 export * from "./TableRow";
-export { TableView };
 declare type TableViewWrapperProps = {
     isLoading: boolean;
 };
@@ -38,4 +37,4 @@ export declare type TableViewProps = {
     onTableScroll?: (scrollTop: number) => void;
     onRowClick?: (row: any) => void;
 } & DivCSSProps;
-declare const TableView: ({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, ...props }: TableViewProps) => JSX.Element;
+export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, ...props }: TableViewProps) => JSX.Element>;

package/lib/esm/common/Table/TableView/index.js

@@ -25,8 +25,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { AutoSizer, Grid } from "react-virtualized";
+import React, { useRef, useMemo, useCallback } from "react";
+import { FixedSizeGrid as Grid, areEqual } from "react-window";
+import AutoSizer from "react-virtualized-auto-sizer";
 import styled, { css } from "styled-components";
 import { Div } from "../../../styled/utils";
 import { Spinner } from "../../Spinner";
@@ -36,67 +37,73 @@ import { TableRow } from "./TableRow";
 export * from "./common";
 export * from "./TableHeaders";
 export * from "./TableRow";
-export { TableView };
 export var TableViewWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  border-radius: 8px;\n  border: solid 1px ", ";\n  overflow: hidden;\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n\n  // fix scrollbar layout issues on windows/macos\n  .ReactVirtualized__Grid {\n    ", ";\n  }\n"], ["\n  ", "\n  border-radius: 8px;\n  border: solid 1px ", ";\n  overflow: hidden;\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n\n  // fix scrollbar layout issues on windows/macos\n  .ReactVirtualized__Grid {\n    ", ";\n  }\n"])), function (p) {
     return p.isLoading && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      opacity: 0.5;\n    "], ["\n      opacity: 0.5;\n    "])));
 }, function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.css.scrollbarDark; });
 var SpinnerWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n  z-index: 100;\n"], ["\n  pointer-events: none;\n  z-index: 100;\n"])));
 var tableHeaderId = "tableHeaderId";
-var TableView = function (_a) {
+var buildGridStyles = function (rowWidth) {
+    /* using style={{ willChange: "unset" }} is important for having items
+              like backdrops with position fixed inside of the table working as
+              expected. Required for dropdowns in cells */
+    var gridStyles = {
+        outline: "none",
+        willChange: "unset",
+    };
+    if (rowWidth === 1)
+        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden", overflowY: "auto" });
+    else if (rowWidth > 1)
+        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "scroll" });
+    return gridStyles;
+};
+var Cell = React.memo(function (_a) {
+    var data = _a.data, rowIndex = _a.rowIndex, style = _a.style;
+    var items = data.items, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight;
+    var item = items[rowIndex];
+    return (_jsx(Div, __assign({ style: style }, { children: _jsx(TableRow, { columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true }) })));
+}, areEqual);
+export var TableView = React.memo(function (_a) {
     var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.sortBy, sortBy = _c === void 0 ? { field: null, direction: null } : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e, _f = _a.setSortBy, setSortBy = _f === void 0 ? null : _f, _g = _a.rowWidth, rowWidth = _g === void 0 ? 1 : _g, onSectionRendered = _a.onSectionRendered, _h = _a.tableHeadersHeight, tableHeadersHeight = _h === void 0 ? defaultTableHeaderHeightPx : _h, _j = _a.rowHeight, rowHeight = _j === void 0 ? defaultTableRowHeightPx : _j, _k = _a.h, h = _k === void 0 ? 500 : _k, _l = _a.onTableScroll, onTableScroll = _l === void 0 ? null : _l, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll"]);
-    var _m = useState(0), scrollLeft = _m[0], setScrollLeft = _m[1];
     /*
-      multiply the rowWidth by 0.95 to let the user know they can scroll
-      horizontally (will display partial column on the right)
-    */
+    multiply the rowWidth by 0.95 to let the user know they can scroll
+    horizontally (will display partial column on the right)
+  */
     var _rowWidth = rowWidth > 1 ? rowWidth * 0.95 : rowWidth;
-    var tableHeadersUI = (_jsx(_Fragment, { children: data.length > 0 && (_jsx(TableHeaders, __assign({ id: tableHeaderId, height: tableHeadersHeight }, {
-            rowHeight: rowHeight,
-            rowWidth: _rowWidth,
-            scrollLeft: scrollLeft,
-            columns: columns,
-            sortBy: sortBy,
-            setSortBy: setSortBy,
-        }))) }));
+    var headerContainerRef = useRef();
+    var tableHeadersUI = data.length > 0 && (_jsx(TableHeaders, { id: tableHeaderId, containerRef: headerContainerRef, height: tableHeadersHeight, rowHeight: rowHeight, rowWidth: _rowWidth, scrollLeft: 0, columns: columns, sortBy: sortBy, setSortBy: setSortBy }));
     var onScroll = function (_a) {
-        var scrollTop = _a.scrollTop, _scrollLeft = _a.scrollLeft;
-        setScrollLeft(_scrollLeft);
-        if (onTableScroll)
+        var scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
+        if (headerContainerRef.current) {
+            headerContainerRef.current.scrollLeft = scrollLeft;
+        }
+        if (onTableScroll) {
             onTableScroll(scrollTop);
+        }
     };
-    var _onSectionRendered = function (_a) {
-        var rowStartIndex = _a.rowStartIndex, rowStopIndex = _a.rowStopIndex;
-        if (onSectionRendered)
+    var onItemsRendered = useCallback(function (_a) {
+        var rowStartIndex = _a.overscanRowStartIndex, rowStopIndex = _a.overscanRowStopIndex;
+        if (onSectionRendered) {
             onSectionRendered({
                 rowStartIndex: rowStartIndex,
                 rowStopIndex: rowStopIndex,
                 data: data.slice(rowStartIndex, rowStopIndex + 1),
             });
-    };
-    var rowRenderer = function (_a) {
-        var rowIndex = _a.rowIndex, key = _a.key, style = _a.style;
-        return (_jsx(Div, __assign({ style: style }, { children: _jsx(TableRow, __assign({}, {
-                columns: columns,
-                onRowClick: onRowClick,
-                highlightFirstRow: highlightFirstRow,
-            }, { h: rowHeight, row: data[rowIndex], indexI: rowIndex, isLast: rowIndex === data.length - 1, pRelative: true })) }), key));
-    };
+        }
+    }, [data, onSectionRendered]);
     var loadingUI = (_jsx(_Fragment, { children: isLoading && (_jsx(SpinnerWrapper, __assign({ pRelative: true }, { children: _jsx(Div, __assign({ w100: true, h100: true, centered: true, h: 400, pAbsolute: true }, { children: _jsx(Spinner, {}) })) }))) }));
-    var tableHeight = pageSize ? pageSize * rowHeight + tableHeadersHeight : h;
+    var tableHeight = pageSize
+        ? pageSize * rowHeight + tableHeadersHeight
+        : h;
+    var itemData = useMemo(function () { return ({
+        items: data,
+        onRowClick: onRowClick,
+        columns: columns,
+        highlightFirstRow: highlightFirstRow,
+        rowHeight: rowHeight,
+    }); }, [data, onRowClick, columns, highlightFirstRow, rowHeight]);
     return (_jsxs(TableViewWrapper, __assign({}, { isLoading: isLoading }, { h: tableHeight }, props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
                     var width = _a.width, height = _a.height;
-                    /* using style={{ willChange: "unset" }} is important for having items
-                      like backdrops with position fixed inside of the table working as
-                      expected. Required for dropdowns in cells */
-                    var gridStyles = {
-                        outline: "none",
-                        willChange: "unset",
-                    };
-                    if (_rowWidth === 1)
-                        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden", overflowY: "auto" });
-                    else if (_rowWidth > 1)
-                        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "scroll" });
-                    return (_jsx(Grid, { scrollLeft: scrollLeft, style: gridStyles, width: width, columnCount: 1, onSectionRendered: _onSectionRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, cellRenderer: rowRenderer, rowCount: data.length }));
+                    return (_jsx(Grid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: Cell })));
                 } })] })));
-};
+}, areEqual);
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/TooltipProvider.d.ts

@@ -8,6 +8,7 @@ export declare const TooltipContent: import("styled-components").StyledComponent
 declare type TooltipProps = {
     tooltip: JSX.Element | string;
     placement?: Placement;
+    isDisabled?: boolean;
 } & DivCSSProps;
 export declare const TooltipProvider: React.FC<TooltipProps>;
 export {};

package/lib/esm/common/TooltipProvider.js

@@ -31,11 +31,11 @@ import styled from "styled-components";
 import { Div } from "../styled/utils";
 export var TooltipContent = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n"], ["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n"])), function (p) { return p.theme.css.body4; }, function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.black; });
 export var TooltipProvider = function (_a) {
-    var tooltip = _a.tooltip, _b = _a.placement, placement = _b === void 0 ? "top-start" : _b, children = _a.children, props = __rest(_a, ["tooltip", "placement", "children"]);
-    var _c = useState(false), isDisplayingTooltip = _c[0], setIsDisplayingTooltip = _c[1];
-    var _d = useState(null), referenceElement = _d[0], setReferenceElement = _d[1];
-    var _e = useState(null), popperElement = _e[0], setPopperElement = _e[1];
-    var _f = usePopper(referenceElement, popperElement, {
+    var tooltip = _a.tooltip, children = _a.children, _b = _a.placement, placement = _b === void 0 ? "top-start" : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, props = __rest(_a, ["tooltip", "children", "placement", "isDisabled"]);
+    var _d = useState(false), isDisplayingTooltip = _d[0], setIsDisplayingTooltip = _d[1];
+    var _e = useState(null), referenceElement = _e[0], setReferenceElement = _e[1];
+    var _f = useState(null), popperElement = _f[0], setPopperElement = _f[1];
+    var _g = usePopper(referenceElement, popperElement, {
         placement: placement,
         modifiers: [
             {
@@ -45,11 +45,11 @@ export var TooltipProvider = function (_a) {
                 },
             },
         ],
-    }), styles = _f.styles, attributes = _f.attributes, update = _f.update;
+    }), styles = _g.styles, attributes = _g.attributes, update = _g.update;
     useEffect(function () {
         if (update)
             update();
     }, [isDisplayingTooltip]);
-    return (_jsxs(Div, __assign({ dim: "100%", ref: setReferenceElement, onMouseOver: function () { return setIsDisplayingTooltip(true); }, onMouseOut: function () { return setIsDisplayingTooltip(false); } }, props, { children: [children, isDisplayingTooltip && tooltip && (_jsx(TooltipContent, __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: tooltip })))] })));
+    return (_jsxs(Div, __assign({ dim: "100%", ref: setReferenceElement, onMouseOver: function () { return isDisabled || setIsDisplayingTooltip(true); }, onMouseOut: function () { return isDisabled || setIsDisplayingTooltip(false); } }, props, { children: [children, isDisplayingTooltip && tooltip && (_jsx(TooltipContent, __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: tooltip })))] })));
 };
 var templateObject_1;

package/lib/esm/common/buttons.js

@@ -51,10 +51,10 @@ export var ButtonWrapper = styled(Div)(templateObject_10 || (templateObject_10 =
 export var ButtonElementWrapper = styled(HTMLButton)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), commonButtonStyle);
 export var Button = function (_a) {
     var _b = _a.onClick, onClick = _b === void 0 ? null : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.variant, variant = _d === void 0 ? "primary" : _d, _e = _a.isSmall, isSmall = _e === void 0 ? false : _e, children = _a.children, _f = _a.isButtonElement, isButtonElement = _f === void 0 ? false : _f, props = __rest(_a, ["onClick", "isDisabled", "variant", "isSmall", "children", "isButtonElement"]);
-    return (_jsx(_Fragment, { children: isButtonElement ? (_jsx(ButtonElementWrapper, __assign({ w100: true, isSmall: isSmall, isDisabled: isDisabled, variant: variant, type: "submit" }, props, { children: children }))) : (_jsx(ButtonWrapper, __assign({ w100: true, isSmall: isSmall, onKeyDown: function (_a) {
+    return (_jsx(_Fragment, { children: isButtonElement ? (_jsx(ButtonElementWrapper, __assign({ w100: true, isSmall: isSmall, isDisabled: isDisabled, disabled: isDisabled, variant: variant, type: "submit" }, props, { children: children }))) : (_jsx(ButtonWrapper, __assign({ w100: true, isSmall: isSmall, onKeyDown: function (_a) {
                 var code = _a.code;
                 if (code === "Space" || (code === "Enter" && onClick))
                     onClick();
-            }, tabIndex: 0 }, __assign({ variant: variant, isDisabled: isDisabled, onClick: onClick }, props), { children: _jsx(_Fragment, { children: children }) }))) }));
+            }, tabIndex: 0 }, __assign({ variant: variant, isDisabled: isDisabled, onClick: onClick, disabled: isDisabled }, props), { children: _jsx(_Fragment, { children: children }) }))) }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/lib/esm/common/index.d.ts

@@ -8,7 +8,7 @@ export declare const MenuItem: import("styled-components").StyledComponent<"div"
 declare type LabelProps = {
     isDisabled?: boolean;
 };
-export declare const FormInputLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CSSProps & LabelProps, never>;
+export declare const FormInputLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, CSSProps & LabelProps, never>;
 export declare const InfoDivider: ({ msg }: {
     msg: any;
 }) => JSX.Element;

package/lib/esm/common/index.js

@@ -15,13 +15,13 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-import { Div, themeProps } from "../styled/utils";
+import { Div, themeProps, Label } from "../styled/utils";
 import { colors } from "../styled/theme/colorPalette";
 export var fuseImporterId = "fuse-importer-root";
 export var MenuItem = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  background: ", ";\n  color: ", ";\n  ", "\n  ", ";\n  ", "\n  :hover {\n    background: ", ";\n    cursor: pointer;\n  }\n"], ["\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  background: ", ";\n  color: ", ";\n  ", "\n  ", ";\n  ", "\n  :hover {\n    background: ", ";\n    cursor: pointer;\n  }\n"])), function (props) { return props.theme.colors.white; }, function (props) { return props.color || props.theme.colors.text; }, function (props) { return props.theme.css.body1; }, function (p) { return p.theme.css.selectNone; }, function (p) {
     return p.isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.blue500; });
 }, function (props) { return props.theme.colors.blue100; });
-export var FormInputLabel = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  ", "\n"], ["\n  ", ";\n  color: ", ";\n  ", "\n"])), function (props) { return props.theme.css.body4; }, function (props) { return props.theme.colors.text; }, function (props) {
+export var FormInputLabel = styled(Label)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  ", "\n  display: block;\n"], ["\n  ", ";\n  color: ", ";\n  ", "\n  display: block;\n"])), function (props) { return props.theme.css.body4; }, function (props) { return props.theme.colors.text; }, function (props) {
     return props.isDisabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (props) { return props.theme.colors.gray500; });
 });
 export var InfoDivider = function (_a) {