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

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

@@ -0,0 +1,30 @@
+/**
+* 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 { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'accordions.step_inner_content';
+const StyledInnerContent = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).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, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledInnerContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledInnerContent };

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

@@ -0,0 +1,31 @@
+/**
+* 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 { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'accordions.step_label';
+const StyledLabel = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  '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 => 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, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLabel };

package/dist/esm/styled/stepper/StyledLabelText.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 { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'accordions.step_label_text';
+const StyledLabelText = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  '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');
+StyledLabelText.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLabelText };

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

@@ -0,0 +1,30 @@
+/**
+* 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 { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'accordions.step_line';
+const StyledLine = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  '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, _ref => {
+  let {
+    theme
+  } = _ref;
+  return getColor({
+    theme,
+    variable: 'border.default'
+  });
+});
+StyledLine.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLine };

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

@@ -0,0 +1,32 @@
+/**
+* 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 { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledContent } from './StyledContent.js';
+import { StyledLine } from './StyledLine.js';
+
+const COMPONENT_ID = 'accordions.step';
+const StyledStep = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  '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, _ref => {
+  let {
+    theme
+  } = _ref;
+  return getColor({
+    theme,
+    variable: 'border.default'
+  });
+}, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledStep.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledStep };

package/dist/esm/styled/stepper/StyledStepper.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.stepper';
+const StyledStepper = styled.ol.attrs({
+  'data-garden-id': COMPONENT_ID,
+  '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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledStepper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledStepper };

package/dist/esm/styled/timeline/StyledContent.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 = 'timeline.content';
+const StyledTimelineContent = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).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, props));
+StyledTimelineContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTimelineContent };

package/dist/esm/styled/timeline/StyledItem.js

@@ -0,0 +1,33 @@
+/**
+* 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, getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledSeparator } from './StyledSeparator.js';
+import { StyledTimelineContent } from './StyledContent.js';
+import { StyledOppositeContent } from './StyledOppositeContent.js';
+
+const COMPONENT_ID = 'timeline.item';
+const StyledTimelineItem = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  '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 => 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, 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, props));
+StyledTimelineItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTimelineItem };

package/dist/esm/styled/timeline/StyledItemIcon.js

@@ -0,0 +1,38 @@
+/**
+* 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 { math } from 'polished';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'timeline.icon';
+const colorStyles = _ref => {
+  let {
+    $surfaceColor,
+    theme
+  } = _ref;
+  const foregroundColor = getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const backgroundColor = $surfaceColor || getColor({
+    theme,
+    variable: 'background.default'
+  });
+  return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
+};
+const StyledItemIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledItemIcon",
+  componentId: "sc-vz2l6e-0"
+})(["z-index:1;box-sizing:content-box;padding:", "px 0;width:", ";height:", ";", " ", ";"], props => props.theme.space.base, props => math(`${props.theme.iconSizes.sm} + 1`), props => math(`${props.theme.iconSizes.sm} + 1`), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledItemIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledItemIcon };

package/dist/esm/styled/timeline/StyledOppositeContent.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 = 'timeline.opposite.content';
+const StyledOppositeContent = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).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, props));
+StyledOppositeContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledOppositeContent };

package/dist/esm/styled/timeline/StyledSeparator.js

@@ -0,0 +1,30 @@
+/**
+* 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 { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'timeline.content.separator';
+const StyledSeparator = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  '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`, _ref => {
+  let {
+    theme
+  } = _ref;
+  return `${theme.borders.sm} ${getColor({
+    theme,
+    variable: 'border.emphasis'
+  })}`;
+}, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSeparator.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSeparator };

package/dist/esm/styled/timeline/StyledTimeline.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 = 'timeline';
+const StyledTimeline = styled.ol.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTimeline",
+  componentId: "sc-pig5kv-0"
+})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTimeline.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTimeline };

package/dist/esm/utils/useAccordionContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+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;
+};
+
+export { AccordionContext, useAccordionContext };

package/dist/esm/utils/useHeaderContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+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;
+};
+
+export { HeaderContext, useHeaderContext };

package/dist/esm/utils/useSectionContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+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;
+};
+
+export { SectionContext, useSectionContext };

package/dist/esm/utils/useStepContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+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;
+};
+
+export { StepContext, useStepContext };

package/dist/esm/utils/useStepperContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+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;
+};
+
+export { StepperContext, useStepperContext };

package/dist/esm/utils/useTimelineContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+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;
+};
+
+export { TimelineContext, useTimelineContext };

package/dist/esm/utils/useTimelineItemContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+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;
+};
+
+export { TimelineItemContext, useTimelineItemContext };