@elliemae/ds-circular-progress-indicator 3.16.0-next.1 → 3.16.0-next.11

package/dist/cjs/DSCircularProgressIndicator.js

@@ -31,10 +31,12 @@ module.exports = __toCommonJS(DSCircularProgressIndicator_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_classnames = require("@elliemae/ds-classnames");
 var import_ds_tooltip = __toESM(require("@elliemae/ds-tooltip"));
 const { classNameBlock, classNameElement } = (0, import_ds_classnames.convertPropToCssClassName)("circular-progress-indicator");
 const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {
+  (0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-circular-progress-indicator", version: "TBD Date: 2023 Q3" });
   const waitingLabel = "Waiting...";
   const loadingLabel = "Loading...";
   const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;
@@ -240,15 +242,15 @@ CircularProgressIndicator.defaultProps = {
   loading: false
 };
 const circularProgressIndicatorProps = {
-  size: import_ds_utilities.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl", "xxxl"]).description("Defines the size of the indicator").defaultValue("m"),
-  showLabel: import_ds_utilities.PropTypes.bool.description("Wheter the indicator displays its state on a label or not").defaultValue(false),
-  showTooltip: import_ds_utilities.PropTypes.bool.description("Wheter the indicator displays its state on a tooltip or not").defaultValue(false),
-  waiting: import_ds_utilities.PropTypes.bool.description("Defines the state of the indicator as Waiting and only displays the gray track").defaultValue(false),
-  loading: import_ds_utilities.PropTypes.bool.description("Defines the state of the indicator as Loading and displays a blue spinner animation").defaultValue(false)
+  size: import_ds_props_helpers.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl", "xxxl"]).description("Defines the size of the indicator").defaultValue("m"),
+  showLabel: import_ds_props_helpers.PropTypes.bool.description("Wheter the indicator displays its state on a label or not").defaultValue(false),
+  showTooltip: import_ds_props_helpers.PropTypes.bool.description("Wheter the indicator displays its state on a tooltip or not").defaultValue(false),
+  waiting: import_ds_props_helpers.PropTypes.bool.description("Defines the state of the indicator as Waiting and only displays the gray track").defaultValue(false),
+  loading: import_ds_props_helpers.PropTypes.bool.description("Defines the state of the indicator as Loading and displays a blue spinner animation").defaultValue(false)
 };
 CircularProgressIndicator.propTypes = circularProgressIndicatorProps;
 CircularProgressIndicator.displayName = "CircularProgressIndicator";
-const CircularProgressIndicatorWithSchema = (0, import_ds_utilities.describe)(CircularProgressIndicator);
+const CircularProgressIndicatorWithSchema = (0, import_ds_props_helpers.describe)(CircularProgressIndicator);
 CircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;
 var DSCircularProgressIndicator_default = CircularProgressIndicator;
 //# sourceMappingURL=DSCircularProgressIndicator.js.map

package/dist/cjs/DSCircularProgressIndicator.js.map

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

package/dist/cjs/index.js

@@ -32,6 +32,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-var import_DSCircularProgressIndicator = __toESM(require("./DSCircularProgressIndicator"));
-var import_v2 = require("./v2");
+var import_DSCircularProgressIndicator = __toESM(require("./DSCircularProgressIndicator.js"));
+var import_v2 = require("./v2/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

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

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/v2/DSCircularIndeterminateIndicator.js

@@ -31,64 +31,78 @@ module.exports = __toCommonJS(DSCircularIndeterminateIndicator_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_lodash = require("lodash");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_tooltip = require("@elliemae/ds-tooltip");
-var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_uid = require("uid");
-var import_react_desc_prop_types = require("./react-desc-prop-types");
-var import_constants = require("./constants");
-var import_styled = require("./styled");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_constants = require("./constants.js");
+var import_styled = require("./styled.js");
 const EmptyComp = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
 const DSCircularIndeterminateIndicator = (props) => {
-  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
     props,
     import_react_desc_prop_types.defaultProps
   );
-  const { height, width, rows, cols, ...globalAttributes } = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
+  const globalAttributes = (0, import_lodash.omit)((0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault), ["height", "width", "rows", "cols", "wrap"]);
+  const xstyledAttributes = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
   const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
   const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
   const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
   const circleRadius = (0, import_react.useMemo)(() => (import_constants.sizeToPx[size] - Number.parseInt(import_constants.sizeToWeight[size], 10)) / 2, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { gutter: "xs", justifyContent: "center", role: "status", "aria-label": text || "Loading...", ...globalAttributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledSvg, { width: import_constants.sizeToPx[size], height: import_constants.sizeToPx[size], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRect, { x: "0%", y: "0%", width: "52%", height: "100%" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `gradient-color-${uniqueId}`, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "10%", stopColor: `${import_constants.colorToHex[color]}00` }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "90%", stopColor: `${import_constants.colorToHex[color]}FF` })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styled.StyledCircle,
-        {
-          cx: "50%",
-          cy: "50%",
-          r: circleRadius,
-          strokeWidth: import_constants.sizeToWeight[size],
-          stroke: import_constants.colorToHex[color],
-          strokeLinecap: "round",
-          clipPath: `url(#not-gradient-clip-${uniqueId})`
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styled.StyledPath,
-        {
-          d: `M ${import_constants.sizeToPx[size] / 2} ${import_constants.sizeToPx[size] / 2}
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ds_grid.Grid,
+    {
+      gutter: "xs",
+      justifyContent: "center",
+      role: "status",
+      "aria-label": text || "Loading...",
+      "data-testid": "ds-circular-indeterminate-indicator-root",
+      ...globalAttributes,
+      ...xstyledAttributes,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledSvg, { width: import_constants.sizeToPx[size], height: import_constants.sizeToPx[size], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRect, { x: "0%", y: "0%", width: "52%", height: "100%" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `gradient-color-${uniqueId}`, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "10%", stopColor: `${import_constants.colorToHex[color]}00` }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "90%", stopColor: `${import_constants.colorToHex[color]}FF` })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_styled.StyledCircle,
+            {
+              cx: "50%",
+              cy: "50%",
+              r: circleRadius,
+              strokeWidth: import_constants.sizeToWeight[size],
+              stroke: import_constants.colorToHex[color],
+              strokeLinecap: "round",
+              clipPath: `url(#not-gradient-clip-${uniqueId})`
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_styled.StyledPath,
+            {
+              d: `M ${import_constants.sizeToPx[size] / 2} ${import_constants.sizeToPx[size] / 2}
                 m ${circleRadius}, 0
                 a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`,
-          strokeWidth: import_constants.sizeToWeight[size],
-          fill: "transparent",
-          stroke: `url(#gradient-color-${uniqueId})`,
-          strokeLinecap: "round",
-          r: circleRadius
-        }
-      )
-    ] }),
-    text !== "" && showText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: import_constants.sizeToTextSize[size] }, children: text })
-  ] }) });
+              strokeWidth: import_constants.sizeToWeight[size],
+              fill: "transparent",
+              stroke: `url(#gradient-color-${uniqueId})`,
+              strokeLinecap: "round",
+              r: circleRadius
+            }
+          )
+        ] }),
+        text !== "" && showText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: import_constants.sizeToTextSize[size] }, children: text })
+      ] })
+    }
+  );
 };
 DSCircularIndeterminateIndicator.propTypes = import_react_desc_prop_types.CircularIndeterminateIndicatorPropTypes;
 DSCircularIndeterminateIndicator.displayName = "DSCircularIndeterminateIndicator";
