@zendeskgarden/react-accordions 8.57.0 → 8.58.0

package/dist/index.esm.js

@@ -16,299 +16,114 @@ import debounce from 'lodash.debounce';
 import mergeRefs from 'react-merge-refs';
 import PropTypes from 'prop-types';
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends$3() {
   _extends$3 = 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$3.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 COMPONENT_ID$k = 'accordions.step_content';
-var sizeStyles$1 = function sizeStyles(props) {
-  var _props$theme = props.theme,
-      rtl = _props$theme.rtl,
-      space = _props$theme.space;
-  var paddingBottom = props.isActive ? space.base * 8 : space.base * 6;
-  var paddingRight = rtl ? space.base * 6 : space.base * 5;
-  var paddingLeft = rtl ? space.base * 5 : space.base * 6;
-  var marginRight = rtl ? space.base * 3 : '0';
-  var marginLeft = rtl ? '0' : space.base * 3;
-  var marginVertical = space.base * 3;
+const COMPONENT_ID$k = 'accordions.step_content';
+const sizeStyles$1 = props => {
+  const {
+    rtl,
+    space
+  } = props.theme;
+  const paddingBottom = props.isActive ? space.base * 8 : space.base * 6;
+  const paddingRight = rtl ? space.base * 6 : space.base * 5;
+  const paddingLeft = rtl ? space.base * 5 : space.base * 6;
+  const marginRight = rtl ? space.base * 3 : '0';
+  const marginLeft = rtl ? '0' : space.base * 3;
+  const marginVertical = space.base * 3;
   return css(["margin:", "px ", "px ", "px ", "px;padding:0 ", "px ", "px ", "px;"], marginVertical, marginRight, marginVertical, marginLeft, paddingRight, paddingBottom, paddingLeft);
 };
-var StyledContent = styled.div.attrs({
+const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
-})(["", " min-width:", "px;word-break:break-word;", ";"], sizeStyles$1, function (props) {
-  return props.theme.space.base * 30;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$k, props);
-});
+})(["", " min-width:", "px;word-break:break-word;", ";"], sizeStyles$1, props => props.theme.space.base * 30, props => retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledContent.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$j = 'accordions.step_line';
-var StyledLine = styled.div.attrs({
+const COMPONENT_ID$j = 'accordions.step_line';
+const StyledLine = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
-})(["display:block;position:absolute;top:", "px;right:", ";left:", ";flex:1;border-top:", ";border-color:", ";"], function (props) {
-  return props.theme.space.base * 3;
-}, function (props) {
-  return "calc(50% + ".concat(props.theme.space.base * 6, "px)");
-}, function (props) {
-  return "calc(-50% + ".concat(props.theme.space.base * 6, "px)");
-}, function (props) {
-  return props.theme.borders.sm;
-}, function (props) {
-  return getColor('neutralHue', 300, props.theme);
-});
+})(["display:block;position:absolute;top:", "px;right:", ";left:", ";flex:1;border-top:", ";border-color:", ";"], props => props.theme.space.base * 3, props => `calc(50% + ${props.theme.space.base * 6}px)`, props => `calc(-50% + ${props.theme.space.base * 6}px)`, props => props.theme.borders.sm, props => getColor('neutralHue', 300, props.theme));
 StyledLine.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$i = 'accordions.step';
