@astral/ui 0.28.1-test.1 → 0.31.0

package/DashboardLayout/DashboardLayout.d.ts

@@ -1,15 +1,11 @@
 import { ReactNode } from 'react';
-interface DashBoardLayoutProps {
+export declare type DashBoardLayoutProps = {
     children: ReactNode;
-}
+};
 export declare const DashboardLayout: {
-    ({ children }: DashBoardLayoutProps): JSX.Element;
+    (props: DashBoardLayoutProps): JSX.Element;
     Header: import("react").ForwardRefExoticComponent<import("./Header").HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
-    Sidebar: import("react").ForwardRefExoticComponent<{
-        children: ReactNode;
-    } & import("react").RefAttributes<HTMLDivElement>>;
-    Main: import("react").ForwardRefExoticComponent<{
-        children: ReactNode;
-    } & import("react").RefAttributes<HTMLDivElement>>;
+    Sidebar: import("react").ForwardRefExoticComponent<import("./Sidebar").SidebarProps & import("react").RefAttributes<HTMLDivElement>>;
+    Main: import("react").ForwardRefExoticComponent<import("./Main").MainProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default DashboardLayout;

package/DashboardLayout/DashboardLayout.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardLayout = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -17,9 +6,9 @@ var Header_1 = require("./Header");
 var Sidebar_1 = require("./Sidebar");
 var Main_1 = require("./Main");
 var styled_1 = require("./styled");
-var DashboardLayout = function (_a) {
-    var children = _a.children;
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledDashboard, __assign({ container: true, templateColumns: "auto 1fr", templateRows: "auto 1fr" }, { children: children }), void 0));
+var DashboardLayout = function (props) {
+    var children = props.children;
+    return (0, jsx_runtime_1.jsx)(styled_1.DashboardLayoutRoot, { children: children }, void 0);
 };
 exports.DashboardLayout = DashboardLayout;
 exports.DashboardLayout.Header = Header_1.Header;

package/DashboardLayout/DashboardLayoutStory.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { HeaderProps } from './Header';
+export declare type DashboardLayoutStoryProps = {
+    header: HeaderProps;
+};
+export declare const DashboardLayoutStory: FC<DashboardLayoutStoryProps>;
+export default DashboardLayoutStory;

package/DashboardLayout/DashboardLayoutStory.js

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardLayoutStory = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var icons_1 = require("@astral/icons");
+var material_1 = require("@mui/material");
+var List_1 = require("../List");
+var ListItemIcon_1 = require("../ListItemIcon");
+var ListItemText_1 = require("../ListItemText");
+var DashboardLayout_1 = require("../DashboardLayout");
+var DashboardLayoutStory = function (props) {
+    var header = props.header;
+    return ((0, jsx_runtime_1.jsxs)(DashboardLayout_1.DashboardLayout, { children: [(0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout.Header, __assign({}, header), void 0), (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout.Sidebar, { children: (0, jsx_runtime_1.jsxs)(List_1.List, { children: [(0, jsx_runtime_1.jsxs)(material_1.ListItemButton, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(icons_1.ProfileOutlineMd, {}, void 0) }, void 0), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { children: "\u0413\u043B\u0430\u0432\u043D\u0430\u044F" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(icons_1.CompanyOutlineMd, {}, void 0) }, void 0), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { children: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(icons_1.SettingsFillMd, {}, void 0) }, void 0), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { children: "\u041A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u044B" }, void 0)] }, void 0)] }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout.Main, { children: "main-content" }, void 0)] }, void 0));
+};
+exports.DashboardLayoutStory = DashboardLayoutStory;
+exports.default = exports.DashboardLayoutStory;

package/DashboardLayout/DashboardLayoutStoryTemplate.d.ts

@@ -0,0 +1,4 @@
+import { ComponentStory } from '@storybook/react';
+import { DashboardLayoutStory } from './DashboardLayoutStory';
+export declare const DashboardLayoutStoryTemplate: ComponentStory<typeof DashboardLayoutStory>;
+export default DashboardLayoutStoryTemplate;

package/DashboardLayout/DashboardLayoutStoryTemplate.js

