fuse-importer 0.21.0 → 0.23.2

package/lib/esm/Importer/common/Spreadsheet/inputs/EnumInput.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { SpreadsheetAutocomplete, } from "../common/fields/SpeadsheetAutocomplete";
+export var EnumInput = function (_a) {
+    var options = _a.options, props = __rest(_a, ["options"]);
+    var mapped = useMemo(function () { return options === null || options === void 0 ? void 0 : options.map(function (o) { return ({ label: o, value: o }); }); }, [options]);
+    return _jsx(SpreadsheetAutocomplete, __assign({}, props, { options: mapped }));
+};

package/lib/esm/Importer/common/Spreadsheet/inputs/FloatInput.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SpreadsheetTextInputArgs } from "../common/fields/SpreadsheetInput";
+export declare const FloatInput: React.FC<SpreadsheetTextInputArgs>;

package/lib/esm/Importer/common/Spreadsheet/inputs/FloatInput.js

@@ -0,0 +1,16 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpreadsheetInput, } from "../common/fields/SpreadsheetInput";
+export var FloatInput = function (props) {
+    return _jsx(SpreadsheetInput, __assign({}, props, { type: "text" }));
+};

package/lib/esm/Importer/common/Spreadsheet/inputs/IntegerInput.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SpreadsheetTextInputArgs } from "../common/fields/SpreadsheetInput";
+export declare const IntegerInput: React.FC<SpreadsheetTextInputArgs>;

package/lib/esm/Importer/common/Spreadsheet/inputs/IntegerInput.js

@@ -0,0 +1,16 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpreadsheetInput, } from "../common/fields/SpreadsheetInput";
+export var IntegerInput = function (props) {
+    return _jsx(SpreadsheetInput, __assign({}, props, { type: "text", step: "1" }));
+};

package/lib/esm/Importer/common/Spreadsheet/inputs/StringInput.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SpreadsheetTextInputArgs } from "../common/fields/SpreadsheetInput";
+export declare const StringInput: React.FC<SpreadsheetTextInputArgs>;

package/lib/esm/Importer/common/Spreadsheet/inputs/StringInput.js

@@ -0,0 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpreadsheetInput, } from "../common/fields/SpreadsheetInput";
+export var StringInput = function (props) { return (_jsx(SpreadsheetInput, __assign({}, props, { type: "text" }))); };

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const inputTypes: {
+    boolean: import("react").FC<import("../common/fields/SpeadsheetAutocomplete").SpreadsheetAutocompleteProps>;
+    email: import("react").FC<import("../common/fields/SpreadsheetInput").SpreadsheetTextInputArgs>;
+    enum: import("react").FC<import("./EnumInput").EnumInputProps>;
+    float: import("react").FC<import("../common/fields/SpreadsheetInput").SpreadsheetTextInputArgs>;
+    integer: import("react").FC<import("../common/fields/SpreadsheetInput").SpreadsheetTextInputArgs>;
+    string: import("react").FC<import("../common/fields/SpreadsheetInput").SpreadsheetTextInputArgs>;
+    url: import("react").FC<import("../common/fields/SpreadsheetInput").SpreadsheetTextInputArgs>;
+    date: import("react").FC<import("../common/fields/SpreadsheetInput").SpreadsheetTextInputArgs>;
+    datetime: import("react").FC<import("../common/fields/SpreadsheetInput").SpreadsheetTextInputArgs>;
+    time: import("react").FC<import("../common/fields/SpreadsheetInput").SpreadsheetTextInputArgs>;
+};

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

