@astral/ui 0.8.1 → 0.10.0

package/Badge/styled.js

@@ -41,18 +41,18 @@ var getTextColor = function (_a) {
 };
 exports.StyledBadge = (0, styles_1.styled)(material_1.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/Button/styled.js

@@ -17,12 +17,12 @@ exports.StyledButton = (0, styles_1.styled)(ButtonBase_1.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/ButtonBase/styled.js

@@ -194,36 +194,36 @@ exports.StyledButtonBase = (0, styles_1.styled)(ButtonUnstyled_1.default, {
     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"])), exports.getButtonPadding, exports.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"])), exports.getButtonHeight, exports.getButtonPadding, function (props) {
+    return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.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 (0, exports.getBgColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.DEFAULT }));
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.small;
 }, function (props) {
-    return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.DEFAULT }));
+    return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.HOVER }));
 }, function (props) {
     return (0, exports.getBgColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.HOVER }));
 }, function (props) {
-    return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.HOVER }));
+    return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.FOCUS }));
 }, function (props) {
     return (0, exports.getBgColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.FOCUS }));
-}, function (props) {
-    return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.FOCUS }));
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.primary['400'];
-}, function (props) {
-    return (0, exports.getBgColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.ACTIVE }));
 }, function (props) {
     return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.ACTIVE }));
-}, ButtonUnstyled_1.buttonUnstyledClasses.disabled, exports.getDisabledBgColor, function (_a) {
+}, function (props) {
+    return (0, exports.getBgColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.ACTIVE }));
+}, ButtonUnstyled_1.buttonUnstyledClasses.disabled, function (_a) {
     var theme = _a.theme;
     return theme.palette.grey['500'];
-});
+}, exports.getDisabledBgColor);
 var templateObject_1;

package/Checkbox/styled.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledCheckbox = void 0;
 var material_1 = require("@mui/material");
 var styles_1 = require("../styles");
-exports.StyledCheckbox = (0, styles_1.styled)(material_1.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) {
+exports.StyledCheckbox = (0, styles_1.styled)(material_1.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/DashboardLayout/Header/styled.js

@@ -6,27 +6,27 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LogoStyle = exports.LogoContainer = exports.LeftContainer = exports.InnerContainer = exports.StyledHeader = void 0;
 var styles_1 = require("../../styles");
-exports.StyledHeader = (0, styles_1.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) {
+exports.StyledHeader = (0, styles_1.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];
 });
 exports.InnerContainer = (0, styles_1.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"])));
-exports.LeftContainer = (0, styles_1.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"])));
-exports.LogoContainer = (0, styles_1.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) {
+exports.LeftContainer = (0, styles_1.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"])));
+exports.LogoContainer = (0, styles_1.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);
 });
-exports.LogoStyle = (0, styles_1.styled)('img')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  cursor: pointer;\n"], ["\n  height: 100%;\n  cursor: pointer;\n"])));
+exports.LogoStyle = (0, styles_1.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/DashboardLayout/SideBar/styled.js

@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledDrawer = void 0;
 var material_1 = require("@mui/material");
 var styles_1 = require("../../styles");
-exports.StyledDrawer = (0, styles_1.styled)(material_1.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) {
+exports.StyledDrawer = (0, styles_1.styled)(material_1.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/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/Dialog/Dialog.js

@@ -0,0 +1,39 @@
+"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)
+        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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var index_1 = require("../index");
+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 ((0, jsx_runtime_1.jsxs)(material_1.Dialog, __assign({ onClose: handleClose }, props, { children: [title && (0, jsx_runtime_1.jsx)(index_1.DialogTitle, __assign({ onClose: onClose }, { children: title }), void 0), children] }), void 0));
+};
+exports.Dialog = Dialog;

package/Dialog/index.d.ts

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

package/Dialog/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Dialog"), exports);
+__exportStar(require("./types"), exports);

package/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/Dialog/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/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/DialogActions/DialogActions.js

@@ -0,0 +1,33 @@
+"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)
+        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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogActions = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var Grid_1 = require("../Grid");
+var DialogActions = function (_a) {
+    var children = _a.children, disableSpacing = _a.disableSpacing, props = __rest(_a, ["children", "disableSpacing"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.DialogActions, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(Grid_1.Grid, __assign({ container: true, autoFlow: "column", justifyContent: "end", spacing: disableSpacing ? 0 : 2 }, { children: children }), void 0) }), void 0));
+};
+exports.DialogActions = DialogActions;

package/DialogActions/index.d.ts

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

package/DialogActions/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DialogActions"), exports);

package/DialogContent/DialogContent.d.ts

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

package/DialogContent/DialogContent.js

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

package/DialogContent/index.d.ts

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

package/DialogContent/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DialogContent"), exports);

package/DialogContentText/DialogContentText.d.ts

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

package/DialogContentText/DialogContentText.js

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

package/DialogContentText/index.d.ts

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

package/DialogContentText/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DialogContentText"), exports);

package/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/DialogTitle/DialogTitle.js

@@ -0,0 +1,34 @@
+"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)
+        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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogTitle = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var icons_1 = require("@astral/icons");
+var IconButton_1 = require("../IconButton");
+var DialogTitle = function (_a) {
+    var children = _a.children, onClose = _a.onClose, props = __rest(_a, ["children", "onClose"]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.DialogTitle, __assign({}, props, { children: [children, onClose && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, __assign({ variant: "text", onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(icons_1.CrossOutlineMd, {}, void 0) }), void 0))] }), void 0));
+};
+exports.DialogTitle = DialogTitle;

