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

package/dist/cjs/components/notification/MrlInlineMessage/MrlInlineMessage.js

@@ -0,0 +1,86 @@
+"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.MrlInlineMessage = void 0;
+const React = __importStar(require("react"));
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const svg_1 = require("../../svg");
+const classnames_1 = __importDefault(require("classnames"));
+const MrlInlineMessage_module_scss_1 = __importDefault(require("./MrlInlineMessage.module.scss.js"));
+const getIcon = (kind, customIcon) => {
+    switch (kind) {
+        case 'error':
+            return ds_icons_1.error;
+        case 'info':
+            return ds_icons_1.info;
+        case 'warning':
+            return ds_icons_1.warning;
+        case 'success':
+            return ds_icons_1.check;
+        default:
+            return customIcon ? customIcon : undefined;
+    }
+};
+const renderIcon = (icon, iconClasses) => {
+    if (icon) {
+        return (React.createElement("span", { className: iconClasses },
+            React.createElement(svg_1.MrlSvg, { size: "auto", svg: icon })));
+    }
+};
+/**
+ * MrlInlineMessage is a notification component that can be used to display messages to the user.
+ * @param props - The properties of the component.
+ * @returns A React component.
+ */
+const MrlInlineMessage = (_a) => {
+    var { children, customIcon, id, kind, message, ['data-qa']: qa = 'mrl-inline-notification' } = _a, rest = __rest(_a, ["children", "customIcon", "id", "kind", "message", 'data-qa']);
+    const icon = getIcon(kind, customIcon);
+    const iconClasses = (0, classnames_1.default)(MrlInlineMessage_module_scss_1.default['MrlInlineMessage-icon']);
+    const notificationClasses = (0, classnames_1.default)(MrlInlineMessage_module_scss_1.default['MrlInlineMessage'], 'MrlInlineMessage', {
+        [MrlInlineMessage_module_scss_1.default.error]: kind === 'error',
+        [MrlInlineMessage_module_scss_1.default.information]: kind === 'info',
+        [MrlInlineMessage_module_scss_1.default.success]: kind === 'success',
+        [MrlInlineMessage_module_scss_1.default.warning]: kind === 'warning',
+        [MrlInlineMessage_module_scss_1.default.helper]: kind === 'helper'
+    });
+    return (React.createElement("span", Object.assign({}, rest, { className: notificationClasses, "data-qa": qa, id: id }),
+        renderIcon(icon, iconClasses),
+        React.createElement("span", { className: "MrlInlineMessage-message" }, typeof message !== 'undefined' ? message : children)));
+};
+exports.MrlInlineMessage = MrlInlineMessage;

package/dist/cjs/components/notification/MrlInlineMessage/MrlInlineMessage.module.css

@@ -0,0 +1,39 @@
+.MrlInlineMessage--JjY7z {
+  display: flex;
+  font-size: var(--mrl-font-size-03);
+  font-weight: var(--mrl-font-weight-02);
+  margin-top: var(--mrl-spacing-02);
+}
+.MrlInlineMessage--JjY7z:not(.helper--rR9T5) a {
+  color: inherit;
+}
+.MrlInlineMessage--JjY7z.error--kyO-1 {
+  color: var(--mrl-color-text-error);
+}
+.MrlInlineMessage--JjY7z.information--PaY5Q {
+  color: var(--mrl-color-text-highlight-emph);
+}
+.MrlInlineMessage--JjY7z.information--PaY5Q .MrlSvgContainer {
+  color: var(--mrl-color-background-info);
+}
+.MrlInlineMessage--JjY7z.warning--rUiMf {
+  color: var(--mrl-color-text-highlight-emph);
+}
+.MrlInlineMessage--JjY7z.warning--rUiMf .MrlSvgContainer {
+  color: var(--mrl-color-background-warning);
+}
+.MrlInlineMessage--JjY7z.success--wwx-t .MrlSvgContainer {
+  color: var(--mrl-color-text-success);
+}
+.MrlInlineMessage--JjY7z.success--wwx-t .MrlSvgContainer.mrl-link-icon, .MrlInlineMessage--JjY7z.warning--rUiMf .MrlSvgContainer.mrl-link-icon, .MrlInlineMessage--JjY7z.information--PaY5Q .MrlSvgContainer.mrl-link-icon {
+  color: inherit;
+}
+.MrlInlineMessage--JjY7z.helper--rR9T5 {
+  color: var(--mrl-color-text-secondary);
+}
+.MrlInlineMessage-icon--U-6oq {
+  flex-shrink: 0;
+  height: var(--mrl-spacing-05);
+  margin-right: var(--mrl-spacing-02);
+  width: var(--mrl-spacing-05);
+}

