@auth0/quantum-product 1.6.6 → 1.6.8

package/panel/panel/panel.js

@@ -0,0 +1,132 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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.Panel = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../../styled");
+var classes_1 = require("../../styles/classes");
+var utils_1 = require("../../utils");
+var panel_classes_1 = require("./panel-classes");
+var icon_button_1 = require("../../icon-button");
+var icon_1 = require("../../icon");
+var panel_context_1 = require("../panel-context");
+var panel_header_1 = require("../panel-header");
+var widthBySize = {
+    small: 320,
+    medium: 360,
+    large: 440,
+};
+var Root = (0, styled_1.styled)('div', {
+    name: panel_classes_1.panelComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var _b;
+    var ownerState = _a.ownerState, theme = _a.theme;
+    var width = widthBySize[ownerState.size];
+    var isOpen = ownerState.variant === 'permanent' || ownerState.isOpen;
+    var marginProp = ownerState.placement === 'start' ? 'marginRight' : 'marginLeft';
+    return __assign({ transition: theme.transitions.create(['margin'], {
+            duration: isOpen ? theme.transitions.duration.enteringScreen : theme.transitions.duration.leavingScreen,
+        }) }, (ownerState.variant !== 'floating'
+        ? (_b = {},
+            _b[marginProp] = isOpen ? width : 0,
+            _b) : {}));
+});
+var Content = (0, styled_1.styled)('div', {
+    name: panel_classes_1.panelComponentName,
+    slot: 'Content',
+})(function (_a) {
+    var ownerState = _a.ownerState, theme = _a.theme;
+    var width = widthBySize[ownerState.size];
+    var isOpen = ownerState.variant === 'permanent' || ownerState.isOpen;
+    return __assign({ position: ownerState.isFixed ? 'fixed' : 'absolute', zIndex: theme.zIndex.drawer - 1, top: ownerState.offsetTop === 'appbar' ? theme.layout.appTop + theme.layout.appBarHeight : ownerState.offsetTop || 0, bottom: 0, width: width, backgroundColor: ownerState.variant === 'floating' ? theme.tokens.color_bg_layer_elevated : theme.tokens.color_bg_layer, transition: theme.transitions.create(['transform'], {
+            duration: isOpen ? theme.transitions.duration.enteringScreen : theme.transitions.duration.leavingScreen,
+        }), display: 'flex', flexDirection: 'column', boxShadow: ownerState.variant === 'floating' ? theme.shadows[2] : undefined }, (ownerState.placement === 'start'
+        ? {
+            left: 0,
+            right: 'auto',
+            borderRight: '1px solid',
+            borderColor: theme.tokens.color_border_default,
+            transform: isOpen ? undefined : 'translate(-101%, 0)',
+        }
+        : {
+            right: 0,
+            left: 'auto',
+            borderLeft: '1px solid',
+            borderColor: theme.tokens.color_border_default,
+            transform: isOpen ? undefined : 'translate(101%, 0)',
+        }));
+});
+var CloseButton = (0, styled_1.styled)(icon_button_1.IconButton, {
+    name: panel_classes_1.panelComponentName,
+    slot: 'CloseButton',
+})({
+    position: 'absolute',
+    top: 23,
+    right: 24,
+});
+exports.Panel = React.forwardRef(function (props, ref) {
+    var title = props.title, isOpen = props.isOpen, _a = props.placement, placement = _a === void 0 ? 'end' : _a, _b = props.variant, variant = _b === void 0 ? 'permanent' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, onClose = props.onClose, className = props.className, propClasses = props.classes, isFixed = props.isFixed, propOffsetTop = props.offsetTop, children = props.children, _d = props.closeIconButtonProps, closeIconButtonProps = _d === void 0 ? {} : _d, _e = props.PanelHeaderProps, PanelHeaderProps = _e === void 0 ? {} : _e, rootProps = __rest(props, ["title", "isOpen", "placement", "variant", "size", "onClose", "className", "classes", "isFixed", "offsetTop", "children", "closeIconButtonProps", "PanelHeaderProps"]);
+    var classes = (0, classes_1.useMergedClasses)(panel_classes_1.panelClasses, panel_classes_1.getPanelUtilityClass, propClasses);
+    var offsetTop = propOffsetTop != null ? propOffsetTop : isFixed ? 'appbar' : 0;
+    var ownerState = {
+        isOpen: isOpen,
+        placement: placement,
+        variant: variant,
+        size: size,
+        isFixed: isFixed,
+        offsetTop: offsetTop,
+    };
+    var showCloseButton = variant !== 'permanent' && !!onClose;
+    return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: (0, utils_1.clsx)(classes.root, classes["size".concat((0, utils_1.capitalize)(size))], classes["variant".concat((0, utils_1.capitalize)(variant))], classes["placement".concat((0, utils_1.capitalize)(placement))], isFixed && classes.fixed, isOpen && classes.open, className) }, rootProps),
+        React.createElement(panel_context_1.PanelContext.Provider, { value: __assign(__assign({}, ownerState), { isCloseButtonVisible: showCloseButton }) },
+            React.createElement(Content, { className: classes.content, ownerState: ownerState },
+                showCloseButton && (React.createElement(CloseButton, __assign({ "aria-label": "Close", className: classes.closeButton, onClick: function (e) { return onClose(e, 'closeButtonClick'); }, variant: "outlined", size: "small", shape: "circular" }, closeIconButtonProps),
+                    React.createElement(icon_1.XIcon, null))),
+                !!title && React.createElement(panel_header_1.PanelHeader, __assign({ title: title }, PanelHeaderProps)),
+                children))));
+});

