@zendeskgarden/react-loaders 9.2.0 → 9.3.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.2.0',
+      "data-garden-version": '9.3.0',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,

package/dist/esm/styled/StyledInline.js

@@ -38,7 +38,7 @@ const StyledCircle = styled.circle.attrs({
 })([""]);
 const StyledInline = styled.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.2.0',
+  'data-garden-version': '9.3.0',
   viewBox: '0 0 16 4',
   width: props.$size,
   height: props.$size * 0.25

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.2.0',
+  'data-garden-version': '9.3.0',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",

package/dist/esm/styled/StyledProgress.js

@@ -55,7 +55,7 @@ const colorStyles = _ref => {
 };
 const StyledProgressBackground = styled.div.attrs({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
   componentId: "sc-2g8w4s-0"
@@ -63,7 +63,7 @@ const StyledProgressBackground = styled.div.attrs({
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 const StyledProgressIndicator = styled.div.attrs({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledProgress__StyledProgressIndicator",
   componentId: "sc-2g8w4s-1"

package/dist/esm/styled/StyledSVG.js

@@ -22,7 +22,7 @@ const colorStyles = _ref => {
   return css(["color:", ";"], getColor(options));
 };
 const StyledSVG = styled.svg.attrs(props => ({
-  'data-garden-version': '9.2.0',
+  'data-garden-version': '9.3.0',
   xmlns: 'http://www.w3.org/2000/svg',
   focusable: 'false',
   viewBox: `0 0 ${props.$width} ${props.$height}`,

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.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"

package/dist/index.cjs.js

@@ -54,7 +54,7 @@ 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.2.0',
+  'data-garden-version': '9.3.0',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -109,7 +109,7 @@ const colorStyles$2 = _ref => {
 };
 const StyledProgressBackground = styled__default.default.div.attrs({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
   componentId: "sc-2g8w4s-0"
@@ -117,7 +117,7 @@ const StyledProgressBackground = styled__default.default.div.attrs({
 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.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledProgress__StyledProgressIndicator",
   componentId: "sc-2g8w4s-1"
@@ -168,7 +168,7 @@ const gradientStyles = props => {
 };
 const StyledSkeleton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -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.2.0',
+  'data-garden-version': '9.3.0',
   xmlns: 'http://www.w3.org/2000/svg',
   focusable: 'false',
   viewBox: `0 0 ${props.$width} ${props.$height}`,
@@ -245,7 +245,7 @@ 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.2.0',
+  'data-garden-version': '9.3.0',
   viewBox: '0 0 16 4',
   width: props.$size,
   height: props.$size * 0.25
@@ -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.2.0',
+      "data-garden-version": '9.3.0',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,

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

@@ -7,22 +7,19 @@
 interface IStyledDotProps {
     $duration: number;
 }
-export declare const StyledDotsCircleOne: import("styled-components").StyledComponent<"circle", import("styled-components").DefaultTheme, {
-    cy: 36;
-    r: 9;
-} & {
-    cx: 9;
-} & IStyledDotProps, "cx" | "cy" | "r">;
-export declare const StyledDotsCircleTwo: import("styled-components").StyledComponent<"circle", import("styled-components").DefaultTheme, {
-    cy: 36;
-    r: 9;
-} & {
-    cx: 40;
-} & IStyledDotProps, "cx" | "cy" | "r">;
-export declare const StyledDotsCircleThree: import("styled-components").StyledComponent<"circle", import("styled-components").DefaultTheme, {
-    cy: 36;
-    r: 9;
-} & {
-    cx: 71;
-} & IStyledDotProps, "cx" | "cy" | "r">;
+export declare const StyledDotsCircleOne: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, Omit<import("react").SVGProps<SVGCircleElement>, "ref"> & {
+    ref?: ((instance: SVGCircleElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGCircleElement> | null | undefined;
+}>, never>, never>, import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, Omit<import("react").SVGProps<SVGCircleElement>, "ref"> & {
+    ref?: ((instance: SVGCircleElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGCircleElement> | null | undefined;
+}>, never>, never>>, never>, IStyledDotProps>> & string;
+export declare const StyledDotsCircleTwo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, Omit<import("react").SVGProps<SVGCircleElement>, "ref"> & {
+    ref?: ((instance: SVGCircleElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGCircleElement> | null | undefined;
+}>, never>, never>, import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, Omit<import("react").SVGProps<SVGCircleElement>, "ref"> & {
+    ref?: ((instance: SVGCircleElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGCircleElement> | null | undefined;
+}>, never>, never>>, never>, IStyledDotProps>> & string;
+export declare const StyledDotsCircleThree: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, Omit<import("react").SVGProps<SVGCircleElement>, "ref"> & {
+    ref?: ((instance: SVGCircleElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGCircleElement> | null | undefined;
+}>, never>, never>, import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, Omit<import("react").SVGProps<SVGCircleElement>, "ref"> & {
+    ref?: ((instance: SVGCircleElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGCircleElement> | null | undefined;
+}>, never>, never>>, never>, IStyledDotProps>> & string;
 export {};

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

@@ -4,15 +4,14 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { DefaultTheme } from 'styled-components';
 interface IStyledInlineProps {
     $size: number;
     $color: string;
 }
-export declare const StyledCircle: import("styled-components").StyledComponent<"circle", DefaultTheme, {
-    fill: "currentColor";
-    cy: 2;
-    r: 2;
-}, "cy" | "fill" | "r">;
-export declare const StyledInline: import("styled-components").StyledComponent<"svg", DefaultTheme, IStyledInlineProps, never>;
+export declare const StyledCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, Omit<import("react").SVGProps<SVGCircleElement>, "ref"> & {
+    ref?: ((instance: SVGCircleElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGCircleElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const StyledInline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}>, IStyledInlineProps>, IStyledInlineProps>> & string;
 export {};

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

@@ -9,9 +9,7 @@ interface IStyledLoadingPlaceholderProps {
     width?: string;
     height?: string;
 }
-export declare const StyledLoadingPlaceholder: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    'data-garden-id': string;
-    'data-garden-version': string;
-    role: "progressbar";
-} & IStyledLoadingPlaceholderProps, "role" | "data-garden-id" | "data-garden-version">;
+export declare const StyledLoadingPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, IStyledLoadingPlaceholderProps>> & string;
 export {};

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

@@ -4,16 +4,19 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { DefaultTheme } from 'styled-components';
 import { Size } from '../types';
 interface IStyledProgressBackgroundProps {
     $size: Size;
     $color?: string;
 }
-export declare const StyledProgressBackground: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledProgressBackgroundProps, never>;
+export declare const StyledProgressBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, IStyledProgressBackgroundProps>, IStyledProgressBackgroundProps>> & string;
 interface IStyledProgressIndicatorProps {
     $size: Size;
     $value: number;
 }
-export declare const StyledProgressIndicator: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledProgressIndicatorProps, never>;
+export declare const StyledProgressIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, IStyledProgressIndicatorProps>, IStyledProgressIndicatorProps>> & string;
 export {};

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

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { DefaultTheme } from 'styled-components';
 interface IStyledSVGProps {
     'data-garden-id': string;
     $color?: string;
@@ -14,5 +13,7 @@ interface IStyledSVGProps {
     $containerWidth?: string;
     $containerHeight?: string;
 }
-export declare const StyledSVG: import("styled-components").StyledComponent<"svg", DefaultTheme, IStyledSVGProps, never>;
+export declare const StyledSVG: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}>, IStyledSVGProps>, IStyledSVGProps>> & string;
 export {};

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

@@ -4,14 +4,12 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { DefaultTheme } from 'styled-components';
 interface IStyledSkeletonProps {
     $height?: string;
     $width?: string;
     $isLight?: boolean;
 }
-export declare const StyledSkeleton: import("styled-components").StyledComponent<"div", DefaultTheme, {
-    'data-garden-id': string;
-    'data-garden-version': string;
-} & IStyledSkeletonProps, "data-garden-id" | "data-garden-version">;
+export declare const StyledSkeleton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, IStyledSkeletonProps>> & string;
 export {};

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

@@ -9,5 +9,7 @@ interface IStyledSpinnerCircleProps {
     $strokeWidthValue: number;
     transform: string;
 }
-export declare const StyledSpinnerCircle: import("styled-components").StyledComponent<"circle", import("styled-components").DefaultTheme, IStyledSpinnerCircleProps, never>;
+export declare const StyledSpinnerCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, Omit<import("react").SVGProps<SVGCircleElement>, "ref"> & {
+    ref?: ((instance: SVGCircleElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGCircleElement> | null | undefined;
+}>, IStyledSpinnerCircleProps>, IStyledSpinnerCircleProps>> & string;
 export {};

package/dist/typings/utils/animations.d.ts

@@ -4,6 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export declare const dotOneKeyframes: import("styled-components").Keyframes;
-export declare const dotTwoKeyframes: import("styled-components").Keyframes;
-export declare const dotThreeKeyframes: import("styled-components").Keyframes;
+export declare const dotOneKeyframes: import("styled-components/dist/models/Keyframes").default;
+export declare const dotTwoKeyframes: import("styled-components/dist/models/Keyframes").default;
+export declare const dotThreeKeyframes: import("styled-components/dist/models/Keyframes").default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "9.2.0",
+  "version": "9.3.0",
   "description": "Components relating to loaders in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -29,10 +29,10 @@
     "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.2.0"
+    "@zendeskgarden/react-theming": "^9.3.0"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "23a86c9a1e830685e277544c089b44614c2261ac"
+  "gitHead": "fa6461e0d9fae27956980056006e8013daedc6b9"
 }