fuse-importer 0.17.0 → 0.22.0

package/lib/esm/Importer/index.js

@@ -23,53 +23,53 @@ 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;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n  "], ["\n    background-color: ", ";\n  "])), colors.backgroundInterface);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    padding-bottom: 70px;\n  "], ["\n    background-color: ", ";\n    padding-bottom: 70px;\n  "])), colors.backgroundInterface);
 });
 export var Layout = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  height: 100vh;\n  width: 100vw;\n  overflow-y: scroll;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: ", ";\n  ", ";\n"], ["\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  height: 100vh;\n  width: 100vw;\n  overflow-y: scroll;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: ", ";\n  ", ";\n"])), function (p) { return p.zIndex; }, function (p) { return p.theme.css.scrollbarDark; });
 var steps = [
     {
         label: "Upload",
-        component: _jsx(Uploader, {}, void 0),
+        component: _jsx(Uploader, {}),
     },
     {
         label: "Match",
-        component: _jsx(Matcher, {}, void 0),
+        component: _jsx(Matcher, {}),
     },
     {
         label: "Review",
-        component: _jsx(Review, {}, void 0),
+        component: _jsx(Review, {}),
     },
 ];
 var Importer = function (_a) {
-    var templateSlug = _a.templateSlug, apiToken = _a.apiToken, onSubmit = _a.onSubmit, onValidateRecord = _a.onValidateRecord, onValidateBatch = _a.onValidateBatch, options = _a.options, onClose = _a.onClose;
+    var templateSlug = _a.templateSlug, apiToken = _a.apiToken, onSubmit = _a.onSubmit, onValidateRecord = _a.onValidateRecord, onValidateBatch = _a.onValidateBatch, formatRecord = _a.formatRecord, options = _a.options, onClose = _a.onClose;
     useFullscreenOverlay();
     return (_jsx(ImporterContextProvider, __assign({}, {
         options: options,
         templateSlug: templateSlug,
         apiToken: apiToken,
+        formatRecord: formatRecord,
         onValidateRecord: onValidateRecord,
         onValidateBatch: onValidateBatch,
         onClose: onClose,
-    }, { children: _jsx(ImporterWithContext, __assign({}, { onSubmit: onSubmit }), void 0) }), void 0));
+    }, { children: _jsx(ImporterWithContext, __assign({}, { onSubmit: onSubmit })) })));
 };
 var ImporterWithContext = function (_a) {
     var onSubmit = _a.onSubmit;
-    var _b = useCustomImporter(), theme = _b.theme, logoURL = _b.logoURL;
-    var _c = useImporterContext(), 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, {}, void 0), _jsx(GlobalStyle, {}, void 0), _jsx(ImporterFonts, {}, void 0), _jsx(SpreadsheetReviewContextProvider, __assign({ onSubmit: onSubmit }, { children: _jsxs(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: [_jsxs(Div, { children: [_jsx(TrialModeBanner, {}, void 0), _jsx(Stepper, { stepLabels: steps.map(function (step) { return step.label; }), logoURL: logoURL }, void 0)] }, void 0), _jsx(Content, { children: steps[currentStepIndex].component }, void 0), _jsx(Content, { children: _jsx(Footer, {}, void 0) }, void 0)] }), void 0) }), void 0)] }), void 0));
+    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/Modal.js

