@zendeskgarden/react-accordions 9.0.0-next.2 → 9.0.0-next.21

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -39,28 +38,13 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
-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);
-}
-
 const COMPONENT_ID$k = 'accordions.step_content';
 const sizeStyles$2 = props => {
   const {
     rtl,
     space
   } = props.theme;
-  const paddingBottom = props.isActive ? space.base * 8 : space.base * 6;
+  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';
@@ -70,11 +54,11 @@ const sizeStyles$2 = props => {
 };
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
-})(["display:grid;grid-template-rows:", "fr;transition:grid-template-rows 0.25s ease-in-out;word-break:break-word;", " ", ";"], props => props.isActive ? 1 : 0, sizeStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
+})(["display:grid;grid-template-rows:", "fr;transition:grid-template-rows 0.25s ease-in-out;word-break:break-word;", " ", ";"], props => props.$isActive ? 1 : 0, sizeStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -82,11 +66,19 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$j = 'accordions.step_line';
 const StyledLine = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
-})(["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 => reactTheming.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, _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+});
 StyledLine.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -94,11 +86,19 @@ StyledLine.defaultProps = {
 const COMPONENT_ID$i = 'accordions.step';
 const StyledStep = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).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:", ";}", ";"], 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 => reactTheming.getColor('neutralHue', 300, props.theme), props => reactTheming.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, _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+}, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledStep.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -106,11 +106,19 @@ StyledStep.defaultProps = {
 const COMPONENT_ID$h = 'accordions.step_inner_content';
 const StyledInnerContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
-})(["overflow:hidden;line-height:", ";color:", ";font-size:", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
+})(["overflow:hidden;line-height:", ";color:", ";font-size:", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledInnerContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -118,11 +126,11 @@ StyledInnerContent.defaultProps = {
 const COMPONENT_ID$g = 'accordions.stepper';
 const StyledStepper = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
-})(["display:", ";margin:0;padding:0;list-style:none;", ";"], props => props.isHorizontal && 'flex', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["display:", ";margin:0;padding:0;list-style:none;", ";"], props => props.$isHorizontal && 'flex', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledStepper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -135,18 +143,42 @@ const StyledIconFlexContainer = styled__default.default.div.withConfig({
 const sizeStyles$1 = props => {
   const size = `${props.theme.space.base * 6}px`;
   const fontSize = props.theme.fontSizes.sm;
-  return styled.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, reactTheming.getLineHeight(size, fontSize), fontSize);
+  return styled.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, reactTheming.getLineHeight(size, fontSize), fontSize);
 };
-const colorStyles$3 = props => {
-  return styled.css(["background:", ";color:", ";"], props.isActive ? reactTheming.getColor('neutralHue', 600, props.theme) : reactTheming.getColor('neutralHue', 200, props.theme), props.isActive ? props.theme.colors.background : props.theme.colors.foreground);
+const colorStyles$4 = _ref => {
+  let {
+    $isActive,
+    theme
+  } = _ref;
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: $isActive ? 'foreground.onEmphasis' : 'foreground.default'
+  });
+  const backgroundColor = $isActive ? reactTheming.getColor({
+    theme,
+    variable: 'background.emphasis',
+    dark: {
+      offset: -300
+    }
+  }) : reactTheming.getColor({
+    theme,
+    variable: 'background.subtle',
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 100
+    }
+  });
+  return styled.css(["background:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 const StyledIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).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$1, colorStyles$3, props => reactTheming.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$1, colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledIconFlexContainer.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -157,11 +189,20 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID$e = 'accordions.step_label';
 const StyledLabel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).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:", ";", ";"], props => !props.isHorizontal && 'flex', props => !props.isHorizontal && 'center', props => props.isHorizontal && 'center', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isActive ? props.theme.colors.foreground : reactTheming.getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isActive && 600, props => reactTheming.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 => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), _ref => {
+  let {
+    $isActive,
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    theme,
+    variable: $isActive ? 'foreground.default' : 'foreground.subtle'
+  });
+}, props => props.theme.fontSizes.md, props => props.$isActive && 600, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -169,11 +210,11 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$d = 'accordions.step_label_text';
 const StyledLabelText = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
