@zendeskgarden/react-forms 9.0.0-next.12 → 9.0.0-next.14

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 (89) hide show
  1. package/dist/esm/elements/Select.js +1 -0
  2. package/dist/esm/elements/common/Label.js +1 -1
  3. package/dist/esm/elements/faux-input/components/EndIcon.js +4 -0
  4. package/dist/esm/elements/faux-input/components/StartIcon.js +4 -0
  5. package/dist/esm/elements/file-list/components/File.js +2 -1
  6. package/dist/esm/elements/tiles/components/Tile.js +1 -3
  7. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/check-circle-stroke.svg.js +1 -1
  8. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/check-sm-fill.svg.js +1 -1
  9. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/circle-sm-fill.svg.js +1 -1
  10. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/dash-fill.svg.js +1 -1
  11. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-document-stroke.svg.js +1 -1
  12. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-error-stroke.svg.js +1 -1
  13. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-generic-stroke.svg.js +1 -1
  14. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-image-stroke.svg.js +1 -1
  15. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-pdf-stroke.svg.js +1 -1
  16. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-presentation-stroke.svg.js +1 -1
  17. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-spreadsheet-stroke.svg.js +1 -1
  18. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-zip-stroke.svg.js +1 -1
  19. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/trash-stroke.svg.js +1 -1
  20. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js +1 -1
  21. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js +1 -1
  22. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js +1 -1
  23. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js +1 -1
  24. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js +1 -1
  25. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/circle-sm-fill.svg.js +1 -1
  26. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-document-stroke.svg.js +1 -1
  27. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-error-stroke.svg.js +1 -1
  28. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-generic-stroke.svg.js +1 -1
  29. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-image-stroke.svg.js +1 -1
  30. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-pdf-stroke.svg.js +1 -1
  31. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-presentation-stroke.svg.js +1 -1
  32. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-spreadsheet-stroke.svg.js +1 -1
  33. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-zip-stroke.svg.js +1 -1
  34. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/trash-stroke.svg.js +1 -1
  35. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js +1 -1
  36. package/dist/esm/styled/checkbox/StyledCheckHint.js +1 -1
  37. package/dist/esm/styled/checkbox/StyledCheckInput.js +55 -11
  38. package/dist/esm/styled/checkbox/StyledCheckLabel.js +1 -1
  39. package/dist/esm/styled/checkbox/StyledCheckMessage.js +1 -1
  40. package/dist/esm/styled/checkbox/StyledCheckSvg.js +1 -1
  41. package/dist/esm/styled/checkbox/StyledDashSvg.js +1 -1
  42. package/dist/esm/styled/common/StyledField.js +1 -1
  43. package/dist/esm/styled/common/StyledFieldset.js +1 -1
  44. package/dist/esm/styled/common/StyledHint.js +6 -3
  45. package/dist/esm/styled/common/StyledLabel.js +6 -3
  46. package/dist/esm/styled/common/StyledLegend.js +1 -1
  47. package/dist/esm/styled/common/StyledMessage.js +33 -16
  48. package/dist/esm/styled/common/StyledMessageIcon.js +1 -1
  49. package/dist/esm/styled/file-list/StyledFile.js +49 -28
  50. package/dist/esm/styled/file-list/StyledFileClose.js +6 -3
  51. package/dist/esm/styled/file-list/StyledFileDelete.js +6 -3
  52. package/dist/esm/styled/file-list/StyledFileIcon.js +24 -4
  53. package/dist/esm/styled/file-list/StyledFileList.js +1 -1
  54. package/dist/esm/styled/file-list/StyledFileListItem.js +1 -1
  55. package/dist/esm/styled/file-upload/StyledFileUpload.js +89 -20
  56. package/dist/esm/styled/input-group/StyledInputGroup.js +1 -1
  57. package/dist/esm/styled/radio/StyledRadioHint.js +1 -1
  58. package/dist/esm/styled/radio/StyledRadioInput.js +85 -24
  59. package/dist/esm/styled/radio/StyledRadioLabel.js +1 -1
  60. package/dist/esm/styled/radio/StyledRadioMessage.js +1 -1
  61. package/dist/esm/styled/radio/StyledRadioSvg.js +1 -1
  62. package/dist/esm/styled/range/StyledRangeInput.js +83 -26
  63. package/dist/esm/styled/select/StyledSelect.js +35 -11
  64. package/dist/esm/styled/select/StyledSelectWrapper.js +11 -3
  65. package/dist/esm/styled/text/StyledTextFauxInput.js +31 -23
  66. package/dist/esm/styled/text/StyledTextInput.js +103 -58
  67. package/dist/esm/styled/text/StyledTextMediaFigure.js +35 -10
  68. package/dist/esm/styled/text/StyledTextMediaInput.js +1 -1
  69. package/dist/esm/styled/text/StyledTextarea.js +1 -1
  70. package/dist/esm/styled/tiles/StyledTile.js +93 -34
  71. package/dist/esm/styled/tiles/StyledTileDescription.js +13 -13
  72. package/dist/esm/styled/tiles/StyledTileIcon.js +52 -13
  73. package/dist/esm/styled/tiles/StyledTileInput.js +1 -1
  74. package/dist/esm/styled/tiles/StyledTileLabel.js +13 -15
  75. package/dist/esm/styled/toggle/StyledToggleHint.js +1 -1
  76. package/dist/esm/styled/toggle/StyledToggleInput.js +38 -13
  77. package/dist/esm/styled/toggle/StyledToggleLabel.js +1 -1
  78. package/dist/esm/styled/toggle/StyledToggleMessage.js +1 -1
  79. package/dist/esm/styled/toggle/StyledToggleSvg.js +1 -1
  80. package/dist/index.cjs.js +953 -415
  81. package/dist/typings/elements/faux-input/components/EndIcon.d.ts +1 -1
  82. package/dist/typings/elements/faux-input/components/StartIcon.d.ts +1 -1
  83. package/dist/typings/styled/file-list/StyledFileIcon.d.ts +7 -1
  84. package/dist/typings/styled/select/StyledSelect.d.ts +0 -3
  85. package/dist/typings/styled/select/StyledSelectWrapper.d.ts +3 -1
  86. package/dist/typings/styled/text/StyledTextFauxInput.d.ts +0 -4
  87. package/dist/typings/styled/tiles/StyledTile.d.ts +4 -7
  88. package/dist/typings/types/index.d.ts +3 -3
  89. package/package.json +5 -5
