@zendeskgarden/react-accordions 8.75.1 → 8.76.0

package/dist/index.esm.js

@@ -1,881 +0,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.
- */
-
-import * as React from 'react';
-import React__default, { cloneElement, Children, createContext, useContext, forwardRef, useState, useMemo, isValidElement } from 'react';
-import { useAccordion } from '@zendeskgarden/container-accordion';
-import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, getLineHeight, focusStyles } from '@zendeskgarden/react-theming';
-import { math } from 'polished';
-import { composeEventHandlers } from '@zendeskgarden/container-utilities';
-import PropTypes from 'prop-types';
-
-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 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$k,
-  'data-garden-version': '8.75.1'
-}).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 => retrieveComponentStyles(COMPONENT_ID$k, props));
-StyledContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$j = 'accordions.step_line';
-const StyledLine = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.75.1'
-}).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 => getColorV8('neutralHue', 300, props.theme));
-StyledLine.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$i = 'accordions.step';
-const StyledStep = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.75.1'
-}).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 => getColorV8('neutralHue', 300, props.theme), props => retrieveComponentStyles(COMPONENT_ID$i, props));
-StyledStep.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$h = 'accordions.step_inner_content';
-const StyledInnerContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.75.1'
-}).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), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$h, props));
-StyledInnerContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$g = 'accordions.stepper';
-const StyledStepper = styled.ol.attrs({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledStepper",
-  componentId: "sc-dsxw0f-0"
-})(["display:", ";margin:0;padding:0;list-style:none;", ";"], props => props.isHorizontal && 'flex', props => retrieveComponentStyles(COMPONENT_ID$g, props));
-StyledStepper.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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$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$3 = props => {
-  return css(["background:", ";color:", ";"], props.isActive ? getColorV8('neutralHue', 600, props.theme) : getColorV8('neutralHue', 200, props.theme), props.isActive ? getColorV8('background', 600 , props.theme) : getColorV8('foreground', 600 , props.theme));
-};
-const StyledIcon = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.75.1'
-}).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 => retrieveComponentStyles(COMPONENT_ID$f, props));
-StyledIconFlexContainer.defaultProps = {
-  theme: DEFAULT_THEME
-};
-StyledIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$e = 'accordions.step_label';
-const StyledLabel = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.75.1'
-}).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), props => props.isActive ? getColorV8('foreground', 600 , props.theme) : getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isActive && 600, props => retrieveComponentStyles(COMPONENT_ID$e, props));
-StyledLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$d = 'accordions.step_label_text';
-const StyledLabelText = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.75.1'
-}).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');
-StyledLabelText.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$c = 'accordions.accordion';
-const StyledAccordion = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledAccordion",
-  componentId: "sc-niv9ic-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$c, props));
-StyledAccordion.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$b = 'accordions.panel';
-const colorStyles$2 = props => {
-  const {
-    theme,
-    isBare
-  } = props;
-  return css(["border-bottom-color:", ";"], isBare ? 'transparent' : getColorV8('neutralHue', 300, theme));
-};
-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$b,
-  'data-garden-version': '8.75.1'
-}).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 => retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledPanel.defaultProps = {
-  isAnimated: true,
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$a = 'accordions.section';
-const StyledSection = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledSection",
-  componentId: "sc-v2t9bd-0"
-})(["&:last-child ", "{border:none;}", ";"], StyledPanel, props => retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledSection.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$9 = 'accordions.header';
-const StyledHeader = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.75.1'
-}).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,
-  condition: props.isFocused,
-  selector: '&:focus-within'
-}), props => retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledHeader.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$8 = 'accordions.button';
-const colorStyles$1 = props => {
-  const showColor = props.isCollapsible || !props.isExpanded;
-  let color = getColorV8('foreground', 600 , props.theme);
-  if (showColor && props.isHovered) {
-    color = getColorV8('primaryHue', 600, props.theme);
-  }
-  return css(["color:", ";&:hover{cursor:", ";color:", ";}"], color, showColor && 'pointer', showColor && color);
-};
-const StyledButton = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.75.1'
-}).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$1, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$7 = 'accordions.step_inner_panel';
-const StyledInnerPanel = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.75.1'
-}).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$7, props));
-StyledInnerPanel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$6 = 'accordions.rotate_icon';
-const colorStyles = props => {
-  const showColor = props.isCollapsible || !props.isRotated;
-  let color = getColorV8('neutralHue', 600, props.theme);
-  if (showColor && props.isHovered) {
-    color = getColorV8('primaryHue', 600, props.theme);
-  }
-  return css(["color:", ";&:hover{color:", ";}"], color, showColor && color);
-};
-const StyledRotateIcon = styled(
-_ref => {
-  let {
-    children,
-    isRotated,
-    isHovered,
-    isCompact,
-    isCollapsible,
-    ...props
-  } = _ref;
-  return cloneElement(Children.only(children), props);
-}).attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.75.1'
-}).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$6, props));
-StyledRotateIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = 'timeline';
-const StyledTimeline = styled.ol.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledTimeline",
-  componentId: "sc-pig5kv-0"
-})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledTimeline.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$4 = 'timeline.content.separator';
-const StyledSeparator = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.75.1'
-}).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} ${getColorV8('neutralHue', 600, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledSeparator.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'timeline.content';
-const StyledTimelineContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledContent__StyledTimelineContent",
-  componentId: "sc-19phgu1-0"
-})(["flex:1;padding:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledTimelineContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'timeline.opposite.content';
-const StyledOppositeContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledOppositeContent",
-  componentId: "sc-jurh2k-0"
-})(["flex:1;padding:", ";text-align:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => props.theme.rtl ? 'left' : 'right', props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledOppositeContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'timeline.item';
-const StyledTimelineItem = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledItem__StyledTimelineItem",
-  componentId: "sc-5mcnzm-0"
-})(["display:flex;position:relative;line-height:", ";color:", ";font-size:", ";&:last-of-type ", "::after{display:none;}", " ", " ", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, StyledSeparator, props => !props.hasOppositeContent && props.isAlternate && css(["&::before{flex:1;padding:", "px;content:'';}"], props.theme.space.base * 4), props => props.isAlternate && css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right'), props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledTimelineItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'timeline.icon';
-const StyledItemIcon = styled(_ref => {
-  let {
-    surfaceColor,
-    children,
-    ...props
-  } = _ref;
-  return cloneElement(Children.only(children), props);
-}).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.75.1'
-}).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 || getColorV8('background', 600 , props.theme), props => props.theme.space.base, props => math(`${props.theme.iconSizes.sm} + 1`), props => math(`${props.theme.iconSizes.sm} + 1`), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledItemIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const StepperContext = createContext(undefined);
-const useStepperContext = () => {
-  const context = useContext(StepperContext);
-  if (context === undefined) {
-    throw new Error('This component must be rendered within a Stepper component');
-  }
-  return context;
-};
-
-const StepContext = createContext(undefined);
-const useStepContext = () => {
-  const context = useContext(StepContext);
-  if (context === undefined) {
-    throw new Error('This component must be rendered within a Stepper component');
-  }
-  return context;
-};
-
-const AccordionContext = createContext(undefined);
-const useAccordionContext = () => {
-  const context = useContext(AccordionContext);
-  if (context === undefined) {
-    throw new Error('This component must be rendered within a Accordion component');
-  }
-  return context;
-};
-
-const SectionContext = createContext(undefined);
-const useSectionContext = () => {
-  const context = useContext(SectionContext);
-  if (context === undefined) {
-    throw new Error('This component must be rendered within an Accordion component');
-  }
-  return context;
-};
-
-const HeaderContext = createContext(undefined);
-const useHeaderContext = () => {
-  const context = useContext(HeaderContext);
-  if (context === undefined) {
-    throw new Error('This component must be rendered within a Accordion.Header component');
-  }
-  return context;
-};
-
-const TimelineContext = createContext(undefined);
-const useTimelineContext = () => {
-  const context = useContext(TimelineContext);
-  if (context === undefined) {
-    throw new Error('This component must be rendered within a Timeline component');
-  }
-  return context;
-};
-
-const TimelineItemContext = createContext(undefined);
-const useTimelineItemContext = () => {
-  const context = useContext(TimelineItemContext);
-  if (context === undefined) {
-    throw new Error('This component must be rendered within a Timeline.Item component');
-  }
-  return context;
-};
-
-const SectionComponent = forwardRef((props, ref) => React__default.createElement(StyledSection, _extends$3({
-  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); }
-var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  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$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"
-  })));
-};
-
-const HeaderComponent = forwardRef((props, ref) => {
-  const {
-    onClick,
-    onFocus,
-    onBlur,
-    onMouseOver,
-    onMouseOut,
-    role,
-    children,
-    ...other
-  } = props;
-  const {
-    level: ariaLevel,
-    isCompact,
-    isCollapsible,
-    getHeaderProps,
-    getTriggerProps,
-    expandedSections
-  } = useAccordionContext();
-  const sectionValue = useSectionContext();
-  const [isFocused, setIsFocused] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const isExpanded = expandedSections.includes(sectionValue);
-  const {
-    onClick: onTriggerClick,
-    onKeyDown,
-    ...otherTriggerProps
-  } = getTriggerProps({
-    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 = useMemo(() => ({
-    isHovered,
-    otherTriggerProps
-  }), [isHovered, otherTriggerProps]);
-  return React__default.createElement(HeaderContext.Provider, {
-    value: value
-  }, React__default.createElement(StyledHeader, _extends$3({
-    isCollapsible: isCollapsible,
-    isExpanded: isExpanded,
-    isFocused: isFocused
-  }, getHeaderProps({
-    ref,
-    'aria-level': ariaLevel,
-    role: role === undefined || role === null ? role : 'heading',
-    onClick: composeEventHandlers(onClick, onTriggerClick),
-    onFocus: composeEventHandlers(onFocus, onHeaderFocus),
-    onBlur: composeEventHandlers(onBlur, () => setIsFocused(false)),
-    onMouseOver: composeEventHandlers(onMouseOver, () => setIsHovered(true)),
-    onMouseOut: composeEventHandlers(onMouseOut, () => setIsHovered(false)),
-    ...other
-  })), children, React__default.createElement(StyledRotateIcon, {
-    isCompact: isCompact,
-    isHovered: isHovered,
-    isRotated: isExpanded,
-    isCollapsible: isCollapsible,
-    onMouseOver: composeEventHandlers(onMouseOver, () => setIsHovered(true)),
-    onMouseOut: composeEventHandlers(onMouseOut, () => setIsHovered(false))
-  }, React__default.createElement(SvgChevronDownStroke, null))));
-});
-HeaderComponent.displayName = 'Accordion.Header';
-const Header = HeaderComponent;
-
-const LabelComponent$1 = forwardRef((props, ref) => {
-  const sectionValue = useSectionContext();
-  const {
-    isCompact,
-    isCollapsible,
-    expandedSections
-  } = useAccordionContext();
-  const isExpanded = expandedSections.includes(sectionValue);
-  const {
-    isHovered,
-    otherTriggerProps
-  } = useHeaderContext();
-  return React__default.createElement(StyledButton, _extends$3({
-    ref: ref,
-    isCompact: isCompact,
-    isHovered: isHovered,
-    isExpanded: isExpanded,
-    isCollapsible: isCollapsible
-  }, otherTriggerProps, props));
-});
-LabelComponent$1.displayName = 'Accordion.Label';
-const Label$1 = LabelComponent$1;
-
-const PanelComponent = forwardRef((_ref, ref) => {
-  let {
-    role,
-    children,
-    ...props
-  } = _ref;
-  const {
-    isAnimated,
-    isBare,
-    isCompact,
-    expandedSections,
-    getPanelProps
-  } = useAccordionContext();
-  const sectionValue = useSectionContext();
-  const isExpanded = expandedSections.includes(sectionValue);
-  return React__default.createElement(StyledPanel, _extends$3({
-    inert: isExpanded ? undefined : '',
-    isAnimated: isAnimated,
-    isBare: isBare,
-    isCompact: isCompact,
-    isExpanded: isExpanded
-  }, getPanelProps({
-    role: role === undefined ? null : 'region',
-    ref,
-    value: sectionValue,
-    ...props
-  })), React__default.createElement(StyledInnerPanel, {
-    isAnimated: isAnimated
-  }, children));
-});
-PanelComponent.displayName = 'Accordion.Panel';
-const Panel = PanelComponent;
-
-const AccordionComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    isBare,
-    isCompact,
-    isAnimated,
-    isExpandable,
-    isCollapsible,
-    level,
-    onChange,
-    defaultExpandedSections,
-    expandedSections: controlledExpandedSections,
-    ...props
-  } = _ref;
-  const {
-    sections,
-    sectionChildren
-  } = useMemo(() => Children.toArray(children).filter(isValidElement).map((child, index) => React__default.createElement(SectionContext.Provider, {
-    key: index,
-    value: index
-  }, child)).reduce((acc, child, index) => {
-    acc.sectionChildren.push(child);
-    acc.sections.push(index);
-    return acc;
-  }, {
-    sectionChildren: [],
-    sections: []
-  }), [children]);
-  const {
-    expandedSections,
-    getHeaderProps,
-    getTriggerProps,
-    getPanelProps
-  } = useAccordion({
-    sections,
-    defaultExpandedSections,
-    expandedSections: controlledExpandedSections,
-    collapsible: isCollapsible,
-    expandable: isExpandable || false,
-    onChange
-  });
-  const accordionContextValue = useMemo(() => ({
-    level,
-    isBare,
-    isCompact,
-    isAnimated,
-    isCollapsible,
-    getPanelProps,
-    getHeaderProps,
-    getTriggerProps,
-    expandedSections
-  }), [level, isBare, isCompact, isAnimated, isCollapsible, getPanelProps, getHeaderProps, getTriggerProps, expandedSections]);
-  return React__default.createElement(AccordionContext.Provider, {
-    value: accordionContextValue
-  }, React__default.createElement(StyledAccordion, _extends$3({
-    ref: ref
-  }, props), sectionChildren));
-});
-AccordionComponent.displayName = 'Accordion';
-AccordionComponent.defaultProps = {
-  isAnimated: true,
-  isCollapsible: true
-};
-const Accordion = AccordionComponent;
-Accordion.Header = Header;
-Accordion.Label = Label$1;
-Accordion.Panel = Panel;
-Accordion.Section = Section;
-
-const StepComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  const {
-    isHorizontal
-  } = useStepperContext();
-  return React__default.createElement(StyledStep, _extends$3({
-    ref: ref,
-    isHorizontal: isHorizontal
-  }, props), isHorizontal && React__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); }
-var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    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"
-  })));
-};
-
-const LabelComponent = forwardRef((_ref, ref) => {
-  let {
-    icon,
-    iconProps,
-    isHidden,
-    children,
-    ...other
-  } = _ref;
-  const {
-    currentStepIndex,
-    isActive,
-    isCompleted,
-    isHorizontal
-  } = useStepContext();
-  const numericStep = currentStepIndex + 1;
-  const stepIcon = icon || numericStep;
-  const styledIcon = React__default.createElement(StyledIcon, {
-    isActive: isActive,
-    isHorizontal: isHorizontal
-  }, isCompleted ? React__default.createElement(SvgCheckSmStroke, iconProps) : stepIcon);
-  return React__default.createElement(StyledLabel, _extends$3({
-    ref: ref,
-    isActive: isActive,
-    isHorizontal: isHorizontal
-  }, other), isHorizontal ? React__default.createElement(StyledIconFlexContainer, null, styledIcon) : styledIcon, React__default.createElement(StyledLabelText, {
-    isHidden: isHidden,
-    isHorizontal: isHorizontal
-  }, children));
-});
-LabelComponent.displayName = 'Stepper.Label';
-LabelComponent.propTypes = {
-  icon: PropTypes.any,
-  iconProps: PropTypes.object,
-  isHidden: PropTypes.bool
-};
-const Label = LabelComponent;
-
-const ContentComponent$1 = forwardRef((props, ref) => {
-  const {
-    isActive,
-    isHorizontal
-  } = useStepContext();
-  return isHorizontal === false ? React__default.createElement(StyledContent, _extends$3({
-    ref: ref,
-    isActive: isActive
-  }, props), React__default.createElement(StyledInnerContent, {
-    "aria-hidden": !isActive
-  }, props.children)) : null;
-});
-ContentComponent$1.displayName = 'Stepper.Content';
-const Content$1 = ContentComponent$1;
-
-const DEFAULT_ACTIVE_INDEX = 0;
-const StepperComponent = forwardRef((_ref, ref) => {
-  let {
-    activeIndex = DEFAULT_ACTIVE_INDEX,
-    isHorizontal,
-    children,
-    ...props
-  } = _ref;
-  const stepperContext = useMemo(() => ({
-    activeIndex,
-    isHorizontal: isHorizontal || false
-  }), [activeIndex, isHorizontal]);
-  return React__default.createElement(StepperContext.Provider, {
-    value: stepperContext
-  }, React__default.createElement(StyledStepper, _extends$3({
-    ref: ref,
-    isHorizontal: isHorizontal
-  }, props), useMemo(() => Children.toArray(children).filter(isValidElement).map((child, index) => React__default.createElement(StepContext.Provider, {
-    key: index
-    ,
-    value: {
-      currentStepIndex: index,
-      isActive: stepperContext.activeIndex === index,
-      isCompleted: stepperContext.activeIndex > index,
-      isHorizontal: stepperContext.isHorizontal
-    }
-  }, child)), [children, stepperContext])));
-});
-StepperComponent.displayName = 'Stepper';
-StepperComponent.defaultProps = {
-  activeIndex: DEFAULT_ACTIVE_INDEX
-};
-const Stepper = StepperComponent;
-Stepper.Content = Content$1;
-Stepper.Label = Label;
-Stepper.Step = Step;
-
-const OppositeContentComponent = forwardRef((props, ref) => React__default.createElement(StyledOppositeContent, _extends$3({
-  ref: ref
-}, props)));
-OppositeContentComponent.displayName = 'Timeline.OppositeContent';
-const OppositeContent = OppositeContentComponent;
-
-const ItemComponent = forwardRef((_ref, ref) => {
-  let {
-    icon,
-    surfaceColor,
-    ...props
-  } = _ref;
-  const value = useMemo(() => ({
-    icon,
-    surfaceColor
-  }), [icon, surfaceColor]);
-  const {
-    isAlternate
-  } = useTimelineContext();
-  let hasOppositeContent = false;
-  Children.forEach(props.children, child => {
-    if (child) {
-      if (child.type === OppositeContent) {
-        hasOppositeContent = true;
-      }
-    }
-  });
-  return React__default.createElement(TimelineItemContext.Provider, {
-    value: value
-  }, React__default.createElement(StyledTimelineItem, _extends$3({
-    ref: ref,
-    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); }
-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"
-  })));
-};
-
-const ContentComponent = forwardRef((props, ref) => {
-  const {
-    icon,
-    surfaceColor
-  } = useTimelineItemContext();
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledSeparator, null, React__default.createElement(StyledItemIcon, {
-    surfaceColor: surfaceColor
-  }, icon || React__default.createElement(SvgCircleFullStroke, null))), React__default.createElement(StyledTimelineContent, _extends$3({
-    ref: ref
-  }, props)));
-});
-ContentComponent.displayName = 'Timeline.Content';
-const Content = ContentComponent;
-
-const TimelineComponent = forwardRef((_ref, ref) => {
-  let {
-    isAlternate,
-    ...props
-  } = _ref;
-  const value = useMemo(() => ({
-    isAlternate
-  }), [isAlternate]);
-  return React__default.createElement(TimelineContext.Provider, {
-    value: value
-  }, React__default.createElement(StyledTimeline, _extends$3({
-    ref: ref
-  }, props)));
-});
-TimelineComponent.displayName = 'Timeline';
-const Timeline = TimelineComponent;
-Timeline.Content = Content;
-Timeline.Item = Item;
-Timeline.OppositeContent = OppositeContent;
-
-export { Accordion, Stepper, Timeline };