@zendeskgarden/react-forms 8.57.1 → 8.58.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 (5) hide show
  1. package/dist/index.cjs.js +1158 -1686
  2. package/dist/index.esm.js +1159 -1687
  3. package/dist/typings/styled/range/StyledSlider.d.ts +4 -5
  4. package/dist/typings/types/index.d.ts +4 -2
  5. package/package.json +5 -4
package/dist/index.esm.js CHANGED
@@ -12,269 +12,90 @@ import styled, { css, ThemeContext } from 'styled-components';
12
12
  import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, useText, useDocument } from '@zendeskgarden/react-theming';
13
13
  import { hideVisually, math, rgba, em } from 'polished';
14
14
  import PropTypes from 'prop-types';
15
- import { composeEventHandlers, KEY_CODES, getControlledValue } from '@zendeskgarden/container-utilities';
15
+ import { composeEventHandlers, getControlledValue } from '@zendeskgarden/container-utilities';
16
16
  import mergeRefs from 'react-merge-refs';
17
17
  import debounce from 'lodash.debounce';
18
-
19
- function ownKeys(object, enumerableOnly) {
20
- var keys = Object.keys(object);
21
-
22
- if (Object.getOwnPropertySymbols) {
23
- var symbols = Object.getOwnPropertySymbols(object);
24
- enumerableOnly && (symbols = symbols.filter(function (sym) {
25
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
26
- })), keys.push.apply(keys, symbols);
27
- }
28
-
29
- return keys;
30
- }
31
-
32
- function _objectSpread2(target) {
33
- for (var i = 1; i < arguments.length; i++) {
34
- var source = null != arguments[i] ? arguments[i] : {};
35
- i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
36
- _defineProperty(target, key, source[key]);
37
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
38
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
39
- });
40
- }
41
-
42
- return target;
43
- }
44
-
45
- function _defineProperty(obj, key, value) {
46
- if (key in obj) {
47
- Object.defineProperty(obj, key, {
48
- value: value,
49
- enumerable: true,
50
- configurable: true,
51
- writable: true
52
- });
53
- } else {
54
- obj[key] = value;
55
- }
56
-
57
- return obj;
58
- }
18
+ import { useSlider } from '@zendeskgarden/container-slider';
59
19
 
60
20
  function _extends$t() {
61
21
  _extends$t = Object.assign ? Object.assign.bind() : function (target) {
62
22
  for (var i = 1; i < arguments.length; i++) {
63
23
  var source = arguments[i];
64
-
65
24
  for (var key in source) {
66
25
  if (Object.prototype.hasOwnProperty.call(source, key)) {
67
26
  target[key] = source[key];
68
27
  }
69
28
  }
70
29
  }
71
-
72
30
  return target;
73
31
  };
74
32
  return _extends$t.apply(this, arguments);
75
33
  }
76
34
 
77
- function _objectWithoutPropertiesLoose(source, excluded) {
78
- if (source == null) return {};
79
- var target = {};
80
- var sourceKeys = Object.keys(source);
81
- var key, i;
82
-
83
- for (i = 0; i < sourceKeys.length; i++) {
84
- key = sourceKeys[i];
85
- if (excluded.indexOf(key) >= 0) continue;
86
- target[key] = source[key];
87
- }
88
-
89
- return target;
90
- }
91
-
92
- function _objectWithoutProperties(source, excluded) {
93
- if (source == null) return {};
94
-
95
- var target = _objectWithoutPropertiesLoose(source, excluded);
96
-
97
- var key, i;
98
-
99
- if (Object.getOwnPropertySymbols) {
100
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
101
-
102
- for (i = 0; i < sourceSymbolKeys.length; i++) {
103
- key = sourceSymbolKeys[i];
104
- if (excluded.indexOf(key) >= 0) continue;
105
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
106
- target[key] = source[key];
107
- }
108
- }
109
-
110
- return target;
111
- }
112
-
113
- function _slicedToArray(arr, i) {
114
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
115
- }
116
-
117
- function _arrayWithHoles(arr) {
118
- if (Array.isArray(arr)) return arr;
119
- }
120
-
121
- function _iterableToArrayLimit(arr, i) {
122
- var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
123
-
124
- if (_i == null) return;
125
- var _arr = [];
126
- var _n = true;
127
- var _d = false;
128
-
129
- var _s, _e;
130
-
131
- try {
132
- for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
133
- _arr.push(_s.value);
134
-
135
- if (i && _arr.length === i) break;
136
- }
137
- } catch (err) {
138
- _d = true;
139
- _e = err;
140
- } finally {
141
- try {
142
- if (!_n && _i["return"] != null) _i["return"]();
143
- } finally {
144
- if (_d) throw _e;
145
- }
146
- }
147
-
148
- return _arr;
149
- }
150
-
151
- function _unsupportedIterableToArray(o, minLen) {
152
- if (!o) return;
153
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
154
- var n = Object.prototype.toString.call(o).slice(8, -1);
155
- if (n === "Object" && o.constructor) n = o.constructor.name;
156
- if (n === "Map" || n === "Set") return Array.from(o);
157
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
158
- }
159
-
160
- function _arrayLikeToArray(arr, len) {
161
- if (len == null || len > arr.length) len = arr.length;
162
-
163
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
164
-
165
- return arr2;
166
- }
167
-
168
- function _nonIterableRest() {
169
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
170
- }
171
-
172
- var FieldContext = createContext(undefined);
173
- var useFieldContext = function useFieldContext() {
174
- var fieldContext = useContext(FieldContext);
35
+ const FieldContext = createContext(undefined);
36
+ const useFieldContext = () => {
37
+ const fieldContext = useContext(FieldContext);
175
38
  return fieldContext;
176
39
  };
177
40
 
178
- var COMPONENT_ID$K = 'forms.field';
179
- var StyledField = styled.div.attrs({
41
+ const COMPONENT_ID$K = 'forms.field';
42
+ const StyledField = styled.div.attrs({
180
43
  'data-garden-id': COMPONENT_ID$K,
181
- 'data-garden-version': '8.57.1'
44
+ 'data-garden-version': '8.58.0'
182
45
  }).withConfig({
183
46
  displayName: "StyledField",
184
47
  componentId: "sc-12gzfsu-0"
185
- })(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], function (props) {
186
- return props.theme.rtl && 'rtl';
187
- }, function (props) {
188
- return retrieveComponentStyles(COMPONENT_ID$K, props);
189
- });
48
+ })(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$K, props));
190
49
  StyledField.defaultProps = {
191
50
  theme: DEFAULT_THEME
192
51
  };
193
52
 
194
- var COMPONENT_ID$J = 'forms.fieldset';
195
- var StyledFieldset = styled(StyledField).attrs({
53
+ const COMPONENT_ID$J = 'forms.fieldset';
54
+ const StyledFieldset = styled(StyledField).attrs({
196
55
  as: 'fieldset',
197
56
  'data-garden-id': COMPONENT_ID$J,
198
- 'data-garden-version': '8.57.1'
57
+ 'data-garden-version': '8.58.0'
199
58
  }).withConfig({
200
59
  displayName: "StyledFieldset",
201
60
  componentId: "sc-1vr4mxv-0"
202
- })(["", "{margin-top:", "px;}", ";"], StyledField, function (props) {
203
- return props.theme.space.base * (props.isCompact ? 1 : 2);
204
- }, function (props) {
205
- return retrieveComponentStyles(COMPONENT_ID$J, props);
206
- });
61
+ })(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID$J, props));
207
62
  StyledFieldset.defaultProps = {
208
63
  theme: DEFAULT_THEME
209
64
  };
210
65
 
211
- var COMPONENT_ID$I = 'forms.input_label';
212
- var StyledLabel = styled.label.attrs({
66
+ const COMPONENT_ID$I = 'forms.input_label';
67
+ const StyledLabel = styled.label.attrs({
213
68
  'data-garden-id': COMPONENT_ID$I,
214
- 'data-garden-version': '8.57.1'
69
+ 'data-garden-version': '8.58.0'
215
70
  }).withConfig({
216
71
  displayName: "StyledLabel",
217
72
  componentId: "sc-2utmsz-0"
218
- })(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], function (props) {
219
- return props.theme.rtl && 'rtl';
220
- }, function (props) {
221
- return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
222
- }, function (props) {
223
- return props.theme.colors.foreground;
224
- }, function (props) {
225
- return props.theme.fontSizes.md;
226
- }, function (props) {
227
- return props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold;
228
- }, function (props) {
229
- return props.isRadio ? 'inline-block' : 'inline';
230
- }, function (props) {
231
- return props.isRadio && 'top';
232
- }, function (props) {
233
- return props.isRadio && '-100%';
234
- }, function (props) {
235
- return props.isRadio && '0';
236
- }, function (props) {
237
- return !props.isRadio && hideVisually();
238
- }, function (props) {
239
- return retrieveComponentStyles(COMPONENT_ID$I, props);
240
- });
73
+ })(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.isRadio ? 'inline-block' : 'inline', props => props.isRadio && 'top', props => props.isRadio && '-100%', props => props.isRadio && '0', props => !props.isRadio && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$I, props));
241
74
  StyledLabel.defaultProps = {
242
75
  theme: DEFAULT_THEME
243
76
  };
244
77
 
245
- var COMPONENT_ID$H = 'forms.fieldset_legend';
246
- var StyledLegend = styled(StyledLabel).attrs({
78
+ const COMPONENT_ID$H = 'forms.fieldset_legend';
79
+ const StyledLegend = styled(StyledLabel).attrs({
247
80
  as: 'legend',
248
81
  'data-garden-id': COMPONENT_ID$H,
249
- 'data-garden-version': '8.57.1'
82
+ 'data-garden-version': '8.58.0'
250
83
  }).withConfig({
251
84
  displayName: "StyledLegend",
252
85
  componentId: "sc-6s0zwq-0"
253
- })(["padding:0;", ";"], function (props) {
254
- return retrieveComponentStyles(COMPONENT_ID$H, props);
255
- });
86
+ })(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$H, props));
256
87
  StyledLegend.defaultProps = {
257
88
  theme: DEFAULT_THEME
258
89
  };
259
90
 
260
- var COMPONENT_ID$G = 'forms.input_hint';
261
- var StyledHint = styled.div.attrs({
91
+ const COMPONENT_ID$G = 'forms.input_hint';
92
+ const StyledHint = styled.div.attrs({
262
93
  'data-garden-id': COMPONENT_ID$G,
263
- 'data-garden-version': '8.57.1'
94
+ 'data-garden-version': '8.58.0'
264
95
  }).withConfig({
265
96
  displayName: "StyledHint",
266
97
  componentId: "sc-17c2wu8-0"
267
- })(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], function (props) {
268
- return props.theme.rtl && 'rtl';
269
- }, function (props) {
270
- return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
271
- }, function (props) {
272
- return getColor('neutralHue', 600, props.theme);
273
- }, function (props) {
274
- return props.theme.fontSizes.md;
275
- }, function (props) {
276
- return retrieveComponentStyles(COMPONENT_ID$G, props);
277
- });
98
+ })(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$G, props));
278
99
  StyledHint.defaultProps = {
279
100
  theme: DEFAULT_THEME
280
101
  };
@@ -290,7 +111,8 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
290
111
  height: 16,
291
112
  focusable: "false",
292
113
  viewBox: "0 0 16 16",
293
- "aria-hidden": "true"
114
+ "aria-hidden": "true",
115
+ role: "img"
294
116
  }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
295
117
  fill: "none",
296
118
  stroke: "currentColor"
@@ -320,7 +142,8 @@ var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
320
142
  height: 16,
321
143
  focusable: "false",
322
144
  viewBox: "0 0 16 16",
323
- "aria-hidden": "true"
145
+ "aria-hidden": "true",
146
+ role: "img"
324
147
  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
325
148
  fill: "none",
326
149
  stroke: "currentColor",
@@ -345,7 +168,8 @@ var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) {
345
168
  height: 16,
346
169
  focusable: "false",
347
170
  viewBox: "0 0 16 16",
348
- "aria-hidden": "true"
171
+ "aria-hidden": "true",
172
+ role: "img"
349
173
  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
350
174
  fill: "none",
351
175
  stroke: "currentColor"
@@ -360,12 +184,13 @@ var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) {
360
184
  }))));
361
185
  };
362
186
 
