@zendeskgarden/react-loaders 8.62.1 → 8.63.0

package/dist/index.cjs.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var PropTypes = require('prop-types');
 var styled = require('styled-components');
@@ -16,11 +14,11 @@ var containerSchedule = require('@zendeskgarden/container-schedule');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -41,7 +39,7 @@ const dotOneKeyframes = styled.keyframes(["0%{transform:translate(0,5px);}3%{tra
 const 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);}"]);
 const 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);}"]);
 
-const StyledDotsCircle = styled__default["default"].circle.attrs({
+const StyledDotsCircle = styled__default.default.circle.attrs({
   cy: 36,
   r: 9
 }).withConfig({
@@ -51,7 +49,7 @@ const StyledDotsCircle = styled__default["default"].circle.attrs({
 StyledDotsCircle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const StyledDotsCircleOne = styled__default["default"](StyledDotsCircle).attrs({
+const StyledDotsCircleOne = styled__default.default(StyledDotsCircle).attrs({
   cx: 9
 }).withConfig({
   displayName: "StyledDots__StyledDotsCircleOne",
@@ -65,7 +63,7 @@ const StyledDotsCircleOne = styled__default["default"](StyledDotsCircle).attrs({
 StyledDotsCircleOne.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const StyledDotsCircleTwo = styled__default["default"](StyledDotsCircle).attrs(() => ({
+const StyledDotsCircleTwo = styled__default.default(StyledDotsCircle).attrs(() => ({
   cx: 40
 })).withConfig({
   displayName: "StyledDots__StyledDotsCircleTwo",
@@ -79,7 +77,7 @@ const StyledDotsCircleTwo = styled__default["default"](StyledDotsCircle).attrs((
 StyledDotsCircleTwo.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const StyledDotsCircleThree = styled__default["default"](StyledDotsCircle).attrs(() => ({
+const StyledDotsCircleThree = styled__default.default(StyledDotsCircle).attrs(() => ({
   cx: 71
 })).withConfig({
   displayName: "StyledDots__StyledDotsCircleThree",
@@ -95,9 +93,9 @@ StyledDotsCircleThree.defaultProps = {
 };
 
 const COMPONENT_ID$5 = 'loaders.loading_placeholder';
-const StyledLoadingPlaceholder = styled__default["default"].div.attrs({
+const StyledLoadingPlaceholder = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -119,9 +117,9 @@ const sizeToHeight = (size, theme) => {
 };
 const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
 const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
-const StyledProgressBackground = styled__default["default"].div.attrs(props => ({
+const StyledProgressBackground = styled__default.default.div.attrs(props => ({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
@@ -131,9 +129,9 @@ StyledProgressBackground.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
-const StyledProgressIndicator = styled__default["default"].div.attrs(props => ({
+const StyledProgressIndicator = styled__default.default.div.attrs(props => ({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   height: props.height || sizeToHeight(props.size, props.theme),
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
@@ -174,9 +172,9 @@ const retrieveSkeletonGradient = _ref3 => {
   } = _ref3;
   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));
 };
-const StyledSkeleton = styled__default["default"].div.attrs({
+const StyledSkeleton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -185,7 +183,7 @@ StyledSkeleton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const StyledSpinnerCircle = styled__default["default"].circle.attrs(props => ({
+const StyledSpinnerCircle = styled__default.default.circle.attrs(props => ({
   cx: 40,
   cy: 40,
   r: 34,
@@ -203,8 +201,8 @@ StyledSpinnerCircle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const StyledSVG = styled__default["default"].svg.attrs(props => ({
-  'data-garden-version': '8.62.1',
+const StyledSVG = styled__default.default.svg.attrs(props => ({
+  'data-garden-version': '8.63.0',
   xmlns: 'http://www.w3.org/2000/svg',
   width: props.width,
   height: props.height,
@@ -221,7 +219,7 @@ StyledSVG.defaultProps = {
 
 const COMPONENT_ID$3 = 'loaders.inline';
 const PULSE_ANIMATION = styled.keyframes(["0%,100%{opacity:.2;}50%{opacity:.8;}"]);
-const StyledCircle = styled__default["default"].circle.attrs({
+const StyledCircle = styled__default.default.circle.attrs({
   fill: 'currentColor',
   cy: 2,
   r: 2
@@ -232,9 +230,9 @@ const StyledCircle = styled__default["default"].circle.attrs({
 StyledCircle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const StyledInline = styled__default["default"].svg.attrs(props => ({
+const StyledInline = styled__default.default.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   viewBox: '0 0 16 4',
   width: props.size,
   height: props.size * 0.25
@@ -281,36 +279,36 @@ const Dots = React.forwardRef((_ref, 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',
@@ -322,7 +320,7 @@ Dots.defaultProps = {
 const SIZE = ['small', 'medium', 'large'];
 
 const COMPONENT_ID$1 = 'loaders.progress';
-const Progress = React__default["default"].forwardRef((_ref, ref) => {
+const Progress = React__default.default.forwardRef((_ref, ref) => {
   let {
     value,
     size,
@@ -333,26 +331,28 @@ const Progress = React__default["default"].forwardRef((_ref, ref) => {
   const ariaLabel = reactTheming.useText(Progress, {
     'aria-label': label
   }, 'aria-label', 'Progress');
-  return React__default["default"].createElement(StyledProgressBackground, _extends({
-    "data-garden-id": COMPONENT_ID$1,
-    "data-garden-version": '8.62.1',
-    "aria-valuemax": 100,
-    "aria-valuemin": 0,
-    "aria-valuenow": percentage,
-    role: "progressbar",
-    size: size,
-    ref: ref,
-    "aria-label": ariaLabel
-  }, other), React__default["default"].createElement(StyledProgressIndicator, {
-    value: percentage,
-    size: size
-  }));
+  return (
+    React__default.default.createElement(StyledProgressBackground, _extends({
+      "data-garden-id": COMPONENT_ID$1,
+      "data-garden-version": '8.63.0',
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": percentage,
+      role: "progressbar",
+      size: size,
+      ref: ref,
+      "aria-label": ariaLabel
+    }, 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(SIZE)
+  color: PropTypes__default.default.string,
+  value: PropTypes__default.default.number.isRequired,
+  size: PropTypes__default.default.oneOf(SIZE)
 };
 Progress.defaultProps = {
   value: 0,
@@ -366,7 +366,7 @@ const Skeleton = React.forwardRef((_ref, ref) => {
     isLight,
     ...other
   } = _ref;
-  return React__default["default"].createElement(StyledSkeleton, _extends({
+  return React__default.default.createElement(StyledSkeleton, _extends({
     ref: ref,
     isLight: isLight,
     customWidth: width,
@@ -375,9 +375,9 @@ const Skeleton = React.forwardRef((_ref, ref) => {
 });
 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%',
@@ -493,13 +493,13 @@ const Spinner = React.forwardRef((_ref, ref) => {
   const WIDTH = 80;
   const 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,
@@ -508,7 +508,7 @@ const Spinner = React.forwardRef((_ref, ref) => {
     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(${rotationValue}, ${WIDTH / 2}, ${HEIGHT / 2})`
@@ -516,10 +516,10 @@ const Spinner = React.forwardRef((_ref, ref) => {
 });
 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',
@@ -535,24 +535,26 @@ const Inline = React.forwardRef((_ref, ref) => {
     ...other
   } = _ref;
   const ariaLabel = reactTheming.useText(Inline, other, 'aria-label', 'loading');
-  return React__default["default"].createElement(StyledInline, _extends({
-    ref: ref,
-    size: size,
-    color: color,
-    "aria-label": ariaLabel,
-    role: "img"
-  }, other), React__default["default"].createElement(StyledCircle, {
-    cx: "14"
-  }), React__default["default"].createElement(StyledCircle, {
-    cx: "8"
-  }), React__default["default"].createElement(StyledCircle, {
-    cx: "2"
-  }));
+  return (
+    React__default.default.createElement(StyledInline, _extends({
+      ref: ref,
+      size: size,
+      color: color,
+      "aria-label": ariaLabel,
+      role: "img"
+    }, 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

@@ -87,7 +87,7 @@ StyledDotsCircleThree.defaultProps = {
 const COMPONENT_ID$5 = 'loaders.loading_placeholder';
 const StyledLoadingPlaceholder = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -111,7 +111,7 @@ const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
 const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
 const StyledProgressBackground = styled.div.attrs(props => ({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
@@ -123,7 +123,7 @@ StyledProgressBackground.defaultProps = {
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 const StyledProgressIndicator = styled.div.attrs(props => ({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   height: props.height || sizeToHeight(props.size, props.theme),
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
@@ -166,7 +166,7 @@ const retrieveSkeletonGradient = _ref3 => {
 };
 const StyledSkeleton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -194,7 +194,7 @@ StyledSpinnerCircle.defaultProps = {
 };
 
 const StyledSVG = styled.svg.attrs(props => ({
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   xmlns: 'http://www.w3.org/2000/svg',
   width: props.width,
   height: props.height,
@@ -224,7 +224,7 @@ StyledCircle.defaultProps = {
 };
 const StyledInline = styled.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   viewBox: '0 0 16 4',
   width: props.size,
   height: props.size * 0.25
@@ -323,20 +323,22 @@ const Progress = React.forwardRef((_ref, ref) => {
   const ariaLabel = useText(Progress, {
     'aria-label': label
   }, 'aria-label', 'Progress');
-  return React.createElement(StyledProgressBackground, _extends({
-    "data-garden-id": COMPONENT_ID$1,
-    "data-garden-version": '8.62.1',
-    "aria-valuemax": 100,
-    "aria-valuemin": 0,
-    "aria-valuenow": percentage,
-    role: "progressbar",
-    size: size,
-    ref: ref,
-    "aria-label": ariaLabel
-  }, other), React.createElement(StyledProgressIndicator, {
-    value: percentage,
-    size: size
-  }));
+  return (
+    React.createElement(StyledProgressBackground, _extends({
+      "data-garden-id": COMPONENT_ID$1,
+      "data-garden-version": '8.63.0',
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": percentage,
+      role: "progressbar",
+      size: size,
+      ref: ref,
+      "aria-label": ariaLabel
+    }, other), React.createElement(StyledProgressIndicator, {
+      value: percentage,
+      size: size
+    }))
+  );
 });
 Progress.displayName = 'Progress';
 Progress.propTypes = {
@@ -525,19 +527,21 @@ const Inline = forwardRef((_ref, ref) => {
     ...other
   } = _ref;
   const ariaLabel = useText(Inline, other, 'aria-label', 'loading');
-  return React.createElement(StyledInline, _extends({
-    ref: ref,
-    size: size,
-    color: color,
-    "aria-label": ariaLabel,
-    role: "img"
-  }, other), React.createElement(StyledCircle, {
-    cx: "14"
-  }), React.createElement(StyledCircle, {
-    cx: "8"
-  }), React.createElement(StyledCircle, {
-    cx: "2"
-  }));
+  return (
+    React.createElement(StyledInline, _extends({
+      ref: ref,
+      size: size,
+      color: color,
+      "aria-label": ariaLabel,
+      role: "img"
+    }, other), React.createElement(StyledCircle, {
+      cx: "14"
+    }), React.createElement(StyledCircle, {
+      cx: "8"
+    }), React.createElement(StyledCircle, {
+      cx: "2"
+    }))
+  );
 });
 Inline.displayName = 'Inline';
 Inline.propTypes = {

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

@@ -6,6 +6,10 @@
  */
 import React from 'react';
 import { IInlineProps } from '../types';
+/**
+ * 1. role='img' on `svg` is valid WAI-ARIA usage in this context.
+ *    https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
+ */
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */

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

@@ -6,6 +6,11 @@
  */
 import React from 'react';
 import { IProgressProps } from '../types';
+/**
+ * 1. Garden progress bar is quite custom, and while using a native
+ *    `progress` element would be ideal, its inclusion of a shadow
+ *    root in Safari prevents straightforward restyling/functional overrides.
+ */
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

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

@@ -6,7 +6,7 @@
  */
 import { HTMLAttributes, SVGAttributes } from 'react';
 export declare const SIZE: readonly ["small", "medium", "large"];
-export declare type Size = typeof SIZE[number];
+export type Size = (typeof SIZE)[number];
 export interface IDotsProps extends SVGAttributes<SVGSVGElement> {
     /** Sets the height and width in pixels. Inherits the parent's font size by default. */
     size?: string | number;

package/dist/typings/utils/spinner-coordinates.d.ts

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-declare type AnimationPoints = Record<number, number>;
+type AnimationPoints = Record<number, number>;
 export declare const STROKE_WIDTH_FRAMES: AnimationPoints;
 export declare const ROTATION_FRAMES: AnimationPoints;
 export declare const DASHARRAY_FRAMES: AnimationPoints;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "8.62.1",
+  "version": "8.63.0",
   "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.62.1"
+    "@zendeskgarden/react-theming": "^8.63.0"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }