@zendeskgarden/react-accordions 9.12.2 → 9.12.4

package/dist/esm/elements/accordion/Accordion.js

@@ -39,20 +39,19 @@ import { Header } from './components/Header.js';
 import { Label } from './components/Label.js';
 import { Panel } from './components/Panel.js';
 
-const AccordionComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    isBare,
-    isCompact,
-    isAnimated = true,
-    isExpandable,
-    isCollapsible = true,
-    level,
-    onChange,
-    defaultExpandedSections,
-    expandedSections: controlledExpandedSections,
-    ...props
-  } = _ref;
+const AccordionComponent = forwardRef(({
+  children,
+  isBare,
+  isCompact,
+  isAnimated = true,
+  isExpandable,
+  isCollapsible = true,
+  level,
+  onChange,
+  defaultExpandedSections,
+  expandedSections: controlledExpandedSections,
+  ...props
+}, ref) => {
   const {
     sections,
     sectionChildren

package/dist/esm/elements/accordion/components/Label.js

@@ -34,7 +34,7 @@ import { useHeaderContext } from '../../../utils/useHeaderContext.js';
 import '../../../utils/useTimelineContext.js';
 import '../../../utils/useTimelineItemContext.js';
 
-const LabelComponent = forwardRef((props, ref) => {
+const LabelComponent$1 = forwardRef((props, ref) => {
   const sectionValue = useSectionContext();
   const {
     isCompact,
@@ -54,7 +54,7 @@ const LabelComponent = forwardRef((props, ref) => {
     $isCollapsible: isCollapsible
   }, otherTriggerProps, props));
 });
-LabelComponent.displayName = 'Accordion.Label';
-const Label = LabelComponent;
+LabelComponent$1.displayName = 'Accordion.Label';
+const Label$1 = LabelComponent$1;
 
-export { Label };
+export { Label$1 as Label };

package/dist/esm/elements/accordion/components/Panel.js

@@ -34,12 +34,11 @@ import '../../../styled/timeline/StyledContent.js';
 import '../../../styled/timeline/StyledOppositeContent.js';
 import '../../../styled/timeline/StyledSeparator.js';
 
-const PanelComponent = forwardRef((_ref, ref) => {
-  let {
-    role,
-    children,
-    ...props
-  } = _ref;
+const PanelComponent = forwardRef(({
+  role,
+  children,
+  ...props
+}, ref) => {
   const {
     isAnimated,
     isBare,

package/dist/esm/elements/stepper/Stepper.js

@@ -38,13 +38,12 @@ import { Label } from './components/Label.js';
 import { Content } from './components/Content.js';
 
 const DEFAULT_ACTIVE_INDEX = 0;
-const StepperComponent = forwardRef((_ref, ref) => {
-  let {
-    activeIndex = DEFAULT_ACTIVE_INDEX,
-    isHorizontal,
-    children,
-    ...props
-  } = _ref;
+const StepperComponent = forwardRef(({
+  activeIndex = DEFAULT_ACTIVE_INDEX,
+  isHorizontal,
+  children,
+  ...props
+}, ref) => {
   const stepperContext = useMemo(() => ({
     activeIndex,
     isHorizontal: isHorizontal || false

package/dist/esm/elements/stepper/components/Content.js

@@ -34,7 +34,7 @@ import '../../../utils/useHeaderContext.js';
 import '../../../utils/useTimelineContext.js';
 import '../../../utils/useTimelineItemContext.js';
 
-const ContentComponent = forwardRef((props, ref) => {
+const ContentComponent$1 = forwardRef((props, ref) => {
   const {
     isActive,
     isHorizontal
@@ -47,7 +47,7 @@ const ContentComponent = forwardRef((props, ref) => {
     inert: isActive ? undefined : ''
   }, props.children)) : null;
 });
-ContentComponent.displayName = 'Stepper.Content';
-const Content = ContentComponent;
+ContentComponent$1.displayName = 'Stepper.Content';
+const Content$1 = ContentComponent$1;
 
-export { Content };
+export { Content$1 as Content };

package/dist/esm/elements/stepper/components/Label.js

@@ -36,14 +36,13 @@ import '../../../utils/useHeaderContext.js';
 import '../../../utils/useTimelineContext.js';
 import '../../../utils/useTimelineItemContext.js';
 
-const LabelComponent = forwardRef((_ref, ref) => {
-  let {
-    icon,
-    iconProps,
-    isHidden,
-    children,
-    ...other
-  } = _ref;
+const LabelComponent = forwardRef(({
+  icon,
+  iconProps,
+  isHidden,
+  children,
+  ...other
+}, ref) => {
   const {
     currentStepIndex,
     isActive,

package/dist/esm/elements/stepper/components/Step.js

@@ -34,11 +34,10 @@ import '../../../utils/useHeaderContext.js';
 import '../../../utils/useTimelineContext.js';
 import '../../../utils/useTimelineItemContext.js';
 
-const StepComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref;
+const StepComponent = forwardRef(({
+  children,
+  ...props
+}, ref) => {
   const {
     isHorizontal
   } = useStepperContext();

package/dist/esm/elements/timeline/Timeline.js

@@ -37,11 +37,10 @@ import { Item } from './components/Item.js';
 import { Content } from './components/Content.js';
 import { OppositeContent } from './components/OppositeContent.js';
 
-const TimelineComponent = forwardRef((_ref, ref) => {
-  let {
-    isAlternate,
-    ...props
-  } = _ref;
+const TimelineComponent = forwardRef(({
+  isAlternate,
+  ...props
+}, ref) => {
   const value = useMemo(() => ({
     isAlternate
   }), [isAlternate]);

package/dist/esm/elements/timeline/components/Item.js

@@ -35,12 +35,11 @@ import '../../../utils/useHeaderContext.js';
 import { useTimelineContext } from '../../../utils/useTimelineContext.js';
 import { TimelineItemContext } from '../../../utils/useTimelineItemContext.js';
 
-const ItemComponent = forwardRef((_ref, ref) => {
-  let {
-    icon,
-    surfaceColor,
-    ...props
-  } = _ref;
+const ItemComponent = forwardRef(({
+  icon,
+  surfaceColor,
+  ...props
+}, ref) => {
   const value = useMemo(() => ({
     icon,
     surfaceColor

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-sm-stroke.svg.js

@@ -7,9 +7,9 @@
 import * as React from 'react';
 
 var _path;
-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); }
+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.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js

@@ -6,17 +6,17 @@
 */
 import * as React from 'react';
 
-var _path;
-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 _path$1;
+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.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, 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"
   })));

package/dist/esm/styled/accordion/StyledAccordion.js

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'accordions.accordion';
+const COMPONENT_ID$c = 'accordions.accordion';
 const StyledAccordion = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"

package/dist/esm/styled/accordion/StyledButton.js

@@ -7,14 +7,13 @@
 import styled, { css } from 'styled-components';
 import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'accordions.button';
-const colorStyles = _ref => {
-  let {
-    $isCollapsible,
-    $isExpanded,
-    $isHovered,
-    theme
-  } = _ref;
+const COMPONENT_ID$9 = 'accordions.button';
+const colorStyles$2 = ({
+  $isCollapsible,
+  $isExpanded,
+  $isHovered,
+  theme
+}) => {
   const showColor = $isCollapsible || !$isExpanded;
   const color = getColor({
     theme,
@@ -23,11 +22,11 @@ const colorStyles = _ref => {
   return css(["color:", ";&:hover{cursor:", ";color:", ";}"], color, showColor && 'pointer', showColor && color);
 };
 const StyledButton = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.12.4'
 }).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 => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles, props => (props.$isCollapsible || !props.$isExpanded) && 'pointer', componentStyles);
+})(["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$2, props => (props.$isCollapsible || !props.$isExpanded) && 'pointer', componentStyles);
 
-export { COMPONENT_ID, StyledButton };
+export { COMPONENT_ID$9 as COMPONENT_ID, StyledButton };

package/dist/esm/styled/accordion/StyledHeader.js

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { focusStyles, componentStyles } from '@zendeskgarden/react-theming';
 import { StyledButton } from './StyledButton.js';
 
-const COMPONENT_ID = 'accordions.header';
+const COMPONENT_ID$8 = 'accordions.header';
 const StyledHeader = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"

package/dist/esm/styled/accordion/StyledInnerPanel.js

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledPanel } from './StyledPanel.js';
 
-const COMPONENT_ID = 'accordions.step_inner_panel';
+const COMPONENT_ID$7 = 'accordions.step_inner_panel';
 const StyledInnerPanel = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"

package/dist/esm/styled/accordion/StyledPanel.js

@@ -5,14 +5,13 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { componentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'accordions.panel';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isBare
-  } = _ref;
+const COMPONENT_ID$b = 'accordions.panel';
+const colorStyles$3 = ({
+  theme,
+  $isBare
+}) => {
   return css(["border-bottom-color:", ";"], $isBare ? 'transparent' : getColor({
     theme,
     variable: 'border.default'
@@ -42,12 +41,12 @@ const sizeStyles = props => {
   return css(["grid-template-rows:", "fr;border-bottom:", ";padding:", "px ", "px ", "px;line-height:", ";font-size:", ";"], $isExpanded ? 1 : 0, theme.borders.sm, paddingTop, paddingHorizontal, paddingBottom, getLineHeight(base * 5, theme.fontSizes.md), theme.fontSizes.md);
 };
 const StyledPanel = styled.section.attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2',
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.12.4',
   $isAnimated: props.$isAnimated ?? true
 })).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, componentStyles);
+})(["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, componentStyles);
 
 export { StyledPanel };

package/dist/esm/styled/accordion/StyledRotateIcon.js

@@ -7,14 +7,13 @@
 import styled, { css } from 'styled-components';
 import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'accordions.rotate_icon';
-const colorStyles = _ref => {
-  let {
-    $isCollapsible,
-    $isHovered,
-    $isRotated,
-    theme
-  } = _ref;
+const COMPONENT_ID$6 = 'accordions.rotate_icon';
+const colorStyles$1 = ({
+  $isCollapsible,
+  $isHovered,
+  $isRotated,
+  theme
+}) => {
   const showColor = $isCollapsible || !$isRotated;
   const color = getColor({
     theme,
@@ -23,11 +22,11 @@ const colorStyles = _ref => {
   return css(["color:", ";&:hover{color:", ";}"], color, showColor && color);
 };
 const StyledRotateIcon = styled(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.12.4'
 }).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, componentStyles);
+})(["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, componentStyles);
 
 export { StyledRotateIcon };

package/dist/esm/styled/accordion/StyledSection.js

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledPanel } from './StyledPanel.js';
 
-const COMPONENT_ID = 'accordions.section';
+const COMPONENT_ID$a = 'accordions.section';
 const StyledSection = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"

package/dist/esm/styled/stepper/StyledContent.js

@@ -7,8 +7,8 @@
 import styled, { css } from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'accordions.step_content';
-const sizeStyles = props => {
+const COMPONENT_ID$k = 'accordions.step_content';
+const sizeStyles$2 = props => {
   const {
     rtl,
     space
@@ -22,11 +22,11 @@ const sizeStyles = props => {
   return css(["margin:", "px ", "px ", "px ", "px;padding:0 ", "px ", "px ", "px;min-width:", "px;height:auto;"], marginVertical, marginRight, marginVertical, marginLeft, paddingRight, paddingBottom, paddingLeft, space.base * 30);
 };
 const StyledContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.12.4'
 }).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, componentStyles);
+})(["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, componentStyles);
 
 export { StyledContent };

package/dist/esm/styled/stepper/StyledIcon.js

@@ -7,21 +7,20 @@
 import styled, { css } from 'styled-components';
 import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'accordions.step_icon';
+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%;"]);
-const sizeStyles = props => {
+const sizeStyles$1 = 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);
 };
-const colorStyles = _ref => {
-  let {
-    $isActive,
-    theme
-  } = _ref;
+const colorStyles$4 = ({
+  $isActive,
+  theme
+}) => {
   const foregroundColor = getColor({
     theme,
     variable: $isActive ? 'foreground.onEmphasis' : 'foreground.default'
@@ -45,11 +44,11 @@ const colorStyles = _ref => {
   return css(["background:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 const StyledIcon = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.12.4'
 }).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, componentStyles);
+})(["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, componentStyles);
 
 export { StyledIcon, StyledIconFlexContainer };

package/dist/esm/styled/stepper/StyledInnerContent.js

@@ -7,21 +7,18 @@
 import styled from 'styled-components';
 import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'accordions.step_inner_content';
+const COMPONENT_ID$h = 'accordions.step_inner_content';
 const StyledInnerContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
-})(["overflow:hidden;line-height:", ";color:", ";font-size:", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), _ref => {
-  let {
-    theme
-  } = _ref;
-  return getColor({
-    theme,
-    variable: 'foreground.default'
-  });
-}, props => props.theme.fontSizes.md, componentStyles);
+})(["overflow:hidden;line-height:", ";color:", ";font-size:", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), ({
+  theme
+}) => getColor({
+  theme,
+  variable: 'foreground.default'
+}), props => props.theme.fontSizes.md, componentStyles);
 
 export { StyledInnerContent };

package/dist/esm/styled/stepper/StyledLabel.js

@@ -7,22 +7,19 @@
 import styled from 'styled-components';
 import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'accordions.step_label';
+const COMPONENT_ID$e = 'accordions.step_label';
 const StyledLabel = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.12.4'
 }).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 => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), _ref => {
-  let {
-    $isActive,
-    theme
-  } = _ref;
-  return getColor({
-    theme,
-    variable: $isActive ? 'foreground.default' : 'foreground.subtle'
-  });
-}, props => props.theme.fontSizes.md, props => props.$isActive && 600, componentStyles);
+})(["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), ({
+  $isActive,
+  theme
+}) => getColor({
+  theme,
+  variable: $isActive ? 'foreground.default' : 'foreground.subtle'
+}), props => props.theme.fontSizes.md, props => props.$isActive && 600, componentStyles);
 
 export { StyledLabel };

package/dist/esm/styled/stepper/StyledLabelText.js

@@ -6,10 +6,10 @@
 */
 import styled from 'styled-components';
 
-const COMPONENT_ID = 'accordions.step_label_text';
+const COMPONENT_ID$d = 'accordions.step_label_text';
 const StyledLabelText = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"

package/dist/esm/styled/stepper/StyledLine.js

@@ -7,21 +7,18 @@
 import styled from 'styled-components';
 import { getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'accordions.step_line';
+const COMPONENT_ID$j = 'accordions.step_line';
 const StyledLine = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.12.4'
 }).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, _ref => {
-  let {
-    theme
-  } = _ref;
-  return getColor({
-    theme,
-    variable: 'border.default'
-  });
-});
+})(["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, ({
+  theme
+}) => getColor({
+  theme,
+  variable: 'border.default'
+}));
 
 export { StyledLine };

package/dist/esm/styled/stepper/StyledStep.js

@@ -9,21 +9,18 @@ import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 import { StyledContent } from './StyledContent.js';
 import { StyledLine } from './StyledLine.js';
 
-const COMPONENT_ID = 'accordions.step';
+const COMPONENT_ID$i = 'accordions.step';
 const StyledStep = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.12.4'
 }).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, _ref => {
-  let {
-    theme
-  } = _ref;
-  return getColor({
-    theme,
-    variable: 'border.default'
-  });
-}, componentStyles);
+})(["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, ({
+  theme
+}) => getColor({
+  theme,
+  variable: 'border.default'
+}), componentStyles);
 
 export { StyledStep };