@zendeskgarden/react-modals 8.74.2 → 8.75.0

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 (3) hide show
  1. package/dist/index.cjs.js +33 -33
  2. package/dist/index.esm.js +34 -34
  3. package/package.json +3 -3
package/dist/index.cjs.js CHANGED
@@ -81,11 +81,11 @@ const animationStyles$1 = props => {
81
81
  };
82
82
  const StyledBackdrop = styled__default.default.div.attrs({
83
83
  'data-garden-id': COMPONENT_ID$j,
84
- 'data-garden-version': '8.74.2'
84
+ 'data-garden-version': '8.75.0'
85
85
  }).withConfig({
86
86
  displayName: "StyledBackdrop",
87
87
  componentId: "sc-mzdjpo-0"
88
- })(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.isCentered && 'center', props => props.isCentered && 'center', props => reactTheming.getColor('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
88
+ })(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.isCentered && 'center', props => props.isCentered && 'center', props => reactTheming.getColorV8('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
89
89
  StyledBackdrop.defaultProps = {
90
90
  theme: reactTheming.DEFAULT_THEME
91
91
  };
@@ -97,11 +97,11 @@ StyledBackdrop.propTypes = {
97
97
  const COMPONENT_ID$i = 'modals.body';
98
98
  const StyledBody = styled__default.default.div.attrs({
99
99
  'data-garden-id': COMPONENT_ID$i,
100
- 'data-garden-version': '8.74.2'
100
+ 'data-garden-version': '8.75.0'
101
101
  }).withConfig({
102
102
  displayName: "StyledBody",
103
103
  componentId: "sc-14rzecg-0"
104
- })(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
104
+ })(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
105
105
  StyledBody.defaultProps = {
106
106
  theme: reactTheming.DEFAULT_THEME
107
107
  };
@@ -110,10 +110,10 @@ const COMPONENT_ID$h = 'modals.close';
110
110
  const colorStyles = props => {
111
111
  const backgroundColor = 'primaryHue';
112
112
  const foregroundColor = 'neutralHue';
113
- return styled.css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], reactTheming.getColor(foregroundColor, 600, props.theme), reactTheming.getColor(backgroundColor, 600, props.theme, 0.08), reactTheming.getColor(foregroundColor, 700, props.theme), reactTheming.focusStyles({
113
+ return styled.css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], reactTheming.getColorV8(foregroundColor, 600, props.theme), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.08), reactTheming.getColorV8(foregroundColor, 700, props.theme), reactTheming.focusStyles({
114
114
  theme: props.theme,
115
115
  hue: backgroundColor
116
- }), reactTheming.getColor(backgroundColor, 600, props.theme, 0.2), reactTheming.getColor(foregroundColor, 800, props.theme));
116
+ }), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.2), reactTheming.getColorV8(foregroundColor, 800, props.theme));
117
117
  };
