@zendeskgarden/react-loaders 9.1.1 → 9.2.0

package/dist/esm/elements/Dots.js

@@ -57,22 +57,22 @@ const Dots = forwardRef((_ref, ref) => {
     }, "\xA0");
   }
   return React.createElement(StyledSVG, Object.assign({
+    "data-garden-id": COMPONENT_ID,
     ref: ref,
-    fontSize: size,
-    color: color,
-    width: "80",
-    height: "72",
-    dataGardenId: COMPONENT_ID
+    $fontSize: size,
+    $color: color,
+    $width: "80",
+    $height: "72"
   }, other), React.createElement("g", {
     fill: "currentColor"
   }, React.createElement(StyledDotsCircleOne, {
-    duration: duration,
+    $duration: duration,
     ref: dotOne
   }), React.createElement(StyledDotsCircleTwo, {
-    duration: duration,
+    $duration: duration,
     ref: dotTwo
   }), React.createElement(StyledDotsCircleThree, {
-    duration: duration,
+    $duration: duration,
     ref: dotThree
   })));
 });

package/dist/esm/elements/Inline.js

@@ -25,8 +25,8 @@ const Inline = forwardRef((_ref, ref) => {
   return (
     React.createElement(StyledInline, Object.assign({
       ref: ref,
-      size: size,
-      color: color,
+      $size: size,
+      $color: color,
       "aria-label": ariaLabel,
       role: "img"
     }, other), React.createElement(StyledCircle, {

package/dist/esm/elements/Progress.js

@@ -19,6 +19,7 @@ import '../styled/StyledInline.js';
 const COMPONENT_ID = 'loaders.progress';
 const Progress = React.forwardRef((_ref, ref) => {
   let {
+    color,
     value,
     size,
     'aria-label': label,
@@ -31,17 +32,18 @@ const Progress = React.forwardRef((_ref, ref) => {
   return (
     React.createElement(StyledProgressBackground, Object.assign({
       "data-garden-id": COMPONENT_ID,
-      "data-garden-version": '9.1.1',
+      "data-garden-version": '9.2.0',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,
       role: "progressbar",
-      size: size,
+      $size: size,
+      $color: color,
       ref: ref,
       "aria-label": ariaLabel
     }, other), React.createElement(StyledProgressIndicator, {
-      value: percentage,
-      size: size
+      $value: percentage,
+      $size: size
     }))
   );
 });

package/dist/esm/elements/Spinner.js

@@ -68,17 +68,17 @@ const Spinner = forwardRef((_ref, ref) => {
     }, "\xA0");
   }
   return React.createElement(StyledSVG, Object.assign({
+    $color: color,
+    $containerHeight: "1em",
+    $containerWidth: "1em",
+    $fontSize: size,
+    "data-garden-id": COMPONENT_ID,
+    $height: HEIGHT,
     ref: ref,
-    fontSize: size,
-    color: color,
-    width: WIDTH,
-    height: HEIGHT,
-    dataGardenId: COMPONENT_ID,
-    containerHeight: "1em",
-    containerWidth: "1em"
+    $width: WIDTH
   }, other), React.createElement(StyledSpinnerCircle, {
-    dasharrayValue: dasharrayValue,
-    strokeWidthValue: strokeWidthValue,
+    $dasharrayValue: dasharrayValue,
+    $strokeWidthValue: strokeWidthValue,
     transform: `rotate(${rotationValue}, ${WIDTH / 2}, ${HEIGHT / 2})`
   }));
 });

package/dist/esm/styled/StyledDots.js

@@ -15,7 +15,7 @@ const StyledDotsCircle = styled.circle.attrs({
   componentId: "sc-1ltah7e-0"
 })([""]);
 const animationStyles = (animationName, props) => {
-  return css(["animation:", " ", "ms linear infinite;"], animationName, props.duration);
+  return css(["animation:", " ", "ms linear infinite;"], animationName, props.$duration);
 };
 const StyledDotsCircleOne = styled(StyledDotsCircle).attrs({
   cx: 9

package/dist/esm/styled/StyledInline.js

@@ -11,13 +11,13 @@ const COMPONENT_ID = 'loaders.inline';
 const colorStyles = _ref => {
   let {
     theme,
-    color
+    $color
   } = _ref;
-  const options = color.includes('.') ? {
-    variable: color,
+  const options = $color.includes('.') ? {
+    variable: $color,
     theme
   } : {
-    hue: color,
+    hue: $color,
     theme
   };
   return css(["color:", ";"], getColor(options));
@@ -38,10 +38,10 @@ const StyledCircle = styled.circle.attrs({
 })([""]);
 const StyledInline = styled.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   viewBox: '0 0 16 4',
-  width: props.size,
-  height: props.size * 0.25
+  width: props.$size,
+  height: props.$size * 0.25
 })).withConfig({
   displayName: "StyledInline",
   componentId: "sc-fxsb9l-1"

package/dist/esm/styled/StyledLoadingPlaceholder.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'loaders.loading_placeholder';
 const StyledLoadingPlaceholder = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",

package/dist/esm/styled/StyledProgress.js

@@ -7,8 +7,8 @@
 import styled, { css } from 'styled-components';
 import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const sizeToHeight = (size, theme) => {
-  switch (size) {
+const sizeToHeight = ($size, theme) => {
+  switch ($size) {
     case 'small':
       return theme.space.base / 2;
     case 'medium':
@@ -17,12 +17,12 @@ const sizeToHeight = (size, theme) => {
       return theme.space.base * 3;
   }
 };
-const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
+const sizeToBorderRadius = ($size, theme) => sizeToHeight($size, theme) / 2;
 const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
 const colorStyles = _ref => {
   let {
     theme,
-    color
+    $color
   } = _ref;
   const backgroundColor = getColor({
     theme,
@@ -36,12 +36,12 @@ const colorStyles = _ref => {
     }
   });
   let options;
-  if (color) {
-    options = color.includes('.') ? {
-      variable: color,
+  if ($color) {
+    options = $color.includes('.') ? {
+      variable: $color,
       theme
     } : {
-      hue: color,
+      hue: $color,
       theme
     };
   } else {
@@ -53,23 +53,20 @@ const colorStyles = _ref => {
   const foregroundColor = getColor(options);
   return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
-const StyledProgressBackground = styled.div.attrs(props => ({
+const StyledProgressBackground = styled.div.attrs({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '9.1.1',
-  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
-})).withConfig({
+  'data-garden-version': '9.2.0'
+}).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
   componentId: "sc-2g8w4s-0"
-})(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => props.borderRadius, colorStyles, props => retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props));
+})(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => sizeToBorderRadius(props.$size, props.theme), colorStyles, props => retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props));
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
-const StyledProgressIndicator = styled.div.attrs(props => ({
+const StyledProgressIndicator = styled.div.attrs({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '9.1.1',
-  height: props.height || sizeToHeight(props.size, props.theme),
-  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
-})).withConfig({
+  'data-garden-version': '9.2.0'
+}).withConfig({
   displayName: "StyledProgress__StyledProgressIndicator",
   componentId: "sc-2g8w4s-1"
-})(["transition:width 0.1s ease-in-out;border-radius:", "px;background:currentcolor;width:", "%;height:", "px;", ""], props => props.borderRadius, props => props.value, props => props.height, props => retrieveComponentStyles(PROGESS_INDICATOR_COMPONENT_ID, props));
+})(["transition:width 0.1s ease-in-out;border-radius:", "px;background:currentcolor;width:", "%;height:", "px;", ""], props => sizeToBorderRadius(props.$size, props.theme), props => props.$value, props => sizeToHeight(props.$size, props.theme), props => retrieveComponentStyles(PROGESS_INDICATOR_COMPONENT_ID, props));
 
 export { StyledProgressBackground, StyledProgressIndicator };

package/dist/esm/styled/StyledSVG.js

@@ -10,28 +10,26 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
 const colorStyles = _ref => {
   let {
     theme,
-    color = 'inherit'
+    $color = 'inherit'
   } = _ref;
-  const options = color.includes('.') ? {
-    variable: color,
+  const options = $color.includes('.') ? {
+    variable: $color,
     theme
   } : {
-    hue: color,
+    hue: $color,
     theme
   };
   return css(["color:", ";"], getColor(options));
 };
 const StyledSVG = styled.svg.attrs(props => ({
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   xmlns: 'http://www.w3.org/2000/svg',
-  width: props.width,
-  height: props.height,
   focusable: 'false',
-  viewBox: `0 0 ${props.width} ${props.height}`,
+  viewBox: `0 0 ${props.$width} ${props.$height}`,
   role: 'img'
 })).withConfig({
   displayName: "StyledSVG",
   componentId: "sc-1xtc3kx-0"
-})(["width:", ";height:", ";font-size:", ";", ";", ";"], props => props.containerWidth || '1em', props => props.containerHeight || '0.9em', props => props.fontSize || 'inherit', colorStyles, props => retrieveComponentStyles(props.dataGardenId, props));
+})(["width:", ";height:", ";font-size:", ";", ";", ";"], props => props.$containerWidth || '1em', props => props.$containerHeight || '0.9em', props => props.$fontSize || 'inherit', colorStyles, props => retrieveComponentStyles(props['data-garden-id'], props));
 
 export { StyledSVG };

package/dist/esm/styled/StyledSkeleton.js

@@ -52,7 +52,7 @@ const gradientStyles = props => {
 };
 const StyledSkeleton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"

package/dist/esm/styled/StyledSpinnerCircle.js

@@ -13,8 +13,8 @@ const StyledSpinnerCircle = styled.circle.attrs(props => ({
   fill: 'none',
   stroke: 'currentColor',
   strokeLinecap: 'round',
-  strokeWidth: props.strokeWidthValue,
-  strokeDasharray: `${props.dasharrayValue} 250`,
+  strokeWidth: props.$strokeWidthValue,
+  strokeDasharray: `${props.$dasharrayValue} 250`,
   transform: props.transform
 })).withConfig({
   displayName: "StyledSpinnerCircle",

package/dist/index.cjs.js

@@ -30,7 +30,7 @@ const StyledDotsCircle = styled__default.default.circle.attrs({
   componentId: "sc-1ltah7e-0"
 })([""]);
 const animationStyles$1 = (animationName, props) => {
-  return styled.css(["animation:", " ", "ms linear infinite;"], animationName, props.duration);
+  return styled.css(["animation:", " ", "ms linear infinite;"], animationName, props.$duration);
 };
 const StyledDotsCircleOne = styled__default.default(StyledDotsCircle).attrs({
   cx: 9
@@ -54,15 +54,15 @@ const StyledDotsCircleThree = styled__default.default(StyledDotsCircle).attrs(()
 const COMPONENT_ID$5 = 'loaders.loading_placeholder';
 const StyledLoadingPlaceholder = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
   componentId: "sc-x3bwsx-0"
 })(["display:inline-block;width:", ";height:", ";font-size:", ";", ""], props => props.width || '1em', props => props.height || '0.9em', props => props.fontSize, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 
-const sizeToHeight = (size, theme) => {
-  switch (size) {
+const sizeToHeight = ($size, theme) => {
+  switch ($size) {
     case 'small':
       return theme.space.base / 2;
     case 'medium':
@@ -71,12 +71,12 @@ const sizeToHeight = (size, theme) => {
       return theme.space.base * 3;
   }
 };
-const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
+const sizeToBorderRadius = ($size, theme) => sizeToHeight($size, theme) / 2;
 const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
 const colorStyles$2 = _ref => {
   let {
     theme,
-    color
+    $color
   } = _ref;
   const backgroundColor = reactTheming.getColor({
     theme,
@@ -90,12 +90,12 @@ const colorStyles$2 = _ref => {
     }
   });
   let options;
-  if (color) {
-    options = color.includes('.') ? {
-      variable: color,
+  if ($color) {
+    options = $color.includes('.') ? {
+      variable: $color,
       theme
     } : {
-      hue: color,
+      hue: $color,
       theme
     };
   } else {
@@ -107,24 +107,21 @@ const colorStyles$2 = _ref => {
   const foregroundColor = reactTheming.getColor(options);
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
-const StyledProgressBackground = styled__default.default.div.attrs(props => ({
+const StyledProgressBackground = styled__default.default.div.attrs({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '9.1.1',
-  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
-})).withConfig({
+  'data-garden-version': '9.2.0'
+}).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
   componentId: "sc-2g8w4s-0"
-})(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => props.borderRadius, colorStyles$2, props => reactTheming.retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props));
+})(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => sizeToBorderRadius(props.$size, props.theme), colorStyles$2, props => reactTheming.retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props));
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
-const StyledProgressIndicator = styled__default.default.div.attrs(props => ({
+const StyledProgressIndicator = styled__default.default.div.attrs({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '9.1.1',
-  height: props.height || sizeToHeight(props.size, props.theme),
-  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
-})).withConfig({
+  'data-garden-version': '9.2.0'
+}).withConfig({
   displayName: "StyledProgress__StyledProgressIndicator",
   componentId: "sc-2g8w4s-1"
-})(["transition:width 0.1s ease-in-out;border-radius:", "px;background:currentcolor;width:", "%;height:", "px;", ""], props => props.borderRadius, props => props.value, props => props.height, props => reactTheming.retrieveComponentStyles(PROGESS_INDICATOR_COMPONENT_ID, props));
+})(["transition:width 0.1s ease-in-out;border-radius:", "px;background:currentcolor;width:", "%;height:", "px;", ""], props => sizeToBorderRadius(props.$size, props.theme), props => props.$value, props => sizeToHeight(props.$size, props.theme), props => reactTheming.retrieveComponentStyles(PROGESS_INDICATOR_COMPONENT_ID, props));
 
 const COMPONENT_ID$4 = 'loaders.skeleton';
 const fadeInAnimation = styled.keyframes(["0%,60%{opacity:0;}100%{opacity:1;}"]);
@@ -171,7 +168,7 @@ const gradientStyles = props => {
 };
 const StyledSkeleton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -184,8 +181,8 @@ const StyledSpinnerCircle = styled__default.default.circle.attrs(props => ({
   fill: 'none',
   stroke: 'currentColor',
   strokeLinecap: 'round',
-  strokeWidth: props.strokeWidthValue,
-  strokeDasharray: `${props.dasharrayValue} 250`,
+  strokeWidth: props.$strokeWidthValue,
+  strokeDasharray: `${props.$dasharrayValue} 250`,
   transform: props.transform
 })).withConfig({
   displayName: "StyledSpinnerCircle",
@@ -195,41 +192,39 @@ const StyledSpinnerCircle = styled__default.default.circle.attrs(props => ({
 const colorStyles$1 = _ref => {
   let {
     theme,
-    color = 'inherit'
+    $color = 'inherit'
   } = _ref;
-  const options = color.includes('.') ? {
-    variable: color,
+  const options = $color.includes('.') ? {
+    variable: $color,
     theme
   } : {
-    hue: color,
+    hue: $color,
     theme
   };
   return styled.css(["color:", ";"], reactTheming.getColor(options));
 };
 const StyledSVG = styled__default.default.svg.attrs(props => ({
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   xmlns: 'http://www.w3.org/2000/svg',
-  width: props.width,
-  height: props.height,
   focusable: 'false',
-  viewBox: `0 0 ${props.width} ${props.height}`,
+  viewBox: `0 0 ${props.$width} ${props.$height}`,
   role: 'img'
 })).withConfig({
   displayName: "StyledSVG",
   componentId: "sc-1xtc3kx-0"
-})(["width:", ";height:", ";font-size:", ";", ";", ";"], props => props.containerWidth || '1em', props => props.containerHeight || '0.9em', props => props.fontSize || 'inherit', colorStyles$1, props => reactTheming.retrieveComponentStyles(props.dataGardenId, props));
+})(["width:", ";height:", ";font-size:", ";", ";", ";"], props => props.$containerWidth || '1em', props => props.$containerHeight || '0.9em', props => props.$fontSize || 'inherit', colorStyles$1, props => reactTheming.retrieveComponentStyles(props['data-garden-id'], props));
 
 const COMPONENT_ID$3 = 'loaders.inline';
 const colorStyles = _ref => {
   let {
     theme,
-    color
+    $color
   } = _ref;
-  const options = color.includes('.') ? {
-    variable: color,
+  const options = $color.includes('.') ? {
+    variable: $color,
     theme
   } : {
-    hue: color,
+    hue: $color,
     theme
   };
   return styled.css(["color:", ";"], reactTheming.getColor(options));
@@ -250,10 +245,10 @@ 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.1.1',
+  'data-garden-version': '9.2.0',
   viewBox: '0 0 16 4',
-  width: props.size,
-  height: props.size * 0.25
+  width: props.$size,
+  height: props.$size * 0.25
 })).withConfig({
   displayName: "StyledInline",
   componentId: "sc-fxsb9l-1"
@@ -299,22 +294,22 @@ const Dots = React.forwardRef((_ref, ref) => {
     }, "\xA0");
   }
   return React__default.default.createElement(StyledSVG, Object.assign({
+    "data-garden-id": COMPONENT_ID$2,
     ref: ref,
-    fontSize: size,
-    color: color,
-    width: "80",
-    height: "72",
-    dataGardenId: COMPONENT_ID$2
+    $fontSize: size,
+    $color: color,
+    $width: "80",
+    $height: "72"
   }, other), React__default.default.createElement("g", {
     fill: "currentColor"
   }, React__default.default.createElement(StyledDotsCircleOne, {
-    duration: duration,
+    $duration: duration,
     ref: dotOne
   }), React__default.default.createElement(StyledDotsCircleTwo, {
-    duration: duration,
+    $duration: duration,
     ref: dotTwo
   }), React__default.default.createElement(StyledDotsCircleThree, {
-    duration: duration,
+    $duration: duration,
     ref: dotThree
   })));
 });
@@ -337,6 +332,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$1 = 'loaders.progress';
 const Progress = React__default.default.forwardRef((_ref, ref) => {
   let {
+    color,
     value,
     size,
     'aria-label': label,
@@ -349,17 +345,18 @@ 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.1.1',
+      "data-garden-version": '9.2.0',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,
       role: "progressbar",
-      size: size,
+      $size: size,
+      $color: color,
       ref: ref,
       "aria-label": ariaLabel
     }, other), React__default.default.createElement(StyledProgressIndicator, {
-      value: percentage,
-      size: size
+      $value: percentage,
+      $size: size
     }))
   );
 });
@@ -515,17 +512,17 @@ const Spinner = React.forwardRef((_ref, ref) => {
     }, "\xA0");
   }
   return React__default.default.createElement(StyledSVG, Object.assign({
+    $color: color,
+    $containerHeight: "1em",
+    $containerWidth: "1em",
+    $fontSize: size,
+    "data-garden-id": COMPONENT_ID,
+    $height: HEIGHT,
     ref: ref,
-    fontSize: size,
-    color: color,
-    width: WIDTH,
-    height: HEIGHT,
-    dataGardenId: COMPONENT_ID,
-    containerHeight: "1em",
-    containerWidth: "1em"
+    $width: WIDTH
   }, other), React__default.default.createElement(StyledSpinnerCircle, {
-    dasharrayValue: dasharrayValue,
-    strokeWidthValue: strokeWidthValue,
+    $dasharrayValue: dasharrayValue,
+    $strokeWidthValue: strokeWidthValue,
     transform: `rotate(${rotationValue}, ${WIDTH / 2}, ${HEIGHT / 2})`
   }));
 });
@@ -553,8 +550,8 @@ const Inline = React.forwardRef((_ref, ref) => {
   return (
     React__default.default.createElement(StyledInline, Object.assign({
       ref: ref,
-      size: size,
-      color: color,
+      $size: size,
+      $color: color,
       "aria-label": ariaLabel,
       role: "img"
     }, other), React__default.default.createElement(StyledCircle, {

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

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 interface IStyledDotProps {
-    duration: number;
+    $duration: number;
 }
 export declare const StyledDotsCircleOne: import("styled-components").StyledComponent<"circle", import("styled-components").DefaultTheme, {
     cy: 36;

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

@@ -6,8 +6,8 @@
  */
 import { DefaultTheme } from 'styled-components';
 interface IStyledInlineProps {
-    size: number;
-    color: string;
+    $size: number;
+    $color: string;
 }
 export declare const StyledCircle: import("styled-components").StyledComponent<"circle", DefaultTheme, {
     fill: "currentColor";

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

@@ -7,16 +7,13 @@
 import { DefaultTheme } from 'styled-components';
 import { Size } from '../types';
 interface IStyledProgressBackgroundProps {
-    size: Size;
-    borderRadius?: number;
-    color?: string;
+    $size: Size;
+    $color?: string;
 }
 export declare const StyledProgressBackground: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledProgressBackgroundProps, never>;
 interface IStyledProgressIndicatorProps {
-    size: Size;
-    borderRadius?: number;
-    value: number;
-    height?: number;
+    $size: Size;
+    $value: number;
 }
 export declare const StyledProgressIndicator: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledProgressIndicatorProps, never>;
 export {};

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

@@ -6,13 +6,13 @@
  */
 import { DefaultTheme } from 'styled-components';
 interface IStyledSVGProps {
-    dataGardenId: string;
-    color?: string;
-    fontSize?: string | number;
-    width: number | string;
-    height: number | string;
-    containerWidth?: string;
-    containerHeight?: string;
+    'data-garden-id': string;
+    $color?: string;
+    $fontSize?: string | number;
+    $width: number | string;
+    $height: number | string;
+    $containerWidth?: string;
+    $containerHeight?: string;
 }
 export declare const StyledSVG: import("styled-components").StyledComponent<"svg", DefaultTheme, IStyledSVGProps, never>;
 export {};

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

@@ -5,8 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 interface IStyledSpinnerCircleProps {
-    dasharrayValue: number;
-    strokeWidthValue: number;
+    $dasharrayValue: number;
+    $strokeWidthValue: number;
     transform: string;
 }
 export declare const StyledSpinnerCircle: import("styled-components").StyledComponent<"circle", import("styled-components").DefaultTheme, IStyledSpinnerCircleProps, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "9.1.1",
+  "version": "9.2.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": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.1.1"
+    "@zendeskgarden/react-theming": "^9.2.0"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "21eaf7b57f27f1a846ed332f1b8e655d6bc0a13b"
+  "gitHead": "23a86c9a1e830685e277544c089b44614c2261ac"
 }