@zendeskgarden/react-loaders 8.47.0 → 8.48.1

package/dist/index.cjs.js

@@ -139,7 +139,7 @@ var dotOneKeyframes = styled.keyframes(["0%{transform:translate(0,5px);}3%{trans
 var dotTwoKeyframes = styled.keyframes(["4%{transform:translate(0);}6%{transform:translate(-1px);}8%{transform:translate(-2px);}9%{transform:translate(-5px);}11%{transform:translate(-7px);}13%{transform:translate(-12px);}14%{transform:translate(-17px);}16%{transform:translate(-19px);}18%{transform:translate(-22px);}19%{transform:translate(-25px);}21%{transform:translate(-26px);}23%{transform:translate(-27px);}24%{transform:translate(-28px);}26%{transform:translate(-29px);}29%{transform:translate(-30px);}33%,89%{transform:translate(-31px);}91%{transform:translate(-31px,1px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,3px);}99%{transform:translate(-31px,4px);}100%{transform:translate(-31px,5px);}"]);
 var dotThreeKeyframes = styled.keyframes(["39%{transform:translate(0);}44%{transform:translate(0,1px);}46%{transform:translate(0,2px);}48%{transform:translate(0,3px);}49%{transform:translate(0,4px);}51%{transform:translate(0,5px);}53%{transform:translate(-1px,-6px);}54%{transform:translate(-2px,-13px);}56%{transform:translate(-3px,-15px);}58%{transform:translate(-5px,-19px);}59%{transform:translate(-7px,-21px);}61%{transform:translate(-8px,-22px);}63%{transform:translate(-9px,-24px);}64%{transform:translate(-11px,-25px);}66%{transform:translate(-12px,-26px);}74%{transform:translate(-19px,-26px);}76%{transform:translate(-20px,-25px);}78%{transform:translate(-22px,-24px);}81%{transform:translate(-24px,-21px);}83%{transform:translate(-26px,-19px);}84%{transform:translate(-28px,-15px);}86%{transform:translate(-29px,-13px);}88%{transform:translate(-30px,-6px);}89%{transform:translate(-31px,5px);}91%{transform:translate(-31px,4px);}93%{transform:translate(-31px,3px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,1px);}100%{transform:translate(-31px);}"]);
 
-var StyledDotsCircle = styled__default['default'].circle.attrs({
+var StyledDotsCircle = styled__default["default"].circle.attrs({
   cy: 36,
   r: 9
 }).withConfig({
@@ -149,7 +149,7 @@ var StyledDotsCircle = styled__default['default'].circle.attrs({
 StyledDotsCircle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var StyledDotsCircleOne = styled__default['default'](StyledDotsCircle).attrs({
+var StyledDotsCircleOne = styled__default["default"](StyledDotsCircle).attrs({
   cx: 9
 }).withConfig({
   displayName: "StyledDots__StyledDotsCircleOne",
@@ -161,7 +161,7 @@ var StyledDotsCircleOne = styled__default['default'](StyledDotsCircle).attrs({
 StyledDotsCircleOne.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var StyledDotsCircleTwo = styled__default['default'](StyledDotsCircle).attrs(function () {
+var StyledDotsCircleTwo = styled__default["default"](StyledDotsCircle).attrs(function () {
   return {
     cx: 40
   };
@@ -175,7 +175,7 @@ var StyledDotsCircleTwo = styled__default['default'](StyledDotsCircle).attrs(fun
 StyledDotsCircleTwo.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var StyledDotsCircleThree = styled__default['default'](StyledDotsCircle).attrs(function () {
+var StyledDotsCircleThree = styled__default["default"](StyledDotsCircle).attrs(function () {
   return {
     cx: 71
   };
@@ -191,9 +191,9 @@ StyledDotsCircleThree.defaultProps = {
 };
 
 var COMPONENT_ID$5 = 'loaders.loading_placeholder';
-var StyledLoadingPlaceholder = styled__default['default'].div.attrs({
+var StyledLoadingPlaceholder = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.47.0',
+  'data-garden-version': '8.48.1',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -225,10 +225,10 @@ var sizeToBorderRadius = function sizeToBorderRadius(size, theme) {
   return sizeToHeight(size, theme) / 2;
 };
 var PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
-var StyledProgressBackground = styled__default['default'].div.attrs(function (props) {
+var StyledProgressBackground = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
   };
 }).withConfig({
@@ -249,10 +249,10 @@ StyledProgressBackground.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 var PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
-var StyledProgressIndicator = styled__default['default'].div.attrs(function (props) {
+var StyledProgressIndicator = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     height: props.height || sizeToHeight(props.size, props.theme),
     borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
   };
@@ -296,9 +296,9 @@ var retrieveSkeletonGradient = function retrieveSkeletonGradient(_ref3) {
       isLight = _ref3.isLight;
   return styled.css(["background-image:linear-gradient( ", ",transparent,", ",transparent );"], theme.rtl ? '-45deg' : '45deg', isLight ? reactTheming.getColor('chromeHue', 700, theme, 0.4) : polished.rgba(theme.colors.background, 0.6));
 };
-var StyledSkeleton = styled__default['default'].div.attrs({
+var StyledSkeleton = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -317,7 +317,7 @@ StyledSkeleton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var StyledSpinnerCircle = styled__default['default'].circle.attrs(function (props) {
+var StyledSpinnerCircle = styled__default["default"].circle.attrs(function (props) {
   return {
     cx: 40,
     cy: 40,
@@ -337,9 +337,9 @@ StyledSpinnerCircle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var StyledSVG = styled__default['default'].svg.attrs(function (props) {
+var StyledSVG = styled__default["default"].svg.attrs(function (props) {
   return {
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     xmlns: 'http://www.w3.org/2000/svg',
     width: props.width,
     height: props.height,
@@ -367,7 +367,7 @@ StyledSVG.defaultProps = {
 
 var COMPONENT_ID$3 = 'loaders.inline';
 var PULSE_ANIMATION = styled.keyframes(["0%,100%{opacity:.2;}50%{opacity:.8;}"]);
-var StyledCircle = styled__default['default'].circle.attrs({
+var StyledCircle = styled__default["default"].circle.attrs({
   fill: 'currentColor',
   cy: 2,
   r: 2
@@ -378,10 +378,10 @@ var StyledCircle = styled__default['default'].circle.attrs({
 StyledCircle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var StyledInlineTypingSVG = styled__default['default'].svg.attrs(function (props) {
+var StyledInlineTypingSVG = styled__default["default"].svg.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     viewBox: '0 0 16 4',
     width: props.size,
     height: props.size * 0.25
@@ -404,7 +404,7 @@ StyledInlineTypingSVG.defaultProps = {
 
 var _excluded$4 = ["size", "color", "duration", "delayMS"];
 var COMPONENT_ID$2 = 'loaders.dots';
-var Dots = function Dots(_ref) {
+var Dots = React.forwardRef(function (_ref, ref) {
   var size = _ref.size,
       color = _ref.color,
       duration = _ref.duration,
@@ -435,34 +435,36 @@ var Dots = function Dots(_ref) {
     }
   });
   if (!delayComplete && delayMS !== 0) {
-    return React__default['default'].createElement(StyledLoadingPlaceholder, {
+    return React__default["default"].createElement(StyledLoadingPlaceholder, {
       fontSize: size
     }, "\xA0");
   }
-  return React__default['default'].createElement(StyledSVG, _extends({
+  return React__default["default"].createElement(StyledSVG, _extends({
+    ref: ref,
     fontSize: size,
     color: color,
     width: "80",
     height: "72",
     dataGardenId: COMPONENT_ID$2
-  }, other), React__default['default'].createElement("g", {
+  }, other), React__default["default"].createElement("g", {
     fill: "currentColor"
-  }, React__default['default'].createElement(StyledDotsCircleOne, {
+  }, React__default["default"].createElement(StyledDotsCircleOne, {
     duration: duration,
     ref: dotOne
-  }), React__default['default'].createElement(StyledDotsCircleTwo, {
+  }), React__default["default"].createElement(StyledDotsCircleTwo, {
     duration: duration,
     ref: dotTwo
-  }), React__default['default'].createElement(StyledDotsCircleThree, {
+  }), React__default["default"].createElement(StyledDotsCircleThree, {
     duration: duration,
     ref: dotThree
   })));
-};
+});
+Dots.displayName = 'Dots';
 Dots.propTypes = {
-  size: PropTypes__default['default'].any,
-  duration: PropTypes__default['default'].number,
-  color: PropTypes__default['default'].string,
-  delayMS: PropTypes__default['default'].number
+  size: PropTypes__default["default"].any,
+  duration: PropTypes__default["default"].number,
+  color: PropTypes__default["default"].string,
+  delayMS: PropTypes__default["default"].number
 };
 Dots.defaultProps = {
   size: 'inherit',
@@ -473,30 +475,30 @@ Dots.defaultProps = {
 
 var _excluded$3 = ["value", "size"];
 var COMPONENT_ID$1 = 'loaders.progress';
-var Progress = React__default['default'].forwardRef(function (_ref, ref) {
+var Progress = React__default["default"].forwardRef(function (_ref, ref) {
   var value = _ref.value,
       size = _ref.size,
       other = _objectWithoutProperties(_ref, _excluded$3);
   var percentage = Math.max(0, Math.min(100, value));
-  return React__default['default'].createElement(StyledProgressBackground, _extends({
+  return React__default["default"].createElement(StyledProgressBackground, _extends({
     "data-garden-id": COMPONENT_ID$1,
-    "data-garden-version": '8.47.0',
+    "data-garden-version": '8.48.1',
     "aria-valuemax": 100,
     "aria-valuemin": 0,
     "aria-valuenow": percentage,
     role: "progressbar",
     size: size,
     ref: ref
-  }, other), React__default['default'].createElement(StyledProgressIndicator, {
+  }, other), React__default["default"].createElement(StyledProgressIndicator, {
     value: percentage,
     size: size
   }));
 });
 Progress.displayName = 'Progress';
 Progress.propTypes = {
-  color: PropTypes__default['default'].string,
-  value: PropTypes__default['default'].number.isRequired,
-  size: PropTypes__default['default'].oneOf(['small', 'medium', 'large'])
+  color: PropTypes__default["default"].string,
+  value: PropTypes__default["default"].number.isRequired,
+  size: PropTypes__default["default"].oneOf(['small', 'medium', 'large'])
 };
 Progress.defaultProps = {
   value: 0,
@@ -504,21 +506,23 @@ Progress.defaultProps = {
 };
 
 var _excluded$2 = ["width", "height", "isLight"];
-var Skeleton = function Skeleton(_ref) {
+var Skeleton = React.forwardRef(function (_ref, ref) {
   var width = _ref.width,
       height = _ref.height,
       isLight = _ref.isLight,
       other = _objectWithoutProperties(_ref, _excluded$2);
-  return React__default['default'].createElement(StyledSkeleton, _extends({
+  return React__default["default"].createElement(StyledSkeleton, _extends({
+    ref: ref,
     isLight: isLight,
     customWidth: width,
     customHeight: height
   }, other), "\xA0");
-};
+});
+Skeleton.displayName = 'Skeleton';
 Skeleton.propTypes = {
-  width: PropTypes__default['default'].string,
-  height: PropTypes__default['default'].string,
-  isLight: PropTypes__default['default'].bool
+  width: PropTypes__default["default"].string,
+  height: PropTypes__default["default"].string,
+  isLight: PropTypes__default["default"].bool
 };
 Skeleton.defaultProps = {
   width: '100%',
@@ -615,7 +619,7 @@ var computeFrames = function computeFrames(frames, duration) {
     return acc;
   }, {});
 };
-var Spinner = function Spinner(_ref3) {
+var Spinner = React.forwardRef(function (_ref3, ref) {
   var size = _ref3.size,
       duration = _ref3.duration,
       color = _ref3.color,
@@ -637,13 +641,14 @@ var Spinner = function Spinner(_ref3) {
   var WIDTH = 80;
   var HEIGHT = 80;
   if (!delayComplete && delayMS !== 0) {
-    return React__default['default'].createElement(StyledLoadingPlaceholder, {
+    return React__default["default"].createElement(StyledLoadingPlaceholder, {
       width: "1em",
       height: "1em",
       fontSize: size
     }, "\xA0");
   }
-  return React__default['default'].createElement(StyledSVG, _extends({
+  return React__default["default"].createElement(StyledSVG, _extends({
+    ref: ref,
     fontSize: size,
     color: color,
     width: WIDTH,
@@ -651,17 +656,18 @@ var Spinner = function Spinner(_ref3) {
     dataGardenId: COMPONENT_ID,
     containerHeight: "1em",
     containerWidth: "1em"
-  }, other), React__default['default'].createElement(StyledSpinnerCircle, {
+  }, other), React__default["default"].createElement(StyledSpinnerCircle, {
     dasharrayValue: dasharrayValue,
     strokeWidthValue: strokeWidthValue,
     transform: "rotate(".concat(rotationValue, ", ").concat(WIDTH / 2, ", ").concat(HEIGHT / 2, ")")
   }));
-};
+});
+Spinner.displayName = 'Spinner';
 Spinner.propTypes = {
-  size: PropTypes__default['default'].any,
-  duration: PropTypes__default['default'].number,
-  color: PropTypes__default['default'].string,
-  delayMS: PropTypes__default['default'].number
+  size: PropTypes__default["default"].any,
+  duration: PropTypes__default["default"].number,
+  color: PropTypes__default["default"].string,
+  delayMS: PropTypes__default["default"].number
 };
 Spinner.defaultProps = {
   size: 'inherit',
@@ -671,27 +677,26 @@ Spinner.defaultProps = {
 };
 
 var _excluded = ["size", "color"];
-var InlineTypingIndicator = function InlineTypingIndicator(props) {
-  return React__default['default'].createElement(StyledInlineTypingSVG, props, React__default['default'].createElement(StyledCircle, {
-    cx: "14"
-  }), React__default['default'].createElement(StyledCircle, {
-    cx: "8"
-  }), React__default['default'].createElement(StyledCircle, {
-    cx: "2"
-  }));
-};
-var Inline = function Inline(_ref) {
+var Inline = React.forwardRef(function (_ref, ref) {
   var size = _ref.size,
       color = _ref.color,
       other = _objectWithoutProperties(_ref, _excluded);
-  return React__default['default'].createElement(InlineTypingIndicator, _extends({
+  return React__default["default"].createElement(StyledInlineTypingSVG, _extends({
+    ref: ref,
     size: size,
     color: color
-  }, other));
-};
+  }, other), React__default["default"].createElement(StyledCircle, {
+    cx: "14"
+  }), React__default["default"].createElement(StyledCircle, {
+    cx: "8"
+  }), React__default["default"].createElement(StyledCircle, {
+    cx: "2"
+  }));
+});
+Inline.displayName = 'Inline';
 Inline.propTypes = {
-  size: PropTypes__default['default'].number,
-  color: PropTypes__default['default'].string
+  size: PropTypes__default["default"].number,
+  color: PropTypes__default["default"].string
 };
 Inline.defaultProps = {
   size: 16,

package/dist/index.esm.js

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useContext, useRef, useEffect } from 'react';
+import React, { forwardRef, useContext, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled, { keyframes, css, ThemeContext } from 'styled-components';
 import { useSchedule } from '@zendeskgarden/container-schedule';
@@ -183,7 +183,7 @@ StyledDotsCircleThree.defaultProps = {
 var COMPONENT_ID$5 = 'loaders.loading_placeholder';
 var StyledLoadingPlaceholder = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.47.0',
+  'data-garden-version': '8.48.1',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -218,7 +218,7 @@ var PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
 var StyledProgressBackground = styled.div.attrs(function (props) {
   return {
     'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
   };
 }).withConfig({
@@ -242,7 +242,7 @@ var PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 var StyledProgressIndicator = styled.div.attrs(function (props) {
   return {
     'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     height: props.height || sizeToHeight(props.size, props.theme),
     borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
   };
@@ -288,7 +288,7 @@ var retrieveSkeletonGradient = function retrieveSkeletonGradient(_ref3) {
 };
 var StyledSkeleton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -329,7 +329,7 @@ StyledSpinnerCircle.defaultProps = {
 
 var StyledSVG = styled.svg.attrs(function (props) {
   return {
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     xmlns: 'http://www.w3.org/2000/svg',
     width: props.width,
     height: props.height,
@@ -371,7 +371,7 @@ StyledCircle.defaultProps = {
 var StyledInlineTypingSVG = styled.svg.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     viewBox: '0 0 16 4',
     width: props.size,
     height: props.size * 0.25
@@ -394,7 +394,7 @@ StyledInlineTypingSVG.defaultProps = {
 
 var _excluded$4 = ["size", "color", "duration", "delayMS"];
 var COMPONENT_ID$2 = 'loaders.dots';
-var Dots = function Dots(_ref) {
+var Dots = forwardRef(function (_ref, ref) {
   var size = _ref.size,
       color = _ref.color,
       duration = _ref.duration,
@@ -430,6 +430,7 @@ var Dots = function Dots(_ref) {
     }, "\xA0");
   }
   return React.createElement(StyledSVG, _extends({
+    ref: ref,
     fontSize: size,
     color: color,
     width: "80",
@@ -447,7 +448,8 @@ var Dots = function Dots(_ref) {
     duration: duration,
     ref: dotThree
   })));
-};
+});
+Dots.displayName = 'Dots';
 Dots.propTypes = {
   size: PropTypes.any,
   duration: PropTypes.number,
@@ -470,7 +472,7 @@ var Progress = React.forwardRef(function (_ref, ref) {
   var percentage = Math.max(0, Math.min(100, value));
   return React.createElement(StyledProgressBackground, _extends({
     "data-garden-id": COMPONENT_ID$1,
-    "data-garden-version": '8.47.0',
+    "data-garden-version": '8.48.1',
     "aria-valuemax": 100,
     "aria-valuemin": 0,
     "aria-valuenow": percentage,
@@ -494,17 +496,19 @@ Progress.defaultProps = {
 };
 
 var _excluded$2 = ["width", "height", "isLight"];
-var Skeleton = function Skeleton(_ref) {
+var Skeleton = forwardRef(function (_ref, ref) {
   var width = _ref.width,
       height = _ref.height,
       isLight = _ref.isLight,
       other = _objectWithoutProperties(_ref, _excluded$2);
   return React.createElement(StyledSkeleton, _extends({
+    ref: ref,
     isLight: isLight,
     customWidth: width,
     customHeight: height
   }, other), "\xA0");
-};
+});
+Skeleton.displayName = 'Skeleton';
 Skeleton.propTypes = {
   width: PropTypes.string,
   height: PropTypes.string,
@@ -605,7 +609,7 @@ var computeFrames = function computeFrames(frames, duration) {
     return acc;
   }, {});
 };
-var Spinner = function Spinner(_ref3) {
+var Spinner = forwardRef(function (_ref3, ref) {
   var size = _ref3.size,
       duration = _ref3.duration,
       color = _ref3.color,
@@ -634,6 +638,7 @@ var Spinner = function Spinner(_ref3) {
     }, "\xA0");
   }
   return React.createElement(StyledSVG, _extends({
+    ref: ref,
     fontSize: size,
     color: color,
     width: WIDTH,
@@ -646,7 +651,8 @@ var Spinner = function Spinner(_ref3) {
     strokeWidthValue: strokeWidthValue,
     transform: "rotate(".concat(rotationValue, ", ").concat(WIDTH / 2, ", ").concat(HEIGHT / 2, ")")
   }));
-};
+});
+Spinner.displayName = 'Spinner';
 Spinner.propTypes = {
   size: PropTypes.any,
   duration: PropTypes.number,
@@ -661,24 +667,23 @@ Spinner.defaultProps = {
 };
 
 var _excluded = ["size", "color"];
-var InlineTypingIndicator = function InlineTypingIndicator(props) {
-  return React.createElement(StyledInlineTypingSVG, props, React.createElement(StyledCircle, {
+var Inline = forwardRef(function (_ref, ref) {
+  var size = _ref.size,
+      color = _ref.color,
+      other = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(StyledInlineTypingSVG, _extends({
+    ref: ref,
+    size: size,
+    color: color
+  }, other), React.createElement(StyledCircle, {
     cx: "14"
   }), React.createElement(StyledCircle, {
     cx: "8"
   }), React.createElement(StyledCircle, {
     cx: "2"
   }));
-};
-var Inline = function Inline(_ref) {
-  var size = _ref.size,
-      color = _ref.color,
-      other = _objectWithoutProperties(_ref, _excluded);
-  return React.createElement(InlineTypingIndicator, _extends({
-    size: size,
-    color: color
-  }, other));
-};
+});
+Inline.displayName = 'Inline';
 Inline.propTypes = {
   size: PropTypes.number,
   color: PropTypes.string

package/dist/typings/elements/Dots.d.ts

@@ -4,8 +4,8 @@
  * 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 React from 'react';
-export interface IDotsProps extends React.SVGAttributes<SVGSVGElement> {
+import React, { SVGAttributes } from 'react';
+export interface IDotsProps extends SVGAttributes<SVGSVGElement> {
     /** Sets the height and width in pixels. Inherits the parent's font size by default. */
     size?: string | number;
     /** Sets the fill color. Inherits the parent's `color` by default. */
@@ -18,5 +18,4 @@ export interface IDotsProps extends React.SVGAttributes<SVGSVGElement> {
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */
-declare const Dots: React.FC<IDotsProps>;
-export default Dots;
+export declare const Dots: React.ForwardRefExoticComponent<IDotsProps & React.RefAttributes<SVGSVGElement>>;

package/dist/typings/elements/Inline.d.ts

@@ -4,8 +4,8 @@
  * 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 React from 'react';
-export interface IInlineProps extends React.SVGAttributes<SVGSVGElement> {
+import React, { SVGAttributes } from 'react';
+export interface IInlineProps extends SVGAttributes<SVGSVGElement> {
     /** Sets the width in pixels and scales the loader proportionally */
     size?: number;
     /** Sets the fill color. Inherits the parent's `color` by default. */
@@ -14,5 +14,4 @@ export interface IInlineProps extends React.SVGAttributes<SVGSVGElement> {
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */
-declare const Inline: React.FC<IInlineProps>;
-export default Inline;
+export declare const Inline: React.ForwardRefExoticComponent<IInlineProps & React.RefAttributes<SVGSVGElement>>;

package/dist/typings/elements/Progress.d.ts

@@ -16,8 +16,7 @@ export interface IProgressProps extends HTMLAttributes<HTMLDivElement> {
     /** Adjusts the height */
     size?: 'small' | 'medium' | 'large';
 }
-declare const _default: React.FunctionComponent<IProgressProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export default _default;
+export declare const Progress: React.ForwardRefExoticComponent<IProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/Skeleton.d.ts

@@ -4,8 +4,8 @@
  * 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 React from 'react';
-export interface ISkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+import React, { HTMLAttributes } from 'react';
+export interface ISkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /** Sets the width as a percentage of the the parent element's width */
     width?: string;
     /** Sets the height as a percentage of parent element's height if the height is not already inherited by `line-height` */
@@ -16,5 +16,4 @@ export interface ISkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const Skeleton: React.FC<ISkeletonProps>;
-export default Skeleton;
+export declare const Skeleton: React.ForwardRefExoticComponent<ISkeletonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/Spinner.d.ts

@@ -4,8 +4,8 @@
  * 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 React from 'react';
-export interface ISpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+import React, { SVGAttributes } from 'react';
+export interface ISpinnerProps extends SVGAttributes<SVGSVGElement> {
     /**
      * Sets the height and width in pixels. Inherits the parent's font size by default.
      **/
@@ -26,5 +26,4 @@ export interface ISpinnerProps extends React.SVGAttributes<SVGSVGElement> {
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */
-declare const Spinner: React.FC<ISpinnerProps>;
-export default Spinner;
+export declare const Spinner: React.ForwardRefExoticComponent<ISpinnerProps & React.RefAttributes<SVGSVGElement>>;

package/dist/typings/index.d.ts

@@ -4,13 +4,13 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export { default as Dots } from './elements/Dots';
+export { Dots } from './elements/Dots';
 export type { IDotsProps } from './elements/Dots';
-export { default as Progress } from './elements/Progress';
+export { Progress } from './elements/Progress';
 export type { IProgressProps } from './elements/Progress';
-export { default as Skeleton } from './elements/Skeleton';
+export { Skeleton } from './elements/Skeleton';
 export type { ISkeletonProps } from './elements/Skeleton';
-export { default as Spinner } from './elements/Spinner';
+export { Spinner } from './elements/Spinner';
 export type { ISpinnerProps } from './elements/Spinner';
-export { default as Inline } from './elements/Inline';
+export { Inline } from './elements/Inline';
 export type { IInlineProps } from './elements/Inline';

package/dist/typings/styled/StyledInlineTypingIndicator.d.ts

@@ -10,8 +10,9 @@ export declare const StyledCircle: import("styled-components").StyledComponent<"
     cy: 2;
     r: 2;
 }, "cy" | "fill" | "r">;
-export interface IStyledTypingSvgProps extends React.HTMLAttributes<SVGSVGElement> {
+interface IStyledTypingSvgProps extends React.HTMLAttributes<SVGSVGElement> {
     size: number;
     color: string;
 }
 export declare const StyledInlineTypingSVG: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, IStyledTypingSvgProps, never>;
+export {};

package/dist/typings/styled/index.d.ts

@@ -11,4 +11,3 @@ export { StyledSkeleton } from './StyledSkeleton';
 export { StyledSpinnerCircle } from './StyledSpinnerCircle';
 export { StyledSVG } from './StyledSVG';
 export { StyledCircle, StyledInlineTypingSVG } from './StyledInlineTypingIndicator';
-export type { IStyledTypingSvgProps } from './StyledInlineTypingIndicator';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "8.47.0",
+  "version": "8.48.1",
   "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": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.47.0"
+    "@zendeskgarden/react-theming": "^8.48.1"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "aba4138c9eb030ab3f204ba783b340ca55be6988"
+  "gitHead": "82c621bfbc943904baa6647a2f5e89d3271d7edf"
 }