363
- var _excluded$j = ["children", "validation"];
364
- var MessageIcon = function MessageIcon(_ref) {
365
- var children = _ref.children,
366
- validation = _ref.validation,
367
- props = _objectWithoutProperties(_ref, _excluded$j);
368
- var retVal;
187
+ const MessageIcon = _ref => {
188
+ let {
189
+ children,
190
+ validation,
191
+ ...props
192
+ } = _ref;
193
+ let retVal;
369
194
  if (validation === 'error') {
370
195
  retVal = React__default.createElement(SvgAlertErrorStroke, props);
371
196
  } else if (validation === 'success') {
@@ -377,29 +202,23 @@ var MessageIcon = function MessageIcon(_ref) {
377
202
  }
378
203
  return retVal;
379
204
  };
380
- var COMPONENT_ID$F = 'forms.input_message_icon';
381
- var StyledMessageIcon = styled(MessageIcon).attrs({
205
+ const COMPONENT_ID$F = 'forms.input_message_icon';
206
+ const StyledMessageIcon = styled(MessageIcon).attrs({
382
207
  'data-garden-id': COMPONENT_ID$F,
383
- 'data-garden-version': '8.57.1',
208
+ 'data-garden-version': '8.58.0',
384
209
  'aria-hidden': null
385
210
  }).withConfig({
386
211
  displayName: "StyledMessageIcon",
387
212
  componentId: "sc-1ph2gba-0"
388
- })(["width:", ";height:", ";", ";"], function (props) {
389
- return props.theme.iconSizes.md;
390
- }, function (props) {
391
- return props.theme.iconSizes.md;
392
- }, function (props) {
393
- return retrieveComponentStyles(COMPONENT_ID$F, props);
394
- });
213
+ })(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$F, props));
395
214
  StyledMessageIcon.defaultProps = {
396
215
  theme: DEFAULT_THEME
397
216
  };
398
217
 
399
- var validationStyles = function validationStyles(props) {
400
- var rtl = props.theme.rtl;
401
- var padding = math("".concat(props.theme.space.base, " * 2px + ").concat(props.theme.iconSizes.md));
402
- var color;
218
+ const validationStyles = props => {
219
+ const rtl = props.theme.rtl;
220
+ const padding = math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`);
221
+ let color;
403
222
  if (props.validation === 'error') {
404
223
  color = getColor('dangerHue', 600, props.theme);
405
224
  } else if (props.validation === 'success') {
@@ -411,44 +230,30 @@ var validationStyles = function validationStyles(props) {
411
230
  }
412
231
  return css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
413
232
  };
414
- var COMPONENT_ID$E = 'forms.input_message';
415
- var StyledMessage = styled.div.attrs({
233
+ const COMPONENT_ID$E = 'forms.input_message';
234
+ const StyledMessage = styled.div.attrs({
416
235
  'data-garden-id': COMPONENT_ID$E,
417
- 'data-garden-version': '8.57.1'
236
+ 'data-garden-version': '8.58.0'
418
237
  }).withConfig({
419
238
  displayName: "StyledMessage",
420
239
  componentId: "sc-30hgg7-0"
421
- })(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], function (props) {
422
- return props.theme.rtl && 'rtl';
423
- }, function (props) {
424
- return getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm);
425
- }, function (props) {
426
- return props.theme.fontSizes.sm;
427
- }, function (props) {
428
- return validationStyles(props);
429
- }, StyledMessageIcon, function (props) {
430
- return props.theme.rtl ? 'right' : 'left';
431
- }, StyledLabel, function (props) {
432
- return math("".concat(props.theme.space.base, " * 1px"));
433
- }, function (props) {
434
- return retrieveComponentStyles(COMPONENT_ID$E, props);
435
- });
240
+ })(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => validationStyles(props), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, props => math(`${props.theme.space.base} * 1px`), props => retrieveComponentStyles(COMPONENT_ID$E, props));
436
241
  StyledMessage.defaultProps = {
437
242
  theme: DEFAULT_THEME
438
243
  };
439
244
 
440
- var COMPONENT_ID$D = 'forms.input';
441
- var isInvalid = function isInvalid(validation) {
245
+ const COMPONENT_ID$D = 'forms.input';
246
+ const isInvalid = validation => {
442
247
  return validation === 'warning' || validation === 'error';
443
248
  };
444
- var colorStyles$b = function colorStyles(props) {
445
- var SHADE = 600;
446
- var placeholderColor = getColor('neutralHue', SHADE - 200, props.theme);
447
- var borderColor;
448
- var hoverBorderColor;
449
- var focusBorderColor;
249
+ const colorStyles$b = props => {
250
+ const SHADE = 600;
251
+ const placeholderColor = getColor('neutralHue', SHADE - 200, props.theme);
252
+ let borderColor;
253
+ let hoverBorderColor;
254
+ let focusBorderColor;
450
255
  if (props.validation) {
451
- var hue;
256
+ let hue;
452
257
  if (props.validation === 'success') {
453
258
  hue = 'successHue';
454
259
  } else if (props.validation === 'warning') {
@@ -464,13 +269,15 @@ var colorStyles$b = function colorStyles(props) {
464
269
  hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
465
270
  focusBorderColor = hoverBorderColor;
466
271
  }
467
- var boxShadow = "\n ".concat(props.focusInset ? 'inset' : '', "\n ").concat(props.theme.shadows.md(rgba(focusBorderColor, 0.35)));
468
- var readOnlyBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme);
469
- var readOnlyBorderColor = getColor('neutralHue', SHADE - 300, props.theme);
470
- var disabledBackgroundColor = readOnlyBackgroundColor;
471
- var disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
472
- var disabledForegroundColor = getColor('neutralHue', SHADE - 200, props.theme);
473
- var controlledBorderColor = borderColor;
272
+ const boxShadow = `
273
+ ${props.focusInset ? 'inset' : ''}
274
+ ${props.theme.shadows.md(rgba(focusBorderColor, 0.35))}`;
275
+ const readOnlyBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme);
276
+ const readOnlyBorderColor = getColor('neutralHue', SHADE - 300, props.theme);
277
+ const disabledBackgroundColor = readOnlyBackgroundColor;
278
+ const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
279
+ const disabledForegroundColor = getColor('neutralHue', SHADE - 200, props.theme);
280
+ let controlledBorderColor = borderColor;
474
281
  if (props.isFocused) {
475
282
  controlledBorderColor = focusBorderColor;
476
283
  }
@@ -479,88 +286,67 @@ var colorStyles$b = function colorStyles(props) {
479
286
  }
480
287
  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}&:focus,&[data-garden-focus-visible='true']{border-color:", ";box-shadow:", ";}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, !props.isBare && props.isFocused && boxShadow, props.isBare ? 'transparent' : props.theme.colors.background, props.theme.colors.foreground, placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, focusBorderColor, !props.isBare && boxShadow, disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor);
481
288
  };
482
- var sizeStyles$f = function sizeStyles(props) {
483
- var fontSize = props.theme.fontSizes.md;
484
- var paddingHorizontal = "".concat(props.theme.space.base * 3, "px");
485
- var height;
486
- var paddingVertical;
487
- var browseFontSize;
488
- var swatchHeight;
289
+ const sizeStyles$f = props => {
290
+ const fontSize = props.theme.fontSizes.md;
291
+ const paddingHorizontal = `${props.theme.space.base * 3}px`;
292
+ let height;
293
+ let paddingVertical;
294
+ let browseFontSize;
295
+ let swatchHeight;
489
296
  if (props.isCompact) {
490
- height = "".concat(props.theme.space.base * 8, "px");
491
- paddingVertical = "".concat(props.theme.space.base * 1.5, "px");
492
- browseFontSize = math("".concat(props.theme.fontSizes.sm, " - 1"));
493
- swatchHeight = "".concat(props.theme.space.base * 6, "px");
297
+ height = `${props.theme.space.base * 8}px`;
298
+ paddingVertical = `${props.theme.space.base * 1.5}px`;
299
+ browseFontSize = math(`${props.theme.fontSizes.sm} - 1`);
300
+ swatchHeight = `${props.theme.space.base * 6}px`;
494
301
  } else {
495
- height = "".concat(props.theme.space.base * 10, "px");
496
- paddingVertical = "".concat(props.theme.space.base * 2.5, "px");
302
+ height = `${props.theme.space.base * 10}px`;
303
+ paddingVertical = `${props.theme.space.base * 2.5}px`;
497
304
  browseFontSize = props.theme.fontSizes.sm;
498
- swatchHeight = "".concat(props.theme.space.base * 7, "px");
305
+ swatchHeight = `${props.theme.space.base * 7}px`;
499
306
  }
500
- var lineHeight = math("".concat(height, " - (").concat(paddingVertical, " * 2) - (").concat(props.theme.borderWidths.sm, " * 2)"));
501
- var padding = props.isBare ? '0' : "".concat(em(paddingVertical, fontSize), " ").concat(em(paddingHorizontal, fontSize));
502
- var swatchMarginVertical = math("(".concat(lineHeight, " - ").concat(swatchHeight, ") / 2"));
503
- var swatchMarginHorizontal = math("".concat(paddingVertical, " + ").concat(swatchMarginVertical, " - ").concat(paddingHorizontal));
504
- return css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", "px;}"], padding, props.isBare ? '1em' : height, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math("".concat(swatchMarginHorizontal, " * -2")), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props.theme.space.base * (props.isCompact ? 1 : 2));
505
- };
506
- var StyledTextInput = styled.input.attrs(function (props) {
507
- return {
508
- 'data-garden-id': COMPONENT_ID$D,
509
- 'data-garden-version': '8.57.1',
510
- 'aria-invalid': isInvalid(props.validation)
511
- };
512
- }).withConfig({
307
+ const lineHeight = math(`${height} - (${paddingVertical} * 2) - (${props.theme.borderWidths.sm} * 2)`);
308
+ const padding = props.isBare ? '0' : `${em(paddingVertical, fontSize)} ${em(paddingHorizontal, fontSize)}`;
309
+ const swatchMarginVertical = math(`(${lineHeight} - ${swatchHeight}) / 2`);
310
+ const swatchMarginHorizontal = math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`);
311
+ return css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", "px;}"], padding, props.isBare ? '1em' : height, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math(`${swatchMarginHorizontal} * -2`), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props.theme.space.base * (props.isCompact ? 1 : 2));
312
+ };
313
+ const StyledTextInput = styled.input.attrs(props => ({
314
+ 'data-garden-id': COMPONENT_ID$D,
315
+ 'data-garden-version': '8.58.0',
316
+ 'aria-invalid': isInvalid(props.validation)
317
+ })).withConfig({
513
318
  displayName: "StyledTextInput",
514
319
  componentId: "sc-k12n8x-0"
515
- })(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::placeholder{opacity:1;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";&:focus{outline:none;}", ";&:disabled{cursor:default;}", ";"], function (props) {
516
- return props.theme.rtl && 'rtl';
517
- }, function (props) {
518
- return props.isBare ? 'none' : props.theme.borders.sm;
519
- }, function (props) {
520
- return props.isBare ? '0' : props.theme.borderRadii.md;
521
- }, function (props) {
522
- return props.theme.borderRadii.sm;
523
- }, function (props) {
524
- return props.theme.borderRadii.sm;
525
- }, function (props) {
526
- return props.theme.borderRadii.sm;
527
- }, function (props) {
528
- return props.theme.rtl && 'rtl';
529
- }, function (props) {
530
- return sizeStyles$f(props);
531
- }, function (props) {
532
- return colorStyles$b(props);
533
- }, function (props) {
534
- return retrieveComponentStyles(COMPONENT_ID$D, props);
535
- });
320
+ })(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::placeholder{opacity:1;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";&:focus{outline:none;}", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', props => sizeStyles$f(props), props => colorStyles$b(props), props => retrieveComponentStyles(COMPONENT_ID$D, props));
536
321
  StyledTextInput.defaultProps = {
537
322
  theme: DEFAULT_THEME
538
323
  };
539
324
 
540
- var COMPONENT_ID$C = 'forms.textarea';
541
- var hiddenStyles = "\n visibility: hidden;\n position: absolute;\n overflow: hidden;\n height: 0;\n top: 0;\n left: 0;\n transform: translateZ(0);\n";
542
- var StyledTextarea = styled(StyledTextInput).attrs({
325
+ const COMPONENT_ID$C = 'forms.textarea';
326
+ const hiddenStyles = `
327
+ visibility: hidden;
328
+ position: absolute;
329
+ overflow: hidden;
330
+ height: 0;
331
+ top: 0;
332
+ left: 0;
333
+ transform: translateZ(0);
334
+ `;
335
+ const StyledTextarea = styled(StyledTextInput).attrs({
543
336
  as: 'textarea',
544
337
  'data-garden-id': COMPONENT_ID$C,
545
- 'data-garden-version': '8.57.1'
338
+ 'data-garden-version': '8.58.0'
546
339
  }).withConfig({
547
340
  displayName: "StyledTextarea",
548
341
  componentId: "sc-wxschl-0"
549
- })(["resize:", ";overflow:auto;", ";", ";"], function (props) {
550
- return props.isResizable ? 'vertical' : 'none';
551
- }, function (props) {
552
- return props.isHidden && hiddenStyles;
553
- }, function (props) {
554
- return retrieveComponentStyles(COMPONENT_ID$C, props);
555
- });
342
+ })(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => retrieveComponentStyles(COMPONENT_ID$C, props));
556
343
  StyledTextarea.defaultProps = {
557
344
  theme: DEFAULT_THEME
558
345
  };
559
346
 
560
- var _excluded$i = ["children", "position", "isHovered", "isFocused", "isDisabled", "isRotated", "theme"];
561
- var COMPONENT_ID$B = 'forms.media_figure';
562
- var colorStyles$a = function colorStyles(props) {
563
- var shade = 600;
347
+ const COMPONENT_ID$B = 'forms.media_figure';
348
+ const colorStyles$a = props => {
349
+ let shade = 600;
564
350
  if (props.isDisabled) {
565
351
  shade = 400;
566
352
  } else if (props.isHovered || props.isFocused) {
@@ -568,11 +354,11 @@ var colorStyles$a = function colorStyles(props) {
568
354
  }
569
355
  return css(["color:", ";"], getColor('neutralHue', shade, props.theme));
570
356
  };
571
- var sizeStyles$e = function sizeStyles(props) {
572
- var size = props.theme.iconSizes.md;
573
- var marginFirst = "1px ".concat(props.theme.space.base * 2, "px auto 0");
574
- var marginLast = "1px 0 auto ".concat(props.theme.space.base * 2, "px");
575
- var margin;
357
+ const sizeStyles$e = props => {
358
+ const size = props.theme.iconSizes.md;
359
+ const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;
360
+ const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;
361
+ let margin;
576
362
  if (props.position === 'start') {
577
363
  margin = props.theme.rtl ? marginLast : marginFirst;
578
364
  } else {
@@ -580,286 +366,220 @@ var sizeStyles$e = function sizeStyles(props) {
580
366
  }
581
367
  return css(["margin:", ";width:", ";height:", ";"], margin, size, size);
582
368
  };
583
- var StyledTextMediaFigure = styled(
584
- function (_ref) {
585
- var children = _ref.children;
586
- _ref.position;
587
- _ref.isHovered;
588
- _ref.isFocused;
589
- _ref.isDisabled;
590
- _ref.isRotated;
591
- _ref.theme;
592
- var props = _objectWithoutProperties(_ref, _excluded$i);
369
+ const StyledTextMediaFigure = styled(
370
+ _ref => {
371
+ let {
372
+ children,
373
+ position,
374
+ isHovered,
375
+ isFocused,
376
+ isDisabled,
377
+ isRotated,
378
+ theme,
379
+ ...props
380
+ } = _ref;
593
381
  return React__default.cloneElement(Children.only(children), props);
594
382
  }).attrs({
595
383
  'data-garden-id': COMPONENT_ID$B,
596
- 'data-garden-version': '8.57.1'
384
+ 'data-garden-version': '8.58.0'
597
385
  }).withConfig({
598
386
  displayName: "StyledTextMediaFigure",
599
387
  componentId: "sc-1qepknj-0"
600
- })(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], function (props) {
601
- return props.isRotated && "rotate(".concat(props.theme.rtl ? '-' : '+', "180deg)");
602
- }, function (props) {
603
- return colorStyles$a(props);
604
- }, function (props) {
605
- return sizeStyles$e(props);
606
- }, function (props) {
607
- return retrieveComponentStyles(COMPONENT_ID$B, props);
608
- });
388
+ })(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => colorStyles$a(props), props => sizeStyles$e(props), props => retrieveComponentStyles(COMPONENT_ID$B, props));
609
389
  StyledTextMediaFigure.defaultProps = {
610
390
  theme: DEFAULT_THEME
611
391
  };
612
392
 
613
- var COMPONENT_ID$A = 'forms.faux_input';
614
- var StyledTextFauxInput = styled(StyledTextInput).attrs(function (props) {
615
- return {
616
- as: 'div',
617
- 'aria-readonly': props.isReadOnly,
618
- 'aria-disabled': props.isDisabled,
619
- 'data-garden-id': COMPONENT_ID$A,
620
- 'data-garden-version': '8.57.1'
621
- };
622
- }).withConfig({
393
+ const COMPONENT_ID$A = 'forms.faux_input';
394
+ const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
395
+ as: 'div',
396
+ 'aria-readonly': props.isReadOnly,
397
+ 'aria-disabled': props.isDisabled,
398
+ 'data-garden-id': COMPONENT_ID$A,
399
+ 'data-garden-version': '8.58.0'
400
+ })).withConfig({
623
401
  displayName: "StyledTextFauxInput",
624
402
  componentId: "sc-yqw7j9-0"
625
- })(["display:", ";align-items:", ";cursor:", ";overflow:hidden;& > ", "{vertical-align:", ";}& > ", "{flex-shrink:", ";}", ";"], function (props) {
626
- return props.mediaLayout ? 'inline-flex' : 'inline-block';
627
- }, function (props) {
628
- return props.mediaLayout && 'baseline';
629
- }, function (props) {
630
- return props.mediaLayout && !props.isDisabled ? 'text' : 'default';
631
- }, StyledTextInput, function (props) {
632
- return !props.mediaLayout && 'baseline';
633
- }, StyledTextMediaFigure, function (props) {
634
- return props.mediaLayout && '0';
635
- }, function (props) {
636
- return retrieveComponentStyles(COMPONENT_ID$A, props);
637
- });
403
+ })(["display:", ";align-items:", ";cursor:", ";overflow:hidden;& > ", "{vertical-align:", ";}& > ", "{flex-shrink:", ";}", ";"], props => props.mediaLayout ? 'inline-flex' : 'inline-block', props => props.mediaLayout && 'baseline', props => props.mediaLayout && !props.isDisabled ? 'text' : 'default', StyledTextInput, props => !props.mediaLayout && 'baseline', StyledTextMediaFigure, props => props.mediaLayout && '0', props => retrieveComponentStyles(COMPONENT_ID$A, props));
638
404
  StyledTextFauxInput.defaultProps = {
639
405
  theme: DEFAULT_THEME
640
406
  };
641
407
 
642
- var COMPONENT_ID$z = 'forms.media_input';
643
- var StyledTextMediaInput = styled(StyledTextInput).attrs({
408
+ const COMPONENT_ID$z = 'forms.media_input';
409
+ const StyledTextMediaInput = styled(StyledTextInput).attrs({
644
410
  'data-garden-id': COMPONENT_ID$z,
645
- 'data-garden-version': '8.57.1',
411
+ 'data-garden-version': '8.58.0',
646
412
  isBare: true
647
413
  }).withConfig({
648
414
  displayName: "StyledTextMediaInput",
649
415
  componentId: "sc-12i9xfi-0"
650
- })(["flex-grow:1;", ";"], function (props) {
651
- return retrieveComponentStyles(COMPONENT_ID$z, props);
652
- });
416
+ })(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$z, props));
653
417
  StyledTextMediaInput.defaultProps = {
654
418
  theme: DEFAULT_THEME
655
419
  };
656
420
 
657
- var COMPONENT_ID$y = 'forms.input_group';
658
- var positionStyles = function positionStyles(props) {
659
- var topMargin = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
660
- var startDirection = props.theme.rtl ? 'right' : 'left';
661
- var endDirection = props.theme.rtl ? 'left' : 'right';
421
+ const COMPONENT_ID$y = 'forms.input_group';
422
+ const positionStyles = props => {
423
+ const topMargin = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
424
+ const startDirection = props.theme.rtl ? 'right' : 'left';
425
+ const endDirection = props.theme.rtl ? 'left' : 'right';
662
426
  return css(["", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}& > ", "{position:relative;flex:1 1 auto;margin-top:0;margin-bottom:0;width:auto;min-width:0;}& > ", ":not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > ", ":not(:last-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}"], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, topMargin, StyledTextInput, StyledTextInput, startDirection, startDirection, StyledTextInput, endDirection, endDirection);
663
427
  };
664
- var itemStyles = function itemStyles(props) {
665
- var horizontal = props.theme.rtl ? 'right' : 'left';
428
+ const itemStyles = props => {
429
+ const horizontal = props.theme.rtl ? 'right' : 'left';
666
430
  return css(["& > *{margin-", ":-", " !important;z-index:-1;}& > ", ":hover,& > button:hover,& > ", "[data-garden-focus-visible],& > button[data-garden-focus-visible],& > ", ":active,& > button:active{z-index:1;}& > button:disabled{border-top-width:0;border-bottom-width:0;}& > ", ":disabled{z-index:-2;}& > *:first-child:not(:last-child){margin-", ":0;border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:last-child:not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:not(:first-child):not(:last-child){border-radius:0;}"], horizontal, props.theme.borderWidths.sm, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, props.theme.rtl ? 'right' : 'left', props.theme.rtl ? 'left' : 'right', props.theme.rtl ? 'left' : 'right', props.theme.rtl ? 'right' : 'left', props.theme.rtl ? 'right' : 'left');
667
431
  };
668
- var StyledInputGroup = styled.div.attrs({
432
+ const StyledInputGroup = styled.div.attrs({
669
433
  'data-garden-id': COMPONENT_ID$y,
670
- 'data-garden-version': '8.57.1'
434
+ 'data-garden-version': '8.58.0'
671
435
  }).withConfig({
672
436
  displayName: "StyledInputGroup",
673
437
  componentId: "sc-kjh1f0-0"
674
- })(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], function (props) {
675
- return positionStyles(props);
676
- }, function (props) {
677
- return itemStyles(props);
678
- }, function (props) {
679
- return retrieveComponentStyles(COMPONENT_ID$y, props);
680
- });
438
+ })(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], props => positionStyles(props), props => itemStyles(props), props => retrieveComponentStyles(COMPONENT_ID$y, props));
681
439
  StyledInputGroup.defaultProps = {
682
440
  theme: DEFAULT_THEME
683
441
  };
684
442
 
685
- var COMPONENT_ID$x = 'forms.radio_label';
686
- var sizeStyles$d = function sizeStyles(props) {
687
- var size = props.theme.space.base * 4;
688
- var padding = size + props.theme.space.base * 2;
689
- var lineHeight = props.theme.space.base * 5;
443
+ const COMPONENT_ID$x = 'forms.radio_label';
444
+ const sizeStyles$d = props => {
445
+ const size = props.theme.space.base * 4;
446
+ const padding = size + props.theme.space.base * 2;
447
+ const lineHeight = props.theme.space.base * 5;
690
448
  return css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;line-height:", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size, lineHeight);
691
449
  };
692
- var StyledRadioLabel = styled(StyledLabel).attrs({
450
+ const StyledRadioLabel = styled(StyledLabel).attrs({
693
451
  'data-garden-id': COMPONENT_ID$x,
694
- 'data-garden-version': '8.57.1',
452
+ 'data-garden-version': '8.58.0',
695
453
  isRadio: true
696
454
  }).withConfig({
697
455
  displayName: "StyledRadioLabel",
698
456
  componentId: "sc-1aq2e5t-0"
699
- })(["display:inline-block;position:relative;cursor:pointer;user-select:none;", ";", ";"], function (props) {
700
- return sizeStyles$d(props);
701
- }, function (props) {
702
- return retrieveComponentStyles(COMPONENT_ID$x, props);
703
- });
457
+ })(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$d(props), props => retrieveComponentStyles(COMPONENT_ID$x, props));
704
458
  StyledRadioLabel.defaultProps = {
705
459
  theme: DEFAULT_THEME
706
460
  };
707
461
 
708
- var COMPONENT_ID$w = 'forms.checkbox_label';
709
- var StyledCheckLabel = styled(StyledRadioLabel).attrs({
462
+ const COMPONENT_ID$w = 'forms.checkbox_label';
463
+ const StyledCheckLabel = styled(StyledRadioLabel).attrs({
710
464
  'data-garden-id': COMPONENT_ID$w,
711
- 'data-garden-version': '8.57.1'
465
+ 'data-garden-version': '8.58.0'
712
466
  }).withConfig({
713
467
  displayName: "StyledCheckLabel",
714
468
  componentId: "sc-x7nr1-0"
715
- })(["", ";"], function (props) {
716
- return retrieveComponentStyles(COMPONENT_ID$w, props);
717
- });
469
+ })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$w, props));
718
470
  StyledCheckLabel.defaultProps = {
719
471
  theme: DEFAULT_THEME
720
472
  };
721
473
 
722
- var COMPONENT_ID$v = 'forms.radio_hint';
723
- var StyledRadioHint = styled(StyledHint).attrs({
474
+ const COMPONENT_ID$v = 'forms.radio_hint';
475
+ const StyledRadioHint = styled(StyledHint).attrs({
724
476
  'data-garden-id': COMPONENT_ID$v,
725
- 'data-garden-version': '8.57.1'
477
+ 'data-garden-version': '8.58.0'
726
478
  }).withConfig({
727
479
  displayName: "StyledRadioHint",
728
480
  componentId: "sc-eo8twg-0"
729
- })(["padding-", ":", ";", ";"], function (props) {
730
- return props.theme.rtl ? 'right' : 'left';
731
- }, function (props) {
732
- return math("".concat(props.theme.space.base, " * 6px"));
733
- }, function (props) {
734
- return retrieveComponentStyles(COMPONENT_ID$v, props);
735
- });
481
+ })(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$v, props));
736
482
  StyledRadioHint.defaultProps = {
737
483
  theme: DEFAULT_THEME
738
484
  };
739
485
 
740
- var COMPONENT_ID$u = 'forms.checkbox_hint';
741
- var StyledCheckHint = styled(StyledRadioHint).attrs({
486
+ const COMPONENT_ID$u = 'forms.checkbox_hint';
487
+ const StyledCheckHint = styled(StyledRadioHint).attrs({
742
488
  'data-garden-id': COMPONENT_ID$u,
743
- 'data-garden-version': '8.57.1'
489
+ 'data-garden-version': '8.58.0'
744
490
  }).withConfig({
745
491
  displayName: "StyledCheckHint",
746
492
  componentId: "sc-1kl8e8c-0"
747
- })(["", ";"], function (props) {
748
- return retrieveComponentStyles(COMPONENT_ID$u, props);
749
- });
493
+ })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$u, props));
750
494
  StyledCheckHint.defaultProps = {
751
495
  theme: DEFAULT_THEME
752
496
  };
753
497
 
754
- var COMPONENT_ID$t = 'forms.radio';
755
- var colorStyles$9 = function colorStyles(props) {
756
- var SHADE = 600;
757
- var borderColor = getColor('neutralHue', SHADE - 300, props.theme);
758
- var backgroundColor = props.theme.colors.background;
759
- var iconColor = backgroundColor;
760
- var hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08);
761
- var hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
762
- var focusBorderColor = hoverBorderColor;
763
- var activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2);
764
- var activeBorderColor = focusBorderColor;
765
- var boxShadow = props.theme.shadows.md(rgba(focusBorderColor, 0.35));
766
- var checkedBorderColor = focusBorderColor;
767
- var checkedBackgroundColor = checkedBorderColor;
768
- var checkedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
769
- var checkedHoverBackgroundColor = checkedHoverBorderColor;
770
- var checkedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme);
771
- var checkedActiveBackgroundColor = checkedActiveBorderColor;
772
- var disabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
498
+ const COMPONENT_ID$t = 'forms.radio';
499
+ const colorStyles$9 = props => {
500
+ const SHADE = 600;
501
+ const borderColor = getColor('neutralHue', SHADE - 300, props.theme);
502
+ const backgroundColor = props.theme.colors.background;
503
+ const iconColor = backgroundColor;
504
+ const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08);
505
+ const hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
506
+ const focusBorderColor = hoverBorderColor;
507
+ const activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2);
508
+ const activeBorderColor = focusBorderColor;
509
+ const boxShadow = props.theme.shadows.md(rgba(focusBorderColor, 0.35));
510
+ const checkedBorderColor = focusBorderColor;
511
+ const checkedBackgroundColor = checkedBorderColor;
512
+ const checkedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
513
+ const checkedHoverBackgroundColor = checkedHoverBorderColor;
514
+ const checkedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme);
515
+ const checkedActiveBackgroundColor = checkedActiveBorderColor;
516
+ const disabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
773
517
  return css(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}&[data-garden-focus-visible='true'] ~ ", "::before{border-color:", ";box-shadow:", ";}& ~ ", ":active::before{border-color:", ";background-color:", ";}&:checked ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":hover::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledRadioLabel, borderColor, backgroundColor, StyledRadioLabel, iconColor, StyledRadioLabel, hoverBorderColor, hoverBackgroundColor, StyledRadioLabel, focusBorderColor, boxShadow, StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
774
518
  };
775
- var sizeStyles$c = function sizeStyles(props) {
776
- var lineHeight = "".concat(props.theme.space.base * 5, "px");
777
- var size = "".concat(props.theme.space.base * 4, "px");
778
- var top = math("(".concat(lineHeight, " - ").concat(size, ") / 2"));
779
- var iconSize = props.theme.iconSizes.sm;
780
- var iconPosition = math("(".concat(size, " - ").concat(iconSize, ") / 2"));
781
- var iconTop = math("".concat(iconPosition, " + ").concat(top));
782
- var marginTop = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
519
+ const sizeStyles$c = props => {
520
+ const lineHeight = `${props.theme.space.base * 5}px`;
521
+ const size = `${props.theme.space.base * 4}px`;
522
+ const top = math(`(${lineHeight} - ${size}) / 2`);
523
+ const iconSize = props.theme.iconSizes.sm;
524
+ const iconPosition = math(`(${size} - ${iconSize}) / 2`);
525
+ const iconTop = math(`${iconPosition} + ${top}`);
526
+ const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
783
527
  return css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
784
528
  };
785
- var StyledRadioInput = styled.input.attrs({
529
+ const StyledRadioInput = styled.input.attrs({
786
530
  'data-garden-id': COMPONENT_ID$t,
787
- 'data-garden-version': '8.57.1',
531
+ 'data-garden-version': '8.58.0',
788
532
  type: 'radio'
789
533
  }).withConfig({
790
534
  displayName: "StyledRadioInput",
791
535
  componentId: "sc-qsavpv-0"
792
- })(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, function (props) {
793
- return props.theme.rtl ? 'right' : 'left';
794
- }, function (props) {
795
- return props.theme.borders.sm;
796
- }, StyledRadioLabel, function (props) {
797
- return sizeStyles$c(props);
798
- }, StyledRadioLabel, StyledRadioLabel, function (props) {
799
- return colorStyles$9(props);
800
- }, StyledRadioLabel, function (props) {
801
- return retrieveComponentStyles(COMPONENT_ID$t, props);
802
- });
536
+ })(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, StyledRadioLabel, props => sizeStyles$c(props), StyledRadioLabel, StyledRadioLabel, props => colorStyles$9(props), StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID$t, props));
803
537
  StyledRadioInput.defaultProps = {
804
538
  theme: DEFAULT_THEME
805
539
  };
806
540
 
807
- var COMPONENT_ID$s = 'forms.checkbox';
808
- var colorStyles$8 = function colorStyles(props) {
809
- var SHADE = 600;
810
- var indeterminateBorderColor = getColor('primaryHue', SHADE, props.theme);
811
- var indeterminateBackgroundColor = indeterminateBorderColor;
812
- var indeterminateActiveBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
813
- var indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
814
- var indeterminateDisabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
541
+ const COMPONENT_ID$s = 'forms.checkbox';
542
+ const colorStyles$8 = props => {
543
+ const SHADE = 600;
544
+ const indeterminateBorderColor = getColor('primaryHue', SHADE, props.theme);
545
+ const indeterminateBackgroundColor = indeterminateBorderColor;
546
+ const indeterminateActiveBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
547
+ const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
548
+ const indeterminateDisabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
815
549
  return css(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled:indeterminate ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledCheckLabel, indeterminateBorderColor, indeterminateBackgroundColor, StyledCheckLabel, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel, indeterminateDisabledBackgroundColor);
816
550
  };
817
- var StyledCheckInput = styled(StyledRadioInput).attrs({
551
+ const StyledCheckInput = styled(StyledRadioInput).attrs({
818
552
  'data-garden-id': COMPONENT_ID$s,
819
- 'data-garden-version': '8.57.1',
553
+ 'data-garden-version': '8.58.0',
820
554
  type: 'checkbox'
821
555
  }).withConfig({
822
556
  displayName: "StyledCheckInput",
823
557
  componentId: "sc-176jxxe-0"
824
- })(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, function (props) {
825
- return props.theme.borderRadii.md;
826
- }, function (props) {
827
- return colorStyles$8(props);
828
- }, function (props) {
829
- return retrieveComponentStyles(COMPONENT_ID$s, props);
830
- });
558
+ })(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, props => colorStyles$8(props), props => retrieveComponentStyles(COMPONENT_ID$s, props));
831
559
  StyledCheckInput.defaultProps = {
832
560
  theme: DEFAULT_THEME
833
561
  };
834
562
 
835
- var COMPONENT_ID$r = 'forms.radio_message';
836
- var StyledRadioMessage = styled(StyledMessage).attrs({
563
+ const COMPONENT_ID$r = 'forms.radio_message';
564
+ const StyledRadioMessage = styled(StyledMessage).attrs({
837
565
  'data-garden-id': COMPONENT_ID$r,
838
- 'data-garden-version': '8.57.1'
566
+ 'data-garden-version': '8.58.0'
839
567
  }).withConfig({
840
568
  displayName: "StyledRadioMessage",
841
569
  componentId: "sc-1pmi0q8-0"
842
- })(["padding-", ":", ";", ";"], function (props) {
843
- return props.theme.rtl ? 'right' : 'left';
844
- }, function (props) {
845
- return math("".concat(props.theme.space.base, " * 6px"));
846
- }, function (props) {
847
- return retrieveComponentStyles(COMPONENT_ID$r, props);
848
- });
570
+ })(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$r, props));
849
571
  StyledRadioMessage.defaultProps = {
850
572
  theme: DEFAULT_THEME
851
573
  };
852
574
 
853
- var COMPONENT_ID$q = 'forms.checkbox_message';
854
- var StyledCheckMessage = styled(StyledRadioMessage).attrs({
575
+ const COMPONENT_ID$q = 'forms.checkbox_message';
576
+ const StyledCheckMessage = styled(StyledRadioMessage).attrs({
855
577
  'data-garden-id': COMPONENT_ID$q,
856
- 'data-garden-version': '8.57.1'
578
+ 'data-garden-version': '8.58.0'
857
579
  }).withConfig({
858
580
  displayName: "StyledCheckMessage",
859
581
  componentId: "sc-s4p6kd-0"
860
- })(["", ";"], function (props) {
861
- return retrieveComponentStyles(COMPONENT_ID$q, props);
862
- });
582
+ })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$q, props));
863
583
  StyledCheckMessage.defaultProps = {
864
584
  theme: DEFAULT_THEME
865
585
  };
@@ -875,7 +595,8 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
875
595
  height: 12,
876
596
  focusable: "false",
877
597
  viewBox: "0 0 12 12",
878
- "aria-hidden": "true"
598
+ "aria-hidden": "true",
599
+ role: "img"
879
600
  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
880
601
  fill: "none",
881
602
  stroke: "currentColor",
@@ -886,16 +607,14 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
886
607
  })));
887
608
  };
888
609
 
889
- var COMPONENT_ID$p = 'forms.check_svg';
890
- var StyledCheckSvg = styled(SvgCheckSmFill).attrs({
610
+ const COMPONENT_ID$p = 'forms.check_svg';
611
+ const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
891
612
  'data-garden-id': COMPONENT_ID$p,
892
- 'data-garden-version': '8.57.1'
613
+ 'data-garden-version': '8.58.0'
893
614
  }).withConfig({
894
615
  displayName: "StyledCheckSvg",
895
616
  componentId: "sc-fvxetk-0"
896
- })(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, function (props) {
897
- return retrieveComponentStyles(COMPONENT_ID$p, props);
898
- });
617
+ })(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID$p, props));
899
618
  StyledCheckSvg.defaultProps = {
900
619
  theme: DEFAULT_THEME
901
620
  };
@@ -911,7 +630,8 @@ var SvgDashFill = function SvgDashFill(props) {
911
630
  height: 12,
912
631
  focusable: "false",
913
632
  viewBox: "0 0 12 12",
914
- "aria-hidden": "true"
633
+ "aria-hidden": "true",
634
+ role: "img"
915
635
  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
916
636
  stroke: "currentColor",
917
637
  strokeLinecap: "round",
@@ -920,78 +640,64 @@ var SvgDashFill = function SvgDashFill(props) {
920
640
  })));
921
641
  };
922
642
 