package/DialogTitle/index.d.ts

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

package/DialogTitle/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DialogTitle"), exports);
+__exportStar(require("./types"), exports);

package/DialogTitle/types.d.ts

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

package/DialogTitle/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/FormControlLabel/styled.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledFormControlLabel = void 0;
 var material_1 = require("@mui/material");
 var styles_1 = require("../styles");
-exports.StyledFormControlLabel = (0, styles_1.styled)(material_1.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) {
+exports.StyledFormControlLabel = (0, styles_1.styled)(material_1.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/IconButton/styled.js

@@ -18,7 +18,7 @@ exports.StyledIconButton = (0, styles_1.styled)(ButtonBase_1.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"])), exports.getButtonHeight, exports.getButtonHeight, function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n"])), exports.getButtonHeight, exports.getButtonHeight, function (_a) {
     var theme = _a.theme;
     return theme.spacing(1);
 });

package/List/styled.js

@@ -7,5 +7,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledList = void 0;
 var material_1 = require("@mui/material");
 var styles_1 = require("../styles");
-exports.StyledList = (0, styles_1.styled)(material_1.List)(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"])));
+exports.StyledList = (0, styles_1.styled)(material_1.List)(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/ListItem/styled.js

@@ -39,11 +39,11 @@ var getColor = function (_a) {
 exports.getColor = getColor;
 exports.StyledListItem = (0, styles_1.styled)(material_1.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 (0, exports.getColor)(__assign(__assign({}, props), { listItemState: constants_1.ListItemStates.DEFAULT }));
+}, function (props) { return (0, exports.getBgColor)(__assign({}, props)); }, function (_a) {
     var theme = _a.theme;
     return theme.shape.small;
-}, function (props) { return (0, exports.getBgColor)(__assign({}, props)); }, function (props) {
-    return (0, exports.getColor)(__assign(__assign({}, props), { listItemState: constants_1.ListItemStates.DEFAULT }));
 }, function (props) {
     return (0, exports.getColor)(__assign(__assign({}, props), { listItemState: constants_1.ListItemStates.HOVER }));
 });

package/ListItemButton/styled.js

@@ -35,11 +35,11 @@ var getColor = function (_a) {
     return theme.palette.grey[900];
 };
 exports.getColor = getColor;
-exports.StyledListItemButton = (0, styles_1.styled)(material_1.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 (0, exports.getBgColor)(__assign({}, props)); }, function (_a) {
+exports.StyledListItemButton = (0, styles_1.styled)(material_1.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 (0, exports.getColor)(__assign(__assign({}, props), { listItemButtonState: constants_1.ListItemButtonStates.DEFAULT }));
+}, function (props) { return (0, exports.getBgColor)(__assign({}, props)); }, function (_a) {
     var theme = _a.theme;
     return theme.shape.small;
-}, function (props) {
-    return (0, exports.getColor)(__assign(__assign({}, props), { listItemButtonState: constants_1.ListItemButtonStates.DEFAULT }));
 }, function (props) {
     return (0, exports.getColor)(__assign(__assign({}, props), { listItemButtonState: constants_1.ListItemButtonStates.HOVER }));
 });

package/MenuList/styled.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledMenuList = void 0;
 var material_1 = require("@mui/material");
 var styles_1 = require("../styles");
-exports.StyledMenuList = (0, styles_1.styled)(material_1.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) {
+exports.StyledMenuList = (0, styles_1.styled)(material_1.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/Radio/styled.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledRadio = void 0;
 var material_1 = require("@mui/material");
 var styles_1 = require("../styles");
-exports.StyledRadio = (0, styles_1.styled)(material_1.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) {
+exports.StyledRadio = (0, styles_1.styled)(material_1.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/Select/styled.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Placeholder = exports.ProgressWrapper = exports.TagsWrapper = void 0;
 var styles_1 = require("../styles");
 var MenuItem_1 = require("../MenuItem");
-exports.TagsWrapper = styles_1.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) {
+exports.TagsWrapper = styles_1.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) {
@@ -23,7 +23,7 @@ exports.TagsWrapper = styles_1.styled.div(templateObject_1 || (templateObject_1
     var theme = _a.theme;
     return theme.spacing(1);
 });
-exports.ProgressWrapper = styles_1.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) {
+exports.ProgressWrapper = styles_1.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) {