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

package/dist/esm/components/notification/MrlToast/MrlToast.module.css

@@ -0,0 +1,123 @@
+.MrlToast--u3Q1G {
+  align-items: center;
+  background-color: rgba(var(--mrl-status-info), 1);
+  border-radius: var(--mrl-border-radius-container);
+  box-shadow: var(--mrl-shadows-lifted);
+  color: rgba(var(--mrl-white), 1);
+  display: flex;
+  justify-content: space-between;
+  max-width: 32rem;
+  min-width: 8.75rem;
+  padding: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-spacing-05) calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-spacing-03);
+  pointer-events: auto;
+  width: fit-content;
+  z-index: 800;
+}
+.MrlToast--u3Q1G.has-cta--D4oXS {
+  padding: var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-03);
+}
+.MrlToast--u3Q1G.has-avatar--NtQCE {
+  padding-left: var(--mrl-spacing-02);
+}
+.MrlToast--u3Q1G.closing--h-OQv {
+  animation: fadeout--iyDeX 0.3s forwards;
+}
+@keyframes fadeout--iyDeX {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+.MrlToast--u3Q1G .content--1ASLm {
+  align-items: center;
+  display: flex;
+}
+.MrlToast--u3Q1G .content--1ASLm .iconWrapper--ERAaa {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: var(--mrl-spacing-06);
+  margin-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+}
+.MrlToast--u3Q1G .content--1ASLm .avatarWrapper--WjoFi {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: var(--mrl-spacing-06);
+  margin-right: var(--mrl-spacing-02);
+}
+.MrlToast--u3Q1G .content--1ASLm .textContent--EEcY2 {
+  font-size: var(--mrl-font-size-03);
+  letter-spacing: var(--mrl-letter-spacing-03);
+  line-height: var(--mrl-line-height-02);
+}
+.MrlToast--u3Q1G .content--1ASLm .primaryMessage--rajY1 {
+  font-family: var(--mrl-heading-font);
+  font-weight: var(--mrl-font-weight-04);
+}
+.MrlToast--u3Q1G .content--1ASLm .secondaryMessage---a7x9 {
+  font-family: var(--mrl-body-font);
+  font-weight: var(--mrl-font-weight-01);
+}
+.MrlToast--u3Q1G .content--1ASLm .link--fzNzY {
+  margin-left: var(--mrl-spacing-02);
+}
+.MrlToast--u3Q1G .cta-container--9eylc {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  margin-left: calc(var(--mrl-spacing-03) + var(--mrl-spacing-01));
+}
+.MrlToast--u3Q1G .cta--bYd1i {
+  display: flex;
+  gap: var(--mrl-space-inline-sibling);
+  vertical-align: middle;
+}
+.MrlToast--u3Q1G .cta--secondary--TplUU {
+  margin-right: var(--mrl-spacing-02);
+}
+.MrlToast--u3Q1G .cta--close--olo-Z {
+  margin-left: var(--mrl-spacing-02);
+}
+.MrlToast--u3Q1G .cta--close--olo-Z:only-child {
+  margin-left: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+}
+.MrlToast--u3Q1G.infoNotification--bHMU0 {
+  background-color: rgba(var(--mrl-status-info), 1);
+}
+.MrlToast--u3Q1G.warningNotification--OMP27 {
+  background-color: rgba(var(--mrl-status-warning), 1);
+  color: var(--mrl-color-text);
+}
+.MrlToast--u3Q1G.successNotification--euGsG {
+  background-color: rgba(var(--mrl-status-success), 1);
+}
+.MrlToast--u3Q1G.errorNotification--yYdgf {
+  background-color: rgba(var(--mrl-status-error), 1);
+}
+.MrlToast--u3Q1G.privateNotification--l-FXD {
+  background-color: rgba(var(--mrl-status-private), 1);
+}
+.MrlToast--u3Q1G.generalNotification--ahU7q {
+  background-color: var(--mrl-color-background-inverse);
+  color: var(--mrl-color-text-inverse);
+  max-width: 100%;
+}
+.MrlToast--u3Q1G.generalNotification--ahU7q .secondaryMessage---a7x9 {
+  color: var(--mrl-color-text-inverse-secondary);
+}
+.MrlToast--u3Q1G.collaboratorNotification--wibsE {
+  background-color: transparent;
+}
+.MrlToast--u3Q1G.collaboratorNotification--wibsE .primaryMessage--rajY1 {
+  align-items: center;
+  display: flex;
+  gap: var(--mrl-spacing-04);
+}
+.MrlToast--u3Q1G.collaboratorNotification--wibsE.darkCollaborator--CLKL5 {
+  color: var(--mrl-color-text);
+}

package/dist/esm/components/notification/MrlToast/MrlToast.module.scss.js

@@ -0,0 +1,27 @@
+import "./MrlToast.module.css";
+export default {
+	"MrlToast": "MrlToast--u3Q1G",
+	"has-cta": "has-cta--D4oXS",
+	"has-avatar": "has-avatar--NtQCE",
+	"closing": "closing--h-OQv",
+	"fadeout": "fadeout--iyDeX",
+	"content": "content--1ASLm",
+	"iconWrapper": "iconWrapper--ERAaa",
+	"avatarWrapper": "avatarWrapper--WjoFi",
+	"textContent": "textContent--EEcY2",
+	"primaryMessage": "primaryMessage--rajY1",
+	"secondaryMessage": "secondaryMessage---a7x9",
+	"link": "link--fzNzY",
+	"cta-container": "cta-container--9eylc",
+	"cta": "cta--bYd1i",
+	"cta--secondary": "cta--secondary--TplUU",
+	"cta--close": "cta--close--olo-Z",
+	"infoNotification": "infoNotification--bHMU0",
+	"warningNotification": "warningNotification--OMP27",
+	"successNotification": "successNotification--euGsG",
+	"errorNotification": "errorNotification--yYdgf",
+	"privateNotification": "privateNotification--l-FXD",
+	"generalNotification": "generalNotification--ahU7q",
+	"collaboratorNotification": "collaboratorNotification--wibsE",
+	"darkCollaborator": "darkCollaborator--CLKL5"
+};

package/dist/esm/components/notification/MrlToast/index.js

@@ -0,0 +1 @@
+export { MrlToast } from './MrlToast';

package/dist/esm/components/notification/constants.js

@@ -0,0 +1,35 @@
+/*
+ * Notification component
+ * ------------------------------------------------------------------
+ */
+export const allowedValues = {
+    kinds: [
+        'info',
+        'success',
+        'warning',
+        'error',
+        'private',
+        'general'
+        // @todo need to remove 'private' once we release v2
+    ],
+    // A notification should never have a level 1 hierarchy.
+    // They should always have a page heading.
+    levels: ['2', '3', '4', '5', '6'],
+    scopes: ['page', 'inline'],
+    states: ['open', 'close']
+};
+/**
+ * Default values for props on the Notification component;
+ * Shared between the component and Storybook
+ */
+export const defaults = {
+    dismissible: true,
+    kind: 'info',
+    level: '2',
+    scope: 'page',
+    state: 'open'
+};
+/**
+ * Default transition duration for the notification transitions
+ */
+export const TransitionDuration = 333;

package/dist/esm/components/notification/index.js

@@ -0,0 +1,3 @@
+export * from './MrlBlockNotification';
+export * from './MrlToast';
+export * from './MrlInlineMessage';

package/dist/esm/components/pagination/MrlPagination/MrlPagination.js

@@ -0,0 +1,26 @@
+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;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './MrlPagination.module.scss.js';
+/**
+ * Pagination component
+ *
+ * @param {MrlPaginationProps} props - the component props
+ * @returns pagination
+ */
+export function MrlPagination(_a) {
+    var { children, className, heading = 'Pagination', style } = _a, rest = __rest(_a, ["children", "className", "heading", "style"]);
+    const allClasses = classnames(styles['MrlPagination'], className);
+    return (React.createElement("nav", Object.assign({ className: allClasses, "aria-label": heading, style: style }, rest),
+        React.createElement("ul", { className: styles.MrlPaginationList }, children)));
+}

package/dist/esm/components/pagination/MrlPagination/MrlPagination.module.css

@@ -0,0 +1,35 @@
+.MrlPagination--P-LYE {
+  display: block;
+}
+
+.MrlPaginationList--xYO-2 {
+  align-items: center;
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.MrlPaginationItem--cTbMV {
+  height: var(--mrl-spacing-06);
+  margin: 0;
+  padding: 0;
+}
+
+.MrlPaginationText--MGyj7 {
+  display: block;
+  font-size: var(--mrl-font-size-03);
+  padding-top: 0.1875rem;
+}
+
+.MrlPaginationRange--hirG2 {
+  font-weight: var(--mrl-font-weight-04);
+  padding: 0 var(--mrl-spacing-02);
+}
+
+.MrlPaginationDash--epuoA {
+  font-weight: var(--mrl-font-weight-04);
+}
+
+.MrlPaginationTotal--b-7Vk {
+  padding: 0 var(--mrl-spacing-02);
+}

package/dist/esm/components/pagination/MrlPagination/MrlPagination.module.scss.js

@@ -0,0 +1,10 @@
+import "./MrlPagination.module.css";
+export default {
+	"MrlPagination": "MrlPagination--P-LYE",
+	"MrlPaginationList": "MrlPaginationList--xYO-2",
+	"MrlPaginationItem": "MrlPaginationItem--cTbMV",
+	"MrlPaginationText": "MrlPaginationText--MGyj7",
+	"MrlPaginationRange": "MrlPaginationRange--hirG2",
+	"MrlPaginationDash": "MrlPaginationDash--epuoA",
+	"MrlPaginationTotal": "MrlPaginationTotal--b-7Vk"
+};

package/dist/esm/components/pagination/MrlPagination/index.js

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

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

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

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

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

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

@@ -0,0 +1,36 @@
+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;
+};
+import classnames from 'classnames';
+import * as React from 'react';
+import { MrlLiveRegion } from '../../live-region';
+import styles from '../MrlPagination/MrlPagination.module.scss.js';
+/**
+ * Pagination text component
+ * @param {MrlPaginationTextProps} props - the component props
+ * @returns pagination text
+ */
+export function MrlPaginationText(_a) {
+    var { className, isEstimate, rangeStart, rangeEnd, textClass, total } = _a, rest = __rest(_a, ["className", "isEstimate", "rangeStart", "rangeEnd", "textClass", "total"]);
+    const itemClasses = classnames(styles['MrlPaginationItem'], className);
+    const textClasses = classnames(styles['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: styles.MrlPaginationRange }, format(rangeStart)),
+            React.createElement("span", { className: styles.MrlPaginationDash }, "-"),
+            React.createElement("span", { className: styles.MrlPaginationRange }, format(rangeEnd)),
+            "of",
+            React.createElement("span", { className: styles.MrlPaginationTotal }, totalText)),
+        React.createElement(MrlLiveRegion, { ariaLive: "assertive", visible: false, srContent: accessibleText, shouldClearContent: true })));
+}

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export * from './MrlPagination';
+export * from './MrlPaginationButton';
+export * from './MrlPaginationText';

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

