@astral/ui 0.3.1 → 0.4.1-alpha.1

package/cjs/src/DashboardLayout/DashboardLayout.js

@@ -0,0 +1,28 @@
+"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");
+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));
+};
+exports.DashboardLayout = DashboardLayout;
+exports.DashboardLayout.Header = Header_1.Header;
+exports.DashboardLayout.SideBar = SideBar_1.SideBar;
+exports.DashboardLayout.Main = Main_1.Main;
+exports.default = exports.DashboardLayout;

package/cjs/src/DashboardLayout/Header/Header.js

@@ -0,0 +1,22 @@
+"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.Header = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_1 = require("./styled");
+exports.Header = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, logoSrc = _a.logoSrc, logoAlt = _a.logoAlt, LogoLink = _a.LogoLink, Widget = _a.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: !!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));
+});
+exports.default = exports.Header;

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

package/cjs/src/DashboardLayout/Header/styled.js

@@ -0,0 +1,32 @@
+"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.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) {
+    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;
+});
+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) {
+    var theme = _a.theme;
+    return theme.spacing(4);
+});
+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"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/cjs/src/DashboardLayout/Header/types.js

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

package/cjs/src/DashboardLayout/Main/Main.js

@@ -0,0 +1,22 @@
+"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.Main = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+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);
+});
+exports.default = exports.Main;

package/cjs/src/DashboardLayout/Main/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("./Main"), exports);

package/cjs/src/DashboardLayout/Main/styled.js

@@ -0,0 +1,10 @@
+"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.StyledMain = 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"])));
+var templateObject_1;

package/cjs/src/DashboardLayout/SideBar/SideBar.js

@@ -0,0 +1,22 @@
+"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.SideBar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+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));
+});
+exports.default = exports.SideBar;

package/cjs/src/DashboardLayout/SideBar/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("./SideBar"), exports);

package/cjs/src/DashboardLayout/SideBar/styled.js

@@ -0,0 +1,23 @@
+"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  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) {
+    var theme = _a.theme;
+    return theme.zIndex.appBar - 1;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.background.element;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(5, 0);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[300];
+});
+var templateObject_1;

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

package/cjs/src/DashboardLayout/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.StyledDashboard = void 0;
+var Grid_1 = require("../Grid");
+var styles_1 = require("../styles");
+exports.StyledDashboard = (0, styles_1.styled)(Grid_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 100vh;\n"], ["\n  min-height: 100vh;\n"])));
+var templateObject_1;

package/cjs/src/Tooltip/Tooltip.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.Tooltip = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_1 = require("./styled");
+var constants_1 = require("./constants");
+exports.Tooltip = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.size, size = _c === void 0 ? constants_1.TooltipSizes.MEDIUM : _c, props = __rest(_a, ["children", "placement", "size"]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledTooltip, __assign({ ref: ref, size: size, placement: placement }, props, { children: children }), void 0));
+});

package/cjs/src/Tooltip/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipSizes = void 0;
+var TooltipSizes;
+(function (TooltipSizes) {
+    TooltipSizes["MEDIUM"] = "medium";
+    TooltipSizes["SMALL"] = "small";
+})(TooltipSizes = exports.TooltipSizes || (exports.TooltipSizes = {}));

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

package/cjs/src/Tooltip/styled.js

