@telus-uds/components-base 3.3.0 → 3.5.0

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 05 Mar 2025 00:01:06 GMT and should not be manually modified.
+This log was last generated on Mon, 24 Mar 2025 16:24:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.5.0
+
+Mon, 24 Mar 2025 16:24:15 GMT
+
+### Minor changes
+
+- Code, Dynatrace alerts and vulnerabilities resolved (35577399+JoshHC@users.noreply.github.com)
+- `ActivityIndicator`: new animation for the spinner and new `dots` variant added (35577399+JoshHC@users.noreply.github.com)
+- `FileUpload`: add dictionary prop (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.3.0
+
+### Patches
+
+- `Link`: Introduced `style` variant. The `alternative` and `inverse` variant is now deprecated and will be removed in future versions. (Mauricio.BatresMontejo@telus.com)
+- `Carousel`: fix autoplay button positioning on mobile (guillermo.peitzner@telus.com)
+- `MultiSelectFilter`: fix button when selected (guillermo.peitzner@telus.com)
+
+## 3.4.0
+
+Tue, 11 Mar 2025 21:16:58 GMT
+
+### Minor changes
+
+- `dataSet`: add new contenful attributes (sergio.ramirez@telus.com)
+- Use React's useId hook within useUniqueId for SSR-safe ids (6854874+kyletsang@users.noreply.github.com)
+
 ## 3.3.0
 
-Wed, 05 Mar 2025 00:01:06 GMT
+Wed, 05 Mar 2025 00:06:37 GMT
 
 ### Minor changes
 

package/lib/cjs/ActivityIndicator/Dots.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _shared = require("./shared");
+var _A11yInfoProvider = require("../A11yInfoProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CY_PROPS = {
+  attributeName: 'cy',
+  calcMode: 'spline',
+  dur: `${_shared.DOTS_TOTAL_ANIMATION_DURATION}ms`,
+  repeatCount: 'indefinite'
+};
+const FILL_PROPS = {
+  attributeName: 'fill',
+  calcMode: 'linear',
+  dur: `${_shared.DOTS_TOTAL_ANIMATION_DURATION}ms`,
+  repeatCount: 'indefinite'
+};
+const OPACITY_PROPS = {
+  attributeName: 'opacity',
+  calcMode: 'linear',
+  dur: `${_shared.DOTS_TOTAL_ANIMATION_DURATION}ms`,
+  repeatCount: 'indefinite'
+};
+const Dots = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    size,
+    color,
+    indicatorBackgroundColor,
+    label,
+    isStatic = false
+  } = _ref;
+  const {
+    reduceMotionEnabled
+  } = (0, _A11yInfoProvider.useA11yInfo)();
+  const reduceMotion = reduceMotionEnabled || isStatic;
+  const spacingX = size + _shared.DOTS_SPACING_X;
+  const baseY = size * _shared.DOTS_BASE_Y_FACTOR;
+  const jumpHeight = size * _shared.DOTS_JUMP_HEIGHT_FACTOR;
+  const padding = size * _shared.DOTS_PADDING_FACTOR;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    ref: ref,
+    "aria-valuetext": label,
+    role: "progressbar",
+    "aria-busy": "true",
+    width: size * 3 + spacingX * 2 + padding * 2,
+    height: size * 6,
+    viewBox: `0 0 ${size * 3 + spacingX * 2 + padding * 2} ${size * 6}`,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        cx: padding + size / 2,
+        cy: baseY,
+        r: size / 2,
+        fill: color,
+        children: !reduceMotion && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+            ...CY_PROPS,
+            keyTimes: _shared.DOT1_ANIMATION_KEYTIMES,
+            keySplines: `${_shared.BOUNCY_CURVE};${_shared.BOUNCY_CURVE};${_shared.BOUNCY_CURVE}`,
+            values: `
+                  ${baseY};
+                  ${baseY - jumpHeight * _shared.OVERSHOOT_FACTOR};
+                  ${baseY + jumpHeight * _shared.UNDERSHOOT_FACTOR};
+                  ${baseY}
+                `
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+            ...FILL_PROPS,
+            keyTimes: _shared.DOT1_COLOR_KEYTIMES,
+            values: `
+                  ${color}; 
+                  ${color}; 
+                  ${indicatorBackgroundColor}; 
+                  ${indicatorBackgroundColor}
+                `
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+            ...OPACITY_PROPS,
+            keyTimes: _shared.DOTS_FADEOUT_KEYTIMES,
+            values: _shared.DOTS_FADEOUT_VALUES
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        cx: padding + size + spacingX + size / 2,
+        cy: baseY,
+        r: size / 2,
+        fill: indicatorBackgroundColor,
+        children: reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+            ...CY_PROPS,
+            keyTimes: _shared.DOT2_ANIMATION_KEYTIMES,
+            keySplines: `
+                  ${_shared.BOUNCY_CURVE};
+                  ${_shared.BOUNCY_CURVE};
+                  ${_shared.BOUNCY_CURVE};
+                  ${_shared.BOUNCY_CURVE}
+                `,
+            values: `
+                  ${baseY};
+                  ${baseY};
+                  ${baseY - jumpHeight * _shared.OVERSHOOT_FACTOR};
+                  ${baseY + jumpHeight * _shared.UNDERSHOOT_FACTOR};
+                  ${baseY}
+                `
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+            ...FILL_PROPS,
+            keyTimes: _shared.DOT2_COLOR_KEYTIMES,
+            values: `
+                  ${indicatorBackgroundColor}; 
+                  ${indicatorBackgroundColor}; 
+                  ${color}; 
+                  ${color}; 
+                  ${indicatorBackgroundColor}; 
+                  ${indicatorBackgroundColor}
+                `
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+            ...OPACITY_PROPS,
+            keyTimes: _shared.DOTS_FADEOUT_KEYTIMES,
+            values: _shared.DOTS_FADEOUT_VALUES
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        cx: padding + (size + spacingX) * 2 + size / 2,
+        cy: baseY,
+        r: size / 2,
+        fill: indicatorBackgroundColor,
+        children: reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+            ...CY_PROPS,
+            keyTimes: _shared.DOT3_ANIMATION_KEYTIMES,
+            keySplines: `
+                  ${_shared.BOUNCY_CURVE};
+                  ${_shared.BOUNCY_CURVE};
+                  ${_shared.BOUNCY_CURVE};
+                  ${_shared.BOUNCY_CURVE}
+                `,
+            values: `
+                  ${baseY};
+                  ${baseY};
+                  ${baseY - jumpHeight * _shared.OVERSHOOT_FACTOR};
+                  ${baseY + jumpHeight * _shared.UNDERSHOOT_FACTOR};
+                  ${baseY}
+                `
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+            ...FILL_PROPS,
+            keyTimes: _shared.DOT3_COLOR_KEYTIMES,
+            values: `
+                  ${indicatorBackgroundColor}; 
+                  ${indicatorBackgroundColor}; 
+                  ${color}; 
+                  ${color}; 
+                  ${color}
+                `
+          })]
+        })
+      })]
+    })
+  });
+});
+Dots.displayName = 'Dots';
+Dots.propTypes = _shared.propTypes;
+var _default = exports.default = Dots;

