@symply.io/basic-components 1.0.0-alpha.13 → 1.0.0-alpha.16

package/AlertDialog/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AlertDialogProps } from "./types";
 declare const AlertDialog: (props: AlertDialogProps) => JSX.Element;
 export default AlertDialog;

package/AlertDialog/index.js

@@ -32,7 +32,7 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import Slide from "@mui/material/Slide";
 import useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
-    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
+    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }));
 });
 var AlertDialog = function (props) {
     var _a = props.title, title = _a === void 0 ? "Info" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "md" : _b, children = props.children, open = props.open, onClose = props.onClose, DialogButtons = props.DialogButtons, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["title", "maxWidth", "children", "open", "onClose", "DialogButtons", "primaryColor", "secondaryColor"]);
@@ -42,7 +42,7 @@ var AlertDialog = function (props) {
                 if (reason !== "backdropClick") {
                     onClose();
                 }
-            }, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" }, rest, { children: [_jsx(DialogTitle, __assign({ id: "alert-dialog-title" }, { children: title }), void 0), _jsx(DialogContent, { children: children }, void 0), _jsx(DialogActions, { children: DialogButtons ? (cloneElement(DialogButtons)) : (_jsx(Button, __assign({ onClick: onClose, color: "primary" }, { children: "OK" }), void 0)) }, void 0)] }), void 0) }), void 0));
+            }, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" }, rest, { children: [_jsx(DialogTitle, __assign({ id: "alert-dialog-title" }, { children: title })), _jsx(DialogContent, { children: children }), _jsx(DialogActions, { children: DialogButtons ? (cloneElement(DialogButtons)) : (_jsx(Button, __assign({ onClick: onClose, color: "primary" }, { children: "OK" }))) })] })) })));
 };
 export default AlertDialog;
 export * from "./types";

package/Autocomplete/index.d.ts

@@ -0,0 +1,6 @@
+import { TextFieldProps } from "@mui/material/TextField";
+import { CustomAutocompleteProps } from "./types";
+declare type textFieldProps = Omit<TextFieldProps, "onChange">;
+declare function CustomAutocomplete(props: CustomAutocompleteProps & textFieldProps): JSX.Element;
+export default CustomAutocomplete;
+export * from "./types";

package/Autocomplete/index.js

@@ -0,0 +1,38 @@
+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 ThemeProvider from "@mui/material/styles/ThemeProvider";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../useCustomTheme";
+function CustomAutocomplete(props) {
+    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "primaryColor", "secondaryColor", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _a = useInteractions(), inputValue = _a.inputValue, onInputChange = _a.onInputChange;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, options: options, multiple: multiple, onChange: function (_, value) {
+                onChange(value);
+            }, inputValue: inputValue, onInputChange: onInputChange, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { size: size }))); } }) })));
+}
+export default CustomAutocomplete;
+export * from "./types";

package/Autocomplete/types.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+export interface IAutocompleteOption {
+    label: string;
+    [name: string]: unknown;
+}
+export declare type AutocompleteOptionType = IAutocompleteOption | string;
+export interface CustomAutocompleteProps {
+    multiple?: boolean;
+    options: Array<AutocompleteOptionType>;
+    value: Array<AutocompleteOptionType> | AutocompleteOptionType | null;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+    onChange: (value: Array<AutocompleteOptionType> | AutocompleteOptionType | null) => void;
+}

package/Autocomplete/types.js

@@ -0,0 +1 @@
+export {};

package/Autocomplete/useInteractions.d.ts

@@ -0,0 +1,5 @@
+declare function useInteractions(): {
+    inputValue: string;
+    onInputChange: (_: object, value: string) => void;
+};
+export default useInteractions;

package/Autocomplete/useInteractions.js

@@ -0,0 +1,9 @@
+import { useState, useCallback } from "react";
+function useInteractions() {
+    var _a = useState(""), inputValue = _a[0], setInputValue = _a[1];
+    var onInputChange = useCallback(function (_, value) {
+        setInputValue(value);
+    }, []);
+    return { inputValue: inputValue, onInputChange: onInputChange };
+}
+export default useInteractions;