-var StyledStep = styled.li.attrs({
+const COMPONENT_ID$i = 'accordions.step';
+const StyledStep = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
-})(["position:", ";flex:", ";min-width:", ";&:last-of-type ", "{display:", ";}&:first-of-type ", "{display:", ";}&:not(:last-of-type) ", "{border-", ":", ";border-color:", ";}", ";"], function (props) {
-  return props.isHorizontal && 'relative';
-}, function (props) {
-  return props.isHorizontal && '1';
-}, function (props) {
-  return props.isHorizontal && "".concat(props.theme.space.base * 15, "px");
-}, StyledLine, function (props) {
-  return props.theme.rtl && 'none';
-}, StyledLine, function (props) {
-  return !props.theme.rtl && 'none';
-}, StyledContent, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.borders.sm;
-}, function (props) {
-  return getColor('neutralHue', 300, props.theme);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$i, props);
-});
+})(["position:", ";flex:", ";min-width:", ";&:last-of-type ", "{display:", ";}&:first-of-type ", "{display:", ";}&:not(:last-of-type) ", "{border-", ":", ";border-color:", ";}", ";"], props => props.isHorizontal && 'relative', props => props.isHorizontal && '1', props => props.isHorizontal && `${props.theme.space.base * 15}px`, StyledLine, props => props.theme.rtl && 'none', StyledLine, props => !props.theme.rtl && 'none', StyledContent, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, props => getColor('neutralHue', 300, props.theme), props => retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledStep.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$h = 'accordions.step_inner_content';
-var StyledInnerContent = styled.div.attrs({
+const COMPONENT_ID$h = 'accordions.step_inner_content';
+const StyledInnerContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
-})(["transition:max-height 0.25s ease-in-out;overflow:hidden;max-height:", ";line-height:", ";color:", ";font-size:", ";", ";"], function (props) {
-  return !props.isActive && '0 !important';
-}, function (props) {
-  return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$h, props);
-});
+})(["transition:max-height 0.25s ease-in-out;overflow:hidden;max-height:", ";line-height:", ";color:", ";font-size:", ";", ";"], props => !props.isActive && '0 !important', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledInnerContent.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$g = 'accordions.stepper';
-var StyledStepper = styled.ol.attrs({
+const COMPONENT_ID$g = 'accordions.stepper';
+const StyledStepper = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
-})(["display:", ";margin:0;padding:0;list-style:none;", ";"], function (props) {
-  return props.isHorizontal && 'flex';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$g, props);
-});
+})(["display:", ";margin:0;padding:0;list-style:none;", ";"], props => props.isHorizontal && 'flex', props => retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledStepper.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$f = 'accordions.step_icon';
-var StyledIconFlexContainer = styled.div.withConfig({
+const COMPONENT_ID$f = 'accordions.step_icon';
+const StyledIconFlexContainer = styled.div.withConfig({
   displayName: "StyledIcon__StyledIconFlexContainer",
   componentId: "sc-v20nz9-0"
 })(["display:flex;flex-basis:100%;justify-content:center;width:100%;"]);
-var sizeStyles = function sizeStyles(props) {
-  var size = "".concat(props.theme.space.base * 6, "px");
-  var fontSize = props.theme.fontSizes.sm;
-  return css(["margin-bottom:", ";margin-", ":", ";width:", ";min-width:", ";height:", ";min-height:", ";line-height:", ";font-size:", ";"], props.isHorizontal && "".concat(props.theme.space.base * 2, "px"), props.theme.rtl ? 'left' : 'right', !props.isHorizontal && "".concat(props.theme.space.base * 3, "px"), size, size, size, size, getLineHeight(size, fontSize), fontSize);
+const sizeStyles = props => {
+  const size = `${props.theme.space.base * 6}px`;
+  const fontSize = props.theme.fontSizes.sm;
+  return css(["margin-bottom:", ";margin-", ":", ";width:", ";min-width:", ";height:", ";min-height:", ";line-height:", ";font-size:", ";"], props.isHorizontal && `${props.theme.space.base * 2}px`, props.theme.rtl ? 'left' : 'right', !props.isHorizontal && `${props.theme.space.base * 3}px`, size, size, size, size, getLineHeight(size, fontSize), fontSize);
 };
-var colorStyles$2 = function colorStyles(props) {
+const colorStyles$2 = props => {
   return css(["background:", ";color:", ";"], props.isActive ? getColor('neutralHue', 600, props.theme) : getColor('neutralHue', 200, props.theme), props.isActive ? props.theme.colors.background : props.theme.colors.foreground);
 };
-var StyledIcon = styled.div.attrs({
+const StyledIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"
-})(["display:flex;align-items:center;justify-content:center;transition:background 0.25s ease-in-out,color 0.25s ease-in-out;border-radius:100%;", " ", " ", ";"], sizeStyles, colorStyles$2, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$f, props);
-});
+})(["display:flex;align-items:center;justify-content:center;transition:background 0.25s ease-in-out,color 0.25s ease-in-out;border-radius:100%;", " ", " ", ";"], sizeStyles, colorStyles$2, props => retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledIconFlexContainer.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -316,72 +131,50 @@ StyledIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$e = 'accordions.step_label';
-var StyledLabel = styled.div.attrs({
+const COMPONENT_ID$e = 'accordions.step_label';
+const StyledLabel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
-})(["display:", ";align-items:", ";transition:color 0.25s ease-in-out,font-weight 0.25s ease-in-out;text-align:", ";line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], function (props) {
-  return !props.isHorizontal && 'flex';
-}, function (props) {
-  return !props.isHorizontal && 'center';
-}, function (props) {
-  return props.isHorizontal && 'center';
-}, function (props) {
-  return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.isActive ? props.theme.colors.foreground : getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return props.isActive && 600;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$e, props);
-});
+})(["display:", ";align-items:", ";transition:color 0.25s ease-in-out,font-weight 0.25s ease-in-out;text-align:", ";line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => !props.isHorizontal && 'flex', props => !props.isHorizontal && 'center', props => props.isHorizontal && 'center', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isActive ? props.theme.colors.foreground : getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isActive && 600, props => retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$d = 'accordions.step_label_text';
-var StyledLabelText = styled.div.attrs({
+const COMPONENT_ID$d = 'accordions.step_label_text';
+const StyledLabelText = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
-})(["display:", ";padding:", ";word-wrap:", ";"], function (props) {
-  return props.isHidden && 'none';
-}, function (props) {
-  return props.isHorizontal && "0 ".concat(props.theme.space.base * 3, "px");
-}, function (props) {
-  return props.isHorizontal && 'break-word';
-});
+})(["display:", ";padding:", ";word-wrap:", ";"], props => props.isHidden && 'none', props => props.isHorizontal && `0 ${props.theme.space.base * 3}px`, props => props.isHorizontal && 'break-word');
 StyledLabelText.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$c = 'accordions.accordion';