@@ -0,0 +1,20 @@
+var _a;
+import { FieldTypes } from "../../../../types";
+import { BooleanInput } from "./Boolean";
+import { EmailInput } from "./EmailInput";
+import { EnumInput } from "./EnumInput";
+import { FloatInput } from "./FloatInput";
+import { IntegerInput } from "./IntegerInput";
+import { StringInput } from "./StringInput";
+export var inputTypes = (_a = {},
+    _a[FieldTypes.boolean] = BooleanInput,
+    _a[FieldTypes.email] = EmailInput,
+    _a[FieldTypes.enum] = EnumInput,
+    _a[FieldTypes.float] = FloatInput,
+    _a[FieldTypes.integer] = IntegerInput,
+    _a[FieldTypes.string] = StringInput,
+    _a[FieldTypes.url] = StringInput,
+    _a[FieldTypes.date] = StringInput,
+    _a[FieldTypes.datetime] = StringInput,
+    _a[FieldTypes.time] = StringInput,
+    _a);

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

@@ -8,8 +8,8 @@ declare type GetTableHeightArgs = {
     headerHeight: number;
     rowHeight: number;
     maxVisibleRows: number;
-    mininmumTableHeight?: number;
+    minimumTableHeight?: number;
     dataCount: number;
 };
-export declare const getTableHeight: ({ headerHeight, rowHeight, maxVisibleRows, mininmumTableHeight, dataCount, }: GetTableHeightArgs) => number;
+export declare const getTableHeight: ({ headerHeight, rowHeight, maxVisibleRows, minimumTableHeight, dataCount, }: GetTableHeightArgs) => number;
 export {};

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

@@ -8,6 +8,6 @@ export var baseUrls = {
 };
 var MINIMUM_TABLE_HEIGHT = 375;
 export var getTableHeight = function (_a) {
-    var _b = _a.headerHeight, headerHeight = _b === void 0 ? defaultTableHeaderHeightPx : _b, _c = _a.rowHeight, rowHeight = _c === void 0 ? defaultTableRowHeightPx : _c, _d = _a.maxVisibleRows, maxVisibleRows = _d === void 0 ? 7 : _d, _e = _a.mininmumTableHeight, mininmumTableHeight = _e === void 0 ? MINIMUM_TABLE_HEIGHT : _e, dataCount = _a.dataCount;
-    return Math.max(headerHeight + rowHeight * Math.min(dataCount, maxVisibleRows + 0.5), mininmumTableHeight);
+    var _b = _a.headerHeight, headerHeight = _b === void 0 ? defaultTableHeaderHeightPx : _b, _c = _a.rowHeight, rowHeight = _c === void 0 ? defaultTableRowHeightPx : _c, _d = _a.maxVisibleRows, maxVisibleRows = _d === void 0 ? 7 : _d, _e = _a.minimumTableHeight, minimumTableHeight = _e === void 0 ? MINIMUM_TABLE_HEIGHT : _e, dataCount = _a.dataCount;
+    return Math.max(headerHeight + rowHeight * Math.min(dataCount, maxVisibleRows + 0.5), minimumTableHeight);
 };

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

@@ -13,6 +13,7 @@ declare type Props = {
     onValidateBatch?: OnValidateBatch;
     onSubmit?: OnSubmit;
     onClose: any;
+    previewMode?: boolean;
 };
 declare const Importer: ({ templateSlug, apiToken, onSubmit, onValidateRecord, onValidateBatch, formatRecord, options, onClose, }: Props) => JSX.Element;
 export * from "./common/Spreadsheet";

package/lib/esm/Importer/index.js

@@ -23,12 +23,12 @@ import { GlobalStyle } from "./GlobalStyle";
 import { ImporterContextProvider, useImporterContext, } from "./ImporterContextProvider";
 import { ImporterFonts } from "./ImporterFonts";
 import { Matcher } from "./Matcher";
+import { PreviewModeBanner } from "./PreviewModeBanner";
 import Review from "./Review";
 import { SpreadsheetReviewContextProvider } from "./SpreadsheetReviewContextProvider";
 import { Stepper } from "./Stepper";
 import { TrialModeBanner } from "./TrialModeBanner";
 import { Uploader } from "./Uploader";
