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

package/dist/esm/components/link/constants.js

@@ -1,29 +0,0 @@
-export const allowedValues = {
-    colors: ['default', 'mono', 'inverse'],
-    kind: ['bold', 'simple'],
-    linkButtonKind: ['secondary', 'primary', 'inverse'],
-    sizes: [
-        'default',
-        'large',
-        'medium',
-        'small',
-        'xsmall'
-    ],
-    targets: [
-        '_blank',
-        '_parent',
-        '_top',
-        '_self'
-    ]
-};
-/**
- * Default values for props on the Link component;
- * Shared between the component and Storybook
- */
-export const defaults = {
-    color: 'default',
-    kind: 'bold',
-    linkButtonKind: 'secondary',
-    size: 'default',
-    target: '_self'
-};

package/dist/esm/components/link/index.js

@@ -1,2 +0,0 @@
-export * from './MrlLink';
-export * from './MrlLinkButton';

package/dist/esm/components/live-region/MrlLiveRegion/MrlLiveRegion.js

@@ -1,43 +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 classNames from 'classnames';
-import { getUniqueId } from '../../../utils';
-import * as React from 'react';
-import { useMemo, useState } from 'react';
-/**
- * Live region component to render an HTML live region with the provided content.
- *
- * @param props - The live region component props.
- * @returns The live region component.
- */
-export const MrlLiveRegion = (_a) => {
-    var { ariaAtomic, ariaLive, ariaRelevant, id, srContent, visible = false, shouldClearContent = false } = _a, props = __rest(_a, ["ariaAtomic", "ariaLive", "ariaRelevant", "id", "srContent", "visible", "shouldClearContent"]);
-    const [content, setContent] = useState('');
-    React.useEffect(() => {
-        setContent(srContent);
-        if (shouldClearContent) {
-            const contentTimeout = setTimeout(() => {
-                setContent('');
-                clearTimeout(contentTimeout);
-            }, 1000);
-            return () => clearTimeout(contentTimeout);
-        }
-    }, [shouldClearContent, srContent]);
-    const nodeId = useMemo(() => id || getUniqueId('live-region-'), [id]);
-    const dataQaProp = props['data-qa'];
-    const dataQa = dataQaProp || `${nodeId}-live-region`;
-    const classes = classNames('MrlLiveRegion', {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        'mrl-visually-hidden': !visible
-    });
-    return (React.createElement("p", Object.assign({}, (ariaAtomic ? { 'aria-atomic': ariaAtomic } : {}), { "aria-live": ariaLive }, (ariaRelevant ? { 'aria-relevant': ariaRelevant } : {}), { className: classes, "data-qa": dataQa, id: nodeId }, props), content));
-};

package/dist/esm/components/live-region/MrlLiveRegion/index.js

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

package/dist/esm/components/live-region/demo/LiveRegionDemo.js

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { MrlButton } from '../../button';
-import { MrlLiveRegion } from '../MrlLiveRegion';
-/**
- * Demo of a live region
- *
- * @returns {Element} The Live Region Demo
- */
-export const LiveRegionDemo = () => {
-    const [content, setContent] = React.useState(null);
-    const updateContent = (content) => {
-        setContent(content);
-    };
-    const srContent = content || 'This is a live region';
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MrlButton, { onClick: () => updateContent('You clicked button 1'), text: "Button 1" }),
-        React.createElement(MrlButton, { onClick: () => updateContent('You clicked button 2'), text: "Button 2" }),
-        React.createElement(MrlButton, { onClick: () => updateContent('You clicked button 3'), text: "Button 3" }),
-        React.createElement(MrlLiveRegion, { ariaLive: "polite", visible: true, srContent: srContent })));
-};

package/dist/esm/components/live-region/index.js

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

package/dist/esm/components/loader/MrlProgressBar/MrlProgressBar.js