-var StyledAccordion = styled.div.attrs({
+const COMPONENT_ID$c = 'accordions.accordion';
+const StyledAccordion = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
-})(["", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$c, props);
-});
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledAccordion.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$b = 'accordions.panel';
-var paddingStyles = function paddingStyles(props) {
-  var base = props.theme.space.base;
-  var paddingTop = base * 2;
-  var paddingHorizontal = base * 5;
-  var paddingBottom = base * 8;
+const COMPONENT_ID$b = 'accordions.panel';
+const paddingStyles = props => {
+  const {
+    base
+  } = props.theme.space;
+  let paddingTop = base * 2;
+  let paddingHorizontal = base * 5;
+  let paddingBottom = base * 8;
   if (props.isCompact) {
     paddingTop = base * 2;
     paddingHorizontal = base * 3;
@@ -393,341 +186,254 @@ var paddingStyles = function paddingStyles(props) {
   }
   return css(["transition:", ";padding:", "px ", "px ", "px;"], props.isAnimated && 'padding 0.25s ease-in-out', paddingTop, paddingHorizontal, paddingBottom);
 };
-var StyledPanel = styled.section.attrs({
+const StyledPanel = styled.section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
-})(["", ";border-bottom:", ";", ";"], paddingStyles, function (props) {
-  return "".concat(props.theme.borders.sm, " ").concat(props.isBare ? 'transparent' : getColor('neutralHue', 300, props.theme));
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$b, props);
-});
+})(["", ";border-bottom:", ";", ";"], paddingStyles, props => `${props.theme.borders.sm} ${props.isBare ? 'transparent' : getColor('neutralHue', 300, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledPanel.defaultProps = {
   isAnimated: true,
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$a = 'accordions.section';
-var StyledSection = styled.div.attrs({
+const COMPONENT_ID$a = 'accordions.section';
+const StyledSection = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
-})(["&:last-child ", "{border:none;}", ";"], StyledPanel, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$a, props);
-});
+})(["&:last-child ", "{border:none;}", ";"], StyledPanel, props => retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledSection.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$9 = 'accordions.header';
-var StyledHeader = styled.div.attrs({
+const COMPONENT_ID$9 = 'accordions.header';
+const StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
-})(["display:flex;align-items:center;box-shadow:", ";font-size:", ";&:hover{cursor:", ";}", ";"], function (props) {
-  return props.isFocused && "".concat(props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35)), " inset");
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return (props.isCollapsible || !props.isExpanded) && 'pointer';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$9, props);
-});
+})(["display:flex;align-items:center;box-shadow:", ";font-size:", ";&:hover{cursor:", ";}", ";"], props => props.isFocused && `${props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35))} inset`, props => props.theme.fontSizes.md, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledHeader.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$8 = 'accordions.button';
-var colorStyles$1 = function colorStyles(props) {
-  var showColor = props.isCollapsible || !props.isExpanded;
-  var color = props.theme.colors.foreground;
+const COMPONENT_ID$8 = 'accordions.button';
+const colorStyles$1 = props => {
+  const showColor = props.isCollapsible || !props.isExpanded;
+  let color = props.theme.colors.foreground;
   if (showColor && props.isHovered) {
     color = getColor('primaryHue', 600, props.theme);
   }
   return css(["color:", ";&:hover{cursor:", ";color:", ";}"], color, showColor && 'pointer', showColor && color);
 };
-var StyledButton = styled.button.attrs({
+const StyledButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
-})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], function (props) {
-  return props.isCompact ? "".concat(props.theme.space.base * 2, "px ").concat(props.theme.space.base * 3, "px") : "".concat(props.theme.space.base * 5, "px");
-}, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, colorStyles$1, function (props) {
-  return (props.isCollapsible || !props.isExpanded) && 'pointer';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$8, props);
-});
+})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], props => props.isCompact ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.rtl ? 'right' : 'left', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$1, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$7 = 'accordions.step_inner_panel';
-var StyledInnerPanel = styled.div.attrs({
+const COMPONENT_ID$7 = 'accordions.step_inner_panel';
+const StyledInnerPanel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
-})(["transition:", ";max-height:", ";overflow:hidden;line-height:", ";font-size:", ";", ";"], function (props) {
-  return props.isAnimated && 'max-height 0.25s ease-in-out';
-}, function (props) {
-  return !props.isExpanded && '0 !important';
-}, function (props) {
-  return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$7, props);
-});
+})(["transition:", ";max-height:", ";overflow:hidden;line-height:", ";font-size:", ";", ";"], props => props.isAnimated && 'max-height 0.25s ease-in-out', props => !props.isExpanded && '0 !important', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledInnerPanel.defaultProps = {
   isAnimated: true,
   theme: DEFAULT_THEME
 };
 
-var _excluded$7 = ["children", "isRotated", "isHovered", "isCompact", "isCollapsible"];
-var COMPONENT_ID$6 = 'accordions.rotate_icon';
-var colorStyles = function colorStyles(props) {
-  var showColor = props.isCollapsible || !props.isRotated;
-  var color = getColor('neutralHue', 600, props.theme);
+const COMPONENT_ID$6 = 'accordions.rotate_icon';
+const colorStyles = props => {
+  const showColor = props.isCollapsible || !props.isRotated;
+  let color = getColor('neutralHue', 600, props.theme);
   if (showColor && props.isHovered) {
     color = getColor('primaryHue', 600, props.theme);
   }
   return css(["color:", ";&:hover{color:", ";}"], color, showColor && color);
 };
-var StyledRotateIcon = styled(
-function (_ref) {
-  var children = _ref.children;
-      _ref.isRotated;
-      _ref.isHovered;
-      _ref.isCompact;
-      _ref.isCollapsible;
-      var props = _objectWithoutProperties(_ref, _excluded$7);
+const StyledRotateIcon = styled(
+_ref => {
+  let {
+    children,
+    isRotated,
+    isHovered,
+    isCompact,
+    isCollapsible,
+    ...props
+  } = _ref;
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;box-sizing:content-box;padding:", ";width:", ";height:", ";vertical-align:middle;", " ", ";"], function (props) {
-  return props.isRotated && "rotate(".concat(props.theme.rtl ? '-' : '+', "180deg)");
-}, function (props) {
-  return props.isCompact ? "".concat(props.theme.space.base * 1.5, "px ").concat(props.theme.space.base * 3, "px") : "".concat(props.theme.space.base * 5, "px");
-}, function (props) {
-  return props.theme.iconSizes.md;
-}, function (props) {
-  return props.theme.iconSizes.md;
-}, colorStyles, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$6, props);
-});
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;box-sizing:content-box;padding:", ";width:", ";height:", ";vertical-align:middle;", " ", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => props.isCompact ? `${props.theme.space.base * 1.5}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, colorStyles, props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledRotateIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'timeline';
-var StyledTimeline = styled.ol.attrs({
+const COMPONENT_ID$5 = 'timeline';
+const StyledTimeline = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
-})(["margin:0;padding:0;list-style:none;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledTimeline.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'timeline.content.separator';
-var StyledSeparator = styled.div.attrs({
+const COMPONENT_ID$4 = 'timeline.content.separator';
+const StyledSeparator = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
-})(["display:flex;position:relative;justify-content:center;padding:", ";&::after{position:absolute;border-left:", ";height:100%;content:'';}", ";"], function (props) {
-  return "".concat(props.theme.space.base * 5, "px ").concat(props.theme.space.base, "px");
-}, function (props) {
-  return "".concat(props.theme.borders.sm, " ").concat(getColor('neutralHue', 600, props.theme));
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["display:flex;position:relative;justify-content:center;padding:", ";&::after{position:absolute;border-left:", ";height:100%;content:'';}", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base}px`, props => `${props.theme.borders.sm} ${getColor('neutralHue', 600, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledSeparator.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'timeline.content';
-var StyledTimelineContent = styled.div.attrs({
+const COMPONENT_ID$3 = 'timeline.content';
+const StyledTimelineContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
-})(["flex:1;padding:", ";", ";"], function (props) {
-  return "".concat(props.theme.space.base * 5, "px ").concat(props.theme.space.base * 4, "px");
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["flex:1;padding:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledTimelineContent.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'timeline.opposite.content';
-var StyledOppositeContent = styled.div.attrs({
+const COMPONENT_ID$2 = 'timeline.opposite.content';
+const StyledOppositeContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
-})(["flex:1;padding:", ";text-align:", ";", ";"], function (props) {
-  return "".concat(props.theme.space.base * 5, "px ").concat(props.theme.space.base * 4, "px");
-}, function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["flex:1;padding:", ";text-align:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => props.theme.rtl ? 'left' : 'right', props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledOppositeContent.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'timeline.item';
-var StyledTimelineItem = styled.li.attrs({
+const COMPONENT_ID$1 = 'timeline.item';
+const StyledTimelineItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
-})(["display:flex;position:relative;line-height:", ";color:", ";font-size:", ";&:last-of-type ", "::after{display:none;}", " ", " ", ";"], function (props) {
-  return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, StyledSeparator, function (props) {
-  return !props.hasOppositeContent && props.isAlternate && css(["&:before{flex:1;content:'';padding:", "px;}"], props.theme.space.base * 4);
-}, function (props) {
-  return props.isAlternate && css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right');
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["display:flex;position:relative;line-height:", ";color:", ";font-size:", ";&:last-of-type ", "::after{display:none;}", " ", " ", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, StyledSeparator, props => !props.hasOppositeContent && props.isAlternate && css(["&:before{flex:1;content:'';padding:", "px;}"], props.theme.space.base * 4), props => props.isAlternate && css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right'), props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledTimelineItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _excluded$6 = ["surfaceColor", "children"];
-var COMPONENT_ID = 'timeline.icon';
-var StyledItemIcon = styled(function (_ref) {
-  _ref.surfaceColor;
-      var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+const COMPONENT_ID = 'timeline.icon';
+const StyledItemIcon = styled(_ref => {
+  let {
+    surfaceColor,
+    children,
+    ...props
+  } = _ref;
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
-})(["z-index:1;box-sizing:content-box;background-color:", ";padding:", "px 0;width:", ";height:", ";color:", ";", ";"], function (props) {
-  return props.surfaceColor || props.theme.colors.background;
-}, function (props) {
-  return props.theme.space.base;
-}, function (props) {
-  return math("".concat(props.theme.iconSizes.sm, " + 1"));
-}, function (props) {
-  return math("".concat(props.theme.iconSizes.sm, " + 1"));
-}, function (props) {
-  return getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["z-index:1;box-sizing:content-box;background-color:", ";padding:", "px 0;width:", ";height:", ";color:", ";", ";"], props => props.surfaceColor || props.theme.colors.background, props => props.theme.space.base, props => math(`${props.theme.iconSizes.sm} + 1`), props => math(`${props.theme.iconSizes.sm} + 1`), props => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var StepperContext = createContext(undefined);
-var useStepperContext = function useStepperContext() {
-  var context = useContext(StepperContext);
+const StepperContext = createContext(undefined);
+const useStepperContext = () => {
+  const context = useContext(StepperContext);
   if (context === undefined) {
     throw new Error('This component must be rendered within a Stepper component');
   }
   return context;
 };
 
-var StepContext = createContext(undefined);
-var useStepContext = function useStepContext() {
-  var context = useContext(StepContext);
+const StepContext = createContext(undefined);
+const useStepContext = () => {
+  const context = useContext(StepContext);
   if (context === undefined) {
     throw new Error('This component must be rendered within a Stepper.Step component');
   }
   return context;
 };
 
-var AccordionContext = createContext(undefined);
-var useAccordionContext = function useAccordionContext() {
-  var context = useContext(AccordionContext);
+const AccordionContext = createContext(undefined);
+const useAccordionContext = () => {
+  const context = useContext(AccordionContext);
   if (context === undefined) {
     throw new Error('This component must be rendered within a Accordion component');
   }
   return context;
 };
 
-var SectionContext = createContext(undefined);
-var useSectionContext = function useSectionContext() {
-  var context = useContext(SectionContext);
+const SectionContext = createContext(undefined);
+const useSectionContext = () => {
+  const context = useContext(SectionContext);
   if (context === undefined) {
     throw new Error('This component must be rendered within a Accordion.Section component');
   }
   return context;
 };
 
-var HeaderContext = createContext(undefined);
-var useHeaderContext = function useHeaderContext() {
-  var context = useContext(HeaderContext);
+const HeaderContext = createContext(undefined);
+const useHeaderContext = () => {
+  const context = useContext(HeaderContext);
   if (context === undefined) {
     throw new Error('This component must be rendered within a Accordion.Header component');
   }
   return context;
 };
 
-var TimelineContext = createContext(undefined);
-var useTimelineContext = function useTimelineContext() {
-  var context = useContext(TimelineContext);
+const TimelineContext = createContext(undefined);
+const useTimelineContext = () => {
+  const context = useContext(TimelineContext);
   if (context === undefined) {
     throw new Error('This component must be rendered within a Timeline component');
   }
   return context;
 };
 
-var TimelineItemContext = createContext(undefined);
-var useTimelineItemContext = function useTimelineItemContext() {
-  var context = useContext(TimelineItemContext);
+const TimelineItemContext = createContext(undefined);
+const useTimelineItemContext = () => {
+  const context = useContext(TimelineItemContext);
   if (context === undefined) {
     throw new Error('This component must be rendered within a Timeline.Item component');
   }
   return context;
 };
 
-var SectionComponent = forwardRef(function (props, ref) {
-  var _useAccordionContext = useAccordionContext(),
-      currentIndexRef = _useAccordionContext.currentIndexRef;
-  var sectionIndexRef = useRef(currentIndexRef.current++);
-  var sectionIndex = sectionIndexRef.current;
+const SectionComponent = forwardRef((props, ref) => {
+  const {
+    currentIndexRef
+  } = useAccordionContext();
+  const sectionIndexRef = useRef(currentIndexRef.current++);
+  const sectionIndex = sectionIndexRef.current;
   return React__default.createElement(SectionContext.Provider, {
     value: sectionIndex
   }, React__default.createElement(StyledSection, _extends$3({
@@ -735,7 +441,7 @@ var SectionComponent = forwardRef(function (props, ref) {
   }, props)));
 });
 SectionComponent.displayName = 'Accordion.Section';
-var Section = SectionComponent;
+const Section = SectionComponent;
 
 var _path$1;
 
@@ -748,109 +454,97 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
   })));
 };
 
-var _excluded$5 = ["onClick", "onFocus", "onBlur", "onMouseOver", "onMouseOut", "children"],
-    _excluded2 = ["onClick", "onKeyDown"];
-var HeaderComponent = forwardRef(function (props, ref) {
-  var _useAccordionContext = useAccordionContext(),
-      ariaLevel = _useAccordionContext.level,
-      isCompact = _useAccordionContext.isCompact,
-      isCollapsible = _useAccordionContext.isCollapsible,
-      getHeaderProps = _useAccordionContext.getHeaderProps,
-      getTriggerProps = _useAccordionContext.getTriggerProps,
-      expandedSections = _useAccordionContext.expandedSections;
-  var onClick = props.onClick,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      onMouseOver = props.onMouseOver,
-      onMouseOut = props.onMouseOut,
-      children = props.children,
-      other = _objectWithoutProperties(props, _excluded$5);
-  var sectionIndex = useSectionContext();
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isHovered = _useState4[0],
-      setIsHovered = _useState4[1];
-  var isExpanded = expandedSections.includes(sectionIndex);
-  var _getTriggerProps = getTriggerProps({
+const HeaderComponent = forwardRef((props, ref) => {
+  const {
+    level: ariaLevel,
+    isCompact,
+    isCollapsible,
+    getHeaderProps,
+    getTriggerProps,
+    expandedSections
+  } = useAccordionContext();
+  const {
+    onClick,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseOut,
+    children,
+    ...other
+  } = props;
+  const sectionIndex = useSectionContext();
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const isExpanded = expandedSections.includes(sectionIndex);
+  const {
+    onClick: onTriggerClick,
+    onKeyDown,
+    ...otherTriggerProps
+  } = getTriggerProps({
     type: 'button',
     index: sectionIndex
-  }),
-      onTriggerClick = _getTriggerProps.onClick;
-      _getTriggerProps.onKeyDown;
-      var otherTriggerProps = _objectWithoutProperties(_getTriggerProps, _excluded2);
-  var onHeaderFocus = function onHeaderFocus(e) {
+  });
+  const onHeaderFocus = e => {
     e.persist();
-    setTimeout(function () {
-      var isAccordionButton = e.target.getAttribute('data-garden-id') === COMPONENT_ID$8;
-      var isFocusVisible = e.target.getAttribute('data-garden-focus-visible');
+    setTimeout(() => {
+      const isAccordionButton = e.target.getAttribute('data-garden-id') === COMPONENT_ID$8;
+      const isFocusVisible = e.target.getAttribute('data-garden-focus-visible');
       if (isAccordionButton && isFocusVisible) {
         setIsFocused(true);
       }
     }, 0);
   };
-  var value = useMemo(function () {
-    return {
-      isHovered: isHovered,
-      otherTriggerProps: otherTriggerProps
-    };
-  }, [isHovered, otherTriggerProps]);
+  const value = useMemo(() => ({
+    isHovered,
+    otherTriggerProps
+  }), [isHovered, otherTriggerProps]);
   return React__default.createElement(HeaderContext.Provider, {
     value: value
-  }, React__default.createElement(StyledHeader, getHeaderProps(_objectSpread2({
-    ref: ref,
-    ariaLevel: ariaLevel,
-    isCompact: isCompact,
-    isFocused: isFocused,
-    isExpanded: isExpanded,
-    isCollapsible: isCollapsible,
+  }, React__default.createElement(StyledHeader, getHeaderProps({
+    ref,
+    ariaLevel,
+    isCompact,
+    isFocused,
+    isExpanded,
+    isCollapsible,
     onClick: composeEventHandlers(onClick, onTriggerClick),
     onFocus: composeEventHandlers(onFocus, onHeaderFocus),
-    onBlur: composeEventHandlers(onBlur, function () {
-      return setIsFocused(false);
-    }),
-    onMouseOver: composeEventHandlers(onMouseOver, function () {
-      return setIsHovered(true);
-    }),
-    onMouseOut: composeEventHandlers(onMouseOut, function () {
-      return setIsHovered(false);
-    })
-  }, other)), children, React__default.createElement(StyledRotateIcon, {
+    onBlur: composeEventHandlers(onBlur, () => setIsFocused(false)),
+    onMouseOver: composeEventHandlers(onMouseOver, () => setIsHovered(true)),
+    onMouseOut: composeEventHandlers(onMouseOut, () => setIsHovered(false)),
+    ...other
+  }), children, React__default.createElement(StyledRotateIcon, {
     isCompact: isCompact,
     isHovered: isHovered,
     isRotated: isExpanded,
     isCollapsible: isCollapsible,
-    onMouseOver: composeEventHandlers(onMouseOver, function () {
-      return setIsHovered(true);
-    }),
-    onMouseOut: composeEventHandlers(onMouseOut, function () {
-      return setIsHovered(false);
-    })
+    onMouseOver: composeEventHandlers(onMouseOver, () => setIsHovered(true)),
+    onMouseOut: composeEventHandlers(onMouseOut, () => setIsHovered(false))
   }, React__default.createElement(SvgChevronDownStroke, null))));
 });
 HeaderComponent.displayName = 'Accordion.Header';
-var Header = HeaderComponent;
-
-var LabelComponent$1 = forwardRef(function (props, ref) {
-  var sectionIndex = useSectionContext();
-  var _useAccordionContext = useAccordionContext(),
-      isCompact = _useAccordionContext.isCompact,
-      isCollapsible = _useAccordionContext.isCollapsible,
-      expandedSections = _useAccordionContext.expandedSections;
-  var isExpanded = expandedSections.includes(sectionIndex);
-  var _useHeaderContext = useHeaderContext(),
-      isHovered = _useHeaderContext.isHovered,
-      otherTriggerProps = _useHeaderContext.otherTriggerProps;
+const Header = HeaderComponent;
+
+const LabelComponent$1 = forwardRef((props, ref) => {
+  const sectionIndex = useSectionContext();
+  const {
+    isCompact,
+    isCollapsible,
+    expandedSections
+  } = useAccordionContext();
+  const isExpanded = expandedSections.includes(sectionIndex);
+  const {
+    isHovered,
+    otherTriggerProps
+  } = useHeaderContext();
   return React__default.createElement(StyledButton, _extends$3({
     ref: ref,
     isCompact: isCompact,
@@ -860,91 +554,93 @@ var LabelComponent$1 = forwardRef(function (props, ref) {
   }, otherTriggerProps, props));
 });
 LabelComponent$1.displayName = 'Accordion.Label';
-var Label$1 = LabelComponent$1;
-
-var PanelComponent = forwardRef(function (props, ref) {
-  var _useAccordionContext = useAccordionContext(),
-      isCompact = _useAccordionContext.isCompact,
-      isBare = _useAccordionContext.isBare,
-      isAnimated = _useAccordionContext.isAnimated,
-      getPanelProps = _useAccordionContext.getPanelProps,
-      expandedSections = _useAccordionContext.expandedSections;
-  var panelRef = useRef();
-  var index = useSectionContext();
-  var isExpanded = expandedSections.includes(index);
-  var updateMaxHeight = useCallback(debounce(function () {
+const Label$1 = LabelComponent$1;
+
+const PanelComponent = forwardRef((props, ref) => {
+  const {
+    isCompact,
+    isBare,
+    isAnimated,
+    getPanelProps,
+    expandedSections
+  } = useAccordionContext();
+  const panelRef = useRef();
+  const index = useSectionContext();
+  const isExpanded = expandedSections.includes(index);
+  const updateMaxHeight = useCallback(debounce(() => {
     if (panelRef.current) {
-      var child = panelRef.current.children[0];
-      child.style.maxHeight = "".concat(child.scrollHeight, "px");
+      const child = panelRef.current.children[0];
+      child.style.maxHeight = `${child.scrollHeight}px`;
     }
   }, 100), [panelRef]);
-  React__default.useEffect(function () {
+  React__default.useEffect(() => {
     if (!isAnimated) {
       return undefined;
     }
     addEventListener('resize', updateMaxHeight);
     updateMaxHeight();
-    return function () {
+    return () => {
       removeEventListener('resize', updateMaxHeight);
     };
   }, [isAnimated, isExpanded, updateMaxHeight, props.children]);
-  return React__default.createElement(StyledPanel, getPanelProps(_objectSpread2({
+  return React__default.createElement(StyledPanel, getPanelProps({
     role: null,
     ref: mergeRefs([panelRef, ref]),
-    index: index,
-    isBare: isBare,
-    isCompact: isCompact,
-    isExpanded: isExpanded,
-    isAnimated: isAnimated
-  }, props)), React__default.createElement(StyledInnerPanel, {
+    index,
+    isBare,
+    isCompact,
+    isExpanded,
+    isAnimated,
+    ...props
+  }), React__default.createElement(StyledInnerPanel, {
     isExpanded: isExpanded,
     isAnimated: isAnimated
   }, props.children));
 });
 PanelComponent.displayName = 'Accordion.Panel';
-var Panel = PanelComponent;
-
-var _excluded$4 = ["level", "isBare", "onChange", "isCompact", "isAnimated", "isExpandable", "isCollapsible", "defaultExpandedSections", "expandedSections"];
-var AccordionComponent = forwardRef(function (_ref, ref) {
-  var level = _ref.level,
-      isBare = _ref.isBare,
-      onChange = _ref.onChange,
-      isCompact = _ref.isCompact,
-      isAnimated = _ref.isAnimated,
-      isExpandable = _ref.isExpandable,
-      isCollapsible = _ref.isCollapsible,
-      defaultExpandedSections = _ref.defaultExpandedSections,
-      controlledExpandedSections = _ref.expandedSections,
-      props = _objectWithoutProperties(_ref, _excluded$4);
-  var _useAccordion = useAccordion({
+const Panel = PanelComponent;
+
+const AccordionComponent = forwardRef((_ref, ref) => {
+  let {
+    level,
+    isBare,
+    onChange,
+    isCompact,
+    isAnimated,
+    isExpandable,
+    isCollapsible,
+    defaultExpandedSections,
+    expandedSections: controlledExpandedSections,
+    ...props
+  } = _ref;
+  const {
+    expandedSections,
+    getHeaderProps,
+    getTriggerProps,
+    getPanelProps
+  } = useAccordion({
     collapsible: isCollapsible,
     expandable: isExpandable || false,
-    onChange: onChange,
-    defaultExpandedSections: defaultExpandedSections,
+    onChange,
+    defaultExpandedSections,
     expandedSections: controlledExpandedSections
-  }),
-      expandedSections = _useAccordion.expandedSections,
-      getHeaderProps = _useAccordion.getHeaderProps,
-      getTriggerProps = _useAccordion.getTriggerProps,
-      getPanelProps = _useAccordion.getPanelProps;
-  var currentIndexRef = useRef(0);
-  useEffect(function () {
+  });
+  const currentIndexRef = useRef(0);
+  useEffect(() => {
     currentIndexRef.current = 0;
   });
-  var value = useMemo(function () {
-    return {
-      level: level,
-      isBare: isBare,
-      isCompact: isCompact,
-      isAnimated: isAnimated,
-      isCollapsible: isCollapsible,
-      getPanelProps: getPanelProps,
-      getHeaderProps: getHeaderProps,
-      getTriggerProps: getTriggerProps,
-      currentIndexRef: currentIndexRef,
-      expandedSections: expandedSections
-    };
-  }, [level, isBare, isCompact, isAnimated, isCollapsible, getPanelProps, getHeaderProps, getTriggerProps, currentIndexRef, expandedSections]);
+  const value = useMemo(() => ({
+    level,
+    isBare,
+    isCompact,
+    isAnimated,
+    isCollapsible,
+    getPanelProps,
+    getHeaderProps,
+    getTriggerProps,
+    currentIndexRef,
+    expandedSections
+  }), [level, isBare, isCompact, isAnimated, isCollapsible, getPanelProps, getHeaderProps, getTriggerProps, currentIndexRef, expandedSections]);
   return React__default.createElement(AccordionContext.Provider, {
     value: value
   }, React__default.createElement(StyledAccordion, _extends$3({
@@ -956,33 +652,29 @@ AccordionComponent.defaultProps = {
   isAnimated: true,
   isCollapsible: true
 };
-var Accordion = AccordionComponent;
+const Accordion = AccordionComponent;
 Accordion.Header = Header;
 Accordion.Label = Label$1;
 Accordion.Panel = Panel;
 Accordion.Section = Section;
 
-var StepComponent = forwardRef(function (props, ref) {
-  var _useStepperContext = useStepperContext(),
-      currentIndexRef = _useStepperContext.currentIndexRef,
-      isHorizontal = _useStepperContext.isHorizontal;
-  var _useState = useState(currentIndexRef.current),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentStepIndex = _useState2[0],
-      setCurrentStepIndex = _useState2[1];
-  useLayoutEffect(function () {
+const StepComponent = forwardRef((props, ref) => {
+  const {
+    currentIndexRef,
+    isHorizontal
+  } = useStepperContext();
+  const [currentStepIndex, setCurrentStepIndex] = useState(currentIndexRef.current);
+  useLayoutEffect(() => {
     setCurrentStepIndex(currentIndexRef.current);
     currentIndexRef.current++;
-    var currentIndex = currentIndexRef;
-    return function () {
+    const currentIndex = currentIndexRef;
+    return () => {
       currentIndex.current--;
     };
   }, [currentIndexRef]);
-  var value = useMemo(function () {
-    return {
-      currentStepIndex: currentStepIndex
-    };
-  }, [currentStepIndex]);
+  const value = useMemo(() => ({
+    currentStepIndex
+  }), [currentStepIndex]);
   return React__default.createElement(StepContext.Provider, {
     value: value
   }, React__default.createElement(StyledStep, _extends$3({
@@ -991,7 +683,7 @@ var StepComponent = forwardRef(function (props, ref) {
   }, props), isHorizontal && React__default.createElement(StyledLine, null), props.children));
 });
 StepComponent.displayName = 'Stepper.Step';
-var Step = StepComponent;
+const Step = StepComponent;
 
 var _path;
 
@@ -1004,7 +696,8 @@ var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -1015,23 +708,26 @@ var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
   })));
 };
 
-var _excluded$3 = ["icon", "iconProps", "isHidden", "children"];
-var LabelComponent = forwardRef(function (_ref, ref) {
-  var icon = _ref.icon,
-      iconProps = _ref.iconProps,
-      isHidden = _ref.isHidden,
-      children = _ref.children,
-      other = _objectWithoutProperties(_ref, _excluded$3);
-  var _useStepContext = useStepContext(),
-      currentStepIndex = _useStepContext.currentStepIndex;
-  var _useStepperContext = useStepperContext(),
-      activeIndex = _useStepperContext.activeIndex,
-      isHorizontal = _useStepperContext.isHorizontal;
-  var numericStep = currentStepIndex + 1;
-  var stepIcon = icon || numericStep;
-  var isActive = activeIndex === currentStepIndex;
-  var isCompleted = activeIndex > currentStepIndex;
-  var styledIcon = React__default.createElement(StyledIcon, {
+const LabelComponent = forwardRef((_ref, ref) => {
+  let {
+    icon,
+    iconProps,
+    isHidden,
+    children,
+    ...other
+  } = _ref;
+  const {
+    currentStepIndex
+  } = useStepContext();
+  const {
+    activeIndex,
+    isHorizontal
+  } = useStepperContext();
+  const numericStep = currentStepIndex + 1;
+  const stepIcon = icon || numericStep;
+  const isActive = activeIndex === currentStepIndex;
+  const isCompleted = activeIndex > currentStepIndex;
+  const styledIcon = React__default.createElement(StyledIcon, {
     isActive: isActive,
     isHorizontal: isHorizontal
   }, isCompleted ? React__default.createElement(SvgCheckSmStroke, iconProps) : stepIcon);
@@ -1050,27 +746,29 @@ LabelComponent.propTypes = {
   iconProps: PropTypes.object,
   isHidden: PropTypes.bool
 };
-var Label = LabelComponent;
-
-var ContentComponent$1 = forwardRef(function (props, ref) {
-  var contentRef = useRef();
-  var _useStepperContext = useStepperContext(),
-      activeIndex = _useStepperContext.activeIndex,
-      isHorizontal = _useStepperContext.isHorizontal;
-  var _useStepContext = useStepContext(),
-      currentStepIndex = _useStepContext.currentStepIndex;
-  var isActive = currentStepIndex === activeIndex;
-  var updateMaxHeight = useCallback(debounce(function () {
+const Label = LabelComponent;
+
+const ContentComponent$1 = forwardRef((props, ref) => {
+  const contentRef = useRef();
+  const {
+    activeIndex,
+    isHorizontal
+  } = useStepperContext();
+  const {
+    currentStepIndex
+  } = useStepContext();
+  const isActive = currentStepIndex === activeIndex;
+  const updateMaxHeight = useCallback(debounce(() => {
     if (contentRef.current) {
-      var child = contentRef.current.children[0];
-      child.style.maxHeight = "".concat(child.scrollHeight, "px");
+      const child = contentRef.current.children[0];
+      child.style.maxHeight = `${child.scrollHeight}px`;
     }
   }, 100), [contentRef]);
-  useEffect(function () {
+  useEffect(() => {
     if (isActive && isHorizontal === false) {
       addEventListener('resize', updateMaxHeight);
       updateMaxHeight();
-      return function () {
+      return () => {
         removeEventListener('resize', updateMaxHeight);
       };
     }
@@ -1085,22 +783,21 @@ var ContentComponent$1 = forwardRef(function (props, ref) {
   }, props.children)) : null;
 });
 ContentComponent$1.displayName = 'Stepper.Content';
-var Content$1 = ContentComponent$1;
-
-var _excluded$2 = ["isHorizontal", "activeIndex"];
-var StepperComponent = forwardRef(function (_ref, ref) {
-  var isHorizontal = _ref.isHorizontal,
-      activeIndex = _ref.activeIndex,
-      props = _objectWithoutProperties(_ref, _excluded$2);
-  var currentIndexRef = useRef(0);
-  var stepperContext = useMemo(function () {
-    return {
-      isHorizontal: isHorizontal || false,
-      activeIndex: activeIndex,
-      currentIndexRef: currentIndexRef
-    };
-  }, [isHorizontal, activeIndex, currentIndexRef]);
-  useEffect(function () {
+const Content$1 = ContentComponent$1;
+
+const StepperComponent = forwardRef((_ref, ref) => {
+  let {
+    isHorizontal,
+    activeIndex,
+    ...props
+  } = _ref;
+  const currentIndexRef = useRef(0);
+  const stepperContext = useMemo(() => ({
+    isHorizontal: isHorizontal || false,
+    activeIndex: activeIndex,
+    currentIndexRef
+  }), [isHorizontal, activeIndex, currentIndexRef]);
+  useEffect(() => {
     currentIndexRef.current = 0;
   });
   return React__default.createElement(StepperContext.Provider, {
@@ -1114,34 +811,32 @@ StepperComponent.displayName = 'Stepper';
 StepperComponent.defaultProps = {
   activeIndex: 0
 };
-var Stepper = StepperComponent;
+const Stepper = StepperComponent;
 Stepper.Content = Content$1;
 Stepper.Label = Label;
 Stepper.Step = Step;
 
-var OppositeContentComponent = forwardRef(function (props, ref) {
-  return React__default.createElement(StyledOppositeContent, _extends$3({
-    ref: ref
-  }, props));
-});
+const OppositeContentComponent = forwardRef((props, ref) => React__default.createElement(StyledOppositeContent, _extends$3({
+  ref: ref
+}, props)));
 OppositeContentComponent.displayName = 'Timeline.OppositeContent';
-var OppositeContent = OppositeContentComponent;
-
-var _excluded$1 = ["icon", "surfaceColor"];
-var ItemComponent = forwardRef(function (_ref, ref) {
-  var icon = _ref.icon,
-      surfaceColor = _ref.surfaceColor,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-  var value = useMemo(function () {
-    return {
-      icon: icon,
-      surfaceColor: surfaceColor
-    };
-  }, [icon, surfaceColor]);
-  var _useTimelineContext = useTimelineContext(),
-      isAlternate = _useTimelineContext.isAlternate;
-  var hasOppositeContent = false;
-  Children.forEach(props.children, function (child) {
+const OppositeContent = OppositeContentComponent;
+
+const ItemComponent = forwardRef((_ref, ref) => {
+  let {
+    icon,
+    surfaceColor,
+    ...props
+  } = _ref;
+  const value = useMemo(() => ({
+    icon,
+    surfaceColor
+  }), [icon, surfaceColor]);
+  const {
+    isAlternate
+  } = useTimelineContext();
+  let hasOppositeContent = false;
+  Children.forEach(props.children, child => {
     if (child) {
       if (child.type === OppositeContent) {
         hasOppositeContent = true;
@@ -1157,7 +852,7 @@ var ItemComponent = forwardRef(function (_ref, ref) {
   }, props)));
 });
 ItemComponent.displayName = 'Timeline.Item';
-var Item = ItemComponent;
+const Item = ItemComponent;
 
 var _circle;
 
@@ -1170,7 +865,8 @@ var SvgCircleFullStroke = function SvgCircleFullStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
     cx: 6,
     cy: 6,
@@ -1180,10 +876,11 @@ var SvgCircleFullStroke = function SvgCircleFullStroke(props) {
   })));
 };
 
-var ContentComponent = forwardRef(function (props, ref) {
-  var _useTimelineItemConte = useTimelineItemContext(),
-      icon = _useTimelineItemConte.icon,
-      surfaceColor = _useTimelineItemConte.surfaceColor;
+const ContentComponent = forwardRef((props, ref) => {
+  const {
+    icon,
+    surfaceColor
+  } = useTimelineItemContext();
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledSeparator, null, React__default.createElement(StyledItemIcon, {
     surfaceColor: surfaceColor
   }, icon || React__default.createElement(SvgCircleFullStroke, null))), React__default.createElement(StyledTimelineContent, _extends$3({
@@ -1191,17 +888,16 @@ var ContentComponent = forwardRef(function (props, ref) {
   }, props)));
 });
 ContentComponent.displayName = 'Timeline.Content';
-var Content = ContentComponent;
-
-var _excluded = ["isAlternate"];
-var TimelineComponent = forwardRef(function (_ref, ref) {
-  var isAlternate = _ref.isAlternate,
-      props = _objectWithoutProperties(_ref, _excluded);
-  var value = useMemo(function () {
-    return {
-      isAlternate: isAlternate
-    };
-  }, [isAlternate]);
+const Content = ContentComponent;
+
+const TimelineComponent = forwardRef((_ref, ref) => {
+  let {
+    isAlternate,
+    ...props
+  } = _ref;
+  const value = useMemo(() => ({
+    isAlternate
+  }), [isAlternate]);
   return React__default.createElement(TimelineContext.Provider, {
     value: value
   }, React__default.createElement(StyledTimeline, _extends$3({
@@ -1209,7 +905,7 @@ var TimelineComponent = forwardRef(function (_ref, ref) {
   }, props)));
 });
 TimelineComponent.displayName = 'Timeline';
-var Timeline = TimelineComponent;
+const Timeline = TimelineComponent;
 Timeline.Content = Content;
 Timeline.Item = Item;
 Timeline.OppositeContent = OppositeContent;