-})(["display:", ";padding:", ";word-wrap:", ";"], props => props.isHidden && 'none', props => props.isHorizontal && `0 ${props.theme.space.base * 3}px`, props => 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: reactTheming.DEFAULT_THEME
 };
@@ -181,7 +222,7 @@ StyledLabelText.defaultProps = {
 const COMPONENT_ID$c = 'accordions.accordion';
 const StyledAccordion = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
@@ -191,18 +232,21 @@ StyledAccordion.defaultProps = {
 };
 
 const COMPONENT_ID$b = 'accordions.panel';
-const colorStyles$2 = props => {
-  const {
+const colorStyles$3 = _ref => {
+  let {
     theme,
-    isBare
-  } = props;
-  return styled.css(["border-bottom-color:", ";"], isBare ? 'transparent' : reactTheming.getColor('neutralHue', 300, theme));
+    $isBare
+  } = _ref;
+  return styled.css(["border-bottom-color:", ";"], $isBare ? 'transparent' : reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  }));
 };
 const sizeStyles = props => {
   const {
     theme,
-    isCompact,
-    isExpanded
+    $isCompact,
+    $isExpanded
   } = props;
   const {
     base
@@ -210,33 +254,33 @@ const sizeStyles = props => {
   let paddingTop = base * 2;
   let paddingHorizontal = base * 5;
   let paddingBottom = base * 8;
-  if (isCompact) {
+  if ($isCompact) {
     paddingTop = base * 2;
     paddingHorizontal = base * 3;
     paddingBottom = base * 4;
   }
-  if (isExpanded === false) {
+  if ($isExpanded === false) {
     paddingTop = 0;
     paddingBottom = 0;
   }
-  return styled.css(["grid-template-rows:", "fr;border-bottom:", ";padding:", "px ", "px ", "px;line-height:", ";font-size:", ";"], isExpanded ? 1 : 0, theme.borders.sm, paddingTop, paddingHorizontal, paddingBottom, reactTheming.getLineHeight(base * 5, theme.fontSizes.md), theme.fontSizes.md);
+  return styled.css(["grid-template-rows:", "fr;border-bottom:", ";padding:", "px ", "px ", "px;line-height:", ";font-size:", ";"], $isExpanded ? 1 : 0, theme.borders.sm, paddingTop, paddingHorizontal, paddingBottom, reactTheming.getLineHeight(base * 5, theme.fontSizes.md), theme.fontSizes.md);
 };
 const StyledPanel = styled__default.default.section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
-})(["display:grid;transition:", ";overflow:hidden;", " ", " ", ";"], props => props.isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out', sizeStyles, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
+})(["display:grid;transition:", ";overflow:hidden;", " ", " ", ";"], props => props.$isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out', sizeStyles, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledPanel.defaultProps = {
-  isAnimated: true,
+  $isAnimated: true,
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$a = 'accordions.section';
 const StyledSection = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
@@ -245,82 +289,82 @@ StyledSection.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'accordions.header';
-const StyledHeader = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledHeader",
-  componentId: "sc-2c6rbr-0"
-})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out;font-size:", ";&:hover{cursor:", ";}", " ", ";"], props => props.theme.fontSizes.md, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => reactTheming.focusStyles({
-  theme: props.theme,
-  inset: true,
-  condition: props.isFocused,
-  selector: '&:focus-within'
-}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledHeader.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-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 = reactTheming.getColor('primaryHue', 600, props.theme);
-  }
+const COMPONENT_ID$9 = 'accordions.button';
+const colorStyles$2 = _ref => {
+  let {
+    $isCollapsible,
+    $isExpanded,
+    $isHovered,
+    theme
+  } = _ref;
+  const showColor = $isCollapsible || !$isExpanded;
+  const color = reactTheming.getColor({
+    theme,
+    variable: showColor && $isHovered ? 'foreground.primary' : 'foreground.default'
+  });
   return styled.css(["color:", ";&:hover{cursor:", ";color:", ";}"], color, showColor && 'pointer', showColor && color);
 };
 const StyledButton = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0-next.21'
 }).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:", ";}", ";"], 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 => reactTheming.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 => reactTheming.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 => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$2, props => (props.$isCollapsible || !props.$isExpanded) && 'pointer', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
