@zendeskgarden/react-loaders 9.0.0-next.2 → 9.0.0-next.20

package/dist/esm/elements/Dots.js

@@ -0,0 +1,93 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 React, { forwardRef, useContext, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { useSchedule } from '@zendeskgarden/container-schedule';
+import { useDocument } from '@zendeskgarden/react-theming';
+import { StyledDotsCircleOne, StyledDotsCircleTwo, StyledDotsCircleThree } from '../styled/StyledDots.js';
+import { StyledLoadingPlaceholder } from '../styled/StyledLoadingPlaceholder.js';
+import '../styled/StyledProgress.js';
+import '../styled/StyledSkeleton.js';
+import '../styled/StyledSpinnerCircle.js';
+import { StyledSVG } from '../styled/StyledSVG.js';
+import '../styled/StyledInline.js';
+
+const COMPONENT_ID = 'loaders.dots';
+const Dots = forwardRef((_ref, ref) => {
+  let {
+    size,
+    color,
+    duration,
+    delayMS,
+    ...other
+  } = _ref;
+  const theme = useContext(ThemeContext);
+  const environment = useDocument(theme);
+  const canTransformSVG = useRef(null);
+  if (environment && canTransformSVG.current === null) {
+    const svg = environment.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    canTransformSVG.current = 'transform' in svg;
+  }
+  const {
+    delayComplete
+  } = useSchedule({
+    duration,
+    delayMS,
+    loop: true
+  });
+  const dotOne = useRef(null);
+  const dotTwo = useRef(null);
+  const dotThree = useRef(null);
+  useEffect(() => {
+    if (!canTransformSVG.current && delayComplete) {
+      const transforms = [window.getComputedStyle(dotOne.current).getPropertyValue('transform'), window.getComputedStyle(dotTwo.current).getPropertyValue('transform'), window.getComputedStyle(dotThree.current).getPropertyValue('transform')];
+      dotOne.current.setAttribute('transform', transforms[0]);
+      dotTwo.current.setAttribute('transform', transforms[1]);
+      dotThree.current.setAttribute('transform', transforms[2]);
+    }
+  });
+  if (!delayComplete && delayMS !== 0) {
+    return React.createElement(StyledLoadingPlaceholder, {
+      fontSize: size
+    }, "\xA0");
+  }
+  return React.createElement(StyledSVG, Object.assign({
+    ref: ref,
+    fontSize: size,
+    color: color,
+    width: "80",
+    height: "72",
+    dataGardenId: COMPONENT_ID
+  }, other), React.createElement("g", {
+    fill: "currentColor"
+  }, React.createElement(StyledDotsCircleOne, {
+    duration: duration,
+    ref: dotOne
+  }), React.createElement(StyledDotsCircleTwo, {
+    duration: duration,
+    ref: dotTwo
+  }), React.createElement(StyledDotsCircleThree, {
+    duration: duration,
+    ref: dotThree
+  })));
+});
+Dots.displayName = 'Dots';
+Dots.propTypes = {
+  size: PropTypes.any,
+  duration: PropTypes.number,
+  color: PropTypes.string,
+  delayMS: PropTypes.number
+};
+Dots.defaultProps = {
+  size: 'inherit',
+  color: 'inherit',
+  duration: 1250,
+  delayMS: 750
+};
+
+export { Dots };

package/dist/esm/elements/Inline.js

@@ -0,0 +1,51 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useText } from '@zendeskgarden/react-theming';
+import '../styled/StyledDots.js';
+import '../styled/StyledLoadingPlaceholder.js';
+import '../styled/StyledProgress.js';
+import '../styled/StyledSkeleton.js';
+import '../styled/StyledSpinnerCircle.js';
+import '../styled/StyledSVG.js';
+import { StyledInline, StyledCircle } from '../styled/StyledInline.js';
+
+const Inline = forwardRef((_ref, ref) => {
+  let {
+    size,
+    color,
+    ...other
+  } = _ref;
+  const ariaLabel = useText(Inline, other, 'aria-label', 'loading');
+  return (
+    React.createElement(StyledInline, Object.assign({
+      ref: ref,
+      size: size,
+      color: color,
+      "aria-label": ariaLabel,
+      role: "img"
+    }, other), React.createElement(StyledCircle, {
+      cx: "14"
+    }), React.createElement(StyledCircle, {
+      cx: "8"
+    }), React.createElement(StyledCircle, {
+      cx: "2"
+    }))
+  );
+});
+Inline.displayName = 'Inline';
+Inline.propTypes = {
+  size: PropTypes.number,
+  color: PropTypes.string
+};
+Inline.defaultProps = {
+  size: 16,
+  color: 'inherit'
+};
+
+export { Inline };

package/dist/esm/elements/Progress.js

