@astral/ui 1.16.3 → 1.18.0

package/esm/SideDialog/styled.js

@@ -1,8 +1,8 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { Drawer } from '@mui/material';
 import { styled } from '../styles';
-export var StyledDrawer = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    width: 30%;\n  }\n  height: 100vh;\n"], ["\n  .MuiPaper-root {\n    width: 30%;\n  }\n  height: 100vh;\n"])));
-var templateObject_1;
+export const StyledDrawer = styled(Drawer) `
+  .MuiPaper-root {
+    width: 30%;
+  }
+  height: 100vh;
+`;

package/esm/SwipeableDrawer/SwipeableDrawer.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, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyledSwipeableDrawer, SwipeableDrawerBody, SwipeableDrawerHeader, SwipeableDrawerPuller, SwipeableDrawerPullerIcon, SwipeableDrawerTitle, } from './styles';
-export var SwipeableDrawer = function (_a) {
-    var drawerBleedingTitle = _a.drawerBleedingTitle, _b = _a.isMountedOnHide, isMountedOnHide = _b === void 0 ? false : _b, drawerBleedingIcon = _a.drawerBleedingIcon, _c = _a.drawerBleedingHeight, drawerBleedingHeight = _c === void 0 ? 56 : _c, children = _a.children, props = __rest(_a, ["drawerBleedingTitle", "isMountedOnHide", "drawerBleedingIcon", "drawerBleedingHeight", "children"]);
-    return (_jsxs(StyledSwipeableDrawer, __assign({}, props, { swipeAreaWidth: drawerBleedingHeight, ModalProps: { keepMounted: isMountedOnHide } }, { children: [_jsxs(SwipeableDrawerHeader, __assign({ drawerBleedingHeight: drawerBleedingHeight }, { children: [_jsx(SwipeableDrawerPuller, { children: drawerBleedingIcon || _jsx(SwipeableDrawerPullerIcon, {}) }), _jsx(SwipeableDrawerTitle, __assign({ noWrap: true }, { children: drawerBleedingTitle }))] })), _jsx(SwipeableDrawerBody, __assign({ drawerBleedingHeight: drawerBleedingHeight }, { children: children }))] })));
+export const SwipeableDrawer = (_a) => {
+    var { drawerBleedingTitle, isMountedOnHide = false, drawerBleedingIcon, drawerBleedingHeight = 56, children } = _a, props = __rest(_a, ["drawerBleedingTitle", "isMountedOnHide", "drawerBleedingIcon", "drawerBleedingHeight", "children"]);
+    return (_jsxs(StyledSwipeableDrawer, Object.assign({}, props, { swipeAreaWidth: drawerBleedingHeight, ModalProps: { keepMounted: isMountedOnHide } }, { children: [_jsxs(SwipeableDrawerHeader, Object.assign({ drawerBleedingHeight: drawerBleedingHeight }, { children: [_jsx(SwipeableDrawerPuller, { children: drawerBleedingIcon || _jsx(SwipeableDrawerPullerIcon, {}) }), _jsx(SwipeableDrawerTitle, Object.assign({ noWrap: true }, { children: drawerBleedingTitle }))] })), _jsx(SwipeableDrawerBody, Object.assign({ drawerBleedingHeight: drawerBleedingHeight }, { children: children }))] })));
 };

package/esm/SwipeableDrawer/styles.js

@@ -1,94 +1,89 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { SwipeableDrawer, Typography, } from '@mui/material';
 import { styled } from '../styles';
 /**
  * @description Вывод высоты шапки компонента.
  */
-var getHeight = function (_a) {
-    var drawerBleedingHeight = _a.drawerBleedingHeight;
-    return "".concat(drawerBleedingHeight, "px");
-};
+const getHeight = ({ drawerBleedingHeight, }) => `${drawerBleedingHeight}px`;
 /**
  * @description Расчет максимальной высоты тела компонента с учетом абсолютно
  * позиционированной шапки, плюс отступ от верха экрана в размер шапки.
  */
-var calcMaxBodyHeight = function (_a) {
-    var drawerBleedingHeight = _a.drawerBleedingHeight;
-    return "calc(100vh - ".concat(drawerBleedingHeight, "px * 2)");
-};
+const calcMaxBodyHeight = ({ drawerBleedingHeight, }) => `calc(100vh - ${drawerBleedingHeight}px * 2)`;
 /**
  * @description Определение плавной анимации полного скрытия компонента.
  * Предусматривает для <SwipeableDrawer keepMounted={false} /> переопределение
  * базового "transition" плавно выводя компонент за рамки видимой области экрана.
  */
-var getUnmountTransform = function (_a) {
-    var open = _a.open, ModalProps = _a.ModalProps;
+const getUnmountTransform = ({ open, ModalProps, }) => {
     return !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.keepMounted) && !open
         ? 'translateY(100vh) !important'
         : 'none';
 };
-export var StyledSwipeableDrawer = styled(SwipeableDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    overflow: visible;\n\n    transform: ", ";\n  }\n\n  .MuiBackdrop-root {\n    background-color: ", ";\n  }\n"], ["\n  .MuiPaper-root {\n    overflow: visible;\n\n    transform: ", ";\n  }\n\n  .MuiBackdrop-root {\n    background-color: ", ";\n  }\n"])), function (props) { return getUnmountTransform(__assign({}, props)); }, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.background.modalShadow;
-});
-export var SwipeableDrawerHeader = styled.header(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: -", ";\n\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: ", ";\n  padding: ", ";\n\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  visibility: visible;\n"], ["\n  position: absolute;\n  top: -", ";\n\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: ", ";\n  padding: ", ";\n\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  visibility: visible;\n"])), function (props) { return getHeight(__assign({}, props)); }, function (props) { return getHeight(__assign({}, props)); }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(6, 6, 3, 6);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.mode === 'light'
-        ? theme.palette.background.default
-        : theme.palette.grey[800];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shape.medium;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shape.medium;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shadows[8];
-});
-export var SwipeableDrawerPuller = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n\n  svg {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n\n  svg {\n    fill: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.mode === 'light'
-        ? theme.palette.grey[900]
-        : theme.palette.grey[300];
-});
-export var SwipeableDrawerPullerIcon = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 14px;\n  height: 2px;\n\n  background-color: ", ";\n  border-radius: ", ";\n"], ["\n  width: 14px;\n  height: 2px;\n\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.mode === 'light'
-        ? theme.palette.grey[900]
-        : theme.palette.grey[300];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shape.small;
-});
-export var SwipeableDrawerTitle = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[700];
-});
-export var SwipeableDrawerBody = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  z-index: ", ";\n\n  height: 100%;\n  max-height: ", ";\n  overflow: auto;\n\n  background-color: ", ";\n"], ["\n  z-index: ", ";\n\n  height: 100%;\n  max-height: ", ";\n  overflow: auto;\n\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.zIndex.mobileStepper;
-}, function (props) { return calcMaxBodyHeight(__assign({}, props)); }, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.mode === 'light'
-        ? theme.palette.background.default
-        : theme.palette.grey[800];
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+export const StyledSwipeableDrawer = styled(SwipeableDrawer) `
+  .MuiPaper-root {
+    overflow: visible;
+
+    transform: ${(props) => getUnmountTransform(Object.assign({}, props))};
+  }
+
+  .MuiBackdrop-root {
+    background-color: ${({ theme }) => theme.palette.background.modalShadow};
+  }
+`;
+export const SwipeableDrawerHeader = styled.header `
+  position: absolute;
+  top: -${(props) => getHeight(Object.assign({}, props))};
+
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: ${(props) => getHeight(Object.assign({}, props))};
+  padding: ${({ theme }) => theme.spacing(6, 6, 3, 6)};
+
+  background-color: ${({ theme }) => theme.palette.mode === 'light'
+    ? theme.palette.background.default
+    : theme.palette.grey[800]};
+  border-top-left-radius: ${({ theme }) => theme.shape.medium};
+  border-top-right-radius: ${({ theme }) => theme.shape.medium};
+  box-shadow: ${({ theme }) => theme.shadows[8]};
+  visibility: visible;
+`;
+export const SwipeableDrawerPuller = styled.div `
+  position: absolute;
+  top: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+
+  svg {
+    fill: ${({ theme }) => theme.palette.mode === 'light'
+    ? theme.palette.grey[900]
+    : theme.palette.grey[300]};
+  }
+`;
+export const SwipeableDrawerPullerIcon = styled.div `
+  width: 14px;
+  height: 2px;
+
+  background-color: ${({ theme }) => theme.palette.mode === 'light'
+    ? theme.palette.grey[900]
+    : theme.palette.grey[300]};
+  border-radius: ${({ theme }) => theme.shape.small};
+`;
+export const SwipeableDrawerTitle = styled(Typography) `
+  color: ${({ theme }) => theme.palette.grey[700]};
+`;
+export const SwipeableDrawerBody = styled.div `
+  z-index: ${({ theme }) => theme.zIndex.mobileStepper};
+
+  height: 100%;
+  max-height: ${(props) => calcMaxBodyHeight(Object.assign({}, props))};
+  overflow: auto;
+
+  background-color: ${({ theme }) => theme.palette.mode === 'light'
+    ? theme.palette.background.default
+    : theme.palette.grey[800]};
+`;

