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

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var classnames = require('classnames');
+var React = require('react');
+var MrlSkeleton_module = require('./MrlSkeleton.module.scss.js');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var _excluded = ["height", "shape", "style", "width", "className"];
+/**
+ * MrlSkeleton React component.
+ *
+ * @param props {MrlSkeletonProps} - component props
+ * @returns a MrlSkeleton React component.
+ */
+function MrlSkeleton(_ref) {
+  var _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'var(--mrl-spacing-05)' : _ref$height,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'default' : _ref$shape,
+    style = _ref.style,
+    width = _ref.width,
+    className = _ref.className,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var classes = classnames(MrlSkeleton_module.default['MrlSkeleton'], _rollupPluginBabelHelpers.defineProperty({}, MrlSkeleton_module.default["MrlSkeleton-".concat(shape)], shape !== 'default'), className);
+  var skeletonStyle = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, style), {}, {
+    height: height,
+    width: width
+  }, shape === 'circle' && {
+    width: height
+  });
+  return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({
+    "aria-hidden": "true",
+    className: classes,
+    style: skeletonStyle
+  }, rest));
+}
+
+exports.MrlSkeleton = MrlSkeleton;
+//# sourceMappingURL=MrlSkeleton.js.map

package/dist/cjs/components/skeleton/MrlSkeleton/MrlSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlSkeleton.js","sources":["../../../../../src/components/skeleton/MrlSkeleton/MrlSkeleton.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport * as React from 'react';\n\nimport styles from './MrlSkeleton.module.scss';\n\nexport interface MrlSkeletonProps extends React.ComponentProps<'div'> {\n\t/** An object with CSS properties */\n\tstyle?: React.CSSProperties;\n\t/** MrlSkeleton wrapper class */\n\tclassName?: string;\n\t/** The height of the MrlSkeleton component */\n\theight?: React.CSSProperties['height'];\n\t/** The width of the MrlSkeleton component */\n\twidth?: React.CSSProperties['width'];\n\t/** The shape of the Skeleton component */\n\tshape?: 'circle' | 'default';\n}\n\n/**\n * MrlSkeleton React component.\n *\n * @param props {MrlSkeletonProps} - component props\n * @returns a MrlSkeleton React component.\n */\nexport function MrlSkeleton({\n\theight = 'var(--mrl-spacing-05)',\n\tshape = 'default',\n\tstyle,\n\twidth,\n\tclassName,\n\t...rest\n}: MrlSkeletonProps): JSX.Element {\n\tconst classes = classnames(\n\t\tstyles['MrlSkeleton'],\n\t\t{\n\t\t\t[styles[`MrlSkeleton-${shape}`]]: shape !== 'default'\n\t\t},\n\t\tclassName\n\t);\n\n\tconst skeletonStyle = {\n\t\t...style,\n\t\theight,\n\t\twidth,\n\t\t...(shape === 'circle' && { width: height })\n\t};\n\n\treturn <div aria-hidden=\"true\" className={classes} style={skeletonStyle}\n\t\t{...rest} />;\n}\n"],"names":["MrlSkeleton","_ref","_ref$height","height","_ref$shape","shape","style","width","className","rest","_objectWithoutProperties","_excluded","classes","classnames","styles","_defineProperty","concat","skeletonStyle","_objectSpread","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,WAAWA,CAAAC,IAAA,EAOO;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,CANjCE,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAA,MAAA,GAAG,uBAAuB,GAAAA,WAAA;IAAAE,UAAA,GAAAH,IAAA,CAChCI,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,SAAS,GAAAA,UAAA;IACjBE,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,SAAS,GAAAP,IAAA,CAATO,SAAS;AACNC,IAAAA,IAAI,GAAAC,iDAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA;EAEP,IAAMC,OAAO,GAAGC,UAAU,CACzBC,0BAAM,CAAC,aAAa,CAAC,EAAAC,wCAAA,CAAA,EAAA,EAEnBD,0BAAM,CAAA,cAAA,CAAAE,MAAA,CAAgBX,KAAK,CAAA,CAAG,EAAGA,KAAK,KAAK,SAAS,CAAA,EAEtDG,SACD,CAAC;AAED,EAAA,IAAMS,aAAa,GAAAC,uCAAA,CAAAA,uCAAA,KACfZ,KAAK,CAAA,EAAA,EAAA,EAAA;AACRH,IAAAA,MAAM,EAANA,MAAM;AACNI,IAAAA,KAAK,EAALA;GAAK,EACDF,KAAK,KAAK,QAAQ,IAAI;AAAEE,IAAAA,KAAK,EAAEJ;AAAO,GAAC,CAC3C;AAED,EAAA,oBAAOgB,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,iCAAA,CAAA;AAAK,IAAA,aAAA,EAAY,MAAM;AAACb,IAAAA,SAAS,EAAEI,OAAQ;AAACN,IAAAA,KAAK,EAAEW;GAAc,EACnER,IAAI,CAAG,CAAC;AACd;;;;"}

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

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"MrlSkeleton":"MrlSkeleton--L9ZOR","shimmer":"shimmer--eczHY","MrlSkeleton-circle":"MrlSkeleton-circle--V35an"};
+
+exports.default = styles;
+//# sourceMappingURL=MrlSkeleton.module.scss.js.map