@@ -0,0 +1,72 @@
+"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;
+};
+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.StyledTooltip = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var styles_1 = require("../styles");
+var constants_1 = require("./constants");
+exports.StyledTooltip = (0, styles_1.styled)(function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, __assign({}, props, { classes: { popper: className } }), void 0));
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & .MuiTooltip-tooltip {\n    margin: 0;\n    background-color: ", ";\n    border-radius: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n  }\n\n  & .MuiTooltip-arrow {\n    color: ", ";\n  }\n\n  &&[data-popper-placement*='top'] .MuiTooltip-tooltip {\n    margin-bottom: ", ";\n  }\n\n  &&[data-popper-placement*='bottom'] .MuiTooltip-tooltip {\n    margin-top: ", ";\n  }\n\n  &&[data-popper-placement*='left'] .MuiTooltip-tooltip {\n    margin-right: ", ";\n  }\n\n  &&[data-popper-placement*='right'] .MuiTooltip-tooltip {\n    margin-left: ", ";\n  }\n"], ["\n  & .MuiTooltip-tooltip {\n    margin: 0;\n    background-color: ", ";\n    border-radius: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n  }\n\n  & .MuiTooltip-arrow {\n    color: ", ";\n  }\n\n  &&[data-popper-placement*='top'] .MuiTooltip-tooltip {\n    margin-bottom: ", ";\n  }\n\n  &&[data-popper-placement*='bottom'] .MuiTooltip-tooltip {\n    margin-top: ", ";\n  }\n\n  &&[data-popper-placement*='left'] .MuiTooltip-tooltip {\n    margin-right: ", ";\n  }\n\n  &&[data-popper-placement*='right'] .MuiTooltip-tooltip {\n    margin-left: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[900];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.small;
+}, function (_a) {
+    var size = _a.size, theme = _a.theme;
+    return size === constants_1.TooltipSizes.SMALL
+        ? theme.typography.small.fontSize
+        : theme.typography.ui.fontSize;
+}, function (_a) {
+    var size = _a.size, theme = _a.theme;
+    return size === constants_1.TooltipSizes.SMALL
+        ? theme.typography.small.lineHeight
+        : theme.typography.ui.lineHeight;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.fontWeightRegular;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[900];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(3);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(3);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(2);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(2);
+});
+var templateObject_1;

package/cjs/src/Tooltip/types.js

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

package/cjs/src/declaration/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("./mui-material.d"), exports);
+__exportStar(require("./emotion.d"), exports);

package/cjs/src/index.js

@@ -31,4 +31,6 @@ __exportStar(require("./TextField"), exports);
 __exportStar(require("./FormHelperText"), exports);
 __exportStar(require("./Grid"), exports);
 __exportStar(require("./Tag"), exports);
+__exportStar(require("./Tooltip"), exports);
 __exportStar(require("./TextArea"), exports);
+__exportStar(require("./declaration"), exports);

package/cjs/src/theme/baseTheme.js

@@ -17,7 +17,7 @@ var createTheme = function (params) {
         palette: (0, palette_1.getPalette)(brand),
         components: (0, components_1.getComponents)(fontsUrls),
     };
-    var muiTheme = (0, styles_1.responsiveFontSizes)((0, styles_1.createTheme)((0, lodash_es_1.merge)({}, themeOptions, options)));
+    var muiTheme = (0, styles_1.createTheme)((0, lodash_es_1.merge)({}, themeOptions, options));
     return (0, lodash_es_1.merge)(muiTheme, { elevation: elevation_1.elevation, shape: shape_1.shape });
 };
 exports.createTheme = createTheme;

package/cjs/src/theme/typography.js