package/AutocompleteWithFilter/index.d.ts

@@ -0,0 +1,6 @@
+import { TextFieldProps } from "@mui/material/TextField";
+import { AutoCompleteWithFilterProps } from "./types";
+declare type textFieldProps = Omit<TextFieldProps, "onChange">;
+declare function AutocompleteWithFilter(props: AutoCompleteWithFilterProps & textFieldProps): JSX.Element;
+export default AutocompleteWithFilter;
+export * from "./types";

package/AutocompleteWithFilter/index.js

@@ -0,0 +1,54 @@
+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 ThemeProvider from "@mui/material/styles/ThemeProvider";
+import Checkbox from "@mui/material/Checkbox";
+import TextField from "@mui/material/TextField";
+import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import useCustomTheme from "../useCustomTheme";
+var icon = _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+var checkedIcon = _jsx(CheckBoxIcon, { fontSize: "small" });
+function AutocompleteWithFilter(props) {
+    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, disableCloseOnSelect = props.disableCloseOnSelect, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "disableCloseOnSelect", "primaryColor", "secondaryColor", "onChange"]);
+    var filter = createFilterOptions({
+        ignoreCase: true,
+        ignoreAccents: true,
+        trim: true,
+        stringify: function (option) {
+            return typeof option === "string" ? option : option.label;
+        }
+    });
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: 1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, value) {
+                onChange(value);
+            }, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
+                return typeof option === "string" ? option || "" : option.label || "";
+            }, renderOption: function (props, option, _a) {
+                var selected = _a.selected;
+                return (_jsxs("li", __assign({}, props, { children: [_jsx(Checkbox, { icon: icon, color: "primary", checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), typeof option === "string" ? option || "" : option.label || ""] })));
+            }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { variant: "outlined" }))); } }) })));
+}
+export default AutocompleteWithFilter;
+export * from "./types";

package/AutocompleteWithFilter/types.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from "react";
+export interface IAutoCompleteWithFilterOption {
+    label: string;
+    [name: string]: unknown;
+}
+export declare type AutoCompleteWithFilterOptionType = IAutoCompleteWithFilterOption | string;
+export interface AutoCompleteWithFilterProps {
+    multiple?: boolean;
+    value: Array<AutoCompleteWithFilterOptionType> | AutoCompleteWithFilterOptionType | null;
+    options: Array<AutoCompleteWithFilterOptionType>;
+    disableCloseOnSelect?: boolean;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+    onChange: (value: Array<AutoCompleteWithFilterOptionType> | AutoCompleteWithFilterOptionType | null) => void;
+}

package/AutocompleteWithFilter/types.js

@@ -0,0 +1 @@
+export {};

package/BasicModal/Content.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicModalContentProps } from "./types";
 declare function Content(props: BasicModalContentProps): JSX.Element;
 export default Content;

package/BasicModal/Content.js

@@ -32,6 +32,6 @@ function Content(props) {
                             right: 8,
                             top: 8,
                             color: theme.palette.grey[500],
-                        } }, { children: _jsx(CloseIcon, {}, void 0) }), void 0)) : null] }), void 0), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }, void 0), Boolean(children) && cloneElement(children)] }), void 0), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText }), void 0) }), void 0), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : undefined, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText }), void 0) }), void 0)] }, void 0)) }), void 0) }), void 0))] }, void 0));
+                        } }, { children: _jsx(CloseIcon, {}) }))) : null] })), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText })) })), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : undefined, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText })) }))] })) })) })))] }));
 }
 export default Content;

package/BasicModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicModalProps } from "./types";
 declare function BasicModal(props: BasicModalProps): JSX.Element;
 export default BasicModal;

package/BasicModal/index.js

@@ -30,7 +30,7 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import Content from "./Content";
 import useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
