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

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

@@ -0,0 +1,3 @@
+export * from './MrlGrid';
+export * from './MrlRow';
+export * from './MrlCol';

package/dist/esm/components/index.js

@@ -0,0 +1,34 @@
+export * from './avatar';
+export * from './badge';
+export * from './button';
+export * from './container';
+export * from './divider';
+export * from './error-boundary';
+export * from './focus-trap';
+export * from './form';
+export * from './grid';
+export * from './keystroke';
+export * from './layout';
+export * from './link';
+export * from './loader';
+export * from './menu';
+export * from './modal';
+export * from './notification';
+export * from './pagination';
+export * from './popover';
+export * from './svg';
+export * from './table';
+export * from './tabs';
+export * from './text';
+export * from './tooltip';
+export * from './portal';
+export * from './navigation-sidebar';
+export * from './skeleton';
+export * from './empty';
+export * from './live-region';
+export * from './callout';
+export * from './panel';
+export * from './rovingTabindex';
+export * from './toolbar';
+export * from './filter';
+export * from './breadcrumb';

package/dist/esm/components/keystroke/MrlKeystroke/MrlKeystroke.js

@@ -0,0 +1,28 @@
+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 './MrlKeystroke.module.scss.js';
+/**
+ * MrlKeystroke Component
+ *
+ * Displays keyboard shortcuts and keystroke combinations in a visually consistent format.
+ * Useful for showing users available keyboard shortcuts in tooltips, menus, help text, or command palettes.
+ *
+ * @param props - component props
+ * @returns a MrlKeystroke React component
+ */
+export function MrlKeystroke(_a) {
+    var { children, className } = _a, remainingProps = __rest(_a, ["children", "className"]);
+    const keystrokeClasses = classnames(styles['MrlKeystroke'], 'MrlKeystroke', className);
+    return (React.createElement("span", Object.assign({}, remainingProps, { className: keystrokeClasses }), children));
+}

package/dist/esm/components/keystroke/MrlKeystroke/MrlKeystroke.module.css

@@ -0,0 +1,16 @@
+.MrlKeystroke--zHBes {
+  align-items: center;
+  background-color: var(--mrl-color-background-secondary);
+  border: 1px solid var(--mrl-black-opacity-05);
+  border-radius: var(--mrl-border-radius-content);
+  color: rgba(var(--mrl-gray-20), 1);
+  display: flex;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: calc(10 / var(--mrl-baseline) * 1rem);
+  font-weight: var(--mrl-type-weight-title-secondary);
+  justify-content: center;
+  line-height: var(--mrl-line-height-01);
+  min-height: calc(var(--mrl-spacing-04) + var(--mrl-spacing-01));
+  min-width: calc(var(--mrl-spacing-04) + var(--mrl-spacing-01));
+  padding: 1px;
+}

package/dist/esm/components/keystroke/MrlKeystroke/MrlKeystroke.module.scss.js

@@ -0,0 +1,4 @@
+import "./MrlKeystroke.module.css";
+export default {
+	"MrlKeystroke": "MrlKeystroke--zHBes"
+};

package/dist/esm/components/keystroke/MrlKeystroke/index.js

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

package/dist/esm/components/keystroke/MrlKeystrokes/MrlKeystrokes.js

@@ -0,0 +1,28 @@
+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 './MrlKeystrokes.module.scss.js';
+/**
+ * MrlKeystrokes Component
+ *
+ * Wraps a group of MrlKeystroke components together with proper spacing.
+ * Useful for displaying keyboard shortcut combinations.
+ *
+ * @param props - component props
+ * @returns a MrlKeystrokes React component
+ */
+export function MrlKeystrokes(_a) {
+    var { children, className } = _a, remainingProps = __rest(_a, ["children", "className"]);
+    const keystrokesClasses = classnames(styles['MrlKeystrokes'], 'MrlKeystrokes', className);
+    return (React.createElement("span", Object.assign({}, remainingProps, { className: keystrokesClasses }), children));
+}

package/dist/esm/components/keystroke/MrlKeystrokes/MrlKeystrokes.module.css

