@zendeskgarden/react-accordions 8.39.0 → 8.41.0

package/dist/index.cjs.js

@@ -12,10 +12,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
+var polished = require('polished');
 var PropTypes = require('prop-types');
-var containerUtilities = require('@zendeskgarden/container-utilities');
+var mergeRefs = require('react-merge-refs');
 var debounce = require('lodash.debounce');
 var containerAccordion = require('@zendeskgarden/container-accordion');
+var containerUtilities = require('@zendeskgarden/container-utilities');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,12 +41,51 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+
+    if (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 = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      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, {
@@ -78,40 +119,6 @@ function _extends$3() {
   return _extends$3.apply(this, arguments);
 }
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (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 = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -148,18 +155,6 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-}
-
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -169,14 +164,17 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  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 _e = undefined;
+
+  var _s, _e;
 
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
 
       if (i && _arr.length === i) break;
@@ -216,7 +214,6 @@ 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 _templateObject$k;
 var COMPONENT_ID$k = 'accordions.step_content';
 var sizeStyles$1 = function sizeStyles(props) {
   var _props$theme = props.theme,
@@ -232,8 +229,11 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledContent = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.39.0'
-})(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  ", "\n  min-width: ", "px;\n  word-break: break-word;\n\n  ", ";\n"])), sizeStyles$1, function (props) {
+  'data-garden-version': '8.41.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 reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props);
@@ -242,12 +242,14 @@ StyledContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$j;
 var COMPONENT_ID$j = 'accordions.step_line';
 var StyledLine = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.39.0'
-})(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  display: block;\n  position: absolute;\n  top: ", "px;\n  right: ", ";\n  left: ", ";\n  flex: 1;\n  border-top: ", ";\n  border-color: ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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)");
@@ -262,12 +264,14 @@ StyledLine.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$i;
 var COMPONENT_ID$i = 'accordions.step';
 var StyledStep = styled__default['default'].li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.39.0'
-})(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  position: ", ";\n  flex: ", ";\n  min-width: ", ";\n\n  &:last-of-type ", " {\n    display: ", ";\n  }\n\n  &:first-of-type ", " {\n    display: ", ";\n  }\n\n  &:not(:last-of-type) ", " {\n    /* stylelint-disable-next-line property-no-unknown */\n    border-", ": ", ";\n    border-color: ", ";\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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';
@@ -290,12 +294,14 @@ StyledStep.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$h;
 var COMPONENT_ID$h = 'accordions.step_inner_content';
 var StyledInnerContent = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.39.0'
-})(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  transition: max-height 0.25s ease-in-out;\n  overflow: hidden;\n  max-height: ", "; /* stylelint-disable-line */\n  line-height: ", ";\n  color: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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 reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
@@ -310,12 +316,14 @@ StyledInnerContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$g;
 var COMPONENT_ID$g = 'accordions.stepper';
 var StyledStepper = styled__default['default'].ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.39.0'
-})(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  display: ", ";\n  margin: 0; /* [1] */\n  padding: 0; /* [1] */\n  list-style: none; /* [1] */\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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 reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props);
@@ -324,9 +332,11 @@ StyledStepper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$f, _templateObject2;
 var COMPONENT_ID$f = 'accordions.step_icon';