-    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
+    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }));
 });
 function BasicModal(props) {
     var onClose = props.onClose, onSubmit = props.onSubmit, _a = props.maxWidth, maxWidth = _a === void 0 ? "sm" : _a, _b = props.open, open = _b === void 0 ? false : _b, _c = props.noForm, noForm = _c === void 0 ? false : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onClose", "onSubmit", "maxWidth", "open", "noForm", "primaryColor", "secondaryColor"]);
@@ -46,7 +46,7 @@ function BasicModal(props) {
                         e.preventDefault();
                         e.stopPropagation();
                         onSubmit();
-                    } }, { children: _jsx(Content, __assign({}, rest, { noForm: noForm, onClose: onClose, onSubmit: onSubmit }), void 0) }), void 0) }), void 0) }), void 0));
+                    } }, { children: _jsx(Content, __assign({}, rest, { noForm: noForm, onClose: onClose, onSubmit: onSubmit })) })) })) })));
 }
 export default BasicModal;
 export * from "./types";

package/BreadCrumbs/index.d.ts

@@ -0,0 +1,4 @@
+import { BreadCrumbsProps } from "./types";
+declare function Crumbs(props: BreadCrumbsProps): JSX.Element;
+export default Crumbs;
+export * from "./types";

package/BreadCrumbs/index.js

@@ -0,0 +1,37 @@
+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 { useCallback } from "react";
+import { navigate } from "@reach/router";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Typography from "@mui/material/Typography";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import useCustomTheme from "../useCustomTheme";
+function Crumbs(props) {
+    var routes = props.routes, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var onNavigateTo = useCallback(function (url) {
+        navigate(url, { replace: true });
+    }, []);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Breadcrumbs, __assign({ "aria-label": "breadcrumb", separator: _jsx(NavigateNextIcon, { fontSize: "small" }) }, { children: [_jsx(Typography, {}), routes.map(function (route) {
+                    var href = route.href, label = route.label;
+                    return href ? (_jsx(Typography, __assign({ variant: "body2", color: "inherit", sx: {
+                            "&:hover": {
+                                cursor: "pointer",
+                                color: theme.palette.primary.light,
+                            },
+                        }, onClick: function () { return onNavigateTo(href); } }, { children: label }), label)) : (_jsx(Typography, __assign({ variant: "body2", color: "primary" }, { children: label }), label));
+                })] })) })));
+}
+export default Crumbs;
+export * from "./types";

package/BreadCrumbs/types.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+export interface BreadCrumbsProps {
+    routes: Array<{
+        href?: string;
+        label: string;
+    }>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/BreadCrumbs/types.js

@@ -0,0 +1 @@
+export {};

package/Copyright/index.d.ts

@@ -0,0 +1,4 @@
+import { CopyrightProps } from "./types";
+declare function Copyright(props: CopyrightProps): JSX.Element;
+export default Copyright;
+export * from "./types";

package/Copyright/index.js

@@ -0,0 +1,25 @@
+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 Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+function Copyright(props) {
+    var primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Typography, __assign({ variant: "body2", color: "textSecondary", align: "center" }, { children: ["Copyright © ", _jsx(Link, __assign({ color: "inherit", href: "https://symply.io/" }, { children: "Symply Software Inc" })), "\u00A0", new Date().getFullYear() > 2020
+                    ? "2020-".concat(new Date().getFullYear())
+                    : new Date().getFullYear(), "."] })) })));
+}
+export default Copyright;
+export * from "./types";

package/Copyright/types.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from "react";
+export interface CopyrightProps {
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/Copyright/types.js

@@ -0,0 +1 @@
+export {};

package/DigitInput/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextFieldProps } from "@mui/material/TextField";
 import { DigitInputProps } from "./types";
 declare type TextProps = Omit<TextFieldProps, "onChange">;

package/DigitInput/index.js

