@elliemae/ds-circular-progress-indicator 3.0.0-next.9 → 3.0.1

package/dist/cjs/DSCircularProgressIndicator.js

@@ -4,32 +4,26 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DSCircularProgressIndicator_exports = {};
 __export(DSCircularProgressIndicator_exports, {
   CircularProgressIndicatorWithSchema: () => CircularProgressIndicatorWithSchema,
   default: () => DSCircularProgressIndicator_default
 });
+module.exports = __toCommonJS(DSCircularProgressIndicator_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_react_desc = require("react-desc");
@@ -239,8 +233,8 @@ const circularProgressIndicatorProps = {
   loading: import_react_desc.PropTypes.bool.description("Defines the state of the indicator as Loading and displays a blue spinner animation").defaultValue(false)
 };
 CircularProgressIndicator.propTypes = circularProgressIndicatorProps;
+CircularProgressIndicator.displayName = "CircularProgressIndicator";
 const CircularProgressIndicatorWithSchema = (0, import_react_desc.describe)(CircularProgressIndicator);
 CircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;
 var DSCircularProgressIndicator_default = CircularProgressIndicator;
-module.exports = __toCommonJS(DSCircularProgressIndicator_exports);
 //# sourceMappingURL=DSCircularProgressIndicator.js.map

package/dist/cjs/DSCircularProgressIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSCircularProgressIndicator.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n  const waitingLabel = 'Waiting...';\n  const loadingLabel = 'Loading...';\n  const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n  let sizePx;\n  let sizeLabel;\n  let strokeWidth;\n  let trackWidth;\n  let markerHeight = '0.7';\n  let markerRefY = '4.8';\n  let grayArcStrokeDasharray = '45 170';\n  let grayArcStrokeDashoffset = '127.5';\n\n  switch (size.toUpperCase()) {\n    case 'XS':\n      sizePx = 8;\n      sizeLabel = 12;\n      strokeWidth = 10;\n      trackWidth = 3;\n      markerHeight = '1';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'S':\n      sizePx = 16;\n      sizeLabel = 12;\n      strokeWidth = 8;\n      trackWidth = 3;\n      markerHeight = '1';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'M':\n      sizePx = 24;\n      sizeLabel = 12;\n      strokeWidth = 7;\n      trackWidth = 3;\n      markerHeight = '1';\n      markerRefY = '5.5';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'L':\n      sizePx = 32;\n      sizeLabel = 13;\n      strokeWidth = 6;\n      trackWidth = 3;\n      markerRefY = '5';\n      break;\n    case 'XL':\n      sizePx = 48;\n      sizeLabel = 14;\n      strokeWidth = 5;\n      trackWidth = 1;\n      break;\n    case 'XXL':\n      sizePx = 56;\n      sizeLabel = 16;\n      strokeWidth = 4;\n      trackWidth = 1;\n      break;\n    case 'XXXL':\n      sizePx = 64;\n      sizeLabel = 16;\n      strokeWidth = 5;\n      trackWidth = 2;\n      break;\n    default:\n      break;\n  }\n\n  const labelText = (\n    <p\n      data-testid=\"circular-indicator-label\"\n      className={classNameElement('label')}\n      style={{ fontSize: `${sizeLabel}px` }}\n    >\n      {currentLabel}\n    </p>\n  );\n\n  // Only adds the tooltip if sizePx < 17 or showTooltip is true\n  const buildIndicator = (Component: JSX.Element) =>\n    sizePx < 17 || showTooltip ? (\n      <DSTooltip\n        containerProps={{\n          id: 'ds-circular-progress-indicator',\n          'data-testid': 'circular-indicator-title',\n        }}\n        interactionType=\"hover\"\n        title={currentLabel}\n        triggerComponent={Component}\n        placement=\"bottom\"\n      />\n    ) : (\n      Component\n    );\n\n  const grayTrack = (\n    <circle\n      className={classNameElement('track')}\n      cx=\"50%\"\n      cy=\"50%\"\n      fill=\"none\"\n      r=\"28\"\n      strokeWidth={`${trackWidth}px`}\n    />\n  );\n\n  const grayArc = (\n    <circle\n      className={classNameElement('arc-gray')}\n      stroke=\"#E0E3E8\"\n      strokeDasharray={`${grayArcStrokeDasharray}`}\n      strokeDashoffset={`${grayArcStrokeDashoffset}`}\n      cx=\"50%\"\n      cy=\"50%\"\n      fill=\"none\"\n      r=\"28\"\n      strokeWidth={`${trackWidth}px`}\n    />\n  );\n\n  const indicator = (\n    <svg\n      height={`${sizePx}px`}\n      version=\"1.1\"\n      viewBox=\"0 0 66 66\"\n      width={`${sizePx}px`}\n      data-testid=\"circular-indicator\"\n    >\n      <defs>\n        <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n          <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n        </linearGradient>\n        <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n        </linearGradient>\n        <marker\n          id=\"inverseL\"\n          viewBox=\"0 0 5 10\"\n          refX=\"0.5\"\n          refY={`${markerRefY}`}\n          markerUnits=\"strokeWidth\"\n          markerWidth=\"0.5\"\n          markerHeight={`${markerHeight}`}\n          orient=\"auto\"\n        >\n          <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n        </marker>\n        <marker\n          id=\"inverseR\"\n          viewBox=\"0 0 5 10\"\n          refX=\"0\"\n          refY=\"5\"\n          markerUnits=\"strokeWidth\"\n          markerWidth=\"0.7\"\n          markerHeight={`${markerHeight}`}\n        >\n          <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n        </marker>\n      </defs>\n      {grayTrack}\n      {!waiting && (\n        <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n          <path\n            className={classNameElement('arc-blue')}\n            d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n            stroke=\"#5594e2\"\n            strokeWidth={`${strokeWidth - 0.5}px`}\n            strokeLinecap=\"round\"\n            data-testid=\"circular-indicator-blue-arc\"\n          />\n          <path\n            className={classNameElement('arc-white')}\n            d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n            stroke=\"#FFF\"\n            strokeWidth={`${strokeWidth + 2}px`}\n            markerStart=\"url(#inverseR)\"\n            markerEnd=\"url(#inverseL)\"\n          />\n          {grayArc}\n        </g>\n      )}\n    </svg>\n  );\n\n  return (\n    <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n      {buildIndicator(indicator)}\n      {showLabel && labelText}\n    </div>\n  );\n};\n\nCircularProgressIndicator.defaultProps = {\n  size: 'm',\n  showLabel: false,\n  showTooltip: false,\n  waiting: false,\n  loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n    .description('Defines the size of the indicator')\n    .defaultValue('m'),\n  showLabel: PropTypes.bool\n    .description('Wheter the indicator displays its state on a label or not')\n    .defaultValue(false),\n  showTooltip: PropTypes.bool\n    .description('Wheter the indicator displays its state on a tooltip or not')\n    .defaultValue(false),\n  waiting: PropTypes.bool\n    .description('Defines the state of the indicator as Waiting and only displays the gray track')\n    .defaultValue(false),\n  loading: PropTypes.bool\n    .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n    .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\n\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n  const waitingLabel = 'Waiting...';\n  const loadingLabel = 'Loading...';\n  const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n  let sizePx;\n  let sizeLabel;\n  let strokeWidth;\n  let trackWidth;\n  let markerHeight = '0.7';\n  let markerRefY = '4.8';\n  let grayArcStrokeDasharray = '45 170';\n  let grayArcStrokeDashoffset = '127.5';\n\n  switch (size.toUpperCase()) {\n    case 'XS':\n      sizePx = 8;\n      sizeLabel = 12;\n      strokeWidth = 10;\n      trackWidth = 3;\n      markerHeight = '1';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'S':\n      sizePx = 16;\n      sizeLabel = 12;\n      strokeWidth = 8;\n      trackWidth = 3;\n      markerHeight = '1';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'M':\n      sizePx = 24;\n      sizeLabel = 12;\n      strokeWidth = 7;\n      trackWidth = 3;\n      markerHeight = '1';\n      markerRefY = '5.5';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'L':\n      sizePx = 32;\n      sizeLabel = 13;\n      strokeWidth = 6;\n      trackWidth = 3;\n      markerRefY = '5';\n      break;\n    case 'XL':\n      sizePx = 48;\n      sizeLabel = 14;\n      strokeWidth = 5;\n      trackWidth = 1;\n      break;\n    case 'XXL':\n      sizePx = 56;\n      sizeLabel = 16;\n      strokeWidth = 4;\n      trackWidth = 1;\n      break;\n    case 'XXXL':\n      sizePx = 64;\n      sizeLabel = 16;\n      strokeWidth = 5;\n      trackWidth = 2;\n      break;\n    default:\n      break;\n  }\n\n  const labelText = (\n    <p\n      data-testid=\"circular-indicator-label\"\n      className={classNameElement('label')}\n      style={{ fontSize: `${sizeLabel}px` }}\n    >\n      {currentLabel}\n    </p>\n  );\n\n  // Only adds the tooltip if sizePx < 17 or showTooltip is true\n  const buildIndicator = (Component: JSX.Element) =>\n    sizePx < 17 || showTooltip ? (\n      <DSTooltip\n        containerProps={{\n          id: 'ds-circular-progress-indicator',\n          'data-testid': 'circular-indicator-title',\n        }}\n        interactionType=\"hover\"\n        title={currentLabel}\n        triggerComponent={Component}\n        placement=\"bottom\"\n      />\n    ) : (\n      Component\n    );\n\n  const grayTrack = (\n    <circle\n      className={classNameElement('track')}\n      cx=\"50%\"\n      cy=\"50%\"\n      fill=\"none\"\n      r=\"28\"\n      strokeWidth={`${trackWidth}px`}\n    />\n  );\n\n  const grayArc = (\n    <circle\n      className={classNameElement('arc-gray')}\n      stroke=\"#E0E3E8\"\n      strokeDasharray={`${grayArcStrokeDasharray}`}\n      strokeDashoffset={`${grayArcStrokeDashoffset}`}\n      cx=\"50%\"\n      cy=\"50%\"\n      fill=\"none\"\n      r=\"28\"\n      strokeWidth={`${trackWidth}px`}\n    />\n  );\n\n  const indicator = (\n    <svg\n      height={`${sizePx}px`}\n      version=\"1.1\"\n      viewBox=\"0 0 66 66\"\n      width={`${sizePx}px`}\n      data-testid=\"circular-indicator\"\n    >\n      <defs>\n        <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n          <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n        </linearGradient>\n        <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n        </linearGradient>\n        <marker\n          id=\"inverseL\"\n          viewBox=\"0 0 5 10\"\n          refX=\"0.5\"\n          refY={`${markerRefY}`}\n          markerUnits=\"strokeWidth\"\n          markerWidth=\"0.5\"\n          markerHeight={`${markerHeight}`}\n          orient=\"auto\"\n        >\n          <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n        </marker>\n        <marker\n          id=\"inverseR\"\n          viewBox=\"0 0 5 10\"\n          refX=\"0\"\n          refY=\"5\"\n          markerUnits=\"strokeWidth\"\n          markerWidth=\"0.7\"\n          markerHeight={`${markerHeight}`}\n        >\n          <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n        </marker>\n      </defs>\n      {grayTrack}\n      {!waiting && (\n        <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n          <path\n            className={classNameElement('arc-blue')}\n            d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n            stroke=\"#5594e2\"\n            strokeWidth={`${strokeWidth - 0.5}px`}\n            strokeLinecap=\"round\"\n            data-testid=\"circular-indicator-blue-arc\"\n          />\n          <path\n            className={classNameElement('arc-white')}\n            d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n            stroke=\"#FFF\"\n            strokeWidth={`${strokeWidth + 2}px`}\n            markerStart=\"url(#inverseR)\"\n            markerEnd=\"url(#inverseL)\"\n          />\n          {grayArc}\n        </g>\n      )}\n    </svg>\n  );\n\n  return (\n    <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n      {buildIndicator(indicator)}\n      {showLabel && labelText}\n    </div>\n  );\n};\n\nCircularProgressIndicator.defaultProps = {\n  size: 'm',\n  showLabel: false,\n  showTooltip: false,\n  waiting: false,\n  loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n    .description('Defines the size of the indicator')\n    .defaultValue('m'),\n  showLabel: PropTypes.bool\n    .description('Wheter the indicator displays its state on a label or not')\n    .defaultValue(false),\n  showTooltip: PropTypes.bool\n    .description('Wheter the indicator displays its state on a tooltip or not')\n    .defaultValue(false),\n  waiting: PropTypes.bool\n    .description('Defines the state of the indicator as Waiting and only displays the gray track')\n    .defaultValue(false),\n  loading: PropTypes.bool\n    .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n    .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\nCircularProgressIndicator.displayName = 'CircularProgressIndicator';\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAClB,wBAAoC;AACpC,2BAA0C;AAC1C,wBAAsB;AAEtB,MAAM,EAAE,gBAAgB,qBAAqB,oDAA0B,6BAA6B;AAEpG,MAAM,4BAA4B,CAAC,EAAE,MAAM,WAAW,aAAa,SAAS,cAAc;AACxF,QAAM,eAAe;AACrB,QAAM,eAAe;AACrB,QAAM,eAAe,WAAW,CAAC,UAAU,eAAe;AAC1D,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI,eAAe;AACnB,MAAI,aAAa;AACjB,MAAI,yBAAyB;AAC7B,MAAI,0BAA0B;AAE9B,UAAQ,KAAK,YAAY;AAAA,SAClB;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,mBAAa;AACb,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,mBAAa;AACb;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA;AAEA;AAAA;AAGJ,QAAM,YACJ,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,WAAW,iBAAiB,OAAO;AAAA,IACnC,OAAO,EAAE,UAAU,GAAG,cAAc;AAAA,KAEnC,YACH;AAIF,QAAM,iBAAiB,CAAC,cACtB,SAAS,MAAM,cACb,mDAAC;AAAA,IACC,gBAAgB;AAAA,MACd,IAAI;AAAA,MACJ,eAAe;AAAA,IACjB;AAAA,IACA,iBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,WAAU;AAAA,GACZ,IAEA;AAGJ,QAAM,YACJ,mDAAC;AAAA,IACC,WAAW,iBAAiB,OAAO;AAAA,IACnC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,MAAK;AAAA,IACL,GAAE;AAAA,IACF,aAAa,GAAG;AAAA,GAClB;AAGF,QAAM,UACJ,mDAAC;AAAA,IACC,WAAW,iBAAiB,UAAU;AAAA,IACtC,QAAO;AAAA,IACP,iBAAiB,GAAG;AAAA,IACpB,kBAAkB,GAAG;AAAA,IACrB,IAAG;AAAA,IACH,IAAG;AAAA,IACH,MAAK;AAAA,IACL,GAAE;AAAA,IACF,aAAa,GAAG;AAAA,GAClB;AAGF,QAAM,YACJ,mDAAC;AAAA,IACC,QAAQ,GAAG;AAAA,IACX,SAAQ;AAAA,IACR,SAAQ;AAAA,IACR,OAAO,GAAG;AAAA,IACV,eAAY;AAAA,KAEZ,mDAAC,cACC,mDAAC;AAAA,IAAe,IAAG;AAAA,IAAQ,IAAG;AAAA,IAAK,IAAG;AAAA,IAAO,IAAG;AAAA,IAAO,IAAG;AAAA,KACxD,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAK,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,GAAG,GACnE,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAM,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,GAAG,GACpE,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAO,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,GAAG,CACvE,GACA,mDAAC;AAAA,IAAe,IAAG;AAAA,IAAQ,IAAG;AAAA,IAAK,IAAG;AAAA,IAAO,IAAG;AAAA,IAAO,IAAG;AAAA,KACxD,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAK,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,GAAG,GACnE,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAM,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,GAAG,GACpE,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAO,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,GAAG,CACvE,GACA,mDAAC;AAAA,IACC,IAAG;AAAA,IACH,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,MAAM,GAAG;AAAA,IACT,aAAY;AAAA,IACZ,aAAY;AAAA,IACZ,cAAc,GAAG;AAAA,IACjB,QAAO;AAAA,KAEP,mDAAC;AAAA,IAAK,GAAE;AAAA,IAAwC,MAAK;AAAA,GAAO,CAC9D,GACA,mDAAC;AAAA,IACC,IAAG;AAAA,IACH,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,MAAK;AAAA,IACL,aAAY;AAAA,IACZ,aAAY;AAAA,IACZ,cAAc,GAAG;AAAA,KAEjB,mDAAC;AAAA,IAAK,GAAE;AAAA,IAAwC,MAAK;AAAA,GAAO,CAC9D,CACF,GACC,WACA,CAAC,WACA,mDAAC;AAAA,IAAE,MAAK;AAAA,IAAO,UAAS;AAAA,IAAU,QAAO;AAAA,IAAO,aAAY;AAAA,KAC1D,mDAAC;AAAA,IACC,WAAW,iBAAiB,UAAU;AAAA,IACtC,GAAE;AAAA,IACF,QAAO;AAAA,IACP,aAAa,GAAG,cAAc;AAAA,IAC9B,eAAc;AAAA,IACd,eAAY;AAAA,GACd,GACA,mDAAC;AAAA,IACC,WAAW,iBAAiB,WAAW;AAAA,IACvC,GAAE;AAAA,IACF,QAAO;AAAA,IACP,aAAa,GAAG,cAAc;AAAA,IAC9B,aAAY;AAAA,IACZ,WAAU;AAAA,GACZ,GACC,OACH,CAEJ;AAGF,SACE,mDAAC;AAAA,IAAI,WAAW,eAAe,SAAS;AAAA,IAAG,MAAK;AAAA,IAAS,eAAa,WAAW,UAAU,UAAU;AAAA,KAClG,eAAe,SAAS,GACxB,aAAa,SAChB;AAEJ;AAEA,0BAA0B,eAAe;AAAA,EACvC,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,iCAAiC;AAAA,EACrC,MAAM,4BAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,OAAO,MAAM,CAAC,EAC7D,YAAY,mCAAmC,EAC/C,aAAa,GAAG;AAAA,EACnB,WAAW,4BAAU,KAClB,YAAY,2DAA2D,EACvE,aAAa,KAAK;AAAA,EACrB,aAAa,4BAAU,KACpB,YAAY,6DAA6D,EACzE,aAAa,KAAK;AAAA,EACrB,SAAS,4BAAU,KAChB,YAAY,gFAAgF,EAC5F,aAAa,KAAK;AAAA,EACrB,SAAS,4BAAU,KAChB,YAAY,qFAAqF,EACjG,aAAa,KAAK;AACvB;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,gCAAS,yBAAyB;AAC9E,oCAAoC,YAAY;AAGhD,IAAO,sCAAQ;",
   "names": []
 }

package/dist/cjs/index.js

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
   CircularProgressIndicatorWithSchema: () => import_DSCircularProgressIndicator.CircularProgressIndicatorWithSchema,
@@ -33,8 +26,8 @@ __export(src_exports, {
   DSCircularProgressIndicator: () => import_DSCircularProgressIndicator.default,
   default: () => import_DSCircularProgressIndicator.default
 });
+module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 var import_DSCircularProgressIndicator = __toESM(require("./DSCircularProgressIndicator"));
 var import_v2 = require("./v2");
-module.exports = __toCommonJS(src_exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable import/named */\nexport {\n  default,\n  default as DSCircularProgressIndicator,\n  CircularProgressIndicatorWithSchema,\n} from './DSCircularProgressIndicator';\nexport { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,yCAIO;AACP,gBAA6F;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,yCAIO;AACP,gBAA6F;",
   "names": []
 }

package/dist/cjs/v2/DSCircularIndeterminateIndicator.js

@@ -18,59 +18,68 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DSCircularIndeterminateIndicator_exports = {};
 __export(DSCircularIndeterminateIndicator_exports, {
   DSCircularIndeterminateIndicator: () => DSCircularIndeterminateIndicator,
   DSCircularIndeterminateIndicatorWithSchema: () => DSCircularIndeterminateIndicatorWithSchema
 });
+module.exports = __toCommonJS(DSCircularIndeterminateIndicator_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_tooltip = require("@elliemae/ds-tooltip");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_uid = require("uid");
 var import_react_desc_prop_types = require("./react-desc-prop-types");
 var import_constants = require("./constants");
 var import_styled = require("./styled");
+const EmptyComp = (props) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.children);
 const DSCircularIndeterminateIndicator = (props) => {
-  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
-  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
+  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
+  const _a = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault), { height, width, rows, cols } = _a, globalAttributes = __objRest(_a, ["height", "width", "rows", "cols"]);
   const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;
-  const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children), [withTooltip]);
+  const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
   const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
   const circleRadius = (0, import_react.useMemo)(() => (import_constants.sizeToPx[size] - Number.parseInt(import_constants.sizeToWeight[size], 10)) / 2, [size]);
   return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, __spreadValues({
     gutter: "xs",
     justifyContent: "center",
-    role: "status"
+    role: "status",
+    "aria-label": text || "Loading..."
   }, globalAttributes), /* @__PURE__ */ import_react.default.createElement(Wrapper, {
     text,
     textAlign: "center",
     startPlacementPreference: tooltipStartPlacementPreference
   }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledSvg, {
     width: import_constants.sizeToPx[size],
-    height: import_constants.sizeToPx[size]
+    height: import_constants.sizeToPx[size],
+    __duration
   }, /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", {
     id: `not-gradient-clip-${uniqueId}`
   }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledRect, {
@@ -115,7 +124,7 @@ const DSCircularIndeterminateIndicator = (props) => {
   }, text)));
 };
 DSCircularIndeterminateIndicator.propTypes = import_react_desc_prop_types.CircularIndeterminateIndicatorPropTypes;
