@muraldevkit/ui-toolkit 4.67.0 → 4.68.0-dev-NFbt.1

package/dist/esm/components/navigation-sidebar/MrlSidebarNavGroup/MrlSidebarNavGroup.js

@@ -0,0 +1,48 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './MrlSidebarNavGroup.module.scss.js';
+import { getUniqueId } from '../../../utils/setAttributes/setAttributes.js';
+import { MrlTextHeading } from '../../text/MrlTextHeading/MrlTextHeading.js';
+
+var _excluded = ["className", "children", "level", "headingText", "style", "hiddenHeading"];
+/**
+ * Sidebar group component
+ *
+ * @param {MrlSidebarNavGroupProps} props - the component props
+ * @returns a sidebar nav group
+ */
+function MrlSidebarNavGroup(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$level = _ref.level,
+    level = _ref$level === void 0 ? '3' : _ref$level,
+    headingText = _ref.headingText,
+    style = _ref.style,
+    hiddenHeading = _ref.hiddenHeading,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var allClasses = classnames(styles['MrlSidebarNavGroup'], className);
+  var headingIdRef = React.useRef(getUniqueId('mrl-sidebar-nav-group-heading'));
+  var navLabelProps = hiddenHeading ? {
+    'aria-label': headingText
+  } : {
+    'aria-labelledby': headingIdRef.current
+  };
+  return /*#__PURE__*/React.createElement("nav", _extends({
+    className: allClasses,
+    style: style
+  }, navLabelProps, rest), headingText && !hiddenHeading && /*#__PURE__*/React.createElement(MrlTextHeading, {
+    attrs: {
+      className: styles['MrlSidebarNavGroup-heading'],
+      id: headingIdRef.current
+    },
+    level: level,
+    text: headingText,
+    size: "xsmall",
+    hierarchy: "secondary",
+    kind: "title"
+  }), /*#__PURE__*/React.createElement("ul", null, children));
+}
+
+export { MrlSidebarNavGroup };
+//# sourceMappingURL=MrlSidebarNavGroup.js.map

package/dist/esm/components/navigation-sidebar/MrlSidebarNavGroup/MrlSidebarNavGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlSidebarNavGroup.js","sources":["../../../../../src/components/navigation-sidebar/MrlSidebarNavGroup/MrlSidebarNavGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { MrlTextHeading } from '../../';\nimport { LevelType } from '../../text/constants';\nimport { getUniqueId } from '../../../utils';\n\nimport styles from './MrlSidebarNavGroup.module.scss';\n\ninterface MrlSidebarNavGroupProps extends React.ComponentPropsWithoutRef<'nav'> {\n\t/** Additional class to add to the nav element */\n\tclassName?: string;\n\t/** A list of navigation items */\n\tchildren: React.ReactNode;\n\t/** Set the semantic level of the heading, only applies when headingText is defined */\n\tlevel?: Exclude<LevelType, '1'>;\n\t/**\n\t *  Sets the heading's text.\n\t *  If no visual heading is required add the hiddenHeading prop\n\t */\n\theadingText: string;\n\t/** Prevents rendering the heading and uses aria-label to label the nav element */\n\thiddenHeading?: boolean;\n}\n\n/**\n * Sidebar group component\n *\n * @param {MrlSidebarNavGroupProps} props - the component props\n * @returns a sidebar nav group\n */\nexport function MrlSidebarNavGroup({\n\tclassName,\n\tchildren,\n\tlevel = '3',\n\theadingText,\n\tstyle,\n\thiddenHeading,\n\t...rest\n}: MrlSidebarNavGroupProps): JSX.Element {\n\tconst allClasses = classnames(styles['MrlSidebarNavGroup'], className);\n\tconst headingIdRef = React.useRef(getUniqueId('mrl-sidebar-nav-group-heading'));\n\n\tconst navLabelProps = hiddenHeading\n\t\t? { 'aria-label': headingText }\n\t\t: { 'aria-labelledby': headingIdRef.current };\n\n\treturn (\n\t\t<nav className={allClasses} style={style} {...navLabelProps}\n\t\t\t{...rest}>\n\t\t\t{headingText && !hiddenHeading && (\n\t\t\t\t<MrlTextHeading\n\t\t\t\t\tattrs={{\n\t\t\t\t\t\tclassName: styles['MrlSidebarNavGroup-heading'],\n\t\t\t\t\t\tid: headingIdRef.current\n\t\t\t\t\t}}\n\t\t\t\t\tlevel={level}\n\t\t\t\t\ttext={headingText}\n\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\thierarchy=\"secondary\"\n\t\t\t\t\tkind=\"title\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<ul>{children}</ul>\n\t\t</nav>\n\t);\n}\n"],"names":["MrlSidebarNavGroup","_ref","className","children","_ref$level","level","headingText","style","hiddenHeading","rest","_objectWithoutProperties","_excluded","allClasses","classnames","styles","headingIdRef","React","useRef","getUniqueId","navLabelProps","current","createElement","_extends","MrlTextHeading","attrs","id","text","size","hierarchy","kind"],"mappings":";;;;;;;;AAwBA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,kBAAkBA,CAAAC,IAAA,EAQO;AAAA,EAAA,IAPxCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,UAAA,GAAAH,IAAA,CACRI,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,GAAG,GAAAA,UAAA;IACXE,WAAW,GAAAL,IAAA,CAAXK,WAAW;IACXC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,aAAa,GAAAP,IAAA,CAAbO,aAAa;AACVC,IAAAA,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA;EAEP,IAAMC,UAAU,GAAGC,UAAU,CAACC,MAAM,CAAC,oBAAoB,CAAC,EAAEZ,SAAS,CAAC;EACtE,IAAMa,YAAY,GAAGC,KAAK,CAACC,MAAM,CAACC,WAAW,CAAC,+BAA+B,CAAC,CAAC;EAE/E,IAAMC,aAAa,GAAGX,aAAa,GAChC;AAAE,IAAA,YAAY,EAAEF;AAAY,GAAC,GAC7B;IAAE,iBAAiB,EAAES,YAAY,CAACK;GAAS;AAE9C,EAAA,oBACCJ,KAAA,CAAAK,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AAAKpB,IAAAA,SAAS,EAAEU,UAAW;AAACL,IAAAA,KAAK,EAAEA;AAAM,GAAA,EAAKY,aAAa,EACtDV,IAAI,CAAA,EACPH,WAAW,IAAI,CAACE,aAAa,iBAC7BQ,KAAA,CAAAK,aAAA,CAACE,cAAc,EAAA;AACdC,IAAAA,KAAK,EAAE;AACNtB,MAAAA,SAAS,EAAEY,MAAM,CAAC,4BAA4B,CAAC;MAC/CW,EAAE,EAAEV,YAAY,CAACK;KAChB;AACFf,IAAAA,KAAK,EAAEA,KAAM;AACbqB,IAAAA,IAAI,EAAEpB,WAAY;AAClBqB,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,SAAS,EAAC,WAAW;AACrBC,IAAAA,IAAI,EAAC;GACL,CACD,eACDb,KAAA,CAAAK,aAAA,CAAA,IAAA,EAAA,IAAA,EAAKlB,QAAa,CACd,CAAC;AAER;;;;"}

package/dist/esm/components/navigation-sidebar/MrlSidebarNavGroup/MrlSidebarNavGroup.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"MrlSidebarNavGroup":"MrlSidebarNavGroup--k2AnI","MrlSidebarNavGroup-heading":"MrlSidebarNavGroup-heading--e4Arl"};
+
+export { styles as default };
+//# sourceMappingURL=MrlSidebarNavGroup.module.scss.js.map

package/dist/esm/components/navigation-sidebar/MrlSidebarNavGroup/MrlSidebarNavGroup.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlSidebarNavGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/navigation-sidebar/MrlSidebarNavItem/MrlSidebarNavItem.js

@@ -0,0 +1,36 @@
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './MrlSidebarNavItem.module.scss.js';
+import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
+
+var _excluded = ["className", "data-qa", "icon", "isSelected", "text", "renderLink"];
+/**
+ * Sidebar nav item component
+ * @param {MrlSidebarNavItemProps} props - the component props
+ * @returns a sidebar nav item
+ */
+function MrlSidebarNavItem(_ref) {
+  var className = _ref.className,
+    qa = _ref['data-qa'],
+    icon = _ref.icon,
+    isSelected = _ref.isSelected,
+    text = _ref.text,
+    renderLink = _ref.renderLink,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var allClasses = classnames('MrlSidebarNavItem', styles['MrlSidebarNavItem'], _defineProperty(_defineProperty(_defineProperty({}, styles['MrlSidebarNavItem-selected'], isSelected), 'MrlSidebarNavItem-selected', isSelected), styles['hasIcon'], typeof icon !== 'undefined'), className);
+  return /*#__PURE__*/React.createElement("li", _extends({}, rest, {
+    "data-qa": qa,
+    className: allClasses
+  }), renderLink({
+    linkContent: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(MrlSvg, {
+      "aria-hidden": "true",
+      svg: icon,
+      className: styles['MrlSidebarNavItem-icon'],
+      size: "auto"
+    }), text)
+  }));
+}
+
+export { MrlSidebarNavItem };
+//# sourceMappingURL=MrlSidebarNavItem.js.map

