@zendeskgarden/react-loaders 8.57.1 → 8.58.0

package/dist/index.esm.js

@@ -16,119 +16,22 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var dotOneKeyframes = keyframes(["0%{transform:translate(0,5px);}3%{transform:translate(1px,-5px);}6%{transform:translate(3px,-15px);}8%{transform:translate(5px,-18px);}9%{transform:translate(7px,-21px);}11%{transform:translate(8px,-22px);}13%{transform:translate(9px,-23px);}16%{transform:translate(12px,-25px);}18%{transform:translate(13px,-26px);}23%{transform:translate(18px,-26px);}24%{transform:translate(19px,-25px);}28%{transform:translate(22px,-23px);}31%{transform:translate(24px,-21px);}33%{transform:translate(26px,-18px);}34%{transform:translate(28px,-14px);}36%{transform:translate(29px,-12px);}38%{transform:translate(30px,-5px);}39%{transform:translate(31px,5px);}54%{transform:translate(31px,3px);}59%{transform:translate(33px);}61%{transform:translate(43px);}63%{transform:translate(48px);}64%{transform:translate(51px);}66%{transform:translate(53px);}68%{transform:translate(55px);}69%{transform:translate(57px);}76%{transform:translate(60px);}81%{transform:translate(61px);}83%,100%{transform:translate(62px);}"]);
-var dotTwoKeyframes = keyframes(["4%{transform:translate(0);}6%{transform:translate(-1px);}8%{transform:translate(-2px);}9%{transform:translate(-5px);}11%{transform:translate(-7px);}13%{transform:translate(-12px);}14%{transform:translate(-17px);}16%{transform:translate(-19px);}18%{transform:translate(-22px);}19%{transform:translate(-25px);}21%{transform:translate(-26px);}23%{transform:translate(-27px);}24%{transform:translate(-28px);}26%{transform:translate(-29px);}29%{transform:translate(-30px);}33%,89%{transform:translate(-31px);}91%{transform:translate(-31px,1px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,3px);}99%{transform:translate(-31px,4px);}100%{transform:translate(-31px,5px);}"]);
-var dotThreeKeyframes = keyframes(["39%{transform:translate(0);}44%{transform:translate(0,1px);}46%{transform:translate(0,2px);}48%{transform:translate(0,3px);}49%{transform:translate(0,4px);}51%{transform:translate(0,5px);}53%{transform:translate(-1px,-6px);}54%{transform:translate(-2px,-13px);}56%{transform:translate(-3px,-15px);}58%{transform:translate(-5px,-19px);}59%{transform:translate(-7px,-21px);}61%{transform:translate(-8px,-22px);}63%{transform:translate(-9px,-24px);}64%{transform:translate(-11px,-25px);}66%{transform:translate(-12px,-26px);}74%{transform:translate(-19px,-26px);}76%{transform:translate(-20px,-25px);}78%{transform:translate(-22px,-24px);}81%{transform:translate(-24px,-21px);}83%{transform:translate(-26px,-19px);}84%{transform:translate(-28px,-15px);}86%{transform:translate(-29px,-13px);}88%{transform:translate(-30px,-6px);}89%{transform:translate(-31px,5px);}91%{transform:translate(-31px,4px);}93%{transform:translate(-31px,3px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,1px);}100%{transform:translate(-31px);}"]);
+const dotOneKeyframes = keyframes(["0%{transform:translate(0,5px);}3%{transform:translate(1px,-5px);}6%{transform:translate(3px,-15px);}8%{transform:translate(5px,-18px);}9%{transform:translate(7px,-21px);}11%{transform:translate(8px,-22px);}13%{transform:translate(9px,-23px);}16%{transform:translate(12px,-25px);}18%{transform:translate(13px,-26px);}23%{transform:translate(18px,-26px);}24%{transform:translate(19px,-25px);}28%{transform:translate(22px,-23px);}31%{transform:translate(24px,-21px);}33%{transform:translate(26px,-18px);}34%{transform:translate(28px,-14px);}36%{transform:translate(29px,-12px);}38%{transform:translate(30px,-5px);}39%{transform:translate(31px,5px);}54%{transform:translate(31px,3px);}59%{transform:translate(33px);}61%{transform:translate(43px);}63%{transform:translate(48px);}64%{transform:translate(51px);}66%{transform:translate(53px);}68%{transform:translate(55px);}69%{transform:translate(57px);}76%{transform:translate(60px);}81%{transform:translate(61px);}83%,100%{transform:translate(62px);}"]);
+const dotTwoKeyframes = keyframes(["4%{transform:translate(0);}6%{transform:translate(-1px);}8%{transform:translate(-2px);}9%{transform:translate(-5px);}11%{transform:translate(-7px);}13%{transform:translate(-12px);}14%{transform:translate(-17px);}16%{transform:translate(-19px);}18%{transform:translate(-22px);}19%{transform:translate(-25px);}21%{transform:translate(-26px);}23%{transform:translate(-27px);}24%{transform:translate(-28px);}26%{transform:translate(-29px);}29%{transform:translate(-30px);}33%,89%{transform:translate(-31px);}91%{transform:translate(-31px,1px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,3px);}99%{transform:translate(-31px,4px);}100%{transform:translate(-31px,5px);}"]);
+const dotThreeKeyframes = keyframes(["39%{transform:translate(0);}44%{transform:translate(0,1px);}46%{transform:translate(0,2px);}48%{transform:translate(0,3px);}49%{transform:translate(0,4px);}51%{transform:translate(0,5px);}53%{transform:translate(-1px,-6px);}54%{transform:translate(-2px,-13px);}56%{transform:translate(-3px,-15px);}58%{transform:translate(-5px,-19px);}59%{transform:translate(-7px,-21px);}61%{transform:translate(-8px,-22px);}63%{transform:translate(-9px,-24px);}64%{transform:translate(-11px,-25px);}66%{transform:translate(-12px,-26px);}74%{transform:translate(-19px,-26px);}76%{transform:translate(-20px,-25px);}78%{transform:translate(-22px,-24px);}81%{transform:translate(-24px,-21px);}83%{transform:translate(-26px,-19px);}84%{transform:translate(-28px,-15px);}86%{transform:translate(-29px,-13px);}88%{transform:translate(-30px,-6px);}89%{transform:translate(-31px,5px);}91%{transform:translate(-31px,4px);}93%{transform:translate(-31px,3px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,1px);}100%{transform:translate(-31px);}"]);
 
