@zendeskgarden/react-loaders 9.3.0 → 9.5.0

package/dist/esm/elements/Progress.js

@@ -32,7 +32,7 @@ const Progress = React.forwardRef((_ref, ref) => {
   return (
     React.createElement(StyledProgressBackground, Object.assign({
       "data-garden-id": COMPONENT_ID,
-      "data-garden-version": '9.3.0',
+      "data-garden-version": '9.5.0',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,

package/dist/esm/styled/StyledInline.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css, keyframes } from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'loaders.inline';
 const colorStyles = _ref => {
@@ -38,13 +38,13 @@ const StyledCircle = styled.circle.attrs({
 })([""]);
 const StyledInline = styled.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0',
+  'data-garden-version': '9.5.0',
   viewBox: '0 0 16 4',
   width: props.$size,
   height: props.$size * 0.25
 })).withConfig({
   displayName: "StyledInline",
   componentId: "sc-fxsb9l-1"
-})(["", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], colorStyles, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], colorStyles, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', componentStyles);
 
 export { StyledCircle, StyledInline };

package/dist/esm/styled/StyledLoadingPlaceholder.js

@@ -5,16 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'loaders.loading_placeholder';
 const StyledLoadingPlaceholder = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0',
+  'data-garden-version': '9.5.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 => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-block;width:", ";height:", ";font-size:", ";", ""], props => props.width || '1em', props => props.height || '0.9em', props => props.fontSize, componentStyles);
 
 export { StyledLoadingPlaceholder };

package/dist/esm/styled/StyledProgress.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const sizeToHeight = ($size, theme) => {
   switch ($size) {
@@ -55,18 +55,18 @@ const colorStyles = _ref => {
 };
 const StyledProgressBackground = styled.div.attrs({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
   componentId: "sc-2g8w4s-0"
-})(["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));
+})(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => sizeToBorderRadius(props.$size, props.theme), colorStyles, componentStyles);
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 const StyledProgressIndicator = styled.div.attrs({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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 => sizeToBorderRadius(props.$size, props.theme), props => props.$value, props => sizeToHeight(props.$size, props.theme), 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), componentStyles);
 
 export { StyledProgressBackground, StyledProgressIndicator };

package/dist/esm/styled/StyledSVG.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const colorStyles = _ref => {
   let {
@@ -22,7 +22,7 @@ const colorStyles = _ref => {
   return css(["color:", ";"], getColor(options));
 };
 const StyledSVG = styled.svg.attrs(props => ({
-  'data-garden-version': '9.3.0',
+  'data-garden-version': '9.5.0',
   xmlns: 'http://www.w3.org/2000/svg',
   focusable: 'false',
   viewBox: `0 0 ${props.$width} ${props.$height}`,
@@ -30,6 +30,6 @@ const StyledSVG = styled.svg.attrs(props => ({
 })).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['data-garden-id'], props));
+})(["width:", ";height:", ";font-size:", ";", ";", ";"], props => props.$containerWidth || '1em', props => props.$containerHeight || '0.9em', props => props.$fontSize || 'inherit', colorStyles, componentStyles);
 
 export { StyledSVG };

package/dist/esm/styled/StyledSkeleton.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { keyframes, css } from 'styled-components';
-import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'loaders.skeleton';
 const fadeInAnimation = keyframes(["0%,60%{opacity:0;}100%{opacity:1;}"]);
@@ -52,10 +52,10 @@ const gradientStyles = props => {
 };
 const StyledSkeleton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
-})(["display:inline-block;position:relative;animation:", " 750ms linear;border-radius:", ";background-color:", ";width:", ";height:", ";overflow:hidden;line-height:", ";&::before{position:absolute;top:0;width:1000px;height:100%;content:'';", " ", "}", ";"], fadeInAnimation, props => props.theme.borderRadii.md, getBackgroundColor, props => props.$width, props => props.$height, props => getLineHeight(props.theme.fontSizes.sm, props.theme.space.base * 5), animationStyles, gradientStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-block;position:relative;animation:", " 750ms linear;border-radius:", ";background-color:", ";width:", ";height:", ";overflow:hidden;line-height:", ";&::before{position:absolute;top:0;width:1000px;height:100%;content:'';", " ", "}", ";"], fadeInAnimation, props => props.theme.borderRadii.md, getBackgroundColor, props => props.$width, props => props.$height, props => getLineHeight(props.theme.fontSizes.sm, props.theme.space.base * 5), animationStyles, gradientStyles, componentStyles);
 
 export { StyledSkeleton };

package/dist/index.cjs.js

@@ -54,12 +54,12 @@ 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.3.0',
+  'data-garden-version': '9.5.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));
+})(["display:inline-block;width:", ";height:", ";font-size:", ";", ""], props => props.width || '1em', props => props.height || '0.9em', props => props.fontSize, reactTheming.componentStyles);
 
 const sizeToHeight = ($size, theme) => {
   switch ($size) {
@@ -109,19 +109,19 @@ const colorStyles$2 = _ref => {
 };
 const StyledProgressBackground = styled__default.default.div.attrs({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
   componentId: "sc-2g8w4s-0"
-})(["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));
+})(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => sizeToBorderRadius(props.$size, props.theme), colorStyles$2, reactTheming.componentStyles);
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 const StyledProgressIndicator = styled__default.default.div.attrs({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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 => sizeToBorderRadius(props.$size, props.theme), props => props.$value, props => sizeToHeight(props.$size, props.theme), 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), reactTheming.componentStyles);
 
 const COMPONENT_ID$4 = 'loaders.skeleton';
 const fadeInAnimation = styled.keyframes(["0%,60%{opacity:0;}100%{opacity:1;}"]);
@@ -168,11 +168,11 @@ const gradientStyles = props => {
 };
 const StyledSkeleton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
-})(["display:inline-block;position:relative;animation:", " 750ms linear;border-radius:", ";background-color:", ";width:", ";height:", ";overflow:hidden;line-height:", ";&::before{position:absolute;top:0;width:1000px;height:100%;content:'';", " ", "}", ";"], fadeInAnimation, props => props.theme.borderRadii.md, getBackgroundColor, props => props.$width, props => props.$height, props => reactTheming.getLineHeight(props.theme.fontSizes.sm, props.theme.space.base * 5), animationStyles, gradientStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["display:inline-block;position:relative;animation:", " 750ms linear;border-radius:", ";background-color:", ";width:", ";height:", ";overflow:hidden;line-height:", ";&::before{position:absolute;top:0;width:1000px;height:100%;content:'';", " ", "}", ";"], fadeInAnimation, props => props.theme.borderRadii.md, getBackgroundColor, props => props.$width, props => props.$height, props => reactTheming.getLineHeight(props.theme.fontSizes.sm, props.theme.space.base * 5), animationStyles, gradientStyles, reactTheming.componentStyles);
 
 const StyledSpinnerCircle = styled__default.default.circle.attrs(props => ({
   cx: 40,
@@ -204,7 +204,7 @@ const colorStyles$1 = _ref => {
   return styled.css(["color:", ";"], reactTheming.getColor(options));
 };
 const StyledSVG = styled__default.default.svg.attrs(props => ({
-  'data-garden-version': '9.3.0',
+  'data-garden-version': '9.5.0',
   xmlns: 'http://www.w3.org/2000/svg',
   focusable: 'false',
   viewBox: `0 0 ${props.$width} ${props.$height}`,
@@ -212,7 +212,7 @@ const StyledSVG = styled__default.default.svg.attrs(props => ({
 })).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['data-garden-id'], props));
+})(["width:", ";height:", ";font-size:", ";", ";", ";"], props => props.$containerWidth || '1em', props => props.$containerHeight || '0.9em', props => props.$fontSize || 'inherit', colorStyles$1, reactTheming.componentStyles);
 
 const COMPONENT_ID$3 = 'loaders.inline';
 const colorStyles = _ref => {
@@ -245,14 +245,14 @@ 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.3.0',
+  'data-garden-version': '9.5.0',
   viewBox: '0 0 16 4',
   width: props.$size,
   height: props.$size * 0.25
 })).withConfig({
   displayName: "StyledInline",
   componentId: "sc-fxsb9l-1"
-})(["", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], colorStyles, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], colorStyles, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'loaders.dots';
 const Dots = React.forwardRef((_ref, ref) => {
@@ -345,7 +345,7 @@ 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.3.0',
+      "data-garden-version": '9.5.0',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "9.3.0",
+  "version": "9.5.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 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.3.0"
+    "@zendeskgarden/react-theming": "^9.5.0"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "fa6461e0d9fae27956980056006e8013daedc6b9"
+  "gitHead": "43546784a9aa985332ddcc6dd09209a11e2c03ff"
 }