-import { useCustomImporter } from "./useCustomImporter";
 import { useFullscreenOverlay } from "./useFullscreenOverlay";
 var Content = styled(Div)(function (_a) {
     var _b = _a.theme, colors = _b.colors, c = _b.css;
@@ -64,13 +64,12 @@ var Importer = function (_a) {
 };
 var ImporterWithContext = function (_a) {
     var onSubmit = _a.onSubmit;
-    var _b = useCustomImporter(), theme = _b.theme, logoURL = _b.logoURL;
-    var _c = useImporterContext(), inTrialMode = _c.inTrialMode, currentStepIndex = _c.currentStepIndex, matcherSubstep = _c.matcherSubstep, zIndex = _c.importerOptions.zIndex;
+    var _b = useImporterContext(), inTrialMode = _b.inTrialMode, currentStepIndex = _b.currentStepIndex, matcherSubstep = _b.matcherSubstep, theme = _b.theme, logoURL = _b.logoURL, zIndex = _b.importerOptions.zIndex;
     var layoutRef = useRef(null);
     useEffect(function () {
         layoutRef.current.scrollTo(0, 0);
     }, [currentStepIndex, matcherSubstep]);
-    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), _jsx(SpreadsheetReviewContextProvider, __assign({ onSubmit: onSubmit }, { children: _jsxs(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: [_jsxs(Div, { children: [_jsx(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({ onSubmit: onSubmit }, { children: _jsxs(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: [_jsxs(Div, { children: [_jsx(PreviewModeBanner, {}), _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: steps.map(function (step) { return step.label; }), logoURL: logoURL })] }), _jsx(Content, { children: steps[currentStepIndex].component }), inTrialMode && (_jsx(Content, { children: _jsx(Footer, {}) }))] })) }))] })));
 };
 export * from "./common/Spreadsheet";
 export * from "./common/utils";

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