@@ -20,90 +20,105 @@ exports.typography = {
         return {
             fontSize: (0, exports.pxToRem)(35, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: (0, exports.pxToRem)(40, this.htmlFontSize),
         };
     },
     get h2() {
         return {
             fontSize: (0, exports.pxToRem)(29, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: (0, exports.pxToRem)(32, this.htmlFontSize),
         };
     },
     get h3() {
         return {
             fontSize: (0, exports.pxToRem)(24, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: (0, exports.pxToRem)(28, this.htmlFontSize),
         };
     },
     get h4() {
         return {
             fontSize: (0, exports.pxToRem)(20, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: (0, exports.pxToRem)(24, this.htmlFontSize),
         };
     },
     get h5() {
         return {
             fontSize: (0, exports.pxToRem)(16, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: (0, exports.pxToRem)(24, this.htmlFontSize),
         };
     },
     get h6() {
         return {
             fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: (0, exports.pxToRem)(16, this.htmlFontSize),
         };
     },
     get h7() {
         return {
             fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: (0, exports.pxToRem)(20, this.htmlFontSize),
         };
     },
     get h8() {
         return {
             fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: (0, exports.pxToRem)(16, this.htmlFontSize),
         };
     },
     get h9() {
         return {
             fontSize: (0, exports.pxToRem)(11, this.htmlFontSize),
             fontWeight: this.fontWeightBold,
+            lineHeight: (0, exports.pxToRem)(16, this.htmlFontSize),
         };
     },
     get button() {
         return {
             fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: (0, exports.pxToRem)(24, this.htmlFontSize),
         };
     },
     get ui() {
         return {
             fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
             fontWeight: this.fontWeightRegular,
+            lineHeight: (0, exports.pxToRem)(20, this.htmlFontSize),
         };
     },
     get link() {
         return {
             fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
             fontWeight: this.fontWeightRegular,
+            lineHeight: (0, exports.pxToRem)(20, this.htmlFontSize),
         };
     },
     get pointer() {
         return {
             fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: (0, exports.pxToRem)(16, this.htmlFontSize),
         };
     },
     get small() {
         return {
             fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
             fontWeight: this.fontWeightRegular,
+            lineHeight: (0, exports.pxToRem)(16, this.htmlFontSize),
         };
     },
     get code() {
         return {
             fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
             fontWeight: this.fontWeightLight,
+            lineHeight: (0, exports.pxToRem)(20, this.htmlFontSize),
         };
     },
     body1: {

package/esm/src/DashboardLayout/DashboardLayout.js

@@ -0,0 +1,24 @@
+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));
+};
+DashboardLayout.Header = Header;
+DashboardLayout.SideBar = SideBar;
+DashboardLayout.Main = Main;
+export default DashboardLayout;

package/esm/src/DashboardLayout/Header/Header.js

@@ -0,0 +1,19 @@
+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 { forwardRef } from 'react';
+import { InnerContainer, LeftContainer, LogoContainer, LogoStyle, StyledHeader, } from './styled';
+export var Header = forwardRef(function (_a, ref) {
+    var children = _a.children, logoSrc = _a.logoSrc, logoAlt = _a.logoAlt, LogoLink = _a.LogoLink, Widget = _a.Widget;
+    return (_jsx(StyledHeader, __assign({ ref: ref }, { children: _jsxs(InnerContainer, { children: [_jsxs(LeftContainer, { children: [Widget && _jsx(Widget, {}, void 0), _jsx(LogoContainer, __assign({ withWidget: !!Widget }, { children: _jsx(LogoLink, { Logo: _jsx(LogoStyle, { src: logoSrc, alt: logoAlt }, void 0) }, void 0) }), void 0)] }, void 0), children] }, void 0) }), void 0));
+});
+export default Header;

package/esm/src/DashboardLayout/Header/index.js

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

package/esm/src/DashboardLayout/Header/styled.js

@@ -0,0 +1,29 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '../../styles';
+export var StyledHeader = styled('header')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  grid-column: 1 / -1;\n  min-height: 56px;\n  height: 56px;\n  width: 100%;\n  z-index: ", ";\n  box-shadow: ", ";\n  padding: 0 ", ";\n  background-color: ", ";\n"], ["\n  grid-column: 1 / -1;\n  min-height: 56px;\n  height: 56px;\n  width: 100%;\n  z-index: ", ";\n  box-shadow: ", ";\n  padding: 0 ", ";\n  background-color: ", ";\n"])), function (_a) {
+    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;
+});
+export var InnerContainer = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  height: 100%;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  height: 100%;\n"])));
+export var LeftContainer = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  height: 100%;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  height: 100%;\n  align-items: center;\n"])));
+export var LogoContainer = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 24px;\n  height: 100%;\n  > * {\n    height: 100%;\n  }\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 24px;\n  height: 100%;\n  > * {\n    height: 100%;\n  }\n"])), function (_a) {
+    var withWidget = _a.withWidget, theme = _a.theme;
+    return withWidget && theme.spacing(2);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(4);
+});
+export var LogoStyle = styled('img')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  cursor: pointer;\n"], ["\n  height: 100%;\n  cursor: pointer;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/esm/src/DashboardLayout/Main/Main.js

@@ -0,0 +1,19 @@
+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 { forwardRef } from 'react';
+import { StyledMain } from './styled';
+export var Main = forwardRef(function (_a, ref) {
+    var children = _a.children;
+    return _jsx(StyledMain, __assign({ ref: ref }, { children: children }), void 0);
+});
+export default Main;

package/esm/src/DashboardLayout/Main/index.js

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

package/esm/src/DashboardLayout/Main/styled.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '../../styles';
+export var StyledMain = 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"])));
+var templateObject_1;