package/dist/cjs/components/notification/MrlInlineMessage/MrlInlineMessage.module.scss.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlInlineMessage.module.css");
+exports.default = {
+	"MrlInlineMessage": "MrlInlineMessage--JjY7z",
+	"helper": "helper--rR9T5",
+	"error": "error--kyO-1",
+	"information": "information--PaY5Q",
+	"warning": "warning--rUiMf",
+	"success": "success--wwx-t",
+	"MrlInlineMessage-icon": "MrlInlineMessage-icon--U-6oq"
+};

package/dist/cjs/components/notification/MrlInlineMessage/index.js

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

package/dist/cjs/components/notification/MrlToast/MrlToast.js

@@ -0,0 +1,126 @@
+"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.MrlToast = void 0;
+const React = __importStar(require("react"));
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const colors_1 = require("@tactivos/mural-shared/lib/colors");
+const button_1 = require("../../button");
+const link_1 = require("../../link");
+const svg_1 = require("../../svg");
+const MrlToast_module_scss_1 = __importDefault(require("./MrlToast.module.scss.js"));
+const classnames_1 = __importDefault(require("classnames"));
+const layers_1 = require("../../../utils/layers");
+const useAutoClose_1 = require("../../../hooks/useAutoClose");
+/**
+ * MrlToast component.
+ * @param {MrlToastProps} props - The props for the MrlToast component.
+ * @returns {React.ReactElement} The MrlToast component.
+ */
+const MrlToast = (_a) => {
+    var { ['data-qa']: qa = 'toast-notification', autoClose = true, avatar, backgroundColor, className, closeAfterMs = 3000, kind = 'info', link, onClose, primaryCTA, primaryMessage, secondaryCTA, secondaryMessage, showCloseButton = false, showIcon = true } = _a, rest = __rest(_a, ['data-qa', "autoClose", "avatar", "backgroundColor", "className", "closeAfterMs", "kind", "link", "onClose", "primaryCTA", "primaryMessage", "secondaryCTA", "secondaryMessage", "showCloseButton", "showIcon"]);
+    // Set to true if any buttons exist on the toast, false otherwise
+    const hasInteractiveElements = showCloseButton || primaryCTA || secondaryCTA;
+    // Allowing autoClose when there are interactive elements in the toast is an anti-pattern
+    // and should be avoided. If autoClose is set to true and interactive elements exist, the
+    // toast will not close automatically.
+    const shouldAutoClose = autoClose && !hasInteractiveElements;
+    /* Boolean value tracking if the close timeout has been reached */
+    const [closed, setClosed] = (0, useAutoClose_1.useAutoClose)(shouldAutoClose, closeAfterMs, onClose);
+    const handleClose = () => {
+        setClosed(true);
+        // Slightly delay the onClose callback to allow the toast to animate out.
+        // This will prevent the toast from disappearing abruptly depending on how
+        // it is implemented within the application
+        setTimeout(() => {
+            if (onClose)
+                onClose();
+        }, 500);
+    };
+    const DEFAULT_ICONS = {
+        collaborator: ds_icons_1.lock,
+        error: ds_icons_1.error,
+        info: ds_icons_1.info,
+        private: ds_icons_1.modePrivate,
+        success: ds_icons_1.check,
+        warning: ds_icons_1.warning
+    };
+    const hasAvatar = typeof avatar !== 'undefined' && kind === 'collaborator';
+    const darkCollaborator = kind === 'collaborator' &&
+        backgroundColor &&
+        (0, colors_1.stickyTextColor)(backgroundColor, 'light', 'dark') === 'light';
+    const classes = (0, classnames_1.default)(MrlToast_module_scss_1.default['MrlToast'], className, MrlToast_module_scss_1.default[`${kind}Notification`], {
+        [MrlToast_module_scss_1.default.darkCollaborator]: !!darkCollaborator,
+        [MrlToast_module_scss_1.default.closing]: closed,
+        [MrlToast_module_scss_1.default['has-cta']]: !!hasInteractiveElements,
+        [MrlToast_module_scss_1.default['has-avatar']]: hasAvatar
+    });
+    const closeButtonkind = kind === 'warning' || darkCollaborator ? 'ghost' : 'ghost-inverse';
+    const customTextColor = !!backgroundColor && kind === 'collaborator'
+        ? (0, colors_1.stickyTextColor)(backgroundColor, '#000000', '#ffffff')
+        : undefined;
+    const primaryMessageClasses = (0, classnames_1.default)(MrlToast_module_scss_1.default.primaryMessage, 'MrlToast--primaryMessage');
+    const secondaryMessageClasses = (0, classnames_1.default)(MrlToast_module_scss_1.default.secondaryMessage, 'MrlToast--secondaryMessage');
+    return (React.createElement("div", Object.assign({}, rest, { className: classes, "data-qa": qa, style: {
+            backgroundColor: kind === 'collaborator' ? backgroundColor : undefined,
+            color: customTextColor,
+            zIndex: layers_1.PORTAL_LAYERS.TOAST.zIndex
+        } }),
+        React.createElement("div", { className: MrlToast_module_scss_1.default.content },
+            hasAvatar && React.createElement("span", { className: MrlToast_module_scss_1.default.avatarWrapper }, avatar),
+            !hasAvatar && showIcon && (React.createElement("span", { className: MrlToast_module_scss_1.default.iconWrapper },
+                React.createElement(svg_1.MrlSvg, { size: "small", svg: DEFAULT_ICONS[kind] || ds_icons_1.info }))),
+            React.createElement("span", { className: MrlToast_module_scss_1.default.textContent },
+                React.createElement("span", { className: primaryMessageClasses, "data-qa": "toast-primary-content" }, primaryMessage),
+                ' ',
+                React.createElement("span", { className: secondaryMessageClasses }, secondaryMessage),
+                link && (React.createElement("span", { className: MrlToast_module_scss_1.default.link },
+                    React.createElement(link_1.MrlLink, { text: link.text, href: link.url, kind: "simple", style: { color: 'inherit' }, size: "small" }))))),
+        hasInteractiveElements && (React.createElement("div", { className: MrlToast_module_scss_1.default['cta-container'] },
+            secondaryCTA && (React.createElement(button_1.MrlButton, { attrs: {
+                    className: MrlToast_module_scss_1.default['cta--secondary']
+                }, "data-qa": secondaryCTA.dataQa, kind: "inverse", onClick: secondaryCTA.onClick, size: "xsmall", text: secondaryCTA.text })),
+            primaryCTA && (React.createElement(button_1.MrlButton, { attrs: {
+                    className: MrlToast_module_scss_1.default['cta--primary']
+                }, "data-qa": primaryCTA.dataQa, kind: "inverse", onClick: primaryCTA.onClick, size: "xsmall", text: primaryCTA.text })),
+            showCloseButton && (React.createElement(button_1.MrlIconButton, { attrs: {
+                    className: MrlToast_module_scss_1.default['cta--close']
+                }, "data-qa": "mrl-toast-close-button", icon: React.createElement(svg_1.MrlSvg, { svg: ds_icons_1.close }), kind: closeButtonkind, onClick: handleClose, size: "xsmall", text: "Close", state: "default" }))))));
+};
+exports.MrlToast = MrlToast;

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

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

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

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransitionDuration = exports.defaults = exports.allowedValues = void 0;
+/*
+ * Notification component
+ * ------------------------------------------------------------------
+ */
+exports.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
+ */
+exports.defaults = {
+    dismissible: true,
+    kind: 'info',
+    level: '2',
+    scope: 'page',
+    state: 'open'
+};
+/**
+ * Default transition duration for the notification transitions
+ */
+exports.TransitionDuration = 333;

package/dist/cjs/components/notification/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("./MrlBlockNotification"), exports);
+__exportStar(require("./MrlToast"), exports);
+__exportStar(require("./MrlInlineMessage"), exports);

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlPagination.module.css");
+exports.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/cjs/components/pagination/MrlPagination/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("./MrlPagination"), exports);