@elliemae/ds-circular-progress-indicator 3.4.2 → 3.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/cjs/DSCircularProgressIndicator.js +123 -86
  2. package/dist/cjs/DSCircularProgressIndicator.js.map +2 -2
  3. package/dist/cjs/index.js +4 -1
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/cjs/v2/DSCircularIndeterminateIndicator.js +80 -50
  6. package/dist/cjs/v2/DSCircularIndeterminateIndicator.js.map +1 -1
  7. package/dist/cjs/v2/constants.js +4 -1
  8. package/dist/cjs/v2/constants.js.map +1 -1
  9. package/dist/cjs/v2/index.js +4 -1
  10. package/dist/cjs/v2/index.js.map +1 -1
  11. package/dist/cjs/v2/react-desc-prop-types.js +4 -1
  12. package/dist/cjs/v2/react-desc-prop-types.js.map +1 -1
  13. package/dist/cjs/v2/styled.js +4 -1
  14. package/dist/cjs/v2/styled.js.map +1 -1
  15. package/dist/esm/DSCircularProgressIndicator.js +119 -85
  16. package/dist/esm/DSCircularProgressIndicator.js.map +1 -1
  17. package/dist/esm/index.js.map +2 -2
  18. package/dist/esm/v2/DSCircularIndeterminateIndicator.js +76 -49
  19. package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map +1 -1
  20. package/dist/esm/v2/constants.js.map +1 -1
  21. package/dist/esm/v2/index.js.map +1 -1
  22. package/dist/esm/v2/react-desc-prop-types.js.map +1 -1
  23. package/dist/esm/v2/styled.js.map +1 -1
  24. package/package.json +6 -6
package/dist/cjs/v2/styled.js CHANGED
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
17
17
  }
18
18
  return to;
19
19
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
21
24
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
25
  var styled_exports = {};
23
26
  __export(styled_exports, {
package/dist/cjs/v2/styled.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/v2/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport { kfrm, styled } from '@elliemae/ds-system';\n\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst svgRotateAnimation = kfrm`\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nconst strokeTailAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n }\n 50% {\n stroke-dasharray: ${fullDash};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n }\n`;\n};\n\nconst rotateAnimation = kfrm`\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n`;\n\nconst dashAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 37.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 50% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 62.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 75% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 87.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-300, r)};\n }\n`;\n};\n\nexport const StyledSvg = styled.svg`\n display: block;\n margin: auto;\n transform-origin: center center;\n transform: rotate(-90deg);\n animation: ${svgRotateAnimation} 2.5s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ r: number }>`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite, ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;\n`;\n\nexport const StyledRect = styled.rect`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number }>`\n stroke-dashoffset: 0;\n fill: none;\n animation: ${(props) => dashAnimation(props.r)} 10s linear infinite;\n clip-path: ${(props) => props.clipPath};\n -webkit-clip-path: ${(props) => props.clipPath};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA6B;AAE7B,MAAM,EAAE,OAAO;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAG5B;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAGjD;AAEO,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB;AAAA;AAGR,MAAM,aAAa,wBAAO;AAAA;AAAA,eAElB,wCAAwC,CAAC,UAAU,oBAAoB,MAAM,CAAC;AAAA;AAGtF,MAAM,aAAa,wBAAO;AAAA;AAAA,eAElB;AAAA;AAGR,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC;AAAA,eAChC,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA6B;AAE7B,MAAM,EAAE,GAAG,IAAI;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAG5B;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAGjD;AAEO,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB;AAAA;AAGR,MAAM,aAAa,wBAAO;AAAA;AAAA,eAElB,wCAAwC,CAAC,UAAU,oBAAoB,MAAM,CAAC;AAAA;AAGtF,MAAM,aAAa,wBAAO;AAAA;AAAA,eAElB;AAAA;AAGR,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC;AAAA,eAChC,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/DSCircularProgressIndicator.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import React2 from "react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { describe, PropTypes } from "@elliemae/ds-utilities";
4
4
  import { convertPropToCssClassName } from "@elliemae/ds-classnames";
5
5
  import DSTooltip from "@elliemae/ds-tooltip";
@@ -73,12 +73,13 @@ const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, load
73
73
  default:
74
74
  break;
75
75
  }
