@astral/ui 1.16.2 → 1.17.0

package/esm/NavMenu/NavMenuItem/NavMenuItemButton/styles.js

@@ -1,43 +1,42 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { ChevronDOutlineMd } from '@astral/icons';
 import { styled } from '../../../styles';
 import { ListItemButton } from '../../../ListItemButton';
 import { ListItemIcon } from '../../../ListItemIcon';
 import { ListItemText } from '../../../ListItemText';
-export var NavMenuItemButtonRoot = styled(ListItemButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 40px;\n  padding: ", ";\n\n  border-radius: ", ";\n"], ["\n  height: 40px;\n  padding: ", ";\n\n  border-radius: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shape.medium;
-});
-export var NavMenuItemButtonIcon = styled(ListItemIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: unset;\n"], ["\n  min-width: unset;\n"])));
-export var NavMenuItemButtonText = styled(ListItemText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(4);
-});
-export var NavMenuItemButtonChevron = styled(ChevronDOutlineMd, {
-    shouldForwardProp: function (prop) { return prop !== 'collapsedIn' && prop !== 'opened'; },
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", ";\n  margin-left: auto;\n\n  transform: ", ";\n\n  transition: ", ";\n"], ["\n  width: ", ";\n  margin-left: auto;\n\n  transform: ", ";\n\n  transition: ", ";\n"])), function (_a) {
-    var collapsedIn = _a.collapsedIn;
+export const NavMenuItemButtonRoot = styled(ListItemButton) `
+  height: 40px;
+  padding: ${({ theme }) => theme.spacing(2)};
+
+  border-radius: ${({ theme }) => theme.shape.medium};
+`;
+export const NavMenuItemButtonIcon = styled(ListItemIcon) `
+  min-width: unset;
+`;
+export const NavMenuItemButtonText = styled(ListItemText) `
+  margin-left: ${({ theme }) => theme.spacing(4)};
+`;
+export const NavMenuItemButtonChevron = styled(ChevronDOutlineMd, {
+    shouldForwardProp: (prop) => prop !== 'collapsedIn' && prop !== 'opened',
+}) `
+  width: ${({ collapsedIn }) => {
     if (collapsedIn) {
         return '1em';
     }
     return '0px';
-}, function (_a) {
-    var opened = _a.opened;
+}};
+  margin-left: auto;
+
+  transform: ${({ opened }) => {
     if (opened) {
         return 'rotateZ(180deg)';
     }
     return 'rotateZ(0deg)';
-}, function (_a) {
-    var theme = _a.theme;
+}};
+
+  transition: ${({ theme }) => {
     return theme.transitions.create('transform', {
         easing: theme.transitions.easing.sharp,
         duration: theme.transitions.duration.enteringScreen,
     });
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+}};
+`;

package/esm/NavMenu/NavMenuItem/NavMenuItemList/NavMenuItemList.js

@@ -1,22 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { List } from '@mui/material';
 import { PageDotOutlineMd } from '@astral/icons';
 import { NavMenuItemButton } from '../NavMenuItemButton';
-export var NavMenuItemList = function (props) {
-    var collapsedIn = props.collapsedIn, items = props.items;
-    return (_jsx(List, __assign({ disablePadding: true }, { children: items.map(function (item) {
-            var key = item[0], value = item[1];
+export const NavMenuItemList = (props) => {
+    const { collapsedIn, items } = props;
+    return (_jsx(List, Object.assign({ disablePadding: true }, { children: items.map((item) => {
+            const [key, value] = item;
             return (_jsx("li", { children: _jsx(NavMenuItemButton, { collapsedIn: collapsedIn, selected: value.active, text: value.text, icon: _jsx(PageDotOutlineMd, {}), component: value.component }) }, key));
         }) })));
 };

package/esm/Notification/Notification.js

@@ -1,39 +1,8 @@
-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 { toast } from 'react-toastify';
 import { NOTIFICATION_VARIANT } from './constants';
-export var notify = {
-    info: function (title, options) {
-        return toast(function (_a) {
-            var toastProps = _a.toastProps;
-            return NOTIFICATION_VARIANT.info(__assign(__assign({}, options), { title: title }), toastProps);
-        }, options);
-    },
-    success: function (title, options) {
-        return toast(function (_a) {
-            var toastProps = _a.toastProps;
-            return NOTIFICATION_VARIANT.success(__assign(__assign({}, options), { title: title }), toastProps);
-        }, options);
-    },
-    warning: function (title, options) {
-        return toast(function (_a) {
-            var toastProps = _a.toastProps;
-            return NOTIFICATION_VARIANT.warning(__assign(__assign({}, options), { title: title }), toastProps);
-        });
-    },
-    error: function (title, options) {
-        return toast(function (_a) {
-            var toastProps = _a.toastProps;
-            return NOTIFICATION_VARIANT.error(__assign(__assign({}, options), { title: title }), toastProps);
-        }, options);
-    },
+export const notify = {
+    info: (title, options) => toast(({ toastProps }) => NOTIFICATION_VARIANT.info(Object.assign(Object.assign({}, options), { title }), toastProps), options),
+    success: (title, options) => toast(({ toastProps }) => NOTIFICATION_VARIANT.success(Object.assign(Object.assign({}, options), { title }), toastProps), options),
+    warning: (title, options) => toast(({ toastProps }) => NOTIFICATION_VARIANT.warning(Object.assign(Object.assign({}, options), { title }), toastProps)),
+    error: (title, options) => toast(({ toastProps }) => NOTIFICATION_VARIANT.error(Object.assign(Object.assign({}, options), { title }), toastProps), options),
 };

package/esm/Notification/NotificationContainer/NotificationContainer.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 } from "react/jsx-runtime";
 import { ToastContainer } from 'react-toastify';
 import { injectStyle } from 'react-toastify/dist/inject-style';
@@ -17,6 +6,6 @@ import { ToastContainerStyled } from './styled';
 if (typeof window !== 'undefined') {
     injectStyle();
 }
-export var NotificationContainer = function (props) {
-    return (_jsx(ToastContainerStyled, { children: _jsx(ToastContainer, __assign({ hideProgressBar: true, pauseOnFocusLoss: true, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false }, props, { closeButton: false, bodyClassName: "notify__body", toastClassName: "notify", progressClassName: "notify__progress", className: "notify__container" })) }));
+export const NotificationContainer = (props) => {
+    return (_jsx(ToastContainerStyled, { children: _jsx(ToastContainer, Object.assign({ hideProgressBar: true, pauseOnFocusLoss: true, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false }, props, { closeButton: false, bodyClassName: "notify__body", toastClassName: "notify", progressClassName: "notify__progress", className: "notify__container" })) }));
 };

package/esm/Notification/NotificationContainer/styled.js

@@ -1,7 +1,16 @@
-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 ToastContainerStyled = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .notify {\n    min-height: 56px;\n    padding: 0;\n\n    &__container {\n      width: 400px;\n    }\n\n    &__body {\n      margin: 0;\n      padding: 0;\n    }\n  }\n"], ["\n  .notify {\n    min-height: 56px;\n    padding: 0;\n\n    &__container {\n      width: 400px;\n    }\n\n    &__body {\n      margin: 0;\n      padding: 0;\n    }\n  }\n"])));
-var templateObject_1;
+export const ToastContainerStyled = styled.div `
+  .notify {
+    min-height: 56px;
+    padding: 0;
+
+    &__container {
+      width: 400px;
+    }
+
+    &__body {
+      margin: 0;
+      padding: 0;
+    }
+  }
+`;

package/esm/Notification/NotificationTemplate/NotificationTemplate.js

@@ -1,30 +1,18 @@
-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 { useMemo } from 'react';
 import { DEFAULT_NOTIFICATION_PROPS } from '../constants';
 import { NotificationActions, NotificationCloseButton, NotificationCloseIcon, NotificationContent, NotificationHeader, NotificationIcon, NotificationTitle, NotificationWrapper, NotificationTemplate as StyledNotificationTemplate, } from './styled';
-export var NotificationTemplate = function (_a) {
-    var icon = _a.icon, title = _a.title, closeToast = _a.closeToast, content = _a.content, actions = _a.actions, variant = _a.variant, _b = _a.filled, filled = _b === void 0 ? DEFAULT_NOTIFICATION_PROPS.filled : _b, _c = _a.actionsDirection, actionsDirection = _c === void 0 ? 'right' : _c;
-    var handleCloseToast = function () {
+export const NotificationTemplate = ({ icon, title, closeToast, content, actions, variant, filled = DEFAULT_NOTIFICATION_PROPS.filled, actionsDirection = 'right', }) => {
+    const handleCloseToast = () => {
         if (closeToast) {
             closeToast();
         }
     };
-    var Content = useMemo(function () {
+    const Content = useMemo(() => {
         return _jsx(NotificationContent, { children: content });
     }, [content]);
-    var Actions = useMemo(function () {
-        return (_jsx(NotificationActions, __assign({ actionsDirection: actionsDirection }, { children: actions })));
+    const Actions = useMemo(() => {
+        return (_jsx(NotificationActions, Object.assign({ actionsDirection: actionsDirection }, { children: actions })));
     }, [actions, actionsDirection]);
-    return (_jsxs(StyledNotificationTemplate, __assign({ variant: variant, filled: filled }, { children: [_jsxs(NotificationWrapper, { children: [_jsx(NotificationIcon, __assign({ filled: filled }, { children: icon })), _jsxs(NotificationHeader, { children: [_jsx(NotificationTitle, { children: title }), _jsx(NotificationCloseButton, __assign({ filled: filled, onClick: handleCloseToast, color: "primary", variant: "text" }, { children: _jsx(NotificationCloseIcon, { filled: filled }) }))] })] }), content && Content, actions && Actions] })));
+    return (_jsxs(StyledNotificationTemplate, Object.assign({ variant: variant, filled: filled }, { children: [_jsxs(NotificationWrapper, { children: [_jsx(NotificationIcon, Object.assign({ filled: filled }, { children: icon })), _jsxs(NotificationHeader, { children: [_jsx(NotificationTitle, { children: title }), _jsx(NotificationCloseButton, Object.assign({ filled: filled, onClick: handleCloseToast, color: "primary", variant: "text" }, { children: _jsx(NotificationCloseIcon, { filled: filled }) }))] })] }), content && Content, actions && Actions] })));
 };

package/esm/Notification/NotificationTemplate/styled.js

@@ -1,53 +1,53 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { CrossOutlineSm } from '@astral/icons';
 import { IconButton } from '../../IconButton';
 import { styled } from '../../styles';
 import { Typography } from '../../Typography';
 import { getActionsDirection, getNotificationTemplateStyles } from './utils';
-export var NotificationTemplate = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", ";\n\n  ", "\n"], ["\n  padding: ", ";\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(4);
-}, function (_a) {
-    var theme = _a.theme, variant = _a.variant, filled = _a.filled;
-    return getNotificationTemplateStyles(theme, variant, filled);
-});
-export var NotificationWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-export var NotificationContent = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2);
-});
-export var NotificationActions = styled.footer(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n  margin-top: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n  margin-top: ", ";\n"])), function (_a) {
-    var actionsDirection = _a.actionsDirection;
-    return getActionsDirection(actionsDirection);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2);
-});
-export var NotificationIcon = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(3);
-});
-export var NotificationHeader = styled.header(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
-export var NotificationCloseIcon = styled(CrossOutlineSm, {
-    shouldForwardProp: function (prop) { return prop !== 'filled'; },
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme, filled = _a.filled;
-    return filled && theme.palette.background.default;
-});
-export var NotificationCloseButton = styled(IconButton, {
-    shouldForwardProp: function (prop) { return prop !== 'filled'; },
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 0;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  padding: 0;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var filled = _a.filled;
-    return filled && 'inherit';
-});
-export var NotificationTitle = styled(Typography)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex: 1;\n  margin-right: ", ";\n\n  font-weight: ", ";\n"], ["\n  flex: 1;\n  margin-right: ", ";\n\n  font-weight: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(1);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.fontWeightMedium;
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+export const NotificationTemplate = styled.section `
+  padding: ${({ theme }) => theme.spacing(4)};
+
+  ${({ theme, variant, filled }) => getNotificationTemplateStyles(theme, variant, filled)}
+`;
+export const NotificationWrapper = styled.div `
+  display: flex;
+  align-items: center;
+`;
+export const NotificationContent = styled.div `
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+export const NotificationActions = styled.footer `
+  display: flex;
+  align-items: center;
+  justify-content: ${({ actionsDirection }) => getActionsDirection(actionsDirection)};
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+export const NotificationIcon = styled.div `
+  display: flex;
+  align-items: center;
+  margin-right: ${({ theme }) => theme.spacing(3)};
+`;
+export const NotificationHeader = styled.header `
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+export const NotificationCloseIcon = styled(CrossOutlineSm, {
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  color: ${({ theme, filled }) => filled && theme.palette.background.default};
+`;
+export const NotificationCloseButton = styled(IconButton, {
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  padding: 0;
+
+  &:hover {
+    background-color: ${({ filled }) => filled && 'inherit'};
+  }
+`;
+export const NotificationTitle = styled(Typography) `
+  flex: 1;
+  margin-right: ${({ theme }) => theme.spacing(1)};
+
+  font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
+`;

package/esm/Notification/NotificationTemplate/utils/getActionsDirection/getActionsDirection.js

@@ -1,5 +1,5 @@
-export var getActionsDirection = function (direction) {
-    var MAP_OF_DIRECTIONS = {
+export const getActionsDirection = (direction) => {
+    const MAP_OF_DIRECTIONS = {
         right: 'flex-end',
         left: 'flex-start',
     };

package/esm/Notification/NotificationTemplate/utils/getNotificationTemplateStyles/getNotificationTemplateStyles.js

@@ -1,12 +1,12 @@
-export var getNotificationTemplateStyles = function (theme, variant, filled) {
-    var defaultColors = {
+export const getNotificationTemplateStyles = (theme, variant, filled) => {
+    const defaultColors = {
         color: theme.palette.grey[900],
         background: theme.palette.background.default,
     };
     if (!filled) {
         return defaultColors;
     }
-    var mapOfStyles = {
+    const mapOfStyles = {
         info: {
             color: theme.palette.primary.contrastText,
             background: theme.palette.grey[600],

package/esm/Notification/constants/defaultNotificationProps.js

@@ -1,3 +1,3 @@
-export var DEFAULT_NOTIFICATION_PROPS = {
+export const DEFAULT_NOTIFICATION_PROPS = {
     filled: true,
 };

package/esm/Notification/constants/notificationVariant.js

@@ -1,20 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { NotificationTemplate } from '../NotificationTemplate';
 import { getNotificationIconByVariant, notificationTemplatePropsCreator, } from '../utils';
-export var NOTIFICATION_VARIANT = {
-    info: function (options, notifyContent) { return (_jsx(NotificationTemplate, __assign({}, notificationTemplatePropsCreator(options, notifyContent, 'info'), { icon: getNotificationIconByVariant('info', options.filled) }))); },
-    success: function (options, notifyContent) { return (_jsx(NotificationTemplate, __assign({}, notificationTemplatePropsCreator(options, notifyContent, 'success'), { icon: getNotificationIconByVariant('success', options.filled) }))); },
-    warning: function (options, notifyContent) { return (_jsx(NotificationTemplate, __assign({}, notificationTemplatePropsCreator(options, notifyContent, 'warning'), { icon: getNotificationIconByVariant('warning', options.filled) }))); },
-    error: function (options, notifyContent) { return (_jsx(NotificationTemplate, __assign({}, notificationTemplatePropsCreator(options, notifyContent, 'error'), { icon: getNotificationIconByVariant('error', options.filled) }))); },
+export const NOTIFICATION_VARIANT = {
+    info: (options, notifyContent) => (_jsx(NotificationTemplate, Object.assign({}, notificationTemplatePropsCreator(options, notifyContent, 'info'), { icon: getNotificationIconByVariant('info', options.filled) }))),
+    success: (options, notifyContent) => (_jsx(NotificationTemplate, Object.assign({}, notificationTemplatePropsCreator(options, notifyContent, 'success'), { icon: getNotificationIconByVariant('success', options.filled) }))),
+    warning: (options, notifyContent) => (_jsx(NotificationTemplate, Object.assign({}, notificationTemplatePropsCreator(options, notifyContent, 'warning'), { icon: getNotificationIconByVariant('warning', options.filled) }))),
+    error: (options, notifyContent) => (_jsx(NotificationTemplate, Object.assign({}, notificationTemplatePropsCreator(options, notifyContent, 'error'), { icon: getNotificationIconByVariant('error', options.filled) }))),
 };

package/esm/Notification/constants/positions.js

@@ -1,2 +1,2 @@
 import { toast } from 'react-toastify';
-export var NOTIFY_POSITIONS = toast.POSITION;
+export const NOTIFY_POSITIONS = toast.POSITION;

package/esm/Notification/styled.js

@@ -1,31 +1,22 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { ErrorFillMd, InfoFillMd, SuccessFillMd, WarningFillMd, } from '@astral/icons';
 import { styled } from '../styles';
-export var InfoNotificationIcon = styled(InfoFillMd, {
-    shouldForwardProp: function (prop) { return prop !== 'filled'; },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme, filled = _a.filled;
-    return filled ? theme.palette.background.default : theme.palette.primary[800];
-});
-export var SuccessNotificationIcon = styled(SuccessFillMd, {
-    shouldForwardProp: function (prop) { return prop !== 'filled'; },
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme, filled = _a.filled;
-    return filled ? theme.palette.background.default : theme.palette.green[800];
-});
-export var WarningNotificationIcon = styled(WarningFillMd, {
-    shouldForwardProp: function (prop) { return prop !== 'filled'; },
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme, filled = _a.filled;
-    return filled ? theme.palette.background.default : theme.palette.yellow[800];
-});
-export var ErrorNotificationIcon = styled(ErrorFillMd, {
-    shouldForwardProp: function (prop) { return prop !== 'filled'; },
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme, filled = _a.filled;
-    return filled ? theme.palette.background.default : theme.palette.red[800];
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+export const InfoNotificationIcon = styled(InfoFillMd, {
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  color: ${({ theme, filled }) => filled ? theme.palette.background.default : theme.palette.primary[800]};
+`;
+export const SuccessNotificationIcon = styled(SuccessFillMd, {
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  color: ${({ theme, filled }) => filled ? theme.palette.background.default : theme.palette.green[800]};
+`;
+export const WarningNotificationIcon = styled(WarningFillMd, {
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  color: ${({ theme, filled }) => filled ? theme.palette.background.default : theme.palette.yellow[800]};
+`;
+export const ErrorNotificationIcon = styled(ErrorFillMd, {
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  color: ${({ theme, filled }) => filled ? theme.palette.background.default : theme.palette.red[800]};
+`;

package/esm/Notification/utils/getNotificationIconByVariant/getNotificationIconByVariant.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DEFAULT_NOTIFICATION_PROPS } from '../../constants';
 import { ErrorNotificationIcon, InfoNotificationIcon, SuccessNotificationIcon, WarningNotificationIcon, } from '../../styled';
-export var getNotificationIconByVariant = function (variant, filled) {
-    if (filled === void 0) { filled = DEFAULT_NOTIFICATION_PROPS.filled; }
-    var mapOfNotificationIcons = {
+export const getNotificationIconByVariant = (variant, filled = DEFAULT_NOTIFICATION_PROPS.filled) => {
+    const mapOfNotificationIcons = {
         info: _jsx(InfoNotificationIcon, { filled: filled }),
         success: _jsx(SuccessNotificationIcon, { filled: filled }),
         warning: _jsx(WarningNotificationIcon, { filled: filled }),

package/esm/Notification/utils/notificationTemplatePropsCreator/notificationTemplatePropsCreator.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);
-};
-export var notificationTemplatePropsCreator = function (options, notifyProps, variant) {
-    return __assign(__assign(__assign({}, notifyProps), options), { variant: variant });
+export const notificationTemplatePropsCreator = (options, notifyProps, variant) => {
+    return Object.assign(Object.assign(Object.assign({}, notifyProps), options), { variant });
 };

package/esm/OverflowTypography/OverflowTypography.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)
@@ -25,13 +14,15 @@ import { forwardRef } from 'react';
 import { Tooltip } from '../Tooltip';
 import { OverflowTypographyWrapper } from './styles';
 import { useOverflowed } from './hooks/useOverflowed';
-export var DEFAULT_ROWS_COUNT = 1;
-export var OverflowTypography = forwardRef(function (_a, forwardedRef) {
-    var tooltipProps = _a.tooltipProps, children = _a.children, _b = _a.rowsCount, rowsCount = _b === void 0 ? DEFAULT_ROWS_COUNT : _b, props = __rest(_a, ["tooltipProps", "children", "rowsCount"]);
-    var _c = useOverflowed(forwardedRef), ref = _c.ref, isOverflowed = _c.isOverflowed;
-    var typographyProps = __assign(__assign({}, props), { ref: ref, children: children, rowsCount: rowsCount });
+export const DEFAULT_ROWS_COUNT = 1;
+export const OverflowTypography = forwardRef((_a, forwardedRef) => {
+    var { tooltipProps, children, rowsCount = DEFAULT_ROWS_COUNT } = _a, props = __rest(_a, ["tooltipProps", "children", "rowsCount"]);
+    const { ref, isOverflowed } = useOverflowed(forwardedRef);
+    const typographyProps = Object.assign(Object.assign({}, props), { ref,
+        children,
+        rowsCount });
     if (children && isOverflowed) {
-        return (_jsx(Tooltip, __assign({ title: children, disableInteractive: true }, tooltipProps, { children: _jsx(OverflowTypographyWrapper, __assign({}, typographyProps)) })));
+        return (_jsx(Tooltip, Object.assign({ title: children, disableInteractive: true }, tooltipProps, { children: _jsx(OverflowTypographyWrapper, Object.assign({}, typographyProps)) })));
     }
-    return _jsx(OverflowTypographyWrapper, __assign({}, typographyProps));
+    return _jsx(OverflowTypographyWrapper, Object.assign({}, typographyProps));
 });

package/esm/OverflowTypography/hooks/useOverflowed/useOverflowed.js

@@ -1,23 +1,20 @@
 import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { debounce } from 'lodash-es';
-export var useOverflowed = function (forwardedRef) {
-    var localRef = useRef(null);
-    var ref = forwardedRef && typeof forwardedRef !== 'function'
+export const useOverflowed = (forwardedRef) => {
+    const localRef = useRef(null);
+    const ref = forwardedRef && typeof forwardedRef !== 'function'
         ? forwardedRef
         : localRef;
-    var _a = useState(false), isOverflowed = _a[0], setOverflow = _a[1];
-    var handleResize = useCallback(debounce(function (_a) {
-        var _b = _a[0], target = _b.target, contentRect = _b.contentRect;
-        return setOverflow(contentRect.height < target.scrollHeight);
-    }, 500), []);
-    var resizeObserver = useMemo(function () { return new ResizeObserver(handleResize); }, []);
-    useLayoutEffect(function () {
+    const [isOverflowed, setOverflow] = useState(false);
+    const handleResize = useCallback(debounce(([{ target, contentRect }]) => setOverflow(contentRect.height < target.scrollHeight), 500), []);
+    const resizeObserver = useMemo(() => new ResizeObserver(handleResize), []);
+    useLayoutEffect(() => {
         if (ref === null || ref === void 0 ? void 0 : ref.current) {
-            var node_1 = ref.current;
-            resizeObserver.observe(node_1);
-            return function () { return resizeObserver.unobserve(node_1); };
+            const node = ref.current;
+            resizeObserver.observe(node);
+            return () => resizeObserver.unobserve(node);
         }
         return;
     }, [ref.current]);
-    return { isOverflowed: isOverflowed, ref: ref };
+    return { isOverflowed, ref };
 };

package/esm/OverflowTypography/styles.js

@@ -1,13 +1,15 @@
-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';
 import { Typography } from '../Typography';
-export var OverflowTypographyWrapper = styled(Typography, {
-    shouldForwardProp: function (name) { return name !== 'rowsCount'; },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* stylelint-disable-next-line */\n  display: -webkit-box;\n  max-width: 100%;\n  overflow: hidden;\n\n  white-space: initial;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: vertical;\n"], ["\n  /* stylelint-disable-next-line */\n  display: -webkit-box;\n  max-width: 100%;\n  overflow: hidden;\n\n  white-space: initial;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: vertical;\n"])), function (_a) {
-    var rowsCount = _a.rowsCount;
-    return rowsCount;
-});
-var templateObject_1;
+export const OverflowTypographyWrapper = styled(Typography, {
+    shouldForwardProp: (name) => name !== 'rowsCount',
+}) `
+  /* stylelint-disable-next-line */
+  display: -webkit-box;
+  max-width: 100%;
+  overflow: hidden;
+
+  white-space: initial;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: ${({ rowsCount }) => rowsCount};
+  -webkit-box-orient: vertical;
+`;

package/esm/Pagination/Pagination.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 { Pagination as MuiPagination } from '@mui/material';
-export var Pagination = function (_a) {
+export const Pagination = (_a) => {
     var props = __rest(_a, []);
-    return _jsx(MuiPagination, __assign({ shape: "rounded" }, props));
+    return _jsx(MuiPagination, Object.assign({ shape: "rounded" }, props));
 };