@@ -32,7 +32,7 @@ function DigitInput(props) {
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "text", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: onCloseTooltip, inputProps: { maxLength: maxLength, minLength: minLength }, InputProps: {
                     endAdornment: endAdornment
-                }, onChange: handleChange }, rest), void 0) }), void 0) }), void 0));
+                }, onChange: handleChange }, rest)) })) })));
 }
 export default DigitInput;
 export * from "./types";

package/DynamicHeaderBar/HeaderBar.js

@@ -27,6 +27,6 @@ function HeaderBar(props) {
     var hasButtons = useMemo(function () { return buttons.length > 0; }, [buttons.length]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ sx: { mb: 1 } }, { children: [_jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true, xs: 12, sm: hasButtons ? 6 : 12, md: hasButtons ? 5 : 12, lg: hasButtons ? 4 : 12, xl: hasButtons ? 3 : 12 }, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [showBackButton && (_jsx(IconButton, __assign({ onClick: function () {
                                             onBack ? onBack() : window.history.back();
-                                        } }, { children: _jsx(ArrowBackIcon, { fontSize: "small" }, void 0) }), void 0)), _jsx(Typography, __assign({ align: "left", variant: isLessThanSm ? "h6" : "h3", sx: { fontWeight: 600 } }, { children: title }), void 0)] }), void 0) }), void 0), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons }, void 0) }), void 0)) : (_jsx(_Fragment, {}, void 0))] }), void 0), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color }, void 0) }), void 0) }), void 0), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle }, void 0)) : (cloneElement(subtitle)) }), void 0) }), void 0)), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) }), void 0) }), void 0))] }), void 0) }), void 0));
+                                        } }, { children: _jsx(ArrowBackIcon, { fontSize: "small" }) }))), _jsx(Typography, __assign({ align: "left", variant: isLessThanSm ? "h6" : "h3", sx: { fontWeight: 600 } }, { children: title }))] })) })), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons }) }))) : (_jsx(_Fragment, {}))] })), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color }) })) })), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle })) : (cloneElement(subtitle)) })) }))), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) })) })))] })) })));
 }
 export default HeaderBar;

package/DynamicHeaderBar/HeaderButtons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { HeaderButtonProps } from "./types";
 export interface HeaderButtonsProps {
     buttons: Array<HeaderButtonProps>;

package/DynamicHeaderBar/HeaderButtons.js

@@ -26,19 +26,19 @@ function HeaderButtons(props) {
                 switch (button.type) {
                     case HeaderButtonCategory.TextButton: {
                         var _a = button.variant, variant = _a === void 0 ? "contained" : _a, text = button.text, onClick = button.onClick, color = button.color, size = button.size, startIcon = button.startIcon, endIcon = button.endIcon, disabled = button.disabled;
-                        return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(Button, __assign({ fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled }, { children: text }), void 0) }), text));
+                        return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(Button, __assign({ fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled }, { children: text })) }), text));
                     }
                     case HeaderButtonCategory.IconButton: {
                         var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon;
-                        return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size }, { children: icon }), void 0) }), title));
+                        return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size }, { children: icon })) }), title));
                     }
                     case HeaderButtonCategory.MenuButton: {
                         var btns = button.buttons, buttonText = button.buttonText, disabled = button.disabled, variant = button.variant, size = button.size;
-                        return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, buttonText: buttonText, disabled: disabled }, void 0) }), buttonText));
+                        return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, buttonText: buttonText, disabled: disabled }) }), buttonText));
                     }
                     default:
-                        return _jsx(_Fragment, {}, void 0);
+                        return _jsx(_Fragment, {});
                 }
-            }) }), void 0) }), void 0));
+            }) })) })));
 }
 export default HeaderButtons;

package/DynamicHeaderBar/HeaderLine.js

@@ -7,6 +7,6 @@ function HeaderLine(props) {
     return (_jsx(Divider, { sx: {
             height: "3px",
             backgroundColor: color || theme.palette.primary.main
-        } }, void 0));
+        } }));
 }
 export default HeaderLine;