@@ -1,65 +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 classnames from 'classnames';
-import { MrlTextHeading } from '../../';
-import { progressBarDefaults } from '../constants';
-import styles from './MrlProgressBar.module.scss.js';
-import '../../../styles/shared/a11y-helpers/a11y.global.css';
-/**
- * MrlProgressBar React component.
- *
- * @param props - component props
- * @returns a MrlProgressBar React component.
- */
-export function MrlProgressBar(_a) {
-    var { children, className = '', indeterminate = false, name, percent = progressBarDefaults.percent, showText = progressBarDefaults.showText, text, time = 0 } = _a, rest = __rest(_a, ["children", "className", "indeterminate", "name", "percent", "showText", "text", "time"]);
-    const roundPercent = percent ? Math.round(percent) : 0;
-    const containerClasses = classnames(styles['MrlProgressBar-container'], 'MrlProgressBar-container', {
-        [`${className}-container`]: className !== ''
-    });
-    const progressBarClasses = classnames(styles['MrlProgressBar'], 'MrlProgressBar', className);
-    const textContainerClass = classnames(styles['MrlProgressBar--textContainer'], 'MrlProgressBar--textContainer', {
-        'mrl-visually-hidden': !showText
-    });
-    const completeClasses = classnames(styles['MrlProgressBar--complete'], {
-        [styles['MrlProgressBar--timed']]: time > 0 && !indeterminate
-    }, {
-        [styles['MrlProgressBar--indeterminate']]: indeterminate
-    });
-    const completeStyle = time > 0 && !indeterminate
-        ? {
-            'animation-duration': `${time}ms`
-        }
-        : indeterminate
-            ? {
-                width: '100%'
-            }
-            : {
-                width: `${roundPercent}%`
-            };
-    const defaultText = time > 0 || indeterminate ? 'Loading' : `${roundPercent === null || roundPercent === void 0 ? void 0 : roundPercent.toString()}% complete`;
-    const ariaValues = time > 0 || indeterminate
-        ? {}
-        : {
-            'aria-valuemin': 0,
-            'aria-valuemax': 100,
-            'aria-valuetext': `${roundPercent}%`,
-            'aria-valuenow': roundPercent
-        };
-    return (React.createElement("div", Object.assign({}, rest, { className: containerClasses }),
-        React.createElement("div", Object.assign({ className: progressBarClasses, "aria-label": name, role: "progressbar" }, ariaValues),
-            React.createElement("div", { className: completeClasses, style: completeStyle })),
-        React.createElement("div", { className: textContainerClass, role: "status" },
-            React.createElement(MrlTextHeading, { hierarchy: "secondary", kind: "title", level: "2", size: "xsmall" }, text || defaultText)),
-        children));
-}

package/dist/esm/components/loader/MrlProgressBar/MrlProgressBar.module.css

@@ -1,62 +0,0 @@
-.MrlProgressBar-container--ZyqY- {
-  min-width: 4.25rem;
-  padding: var(--mrl-spacing-03);
-  width: auto;
-}
-
-.MrlProgressBar--CRPfr {
-  background-color: var(--mrl-black-opacity-00);
-  border-radius: var(--mrl-radii-03);
-  height: var(--mrl-spacing-02);
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-}
-
-.MrlProgressBar--complete--AjvXv {
-  background-color: rgba(var(--mrl-blue-70), 1);
-  border-radius: var(--mrl-radii-03);
-  height: var(--mrl-spacing-02);
-  left: 0;
-  position: absolute;
-  top: 0;
-}
-
-.MrlProgressBar--textContainer--Ptaqr {
-  margin-top: var(--mrl-spacing-03);
-  text-align: center;
-}
-
-@keyframes timed--aqwDP {
-  0% {
-    width: 0;
-  }
-  15% {
-    width: 25%;
-  }
-  70% {
-    width: 72.5%;
-  }
-  100% {
-    width: 100%;
-  }
-}
-.MrlProgressBar--timed--ngaEW {
-  animation-name: timed--aqwDP;
-  animation-timing-function: var(--mrl-timing-m1);
-  width: 100%;
-}
-
-@keyframes indeterminate--glrdG {
-  from {
-    left: -100%;
-  }
-  to {
-    left: 100%;
-  }
-}
-.MrlProgressBar--indeterminate--YbxYt {
-  animation: 2s indeterminate--glrdG var(--mrl-timing-m1) infinite;
-  left: -100%;
-  width: 200%;
-}