@@ -0,0 +1,21 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardLayoutStoryTemplate = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var DashboardLayoutStory_1 = require("./DashboardLayoutStory");
+var DashboardLayoutStoryTemplate = function (args) {
+    return (0, jsx_runtime_1.jsx)(DashboardLayoutStory_1.DashboardLayoutStory, __assign({}, args), void 0);
+};
+exports.DashboardLayoutStoryTemplate = DashboardLayoutStoryTemplate;
+exports.default = exports.DashboardLayoutStoryTemplate;

package/DashboardLayout/Header/Header.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="react" />
-import { HeaderProps } from './types';
+import { ProductProps } from '../../Product';
+import { ProfileProps } from '../../Profile/types';
+export declare type HeaderProps = {
+    product: ProductProps;
+    productSwitcher?: React.FC;
+    profile: ProfileProps;
+};
 export declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Header;

package/DashboardLayout/Header/Header.js

@@ -14,9 +14,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+// import { MenuListProps } from '../../MenuList';
+var Product_1 = require("../../Product");
+var Profile_1 = require("../../Profile");
 var styled_1 = require("./styled");
 exports.Header = (0, react_1.forwardRef)(function (props, ref) {
-    var children = props.children, logoSrc = props.logoSrc, logoAlt = props.logoAlt, LogoLink = props.LogoLink, Widget = props.Widget;
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledHeader, __assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(styled_1.InnerContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_1.LeftContainer, { children: [Widget && (0, jsx_runtime_1.jsx)(Widget, {}, void 0), (0, jsx_runtime_1.jsx)(styled_1.LogoContainer, __assign({ withWidget: Boolean(Widget) }, { children: (0, jsx_runtime_1.jsx)(LogoLink, { Logo: (0, jsx_runtime_1.jsx)(styled_1.LogoStyle, { src: logoSrc, alt: logoAlt }, void 0) }, void 0) }), void 0)] }, void 0), children] }, void 0) }), void 0));
+    var ProductSwitcher = props.productSwitcher, product = props.product, 
+    // menu: Menu,
+    profile = props.profile;
+    return ((0, jsx_runtime_1.jsxs)(styled_1.HeaderRoot, __assign({ ref: ref }, { children: [(0, jsx_runtime_1.jsxs)(styled_1.HeaderNav, { children: [ProductSwitcher && (0, jsx_runtime_1.jsx)(ProductSwitcher, {}, void 0), (0, jsx_runtime_1.jsx)(Product_1.Product, __assign({}, product), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Profile_1.Profile, __assign({}, profile), void 0)] }), void 0));
 });
 exports.default = exports.Header;

package/DashboardLayout/Header/index.d.ts

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

package/DashboardLayout/Header/index.js

@@ -11,4 +11,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Header"), exports);
-__exportStar(require("./types"), exports);

package/DashboardLayout/Header/styled.d.ts

@@ -1,23 +1,9 @@
 /// <reference types="react" />
-export declare const StyledHeader: import("@emotion/styled").StyledComponent<{
+export declare const HeaderRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
+export declare const HeaderNav: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LeftContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LogoContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    withWidget: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LogoStyle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/DashboardLayout/Header/styled.js

@@ -4,14 +4,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LogoStyle = exports.LogoContainer = exports.LeftContainer = exports.InnerContainer = exports.StyledHeader = void 0;
+exports.HeaderNav = exports.HeaderRoot = void 0;
 var styles_1 = require("../../styles");
-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) {
+exports.HeaderRoot = styles_1.styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n\n  display: flex;\n  grid-area: header;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n\n  background-color: ", ";\n  box-shadow: ", ";\n"], ["\n  z-index: ", ";\n\n  display: flex;\n  grid-area: header;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\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.spacing(5);
+    return theme.spacing(2, 4);
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.background.default;
@@ -19,14 +19,5 @@ exports.StyledHeader = (0, styles_1.styled)('header')(templateObject_1 || (templ
     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  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\n  cursor: pointer;\n"], ["\n  height: 100%;\n\n  cursor: pointer;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+exports.HeaderNav = styles_1.styled.nav(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var templateObject_1, templateObject_2;

package/DashboardLayout/Main/Main.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-declare type MainProps = {
+export declare type MainProps = {
     children: ReactNode;
 };
 export declare const Main: import("react").ForwardRefExoticComponent<MainProps & import("react").RefAttributes<HTMLDivElement>>;

package/DashboardLayout/Main/Main.js

@@ -17,6 +17,6 @@ var react_1 = require("react");
 var styled_1 = require("./styled");
 exports.Main = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children;
-    return (0, jsx_runtime_1.jsx)(styled_1.StyledMain, __assign({ ref: ref }, { children: children }), void 0);
+    return (0, jsx_runtime_1.jsx)(styled_1.MainRoot, __assign({ ref: ref }, { children: children }), void 0);
 });
 exports.default = exports.Main;

package/DashboardLayout/Main/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledMain: import("@emotion/styled").StyledComponent<{
+export declare const MainRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/DashboardLayout/Main/styled.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledMain = void 0;
+exports.MainRoot = void 0;
 var styles_1 = require("../../styles");
-exports.StyledMain = (0, styles_1.styled)('main')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  grid-row: 2;\n  grid-column: 2;\n  overflow: hidden;\n"], ["\n  grid-row: 2;\n  grid-column: 2;\n  overflow: hidden;\n"])));
+exports.MainRoot = styles_1.styled.main(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  grid-area: main;\n  grid-row: 2;\n  grid-column: 2;\n  overflow: hidden;\n"], ["\n  grid-area: main;\n  grid-row: 2;\n  grid-column: 2;\n  overflow: hidden;\n"])));
 var templateObject_1;

package/DashboardLayout/Sidebar/Sidebar.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-declare type SidebarProps = {
+export declare type SidebarProps = {
     children: ReactNode;
 };
 export declare const Sidebar: import("react").ForwardRefExoticComponent<SidebarProps & import("react").RefAttributes<HTMLDivElement>>;

package/DashboardLayout/Sidebar/Sidebar.js

@@ -17,6 +17,6 @@ var react_1 = require("react");
 var styled_1 = require("./styled");
 exports.Sidebar = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children;
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledDrawer, __assign({ ref: ref, open: true, variant: "persistent" }, { children: children }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(styled_1.SidebarRoot, __assign({ ref: ref }, { children: [(0, jsx_runtime_1.jsx)("nav", { children: children }, void 0), (0, jsx_runtime_1.jsx)(styled_1.SidebarToggler, __assign({ variant: "text" }, { children: "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u043C\u0435\u043D\u044E" }), void 0)] }), void 0));
 });
 exports.default = exports.Sidebar;

package/DashboardLayout/Sidebar/styled.d.ts

@@ -1,3 +1,8 @@
-export declare const StyledDrawer: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & {
+/// <reference types="react" />
+export declare const SidebarRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const SidebarToggler: import("@emotion/styled").StyledComponent<Pick<import("../../Button").ButtonProps, "disabled" | "component" | "href" | "onFocusVisible" | "tabIndex" | "type" | "action" | "children" | "form" | "slot" | "title" | "key" | "css" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "variant" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon" | "loading" | "loadingIndicator" | "loadingPosition"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/DashboardLayout/Sidebar/styled.js

@@ -4,15 +4,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledDrawer = void 0;
-var material_1 = require("@mui/material");
+exports.SidebarToggler = exports.SidebarRoot = void 0;
 var styles_1 = require("../../styles");
-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 Button_1 = require("../../Button");
+exports.SidebarRoot = styles_1.styled.aside(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n\n  display: flex;\n  flex-direction: column;\n  grid-area: sidebar;\n  padding: ", ";\n\n  background-color: ", ";\n  border-right: 1px solid ", ";\n"], ["\n  z-index: ", ";\n\n  display: flex;\n  flex-direction: column;\n  grid-area: sidebar;\n  padding: ", ";\n\n  background-color: ", ";\n  border-right: 1px solid ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.zIndex.appBar - 1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing(5, 0);
+    return theme.spacing(6);
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.background.element;
@@ -20,4 +20,7 @@ exports.StyledDrawer = (0, styles_1.styled)(material_1.Drawer)(templateObject_1
     var theme = _a.theme;
     return theme.palette.grey[300];
 });
-var templateObject_1;
+// export const SidebarNav = styled.nav`
+// `;
+exports.SidebarToggler = (0, styles_1.styled)(Button_1.Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: auto;\n"], ["\n  margin-top: auto;\n"])));
+var templateObject_1, templateObject_2;

package/DashboardLayout/styled.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-export declare const StyledDashboard: import("@emotion/styled").StyledComponent<import("../Grid").GridContainerProps & import("../Grid").GridElementsProps & {
-    children?: import("react").ReactNode;
-} & {
+export declare const DashboardLayoutRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/DashboardLayout/styled.js

@@ -4,8 +4,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledDashboard = void 0;
-var Grid_1 = require("../Grid");
+exports.DashboardLayoutRoot = void 0;
 var styles_1 = require("../styles");
-exports.StyledDashboard = (0, styles_1.styled)(Grid_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n"], ["\n  height: 100vh;\n"])));
+exports.DashboardLayoutRoot = styles_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template: ", ";\n  height: 100vh;\n"], ["\n  display: grid;\n  grid-template: ", ";\n  height: 100vh;\n"])), function () {
+    return "\n\n      [header-start]  \"header header\"     [header-end]\n      [main-start]    \"sidebar main\" 1fr  [main-end] / 240px 1fr\n    ";
+});
 var templateObject_1;

package/RadioGroup/RadioGroup.d.ts

@@ -1,2 +1,2 @@
-import { RadioGroup } from '@mui/material';
-export default RadioGroup;
+export { RadioGroup } from '@mui/material';
+export type { RadioGroupProps } from '@mui/material';

package/RadioGroup/RadioGroup.js

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

package/RadioGroup/index.d.ts

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

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

package/esm/DashboardLayout/DashboardLayout.d.ts

@@ -1,15 +1,11 @@
 import { ReactNode } from 'react';
-interface DashBoardLayoutProps {
+export declare type DashBoardLayoutProps = {
     children: ReactNode;
-}
+};
 export declare const DashboardLayout: {
-    ({ children }: DashBoardLayoutProps): JSX.Element;
+    (props: DashBoardLayoutProps): JSX.Element;
     Header: import("react").ForwardRefExoticComponent<import("./Header").HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
-    Sidebar: import("react").ForwardRefExoticComponent<{
-        children: ReactNode;
-    } & import("react").RefAttributes<HTMLDivElement>>;
-    Main: import("react").ForwardRefExoticComponent<{
-        children: ReactNode;
-    } & import("react").RefAttributes<HTMLDivElement>>;
+    Sidebar: import("react").ForwardRefExoticComponent<import("./Sidebar").SidebarProps & import("react").RefAttributes<HTMLDivElement>>;
+    Main: import("react").ForwardRefExoticComponent<import("./Main").MainProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default DashboardLayout;

package/esm/DashboardLayout/DashboardLayout.js

@@ -1,22 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Header } from './Header';
 import { Sidebar } from './Sidebar';
 import { Main } from './Main';
-import { StyledDashboard } from './styled';
-export var DashboardLayout = function (_a) {
-    var children = _a.children;
-    return (_jsx(StyledDashboard, __assign({ container: true, templateColumns: "auto 1fr", templateRows: "auto 1fr" }, { children: children }), void 0));
+import { DashboardLayoutRoot } from './styled';
+export var DashboardLayout = function (props) {
+    var children = props.children;
+    return _jsx(DashboardLayoutRoot, { children: children }, void 0);
 };
 DashboardLayout.Header = Header;
 DashboardLayout.Sidebar = Sidebar;

package/esm/DashboardLayout/DashboardLayoutStory.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { HeaderProps } from './Header';
+export declare type DashboardLayoutStoryProps = {
+    header: HeaderProps;
+};
+export declare const DashboardLayoutStory: FC<DashboardLayoutStoryProps>;
+export default DashboardLayoutStory;

package/esm/DashboardLayout/DashboardLayoutStory.js

@@ -0,0 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CompanyOutlineMd, ProfileOutlineMd, SettingsFillMd, } from '@astral/icons';
+import { ListItemButton } from '@mui/material';
+import { List } from '../List';
+import { ListItemIcon } from '../ListItemIcon';
+import { ListItemText } from '../ListItemText';
+import { DashboardLayout } from '../DashboardLayout';
+export var DashboardLayoutStory = function (props) {
+    var header = props.header;
+    return (_jsxs(DashboardLayout, { children: [_jsx(DashboardLayout.Header, __assign({}, header), void 0), _jsx(DashboardLayout.Sidebar, { children: _jsxs(List, { children: [_jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(ProfileOutlineMd, {}, void 0) }, void 0), _jsx(ListItemText, { children: "\u0413\u043B\u0430\u0432\u043D\u0430\u044F" }, void 0)] }, void 0), _jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(CompanyOutlineMd, {}, void 0) }, void 0), _jsx(ListItemText, { children: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B" }, void 0)] }, void 0), _jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(SettingsFillMd, {}, void 0) }, void 0), _jsx(ListItemText, { children: "\u041A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u044B" }, void 0)] }, void 0)] }, void 0) }, void 0), _jsx(DashboardLayout.Main, { children: "main-content" }, void 0)] }, void 0));
+};
+export default DashboardLayoutStory;

package/esm/DashboardLayout/DashboardLayoutStoryTemplate.d.ts

@@ -0,0 +1,4 @@
+import { ComponentStory } from '@storybook/react';
+import { DashboardLayoutStory } from './DashboardLayoutStory';
+export declare const DashboardLayoutStoryTemplate: ComponentStory<typeof DashboardLayoutStory>;
+export default DashboardLayoutStoryTemplate;

package/esm/DashboardLayout/DashboardLayoutStoryTemplate.js

@@ -0,0 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DashboardLayoutStory } from './DashboardLayoutStory';
+export var DashboardLayoutStoryTemplate = function (args) {
+    return _jsx(DashboardLayoutStory, __assign({}, args), void 0);
+};
+export default DashboardLayoutStoryTemplate;

package/esm/DashboardLayout/Header/Header.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="react" />
-import { HeaderProps } from './types';
+import { ProductProps } from '../../Product';
+import { ProfileProps } from '../../Profile/types';
+export declare type HeaderProps = {
+    product: ProductProps;
+    productSwitcher?: React.FC;
+    profile: ProfileProps;
+};
 export declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Header;

package/esm/DashboardLayout/Header/Header.js

@@ -11,9 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { InnerContainer, LeftContainer, LogoContainer, LogoStyle, StyledHeader, } from './styled';
+// import { MenuListProps } from '../../MenuList';
+import { Product } from '../../Product';
+import { Profile } from '../../Profile';
+import { HeaderNav, HeaderRoot } from './styled';
 export var Header = forwardRef(function (props, ref) {
-    var children = props.children, logoSrc = props.logoSrc, logoAlt = props.logoAlt, LogoLink = props.LogoLink, Widget = props.Widget;
-    return (_jsx(StyledHeader, __assign({ ref: ref }, { children: _jsxs(InnerContainer, { children: [_jsxs(LeftContainer, { children: [Widget && _jsx(Widget, {}, void 0), _jsx(LogoContainer, __assign({ withWidget: Boolean(Widget) }, { children: _jsx(LogoLink, { Logo: _jsx(LogoStyle, { src: logoSrc, alt: logoAlt }, void 0) }, void 0) }), void 0)] }, void 0), children] }, void 0) }), void 0));
+    var ProductSwitcher = props.productSwitcher, product = props.product, 
+    // menu: Menu,
+    profile = props.profile;
+    return (_jsxs(HeaderRoot, __assign({ ref: ref }, { children: [_jsxs(HeaderNav, { children: [ProductSwitcher && _jsx(ProductSwitcher, {}, void 0), _jsx(Product, __assign({}, product), void 0)] }, void 0), _jsx(Profile, __assign({}, profile), void 0)] }), void 0));
 });
 export default Header;

package/esm/DashboardLayout/Header/index.d.ts

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

package/esm/DashboardLayout/Header/index.js

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

package/esm/DashboardLayout/Header/styled.d.ts

@@ -1,23 +1,9 @@
 /// <reference types="react" />
-export declare const StyledHeader: import("@emotion/styled").StyledComponent<{
+export declare const HeaderRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
+export declare const HeaderNav: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LeftContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LogoContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    withWidget: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LogoStyle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;