package/dist/cjs/components/skeleton/MrlSkeleton/MrlSkeleton.module.scss.js.map

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

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

@@ -0,0 +1,64 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var classnames = require('classnames');
+var React = require('react');
+var MrlSkeletonText_module = require('./MrlSkeletonText.module.scss.js');
+var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var _excluded = ["className", "style", "width", "lines", "size"];
+/**
+ * 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.
+ */
+function MrlSkeletonText(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    width = _ref.width,
+    _ref$lines = _ref.lines,
+    lines = _ref$lines === void 0 ? 1 : _ref$lines,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var classes = classnames(MrlSkeletonText_module.default['MrlSkeletonText'], _rollupPluginBabelHelpers.defineProperty({}, MrlSkeletonText_module.default["MrlSkeletonText-".concat(size)], !!size), className);
+  var skeletonTextLines = React__namespace.useMemo(function () {
+    var skeletonStyle = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, style), {}, {
+      width: width
+    });
+    return new Array(lines).fill(0).map(function () {
+      return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({
+        "aria-hidden": "true",
+        className: classes,
+        key: setAttributes.getUniqueId('MrlSkeletonText-line'),
+        style: skeletonStyle
+      }, rest));
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lines]);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, skeletonTextLines);
+}
+
+exports.MrlSkeletonText = MrlSkeletonText;
+//# sourceMappingURL=MrlSkeletonText.js.map

package/dist/cjs/components/skeleton/MrlSkeletonText/MrlSkeletonText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlSkeletonText.js","sources":["../../../../../src/components/skeleton/MrlSkeletonText/MrlSkeletonText.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport * as React from 'react';\n\nimport styles from './MrlSkeletonText.module.scss';\nimport { getUniqueId } from '../../../utils';\nimport { TextSizes } from '../../text/constants';\n\nexport interface MrlSkeletonTextProps extends React.ComponentProps<'div'> {\n\t/** An object of CSS properties */\n\tstyle?: React.CSSProperties;\n\t/** MrlSkeletonText wrapper class */\n\tclassName?: string;\n\t/** The width of the MrlSkeletonText component */\n\twidth?: React.CSSProperties['width'];\n\t/** Number of lines to render */\n\tlines?: number;\n\t/** Size of the text which is the same as MrlText component */\n\tsize?: TextSizes;\n}\n\n/**\n * MrlSkeletonText React component. Used to create skeleton elements as placeholders\n * for the MrlText component. It supports the same text sizes as the MrlText component.\n *\n * @param props {MrlSkeletonTextProps} - component props\n * @returns a MrlSkeleton React component.\n */\nexport function MrlSkeletonText({\n\tclassName,\n\tstyle,\n\twidth,\n\tlines = 1,\n\tsize = 'medium',\n\t...rest\n}: MrlSkeletonTextProps): JSX.Element {\n\tconst classes = classnames(\n\t\tstyles['MrlSkeletonText'],\n\t\t{\n\t\t\t[styles[`MrlSkeletonText-${size}`]]: !!size\n\t\t},\n\t\tclassName\n\t);\n\n\tconst skeletonTextLines = React.useMemo(() => {\n\t\tconst skeletonStyle = {\n\t\t\t...style,\n\t\t\twidth\n\t\t};\n\n\t\treturn new Array(lines).fill(0).map(() => {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={classes}\n\t\t\t\t\tkey={getUniqueId('MrlSkeletonText-line')}\n\t\t\t\t\tstyle={skeletonStyle}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t);\n\t\t});\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [lines]);\n\n\treturn <>{skeletonTextLines}</>;\n}\n"],"names":["MrlSkeletonText","_ref","className","style","width","_ref$lines","lines","_ref$size","size","rest","_objectWithoutProperties","_excluded","classes","classnames","styles","_defineProperty","concat","skeletonTextLines","React","useMemo","skeletonStyle","_objectSpread","Array","fill","map","createElement","_extends","key","getUniqueId","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAeA,CAAAC,IAAA,EAOO;AAAA,EAAA,IANrCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,KAAK,GAAAH,IAAA,CAALG,KAAK;IAAAC,UAAA,GAAAJ,IAAA,CACLK,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,CAAC,GAAAA,UAAA;IAAAE,SAAA,GAAAN,IAAA,CACTO,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAA,MAAA,GAAG,QAAQ,GAAAA,SAAA;AACZE,IAAAA,IAAI,GAAAC,iDAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA;EAEP,IAAMC,OAAO,GAAGC,UAAU,CACzBC,8BAAM,CAAC,iBAAiB,CAAC,EAAAC,wCAAA,CAAA,EAAA,EAEvBD,8BAAM,CAAA,kBAAA,CAAAE,MAAA,CAAoBR,IAAI,CAAA,CAAG,EAAG,CAAC,CAACA,IAAI,CAAA,EAE5CN,SACD,CAAC;AAED,EAAA,IAAMe,iBAAiB,GAAGC,gBAAK,CAACC,OAAO,CAAC,YAAM;AAC7C,IAAA,IAAMC,aAAa,GAAAC,uCAAA,CAAAA,uCAAA,KACflB,KAAK,CAAA,EAAA,EAAA,EAAA;AACRC,MAAAA,KAAK,EAALA;KAAK,CACL;AAED,IAAA,OAAO,IAAIkB,KAAK,CAAChB,KAAK,CAAC,CAACiB,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAAC,YAAM;AACzC,MAAA,oBACCN,gBAAA,CAAAO,aAAA,CAAA,KAAA,EAAAC,iCAAA,CAAA;AACC,QAAA,aAAA,EAAY,MAAM;AAClBxB,QAAAA,SAAS,EAAEU,OAAQ;AACnBe,QAAAA,GAAG,EAAEC,yBAAW,CAAC,sBAAsB,CAAE;AACzCzB,QAAAA,KAAK,EAAEiB;OAAc,EACjBX,IAAI,CACR,CAAC;AAEJ,IAAA,CAAC,CAAC;AACF;AACD,EAAA,CAAC,EAAE,CAACH,KAAK,CAAC,CAAC;EAEX,oBAAOY,gBAAA,CAAAO,aAAA,CAAAP,gBAAA,CAAAW,QAAA,EAAA,IAAA,EAAGZ,iBAAoB,CAAC;AAChC;;;;"}

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

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"MrlSkeletonText":"MrlSkeletonText--aZt7x","shimmer":"shimmer--n2jh9","MrlSkeletonText-large":"MrlSkeletonText-large--hMKwp","MrlSkeletonText-small":"MrlSkeletonText-small--c6iHj","MrlSkeletonText-xsmall":"MrlSkeletonText-xsmall--_I_hY","MrlSkeletonText-xxsmall":"MrlSkeletonText-xxsmall--iasp3","MrlSkeletonText-medium":"MrlSkeletonText-medium--VD22L"};
+
+exports.default = styles;
+//# sourceMappingURL=MrlSkeletonText.module.scss.js.map

