revdev-components 0.8.0 → 0.10.0

package/build/back-layout/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { BackSidebarProps } from "src/back-sidebar";
+interface Props {
+    loading?: boolean;
+    shortMode?: boolean;
+    header?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    headerClassName?: string;
+    sidebarClassName?: string;
+    contentClassName?: string;
+    loadingClassName?: string;
+    sidebarProps: BackSidebarProps;
+}
+export declare const BackLayout: React.FC<Props>;
+export {};

package/build/back-sidebar/hooks.d.ts

@@ -0,0 +1,2 @@
+import { BackSidebarSubOption } from "./interfaces";
+export declare function useIsOptionActive(activePath: string, options: BackSidebarSubOption[]): boolean;

package/build/back-sidebar/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { BackSidebarOption } from "./interfaces";
+export * from "./interfaces";
+export interface BackSidebarProps {
+    className?: string;
+    options: BackSidebarOption[];
+    top?: React.ReactNode;
+    shortMode?: boolean;
+    activePath?: string;
+}
+export declare const BackSidebar: React.FC<BackSidebarProps>;

package/build/back-sidebar/interfaces.d.ts

@@ -0,0 +1,12 @@
+import { PagePath } from "page-path";
+import { RegularIconName } from "src/icon";
+export interface BackSidebarSubOption {
+    label: string;
+    icon?: RegularIconName;
+    path: PagePath;
+}
+export interface BackSidebarOption {
+    label: string;
+    icon?: RegularIconName;
+    options?: BackSidebarSubOption[];
+}

package/build/back-sidebar/menu-item/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { BackSidebarOption } from "../interfaces";
+interface Props {
+    option: BackSidebarOption;
+    activePath?: string;
+}
+export declare const BackSidebarMenuItem: React.FC<Props>;
+export {};

package/build/back-sidebar/short-menu-item/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { BackSidebarOption } from "../interfaces";
+interface Props {
+    option: BackSidebarOption;
+    activePath?: string;
+}
+export declare const BackSidebarShortMenuItem: React.FC<Props>;
+export {};

package/build/back-sidebar/sub-menu-item/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { BackSidebarSubOption } from "../interfaces";
+interface Props {
+    option: BackSidebarSubOption;
+    activePath?: string;
+}
+export declare const BackSidebarSubMenuItem: React.FC<Props>;
+export {};

package/build/index.d.ts

@@ -6,3 +6,6 @@ export * from "./hooks";
 export * from "./form-controls";
 export * from "./dialog";
 export * from "./flat-button";
+export * from "./link";
+export * from "./back-sidebar";
+export * from "./back-layout";

package/build/index.js

@@ -3,6 +3,7 @@
 var React = require('react');
 var classNames = require('classnames');
 var antd = require('antd');
+var Link = require('next/link');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -1519,13 +1520,13 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var s$a = {"root":"index-module_root__-LDR1"};
+var s$h = {"root":"index-module_root__-LDR1"};
 
 // https://www.svgrepo.com/
 function useBasicIcon(_a, icons) {
     var className = _a.className, name = _a.name, props = __rest(_a, ["className", "name"]);
     var svgAttrs = React.useMemo(function () {
-        return __assign({ className: classNames(s$a.root, className), fill: "currentColor" }, props);
+        return __assign({ className: classNames(s$h.root, className), fill: "currentColor" }, props);
     }, [className, props]);
     var Icon = icons[name];
     return Icon ? React.createElement(Icon, __assign({}, svgAttrs)) : undefined;
@@ -4612,7 +4613,7 @@ var SocialIcon = function (props) {
     return useBasicIcon(props, icons);
 };
 
-var s$9 = {"root":"index-module_root__gtTIa","action":"index-module_action__pOSde"};
+var s$g = {"root":"index-module_root__gtTIa","action":"index-module_action__pOSde"};
 
 function useForm(form) {
     var newForm = antd.Form.useForm()[0];
@@ -4649,10 +4650,10 @@ var AppForm = function (_a) {
     React.useEffect(function () {
         onValid === null || onValid === void 0 ? void 0 : onValid(valid);
     }, [onValid, valid]);
-    return (React.createElement(antd.Form, { form: form, onFinish: onFinish, className: classNames(s$9.root, className), layout: "vertical", onValuesChange: handleValuesChange, onFieldsChange: handleFieldsChange, initialValues: initialValues }, typeof children === "function" ? children({ valid: valid }) : children));
+    return (React.createElement(antd.Form, { form: form, onFinish: onFinish, className: classNames(s$g.root, className), layout: "vertical", onValuesChange: handleValuesChange, onFieldsChange: handleFieldsChange, initialValues: initialValues }, typeof children === "function" ? children({ valid: valid }) : children));
 };
 
-var s$8 = {"root":"index-module_root__2S1Jp"};
+var s$f = {"root":"index-module_root__2S1Jp"};
 
 function useLineProps(_a) {
     var lineClassName = _a.lineClassName, name = _a.name, label = _a.label, rules = _a.rules, valuePropName = _a.valuePropName, noStyle = _a.noStyle, rest = __rest(_a, ["lineClassName", "name", "label", "rules", "valuePropName", "noStyle"]);
@@ -4666,7 +4667,7 @@ var FormLine = function (_a) {
         }
         return [];
     }, [validateRules]);
-    return React.createElement(antd.Form.Item, __assign({ className: classNames(s$8.root, className), rules: rules }, props));
+    return React.createElement(antd.Form.Item, __assign({ className: classNames(s$f.root, className), rules: rules }, props));
 };
 
 var DatePickerField = function (props) {
@@ -4687,12 +4688,12 @@ var InputField = function (props) {
         React.createElement(antd.Input, __assign({}, controlProps))));
 };
 