package/esm/Table/Table.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 { Table as MuiTable } from '@mui/material';
-export var Table = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'small' : _b, props = __rest(_a, ["size"]);
-    return _jsx(MuiTable, __assign({ size: size }, props));
+export const Table = (_a) => {
+    var { size = 'small' } = _a, props = __rest(_a, ["size"]);
+    return _jsx(MuiTable, Object.assign({ size: size }, props));
 };

package/esm/Tag/Tag.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -24,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { CrossSmOutlineSm } from '@astral/icons';
 import { StyledTag } from './styled';
-export var Tag = forwardRef(function (_a, ref) {
-    var color = _a.color, variant = _a.variant, deleteIcon = _a.deleteIcon, props = __rest(_a, ["color", "variant", "deleteIcon"]);
-    return (_jsx(StyledTag, __assign({ ref: ref, customColor: color, customVariant: variant }, props, { deleteIcon: deleteIcon ? deleteIcon : _jsx(CrossSmOutlineSm, {}) })));
+export const Tag = forwardRef((_a, ref) => {
+    var { color, variant, deleteIcon } = _a, props = __rest(_a, ["color", "variant", "deleteIcon"]);
+    return (_jsx(StyledTag, Object.assign({ ref: ref, customColor: color, customVariant: variant }, props, { deleteIcon: deleteIcon ? deleteIcon : _jsx(CrossSmOutlineSm, {}) })));
 });

package/esm/Tag/styled.js

@@ -1,44 +1,26 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { Chip } from '@mui/material';
 import { styled } from '../styles';
 import { TagColors, TagStates } from './constants';
-var getShape = function (_a) {
-    var theme = _a.theme, rounded = _a.rounded;
+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 === TagColors.GREY) {
         return theme.palette.grey[100];
     }
-    var backgroundColorVariants = {
+    const backgroundColorVariants = {
         contained: {
             primary: theme.palette.primary.main,
             error: theme.palette.red[800],
@@ -62,12 +44,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,
@@ -91,16 +72,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],
@@ -110,30 +89,75 @@ var getDeleteIconBgColor = function (_a) {
     }
     return 'transparent';
 };
-export var StyledTag = styled(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: TagStates.DEFAULT }));
-}, function (props) { return getShape(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.HOVER })); }, function (props) {
-    return getBgColor(__assign(__assign({}, props), { tagState: TagStates.HOVER }));
-}, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.ACTIVE })); }, function (props) {
-    return getBgColor(__assign(__assign({}, props), { tagState: TagStates.ACTIVE }));
-}, function (props) { return getTagLabelPadding(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.DEFAULT })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.HOVER })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.ACTIVE })); }, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[800];
-}, function (props) {
-    return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: 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: TagStates.HOVER }));
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[800];
-}, function (props) {
-    return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: TagStates.ACTIVE }));
-});
-var templateObject_1;
+export const StyledTag = styled(Chip, {
+    shouldForwardProp: (prop) => prop !== 'customColor' && prop !== 'customVariant' && prop !== 'rounded',
+}) `
+  height: 20px;
+
+  font-size: 14px;
+
+  background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { tagState: TagStates.DEFAULT }))};
+  border-radius: ${(props) => getShape(Object.assign({}, props))};
+
+  user-select: none;
+
+  &:hover {
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { tagState: TagStates.HOVER }))};
+
+    background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { tagState: TagStates.HOVER }))};
+  }
+
+  &:active {
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { tagState: TagStates.ACTIVE }))};
+
+    background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { tagState: TagStates.ACTIVE }))};
+  }
+
+  .MuiChip-label {
+    padding: ${(props) => getTagLabelPadding(Object.assign({}, props))};
+
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { tagState: TagStates.DEFAULT }))};
+
+    &:hover {
+      color: ${(props) => getColor(Object.assign(Object.assign({}, props), { tagState: TagStates.HOVER }))};
+    }
+
+    &:active {
+      color: ${(props) => getColor(Object.assign(Object.assign({}, props), { tagState: 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: 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: TagStates.HOVER }))};
+    }
+
+    &:active {
+      color: ${({ theme }) => theme.palette.grey[800]};
+
+      background: ${(props) => getDeleteIconBgColor(Object.assign(Object.assign({}, props), { iconState: TagStates.ACTIVE }))};
+    }
+  }
+
+  .MuiChip-avatar {
+    width: 16px;
+    height: 16px;
+    margin: 2px;
+  }
+
+  .MuiChip-icon {
+    width: 16px;
+    height: 16px;
+  }
+`;

