fuse-importer 0.1.7-testing → 0.1.8-testing

package/lib/esm/Importer/common/Spreadsheet/transformation/{transformators.js → transformators/index.js}

@@ -9,11 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { DateTime } from "luxon";
-var isTransformationNeeded = function (fieldValue, transformedValue) { return ({
-    transformationWasNeeded: fieldValue !== transformedValue,
+import { parseDateFromUserInput, parseDateTimeFromUserInput, parseTimeFromDateTimeorTimeInput, } from "./dateTimeAutoformatUtils";
+export var isTransformationNeeded = function (fieldValue, transformedValue) { return ({
+    transformationWasNeeded: !!transformedValue
+        ? fieldValue !== transformedValue
+        : false,
     original: fieldValue,
-    transformed: fieldValue === transformedValue ? null : transformedValue,
+    transformed: fieldValue === transformedValue || transformedValue === undefined
+        ? null
+        : transformedValue,
 }); };
 var isNotANumber = function (fieldValue) {
     return fieldValue === null || fieldValue === undefined || isNaN(fieldValue);
@@ -79,49 +83,24 @@ var stringFieldTransformations = {
         return isTransformationNeeded(fieldValue, transformedValue);
     },
 };
-var parseDate = function (date, possibleFormats) {
-    if (!date)
-        return null;
-    for (var i = 0; i < possibleFormats.length; i++) {
-        var format = possibleFormats[i];
-        try {
-            var currentDate = DateTime.fromFormat(date, format, { zone: "utc" });
-            if (currentDate.isValid) {
-                return currentDate;
-            }
-        }
-        catch (error) {
-            return null;
-        }
-    }
-    return null;
-};
 export var datesDateTimesAndTimesTransformations = {
-    autoformat: function (fieldValue, _, fieldOptions, possibleDateFormats) {
-        var cleanFieldValue = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.replace(/"/g, "");
-        var normalizedFieldValue = cleanFieldValue === null || cleanFieldValue === void 0 ? void 0 : cleanFieldValue.replace(/-/g, "/");
-        var isUnixTimestamp = /^\d+$/.test(normalizedFieldValue);
-        var luxonDate = isUnixTimestamp
-            ? DateTime.fromSeconds(Number(normalizedFieldValue))
-            : parseDate(normalizedFieldValue, possibleDateFormats);
-        var pattern = fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.pattern;
-        var defaultObj = {
-            transformationWasNeeded: false,
-            original: fieldValue,
-            transformed: null,
-        };
-        if (!fieldValue || !pattern || !luxonDate || isNaN(luxonDate.toSeconds())) {
-            return defaultObj;
-        }
-        if (!luxonDate.isValid) {
-            return defaultObj;
-        }
-        var transformedValue = luxonDate.toFormat(pattern);
-        return {
-            transformationWasNeeded: fieldValue !== transformedValue,
-            original: fieldValue,
-            transformed: transformedValue,
+    autoformat: function (fieldValue, _, fieldOptions) {
+        if (fieldValue === null || fieldValue === undefined)
+            return {
+                transformationWasNeeded: false,
+                original: fieldValue,
+                transformed: null,
+            };
+        var type = fieldOptions.type, pattern = fieldOptions.pattern;
+        var parseFunctions = {
+            date: parseDateFromUserInput,
+            datetime: parseDateTimeFromUserInput,
+            time: parseTimeFromDateTimeorTimeInput,
         };
+        var parseFn = parseFunctions[type];
+        var dateValue = parseFn(fieldValue);
+        var transformedValue = dateValue === null || dateValue === void 0 ? void 0 : dateValue.toFormat(pattern);
+        return isTransformationNeeded(fieldValue, transformedValue);
     },
 };
 var urlTransformations = {

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

@@ -42,6 +42,7 @@ declare const getCustomTheme: (importerStylePreferences: ImporterStylePreference
             red50: string;
             red100: string;
             red200: string;
+            red250: string;
             red300: string;
             red400: string;
             red500: string;

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

@@ -7,7 +7,6 @@ export declare const addEmptyRows: (data: Record[], fields: Field[]) => (Record
     };
 })[];
 export declare const addMeta: (record: any, index: number, uploadedRow?: any, transformedRow?: TransformedRecord) => Record;
-export declare const calculatePossibleDateFormats: (fieldsWithDateTransformations: Field[], sample: Record[]) => string[];
 export declare const recordListToDataSet: (data: Record[], fields: Field[], withTransformations?: boolean) => {
     isDatasetTransformed: boolean;
     dataSet: RecordDataSet;

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

@@ -18,13 +18,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { datesDateTimesAndTimesTransformations } from "../../Importer/common/Spreadsheet/transformation/transformators";
 import { transformRecord } from "../../Importer/common/Spreadsheet/transformation";
 import { FieldTypes, } from "../../types";
 import { parseValue } from "../common/Spreadsheet/common";
-import { DateTime } from "luxon";
-import { allowedPatternValues } from "../../common/datePatterns";
-import _ from "lodash";
 var MINIMUM_ROW_COUNT = 20;
 var getRowId = function (index) {
     return index.toString();
@@ -48,29 +44,6 @@ export var addMeta = function (record, index, uploadedRow, transformedRow) {
     var meta = (_a = record._meta) !== null && _a !== void 0 ? _a : {};
     return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { id: rId, rowIndex: index, uploadedRow: uploadedRow, transformedRow: transformedRow }) });
 };
-export var calculatePossibleDateFormats = function (fieldsWithDateTransformations, sample) {
-    var possibleDateFormats = [];
-    for (var _i = 0, sample_1 = sample; _i < sample_1.length; _i++) {
-        var record = sample_1[_i];
-        for (var _a = 0, fieldsWithDateTransformations_1 = fieldsWithDateTransformations; _a < fieldsWithDateTransformations_1.length; _a++) {
-            var field = fieldsWithDateTransformations_1[_a];
-            var value = record[field.name];
-            if (!value)
-                continue;
-            for (var i = 0; i < allowedPatternValues.length; i++) {
-                var format = allowedPatternValues[i];
-                try {
-                    var currentDate = DateTime.fromFormat(value, format);
-                    if (currentDate.isValid) {
-                        possibleDateFormats.push(format);
-                    }
-                }
-                catch (e) { }
-            }
-        }
-    }
-    return Array.from(new Set(possibleDateFormats));
-};
 export var recordListToDataSet = function (data, fields, withTransformations) {
     if (withTransformations === void 0) { withTransformations = true; }
     var fieldWithTransformations = fields.filter(function (field) { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.transformations) === null || _a === void 0 ? void 0 : _a.length) > 0; });
@@ -78,15 +51,6 @@ export var recordListToDataSet = function (data, fields, withTransformations) {
     if (data.length < MINIMUM_ROW_COUNT) {
         initialData = addEmptyRows(data, fields);
     }
-    var fieldsWithDateTransformations = fieldWithTransformations.filter(function (field) {
-        return field.transformations.some(function (t) {
-            return Object.keys(datesDateTimesAndTimesTransformations).includes(t.transformation_type);
-        });
-    });
-    var possibleDateFormats = [];
-    if (fieldsWithDateTransformations.length > 0) {
-        possibleDateFormats.push.apply(possibleDateFormats, calculatePossibleDateFormats(fieldsWithDateTransformations, _.sampleSize(initialData, 100)));
-    }
     var isDatasetTransformed = false;
     var res = initialData.reduce(function (dataSet, record, i) {
         var transformedRecord = {};
@@ -94,7 +58,6 @@ export var recordListToDataSet = function (data, fields, withTransformations) {
             transformedRecord = transformRecord({
                 record: record,
                 fields: fieldWithTransformations,
-                possibleDateFormats: possibleDateFormats,
             });
         }
         if (JSON.stringify(transformedRecord) !== "{}")

package/lib/esm/common/Table/TableActions/RowFilters.js

@@ -39,7 +39,7 @@ var Filter = function (_a) {
     var labelToId = function (label) {
         return label.toLowerCase().replace(/\s/g, "_") + "_filter";
     };
-    return (_jsxs(Div, __assign({ disabledWhen: isDisabled, dflex: true, clickable: true, onClick: function () { return !isDisabled && onClick(); }, "data-test-id": labelToId(label) }, { children: [_jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count.toLocaleString(), ")"] })] })), isSelected && filteredInputValue !== "" && (_jsx(FilteredDataCount, { children: _jsx(Div, __assign({ minw: 14, centered: true }, { children: filteredDataIds.length })) }))] })));
+    return (_jsx(Div, __assign({ disabledWhen: isDisabled, dflex: true, clickable: true, onClick: function () { return !isDisabled && onClick(); }, "data-test-id": labelToId(label) }, { children: _jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count.toLocaleString(), ")"] })] })) })));
 };
 export var RowFilters = function () {
     var _a = useFilteredDataContext(), spreadsheetFilter = _a.spreadsheetFilter, filterRecordsByRowType = _a.filterRecordsByRowType;

package/lib/esm/common/Table/TableActions/SearchRows.js

@@ -13,18 +13,19 @@ 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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
-import { TooltipProvider } from "../../../common/TooltipProvider";
 import { useDebounce } from "../../../hooks";
 import { useReviewContext } from "../../../Importer";
-import { useFilteredDataContext } from "../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
-import { Div } from "../../../styled";
 import { colors } from "../../../styled/theme/colorPalette";
 import { textStyles } from "../../../styled/theme/textStyles";
-import { SearchIcon } from "./icons";
+import { SearchIcon, ReplaceIcon } from "./icons";
+import { TooltipProvider } from "../../../common/TooltipProvider";
+import { useTranslation } from "react-i18next";
+import { Div } from "../../../styled";
+import { useFilteredDataContext } from "../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
+import { FindAndReplaceModal } from "../../../Importer/common/Spreadsheet/components/FindAndReplace";
 var Wrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"], ["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? colors.orange50 : "none");
