@astral/ui 1.16.2 → 1.17.0

package/Tag/styled.js

@@ -1,47 +1,29 @@
 "use strict";
-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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledTag = void 0;
-var material_1 = require("@mui/material");
-var styles_1 = require("../styles");
-var constants_1 = require("./constants");
-var getShape = function (_a) {
-    var theme = _a.theme, rounded = _a.rounded;
+const material_1 = require("@mui/material");
+const styles_1 = require("../styles");
+const constants_1 = require("./constants");
+const getShape = ({ theme, rounded }) => {
     if (rounded) {
         return '100px';
     }
     return theme.shape.small;
 };
-var getDeleteIconBorderRadius = function (_a) {
-    var theme = _a.theme, rounded = _a.rounded;
+const getDeleteIconBorderRadius = ({ theme, rounded, }) => {
     if (rounded) {
         return '100px';
     }
-    return "0  ".concat(theme.shape.small, "  ").concat(theme.shape.small, " 0");
+    return `0  ${theme.shape.small}  ${theme.shape.small} 0`;
 };
-var getBgColor = function (_a) {
-    var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant, onDelete = _a.onDelete;
+const getBgColor = ({ theme, customColor, customVariant, onDelete, }) => {
     if (onDelete) {
         return theme.palette.grey[100];
     }
     if (customColor === constants_1.TagColors.GREY) {
         return theme.palette.grey[100];
     }
-    var backgroundColorVariants = {
+    const backgroundColorVariants = {
         contained: {
             primary: theme.palette.primary.main,
             error: theme.palette.red[800],
@@ -65,12 +47,11 @@ var getBgColor = function (_a) {
     }
     return theme.palette.background.element;
 };
-var getColor = function (_a) {
-    var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant, onDelete = _a.onDelete;
+const getColor = ({ theme, customColor, customVariant, onDelete, }) => {
     if (onDelete) {
         return theme.palette.grey[900];
     }
-    var textColorVariants = {
+    const textColorVariants = {
         contained: {
             primary: theme.palette.primary.contrastText,
             error: theme.palette.error.contrastText,
@@ -94,16 +75,14 @@ var getColor = function (_a) {
     }
     return theme.palette.text.primary;
 };
-var getTagLabelPadding = function (_a) {
-    var theme = _a.theme, rounded = _a.rounded;
+const getTagLabelPadding = ({ theme, rounded, }) => {
     if (rounded) {
         return theme.spacing(0, 2);
     }
     return theme.spacing(0, 1);
 };
-var getDeleteIconBgColor = function (_a) {
-    var theme = _a.theme, iconState = _a.iconState;
-    var bgColorDeleteIcon = {
+const getDeleteIconBgColor = ({ theme, iconState, }) => {
+    const bgColorDeleteIcon = {
         default: 'transparent',
         hover: theme.palette.red[100],
         active: theme.palette.red[200],
@@ -114,29 +93,74 @@ var getDeleteIconBgColor = function (_a) {
     return 'transparent';
 };
 exports.StyledTag = (0, styles_1.styled)(material_1.Chip, {
-    shouldForwardProp: function (prop) {
-        return prop !== 'customColor' && prop !== 'customVariant' && prop !== 'rounded';
-    },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 20px;\n\n  font-size: 14px;\n\n  background-color: ", ";\n  border-radius: ", ";\n\n  user-select: none;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  .MuiChip-label {\n    padding: ", ";\n\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  }\n\n  .MuiChip-deleteIcon {\n    width: 20px;\n    height: 20px;\n    margin: 0;\n\n    color: ", ";\n\n    background: ", ";\n    border-radius: ", ";\n\n    &:hover {\n      color: ", ";\n\n      background: ", ";\n    }\n\n    &:active {\n      color: ", ";\n\n      background: ", ";\n    }\n  }\n\n  .MuiChip-avatar {\n    width: 16px;\n    height: 16px;\n    margin: 2px;\n  }\n\n  .MuiChip-icon {\n    width: 16px;\n    height: 16px;\n  }\n"], ["\n  height: 20px;\n\n  font-size: 14px;\n\n  background-color: ", ";\n  border-radius: ", ";\n\n  user-select: none;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  .MuiChip-label {\n    padding: ", ";\n\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  }\n\n  .MuiChip-deleteIcon {\n    width: 20px;\n    height: 20px;\n    margin: 0;\n\n    color: ", ";\n\n    background: ", ";\n    border-radius: ", ";\n\n    &:hover {\n      color: ", ";\n\n      background: ", ";\n    }\n\n    &:active {\n      color: ", ";\n\n      background: ", ";\n    }\n  }\n\n  .MuiChip-avatar {\n    width: 16px;\n    height: 16px;\n    margin: 2px;\n  }\n\n  .MuiChip-icon {\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
-    return getBgColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.DEFAULT }));
-}, function (props) { return getShape(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER })); }, function (props) {
-    return getBgColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER }));
-}, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE })); }, function (props) {
-    return getBgColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE }));
-}, function (props) { return getTagLabelPadding(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.DEFAULT })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE })); }, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[800];
-}, function (props) {
-    return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: constants_1.TagStates.DEFAULT }));
-}, function (props) { return getDeleteIconBorderRadius(__assign({}, props)); }, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[800];
-}, function (props) {
-    return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: constants_1.TagStates.HOVER }));
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[800];
-}, function (props) {
-    return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: constants_1.TagStates.ACTIVE }));
-});
-var templateObject_1;
+    shouldForwardProp: (prop) => prop !== 'customColor' && prop !== 'customVariant' && prop !== 'rounded',
+}) `
+  height: 20px;
+
+  font-size: 14px;
+
+  background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { tagState: constants_1.TagStates.DEFAULT }))};
+  border-radius: ${(props) => getShape(Object.assign({}, props))};
+
+  user-select: none;
+
+  &:hover {
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { tagState: constants_1.TagStates.HOVER }))};
+
+    background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { tagState: constants_1.TagStates.HOVER }))};
+  }
+
+  &:active {
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { tagState: constants_1.TagStates.ACTIVE }))};
+
+    background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { tagState: constants_1.TagStates.ACTIVE }))};
+  }
+
+  .MuiChip-label {
+    padding: ${(props) => getTagLabelPadding(Object.assign({}, props))};
+
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { tagState: constants_1.TagStates.DEFAULT }))};
+
+    &:hover {
+      color: ${(props) => getColor(Object.assign(Object.assign({}, props), { tagState: constants_1.TagStates.HOVER }))};
+    }
+
+    &:active {
+      color: ${(props) => getColor(Object.assign(Object.assign({}, props), { tagState: constants_1.TagStates.ACTIVE }))};
+    }
+  }
+
+  .MuiChip-deleteIcon {
+    width: 20px;
+    height: 20px;
+    margin: 0;
+
+    color: ${({ theme }) => theme.palette.grey[800]};
+
+    background: ${(props) => getDeleteIconBgColor(Object.assign(Object.assign({}, props), { iconState: constants_1.TagStates.DEFAULT }))};
+    border-radius: ${(props) => getDeleteIconBorderRadius(Object.assign({}, props))};
+
+    &:hover {
+      color: ${({ theme }) => theme.palette.grey[800]};
+
+      background: ${(props) => getDeleteIconBgColor(Object.assign(Object.assign({}, props), { iconState: constants_1.TagStates.HOVER }))};
+    }
+
+    &:active {
+      color: ${({ theme }) => theme.palette.grey[800]};
+
+      background: ${(props) => getDeleteIconBgColor(Object.assign(Object.assign({}, props), { iconState: constants_1.TagStates.ACTIVE }))};
+    }
+  }
+
+  .MuiChip-avatar {
+    width: 16px;
+    height: 16px;
+    margin: 2px;
+  }
+
+  .MuiChip-icon {
+    width: 16px;
+    height: 16px;
+  }
+`;