package/esm/TextArea/TextArea.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)
@@ -23,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { TextField } from '../TextField';
-export var TextArea = forwardRef(function (_a, ref) {
-    var _b = _a.rows, rows = _b === void 0 ? 7 : _b, props = __rest(_a, ["rows"]);
-    return _jsx(TextField, __assign({ ref: ref, multiline: true, rows: rows }, props));
+export const TextArea = forwardRef((_a, ref) => {
+    var { rows = 7 } = _a, props = __rest(_a, ["rows"]);
+    return _jsx(TextField, Object.assign({ ref: ref, multiline: true, rows: rows }, props));
 });

package/esm/TextField/TextField.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -24,26 +13,26 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
 import MuiTextField from '@mui/material/TextField';
 import { FormHelperText } from '../FormHelperText';
-export var TextField = 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 = useMemo(function () {
+export const TextField = forwardRef((props, ref) => {
+    const { variant, success, error, color: colorProp, helperText: helperTextProp } = props, restProps = __rest(props, ["variant", "success", "error", "color", "helperText"]);
+    const color = useMemo(() => {
         if (success) {
             return 'success';
         }
         return undefined;
     }, [success]);
-    var helperText = useMemo(function () {
+    const helperText = useMemo(() => {
         if (success) {
-            return _jsx(FormHelperText, __assign({ success: true }, { children: helperTextProp }));
+            return _jsx(FormHelperText, Object.assign({ success: true }, { children: helperTextProp }));
         }
         if (error) {
-            return _jsx(FormHelperText, __assign({ error: true }, { children: helperTextProp }));
+            return _jsx(FormHelperText, Object.assign({ error: true }, { children: helperTextProp }));
         }
         if (helperTextProp) {
             return helperTextProp;
         }
         return _jsx(_Fragment, {});
     }, [helperTextProp, success, error]);
-    return (_jsx(MuiTextField, __assign({ ref: ref, variant: "outlined", error: error, color: color, helperText: helperText }, restProps)));
+    return (_jsx(MuiTextField, Object.assign({ ref: ref, variant: "outlined", error: error, color: color, helperText: helperText }, restProps)));
 });
 export default TextField;

package/esm/ThemeProvider/ThemeProvider.js

@@ -1,19 +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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ThemeProvider as MuiThemeProvider } from '@mui/material';
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { GlobalStyles } from '../GlobalStyles';
-export var ThemeProvider = function (props) {
-    var theme = props.theme, children = props.children;
-    return (_jsx(MuiThemeProvider, __assign({ theme: theme }, { children: _jsxs(EmotionThemeProvider, __assign({ theme: theme }, { children: [_jsx(GlobalStyles, {}), children] })) })));
+export const ThemeProvider = (props) => {
+    const { theme, children } = props;
+    return (_jsx(MuiThemeProvider, Object.assign({ theme: theme }, { children: _jsxs(EmotionThemeProvider, Object.assign({ theme: theme }, { children: [_jsx(GlobalStyles, {}), children] })) })));
 };

package/esm/Tooltip/Tooltip.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -24,10 +13,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { StyledTooltip } from './styled';
 import { TooltipSizes } from './constants';
-export var Tooltip = forwardRef(function (props, ref) {
-    var title = props.title, _a = props.placement, placement = _a === void 0 ? 'top' : _a, _b = props.size, size = _b === void 0 ? TooltipSizes.MEDIUM : _b, children = props.children, restProps = __rest(props, ["title", "placement", "size", "children"]);
+export const Tooltip = forwardRef((props, ref) => {
+    const { title, placement = 'top', size = TooltipSizes.MEDIUM, children } = props, restProps = __rest(props, ["title", "placement", "size", "children"]);
     if (title) {
-        return (_jsx(StyledTooltip, __assign({ ref: ref, title: title, size: size, placement: placement }, restProps, { children: children })));
+        return (_jsx(StyledTooltip, Object.assign({ ref: ref, title: title, size: size, placement: placement }, restProps, { children: children })));
     }
     return children;
 });