@astral/ui 0.8.1 → 0.10.0

package/Tag/styled.js

@@ -114,18 +114,18 @@ exports.StyledTag = (0, styles_1.styled)(material_1.Chip, {
     shouldForwardProp: function (prop) {
         return prop !== 'customColor' && prop !== 'customVariant' && prop !== 'rounded';
     },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  user-select: none;\n  font-size: 14px;\n  height: 20px;\n  border-radius: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .MuiChip-label {\n    padding: ", ";\n\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n    &:active {\n      color: ", ";\n    }\n  }\n  .MuiChip-deleteIcon {\n    margin: 0;\n    width: 20px;\n    height: 20px;\n    border-radius: ", ";\n    color: ", ";\n    background: ", ";\n\n    &:hover {\n      color: ", ";\n      background: ", ";\n    }\n    &:active {\n      color: ", ";\n      background: ", ";\n    }\n  }\n  .MuiChip-avatar {\n    margin: 2px;\n    width: 16px;\n    height: 16px;\n  }\n  .MuiChip-icon {\n    width: 16px;\n    height: 16px;\n  }\n"], ["\n  user-select: none;\n  font-size: 14px;\n  height: 20px;\n  border-radius: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .MuiChip-label {\n    padding: ", ";\n\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n    &:active {\n      color: ", ";\n    }\n  }\n  .MuiChip-deleteIcon {\n    margin: 0;\n    width: 20px;\n    height: 20px;\n    border-radius: ", ";\n    color: ", ";\n    background: ", ";\n\n    &:hover {\n      color: ", ";\n      background: ", ";\n    }\n    &:active {\n      color: ", ";\n      background: ", ";\n    }\n  }\n  .MuiChip-avatar {\n    margin: 2px;\n    width: 16px;\n    height: 16px;\n  }\n  .MuiChip-icon {\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) { return getShape(__assign({}, props)); }, function (props) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 20px;\n\n  font-size: 14px;\n\n  background-color: ", ";\n  border-radius: ", ";\n\n  user-select: none;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  .MuiChip-label {\n    padding: ", ";\n\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  }\n\n  .MuiChip-deleteIcon {\n    width: 20px;\n    height: 20px;\n    margin: 0;\n\n    color: ", ";\n\n    background: ", ";\n    border-radius: ", ";\n\n    &:hover {\n      color: ", ";\n\n      background: ", ";\n    }\n\n    &:active {\n      color: ", ";\n\n      background: ", ";\n    }\n  }\n\n  .MuiChip-avatar {\n    width: 16px;\n    height: 16px;\n    margin: 2px;\n  }\n\n  .MuiChip-icon {\n    width: 16px;\n    height: 16px;\n  }\n"], ["\n  height: 20px;\n\n  font-size: 14px;\n\n  background-color: ", ";\n  border-radius: ", ";\n\n  user-select: none;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  .MuiChip-label {\n    padding: ", ";\n\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  }\n\n  .MuiChip-deleteIcon {\n    width: 20px;\n    height: 20px;\n    margin: 0;\n\n    color: ", ";\n\n    background: ", ";\n    border-radius: ", ";\n\n    &:hover {\n      color: ", ";\n\n      background: ", ";\n    }\n\n    &:active {\n      color: ", ";\n\n      background: ", ";\n    }\n  }\n\n  .MuiChip-avatar {\n    width: 16px;\n    height: 16px;\n    margin: 2px;\n  }\n\n  .MuiChip-icon {\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
     return getBgColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.DEFAULT }));
-}, function (props) {
+}, function (props) { return getShape(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER })); }, function (props) {
     return getBgColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER }));
-}, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER })); }, function (props) {
+}, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE })); }, function (props) {
     return getBgColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE }));
-}, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE })); }, function (props) { return getTagLabelPadding(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.DEFAULT })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE })); }, function (props) { return getDeleteIconBorderRadius(__assign({}, props)); }, function (_a) {
+}, function (props) { return getTagLabelPadding(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.DEFAULT })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE })); }, function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[800];
 }, function (props) {
     return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: constants_1.TagStates.DEFAULT }));