@@ -0,0 +1,59 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 React from 'react';
+import PropTypes from 'prop-types';
+import { useText } from '@zendeskgarden/react-theming';
+import { SIZE } from '../types/index.js';
+import '../styled/StyledDots.js';
+import '../styled/StyledLoadingPlaceholder.js';
+import { StyledProgressBackground, StyledProgressIndicator } from '../styled/StyledProgress.js';
+import '../styled/StyledSkeleton.js';
+import '../styled/StyledSpinnerCircle.js';
+import '../styled/StyledSVG.js';
+import '../styled/StyledInline.js';
+
+const COMPONENT_ID = 'loaders.progress';
+const Progress = React.forwardRef((_ref, ref) => {
+  let {
+    value,
+    size,
+    'aria-label': label,
+    ...other
+  } = _ref;
+  const percentage = Math.max(0, Math.min(100, value));
+  const ariaLabel = useText(Progress, {
+    'aria-label': label
+  }, 'aria-label', 'Progress');
+  return (
+    React.createElement(StyledProgressBackground, Object.assign({
+      "data-garden-id": COMPONENT_ID,
+      "data-garden-version": '9.0.0-next.20',
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": percentage,
+      role: "progressbar",
+      size: size,
+      ref: ref,
+      "aria-label": ariaLabel
+    }, other), React.createElement(StyledProgressIndicator, {
+      value: percentage,
+      size: size
+    }))
+  );
+});
+Progress.displayName = 'Progress';
+Progress.propTypes = {
+  color: PropTypes.string,
+  value: PropTypes.number.isRequired,
+  size: PropTypes.oneOf(SIZE)
+};
+Progress.defaultProps = {
+  value: 0,
+  size: 'medium'
+};
+
+export { Progress };

package/dist/esm/elements/Skeleton.js

@@ -0,0 +1,42 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '../styled/StyledDots.js';
+import '../styled/StyledLoadingPlaceholder.js';
+import '../styled/StyledProgress.js';
+import { StyledSkeleton } from '../styled/StyledSkeleton.js';
+import '../styled/StyledSpinnerCircle.js';
+import '../styled/StyledSVG.js';
+import '../styled/StyledInline.js';
+
+const Skeleton = forwardRef((_ref, ref) => {
+  let {
+    width,
+    height,
+    isLight,
+    ...other
+  } = _ref;
+  return React.createElement(StyledSkeleton, Object.assign({
+    ref: ref,
+    $isLight: isLight,
+    $width: width,
+    $height: height
+  }, other), "\xA0");
+});
+Skeleton.displayName = 'Skeleton';
+Skeleton.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  isLight: PropTypes.bool
+};
+Skeleton.defaultProps = {
+  width: '100%',
+  height: '100%'
+};
+
+export { Skeleton };

package/dist/esm/elements/Spinner.js