package/dist/esm/components/loader/MrlProgressBar/MrlProgressBar.module.scss.js

@@ -1,11 +0,0 @@
-import "./MrlProgressBar.module.css";
-export default {
-	"MrlProgressBar-container": "MrlProgressBar-container--ZyqY-",
-	"MrlProgressBar": "MrlProgressBar--CRPfr",
-	"MrlProgressBar--complete": "MrlProgressBar--complete--AjvXv",
-	"MrlProgressBar--textContainer": "MrlProgressBar--textContainer--Ptaqr",
-	"MrlProgressBar--timed": "MrlProgressBar--timed--ngaEW",
-	"timed": "timed--aqwDP",
-	"MrlProgressBar--indeterminate": "MrlProgressBar--indeterminate--YbxYt",
-	"indeterminate": "indeterminate--glrdG"
-};

package/dist/esm/components/loader/MrlProgressBar/index.js

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

package/dist/esm/components/loader/MrlSpinner/MrlSpinner.js

@@ -1,48 +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 classnames from 'classnames';
-import { spinnerDefaults } from '../constants';
-import styles from './MrlSpinner.module.scss.js';
-import '../../../styles/shared/a11y-helpers/a11y.global.css';
-/**
- * MrlSpinner React component.
- *
- * @param props - component props
- * @returns a MrlSpinner React component.
- */
-export function MrlSpinner(_a) {
-    var { className = '', logo = false, kind = spinnerDefaults.kind, role = spinnerDefaults.role, size = spinnerDefaults.size, text = spinnerDefaults.text } = _a, rest = __rest(_a, ["className", "logo", "kind", "role", "size", "text"]);
-    const containerClasses = classnames(styles['MrlSpinner-container'], 'MrlSpinner-container', {
-        [`${className}-container`]: className !== '',
-        [styles[`MrlSpinner-container--${size}`]]: size !== spinnerDefaults.size,
-        [styles[`MrlSpinner-container--logo`]]: logo !== spinnerDefaults.logo,
-        ['MrlSpinner-container--logo']: logo !== spinnerDefaults.logo
-    });
-    const spinnerClasses = classnames(styles['MrlSpinner'], 'MrlSpinner', className, {
-        [styles[`MrlSpinner--${kind}`]]: kind !== spinnerDefaults.kind,
-        [styles[`MrlSpinner--${size}`]]: size !== spinnerDefaults.size
-    });
-    return (React.createElement("span", Object.assign({}, rest, { className: containerClasses, role: role }),
-        React.createElement("span", { className: spinnerClasses }),
-        logo && (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 99 30", "data-mrl-svg-name": "brandWordmark", role: "presentation", className: styles.MrlSpinnerLogo },
-            React.createElement("path", { fill: "#00843F", d: "M80.557 29.328c-5.36 0-9.722-4.577-9.722-10.194 0-5.617 4.361-10.194 9.722-10.194 5.36 0 9.721 4.577 9.721 10.194 0 5.617-4.374 10.194-9.721 10.194Zm.594-15.73c-2.836 0-5.131 2.484-5.131 5.522 0 3.052 2.309 5.523 5.13 5.523 2.823 0 5.132-2.484 5.132-5.523 0-3.038-2.31-5.522-5.131-5.522Z" }),
-            React.createElement("path", { fill: "#000", d: "M35.836 9.21h-5.185v19.794h5.185V9.21Z" }),
-            React.createElement("path", { fill: "#FF4B4B", d: "M11.234 29.004V9.21A3.028 3.028 0 0 0 8.21 6.185 3.02 3.02 0 0 0 5.185 9.21H0c0-4.524 3.686-8.197 8.21-8.197 4.523 0 8.21 3.687 8.21 8.21v14.61h3.01V9.21c0-4.524 3.686-8.21 8.21-8.21 4.523 0 8.21 3.686 8.21 8.21h-5.186a3.028 3.028 0 0 0-3.024-3.025 3.028 3.028 0 0 0-3.025 3.025v19.794h-13.38Z" }),
-            React.createElement("path", { fill: "#000", d: "M5.185 9.21H0v19.794h5.185V9.21Zm50.702 0h-5.185v11.166h5.185V9.21Z" }),
-            React.createElement("path", { fill: "#5887FF", d: "M46.908 29.328c-4.942 0-8.966-4.023-8.966-8.965h5.185c0 2.08 1.702 3.78 3.781 3.78 2.08 0 3.78-1.7 3.78-3.78h5.186c0 4.942-4.024 8.965-8.966 8.965Z" }),
-            React.createElement("path", { fill: "#000", d: "M43.141 9.21h-5.185v11.166h5.185V9.21Z" }),
-            React.createElement("path", { fill: "#FC83FF", d: "M98.772 1.324h-5.185V9.21h5.185V1.324Z" }),
-            React.createElement("path", { fill: "#000", d: "M91.467 9.21h-5.185v19.794h5.185V9.21Zm7.305 0h-5.185v19.794h5.185V9.21Zm-35.58 5.171h-5.185v14.61h5.185V14.38Z" }),
-            React.createElement("path", { fill: "#FA0", d: "M70.767 9.21h-12.76v5.185h12.76V9.21Z" }))),
-        React.createElement("span", { className: "mrl-visually-hidden" }, text || spinnerDefaults.text)));
-}