@@ -0,0 +1,5 @@
+.MrlKeystrokes--ya8J3 {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--mrl-spacing-01);
+}

package/dist/esm/components/keystroke/MrlKeystrokes/MrlKeystrokes.module.scss.js

@@ -0,0 +1,4 @@
+import "./MrlKeystrokes.module.css";
+export default {
+	"MrlKeystrokes": "MrlKeystrokes--ya8J3"
+};

package/dist/esm/components/keystroke/MrlKeystrokes/index.js

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

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

@@ -0,0 +1,2 @@
+export * from './MrlKeystroke';
+export * from './MrlKeystrokes';

package/dist/esm/components/layout/MrlMain/MrlMain.js

@@ -0,0 +1,28 @@
+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 { useLayoutContext } from '../context/LayoutContext';
+import styles from './MrlMain.module.scss.js';
+/**
+ * MrlMain React component.
+ * @param props - component props
+ * @returns a MrlMain React component.
+ */
+export function MrlMain(_a) {
+    var { children, className = '' } = _a, rest = __rest(_a, ["children", "className"]);
+    const { isTopbarRendered } = useLayoutContext();
+    const allClasses = classnames(styles['MrlMain'], 'mrl-main', className, {
+        [styles['MrlMain--noTopbar']]: !isTopbarRendered
+    });
+    return (React.createElement("main", Object.assign({}, rest, { className: allClasses }), children));
+}

package/dist/esm/components/layout/MrlMain/MrlMain.module.css

@@ -0,0 +1,29 @@
+.MrlMain--knj34 {
+  --main-padding-large: var(--mrl-spacing-10);
+  --main-padding-medium: var(--mrl-spacing-08);
+  --main-padding-small: var(--mrl-spacing-07);
+}
+
+.MrlMain--knj34 {
+  align-items: initial;
+  background: rgba(var(--mrl-white), 1);
+  border-radius: var(--mrl-border-radius-container-large);
+  flex: 1;
+  margin-bottom: var(--mrl-spacing-05);
+  padding: var(--main-padding-large) var(--main-padding-small);
+  width: 100%;
+}
+.MrlMain--no-topbar--ieUt2 {
+  margin-top: var(--mrl-spacing-05);
+}
+
+@media (min-width: 52.125rem) {
+  .MrlMain--knj34 {
+    padding: var(--main-padding-large) var(--main-padding-medium);
+  }
+}
+@media (min-width: 64rem) {
+  .MrlMain--knj34 {
+    padding: var(--main-padding-large) var(--main-padding-large);
+  }
+}

package/dist/esm/components/layout/MrlMain/MrlMain.module.scss.js

@@ -0,0 +1,5 @@
+import "./MrlMain.module.css";
+export default {
+	"MrlMain": "MrlMain--knj34",
+	"MrlMain--no-topbar": "MrlMain--no-topbar--ieUt2"
+};

package/dist/esm/components/layout/MrlMain/index.js

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