76
- const labelText = /* @__PURE__ */ React2.createElement("p", {
76
+ const labelText = /* @__PURE__ */ jsx("p", {
77
77
  "data-testid": "circular-indicator-label",
78
78
  className: classNameElement("label"),
79
- style: { fontSize: `${sizeLabel}px` }
80
- }, currentLabel);
81
- const buildIndicator = (Component) => sizePx < 17 || showTooltip ? /* @__PURE__ */ React2.createElement(DSTooltip, {
79
+ style: { fontSize: `${sizeLabel}px` },
80
+ children: currentLabel
81
+ });
82
+ const buildIndicator = (Component) => sizePx < 17 || showTooltip ? /* @__PURE__ */ jsx(DSTooltip, {
82
83
  containerProps: {
83
84
  id: "ds-circular-progress-indicator",
84
85
  "data-testid": "circular-indicator-title"
@@ -88,7 +89,7 @@ const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, load
88
89
  triggerComponent: Component,
89
90
  placement: "bottom"
90
91
  }) : Component;
91
- const grayTrack = /* @__PURE__ */ React2.createElement("circle", {
92
+ const grayTrack = /* @__PURE__ */ jsx("circle", {
92
93
  className: classNameElement("track"),
93
94
  cx: "50%",
94
95
  cy: "50%",
@@ -96,7 +97,7 @@ const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, load
96
97
  r: "28",
97
98
  strokeWidth: `${trackWidth}px`
98
99
  });
99
- const grayArc = /* @__PURE__ */ React2.createElement("circle", {
100
+ const grayArc = /* @__PURE__ */ jsx("circle", {
100
101
  className: classNameElement("arc-gray"),
101
102
  stroke: "#E0E3E8",
102
103
  strokeDasharray: `${grayArcStrokeDasharray}`,
@@ -107,90 +108,123 @@ const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, load
107
108
  r: "28",
108
109
  strokeWidth: `${trackWidth}px`
109
110
  });
110
- const indicator = /* @__PURE__ */ React2.createElement("svg", {
111
+ const indicator = /* @__PURE__ */ jsxs("svg", {
111
112
  height: `${sizePx}px`,
112
113
  version: "1.1",
113
114
  viewBox: "0 0 66 66",
114
115
  width: `${sizePx}px`,
115
- "data-testid": "circular-indicator"
116
- }, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("linearGradient", {
117
- id: "grad1",
118
- x1: "0%",
119
- x2: "100%",
120
- y1: "100%",
121
- y2: "0%"
122
- }, /* @__PURE__ */ React2.createElement("stop", {
123
- offset: "0%",
124
- style: { stopColor: "#E0E3E8", stopOpacity: 1 }
125
- }), /* @__PURE__ */ React2.createElement("stop", {
126
- offset: "89%",
127
- style: { stopColor: "#5594e2", stopOpacity: 1 }
128
- }), /* @__PURE__ */ React2.createElement("stop", {
129
- offset: "100%",
130
- style: { stopColor: "#5594e2", stopOpacity: 1 }
131
- })), /* @__PURE__ */ React2.createElement("linearGradient", {
132
- id: "grad2",
133
- x1: "0%",
134
- x2: "100%",
135
- y1: "100%",
136
- y2: "0%"
137
- }, /* @__PURE__ */ React2.createElement("stop", {
138
- offset: "0%",
139
- style: { stopColor: "#5594e2", stopOpacity: 1 }
140
- }), /* @__PURE__ */ React2.createElement("stop", {
141
- offset: "11%",
142
- style: { stopColor: "#5594e2", stopOpacity: 1 }
143
- }), /* @__PURE__ */ React2.createElement("stop", {
144
- offset: "100%",
145
- style: { stopColor: "#E0E3E8", stopOpacity: 1 }
146
- })), /* @__PURE__ */ React2.createElement("marker", {
147
- id: "inverseL",
148
- viewBox: "0 0 5 10",
149
- refX: "0.5",
150
- refY: `${markerRefY}`,
151
- markerUnits: "strokeWidth",
152
- markerWidth: "0.5",
153
- markerHeight: `${markerHeight}`,
154
- orient: "auto"
155
- }, /* @__PURE__ */ React2.createElement("path", {
156
- d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
157
- fill: "#FFF"
158
- })), /* @__PURE__ */ React2.createElement("marker", {
159
- id: "inverseR",
160
- viewBox: "0 0 5 10",
161
- refX: "0",
162
- refY: "5",
163
- markerUnits: "strokeWidth",
164
- markerWidth: "0.7",
165
- markerHeight: `${markerHeight}`
166
- }, /* @__PURE__ */ React2.createElement("path", {
167
- d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
168
- fill: "#FFF"
169
- }))), grayTrack, !waiting && /* @__PURE__ */ React2.createElement("g", {
170
- fill: "none",
171
- fillRule: "evenodd",
172
- stroke: "none",
173
- strokeWidth: "1"
174
- }, /* @__PURE__ */ React2.createElement("path", {
175
- className: classNameElement("arc-blue"),
176
- d: "M30,5 C17.536025,6 6,17.536027 5,31",
177
- stroke: "#5594e2",
178
- strokeWidth: `${strokeWidth - 0.5}px`,
179
- strokeLinecap: "round",
180
- "data-testid": "circular-indicator-blue-arc"
181
- }), /* @__PURE__ */ React2.createElement("path", {
182
- className: classNameElement("arc-white"),
183
- d: "M33,5 C17.536027,5 5,17.536027 5,33",
184
- stroke: "#FFF",
185
- strokeWidth: `${strokeWidth + 2}px`,
186
- markerStart: "url(#inverseR)",
187
- markerEnd: "url(#inverseL)"
188
- }), grayArc));
189
- return /* @__PURE__ */ React2.createElement("div", {
116
+ "data-testid": "circular-indicator",
117
+ children: [
118
+ /* @__PURE__ */ jsxs("defs", {
119
+ children: [
120
+ /* @__PURE__ */ jsxs("linearGradient", {
121
+ id: "grad1",
122
+ x1: "0%",
123
+ x2: "100%",
124
+ y1: "100%",
125
+ y2: "0%",
126
+ children: [
127
+ /* @__PURE__ */ jsx("stop", {
128
+ offset: "0%",
129
+ style: { stopColor: "#E0E3E8", stopOpacity: 1 }
130
+ }),
131
+ /* @__PURE__ */ jsx("stop", {
132
+ offset: "89%",
133
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
134
+ }),
135
+ /* @__PURE__ */ jsx("stop", {
136
+ offset: "100%",
137
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
138
+ })
139
+ ]
140
+ }),
141
+ /* @__PURE__ */ jsxs("linearGradient", {
142
+ id: "grad2",
143
+ x1: "0%",
144
+ x2: "100%",
145
+ y1: "100%",
146
+ y2: "0%",
147
+ children: [
148
+ /* @__PURE__ */ jsx("stop", {
149
+ offset: "0%",
150
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
151
+ }),
152
+ /* @__PURE__ */ jsx("stop", {
153
+ offset: "11%",
154
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
155
+ }),
156
+ /* @__PURE__ */ jsx("stop", {
157
+ offset: "100%",
158
+ style: { stopColor: "#E0E3E8", stopOpacity: 1 }
159
+ })
160
+ ]
161
+ }),
162
+ /* @__PURE__ */ jsx("marker", {
163
+ id: "inverseL",
164
+ viewBox: "0 0 5 10",
165
+ refX: "0.5",
166
+ refY: `${markerRefY}`,
167
+ markerUnits: "strokeWidth",
168
+ markerWidth: "0.5",
169
+ markerHeight: `${markerHeight}`,
170
+ orient: "auto",
171
+ children: /* @__PURE__ */ jsx("path", {
172
+ d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
173
+ fill: "#FFF"
174
+ })
175
+ }),
176
+ /* @__PURE__ */ jsx("marker", {
177
+ id: "inverseR",
178
+ viewBox: "0 0 5 10",
179
+ refX: "0",
180
+ refY: "5",
181
+ markerUnits: "strokeWidth",
182
+ markerWidth: "0.7",
183
+ markerHeight: `${markerHeight}`,
184
+ children: /* @__PURE__ */ jsx("path", {
185
+ d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
186
+ fill: "#FFF"
187
+ })
188
+ })
189
+ ]
190
+ }),
191
+ grayTrack,
192
+ !waiting && /* @__PURE__ */ jsxs("g", {
193
+ fill: "none",
194
+ fillRule: "evenodd",
195
+ stroke: "none",
196
+ strokeWidth: "1",
197
+ children: [
198
+ /* @__PURE__ */ jsx("path", {
199
+ className: classNameElement("arc-blue"),
200
+ d: "M30,5 C17.536025,6 6,17.536027 5,31",
201
+ stroke: "#5594e2",
202
+ strokeWidth: `${strokeWidth - 0.5}px`,
203
+ strokeLinecap: "round",
204
+ "data-testid": "circular-indicator-blue-arc"
205
+ }),
206
+ /* @__PURE__ */ jsx("path", {
207
+ className: classNameElement("arc-white"),
208
+ d: "M33,5 C17.536027,5 5,17.536027 5,33",
209
+ stroke: "#FFF",
210
+ strokeWidth: `${strokeWidth + 2}px`,
211
+ markerStart: "url(#inverseR)",
212
+ markerEnd: "url(#inverseL)"
213
+ }),
214
+ grayArc
215
+ ]
216
+ })
217
+ ]
218
+ });
219
+ return /* @__PURE__ */ jsxs("div", {
190
220
  className: classNameBlock("wrapper"),
191
221
  role: "status",
192
- "aria-hidden": waiting || loading ? "false" : "true"
193
- }, buildIndicator(indicator), showLabel && labelText);
222
+ "aria-hidden": waiting || loading ? "false" : "true",
223
+ children: [
224
+ buildIndicator(indicator),
225
+ showLabel && labelText
226
+ ]
227
+ });
194
228
  };
195
229
  CircularProgressIndicator.defaultProps = {
196
230
  size: "m",
package/dist/esm/DSCircularProgressIndicator.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSCircularProgressIndicator.tsx"],
4
4
  "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"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/index.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
4
  "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"],
5
- "mappings": "AAAA;ACCA;AAAA;AAAA;AAAA;AAAA;AAKA;",
6
- "names": []
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE,WAAAA;AAAA,EACW,WAAXA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kCAAkC,kDAAkD;",
6
+ "names": ["default"]
7
7
  }
package/dist/esm/v2/DSCircularIndeterminateIndicator.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
- import React2, { useMemo } from "react";
2
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
+ import { useMemo } from "react";
3
4
  import { Grid } from "@elliemae/ds-grid";
4
5
  import { DSTooltipV3 } from "@elliemae/ds-tooltip";
5
6
  import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
@@ -10,66 +11,92 @@ import {
10
11
  } from "./react-desc-prop-types";
11
12
  import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants";
12
13
  import { StyledCircle, StyledPath, StyledRect, StyledSvg } from "./styled";
13
- const EmptyComp = (props) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, props.children);
14
+ const EmptyComp = (props) => /* @__PURE__ */ jsx(Fragment, {
15
+ children: props.children
16
+ });
14
17
  const DSCircularIndeterminateIndicator = (props) => {
15
- const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
18
+ const propsWithDefault = useMemoMergePropsWithDefault(
19
+ props,
20
+ defaultProps
21
+ );
16
22
  const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);
17
23
  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
18
24
  const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
19
25
  const uniqueId = useMemo(() => uid(16), []);
20
26
  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
21
- return /* @__PURE__ */ React2.createElement(Grid, {
27
+ return /* @__PURE__ */ jsx(Grid, {
22
28
  gutter: "xs",
23
29
  justifyContent: "center",
24
30
  role: "status",
25
31
  "aria-label": text || "Loading...",
26
- ...globalAttributes
27
- }, /* @__PURE__ */ React2.createElement(Wrapper, {
28
- text,
29
- textAlign: "center",
30
- startPlacementPreference: tooltipStartPlacementPreference
31
- }, /* @__PURE__ */ React2.createElement(StyledSvg, {
32
- width: sizeToPx[size],
33
- height: sizeToPx[size]
34
- }, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("clipPath", {
35
- id: `not-gradient-clip-${uniqueId}`
36
- }, /* @__PURE__ */ React2.createElement(StyledRect, {
37
- x: "0%",
38
- y: "0%",
39
- width: "52%",
40
- height: "100%"
41
- })), /* @__PURE__ */ React2.createElement("linearGradient", {
42
- id: `gradient-color-${uniqueId}`,
43
- x1: "0%",
44
- x2: "0%",
45
- y1: "0%",
46
- y2: "100%"
47
- }, /* @__PURE__ */ React2.createElement("stop", {
48
- offset: "10%",
49
- stopColor: `${colorToHex[color]}00`
50
- }), /* @__PURE__ */ React2.createElement("stop", {
51
- offset: "90%",
52
- stopColor: `${colorToHex[color]}FF`
53
- }))), /* @__PURE__ */ React2.createElement(StyledCircle, {
54
- cx: "50%",
55
- cy: "50%",
56
- r: circleRadius,
57
- strokeWidth: sizeToWeight[size],
58
- stroke: colorToHex[color],
59
- strokeLinecap: "round",
60
- clipPath: `url(#not-gradient-clip-${uniqueId})`
61
- }), /* @__PURE__ */ React2.createElement(StyledPath, {
62
- d: `M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}
32
+ ...globalAttributes,
33
+ children: /* @__PURE__ */ jsxs(Wrapper, {
34
+ text,
35
+ textAlign: "center",
36
+ startPlacementPreference: tooltipStartPlacementPreference,
37
+ children: [
38
+ /* @__PURE__ */ jsxs(StyledSvg, {
39
+ width: sizeToPx[size],
40
+ height: sizeToPx[size],
41
+ children: [
42
+ /* @__PURE__ */ jsxs("defs", {
43
+ children: [
44
+ /* @__PURE__ */ jsx("clipPath", {
45
+ id: `not-gradient-clip-${uniqueId}`,
46
+ children: /* @__PURE__ */ jsx(StyledRect, {
47
+ x: "0%",
48
+ y: "0%",
49
+ width: "52%",
50
+ height: "100%"
51
+ })
52
+ }),
53
+ /* @__PURE__ */ jsxs("linearGradient", {
54
+ id: `gradient-color-${uniqueId}`,
55
+ x1: "0%",
56
+ x2: "0%",
57
+ y1: "0%",
58
+ y2: "100%",
59
+ children: [
60
+ /* @__PURE__ */ jsx("stop", {
61
+ offset: "10%",
62
+ stopColor: `${colorToHex[color]}00`
63
+ }),
64
+ /* @__PURE__ */ jsx("stop", {
65
+ offset: "90%",
66
+ stopColor: `${colorToHex[color]}FF`
67
+ })
68
+ ]
69
+ })
70
+ ]
71
+ }),
72
+ /* @__PURE__ */ jsx(StyledCircle, {
73
+ cx: "50%",
74
+ cy: "50%",
75
+ r: circleRadius,
76
+ strokeWidth: sizeToWeight[size],
77
+ stroke: colorToHex[color],
78
+ strokeLinecap: "round",
79
+ clipPath: `url(#not-gradient-clip-${uniqueId})`
80
+ }),
81
+ /* @__PURE__ */ jsx(StyledPath, {
82
+ d: `M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}
63
83
  m ${circleRadius}, 0
64
84
  a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`,
65
- strokeWidth: sizeToWeight[size],
66
- fill: "transparent",
67
- stroke: `url(#gradient-color-${uniqueId})`,
68
- strokeLinecap: "round",
69
- r: circleRadius
70
- })), text !== "" && showText && /* @__PURE__ */ React2.createElement("span", {
71
- style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: sizeToTextSize[size] }
72
- }, text)));
85
+ strokeWidth: sizeToWeight[size],
86
+ fill: "transparent",
87
+ stroke: `url(#gradient-color-${uniqueId})`,
88
+ strokeLinecap: "round",
89
+ r: circleRadius
90
+ })
91
+ ]
92
+ }),
93
+ text !== "" && showText && /* @__PURE__ */ jsx("span", {
94
+ style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: sizeToTextSize[size] },
95
+ children: text
96
+ })
97
+ ]
98
+ })
99
+ });
73
100
  };