@@ -0,0 +1,225 @@
+import { theme } from "../styled/theme";
+export declare type ImporterStylePreferences = {
+    id: number;
+    background: string;
+    highlight1: string;
+    highlight2: string;
+    primary_color: string;
+    secondary_color: string;
+    logo_url: string;
+};
+export declare type Theme = typeof theme;
+declare const getCustomTheme: (importerStylePreferences: ImporterStylePreferences) => {
+    theme: {
+        colors: {
+            backgroundInterface: string;
+            interactiveDisabled: string;
+            error: string;
+            warning01: string;
+            highlight01: string;
+            tableHeader: string;
+            outlineInputs: string;
+            text: string;
+            textPrim: string;
+            textSec: string;
+            textTert: string;
+            textLink: string;
+            placeholder: string;
+            disabled1: string;
+            disabled2: string;
+            disabled3: string;
+            background: string;
+            red: string;
+            black: string;
+            gold: string;
+            pink100: string;
+            pink300: string;
+            pink500: string;
+            pink700: string;
+            pink900: string;
+            white: string;
+            white50: string;
+            red50: string;
+            red100: string;
+            red200: string;
+            red300: string;
+            red400: string;
+            red500: string;
+            red600: string;
+            red700: string;
+            red800: string;
+            red900: string;
+            red1000: string;
+            red2000: string;
+            blue50: string;
+            blue100: string;
+            blue400: string;
+            blue500: string;
+            blue900: string;
+            gray5: string;
+            gray10: string;
+            gray50: string;
+            gray100: string;
+            gray200: string;
+            gray300: string;
+            gray390: string;
+            gray400: string;
+            gray500: string;
+            gray600: string;
+            gray700: string;
+            gray800: string;
+            gray900: string;
+            gray1000: string;
+            green50: string;
+            green100: string;
+            green200: string;
+            green300: string;
+            green400: string;
+            green500: string;
+            green600: string;
+            green700: string;
+            green800: string;
+            green900: string;
+            green1000: string;
+            orange50: string;
+            orange100: string;
+            orange200: string;
+            orange300: string;
+            orange400: string;
+            orange500: string;
+            orange600: string;
+            orange700: string;
+            orange800: string;
+            orange900: string;
+            orange1000: string;
+        };
+        textStyles: {
+            h1: import("styled-components").FlattenSimpleInterpolation;
+            h2: import("styled-components").FlattenSimpleInterpolation;
+            h3: import("styled-components").FlattenSimpleInterpolation;
+            h4: import("styled-components").FlattenSimpleInterpolation;
+            h5: import("styled-components").FlattenSimpleInterpolation;
+            h6: import("styled-components").FlattenSimpleInterpolation;
+            subtitle: import("styled-components").FlattenSimpleInterpolation;
+            body1: import("styled-components").FlattenSimpleInterpolation;
+            body2: import("styled-components").FlattenSimpleInterpolation;
+            body3: import("styled-components").FlattenSimpleInterpolation;
+            body4: import("styled-components").FlattenSimpleInterpolation;
+            label1: import("styled-components").FlattenSimpleInterpolation;
+            label2: import("styled-components").FlattenSimpleInterpolation;
+            label3: import("styled-components").FlattenSimpleInterpolation;
+            helperText: import("styled-components").FlattenSimpleInterpolation;
+            buttonText: import("styled-components").FlattenSimpleInterpolation;
+            buttonTextSmall: import("styled-components").FlattenSimpleInterpolation;
+            link: import("styled-components").FlattenSimpleInterpolation;
+        };
+        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>>;
+            pr: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            p: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            mt: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            mb: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            ml: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            mr: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            m: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            top: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            bottom: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            left: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            right: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            clickable: import("styled-components").FlattenSimpleInterpolation;
+            disabledWhen: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            selectNone: import("styled-components").FlattenSimpleInterpolation;
+            yscroll: import("styled-components").FlattenSimpleInterpolation;
+            overflowHidden: import("styled-components").FlattenSimpleInterpolation;
+            rotate180: import("styled-components").FlattenSimpleInterpolation;
+            forMobile: import("styled-components").FlattenSimpleInterpolation;
+            forDesktop: import("styled-components").FlattenSimpleInterpolation;
+            mcontainer: import("styled-components").FlattenSimpleInterpolation;
+            c: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            bg: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            css: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            scrollbarDark: import("styled-components").FlattenSimpleInterpolation;
+            border: import("styled-components").FlattenSimpleInterpolation;
+            outline: import("styled-components").FlattenSimpleInterpolation;
+            borderwhite: import("styled-components").FlattenSimpleInterpolation;
+            borderred: import("styled-components").FlattenSimpleInterpolation;
+            bgred: import("styled-components").FlattenSimpleInterpolation;
+            bgblue: import("styled-components").FlattenSimpleInterpolation;
+            opacity5: import("styled-components").FlattenSimpleInterpolation;
+            semiBold: import("styled-components").FlattenSimpleInterpolation;
+            bold: import("styled-components").FlattenSimpleInterpolation;
+            extraBold: import("styled-components").FlattenSimpleInterpolation;
+            fontweight_800: import("styled-components").FlattenSimpleInterpolation;
+            italic: import("styled-components").FlattenSimpleInterpolation;
+            DM4: import("styled-components").FlattenSimpleInterpolation;
+            fs: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            lh: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            ls: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            h1: import("styled-components").FlattenSimpleInterpolation;
+            h2: import("styled-components").FlattenSimpleInterpolation;
+            h3: import("styled-components").FlattenSimpleInterpolation;
+            h4: import("styled-components").FlattenSimpleInterpolation;
+            h5: import("styled-components").FlattenSimpleInterpolation;
+            h6: import("styled-components").FlattenSimpleInterpolation;
+            subtitle: import("styled-components").FlattenSimpleInterpolation;
+            body1: import("styled-components").FlattenSimpleInterpolation;
+            body2: import("styled-components").FlattenSimpleInterpolation;
+            body3: import("styled-components").FlattenSimpleInterpolation;
+            body4: import("styled-components").FlattenSimpleInterpolation;
+            label1: import("styled-components").FlattenSimpleInterpolation;
+            label2: import("styled-components").FlattenSimpleInterpolation;
+            label3: import("styled-components").FlattenSimpleInterpolation;
+            helperText: import("styled-components").FlattenSimpleInterpolation;
+            buttonText: import("styled-components").FlattenSimpleInterpolation;
+            buttonTextSmall: import("styled-components").FlattenSimpleInterpolation;
+            link: import("styled-components").FlattenSimpleInterpolation;
+            truncateText: import("styled-components").FlattenSimpleInterpolation;
+            dInline: import("styled-components").FlattenSimpleInterpolation;
+            flexWrap: import("styled-components").FlattenSimpleInterpolation;
+            underline: import("styled-components").FlattenSimpleInterpolation;
+            textAlignCenter: import("styled-components").FlattenSimpleInterpolation;
+            textAlignRight: import("styled-components").FlattenSimpleInterpolation;
+            uppercase: import("styled-components").FlattenSimpleInterpolation;
+            capitalize: import("styled-components").FlattenSimpleInterpolation;
+            lowercase: import("styled-components").FlattenSimpleInterpolation;
+            dflex: import("styled-components").FlattenSimpleInterpolation;
+            centered: import("styled-components").FlattenSimpleInterpolation;
+            flexColumn: import("styled-components").FlattenSimpleInterpolation;
+            flexColumnCentered: import("styled-components").FlattenSimpleInterpolation;
+            flexRowReverse: import("styled-components").FlattenSimpleInterpolation;
+            spaceBetween: import("styled-components").FlattenSimpleInterpolation;
+            spaceBetweenAligned: import("styled-components").FlattenSimpleInterpolation;
+            spaceAround: import("styled-components").FlattenSimpleInterpolation;
+            justifyEnd: import("styled-components").FlattenSimpleInterpolation;
+            justifyCenter: import("styled-components").FlattenSimpleInterpolation;
+            alignEnd: import("styled-components").FlattenSimpleInterpolation;
+            alignStart: import("styled-components").FlattenSimpleInterpolation;
+            alignCenter: import("styled-components").FlattenSimpleInterpolation;
+            grow: import("styled-components").FlattenSimpleInterpolation;
+            pAbsolute: import("styled-components").FlattenSimpleInterpolation;
+            pRelative: import("styled-components").FlattenSimpleInterpolation;
+            pSticky: import("styled-components").FlattenSimpleInterpolation;
+            floatLeft: import("styled-components").FlattenSimpleInterpolation;
+            w50: import("styled-components").FlattenSimpleInterpolation;
+            w100: import("styled-components").FlattenSimpleInterpolation;
+            h100: import("styled-components").FlattenSimpleInterpolation;
+            w: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            h: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            dim: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            maxw: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            maxh: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            minw: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            minh: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            br: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            fadeIn: import("styled-components").FlattenSimpleInterpolation;
+        };
+        media: {
+            desktop: string;
+            mobile: string;
+        };
+    };
+    logoURL: string;
+};
+export { theme, getCustomTheme };