@@ -33,22 +34,27 @@ var Wrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplate
     return (isOpen ? "332px" : "24px");
 });
 var IconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
-var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"], ["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"])), textStyles.body3, colors.gray700, function (_a) {
+var ResultsText = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 20px;\n  color: ", ";\n  display: block;\n  text-wrap: nowrap;\n  text-align: right;\n  border-right: solid 1px ", ";\n  margin-right: 8px;\n  padding-right: 8px;\n"], ["\n  font-size: 14px;\n  line-height: 20px;\n  color: ", ";\n  display: block;\n  text-wrap: nowrap;\n  text-align: right;\n  border-right: solid 1px ", ";\n  margin-right: 8px;\n  padding-right: 8px;\n"])), colors.gray700, colors.gray300);
+var ActionsWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-center;\n"], ["\n  display: flex;\n  align-items: flex-center;\n"])));
+var Input = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"], ["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"])), textStyles.body3, colors.gray700, function (_a) {
     var isOpen = _a.isOpen;
-    return !isOpen && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      top: -9999px;\n    "], ["\n      position: absolute;\n      top: -9999px;\n    "])));
+    return !isOpen && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      position: absolute;\n      top: -9999px;\n    "], ["\n      position: absolute;\n      top: -9999px;\n    "])));
 });
 var SearchInput = function (_a) {
     var testId = _a.testId, value = _a.value, onChange = _a.onChange, isDisabled = _a.isDisabled;
     var _b = useDebounce(value, onChange, 300), _value = _b._value, set_Value = _b.set_Value;
     var inputRef = useRef(null);
-    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var filteredDataIds = useFilteredDataContext().filteredDataIds;
+    var _c = useState(false), findAndReplaceModalOpen = _c[0], setFindAndReplaceModalOpen = _c[1];
+    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var actionsRef = useRef();
     var t = useTranslation("review").t;
     var handleInputChange = function (_a) {
         var target = _a.target;
         set_Value(target.value);
     };
-    var handleInputOnBlur = function () {
-        if (!_value) {
+    var handleInputOnBlur = function (e) {
+        if (!_value && e.relatedTarget !== actionsRef.current) {
             setIsOpen(false);
         }
     };
@@ -61,7 +67,9 @@ var SearchInput = function (_a) {
             }
         }
     };
-    return (_jsx(TooltipProvider, __assign({ tooltip: !isOpen && !isDisabled ? t("table_actions.search_rows.tooltip") : "", placement: "right", flip: false, centered: true, w: "auto", "data-testid": testId }, { children: _jsxs(Wrapper, __assign({ isOpen: isOpen, onClick: function () { return !isDisabled && handleWrapperClick(); }, disabledWhen: isDisabled }, { children: [_jsx(IconWrapper, { children: _jsx(SearchIcon, {}) }), _jsx(Input, { isOpen: isOpen, ref: inputRef, value: _value, onChange: handleInputChange, onBlur: handleInputOnBlur, type: "text", placeholder: t("table_actions.search_rows.placeholder") })] })) })));
+    return (_jsxs(TooltipProvider, __assign({ tooltip: !isOpen && !isDisabled ? t("table_actions.search_rows.tooltip") : "", placement: "right", flip: false, centered: true, w: "auto", "data-testid": testId }, { children: [_jsxs(Wrapper, __assign({ isOpen: isOpen, onClick: function () { return !isDisabled && handleWrapperClick(); }, disabledWhen: isDisabled }, { children: [_jsx(IconWrapper, { children: _jsx(SearchIcon, {}) }), _jsx(Input, { isOpen: isOpen, ref: inputRef, value: _value, onChange: handleInputChange, onBlur: handleInputOnBlur, type: "text", placeholder: t("table_actions.search_rows.placeholder") }), _jsxs(ActionsWrapper, __assign({ "data-cy": "open-find-replace", ref: actionsRef, onClick: function () { return setFindAndReplaceModalOpen(true); }, tabIndex: 0 }, { children: [_jsx(ResultsText, { children: t("table_actions.search_rows.number_of_results", {
+                                    length: value ? filteredDataIds.length : 0,
+                                }) }), _jsx(IconWrapper, { children: _jsx(ReplaceIcon, {}) })] }))] })), findAndReplaceModalOpen && (_jsx(FindAndReplaceModal, { initialText: value, onClose: function () { return setFindAndReplaceModalOpen(false); } }))] })));
 };
 export var SearchRows = function (_a) {
     var _b = _a.testId, testId = _b === void 0 ? "ta-search-rows" : _b;
@@ -70,6 +78,6 @@ export var SearchRows = function (_a) {
     var handleChangeInputValue = function (value) {
         setFilteredInputValue(value);
     };
-    return (_jsx(SearchInput, { testId: testId, value: filteredInputValue, onChange: handleChangeInputValue, isDisabled: isTransformTooltipOpened }));
+    return (_jsx(_Fragment, { children: _jsx(SearchInput, { testId: testId, value: filteredInputValue, onChange: handleChangeInputValue, isDisabled: isTransformTooltipOpened }) }));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/esm/common/Table/TableActions/TableActions.styles.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled from "styled-components";
 import { Div } from "../../../styled/utils";
-export var TableActionsContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 32px;\n  width: 100%;\n\n  * {\n    box-sizing: content-box;\n  }\n"], ["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 32px;\n  width: 100%;\n\n  * {\n    box-sizing: content-box;\n  }\n"])), function (_a) {
+export var TableActionsContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 32px;\n  width: 100%;\n"], ["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 32px;\n  width: 100%;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.white;
 }, function (_a) {

package/lib/esm/common/Table/TableActions/icons.d.ts

@@ -4,3 +4,4 @@ export declare const SearchIcon: () => JSX.Element;
 export declare const DownloadIcon: () => JSX.Element;
 export declare const CheckIcon: () => JSX.Element;
 export declare const ActionPlus: () => JSX.Element;
+export declare const ReplaceIcon: () => JSX.Element;

package/lib/esm/common/Table/TableActions/icons.js

@@ -16,3 +16,4 @@ export var SearchIcon = function () { return (_jsxs("svg", __assign({ width: "24
 export var DownloadIcon = function () { return (_jsxs("svg", __assign({ width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M10.0834 18C9.66675 16.75 9.66675 15.5 9.66675 14.6303C9.66675 11.7319 12.2621 8.83337 15.4637 8.83337C17.6094 8.83337 19.4828 9.99914 20.4852 11.7319H21.2607C23.6619 11.7319 25.9167 13.4167 25.9167 15.5C25.9167 16.3334 25.9167 17.1667 25.5001 18", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M14.1807 23.2764L17.5834 26.5416L20.9862 23.2764", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M17.5833 25.6827L17.5833 16.4375", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round" })] }))); };
 export var CheckIcon = function () { return (_jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "53", height: "53", viewBox: "0 0 53 53", fill: "none" }, { children: [_jsx("rect", { width: "53", height: "53", fill: "white" }), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M40.6023 5.38665C41.3381 4.56281 42.6024 4.49142 43.4263 5.22719L51.5083 12.4453C52.3321 13.181 52.4035 14.4454 51.6677 15.2692L23.539 46.7647C22.8032 47.5885 21.5389 47.6599 20.7151 46.9242L12.6331 39.7061C11.8092 38.9703 11.7378 37.706 12.4736 36.8822L40.6023 5.38665Z", fill: "url(#paint0_linear_643_341)" }) })), _jsx("g", __assign({ style: { mixBlendMode: "darken" } }, { children: _jsx("rect", { x: "32.0707", y: "37.1587", width: "14.836", height: "29.7113", rx: "2", transform: "rotate(131.582 32.0707 37.1587)", fill: "url(#paint1_linear_643_341)" }) })), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "paint0_linear_643_341", x1: "15.4625", y1: "39.0861", x2: "31.139", y2: "48.4231", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#D0A617" }), _jsx("stop", { offset: "1", stopColor: "#FEE18F" })] })), _jsxs("linearGradient", __assign({ id: "paint1_linear_643_341", x1: "39.4887", y1: "37.1587", x2: "29.9147", y2: "74.1394", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#6BEEFF" }), _jsx("stop", { offset: "1", stopColor: "#08CABE" })] }))] })] }))); };
 export var ActionPlus = function () { return (_jsx("svg", __assign({ width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsxs("g", __assign({ id: "Actions Plus" }, { children: [_jsx("path", { id: "Vector 4", d: "M8 2.91602V14.916", stroke: "#909090", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { id: "Vector 5", d: "M2 8.91602L14 8.91602", stroke: "#909090", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })) }))); };
+export var ReplaceIcon = function () { return (_jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M19.5 15.6666V6.33334C19.5 5.04467 18.4553 4 17.1666 4H10.75M19.5 15.6666L16 12.1667M19.5 15.6666L23 12.1667M5.5 8.66665V18C5.5 19.2887 6.54469 20.3333 7.83332 20.3333H14.25M5.5 8.66665L9.00001 12.1667M5.5 8.66665L2 12.1667", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))); };

package/lib/esm/common/Table/TableActions/useFindAndReplace.d.ts

@@ -0,0 +1,5 @@
+import { Record } from "../../../types";
+declare const useFindAndReplace: () => {
+    replaceInRecord: (record: Record, searchText: string, replaceText: string, matchCase: boolean, useRegex: boolean) => boolean;
+};
+export default useFindAndReplace;

package/lib/esm/common/Table/TableActions/useFindAndReplace.js

@@ -0,0 +1,45 @@
+import { useSpreadsheetContext } from "../../../Importer";
+var useFindAndReplace = function () {
+    var fields = useSpreadsheetContext().fields;
+    var replaceTextWithRegex = function (value, searchText, replaceText, matchCase) {
+        var regex = new RegExp(searchText, matchCase ? "g" : "ig");
+        return value.replace(regex, replaceText);
+    };
+    var replaceCaseInsensitive = function (str, searchText, rby) {
+        var pos = str.toLowerCase().indexOf(searchText.toLowerCase());
+        return pos == -1
+            ? str
+            : str.substring(0, pos) + rby + str.substring(pos + searchText.length);
+    };
+    var replaceTextWithoutRegex = function (value, searchText, replaceText, matchCase) {
+        if (matchCase) {
+            return value.replace(searchText, replaceText);
+        }
+        else {
+            return replaceCaseInsensitive(value, searchText, replaceText);
+        }
+    };
+    var replaceInRecord = function (record, searchText, replaceText, matchCase, useRegex) {
+        var textFound = false;
+        fields.forEach(function (f) {
+            if (!record[f.name])
+                return;
+            var newValue;
+            if (useRegex) {
+                newValue = replaceTextWithRegex(record[f.name].toString(), searchText, replaceText, matchCase);
+            }
+            else {
+                newValue = replaceTextWithoutRegex(record[f.name].toString(), searchText, replaceText, matchCase);
+            }
+            if (record[f.name] !== newValue) {
+                record[f.name] = newValue;
+                textFound = true;
+            }
+        });
+        return textFound;
+    };
+    return {
+        replaceInRecord: replaceInRecord,
+    };
+};
+export default useFindAndReplace;

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

@@ -1,4 +1,35 @@
-import { ToastOptions, ToastType } from "react-hot-toast";
-export declare const addToast: (msg: JSX.Element | string, type?: ToastType, toastOptions?: ToastOptions) => void;
-declare const Toast: () => JSX.Element;
+import { ToastOptions } from "react-hot-toast";
+type ToastProps = {
+    zIndex?: number;
+};
+type ToastTypes = keyof typeof toastTypeStyles;
+export declare const addToast: (msg: JSX.Element | string, type?: ToastTypes, toastOptions?: ToastOptions) => void;
+declare const toastTypeStyles: {
+    error: {
+        color: string;
+        backgroundColor: string;
+        icon: JSX.Element;
+    };
+    warning: {
+        color: string;
+        backgroundColor: string;
+        icon: JSX.Element;
+    };
+    success: {
+        color: string;
+        backgroundColor: string;
+        icon: JSX.Element;
+    };
+    information: {
+        color: string;
+        backgroundColor: string;
+        icon: JSX.Element;
+    };
+    notification: {
+        color: string;
+        backgroundColor: string;
+        icon: JSX.Element;
+    };
+};
+declare const Toast: ({ zIndex }: ToastProps) => JSX.Element;
 export { Toast };

package/lib/esm/common/Toast.js

@@ -16,19 +16,22 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import toast, { ToastBar, Toaster, } from "react-hot-toast";
 import styled from "styled-components";
-import { defaultCheckIcon, greenCheckIcon, redXIcon } from "./icons";
 import { colors } from "../styled/theme/colorPalette";
 import { Div } from "../styled/utils";
+import { greenCheckIcon, infoIcon, notificationCheckIcon, redXIcon, warningIcon, } from "./icons";
 var defaultDuration = 5000;
 var defaultPosition = "bottom-right";
 var toastBorderRadius = 4;
 var toastMaxWidth = "85%";
 export var addToast = function (msg, type, toastOptions) {
-    if (type === void 0) { type = "blank"; }
+    if (type === void 0) { type = "notification"; }
     if (toastOptions === void 0) { toastOptions = {}; }
-    var _toastOptions = __assign({ duration: defaultDuration, position: defaultPosition }, toastOptions);
-    var toastFn = type === "blank" ? toast : toast[type];
-    toastFn(msg, _toastOptions);
+    var stylingByType = toastTypeStyles[type];
+    var _toastOptions = __assign({ duration: defaultDuration, position: defaultPosition, style: {
+            background: stylingByType.backgroundColor,
+            color: stylingByType.color,
+        }, icon: stylingByType.icon }, toastOptions);
+    toast(msg, _toastOptions);
 };
 var toastContainerCss = {
     padding: 0,
@@ -38,27 +41,40 @@ var toastContainerCss = {
     maxWidth: toastMaxWidth,
 };
 var toastTypeStyles = {
+    error: {
+        color: colors.black,
+        backgroundColor: colors.red250,
+        icon: redXIcon,
+    },
+    warning: {
+        color: colors.black,
+        backgroundColor: colors.orange1100,
+        icon: warningIcon,
+    },
     success: {
-        backgroundColor: colors.blue50,
         color: colors.text,
+        backgroundColor: colors.blue50,
         icon: greenCheckIcon,
     },
-    error: {
-        color: colors.red800,
-        backgroundColor: colors.red100,
-        icon: redXIcon,
+    information: {
+        color: colors.black,
+        backgroundColor: colors.blue100,
+        icon: infoIcon,
     },
-    blank: {
-        backgroundColor: colors.white,
-        color: colors.text,
-        icon: defaultCheckIcon,
+    notification: {
+        color: colors.white,
+        backgroundColor: colors.black,
+        icon: notificationCheckIcon,
     },
 };
 var ToastWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px;\n  box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.1);\n  border-radius: ", "px;\n  ", ";\n"], ["\n  padding: 10px;\n  box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.1);\n  border-radius: ", "px;\n  ", ";\n"])), toastBorderRadius, function (p) { return p.theme.css.alignCenter; });
 var IconWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));
-var Toast = function () {
+var Toast = function (_a) {
+    var zIndex = _a.zIndex;
     return (_jsx(Toaster, __assign({ toastOptions: {
             style: toastContainerCss,
+        }, containerStyle: {
+            zIndex: zIndex,
         } }, { children: function (t) { return (_jsx(ToastBar, __assign({ toast: t }, { children: function (_a) {
                 var message = _a.message, hotToastIcon = _a.icon;
                 var _b = toastTypeStyles[t.type] || {}, icon = _b.icon, color = _b.color, backgroundColor = _b.backgroundColor;

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

@@ -24,4 +24,3 @@ export declare const allowedPatterns: {
         label: string;
     }[];
 };
-export declare const allowedPatternValues: string[];

package/lib/esm/common/datePatterns.js

@@ -1,12 +1,3 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 export var datePatterns = [
     {
         value: "MM/dd/yyyy",
@@ -334,4 +325,3 @@ export var allowedPatterns = {
     datetime: dateTimePatterns,
     time: timePatterns,
 };
-export var allowedPatternValues = __spreadArray(__spreadArray(__spreadArray([], datePatterns, true), dateTimePatterns, true), timePatterns, true).map(function (pattern) { return pattern.value; });

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

@@ -3,6 +3,9 @@ export declare const closeIconCondensed: JSX.Element;
 export declare const checkIcon: JSX.Element;
 export declare const greenCheckIcon: JSX.Element;
 export declare const redXIcon: JSX.Element;
+export declare const warningIcon: JSX.Element;
+export declare const infoIcon: JSX.Element;
+export declare const notificationCheckIcon: JSX.Element;
 export declare const defaultCheckIcon: JSX.Element;
 export declare const WhiteCheckIcon: () => JSX.Element;
 export declare const chevronLeftIcon: JSX.Element;

package/lib/esm/common/icons/index.js

@@ -14,8 +14,11 @@ import { useTheme } from "styled-components";
 export var closeIcon = (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M6 6.00003L18.7742 18.7742", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6 18.7742L18.7742 6.00001", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 export var closeIconCondensed = (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M6 6.00003L18.7742 18.7742", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6 18.7742L18.7742 6.00001", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 export var checkIcon = (_jsx("svg", __assign({ width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M1.37805 5.80142L3.94469 8.28708L10.6827 1.52003", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
-export var greenCheckIcon = (_jsx("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22ZM8.70711 10.2426C8.31658 9.85208 7.68342 9.85208 7.29289 10.2426C6.90237 10.6331 6.90237 11.2663 7.29289 11.6568L9.41421 13.7781L10.1213 14.4852L10.8284 13.7781L15.0711 9.53549C15.4616 9.14497 15.4616 8.5118 15.0711 8.12128C14.6805 7.73076 14.0474 7.73076 13.6569 8.12128L10.1213 11.6568L8.70711 10.2426Z", fill: "#00D085" }) })));
-export var redXIcon = (_jsxs("svg", __assign({ width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("circle", { cx: "9.49967", cy: "8.99992", r: "7.79167", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M7.375 6.875L11.625 11.125", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7.375 11.125L11.625 6.875", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+export var greenCheckIcon = (_jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM9.70711 11.2426C9.31658 10.8521 8.68342 10.8521 8.29289 11.2426C7.90237 11.6331 7.90237 12.2663 8.29289 12.6568L10.4142 14.7781L11.1213 15.4852L11.8284 14.7781L16.0711 10.5355C16.4616 10.145 16.4616 9.5118 16.0711 9.12128C15.6805 8.73076 15.0474 8.73076 14.6569 9.12128L11.1213 12.6568L9.70711 11.2426Z", fill: "#025F40" }) })));
+export var redXIcon = (_jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071Z", fill: "#5C1008" }) })));
+export var warningIcon = (_jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 6C12.5523 6 13 6.44772 13 7V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V7C11 6.44772 11.4477 6 12 6ZM12 15C12.5523 15 13 15.4477 13 16V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V16C11 15.4477 11.4477 15 12 15Z", fill: "#78430D" }) })));
+export var infoIcon = (_jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M12 17.5C12.3117 17.5 12.5729 17.3946 12.7837 17.1838C12.9946 16.9729 13.1 16.7117 13.1 16.4V12C13.1 11.6883 12.9946 11.4271 12.7837 11.2163C12.5729 11.0054 12.3117 10.9 12 10.9C11.6883 10.9 11.4271 11.0054 11.2163 11.2163C11.0054 11.4271 10.9 11.6883 10.9 12V16.4C10.9 16.7117 11.0054 16.9729 11.2163 17.1838C11.4271 17.3946 11.6883 17.5 12 17.5ZM12 8.7C12.3117 8.7 12.5729 8.59458 12.7837 8.38375C12.9946 8.17292 13.1 7.91167 13.1 7.6C13.1 7.28833 12.9946 7.02708 12.7837 6.81625C12.5729 6.60542 12.3117 6.5 12 6.5C11.6883 6.5 11.4271 6.60542 11.2163 6.81625C11.0054 7.02708 10.9 7.28833 10.9 7.6C10.9 7.91167 11.0054 8.17292 11.2163 8.38375C11.4271 8.59458 11.6883 8.7 12 8.7ZM12 23C10.4783 23 9.04833 22.7113 7.71 22.1337C6.37167 21.5562 5.2075 20.7725 4.2175 19.7825C3.2275 18.7925 2.44375 17.6283 1.86625 16.29C1.28875 14.9517 1 13.5217 1 12C1 10.4783 1.28875 9.04833 1.86625 7.71C2.44375 6.37167 3.2275 5.2075 4.2175 4.2175C5.2075 3.2275 6.37167 2.44375 7.71 1.86625C9.04833 1.28875 10.4783 1 12 1C13.5217 1 14.9517 1.28875 16.29 1.86625C17.6283 2.44375 18.7925 3.2275 19.7825 4.2175C20.7725 5.2075 21.5562 6.37167 22.1337 7.71C22.7113 9.04833 23 10.4783 23 12C23 13.5217 22.7113 14.9517 22.1337 16.29C21.5562 17.6283 20.7725 18.7925 19.7825 19.7825C18.7925 20.7725 17.6283 21.5562 16.29 22.1337C14.9517 22.7113 13.5217 23 12 23Z", fill: "#025B5B" }) })));
+export var notificationCheckIcon = (_jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M4 12.3137L9.65685 17.9706L20.9706 6.65687", stroke: "white", "stroke-width": "2", "stroke-linecap": "round" }) })));
 export var defaultCheckIcon = (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("circle", { cx: "12", cy: "12", r: "11", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M9 11.9497L11.1213 14.071L15.364 9.82839", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] })));
 export var WhiteCheckIcon = function () {
     var theme = useTheme();

package/lib/esm/common/inputs/Checkbox.d.ts

@@ -6,6 +6,7 @@ type Props = {
     onChange?: (isChecked: boolean) => void;
     onShiftKeyPressed?: () => void;
     isDisabled?: boolean;
+    label?: string;
 } & DivCSSProps;
-declare const Checkbox: ({ isChecked, isIndeterminate, icon, onChange, onShiftKeyPressed, isDisabled, ...props }: Props) => JSX.Element;
+declare const Checkbox: ({ isChecked, isIndeterminate, icon, onChange, onShiftKeyPressed, isDisabled, label, ...props }: Props) => JSX.Element;
 export { Checkbox };

package/lib/esm/common/inputs/Checkbox.js

@@ -24,17 +24,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
 import { Div } from "../../styled/utils";
-var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 20px;\n  width: 20px;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n\n  ", "\n"], ["\n  height: 20px;\n  width: 20px;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n\n  ", "\n"])), function (props) { return props.theme.colors.gray400; }, function (props) { return props.theme.colors.white; }, function (props) {
-    return (props.isChecked || props.isIndeterminate) && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border: 1px solid white;\n      background-color: ", ";\n    "], ["\n      border: 1px solid white;\n      background-color: ", ";\n    "])), props.theme.colors.pink500);
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  gap: 8px;\n  cursor: pointer;\n"])));
+var IconContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 20px;\n  width: 20px;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  background-color: ", ";\n  ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n\n  ", "\n"], ["\n  height: 20px;\n  width: 20px;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  background-color: ", ";\n  ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n\n  ", "\n"])), function (props) { return props.theme.colors.gray400; }, function (props) { return props.theme.colors.white; }, function (props) {
+    return (props.isChecked || props.isIndeterminate) && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      border: 1px solid white;\n      background-color: ", ";\n    "], ["\n      border: 1px solid white;\n      background-color: ", ";\n    "])), props.theme.colors.pink500);
 }, function (_a) {
     var isDisabled = _a.isDisabled;
-    return isDisabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      opacity: 0.6;\n\n      :hover {\n        cursor: not-allowed;\n      }\n    "], ["\n      opacity: 0.6;\n\n      :hover {\n        cursor: not-allowed;\n      }\n    "])));
+    return isDisabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      opacity: 0.6;\n\n      :hover {\n        cursor: not-allowed;\n      }\n    "], ["\n      opacity: 0.6;\n\n      :hover {\n        cursor: not-allowed;\n      }\n    "])));
 });
+var Label = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 20px;\n"], ["\n  font-size: 14px;\n  line-height: 20px;\n"])));
 var Checkbox = function (_a) {
-    var isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, _b = _a.icon, icon = _b === void 0 ? null : _b, onChange = _a.onChange, onShiftKeyPressed = _a.onShiftKeyPressed, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, props = __rest(_a, ["isChecked", "isIndeterminate", "icon", "onChange", "onShiftKeyPressed", "isDisabled"]);
+    var isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, _b = _a.icon, icon = _b === void 0 ? null : _b, onChange = _a.onChange, onShiftKeyPressed = _a.onShiftKeyPressed, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.label, label = _d === void 0 ? null : _d, props = __rest(_a, ["isChecked", "isIndeterminate", "icon", "onChange", "onShiftKeyPressed", "isDisabled", "label"]);
     var handleOnChange = function (event) {
         if (!onChange)
             return;
@@ -45,9 +47,9 @@ var Checkbox = function (_a) {
         var newValue = !isChecked || isIndeterminate;
         onChange(newValue);
     };
-    return (_jsx(Container, __assign({}, __assign({ isChecked: isChecked, isDisabled: isDisabled, isIndeterminate: isIndeterminate, onClick: handleOnChange }, props), { "data-test-id": "checkbox" }, { children: isIndeterminate ? (_jsx(IndeterminateIcon, {})) : (_jsx(Div, __assign({ centered: true }, { children: isChecked && (icon || checkIcon) }))) })));
+    return (_jsxs(Container, __assign({ "data-test-id": "checkbox", onClick: handleOnChange }, { children: [_jsx(IconContainer, __assign({}, __assign({ isChecked: isChecked, isDisabled: isDisabled, isIndeterminate: isIndeterminate }, props), { children: isIndeterminate ? (_jsx(IndeterminateIcon, {})) : (_jsx(Div, __assign({ centered: true }, { children: isChecked && (icon || checkIcon) }))) })), label && _jsx(Label, { children: label })] })));
 };
 var checkIcon = (_jsx("svg", __assign({ width: "14", height: "10", viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M1.10254 4.74355L5.2051 8.84612L12.8974 1.15381", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
 var IndeterminateIcon = function () { return (_jsx("svg", __assign({ width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M1 1H13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }) }))); };
 export { Checkbox };
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/esm/locales/en.d.ts

@@ -63,6 +63,7 @@ declare const _default: {
             search_rows: {
                 tooltip: string;
                 placeholder: string;
+                number_of_results: string;
             };
             filter_by_errors: {
                 search_or_select: string;
@@ -106,6 +107,18 @@ declare const _default: {
             continue: string;
             submit: string;
         };
+        find_and_replace_modal: {
+            cancel: string;
+            description: string;
+            find: string;
+            no_records_found: string;
+            records_replaced: string;
+            replace_with: string;
+            submit: string;
+            title: string;
+            use_case_sensitive: string;
+            use_regex: string;
+        };
         unmatched_headers_modal: {
             title: string;
             description_singular: string;