-const DSCircularIndeterminateIndicatorWithSchema = (0, import_ds_props_helpers.describe)(DSCircularIndeterminateIndicator);
+DSCircularIndeterminateIndicator.displayName = "DSCircularIndeterminateIndicator";
+const DSCircularIndeterminateIndicatorWithSchema = (0, import_ds_utilities.describe)(DSCircularIndeterminateIndicator);
 DSCircularIndeterminateIndicatorWithSchema.propTypes = import_react_desc_prop_types.CircularIndeterminateIndicatorPropTypes;
-module.exports = __toCommonJS(DSCircularIndeterminateIndicator_exports);
 //# sourceMappingURL=DSCircularIndeterminateIndicator.js.map

package/dist/cjs/v2/DSCircularIndeterminateIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/v2/DSCircularIndeterminateIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { PropsWithChildren, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport {\n  DSCircularIndeterminateIndicatorT,\n  CircularIndeterminateIndicatorPropTypes,\n  defaultProps,\n} from './react-desc-prop-types';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled';\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n  props,\n) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSCircularIndeterminateIndicatorT.Props>>(\n    props,\n    defaultProps,\n  );\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(\n    () => (withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>),\n    [withTooltip],\n  );\n\n  const uniqueId = useMemo(() => uid(16), []);\n\n  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n  return (\n    <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" {...globalAttributes}>\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]}>\n          <defs>\n            <clipPath id={`not-gradient-clip-${uniqueId}`}>\n              <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" __duration={__duration} />\n            </clipPath>\n            <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n              <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n              <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n            </linearGradient>\n          </defs>\n          <StyledCircle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={circleRadius}\n            strokeWidth={sizeToWeight[size]}\n            stroke={colorToHex[color]}\n            strokeLinecap=\"round\"\n            clipPath={`url(#not-gradient-clip-${uniqueId})`}\n            __duration={__duration}\n          />\n          {/* \n            Here we are using a path because:\n            - Flexible enough to build a circle\n            - When rotating, the gradient follows the rotation!!! (This is key)\n            - We can use the rotation with keyframes, allowing for custom timing\n            \n            Using a circle does not pass point 2.\n            Animating the gradient is not posible with custom timings.\n            This is the best solution without using a custom library.\n          */}\n          <StyledPath\n            d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n                m ${circleRadius}, 0\n                a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n            strokeWidth={sizeToWeight[size]}\n            fill=\"transparent\"\n            stroke={`url(#gradient-color-${uniqueId})`}\n            strokeLinecap=\"round\"\n            r={circleRadius}\n            __duration={__duration}\n          />\n        </StyledSvg>\n        {text !== '' && showText && (\n          <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n            {text}\n          </span>\n        )}\n      </Wrapper>\n    </Grid>\n  );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\n\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkD;AAClD,qBAAqB;AACrB,wBAA4B;AAC5B,8BAA+E;AAC/E,iBAAoB;AACpB,mCAIO;AACP,uBAAmE;AACnE,oBAAgE;AAEzD,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB,0DACvB,OACA;AAEF,QAAM,mBAAmB,oDAAuB;AAEhD,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,iCAAiC,eAAe;AAElG,QAAM,UAA8B,0BAClC,MAAO,cAAc,gCAAc,CAAC,EAAE,eAA2C,wFAAG,WACpF,CAAC;AAGH,QAAM,WAAW,0BAAQ,MAAM,oBAAI,KAAK;AAExC,QAAM,eAAe,0BAAQ,MAAO,2BAAS,QAAQ,OAAO,SAAS,8BAAa,OAAO,OAAO,GAAG,CAAC;AAEpG,SACE,mDAAC,qBAAD;AAAA,IAAM,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,KAAa,mBAC1D,mDAAC,SAAD;AAAA,IAAS;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,mDAAC,yBAAD;AAAA,IAAW,OAAO,0BAAS;AAAA,IAAO,QAAQ,0BAAS;AAAA,KACjD,mDAAC,QAAD,MACE,mDAAC,YAAD;AAAA,IAAU,IAAI,qBAAqB;AAAA,KACjC,mDAAC,0BAAD;AAAA,IAAY,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,OAAM;AAAA,IAAM,QAAO;AAAA,IAAO;AAAA,OAEtD,mDAAC,kBAAD;AAAA,IAAgB,IAAI,kBAAkB;AAAA,IAAY,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,KAC3E,mDAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAM,WAAW,GAAG,4BAAW;AAAA,MAC5C,mDAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAM,WAAW,GAAG,4BAAW;AAAA,QAGhD,mDAAC,4BAAD;AAAA,IACE,IAAG;AAAA,IACH,IAAG;AAAA,IACH,GAAG;AAAA,IACH,aAAa,8BAAa;AAAA,IAC1B,QAAQ,4BAAW;AAAA,IACnB,eAAc;AAAA,IACd,UAAU,0BAA0B;AAAA,IACpC;AAAA,MAYF,mDAAC,0BAAD;AAAA,IACE,GAAG,KAAK,0BAAS,QAAQ,KAAK,0BAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,IAClE,aAAa,8BAAa;AAAA,IAC1B,MAAK;AAAA,IACL,QAAQ,uBAAuB;AAAA,IAC/B,eAAc;AAAA,IACd,GAAG;AAAA,IACH;AAAA,OAGH,SAAS,MAAM,YACd,mDAAC,QAAD;AAAA,IAAM,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,gCAAe;AAAA,KACzF;AAAA;AAQb,iCAAiC,YAAY;AAEtC,MAAM,6CAA6C,sCAAS;AACnE,2CAA2C,YAAY;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport {\n  DSCircularIndeterminateIndicatorT,\n  CircularIndeterminateIndicatorPropTypes,\n  defaultProps,\n} from './react-desc-prop-types';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n  props,\n) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSCircularIndeterminateIndicatorT.Props>>(\n    props,\n    defaultProps,\n  );\n  const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n  const uniqueId = useMemo(() => uid(16), []);\n\n  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n  return (\n    <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]} __duration={__duration}>\n          <defs>\n            <clipPath id={`not-gradient-clip-${uniqueId}`}>\n              <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" __duration={__duration} />\n            </clipPath>\n            <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n              <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n              <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n            </linearGradient>\n          </defs>\n          <StyledCircle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={circleRadius}\n            strokeWidth={sizeToWeight[size]}\n            stroke={colorToHex[color]}\n            strokeLinecap=\"round\"\n            clipPath={`url(#not-gradient-clip-${uniqueId})`}\n            __duration={__duration}\n          />\n          {/* \n            Here we are using a path because:\n            - Flexible enough to build a circle\n            - When rotating, the gradient follows the rotation!!! (This is key)\n            - We can use the rotation with keyframes, allowing for custom timing\n            \n            Using a circle does not pass point 2.\n            Animating the gradient is not posible with custom timings.\n            This is the best solution without using a custom library.\n          */}\n          <StyledPath\n            d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n                m ${circleRadius}, 0\n                a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n            strokeWidth={sizeToWeight[size]}\n            fill=\"transparent\"\n            stroke={`url(#gradient-color-${uniqueId})`}\n            strokeLinecap=\"round\"\n            r={circleRadius}\n            __duration={__duration}\n          />\n        </StyledSvg>\n        {text !== '' && showText && (\n          <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n            {text}\n          </span>\n        )}\n      </Wrapper>\n    </Grid>\n  );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = 'DSCircularIndeterminateIndicator';\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+B;AAC/B,qBAAqB;AACrB,wBAA4B;AAC5B,0BAA+E;AAC/E,iBAAoB;AACpB,mCAIO;AACP,uBAAmE;AACnE,oBAAgE;AAGhE,MAAM,YAAgC,CAAC,UAAU,wFAAG,MAAM,QAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB,sDACvB,OACA,yCACF;AACA,QAA2D,qDAAuB,gBAAgB,GAA1F,UAAQ,OAAO,MAAM,SAA8B,IAArB,6BAAqB,IAArB,CAA9B,UAAQ,SAAO,QAAM;AAE7B,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,iCAAiC,eAAe;AAElG,QAAM,UAA8B,0BAAQ,MAAO,cAAc,gCAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,WAAW,0BAAQ,MAAM,oBAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,eAAe,0BAAQ,MAAO,2BAAS,QAAQ,OAAO,SAAS,8BAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,IAAS,cAAY,QAAQ;AAAA,KAAkB,mBAC5F,mDAAC;AAAA,IAAQ;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,mDAAC;AAAA,IAAU,OAAO,0BAAS;AAAA,IAAO,QAAQ,0BAAS;AAAA,IAAO;AAAA,KACxD,mDAAC,cACC,mDAAC;AAAA,IAAS,IAAI,qBAAqB;AAAA,KACjC,mDAAC;AAAA,IAAW,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,OAAM;AAAA,IAAM,QAAO;AAAA,IAAO;AAAA,GAAwB,CAC9E,GACA,mDAAC;AAAA,IAAe,IAAI,kBAAkB;AAAA,IAAY,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,KAC3E,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,4BAAW;AAAA,GAAY,GACxD,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,4BAAW;AAAA,GAAY,CAC1D,CACF,GACA,mDAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,GAAG;AAAA,IACH,aAAa,8BAAa;AAAA,IAC1B,QAAQ,4BAAW;AAAA,IACnB,eAAc;AAAA,IACd,UAAU,0BAA0B;AAAA,IACpC;AAAA,GACF,GAWA,mDAAC;AAAA,IACC,GAAG,KAAK,0BAAS,QAAQ,KAAK,0BAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,IAClE,aAAa,8BAAa;AAAA,IAC1B,MAAK;AAAA,IACL,QAAQ,uBAAuB;AAAA,IAC/B,eAAc;AAAA,IACd,GAAG;AAAA,IACH;AAAA,GACF,CACF,GACC,SAAS,MAAM,YACd,mDAAC;AAAA,IAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,gCAAe,MAAM;AAAA,KAC/F,IACH,CAEJ,CACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,6CAA6C,kCAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
   "names": []
 }