-}, function (_a) {
+}, function (props) { return getDeleteIconBorderRadius(__assign({}, props)); }, function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[800];
 }, function (props) {

package/Tooltip/styled.js

@@ -34,12 +34,9 @@ var constants_1 = require("./constants");
 exports.StyledTooltip = (0, styles_1.styled)(function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
     return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, __assign({}, props, { classes: { popper: className } }), void 0));
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & .MuiTooltip-tooltip {\n    margin: 0;\n    background-color: ", ";\n    border-radius: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n  }\n\n  & .MuiTooltip-arrow {\n    color: ", ";\n  }\n\n  &&[data-popper-placement*='top'] .MuiTooltip-tooltip {\n    margin-bottom: ", ";\n  }\n\n  &&[data-popper-placement*='bottom'] .MuiTooltip-tooltip {\n    margin-top: ", ";\n  }\n\n  &&[data-popper-placement*='left'] .MuiTooltip-tooltip {\n    margin-right: ", ";\n  }\n\n  &&[data-popper-placement*='right'] .MuiTooltip-tooltip {\n    margin-left: ", ";\n  }\n"], ["\n  & .MuiTooltip-tooltip {\n    margin: 0;\n    background-color: ", ";\n    border-radius: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n  }\n\n  & .MuiTooltip-arrow {\n    color: ", ";\n  }\n\n  &&[data-popper-placement*='top'] .MuiTooltip-tooltip {\n    margin-bottom: ", ";\n  }\n\n  &&[data-popper-placement*='bottom'] .MuiTooltip-tooltip {\n    margin-top: ", ";\n  }\n\n  &&[data-popper-placement*='left'] .MuiTooltip-tooltip {\n    margin-right: ", ";\n  }\n\n  &&[data-popper-placement*='right'] .MuiTooltip-tooltip {\n    margin-left: ", ";\n  }\n"])), function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & .MuiTooltip-tooltip {\n    margin: 0;\n\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n  }\n\n  & .MuiTooltip-arrow {\n    color: ", ";\n  }\n\n  &&[data-popper-placement*='top'] .MuiTooltip-tooltip {\n    margin-bottom: ", ";\n  }\n\n  &&[data-popper-placement*='bottom'] .MuiTooltip-tooltip {\n    margin-top: ", ";\n  }\n\n  &&[data-popper-placement*='left'] .MuiTooltip-tooltip {\n    margin-right: ", ";\n  }\n\n  &&[data-popper-placement*='right'] .MuiTooltip-tooltip {\n    margin-left: ", ";\n  }\n"], ["\n  & .MuiTooltip-tooltip {\n    margin: 0;\n\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n  }\n\n  & .MuiTooltip-arrow {\n    color: ", ";\n  }\n\n  &&[data-popper-placement*='top'] .MuiTooltip-tooltip {\n    margin-bottom: ", ";\n  }\n\n  &&[data-popper-placement*='bottom'] .MuiTooltip-tooltip {\n    margin-top: ", ";\n  }\n\n  &&[data-popper-placement*='left'] .MuiTooltip-tooltip {\n    margin-right: ", ";\n  }\n\n  &&[data-popper-placement*='right'] .MuiTooltip-tooltip {\n    margin-left: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.palette.grey[900];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shape.small;
+    return theme.typography.fontWeightRegular;
 }, function (_a) {
     var size = _a.size, theme = _a.theme;
     return size === constants_1.TooltipSizes.SMALL
@@ -52,7 +49,10 @@ exports.StyledTooltip = (0, styles_1.styled)(function (_a) {
         : theme.typography.ui.lineHeight;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.typography.fontWeightRegular;
+    return theme.palette.grey[900];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.small;
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[900];

package/esm/Badge/styled.js

@@ -38,18 +38,18 @@ var getTextColor = function (_a) {
 };
 export var StyledBadge = styled(Badge, {
     shouldForwardProp: function (prop) { return prop !== 'customColor'; },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiBadge-badge {\n    height: 20px;\n    border-radius: 12px;\n    line-height: 20px;\n    background-color: ", ";\n    color: ", ";\n    padding: ", ";\n    font-size: ", ";\n    border: 2px solid ", ";\n  }\n\n  .MuiBadge-dot {\n    width: 12px;\n    height: 12px;\n    border: 2px solid ", ";\n  }\n"], ["\n  .MuiBadge-badge {\n    height: 20px;\n    border-radius: 12px;\n    line-height: 20px;\n    background-color: ", ";\n    color: ", ";\n    padding: ", ";\n    font-size: ", ";\n    border: 2px solid ", ";\n  }\n\n  .MuiBadge-dot {\n    width: 12px;\n    height: 12px;\n    border: 2px solid ", ";\n  }\n"])), function (_a) {
-    var customColor = _a.customColor, theme = _a.theme;
-    return getBgColor({ customColor: customColor, theme: theme });
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiBadge-badge {\n    height: 20px;\n    padding: ", ";\n\n    color: ", ";\n    font-size: ", ";\n    line-height: 20px;\n\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 12px;\n  }\n\n  .MuiBadge-dot {\n    width: 12px;\n    height: 12px;\n\n    border: 2px solid ", ";\n  }\n"], ["\n  .MuiBadge-badge {\n    height: 20px;\n    padding: ", ";\n\n    color: ", ";\n    font-size: ", ";\n    line-height: 20px;\n\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 12px;\n  }\n\n  .MuiBadge-dot {\n    width: 12px;\n    height: 12px;\n\n    border: 2px solid ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(0, 1);
 }, function (_a) {
     var customColor = _a.customColor, theme = _a.theme;
     return getTextColor({ customColor: customColor, theme: theme });
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(0, 1);
 }, function (_a) {
     var theme = _a.theme;
     return theme.typography.small.fontSize;
+}, function (_a) {
+    var customColor = _a.customColor, theme = _a.theme;
+    return getBgColor({ customColor: customColor, theme: theme });
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.common.white;

package/esm/Button/styled.js

@@ -14,12 +14,12 @@ export var StyledButton = styled(ButtonBase, {
     shouldForwardProp: function (prop) {
         return prop !== 'startIcon' && prop !== 'endIcon' && prop !== 'loading';
     },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: ", ";\n  color: ", ";\n\n  &:focus {\n    color: ", ";\n  }\n\n  > span:first-of-type {\n    display: inherit;\n    margin-right: ", ";\n  }\n\n  > span:last-of-type {\n    display: inherit;\n    margin-left: ", ";\n  }\n\n  .MuiCircularProgress-root {\n    width: 16px !important;\n    height: 16px !important;\n    transform: translate(-50%, -50%);\n    position: absolute;\n\n    color: ", ";\n  }\n"], ["\n  pointer-events: ", ";\n  color: ", ";\n\n  &:focus {\n    color: ", ";\n  }\n\n  > span:first-of-type {\n    display: inherit;\n    margin-right: ", ";\n  }\n\n  > span:last-of-type {\n    display: inherit;\n    margin-left: ", ";\n  }\n\n  .MuiCircularProgress-root {\n    width: 16px !important;\n    height: 16px !important;\n    transform: translate(-50%, -50%);\n    position: absolute;\n\n    color: ", ";\n  }\n"])), function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n\n  pointer-events: ", ";\n\n  &:focus {\n    color: ", ";\n  }\n\n  > span:first-of-type {\n    display: inherit;\n    margin-right: ", ";\n  }\n\n  > span:last-of-type {\n    display: inherit;\n    margin-left: ", ";\n  }\n\n  .MuiCircularProgress-root {\n    position: absolute;\n\n    width: 16px !important;\n    height: 16px !important;\n\n    color: ", ";\n\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  color: ", ";\n\n  pointer-events: ", ";\n\n  &:focus {\n    color: ", ";\n  }\n\n  > span:first-of-type {\n    display: inherit;\n    margin-right: ", ";\n  }\n\n  > span:last-of-type {\n    display: inherit;\n    margin-left: ", ";\n  }\n\n  .MuiCircularProgress-root {\n    position: absolute;\n\n    width: 16px !important;\n    height: 16px !important;\n\n    color: ", ";\n\n    transform: translate(-50%, -50%);\n  }\n"])), function (_a) {
     var loading = _a.loading;
-    return (loading ? 'none' : 'inherit');
+    return loading && 'transparent';
 }, function (_a) {
     var loading = _a.loading;
-    return loading && 'transparent';
+    return (loading ? 'none' : 'inherit');
 }, function (_a) {
     var loading = _a.loading;
     return loading && 'transparent';

package/esm/ButtonBase/styled.js

@@ -167,36 +167,36 @@ export var StyledButtonBase = styled(ButtonUnstyled, {
     shouldForwardProp: function (prop) {
         return prop !== 'customColor' && prop !== 'customVariant';
     },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  font-family: Ubuntu, serif;\n  padding: ", ";\n  height: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n    outline: 2px solid ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    cursor: unset;\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  border: none;\n  font-family: Ubuntu, serif;\n  padding: ", ";\n  height: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n    outline: 2px solid ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    cursor: unset;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), getButtonPadding, getButtonHeight, function (_a) {
-    var theme = _a.theme;
-    return theme.shape.small;
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ", ";\n  padding: ", ";\n\n  color: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-family: Ubuntu, serif;\n\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:focus {\n    color: ", ";\n\n    background-color: ", ";\n    outline: 2px solid ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    color: ", ";\n\n    background-color: ", ";\n    cursor: unset;\n  }\n"], ["\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ", ";\n  padding: ", ";\n\n  color: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-family: Ubuntu, serif;\n\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:focus {\n    color: ", ";\n\n    background-color: ", ";\n    outline: 2px solid ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    color: ", ";\n\n    background-color: ", ";\n    cursor: unset;\n  }\n"])), getButtonHeight, getButtonPadding, function (props) {
+    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.DEFAULT }));
 }, function (_a) {
     var theme = _a.theme;
-    return theme.typography.button.fontSize;
+    return theme.typography.button.fontWeight;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.typography.button.fontWeight;
+    return theme.typography.button.fontSize;
 }, function (props) {
     return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.DEFAULT }));
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.small;
 }, function (props) {
-    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.DEFAULT }));
+    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.HOVER }));
 }, function (props) {
     return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.HOVER }));
 }, function (props) {
-    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.HOVER }));
+    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.FOCUS }));
 }, function (props) {
     return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.FOCUS }));