package/dist/esm/components/layout/MrlPage/MrlPage.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 { useLayoutContext } from '../context/LayoutContext';
+import styles from './MrlPage.module.scss.js';
+/**
+ * MrlPage React component.
+ * @param props - component props
+ * @returns a MrlPage React component.
+ */
+export function MrlPage(_a) {
+    var { children, className = '' } = _a, rest = __rest(_a, ["children", "className"]);
+    const { isTopbarRendered } = useLayoutContext();
+    const allClasses = classnames(styles['MrlPage'], 'mrl-page', className, {
+        [styles['MrlPage--no-topbar']]: !isTopbarRendered
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", Object.assign({}, rest, { className: allClasses }), children)));
+}

package/dist/esm/components/layout/MrlPage/MrlPage.module.css

@@ -0,0 +1,11 @@
+.MrlPage--uIoIv {
+  background: var(--mrl-color-background-page);
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: var(--mrl-spacing-05);
+  padding-right: var(--mrl-spacing-05);
+  position: relative;
+}
+.MrlPage--no-topbar--hZYY8 {
+  padding-top: var(--mrl-spacing-05);
+}

package/dist/esm/components/layout/MrlPage/MrlPage.module.scss.js

@@ -0,0 +1,5 @@
+import "./MrlPage.module.css";
+export default {
+	"MrlPage": "MrlPage--uIoIv",
+	"MrlPage--no-topbar": "MrlPage--no-topbar--hZYY8"
+};

package/dist/esm/components/layout/MrlPage/index.js

@@ -0,0 +1,25 @@
+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 { LayoutProvider } from '../context/LayoutContext';
+import { MrlPage as Page } from './MrlPage';
+/**
+ * MrlPage Provider
+ *
+ * @param props - component props
+ * @returns a MrlPage React component.
+ */
+export function MrlPage(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(LayoutProvider, null,
+        React.createElement(Page, Object.assign({}, rest))));
+}

package/dist/esm/components/layout/MrlSidebar/MrlSidebar.js

@@ -0,0 +1,93 @@
+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 { menu, close } from '@muraldevkit/ds-icons';
+import { MrlIconButton, MrlFocusTrap, MrlSvg } from '../../';
+import { useBreakpoint } from '../../../hooks/useBreakpoint';
+import { isMobile } from '../utils';
+import { useLayoutContext } from '../context/LayoutContext';
+import styles from './MrlSidebar.module.scss.js';
+/**
+ * MrlSidebar React component.
+ * @param props - component props
+ * @returns a MrlSidebar React component.
+ */
+export const MrlSidebar = React.forwardRef(function MrlSidebar(_a, ref) {
+    var { children, className = '', hookOpen, hookClose } = _a, rest = __rest(_a, ["children", "className", "hookOpen", "hookClose"]);
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    const setExpandedAndNotify = React.useCallback((expanded, info) => {
+        if (expanded) {
+            hookOpen === null || hookOpen === void 0 ? void 0 : hookOpen(info);
+        }
+        else {
+            hookClose === null || hookClose === void 0 ? void 0 : hookClose(info);
+        }
+        setIsExpanded(expanded);
+    }, [hookOpen, hookClose]);
+    const { isTopbarRendered } = useLayoutContext();
+    React.useImperativeHandle(ref, () => {
+        return {
+            close() {
+                setExpandedAndNotify(false, { source: 'imperativeHandler' });
+            },
+            open() {
+                setExpandedAndNotify(true, { source: 'imperativeHandler' });
+            },
+            toggle() {
+                setExpandedAndNotify(!isExpanded, { source: 'imperativeHandler' });
+            }
+        };
+    }, [isExpanded, setExpandedAndNotify]);
+    const breakpoint = useBreakpoint();
+    const renderMobile = isMobile(breakpoint);
+    const sidebarRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    // If both of these are true, then we want to set focus trap disabled to "False"
+    // which is kind of confusing, because these values actually return true.
+    // So, we need to negate them. Don't worry, it works.
+    const shouldFocusTrap = !(renderMobile && isExpanded);
+    const offsetClass = classnames(isTopbarRendered && styles['MrlSidebar--offset']);
+    const sidebarClasses = classnames(styles['MrlSidebar'], 'MrlSidebar', className, offsetClass, {
+        [styles['MrlSidebar--mobile']]: renderMobile,
+        [styles['MrlSidebar--mobile--open']]: renderMobile && isExpanded
+    });
+    const overlayClasses = classnames(styles['MrlSidebar-overlay'], 'MrlSidebar-overlay', renderMobile && isExpanded && styles['MrlSidebar-overlay--visible'], offsetClass);
+    const sidebarContentClasses = classnames(styles['MrlSidebar-content'], 'MrlSidebar-content', {
+        [styles['MrlSidebar-content--visible']]: isExpanded || !renderMobile
+    });
+    const handleKeyUp = (e) => {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.key === 'Escape') {
+            setExpandedAndNotify(false, { source: 'userInteraction' });
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const handleClick = (e) => {
+        e.preventDefault();
+        setExpandedAndNotify(!isExpanded, { source: 'userInteraction' });
+    };
+    return (React.createElement(React.Fragment, null,
+        // If the sidebar is rendered on mobile, we want to render the menu button and overlay.
+        renderMobile && (React.createElement(React.Fragment, null,
+            React.createElement(MrlIconButton, { wrapperClassName: classnames(styles['MrlSidebar-menu-trigger'], styles['MrlSidebar-menu']), icon: React.createElement(MrlSvg, { svg: menu }), kind: "ghost", onClick: handleClick, position: "bottom", ref: triggerRef, size: "medium", text: "Open", tipAnchor: "center", toggleAria: "expanded", state: "default" }),
+            React.createElement("div", Object.assign({ className: overlayClasses, role: "presentation", tabIndex: -1 }, (isExpanded && { onClick: handleClick }))))),
+        React.createElement("section", Object.assign({}, rest, { className: sidebarClasses, onKeyUp: handleKeyUp, ref: sidebarRef, role: "presentation" }, (renderMobile && { 'aria-hidden': !isExpanded })),
+            React.createElement(MrlFocusTrap, { disabled: shouldFocusTrap, containerRef: sidebarRef },
+                isExpanded && (React.createElement(MrlIconButton, { wrapperClassName: classnames(styles['MrlSidebar-menu-trigger'], styles['MrlSidebar-menu'], {
+                        [styles['MrlSidebar-menu-close']]: isExpanded,
+                        'MrlSidebar-menu-close': isExpanded
+                    }), icon: React.createElement(MrlSvg, { svg: close }), kind: "ghost", onClick: handleClick, position: "bottom", size: "medium", text: "Close", tipAnchor: "center", toggleAria: "expanded", state: "default" })),
+                React.createElement("div", { className: sidebarContentClasses }, children)))));
+});

package/dist/esm/components/layout/MrlSidebar/MrlSidebar.module.css

@@ -0,0 +1,64 @@
+.MrlSidebar--yP0xj {
+  align-items: stretch;
+  margin-right: var(--mrl-spacing-05);
+  width: calc(var(--mrl-spacing-14) + var(--mrl-spacing-08));
+}
+.MrlSidebar--mobile--Z1y-y {
+  align-items: stretch;
+  background: var(--mrl-color-background-page);
+  border-radius: 0 var(--mrl-radii-03) var(--mrl-radii-03) 0;
+  bottom: 0;
+  left: calc((var(--mrl-spacing-14) + var(--mrl-spacing-08) + 2px) * -1);
+  max-height: calc(100% - var(--mrl-spacing-03));
+  overflow-y: auto;
+  padding: 4.5rem var(--mrl-space-inset-large) var(--mrl-space-inset-large);
+  position: fixed;
+  top: var(--mrl-spacing-03);
+  transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1), left var(--mrl-duration-03) var(--mrl-timing-m1);
+  z-index: 2;
+}
+@media (prefers-reduced-motion: reduce) {
+  .MrlSidebar--mobile--Z1y-y {
+    transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1);
+  }
+}
+.MrlSidebar--mobile--open--ufR6Y {
+  left: 0;
+  opacity: 1;
+}
+.MrlSidebar--offset--9FBrq.MrlSidebar--mobile--Z1y-y, .MrlSidebar--offset--9FBrq.MrlSidebar-overlay--FysSw {
+  bottom: 0;
+}
+
+.MrlSidebar-menu--4KvR3.MrlSidebar-menu-trigger--Qt7cl {
+  left: var(--mrl-spacing-05);
+  position: absolute;
+  top: var(--mrl-spacing-05);
+  width: 50px;
+  z-index: 1;
+}
+
+.MrlSidebar-menu-close---bAfo {
+  position: fixed;
+}
+
+.MrlSidebar-overlay--FysSw {
+  background-color: rgba(0, 0, 0, 0.56);
+  inset: 0 0 0 -10000px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1);
+  z-index: 1;
+}
+.MrlSidebar-overlay--visible--Y-vJc {
+  opacity: 1;
+  pointer-events: initial;
+}
+
+.MrlSidebar-content--eTYqK {
+  display: none;
+}
+.MrlSidebar-content--visible--cnhwv {
+  display: block;
+}