package/TextArea/TextArea.js

@@ -1,15 +1,4 @@
 "use strict";
-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)
@@ -23,10 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var TextField_1 = require("../TextField");
-exports.TextArea = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.rows, rows = _b === void 0 ? 7 : _b, props = __rest(_a, ["rows"]);
-    return (0, jsx_runtime_1.jsx)(TextField_1.TextField, __assign({ ref: ref, multiline: true, rows: rows }, props));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TextField_1 = require("../TextField");
+exports.TextArea = (0, react_1.forwardRef)((_a, ref) => {
+    var { rows = 7 } = _a, props = __rest(_a, ["rows"]);
+    return (0, jsx_runtime_1.jsx)(TextField_1.TextField, Object.assign({ ref: ref, multiline: true, rows: rows }, props));
 });

package/TextField/TextField.js

@@ -1,15 +1,4 @@
 "use strict";
-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,30 +15,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var TextField_1 = __importDefault(require("@mui/material/TextField"));
-var FormHelperText_1 = require("../FormHelperText");
-exports.TextField = (0, react_1.forwardRef)(function (props, ref) {
-    var variant = props.variant, success = props.success, error = props.error, colorProp = props.color, helperTextProp = props.helperText, restProps = __rest(props, ["variant", "success", "error", "color", "helperText"]);
-    var color = (0, react_1.useMemo)(function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const FormHelperText_1 = require("../FormHelperText");
+exports.TextField = (0, react_1.forwardRef)((props, ref) => {
+    const { variant, success, error, color: colorProp, helperText: helperTextProp } = props, restProps = __rest(props, ["variant", "success", "error", "color", "helperText"]);
+    const color = (0, react_1.useMemo)(() => {
         if (success) {
             return 'success';
         }
         return undefined;
     }, [success]);
-    var helperText = (0, react_1.useMemo)(function () {
+    const helperText = (0, react_1.useMemo)(() => {
         if (success) {
-            return (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, __assign({ success: true }, { children: helperTextProp }));
+            return (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, Object.assign({ success: true }, { children: helperTextProp }));
         }
         if (error) {
-            return (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, __assign({ error: true }, { children: helperTextProp }));
+            return (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, Object.assign({ error: true }, { children: helperTextProp }));
         }
         if (helperTextProp) {
             return helperTextProp;
         }
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }, [helperTextProp, success, error]);
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, __assign({ ref: ref, variant: "outlined", error: error, color: color, helperText: helperText }, restProps)));
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({ ref: ref, variant: "outlined", error: error, color: color, helperText: helperText }, restProps)));
 });
 exports.default = exports.TextField;

package/ThemeProvider/ThemeProvider.js

@@ -1,23 +1,12 @@
 "use strict";
-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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeProvider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var material_1 = require("@mui/material");
-var react_1 = require("@emotion/react");
-var GlobalStyles_1 = require("../GlobalStyles");
-var ThemeProvider = function (props) {
-    var theme = props.theme, children = props.children;
-    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsxs)(react_1.ThemeProvider, __assign({ theme: theme }, { children: [(0, jsx_runtime_1.jsx)(GlobalStyles_1.GlobalStyles, {}), children] })) })));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("@emotion/react");
+const GlobalStyles_1 = require("../GlobalStyles");
+const ThemeProvider = (props) => {
+    const { theme, children } = props;
+    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, Object.assign({ theme: theme }, { children: (0, jsx_runtime_1.jsxs)(react_1.ThemeProvider, Object.assign({ theme: theme }, { children: [(0, jsx_runtime_1.jsx)(GlobalStyles_1.GlobalStyles, {}), children] })) })));
 };
 exports.ThemeProvider = ThemeProvider;

