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

package/dist/cjs/components/navigation-sidebar/MrlSidebarNavItem/MrlSidebarNavItem.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;
+};
+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.MrlSidebarNavItem = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const __1 = require("../../");
+const MrlSidebarNavItem_module_scss_1 = __importDefault(require("./MrlSidebarNavItem.module.scss.js"));
+/**
+ * Sidebar nav item component
+ * @param {MrlSidebarNavItemProps} props - the component props
+ * @returns a sidebar nav item
+ */
+function MrlSidebarNavItem(_a) {
+    var { className, ['data-qa']: qa, icon, isSelected, text, renderLink } = _a, rest = __rest(_a, ["className", 'data-qa', "icon", "isSelected", "text", "renderLink"]);
+    const allClasses = (0, classnames_1.default)('MrlSidebarNavItem', MrlSidebarNavItem_module_scss_1.default['MrlSidebarNavItem'], {
+        [MrlSidebarNavItem_module_scss_1.default['MrlSidebarNavItem-selected']]: isSelected,
+        'MrlSidebarNavItem-selected': isSelected,
+        [MrlSidebarNavItem_module_scss_1.default['hasIcon']]: typeof icon !== 'undefined'
+    }, className);
+    return (React.createElement("li", Object.assign({}, rest, { "data-qa": qa, className: allClasses }), renderLink({
+        linkContent: (React.createElement(React.Fragment, null,
+            icon && (React.createElement(__1.MrlSvg, { "aria-hidden": "true", svg: icon, className: MrlSidebarNavItem_module_scss_1.default['MrlSidebarNavItem-icon'], size: "auto" })),
+            text))
+    })));
+}
+exports.MrlSidebarNavItem = MrlSidebarNavItem;

package/dist/cjs/components/navigation-sidebar/MrlSidebarNavItem/MrlSidebarNavItem.module.css

