fuse-importer 0.23.7 → 0.23.8

package/lib/esm/Importer/ImporterContextProvider.d.ts

@@ -18,6 +18,7 @@ export declare type UploadedDataEnumFieldValues = {
 export declare type TemplateHeader = {
     label: string;
     required: boolean;
+    unique: boolean;
     column_type: string;
     internal_key: string;
     values: string[];
@@ -40,6 +41,7 @@ export declare type Column = {
     label: string;
     pattern: string;
     required: boolean;
+    unique: boolean;
     values: string[];
 };
 export declare type State = {

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

@@ -44,7 +44,6 @@ var HeaderMatcher = function () {
         isMatched: !!templateHeaderMatchings[templateHeaderLabel],
     }); })
         .sort(function (a, b) { return (b.isMatched ? 1 : -1); }));
-    //sort data based on automatched items
     var sortedData = dataSortingOrderRef.current.map(function (sorting) { return data[sorting.index]; });
     var tableRowHeight = 100;
     var tableHeight = getTableHeight({

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

@@ -27,7 +27,7 @@ export var tableColumns = [
                 newTemplateHeaderMatchings[ourColumns] = selected;
                 setTemplateHeaderMatchings(newTemplateHeaderMatchings);
             };
-            return (_jsx(Autocomplete, { w: "92%", onChange: onChange, value: yourColumns, options: uploadedDataHeaders.map(function (h) { return ({
+            return (_jsx(Autocomplete, { w: "92%", onChange: onChange, value: yourColumns, id: "your-column-".concat(ourColumns), options: uploadedDataHeaders.map(function (h) { return ({
                     value: h,
                     label: h,
                 }); }) }));
@@ -41,7 +41,7 @@ export var tableColumns = [
             var ourColumns = _a.ourColumns;
             var templateHeaders = useImporterContext().templateHeaders;
             var isRequired = (_b = templateHeaders.find(function (th) { return th.label === ourColumns; })) === null || _b === void 0 ? void 0 : _b.required;
-            return (_jsxs(Div, __assign({ body1: true }, { children: [ourColumns, isRequired ? "*" : ""] })));
+            return (_jsxs(Div, __assign({ body1: true, id: "our-column-".concat(ourColumns) }, { children: [ourColumns, isRequired ? "*" : ""] })));
         },
     },
     {

package/lib/esm/Importer/PreviewModeBanner.js

@@ -12,9 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { theme } from "../styled/theme";
 import { Div, Span } from "../styled/utils";
-import { useImporterContext } from "./ImporterContextProvider";
 export var PreviewModeBanner = function () {
-    var previewMode = useImporterContext().importerOptions.previewMode;
-    return previewMode ? (_jsxs(Div, __assign({ bg: theme.colors.blue100, h: 80, alignCenter: true }, { children: [_jsx(Div, __assign({ ml: 33, mr: 8 }, { children: infoIcon })), _jsx(Span, __assign({ mr: 16 }, { children: "You’re currently in Preview mode." }))] }))) : null;
+    return (_jsxs(Div, __assign({ bg: theme.colors.blue100, h: 80, alignCenter: true }, { children: [_jsx(Div, __assign({ ml: 33, mr: 8 }, { children: infoIcon })), _jsx(Span, __assign({ mr: 16 }, { children: "You’re currently in Preview mode." }))] })));
 };
 var infoIcon = (_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: "14", cy: "2.5", r: "2.5", fill: "#0EBEBE" }), _jsx("path", { d: "M15.5075 8H6L5 10.5L10 11L6.57474 18.9354C6.57474 18.9354 6.40657 20.1663 6.57474 20.9247C6.76276 21.7725 6.97074 22.2838 7.56727 22.9139C8.6672 24.0757 9.95115 24.1037 11.5374 23.9085C14.2577 23.5737 17 19.5 17 19.5L15.5075 17.9408C15.5075 17.9408 13.5223 19.93 12.5298 19.93C11.5373 19.93 11.5374 18.9354 11.5374 18.9354L15.5075 8Z", fill: "#0EBEBE" })] })));

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

@@ -70,6 +70,7 @@ var Review = function () {
             name: templateHeader.internal_key,
             type: FieldTypes[templateHeader.column_type] || FieldTypes.string,
             isRequired: templateHeader.required,
+            isUnique: templateHeader.unique,
             options: templateHeader.values,
             pattern: templateHeader.pattern,
         }); });

package/lib/esm/Importer/SpreadsheetReviewContextProvider.js

