@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-avUr.1

package/dist/cjs/components/pagination/MrlPaginationButton/MrlPaginationButton.js

@@ -0,0 +1,71 @@
+"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;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlPaginationButton = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const MrlIconButton_1 = require("../../button/MrlIconButton/MrlIconButton");
+const MrlSvg_1 = require("../../svg/MrlSvg/MrlSvg");
+const constants_1 = require("../../tooltip/constants");
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const MrlPagination_module_scss_1 = __importDefault(require("../MrlPagination/MrlPagination.module.scss.js"));
+/**
+ * Pagination button component
+ * @param {MrlPaginationButtonProps} props - the component props
+ * @returns a pagintaion button
+ */
+function MrlPaginationButton(_a) {
+    var { buttonClass, className, disabled, kind, handleClick, text, tooltipAnchor = constants_1.MrlTooltipDefaults.anchor, tooltipPosition = 'top' } = _a, rest = __rest(_a, ["buttonClass", "className", "disabled", "kind", "handleClick", "text", "tooltipAnchor", "tooltipPosition"]);
+    const itemClasses = (0, classnames_1.default)(MrlPagination_module_scss_1.default['MrlPaginationItem'], className);
+    const icons = {
+        first: ds_icons_1.chevronGoToFirst,
+        last: ds_icons_1.chevronGoToLast,
+        next: ds_icons_1.chevronRight,
+        previous: ds_icons_1.chevronLeft
+    };
+    const defaultText = {
+        first: 'Beginning',
+        last: 'End',
+        next: 'Next',
+        previous: 'Previous'
+    };
+    return (React.createElement("li", { className: itemClasses },
+        React.createElement(MrlIconButton_1.MrlIconButton, Object.assign({}, rest, { className: buttonClass, kind: "ghost", icon: React.createElement(MrlSvg_1.MrlSvg, { svg: icons[kind] }), onClick: handleClick, position: tooltipPosition, state: disabled ? 'disabled' : 'default', text: text || defaultText[kind], size: "xsmall", tipAnchor: tooltipAnchor }))));
+}
+exports.MrlPaginationButton = MrlPaginationButton;

package/dist/cjs/components/pagination/MrlPaginationButton/index.js

@@ -0,0 +1,17 @@
+"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 __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("./MrlPaginationButton"), exports);

package/dist/cjs/components/pagination/MrlPaginationText/MrlPaginationText.js

@@ -0,0 +1,66 @@
+"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;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlPaginationText = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const live_region_1 = require("../../live-region");
+const MrlPagination_module_scss_1 = __importDefault(require("../MrlPagination/MrlPagination.module.scss.js"));
+/**
+ * Pagination text component
+ * @param {MrlPaginationTextProps} props - the component props
+ * @returns pagination text
+ */
+function MrlPaginationText(_a) {
+    var { className, isEstimate, rangeStart, rangeEnd, textClass, total } = _a, rest = __rest(_a, ["className", "isEstimate", "rangeStart", "rangeEnd", "textClass", "total"]);
+    const itemClasses = (0, classnames_1.default)(MrlPagination_module_scss_1.default['MrlPaginationItem'], className);
+    const textClasses = (0, classnames_1.default)(MrlPagination_module_scss_1.default['MrlPaginationText'], textClass);
+    const { format } = Intl.NumberFormat();
+    const totalText = isEstimate ? `${format(total)}+` : format(total);
+    const accessibleText = `Results ${format(rangeStart)} through ${format(rangeEnd)} of ${totalText}`;
+    return (React.createElement("li", Object.assign({}, rest, { className: itemClasses }),
+        React.createElement("span", { "aria-current": "true", "aria-label": accessibleText, className: textClasses },
+            React.createElement("span", { className: MrlPagination_module_scss_1.default.MrlPaginationRange }, format(rangeStart)),
+            React.createElement("span", { className: MrlPagination_module_scss_1.default.MrlPaginationDash }, "-"),
+            React.createElement("span", { className: MrlPagination_module_scss_1.default.MrlPaginationRange }, format(rangeEnd)),
+            "of",
+            React.createElement("span", { className: MrlPagination_module_scss_1.default.MrlPaginationTotal }, totalText)),
+        React.createElement(live_region_1.MrlLiveRegion, { ariaLive: "assertive", visible: false, srContent: accessibleText, shouldClearContent: true })));
+}
+exports.MrlPaginationText = MrlPaginationText;