923
- var COMPONENT_ID$o = 'forms.dash_svg';
924
- var StyledDashSvg = styled(SvgDashFill).attrs({
643
+ const COMPONENT_ID$o = 'forms.dash_svg';
644
+ const StyledDashSvg = styled(SvgDashFill).attrs({
925
645
  'data-garden-id': COMPONENT_ID$o,
926
- 'data-garden-version': '8.57.1'
646
+ 'data-garden-version': '8.58.0'
927
647
  }).withConfig({
928
648
  displayName: "StyledDashSvg",
929
649
  componentId: "sc-z3vq71-0"
930
- })(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, function (props) {
931
- return retrieveComponentStyles(COMPONENT_ID$o, props);
932
- });
650
+ })(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID$o, props));
933
651
  StyledDashSvg.defaultProps = {
934
652
  theme: DEFAULT_THEME
935
653
  };
936
654
 
937
- var COMPONENT_ID$n = 'forms.file_upload';
938
- var colorStyles$7 = function colorStyles(props) {
939
- var baseColor = getColor('primaryHue', 600, props.theme);
940
- var hoverColor = getColor('primaryHue', 700, props.theme);
941
- var activeColor = getColor('primaryHue', 800, props.theme);
942
- var disabledBackgroundColor = getColor('neutralHue', 200, props.theme);
943
- var disabledForegroundColor = getColor('neutralHue', 400, props.theme);
944
- var boxShadow = "inset ".concat(props.theme.shadows.md(rgba(baseColor, 0.35)));
655
+ const COMPONENT_ID$n = 'forms.file_upload';
656
+ const colorStyles$7 = props => {
657
+ const baseColor = getColor('primaryHue', 600, props.theme);
658
+ const hoverColor = getColor('primaryHue', 700, props.theme);
659
+ const activeColor = getColor('primaryHue', 800, props.theme);
660
+ const disabledBackgroundColor = getColor('neutralHue', 200, props.theme);
661
+ const disabledForegroundColor = getColor('neutralHue', 400, props.theme);
662
+ const boxShadow = `inset ${props.theme.shadows.md(rgba(baseColor, 0.35))}`;
945
663
  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isDragging ? activeColor : getColor('neutralHue', 600, props.theme), props.isDragging && rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, rgba(baseColor, 0.08), hoverColor, boxShadow, activeColor, rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
946
664
  };
947
- var sizeStyles$b = function sizeStyles(props) {
948
- var marginTop = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
949
- var paddingHorizontal = "".concat(props.isCompact ? 2 : 4, "em");
950
- var paddingVertical = math("".concat(props.theme.space.base * (props.isCompact ? 2.5 : 5), " - ").concat(props.theme.borderWidths.sm));
951
- var fontSize = props.theme.fontSizes.md;
952
- var lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
665
+ const sizeStyles$b = props => {
666
+ const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
667
+ const paddingHorizontal = `${props.isCompact ? 2 : 4}em`;
668
+ const paddingVertical = math(`${props.theme.space.base * (props.isCompact ? 2.5 : 5)} - ${props.theme.borderWidths.sm}`);
669
+ const fontSize = props.theme.fontSizes.md;
670
+ const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
953
671
  return css(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
954
672
  };
955
- var StyledFileUpload = styled.div.attrs({
673
+ const StyledFileUpload = styled.div.attrs({
956
674
  'data-garden-id': COMPONENT_ID$n,
957
- 'data-garden-version': '8.57.1'
675
+ 'data-garden-version': '8.58.0'
958
676
  }).withConfig({
959
677
  displayName: "StyledFileUpload",
960
678
  componentId: "sc-1rodjgn-0"
961
- })(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&:focus{outline:none;}&[aria-disabled='true']{cursor:default;}", ";", ";"], function (props) {
962
- return props.theme.rtl ? 'rtl' : 'ltr';
963
- }, function (props) {
964
- return props.theme.borderWidths.sm;
965
- }, function (props) {
966
- return props.theme.borderRadii.md;
967
- }, sizeStyles$b, colorStyles$7, function (props) {
968
- return retrieveComponentStyles(COMPONENT_ID$n, props);
969
- });
679
+ })(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&:focus{outline:none;}&[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderWidths.sm, props => props.theme.borderRadii.md, sizeStyles$b, colorStyles$7, props => retrieveComponentStyles(COMPONENT_ID$n, props));
970
680
  StyledFileUpload.defaultProps = {
971
681
  theme: DEFAULT_THEME
972
682
  };
973
683
 
974
- var COMPONENT_ID$m = 'forms.file.close';
975
- var StyledFileClose = styled.div.attrs({
684
+ const COMPONENT_ID$m = 'forms.file.close';
685
+ const StyledFileClose = styled.div.attrs({
976
686
  'data-garden-id': COMPONENT_ID$m,
977
- 'data-garden-version': '8.57.1'
687
+ 'data-garden-version': '8.58.0'
978
688
  }).withConfig({
979
689
  displayName: "StyledFileClose",
980
690
  componentId: "sc-1m31jbf-0"
981
- })(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;cursor:pointer;color:", ";&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], function (props) {
982
- return props.theme.colors.foreground;
983
- }, function (props) {
984
- return retrieveComponentStyles(COMPONENT_ID$m, props);
985
- });
691
+ })(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;cursor:pointer;color:", ";&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => props.theme.colors.foreground, props => retrieveComponentStyles(COMPONENT_ID$m, props));
986
692
  StyledFileClose.defaultProps = {
987
693
  theme: DEFAULT_THEME
988
694
  };
989
695
 
990
- var COMPONENT_ID$l = 'forms.file';
991
- var colorStyles$6 = function colorStyles(props) {
992
- var borderColor;
993
- var focusBorderColor;
994
- var foregroundColor;
696
+ const COMPONENT_ID$l = 'forms.file';
697
+ const colorStyles$6 = props => {
698
+ let borderColor;
699
+ let focusBorderColor;
700
+ let foregroundColor;
995
701
  if (props.validation === 'success') {
996
702
  borderColor = getColor('successHue', 600, props.theme);
997
703
  focusBorderColor = borderColor;
@@ -1005,100 +711,107 @@ var colorStyles$6 = function colorStyles(props) {
1005
711
  focusBorderColor = getColor('primaryHue', 600, props.theme);
1006
712
  foregroundColor = props.theme.colors.foreground;
1007
713
  }
1008
- var boxShadow = "\n ".concat(props.focusInset ? 'inset' : '', "\n ").concat(props.theme.shadows.md(rgba(focusBorderColor, 0.35)));
1009
- return "\n border-color: ".concat(borderColor, ";\n color: ").concat(foregroundColor, ";\n\n &:focus {\n box-shadow: ").concat(boxShadow, ";\n border-color: ").concat(focusBorderColor, ";\n }\n ");
1010
- };
1011
- var sizeStyles$a = function sizeStyles(props) {
1012
- var size = "".concat(props.theme.space.base * (props.isCompact ? 7 : 10), "px");
1013
- var spacing = "".concat(props.theme.space.base * (props.isCompact ? 2 : 3), "px");
1014
- var fontSize = props.theme.fontSizes.md;
1015
- var lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
1016
- return "\n box-sizing: border-box;\n border: ".concat(props.theme.borders.sm, ";\n border-radius: ").concat(props.theme.borderRadii.md, ";\n padding: 0 ").concat(spacing, ";\n height: ").concat(size, ";\n line-height: ").concat(lineHeight, ";\n font-size: ").concat(fontSize, ";\n\n & > span {\n width: 100%;\n }\n\n & > ").concat(StyledFileClose, " {\n width: ").concat(size, ";\n height: ").concat(size, ";\n margin-").concat(props.theme.rtl ? 'left' : 'right', ": -").concat(spacing, ";\n }\n ");
714
+ const boxShadow = `
715
+ ${props.focusInset ? 'inset' : ''}
716
+ ${props.theme.shadows.md(rgba(focusBorderColor, 0.35))}`;
717
+ return `
718
+ border-color: ${borderColor};
719
+ color: ${foregroundColor};
720
+
721
+ &:focus {
722
+ box-shadow: ${boxShadow};
723
+ border-color: ${focusBorderColor};
724
+ }
725
+ `;
726
+ };
727
+ const sizeStyles$a = props => {
728
+ const size = `${props.theme.space.base * (props.isCompact ? 7 : 10)}px`;
729
+ const spacing = `${props.theme.space.base * (props.isCompact ? 2 : 3)}px`;
730
+ const fontSize = props.theme.fontSizes.md;
731
+ const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
732
+ return `
733
+ box-sizing: border-box;
734
+ border: ${props.theme.borders.sm};
735
+ border-radius: ${props.theme.borderRadii.md};
736
+ padding: 0 ${spacing};
737
+ height: ${size};
738
+ line-height: ${lineHeight};
739
+ font-size: ${fontSize};
740
+
741
+ & > span {
742
+ width: 100%;
743
+ }
744
+
745
+ & > ${StyledFileClose} {
746
+ width: ${size};
747
+ height: ${size};
748
+ margin-${props.theme.rtl ? 'left' : 'right'}: -${spacing};
749
+ }
750
+ `;
1017
751
  };
1018
- var StyledFile = styled.div.attrs({
752
+ const StyledFile = styled.div.attrs({
1019
753
  'data-garden-id': COMPONENT_ID$l,
1020
- 'data-garden-version': '8.57.1'
754
+ 'data-garden-version': '8.58.0'
1021
755
  }).withConfig({
1022
756
  displayName: "StyledFile",
1023
757
  componentId: "sc-195lzp1-0"
1024
- })(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;", ";&:focus{outline:none;}", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles$a, colorStyles$6, function (props) {
1025
- return props.theme.rtl ? 'right' : 'left';
1026
- }, function (props) {
1027
- return retrieveComponentStyles(COMPONENT_ID$l, props);
1028
- });
758
+ })(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;", ";&:focus{outline:none;}", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles$a, colorStyles$6, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID$l, props));
1029
759
  StyledFile.defaultProps = {
1030
760
  theme: DEFAULT_THEME
1031
761
  };
1032
762
 
1033
- var COMPONENT_ID$k = 'forms.file.delete';
1034
- var StyledFileDelete = styled(StyledFileClose).attrs({
763
+ const COMPONENT_ID$k = 'forms.file.delete';
764
+ const StyledFileDelete = styled(StyledFileClose).attrs({
1035
765
  'data-garden-id': COMPONENT_ID$k,
1036
- 'data-garden-version': '8.57.1'
766
+ 'data-garden-version': '8.58.0'
1037
767
  }).withConfig({
1038
768
  displayName: "StyledFileDelete",
1039
769
  componentId: "sc-a8nnhx-0"
1040
- })(["color:", ";", ";"], function (props) {
1041
- return getColor('dangerHue', 600, props.theme);
1042
- }, function (props) {
1043
- return retrieveComponentStyles(COMPONENT_ID$k, props);
1044
- });
770
+ })(["color:", ";", ";"], props => getColor('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$k, props));
1045
771
  StyledFileDelete.defaultProps = {
1046
772
  theme: DEFAULT_THEME
1047
773
  };
1048
774
 
1049
- var _excluded$h = ["children", "isCompact", "theme"];
1050
- var COMPONENT_ID$j = 'forms.file.icon';
1051
- var StyledFileIcon = styled(function (_ref) {
1052
- var children = _ref.children;
1053
- _ref.isCompact;
1054
- _ref.theme;
1055
- var props = _objectWithoutProperties(_ref, _excluded$h);
775
+ const COMPONENT_ID$j = 'forms.file.icon';
776
+ const StyledFileIcon = styled(_ref => {
777
+ let {
778
+ children,
779
+ isCompact,
780
+ theme,
781
+ ...props
782
+ } = _ref;
1056
783
  return React__default.cloneElement(Children.only(children), props);
1057
784
  }).attrs({
1058
785
  'data-garden-id': COMPONENT_ID$j,
1059
- 'data-garden-version': '8.57.1'
786
+ 'data-garden-version': '8.58.0'
1060
787
  }).withConfig({
1061
788
  displayName: "StyledFileIcon",
1062
789
  componentId: "sc-7b3q0c-0"
1063
- })(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], function (props) {
1064
- return props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md;
1065
- }, function (props) {
1066
- return props.theme.rtl ? 'left' : 'right';
1067
- }, function (props) {
1068
- return props.theme.space.base * 2;
1069
- }, function (props) {
1070
- return retrieveComponentStyles(COMPONENT_ID$j, props);
1071
- });
790
+ })(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$j, props));
1072
791
  StyledFileIcon.defaultProps = {
1073
792
  theme: DEFAULT_THEME
1074
793
  };
1075
794
 
1076
- var COMPONENT_ID$i = 'forms.file_list';
1077
- var StyledFileList = styled.ul.attrs({
795
+ const COMPONENT_ID$i = 'forms.file_list';
796
+ const StyledFileList = styled.ul.attrs({
1078
797
  'data-garden-id': COMPONENT_ID$i,
1079
- 'data-garden-version': '8.57.1'
798
+ 'data-garden-version': '8.58.0'
1080
799
  }).withConfig({
1081
800
  displayName: "StyledFileList",
1082
801
  componentId: "sc-gbahjg-0"
1083
- })(["margin:0;padding:0;list-style:none;", ";"], function (props) {
1084
- return retrieveComponentStyles(COMPONENT_ID$i, props);
1085
- });
802
+ })(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID$i, props));
1086
803
  StyledFileList.defaultProps = {
1087
804
  theme: DEFAULT_THEME
1088
805
  };
1089
806
 
1090
- var COMPONENT_ID$h = 'forms.file_list.item';
1091
- var StyledFileListItem = styled.li.attrs({
807
+ const COMPONENT_ID$h = 'forms.file_list.item';
808
+ const StyledFileListItem = styled.li.attrs({
1092
809
  'data-garden-id': COMPONENT_ID$h,
1093
- 'data-garden-version': '8.57.1'
810
+ 'data-garden-version': '8.58.0'
1094
811
  }).withConfig({
1095
812
  displayName: "StyledFileListItem",
1096
813
  componentId: "sc-1ova3lo-0"
1097
- })(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, function (props) {
1098
- return props.theme.space.base * 2;
1099
- }, function (props) {
1100
- return retrieveComponentStyles(COMPONENT_ID$h, props);
1101
- });
814
+ })(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$h, props));
1102
815
  StyledFileListItem.defaultProps = {
1103
816
  theme: DEFAULT_THEME
1104
817
  };
@@ -1114,7 +827,8 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
1114
827
  height: 12,
1115
828
  focusable: "false",
1116
829
  viewBox: "0 0 12 12",
1117
- "aria-hidden": "true"
830
+ "aria-hidden": "true",
831
+ role: "img"
1118
832
  }, props), _circle$3 || (_circle$3 = /*#__PURE__*/React.createElement("circle", {
1119
833
  cx: 6,
1120
834
  cy: 6,
@@ -1123,110 +837,82 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
1123
837
  })));
1124
838
  };
1125
839
 
1126
- var COMPONENT_ID$g = 'forms.radio_svg';
1127
- var StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
840
+ const COMPONENT_ID$g = 'forms.radio_svg';
841
+ const StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
1128
842
  'data-garden-id': COMPONENT_ID$g,
1129
- 'data-garden-version': '8.57.1'
843
+ 'data-garden-version': '8.58.0'
1130
844
  }).withConfig({
1131
845
  displayName: "StyledRadioSvg",
1132
846
  componentId: "sc-1r1qtr1-0"
1133
- })(["transition:opacity 0.25 ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, function (props) {
1134
- return retrieveComponentStyles(COMPONENT_ID$g, props);
1135
- });
847
+ })(["transition:opacity 0.25 ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID$g, props));
1136
848
  StyledRadioSvg.defaultProps = {
1137
849
  theme: DEFAULT_THEME
1138
850
  };
1139
851
 
1140
- var COMPONENT_ID$f = 'forms.toggle_label';
1141
- var sizeStyles$9 = function sizeStyles(props) {
1142
- var size = props.theme.space.base * 10;
1143
- var padding = size + props.theme.space.base * 2;
852
+ const COMPONENT_ID$f = 'forms.toggle_label';
853
+ const sizeStyles$9 = props => {
854
+ const size = props.theme.space.base * 10;
855
+ const padding = size + props.theme.space.base * 2;
1144
856
  return css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size);
1145
857
  };
1146
- var StyledToggleLabel = styled(StyledCheckLabel).attrs({
858
+ const StyledToggleLabel = styled(StyledCheckLabel).attrs({
1147
859
  'data-garden-id': COMPONENT_ID$f,
1148
- 'data-garden-version': '8.57.1'
860
+ 'data-garden-version': '8.58.0'
1149
861
  }).withConfig({
1150
862
  displayName: "StyledToggleLabel",
1151
863
  componentId: "sc-e0asdk-0"
1152
- })(["", ";", ";"], function (props) {
1153
- return sizeStyles$9(props);
1154
- }, function (props) {
1155
- return retrieveComponentStyles(COMPONENT_ID$f, props);
1156
- });
864
+ })(["", ";", ";"], props => sizeStyles$9(props), props => retrieveComponentStyles(COMPONENT_ID$f, props));
1157
865
  StyledToggleLabel.defaultProps = {
1158
866
  theme: DEFAULT_THEME
1159
867
  };
1160
868
 
1161
- var COMPONENT_ID$e = 'forms.toggle_hint';
1162
- var StyledToggleHint = styled(StyledHint).attrs({
869
+ const COMPONENT_ID$e = 'forms.toggle_hint';
870
+ const StyledToggleHint = styled(StyledHint).attrs({
1163
871
  'data-garden-id': COMPONENT_ID$e,
1164
- 'data-garden-version': '8.57.1'
872
+ 'data-garden-version': '8.58.0'
1165
873
  }).withConfig({
1166
874
  displayName: "StyledToggleHint",
1167
875
  componentId: "sc-nziggu-0"
1168
- })(["padding-", ":", ";", ";"], function (props) {
1169
- return props.theme.rtl ? 'right' : 'left';
1170
- }, function (props) {
1171
- return math("".concat(props.theme.space.base, " * 12px"));
1172
- }, function (props) {
1173
- return retrieveComponentStyles(COMPONENT_ID$e, props);
1174
- });
876
+ })(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), props => retrieveComponentStyles(COMPONENT_ID$e, props));
1175
877
  StyledToggleHint.defaultProps = {
1176
878
  theme: DEFAULT_THEME
1177
879
  };
1178
880
 
1179
- var COMPONENT_ID$d = 'forms.toggle';
1180
- var colorStyles$5 = function colorStyles(props) {
1181
- var SHADE = 600;
1182
- var backgroundColor = getColor('neutralHue', SHADE - 100, props.theme);
1183
- var hoverBackgroundColor = getColor('neutralHue', SHADE, props.theme);
1184
- var activeBackgroundColor = getColor('neutralHue', SHADE + 100, props.theme);
881
+ const COMPONENT_ID$d = 'forms.toggle';
882
+ const colorStyles$5 = props => {
883
+ const SHADE = 600;
884
+ const backgroundColor = getColor('neutralHue', SHADE - 100, props.theme);
885
+ const hoverBackgroundColor = getColor('neutralHue', SHADE, props.theme);
886
+ const activeBackgroundColor = getColor('neutralHue', SHADE + 100, props.theme);
1185
887
  return css(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor);
1186
888
  };
1187
- var sizeStyles$8 = function sizeStyles(props) {
1188
- var height = "".concat(props.theme.space.base * 5, "px");
1189
- var width = "".concat(props.theme.space.base * 10, "px");
1190
- var iconSize = props.theme.iconSizes.md;
1191
- var iconPosition = math("(".concat(height, " - ").concat(iconSize, ") / 2"));
1192
- var checkedIconPosition = math("".concat(width, " - ").concat(iconSize, " - ").concat(iconPosition));
889
+ const sizeStyles$8 = props => {
890
+ const height = `${props.theme.space.base * 5}px`;
891
+ const width = `${props.theme.space.base * 10}px`;
892
+ const iconSize = props.theme.iconSizes.md;
893
+ const iconPosition = math(`(${height} - ${iconSize}) / 2`);
894
+ const checkedIconPosition = math(`${width} - ${iconSize} - ${iconPosition}`);
1193
895
  return css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, props.theme.rtl ? 'right' : 'left', checkedIconPosition);
1194
896
  };
1195
- var StyledToggleInput = styled(StyledCheckInput).attrs({
897
+ const StyledToggleInput = styled(StyledCheckInput).attrs({
1196
898
  'data-garden-id': COMPONENT_ID$d,
1197
- 'data-garden-version': '8.57.1'
899
+ 'data-garden-version': '8.58.0'
1198
900
  }).withConfig({
1199
901
  displayName: "StyledToggleInput",
1200
902
  componentId: "sc-sgp47s-0"
1201
- })(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, function (props) {
1202
- return sizeStyles$8(props);
1203
- }, function (props) {
1204
- return colorStyles$5(props);
1205
- }, function (props) {
1206
- return retrieveComponentStyles(COMPONENT_ID$d, props);
1207
- });
903
+ })(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, props => sizeStyles$8(props), props => colorStyles$5(props), props => retrieveComponentStyles(COMPONENT_ID$d, props));
1208
904
  StyledToggleInput.defaultProps = {
1209
905
  theme: DEFAULT_THEME
1210
906
  };
1211
907
 
1212
- var COMPONENT_ID$c = 'forms.toggle_message';
1213
- var StyledToggleMessage = styled(StyledMessage).attrs({
908
+ const COMPONENT_ID$c = 'forms.toggle_message';
909
+ const StyledToggleMessage = styled(StyledMessage).attrs({
1214
910
  'data-garden-id': COMPONENT_ID$c,
1215
- 'data-garden-version': '8.57.1'
911
+ 'data-garden-version': '8.58.0'
1216
912
  }).withConfig({
1217
913
  displayName: "StyledToggleMessage",
1218
914
  componentId: "sc-13vuvl1-0"
1219
- })(["padding-", ":", ";& ", "{", ":", ";}", ";"], function (props) {
1220
- return props.theme.rtl ? 'right' : 'left';
1221
- }, function (props) {
1222
- return math("".concat(props.theme.space.base, " * 12px"));
1223
- }, StyledMessageIcon, function (props) {
1224
- return props.theme.rtl ? 'right' : 'left';
1225
- }, function (props) {
1226
- return math("".concat(props.theme.space.base, " * 10px - ").concat(props.theme.iconSizes.md));
1227
- }, function (props) {
1228
- return retrieveComponentStyles(COMPONENT_ID$c, props);
1229
- });
915
+ })(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => retrieveComponentStyles(COMPONENT_ID$c, props));
1230
916
  StyledToggleMessage.defaultProps = {
1231
917
  theme: DEFAULT_THEME
1232
918
  };
@@ -1242,7 +928,8 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
1242
928
  height: 16,
1243
929
  focusable: "false",
1244
930
  viewBox: "0 0 16 16",
1245
- "aria-hidden": "true"
931
+ "aria-hidden": "true",
932
+ role: "img"
1246
933
  }, props), _circle$2 || (_circle$2 = /*#__PURE__*/React.createElement("circle", {
1247
934
  cx: 8,
1248
935
  cy: 8,
@@ -1251,53 +938,45 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
1251
938
  })));
1252
939
  };
1253
940
 