@@ -57,7 +57,7 @@ export var SpreadsheetReviewContextProvider = function (_a) {
     var _c = useState(null), reviewedData = _c[0], setReviewedData = _c[1];
     var _d = useState(null), submittedData = _d[0], setSubmittedData = _d[1];
     var _e = useState(null), appResponse = _e[0], setAppResponse = _e[1];
-    var _f = useImporterContext(), templateSlug = _f.templateSlug, fuseApi = _f.fuseApi;
+    var _f = useImporterContext(), templateSlug = _f.templateSlug, fuseApi = _f.fuseApi, previewMode = _f.importerOptions.previewMode;
     var getImportWasSuccessful = function (response) {
         return !response.errors || !Object.keys(response.errors).length;
     };
@@ -97,7 +97,7 @@ export var SpreadsheetReviewContextProvider = function (_a) {
                     applicationResponse = _a.sent();
                     setAppResponse(applicationResponse);
                     importWasSuccessful = getImportWasSuccessful(applicationResponse);
-                    if (!importWasSuccessful) return [3 /*break*/, 3];
+                    if (!(importWasSuccessful && !previewMode)) return [3 /*break*/, 3];
                     rowCount = reviewedData.length;
                     return [4 /*yield*/, trackImportedRowsCount(rowCount)];
                 case 2:

package/lib/esm/Importer/Stepper.js

@@ -133,7 +133,7 @@ var Stepper = function (_a) {
     var isReviewStep = currentStepIndex === 2;
     var leftButtonUI = (_jsx(Div, __assign({ w: 100 }, { children: currentStepIndex > 0 && !appResponse && (_jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: "Go back" }))) })));
     var rightButtonUI = (_jsxs(Div, __assign({ w: 100 }, { children: [isMatchStep && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: "Continue" }))), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: isSubmitDisabled, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: "Submit" })))] })));
-    return (_jsxs(_Fragment, { children: [unmatchedHeadersModalUI, submitModalUI, _jsxs(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 96, centered: true }, { children: [logoURL && _jsx(Logo, { src: logoURL, alt: "" }), _jsxs(Content, __assign({ spaceBetween: true, w: contentWidth }, { children: [leftButtonUI, _jsx(Div, __assign({ alignCenter: true }, { children: stepsUI })), rightButtonUI] })), _jsx(CloseIcon, __assign({ centered: true, clickable: true, onClick: onClose }, { children: closeIconCondensed }))] }))] }));
+    return (_jsxs(_Fragment, { children: [unmatchedHeadersModalUI, submitModalUI, _jsxs(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 96, centered: true }, { children: [logoURL && _jsx(Logo, { src: logoURL, alt: "" }), _jsxs(Content, __assign({ spaceBetween: true, w: contentWidth }, { children: [leftButtonUI, _jsx(Div, __assign({ alignCenter: true }, { children: stepsUI })), rightButtonUI] })), _jsx(CloseIcon, __assign({ "data-test-id": "close-importer", centered: true, clickable: true, onClick: onClose }, { children: closeIconCondensed }))] }))] }));
 };
 var Content = styled(Div)(function (_a) {
     var _b = _a.theme, colors = _b.colors, c = _b.css;

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

@@ -205,6 +205,7 @@ export var SpreadsheetContextProvider = function (_a) {
                     fields: fields,
                     batchValidationErrors: batchValidationErrors,
                     submittedData: submittedData,
+                    data: data,
                 })[sortByFieldErrors];
             };
             var aHasErrors = recordHasErrors(a);
@@ -292,6 +293,7 @@ var useValidationState = function (_a) {
                     fields: fields,
                     batchValidationErrors: batchValidationErrors,
                     submittedData: submittedData,
+                    data: data,
                 });
                 updateFieldErrorCount(recordErrors);
             });

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

@@ -26,6 +26,6 @@ export var FieldHeader = function (_a) {
     var field = _a.field, sortByFieldErrors = _a.sortByFieldErrors;
     var columnErrorCounts = useSpreadsheetContext().columnErrorCounts;
     var fieldErrorCount = columnErrorCounts[field.name];
-    return (_jsxs(Div, __assign({ p: "0 16px", spaceBetween: true, w100: true, alignCenter: true }, { children: [_jsxs(Div, __assign({ truncateText: true }, { children: [field.label, field.isRequired && "*"] })), fieldErrorCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(field.label, " errors") }, { children: _jsx(ErrorCount, __assign({ onClick: function () { return sortByFieldErrors(field.name); } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldErrorCount })) })) })) })))] })));
+    return (_jsxs(Div, __assign({ "data-test-id": "column-header-".concat(field.name), p: "0 16px", spaceBetween: true, w100: true, alignCenter: true }, { children: [_jsxs(Div, __assign({ truncateText: true }, { children: [field.label, field.isRequired && "*"] })), fieldErrorCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(field.label, " errors") }, { children: _jsx(ErrorCount, __assign({ "data-test-id": "column-errors-count-".concat(field.name), onClick: function () { return sortByFieldErrors(field.name); } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldErrorCount })) })) })) })))] })));
 };
 var templateObject_1;

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