package/dist/cjs/components/pagination/MrlPaginationText/index.js

@@ -0,0 +1,17 @@
+"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 __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("./MrlPaginationText"), exports);

package/dist/cjs/components/pagination/constants.js

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

package/dist/cjs/components/pagination/index.js

@@ -0,0 +1,19 @@
+"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 __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("./MrlPagination"), exports);
+__exportStar(require("./MrlPaginationButton"), exports);
+__exportStar(require("./MrlPaginationText"), exports);

package/dist/cjs/components/panel/MrlPanel/MrlPanel.js

@@ -0,0 +1,117 @@
+"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;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlPanel = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const MrlPanel_module_scss_1 = __importDefault(require("./MrlPanel.module.scss.js"));
+const button_1 = require("../../button");
+const svg_1 = require("../../svg");
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const focus_trap_1 = require("../../focus-trap");
+const text_1 = require("../../text");
+const divider_1 = require("../../divider");
+const MrlPanelContext_1 = require("../MrlPanelContext");
+const useHasFocusableDescendant_1 = require("../../../hooks/useHasFocusableDescendant");
+const useScrollbarInfo_1 = require("../../../hooks/useScrollbarInfo");
+const utils_1 = require("../../../utils");
+/**
+ * MrlPanel component.
+ *
+ * @param props The MrlPanel component properties.
+ * @returns The MrlPanel component.
+ */
+exports.MrlPanel = React.forwardRef(function MrlPanel(props, ref) {
+    const { className, title, id, children, hasStickyHeader, header, description, disableAutofocus, topActions, hasDataScrollAnchor, onClose, ['data-qa']: qa = 'panel' } = props, rest = __rest(props, ["className", "title", "id", "children", "hasStickyHeader", "header", "description", "disableAutofocus", "topActions", "hasDataScrollAnchor", "onClose", 'data-qa']);
+    const panelRef = React.useRef(null);
+    // Unique ID for aria-describedby
+    const descriptionIdRef = React.useRef(description ? (0, utils_1.getUniqueId)('mrl-panel-description') : '');
+    const { scrollableContainerRef, hasVerticalScrollbar, hasHorizontalScrollbar, horizontalScrollbarHeight, verticalScrollbarWidth } = (0, useScrollbarInfo_1.useScrollbarInfo)();
+    const hasFocusableDescendant = (0, useHasFocusableDescendant_1.useHasFocusableDescendant)(scrollableContainerRef);
+    React.useImperativeHandle(ref, () => {
+        return panelRef.current;
+    });
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.key === 'Escape' && typeof onClose === 'function') {
+            e.preventDefault();
+            e.stopPropagation();
+            onClose();
+        }
+    }, [onClose]);
+    const panelClasses = (0, classnames_1.default)(MrlPanel_module_scss_1.default['MrlPanel'], 'MrlPanel', className);
+    return (React.createElement(MrlPanelContext_1.MrlPanelContext.Provider, { value: {
+            hasHorizontalScrollbar,
+            hasVerticalScrollbar,
+            horizontalScrollbarHeight,
+            verticalScrollbarWidth
+        } },
+        React.createElement("div", Object.assign({}, rest, { className: panelClasses, "aria-describedby": descriptionIdRef.current || props['aria-describedby'], "aria-label": title || props['aria-label'], "aria-modal": "false", "data-qa": qa, id: id, onKeyDown: handleKeyDown, role: "dialog", ref: panelRef }),
+            React.createElement(focus_trap_1.MrlFocusTrap, { containerRef: panelRef, disableAutofocus: disableAutofocus },
+                React.createElement("header", { className: (0, classnames_1.default)(MrlPanel_module_scss_1.default['MrlPanel--header'], 'MrlPanel--header') },
+                    !header && (React.createElement("div", { className: (0, classnames_1.default)(MrlPanel_module_scss_1.default['MrlPanel--header-content'], 'MrlPanel--header-content', {
+                            [MrlPanel_module_scss_1.default['MrlPanel--header-content-description']]: !!description
+                        }) },
+                        React.createElement(text_1.MrlTextHeading, { className: MrlPanel_module_scss_1.default['MrlPanel--title'], attrs: {
+                                'data-qa': `${qa}-header-title`,
+                                id
+                            }, hierarchy: "primary", kind: "title", level: "2", size: "medium", text: title }),
+                        topActions && (React.createElement(React.Fragment, null,
+                            React.createElement("div", { className: (0, classnames_1.default)(MrlPanel_module_scss_1.default['MrlPanel--top-actions'], 'MrlPanel--top-actions') },
+                                topActions,
+                                React.createElement(divider_1.MrlDivider, { orientation: "vertical", spacing: "small", length: "var(--mrl-spacing-06)", className: (0, classnames_1.default)(MrlPanel_module_scss_1.default['MrlPanel--top-actions-divider'], 'MrlPanel--top-actions-divider') })))))),
+                    header,
+                    React.createElement(button_1.MrlIconButton, { "data-qa": `${qa}-close-button`, wrapperClassName: (0, classnames_1.default)(MrlPanel_module_scss_1.default['MrlPanel--close'], 'MrlPanel--close'), icon: React.createElement(svg_1.MrlSvg, { svg: ds_icons_1.close }), onClick: onClose, text: "Close", size: "small", state: "default", position: "bottom", tipAnchor: "center", kind: "ghost" })),
+                React.createElement("div", Object.assign({ ref: scrollableContainerRef, "data-scroll-anchor": hasDataScrollAnchor, "data-qa": `${qa}-scrollable`, className: (0, classnames_1.default)(MrlPanel_module_scss_1.default['MrlPanel--scrollable'], 'MrlPanel--scrollable', {
+                        [MrlPanel_module_scss_1.default['MrlPanel--scrollable-has-sticky-header']]: hasStickyHeader
+                    }) }, (verticalScrollbarWidth > 0 && {
+                    style: {
+                        paddingRight: `calc(var(--mrl-spacing-06) - ${verticalScrollbarWidth}px)`
+                    }
+                }), (hasVerticalScrollbar && Object.assign({ 'aria-label': title
+                        ? `${title} panel scrollable content`
+                        : 'Panel scrollable content', role: 'region' }, (!hasFocusableDescendant && {
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                    tabIndex: 0
+                })))),
+                    description && (React.createElement(text_1.MrlText, { attrs: {
+                            className: (0, classnames_1.default)(MrlPanel_module_scss_1.default['MrlPanel--description'], 'MrlPanel--description'),
+                            id: descriptionIdRef.current
+                        }, size: "xsmall", text: description })),
+                    children)))));
+});

