@zendeskgarden/react-loaders 8.62.0 → 8.62.2

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.0',
+  'data-garden-version': '8.62.2',
   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.0',
+  'data-garden-version': '8.62.2',
   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.0',
+  'data-garden-version': '8.62.2',
   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.0'
+  'data-garden-version': '8.62.2'
 }).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.0',
+const StyledSVG = styled__default.default.svg.attrs(props => ({
+  'data-garden-version': '8.62.2',
   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.0',
+  'data-garden-version': '8.62.2',
   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,9 +331,9 @@ 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({
+  return React__default.default.createElement(StyledProgressBackground, _extends({
     "data-garden-id": COMPONENT_ID$1,
-    "data-garden-version": '8.62.0',
+    "data-garden-version": '8.62.2',
     "aria-valuemax": 100,
     "aria-valuemin": 0,
     "aria-valuenow": percentage,
@@ -343,16 +341,16 @@ const Progress = React__default["default"].forwardRef((_ref, ref) => {
     size: size,
     ref: ref,
     "aria-label": ariaLabel
-  }, 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(SIZE)
+  color: PropTypes__default.default.string,
+  value: PropTypes__default.default.number.isRequired,
+  size: PropTypes__default.default.oneOf(SIZE)
 };
 Progress.defaultProps = {
   value: 0,
@@ -366,7 +364,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 +373,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 +491,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 +506,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 +514,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 +533,24 @@ const Inline = React.forwardRef((_ref, ref) => {
     ...other
   } = _ref;
   const ariaLabel = reactTheming.useText(Inline, other, 'aria-label', 'loading');
-  return React__default["default"].createElement(StyledInline, _extends({
+  return React__default.default.createElement(StyledInline, _extends({
     ref: ref,
     size: size,
     color: color,
     "aria-label": ariaLabel,
     role: "img"
-  }, other), React__default["default"].createElement(StyledCircle, {
+  }, other), React__default.default.createElement(StyledCircle, {
     cx: "14"
-  }), React__default["default"].createElement(StyledCircle, {
+  }), React__default.default.createElement(StyledCircle, {
     cx: "8"
-  }), React__default["default"].createElement(StyledCircle, {
+  }), 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.0',
+  'data-garden-version': '8.62.2',
   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.0',
+  'data-garden-version': '8.62.2',
   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.0',
+  'data-garden-version': '8.62.2',
   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.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -194,7 +194,7 @@ StyledSpinnerCircle.defaultProps = {
 };
 
 const StyledSVG = styled.svg.attrs(props => ({
-  'data-garden-version': '8.62.0',
+  'data-garden-version': '8.62.2',
   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.0',
+  'data-garden-version': '8.62.2',
   viewBox: '0 0 16 4',
   width: props.size,
   height: props.size * 0.25
@@ -325,7 +325,7 @@ const Progress = React.forwardRef((_ref, ref) => {
   }, 'aria-label', 'Progress');
   return React.createElement(StyledProgressBackground, _extends({
     "data-garden-id": COMPONENT_ID$1,
-    "data-garden-version": '8.62.0',
+    "data-garden-version": '8.62.2',
     "aria-valuemax": 100,
     "aria-valuemin": 0,
     "aria-valuenow": percentage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "8.62.0",
+  "version": "8.62.2",
   "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.0"
+    "@zendeskgarden/react-theming": "^8.62.2"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "f8233a46d9732497578dbea9e88f82a3d4bb3678"
+  "gitHead": "27a7d6c021f3360396af60d51ecbf66e9076a405"
 }