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

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

@@ -0,0 +1,60 @@
+/**
+* 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.
+*/
+import React__default, { forwardRef, useMemo } from 'react';
+import '../../utils/useStepperContext.js';
+import '../../utils/useStepContext.js';
+import '../../utils/useAccordionContext.js';
+import '../../utils/useSectionContext.js';
+import '../../utils/useHeaderContext.js';
+import { TimelineContext } from '../../utils/useTimelineContext.js';
+import '../../utils/useTimelineItemContext.js';
+import '../../styled/stepper/StyledStep.js';
+import '../../styled/stepper/StyledContent.js';
+import '../../styled/stepper/StyledInnerContent.js';
+import '../../styled/stepper/StyledLine.js';
+import '../../styled/stepper/StyledStepper.js';
+import '../../styled/stepper/StyledIcon.js';
+import '../../styled/stepper/StyledLabel.js';
+import '../../styled/stepper/StyledLabelText.js';
+import '../../styled/accordion/StyledAccordion.js';
+import '../../styled/accordion/StyledSection.js';
+import '../../styled/accordion/StyledHeader.js';
+import '../../styled/accordion/StyledButton.js';
+import '../../styled/accordion/StyledPanel.js';
+import '../../styled/accordion/StyledInnerPanel.js';
+import '../../styled/accordion/StyledRotateIcon.js';
+import { StyledTimeline } from '../../styled/timeline/StyledTimeline.js';
+import '../../styled/timeline/StyledItem.js';
+import '../../styled/timeline/StyledItemIcon.js';
+import '../../styled/timeline/StyledContent.js';
+import '../../styled/timeline/StyledOppositeContent.js';
+import '../../styled/timeline/StyledSeparator.js';
+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 value = useMemo(() => ({
+    isAlternate
+  }), [isAlternate]);
+  return React__default.createElement(TimelineContext.Provider, {
+    value: value
+  }, React__default.createElement(StyledTimeline, Object.assign({
+    ref: ref
+  }, props)));
+});
+TimelineComponent.displayName = 'Timeline';
+const Timeline = TimelineComponent;
+Timeline.Content = Content;
+Timeline.Item = Item;
+Timeline.OppositeContent = OppositeContent;
+
+export { Timeline };

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

@@ -0,0 +1,52 @@
+/**
+* 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.
+*/
+import React__default, { forwardRef } from 'react';
+import SvgCircleFullStroke from '../../../node_modules/@zendeskgarden/svg-icons/src/12/circle-full-stroke.svg.js';
+import '../../../styled/stepper/StyledStep.js';
+import '../../../styled/stepper/StyledContent.js';
+import '../../../styled/stepper/StyledInnerContent.js';
+import '../../../styled/stepper/StyledLine.js';
+import '../../../styled/stepper/StyledStepper.js';
+import '../../../styled/stepper/StyledIcon.js';
+import '../../../styled/stepper/StyledLabel.js';
+import '../../../styled/stepper/StyledLabelText.js';
+import '../../../styled/accordion/StyledAccordion.js';
+import '../../../styled/accordion/StyledSection.js';
+import '../../../styled/accordion/StyledHeader.js';
+import '../../../styled/accordion/StyledButton.js';
+import '../../../styled/accordion/StyledPanel.js';
+import '../../../styled/accordion/StyledInnerPanel.js';
+import '../../../styled/accordion/StyledRotateIcon.js';
+import '../../../styled/timeline/StyledTimeline.js';
+import '../../../styled/timeline/StyledItem.js';
+import { StyledItemIcon } from '../../../styled/timeline/StyledItemIcon.js';
+import { StyledTimelineContent } from '../../../styled/timeline/StyledContent.js';
+import '../../../styled/timeline/StyledOppositeContent.js';
+import { StyledSeparator } from '../../../styled/timeline/StyledSeparator.js';
+import '../../../utils/useStepperContext.js';
+import '../../../utils/useStepContext.js';
+import '../../../utils/useAccordionContext.js';
+import '../../../utils/useSectionContext.js';
+import '../../../utils/useHeaderContext.js';
+import '../../../utils/useTimelineContext.js';
+import { useTimelineItemContext } from '../../../utils/useTimelineItemContext.js';
+
+const ContentComponent = forwardRef((props, ref) => {
+  const {
+    icon,
+    surfaceColor
+  } = useTimelineItemContext();
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledSeparator, null, React__default.createElement(StyledItemIcon, {
+    $surfaceColor: surfaceColor
+  }, icon || React__default.createElement(SvgCircleFullStroke, null))), React__default.createElement(StyledTimelineContent, Object.assign({
+    ref: ref
+  }, props)));
+});
+ContentComponent.displayName = 'Timeline.Content';
+const Content = ContentComponent;
+
+export { Content };

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