@@ -80,6 +80,7 @@ const Select = React__default.forwardRef((_ref, ref) => {
80
80
  return React__default.createElement(StyledSelectWrapper, {
81
81
  isCompact: isCompact,
82
82
  isBare: isBare,
83
+ isDisabled: disabled,
83
84
  validation: validation,
84
85
  focusInset: focusInset
85
86
  }, React__default.createElement(StyledSelect, combinedProps), !isBare && React__default.createElement(FauxInput.EndIcon, {
@@ -96,7 +96,7 @@ const Label = React__default.forwardRef((props, ref) => {
96
96
  }, combinedProps), React__default.createElement(StyledRadioSvg, null), props.children);
97
97
  } else if (type === 'checkbox') {
98
98
  const onLabelSelect = e => {
99
- const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
99
+ const isFirefox = navigator?.userAgent.toLowerCase().indexOf('firefox') > -1;
100
100
  if (fieldContext && isFirefox && e.target instanceof Element) {
101
101
  const inputId = e.target.getAttribute('for');
102
102
  if (!inputId) return;
@@ -53,12 +53,16 @@ import '../../../styled/tiles/StyledTileLabel.js';
53
53
  const EndIconComponent = _ref => {
54
54
  let {
55
55
  isDisabled,
56
+ isFocused,
57
+ isHovered,
56
58
  isRotated,
57
59
  ...props
58
60
  } = _ref;
59
61
  return React__default.createElement(StyledTextMediaFigure, Object.assign({
60
62
  $position: "end",
61
63
  $isDisabled: isDisabled,
64
+ $isFocused: isFocused,
65
+ $isHovered: isHovered,
62
66
  $isRotated: isRotated
63
67
  }, props));
64
68
  };
@@ -53,12 +53,16 @@ import '../../../styled/tiles/StyledTileLabel.js';
53
53
  const StartIconComponent = _ref => {
54
54
  let {
55
55
  isDisabled,
56
+ isFocused,
57
+ isHovered,
56
58
  isRotated,
57
59
  ...props
58
60
  } = _ref;
59
61
  return React__default.createElement(StyledTextMediaFigure, Object.assign({
60
62
  $position: "start",
61
63
  $isDisabled: isDisabled,
64
+ $isFocused: isFocused,
65
+ $isHovered: isHovered,
62
66
  $isRotated: isRotated
63
67
  }, props));
64
68
  };
@@ -77,7 +77,8 @@ const FileComponent = forwardRef((_ref, ref) => {
77
77
  validation: validation,
78
78
  ref: ref
79
79
  }), validationType && React__default.createElement(StyledFileIcon, {
80
- $isCompact: isCompact
80
+ $isCompact: isCompact,
81
+ $validation: validation
81
82
  }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), Children.map(children, child => typeof child === 'string' ? React__default.createElement("span", null, child) : child)));
82
83
  });
83
84
  FileComponent.displayName = 'File';
@@ -71,9 +71,7 @@ const TileComponent = React__default.forwardRef((_ref, ref) => {
71
71
  }
72
72
  return React__default.createElement(StyledTile, Object.assign({
73
73
  ref: ref,
74
- "aria-disabled": disabled,
75
- isDisabled: disabled,
76
- isSelected: tilesContext && tilesContext.value === value
74
+ "aria-disabled": disabled
77
75
  }, props), children, React__default.createElement(StyledTileInput, Object.assign({}, inputProps, {
78
76
  disabled: disabled,
79
77
  value: value,
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _g;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgCheckSmFill = function SvgCheckSmFill(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _circle;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgCircleSmFill = function SvgCircleSmFill(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgDashFill = function SvgDashFill(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileGenericStroke = function SvgFileGenericStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path, _circle;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileImageStroke = function SvgFileImageStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path, _rect;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFilePdfStroke = function SvgFilePdfStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileZipStroke = function SvgFileZipStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgTrashStroke = function SvgTrashStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgXStroke = function SvgXStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _g, _circle;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path, _circle;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _g;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _circle;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgCircleSmFill = function SvgCircleSmFill(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileGenericStroke = function SvgFileGenericStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path, _circle;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileImageStroke = function SvgFileImageStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path, _rect;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFilePdfStroke = function SvgFilePdfStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgFileZipStroke = function SvgFileZipStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgTrashStroke = function SvgTrashStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -7,7 +7,7 @@
7
7
  import * as React from 'react';
8
8
 
9
9
  var _path;
10
- function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
11
  var SvgXStroke = function SvgXStroke(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  xmlns: "http://www.w3.org/2000/svg",
@@ -11,7 +11,7 @@ import { StyledRadioHint } from '../radio/StyledRadioHint.js';
11
11
  const COMPONENT_ID = 'forms.checkbox_hint';
12
12
  const StyledCheckHint = styled(StyledRadioHint).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.0.0-next.12'
14
+ 'data-garden-version': '9.0.0-next.14'
15
15
  }).withConfig({
16
16
  displayName: "StyledCheckHint",
17
17
  componentId: "sc-1kl8e8c-0"
@@ -5,28 +5,72 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
9
9
  import { StyledRadioInput } from '../radio/StyledRadioInput.js';
10
10
  import { StyledCheckLabel } from './StyledCheckLabel.js';
11
11
 
12
12
  const COMPONENT_ID = 'forms.checkbox';
13
- const colorStyles = props => {
14
- const SHADE = 600;
15
- const indeterminateBorderColor = getColorV8('primaryHue', SHADE, props.theme);
16
- const indeterminateBackgroundColor = indeterminateBorderColor;
17
- const indeterminateActiveBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
18
- const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
19
- const indeterminateDisabledBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
20
- 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);
13
+ const colorStyles = _ref => {
14
+ let {
15
+ theme
16
+ } = _ref;
17
+ const backgroundOptions = {
18
+ theme,
19
+ variable: 'background.primaryEmphasis'
20
+ };
21
+ const borderOptions = {
22
+ theme,
23
+ variable: 'border.primaryEmphasis'
24
+ };
25
+ const indeterminateBackgroundColor = getColor(backgroundOptions);
26
+ const indeterminateBorderColor = getColor(borderOptions);
27
+ const offset100 = {
28
+ dark: {
29
+ offset: -100
30
+ },
31
+ light: {
32
+ offset: 100
33
+ }
34
+ };
35
+ const offset200 = {
36
+ dark: {
37
+ offset: -200
38
+ },
39
+ light: {
40
+ offset: 200
41
+ }
42
+ };
43
+ const indeterminateHoverBackgroundColor = getColor({
44
+ ...backgroundOptions,
45
+ ...offset100
46
+ });
47
+ const indeterminateHoverBorderColor = getColor({
48
+ ...borderOptions,
49
+ ...offset100
50
+ });
51
+ const indeterminateActiveBackgroundColor = getColor({
52
+ ...backgroundOptions,
53
+ ...offset200
54
+ });
55
+ const indeterminateActiveBorderColor = getColor({
56
+ ...borderOptions,
57
+ ...offset200
58
+ });
59
+ const indeterminateDisabledBackgroundColor = getColor({
60
+ theme,
61
+ variable: 'background.disabled',
62
+ transparency: theme.opacity[300]
63
+ });
64
+ return css(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":hover::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, indeterminateHoverBorderColor, indeterminateHoverBackgroundColor, StyledCheckLabel, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel, indeterminateDisabledBackgroundColor);
21
65
  };
22
66
  const StyledCheckInput = styled(StyledRadioInput).attrs({
23
67
  'data-garden-id': COMPONENT_ID,
24
- 'data-garden-version': '9.0.0-next.12',
68
+ 'data-garden-version': '9.0.0-next.14',
25
69
  type: 'checkbox'
26
70
  }).withConfig({
27
71
  displayName: "StyledCheckInput",
28
72
  componentId: "sc-176jxxe-0"
29
- })(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
73
+ })(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
30
74
  StyledCheckInput.defaultProps = {
31
75
  theme: DEFAULT_THEME
32
76
  };
@@ -11,7 +11,7 @@ import { StyledRadioLabel } from '../radio/StyledRadioLabel.js';
11
11
  const COMPONENT_ID = 'forms.checkbox_label';
12
12
  const StyledCheckLabel = styled(StyledRadioLabel).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.0.0-next.12'
14
+ 'data-garden-version': '9.0.0-next.14'
15
15
  }).withConfig({
16
16
  displayName: "StyledCheckLabel",
17
17
  componentId: "sc-x7nr1-0"
@@ -11,7 +11,7 @@ import { StyledRadioMessage } from '../radio/StyledRadioMessage.js';
11
11
  const COMPONENT_ID = 'forms.checkbox_message';
12
12
  const StyledCheckMessage = styled(StyledRadioMessage).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.0.0-next.12'
14
+ 'data-garden-version': '9.0.0-next.14'
15
15
  }).withConfig({
16
16
  displayName: "StyledCheckMessage",
17
17
  componentId: "sc-s4p6kd-0"
@@ -13,7 +13,7 @@ import { StyledCheckLabel } from './StyledCheckLabel.js';
13
13
  const COMPONENT_ID = 'forms.check_svg';
14
14
  const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
15
15
  'data-garden-id': COMPONENT_ID,
16
- 'data-garden-version': '9.0.0-next.12'
16
+ 'data-garden-version': '9.0.0-next.14'
17
17
  }).withConfig({
18
18
  displayName: "StyledCheckSvg",
19
19
  componentId: "sc-fvxetk-0"
@@ -13,7 +13,7 @@ import { StyledCheckLabel } from './StyledCheckLabel.js';
13
13
  const COMPONENT_ID = 'forms.dash_svg';
14
14
  const StyledDashSvg = styled(SvgDashFill).attrs({
15
15
  'data-garden-id': COMPONENT_ID,
16
- 'data-garden-version': '9.0.0-next.12'
16
+ 'data-garden-version': '9.0.0-next.14'
17
17
  }).withConfig({
18
18
  displayName: "StyledDashSvg",
19
19
  componentId: "sc-z3vq71-0"
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'forms.field';
11
11
  const StyledField = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.12'
13
+ 'data-garden-version': '9.0.0-next.14'
14
14
  }).withConfig({
15
15
  displayName: "StyledField",
16
16
  componentId: "sc-12gzfsu-0"
@@ -12,7 +12,7 @@ const COMPONENT_ID = 'forms.fieldset';
12
12
  const StyledFieldset = styled(StyledField).attrs({
13
13
  as: 'fieldset',
14
14
  'data-garden-id': COMPONENT_ID,
15
- 'data-garden-version': '9.0.0-next.12'
15
+ 'data-garden-version': '9.0.0-next.14'
16
16
  }).withConfig({
17
17
  displayName: "StyledFieldset",
18
18
  componentId: "sc-1vr4mxv-0"
@@ -5,16 +5,19 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
9
 
10
10
  const COMPONENT_ID = 'forms.input_hint';
11
11
  const StyledHint = styled.div.attrs(props => ({
12
12
  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
13
- 'data-garden-version': props['data-garden-version'] || '9.0.0-next.12'
13
+ 'data-garden-version': props['data-garden-version'] || '9.0.0-next.14'
14
14
  })).withConfig({
15
15
  displayName: "StyledHint",
16
16
  componentId: "sc-17c2wu8-0"
17
- })(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
17
+ })(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor({
18
+ theme: props.theme,
19
+ variable: 'foreground.subtle'
20
+ }), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
18
21
  StyledHint.defaultProps = {
19
22
  theme: DEFAULT_THEME
20
23
  };