@elliemae/ds-circular-progress-indicator 2.3.1-rc.2 → 3.0.0-alpha.2

package/dist/esm/v2/constants.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+const sizeToPx = {
+  xs: 16,
+  s: 24,
+  m: 32,
+  l: 48,
+  xl: 56,
+  xxl: 64
+};
+const sizeToWeight = {
+  xs: "3px",
+  s: "3px",
+  m: "3px",
+  l: "4px",
+  xl: "5px",
+  xxl: "6px"
+};
+const colorToHex = {
+  light: "#EBF6FF",
+  dark: "#1394E5"
+};
+const sizeToTextSize = {
+  xs: "12px",
+  s: "12px",
+  m: "12px",
+  l: "13px",
+  xl: "14px",
+  xxl: "16px"
+};
+export {
+  colorToHex,
+  sizeToPx,
+  sizeToTextSize,
+  sizeToWeight
+};
+//# sourceMappingURL=constants.js.map

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

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

package/dist/esm/v2/index.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import {
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema
+} from "./DSCircularIndeterminateIndicator";
+export {
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,56 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
+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"),
+  text: PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
+  showText: PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
+  withTooltip: PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
+  tooltipStartPlacementPreference: 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")
+});
+const defaultProps = {
+  size: "m",
+  color: "dark",
+  text: "",
+  showText: true,
+  withTooltip: false,
+  tooltipStartPlacementPreference: "bottom",
+  __duration: 4
+};
+export {
+  CircularIndeterminateIndicatorPropTypes,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

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

package/dist/esm/v2/styled.js

@@ -0,0 +1,108 @@
+import * as React from "react";
+import styled from "styled-components";
+import { kfrm } from "@elliemae/ds-system";
+const { PI } = Math;
+const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
+const strokeTailAnimation = (r) => {
+  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
+  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
+  return kfrm`
+    0% {
+        stroke-dasharray: ${miniDash};
+    }
+    50% {
+        stroke-dasharray: ${fullDash};
+    }
+    100% {
+        stroke-dasharray: ${miniDash};
+    }
+`;
+};
+const rotateAnimation = kfrm`
+    0%, 12.5% {
+        transform: rotate(0);
+    }
+    25%, 37.5% {
+        transform: rotate(270deg);
+    }
+    50%, 62.5% {
+        transform: rotate(540deg);
+    }
+    75%, 87.5% {
+        transform: rotate(810deg);
+    }
+    100% {
+        transform: rotate(1080deg);
+    }
+`;
+const dashAnimation = (r) => {
+  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
+  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
+  return kfrm`
+    0% {
+        stroke-dasharray: ${miniDash};
+        stroke-dashoffset: 0;
+    }
+    12.5% {
+        stroke-dasharray: ${fullDash};
+        stroke-dashoffset: 0;
+    }
+    25% {
+        stroke-dasharray: ${miniDash};
+        stroke-dashoffset: ${getArcLength(-75, r)};
+    }
+    37.5% {
+        stroke-dasharray: ${fullDash};
+        stroke-dashoffset: ${getArcLength(-75, r)};
+    }
+    50% {
+        stroke-dasharray: ${miniDash};
+        stroke-dashoffset: ${getArcLength(-150, r)};
+    }
+    62.5% {
+        stroke-dasharray: ${fullDash};
+        stroke-dashoffset: ${getArcLength(-150, r)};
+    }
+    75% {
+        stroke-dasharray: ${miniDash};
+        stroke-dashoffset: ${getArcLength(-225, r)};
+    }
+    87.5% {
+        stroke-dasharray: ${fullDash};
+        stroke-dashoffset: ${getArcLength(-225, r)};
+    }
+    100% {
+        stroke-dasharray: ${miniDash};
+        stroke-dashoffset: ${getArcLength(-300, r)};
+    }
+`;
+};
+const StyledSvg = styled.svg`
+  display: block;
+  margin: auto;
+  transform-origin: center center;
+  transform: rotate(-90deg);
+`;
+const StyledPath = styled.path`
+  transform-origin: center center;
+  animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite,
+    ${(props) => strokeTailAnimation(props.r)} ${(props) => props.__duration / 4}s linear infinite;
+`;
+const StyledRect = styled.rect`
+  transform-origin: center center;
+  animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite;
+`;
+const StyledCircle = styled.circle`
+  stroke-dashoffset: 0;
+  fill: none;
+  animation: ${(props) => dashAnimation(props.r)} ${(props) => props.__duration}s linear infinite;
+  clip-path: ${(props) => props.clipPath};
+  -webkit-clip-path: ${(props) => props.clipPath};
+`;
+export {
+  StyledCircle,
+  StyledPath,
+  StyledRect,
+  StyledSvg
+};
+//# sourceMappingURL=styled.js.map

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

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

package/package.json

@@ -1,39 +1,34 @@
 {
   "name": "@elliemae/ds-circular-progress-indicator",
-  "version": "2.3.1-rc.2",
+  "version": "3.0.0-alpha.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Circular progress indicator",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
-    },
-    "./v2/styled": {
-      "import": "./esm/v2/styled.js",
-      "require": "./cjs/v2/styled.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./v2/react-desc-prop-types": {
-      "import": "./esm/v2/react-desc-prop-types.js",
-      "require": "./cjs/v2/react-desc-prop-types.js"
+      "import": "./dist/esm/v2/react-desc-prop-types.js",
+      "require": "./dist/cjs/v2/react-desc-prop-types.js"
     },
     "./v2": {
-      "import": "./esm/v2/index.js",
-      "require": "./cjs/v2/index.js"
+      "import": "./dist/esm/v2/index.js",
+      "require": "./dist/cjs/v2/index.js"
     },
     "./v2/DSCircularIndeterminateIndicator": {
-      "import": "./esm/v2/DSCircularIndeterminateIndicator.js",
-      "require": "./cjs/v2/DSCircularIndeterminateIndicator.js"
-    },
-    "./v2/constants": {
-      "import": "./esm/v2/constants.js",
-      "require": "./cjs/v2/constants.js"
+      "import": "./dist/esm/v2/DSCircularIndeterminateIndicator.js",
+      "require": "./dist/cjs/v2/DSCircularIndeterminateIndicator.js"
     },
     "./DSCircularProgressIndicator": {
-      "import": "./esm/DSCircularProgressIndicator.js",
-      "require": "./cjs/DSCircularProgressIndicator.js"
+      "import": "./dist/esm/DSCircularProgressIndicator.js",
+      "require": "./dist/cjs/DSCircularProgressIndicator.js"
     }
   },
   "sideEffects": [
@@ -45,37 +40,39 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "author": "ICE MT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.3.1-rc.2",
-    "@elliemae/ds-grid": "2.3.1-rc.2",
-    "@elliemae/ds-props-helpers": "2.3.1-rc.2",
-    "@elliemae/ds-system": "2.3.1-rc.2",
-    "@elliemae/ds-tooltip": "2.3.1-rc.2",
-    "react-desc": "~4.1.3",
-    "uid": "~2.0.0"
+    "@elliemae/ds-classnames": "3.0.0-alpha.2",
+    "@elliemae/ds-props-helpers": "3.0.0-alpha.2",
+    "@elliemae/ds-tooltip": "3.0.0-alpha.2",
+    "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/jest-dom": "~5.15.1",
     "@testing-library/react": "~12.1.2"
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3"
+    "react-dom": "^17.0.2"
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "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"
   }
 }

package/cjs/DSCircularProgressIndicator.js

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

package/cjs/index.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DSCircularProgressIndicator = require('./DSCircularProgressIndicator.js');
-var DSCircularIndeterminateIndicator = require('./v2/DSCircularIndeterminateIndicator.js');
-
-
-
-exports.CircularProgressIndicatorWithSchema = DSCircularProgressIndicator.CircularProgressIndicatorWithSchema;
-exports.DSCircularProgressIndicator = DSCircularProgressIndicator["default"];
-exports["default"] = DSCircularProgressIndicator["default"];
-exports.DSCircularIndeterminateIndicator = DSCircularIndeterminateIndicator.DSCircularIndeterminateIndicator;
-exports.DSCircularIndeterminateIndicatorWithSchema = DSCircularIndeterminateIndicator.DSCircularIndeterminateIndicatorWithSchema;