@@ -8,5 +8,6 @@ export declare type SpreadsheetAutocompleteProps = {
     options: AutoCompleteOption[];
     isInputDisabled?: boolean;
     fieldType: FieldTypes;
+    id?: string;
 };
 export declare const SpreadsheetAutocomplete: React.FC<SpreadsheetAutocompleteProps>;

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

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

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

@@ -62,22 +62,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { debounce } from "lodash";
 import styled, { css } from "styled-components";
-import { getRecordErrors, getRenderedRecordWithErrors, isFloat, isInteger, } from "..";
+import { getRecordErrors, getRenderedRecordWithErrors, isFloat, isInteger, isTrue, isEmpty, } from "..";
 import { TooltipProvider } from "../../../../../common/TooltipProvider";
 import { Div } from "../../../../../styled/utils";
 import { FieldTypes } from "../../../../../types";
 import { useSpreadsheetReviewContext } from "../../../../SpreadsheetReviewContextProvider";
 import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
 export var parseValue = function (fieldType, value) {
+    if (isEmpty(value))
+        return value;
     if (fieldType === FieldTypes.float)
         return isFloat(value) ? parseFloat(value) : value;
     if (fieldType === FieldTypes.integer)
         return isInteger(value) ? parseInt(value) : value;
+    if (fieldType === FieldTypes.boolean)
+        return isTrue(value) ? true : false;
     return value;
 };
 export var useValidationError = function (fieldName, record) {
     var isSubmitting = useSpreadsheetReviewContext().isSubmitting;
-    var _a = useSpreadsheetContext(), fields = _a.fields, submittedData = _a.submittedData, batchValidationErrors = _a.batchValidationErrors;
+    var _a = useSpreadsheetContext(), fields = _a.fields, submittedData = _a.submittedData, batchValidationErrors = _a.batchValidationErrors, data = _a.data;
     var validationError = null;
     if (!isSubmitting) {
         var recordErrors = getRecordErrors({
@@ -85,6 +89,7 @@ export var useValidationError = function (fieldName, record) {
             fields: fields,
             submittedData: submittedData,
             batchValidationErrors: batchValidationErrors,
+            data: data,
         });
         validationError = recordErrors[fieldName];
     }

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

@@ -1,6 +1,9 @@
 import { Field, Record, BatchValidationErrors } from "../../../../types";
 export declare const spreadsheetRowHeightPx = 40;
 export declare const spreadsheetHeaderHeightPx = 40;
+export declare const isEmpty: (value: any) => boolean;
+export declare const isEmail: (value: any) => boolean;
+export declare const isUrl: (value: any) => boolean;
 export declare const isTrue: (value: string) => boolean;
 export declare const isInteger: (value: string) => boolean;
 export declare const isFloat: (value: string) => boolean;
@@ -14,6 +17,7 @@ declare type GetRecordErrorsArgs = {
     fields: Field[];
     batchValidationErrors: BatchValidationErrors;
     submittedData: Record[];
+    data: Record[];
 };
-export declare const getRecordErrors: ({ record, fields, batchValidationErrors, submittedData, }: GetRecordErrorsArgs) => {};
+export declare const getRecordErrors: ({ record, fields, batchValidationErrors, submittedData, data, }: GetRecordErrorsArgs) => {};
 export {};

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

@@ -14,17 +14,17 @@ import { FieldTypes, } from "../../../../types";
 import { DateTime } from "luxon";
 export var spreadsheetRowHeightPx = 40;
 export var spreadsheetHeaderHeightPx = 40;
-var isEmpty = function (value) {
+export var isEmpty = function (value) {
     return (value === undefined ||
         value === null ||
         (typeof value === "object" && Object.keys(value).length === 0) ||
         (typeof value === "string" && value.trim().length === 0));
 };
-var isEmail = function (value) {
+export var isEmail = function (value) {
     var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     return emailRegex.test(value);
 };
-var isUrl = function (value) {
+export var isUrl = function (value) {
     var urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/g;
     return urlRegex.test(value);
 };
@@ -49,6 +49,10 @@ var validateDatePattern = function (field, fieldValue) {
         return "".concat(field.label, " must match the pattern ").concat(field.pattern);
     }
 };
+var validateUnique = function (fieldValue, key, records) {
+    var existingRecords = records.filter(function (r) { return r[key] === fieldValue; });
+    return existingRecords.length < 2;
+};
 var validations = (_a = {},
     _a[FieldTypes.email] = function (field, fieldValue) {
         if (!isEmail(fieldValue)) {
@@ -84,7 +88,7 @@ var ignoreNullOrUndefinedKeyValues = function (obj) {
     return result;
 };
 export var getRecordErrors = function (_a) {
-    var record = _a.record, fields = _a.fields, batchValidationErrors = _a.batchValidationErrors, submittedData = _a.submittedData;
+    var record = _a.record, fields = _a.fields, batchValidationErrors = _a.batchValidationErrors, submittedData = _a.submittedData, data = _a.data;
     var submittedRecord = submittedData === null || submittedData === void 0 ? void 0 : submittedData.find(function (r) { return r._meta.id === record._meta.id; });
     var recordHasData = !recordIsEmpty(record, fields);
     if (recordHasData) {
@@ -96,6 +100,12 @@ export var getRecordErrors = function (_a) {
             }
             else if (!isEmpty(fieldValue) && validations[field.type]) {
                 newErrors[field.name] = validations[field.type](field, fieldValue);
+                if (field.isUnique && !newErrors[field.name]) {
+                    var isFieldUnique = validateUnique(fieldValue, field.name, data);
+                    if (!isFieldUnique) {
+                        newErrors[field.name] = "".concat(field.label, " must be unique");
+                    }
+                }
             }
             return newErrors;
         }, {});

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

@@ -91,7 +91,7 @@ var SpreadsheetData = function () {
             Content: function (record) {
                 var Input = inputTypes[field.type];
                 var rowIndex = record.rowIndex, recordProp = __rest(record, ["rowIndex"]);
-                return (_jsx(Input, { fieldType: field.type, name: field.name, options: field.options, record: recordProp }));
+                return (_jsx(Input, { id: "".concat(field.name, "-").concat(rowIndex), fieldType: field.type, name: field.name, options: field.options, record: recordProp }));
             },
         }); });
     }, [fields]);

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, _c = _b.importerOptions, zIndex = _c.zIndex, loadingComponent = _c.loadingComponent;
+    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, previewMode = _c.previewMode;
     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({ 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, {}) }))] })) }))] })));