@@ -0,0 +1,70 @@
+/**
+* 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.
+*/
+import React__default, { forwardRef, useMemo, Children } from 'react';
+import { OppositeContent } from './OppositeContent.js';
+import '../../../styled/stepper/StyledStep.js';
+import '../../../styled/stepper/StyledContent.js';
+import '../../../styled/stepper/StyledInnerContent.js';
+import '../../../styled/stepper/StyledLine.js';
+import '../../../styled/stepper/StyledStepper.js';
+import '../../../styled/stepper/StyledIcon.js';
+import '../../../styled/stepper/StyledLabel.js';
+import '../../../styled/stepper/StyledLabelText.js';
+import '../../../styled/accordion/StyledAccordion.js';
+import '../../../styled/accordion/StyledSection.js';
+import '../../../styled/accordion/StyledHeader.js';
+import '../../../styled/accordion/StyledButton.js';
+import '../../../styled/accordion/StyledPanel.js';
+import '../../../styled/accordion/StyledInnerPanel.js';
+import '../../../styled/accordion/StyledRotateIcon.js';
+import '../../../styled/timeline/StyledTimeline.js';
+import { StyledTimelineItem } from '../../../styled/timeline/StyledItem.js';
+import '../../../styled/timeline/StyledItemIcon.js';
+import '../../../styled/timeline/StyledContent.js';
+import '../../../styled/timeline/StyledOppositeContent.js';
+import '../../../styled/timeline/StyledSeparator.js';
+import '../../../utils/useStepperContext.js';
+import '../../../utils/useStepContext.js';
+import '../../../utils/useAccordionContext.js';
+import '../../../utils/useSectionContext.js';
+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 value = useMemo(() => ({
+    icon,
+    surfaceColor
+  }), [icon, surfaceColor]);
+  const {
+    isAlternate
+  } = useTimelineContext();
+  let hasOppositeContent = false;
+  Children.forEach(props.children, child => {
+    if (child) {
+      if (child.type === OppositeContent) {
+        hasOppositeContent = true;
+      }
+    }
+  });
+  return React__default.createElement(TimelineItemContext.Provider, {
+    value: value
+  }, React__default.createElement(StyledTimelineItem, Object.assign({
+    ref: ref,
+    $isAlternate: isAlternate,
+    $hasOppositeContent: hasOppositeContent
+  }, props)));
+});
+ItemComponent.displayName = 'Timeline.Item';
+const Item = ItemComponent;
+
+export { Item };

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

@@ -0,0 +1,36 @@
+/**
+* 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.
+*/
+import React__default, { forwardRef } from 'react';
+import '../../../styled/stepper/StyledStep.js';
+import '../../../styled/stepper/StyledContent.js';
+import '../../../styled/stepper/StyledInnerContent.js';
+import '../../../styled/stepper/StyledLine.js';
+import '../../../styled/stepper/StyledStepper.js';
+import '../../../styled/stepper/StyledIcon.js';
+import '../../../styled/stepper/StyledLabel.js';
+import '../../../styled/stepper/StyledLabelText.js';
+import '../../../styled/accordion/StyledAccordion.js';
+import '../../../styled/accordion/StyledSection.js';
+import '../../../styled/accordion/StyledHeader.js';
+import '../../../styled/accordion/StyledButton.js';
+import '../../../styled/accordion/StyledPanel.js';
+import '../../../styled/accordion/StyledInnerPanel.js';
+import '../../../styled/accordion/StyledRotateIcon.js';
+import '../../../styled/timeline/StyledTimeline.js';
+import '../../../styled/timeline/StyledItem.js';
+import '../../../styled/timeline/StyledItemIcon.js';
+import '../../../styled/timeline/StyledContent.js';
+import { StyledOppositeContent } from '../../../styled/timeline/StyledOppositeContent.js';
+import '../../../styled/timeline/StyledSeparator.js';
+
+const OppositeContentComponent = forwardRef((props, ref) => React__default.createElement(StyledOppositeContent, Object.assign({
+  ref: ref
+}, props)));
+OppositeContentComponent.displayName = 'Timeline.OppositeContent';
+const OppositeContent = OppositeContentComponent;
+
+export { OppositeContent };

package/dist/esm/index.js

@@ -0,0 +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.
+*/
+export { Accordion } from './elements/accordion/Accordion.js';
+export { Stepper } from './elements/stepper/Stepper.js';
+export { Timeline } from './elements/timeline/Timeline.js';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/circle-full-stroke.svg.js

@@ -0,0 +1,28 @@
+/**
+* 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.
+*/
+import * as React from 'react';
+
+var _circle;
+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.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 6,
+    cy: 6,
+    r: 4.5,
+    fill: "none",
+    stroke: "currentColor"
+  })));
+};
+
+export { SvgCircleFullStroke as default };

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

@@ -0,0 +1,29 @@
+/**
+* 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.
+*/
+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 SvgCheckSmStroke = function SvgCheckSmStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    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", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.25,
+    d: "M3 9l3 3 7-7"
+  })));
+};
+
+export { SvgCheckSmStroke as default };

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

@@ -0,0 +1,25 @@
+/**
+* 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.
+*/
+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 SvgChevronDownStroke = function SvgChevronDownStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    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", {
+    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"
+  })));
+};
+
+export { SvgChevronDownStroke as default };

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