package/dist/cjs/components/skeleton/MrlSkeletonText/MrlSkeletonText.module.scss.js.map

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

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

@@ -0,0 +1,195 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classnames = require('classnames');
+var constants = require('../constants.js');
+var MrlSvg_module = require('./MrlSvg.module.scss.js');
+var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
+var isObject = require('../../../utils/isObject/isObject.js');
+var getCamelCase = require('../../../utils/getCamelCase/getCamelCase.js');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var _excluded = ["className", "size", "svg", "path", "attrs", "isClone", "lazyLoad"];
+
+// If we dont omit style from MrlComponentProps and re-add it in SvgPropTypes, we get an error.
+
+/**
+ * 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
+ */
+var MrlSvg = /*#__PURE__*/React__namespace.memo(function (props) {
+  var className = props.className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    svg = props.svg,
+    path = props.path,
+    _props$attrs = props.attrs,
+    attrs = _props$attrs === void 0 ? {} : _props$attrs,
+    _props$isClone = props.isClone,
+    isClone = _props$isClone === void 0 ? false : _props$isClone,
+    lazyLoad = props.lazyLoad,
+    remainingProps = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var 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
+   */
+  var isValidJSON = function isValidJSON(svgData) {
+    try {
+      isObject.isObject(svgData);
+    } catch (err) {
+      // This is not valid JSON
+      console.warn("".concat(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
+   */
+  var _parseSVG = function parseSVG(svgObj) {
+    var userAttributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var classes = arguments.length > 2 ? arguments[2] : undefined;
+    var slot = arguments.length > 3 ? arguments[3] : undefined;
+    if (svgObj.type === 'text') {
+      return svgObj.value;
+    }
+    var Tag = svgObj.name;
+    var 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(function (key) {
+      var newKey = key;
+      if (key === 'class') {
+        newKey = 'className';
+      } else if (key.slice(0, 5) !== 'data-') {
+        newKey = getCamelCase.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 /*#__PURE__*/React__namespace.createElement("span", {
+        className: classnames(MrlSvg_module.default.MrlSvgContainer, MrlSvg_module.default["MrlSvgContainer--".concat(size)], 'MrlSvgContainer', classes),
+        slot: slot
+      }, /*#__PURE__*/React__namespace.createElement("svg", _rollupPluginBabelHelpers.extends({}, tagAttributes, userAttributes, remainingProps, {
+        className: classnames(MrlSvg_module.default.MrlSvg, MrlSvg_module.default["MrlSvg--".concat(size)], 'mrl-svg'),
+        key: setAttributes.getUniqueId()
+      }), Array.isArray(svgObj.children) && svgObj.children.map(function (child) {
+        return _parseSVG(child);
+      })));
+    }
+    return /*#__PURE__*/React__namespace.createElement(Tag, _rollupPluginBabelHelpers.extends({}, tagAttributes, {
+      key: setAttributes.getUniqueId()
+    }), Array.isArray(svgObj.children) && svgObj.children.map(function (child) {
+      return _parseSVG(child);
+    }));
+  };
+
+  // We do not want to re-render the icon if it's a cloned version
+  if (isClone) {
+    return /*#__PURE__*/React__namespace.createElement("span", null);
+  }
+
+  // Validation: must provide either path or svg
+  if (!path && !svg) {
+    console.warn("".concat(GENERIC_WARNING_MESSAGE, " Must provide either \"path\" or \"svg\" prop"));
+    return /*#__PURE__*/React__namespace.createElement("span", null);
+  }
+
+  // Validation: cannot provide both path and svg
+  if (path && svg) {
+    console.warn("".concat(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 /*#__PURE__*/React__namespace.createElement("span", {
+      className: classnames(MrlSvg_module.default.MrlSvgContainer, MrlSvg_module.default["MrlSvgContainer--".concat(size)], 'MrlSvgContainer', className)
+    }, /*#__PURE__*/React__namespace.createElement("img", {
+      src: path,
+      alt: "",
+      "aria-hidden": "true",
+      className: classnames(MrlSvg_module.default.MrlSvg, MrlSvg_module.default["MrlSvg--".concat(size)], 'mrl-svg'),
+      loading: lazyLoad ? 'lazy' : 'eager'
+    }));
+  }
+
+  // don't render if SVG value is not defined
+  if (!svg) {
+    return /*#__PURE__*/React__namespace.createElement("span", null);
+  }
+  var slot = attrs.slot;
+  delete attrs.slot;
+  var allClasses = classnames(attrs["class"], attrs.className, className);
+  delete attrs["class"];
+  delete attrs.className;
+  var attributes = setAttributes.setAttributes(attrs, constants.svgDefaults.attrs);
+  var isSvgString = typeof svg === 'string';
+  var svgObject;
+  if (isSvgString) {
+    try {
+      var parsedSvg = JSON.parse(svg);
+      if (!isValidJSON(parsedSvg)) {
+        return /*#__PURE__*/React__namespace.createElement("span", null);
+      }
+      svgObject = parsedSvg;
+    } catch (err) {
+      console.warn("".concat(GENERIC_WARNING_MESSAGE, " Invalid JSON in svg prop:"), err);
+      return /*#__PURE__*/React__namespace.createElement("span", null);
+    }
+  } else {
+    svgObject = svg;
+  }
+  return _parseSVG(svgObject, attributes, allClasses, slot);
+});
+MrlSvg.displayName = 'MrlSvg';
+
+exports.MrlSvg = MrlSvg;
+//# sourceMappingURL=MrlSvg.js.map

package/dist/cjs/components/svg/MrlSvg/MrlSvg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlSvg.js","sources":["../../../../../src/components/svg/MrlSvg/MrlSvg.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport {\n\tMrlComponentProps,\n\ttype AttrsObject,\n\tisObject,\n\tgetCamelCase,\n\tgetUniqueId,\n\tsetAttributes\n} from '../../../utils';\nimport { svgDefaults, SVGSize, SVGObject } from '../constants';\nimport styles from './MrlSvg.module.scss';\n\nexport type DSIcons = typeof import('@muraldevkit/ds-icons');\nexport type DSPictograms = typeof import('@muraldevkit/ds-pictograms');\nexport type DSIconType = DSIcons[keyof DSIcons] | DSPictograms[keyof DSPictograms];\n\n// If we dont omit style from MrlComponentProps and re-add it in SvgPropTypes, we get an error.\nexport interface SvgPropTypes\n\textends Omit<MrlComponentProps, 'style'>,\n\t\tOmit<React.ComponentProps<'svg'>, 'ref'> {\n\t/** Any additional classes to style the SVG's container */\n\tclassName?: string;\n\t/**\n\t * URL path to a static SVG file. Must provide either path or svg prop.\n\t */\n\tpath?: string;\n\t/** Enable lazy loading when a path is provided. */\n\tlazyLoad?: boolean;\n\tisClone?: boolean;\n\t/** The size of an SVG Component */\n\tsize?: SVGSize;\n\t/**\n\t * A object of CSS properties. Please use style sparingly, and only in cases where your\n\t * needs can not be met by passing a class to the component.\n\t */\n\tstyle?: Record<string, unknown>;\n\t/** The SVG object to parse into an HTML SVG element. Must provide either path or svg prop. */\n\tsvg?: DSIconType;\n}\n\n/**\n * Creating and exporting component class for Mural SVG\n *\n * Supports both static SVG objects and dynamic URL loading.\n *\n * @param {SvgPropTypes} props the props for your MrlSvg\n * @returns {React.ReactElement} a rendered SVG\n */\nexport const MrlSvg = React.memo((props: SvgPropTypes): React.ReactElement => {\n\tconst {\n\t\tclassName,\n\t\tsize = 'medium',\n\t\tsvg,\n\t\tpath,\n\t\tattrs = {},\n\t\tisClone = false,\n\t\tlazyLoad,\n\t\t...remainingProps\n\t} = props;\n\n\tconst GENERIC_WARNING_MESSAGE = 'There has been an issue rendering your SVG!';\n\n\t/**\n\t * Checks to ensure a string is valid JSON before parsing\n\t *\n\t * @param {Record<string, unknown>} svgData - the SVG code\n\t * @returns {boolean} - a boolean for whether or not the string is valid JSON\n\t */\n\tconst isValidJSON = (svgData: Record<string, unknown>): boolean => {\n\t\ttry {\n\t\t\tisObject(svgData);\n\t\t} catch (err) {\n\t\t\t// This is not valid JSON\n\t\t\tconsole.warn(`${GENERIC_WARNING_MESSAGE} Invalid SVG code:`);\n\t\t\tconsole.warn(svgData);\n\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t};\n\n\t/**\n\t * Parses a JS Object of SVG code into an SVG HTML Element\n\t *\n\t * @param {SVGObject} svgObj - a JS object of SVG code\n\t * @param {AttrsObject} userAttributes - an optional set of attributes to be applied to the SVG\n\t * @param {string} classes - an optional object of classes to be applied to the SVG\n\t * @param {string} slot - an optional slot attribute for use in web components\n\t * @returns {React.ReactElement} - an SVG HTML Element\n\t */\n\tconst parseSVG = (\n\t\tsvgObj: SVGObject,\n\t\tuserAttributes = {},\n\t\tclasses?: string,\n\t\tslot?: string\n\t): React.ReactElement => {\n\t\tif (svgObj.type === 'text') {\n\t\t\treturn svgObj.value;\n\t\t}\n\n\t\tconst Tag = svgObj.name;\n\t\tconst tagAttributes = svgObj.attributes || {};\n\n\t\t/**\n\t\t * Formats SVG attributes to from kebab case to camel case for React syntax\n\t\t * Note: this excudes `data-` attributes\n\t\t *\n\t\t * @todo: Create react component for DS Icons and remove this code\n\t\t */\n\t\tObject.keys(tagAttributes).forEach((key) => {\n\t\t\tlet newKey = key;\n\t\t\tif (key === 'class') {\n\t\t\t\tnewKey = 'className';\n\t\t\t} else if (key.slice(0, 5) !== 'data-') {\n\t\t\t\tnewKey = getCamelCase(key);\n\t\t\t}\n\n\t\t\ttagAttributes[newKey] = tagAttributes[key];\n\n\t\t\tif (key !== newKey) {\n\t\t\t\tdelete tagAttributes[key];\n\t\t\t}\n\t\t});\n\n\t\t/**\n\t\t * We render the `svg` element explicitly here to ensure that the user applied\n\t\t * attributes and classes only get applied to the `svg` element.\n\t\t */\n\t\tif (Tag === 'svg') {\n\t\t\treturn (\n\t\t\t\t<span\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tstyles.MrlSvgContainer,\n\t\t\t\t\t\tstyles[`MrlSvgContainer--${size}`],\n\t\t\t\t\t\t'MrlSvgContainer',\n\t\t\t\t\t\tclasses\n\t\t\t\t\t)}\n\t\t\t\t\tslot={slot}\n\t\t\t\t>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t{...tagAttributes}\n\t\t\t\t\t\t{...userAttributes}\n\t\t\t\t\t\t{...remainingProps}\n\t\t\t\t\t\tclassName={cn(styles.MrlSvg, styles[`MrlSvg--${size}`], 'mrl-svg')}\n\t\t\t\t\t\tkey={getUniqueId()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{Array.isArray(svgObj.children) &&\n\t\t\t\t\t\t\tsvgObj.children.map((child: Record<string, unknown>) => parseSVG(child))}\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Tag {...tagAttributes} key={getUniqueId()}>\n\t\t\t\t{Array.isArray(svgObj.children) &&\n\t\t\t\t\tsvgObj.children.map((child: Record<string, unknown>) => parseSVG(child))}\n\t\t\t</Tag>\n\t\t);\n\t};\n\n\t// We do not want to re-render the icon if it's a cloned version\n\tif (isClone) {\n\t\treturn <span></span>;\n\t}\n\n\t// Validation: must provide either path or svg\n\tif (!path && !svg) {\n\t\tconsole.warn(`${GENERIC_WARNING_MESSAGE} Must provide either \"path\" or \"svg\" prop`);\n\t\treturn <span></span>;\n\t}\n\n\t// Validation: cannot provide both path and svg\n\tif (path && svg) {\n\t\tconsole.warn(\n\t\t\t`${GENERIC_WARNING_MESSAGE} Cannot provide both \"path\" and \"svg\" props. Using \"svg\" prop.`\n\t\t);\n\t}\n\n\t// Handle path prop with img tag (only if svg is not provided)\n\tif (path && !svg) {\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclassName={cn(\n\t\t\t\t\tstyles.MrlSvgContainer,\n\t\t\t\t\tstyles[`MrlSvgContainer--${size}`],\n\t\t\t\t\t'MrlSvgContainer',\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<img\n\t\t\t\t\tsrc={path}\n\t\t\t\t\talt=\"\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={cn(styles.MrlSvg, styles[`MrlSvg--${size}`], 'mrl-svg')}\n\t\t\t\t\tloading={lazyLoad ? 'lazy' : 'eager'}\n\t\t\t\t/>\n\t\t\t</span>\n\t\t);\n\t}\n\n\t// don't render if SVG value is not defined\n\tif (!svg) {\n\t\treturn <span></span>;\n\t}\n\n\tconst slot = attrs.slot;\n\tdelete attrs.slot;\n\n\tconst allClasses = cn(attrs.class, attrs.className, className);\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs, svgDefaults.attrs);\n\n\tconst isSvgString = typeof svg === 'string';\n\n\tlet svgObject: SVGObject;\n\n\tif (isSvgString) {\n\t\ttry {\n\t\t\tconst parsedSvg = JSON.parse(svg);\n\t\t\tif (!isValidJSON(parsedSvg)) {\n\t\t\t\treturn <span></span>;\n\t\t\t}\n\t\t\tsvgObject = parsedSvg;\n\t\t} catch (err) {\n\t\t\tconsole.warn(`${GENERIC_WARNING_MESSAGE} Invalid JSON in svg prop:`, err);\n\t\t\treturn <span></span>;\n\t\t}\n\t} else {\n\t\tsvgObject = svg;\n\t}\n\n\treturn parseSVG(svgObject, attributes, allClasses, slot);\n});\n\nMrlSvg.displayName = 'MrlSvg';\n"],"names":["MrlSvg","React","memo","props","className","_props$size","size","svg","path","_props$attrs","attrs","_props$isClone","isClone","lazyLoad","remainingProps","_objectWithoutProperties","_excluded","GENERIC_WARNING_MESSAGE","isValidJSON","svgData","isObject","err","console","warn","concat","parseSVG","svgObj","userAttributes","arguments","length","undefined","classes","slot","type","value","Tag","name","tagAttributes","attributes","Object","keys","forEach","key","newKey","slice","getCamelCase","createElement","cn","styles","MrlSvgContainer","_extends","getUniqueId","Array","isArray","children","map","child","src","alt","loading","allClasses","setAttributes","svgDefaults","isSvgString","svgObject","parsedSvg","JSON","parse","displayName"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"MrlSvgContainer":"MrlSvgContainer--xWawW","MrlSvg":"MrlSvg--StPVX","MrlSvgContainer--small":"MrlSvgContainer--small--wLRCd","MrlSvg--small":"MrlSvg--small--zP1On","MrlSvgContainer--large":"MrlSvgContainer--large--UEMQG","MrlSvg--large":"MrlSvg--large--HeoAa","MrlSvgContainer--auto":"MrlSvgContainer--auto--vhRxy","MrlSvg--auto":"MrlSvg--auto--w9gVr"};
+
+exports.default = styles;
+//# sourceMappingURL=MrlSvg.module.scss.js.map

package/dist/cjs/components/svg/MrlSvg/MrlSvg.module.scss.js.map

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

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

@@ -0,0 +1,123 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classnames = require('classnames');
+var lottie = require('lottie-web/build/player/lottie_light');
+var constants = require('../constants.js');
+var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var _excluded = ["cdnFile", "className", "config", "delay", "fullPath", "state", "svgData"];
+
+/**
+ * Props for MrlSvgAnimate component
+ */
+
+/**
+ * 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.
+ */
+var MrlSvgAnimate = function MrlSvgAnimate(_ref) {
+  var cdnFile = _ref.cdnFile,
+    className = _ref.className,
+    config = _ref.config,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 0 : _ref$delay,
+    fullPath = _ref.fullPath,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? 'stop' : _ref$state,
+    svgData = _ref.svgData,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React__namespace.useState(false),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    hasReducedMotion = _React$useState2[0],
+    setHasReducedMotion = _React$useState2[1];
+  var animateRef = React__namespace.useRef(null);
+  var _React$useRef = React__namespace.useRef(setAttributes.getUniqueId('lottie-animation')),
+    animationId = _React$useRef.current;
+
+  /**
+   * Construct Lottie options object to pass to loadAnimations method
+   * @returns {AnimationConfigWithData<'svg'>} - Lottie options object
+   */
+  var getConfig = React__namespace.useCallback(function () {
+    var fullConfig = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, constants.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/".concat(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__namespace.useEffect(function () {
+    if (animateRef.current) {
+      lottie.loadAnimation(getConfig());
+    }
+    return function () {
+      lottie.destroy(animationId);
+    };
+  }, [getConfig, animationId, svgData]);
+
+  /**
+   * Control animation based on operating system reduced motion preference.
+   */
+  React__namespace.useEffect(function () {
+    setHasReducedMotion(window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+  }, []);
+
+  /**
+   * Delay start of animation
+   */
+  React__namespace.useEffect(function () {
+    var timer;
+    if (state === 'play' && !hasReducedMotion) {
+      timer = setTimeout(function () {
+        lottie.play(animationId);
+      }, delay);
+    } else {
+      lottie.stop(animationId);
+    }
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [delay, hasReducedMotion, state, animationId, svgData]);
+  return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: classnames(className, 'MrlSvgAnimate-container'),
+    ref: animateRef
+  }));
+};
+
+exports.MrlSvgAnimate = MrlSvgAnimate;
+//# sourceMappingURL=MrlSvgAnimate.js.map

package/dist/cjs/components/svg/MrlSvgAnimate/MrlSvgAnimate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlSvgAnimate.js","sources":["../../../../../src/components/svg/MrlSvgAnimate/MrlSvgAnimate.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web/build/player/lottie_light';\nimport { AnimatedState, baseLottieConfig } from '../constants';\nimport { AnimationConfigWithData } from 'lottie-web';\nimport { getUniqueId } from '../../../utils';\n\n/**\n * Props for MrlSvgAnimate component\n */\nexport interface MrlSvgAnimateProps {\n\t/** Any additional classes to style the SVG's container */\n\tclassName?: string;\n\t/**\n\t * JSON file contents used by Lottie to generate an animated SVG to render.\n\t * This attribute is mutually exclusive with fullPath and cdnFile.\n\t * Note: When dynamically changing the svgData, if a configuration change\n\t * is required be sure to set any new values before changing the svgData.\n\t */\n\tsvgData?: string;\n\n\t/**\n\t * Path to a JSON file used by Lottie to generate an animated SVG to render.\n\t * This attribute is mutually exclusive with svgData and cdnFile.\n\t * Note: When dynamically changing the fullPath, if a configuration change\n\t * is required be sure to set any new values before changing the fullPath.\n\t */\n\tfullPath?: string;\n\n\t/**\n\t * File name of an animation hosted on Mural's CDN used by Lottie to generate\n\t * an animated SVG to render. This is the preferred usage of this component\n\t * in terms of performance. It supports any file located at `static/animations`.\n\t * This attribute is mutually exclusive with fullPath and svgData.\n\t * Note: When dynamically changing the cdnFile, if a configuration change\n\t * is required be sure to set any new values before changing the cdnFile.\n\t */\n\tcdnFile?: string;\n\n\t/** Icon animation state. */\n\tstate?: AnimatedState;\n\n\t/** Delay (in ms) before animation begins. */\n\tdelay?: number;\n\n\t/**\n\t * Optional [Lottie configuration object](http://airbnb.io/lottie/#/web) for the\n\t * loadAnimation method\n\t */\n\tconfig?: string;\n}\n\n/**\n * MrlSvgAnimate\n *\n * This is a React functional component used for SVGs with robust After Effects animations.\n * @param {MrlSvgAnimateProps} props - The properties for the MrlSvgAnimate component.\n * @returns {React.ReactElement} - The rendered MrlSvgAnimate component.\n */\nexport const MrlSvgAnimate: React.FC<MrlSvgAnimateProps> = ({\n\tcdnFile,\n\tclassName,\n\tconfig,\n\tdelay = 0,\n\tfullPath,\n\tstate = 'stop',\n\tsvgData,\n\t...rest\n}) => {\n\tconst [hasReducedMotion, setHasReducedMotion] = React.useState<boolean>(false);\n\n\tconst animateRef = React.useRef<HTMLDivElement>(null);\n\tconst { current: animationId } = React.useRef<string>(getUniqueId('lottie-animation'));\n\n\t/**\n\t * Construct Lottie options object to pass to loadAnimations method\n\t * @returns {AnimationConfigWithData<'svg'>} - Lottie options object\n\t */\n\tconst getConfig = React.useCallback((): AnimationConfigWithData<'svg'> => {\n\t\tconst fullConfig = {\n\t\t\t...baseLottieConfig,\n\t\t\t...(config && JSON.parse(config)),\n\t\t\tanimationData: svgData && JSON.parse(svgData),\n\t\t\tcontainer: animateRef.current,\n\t\t\tname: animationId,\n\t\t\tpath:\n\t\t\t\t(fullPath && fullPath) ||\n\t\t\t\t(cdnFile && `https://static.muralcdn.com/static/animations/${cdnFile}.json`)\n\t\t};\n\n\t\t// This setting is not configurable due to security\n\t\tif (typeof fullConfig.rendererSettings === 'undefined') {\n\t\t\tfullConfig.rendererSettings = {};\n\t\t}\n\n\t\tfullConfig.rendererSettings.runExpressions = false;\n\n\t\treturn fullConfig;\n\t}, [cdnFile, config, fullPath, svgData, animationId]);\n\n\t/**\n\t * Initialize Lottie animation\n\t */\n\tReact.useEffect(() => {\n\t\tif (animateRef.current) {\n\t\t\tlottie.loadAnimation(getConfig());\n\t\t}\n\n\t\treturn () => {\n\t\t\tlottie.destroy(animationId);\n\t\t};\n\t}, [getConfig, animationId, svgData]);\n\n\t/**\n\t * Control animation based on operating system reduced motion preference.\n\t */\n\tReact.useEffect(() => {\n\t\tsetHasReducedMotion(window.matchMedia('(prefers-reduced-motion: reduce)').matches);\n\t}, []);\n\n\t/**\n\t * Delay start of animation\n\t */\n\tReact.useEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout>;\n\n\t\tif (state === 'play' && !hasReducedMotion) {\n\t\t\ttimer = setTimeout(() => {\n\t\t\t\tlottie.play(animationId);\n\t\t\t}, delay);\n\t\t} else {\n\t\t\tlottie.stop(animationId);\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearTimeout(timer);\n\t\t};\n\t}, [delay, hasReducedMotion, state, animationId, svgData]);\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={classnames(className, 'MrlSvgAnimate-container')}\n\t\t\tref={animateRef}\n\t\t></div>\n\t);\n};\n\nexport default MrlSvgAnimate;\n"],"names":["MrlSvgAnimate","_ref","cdnFile","className","config","_ref$delay","delay","fullPath","_ref$state","state","svgData","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","hasReducedMotion","setHasReducedMotion","animateRef","useRef","_React$useRef","getUniqueId","animationId","current","getConfig","useCallback","fullConfig","_objectSpread","baseLottieConfig","JSON","parse","animationData","container","name","path","concat","rendererSettings","runExpressions","useEffect","lottie","loadAnimation","destroy","window","matchMedia","matches","timer","setTimeout","play","stop","clearTimeout","createElement","_extends","classnames","ref"],"mappings":"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"}

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

@@ -0,0 +1,53 @@
+'use strict';
+
+/*
+ * SVG component
+ * ------------------------------------------------------------------
+ */
+
+/**
+ * Defines all of values allowed for attributes with limited values;
+ * used for Storybook and testing
+ */
+var allowedSvgValues = {
+  sizes: ['medium', 'small', 'large', 'auto']
+};
+
+/**
+ * Default values for props on the SVG component;
+ * Shared between the component and Storybook
+ */
+var svgDefaults = {
+  attrs: {
+    role: 'presentation'
+  },
+  size: 'medium'
+};
+
+// We need to allow 'any' in order to allow `<Tag>` to be able to build correctly.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+/*
+ * Animated SVG component
+ * ------------------------------------------------------------------
+ */
+
+var baseLottieConfig = {
+  autoplay: false,
+  loop: true,
+  renderer: 'svg'
+};
+var allowedAnimatedValues = {
+  states: ['stop', 'play']
+};
+var animatedDefaults = {
+  delay: 0,
+  state: 'stop'
+};
+
+exports.allowedAnimatedValues = allowedAnimatedValues;
+exports.allowedSvgValues = allowedSvgValues;
+exports.animatedDefaults = animatedDefaults;
+exports.baseLottieConfig = baseLottieConfig;
+exports.svgDefaults = svgDefaults;
+//# sourceMappingURL=constants.js.map

package/dist/cjs/components/svg/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/components/svg/constants.ts"],"sourcesContent":["import { AttrsObject } from '../../utils';\nimport { AnimationConfigWithData } from 'lottie-web';\n\n/*\n * SVG component\n * ------------------------------------------------------------------\n */\nexport type SVGSize = 'small' | 'medium' | 'large' | 'auto';\n\nexport interface SVGDefaults {\n\tattrs: AttrsObject;\n\tsize: SVGSize;\n}\n\ninterface AllowedValues {\n\tsizes: Array<string>;\n}\n\n/**\n * Defines all of values allowed for attributes with limited values;\n * used for Storybook and testing\n */\nexport const allowedSvgValues: AllowedValues = {\n\tsizes: [\n\t\t'medium',\n\t\t'small',\n\t\t'large',\n\t\t'auto'\n\t]\n};\n\n/**\n * Default values for props on the SVG component;\n * Shared between the component and Storybook\n */\nexport const svgDefaults: SVGDefaults = {\n\tattrs: {\n\t\trole: 'presentation'\n\t},\n\tsize: 'medium'\n};\n\n// We need to allow 'any' in order to allow `<Tag>` to be able to build correctly.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type SVGObject = Record<string, any>;\n\n/*\n * Animated SVG component\n * ------------------------------------------------------------------\n */\n\nexport type LottieConfig = Omit<AnimationConfigWithPath, 'container'>;\n\nexport const baseLottieConfig: LottieConfig = {\n\tautoplay: false,\n\tloop: true,\n\trenderer: 'svg'\n};\n\ninterface AnimationConfigWithPath extends AnimationConfigWithData<'svg'> {\n\tpath?: string;\n}\nexport const allowedAnimatedValues = {\n\tstates: ['stop', 'play'] as const\n};\n\nexport type AnimatedState = (typeof allowedAnimatedValues.states)[number];\n\nexport interface AnimatedDefaults {\n\tdelay: number;\n\tstate: AnimatedState;\n}\n\nexport const animatedDefaults: AnimatedDefaults = {\n\tdelay: 0,\n\tstate: 'stop'\n};\n"],"names":["allowedSvgValues","sizes","svgDefaults","attrs","role","size","baseLottieConfig","autoplay","loop","renderer","allowedAnimatedValues","states","animatedDefaults","delay","state"],"mappings":";;AAGA;AACA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACO,IAAMA,gBAA+B,GAAG;EAC9CC,KAAK,EAAE,CACN,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM;AAER;;AAEA;AACA;AACA;AACA;AACO,IAAMC,WAAwB,GAAG;AACvCC,EAAAA,KAAK,EAAE;AACNC,IAAAA,IAAI,EAAE;GACN;AACDC,EAAAA,IAAI,EAAE;AACP;;AAEA;AACA;;AAGA;AACA;AACA;AACA;;AAIO,IAAMC,gBAA8B,GAAG;AAC7CC,EAAAA,QAAQ,EAAE,KAAK;AACfC,EAAAA,IAAI,EAAE,IAAI;AACVC,EAAAA,QAAQ,EAAE;AACX;AAKO,IAAMC,qBAAqB,GAAG;AACpCC,EAAAA,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM;AACxB;AASO,IAAMC,gBAAkC,GAAG;AACjDC,EAAAA,KAAK,EAAE,CAAC;AACRC,EAAAA,KAAK,EAAE;AACR;;;;;;;;"}