@elliemae/ds-circular-progress-indicator 2.2.0-next.6 → 2.3.0-alpha.1

package/esm/DSCircularProgressIndicator.js

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

package/esm/DSCircularProgressIndicator.js.map

@@ -0,0 +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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",
+  "names": []
+}

package/esm/index.js

@@ -1,2 +1,12 @@
-export { CircularProgressIndicatorWithSchema, default as DSCircularProgressIndicator, default } from './DSCircularProgressIndicator.js';
-export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2/DSCircularProgressIndicatorV2.js';
+import * as React from "react";
+import {
+  default as default2,
+  default as default3,
+  CircularProgressIndicatorWithSchema
+} from "./DSCircularProgressIndicator";
+export {
+  CircularProgressIndicatorWithSchema,
+  default3 as DSCircularProgressIndicator,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/named */\nexport {\n  default,\n  default as DSCircularProgressIndicator,\n  CircularProgressIndicatorWithSchema,\n} from './DSCircularProgressIndicator';\n"],
+  "mappings": "AAAA;ACCA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-circular-progress-indicator",
-  "version": "2.2.0-next.6",
+  "version": "2.3.0-alpha.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Circular progress indicator",
   "module": "./esm/index.js",
@@ -11,18 +11,6 @@
       "import": "./esm/index.js",
       "require": "./cjs/index.js"
     },
