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

package/dist/esm/components/skeleton/MrlSkeleton/MrlSkeleton.js

@@ -0,0 +1,29 @@
+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 * as React from 'react';
+import styles from './MrlSkeleton.module.scss.js';
+/**
+ * MrlSkeleton React component.
+ *
+ * @param props {MrlSkeletonProps} - component props
+ * @returns a MrlSkeleton React component.
+ */
+export function MrlSkeleton(_a) {
+    var { height = 'var(--mrl-spacing-05)', shape = 'default', style, width, className } = _a, rest = __rest(_a, ["height", "shape", "style", "width", "className"]);
+    const classes = classnames(styles['MrlSkeleton'], {
+        [styles[`MrlSkeleton-${shape}`]]: shape !== 'default'
+    }, className);
+    const skeletonStyle = Object.assign(Object.assign(Object.assign({}, style), { height,
+        width }), (shape === 'circle' && { width: height }));
+    return React.createElement("div", Object.assign({ "aria-hidden": "true", className: classes, style: skeletonStyle }, rest));
+}

package/dist/esm/components/skeleton/MrlSkeleton/MrlSkeleton.module.css

@@ -0,0 +1,41 @@
+@keyframes shimmer--MvtuC {
+  0% {
+    background-position: right;
+  }
+  100% {
+    background-position: left;
+  }
+}
+.MrlSkeleton--hJyx- {
+  background-color: var(--mrl-black-opacity-00);
+  border-radius: var(--mrl-border-radius-functional);
+  overflow: hidden;
+  position: relative;
+}
+.MrlSkeleton--hJyx-::after {
+  animation-direction: normal;
+  animation-duration: 2.5s;
+  animation-iteration-count: infinite;
+  animation-name: shimmer--MvtuC;
+  animation-timing-function: ease-in-out;
+  background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);
+  background-repeat: no-repeat;
+  background-size: 400% 200%;
+  content: "";
+  height: 100%;
+  left: 0;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  width: 200%;
+}
+@media (prefers-reduced-motion) {
+  .MrlSkeleton--hJyx-::after {
+    animation-name: none;
+    background: var(--mrl-black-opacity-00);
+  }
+}
+
+.MrlSkeleton-circle--bVpNl {
+  border-radius: 50%;
+}

package/dist/esm/components/skeleton/MrlSkeleton/MrlSkeleton.module.scss.js

@@ -0,0 +1,6 @@
+import "./MrlSkeleton.module.css";
+export default {
+	"MrlSkeleton": "MrlSkeleton--hJyx-",
+	"shimmer": "shimmer--MvtuC",
+	"MrlSkeleton-circle": "MrlSkeleton-circle--bVpNl"
+};

package/dist/esm/components/skeleton/MrlSkeleton/index.js

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

package/dist/esm/components/skeleton/MrlSkeletonText/MrlSkeletonText.js