package/dist/esm/components/navigation-sidebar/MrlSidebarNavItem/MrlSidebarNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlSidebarNavItem.js","sources":["../../../../../src/components/navigation-sidebar/MrlSidebarNavItem/MrlSidebarNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { DSIconType, MrlSvg } from '../../';\n\nimport styles from './MrlSidebarNavItem.module.scss';\n\ninterface MrlSidebarNavItemProps {\n\t/** Additional class to add to the li element */\n\tclassName?: string;\n\t/** A string value used for data-qa attribute. */\n\t['data-qa']?: string;\n\t/** Leading icon of the sidebar nav item */\n\ticon?: DSIconType;\n\t/** Sets the selected state for the sidebar nav item */\n\tisSelected?: boolean;\n\t/**\n\t * Render function used to wrap the sidebar nav item with a link component.\n\t * It allows users to wrap the sidebar nav item with different link implementations, react-router's link for example.\n\t * @example\n\t * <MrlSidebarNavItem renderLink={({linkContent}) => <Link to=\"/\">{linkContent}</Link>}/>\n\t * <MrlSidebarNavItem renderLink={({linkContent}) => <a href=\"/\">{linkContent}</a>}/>\n\t */\n\trenderLink: ({ linkContent }: { linkContent: React.ReactNode }) => JSX.Element;\n\t/** The text of the sidebar item */\n\ttext?: React.ReactNode;\n}\n\n/**\n * Sidebar nav item component\n * @param {MrlSidebarNavItemProps} props - the component props\n * @returns a sidebar nav item\n */\nexport function MrlSidebarNavItem({\n\tclassName,\n\t['data-qa']: qa,\n\ticon,\n\tisSelected,\n\ttext,\n\trenderLink,\n\t...rest\n}: MrlSidebarNavItemProps): JSX.Element {\n\tconst allClasses = classnames(\n\t\t'MrlSidebarNavItem',\n\t\tstyles['MrlSidebarNavItem'],\n\t\t{\n\t\t\t[styles['MrlSidebarNavItem-selected']]: isSelected,\n\t\t\t'MrlSidebarNavItem-selected': isSelected,\n\t\t\t[styles['hasIcon']]: typeof icon !== 'undefined'\n\t\t},\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<li {...rest} data-qa={qa} className={allClasses}>\n\t\t\t{renderLink({\n\t\t\t\tlinkContent: (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && (\n\t\t\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tsvg={icon}\n\t\t\t\t\t\t\t\tclassName={styles['MrlSidebarNavItem-icon']}\n\t\t\t\t\t\t\t\tsize=\"auto\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{text}\n\t\t\t\t\t</>\n\t\t\t\t)\n\t\t\t})}\n\t\t</li>\n\t);\n}\n"],"names":["MrlSidebarNavItem","_ref","className","qa","icon","isSelected","text","renderLink","rest","_objectWithoutProperties","_excluded","allClasses","classnames","styles","_defineProperty","React","createElement","_extends","linkContent","Fragment","MrlSvg","svg","size"],"mappings":";;;;;;;AA2BA;AACA;AACA;AACA;AACA;AACO,SAASA,iBAAiBA,CAAAC,IAAA,EAQO;AAAA,EAAA,IAPvCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACIC,EAAE,GAAAF,IAAA,CAAd,SAAS,CAAA;IACVG,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACJC,UAAU,GAAAN,IAAA,CAAVM,UAAU;AACPC,IAAAA,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA;AAEP,EAAA,IAAMC,UAAU,GAAGC,UAAU,CAC5B,mBAAmB,EACnBC,MAAM,CAAC,mBAAmB,CAAC,EAAAC,eAAA,CAAAA,eAAA,CAAAA,eAAA,KAEzBD,MAAM,CAAC,4BAA4B,CAAC,EAAGR,UAAU,CAAA,EAClD,4BAA4B,EAAEA,UAAU,GACvCQ,MAAM,CAAC,SAAS,CAAC,EAAG,OAAOT,IAAI,KAAK,WAAW,CAAA,EAEjDF,SACD,CAAC;AAED,EAAA,oBACCa,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAAC,QAAA,KAAQT,IAAI,EAAA;AAAE,IAAA,SAAA,EAASL,EAAG;AAACD,IAAAA,SAAS,EAAES;AAAW,GAAA,CAAA,EAC/CJ,UAAU,CAAC;AACXW,IAAAA,WAAW,eACVH,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAI,QAAA,EAAA,IAAA,EACEf,IAAI,iBACJW,KAAA,CAAAC,aAAA,CAACI,MAAM,EAAA;AACN,MAAA,aAAA,EAAY,MAAM;AAClBC,MAAAA,GAAG,EAAEjB,IAAK;AACVF,MAAAA,SAAS,EAAEW,MAAM,CAAC,wBAAwB,CAAE;AAC5CS,MAAAA,IAAI,EAAC;KACL,CACD,EACAhB,IACA;AAEJ,GAAC,CACE,CAAC;AAEP;;;;"}

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

@@ -0,0 +1,4 @@
+var styles = {"MrlSidebarNavItem":"MrlSidebarNavItem--QDN9P","hasIcon":"hasIcon--TUNgW","MrlSidebarNavItem-selected":"MrlSidebarNavItem-selected--vA8rc","MrlSidebarNavItem-icon":"MrlSidebarNavItem-icon--VIvzN"};
+
+export { styles as default };
+//# sourceMappingURL=MrlSidebarNavItem.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MrlSidebarNavItem.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,189 @@
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import { close, warning, check, info, error } from '@muraldevkit/ds-icons';
+import classnames from 'classnames';
+import { defaults, TransitionDuration } from '../constants.js';
+import styles from './MrlBlockNotification.module.scss.js';
+import { useAutoClose } from '../../../hooks/useAutoClose/useAutoClose.js';
+import { setAttributes } from '../../../utils/setAttributes/setAttributes.js';
+import { MrlTextHeading } from '../../text/MrlTextHeading/MrlTextHeading.js';
+import { MrlIconButton } from '../../button/MrlIconButton/MrlIconButton.js';
+import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
+
+var _excluded = ["attrs", "autoCloseAfterMs", "children", "className", "closeQa", "cta", "kind", "dismissible", "heading", "hookClose", "hookOpen", "customIcon", "level", "message", "onAutoClose", "scope", "shouldAutoClose", "state"];
+/**
+ * Configuration options for icons
+ */
+var iconOptions = {
+  error: error,
+  info: info,
+  success: check,
+  warning: warning
+};
+
+/**
+ * Block Notification Component
+ * @param props - Component props
+ * @returns {Element} Block Notification
+ */
+var MrlBlockNotification = function MrlBlockNotification(props) {
+  var attrs = props.attrs,
+    autoCloseAfterMs = props.autoCloseAfterMs,
+    children = props.children,
+    className = props.className,
+    closeQa = props.closeQa,
+    cta = props.cta,
+    _props$kind = props.kind,
+    kind = _props$kind === void 0 ? defaults.kind : _props$kind,
+    _props$dismissible = props.dismissible,
+    dismissible = _props$dismissible === void 0 ? defaults.dismissible : _props$dismissible,
+    heading = props.heading,
+    hookClose = props.hookClose,
+    hookOpen = props.hookOpen,
+    customIcon = props.customIcon,
+    _props$level = props.level,
+    level = _props$level === void 0 ? defaults.level : _props$level,
+    message = props.message,
+    onAutoClose = props.onAutoClose,
+    _props$scope = props.scope,
+    scope = _props$scope === void 0 ? defaults.scope : _props$scope,
+    _props$shouldAutoClos = props.shouldAutoClose,
+    shouldAutoClose = _props$shouldAutoClos === void 0 ? false : _props$shouldAutoClos,
+    _props$state = props.state,
+    state = _props$state === void 0 ? defaults.state : _props$state,
+    rest = _objectWithoutProperties(props, _excluded);
+
+  /**
+   * Sets the open/close state of the notification
+   */
+  var _React$useState = React.useState(defaults.state),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    notificationState = _React$useState2[0],
+    setNotificationState = _React$useState2[1];
+
+  /**
+   * Reference to the notification
+   */
+  var notification = React.useRef(null);
+
+  /**
+   * Handles logic for opening the notification
+   */
+  var handleOpen = React.useCallback(function () {
+    setNotificationState('open');
+    setTimeout(function () {
+      hookOpen && hookOpen();
+    }, TransitionDuration);
+  }, [hookOpen]);
+
+  /**
+   * It is an accessibility anti-pattern to auto-close an interactive element.
+   * Both the dismiss button and cta are interactive elements.
+   */
+  var isInteractiveElementPresent = dismissible || cta;
+  /**
+   * Controls auto-close behavior of the notification
+   */
+  var _useAutoClose = useAutoClose(shouldAutoClose && !isInteractiveElementPresent, autoCloseAfterMs, onAutoClose),
+    _useAutoClose2 = _slicedToArray(_useAutoClose, 1),
+    autoClosed = _useAutoClose2[0];
+
+  /**
+   * Handles logic for closing the notification
+   */
+  var handleClose = React.useCallback(function () {
+    setNotificationState('close');
+    setTimeout(function () {
+      var _notification$current;
+      // add class mrl-is--closed
+      (_notification$current = notification.current) === null || _notification$current === void 0 ? void 0 : _notification$current.classList.add('mrl-is--closed');
+      hookClose && hookClose();
+    }, TransitionDuration);
+  }, [hookClose]);
+
+  /**
+   * Toggles the open/closed state based on the state of the component
+   */
+  React.useEffect(function () {
+    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(function () {
+    setNotificationState(state || defaults.state);
+  }, [state]);
+
+  /**
+   * Renders a custom icon or a default icon if the kind supports it.
+   * @returns ReactElement | null
+   */
+  var renderIcon = function renderIcon() {
+    var 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 /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles['mrl-blockNotification-icon'], 'mrl-blockNotification-icon')
+    }, /*#__PURE__*/React.createElement(MrlSvg, {
+      size: "small",
+      svg: notificationIcon
+    }));
+  };
+  var attributes = 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'
+  });
+  var allClasses = classnames(styles['mrl-blockNotification'], className, 'mrl-blockNotification', _defineProperty(_defineProperty({}, styles['mrl-blockNotification--dismissible'], Boolean(dismissible)), 'mrl-is--transitioning', notificationState === 'close'));
+  var closeButtonKind = React.useMemo(function () {
+    return kind === 'warning' ? 'ghost' : 'ghost-inverse';
+  }, [kind]);
+  delete attributes["class"];
+  delete attributes.className;
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: allClasses
+  }, attributes, {
+    "data-kind": kind,
+    "data-scope": scope,
+    ref: notification
+  }), renderIcon(), /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles['mrl-blockNotification-message'], 'mrl-blockNotification-message')
+  }, heading && /*#__PURE__*/React.createElement(MrlTextHeading, {
+    className: classnames(styles['mrl-blockNotification-heading'], 'mrl-blockNotification-heading'),
+    kind: "title",
+    size: "small",
+    level: level,
+    text: heading
+  }), message && /*#__PURE__*/React.createElement("p", {
+    className: classnames(styles['mrl-blockNotification-text'], 'mrl-blockNotification-text')
+  }, message), children && /*#__PURE__*/React.createElement(React.Fragment, null, children)), cta && /*#__PURE__*/React.createElement("div", {
+    className: classnames('cta', styles['cta'])
+  }, cta), dismissible && /*#__PURE__*/React.createElement(MrlIconButton, {
+    attrs: {
+      'data-qa': closeQa
+    },
+    icon: /*#__PURE__*/React.createElement(MrlSvg, {
+      svg: close,
+      size: "small"
+    }),
+    onClick: handleClose,
+    text: "Close",
+    size: "small",
+    kind: closeButtonKind,
+    state: "default",
+    position: "bottom",
+    tipAnchor: "center",
+    wrapperClassName: classnames(styles['mrl-blockNotification-close-wrapper'], 'mrl-blockNotification-close-wrapper')
+  }));
+};
+
+export { MrlBlockNotification };
+//# sourceMappingURL=MrlBlockNotification.js.map

