@astral/ui 0.20.0 → 0.21.0

package/Dialog/types.d.ts

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

package/DialogTitle/DialogTitle.js

@@ -26,9 +26,12 @@ 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 react_1 = require("react");
 var IconButton_1 = require("../IconButton");
 var DialogTitle = function (_a) {
+    // 'escapeKeyDown'  в документашке написано что это опциональный тип, и можно стрингу любую туда закидывать, а по факту либо escapeKeyDown либо backdropClick
     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));
+    var onClickTitle = (0, react_1.useCallback)(function (e) { return onClose && onClose(e, 'escapeKeyDown'); }, [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: onClickTitle }, { children: (0, jsx_runtime_1.jsx)(icons_1.CrossOutlineMd, {}, void 0) }), void 0))] }), void 0));
 };
 exports.DialogTitle = DialogTitle;

package/DialogTitle/types.d.ts

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

package/Select/Select.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { SelectProps } from './types';
-export declare const Select: ({ multiple, loading, placeholder, helperText, success, children, label, error, ...props }: SelectProps) => JSX.Element;
+export declare const Select: ({ multiple, loading, placeholder, getOptionLabel, helperText, success, children, label, error, ...props }: SelectProps) => JSX.Element;

package/Select/Select.js

@@ -35,17 +35,20 @@ var CircularProgress_1 = require("../CircularProgress");
 var MenuItem_1 = require("../MenuItem");
 var styled_1 = require("./styled");
 var Select = function (_a) {
-    var multiple = _a.multiple, loading = _a.loading, placeholder = _a.placeholder, helperText = _a.helperText, success = _a.success, children = _a.children, label = _a.label, error = _a.error, props = __rest(_a, ["multiple", "loading", "placeholder", "helperText", "success", "children", "label", "error"]);
+    var multiple = _a.multiple, loading = _a.loading, placeholder = _a.placeholder, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? function (value) { return value; } : _b, helperText = _a.helperText, success = _a.success, children = _a.children, label = _a.label, error = _a.error, props = __rest(_a, ["multiple", "loading", "placeholder", "getOptionLabel", "helperText", "success", "children", "label", "error"]);
     // unknown, т.к. ts ругается на несоответствие типов. По-умолчанию в selectedOptions string или string[].
     var renderValue = function (selectedOptions) {
         if (Array.isArray(selectedOptions) && selectedOptions.length) {
-            return ((0, jsx_runtime_1.jsx)(styled_1.TagsWrapper, { children: selectedOptions.map(function (option) { return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { color: "grey", label: option }, option)); }) }, void 0));
+            return ((0, jsx_runtime_1.jsx)(styled_1.TagsWrapper, { children: selectedOptions.map(function (option) {
+                    var optionLabel = getOptionLabel(option);
+                    return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { color: "grey", label: optionLabel }, option);
+                }) }, void 0));
         }
         if ((Array.isArray(selectedOptions) || typeof selectedOptions === 'string') &&
             !selectedOptions.length) {
             return placeholder;
         }
-        return selectedOptions;
+        return getOptionLabel(selectedOptions);
     };
     var isNoData = !Boolean(react_1.default.Children.count(children));
     return ((0, jsx_runtime_1.jsxs)(TextField_1.TextField, __assign({ select: true, label: label, helperText: helperText, error: error, success: success, SelectProps: __assign(__assign({}, props), { multiple: multiple, renderValue: renderValue, displayEmpty: true, IconComponent: icons_1.ChevronDOutlineMd }) }, { children: [(0, jsx_runtime_1.jsx)(styled_1.Placeholder, __assign({ value: "" }, { children: "placeholder" }), void 0), loading && ((0, jsx_runtime_1.jsx)(styled_1.ProgressWrapper, { children: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { color: "primary" }, void 0) }, void 0)), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, __assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }), void 0)] }), void 0));

package/Select/types.d.ts

@@ -3,4 +3,5 @@ import { TextFieldProps } from '../TextField';
 export declare type SelectProps = MuiSelectProps & Pick<TextFieldProps, 'error' | 'success' | 'SelectProps' | 'helperText' | 'label'> & {
     loading?: boolean;
     placeholder?: string;
+    getOptionLabel?: (value: string | number) => string | number;
 };

package/SideDialog/SideDialog.d.ts

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

package/SideDialog/SideDialog.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.SideDialog = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var SideDialogTitle_1 = require("../SideDialogTitle");
+var styled_1 = require("./styled");
+var SideDialog = function (_a) {
+    var children = _a.children, title = _a.title, onClose = _a.onClose, open = _a.open, props = __rest(_a, ["children", "title", "onClose", "open"]);
+    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledDrawer, __assign({ anchor: "right", open: open, onClose: onClose }, props, { children: [(0, jsx_runtime_1.jsx)(SideDialogTitle_1.SideDialogTitle, __assign({ onClose: onClose }, { children: title }), void 0), children] }), void 0));
+};
+exports.SideDialog = SideDialog;

