@astral/ui 1.16.3 → 1.17.0

package/Notification/NotificationContainer/styled.js

@@ -1,10 +1,19 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToastContainerStyled = void 0;
-var styles_1 = require("../../styles");
-exports.ToastContainerStyled = styles_1.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;
+const styles_1 = require("../../styles");
+exports.ToastContainerStyled = styles_1.styled.div `
+  .notify {
+    min-height: 56px;
+    padding: 0;
+
+    &__container {
+      width: 400px;
+    }
+
+    &__body {
+      margin: 0;
+      padding: 0;
+    }
+  }
+`;

package/Notification/NotificationTemplate/NotificationTemplate.js

@@ -1,34 +1,22 @@
 "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.NotificationTemplate = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var constants_1 = require("../constants");
-var styled_1 = require("./styled");
-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 ? constants_1.DEFAULT_NOTIFICATION_PROPS.filled : _b, _c = _a.actionsDirection, actionsDirection = _c === void 0 ? 'right' : _c;
-    var handleCloseToast = function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../constants");
+const styled_1 = require("./styled");
+const NotificationTemplate = ({ icon, title, closeToast, content, actions, variant, filled = constants_1.DEFAULT_NOTIFICATION_PROPS.filled, actionsDirection = 'right', }) => {
+    const handleCloseToast = () => {
         if (closeToast) {
             closeToast();
         }
     };
-    var Content = (0, react_1.useMemo)(function () {
+    const Content = (0, react_1.useMemo)(() => {
         return (0, jsx_runtime_1.jsx)(styled_1.NotificationContent, { children: content });
     }, [content]);
-    var Actions = (0, react_1.useMemo)(function () {
-        return ((0, jsx_runtime_1.jsx)(styled_1.NotificationActions, __assign({ actionsDirection: actionsDirection }, { children: actions })));
+    const Actions = (0, react_1.useMemo)(() => {
+        return ((0, jsx_runtime_1.jsx)(styled_1.NotificationActions, Object.assign({ actionsDirection: actionsDirection }, { children: actions })));
     }, [actions, actionsDirection]);
-    return ((0, jsx_runtime_1.jsxs)(styled_1.NotificationTemplate, __assign({ variant: variant, filled: filled }, { children: [(0, jsx_runtime_1.jsxs)(styled_1.NotificationWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.NotificationIcon, __assign({ filled: filled }, { children: icon })), (0, jsx_runtime_1.jsxs)(styled_1.NotificationHeader, { children: [(0, jsx_runtime_1.jsx)(styled_1.NotificationTitle, { children: title }), (0, jsx_runtime_1.jsx)(styled_1.NotificationCloseButton, __assign({ filled: filled, onClick: handleCloseToast, color: "primary", variant: "text" }, { children: (0, jsx_runtime_1.jsx)(styled_1.NotificationCloseIcon, { filled: filled }) }))] })] }), content && Content, actions && Actions] })));
+    return ((0, jsx_runtime_1.jsxs)(styled_1.NotificationTemplate, Object.assign({ variant: variant, filled: filled }, { children: [(0, jsx_runtime_1.jsxs)(styled_1.NotificationWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.NotificationIcon, Object.assign({ filled: filled }, { children: icon })), (0, jsx_runtime_1.jsxs)(styled_1.NotificationHeader, { children: [(0, jsx_runtime_1.jsx)(styled_1.NotificationTitle, { children: title }), (0, jsx_runtime_1.jsx)(styled_1.NotificationCloseButton, Object.assign({ filled: filled, onClick: handleCloseToast, color: "primary", variant: "text" }, { children: (0, jsx_runtime_1.jsx)(styled_1.NotificationCloseIcon, { filled: filled }) }))] })] }), content && Content, actions && Actions] })));
 };
 exports.NotificationTemplate = NotificationTemplate;

package/Notification/NotificationTemplate/styled.js