@@ -23,6 +23,6 @@ export var ModalWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __
 export var ModalCloseIcon = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 0;\n  display: flex;\n  flex-direction: row-reverse;\n"], ["\n  height: 0;\n  display: flex;\n  flex-direction: row-reverse;\n"])));
 export var Modal = function (_a) {
     var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? null : _c, children = _a.children, _d = _a.withCloseIcon, withCloseIcon = _d === void 0 ? true : _d, _e = _a.withBackdropClose, withBackdropClose = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? "" : _f;
-    return (_jsx(_Fragment, { children: isOpen && (_jsxs(Div, __assign({ className: className }, { children: [_jsx(ModalBackdrop, { onClick: withBackdropClose ? onClose : null }, void 0), _jsx(ModalContainer, { children: _jsxs(ModalWrapper, { children: [withCloseIcon && (_jsx(ModalCloseIcon, { children: _jsx(Div, __assign({ clickable: true, mt: -10, mr: -20, onClick: onClose }, { children: closeIcon }), void 0) }, void 0)), _jsx(Div, { children: children }, void 0)] }, void 0) }, void 0)] }), void 0)) }, void 0));
+    return (_jsx(_Fragment, { children: isOpen && (_jsxs(Div, __assign({ className: className }, { children: [_jsx(ModalBackdrop, { onClick: withBackdropClose ? onClose : null }), _jsx(ModalContainer, { children: _jsxs(ModalWrapper, { children: [withCloseIcon && (_jsx(ModalCloseIcon, { children: _jsx(Div, __assign({ clickable: true, mt: -10, mr: -20, onClick: onClose }, { children: closeIcon })) })), _jsx(Div, { children: children })] }) })] }))) }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/common/Spinner.js

@@ -35,7 +35,7 @@ var Bounce2 = styled(Bounce)(templateObject_4 || (templateObject_4 = __makeTempl
 var SpinnerContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 70px;\n  text-align: center;\n"], ["\n  width: 70px;\n  text-align: center;\n"])));
 var Spinner = function (_a) {
     var _b = _a.color, color = _b === void 0 ? theme.colors.gray300 : _b, props = __rest(_a, ["color"]);
-    return (_jsx(Wrapper, __assign({}, props, { children: _jsxs(SpinnerContainer, { children: [_jsx(Bounce1, { color: color }, void 0), _jsx(Bounce2, { color: color }, void 0), _jsx(Bounce, { color: color }, void 0)] }, void 0) }), void 0));
+    return (_jsx(Wrapper, __assign({}, props, { children: _jsxs(SpinnerContainer, { children: [_jsx(Bounce1, { color: color }), _jsx(Bounce2, { color: color }), _jsx(Bounce, { color: color })] }) })));
 };
 export { Spinner };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -33,10 +33,10 @@ var IconContainer = styled(Div)(templateObject_3 || (templateObject_3 = __makeTe
 });
 export var PaginationIcon = function (_a) {
     var _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, children = _a.children, props = __rest(_a, ["isDisabled", "children"]);
-    return (_jsx(IconContainer, __assign({ ml: 10, isDisabled: isDisabled }, props, { children: children }), void 0));
+    return (_jsx(IconContainer, __assign({ ml: 10, isDisabled: isDisabled }, props, { children: children })));
 };
-export var previousPage = (_jsx("svg", __assign({ width: "8", height: "13", viewBox: "0 0 8 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M7.00623 0.90802L1.26688 6.3505L7.00623 11.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
-export var nextPage = (_jsx("svg", __assign({ width: "8", height: "13", viewBox: "0 0 8 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M1.24243 0.90802L6.98177 6.3505L1.24243 11.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
-export var jumpToFirst = (_jsxs("svg", __assign({ width: "24", height: "19", viewBox: "0 0 24 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M16.4547 3.90802L10.7154 9.3505L16.4547 14.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }, void 0), _jsx("path", { d: "M6.59399 14.069L6.59399 4.68966", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
-export var jumpToLast = (_jsxs("svg", __assign({ width: "25", height: "19", viewBox: "0 0 25 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M8.23022 14.8506L13.9696 9.40811L8.23023 3.96563", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }, void 0), _jsx("path", { d: "M18.0909 4.68964L18.0909 14.0689", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
+export var previousPage = (_jsx("svg", __assign({ width: "8", height: "13", viewBox: "0 0 8 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M7.00623 0.90802L1.26688 6.3505L7.00623 11.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })));
+export var nextPage = (_jsx("svg", __assign({ width: "8", height: "13", viewBox: "0 0 8 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M1.24243 0.90802L6.98177 6.3505L1.24243 11.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })));
+export var jumpToFirst = (_jsxs("svg", __assign({ width: "24", height: "19", viewBox: "0 0 24 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M16.4547 3.90802L10.7154 9.3505L16.4547 14.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.59399 14.069L6.59399 4.68966", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+export var jumpToLast = (_jsxs("svg", __assign({ width: "25", height: "19", viewBox: "0 0 25 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M8.23022 14.8506L13.9696 9.40811L8.23023 3.96563", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M18.0909 4.68964L18.0909 14.0689", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -25,8 +25,8 @@ var Pagination = function () {
     var isFirstPage = currentPage === 1;
     var isLastPage = currentPage === totalPages;
     var cursor = (currentPage - 1) * pageSize;
-    var buttonsUI = (_jsxs(Div, __assign({ mr: 25, dflex: true }, { children: [_jsx(PaginationIcon, __assign({ isDisabled: isFirstPage, onClick: function () { return setCurrentPage(1); } }, { children: jumpToFirst }), void 0), _jsx(PaginationIcon, __assign({ isDisabled: isFirstPage, onClick: function () { return setCurrentPage(Math.max(currentPage - 1, 1)); } }, { children: previousPage }), void 0), _jsxs(Div, __assign({ centered: true, ml: 10 }, { children: [cursor + 1, "-", Math.min(cursor + pageSize, totalCount), " of ", totalCount] }), void 0), _jsx(PaginationIcon, __assign({ isDisabled: isLastPage, onClick: function () { return setCurrentPage(Math.min(currentPage + 1, totalPages)); } }, { children: nextPage }), void 0), _jsx(PaginationIcon, __assign({ isDisabled: isLastPage, onClick: function () { return setCurrentPage(totalPages); } }, { children: jumpToLast }), void 0)] }), void 0));
-    return (_jsx(Container, __assign({ w100: true }, { children: _jsx(Div, __assign({ h: 38, bg: colors.tableHeader, justifyEnd: true }, { children: _jsx(Div, __assign({ dflex: true, alignCenter: true, body2: true, c: colors.text }, { children: buttonsUI }), void 0) }), void 0) }), void 0));
+    var buttonsUI = (_jsxs(Div, __assign({ mr: 25, dflex: true }, { children: [_jsx(PaginationIcon, __assign({ isDisabled: isFirstPage, onClick: function () { return setCurrentPage(1); } }, { children: jumpToFirst })), _jsx(PaginationIcon, __assign({ isDisabled: isFirstPage, onClick: function () { return setCurrentPage(Math.max(currentPage - 1, 1)); } }, { children: previousPage })), _jsxs(Div, __assign({ centered: true, ml: 10 }, { children: [cursor + 1, "-", Math.min(cursor + pageSize, totalCount), " of ", totalCount] })), _jsx(PaginationIcon, __assign({ isDisabled: isLastPage, onClick: function () { return setCurrentPage(Math.min(currentPage + 1, totalPages)); } }, { children: nextPage })), _jsx(PaginationIcon, __assign({ isDisabled: isLastPage, onClick: function () { return setCurrentPage(totalPages); } }, { children: jumpToLast }))] })));
+    return (_jsx(Container, __assign({ w100: true }, { children: _jsx(Div, __assign({ h: 38, bg: colors.tableHeader, justifyEnd: true }, { children: _jsx(Div, __assign({ dflex: true, alignCenter: true, body2: true, c: colors.text }, { children: buttonsUI })) })) })));
 };
 export { Pagination };
 var templateObject_1;

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

@@ -121,6 +121,6 @@ export var TableDataProvider = function (_a) {
         setSortBy: setSortBy,
         setCurrentPage: setCurrentPage,
     };
-    return (_jsx(TableContext.Provider, __assign({ value: value }, { children: data ? children : isLoading && _jsx(Spinner, { mt: 200 }, void 0) }), void 0));
+    return (_jsx(TableContext.Provider, __assign({ value: value }, { children: data ? children : isLoading && _jsx(Spinner, { mt: 200 }) })));
 };
 export var useTableContext = function () { return useContext(TableContext); };

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

@@ -64,7 +64,7 @@ export var TableHeaders = function (_a) {
                         });
                     }
                 };
-                return (_jsxs(TableViewHeader, __assign({ isLast: index === columns.length - 1, w: columnWidthPercentage(column, columns), onClick: onHeaderClick, h: height }, props, { children: [_jsx(_Fragment, { children: Header ? _jsx(Header, {}, void 0) : header }, void 0), (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === column.dataAccessor && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDownIcon }), void 0))] }), index));
-            }) }), void 0) }), void 0));
+                return (_jsxs(TableViewHeader, __assign({ isLast: index === columns.length - 1, w: columnWidthPercentage(column, columns), onClick: onHeaderClick, h: height }, props, { children: [_jsx(_Fragment, { children: Header ? _jsx(Header, {}) : header }), (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === column.dataAccessor && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDownIcon })))] }), index));
+            }) })) })));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -31,7 +31,7 @@ import { Div } from "../../../styled/utils";
 import { columnWidthPercentage, TableViewCellContainer } from "./common";
 export var Cell = function (props) {
     var row = props.row, children = props.children, cellProps = __rest(props, ["row", "children"]);
-    return useMemo(function () { return (_jsx(TableViewCellContainer, __assign({}, cellProps, { children: children }), void 0)); }, 
+    return useMemo(function () { return (_jsx(TableViewCellContainer, __assign({}, cellProps, { children: children }))); }, 
     // using [row] with usememo optimizes table renders but disables react hotreloading
     // [row, children] enables hotreloading, missing tests for optimizations
     // should we use [row] instead of [row, children] for table optimization ?
@@ -51,7 +51,7 @@ export var TableRow = function (_a) {
                         ? function () {
                             onRowClick(row);
                         }
-                        : null, w: columnWidthPercentage(column, columns) }, { children: _jsx(_Fragment, { children: Content ? (_jsx(Content, __assign({}, row, { rowIndex: indexI }), void 0)) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }), void 0)) }, void 0) }), indexJ));
-            }) }), void 0) }, void 0));
+                        : null, w: columnWidthPercentage(column, columns) }, { children: _jsx(_Fragment, { children: Content ? (_jsx(Content, __assign({}, row, { rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }) }), indexJ));
+            }) })) }));
 };
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -57,7 +57,7 @@ var TableView = function (_a) {
             columns: columns,
             sortBy: sortBy,
             setSortBy: setSortBy,
-        }), void 0)) }, void 0));
+        }))) }));
     var onScroll = function (_a) {
         var scrollTop = _a.scrollTop, _scrollLeft = _a.scrollLeft;
         setScrollLeft(_scrollLeft);
@@ -79,9 +79,9 @@ var TableView = function (_a) {
                 columns: columns,
                 onRowClick: onRowClick,
                 highlightFirstRow: highlightFirstRow,
-            }, { h: rowHeight, row: data[rowIndex], indexI: rowIndex, isLast: rowIndex === data.length - 1, pRelative: true }), void 0) }), key));
+            }, { h: rowHeight, row: data[rowIndex], indexI: rowIndex, isLast: rowIndex === data.length - 1, pRelative: true })) }), key));
     };