-var StyledIconFlexContainer = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  display: flex;\n  flex-basis: 100%;\n  justify-content: center;\n  width: 100%;\n"])));
+var StyledIconFlexContainer = styled__default['default'].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;
@@ -337,8 +347,11 @@ var colorStyles$2 = function colorStyles(props) {
 };
 var StyledIcon = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.39.0'
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.25s ease-in-out, color 0.25s ease-in-out;\n  border-radius: 100%;\n  ", "\n  ", "\n\n  ", ";\n"])), sizeStyles, colorStyles$2, function (props) {
+  'data-garden-version': '8.41.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 reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props);
 });
 StyledIconFlexContainer.defaultProps = {
@@ -348,12 +361,14 @@ StyledIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$e;
 var COMPONENT_ID$e = 'accordions.step_label';
 var StyledLabel = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.39.0'
-})(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  display: ", ";\n  align-items: ", ";\n  transition: color 0.25s ease-in-out, font-weight 0.25s ease-in-out;\n  text-align: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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';
@@ -374,12 +389,14 @@ StyledLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$d;
 var COMPONENT_ID$d = 'accordions.step_label_text';
 var StyledLabelText = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.39.0'
-})(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  display: ", ";\n  padding: ", ";\n  word-wrap: ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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");
@@ -390,19 +407,20 @@ StyledLabelText.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$c;
 var COMPONENT_ID$c = 'accordions.accordion';
 var StyledAccordion = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.39.0'
-})(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledAccordion",
+  componentId: "sc-niv9ic-0"
+})(["", ";"], function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props);
 });
 StyledAccordion.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$b;
 var COMPONENT_ID$b = 'accordions.panel';
 var paddingStyles = function paddingStyles(props) {
   var base = props.theme.space.base;
@@ -422,8 +440,11 @@ var paddingStyles = function paddingStyles(props) {
 };
 var StyledPanel = styled__default['default'].section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.39.0'
-})(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  ", ";\n  border-bottom: ", ";\n\n  ", ";\n"])), paddingStyles, function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledPanel",
+  componentId: "sc-1piryze-0"
+})(["", ";border-bottom:", ";", ";"], paddingStyles, function (props) {
   return "".concat(props.theme.borders.sm, " ").concat(props.isBare ? 'transparent' : reactTheming.getColor('neutralHue', 300, props.theme));
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props);
@@ -433,24 +454,28 @@ StyledPanel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$a;
 var COMPONENT_ID$a = 'accordions.section';
 var StyledSection = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.39.0'
-})(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  &:last-child ", " {\n    border: none;\n  }\n\n  ", ";\n"])), StyledPanel, function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledSection",
+  componentId: "sc-v2t9bd-0"
+})(["&:last-child ", "{border:none;}", ";"], StyledPanel, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props);
 });
 StyledSection.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$9;
 var COMPONENT_ID$9 = 'accordions.header';
 var StyledHeader = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.39.0'
-})(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-shadow: ", ";\n  font-size: ", ";\n\n  &:hover {\n    cursor: ", ";\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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(reactTheming.getColor('primaryHue', 600, props.theme, 0.35)), " inset");
 }, function (props) {
   return props.theme.fontSizes.md;
@@ -463,7 +488,6 @@ StyledHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$8;
 var COMPONENT_ID$8 = 'accordions.button';
 var colorStyles$1 = function colorStyles(props) {
   var showColor = props.isCollapsible || !props.isExpanded;
@@ -475,8 +499,11 @@ var colorStyles$1 = function colorStyles(props) {
 };
 var StyledButton = styled__default['default'].button.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.39.0'
-})(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  transition: color 0.1s ease-in-out;\n  outline: none;\n  border: none;\n  background: transparent;\n  padding: ", ";\n  width: 100%;\n  text-align: ", ";\n  line-height: ", ";\n  font-family: inherit; /* [1] */\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", "\n\n  &::-moz-focus-inner {\n    border: 0; /* [2] */\n  }\n\n  &:hover {\n    cursor: ", ";\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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';
@@ -495,12 +522,14 @@ StyledButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$7;
 var COMPONENT_ID$7 = 'accordions.step_inner_panel';
 var StyledInnerPanel = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.39.0'
-})(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  transition: ", ";\n  /* stylelint-disable-next-line declaration-no-important */\n  max-height: ", "; /* [1] */\n  overflow: hidden;\n  line-height: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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';
@@ -516,8 +545,7 @@ StyledInnerPanel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$5 = ["children", "isRotated", "isHovered", "isCompact", "isCollapsible"];
-var _templateObject$6;
+var _excluded$6 = ["children", "isRotated", "isHovered", "isCompact", "isCollapsible"];
 var COMPONENT_ID$6 = 'accordions.rotate_icon';
 var colorStyles = function colorStyles(props) {
   var showColor = props.isCollapsible || !props.isRotated;
@@ -534,12 +562,15 @@ function (_ref) {
       _ref.isHovered;
       _ref.isCompact;
       _ref.isCollapsible;
-      var props = _objectWithoutProperties(_ref, _excluded$5);
+      var props = _objectWithoutProperties(_ref, _excluded$6);
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.39.0'
-})(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  transform: ", ";\n  transition: transform 0.25s ease-in-out, color 0.1s ease-in-out;\n  box-sizing: content-box;\n  padding: ", ";\n  width: ", ";\n  height: ", ";\n  vertical-align: middle;\n\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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");
@@ -554,31 +585,29 @@ StyledRotateIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$5;
-var COMPONENT_ID$5 = 'timeline.timeline';
+var COMPONENT_ID$5 = 'timeline';
 var StyledTimeline = styled__default['default'].ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.39.0'
-})(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  margin: 0; /* [1] */\n  padding: 0; /* [1] */\n  list-style: none; /* [1] */\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledTimeline",
+  componentId: "sc-pig5kv-0"
+})(["margin:0;padding:0;list-style:none;", ";"], function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
 });
 StyledTimeline.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$4;
 var COMPONENT_ID$4 = 'timeline.content.separator';
 var StyledSeparator = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.39.0'
