@muraldevkit/ui-toolkit 4.65.3-dev-IWCo.1 → 4.66.0-dev-avUr.1

package/dist/cjs/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/cjs/components/layout/MrlSidebar/MrlSidebar.module.scss.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlSidebar.module.css");
+exports.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/cjs/components/layout/MrlSidebar/demo/MrlSidebarDemo.js

@@ -0,0 +1,61 @@
+"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.MrlSidebarDemo = void 0;
+const React = __importStar(require("react"));
+const MrlSidebar_1 = require("../MrlSidebar");
+const __1 = require("../../..");
+/**
+ * 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.
+ */
+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_1.MrlSidebar, { ariaLabel: "Storybook Demo Sidebar", className: "page-sidebar", ref: sidebarRef },
+            React.createElement("div", null,
+                React.createElement(__1.MrlButton, { text: "Close Button", onClick: onClosedClicked, state: "default" }),
+                React.createElement(__1.MrlButton, { text: "Toggle Button", onClick: onToggleClicked, state: "default" }))),
+        React.createElement(__1.MrlButton, { text: "Open Button", onClick: onOpenClicked, state: "default" }),
+        React.createElement(__1.MrlButton, { text: "Toggle Button", onClick: onToggleClicked, state: "default" })));
+};
+exports.MrlSidebarDemo = MrlSidebarDemo;

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

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

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

@@ -0,0 +1,64 @@
+"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.MrlTopbar = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../constants");
+const hooks_1 = require("../../../hooks");
+const LayoutContext_1 = require("../context/LayoutContext");
+const utils_1 = require("../utils");
+const MrlTopbar_module_scss_1 = __importDefault(require("./MrlTopbar.module.scss.js"));
+/**
+ * MrlTopbar React component.
+ * @param props - component props
+ * @returns a MrlTopbar React component.
+ */
+function MrlTopbar(_a) {
+    var { children, className = '' } = _a, rest = __rest(_a, ["children", "className"]);
+    const breakpoint = (0, hooks_1.useBreakpoint)();
+    const renderMobile = (0, utils_1.isMobile)(breakpoint);
+    const { isSidebarRendered } = (0, LayoutContext_1.useLayoutContext)();
+    const allClasses = (0, classnames_1.default)(MrlTopbar_module_scss_1.default['MrlTopbar'], constants_1.TOPBAR_SELECTOR, className, {
+        [MrlTopbar_module_scss_1.default['MrlTopbar--mobile']]: renderMobile,
+        [MrlTopbar_module_scss_1.default['MrlTopbar--no-sidebar']]: !isSidebarRendered
+    });
+    return (React.createElement("header", Object.assign({}, rest, { className: allClasses }), children));
+}
+exports.MrlTopbar = MrlTopbar;

package/dist/cjs/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/cjs/components/layout/MrlTopbar/MrlTopbar.module.scss.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlTopbar.module.css");
+exports.default = {
+	"MrlTopbar": "MrlTopbar--SjCUE",
+	"MrlTopbar--mobile": "MrlTopbar--mobile--8UbvG",
+	"MrlTopbar--no-sidebar": "MrlTopbar--no-sidebar--yiXO9"
+};

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_SELECTOR = exports.TOPBAR_SELECTOR = void 0;
+exports.TOPBAR_SELECTOR = 'mrl-topbar';
+exports.SIDEBAR_SELECTOR = 'mrl-sidebar';

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