package/dist/cjs/components/panel/MrlPanel/MrlPanel.module.css

@@ -0,0 +1,60 @@
+.MrlPanel---L-KV {
+  background-color: var(--mrl-color-background);
+  border-radius: var(--mrl-border-radius-container);
+  box-shadow: var(--mrl-shadows-raised);
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  max-height: 100%;
+  overflow: hidden;
+  padding: var(--mrl-spacing-06) 0 0 0;
+  pointer-events: auto;
+  position: relative;
+  width: 16.75rem;
+  z-index: 400;
+}
+.MrlPanel---L-KV .MrlPanel--header-content--X73O6 {
+  margin-bottom: calc(var(--mrl-spacing-06) - var(--mrl-spacing-01));
+  padding: 0 var(--mrl-spacing-09) 0 var(--mrl-spacing-06);
+}
+.MrlPanel---L-KV .MrlPanel--header-content--X73O6.MrlPanel--header-content-description--0IL1Q {
+  margin-bottom: calc(var(--mrl-spacing-04) - var(--mrl-spacing-01));
+}
+.MrlPanel---L-KV .MrlPanel--header-content--X73O6 .MrlPanel--title--hBdhz {
+  height: auto;
+}
+.MrlPanel---L-KV .MrlPanel--header-content--X73O6 .MrlPanel--top-actions--pcrHL {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  right: calc(var(--mrl-spacing-10) - var(--mrl-spacing-02));
+  top: var(--mrl-spacing-04);
+}
+.MrlPanel---L-KV .MrlPanel--header-content--X73O6 .MrlPanel--top-actions-divider--c6EgV {
+  align-self: auto;
+}
+.MrlPanel---L-KV .MrlPanel--close--RkHDq {
+  position: absolute;
+  right: var(--mrl-spacing-04);
+  top: var(--mrl-spacing-04);
+}
+
+.MrlPanel--scrollable--L7-NV {
+  outline: none;
+  overflow: clip scroll;
+  overflow-y: overlay;
+  padding-left: var(--mrl-spacing-06);
+  padding-right: var(--mrl-spacing-06);
+  padding-top: var(--mrl-spacing-01);
+}
+.MrlPanel--scrollable--L7-NV:focus-visible {
+  outline: var(--mrl-spacing-01) var(--mrl-color-focus) solid;
+}
+.MrlPanel--scrollable--L7-NV.MrlPanel--scrollable-has-sticky-header--YNdZH {
+  padding-top: 0;
+}
+.MrlPanel--scrollable--L7-NV .MrlPanel--description--ItNuy {
+  margin-bottom: var(--mrl-spacing-06);
+  padding-right: var(--mrl-space-inset-container-large);
+}