-}, function (props) {
-    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.FOCUS }));
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.primary['400'];
-}, function (props) {
-    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.ACTIVE }));
 }, function (props) {
     return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.ACTIVE }));
-}, buttonUnstyledClasses.disabled, getDisabledBgColor, function (_a) {
+}, function (props) {
+    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.ACTIVE }));
+}, buttonUnstyledClasses.disabled, function (_a) {
     var theme = _a.theme;
     return theme.palette.grey['500'];
-});
+}, getDisabledBgColor);
 var templateObject_1;

package/esm/Checkbox/styled.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { Checkbox } from '@mui/material';
 import { styled } from '../styles';
-export var StyledCheckbox = styled(Checkbox)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 5px;\n  border-radius: unset;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n\n  & .MuiSvgIcon-border {\n    color: ", ";\n  }\n\n  & > svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &.Mui-disabled {\n    color: ", ";\n    & .MuiSvgIcon-border {\n      color: currentColor;\n    }\n  }\n\n  &.Mui-checked,\n  &.MuiCheckbox-indeterminate {\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &.Mui-disabled {\n      color: ", ";\n    }\n\n    & .MuiSvgIcon-mark {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: 5px;\n  border-radius: unset;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n\n  & .MuiSvgIcon-border {\n    color: ", ";\n  }\n\n  & > svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &.Mui-disabled {\n    color: ", ";\n    & .MuiSvgIcon-border {\n      color: currentColor;\n    }\n  }\n\n  &.Mui-checked,\n  &.MuiCheckbox-indeterminate {\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &.Mui-disabled {\n      color: ", ";\n    }\n\n    & .MuiSvgIcon-mark {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+export var StyledCheckbox = styled(Checkbox)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 5px;\n\n  color: ", ";\n\n  border-radius: unset;\n\n  &:hover {\n    color: ", ";\n  }\n\n  & .MuiSvgIcon-border {\n    color: ", ";\n  }\n\n  & > svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &.Mui-disabled {\n    color: ", ";\n\n    & .MuiSvgIcon-border {\n      color: currentColor;\n    }\n  }\n\n  &.Mui-checked,\n  &.MuiCheckbox-indeterminate {\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &.Mui-disabled {\n      color: ", ";\n    }\n\n    & .MuiSvgIcon-mark {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: 5px;\n\n  color: ", ";\n\n  border-radius: unset;\n\n  &:hover {\n    color: ", ";\n  }\n\n  & .MuiSvgIcon-border {\n    color: ", ";\n  }\n\n  & > svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &.Mui-disabled {\n    color: ", ";\n\n    & .MuiSvgIcon-border {\n      color: currentColor;\n    }\n  }\n\n  &.Mui-checked,\n  &.MuiCheckbox-indeterminate {\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &.Mui-disabled {\n      color: ", ";\n    }\n\n    & .MuiSvgIcon-mark {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.background.element;
 }, function (_a) {

package/esm/DashboardLayout/Header/styled.js

@@ -3,27 +3,27 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { styled } from '../../styles';
-export var StyledHeader = styled('header')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  grid-column: 1 / -1;\n  min-height: 56px;\n  height: 56px;\n  width: 100%;\n  z-index: ", ";\n  box-shadow: ", ";\n  padding: 0 ", ";\n  background-color: ", ";\n"], ["\n  grid-column: 1 / -1;\n  min-height: 56px;\n  height: 56px;\n  width: 100%;\n  z-index: ", ";\n  box-shadow: ", ";\n  padding: 0 ", ";\n  background-color: ", ";\n"])), function (_a) {
+export var StyledHeader = styled('header')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n\n  grid-column: 1 / -1;\n  width: 100%;\n  height: 56px;\n  min-height: 56px;\n  padding: 0 ", ";\n\n  background-color: ", ";\n  box-shadow: ", ";\n"], ["\n  z-index: ", ";\n\n  grid-column: 1 / -1;\n  width: 100%;\n  height: 56px;\n  min-height: 56px;\n  padding: 0 ", ";\n\n  background-color: ", ";\n  box-shadow: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.zIndex.appBar;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.elevation[200];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing(5);
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.background.default;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.elevation[200];
 });
 export var InnerContainer = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  height: 100%;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  height: 100%;\n"])));
-export var LeftContainer = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  height: 100%;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  height: 100%;\n  align-items: center;\n"])));
-export var LogoContainer = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 24px;\n  height: 100%;\n  > * {\n    height: 100%;\n  }\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 24px;\n  height: 100%;\n  > * {\n    height: 100%;\n  }\n"])), function (_a) {
-    var withWidget = _a.withWidget, theme = _a.theme;
-    return withWidget && theme.spacing(2);
-}, function (_a) {
+export var LeftContainer = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 100%;\n"])));
+export var LogoContainer = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  max-height: 24px;\n  margin-right: ", ";\n  margin-left: ", ";\n\n  > * {\n    height: 100%;\n  }\n"], ["\n  height: 100%;\n  max-height: 24px;\n  margin-right: ", ";\n  margin-left: ", ";\n\n  > * {\n    height: 100%;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing(4);
+}, function (_a) {
+    var withWidget = _a.withWidget, theme = _a.theme;
+    return withWidget && theme.spacing(2);
 });
-export var LogoStyle = styled('img')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  cursor: pointer;\n"], ["\n  height: 100%;\n  cursor: pointer;\n"])));
+export var LogoStyle = styled('img')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n\n  cursor: pointer;\n"], ["\n  height: 100%;\n\n  cursor: pointer;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/esm/DashboardLayout/SideBar/styled.js

@@ -4,15 +4,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { Drawer } from '@mui/material';
 import { styled } from '../../styles';
-export var StyledDrawer = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n  grid-column: 1;\n  width: 241px;\n  position: relative;\n  .MuiPaper-root {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    background-color: ", ";\n    padding: ", ";\n    border-right: 1px solid ", ";\n  }\n"], ["\n  z-index: ", ";\n  grid-column: 1;\n  width: 241px;\n  position: relative;\n  .MuiPaper-root {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    background-color: ", ";\n    padding: ", ";\n    border-right: 1px solid ", ";\n  }\n"])), function (_a) {
+export var StyledDrawer = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: ", ";\n\n  grid-column: 1;\n  width: 241px;\n\n  .MuiPaper-root {\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0;\n\n    padding: ", ";\n\n    background-color: ", ";\n    border-right: 1px solid ", ";\n  }\n"], ["\n  position: relative;\n  z-index: ", ";\n\n  grid-column: 1;\n  width: 241px;\n\n  .MuiPaper-root {\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0;\n\n    padding: ", ";\n\n    background-color: ", ";\n    border-right: 1px solid ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.zIndex.appBar - 1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.palette.background.element;
+    return theme.spacing(5, 0);
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing(5, 0);
+    return theme.palette.background.element;
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[300];

package/esm/Dialog/Dialog.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DialogProps } from './types';
+export declare const Dialog: ({ children, title, disableBackdropClick, onClose, ...props }: DialogProps) => JSX.Element;

package/esm/Dialog/Dialog.js

@@ -0,0 +1,35 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as MuiDialog } from '@mui/material';
+import { DialogTitle } from '../index';
+export var Dialog = function (_a) {
+    var children = _a.children, title = _a.title, disableBackdropClick = _a.disableBackdropClick, onClose = _a.onClose, props = __rest(_a, ["children", "title", "disableBackdropClick", "onClose"]);
+    var handleClose = onClose &&
+        (function (event, reason) {
+            if (disableBackdropClick && reason == 'backdropClick')
+                return;
+            onClose(event, reason);
+        });
+    return (_jsxs(MuiDialog, __assign({ onClose: handleClose }, props, { children: [title && _jsx(DialogTitle, __assign({ onClose: onClose }, { children: title }), void 0), children] }), void 0));
+};

package/esm/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dialog';
+export * from './types';

package/esm/Dialog/index.js

@@ -0,0 +1,2 @@
+export * from './Dialog';
+export * from './types';

package/esm/Dialog/types.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DialogProps as MuiDialogProps } from '@mui/material';
+export declare type DialogProps = Omit<MuiDialogProps, 'onClose'> & {
+    title?: string;
+    disableBackdropClick?: boolean;
+    onClose?: (event?: React.MouseEvent<HTMLButtonElement>, reason?: 'backdropClick' | 'escapeKeyDown') => void;
+};

package/esm/Dialog/types.js

@@ -0,0 +1 @@
+export {};

package/esm/DialogActions/DialogActions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DialogActionsProps } from '@mui/material';
+export declare const DialogActions: ({ children, disableSpacing, ...props }: DialogActionsProps) => JSX.Element;

package/esm/DialogActions/DialogActions.js

@@ -0,0 +1,29 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DialogActions as MuiDialogActions, } from '@mui/material';
+import { Grid } from '../Grid';
+export var DialogActions = function (_a) {
+    var children = _a.children, disableSpacing = _a.disableSpacing, props = __rest(_a, ["children", "disableSpacing"]);
+    return (_jsx(MuiDialogActions, __assign({}, props, { children: _jsx(Grid, __assign({ container: true, autoFlow: "column", justifyContent: "end", spacing: disableSpacing ? 0 : 2 }, { children: children }), void 0) }), void 0));
+};

package/esm/DialogActions/index.d.ts

@@ -0,0 +1 @@
+export * from './DialogActions';

package/esm/DialogActions/index.js

@@ -0,0 +1 @@
+export * from './DialogActions';

package/esm/DialogContent/DialogContent.d.ts

@@ -0,0 +1 @@
+export { DialogContent } from '@mui/material';

package/esm/DialogContent/DialogContent.js

@@ -0,0 +1 @@
+export { DialogContent } from '@mui/material';

package/esm/DialogContent/index.d.ts

@@ -0,0 +1 @@
+export * from './DialogContent';

package/esm/DialogContent/index.js

@@ -0,0 +1 @@
+export * from './DialogContent';

package/esm/DialogContentText/DialogContentText.d.ts

@@ -0,0 +1 @@
+export { DialogContentText } from '@mui/material';

package/esm/DialogContentText/DialogContentText.js

@@ -0,0 +1 @@
+export { DialogContentText } from '@mui/material';

package/esm/DialogContentText/index.d.ts

@@ -0,0 +1 @@
+export * from './DialogContentText';

package/esm/DialogContentText/index.js

@@ -0,0 +1 @@
+export * from './DialogContentText';

package/esm/DialogTitle/DialogTitle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DialogTitleProps } from './types';
+export declare const DialogTitle: ({ children, onClose, ...props }: DialogTitleProps) => JSX.Element;