@@ -0,0 +1,99 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useSchedule } from '@zendeskgarden/container-schedule';
+import { STROKE_WIDTH_FRAMES, ROTATION_FRAMES, DASHARRAY_FRAMES } from '../utils/spinner-coordinates.js';
+import '../styled/StyledDots.js';
+import { StyledLoadingPlaceholder } from '../styled/StyledLoadingPlaceholder.js';
+import '../styled/StyledProgress.js';
+import '../styled/StyledSkeleton.js';
+import { StyledSpinnerCircle } from '../styled/StyledSpinnerCircle.js';
+import { StyledSVG } from '../styled/StyledSVG.js';
+import '../styled/StyledInline.js';
+
+const COMPONENT_ID = 'loaders.spinner';
+const TOTAL_FRAMES = 100;
+const computeFrames = (frames, duration) => {
+  return Object.entries(frames).reduce((acc, item, index, arr) => {
+    const [frame, value] = item;
+    const [nextFrame, nextValue] = arr[index + 1] || [TOTAL_FRAMES, arr[0][1]];
+    const diff = parseInt(nextFrame, 10) - parseInt(frame, 10);
+    const frameHz = 1000 / 60;
+    let subDuration = duration / (TOTAL_FRAMES - 1) * diff;
+    let lastValue = value;
+    acc[frame] = value;
+    for (let idx = 0; idx < diff; idx++) {
+      lastValue = lastValue + (nextValue - lastValue) * (frameHz / subDuration);
+      subDuration = duration / (TOTAL_FRAMES - 1) * (diff - idx);
+      acc[parseInt(frame, 10) + idx + 1] = lastValue;
+    }
+    acc[nextFrame] = nextValue;
+    return acc;
+  }, {});
+};
+const Spinner = forwardRef((_ref, ref) => {
+  let {
+    size,
+    duration,
+    color,
+    delayMS,
+    ...other
+  } = _ref;
+  const strokeWidthValues = computeFrames(STROKE_WIDTH_FRAMES, duration);
+  const rotationValues = computeFrames(ROTATION_FRAMES, duration);
+  const dasharrayValues = computeFrames(DASHARRAY_FRAMES, duration);
+  const {
+    elapsed,
+    delayComplete
+  } = useSchedule({
+    duration,
+    delayMS
+  });
+  const frame = (elapsed * 100).toFixed(0);
+  const strokeWidthValue = strokeWidthValues[frame];
+  const rotationValue = rotationValues[frame];
+  const dasharrayValue = dasharrayValues[frame];
+  const WIDTH = 80;
+  const HEIGHT = 80;
+  if (!delayComplete && delayMS !== 0) {
+    return React.createElement(StyledLoadingPlaceholder, {
+      width: "1em",
+      height: "1em",
+      fontSize: size
+    }, "\xA0");
+  }
+  return React.createElement(StyledSVG, Object.assign({
+    ref: ref,
+    fontSize: size,
+    color: color,
+    width: WIDTH,
+    height: HEIGHT,
+    dataGardenId: COMPONENT_ID,
+    containerHeight: "1em",
+    containerWidth: "1em"
+  }, other), React.createElement(StyledSpinnerCircle, {
+    dasharrayValue: dasharrayValue,
+    strokeWidthValue: strokeWidthValue,
+    transform: `rotate(${rotationValue}, ${WIDTH / 2}, ${HEIGHT / 2})`
+  }));
+});
+Spinner.displayName = 'Spinner';
+Spinner.propTypes = {
+  size: PropTypes.any,
+  duration: PropTypes.number,
+  color: PropTypes.string,
+  delayMS: PropTypes.number
+};
+Spinner.defaultProps = {
+  size: 'inherit',
+  duration: 1250,
+  color: 'inherit',
+  delayMS: 750
+};
+
+export { Spinner };

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 { Dots } from './elements/Dots.js';
+export { Progress } from './elements/Progress.js';
+export { Skeleton } from './elements/Skeleton.js';
+export { Spinner } from './elements/Spinner.js';
+export { Inline } from './elements/Inline.js';

package/dist/esm/styled/StyledDots.js

@@ -0,0 +1,52 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 styled, { css } from 'styled-components';
+import { dotOneKeyframes, dotTwoKeyframes, dotThreeKeyframes } from '../utils/animations.js';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const StyledDotsCircle = styled.circle.attrs({
+  cy: 36,
+  r: 9
+}).withConfig({
+  displayName: "StyledDots__StyledDotsCircle",
+  componentId: "sc-1ltah7e-0"
+})([""]);
+StyledDotsCircle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const animationStyles = (animationName, props) => {
+  return css(["animation:", " ", "ms linear infinite;"], animationName, props.duration);
+};
+const StyledDotsCircleOne = styled(StyledDotsCircle).attrs({
+  cx: 9
+}).withConfig({
+  displayName: "StyledDots__StyledDotsCircleOne",
+  componentId: "sc-1ltah7e-1"
+})(["", ";"], props => animationStyles(dotOneKeyframes, props));
+StyledDotsCircleOne.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const StyledDotsCircleTwo = styled(StyledDotsCircle).attrs(() => ({
+  cx: 40
+})).withConfig({
+  displayName: "StyledDots__StyledDotsCircleTwo",
+  componentId: "sc-1ltah7e-2"
+})(["", ";"], props => animationStyles(dotTwoKeyframes, props));
+StyledDotsCircleTwo.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const StyledDotsCircleThree = styled(StyledDotsCircle).attrs(() => ({
+  cx: 71
+})).withConfig({
+  displayName: "StyledDots__StyledDotsCircleThree",
+  componentId: "sc-1ltah7e-3"
+})(["", ";"], props => animationStyles(dotThreeKeyframes, props));
+StyledDotsCircleThree.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDotsCircleOne, StyledDotsCircleThree, StyledDotsCircleTwo };

package/dist/esm/styled/StyledInline.js

@@ -0,0 +1,42 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 styled, { keyframes } from 'styled-components';
+import { DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'loaders.inline';
+const retrieveAnimation = _ref => {
+  let {
+    theme
+  } = _ref;
+  return keyframes(["0%,100%{opacity:", ";}50%{opacity:", ";}"], theme.opacity[200], theme.opacity[600]);
+};
+const StyledCircle = styled.circle.attrs({
+  fill: 'currentColor',
+  cy: 2,
+  r: 2
+}).withConfig({
+  displayName: "StyledInline__StyledCircle",
+  componentId: "sc-fxsb9l-0"
+})([""]);
+StyledCircle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const StyledInline = styled.svg.attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20',
+  viewBox: '0 0 16 4',
+  width: props.size,
+  height: props.size * 0.25
+})).withConfig({
+  displayName: "StyledInline",
+  componentId: "sc-fxsb9l-1"
+})(["color:", ";", "{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:", ";}}", ""], props => props.color, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledInline.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCircle, StyledInline };