@@ -0,0 +1,63 @@
+"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.useLayoutContext = exports.LayoutProvider = void 0;
+const React = __importStar(require("react"));
+const constants_1 = require("../constants");
+const utils_1 = require("../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.
+ */
+function LayoutProvider({ children }) {
+    const [isSidebarRendered, setIsSidebarRendered] = React.useState(false);
+    const [isTopbarRendered, setIsTopbarRendered] = React.useState(false);
+    const contextRef = React.useRef(null);
+    React.useEffect(() => {
+        setIsSidebarRendered((0, utils_1.hasElement)(contextRef.current, constants_1.SIDEBAR_SELECTOR));
+        setIsTopbarRendered((0, utils_1.hasElement)(contextRef.current, constants_1.TOPBAR_SELECTOR));
+    }, [children]);
+    return (React.createElement(LayoutContext.Provider, { value: { isSidebarRendered, isTopbarRendered } },
+        React.createElement("div", { ref: contextRef }, children)));
+}
+exports.LayoutProvider = LayoutProvider;
+/**
+ * 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.
+ */
+const useLayoutContext = () => {
+    const context = React.useContext(LayoutContext);
+    if (!context) {
+        throw new Error('useLayoutContext must be used within a LayoutProvider');
+    }
+    return context;
+};
+exports.useLayoutContext = useLayoutContext;

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

@@ -0,0 +1,67 @@
+"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.MrlBrandColors = void 0;
+const React = __importStar(require("react"));
+const MrlBrandColors_module_scss_1 = __importDefault(require("./MrlBrandColors.module.scss.js"));
+const classnames_1 = __importDefault(require("classnames"));
+function getRandomInt() {
+    return Math.floor(Math.random() * 6) + 1;
+}
+/**
+ * MrlBrandColors component
+ * @param props - MrlBrandColors component props
+ * @returns MrlBrandColors component
+ */
+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: (0, classnames_1.default)(MrlBrandColors_module_scss_1.default['MrlBrandColors'], MrlBrandColors_module_scss_1.default[`MrlPattern-0${patternRef.current}`], className) }),
+        React.createElement("div", { className: (0, classnames_1.default)(MrlBrandColors_module_scss_1.default['MrlBrandColor-color-black']) }),
+        React.createElement("div", { className: (0, classnames_1.default)(MrlBrandColors_module_scss_1.default['MrlBrandColor-color-jade']) }),
+        React.createElement("div", { className: (0, classnames_1.default)(MrlBrandColors_module_scss_1.default['MrlBrandColor-color-blue']) }),
+        React.createElement("div", { className: (0, classnames_1.default)(MrlBrandColors_module_scss_1.default['MrlBrandColor-color-pink']) }),
+        React.createElement("div", { className: (0, classnames_1.default)(MrlBrandColors_module_scss_1.default['MrlBrandColor-color-red']) }),
+        React.createElement("div", { className: (0, classnames_1.default)(MrlBrandColors_module_scss_1.default['MrlBrandColor-color-yellow']) }),
+        React.createElement("div", { className: (0, classnames_1.default)(MrlBrandColors_module_scss_1.default['MrlBrandColor-color-grape']) }),
+        React.createElement("div", { className: (0, classnames_1.default)(MrlBrandColors_module_scss_1.default['MrlBrandColor-color-sky']) }),
+        React.createElement("div", { className: (0, classnames_1.default)(MrlBrandColors_module_scss_1.default['MrlBrandColor-color-lemon']) }),
+        React.createElement("div", { className: (0, classnames_1.default)(MrlBrandColors_module_scss_1.default['MrlBrandColor-color-lavander']) })));
+};
+exports.MrlBrandColors = MrlBrandColors;

package/dist/cjs/components/layout/error-page/MrlBrandColors/MrlBrandColors.module.css