@@ -1,56 +1,56 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationTitle = exports.NotificationCloseButton = exports.NotificationCloseIcon = exports.NotificationHeader = exports.NotificationIcon = exports.NotificationActions = exports.NotificationContent = exports.NotificationWrapper = exports.NotificationTemplate = void 0;
-var icons_1 = require("@astral/icons");
-var IconButton_1 = require("../../IconButton");
-var styles_1 = require("../../styles");
-var Typography_1 = require("../../Typography");
-var utils_1 = require("./utils");
-exports.NotificationTemplate = styles_1.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 (0, utils_1.getNotificationTemplateStyles)(theme, variant, filled);
-});
-exports.NotificationWrapper = styles_1.styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-exports.NotificationContent = styles_1.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);
-});
-exports.NotificationActions = styles_1.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 (0, utils_1.getActionsDirection)(actionsDirection);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2);
-});
-exports.NotificationIcon = styles_1.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);
-});
-exports.NotificationHeader = styles_1.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"])));
+const icons_1 = require("@astral/icons");
+const IconButton_1 = require("../../IconButton");
+const styles_1 = require("../../styles");
+const Typography_1 = require("../../Typography");
+const utils_1 = require("./utils");
+exports.NotificationTemplate = styles_1.styled.section `
+  padding: ${({ theme }) => theme.spacing(4)};
+
+  ${({ theme, variant, filled }) => (0, utils_1.getNotificationTemplateStyles)(theme, variant, filled)}
+`;
+exports.NotificationWrapper = styles_1.styled.div `
+  display: flex;
+  align-items: center;
+`;
+exports.NotificationContent = styles_1.styled.div `
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+exports.NotificationActions = styles_1.styled.footer `
+  display: flex;
+  align-items: center;
+  justify-content: ${({ actionsDirection }) => (0, utils_1.getActionsDirection)(actionsDirection)};
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+exports.NotificationIcon = styles_1.styled.div `
+  display: flex;
+  align-items: center;
+  margin-right: ${({ theme }) => theme.spacing(3)};
+`;
+exports.NotificationHeader = styles_1.styled.header `
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
 exports.NotificationCloseIcon = (0, styles_1.styled)(icons_1.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;
-});
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  color: ${({ theme, filled }) => filled && theme.palette.background.default};
+`;
 exports.NotificationCloseButton = (0, styles_1.styled)(IconButton_1.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';
-});
-exports.NotificationTitle = (0, styles_1.styled)(Typography_1.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;
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  padding: 0;
+
+  &:hover {
+    background-color: ${({ filled }) => filled && 'inherit'};
+  }
+`;
+exports.NotificationTitle = (0, styles_1.styled)(Typography_1.Typography) `
+  flex: 1;
+  margin-right: ${({ theme }) => theme.spacing(1)};
+
+  font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
+`;

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getActionsDirection = void 0;
-var getActionsDirection = function (direction) {
-    var MAP_OF_DIRECTIONS = {
+const getActionsDirection = (direction) => {
+    const MAP_OF_DIRECTIONS = {
         right: 'flex-end',
         left: 'flex-start',
     };

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

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getNotificationTemplateStyles = void 0;
-var getNotificationTemplateStyles = function (theme, variant, filled) {
-    var defaultColors = {
+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/Notification/constants/notificationVariant.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.NOTIFICATION_VARIANT = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var NotificationTemplate_1 = require("../NotificationTemplate");
-var utils_1 = require("../utils");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NotificationTemplate_1 = require("../NotificationTemplate");
+const utils_1 = require("../utils");
 exports.NOTIFICATION_VARIANT = {
-    info: function (options, notifyContent) { return ((0, jsx_runtime_1.jsx)(NotificationTemplate_1.NotificationTemplate, __assign({}, (0, utils_1.notificationTemplatePropsCreator)(options, notifyContent, 'info'), { icon: (0, utils_1.getNotificationIconByVariant)('info', options.filled) }))); },
-    success: function (options, notifyContent) { return ((0, jsx_runtime_1.jsx)(NotificationTemplate_1.NotificationTemplate, __assign({}, (0, utils_1.notificationTemplatePropsCreator)(options, notifyContent, 'success'), { icon: (0, utils_1.getNotificationIconByVariant)('success', options.filled) }))); },
-    warning: function (options, notifyContent) { return ((0, jsx_runtime_1.jsx)(NotificationTemplate_1.NotificationTemplate, __assign({}, (0, utils_1.notificationTemplatePropsCreator)(options, notifyContent, 'warning'), { icon: (0, utils_1.getNotificationIconByVariant)('warning', options.filled) }))); },
-    error: function (options, notifyContent) { return ((0, jsx_runtime_1.jsx)(NotificationTemplate_1.NotificationTemplate, __assign({}, (0, utils_1.notificationTemplatePropsCreator)(options, notifyContent, 'error'), { icon: (0, utils_1.getNotificationIconByVariant)('error', options.filled) }))); },
+    info: (options, notifyContent) => ((0, jsx_runtime_1.jsx)(NotificationTemplate_1.NotificationTemplate, Object.assign({}, (0, utils_1.notificationTemplatePropsCreator)(options, notifyContent, 'info'), { icon: (0, utils_1.getNotificationIconByVariant)('info', options.filled) }))),
+    success: (options, notifyContent) => ((0, jsx_runtime_1.jsx)(NotificationTemplate_1.NotificationTemplate, Object.assign({}, (0, utils_1.notificationTemplatePropsCreator)(options, notifyContent, 'success'), { icon: (0, utils_1.getNotificationIconByVariant)('success', options.filled) }))),
+    warning: (options, notifyContent) => ((0, jsx_runtime_1.jsx)(NotificationTemplate_1.NotificationTemplate, Object.assign({}, (0, utils_1.notificationTemplatePropsCreator)(options, notifyContent, 'warning'), { icon: (0, utils_1.getNotificationIconByVariant)('warning', options.filled) }))),
+    error: (options, notifyContent) => ((0, jsx_runtime_1.jsx)(NotificationTemplate_1.NotificationTemplate, Object.assign({}, (0, utils_1.notificationTemplatePropsCreator)(options, notifyContent, 'error'), { icon: (0, utils_1.getNotificationIconByVariant)('error', options.filled) }))),
 };

package/Notification/constants/positions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NOTIFY_POSITIONS = void 0;
-var react_toastify_1 = require("react-toastify");
+const react_toastify_1 = require("react-toastify");
 exports.NOTIFY_POSITIONS = react_toastify_1.toast.POSITION;

package/Notification/styled.js

@@ -1,34 +1,25 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorNotificationIcon = exports.WarningNotificationIcon = exports.SuccessNotificationIcon = exports.InfoNotificationIcon = void 0;
-var icons_1 = require("@astral/icons");
-var styles_1 = require("../styles");
+const icons_1 = require("@astral/icons");
+const styles_1 = require("../styles");
 exports.InfoNotificationIcon = (0, styles_1.styled)(icons_1.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];
-});
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  color: ${({ theme, filled }) => filled ? theme.palette.background.default : theme.palette.primary[800]};
+`;
 exports.SuccessNotificationIcon = (0, styles_1.styled)(icons_1.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];
-});
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  color: ${({ theme, filled }) => filled ? theme.palette.background.default : theme.palette.green[800]};
+`;
 exports.WarningNotificationIcon = (0, styles_1.styled)(icons_1.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];
-});
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  color: ${({ theme, filled }) => filled ? theme.palette.background.default : theme.palette.yellow[800]};
+`;
 exports.ErrorNotificationIcon = (0, styles_1.styled)(icons_1.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;
+    shouldForwardProp: (prop) => prop !== 'filled',
+}) `
+  color: ${({ theme, filled }) => filled ? theme.palette.background.default : theme.palette.red[800]};
+`;