@@ -0,0 +1,22 @@
+/**
+* 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.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'accordions.accordion';
+const StyledAccordion = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledAccordion",
+  componentId: "sc-niv9ic-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledAccordion.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledAccordion };

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

@@ -0,0 +1,36 @@
+/**
+* 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.
+*/
+import styled, { css } from 'styled-components';
+import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'accordions.button';
+const colorStyles = _ref => {
+  let {
+    $isCollapsible,
+    $isExpanded,
+    $isHovered,
+    theme
+  } = _ref;
+  const showColor = $isCollapsible || !$isExpanded;
+  const color = getColor({
+    theme,
+    variable: showColor && $isHovered ? 'foreground.primary' : 'foreground.default'
+  });
+  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.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 => 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', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { COMPONENT_ID, StyledButton };

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

@@ -0,0 +1,27 @@
+/**
+* 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.
+*/
+import styled from 'styled-components';
+import { focusStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledButton } from './StyledButton.js';
+
+const COMPONENT_ID = 'accordions.header';
+const StyledHeader = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  '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 => focusStyles({
+  theme: props.theme,
+  inset: true,
+  selector: `&:has(${StyledButton}:focus-visible)`
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeader };

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

@@ -0,0 +1,23 @@
+/**
+* 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.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledPanel } from './StyledPanel.js';
+
+const COMPONENT_ID = 'accordions.step_inner_panel';
+const StyledInnerPanel = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  '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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledInnerPanel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledInnerPanel };

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

@@ -0,0 +1,56 @@
+/**
+* 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.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'accordions.panel';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isBare
+  } = _ref;
+  return css(["border-bottom-color:", ";"], $isBare ? 'transparent' : getColor({
+    theme,
+    variable: 'border.default'
+  }));
+};
+const sizeStyles = props => {
+  const {
+    theme,
+    $isCompact,
+    $isExpanded
+  } = props;
+  const {
+    base
+  } = theme.space;
+  let paddingTop = base * 2;
+  let paddingHorizontal = base * 5;
+  let paddingBottom = base * 8;
+  if ($isCompact) {
+    paddingTop = base * 2;
+    paddingHorizontal = base * 3;
+    paddingBottom = base * 4;
+  }
+  if ($isExpanded === false) {
+    paddingTop = 0;
+    paddingBottom = 0;
+  }
+  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({
+  'data-garden-id': COMPONENT_ID,
+  '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, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPanel.defaultProps = {
+  $isAnimated: true,
+  theme: DEFAULT_THEME
+};
+
+export { StyledPanel };

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

@@ -0,0 +1,36 @@
+/**
+* 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.
+*/
+import styled, { css } from 'styled-components';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'accordions.rotate_icon';
+const colorStyles = _ref => {
+  let {
+    $isCollapsible,
+    $isHovered,
+    $isRotated,
+    theme
+  } = _ref;
+  const showColor = $isCollapsible || !$isRotated;
+  const color = getColor({
+    theme,
+    variable: showColor && $isHovered ? 'foreground.primary' : 'foreground.subtle'
+  });
+  return css(["color:", ";&:hover{color:", ";}"], color, showColor && color);
+};
+const StyledRotateIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  '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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledRotateIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledRotateIcon };

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

@@ -0,0 +1,23 @@
+/**
+* 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.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledPanel } from './StyledPanel.js';
+
+const COMPONENT_ID = 'accordions.section';
+const StyledSection = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledSection",
+  componentId: "sc-v2t9bd-0"
+})(["&:last-child ", "{border:none;}", ";"], StyledPanel, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSection.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSection };

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

@@ -0,0 +1,35 @@
+/**
+* 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.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'accordions.step_content';
+const sizeStyles = props => {
+  const {
+    rtl,
+    space
+  } = props.theme;
+  const paddingBottom = props.$isActive ? space.base * 8 : space.base * 6;
+  const paddingRight = rtl ? space.base * 6 : space.base * 5;
+  const paddingLeft = rtl ? space.base * 5 : space.base * 6;
+  const marginRight = rtl ? space.base * 3 : '0';
+  const marginLeft = rtl ? '0' : space.base * 3;
+  const marginVertical = space.base * 3;
+  return css(["margin:", "px ", "px ", "px ", "px;padding:0 ", "px ", "px ", "px;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.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, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledContent };

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

@@ -0,0 +1,61 @@
+/**
+* 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.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = '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 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 foregroundColor = getColor({
+    theme,
+    variable: $isActive ? 'foreground.onEmphasis' : 'foreground.default'
+  });
+  const backgroundColor = $isActive ? getColor({
+    theme,
+    variable: 'background.emphasis',
+    dark: {
+      offset: -300
+    }
+  }) : getColor({
+    theme,
+    variable: 'background.subtle',
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 100
+    }
+  });
+  return css(["background:", ";color:", ";"], backgroundColor, foregroundColor);
+};
+const StyledIcon = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  '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, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledIconFlexContainer.defaultProps = {
+  theme: DEFAULT_THEME
+};
+StyledIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledIcon, StyledIconFlexContainer };