package/lib/cjs/ActivityIndicator/Dots.native.js

@@ -0,0 +1,221 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _shared = require("./shared");
+var _A11yInfoProvider = require("../A11yInfoProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const AnimatedCircle = _Animated.default.createAnimatedComponent(_reactNativeSvg.Circle);
+const Dots = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    size,
+    color,
+    indicatorBackgroundColor,
+    label,
+    isStatic = false
+  } = _ref;
+  const {
+    reduceMotionEnabled
+  } = (0, _A11yInfoProvider.useA11yInfo)();
+  const reduceMotion = reduceMotionEnabled || isStatic;
+  const spacingX = size + _shared.DOTS_SPACING_X;
+  const baseY = size * _shared.DOTS_BASE_Y_FACTOR;
+  const jumpHeight = size * _shared.DOTS_JUMP_HEIGHT_FACTOR;
+  const padding = size * _shared.DOTS_PADDING_FACTOR;
+  const width = (size + 1) * 6;
+  const height = size * 6;
+  const animationValue = _react.default.useRef(new _Animated.default.Value(0)).current;
+  _react.default.useEffect(() => {
+    if (reduceMotion) {
+      animationValue.stopAnimation();
+      animationValue.setValue(0);
+      return () => {};
+    }
+    const loopAnimation = _Animated.default.loop(_Animated.default.timing(animationValue, {
+      toValue: 1,
+      duration: _shared.DOTS_TOTAL_ANIMATION_DURATION,
+      easing: _Easing.default.linear,
+      useNativeDriver: false
+    }));
+    loopAnimation.start();
+    return () => loopAnimation.stop();
+  }, [reduceMotion, animationValue]);
+  const makeStepInterpolation = steps => {
+    const inputRange = [];
+    const outputRange = [];
+    steps.forEach(_ref2 => {
+      let {
+        time,
+        value
+      } = _ref2;
+      inputRange.push(time);
+      outputRange.push(value);
+    });
+    return {
+      inputRange,
+      outputRange
+    };
+  };
+
+  // ---- DOT 1 ----
+  const dot1Cy = animationValue.interpolate({
+    inputRange: _shared.DOT1_ANIMATION_INPUT_RANGE,
+    outputRange: [baseY, baseY - jumpHeight * _shared.OVERSHOOT_FACTOR, baseY + jumpHeight * _shared.UNDERSHOOT_FACTOR, baseY],
+    extrapolate: 'clamp'
+  });
+  const {
+    inputRange: dot1FillInputRange,
+    outputRange: dot1FillOutputRange
+  } = makeStepInterpolation([{
+    time: 0,
+    value: color
+  }, {
+    time: 0.3,
+    value: color
+  }, {
+    time: 0.4,
+    value: indicatorBackgroundColor
+  }, {
+    time: 1,
+    value: indicatorBackgroundColor
+  }]);
+  const dot1Fill = animationValue.interpolate({
+    inputRange: dot1FillInputRange,
+    outputRange: dot1FillOutputRange,
+    extrapolate: 'clamp'
+  });
+
+  // Fade-out Dot 1
+  const dot1Opacity = animationValue.interpolate({
+    inputRange: _shared.DOT_FADEOUT_INPUT_RANGE,
+    outputRange: _shared.DOT_FADEOUT_OUTPUT_RANGE,
+    extrapolate: 'clamp'
+  });
+
+  // ---- DOT 2 ----
+  const dot2Cy = animationValue.interpolate({
+    inputRange: _shared.DOT2_ANIMATION_INPUT_RANGE,
+    outputRange: [baseY, baseY, baseY - jumpHeight * _shared.OVERSHOOT_FACTOR, baseY + jumpHeight * _shared.UNDERSHOOT_FACTOR, baseY],
+    extrapolate: 'clamp'
+  });
+  const {
+    inputRange: dot2FillInputRange,
+    outputRange: dot2FillOutputRange
+  } = makeStepInterpolation([{
+    time: 0,
+    value: indicatorBackgroundColor
+  }, {
+    time: 0.3,
+    value: indicatorBackgroundColor
+  }, {
+    time: 0.4,
+    value: color
+  }, {
+    time: 0.6,
+    value: color
+  }, {
+    time: 0.7,
+    value: indicatorBackgroundColor
+  }, {
+    time: 1,
+    value: indicatorBackgroundColor
+  }]);
+  const dot2Fill = animationValue.interpolate({
+    inputRange: dot2FillInputRange,
+    outputRange: dot2FillOutputRange,
+    extrapolate: 'clamp'
+  });
+
+  // Fade-out Dot 2
+  const dot2Opacity = animationValue.interpolate({
+    inputRange: _shared.DOT_FADEOUT_INPUT_RANGE,
+    outputRange: _shared.DOT_FADEOUT_OUTPUT_RANGE,
+    extrapolate: 'clamp'
+  });
+
+  // ---- DOT 3 ----
+  const dot3Cy = animationValue.interpolate({
+    inputRange: _shared.DOT3_ANIMATION_INPUT_RANGE,
+    outputRange: [baseY, baseY, baseY - jumpHeight * _shared.OVERSHOOT_FACTOR, baseY + jumpHeight * _shared.UNDERSHOOT_FACTOR, baseY],
+    extrapolate: 'clamp'
+  });
+  const {
+    inputRange: dot3FillInputRange,
+    outputRange: dot3FillOutputRange
+  } = makeStepInterpolation([{
+    time: 0,
+    value: indicatorBackgroundColor
+  }, {
+    time: 0.5,
+    value: indicatorBackgroundColor
+  }, {
+    time: 0.6,
+    value: color
+  }, {
+    time: 0.8,
+    value: color
+  }, {
+    time: 1,
+    value: color
+  }]);
+  const dot3Fill = animationValue.interpolate({
+    inputRange: dot3FillInputRange,
+    outputRange: dot3FillOutputRange,
+    extrapolate: 'clamp'
+  });
+  const dot3Opacity = new _Animated.default.Value(1);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: styles.container,
+    accessible: true,
+    accessibilityLabel: label,
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+      width: width,
+      height: height,
+      viewBox: `0 0 ${width} ${height}`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedCircle, {
+        cx: size,
+        cy: reduceMotion ? baseY : dot1Cy,
+        r: padding,
+        fill: reduceMotion ? color : dot1Fill,
+        opacity: reduceMotion ? 1 : dot1Opacity
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedCircle, {
+        cx: 2 * size + spacingX,
+        cy: reduceMotion ? baseY : dot2Cy,
+        r: padding,
+        fill: reduceMotion ? indicatorBackgroundColor : dot2Fill,
+        opacity: reduceMotion ? 1 : dot2Opacity
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedCircle, {
+        cx: 3 * size + 2 * spacingX,
+        cy: reduceMotion ? baseY : dot3Cy,
+        r: padding,
+        fill: reduceMotion ? indicatorBackgroundColor : dot3Fill,
+        opacity: reduceMotion ? 1 : dot3Opacity
+      })]
+    })
+  });
+});
+Dots.displayName = 'Dots';
+Dots.propTypes = _shared.propTypes;
+const styles = _StyleSheet.default.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = Dots;