package/SideDialog/index.d.ts

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

package/SideDialog/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("./SideDialog"), exports);
+__exportStar(require("./types"), exports);

package/SideDialog/styled.d.ts

@@ -0,0 +1,4 @@
+import { DrawerProps } from '@mui/material';
+export declare const StyledDrawer: import("@emotion/styled").StyledComponent<DrawerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/SideDialog/styled.js

@@ -0,0 +1,11 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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  .MuiPaper-root {\n    width: 30%;\n  }\n  height: 100vh;\n"], ["\n  .MuiPaper-root {\n    width: 30%;\n  }\n  height: 100vh;\n"])));
+var templateObject_1;

package/SideDialog/types.d.ts

@@ -0,0 +1,4 @@
+import { DrawerProps as MuiDrawerProps } from '@mui/material';
+export declare type SideDialogProps = MuiDrawerProps & {
+    title: string;
+};

package/SideDialog/types.js

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

package/SideDialogActions/SideDialogActions.d.ts

@@ -0,0 +1 @@
+export { DialogActions as SideDialogActions } from '../DialogActions';

package/SideDialogActions/SideDialogActions.js

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

package/SideDialogActions/index.d.ts

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

package/SideDialogActions/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("./SideDialogActions"), exports);

package/SideDialogActions/types.d.ts

@@ -0,0 +1 @@
+export type { DialogActionsProps as SideDialogActionsProps } from '@mui/material';

package/SideDialogActions/types.js

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

package/SideDialogContent/SideDialogContent.d.ts

@@ -0,0 +1 @@
+export { DialogContent as SideDialogContent } from '../DialogContent';

package/SideDialogContent/SideDialogContent.js

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

package/SideDialogContent/index.d.ts

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

package/SideDialogContent/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("./SideDialogContent"), exports);

package/SideDialogContent/types.d.ts

@@ -0,0 +1 @@
+export type { DialogContentProps as SideDialogContentProps } from '@mui/material';

package/SideDialogContent/types.js

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

package/SideDialogContentText/SideDialogContentText.d.ts

@@ -0,0 +1 @@
+export { DialogContentText as SideDialogContentText } from '../DialogContentText';

package/SideDialogContentText/SideDialogContentText.js

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

package/SideDialogContentText/index.d.ts

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

package/SideDialogContentText/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("./SideDialogContentText"), exports);

package/SideDialogContentText/types.d.ts

@@ -0,0 +1 @@
+export type { DialogContentTextProps as SideDialogContentTextProps } from '@mui/material';

package/SideDialogContentText/types.js

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

package/SideDialogTitle/SideDialogTitle.d.ts

@@ -0,0 +1 @@
+export { DialogTitle as SideDialogTitle } from '../DialogTitle';

package/SideDialogTitle/SideDialogTitle.js

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

package/SideDialogTitle/index.d.ts

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

package/SideDialogTitle/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("./SideDialogTitle"), exports);

package/SideDialogTitle/types.d.ts

@@ -0,0 +1 @@
+export type { DialogTitleProps as SideDialogTitleProps } from '../DialogTitle';

package/SideDialogTitle/types.js

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

package/esm/Dialog/types.d.ts

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

package/esm/DialogTitle/DialogTitle.js

@@ -23,8 +23,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DialogTitle as MuiDialogTitle } from '@mui/material';
 import { CrossOutlineMd } from '@astral/icons';
+import { useCallback } from 'react';
 import { IconButton } from '../IconButton';
 export var DialogTitle = function (_a) {
+    // 'escapeKeyDown'  в документашке написано что это опциональный тип, и можно стрингу любую туда закидывать, а по факту либо escapeKeyDown либо backdropClick
     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));
+    var onClickTitle = useCallback(function (e) { return onClose && onClose(e, 'escapeKeyDown'); }, [onClose]);
+    return (_jsxs(MuiDialogTitle, __assign({}, props, { children: [children, onClose && (_jsx(IconButton, __assign({ variant: "text", onClick: onClickTitle }, { children: _jsx(CrossOutlineMd, {}, void 0) }), void 0))] }), void 0));
 };

package/esm/DialogTitle/types.d.ts

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