-var s$7 = {"input":"index-module_input__LxXnu"};
+var s$e = {"input":"index-module_input__LxXnu"};
 
 var InputNumberField = function (props) {
     var _a = useLineProps(props), lineProps = _a[0], _b = _a[1], className = _b.className, controlProps = __rest(_b, ["className"]);
     return (React.createElement(FormLine, __assign({}, lineProps),
-        React.createElement(antd.InputNumber, __assign({ className: classNames(s$7.input, className) }, controlProps))));
+        React.createElement(antd.InputNumber, __assign({ className: classNames(s$e.input, className) }, controlProps))));
 };
 
 var RadioButtonField = function (props) {
@@ -4701,13 +4702,13 @@ var RadioButtonField = function (props) {
         React.createElement(antd.Radio.Group, __assign({ buttonStyle: buttonStyle }, controlProps))));
 };
 
-var s$6 = {"popup":"index-module_popup__5L587"};
+var s$d = {"popup":"index-module_popup__5L587"};
 
 var RangePicker = antd.DatePicker.RangePicker;
 var RangePickerField = function (props) {
     var _a = useLineProps(props), lineProps = _a[0], _b = _a[1], oneMonth = _b.oneMonth, controlProps = __rest(_b, ["oneMonth"]);
     return (React.createElement(FormLine, __assign({}, lineProps),
-        React.createElement(RangePicker, __assign({}, controlProps, { popupClassName: oneMonth ? s$6.popup : undefined }))));
+        React.createElement(RangePicker, __assign({}, controlProps, { popupClassName: oneMonth ? s$d.popup : undefined }))));
 };
 
 var SelectField = function (props) {
@@ -4763,29 +4764,29 @@ function usePrevious(value) {
     return ref === null || ref === void 0 ? void 0 : ref.current;
 }
 
-var s$5 = {"root":"index-module_root__f8fnA"};
+var s$c = {"root":"index-module_root__f8fnA"};
 
 var DivisionRow = function (_a) {
     var children = _a.children, className = _a.className;
-    return React.createElement("div", { className: classNames(s$5.root, className) }, children);
+    return React.createElement("div", { className: classNames(s$c.root, className) }, children);
 };
 
-var s$4 = {"root":"index-module_root__xH-TN"};
+var s$b = {"root":"index-module_root__xH-TN"};
 
 var FormButton = function (_a) {
     var className = _a.className, _b = _a.submitText, submitText = _b === void 0 ? "Save" : _b;
-    return (React.createElement("div", { className: classNames(s$4.root, className) },
+    return (React.createElement("div", { className: classNames(s$b.root, className) },
         React.createElement(antd.Button, { htmlType: "submit", type: "primary" }, submitText)));
 };
 
-var s$3 = {"root":"index-module_root__Xj8zb"};
+var s$a = {"root":"index-module_root__Xj8zb"};
 
 var FormError = function (_a) {
     var children = _a.children, className = _a.className;
-    return children ? React.createElement("div", { className: classNames(s$3.root, className) }, children) : null;
+    return children ? React.createElement("div", { className: classNames(s$a.root, className) }, children) : null;
 };
 
-var s$2 = {"root":"index-module_root__C7wx2","content":"index-module_content__RsiJT","close":"index-module_close__lBc6p"};
+var s$9 = {"root":"index-module_root__C7wx2","content":"index-module_content__RsiJT","close":"index-module_close__lBc6p"};
 
 var InfoDialog = function (_a) {
     var children = _a.children, className = _a.className, width = _a.width, hideClose = _a.hideClose, onClose = _a.onClose, _b = _a.open, open = _b === void 0 ? true : _b, contentClassName = _a.contentClassName, _c = _a.maskClosable, maskClosable = _c === void 0 ? false : _c;
@@ -4797,22 +4798,22 @@ var InfoDialog = function (_a) {
         }
         return result;
     }, [width]);
-    return (React.createElement(antd.Modal, { open: open, onCancel: onClose, style: style, className: classNames(s$2.root, className), maskClosable: maskClosable, footer: null },
-        React.createElement("div", { className: classNames(s$2.content, contentClassName) },
+    return (React.createElement(antd.Modal, { open: open, onCancel: onClose, style: style, className: classNames(s$9.root, className), maskClosable: maskClosable, footer: null },
+        React.createElement("div", { className: classNames(s$9.content, contentClassName) },
             children,
-            hideClose ? null : React.createElement(RegularIcon, { name: "cross", className: s$2.close, onClick: onClose }))));
+            hideClose ? null : React.createElement(RegularIcon, { name: "cross", className: s$9.close, onClick: onClose }))));
 };
 
-var s$1 = {"root":"index-module_root__BQI-i","header":"index-module_header__OUCQj","close":"index-module_close__-FN6K","content":"index-module_content__BpXha","footer":"index-module_footer__xqKte"};
+var s$8 = {"root":"index-module_root__BQI-i","header":"index-module_header__OUCQj","close":"index-module_close__-FN6K","content":"index-module_content__BpXha","footer":"index-module_footer__xqKte"};
 
 var RegularDialog = function (_a) {
     var titlePrefix = _a.titlePrefix, title = _a.title, children = _a.children, _b = _a.hideFooter, hideFooter = _b === void 0 ? false : _b, className = _a.className, width = _a.width, okText = _a.okText, cancelText = _a.cancelText, footerClassName = _a.footerClassName, contentClassName = _a.contentClassName, hideOk = _a.hideOk, onOk = _a.onOk, onClose = _a.onClose, _c = _a.open, open = _c === void 0 ? true : _c;
     var close = React.useMemo(function () {
-        return React.createElement(RegularIcon, { name: "cross", className: s$1.close, onClick: onClose });
+        return React.createElement(RegularIcon, { name: "cross", className: s$8.close, onClick: onClose });
     }, [onClose]);
     var titleContent = React.useMemo(function () {
         if (typeof title === "string") {
-            return (React.createElement("div", { className: s$1.header },
+            return (React.createElement("div", { className: s$8.header },
                 React.createElement("div", null, ((titlePrefix || "") + " " || "") + title),
                 close));
         }
@@ -4820,7 +4821,7 @@ var RegularDialog = function (_a) {
             return title(close);
         }
         return null;
-    }, [s$1, title, titlePrefix, close]);
+    }, [s$8, title, titlePrefix, close]);
     var style = React.useMemo(function () {
         var result = {};
         if (width) {
@@ -4834,15 +4835,15 @@ var RegularDialog = function (_a) {
             onOk();
         }
     }, [onOk]);
-    return (React.createElement(antd.Modal, { open: open, onCancel: onClose, style: style, className: classNames(s$1.root, className), maskClosable: false, footer: null },
+    return (React.createElement(antd.Modal, { open: open, onCancel: onClose, style: style, className: classNames(s$8.root, className), maskClosable: false, footer: null },
         titleContent,
-        React.createElement("div", { className: classNames(s$1.content, contentClassName) }, children),
-        hideFooter ? null : (React.createElement("div", { className: classNames(s$1.footer, footerClassName) },
+        React.createElement("div", { className: classNames(s$8.content, contentClassName) }, children),
+        hideFooter ? null : (React.createElement("div", { className: classNames(s$8.footer, footerClassName) },
             React.createElement(antd.Button, { onClick: onClose }, cancelText || "Cancel"),
             hideOk ? null : (React.createElement(antd.Button, { type: "primary", onClick: handleOk }, okText || "OK"))))));
 };
 
-var s = {"root":"index-module_root__9mhio"};
+var s$7 = {"root":"index-module_root__9mhio"};
 
 function isRegular(icon) {
     return RegularIconNameList.includes(icon);
@@ -4852,13 +4853,126 @@ function isSocial(icon) {
 }
 var FlatButton = function (_a) {
     var children = _a.children, className = _a.className, icon = _a.icon, onClick = _a.onClick;
-    return (React.createElement("div", { className: classNames(s.root, className), onClick: onClick },
+    return (React.createElement("div", { className: classNames(s$7.root, className), onClick: onClick },
         isRegular(icon) ? React.createElement(RegularIcon, { name: icon }) : null,
         isSocial(icon) ? React.createElement(SocialIcon, { name: icon }) : null,
         children ? React.createElement("span", null, children) : null));
 };
 
+var s$6 = {"root":"index-module_root__r-dVh"};
+
+var AppLink = function (_a) {
+    var href = _a.href, className = _a.className, children = _a.children, rest = __rest(_a, ["href", "className", "children"]);
+    return (React.createElement(Link, __assign({ href: href, className: classNames(s$6.root, className) }, rest), children));
+};
+
+var s$5 = {"root":"index-module_root__gpEkZ"};
+
+var AppLinkButton = function (_a) {
+    var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
+    return (React.createElement("div", __assign({ className: classNames(s$5.root, className) }, rest), children));
+};
+
+var s$4 = {"root":"index-module_root__DRIJ9","title":"index-module_title__IrIK1","title__active":"index-module_title__active__tmRVg","title__label":"index-module_title__label__KtjaK","list":"index-module_list__lL8Kc","list__open":"index-module_list__open__WhqVg"};
+
+var s$3 = {"root":"index-module_root__En9mt","root__active":"index-module_root__active__32aMB"};
+
+var BackSidebarSubMenuItem = function (_a) {
+    var _b;
+    var _c = _a.activePath, activePath = _c === void 0 ? "" : _c, option = _a.option;
+    var icon = option.icon, label = option.label, path = option.path;
+    var isActive = path.isActive(activePath);
+    return (React.createElement(AppLink, { className: classNames(s$3.root, (_b = {}, _b[s$3.root__active] = isActive, _b)), href: path.build() },
+        icon && React.createElement(RegularIcon, { name: icon }),
+        React.createElement("span", null, label)));
+};
+
+function useIsOptionActive(activePath, options) {
+    if (activePath === void 0) { activePath = ""; }
+    return React.useMemo(function () {
+        return !!options.find(function (x) {
+            return x.path.isActive(activePath);
+        });
+    }, [activePath, options]);
+}
+
+var BackSidebarMenuItem = function (_a) {
+    var _b, _c;
+    var option = _a.option, activePath = _a.activePath;
+    var icon = option.icon, label = option.label, _d = option.options, options = _d === void 0 ? [] : _d;
+    var isActive = useIsOptionActive(activePath, options);
+    var _e = React.useState(isActive), open = _e[0], setOpen = _e[1];
+    React.useEffect(function () {
+        if (isActive) {
+            setOpen(true);
+        }
+    }, [isActive]);
+    var handleClick = React.useCallback(function () {
+        setOpen(!open);
+    }, [open]);
+    return (React.createElement("div", { className: s$4.root },
+        React.createElement("div", { className: classNames(s$4.title, (_b = {}, _b[s$4.title__active] = isActive, _b)), onClick: handleClick },
+            icon && React.createElement(RegularIcon, { name: icon }),
+            React.createElement("span", { className: s$4.title__label }, label),
+            React.createElement(RegularIcon, { name: open ? "keyboard-arrow-down" : "keyboard-arrow-right" })),
+        React.createElement("div", { className: classNames(s$4.list, (_c = {}, _c[s$4.list__open] = open, _c)) }, options.map(function (x, i) {
+            return React.createElement(BackSidebarSubMenuItem, { key: i, option: x });
+        }))));
+};
+
+var s$2 = {"root":"index-module_root__v-d7O","list":"index-module_list__v1Yma","master":"index-module_master__Jhlca","master__active":"index-module_master__active__KPHU1"};
+
+var BackSidebarShortMenuItem = function (_a) {
+    var _b;
+    var option = _a.option, activePath = _a.activePath;
+    var icon = option.icon, _c = option.options, options = _c === void 0 ? [] : _c;
+    var isActive = useIsOptionActive(activePath, options);
+    var _d = React.useState(isActive), open = _d[0], setOpen = _d[1];
+    React.useEffect(function () {
+        if (isActive) {
+            setOpen(true);
+        }
+    }, [isActive]);
+    var handleClick = React.useCallback(function () {
+        setOpen(!open);
+    }, [open]);
+    return (React.createElement("div", { className: s$2.root },
+        React.createElement("div", { className: classNames(s$2.master, (_b = {}, _b[s$2.master__active] = isActive, _b)), onClick: handleClick }, icon && React.createElement(RegularIcon, { name: icon })),
+        React.createElement("div", { className: classNames(s$2.list) }, options.map(function (x, i) {
+            return React.createElement(BackSidebarSubMenuItem, { key: i, option: x });
+        }))));
+};
+
+var s$1 = {"root":"index-module_root__oQRmx"};
+
+// https://www.einfosoft.com/templates/admin/spice/source/edit_booking.html#
+var BackSidebar = function (_a) {
+    var className = _a.className, options = _a.options, top = _a.top, shortMode = _a.shortMode, activePath = _a.activePath;
+    return (React.createElement("div", { className: classNames(s$1.root, className) },
+        top ? React.createElement("div", { className: classNames(s$1.top) }, top) : null,
+        React.createElement("div", { className: s$1.menu }, options.map(function (option, i) {
+            return shortMode ? (React.createElement(BackSidebarShortMenuItem, { key: i, option: option, activePath: activePath })) : (React.createElement(BackSidebarMenuItem, { key: i, option: option, activePath: activePath }));
+        }))));
+};
+
+var s = {"root":"index-module_root__BkOp7","root__short":"index-module_root__short__maBe-","header":"index-module_header__34B0-","sidebar":"index-module_sidebar__xjW3v","content":"index-module_content__cMuen","loading":"index-module_loading__KxkST"};
+
+var BackLayout = function (_a) {
+    var _b;
+    var className = _a.className, loading = _a.loading, shortMode = _a.shortMode, header = _a.header, children = _a.children, headerClassName = _a.headerClassName, sidebarClassName = _a.sidebarClassName, contentClassName = _a.contentClassName, loadingClassName = _a.loadingClassName, sidebarProps = _a.sidebarProps;
+    return (React.createElement("div", { className: classNames(s.root, className, (_b = {}, _b[s.root__short] = shortMode, _b)) },
+        React.createElement("div", { className: classNames(s.header, headerClassName) }, header),
+        React.createElement("div", { className: classNames(s.sidebar, sidebarClassName) },
+            React.createElement(BackSidebar, __assign({}, sidebarProps))),
+        loading ? (React.createElement("div", { className: classNames(s.loading, loadingClassName) },
+            React.createElement(antd.Spin, { size: "large" }))) : (React.createElement("div", { className: classNames(s.content, contentClassName) }, children))));
+};
+
 exports.AppForm = AppForm;
+exports.AppLink = AppLink;
+exports.AppLinkButton = AppLinkButton;
+exports.BackLayout = BackLayout;
+exports.BackSidebar = BackSidebar;
 exports.DatePickerField = DatePickerField;
 exports.DivisionRow = DivisionRow;
 exports.FlagIcon = FlagIcon;

package/build/link/button/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+interface Props extends React.AnchorHTMLAttributes<HTMLDivElement> {
+}
+export declare const AppLinkButton: React.FC<Props>;
+export {};

package/build/link/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./link";
+export * from "./button";

package/build/link/link/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+}
+export declare const AppLink: React.FC<Props>;
+export {};

package/build/styles.css

@@ -112,4 +112,149 @@
 }
 .index-module_root__9mhio:hover {
   background-color: rgb(221, 221, 221);
+}
+.index-module_root__r-dVh {
+  color: var(--linkColor) !important;
+  text-decoration: none;
+  cursor: pointer;
+}
+.index-module_root__r-dVh:hover {
+  color: var(--linkColor);
+  text-decoration: underline;
+}
+.index-module_root__gpEkZ {
+  display: inline;
+  color: var(--linkColor) !important;
+  text-decoration: none;
+  cursor: pointer;
+}
+.index-module_root__gpEkZ:hover {
+  color: var(--linkColor);
+  text-decoration: underline;
+}
+.index-module_root__DRIJ9 {
+  overflow: hidden;
+}
+
+.index-module_title__IrIK1 {
+  height: 46px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  padding: 0 15px;
+  cursor: pointer;
+  font-weight: 500;
+}
+.index-module_title__active__tmRVg, .index-module_title__IrIK1:hover {
+  background-color: var(--backSidebarHoverItemBackgroundColor);
+  color: var(--backSidebarActiveColor);
+}
+.index-module_title__label__KtjaK {
+  flex: 1;
+}
+
+.index-module_list__lL8Kc {
+  display: none;
+}
+.index-module_list__open__WhqVg {
+  display: block;
+}
+.index-module_root__En9mt {
+  height: 46px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  padding: 0 15px;
+  cursor: pointer;
+  font-weight: 500;
+  padding-left: 30px;
+  background-color: var(--backSidebarSubItemBackgroundColor);
+}
+.index-module_root__En9mt:hover > svg,
+.index-module_root__En9mt:hover span {
+  color: var(--backSidebarActiveColor) !important;
+  text-decoration: none !important;
+}
+.index-module_root__active__32aMB > svg,
+.index-module_root__active__32aMB span {
+  color: var(--backSidebarActiveColor) !important;
+}
+.index-module_root__En9mt > svg,
+.index-module_root__En9mt span {
+  color: var(--backSidebarColor) !important;
+}
+.index-module_root__v-d7O {
+  position: relative;
+}
+.index-module_root__v-d7O:hover .index-module_list__v1Yma {
+  display: block;
+}
+
+.index-module_master__Jhlca {
+  height: 46px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  padding: 0 15px;
+  cursor: pointer;
+  font-weight: 500;
+}
+.index-module_master__active__KPHU1, .index-module_master__Jhlca:hover {
+  background-color: var(--backSidebarHoverItemBackgroundColor);
+  color: var(--backSidebarActiveColor);
+}
+
+.index-module_list__v1Yma {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  z-index: 10;
+}
+.index-module_root__oQRmx {
+  padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  color: var(--backSidebarColor);
+  background-color: var(--backSidebarBackgroundColor);
+}
+.index-module_root__BkOp7 {
+  background-color: var(--backLayoutBackgroundColor);
+  display: grid;
+  grid-template: "sidebar header" var(--backHeaderHeight) "sidebar content" 1fr/250px 1fr;
+  height: 100vh;
+  transition: grid-template 0.5s;
+  gap: 0;
+}
+.index-module_root__short__maBe- {
+  grid-template: "sidebar header" var(--backHeaderHeight) "sidebar content" 1fr/50px 1fr;
+}
+
+.index-module_header__34B0- {
+  grid-area: header;
+  background-color: var(--backLayoutHeaderBackgroundColor);
+  border-bottom: 1px solid var(--backLayoutBorderColor);
+  box-shadow: var(--backHeaderBoxShadow);
+}
+
+.index-module_sidebar__xjW3v {
+  grid-area: sidebar;
+  background-color: var(--backSidebarBackgroundColor);
+  color: var(--backSidebarColor);
+}
+
+.index-module_content__cMuen {
+  grid-area: content;
+  overflow: auto;
+}
+
+.index-module_loading__KxkST {
+  grid-area: content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revdev-components",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "main": "build/index.js",
   "module": "build/index.esm.js",
   "scripts": {
@@ -26,7 +26,8 @@
     "lodash.debounce": ">=4",
     "next": ">=13",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "page-path": ">=0.7"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -47,6 +48,7 @@
     "classnames": "^2.5.1",
     "eslint-config-varp": "^1.10.0",
     "next": "14.2.16",
+    "page-path": "^0.7.0",
     "postcss": "^8",
     "rollup": "^4.24.4",
     "rollup-obfuscator": "^4.1.1",