package/panel/panel-body/panel-body.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IStyledComponentProps } from '../../styled';
+export declare const panelBodyComponentName: "QuantumPanelBody";
+export declare type IPanelBodyProps = IStyledComponentProps<{
+    props: {
+        children?: React.ReactNode;
+    };
+    defaultComponent: 'div';
+}>;
+export declare const PanelBody: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "children"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/{panel-layout → panel}/panel-body/panel-body.js

@@ -45,18 +45,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelBody = exports.Root = void 0;
+exports.PanelBody = exports.panelBodyComponentName = void 0;
 var React = __importStar(require("react"));
 var styled_1 = require("../../styled");
-var panelBodyComponentName = 'QuantumPanels';
-exports.Root = (0, styled_1.styled)('div', {
-    name: panelBodyComponentName,
-    slot: 'Root',
-})(function (_a) {
+exports.panelBodyComponentName = 'QuantumPanelBody';
+var Root = (0, styled_1.styled)('div', { name: exports.panelBodyComponentName })(function (_a) {
     var theme = _a.theme;
-    return { overflowY: 'auto', padding: theme.spacing(3), paddingTop: theme.spacing(0), marginTop: theme.spacing(1) };
+    return ({
+        flex: 1,
+        padding: theme.spacing(2, 3, 3),
+        overflowY: 'auto',
+    });
 });
 exports.PanelBody = React.forwardRef(function (props, ref) {
     var children = props.children, rootProps = __rest(props, ["children"]);
-    return (React.createElement(exports.Root, __assign({ ref: ref }, rootProps), children));
+    return (React.createElement(Root, __assign({ ref: ref }, rootProps), children));
 });

package/panel/panel-context.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export declare type PanelSize = 'small' | 'medium' | 'large';
+export declare type PanelVariant = 'floating' | 'persistent' | 'permanent';
+export declare type PanelPlacement = 'start' | 'end';
+export interface IPanelContextValue {
+    /**
+     * Panel size.
+     * @default medium
+     * */
+    size: PanelSize;
+    /**
+     * Type of panel.
+     * 'floating' renders above content.
+     * 'persistent' renders side by side with content and is able to be dismissed.
+     * 'permanent' renders side by side with the content and cannot be dismissed.
+     * @default permanent
+     * */
+    variant: PanelVariant;
+    /**
+     * placement of panel
+     * @default end
+     * */
+    placement: PanelPlacement;
+    /** Sets panel to open or closed if variant is floating or persistent. Permanent panels cannot be closed. */
+    isOpen?: boolean;
+    /** sets position to fixed.*/
+    isFixed?: boolean;
+    /** The close button is conditional based on props */
+    isCloseButtonVisible?: boolean;
+}
+export declare const defaultPanelSize: PanelSize;
+export declare const defaultPanelPlacement: PanelPlacement;
+export declare const defaultPanelVariant: PanelVariant;
+export declare const PanelContext: React.Context<IPanelContextValue>;
+export declare const usePanelContext: () => IPanelContextValue;

package/panel/panel-context.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePanelContext = exports.PanelContext = exports.defaultPanelVariant = exports.defaultPanelPlacement = exports.defaultPanelSize = void 0;
+var React = __importStar(require("react"));
+exports.defaultPanelSize = 'medium';
+exports.defaultPanelPlacement = 'end';
+exports.defaultPanelVariant = 'permanent';
+exports.PanelContext = React.createContext({
+    size: exports.defaultPanelSize,
+    placement: exports.defaultPanelPlacement,
+    variant: exports.defaultPanelVariant,
+    isOpen: true,
+    isFixed: false,
+    isCloseButtonVisible: false,
+});
+var usePanelContext = function () { return React.useContext(exports.PanelContext); };
+exports.usePanelContext = usePanelContext;

package/panel/panel-footer/panel-footer.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { SxProps } from '@mui/system';
-import { ITheme } from '../../theme';
-export declare const panelComponentName = "QuantumPanelFooter";
-export interface IPanelFooterProps {
-    ref?: React.Ref<HTMLDivElement>;
-    children: React.ReactNode;
-    sx?: SxProps<ITheme>;
-}
-export declare const Root: import("styled-components").StyledComponent<"div", ITheme, import("@mui/system").MUIStyledCommonProps<ITheme>, never>;
-export declare const PanelFooter: React.ForwardRefExoticComponent<Pick<IPanelFooterProps, "children" | "sx"> & React.RefAttributes<HTMLDivElement>>;
+import { IStyledComponentProps } from '../../styled';
+export declare const panelFooterComponentName: "QuantumPanelFooter";
+export declare type IPanelFooterProps = IStyledComponentProps<{
+    props: {
+        children?: React.ReactNode;
+    };
+    defaultComponent: 'div';
+}>;
+export declare const PanelFooter: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "children"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/panel/panel-footer/panel-footer.js

@@ -45,21 +45,20 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelFooter = exports.Root = exports.panelComponentName = void 0;
+exports.PanelFooter = exports.panelFooterComponentName = void 0;
 var React = __importStar(require("react"));
 var styled_1 = require("../../styled");
-exports.panelComponentName = 'QuantumPanelFooter';
-exports.Root = (0, styled_1.styled)('div', { name: exports.panelComponentName, slot: 'Root' })(function (_a) {
+exports.panelFooterComponentName = 'QuantumPanelFooter';
+var Root = (0, styled_1.styled)('div', { name: exports.panelFooterComponentName })(function (_a) {
     var theme = _a.theme;
     return ({
-        display: 'flex',
-        padding: theme.spacing(3),
-        alignItems: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        padding: theme.spacing(3, 3),
         borderTop: "1px solid ".concat(theme.tokens.color_border_default),
-        justifyContent: 'space-between',
     });
 });
-exports.PanelFooter = React.forwardRef(function (_a) {
-    var children = _a.children, ref = _a.ref, sx = _a.sx, rootProps = __rest(_a, ["children", "ref", "sx"]);
-    return (React.createElement(exports.Root, __assign({ ref: ref, sx: sx }, rootProps), children));
+exports.PanelFooter = React.forwardRef(function (props, ref) {
+    var children = props.children, rootProps = __rest(props, ["children"]);
+    return (React.createElement(Root, __assign({ ref: ref }, rootProps), children));
 });

package/panel/panel-header/panel-header-classes.d.ts

@@ -0,0 +1,5 @@
+export declare const panelHeaderComponentName: "QuantumPanelHeader";
+export declare function getPanelHeaderUtilityClass(slot: string): string;
+export declare const panelHeaderClasses: Record<"title" | "content" | "root" | "endAdornment", string>;
+export declare type PanelHeaderClasses = typeof panelHeaderClasses;
+export declare type PanelHeaderClassKey = keyof PanelHeaderClasses;

package/panel/panel-header/panel-header-classes.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.panelHeaderClasses = exports.getPanelHeaderUtilityClass = exports.panelHeaderComponentName = void 0;
+var classes_1 = require("../../styles/classes");
+exports.panelHeaderComponentName = 'QuantumPanelHeader';
+function getPanelHeaderUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.panelHeaderComponentName, slot);
+}
+exports.getPanelHeaderUtilityClass = getPanelHeaderUtilityClass;
+exports.panelHeaderClasses = (0, classes_1.generateUtilityClasses)(exports.panelHeaderComponentName, [
+    'root',
+    'content',
+    'title',
+    'endAdornment',
+]);

package/panel/panel-header/panel-header.d.ts

@@ -1,12 +1,22 @@
 import * as React from 'react';
-import { SxProps } from '@mui/system';
-import { ITheme } from '../../theme';
-export declare const panelHeaderComponentName = "QuantumPanelHeader";
-export interface IPanelHeaderProps {
-    ref?: React.Ref<HTMLDivElement>;
-    children?: React.ReactNode;
-    title?: string;
-    sx?: SxProps<ITheme>;
-}
-export declare const Root: import("styled-components").StyledComponent<"div", ITheme, import("@mui/system").MUIStyledCommonProps<ITheme>, never>;
-export declare const PanelHeader: React.ForwardRefExoticComponent<Pick<IPanelHeaderProps, "title" | "children" | "sx"> & React.RefAttributes<HTMLDivElement>>;
+import { IStyledComponentProps } from '../../styled';
+import { ITextProps } from '../../text';
+import { PanelHeaderClasses } from './panel-header-classes';
+export declare const panelHeaderComponentName: "QuantumPanelHeader";
+export declare type IPanelHeaderProps = IStyledComponentProps<{
+    props: {
+        title: React.ReactNode;
+        titleComponent?: React.ElementType<any>;
+        titleTextProps?: Partial<ITextProps>;
+        endAdornment?: React.ReactNode;
+        classes?: Partial<PanelHeaderClasses>;
+    };
+    defaultComponent: 'div';
+}>;
+export declare const PanelHeader: React.ForwardRefExoticComponent<{
+    title: React.ReactNode;
+    titleComponent?: React.ElementType<any> | undefined;
+    titleTextProps?: Partial<ITextProps<"span", {}>> | undefined;
+    endAdornment?: React.ReactNode;
+    classes?: Partial<Record<"title" | "content" | "root" | "endAdornment", string>> | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "classes" | "endAdornment" | "titleComponent" | "titleTextProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/panel/panel-header/panel-header.js

@@ -45,35 +45,40 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelHeader = exports.Root = exports.panelHeaderComponentName = void 0;
+exports.PanelHeader = exports.panelHeaderComponentName = void 0;
 var React = __importStar(require("react"));
 var styled_1 = require("../../styled");
+var classes_1 = require("../../styles/classes");
+var text_1 = require("../../text");
+var utils_1 = require("../../utils");
+var panel_context_1 = require("../panel-context");
+var panel_header_classes_1 = require("./panel-header-classes");
 exports.panelHeaderComponentName = 'QuantumPanelHeader';
-exports.Root = (0, styled_1.styled)('div', { name: exports.panelHeaderComponentName, slot: 'Root' })(function (_a) {
-    var theme = _a.theme;
+var Root = (0, styled_1.styled)('div')(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
     return ({
         display: 'flex',
-        padding: theme.spacing(3),
-        paddingBottom: theme.spacing(2),
-        paddingRight: '70px',
-        alignItems: 'flex-start',
-        minHeight: theme.spacing(8.5),
-        justifyContent: 'space-between',
+        padding: theme.spacing(3, ownerState.isCloseButtonVisible ? 9 : 3, 2, 3),
+        gap: theme.spacing(2),
+        flexGrow: 0,
+        flexShrink: 0,
     });
 });
-var PanelTitle = (0, styled_1.styled)('div', { name: exports.panelHeaderComponentName, slot: 'Title' })(function (_a) {
-    var theme = _a.theme;
-    return theme.tokens.type_heading_100;
-});
-var Container = (0, styled_1.styled)('div', { name: exports.panelHeaderComponentName, slot: 'Container' })(function (_a) {
+var Content = (0, styled_1.styled)('div')({});
+var EndAdornment = (0, styled_1.styled)('div')(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
         alignItems: 'center',
-        minHeight: theme.spacing(3.5),
+        gap: theme.spacing(1),
     });
 });
-exports.PanelHeader = React.forwardRef(function (_a) {
-    var children = _a.children, title = _a.title, sx = _a.sx, ref = _a.ref, rootProps = __rest(_a, ["children", "title", "sx", "ref"]);
-    return (React.createElement(exports.Root, __assign({ ref: ref, sx: sx }, rootProps), title ? React.createElement(PanelTitle, null, title) : React.createElement(Container, null, children)));
+exports.PanelHeader = React.forwardRef(function (props, ref) {
+    var title = props.title, className = props.className, propClasses = props.classes, endAdornment = props.endAdornment, titleTextProps = props.titleTextProps, titleComponent = props.titleComponent, rootProps = __rest(props, ["title", "className", "classes", "endAdornment", "titleTextProps", "titleComponent"]);
+    var classes = (0, classes_1.useMergedClasses)(panel_header_classes_1.panelHeaderClasses, panel_header_classes_1.getPanelHeaderUtilityClass, propClasses);
+    var panelContext = (0, panel_context_1.usePanelContext)();
+    return (React.createElement(Root, __assign({ className: (0, utils_1.clsx)(classes.root, className), ownerState: { isCloseButtonVisible: panelContext.isCloseButtonVisible }, ref: ref }, rootProps),
+        React.createElement(Content, { className: classes.content },
+            React.createElement(text_1.Text, __assign({ className: classes.title, component: titleComponent, variant: "h5" }, titleTextProps), title)),
+        !!endAdornment && React.createElement(EndAdornment, { className: classes.endAdornment }, endAdornment)));
 });

package/panel/panel-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { PanelLayout } from './panel-layout';
+export type { IPanelLayoutProps } from './panel-layout';

package/panel/panel-layout/index.js

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

package/panel/panel-layout/panel-layout-classes.d.ts

@@ -0,0 +1,5 @@
+export declare const panelLayoutComponentName: "QuantumPanelLayout";
+export declare function getPanelLayoutUtilityClass(slot: string): string;
+export declare const panelLayoutClasses: Record<"content" | "root", string>;
+export declare type PanelLayoutClasses = typeof panelLayoutClasses;
+export declare type PanelLayoutClassKey = keyof PanelLayoutClasses;

package/panel/panel-layout/panel-layout-classes.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.panelLayoutClasses = exports.getPanelLayoutUtilityClass = exports.panelLayoutComponentName = void 0;
+var classes_1 = require("../../styles/classes");
+exports.panelLayoutComponentName = 'QuantumPanelLayout';
+function getPanelLayoutUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.panelLayoutComponentName, slot);
+}
+exports.getPanelLayoutUtilityClass = getPanelLayoutUtilityClass;
+exports.panelLayoutClasses = (0, classes_1.generateUtilityClasses)(exports.panelLayoutComponentName, ['root', 'content']);

package/panel/panel-layout/panel-layout.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IStyledComponentProps } from '../../styled';
+import { PanelLayoutClasses } from './panel-layout-classes';
+export declare type IPanelLayoutProps = IStyledComponentProps<{
+    props: {
+        startPanel?: React.ReactNode;
+        endPanel?: React.ReactNode;
+        classes?: Partial<PanelLayoutClasses>;
+        children?: React.ReactNode;
+    };
+    defaultComponent: 'div';
+}>;
+export declare const PanelLayout: React.ForwardRefExoticComponent<{
+    startPanel?: React.ReactNode;
+    endPanel?: React.ReactNode;
+    classes?: Partial<Record<"content" | "root", string>> | undefined;
+    children?: React.ReactNode;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "classes" | "children" | "startPanel" | "endPanel"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/{panel-layout → panel/panel-layout}/panel-layout.js

@@ -47,24 +47,27 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelLayout = void 0;
 var React = __importStar(require("react"));
-var material_1 = require("@mui/material");
-var styled_1 = require("../styled");
-var panel_1 = require("./panel");
-var panelsLayoutComponentName = 'QuantumPanelsLayout';
-var RightPanel = (0, styled_1.styled)(panel_1.Panel, { name: panelsLayoutComponentName, slot: 'RightPanel' })({
-    width: '320px', // fixed width base on design requirements
-});
-var LeftPanel = (0, styled_1.styled)(panel_1.Panel, { name: panelsLayoutComponentName, slot: 'LeftPanel' })({
-    width: '265px', // fixed width base on design requirements
-});
-var Root = (0, styled_1.styled)(material_1.Grid, { name: panelsLayoutComponentName, slot: 'Root' })({
+var styled_1 = require("../../styled");
+var classes_1 = require("../../styles/classes");
+var utils_1 = require("../../utils");
+var panel_layout_classes_1 = require("./panel-layout-classes");
+var Root = (0, styled_1.styled)('div', { name: panel_layout_classes_1.panelLayoutComponentName })({
     display: 'flex',
-    height: '-webkit-fill-available',
+    alignItems: 'stretch',
+    height: '100%',
+    flex: 1,
+    position: 'relative',
+    overflowX: 'hidden',
+});
+var Content = (0, styled_1.styled)('div', { name: panel_layout_classes_1.panelLayoutComponentName, slot: 'Content' })({
+    flex: 1,
+    overflow: 'auto',
 });
 exports.PanelLayout = React.forwardRef(function (props, ref) {
-    var startPanel = props.startPanel, endPanel = props.endPanel, children = props.children, rootProps = __rest(props, ["startPanel", "endPanel", "children"]);
-    return (React.createElement(Root, __assign({ ref: ref }, rootProps),
-        !!startPanel && React.createElement(LeftPanel, { position: "start" }, startPanel),
-        React.createElement(material_1.Grid, { item: true, xs: true }, children),
-        !!endPanel && React.createElement(RightPanel, { position: "end" }, endPanel)));
+    var startPanel = props.startPanel, endPanel = props.endPanel, children = props.children, className = props.className, propClasses = props.classes, rootProps = __rest(props, ["startPanel", "endPanel", "children", "className", "classes"]);
+    var classes = (0, classes_1.useMergedClasses)(panel_layout_classes_1.panelLayoutClasses, panel_layout_classes_1.getPanelLayoutUtilityClass, propClasses);
+    return (React.createElement(Root, __assign({ ref: ref, className: (0, utils_1.clsx)(classes.root, className) }, rootProps),
+        startPanel,
+        React.createElement(Content, { className: classes.content }, children),
+        endPanel));
 });

package/paper/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Paper } from '@mui/material/Paper';
+export { default as Paper, paperClasses } from '@mui/material/Paper';
 export type { PaperProps as IPaperProps } from '@mui/material/Paper';

package/paper/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Paper = void 0;
+exports.paperClasses = exports.Paper = void 0;
 var Paper_1 = require("@mui/material/Paper");
 Object.defineProperty(exports, "Paper", { enumerable: true, get: function () { return __importDefault(Paper_1).default; } });
+Object.defineProperty(exports, "paperClasses", { enumerable: true, get: function () { return Paper_1.paperClasses; } });

package/sidebar/sidebar-new.js

@@ -89,7 +89,7 @@ var Root = (0, styled_1.styled)(drawer_1.Drawer, { name: sidebar_classes_1.sideb
     var top = theme.tokens.size_layout_app_top + theme.tokens.size_layout_app_bar_height;
     return _b = {
             top: top,
-            zIndex: 20,
+            zIndex: theme.zIndex.drawer,
             marginRight: theme.layout.sidebarWidthCollapsed,
             transition: theme.transitions.create('margin', enterTransition),
             willChange: 'margin'

package/sidebar/sidebar-old.js

@@ -88,7 +88,7 @@ var Root = (0, styled_1.styled)(drawer_1.Drawer, { name: sidebar_classes_1.sideb
     var top = theme.tokens.size_layout_app_top + theme.tokens.size_layout_app_bar_height;
     return _b = {
             top: top,
-            zIndex: 20,
+            zIndex: theme.zIndex.drawer,
             marginRight: theme.layout.sidebarWidthCollapsed,
             transition: theme.transitions.create('margin', enterTransition),
             willChange: 'margin'

package/utils/capitalize.d.ts

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

package/utils/capitalize.js

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

package/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { default as clsx } from './clsx';
 export { useControlled } from './use-controlled';
 export { useId } from './use-id';
+export { capitalize } from './capitalize';

package/utils/index.js

@@ -3,10 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useId = exports.useControlled = exports.clsx = void 0;
+exports.capitalize = exports.useId = exports.useControlled = exports.clsx = void 0;
 var clsx_1 = require("./clsx");
 Object.defineProperty(exports, "clsx", { enumerable: true, get: function () { return __importDefault(clsx_1).default; } });
 var use_controlled_1 = require("./use-controlled");
 Object.defineProperty(exports, "useControlled", { enumerable: true, get: function () { return use_controlled_1.useControlled; } });
 var use_id_1 = require("./use-id");
 Object.defineProperty(exports, "useId", { enumerable: true, get: function () { return use_id_1.useId; } });
+var capitalize_1 = require("./capitalize");
+Object.defineProperty(exports, "capitalize", { enumerable: true, get: function () { return capitalize_1.capitalize; } });

package/esm/panel/panel-content/index.js

@@ -1 +0,0 @@
-export { PanelContent } from './panel-content';