-const DSCircularIndeterminateIndicatorWithSchema = (0, import_ds_utilities.describe)(DSCircularIndeterminateIndicator);
+const DSCircularIndeterminateIndicatorWithSchema = (0, import_ds_props_helpers.describe)(DSCircularIndeterminateIndicator);
 DSCircularIndeterminateIndicatorWithSchema.propTypes = import_react_desc_prop_types.CircularIndeterminateIndicatorPropTypes;
 //# sourceMappingURL=DSCircularIndeterminateIndicator.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/v2/DSCircularIndeterminateIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n  props,\n) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCircularIndeterminateIndicatorT.InternalProps>(\n    props,\n    defaultProps,\n  );\n  const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n  const uniqueId = useMemo(() => uid(16), []);\n\n  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n  return (\n    <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]}>\n          <defs>\n            <clipPath id={`not-gradient-clip-${uniqueId}`}>\n              <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n            </clipPath>\n            <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n              <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n              <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n            </linearGradient>\n          </defs>\n          <StyledCircle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={circleRadius}\n            strokeWidth={sizeToWeight[size]}\n            stroke={colorToHex[color]}\n            strokeLinecap=\"round\"\n            clipPath={`url(#not-gradient-clip-${uniqueId})`}\n          />\n          {/* \n            Here we are using a path because:\n            - Flexible enough to build a circle\n            - When rotating, the gradient follows the rotation!!! (This is key)\n            - We can use the rotation with keyframes, allowing for custom timing\n            \n            Using a circle does not pass point 2.\n            Animating the gradient is not posible with custom timings.\n            This is the best solution without using a custom library.\n          */}\n          <StyledPath\n            d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n                m ${circleRadius}, 0\n                a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n            strokeWidth={sizeToWeight[size]}\n            fill=\"transparent\"\n            stroke={`url(#gradient-color-${uniqueId})`}\n            strokeLinecap=\"round\"\n            r={circleRadius}\n          />\n        </StyledSvg>\n        {text !== '' && showText && (\n          <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n            {text}\n          </span>\n        )}\n      </Wrapper>\n    </Grid>\n  );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = 'DSCircularIndeterminateIndicator';\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADY0B;AAXjD,mBAA+B;AAC/B,qBAAqB;AACrB,wBAA4B;AAC5B,0BAA+E;AAC/E,iBAAoB;AAEpB,mCAAsE;AACtE,uBAAmE;AACnE,oBAAgE;AAGhE,MAAM,YAAgC,CAAC,UAAU,2EAAG,gBAAM,UAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,OAAO,MAAM,SAAS,iBAAiB,QAAI,4CAAuB,gBAAgB;AAElG,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,gCAAgC,IAAI;AAEtF,QAAM,cAA8B,sBAAQ,MAAO,cAAc,gCAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,eAAW,sBAAQ,UAAM,gBAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,mBAAe,sBAAQ,OAAO,0BAAS,QAAQ,OAAO,SAAS,8BAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,4CAAC,uBAAK,QAAO,MAAK,gBAAe,UAAS,MAAK,UAAS,cAAY,QAAQ,cAAe,GAAG,kBAC5F,uDAAC,WAAQ,MAAY,WAAU,UAAS,0BAA0B,iCAChE;AAAA,iDAAC,2BAAU,OAAO,0BAAS,OAAO,QAAQ,0BAAS,OACjD;AAAA,mDAAC,UACC;AAAA,oDAAC,cAAS,IAAI,qBAAqB,YACjC,sDAAC,4BAAW,GAAE,MAAK,GAAE,MAAK,OAAM,OAAM,QAAO,QAAO,GACtD;AAAA,QACA,6CAAC,oBAAe,IAAI,kBAAkB,YAAY,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK,IAAG,QAC3E;AAAA,sDAAC,UAAK,QAAO,OAAM,WAAW,GAAG,4BAAW,YAAY;AAAA,UACxD,4CAAC,UAAK,QAAO,OAAM,WAAW,GAAG,4BAAW,YAAY;AAAA,WAC1D;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,IAAG;AAAA,UACH,GAAG;AAAA,UACH,aAAa,8BAAa;AAAA,UAC1B,QAAQ,4BAAW;AAAA,UACnB,eAAc;AAAA,UACd,UAAU,0BAA0B;AAAA;AAAA,MACtC;AAAA,MAWA;AAAA,QAAC;AAAA;AAAA,UACC,GAAG,KAAK,0BAAS,QAAQ,KAAK,0BAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,UAClE,aAAa,8BAAa;AAAA,UAC1B,MAAK;AAAA,UACL,QAAQ,uBAAuB;AAAA,UAC/B,eAAc;AAAA,UACd,GAAG;AAAA;AAAA,MACL;AAAA,OACF;AAAA,IACC,SAAS,MAAM,YACd,4CAAC,UAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,gCAAe,MAAM,GAC/F,gBACH;AAAA,KAEJ,GACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,iDAA6C,8BAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { omit } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useMemoMergePropsWithDefault,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n  props,\n) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCircularIndeterminateIndicatorT.InternalProps>(\n    props,\n    defaultProps,\n  );\n  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), ['height', 'width', 'rows', 'cols', 'wrap']);\n  const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n  const uniqueId = useMemo(() => uid(16), []);\n\n  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n  return (\n    <Grid\n      gutter=\"xs\"\n      justifyContent=\"center\"\n      role=\"status\"\n      aria-label={text || 'Loading...'}\n      data-testid=\"ds-circular-indeterminate-indicator-root\"\n      {...globalAttributes}\n      {...xstyledAttributes}\n    >\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]}>\n          <defs>\n            <clipPath id={`not-gradient-clip-${uniqueId}`}>\n              <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n            </clipPath>\n            <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n              <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n              <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n            </linearGradient>\n          </defs>\n          <StyledCircle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={circleRadius}\n            strokeWidth={sizeToWeight[size]}\n            stroke={colorToHex[color]}\n            strokeLinecap=\"round\"\n            clipPath={`url(#not-gradient-clip-${uniqueId})`}\n          />\n          {/* \n            Here we are using a path because:\n            - Flexible enough to build a circle\n            - When rotating, the gradient follows the rotation!!! (This is key)\n            - We can use the rotation with keyframes, allowing for custom timing\n            \n            Using a circle does not pass point 2.\n            Animating the gradient is not posible with custom timings.\n            This is the best solution without using a custom library.\n          */}\n          <StyledPath\n            d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n                m ${circleRadius}, 0\n                a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n            strokeWidth={sizeToWeight[size]}\n            fill=\"transparent\"\n            stroke={`url(#gradient-color-${uniqueId})`}\n            strokeLinecap=\"round\"\n            r={circleRadius}\n          />\n        </StyledSvg>\n        {text !== '' && showText && (\n          <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n            {text}\n          </span>\n        )}\n      </Wrapper>\n    </Grid>\n  );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = 'DSCircularIndeterminateIndicator';\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkB0B;AAjBjD,mBAA+B;AAC/B,oBAAqB;AACrB,qBAAqB;AACrB,wBAA4B;AAC5B,8BAKO;AACP,iBAAoB;AAEpB,mCAAsE;AACtE,uBAAmE;AACnE,oBAAgE;AAGhE,MAAM,YAAgC,CAAC,UAAU,2EAAG,gBAAM,UAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,QAAM,uBAAmB,wBAAK,gDAAuB,gBAAgB,GAAG,CAAC,UAAU,SAAS,QAAQ,QAAQ,MAAM,CAAC;AACnH,QAAM,wBAAoB,4CAAmB,gBAAgB;AAE7D,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,gCAAgC,IAAI;AAEtF,QAAM,cAA8B,sBAAQ,MAAO,cAAc,gCAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,eAAW,sBAAQ,UAAM,gBAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,mBAAe,sBAAQ,OAAO,0BAAS,QAAQ,OAAO,SAAS,8BAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,gBAAe;AAAA,MACf,MAAK;AAAA,MACL,cAAY,QAAQ;AAAA,MACpB,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,uDAAC,WAAQ,MAAY,WAAU,UAAS,0BAA0B,iCAChE;AAAA,qDAAC,2BAAU,OAAO,0BAAS,OAAO,QAAQ,0BAAS,OACjD;AAAA,uDAAC,UACC;AAAA,wDAAC,cAAS,IAAI,qBAAqB,YACjC,sDAAC,4BAAW,GAAE,MAAK,GAAE,MAAK,OAAM,OAAM,QAAO,QAAO,GACtD;AAAA,YACA,6CAAC,oBAAe,IAAI,kBAAkB,YAAY,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK,IAAG,QAC3E;AAAA,0DAAC,UAAK,QAAO,OAAM,WAAW,GAAG,4BAAW,YAAY;AAAA,cACxD,4CAAC,UAAK,QAAO,OAAM,WAAW,GAAG,4BAAW,YAAY;AAAA,eAC1D;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAG;AAAA,cACH,aAAa,8BAAa;AAAA,cAC1B,QAAQ,4BAAW;AAAA,cACnB,eAAc;AAAA,cACd,UAAU,0BAA0B;AAAA;AAAA,UACtC;AAAA,UAWA;AAAA,YAAC;AAAA;AAAA,cACC,GAAG,KAAK,0BAAS,QAAQ,KAAK,0BAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,cAClE,aAAa,8BAAa;AAAA,cAC1B,MAAK;AAAA,cACL,QAAQ,uBAAuB;AAAA,cAC/B,eAAc;AAAA,cACd,GAAG;AAAA;AAAA,UACL;AAAA,WACF;AAAA,QACC,SAAS,MAAM,YACd,4CAAC,UAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,gCAAe,MAAM,GAC/F,gBACH;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,iDAA6C,kCAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
   "names": []
 }