package/dist/esm/components/layout/MrlSidebar/MrlSidebar.module.scss.js

@@ -0,0 +1,14 @@
+import "./MrlSidebar.module.css";
+export default {
+	"MrlSidebar": "MrlSidebar--yP0xj",
+	"MrlSidebar--mobile": "MrlSidebar--mobile--Z1y-y",
+	"MrlSidebar--mobile--open": "MrlSidebar--mobile--open--ufR6Y",
+	"MrlSidebar--offset": "MrlSidebar--offset--9FBrq",
+	"MrlSidebar-overlay": "MrlSidebar-overlay--FysSw",
+	"MrlSidebar-menu": "MrlSidebar-menu--4KvR3",
+	"MrlSidebar-menu-trigger": "MrlSidebar-menu-trigger--Qt7cl",
+	"MrlSidebar-menu-close": "MrlSidebar-menu-close---bAfo",
+	"MrlSidebar-overlay--visible": "MrlSidebar-overlay--visible--Y-vJc",
+	"MrlSidebar-content": "MrlSidebar-content--eTYqK",
+	"MrlSidebar-content--visible": "MrlSidebar-content--visible--cnhwv"
+};

package/dist/esm/components/layout/MrlSidebar/demo/MrlSidebarDemo.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { MrlSidebar } from '../MrlSidebar';
+import { MrlButton } from '../../..';
+/**
+ * MrlSidebar demo with the use of the forward ref to make open/close/toggle the sidebar
+ * through buttons as children and outside of the sidebar.
+ *
+ * @returns a MrlSidebarDemo React component.
+ */
+export const MrlSidebarDemo = () => {
+    const sidebarRef = React.useRef(null);
+    const onOpenClicked = () => {
+        var _a;
+        console.log(`Open Button clicked`);
+        (_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.open();
+    };
+    const onClosedClicked = () => {
+        var _a;
+        console.log(`Close Button clicked`);
+        (_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    const onToggleClicked = () => {
+        var _a;
+        console.log(`Toggle Button clicked`);
+        (_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MrlSidebar, { ariaLabel: "Storybook Demo Sidebar", className: "page-sidebar", ref: sidebarRef },
+            React.createElement("div", null,
+                React.createElement(MrlButton, { text: "Close Button", onClick: onClosedClicked, state: "default" }),
+                React.createElement(MrlButton, { text: "Toggle Button", onClick: onToggleClicked, state: "default" }))),
+        React.createElement(MrlButton, { text: "Open Button", onClick: onOpenClicked, state: "default" }),
+        React.createElement(MrlButton, { text: "Toggle Button", onClick: onToggleClicked, state: "default" })));
+};

package/dist/esm/components/layout/MrlSidebar/index.js

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

package/dist/esm/components/layout/MrlTopbar/MrlTopbar.js

@@ -0,0 +1,34 @@
+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 { TOPBAR_SELECTOR } from '../constants';
+import { useBreakpoint } from '../../../hooks';
+import { useLayoutContext } from '../context/LayoutContext';
+import { isMobile } from '../utils';
+import styles from './MrlTopbar.module.scss.js';
+/**
+ * MrlTopbar React component.
+ * @param props - component props
+ * @returns a MrlTopbar React component.
+ */
+export function MrlTopbar(_a) {
+    var { children, className = '' } = _a, rest = __rest(_a, ["children", "className"]);
+    const breakpoint = useBreakpoint();
+    const renderMobile = isMobile(breakpoint);
+    const { isSidebarRendered } = useLayoutContext();
+    const allClasses = classnames(styles['MrlTopbar'], TOPBAR_SELECTOR, className, {
+        [styles['MrlTopbar--mobile']]: renderMobile,
+        [styles['MrlTopbar--no-sidebar']]: !isSidebarRendered
+    });
+    return (React.createElement("header", Object.assign({}, rest, { className: allClasses }), children));
+}

package/dist/esm/components/layout/MrlTopbar/MrlTopbar.module.css

@@ -0,0 +1,11 @@
+.MrlTopbar--SjCUE {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-08));
+  width: 100%;
+}
+.MrlTopbar--mobile--8UbvG {
+  padding-left: calc(var(--mrl-spacing-10) + var(--mrl-spacing-01));
+}
+
+.MrlTopbar--no-sidebar--yiXO9 {
+  margin-left: 0;
+}

