fuse-importer 0.24.0 → 0.24.4

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

@@ -30,6 +30,7 @@ import { Div } from "../../../styled/utils";
 import { chevronDown as chevronDownIcon } from "../icons";
 import { SortDirection } from "../TableDataProvider";
 import { columnWidthPercentage, defaultTableHeaderHeightPx, TableViewCellContainer, } from "./common";
+import { useTranslation } from "react-i18next";
 export var TableViewHeader = styled(TableViewCellContainer)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n  ", "\n"], ["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n  ", "\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.body2; }, function (p) { return p.theme.colors.text; }, function (p) {
     return p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-right: solid 1px transparent !important;\n    "], ["\n      border-right: solid 1px transparent !important;\n    "])));
 });
@@ -40,6 +41,7 @@ export var TableHeadersContainer = styled(Div)(templateObject_5 || (templateObje
 export var TableHeadersContent = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
 export var TableHeaders = function (_a) {
     var _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, columns = _a.columns, sortBy = _a.sortBy, rowHeight = _a.rowHeight, containerRef = _a.containerRef, setSortBy = _a.setSortBy, _c = _a.rowWidth, rowWidth = _c === void 0 ? 1 : _c, _d = _a.height, height = _d === void 0 ? defaultTableHeaderHeightPx : _d, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "rowHeight", "containerRef", "setSortBy", "rowWidth", "height"]);
+    var t = useTranslation().t;
     return (_jsx(TableHeadersContainer, __assign({ ref: containerRef }, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: "".concat(100 * rowWidth, "%") }, { children: columns.map(function (column, index) {
                 var header = column.header, Header = column.Header;
                 var onHeaderClick = function () {
@@ -60,7 +62,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, {}) : 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));
+                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, {}) : t(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.d.ts

@@ -2,12 +2,12 @@ import React from "react";
 import { TableViewProps } from ".";
 import { DivCSSProps } from "../../../styled/utils";
 export declare const Cell: React.MemoExoticComponent<(props: any) => JSX.Element>;
-declare type TableViewRowProps = {
+type TableViewRowProps = {
     isHighlighted: boolean;
     isLast: boolean;
 };
 export declare const TableViewRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewRowProps, never>;
-declare type Props = Pick<TableViewProps, "columns" | "onRowClick" | "highlightFirstRow"> & {
+type Props = Pick<TableViewProps, "columns" | "onRowClick" | "highlightFirstRow"> & {
     row: any;
     indexI: number;
     isLast?: boolean;

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

@@ -4,11 +4,11 @@ import { SortBy } from "../TableDataProvider";
 export * from "./common";
 export * from "./TableHeaders";
 export * from "./TableRow";
-declare type TableViewWrapperProps = {
+type TableViewWrapperProps = {
     isLoading: boolean;
 };
 export declare const TableViewWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewWrapperProps, never>;
-export declare type TableViewColumn = {
+export type TableViewColumn = {
     header?: string;
     Header?: (p: any) => JSX.Element;
     Content?: (p: any) => JSX.Element;
@@ -17,12 +17,12 @@ export declare type TableViewColumn = {
     disableSort?: boolean;
     width?: number;
 };
-declare type TableSection = {
+type TableSection = {
     rowStartIndex?: number;
     rowStopIndex?: number;
     data?: any[];
 };
-export declare type TableViewProps = {
+export type TableViewProps = {
     data: any[];
     columns: TableViewColumn[];
     sortBy?: SortBy;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const chevronDown: JSX.Element;
 export declare const chevronRight: JSX.Element;
 export declare const spreedSheetIcon: JSX.Element;

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { DivCSSProps } from "../../styled/utils";
-declare type Props = {
+type Props = {
     blankState?: JSX.Element | null;
     columns: any[];
     onRowClick?: (row: any) => void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 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;

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

@@ -1,13 +1,14 @@
 import { Placement } from "@popperjs/core";
 import React from "react";
 import { DivCSSProps } from "../styled/utils";
-declare type TooltipContentProps = {
+type TooltipContentProps = {
     isActionable?: boolean;
 };
 export declare const TooltipContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../styled/utils").CSSProps & TooltipContentProps, never>;
-export declare type TooltipProps = {
+export type TooltipProps = {
     tooltip: JSX.Element | string;
     placement?: Placement;
+    flip?: boolean;
     isDisabled?: boolean;
     isOpen?: boolean;
     tooltipMaxWidth?: number;

package/lib/esm/common/TooltipProvider.js

@@ -31,10 +31,10 @@ import styled from "styled-components";
 import { Div } from "../styled/utils";
 export var TooltipContent = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n"], ["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n"])), function (p) { return p.theme.css.body4; }, function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.black; });
 export var TooltipProvider = function (_a) {
-    var tooltip = _a.tooltip, children = _a.children, tooltipMaxWidth = _a.tooltipMaxWidth, tooltipMinWidth = _a.tooltipMinWidth, _b = _a.placement, placement = _b === void 0 ? "top-start" : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isOpen, isOpen = _d === void 0 ? false : _d, _e = _a.offset, offset = _e === void 0 ? [0, 4] : _e, props = __rest(_a, ["tooltip", "children", "tooltipMaxWidth", "tooltipMinWidth", "placement", "isDisabled", "isOpen", "offset"]);
-    var _f = useState(false), isDisplayingTooltip = _f[0], setIsDisplayingTooltip = _f[1];
-    var _g = useState(null), referenceElement = _g[0], setReferenceElement = _g[1];
-    var _h = useState(null), popperElement = _h[0], setPopperElement = _h[1];
+    var tooltip = _a.tooltip, children = _a.children, tooltipMaxWidth = _a.tooltipMaxWidth, tooltipMinWidth = _a.tooltipMinWidth, _b = _a.placement, placement = _b === void 0 ? "top-start" : _b, _c = _a.flip, flip = _c === void 0 ? true : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isOpen, isOpen = _e === void 0 ? false : _e, _f = _a.offset, offset = _f === void 0 ? [0, 4] : _f, props = __rest(_a, ["tooltip", "children", "tooltipMaxWidth", "tooltipMinWidth", "placement", "flip", "isDisabled", "isOpen", "offset"]);
+    var _g = useState(false), isDisplayingTooltip = _g[0], setIsDisplayingTooltip = _g[1];
+    var _h = useState(null), referenceElement = _h[0], setReferenceElement = _h[1];
+    var _j = useState(null), popperElement = _j[0], setPopperElement = _j[1];
     var options = useMemo(function () { return ({
         placement: placement,
         modifiers: [
@@ -44,9 +44,13 @@ export var TooltipProvider = function (_a) {
                     offset: offset,
                 },
             },
+            {
+                name: "flip",
+                enabled: flip,
+            },
         ],
     }); }, [placement, offset]);
-    var _j = usePopper(referenceElement, popperElement, options), styles = _j.styles, attributes = _j.attributes;
+    var _k = usePopper(referenceElement, popperElement, options), styles = _k.styles, attributes = _k.attributes;
     var showTooltip = isOpen || (isDisplayingTooltip && !!tooltip);
     return (_jsxs(Div, __assign({ dim: "100%", ref: setReferenceElement, onMouseOver: function () { return isDisabled || setIsDisplayingTooltip(true); }, onMouseOut: function () { return isDisabled || setIsDisplayingTooltip(false); } }, props, { children: [children, showTooltip && (_jsx(TooltipContent, __assign({ ref: setPopperElement, style: styles.popper, maxw: tooltipMaxWidth, minw: tooltipMinWidth }, attributes.popper, { children: tooltip })))] })));
 };

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { CSSProps } from "../styled/utils";
 declare const types: readonly ["primary", "secondary", "tertiary"];
-export declare type ButtonTypes = typeof types[number];
-export declare type BtnProps = {
+export type ButtonTypes = typeof types[number];
+export type BtnProps = {
     onClick?: () => void;
     backgroundColor?: string;
     variant?: ButtonTypes;
@@ -10,6 +9,12 @@ export declare type BtnProps = {
     isDisabled?: boolean;
     isSmall?: boolean;
     isButtonElement?: boolean;
+    svgNormalFillColorOverride?: string;
+    svgActiveFillColorOverride?: string;
+    svgDisabledFillColorOverride?: string;
+    svgNormalStrokeColorOverride?: string;
+    svgActiveStrokeColorOverride?: string;
+    svgDisabledStrokeColorOverride?: string;
 } & CSSProps;
 export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CSSProps & {
     onClick?: () => void;
@@ -19,6 +24,12 @@ export declare const ButtonWrapper: import("styled-components").StyledComponent<
     isDisabled?: boolean;
     isSmall?: boolean;
     isButtonElement?: boolean;
+    svgNormalFillColorOverride?: string;
+    svgActiveFillColorOverride?: string;
+    svgDisabledFillColorOverride?: string;
+    svgNormalStrokeColorOverride?: string;
+    svgActiveStrokeColorOverride?: string;
+    svgDisabledStrokeColorOverride?: string;
 }, never>;
 export declare const ButtonElementWrapper: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, CSSProps & {
     onClick?: () => void;
@@ -28,6 +39,12 @@ export declare const ButtonElementWrapper: import("styled-components").StyledCom
     isDisabled?: boolean;
     isSmall?: boolean;
     isButtonElement?: boolean;
+    svgNormalFillColorOverride?: string;
+    svgActiveFillColorOverride?: string;
+    svgDisabledFillColorOverride?: string;
+    svgNormalStrokeColorOverride?: string;
+    svgActiveStrokeColorOverride?: string;
+    svgDisabledStrokeColorOverride?: string;
 }, never>;
 export declare const Button: ({ onClick, isDisabled, variant, isSmall, children, isButtonElement, ...props }: BtnProps) => JSX.Element;
 export {};

package/lib/esm/common/buttons.js

@@ -27,28 +27,45 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { get } from "lodash";
 import styled, { css } from "styled-components";
-import { theme } from "../styled/index";
 import { Div, HTMLButton } from "../styled/utils";
 var types = ["primary", "secondary", "tertiary"];
 var getBgColor = function (props) {
-    return get(props, "backgroundColor", get(theme, "colors.pink500"));
+    return get(props, "backgroundColor", get(props.theme, "colors.pink500"));
 };
 var getBorderColor = function (props) {
-    return get(props, "backgroundColor", get(theme, "colors.pink700"));
+    return get(props, "backgroundColor", get(props.theme, "colors.pink700"));
+};
+var getSvgFillColorForNormalState = function (props) {
+    return get(props, "svgNormalFillColorOverride", get(props.theme, "colors.black"));
+};
+var getSvgFillColorForActiveState = function (props) {
+    return get(props, "svgActiveFillColorOverride", get(props.theme, "colors.white"));
+};
+var getSvgFillColorForDisabledState = function (props) {
+    return get(props, "svgDisabledFillColorOverride", get(props.theme, "colors.gray390"));
+};
+var getSvgStrokeColorForNormalState = function (props) {
+    return get(props, "svgNormalStrokeColorOverride", get(props.theme, "colors.black"));
+};
+var getSvgStrokeColorForActiveState = function (props) {
+    return get(props, "svgActiveStrokeColorOverride", get(props.theme, "colors.white"));
+};
+var getSvgStrokeColorForDisabledState = function (props) {
+    return get(props, "svgDisabledStrokeColorOverride", get(props.theme, "colors.black"));
 };
 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; }, getBgColor, getBgColor, getBgColor, getBgColor, getBgColor, getBorderColor, getBgColor, getBgColor, function (props) {
         return props.isDisabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", " !important;\n        opacity: 0.4;\n        box-shadow: none !important;\n        border: none !important;\n        cursor: not-allowed !important;\n      "], ["\n        background: ", " !important;\n        opacity: 0.4;\n        box-shadow: none !important;\n        border: none !important;\n        cursor: not-allowed !important;\n      "])), getBgColor);
     }),
-    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; });
+    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        stroke: ", ";\n      }\n    }\n    :active {\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n      & > svg {\n        & > path {\n          fill: ", ";\n          stroke: ", ";\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        stroke: ", ";\n      }\n    }\n    :active {\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n      & > svg {\n        & > path {\n          fill: ", ";\n          stroke: ", ";\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; }, getSvgFillColorForNormalState, getSvgStrokeColorForNormalState, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }, getSvgFillColorForActiveState, getSvgStrokeColorForActiveState, function (props) {
+        return props.isDisabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        border: 2px solid ", ";\n        color: ", ";\n        & > svg {\n          & > path {\n            fill: ", ";\n            stroke: ", ";\n          }\n        }\n      "], ["\n        border: 2px solid ", ";\n        color: ", ";\n        & > svg {\n          & > path {\n            fill: ", ";\n            stroke: ", ";\n          }\n        }\n      "])), function (props) { return props.theme.colors.gray390; }, function (props) { return props.theme.colors.gray390; }, getSvgFillColorForDisabledState, getSvgStrokeColorForDisabledState);
     }),
     tertiary: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background: transparent;\n    border: solid 1px transparent;\n    color: ", ";\n    :hover {\n      background: ", ";\n    }\n    :active {\n      background: ", ";\n      color: ", ";\n    }\n    ", "\n  "], ["\n    background: transparent;\n    border: solid 1px transparent;\n    color: ", ";\n    :hover {\n      background: ", ";\n    }\n    :active {\n      background: ", ";\n      color: ", ";\n    }\n    ", "\n  "])), function (props) { return props.theme.colors.text; }, function (props) { return props.theme.colors.white50; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }, function (props) {
         return props.isDisabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), function (props) { return props.theme.colors.gray300; });
     }),
 };
-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    "])));
+var commonButtonStyle = css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  padding: 12px 24px;\n  height: 48px;\n  width: fit-content;\n\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  padding: 12px 24px;\n  height: 48px;\n  width: fit-content;\n\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      padding: 6px 20px;\n    "], ["\n      height: 36px;\n      padding: 6px 20px;\n    "])));
 }, function (props) {
     return props.isDisabled && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 }, function (props) {
@@ -59,7 +76,7 @@ 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({ role: "button", w100: true, isSmall: isSmall, onClick: isDisabled ? null : onClick, onKeyDown: function (_a) {
+    return (_jsx(_Fragment, { children: isButtonElement ? (_jsx(ButtonElementWrapper, __assign({ isSmall: isSmall, isDisabled: isDisabled, disabled: isDisabled, variant: variant, type: "submit" }, props, { children: children }))) : (_jsx(ButtonWrapper, __assign({ role: "button", w: "fit-content", p: 12, isSmall: isSmall, onClick: isDisabled ? null : onClick, onKeyDown: function (_a) {
                 var code = _a.code;
                 if ((code === "Space" || (code === "Enter" && onClick)) &&
                     !isDisabled) {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const closeIcon: JSX.Element;
 export declare const closeIconCondensed: JSX.Element;
 export declare const checkIcon: JSX.Element;

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

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import { CSSProps } from "../styled/utils";
 export declare const fuseImporterId = "fuse-importer-root";
-declare type MenuItemProps = {
+type MenuItemProps = {
     isSelected?: boolean;
 };
 export declare const MenuItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CSSProps & MenuItemProps, never>;
-declare type LabelProps = {
+type LabelProps = {
     isDisabled?: boolean;
 };
 export declare const FormInputLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, CSSProps & LabelProps, never>;

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

@@ -1,12 +1,12 @@
-/// <reference types="react" />
 import { Placement } from "@popperjs/core";
 import { DivCSSProps } from "../../styled/utils";
-export declare type Option = {
+export type Option = {
     label: any;
     value: any;
 };
-export declare type Props = {
+export type Props = {
     label?: any;
+    labelTooltip?: string;
     placeholder?: string;
     value?: any;
     onChange: (v: string | null) => void;
@@ -17,5 +17,5 @@ export declare type Props = {
     placement?: Placement;
     icon?: JSX.Element;
 } & DivCSSProps;
-declare const Autocomplete: ({ label, isDisabled, isInputDisabled, placeholder, value, icon, onChange, placement, options, onToggle, id, ...props }: Props) => JSX.Element;
+declare const Autocomplete: ({ label, isDisabled, isInputDisabled, placeholder, value, icon, onChange, placement, options, onToggle, id, labelTooltip, ...props }: Props) => JSX.Element;
 export { Autocomplete };

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

@@ -25,12 +25,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import styled, { css } from "styled-components";
 import { MenuItem } from "..";
 import { Div } from "../../styled/utils";
 import { SelectMenu } from "./SelectMenu";
 import { TextInput as TextInputBase } from "./TextInput";
+import { useTranslation } from "react-i18next";
 var TextInput = styled(TextInputBase)(function (_a) {
     var _b = _a.theme, colors = _b.colors, c = _b.css;
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), function (props) {
@@ -46,12 +47,13 @@ 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 = _a.label, label = _b === void 0 ? null : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _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, id = _a.id, props = __rest(_a, ["label", "isDisabled", "isInputDisabled", "placeholder", "value", "icon", "onChange", "placement", "options", "onToggle", "id"]);
+    var _b = _a.label, label = _b === void 0 ? null : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isInputDisabled, isInputDisabled = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "general:autocomplete.placeholder" : _e, value = _a.value, icon = _a.icon, onChange = _a.onChange, placement = _a.placement, options = _a.options, onToggle = _a.onToggle, id = _a.id, labelTooltip = _a.labelTooltip, props = __rest(_a, ["label", "isDisabled", "isInputDisabled", "placeholder", "value", "icon", "onChange", "placement", "options", "onToggle", "id", "labelTooltip"]);
     var _f = useState(false), updatedText = _f[0], setUpdatedText = _f[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 _g = useState(selectedLabel), text = _g[0], setText = _g[1];
     var _h = useState(false), isMenuOpen = _h[0], setIsMenuOpen = _h[1];
     var _j = useState(null), referenceElement = _j[0], setReferenceElement = _j[1];
+    var t = useTranslation().t;
     useEffect(function () {
         if (value)
             setText(selectedLabel);
@@ -89,7 +91,7 @@ var Autocomplete = function (_a) {
                             setText(selectedLabel);
                             setIsMenuOpen(false);
                         }
-                    }, label: label, isDisabled: isDisabled || isInputDisabled, placeholder: placeholder, value: text, onChange: function (v) { return setText(v); }, icon: isDisabled ? null : inputIconUI }) })), !isDisabled && filteredOptions.length > 0 && (_jsx(SelectMenu, __assign({ referenceElement: referenceElement, 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)); }) })))] })));
+                    }, label: label, isDisabled: isDisabled || isInputDisabled, placeholder: t(placeholder), value: text, onChange: function (v) { return setText(v); }, icon: isDisabled ? null : inputIconUI, labelTooltip: labelTooltip }) })), !isDisabled && filteredOptions.length > 0 && (_jsx(SelectMenu, __assign({ referenceElement: referenceElement, 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/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import { DivCSSProps } from "../../styled/utils";
+type Props = {
+    isChecked: boolean;
+    isIndeterminate?: boolean;
+    icon?: any;
+    onChange?: (isChecked: boolean) => void;
+} & DivCSSProps;
+declare const Checkbox: ({ isChecked, isIndeterminate, icon, onChange, ...props }: Props) => JSX.Element;
+export { Checkbox };

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

@@ -0,0 +1,50 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 styled, { css } from "styled-components";
+import { Div } from "../../styled/utils";
+var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 20px;\n  width: 20px;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n"], ["\n  height: 20px;\n  width: 20px;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n"])), function (props) { return props.theme.colors.gray400; }, function (props) { return props.theme.colors.white; }, function (props) {
+    return (props.isChecked || props.isIndeterminate) && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border: 1px solid white;\n      background-color: ", ";\n    "], ["\n      border: 1px solid white;\n      background-color: ", ";\n    "])), props.theme.colors.pink500);
+});
+var Checkbox = function (_a) {
+    var isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, _b = _a.icon, icon = _b === void 0 ? null : _b, onChange = _a.onChange, props = __rest(_a, ["isChecked", "isIndeterminate", "icon", "onChange"]);
+    var handleOnChange = function () {
+        if (onChange) {
+            if (isChecked) {
+                onChange(false);
+            }
+            else {
+                onChange(!isIndeterminate);
+            }
+        }
+    };
+    return (_jsx(Container, __assign({}, __assign({ isChecked: isChecked, isIndeterminate: isIndeterminate, onClick: handleOnChange }, props), { children: isIndeterminate ? (_jsx(IndeterminateIcon, {})) : (_jsx(Div, __assign({ centered: true }, { children: isChecked && (icon || checkIcon) }))) })));
+};
+var checkIcon = (_jsx("svg", __assign({ width: "14", height: "10", viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M1.10254 4.74355L5.2051 8.84612L12.8974 1.15381", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
+var IndeterminateIcon = function () { return (_jsx("svg", __assign({ width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M1 1H13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }) }))); };
+export { Checkbox };
+var templateObject_1, templateObject_2;

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

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { DivCSSProps } from "../../styled/utils";
 import { Placement } from "@popperjs/core";
 export declare const SelectMenuBackdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../styled/utils").CSSProps, never>;
 export declare const SelectMenuDiv: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../styled/utils").CSSProps, never>;
 export declare const SelectMenuScrollArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../styled/utils").CSSProps, never>;
-declare type Props = {
+type Props = {
     isOpen?: boolean;
     onClose?: any;
     children: any;

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

@@ -4,8 +4,8 @@ export declare const HTMLInput: import("styled-components").StyledComponent<"inp
     padding?: string;
 }, never>;
 export declare const TextInputIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../styled/utils").CSSProps, never>;
-declare type CallbackRef = (ref: HTMLInputElement) => void;
-export declare type TextInputProps = {
+type CallbackRef = (ref: HTMLInputElement) => void;
+export type TextInputProps = {
     label?: string;
     name?: string;
     icon?: React.ReactNode;

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

@@ -2,3 +2,4 @@ export * from "./Autocomplete";
 export * from "./SelectMenu";
 export * from "./TextInput";
 export * from "./tooltip";
+export * from "./Checkbox";

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

@@ -2,3 +2,4 @@ export * from "./Autocomplete";
 export * from "./SelectMenu";
 export * from "./TextInput";
 export * from "./tooltip";
+export * from "./Checkbox";

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps } from "../index";
 export declare const TooltipButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../styled/utils").CSSProps, never>;
 export declare const Tooltip: ({ tooltip, placement, centered, tooltipMaxWidth, tooltipMinWidth, ...divProps }: TooltipProps) => JSX.Element;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const logo: JSX.Element;

package/lib/esm/index.d.ts

@@ -11,7 +11,8 @@ declare class FuseImporter {
     onSubmit: OnSubmit;
     onClose: () => void;
     close(): void;
-    show(): void;
+    show(): Promise<void>;
+    private configureI18n;
 }
 export default FuseImporter;
 export * from "./api";

package/lib/esm/index.js

@@ -9,10 +9,49 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import React from "react";
 import ReactDOM from "react-dom";
 import { Importer } from "./Importer";
 import { fuseImporterId } from "./common";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import * as locales from "./locales";
 var FuseImporter = /** @class */ (function () {
     function FuseImporter(apiToken, templateSlug, options) {
         if (options === void 0) { options = {}; }
@@ -28,21 +67,53 @@ var FuseImporter = /** @class */ (function () {
         document.body.removeChild(importerRoot);
     };
     FuseImporter.prototype.show = function () {
-        var _this = this;
-        var div = document.createElement("div");
-        div.setAttribute("id", fuseImporterId);
-        document.body.appendChild(div);
-        ReactDOM.render(React.createElement(Importer, {
-            apiToken: this.apiToken,
-            templateSlug: this.templateSlug,
-            options: this.options,
-            formatRecord: this.formatRecord,
-            onValidateRecord: this.onValidateRecord,
-            onSubmit: this.onSubmit,
-            onClose: function () {
-                _this.close();
-            },
-        }), document.getElementById(fuseImporterId));
+        return __awaiter(this, void 0, void 0, function () {
+            var div;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.configureI18n()];
+                    case 1:
+                        _a.sent();
+                        div = document.createElement("div");
+                        div.setAttribute("id", fuseImporterId);
+                        document.body.appendChild(div);
+                        ReactDOM.render(React.createElement(Importer, {
+                            apiToken: this.apiToken,
+                            templateSlug: this.templateSlug,
+                            options: this.options,
+                            formatRecord: this.formatRecord,
+                            onValidateRecord: this.onValidateRecord,
+                            onSubmit: this.onSubmit,
+                            onClose: function () {
+                                _this.close();
+                            },
+                        }), document.getElementById(fuseImporterId));
+                        i18n.reloadResources();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    FuseImporter.prototype.configureI18n = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var browserLanguage, language;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        browserLanguage = navigator.language.split("-")[0];
+                        language = this.options.language || browserLanguage || "en";
+                        return [4 /*yield*/, i18n.use(initReactI18next).init({
+                                lng: language,
+                                fallbackLng: "en",
+                                resources: __assign({}, locales),
+                            })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     return FuseImporter;
 }());