package/Tooltip/Tooltip.js

@@ -1,15 +1,4 @@
 "use strict";
-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)
@@ -23,14 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_1 = require("./styled");
-var constants_1 = require("./constants");
-exports.Tooltip = (0, react_1.forwardRef)(function (props, ref) {
-    var title = props.title, _a = props.placement, placement = _a === void 0 ? 'top' : _a, _b = props.size, size = _b === void 0 ? constants_1.TooltipSizes.MEDIUM : _b, children = props.children, restProps = __rest(props, ["title", "placement", "size", "children"]);
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_1 = require("./styled");
+const constants_1 = require("./constants");
+exports.Tooltip = (0, react_1.forwardRef)((props, ref) => {
+    const { title, placement = 'top', size = constants_1.TooltipSizes.MEDIUM, children } = props, restProps = __rest(props, ["title", "placement", "size", "children"]);
     if (title) {
-        return ((0, jsx_runtime_1.jsx)(styled_1.StyledTooltip, __assign({ ref: ref, title: title, size: size, placement: placement }, restProps, { children: children })));
+        return ((0, jsx_runtime_1.jsx)(styled_1.StyledTooltip, Object.assign({ ref: ref, title: title, size: size, placement: placement }, restProps, { children: children })));
     }
     return children;
 });

package/Tooltip/styled.js

@@ -1,19 +1,4 @@
 "use strict";
-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)
@@ -27,46 +12,46 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledTooltip = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var material_1 = require("@mui/material");
-var styles_1 = require("../styles");
-var constants_1 = require("./constants");
-exports.StyledTooltip = (0, styles_1.styled)(function (_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return ((0, jsx_runtime_1.jsx)(material_1.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 === constants_1.TooltipSizes.SMALL
-        ? theme.typography.small.fontSize
-        : theme.typography.ui.fontSize;
-}, function (_a) {
-    var size = _a.size, theme = _a.theme;
-    return size === constants_1.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;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("../styles");
+const constants_1 = require("./constants");
+exports.StyledTooltip = (0, styles_1.styled)((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({}, props, { classes: { popper: className } })));
+}) `
+  & .MuiTooltip-tooltip {
+    margin: 0;
+
+    font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
+    font-size: ${({ size, theme }) => size === constants_1.TooltipSizes.SMALL
+    ? theme.typography.small.fontSize
+    : theme.typography.ui.fontSize};
+    line-height: ${({ size, theme }) => size === constants_1.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/Typography/Typography.js

@@ -1,15 +1,4 @@
 "use strict";
-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)
@@ -23,18 +12,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Typography = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var material_1 = require("@mui/material");
-var react_1 = require("react");
-var enums_1 = require("./enums");
-exports.Typography = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, color = _a.color, props = __rest(_a, ["children", "color"]);
-    var typographyColor = (0, react_1.useMemo)(function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const enums_1 = require("./enums");
+exports.Typography = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, color } = _a, props = __rest(_a, ["children", "color"]);
+    const typographyColor = (0, react_1.useMemo)(() => {
         if (typeof color === 'function') {
             return color;
         }
         return (color && enums_1.TypographyColors[color]) || color;
     }, [color]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ ref: ref }, props, { color: typographyColor }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ref: ref }, props, { color: typographyColor }, { children: children })));
 });
 exports.default = exports.Typography;

package/Zoom/Zoom.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Zoom = void 0;
-var material_1 = require("@mui/material");
+const material_1 = require("@mui/material");
 Object.defineProperty(exports, "Zoom", { enumerable: true, get: function () { return material_1.Zoom; } });

package/esm/ActionCell/ActionCell.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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DotsVOutlineMd } from '@astral/icons';
 import { useCallback, useMemo } from 'react';
@@ -17,32 +6,23 @@ import { IconDropdownButton } from '../IconDropdownButton';
 import { MenuItem } from '../MenuItem';
 import { Tooltip } from '../Tooltip';
 import { ActionCellWrapper } from './styles';
-export function ActionCell(_a) {
-    var _b = _a.actions, _c = _b.main, main = _c === void 0 ? [] : _c, _d = _b.secondary, secondary = _d === void 0 ? [] : _d, row = _a.row;
-    var handleActionClick = function (onClick) {
-        return function () {
-            onClick(row);
-        };
+export function ActionCell({ actions: { main = [], secondary = [] }, row, }) {
+    const handleActionClick = (onClick) => () => {
+        onClick(row);
     };
-    var renderMainAction = useCallback(function (action) {
+    const renderMainAction = useCallback((action) => {
         if (action.nested) {
-            var name_1 = action.name, actions = action.actions, icon_1 = action.icon;
-            return (_jsx(Tooltip, __assign({ title: name_1 }, { children: _jsx(IconDropdownButton, __assign({ icon: icon_1, variant: "text" }, { children: actions.map(function (_a) {
-                        var nestedActionName = _a.name, onClick = _a.onClick;
-                        return (_jsx(MenuItem, __assign({ onClick: handleActionClick(onClick) }, { children: nestedActionName }), nestedActionName));
-                    }) })) }), name_1));
+            const { name, actions, icon } = action;
+            return (_jsx(Tooltip, Object.assign({ title: name }, { children: _jsx(IconDropdownButton, Object.assign({ icon: icon, variant: "text" }, { children: actions.map(({ name: nestedActionName, onClick }) => (_jsx(MenuItem, Object.assign({ onClick: handleActionClick(onClick) }, { children: nestedActionName }), nestedActionName))) })) }), name));
         }
-        var onClick = action.onClick, name = action.name, icon = action.icon;
-        return (_jsx(Tooltip, __assign({ title: name }, { children: _jsx(IconButton, __assign({ variant: "text", onClick: handleActionClick(onClick) }, { children: icon })) }), name));
+        const { onClick, name, icon } = action;
+        return (_jsx(Tooltip, Object.assign({ title: name }, { children: _jsx(IconButton, Object.assign({ variant: "text", onClick: handleActionClick(onClick) }, { children: icon })) }), name));
     }, [handleActionClick]);
-    var renderSecondaryActions = useMemo(function () {
+    const renderSecondaryActions = useMemo(() => {
         if (!Boolean(secondary.length)) {
             return null;
         }
-        return (_jsx(IconDropdownButton, __assign({ icon: _jsx(DotsVOutlineMd, {}), variant: "text" }, { children: secondary.map(function (_a) {
-                var name = _a.name, onClick = _a.onClick;
-                return (_jsx(MenuItem, __assign({ onClick: handleActionClick(onClick) }, { children: name }), name));
-            }) })));
+        return (_jsx(IconDropdownButton, Object.assign({ icon: _jsx(DotsVOutlineMd, {}), variant: "text" }, { children: secondary.map(({ name, onClick }) => (_jsx(MenuItem, Object.assign({ onClick: handleActionClick(onClick) }, { children: name }), name))) })));
     }, [secondary, handleActionClick]);
-    return (_jsxs(ActionCellWrapper, __assign({ onClick: function (event) { return event.stopPropagation(); } }, { children: [main.map(function (action) { return renderMainAction(action); }), renderSecondaryActions] })));
+    return (_jsxs(ActionCellWrapper, Object.assign({ onClick: (event) => event.stopPropagation() }, { children: [main.map((action) => renderMainAction(action)), renderSecondaryActions] })));
 }

package/esm/ActionCell/styles.js

@@ -1,7 +1,5 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '../styles';
-export var ActionCellWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var templateObject_1;
+export const ActionCellWrapper = styled.div `
+  display: flex;
+  align-items: center;
+`;

package/esm/Alert/Alert.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)
@@ -27,12 +16,12 @@ import { Typography } from '../Typography';
 import { Grid } from '../Grid';
 import { Collapse } from '../Collapse';
 import { StyledAlert } from './styles';
-export var Alert = function (_a) {
-    var children = _a.children, title = _a.title, _b = _a.closeText, closeText = _b === void 0 ? 'Скрыть' : _b, _c = _a.display, display = _c === void 0 ? true : _c, actions = _a.actions, onClose = _a.onClose, props = __rest(_a, ["children", "title", "closeText", "display", "actions", "onClose"]);
-    return (_jsx(Collapse, __assign({ in: display }, { children: _jsxs(StyledAlert, __assign({}, props, { closeText: closeText, variant: "filled", onClose: onClose, iconMapping: {
+export const Alert = (_a) => {
+    var { children, title, closeText = 'Скрыть', display = true, actions, onClose } = _a, props = __rest(_a, ["children", "title", "closeText", "display", "actions", "onClose"]);
+    return (_jsx(Collapse, Object.assign({ in: display }, { children: _jsxs(StyledAlert, Object.assign({}, props, { closeText: closeText, variant: "filled", onClose: onClose, iconMapping: {
                 info: _jsx(InfoFillMd, {}),
                 error: _jsx(ErrorFillMd, {}),
                 success: _jsx(SuccessFillMd, {}),
                 warning: _jsx(WarningFillMd, {}),
-            } }, { children: [title && (_jsx(AlertTitle, { children: _jsx(Typography, __assign({ variant: "h5" }, { children: title })) })), _jsx(Typography, __assign({ gutterBottom: Boolean(actions) }, { children: children })), _jsx(Grid, __assign({ container: true, spacing: 4, autoFlow: "column", justifyContent: "flex-start" }, { children: actions }))] })) })));
+            } }, { children: [title && (_jsx(AlertTitle, { children: _jsx(Typography, Object.assign({ variant: "h5" }, { children: title })) })), _jsx(Typography, Object.assign({ gutterBottom: Boolean(actions) }, { children: children })), _jsx(Grid, Object.assign({ container: true, spacing: 4, autoFlow: "column", justifyContent: "flex-start" }, { children: actions }))] })) })));
 };