@astral/ui 1.16.3 → 1.17.0

package/esm/Tooltip/styled.js

@@ -1,18 +1,3 @@
-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)
@@ -28,42 +13,42 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '@mui/material';
 import { styled } from '../styles';
 import { TooltipSizes } from './constants';
-export var StyledTooltip = styled(function (_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(Tooltip, __assign({}, props, { classes: { popper: className } })));
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & .MuiTooltip-tooltip {\n    margin: 0;\n\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n  }\n\n  & .MuiTooltip-arrow {\n    color: ", ";\n  }\n\n  &&[data-popper-placement*='top'] .MuiTooltip-tooltip {\n    margin-bottom: ", ";\n  }\n\n  &&[data-popper-placement*='bottom'] .MuiTooltip-tooltip {\n    margin-top: ", ";\n  }\n\n  &&[data-popper-placement*='left'] .MuiTooltip-tooltip {\n    margin-right: ", ";\n  }\n\n  &&[data-popper-placement*='right'] .MuiTooltip-tooltip {\n    margin-left: ", ";\n  }\n"], ["\n  & .MuiTooltip-tooltip {\n    margin: 0;\n\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n  }\n\n  & .MuiTooltip-arrow {\n    color: ", ";\n  }\n\n  &&[data-popper-placement*='top'] .MuiTooltip-tooltip {\n    margin-bottom: ", ";\n  }\n\n  &&[data-popper-placement*='bottom'] .MuiTooltip-tooltip {\n    margin-top: ", ";\n  }\n\n  &&[data-popper-placement*='left'] .MuiTooltip-tooltip {\n    margin-right: ", ";\n  }\n\n  &&[data-popper-placement*='right'] .MuiTooltip-tooltip {\n    margin-left: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.typography.fontWeightRegular;
-}, function (_a) {
-    var size = _a.size, theme = _a.theme;
-    return size === TooltipSizes.SMALL
-        ? theme.typography.small.fontSize
-        : theme.typography.ui.fontSize;
-}, function (_a) {
-    var size = _a.size, theme = _a.theme;
-    return size === TooltipSizes.SMALL
-        ? theme.typography.small.lineHeight
-        : theme.typography.ui.lineHeight;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[900];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shape.small;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[900];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(3);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(3);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2);
-});
-var templateObject_1;
+export const StyledTooltip = styled((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(Tooltip, Object.assign({}, props, { classes: { popper: className } })));
+}) `
+  & .MuiTooltip-tooltip {
+    margin: 0;
+
+    font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
+    font-size: ${({ size, theme }) => size === TooltipSizes.SMALL
+    ? theme.typography.small.fontSize
+    : theme.typography.ui.fontSize};
+    line-height: ${({ size, theme }) => size === TooltipSizes.SMALL
+    ? theme.typography.small.lineHeight
+    : theme.typography.ui.lineHeight};
+
+    background-color: ${({ theme }) => theme.palette.grey[900]};
+    border-radius: ${({ theme }) => theme.shape.small};
+  }
+
+  & .MuiTooltip-arrow {
+    color: ${({ theme }) => theme.palette.grey[900]};
+  }
+
+  &&[data-popper-placement*='top'] .MuiTooltip-tooltip {
+    margin-bottom: ${({ theme }) => theme.spacing(3)};
+  }
+
+  &&[data-popper-placement*='bottom'] .MuiTooltip-tooltip {
+    margin-top: ${({ theme }) => theme.spacing(3)};
+  }
+
+  &&[data-popper-placement*='left'] .MuiTooltip-tooltip {
+    margin-right: ${({ theme }) => theme.spacing(2)};
+  }
+
+  &&[data-popper-placement*='right'] .MuiTooltip-tooltip {
+    margin-left: ${({ theme }) => theme.spacing(2)};
+  }
+`;

package/esm/Typography/Typography.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,14 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography as MuiTypography, } from '@mui/material';
 import { forwardRef, useMemo } from 'react';
 import { TypographyColors } from './enums';