package/esm/DialogTitle/DialogTitle.js

@@ -0,0 +1,30 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DialogTitle as MuiDialogTitle } from '@mui/material';
+import { CrossOutlineMd } from '@astral/icons';
+import { IconButton } from '../IconButton';
+export var DialogTitle = function (_a) {
+    var children = _a.children, onClose = _a.onClose, props = __rest(_a, ["children", "onClose"]);
+    return (_jsxs(MuiDialogTitle, __assign({}, props, { children: [children, onClose && (_jsx(IconButton, __assign({ variant: "text", onClick: onClose }, { children: _jsx(CrossOutlineMd, {}, void 0) }), void 0))] }), void 0));
+};

package/esm/DialogTitle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DialogTitle';
+export * from './types';

package/esm/DialogTitle/index.js

@@ -0,0 +1,2 @@
+export * from './DialogTitle';
+export * from './types';

package/esm/DialogTitle/types.d.ts

@@ -0,0 +1,4 @@
+import { DialogTitleProps as MuiDialogTitleProps } from '@mui/material';
+export declare type DialogTitleProps = MuiDialogTitleProps & {
+    onClose?: () => void;
+};

package/esm/DialogTitle/types.js

@@ -0,0 +1 @@
+export {};

package/esm/FormControlLabel/styled.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { FormControlLabel } from '@mui/material';
 import { styled } from '../styles';