package/DynamicHeaderBar/index.js

@@ -37,13 +37,13 @@ export function HeaderProvider(props) {
             setHeight(node.getBoundingClientRect().height);
         }
     }, [headerProps]);
-    return (_jsx(HeaderContext.Provider, __assign({ value: { onInit: onInit, onHide: onHide, onShow: onShow } }, { children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, __assign({ container: true, direction: "row", sx: __assign({}, sx), ref: measureRef }, { children: _jsx(Grid, __assign({ item: true, xs: 12 }, { children: _jsx(HeaderBar, __assign({}, headerProps), void 0) }), void 0) }), void 0)) : (_jsx(_Fragment, {}, void 0)), cloneElement(children, {
+    return (_jsx(HeaderContext.Provider, __assign({ value: { onInit: onInit, onHide: onHide, onShow: onShow } }, { children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, __assign({ container: true, direction: "row", sx: __assign({}, sx), ref: measureRef }, { children: _jsx(Grid, __assign({ item: true, xs: 12 }, { children: _jsx(HeaderBar, __assign({}, headerProps)) })) }))) : (_jsx(_Fragment, {})), cloneElement(children, {
                     sx: {
                         p: 3,
                         py: 1,
                         pt: height ? "calc(".concat(height, "px)") : undefined,
                     },
-                })] }, void 0) }), void 0));
+                })] }) })));
 }
 export function useHeaderBar() {
     return useContext(HeaderContext);

package/FormRadioGroup/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormRadioGroupProps } from "./types";
 declare function FormRadioGroup(props: FormRadioGroupProps): JSX.Element;
 export default FormRadioGroup;

package/FormRadioGroup/index.js

@@ -22,7 +22,7 @@ import useCustomTheme from "../useCustomTheme";
 function FormRadioGroup(props) {
     var formLabel = props.formLabel, color = props.color, value = props.value, options = props.options, disabled = props.disabled, tooltip = props.tooltip, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(FormControl, __assign({ sx: { mt: 3 }, component: "fieldset", disabled: disabled }, { children: [tooltip ? (_jsx(Tooltip, __assign({ title: tooltip, placement: "right", disableTouchListener: true }, { children: _jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel }), void 0) }), void 0)) : (_jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel }), void 0)), _jsx(RadioGroup, __assign({ value: value, onChange: function (event) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(FormControl, __assign({ sx: { mt: 3 }, component: "fieldset", disabled: disabled }, { children: [tooltip ? (_jsx(Tooltip, __assign({ title: tooltip, placement: "right", disableTouchListener: true }, { children: _jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel })) }))) : (_jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel }))), _jsx(RadioGroup, __assign({ value: value, onChange: function (event) {
                         onChange(event.target.value);
                     }, sx: {
                         my: 1,
@@ -31,8 +31,8 @@ function FormRadioGroup(props) {
                         }
                     } }, { children: options.map(function (opt) {
                         var _a;
-                        return (_jsx(FormControlLabel, { value: opt.value, control: _jsx(Radio, { color: color || "primary" }, void 0), label: _jsx(Typography, { children: opt.label }, void 0), disabled: ((_a = opt.disabled) !== null && _a !== void 0 ? _a : false) || disabled }, String(opt.value)));
-                    }) }), void 0)] }), void 0) }), void 0));
+                        return (_jsx(FormControlLabel, { value: opt.value, control: _jsx(Radio, { color: color || "primary" }), label: _jsx(Typography, { children: opt.label }), disabled: ((_a = opt.disabled) !== null && _a !== void 0 ? _a : false) || disabled }, String(opt.value)));
+                    }) }))] })) })));
 }
 export default FormRadioGroup;
 export * from "./types";

package/FormSelector/MultipleSelector.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormControlProps } from "@mui/material/FormControl";
 import { MultipleSelectorProps } from "./types";
 declare function MultipleSelector(props: MultipleSelectorProps & FormControlProps): JSX.Element;

