fuse-importer 0.1.7-testing → 0.2.0-testing

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

@@ -51,7 +51,7 @@ export var TableRow = function (_a) {
             var isLastColumn = indexJ === columns.length - 1;
             return (_jsx(Cell, __assign({ row: row, onClick: onRowClick && !column.preventRowClick
                     ? function () { return onRowClick(row); }
-                    : null, isLast: isLastColumn, className: isLastColumn ? "last-column" : "", w: columnWidthPercentage }, { children: Content ? (_jsx(Content, __assign({}, row, { columnWidth: columnWidthPercentage, rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), resolvedKey));
+                    : null, isLast: isLastColumn, className: isLastColumn ? "last-column" : "", w: columnWidthPercentage }, { children: Content ? (_jsx(Content, __assign({}, row, { columnWidth: columnWidthPercentage, colIndex: indexJ, rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), resolvedKey));
         }) })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -8,4 +8,4 @@ type TableViewWrapperProps = {
     checkboxColumnWidth?: number;
 };
 export declare const TableViewWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewWrapperProps, never>;
-export declare const TableView: React.MemoExoticComponent<({ data, dataRefIds, columns, pageSize, onRowClick, sortBy, isLoading, setSortBy, rowWidthScalingFactor, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, ...props }: TableViewProps) => JSX.Element>;
+export declare const TableView: React.MemoExoticComponent<({ data, dataRefIds, columns, pageSize, onRowClick, sortBy, isLoading, setSortBy, rowWidthScalingFactor, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, shouldHideTable, ...props }: TableViewProps) => JSX.Element>;

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

@@ -66,7 +66,7 @@ var buildGridStyles = function (rowWidthScalingFactor) {
     return gridStyles;
 };
 export var TableView = React.memo(function (_a) {
-    var _b = _a.data, data = _b === void 0 ? null : _b, _c = _a.dataRefIds, dataRefIds = _c === void 0 ? null : _c, columns = _a.columns, pageSize = _a.pageSize, _d = _a.onRowClick, onRowClick = _d === void 0 ? null : _d, _e = _a.sortBy, sortBy = _e === void 0 ? { field: null, direction: null } : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.setSortBy, setSortBy = _g === void 0 ? null : _g, _h = _a.rowWidthScalingFactor, rowWidthScalingFactor = _h === void 0 ? 1 : _h, _j = _a.tableHeadersHeight, tableHeadersHeight = _j === void 0 ? defaultTableHeaderHeightPx : _j, _k = _a.rowHeight, rowHeight = _k === void 0 ? defaultTableRowHeightPx : _k, _l = _a.h, h = _l === void 0 ? 500 : _l, _m = _a.onTableScroll, onTableScroll = _m === void 0 ? null : _m, _o = _a.getItemKey, getItemKey = _o === void 0 ? null : _o, _p = _a.isDraggable, isDraggable = _p === void 0 ? false : _p, checkboxColumnWidth = _a.checkboxColumnWidth, _q = _a.isFiltering, isFiltering = _q === void 0 ? false : _q, props = __rest(_a, ["data", "dataRefIds", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "setSortBy", "rowWidthScalingFactor", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "isDraggable", "checkboxColumnWidth", "isFiltering"]);
+    var _b = _a.data, data = _b === void 0 ? null : _b, _c = _a.dataRefIds, dataRefIds = _c === void 0 ? null : _c, columns = _a.columns, pageSize = _a.pageSize, _d = _a.onRowClick, onRowClick = _d === void 0 ? null : _d, _e = _a.sortBy, sortBy = _e === void 0 ? { field: null, direction: null } : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.setSortBy, setSortBy = _g === void 0 ? null : _g, _h = _a.rowWidthScalingFactor, rowWidthScalingFactor = _h === void 0 ? 1 : _h, _j = _a.tableHeadersHeight, tableHeadersHeight = _j === void 0 ? defaultTableHeaderHeightPx : _j, _k = _a.rowHeight, rowHeight = _k === void 0 ? defaultTableRowHeightPx : _k, _l = _a.h, h = _l === void 0 ? 500 : _l, _m = _a.onTableScroll, onTableScroll = _m === void 0 ? null : _m, _o = _a.getItemKey, getItemKey = _o === void 0 ? null : _o, _p = _a.isDraggable, isDraggable = _p === void 0 ? false : _p, checkboxColumnWidth = _a.checkboxColumnWidth, _q = _a.isFiltering, isFiltering = _q === void 0 ? false : _q, _r = _a.shouldHideTable, shouldHideTable = _r === void 0 ? false : _r, props = __rest(_a, ["data", "dataRefIds", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "setSortBy", "rowWidthScalingFactor", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "isDraggable", "checkboxColumnWidth", "isFiltering", "shouldHideTable"]);
     var headerContainerRef = useRef();
     var rowCount = dataRefIds ? dataRefIds.ids.length : data.length;
     var onScroll = function (_a) {
@@ -106,7 +106,7 @@ export var TableView = React.memo(function (_a) {
                         width: autosizerWidth,
                         columnCount: 1,
                         onScroll: onScroll,
-                        columnWidth: rowWidth,
+                        columnWidth: shouldHideTable ? 0 : rowWidth,
                         height: autosizerHeight - tableHeadersHeight,
                         rowHeight: rowHeight,
                         rowCount: rowCount,

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

@@ -32,4 +32,5 @@ export type TableViewProps = {
     isDraggable?: boolean;
     checkboxColumnWidth?: number;
     isFiltering?: boolean;
+    shouldHideTable?: boolean;
 } & DivCSSProps;

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

@@ -1,4 +1,43 @@
-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 { CSSProperties } from "react";
+import { ToastOptions } from "react-hot-toast";
+type ToastProps = {
+    zIndex?: number;
+    toastStyle?: CSSProperties;
+};
+type ToastTypes = keyof typeof toastTypeStyles;
+export declare const addToast: (msg: JSX.Element | string, type?: ToastTypes, toastOptions?: ToastOptions) => void;
+export declare const addLoadingToast: (msg: JSX.Element | string, helperMsg: JSX.Element | string, toastOptions?: ToastOptions, minW?: number) => 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;
+    };
+    loadingNotification: {
+        color: string;
+        backgroundColor: string;
+        icon: JSX.Element;
+    };
+};
+declare const Toast: ({ zIndex, toastStyle }: ToastProps) => JSX.Element;
 export { Toast };

package/lib/esm/common/Toast.js

@@ -16,19 +16,38 @@ 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 { CircleSpinner } from "./CircleSpinner";
+import { greenCheckIcon, infoIcon, notificationCheckIcon, redXIcon, warningIcon, } from "./icons";
 var defaultDuration = 5000;
 var defaultPosition = "bottom-right";
 var toastBorderRadius = 4;
 var toastMaxWidth = "85%";
+var LoadingNotifToastContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n"])));
+var genToastOptions = function (type, toastOptions) {
+    var stylingByType = toastTypeStyles[type];
+    var _toastOptions = __assign({ duration: defaultDuration, position: defaultPosition, style: {
+            background: stylingByType.backgroundColor,
+            color: stylingByType.color,
+        }, icon: stylingByType.icon }, toastOptions);
+    return _toastOptions;
+};
 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 = genToastOptions(type, toastOptions);
+    toast(msg, _toastOptions);
+};
+export var addLoadingToast = function (msg, helperMsg, toastOptions, minW) {
     if (toastOptions === void 0) { toastOptions = {}; }
-    var _toastOptions = __assign({ duration: defaultDuration, position: defaultPosition }, toastOptions);
-    var toastFn = type === "blank" ? toast : toast[type];
-    toastFn(msg, _toastOptions);
+    if (minW === void 0) { minW = 320; }
+    var _toastOptions = genToastOptions("loadingNotification", toastOptions);
+    var message = msg;
+    if (msg && helperMsg) {
+        message = (_jsxs(LoadingNotifToastContainer, __assign({ minw: minW }, { children: [_jsx("span", { children: msg }), " ", _jsx("span", { children: helperMsg })] })));
+    }
+    toast(message, _toastOptions);
 };
 var toastContainerCss = {
     padding: 0,
@@ -38,33 +57,51 @@ 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,
+    },
+    loadingNotification: {
+        color: colors.white,
+        backgroundColor: colors.black,
+        icon: _jsx(CircleSpinner, {}),
     },
 };
-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 ToastWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __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_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));
+var Toast = function (_a) {
+    var zIndex = _a.zIndex, toastStyle = _a.toastStyle;
     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;
-                return (_jsxs(ToastWrapper, __assign({ c: color, bg: backgroundColor }, { children: [_jsx(IconWrapper, __assign({ alignCenter: true }, { children: icon || hotToastIcon })), _jsx(Div, __assign({ alignCenter: true }, { children: message })), _jsx(Div, __assign({ p: 5, clickable: true, onClick: function () { return toast.dismiss(t.id); } }, { children: closeIcon }))] })));
+                return (_jsxs(ToastWrapper, __assign({ c: color, bg: backgroundColor, style: toastStyle }, { children: [_jsx(IconWrapper, __assign({ alignCenter: true }, { children: icon || hotToastIcon })), _jsx(Div, __assign({ alignCenter: true }, { children: message })), _jsx(Div, __assign({ p: 5, clickable: true, onClick: function () { return toast.dismiss(t.id); } }, { children: closeIcon }))] })));
             } }))); } })));
 };
 export { Toast };
 var closeIcon = (_jsxs("svg", __assign({ width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M2.5 2.5L7.82258 7.82258", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2.5 7.82251L7.82258 2.49993", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

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", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 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", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 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", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 6C12.5523 6 13 6.44772 13 7V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V7C11 6.44772 11.4477 6 12 6ZM12 15C12.5523 15 13 15.4477 13 16V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V16C11 15.4477 11.4477 15 12 15Z", fill: "#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/Autocomplete.js

@@ -56,7 +56,7 @@ var Autocomplete = function (_a) {
     var _k = useState(false), isTyping = _k[0], setIsTyping = _k[1];
     var t = useTranslation().t;
     useEffect(function () {
-        if (value)
+        if (value !== null && value !== undefined)
             setText(selectedLabel);
         else
             setText("");
@@ -83,7 +83,7 @@ var Autocomplete = function (_a) {
             })
             : options;
     }, [updatedText, text, options]);
-    var inputIconUI = text ? (_jsx(ClearIcon, __assign({ clickable: true, dim: 24, centered: true, id: id ? "".concat(id, "-clear") : null, onClick: function (evt) {
+    var inputIconUI = text ? (_jsx(ClearIcon, __assign({ clickable: true, dim: 24, centered: true, "data-cy": "clear-icon", id: id ? "".concat(id, "-clear") : null, onClick: function (evt) {
             evt.preventDefault();
             evt.stopPropagation();
             onChange(undefined);

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/common/inputs/TextInput.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { DivCSSProps } from "../../styled/utils";
+export declare const handleInputPaste: (event: any) => void;
 export declare const HTMLInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
     padding?: string;
 }, never>;

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

@@ -31,6 +31,14 @@ import { FormInputLabel } from "..";
 import { useDebounce } from "../../hooks";
 import { Div } from "../../styled/utils";
 import Tooltip from "./tooltip";
+export var handleInputPaste = function (event) {
+    var clipboardData = event.clipboardData;
+    var pastedData = clipboardData.getData("text");
+    if (pastedData.includes("\t") || pastedData.includes("\n")) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+};
 export var HTMLInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n\n  padding: ", ";\n  height: 68px;\n  margin: 0px;\n  box-shadow: none;\n\n  outline: none;\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", ";\n\n    /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n    box-shadow: 0px 0px 8px ", "3d;\n  }\n\n  :hover {\n    box-shadow: none;\n    background: transparent;\n  }\n\n  ", "\n  ", "\n"], ["\n  position: relative;\n\n  padding: ", ";\n  height: 68px;\n  margin: 0px;\n  box-shadow: none;\n\n  outline: none;\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", ";\n\n    /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n    box-shadow: 0px 0px 8px ", "3d;\n  }\n\n  :hover {\n    box-shadow: none;\n    background: transparent;\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
     var padding = _a.padding;
     return (padding ? padding : "20px 16px");
@@ -53,7 +61,7 @@ var TextInput = function (_a) {
         : isPasswordField || icon
             ? "20px 35px 20px 16px"
             : null;
-    return (_jsxs(Div, __assign({ w100: true }, props, { children: [showLabel ? (_jsx(FormInputLabel, __assign({ isDisabled: isDisabled, mb: 8, htmlFor: id, h: 20 }, { children: _jsxs(Div, __assign({ dflex: true }, { children: [_jsx(Div, __assign({ centered: true }, { children: label })), labelTooltip ? _jsx(Tooltip, { ml: 4, tooltip: labelTooltip }) : null] })) }))) : null, _jsxs(Div, __assign({ pRelative: true }, { children: [_jsx(HTMLInput, __assign({}, {
+    return (_jsxs(Div, __assign({ w100: true }, props, { children: [showLabel ? (_jsx(FormInputLabel, __assign({ isDisabled: isDisabled, mb: 8, htmlFor: id, h: 20 }, { children: _jsxs(Div, __assign({ dflex: true }, { children: [_jsx(Div, __assign({ centered: true }, { children: label })), labelTooltip ? _jsx(Tooltip, { ml: 4, tooltip: labelTooltip }) : null] })) }))) : null, _jsxs(Div, __assign({ pRelative: true }, { children: [_jsx(HTMLInput, __assign({ "data-cy": "html-input" }, {
                         placeholder: placeholder,
                         isDisabled: isDisabled,
                         onFocus: onFocus,
@@ -63,7 +71,7 @@ var TextInput = function (_a) {
                         id: id,
                         padding: padding,
                         name: name,
-                    }, { autoComplete: "off", type: isPasswordVisible ? "text" : type, value: _value || "", onChange: function (_a) {
+                    }, { onPaste: handleInputPaste, autoComplete: "off", type: isPasswordVisible ? "text" : type, value: _value || "", onChange: function (_a) {
                             var value = _a.target.value;
                             return set_Value(value);
                         }, ref: setInputRef, onBlur: function () {

package/lib/esm/index.js

@@ -99,7 +99,7 @@ var FuseImporter = /** @class */ (function () {
                     case 0: return [4 /*yield*/, this.configureI18n()];
                     case 1:
                         _a.sent();
-                        isRunningTest = typeof (window === null || window === void 0 ? void 0 : window.Cypress) !== "undefined";
+                        isRunningTest = this.options.cypress === true || process.env.REACT_APP_CYPRESS;
                         if (isRunningTest) {
                             this.renderImporterComponent();
                             i18n.reloadResources();

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

@@ -129,5 +129,15 @@ declare const _default: {
             title: string;
         };
     };
+    warnings_banner: {
+        trial_mode: {
+            info_text: string;
+            button_text: string;
+        };
+        invalid_submit_fn: {
+            info_text: string;
+            button_text: string;
+        };
+    };
 };
 export default _default;

package/lib/esm/locales/de.js

@@ -130,4 +130,14 @@ export default {
             title: "Sie sind derzeit im Vorschau-Modus.",
         },
     },
+    warnings_banner: {
+        trial_mode: {
+            info_text: "Dieses Konto befindet sich im Testmodus. Importe sind auf 100 Datensätze beschränkt.",
+            button_text: "Plan auswählen",
+        },
+        invalid_submit_fn: {
+            info_text: "Senden ist deaktiviert. Schalten Sie den Inkognito-Modus aus oder fügen Sie einen onSubmit-Hook hinzu, um das Senden zu aktivieren.",
+            button_text: "Wie geht das?",
+        },
+    },
 };

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;
@@ -128,6 +141,16 @@ declare const _default: {
         preview_mode_banner: {
             title: string;
         };
+        warnings_banner: {
+            trial_mode: {
+                info_text: string;
+                button_text: string;
+            };
+            invalid_submit_fn: {
+                info_text: string;
+                button_text: string;
+            };
+        };
     };
 };
 export default _default;

package/lib/esm/locales/en.js

@@ -64,6 +64,7 @@ export default {
             search_rows: {
                 tooltip: "Search something",
                 placeholder: "Search something...",
+                number_of_results: "{{length}} results",
             },
             filter_by_errors: {
                 search_or_select: "Search or select",
@@ -107,6 +108,18 @@ export default {
             continue: "Continue",
             submit: "Submit",
         },
+        find_and_replace_modal: {
+            cancel: "Cancel",
+            description: "Enter the text you want to find and replace.",
+            find: "Find",
+            no_records_found: "Text could not be found in any cells.",
+            records_replaced: "{{length}} row(s) have been updated.",
+            replace_with: "Replace With",
+            submit: "Find and Replace",
+            title: "Find & Replace",
+            use_case_sensitive: "Use case sensitive matching",
+            use_regex: "Use regular expression matching",
+        },
         unmatched_headers_modal: {
             title: "Unmatched Column Headers",
             description_singular: "There is {{count}} unmatched column headers. You will have to fill these out manually if you proceed.",
@@ -129,5 +142,15 @@ export default {
         preview_mode_banner: {
             title: "You’re currently in Preview mode.",
         },
+        warnings_banner: {
+            trial_mode: {
+                info_text: "This account is in trial mode. Imports are limited to 100 records.",
+                button_text: "Select plan",
+            },
+            invalid_submit_fn: {
+                info_text: "Submit is disabled. Turn off Incognito Mode or add an onSubmit hook to enable submit.",
+                button_text: "How to do it?",
+            },
+        },
     },
 };

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

@@ -128,6 +128,16 @@ declare const _default: {
         preview_mode_banner: {
             title: string;
         };
+        warnings_banner: {
+            trial_mode: {
+                info_text: string;
+                button_text: string;
+            };
+            invalid_submit_fn: {
+                info_text: string;
+                button_text: string;
+            };
+        };
     };
 };
 export default _default;

package/lib/esm/locales/es.js

@@ -129,5 +129,15 @@ export default {
         preview_mode_banner: {
             title: "Actualmente estás en modo de vista previa.",
         },
+        warnings_banner: {
+            trial_mode: {
+                info_text: "Esta cuenta está en modo de prueba. Las importaciones están limitadas a 100 registros.",
+                button_text: "Seleccionar plan",
+            },
+            invalid_submit_fn: {
+                info_text: "Enviar está desactivado. Desactive el modo incógnito o agregue un hook onSubmit para habilitar el envío.",
+                button_text: "¿Cómo hacerlo?",
+            },
+        },
     },
 };

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

@@ -128,6 +128,16 @@ declare const _default: {
         preview_mode_banner: {
             title: string;
         };
+        warnings_banner: {
+            trial_mode: {
+                info_text: string;
+                button_text: string;
+            };
+            invalid_submit_fn: {
+                info_text: string;
+                button_text: string;
+            };
+        };
     };
 };
 export default _default;

package/lib/esm/locales/fr.js

@@ -129,5 +129,15 @@ export default {
         preview_mode_banner: {
             title: "Vous êtes actuellement en mode Aperçu.",
         },
+        warnings_banner: {
+            trial_mode: {
+                info_text: "Ce compte est en mode d'essai. Les imports sont limités à 100 enregistrements.",
+                button_text: "Sélectionner un plan",
+            },
+            invalid_submit_fn: {
+                info_text: "L'envoi est désactivé. Désactivez le mode incognito ou ajoutez un hook onSubmit pour activer l'envoi.",
+                button_text: "Comment faire ?",
+            },
+        },
     },
 };

package/lib/esm/styled/theme/colorPalette.d.ts

@@ -12,6 +12,7 @@ export declare const colorPalette: {
     red50: string;
     red100: string;
     red200: string;
+    red250: string;
     red300: string;
     red400: string;
     red500: string;
@@ -116,6 +117,7 @@ export declare const colors: {
     red50: string;
     red100: string;
     red200: string;
+    red250: string;
     red300: string;
     red400: string;
     red500: string;

package/lib/esm/styled/theme/colorPalette.js

@@ -29,6 +29,7 @@ var red = {
     red50: "#E6DBDB",
     red100: "#FCEDEA",
     red200: "#F8DCD4",
+    red250: "#FEDBD7",
     red300: "#F2B9AA",
     red400: "#EB967F",
     red500: "#E57354",

package/lib/esm/styled/theme/index.d.ts

@@ -146,6 +146,7 @@ export declare const theme: {
         red50: string;
         red100: string;
         red200: string;
+        red250: string;
         red300: string;
         red400: string;
         red500: string;