-export var StyledFormControlLabel = styled(FormControlLabel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: -5px;\n  margin-right: 0;\n  & .MuiFormControlLabel-label {\n    margin-left: ", ";\n  }\n"], ["\n  margin-left: -5px;\n  margin-right: 0;\n  & .MuiFormControlLabel-label {\n    margin-left: ", ";\n  }\n"])), function (_a) {
+export var StyledFormControlLabel = styled(FormControlLabel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 0;\n  margin-left: -5px;\n\n  & .MuiFormControlLabel-label {\n    margin-left: ", ";\n  }\n"], ["\n  margin-right: 0;\n  margin-left: -5px;\n\n  & .MuiFormControlLabel-label {\n    margin-left: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing(1);
 });

package/esm/IconButton/styled.js

@@ -14,7 +14,7 @@ export var StyledIconButton = styled(ButtonBase, {
     shouldForwardProp: function (prop) {
         return prop !== 'startIcon' && prop !== 'endIcon' && prop !== 'loading';
     },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n"])), getButtonHeight, getButtonHeight, function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n"])), getButtonHeight, getButtonHeight, function (_a) {
     var theme = _a.theme;
     return theme.spacing(1);
 });

package/esm/List/styled.js

@@ -4,5 +4,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { List as MuiList } from '@mui/material';
 import { styled } from '../styles';