package/Notification/utils/getNotificationIconByVariant/getNotificationIconByVariant.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getNotificationIconByVariant = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var constants_1 = require("../../constants");
-var styled_1 = require("../../styled");
-var getNotificationIconByVariant = function (variant, filled) {
-    if (filled === void 0) { filled = constants_1.DEFAULT_NOTIFICATION_PROPS.filled; }
-    var mapOfNotificationIcons = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../../constants");
+const styled_1 = require("../../styled");
+const getNotificationIconByVariant = (variant, filled = constants_1.DEFAULT_NOTIFICATION_PROPS.filled) => {
+    const mapOfNotificationIcons = {
         info: (0, jsx_runtime_1.jsx)(styled_1.InfoNotificationIcon, { filled: filled }),
         success: (0, jsx_runtime_1.jsx)(styled_1.SuccessNotificationIcon, { filled: filled }),
         warning: (0, jsx_runtime_1.jsx)(styled_1.WarningNotificationIcon, { filled: filled }),

package/Notification/utils/notificationTemplatePropsCreator/notificationTemplatePropsCreator.js

@@ -1,18 +1,7 @@
 "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.notificationTemplatePropsCreator = void 0;
-var notificationTemplatePropsCreator = function (options, notifyProps, variant) {
-    return __assign(__assign(__assign({}, notifyProps), options), { variant: variant });
+const notificationTemplatePropsCreator = (options, notifyProps, variant) => {
+    return Object.assign(Object.assign(Object.assign({}, notifyProps), options), { variant });
 };
 exports.notificationTemplatePropsCreator = notificationTemplatePropsCreator;

package/OverflowTypography/OverflowTypography.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,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverflowTypography = exports.DEFAULT_ROWS_COUNT = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Tooltip_1 = require("../Tooltip");
-var styles_1 = require("./styles");
-var useOverflowed_1 = require("./hooks/useOverflowed");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Tooltip_1 = require("../Tooltip");
+const styles_1 = require("./styles");
+const useOverflowed_1 = require("./hooks/useOverflowed");
 exports.DEFAULT_ROWS_COUNT = 1;
-exports.OverflowTypography = (0, react_1.forwardRef)(function (_a, forwardedRef) {
-    var tooltipProps = _a.tooltipProps, children = _a.children, _b = _a.rowsCount, rowsCount = _b === void 0 ? exports.DEFAULT_ROWS_COUNT : _b, props = __rest(_a, ["tooltipProps", "children", "rowsCount"]);
-    var _c = (0, useOverflowed_1.useOverflowed)(forwardedRef), ref = _c.ref, isOverflowed = _c.isOverflowed;
-    var typographyProps = __assign(__assign({}, props), { ref: ref, children: children, rowsCount: rowsCount });
+exports.OverflowTypography = (0, react_1.forwardRef)((_a, forwardedRef) => {
+    var { tooltipProps, children, rowsCount = exports.DEFAULT_ROWS_COUNT } = _a, props = __rest(_a, ["tooltipProps", "children", "rowsCount"]);
+    const { ref, isOverflowed } = (0, useOverflowed_1.useOverflowed)(forwardedRef);
+    const typographyProps = Object.assign(Object.assign({}, props), { ref,
+        children,
+        rowsCount });
     if (children && isOverflowed) {
-        return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ title: children, disableInteractive: true }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(styles_1.OverflowTypographyWrapper, __assign({}, typographyProps)) })));
+        return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, Object.assign({ title: children, disableInteractive: true }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(styles_1.OverflowTypographyWrapper, Object.assign({}, typographyProps)) })));
     }
