@astral/ui 1.16.2 → 1.17.0

package/esm/Alert/styles.js

@@ -1,20 +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 { Alert } from '@mui/material';
 import { styled } from '../styles';
-export var StyledAlert = styled(Alert)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", ";\n\n  .MuiAlert-message > *:last-child:not(:empty):not(.MuiTypography-root) {\n    padding: ", ";\n  }\n\n  ", " {\n    padding: ", ";\n\n    .MuiAlert-message > *:last-child:not(:empty):not(.MuiTypography-root) {\n      padding: 0;\n    }\n  }\n"], ["\n  padding: ", ";\n\n  .MuiAlert-message > *:last-child:not(:empty):not(.MuiTypography-root) {\n    padding: ", ";\n  }\n\n  ", " {\n    padding: ", ";\n\n    .MuiAlert-message > *:last-child:not(:empty):not(.MuiTypography-root) {\n      padding: 0;\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(3);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(3, 0);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.breakpoints.up('sm');
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2, 4);
-});
-var templateObject_1;
+export const StyledAlert = styled(Alert) `
+  padding: ${({ theme }) => theme.spacing(3)};
+
+  .MuiAlert-message > *:last-child:not(:empty):not(.MuiTypography-root) {
+    padding: ${({ theme }) => theme.spacing(3, 0)};
+  }
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    padding: ${({ theme }) => theme.spacing(2, 4)};
+
+    .MuiAlert-message > *:last-child:not(:empty):not(.MuiTypography-root) {
+      padding: 0;
+    }
+  }
+`;

package/esm/Autocomplete/Autocomplete.js

@@ -1,14 +1,3 @@
-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)
@@ -31,23 +20,23 @@ import { MenuItem } from '../MenuItem';
 import { Checkbox } from '../Checkbox';
 import { OverflowTypography, } from '../OverflowTypography';
 import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, } from './constants';
-export var Autocomplete = function (props) {
-    var multiple = props.multiple, placeholder = props.placeholder, error = props.error, success = props.success, helperText = props.helperText, label = props.label, _a = props.size, size = _a === void 0 ? 'medium' : _a, getOptionLabel = props.getOptionLabel, externalRenderOption = props.renderOption, overflowOption = props.overflowOption, restProps = __rest(props, ["multiple", "placeholder", "error", "success", "helperText", "label", "size", "getOptionLabel", "renderOption", "overflowOption"]);
-    var renderTags = useCallback(function (tags, getTagProps) {
-        return tags.map(function (tag, index) {
-            var title = (getOptionLabel && getOptionLabel(tag)) || '';
-            return (_jsx(Tag, __assign({ deleteIcon: _jsx(CrossSmOutlineSm, {}), color: "grey", label: title }, getTagProps({ index: index }))));
+export const Autocomplete = (props) => {
+    const { multiple, placeholder, error, success, helperText, label, size = 'medium', getOptionLabel, renderOption: externalRenderOption, overflowOption } = props, restProps = __rest(props, ["multiple", "placeholder", "error", "success", "helperText", "label", "size", "getOptionLabel", "renderOption", "overflowOption"]);
+    const renderTags = useCallback((tags, getTagProps) => {
+        return tags.map((tag, index) => {
+            const title = (getOptionLabel && getOptionLabel(tag)) || '';
+            return (_jsx(Tag, Object.assign({ deleteIcon: _jsx(CrossSmOutlineSm, {}), color: "grey", label: title }, getTagProps({ index }))));
         });
     }, [getOptionLabel]);
-    var renderInput = useCallback(function (inputParams) { return (_jsx(TextField, __assign({}, inputParams, { placeholder: placeholder, label: label, success: success, error: error, helperText: helperText, size: size }))); }, [placeholder, label, success, error, helperText, size]);
-    var renderOption = useCallback(function (optionProps, option, optionState) {
+    const renderInput = useCallback((inputParams) => (_jsx(TextField, Object.assign({}, inputParams, { placeholder: placeholder, label: label, success: success, error: error, helperText: helperText, size: size }))), [placeholder, label, success, error, helperText, size]);
+    const renderOption = useCallback((optionProps, option, optionState) => {
         if (externalRenderOption) {
             return externalRenderOption(optionProps, option, optionState);
         }
-        var selected = Boolean(optionProps['aria-selected']);
-        return (_createElement(MenuItem, __assign({}, optionProps, { key: optionProps.id }),
+        const selected = Boolean(optionProps['aria-selected']);
+        return (_createElement(MenuItem, Object.assign({}, optionProps, { key: optionProps.id }),
             multiple && (_jsx(ListItemIcon, { children: _jsx(Checkbox, { checked: selected }) })),
-            _jsx(OverflowTypography, __assign({ rowsCount: DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT }, overflowOption, { children: optionProps.key }))));
+            _jsx(OverflowTypography, Object.assign({ rowsCount: DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT }, overflowOption, { children: optionProps.key }))));
     }, [multiple, externalRenderOption]);
-    return (_jsx(MuiAutocomplete, __assign({}, restProps, { size: size, multiple: multiple, getOptionLabel: getOptionLabel, disableCloseOnSelect: multiple, renderTags: renderTags, renderInput: renderInput, renderOption: renderOption, popupIcon: _jsx(ChevronDOutlineMd, {}), clearIcon: _jsx(CrossSmOutlineSm, {}), componentsProps: { clearIndicator: { disableRipple: true } }, noOptionsText: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })));
+    return (_jsx(MuiAutocomplete, Object.assign({}, restProps, { size: size, multiple: multiple, getOptionLabel: getOptionLabel, disableCloseOnSelect: multiple, renderTags: renderTags, renderInput: renderInput, renderOption: renderOption, popupIcon: _jsx(ChevronDOutlineMd, {}), clearIcon: _jsx(CrossSmOutlineSm, {}), componentsProps: { clearIndicator: { disableRipple: true } }, noOptionsText: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })));
 };

package/esm/Autocomplete/constants.js

@@ -3,4 +3,4 @@ export var AutocompleteSizes;
     AutocompleteSizes["medium"] = "medium";
     AutocompleteSizes["small"] = "small";
 })(AutocompleteSizes || (AutocompleteSizes = {}));
-export var DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
+export const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;

package/esm/BackdropStack/hooks/useBackdropStackToggle/useBackdropStackToggle.js

@@ -4,18 +4,17 @@ import { backdropStackManager, } from '../../services/BackdropStackManager';
 /**
  * @description хук предназначен для быстрого использования backdropStackManager в реакт компонентах, хранит неуправляемый стейт, если вам нужно управлять этим стейтом, воспользуйтесь backdropStackManager в своем компоненте напрямую.
  */
-export var useBackdropStackToggle = function (_a) {
-    var _b = _a === void 0 ? {} : _a, parentId = _b.id;
-    var id = useRef(parentId || nanoid());
-    var pop = backdropStackManager.pop, push = backdropStackManager.push, remove = backdropStackManager.remove;
-    var _c = useState(false), isOpened = _c[0], setOpened = _c[1];
-    var handleOpen = function () {
+export const useBackdropStackToggle = ({ id: parentId, } = {}) => {
+    const id = useRef(parentId || nanoid());
+    const { pop, push, remove } = backdropStackManager;
+    const [isOpened, setOpened] = useState(false);
+    const handleOpen = () => {
         push(id.current);
         setOpened(true);
     };
-    var handleClose = function (_, reason) {
+    const handleClose = (_, reason) => {
         setOpened(!pop(id.current, reason));
     };
-    useEffect(function () { return function () { return remove(id.current); }; }, []);
-    return { isOpened: isOpened, handleOpen: handleOpen, handleClose: handleClose };
+    useEffect(() => () => remove(id.current), []);
+    return { isOpened, handleOpen, handleClose };
 };

package/esm/BackdropStack/services/BackdropStackManager/BackdropStackManager.js

@@ -1,38 +1,36 @@
 import { nanoid } from 'nanoid';
-var BackdropStackManager = /** @class */ (function () {
-    function BackdropStackManager() {
-        var _this = this;
+class BackdropStackManager {
+    constructor() {
         this.stack = [];
         // сохраняем информацию о том какой был предыдущий вызов pop,
         // нужен для предотвращения синхронного закрытия при последовательности 'blur' и 'backdropClick' в рамках одного клика
         this.previousPopInfo = [null, null];
         this.currentPointerId = null;
-        this.checkOn = function (reason) {
-            var _a = _this.previousPopInfo, previousReason = _a[0], previousPointerId = _a[1];
+        this.checkOn = (reason) => {
+            const [previousReason, previousPointerId] = this.previousPopInfo;
             return (reason === 'backdropClick' &&
                 previousReason === 'blur' &&
-                previousPointerId === _this.currentPointerId);
+                previousPointerId === this.currentPointerId);
         };
-        this.remove = function (id) {
-            _this.stack = _this.stack.filter(function (item) { return item !== id; });
+        this.remove = (id) => {
+            this.stack = this.stack.filter((item) => item !== id);
         };
-        this.push = function (id) {
-            _this.stack.push(id);
+        this.push = (id) => {
+            this.stack.push(id);
         };
-        this.pop = function (id, reason) {
-            if (_this.checkOn(reason)) {
+        this.pop = (id, reason) => {
+            if (this.checkOn(reason)) {
                 return false;
             }
-            var lastOpenedElement = _this.stack[_this.stack.length - 1];
+            const lastOpenedElement = this.stack[this.stack.length - 1];
             if (lastOpenedElement === id) {
-                _this.previousPopInfo = [reason, _this.currentPointerId];
-                _this.stack.pop();
+                this.previousPopInfo = [reason, this.currentPointerId];
+                this.stack.pop();
                 return true;
             }
             return false;
         };
-        document === null || document === void 0 ? void 0 : document.addEventListener('pointerdown', function () { return (_this.currentPointerId = nanoid()); });
+        document === null || document === void 0 ? void 0 : document.addEventListener('pointerdown', () => (this.currentPointerId = nanoid()));
     }
-    return BackdropStackManager;
-}());
-export var backdropStackManager = new BackdropStackManager();
+}
+export const backdropStackManager = new BackdropStackManager();

package/esm/Badge/Badge.js

@@ -1,14 +1,3 @@
-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)
@@ -22,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledBadge } from './styled';
-export var Badge = function (_a) {
-    var children = _a.children, color = _a.color, props = __rest(_a, ["children", "color"]);
-    return (_jsx(StyledBadge, __assign({ customColor: color }, props, { max: 99 }, { children: children })));
+export const Badge = (_a) => {
+    var { children, color } = _a, props = __rest(_a, ["children", "color"]);
+    return (_jsx(StyledBadge, Object.assign({ customColor: color }, props, { max: 99 }, { children: children })));
 };

package/esm/Badge/styled.d.ts

@@ -8,23 +8,9 @@ export declare const StyledBadge: import("@emotion/styled").StyledComponent<{
     overlap?: "circular" | "rectangular" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "standard" | "dot" | undefined;
-} & {
-    components?: {
-        Root?: import("react").ElementType<any> | undefined;
-        Badge?: import("react").ElementType<any> | undefined;
-    } | undefined;
-    componentsProps?: {
-        root?: (import("react").HTMLAttributes<HTMLSpanElement> & import("@mui/base").BadgeUnstyledComponentsPropsOverrides) | undefined;
-        badge?: (import("react").HTMLAttributes<HTMLSpanElement> & import("@mui/base").BadgeUnstyledComponentsPropsOverrides) | undefined;
-    } | undefined;
-    badgeContent?: import("react").ReactNode;
-    children?: import("react").ReactNode;
-    invisible?: boolean | undefined;
-    max?: number | undefined;
-    showZero?: boolean | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | "css" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+} & import("@mui/base").BadgeUnstyledOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | "css" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "color" | "components" | "children" | "componentsProps" | "variant" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "invisible" | "anchorOrigin" | "overlap" | "badgeContent" | "max" | "showZero"> & {
+}, "color" | "variant" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "anchorOrigin" | "overlap" | keyof import("@mui/base").BadgeUnstyledOwnProps> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & Omit<BadgeProps, "color"> & {
     customColor: BadgeColor;

package/esm/Badge/styled.js

@@ -1,11 +1,6 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { Badge } from '@mui/material';
 import { styled } from '../styles';
-var getBgColor = function (_a) {
-    var customColor = _a.customColor, theme = _a.theme;
+const getBgColor = ({ customColor, theme }) => {
     if (customColor === 'grey') {
         return theme.palette.grey[300];
     }
@@ -26,8 +21,7 @@ var getBgColor = function (_a) {
     }
     return theme.palette.primary.main;
 };
-var getTextColor = function (_a) {
-    var customColor = _a.customColor, theme = _a.theme;
+const getTextColor = ({ customColor, theme, }) => {
     if (customColor === 'grey') {
         return theme.palette.text.primary;
     }
@@ -48,25 +42,26 @@ var getTextColor = function (_a) {
     }
     return theme.palette.primary.contrastText;
 };
-export var StyledBadge = styled(Badge, {
-    shouldForwardProp: function (prop) { return prop !== 'customColor'; },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiBadge-badge {\n    height: 20px;\n    padding: ", ";\n\n    color: ", ";\n    font-size: ", ";\n    line-height: 20px;\n\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 12px;\n  }\n\n  .MuiBadge-dot {\n    width: 12px;\n    height: 12px;\n\n    border: 2px solid ", ";\n  }\n"], ["\n  .MuiBadge-badge {\n    height: 20px;\n    padding: ", ";\n\n    color: ", ";\n    font-size: ", ";\n    line-height: 20px;\n\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 12px;\n  }\n\n  .MuiBadge-dot {\n    width: 12px;\n    height: 12px;\n\n    border: 2px solid ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(0, 1);
-}, function (_a) {
-    var customColor = _a.customColor, theme = _a.theme;
-    return getTextColor({ customColor: customColor, theme: theme });
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.small.fontSize;
-}, function (_a) {
-    var customColor = _a.customColor, theme = _a.theme;
-    return getBgColor({ customColor: customColor, theme: theme });
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.common.white;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.common.white;
-});
-var templateObject_1;
+export const StyledBadge = styled(Badge, {
+    shouldForwardProp: (prop) => prop !== 'customColor',
+}) `
+  .MuiBadge-badge {
+    height: 20px;
+    padding: ${({ theme }) => theme.spacing(0, 1)};
+
+    color: ${({ customColor, theme }) => getTextColor({ customColor, theme })};
+    font-size: ${({ theme }) => theme.typography.small.fontSize};
+    line-height: 20px;
+
+    background-color: ${({ customColor, theme }) => getBgColor({ customColor, theme })};
+    border: 2px solid ${({ theme }) => theme.palette.common.white};
+    border-radius: 12px;
+  }
+
+  .MuiBadge-dot {
+    width: 12px;
+    height: 12px;
+
+    border: 2px solid ${({ theme }) => theme.palette.common.white};
+  }
+`;

package/esm/Button/Button.js

@@ -1,14 +1,3 @@
-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)
@@ -26,14 +15,14 @@ import { ButtonColors, ButtonVariants } from '../ButtonBase';
 import { CircularProgress } from '../CircularProgress';
 import { CircularProgressColors } from '../CircularProgress/constants';
 import { LoadingButtonWrapper } from './styles';
-export var Button = forwardRef(function (props, ref) {
-    var _a = props.variant, variant = _a === void 0 ? ButtonVariants.Contained : _a, _b = props.color, color = _b === void 0 ? ButtonColors.Primary : _b, restProps = __rest(props, ["variant", "color"]);
-    var loadingIndicatorColor = useMemo(function () {
+export const Button = forwardRef((props, ref) => {
+    const { variant = ButtonVariants.Contained, color = ButtonColors.Primary } = props, restProps = __rest(props, ["variant", "color"]);
+    const loadingIndicatorColor = useMemo(() => {
         if (variant !== ButtonVariants.Contained) {
             return CircularProgressColors.PRIMARY;
         }
         return CircularProgressColors.INVERTED;
     }, [variant]);
-    return (_jsx(LoadingButtonWrapper, __assign({ ref: ref }, restProps, { variant: variant, color: color, loadingIndicator: _jsx(CircularProgress, { color: loadingIndicatorColor, size: "small" }) })));
+    return (_jsx(LoadingButtonWrapper, Object.assign({ ref: ref }, restProps, { variant: variant, color: color, loadingIndicator: _jsx(CircularProgress, { color: loadingIndicatorColor, size: "small" }) })));
 });
 export default Button;

package/esm/Button/styles.js

@@ -1,23 +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 { LoadingButton } from '@mui/lab';
 import { styled } from '../styles';
 import { getButtonHeightMobile, getButtonPaddingMobile, } from '../ButtonBase/styles';
 import { ButtonVariants } from '../ButtonBase';
-export var LoadingButtonWrapper = styled(LoadingButton, {
-    shouldForwardProp: function (prop) {
-        return prop !== 'customColor' && prop !== 'customVariant';
-    },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: ", ";\n  padding: ", ";\n\n  ", " {\n    height: ", ";\n    padding: ", ";\n\n    white-space: nowrap;\n  }\n"], ["\n  min-width: ", ";\n  padding: ", ";\n\n  ", " {\n    height: ", ";\n    padding: ", ";\n\n    white-space: nowrap;\n  }\n"])), function (_a) {
-    var variant = _a.variant;
-    return variant === ButtonVariants.Link ? 'auto' : '';
-}, function (_a) {
-    var variant = _a.variant;
-    return (variant === ButtonVariants.Link ? 0 : '');
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.breakpoints.down('sm');
-}, getButtonHeightMobile, getButtonPaddingMobile);
-var templateObject_1;
+export const LoadingButtonWrapper = styled(LoadingButton, {
+    shouldForwardProp: (prop) => prop !== 'customColor' && prop !== 'customVariant',
+}) `
+  min-width: ${({ variant }) => variant === ButtonVariants.Link ? 'auto' : ''};
+  padding: ${({ variant }) => (variant === ButtonVariants.Link ? 0 : '')};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: ${getButtonHeightMobile};
+    padding: ${getButtonPaddingMobile};
+
+    white-space: nowrap;
+  }
+`;

package/esm/ButtonBase/ButtonBase.js

@@ -1,14 +1,3 @@
-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)
@@ -24,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { ButtonColors, ButtonVariants } from './enums';
 import { ButtonBaseWrapper } from './styles';
-export var ButtonBase = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? ButtonVariants.Contained : _b, _c = _a.color, color = _c === void 0 ? ButtonColors.Primary : _c, props = __rest(_a, ["children", "variant", "color"]);
-    return (_jsx(ButtonBaseWrapper, __assign({ ref: ref }, props, { customColor: color, customVariant: variant }, { children: children })));
+export const ButtonBase = forwardRef((_a, ref) => {
+    var { children, variant = ButtonVariants.Contained, color = ButtonColors.Primary } = _a, props = __rest(_a, ["children", "variant", "color"]);
+    return (_jsx(ButtonBaseWrapper, Object.assign({ ref: ref }, props, { customColor: color, customVariant: variant }, { children: children })));
 });

package/esm/ButtonBase/styles.d.ts

@@ -24,9 +24,9 @@ export declare const getButtonPadding: ({ size, theme, }: ButtonBaseWrapperTheme
 export declare const getDisabledBgColor: ({ theme, customVariant, }: ButtonBaseWrapperThemeProps) => string;
 export declare const getButtonPaddingMobile: ({ size, theme, variant, }: ButtonBaseWrapperThemeProps) => string;
 export declare const getButtonHeightMobile: ({ size, }: ButtonBaseWrapperThemeProps) => string;
-export declare const ButtonBaseWrapper: import("@emotion/styled").StyledComponent<Pick<import("@mui/base/ButtonUnstyled").ButtonUnstyledOwnProps & Omit<any, keyof import("@mui/base/ButtonUnstyled").ButtonUnstyledOwnProps> & {
-    component?: import("react").ElementType<any> | undefined;
-}, string | number | symbol> & import("react").RefAttributes<any> & {
+export declare const ButtonBaseWrapper: import("@emotion/styled").StyledComponent<import("@mui/base/ButtonUnstyled").ButtonUnstyledOwnProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | "css" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/base/ButtonUnstyled").ButtonUnstyledOwnProps> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & Omit<BaseButtonProps, "color" | "variant"> & {
     customColor?: "primary" | "error" | "warning" | "success" | undefined;

package/esm/ButtonBase/styles.js

@@ -1,24 +1,8 @@
-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 ButtonUnstyled, { buttonUnstyledClasses, } from '@mui/base/ButtonUnstyled';
 import { styled } from '../styles';
 import { ButtonSizes, ButtonStates, ButtonVariants } from './enums';
-export var getColor = function (_a) {
-    var theme = _a.theme, customVariant = _a.customVariant, customColor = _a.customColor, buttonState = _a.buttonState, selected = _a.selected;
-    var textColorVariants = {
+export const getColor = ({ theme, customVariant, customColor, buttonState, selected, }) => {
+    const textColorVariants = {
         selected: {
             default: theme.palette.grey['900'],
             hover: theme.palette.grey['700'],
@@ -81,9 +65,8 @@ export var getColor = function (_a) {
     }
     return textColorVariants.link[buttonState];
 };
-export var getBgColor = function (_a) {
-    var selected = _a.selected, customColor = _a.customColor, customVariant = _a.customVariant, buttonState = _a.buttonState, theme = _a.theme;
-    var bgColorVariants = {
+export const getBgColor = ({ selected, customColor, customVariant, buttonState, theme, }) => {
+    const bgColorVariants = {
         selected: {
             default: theme.palette.grey['900'],
             hover: theme.palette.grey['700'],
@@ -164,30 +147,26 @@ export var getBgColor = function (_a) {
     }
     return bgColorVariants.link;
 };
-export var getButtonHeight = function (_a) {
-    var size = _a.size;
+export const getButtonHeight = ({ size, }) => {
     if (size === ButtonSizes.Large) {
         return '40px';
     }
     return '32px';
 };
-export var getButtonPadding = function (_a) {
-    var size = _a.size, theme = _a.theme;
+export const getButtonPadding = ({ size, theme, }) => {
     if (size === ButtonSizes.Large) {
         return theme.spacing(2, 4, 2, 4);
     }
     return theme.spacing(1, 3, 1, 3);
 };
-export var getDisabledBgColor = function (_a) {
-    var theme = _a.theme, customVariant = _a.customVariant;
+export const getDisabledBgColor = ({ theme, customVariant, }) => {
     if (customVariant === ButtonVariants.Link ||
         customVariant === ButtonVariants.Text) {
         return 'transparent';
     }
     return theme.palette.grey['100'];
 };
-export var getButtonPaddingMobile = function (_a) {
-    var size = _a.size, theme = _a.theme, variant = _a.variant;
+export const getButtonPaddingMobile = ({ size, theme, variant, }) => {
     if (variant === ButtonVariants.Link) {
         return '0';
     }
@@ -196,50 +175,66 @@ export var getButtonPaddingMobile = function (_a) {
     }
     return theme.spacing(4, 3);
 };
-export var getButtonHeightMobile = function (_a) {
-    var size = _a.size;
+export const getButtonHeightMobile = ({ size, }) => {
     if (size === ButtonSizes.Small) {
         return '32px';
     }
     return '48px';
 };
-export var ButtonBaseWrapper = styled(ButtonUnstyled, {
-    shouldForwardProp: function (prop) {
-        return prop !== 'customColor' && prop !== 'customVariant';
-    },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ", ";\n  padding: ", ";\n\n  ", " {\n    height: ", ";\n    padding: ", ";\n  }\n\n  color: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-family: Ubuntu, serif;\n\n  background-color: ", ";\n\n  border: none;\n  border-radius: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:focus {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    color: ", ";\n\n    background-color: ", ";\n    cursor: unset;\n  }\n\n  &.", " {\n    outline: 2px solid ", ";\n  }\n"], ["\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ", ";\n  padding: ", ";\n\n  ", " {\n    height: ", ";\n    padding: ", ";\n  }\n\n  color: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-family: Ubuntu, serif;\n\n  background-color: ", ";\n\n  border: none;\n  border-radius: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:focus {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    color: ", ";\n\n    background-color: ", ";\n    cursor: unset;\n  }\n\n  &.", " {\n    outline: 2px solid ", ";\n  }\n"])), getButtonHeight, getButtonPadding, function (_a) {
-    var theme = _a.theme;
-    return theme.breakpoints.down('sm');
-}, getButtonHeightMobile, getButtonPaddingMobile, function (props) {
-    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.Default }));
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.button.fontWeight;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.button.fontSize;
-}, function (props) {
-    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.Default }));
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shape.small;
-}, function (props) {
-    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.Hover }));
-}, function (props) {
-    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.Hover }));
-}, function (props) {
-    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.Focus }));
-}, function (props) {
-    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.Focus }));
-}, function (props) {
-    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.Active }));
-}, function (props) {
-    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.Active }));
-}, buttonUnstyledClasses.disabled, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey['500'];
-}, getDisabledBgColor, buttonUnstyledClasses.focusVisible, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.primary['400'];
-});
-var templateObject_1;
+export const ButtonBaseWrapper = styled(ButtonUnstyled, {
+    shouldForwardProp: (prop) => prop !== 'customColor' && prop !== 'customVariant',
+}) `
+  position: relative;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: ${getButtonHeight};
+  padding: ${getButtonPadding};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: ${getButtonHeightMobile};
+    padding: ${getButtonPaddingMobile};
+  }
+
+  color: ${(props) => getColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Default }))};
+  font-weight: ${({ theme }) => theme.typography.button.fontWeight};
+  font-size: ${({ theme }) => theme.typography.button.fontSize};
+  font-family: Ubuntu, serif;
+
+  background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Default }))};
+
+  border: none;
+  border-radius: ${({ theme }) => theme.shape.small};
+  cursor: pointer;
+
+  &:hover {
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Hover }))};
+
+    background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Hover }))};
+  }
+
+  &:focus {
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Focus }))};
+
+    background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Focus }))};
+  }
+
+  &:active {
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Active }))};
+
+    background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Active }))};
+    outline: none;
+  }
+
+  &.${buttonUnstyledClasses.disabled} {
+    color: ${({ theme }) => theme.palette.grey['500']};
+
+    background-color: ${getDisabledBgColor};
+    cursor: unset;
+  }
+
+  &.${buttonUnstyledClasses.focusVisible} {
+    outline: 2px solid ${({ theme }) => theme.palette.primary['400']};
+  }
+`;