74
101
  DSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;
75
102
  DSCircularIndeterminateIndicator.displayName = "DSCircularIndeterminateIndicator";
package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
4
4
  "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 {\n DSCircularIndeterminateIndicatorT,\n CircularIndeterminateIndicatorPropTypes,\n defaultProps,\n} 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<Required<DSCircularIndeterminateIndicatorT.Props>>(\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"],
5
- "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAKA;AACA;AAGA,MAAM,YAAgC,CAAC,UAAU,4DAAG,MAAM,QAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB,6BACvB,OACA,YACF;AACA,QAAM,EAAE,QAAQ,OAAO,MAAM,SAAS,qBAAqB,uBAAuB,gBAAgB;AAElG,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,oCAAoC;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,MAAO,UAAS,QAAQ,OAAO,SAAS,aAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,IAAS,cAAY,QAAQ;AAAA,IAAe,GAAG;AAAA,KAC5F,qCAAC;AAAA,IAAQ;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,qCAAC;AAAA,IAAU,OAAO,SAAS;AAAA,IAAO,QAAQ,SAAS;AAAA,KACjD,qCAAC,cACC,qCAAC;AAAA,IAAS,IAAI,qBAAqB;AAAA,KACjC,qCAAC;AAAA,IAAW,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,OAAM;AAAA,IAAM,QAAO;AAAA,GAAO,CACtD,GACA,qCAAC;AAAA,IAAe,IAAI,kBAAkB;AAAA,IAAY,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,KAC3E,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,GAAY,GACxD,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,GAAY,CAC1D,CACF,GACA,qCAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,GAAG;AAAA,IACH,aAAa,aAAa;AAAA,IAC1B,QAAQ,WAAW;AAAA,IACnB,eAAc;AAAA,IACd,UAAU,0BAA0B;AAAA,GACtC,GAWA,qCAAC;AAAA,IACC,GAAG,KAAK,SAAS,QAAQ,KAAK,SAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,IAClE,aAAa,aAAa;AAAA,IAC1B,MAAK;AAAA,IACL,QAAQ,uBAAuB;AAAA,IAC/B,eAAc;AAAA,IACd,GAAG;AAAA,GACL,CACF,GACC,SAAS,MAAM,YACd,qCAAC;AAAA,IAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,eAAe,MAAM;AAAA,KAC/F,IACH,CAEJ,CACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,6CAA6C,SAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,UAAU,wBAAwB,oCAAoC;AAC/E,SAAS,WAAW;AACpB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY,UAAU,gBAAgB,oBAAoB;AACnE,SAAS,cAAc,YAAY,YAAY,iBAAiB;AAGhE,MAAM,YAAgC,CAAC,UAAU;AAAA,EAAG,gBAAM;AAAA,CAAS;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;AAAA,IAAK,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,IAAS,cAAY,QAAQ;AAAA,IAAe,GAAG;AAAA,IAC5F,+BAAC;AAAA,MAAQ;AAAA,MAAY,WAAU;AAAA,MAAS,0BAA0B;AAAA,MAChE;AAAA,6BAAC;AAAA,UAAU,OAAO,SAAS;AAAA,UAAO,QAAQ,SAAS;AAAA,UACjD;AAAA,iCAAC;AAAA,cACC;AAAA,oCAAC;AAAA,kBAAS,IAAI,qBAAqB;AAAA,kBACjC,8BAAC;AAAA,oBAAW,GAAE;AAAA,oBAAK,GAAE;AAAA,oBAAK,OAAM;AAAA,oBAAM,QAAO;AAAA,mBAAO;AAAA,iBACtD;AAAA,gBACA,qBAAC;AAAA,kBAAe,IAAI,kBAAkB;AAAA,kBAAY,IAAG;AAAA,kBAAK,IAAG;AAAA,kBAAK,IAAG;AAAA,kBAAK,IAAG;AAAA,kBAC3E;AAAA,wCAAC;AAAA,sBAAK,QAAO;AAAA,sBAAM,WAAW,GAAG,WAAW;AAAA,qBAAY;AAAA,oBACxD,oBAAC;AAAA,sBAAK,QAAO;AAAA,sBAAM,WAAW,GAAG,WAAW;AAAA,qBAAY;AAAA;AAAA,iBAC1D;AAAA;AAAA,aACF;AAAA,YACA,oBAAC;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,aACtC;AAAA,YAWA,oBAAC;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,aACL;AAAA;AAAA,SACF;AAAA,QACC,SAAS,MAAM,YACd,oBAAC;AAAA,UAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,eAAe,MAAM;AAAA,UAC/F;AAAA,SACH;AAAA;AAAA,KAEJ;AAAA,GACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,6CAA6C,SAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/esm/v2/constants.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/constants.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const sizeToPx = {\n xs: 16,\n s: 24,\n m: 32,\n l: 48,\n xl: 56,\n xxl: 64,\n};\n\nexport const sizeToWeight = {\n xs: '3px',\n s: '3px',\n m: '3px',\n l: '4px',\n xl: '5px',\n xxl: '6px',\n};\n\nexport const colorToHex = {\n light: '#EBF6FF',\n dark: '#1394E5',\n};\n\nexport const sizeToTextSize = {\n xs: '12px',\n s: '12px',\n m: '12px',\n l: '13px',\n xl: '14px',\n xxl: '16px',\n};\n"],
5
- "mappings": "AAAA;ACAO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;",
6
6
  "names": []