@@ -0,0 +1,88 @@
+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;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './MrlPanel.module.scss.js';
+import { MrlIconButton } from '../../button';
+import { MrlSvg } from '../../svg';
+import { close } from '@muraldevkit/ds-icons';
+import { MrlFocusTrap } from '../../focus-trap';
+import { MrlText, MrlTextHeading } from '../../text';
+import { MrlDivider } from '../../divider';
+import { MrlPanelContext } from '../MrlPanelContext';
+import { useHasFocusableDescendant } from '../../../hooks/useHasFocusableDescendant';
+import { useScrollbarInfo } from '../../../hooks/useScrollbarInfo';
+import { getUniqueId } from '../../../utils';
+/**
+ * MrlPanel component.
+ *
+ * @param props The MrlPanel component properties.
+ * @returns The MrlPanel component.
+ */
+export const 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 ? getUniqueId('mrl-panel-description') : '');
+    const { scrollableContainerRef, hasVerticalScrollbar, hasHorizontalScrollbar, horizontalScrollbarHeight, verticalScrollbarWidth } = useScrollbarInfo();
+    const hasFocusableDescendant = 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 = classnames(styles['MrlPanel'], 'MrlPanel', className);
+    return (React.createElement(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(MrlFocusTrap, { containerRef: panelRef, disableAutofocus: disableAutofocus },
+                React.createElement("header", { className: classnames(styles['MrlPanel--header'], 'MrlPanel--header') },
+                    !header && (React.createElement("div", { className: classnames(styles['MrlPanel--header-content'], 'MrlPanel--header-content', {
+                            [styles['MrlPanel--header-content-description']]: !!description
+                        }) },
+                        React.createElement(MrlTextHeading, { className: styles['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: classnames(styles['MrlPanel--top-actions'], 'MrlPanel--top-actions') },
+                                topActions,
+                                React.createElement(MrlDivider, { orientation: "vertical", spacing: "small", length: "var(--mrl-spacing-06)", className: classnames(styles['MrlPanel--top-actions-divider'], 'MrlPanel--top-actions-divider') })))))),
+                    header,
+                    React.createElement(MrlIconButton, { "data-qa": `${qa}-close-button`, wrapperClassName: classnames(styles['MrlPanel--close'], 'MrlPanel--close'), icon: React.createElement(MrlSvg, { svg: 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: classnames(styles['MrlPanel--scrollable'], 'MrlPanel--scrollable', {
+                        [styles['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(MrlText, { attrs: {
+                            className: classnames(styles['MrlPanel--description'], 'MrlPanel--description'),
+                            id: descriptionIdRef.current
+                        }, size: "xsmall", text: description })),
+                    children)))));
+});

package/dist/esm/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/esm/components/panel/MrlPanel/MrlPanel.module.scss.js

@@ -0,0 +1,13 @@
+import "./MrlPanel.module.css";
+export 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/esm/components/panel/MrlPanel/index.js

@@ -0,0 +1 @@
+export { MrlPanel } from './MrlPanel';

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export const initialState = {
+    hasHorizontalScrollbar: false,
+    hasVerticalScrollbar: false,
+    horizontalScrollbarHeight: 0,
+    verticalScrollbarWidth: 0
+};
+export const MrlPanelContext = React.createContext(initialState);
+/**
+ * Returns the MrlPanelContext state.
+ *
+ * @returns The MrlPanelContext state.
+ */
+export const useMrlPanelContext = () => {
+    const context = React.useContext(MrlPanelContext);
+    if (!context) {
+        throw new Error('MrlPanelContext must be used within a MrlPanelContextProvider');
+    }
+    return context;
+};

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

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

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

@@ -0,0 +1,29 @@
+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;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './MrlPanelFooter.module.scss.js';
+import { MrlText } from '../../text';
+import { MrlDivider } from '../../divider';
+/**
+ * MrlPanelFooter component.
+ *
+ * @param props The MrlPanelFooter component properties.
+ * @returns The MrlPanelFooter component.
+ */
+export const 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: classnames(styles['MrlPanelFooter'], 'MrlPanelFooter', className) }),
+        hasDivider && (React.createElement(MrlDivider, { spacing: "small", className: classnames(styles['MrlPanelFooter--divider'], 'MrlPanelFooter--divider') })),
+        typeof children === 'string' && React.createElement(MrlText, { size: "xsmall", text: children }),
+        typeof children === 'object' && children));
+});

package/dist/esm/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/esm/components/panel/MrlPanelFooter/MrlPanelFooter.module.scss.js

@@ -0,0 +1,5 @@
+import "./MrlPanelFooter.module.css";
+export default {
+	"MrlPanelFooter": "MrlPanelFooter--Mt1kC",
+	"MrlPanelFooter--divider": "MrlPanelFooter--divider--9EIG3"
+};

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

@@ -0,0 +1 @@
+export { MrlPanelFooter } from './MrlPanelFooter';

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

@@ -0,0 +1,24 @@
+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;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './MrlPanelStickyHeader.module.scss.js';
+/**
+ * MrlPanelStickyHeader component.
+ *
+ * @param props The MrlPanelStickyHeader component properties.
+ * @returns The MrlPanel component.
+ */
+export const MrlPanelStickyHeader = (_a) => {
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", Object.assign({}, rest, { className: classnames(styles['MrlPanelStickyHeader'], 'MrlPanelStickyHeader', className) }), children));
+};

package/dist/esm/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;
+}