-    return (0, jsx_runtime_1.jsx)(styles_1.OverflowTypographyWrapper, __assign({}, typographyProps));
+    return (0, jsx_runtime_1.jsx)(styles_1.OverflowTypographyWrapper, Object.assign({}, typographyProps));
 });

package/OverflowTypography/hooks/useOverflowed/useOverflowed.js

@@ -1,27 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOverflowed = void 0;
-var react_1 = require("react");
-var lodash_es_1 = require("lodash-es");
-var useOverflowed = function (forwardedRef) {
-    var localRef = (0, react_1.useRef)(null);
-    var ref = forwardedRef && typeof forwardedRef !== 'function'
+const react_1 = require("react");
+const lodash_es_1 = require("lodash-es");
+const useOverflowed = (forwardedRef) => {
+    const localRef = (0, react_1.useRef)(null);
+    const ref = forwardedRef && typeof forwardedRef !== 'function'
         ? forwardedRef
         : localRef;
-    var _a = (0, react_1.useState)(false), isOverflowed = _a[0], setOverflow = _a[1];
-    var handleResize = (0, react_1.useCallback)((0, lodash_es_1.debounce)(function (_a) {
-        var _b = _a[0], target = _b.target, contentRect = _b.contentRect;
-        return setOverflow(contentRect.height < target.scrollHeight);
-    }, 500), []);
-    var resizeObserver = (0, react_1.useMemo)(function () { return new ResizeObserver(handleResize); }, []);
-    (0, react_1.useLayoutEffect)(function () {
+    const [isOverflowed, setOverflow] = (0, react_1.useState)(false);
+    const handleResize = (0, react_1.useCallback)((0, lodash_es_1.debounce)(([{ target, contentRect }]) => setOverflow(contentRect.height < target.scrollHeight), 500), []);
+    const resizeObserver = (0, react_1.useMemo)(() => new ResizeObserver(handleResize), []);
+    (0, react_1.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 };
 };
 exports.useOverflowed = useOverflowed;

package/OverflowTypography/styles.js

@@ -1,16 +1,18 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverflowTypographyWrapper = void 0;
-var styles_1 = require("../styles");
-var Typography_1 = require("../Typography");
+const styles_1 = require("../styles");
+const Typography_1 = require("../Typography");
 exports.OverflowTypographyWrapper = (0, styles_1.styled)(Typography_1.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;
+    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/Pagination/Pagination.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.Pagination = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var material_1 = require("@mui/material");
-var Pagination = function (_a) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Pagination = (_a) => {
     var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)(material_1.Pagination, __assign({ shape: "rounded" }, props));
+    return (0, jsx_runtime_1.jsx)(material_1.Pagination, Object.assign({ shape: "rounded" }, props));
 };
 exports.Pagination = Pagination;

package/Placeholder/Placeholder.js

@@ -1,21 +1,9 @@
 "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.Placeholder = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styles_1 = require("./styles");
-var Placeholder = function (_a) {
-    var title = _a.title, imgSrc = _a.imgSrc, imgAlt = _a.imgAlt, imgWidth = _a.imgWidth, imgHeight = _a.imgHeight, description = _a.description, Actions = _a.Actions;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.PlaceholderRoot, { children: [(0, jsx_runtime_1.jsxs)(styles_1.PlaceholderInnerContainer, { children: [(0, jsx_runtime_1.jsx)(styles_1.PlaceholderImage, { src: imgSrc, alt: imgAlt, width: imgWidth, height: imgHeight }), (0, jsx_runtime_1.jsx)(styles_1.PlaceholderTitle, __assign({ variant: "h4" }, { children: title })), description && ((0, jsx_runtime_1.jsx)(styles_1.PlaceholderDescription, __assign({ variant: "ui" }, { children: description })))] }), Actions && (0, jsx_runtime_1.jsx)(styles_1.PlaceholderActions, { children: Actions })] }));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const Placeholder = ({ title, imgSrc, imgAlt, imgWidth, imgHeight, description, Actions, }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.PlaceholderRoot, { children: [(0, jsx_runtime_1.jsxs)(styles_1.PlaceholderInnerContainer, { children: [(0, jsx_runtime_1.jsx)(styles_1.PlaceholderImage, { src: imgSrc, alt: imgAlt, width: imgWidth, height: imgHeight }), (0, jsx_runtime_1.jsx)(styles_1.PlaceholderTitle, Object.assign({ variant: "h4" }, { children: title })), description && ((0, jsx_runtime_1.jsx)(styles_1.PlaceholderDescription, Object.assign({ variant: "ui" }, { children: description })))] }), Actions && (0, jsx_runtime_1.jsx)(styles_1.PlaceholderActions, { children: Actions })] }));
 };
 exports.Placeholder = Placeholder;