package/dist/esm/components/loader/MrlSpinner/MrlSpinner.module.css

@@ -1,98 +0,0 @@
-@keyframes spin--Jnujm {
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-.MrlSpinner-container--jyBxd {
-  height: var(--mrl-spacing-06);
-  overflow: hidden;
-  position: relative;
-  width: var(--mrl-spacing-06);
-}
-.MrlSpinner-container--xsmall--12m-l {
-  align-items: center;
-  display: flex;
-  height: var(--mrl-spacing-05);
-  justify-content: center;
-  width: var(--mrl-spacing-05);
-}
-.MrlSpinner-container--medium--wsy20 {
-  height: var(--mrl-spacing-07);
-  width: var(--mrl-spacing-07);
-}
-.MrlSpinner-container--large--WyXIK {
-  height: var(--mrl-spacing-09);
-  width: var(--mrl-spacing-09);
-}
-.MrlSpinner-container--large--WyXIK.MrlSpinner-container--logo--tmSHs {
-  height: 93px;
-}
-
-.MrlSpinner--xYJKA {
-  align-items: center;
-  animation: 500ms spin--Jnujm var(--mrl-timing-m3) infinite;
-  display: flex;
-  height: var(--mrl-spacing-06);
-  justify-content: center;
-  width: var(--mrl-spacing-06);
-}
-.MrlSpinner--xYJKA::before {
-  background: conic-gradient(from 11.31deg at 50% 50%, rgba(var(--mrl-blue-70), 0) 0deg, rgba(var(--mrl-blue-70), 0) 0.26deg, rgba(var(--mrl-blue-70), 0) 60deg, rgba(var(--mrl-blue-70), 0.26) 114.38deg, rgba(var(--mrl-blue-70), 1) 217.5deg, rgba(var(--mrl-blue-70), 1) 360deg);
-  border-radius: 6px;
-  clip-path: path("M10 1c0-.552-.449-1.005-.999-.95C3.947.55 0 4.813 0 10c0 5.523 4.477 10 10 10s10-4.477 10-10a9.987 9.987 0 0 0-4.152-8.112c-.452-.327-1.073-.154-1.347.332-.268.477-.099 1.077.337 1.408a8 8 0 1 1-5.836-1.566C9.55 1.993 10 1.552 10 1Z");
-  content: "";
-  display: block;
-  height: 20px;
-  width: 20px;
-}
-.MrlSpinner--xsmall--B4qhm {
-  height: var(--mrl-spacing-06);
-  width: var(--mrl-spacing-06);
-}
-.MrlSpinner--xsmall--B4qhm::before {
-  transform: scale(0.6);
-}
-.MrlSpinner--medium--ez6JK {
-  height: var(--mrl-spacing-07);
-  width: var(--mrl-spacing-07);
-}
-.MrlSpinner--medium--ez6JK::before {
-  transform: scale(1.2);
-}
-.MrlSpinner--large--xL-m0 {
-  height: var(--mrl-spacing-09);
-  width: var(--mrl-spacing-09);
-}
-.MrlSpinner--large--xL-m0::before {
-  transform: scale(2);
-}
-.MrlSpinner--inverse--Gz0IY::before {
-  background: conic-gradient(from 11.31deg at 50% 50%, rgba(var(--mrl-white), 0) 0deg, rgba(var(--mrl-white), 0) 0.26deg, rgba(var(--mrl-white), 0) 60deg, rgba(var(--mrl-white), 0.26) 114.38deg, rgba(var(--mrl-white), 1) 217.5deg, rgba(var(--mrl-white), 1) 360deg);
-}
-
-.MrlSpinner-container--logo--tmSHs {
-  text-align: center;
-}
-.MrlSpinner-container--logo--tmSHs.MrlSpinner-container--jyBxd {
-  display: block;
-  min-height: calc(var(--mrl-spacing-12) + var(--mrl-spacing-02));
-  width: 99px;
-}
-.MrlSpinner-container--logo--tmSHs .MrlSpinner--xYJKA {
-  margin: 0 auto;
-}
-
-.MrlSpinnerLogo--v-Y-u {
-  display: block;
-  margin-top: var(--mrl-spacing-07);
-  width: 99px;
-}
-
-@media (prefers-reduced-motion) {
-  .MrlSpinner--xYJKA {
-    animation: 1.5s spin--Jnujm linear 4;
-  }
-}

package/dist/esm/components/loader/MrlSpinner/MrlSpinner.module.scss.js

@@ -1,15 +0,0 @@
-import "./MrlSpinner.module.css";
-export default {
-	"MrlSpinner-container": "MrlSpinner-container--jyBxd",
-	"MrlSpinner-container--xsmall": "MrlSpinner-container--xsmall--12m-l",
-	"MrlSpinner-container--medium": "MrlSpinner-container--medium--wsy20",
-	"MrlSpinner-container--large": "MrlSpinner-container--large--WyXIK",
-	"MrlSpinner-container--logo": "MrlSpinner-container--logo--tmSHs",
-	"MrlSpinner": "MrlSpinner--xYJKA",
-	"spin": "spin--Jnujm",
-	"MrlSpinner--xsmall": "MrlSpinner--xsmall--B4qhm",
-	"MrlSpinner--medium": "MrlSpinner--medium--ez6JK",
-	"MrlSpinner--large": "MrlSpinner--large--xL-m0",
-	"MrlSpinner--inverse": "MrlSpinner--inverse--Gz0IY",
-	"MrlSpinnerLogo": "MrlSpinnerLogo--v-Y-u"
-};

package/dist/esm/components/loader/MrlSpinner/index.js

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

package/dist/esm/components/loader/constants.js

@@ -1,20 +0,0 @@
-/**
- * Default values for props on the MrlProgressBar component;
- * Shared between the component and Storybook
- */
-export const progressBarDefaults = {
-    percent: 0,
-    showText: false,
-    name: 'Progress Bar'
-};
-/**
- * Default values for props on the MrlSpinner component;
- * Shared between the component and Storybook
- */
-export const spinnerDefaults = {
-    kind: 'default',
-    role: 'status',
-    size: 'small',
-    text: 'Loading',
-    logo: false
-};

package/dist/esm/components/loader/index.js

@@ -1,3 +0,0 @@
-export * from './MrlProgressBar';
-export * from './MrlSpinner';
-export * from './constants';