1254
- var COMPONENT_ID$b = 'forms.toggle_svg';
1255
- var StyledToggleSvg = styled(SvgCircleSmFill).attrs({
941
+ const COMPONENT_ID$b = 'forms.toggle_svg';
942
+ const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
1256
943
  'data-garden-id': COMPONENT_ID$b,
1257
- 'data-garden-version': '8.57.1'
944
+ 'data-garden-version': '8.58.0'
1258
945
  }).withConfig({
1259
946
  displayName: "StyledToggleSvg",
1260
947
  componentId: "sc-162xbyx-0"
1261
- })(["transition:all 0.15s ease-in-out;", ";"], function (props) {
1262
- return retrieveComponentStyles(COMPONENT_ID$b, props);
1263
- });
948
+ })(["transition:all 0.15s ease-in-out;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b, props));
1264
949
  StyledToggleSvg.defaultProps = {
1265
950
  theme: DEFAULT_THEME
1266
951
  };
1267
952
 
1268
- var COMPONENT_ID$a = 'forms.select';
1269
- var colorStyles$4 = function colorStyles(props) {
1270
- var color = getColor('neutralHue', 700, props.theme);
953
+ const COMPONENT_ID$a = 'forms.select';
954
+ const colorStyles$4 = props => {
955
+ const color = getColor('neutralHue', 700, props.theme);
1271
956
  return css(["&:hover + ", ",&:focus + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
1272
957
  };
1273
- var sizeStyles$7 = function sizeStyles(props) {
1274
- var padding = math("".concat(props.theme.iconSizes.md, " + ").concat(props.theme.space.base * 5));
1275
- var iconVerticalPosition = "".concat(props.theme.space.base * (props.isCompact ? 1.5 : 2.5) + 1, "px");
1276
- var iconHorizontalPosition = "".concat(props.theme.space.base * 3, "px");
958
+ const sizeStyles$7 = props => {
959
+ const padding = math(`${props.theme.iconSizes.md} + ${props.theme.space.base * 5}`);
960
+ const iconVerticalPosition = `${props.theme.space.base * (props.isCompact ? 1.5 : 2.5) + 1}px`;
961
+ const iconHorizontalPosition = `${props.theme.space.base * 3}px`;
1277
962
  return css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], props.theme.rtl ? 'left' : 'right', !props.isBare && padding, StyledTextMediaFigure, iconVerticalPosition, props.theme.rtl ? 'left' : 'right', iconHorizontalPosition);
1278
963
  };
1279
- var StyledSelect = styled(StyledTextInput).attrs({
964
+ const StyledSelect = styled(StyledTextInput).attrs({
1280
965
  'data-garden-id': COMPONENT_ID$a,
1281
- 'data-garden-version': '8.57.1',
966
+ 'data-garden-version': '8.58.0',
1282
967
  as: 'select'
1283
968
  }).withConfig({
1284
969
  displayName: "StyledSelect",
1285
970
  componentId: "sc-8xdxpt-0"
1286
- })(["cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], function (props) {
1287
- return sizeStyles$7(props);
1288
- }, function (props) {
1289
- return colorStyles$4(props);
1290
- }, function (props) {
1291
- return props.theme.colors.foreground;
1292
- }, StyledTextMediaFigure);
971
+ })(["cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], props => sizeStyles$7(props), props => colorStyles$4(props), props => props.theme.colors.foreground, StyledTextMediaFigure);
1293
972
  StyledSelect.defaultProps = {
1294
973
  theme: DEFAULT_THEME
1295
974
  };
1296
975
 
1297
- var COMPONENT_ID$9 = 'forms.select_wrapper';
1298
- var StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
976
+ const COMPONENT_ID$9 = 'forms.select_wrapper';
977
+ const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
1299
978
  'data-garden-id': COMPONENT_ID$9,
1300
- 'data-garden-version': '8.57.1',
979
+ 'data-garden-version': '8.58.0',
1301
980
  isBare: true
1302
981
  }).withConfig({
1303
982
  displayName: "StyledSelectWrapper",
@@ -1307,321 +986,331 @@ StyledSelectWrapper.defaultProps = {
1307
986
  theme: DEFAULT_THEME
1308
987
  };
1309
988
 
1310
- var COMPONENT_ID$8 = 'forms.range';
1311
- var thumbStyles = function thumbStyles(styles) {
1312
- var modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
1313
- return "\n &".concat(modifier, "::-moz-range-thumb {\n ").concat(styles, "\n }\n\n &").concat(modifier, "::-ms-thumb {\n ").concat(styles, "\n }\n\n &").concat(modifier, "::-webkit-slider-thumb {\n ").concat(styles, "\n }\n ");
1314
- };
1315
- var trackStyles = function trackStyles(styles) {
1316
- var modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
1317
- return "\n &".concat(modifier, "::-moz-range-track {\n ").concat(styles, "\n }\n\n &").concat(modifier, "::-ms-track {\n ").concat(styles, "\n }\n\n &").concat(modifier, "::-webkit-slider-runnable-track {\n ").concat(styles, "\n }\n ");
1318
- };
1319
- var trackLowerStyles = function trackLowerStyles(styles) {
1320
- var modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
1321
- return "\n &".concat(modifier, "::-moz-range-progress {\n ").concat(styles, "\n }\n\n &").concat(modifier, "::-ms-fill-lower {\n ").concat(styles, "\n }\n ");
1322
- };
1323
- var colorStyles$3 = function colorStyles(props) {
1324
- var SHADE = 600;
1325
- var thumbBackgroundColor = getColor('primaryHue', SHADE, props.theme);
1326
- var thumbBorderColor = thumbBackgroundColor;
1327
- var thumbBoxShadow = props.theme.shadows.lg(math("".concat(props.theme.space.base, " * 1px")), math("".concat(props.theme.space.base, " * 2px")), getColor('neutralHue', SHADE + 200, props.theme, 0.24));
1328
- var thumbActiveBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme);
1329
- var thumbActiveBorderColor = thumbBorderColor;
1330
- var thumbDisabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
1331
- var thumbDisabledBorderColor = thumbDisabledBackgroundColor;
1332
- var thumbFocusBoxShadow = props.theme.shadows.md(getColor('primaryHue', SHADE, props.theme, 0.35));
1333
- var thumbHoverBackgroundColor = thumbActiveBackgroundColor;
1334
- var thumbHoverBorderColor = thumbHoverBackgroundColor;
1335
- var trackBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
1336
- var trackLowerBackgroundColor = props.hasLowerTrack ? thumbBackgroundColor : '';
1337
- var trackBackgroundImage = props.hasLowerTrack ? "linear-gradient(".concat(trackLowerBackgroundColor, ", ").concat(trackLowerBackgroundColor, ")") : '';
1338
- var trackDisabledLowerBackgroundColor = props.hasLowerTrack ? thumbDisabledBackgroundColor : '';
1339
- var trackDisabledBackgroundImage = props.hasLowerTrack ? "linear-gradient(".concat(trackDisabledLowerBackgroundColor, ", ").concat(trackDisabledLowerBackgroundColor, ")") : '';
1340
- return css(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles("\n background-color: ".concat(trackBackgroundColor, ";\n background-image: ").concat(trackBackgroundImage, "; /* provide means for styling lower range on WebKit */\n ")), thumbStyles("\n border-color: ".concat(thumbBorderColor, ";\n box-shadow: ").concat(thumbBoxShadow, ";\n background-color: ").concat(thumbBackgroundColor, ";\n ")), trackLowerStyles("\n background-color: ".concat(trackLowerBackgroundColor, ";\n ")), thumbStyles("\n transition:\n border-color .25s ease-in-out,\n background-color .25s ease-in-out;\n border-color: ".concat(thumbHoverBorderColor, ";\n background-color: ").concat(thumbHoverBackgroundColor, ";\n "), ':hover'), thumbStyles("\n box-shadow: ".concat(thumbFocusBoxShadow, ";\n "), '[data-garden-focus-visible="true"]'), thumbStyles("\n border-color: ".concat(thumbActiveBorderColor, ";\n background-color: ").concat(thumbActiveBackgroundColor, "\n "), ':active'), trackStyles("\n background-image: ".concat(trackDisabledBackgroundImage, ";\n "), ':disabled'), thumbStyles("\n border-color: ".concat(thumbDisabledBorderColor, ";\n box-shadow: none;\n background-color: ").concat(thumbDisabledBackgroundColor, ";\n "), ':disabled'), trackLowerStyles("\n background-color: ".concat(trackDisabledLowerBackgroundColor, "\n "), ':disabled'));
1341
- };
1342
- var sizeStyles$6 = function sizeStyles(props) {
1343
- var thumbSize = math("".concat(props.theme.space.base, " * 5px"));
1344
- var trackHeight = math("".concat(props.theme.space.base, " * 1.5px"));
1345
- var trackBorderRadius = trackHeight;
1346
- var trackMargin = math("(".concat(thumbSize, " - ").concat(trackHeight, ") / 2 + ").concat(props.theme.shadowWidths.md));
1347
- var thumbMargin = math("(".concat(trackHeight, " - ").concat(thumbSize, ") / 2"));
1348
- return css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, math("".concat(props.theme.space.base, " * 2px")), trackStyles("\n margin: ".concat(trackMargin, " 0;\n border-radius: ").concat(trackBorderRadius, ";\n height: ").concat(trackHeight, ";\n ")), thumbStyles("\n margin: ".concat(thumbMargin, " 0; /* reset for IE */\n width: ").concat(thumbSize, ";\n height: ").concat(thumbSize, ";\n ")), trackLowerStyles("\n border-top-".concat(props.theme.rtl ? 'right' : 'left', "-radius: ").concat(trackBorderRadius, ";\n border-bottom-").concat(props.theme.rtl ? 'right' : 'left', "-radius: ").concat(trackBorderRadius, ";\n height: ").concat(trackHeight, ";\n ")));
1349
- };
1350
- var StyledRangeInput = styled.input.attrs(function (props) {
1351
- return {
1352
- 'data-garden-id': COMPONENT_ID$8,
1353
- 'data-garden-version': '8.57.1',
1354
- type: 'range',
1355
- style: {
1356
- backgroundSize: props.hasLowerTrack && props.backgroundSize
989
+ const COMPONENT_ID$8 = 'forms.range';
990
+ const thumbStyles = function (styles) {
991
+ let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
992
+ return `
993
+ &${modifier}::-moz-range-thumb {
994
+ ${styles}
1357
995
  }
1358
- };
1359
- }).withConfig({
996
+
997
+ &${modifier}::-ms-thumb {
998
+ ${styles}
999
+ }
1000
+
1001
+ &${modifier}::-webkit-slider-thumb {
1002
+ ${styles}
1003
+ }
1004
+ `;
1005
+ };
1006
+ const trackStyles = function (styles) {
1007
+ let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
1008
+ return `
1009
+ &${modifier}::-moz-range-track {
1010
+ ${styles}
1011
+ }
1012
+
1013
+ &${modifier}::-ms-track {
1014
+ ${styles}
1015
+ }
1016
+
1017
+ &${modifier}::-webkit-slider-runnable-track {
1018
+ ${styles}
1019
+ }
1020
+ `;
1021
+ };
1022
+ const trackLowerStyles = function (styles) {
1023
+ let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
1024
+ return `
1025
+ &${modifier}::-moz-range-progress {
1026
+ ${styles}
1027
+ }
1028
+
1029
+ &${modifier}::-ms-fill-lower {
1030
+ ${styles}
1031
+ }
1032
+ `;
1033
+ };
1034
+ const colorStyles$3 = props => {
1035
+ const SHADE = 600;
1036
+ const thumbBackgroundColor = getColor('primaryHue', SHADE, props.theme);
1037
+ const thumbBorderColor = thumbBackgroundColor;
1038
+ const thumbBoxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColor('neutralHue', SHADE + 200, props.theme, 0.24));
1039
+ const thumbActiveBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme);
1040
+ const thumbActiveBorderColor = thumbBorderColor;
1041
+ const thumbDisabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
1042
+ const thumbDisabledBorderColor = thumbDisabledBackgroundColor;
1043
+ const thumbFocusBoxShadow = props.theme.shadows.md(getColor('primaryHue', SHADE, props.theme, 0.35));
1044
+ const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
1045
+ const thumbHoverBorderColor = thumbHoverBackgroundColor;
1046
+ const trackBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
1047
+ const trackLowerBackgroundColor = props.hasLowerTrack ? thumbBackgroundColor : '';
1048
+ const trackBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
1049
+ const trackDisabledLowerBackgroundColor = props.hasLowerTrack ? thumbDisabledBackgroundColor : '';
1050
+ const trackDisabledBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
1051
+ return css(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles(`
1052
+ background-color: ${trackBackgroundColor};
1053
+ background-image: ${trackBackgroundImage}; /* provide means for styling lower range on WebKit */
1054
+ `), thumbStyles(`
1055
+ border-color: ${thumbBorderColor};
1056
+ box-shadow: ${thumbBoxShadow};
1057
+ background-color: ${thumbBackgroundColor};
1058
+ `), trackLowerStyles(`
1059
+ background-color: ${trackLowerBackgroundColor};
1060
+ `), thumbStyles(`
1061
+ transition:
1062
+ border-color .25s ease-in-out,
1063
+ background-color .25s ease-in-out;
1064
+ border-color: ${thumbHoverBorderColor};
1065
+ background-color: ${thumbHoverBackgroundColor};
1066
+ `, ':hover'), thumbStyles(`
1067
+ box-shadow: ${thumbFocusBoxShadow};
1068
+ `, '[data-garden-focus-visible="true"]'), thumbStyles(`
1069
+ border-color: ${thumbActiveBorderColor};
1070
+ background-color: ${thumbActiveBackgroundColor}
1071
+ `, ':active'), trackStyles(`
1072
+ background-image: ${trackDisabledBackgroundImage};
1073
+ `, ':disabled'), thumbStyles(`
1074
+ border-color: ${thumbDisabledBorderColor};
1075
+ box-shadow: none;
1076
+ background-color: ${thumbDisabledBackgroundColor};
1077
+ `, ':disabled'), trackLowerStyles(`
1078
+ background-color: ${trackDisabledLowerBackgroundColor}
1079
+ `, ':disabled'));
1080
+ };
1081
+ const sizeStyles$6 = props => {
1082
+ const thumbSize = math(`${props.theme.space.base} * 5px`);
1083
+ const trackHeight = math(`${props.theme.space.base} * 1.5px`);
1084
+ const trackBorderRadius = trackHeight;
1085
+ const trackMargin = math(`(${thumbSize} - ${trackHeight}) / 2 + ${props.theme.shadowWidths.md}`);
1086
+ const thumbMargin = math(`(${trackHeight} - ${thumbSize}) / 2`);
1087
+ return css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, math(`${props.theme.space.base} * 2px`), trackStyles(`
1088
+ margin: ${trackMargin} 0;
1089
+ border-radius: ${trackBorderRadius};
1090
+ height: ${trackHeight};
1091
+ `), thumbStyles(`
1092
+ margin: ${thumbMargin} 0; /* reset for IE */
1093
+ width: ${thumbSize};
1094
+ height: ${thumbSize};
1095
+ `), trackLowerStyles(`
1096
+ border-top-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
1097
+ border-bottom-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
1098
+ height: ${trackHeight};
1099
+ `));
1100
+ };
1101
+ const StyledRangeInput = styled.input.attrs(props => ({
1102
+ 'data-garden-id': COMPONENT_ID$8,
1103
+ 'data-garden-version': '8.58.0',
1104
+ type: 'range',
1105
+ style: {
1106
+ backgroundSize: props.hasLowerTrack && props.backgroundSize
1107
+ }
1108
+ })).withConfig({
1360
1109
  displayName: "StyledRangeInput",
1361
1110
  componentId: "sc-1iv2yqp-0"
1362
- })(["appearance:none;direction:", ";margin:0;background-color:inherit;cursor:pointer;padding:0;width:100%;vertical-align:middle;", " &::-webkit-slider-container,&::-webkit-slider-runnable-track{background-size:inherit;}", ";", " ", ";&::-moz-focus-outer{border:0;}&::-ms-tooltip{display:none;}&:focus{outline:none;}&:disabled{cursor:default;}", ";"], function (props) {
1363
- return props.theme.rtl && 'rtl';
1364
- }, function (props) {
1365
- return trackStyles("\n appearance: none;\n border-color: transparent; /* reset for IE */\n background-repeat: repeat-y;\n background-size: 0;\n background-position: ".concat(props.theme.rtl ? '100% 100%' : '0% 0%', ";\n width: 99.8%; /* fix for IE which cuts off the upper track's border radius */\n color: transparent; /* reset for IE */\n box-sizing: border-box; /* reset for IE */\n "));
1366
- }, function (props) {
1367
- return sizeStyles$6(props);
1368
- }, function (props) {
1369
- return thumbStyles("\n appearance: none;\n transition: box-shadow .1s ease-in-out;\n border: ".concat(props.theme.borders.md, ";\n border-radius: 100%;\n box-sizing: border-box;\n "));
1370
- }, function (props) {
1371
- return colorStyles$3(props);
1372
- }, function (props) {
1373
- return retrieveComponentStyles(COMPONENT_ID$8, props);
1374
- });
1111
+ })(["appearance:none;direction:", ";margin:0;background-color:inherit;cursor:pointer;padding:0;width:100%;vertical-align:middle;", " &::-webkit-slider-container,&::-webkit-slider-runnable-track{background-size:inherit;}", ";", " ", ";&::-moz-focus-outer{border:0;}&::-ms-tooltip{display:none;}&:focus{outline:none;}&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => trackStyles(`
1112
+ appearance: none;
1113
+ border-color: transparent; /* reset for IE */
1114
+ background-repeat: repeat-y;
1115
+ background-size: 0;
1116
+ background-position: ${props.theme.rtl ? '100% 100%' : '0% 0%'};
1117
+ width: 99.8%; /* fix for IE which cuts off the upper track's border radius */
1118
+ color: transparent; /* reset for IE */
1119
+ box-sizing: border-box; /* reset for IE */
1120
+ `), props => sizeStyles$6(props), props => thumbStyles(`
1121
+ appearance: none;
1122
+ transition: box-shadow .1s ease-in-out;
1123
+ border: ${props.theme.borders.md};
1124
+ border-radius: 100%;
1125
+ box-sizing: border-box;
1126
+ `), props => colorStyles$3(props), props => retrieveComponentStyles(COMPONENT_ID$8, props));
1375
1127
  StyledRangeInput.defaultProps = {
1376
1128
  backgroundSize: '0%',
1377
1129
  hasLowerTrack: true,
1378
1130
  theme: DEFAULT_THEME
1379
1131
  };
1380
1132
 
1381
- var COMPONENT_ID$7 = 'forms.slider';
1382
- var StyledSlider = styled.div.attrs(function (props) {
1383
- return {
1384
- 'data-garden-id': COMPONENT_ID$7,
1385
- 'data-garden-version': '8.57.1',
1386
- 'aria-disabled': props.isDisabled
1387
- };
1133
+ const COMPONENT_ID$7 = 'forms.slider';
1134
+ const StyledSlider = styled.div.attrs({
1135
+ 'data-garden-id': COMPONENT_ID$7,
1136
+ 'data-garden-version': '8.58.0'
1388
1137
  }).withConfig({
1389
1138
  displayName: "StyledSlider",
1390
1139
  componentId: "sc-1di437a-0"
1391
- })(["display:block;position:relative;z-index:0;cursor:pointer;height:", ";&[aria-disabled='true']{cursor:default;}", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";"], function (props) {
1392
- return math("(".concat(props.theme.space.base, " * 5px) + (").concat(props.theme.shadowWidths.md, " * 2)"));
1393
- }, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, function (props) {
1394
- return math("".concat(props.theme.space.base, " * 2px"));
1395
- }, function (props) {
1396
- return retrieveComponentStyles(COMPONENT_ID$7, props);
1397
- });
1140
+ })(["display:block;position:relative;z-index:0;cursor:pointer;height:", ";&[aria-disabled='true']{cursor:default;}", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";"], props => math(`(${props.theme.space.base} * 5px) + (${props.theme.shadowWidths.md} * 2)`), StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props => math(`${props.theme.space.base} * 2px`), props => retrieveComponentStyles(COMPONENT_ID$7, props));
1398
1141
  StyledSlider.defaultProps = {
1399
1142
  theme: DEFAULT_THEME
1400
1143
  };
1401
1144
 
1402
- var COMPONENT_ID$6 = 'forms.slider_thumb';
1403
- var colorStyles$2 = function colorStyles(props) {
1404
- var SHADE = 600;
1405
- var backgroundColor = getColor('primaryHue', SHADE, props.theme);
1406
- var borderColor = backgroundColor;
1407
- var boxShadow = props.theme.shadows.lg(math("".concat(props.theme.space.base, " * 1px")), math("".concat(props.theme.space.base, " * 2px")), getColor('neutralHue', SHADE + 200, props.theme, 0.24));
1408
- var activeBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme);
1409
- var activeBorderColor = borderColor;
1410
- var hoverBackgroundColor = activeBackgroundColor;
1411
- var hoverBorderColor = hoverBackgroundColor;
1412
- var focusBoxShadow = props.theme.shadows.md(getColor('primaryHue', SHADE, props.theme, 0.35));
1413
- var disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
1414
- var disabledBorderColor = disabledBackgroundColor;
1145
+ const COMPONENT_ID$6 = 'forms.slider_thumb';
1146
+ const colorStyles$2 = props => {
1147
+ const SHADE = 600;
1148
+ const backgroundColor = getColor('primaryHue', SHADE, props.theme);
1149
+ const borderColor = backgroundColor;
1150
+ const boxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColor('neutralHue', SHADE + 200, props.theme, 0.24));
1151
+ const activeBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme);
1152
+ const activeBorderColor = borderColor;
1153
+ const hoverBackgroundColor = activeBackgroundColor;
1154
+ const hoverBorderColor = hoverBackgroundColor;
1155
+ const focusBoxShadow = props.theme.shadows.md(getColor('primaryHue', SHADE, props.theme, 0.35));
1156
+ const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
1157
+ const disabledBorderColor = disabledBackgroundColor;
1415
1158
  return css(["border-color:", ";box-shadow:", ";background-color:", ";&[data-garden-focus-visible='true']{box-shadow:", ";}&:hover,&[data-garden-hover='true']{border-color:", ";background-color:", ";}&:active,&[data-garden-active='true']{border-color:", ";background-color:", ";}&[aria-disabled='true']{border-color:", ";box-shadow:none;background-color:", ";}"], borderColor, boxShadow, backgroundColor, focusBoxShadow, hoverBorderColor, hoverBackgroundColor, activeBorderColor, activeBackgroundColor, disabledBorderColor, disabledBackgroundColor);
1416
1159
  };
1417
- var sizeStyles$5 = function sizeStyles(props) {
1418
- var size = math("".concat(props.theme.space.base, " * 5px"));
1419
- var marginTop = math("".concat(size, " / -2"));
1160
+ const sizeStyles$5 = props => {
1161
+ const size = math(`${props.theme.space.base} * 5px`);
1162
+ const marginTop = math(`${size} / -2`);
1420
1163
  return css(["margin-top:", ";width:", ";height:", ";"], marginTop, size, size);
1421
1164
  };
1422
- var StyledSliderThumb = styled.div.attrs(function (props) {
1423
- return {
1424
- 'data-garden-id': COMPONENT_ID$6,
1425
- 'data-garden-version': '8.57.1',
1426
- 'aria-disabled': props.isDisabled
1427
- };
1428
- }).withConfig({
1165
+ const StyledSliderThumb = styled.div.attrs(props => ({
1166
+ 'data-garden-id': COMPONENT_ID$6,
1167
+ 'data-garden-version': '8.58.0',
1168
+ 'aria-disabled': props.isDisabled
1169
+ })).withConfig({
1429
1170
  displayName: "StyledSliderThumb",
1430
1171
  componentId: "sc-yspbwa-0"
1431
- })(["appearance:none;position:absolute;top:50%;", ":", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:1;border:", ";border-radius:100%;cursor:inherit;box-sizing:border-box;font-size:0;", ";&:focus{outline:none;}", ";", ";"], function (props) {
1432
- return props.theme.rtl ? 'right' : 'left';
1433
- }, function (props) {
1434
- return math("".concat(props.position, " * 1px"));
1435
- }, function (props) {
1436
- return props.theme.borders.md;
1437
- }, function (props) {
1438
- return sizeStyles$5(props);
1439
- }, function (props) {
1440
- return colorStyles$2(props);
1441
- }, function (props) {
1442
- return retrieveComponentStyles(COMPONENT_ID$6, props);
1443
- });
1172
+ })(["appearance:none;position:absolute;top:50%;", ":", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:1;border:", ";border-radius:100%;cursor:inherit;box-sizing:border-box;font-size:0;", ";&:focus{outline:none;}", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.position} * 1px`), props => props.theme.borders.md, props => sizeStyles$5(props), props => colorStyles$2(props), props => retrieveComponentStyles(COMPONENT_ID$6, props));
1444
1173
  StyledSliderThumb.defaultProps = {
1445
1174
  position: 0,
1446
1175
  theme: DEFAULT_THEME
1447
1176
  };
1448
1177
 
1449
- var COMPONENT_ID$5 = 'forms.slider_track';
1450
- var colorStyles$1 = function colorStyles(props) {
1451
- var SHADE = 600;
1452
- var backgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
1453
- var backgroundImageColor = getColor('primaryHue', SHADE, props.theme);
1454
- var disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
1178
+ const COMPONENT_ID$5 = 'forms.slider_track';
1179
+ const colorStyles$1 = props => {
1180
+ const SHADE = 600;
1181
+ const backgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
1182
+ const backgroundImageColor = getColor('primaryHue', SHADE, props.theme);
1183
+ const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
1455
1184
  return css(["background-color:", ";background-image:linear-gradient(", ",", ");&[aria-disabled='true']{background-image:linear-gradient(", ",", ");}"], backgroundColor, backgroundImageColor, backgroundImageColor, disabledBackgroundColor, disabledBackgroundColor);
1456
1185
  };
1457
- var sizeStyles$4 = function sizeStyles(props) {
1458
- var height = math("".concat(props.theme.space.base, " * 1.5px"));
1459
- var backgroundPosition = math("".concat(props.backgroundPosition, " * 1px"));
1460
- var backgroundSize = math("".concat(props.backgroundSize, " * 1px"));
1461
- var borderRadius = height;
1462
- var marginTop = math("".concat(height, " / -2"));
1463
- var padding = math("".concat(props.theme.space.base, " * 2.5px"));
1186
+ const sizeStyles$4 = props => {
1187
+ const height = math(`${props.theme.space.base} * 1.5px`);
1188
+ const backgroundPosition = math(`${props.backgroundPosition} * 1px`);
1189
+ const backgroundSize = math(`${props.backgroundSize} * 1px`);
1190
+ const borderRadius = height;
1191
+ const marginTop = math(`${height} / -2`);
1192
+ const padding = math(`${props.theme.space.base} * 2.5px`);
1464
1193
  return css(["margin-top:", ";border-radius:", ";background-position:", ";background-size:", ";padding:0 ", ";"], marginTop, borderRadius, backgroundPosition, backgroundSize, padding);
1465
1194
  };
1466
- var StyledSliderTrack = styled.div.attrs(function (props) {
1467
- return {
1468
- 'data-garden-id': COMPONENT_ID$5,
1469
- 'data-garden-version': '8.57.1',
1470
- 'aria-disabled': props.isDisabled
1471
- };
1472
- }).withConfig({
1195
+ const StyledSliderTrack = styled.div.attrs(props => ({
1196
+ 'data-garden-id': COMPONENT_ID$5,
1197
+ 'data-garden-version': '8.58.0',
1198
+ 'aria-disabled': props.isDisabled
1199
+ })).withConfig({
1473
1200
  displayName: "StyledSliderTrack",
1474
1201
  componentId: "sc-aw5m6g-0"
1475
- })(["position:absolute;top:50%;box-sizing:border-box;background-origin:content-box;background-repeat:repeat-y;width:100%;", ";", ";", ";"], function (props) {
1476
- return sizeStyles$4(props);
1477
- }, function (props) {
1478
- return colorStyles$1(props);
1479
- }, function (props) {
1480
- return retrieveComponentStyles(COMPONENT_ID$5, props);
1481
- });
1202
+ })(["position:absolute;top:50%;box-sizing:border-box;background-origin:content-box;background-repeat:repeat-y;width:100%;", ";", ";", ";"], props => sizeStyles$4(props), props => colorStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$5, props));
1482
1203
  StyledSliderTrack.defaultProps = {
1483
1204
  backgroundSize: 0,
1484
1205
  backgroundPosition: 0,
1485
1206
  theme: DEFAULT_THEME
1486
1207
  };
1487
1208
 
1488
- var COMPONENT_ID$4 = 'forms.slider_track_rail';
1489
- var sizeStyles$3 = function sizeStyles(props) {
1490
- var height = math("".concat(props.theme.space.base, " * 1.5px"));
1491
- var margin = math("".concat(props.theme.space.base, " * 2.5px"));
1492
- return css(["margin:0 ", " 0 ", ";height:", ";"], props.theme.rtl ? "-".concat(margin) : margin, props.theme.rtl ? margin : "-".concat(margin), height);
1209
+ const COMPONENT_ID$4 = 'forms.slider_track_rail';
1210
+ const sizeStyles$3 = props => {
1211
+ const height = math(`${props.theme.space.base} * 1.5px`);
1212
+ const margin = math(`${props.theme.space.base} * 2.5px`);
1213
+ return css(["margin:0 ", " 0 ", ";height:", ";"], props.theme.rtl ? `-${margin}` : margin, props.theme.rtl ? margin : `-${margin}`, height);
1493
1214
  };
1494
- var StyledSliderTrackRail = styled.div.attrs({
1215
+ const StyledSliderTrackRail = styled.div.attrs({
1495
1216
  'data-garden-id': COMPONENT_ID$4,
1496
- 'data-garden-version': '8.57.1'
1217
+ 'data-garden-version': '8.58.0'
1497
1218
  }).withConfig({
1498
1219
  displayName: "StyledSliderTrackRail",
1499
1220
  componentId: "sc-1o5owbd-0"
1500
- })(["position:relative;", ";", ";"], function (props) {
1501
- return sizeStyles$3(props);
1502
- }, function (props) {
1503
- return retrieveComponentStyles(COMPONENT_ID$4, props);
1504
- });
1221
+ })(["position:relative;", ";", ";"], props => sizeStyles$3(props), props => retrieveComponentStyles(COMPONENT_ID$4, props));
1505
1222
  StyledSliderTrackRail.defaultProps = {
1506
1223
  theme: DEFAULT_THEME
1507
1224
  };
1508
1225
 
1509
- var COMPONENT_ID$3 = 'forms.tile_icon';
1510
- var sizeStyles$2 = function sizeStyles(props) {
1511
- var iconSize = math("".concat(props.theme.iconSizes.md, " * 2"));
1512
- var position;
1513
- var top;
1514
- var horizontalValue;
1226
+ const COMPONENT_ID$3 = 'forms.tile_icon';
1227
+ const sizeStyles$2 = props => {
1228
+ const iconSize = math(`${props.theme.iconSizes.md} * 2`);
1229
+ let position;
1230
+ let top;
1231
+ let horizontalValue;
1515
1232
  if (!props.isCentered) {
1516
1233
  position = 'absolute';
1517
- top = "".concat(props.theme.space.base * 6, "px");
1518
- horizontalValue = "left: ".concat(props.theme.space.base * 5, "px");
1234
+ top = `${props.theme.space.base * 6}px`;
1235
+ horizontalValue = `left: ${props.theme.space.base * 5}px`;
1519
1236
  if (props.theme.rtl) {
1520
- horizontalValue = "right: ".concat(props.theme.space.base * 5, "px");
1237
+ horizontalValue = `right: ${props.theme.space.base * 5}px`;
1521
1238
  }
1522
1239
  }
1523
1240
  return css(["position:", ";top:", ";", ";& > *{width:", ";height:", ";}"], position, top, horizontalValue, iconSize, iconSize);
1524
1241
  };
1525
- var StyledTileIcon = styled.span.attrs({
1242
+ const StyledTileIcon = styled.span.attrs({
1526
1243
  'data-garden-id': COMPONENT_ID$3,
1527
- 'data-garden-version': '8.57.1'
1244
+ 'data-garden-version': '8.58.0'
1528
1245
  }).withConfig({
1529
1246
  displayName: "StyledTileIcon",
1530
1247
  componentId: "sc-1wazhg4-0"
1531
- })(["display:block;transition:color 0.25s ease-in-out;text-align:center;line-height:0;", ";", ";"], function (props) {
1532
- return sizeStyles$2(props);
1533
- }, function (props) {
1534
- return retrieveComponentStyles(COMPONENT_ID$3, props);
1535
- });
1248
+ })(["display:block;transition:color 0.25s ease-in-out;text-align:center;line-height:0;", ";", ";"], props => sizeStyles$2(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
1536
1249
  StyledTileIcon.defaultProps = {
1537
1250
  theme: DEFAULT_THEME
1538
1251
  };
1539
1252
 
1540
- var COMPONENT_ID$2 = 'forms.tile';
1541
- var colorStyles = function colorStyles(props) {
1542
- var SHADE = 600;
1543
- var iconColor = getColor('neutralHue', SHADE, props.theme);
1544
- var color = getColor('neutralHue', SHADE + 200, props.theme);
1545
- var borderColor = getColor('neutralHue', SHADE - 300, props.theme);
1546
- var hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08);
1547
- var hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
1548
- var focusBorderColor = hoverBorderColor;
1549
- var focusBoxShadow = props.theme.shadows.md(rgba(focusBorderColor, 0.35));
1550
- var activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2);
1551
- var activeBorderColor = focusBorderColor;
1552
- var disabledBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme);
1553
- var disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
1554
- var disabledColor = getColor('neutralHue', SHADE - 200, props.theme);
1555
- var selectedBorderColor = focusBorderColor;
1556
- var selectedBackgroundColor = selectedBorderColor;
1557
- var selectedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
1558
- var selectedHoverBackgroundColor = selectedHoverBorderColor;
1559
- var selectedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme);
1560
- var selectedActiveBackgroundColor = selectedActiveBorderColor;
1561
- var selectedDisabledBackgroundColor = disabledBorderColor;
1253
+ const COMPONENT_ID$2 = 'forms.tile';
1254
+ const colorStyles = props => {
1255
+ const SHADE = 600;
1256
+ const iconColor = getColor('neutralHue', SHADE, props.theme);
1257
+ const color = getColor('neutralHue', SHADE + 200, props.theme);
1258
+ const borderColor = getColor('neutralHue', SHADE - 300, props.theme);
1259
+ const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08);
1260
+ const hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
1261
+ const focusBorderColor = hoverBorderColor;
1262
+ const focusBoxShadow = props.theme.shadows.md(rgba(focusBorderColor, 0.35));
1263
+ const activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2);
1264
+ const activeBorderColor = focusBorderColor;
1265
+ const disabledBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme);
1266
+ const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
1267
+ const disabledColor = getColor('neutralHue', SHADE - 200, props.theme);
1268
+ const selectedBorderColor = focusBorderColor;
1269
+ const selectedBackgroundColor = selectedBorderColor;
1270
+ const selectedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
1271
+ const selectedHoverBackgroundColor = selectedHoverBorderColor;
1272
+ const selectedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme);
1273
+ const selectedActiveBackgroundColor = selectedActiveBorderColor;
1274
+ const selectedDisabledBackgroundColor = disabledBorderColor;
1562
1275
  return css(["border:", " ", ";border-color:", ";background-color:", ";color:", ";", "{color:", ";}&:focus{outline:none;}&:hover:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-focus-visible='true']{border-color:", ";box-shadow:", ";}&:active:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-selected='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):hover{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):active{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true'][aria-disabled='true']{background-color:", ";color:", ";", "{color:", ";}}"], props.theme.borders.sm, getColor('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, focusBorderColor, focusBoxShadow, activeBorderColor, activeBackgroundColor, StyledTileIcon, color, selectedBorderColor, selectedBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedHoverBorderColor, selectedHoverBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedActiveBorderColor, selectedActiveBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor);
1563
1276
  };
1564
- var StyledTile = styled.label.attrs(function (props) {
1565
- return {
1566
- 'data-garden-id': COMPONENT_ID$2,
1567
- 'data-garden-version': '8.57.1',
1568
- 'data-garden-focus-visible': props.isFocused,
1569
- 'data-garden-selected': props.isSelected
1570
- };
1571
- }).withConfig({
1277
+ const StyledTile = styled.label.attrs(props => ({
1278
+ 'data-garden-id': COMPONENT_ID$2,
1279
+ 'data-garden-version': '8.58.0',
1280
+ 'data-garden-focus-visible': props.isFocused,
1281
+ 'data-garden-selected': props.isSelected
1282
+ })).withConfig({
1572
1283
  displayName: "StyledTile",
1573
1284
  componentId: "sc-1jjvmxs-0"
1574
- })(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";cursor:", ";padding:", "px;direction:", ";", ";", ";"], function (props) {
1575
- return props.theme.borderRadii.md;
1576
- }, function (props) {
1577
- return !props.isDisabled && 'pointer';
1578
- }, function (props) {
1579
- return props.theme.space.base * 5;
1580
- }, function (props) {
1581
- return props.theme.rtl && 'rtl';
1582
- }, function (props) {
1583
- return colorStyles(props);
1584
- }, function (props) {
1585
- return retrieveComponentStyles(COMPONENT_ID$2, props);
1586
- });
1285
+ })(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";cursor:", ";padding:", "px;direction:", ";min-width:132px;word-break:break-word;", ";", ";"], props => props.theme.borderRadii.md, props => !props.isDisabled && 'pointer', props => props.theme.space.base * 5, props => props.theme.rtl && 'rtl', props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$2, props));
1587
1286
  StyledTile.defaultProps = {
1588
1287
  theme: DEFAULT_THEME
1589
1288
  };