package/dist/cjs/v2/constants.js

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
   colorToHex: () => colorToHex,
@@ -32,6 +25,7 @@ __export(constants_exports, {
   sizeToTextSize: () => sizeToTextSize,
   sizeToWeight: () => sizeToWeight
 });
+module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
 const sizeToPx = {
   xs: 16,
@@ -61,5 +55,4 @@ const sizeToTextSize = {
   xl: "14px",
   xxl: "16px"
 };
-module.exports = __toCommonJS(constants_exports);
 //# sourceMappingURL=constants.js.map

package/dist/cjs/v2/constants.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/v2/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const sizeToPx = {\n  xs: 16,\n  s: 24,\n  m: 32,\n  l: 48,\n  xl: 56,\n  xxl: 64,\n};\n\nexport const sizeToWeight = {\n  xs: '3px',\n  s: '3px',\n  m: '3px',\n  l: '4px',\n  xl: '5px',\n  xxl: '6px',\n};\n\nexport const colorToHex = {\n  light: '#EBF6FF',\n  dark: '#1394E5',\n};\n\nexport const sizeToTextSize = {\n  xs: '12px',\n  s: '12px',\n  m: '12px',\n  l: '13px',\n  xl: '14px',\n  xxl: '16px',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;",
   "names": []
 }

package/dist/cjs/v2/index.js

@@ -4,33 +4,26 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var v2_exports = {};
 __export(v2_exports, {
   DSCircularIndeterminateIndicator: () => import_DSCircularIndeterminateIndicator.DSCircularIndeterminateIndicator,
   DSCircularIndeterminateIndicatorWithSchema: () => import_DSCircularIndeterminateIndicator.DSCircularIndeterminateIndicatorWithSchema
 });
+module.exports = __toCommonJS(v2_exports);
 var React = __toESM(require("react"));
 var import_DSCircularIndeterminateIndicator = require("./DSCircularIndeterminateIndicator");
-module.exports = __toCommonJS(v2_exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/v2/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/v2/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export {\n  DSCircularIndeterminateIndicator,\n  DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8CAGO;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8CAGO;",
   "names": []
 }

package/dist/cjs/v2/react-desc-prop-types.js

@@ -21,41 +21,35 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
   CircularIndeterminateIndicatorPropTypes: () => CircularIndeterminateIndicatorPropTypes,
   defaultProps: () => defaultProps
 });