-export var Typography = forwardRef(function (_a, ref) {
-    var children = _a.children, color = _a.color, props = __rest(_a, ["children", "color"]);
-    var typographyColor = useMemo(function () {
+export const Typography = forwardRef((_a, ref) => {
+    var { children, color } = _a, props = __rest(_a, ["children", "color"]);
+    const typographyColor = useMemo(() => {
         if (typeof color === 'function') {
             return color;
         }
         return (color && TypographyColors[color]) || color;
     }, [color]);
-    return (_jsx(MuiTypography, __assign({ ref: ref }, props, { color: typographyColor }, { children: children })));
+    return (_jsx(MuiTypography, Object.assign({ ref: ref }, props, { color: typographyColor }, { children: children })));
 });
 export default Typography;

package/esm/hooks/useMenu.js

@@ -1,9 +1,8 @@
 import { useEffect, useRef, useState, } from 'react';
-export function useMenu(ref) {
-    if (ref === void 0) { ref = null; }
-    var _a = useState(false), open = _a[0], setOpen = _a[1];
-    var anchorRef = useRef(null);
-    useEffect(function () {
+export function useMenu(ref = null) {
+    const [open, setOpen] = useState(false);
+    const anchorRef = useRef(null);
+    useEffect(() => {
         if (!ref) {
             return;
         }
@@ -14,7 +13,7 @@ export function useMenu(ref) {
             ref.current = anchorRef.current;
         }
     }, [ref]);
-    var handleCloseMenu = function () { return setOpen(false); };
-    var handleOpenMenu = function () { return setOpen(true); };
-    return { open: open, anchorRef: anchorRef, handleCloseMenu: handleCloseMenu, handleOpenMenu: handleOpenMenu };
+    const handleCloseMenu = () => setOpen(false);
+    const handleOpenMenu = () => setOpen(true);
+    return { open, anchorRef, handleCloseMenu, handleOpenMenu };
 }

package/esm/theme/baseTheme/baseTheme.js

@@ -7,16 +7,16 @@ import { SPACING } from '../constants';
 import { elevation } from '../elevation';
 import { shape } from '../shape';
 import { defaultBreakpoints } from '../breakpoints';
-export var createTheme = function (params) {
-    var brand = params.brand, options = params.options, fontsUrls = params.fontsUrls, _a = params.breakpoints, breakpoints = _a === void 0 ? defaultBreakpoints : _a;
-    var themeOptions = {
-        typography: typography,
-        breakpoints: breakpoints,
+export const createTheme = (params) => {
+    const { brand, options, fontsUrls, breakpoints = defaultBreakpoints, } = params;
+    const themeOptions = {
+        typography,
+        breakpoints,
         spacing: SPACING,
         palette: getPalette(brand),
         components: getComponents(fontsUrls),
     };
-    var muiTheme = createMuiTheme(merge({}, themeOptions, options));
+    const muiTheme = createMuiTheme(merge({}, themeOptions, options));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return merge(muiTheme, { elevation: elevation, shape: shape });
+    return merge(muiTheme, { elevation, shape });
 };

package/esm/theme/baseTheme/baseTheme.test.js

@@ -1,7 +1,7 @@
 import { Brand } from '../constants';
 import { createTheme } from './baseTheme';
-describe('createTheme', function () {
-    var fontsUrls = {
+describe('createTheme', () => {
+    const fontsUrls = {
         bold: {
             woff: '',
             woff2: '',
@@ -19,19 +19,19 @@ describe('createTheme', function () {
             woff2: '',
         },
     };
-    it('Theme merge done correctly', function () {
-        var extendedTheme = createTheme({
+    it('Theme merge done correctly', () => {
+        const extendedTheme = createTheme({
             brand: Brand.DEFAULT,
-            fontsUrls: fontsUrls,
+            fontsUrls,
             options: {
                 typography: { h1: { lineHeight: 12 } },
             },
         });
         expect(extendedTheme.typography.h1.lineHeight).toBe(12);
     });
-    it('Color should be taken depending on the brand', function () {
-        var theme = createTheme({ brand: Brand.SIGN, fontsUrls: fontsUrls });
-        var expected = {
+    it('Color should be taken depending on the brand', () => {
+        const theme = createTheme({ brand: Brand.SIGN, fontsUrls });
+        const expected = {
             primary: {
                 main: '#376798',
                 dark: '#325D89',
@@ -43,12 +43,12 @@ describe('createTheme', function () {
         };
         expect(theme.palette).toMatchObject(expected);
     });
-    it('Spacing are calculated correctly', function () {
-        var theme = createTheme({ brand: Brand.SIGN, fontsUrls: fontsUrls });
+    it('Spacing are calculated correctly', () => {
+        const theme = createTheme({ brand: Brand.SIGN, fontsUrls });
         expect(theme.spacing(2)).toBe('8px');
     });
-    it('Theme has elevation params', function () {
-        var theme = createTheme({ brand: Brand.SIGN, fontsUrls: fontsUrls });
+    it('Theme has elevation params', () => {
+        const theme = createTheme({ brand: Brand.SIGN, fontsUrls });
         expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;');
     });
 });

package/esm/theme/breakpoints.js

@@ -1,4 +1,4 @@
-export var defaultBreakpoints = {
+export const defaultBreakpoints = {
     values: {
         xs: 0,
         sm: 600,

package/esm/theme/components/MuiAlert.js

@@ -1,7 +1,6 @@
-export var MuiAlert = {
+export const MuiAlert = {
     styleOverrides: {
-        filledSuccess: function (_a) {
-            var theme = _a.theme;
+        filledSuccess({ theme }) {
             return {
                 backgroundColor: theme.palette.success.light,
                 color: theme.palette.text.primary,
@@ -10,8 +9,7 @@ export var MuiAlert = {
                 },
             };
         },
-        filledError: function (_a) {
-            var theme = _a.theme;
+        filledError({ theme }) {
             return {
                 backgroundColor: theme.palette.error.light,
                 color: theme.palette.text.primary,
@@ -20,8 +18,7 @@ export var MuiAlert = {
                 },
             };
         },
-        filledWarning: function (_a) {
-            var theme = _a.theme;
+        filledWarning({ theme }) {
             return {
                 backgroundColor: theme.palette.warning.light,
                 color: theme.palette.text.primary,
@@ -30,8 +27,7 @@ export var MuiAlert = {
                 },
             };
         },
-        filledInfo: function (_a) {
-            var theme = _a.theme;
+        filledInfo({ theme }) {
             return {
                 backgroundColor: theme.palette.primary['100'],
                 color: theme.palette.text.primary,
@@ -42,11 +38,10 @@ export var MuiAlert = {
                 },
             };
         },
-        action: function (_a) {
-            var theme = _a.theme;
+        action({ theme }) {
             return {
                 svg: {
-                    color: "".concat(theme.palette.text.primary, " !important"),
+                    color: `${theme.palette.text.primary} !important`,
                 },
             };
         },

package/esm/theme/components/MuiAutocomplete.js

@@ -1,55 +1,48 @@
 import { AutocompleteSizes } from '../../Autocomplete/constants';
-export var MuiAutocomplete = {
+export const MuiAutocomplete = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 padding: theme.spacing(1),
             };
         },
-        inputRoot: function (_a) {
-            var theme = _a.theme, size = _a.ownerState.size;
+        inputRoot({ theme, ownerState: { size } }) {
             return {
-                paddingTop: "".concat(theme.spacing(1), " !important"),
-                paddingBottom: "".concat(theme.spacing(1), " !important"),
-                paddingLeft: "".concat(theme.spacing(1), " !important"),
+                paddingTop: `${theme.spacing(1)} !important`,
+                paddingBottom: `${theme.spacing(1)} !important`,
+                paddingLeft: `${theme.spacing(1)} !important`,
                 minHeight: size === AutocompleteSizes.small ? '32px' : '40px',
             };
         },
-        input: function (_a) {
-            var theme = _a.theme;
+        input({ theme }) {
             return {
                 padding: '0 !important',
-                paddingLeft: "".concat(theme.spacing(1), " !important"),
+                paddingLeft: `${theme.spacing(1)} !important`,
             };
         },
-        popupIndicator: function (_a) {
-            var theme = _a.theme;
+        popupIndicator({ theme }) {
             return {
                 borderRadius: theme.shape.small,
                 width: 20,
                 height: 20,
             };
         },
-        endAdornment: function () {
+        endAdornment() {
             return {
                 top: 'calc(50% - 11px)',
             };
         },
-        paper: function (_a) {
-            var theme = _a.theme;
+        paper({ theme }) {
             return {
                 marginTop: theme.spacing(2),
             };
         },
-        noOptions: function (_a) {
-            var theme = _a.theme;
+        noOptions({ theme }) {
             return {
                 color: theme.palette.grey['500'],
             };
         },
-        clearIndicator: function (_a) {
-            var theme = _a.theme;
+        clearIndicator({ theme }) {
             return {
                 padding: 0,
                 borderRadius: '50%',

package/esm/theme/components/MuiButton.js

@@ -1,38 +1,37 @@
 import { ButtonStates } from '../../ButtonBase';
 import { getBgColor, getButtonHeight, getButtonPadding, getColor, getDisabledBgColor, } from '../../ButtonBase/styles';
-export var MuiButton = {
+export const MuiButton = {
     defaultProps: {
         disableRipple: true,
     },
     styleOverrides: {
-        root: function (_a) {
-            var ownerState = _a.ownerState, theme = _a.theme;
-            var customVariant = ownerState.variant;
-            var customColor = ownerState.color;
-            var selected = ownerState.selected;
+        root({ ownerState, theme }) {
+            const customVariant = ownerState.variant;
+            const customColor = ownerState.color;
+            const selected = ownerState.selected;
             return {
                 display: 'inline-flex',
                 gap: theme.spacing(1),
                 color: getColor({
-                    selected: selected,
-                    theme: theme,
-                    customVariant: customVariant,
-                    customColor: customColor,
+                    selected,
+                    theme,
+                    customVariant,
+                    customColor,
                     buttonState: ButtonStates.Default,
                 }),
                 backgroundColor: getBgColor({
-                    selected: selected,
-                    customColor: customColor,
-                    customVariant: customVariant,
+                    selected,
+                    customColor,
+                    customVariant,
                     buttonState: ButtonStates.Default,
-                    theme: theme,
+                    theme,
                 }),
                 height: getButtonHeight({
-                    theme: theme,
+                    theme,
                     size: ownerState.size,
                 }),
                 padding: getButtonPadding({
-                    theme: theme,
+                    theme,
                     size: ownerState.size,
                 }),
                 fontWeight: theme.typography.button.fontWeight,
@@ -43,34 +42,34 @@ export var MuiButton = {
                 boxShadow: 'none',
                 '&:hover': {
                     color: getColor({
-                        selected: selected,
-                        theme: theme,
-                        customVariant: customVariant,
-                        customColor: customColor,
+                        selected,
+                        theme,
+                        customVariant,
+                        customColor,
                         buttonState: ButtonStates.Hover,
                     }),
                     backgroundColor: getBgColor({
-                        selected: selected,
-                        customColor: customColor,
-                        customVariant: customVariant,
-                        theme: theme,
+                        selected,
+                        customColor,
+                        customVariant,
+                        theme,
                         buttonState: ButtonStates.Hover,
                     }),
                     boxShadow: 'none',
                 },
                 '&:active': {
                     color: getColor({
-                        selected: selected,
-                        customColor: customColor,
-                        customVariant: customVariant,
-                        theme: theme,
+                        selected,
+                        customColor,
+                        customVariant,
+                        theme,
                         buttonState: ButtonStates.Active,
                     }),
                     backgroundColor: getBgColor({
-                        selected: selected,
-                        customColor: customColor,
-                        customVariant: customVariant,
-                        theme: theme,
+                        selected,
+                        customColor,
+                        customVariant,
+                        theme,
                         buttonState: ButtonStates.Active,
                     }),
                     outline: 'none',
@@ -78,26 +77,26 @@ export var MuiButton = {
                 '&.Mui-disabled': {
                     color: theme.palette.grey['500'],
                     backgroundColor: getDisabledBgColor({
-                        theme: theme,
-                        customVariant: customVariant,
+                        theme,
+                        customVariant,
                     }),
                 },
                 '&.Mui-focusVisible': {
                     color: getColor({
-                        selected: selected,
-                        theme: theme,
-                        customVariant: customVariant,
-                        customColor: customColor,
+                        selected,
+                        theme,
+                        customVariant,
+                        customColor,
                         buttonState: ButtonStates.Focus,
                     }),
                     backgroundColor: getBgColor({
-                        selected: selected,
-                        customColor: customColor,
-                        customVariant: customVariant,
-                        theme: theme,
+                        selected,
+                        customColor,
+                        customVariant,
+                        theme,
                         buttonState: ButtonStates.Focus,
                     }),
-                    outline: "2px solid ".concat(theme.palette.primary['400']),
+                    outline: `2px solid ${theme.palette.primary['400']}`,
                     boxShadow: 'none',
                 },
                 '&.MuiButton-root .MuiButton-startIcon': {

package/esm/theme/components/MuiButtonBase.js

@@ -1,4 +1,4 @@
-export var MuiButtonBase = {
+export const MuiButtonBase = {
     defaultProps: {
         disableRipple: true,
     },

package/esm/theme/components/MuiCircularProgress.js

@@ -1,10 +1,9 @@
-export var MuiCircularProgress = {
+export const MuiCircularProgress = {
     styleOverrides: {
-        root: function (_a) {
-            var ownerState = _a.ownerState, theme = _a.theme;
+        root({ ownerState, theme }) {
             // В данном случае появилась необходимость использования data- атрибута
             // Подробнее: https://github.com/kaluga-astral/frontend/pull/199/files/5b42598b80e5b199e1b1a1298844a51b489e9c5a#r857514116
-            var color = ownerState["data-color"];
+            const { 'data-color': color } = ownerState;
             return {
                 color: color === 'primary'
                     ? theme.palette.grey[900]

package/esm/theme/components/MuiDialog.js

@@ -1,13 +1,11 @@
-export var MuiDialog = {
+export const MuiDialog = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 background: theme.palette.background.modalShadow,
             };
         },
-        paper: function (_a) {
-            var theme = _a.theme;
+        paper({ theme }) {
             return {
                 borderRadius: theme.shape.small,
             };

package/esm/theme/components/MuiDialogActions.js

@@ -1,7 +1,6 @@
-export var MuiDialogActions = {
+export const MuiDialogActions = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root: ({ theme }) => {
             return {
                 padding: theme.spacing(4, 6, 6, 6),
                 '>div': {

package/esm/theme/components/MuiDialogContent.js

@@ -1,7 +1,6 @@
-export var MuiDialogContent = {
+export const MuiDialogContent = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 padding: theme.spacing(0, 6),
             };

package/esm/theme/components/MuiDialogTitle.js

@@ -1,7 +1,6 @@
-export var MuiDialogTitle = {
+export const MuiDialogTitle = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 padding: theme.spacing(6),
                 fontSize: theme.typography.h4.fontSize,

package/esm/theme/components/MuiFormHelperText.js

@@ -1,7 +1,6 @@
-export var MuiFormHelperText = {
+export const MuiFormHelperText = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 display: 'flex',
                 minHeight: theme.typography.small.lineHeight,

package/esm/theme/components/MuiFormLabel.js

@@ -1,6 +1,6 @@
-export var MuiFormLabel = {
+export const MuiFormLabel = {
     styleOverrides: {
-        root: function () {
+        root() {
             return {
                 position: 'relative',
                 transform: 'none',

package/esm/theme/components/MuiInputBase.js

@@ -1,7 +1,6 @@
-export var MuiInputBase = {
+export const MuiInputBase = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 '&.MuiInputBase-colorSuccess + .MuiFormHelperText-root': {
                     color: theme.palette.green[800],

package/esm/theme/components/MuiInputLabel.js

@@ -1,10 +1,9 @@
-export var MuiInputLabel = {
+export const MuiInputLabel = {
     defaultProps: {
         shrink: true,
     },
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 position: 'relative',
                 transform: 'none',

package/esm/theme/components/MuiListItemButton.js

@@ -1,7 +1,6 @@
-export var MuiListItemButton = {
+export const MuiListItemButton = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 '&.Mui-selected': {
                     color: theme.palette.primary[800],