-})(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  justify-content: center;\n  padding: ", ";\n\n  svg {\n    box-sizing: content-box; /* [1] */\n  }\n\n  svg,\n  img {\n    position: relative;\n    z-index: 2;\n    background: ", ";\n    padding: ", "px 0;\n    color: ", ";\n  }\n\n  &::after {\n    position: absolute;\n    z-index: 1;\n    border-left: ", ";\n    height: 100%;\n    content: '';\n  }\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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 props.surfaceColor || props.theme.colors.background;
-}, function (props) {
-  return props.theme.space.base;
-}, function (props) {
-  return reactTheming.getColor('neutralHue', 600, props.theme);
 }, function (props) {
   return "".concat(props.theme.borders.sm, " ").concat(reactTheming.getColor('neutralHue', 600, props.theme));
 }, function (props) {
@@ -588,12 +617,14 @@ StyledSeparator.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$3;
 var COMPONENT_ID$3 = 'timeline.content';
 var StyledTimelineContent = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.39.0'
-})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  flex: 1;\n  padding: ", ";\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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 reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
@@ -602,12 +633,14 @@ StyledTimelineContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$2;
 var COMPONENT_ID$2 = 'timeline.opposite.content';
 var StyledOppositeContent = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.39.0'
-})(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  flex: 1;\n  margin-right: auto;\n  padding: ", ";\n  text-align: ", ";\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.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';
@@ -618,12 +651,14 @@ StyledOppositeContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$1;
 var COMPONENT_ID$1 = 'timeline.item';
 var StyledTimelineItem = styled__default['default'].li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.39.0'
-})(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n\n  &:last-of-type ", "::after {\n    display: none;\n  }\n\n  ", "\n\n  ", "\n\n  ", ";\n"])), StyledSeparator, function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledItem__StyledTimelineItem",
+  componentId: "sc-5mcnzm-0"
+})(["display:flex;position:relative;&:last-of-type ", "::after{display:none;}", " ", " ", ";"], StyledSeparator, function (props) {
   return !props.hasOppositeContent && props.isAlternate && styled.css(["&:before{flex:1;content:'';padding:", "px;}"], props.theme.space.base * 4);
 }, function (props) {
   return props.isAlternate && styled.css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right');
@@ -634,40 +669,33 @@ StyledTimelineItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function _extends$2() { _extends$2 = Object.assign || 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$2.apply(this, arguments); }
-
-var _ref$2 = /*#__PURE__*/React__namespace.createElement("circle", {
-  cx: 6,
-  cy: 6,
-  r: 4.5,
-  fill: "none",
-  stroke: "currentColor"
-});
-
-function SvgCircleFullStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
-    focusable: "false",
-    role: "presentation"
-  }, props), _ref$2);
-}
-
-var _templateObject;
+var _excluded$5 = ["surfaceColor", "children"];
 var COMPONENT_ID = 'timeline.icon';
-var StyledCircleStrokeIcon = styled__default['default'](SvgCircleFullStroke).attrs({
+var StyledItemIcon = styled__default['default'](function (_ref) {
+  _ref.surfaceColor;
+      var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$5);
+  return React.cloneElement(React.Children.only(children), props);
+}).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.39.0'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px; /* [1] */\n  height: ", "px; /* [1] */\n  ", ";\n"])), function (props) {
-  return props.theme.space.base * 2.75;
+  'data-garden-version': '8.41.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 polished.math("".concat(props.theme.iconSizes.sm, " + 1"));
 }, function (props) {
-  return props.theme.space.base * 2.75;
+  return polished.math("".concat(props.theme.iconSizes.sm, " + 1"));
+}, function (props) {
+  return reactTheming.getColor('neutralHue', 600, props.theme);
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
 });
-StyledCircleStrokeIcon.defaultProps = {
+StyledItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -764,9 +792,9 @@ var Step = React.forwardRef(function (props, ref) {
 });
 Step.displayName = 'Step';
 
-function _extends$1() { _extends$1 = Object.assign || 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$1.apply(this, arguments); }
+function _extends$2() { _extends$2 = Object.assign || 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$2.apply(this, arguments); }
 
-var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$2 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -776,14 +804,14 @@ var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
 });
 
 function SvgCheckSmStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$1);
+  }, props), _ref$2);
 }
 
 var Label$1 = React.forwardRef(function (props, ref) {
@@ -816,7 +844,7 @@ Label$1.propTypes = {
 };
 
 var Content$1 = React.forwardRef(function (props, ref) {
-  var contentRef = containerUtilities.useCombinedRefs(ref);
+  var contentRef = React.useRef();
   var _useStepperContext = useStepperContext(),
       activeIndex = _useStepperContext.activeIndex,
       isHorizontal = _useStepperContext.isHorizontal;
@@ -840,7 +868,7 @@ var Content$1 = React.forwardRef(function (props, ref) {
     return undefined;
   }, [isActive, isHorizontal, props.children, updateMaxHeight]);
   return isHorizontal === false ? React__default['default'].createElement(StyledContent, _extends$3({
-    ref: contentRef,
+    ref: mergeRefs__default['default']([contentRef, ref]),
     isActive: isActive
   }, props), React__default['default'].createElement(StyledInnerContent, {
     isActive: isActive
@@ -893,22 +921,22 @@ var Section = React.forwardRef(function (props, ref) {
 });
 Section.displayName = 'Section';
 
-function _extends() { _extends = Object.assign || 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 _extends$1() { _extends$1 = Object.assign || 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$1.apply(this, arguments); }
 
-var _ref = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$1 = /*#__PURE__*/React__namespace.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"
 });
 
 function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref);
+  }, props), _ref$1);
 }
 
 var _excluded$3 = ["onClick", "onFocus", "onBlur", "onMouseOver", "onMouseOut", "children"],
@@ -1023,7 +1051,7 @@ var Panel = React.forwardRef(function (props, ref) {
       isAnimated = _useAccordionContext.isAnimated,
       getPanelProps = _useAccordionContext.getPanelProps,
       expandedSections = _useAccordionContext.expandedSections;
-  var panelRef = containerUtilities.useCombinedRefs(ref);
+  var panelRef = React.useRef();
   var index = useSectionContext();
   var isExpanded = expandedSections.includes(index);
   var updateMaxHeight = React.useCallback(debounce__default['default'](function () {
@@ -1044,7 +1072,7 @@ var Panel = React.forwardRef(function (props, ref) {
   }, [isAnimated, isExpanded, updateMaxHeight, props.children]);
   return React__default['default'].createElement(StyledPanel, getPanelProps(_objectSpread2({
     role: null,
-    ref: panelRef,
+    ref: mergeRefs__default['default']([panelRef, ref]),
     index: index,
     isBare: isBare,
     isCompact: isCompact,
@@ -1150,13 +1178,34 @@ var Item = React.forwardRef(function (_ref, ref) {
 });
 Item.displayName = 'Item';
 
+function _extends() { _extends = Object.assign || 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); }
+
+var _ref = /*#__PURE__*/React__namespace.createElement("circle", {
+  cx: 6,
+  cy: 6,
+  r: 4.5,
+  fill: "none",
+  stroke: "currentColor"
+});
+
+function SvgCircleFullStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref);
+}
+
 var Content = React.forwardRef(function (props, ref) {
   var _useTimelineItemConte = useTimelineItemContext(),
       icon = _useTimelineItemConte.icon,
       surfaceColor = _useTimelineItemConte.surfaceColor;
-  return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(StyledSeparator, {
+  return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(StyledSeparator, null, React__default['default'].createElement(StyledItemIcon, {
     surfaceColor: surfaceColor
-  }, icon || React__default['default'].createElement(StyledCircleStrokeIcon, null)), React__default['default'].createElement(StyledTimelineContent, _extends$3({
+  }, icon || React__default['default'].createElement(SvgCircleFullStroke, null))), React__default['default'].createElement(StyledTimelineContent, _extends$3({
     ref: ref
   }, props)));
 });