fuse-importer 0.0.1-staging

package/lib/esm/common/Table/TableActions/RowFilters.js

@@ -0,0 +1,39 @@
+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);
+};
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { useSpreadsheetContext } from "../../../Importer";
+import { Div } from "../../../styled";
+import { useTranslation } from "react-i18next";
+var FilterContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  ", "\n"], ["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  ", "\n"])), function (p) { return p.theme.css.body3; }, function (p) {
+    return p.isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n      border-radius: 4px;\n    "], ["\n      background: ", ";\n      color: ", ";\n      border-radius: 4px;\n    "])), function (p) { return p.theme.colors.black; }, function (p) { return p.theme.colors.white; });
+});
+var Container = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  border-radius: 4px;\n  background-color: ", ";\n"], ["\n  display: flex;\n  border-radius: 4px;\n  background-color: ", ";\n"])), function (p) { return p.theme.colors.backgroundInterface; });
+var FilteredDataCount = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 8px;\n  margin-left: -3px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n"], ["\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 8px;\n  margin-left: -3px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n"])), function (p) { return p.theme.colors.highlight01; }, function (p) { return p.theme.colors.black; });
+var Filter = function (_a) {
+    var label = _a.label, count = _a.count, isSelected = _a.isSelected, onClick = _a.onClick;
+    var _b = useSpreadsheetContext(), filteredInputValue = _b.filteredInputValue, filteredDataCount = _b.filteredDataCount;
+    return (_jsxs(Div, __assign({ dflex: true, clickable: true, onClick: onClick }, { children: [_jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count, ")"] })] })), isSelected && filteredInputValue !== "" && (_jsx(FilteredDataCount, { children: _jsx(Div, __assign({ minw: 14, centered: true }, { children: filteredDataCount })) }))] })));
+};
+export var RowFilters = function () {
+    var _a = useSpreadsheetContext(), spreadsheetFilter = _a.spreadsheetFilter, errors = _a.errors, filterRecordsByRowType = _a.filterRecordsByRowType, recordsWithValuesCount = _a.recordsWithValuesCount;
+    var t = useTranslation("review").t;
+    var all_rows = t("table_actions.filters_by_rows.all_rows");
+    var valid_rows = t("table_actions.filters_by_rows.valid_rows");
+    var invalid_rows = t("table_actions.filters_by_rows.invalid_rows");
+    return (_jsxs(Container, { children: [_jsx(Filter, { isSelected: spreadsheetFilter.byRow === "all", label: all_rows, count: recordsWithValuesCount, onClick: function () { return filterRecordsByRowType("all"); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "valid", label: valid_rows, onClick: function () { return filterRecordsByRowType("valid"); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "invalid", label: invalid_rows, count: Object.values(errors).length, onClick: function () { return filterRecordsByRowType("invalid"); } })] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/common/Table/TableActions/SearchRows.d.ts

@@ -0,0 +1,3 @@
+export declare const SearchRows: ({ testId, }: {
+    testId?: string;
+}) => JSX.Element;

package/lib/esm/common/Table/TableActions/SearchRows.js

@@ -0,0 +1,72 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { useSpreadsheetContext } from "../../../Importer";
+import { SearchIcon } from "./icons";
+import { useDebounce } from "../../../hooks";
+import { useRef, useState } from "react";
+import { colors } from "../../../styled/theme/colorPalette";
+import { textStyles } from "../../../styled/theme/textStyles";
+import { TooltipProvider } from "../../../common/TooltipProvider";
+import { useTranslation } from "react-i18next";
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"], ["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"])), function (_a) {
+    var isOpen = _a.isOpen;
+    return (isOpen ? colors.orange50 : "none");
+}, function (_a) {
+    var isOpen = _a.isOpen;
+    return (isOpen ? "332px" : "24px");
+});
+var IconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
+var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"], ["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"])), textStyles.body3, colors.gray700, function (_a) {
+    var isOpen = _a.isOpen;
+    return !isOpen && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      top: -9999px;\n    "], ["\n      position: absolute;\n      top: -9999px;\n    "])));
+});
+var SearchInput = function (_a) {
+    var testId = _a.testId, value = _a.value, onChange = _a.onChange;
+    var _b = useDebounce(value, onChange, 300), _value = _b._value, set_Value = _b.set_Value;
+    var inputRef = useRef(null);
+    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var t = useTranslation("review").t;
+    var handleInputChange = function (_a) {
+        var target = _a.target;
+        set_Value(target.value);
+    };
+    var handleInputOnBlur = function () {
+        if (!_value) {
+            setIsOpen(false);
+        }
+    };
+    var handleWrapperClick = function () {
+        var _a;
+        if (!isOpen) {
+            setIsOpen(true);
+            if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    };
+    return (_jsx(TooltipProvider, __assign({ tooltip: !isOpen ? t("table_actions.search_rows.tooltip") : "", placement: "right", flip: false, centered: true, w: "auto", "data-testid": testId }, { children: _jsxs(Wrapper, __assign({ isOpen: isOpen, onClick: handleWrapperClick }, { children: [_jsx(IconWrapper, { children: _jsx(SearchIcon, {}) }), _jsx(Input, { isOpen: isOpen, ref: inputRef, value: _value, onChange: handleInputChange, onBlur: handleInputOnBlur, type: "text", placeholder: t("table_actions.search_rows.placeholder") })] })) })));
+};
+export var SearchRows = function (_a) {
+    var _b = _a.testId, testId = _b === void 0 ? "ta-search-rows" : _b;
+    var _c = useSpreadsheetContext(), filteredInputValue = _c.filteredInputValue, setFilteredInputValue = _c.setFilteredInputValue;
+    var handleChangeInputValue = function (value) {
+        setFilteredInputValue(value);
+    };
+    return (_jsx(SearchInput, { testId: testId, value: filteredInputValue, onChange: handleChangeInputValue }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,8 @@
+export type TableActionsContainerProps = {
+    height: number;
+};
+type TableActionsProps = {
+    tableActionsHeight?: number;
+};
+export declare const TableActions: ({ tableActionsHeight, ...props }: TableActionsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { defaultTableActionsHeightPx } from "./common";
+import { DeleteSelectedRows } from "./DeleteSelectedRows";
+import { SearchRows } from "./SearchRows";
+import { ExportData } from "./ExportData";
+import { ButtonActionsContainer, TableActionsContainer, TableActionsContent, } from "./TableActions.styles";
+import { FilterByErrors } from "./FilterByErrors/FilterByErrors";
+import { RowFilters } from "./RowFilters";
+export var TableActions = function (_a) {
+    var _b = _a.tableActionsHeight, tableActionsHeight = _b === void 0 ? defaultTableActionsHeightPx : _b, props = __rest(_a, ["tableActionsHeight"]);
+    return (_jsx(TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: _jsxs(TableActionsContent, { children: [_jsx(SearchRows, {}), _jsx(RowFilters, {}), _jsx(FilterByErrors, {}), _jsxs(ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {})] })] }) })));
+};

package/lib/esm/common/Table/TableActions/TableActions.styles.d.ts

@@ -0,0 +1,5 @@
+import { TableActionsContainerProps } from "./TableActions";
+export declare const TableActionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableActionsContainerProps, never>;
+export declare const ButtonActionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
+export declare const TableActionsContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

package/lib/esm/common/Table/TableActions/TableActions.styles.js

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+import { Div } from "../../../styled/utils";
+export var TableActionsContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  padding: 8px 32px;\n  width: 100%;\n\n  * {\n    box-sizing: content-box;\n  }\n"], ["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  padding: 8px 32px;\n  width: 100%;\n\n  * {\n    box-sizing: content-box;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.white;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.gray300;
+});
+export var ButtonActionsContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n"])));
+export var TableActionsContent = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"])));
+export var ActionButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 36px;\n  justify-content: center;\n  padding: 0px;\n  width: 36px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"], ["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 36px;\n  justify-content: center;\n  padding: 0px;\n  width: 36px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1 @@
+export declare const defaultTableActionsHeightPx = 60;

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

@@ -0,0 +1 @@
+export var defaultTableActionsHeightPx = 60;

package/lib/esm/common/Table/TableActions/hooks.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { BatchValidationErrors, Field, RecordDataSet } from "../../../types";
+interface UseTableActionsProps {
+    setErrors: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+    setWarnings: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+}
+export type DeleteRecords = (selectedRecords: string[], errors: BatchValidationErrors, warnings: BatchValidationErrors) => void;
+export type FilterRecordsBySearchValue = (obj: RecordDataSet, value: string, fields: Field[]) => RecordDataSet;
+export type FilterRecordsByError = (obj: RecordDataSet, keyToFilter: string, errors: BatchValidationErrors, fields: Field[]) => RecordDataSet;
+interface UseTableActionsProps {
+    setErrors: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+    setWarnings: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+    setDataSet: React.Dispatch<React.SetStateAction<RecordDataSet>>;
+}
+export declare const useTableActions: ({ setDataSet, setErrors, setWarnings, }: UseTableActionsProps) => {
+    deleteRecords: (selectedRecords: string[], errors: BatchValidationErrors, warnings: BatchValidationErrors) => void;
+};
+export {};

package/lib/esm/common/Table/TableActions/hooks.js

@@ -0,0 +1,41 @@
+var removeErrorsOrWarningsFromObject = function (obj, keysToRemove) {
+    var keysSet = new Set(keysToRemove);
+    var newObj = {};
+    for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key) && !(keysSet === null || keysSet === void 0 ? void 0 : keysSet.has(key))) {
+            newObj[key] = obj[key];
+        }
+    }
+    return newObj;
+};
+var removeItemsFromObject = function (obj, idsToRemove) {
+    var _a;
+    var idSet = new Set(idsToRemove);
+    var newObj = {};
+    for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            var meta = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta;
+            if (meta && (meta === null || meta === void 0 ? void 0 : meta.id) && !(idSet === null || idSet === void 0 ? void 0 : idSet.has(meta === null || meta === void 0 ? void 0 : meta.id))) {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    return newObj;
+};
+export var useTableActions = function (_a) {
+    var setDataSet = _a.setDataSet, setErrors = _a.setErrors, setWarnings = _a.setWarnings;
+    // Delete records from dataSet and from validations
+    var deleteRecords = function (selectedRecords, errors, warnings) {
+        var newErrors = removeErrorsOrWarningsFromObject(errors, selectedRecords);
+        var newWarnings = removeErrorsOrWarningsFromObject(warnings, selectedRecords);
+        setErrors(newErrors);
+        setWarnings(newWarnings);
+        setDataSet(function (prev) {
+            var newDataSet = removeItemsFromObject(prev, selectedRecords);
+            return newDataSet;
+        });
+    };
+    return {
+        deleteRecords: deleteRecords,
+    };
+};

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

@@ -0,0 +1,4 @@
+export declare const DeleteIcon: () => JSX.Element;
+export declare const ConfirmationDeleteIcon: JSX.Element;
+export declare const SearchIcon: () => JSX.Element;
+export declare const DownloadIcon: () => JSX.Element;

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

@@ -0,0 +1,16 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var DeleteIcon = function () { return (_jsxs("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M3.5 5.16675H18.5L17.9875 15.4164C17.8545 18.0775 15.6581 20.1667 12.9938 20.1667H9.00625C6.34188 20.1667 4.14554 18.0775 4.01248 15.4164L3.5 5.16675Z", stroke: "#262626", strokeWidth: "2" }), _jsx("path", { d: "M6.83331 5.16675V4.83341C6.83331 3.17656 8.17646 1.83341 9.83331 1.83341H12.1666C13.8235 1.83341 15.1666 3.17656 15.1666 4.83341V5.16675", stroke: "#262626", strokeWidth: "2" }), _jsx("path", { d: "M1.83331 5.16675H20.1666", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M13.5 10.1667V14.3334", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M8.5 10.1667V14.3334", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round" })] }))); };
+export var ConfirmationDeleteIcon = (_jsxs("svg", __assign({ width: "68", height: "68", viewBox: "0 0 68 68", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { width: "68", height: "68", fill: "white" }), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M8.79639 4.52687C8.79639 3.70291 9.73698 3.23251 10.3962 3.72676L33.7964 21.2699C33.9246 21.3661 34.0001 21.517 34.0001 21.6772L34.0001 46.015C34.0001 46.4345 33.5212 46.674 33.1856 46.4224L9.59669 28.7376C9.0929 28.3599 8.79639 27.7671 8.79639 27.1374L8.79639 4.52687Z", fill: "url(#paint0_linear_2363_5281)" }) })), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M8.7959 63.1264C8.7959 63.9504 9.73649 64.4208 10.3957 63.9266L33.7959 46.3834C33.9241 46.2873 33.9996 46.1363 33.9996 45.9761L33.9996 21.6383C33.9996 21.2188 33.5207 20.9794 33.1851 21.231L9.5962 38.9157C9.09241 39.2934 8.7959 39.8863 8.7959 40.5159L8.7959 63.1264Z", fill: "url(#paint1_linear_2363_5281)" }) })), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M59.2039 4.87257C59.2039 4.04862 58.2633 3.57821 57.604 4.07246L34.1528 21.6539C34.0567 21.726 34.0002 21.839 34.0002 21.9591L34.0002 46.6159C34.0002 46.9302 34.359 47.1097 34.6104 46.9211L58.4036 29.0833C58.9073 28.7056 59.2039 28.1128 59.2039 27.4831L59.2039 4.87257Z", fill: "url(#paint2_linear_2363_5281)" }) })), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M59.2041 63.4722C59.2041 64.2961 58.2635 64.7665 57.6043 64.2723L34.1531 46.6908C34.057 46.6188 34.0004 46.5057 34.0004 46.3856L34.0004 21.7288C34.0004 21.4145 34.3592 21.2351 34.6107 21.4236L58.4038 39.2614C58.9076 39.6391 59.2041 40.232 59.2041 40.8616L59.2041 63.4722Z", fill: "url(#paint3_linear_2363_5281)" }) })), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "paint0_linear_2363_5281", x1: "28.828", y1: "2.27186", x2: "10.8931", y2: "6.63443", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#FF710A" }), _jsx("stop", { offset: "1", stopColor: "#FD9827" })] })), _jsxs("linearGradient", __assign({ id: "paint1_linear_2363_5281", x1: "28.8275", y1: "65.3815", x2: "10.8926", y2: "61.0189", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#FF710A" }), _jsx("stop", { offset: "1", stopColor: "#FD9827" })] })), _jsxs("linearGradient", __assign({ id: "paint2_linear_2363_5281", x1: "41.7498", y1: "25.1258", x2: "70.7926", y2: "29.9741", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#EDD172" }), _jsx("stop", { offset: "1", stopColor: "#D0A617" })] })), _jsxs("linearGradient", __assign({ id: "paint3_linear_2363_5281", x1: "41.7501", y1: "43.2189", x2: "70.7929", y2: "38.3706", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#EDD172" }), _jsx("stop", { offset: "1", stopColor: "#D0A617" })] }))] })] })));
+export var SearchIcon = function () { return (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20Z", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M21 21L18 18", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+export var DownloadIcon = function () { return (_jsxs("svg", __assign({ width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M10.0834 18C9.66675 16.75 9.66675 15.5 9.66675 14.6303C9.66675 11.7319 12.2621 8.83337 15.4637 8.83337C17.6094 8.83337 19.4828 9.99914 20.4852 11.7319H21.2607C23.6619 11.7319 25.9167 13.4167 25.9167 15.5C25.9167 16.3334 25.9167 17.1667 25.5001 18", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M14.1807 23.2764L17.5834 26.5416L20.9862 23.2764", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M17.5833 25.6827L17.5833 16.4375", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round" })] }))); };

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

@@ -0,0 +1 @@
+export * from "./TableActions";

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

@@ -0,0 +1 @@
+export * from "./TableActions";

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

@@ -0,0 +1,35 @@
+import React from "react";
+export declare enum SortDirection {
+    asc = "asc",
+    desc = "desc"
+}
+export type SortBy = {
+    field: any;
+    direction: SortDirection;
+};
+type State = {
+    data: any[];
+    isLoading: boolean;
+    currentPage: number;
+    totalPages: any;
+    pageSize: number;
+    totalCount: number;
+    sortBy: SortBy;
+    setPageSize: React.Dispatch<React.SetStateAction<number>>;
+    getData: () => Promise<void>;
+    setSortBy: React.Dispatch<React.SetStateAction<SortBy>>;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+};
+export declare const TableDataProvider: ({ children, dataUrl, query, filters, defaultSortBy, onGetData, }: {
+    children: any;
+    dataUrl: any;
+    query?: string;
+    filters?: any;
+    defaultSortBy?: {
+        field: any;
+        direction: any;
+    };
+    onGetData?: any;
+}) => JSX.Element;
+export declare const useTableContext: () => State;
+export {};

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

@@ -0,0 +1,127 @@
+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 __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 { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { Spinner } from "../Spinner";
+import { api } from "../../api";
+export var SortDirection;
+(function (SortDirection) {
+    SortDirection["asc"] = "asc";
+    SortDirection["desc"] = "desc";
+})(SortDirection || (SortDirection = {}));
+var TableContext = createContext({});
+export var TableDataProvider = function (_a) {
+    var children = _a.children, dataUrl = _a.dataUrl, _b = _a.query, query = _b === void 0 ? "" : _b, _c = _a.filters, filters = _c === void 0 ? null : _c, _d = _a.defaultSortBy, defaultSortBy = _d === void 0 ? { field: null, direction: null } : _d, _e = _a.onGetData, onGetData = _e === void 0 ? null : _e;
+    var _f = useState([]), data = _f[0], setData = _f[1];
+    var _g = useState(false), isLoading = _g[0], setLoading = _g[1];
+    var _h = useState(1), currentPage = _h[0], setCurrentPage = _h[1];
+    var _j = useState(null), totalPages = _j[0], setTotalPages = _j[1];
+    var _k = useState(defaultSortBy), sortBy = _k[0], setSortBy = _k[1];
+    var _l = useState(0), totalCount = _l[0], setTotalCount = _l[1];
+    var _m = useState(50), pageSize = _m[0], setPageSize = _m[1];
+    var getData = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var payload, e_1;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    setLoading(true);
+                    _d.label = 1;
+                case 1:
+                    _d.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, api.get(dataUrl, {
+                            params: {
+                                query: query,
+                                page: currentPage,
+                                per_page: pageSize,
+                                sort: sortBy.field,
+                                sort_direction: sortBy.direction,
+                                filters: filters || {},
+                            },
+                        })];
+                case 2:
+                    payload = (_d.sent()).data;
+                    if (((_a = payload === null || payload === void 0 ? void 0 : payload.data) === null || _a === void 0 ? void 0 : _a.length) === 0 && currentPage > 1) {
+                        setCurrentPage(function (oldValue) { return oldValue - 1; });
+                        return [2 /*return*/];
+                    }
+                    if (onGetData) {
+                        onGetData(payload);
+                    }
+                    setData(payload.data);
+                    setTotalPages((_b = payload.pagination) === null || _b === void 0 ? void 0 : _b.total_pages);
+                    setTotalCount((_c = payload.pagination) === null || _c === void 0 ? void 0 : _c.total_count);
+                    setLoading(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    e_1 = _d.sent();
+                    setLoading(false);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        getData();
+    }, [query, dataUrl, sortBy, filters, pageSize, currentPage]);
+    var value = {
+        data: data,
+        isLoading: isLoading,
+        currentPage: currentPage,
+        totalPages: totalPages || 1,
+        sortBy: sortBy,
+        pageSize: pageSize,
+        totalCount: totalCount,
+        setPageSize: setPageSize,
+        getData: getData,
+        setSortBy: setSortBy,
+        setCurrentPage: setCurrentPage,
+    };
+    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/CustomScrollbar.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CustomScrollbarsVirtualList: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<unknown>>;

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

@@ -0,0 +1,34 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { Scrollbars } from "react-custom-scrollbars";
+import styled from "styled-components";
+var StyledScrollbars = styled(Scrollbars)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  scrollbar-width: thin;\n  scrollbar-color: #b1b1b2 transparent;\n\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 5px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #b1b1b2;\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  > div:first-of-type {\n    margin-bottom: 0 !important;\n  }\n"], ["\n  scrollbar-width: thin;\n  scrollbar-color: #b1b1b2 transparent;\n\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 5px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #b1b1b2;\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  > div:first-of-type {\n    margin-bottom: 0 !important;\n  }\n"])));
+var CustomScrollbars = function (_a) {
+    var onScroll = _a.onScroll, forwardedRef = _a.forwardedRef, style = _a.style, children = _a.children;
+    var refSetter = useCallback(function (scrollbarsRef) {
+        if (scrollbarsRef) {
+            forwardedRef(scrollbarsRef.view);
+        }
+        else {
+            forwardedRef(null);
+        }
+    }, []);
+    return (_jsx(StyledScrollbars, __assign({ renderTrackHorizontal: function (props) { return (_jsx("div", __assign({}, props, { style: { display: "none" }, className: "track-horizontal" }))); }, ref: refSetter, style: style, onScroll: onScroll }, { children: children })));
+};
+export var CustomScrollbarsVirtualList = forwardRef(function (props, ref) { return (_jsx(CustomScrollbars, __assign({}, props, { forwardedRef: ref }))); });
+var templateObject_1;

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { DivCSSProps } from "../../../styled/utils";
+import { SortDirection } from "../TableDataProvider";
+import { TableViewProps } from "./types";
+type TableViewHeaderProps = {
+    isLast: boolean;
+};
+export declare const TableViewHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewHeaderProps, never>;
+type SortIndicatorProps = {
+    direction: SortDirection;
+};
+export declare const SortIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & SortIndicatorProps, never>;
+export declare const TableHeadersContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
+export declare const TableHeadersContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
+type TableHeadersProps = Pick<TableViewProps, "columns" | "sortBy" | "setSortBy" | "rowHeight" | "rowWidthScalingFactor"> & {
+    scrollLeft: number;
+    height: number;
+    containerRef: React.MutableRefObject<HTMLDivElement>;
+    containerWidth: number;
+    rowWidth: number;
+} & DivCSSProps;
+export declare const TableHeaders: ({ scrollLeft, columns, sortBy, rowHeight, containerRef, setSortBy, height, containerWidth, rowWidth, ...props }: TableHeadersProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,69 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import styled, { css } from "styled-components";
+import { Div } from "../../../styled/utils";
+import { SortDirection } from "../TableDataProvider";
+import { chevronDown as chevronDownIcon } from "../icons";
+import { TableViewCellContainer, defaultTableHeaderHeightPx, getColumnWidthsPx, } from "./common";
+export var TableViewHeader = styled(TableViewCellContainer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n"], ["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\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; });
+export var SortIndicator = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (p) {
+    return p.direction === SortDirection.asc && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "], ["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "])));
+}, function (p) { return p.theme.colors.gray300; });
+export var TableHeadersContainer = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: hidden;\n  background-color: ", ";\n"], ["\n  overflow-x: hidden;\n  background-color: ", ";\n"])), function (p) { return p.theme.colors.tableHeader; });
+export var TableHeadersContent = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  /* We may add some padding-right here \n  since TableHeadersContainer has overflow-x: hidden */\n  /* Table header scrolling is controlled by the table content,\n  we need to add some padding to cover the width of the vertical scrollbars that may \n  be present in the table content. Scrollbars can vary between browsers and OSes,\n  Assuming scrollbars won't be wider than 100px: */\n  box-shadow: inset 0 -1px 0 ", ";\n  padding-right: 100px;\n"], ["\n  /* We may add some padding-right here \n  since TableHeadersContainer has overflow-x: hidden */\n  /* Table header scrolling is controlled by the table content,\n  we need to add some padding to cover the width of the vertical scrollbars that may \n  be present in the table content. Scrollbars can vary between browsers and OSes,\n  Assuming scrollbars won't be wider than 100px: */\n  box-shadow: inset 0 -1px 0 ", ";\n  padding-right: 100px;\n"])), function (p) { return p.theme.colors.gray300; });
+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.height, height = _c === void 0 ? defaultTableHeaderHeightPx : _c, containerWidth = _a.containerWidth, rowWidth = _a.rowWidth, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "rowHeight", "containerRef", "setSortBy", "height", "containerWidth", "rowWidth"]);
+    var t = useTranslation().t;
+    return (_jsx(TableHeadersContainer, __assign({ ref: containerRef, w: containerWidth }, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: rowWidth }, { children: columns.map(function (column, index) {
+                var header = column.header, Header = column.Header;
+                var onHeaderClick = function () {
+                    if (!setSortBy || column.disableSort)
+                        return;
+                    var field = column.dataAccessor;
+                    if ((sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === field &&
+                        (sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction) === SortDirection.asc) {
+                        setSortBy({
+                            field: field,
+                            direction: SortDirection.desc,
+                        });
+                    }
+                    else {
+                        setSortBy({
+                            field: field,
+                            direction: SortDirection.asc,
+                        });
+                    }
+                };
+                var columnWidthPercentages = getColumnWidthsPx(columns, rowWidth);
+                var columnWidthPercentage = columnWidthPercentages[index];
+                var isLast = index === columns.length - 1;
+                return (_jsxs(TableViewHeader, __assign({ isLast: isLast, className: isLast ? "last-column" : "", w: columnWidthPercentage, onClick: onHeaderClick, h: height }, props, { children: [_jsx(_Fragment, { children: Header ? _jsx(Header, {}) : _jsx(Div, __assign({ truncateText: true }, { children: 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;

package/lib/esm/common/Table/TableView/TableRows/TableRow.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { TableViewProps } from "../types";
+import { DivCSSProps } from "../../../../styled/utils";
+export declare const Cell: React.MemoExoticComponent<(props: any) => JSX.Element>;
+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>;
+type Props = Pick<TableViewProps, "columns" | "onRowClick" | "highlightFirstRow"> & {
+    row: any;
+    rowWidth: number;
+    indexI: number;
+    isLast?: boolean;
+    getItemKey?: (row: any) => string;
+    isRowSelected?: boolean;
+} & DivCSSProps;
+export declare const TableRow: ({ row, indexI, columns, isLast, highlightFirstRow, onRowClick, getItemKey, rowWidth, isRowSelected, ...props }: Props) => JSX.Element;
+export {};