@zendeskgarden/react-loaders 9.12.2 → 9.12.4

package/dist/esm/elements/Dots.js

@@ -14,17 +14,16 @@ import '../styled/StyledSpinnerCircle.js';
 import { StyledSVG } from '../styled/StyledSVG.js';
 import '../styled/StyledInline.js';
 
-const COMPONENT_ID = 'loaders.dots';
-const Dots = forwardRef((_ref, ref) => {
-  let {
-    size = 'inherit',
-    color = 'inherit',
-    duration = 1250,
-    delayMS = 750,
-    ...other
-  } = _ref;
+const COMPONENT_ID$2 = 'loaders.dots';
+const Dots = forwardRef(({
+  size = 'inherit',
+  color = 'inherit',
+  duration = 1250,
+  delayMS = 750,
+  ...other
+}, ref) => {
   return React.createElement(StyledSVG, Object.assign({
-    "data-garden-id": COMPONENT_ID,
+    "data-garden-id": COMPONENT_ID$2,
     ref: ref,
     $fontSize: size,
     $color: color,

package/dist/esm/elements/Inline.js

@@ -15,12 +15,11 @@ import '../styled/StyledSpinnerCircle.js';
 import '../styled/StyledSVG.js';
 import { StyledInline, StyledCircle } from '../styled/StyledInline.js';
 
-const Inline = forwardRef((_ref, ref) => {
-  let {
-    size = 16,
-    color = 'inherit',
-    ...other
-  } = _ref;
+const Inline = forwardRef(({
+  size = 16,
+  color = 'inherit',
+  ...other
+}, ref) => {
   const ariaLabel = useText(Inline, other, 'aria-label', 'loading');
   return (
     React.createElement(StyledInline, Object.assign({

package/dist/esm/elements/Progress.js

@@ -16,23 +16,22 @@ import '../styled/StyledSpinnerCircle.js';
 import '../styled/StyledSVG.js';
 import '../styled/StyledInline.js';
 
-const COMPONENT_ID = 'loaders.progress';
-const Progress = React.forwardRef((_ref, ref) => {
-  let {
-    color,
-    value = 0,
-    size = 'medium',
-    'aria-label': label,
-    ...other
-  } = _ref;
+const COMPONENT_ID$1 = 'loaders.progress';
+const Progress = React.forwardRef(({
+  color,
+  value = 0,
+  size = 'medium',
+  'aria-label': label,
+  ...other
+}, ref) => {
   const percentage = Math.max(0, Math.min(100, value));
   const ariaLabel = useText(Progress, {
     'aria-label': label
   }, 'aria-label', 'Progress');
   return (
     React.createElement(StyledProgressBackground, Object.assign({
-      "data-garden-id": COMPONENT_ID,
-      "data-garden-version": '9.12.2',
+      "data-garden-id": COMPONENT_ID$1,
+      "data-garden-version": '9.12.4',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,

package/dist/esm/elements/Skeleton.js

@@ -14,13 +14,12 @@ import '../styled/StyledSpinnerCircle.js';
 import '../styled/StyledSVG.js';
 import '../styled/StyledInline.js';
 
-const Skeleton = forwardRef((_ref, ref) => {
-  let {
-    width = '100%',
-    height = '100%',
-    isLight,
-    ...other
-  } = _ref;
+const Skeleton = forwardRef(({
+  width = '100%',
+  height = '100%',
+  isLight,
+  ...other
+}, ref) => {
   return React.createElement(StyledSkeleton, Object.assign({
     ref: ref,
     $isLight: isLight,

package/dist/esm/elements/Spinner.js

@@ -36,14 +36,13 @@ const computeFrames = (frames, duration) => {
     return acc;
   }, {});
 };
-const Spinner = forwardRef((_ref, ref) => {
-  let {
-    size = 'inherit',
-    duration = 1250,
-    color = 'inherit',
-    delayMS = 750,
-    ...other
-  } = _ref;
+const Spinner = forwardRef(({
+  size = 'inherit',
+  duration = 1250,
+  color = 'inherit',
+  delayMS = 750,
+  ...other
+}, ref) => {
   const strokeWidthValues = computeFrames(STROKE_WIDTH_FRAMES, duration);
   const rotationValues = computeFrames(ROTATION_FRAMES, duration);
   const dasharrayValues = computeFrames(DASHARRAY_FRAMES, duration);

package/dist/esm/styled/StyledDots.js

@@ -14,7 +14,7 @@ const StyledDotsCircle = styled.circle.attrs({
   displayName: "StyledDots__StyledDotsCircle",
   componentId: "sc-1ltah7e-0"
 })([""]);
-const animationStyles = (animationName, props) => {
+const animationStyles$1 = (animationName, props) => {
   return css(["animation:", " ", "ms ", "ms linear infinite;"], animationName, props.$duration, props.$delay);
 };
 const StyledDotsCircleOne = styled(StyledDotsCircle).attrs({
@@ -22,18 +22,18 @@ const StyledDotsCircleOne = styled(StyledDotsCircle).attrs({
 }).withConfig({
   displayName: "StyledDots__StyledDotsCircleOne",
   componentId: "sc-1ltah7e-1"
-})(["", ";"], props => animationStyles(dotOneKeyframes, props));
+})(["", ";"], props => animationStyles$1(dotOneKeyframes, props));
 const StyledDotsCircleTwo = styled(StyledDotsCircle).attrs(() => ({
   cx: 40
 })).withConfig({
   displayName: "StyledDots__StyledDotsCircleTwo",
   componentId: "sc-1ltah7e-2"
-})(["", ";"], props => animationStyles(dotTwoKeyframes, props));
+})(["", ";"], props => animationStyles$1(dotTwoKeyframes, props));
 const StyledDotsCircleThree = styled(StyledDotsCircle).attrs(() => ({
   cx: 71
 })).withConfig({
   displayName: "StyledDots__StyledDotsCircleThree",
   componentId: "sc-1ltah7e-3"
-})(["", ";"], props => animationStyles(dotThreeKeyframes, props));
+})(["", ";"], props => animationStyles$1(dotThreeKeyframes, props));
 
 export { StyledDotsCircleOne, StyledDotsCircleThree, StyledDotsCircleTwo };

package/dist/esm/styled/StyledInline.js

@@ -4,15 +4,14 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled, { css, keyframes } from 'styled-components';
+import styled, { keyframes, css } from 'styled-components';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'loaders.inline';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $color
-  } = _ref;
+const COMPONENT_ID$3 = 'loaders.inline';
+const colorStyles = ({
+  theme,
+  $color
+}) => {
   const options = $color.includes('.') ? {
     variable: $color,
     theme
@@ -22,12 +21,9 @@ const colorStyles = _ref => {
   };
   return css(["color:", ";"], getColor(options));
 };
-const retrieveAnimation = _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return keyframes(["0%,100%{opacity:", ";}50%{opacity:", ";}"], theme.opacity[200], theme.opacity[600]);
-};
+const retrieveAnimation = ({
+  theme
+}) => keyframes(["0%,100%{opacity:", ";}50%{opacity:", ";}"], theme.opacity[200], theme.opacity[600]);
 const StyledCircle = styled.circle.attrs({
   fill: 'currentColor',
   cy: 2,
@@ -37,8 +33,8 @@ const StyledCircle = styled.circle.attrs({
   componentId: "sc-fxsb9l-0"
 })([""]);
 const StyledInline = styled.svg.attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2',
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.12.4',
   viewBox: '0 0 16 4',
   width: props.$size,
   height: props.$size * 0.25

package/dist/esm/styled/StyledLoadingPlaceholder.js

@@ -8,13 +8,12 @@ import styled, { css } from 'styled-components';
 import { getValueAndUnit } from 'polished';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'loaders.loading_placeholder';
-const sizeStyles = _ref => {
-  let {
-    $width = '1em',
-    $height = '0.9em',
-    $fontSize
-  } = _ref;
+const COMPONENT_ID$5 = 'loaders.loading_placeholder';
+const sizeStyles$1 = ({
+  $width = '1em',
+  $height = '0.9em',
+  $fontSize
+}) => {
   const [value, unit] = getValueAndUnit($fontSize);
   let fontSize;
   if (unit === undefined) {
@@ -25,12 +24,12 @@ const sizeStyles = _ref => {
   return css(["width:", ";height:", ";font-size:", ";"], $width, $height, fontSize);
 };
 const StyledLoadingPlaceholder = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2',
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.12.4',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
   componentId: "sc-x3bwsx-0"
-})(["display:inline-block;", ";", ""], sizeStyles, componentStyles);
+})(["display:inline-block;", ";", ""], sizeStyles$1, componentStyles);
 
 export { StyledLoadingPlaceholder };

package/dist/esm/styled/StyledProgress.js

@@ -19,11 +19,10 @@ const sizeToHeight = ($size, theme) => {
 };
 const sizeToBorderRadius = ($size, theme) => sizeToHeight($size, theme) / 2;
 const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $color
-  } = _ref;
+const colorStyles$2 = ({
+  theme,
+  $color
+}) => {
   const backgroundColor = getColor({
     theme,
     transparency: theme.opacity[200],
@@ -55,15 +54,15 @@ const colorStyles = _ref => {
 };
 const StyledProgressBackground = styled.div.attrs({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
   componentId: "sc-2g8w4s-0"
-})(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => sizeToBorderRadius(props.$size, props.theme), colorStyles, componentStyles);
+})(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => sizeToBorderRadius(props.$size, props.theme), colorStyles$2, componentStyles);
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 const StyledProgressIndicator = styled.div.attrs({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledProgress__StyledProgressIndicator",
   componentId: "sc-2g8w4s-1"

package/dist/esm/styled/StyledSVG.js

@@ -9,11 +9,10 @@ import { getValueAndUnit } from 'polished';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { delayedVisibilityKeyframes } from '../utils/animations.js';
 
-const colorStyles = _ref => {
-  let {
-    theme,
-    $color = 'inherit'
-  } = _ref;
+const colorStyles$1 = ({
+  theme,
+  $color = 'inherit'
+}) => {
   const options = $color.includes('.') ? {
     variable: $color,
     theme
@@ -23,12 +22,11 @@ const colorStyles = _ref => {
   };
   return css(["color:", ";"], getColor(options));
 };
-const sizeStyles = _ref2 => {
-  let {
-    $containerWidth = '1em',
-    $containerHeight = '0.9em',
-    $fontSize = 'inherit'
-  } = _ref2;
+const sizeStyles = ({
+  $containerWidth = '1em',
+  $containerHeight = '0.9em',
+  $fontSize = 'inherit'
+}) => {
   const [value, unit] = getValueAndUnit($fontSize);
   let fontSize;
   if (unit === undefined) {
@@ -38,17 +36,16 @@ const sizeStyles = _ref2 => {
   }
   return css(["width:", ";height:", ";font-size:", ";"], $containerWidth, $containerHeight, fontSize);
 };
-const delayedVisibilityStyles = _ref3 => {
-  let {
-    $delayShow
-  } = _ref3;
+const delayedVisibilityStyles = ({
+  $delayShow
+}) => {
   if ($delayShow && $delayShow !== 0) {
     return css(["animation:", " 1ms ", "ms linear 1 forwards;visibility:hidden;"], delayedVisibilityKeyframes, $delayShow);
   }
   return undefined;
 };
 const StyledSVG = styled.svg.attrs(props => ({
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   xmlns: 'http://www.w3.org/2000/svg',
   focusable: 'false',
   viewBox: `0 0 ${props.$width} ${props.$height}`,
@@ -56,6 +53,6 @@ const StyledSVG = styled.svg.attrs(props => ({
 })).withConfig({
   displayName: "StyledSVG",
   componentId: "sc-1xtc3kx-0"
-})(["", ";", ";", ";", ";"], sizeStyles, colorStyles, componentStyles, delayedVisibilityStyles);
+})(["", ";", ";", ";", ";"], sizeStyles, colorStyles$1, componentStyles, delayedVisibilityStyles);
 
 export { StyledSVG };

package/dist/esm/styled/StyledSkeleton.js

@@ -7,15 +7,14 @@
 import styled, { keyframes, css } from 'styled-components';
 import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'loaders.skeleton';
+const COMPONENT_ID$4 = 'loaders.skeleton';
 const fadeInAnimation = keyframes(["0%,60%{opacity:0;}100%{opacity:1;}"]);
 const skeletonAnimation = keyframes(["0%{transform:translateX(-100%);}100%{transform:translateX(100%);}"]);
 const skeletonRtlAnimation = keyframes(["0%{transform:translateX(100%);}100%{transform:translateX(-100%)}"]);
-const getBackgroundColor = _ref => {
-  let {
-    theme,
-    $isLight
-  } = _ref;
+const getBackgroundColor = ({
+  theme,
+  $isLight
+}) => {
   let backgroundColor;
   if ($isLight) {
     backgroundColor = getColor({
@@ -38,10 +37,9 @@ const getBackgroundColor = _ref => {
   }
   return backgroundColor;
 };
-const animationStyles = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const animationStyles = ({
+  theme
+}) => {
   if (theme.rtl) {
     return css(["animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonRtlAnimation);
   }
@@ -51,8 +49,8 @@ const gradientStyles = props => {
   return css(["background-image:linear-gradient( ", ",transparent,", ",transparent );"], props.theme.rtl ? '-45deg' : '45deg', getBackgroundColor);
 };
 const StyledSkeleton = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"

package/dist/index.cjs.js

@@ -54,12 +54,11 @@ const StyledDotsCircleThree = styled__default.default(StyledDotsCircle).attrs(()
 })(["", ";"], props => animationStyles$1(dotThreeKeyframes, props));
 
 const COMPONENT_ID$5 = 'loaders.loading_placeholder';
-const sizeStyles$1 = _ref => {
-  let {
-    $width = '1em',
-    $height = '0.9em',
-    $fontSize
-  } = _ref;
+const sizeStyles$1 = ({
+  $width = '1em',
+  $height = '0.9em',
+  $fontSize
+}) => {
   const [value, unit] = polished.getValueAndUnit($fontSize);
   let fontSize;
   if (unit === undefined) {
@@ -71,7 +70,7 @@ const sizeStyles$1 = _ref => {
 };
 const StyledLoadingPlaceholder = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -90,11 +89,10 @@ const sizeToHeight = ($size, theme) => {
 };
 const sizeToBorderRadius = ($size, theme) => sizeToHeight($size, theme) / 2;
 const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
-const colorStyles$2 = _ref => {
-  let {
-    theme,
-    $color
-  } = _ref;
+const colorStyles$2 = ({
+  theme,
+  $color
+}) => {
   const backgroundColor = reactTheming.getColor({
     theme,
     transparency: theme.opacity[200],
@@ -126,7 +124,7 @@ const colorStyles$2 = _ref => {
 };
 const StyledProgressBackground = styled__default.default.div.attrs({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
   componentId: "sc-2g8w4s-0"
@@ -134,7 +132,7 @@ const StyledProgressBackground = styled__default.default.div.attrs({
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 const StyledProgressIndicator = styled__default.default.div.attrs({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledProgress__StyledProgressIndicator",
   componentId: "sc-2g8w4s-1"
@@ -144,11 +142,10 @@ const COMPONENT_ID$4 = 'loaders.skeleton';
 const fadeInAnimation = styled.keyframes(["0%,60%{opacity:0;}100%{opacity:1;}"]);
 const skeletonAnimation = styled.keyframes(["0%{transform:translateX(-100%);}100%{transform:translateX(100%);}"]);
 const skeletonRtlAnimation = styled.keyframes(["0%{transform:translateX(100%);}100%{transform:translateX(-100%)}"]);
-const getBackgroundColor = _ref => {
-  let {
-    theme,
-    $isLight
-  } = _ref;
+const getBackgroundColor = ({
+  theme,
+  $isLight
+}) => {
   let backgroundColor;
   if ($isLight) {
     backgroundColor = reactTheming.getColor({
@@ -171,10 +168,9 @@ const getBackgroundColor = _ref => {
   }
   return backgroundColor;
 };
-const animationStyles = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const animationStyles = ({
+  theme
+}) => {
   if (theme.rtl) {
     return styled.css(["animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonRtlAnimation);
   }
@@ -185,7 +181,7 @@ const gradientStyles = props => {
 };
 const StyledSkeleton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -206,11 +202,10 @@ const StyledSpinnerCircle = styled__default.default.circle.attrs(props => ({
   componentId: "sc-o4kd70-0"
 })([""]);
 
-const colorStyles$1 = _ref => {
-  let {
-    theme,
-    $color = 'inherit'
-  } = _ref;
+const colorStyles$1 = ({
+  theme,
+  $color = 'inherit'
+}) => {
   const options = $color.includes('.') ? {
     variable: $color,
     theme
@@ -220,12 +215,11 @@ const colorStyles$1 = _ref => {
   };
   return styled.css(["color:", ";"], reactTheming.getColor(options));
 };
-const sizeStyles = _ref2 => {
-  let {
-    $containerWidth = '1em',
-    $containerHeight = '0.9em',
-    $fontSize = 'inherit'
-  } = _ref2;
+const sizeStyles = ({
+  $containerWidth = '1em',
+  $containerHeight = '0.9em',
+  $fontSize = 'inherit'
+}) => {
   const [value, unit] = polished.getValueAndUnit($fontSize);
   let fontSize;
   if (unit === undefined) {
@@ -235,17 +229,16 @@ const sizeStyles = _ref2 => {
   }
   return styled.css(["width:", ";height:", ";font-size:", ";"], $containerWidth, $containerHeight, fontSize);
 };
-const delayedVisibilityStyles = _ref3 => {
-  let {
-    $delayShow
-  } = _ref3;
+const delayedVisibilityStyles = ({
+  $delayShow
+}) => {
   if ($delayShow && $delayShow !== 0) {
     return styled.css(["animation:", " 1ms ", "ms linear 1 forwards;visibility:hidden;"], delayedVisibilityKeyframes, $delayShow);
   }
   return undefined;
 };
 const StyledSVG = styled__default.default.svg.attrs(props => ({
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   xmlns: 'http://www.w3.org/2000/svg',
   focusable: 'false',
   viewBox: `0 0 ${props.$width} ${props.$height}`,
@@ -256,11 +249,10 @@ const StyledSVG = styled__default.default.svg.attrs(props => ({
 })(["", ";", ";", ";", ";"], sizeStyles, colorStyles$1, reactTheming.componentStyles, delayedVisibilityStyles);
 
 const COMPONENT_ID$3 = 'loaders.inline';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $color
-  } = _ref;
+const colorStyles = ({
+  theme,
+  $color
+}) => {
   const options = $color.includes('.') ? {
     variable: $color,
     theme
@@ -270,12 +262,9 @@ const colorStyles = _ref => {
   };
   return styled.css(["color:", ";"], reactTheming.getColor(options));
 };
-const retrieveAnimation = _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return styled.keyframes(["0%,100%{opacity:", ";}50%{opacity:", ";}"], theme.opacity[200], theme.opacity[600]);
-};
+const retrieveAnimation = ({
+  theme
+}) => styled.keyframes(["0%,100%{opacity:", ";}50%{opacity:", ";}"], theme.opacity[200], theme.opacity[600]);
 const StyledCircle = styled__default.default.circle.attrs({
   fill: 'currentColor',
   cy: 2,
@@ -286,7 +275,7 @@ const StyledCircle = styled__default.default.circle.attrs({
 })([""]);
 const StyledInline = styled__default.default.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   viewBox: '0 0 16 4',
   width: props.$size,
   height: props.$size * 0.25
@@ -296,14 +285,13 @@ const StyledInline = styled__default.default.svg.attrs(props => ({
 })(["", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], colorStyles, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'loaders.dots';
-const Dots = React.forwardRef((_ref, ref) => {
-  let {
-    size = 'inherit',
-    color = 'inherit',
-    duration = 1250,
-    delayMS = 750,
-    ...other
-  } = _ref;
+const Dots = React.forwardRef(({
+  size = 'inherit',
+  color = 'inherit',
+  duration = 1250,
+  delayMS = 750,
+  ...other
+}, ref) => {
   return React__default.default.createElement(StyledSVG, Object.assign({
     "data-garden-id": COMPONENT_ID$2,
     ref: ref,
@@ -336,14 +324,13 @@ Dots.propTypes = {
 const SIZE = ['small', 'medium', 'large'];
 
 const COMPONENT_ID$1 = 'loaders.progress';
-const Progress = React__default.default.forwardRef((_ref, ref) => {
-  let {
-    color,
-    value = 0,
-    size = 'medium',
-    'aria-label': label,
-    ...other
-  } = _ref;
+const Progress = React__default.default.forwardRef(({
+  color,
+  value = 0,
+  size = 'medium',
+  'aria-label': label,
+  ...other
+}, ref) => {
   const percentage = Math.max(0, Math.min(100, value));
   const ariaLabel = reactTheming.useText(Progress, {
     'aria-label': label
@@ -351,7 +338,7 @@ const Progress = React__default.default.forwardRef((_ref, ref) => {
   return (
     React__default.default.createElement(StyledProgressBackground, Object.assign({
       "data-garden-id": COMPONENT_ID$1,
-      "data-garden-version": '9.12.2',
+      "data-garden-version": '9.12.4',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,
@@ -373,13 +360,12 @@ Progress.propTypes = {
   size: PropTypes__default.default.oneOf(SIZE)
 };
 
-const Skeleton = React.forwardRef((_ref, ref) => {
-  let {
-    width = '100%',
-    height = '100%',
-    isLight,
-    ...other
-  } = _ref;
+const Skeleton = React.forwardRef(({
+  width = '100%',
+  height = '100%',
+  isLight,
+  ...other
+}, ref) => {
   return React__default.default.createElement(StyledSkeleton, Object.assign({
     ref: ref,
     $isLight: isLight,
@@ -478,14 +464,13 @@ const computeFrames = (frames, duration) => {
     return acc;
   }, {});
 };
-const Spinner = React.forwardRef((_ref, ref) => {
-  let {
-    size = 'inherit',
-    duration = 1250,
-    color = 'inherit',
-    delayMS = 750,
-    ...other
-  } = _ref;
+const Spinner = React.forwardRef(({
+  size = 'inherit',
+  duration = 1250,
+  color = 'inherit',
+  delayMS = 750,
+  ...other
+}, ref) => {
   const strokeWidthValues = computeFrames(STROKE_WIDTH_FRAMES, duration);
   const rotationValues = computeFrames(ROTATION_FRAMES, duration);
   const dasharrayValues = computeFrames(DASHARRAY_FRAMES, duration);
@@ -532,12 +517,11 @@ Spinner.propTypes = {
   delayMS: PropTypes__default.default.number
 };
 
-const Inline = React.forwardRef((_ref, ref) => {
-  let {
-    size = 16,
-    color = 'inherit',
-    ...other
-  } = _ref;
+const Inline = React.forwardRef(({
+  size = 16,
+  color = 'inherit',
+  ...other
+}, ref) => {
   const ariaLabel = reactTheming.useText(Inline, other, 'aria-label', 'loading');
   return (
     React__default.default.createElement(StyledInline, Object.assign({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "9.12.2",
+  "version": "9.12.4",
   "description": "Components relating to loaders in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -32,7 +32,7 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.12.2"
+    "@zendeskgarden/react-theming": "^9.12.4"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "9b6f34bf0eda4bee3b47f97a437aa9b7f3008af4"
+  "gitHead": "e79e9687e6bcbd097c059add2938cdae59a5173b"
 }