@@ -0,0 +1,36 @@
+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 * as React from 'react';
+import styles from './MrlSkeletonText.module.scss.js';
+import { getUniqueId } from '../../../utils';
+/**
+ * MrlSkeletonText React component. Used to create skeleton elements as placeholders
+ * for the MrlText component. It supports the same text sizes as the MrlText component.
+ *
+ * @param props {MrlSkeletonTextProps} - component props
+ * @returns a MrlSkeleton React component.
+ */
+export function MrlSkeletonText(_a) {
+    var { className, style, width, lines = 1, size = 'medium' } = _a, rest = __rest(_a, ["className", "style", "width", "lines", "size"]);
+    const classes = classnames(styles['MrlSkeletonText'], {
+        [styles[`MrlSkeletonText-${size}`]]: !!size
+    }, className);
+    const skeletonTextLines = React.useMemo(() => {
+        const skeletonStyle = Object.assign(Object.assign({}, style), { width });
+        return new Array(lines).fill(0).map(() => {
+            return (React.createElement("div", Object.assign({ "aria-hidden": "true", className: classes, key: getUniqueId('MrlSkeletonText-line'), style: skeletonStyle }, rest)));
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [lines]);
+    return React.createElement(React.Fragment, null, skeletonTextLines);
+}

package/dist/esm/components/skeleton/MrlSkeletonText/MrlSkeletonText.module.css

@@ -0,0 +1,67 @@
+@keyframes shimmer--KMJX1 {
+  0% {
+    background-position: right;
+  }
+  100% {
+    background-position: left;
+  }
+}
+.MrlSkeletonText--jpqW5 {
+  background-color: var(--mrl-black-opacity-00);
+  border-radius: var(--mrl-border-radius-functional);
+  overflow: hidden;
+  position: relative;
+}
+.MrlSkeletonText--jpqW5::after {
+  animation-direction: normal;
+  animation-duration: 2.5s;
+  animation-iteration-count: infinite;
+  animation-name: shimmer--KMJX1;
+  animation-timing-function: ease-in-out;
+  background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);
+  background-repeat: no-repeat;
+  background-size: 400% 200%;
+  content: "";
+  height: 100%;
+  left: 0;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  width: 200%;
+}
+@media (prefers-reduced-motion) {
+  .MrlSkeletonText--jpqW5::after {
+    animation-name: none;
+    background: var(--mrl-black-opacity-00);
+  }
+}
+
+.MrlSkeletonText-large--7XgdI {
+  height: var(--mrl-spacing-03);
+  margin-bottom: calc(calc(var(--mrl-type-size-text-large) * var(--mrl-type-line-height-text-large)) - var(--mrl-spacing-03));
+  margin-top: calc((calc(var(--mrl-type-size-text-large) * var(--mrl-type-line-height-text-large)) - var(--mrl-spacing-03)) / 2);
+}
+
+.MrlSkeletonText-small--DIK66 {
+  height: var(--mrl-spacing-03);
+  margin-bottom: calc(calc(var(--mrl-type-size-text-small) * var(--mrl-type-line-height-text-small)) - var(--mrl-spacing-03));
+  margin-top: calc((calc(var(--mrl-type-size-text-small) * var(--mrl-type-line-height-text-small)) - var(--mrl-spacing-03)) / 2);
+}
+
+.MrlSkeletonText-xsmall--PCHIy {
+  height: var(--mrl-spacing-03);
+  margin-bottom: calc(calc(var(--mrl-type-size-text-xsmall) * var(--mrl-type-line-height-text-xsmall)) - var(--mrl-spacing-03));
+  margin-top: calc((calc(var(--mrl-type-size-text-xsmall) * var(--mrl-type-line-height-text-xsmall)) - var(--mrl-spacing-03)) / 2);
+}
+
+.MrlSkeletonText-xxsmall--E2Ypv {
+  height: var(--mrl-spacing-03);
+  margin-bottom: calc(calc(var(--mrl-type-size-text-xxsmall) * var(--mrl-type-line-height-text-xxsmall)) - var(--mrl-spacing-03));
+  margin-top: calc((calc(var(--mrl-type-size-text-xxsmall) * var(--mrl-type-line-height-text-xxsmall)) - var(--mrl-spacing-03)) / 2);
+}
+
+.MrlSkeletonText-medium--Gcy4d {
+  height: var(--mrl-spacing-03);
+  margin-bottom: calc(calc(var(--mrl-type-size-text) * var(--mrl-type-line-height-text)) - var(--mrl-spacing-03));
+  margin-top: calc((calc(var(--mrl-type-size-text) * var(--mrl-type-line-height-text)) - var(--mrl-spacing-03)) / 2);
+}

package/dist/esm/components/skeleton/MrlSkeletonText/MrlSkeletonText.module.scss.js

@@ -0,0 +1,10 @@
+import "./MrlSkeletonText.module.css";
+export default {
+	"MrlSkeletonText": "MrlSkeletonText--jpqW5",
+	"shimmer": "shimmer--KMJX1",
+	"MrlSkeletonText-large": "MrlSkeletonText-large--7XgdI",
+	"MrlSkeletonText-small": "MrlSkeletonText-small--DIK66",
+	"MrlSkeletonText-xsmall": "MrlSkeletonText-xsmall--PCHIy",
+	"MrlSkeletonText-xxsmall": "MrlSkeletonText-xxsmall--E2Ypv",
+	"MrlSkeletonText-medium": "MrlSkeletonText-medium--Gcy4d"
+};

package/dist/esm/components/skeleton/MrlSkeletonText/index.js

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

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

@@ -0,0 +1,2 @@
+export * from './MrlSkeleton';
+export * from './MrlSkeletonText';

package/dist/esm/components/svg/MrlSvg/MrlSvg.js

@@ -0,0 +1,140 @@
+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 cn from 'classnames';
+import { isObject, getCamelCase, getUniqueId, setAttributes } from '../../../utils';
+import { svgDefaults } from '../constants';
+import styles from './MrlSvg.module.scss.js';
+/**
+ * Creating and exporting component class for Mural SVG
+ *
+ * Supports both static SVG objects and dynamic URL loading.
+ *
+ * @param {SvgPropTypes} props the props for your MrlSvg
+ * @returns {React.ReactElement} a rendered SVG
+ */
+export const MrlSvg = React.memo((props) => {
+    const { className, size = 'medium', svg, path, attrs = {}, isClone = false, lazyLoad } = props, remainingProps = __rest(props, ["className", "size", "svg", "path", "attrs", "isClone", "lazyLoad"]);
+    const GENERIC_WARNING_MESSAGE = 'There has been an issue rendering your SVG!';
+    /**
+     * Checks to ensure a string is valid JSON before parsing
+     *
+     * @param {Record<string, unknown>} svgData - the SVG code
+     * @returns {boolean} - a boolean for whether or not the string is valid JSON
+     */
+    const isValidJSON = (svgData) => {
+        try {
+            isObject(svgData);
+        }
+        catch (err) {
+            // This is not valid JSON
+            console.warn(`${GENERIC_WARNING_MESSAGE} Invalid SVG code:`);
+            console.warn(svgData);
+            return false;
+        }
+        return true;
+    };
+    /**
+     * Parses a JS Object of SVG code into an SVG HTML Element
+     *
+     * @param {SVGObject} svgObj - a JS object of SVG code
+     * @param {AttrsObject} userAttributes - an optional set of attributes to be applied to the SVG
+     * @param {string} classes - an optional object of classes to be applied to the SVG
+     * @param {string} slot - an optional slot attribute for use in web components
+     * @returns {React.ReactElement} - an SVG HTML Element
+     */
+    const parseSVG = (svgObj, userAttributes = {}, classes, slot) => {
+        if (svgObj.type === 'text') {
+            return svgObj.value;
+        }
+        const Tag = svgObj.name;
+        const tagAttributes = svgObj.attributes || {};
+        /**
+         * Formats SVG attributes to from kebab case to camel case for React syntax
+         * Note: this excudes `data-` attributes
+         *
+         * @todo: Create react component for DS Icons and remove this code
+         */
+        Object.keys(tagAttributes).forEach((key) => {
+            let newKey = key;
+            if (key === 'class') {
+                newKey = 'className';
+            }
+            else if (key.slice(0, 5) !== 'data-') {
+                newKey = getCamelCase(key);
+            }
+            tagAttributes[newKey] = tagAttributes[key];
+            if (key !== newKey) {
+                delete tagAttributes[key];
+            }
+        });
+        /**
+         * We render the `svg` element explicitly here to ensure that the user applied
+         * attributes and classes only get applied to the `svg` element.
+         */
+        if (Tag === 'svg') {
+            return (React.createElement("span", { className: cn(styles.MrlSvgContainer, styles[`MrlSvgContainer--${size}`], 'MrlSvgContainer', classes), slot: slot },
+                React.createElement("svg", Object.assign({}, tagAttributes, userAttributes, remainingProps, { className: cn(styles.MrlSvg, styles[`MrlSvg--${size}`], 'mrl-svg'), key: getUniqueId() }), Array.isArray(svgObj.children) &&
+                    svgObj.children.map((child) => parseSVG(child)))));
+        }
+        return (React.createElement(Tag, Object.assign({}, tagAttributes, { key: getUniqueId() }), Array.isArray(svgObj.children) &&
+            svgObj.children.map((child) => parseSVG(child))));
+    };
+    // We do not want to re-render the icon if it's a cloned version
+    if (isClone) {
+        return React.createElement("span", null);
+    }
+    // Validation: must provide either path or svg
+    if (!path && !svg) {
+        console.warn(`${GENERIC_WARNING_MESSAGE} Must provide either "path" or "svg" prop`);
+        return React.createElement("span", null);
+    }
+    // Validation: cannot provide both path and svg
+    if (path && svg) {
+        console.warn(`${GENERIC_WARNING_MESSAGE} Cannot provide both "path" and "svg" props. Using "svg" prop.`);
+    }
+    // Handle path prop with img tag (only if svg is not provided)
+    if (path && !svg) {
+        return (React.createElement("span", { className: cn(styles.MrlSvgContainer, styles[`MrlSvgContainer--${size}`], 'MrlSvgContainer', className) },
+            React.createElement("img", { src: path, alt: "", "aria-hidden": "true", className: cn(styles.MrlSvg, styles[`MrlSvg--${size}`], 'mrl-svg'), loading: lazyLoad ? 'lazy' : 'eager' })));
+    }
+    // don't render if SVG value is not defined
+    if (!svg) {
+        return React.createElement("span", null);
+    }
+    const slot = attrs.slot;
+    delete attrs.slot;
+    const allClasses = cn(attrs.class, attrs.className, className);
+    delete attrs.class;
+    delete attrs.className;
+    const attributes = setAttributes(attrs, svgDefaults.attrs);
+    const isSvgString = typeof svg === 'string';
+    let svgObject;
+    if (isSvgString) {
+        try {
+            const parsedSvg = JSON.parse(svg);
+            if (!isValidJSON(parsedSvg)) {
+                return React.createElement("span", null);
+            }
+            svgObject = parsedSvg;
+        }
+        catch (err) {
+            console.warn(`${GENERIC_WARNING_MESSAGE} Invalid JSON in svg prop:`, err);
+            return React.createElement("span", null);
+        }
+    }
+    else {
+        svgObject = svg;
+    }
+    return parseSVG(svgObject, attributes, allClasses, slot);
+});
+MrlSvg.displayName = 'MrlSvg';

package/dist/esm/components/svg/MrlSvg/MrlSvg.module.css

@@ -0,0 +1,46 @@
+.MrlSvgContainer--5FaJp,
+.MrlSvg--FNeay {
+  --mrl-svg-size: var(--mrl-spacing-07);
+}
+
+.MrlSvgContainer--small--VL-L3,
+.MrlSvg--small--hTcux {
+  --mrl-svg-size: var(--mrl-spacing-06);
+}
+
+.MrlSvgContainer--large--DMDzE,
+.MrlSvg--large--26Yvv {
+  --mrl-svg-size: var(--mrl-spacing-10);
+}
+
+.MrlSvgContainer--auto--otx2o,
+.MrlSvg--auto--wvEYG {
+  --mrl-svg-size: 100%;
+}
+
+.MrlSvgContainer--5FaJp {
+  color: inherit;
+  display: inline-flex;
+  height: var(--mrl-svg-size);
+  width: var(--mrl-svg-size);
+}
+
+.MrlSvgContainer--auto--otx2o {
+  height: 100%;
+  width: 100%;
+}
+
+.MrlSvg--FNeay {
+  display: inline-block;
+  fill: currentcolor;
+  height: auto;
+  width: var(--mrl-svg-size);
+}
+.MrlSvg--FNeay * {
+  pointer-events: none;
+}
+
+.MrlSvg--auto--wvEYG {
+  height: 100%;
+  width: 100%;
+}

package/dist/esm/components/svg/MrlSvg/MrlSvg.module.scss.js

@@ -0,0 +1,11 @@
+import "./MrlSvg.module.css";
+export default {
+	"MrlSvgContainer": "MrlSvgContainer--5FaJp",
+	"MrlSvg": "MrlSvg--FNeay",
+	"MrlSvgContainer--small": "MrlSvgContainer--small--VL-L3",
+	"MrlSvg--small": "MrlSvg--small--hTcux",
+	"MrlSvgContainer--large": "MrlSvgContainer--large--DMDzE",
+	"MrlSvg--large": "MrlSvg--large--26Yvv",
+	"MrlSvgContainer--auto": "MrlSvgContainer--auto--otx2o",
+	"MrlSvg--auto": "MrlSvg--auto--wvEYG"
+};

package/dist/esm/components/svg/MrlSvg/index.js

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

package/dist/esm/components/svg/MrlSvgAnimate/MrlSvgAnimate.js

@@ -0,0 +1,79 @@
+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 lottie from 'lottie-web/build/player/lottie_light';
+import { baseLottieConfig } from '../constants';
+import { getUniqueId } from '../../../utils';
+/**
+ * MrlSvgAnimate
+ *
+ * This is a React functional component used for SVGs with robust After Effects animations.
+ * @param {MrlSvgAnimateProps} props - The properties for the MrlSvgAnimate component.
+ * @returns {React.ReactElement} - The rendered MrlSvgAnimate component.
+ */
+export const MrlSvgAnimate = (_a) => {
+    var { cdnFile, className, config, delay = 0, fullPath, state = 'stop', svgData } = _a, rest = __rest(_a, ["cdnFile", "className", "config", "delay", "fullPath", "state", "svgData"]);
+    const [hasReducedMotion, setHasReducedMotion] = React.useState(false);
+    const animateRef = React.useRef(null);
+    const { current: animationId } = React.useRef(getUniqueId('lottie-animation'));
+    /**
+     * Construct Lottie options object to pass to loadAnimations method
+     * @returns {AnimationConfigWithData<'svg'>} - Lottie options object
+     */
+    const getConfig = React.useCallback(() => {
+        const fullConfig = Object.assign(Object.assign(Object.assign({}, baseLottieConfig), (config && JSON.parse(config))), { animationData: svgData && JSON.parse(svgData), container: animateRef.current, name: animationId, path: (fullPath && fullPath) ||
+                (cdnFile && `https://static.muralcdn.com/static/animations/${cdnFile}.json`) });
+        // This setting is not configurable due to security
+        if (typeof fullConfig.rendererSettings === 'undefined') {
+            fullConfig.rendererSettings = {};
+        }
+        fullConfig.rendererSettings.runExpressions = false;
+        return fullConfig;
+    }, [cdnFile, config, fullPath, svgData, animationId]);
+    /**
+     * Initialize Lottie animation
+     */
+    React.useEffect(() => {
+        if (animateRef.current) {
+            lottie.loadAnimation(getConfig());
+        }
+        return () => {
+            lottie.destroy(animationId);
+        };
+    }, [getConfig, animationId, svgData]);
+    /**
+     * Control animation based on operating system reduced motion preference.
+     */
+    React.useEffect(() => {
+        setHasReducedMotion(window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }, []);
+    /**
+     * Delay start of animation
+     */
+    React.useEffect(() => {
+        let timer;
+        if (state === 'play' && !hasReducedMotion) {
+            timer = setTimeout(() => {
+                lottie.play(animationId);
+            }, delay);
+        }
+        else {
+            lottie.stop(animationId);
+        }
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [delay, hasReducedMotion, state, animationId, svgData]);
+    return (React.createElement("div", Object.assign({}, rest, { className: classnames(className, 'MrlSvgAnimate-container'), ref: animateRef })));
+};
+export default MrlSvgAnimate;

package/dist/esm/components/svg/MrlSvgAnimate/index.js

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

package/dist/esm/components/svg/config.js

@@ -0,0 +1,116 @@
+import { svgDefaults, allowedSvgValues, allowedAnimatedValues, animatedDefaults } from './constants';
+export const storyData = {
+    args: {
+        color: 'var(--mrl-text-color)',
+        size: svgDefaults.size
+    },
+    argTypes: {
+        color: {
+            control: {
+                type: 'color'
+            }
+        },
+        size: {
+            control: {
+                options: allowedSvgValues.sizes,
+                type: 'select'
+            }
+        }
+    },
+    manifest: {
+        scans: {
+            size: ['VRT']
+        }
+    },
+    title: 'Components/SVG'
+};
+export const iconStoryData = {
+    manifest: {
+        exclude: {
+            default: ['A11Y', 'FUNC', 'HTML']
+        }
+    },
+    title: 'Assets/Icons'
+};
+export const pictogramStoryData = {
+    manifest: {
+        exclude: {
+            default: ['A11Y', 'FUNC', 'HTML']
+        }
+    },
+    title: 'Assets/Pictograms'
+};
+export const visualThinkingContainerStyles = {
+    display: 'flex',
+    flexDirection: 'row'
+};
+export const brandContainerStyles = {
+    background: 'rgb(var(--mrl-gray-20))',
+    width: '50%'
+};
+export const headingStyles = {
+    marginTop: 'var(--mrl-spacing-07)'
+};
+export const colorPictoStoryData = {
+    args: {
+        state: 'default'
+    },
+    argTypes: {
+        state: {
+            control: {
+                // Not using the icon button constants here since
+                // we don't need to test disabled state
+                options: ['default', 'selected'],
+                type: 'select'
+            }
+        }
+    },
+    manifest: {
+        exclude: {
+            default: ['A11Y', 'FUNC', 'HTML']
+        },
+        scans: {
+            state: ['VRT']
+        }
+    },
+    name: 'Colors',
+    title: 'Assets/Pictograms'
+};
+export const animateStoryData = {
+    args: {
+        delay: animatedDefaults.delay,
+        state: animatedDefaults.state
+    },
+    argTypes: {
+        delay: {
+            max: 50000,
+            min: 0,
+            name: 'delay (ms)',
+            step: 1,
+            type: 'number'
+        },
+        state: {
+            control: {
+                options: allowedAnimatedValues.states,
+                type: 'select'
+            }
+        }
+    },
+    manifest: {
+        exclude: {
+            default: [
+                'A11Y',
+                'FUNC',
+                'HTML',
+                'VRT'
+            ]
+        }
+    },
+    name: 'Animate',
+    title: 'Components/SVG'
+};
+export const animateContainerStyles = {
+    backgroundColor: 'black',
+    height: '48px',
+    width: '48px'
+};

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

@@ -0,0 +1,34 @@
+/**
+ * Defines all of values allowed for attributes with limited values;
+ * used for Storybook and testing
+ */
+export const allowedSvgValues = {
+    sizes: [
+        'medium',
+        'small',
+        'large',
+        'auto'
+    ]
+};
+/**
+ * Default values for props on the SVG component;
+ * Shared between the component and Storybook
+ */
+export const svgDefaults = {
+    attrs: {
+        role: 'presentation'
+    },
+    size: 'medium'
+};
+export const baseLottieConfig = {
+    autoplay: false,
+    loop: true,
+    renderer: 'svg'
+};
+export const allowedAnimatedValues = {
+    states: ['stop', 'play']
+};
+export const animatedDefaults = {
+    delay: 0,
+    state: 'stop'
+};

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

@@ -0,0 +1,3 @@
+export * from "./MrlSvg/MrlSvg";
+export * from "./MrlSvgAnimate/MrlSvgAnimate";
+export * from './constants';