-export var StyledList = styled(MuiList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  a {\n    width: 100%;\n    height: 100%;\n    display: inline-block;\n    text-decoration: none;\n  }\n"], ["\n  a {\n    width: 100%;\n    height: 100%;\n    display: inline-block;\n    text-decoration: none;\n  }\n"])));
+export var StyledList = styled(MuiList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n"], ["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n"])));
 var templateObject_1;

package/esm/ListItem/styled.js

@@ -34,11 +34,11 @@ export var getColor = function (_a) {
 };
 export var StyledListItem = styled(ListItem, {
     shouldForwardProp: function (prop) { return prop !== 'selected'; },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  user-select: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  :hover {\n    color: ", ";\n  }\n"], ["\n  cursor: pointer;\n  user-select: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  :hover {\n    color: ", ";\n  }\n"])), function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n\n  user-select: none;\n\n  :hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n\n  user-select: none;\n\n  :hover {\n    color: ", ";\n  }\n"])), function (props) {
+    return getColor(__assign(__assign({}, props), { listItemState: ListItemStates.DEFAULT }));
+}, function (props) { return getBgColor(__assign({}, props)); }, function (_a) {
     var theme = _a.theme;
     return theme.shape.small;
-}, function (props) { return getBgColor(__assign({}, props)); }, function (props) {
-    return getColor(__assign(__assign({}, props), { listItemState: ListItemStates.DEFAULT }));
 }, function (props) {
     return getColor(__assign(__assign({}, props), { listItemState: ListItemStates.HOVER }));
 });