@@ -0,0 +1,132 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--Ta1qj {
+  position: relative;
+}
+
+.MrlSidebarNavItem--c5els {
+  height: var(--mrl-spacing-08);
+  margin-bottom: var(--mrl-spacing-01);
+}
+.MrlSidebarNavItem--c5els > a {
+  align-items: center;
+  border-radius: var(--mrl-border-radius-content-large);
+  color: var(--mrl-color-text-heading);
+  display: inline-flex;
+  height: 100%;
+  outline: none;
+  padding: var(--mrl-spacing-03) var(--mrl-spacing-04);
+  position: relative;
+  text-decoration: none;
+  width: 100%;
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-xsmall);
+  font-weight: var(--mrl-type-weight-interactive);
+  letter-spacing: var(--mrl-type-spacing-interactive-xsmall);
+  line-height: var(--mrl-type-line-height-interactive-xsmall);
+}
+.MrlSidebarNavItem--c5els > a:focus-visible::after {
+  animation-duration: var(--mrl-duration-03);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-timing-function: var(--mrl-timing-m3);
+  border: 0 solid transparent;
+  border-radius: calc(
+		var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
+	);
+  bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  content: "";
+  display: block;
+  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  position: absolute;
+  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  z-index: 1;
+  animation-name: border-animation--dZKon;
+}
+@keyframes border-animation--dZKon {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes border-animation-inverse--aZk9W {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+.MrlSidebarNavItem--c5els > a:hover {
+  background-color: rgba(var(--mrl-gray-20), 1);
+}
+.MrlSidebarNavItem--c5els > a:active {
+  background-color: rgba(var(--mrl-gray-30), 1);
+}
+.MrlSidebarNavItem--c5els.hasIcon--Id011 > a {
+  padding: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
+}
+.MrlSidebarNavItem--c5els.MrlSidebarNavItem-selected--vVSo- a, .MrlSidebarNavItem--c5els.MrlSidebarNavItem-selected--vVSo- a:hover {
+  background-color: var(--mrl-color-background-highlight-active);
+  color: var(--mrl-color-text-inverse-active);
+}
+
+.MrlSidebarNavItem-icon--YvDsP {
+  height: var(--mrl-spacing-06);
+  margin-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
+  width: var(--mrl-spacing-06);
+}

package/dist/cjs/components/navigation-sidebar/MrlSidebarNavItem/MrlSidebarNavItem.module.scss.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlSidebarNavItem.module.css");
+exports.default = {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--Ta1qj",
+	"MrlSidebarNavItem": "MrlSidebarNavItem--c5els",
+	"border-animation": "border-animation--dZKon",
+	"hasIcon": "hasIcon--Id011",
+	"MrlSidebarNavItem-selected": "MrlSidebarNavItem-selected--vVSo-",
+	"MrlSidebarNavItem-icon": "MrlSidebarNavItem-icon--YvDsP",
+	"border-animation-inverse": "border-animation-inverse--aZk9W"
+};

package/dist/cjs/components/navigation-sidebar/MrlSidebarNavItem/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("./MrlSidebarNavItem"), exports);

package/dist/cjs/components/navigation-sidebar/index.js

@@ -0,0 +1,18 @@
+"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("./MrlSidebarNavGroup"), exports);
+__exportStar(require("./MrlSidebarNavItem"), exports);

package/dist/cjs/components/notification/MrlBlockNotification/MrlBlockNotification.global.css

@@ -0,0 +1,21 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper {
+  position: relative;
+}
+
+.mrl-blockNotification {
+  border-radius: var(--mrl-blockNotification-radius);
+}
+.mrl-blockNotification.mrl-is--transitioning {
+  opacity: 0;
+}
+.mrl-blockNotification.mrl-is--closed {
+  display: none;
+  padding: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .mrl-blockNotification.mrl-is--transitioning {
+    margin-top: calc(var(--mrl-blockNotification-height) * -1);
+  }
+}

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

@@ -0,0 +1,162 @@
+"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.MrlBlockNotification = void 0;
+const React = __importStar(require("react"));
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../../../utils");
+const constants_1 = require("../constants");
+const MrlSvg_1 = require("../../svg/MrlSvg/MrlSvg");
+const MrlIconButton_1 = require("../../button/MrlIconButton/MrlIconButton");
+const MrlTextHeading_1 = require("../../text/MrlTextHeading/MrlTextHeading");
+const MrlBlockNotification_module_scss_1 = __importDefault(require("./MrlBlockNotification.module.scss.js"));
+require("./MrlBlockNotification.global.css");
+const useAutoClose_1 = require("../../../hooks/useAutoClose");
+/**
+ * Configuration options for icons
+ */
+const iconOptions = {
+    error: ds_icons_1.error,
+    info: ds_icons_1.info,
+    success: ds_icons_1.check,
+    warning: ds_icons_1.warning
+};
+/**
+ * Block Notification Component
+ * @param props - Component props
+ * @returns {Element} Block Notification
+ */
+const MrlBlockNotification = (props) => {
+    const { attrs, autoCloseAfterMs, children, className, closeQa, cta, kind = constants_1.defaults.kind, dismissible = constants_1.defaults.dismissible, heading, hookClose, hookOpen, customIcon, level = constants_1.defaults.level, message, onAutoClose, scope = constants_1.defaults.scope, shouldAutoClose = false, state = constants_1.defaults.state } = props, rest = __rest(props, ["attrs", "autoCloseAfterMs", "children", "className", "closeQa", "cta", "kind", "dismissible", "heading", "hookClose", "hookOpen", "customIcon", "level", "message", "onAutoClose", "scope", "shouldAutoClose", "state"]);
+    /**
+     * Sets the open/close state of the notification
+     */
+    const [notificationState, setNotificationState] = React.useState(constants_1.defaults.state);
+    /**
+     * Reference to the notification
+     */
+    const notification = React.useRef(null);
+    /**
+     * Handles logic for opening the notification
+     */
+    const handleOpen = React.useCallback(() => {
+        setNotificationState('open');
+        setTimeout(() => {
+            hookOpen && hookOpen();
+        }, constants_1.TransitionDuration);
+    }, [hookOpen]);
+    /**
+     * It is an accessibility anti-pattern to auto-close an interactive element.
+     * Both the dismiss button and cta are interactive elements.
+     */
+    const isInteractiveElementPresent = dismissible || cta;
+    /**
+     * Controls auto-close behavior of the notification
+     */
+    const [autoClosed] = (0, useAutoClose_1.useAutoClose)(shouldAutoClose && !isInteractiveElementPresent, autoCloseAfterMs, onAutoClose);
+    /**
+     * Handles logic for closing the notification
+     */
+    const handleClose = React.useCallback(() => {
+        setNotificationState('close');
+        setTimeout(() => {
+            var _a;
+            // add class mrl-is--closed
+            (_a = notification.current) === null || _a === void 0 ? void 0 : _a.classList.add('mrl-is--closed');
+            hookClose && hookClose();
+        }, constants_1.TransitionDuration);
+    }, [hookClose]);
+    /**
+     * Toggles the open/closed state based on the state of the component
+     */
+    React.useEffect(() => {
+        if (notificationState === 'open' && autoClosed !== true) {
+            handleOpen();
+        }
+        else {
+            handleClose();
+        }
+    }, [notificationState, handleClose, handleOpen, autoClosed]);
+    /**
+     * Updates the internal state of the component when the state prop changes
+     */
+    React.useEffect(() => {
+        setNotificationState(state || constants_1.defaults.state);
+    }, [state]);
+    /**
+     * Renders a custom icon or a default icon if the kind supports it.
+     * @returns ReactElement | null
+     */
+    const renderIcon = () => {
+        const notificationIcon = typeof customIcon === 'undefined' ? iconOptions[kind] : customIcon;
+        // It could be undefined if the kind doesn't support a default icon.
+        if (!notificationIcon)
+            return null;
+        return (React.createElement("div", { className: (0, classnames_1.default)(MrlBlockNotification_module_scss_1.default['mrl-blockNotification-icon'], 'mrl-blockNotification-icon') },
+            React.createElement(MrlSvg_1.MrlSvg, { size: "small", svg: notificationIcon })));
+    };
+    const attributes = (0, utils_1.setAttributes)(attrs, {
+        'aria-hidden': (state === 'close').toString(),
+        // @todo need to determine if we want errors to always be assertive or
+        // if we want an easier ability to overwrite than the attrs object.
+        'aria-live': kind === 'error' ? 'assertive' : 'polite',
+        role: 'status'
+    });
+    const allClasses = (0, classnames_1.default)(MrlBlockNotification_module_scss_1.default['mrl-blockNotification'], className, 'mrl-blockNotification', {
+        [MrlBlockNotification_module_scss_1.default['mrl-blockNotification--dismissible']]: Boolean(dismissible),
+        'mrl-is--transitioning': notificationState === 'close'
+    });
+    const closeButtonKind = React.useMemo(() => {
+        return kind === 'warning' ? 'ghost' : 'ghost-inverse';
+    }, [kind]);
+    delete attributes.class;
+    delete attributes.className;
+    return (React.createElement("div", Object.assign({}, rest, { className: allClasses }, attributes, { "data-kind": kind, "data-scope": scope, ref: notification }),
+        renderIcon(),
+        React.createElement("div", { className: (0, classnames_1.default)(MrlBlockNotification_module_scss_1.default['mrl-blockNotification-message'], 'mrl-blockNotification-message') },
+            heading && (React.createElement(MrlTextHeading_1.MrlTextHeading, { className: (0, classnames_1.default)(MrlBlockNotification_module_scss_1.default['mrl-blockNotification-heading'], 'mrl-blockNotification-heading'), kind: "title", size: "small", level: level, text: heading })),
+            message && (React.createElement("p", { className: (0, classnames_1.default)(MrlBlockNotification_module_scss_1.default['mrl-blockNotification-text'], 'mrl-blockNotification-text') }, message)),
+            children && React.createElement(React.Fragment, null, children)),
+        cta && React.createElement("div", { className: (0, classnames_1.default)('cta', MrlBlockNotification_module_scss_1.default['cta']) }, cta),
+        dismissible && (React.createElement(MrlIconButton_1.MrlIconButton, { attrs: {
+                'data-qa': closeQa
+            }, icon: React.createElement(MrlSvg_1.MrlSvg, { svg: ds_icons_1.close, size: "small" }), onClick: handleClose, text: "Close", size: "small", kind: closeButtonKind, state: "default", position: "bottom", tipAnchor: "center", wrapperClassName: (0, classnames_1.default)(MrlBlockNotification_module_scss_1.default['mrl-blockNotification-close-wrapper'], 'mrl-blockNotification-close-wrapper') }))));
+};
+exports.MrlBlockNotification = MrlBlockNotification;

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

@@ -0,0 +1,222 @@
+@charset "UTF-8";
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--CHrqj {
+  position: relative;
+}
+
+:root {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton);
+  --mrl-button-border-radius: var(--mrl-border-radius-functional);
+}
+
+.mrl-u-preHydrateSkeleton--JduHS mrl-button:not(.hydrated--O8dMR),
+.mrl-u-preHydrateSkeleton--JduHS mrl-icon-button:not(.hydrated--O8dMR),
+.mrl-u-preHydrateSkeleton--JduHS mrl-shadow-button:not(.hydrated--O8dMR) {
+  min-height: var(--mrl-spacing-09);
+  min-width: var(--mrl-spacing-09);
+  background: var(--mrl-button-background-color-skeleton);
+  border-radius: var(--mrl-button-border-radius);
+  box-shadow: none;
+  color: transparent;
+  display: inline-flex;
+  font-family: var(--mrl-body-font);
+  pointer-events: none;
+  visibility: inherit;
+}
+.mrl-u-preHydrateSkeleton--JduHS mrl-button[kind=inverse]:not(.hydrated--O8dMR),
+.mrl-u-preHydrateSkeleton--JduHS mrl-button[kind=ghost-inverse]:not(.hydrated--O8dMR),
+.mrl-u-preHydrateSkeleton--JduHS mrl-icon-button[kind=inverse]:not(.hydrated--O8dMR),
+.mrl-u-preHydrateSkeleton--JduHS mrl-icon-button[kind=ghost-inverse]:not(.hydrated--O8dMR),
+.mrl-u-preHydrateSkeleton--JduHS mrl-shadow-button[kind=inverse]:not(.hydrated--O8dMR),
+.mrl-u-preHydrateSkeleton--JduHS mrl-shadow-button[kind=ghost-inverse]:not(.hydrated--O8dMR) {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+
+mrl-button[size=small],
+mrl-shadow-button[size=small] {
+  min-height: var(--mrl-spacing-08);
+}
+
+mrl-icon-button[size=small] {
+  min-height: var(--mrl-spacing-08);
+  min-width: var(--mrl-spacing-08);
+}
+
+mrl-button[size=large],
+mrl-shadow-button[size=large] {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+
+mrl-icon-button[size=large] {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+
+mrl-icon-button[size=xsmall][kind=ghost],
+mrl-icon-button[size=xsmall][kind=ghost-inverse] {
+  min-height: var(--mrl-spacing-07);
+  min-width: var(--mrl-spacing-07);
+}
+
+.mrl-blockNotification--GuV4C {
+  --mrl-blockNotification-background: var(--mrl-color-background-info);
+  --mrl-blockNotification-background-general: rgba(var(--mrl-gray-100), 1);
+  --mrl-blockNotification-color: rgba(var(--mrl-gray-10), 1);
+  --mrl-blockNotification-heading-color: var(--mrl-color-text-inverse);
+  --mrl-blockNotification-height: var(--mrl-spacing-09);
+  --mrl-blockNotification-inline-spacing: var(--mrl-spacing-03);
+  --mrl-blockNotification-inline-spacing-message: var(--mrl-spacing-02);
+  --mrl-blockNotification-inset-spacing: var(--mrl-spacing-02) var(--mrl-spacing-07);
+  --mrl-blockNotification-radius: 0;
+  --mrl-blockNotification-svg-color: var(--mrl-color-text-inverse);
+}
+
+.mrl-blockNotification--GuV4C[data-kind=info] {
+  --mrl-blockNotification-background: var(--mrl-color-background-info);
+}
+.mrl-blockNotification--GuV4C[data-kind=info][data-scope=inline] {
+  --mrl-blockNotification-background: var(--mrl-color-background-info-light);
+  --mrl-blockNotification-color: var(--mrl-color-text-info);
+  --mrl-blockNotification-svg-color: var(--mrl-color-text-info);
+  --mrl-blockNotification-heading-color: var(--mrl-color-text-info);
+}
+
+.mrl-blockNotification--GuV4C[data-kind=error] {
+  --mrl-blockNotification-background: var(--mrl-color-background-error);
+}
+.mrl-blockNotification--GuV4C[data-kind=error][data-scope=inline] {
+  --mrl-blockNotification-background: var(--mrl-color-background-error-light);
+  --mrl-blockNotification-color: var(--mrl-color-text-error);
+  --mrl-blockNotification-svg-color: var(--mrl-color-text-error);
+  --mrl-blockNotification-heading-color: var(--mrl-color-text-error);
+}
+
+.mrl-blockNotification--GuV4C[data-kind=success] {
+  --mrl-blockNotification-background: var(--mrl-color-background-success);
+}
+.mrl-blockNotification--GuV4C[data-kind=success][data-scope=inline] {
+  --mrl-blockNotification-background: var(--mrl-color-background-success-light);
+  --mrl-blockNotification-color: var(--mrl-color-text-success);
+  --mrl-blockNotification-svg-color: var(--mrl-color-text-success);
+  --mrl-blockNotification-heading-color: var(--mrl-color-text-success);
+}
+
+.mrl-blockNotification--GuV4C[data-kind=warning] {
+  --mrl-blockNotification-background: var(--mrl-color-background-warning);
+  --mrl-blockNotification-color: rgba(var(--mrl-gray-90), 1);
+  --mrl-blockNotification-heading-color: rgba(var(--mrl-black), 1);
+  --mrl-blockNotification-svg-color: rgba(var(--mrl-color-text-warning), 1);
+}
+.mrl-blockNotification--GuV4C[data-kind=warning][data-scope=inline] {
+  --mrl-blockNotification-background: var(--mrl-color-background-warning-light);
+  --mrl-blockNotification-color: var(--mrl-color-text-warning);
+  --mrl-blockNotification-heading-color: var(--mrl-color-text-warning);
+  --mrl-blockNotification-svg-color: rgba(var(--mrl-status-warning), 1);
+}
+
+.mrl-blockNotification--GuV4C[data-kind=general],
+.mrl-blockNotification--GuV4C[data-kind=private] {
+  --mrl-blockNotification-background: var(--mrl-blockNotification-background-general);
+}
+
+.mrl-blockNotification--GuV4C[data-scope=inline] {
+  --mrl-blockNotification-radius: var(--mrl-border-radius-content-large);
+  --mrl-blockNotification-inset-spacing: calc(var(--mrl-spacing-03) + var(--mrl-spacing-01))
+  	var(--mrl-spacing-04);
+  --mrl-blockNotification-cta-spacing: calc(
+  		calc(var(--mrl-spacing-03) - var(--mrl-spacing-01)) * -1
+  	)
+  	calc(var(--mrl-spacing-03) * -1) calc(calc(var(--mrl-spacing-03) - var(--mrl-spacing-01)) * -1)
+  	0;
+}
+
+/**
+ * @todo v2 - we should apply a class to the mrl-svg element instead
+ * of targeting the element. However, the class should be `mrl-blockNotification-icon`
+ * so we would want to rename the existing class to `mrl-blockNotification-iconWrapper`
+ * which is a breaking change. Also we could explore if we need this div at all?
+ **/
+.mrl-blockNotification-icon--bD-Y1 {
+  display: flex;
+  min-width: fit-content;
+}
+.mrl-blockNotification-icon--bD-Y1 svg {
+  color: var(--mrl-blockNotification-svg-color);
+}
+
+.mrl-blockNotification--GuV4C {
+  margin-top: 0;
+  opacity: 1;
+  transition-duration: var(--mrl-duration-03);
+  transition-property: margin opacity;
+  transition-timing-function: var(--mrl-timing-m1);
+  align-items: center;
+  background: var(--mrl-blockNotification-background);
+  color: var(--mrl-blockNotification-color);
+  display: flex;
+  flex-direction: row;
+  gap: var(--mrl-blockNotification-inline-spacing);
+  justify-content: center;
+  min-height: var(--mrl-blockNotification-height);
+  padding: var(--mrl-blockNotification-inset-spacing);
+  position: relative;
+  width: 100%;
+}
+.mrl-blockNotification--GuV4C .mrl-blockNotification-close-wrapper--SUgir {
+  position: absolute;
+  right: var(--mrl-spacing-02);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.mrl-blockNotification--GuV4C .mrl-blockNotification-close-wrapper--SUgir svg {
+  color: var(--mrl-blockNotification-color);
+}
+.mrl-blockNotification--GuV4C[data-scope=inline] {
+  display: inline-flex;
+  justify-content: start;
+  position: relative;
+  width: 100%;
+}
+.mrl-blockNotification--GuV4C[data-scope=inline] .cta--tfUz9 {
+  margin: var(--mrl-blockNotification-cta-spacing);
+}
+.mrl-blockNotification--GuV4C[data-scope=inline] .mrl-blockNotification-icon--bD-Y1 {
+  align-self: baseline;
+}
+.mrl-blockNotification--GuV4C[data-scope=inline] .mrl-blockNotification-close-wrapper--SUgir {
+  position: absolute;
+  top: 20px;
+}
+
+.mrl-blockNotification--dismissible--YqHi0 {
+  padding-right: calc(
+		var(--mrl-spacing-02) + var(--mrl-blockNotification-inline-spacing) + var(--mrl-spacing-08)
+	);
+  position: relative;
+}
+
+.mrl-blockNotification-message--mYKg9 {
+  align-items: center;
+  max-width: 45rem;
+}
+.mrl-blockNotification-message--mYKg9 h2,
+.mrl-blockNotification-message--mYKg9 p {
+  display: contents;
+}
+.mrl-blockNotification-message--mYKg9 h2::after {
+  content: " ";
+  display: contents;
+}
+.mrl-blockNotification-message--mYKg9 p {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-small);
+  font-weight: var(--mrl-type-weight-text);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-text-small);
+}
+
+.mrl-blockNotification-heading--U1dYc {
+  color: var(--mrl-blockNotification-heading-color);
+  display: inline;
+  margin-right: var(--mrl-blockNotification-inline-spacing-message);
+}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlBlockNotification.module.css");
+exports.default = {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--CHrqj",
+	"mrl-u-preHydrateSkeleton": "mrl-u-preHydrateSkeleton--JduHS",
+	"hydrated": "hydrated--O8dMR",
+	"mrl-blockNotification": "mrl-blockNotification--GuV4C",
+	"mrl-blockNotification-icon": "mrl-blockNotification-icon--bD-Y1",
+	"mrl-blockNotification-close-wrapper": "mrl-blockNotification-close-wrapper--SUgir",
+	"cta": "cta--tfUz9",
+	"mrl-blockNotification--dismissible": "mrl-blockNotification--dismissible--YqHi0",
+	"mrl-blockNotification-message": "mrl-blockNotification-message--mYKg9",
+	"mrl-blockNotification-heading": "mrl-blockNotification-heading--U1dYc"
+};

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

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