@@ -0,0 +1,106 @@
+/* stylelint-disable color-no-hex, value-keyword-case */
+.MrlBrandColor-color-black---bTx3 {
+  background-color: #000;
+  grid-area: color-black;
+}
+
+.MrlBrandColor-color-jade--L6ti8 {
+  background-color: #00c27a;
+  grid-area: color-jade;
+}
+
+.MrlBrandColor-color-blue--BdDB9 {
+  background-color: #5887ff;
+  grid-area: color-blue;
+}
+
+.MrlBrandColor-color-pink--7tSjK {
+  background-color: #fc83ff;
+  grid-area: color-pink;
+}
+
+.MrlBrandColor-color-red--1GlTS {
+  background-color: #ff4b4b;
+  grid-area: color-red;
+}
+
+.MrlBrandColor-color-yellow--GbL-l {
+  background-color: #fa0;
+  grid-area: color-yellow;
+}
+
+.MrlBrandColor-color-grape--WkACS {
+  background-color: #be53ff;
+  grid-area: color-grape;
+}
+
+.MrlBrandColor-color-sky---CkI1 {
+  background-color: #79c1ff;
+  grid-area: color-sky;
+}
+
+.MrlBrandColor-color-lemon--JXlj7 {
+  background-color: #ffe146;
+  grid-area: color-lemon;
+}
+
+.MrlBrandColor-color-lavander--wxHrV {
+  background-color: #e6bfff;
+  grid-area: color-lavander;
+}
+
+.MrlBrandColors--0xlTl {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: 1fr;
+  height: 15rem;
+  width: 100%;
+}
+
+.MrlPattern-01--5nHW8 {
+  grid-template-areas: " color-blue color-blue color-pink color-pink color-pink color-pink color-pink color-pink";
+}
+
+.MrlPattern-02--ZyyNv {
+  grid-template-areas: " color-red color-red color-red color-red color-red color-grape color-grape color-grape";
+}
+
+.MrlPattern-03--mVK0j {
+  grid-template-areas: " color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-jade";
+}
+
+.MrlPattern-04--ZXSNc {
+  grid-template-areas: " color-pink color-pink color-pink color-pink color-pink color-lemon color-lemon color-lemon";
+}
+
+.MrlPattern-05--naVfp {
+  grid-template-areas: " color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade";
+}
+
+.MrlPattern-06--7-BlY {
+  grid-template-areas: " color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black";
+}
+
+@media (min-width: 37.5rem) {
+  .MrlBrandColors--0xlTl {
+    grid-template-columns: repeat(32, 1fr);
+  }
+  .MrlPattern-01--5nHW8 {
+    grid-template-areas: " color-blue color-blue color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-red color-red color-red color-red color-red color-red color-black color-black color-black";
+  }
+  .MrlPattern-02--ZyyNv {
+    grid-template-areas: " color-blue color-blue color-blue color-black color-black color-black color-yellow color-red color-red color-red color-red color-red color-red color-red color-red color-red color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-jade color-jade color-jade color-jade color-jade color-jade";
+  }
+  .MrlPattern-03--mVK0j {
+    grid-template-areas: " color-black color-black color-black color-lemon color-lemon color-red color-red color-red color-red color-red color-red color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-jade color-jade color-jade color-jade color-jade color-sky color-sky color-sky color-sky";
+  }
+  .MrlPattern-04--ZXSNc {
+    grid-template-areas: " color-jade color-jade color-sky color-sky color-sky color-sky color-sky color-sky color-black color-black color-black color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-lemon color-lemon color-lemon color-lemon color-lemon color-lemon color-lemon color-red color-red";
+  }
+  .MrlPattern-05--naVfp {
+    grid-template-areas: " color-lavander color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-blue color-blue color-blue color-blue color-blue color-blue color-blue color-red color-red";
+  }
+  .MrlPattern-06--7-BlY {
+    grid-template-areas: " color-yellow color-yellow color-yellow color-yellow color-yellow color-lavander color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black color-black color-red color-sky color-sky color-sky color-sky color-sky color-sky color-sky color-sky";
+  }
+}

package/dist/cjs/components/layout/error-page/MrlBrandColors/MrlBrandColors.module.scss.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlBrandColors.module.css");
+exports.default = {
+	"MrlBrandColor-color-black": "MrlBrandColor-color-black---bTx3",
+	"MrlBrandColor-color-jade": "MrlBrandColor-color-jade--L6ti8",
+	"MrlBrandColor-color-blue": "MrlBrandColor-color-blue--BdDB9",
+	"MrlBrandColor-color-pink": "MrlBrandColor-color-pink--7tSjK",
+	"MrlBrandColor-color-red": "MrlBrandColor-color-red--1GlTS",
+	"MrlBrandColor-color-yellow": "MrlBrandColor-color-yellow--GbL-l",
+	"MrlBrandColor-color-grape": "MrlBrandColor-color-grape--WkACS",
+	"MrlBrandColor-color-sky": "MrlBrandColor-color-sky---CkI1",
+	"MrlBrandColor-color-lemon": "MrlBrandColor-color-lemon--JXlj7",
+	"MrlBrandColor-color-lavander": "MrlBrandColor-color-lavander--wxHrV",
+	"MrlBrandColors": "MrlBrandColors--0xlTl",
+	"MrlPattern-01": "MrlPattern-01--5nHW8",
+	"MrlPattern-02": "MrlPattern-02--ZyyNv",
+	"MrlPattern-03": "MrlPattern-03--mVK0j",
+	"MrlPattern-04": "MrlPattern-04--ZXSNc",
+	"MrlPattern-05": "MrlPattern-05--naVfp",
+	"MrlPattern-06": "MrlPattern-06--7-BlY"
+};

package/dist/cjs/components/layout/error-page/MrlBrandColors/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("./MrlBrandColors"), exports);

package/dist/cjs/components/layout/error-page/MrlErrorPage/MrlErrorPage.js

