@elliemae/ds-circular-progress-indicator 2.3.0-alpha.8 → 2.3.0-next.10

package/esm/DSCircularProgressIndicator.js

@@ -0,0 +1,258 @@
+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...';
+  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("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, {
+    containerProps: {
+      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'),
+    cx: "50%",
+    cy: "50%",
+    fill: "none",
+    r: "28",
+    strokeWidth: "".concat(trackWidth, "px")
+  });
+
+  const grayArc = /*#__PURE__*/_jsx("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("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("defs", {}, void 0, /*#__PURE__*/_jsx("linearGradient", {
+    id: "grad1",
+    x1: "0%",
+    x2: "100%",
+    y1: "100%",
+    y2: "0%"
+  }, void 0, /*#__PURE__*/_jsx("stop", {
+    offset: "0%",
+    style: {
+      stopColor: '#E0E3E8',
+      stopOpacity: 1
+    }
+  }), /*#__PURE__*/_jsx("stop", {
+    offset: "89%",
+    style: {
+      stopColor: '#5594e2',
+      stopOpacity: 1
+    }
+  }), /*#__PURE__*/_jsx("stop", {
+    offset: "100%",
+    style: {
+      stopColor: '#5594e2',
+      stopOpacity: 1
+    }
+  })), /*#__PURE__*/_jsx("linearGradient", {
+    id: "grad2",
+    x1: "0%",
+    x2: "100%",
+    y1: "100%",
+    y2: "0%"
+  }, void 0, /*#__PURE__*/_jsx("stop", {
+    offset: "0%",
+    style: {
+      stopColor: '#5594e2',
+      stopOpacity: 1
+    }
+  }), /*#__PURE__*/_jsx("stop", {
+    offset: "11%",
+    style: {
+      stopColor: '#5594e2',
+      stopOpacity: 1
+    }
+  }), /*#__PURE__*/_jsx("stop", {
+    offset: "100%",
+    style: {
+      stopColor: '#E0E3E8',
+      stopOpacity: 1
+    }
+  })), /*#__PURE__*/_jsx("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("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", {
+    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", {
+    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", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, void 0, /*#__PURE__*/_jsx("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("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("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: 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)
+};
+const CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);
+CircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;
+
+export { CircularProgressIndicatorWithSchema, CircularProgressIndicator as default };

package/esm/index.js

@@ -0,0 +1,2 @@
+export { CircularProgressIndicatorWithSchema, default as DSCircularProgressIndicator, default } from './DSCircularProgressIndicator.js';
+export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2/DSCircularIndeterminateIndicator.js';

package/esm/v2/DSCircularIndeterminateIndicator.js

@@ -0,0 +1,103 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useMemo } from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSTooltipV3 } from '@elliemae/ds-tooltip';
+import { describe, useMemoMergePropsWithDefault, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { uid } from 'uid';
+import { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';
+import { sizeToPx, sizeToWeight, colorToHex, sizeToTextSize } from './constants.js';
+import { StyledSvg, StyledRect, StyledCircle, StyledPath } from './styled.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const DSCircularIndeterminateIndicator = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
+  const {
+    size,
+    color,
+    text,
+    showText,
+    withTooltip,
+    tooltipStartPlacementPreference,
+    __duration
+  } = propsWithDefault;
+  const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : _ref => {
+    let {
+      children
+    } = _ref;
+    return /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+  }, [withTooltip]);
+  const uniqueId = useMemo(() => uid(16), []);
+  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
+  return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({
+    gutter: "xs",
+    justifyContent: "center",
+    role: "status"
+  }, globalAttributes), {}, {
+    children: /*#__PURE__*/_jsx(Wrapper, {
+      text: text,
+      textAlign: "center",
+      startPlacementPreference: tooltipStartPlacementPreference
+    }, void 0, /*#__PURE__*/_jsx(StyledSvg, {
+      width: sizeToPx[size],
+      height: sizeToPx[size]
+    }, void 0, /*#__PURE__*/_jsx("defs", {}, void 0, /*#__PURE__*/_jsx("clipPath", {
+      id: "not-gradient-clip-".concat(uniqueId)
+    }, void 0, /*#__PURE__*/_jsx(StyledRect, {
+      x: "0%",
+      y: "0%",
+      width: "52%",
+      height: "100%",
+      __duration: __duration
+    })), /*#__PURE__*/_jsx("linearGradient", {
+      id: "gradient-color-".concat(uniqueId),
+      x1: "0%",
+      x2: "0%",
+      y1: "0%",
+      y2: "100%"
+    }, void 0, /*#__PURE__*/_jsx("stop", {
+      offset: "10%",
+      stopColor: "".concat(colorToHex[color], "00")
+    }), /*#__PURE__*/_jsx("stop", {
+      offset: "90%",
+      stopColor: "".concat(colorToHex[color], "FF")
+    }))), /*#__PURE__*/_jsx(StyledCircle, {
+      cx: "50%",
+      cy: "50%",
+      r: circleRadius,
+      strokeWidth: sizeToWeight[size],
+      stroke: colorToHex[color],
+      strokeLinecap: "round",
+      clipPath: "url(#not-gradient-clip-".concat(uniqueId, ")"),
+      __duration: __duration
+    }), /*#__PURE__*/_jsx(StyledPath, {
+      d: "M ".concat(sizeToPx[size] / 2, " ").concat(sizeToPx[size] / 2, "\n                m ").concat(circleRadius, ", 0\n                a ").concat(circleRadius, ", ").concat(circleRadius, " 0 0, 1 -").concat(circleRadius, ", ").concat(circleRadius),
+      strokeWidth: sizeToWeight[size],
+      fill: "transparent",
+      stroke: "url(#gradient-color-".concat(uniqueId, ")"),
+      strokeLinecap: "round",
+      r: circleRadius,
+      __duration: __duration
+    })), text !== '' && showText && /*#__PURE__*/_jsx("span", {
+      style: {
+        color: color === 'light' ? '#FFFFFF' : '#25292F99',
+        fontSize: sizeToTextSize[size]
+      }
+    }, void 0, text))
+  }));
+};
+const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);
+DSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;
+
+export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema };

package/esm/v2/constants.js

@@ -0,0 +1,30 @@
+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 };

package/esm/v2/index.js

@@ -0,0 +1 @@
+export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './DSCircularIndeterminateIndicator.js';

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

@@ -0,0 +1,30 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const CircularIndeterminateIndicatorPropTypes = _objectSpread(_objectSpread({}, 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 };

package/esm/v2/styled.js

@@ -0,0 +1,39 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { kfrm } from '@elliemae/ds-system';
+
+var _templateObject, _templateObject2, _templateObject3;
+const {
+  PI
+} = Math;
+
+const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
+
+const strokeTailAnimation = r => {
+  const miniDash = "".concat(getArcLength(0, r), " ").concat(getArcLength(100, r));
+  const fullDash = "".concat(getArcLength(75, r), " ").concat(getArcLength(25, r));
+  return kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n        stroke-dasharray: ", ";\n    }\n    50% {\n        stroke-dasharray: ", ";\n    }\n    100% {\n        stroke-dasharray: ", ";\n    }\n"])), miniDash, fullDash, miniDash);
+};
+
+const rotateAnimation = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));
+
+const dashAnimation = r => {
+  const miniDash = "".concat(getArcLength(0, r), " ").concat(getArcLength(100, r));
+  const fullDash = "".concat(getArcLength(75, r), " ").concat(getArcLength(25, r));
+  return kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    0% {\n        stroke-dasharray: ", ";\n        stroke-dashoffset: 0;\n    }\n    12.5% {\n        stroke-dasharray: ", ";\n        stroke-dashoffset: 0;\n    }\n    25% {\n        stroke-dasharray: ", ";\n        stroke-dashoffset: ", ";\n    }\n    37.5% {\n        stroke-dasharray: ", ";\n        stroke-dashoffset: ", ";\n    }\n    50% {\n        stroke-dasharray: ", ";\n        stroke-dashoffset: ", ";\n    }\n    62.5% {\n        stroke-dasharray: ", ";\n        stroke-dashoffset: ", ";\n    }\n    75% {\n        stroke-dasharray: ", ";\n        stroke-dashoffset: ", ";\n    }\n    87.5% {\n        stroke-dasharray: ", ";\n        stroke-dashoffset: ", ";\n    }\n    100% {\n        stroke-dasharray: ", ";\n        stroke-dashoffset: ", ";\n    }\n"])), miniDash, fullDash, miniDash, getArcLength(-75, r), fullDash, getArcLength(-75, r), miniDash, getArcLength(-150, r), fullDash, getArcLength(-150, r), miniDash, getArcLength(-225, r), fullDash, getArcLength(-225, r), miniDash, getArcLength(-300, r));
+};
+
+const StyledSvg = /*#__PURE__*/styled.svg.withConfig({
+  componentId: "sc-bvvh5i-0"
+})(["display:block;margin:auto;transform-origin:center center;transform:rotate(-90deg);"]);
+const StyledPath = /*#__PURE__*/styled.path.withConfig({
+  componentId: "sc-bvvh5i-1"
+})(["transform-origin:center center;animation:", " ", "s linear infinite,", " ", "s linear infinite;"], rotateAnimation, props => props.__duration, props => strokeTailAnimation(props.r), props => props.__duration / 4);
+const StyledRect = /*#__PURE__*/styled.rect.withConfig({
+  componentId: "sc-bvvh5i-2"
+})(["transform-origin:center center;animation:", " ", "s linear infinite;"], rotateAnimation, props => props.__duration);
+const StyledCircle = /*#__PURE__*/styled.circle.withConfig({
+  componentId: "sc-bvvh5i-3"
+})(["stroke-dashoffset:0;fill:none;animation:", " ", "s linear infinite;clip-path:", ";-webkit-clip-path:", ";"], props => dashAnimation(props.r), props => props.__duration, props => props.clipPath, props => props.clipPath);
+
+export { StyledCircle, StyledPath, StyledRect, StyledSvg };