+module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-const CircularIndeterminateIndicatorPropTypes = __spreadProps(__spreadValues({}, import_ds_props_helpers.globalAttributesPropTypes), {
-  size: import_ds_props_helpers.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
-  color: import_ds_props_helpers.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
-  text: import_ds_props_helpers.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
-  showText: import_ds_props_helpers.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
-  withTooltip: import_ds_props_helpers.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
-  tooltipStartPlacementPreference: import_ds_props_helpers.PropTypes.oneOf([
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const CircularIndeterminateIndicatorPropTypes = __spreadProps(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), {
+  size: import_ds_utilities.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
+  color: import_ds_utilities.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
+  text: import_ds_utilities.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
+  showText: import_ds_utilities.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
+  withTooltip: import_ds_utilities.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
+  tooltipStartPlacementPreference: import_ds_utilities.PropTypes.oneOf([
     "top-start",
     "top",
     "top-end",
@@ -77,7 +71,6 @@ const defaultProps = {
   showText: true,
   withTooltip: false,
   tooltipStartPlacementPreference: "bottom",
-  __duration: 4
+  __duration: 10
 };
-module.exports = __toCommonJS(react_desc_prop_types_exports);
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/v2/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/v2/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { WeakValidationMap } from 'react';\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n  interface Props {\n    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n    color?: 'light' | 'dark';\n    text?: string;\n    showText?: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference?:\n      | 'top-start'\n      | 'top'\n      | 'top-end'\n      | 'right-start'\n      | 'right'\n      | 'right-end'\n      | 'bottom-end'\n      | 'bottom'\n      | 'bottom-start'\n      | 'left-end'\n      | 'left'\n      | 'left-start';\n    __duration: number;\n  }\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n  ...globalAttributesPropTypes,\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n  color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n  text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n  showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n  withTooltip: PropTypes.bool\n    .description('Whether to include a tooltip that shows the optional text on hover')\n    .defaultValue(false),\n  tooltipStartPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preference for the tooltip')\n    .defaultValue('center'),\n} as WeakValidationMap<unknown>;\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.Props = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n  __duration: 4,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAqD;AA2B9C,MAAM,0CAA0C,iCAClD,oDADkD;AAAA,EAErD,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,kCAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,kCAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,kCAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,kCAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,iCAAiC,kCAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,YAAY,8CACZ,aAAa;AAAA;AAGX,MAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AAAA,EACjC,YAAY;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n  interface Props {\n    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n    color?: 'light' | 'dark';\n    text?: string;\n    showText?: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference?:\n      | 'top-start'\n      | 'top'\n      | 'top-end'\n      | 'right-start'\n      | 'right'\n      | 'right-end'\n      | 'bottom-end'\n      | 'bottom'\n      | 'bottom-start'\n      | 'left-end'\n      | 'left'\n      | 'left-start';\n    __duration: number;\n  }\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n  ...globalAttributesPropTypes,\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n  color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n  text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n  showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n  withTooltip: PropTypes.bool\n    .description('Whether to include a tooltip that shows the optional text on hover')\n    .defaultValue(false),\n  tooltipStartPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preference for the tooltip')\n    .defaultValue('center'),\n} as WeakValidationMap<unknown>;\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.Props = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n  __duration: 10,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAqD;AA2B9C,MAAM,0CAA0C,iCAClD,gDADkD;AAAA,EAErD,MAAM,8BAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,8BAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,8BAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,8BAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,8BAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,8BAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;AAEO,MAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AAAA,EACjC,YAAY;AACd;",
   "names": []
 }

package/dist/cjs/v2/styled.js

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styled_exports = {};
 __export(styled_exports, {
   StyledCircle: () => StyledCircle,
@@ -32,11 +25,20 @@ __export(styled_exports, {
   StyledRect: () => StyledRect,
   StyledSvg: () => StyledSvg
 });
+module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_ds_system = require("@elliemae/ds-system");
 const { PI } = Math;
 const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
+const svgRotateAnimation = import_ds_system.kfrm`
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+`;
 const strokeTailAnimation = (r) => {
   const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
   const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
@@ -116,6 +118,7 @@ const StyledSvg = import_styled_components.default.svg`
   margin: auto;
   transform-origin: center center;
   transform: rotate(-90deg);
+  animation: ${svgRotateAnimation} ${(props) => props.__duration / 4}s linear infinite;
 `;
 const StyledPath = import_styled_components.default.path`
   transform-origin: center center;
@@ -133,5 +136,4 @@ const StyledCircle = import_styled_components.default.circle`
   clip-path: ${(props) => props.clipPath};
   -webkit-clip-path: ${(props) => props.clipPath};
 `;
-module.exports = __toCommonJS(styled_exports);
 //# sourceMappingURL=styled.js.map

package/dist/cjs/v2/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/v2/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\n\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst strokeTailAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n    }\n    50% {\n        stroke-dasharray: ${fullDash};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n    }\n`;\n};\n\nconst rotateAnimation = kfrm`\n    0%, 12.5% {\n        transform: rotate(0);\n    }\n    25%, 37.5% {\n        transform: rotate(270deg);\n    }\n    50%, 62.5% {\n        transform: rotate(540deg);\n    }\n    75%, 87.5% {\n        transform: rotate(810deg);\n    }\n    100% {\n        transform: rotate(1080deg);\n    }\n`;\n\nconst dashAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: 0;\n    }\n    12.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: 0;\n    }\n    25% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    37.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    50% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    62.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    75% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    87.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-300, r)};\n    }\n`;\n};\n\nexport const StyledSvg = styled.svg`\n  display: block;\n  margin: auto;\n  transform-origin: center center;\n  transform: rotate(-90deg);\n`;\n\nexport const StyledPath = styled.path<{ __duration: number; r: number }>`\n  transform-origin: center center;\n  animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite,\n    ${(props) => strokeTailAnimation(props.r)} ${(props) => props.__duration / 4}s linear infinite;\n`;\n\nexport const StyledRect = styled.rect<{ __duration: number }>`\n  transform-origin: center center;\n  animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number; __duration: number }>`\n  stroke-dashoffset: 0;\n  fill: none;\n  animation: ${(props) => dashAnimation(props.r)} ${(props) => props.__duration}s linear infinite;\n  clip-path: ${(props) => props.clipPath};\n  -webkit-clip-path: ${(props) => props.clipPath};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAqB;AAErB,MAAM,EAAE,OAAO;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA;AAK5B,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA;AAKzC,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,aAAa,iCAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA,MAC7C,CAAC,UAAU,oBAAoB,MAAM,MAAM,CAAC,UAAU,MAAM,aAAa;AAAA;AAGxE,MAAM,aAAa,iCAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA;AAG5C,MAAM,eAAe,iCAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,MAAM,CAAC,UAAU,MAAM;AAAA,eACtD,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;",
+  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\n\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst svgRotateAnimation = kfrm`\n    0% {\n        transform: rotate(0);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n`;\n\nconst strokeTailAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n    }\n    50% {\n        stroke-dasharray: ${fullDash};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n    }\n`;\n};\n\nconst rotateAnimation = kfrm`\n    0%, 12.5% {\n        transform: rotate(0);\n    }\n    25%, 37.5% {\n        transform: rotate(270deg);\n    }\n    50%, 62.5% {\n        transform: rotate(540deg);\n    }\n    75%, 87.5% {\n        transform: rotate(810deg);\n    }\n    100% {\n        transform: rotate(1080deg);\n    }\n`;\n\nconst dashAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: 0;\n    }\n    12.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: 0;\n    }\n    25% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    37.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    50% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    62.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    75% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    87.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-300, r)};\n    }\n`;\n};\n\nexport const StyledSvg = styled.svg<{ __duration: number }>`\n  display: block;\n  margin: auto;\n  transform-origin: center center;\n  transform: rotate(-90deg);\n  animation: ${svgRotateAnimation} ${(props) => props.__duration / 4}s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ __duration: number; r: number }>`\n  transform-origin: center center;\n  animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite,\n    ${(props) => strokeTailAnimation(props.r)} ${(props) => props.__duration / 4}s linear infinite;\n`;\n\nexport const StyledRect = styled.rect<{ __duration: number }>`\n  transform-origin: center center;\n  animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number; __duration: number }>`\n  stroke-dashoffset: 0;\n  fill: none;\n  animation: ${(props) => dashAnimation(props.r)} ${(props) => props.__duration}s linear infinite;\n  clip-path: ${(props) => props.clipPath};\n  -webkit-clip-path: ${(props) => props.clipPath};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAqB;AAErB,MAAM,EAAE,OAAO;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAG5B;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAGjD;AAEO,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB,sBAAsB,CAAC,UAAU,MAAM,aAAa;AAAA;AAG5D,MAAM,aAAa,iCAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA,MAC7C,CAAC,UAAU,oBAAoB,MAAM,CAAC,KAAK,CAAC,UAAU,MAAM,aAAa;AAAA;AAGxE,MAAM,aAAa,iCAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA;AAG5C,MAAM,eAAe,iCAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC,KAAK,CAAC,UAAU,MAAM;AAAA,eACtD,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;",
   "names": []
 }