package/dist/cjs/v2/index.js

@@ -29,5 +29,5 @@ __export(v2_exports, {
 });
 module.exports = __toCommonJS(v2_exports);
 var React = __toESM(require("react"));
-var import_DSCircularIndeterminateIndicator = require("./DSCircularIndeterminateIndicator");
+var import_DSCircularIndeterminateIndicator = require("./DSCircularIndeterminateIndicator.js");
 //# sourceMappingURL=index.js.map

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

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

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

@@ -29,7 +29,7 @@ __export(react_desc_prop_types_exports, {
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 const defaultProps = {
   size: "m",
   color: "dark",
@@ -39,13 +39,13 @@ const defaultProps = {
   tooltipStartPlacementPreference: "bottom"
 };
 const CircularIndeterminateIndicatorPropTypes = {
-  ...import_ds_utilities.globalAttributesPropTypes,
-  size: import_ds_utilities.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
-  color: import_ds_utilities.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
-  text: import_ds_utilities.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
-  showText: import_ds_utilities.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
-  withTooltip: import_ds_utilities.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
-  tooltipStartPlacementPreference: import_ds_utilities.PropTypes.oneOf([
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  size: import_ds_props_helpers.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
+  color: import_ds_props_helpers.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
+  text: import_ds_props_helpers.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
+  showText: import_ds_props_helpers.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
+  withTooltip: import_ds_props_helpers.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
+  tooltipStartPlacementPreference: import_ds_props_helpers.PropTypes.oneOf([
     "top-start",
     "top",
     "top-end",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/v2/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable max-lines */\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport { type DSTooltipV3T } from '@elliemae/ds-tooltip';\nimport type { WeakValidationMap } from 'react';\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n  type TShirtSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n  type SupportedColors = 'light' | 'dark';\n  export interface DefaultProps {\n    size: TShirtSizes;\n    color: SupportedColors;\n    text: string;\n    showText: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference: DSTooltipV3T.Placement;\n  }\n  export interface OptionalProps {}\n  export interface RequiredProps {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAAqD;AAI9C,MAAM,eAA+D;AAAA,EAC1E,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AA+BO,MAAM,0CAA0C;AAAA,EACrD,GAAG;AAAA,EACH,MAAM,8BAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,8BAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,8BAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,8BAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,8BAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,8BAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable max-lines */\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type DSTooltipV3T } from '@elliemae/ds-tooltip';\nimport type { WeakValidationMap } from 'react';\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n  type TShirtSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n  type SupportedColors = 'light' | 'dark';\n  export interface DefaultProps {\n    size: TShirtSizes;\n    color: SupportedColors;\n    text: string;\n    showText: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference: DSTooltipV3T.Placement;\n  }\n  export interface OptionalProps {}\n  export interface RequiredProps {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAqD;AAI9C,MAAM,eAA+D;AAAA,EAC1E,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AA+BO,MAAM,0CAA0C;AAAA,EACrD,GAAG;AAAA,EACH,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,kCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,kCAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,kCAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,kCAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;",
   "names": []
 }

package/dist/esm/DSCircularProgressIndicator.js

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { describe, PropTypes } from "@elliemae/ds-utilities";
+import { useDeprecateComponent } from "@elliemae/ds-utilities";
+import { describe, PropTypes } from "@elliemae/ds-props-helpers";
 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 }) => {
+  useDeprecateComponent({ componentName: "ds-circular-progress-indicator", version: "TBD Date: 2023 Q3" });
   const waitingLabel = "Waiting...";
   const loadingLabel = "Loading...";
   const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;

package/dist/esm/DSCircularProgressIndicator.js.map

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

package/dist/esm/index.js

@@ -3,8 +3,8 @@ import {
   default as default2,
   default as default3,
   CircularProgressIndicatorWithSchema
-} from "./DSCircularProgressIndicator";
-import { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from "./v2";
+} from "./DSCircularProgressIndicator.js";
+import { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from "./v2/index.js";
 export {
   CircularProgressIndicatorWithSchema,
   DSCircularIndeterminateIndicator,

package/dist/esm/index.js.map

@@ -1,7 +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';\nexport { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2';\n"],
+  "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.js';\nexport { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2/index.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE,WAAAA;AAAA,EACW,WAAXA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kCAAkC,kDAAkD;",
   "names": ["default"]
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/v2/DSCircularIndeterminateIndicator.js

@@ -1,61 +1,80 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
+import { omit } from "lodash";
 import { Grid } from "@elliemae/ds-grid";
 import { DSTooltipV3 } from "@elliemae/ds-tooltip";
-import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
+import {
+  describe,
+  useGetGlobalAttributes,
+  useMemoMergePropsWithDefault,
+  useGetXstyledProps
+} from "@elliemae/ds-props-helpers";
 import { uid } from "uid";
-import { CircularIndeterminateIndicatorPropTypes, defaultProps } from "./react-desc-prop-types";
-import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants";
-import { StyledCircle, StyledPath, StyledRect, StyledSvg } from "./styled";
+import { CircularIndeterminateIndicatorPropTypes, defaultProps } from "./react-desc-prop-types.js";
+import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants.js";
+import { StyledCircle, StyledPath, StyledRect, StyledSvg } from "./styled.js";
 const EmptyComp = (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children });
 const DSCircularIndeterminateIndicator = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(
     props,
     defaultProps
   );
-  const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);
+  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), ["height", "width", "rows", "cols", "wrap"]);
+  const xstyledAttributes = useGetXstyledProps(propsWithDefault);
   const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
   const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
   const uniqueId = useMemo(() => uid(16), []);
   const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
-  return /* @__PURE__ */ jsx(Grid, { gutter: "xs", justifyContent: "center", role: "status", "aria-label": text || "Loading...", ...globalAttributes, children: /* @__PURE__ */ jsxs(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
-    /* @__PURE__ */ jsxs(StyledSvg, { width: sizeToPx[size], height: sizeToPx[size], children: [
-      /* @__PURE__ */ jsxs("defs", { children: [
-        /* @__PURE__ */ jsx("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ jsx(StyledRect, { x: "0%", y: "0%", width: "52%", height: "100%" }) }),
-        /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-color-${uniqueId}`, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
-          /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: `${colorToHex[color]}00` }),
-          /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: `${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-${uniqueId})`
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        StyledPath,
-        {
-          d: `M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}
+  return /* @__PURE__ */ jsx(
+    Grid,
+    {
+      gutter: "xs",
+      justifyContent: "center",
+      role: "status",
+      "aria-label": text || "Loading...",
+      "data-testid": "ds-circular-indeterminate-indicator-root",
+      ...globalAttributes,
+      ...xstyledAttributes,
+      children: /* @__PURE__ */ jsxs(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
+        /* @__PURE__ */ jsxs(StyledSvg, { width: sizeToPx[size], height: sizeToPx[size], children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsx("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ jsx(StyledRect, { x: "0%", y: "0%", width: "52%", height: "100%" }) }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-color-${uniqueId}`, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: `${colorToHex[color]}00` }),
+              /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: `${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-${uniqueId})`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StyledPath,
+            {
+              d: `M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}
                 m ${circleRadius}, 0
                 a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`,
-          strokeWidth: sizeToWeight[size],
-          fill: "transparent",
-          stroke: `url(#gradient-color-${uniqueId})`,
-          strokeLinecap: "round",
-          r: circleRadius
-        }
-      )
-    ] }),
-    text !== "" && showText && /* @__PURE__ */ jsx("span", { style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: sizeToTextSize[size] }, children: text })
-  ] }) });
+              strokeWidth: sizeToWeight[size],
+              fill: "transparent",
+              stroke: `url(#gradient-color-${uniqueId})`,
+              strokeLinecap: "round",
+              r: circleRadius
+            }
+          )
+        ] }),
+        text !== "" && showText && /* @__PURE__ */ jsx("span", { style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: sizeToTextSize[size] }, children: text })
+      ] })
+    }
+  );
 };
 DSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;
 DSCircularIndeterminateIndicator.displayName = "DSCircularIndeterminateIndicator";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n  props,\n) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCircularIndeterminateIndicatorT.InternalProps>(\n    props,\n    defaultProps,\n  );\n  const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n  const uniqueId = useMemo(() => uid(16), []);\n\n  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n  return (\n    <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]}>\n          <defs>\n            <clipPath id={`not-gradient-clip-${uniqueId}`}>\n              <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n            </clipPath>\n            <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n              <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n              <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n            </linearGradient>\n          </defs>\n          <StyledCircle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={circleRadius}\n            strokeWidth={sizeToWeight[size]}\n            stroke={colorToHex[color]}\n            strokeLinecap=\"round\"\n            clipPath={`url(#not-gradient-clip-${uniqueId})`}\n          />\n          {/* \n            Here we are using a path because:\n            - Flexible enough to build a circle\n            - When rotating, the gradient follows the rotation!!! (This is key)\n            - We can use the rotation with keyframes, allowing for custom timing\n            \n            Using a circle does not pass point 2.\n            Animating the gradient is not posible with custom timings.\n            This is the best solution without using a custom library.\n          */}\n          <StyledPath\n            d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n                m ${circleRadius}, 0\n                a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n            strokeWidth={sizeToWeight[size]}\n            fill=\"transparent\"\n            stroke={`url(#gradient-color-${uniqueId})`}\n            strokeLinecap=\"round\"\n            r={circleRadius}\n          />\n        </StyledSvg>\n        {text !== '' && showText && (\n          <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n            {text}\n          </span>\n        )}\n      </Wrapper>\n    </Grid>\n  );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = 'DSCircularIndeterminateIndicator';\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACY0B,wBA2BrC,YA3BqC;AAXjD,SAAgB,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,UAAU,wBAAwB,oCAAoC;AAC/E,SAAS,WAAW;AAEpB,SAAS,yCAAyC,oBAAoB;AACtE,SAAS,YAAY,UAAU,gBAAgB,oBAAoB;AACnE,SAAS,cAAc,YAAY,YAAY,iBAAiB;AAGhE,MAAM,YAAgC,CAAC,UAAU,gCAAG,gBAAM,UAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,OAAO,MAAM,SAAS,iBAAiB,IAAI,uBAAuB,gBAAgB;AAElG,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,gCAAgC,IAAI;AAEtF,QAAM,UAA8B,QAAQ,MAAO,cAAc,cAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,WAAW,QAAQ,MAAM,IAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,eAAe,QAAQ,OAAO,SAAS,QAAQ,OAAO,SAAS,aAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,oBAAC,QAAK,QAAO,MAAK,gBAAe,UAAS,MAAK,UAAS,cAAY,QAAQ,cAAe,GAAG,kBAC5F,+BAAC,WAAQ,MAAY,WAAU,UAAS,0BAA0B,iCAChE;AAAA,yBAAC,aAAU,OAAO,SAAS,OAAO,QAAQ,SAAS,OACjD;AAAA,2BAAC,UACC;AAAA,4BAAC,cAAS,IAAI,qBAAqB,YACjC,8BAAC,cAAW,GAAE,MAAK,GAAE,MAAK,OAAM,OAAM,QAAO,QAAO,GACtD;AAAA,QACA,qBAAC,oBAAe,IAAI,kBAAkB,YAAY,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK,IAAG,QAC3E;AAAA,8BAAC,UAAK,QAAO,OAAM,WAAW,GAAG,WAAW,YAAY;AAAA,UACxD,oBAAC,UAAK,QAAO,OAAM,WAAW,GAAG,WAAW,YAAY;AAAA,WAC1D;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,IAAG;AAAA,UACH,GAAG;AAAA,UACH,aAAa,aAAa;AAAA,UAC1B,QAAQ,WAAW;AAAA,UACnB,eAAc;AAAA,UACd,UAAU,0BAA0B;AAAA;AAAA,MACtC;AAAA,MAWA;AAAA,QAAC;AAAA;AAAA,UACC,GAAG,KAAK,SAAS,QAAQ,KAAK,SAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,UAClE,aAAa,aAAa;AAAA,UAC1B,MAAK;AAAA,UACL,QAAQ,uBAAuB;AAAA,UAC/B,eAAc;AAAA,UACd,GAAG;AAAA;AAAA,MACL;AAAA,OACF;AAAA,IACC,SAAS,MAAM,YACd,oBAAC,UAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,eAAe,MAAM,GAC/F,gBACH;AAAA,KAEJ,GACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,6CAA6C,SAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { omit } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useMemoMergePropsWithDefault,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n  props,\n) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCircularIndeterminateIndicatorT.InternalProps>(\n    props,\n    defaultProps,\n  );\n  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), ['height', 'width', 'rows', 'cols', 'wrap']);\n  const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n  const uniqueId = useMemo(() => uid(16), []);\n\n  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n  return (\n    <Grid\n      gutter=\"xs\"\n      justifyContent=\"center\"\n      role=\"status\"\n      aria-label={text || 'Loading...'}\n      data-testid=\"ds-circular-indeterminate-indicator-root\"\n      {...globalAttributes}\n      {...xstyledAttributes}\n    >\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]}>\n          <defs>\n            <clipPath id={`not-gradient-clip-${uniqueId}`}>\n              <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n            </clipPath>\n            <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n              <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n              <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n            </linearGradient>\n          </defs>\n          <StyledCircle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={circleRadius}\n            strokeWidth={sizeToWeight[size]}\n            stroke={colorToHex[color]}\n            strokeLinecap=\"round\"\n            clipPath={`url(#not-gradient-clip-${uniqueId})`}\n          />\n          {/* \n            Here we are using a path because:\n            - Flexible enough to build a circle\n            - When rotating, the gradient follows the rotation!!! (This is key)\n            - We can use the rotation with keyframes, allowing for custom timing\n            \n            Using a circle does not pass point 2.\n            Animating the gradient is not posible with custom timings.\n            This is the best solution without using a custom library.\n          */}\n          <StyledPath\n            d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n                m ${circleRadius}, 0\n                a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n            strokeWidth={sizeToWeight[size]}\n            fill=\"transparent\"\n            stroke={`url(#gradient-color-${uniqueId})`}\n            strokeLinecap=\"round\"\n            r={circleRadius}\n          />\n        </StyledSvg>\n        {text !== '' && showText && (\n          <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n            {text}\n          </span>\n        )}\n      </Wrapper>\n    </Grid>\n  );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = 'DSCircularIndeterminateIndicator';\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkB0B,wBAoCrC,YApCqC;AAjBjD,SAAgB,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW;AAEpB,SAAS,yCAAyC,oBAAoB;AACtE,SAAS,YAAY,UAAU,gBAAgB,oBAAoB;AACnE,SAAS,cAAc,YAAY,YAAY,iBAAiB;AAGhE,MAAM,YAAgC,CAAC,UAAU,gCAAG,gBAAM,UAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,QAAM,mBAAmB,KAAK,uBAAuB,gBAAgB,GAAG,CAAC,UAAU,SAAS,QAAQ,QAAQ,MAAM,CAAC;AACnH,QAAM,oBAAoB,mBAAmB,gBAAgB;AAE7D,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,gCAAgC,IAAI;AAEtF,QAAM,UAA8B,QAAQ,MAAO,cAAc,cAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,WAAW,QAAQ,MAAM,IAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,eAAe,QAAQ,OAAO,SAAS,QAAQ,OAAO,SAAS,aAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,gBAAe;AAAA,MACf,MAAK;AAAA,MACL,cAAY,QAAQ;AAAA,MACpB,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,+BAAC,WAAQ,MAAY,WAAU,UAAS,0BAA0B,iCAChE;AAAA,6BAAC,aAAU,OAAO,SAAS,OAAO,QAAQ,SAAS,OACjD;AAAA,+BAAC,UACC;AAAA,gCAAC,cAAS,IAAI,qBAAqB,YACjC,8BAAC,cAAW,GAAE,MAAK,GAAE,MAAK,OAAM,OAAM,QAAO,QAAO,GACtD;AAAA,YACA,qBAAC,oBAAe,IAAI,kBAAkB,YAAY,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK,IAAG,QAC3E;AAAA,kCAAC,UAAK,QAAO,OAAM,WAAW,GAAG,WAAW,YAAY;AAAA,cACxD,oBAAC,UAAK,QAAO,OAAM,WAAW,GAAG,WAAW,YAAY;AAAA,eAC1D;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAG;AAAA,cACH,aAAa,aAAa;AAAA,cAC1B,QAAQ,WAAW;AAAA,cACnB,eAAc;AAAA,cACd,UAAU,0BAA0B;AAAA;AAAA,UACtC;AAAA,UAWA;AAAA,YAAC;AAAA;AAAA,cACC,GAAG,KAAK,SAAS,QAAQ,KAAK,SAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,cAClE,aAAa,aAAa;AAAA,cAC1B,MAAK;AAAA,cACL,QAAQ,uBAAuB;AAAA,cAC/B,eAAc;AAAA,cACd,GAAG;AAAA;AAAA,UACL;AAAA,WACF;AAAA,QACC,SAAS,MAAM,YACd,oBAAC,UAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,eAAe,MAAM,GAC/F,gBACH;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,6CAA6C,SAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
   "names": []
 }