+    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: [previewMode && _jsx(PreviewModeBanner, {}), !previewMode && _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/Importer/theme.d.ts

@@ -11,7 +11,7 @@ export declare type ImporterStylePreferences = {
 export declare type Theme = typeof theme;
 declare const getCustomTheme: (importerStylePreferences: ImporterStylePreferences) => {
     theme: {
-        colors: {
+        readonly colors: {
             backgroundInterface: string;
             interactiveDisabled: string;
             error: string;
@@ -93,7 +93,7 @@ declare const getCustomTheme: (importerStylePreferences: ImporterStylePreference
             orange900: string;
             orange1000: string;
         };
-        textStyles: {
+        readonly textStyles: {
             h1: import("styled-components").FlattenSimpleInterpolation;
             h2: import("styled-components").FlattenSimpleInterpolation;
             h3: import("styled-components").FlattenSimpleInterpolation;
@@ -113,7 +113,7 @@ declare const getCustomTheme: (importerStylePreferences: ImporterStylePreference
             buttonTextSmall: import("styled-components").FlattenSimpleInterpolation;
             link: import("styled-components").FlattenSimpleInterpolation;
         };
-        css: {
+        readonly css: {
             pt: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
             pb: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
             pl: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
@@ -181,6 +181,7 @@ declare const getCustomTheme: (importerStylePreferences: ImporterStylePreference
             underline: import("styled-components").FlattenSimpleInterpolation;
             textAlignCenter: import("styled-components").FlattenSimpleInterpolation;
             textAlignRight: import("styled-components").FlattenSimpleInterpolation;
+            textAlignLeft: import("styled-components").FlattenSimpleInterpolation;
             uppercase: import("styled-components").FlattenSimpleInterpolation;
             capitalize: import("styled-components").FlattenSimpleInterpolation;
             lowercase: import("styled-components").FlattenSimpleInterpolation;
@@ -215,7 +216,7 @@ declare const getCustomTheme: (importerStylePreferences: ImporterStylePreference
             br: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
             fadeIn: import("styled-components").FlattenSimpleInterpolation;
         };
-        media: {
+        readonly media: {
             desktop: string;
             mobile: string;
         };

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

@@ -101,7 +101,7 @@ export var TableView = React.memo(function (_a) {
         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) {
+    return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper" }, { isLoading: isLoading }, { h: tableHeight }, props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
                     var width = _a.width, height = _a.height;
                     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 })));
                 } })] })));

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ToastOptions, ToastType } from "react-hot-toast/dist/core/types";
+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;
 export { Toast };

package/lib/esm/common/Toast.js

@@ -14,7 +14,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import toast, { ToastBar, Toaster } from "react-hot-toast";
+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";

package/lib/esm/common/buttons.js

@@ -30,7 +30,9 @@ import { Div, HTMLButton } from "../styled/utils";
 var types = ["primary", "secondary", "tertiary"];
 var styles = {
     primary: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n\n    border: solid 4px ", ";\n    box-sizing: border-box;\n\n    :hover {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    :active {\n      background: ", ";\n      border: 4px solid ", ";\n    }\n    :focus {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    ", "\n  "], ["\n    color: ", ";\n    background: ", ";\n\n    border: solid 4px ", ";\n    box-sizing: border-box;\n\n    :hover {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    :active {\n      background: ", ";\n      border: 4px solid ", ";\n    }\n    :focus {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    ", "\n  "])), function (props) { return props.theme.colors.white; }, function (props) { return props.theme.colors.pink500; }, function (props) { return props.theme.colors.pink500; }, function (props) { return props.theme.colors.pink500; }, function (props) { return props.theme.colors.pink500; }, function (props) { return props.theme.colors.pink500; }, function (props) { return props.theme.colors.pink700; }, function (props) { return props.theme.colors.pink500; }, function (props) { return props.theme.colors.pink500; }, function (props) {
-        return props.isDisabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", ";\n        box-shadow: 0px;\n        border: none;\n      "], ["\n        background: ", ";\n        box-shadow: 0px;\n        border: none;\n      "])), function (props) { return props.theme.colors.interactiveDisabled; });
+        return props.isDisabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", " !important;\n        box-shadow: none !important;\n        border: none !important;\n        cursor: not-allowed !important;\n      "], ["\n        background: ", " !important;\n        box-shadow: none !important;\n        border: none !important;\n        cursor: not-allowed !important;\n      "])), function (props) {
+            return props.theme.colors.interactiveDisabled;
+        });
     }),
     secondary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background: ", ";\n    box-sizing: border-box;\n    border: solid 1px ", ";\n    color: ", ";\n    & > svg {\n      & > path {\n        fill: ", ";\n      }\n    }\n    :active {\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n      & > svg {\n        & > path {\n          fill: ", ";\n        }\n      }\n    }\n    :focus {\n      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);\n    }\n    ", "\n  "], ["\n    background: ", ";\n    box-sizing: border-box;\n    border: solid 1px ", ";\n    color: ", ";\n    & > svg {\n      & > path {\n        fill: ", ";\n      }\n    }\n    :active {\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n      & > svg {\n        & > path {\n          fill: ", ";\n        }\n      }\n    }\n    :focus {\n      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);\n    }\n    ", "\n  "])), function (props) { return props.theme.colors.white; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }, function (props) { return props.theme.colors.white; }, function (props) {
         return props.isDisabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        border: 2px solid ", ";\n        color: ", ";\n        & > svg {\n          & > path {\n            fill: ", ";\n          }\n        }\n      "], ["\n        border: 2px solid ", ";\n        color: ", ";\n        & > svg {\n          & > path {\n            fill: ", ";\n          }\n        }\n      "])), function (props) { return props.theme.colors.gray390; }, function (props) { return props.theme.colors.gray390; }, function (props) { return props.theme.colors.gray390; });