1590
1289
 
1591
- var COMPONENT_ID$1 = 'forms.tile_description';
1592
- var sizeStyles$1 = function sizeStyles(props) {
1593
- var marginDirection = 'left';
1594
- var marginValue;
1290
+ const COMPONENT_ID$1 = 'forms.tile_description';
1291
+ const sizeStyles$1 = props => {
1292
+ let marginDirection = 'left';
1293
+ let marginValue;
1595
1294
  if (props.theme.rtl) {
1596
1295
  marginDirection = 'right';
1597
1296
  }
1598
1297
  if (!props.isCentered) {
1599
- marginValue = math("(".concat(props.theme.iconSizes.md, " * 2) + ").concat(props.theme.space.base * 5, "px"));
1298
+ marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
1600
1299
  }
1601
1300
  return css(["margin-top:", "px;margin-", ":", ";"], props.theme.space.base, marginDirection, marginValue);
1602
1301
  };
1603
- var StyledTileDescription = styled.span.attrs({
1302
+ const StyledTileDescription = styled.span.attrs({
1604
1303
  'data-garden-id': COMPONENT_ID$1,
1605
- 'data-garden-version': '8.57.1'
1304
+ 'data-garden-version': '8.58.0'
1606
1305
  }).withConfig({
1607
1306
  displayName: "StyledTileDescription",
1608
1307
  componentId: "sc-xfuu7u-0"
1609
- })(["display:block;text-align:", ";line-height:", ";font-size:", ";", ";", ";"], function (props) {
1610
- return props.isCentered && 'center';
1611
- }, function (props) {
1612
- return getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.sm);
1613
- }, function (props) {
1614
- return props.theme.fontSizes.sm;
1615
- }, function (props) {
1616
- return sizeStyles$1(props);
1617
- }, function (props) {
1618
- return retrieveComponentStyles(COMPONENT_ID$1, props);
1619
- });
1308
+ })(["display:block;text-align:", ";line-height:", ";font-size:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$1, props));
1620
1309
  StyledTileDescription.defaultProps = {
1621
1310
  theme: DEFAULT_THEME
1622
1311
  };
1623
1312
 
1624
- var StyledTileInput = styled.input.withConfig({
1313
+ const StyledTileInput = styled.input.withConfig({
1625
1314
  displayName: "StyledTileInput",
1626
1315
  componentId: "sc-1nq2m6q-0"
1627
1316
  })(["position:absolute;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
@@ -1629,91 +1318,66 @@ StyledTileInput.defaultProps = {
1629
1318
  theme: DEFAULT_THEME
1630
1319
  };
1631
1320
 
1632
- var COMPONENT_ID = 'forms.tile_label';
1633
- var sizeStyles = function sizeStyles(props) {
1634
- var marginDirection = 'left';
1635
- var marginTop = "".concat(props.theme.space.base * 2, "px");
1636
- var marginValue;
1321
+ const COMPONENT_ID = 'forms.tile_label';
1322
+ const sizeStyles = props => {
1323
+ let marginDirection = 'left';
1324
+ let marginTop = `${props.theme.space.base * 2}px`;
1325
+ let marginValue;
1637
1326
  if (props.theme.rtl) {
1638
1327
  marginDirection = 'right';
1639
1328
  }
1640
1329
  if (!props.isCentered) {
1641
- marginValue = math("(".concat(props.theme.iconSizes.md, " * 2) + ").concat(props.theme.space.base * 5, "px"));
1330
+ marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
1642
1331
  marginTop = '0';
1643
1332
  }
1644
1333
  return css(["margin-top:", ";margin-", ":", ";"], marginTop, marginDirection, marginValue);
1645
1334
  };
1646
- var StyledTileLabel = styled.span.attrs({
1335
+ const StyledTileLabel = styled.span.attrs({
1647
1336
  'data-garden-id': COMPONENT_ID,
1648
- 'data-garden-version': '8.57.1'
1337
+ 'data-garden-version': '8.58.0'
1649
1338
  }).withConfig({
1650
1339
  displayName: "StyledTileLabel",
1651
1340
  componentId: "sc-1mypv27-0"
1652
- })(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], function (props) {
1653
- return props.isCentered && 'center';
1654
- }, function (props) {
1655
- return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
1656
- }, function (props) {
1657
- return props.theme.fontSizes.md;
1658
- }, function (props) {
1659
- return props.theme.fontWeights.semibold;
1660
- }, function (props) {
1661
- return sizeStyles(props);
1662
- }, function (props) {
1663
- return retrieveComponentStyles(COMPONENT_ID, props);
1664
- });
1341
+ })(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
1665
1342
  StyledTileLabel.defaultProps = {
1666
1343
  theme: DEFAULT_THEME
1667
1344
  };
1668
1345
 
1669
- var _excluded$g = ["getInputProps", "getMessageProps"];
1670
- var Field = React__default.forwardRef(function (props, ref) {
1671
- var _useState = useState(false),
1672
- _useState2 = _slicedToArray(_useState, 2),
1673
- hasHint = _useState2[0],
1674
- setHasHint = _useState2[1];
1675
- var _useState3 = useState(false),
1676
- _useState4 = _slicedToArray(_useState3, 2),
1677
- hasMessage = _useState4[0],
1678
- setHasMessage = _useState4[1];
1679
- var _useState5 = useState(false),
1680
- _useState6 = _slicedToArray(_useState5, 2),
1681
- isLabelActive = _useState6[0],
1682
- setIsLabelActive = _useState6[1];
1683
- var _useState7 = useState(false),
1684
- _useState8 = _slicedToArray(_useState7, 2),
1685
- isLabelHovered = _useState8[0],
1686
- setIsLabelHovered = _useState8[1];
1687
- var multiThumbRangeRef = useRef(null);
1688
- var _useField = useField(props.id),
1689
- _getInputProps = _useField.getInputProps,
1690
- _getMessageProps = _useField.getMessageProps,
1691
- propGetters = _objectWithoutProperties(_useField, _excluded$g);
1692
- var fieldProps = useMemo(function () {
1693
- return _objectSpread2(_objectSpread2({}, propGetters), {}, {
1694
- getInputProps: function getInputProps(options) {
1695
- var describeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
1696
- return _getInputProps(options, _objectSpread2(_objectSpread2({}, describeOptions), {}, {
1697
- isDescribed: hasHint,
1698
- hasMessage: hasMessage
1699
- }));
1700
- },
1701
- getMessageProps: function getMessageProps(options) {
1702
- return _getMessageProps(_objectSpread2({
1703
- role: 'alert'
1704
- }, options));
1705
- },
1706
- isLabelActive: isLabelActive,
1707
- setIsLabelActive: setIsLabelActive,
1708
- isLabelHovered: isLabelHovered,
1709
- setIsLabelHovered: setIsLabelHovered,
1710
- hasHint: hasHint,
1711
- setHasHint: setHasHint,
1712
- hasMessage: hasMessage,
1713
- setHasMessage: setHasMessage,
1714
- multiThumbRangeRef: multiThumbRangeRef
1715
- });
1716
- }, [propGetters, _getInputProps, _getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
1346
+ const Field = React__default.forwardRef((props, ref) => {
1347
+ const [hasHint, setHasHint] = useState(false);
1348
+ const [hasMessage, setHasMessage] = useState(false);
1349
+ const [isLabelActive, setIsLabelActive] = useState(false);
1350
+ const [isLabelHovered, setIsLabelHovered] = useState(false);
1351
+ const multiThumbRangeRef = useRef(null);
1352
+ const {
1353
+ getInputProps,
1354
+ getMessageProps,
1355
+ ...propGetters
1356
+ } = useField(props.id);
1357
+ const fieldProps = useMemo(() => ({
1358
+ ...propGetters,
1359
+ getInputProps: function (options) {
1360
+ let describeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
1361
+ return getInputProps(options, {
1362
+ ...describeOptions,
1363
+ isDescribed: hasHint,
1364
+ hasMessage
1365
+ });
1366
+ },
1367
+ getMessageProps: options => getMessageProps({
1368
+ role: 'alert',
1369
+ ...options
1370
+ }),
1371
+ isLabelActive,
1372
+ setIsLabelActive,
1373
+ isLabelHovered,
1374
+ setIsLabelHovered,
1375
+ hasHint,
1376
+ setHasHint,
1377
+ hasMessage,
1378
+ setHasMessage,
1379
+ multiThumbRangeRef
1380
+ }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
1717
1381
  return React__default.createElement(FieldContext.Provider, {
1718
1382
  value: fieldProps
1719
1383
  }, React__default.createElement(StyledField, _extends$t({}, props, {
@@ -1722,27 +1386,25 @@ var Field = React__default.forwardRef(function (props, ref) {
1722
1386
  });
1723
1387
  Field.displayName = 'Field';
1724
1388
 
1725
- var FieldsetContext = createContext(undefined);
1726
- var useFieldsetContext = function useFieldsetContext() {
1727
- var fieldsetContext = useContext(FieldsetContext);
1389
+ const FieldsetContext = createContext(undefined);
1390
+ const useFieldsetContext = () => {
1391
+ const fieldsetContext = useContext(FieldsetContext);
1728
1392
  return fieldsetContext;
1729
1393
  };
1730
1394
 
1731
- var LegendComponent = forwardRef(function (props, ref) {
1732
- var fieldsetContext = useFieldsetContext();
1395
+ const LegendComponent = forwardRef((props, ref) => {
1396
+ const fieldsetContext = useFieldsetContext();
1733
1397
  return React__default.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
1734
1398
  ref: ref
1735
1399
  }));
1736
1400
  });
1737
1401
  LegendComponent.displayName = 'Fieldset.Legend';
1738
- var Legend = LegendComponent;
1402
+ const Legend = LegendComponent;
1739
1403
 
1740
- var FieldsetComponent = forwardRef(function (props, ref) {
1741
- var fieldsetContext = useMemo(function () {
1742
- return {
1743
- isCompact: props.isCompact
1744
- };
1745
- }, [props.isCompact]);
1404
+ const FieldsetComponent = forwardRef((props, ref) => {
1405
+ const fieldsetContext = useMemo(() => ({
1406
+ isCompact: props.isCompact
1407
+ }), [props.isCompact]);
1746
1408
  return React__default.createElement(FieldsetContext.Provider, {
1747
1409
  value: fieldsetContext
1748
1410
  }, React__default.createElement(StyledFieldset, _extends$t({}, props, {
@@ -1753,31 +1415,32 @@ FieldsetComponent.displayName = 'Fieldset';
1753
1415
  FieldsetComponent.propTypes = {
1754
1416
  isCompact: PropTypes.bool
1755
1417
  };
1756
- var Fieldset = FieldsetComponent;
1418
+ const Fieldset = FieldsetComponent;
1757
1419
  Fieldset.Legend = Legend;
1758
1420
 
1759
- var InputContext = createContext(undefined);
1760
- var useInputContext = function useInputContext() {
1421
+ const InputContext = createContext(undefined);
1422
+ const useInputContext = () => {
1761
1423
  return useContext(InputContext);
1762
1424
  };
1763
1425
 
1764
- var Hint = React__default.forwardRef(function (props, ref) {
1765
- var _ref = useFieldContext() || {},
1766
- hasHint = _ref.hasHint,
1767
- setHasHint = _ref.setHasHint,
1768
- getHintProps = _ref.getHintProps;
1769
- var type = useInputContext();
1770
- useEffect(function () {
1426
+ const Hint = React__default.forwardRef((props, ref) => {
1427
+ const {
1428
+ hasHint,
1429
+ setHasHint,
1430
+ getHintProps
1431
+ } = useFieldContext() || {};
1432
+ const type = useInputContext();
1433
+ useEffect(() => {
1771
1434
  if (!hasHint && setHasHint) {
1772
1435
  setHasHint(true);
1773
1436
  }
1774
- return function () {
1437
+ return () => {
1775
1438
  if (hasHint && setHasHint) {
1776
1439
  setHasHint(false);
1777
1440
  }
1778
1441
  };
1779
1442
  }, [hasHint, setHasHint]);
1780
- var HintComponent;
1443
+ let HintComponent;
1781
1444
  if (type === 'checkbox') {
1782
1445
  HintComponent = StyledCheckHint;
1783
1446
  } else if (type === 'radio') {
@@ -1787,7 +1450,7 @@ var Hint = React__default.forwardRef(function (props, ref) {
1787
1450
  } else {
1788
1451
  HintComponent = StyledHint;
1789
1452
  }
1790
- var combinedProps = props;
1453
+ let combinedProps = props;
1791
1454
  if (getHintProps) {
1792
1455
  combinedProps = getHintProps(combinedProps);
1793
1456
  }
@@ -1797,52 +1460,56 @@ var Hint = React__default.forwardRef(function (props, ref) {
1797
1460
  });
1798
1461
  Hint.displayName = 'Hint';
1799
1462
 
1800
- var Label$1 = React__default.forwardRef(function (props, ref) {
1801
- var fieldContext = useFieldContext();
1802
- var fieldsetContext = useFieldsetContext();
1803
- var type = useInputContext();
1804
- var combinedProps = props;
1463
+ const Label$1 = React__default.forwardRef((props, ref) => {
1464
+ const fieldContext = useFieldContext();
1465
+ const fieldsetContext = useFieldsetContext();
1466
+ const type = useInputContext();
1467
+ let combinedProps = props;
1805
1468
  if (fieldContext) {
1806
1469
  combinedProps = fieldContext.getLabelProps(combinedProps);
1807
1470
  if (type === undefined) {
1808
- var setIsLabelActive = fieldContext.setIsLabelActive,
1809
- setIsLabelHovered = fieldContext.setIsLabelHovered,
1810
- multiThumbRangeRef = fieldContext.multiThumbRangeRef;
1811
- combinedProps = _objectSpread2(_objectSpread2({}, combinedProps), {}, {
1812
- onMouseUp: composeEventHandlers(props.onMouseUp, function () {
1471
+ const {
1472
+ setIsLabelActive,
1473
+ setIsLabelHovered,
1474
+ multiThumbRangeRef
1475
+ } = fieldContext;
1476
+ combinedProps = {
1477
+ ...combinedProps,
1478
+ onMouseUp: composeEventHandlers(props.onMouseUp, () => {
1813
1479
  setIsLabelActive(false);
1814
1480
  }),
1815
- onMouseDown: composeEventHandlers(props.onMouseDown, function () {
1481
+ onMouseDown: composeEventHandlers(props.onMouseDown, () => {
1816
1482
  setIsLabelActive(true);
1817
1483
  }),
1818
- onMouseEnter: composeEventHandlers(props.onMouseEnter, function () {
1484
+ onMouseEnter: composeEventHandlers(props.onMouseEnter, () => {
1819
1485
  setIsLabelHovered(true);
1820
1486
  }),
1821
- onMouseLeave: composeEventHandlers(props.onMouseLeave, function () {
1487
+ onMouseLeave: composeEventHandlers(props.onMouseLeave, () => {
1822
1488
  setIsLabelHovered(false);
1823
1489
  }),
1824
- onClick: composeEventHandlers(props.onClick, function () {
1490
+ onClick: composeEventHandlers(props.onClick, () => {
1825
1491
  multiThumbRangeRef.current && multiThumbRangeRef.current.focus();
1826
1492
  })
1827
- });
1493
+ };
1828
1494
  }
1829
1495
  }
1830
1496
  if (fieldsetContext) {
1831
- combinedProps = _objectSpread2(_objectSpread2({}, combinedProps), {}, {
1497
+ combinedProps = {
1498
+ ...combinedProps,
1832
1499
  isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular
1833
- });
1500
+ };
1834
1501
  }
1835
1502
  if (type === 'radio') {
1836
1503
  return React__default.createElement(StyledRadioLabel, _extends$t({
1837
1504
  ref: ref
1838
1505
  }, combinedProps), React__default.createElement(StyledRadioSvg, null), props.children);
1839
1506
  } else if (type === 'checkbox') {
1840
- var onLabelSelect = function onLabelSelect(e) {
1841
- var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
1507
+ const onLabelSelect = e => {
1508
+ const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
1842
1509
  if (fieldContext && isFirefox && e.target instanceof Element) {
1843
- var inputId = e.target.getAttribute('for');
1510
+ const inputId = e.target.getAttribute('for');
1844
1511
  if (!inputId) return;
1845
- var input = document.getElementById(inputId);
1512
+ const input = document.getElementById(inputId);
1846
1513
  if (input && input.type === 'checkbox') {
1847
1514
  if (e.shiftKey) {
1848
1515
  input.click();
@@ -1852,9 +1519,10 @@ var Label$1 = React__default.forwardRef(function (props, ref) {
1852
1519
  }
1853
1520
  }
1854
1521
  };
1855
- combinedProps = _objectSpread2(_objectSpread2({}, combinedProps), {}, {
1522
+ combinedProps = {
1523
+ ...combinedProps,
1856
1524
  onClick: composeEventHandlers(combinedProps.onClick, onLabelSelect)
1857
- });
1525
+ };
1858
1526
  return React__default.createElement(StyledCheckLabel, _extends$t({
1859
1527
  ref: ref
1860
1528
  }, combinedProps), React__default.createElement(StyledCheckSvg, null), React__default.createElement(StyledDashSvg, null), props.children);
@@ -1872,32 +1540,34 @@ Label$1.propTypes = {
1872
1540
  isRegular: PropTypes.bool
1873
1541
  };
1874
1542
 
1875
- var VALIDATION = ['success', 'warning', 'error'];
1876
- var FILE_VALIDATION = ['success', 'error'];
1877
- var FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
1878
-
1879
- var _excluded$f = ["validation", "validationLabel", "children"];
1880
- var Message = React__default.forwardRef(function (_ref, ref) {
1881
- var validation = _ref.validation,
1882
- validationLabel = _ref.validationLabel,
1883
- children = _ref.children,
1884
- props = _objectWithoutProperties(_ref, _excluded$f);
1885
- var _ref2 = useFieldContext() || {},
1886
- hasMessage = _ref2.hasMessage,
1887
- setHasMessage = _ref2.setHasMessage,
1888
- getMessageProps = _ref2.getMessageProps;
1889
- var type = useInputContext();
1890
- useEffect(function () {
1543
+ const VALIDATION = ['success', 'warning', 'error'];
1544
+ const FILE_VALIDATION = ['success', 'error'];
1545
+ const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
1546
+
1547
+ const Message = React__default.forwardRef((_ref, ref) => {
1548
+ let {
1549
+ validation,
1550
+ validationLabel,
1551
+ children,
1552
+ ...props
1553
+ } = _ref;
1554
+ const {
1555
+ hasMessage,
1556
+ setHasMessage,
1557
+ getMessageProps
1558
+ } = useFieldContext() || {};
1559
+ const type = useInputContext();
1560
+ useEffect(() => {
1891
1561
  if (!hasMessage && setHasMessage) {
1892
1562
  setHasMessage(true);
1893
1563
  }
1894
- return function () {
1564
+ return () => {
1895
1565
  if (hasMessage && setHasMessage) {
1896
1566
  setHasMessage(false);
1897
1567
  }
1898
1568
  };
1899
1569
  }, [hasMessage, setHasMessage]);
1900
- var MessageComponent;
1570
+ let MessageComponent;
1901
1571
  if (type === 'checkbox') {
1902
1572
  MessageComponent = StyledCheckMessage;
1903
1573
  } else if (type === 'radio') {
@@ -1907,14 +1577,15 @@ var Message = React__default.forwardRef(function (_ref, ref) {
1907
1577
  } else {
1908
1578
  MessageComponent = StyledMessage;
1909
1579
  }
1910
- var combinedProps = _objectSpread2({
1911
- validation: validation,
1912
- validationLabel: validationLabel
1913
- }, props);
1580
+ let combinedProps = {
1581
+ validation,
1582
+ validationLabel,
1583
+ ...props
1584
+ };
1914
1585
  if (getMessageProps) {
1915
1586
  combinedProps = getMessageProps(combinedProps);
1916
1587
  }
1917
- var ariaLabel = useText(Message, combinedProps, 'validationLabel', validation);
1588
+ const ariaLabel = useText(Message, combinedProps, 'validationLabel', validation);
1918
1589
  return React__default.createElement(MessageComponent, _extends$t({
1919
1590
  ref: ref
1920
1591
  }, combinedProps), validation && React__default.createElement(StyledMessageIcon, {
@@ -1928,18 +1599,19 @@ Message.propTypes = {
1928
1599
  validationLabel: PropTypes.string
1929
1600
  };
1930
1601
 
1931
- var _excluded$e = ["indeterminate", "children"];
1932
- var Checkbox = React__default.forwardRef(function (_ref, ref) {
1933
- var indeterminate = _ref.indeterminate,
1934
- children = _ref.children,
1935
- props = _objectWithoutProperties(_ref, _excluded$e);
1936
- var fieldsetContext = useFieldsetContext();
1937
- var fieldContext = useFieldContext();
1938
- var inputRef = function inputRef(inputElement) {
1602
+ const Checkbox = React__default.forwardRef((_ref, ref) => {
1603
+ let {
1604
+ indeterminate,
1605
+ children,
1606
+ ...props
1607
+ } = _ref;
1608
+ const fieldsetContext = useFieldsetContext();
1609
+ const fieldContext = useFieldContext();
1610
+ const inputRef = inputElement => {
1939
1611
  inputElement && (inputElement.indeterminate = indeterminate);
1940
1612
  };
1941
- var combinedRef = function combinedRef(inputElement) {
1942
- [inputRef, ref].forEach(function (targetRef) {
1613
+ const combinedRef = inputElement => {
1614
+ [inputRef, ref].forEach(targetRef => {
1943
1615
  if (targetRef) {
1944
1616
  if (typeof targetRef === 'function') {
1945
1617
  targetRef(inputElement);
@@ -1949,9 +1621,11 @@ var Checkbox = React__default.forwardRef(function (_ref, ref) {
1949
1621
  }
1950
1622
  });
1951
1623
  };
1952
- var combinedProps = _objectSpread2(_objectSpread2({
1953
- ref: combinedRef
1954
- }, props), fieldsetContext);
1624
+ let combinedProps = {
1625
+ ref: combinedRef,
1626
+ ...props,
1627
+ ...fieldsetContext
1628
+ };
1955
1629
  if (fieldContext) {
1956
1630
  combinedProps = fieldContext.getInputProps(combinedProps);
1957
1631
  }
@@ -1965,29 +1639,32 @@ Checkbox.propTypes = {
1965
1639
  indeterminate: PropTypes.bool
1966
1640
  };
1967
1641
 
1968
- var InputGroupContext = createContext(undefined);
1969
- var useInputGroupContext = function useInputGroupContext() {
1642
+ const InputGroupContext = createContext(undefined);
1643
+ const useInputGroupContext = () => {
1970
1644
  return useContext(InputGroupContext);
1971
1645
  };
1972
1646
 
1973
- var _excluded$d = ["onSelect"];
1974
- var Input = React__default.forwardRef(function (_ref, ref) {
1975
- var onSelect = _ref.onSelect,
1976
- props = _objectWithoutProperties(_ref, _excluded$d);
1977
- var fieldContext = useFieldContext();
1978
- var inputGroupContext = useInputGroupContext();
1979
- var onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, function (event) {
1647
+ const Input = React__default.forwardRef((_ref, ref) => {
1648
+ let {
1649
+ onSelect,
1650
+ ...props
1651
+ } = _ref;
1652
+ const fieldContext = useFieldContext();
1653
+ const inputGroupContext = useInputGroupContext();
1654
+ const onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, event => {
1980
1655
  event.currentTarget.select();
1981
1656
  }) : onSelect;
1982
- var combinedProps = _objectSpread2({
1983
- ref: ref,
1984
- onSelect: onSelectHandler
1985
- }, props);
1657
+ let combinedProps = {
1658
+ ref,
1659
+ onSelect: onSelectHandler,
1660
+ ...props
1661
+ };
1986
1662
  if (inputGroupContext) {
1987
- combinedProps = _objectSpread2(_objectSpread2({}, combinedProps), {}, {
1663
+ combinedProps = {
1664
+ ...combinedProps,
1988
1665
  isCompact: inputGroupContext.isCompact || combinedProps.isCompact,
1989
1666
  focusInset: props.focusInset === undefined ? true : props.focusInset
1990
- });
1667
+ };
1991
1668
  }
1992
1669
  if (fieldContext) {
1993
1670
  combinedProps = fieldContext.getInputProps(combinedProps);
@@ -2002,15 +1679,18 @@ Input.propTypes = {
2002
1679
  };
2003
1680
  Input.displayName = 'Input';
2004
1681
 
2005
- var _excluded$c = ["children"];
2006
- var Radio = React__default.forwardRef(function (_ref, ref) {
2007
- var children = _ref.children,
2008
- props = _objectWithoutProperties(_ref, _excluded$c);
2009
- var fieldsetContext = useFieldsetContext();
2010
- var fieldContext = useFieldContext();
2011
- var combinedProps = _objectSpread2(_objectSpread2({
2012
- ref: ref
2013
- }, props), fieldsetContext);
1682
+ const Radio = React__default.forwardRef((_ref, ref) => {
1683
+ let {
1684
+ children,
1685
+ ...props
1686
+ } = _ref;
1687
+ const fieldsetContext = useFieldsetContext();
1688
+ const fieldContext = useFieldContext();
1689
+ let combinedProps = {
1690
+ ref,
1691
+ ...props,
1692
+ ...fieldsetContext
1693
+ };
2014
1694
  if (fieldContext) {
2015
1695
  combinedProps = fieldContext.getInputProps(combinedProps);
2016
1696
  }
@@ -2023,45 +1703,45 @@ Radio.propTypes = {
2023
1703
  isCompact: PropTypes.bool
2024
1704
  };
2025
1705
 
2026
- var _excluded$b = ["hasLowerTrack", "min", "max", "step"];
2027
- var Range = React__default.forwardRef(function (_ref, ref) {
2028
- var hasLowerTrack = _ref.hasLowerTrack,
2029
- min = _ref.min,
2030
- max = _ref.max,
2031
- step = _ref.step,
2032
- props = _objectWithoutProperties(_ref, _excluded$b);
2033
- var _useState = useState('0'),
2034
- _useState2 = _slicedToArray(_useState, 2),
2035
- backgroundSize = _useState2[0],
2036
- setBackgroundSize = _useState2[1];
2037
- var rangeRef = useRef();
2038
- var fieldContext = useFieldContext();
2039
- var updateBackgroundWidthFromInput = useCallback(function (rangeTarget) {
2040
- var relativeMax = max;
2041
- var value = rangeTarget.value;
1706
+ const Range = React__default.forwardRef((_ref, ref) => {
1707
+ let {
1708
+ hasLowerTrack,
1709
+ min,
1710
+ max,
1711
+ step,
1712
+ ...props
1713
+ } = _ref;
1714
+ const [backgroundSize, setBackgroundSize] = useState('0');
1715
+ const rangeRef = useRef();
1716
+ const fieldContext = useFieldContext();
1717
+ const updateBackgroundWidthFromInput = useCallback(rangeTarget => {
1718
+ let relativeMax = max;
1719
+ const {
1720
+ value
1721
+ } = rangeTarget;
2042
1722
  if (parseFloat(relativeMax) < parseFloat(min)) {
2043
1723
  relativeMax = 100;
2044
1724
  }
2045
- var percentage = 100 * (value - min) / (relativeMax - min);
2046
- setBackgroundSize("".concat(percentage, "%"));
1725
+ const percentage = 100 * (value - min) / (relativeMax - min);
1726
+ setBackgroundSize(`${percentage}%`);
2047
1727
  },
2048
1728
  [max, min, step]);
2049
- useEffect(function () {
1729
+ useEffect(() => {
2050
1730
  updateBackgroundWidthFromInput(rangeRef.current);
2051
1731
  }, [rangeRef, updateBackgroundWidthFromInput, props.value]);
2052
- var onChange = hasLowerTrack ? composeEventHandlers(props.onChange, function (event) {
1732
+ const onChange = hasLowerTrack ? composeEventHandlers(props.onChange, event => {
2053
1733
  updateBackgroundWidthFromInput(event.target);
2054
1734
  }) : props.onChange;
2055
- var combinedProps = _objectSpread2(_objectSpread2({
1735
+ let combinedProps = {
2056
1736
  ref: mergeRefs([rangeRef, ref]),
2057
- hasLowerTrack: hasLowerTrack,
2058
- min: min,
2059
- max: max,
2060
- step: step,
2061
- backgroundSize: backgroundSize
2062
- }, props), {}, {
2063
- onChange: onChange
2064
- });
1737
+ hasLowerTrack,
1738
+ min,
1739
+ max,
1740
+ step,
1741
+ backgroundSize,
1742
+ ...props,
1743
+ onChange
1744
+ };
2065
1745
  if (fieldContext) {
2066
1746
  combinedProps = fieldContext.getInputProps(combinedProps, {
2067
1747
  isDescribed: true
@@ -2077,45 +1757,43 @@ Range.defaultProps = {
2077
1757
  };
2078
1758
  Range.displayName = 'Range';
2079
1759
 
2080
- var _excluded$a = ["minRows", "maxRows", "style", "onChange", "onSelect"];
2081
- var parseStyleValue = function parseStyleValue(value) {
1760
+ const parseStyleValue = value => {
2082
1761
  return parseInt(value, 10) || 0;
2083
1762
  };
2084
- var Textarea = React__default.forwardRef(function (_ref, ref) {
2085
- var minRows = _ref.minRows,
2086
- maxRows = _ref.maxRows,
2087
- style = _ref.style,
2088
- onChange = _ref.onChange,
2089
- onSelect = _ref.onSelect,
2090
- props = _objectWithoutProperties(_ref, _excluded$a);
2091
- var fieldContext = useFieldContext();
2092
- var textAreaRef = useRef();
2093
- var shadowTextAreaRef = useRef(null);
2094
- var _useState = useState({
1763
+ const Textarea = React__default.forwardRef((_ref, ref) => {
1764
+ let {
1765
+ minRows,
1766
+ maxRows,
1767
+ style,
1768
+ onChange,
1769
+ onSelect,
1770
+ ...props
1771
+ } = _ref;
1772
+ const fieldContext = useFieldContext();
1773
+ const textAreaRef = useRef();
1774
+ const shadowTextAreaRef = useRef(null);
1775
+ const [state, setState] = useState({
2095
1776
  overflow: false,
2096
1777
  height: 0
2097
- }),
2098
- _useState2 = _slicedToArray(_useState, 2),
2099
- state = _useState2[0],
2100
- setState = _useState2[1];
2101
- var isControlled = props.value !== null && props.value !== undefined;
2102
- var isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable;
2103
- var calculateHeight = useCallback(function () {
1778
+ });
1779
+ const isControlled = props.value !== null && props.value !== undefined;
1780
+ const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable;
1781
+ const calculateHeight = useCallback(() => {
2104
1782
  if (!isAutoResizable) {
2105
1783
  return;
2106
1784
  }
2107
- var textarea = textAreaRef.current;
2108
- var computedStyle = window.getComputedStyle(textarea);
2109
- var shadowTextArea = shadowTextAreaRef.current;
1785
+ const textarea = textAreaRef.current;
1786
+ const computedStyle = window.getComputedStyle(textarea);
1787
+ const shadowTextArea = shadowTextAreaRef.current;
2110
1788
  shadowTextArea.style.width = computedStyle.width;
2111
1789
  shadowTextArea.value = textarea.value || textarea.placeholder || ' ';
2112
- var boxSizing = computedStyle.boxSizing;
2113
- var padding = parseStyleValue(computedStyle.paddingBottom) + parseStyleValue(computedStyle.paddingTop);
2114
- var border = parseStyleValue(computedStyle.borderTopWidth) + parseStyleValue(computedStyle.borderBottomWidth);
2115
- var innerHeight = shadowTextArea.scrollHeight - padding;
1790
+ const boxSizing = computedStyle.boxSizing;
1791
+ const padding = parseStyleValue(computedStyle.paddingBottom) + parseStyleValue(computedStyle.paddingTop);
1792
+ const border = parseStyleValue(computedStyle.borderTopWidth) + parseStyleValue(computedStyle.borderBottomWidth);
1793
+ const innerHeight = shadowTextArea.scrollHeight - padding;
2116
1794
  shadowTextArea.value = 'x';
2117
- var singleRowHeight = shadowTextArea.scrollHeight - padding;
2118
- var outerHeight = innerHeight;
1795
+ const singleRowHeight = shadowTextArea.scrollHeight - padding;
1796
+ let outerHeight = innerHeight;
2119
1797
  if (minRows) {
2120
1798
  outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
2121
1799
  }
@@ -2123,19 +1801,19 @@ var Textarea = React__default.forwardRef(function (_ref, ref) {
2123
1801
  outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
2124
1802
  }
2125
1803
  outerHeight = Math.max(outerHeight, singleRowHeight);
2126
- var updatedHeight = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
2127
- var overflow = Math.abs(outerHeight - innerHeight) <= 1;
2128
- setState(function (prevState) {
1804
+ const updatedHeight = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
1805
+ const overflow = Math.abs(outerHeight - innerHeight) <= 1;
1806
+ setState(prevState => {
2129
1807
  if (updatedHeight > 0 && Math.abs((prevState.height || 0) - updatedHeight) > 1 || prevState.overflow !== overflow) {
2130
1808
  return {
2131
- overflow: overflow,
1809
+ overflow,
2132
1810
  height: updatedHeight
2133
1811
  };
2134
1812
  }
2135
1813
  return prevState;
2136
1814
  });
2137
1815
  }, [maxRows, minRows, textAreaRef, isAutoResizable]);
2138
- var onChangeHandler = useCallback(function (e) {
1816
+ const onChangeHandler = useCallback(e => {
2139
1817
  if (!isControlled) {
2140
1818
  calculateHeight();
2141
1819
  }
@@ -2143,37 +1821,41 @@ var Textarea = React__default.forwardRef(function (_ref, ref) {
2143
1821
  onChange(e);
2144
1822
  }
2145
1823
  }, [calculateHeight, isControlled, onChange]);
2146
- useEffect(function () {
1824
+ useEffect(() => {
2147
1825
  if (!isAutoResizable) {
2148
1826
  return undefined;
2149
1827
  }
2150
- var resizeHandler = debounce(function () {
1828
+ const resizeHandler = debounce(() => {
2151
1829
  calculateHeight();
2152
1830
  });
2153
1831
  window.addEventListener('resize', resizeHandler);
2154
- return function () {
1832
+ return () => {
2155
1833
  resizeHandler.cancel();
2156
1834
  window.removeEventListener('resize', resizeHandler);
2157
1835
  };
2158
1836
  }, [calculateHeight, isAutoResizable]);
2159
- useLayoutEffect(function () {
1837
+ useLayoutEffect(() => {
2160
1838
  calculateHeight();
2161
1839
  });
2162
- var computedStyle = {};
1840
+ const computedStyle = {};
2163
1841
  if (isAutoResizable) {
2164
1842
  computedStyle.height = state.height;
2165
1843
  computedStyle.overflow = state.overflow ? 'hidden' : undefined;
2166
1844
  }
2167
- var onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, function (event) {
1845
+ const onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, event => {
2168
1846
  event.currentTarget.select();
2169
1847
  }) : onSelect;
2170
- var combinedProps = _objectSpread2({
1848
+ let combinedProps = {
2171
1849
  ref: mergeRefs([textAreaRef, ref]),
2172
1850
  rows: minRows,
2173
1851
  onChange: onChangeHandler,
2174
1852
  onSelect: onSelectHandler,
2175
- style: _objectSpread2(_objectSpread2({}, computedStyle), style)
2176
- }, props);
1853
+ style: {
1854
+ ...computedStyle,
1855
+ ...style
1856
+ },
1857
+ ...props
1858
+ };
2177
1859
  if (fieldContext) {
2178
1860
  combinedProps = fieldContext.getInputProps(combinedProps, {
2179
1861
  isDescribed: true
@@ -2202,15 +1884,18 @@ Textarea.propTypes = {
2202
1884
  };
2203
1885
  Textarea.displayName = 'Textarea';
2204
1886
 
2205
- var _excluded$9 = ["children"];
2206
- var Toggle = React__default.forwardRef(function (_ref, ref) {
2207
- var children = _ref.children,
2208
- props = _objectWithoutProperties(_ref, _excluded$9);
2209
- var fieldsetContext = useFieldsetContext();
2210
- var fieldContext = useFieldContext();
2211
- var combinedProps = _objectSpread2(_objectSpread2({
2212
- ref: ref
2213
- }, props), fieldsetContext);
1887
+ const Toggle = React__default.forwardRef((_ref, ref) => {
1888
+ let {
1889
+ children,
1890
+ ...props
1891
+ } = _ref;
1892
+ const fieldsetContext = useFieldsetContext();
1893
+ const fieldContext = useFieldContext();
1894
+ let combinedProps = {
1895
+ ref,
1896
+ ...props,
1897
+ ...fieldsetContext
1898
+ };
2214
1899
  if (fieldContext) {
2215
1900
  combinedProps = fieldContext.getInputProps(combinedProps);
2216
1901
  }
@@ -2234,45 +1919,40 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
2234
1919
  height: 16,
2235
1920
  focusable: "false",
2236
1921
  viewBox: "0 0 16 16",
2237
- "aria-hidden": "true"
1922
+ "aria-hidden": "true",
1923
+ role: "img"
2238
1924
  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
2239
1925
  fill: "currentColor",
2240
1926
  d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
2241
1927
  })));
2242
1928
  };
2243
1929
 
2244
- var StartIconComponent = function StartIconComponent(props) {
2245
- return React__default.createElement(StyledTextMediaFigure, _extends$t({
2246
- position: "start"
2247
- }, props));
2248
- };
1930
+ const StartIconComponent = props => React__default.createElement(StyledTextMediaFigure, _extends$t({
1931
+ position: "start"
1932
+ }, props));
2249
1933
  StartIconComponent.displayName = 'FauxInput.StartIcon';
2250
- var StartIcon = StartIconComponent;
1934
+ const StartIcon = StartIconComponent;
2251
1935
 
2252
- var EndIconComponent = function EndIconComponent(props) {
2253
- return React__default.createElement(StyledTextMediaFigure, _extends$t({
2254
- position: "end"
2255
- }, props));
2256
- };
1936
+ const EndIconComponent = props => React__default.createElement(StyledTextMediaFigure, _extends$t({
1937
+ position: "end"
1938
+ }, props));
2257
1939
  EndIconComponent.displayName = 'FauxInput.EndIcon';
2258
- var EndIcon = EndIconComponent;
2259
-
2260
- var _excluded$8 = ["onFocus", "onBlur", "disabled", "readOnly", "isFocused"];
2261
- var FauxInputComponent = forwardRef(function (_ref, ref) {
2262
- var onFocus = _ref.onFocus,
2263
- onBlur = _ref.onBlur,
2264
- disabled = _ref.disabled,
2265
- readOnly = _ref.readOnly,
2266
- controlledIsFocused = _ref.isFocused,
2267
- props = _objectWithoutProperties(_ref, _excluded$8);
2268
- var _useState = useState(false),
2269
- _useState2 = _slicedToArray(_useState, 2),
2270
- isFocused = _useState2[0],
2271
- setIsFocused = _useState2[1];
2272
- var onFocusHandler = composeEventHandlers(onFocus, function () {
1940
+ const EndIcon = EndIconComponent;
1941
+
1942
+ const FauxInputComponent = forwardRef((_ref, ref) => {
1943
+ let {
1944
+ onFocus,
1945
+ onBlur,
1946
+ disabled,
1947
+ readOnly,
1948
+ isFocused: controlledIsFocused,
1949
+ ...props
1950
+ } = _ref;
1951
+ const [isFocused, setIsFocused] = useState(false);
1952
+ const onFocusHandler = composeEventHandlers(onFocus, () => {
2273
1953
  setIsFocused(true);
2274
1954
  });
2275
- var onBlurHandler = composeEventHandlers(onBlur, function () {
1955
+ const onBlurHandler = composeEventHandlers(onBlur, () => {
2276
1956
  setIsFocused(false);
2277
1957
  });
2278
1958
  return React__default.createElement(StyledTextFauxInput, _extends$t({
@@ -2297,21 +1977,23 @@ FauxInputComponent.propTypes = {
2297
1977
  isFocused: PropTypes.bool,
2298
1978
  isHovered: PropTypes.bool
2299
1979
  };
2300
- var FauxInput = FauxInputComponent;
1980
+ const FauxInput = FauxInputComponent;
2301
1981
  FauxInput.EndIcon = EndIcon;
2302
1982
  FauxInput.StartIcon = StartIcon;
2303
1983
 
2304
- var _excluded$7 = ["disabled", "isCompact"];
2305
- var Select = React__default.forwardRef(function (_ref, ref) {
2306
- var disabled = _ref.disabled,
2307
- isCompact = _ref.isCompact,
2308
- props = _objectWithoutProperties(_ref, _excluded$7);
2309
- var fieldContext = useFieldContext();
2310
- var combinedProps = _objectSpread2({
2311
- disabled: disabled,
2312
- isCompact: isCompact,
2313
- ref: ref
2314
- }, props);
1984
+ const Select = React__default.forwardRef((_ref, ref) => {
1985
+ let {
1986
+ disabled,
1987
+ isCompact,
1988
+ ...props
1989
+ } = _ref;
1990
+ const fieldContext = useFieldContext();
1991
+ let combinedProps = {
1992
+ disabled,
1993
+ isCompact,
1994
+ ref,
1995
+ ...props
1996
+ };
2315
1997
  if (fieldContext) {
2316
1998
  combinedProps = fieldContext.getInputProps(combinedProps, {
2317
1999
  isDescribed: true
@@ -2331,304 +2013,92 @@ Select.propTypes = {
2331
2013
  };
2332
2014
  Select.displayName = 'Select';
2333
2015
 
2334
- var _excluded$6 = ["min", "max", "minValue", "maxValue", "disabled", "step", "onChange", "onMouseDown"];
2335
- var MultiThumbRange = forwardRef(function (_ref, ref) {
2336
- var min = _ref.min,
2337
- max = _ref.max,
2338
- minValue = _ref.minValue,
2339
- maxValue = _ref.maxValue,
2340
- disabled = _ref.disabled,
2341
- step = _ref.step,
2342
- onChange = _ref.onChange,
2343
- onMouseDown = _ref.onMouseDown,
2344
- props = _objectWithoutProperties(_ref, _excluded$6);
2345
- var theme = useContext(ThemeContext);
2346
- var themedDocument = useDocument(theme);
2347
- var _useState = useState(false),
2348
- _useState2 = _slicedToArray(_useState, 2),
2349
- isMinThumbFocused = _useState2[0],
2350
- setIsMinThumbFocused = _useState2[1];
2351
- var _useState3 = useState(0),
2352
- _useState4 = _slicedToArray(_useState3, 2),
2353
- railWidth = _useState4[0],
2354
- setRailWidth = _useState4[1];
2355
- var _useState5 = useState(false),
2356
- _useState6 = _slicedToArray(_useState5, 2),
2357
- isMousedDown = _useState6[0],
2358
- setIsMousedDown = _useState6[1];
2359
- var trackRailRef = useRef(null);
2360
- var minThumbRef = useRef(null);
2361
- var maxThumbRef = useRef(null);
2362
- var fieldContext = useFieldContext();
2363
- var _ref2 = fieldContext || {},
2364
- isLabelHovered = _ref2.isLabelHovered,
2365
- isLabelActive = _ref2.isLabelActive,
2366
- multiThumbRangeRef = _ref2.multiThumbRangeRef;
2367
- var onWindowResize = useCallback(debounce(function () {
2368
- if (trackRailRef.current) {
2369
- setRailWidth(trackRailRef.current.getBoundingClientRect().width);
2370
- }
2371
- }, 100), []);
2372
- useEffect(function () {
2016
+ const MIN = 0;
2017
+ const MAX = 100;
2018
+ const MultiThumbRange = forwardRef((_ref, ref) => {
2019
+ let {
2020
+ min = MIN,
2021
+ max = MAX,
2022
+ minValue,
2023
+ maxValue,
2024
+ disabled,
2025
+ step,
2026
+ jump,
2027
+ onChange,
2028
+ onMouseDown,
2029
+ ...props
2030
+ } = _ref;
2031
+ const theme = useContext(ThemeContext);
2032
+ const environment = useDocument(theme);
2033
+ const trackRailRef = useRef(null);
2034
+ const minThumbRef = useRef(null);
2035
+ const maxThumbRef = useRef(null);
2036
+ const {
2037
+ getTrackProps,
2038
+ getMinThumbProps,
2039
+ getMaxThumbProps,
2040
+ trackRect,
2041
+ minValue: updatedMinValue,
2042
+ maxValue: updatedMaxValue
2043
+ } = useSlider({
2044
+ trackRef: trackRailRef,
2045
+ minThumbRef,
2046
+ maxThumbRef,
2047
+ min,
2048
+ max,
2049
+ minValue,
2050
+ maxValue,
2051
+ onChange,
2052
+ step,
2053
+ jump,
2054
+ disabled,
2055
+ rtl: theme.rtl,
2056
+ environment
2057
+ });
2058
+ const {
2059
+ onMouseDown: onSliderMouseDown,
2060
+ ...trackProps
2061
+ } = getTrackProps({
2062
+ onMouseDown
2063
+ });
2064
+ const fieldContext = useFieldContext();
2065
+ const {
2066
+ isLabelHovered,
2067
+ isLabelActive,
2068
+ multiThumbRangeRef
2069
+ } = fieldContext || {};
2070
+ useEffect(() => {
2373
2071
  if (multiThumbRangeRef) {
2374
2072
  multiThumbRangeRef.current = minThumbRef.current;
2375
2073
  }
2376
2074
  }, [multiThumbRangeRef]);
2377
- useEffect(function () {
2378
- onWindowResize();
2379
- window.addEventListener('resize', onWindowResize);
2380
- return function () {
2381
- window.removeEventListener('resize', onWindowResize);
2382
- };
2383
- }, [onWindowResize]);
2384
- var calculateMinPosition = useCallback(function (minDistance) {
2385
- var boundedMinValue = minValue;
2386
- if (boundedMinValue < min) {
2387
- boundedMinValue = min;
2388
- } else if (boundedMinValue > maxValue) {
2389
- boundedMinValue = maxValue;
2390
- } else if (boundedMinValue > max) {
2391
- boundedMinValue = max;
2392
- }
2393
- return (boundedMinValue - min) / (max - min) * (railWidth - minDistance);
2394
- }, [max, maxValue, min, minValue, railWidth]);
2395
- var calculateMaxPosition = useCallback(function (minDistance) {
2396
- var boundedMaxValue = maxValue;
2397
- if (boundedMaxValue > max) {
2398
- boundedMaxValue = max;
2399
- } else if (boundedMaxValue < minValue) {
2400
- boundedMaxValue = minValue;
2401
- } else if (boundedMaxValue < min) {
2402
- boundedMaxValue = min;
2403
- }
2404
- return (boundedMaxValue - min) / (max - min) * (railWidth - minDistance) + minDistance;
2405
- }, [max, maxValue, min, minValue, railWidth]);
2406
- var onRangeValuesChange = useCallback(function () {
2407
- var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
2408
- newMinValue = _ref3.minValue,
2409
- newMaxValue = _ref3.maxValue;
2410
- if (disabled) {
2411
- return;
2412
- }
2413
- if (onChange && (newMinValue !== minValue || newMaxValue !== maxValue)) {
2414
- onChange({
2415
- minValue: newMinValue,
2416
- maxValue: newMaxValue
2417
- });
2418
- }
2419
- }, [disabled, maxValue, minValue, onChange]);
2420
- var updateMinThumbSlider = useCallback(function (value) {
2421
- var managedValue = value;
2422
- if (value < min) {
2423
- managedValue = min;
2424
- } else if (value > maxValue) {
2425
- managedValue = maxValue;
2426
- }
2427
- onRangeValuesChange({
2428
- maxValue: maxValue,
2429
- minValue: managedValue
2430
- });
2431
- }, [maxValue, min, onRangeValuesChange]);
2432
- var updateMaxThumbSlider = useCallback(function (value) {
2433
- var managedValue = value;
2434
- if (value < minValue) {
2435
- managedValue = minValue;
2436
- } else if (value > max) {
2437
- managedValue = max;
2438
- }
2439
- onRangeValuesChange({
2440
- maxValue: managedValue,
2441
- minValue: minValue
2442
- });
2443
- }, [max, minValue, onRangeValuesChange]);
2444
- var calculateUpdatedValue = useCallback(function (e) {
2445
- if (!trackRailRef.current) {
2446
- return undefined;
2447
- }
2448
- var trackOffsetLeft = trackRailRef.current.getBoundingClientRect().left;
2449
- var trackOffsetRight = trackOffsetLeft + trackRailRef.current.getBoundingClientRect().width;
2450
- var trackWidth = trackRailRef.current.getBoundingClientRect().width;
2451
- var diffX = e.pageX - (theme.rtl ? trackOffsetRight : trackOffsetLeft);
2452
- if (theme.rtl) {
2453
- diffX *= -1;
2454
- }
2455
- var newValue = min + parseInt((max - min) * diffX / trackWidth, 10);
2456
- return Math.floor(newValue / step) * step;
2457
- }, [max, min, step, theme.rtl]);
2458
- var onDocumentMouseMove = useCallback(function (e) {
2459
- var newValue = calculateUpdatedValue(e);
2460
- if (isMinThumbFocused) {
2461
- updateMinThumbSlider(newValue);
2462
- } else {
2463
- updateMaxThumbSlider(newValue);
2464
- }
2465
- }, [calculateUpdatedValue, isMinThumbFocused, updateMinThumbSlider, updateMaxThumbSlider]);
2466
- var removeDragEvents = useCallback(function () {
2467
- if (themedDocument) {
2468
- themedDocument.removeEventListener('mousemove', onDocumentMouseMove);
2469
- themedDocument.removeEventListener('mouseup', removeDragEvents);
2470
- }
2471
- setIsMousedDown(false);
2472
- }, [onDocumentMouseMove, themedDocument]);
2473
- var onTrackMouseDown = useCallback(function (e) {
2474
- if (e.button !== 0 || disabled) {
2475
- return;
2476
- }
2477
- e.preventDefault();
2478
- var valueAtMouseDown = calculateUpdatedValue(e);
2479
- if (valueAtMouseDown === undefined || minValue === undefined || maxValue === undefined) {
2480
- return;
2481
- }
2482
- var distanceFromMinThumb = Math.abs(minValue - valueAtMouseDown);
2483
- var distanceFromMaxThumb = Math.abs(maxValue - valueAtMouseDown);
2484
- if (distanceFromMinThumb <= distanceFromMaxThumb) {
2485
- minThumbRef.current && minThumbRef.current.focus();
2486
- updateMinThumbSlider(valueAtMouseDown);
2487
- } else {
2488
- maxThumbRef.current && maxThumbRef.current.focus();
2489
- updateMaxThumbSlider(valueAtMouseDown);
2490
- }
2491
- }, [calculateUpdatedValue, disabled, maxValue, minValue, updateMaxThumbSlider, updateMinThumbSlider]);
2492
- useEffect(function () {
2493
- if (isMousedDown && themedDocument) {
2494
- themedDocument.addEventListener('mousemove', onDocumentMouseMove);
2495
- themedDocument.addEventListener('mouseup', removeDragEvents);
2496
- }
2497
- return function () {
2498
- if (isMousedDown && themedDocument) {
2499
- themedDocument.removeEventListener('mousemove', onDocumentMouseMove);
2500
- themedDocument.removeEventListener('mouseup', removeDragEvents);
2501
- }
2502
- };
2503
- }, [isMousedDown, onDocumentMouseMove, removeDragEvents, themedDocument]);
2504
- var _onKeyDown = function onKeyDown(type) {
2505
- return function (e) {
2506
- var isMinThumb = type === 'min';
2507
- var keyIntercepted = false;
2508
- var decrementThumb = function decrementThumb() {
2509
- if (isMinThumb) {
2510
- updateMinThumbSlider(minValue - step);
2511
- } else {
2512
- updateMaxThumbSlider(maxValue - step);
2513
- }
2514
- };
2515
- var incrementThumb = function incrementThumb() {
2516
- if (isMinThumb) {
2517
- updateMinThumbSlider(minValue + step);
2518
- } else {
2519
- updateMaxThumbSlider(maxValue + step);
2520
- }
2521
- };
2522
- switch (e.keyCode) {
2523
- case KEY_CODES.LEFT:
2524
- if (theme.rtl) {
2525
- incrementThumb();
2526
- } else {
2527
- decrementThumb();
2528
- }
2529
- keyIntercepted = true;
2530
- break;
2531
- case KEY_CODES.DOWN:
2532
- decrementThumb();
2533
- keyIntercepted = true;
2534
- break;
2535
- case KEY_CODES.RIGHT:
2536
- if (theme.rtl) {
2537
- decrementThumb();
2538
- } else {
2539
- incrementThumb();
2540
- }
2541
- keyIntercepted = true;
2542
- break;
2543
- case KEY_CODES.UP:
2544
- incrementThumb();
2545
- keyIntercepted = true;
2546
- break;
2547
- case KEY_CODES.HOME:
2548
- if (isMinThumb) {
2549
- updateMinThumbSlider(min);
2550
- } else {
2551
- updateMaxThumbSlider(min);
2552
- }
2553
- keyIntercepted = true;
2554
- break;
2555
- case KEY_CODES.END:
2556
- if (isMinThumb) {
2557
- updateMinThumbSlider(max);
2558
- } else {
2559
- updateMaxThumbSlider(max);
2560
- }
2561
- keyIntercepted = true;
2562
- break;
2563
- }
2564
- if (keyIntercepted) {
2565
- e.preventDefault();
2566
- e.stopPropagation();
2567
- }
2568
- };
2569
- };
2570
- var MIN_DISTANCE = 0;
2571
- var minPosition = calculateMinPosition(MIN_DISTANCE);
2572
- var maxPosition = calculateMaxPosition(MIN_DISTANCE);
2573
- var sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition);
2574
- var onSliderMouseDown = composeEventHandlers(onMouseDown, onTrackMouseDown);
2075
+ const minPosition = (updatedMinValue - min) / (max - min) * trackRect.width;
2076
+ const maxPosition = (updatedMaxValue - min) / (max - min) * trackRect.width;
2077
+ const sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition);
2575
2078
  return React__default.createElement(StyledSlider, _extends$t({
2576
2079
  ref: ref,
2577
- isDisabled: disabled,
2578
2080
  onMouseDown: onSliderMouseDown
2579
2081
  }, props), React__default.createElement(StyledSliderTrack, {
2580
2082
  backgroundSize: sliderBackgroundSize,
2581
- backgroundPosition: theme.rtl ? railWidth - maxPosition : minPosition,
2083
+ backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition,
2582
2084
  isDisabled: disabled
2583
- }, React__default.createElement(StyledSliderTrackRail, {
2085
+ }, React__default.createElement(StyledSliderTrackRail, _extends$t({}, trackProps, {
2584
2086
  ref: trackRailRef
2585
- }, React__default.createElement(StyledSliderThumb, {
2586
- role: "slider",
2587
- tabIndex: disabled ? undefined : 0,
2588
- "aria-valuemin": min,
2589
- "aria-valuemax": maxValue,
2590
- "aria-valuenow": minValue,
2591
- "aria-valuetext": minValue,
2087
+ }), React__default.createElement(StyledSliderThumb, _extends$t({}, getMinThumbProps({
2088
+ 'aria-label': updatedMinValue
2089
+ }), {
2592
2090
  isDisabled: disabled,
2593
2091
  position: minPosition,
2594
2092
  ref: minThumbRef,
2595
- onKeyDown: function onKeyDown(e) {
2596
- return _onKeyDown('min')(e);
2597
- },
2598
- onFocus: function onFocus() {
2599
- setIsMinThumbFocused(true);
2600
- },
2601
- onBlur: function onBlur() {
2602
- setIsMinThumbFocused(false);
2603
- },
2604
- onMouseDown: function onMouseDown(e) {
2605
- setIsMousedDown(true);
2606
- e.preventDefault();
2607
- e.stopPropagation();
2608
- minThumbRef.current && minThumbRef.current.focus();
2609
- },
2610
2093
  "data-garden-active": isLabelActive,
2611
2094
  "data-garden-hover": isLabelHovered
2612
- }), React__default.createElement(StyledSliderThumb, {
2613
- role: "slider",
2614
- tabIndex: disabled ? undefined : 0,
2615
- "aria-valuemin": minValue,
2616
- "aria-valuemax": max,
2617
- "aria-valuenow": maxValue,
2618
- "aria-valuetext": maxValue,
2095
+ })), React__default.createElement(StyledSliderThumb, _extends$t({}, getMaxThumbProps({
2096
+ 'aria-label': updatedMaxValue
2097
+ }), {
2619
2098
  isDisabled: disabled,
2620
2099
  position: maxPosition,
2621
- onKeyDown: function onKeyDown(e) {
2622
- return _onKeyDown('max')(e);
2623
- },
2624
- ref: maxThumbRef,
2625
- onMouseDown: function onMouseDown(e) {
2626
- setIsMousedDown(true);
2627
- e.preventDefault();
2628
- e.stopPropagation();
2629
- maxThumbRef.current && maxThumbRef.current.focus();
2630
- }
2631
- }))));
2100
+ ref: maxThumbRef
2101
+ })))));
2632
2102
  });
2633
2103
  MultiThumbRange.displayName = 'MultiThumbRange';
2634
2104
  MultiThumbRange.propTypes = {
@@ -2637,35 +2107,32 @@ MultiThumbRange.propTypes = {
2637
2107
  minValue: PropTypes.number,
2638
2108
  maxValue: PropTypes.number,
2639
2109
  step: PropTypes.number,
2110
+ jump: PropTypes.number,
2640
2111
  disabled: PropTypes.bool,
2641
2112
  onChange: PropTypes.func
2642
2113
  };
2643
2114
  MultiThumbRange.defaultProps = {
2644
- min: 0,
2645
- max: 100,
2646
- minValue: 0,
2647
- maxValue: 100,
2115
+ min: MIN,
2116
+ max: MAX,
2648
2117
  step: 1
2649
2118
  };
2650
2119
 
2651
- var TilesContext = createContext(undefined);
2652
- var useTilesContext = function useTilesContext() {
2120
+ const TilesContext = createContext(undefined);
2121
+ const useTilesContext = () => {
2653
2122
  return useContext(TilesContext);
2654
2123
  };
2655
2124
 
2656
- var _excluded$5 = ["children", "value", "disabled"];
2657
- var TileComponent = React__default.forwardRef(function (_ref, ref) {
2658
- var children = _ref.children,
2659
- value = _ref.value,
2660
- disabled = _ref.disabled,
2661
- props = _objectWithoutProperties(_ref, _excluded$5);
2662
- var _useState = useState(false),
2663
- _useState2 = _slicedToArray(_useState, 2),
2664
- isFocused = _useState2[0],
2665
- setIsFocused = _useState2[1];
2666
- var tilesContext = useTilesContext();
2667
- var inputRef = useRef(null);
2668
- var inputProps;
2125
+ const TileComponent = React__default.forwardRef((_ref, ref) => {
2126
+ let {
2127
+ children,
2128
+ value,
2129
+ disabled,
2130
+ ...props
2131
+ } = _ref;
2132
+ const [isFocused, setIsFocused] = useState(false);
2133
+ const tilesContext = useTilesContext();
2134
+ const inputRef = useRef(null);
2135
+ let inputProps;
2669
2136
  if (tilesContext) {
2670
2137
  inputProps = {
2671
2138
  name: tilesContext.name,
@@ -2682,12 +2149,10 @@ var TileComponent = React__default.forwardRef(function (_ref, ref) {
2682
2149
  }, props), children, React__default.createElement(StyledTileInput, _extends$t({}, inputProps, {
2683
2150
  disabled: disabled,
2684
2151
  value: value,
2685
- onBlur: function onBlur() {
2686
- return setIsFocused(false);
2687
- },
2688
- onFocus: function onFocus(e) {
2152
+ onBlur: () => setIsFocused(false),
2153
+ onFocus: e => {
2689
2154
  e.persist();
2690
- setTimeout(function () {
2155
+ setTimeout(() => {
2691
2156
  if (e.target.getAttribute('data-garden-focus-visible')) {
2692
2157
  setIsFocused(true);
2693
2158
  }
@@ -2702,36 +2167,33 @@ TileComponent.propTypes = {
2702
2167
  value: PropTypes.string,
2703
2168
  disabled: PropTypes.bool
2704
2169
  };
2705
- var Tile = TileComponent;
2170
+ const Tile = TileComponent;
2706
2171
 
2707
- var DescriptionComponent = forwardRef(function (props, ref) {
2708
- var tilesContext = useTilesContext();
2172
+ const DescriptionComponent = forwardRef((props, ref) => {
2173
+ const tilesContext = useTilesContext();
2709
2174
  return React__default.createElement(StyledTileDescription, _extends$t({
2710
2175
  ref: ref,
2711
2176
  isCentered: tilesContext && tilesContext.isCentered
2712
2177
  }, props));
2713
2178
  });
2714
2179
  DescriptionComponent.displayName = 'Tiles.Description';
2715
- var Description = DescriptionComponent;
2180
+ const Description = DescriptionComponent;
2716
2181
 
2717
- var IconComponent = forwardRef(function (props, ref) {
2718
- var tileContext = useTilesContext();
2182
+ const IconComponent = forwardRef((props, ref) => {
2183
+ const tileContext = useTilesContext();
2719
2184
  return React__default.createElement(StyledTileIcon, _extends$t({
2720
2185
  ref: ref,
2721
2186
  isCentered: tileContext && tileContext.isCentered
2722
2187
  }, props));
2723
2188
  });
2724
2189
  IconComponent.displayName = 'Tiles.Icon';
2725
- var Icon = IconComponent;
2726
-
2727
- var LabelComponent = forwardRef(function (props, forwardedRef) {
2728
- var _useState = useState(''),
2729
- _useState2 = _slicedToArray(_useState, 2),
2730
- title = _useState2[0],
2731
- setTitle = _useState2[1];
2732
- var ref = useRef();
2733
- var tilesContext = useTilesContext();
2734
- useEffect(function () {
2190
+ const Icon = IconComponent;
2191
+
2192
+ const LabelComponent = forwardRef((props, forwardedRef) => {
2193
+ const [title, setTitle] = useState('');
2194
+ const ref = useRef();
2195
+ const tilesContext = useTilesContext();
2196
+ useEffect(() => {
2735
2197
  if (ref.current) {
2736
2198
  setTitle(ref.current.textContent || undefined);
2737
2199
  }
@@ -2743,37 +2205,33 @@ var LabelComponent = forwardRef(function (props, forwardedRef) {
2743
2205
  }, props));
2744
2206
  });
2745
2207
  LabelComponent.displayName = 'Tiles.Label';
2746
- var Label = LabelComponent;
2747
-
2748
- var _excluded$4 = ["onChange", "value", "name", "isCentered"];
2749
- var TilesComponent = forwardRef(function (_ref, ref) {
2750
- var onChange = _ref.onChange,
2751
- controlledValue = _ref.value,
2752
- name = _ref.name,
2753
- isCentered = _ref.isCentered,
2754
- props = _objectWithoutProperties(_ref, _excluded$4);
2755
- var _useState = useState(controlledValue),
2756
- _useState2 = _slicedToArray(_useState, 2),
2757
- value = _useState2[0],
2758
- setValue = _useState2[1];
2759
- var handleOnChange = useCallback(function () {
2208
+ const Label = LabelComponent;
2209
+
2210
+ const TilesComponent = forwardRef((_ref, ref) => {
2211
+ let {
2212
+ onChange,
2213
+ value: controlledValue,
2214
+ name,
2215
+ isCentered,
2216
+ ...props
2217
+ } = _ref;
2218
+ const [value, setValue] = useState(controlledValue);
2219
+ const handleOnChange = useCallback(function () {
2760
2220
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
2761
2221
  args[_key] = arguments[_key];
2762
2222
  }
2763
2223
  setValue(args[0].target.value);
2764
2224
  if (onChange) {
2765
- onChange.apply(void 0, args);
2225
+ onChange(...args);
2766
2226
  }
2767
2227
  }, [onChange]);
2768
- var selectedValue = getControlledValue(controlledValue, value);
2769
- var tileContext = useMemo(function () {
2770
- return {
2771
- onChange: handleOnChange,
2772
- value: selectedValue,
2773
- name: name,
2774
- isCentered: isCentered
2775
- };
2776
- }, [handleOnChange, selectedValue, name, isCentered]);
2228
+ const selectedValue = getControlledValue(controlledValue, value);
2229
+ const tileContext = useMemo(() => ({
2230
+ onChange: handleOnChange,
2231
+ value: selectedValue,
2232
+ name,
2233
+ isCentered
2234
+ }), [handleOnChange, selectedValue, name, isCentered]);
2777
2235
  return React__default.createElement(TilesContext.Provider, {
2778
2236
  value: tileContext
2779
2237
  }, React__default.createElement("div", _extends$t({
@@ -2791,21 +2249,20 @@ TilesComponent.propTypes = {
2791
2249
  TilesComponent.defaultProps = {
2792
2250
  isCentered: true
2793
2251
  };
2794
- var Tiles = TilesComponent;
2252
+ const Tiles = TilesComponent;
2795
2253
  Tiles.Description = Description;
2796
2254
  Tiles.Icon = Icon;
2797
2255
  Tiles.Label = Label;
2798
2256
  Tiles.Tile = Tile;
2799
2257
 
2800
- var _excluded$3 = ["isCompact"];
2801
- var InputGroup = React__default.forwardRef(function (_ref, ref) {
2802
- var isCompact = _ref.isCompact,
2803
- props = _objectWithoutProperties(_ref, _excluded$3);
2804
- var contextValue = useMemo(function () {
2805
- return {
2806
- isCompact: isCompact
2807
- };
2808
- }, [isCompact]);
2258
+ const InputGroup = React__default.forwardRef((_ref, ref) => {
2259
+ let {
2260
+ isCompact,
2261
+ ...props
2262
+ } = _ref;
2263
+ const contextValue = useMemo(() => ({
2264
+ isCompact
2265
+ }), [isCompact]);
2809
2266
  return React__default.createElement(InputGroupContext.Provider, {
2810
2267
  value: contextValue
2811
2268
  }, React__default.createElement(StyledInputGroup, _extends$t({
@@ -2818,10 +2275,11 @@ InputGroup.propTypes = {
2818
2275
  isCompact: PropTypes.bool
2819
2276
  };
2820
2277
 
2821
- var _excluded$2 = ["disabled"];
2822
- var FileUpload = React__default.forwardRef(function (_ref, ref) {
2823
- var disabled = _ref.disabled,
2824
- props = _objectWithoutProperties(_ref, _excluded$2);
2278
+ const FileUpload = React__default.forwardRef((_ref, ref) => {
2279
+ let {
2280
+ disabled,
2281
+ ...props
2282
+ } = _ref;
2825
2283
  return React__default.createElement(StyledFileUpload, _extends$t({
2826
2284
  ref: ref,
2827
2285
  "aria-disabled": disabled
@@ -2834,23 +2292,27 @@ FileUpload.propTypes = {
2834
2292
  };
2835
2293
  FileUpload.displayName = 'FileUpload';
2836
2294
 
2837
- var ItemComponent = forwardRef(function (_ref, ref) {
2838
- var props = _extends$t({}, _ref);
2295
+ const ItemComponent = forwardRef((_ref, ref) => {
2296
+ let {
2297
+ ...props
2298
+ } = _ref;
2839
2299
  return React__default.createElement(StyledFileListItem, _extends$t({}, props, {
2840
2300
  ref: ref
2841
2301
  }));
2842
2302
  });
2843
2303
  ItemComponent.displayName = 'FileList.Item';
2844
- var Item = ItemComponent;
2304
+ const Item = ItemComponent;
2845
2305
 
2846
- var FileListComponent = forwardRef(function (_ref, ref) {
2847
- var props = _extends$t({}, _ref);
2306
+ const FileListComponent = forwardRef((_ref, ref) => {
2307
+ let {
2308
+ ...props
2309
+ } = _ref;
2848
2310
  return React__default.createElement(StyledFileList, _extends$t({}, props, {
2849
2311
  ref: ref
2850
2312
  }));
2851
2313
  });
2852
2314
  FileListComponent.displayName = 'FileList';
2853
- var FileList = FileListComponent;
2315
+ const FileList = FileListComponent;
2854
2316
  FileList.Item = Item;
2855
2317
 
2856
2318
  var _path$j;
@@ -2864,7 +2326,8 @@ var SvgXStroke$1 = function SvgXStroke(props) {
2864
2326
  height: 12,
2865
2327
  focusable: "false",
2866
2328
  viewBox: "0 0 12 12",
2867
- "aria-hidden": "true"
2329
+ "aria-hidden": "true",
2330
+ role: "img"
2868
2331
  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
2869
2332
  stroke: "currentColor",
2870
2333
  strokeLinecap: "round",
@@ -2883,7 +2346,8 @@ var SvgXStroke = function SvgXStroke(props) {
2883
2346
  height: 16,
2884
2347
  focusable: "false",
2885
2348
  viewBox: "0 0 16 16",
2886
- "aria-hidden": "true"
2349
+ "aria-hidden": "true",
2350
+ role: "img"
2887
2351
  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
2888
2352
  stroke: "currentColor",
2889
2353
  strokeLinecap: "round",
@@ -2891,16 +2355,14 @@ var SvgXStroke = function SvgXStroke(props) {
2891
2355
  })));
2892
2356
  };
2893
2357
 
2894
- var FileContext = createContext(undefined);
2895
- var useFileContext = function useFileContext() {
2358
+ const FileContext = createContext(undefined);
2359
+ const useFileContext = () => {
2896
2360
  return useContext(FileContext);
2897
2361
  };
2898
2362
 
2899
- var CloseComponent = React__default.forwardRef(function (props, ref) {
2900
- var fileContext = useFileContext();
2901
- var onMouseDown = composeEventHandlers(props.onMouseDown, function (event) {
2902
- return event.preventDefault();
2903
- }
2363
+ const CloseComponent = React__default.forwardRef((props, ref) => {
2364
+ const fileContext = useFileContext();
2365
+ const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.preventDefault()
2904
2366
  );
2905
2367
  return React__default.createElement(StyledFileClose, _extends$t({
2906
2368
  ref: ref
@@ -2909,7 +2371,7 @@ var CloseComponent = React__default.forwardRef(function (props, ref) {
2909
2371
  }), fileContext && fileContext.isCompact ? React__default.createElement(SvgXStroke$1, null) : React__default.createElement(SvgXStroke, null));
2910
2372
  });
2911
2373
  CloseComponent.displayName = 'File.Close';
2912
- var Close = CloseComponent;
2374
+ const Close = CloseComponent;
2913
2375
 
2914
2376
  var _path$h;
2915
2377
 
@@ -2922,7 +2384,8 @@ var SvgTrashStroke$1 = function SvgTrashStroke(props) {
2922
2384
  height: 12,
2923
2385
  focusable: "false",
2924
2386
  viewBox: "0 0 12 12",
2925
- "aria-hidden": "true"
2387
+ "aria-hidden": "true",
2388
+ role: "img"
2926
2389
  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
2927
2390
  fill: "none",
2928
2391
  stroke: "currentColor",
@@ -2942,7 +2405,8 @@ var SvgTrashStroke = function SvgTrashStroke(props) {
2942
2405
  height: 16,
2943
2406
  focusable: "false",
2944
2407
  viewBox: "0 0 16 16",
2945
- "aria-hidden": "true"
2408
+ "aria-hidden": "true",
2409
+ role: "img"
2946
2410
  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
2947
2411
  fill: "none",
2948
2412
  stroke: "currentColor",
@@ -2951,11 +2415,9 @@ var SvgTrashStroke = function SvgTrashStroke(props) {
2951
2415
  })));
2952
2416
  };
2953
2417
 
2954
- var DeleteComponent = React__default.forwardRef(function (props, ref) {
2955
- var fileContext = useFileContext();
2956
- var onMouseDown = composeEventHandlers(props.onMouseDown, function (event) {
2957
- return event.preventDefault();
2958
- }
2418
+ const DeleteComponent = React__default.forwardRef((props, ref) => {
2419
+ const fileContext = useFileContext();
2420
+ const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.preventDefault()
2959
2421
  );
2960
2422
  return React__default.createElement(StyledFileDelete, _extends$t({
2961
2423
  ref: ref
@@ -2964,7 +2426,7 @@ var DeleteComponent = React__default.forwardRef(function (props, ref) {
2964
2426
  }), fileContext && fileContext.isCompact ? React__default.createElement(SvgTrashStroke$1, null) : React__default.createElement(SvgTrashStroke, null));
2965
2427
  });
2966
2428
  DeleteComponent.displayName = 'File.Delete';
2967
- var Delete = DeleteComponent;
2429
+ const Delete = DeleteComponent;
2968
2430
 
2969
2431
  var _path$f, _rect$1;
2970
2432
 
@@ -2977,7 +2439,8 @@ var SvgFilePdfStroke$1 = function SvgFilePdfStroke(props) {
2977
2439
  height: 12,
2978
2440
  focusable: "false",
2979
2441
  viewBox: "0 0 12 12",
2980
- "aria-hidden": "true"
2442
+ "aria-hidden": "true",
2443
+ role: "img"
2981
2444
  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
2982
2445
  fill: "none",
2983
2446
  stroke: "currentColor",
@@ -3005,7 +2468,8 @@ var SvgFileZipStroke$1 = function SvgFileZipStroke(props) {
3005
2468
  height: 12,
3006
2469
  focusable: "false",
3007
2470
  viewBox: "0 0 12 12",
3008
- "aria-hidden": "true"
2471
+ "aria-hidden": "true",
2472
+ role: "img"
3009
2473
  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
3010
2474
  fill: "none",
3011
2475
  stroke: "currentColor",
@@ -3025,7 +2489,8 @@ var SvgFileImageStroke$1 = function SvgFileImageStroke(props) {
3025
2489
  height: 12,
3026
2490
  focusable: "false",
3027
2491
  viewBox: "0 0 12 12",
3028
- "aria-hidden": "true"
2492
+ "aria-hidden": "true",
2493
+ role: "img"
3029
2494
  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
3030
2495
  fill: "none",
3031
2496
  stroke: "currentColor",
@@ -3051,7 +2516,8 @@ var SvgFileDocumentStroke$1 = function SvgFileDocumentStroke(props) {
3051
2516
  height: 12,
3052
2517
  focusable: "false",
3053
2518
  viewBox: "0 0 12 12",
3054
- "aria-hidden": "true"
2519
+ "aria-hidden": "true",
2520
+ role: "img"
3055
2521
  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
3056
2522
  fill: "none",
3057
2523
  stroke: "currentColor",
@@ -3071,7 +2537,8 @@ var SvgFileSpreadsheetStroke$1 = function SvgFileSpreadsheetStroke(props) {
3071
2537
  height: 12,
3072
2538
  focusable: "false",
3073
2539
  viewBox: "0 0 12 12",
3074
- "aria-hidden": "true"
2540
+ "aria-hidden": "true",
2541
+ role: "img"
3075
2542
  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
3076
2543
  fill: "none",
3077
2544
  stroke: "currentColor",
@@ -3091,7 +2558,8 @@ var SvgFilePresentationStroke$1 = function SvgFilePresentationStroke(props) {
3091
2558
  height: 12,
3092
2559
  focusable: "false",
3093
2560
  viewBox: "0 0 12 12",
3094
- "aria-hidden": "true"
2561
+ "aria-hidden": "true",
2562
+ role: "img"
3095
2563
  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
3096
2564
  fill: "none",
3097
2565
  stroke: "currentColor",
@@ -3110,7 +2578,8 @@ var SvgFileGenericStroke$1 = function SvgFileGenericStroke(props) {
3110
2578
  height: 12,
3111
2579
  focusable: "false",
3112
2580
  viewBox: "0 0 12 12",
3113
- "aria-hidden": "true"
2581
+ "aria-hidden": "true",
2582
+ role: "img"
3114
2583
  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
3115
2584
  fill: "none",
3116
2585
  stroke: "currentColor",
@@ -3129,7 +2598,8 @@ var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
3129
2598
  height: 12,
3130
2599
  focusable: "false",
3131
2600
  viewBox: "0 0 12 12",
3132
- "aria-hidden": "true"
2601
+ "aria-hidden": "true",
2602
+ role: "img"
3133
2603
  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
3134
2604
  fill: "none",
3135
2605
  stroke: "currentColor"
@@ -3155,7 +2625,8 @@ var SvgFileErrorStroke$1 = function SvgFileErrorStroke(props) {
3155
2625
  height: 12,
3156
2626
  focusable: "false",
3157
2627
  viewBox: "0 0 12 12",
3158
- "aria-hidden": "true"
2628
+ "aria-hidden": "true",
2629
+ role: "img"
3159
2630
  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
3160
2631
  fill: "none",
3161
2632
  stroke: "currentColor",
@@ -3175,7 +2646,8 @@ var SvgFilePdfStroke = function SvgFilePdfStroke(props) {
3175
2646
  height: 16,
3176
2647
  focusable: "false",
3177
2648
  viewBox: "0 0 16 16",
3178
- "aria-hidden": "true"
2649
+ "aria-hidden": "true",
2650
+ role: "img"
3179
2651
  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
3180
2652
  fill: "none",
3181
2653
  stroke: "currentColor",
@@ -3203,7 +2675,8 @@ var SvgFileZipStroke = function SvgFileZipStroke(props) {
3203
2675
  height: 16,
3204
2676
  focusable: "false",
3205
2677
  viewBox: "0 0 16 16",
3206
- "aria-hidden": "true"
2678
+ "aria-hidden": "true",
2679
+ role: "img"
3207
2680
  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
3208
2681
  fill: "none",
3209
2682
  stroke: "currentColor",
@@ -3223,7 +2696,8 @@ var SvgFileImageStroke = function SvgFileImageStroke(props) {
3223
2696
  height: 16,
3224
2697
  focusable: "false",
3225
2698
  viewBox: "0 0 16 16",
3226
- "aria-hidden": "true"
2699
+ "aria-hidden": "true",
2700
+ role: "img"
3227
2701
  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
3228
2702
  fill: "none",
3229
2703
  stroke: "currentColor",
@@ -3248,7 +2722,8 @@ var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) {
3248
2722
  height: 16,
3249
2723
  focusable: "false",
3250
2724
  viewBox: "0 0 16 16",
3251
- "aria-hidden": "true"
2725
+ "aria-hidden": "true",
2726
+ role: "img"
3252
2727
  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
3253
2728
  fill: "none",
3254
2729
  stroke: "currentColor",
@@ -3268,7 +2743,8 @@ var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) {
3268
2743
  height: 16,
3269
2744
  focusable: "false",
3270
2745
  viewBox: "0 0 16 16",
3271
- "aria-hidden": "true"
2746
+ "aria-hidden": "true",
2747
+ role: "img"
3272
2748
  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
3273
2749
  fill: "none",
3274
2750
  stroke: "currentColor",
@@ -3288,7 +2764,8 @@ var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) {
3288
2764
  height: 16,
3289
2765
  focusable: "false",
3290
2766
  viewBox: "0 0 16 16",
3291
- "aria-hidden": "true"
2767
+ "aria-hidden": "true",
2768
+ role: "img"
3292
2769
  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
3293
2770
  fill: "none",
3294
2771
  stroke: "currentColor",
@@ -3307,7 +2784,8 @@ var SvgFileGenericStroke = function SvgFileGenericStroke(props) {
3307
2784
  height: 16,
3308
2785
  focusable: "false",
3309
2786
  viewBox: "0 0 16 16",
3310
- "aria-hidden": "true"
2787
+ "aria-hidden": "true",
2788
+ role: "img"
3311
2789
  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
3312
2790
  fill: "none",
3313
2791
  stroke: "currentColor",
@@ -3326,7 +2804,8 @@ var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
3326
2804
  height: 16,
3327
2805
  focusable: "false",
3328
2806
  viewBox: "0 0 16 16",
3329
- "aria-hidden": "true"
2807
+ "aria-hidden": "true",
2808
+ role: "img"
3330
2809
  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
3331
2810
  fill: "none",
3332
2811
  stroke: "currentColor",
@@ -3335,7 +2814,7 @@ var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
3335
2814
  })));
3336
2815
  };
3337
2816
 
3338
- var fileIconsDefault = {
2817
+ const fileIconsDefault = {
3339
2818
  pdf: React__default.createElement(SvgFilePdfStroke, null),
3340
2819
  zip: React__default.createElement(SvgFileZipStroke, null),
3341
2820
  image: React__default.createElement(SvgFileImageStroke, null),
@@ -3346,7 +2825,7 @@ var fileIconsDefault = {
3346
2825
  success: React__default.createElement(SvgCheckCircleStroke$1, null),
3347
2826
  error: React__default.createElement(SvgFileErrorStroke, null)
3348
2827
  };
3349
- var fileIconsCompact = {
2828
+ const fileIconsCompact = {
3350
2829
  pdf: React__default.createElement(SvgFilePdfStroke$1, null),
3351
2830
  zip: React__default.createElement(SvgFileZipStroke$1, null),
3352
2831
  image: React__default.createElement(SvgFileImageStroke$1, null),
@@ -3358,20 +2837,19 @@ var fileIconsCompact = {
3358
2837
  error: React__default.createElement(SvgFileErrorStroke$1, null)
3359
2838
  };
3360
2839
 
3361
- var _excluded$1 = ["children", "type", "isCompact", "focusInset", "validation"];
3362
- var FileComponent = forwardRef(function (_ref, ref) {
3363
- var children = _ref.children,
3364
- type = _ref.type,
3365
- isCompact = _ref.isCompact,
3366
- focusInset = _ref.focusInset,
3367
- validation = _ref.validation,
3368
- props = _objectWithoutProperties(_ref, _excluded$1);
3369
- var fileContextValue = useMemo(function () {
3370
- return {
3371
- isCompact: isCompact
3372
- };
3373
- }, [isCompact]);
3374
- var validationType = validation || type;
2840
+ const FileComponent = forwardRef((_ref, ref) => {
2841
+ let {
2842
+ children,
2843
+ type,
2844
+ isCompact,
2845
+ focusInset,
2846
+ validation,
2847
+ ...props
2848
+ } = _ref;
2849
+ const fileContextValue = useMemo(() => ({
2850
+ isCompact
2851
+ }), [isCompact]);
2852
+ const validationType = validation || type;
3375
2853
  return React__default.createElement(FileContext.Provider, {
3376
2854
  value: fileContextValue
3377
2855
  }, React__default.createElement(StyledFile, _extends$t({}, props, {
@@ -3381,9 +2859,7 @@ var FileComponent = forwardRef(function (_ref, ref) {
3381
2859
  ref: ref
3382
2860
  }), validationType && React__default.createElement(StyledFileIcon, {
3383
2861
  isCompact: isCompact
3384
- }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), Children.map(children, function (child) {
3385
- return typeof child === 'string' ? React__default.createElement("span", null, child) : child;
3386
- })));
2862
+ }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), Children.map(children, child => typeof child === 'string' ? React__default.createElement("span", null, child) : child)));
3387
2863
  });
3388
2864
  FileComponent.displayName = 'File';
3389
2865
  FileComponent.propTypes = {
@@ -3392,67 +2868,63 @@ FileComponent.propTypes = {
3392
2868
  type: PropTypes.oneOf(FILE_TYPE),
3393
2869
  validation: PropTypes.oneOf(FILE_VALIDATION)
3394
2870
  };
3395
- var File = FileComponent;
2871
+ const File = FileComponent;
3396
2872
  File.Close = Close;
3397
2873
  File.Delete = Delete;
3398
2874
 
3399
- var _excluded = ["start", "end", "disabled", "isCompact", "isBare", "focusInset", "readOnly", "validation", "wrapperProps", "wrapperRef", "onSelect"],
3400
- _excluded2 = ["onClick", "onFocus", "onBlur", "onMouseOver", "onMouseOut"];
3401
- var MediaInput = React__default.forwardRef(function (_ref, ref) {
3402
- var start = _ref.start,
3403
- end = _ref.end,
3404
- disabled = _ref.disabled,
3405
- isCompact = _ref.isCompact,
3406
- isBare = _ref.isBare,
3407
- focusInset = _ref.focusInset,
3408
- readOnly = _ref.readOnly,
3409
- validation = _ref.validation,
3410
- _ref$wrapperProps = _ref.wrapperProps,
3411
- wrapperProps = _ref$wrapperProps === void 0 ? {} : _ref$wrapperProps,
3412
- wrapperRef = _ref.wrapperRef,
3413
- onSelect = _ref.onSelect,
3414
- props = _objectWithoutProperties(_ref, _excluded);
3415
- var fieldContext = useFieldContext();
3416
- var inputRef = useRef();
3417
- var _useState = useState(false),
3418
- _useState2 = _slicedToArray(_useState, 2),
3419
- isFocused = _useState2[0],
3420
- setIsFocused = _useState2[1];
3421
- var _useState3 = useState(false),
3422
- _useState4 = _slicedToArray(_useState3, 2),
3423
- isHovered = _useState4[0],
3424
- setIsHovered = _useState4[1];
3425
- var onClick = wrapperProps.onClick,
3426
- onFocus = wrapperProps.onFocus,
3427
- onBlur = wrapperProps.onBlur,
3428
- onMouseOver = wrapperProps.onMouseOver,
3429
- onMouseOut = wrapperProps.onMouseOut,
3430
- otherWrapperProps = _objectWithoutProperties(wrapperProps, _excluded2);
3431
- var onFauxInputClickHandler = composeEventHandlers(onClick, function () {
2875
+ const MediaInput = React__default.forwardRef((_ref, ref) => {
2876
+ let {
2877
+ start,
2878
+ end,
2879
+ disabled,
2880
+ isCompact,
2881
+ isBare,
2882
+ focusInset,
2883
+ readOnly,
2884
+ validation,
2885
+ wrapperProps = {},
2886
+ wrapperRef,
2887
+ onSelect,
2888
+ ...props
2889
+ } = _ref;
2890
+ const fieldContext = useFieldContext();
2891
+ const inputRef = useRef();
2892
+ const [isFocused, setIsFocused] = useState(false);
2893
+ const [isHovered, setIsHovered] = useState(false);
2894
+ const {
2895
+ onClick,
2896
+ onFocus,
2897
+ onBlur,
2898
+ onMouseOver,
2899
+ onMouseOut,
2900
+ ...otherWrapperProps
2901
+ } = wrapperProps;
2902
+ const onFauxInputClickHandler = composeEventHandlers(onClick, () => {
3432
2903
  inputRef.current && inputRef.current.focus();
3433
2904
  });
3434
- var onFauxInputFocusHandler = composeEventHandlers(onFocus, function () {
2905
+ const onFauxInputFocusHandler = composeEventHandlers(onFocus, () => {
3435
2906
  setIsFocused(true);
3436
2907
  });
3437
- var onFauxInputBlurHandler = composeEventHandlers(onBlur, function () {
2908
+ const onFauxInputBlurHandler = composeEventHandlers(onBlur, () => {
3438
2909
  setIsFocused(false);
3439
2910
  });
3440
- var onFauxInputMouseOverHandler = composeEventHandlers(onMouseOver, function () {
2911
+ const onFauxInputMouseOverHandler = composeEventHandlers(onMouseOver, () => {
3441
2912
  setIsHovered(true);
3442
2913
  });
3443
- var onFauxInputMouseOutHandler = composeEventHandlers(onMouseOut, function () {
2914
+ const onFauxInputMouseOutHandler = composeEventHandlers(onMouseOut, () => {
3444
2915
  setIsHovered(false);
3445
2916
  });
3446
- var onSelectHandler = readOnly ? composeEventHandlers(onSelect, function (event) {
2917
+ const onSelectHandler = readOnly ? composeEventHandlers(onSelect, event => {
3447
2918
  event.currentTarget.select();
3448
2919
  }) : onSelect;
3449
- var combinedProps = _objectSpread2({
3450
- disabled: disabled,
3451
- readOnly: readOnly,
2920
+ let combinedProps = {
2921
+ disabled,
2922
+ readOnly,
3452
2923
  ref: mergeRefs([inputRef, ref]),
3453
- onSelect: onSelectHandler
3454
- }, props);
3455
- var isLabelHovered;
2924
+ onSelect: onSelectHandler,
2925
+ ...props
2926
+ };
2927
+ let isLabelHovered;
3456
2928
  if (fieldContext) {
3457
2929
  combinedProps = fieldContext.getInputProps(combinedProps, {
3458
2930
  isDescribed: true