-var StyledDotsCircle = styled.circle.attrs({
+const StyledDotsCircle = styled.circle.attrs({
   cy: 36,
   r: 9
 }).withConfig({
@@ -138,69 +41,63 @@ var StyledDotsCircle = styled.circle.attrs({
 StyledDotsCircle.defaultProps = {
   theme: DEFAULT_THEME
 };
-var StyledDotsCircleOne = styled(StyledDotsCircle).attrs({
+const StyledDotsCircleOne = styled(StyledDotsCircle).attrs({
   cx: 9
 }).withConfig({
   displayName: "StyledDots__StyledDotsCircleOne",
   componentId: "sc-1ltah7e-1"
-})(["animation:", ";"], function (_ref) {
-  var duration = _ref.duration;
+})(["animation:", ";"], _ref => {
+  let {
+    duration
+  } = _ref;
   return css(["", " ", "ms linear infinite"], dotOneKeyframes, duration);
 });
 StyledDotsCircleOne.defaultProps = {
   theme: DEFAULT_THEME
 };
-var StyledDotsCircleTwo = styled(StyledDotsCircle).attrs(function () {
-  return {
-    cx: 40
-  };
-}).withConfig({
+const StyledDotsCircleTwo = styled(StyledDotsCircle).attrs(() => ({
+  cx: 40
+})).withConfig({
   displayName: "StyledDots__StyledDotsCircleTwo",
   componentId: "sc-1ltah7e-2"
-})(["animation:", ";"], function (_ref2) {
-  var duration = _ref2.duration;
+})(["animation:", ";"], _ref2 => {
+  let {
+    duration
+  } = _ref2;
   return css(["", " ", "ms linear infinite"], dotTwoKeyframes, duration);
 });
 StyledDotsCircleTwo.defaultProps = {
   theme: DEFAULT_THEME
 };
-var StyledDotsCircleThree = styled(StyledDotsCircle).attrs(function () {
-  return {
-    cx: 71
-  };
-}).withConfig({
+const StyledDotsCircleThree = styled(StyledDotsCircle).attrs(() => ({
+  cx: 71
+})).withConfig({
   displayName: "StyledDots__StyledDotsCircleThree",
   componentId: "sc-1ltah7e-3"
-})(["animation:", ";"], function (_ref3) {
-  var duration = _ref3.duration;
+})(["animation:", ";"], _ref3 => {
+  let {
+    duration
+  } = _ref3;
   return css(["", " ", "ms linear infinite"], dotThreeKeyframes, duration);
 });
 StyledDotsCircleThree.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'loaders.loading_placeholder';
-var StyledLoadingPlaceholder = styled.div.attrs({
+const COMPONENT_ID$5 = 'loaders.loading_placeholder';
+const StyledLoadingPlaceholder = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.58.0',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
   componentId: "sc-x3bwsx-0"
-})(["display:inline-block;width:", ";height:", ";font-size:", ";", ""], function (props) {
-  return props.width || '1em';
-}, function (props) {
-  return props.height || '0.9em';
-}, function (props) {
-  return props.fontSize;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["display:inline-block;width:", ";height:", ";font-size:", ";", ""], props => props.width || '1em', props => props.height || '0.9em', props => props.fontSize, props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledLoadingPlaceholder.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var sizeToHeight = function sizeToHeight(size, theme) {
+const sizeToHeight = (size, theme) => {
   switch (size) {
     case 'small':
       return theme.space.base / 2;
@@ -210,115 +107,85 @@ var sizeToHeight = function sizeToHeight(size, theme) {
       return theme.space.base * 3;
   }
 };
-var sizeToBorderRadius = function sizeToBorderRadius(size, theme) {
-  return sizeToHeight(size, theme) / 2;
-};
-var PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
-var StyledProgressBackground = styled.div.attrs(function (props) {
-  return {
-    'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-    'data-garden-version': '8.57.1',
-    borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
-  };
-}).withConfig({
+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.58.0',
+  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
+})).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
   componentId: "sc-2g8w4s-0"
-})(["margin:", "px 0;border-radius:", "px;background-color:", ";color:", ";", ""], function (props) {
-  return props.theme.space.base * 2;
-}, function (props) {
-  return props.borderRadius;
-}, function (props) {
-  return getColor('neutralHue', 200, props.theme);
-}, function (props) {
-  return props.color || getColor('successHue', 600, props.theme);
-}, function (props) {
-  return retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props);
-});
+})(["margin:", "px 0;border-radius:", "px;background-color:", ";color:", ";", ""], props => props.theme.space.base * 2, props => props.borderRadius, props => getColor('neutralHue', 200, props.theme), props => props.color || getColor('successHue', 600, props.theme), props => retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props));
 StyledProgressBackground.defaultProps = {
   theme: DEFAULT_THEME
 };
-var PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
-var StyledProgressIndicator = styled.div.attrs(function (props) {
-  return {
-    'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-    'data-garden-version': '8.57.1',
-    height: props.height || sizeToHeight(props.size, props.theme),
-    borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
-  };
-}).withConfig({
+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.58.0',
+  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;", ""], function (props) {
-  return props.borderRadius;
-}, function (props) {
-  return props.value;
-}, function (props) {
-  return props.height;
-}, function (props) {
-  return retrieveComponentStyles(PROGESS_INDICATOR_COMPONENT_ID, props);
-});
+})(["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
 };
 
-var COMPONENT_ID$4 = 'loaders.skeleton';
-var fadeInAnimation = keyframes(["0%,60%{opacity:0;}100%{opacity:1;}"]);
-var skeletonAnimation = keyframes(["100%{left:100%;}"]);
-var skeletonRtlAnimation = keyframes(["100%{right:100%;}"]);
-var retrieveSkeletonBackgroundColor = function retrieveSkeletonBackgroundColor(_ref) {
-  var theme = _ref.theme,
-      isLight = _ref.isLight;
+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 retrieveSkeletonBackgroundColor = _ref => {
+  let {
+    theme,
+    isLight
+  } = _ref;
   if (isLight) {
     return css(["background-color:", ";"], rgba(theme.colors.background, 0.2));
   }
   return css(["background-color:", ";"], getColor('neutralHue', 800, theme, 0.1));
 };
-var retrieveSkeletonAnimation = function retrieveSkeletonAnimation(_ref2) {
-  var theme = _ref2.theme;
+const retrieveSkeletonAnimation = _ref2 => {
+  let {
+    theme
+  } = _ref2;
   if (theme.rtl) {
     return css(["right:-1800px;animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonRtlAnimation);
   }
   return css(["left:-1800px;animation:", " 1.5s ease-in-out 300ms infinite;"], skeletonAnimation);
 };
-var retrieveSkeletonGradient = function retrieveSkeletonGradient(_ref3) {
-  var theme = _ref3.theme,
-      isLight = _ref3.isLight;
+const retrieveSkeletonGradient = _ref3 => {
+  let {
+    theme,
+    isLight
+  } = _ref3;
   return css(["background-image:linear-gradient( ", ",transparent,", ",transparent );"], theme.rtl ? '-45deg' : '45deg', isLight ? getColor('chromeHue', 700, theme, 0.4) : rgba(theme.colors.background, 0.6));
 };
-var StyledSkeleton = styled.div.attrs({
+const StyledSkeleton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
-})(["display:inline-block;position:relative;animation:", " 750ms linear;border-radius:", ";width:", ";height:", ";overflow:hidden;line-height:", ";", " &::before{position:absolute;top:0;width:1000px;height:100%;content:'';", " ", "}", ";"], fadeInAnimation, function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return props.customWidth;
-}, function (props) {
-  return props.customHeight;
-}, function (props) {
-  return getLineHeight(props.theme.fontSizes.sm, props.theme.space.base * 5);
-}, retrieveSkeletonBackgroundColor, retrieveSkeletonAnimation, retrieveSkeletonGradient, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["display:inline-block;position:relative;animation:", " 750ms linear;border-radius:", ";width:", ";height:", ";overflow:hidden;line-height:", ";", " &::before{position:absolute;top:0;width:1000px;height:100%;content:'';", " ", "}", ";"], fadeInAnimation, props => props.theme.borderRadii.md, props => props.customWidth, props => props.customHeight, props => getLineHeight(props.theme.fontSizes.sm, props.theme.space.base * 5), retrieveSkeletonBackgroundColor, retrieveSkeletonAnimation, retrieveSkeletonGradient, props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledSkeleton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var StyledSpinnerCircle = styled.circle.attrs(function (props) {
-  return {
-    cx: 40,
-    cy: 40,
-    r: 34,
-    fill: 'none',
-    stroke: 'currentColor',
-    strokeLinecap: 'round',
-    strokeWidth: props.strokeWidthValue,
-    strokeDasharray: "".concat(props.dasharrayValue, " 250"),
-    transform: props.transform
-  };
-}).withConfig({
+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"
 })([""]);
@@ -326,37 +193,25 @@ StyledSpinnerCircle.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var StyledSVG = styled.svg.attrs(function (props) {
-  return {
-    'data-garden-version': '8.57.1',
-    xmlns: 'http://www.w3.org/2000/svg',
-    width: props.width,
-    height: props.height,
-    focusable: 'false',
-    viewBox: "0 0 ".concat(props.width, " ").concat(props.height),
-    role: 'progressbar'
-  };
-}).withConfig({
+const StyledSVG = styled.svg.attrs(props => ({
+  'data-garden-version': '8.58.0',
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: props.width,
+  height: props.height,
+  focusable: 'false',
+  viewBox: `0 0 ${props.width} ${props.height}`,
+  role: 'progressbar'
+})).withConfig({
   displayName: "StyledSVG",
   componentId: "sc-1xtc3kx-0"
-})(["width:", ";height:", ";color:", ";font-size:", ";", ";"], function (props) {
-  return props.containerWidth || '1em';
-}, function (props) {
-  return props.containerHeight || '0.9em';
-}, function (props) {
-  return props.color || 'inherit';
-}, function (props) {
-  return props.fontSize || 'inherit';
-}, function (props) {
-  return retrieveComponentStyles(props.dataGardenId, props);
-});
+})(["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
 };
 
-var COMPONENT_ID$3 = 'loaders.inline';
-var PULSE_ANIMATION = keyframes(["0%,100%{opacity:.2;}50%{opacity:.8;}"]);
-var StyledCircle = styled.circle.attrs({
+const COMPONENT_ID$3 = 'loaders.inline';
+const PULSE_ANIMATION = keyframes(["0%,100%{opacity:.2;}50%{opacity:.8;}"]);
+const StyledCircle = styled.circle.attrs({
   fill: 'currentColor',
   cy: 2,
   r: 2
@@ -367,57 +222,49 @@ var StyledCircle = styled.circle.attrs({
 StyledCircle.defaultProps = {
   theme: DEFAULT_THEME
 };
-var StyledInline = styled.svg.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.57.1',
-    viewBox: '0 0 16 4',
-    width: props.size,
-    height: props.size * 0.25
-  };
-}).withConfig({
+const StyledInline = styled.svg.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.58.0',
+  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:", ";}}", ""], function (props) {
-  return props.color;
-}, StyledCircle, PULSE_ANIMATION, function (props) {
-  return props.theme.rtl ? 'unset' : '0.4s';
-}, PULSE_ANIMATION, PULSE_ANIMATION, function (props) {
-  return props.theme.rtl ? '0.4s' : 'unset';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["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, PULSE_ANIMATION, props => props.theme.rtl ? 'unset' : '0.4s', PULSE_ANIMATION, PULSE_ANIMATION, props => props.theme.rtl ? '0.4s' : 'unset', props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledInline.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _excluded$4 = ["size", "color", "duration", "delayMS"];
-var COMPONENT_ID$2 = 'loaders.dots';
-var Dots = forwardRef(function (_ref, ref) {
-  var size = _ref.size,
-      color = _ref.color,
-      duration = _ref.duration,
-      delayMS = _ref.delayMS,
-      other = _objectWithoutProperties(_ref, _excluded$4);
-  var theme = useContext(ThemeContext);
-  var environment = useDocument(theme);
-  var canTransformSVG = useRef(null);
+const COMPONENT_ID$2 = '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) {
-    var svg = environment.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const svg = environment.createElementNS('http://www.w3.org/2000/svg', 'svg');
     canTransformSVG.current = 'transform' in svg;
   }
-  var _useSchedule = useSchedule({
-    duration: duration,
-    delayMS: delayMS,
+  const {
+    delayComplete
+  } = useSchedule({
+    duration,
+    delayMS,
     loop: true
-  }),
-      delayComplete = _useSchedule.delayComplete;
-  var dotOne = useRef(null);
-  var dotTwo = useRef(null);
-  var dotThree = useRef(null);
-  useEffect(function () {
+  });
+  const dotOne = useRef(null);
+  const dotTwo = useRef(null);
+  const dotThree = useRef(null);
+  useEffect(() => {
     if (!canTransformSVG.current && delayComplete) {
-      var transforms = [window.getComputedStyle(dotOne.current).getPropertyValue('transform'), window.getComputedStyle(dotTwo.current).getPropertyValue('transform'), window.getComputedStyle(dotThree.current).getPropertyValue('transform')];
+      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]);
@@ -462,24 +309,30 @@ Dots.defaultProps = {
   delayMS: 750
 };
 
-var SIZE = ['small', 'medium', 'large'];
-
-var _excluded$3 = ["value", "size"];
-var COMPONENT_ID$1 = 'loaders.progress';
-var Progress = React.forwardRef(function (_ref, ref) {
-  var value = _ref.value,
-      size = _ref.size,
-      other = _objectWithoutProperties(_ref, _excluded$3);
-  var percentage = Math.max(0, Math.min(100, value));
+const SIZE = ['small', 'medium', 'large'];
+
+const COMPONENT_ID$1 = '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, _extends({
     "data-garden-id": COMPONENT_ID$1,
-    "data-garden-version": '8.57.1',
+    "data-garden-version": '8.58.0',
     "aria-valuemax": 100,
     "aria-valuemin": 0,
     "aria-valuenow": percentage,
     role: "progressbar",
     size: size,
-    ref: ref
+    ref: ref,
+    "aria-label": ariaLabel
   }, other), React.createElement(StyledProgressIndicator, {
     value: percentage,
     size: size
@@ -496,12 +349,13 @@ Progress.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$2 = ["width", "height", "isLight"];
-var Skeleton = forwardRef(function (_ref, ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      isLight = _ref.isLight,
-      other = _objectWithoutProperties(_ref, _excluded$2);
+const Skeleton = forwardRef((_ref, ref) => {
+  let {
+    width,
+    height,
+    isLight,
+    ...other
+  } = _ref;
   return React.createElement(StyledSkeleton, _extends({
     ref: ref,
     isLight: isLight,
@@ -520,7 +374,7 @@ Skeleton.defaultProps = {
   height: '100%'
 };
 
-var STROKE_WIDTH_FRAMES = {
+const STROKE_WIDTH_FRAMES = {
   0: 6,
   14: 5,
   26: 4,
@@ -531,7 +385,7 @@ var STROKE_WIDTH_FRAMES = {
   80: 5,
   91: 6
 };
-var ROTATION_FRAMES = {
+const ROTATION_FRAMES = {
   0: -90,
   8: -81,
   36: -30,
@@ -558,7 +412,7 @@ var ROTATION_FRAMES = {
   90: 243,
   99: 270
 };
-var DASHARRAY_FRAMES = {
+const DASHARRAY_FRAMES = {
   0: 0,
   13: 2,
   26: 13,
@@ -584,24 +438,18 @@ var DASHARRAY_FRAMES = {
   99: 0
 };
 
-var _excluded$1 = ["size", "duration", "color", "delayMS"];
-var COMPONENT_ID = 'loaders.spinner';
-var TOTAL_FRAMES = 100;
-var computeFrames = function computeFrames(frames, duration) {
-  return Object.entries(frames).reduce(function (acc, item, index, arr) {
-    var _item = _slicedToArray(item, 2),
-        frame = _item[0],
-        value = _item[1];
-    var _ref = arr[index + 1] || [TOTAL_FRAMES, arr[0][1]],
-        _ref2 = _slicedToArray(_ref, 2),
-        nextFrame = _ref2[0],
-        nextValue = _ref2[1];
-    var diff = parseInt(nextFrame, 10) - parseInt(frame, 10);
-    var frameHz = 1000 / 60;
-    var subDuration = duration / (TOTAL_FRAMES - 1) * diff;
-    var lastValue = value;
+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 (var idx = 0; idx < diff; idx++) {
+    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;
@@ -610,27 +458,30 @@ var computeFrames = function computeFrames(frames, duration) {
     return acc;
   }, {});
 };
-var Spinner = forwardRef(function (_ref3, ref) {
-  var size = _ref3.size,
-      duration = _ref3.duration,
-      color = _ref3.color,
-      delayMS = _ref3.delayMS,
-      other = _objectWithoutProperties(_ref3, _excluded$1);
-  var strokeWidthValues = computeFrames(STROKE_WIDTH_FRAMES, duration);
-  var rotationValues = computeFrames(ROTATION_FRAMES, duration);
-  var dasharrayValues = computeFrames(DASHARRAY_FRAMES, duration);
-  var _useSchedule = useSchedule({
-    duration: duration,
-    delayMS: delayMS
-  }),
-      elapsed = _useSchedule.elapsed,
-      delayComplete = _useSchedule.delayComplete;
-  var frame = (elapsed * 100).toFixed(0);
-  var strokeWidthValue = strokeWidthValues[frame];
-  var rotationValue = rotationValues[frame];
-  var dasharrayValue = dasharrayValues[frame];
-  var WIDTH = 80;
-  var HEIGHT = 80;
+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",
@@ -650,7 +501,7 @@ var Spinner = forwardRef(function (_ref3, ref) {
   }, other), React.createElement(StyledSpinnerCircle, {
     dasharrayValue: dasharrayValue,
     strokeWidthValue: strokeWidthValue,
-    transform: "rotate(".concat(rotationValue, ", ").concat(WIDTH / 2, ", ").concat(HEIGHT / 2, ")")
+    transform: `rotate(${rotationValue}, ${WIDTH / 2}, ${HEIGHT / 2})`
   }));
 });
 Spinner.displayName = 'Spinner';
@@ -667,12 +518,13 @@ Spinner.defaultProps = {
   delayMS: 750
 };
 
-var _excluded = ["size", "color"];
-var Inline = forwardRef(function (_ref, ref) {
-  var size = _ref.size,
-      color = _ref.color,
-      other = _objectWithoutProperties(_ref, _excluded);
-  var ariaLabel = useText(Inline, other, 'aria-label', 'loading');
+const Inline = forwardRef((_ref, ref) => {
+  let {
+    size,
+    color,
+    ...other
+  } = _ref;
+  const ariaLabel = useText(Inline, other, 'aria-label', 'loading');
   return React.createElement(StyledInline, _extends({
     ref: ref,
     size: size,