@@ -51,10 +53,12 @@ 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, disabled: 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, onClick: isDisabled ? null : onClick, onKeyDown: function (_a) {
                 var code = _a.code;
-                if (code === "Space" || (code === "Enter" && onClick))
+                if ((code === "Space" || (code === "Enter" && onClick)) &&
+                    !isDisabled) {
                     onClick();
+                }
             }, 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/inputs/Autocomplete.d.ts

@@ -16,5 +16,5 @@ export declare type Props = {
     placement?: Placement;
     icon?: JSX.Element;
 } & DivCSSProps;
-declare const Autocomplete: ({ label, isInputDisabled, placeholder, value, icon, onChange, placement, options, onToggle, ...props }: Props) => JSX.Element;
+declare const Autocomplete: ({ label, isInputDisabled, placeholder, value, icon, onChange, placement, options, onToggle, id, ...props }: Props) => JSX.Element;
 export { Autocomplete };

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

@@ -46,12 +46,11 @@ var ClickableArea = styled(Div)(function (_a) {
     return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), isInputDisabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      :hover {\n        cursor: pointer;\n        opacity: 0.9;\n      }\n    "], ["\n      :hover {\n        cursor: pointer;\n        opacity: 0.9;\n      }\n    "]))));
 });
 var Autocomplete = function (_a) {
-    var _b;
-    var _c = _a.label, label = _c === void 0 ? null : _c, _d = _a.isInputDisabled, isInputDisabled = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "Select option..." : _e, value = _a.value, icon = _a.icon, onChange = _a.onChange, placement = _a.placement, options = _a.options, onToggle = _a.onToggle, props = __rest(_a, ["label", "isInputDisabled", "placeholder", "value", "icon", "onChange", "placement", "options", "onToggle"]);
-    var _f = useState(false), updatedText = _f[0], setUpdatedText = _f[1];
-    var selectedLabel = ((_b = options.find(function (o) { return o.value === value; })) === null || _b === void 0 ? void 0 : _b.label) || "";
-    var _g = useState(selectedLabel), text = _g[0], setText = _g[1];
-    var _h = useState(false), isMenuOpen = _h[0], setIsMenuOpen = _h[1];
+    var _b = _a.label, label = _b === void 0 ? null : _b, _c = _a.isInputDisabled, isInputDisabled = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "Select option..." : _d, value = _a.value, icon = _a.icon, onChange = _a.onChange, placement = _a.placement, options = _a.options, onToggle = _a.onToggle, id = _a.id, props = __rest(_a, ["label", "isInputDisabled", "placeholder", "value", "icon", "onChange", "placement", "options", "onToggle", "id"]);
+    var _e = useState(false), updatedText = _e[0], setUpdatedText = _e[1];
+    var selectedLabel = useMemo(function () { var _a; return ((_a = options.find(function (o) { return o.value === value; })) === null || _a === void 0 ? void 0 : _a.label) || ""; }, [value]);
+    var _f = useState(selectedLabel), text = _f[0], setText = _f[1];
+    var _g = useState(false), isMenuOpen = _g[0], setIsMenuOpen = _g[1];
     useEffect(function () {
         if (value)
             setText(selectedLabel);
@@ -78,18 +77,18 @@ var Autocomplete = function (_a) {
                 return o.label.toLowerCase().includes(text.toLowerCase());
             })
             : options;
-    }, [updatedText, options]);
-    var inputIconUI = text ? (_jsx(ClearIcon, __assign({ clickable: true, dim: 24, centered: true, onClick: function (evt) {
+    }, [updatedText, text, options]);
+    var inputIconUI = text ? (_jsx(ClearIcon, __assign({ clickable: true, dim: 24, centered: true, id: id ? "".concat(id, "-clear") : null, onClick: function (evt) {
             evt.preventDefault();
             evt.stopPropagation();
             onChange(undefined);
         } }, { children: clearIcon }))) : (_jsx(Div, __assign({ centered: true, dim: 24 }, { children: icon || chevronDownIcon })));
-    return (_jsxs(Div, __assign({ w100: true }, props, { children: [_jsx(ClickableArea, __assign({ isInputDisabled: isInputDisabled, onClick: function () { return setIsMenuOpen(true); } }, { children: _jsx(TextInput, { onBlur: function () {
+    return (_jsxs(Div, __assign({ w100: true }, props, { children: [_jsx(ClickableArea, __assign({ isInputDisabled: isInputDisabled, onClick: function () { return setIsMenuOpen(true); } }, { children: _jsx(TextInput, { id: id, onBlur: function () {
                         if (filteredOptions.length === 0) {
                             setText(selectedLabel);
                             setIsMenuOpen(false);
                         }
-                    }, label: label, isDisabled: isInputDisabled, placeholder: placeholder, value: text, onChange: function (v) { return setText(v); }, icon: inputIconUI }) })), filteredOptions.length > 0 && (_jsx(SelectMenu, __assign({ placement: placement, isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); } }, { children: filteredOptions.map(function (o, index) { return (_jsx(Div, { children: _jsx(MenuItem, __assign({ isSelected: value === o.value, onClick: function () { return onSelect(o.value); } }, { children: o.label })) }, index)); }) })))] })));
+                    }, label: label, isDisabled: isInputDisabled, placeholder: placeholder, value: text, onChange: function (v) { return setText(v); }, icon: inputIconUI }) })), filteredOptions.length > 0 && (_jsx(SelectMenu, __assign({ placement: placement, isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); } }, { children: filteredOptions.map(function (o, index) { return (_jsx(Div, { children: _jsx(MenuItem, __assign({ id: id ? "".concat(id, "-option-").concat(o.label) : null, isSelected: value === o.value, onClick: function () { return onSelect(o.value); } }, { children: o.label })) }, index)); }) })))] })));
 };
 var chevronDownIcon = (_jsx("svg", __assign({ width: "16", height: "9", viewBox: "0 0 16 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M14.9263 1L7.9631 7.96317L0.999928 1", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
 var clearIcon = (_jsxs("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M4 4L12.5161 12.5161", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4 12.5161L12.5161 3.99998", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { DivCSSProps } from "../../styled/utils";
-export declare const HTMLInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const HTMLInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    padding?: string;
+}, never>;
 export declare const TextInputIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../styled/utils").CSSProps, never>;
 declare type Props = {
     label?: string;
@@ -16,6 +18,8 @@ declare type Props = {
     withDebounce?: boolean;
     autoFocus?: boolean;
     id?: string;
+    padding?: string;
+    labelTooltip?: JSX.Element | null;
 } & DivCSSProps;
-declare const TextInput: ({ label, icon, placeholder, value, type, onChange, onBlur, isDisabled, hasError, onFocus, withDebounce, autoFocus, id, ...props }: Props) => JSX.Element;
+declare const TextInput: ({ label, icon, labelTooltip, placeholder, value, type, onChange, onBlur, isDisabled, hasError, onFocus, withDebounce, autoFocus, id, padding, ...props }: Props) => JSX.Element;
 export { TextInput };

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

@@ -30,19 +30,22 @@ import styled, { css } from "styled-components";
 import { FormInputLabel } from "..";
 import { useDebounce } from "../../hooks";
 import { Div } from "../../styled/utils";
-export var HTMLInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding: 20px 16px;\n  height: 68px;\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  ", "\n  ", "\n"], ["\n  position: relative;\n  padding: 20px 16px;\n  height: 68px;\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  ", "\n  ", "\n"])), function (props) { return props.theme.colors.gray300; }, function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.placeholder; }, function (props) { return props.theme.colors.blue500; }, function (props) { return props.theme.colors.blue500; }, function (props) {
+export var HTMLInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding: ", ";\n  height: 68px;\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  ", "\n  ", "\n"], ["\n  position: relative;\n  padding: ", ";\n  height: 68px;\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  ", "\n  ", "\n"])), function (_a) {
+    var padding = _a.padding;
+    return (padding ? padding : "20px 16px");
+}, function (props) { return props.theme.colors.gray300; }, function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.placeholder; }, function (props) { return props.theme.colors.blue500; }, function (props) { return props.theme.colors.blue500; }, function (props) {
     return props.isDisabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: not-allowed;\n      opacity: 0.7;\n      pointer-events: none;\n    "], ["\n      cursor: not-allowed;\n      opacity: 0.7;\n      pointer-events: none;\n    "])));
 }, function (props) {
     return props.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-right: 50px;\n      border: solid 2px ", ";\n    "], ["\n      padding-right: 50px;\n      border: solid 2px ", ";\n    "])), function (props) { return props.theme.colors.error; });
 });
 export var TextInputIcon = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  right: 11px;\n  top: 0;\n  height: 100%;\n"], ["\n  position: absolute;\n  right: 11px;\n  top: 0;\n  height: 100%;\n"])));
 var TextInput = function (_a) {
-    var label = _a.label, _b = _a.icon, icon = _b === void 0 ? null : _b, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, value = _a.value, _d = _a.type, type = _d === void 0 ? "text" : _d, onChange = _a.onChange, _e = _a.onBlur, onBlur = _e === void 0 ? null : _e, _f = _a.isDisabled, isDisabled = _f === void 0 ? false : _f, _g = _a.hasError, hasError = _g === void 0 ? false : _g, _h = _a.onFocus, onFocus = _h === void 0 ? null : _h, _j = _a.withDebounce, withDebounce = _j === void 0 ? true : _j, _k = _a.autoFocus, autoFocus = _k === void 0 ? false : _k, id = _a.id, props = __rest(_a, ["label", "icon", "placeholder", "value", "type", "onChange", "onBlur", "isDisabled", "hasError", "onFocus", "withDebounce", "autoFocus", "id"]);
-    var _l = useDebounce(value, onChange, withDebounce ? 0 : 300), _value = _l._value, set_Value = _l.set_Value;
+    var label = _a.label, _b = _a.icon, icon = _b === void 0 ? null : _b, _c = _a.labelTooltip, labelTooltip = _c === void 0 ? null : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "" : _d, value = _a.value, _e = _a.type, type = _e === void 0 ? "text" : _e, onChange = _a.onChange, _f = _a.onBlur, onBlur = _f === void 0 ? null : _f, _g = _a.isDisabled, isDisabled = _g === void 0 ? false : _g, _h = _a.hasError, hasError = _h === void 0 ? false : _h, _j = _a.onFocus, onFocus = _j === void 0 ? null : _j, _k = _a.withDebounce, withDebounce = _k === void 0 ? true : _k, _l = _a.autoFocus, autoFocus = _l === void 0 ? false : _l, id = _a.id, padding = _a.padding, props = __rest(_a, ["label", "icon", "labelTooltip", "placeholder", "value", "type", "onChange", "onBlur", "isDisabled", "hasError", "onFocus", "withDebounce", "autoFocus", "id", "padding"]);
+    var _m = useDebounce(value, onChange, withDebounce ? 0 : 300), _value = _m._value, set_Value = _m.set_Value;
     var res = usePasswordVisibleIcon(type);
     var passwordVisibleIcon = res.passwordVisibleIcon, isPasswordVisible = res.isPasswordVisible;
     var _icon = passwordVisibleIcon || icon;
-    return (_jsxs(Div, __assign({ w100: true }, props, { children: [label && (_jsx(FormInputLabel, __assign({ isDisabled: isDisabled, mb: 8, htmlFor: id }, { children: label }))), _jsxs(Div, __assign({ pRelative: true }, { children: [_jsx(HTMLInput, __assign({}, {
+    return (_jsxs(Div, __assign({ w100: true }, props, { children: [label && (_jsx(FormInputLabel, __assign({ isDisabled: isDisabled, mb: 8, htmlFor: id }, { children: _jsxs(Div, __assign({ dflex: true }, { children: [_jsx(Div, __assign({ centered: true }, { children: label })), _jsx(Div, __assign({ ml: 4 }, { children: labelTooltip }))] })) }))), _jsxs(Div, __assign({ pRelative: true }, { children: [_jsx(HTMLInput, __assign({}, {
                         placeholder: placeholder,
                         isDisabled: isDisabled,
                         onFocus: onFocus,
@@ -50,6 +53,7 @@ var TextInput = function (_a) {
                         autoFocus: autoFocus,
                         disabled: isDisabled,
                         id: id,
+                        padding: padding,
                     }, { type: isPasswordVisible ? "text" : type, value: _value || "", onChange: function (_a) {
                             var value = _a.target.value;
                             return set_Value(value);

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

@@ -1,3 +1,4 @@
+import "styled-components";
 import { colors } from "./colorPalette";
 export declare const getCssValue: (v: any) => string;
 export { colors };
@@ -69,6 +70,7 @@ export declare const appCss: {
     underline: import("styled-components").FlattenSimpleInterpolation;
     textAlignCenter: import("styled-components").FlattenSimpleInterpolation;
     textAlignRight: import("styled-components").FlattenSimpleInterpolation;
+    textAlignLeft: import("styled-components").FlattenSimpleInterpolation;
     uppercase: import("styled-components").FlattenSimpleInterpolation;
     capitalize: import("styled-components").FlattenSimpleInterpolation;
     lowercase: import("styled-components").FlattenSimpleInterpolation;
@@ -104,7 +106,7 @@ export declare const appCss: {
     fadeIn: import("styled-components").FlattenSimpleInterpolation;
 };
 export declare const theme: {
-    colors: {
+    readonly colors: {
         backgroundInterface: string;
         interactiveDisabled: string;
         error: string;
@@ -186,7 +188,7 @@ export declare const theme: {
         orange900: string;
         orange1000: string;
     };
-    textStyles: {
+    readonly textStyles: {
         h1: import("styled-components").FlattenSimpleInterpolation;
         h2: import("styled-components").FlattenSimpleInterpolation;
         h3: import("styled-components").FlattenSimpleInterpolation;
@@ -206,7 +208,7 @@ export declare const theme: {
         buttonTextSmall: import("styled-components").FlattenSimpleInterpolation;
         link: import("styled-components").FlattenSimpleInterpolation;
     };
-    css: {
+    readonly css: {
         pt: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
         pb: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
         pl: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
@@ -274,6 +276,7 @@ export declare const theme: {
         underline: import("styled-components").FlattenSimpleInterpolation;
         textAlignCenter: import("styled-components").FlattenSimpleInterpolation;
         textAlignRight: import("styled-components").FlattenSimpleInterpolation;
+        textAlignLeft: import("styled-components").FlattenSimpleInterpolation;
         uppercase: import("styled-components").FlattenSimpleInterpolation;
         capitalize: import("styled-components").FlattenSimpleInterpolation;
         lowercase: import("styled-components").FlattenSimpleInterpolation;
@@ -308,8 +311,14 @@ export declare const theme: {
         br: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
         fadeIn: import("styled-components").FlattenSimpleInterpolation;
     };
-    media: {
+    readonly media: {
         desktop: string;
         mobile: string;
     };
 };
+export declare type Theme = typeof theme;
+declare module "styled-components" {
+    interface DefaultTheme extends Theme {
+    }
+}
+export default theme;

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

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import "styled-components";
 import { colors } from "./colorPalette";
 import { debugCss } from "./debugCss";
 import { fontCss } from "./fontCss";
@@ -29,3 +30,4 @@ export var theme = {
     css: appCss,
     media: mediaQueries,
 };
+export default theme;

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

@@ -5,6 +5,7 @@ export declare const textCss: {
     underline: import("styled-components").FlattenSimpleInterpolation;
     textAlignCenter: import("styled-components").FlattenSimpleInterpolation;
     textAlignRight: import("styled-components").FlattenSimpleInterpolation;
+    textAlignLeft: import("styled-components").FlattenSimpleInterpolation;
     uppercase: import("styled-components").FlattenSimpleInterpolation;
     capitalize: import("styled-components").FlattenSimpleInterpolation;
     lowercase: import("styled-components").FlattenSimpleInterpolation;