package/dist/esm/components/layout/MrlTopbar/MrlTopbar.module.scss.js

@@ -0,0 +1,6 @@
+import "./MrlTopbar.module.css";
+export default {
+	"MrlTopbar": "MrlTopbar--SjCUE",
+	"MrlTopbar--mobile": "MrlTopbar--mobile--8UbvG",
+	"MrlTopbar--no-sidebar": "MrlTopbar--no-sidebar--yiXO9"
+};

package/dist/esm/components/layout/MrlTopbar/index.js

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

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

@@ -0,0 +1,2 @@
+export const TOPBAR_SELECTOR = 'mrl-topbar';
+export const SIDEBAR_SELECTOR = 'mrl-sidebar';

package/dist/esm/components/layout/context/LayoutContext.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { TOPBAR_SELECTOR, SIDEBAR_SELECTOR } from '../constants';
+import { hasElement } from '../utils';
+const LayoutContext = React.createContext(undefined);
+/**
+ * Provides layout-related context values to child components.
+ *
+ * @param {LayoutProviderProps} props - The props for the component.
+ * @returns A React element that provides the layout context to children.
+ */
+export function LayoutProvider({ children }) {
+    const [isSidebarRendered, setIsSidebarRendered] = React.useState(false);
+    const [isTopbarRendered, setIsTopbarRendered] = React.useState(false);
+    const contextRef = React.useRef(null);
+    React.useEffect(() => {
+        setIsSidebarRendered(hasElement(contextRef.current, SIDEBAR_SELECTOR));
+        setIsTopbarRendered(hasElement(contextRef.current, TOPBAR_SELECTOR));
+    }, [children]);
+    return (React.createElement(LayoutContext.Provider, { value: { isSidebarRendered, isTopbarRendered } },
+        React.createElement("div", { ref: contextRef }, children)));
+}
+/**
+ * Custom hook to access layout context values.
+ * This hook ensures that the component using it is wrapped within a LayoutProvider.
+ *
+ * @throws Will throw an error if not used within a `LayoutProvider`.
+ * @returns The layout context containing isSidebarRendered and isTopbarRendered.
+ */
+export const useLayoutContext = () => {
+    const context = React.useContext(LayoutContext);
+    if (!context) {
+        throw new Error('useLayoutContext must be used within a LayoutProvider');
+    }
+    return context;
+};