package/dist/esm/components/notification/MrlBlockNotification/MrlBlockNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlBlockNotification.js","sources":["../../../../../src/components/notification/MrlBlockNotification/MrlBlockNotification.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, close, error, info, warning } from '@muraldevkit/ds-icons';\nimport classNames from 'classnames';\nimport { AttrsObject, setAttributes } from '../../../utils';\nimport {\n\tdefaults,\n\tNotificationKind,\n\tNotificationScope,\n\tNotificationState,\n\tNotificationLevel,\n\tTransitionDuration\n} from '../constants';\nimport { DSIconType, MrlIconButton, MrlSvg, MrlTextHeading } from '../..';\n\nimport styles from './MrlBlockNotification.module.scss';\nimport './MrlBlockNotification.global.scss';\nimport { useAutoClose } from '../../../hooks/useAutoClose';\n\nexport interface MrlBlockNotificationProps {\n\t/**\n\t * Block Notification Wrapper Class\n\t */\n\tclassName?: string;\n\n\t/**\n\t * QA attribute for close button to allow tests to find the element easier\n\t */\n\tcloseQa?: string;\n\n\t/**\n\t * Children\n\t *\n\t * IMPORTANT! — Make sure to set shouldAutoClose: false if children of this component\n\t * contain interactive elements. Autoclosing interactive elements is an accessibility\n\t * anti-pattern and should be avoided.\n\t */\n\tchildren?: React.ReactNode;\n\n\t/**\n\t * Adds CTA button to the notification\n\t */\n\tcta?: React.ReactElement;\n\n\t/**\n\t * The kind of notification to display.\n\t *\n\t * Examples: warning, error, info, success\n\t */\n\tkind?: NotificationKind;\n\n\t/**\n\t * A custom DS icon.\n\t */\n\tcustomIcon?: DSIconType;\n\n\t/**\n\t * Sets header text for notification\n\t */\n\theading?: string;\n\n\t/**\n\t * Adds a close button to notificaiton if true\n\t */\n\tdismissible?: boolean;\n\n\t/**\n\t * Sets the primary content for the notification\n\t */\n\tmessage?: React.ReactNode;\n\n\t/**\n\t * Sets the scope of the notification\n\t */\n\tscope?: NotificationScope;\n\n\t/**\n\t * Open/Close state of the notification\n\t */\n\tstate?: NotificationState;\n\n\t/**\n\t * Open notification callback\n\t * @returns {void}\n\t */\n\thookOpen?: () => void;\n\n\t/**\n\t * Close notification callback\n\t * @returns {void}\n\t */\n\thookClose?: () => void;\n\n\t/**\n\t * Sets the header level\n\t * Example output: h1, h2, h3, h4\n\t */\n\tlevel?: NotificationLevel;\n\n\t/**\n\t * Attributes that are applied to the component during the initial render.\n\t *\n\t * Example usage: html attributes, custom data attributes (data-qa), aria\n\t */\n\tattrs?: AttrsObject;\n\n\t/**\n\t * When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern) (see useAutoClose)\n\t */\n\tshouldAutoClose?: Parameters<useAutoClose>[0];\n\n\t/**\n\t * Delay in milliseconds before the component closes (see useAutoClose)\n\t */\n\tautoCloseAfterMs?: Parameters<useAutoClose>[1];\n\n\t/**\n\t * Callback to be called when component closes (see useAutoClose)\n\t */\n\tonAutoClose?: Parameters<useAutoClose>[2];\n}\n\n/**\n * Configuration options for icons\n */\nconst iconOptions: Record<string, DSIconType> = {\n\terror,\n\tinfo,\n\tsuccess: check,\n\twarning\n};\n\n/**\n * Block Notification Component\n * @param props - Component props\n * @returns {Element} Block Notification\n */\nexport const MrlBlockNotification = (props: MrlBlockNotificationProps): JSX.Element => {\n\tconst {\n\t\tattrs,\n\t\tautoCloseAfterMs,\n\t\tchildren,\n\t\tclassName,\n\t\tcloseQa,\n\t\tcta,\n\t\tkind = defaults.kind,\n\t\tdismissible = defaults.dismissible,\n\t\theading,\n\t\thookClose,\n\t\thookOpen,\n\t\tcustomIcon,\n\t\tlevel = defaults.level,\n\t\tmessage,\n\t\tonAutoClose,\n\t\tscope = defaults.scope,\n\t\tshouldAutoClose = false,\n\t\tstate = defaults.state,\n\t\t...rest\n\t} = props;\n\n\t/**\n\t * Sets the open/close state of the notification\n\t */\n\tconst [notificationState, setNotificationState] = React.useState<NotificationState>(\n\t\tdefaults.state\n\t);\n\n\t/**\n\t * Reference to the notification\n\t */\n\tconst notification = React.useRef<HTMLDivElement>(null);\n\n\t/**\n\t * Handles logic for opening the notification\n\t */\n\tconst handleOpen = React.useCallback(() => {\n\t\tsetNotificationState('open');\n\n\t\tsetTimeout(() => {\n\t\t\thookOpen && hookOpen();\n\t\t}, TransitionDuration);\n\t}, [hookOpen]);\n\n\t/**\n\t * It is an accessibility anti-pattern to auto-close an interactive element.\n\t * Both the dismiss button and cta are interactive elements.\n\t */\n\tconst isInteractiveElementPresent = dismissible || cta;\n\t/**\n\t * Controls auto-close behavior of the notification\n\t */\n\tconst [autoClosed] = useAutoClose(\n\t\tshouldAutoClose && !isInteractiveElementPresent,\n\t\tautoCloseAfterMs,\n\t\tonAutoClose\n\t);\n\n\t/**\n\t * Handles logic for closing the notification\n\t */\n\tconst handleClose = React.useCallback(() => {\n\t\tsetNotificationState('close');\n\n\t\tsetTimeout(() => {\n\t\t\t// add class mrl-is--closed\n\t\t\tnotification.current?.classList.add('mrl-is--closed');\n\t\t\thookClose && hookClose();\n\t\t}, TransitionDuration);\n\t}, [hookClose]);\n\n\t/**\n\t * Toggles the open/closed state based on the state of the component\n\t */\n\tReact.useEffect(() => {\n\t\tif (notificationState === 'open' && autoClosed !== true) {\n\t\t\thandleOpen();\n\t\t} else {\n\t\t\thandleClose();\n\t\t}\n\t}, [notificationState, handleClose, handleOpen, autoClosed]);\n\n\t/**\n\t * Updates the internal state of the component when the state prop changes\n\t */\n\tReact.useEffect(() => {\n\t\tsetNotificationState(state || defaults.state);\n\t}, [state]);\n\n\t/**\n\t * Renders a custom icon or a default icon if the kind supports it.\n\t * @returns ReactElement | null\n\t */\n\tconst renderIcon = (): React.ReactElement | null => {\n\t\tconst notificationIcon = typeof customIcon === 'undefined' ? iconOptions[kind] : customIcon;\n\n\t\t// It could be undefined if the kind doesn't support a default icon.\n\t\tif (!notificationIcon) return null;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(styles['mrl-blockNotification-icon'], 'mrl-blockNotification-icon')}\n\t\t\t>\n\t\t\t\t<MrlSvg size=\"small\" svg={notificationIcon} />\n\t\t\t</div>\n\t\t);\n\t};\n\n\tconst attributes = setAttributes(attrs, {\n\t\t'aria-hidden': (state === 'close').toString(),\n\n\t\t// @todo need to determine if we want errors to always be assertive or\n\t\t// if we want an easier ability to overwrite than the attrs object.\n\t\t'aria-live': kind === 'error' ? 'assertive' : 'polite',\n\t\trole: 'status'\n\t});\n\n\tconst allClasses = classNames(\n\t\tstyles['mrl-blockNotification'],\n\t\tclassName,\n\t\t'mrl-blockNotification',\n\t\t{\n\t\t\t[styles['mrl-blockNotification--dismissible']]: Boolean(dismissible),\n\t\t\t'mrl-is--transitioning': notificationState === 'close'\n\t\t}\n\t);\n\n\tconst closeButtonKind = React.useMemo(() => {\n\t\treturn kind === 'warning' ? 'ghost' : 'ghost-inverse';\n\t}, [kind]);\n\n\tdelete attributes.class;\n\tdelete attributes.className;\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={allClasses}\n\t\t\t{...attributes}\n\t\t\tdata-kind={kind}\n\t\t\tdata-scope={scope}\n\t\t\tref={notification}\n\t\t>\n\t\t\t{renderIcon()}\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\tstyles['mrl-blockNotification-message'],\n\t\t\t\t\t'mrl-blockNotification-message'\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{/* // to do, add configurable header based on level, when MrlText is completed */}\n\t\t\t\t{heading && (\n\t\t\t\t\t<MrlTextHeading\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles['mrl-blockNotification-heading'],\n\t\t\t\t\t\t\t'mrl-blockNotification-heading'\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tkind=\"title\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tlevel={level}\n\t\t\t\t\t\ttext={heading}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{message && (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles['mrl-blockNotification-text'],\n\t\t\t\t\t\t\t'mrl-blockNotification-text'\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{message}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t\t{children && <>{children}</>}\n\t\t\t</div>\n\t\t\t{cta && <div className={classNames('cta', styles['cta'])}>{cta}</div>}\n\t\t\t{dismissible && (\n\t\t\t\t<MrlIconButton\n\t\t\t\t\tattrs={{\n\t\t\t\t\t\t'data-qa': closeQa\n\t\t\t\t\t}}\n\t\t\t\t\ticon={<MrlSvg svg={close} size=\"small\" />}\n\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tkind={closeButtonKind}\n\t\t\t\t\tstate=\"default\"\n\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\twrapperClassName={classNames(\n\t\t\t\t\t\tstyles['mrl-blockNotification-close-wrapper'],\n\t\t\t\t\t\t'mrl-blockNotification-close-wrapper'\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["iconOptions","error","info","success","check","warning","MrlBlockNotification","props","attrs","autoCloseAfterMs","children","className","closeQa","cta","_props$kind","kind","defaults","_props$dismissible","dismissible","heading","hookClose","hookOpen","customIcon","_props$level","level","message","onAutoClose","_props$scope","scope","_props$shouldAutoClos","shouldAutoClose","_props$state","state","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","notificationState","setNotificationState","notification","useRef","handleOpen","useCallback","setTimeout","TransitionDuration","isInteractiveElementPresent","_useAutoClose","useAutoClose","_useAutoClose2","autoClosed","handleClose","_notification$current","current","classList","add","useEffect","renderIcon","notificationIcon","createElement","classNames","styles","MrlSvg","size","svg","attributes","setAttributes","toString","role","allClasses","_defineProperty","Boolean","closeButtonKind","useMemo","_extends","ref","MrlTextHeading","text","Fragment","MrlIconButton","icon","close","onClick","position","tipAnchor","wrapperClassName"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var styles = {"mrl-blockNotification":"mrl-blockNotification--xbhrd","mrl-blockNotification-icon":"mrl-blockNotification-icon--CAq04","mrl-blockNotification-close-wrapper":"mrl-blockNotification-close-wrapper--yODTH","cta":"cta--gnyoO","mrl-blockNotification--dismissible":"mrl-blockNotification--dismissible--ZlIID","mrl-blockNotification-message":"mrl-blockNotification-message--MdtXZ","mrl-blockNotification-heading":"mrl-blockNotification-heading--WGPWE"};
+
+export { styles as default };
+//# sourceMappingURL=MrlBlockNotification.module.scss.js.map

package/dist/esm/components/notification/MrlBlockNotification/MrlBlockNotification.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlBlockNotification.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,61 @@
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import { check, warning, info, error } from '@muraldevkit/ds-icons';
+import classnames from 'classnames';
+import styles from './MrlInlineMessage.module.scss.js';
+import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
+
+var _excluded = ["children", "customIcon", "id", "kind", "message", "data-qa"];
+var getIcon = function getIcon(kind, customIcon) {
+  switch (kind) {
+    case 'error':
+      return error;
+    case 'info':
+      return info;
+    case 'warning':
+      return warning;
+    case 'success':
+      return check;
+    default:
+      return customIcon ? customIcon : undefined;
+  }
+};
+var renderIcon = function renderIcon(icon, iconClasses) {
+  if (icon) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: iconClasses
+    }, /*#__PURE__*/React.createElement(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.
+ */
+var MrlInlineMessage = function MrlInlineMessage(_ref) {
+  var children = _ref.children,
+    customIcon = _ref.customIcon,
+    id = _ref.id,
+    kind = _ref.kind,
+    message = _ref.message,
+    _ref$dataQa = _ref['data-qa'],
+    qa = _ref$dataQa === void 0 ? 'mrl-inline-notification' : _ref$dataQa,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var icon = getIcon(kind, customIcon);
+  var iconClasses = classnames(styles['MrlInlineMessage-icon']);
+  var notificationClasses = classnames(styles['MrlInlineMessage'], 'MrlInlineMessage', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.error, kind === 'error'), styles.information, kind === 'info'), styles.success, kind === 'success'), styles.warning, kind === 'warning'), styles.helper, kind === 'helper'));
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    className: notificationClasses,
+    "data-qa": qa,
+    id: id
+  }), renderIcon(icon, iconClasses), /*#__PURE__*/React.createElement("span", {
+    className: "MrlInlineMessage-message"
+  }, typeof message !== 'undefined' ? message : children));
+};
+
+export { MrlInlineMessage };
+//# sourceMappingURL=MrlInlineMessage.js.map