@@ -0,0 +1,68 @@
+"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.MrlErrorPage = void 0;
+const React = __importStar(require("react"));
+const MrlErrorPage_module_scss_1 = __importDefault(require("./MrlErrorPage.module.scss.js"));
+const classnames_1 = __importDefault(require("classnames"));
+const ds_pictograms_1 = require("@muraldevkit/ds-pictograms");
+const svg_1 = require("../../../svg");
+const text_1 = require("../../../text");
+const MrlBrandColors_1 = require("../MrlBrandColors");
+/**
+ * MrlErrorPage component
+ *
+ * @param props - MrlErrorPage component props
+ * @param props.children - Children to be rendered within the main tag of the error page
+ * @param props.title - Title of the error page
+ * @returns  MrlErrorPage component
+ */
+const MrlErrorPage = (props) => {
+    const { title, children, ['data-qa']: qa = '', className, headerUtils } = props, remainingProps = __rest(props, ["title", "children", 'data-qa', "className", "headerUtils"]);
+    return (React.createElement("div", Object.assign({ className: (0, classnames_1.default)(MrlErrorPage_module_scss_1.default['MrlErrorPage'], 'MrlErrorPage', className), "data-qa": qa }, remainingProps),
+        React.createElement("header", { className: (0, classnames_1.default)(MrlErrorPage_module_scss_1.default['MrlErrorPage-header'], 'MrlErrorPage-header') },
+            React.createElement("a", { href: "/", "aria-label": "Go to homepage" },
+                React.createElement(svg_1.MrlSvg, { svg: ds_pictograms_1.brandWordmark, "aria-label": "Mural logo", size: "auto" })),
+            headerUtils && (React.createElement("div", { className: (0, classnames_1.default)(MrlErrorPage_module_scss_1.default['MrlErrorPage-header-utils'], 'MrlErrorPage-header-utils') }, headerUtils))),
+        React.createElement("main", { className: (0, classnames_1.default)(MrlErrorPage_module_scss_1.default['MrlErrorPage-main'], 'MrlErrorPage-main') },
+            React.createElement(text_1.MrlTextHeading, { attrs: { 'data-qa': `${qa}-title` }, level: "1", className: (0, classnames_1.default)(MrlErrorPage_module_scss_1.default['MrlErrorPage-title'], 'MrlErrorPage-title'), kind: "display", size: "large" }, title),
+            children),
+        React.createElement(MrlBrandColors_1.MrlBrandColors, { className: (0, classnames_1.default)(MrlErrorPage_module_scss_1.default['MrlErrorPage-brand-colors'], 'MrlErrorPage-brand-colors') })));
+};
+exports.MrlErrorPage = MrlErrorPage;

package/dist/cjs/components/layout/error-page/MrlErrorPage/MrlErrorPage.module.css

@@ -0,0 +1,40 @@
+.MrlErrorPage--qoKPU {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+.MrlErrorPage--qoKPU .MrlErrorPage-header--YZ6-Q {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--mrl-spacing-08) var(--mrl-spacing-07) var(--mrl-spacing-11) var(--mrl-spacing-07);
+}
+.MrlErrorPage--qoKPU .MrlErrorPage-header--YZ6-Q .MrlSvgContainer {
+  height: 1.875rem;
+  width: 6.188rem;
+}
+.MrlErrorPage--qoKPU .MrlErrorPage-main--lz-nS {
+  flex-grow: 1;
+  padding: 0 var(--mrl-spacing-07) var(--mrl-spacing-08);
+}
+.MrlErrorPage--qoKPU .MrlErrorPage-title--1DbG9 {
+  color: var(--mrl-color-text-heading);
+  font-family: var(--mrl-heading-font-alt);
+  padding-bottom: var(--mrl-spacing-07);
+}
+.MrlErrorPage--qoKPU .MrlErrorPage-brand-colors--nL-d6 {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+@media (min-width: 52.125rem) {
+  .MrlErrorPage--qoKPU .MrlErrorPage-header--YZ6-Q {
+    padding: var(--mrl-spacing-08) var(--mrl-spacing-08) var(--mrl-spacing-11) var(--mrl-spacing-08);
+  }
+  .MrlErrorPage--qoKPU .MrlErrorPage-main--lz-nS {
+    margin: 0 auto;
+    max-width: 33.75rem;
+    padding: 0 0 var(--mrl-spacing-08) 0;
+  }
+}

package/dist/cjs/components/layout/error-page/MrlErrorPage/MrlErrorPage.module.scss.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlErrorPage.module.css");
+exports.default = {
+	"MrlErrorPage": "MrlErrorPage--qoKPU",
+	"MrlErrorPage-header": "MrlErrorPage-header--YZ6-Q",
+	"MrlErrorPage-main": "MrlErrorPage-main--lz-nS",
+	"MrlErrorPage-title": "MrlErrorPage-title--1DbG9",
+	"MrlErrorPage-brand-colors": "MrlErrorPage-brand-colors--nL-d6"
+};