@zendeskgarden/react-forms 8.44.0 → 8.46.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 (11) hide show
  1. package/dist/index.cjs.js +650 -261
  2. package/dist/index.esm.js +650 -261
  3. package/dist/typings/elements/file-list/components/Delete.d.ts +11 -0
  4. package/dist/typings/elements/file-list/components/File.d.ts +5 -1
  5. package/dist/typings/elements/file-list/utils.d.ts +9 -2
  6. package/dist/typings/styled/file-list/StyledFile.d.ts +1 -0
  7. package/dist/typings/styled/file-list/StyledFileDelete.d.ts +13 -0
  8. package/dist/typings/styled/file-list/StyledFileIcon.d.ts +1 -1
  9. package/dist/typings/styled/index.d.ts +1 -0
  10. package/dist/typings/utils/useFileContext.d.ts +13 -0
  11. package/package.json +4 -4
package/dist/index.esm.js CHANGED
@@ -69,8 +69,8 @@ function _defineProperty(obj, key, value) {
69
69
  return obj;
70
70
  }
71
71
 
72
- function _extends$f() {
73
- _extends$f = Object.assign || function (target) {
72
+ function _extends$t() {
73
+ _extends$t = Object.assign || function (target) {
74
74
  for (var i = 1; i < arguments.length; i++) {
75
75
  var source = arguments[i];
76
76
 
@@ -84,7 +84,7 @@ function _extends$f() {
84
84
  return target;
85
85
  };
86
86
 
87
- return _extends$f.apply(this, arguments);
87
+ return _extends$t.apply(this, arguments);
88
88
  }
89
89
 
90
90
  function _objectWithoutPropertiesLoose(source, excluded) {
@@ -204,43 +204,43 @@ var useFieldContext = function useFieldContext() {
204
204
  return fieldContext;
205
205
  };
206
206
 
207
- var COMPONENT_ID$J = 'forms.field';
207
+ var COMPONENT_ID$K = 'forms.field';
208
208
  var StyledField = styled.div.attrs({
209
- 'data-garden-id': COMPONENT_ID$J,
210
- 'data-garden-version': '8.44.0'
209
+ 'data-garden-id': COMPONENT_ID$K,
210
+ 'data-garden-version': '8.46.0'
211
211
  }).withConfig({
212
212
  displayName: "StyledField",
213
213
  componentId: "sc-12gzfsu-0"
214
214
  })(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], function (props) {
215
215
  return props.theme.rtl && 'rtl';
216
216
  }, function (props) {
217
- return retrieveComponentStyles(COMPONENT_ID$J, props);
217
+ return retrieveComponentStyles(COMPONENT_ID$K, props);
218
218
  });
219
219
  StyledField.defaultProps = {
220
220
  theme: DEFAULT_THEME
221
221
  };
222
222
 
223
- var COMPONENT_ID$I = 'forms.fieldset';
223
+ var COMPONENT_ID$J = 'forms.fieldset';
224
224
  var StyledFieldset = styled(StyledField).attrs({
225
225
  as: 'fieldset',
226
- 'data-garden-id': COMPONENT_ID$I,
227
- 'data-garden-version': '8.44.0'
226
+ 'data-garden-id': COMPONENT_ID$J,
227
+ 'data-garden-version': '8.46.0'
228
228
  }).withConfig({
229
229
  displayName: "StyledFieldset",
230
230
  componentId: "sc-1vr4mxv-0"
231
231
  })(["", "{margin-top:", "px;}", ";"], StyledField, function (props) {
232
232
  return props.theme.space.base * (props.isCompact ? 1 : 2);
233
233
  }, function (props) {
234
- return retrieveComponentStyles(COMPONENT_ID$I, props);
234
+ return retrieveComponentStyles(COMPONENT_ID$J, props);
235
235
  });
236
236
  StyledFieldset.defaultProps = {
237
237
  theme: DEFAULT_THEME
238
238
  };
239
239
 
240
- var COMPONENT_ID$H = 'forms.input_label';
240
+ var COMPONENT_ID$I = 'forms.input_label';
241
241
  var StyledLabel = styled.label.attrs({
242
- 'data-garden-id': COMPONENT_ID$H,
243
- 'data-garden-version': '8.44.0'
242
+ 'data-garden-id': COMPONENT_ID$I,
243
+ 'data-garden-version': '8.46.0'
244
244
  }).withConfig({
245
245
  displayName: "StyledLabel",
246
246
  componentId: "sc-2utmsz-0"
@@ -265,31 +265,31 @@ var StyledLabel = styled.label.attrs({
265
265
  }, function (props) {
266
266
  return !props.isRadio && hideVisually();
267
267
  }, function (props) {
268
- return retrieveComponentStyles(COMPONENT_ID$H, props);
268
+ return retrieveComponentStyles(COMPONENT_ID$I, props);
269
269
  });
270
270
  StyledLabel.defaultProps = {
271
271
  theme: DEFAULT_THEME
272
272
  };
273
273
 
274
- var COMPONENT_ID$G = 'forms.fieldset_legend';
274
+ var COMPONENT_ID$H = 'forms.fieldset_legend';
275
275
  var StyledLegend = styled(StyledLabel).attrs({
276
276
  as: 'legend',
277
- 'data-garden-id': COMPONENT_ID$G,
278
- 'data-garden-version': '8.44.0'
277
+ 'data-garden-id': COMPONENT_ID$H,
278
+ 'data-garden-version': '8.46.0'
279
279
  }).withConfig({
280
280
  displayName: "StyledLegend",
281
281
  componentId: "sc-6s0zwq-0"
282
282
  })(["padding:0;", ";"], function (props) {
283
- return retrieveComponentStyles(COMPONENT_ID$G, props);
283
+ return retrieveComponentStyles(COMPONENT_ID$H, props);
284
284
  });
285
285
  StyledLegend.defaultProps = {
286
286
  theme: DEFAULT_THEME
287
287
  };
288
288
 
289
- var COMPONENT_ID$F = 'forms.input_hint';
289
+ var COMPONENT_ID$G = 'forms.input_hint';
290
290
  var StyledHint = styled.div.attrs({
291
- 'data-garden-id': COMPONENT_ID$F,
292
- 'data-garden-version': '8.44.0'
291
+ 'data-garden-id': COMPONENT_ID$G,
292
+ 'data-garden-version': '8.46.0'
293
293
  }).withConfig({
294
294
  displayName: "StyledHint",
295
295
  componentId: "sc-17c2wu8-0"
@@ -302,15 +302,15 @@ var StyledHint = styled.div.attrs({
302
302
  }, function (props) {
303
303
  return props.theme.fontSizes.md;
304
304
  }, function (props) {
305
- return retrieveComponentStyles(COMPONENT_ID$F, props);
305
+ return retrieveComponentStyles(COMPONENT_ID$G, props);
306
306
  });
307
307
  StyledHint.defaultProps = {
308
308
  theme: DEFAULT_THEME
309
309
  };
310
310
 
311
- function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
311
+ function _extends$s() { _extends$s = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
312
312
 
313
- var _ref$e = /*#__PURE__*/React.createElement("g", {
313
+ var _ref$s = /*#__PURE__*/React.createElement("g", {
314
314
  fill: "none",
315
315
  stroke: "currentColor"
316
316
  }, /*#__PURE__*/React.createElement("circle", {
@@ -322,7 +322,7 @@ var _ref$e = /*#__PURE__*/React.createElement("g", {
322
322
  d: "M7.5 4.5V9"
323
323
  }));
324
324
 
325
- var _ref2$3 = /*#__PURE__*/React.createElement("circle", {
325
+ var _ref2$5 = /*#__PURE__*/React.createElement("circle", {
326
326
  cx: 7.5,
327
327
  cy: 12,
328
328
  r: 1,
@@ -330,26 +330,26 @@ var _ref2$3 = /*#__PURE__*/React.createElement("circle", {
330
330
  });
331
331
 
332
332
  function SvgAlertErrorStroke(props) {
333
- return /*#__PURE__*/React.createElement("svg", _extends$e({
333
+ return /*#__PURE__*/React.createElement("svg", _extends$s({
334
334
  xmlns: "http://www.w3.org/2000/svg",
335
335
  width: 16,
336
336
  height: 16,
337
337
  viewBox: "0 0 16 16",
338
338
  focusable: "false",
339
339
  role: "presentation"
340
- }, props), _ref$e, _ref2$3);
340
+ }, props), _ref$s, _ref2$5);
341
341
  }
342
342
 
343
- function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
343
+ function _extends$r() { _extends$r = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
344
344
 
345
- var _ref$d = /*#__PURE__*/React.createElement("path", {
345
+ var _ref$r = /*#__PURE__*/React.createElement("path", {
346
346
  fill: "none",
347
347
  stroke: "currentColor",
348
348
  strokeLinecap: "round",
349
349
  d: "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"
350
350
  });
351
351
 
352
- var _ref2$2 = /*#__PURE__*/React.createElement("circle", {
352
+ var _ref2$4 = /*#__PURE__*/React.createElement("circle", {
353
353
  cx: 7.5,
354
354
  cy: 12,
355
355
  r: 1,
@@ -357,19 +357,19 @@ var _ref2$2 = /*#__PURE__*/React.createElement("circle", {
357
357
  });
358
358
 
359
359
  function SvgAlertWarningStroke(props) {
360
- return /*#__PURE__*/React.createElement("svg", _extends$d({
360
+ return /*#__PURE__*/React.createElement("svg", _extends$r({
361
361
  xmlns: "http://www.w3.org/2000/svg",
362
362
  width: 16,
363
363
  height: 16,
364
364
  viewBox: "0 0 16 16",
365
365
  focusable: "false",
366
366
  role: "presentation"
367
- }, props), _ref$d, _ref2$2);
367
+ }, props), _ref$r, _ref2$4);
368
368
  }
369
369
 
370
- function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
370
+ function _extends$q() { _extends$q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
371
371
 
372
- var _ref$c = /*#__PURE__*/React.createElement("g", {
372
+ var _ref$q = /*#__PURE__*/React.createElement("g", {
373
373
  fill: "none",
374
374
  stroke: "currentColor"
375
375
  }, /*#__PURE__*/React.createElement("path", {
@@ -382,15 +382,15 @@ var _ref$c = /*#__PURE__*/React.createElement("g", {
382
382
  r: 7
383
383
  }));
384
384
 
385
- function SvgCheckCircleStroke(props) {
386
- return /*#__PURE__*/React.createElement("svg", _extends$c({
385
+ function SvgCheckCircleStroke$1(props) {
386
+ return /*#__PURE__*/React.createElement("svg", _extends$q({
387
387
  xmlns: "http://www.w3.org/2000/svg",
388
388
  width: 16,
389
389
  height: 16,
390
390
  viewBox: "0 0 16 16",
391
391
  focusable: "false",
392
392
  role: "presentation"
393
- }, props), _ref$c);
393
+ }, props), _ref$q);
394
394
  }
395
395
 
396
396
  var _excluded$i = ["children", "validation"];
@@ -402,7 +402,7 @@ var MessageIcon = function MessageIcon(_ref) {
402
402
  if (validation === 'error') {
403
403
  retVal = React__default.createElement(SvgAlertErrorStroke, props);
404
404
  } else if (validation === 'success') {
405
- retVal = React__default.createElement(SvgCheckCircleStroke, props);
405
+ retVal = React__default.createElement(SvgCheckCircleStroke$1, props);
406
406
  } else if (validation === 'warning') {
407
407
  retVal = React__default.createElement(SvgAlertWarningStroke, props);
408
408
  } else {
@@ -410,10 +410,10 @@ var MessageIcon = function MessageIcon(_ref) {
410
410
  }
411
411
  return retVal;
412
412
  };
413
- var COMPONENT_ID$E = 'forms.input_message_icon';
413
+ var COMPONENT_ID$F = 'forms.input_message_icon';
414
414
  var StyledMessageIcon = styled(MessageIcon).attrs({
415
- 'data-garden-id': COMPONENT_ID$E,
416
- 'data-garden-version': '8.44.0'
415
+ 'data-garden-id': COMPONENT_ID$F,
416
+ 'data-garden-version': '8.46.0'
417
417
  }).withConfig({
418
418
  displayName: "StyledMessageIcon",
419
419
  componentId: "sc-1ph2gba-0"
@@ -422,7 +422,7 @@ var StyledMessageIcon = styled(MessageIcon).attrs({
422
422
  }, function (props) {
423
423
  return props.theme.iconSizes.md;
424
424
  }, function (props) {
425
- return retrieveComponentStyles(COMPONENT_ID$E, props);
425
+ return retrieveComponentStyles(COMPONENT_ID$F, props);
426
426
  });
427
427
  StyledMessageIcon.defaultProps = {
428
428
  theme: DEFAULT_THEME
@@ -443,10 +443,10 @@ var validationStyles = function validationStyles(props) {
443
443
  }
444
444
  return css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
445
445
  };
446
- var COMPONENT_ID$D = 'forms.input_message';
446
+ var COMPONENT_ID$E = 'forms.input_message';
447
447
  var StyledMessage = styled.div.attrs({
448
- 'data-garden-id': COMPONENT_ID$D,
449
- 'data-garden-version': '8.44.0'
448
+ 'data-garden-id': COMPONENT_ID$E,
449
+ 'data-garden-version': '8.46.0'
450
450
  }).withConfig({
451
451
  displayName: "StyledMessage",
452
452
  componentId: "sc-30hgg7-0"
@@ -463,13 +463,13 @@ var StyledMessage = styled.div.attrs({
463
463
  }, StyledLabel, function (props) {
464
464
  return math("".concat(props.theme.space.base, " * 1px"));
465
465
  }, function (props) {
466
- return retrieveComponentStyles(COMPONENT_ID$D, props);
466
+ return retrieveComponentStyles(COMPONENT_ID$E, props);
467
467
  });
468
468
  StyledMessage.defaultProps = {
469
469
  theme: DEFAULT_THEME
470
470
  };
471
471
 
472
- var COMPONENT_ID$C = 'forms.input';
472
+ var COMPONENT_ID$D = 'forms.input';
473
473
  var isInvalid = function isInvalid(validation) {
474
474
  return validation === 'warning' || validation === 'error';
475
475
  };
@@ -511,7 +511,7 @@ var colorStyles$b = function colorStyles(props) {
511
511
  }
512
512
  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);
513
513
  };
514
- var sizeStyles$e = function sizeStyles(props) {
514
+ var sizeStyles$f = function sizeStyles(props) {
515
515
  var fontSize = props.theme.fontSizes.md;
516
516
  var paddingHorizontal = "".concat(props.theme.space.base * 3, "px");
517
517
  var height;
@@ -537,8 +537,8 @@ var sizeStyles$e = function sizeStyles(props) {
537
537
  };
538
538
  var StyledTextInput = styled.input.attrs(function (props) {
539
539
  return {
540
- 'data-garden-id': COMPONENT_ID$C,
541
- 'data-garden-version': '8.44.0',
540
+ 'data-garden-id': COMPONENT_ID$D,
541
+ 'data-garden-version': '8.46.0',
542
542
  'aria-invalid': isInvalid(props.validation)
543
543
  };
544
544
  }).withConfig({
@@ -559,22 +559,22 @@ var StyledTextInput = styled.input.attrs(function (props) {
559
559
  }, function (props) {
560
560
  return props.theme.rtl && 'rtl';
561
561
  }, function (props) {
562
- return sizeStyles$e(props);
562
+ return sizeStyles$f(props);
563
563
  }, function (props) {
564
564
  return colorStyles$b(props);
565
565
  }, function (props) {
566
- return retrieveComponentStyles(COMPONENT_ID$C, props);
566
+ return retrieveComponentStyles(COMPONENT_ID$D, props);
567
567
  });
568
568
  StyledTextInput.defaultProps = {
569
569
  theme: DEFAULT_THEME
570
570
  };
571
571
 
572
- var COMPONENT_ID$B = 'forms.textarea';
572
+ var COMPONENT_ID$C = 'forms.textarea';
573
573
  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";
574
574
  var StyledTextarea = styled(StyledTextInput).attrs({
575
575
  as: 'textarea',
576
- 'data-garden-id': COMPONENT_ID$B,
577
- 'data-garden-version': '8.44.0'
576
+ 'data-garden-id': COMPONENT_ID$C,
577
+ 'data-garden-version': '8.46.0'
578
578
  }).withConfig({
579
579
  displayName: "StyledTextarea",
580
580
  componentId: "sc-wxschl-0"
@@ -583,14 +583,14 @@ var StyledTextarea = styled(StyledTextInput).attrs({
583
583
  }, function (props) {
584
584
  return props.isHidden && hiddenStyles;
585
585
  }, function (props) {
586
- return retrieveComponentStyles(COMPONENT_ID$B, props);
586
+ return retrieveComponentStyles(COMPONENT_ID$C, props);
587
587
  });
588
588
  StyledTextarea.defaultProps = {
589
589
  theme: DEFAULT_THEME
590
590
  };
591
591
 
592
592
  var _excluded$h = ["children", "position", "isHovered", "isFocused", "isDisabled", "isRotated", "theme"];
593
- var COMPONENT_ID$A = 'forms.media_figure';
593
+ var COMPONENT_ID$B = 'forms.media_figure';
594
594
  var colorStyles$a = function colorStyles(props) {
595
595
  var shade = 600;
596
596
  if (props.isDisabled) {
@@ -600,7 +600,7 @@ var colorStyles$a = function colorStyles(props) {
600
600
  }
601
601
  return css(["color:", ";"], getColor('neutralHue', shade, props.theme));
602
602
  };
603
- var sizeStyles$d = function sizeStyles(props) {
603
+ var sizeStyles$e = function sizeStyles(props) {
604
604
  var size = props.theme.iconSizes.md;
605
605
  var marginFirst = "1px ".concat(props.theme.space.base * 2, "px auto 0");
606
606
  var marginLast = "1px 0 auto ".concat(props.theme.space.base * 2, "px");
@@ -624,8 +624,8 @@ function (_ref) {
624
624
  var props = _objectWithoutProperties(_ref, _excluded$h);
625
625
  return React__default.cloneElement(Children.only(children), props);
626
626
  }).attrs({
627
- 'data-garden-id': COMPONENT_ID$A,
628
- 'data-garden-version': '8.44.0'
627
+ 'data-garden-id': COMPONENT_ID$B,
628
+ 'data-garden-version': '8.46.0'
629
629
  }).withConfig({
630
630
  displayName: "StyledTextMediaFigure",
631
631
  componentId: "sc-1qepknj-0"
@@ -634,22 +634,22 @@ function (_ref) {
634
634
  }, function (props) {
635
635
  return colorStyles$a(props);
636
636
  }, function (props) {
637
- return sizeStyles$d(props);
637
+ return sizeStyles$e(props);
638
638
  }, function (props) {
639
- return retrieveComponentStyles(COMPONENT_ID$A, props);
639
+ return retrieveComponentStyles(COMPONENT_ID$B, props);
640
640
  });
641
641
  StyledTextMediaFigure.defaultProps = {
642
642
  theme: DEFAULT_THEME
643
643
  };
644
644
 
645
- var COMPONENT_ID$z = 'forms.faux_input';
645
+ var COMPONENT_ID$A = 'forms.faux_input';
646
646
  var StyledTextFauxInput = styled(StyledTextInput).attrs(function (props) {
647
647
  return {
648
648
  as: 'div',
649
649
  'aria-readonly': props.isReadOnly,
650
650
  'aria-disabled': props.isDisabled,
651
- 'data-garden-id': COMPONENT_ID$z,
652
- 'data-garden-version': '8.44.0'
651
+ 'data-garden-id': COMPONENT_ID$A,
652
+ 'data-garden-version': '8.46.0'
653
653
  };
654
654
  }).withConfig({
655
655
  displayName: "StyledTextFauxInput",
@@ -665,29 +665,29 @@ var StyledTextFauxInput = styled(StyledTextInput).attrs(function (props) {
665
665
  }, StyledTextMediaFigure, function (props) {
666
666
  return props.mediaLayout && '0';
667
667
  }, function (props) {
668
- return retrieveComponentStyles(COMPONENT_ID$z, props);
668
+ return retrieveComponentStyles(COMPONENT_ID$A, props);
669
669
  });
670
670
  StyledTextFauxInput.defaultProps = {
671
671
  theme: DEFAULT_THEME
672
672
  };
673
673
 
674
- var COMPONENT_ID$y = 'forms.media_input';
674
+ var COMPONENT_ID$z = 'forms.media_input';
675
675
  var StyledTextMediaInput = styled(StyledTextInput).attrs({
676
- 'data-garden-id': COMPONENT_ID$y,
677
- 'data-garden-version': '8.44.0',
676
+ 'data-garden-id': COMPONENT_ID$z,
677
+ 'data-garden-version': '8.46.0',
678
678
  isBare: true
679
679
  }).withConfig({
680
680
  displayName: "StyledTextMediaInput",
681
681
  componentId: "sc-12i9xfi-0"
682
682
  })(["flex-grow:1;", ";"], function (props) {
683
- return retrieveComponentStyles(COMPONENT_ID$y, props);
683
+ return retrieveComponentStyles(COMPONENT_ID$z, props);
684
684
  });
685
685
  StyledTextMediaInput.defaultProps = {
686
686
  theme: DEFAULT_THEME
687
687
  };
688
688
 
689
- var COMPONENT_ID$x = 'forms.input_group';
690
- var positionStyles$1 = function positionStyles(props) {
689
+ var COMPONENT_ID$y = 'forms.input_group';
690
+ var positionStyles = function positionStyles(props) {
691
691
  var topMargin = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
692
692
  var startDirection = props.theme.rtl ? 'right' : 'left';
693
693
  var endDirection = props.theme.rtl ? 'left' : 'right';
@@ -698,63 +698,63 @@ var itemStyles = function itemStyles(props) {
698
698
  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');
699
699
  };
700
700
  var StyledInputGroup = styled.div.attrs({
701
- 'data-garden-id': COMPONENT_ID$x,
702
- 'data-garden-version': '8.44.0'
701
+ 'data-garden-id': COMPONENT_ID$y,
702
+ 'data-garden-version': '8.46.0'
703
703
  }).withConfig({
704
704
  displayName: "StyledInputGroup",
705
705
  componentId: "sc-kjh1f0-0"
706
706
  })(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], function (props) {
707
- return positionStyles$1(props);
707
+ return positionStyles(props);
708
708
  }, function (props) {
709
709
  return itemStyles(props);
710
710
  }, function (props) {
711
- return retrieveComponentStyles(COMPONENT_ID$x, props);
711
+ return retrieveComponentStyles(COMPONENT_ID$y, props);
712
712
  });
713
713
  StyledInputGroup.defaultProps = {
714
714
  theme: DEFAULT_THEME
715
715
  };
716
716
 
717
- var COMPONENT_ID$w = 'forms.radio_label';
718
- var sizeStyles$c = function sizeStyles(props) {
717
+ var COMPONENT_ID$x = 'forms.radio_label';
718
+ var sizeStyles$d = function sizeStyles(props) {
719
719
  var size = props.theme.space.base * 4;
720
720
  var padding = size + props.theme.space.base * 2;
721
721
  var lineHeight = props.theme.space.base * 5;
722
722
  return css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;line-height:", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size, lineHeight);
723
723
  };
724
724
  var StyledRadioLabel = styled(StyledLabel).attrs({
725
- 'data-garden-id': COMPONENT_ID$w,
726
- 'data-garden-version': '8.44.0',
725
+ 'data-garden-id': COMPONENT_ID$x,
726
+ 'data-garden-version': '8.46.0',
727
727
  isRadio: true
728
728
  }).withConfig({
729
729
  displayName: "StyledRadioLabel",
730
730
  componentId: "sc-1aq2e5t-0"
731
731
  })(["display:inline-block;position:relative;cursor:pointer;user-select:none;", ";", ";"], function (props) {
732
- return sizeStyles$c(props);
732
+ return sizeStyles$d(props);
733
733
  }, function (props) {
734
- return retrieveComponentStyles(COMPONENT_ID$w, props);
734
+ return retrieveComponentStyles(COMPONENT_ID$x, props);
735
735
  });
736
736
  StyledRadioLabel.defaultProps = {
737
737
  theme: DEFAULT_THEME
738
738
  };
739
739
 
740
- var COMPONENT_ID$v = 'forms.checkbox_label';
740
+ var COMPONENT_ID$w = 'forms.checkbox_label';
741
741
  var StyledCheckLabel = styled(StyledRadioLabel).attrs({
742
- 'data-garden-id': COMPONENT_ID$v,
743
- 'data-garden-version': '8.44.0'
742
+ 'data-garden-id': COMPONENT_ID$w,
743
+ 'data-garden-version': '8.46.0'
744
744
  }).withConfig({
745
745
  displayName: "StyledCheckLabel",
746
746
  componentId: "sc-x7nr1-0"
747
747
  })(["", ";"], function (props) {
748
- return retrieveComponentStyles(COMPONENT_ID$v, props);
748
+ return retrieveComponentStyles(COMPONENT_ID$w, props);
749
749
  });
750
750
  StyledCheckLabel.defaultProps = {
751
751
  theme: DEFAULT_THEME
752
752
  };
753
753
 
754
- var COMPONENT_ID$u = 'forms.radio_hint';
754
+ var COMPONENT_ID$v = 'forms.radio_hint';
755
755
  var StyledRadioHint = styled(StyledHint).attrs({
756
- 'data-garden-id': COMPONENT_ID$u,
757
- 'data-garden-version': '8.44.0'
756
+ 'data-garden-id': COMPONENT_ID$v,
757
+ 'data-garden-version': '8.46.0'
758
758
  }).withConfig({
759
759
  displayName: "StyledRadioHint",
760
760
  componentId: "sc-eo8twg-0"
@@ -763,27 +763,27 @@ var StyledRadioHint = styled(StyledHint).attrs({
763
763
  }, function (props) {
764
764
  return math("".concat(props.theme.space.base, " * 6px"));
765
765
  }, function (props) {
766
- return retrieveComponentStyles(COMPONENT_ID$u, props);
766
+ return retrieveComponentStyles(COMPONENT_ID$v, props);
767
767
  });
768
768
  StyledRadioHint.defaultProps = {
769
769
  theme: DEFAULT_THEME
770
770
  };
771
771
 
772
- var COMPONENT_ID$t = 'forms.checkbox_hint';
772
+ var COMPONENT_ID$u = 'forms.checkbox_hint';
773
773
  var StyledCheckHint = styled(StyledRadioHint).attrs({
774
- 'data-garden-id': COMPONENT_ID$t,
775
- 'data-garden-version': '8.44.0'
774
+ 'data-garden-id': COMPONENT_ID$u,
775
+ 'data-garden-version': '8.46.0'
776
776
  }).withConfig({
777
777
  displayName: "StyledCheckHint",
778
778
  componentId: "sc-1kl8e8c-0"
779
779
  })(["", ";"], function (props) {
780
- return retrieveComponentStyles(COMPONENT_ID$t, props);
780
+ return retrieveComponentStyles(COMPONENT_ID$u, props);
781
781
  });
782
782
  StyledCheckHint.defaultProps = {
783
783
  theme: DEFAULT_THEME
784
784
  };
785
785
 
786
- var COMPONENT_ID$s = 'forms.radio';
786
+ var COMPONENT_ID$t = 'forms.radio';
787
787
  var colorStyles$9 = function colorStyles(props) {
788
788
  var SHADE = 600;
789
789
  var borderColor = getColor('neutralHue', SHADE - 300, props.theme);
@@ -804,7 +804,7 @@ var colorStyles$9 = function colorStyles(props) {
804
804
  var disabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
805
805
  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);
806
806
  };
807
- var sizeStyles$b = function sizeStyles(props) {
807
+ var sizeStyles$c = function sizeStyles(props) {
808
808
  var lineHeight = "".concat(props.theme.space.base * 5, "px");
809
809
  var size = "".concat(props.theme.space.base * 4, "px");
810
810
  var top = math("(".concat(lineHeight, " - ").concat(size, ") / 2"));
@@ -815,8 +815,8 @@ var sizeStyles$b = function sizeStyles(props) {
815
815
  return css(["& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
816
816
  };
817
817
  var StyledRadioInput = styled.input.attrs({
818
- 'data-garden-id': COMPONENT_ID$s,
819
- 'data-garden-version': '8.44.0',
818
+ 'data-garden-id': COMPONENT_ID$t,
819
+ 'data-garden-version': '8.46.0',
820
820
  type: 'radio'
821
821
  }).withConfig({
822
822
  displayName: "StyledRadioInput",
@@ -826,17 +826,17 @@ var StyledRadioInput = styled.input.attrs({
826
826
  }, function (props) {
827
827
  return props.theme.borders.sm;
828
828
  }, StyledRadioLabel, function (props) {
829
- return sizeStyles$b(props);
829
+ return sizeStyles$c(props);
830
830
  }, StyledRadioLabel, StyledRadioLabel, function (props) {
831
831
  return colorStyles$9(props);
832
832
  }, StyledRadioLabel, function (props) {
833
- return retrieveComponentStyles(COMPONENT_ID$s, props);
833
+ return retrieveComponentStyles(COMPONENT_ID$t, props);
834
834
  });
835
835
  StyledRadioInput.defaultProps = {
836
836
  theme: DEFAULT_THEME
837
837
  };
838
838
 
839
- var COMPONENT_ID$r = 'forms.checkbox';
839
+ var COMPONENT_ID$s = 'forms.checkbox';
840
840
  var colorStyles$8 = function colorStyles(props) {
841
841
  var SHADE = 600;
842
842
  var indeterminateBorderColor = getColor('primaryHue', SHADE, props.theme);
@@ -847,8 +847,8 @@ var colorStyles$8 = function colorStyles(props) {
847
847
  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);
848
848
  };
849
849
  var StyledCheckInput = styled(StyledRadioInput).attrs({
850
- 'data-garden-id': COMPONENT_ID$r,
851
- 'data-garden-version': '8.44.0',
850
+ 'data-garden-id': COMPONENT_ID$s,
851
+ 'data-garden-version': '8.46.0',
852
852
  type: 'checkbox'
853
853
  }).withConfig({
854
854
  displayName: "StyledCheckInput",
@@ -858,16 +858,16 @@ var StyledCheckInput = styled(StyledRadioInput).attrs({
858
858
  }, function (props) {
859
859
  return colorStyles$8(props);
860
860
  }, function (props) {
861
- return retrieveComponentStyles(COMPONENT_ID$r, props);
861
+ return retrieveComponentStyles(COMPONENT_ID$s, props);
862
862
  });
863
863
  StyledCheckInput.defaultProps = {
864
864
  theme: DEFAULT_THEME
865
865
  };
866
866
 
867
- var COMPONENT_ID$q = 'forms.radio_message';
867
+ var COMPONENT_ID$r = 'forms.radio_message';
868
868
  var StyledRadioMessage = styled(StyledMessage).attrs({
869
- 'data-garden-id': COMPONENT_ID$q,
870
- 'data-garden-version': '8.44.0'
869
+ 'data-garden-id': COMPONENT_ID$r,
870
+ 'data-garden-version': '8.46.0'
871
871
  }).withConfig({
872
872
  displayName: "StyledRadioMessage",
873
873
  componentId: "sc-1pmi0q8-0"
@@ -876,29 +876,29 @@ var StyledRadioMessage = styled(StyledMessage).attrs({
876
876
  }, function (props) {
877
877
  return math("".concat(props.theme.space.base, " * 6px"));
878
878
  }, function (props) {
879
- return retrieveComponentStyles(COMPONENT_ID$q, props);
879
+ return retrieveComponentStyles(COMPONENT_ID$r, props);
880
880
  });
881
881
  StyledRadioMessage.defaultProps = {
882
882
  theme: DEFAULT_THEME
883
883
  };
884
884
 
885
- var COMPONENT_ID$p = 'forms.checkbox_message';
885
+ var COMPONENT_ID$q = 'forms.checkbox_message';
886
886
  var StyledCheckMessage = styled(StyledRadioMessage).attrs({
887
- 'data-garden-id': COMPONENT_ID$p,
888
- 'data-garden-version': '8.44.0'
887
+ 'data-garden-id': COMPONENT_ID$q,
888
+ 'data-garden-version': '8.46.0'
889
889
  }).withConfig({
890
890
  displayName: "StyledCheckMessage",
891
891
  componentId: "sc-s4p6kd-0"
892
892
  })(["", ";"], function (props) {
893
- return retrieveComponentStyles(COMPONENT_ID$p, props);
893
+ return retrieveComponentStyles(COMPONENT_ID$q, props);
894
894
  });
895
895
  StyledCheckMessage.defaultProps = {
896
896
  theme: DEFAULT_THEME
897
897
  };
898
898
 
899
- function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
899
+ function _extends$p() { _extends$p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
900
900
 
901
- var _ref$b = /*#__PURE__*/React.createElement("path", {
901
+ var _ref$p = /*#__PURE__*/React.createElement("path", {
902
902
  fill: "none",
903
903
  stroke: "currentColor",
904
904
  strokeLinecap: "round",
@@ -908,33 +908,33 @@ var _ref$b = /*#__PURE__*/React.createElement("path", {
908
908
  });
909
909
 
910
910
  function SvgCheckSmFill(props) {
911
- return /*#__PURE__*/React.createElement("svg", _extends$b({
911
+ return /*#__PURE__*/React.createElement("svg", _extends$p({
912
912
  xmlns: "http://www.w3.org/2000/svg",
913
913
  width: 12,
914
914
  height: 12,
915
915
  viewBox: "0 0 12 12",
916
916
  focusable: "false",
917
917
  role: "presentation"
918
- }, props), _ref$b);
918
+ }, props), _ref$p);
919
919
  }
920
920
 
921
- var COMPONENT_ID$o = 'forms.check_svg';
921
+ var COMPONENT_ID$p = 'forms.check_svg';
922
922
  var StyledCheckSvg = styled(SvgCheckSmFill).attrs({
923
- 'data-garden-id': COMPONENT_ID$o,
924
- 'data-garden-version': '8.44.0'
923
+ 'data-garden-id': COMPONENT_ID$p,
924
+ 'data-garden-version': '8.46.0'
925
925
  }).withConfig({
926
926
  displayName: "StyledCheckSvg",
927
927
  componentId: "sc-fvxetk-0"
928
928
  })(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, function (props) {
929
- return retrieveComponentStyles(COMPONENT_ID$o, props);
929
+ return retrieveComponentStyles(COMPONENT_ID$p, props);
930
930
  });
931
931
  StyledCheckSvg.defaultProps = {
932
932
  theme: DEFAULT_THEME
933
933
  };
934
934
 
935
- function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
935
+ function _extends$o() { _extends$o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
936
936
 
937
- var _ref$a = /*#__PURE__*/React.createElement("path", {
937
+ var _ref$o = /*#__PURE__*/React.createElement("path", {
938
938
  stroke: "currentColor",
939
939
  strokeLinecap: "round",
940
940
  strokeWidth: 2,
@@ -942,35 +942,31 @@ var _ref$a = /*#__PURE__*/React.createElement("path", {
942
942
  });
943
943
 
944
944
  function SvgDashFill(props) {
945
- return /*#__PURE__*/React.createElement("svg", _extends$a({
945
+ return /*#__PURE__*/React.createElement("svg", _extends$o({
946
946
  xmlns: "http://www.w3.org/2000/svg",
947
947
  width: 12,
948
948
  height: 12,
949
949
  viewBox: "0 0 12 12",
950
950
  focusable: "false",
951
951
  role: "presentation"
952
- }, props), _ref$a);
952
+ }, props), _ref$o);
953
953
  }
954
954
 
955
- var COMPONENT_ID$n = 'forms.dash_svg';
955
+ var COMPONENT_ID$o = 'forms.dash_svg';
956
956
  var StyledDashSvg = styled(SvgDashFill).attrs({
957
- 'data-garden-id': COMPONENT_ID$n,
958
- 'data-garden-version': '8.44.0'
957
+ 'data-garden-id': COMPONENT_ID$o,
958
+ 'data-garden-version': '8.46.0'
959
959
  }).withConfig({
960
960
  displayName: "StyledDashSvg",
961
961
  componentId: "sc-z3vq71-0"
962
962
  })(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, function (props) {
963
- return retrieveComponentStyles(COMPONENT_ID$n, props);
963
+ return retrieveComponentStyles(COMPONENT_ID$o, props);
964
964
  });
965
965
  StyledDashSvg.defaultProps = {
966
966
  theme: DEFAULT_THEME
967
967
  };
968
968
 
969
- var COMPONENT_ID$m = 'forms.file_upload';
970
- var positionStyles = function positionStyles(props) {
971
- var topMargin = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
972
- return css(["", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, topMargin);
973
- };
969
+ var COMPONENT_ID$n = 'forms.file_upload';
974
970
  var colorStyles$7 = function colorStyles(props) {
975
971
  var baseColor = getColor('primaryHue', 600, props.theme);
976
972
  var hoverColor = getColor('primaryHue', 700, props.theme);
@@ -980,93 +976,124 @@ var colorStyles$7 = function colorStyles(props) {
980
976
  var boxShadow = "inset ".concat(props.theme.shadows.md(rgba(baseColor, 0.35)));
981
977
  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);
982
978
  };
979
+ var sizeStyles$b = function sizeStyles(props) {
980
+ var marginTop = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
981
+ var paddingHorizontal = "".concat(props.isCompact ? 2 : 4, "em");
982
+ var paddingVertical = math("".concat(props.theme.space.base * (props.isCompact ? 2.5 : 5), " - ").concat(props.theme.borderWidths.sm));
983
+ var fontSize = props.theme.fontSizes.md;
984
+ var lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
985
+ return css(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
986
+ };
983
987
  var StyledFileUpload = styled.div.attrs({
984
- 'data-garden-id': COMPONENT_ID$m,
985
- 'data-garden-version': '8.44.0'
988
+ 'data-garden-id': COMPONENT_ID$n,
989
+ 'data-garden-version': '8.46.0'
986
990
  }).withConfig({
987
991
  displayName: "StyledFileUpload",
988
992
  componentId: "sc-1rodjgn-0"
989
- })(["box-sizing:content-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;padding:", ";min-width:4em;text-align:center;line-height:", ";font-size:", ";user-select:none;&:focus{outline:none;}&[aria-disabled='true']{cursor:default;}", ";", ";", ";"], function (props) {
993
+ })(["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) {
990
994
  return props.theme.rtl ? 'rtl' : 'ltr';
991
995
  }, function (props) {
992
996
  return props.theme.borderWidths.sm;
993
997
  }, function (props) {
994
998
  return props.theme.borderRadii.md;
995
- }, function (props) {
996
- return "".concat(props.theme.space.base * 5, "px ").concat(props.theme.space.base * 15, "px");
997
- }, function (props) {
998
- return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
999
- }, function (props) {
1000
- return props.theme.fontSizes.md;
1001
- }, function (props) {
1002
- return colorStyles$7(props);
1003
- }, function (props) {
1004
- return positionStyles(props);
1005
- }, function (props) {
1006
- return retrieveComponentStyles(COMPONENT_ID$m, props);
999
+ }, sizeStyles$b, colorStyles$7, function (props) {
1000
+ return retrieveComponentStyles(COMPONENT_ID$n, props);
1007
1001
  });
1008
1002
  StyledFileUpload.defaultProps = {
1009
1003
  theme: DEFAULT_THEME
1010
1004
  };
1011
1005
 
1012
- var COMPONENT_ID$l = 'forms.file.close';
1006
+ var COMPONENT_ID$m = 'forms.file.close';
1013
1007
  var StyledFileClose = styled.div.attrs({
1014
- 'data-garden-id': COMPONENT_ID$l,
1015
- 'data-garden-version': '8.44.0'
1008
+ 'data-garden-id': COMPONENT_ID$m,
1009
+ 'data-garden-version': '8.46.0'
1016
1010
  }).withConfig({
1017
1011
  displayName: "StyledFileClose",
1018
1012
  componentId: "sc-1m31jbf-0"
1019
- })(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;cursor:pointer;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], function (props) {
1020
- return retrieveComponentStyles(COMPONENT_ID$l, props);
1013
+ })(["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) {
1014
+ return props.theme.colors.foreground;
1015
+ }, function (props) {
1016
+ return retrieveComponentStyles(COMPONENT_ID$m, props);
1021
1017
  });
1022
1018
  StyledFileClose.defaultProps = {
1023
1019
  theme: DEFAULT_THEME
1024
1020
  };
1025
1021
 
1026
- var COMPONENT_ID$k = 'forms.file';
1022
+ var COMPONENT_ID$l = 'forms.file';
1027
1023
  var colorStyles$6 = function colorStyles(props) {
1028
- var borderColor = getColor('neutralHue', 300, props.theme);
1029
- var focusBorderColor = getColor('primaryHue', 600, props.theme);
1030
- var foregroundColor = getColor('neutralHue', 800, props.theme);
1024
+ var borderColor;
1025
+ var focusBorderColor;
1026
+ var foregroundColor;
1027
+ if (props.validation === 'success') {
1028
+ borderColor = getColor('successHue', 600, props.theme);
1029
+ focusBorderColor = borderColor;
1030
+ foregroundColor = borderColor;
1031
+ } else if (props.validation === 'error') {
1032
+ borderColor = getColor('dangerHue', 600, props.theme);
1033
+ focusBorderColor = borderColor;
1034
+ foregroundColor = borderColor;
1035
+ } else {
1036
+ borderColor = getColor('neutralHue', 300, props.theme);
1037
+ focusBorderColor = getColor('primaryHue', 600, props.theme);
1038
+ foregroundColor = props.theme.colors.foreground;
1039
+ }
1031
1040
  var boxShadow = "\n ".concat(props.focusInset ? 'inset' : '', "\n ").concat(props.theme.shadows.md(rgba(focusBorderColor, 0.35)));
1032
1041
  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 ");
1033
1042
  };
1034
1043
  var sizeStyles$a = function sizeStyles(props) {
1035
1044
  var size = "".concat(props.theme.space.base * (props.isCompact ? 7 : 10), "px");
1036
- var spacing = "".concat(props.theme.space.base * 3, "px");
1045
+ var spacing = "".concat(props.theme.space.base * (props.isCompact ? 2 : 3), "px");
1037
1046
  var fontSize = props.theme.fontSizes.md;
1038
1047
  var lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
1039
1048
  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 ");
1040
1049
  };
1041
1050
  var StyledFile = styled.div.attrs({
1042
- 'data-garden-id': COMPONENT_ID$k,
1043
- 'data-garden-version': '8.44.0'
1051
+ 'data-garden-id': COMPONENT_ID$l,
1052
+ 'data-garden-version': '8.46.0'
1044
1053
  }).withConfig({
1045
1054
  displayName: "StyledFile",
1046
1055
  componentId: "sc-195lzp1-0"
1047
1056
  })(["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) {
1048
1057
  return props.theme.rtl ? 'right' : 'left';
1049
1058
  }, function (props) {
1050
- return retrieveComponentStyles(COMPONENT_ID$k, props);
1059
+ return retrieveComponentStyles(COMPONENT_ID$l, props);
1051
1060
  });
1052
1061
  StyledFile.defaultProps = {
1053
1062
  theme: DEFAULT_THEME
1054
1063
  };
1055
1064
 
1056
- var _excluded$g = ["children"];
1065
+ var COMPONENT_ID$k = 'forms.file.delete';
1066
+ var StyledFileDelete = styled(StyledFileClose).attrs({
1067
+ 'data-garden-id': COMPONENT_ID$k,
1068
+ 'data-garden-version': '8.46.0'
1069
+ }).withConfig({
1070
+ displayName: "StyledFileDelete",
1071
+ componentId: "sc-a8nnhx-0"
1072
+ })(["color:", ";", ";"], function (props) {
1073
+ return getColor('dangerHue', 600, props.theme);
1074
+ }, function (props) {
1075
+ return retrieveComponentStyles(COMPONENT_ID$k, props);
1076
+ });
1077
+ StyledFileDelete.defaultProps = {
1078
+ theme: DEFAULT_THEME
1079
+ };
1080
+
1081
+ var _excluded$g = ["children", "isCompact", "theme"];
1057
1082
  var COMPONENT_ID$j = 'forms.file.icon';
1058
1083
  var StyledFileIcon = styled(function (_ref) {
1059
- var children = _ref.children,
1060
- props = _objectWithoutProperties(_ref, _excluded$g);
1084
+ var children = _ref.children;
1085
+ _ref.isCompact;
1086
+ _ref.theme;
1087
+ var props = _objectWithoutProperties(_ref, _excluded$g);
1061
1088
  return React__default.cloneElement(Children.only(children), props);
1062
1089
  }).attrs({
1063
1090
  'data-garden-id': COMPONENT_ID$j,
1064
- 'data-garden-version': '8.44.0'
1091
+ 'data-garden-version': '8.46.0'
1065
1092
  }).withConfig({
1066
1093
  displayName: "StyledFileIcon",
1067
1094
  componentId: "sc-7b3q0c-0"
1068
1095
  })(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], function (props) {
1069
- return props.theme.iconSizes.md;
1096
+ return props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md;
1070
1097
  }, function (props) {
1071
1098
  return props.theme.rtl ? 'left' : 'right';
1072
1099
  }, function (props) {
@@ -1081,7 +1108,7 @@ StyledFileIcon.defaultProps = {
1081
1108
  var COMPONENT_ID$i = 'forms.file_list';
1082
1109
  var StyledFileList = styled.ul.attrs({
1083
1110
  'data-garden-id': COMPONENT_ID$i,
1084
- 'data-garden-version': '8.44.0'
1111
+ 'data-garden-version': '8.46.0'
1085
1112
  }).withConfig({
1086
1113
  displayName: "StyledFileList",
1087
1114
  componentId: "sc-gbahjg-0"
@@ -1095,11 +1122,11 @@ StyledFileList.defaultProps = {
1095
1122
  var COMPONENT_ID$h = 'forms.file_list.item';
1096
1123
  var StyledFileListItem = styled.li.attrs({
1097
1124
  'data-garden-id': COMPONENT_ID$h,
1098
- 'data-garden-version': '8.44.0'
1125
+ 'data-garden-version': '8.46.0'
1099
1126
  }).withConfig({
1100
1127
  displayName: "StyledFileListItem",
1101
1128
  componentId: "sc-1ova3lo-0"
1102
- })(["&:not(:first-child){margin-top:", "px;}", ";"], function (props) {
1129
+ })(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, function (props) {
1103
1130
  return props.theme.space.base * 2;
1104
1131
  }, function (props) {
1105
1132
  return retrieveComponentStyles(COMPONENT_ID$h, props);
@@ -1108,9 +1135,9 @@ StyledFileListItem.defaultProps = {
1108
1135
  theme: DEFAULT_THEME
1109
1136
  };
1110
1137
 
1111
- function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
1138
+ function _extends$n() { _extends$n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
1112
1139
 
1113
- var _ref$9 = /*#__PURE__*/React.createElement("circle", {
1140
+ var _ref$n = /*#__PURE__*/React.createElement("circle", {
1114
1141
  cx: 6,
1115
1142
  cy: 6,
1116
1143
  r: 2,
@@ -1118,20 +1145,20 @@ var _ref$9 = /*#__PURE__*/React.createElement("circle", {
1118
1145
  });
1119
1146
 
1120
1147
  function SvgCircleSmFill$1(props) {
1121
- return /*#__PURE__*/React.createElement("svg", _extends$9({
1148
+ return /*#__PURE__*/React.createElement("svg", _extends$n({
1122
1149
  xmlns: "http://www.w3.org/2000/svg",
1123
1150
  width: 12,
1124
1151
  height: 12,
1125
1152
  viewBox: "0 0 12 12",
1126
1153
  focusable: "false",
1127
1154
  role: "presentation"
1128
- }, props), _ref$9);
1155
+ }, props), _ref$n);
1129
1156
  }
1130
1157
 
1131
1158
  var COMPONENT_ID$g = 'forms.radio_svg';
1132
1159
  var StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
1133
1160
  'data-garden-id': COMPONENT_ID$g,
1134
- 'data-garden-version': '8.44.0'
1161
+ 'data-garden-version': '8.46.0'
1135
1162
  }).withConfig({
1136
1163
  displayName: "StyledRadioSvg",
1137
1164
  componentId: "sc-1r1qtr1-0"
@@ -1150,7 +1177,7 @@ var sizeStyles$9 = function sizeStyles(props) {
1150
1177
  };
1151
1178
  var StyledToggleLabel = styled(StyledCheckLabel).attrs({
1152
1179
  'data-garden-id': COMPONENT_ID$f,
1153
- 'data-garden-version': '8.44.0'
1180
+ 'data-garden-version': '8.46.0'
1154
1181
  }).withConfig({
1155
1182
  displayName: "StyledToggleLabel",
1156
1183
  componentId: "sc-e0asdk-0"
@@ -1166,7 +1193,7 @@ StyledToggleLabel.defaultProps = {
1166
1193
  var COMPONENT_ID$e = 'forms.toggle_hint';
1167
1194
  var StyledToggleHint = styled(StyledHint).attrs({
1168
1195
  'data-garden-id': COMPONENT_ID$e,
1169
- 'data-garden-version': '8.44.0'
1196
+ 'data-garden-version': '8.46.0'
1170
1197
  }).withConfig({
1171
1198
  displayName: "StyledToggleHint",
1172
1199
  componentId: "sc-nziggu-0"
@@ -1199,7 +1226,7 @@ var sizeStyles$8 = function sizeStyles(props) {
1199
1226
  };
1200
1227
  var StyledToggleInput = styled(StyledCheckInput).attrs({
1201
1228
  'data-garden-id': COMPONENT_ID$d,
1202
- 'data-garden-version': '8.44.0'
1229
+ 'data-garden-version': '8.46.0'
1203
1230
  }).withConfig({
1204
1231
  displayName: "StyledToggleInput",
1205
1232
  componentId: "sc-sgp47s-0"
@@ -1217,7 +1244,7 @@ StyledToggleInput.defaultProps = {
1217
1244
  var COMPONENT_ID$c = 'forms.toggle_message';
1218
1245
  var StyledToggleMessage = styled(StyledMessage).attrs({
1219
1246
  'data-garden-id': COMPONENT_ID$c,
1220
- 'data-garden-version': '8.44.0'
1247
+ 'data-garden-version': '8.46.0'
1221
1248
  }).withConfig({
1222
1249
  displayName: "StyledToggleMessage",
1223
1250
  componentId: "sc-13vuvl1-0"
@@ -1236,9 +1263,9 @@ StyledToggleMessage.defaultProps = {
1236
1263
  theme: DEFAULT_THEME
1237
1264
  };
1238
1265
 
1239
- function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
1266
+ function _extends$m() { _extends$m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
1240
1267
 
1241
- var _ref$8 = /*#__PURE__*/React.createElement("circle", {
1268
+ var _ref$m = /*#__PURE__*/React.createElement("circle", {
1242
1269
  cx: 8,
1243
1270
  cy: 8,
1244
1271
  r: 6,
@@ -1246,20 +1273,20 @@ var _ref$8 = /*#__PURE__*/React.createElement("circle", {
1246
1273
  });
1247
1274
 
1248
1275
  function SvgCircleSmFill(props) {
1249
- return /*#__PURE__*/React.createElement("svg", _extends$8({
1276
+ return /*#__PURE__*/React.createElement("svg", _extends$m({
1250
1277
  xmlns: "http://www.w3.org/2000/svg",
1251
1278
  width: 16,
1252
1279
  height: 16,
1253
1280
  viewBox: "0 0 16 16",
1254
1281
  focusable: "false",
1255
1282
  role: "presentation"
1256
- }, props), _ref$8);
1283
+ }, props), _ref$m);
1257
1284
  }
1258
1285
 
1259
1286
  var COMPONENT_ID$b = 'forms.toggle_svg';
1260
1287
  var StyledToggleSvg = styled(SvgCircleSmFill).attrs({
1261
1288
  'data-garden-id': COMPONENT_ID$b,
1262
- 'data-garden-version': '8.44.0'
1289
+ 'data-garden-version': '8.46.0'
1263
1290
  }).withConfig({
1264
1291
  displayName: "StyledToggleSvg",
1265
1292
  componentId: "sc-162xbyx-0"
@@ -1283,7 +1310,7 @@ var sizeStyles$7 = function sizeStyles(props) {
1283
1310
  };
1284
1311
  var StyledSelect = styled(StyledTextInput).attrs({
1285
1312
  'data-garden-id': COMPONENT_ID$a,
1286
- 'data-garden-version': '8.44.0',
1313
+ 'data-garden-version': '8.46.0',
1287
1314
  as: 'select'
1288
1315
  }).withConfig({
1289
1316
  displayName: "StyledSelect",
@@ -1302,7 +1329,7 @@ StyledSelect.defaultProps = {
1302
1329
  var COMPONENT_ID$9 = 'forms.select_wrapper';
1303
1330
  var StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
1304
1331
  'data-garden-id': COMPONENT_ID$9,
1305
- 'data-garden-version': '8.44.0',
1332
+ 'data-garden-version': '8.46.0',
1306
1333
  isBare: true
1307
1334
  }).withConfig({
1308
1335
  displayName: "StyledSelectWrapper",
@@ -1355,7 +1382,7 @@ var sizeStyles$6 = function sizeStyles(props) {
1355
1382
  var StyledRangeInput = styled.input.attrs(function (props) {
1356
1383
  return {
1357
1384
  'data-garden-id': COMPONENT_ID$8,
1358
- 'data-garden-version': '8.44.0',
1385
+ 'data-garden-version': '8.46.0',
1359
1386
  type: 'range',
1360
1387
  style: {
1361
1388
  backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1387,7 +1414,7 @@ var COMPONENT_ID$7 = 'forms.slider';
1387
1414
  var StyledSlider = styled.div.attrs(function (props) {
1388
1415
  return {
1389
1416
  'data-garden-id': COMPONENT_ID$7,
1390
- 'data-garden-version': '8.44.0',
1417
+ 'data-garden-version': '8.46.0',
1391
1418
  'aria-disabled': props.isDisabled
1392
1419
  };
1393
1420
  }).withConfig({
@@ -1427,7 +1454,7 @@ var sizeStyles$5 = function sizeStyles(props) {
1427
1454
  var StyledSliderThumb = styled.div.attrs(function (props) {
1428
1455
  return {
1429
1456
  'data-garden-id': COMPONENT_ID$6,
1430
- 'data-garden-version': '8.44.0',
1457
+ 'data-garden-version': '8.46.0',
1431
1458
  'aria-disabled': props.isDisabled
1432
1459
  };
1433
1460
  }).withConfig({
@@ -1471,7 +1498,7 @@ var sizeStyles$4 = function sizeStyles(props) {
1471
1498
  var StyledSliderTrack = styled.div.attrs(function (props) {
1472
1499
  return {
1473
1500
  'data-garden-id': COMPONENT_ID$5,
1474
- 'data-garden-version': '8.44.0',
1501
+ 'data-garden-version': '8.46.0',
1475
1502
  'aria-disabled': props.isDisabled
1476
1503
  };
1477
1504
  }).withConfig({
@@ -1498,7 +1525,7 @@ var sizeStyles$3 = function sizeStyles(props) {
1498
1525
  };
1499
1526
  var StyledSliderTrackRail = styled.div.attrs({
1500
1527
  'data-garden-id': COMPONENT_ID$4,
1501
- 'data-garden-version': '8.44.0'
1528
+ 'data-garden-version': '8.46.0'
1502
1529
  }).withConfig({
1503
1530
  displayName: "StyledSliderTrackRail",
1504
1531
  componentId: "sc-1o5owbd-0"
@@ -1529,7 +1556,7 @@ var sizeStyles$2 = function sizeStyles(props) {
1529
1556
  };
1530
1557
  var StyledTileIcon = styled.span.attrs({
1531
1558
  'data-garden-id': COMPONENT_ID$3,
1532
- 'data-garden-version': '8.44.0'
1559
+ 'data-garden-version': '8.46.0'
1533
1560
  }).withConfig({
1534
1561
  displayName: "StyledTileIcon",
1535
1562
  componentId: "sc-1wazhg4-0"
@@ -1569,7 +1596,7 @@ var colorStyles = function colorStyles(props) {
1569
1596
  var StyledTile = styled.label.attrs(function (props) {
1570
1597
  return {
1571
1598
  'data-garden-id': COMPONENT_ID$2,
1572
- 'data-garden-version': '8.44.0',
1599
+ 'data-garden-version': '8.46.0',
1573
1600
  'data-garden-focus-visible': props.isFocused,
1574
1601
  'data-garden-selected': props.isSelected
1575
1602
  };
@@ -1607,7 +1634,7 @@ var sizeStyles$1 = function sizeStyles(props) {
1607
1634
  };
1608
1635
  var StyledTileDescription = styled.span.attrs({
1609
1636
  'data-garden-id': COMPONENT_ID$1,
1610
- 'data-garden-version': '8.44.0'
1637
+ 'data-garden-version': '8.46.0'
1611
1638
  }).withConfig({
1612
1639
  displayName: "StyledTileDescription",
1613
1640
  componentId: "sc-xfuu7u-0"
@@ -1650,7 +1677,7 @@ var sizeStyles = function sizeStyles(props) {
1650
1677
  };
1651
1678
  var StyledTileLabel = styled.span.attrs({
1652
1679
  'data-garden-id': COMPONENT_ID,
1653
- 'data-garden-version': '8.44.0'
1680
+ 'data-garden-version': '8.46.0'
1654
1681
  }).withConfig({
1655
1682
  displayName: "StyledTileLabel",
1656
1683
  componentId: "sc-1mypv27-0"
@@ -1699,7 +1726,7 @@ var Field = React__default.forwardRef(function (props, ref) {
1699
1726
  }, [propGetters, isLabelActive, isLabelHovered]);
1700
1727
  return React__default.createElement(FieldContext.Provider, {
1701
1728
  value: fieldProps
1702
- }, React__default.createElement(StyledField, _extends$f({}, props, {
1729
+ }, React__default.createElement(StyledField, _extends$t({}, props, {
1703
1730
  ref: ref
1704
1731
  })));
1705
1732
  });
@@ -1715,7 +1742,7 @@ var useFieldsetContext = function useFieldsetContext() {
1715
1742
 
1716
1743
  var Legend = forwardRef(function (props, ref) {
1717
1744
  var fieldsetContext = useFieldsetContext();
1718
- return React__default.createElement(StyledLegend, _extends$f({}, props, fieldsetContext, {
1745
+ return React__default.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
1719
1746
  ref: ref
1720
1747
  }));
1721
1748
  });
@@ -1729,7 +1756,7 @@ var Fieldset = forwardRef(function (props, ref) {
1729
1756
  }, [props.isCompact]);
1730
1757
  return React__default.createElement(FieldsetContext.Provider, {
1731
1758
  value: fieldsetContext
1732
- }, React__default.createElement(StyledFieldset, _extends$f({}, props, {
1759
+ }, React__default.createElement(StyledFieldset, _extends$t({}, props, {
1733
1760
  ref: ref
1734
1761
  })));
1735
1762
  });
@@ -1758,7 +1785,7 @@ var Hint = React__default.forwardRef(function (props, ref) {
1758
1785
  if (fieldContext) {
1759
1786
  combinedProps = fieldContext.getHintProps(combinedProps);
1760
1787
  }
1761
- return React__default.createElement(HintComponent, _extends$f({
1788
+ return React__default.createElement(HintComponent, _extends$t({
1762
1789
  ref: ref
1763
1790
  }, combinedProps));
1764
1791
  });
@@ -1800,7 +1827,7 @@ var Label$1 = React__default.forwardRef(function (props, ref) {
1800
1827
  });
1801
1828
  }
1802
1829
  if (type === 'radio') {
1803
- return React__default.createElement(StyledRadioLabel, _extends$f({
1830
+ return React__default.createElement(StyledRadioLabel, _extends$t({
1804
1831
  ref: ref
1805
1832
  }, combinedProps), React__default.createElement(StyledRadioSvg, null), props.children);
1806
1833
  } else if (type === 'checkbox') {
@@ -1822,15 +1849,15 @@ var Label$1 = React__default.forwardRef(function (props, ref) {
1822
1849
  combinedProps = _objectSpread2(_objectSpread2({}, combinedProps), {}, {
1823
1850
  onClick: composeEventHandlers(combinedProps.onClick, onLabelSelect)
1824
1851
  });
1825
- return React__default.createElement(StyledCheckLabel, _extends$f({
1852
+ return React__default.createElement(StyledCheckLabel, _extends$t({
1826
1853
  ref: ref
1827
1854
  }, combinedProps), React__default.createElement(StyledCheckSvg, null), React__default.createElement(StyledDashSvg, null), props.children);
1828
1855
  } else if (type === 'toggle') {
1829
- return React__default.createElement(StyledToggleLabel, _extends$f({
1856
+ return React__default.createElement(StyledToggleLabel, _extends$t({
1830
1857
  ref: ref
1831
1858
  }, combinedProps), React__default.createElement(StyledToggleSvg, null), props.children);
1832
1859
  }
1833
- return React__default.createElement(StyledLabel, _extends$f({
1860
+ return React__default.createElement(StyledLabel, _extends$t({
1834
1861
  ref: ref
1835
1862
  }, combinedProps));
1836
1863
  });
@@ -1862,7 +1889,7 @@ var Message = React__default.forwardRef(function (_ref, ref) {
1862
1889
  if (fieldContext) {
1863
1890
  combinedProps = fieldContext.getMessageProps(combinedProps);
1864
1891
  }
1865
- return React__default.createElement(MessageComponent, _extends$f({
1892
+ return React__default.createElement(MessageComponent, _extends$t({
1866
1893
  ref: ref
1867
1894
  }, combinedProps), validation && React__default.createElement(StyledMessageIcon, {
1868
1895
  validation: validation
@@ -2157,32 +2184,32 @@ var Toggle = React__default.forwardRef(function (_ref, ref) {
2157
2184
  });
2158
2185
  Toggle.displayName = 'Toggle';
2159
2186
 
2160
- function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
2187
+ function _extends$l() { _extends$l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
2161
2188
 
2162
- var _ref$7 = /*#__PURE__*/React.createElement("path", {
2189
+ var _ref$l = /*#__PURE__*/React.createElement("path", {
2163
2190
  fill: "currentColor",
2164
2191
  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"
2165
2192
  });
2166
2193
 
2167
2194
  function SvgChevronDownStroke(props) {
2168
- return /*#__PURE__*/React.createElement("svg", _extends$7({
2195
+ return /*#__PURE__*/React.createElement("svg", _extends$l({
2169
2196
  xmlns: "http://www.w3.org/2000/svg",
2170
2197
  width: 16,
2171
2198
  height: 16,
2172
2199
  viewBox: "0 0 16 16",
2173
2200
  focusable: "false",
2174
2201
  role: "presentation"
2175
- }, props), _ref$7);
2202
+ }, props), _ref$l);
2176
2203
  }
2177
2204
 
2178
2205
  var _excluded$8 = ["onFocus", "onBlur", "disabled", "readOnly", "isFocused"];
2179
2206
  var StartIcon = function StartIcon(props) {
2180
- return React__default.createElement(StyledTextMediaFigure, _extends$f({
2207
+ return React__default.createElement(StyledTextMediaFigure, _extends$t({
2181
2208
  position: "start"
2182
2209
  }, props));
2183
2210
  };
2184
2211
  var EndIcon = function EndIcon(props) {
2185
- return React__default.createElement(StyledTextMediaFigure, _extends$f({
2212
+ return React__default.createElement(StyledTextMediaFigure, _extends$t({
2186
2213
  position: "end"
2187
2214
  }, props));
2188
2215
  };
@@ -2203,7 +2230,7 @@ var FauxInput = forwardRef(function (_ref, ref) {
2203
2230
  var onBlurHandler = composeEventHandlers(onBlur, function () {
2204
2231
  setIsFocused(false);
2205
2232
  });
2206
- return React__default.createElement(StyledTextFauxInput, _extends$f({
2233
+ return React__default.createElement(StyledTextFauxInput, _extends$t({
2207
2234
  onFocus: onFocusHandler,
2208
2235
  onBlur: onBlurHandler,
2209
2236
  isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
@@ -2496,7 +2523,7 @@ var MultiThumbRange = function MultiThumbRange(_ref) {
2496
2523
  var maxPosition = calculateMaxPosition(MIN_DISTANCE);
2497
2524
  var sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition);
2498
2525
  var onSliderMouseDown = composeEventHandlers(onMouseDown, onTrackMouseDown);
2499
- return React__default.createElement(StyledSlider, _extends$f({
2526
+ return React__default.createElement(StyledSlider, _extends$t({
2500
2527
  isDisabled: disabled,
2501
2528
  onMouseDown: onSliderMouseDown
2502
2529
  }, props), React__default.createElement(StyledSliderTrack, {
@@ -2597,13 +2624,13 @@ var Tile = React__default.forwardRef(function (_ref, ref) {
2597
2624
  onChange: tilesContext.onChange
2598
2625
  };
2599
2626
  }
2600
- return React__default.createElement(StyledTile, _extends$f({
2627
+ return React__default.createElement(StyledTile, _extends$t({
2601
2628
  ref: ref,
2602
2629
  "aria-disabled": disabled,
2603
2630
  isDisabled: disabled,
2604
2631
  isFocused: isFocused,
2605
2632
  isSelected: tilesContext && tilesContext.value === value
2606
- }, props), children, React__default.createElement(StyledTileInput, _extends$f({}, inputProps, {
2633
+ }, props), children, React__default.createElement(StyledTileInput, _extends$t({}, inputProps, {
2607
2634
  disabled: disabled,
2608
2635
  value: value,
2609
2636
  onBlur: function onBlur() {
@@ -2629,7 +2656,7 @@ Tile.propTypes = {
2629
2656
 
2630
2657
  var Description = React__default.forwardRef(function (props, ref) {
2631
2658
  var tilesContext = useTilesContext();
2632
- return React__default.createElement(StyledTileDescription, _extends$f({
2659
+ return React__default.createElement(StyledTileDescription, _extends$t({
2633
2660
  ref: ref,
2634
2661
  isCentered: tilesContext && tilesContext.isCentered
2635
2662
  }, props));
@@ -2638,7 +2665,7 @@ Description.displayName = 'TileDescription';
2638
2665
 
2639
2666
  var Icon = React__default.forwardRef(function (props, ref) {
2640
2667
  var tileContext = useTilesContext();
2641
- return React__default.createElement(StyledTileIcon, _extends$f({
2668
+ return React__default.createElement(StyledTileIcon, _extends$t({
2642
2669
  ref: ref,
2643
2670
  isCentered: tileContext && tileContext.isCentered
2644
2671
  }, props));
@@ -2657,7 +2684,7 @@ var Label = React__default.forwardRef(function (props, forwardedRef) {
2657
2684
  setTitle(ref.current.textContent || undefined);
2658
2685
  }
2659
2686
  }, [ref]);
2660
- return React__default.createElement(StyledTileLabel, _extends$f({
2687
+ return React__default.createElement(StyledTileLabel, _extends$t({
2661
2688
  ref: mergeRefs([ref, forwardedRef]),
2662
2689
  title: title,
2663
2690
  isCentered: tilesContext && tilesContext.isCentered
@@ -2696,7 +2723,7 @@ var Tiles = React__default.forwardRef(function (_ref, ref) {
2696
2723
  }, [handleOnChange, selectedValue, name, isCentered]);
2697
2724
  return React__default.createElement(TilesContext.Provider, {
2698
2725
  value: tileContext
2699
- }, React__default.createElement("div", _extends$f({
2726
+ }, React__default.createElement("div", _extends$t({
2700
2727
  ref: ref,
2701
2728
  role: "radiogroup"
2702
2729
  }, props)));
@@ -2727,7 +2754,7 @@ var InputGroup = React__default.forwardRef(function (_ref, ref) {
2727
2754
  }, [isCompact]);
2728
2755
  return React__default.createElement(InputGroupContext.Provider, {
2729
2756
  value: contextValue
2730
- }, React__default.createElement(StyledInputGroup, _extends$f({
2757
+ }, React__default.createElement(StyledInputGroup, _extends$t({
2731
2758
  ref: ref,
2732
2759
  isCompact: isCompact
2733
2760
  }, props)));
@@ -2741,7 +2768,7 @@ var _excluded$2 = ["disabled"];
2741
2768
  var FileUpload = React__default.forwardRef(function (_ref, ref) {
2742
2769
  var disabled = _ref.disabled,
2743
2770
  props = _objectWithoutProperties(_ref, _excluded$2);
2744
- return React__default.createElement(StyledFileUpload, _extends$f({
2771
+ return React__default.createElement(StyledFileUpload, _extends$t({
2745
2772
  ref: ref,
2746
2773
  "aria-disabled": disabled
2747
2774
  }, props));
@@ -2754,51 +2781,338 @@ FileUpload.propTypes = {
2754
2781
  FileUpload.displayName = 'FileUpload';
2755
2782
 
2756
2783
  var Item = forwardRef(function (_ref, ref) {
2757
- var props = _extends$f({}, _ref);
2758
- return React__default.createElement(StyledFileListItem, _extends$f({}, props, {
2784
+ var props = _extends$t({}, _ref);
2785
+ return React__default.createElement(StyledFileListItem, _extends$t({}, props, {
2759
2786
  ref: ref
2760
2787
  }));
2761
2788
  });
2762
- Item.displayName = 'Item';
2789
+ Item.displayName = 'FileList.Item';
2763
2790
 
2764
2791
  var FileList = forwardRef(function (_ref, ref) {
2765
- var props = _extends$f({}, _ref);
2766
- return React__default.createElement(StyledFileList, _extends$f({}, props, {
2792
+ var props = _extends$t({}, _ref);
2793
+ return React__default.createElement(StyledFileList, _extends$t({}, props, {
2767
2794
  ref: ref
2768
2795
  }));
2769
2796
  });
2770
2797
  FileList.displayName = 'FileList';
2771
2798
  FileList.Item = Item;
2772
2799
 
2773
- function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
2800
+ function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
2774
2801
 
2775
- var _ref$6 = /*#__PURE__*/React.createElement("path", {
2802
+ var _ref$k = /*#__PURE__*/React.createElement("path", {
2803
+ stroke: "currentColor",
2804
+ strokeLinecap: "round",
2805
+ d: "M3 9l6-6m0 6L3 3"
2806
+ });
2807
+
2808
+ function SvgXStroke$1(props) {
2809
+ return /*#__PURE__*/React.createElement("svg", _extends$k({
2810
+ xmlns: "http://www.w3.org/2000/svg",
2811
+ width: 12,
2812
+ height: 12,
2813
+ viewBox: "0 0 12 12",
2814
+ focusable: "false",
2815
+ role: "presentation"
2816
+ }, props), _ref$k);
2817
+ }
2818
+
2819
+ function _extends$j() { _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
2820
+
2821
+ var _ref$j = /*#__PURE__*/React.createElement("path", {
2776
2822
  stroke: "currentColor",
2777
2823
  strokeLinecap: "round",
2778
2824
  d: "M3 13L13 3m0 10L3 3"
2779
2825
  });
2780
2826
 
2781
2827
  function SvgXStroke(props) {
2782
- return /*#__PURE__*/React.createElement("svg", _extends$6({
2828
+ return /*#__PURE__*/React.createElement("svg", _extends$j({
2783
2829
  xmlns: "http://www.w3.org/2000/svg",
2784
2830
  width: 16,
2785
2831
  height: 16,
2786
2832
  viewBox: "0 0 16 16",
2787
2833
  focusable: "false",
2788
2834
  role: "presentation"
2789
- }, props), _ref$6);
2835
+ }, props), _ref$j);
2790
2836
  }
2791
2837
 
2838
+ var FileContext = createContext(undefined);
2839
+ var useFileContext = function useFileContext() {
2840
+ return useContext(FileContext);
2841
+ };
2842
+
2792
2843
  var Close = React__default.forwardRef(function (props, ref) {
2793
- return React__default.createElement(StyledFileClose, _extends$f({
2844
+ var fileContext = useFileContext();
2845
+ var onMouseDown = composeEventHandlers(props.onMouseDown, function (event) {
2846
+ return event.preventDefault();
2847
+ }
2848
+ );
2849
+ return React__default.createElement(StyledFileClose, _extends$t({
2794
2850
  ref: ref
2795
- }, props), React__default.createElement(SvgXStroke, null));
2851
+ }, props, {
2852
+ onMouseDown: onMouseDown
2853
+ }), fileContext && fileContext.isCompact ? React__default.createElement(SvgXStroke$1, null) : React__default.createElement(SvgXStroke, null));
2796
2854
  });
2797
- Close.displayName = 'Close';
2855
+ Close.displayName = 'File.Close';
2798
2856
 
2799
- function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
2857
+ function _extends$i() { _extends$i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
2800
2858
 
2801
- var _ref$5 = /*#__PURE__*/React.createElement("path", {
2859
+ var _ref$i = /*#__PURE__*/React.createElement("path", {
2860
+ fill: "none",
2861
+ stroke: "currentColor",
2862
+ strokeLinecap: "round",
2863
+ d: "M4.5 2.5V1c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v1.5M2 2.5h8m-5.5 7V5m3 4.5V5m-5-.5V11c0 .3.2.5.5.5h6c.3 0 .5-.2.5-.5V4.5"
2864
+ });
2865
+
2866
+ function SvgTrashStroke$1(props) {
2867
+ return /*#__PURE__*/React.createElement("svg", _extends$i({
2868
+ xmlns: "http://www.w3.org/2000/svg",
2869
+ width: 12,
2870
+ height: 12,
2871
+ viewBox: "0 0 12 12",
2872
+ focusable: "false",
2873
+ role: "presentation"
2874
+ }, props), _ref$i);
2875
+ }
2876
+
2877
+ function _extends$h() { _extends$h = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
2878
+
2879
+ var _ref$h = /*#__PURE__*/React.createElement("path", {
2880
+ fill: "none",
2881
+ stroke: "currentColor",
2882
+ strokeLinecap: "round",
2883
+ d: "M6.5 2.5V1c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v1.5M3 2.5h10m-6.5 11v-8m3 8v-8m-6-1V15c0 .3.2.5.5.5h8c.3 0 .5-.2.5-.5V4.5"
2884
+ });
2885
+
2886
+ function SvgTrashStroke(props) {
2887
+ return /*#__PURE__*/React.createElement("svg", _extends$h({
2888
+ xmlns: "http://www.w3.org/2000/svg",
2889
+ width: 16,
2890
+ height: 16,
2891
+ viewBox: "0 0 16 16",
2892
+ focusable: "false",
2893
+ role: "presentation"
2894
+ }, props), _ref$h);
2895
+ }
2896
+
2897
+ var Delete = React__default.forwardRef(function (props, ref) {
2898
+ var fileContext = useFileContext();
2899
+ var onMouseDown = composeEventHandlers(props.onMouseDown, function (event) {
2900
+ return event.preventDefault();
2901
+ }
2902
+ );
2903
+ return React__default.createElement(StyledFileDelete, _extends$t({
2904
+ ref: ref
2905
+ }, props, {
2906
+ onMouseDown: onMouseDown
2907
+ }), fileContext && fileContext.isCompact ? React__default.createElement(SvgTrashStroke$1, null) : React__default.createElement(SvgTrashStroke, null));
2908
+ });
2909
+ Delete.displayName = 'File.Delete';
2910
+
2911
+ function _extends$g() { _extends$g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
2912
+
2913
+ var _ref$g = /*#__PURE__*/React.createElement("path", {
2914
+ fill: "none",
2915
+ stroke: "currentColor",
2916
+ strokeLinecap: "round",
2917
+ d: "M10.5 3.21V11a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h5.79a.5.5 0 01.35.15l2.21 2.21a.5.5 0 01.15.35zM7.5.5V3a.5.5 0 00.5.5h2.5m-7 6h5"
2918
+ });
2919
+
2920
+ var _ref2$3 = /*#__PURE__*/React.createElement("rect", {
2921
+ width: 6,
2922
+ height: 3,
2923
+ x: 3,
2924
+ y: 5,
2925
+ fill: "currentColor",
2926
+ rx: 0.5,
2927
+ ry: 0.5
2928
+ });
2929
+
2930
+ function SvgFilePdfStroke$1(props) {
2931
+ return /*#__PURE__*/React.createElement("svg", _extends$g({
2932
+ xmlns: "http://www.w3.org/2000/svg",
2933
+ width: 12,
2934
+ height: 12,
2935
+ viewBox: "0 0 12 12",
2936
+ focusable: "false",
2937
+ role: "presentation"
2938
+ }, props), _ref$g, _ref2$3);
2939
+ }
2940
+
2941
+ function _extends$f() { _extends$f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
2942
+
2943
+ var _ref$f = /*#__PURE__*/React.createElement("path", {
2944
+ fill: "none",
2945
+ stroke: "currentColor",
2946
+ strokeLinecap: "round",
2947
+ d: "M4.5.5v8m0-6h1m-2 1h1m0 1h1m-2 1h1m0 1h1m-2 1h1m6-4.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
2948
+ });
2949
+
2950
+ function SvgFileZipStroke$1(props) {
2951
+ return /*#__PURE__*/React.createElement("svg", _extends$f({
2952
+ xmlns: "http://www.w3.org/2000/svg",
2953
+ width: 12,
2954
+ height: 12,
2955
+ viewBox: "0 0 12 12",
2956
+ focusable: "false",
2957
+ role: "presentation"
2958
+ }, props), _ref$f);
2959
+ }
2960
+
2961
+ function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
2962
+
2963
+ var _ref$e = /*#__PURE__*/React.createElement("path", {
2964
+ fill: "none",
2965
+ stroke: "currentColor",
2966
+ strokeLinecap: "round",
2967
+ strokeLinejoin: "round",
2968
+ d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5m-7 6L5 8l1.5 1.5 1-1 1 1"
2969
+ });
2970
+
2971
+ var _ref2$2 = /*#__PURE__*/React.createElement("circle", {
2972
+ cx: 8,
2973
+ cy: 6,
2974
+ r: 1,
2975
+ fill: "currentColor"
2976
+ });
2977
+
2978
+ function SvgFileImageStroke$1(props) {
2979
+ return /*#__PURE__*/React.createElement("svg", _extends$e({
2980
+ xmlns: "http://www.w3.org/2000/svg",
2981
+ width: 12,
2982
+ height: 12,
2983
+ viewBox: "0 0 12 12",
2984
+ focusable: "false",
2985
+ role: "presentation"
2986
+ }, props), _ref$e, _ref2$2);
2987
+ }
2988
+
2989
+ function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
2990
+
2991
+ var _ref$d = /*#__PURE__*/React.createElement("path", {
2992
+ fill: "none",
2993
+ stroke: "currentColor",
2994
+ strokeLinecap: "round",
2995
+ d: "M3.5 5.5h5m-5 2h5m-5 2h5m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
2996
+ });
2997
+
2998
+ function SvgFileDocumentStroke$1(props) {
2999
+ return /*#__PURE__*/React.createElement("svg", _extends$d({
3000
+ xmlns: "http://www.w3.org/2000/svg",
3001
+ width: 12,
3002
+ height: 12,
3003
+ viewBox: "0 0 12 12",
3004
+ focusable: "false",
3005
+ role: "presentation"
3006
+ }, props), _ref$d);
3007
+ }
3008
+
3009
+ function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
3010
+
3011
+ var _ref$c = /*#__PURE__*/React.createElement("path", {
3012
+ fill: "none",
3013
+ stroke: "currentColor",
3014
+ strokeLinecap: "round",
3015
+ d: "M3.5 5.5h1m-1 2h1m-1 2h1m2-4h2m-2 2h2m-2 2h2m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
3016
+ });
3017
+
3018
+ function SvgFileSpreadsheetStroke$1(props) {
3019
+ return /*#__PURE__*/React.createElement("svg", _extends$c({
3020
+ xmlns: "http://www.w3.org/2000/svg",
3021
+ width: 12,
3022
+ height: 12,
3023
+ viewBox: "0 0 12 12",
3024
+ focusable: "false",
3025
+ role: "presentation"
3026
+ }, props), _ref$c);
3027
+ }
3028
+
3029
+ function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
3030
+
3031
+ var _ref$b = /*#__PURE__*/React.createElement("path", {
3032
+ fill: "none",
3033
+ stroke: "currentColor",
3034
+ d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM6 9.5h2c.28 0 .5-.22.5-.5V8c0-.28-.22-.5-.5-.5H6c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm-2-2h2c.28 0 .5-.22.5-.5V6c0-.28-.22-.5-.5-.5H4c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm3.5-7V3c0 .28.22.5.5.5h2.5"
3035
+ });
3036
+
3037
+ function SvgFilePresentationStroke$1(props) {
3038
+ return /*#__PURE__*/React.createElement("svg", _extends$b({
3039
+ xmlns: "http://www.w3.org/2000/svg",
3040
+ width: 12,
3041
+ height: 12,
3042
+ viewBox: "0 0 12 12",
3043
+ focusable: "false",
3044
+ role: "presentation"
3045
+ }, props), _ref$b);
3046
+ }
3047
+
3048
+ function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
3049
+
3050
+ var _ref$a = /*#__PURE__*/React.createElement("path", {
3051
+ fill: "none",
3052
+ stroke: "currentColor",
3053
+ d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
3054
+ });
3055
+
3056
+ function SvgFileGenericStroke$1(props) {
3057
+ return /*#__PURE__*/React.createElement("svg", _extends$a({
3058
+ xmlns: "http://www.w3.org/2000/svg",
3059
+ width: 12,
3060
+ height: 12,
3061
+ viewBox: "0 0 12 12",
3062
+ focusable: "false",
3063
+ role: "presentation"
3064
+ }, props), _ref$a);
3065
+ }
3066
+
3067
+ function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
3068
+
3069
+ var _ref$9 = /*#__PURE__*/React.createElement("g", {
3070
+ fill: "none",
3071
+ stroke: "currentColor"
3072
+ }, /*#__PURE__*/React.createElement("path", {
3073
+ strokeLinecap: "round",
3074
+ strokeLinejoin: "round",
3075
+ d: "M3.5 6l2 2L9 4.5"
3076
+ }), /*#__PURE__*/React.createElement("circle", {
3077
+ cx: 6,
3078
+ cy: 6,
3079
+ r: 5.5
3080
+ }));
3081
+
3082
+ function SvgCheckCircleStroke(props) {
3083
+ return /*#__PURE__*/React.createElement("svg", _extends$9({
3084
+ xmlns: "http://www.w3.org/2000/svg",
3085
+ width: 12,
3086
+ height: 12,
3087
+ viewBox: "0 0 12 12",
3088
+ focusable: "false",
3089
+ role: "presentation"
3090
+ }, props), _ref$9);
3091
+ }
3092
+
3093
+ function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
3094
+
3095
+ var _ref$8 = /*#__PURE__*/React.createElement("path", {
3096
+ fill: "none",
3097
+ stroke: "currentColor",
3098
+ strokeLinecap: "round",
3099
+ d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5M4 9.5l4-4m0 4l-4-4"
3100
+ });
3101
+
3102
+ function SvgFileErrorStroke$1(props) {
3103
+ return /*#__PURE__*/React.createElement("svg", _extends$8({
3104
+ xmlns: "http://www.w3.org/2000/svg",
3105
+ width: 12,
3106
+ height: 12,
3107
+ viewBox: "0 0 12 12",
3108
+ focusable: "false",
3109
+ role: "presentation"
3110
+ }, props), _ref$8);
3111
+ }
3112
+
3113
+ function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
3114
+
3115
+ var _ref$7 = /*#__PURE__*/React.createElement("path", {
2802
3116
  fill: "none",
2803
3117
  stroke: "currentColor",
2804
3118
  strokeLinecap: "round",
@@ -2816,19 +3130,19 @@ var _ref2$1 = /*#__PURE__*/React.createElement("rect", {
2816
3130
  });
2817
3131
 
2818
3132
  function SvgFilePdfStroke(props) {
2819
- return /*#__PURE__*/React.createElement("svg", _extends$5({
3133
+ return /*#__PURE__*/React.createElement("svg", _extends$7({
2820
3134
  xmlns: "http://www.w3.org/2000/svg",
2821
3135
  width: 16,
2822
3136
  height: 16,
2823
3137
  viewBox: "0 0 16 16",
2824
3138
  focusable: "false",
2825
3139
  role: "presentation"
2826
- }, props), _ref$5, _ref2$1);
3140
+ }, props), _ref$7, _ref2$1);
2827
3141
  }
2828
3142
 
2829
- function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
3143
+ function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
2830
3144
 
2831
- var _ref$4 = /*#__PURE__*/React.createElement("path", {
3145
+ var _ref$6 = /*#__PURE__*/React.createElement("path", {
2832
3146
  fill: "none",
2833
3147
  stroke: "currentColor",
2834
3148
  strokeLinecap: "round",
@@ -2836,19 +3150,19 @@ var _ref$4 = /*#__PURE__*/React.createElement("path", {
2836
3150
  });
2837
3151
 
2838
3152
  function SvgFileZipStroke(props) {
2839
- return /*#__PURE__*/React.createElement("svg", _extends$4({
3153
+ return /*#__PURE__*/React.createElement("svg", _extends$6({
2840
3154
  xmlns: "http://www.w3.org/2000/svg",
2841
3155
  width: 16,
2842
3156
  height: 16,
2843
3157
  viewBox: "0 0 16 16",
2844
3158
  focusable: "false",
2845
3159
  role: "presentation"
2846
- }, props), _ref$4);
3160
+ }, props), _ref$6);
2847
3161
  }
2848
3162
 
2849
- function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
3163
+ function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
2850
3164
 
2851
- var _ref$3 = /*#__PURE__*/React.createElement("path", {
3165
+ var _ref$5 = /*#__PURE__*/React.createElement("path", {
2852
3166
  fill: "none",
2853
3167
  stroke: "currentColor",
2854
3168
  strokeLinecap: "round",
@@ -2863,19 +3177,19 @@ var _ref2 = /*#__PURE__*/React.createElement("circle", {
2863
3177
  });
2864
3178
 
2865
3179
  function SvgFileImageStroke(props) {
2866
- return /*#__PURE__*/React.createElement("svg", _extends$3({
3180
+ return /*#__PURE__*/React.createElement("svg", _extends$5({
2867
3181
  xmlns: "http://www.w3.org/2000/svg",
2868
3182
  width: 16,
2869
3183
  height: 16,
2870
3184
  viewBox: "0 0 16 16",
2871
3185
  focusable: "false",
2872
3186
  role: "presentation"
2873
- }, props), _ref$3, _ref2);
3187
+ }, props), _ref$5, _ref2);
2874
3188
  }
2875
3189
 
2876
- function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
3190
+ function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
2877
3191
 
2878
- var _ref$2 = /*#__PURE__*/React.createElement("path", {
3192
+ var _ref$4 = /*#__PURE__*/React.createElement("path", {
2879
3193
  fill: "none",
2880
3194
  stroke: "currentColor",
2881
3195
  strokeLinecap: "round",
@@ -2883,6 +3197,45 @@ var _ref$2 = /*#__PURE__*/React.createElement("path", {
2883
3197
  });
2884
3198
 
2885
3199
  function SvgFileDocumentStroke(props) {
3200
+ return /*#__PURE__*/React.createElement("svg", _extends$4({
3201
+ xmlns: "http://www.w3.org/2000/svg",
3202
+ width: 16,
3203
+ height: 16,
3204
+ viewBox: "0 0 16 16",
3205
+ focusable: "false",
3206
+ role: "presentation"
3207
+ }, props), _ref$4);
3208
+ }
3209
+
3210
+ function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
3211
+
3212
+ var _ref$3 = /*#__PURE__*/React.createElement("path", {
3213
+ fill: "none",
3214
+ stroke: "currentColor",
3215
+ strokeLinecap: "round",
3216
+ d: "M4.5 7.5h2m-2 2h2m-2 2h2m2-4h3m-3 2h3m-3 2h3m3-7.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"
3217
+ });
3218
+
3219
+ function SvgFileSpreadsheetStroke(props) {
3220
+ return /*#__PURE__*/React.createElement("svg", _extends$3({
3221
+ xmlns: "http://www.w3.org/2000/svg",
3222
+ width: 16,
3223
+ height: 16,
3224
+ viewBox: "0 0 16 16",
3225
+ focusable: "false",
3226
+ role: "presentation"
3227
+ }, props), _ref$3);
3228
+ }
3229
+
3230
+ function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
3231
+
3232
+ var _ref$2 = /*#__PURE__*/React.createElement("path", {
3233
+ fill: "none",
3234
+ stroke: "currentColor",
3235
+ d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5M7 9.5h4c.28 0 .5.22.5.5v3c0 .28-.22.5-.5.5H7c-.28 0-.5-.22-.5-.5v-3c0-.28.22-.5.5-.5zm-.5 2H5c-.28 0-.5-.22-.5-.5V8c0-.28.22-.5.5-.5h4c.28 0 .5.22.5.5v1.5"
3236
+ });
3237
+
3238
+ function SvgFilePresentationStroke(props) {
2886
3239
  return /*#__PURE__*/React.createElement("svg", _extends$2({
2887
3240
  xmlns: "http://www.w3.org/2000/svg",
2888
3241
  width: 16,
@@ -2898,11 +3251,10 @@ function _extends$1() { _extends$1 = Object.assign || function (target) { for (v
2898
3251
  var _ref$1 = /*#__PURE__*/React.createElement("path", {
2899
3252
  fill: "none",
2900
3253
  stroke: "currentColor",
2901
- strokeLinecap: "round",
2902
- d: "M4.5 7.5h2m-2 2h2m-2 2h2m2-4h3m-3 2h3m-3 2h3m3-7.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"
3254
+ d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"
2903
3255
  });
2904
3256
 
2905
- function SvgFileSpreadsheetStroke(props) {
3257
+ function SvgFileGenericStroke(props) {
2906
3258
  return /*#__PURE__*/React.createElement("svg", _extends$1({
2907
3259
  xmlns: "http://www.w3.org/2000/svg",
2908
3260
  width: 16,
@@ -2918,10 +3270,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
2918
3270
  var _ref = /*#__PURE__*/React.createElement("path", {
2919
3271
  fill: "none",
2920
3272
  stroke: "currentColor",
2921
- d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5M7 9.5h4c.28 0 .5.22.5.5v3c0 .28-.22.5-.5.5H7c-.28 0-.5-.22-.5-.5v-3c0-.28.22-.5.5-.5zm-.5 2H5c-.28 0-.5-.22-.5-.5V8c0-.28.22-.5.5-.5h4c.28 0 .5.22.5.5v1.5"
3273
+ strokeLinecap: "round",
3274
+ d: "M14.5 4.205V15a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h8.853a.5.5 0 01.356.15l3.148 3.204a.5.5 0 01.143.35zM10.5.5V4a.5.5 0 00.5.5h3.5m-9 8l5-5m0 5l-5-5"
2922
3275
  });
2923
3276
 
2924
- function SvgFilePresentationStroke(props) {
3277
+ function SvgFileErrorStroke(props) {
2925
3278
  return /*#__PURE__*/React.createElement("svg", _extends({
2926
3279
  xmlns: "http://www.w3.org/2000/svg",
2927
3280
  width: 16,
@@ -2940,36 +3293,72 @@ var FileType;
2940
3293
  FileType["document"] = "document";
2941
3294
  FileType["spreadsheet"] = "spreadsheet";
2942
3295
  FileType["presentation"] = "presentation";
3296
+ FileType["generic"] = "generic";
2943
3297
  })(FileType || (FileType = {}));
3298
+ var ValidationType;
3299
+ (function (ValidationType) {
3300
+ ValidationType["success"] = "success";
3301
+ ValidationType["error"] = "error";
3302
+ })(ValidationType || (ValidationType = {}));
2944
3303
  var ARRAY_FILE_TYPE = _toConsumableArray(Object.values(FileType));
2945
- var fileIcons = {
3304
+ var fileIconsDefault = {
2946
3305
  pdf: React__default.createElement(SvgFilePdfStroke, null),
2947
3306
  zip: React__default.createElement(SvgFileZipStroke, null),
2948
3307
  image: React__default.createElement(SvgFileImageStroke, null),
2949
3308
  document: React__default.createElement(SvgFileDocumentStroke, null),
2950
3309
  spreadsheet: React__default.createElement(SvgFileSpreadsheetStroke, null),
2951
- presentation: React__default.createElement(SvgFilePresentationStroke, null)
2952
- };
2953
-
2954
- var _excluded$1 = ["children", "type", "focusInset"];
3310
+ presentation: React__default.createElement(SvgFilePresentationStroke, null),
3311
+ generic: React__default.createElement(SvgFileGenericStroke, null),
3312
+ success: React__default.createElement(SvgCheckCircleStroke$1, null),
3313
+ error: React__default.createElement(SvgFileErrorStroke, null)
3314
+ };
3315
+ var fileIconsCompact = {
3316
+ pdf: React__default.createElement(SvgFilePdfStroke$1, null),
3317
+ zip: React__default.createElement(SvgFileZipStroke$1, null),
3318
+ image: React__default.createElement(SvgFileImageStroke$1, null),
3319
+ document: React__default.createElement(SvgFileDocumentStroke$1, null),
3320
+ spreadsheet: React__default.createElement(SvgFileSpreadsheetStroke$1, null),
3321
+ presentation: React__default.createElement(SvgFilePresentationStroke$1, null),
3322
+ generic: React__default.createElement(SvgFileGenericStroke$1, null),
3323
+ success: React__default.createElement(SvgCheckCircleStroke, null),
3324
+ error: React__default.createElement(SvgFileErrorStroke$1, null)
3325
+ };
3326
+
3327
+ var _excluded$1 = ["children", "type", "isCompact", "focusInset", "validation"];
2955
3328
  var File = forwardRef(function (_ref, ref) {
2956
3329
  var children = _ref.children,
2957
3330
  type = _ref.type,
3331
+ isCompact = _ref.isCompact,
2958
3332
  focusInset = _ref.focusInset,
3333
+ validation = _ref.validation,
2959
3334
  props = _objectWithoutProperties(_ref, _excluded$1);
2960
- return React__default.createElement(StyledFile, _extends$f({}, props, {
3335
+ var fileContextValue = useMemo(function () {
3336
+ return {
3337
+ isCompact: isCompact
3338
+ };
3339
+ }, [isCompact]);
3340
+ var validationType = validation || type;
3341
+ return React__default.createElement(FileContext.Provider, {
3342
+ value: fileContextValue
3343
+ }, React__default.createElement(StyledFile, _extends$t({}, props, {
3344
+ isCompact: isCompact,
2961
3345
  focusInset: focusInset,
3346
+ validation: validation,
2962
3347
  ref: ref
2963
- }), type && React__default.createElement(StyledFileIcon, null, fileIcons[type]), Children.map(children, function (child) {
3348
+ }), validationType && React__default.createElement(StyledFileIcon, {
3349
+ isCompact: isCompact
3350
+ }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), Children.map(children, function (child) {
2964
3351
  return typeof child === 'string' ? React__default.createElement("span", null, child) : child;
2965
- }));
3352
+ })));
2966
3353
  });
2967
3354
  File.displayName = 'File';
2968
3355
  File.Close = Close;
3356
+ File.Delete = Delete;
2969
3357
  File.propTypes = {
2970
3358
  focusInset: PropTypes.bool,
2971
3359
  isCompact: PropTypes.bool,
2972
- type: PropTypes.oneOf(ARRAY_FILE_TYPE)
3360
+ type: PropTypes.oneOf(ARRAY_FILE_TYPE),
3361
+ validation: PropTypes.oneOf(['success', 'error'])
2973
3362
  };
2974
3363
 
2975
3364
  var _excluded = ["start", "end", "disabled", "isCompact", "isBare", "focusInset", "readOnly", "validation", "wrapperProps", "wrapperRef", "onSelect"],
@@ -3035,7 +3424,7 @@ var MediaInput = React__default.forwardRef(function (_ref, ref) {
3035
3424
  });
3036
3425
  isLabelHovered = fieldContext.isLabelHovered;
3037
3426
  }
3038
- return React__default.createElement(FauxInput, _extends$f({
3427
+ return React__default.createElement(FauxInput, _extends$t({
3039
3428
  tabIndex: null,
3040
3429
  onClick: onFauxInputClickHandler,
3041
3430
  onFocus: onFauxInputFocusHandler,