package/dist/esm/DSCircularProgressIndicator.js

@@ -207,6 +207,7 @@ const circularProgressIndicatorProps = {
   loading: PropTypes.bool.description("Defines the state of the indicator as Loading and displays a blue spinner animation").defaultValue(false)
 };
 CircularProgressIndicator.propTypes = circularProgressIndicatorProps;
+CircularProgressIndicator.displayName = "CircularProgressIndicator";
 const CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);
 CircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;
 var DSCircularProgressIndicator_default = CircularProgressIndicator;

package/dist/esm/DSCircularProgressIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSCircularProgressIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n  const waitingLabel = 'Waiting...';\n  const loadingLabel = 'Loading...';\n  const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n  let sizePx;\n  let sizeLabel;\n  let strokeWidth;\n  let trackWidth;\n  let markerHeight = '0.7';\n  let markerRefY = '4.8';\n  let grayArcStrokeDasharray = '45 170';\n  let grayArcStrokeDashoffset = '127.5';\n\n  switch (size.toUpperCase()) {\n    case 'XS':\n      sizePx = 8;\n      sizeLabel = 12;\n      strokeWidth = 10;\n      trackWidth = 3;\n      markerHeight = '1';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'S':\n      sizePx = 16;\n      sizeLabel = 12;\n      strokeWidth = 8;\n      trackWidth = 3;\n      markerHeight = '1';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'M':\n      sizePx = 24;\n      sizeLabel = 12;\n      strokeWidth = 7;\n      trackWidth = 3;\n      markerHeight = '1';\n      markerRefY = '5.5';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'L':\n      sizePx = 32;\n      sizeLabel = 13;\n      strokeWidth = 6;\n      trackWidth = 3;\n      markerRefY = '5';\n      break;\n    case 'XL':\n      sizePx = 48;\n      sizeLabel = 14;\n      strokeWidth = 5;\n      trackWidth = 1;\n      break;\n    case 'XXL':\n      sizePx = 56;\n      sizeLabel = 16;\n      strokeWidth = 4;\n      trackWidth = 1;\n      break;\n    case 'XXXL':\n      sizePx = 64;\n      sizeLabel = 16;\n      strokeWidth = 5;\n      trackWidth = 2;\n      break;\n    default:\n      break;\n  }\n\n  const labelText = (\n    <p\n      data-testid=\"circular-indicator-label\"\n      className={classNameElement('label')}\n      style={{ fontSize: `${sizeLabel}px` }}\n    >\n      {currentLabel}\n    </p>\n  );\n\n  // Only adds the tooltip if sizePx < 17 or showTooltip is true\n  const buildIndicator = (Component: JSX.Element) =>\n    sizePx < 17 || showTooltip ? (\n      <DSTooltip\n        containerProps={{\n          id: 'ds-circular-progress-indicator',\n          'data-testid': 'circular-indicator-title',\n        }}\n        interactionType=\"hover\"\n        title={currentLabel}\n        triggerComponent={Component}\n        placement=\"bottom\"\n      />\n    ) : (\n      Component\n    );\n\n  const grayTrack = (\n    <circle\n      className={classNameElement('track')}\n      cx=\"50%\"\n      cy=\"50%\"\n      fill=\"none\"\n      r=\"28\"\n      strokeWidth={`${trackWidth}px`}\n    />\n  );\n\n  const grayArc = (\n    <circle\n      className={classNameElement('arc-gray')}\n      stroke=\"#E0E3E8\"\n      strokeDasharray={`${grayArcStrokeDasharray}`}\n      strokeDashoffset={`${grayArcStrokeDashoffset}`}\n      cx=\"50%\"\n      cy=\"50%\"\n      fill=\"none\"\n      r=\"28\"\n      strokeWidth={`${trackWidth}px`}\n    />\n  );\n\n  const indicator = (\n    <svg\n      height={`${sizePx}px`}\n      version=\"1.1\"\n      viewBox=\"0 0 66 66\"\n      width={`${sizePx}px`}\n      data-testid=\"circular-indicator\"\n    >\n      <defs>\n        <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n          <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n        </linearGradient>\n        <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n        </linearGradient>\n        <marker\n          id=\"inverseL\"\n          viewBox=\"0 0 5 10\"\n          refX=\"0.5\"\n          refY={`${markerRefY}`}\n          markerUnits=\"strokeWidth\"\n          markerWidth=\"0.5\"\n          markerHeight={`${markerHeight}`}\n          orient=\"auto\"\n        >\n          <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n        </marker>\n        <marker\n          id=\"inverseR\"\n          viewBox=\"0 0 5 10\"\n          refX=\"0\"\n          refY=\"5\"\n          markerUnits=\"strokeWidth\"\n          markerWidth=\"0.7\"\n          markerHeight={`${markerHeight}`}\n        >\n          <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n        </marker>\n      </defs>\n      {grayTrack}\n      {!waiting && (\n        <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n          <path\n            className={classNameElement('arc-blue')}\n            d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n            stroke=\"#5594e2\"\n            strokeWidth={`${strokeWidth - 0.5}px`}\n            strokeLinecap=\"round\"\n            data-testid=\"circular-indicator-blue-arc\"\n          />\n          <path\n            className={classNameElement('arc-white')}\n            d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n            stroke=\"#FFF\"\n            strokeWidth={`${strokeWidth + 2}px`}\n            markerStart=\"url(#inverseR)\"\n            markerEnd=\"url(#inverseL)\"\n          />\n          {grayArc}\n        </g>\n      )}\n    </svg>\n  );\n\n  return (\n    <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n      {buildIndicator(indicator)}\n      {showLabel && labelText}\n    </div>\n  );\n};\n\nCircularProgressIndicator.defaultProps = {\n  size: 'm',\n  showLabel: false,\n  showTooltip: false,\n  waiting: false,\n  loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n    .description('Defines the size of the indicator')\n    .defaultValue('m'),\n  showLabel: PropTypes.bool\n    .description('Wheter the indicator displays its state on a label or not')\n    .defaultValue(false),\n  showTooltip: PropTypes.bool\n    .description('Wheter the indicator displays its state on a tooltip or not')\n    .defaultValue(false),\n  waiting: PropTypes.bool\n    .description('Defines the state of the indicator as Waiting and only displays the gray track')\n    .defaultValue(false),\n  loading: PropTypes.bool\n    .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n    .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\n\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n  const waitingLabel = 'Waiting...';\n  const loadingLabel = 'Loading...';\n  const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n  let sizePx;\n  let sizeLabel;\n  let strokeWidth;\n  let trackWidth;\n  let markerHeight = '0.7';\n  let markerRefY = '4.8';\n  let grayArcStrokeDasharray = '45 170';\n  let grayArcStrokeDashoffset = '127.5';\n\n  switch (size.toUpperCase()) {\n    case 'XS':\n      sizePx = 8;\n      sizeLabel = 12;\n      strokeWidth = 10;\n      trackWidth = 3;\n      markerHeight = '1';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'S':\n      sizePx = 16;\n      sizeLabel = 12;\n      strokeWidth = 8;\n      trackWidth = 3;\n      markerHeight = '1';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'M':\n      sizePx = 24;\n      sizeLabel = 12;\n      strokeWidth = 7;\n      trackWidth = 3;\n      markerHeight = '1';\n      markerRefY = '5.5';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'L':\n      sizePx = 32;\n      sizeLabel = 13;\n      strokeWidth = 6;\n      trackWidth = 3;\n      markerRefY = '5';\n      break;\n    case 'XL':\n      sizePx = 48;\n      sizeLabel = 14;\n      strokeWidth = 5;\n      trackWidth = 1;\n      break;\n    case 'XXL':\n      sizePx = 56;\n      sizeLabel = 16;\n      strokeWidth = 4;\n      trackWidth = 1;\n      break;\n    case 'XXXL':\n      sizePx = 64;\n      sizeLabel = 16;\n      strokeWidth = 5;\n      trackWidth = 2;\n      break;\n    default:\n      break;\n  }\n\n  const labelText = (\n    <p\n      data-testid=\"circular-indicator-label\"\n      className={classNameElement('label')}\n      style={{ fontSize: `${sizeLabel}px` }}\n    >\n      {currentLabel}\n    </p>\n  );\n\n  // Only adds the tooltip if sizePx < 17 or showTooltip is true\n  const buildIndicator = (Component: JSX.Element) =>\n    sizePx < 17 || showTooltip ? (\n      <DSTooltip\n        containerProps={{\n          id: 'ds-circular-progress-indicator',\n          'data-testid': 'circular-indicator-title',\n        }}\n        interactionType=\"hover\"\n        title={currentLabel}\n        triggerComponent={Component}\n        placement=\"bottom\"\n      />\n    ) : (\n      Component\n    );\n\n  const grayTrack = (\n    <circle\n      className={classNameElement('track')}\n      cx=\"50%\"\n      cy=\"50%\"\n      fill=\"none\"\n      r=\"28\"\n      strokeWidth={`${trackWidth}px`}\n    />\n  );\n\n  const grayArc = (\n    <circle\n      className={classNameElement('arc-gray')}\n      stroke=\"#E0E3E8\"\n      strokeDasharray={`${grayArcStrokeDasharray}`}\n      strokeDashoffset={`${grayArcStrokeDashoffset}`}\n      cx=\"50%\"\n      cy=\"50%\"\n      fill=\"none\"\n      r=\"28\"\n      strokeWidth={`${trackWidth}px`}\n    />\n  );\n\n  const indicator = (\n    <svg\n      height={`${sizePx}px`}\n      version=\"1.1\"\n      viewBox=\"0 0 66 66\"\n      width={`${sizePx}px`}\n      data-testid=\"circular-indicator\"\n    >\n      <defs>\n        <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n          <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n        </linearGradient>\n        <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n        </linearGradient>\n        <marker\n          id=\"inverseL\"\n          viewBox=\"0 0 5 10\"\n          refX=\"0.5\"\n          refY={`${markerRefY}`}\n          markerUnits=\"strokeWidth\"\n          markerWidth=\"0.5\"\n          markerHeight={`${markerHeight}`}\n          orient=\"auto\"\n        >\n          <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n        </marker>\n        <marker\n          id=\"inverseR\"\n          viewBox=\"0 0 5 10\"\n          refX=\"0\"\n          refY=\"5\"\n          markerUnits=\"strokeWidth\"\n          markerWidth=\"0.7\"\n          markerHeight={`${markerHeight}`}\n        >\n          <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n        </marker>\n      </defs>\n      {grayTrack}\n      {!waiting && (\n        <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n          <path\n            className={classNameElement('arc-blue')}\n            d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n            stroke=\"#5594e2\"\n            strokeWidth={`${strokeWidth - 0.5}px`}\n            strokeLinecap=\"round\"\n            data-testid=\"circular-indicator-blue-arc\"\n          />\n          <path\n            className={classNameElement('arc-white')}\n            d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n            stroke=\"#FFF\"\n            strokeWidth={`${strokeWidth + 2}px`}\n            markerStart=\"url(#inverseR)\"\n            markerEnd=\"url(#inverseL)\"\n          />\n          {grayArc}\n        </g>\n      )}\n    </svg>\n  );\n\n  return (\n    <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n      {buildIndicator(indicator)}\n      {showLabel && labelText}\n    </div>\n  );\n};\n\nCircularProgressIndicator.defaultProps = {\n  size: 'm',\n  showLabel: false,\n  showTooltip: false,\n  waiting: false,\n  loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n    .description('Defines the size of the indicator')\n    .defaultValue('m'),\n  showLabel: PropTypes.bool\n    .description('Wheter the indicator displays its state on a label or not')\n    .defaultValue(false),\n  showTooltip: PropTypes.bool\n    .description('Wheter the indicator displays its state on a tooltip or not')\n    .defaultValue(false),\n  waiting: PropTypes.bool\n    .description('Defines the state of the indicator as Waiting and only displays the gray track')\n    .defaultValue(false),\n  loading: PropTypes.bool\n    .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n    .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\nCircularProgressIndicator.displayName = 'CircularProgressIndicator';\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/v2/DSCircularIndeterminateIndicator.js

@@ -14,11 +14,23 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import * as React from "react";
 import React2, { useMemo } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { DSTooltipV3 } from "@elliemae/ds-tooltip";
-import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
 import { uid } from "uid";
 import {
   CircularIndeterminateIndicatorPropTypes,
@@ -26,24 +38,27 @@ import {
 } from "./react-desc-prop-types";
 import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants";
 import { StyledCircle, StyledPath, StyledRect, StyledSvg } from "./styled";
+const EmptyComp = (props) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, props.children);
 const DSCircularIndeterminateIndicator = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
+  const _a = useGetGlobalAttributes(propsWithDefault), { height, width, rows, cols } = _a, globalAttributes = __objRest(_a, ["height", "width", "rows", "cols"]);
   const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;
-  const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children), [withTooltip]);
+  const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
   const uniqueId = useMemo(() => uid(16), []);
   const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
   return /* @__PURE__ */ React2.createElement(Grid, __spreadValues({
     gutter: "xs",
     justifyContent: "center",
-    role: "status"
+    role: "status",
+    "aria-label": text || "Loading..."
   }, globalAttributes), /* @__PURE__ */ React2.createElement(Wrapper, {
     text,
     textAlign: "center",
     startPlacementPreference: tooltipStartPlacementPreference
   }, /* @__PURE__ */ React2.createElement(StyledSvg, {
     width: sizeToPx[size],
-    height: sizeToPx[size]
+    height: sizeToPx[size],
+    __duration
   }, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("clipPath", {
     id: `not-gradient-clip-${uniqueId}`
   }, /* @__PURE__ */ React2.createElement(StyledRect, {
@@ -88,6 +103,7 @@ const DSCircularIndeterminateIndicator = (props) => {
   }, text)));
 };
 DSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;
+DSCircularIndeterminateIndicator.displayName = "DSCircularIndeterminateIndicator";
 const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);
 DSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;
 export {

package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { PropsWithChildren, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport {\n  DSCircularIndeterminateIndicatorT,\n  CircularIndeterminateIndicatorPropTypes,\n  defaultProps,\n} from './react-desc-prop-types';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled';\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n  props,\n) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSCircularIndeterminateIndicatorT.Props>>(\n    props,\n    defaultProps,\n  );\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(\n    () => (withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>),\n    [withTooltip],\n  );\n\n  const uniqueId = useMemo(() => uid(16), []);\n\n  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n  return (\n    <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" {...globalAttributes}>\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]}>\n          <defs>\n            <clipPath id={`not-gradient-clip-${uniqueId}`}>\n              <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" __duration={__duration} />\n            </clipPath>\n            <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n              <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n              <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n            </linearGradient>\n          </defs>\n          <StyledCircle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={circleRadius}\n            strokeWidth={sizeToWeight[size]}\n            stroke={colorToHex[color]}\n            strokeLinecap=\"round\"\n            clipPath={`url(#not-gradient-clip-${uniqueId})`}\n            __duration={__duration}\n          />\n          {/* \n            Here we are using a path because:\n            - Flexible enough to build a circle\n            - When rotating, the gradient follows the rotation!!! (This is key)\n            - We can use the rotation with keyframes, allowing for custom timing\n            \n            Using a circle does not pass point 2.\n            Animating the gradient is not posible with custom timings.\n            This is the best solution without using a custom library.\n          */}\n          <StyledPath\n            d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n                m ${circleRadius}, 0\n                a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n            strokeWidth={sizeToWeight[size]}\n            fill=\"transparent\"\n            stroke={`url(#gradient-color-${uniqueId})`}\n            strokeLinecap=\"round\"\n            r={circleRadius}\n            __duration={__duration}\n          />\n        </StyledSvg>\n        {text !== '' && showText && (\n          <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n            {text}\n          </span>\n        )}\n      </Wrapper>\n    </Grid>\n  );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\n\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAKA;AACA;AAEO,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB,6BACvB,OACA;AAEF,QAAM,mBAAmB,uBAAuB;AAEhD,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,iCAAiC,eAAe;AAElG,QAAM,UAA8B,QAClC,MAAO,cAAc,cAAc,CAAC,EAAE,eAA2C,4DAAG,WACpF,CAAC;AAGH,QAAM,WAAW,QAAQ,MAAM,IAAI,KAAK;AAExC,QAAM,eAAe,QAAQ,MAAO,UAAS,QAAQ,OAAO,SAAS,aAAa,OAAO,OAAO,GAAG,CAAC;AAEpG,SACE,qCAAC,MAAD;AAAA,IAAM,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,KAAa,mBAC1D,qCAAC,SAAD;AAAA,IAAS;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,qCAAC,WAAD;AAAA,IAAW,OAAO,SAAS;AAAA,IAAO,QAAQ,SAAS;AAAA,KACjD,qCAAC,QAAD,MACE,qCAAC,YAAD;AAAA,IAAU,IAAI,qBAAqB;AAAA,KACjC,qCAAC,YAAD;AAAA,IAAY,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,OAAM;AAAA,IAAM,QAAO;AAAA,IAAO;AAAA,OAEtD,qCAAC,kBAAD;AAAA,IAAgB,IAAI,kBAAkB;AAAA,IAAY,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,KAC3E,qCAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,MAC5C,qCAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,QAGhD,qCAAC,cAAD;AAAA,IACE,IAAG;AAAA,IACH,IAAG;AAAA,IACH,GAAG;AAAA,IACH,aAAa,aAAa;AAAA,IAC1B,QAAQ,WAAW;AAAA,IACnB,eAAc;AAAA,IACd,UAAU,0BAA0B;AAAA,IACpC;AAAA,MAYF,qCAAC,YAAD;AAAA,IACE,GAAG,KAAK,SAAS,QAAQ,KAAK,SAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,IAClE,aAAa,aAAa;AAAA,IAC1B,MAAK;AAAA,IACL,QAAQ,uBAAuB;AAAA,IAC/B,eAAc;AAAA,IACd,GAAG;AAAA,IACH;AAAA,OAGH,SAAS,MAAM,YACd,qCAAC,QAAD;AAAA,IAAM,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,eAAe;AAAA,KACzF;AAAA;AAQb,iCAAiC,YAAY;AAEtC,MAAM,6CAA6C,SAAS;AACnE,2CAA2C,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport {\n  DSCircularIndeterminateIndicatorT,\n  CircularIndeterminateIndicatorPropTypes,\n  defaultProps,\n} from './react-desc-prop-types';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n  props,\n) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSCircularIndeterminateIndicatorT.Props>>(\n    props,\n    defaultProps,\n  );\n  const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n  const uniqueId = useMemo(() => uid(16), []);\n\n  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n  return (\n    <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]} __duration={__duration}>\n          <defs>\n            <clipPath id={`not-gradient-clip-${uniqueId}`}>\n              <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" __duration={__duration} />\n            </clipPath>\n            <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n              <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n              <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n            </linearGradient>\n          </defs>\n          <StyledCircle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={circleRadius}\n            strokeWidth={sizeToWeight[size]}\n            stroke={colorToHex[color]}\n            strokeLinecap=\"round\"\n            clipPath={`url(#not-gradient-clip-${uniqueId})`}\n            __duration={__duration}\n          />\n          {/* \n            Here we are using a path because:\n            - Flexible enough to build a circle\n            - When rotating, the gradient follows the rotation!!! (This is key)\n            - We can use the rotation with keyframes, allowing for custom timing\n            \n            Using a circle does not pass point 2.\n            Animating the gradient is not posible with custom timings.\n            This is the best solution without using a custom library.\n          */}\n          <StyledPath\n            d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n                m ${circleRadius}, 0\n                a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n            strokeWidth={sizeToWeight[size]}\n            fill=\"transparent\"\n            stroke={`url(#gradient-color-${uniqueId})`}\n            strokeLinecap=\"round\"\n            r={circleRadius}\n            __duration={__duration}\n          />\n        </StyledSvg>\n        {text !== '' && showText && (\n          <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n            {text}\n          </span>\n        )}\n      </Wrapper>\n    </Grid>\n  );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = 'DSCircularIndeterminateIndicator';\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAKA;AACA;AAGA,MAAM,YAAgC,CAAC,UAAU,4DAAG,MAAM,QAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB,6BACvB,OACA,YACF;AACA,QAA2D,4BAAuB,gBAAgB,GAA1F,UAAQ,OAAO,MAAM,SAA8B,IAArB,6BAAqB,IAArB,CAA9B,UAAQ,SAAO,QAAM;AAE7B,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,iCAAiC,eAAe;AAElG,QAAM,UAA8B,QAAQ,MAAO,cAAc,cAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,WAAW,QAAQ,MAAM,IAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,eAAe,QAAQ,MAAO,UAAS,QAAQ,OAAO,SAAS,aAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,IAAS,cAAY,QAAQ;AAAA,KAAkB,mBAC5F,qCAAC;AAAA,IAAQ;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,qCAAC;AAAA,IAAU,OAAO,SAAS;AAAA,IAAO,QAAQ,SAAS;AAAA,IAAO;AAAA,KACxD,qCAAC,cACC,qCAAC;AAAA,IAAS,IAAI,qBAAqB;AAAA,KACjC,qCAAC;AAAA,IAAW,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,OAAM;AAAA,IAAM,QAAO;AAAA,IAAO;AAAA,GAAwB,CAC9E,GACA,qCAAC;AAAA,IAAe,IAAI,kBAAkB;AAAA,IAAY,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,KAC3E,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,GAAY,GACxD,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,GAAY,CAC1D,CACF,GACA,qCAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,GAAG;AAAA,IACH,aAAa,aAAa;AAAA,IAC1B,QAAQ,WAAW;AAAA,IACnB,eAAc;AAAA,IACd,UAAU,0BAA0B;AAAA,IACpC;AAAA,GACF,GAWA,qCAAC;AAAA,IACC,GAAG,KAAK,SAAS,QAAQ,KAAK,SAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,IAClE,aAAa,aAAa;AAAA,IAC1B,MAAK;AAAA,IACL,QAAQ,uBAAuB;AAAA,IAC/B,eAAc;AAAA,IACd,GAAG;AAAA,IACH;AAAA,GACF,CACF,GACC,SAAS,MAAM,YACd,qCAAC;AAAA,IAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,eAAe,MAAM;AAAA,KAC/F,IACH,CAEJ,CACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,6CAA6C,SAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
   "names": []
 }

package/dist/esm/v2/constants.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/constants.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const sizeToPx = {\n  xs: 16,\n  s: 24,\n  m: 32,\n  l: 48,\n  xl: 56,\n  xxl: 64,\n};\n\nexport const sizeToWeight = {\n  xs: '3px',\n  s: '3px',\n  m: '3px',\n  l: '4px',\n  xl: '5px',\n  xxl: '6px',\n};\n\nexport const colorToHex = {\n  light: '#EBF6FF',\n  dark: '#1394E5',\n};\n\nexport const sizeToTextSize = {\n  xs: '12px',\n  s: '12px',\n  m: '12px',\n  l: '13px',\n  xl: '14px',\n  xxl: '16px',\n};\n"],
-  "mappings": "AAAA;ACAO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;",
+  "mappings": "AAAA;ACAO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;",
   "names": []
 }

package/dist/esm/v2/react-desc-prop-types.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
-import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
+import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-utilities";
 const CircularIndeterminateIndicatorPropTypes = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
   size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
   color: PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
@@ -47,7 +47,7 @@ const defaultProps = {
   showText: true,
   withTooltip: false,
   tooltipStartPlacementPreference: "bottom",
-  __duration: 4
+  __duration: 10
 };
 export {
   CircularIndeterminateIndicatorPropTypes,

package/dist/esm/v2/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { WeakValidationMap } from 'react';\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n  interface Props {\n    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n    color?: 'light' | 'dark';\n    text?: string;\n    showText?: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference?:\n      | 'top-start'\n      | 'top'\n      | 'top-end'\n      | 'right-start'\n      | 'right'\n      | 'right-end'\n      | 'bottom-end'\n      | 'bottom'\n      | 'bottom-start'\n      | 'left-end'\n      | 'left'\n      | 'left-start';\n    __duration: number;\n  }\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n  ...globalAttributesPropTypes,\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n  color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n  text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n  showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n  withTooltip: PropTypes.bool\n    .description('Whether to include a tooltip that shows the optional text on hover')\n    .defaultValue(false),\n  tooltipStartPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preference for the tooltip')\n    .defaultValue('center'),\n} as WeakValidationMap<unknown>;\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.Props = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n  __duration: 4,\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AA2BO,MAAM,0CAA0C,iCAClD,4BADkD;AAAA,EAErD,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,UAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,UAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,UAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,UAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,iCAAiC,UAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,YAAY,8CACZ,aAAa;AAAA;AAGX,MAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AAAA,EACjC,YAAY;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n  interface Props {\n    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n    color?: 'light' | 'dark';\n    text?: string;\n    showText?: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference?:\n      | 'top-start'\n      | 'top'\n      | 'top-end'\n      | 'right-start'\n      | 'right'\n      | 'right-end'\n      | 'bottom-end'\n      | 'bottom'\n      | 'bottom-start'\n      | 'left-end'\n      | 'left'\n      | 'left-start';\n    __duration: number;\n  }\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n  ...globalAttributesPropTypes,\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n  color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n  text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n  showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n  withTooltip: PropTypes.bool\n    .description('Whether to include a tooltip that shows the optional text on hover')\n    .defaultValue(false),\n  tooltipStartPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preference for the tooltip')\n    .defaultValue('center'),\n} as WeakValidationMap<unknown>;\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.Props = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n  __duration: 10,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AA2BO,MAAM,0CAA0C,iCAClD,4BADkD;AAAA,EAErD,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,UAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,UAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,UAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;AAEO,MAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AAAA,EACjC,YAAY;AACd;",
   "names": []
 }