package/FormSelector/MultipleSelector.js

@@ -34,7 +34,7 @@ function MultipleSelector(props) {
     var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, tooltip = props.tooltip, _b = props.required, required = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.multiple, multiple = _d === void 0 ? false : _d, _e = props.showHelperText, showHelperText = _e === void 0 ? false : _e, helperText = props.helperText, _f = props.options, options = _f === void 0 ? [] : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "tooltip", "required", "disabled", "multiple", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }), void 0)), _jsx(Select, __assign({ disabled: disabled, required: required, value: value, multiple: true, onChange: function (event) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }))), _jsx(Select, __assign({ disabled: disabled, required: required, value: value, multiple: true, onChange: function (event) {
                             var _a;
                             onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                         }, inputProps: {
@@ -43,6 +43,6 @@ function MultipleSelector(props) {
                         }, label: label, renderValue: multiple ? function (selected) { return selected.join("; "); } : undefined }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
                             var _a = option, label = _a.label, value = _a.value;
                             return (_jsx(MenuItem, __assign({ value: value }, { children: label }), value));
-                        })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }), void 0)) }), void 0), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }, void 0))] }), void 0) }), void 0) }), void 0));
+                        })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
 }
 export default MultipleSelector;

package/FormSelector/SimpleSelector.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormControlProps } from "@mui/material/FormControl";
 import { SimpleSelectorProps } from "./types";
 declare function SimpleSelector(props: SimpleSelectorProps & FormControlProps): JSX.Element;

package/FormSelector/SimpleSelector.js

@@ -34,7 +34,7 @@ function SimpleSelector(props) {
     var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, tooltip = props.tooltip, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.required, required = _c === void 0 ? false : _c, _d = props.showHelperText, showHelperText = _d === void 0 ? false : _d, helperText = props.helperText, _e = props.options, options = _e === void 0 ? [] : _e, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "tooltip", "disabled", "required", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }), void 0)), _jsx(Select, __assign({ value: value, required: required, disabled: disabled, onChange: function (event) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }))), _jsx(Select, __assign({ value: value, required: required, disabled: disabled, onChange: function (event) {
                             var _a;
                             onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                         }, inputProps: {
@@ -43,6 +43,6 @@ function SimpleSelector(props) {
                         }, label: label }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
                             var label = option.label, value = option.value, disabled = option.disabled;
                             return (_jsx(MenuItem, __assign({ value: value, disabled: disabled }, { children: label }), value));
-                        })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }), void 0)) }), void 0), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }, void 0))] }), void 0) }), void 0) }), void 0));
+                        })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
 }
 export default SimpleSelector;

package/HelpCaption/index.js

@@ -20,7 +20,7 @@ function HelpCaption(props) {
     var mainCaption = props.mainCaption, subCaption = props.subCaption, linkUrl = props.linkUrl, _a = props.linkText, linkText = _a === void 0 ? "Watch Demo" : _a, _b = props.linkType, linkType = _b === void 0 ? "WEBPAGE" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions(), videoModalOpen = _c.videoModalOpen, onOpenVideoModal = _c.onOpenVideoModal, onCloseVideoModal = _c.onCloseVideoModal;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ container: true, spacing: 1, direction: subCaption ? "column" : "row" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ align: "left", component: "span" }, { children: mainCaption }), void 0) }), void 0), _jsxs(Grid, __assign({ item: true }, { children: [subCaption && (_jsxs(_Fragment, { children: [_jsx(Typography, __assign({ align: "left", component: "span" }, { children: subCaption }), void 0), "\u00A0"] }, void 0)), linkUrl && (_jsx(Typography, __assign({ onClick: linkType === "WEBPAGE"
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ container: true, spacing: 1, direction: subCaption ? "column" : "row" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ align: "left", component: "span" }, { children: mainCaption })) })), _jsxs(Grid, __assign({ item: true }, { children: [subCaption && (_jsxs(_Fragment, { children: [_jsx(Typography, __assign({ align: "left", component: "span" }, { children: subCaption })), "\u00A0"] })), linkUrl && (_jsx(Typography, __assign({ onClick: linkType === "WEBPAGE"
                                 ? function () {
                                     window.open(linkUrl);
                                 }
@@ -30,6 +30,6 @@ function HelpCaption(props) {
                                     color: theme.palette.primary.dark,
                                     textDecoration: "underline"
                                 }
-                            } }, { children: _jsx("b", { children: linkText }, void 0) }), void 0))] }), void 0), linkUrl && (_jsx(VideoPlayerModal, { open: videoModalOpen, url: linkUrl, onClose: onCloseVideoModal }, void 0))] }), void 0) }), void 0));
+                            } }, { children: _jsx("b", { children: linkText }) })))] })), linkUrl && (_jsx(VideoPlayerModal, { open: videoModalOpen, url: linkUrl, onClose: onCloseVideoModal }))] })) })));
 }
 export default HelpCaption;

