@zendeskgarden/react-loaders 8.69.6 → 8.69.8

package/dist/index.cjs.js

@@ -83,7 +83,7 @@ StyledDotsCircleThree.defaultProps = {
 const COMPONENT_ID$5 = 'loaders.loading_placeholder';
 const StyledLoadingPlaceholder = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.69.6',
+  'data-garden-version': '8.69.8',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -107,7 +107,7 @@ const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
 const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
 const StyledProgressBackground = styled__default.default.div.attrs(props => ({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '8.69.6',
+  'data-garden-version': '8.69.8',
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
@@ -119,7 +119,7 @@ StyledProgressBackground.defaultProps = {
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 const StyledProgressIndicator = styled__default.default.div.attrs(props => ({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '8.69.6',
+  'data-garden-version': '8.69.8',
   height: props.height || sizeToHeight(props.size, props.theme),
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
@@ -132,8 +132,8 @@ StyledProgressIndicator.defaultProps = {
 
 const COMPONENT_ID$4 = 'loaders.skeleton';
 const fadeInAnimation = styled.keyframes(["0%,60%{opacity:0;}100%{opacity:1;}"]);
-const skeletonAnimation = styled.keyframes(["100%{left:100%;}"]);
-const skeletonRtlAnimation = styled.keyframes(["100%{right:100%;}"]);
+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 retrieveSkeletonBackgroundColor = _ref => {
   let {
     theme,
@@ -149,9 +149,9 @@ const retrieveSkeletonAnimation = _ref2 => {
     theme
   } = _ref2;
   if (theme.rtl) {
-    return styled.css(["right:-1800px;animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonRtlAnimation);
+    return styled.css(["animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonRtlAnimation);
   }
-  return styled.css(["left:-1800px;animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonAnimation);
+  return styled.css(["animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonAnimation);
 };
 const retrieveSkeletonGradient = _ref3 => {
   let {
@@ -162,7 +162,7 @@ const retrieveSkeletonGradient = _ref3 => {
 };
 const StyledSkeleton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.8'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -190,7 +190,7 @@ StyledSpinnerCircle.defaultProps = {
 };
 
 const StyledSVG = styled__default.default.svg.attrs(props => ({
-  'data-garden-version': '8.69.6',
+  'data-garden-version': '8.69.8',
   xmlns: 'http://www.w3.org/2000/svg',
   width: props.width,
   height: props.height,
@@ -220,7 +220,7 @@ StyledCircle.defaultProps = {
 };
 const StyledInline = styled__default.default.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.69.6',
+  'data-garden-version': '8.69.8',
   viewBox: '0 0 16 4',
   width: props.size,
   height: props.size * 0.25
@@ -322,7 +322,7 @@ const Progress = React__default.default.forwardRef((_ref, ref) => {
   return (
     React__default.default.createElement(StyledProgressBackground, _extends({
       "data-garden-id": COMPONENT_ID$1,
-      "data-garden-version": '8.69.6',
+      "data-garden-version": '8.69.8',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,

package/dist/index.esm.js

@@ -75,7 +75,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.69.6',
+  'data-garden-version': '8.69.8',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -99,7 +99,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.69.6',
+  'data-garden-version': '8.69.8',
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
@@ -111,7 +111,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.69.6',
+  'data-garden-version': '8.69.8',
   height: props.height || sizeToHeight(props.size, props.theme),
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
@@ -124,8 +124,8 @@ StyledProgressIndicator.defaultProps = {
 
 const COMPONENT_ID$4 = 'loaders.skeleton';
 const fadeInAnimation = keyframes(["0%,60%{opacity:0;}100%{opacity:1;}"]);
-const skeletonAnimation = keyframes(["100%{left:100%;}"]);
-const skeletonRtlAnimation = keyframes(["100%{right:100%;}"]);
+const skeletonAnimation = keyframes(["0%{transform:translateX(-100%);}100%{transform:translateX(100%);}"]);
+const skeletonRtlAnimation = keyframes(["0%{transform:translateX(100%);}100%{transform:translateX(-100%)}"]);
 const retrieveSkeletonBackgroundColor = _ref => {
   let {
     theme,
@@ -141,9 +141,9 @@ const retrieveSkeletonAnimation = _ref2 => {
     theme
   } = _ref2;
   if (theme.rtl) {
-    return css(["right:-1800px;animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonRtlAnimation);
+    return css(["animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonRtlAnimation);
   }
-  return css(["left:-1800px;animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonAnimation);
+  return css(["animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonAnimation);
 };
 const retrieveSkeletonGradient = _ref3 => {
   let {
@@ -154,7 +154,7 @@ const retrieveSkeletonGradient = _ref3 => {
 };
 const StyledSkeleton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.8'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -182,7 +182,7 @@ StyledSpinnerCircle.defaultProps = {
 };
 
 const StyledSVG = styled.svg.attrs(props => ({
-  'data-garden-version': '8.69.6',
+  'data-garden-version': '8.69.8',
   xmlns: 'http://www.w3.org/2000/svg',
   width: props.width,
   height: props.height,
@@ -212,7 +212,7 @@ StyledCircle.defaultProps = {
 };
 const StyledInline = styled.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.69.6',
+  'data-garden-version': '8.69.8',
   viewBox: '0 0 16 4',
   width: props.size,
   height: props.size * 0.25
@@ -314,7 +314,7 @@ const Progress = React.forwardRef((_ref, ref) => {
   return (
     React.createElement(StyledProgressBackground, _extends({
       "data-garden-id": COMPONENT_ID$1,
-      "data-garden-version": '8.69.6',
+      "data-garden-version": '8.69.8',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "8.69.6",
+  "version": "8.69.8",
   "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.69.6"
+    "@zendeskgarden/react-theming": "^8.69.8"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "94a3ebb91ac24820eae13118b40be1623cb50c43"
+  "gitHead": "bf838e7472834d51d05d2eb3de92920fecc187f0"
 }