+const COMPONENT_ID$8 = 'accordions.header';
+const StyledHeader = styled__default.default.div.attrs({
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledHeader",
+  componentId: "sc-2c6rbr-0"
+})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out;font-size:", ";&:hover{cursor:", ";}", " ", ";"], props => props.theme.fontSizes.md, props => (props.$isCollapsible || !props.$isExpanded) && 'pointer', props => reactTheming.focusStyles({
+  theme: props.theme,
+  inset: true,
+  selector: `&:has(${StyledButton}:focus-visible)`
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+StyledHeader.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
 const COMPONENT_ID$7 = 'accordions.step_inner_panel';
 const StyledInnerPanel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
-})(["overflow:hidden;line-height:inherit;font-size:inherit;", "[aria-hidden='true'] > &{transition:", ";visibility:hidden;}", "[aria-hidden='false'] > &{visibility:visible;}", ";"], StyledPanel, props => props.isAnimated && 'visibility 0s 0.25s', StyledPanel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["overflow:hidden;line-height:inherit;font-size:inherit;", "[aria-hidden='true'] > &{transition:", ";visibility:hidden;}", "[aria-hidden='false'] > &{visibility:visible;}", ";"], StyledPanel, props => props.$isAnimated && 'visibility 0s 0.25s', StyledPanel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledInnerPanel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$6 = 'accordions.rotate_icon';
-const colorStyles = props => {
-  const showColor = props.isCollapsible || !props.isRotated;
-  let color = reactTheming.getColor('neutralHue', 600, props.theme);
-  if (showColor && props.isHovered) {
-    color = reactTheming.getColor('primaryHue', 600, props.theme);
-  }
-  return styled.css(["color:", ";&:hover{color:", ";}"], color, showColor && color);
-};
-const StyledRotateIcon = styled__default.default(
-_ref => {
+const colorStyles$1 = _ref => {
   let {
-    children,
-    isRotated,
-    isHovered,
-    isCompact,
-    isCollapsible,
-    ...props
+    $isCollapsible,
+    $isHovered,
+    $isRotated,
+    theme
   } = _ref;
-  return React.cloneElement(React.Children.only(children), props);
-}).attrs({
+  const showColor = $isCollapsible || !$isRotated;
+  const color = reactTheming.getColor({
+    theme,
+    variable: showColor && $isHovered ? 'foreground.primary' : 'foreground.subtle'
+  });
+  return styled.css(["color:", ";&:hover{color:", ";}"], color, showColor && color);
+};
+const StyledRotateIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).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:", ";min-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, props => props.theme.iconSizes.md, colorStyles, props => reactTheming.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:", ";min-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, props => props.theme.iconSizes.md, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledRotateIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -328,7 +372,7 @@ StyledRotateIcon.defaultProps = {
 const COMPONENT_ID$5 = 'timeline';
 const StyledTimeline = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
@@ -340,11 +384,19 @@ StyledTimeline.defaultProps = {
 const COMPONENT_ID$4 = 'timeline.content.separator';
 const StyledSeparator = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
-})(["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} ${reactTheming.getColor('neutralHue', 600, props.theme)}`, props => reactTheming.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`, _ref => {
+  let {
+    theme
+  } = _ref;
+  return `${theme.borders.sm} ${reactTheming.getColor({
+    theme,
+    variable: 'border.emphasis'
+  })}`;
+}, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledSeparator.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -352,7 +404,7 @@ StyledSeparator.defaultProps = {
 const COMPONENT_ID$3 = 'timeline.content';
 const StyledTimelineContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
@@ -364,7 +416,7 @@ StyledTimelineContent.defaultProps = {
 const COMPONENT_ID$2 = 'timeline.opposite.content';
 const StyledOppositeContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
@@ -376,30 +428,46 @@ StyledOppositeContent.defaultProps = {
 const COMPONENT_ID$1 = 'timeline.item';
 const StyledTimelineItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
-})(["display:flex;position:relative;line-height:", ";color:", ";font-size:", ";&:last-of-type ", "::after{display:none;}", " ", " ", ";"], props => reactTheming.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 && styled.css(["&::before{flex:1;padding:", "px;content:'';}"], props.theme.space.base * 4), props => 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'), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["display:flex;position:relative;line-height:", ";color:", ";font-size:", ";&:last-of-type ", "::after{display:none;}", " ", " ", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+}, props => props.theme.fontSizes.md, StyledSeparator, props => !props.$hasOppositeContent && props.$isAlternate && styled.css(["&::before{flex:1;padding:", "px;content:'';}"], props.theme.space.base * 4), props => 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'), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledTimelineItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID = 'timeline.icon';
-const StyledItemIcon = styled__default.default(_ref => {
+const colorStyles = _ref => {
   let {
-    surfaceColor,
-    children,
-    ...props
+    $surfaceColor,
+    theme
   } = _ref;
-  return React.cloneElement(React.Children.only(children), props);
-}).attrs({
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const backgroundColor = $surfaceColor || reactTheming.getColor({
+    theme,
+    variable: 'background.default'
+  });
+  return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
+};
+const StyledItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
-})(["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 => polished.math(`${props.theme.iconSizes.sm} + 1`), props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => reactTheming.getColor('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["z-index:1;box-sizing:content-box;padding:", "px 0;width:", ";height:", ";", " ", ";"], props => props.theme.space.base, props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => polished.math(`${props.theme.iconSizes.sm} + 1`), colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -467,14 +535,14 @@ const useTimelineItemContext = () => {
   return context;
 };
 
-const SectionComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledSection, _extends$3({
+const SectionComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledSection, Object.assign({
   ref: ref
 }, props)));
 SectionComponent.displayName = 'Accordion.Section';
 const Section = SectionComponent;
 
 var _path$1;
-function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -492,8 +560,6 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
 const HeaderComponent = React.forwardRef((props, ref) => {
   const {
     onClick,
-    onFocus,
-    onBlur,
     onMouseOver,
     onMouseOut,
     role,
@@ -509,7 +575,6 @@ const HeaderComponent = React.forwardRef((props, ref) => {
     expandedSections
   } = useAccordionContext();
   const sectionValue = useSectionContext();
-  const [isFocused, setIsFocused] = React.useState(false);
   const [isHovered, setIsHovered] = React.useState(false);
   const isExpanded = expandedSections.includes(sectionValue);
   const {
@@ -520,41 +585,28 @@ const HeaderComponent = React.forwardRef((props, ref) => {
     type: 'button',
     value: sectionValue
   });
-  const onHeaderFocus = e => {
-    e.persist();
-    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);
-  };
   const value = React.useMemo(() => ({
     isHovered,
     otherTriggerProps
   }), [isHovered, otherTriggerProps]);
   return React__namespace.default.createElement(HeaderContext.Provider, {
     value: value
-  }, React__namespace.default.createElement(StyledHeader, _extends$3({
-    isCollapsible: isCollapsible,
-    isExpanded: isExpanded,
-    isFocused: isFocused
+  }, React__namespace.default.createElement(StyledHeader, Object.assign({
+    $isCollapsible: isCollapsible,
+    $isExpanded: isExpanded
   }, getHeaderProps({
     ref,
     'aria-level': ariaLevel,
     role: role === undefined || role === null ? role : 'heading',
     onClick: containerUtilities.composeEventHandlers(onClick, onTriggerClick),
-    onFocus: containerUtilities.composeEventHandlers(onFocus, onHeaderFocus),
-    onBlur: containerUtilities.composeEventHandlers(onBlur, () => setIsFocused(false)),
     onMouseOver: containerUtilities.composeEventHandlers(onMouseOver, () => setIsHovered(true)),
     onMouseOut: containerUtilities.composeEventHandlers(onMouseOut, () => setIsHovered(false)),
     ...other
   })), children, React__namespace.default.createElement(StyledRotateIcon, {
-    isCompact: isCompact,
-    isHovered: isHovered,
-    isRotated: isExpanded,
-    isCollapsible: isCollapsible,
+    $isCompact: isCompact,
+    $isHovered: isHovered,
+    $isRotated: isExpanded,
+    $isCollapsible: isCollapsible,
     onMouseOver: containerUtilities.composeEventHandlers(onMouseOver, () => setIsHovered(true)),
     onMouseOut: containerUtilities.composeEventHandlers(onMouseOut, () => setIsHovered(false))
   }, React__namespace.default.createElement(SvgChevronDownStroke, null))));
@@ -574,12 +626,12 @@ const LabelComponent$1 = React.forwardRef((props, ref) => {
     isHovered,
     otherTriggerProps
   } = useHeaderContext();
-  return React__namespace.default.createElement(StyledButton, _extends$3({
+  return React__namespace.default.createElement(StyledButton, Object.assign({
     ref: ref,
-    isCompact: isCompact,
-    isHovered: isHovered,
-    isExpanded: isExpanded,
-    isCollapsible: isCollapsible
+    $isCompact: isCompact,
+    $isHovered: isHovered,
+    $isExpanded: isExpanded,
+    $isCollapsible: isCollapsible
   }, otherTriggerProps, props));
 });
 LabelComponent$1.displayName = 'Accordion.Label';
@@ -600,19 +652,19 @@ const PanelComponent = React.forwardRef((_ref, ref) => {
   } = useAccordionContext();
   const sectionValue = useSectionContext();
   const isExpanded = expandedSections.includes(sectionValue);
-  return React__namespace.default.createElement(StyledPanel, _extends$3({
+  return React__namespace.default.createElement(StyledPanel, Object.assign({
     inert: isExpanded ? undefined : '',
-    isAnimated: isAnimated,
-    isBare: isBare,
-    isCompact: isCompact,
-    isExpanded: isExpanded
+    $isAnimated: isAnimated,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isExpanded: isExpanded
   }, getPanelProps({
     role: role === undefined ? null : 'region',
     ref,
     value: sectionValue,
     ...props
   })), React__namespace.default.createElement(StyledInnerPanel, {
-    isAnimated: isAnimated
+    $isAnimated: isAnimated
   }, children));
 });
 PanelComponent.displayName = 'Accordion.Panel';
@@ -672,7 +724,7 @@ const AccordionComponent = React.forwardRef((_ref, ref) => {
   }), [level, isBare, isCompact, isAnimated, isCollapsible, getPanelProps, getHeaderProps, getTriggerProps, expandedSections]);
   return React__namespace.default.createElement(AccordionContext.Provider, {
     value: accordionContextValue
-  }, React__namespace.default.createElement(StyledAccordion, _extends$3({
+  }, React__namespace.default.createElement(StyledAccordion, Object.assign({
     ref: ref
   }, props), sectionChildren));
 });
@@ -695,16 +747,16 @@ const StepComponent = React.forwardRef((_ref, ref) => {
   const {
     isHorizontal
   } = useStepperContext();
-  return React__namespace.default.createElement(StyledStep, _extends$3({
+  return React__namespace.default.createElement(StyledStep, Object.assign({
     ref: ref,
-    isHorizontal: isHorizontal
+    $isHorizontal: isHorizontal
   }, props), isHorizontal && React__namespace.default.createElement(StyledLine, null), children);
 });
 StepComponent.displayName = 'Stepper.Step';
 const Step = StepComponent;
 
 var _path;
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -740,16 +792,16 @@ const LabelComponent = React.forwardRef((_ref, ref) => {
   const numericStep = currentStepIndex + 1;
   const stepIcon = icon || numericStep;
   const styledIcon = React__namespace.default.createElement(StyledIcon, {
-    isActive: isActive,
-    isHorizontal: isHorizontal
+    $isActive: isActive,
+    $isHorizontal: isHorizontal
   }, isCompleted ? React__namespace.default.createElement(SvgCheckSmStroke, iconProps) : stepIcon);
-  return React__namespace.default.createElement(StyledLabel, _extends$3({
+  return React__namespace.default.createElement(StyledLabel, Object.assign({
     ref: ref,
-    isActive: isActive,
-    isHorizontal: isHorizontal
+    $isActive: isActive,
+    $isHorizontal: isHorizontal
   }, other), isHorizontal ? React__namespace.default.createElement(StyledIconFlexContainer, null, styledIcon) : styledIcon, React__namespace.default.createElement(StyledLabelText, {
-    isHidden: isHidden,
-    isHorizontal: isHorizontal
+    $isHidden: isHidden,
+    $isHorizontal: isHorizontal
   }, children));
 });
 LabelComponent.displayName = 'Stepper.Label';
@@ -765,9 +817,9 @@ const ContentComponent$1 = React.forwardRef((props, ref) => {
     isActive,
     isHorizontal
   } = useStepContext();
-  return isHorizontal === false ? React__namespace.default.createElement(StyledContent, _extends$3({
+  return isHorizontal === false ? React__namespace.default.createElement(StyledContent, Object.assign({
     ref: ref,
-    isActive: isActive
+    $isActive: isActive
   }, props), React__namespace.default.createElement(StyledInnerContent, {
     "aria-hidden": !isActive
   }, props.children)) : null;
@@ -789,9 +841,9 @@ const StepperComponent = React.forwardRef((_ref, ref) => {
   }), [activeIndex, isHorizontal]);
   return React__namespace.default.createElement(StepperContext.Provider, {
     value: stepperContext
-  }, React__namespace.default.createElement(StyledStepper, _extends$3({
+  }, React__namespace.default.createElement(StyledStepper, Object.assign({
     ref: ref,
-    isHorizontal: isHorizontal
+    $isHorizontal: isHorizontal
   }, props), React.useMemo(() => React.Children.toArray(children).filter(React.isValidElement).map((child, index) => React__namespace.default.createElement(StepContext.Provider, {
     key: index
     ,
@@ -812,7 +864,7 @@ Stepper.Content = Content$1;
 Stepper.Label = Label;
 Stepper.Step = Step;
 
-const OppositeContentComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledOppositeContent, _extends$3({
+const OppositeContentComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledOppositeContent, Object.assign({
   ref: ref
 }, props)));
 OppositeContentComponent.displayName = 'Timeline.OppositeContent';
@@ -841,17 +893,17 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
   });
   return React__namespace.default.createElement(TimelineItemContext.Provider, {
     value: value
-  }, React__namespace.default.createElement(StyledTimelineItem, _extends$3({
+  }, React__namespace.default.createElement(StyledTimelineItem, Object.assign({
     ref: ref,
-    isAlternate: isAlternate,
-    hasOppositeContent: hasOppositeContent
+    $isAlternate: isAlternate,
+    $hasOppositeContent: hasOppositeContent
   }, props)));
 });
 ItemComponent.displayName = 'Timeline.Item';
 const Item = ItemComponent;
 
 var _circle;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgCircleFullStroke = function SvgCircleFullStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -875,8 +927,8 @@ const ContentComponent = React.forwardRef((props, ref) => {
     surfaceColor
   } = useTimelineItemContext();
   return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledSeparator, null, React__namespace.default.createElement(StyledItemIcon, {
-    surfaceColor: surfaceColor
-  }, icon || React__namespace.default.createElement(SvgCircleFullStroke, null))), React__namespace.default.createElement(StyledTimelineContent, _extends$3({
+    $surfaceColor: surfaceColor
+  }, icon || React__namespace.default.createElement(SvgCircleFullStroke, null))), React__namespace.default.createElement(StyledTimelineContent, Object.assign({
     ref: ref
   }, props)));
 });
@@ -893,7 +945,7 @@ const TimelineComponent = React.forwardRef((_ref, ref) => {
   }), [isAlternate]);
   return React__namespace.default.createElement(TimelineContext.Provider, {
     value: value
-  }, React__namespace.default.createElement(StyledTimeline, _extends$3({
+  }, React__namespace.default.createElement(StyledTimeline, Object.assign({
     ref: ref
   }, props)));
 });