@zendeskgarden/react-accordions 9.0.0-next.5 → 9.0.0-next.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs.js +27 -27
  2. package/dist/index.esm.js +27 -27
  3. package/dist/typings/types/index.d.ts +3 -3
  4. package/package.json +3 -3
package/dist/index.cjs.js CHANGED
@@ -70,7 +70,7 @@ const sizeStyles$2 = props => {
70
70
  };
71
71
  const StyledContent = styled__default.default.div.attrs({
72
72
  'data-garden-id': COMPONENT_ID$k,
73
- 'data-garden-version': '9.0.0-next.5'
73
+ 'data-garden-version': '9.0.0-next.6'
74
74
  }).withConfig({
75
75
  displayName: "StyledContent",
76
76
  componentId: "sc-mazvvo-0"
@@ -82,7 +82,7 @@ StyledContent.defaultProps = {
82
82
  const COMPONENT_ID$j = 'accordions.step_line';
83
83
  const StyledLine = styled__default.default.div.attrs({
84
84
  'data-garden-id': COMPONENT_ID$j,
85
- 'data-garden-version': '9.0.0-next.5'
85
+ 'data-garden-version': '9.0.0-next.6'
86
86
  }).withConfig({
87
87
  displayName: "StyledLine",
88
88
  componentId: "sc-1gkpjbr-0"
@@ -94,7 +94,7 @@ StyledLine.defaultProps = {
94
94
  const COMPONENT_ID$i = 'accordions.step';
95
95
  const StyledStep = styled__default.default.li.attrs({
96
96
  'data-garden-id': COMPONENT_ID$i,
97
- 'data-garden-version': '9.0.0-next.5'
97
+ 'data-garden-version': '9.0.0-next.6'
98
98
  }).withConfig({
99
99
  displayName: "StyledStep",
100
100
  componentId: "sc-12fiwtz-0"
@@ -106,11 +106,11 @@ StyledStep.defaultProps = {
106
106
  const COMPONENT_ID$h = 'accordions.step_inner_content';
107
107
  const StyledInnerContent = styled__default.default.div.attrs({
108
108
  'data-garden-id': COMPONENT_ID$h,
109
- 'data-garden-version': '9.0.0-next.5'
109
+ 'data-garden-version': '9.0.0-next.6'
110
110
  }).withConfig({
111
111
  displayName: "StyledInnerContent",
112
112
  componentId: "sc-1xs9fh7-0"
113
- })(["overflow:hidden;line-height:", ";color:", ";font-size:", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
113
+ })(["overflow:hidden;line-height:", ";color:", ";font-size:", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
114
114
  StyledInnerContent.defaultProps = {
115
115
  theme: reactTheming.DEFAULT_THEME
116
116
  };
@@ -118,7 +118,7 @@ StyledInnerContent.defaultProps = {
118
118
  const COMPONENT_ID$g = 'accordions.stepper';
119
119
  const StyledStepper = styled__default.default.ol.attrs({
120
120
  'data-garden-id': COMPONENT_ID$g,
121
- 'data-garden-version': '9.0.0-next.5'
121
+ 'data-garden-version': '9.0.0-next.6'
122
122
  }).withConfig({
123
123
  displayName: "StyledStepper",
124
124
  componentId: "sc-dsxw0f-0"
@@ -138,11 +138,11 @@ const sizeStyles$1 = props => {
138
138
  return styled.css(["margin-bottom:", ";margin-", ":", ";width:", ";min-width:", ";height:", ";min-height:", ";line-height:", ";font-size:", ";"], props.isHorizontal && `${props.theme.space.base * 2}px`, props.theme.rtl ? 'left' : 'right', !props.isHorizontal && `${props.theme.space.base * 3}px`, size, size, size, size, reactTheming.getLineHeight(size, fontSize), fontSize);
139
139
  };
140
140
  const colorStyles$3 = props => {
141
- return styled.css(["background:", ";color:", ";"], props.isActive ? reactTheming.getColorV8('neutralHue', 600, props.theme) : reactTheming.getColorV8('neutralHue', 200, props.theme), props.isActive ? props.theme.colors.background : props.theme.colors.foreground);
141
+ return styled.css(["background:", ";color:", ";"], props.isActive ? reactTheming.getColorV8('neutralHue', 600, props.theme) : reactTheming.getColorV8('neutralHue', 200, props.theme), props.isActive ? reactTheming.getColorV8('background', 600 , props.theme) : reactTheming.getColorV8('foreground', 600 , props.theme));
142
142
  };
143
143
  const StyledIcon = styled__default.default.div.attrs({
144
144
  'data-garden-id': COMPONENT_ID$f,
145
- 'data-garden-version': '9.0.0-next.5'
145
+ 'data-garden-version': '9.0.0-next.6'
146
146
  }).withConfig({
147
147
  displayName: "StyledIcon",
148
148
  componentId: "sc-v20nz9-1"
@@ -157,11 +157,11 @@ StyledIcon.defaultProps = {
157
157
  const COMPONENT_ID$e = 'accordions.step_label';
158
158
  const StyledLabel = styled__default.default.div.attrs({
159
159
  'data-garden-id': COMPONENT_ID$e,
160
- 'data-garden-version': '9.0.0-next.5'
160
+ 'data-garden-version': '9.0.0-next.6'
161
161
  }).withConfig({
162
162
  displayName: "StyledLabel",
163
163
  componentId: "sc-1o82llj-0"
164
- })(["display:", ";align-items:", ";transition:color 0.25s ease-in-out,font-weight 0.25s ease-in-out;text-align:", ";line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => !props.isHorizontal && 'flex', props => !props.isHorizontal && 'center', props => props.isHorizontal && 'center', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isActive ? props.theme.colors.foreground : reactTheming.getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isActive && 600, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
164
+ })(["display:", ";align-items:", ";transition:color 0.25s ease-in-out,font-weight 0.25s ease-in-out;text-align:", ";line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => !props.isHorizontal && 'flex', props => !props.isHorizontal && 'center', props => props.isHorizontal && 'center', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isActive ? reactTheming.getColorV8('foreground', 600 , props.theme) : reactTheming.getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isActive && 600, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
165
165
  StyledLabel.defaultProps = {
166
166
  theme: reactTheming.DEFAULT_THEME
167
167
  };
@@ -169,7 +169,7 @@ StyledLabel.defaultProps = {
169
169
  const COMPONENT_ID$d = 'accordions.step_label_text';
170
170
  const StyledLabelText = styled__default.default.div.attrs({
171
171
  'data-garden-id': COMPONENT_ID$d,
172
- 'data-garden-version': '9.0.0-next.5'
172
+ 'data-garden-version': '9.0.0-next.6'
173
173
  }).withConfig({
174
174
  displayName: "StyledLabelText",
175
175
  componentId: "sc-111m5zo-0"
@@ -181,7 +181,7 @@ StyledLabelText.defaultProps = {
181
181
  const COMPONENT_ID$c = 'accordions.accordion';
182
182
  const StyledAccordion = styled__default.default.div.attrs({
183
183
  'data-garden-id': COMPONENT_ID$c,
184
- 'data-garden-version': '9.0.0-next.5'
184
+ 'data-garden-version': '9.0.0-next.6'
185
185
  }).withConfig({
186
186
  displayName: "StyledAccordion",
187
187
  componentId: "sc-niv9ic-0"
@@ -223,7 +223,7 @@ const sizeStyles = props => {
223
223
  };
224
224
  const StyledPanel = styled__default.default.section.attrs({
225
225
  'data-garden-id': COMPONENT_ID$b,
226
- 'data-garden-version': '9.0.0-next.5'
226
+ 'data-garden-version': '9.0.0-next.6'
227
227
  }).withConfig({
228
228
  displayName: "StyledPanel",
229
229
  componentId: "sc-1piryze-0"
@@ -236,7 +236,7 @@ StyledPanel.defaultProps = {
236
236
  const COMPONENT_ID$a = 'accordions.section';
237
237
  const StyledSection = styled__default.default.div.attrs({
238
238
  'data-garden-id': COMPONENT_ID$a,
239
- 'data-garden-version': '9.0.0-next.5'
239
+ 'data-garden-version': '9.0.0-next.6'
240
240
  }).withConfig({
241
241
  displayName: "StyledSection",
242
242
  componentId: "sc-v2t9bd-0"
@@ -248,7 +248,7 @@ StyledSection.defaultProps = {
248
248
  const COMPONENT_ID$9 = 'accordions.header';
249
249
  const StyledHeader = styled__default.default.div.attrs({
250
250
  'data-garden-id': COMPONENT_ID$9,
251
- 'data-garden-version': '9.0.0-next.5'
251
+ 'data-garden-version': '9.0.0-next.6'
252
252
  }).withConfig({
253
253
  displayName: "StyledHeader",
254
254
  componentId: "sc-2c6rbr-0"
@@ -265,7 +265,7 @@ StyledHeader.defaultProps = {
265
265
  const COMPONENT_ID$8 = 'accordions.button';
266
266
  const colorStyles$1 = props => {
267
267
  const showColor = props.isCollapsible || !props.isExpanded;
268
- let color = props.theme.colors.foreground;
268
+ let color = reactTheming.getColorV8('foreground', 600 , props.theme);
269
269
  if (showColor && props.isHovered) {
270
270
  color = reactTheming.getColorV8('primaryHue', 600, props.theme);
271
271
  }
@@ -273,7 +273,7 @@ const colorStyles$1 = props => {
273
273
  };
274
274
  const StyledButton = styled__default.default.button.attrs({
275
275
  'data-garden-id': COMPONENT_ID$8,
276
- 'data-garden-version': '9.0.0-next.5'
276
+ 'data-garden-version': '9.0.0-next.6'
277
277
  }).withConfig({
278
278
  displayName: "StyledButton",
279
279
  componentId: "sc-xj3hy7-0"
@@ -285,7 +285,7 @@ StyledButton.defaultProps = {
285
285
  const COMPONENT_ID$7 = 'accordions.step_inner_panel';
286
286
  const StyledInnerPanel = styled__default.default.div.attrs({
287
287
  'data-garden-id': COMPONENT_ID$7,
288
- 'data-garden-version': '9.0.0-next.5'
288
+ 'data-garden-version': '9.0.0-next.6'
289
289
  }).withConfig({
290
290
  displayName: "StyledInnerPanel",
291
291
  componentId: "sc-8nbueg-0"
@@ -316,7 +316,7 @@ _ref => {
316
316
  return React.cloneElement(React.Children.only(children), props);
317
317
  }).attrs({
318
318
  'data-garden-id': COMPONENT_ID$6,
319
- 'data-garden-version': '9.0.0-next.5'
319
+ 'data-garden-version': '9.0.0-next.6'
320
320
  }).withConfig({
321
321
  displayName: "StyledRotateIcon",
322
322
  componentId: "sc-hp435q-0"
@@ -328,7 +328,7 @@ StyledRotateIcon.defaultProps = {
328
328
  const COMPONENT_ID$5 = 'timeline';
329
329
  const StyledTimeline = styled__default.default.ol.attrs({
330
330
  'data-garden-id': COMPONENT_ID$5,
331
- 'data-garden-version': '9.0.0-next.5'
331
+ 'data-garden-version': '9.0.0-next.6'
332
332
  }).withConfig({
333
333
  displayName: "StyledTimeline",
334
334
  componentId: "sc-pig5kv-0"
@@ -340,7 +340,7 @@ StyledTimeline.defaultProps = {
340
340
  const COMPONENT_ID$4 = 'timeline.content.separator';
341
341
  const StyledSeparator = styled__default.default.div.attrs({
342
342
  'data-garden-id': COMPONENT_ID$4,
343
- 'data-garden-version': '9.0.0-next.5'
343
+ 'data-garden-version': '9.0.0-next.6'
344
344
  }).withConfig({
345
345
  displayName: "StyledSeparator",
346
346
  componentId: "sc-fki51e-0"
@@ -352,7 +352,7 @@ StyledSeparator.defaultProps = {
352
352
  const COMPONENT_ID$3 = 'timeline.content';
353
353
  const StyledTimelineContent = styled__default.default.div.attrs({
354
354
  'data-garden-id': COMPONENT_ID$3,
355
- 'data-garden-version': '9.0.0-next.5'
355
+ 'data-garden-version': '9.0.0-next.6'
356
356
  }).withConfig({
357
357
  displayName: "StyledContent__StyledTimelineContent",
358
358
  componentId: "sc-19phgu1-0"
@@ -364,7 +364,7 @@ StyledTimelineContent.defaultProps = {
364
364
  const COMPONENT_ID$2 = 'timeline.opposite.content';
365
365
  const StyledOppositeContent = styled__default.default.div.attrs({
366
366
  'data-garden-id': COMPONENT_ID$2,
367
- 'data-garden-version': '9.0.0-next.5'
367
+ 'data-garden-version': '9.0.0-next.6'
368
368
  }).withConfig({
369
369
  displayName: "StyledOppositeContent",
370
370
  componentId: "sc-jurh2k-0"
@@ -376,11 +376,11 @@ StyledOppositeContent.defaultProps = {
376
376
  const COMPONENT_ID$1 = 'timeline.item';
377
377
  const StyledTimelineItem = styled__default.default.li.attrs({
378
378
  'data-garden-id': COMPONENT_ID$1,
379
- 'data-garden-version': '9.0.0-next.5'
379
+ 'data-garden-version': '9.0.0-next.6'
380
380
  }).withConfig({
381
381
  displayName: "StyledItem__StyledTimelineItem",
382
382
  componentId: "sc-5mcnzm-0"
383
- })(["display:flex;position:relative;line-height:", ";color:", ";font-size:", ";&:last-of-type ", "::after{display:none;}", " ", " ", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, StyledSeparator, props => !props.hasOppositeContent && props.isAlternate && styled.css(["&::before{flex:1;padding:", "px;content:'';}"], props.theme.space.base * 4), props => props.isAlternate && styled.css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right'), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
383
+ })(["display:flex;position:relative;line-height:", ";color:", ";font-size:", ";&:last-of-type ", "::after{display:none;}", " ", " ", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, StyledSeparator, props => !props.hasOppositeContent && props.isAlternate && styled.css(["&::before{flex:1;padding:", "px;content:'';}"], props.theme.space.base * 4), props => props.isAlternate && styled.css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right'), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
384
384
  StyledTimelineItem.defaultProps = {
385
385
  theme: reactTheming.DEFAULT_THEME
386
386
  };
@@ -395,11 +395,11 @@ const StyledItemIcon = styled__default.default(_ref => {
395
395
  return React.cloneElement(React.Children.only(children), props);
396
396
  }).attrs({
397
397
  'data-garden-id': COMPONENT_ID,
398
- 'data-garden-version': '9.0.0-next.5'
398
+ 'data-garden-version': '9.0.0-next.6'
399
399
  }).withConfig({
400
400
  displayName: "StyledItemIcon",
401
401
  componentId: "sc-vz2l6e-0"
402
- })(["z-index:1;box-sizing:content-box;background-color:", ";padding:", "px 0;width:", ";height:", ";color:", ";", ";"], props => props.surfaceColor || props.theme.colors.background, props => props.theme.space.base, props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
402
+ })(["z-index:1;box-sizing:content-box;background-color:", ";padding:", "px 0;width:", ";height:", ";color:", ";", ";"], props => props.surfaceColor || reactTheming.getColorV8('background', 600 , props.theme), props => props.theme.space.base, props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
403
403
  StyledItemIcon.defaultProps = {
404
404
  theme: reactTheming.DEFAULT_THEME
405
405
  };
package/dist/index.esm.js CHANGED
@@ -45,7 +45,7 @@ const sizeStyles$2 = props => {
45
45
  };
46
46
  const StyledContent = styled.div.attrs({
47
47
  'data-garden-id': COMPONENT_ID$k,
48
- 'data-garden-version': '9.0.0-next.5'
48
+ 'data-garden-version': '9.0.0-next.6'
49
49
  }).withConfig({
50
50
  displayName: "StyledContent",
51
51
  componentId: "sc-mazvvo-0"
@@ -57,7 +57,7 @@ StyledContent.defaultProps = {
57
57
  const COMPONENT_ID$j = 'accordions.step_line';
58
58
  const StyledLine = styled.div.attrs({
59
59
  'data-garden-id': COMPONENT_ID$j,
60
- 'data-garden-version': '9.0.0-next.5'
60
+ 'data-garden-version': '9.0.0-next.6'
61
61
  }).withConfig({
62
62
  displayName: "StyledLine",
63
63
  componentId: "sc-1gkpjbr-0"
@@ -69,7 +69,7 @@ StyledLine.defaultProps = {
69
69
  const COMPONENT_ID$i = 'accordions.step';
70
70
  const StyledStep = styled.li.attrs({
71
71
  'data-garden-id': COMPONENT_ID$i,
72
- 'data-garden-version': '9.0.0-next.5'
72
+ 'data-garden-version': '9.0.0-next.6'
73
73
  }).withConfig({
74
74
  displayName: "StyledStep",
75
75
  componentId: "sc-12fiwtz-0"
@@ -81,11 +81,11 @@ StyledStep.defaultProps = {
81
81
  const COMPONENT_ID$h = 'accordions.step_inner_content';
82
82
  const StyledInnerContent = styled.div.attrs({
83
83
  'data-garden-id': COMPONENT_ID$h,
84
- 'data-garden-version': '9.0.0-next.5'
84
+ 'data-garden-version': '9.0.0-next.6'
85
85
  }).withConfig({
86
86
  displayName: "StyledInnerContent",
87
87
  componentId: "sc-1xs9fh7-0"
88
- })(["overflow:hidden;line-height:", ";color:", ";font-size:", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$h, props));
88
+ })(["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));
89
89
  StyledInnerContent.defaultProps = {
90
90
  theme: DEFAULT_THEME
91
91
  };
@@ -93,7 +93,7 @@ StyledInnerContent.defaultProps = {
93
93
  const COMPONENT_ID$g = 'accordions.stepper';
94
94
  const StyledStepper = styled.ol.attrs({
95
95
  'data-garden-id': COMPONENT_ID$g,
96
- 'data-garden-version': '9.0.0-next.5'
96
+ 'data-garden-version': '9.0.0-next.6'
97
97
  }).withConfig({
98
98
  displayName: "StyledStepper",
99
99
  componentId: "sc-dsxw0f-0"
@@ -113,11 +113,11 @@ const sizeStyles$1 = props => {
113
113
  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);
114
114
  };
115
115
  const colorStyles$3 = props => {
116
- return css(["background:", ";color:", ";"], props.isActive ? getColorV8('neutralHue', 600, props.theme) : getColorV8('neutralHue', 200, props.theme), props.isActive ? props.theme.colors.background : props.theme.colors.foreground);
116
+ 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));
117
117
  };
118
118
  const StyledIcon = styled.div.attrs({
119
119
  'data-garden-id': COMPONENT_ID$f,
120
- 'data-garden-version': '9.0.0-next.5'
120
+ 'data-garden-version': '9.0.0-next.6'
121
121
  }).withConfig({
122
122
  displayName: "StyledIcon",
123
123
  componentId: "sc-v20nz9-1"
@@ -132,11 +132,11 @@ StyledIcon.defaultProps = {
132
132
  const COMPONENT_ID$e = 'accordions.step_label';
133
133
  const StyledLabel = styled.div.attrs({
134
134
  'data-garden-id': COMPONENT_ID$e,
135
- 'data-garden-version': '9.0.0-next.5'
135
+ 'data-garden-version': '9.0.0-next.6'
136
136
  }).withConfig({
137
137
  displayName: "StyledLabel",
138
138
  componentId: "sc-1o82llj-0"
139
- })(["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 ? props.theme.colors.foreground : getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isActive && 600, props => retrieveComponentStyles(COMPONENT_ID$e, props));
139
+ })(["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));
140
140
  StyledLabel.defaultProps = {
141
141
  theme: DEFAULT_THEME
142
142
  };
@@ -144,7 +144,7 @@ StyledLabel.defaultProps = {
144
144
  const COMPONENT_ID$d = 'accordions.step_label_text';
145
145
  const StyledLabelText = styled.div.attrs({
146
146
  'data-garden-id': COMPONENT_ID$d,
147
- 'data-garden-version': '9.0.0-next.5'
147
+ 'data-garden-version': '9.0.0-next.6'
148
148
  }).withConfig({
149
149
  displayName: "StyledLabelText",
150
150
  componentId: "sc-111m5zo-0"
@@ -156,7 +156,7 @@ StyledLabelText.defaultProps = {
156
156
  const COMPONENT_ID$c = 'accordions.accordion';
157
157
  const StyledAccordion = styled.div.attrs({
158
158
  'data-garden-id': COMPONENT_ID$c,
159
- 'data-garden-version': '9.0.0-next.5'
159
+ 'data-garden-version': '9.0.0-next.6'
160
160
  }).withConfig({
161
161
  displayName: "StyledAccordion",
162
162
  componentId: "sc-niv9ic-0"
@@ -198,7 +198,7 @@ const sizeStyles = props => {
198
198
  };
199
199
  const StyledPanel = styled.section.attrs({
200
200
  'data-garden-id': COMPONENT_ID$b,
201
- 'data-garden-version': '9.0.0-next.5'
201
+ 'data-garden-version': '9.0.0-next.6'
202
202
  }).withConfig({
203
203
  displayName: "StyledPanel",
204
204
  componentId: "sc-1piryze-0"
@@ -211,7 +211,7 @@ StyledPanel.defaultProps = {
211
211
  const COMPONENT_ID$a = 'accordions.section';
212
212
  const StyledSection = styled.div.attrs({
213
213
  'data-garden-id': COMPONENT_ID$a,
214
- 'data-garden-version': '9.0.0-next.5'
214
+ 'data-garden-version': '9.0.0-next.6'
215
215
  }).withConfig({
216
216
  displayName: "StyledSection",
217
217
  componentId: "sc-v2t9bd-0"
@@ -223,7 +223,7 @@ StyledSection.defaultProps = {
223
223
  const COMPONENT_ID$9 = 'accordions.header';
224
224
  const StyledHeader = styled.div.attrs({
225
225
  'data-garden-id': COMPONENT_ID$9,
226
- 'data-garden-version': '9.0.0-next.5'
226
+ 'data-garden-version': '9.0.0-next.6'
227
227
  }).withConfig({
228
228
  displayName: "StyledHeader",
229
229
  componentId: "sc-2c6rbr-0"
@@ -240,7 +240,7 @@ StyledHeader.defaultProps = {
240
240
  const COMPONENT_ID$8 = 'accordions.button';
241
241
  const colorStyles$1 = props => {
242
242
  const showColor = props.isCollapsible || !props.isExpanded;
243
- let color = props.theme.colors.foreground;
243
+ let color = getColorV8('foreground', 600 , props.theme);
244
244
  if (showColor && props.isHovered) {
245
245
  color = getColorV8('primaryHue', 600, props.theme);
246
246
  }
@@ -248,7 +248,7 @@ const colorStyles$1 = props => {
248
248
  };
249
249
  const StyledButton = styled.button.attrs({
250
250
  'data-garden-id': COMPONENT_ID$8,
251
- 'data-garden-version': '9.0.0-next.5'
251
+ 'data-garden-version': '9.0.0-next.6'
252
252
  }).withConfig({
253
253
  displayName: "StyledButton",
254
254
  componentId: "sc-xj3hy7-0"
@@ -260,7 +260,7 @@ StyledButton.defaultProps = {
260
260
  const COMPONENT_ID$7 = 'accordions.step_inner_panel';
261
261
  const StyledInnerPanel = styled.div.attrs({
262
262
  'data-garden-id': COMPONENT_ID$7,
263
- 'data-garden-version': '9.0.0-next.5'
263
+ 'data-garden-version': '9.0.0-next.6'
264
264
  }).withConfig({
265
265
  displayName: "StyledInnerPanel",
266
266
  componentId: "sc-8nbueg-0"
@@ -291,7 +291,7 @@ _ref => {
291
291
  return cloneElement(Children.only(children), props);
292
292
  }).attrs({
293
293
  'data-garden-id': COMPONENT_ID$6,
294
- 'data-garden-version': '9.0.0-next.5'
294
+ 'data-garden-version': '9.0.0-next.6'
295
295
  }).withConfig({
296
296
  displayName: "StyledRotateIcon",
297
297
  componentId: "sc-hp435q-0"
@@ -303,7 +303,7 @@ StyledRotateIcon.defaultProps = {
303
303
  const COMPONENT_ID$5 = 'timeline';
304
304
  const StyledTimeline = styled.ol.attrs({
305
305
  'data-garden-id': COMPONENT_ID$5,
306
- 'data-garden-version': '9.0.0-next.5'
306
+ 'data-garden-version': '9.0.0-next.6'
307
307
  }).withConfig({
308
308
  displayName: "StyledTimeline",
309
309
  componentId: "sc-pig5kv-0"
@@ -315,7 +315,7 @@ StyledTimeline.defaultProps = {
315
315
  const COMPONENT_ID$4 = 'timeline.content.separator';
316
316
  const StyledSeparator = styled.div.attrs({
317
317
  'data-garden-id': COMPONENT_ID$4,
318
- 'data-garden-version': '9.0.0-next.5'
318
+ 'data-garden-version': '9.0.0-next.6'
319
319
  }).withConfig({
320
320
  displayName: "StyledSeparator",
321
321
  componentId: "sc-fki51e-0"
@@ -327,7 +327,7 @@ StyledSeparator.defaultProps = {
327
327
  const COMPONENT_ID$3 = 'timeline.content';
328
328
  const StyledTimelineContent = styled.div.attrs({
329
329
  'data-garden-id': COMPONENT_ID$3,
330
- 'data-garden-version': '9.0.0-next.5'
330
+ 'data-garden-version': '9.0.0-next.6'
331
331
  }).withConfig({
332
332
  displayName: "StyledContent__StyledTimelineContent",
333
333
  componentId: "sc-19phgu1-0"
@@ -339,7 +339,7 @@ StyledTimelineContent.defaultProps = {
339
339
  const COMPONENT_ID$2 = 'timeline.opposite.content';
340
340
  const StyledOppositeContent = styled.div.attrs({
341
341
  'data-garden-id': COMPONENT_ID$2,
342
- 'data-garden-version': '9.0.0-next.5'
342
+ 'data-garden-version': '9.0.0-next.6'
343
343
  }).withConfig({
344
344
  displayName: "StyledOppositeContent",
345
345
  componentId: "sc-jurh2k-0"
@@ -351,11 +351,11 @@ StyledOppositeContent.defaultProps = {
351
351
  const COMPONENT_ID$1 = 'timeline.item';
352
352
  const StyledTimelineItem = styled.li.attrs({
353
353
  'data-garden-id': COMPONENT_ID$1,
354
- 'data-garden-version': '9.0.0-next.5'
354
+ 'data-garden-version': '9.0.0-next.6'
355
355
  }).withConfig({
356
356
  displayName: "StyledItem__StyledTimelineItem",
357
357
  componentId: "sc-5mcnzm-0"
358
- })(["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 => props.theme.colors.foreground, 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));
358
+ })(["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));
359
359
  StyledTimelineItem.defaultProps = {
360
360
  theme: DEFAULT_THEME
361
361
  };
@@ -370,11 +370,11 @@ const StyledItemIcon = styled(_ref => {
370
370
  return cloneElement(Children.only(children), props);
371
371
  }).attrs({
372
372
  'data-garden-id': COMPONENT_ID,
373
- 'data-garden-version': '9.0.0-next.5'
373
+ 'data-garden-version': '9.0.0-next.6'
374
374
  }).withConfig({
375
375
  displayName: "StyledItemIcon",
376
376
  componentId: "sc-vz2l6e-0"
377
- })(["z-index:1;box-sizing:content-box;background-color:", ";padding:", "px 0;width:", ";height:", ";color:", ";", ";"], props => props.surfaceColor || props.theme.colors.background, props => props.theme.space.base, props => math(`${props.theme.iconSizes.sm} + 1`), props => math(`${props.theme.iconSizes.sm} + 1`), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
377
+ })(["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));
378
378
  StyledItemIcon.defaultProps = {
379
379
  theme: DEFAULT_THEME
380
380
  };
package/dist/typings/types/index.d.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import { IUseAccordionProps } from '@zendeskgarden/container-accordion';
8
- import { ReactNode, SVGAttributes, HTMLAttributes, LiHTMLAttributes, OlHTMLAttributes } from 'react';
8
+ import { SVGAttributes, HTMLAttributes, LiHTMLAttributes, OlHTMLAttributes, ReactElement } from 'react';
9
9
  export interface IAccordionProps<Value = any> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
10
10
  /** Sets `aria-level` heading rank in the document structure */
11
11
  level: NonNullable<HTMLAttributes<HTMLDivElement>['aria-level']>;
@@ -38,7 +38,7 @@ export interface IStepperProps extends OlHTMLAttributes<HTMLOListElement> {
38
38
  }
39
39
  export interface IStepperLabelProps extends HTMLAttributes<HTMLDivElement> {
40
40
  /** Replaces the label number with an icon */
41
- icon?: ReactNode;
41
+ icon?: ReactElement;
42
42
  /** Passes props to the default check icon */
43
43
  iconProps?: SVGAttributes<SVGElement>;
44
44
  /** Hides the label text */
@@ -50,7 +50,7 @@ export interface ITimelineProps extends OlHTMLAttributes<HTMLOListElement> {
50
50
  }
51
51
  export interface ITimelineItemProps extends LiHTMLAttributes<HTMLLIElement> {
52
52
  /** Replaces the dot with an icon */
53
- icon?: ReactNode;
53
+ icon?: ReactElement;
54
54
  /** Provides surface color for an icon placed on a non-white background */
55
55
  surfaceColor?: string;
56
56
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-accordions",
3
- "version": "9.0.0-next.5",
3
+ "version": "9.0.0-next.6",
4
4
  "description": "Components related to accordions in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
33
33
  "styled-components": "^5.3.1"
34
34
  },
35
35
  "devDependencies": {
36
- "@zendeskgarden/react-theming": "^9.0.0-next.5",
36
+ "@zendeskgarden/react-theming": "^9.0.0-next.6",
37
37
  "@zendeskgarden/svg-icons": "7.0.0"
38
38
  },
39
39
  "keywords": [
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "zendeskgarden:src": "src/index.ts",
50
- "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
50
+ "gitHead": "45c56ad1c73af40afba8e5415f529a2c9601c83f"
51
51
  }