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

package/cjs/v2/DSCircularIndeterminateIndicator.js

@@ -1,113 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-var react = require('react');
-var dsGrid = require('@elliemae/ds-grid');
-var DSTooltip = require('@elliemae/ds-tooltip');
-var dsPropsHelpers = require('@elliemae/ds-props-helpers');
-var uid = require('uid');
-var reactDescPropTypes = require('./react-desc-prop-types.js');
-var constants = require('./constants.js');
-var styled = require('./styled.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-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__default["default"](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 = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.defaultProps);
-  const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault);
-  const {
-    size,
-    color,
-    text,
-    showText,
-    withTooltip,
-    tooltipStartPlacementPreference,
-    __duration
-  } = propsWithDefault;
-  const Wrapper = react.useMemo(() => withTooltip ? DSTooltip.DSTooltipV3 : _ref => {
-    let {
-      children
-    } = _ref;
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: children
-    });
-  }, [withTooltip]);
-  const uniqueId = react.useMemo(() => uid.uid(16), []);
-  const circleRadius = react.useMemo(() => (constants.sizeToPx[size] - Number.parseInt(constants.sizeToWeight[size], 10)) / 2, [size]);
-  return /*#__PURE__*/jsxRuntime.jsx(dsGrid.Grid, _objectSpread(_objectSpread({
-    gutter: "xs",
-    justifyContent: "center",
-    role: "status"
-  }, globalAttributes), {}, {
-    children: /*#__PURE__*/_jsx__default["default"](Wrapper, {
-      text: text,
-      textAlign: "center",
-      startPlacementPreference: tooltipStartPlacementPreference
-    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSvg, {
-      width: constants.sizeToPx[size],
-      height: constants.sizeToPx[size]
-    }, void 0, /*#__PURE__*/_jsx__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx__default["default"]("clipPath", {
-      id: "not-gradient-clip-".concat(uniqueId)
-    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledRect, {
-      x: "0%",
-      y: "0%",
-      width: "52%",
-      height: "100%",
-      __duration: __duration
-    })), /*#__PURE__*/_jsx__default["default"]("linearGradient", {
-      id: "gradient-color-".concat(uniqueId),
-      x1: "0%",
-      x2: "0%",
-      y1: "0%",
-      y2: "100%"
-    }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
-      offset: "10%",
-      stopColor: "".concat(constants.colorToHex[color], "00")
-    }), /*#__PURE__*/_jsx__default["default"]("stop", {
-      offset: "90%",
-      stopColor: "".concat(constants.colorToHex[color], "FF")
-    }))), /*#__PURE__*/_jsx__default["default"](styled.StyledCircle, {
-      cx: "50%",
-      cy: "50%",
-      r: circleRadius,
-      strokeWidth: constants.sizeToWeight[size],
-      stroke: constants.colorToHex[color],
-      strokeLinecap: "round",
-      clipPath: "url(#not-gradient-clip-".concat(uniqueId, ")"),
-      __duration: __duration
-    }), /*#__PURE__*/_jsx__default["default"](styled.StyledPath, {
-      d: "M ".concat(constants.sizeToPx[size] / 2, " ").concat(constants.sizeToPx[size] / 2, "\n                m ").concat(circleRadius, ", 0\n                a ").concat(circleRadius, ", ").concat(circleRadius, " 0 0, 1 -").concat(circleRadius, ", ").concat(circleRadius),
-      strokeWidth: constants.sizeToWeight[size],
-      fill: "transparent",
-      stroke: "url(#gradient-color-".concat(uniqueId, ")"),
-      strokeLinecap: "round",
-      r: circleRadius,
-      __duration: __duration
-    })), text !== '' && showText && /*#__PURE__*/_jsx__default["default"]("span", {
-      style: {
-        color: color === 'light' ? '#FFFFFF' : '#25292F99',
-        fontSize: constants.sizeToTextSize[size]
-      }
-    }, void 0, text))
-  }));
-};
-const DSCircularIndeterminateIndicatorWithSchema = dsPropsHelpers.describe(DSCircularIndeterminateIndicator);
-DSCircularIndeterminateIndicatorWithSchema.propTypes = reactDescPropTypes.CircularIndeterminateIndicatorPropTypes;
-
-exports.DSCircularIndeterminateIndicator = DSCircularIndeterminateIndicator;
-exports.DSCircularIndeterminateIndicatorWithSchema = DSCircularIndeterminateIndicatorWithSchema;

package/cjs/v2/constants.js

@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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'
-};
-
-exports.colorToHex = colorToHex;
-exports.sizeToPx = sizeToPx;
-exports.sizeToTextSize = sizeToTextSize;
-exports.sizeToWeight = sizeToWeight;

package/cjs/v2/index.js

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

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

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var dsPropsHelpers = require('@elliemae/ds-props-helpers');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-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__default["default"](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({}, dsPropsHelpers.globalAttributesPropTypes), {}, {
-  size: dsPropsHelpers.PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),
-  color: dsPropsHelpers.PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),
-  text: dsPropsHelpers.PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),
-  showText: dsPropsHelpers.PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),
-  withTooltip: dsPropsHelpers.PropTypes.bool.description('Whether to include a tooltip that shows the optional text on hover').defaultValue(false),
-  tooltipStartPlacementPreference: dsPropsHelpers.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
-};
-
-exports.CircularIndeterminateIndicatorPropTypes = CircularIndeterminateIndicatorPropTypes;
-exports.defaultProps = defaultProps;

package/cjs/v2/styled.js

@@ -1,51 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var styled = require('styled-components');
-var dsSystem = require('@elliemae/ds-system');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-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 dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    0% {\n        stroke-dasharray: ", ";\n    }\n    50% {\n        stroke-dasharray: ", ";\n    }\n    100% {\n        stroke-dasharray: ", ";\n    }\n"])), miniDash, fullDash, miniDash);
-};
-
-const rotateAnimation = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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 dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\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__default["default"].svg.withConfig({
-  componentId: "sc-bvvh5i-0"
-})(["display:block;margin:auto;transform-origin:center center;transform:rotate(-90deg);"]);
-const StyledPath = /*#__PURE__*/styled__default["default"].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__default["default"].rect.withConfig({
-  componentId: "sc-bvvh5i-2"
-})(["transform-origin:center center;animation:", " ", "s linear infinite;"], rotateAnimation, props => props.__duration);
-const StyledCircle = /*#__PURE__*/styled__default["default"].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);
-
-exports.StyledCircle = StyledCircle;
-exports.StyledPath = StyledPath;
-exports.StyledRect = StyledRect;
-exports.StyledSvg = StyledSvg;

package/esm/DSCircularProgressIndicator.js

@@ -1,258 +0,0 @@
-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

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

package/esm/v2/DSCircularIndeterminateIndicator.js

@@ -1,103 +0,0 @@
-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

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

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