package/dist/esm/components/layout/error-page/MrlBrandColors/MrlBrandColors.js

@@ -0,0 +1,37 @@
+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 styles from './MrlBrandColors.module.scss.js';
+import classnames from 'classnames';
+function getRandomInt() {
+    return Math.floor(Math.random() * 6) + 1;
+}
+/**
+ * MrlBrandColors component
+ * @param props - MrlBrandColors component props
+ * @returns MrlBrandColors component
+ */
+export const MrlBrandColors = (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const patternRef = React.useRef(getRandomInt());
+    return (React.createElement("div", Object.assign({}, rest, { "aria-hidden": "true", className: classnames(styles['MrlBrandColors'], styles[`MrlPattern-0${patternRef.current}`], className) }),
+        React.createElement("div", { className: classnames(styles['MrlBrandColor-color-black']) }),
+        React.createElement("div", { className: classnames(styles['MrlBrandColor-color-jade']) }),
+        React.createElement("div", { className: classnames(styles['MrlBrandColor-color-blue']) }),
+        React.createElement("div", { className: classnames(styles['MrlBrandColor-color-pink']) }),
+        React.createElement("div", { className: classnames(styles['MrlBrandColor-color-red']) }),
+        React.createElement("div", { className: classnames(styles['MrlBrandColor-color-yellow']) }),
+        React.createElement("div", { className: classnames(styles['MrlBrandColor-color-grape']) }),
+        React.createElement("div", { className: classnames(styles['MrlBrandColor-color-sky']) }),
+        React.createElement("div", { className: classnames(styles['MrlBrandColor-color-lemon']) }),
+        React.createElement("div", { className: classnames(styles['MrlBrandColor-color-lavander']) })));
+};