package/lib/esm/Importer/theme.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { theme } from "../styled/theme";
+var getCustomTheme = function (importerStylePreferences) {
+    var primary_color = importerStylePreferences.primary_color, secondary_color = importerStylePreferences.secondary_color, highlight1 = importerStylePreferences.highlight1, highlight2 = importerStylePreferences.highlight2, background = importerStylePreferences.background;
+    var customTheme = __assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { pink500: primary_color, black: secondary_color, blue500: highlight1, blue100: highlight2, backgroundInterface: background }) });
+    return { theme: customTheme, logoURL: importerStylePreferences.logo_url };
+};
+export { theme, getCustomTheme };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DivCSSProps } from "../styled/utils";
+import { CSSProps } from "../styled/utils";
 declare const types: readonly ["primary", "secondary", "tertiary"];
 export declare type ButtonTypes = typeof types[number];
 export declare type BtnProps = {
@@ -8,13 +8,23 @@ export declare type BtnProps = {
     children: any;
     isDisabled?: boolean;
     isSmall?: boolean;
-} & DivCSSProps;
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../styled/utils").CSSProps & {
+    isButtonElement?: boolean;
+} & CSSProps;
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CSSProps & {
     onClick?: () => void;
     variant?: ButtonTypes;
     children: any;
     isDisabled?: boolean;
     isSmall?: boolean;
-} & import("../styled/utils").DivProps, never>;
-export declare const Button: ({ onClick, isDisabled, variant, isSmall, children, ...props }: BtnProps) => JSX.Element;
+    isButtonElement?: boolean;
+}, never>;
+export declare const ButtonElementWrapper: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, CSSProps & {
+    onClick?: () => void;
+    variant?: ButtonTypes;
+    children: any;
+    isDisabled?: boolean;
+    isSmall?: boolean;
+    isButtonElement?: boolean;
+}, never>;
+export declare const Button: ({ onClick, isDisabled, variant, isSmall, children, isButtonElement, ...props }: BtnProps) => JSX.Element;
 export {};