package/dist/cjs/components/panel/MrlPanel/MrlPanel.module.scss.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlPanel.module.css");
+exports.default = {
+	"MrlPanel": "MrlPanel---L-KV",
+	"MrlPanel--header-content": "MrlPanel--header-content--X73O6",
+	"MrlPanel--header-content-description": "MrlPanel--header-content-description--0IL1Q",
+	"MrlPanel--title": "MrlPanel--title--hBdhz",
+	"MrlPanel--top-actions": "MrlPanel--top-actions--pcrHL",
+	"MrlPanel--top-actions-divider": "MrlPanel--top-actions-divider--c6EgV",
+	"MrlPanel--close": "MrlPanel--close--RkHDq",
+	"MrlPanel--scrollable": "MrlPanel--scrollable--L7-NV",
+	"MrlPanel--scrollable-has-sticky-header": "MrlPanel--scrollable-has-sticky-header--YNdZH",
+	"MrlPanel--description": "MrlPanel--description--ItNuy"
+};

package/dist/cjs/components/panel/MrlPanel/index.js

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

package/dist/cjs/components/panel/MrlPanelContext/MrlPanelContext.js

@@ -0,0 +1,47 @@
+"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.useMrlPanelContext = exports.MrlPanelContext = exports.initialState = void 0;
+const React = __importStar(require("react"));
+exports.initialState = {
+    hasHorizontalScrollbar: false,
+    hasVerticalScrollbar: false,
+    horizontalScrollbarHeight: 0,
+    verticalScrollbarWidth: 0
+};
+exports.MrlPanelContext = React.createContext(exports.initialState);
+/**
+ * Returns the MrlPanelContext state.
+ *
+ * @returns The MrlPanelContext state.
+ */
+const useMrlPanelContext = () => {
+    const context = React.useContext(exports.MrlPanelContext);
+    if (!context) {
+        throw new Error('MrlPanelContext must be used within a MrlPanelContextProvider');
+    }
+    return context;
+};
+exports.useMrlPanelContext = useMrlPanelContext;

package/dist/cjs/components/panel/MrlPanelContext/index.js

@@ -0,0 +1,17 @@
+"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 __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("./MrlPanelContext"), exports);

package/dist/cjs/components/panel/MrlPanelFooter/MrlPanelFooter.js