package/esm/Select/Select.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { SelectProps } from './types';
-export declare const Select: ({ multiple, loading, placeholder, helperText, success, children, label, error, ...props }: SelectProps) => JSX.Element;
+export declare const Select: ({ multiple, loading, placeholder, getOptionLabel, helperText, success, children, label, error, ...props }: SelectProps) => JSX.Element;

package/esm/Select/Select.js

@@ -29,17 +29,20 @@ import { CircularProgress } from '../CircularProgress';
 import { MenuItem } from '../MenuItem';
 import { Placeholder, ProgressWrapper, TagsWrapper } from './styled';
 export var Select = function (_a) {
-    var multiple = _a.multiple, loading = _a.loading, placeholder = _a.placeholder, helperText = _a.helperText, success = _a.success, children = _a.children, label = _a.label, error = _a.error, props = __rest(_a, ["multiple", "loading", "placeholder", "helperText", "success", "children", "label", "error"]);
+    var multiple = _a.multiple, loading = _a.loading, placeholder = _a.placeholder, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? function (value) { return value; } : _b, helperText = _a.helperText, success = _a.success, children = _a.children, label = _a.label, error = _a.error, props = __rest(_a, ["multiple", "loading", "placeholder", "getOptionLabel", "helperText", "success", "children", "label", "error"]);
     // unknown, т.к. ts ругается на несоответствие типов. По-умолчанию в selectedOptions string или string[].
     var renderValue = function (selectedOptions) {
         if (Array.isArray(selectedOptions) && selectedOptions.length) {
-            return (_jsx(TagsWrapper, { children: selectedOptions.map(function (option) { return (_jsx(Tag, { color: "grey", label: option }, option)); }) }, void 0));
+            return (_jsx(TagsWrapper, { children: selectedOptions.map(function (option) {
+                    var optionLabel = getOptionLabel(option);
+                    return _jsx(Tag, { color: "grey", label: optionLabel }, option);
+                }) }, void 0));
         }
         if ((Array.isArray(selectedOptions) || typeof selectedOptions === 'string') &&
             !selectedOptions.length) {
             return placeholder;
         }
-        return selectedOptions;
+        return getOptionLabel(selectedOptions);
     };
     var isNoData = !Boolean(React.Children.count(children));
     return (_jsxs(TextField, __assign({ select: true, label: label, helperText: helperText, error: error, success: success, SelectProps: __assign(__assign({}, props), { multiple: multiple, renderValue: renderValue, displayEmpty: true, IconComponent: ChevronDOutlineMd }) }, { children: [_jsx(Placeholder, __assign({ value: "" }, { children: "placeholder" }), void 0), loading && (_jsx(ProgressWrapper, { children: _jsx(CircularProgress, { color: "primary" }, void 0) }, void 0)), !loading && children, !loading && isNoData && _jsx(MenuItem, __assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }), void 0)] }), void 0));

package/esm/Select/types.d.ts

@@ -3,4 +3,5 @@ import { TextFieldProps } from '../TextField';
 export declare type SelectProps = MuiSelectProps & Pick<TextFieldProps, 'error' | 'success' | 'SelectProps' | 'helperText' | 'label'> & {
     loading?: boolean;
     placeholder?: string;
+    getOptionLabel?: (value: string | number) => string | number;
 };

package/esm/SideDialog/SideDialog.d.ts

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

package/esm/SideDialog/SideDialog.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, jsxs as _jsxs } from "react/jsx-runtime";
+import { SideDialogTitle } from '../SideDialogTitle';
+import { StyledDrawer } from './styled';
+export var SideDialog = function (_a) {
+    var children = _a.children, title = _a.title, onClose = _a.onClose, open = _a.open, props = __rest(_a, ["children", "title", "onClose", "open"]);
+    return (_jsxs(StyledDrawer, __assign({ anchor: "right", open: open, onClose: onClose }, props, { children: [_jsx(SideDialogTitle, __assign({ onClose: onClose }, { children: title }), void 0), children] }), void 0));
+};

package/esm/SideDialog/index.d.ts

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

package/esm/SideDialog/index.js

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

package/esm/SideDialog/styled.d.ts

@@ -0,0 +1,4 @@
+import { DrawerProps } from '@mui/material';
+export declare const StyledDrawer: import("@emotion/styled").StyledComponent<DrawerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/esm/SideDialog/styled.js

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

package/esm/SideDialog/types.d.ts

@@ -0,0 +1,4 @@
+import { DrawerProps as MuiDrawerProps } from '@mui/material';
+export declare type SideDialogProps = MuiDrawerProps & {
+    title: string;
+};

package/esm/SideDialog/types.js

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

package/esm/SideDialogActions/SideDialogActions.d.ts

@@ -0,0 +1 @@
+export { DialogActions as SideDialogActions } from '../DialogActions';