package/dist/esm/v2/styled.js

@@ -3,6 +3,14 @@ import styled from "styled-components";
 import { kfrm } from "@elliemae/ds-system";
 const { PI } = Math;
 const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
+const svgRotateAnimation = kfrm`
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+`;
 const strokeTailAnimation = (r) => {
   const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
   const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
@@ -82,6 +90,7 @@ const StyledSvg = styled.svg`
   margin: auto;
   transform-origin: center center;
   transform: rotate(-90deg);
+  animation: ${svgRotateAnimation} ${(props) => props.__duration / 4}s linear infinite;
 `;
 const StyledPath = styled.path`
   transform-origin: center center;

package/dist/esm/v2/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\n\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst strokeTailAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n    }\n    50% {\n        stroke-dasharray: ${fullDash};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n    }\n`;\n};\n\nconst rotateAnimation = kfrm`\n    0%, 12.5% {\n        transform: rotate(0);\n    }\n    25%, 37.5% {\n        transform: rotate(270deg);\n    }\n    50%, 62.5% {\n        transform: rotate(540deg);\n    }\n    75%, 87.5% {\n        transform: rotate(810deg);\n    }\n    100% {\n        transform: rotate(1080deg);\n    }\n`;\n\nconst dashAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: 0;\n    }\n    12.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: 0;\n    }\n    25% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    37.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    50% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    62.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    75% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    87.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-300, r)};\n    }\n`;\n};\n\nexport const StyledSvg = styled.svg`\n  display: block;\n  margin: auto;\n  transform-origin: center center;\n  transform: rotate(-90deg);\n`;\n\nexport const StyledPath = styled.path<{ __duration: number; r: number }>`\n  transform-origin: center center;\n  animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite,\n    ${(props) => strokeTailAnimation(props.r)} ${(props) => props.__duration / 4}s linear infinite;\n`;\n\nexport const StyledRect = styled.rect<{ __duration: number }>`\n  transform-origin: center center;\n  animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number; __duration: number }>`\n  stroke-dashoffset: 0;\n  fill: none;\n  animation: ${(props) => dashAnimation(props.r)} ${(props) => props.__duration}s linear infinite;\n  clip-path: ${(props) => props.clipPath};\n  -webkit-clip-path: ${(props) => props.clipPath};\n`;\n"],
-  "mappings": "AAAA;ACCA;AACA;AAEA,MAAM,EAAE,OAAO;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA;AAK5B,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA;AAKzC,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA,MAC7C,CAAC,UAAU,oBAAoB,MAAM,MAAM,CAAC,UAAU,MAAM,aAAa;AAAA;AAGxE,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA;AAG5C,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,MAAM,CAAC,UAAU,MAAM;AAAA,eACtD,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\n\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst svgRotateAnimation = kfrm`\n    0% {\n        transform: rotate(0);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n`;\n\nconst strokeTailAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n    }\n    50% {\n        stroke-dasharray: ${fullDash};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n    }\n`;\n};\n\nconst rotateAnimation = kfrm`\n    0%, 12.5% {\n        transform: rotate(0);\n    }\n    25%, 37.5% {\n        transform: rotate(270deg);\n    }\n    50%, 62.5% {\n        transform: rotate(540deg);\n    }\n    75%, 87.5% {\n        transform: rotate(810deg);\n    }\n    100% {\n        transform: rotate(1080deg);\n    }\n`;\n\nconst dashAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: 0;\n    }\n    12.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: 0;\n    }\n    25% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    37.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    50% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    62.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    75% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    87.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-300, r)};\n    }\n`;\n};\n\nexport const StyledSvg = styled.svg<{ __duration: number }>`\n  display: block;\n  margin: auto;\n  transform-origin: center center;\n  transform: rotate(-90deg);\n  animation: ${svgRotateAnimation} ${(props) => props.__duration / 4}s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ __duration: number; r: number }>`\n  transform-origin: center center;\n  animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite,\n    ${(props) => strokeTailAnimation(props.r)} ${(props) => props.__duration / 4}s linear infinite;\n`;\n\nexport const StyledRect = styled.rect<{ __duration: number }>`\n  transform-origin: center center;\n  animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number; __duration: number }>`\n  stroke-dashoffset: 0;\n  fill: none;\n  animation: ${(props) => dashAnimation(props.r)} ${(props) => props.__duration}s linear infinite;\n  clip-path: ${(props) => props.clipPath};\n  -webkit-clip-path: ${(props) => props.clipPath};\n`;\n"],
+  "mappings": "AAAA;ACCA;AACA;AAEA,MAAM,EAAE,OAAO;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAG5B;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAGjD;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB,sBAAsB,CAAC,UAAU,MAAM,aAAa;AAAA;AAG5D,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA,MAC7C,CAAC,UAAU,oBAAoB,MAAM,CAAC,KAAK,CAAC,UAAU,MAAM,aAAa;AAAA;AAGxE,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA;AAG5C,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC,KAAK,CAAC,UAAU,MAAM;AAAA,eACtD,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-circular-progress-indicator",
-  "version": "3.0.0-next.9",
+  "version": "3.0.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Circular progress indicator",
   "files": [
@@ -50,10 +50,17 @@
     "reportFile": "tests.xml",
     "indent": 4
   },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
+  },
   "dependencies": {
-    "@elliemae/ds-classnames": "3.0.0-next.9",
-    "@elliemae/ds-props-helpers": "3.0.0-next.9",
-    "@elliemae/ds-tooltip": "3.0.0-next.9",
+    "@elliemae/ds-classnames": "workspace:*",
+    "@elliemae/ds-tooltip": "workspace:*",
+    "@elliemae/ds-utilities": "workspace:*",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
@@ -67,12 +74,5 @@
   "publishConfig": {
     "access": "public",
     "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
-    "test": "node ../../scripts/testing/test.mjs",
-    "lint": "node ../../scripts/lint.mjs",
-    "dts": "node ../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
-}
+}