7
7
  }
package/dist/esm/v2/index.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/index.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n DSCircularIndeterminateIndicator,\n DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator';\n"],
5
- "mappings": "AAAA;ACAA;AAAA;AAAA;AAAA;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;",
6
6
  "names": []
7
7
  }
package/dist/esm/v2/react-desc-prop-types.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n interface Props {\n size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n color?: 'light' | 'dark';\n text?: string;\n showText?: boolean;\n withTooltip: boolean;\n tooltipStartPlacementPreference?:\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n }\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n ...globalAttributesPropTypes,\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n withTooltip: PropTypes.bool\n .description('Whether to include a tooltip that shows the optional text on hover')\n .defaultValue(false),\n tooltipStartPlacementPreference: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preference for the tooltip')\n .defaultValue('center'),\n} as WeakValidationMap<unknown>;\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.Props = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n};\n"],
5
- "mappings": "AAAA;ACCA;AA0BO,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;AAEO,MAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,iCAAiC;AA0B9C,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;AAEO,MAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;",
6
6
  "names": []
7
7
  }
package/dist/esm/v2/styled.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/styled.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport { kfrm, styled } from '@elliemae/ds-system';\n\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst svgRotateAnimation = kfrm`\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nconst strokeTailAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n }\n 50% {\n stroke-dasharray: ${fullDash};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n }\n`;\n};\n\nconst rotateAnimation = kfrm`\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n`;\n\nconst dashAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 37.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 50% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 62.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 75% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 87.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-300, r)};\n }\n`;\n};\n\nexport const StyledSvg = styled.svg`\n display: block;\n margin: auto;\n transform-origin: center center;\n transform: rotate(-90deg);\n animation: ${svgRotateAnimation} 2.5s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ r: number }>`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite, ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;\n`;\n\nexport const StyledRect = styled.rect`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number }>`\n stroke-dashoffset: 0;\n fill: none;\n animation: ${(props) => dashAnimation(props.r)} 10s linear infinite;\n clip-path: ${(props) => props.clipPath};\n -webkit-clip-path: ${(props) => props.clipPath};\n`;\n"],
5
- "mappings": "AAAA;ACCA;AAEA,MAAM,EAAE,OAAO;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAG5B;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAGjD;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB;AAAA;AAGR,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,wCAAwC,CAAC,UAAU,oBAAoB,MAAM,CAAC;AAAA;AAGtF,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB;AAAA;AAGR,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC;AAAA,eAChC,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,MAAM,cAAc;AAE7B,MAAM,EAAE,GAAG,IAAI;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAG5B;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAGjD;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB;AAAA;AAGR,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,wCAAwC,CAAC,UAAU,oBAAoB,MAAM,CAAC;AAAA;AAGtF,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB;AAAA;AAGR,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC;AAAA,eAChC,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-circular-progress-indicator",
3
- "version": "3.4.2",
3
+ "version": "3.4.3",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Circular progress indicator",
6
6
  "files": [
@@ -51,11 +51,11 @@
51
51
  "indent": 4
52
52
  },
53
53
  "dependencies": {
54
- "@elliemae/ds-classnames": "3.4.2",
55
- "@elliemae/ds-grid": "3.4.2",
56
- "@elliemae/ds-system": "3.4.2",
57
- "@elliemae/ds-tooltip": "3.4.2",
58
- "@elliemae/ds-utilities": "3.4.2",
54
+ "@elliemae/ds-classnames": "3.4.3",
55
+ "@elliemae/ds-grid": "3.4.3",
56
+ "@elliemae/ds-system": "3.4.3",
57
+ "@elliemae/ds-tooltip": "3.4.3",
58
+ "@elliemae/ds-utilities": "3.4.3",
59
59
  "styled-components": "^5.3.5",
60
60
  "uid": "~2.0.0"
61
61
  },