-    var loadingUI = (_jsx(_Fragment, { children: isLoading && (_jsx(SpinnerWrapper, __assign({ pRelative: true }, { children: _jsx(Div, __assign({ w100: true, h100: true, centered: true, h: 400, pAbsolute: true }, { children: _jsx(Spinner, {}, void 0) }), void 0) }), void 0)) }, void 0));
+    var loadingUI = (_jsx(_Fragment, { children: isLoading && (_jsx(SpinnerWrapper, __assign({ pRelative: true }, { children: _jsx(Div, __assign({ w100: true, h100: true, centered: true, h: 400, pAbsolute: true }, { children: _jsx(Spinner, {}) })) }))) }));
     var tableHeight = pageSize ? pageSize * rowHeight + tableHeadersHeight : h;
     return (_jsxs(TableViewWrapper, __assign({}, { isLoading: isLoading }, { h: tableHeight }, props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
                     var width = _a.width, height = _a.height;
@@ -96,7 +96,7 @@ var TableView = function (_a) {
                         gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden", overflowY: "auto" });
                     else if (_rowWidth > 1)
                         gridStyles = __assign(__assign({}, gridStyles), { overflowX: "scroll" });
-                    return (_jsx(Grid, { scrollLeft: scrollLeft, style: gridStyles, width: width, columnCount: 1, onSectionRendered: _onSectionRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, cellRenderer: rowRenderer, rowCount: data.length }, void 0));
-                } }, void 0)] }), void 0));
+                    return (_jsx(Grid, { scrollLeft: scrollLeft, style: gridStyles, width: width, columnCount: 1, onSectionRendered: _onSectionRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, cellRenderer: rowRenderer, rowCount: data.length }));
+                } })] })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -10,5 +10,5 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-export var chevronDown = (_jsx("svg", __assign({ width: "9", height: "5", viewBox: "0 0 9 5", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M4.31848 4.93945L0.421366 0.439453L8.2156 0.439454L4.31848 4.93945Z", fill: "#102622" }, void 0) }), void 0));
-export var chevronRight = (_jsx("svg", __assign({ width: "6", height: "8", viewBox: "0 0 6 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M5.31848 4.06738L0.818482 7.9645L0.818482 0.170269L5.31848 4.06738Z", fill: "#102622" }, void 0) }), void 0));
+export var chevronDown = (_jsx("svg", __assign({ width: "9", height: "5", viewBox: "0 0 9 5", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M4.31848 4.93945L0.421366 0.439453L8.2156 0.439454L4.31848 4.93945Z", fill: "#102622" }) })));
+export var chevronRight = (_jsx("svg", __assign({ width: "6", height: "8", viewBox: "0 0 6 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M5.31848 4.06738L0.818482 7.9645L0.818482 0.170269L5.31848 4.06738Z", fill: "#102622" }) })));

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

@@ -37,8 +37,8 @@ var Table = function (_a) {
     var columns = _a.columns, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.blankState, blankState = _c === void 0 ? null : _c, props = __rest(_a, ["columns", "onRowClick", "blankState"]);
     var _d = useTableContext(), data = _d.data, isLoading = _d.isLoading, sortBy = _d.sortBy, setSortBy = _d.setSortBy, totalPages = _d.totalPages;
     var withPagination = data.length > 0 && totalPages > 1;
-    var paginationUI = (_jsx(_Fragment, { children: withPagination && (_jsx(Div, __assign({ dflex: true, justifyCenter: true, pb: 50 }, { children: _jsx(Pagination, {}, void 0) }), void 0)) }, void 0));
-    return (_jsxs(Div, __assign({}, props, { children: [data.length ? (_jsx(TableView, __assign({ pageSize: data.length, withPagination: withPagination }, { isLoading: isLoading, data: data, columns: columns, sortBy: sortBy, setSortBy: setSortBy, onRowClick: onRowClick }), void 0)) : (blankState), paginationUI] }), void 0));
+    var paginationUI = (_jsx(_Fragment, { children: withPagination && (_jsx(Div, __assign({ dflex: true, justifyCenter: true, pb: 50 }, { children: _jsx(Pagination, {}) }))) }));
+    return (_jsxs(Div, __assign({}, props, { children: [data.length ? (_jsx(TableView, __assign({ pageSize: data.length, withPagination: withPagination }, { isLoading: isLoading, data: data, columns: columns, sortBy: sortBy, setSortBy: setSortBy, onRowClick: onRowClick }))) : (blankState), paginationUI] })));
 };
 export { Table };
 export * from "./TableDataProvider";

package/lib/esm/common/Toast.js

@@ -32,6 +32,7 @@ export var addToast = function (msg, type, toastOptions) {
 };
 var toastContainerCss = {
     padding: 0,
+    marginRight: 72,
     borderRadius: toastBorderRadius,
     boxShadow: "none",
     maxWidth: toastMaxWidth,
@@ -60,9 +61,9 @@ var Toast = function () {
         } }, { 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(Div, __assign({ alignCenter: true }, { children: icon || hotToastIcon }), void 0), _jsx(Div, __assign({ alignCenter: true }, { children: message }), void 0), _jsx(Div, __assign({ p: 5, clickable: true, onClick: function () { return toast.dismiss(t.id); } }, { children: closeIcon }), void 0)] }), void 0));