118
118
  const BASE_MULTIPLIERS$1 = {
119
119
  top: 2.5,
@@ -122,7 +122,7 @@ const BASE_MULTIPLIERS$1 = {
122
122
  };
123
123
  const StyledClose = styled__default.default.button.attrs({
124
124
  'data-garden-id': COMPONENT_ID$h,
125
- 'data-garden-version': '8.74.2'
125
+ 'data-garden-version': '8.75.0'
126
126
  }).withConfig({
127
127
  displayName: "StyledClose",
128
128
  componentId: "sc-iseudj-0"
@@ -134,11 +134,11 @@ StyledClose.defaultProps = {
134
134
  const COMPONENT_ID$g = 'modals.footer';
135
135
  const StyledFooter = styled__default.default.div.attrs({
136
136
  'data-garden-id': COMPONENT_ID$g,
137
- 'data-garden-version': '8.74.2'
137
+ 'data-garden-version': '8.75.0'
138
138
  }).withConfig({
139
139
  displayName: "StyledFooter",
140
140
  componentId: "sc-d8pfdu-0"
141
- })(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => props.isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` : `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px ${props.theme.space.base * 8}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
141
+ })(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 200, props.theme)}`, props => props.isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` : `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px ${props.theme.space.base * 8}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
142
142
  StyledFooter.defaultProps = {
143
143
  theme: reactTheming.DEFAULT_THEME
144
144
  };
@@ -146,7 +146,7 @@ StyledFooter.defaultProps = {
146
146
  const COMPONENT_ID$f = 'modals.footer_item';
147
147
  const StyledFooterItem = styled__default.default.span.attrs({
148
148
  'data-garden-id': COMPONENT_ID$f,
149
- 'data-garden-version': '8.74.2'
149
+ 'data-garden-version': '8.75.0'
150
150
  }).withConfig({
151
151
  displayName: "StyledFooterItem",
152
152
  componentId: "sc-1mb76hl-0"
@@ -158,11 +158,11 @@ StyledFooterItem.defaultProps = {
158
158
  const COMPONENT_ID$e = 'modals.header';
159
159
  const StyledHeader = styled__default.default.div.attrs({
160
160
  'data-garden-id': COMPONENT_ID$e,
161
- 'data-garden-version': '8.74.2'
161
+ 'data-garden-version': '8.75.0'
162
162
  }).withConfig({
163
163
  displayName: "StyledHeader",
164
164
  componentId: "sc-1787r9v-0"
165
- })(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", " line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, reactTheming.getColor('neutralHue', 200), props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? reactTheming.getColor('dangerHue', 600, props.theme) : props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
165
+ })(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", " line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, reactTheming.getColorV8('neutralHue', 200), props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? reactTheming.getColorV8('dangerHue', 600, props.theme) : reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
166
166
  StyledHeader.defaultProps = {
167
167
  theme: reactTheming.DEFAULT_THEME
168
168
  };
@@ -221,7 +221,7 @@ const boxShadow$1 = props => {
221
221
  } = theme;
222
222
  const offsetY = `${space.base * 5}px`;
223
223
  const blurRadius = `${space.base * 7}px`;
224
- const color = reactTheming.getColor('neutralHue', 800, theme, 0.35);
224
+ const color = reactTheming.getColorV8('neutralHue', 800, theme, 0.35);
225
225
  return shadows.lg(offsetY, blurRadius, color);
226
226
  };
227
227
  const sizeStyles$1 = props => {
@@ -229,11 +229,11 @@ const sizeStyles$1 = props => {
229
229
  };
230
230
  const StyledModal = styled__default.default.div.attrs({
231
231
  'data-garden-id': COMPONENT_ID$d,
232
- 'data-garden-version': '8.74.2'
232
+ 'data-garden-version': '8.75.0'
233
233
  }).withConfig({
234
234
  displayName: "StyledModal",
235
235
  componentId: "sc-1pe1axu-0"
236
- })(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => props.theme.colors.background, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
236
+ })(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => reactTheming.getColorV8('background', 600 , props.theme), props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
237
237
  StyledModal.propTypes = {
238
238
  isLarge: PropTypes__default.default.bool,
239
239
  isAnimated: PropTypes__default.default.bool
@@ -245,7 +245,7 @@ StyledModal.defaultProps = {
245
245
  const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
246
246
  const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
247
247
  'data-garden-id': COMPONENT_ID$c,
248
- 'data-garden-version': '8.74.2'
248
+ 'data-garden-version': '8.75.0'
249
249
  }).withConfig({
250
250
  displayName: "StyledTooltipModalBackdrop",
251
251
  componentId: "sc-1yaomgq-0"
@@ -328,7 +328,7 @@ StyledTooltipWrapper.defaultProps = {
328
328
  const COMPONENT_ID$b = 'modals.tooltip_modal';
329
329
  const StyledTooltipModal = styled__default.default.div.attrs(props => ({
330
330
  'data-garden-id': COMPONENT_ID$b,
331
- 'data-garden-version': '8.74.2',
331
+ 'data-garden-version': '8.75.0',
332
332
  className: props.isAnimated && 'is-animated'
333
333
  })).withConfig({
334
334
  displayName: "StyledTooltipModal",
@@ -357,11 +357,11 @@ const sizeStyles = props => `
357
357
  `;
358
358
  const StyledTooltipModalTitle = styled__default.default.div.attrs({
359
359
  'data-garden-id': COMPONENT_ID$a,
360
- 'data-garden-version': '8.74.2'
360
+ 'data-garden-version': '8.75.0'
361
361
  }).withConfig({
362
362
  displayName: "StyledTooltipModalTitle",
363
363
  componentId: "sc-11xjgjs-0"
364
- })(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => props.theme.colors.foreground, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
364
+ })(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
365
365
  StyledTooltipModalTitle.defaultProps = {
366
366
  theme: reactTheming.DEFAULT_THEME
367
367
  };
@@ -369,11 +369,11 @@ StyledTooltipModalTitle.defaultProps = {
369
369
  const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
370
370
  const StyledTooltipModalBody = styled__default.default.div.attrs({
371
371
  'data-garden-id': COMPONENT_ID$9,
372
- 'data-garden-version': '8.74.2'
372
+ 'data-garden-version': '8.75.0'
373
373
  }).withConfig({
374
374
  displayName: "StyledTooltipModalBody",
375
375
  componentId: "sc-195dkzj-0"
376
- })(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
376
+ })(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
377
377
  StyledTooltipModalBody.defaultProps = {
378
378
  theme: reactTheming.DEFAULT_THEME
379
379
  };
@@ -381,7 +381,7 @@ StyledTooltipModalBody.defaultProps = {
381
381
  const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
382
382
  const StyledTooltipModalFooter = styled__default.default.div.attrs({
383
383
  'data-garden-id': COMPONENT_ID$8,
384
- 'data-garden-version': '8.74.2'
384
+ 'data-garden-version': '8.75.0'
385
385
  }).withConfig({
386
386
  displayName: "StyledTooltipModalFooter",
387
387
  componentId: "sc-fm36a9-0"
@@ -393,7 +393,7 @@ StyledTooltipModalFooter.defaultProps = {
393
393
  const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
394
394
  const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
395
395
  'data-garden-id': COMPONENT_ID$7,
396
- 'data-garden-version': '8.74.2'
396
+ 'data-garden-version': '8.75.0'
397
397
  }).withConfig({
398
398
  displayName: "StyledTooltipModalFooterItem",
399
399
  componentId: "sc-1nahj6p-0"
@@ -405,7 +405,7 @@ StyledTooltipModalFooterItem.defaultProps = {
405
405
  const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
406
406
  const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
407
407
  'data-garden-id': COMPONENT_ID$6,
408
- 'data-garden-version': '8.74.2'
408
+ 'data-garden-version': '8.75.0'
409
409
  }).withConfig({
410
410
  displayName: "StyledTooltipModalClose",
411
411
  componentId: "sc-1h2ke3q-0"
@@ -426,16 +426,16 @@ const boxShadow = props => {
426
426
  } = theme;
427
427
  const offsetY = `${space.base * 5}px`;
428
428
  const blurRadius = `${space.base * 7}px`;
429
- const color = reactTheming.getColor('neutralHue', 800, theme, 0.35);
429
+ const color = reactTheming.getColorV8('neutralHue', 800, theme, 0.35);
430
430
  return shadows.lg(offsetY, blurRadius, color);
431
431
  };
432
432
  const StyledDrawerModal = styled__default.default.div.attrs({
433
433
  'data-garden-id': COMPONENT_ID$5,
434
- 'data-garden-version': '8.74.2'
434
+ 'data-garden-version': '8.75.0'
435
435
  }).withConfig({
436
436
  displayName: "StyledDrawerModal",
437
437
  componentId: "sc-i1sake-0"
438
- })(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => props.theme.colors.background, DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
438
+ })(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => reactTheming.getColorV8('background', 600 , props.theme), DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
439
439
  StyledDrawerModal.defaultProps = {
440
440
  theme: reactTheming.DEFAULT_THEME
441
441
  };
@@ -448,7 +448,7 @@ const BASE_MULTIPLIERS = {
448
448
  };
449
449
  const StyledDrawerModalClose = styled__default.default(StyledClose).attrs({
450
450
  'data-garden-id': COMPONENT_ID$4,
451
- 'data-garden-version': '8.74.2'
451
+ 'data-garden-version': '8.75.0'
452
452
  }).withConfig({
453
453
  displayName: "StyledDrawerModalClose",
454
454
  componentId: "sc-hrnaom-0"
@@ -460,7 +460,7 @@ StyledDrawerModalClose.defaultProps = {
460
460
  const COMPONENT_ID$3 = 'modals.drawer_modal.header';
461
461
  const StyledDrawerModalHeader = styled__default.default(StyledHeader).attrs({
462
462
  'data-garden-id': COMPONENT_ID$3,
463
- 'data-garden-version': '8.74.2'
463
+ 'data-garden-version': '8.75.0'
464
464
  }).withConfig({
465
465
  displayName: "StyledDrawerModalHeader",
466
466
  componentId: "sc-1u04rqw-0"
@@ -472,7 +472,7 @@ StyledDrawerModalHeader.defaultProps = {
472
472
  const COMPONENT_ID$2 = 'modals.drawer_modal.body';
473
473
  const StyledDrawerModalBody = styled__default.default(StyledBody).attrs({
474
474
  'data-garden-id': COMPONENT_ID$2,
475
- 'data-garden-version': '8.74.2'
475
+ 'data-garden-version': '8.75.0'
476
476
  }).withConfig({
477
477
  displayName: "StyledDrawerModalBody",
478
478
  componentId: "sc-yafe2y-0"
@@ -484,11 +484,11 @@ StyledDrawerModalBody.defaultProps = {
484
484
  const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
485
485
  const StyledDrawerModalFooter = styled__default.default.div.attrs({
486
486
  'data-garden-id': COMPONENT_ID$1,
487
- 'data-garden-version': '8.74.2'
487
+ 'data-garden-version': '8.75.0'
488
488
  }).withConfig({
489
489
  displayName: "StyledDrawerModalFooter",
490
490
  componentId: "sc-17if4ka-0"
491
- })(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
491
+ })(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
492
492
  StyledDrawerModalFooter.defaultProps = {
493
493
  theme: reactTheming.DEFAULT_THEME
494
494
  };
@@ -496,7 +496,7 @@ StyledDrawerModalFooter.defaultProps = {
496
496
  const COMPONENT_ID = 'modals.drawer_modal.footer_item';
497
497
  const StyledDrawerModalFooterItem = styled__default.default(StyledFooterItem).attrs({
498
498
  'data-garden-id': COMPONENT_ID,
499
- 'data-garden-version': '8.74.2'
499
+ 'data-garden-version': '8.75.0'
500
500
  }).withConfig({
501
501
  displayName: "StyledDrawerModalFooterItem",
502
502
  componentId: "sc-1vbl885-0"
package/dist/index.esm.js CHANGED
@@ -10,7 +10,7 @@ import React__default, { createContext, useContext, forwardRef, useRef, useState
10
10
  import ReactDOM, { createPortal } from 'react-dom';
11
11
  import styled, { keyframes, css, ThemeContext } from 'styled-components';
12
12
  import PropTypes from 'prop-types';
13
- import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, focusStyles, mediaQuery, menuStyles, arrowStyles, useDocument, useText } from '@zendeskgarden/react-theming';
13
+ import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, focusStyles, mediaQuery, menuStyles, arrowStyles, useDocument, useText } from '@zendeskgarden/react-theming';
14
14
  import { useModal } from '@zendeskgarden/container-modal';
15
15
  import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
16
16
  import mergeRefs from 'react-merge-refs';
@@ -48,11 +48,11 @@ const animationStyles$1 = props => {
48
48
  };
49
49
  const StyledBackdrop = styled.div.attrs({
50
50
  'data-garden-id': COMPONENT_ID$j,
51
- 'data-garden-version': '8.74.2'
51
+ 'data-garden-version': '8.75.0'
52
52
  }).withConfig({
53
53
  displayName: "StyledBackdrop",
54
54
  componentId: "sc-mzdjpo-0"
55
- })(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.isCentered && 'center', props => props.isCentered && 'center', props => getColor('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => retrieveComponentStyles(COMPONENT_ID$j, props));
55
+ })(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.isCentered && 'center', props => props.isCentered && 'center', props => getColorV8('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => retrieveComponentStyles(COMPONENT_ID$j, props));
56
56
  StyledBackdrop.defaultProps = {
57
57
  theme: DEFAULT_THEME
58
58
  };
@@ -64,11 +64,11 @@ StyledBackdrop.propTypes = {
64
64
  const COMPONENT_ID$i = 'modals.body';
65
65
  const StyledBody = styled.div.attrs({
66
66
  'data-garden-id': COMPONENT_ID$i,
67
- 'data-garden-version': '8.74.2'
67
+ 'data-garden-version': '8.75.0'
68
68
  }).withConfig({
69
69
  displayName: "StyledBody",
70
70
  componentId: "sc-14rzecg-0"
71
- })(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$i, props));
71
+ })(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$i, props));
72
72
  StyledBody.defaultProps = {
73
73
  theme: DEFAULT_THEME
74
74
  };
@@ -77,10 +77,10 @@ const COMPONENT_ID$h = 'modals.close';
77
77
  const colorStyles = props => {
78
78
  const backgroundColor = 'primaryHue';
79
79
  const foregroundColor = 'neutralHue';
80
- return css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], getColor(foregroundColor, 600, props.theme), getColor(backgroundColor, 600, props.theme, 0.08), getColor(foregroundColor, 700, props.theme), focusStyles({
80
+ return css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], getColorV8(foregroundColor, 600, props.theme), getColorV8(backgroundColor, 600, props.theme, 0.08), getColorV8(foregroundColor, 700, props.theme), focusStyles({
81
81
  theme: props.theme,
82
82
  hue: backgroundColor
83
- }), getColor(backgroundColor, 600, props.theme, 0.2), getColor(foregroundColor, 800, props.theme));
83
+ }), getColorV8(backgroundColor, 600, props.theme, 0.2), getColorV8(foregroundColor, 800, props.theme));
84
84
  };
85
85
  const BASE_MULTIPLIERS$1 = {
86
86
  top: 2.5,
@@ -89,7 +89,7 @@ const BASE_MULTIPLIERS$1 = {
89
89
  };
90
90
  const StyledClose = styled.button.attrs({
91
91
  'data-garden-id': COMPONENT_ID$h,
92
- 'data-garden-version': '8.74.2'
92
+ 'data-garden-version': '8.75.0'
93
93
  }).withConfig({
94
94
  displayName: "StyledClose",
95
95
  componentId: "sc-iseudj-0"
@@ -101,11 +101,11 @@ StyledClose.defaultProps = {
101
101
  const COMPONENT_ID$g = 'modals.footer';
102
102
  const StyledFooter = styled.div.attrs({
103
103
  'data-garden-id': COMPONENT_ID$g,
104
- 'data-garden-version': '8.74.2'
104
+ 'data-garden-version': '8.75.0'
105
105
  }).withConfig({
106
106
  displayName: "StyledFooter",
107
107
  componentId: "sc-d8pfdu-0"
108
- })(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`, props => props.isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` : `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px ${props.theme.space.base * 8}px`, props => retrieveComponentStyles(COMPONENT_ID$g, props));
108
+ })(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`, props => props.isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` : `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px ${props.theme.space.base * 8}px`, props => retrieveComponentStyles(COMPONENT_ID$g, props));
109
109
  StyledFooter.defaultProps = {
110
110
  theme: DEFAULT_THEME
111
111
  };
@@ -113,7 +113,7 @@ StyledFooter.defaultProps = {
113
113
  const COMPONENT_ID$f = 'modals.footer_item';
114
114
  const StyledFooterItem = styled.span.attrs({
115
115
  'data-garden-id': COMPONENT_ID$f,
116
- 'data-garden-version': '8.74.2'
116
+ 'data-garden-version': '8.75.0'
117
117
  }).withConfig({
118
118
  displayName: "StyledFooterItem",
119
119
  componentId: "sc-1mb76hl-0"
@@ -125,11 +125,11 @@ StyledFooterItem.defaultProps = {
125
125
  const COMPONENT_ID$e = 'modals.header';
126
126
  const StyledHeader = styled.div.attrs({
127
127
  'data-garden-id': COMPONENT_ID$e,
128
- 'data-garden-version': '8.74.2'
128
+ 'data-garden-version': '8.75.0'
129
129
  }).withConfig({
130
130
  displayName: "StyledHeader",
131
131
  componentId: "sc-1787r9v-0"
132
- })(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", " line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, getColor('neutralHue', 200), props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? getColor('dangerHue', 600, props.theme) : props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$e, props));
132
+ })(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", " line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, getColorV8('neutralHue', 200), props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? getColorV8('dangerHue', 600, props.theme) : getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$e, props));
133
133
  StyledHeader.defaultProps = {
134
134
  theme: DEFAULT_THEME
135
135
  };
@@ -188,7 +188,7 @@ const boxShadow$1 = props => {
188
188
  } = theme;
189
189
  const offsetY = `${space.base * 5}px`;
190
190
  const blurRadius = `${space.base * 7}px`;
191
- const color = getColor('neutralHue', 800, theme, 0.35);
191
+ const color = getColorV8('neutralHue', 800, theme, 0.35);
192
192
  return shadows.lg(offsetY, blurRadius, color);
193
193
  };
194
194
  const sizeStyles$1 = props => {
@@ -196,11 +196,11 @@ const sizeStyles$1 = props => {
196
196
  };
197
197
  const StyledModal = styled.div.attrs({
198
198
  'data-garden-id': COMPONENT_ID$d,
199
- 'data-garden-version': '8.74.2'
199
+ 'data-garden-version': '8.75.0'
200
200
  }).withConfig({
201
201
  displayName: "StyledModal",
202
202
  componentId: "sc-1pe1axu-0"
203
- })(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => props.theme.colors.background, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => retrieveComponentStyles(COMPONENT_ID$d, props));
203
+ })(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => getColorV8('background', 600 , props.theme), props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => retrieveComponentStyles(COMPONENT_ID$d, props));
204
204
  StyledModal.propTypes = {
205
205
  isLarge: PropTypes.bool,
206
206
  isAnimated: PropTypes.bool
@@ -212,7 +212,7 @@ StyledModal.defaultProps = {
212
212
  const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
213
213
  const StyledTooltipModalBackdrop = styled.div.attrs({
214
214
  'data-garden-id': COMPONENT_ID$c,
215
- 'data-garden-version': '8.74.2'
215
+ 'data-garden-version': '8.75.0'
216
216
  }).withConfig({
217
217
  displayName: "StyledTooltipModalBackdrop",
218
218
  componentId: "sc-1yaomgq-0"
@@ -295,7 +295,7 @@ StyledTooltipWrapper.defaultProps = {
295
295
  const COMPONENT_ID$b = 'modals.tooltip_modal';
296
296
  const StyledTooltipModal = styled.div.attrs(props => ({
297
297
  'data-garden-id': COMPONENT_ID$b,
298
- 'data-garden-version': '8.74.2',
298
+ 'data-garden-version': '8.75.0',
299
299
  className: props.isAnimated && 'is-animated'
300
300
  })).withConfig({
301
301
  displayName: "StyledTooltipModal",
@@ -324,11 +324,11 @@ const sizeStyles = props => `
324
324
  `;
325
325
  const StyledTooltipModalTitle = styled.div.attrs({
326
326
  'data-garden-id': COMPONENT_ID$a,
327
- 'data-garden-version': '8.74.2'
327
+ 'data-garden-version': '8.75.0'
328
328
  }).withConfig({
329
329
  displayName: "StyledTooltipModalTitle",
330
330
  componentId: "sc-11xjgjs-0"
331
- })(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => props.theme.colors.foreground, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$a, props));
331
+ })(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$a, props));
332
332
  StyledTooltipModalTitle.defaultProps = {
333
333
  theme: DEFAULT_THEME
334
334
  };
@@ -336,11 +336,11 @@ StyledTooltipModalTitle.defaultProps = {
336
336
  const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
337
337
  const StyledTooltipModalBody = styled.div.attrs({
338
338
  'data-garden-id': COMPONENT_ID$9,
339
- 'data-garden-version': '8.74.2'
339
+ 'data-garden-version': '8.75.0'
340
340
  }).withConfig({
341
341
  displayName: "StyledTooltipModalBody",
342
342
  componentId: "sc-195dkzj-0"
343
- })(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$9, props));
343
+ })(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$9, props));
344
344
  StyledTooltipModalBody.defaultProps = {
345
345
  theme: DEFAULT_THEME
346
346
  };
@@ -348,7 +348,7 @@ StyledTooltipModalBody.defaultProps = {
348
348
  const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
349
349
  const StyledTooltipModalFooter = styled.div.attrs({
350
350
  'data-garden-id': COMPONENT_ID$8,
351
- 'data-garden-version': '8.74.2'
351
+ 'data-garden-version': '8.75.0'
352
352
  }).withConfig({
353
353
  displayName: "StyledTooltipModalFooter",
354
354
  componentId: "sc-fm36a9-0"
@@ -360,7 +360,7 @@ StyledTooltipModalFooter.defaultProps = {
360
360
  const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
361
361
  const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
362
362
  'data-garden-id': COMPONENT_ID$7,
363
- 'data-garden-version': '8.74.2'
363
+ 'data-garden-version': '8.75.0'
364
364
  }).withConfig({
365
365
  displayName: "StyledTooltipModalFooterItem",
366
366
  componentId: "sc-1nahj6p-0"
@@ -372,7 +372,7 @@ StyledTooltipModalFooterItem.defaultProps = {
372
372
  const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
373
373
  const StyledTooltipModalClose = styled(StyledClose).attrs({
374
374
  'data-garden-id': COMPONENT_ID$6,
375
- 'data-garden-version': '8.74.2'
375
+ 'data-garden-version': '8.75.0'
376
376
  }).withConfig({
377
377
  displayName: "StyledTooltipModalClose",
378
378
  componentId: "sc-1h2ke3q-0"
@@ -393,16 +393,16 @@ const boxShadow = props => {
393
393
  } = theme;
394
394
  const offsetY = `${space.base * 5}px`;
395
395
  const blurRadius = `${space.base * 7}px`;
396
- const color = getColor('neutralHue', 800, theme, 0.35);
396
+ const color = getColorV8('neutralHue', 800, theme, 0.35);
397
397
  return shadows.lg(offsetY, blurRadius, color);
398
398
  };
399
399
  const StyledDrawerModal = styled.div.attrs({
400
400
  'data-garden-id': COMPONENT_ID$5,
401
- 'data-garden-version': '8.74.2'
401
+ 'data-garden-version': '8.75.0'
402
402
  }).withConfig({
403
403
  displayName: "StyledDrawerModal",
404
404
  componentId: "sc-i1sake-0"
405
- })(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => props.theme.colors.background, DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => retrieveComponentStyles(COMPONENT_ID$5, props));
405
+ })(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => getColorV8('background', 600 , props.theme), DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => retrieveComponentStyles(COMPONENT_ID$5, props));
406
406
  StyledDrawerModal.defaultProps = {
407
407
  theme: DEFAULT_THEME
408
408
  };
@@ -415,7 +415,7 @@ const BASE_MULTIPLIERS = {
415
415
  };
416
416
  const StyledDrawerModalClose = styled(StyledClose).attrs({
417
417
  'data-garden-id': COMPONENT_ID$4,
418
- 'data-garden-version': '8.74.2'
418
+ 'data-garden-version': '8.75.0'
419
419
  }).withConfig({
420
420
  displayName: "StyledDrawerModalClose",
421
421
  componentId: "sc-hrnaom-0"
@@ -427,7 +427,7 @@ StyledDrawerModalClose.defaultProps = {
427
427
  const COMPONENT_ID$3 = 'modals.drawer_modal.header';
428
428
  const StyledDrawerModalHeader = styled(StyledHeader).attrs({
429
429
  'data-garden-id': COMPONENT_ID$3,
430
- 'data-garden-version': '8.74.2'
430
+ 'data-garden-version': '8.75.0'
431
431
  }).withConfig({
432
432
  displayName: "StyledDrawerModalHeader",
433
433
  componentId: "sc-1u04rqw-0"
@@ -439,7 +439,7 @@ StyledDrawerModalHeader.defaultProps = {
439
439
  const COMPONENT_ID$2 = 'modals.drawer_modal.body';
440
440
  const StyledDrawerModalBody = styled(StyledBody).attrs({
441
441
  'data-garden-id': COMPONENT_ID$2,
442
- 'data-garden-version': '8.74.2'
442
+ 'data-garden-version': '8.75.0'
443
443
  }).withConfig({
444
444
  displayName: "StyledDrawerModalBody",
445
445
  componentId: "sc-yafe2y-0"
@@ -451,11 +451,11 @@ StyledDrawerModalBody.defaultProps = {
451
451
  const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
452
452
  const StyledDrawerModalFooter = styled.div.attrs({
453
453
  'data-garden-id': COMPONENT_ID$1,
454
- 'data-garden-version': '8.74.2'
454
+ 'data-garden-version': '8.75.0'
455
455
  }).withConfig({
456
456
  displayName: "StyledDrawerModalFooter",
457
457
  componentId: "sc-17if4ka-0"
458
- })(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$1, props));
458
+ })(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$1, props));
459
459
  StyledDrawerModalFooter.defaultProps = {
460
460
  theme: DEFAULT_THEME
461
461
  };
@@ -463,7 +463,7 @@ StyledDrawerModalFooter.defaultProps = {
463
463
  const COMPONENT_ID = 'modals.drawer_modal.footer_item';
464
464
  const StyledDrawerModalFooterItem = styled(StyledFooterItem).attrs({
465
465
  'data-garden-id': COMPONENT_ID,
466
- 'data-garden-version': '8.74.2'
466
+ 'data-garden-version': '8.75.0'
467
467
  }).withConfig({
468
468
  displayName: "StyledDrawerModalFooterItem",
469
469
  componentId: "sc-1vbl885-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-modals",
3
- "version": "8.74.2",
3
+ "version": "8.75.0",
4
4
  "description": "Components relating to modals in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -39,7 +39,7 @@
39
39
  },
40
40
  "devDependencies": {
41
41
  "@types/react-transition-group": "4.4.10",
42
- "@zendeskgarden/react-theming": "^8.74.2",
42
+ "@zendeskgarden/react-theming": "^8.75.0",
43
43
  "@zendeskgarden/svg-icons": "7.0.0"
44
44
  },
45
45
  "keywords": [
@@ -52,5 +52,5 @@
52
52
  "access": "public"
53
53
  },
54
54
  "zendeskgarden:src": "src/index.ts",
55
- "gitHead": "be0e20f0b016a227ed1ab6b5b13cb04971969d3b"
55
+ "gitHead": "56a54793a611efc223b8e36262d428365613c853"
56
56
  }