package/dist/esm/components/notification/MrlInlineMessage/MrlInlineMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlInlineMessage.js","sources":["../../../../../src/components/notification/MrlInlineMessage/MrlInlineMessage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { error, info, warning, check } from '@muraldevkit/ds-icons';\nimport { DSIconType, MrlSvg } from '../../svg';\nimport classNames from 'classnames';\nimport styles from './MrlInlineMessage.module.scss';\n\nexport type InlineMessageKind = 'error' | 'info' | 'warning' | 'success' | 'helper';\n\nexport interface MrlInlineMessageProps {\n\t/**\n\t * A custom DS icon which is only applied if the alert is not an error, info, or warning type\n\t */\n\tcustomIcon?: DSIconType;\n\n\t/**\n\t * The id of the notification.\n\t *\n\t * Used to link the notification to a form field using aria-describedby.\n\t */\n\tid: string;\n\n\t/**\n\t * Choose the kind of notification to display.\n\t *\n\t * Accepted values: error, info, warning, success, helper\n\t */\n\tkind: InlineMessageKind;\n\n\t/**\n\t * The text to be displayed in the notification. If not provided, children will be used.\n\t */\n\tmessage?: string;\n\n\t/**\n\t * Children to be rendered within the component, it will be used as the message if message is not provided.\n\t */\n\tchildren?: React.ReactNode;\n\n\t/**\n\t * The data-qa attribute for testing purposes.\n\t */\n\t['data-qa']?: string;\n}\n\nconst getIcon = (kind: InlineMessageKind, customIcon?: DSIconType): DSIconType | undefined => {\n\tswitch (kind) {\n\t\tcase 'error':\n\t\t\treturn error;\n\t\tcase 'info':\n\t\t\treturn info;\n\t\tcase 'warning':\n\t\t\treturn warning;\n\t\tcase 'success':\n\t\t\treturn check;\n\t\tdefault:\n\t\t\treturn customIcon ? customIcon : undefined;\n\t}\n};\n\nconst renderIcon = (\n\ticon: DSIconType | undefined,\n\ticonClasses: string\n): React.ReactElement | undefined => {\n\tif (icon) {\n\t\treturn (\n\t\t\t<span className={iconClasses}>\n\t\t\t\t<MrlSvg size=\"auto\" svg={icon} />\n\t\t\t</span>\n\t\t);\n\t}\n};\n\n/**\n * MrlInlineMessage is a notification component that can be used to display messages to the user.\n * @param props - The properties of the component.\n * @returns A React component.\n */\nexport const MrlInlineMessage = ({\n\tchildren,\n\tcustomIcon,\n\tid,\n\tkind,\n\tmessage,\n\t['data-qa']: qa = 'mrl-inline-notification',\n\t...rest\n}: MrlInlineMessageProps): React.ReactElement => {\n\tconst icon = getIcon(kind, customIcon);\n\tconst iconClasses = classNames(styles['MrlInlineMessage-icon']);\n\n\tconst notificationClasses = classNames(styles['MrlInlineMessage'], 'MrlInlineMessage', {\n\t\t[styles.error]: kind === 'error',\n\t\t[styles.information]: kind === 'info',\n\t\t[styles.success]: kind === 'success',\n\t\t[styles.warning]: kind === 'warning',\n\t\t[styles.helper]: kind === 'helper'\n\t});\n\n\treturn (\n\t\t<span {...rest} className={notificationClasses} data-qa={qa} id={id}>\n\t\t\t{renderIcon(icon, iconClasses)}\n\t\t\t<span className=\"MrlInlineMessage-message\">\n\t\t\t\t{typeof message !== 'undefined' ? message : children}\n\t\t\t</span>\n\t\t</span>\n\t);\n};\n"],"names":["getIcon","kind","customIcon","error","info","warning","check","undefined","renderIcon","icon","iconClasses","React","createElement","className","MrlSvg","size","svg","MrlInlineMessage","_ref","children","id","message","_ref$dataQa","qa","rest","_objectWithoutProperties","_excluded","classNames","styles","notificationClasses","_defineProperty","information","success","helper","_extends"],"mappings":";;;;;;;;AA4CA,IAAMA,OAAO,GAAG,SAAVA,OAAOA,CAAIC,IAAuB,EAAEC,UAAuB,EAA6B;AAC7F,EAAA,QAAQD,IAAI;AACX,IAAA,KAAK,OAAO;AACX,MAAA,OAAOE,KAAK;AACb,IAAA,KAAK,MAAM;AACV,MAAA,OAAOC,IAAI;AACZ,IAAA,KAAK,SAAS;AACb,MAAA,OAAOC,OAAO;AACf,IAAA,KAAK,SAAS;AACb,MAAA,OAAOC,KAAK;AACb,IAAA;AACC,MAAA,OAAOJ,UAAU,GAAGA,UAAU,GAAGK,SAAS;AAC5C;AACD,CAAC;AAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CACfC,IAA4B,EAC5BC,WAAmB,EACiB;AACpC,EAAA,IAAID,IAAI,EAAE;IACT,oBACCE,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,SAAS,EAAEH;AAAY,KAAA,eAC5BC,KAAA,CAAAC,aAAA,CAACE,MAAM,EAAA;AAACC,MAAAA,IAAI,EAAC,MAAM;AAACC,MAAAA,GAAG,EAAEP;AAAK,KAAE,CAC3B,CAAC;AAET,EAAA;AACD,CAAC;;AAED;AACA;AACA;AACA;AACA;IACaQ,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAQoB;AAAA,EAAA,IAPhDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRjB,UAAU,GAAAgB,IAAA,CAAVhB,UAAU;IACVkB,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFnB,IAAI,GAAAiB,IAAA,CAAJjB,IAAI;IACJoB,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAAC,WAAA,GAAAJ,IAAA,CACN,SAAS,CAAA;AAAGK,IAAAA,EAAE,GAAAD,WAAA,KAAA,MAAA,GAAG,yBAAyB,GAAAA,WAAA;AACxCE,IAAAA,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA;AAEP,EAAA,IAAMjB,IAAI,GAAGT,OAAO,CAACC,IAAI,EAAEC,UAAU,CAAC;EACtC,IAAMQ,WAAW,GAAGiB,UAAU,CAACC,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAE/D,EAAA,IAAMC,mBAAmB,GAAGF,UAAU,CAACC,MAAM,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,EAAAE,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAA,EAAA,EACnFF,MAAM,CAACzB,KAAK,EAAGF,IAAI,KAAK,OAAO,CAAA,EAC/B2B,MAAM,CAACG,WAAW,EAAG9B,IAAI,KAAK,MAAM,CAAA,EACpC2B,MAAM,CAACI,OAAO,EAAG/B,IAAI,KAAK,SAAS,CAAA,EACnC2B,MAAM,CAACvB,OAAO,EAAGJ,IAAI,KAAK,SAAS,CAAA,EACnC2B,MAAM,CAACK,MAAM,EAAGhC,IAAI,KAAK,QAAQ,CAClC,CAAC;AAEF,EAAA,oBACCU,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAAsB,QAAA,KAAUV,IAAI,EAAA;AAAEX,IAAAA,SAAS,EAAEgB,mBAAoB;AAAC,IAAA,SAAA,EAASN,EAAG;AAACH,IAAAA,EAAE,EAAEA;GAAG,CAAA,EAClEZ,UAAU,CAACC,IAAI,EAAEC,WAAW,CAAC,eAC9BC,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;GAA0B,EACxC,OAAOQ,OAAO,KAAK,WAAW,GAAGA,OAAO,GAAGF,QACvC,CACD,CAAC;AAET;;;;"}

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

@@ -0,0 +1,4 @@
+var styles = {"MrlInlineMessage":"MrlInlineMessage--QFQ5I","helper":"helper--t6Wxz","error":"error--dG1GD","information":"information--FFyzz","warning":"warning--G_zyY","success":"success--nrMdN","MrlInlineMessage-icon":"MrlInlineMessage-icon--Lvzuc"};
+
+export { styles as default };
+//# sourceMappingURL=MrlInlineMessage.module.scss.js.map

package/dist/esm/components/notification/MrlInlineMessage/MrlInlineMessage.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlInlineMessage.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,152 @@
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import { warning, check, modePrivate, info, error, lock, close } from '@muraldevkit/ds-icons';
+import { stickyTextColor } from '@tactivos/mural-shared/lib/colors';
+import styles from './MrlToast.module.scss.js';
+import classnames from 'classnames';
+import { PORTAL_LAYERS } from '../../../utils/layers/index.js';
+import { useAutoClose } from '../../../hooks/useAutoClose/useAutoClose.js';
+import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
+import { MrlLink } from '../../link/MrlLink/MrlLink.js';
+import { MrlButton } from '../../button/MrlButton/MrlButton.js';
+import { MrlIconButton } from '../../button/MrlIconButton/MrlIconButton.js';
+
+var _excluded = ["data-qa", "autoClose", "avatar", "backgroundColor", "className", "closeAfterMs", "kind", "link", "onClose", "primaryCTA", "primaryMessage", "secondaryCTA", "secondaryMessage", "showCloseButton", "showIcon"];
+/**
+ * MrlToast component.
+ * @param {MrlToastProps} props - The props for the MrlToast component.
+ * @returns {React.ReactElement} The MrlToast component.
+ */
+var MrlToast = function MrlToast(_ref) {
+  var _ref$dataQa = _ref['data-qa'],
+    qa = _ref$dataQa === void 0 ? 'toast-notification' : _ref$dataQa,
+    _ref$autoClose = _ref.autoClose,
+    autoClose = _ref$autoClose === void 0 ? true : _ref$autoClose,
+    avatar = _ref.avatar,
+    backgroundColor = _ref.backgroundColor,
+    className = _ref.className,
+    _ref$closeAfterMs = _ref.closeAfterMs,
+    closeAfterMs = _ref$closeAfterMs === void 0 ? 3000 : _ref$closeAfterMs,
+    _ref$kind = _ref.kind,
+    kind = _ref$kind === void 0 ? 'info' : _ref$kind,
+    link = _ref.link,
+    onClose = _ref.onClose,
+    primaryCTA = _ref.primaryCTA,
+    primaryMessage = _ref.primaryMessage,
+    secondaryCTA = _ref.secondaryCTA,
+    secondaryMessage = _ref.secondaryMessage,
+    _ref$showCloseButton = _ref.showCloseButton,
+    showCloseButton = _ref$showCloseButton === void 0 ? false : _ref$showCloseButton,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // Set to true if any buttons exist on the toast, false otherwise
+  var 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.
+  var shouldAutoClose = autoClose && !hasInteractiveElements;
+
+  /* Boolean value tracking if the close timeout has been reached */
+  var _useAutoClose = useAutoClose(shouldAutoClose, closeAfterMs, onClose),
+    _useAutoClose2 = _slicedToArray(_useAutoClose, 2),
+    closed = _useAutoClose2[0],
+    setClosed = _useAutoClose2[1];
+  var handleClose = function 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(function () {
+      if (onClose) onClose();
+    }, 500);
+  };
+  var DEFAULT_ICONS = {
+    collaborator: lock,
+    error: error,
+    info: info,
+    "private": modePrivate,
+    success: check,
+    warning: warning
+  };
+  var hasAvatar = typeof avatar !== 'undefined' && kind === 'collaborator';
+  var darkCollaborator = kind === 'collaborator' && backgroundColor && stickyTextColor(backgroundColor, 'light', 'dark') === 'light';
+  var classes = classnames(styles['MrlToast'], className, styles["".concat(kind, "Notification")], _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.darkCollaborator, !!darkCollaborator), styles.closing, closed), styles['has-cta'], !!hasInteractiveElements), styles['has-avatar'], hasAvatar));
+  var closeButtonkind = kind === 'warning' || darkCollaborator ? 'ghost' : 'ghost-inverse';
+  var customTextColor = !!backgroundColor && kind === 'collaborator' ? stickyTextColor(backgroundColor, '#000000', '#ffffff') : undefined;
+  var primaryMessageClasses = classnames(styles.primaryMessage, 'MrlToast--primaryMessage');
+  var secondaryMessageClasses = classnames(styles.secondaryMessage, 'MrlToast--secondaryMessage');
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: classes,
+    "data-qa": qa,
+    style: {
+      backgroundColor: kind === 'collaborator' ? backgroundColor : undefined,
+      color: customTextColor,
+      zIndex: PORTAL_LAYERS.TOAST.zIndex
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, hasAvatar && /*#__PURE__*/React.createElement("span", {
+    className: styles.avatarWrapper
+  }, avatar), !hasAvatar && showIcon && /*#__PURE__*/React.createElement("span", {
+    className: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(MrlSvg, {
+    size: "small",
+    svg: DEFAULT_ICONS[kind] || info
+  })), /*#__PURE__*/React.createElement("span", {
+    className: styles.textContent
+  }, /*#__PURE__*/React.createElement("span", {
+    className: primaryMessageClasses,
+    "data-qa": "toast-primary-content"
+  }, primaryMessage), ' ', /*#__PURE__*/React.createElement("span", {
+    className: secondaryMessageClasses
+  }, secondaryMessage), link && /*#__PURE__*/React.createElement("span", {
+    className: styles.link
+  }, /*#__PURE__*/React.createElement(MrlLink, {
+    text: link.text,
+    href: link.url,
+    kind: "simple",
+    style: {
+      color: 'inherit'
+    },
+    size: "small"
+  })))), hasInteractiveElements && /*#__PURE__*/React.createElement("div", {
+    className: styles['cta-container']
+  }, secondaryCTA && /*#__PURE__*/React.createElement(MrlButton, {
+    attrs: {
+      className: styles['cta--secondary']
+    },
+    "data-qa": secondaryCTA.dataQa,
+    kind: "inverse",
+    onClick: secondaryCTA.onClick,
+    size: "xsmall",
+    text: secondaryCTA.text
+  }), primaryCTA && /*#__PURE__*/React.createElement(MrlButton, {
+    attrs: {
+      className: styles['cta--primary']
+    },
+    "data-qa": primaryCTA.dataQa,
+    kind: "inverse",
+    onClick: primaryCTA.onClick,
+    size: "xsmall",
+    text: primaryCTA.text
+  }), showCloseButton && /*#__PURE__*/React.createElement(MrlIconButton, {
+    attrs: {
+      className: styles['cta--close']
+    },
+    "data-qa": "mrl-toast-close-button",
+    icon: /*#__PURE__*/React.createElement(MrlSvg, {
+      svg: close
+    }),
+    kind: closeButtonkind,
+    onClick: handleClose,
+    size: "xsmall",
+    text: "Close",
+    state: "default"
+  })));
+};
+
+export { MrlToast };
+//# sourceMappingURL=MrlToast.js.map