package/lib/esm/common/buttons.js

@@ -24,9 +24,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-import { Div } from "../styled/utils";
+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) {
@@ -39,20 +39,22 @@ var styles = {
         return props.isDisabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), function (props) { return props.theme.colors.gray300; });
     }),
 };
-export var ButtonWrapper = styled(Div)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 48px;\n  ", "\n\n  border: solid 1px black;\n  border-radius: 24px;\n\n  font-family: DM Sans;\n\n  :focus {\n    outline: none;\n  }\n  :hover {\n    cursor: pointer;\n  }\n\n  ", "\n  ", ";\n\n  ", ";\n"], ["\n  height: 48px;\n  ", "\n\n  border: solid 1px black;\n  border-radius: 24px;\n\n  font-family: DM Sans;\n\n  :focus {\n    outline: none;\n  }\n  :hover {\n    cursor: pointer;\n  }\n\n  ", "\n  ", ";\n\n  ", ";\n"])), function (p) {
-    return p.isSmall && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      height: 36px;\n    "], ["\n      height: 36px;\n    "])));
+var commonButtonStyle = css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 48px;\n  ", "\n\n  border: solid 1px black;\n  border-radius: 24px;\n\n  font-family: DM Sans;\n\n  :focus {\n    outline: none;\n  }\n  :hover {\n    cursor: pointer;\n  }\n\n  ", "\n  ", ";\n\n  ", ";\n"], ["\n  height: 48px;\n  ", "\n\n  border: solid 1px black;\n  border-radius: 24px;\n\n  font-family: DM Sans;\n\n  :focus {\n    outline: none;\n  }\n  :hover {\n    cursor: pointer;\n  }\n\n  ", "\n  ", ";\n\n  ", ";\n"])), function (props) {
+    return props.isSmall && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      height: 36px;\n    "], ["\n      height: 36px;\n    "])));
 }, function (props) {
     return props.isDisabled && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 }, function (props) {
     var c = props.theme.css;
     return [c.centered, c.buttonText];
 }, function (props) { return styles[props.variant || "primary"]; });
+export var ButtonWrapper = styled(Div)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), commonButtonStyle);
+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, props = __rest(_a, ["onClick", "isDisabled", "variant", "isSmall", "children"]);
-    return (_jsx(ButtonWrapper, __assign({ w100: true, isSmall: isSmall, onKeyDown: function (_a) {
-            var code = _a.code;
-            if (code === "Space" || (code === "Enter" && onClick))
-                onClick();
-        }, tabIndex: 0 }, __assign({ variant: variant, isDisabled: isDisabled, onClick: onClick }, props), { children: _jsx(_Fragment, { children: children }) })));
+    var _b = _a.onClick, onClick = _b === void 0 ? null : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.variant, variant = _d === void 0 ? "primary" : _d, _e = _a.isSmall, isSmall = _e === void 0 ? false : _e, children = _a.children, _f = _a.isButtonElement, isButtonElement = _f === void 0 ? false : _f, props = __rest(_a, ["onClick", "isDisabled", "variant", "isSmall", "children", "isButtonElement"]);
+    return (_jsx(_Fragment, { children: isButtonElement ? (_jsx(ButtonElementWrapper, __assign({ w100: true, isSmall: isSmall, isDisabled: isDisabled, variant: variant, type: "submit" }, props, { children: children }))) : (_jsx(ButtonWrapper, __assign({ w100: true, isSmall: isSmall, onKeyDown: function (_a) {
+                var code = _a.code;
+                if (code === "Space" || (code === "Enter" && onClick))
+                    onClick();
+            }, tabIndex: 0 }, __assign({ variant: variant, isDisabled: isDisabled, onClick: onClick }, props), { children: _jsx(_Fragment, { children: children }) }))) }));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/lib/esm/common/index.js