-    "./v2/react-desc-prop-types": {
-      "import": "./esm/v2/react-desc-prop-types.js",
-      "require": "./cjs/v2/react-desc-prop-types.js"
-    },
-    "./v2": {
-      "import": "./esm/v2/index.js",
-      "require": "./cjs/v2/index.js"
-    },
-    "./v2/DSCircularProgressIndicatorV2": {
-      "import": "./esm/v2/DSCircularProgressIndicatorV2.js",
-      "require": "./cjs/v2/DSCircularProgressIndicatorV2.js"
-    },
     "./DSCircularProgressIndicator": {
       "import": "./esm/DSCircularProgressIndicator.js",
       "require": "./cjs/DSCircularProgressIndicator.js"
@@ -48,8 +36,8 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.2.0-next.6",
-    "@elliemae/ds-tooltip": "2.2.0-next.6",
+    "@elliemae/ds-classnames": "2.3.0-alpha.1",
+    "@elliemae/ds-tooltip": "2.3.0-alpha.1",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {

package/types/DSCircularProgressIndicator.d.ts

@@ -34,13 +34,7 @@ declare const CircularProgressIndicator: {
     };
 };
 declare const CircularProgressIndicatorWithSchema: {
-    (props?: {
-        size: any;
-        showLabel: any;
-        showTooltip: any;
-        waiting: any;
-        loading: any;
-    } | undefined): JSX.Element;
+    (props?: unknown): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };

package/types/index.d.ts

@@ -1,2 +1 @@
 export { default, default as DSCircularProgressIndicator, CircularProgressIndicatorWithSchema, } from './DSCircularProgressIndicator';
-export * from './v2';

package/cjs/v2/DSCircularProgressIndicatorV2.js

@@ -1,132 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-require('react');
-var dsGrid = require('@elliemae/ds-grid');
-var DSTooltip = require('@elliemae/ds-tooltip');
-var reactDesc = require('react-desc');
-var styled = require('styled-components');
-var dsSystem = require('@elliemae/ds-system');
-var uid = require('uid');
-var reactDescPropTypes = require('./react-desc-prop-types.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject, _templateObject2, _circle;
-const r = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["to { transform: rotate(2turn) }"])));
-const s = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["0%, 39% { stroke-dasharray: 942px 2826px }"])));
-const StyledSvg = /*#__PURE__*/styled__default["default"].svg.withConfig({
-  componentId: "sc-1x34z2a-0"
-})(["#gg{transform:rotate(45deg);stroke:url(#", ");mask:url(#", ");}mask use{stroke:#fff;stroke-linecap:round;stroke-dasharray:942px 2826px;animation:", " 1.5s cubic-bezier(0.5,-0.43,0.5,1.43) infinite,", " 0.75s ease-in-out infinite alternate;}"], props => props.linearGradientUid, props => props.maskUid, r, s);
-const sizeToPx = {
-  xs: '16px',
-  s: '24px',
-  m: '32px',
-  l: '48px',
-  xl: '56px',
-  xxl: '64px'
-};
-const sizeToWeight = {
-  xs: '10%',
-  s: '9%',
-  m: '8%',
-  l: '6%',
-  xl: '5%',
-  xxl: '4%'
-};
-const colorToHex = {
-  light: '#FFFFFF',
-  dark: '#0F364A'
-};
-const sizeToTextSize = {
-  xs: '12px',
-  s: '12px',
-  m: '12px',
-  l: '13px',
-  xl: '14px',
-  xxl: '16px'
-};
-const DSCircularIndeterminateIndicator = _ref => {
-  let {
-    size = 'm',
-    color = 'dark',
-    text = '',
-    showText = true,
-    withTooltip = false,
-    tooltipStartPlacementPreference = 'bottom'
-  } = _ref;
-  const Wrapper = withTooltip ? DSTooltip.DSTooltipV3 : _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: children
-    });
-  };
-  const linearGradientUid = uid.uid(16);
-  const maskUid = uid.uid(16);
-  const circleUid = uid.uid(16);
-  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-    gutter: "xs",
-    justifyContent: "center",
-    role: "status"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Wrapper, {
-    text: text,
-    textAlign: "center",
-    startPlacementPreference: tooltipStartPlacementPreference
-  }, void 0, /*#__PURE__*/_jsx__default["default"](StyledSvg, {
-    viewBox: "-1950 -975 3900 1950",
-    fill: "none",
-    stroke: "transparent",
-    strokeWidth: sizeToWeight[size],
-    width: sizeToPx[size],
-    height: sizeToPx[size],
-    style: {
-      display: 'block',
-      margin: 'auto'
-    },
-    linearGradientUid: linearGradientUid,
-    maskUid: maskUid
-  }, void 0, /*#__PURE__*/_jsx__default["default"]("g", {
-    transform: "scale(2.298)"
-  }, void 0, /*#__PURE__*/_jsx__default["default"]("linearGradient", {
-    id: linearGradientUid
-  }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
-    stopColor: color === 'dark' ? '#48a3ff' : '#ccd6ff'
-  }), /*#__PURE__*/_jsx__default["default"]("stop", {
-    stopColor: color === 'dark' ? '#49d0ff' : '#ebf6ff',
-    offset: "1"
-  })), /*#__PURE__*/_jsx__default["default"]("mask", {
-    id: maskUid
-  }, void 0, _circle || (_circle = /*#__PURE__*/_jsx__default["default"]("circle", {
-    r: "1200",
-    fill: "#000"
-  })), /*#__PURE__*/_jsx__default["default"]("use", {
-    xlinkHref: "#".concat(circleUid)
-  })), /*#__PURE__*/_jsx__default["default"]("circle", {
-    id: circleUid,
-    r: "600"
-  }), /*#__PURE__*/_jsx__default["default"]("g", {
-    id: "gg"
-  }, void 0, /*#__PURE__*/_jsx__default["default"]("use", {
-    xlinkHref: "#".concat(circleUid)
-  })))), text !== '' && showText && /*#__PURE__*/_jsx__default["default"]("span", {
-    style: {
-      color: colorToHex[color],
-      fontSize: sizeToTextSize[size]
-    }
-  }, void 0, text)));
-};
-const DSCircularIndeterminateIndicatorWithSchema = reactDesc.describe(DSCircularIndeterminateIndicator);
-DSCircularIndeterminateIndicatorWithSchema.propTypes = reactDescPropTypes.CircularIndeterminateIndicatorPropTypes;
-
-exports.DSCircularIndeterminateIndicator = DSCircularIndeterminateIndicator;
-exports.DSCircularIndeterminateIndicatorWithSchema = DSCircularIndeterminateIndicatorWithSchema;

package/cjs/v2/index.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DSCircularProgressIndicatorV2 = require('./DSCircularProgressIndicatorV2.js');
-
-
-
-exports.DSCircularIndeterminateIndicator = DSCircularProgressIndicatorV2.DSCircularIndeterminateIndicator;
-exports.DSCircularIndeterminateIndicatorWithSchema = DSCircularProgressIndicatorV2.DSCircularIndeterminateIndicatorWithSchema;

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

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDesc = require('react-desc');
-
-/* eslint-disable max-lines */
-const CircularIndeterminateIndicatorPropTypes = {
-  size: reactDesc.PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),
-  color: reactDesc.PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),
-  text: reactDesc.PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),
-  showText: reactDesc.PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),
-  withTooltip: reactDesc.PropTypes.bool.description('Whether to include a tooltip that shows the optional text on hover').defaultValue(false),
-  tooltipStartPlacementPreference: reactDesc.PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preference for the tooltip').defaultValue('center')
-};
-
-exports.CircularIndeterminateIndicatorPropTypes = CircularIndeterminateIndicatorPropTypes;