package/LoadingModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LoadingModalProps } from "./types";
 declare function LoadingModal(props: LoadingModalProps): JSX.Element;
 export default LoadingModal;

package/LoadingModal/index.js

@@ -24,7 +24,7 @@ function LoadingModal(props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Dialog, __assign({ maxWidth: "xs", open: open, sx: { backgroundColor: "#7A7A7A97" }, PaperProps: { sx: { backgroundColor: "#F2F2F2CF" } }, onClose: function (_, reason) {
                 if (reason === "backdropClick")
                     return;
-            }, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }, void 0), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] }), void 0) }), void 0))] }), void 0), _jsx(Typography, __assign({ variant: "subtitle1", component: "span", sx: { mt: 1 } }, { children: text }), void 0)] }), void 0) }, void 0) }), void 0) }), void 0));
+            }, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] })) })))] })), _jsx(Typography, __assign({ variant: "subtitle1", component: "span", sx: { mt: 1 } }, { children: text }))] })) }) })) })));
 }
 export default LoadingModal;
 export * from "./types";

package/MenuButtonGroup/MenuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuItemProps } from "@mui/material/MenuItem";
 import { ListItemIconProps } from "@mui/material/ListItemIcon";
 export interface ButtonItemProps {

package/MenuButtonGroup/MenuItem.js

@@ -18,6 +18,6 @@ import useCustomTheme from "../useCustomTheme";
 function ButtonMenuItem(props) {
     var buttonText = props.buttonText, buttonIcon = props.buttonIcon, _a = props.disabled, disabled = _a === void 0 ? false : _a, onClick = props.onClick;
     var theme = useCustomTheme();
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }, void 0), _jsx(ListItemText, { primary: buttonText }, void 0)] }), void 0) }), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }), _jsx(ListItemText, { primary: buttonText })] })) })));
 }
 export default ButtonMenuItem;

package/MenuButtonGroup/index.js

@@ -75,7 +75,7 @@ function MenuButtonGroup(props) {
     var onClose = function () {
         setAnchorEl(null);
     };
-    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Button, __assign({ "aria-controls": "customized-menu", "data-nw": "download-button", "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }, void 0), disabled: disabled }, { children: buttonText }), void 0), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Button, __assign({ "aria-controls": "customized-menu", "data-nw": "download-button", "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }), disabled: disabled }, { children: buttonText })), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "center"
                 }, transformOrigin: {
@@ -98,6 +98,6 @@ function MenuButtonGroup(props) {
                                 }
                             });
                         }); } }), buttonText));
-                }) }), void 0)] }), void 0));
+                }) }))] })));
 }
 export default MenuButtonGroup;

package/NumberInput/index.js

@@ -36,6 +36,6 @@ function NumberInput(props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: function () {
                     onCloseTooltip();
                     handleBlur();
-                }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest), void 0) }), void 0) }), void 0));
+                }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest)) })) })));
 }
 export default NumberInput;