package/dist/esm/v2/index.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import {
   DSCircularIndeterminateIndicator,
   DSCircularIndeterminateIndicatorWithSchema
-} from "./DSCircularIndeterminateIndicator";
+} from "./DSCircularIndeterminateIndicator.js";
 export {
   DSCircularIndeterminateIndicator,
   DSCircularIndeterminateIndicatorWithSchema

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

@@ -1,7 +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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n  DSCircularIndeterminateIndicator,\n  DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-utilities";
+import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
 const defaultProps = {
   size: "m",
   color: "dark",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable max-lines */\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport { type DSTooltipV3T } from '@elliemae/ds-tooltip';\nimport type { WeakValidationMap } from 'react';\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n  type TShirtSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n  type SupportedColors = 'light' | 'dark';\n  export interface DefaultProps {\n    size: TShirtSizes;\n    color: SupportedColors;\n    text: string;\n    showText: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference: DSTooltipV3T.Placement;\n  }\n  export interface OptionalProps {}\n  export interface RequiredProps {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,iCAAiC;AAI9C,MAAM,eAA+D;AAAA,EAC1E,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AA+BO,MAAM,0CAA0C;AAAA,EACrD,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,UAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,UAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,UAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable max-lines */\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type DSTooltipV3T } from '@elliemae/ds-tooltip';\nimport type { WeakValidationMap } from 'react';\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n  type TShirtSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n  type SupportedColors = 'light' | 'dark';\n  export interface DefaultProps {\n    size: TShirtSizes;\n    color: SupportedColors;\n    text: string;\n    showText: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference: DSTooltipV3T.Placement;\n  }\n  export interface OptionalProps {}\n  export interface RequiredProps {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,WAAW,iCAAiC;AAI9C,MAAM,eAA+D;AAAA,EAC1E,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AA+BO,MAAM,0CAA0C;AAAA,EACrD,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,UAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,UAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,UAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;",
   "names": []
 }

package/dist/types/DSCircularProgressIndicator.d.ts

@@ -14,15 +14,15 @@ declare const CircularProgressIndicator: {
         loading: boolean;
     };
     propTypes: {
-        size: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-        showLabel: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-        showTooltip: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-        waiting: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-        loading: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+        size: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        showLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        showTooltip: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        waiting: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        loading: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     };
     displayName: string;
 };
-declare const CircularProgressIndicatorWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<{
+declare const CircularProgressIndicatorWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<{
     size: any;
     showLabel: any;
     showTooltip: any;

package/dist/types/index.d.ts

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

package/dist/types/v2/DSCircularIndeterminateIndicator.d.ts

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

package/dist/types/v2/index.d.ts

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

package/dist/types/v2/react-desc-prop-types.d.ts

@@ -1,4 +1,4 @@
-import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';
+import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
 import { type DSTooltipV3T } from '@elliemae/ds-tooltip';
 import type { WeakValidationMap } from 'react';
 export declare const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-circular-progress-indicator",
-  "version": "3.16.0-next.1",
+  "version": "3.16.0-next.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Circular progress indicator",
   "files": [
@@ -53,11 +53,12 @@
   "dependencies": {
     "styled-components": "~5.3.6",
     "uid": "~2.0.0",
-    "@elliemae/ds-classnames": "3.16.0-next.1",
-    "@elliemae/ds-grid": "3.16.0-next.1",
-    "@elliemae/ds-utilities": "3.16.0-next.1",
-    "@elliemae/ds-system": "3.16.0-next.1",
-    "@elliemae/ds-tooltip": "3.16.0-next.1"
+    "@elliemae/ds-classnames": "3.16.0-next.11",
+    "@elliemae/ds-props-helpers": "3.16.0-next.11",
+    "@elliemae/ds-grid": "3.16.0-next.11",
+    "@elliemae/ds-system": "3.16.0-next.11",
+    "@elliemae/ds-tooltip": "3.16.0-next.11",
+    "@elliemae/ds-utilities": "3.16.0-next.11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "~5.16.4",
@@ -78,7 +79,7 @@
     "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
     "dts": "node ../../scripts/dts.mjs",
     "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
-    "dev:build": "pnpm --filter {.}... build && pnpm --filter {.}... dts",
+    "dev:build": "pnpm --filter {.}... build",
     "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
     "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }