@muraldevkit/ui-toolkit 4.66.0-dev-DhSN.1 → 4.66.0-dev-QELk.1

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

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

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

@@ -1,2 +0,0 @@
-export * from './MrlSidebarNavGroup';
-export * from './MrlSidebarNavItem';

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

@@ -1,21 +0,0 @@
-/* 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/esm/components/notification/MrlBlockNotification/MrlBlockNotification.js

@@ -1,132 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { check, close, error, info, warning } from '@muraldevkit/ds-icons';
-import classNames from 'classnames';
-import { setAttributes } from '../../../utils';
-import { defaults, TransitionDuration } from '../constants';
-import { MrlSvg } from '../../svg/MrlSvg/MrlSvg';
-import { MrlIconButton } from '../../button/MrlIconButton/MrlIconButton';
-import { MrlTextHeading } from '../../text/MrlTextHeading/MrlTextHeading';
-import styles from './MrlBlockNotification.module.scss.js';
-import './MrlBlockNotification.global.css';
-import { useAutoClose } from '../../../hooks/useAutoClose';
-/**
- * Configuration options for icons
- */
-const iconOptions = {
-    error,
-    info,
-    success: check,
-    warning
-};
-/**
- * Block Notification Component
- * @param props - Component props
- * @returns {Element} Block Notification
- */
-export const MrlBlockNotification = (props) => {
-    const { attrs, autoCloseAfterMs, children, className, closeQa, cta, kind = defaults.kind, dismissible = defaults.dismissible, heading, hookClose, hookOpen, customIcon, level = defaults.level, message, onAutoClose, scope = defaults.scope, shouldAutoClose = false, state = 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(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();
-        }, 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] = 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();
-        }, 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 || 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: classNames(styles['mrl-blockNotification-icon'], 'mrl-blockNotification-icon') },
-            React.createElement(MrlSvg, { size: "small", svg: notificationIcon })));
-    };
-    const 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'
-    });
-    const allClasses = classNames(styles['mrl-blockNotification'], className, 'mrl-blockNotification', {
-        [styles['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: classNames(styles['mrl-blockNotification-message'], 'mrl-blockNotification-message') },
-            heading && (React.createElement(MrlTextHeading, { className: classNames(styles['mrl-blockNotification-heading'], 'mrl-blockNotification-heading'), kind: "title", size: "small", level: level, text: heading })),
-            message && (React.createElement("p", { className: classNames(styles['mrl-blockNotification-text'], 'mrl-blockNotification-text') }, message)),
-            children && React.createElement(React.Fragment, null, children)),
-        cta && React.createElement("div", { className: classNames('cta', styles['cta']) }, cta),
-        dismissible && (React.createElement(MrlIconButton, { attrs: {
-                'data-qa': closeQa
-            }, icon: 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') }))));
-};

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

@@ -1,222 +0,0 @@
-@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/esm/components/notification/MrlBlockNotification/MrlBlockNotification.module.scss.js

@@ -1,13 +0,0 @@
-import "./MrlBlockNotification.module.css";
-export 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/esm/components/notification/MrlBlockNotification/index.js

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

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

@@ -1,56 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { error, info, warning, check } from '@muraldevkit/ds-icons';
-import { MrlSvg } from '../../svg';
-import classNames from 'classnames';
-import styles from './MrlInlineMessage.module.scss.js';
-const 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;
-    }
-};
-const renderIcon = (icon, iconClasses) => {
-    if (icon) {
-        return (React.createElement("span", { className: iconClasses },
-            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.
- */
-export 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 = classNames(styles['MrlInlineMessage-icon']);
-    const notificationClasses = classNames(styles['MrlInlineMessage'], 'MrlInlineMessage', {
-        [styles.error]: kind === 'error',
-        [styles.information]: kind === 'info',
-        [styles.success]: kind === 'success',
-        [styles.warning]: kind === 'warning',
-        [styles.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)));
-};

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

@@ -1,39 +0,0 @@
-.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/esm/components/notification/MrlInlineMessage/MrlInlineMessage.module.scss.js

@@ -1,10 +0,0 @@
-import "./MrlInlineMessage.module.css";
-export 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/esm/components/notification/MrlInlineMessage/index.js

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

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

@@ -1,96 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { check, close, error, info, lock, modePrivate, warning } from '@muraldevkit/ds-icons';
-import { stickyTextColor } from '@tactivos/mural-shared/lib/colors';
-import { MrlIconButton, MrlButton } from '../../button';
-import { MrlLink } from '../../link';
-import { MrlSvg } from '../../svg';
-import styles from './MrlToast.module.scss.js';
-import classNames from 'classnames';
-import { PORTAL_LAYERS as layers } from '../../../utils/layers';
-import { useAutoClose } from '../../../hooks/useAutoClose';
-/**
- * MrlToast component.
- * @param {MrlToastProps} props - The props for the MrlToast component.
- * @returns {React.ReactElement} The MrlToast component.
- */
-export 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] = 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: lock,
-        error,
-        info,
-        private: modePrivate,
-        success: check,
-        warning
-    };
-    const hasAvatar = typeof avatar !== 'undefined' && kind === 'collaborator';
-    const darkCollaborator = kind === 'collaborator' &&
-        backgroundColor &&
-        stickyTextColor(backgroundColor, 'light', 'dark') === 'light';
-    const classes = classNames(styles['MrlToast'], className, styles[`${kind}Notification`], {
-        [styles.darkCollaborator]: !!darkCollaborator,
-        [styles.closing]: closed,
-        [styles['has-cta']]: !!hasInteractiveElements,
-        [styles['has-avatar']]: hasAvatar
-    });
-    const closeButtonkind = kind === 'warning' || darkCollaborator ? 'ghost' : 'ghost-inverse';
-    const customTextColor = !!backgroundColor && kind === 'collaborator'
-        ? stickyTextColor(backgroundColor, '#000000', '#ffffff')
-        : undefined;
-    const primaryMessageClasses = classNames(styles.primaryMessage, 'MrlToast--primaryMessage');
-    const secondaryMessageClasses = classNames(styles.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.TOAST.zIndex
-        } }),
-        React.createElement("div", { className: styles.content },
-            hasAvatar && React.createElement("span", { className: styles.avatarWrapper }, avatar),
-            !hasAvatar && showIcon && (React.createElement("span", { className: styles.iconWrapper },
-                React.createElement(MrlSvg, { size: "small", svg: DEFAULT_ICONS[kind] || info }))),
-            React.createElement("span", { className: styles.textContent },
-                React.createElement("span", { className: primaryMessageClasses, "data-qa": "toast-primary-content" }, primaryMessage),
-                ' ',
-                React.createElement("span", { className: secondaryMessageClasses }, secondaryMessage),
-                link && (React.createElement("span", { className: styles.link },
-                    React.createElement(MrlLink, { text: link.text, href: link.url, kind: "simple", style: { color: 'inherit' }, size: "small" }))))),
-        hasInteractiveElements && (React.createElement("div", { className: styles['cta-container'] },
-            secondaryCTA && (React.createElement(MrlButton, { attrs: {
-                    className: styles['cta--secondary']
-                }, "data-qa": secondaryCTA.dataQa, kind: "inverse", onClick: secondaryCTA.onClick, size: "xsmall", text: secondaryCTA.text })),
-            primaryCTA && (React.createElement(MrlButton, { attrs: {
-                    className: styles['cta--primary']
-                }, "data-qa": primaryCTA.dataQa, kind: "inverse", onClick: primaryCTA.onClick, size: "xsmall", text: primaryCTA.text })),
-            showCloseButton && (React.createElement(MrlIconButton, { attrs: {
-                    className: styles['cta--close']
-                }, "data-qa": "mrl-toast-close-button", icon: React.createElement(MrlSvg, { svg: close }), kind: closeButtonkind, onClick: handleClose, size: "xsmall", text: "Close", state: "default" }))))));
-};