-            } }), void 0)); } }), void 0));
+                return (_jsxs(ToastWrapper, __assign({ c: color, bg: backgroundColor }, { children: [_jsx(Div, __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" }, void 0), _jsx("path", { d: "M2.5 7.82251L7.82258 2.49993", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
+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;

package/lib/esm/common/TooltipProvider.js

@@ -50,6 +50,6 @@ export var TooltipProvider = function (_a) {
         if (update)
             update();
     }, [isDisplayingTooltip]);
-    return (_jsxs(Div, __assign({ dim: "100%", ref: setReferenceElement, onMouseOver: function () { return setIsDisplayingTooltip(true); }, onMouseOut: function () { return setIsDisplayingTooltip(false); } }, props, { children: [children, isDisplayingTooltip && tooltip && (_jsx(TooltipContent, __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: tooltip }), void 0))] }), void 0));
+    return (_jsxs(Div, __assign({ dim: "100%", ref: setReferenceElement, onMouseOver: function () { return setIsDisplayingTooltip(true); }, onMouseOut: function () { return setIsDisplayingTooltip(false); } }, props, { children: [children, isDisplayingTooltip && tooltip && (_jsx(TooltipContent, __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: tooltip })))] })));
 };
 var templateObject_1;

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 }, void 0) }), void 0));
+    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;