package/esm/SideDialogActions/SideDialogActions.js

@@ -0,0 +1 @@
+export { DialogActions as SideDialogActions } from '../DialogActions';

package/esm/SideDialogActions/index.d.ts

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

package/esm/SideDialogActions/index.js

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

package/esm/SideDialogActions/types.d.ts

@@ -0,0 +1 @@
+export type { DialogActionsProps as SideDialogActionsProps } from '@mui/material';

package/esm/SideDialogActions/types.js

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

package/esm/SideDialogContent/SideDialogContent.d.ts

@@ -0,0 +1 @@
+export { DialogContent as SideDialogContent } from '../DialogContent';

package/esm/SideDialogContent/SideDialogContent.js

@@ -0,0 +1 @@
+export { DialogContent as SideDialogContent } from '../DialogContent';

package/esm/SideDialogContent/index.d.ts

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

package/esm/SideDialogContent/index.js

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

package/esm/SideDialogContent/types.d.ts

@@ -0,0 +1 @@
+export type { DialogContentProps as SideDialogContentProps } from '@mui/material';

package/esm/SideDialogContent/types.js

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

package/esm/SideDialogContentText/SideDialogContentText.d.ts

@@ -0,0 +1 @@
+export { DialogContentText as SideDialogContentText } from '../DialogContentText';

package/esm/SideDialogContentText/SideDialogContentText.js

@@ -0,0 +1 @@
+export { DialogContentText as SideDialogContentText } from '../DialogContentText';

package/esm/SideDialogContentText/index.d.ts

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

package/esm/SideDialogContentText/index.js

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

package/esm/SideDialogContentText/types.d.ts

@@ -0,0 +1 @@
+export type { DialogContentTextProps as SideDialogContentTextProps } from '@mui/material';

package/esm/SideDialogContentText/types.js

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

package/esm/SideDialogTitle/SideDialogTitle.d.ts

@@ -0,0 +1 @@
+export { DialogTitle as SideDialogTitle } from '../DialogTitle';

package/esm/SideDialogTitle/SideDialogTitle.js

@@ -0,0 +1 @@
+export { DialogTitle as SideDialogTitle } from '../DialogTitle';

package/esm/SideDialogTitle/index.d.ts

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

package/esm/SideDialogTitle/index.js

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

package/esm/SideDialogTitle/types.d.ts

@@ -0,0 +1 @@
+export type { DialogTitleProps as SideDialogTitleProps } from '../DialogTitle';

package/esm/SideDialogTitle/types.js

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

package/esm/index.d.ts

@@ -38,5 +38,10 @@ export * from './ThemeProvider';
 export * from './TextField';
 export * from './Typography';
 export * from './Tooltip';
+export * from './SideDialog';
+export * from './SideDialogTitle';
+export * from './SideDialogActions';
+export * from './SideDialogContent';
+export * from './SideDialogContentText';
 export * from './DatePicker';
 export * from './LocalizationProvider';

package/esm/index.js

@@ -38,5 +38,10 @@ export * from './ThemeProvider';
 export * from './TextField';
 export * from './Typography';
 export * from './Tooltip';
+export * from './SideDialog';
+export * from './SideDialogTitle';
+export * from './SideDialogActions';
+export * from './SideDialogContent';
+export * from './SideDialogContentText';
 export * from './DatePicker';
 export * from './LocalizationProvider';

package/index.d.ts

@@ -38,5 +38,10 @@ export * from './ThemeProvider';
 export * from './TextField';
 export * from './Typography';
 export * from './Tooltip';
+export * from './SideDialog';
+export * from './SideDialogTitle';
+export * from './SideDialogActions';
+export * from './SideDialogContent';
+export * from './SideDialogContentText';
 export * from './DatePicker';
 export * from './LocalizationProvider';

package/index.js

@@ -50,5 +50,10 @@ __exportStar(require("./ThemeProvider"), exports);
 __exportStar(require("./TextField"), exports);
 __exportStar(require("./Typography"), exports);
 __exportStar(require("./Tooltip"), exports);
+__exportStar(require("./SideDialog"), exports);
+__exportStar(require("./SideDialogTitle"), exports);
+__exportStar(require("./SideDialogActions"), exports);
+__exportStar(require("./SideDialogContent"), exports);
+__exportStar(require("./SideDialogContentText"), exports);
 __exportStar(require("./DatePicker"), exports);
 __exportStar(require("./LocalizationProvider"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "browser": "./src/index.ts",
   "jest": {
     "moduleNameMapper": {
@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "@astral/icons": "^0.20.0",
+    "@astral/icons": "^0.21.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.8.1",
     "@emotion/server": "11.4.0",