package/lib/cjs/ActivityIndicator/Spinner.js

@@ -9,27 +9,15 @@ var _shared = require("./shared");
 var _A11yInfoProvider = require("../A11yInfoProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SVG_RADIUS = 20;
-const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
-const MIN_SVG_LENGTH = _shared.MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
-const MAX_SVG_LENGTH = (1 - _shared.MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
-const animationProps = {
-  begin: '0s',
-  dur: `${_shared.DURATION}ms`,
-  fill: 'freeze',
+const animateProps = {
+  keyTimes: _shared.SPINNER_KEYTIMES,
   repeatCount: 'indefinite'
 };
-const bezierProps = {
-  calcMode: 'spline',
-  keyTimes: '0; 0.5; 1',
-  keySplines: `${_shared.BEZIER.join(', ')} ; ${_shared.BEZIER.join(', ')}`
-};
-// We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
-// It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
 const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     size,
     color,
+    indicatorBackgroundColor,
     thickness,
     label,
     isStatic = false
@@ -38,46 +26,65 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     reduceMotionEnabled
   } = (0, _A11yInfoProvider.useA11yInfo)();
   const reduceMotion = reduceMotionEnabled || isStatic;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  const strokeWidth = thickness * _shared.SVG_SIZE / size;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
     ref: ref,
     width: `${size}px`,
     height: `${size}px`,
-    viewBox: "0 0 48 48",
+    viewBox: `0 0 ${_shared.SVG_SIZE} ${_shared.SVG_SIZE}`,
     "aria-valuetext": label,
     role: "progressbar",
-    "aria-busy": true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-      children: [reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
-        attributeName: "transform",
-        type: "rotate",
-        values: `-180 24 24;${360 + _shared.MIN_STROKE_ANGLE - 180} 24 24`,
-        ...animationProps
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-        fill: "none",
-        stroke: color,
-        strokeWidth: thickness * 48 / size,
-        strokeLinecap: "round",
-        cx: "24",
-        cy: "24",
-        r: "20",
-        strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
-        strokeDashoffset: 0,
-        vectorEffect: "non-scaling-stroke",
-        children: reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
-            attributeName: "stroke-dashoffset",
-            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
-            ...animationProps,
-            ...bezierProps
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
-            attributeName: "stroke-dasharray",
-            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
-            ...animationProps,
-            ...bezierProps
-          })]
-        })
-      })]
-    })
+    "aria-busy": "true",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      fill: "none",
+      stroke: indicatorBackgroundColor,
+      strokeWidth: strokeWidth,
+      cx: _shared.SVG_CENTER,
+      cy: _shared.SVG_CENTER,
+      r: _shared.SPINNER_RADIUS
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      fill: "none",
+      stroke: color,
+      strokeWidth: strokeWidth,
+      strokeLinecap: "round",
+      cx: _shared.SVG_CENTER,
+      cy: _shared.SVG_CENTER,
+      r: _shared.SPINNER_RADIUS,
+      strokeDasharray: `${_shared.SPINNER_DASHARRAY_MIN * _shared.SVG_CIRCUMFERENCE}, ${_shared.SPINNER_DASHARRAY_MAX * _shared.SVG_CIRCUMFERENCE}`,
+      strokeDashoffset: "0"
+      // Circle rotated -90° so that 0% is at the top (12 o'clock).
+      ,
+      transform: _shared.ROTATION_TRANSFORM,
+      children: reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
+          attributeName: "transform",
+          type: "rotate",
+          from: "0 24 24",
+          to: `${_shared.SPINNER_ROTATION_DEGREES} ${_shared.SVG_CENTER} ${_shared.SVG_CENTER}`,
+          dur: `${_shared.DURATION}ms`,
+          repeatCount: "indefinite",
+          additive: "sum"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+          attributeName: "stroke-dasharray",
+          dur: `${_shared.DURATION}ms`,
+          values: `
+                  ${_shared.SPINNER_DASHARRAY_MIN * _shared.SVG_CIRCUMFERENCE},${_shared.SPINNER_DASHARRAY_MAX * _shared.SVG_CIRCUMFERENCE};
+                  ${_shared.SPINNER_DASHARRAY_HALF * _shared.SVG_CIRCUMFERENCE},${_shared.SPINNER_DASHARRAY_HALF * _shared.SVG_CIRCUMFERENCE};
+                  ${_shared.SPINNER_DASHARRAY_MIN * _shared.SVG_CIRCUMFERENCE},${_shared.SPINNER_DASHARRAY_MAX * _shared.SVG_CIRCUMFERENCE}
+                `,
+          ...animateProps
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+          attributeName: "stroke-dashoffset",
+          dur: `${_shared.DURATION}ms`,
+          values: `
+                  0;
+                  0;
+                  -${_shared.SPINNER_DASHOFFSET_FACTOR * _shared.SVG_CIRCUMFERENCE}
+                `,
+          ...animateProps
+        })]
+      })
+    })]
   });
 });
 Spinner.displayName = 'Spinner';