@@ -18,7 +18,7 @@ import styled, { css } from "styled-components";
 import { Div, themeProps } from "../styled/utils";
 import { colors } from "../styled/theme/colorPalette";
 export var fuseImporterId = "fuse-importer-root";
-export var MenuItem = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  background: ", ";\n  color: ", ";\n  ", "\n  ", ";\n  ", "\n  :hover {\n    background: ", ";\n    cursor: pointer;\n  }\n"], ["\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  background: ", ";\n  color: ", ";\n  ", "\n  ", ";\n  ", "\n  :hover {\n    background: ", ";\n    cursor: pointer;\n  }\n"])), function (props) { return props.theme.colors.white; }, function (props) { return props.theme.colors.text; }, function (props) { return props.theme.css.body1; }, function (p) { return p.theme.css.selectNone; }, function (p) {
+export var MenuItem = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  background: ", ";\n  color: ", ";\n  ", "\n  ", ";\n  ", "\n  :hover {\n    background: ", ";\n    cursor: pointer;\n  }\n"], ["\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  background: ", ";\n  color: ", ";\n  ", "\n  ", ";\n  ", "\n  :hover {\n    background: ", ";\n    cursor: pointer;\n  }\n"])), function (props) { return props.theme.colors.white; }, function (props) { return props.color || props.theme.colors.text; }, function (props) { return props.theme.css.body1; }, function (p) { return p.theme.css.selectNone; }, function (p) {
     return p.isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.blue500; });
 }, function (props) { return props.theme.colors.blue100; });
 export var FormInputLabel = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  ", "\n"], ["\n  ", ";\n  color: ", ";\n  ", "\n"])), function (props) { return props.theme.css.body4; }, function (props) { return props.theme.colors.text; }, function (props) {

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { Placement } from "@popperjs/core";
 import { DivCSSProps } from "../../styled/utils";
-declare type Option = {
+export declare type Option = {
     label: any;
     value: any;
 };
-declare type Props = {
+export declare type Props = {
     label?: any;
     placeholder?: string;
     value?: any;

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

@@ -42,7 +42,14 @@ var TextInput = function (_a) {
     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 }, { children: label }))), _jsxs(Div, __assign({ pRelative: true }, { children: [_jsx(HTMLInput, __assign({}, { placeholder: placeholder, isDisabled: isDisabled, onFocus: onFocus, hasError: hasError, autoFocus: autoFocus }, { type: isPasswordVisible ? "text" : type, value: _value || "", onChange: function (_a) {
+    return (_jsxs(Div, __assign({ w100: true }, props, { children: [label && (_jsx(FormInputLabel, __assign({ isDisabled: isDisabled, mb: 8 }, { children: label }))), _jsxs(Div, __assign({ pRelative: true }, { children: [_jsx(HTMLInput, __assign({}, {
+                        placeholder: placeholder,
+                        isDisabled: isDisabled,
+                        onFocus: onFocus,
+                        hasError: hasError,
+                        autoFocus: autoFocus,
+                        disabled: isDisabled,
+                    }, { type: isPasswordVisible ? "text" : type, value: _value || "", onChange: function (_a) {
                             var value = _a.target.value;
                             return set_Value(value);
                         }, onBlur: function () {