package/package.json

@@ -1,34 +1,39 @@
 {
   "name": "@elliemae/ds-circular-progress-indicator",
-  "version": "2.3.0-alpha.8",
+  "version": "2.3.0-next.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Circular progress indicator",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    },
+    "./v2/styled": {
+      "import": "./esm/v2/styled.js",
+      "require": "./cjs/v2/styled.js"
     },
     "./v2/react-desc-prop-types": {
-      "import": "./dist/esm/v2/react-desc-prop-types.js",
-      "require": "./dist/cjs/v2/react-desc-prop-types.js"
+      "import": "./esm/v2/react-desc-prop-types.js",
+      "require": "./cjs/v2/react-desc-prop-types.js"
     },
     "./v2": {
-      "import": "./dist/esm/v2/index.js",
-      "require": "./dist/cjs/v2/index.js"
+      "import": "./esm/v2/index.js",
+      "require": "./cjs/v2/index.js"
     },
     "./v2/DSCircularIndeterminateIndicator": {
-      "import": "./dist/esm/v2/DSCircularIndeterminateIndicator.js",
-      "require": "./dist/cjs/v2/DSCircularIndeterminateIndicator.js"
+      "import": "./esm/v2/DSCircularIndeterminateIndicator.js",
+      "require": "./cjs/v2/DSCircularIndeterminateIndicator.js"
+    },
+    "./v2/constants": {
+      "import": "./esm/v2/constants.js",
+      "require": "./cjs/v2/constants.js"
     },
     "./DSCircularProgressIndicator": {
-      "import": "./dist/esm/DSCircularProgressIndicator.js",
-      "require": "./dist/cjs/DSCircularProgressIndicator.js"
+      "import": "./esm/DSCircularProgressIndicator.js",
+      "require": "./cjs/DSCircularProgressIndicator.js"
     }
   },
   "sideEffects": [
@@ -40,17 +45,23 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "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"
+  },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.3.0-alpha.8",
-    "@elliemae/ds-tooltip": "2.3.0-alpha.8",
+    "@elliemae/ds-classnames": "2.3.0-next.10",
+    "@elliemae/ds-tooltip": "2.3.0-next.10",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.1",
+    "@testing-library/jest-dom": "~5.15.0",
     "@testing-library/react": "~12.1.2"
   },
   "peerDependencies": {
@@ -59,12 +70,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "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"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/DSCircularProgressIndicator.d.ts

@@ -0,0 +1,42 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+declare const CircularProgressIndicator: {
+    ({ size, showLabel, showTooltip, waiting, loading }: {
+        size: any;
+        showLabel: any;
+        showTooltip: any;
+        waiting: any;
+        loading: any;
+    }): JSX.Element;
+    defaultProps: {
+        size: string;
+        showLabel: boolean;
+        showTooltip: boolean;
+        waiting: boolean;
+        loading: boolean;
+    };
+    propTypes: {
+        size: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        showLabel: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        showTooltip: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        waiting: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        loading: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+    };
+};
+declare const CircularProgressIndicatorWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { CircularProgressIndicatorWithSchema };
+export default CircularProgressIndicator;

package/types/index.d.ts

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

package/types/tests/DSCircularProgressIndicator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/v2/DSCircularIndeterminateIndicator.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types';
+export declare const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props>;
+export declare const DSCircularIndeterminateIndicatorWithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<DSCircularIndeterminateIndicatorT.Props>;

package/types/v2/constants.d.ts

@@ -0,0 +1,28 @@
+export declare const sizeToPx: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+};
+export declare const sizeToWeight: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+};
+export declare const colorToHex: {
+    light: string;
+    dark: string;
+};
+export declare const sizeToTextSize: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+};

package/types/v2/index.d.ts

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