@@ -0,0 +1,58 @@
+"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;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlPanelFooter = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const MrlPanelFooter_module_scss_1 = __importDefault(require("./MrlPanelFooter.module.scss.js"));
+const text_1 = require("../../text");
+const divider_1 = require("../../divider");
+/**
+ * MrlPanelFooter component.
+ *
+ * @param props The MrlPanelFooter component properties.
+ * @returns The MrlPanelFooter component.
+ */
+exports.MrlPanelFooter = React.forwardRef(function MrlPanelFooter(_a, ref) {
+    var { children, hasDivider, className } = _a, rest = __rest(_a, ["children", "hasDivider", "className"]);
+    return (React.createElement("footer", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(MrlPanelFooter_module_scss_1.default['MrlPanelFooter'], 'MrlPanelFooter', className) }),
+        hasDivider && (React.createElement(divider_1.MrlDivider, { spacing: "small", className: (0, classnames_1.default)(MrlPanelFooter_module_scss_1.default['MrlPanelFooter--divider'], 'MrlPanelFooter--divider') })),
+        typeof children === 'string' && React.createElement(text_1.MrlText, { size: "xsmall", text: children }),
+        typeof children === 'object' && children));
+});

package/dist/cjs/components/panel/MrlPanelFooter/MrlPanelFooter.module.css

@@ -0,0 +1,12 @@
+.MrlPanelFooter--Mt1kC {
+  background-color: var(--mrl-color-background);
+  bottom: var(--mrl-spacing-03);
+  color: rgba(var(--mrl-gray-60), 1);
+  left: 0;
+  margin: 0 var(--mrl-spacing-06);
+  position: absolute;
+  width: calc(100% - var(--mrl-spacing-06) * 2);
+}
+.MrlPanelFooter--Mt1kC .MrlPanelFooter--divider--9EIG3 {
+  margin: 0 0 var(--mrl-spacing-02) 0;
+}

package/dist/cjs/components/panel/MrlPanelFooter/MrlPanelFooter.module.scss.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlPanelFooter.module.css");
+exports.default = {
+	"MrlPanelFooter": "MrlPanelFooter--Mt1kC",
+	"MrlPanelFooter--divider": "MrlPanelFooter--divider--9EIG3"
+};

package/dist/cjs/components/panel/MrlPanelFooter/index.js

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

package/dist/cjs/components/panel/MrlPanelStickyHeader/MrlPanelStickyHeader.js

@@ -0,0 +1,54 @@
+"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;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlPanelStickyHeader = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const MrlPanelStickyHeader_module_scss_1 = __importDefault(require("./MrlPanelStickyHeader.module.scss.js"));
+/**
+ * MrlPanelStickyHeader component.
+ *
+ * @param props The MrlPanelStickyHeader component properties.
+ * @returns The MrlPanel component.
+ */
+const MrlPanelStickyHeader = (_a) => {
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(MrlPanelStickyHeader_module_scss_1.default['MrlPanelStickyHeader'], 'MrlPanelStickyHeader', className) }), children));
+};
+exports.MrlPanelStickyHeader = MrlPanelStickyHeader;

package/dist/cjs/components/panel/MrlPanelStickyHeader/MrlPanelStickyHeader.module.css

@@ -0,0 +1,14 @@
+.MrlPanelStickyHeader--YP3CO {
+  background-color: var(--mrl-color-background);
+  position: sticky;
+  top: 0;
+}
+.MrlPanelStickyHeader--YP3CO::after {
+  background: var(--mrl-color-background);
+  content: "";
+  display: block;
+  inset: 0 calc(-1 * var(--mrl-spacing-03));
+  pointer-events: all;
+  position: absolute;
+  z-index: -1;
+}

package/dist/cjs/components/panel/MrlPanelStickyHeader/MrlPanelStickyHeader.module.scss.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlPanelStickyHeader.module.css");
+exports.default = {
+	"MrlPanelStickyHeader": "MrlPanelStickyHeader--YP3CO"
+};

package/dist/cjs/components/panel/MrlPanelStickyHeader/index.js

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