package/dist/esm/styled/StyledLoadingPlaceholder.js

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'loaders.loading_placeholder';
+const StyledLoadingPlaceholder = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20',
+  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));
+StyledLoadingPlaceholder.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLoadingPlaceholder };

package/dist/esm/styled/StyledProgress.js

@@ -0,0 +1,69 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const sizeToHeight = (size, theme) => {
+  switch (size) {
+    case 'small':
+      return theme.space.base / 2;
+    case 'medium':
+      return theme.space.base * 1.5;
+    default:
+      return theme.space.base * 3;
+  }
+};
+const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
+const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
+const colorStyles = _ref => {
+  let {
+    theme,
+    color
+  } = _ref;
+  const backgroundColor = getColor({
+    theme,
+    hue: 'neutralHue',
+    transparency: theme.opacity[200],
+    light: {
+      shade: 700
+    },
+    dark: {
+      shade: 500
+    }
+  });
+  const foregroundColor = color || getColor({
+    theme,
+    variable: 'border.successEmphasis'
+  });
+  return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
+};
+const StyledProgressBackground = styled.div.attrs(props => ({
+  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20',
+  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
+})).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));
+StyledProgressBackground.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
+const StyledProgressIndicator = styled.div.attrs(props => ({
+  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20',
+  height: props.height || sizeToHeight(props.size, props.theme),
+  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
+})).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));
+StyledProgressIndicator.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledProgressBackground, StyledProgressIndicator };

package/dist/esm/styled/StyledSVG.js

@@ -0,0 +1,26 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const StyledSVG = styled.svg.attrs(props => ({
+  'data-garden-version': '9.0.0-next.20',
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: props.width,
+  height: props.height,
+  focusable: 'false',
+  viewBox: `0 0 ${props.width} ${props.height}`,
+  role: 'img'
+})).withConfig({
+  displayName: "StyledSVG",
+  componentId: "sc-1xtc3kx-0"
+})(["width:", ";height:", ";color:", ";font-size:", ";", ";"], props => props.containerWidth || '1em', props => props.containerHeight || '0.9em', props => props.color || 'inherit', props => props.fontSize || 'inherit', props => retrieveComponentStyles(props.dataGardenId, props));
+StyledSVG.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSVG };

package/dist/esm/styled/StyledSkeleton.js

@@ -0,0 +1,64 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 styled, { keyframes, css } from 'styled-components';
+import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'loaders.skeleton';
+const fadeInAnimation = keyframes(["0%,60%{opacity:0;}100%{opacity:1;}"]);
+const skeletonAnimation = keyframes(["0%{transform:translateX(-100%);}100%{transform:translateX(100%);}"]);
+const skeletonRtlAnimation = keyframes(["0%{transform:translateX(100%);}100%{transform:translateX(-100%)}"]);
+const getBackgroundColor = _ref => {
+  let {
+    theme,
+    $isLight
+  } = _ref;
+  let backgroundColor;
+  if ($isLight) {
+    backgroundColor = getColor({
+      theme,
+      hue: 'white',
+      transparency: theme.opacity[200]
+    });
+  } else {
+    backgroundColor = getColor({
+      theme,
+      hue: 'neutralHue',
+      transparency: theme.opacity[200],
+      light: {
+        shade: 700
+      },
+      dark: {
+        shade: 500
+      }
+    });
+  }
+  return backgroundColor;
+};
+const animationStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  if (theme.rtl) {
+    return css(["animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonRtlAnimation);
+  }
+  return css(["animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonAnimation);
+};
+const gradientStyles = props => {
+  return css(["background-image:linear-gradient( ", ",transparent,", ",transparent );"], props.theme.rtl ? '-45deg' : '45deg', getBackgroundColor);
+};
+const StyledSkeleton = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).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));
+StyledSkeleton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSkeleton };

package/dist/esm/styled/StyledSpinnerCircle.js

@@ -0,0 +1,28 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 styled from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const StyledSpinnerCircle = styled.circle.attrs(props => ({
+  cx: 40,
+  cy: 40,
+  r: 34,
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeLinecap: 'round',
+  strokeWidth: props.strokeWidthValue,
+  strokeDasharray: `${props.dasharrayValue} 250`,
+  transform: props.transform
+})).withConfig({
+  displayName: "StyledSpinnerCircle",
+  componentId: "sc-o4kd70-0"
+})([""]);
+StyledSpinnerCircle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSpinnerCircle };

package/dist/esm/types/index.js

@@ -0,0 +1,9 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const SIZE = ['small', 'medium', 'large'];
+
+export { SIZE };