package/esm/ListItemButton/styled.js

@@ -30,11 +30,11 @@ export var getColor = function (_a) {
         return theme.palette.primary[800];
     return theme.palette.grey[900];
 };
-export var StyledListItemButton = styled(ListItemButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  cursor: pointer;\n  user-select: none;\n  border-radius: ", ";\n  color: ", ";\n  :hover {\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  cursor: pointer;\n  user-select: none;\n  border-radius: ", ";\n  color: ", ";\n  :hover {\n    color: ", ";\n  }\n"])), function (props) { return getBgColor(__assign({}, props)); }, function (_a) {
+export var StyledListItemButton = styled(ListItemButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n\n  user-select: none;\n\n  :hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n\n  user-select: none;\n\n  :hover {\n    color: ", ";\n  }\n"])), function (props) {
+    return getColor(__assign(__assign({}, props), { listItemButtonState: ListItemButtonStates.DEFAULT }));
+}, function (props) { return getBgColor(__assign({}, props)); }, function (_a) {
     var theme = _a.theme;
     return theme.shape.small;
-}, function (props) {
-    return getColor(__assign(__assign({}, props), { listItemButtonState: ListItemButtonStates.DEFAULT }));
 }, function (props) {
     return getColor(__assign(__assign({}, props), { listItemButtonState: ListItemButtonStates.HOVER }));
 });

package/esm/MenuList/styled.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { MenuList } from '@mui/material';
 import { styled } from '../styles';
-export var StyledMenuList = styled(MenuList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.MuiList-root {\n    padding: ", ";\n    border-radius: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  &.MuiList-root {\n    padding: ", ";\n    border-radius: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+export var StyledMenuList = styled(MenuList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.MuiList-root {\n    padding: ", ";\n\n    border-radius: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  &.MuiList-root {\n    padding: ", ";\n\n    border-radius: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing(1, 0);
 }, function (_a) {

package/esm/Radio/styled.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { Radio } from '@mui/material';
 import { styled } from '../styles';
-export var StyledRadio = styled(Radio)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 5px;\n  border-radius: unset;\n  color: ", ";\n\n  &:hover {\n    background: none;\n    & > svg {\n      color: ", ";\n    }\n  }\n\n  &.Mui-disabled:not(.Mui-checked) {\n    color: ", ";\n    & > svg {\n      color: ", ";\n    }\n  }\n\n  &.Mui-checked {\n    color: ", ";\n    &:hover {\n      & > svg {\n        color: ", ";\n      }\n    }\n    &.Mui-disabled {\n      color: ", ";\n    }\n    & > svg > path {\n      fill: ", ";\n    }\n  }\n"], ["\n  padding: 5px;\n  border-radius: unset;\n  color: ", ";\n\n  &:hover {\n    background: none;\n    & > svg {\n      color: ", ";\n    }\n  }\n\n  &.Mui-disabled:not(.Mui-checked) {\n    color: ", ";\n    & > svg {\n      color: ", ";\n    }\n  }\n\n  &.Mui-checked {\n    color: ", ";\n    &:hover {\n      & > svg {\n        color: ", ";\n      }\n    }\n    &.Mui-disabled {\n      color: ", ";\n    }\n    & > svg > path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
+export var StyledRadio = styled(Radio)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 5px;\n\n  color: ", ";\n\n  border-radius: unset;\n\n  &:hover {\n    background: none;\n\n    & > svg {\n      color: ", ";\n    }\n  }\n\n  &.Mui-disabled:not(.Mui-checked) {\n    color: ", ";\n\n    & > svg {\n      color: ", ";\n    }\n  }\n\n  &.Mui-checked {\n    color: ", ";\n\n    &:hover {\n      & > svg {\n        color: ", ";\n      }\n    }\n\n    &.Mui-disabled {\n      color: ", ";\n    }\n\n    & > svg > path {\n      fill: ", ";\n    }\n  }\n"], ["\n  padding: 5px;\n\n  color: ", ";\n\n  border-radius: unset;\n\n  &:hover {\n    background: none;\n\n    & > svg {\n      color: ", ";\n    }\n  }\n\n  &.Mui-disabled:not(.Mui-checked) {\n    color: ", ";\n\n    & > svg {\n      color: ", ";\n    }\n  }\n\n  &.Mui-checked {\n    color: ", ";\n\n    &:hover {\n      & > svg {\n        color: ", ";\n      }\n    }\n\n    &.Mui-disabled {\n      color: ", ";\n    }\n\n    & > svg > path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.background.default;
 }, function (_a) {

package/esm/Select/styled.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { styled } from '../styles';
 import { MenuItem } from '../MenuItem';
-export var TagsWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: -", ";\n\n  .MuiChip-root {\n    margin-bottom: ", ";\n    background-color: ", ";\n  }\n\n  .MuiChip-root:hover {\n    background-color: ", ";\n  }\n\n  .MuiChip-root:not(:last-of-type) {\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: -", ";\n\n  .MuiChip-root {\n    margin-bottom: ", ";\n    background-color: ", ";\n  }\n\n  .MuiChip-root:hover {\n    background-color: ", ";\n  }\n\n  .MuiChip-root:not(:last-of-type) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+export var TagsWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: -", ";\n\n  .MuiChip-root {\n    margin-bottom: ", ";\n\n    background-color: ", ";\n  }\n\n  .MuiChip-root:hover {\n    background-color: ", ";\n  }\n\n  .MuiChip-root:not(:last-of-type) {\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: -", ";\n\n  .MuiChip-root {\n    margin-bottom: ", ";\n\n    background-color: ", ";\n  }\n\n  .MuiChip-root:hover {\n    background-color: ", ";\n  }\n\n  .MuiChip-root:not(:last-of-type) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing(1);
 }, function (_a) {
@@ -20,7 +20,7 @@ export var TagsWrapper = styled.div(templateObject_1 || (templateObject_1 = __ma
     var theme = _a.theme;
     return theme.spacing(1);
 });
-export var ProgressWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: 64px;\n  align-items: center;\n\n  .MuiCircularProgress-root {\n    margin-top: ", ";\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: 64px;\n  align-items: center;\n\n  .MuiCircularProgress-root {\n    margin-top: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+export var ProgressWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  min-height: 64px;\n\n  .MuiCircularProgress-root {\n    margin-top: ", ";\n\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  min-height: 64px;\n\n  .MuiCircularProgress-root {\n    margin-top: ", ";\n\n    color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing(5);
 }, function (_a) {