@commercetools-uikit/checkbox-input 12.2.1 → 12.2.5

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 (15) hide show
  1. package/README.md +1 -2
  2. package/dist/commercetools-uikit-checkbox-input.cjs.dev.js +339 -271
  3. package/dist/commercetools-uikit-checkbox-input.cjs.prod.js +326 -240
  4. package/dist/commercetools-uikit-checkbox-input.esm.js +314 -245
  5. package/dist/declarations/src/checkbox-input.d.ts +20 -20
  6. package/dist/declarations/src/checkbox-input.styles.d.ts +4 -4
  7. package/dist/declarations/src/checkbox.d.ts +9 -10
  8. package/dist/declarations/src/icons/generated/CheckedReact.d.ts +14 -12
  9. package/dist/declarations/src/icons/generated/IndeterminateReact.d.ts +14 -12
  10. package/dist/declarations/src/icons/generated/UncheckedReact.d.ts +14 -12
  11. package/dist/declarations/src/icons/generated/index.d.ts +3 -3
  12. package/dist/declarations/src/icons/index.d.ts +1 -1
  13. package/dist/declarations/src/index.d.ts +2 -2
  14. package/dist/declarations/src/version.d.ts +2 -2
  15. package/package.json +18 -13
package/dist/commercetools-uikit-checkbox-input.cjs.prod.js CHANGED
@@ -2,14 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _extends = require('@babel/runtime-corejs3/helpers/extends');
6
- var _styled = require('@emotion/styled/base');
7
- require('prop-types');
8
- var React = require('react');
9
- var react = require('@emotion/react');
10
- var designSystem = require('@commercetools-uikit/design-system');
11
- var utils = require('@commercetools-uikit/utils');
12
- var Text = require('@commercetools-uikit/text');
13
5
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
14
6
  var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
15
7
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -19,15 +11,19 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
19
11
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
20
12
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
21
13
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
+ var _styled = require('@emotion/styled/base');
15
+ require('prop-types');
16
+ var react$1 = require('react');
17
+ var react = require('@emotion/react');
18
+ var designSystem = require('@commercetools-uikit/design-system');
19
+ var utils = require('@commercetools-uikit/utils');
20
+ var Text = require('@commercetools-uikit/text');
22
21
  var inputUtils = require('@commercetools-uikit/input-utils');
22
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
23
23
  var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
24
- var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
25
24
 
26
25
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
27
26
 
28
- var _styled__default = /*#__PURE__*/_interopDefault(_styled);
29
- var React__default = /*#__PURE__*/_interopDefault(React);
30
- var Text__default = /*#__PURE__*/_interopDefault(Text);
31
27
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
32
28
  var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
33
29
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -36,19 +32,20 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
36
32
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
37
33
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
38
34
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
35
+ var _styled__default = /*#__PURE__*/_interopDefault(_styled);
36
+ var Text__default = /*#__PURE__*/_interopDefault(Text);
39
37
  var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
40
- var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
41
38
 
42
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
39
+ function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
43
40
 
44
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
45
- var iconSizes = {
41
+ function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$5(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$5(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
42
+ var iconSizes$2 = {
46
43
  small: 12,
47
44
  medium: 16,
48
45
  big: 24
49
46
  };
50
47
 
51
- var getSizeDimensions = function getSizeDimensions(size) {
48
+ var getSizeDimensions$2 = function getSizeDimensions(size) {
52
49
  switch (size) {
53
50
  case 'scale':
54
51
  return {
@@ -60,43 +57,72 @@ var getSizeDimensions = function getSizeDimensions(size) {
60
57
  case 'medium':
61
58
  case 'big':
62
59
  return {
63
- width: "".concat(iconSizes[size], "px"),
64
- height: "".concat(iconSizes[size], "px")
60
+ width: "".concat(iconSizes$2[size], "px"),
61
+ height: "".concat(iconSizes$2[size], "px")
65
62
  };
66
63
 
67
64
  default:
68
65
  return {
69
- width: "".concat(iconSizes.big, "px"),
70
- height: "".concat(iconSizes.big, "px")
66
+ width: "".concat(iconSizes$2.big, "px"),
67
+ height: "".concat(iconSizes$2.big, "px")
71
68
  };
72
69
  }
73
70
  };
74
71
 
75
- var getSizeStyle = function getSizeStyle(size) {
72
+ var getSizeStyle$2 = function getSizeStyle(size) {
76
73
  var _context, _context2;
77
74
 
78
- var dimensions = getSizeDimensions(size);
75
+ var dimensions = getSizeDimensions$2(size);
79
76
 
80
77
  switch (size) {
81
78
  case 'scale':
82
- return _concatInstanceProperty__default['default'](_context = "\n &:not(:root) {\n width: ".concat(dimensions.width, ";\n height: ")).call(_context, dimensions.height, ";\n }\n ");
79
+ return _concatInstanceProperty__default["default"](_context = "\n &:not(:root) {\n width: ".concat(dimensions.width, ";\n height: ")).call(_context, dimensions.height, ";\n }\n ");
83
80
 
84
81
  default:
85
- return _concatInstanceProperty__default['default'](_context2 = "\n width: ".concat(dimensions.width, ";\n height: ")).call(_context2, dimensions.height, ";\n ");
82
+ return _concatInstanceProperty__default["default"](_context2 = "\n width: ".concat(dimensions.width, ";\n height: ")).call(_context2, dimensions.height, ";\n ");
86
83
  }
87
84
  };
88
85
 
89
- var capitalize = function capitalize(value) {
90
- return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
91
- };
92
-
93
- var getColor = function getColor(color, theme) {
86
+ var getColor$2 = function getColor(color, theme) {
94
87
  if (!color) return 'inherit';
95
88
 
96
- var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme); // @ts-expect-error
89
+ var overwrittenVars = _objectSpread$5(_objectSpread$5({}, designSystem.customProperties), theme);
90
+
91
+ var iconColor;
92
+
93
+ switch (color) {
94
+ case 'solid':
95
+ iconColor = overwrittenVars.colorSolid;
96
+ break;
97
+
98
+ case 'neutral60':
99
+ iconColor = overwrittenVars.colorNeutral60;
100
+ break;
101
+
102
+ case 'surface':
103
+ iconColor = overwrittenVars.colorSurface;
104
+ break;
105
+
106
+ case 'info':
107
+ iconColor = overwrittenVars.colorInfo;
108
+ break;
109
+
110
+ case 'primary':
111
+ iconColor = overwrittenVars.colorPrimary;
112
+ break;
113
+
114
+ case 'primary40':
115
+ iconColor = overwrittenVars.colorPrimary40;
116
+ break;
97
117
 
118
+ case 'warning':
119
+ iconColor = overwrittenVars.colorWarning;
120
+ break;
98
121
 
99
- var iconColor = overwrittenVars["color".concat(capitalize(color))];
122
+ case 'error':
123
+ iconColor = overwrittenVars.colorError;
124
+ break;
125
+ }
100
126
 
101
127
  if (!iconColor) {
102
128
  return 'inherit';
@@ -105,70 +131,67 @@ var getColor = function getColor(color, theme) {
105
131
  return iconColor;
106
132
  };
107
133
 
108
- var getIconStyles = function getIconStyles(props, theme) {
109
- return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor(props.color, theme), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ));
134
+ var getIconStyles$2 = function getIconStyles(props, theme) {
135
+ return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$2(props.color, theme), ";}&,image{", getSizeStyle$2(props.size), ";}flex-shrink:0;" + ("" ), "" );
110
136
  };
111
137
 
112
138
  var SvgChecked = function SvgChecked(props) {
113
- return react.jsx("svg", _extends({
139
+ return jsxRuntime.jsx("svg", _objectSpread$5(_objectSpread$5({
114
140
  width: 16,
115
141
  height: 16,
116
142
  viewBox: "0 0 16 16",
117
143
  xmlns: "http://www.w3.org/2000/svg"
118
- }, props), react.jsx("g", {
119
- id: "checked_react_svg__ATOM---Checkboxes---Radio-buttons",
120
- stroke: "none",
121
- strokeWidth: 1,
122
- fillRule: "evenodd"
123
- }, react.jsx("g", {
124
- id: "checked_react_svg__Checkboxes-Radio-Buttons",
125
- transform: "translate(-177 -725)"
126
- }, react.jsx("g", {
127
- id: "checked_react_svg__checkbox-active-default",
128
- transform: "translate(177 724)"
129
- }, react.jsx("rect", {
130
- id: "checked_react_svg__background",
131
- fill: "#FFF",
132
- x: 0,
133
- y: 1,
134
- width: 16,
135
- height: 16,
136
- rx: 4
137
- }), react.jsx("g", {
138
- id: "checked_react_svg__borderAndContent",
139
- transform: "translate(0 .5)"
140
- }, react.jsx("rect", {
141
- id: "checked_react_svg__border",
142
- stroke: "#AFAFAF",
143
- x: 0.5,
144
- y: 1,
145
- width: 15,
146
- height: 15,
147
- rx: 4
148
- }), react.jsx("path", {
149
- d: "M12.918 3.759a.497.497 0 00-.7 0L6.011 9.966a.497.497 0 01-.7 0L3.78 8.438a.497.497 0 00-.699 0l-.938.938a.497.497 0 000 .7l3.167 3.165a.497.497 0 00.7 0l7.845-7.845a.496.496 0 000-.7l-.938-.937z",
150
- id: "checked_react_svg__content",
151
- fill: "#20AD92",
152
- fillRule: "nonzero"
153
- }))))));
144
+ }, props), {}, {
145
+ children: jsxRuntime.jsxs("g", {
146
+ transform: "translate(0 -1)",
147
+ fillRule: "evenodd",
148
+ children: [jsxRuntime.jsx("rect", {
149
+ fill: "#FFF",
150
+ y: 1,
151
+ width: 16,
152
+ height: 16,
153
+ rx: 4
154
+ }), jsxRuntime.jsxs("g", {
155
+ transform: "translate(0 .5)",
156
+ children: [jsxRuntime.jsx("rect", {
157
+ "data-style": "checkbox__border",
158
+ stroke: "#AFAFAF",
159
+ x: 0.5,
160
+ y: 1,
161
+ width: 15,
162
+ height: 15,
163
+ rx: 4
164
+ }), jsxRuntime.jsx("path", {
165
+ "data-style": "checkbox__content",
166
+ d: "M12.918 3.759a.497.497 0 00-.7 0L6.011 9.966a.497.497 0 01-.7 0L3.78 8.438a.497.497 0 00-.699 0l-.938.938a.497.497 0 000 .7l3.167 3.165a.497.497 0 00.7 0l7.845-7.845a.496.496 0 000-.7l-.938-.937z",
167
+ fill: "#20AD92",
168
+ fillRule: "nonzero"
169
+ })]
170
+ })]
171
+ })
172
+ }));
154
173
  };
155
174
 
156
- SvgChecked.propTypes = {};
157
175
  SvgChecked.displayName = 'SvgChecked';
158
176
 
159
177
  var CheckedIcon = function CheckedIcon(props) {
160
178
  var theme = react.useTheme();
161
- return react.jsx(SvgChecked, _extends({}, props, {
162
- css: getIconStyles(props, theme)
163
- }));
179
+ return jsxRuntime.jsx(react.ClassNames, {
180
+ children: function children(_ref) {
181
+ var createClass = _ref.css;
182
+ return jsxRuntime.jsx(SvgChecked, _objectSpread$5(_objectSpread$5({}, props), {}, {
183
+ className: createClass(getIconStyles$2(props, theme))
184
+ }));
185
+ }
186
+ });
164
187
  };
165
188
 
166
- CheckedIcon.propTypes = {};
167
189
  CheckedIcon.displayName = 'CheckedIcon';
190
+ var CheckedIcon$1 = CheckedIcon;
168
191
 
169
- function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
192
+ function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
170
193
 
171
- function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$1(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$1(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
194
+ function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$4(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$4(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
172
195
  var iconSizes$1 = {
173
196
  small: 12,
174
197
  medium: 16,
@@ -206,24 +229,53 @@ var getSizeStyle$1 = function getSizeStyle(size) {
206
229
 
207
230
  switch (size) {
208
231
  case 'scale':
209
- return _concatInstanceProperty__default['default'](_context = "\n &:not(:root) {\n width: ".concat(dimensions.width, ";\n height: ")).call(_context, dimensions.height, ";\n }\n ");
232
+ return _concatInstanceProperty__default["default"](_context = "\n &:not(:root) {\n width: ".concat(dimensions.width, ";\n height: ")).call(_context, dimensions.height, ";\n }\n ");
210
233
 
211
234
  default:
212
- return _concatInstanceProperty__default['default'](_context2 = "\n width: ".concat(dimensions.width, ";\n height: ")).call(_context2, dimensions.height, ";\n ");
235
+ return _concatInstanceProperty__default["default"](_context2 = "\n width: ".concat(dimensions.width, ";\n height: ")).call(_context2, dimensions.height, ";\n ");
213
236
  }
214
237
  };
215
238
 
216
- var capitalize$1 = function capitalize(value) {
217
- return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
218
- };
219
-
220
239
  var getColor$1 = function getColor(color, theme) {
221
240
  if (!color) return 'inherit';
222
241
 
223
- var overwrittenVars = _objectSpread$1(_objectSpread$1({}, designSystem.customProperties), theme); // @ts-expect-error
242
+ var overwrittenVars = _objectSpread$4(_objectSpread$4({}, designSystem.customProperties), theme);
243
+
244
+ var iconColor;
245
+
246
+ switch (color) {
247
+ case 'solid':
248
+ iconColor = overwrittenVars.colorSolid;
249
+ break;
250
+
251
+ case 'neutral60':
252
+ iconColor = overwrittenVars.colorNeutral60;
253
+ break;
224
254
 
255
+ case 'surface':
256
+ iconColor = overwrittenVars.colorSurface;
257
+ break;
225
258
 
226
- var iconColor = overwrittenVars["color".concat(capitalize$1(color))];
259
+ case 'info':
260
+ iconColor = overwrittenVars.colorInfo;
261
+ break;
262
+
263
+ case 'primary':
264
+ iconColor = overwrittenVars.colorPrimary;
265
+ break;
266
+
267
+ case 'primary40':
268
+ iconColor = overwrittenVars.colorPrimary40;
269
+ break;
270
+
271
+ case 'warning':
272
+ iconColor = overwrittenVars.colorWarning;
273
+ break;
274
+
275
+ case 'error':
276
+ iconColor = overwrittenVars.colorError;
277
+ break;
278
+ }
227
279
 
228
280
  if (!iconColor) {
229
281
  return 'inherit';
@@ -233,75 +285,72 @@ var getColor$1 = function getColor(color, theme) {
233
285
  };
234
286
 
235
287
  var getIconStyles$1 = function getIconStyles(props, theme) {
236
- return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$1(props.color, theme), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ));
288
+ return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$1(props.color, theme), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
237
289
  };
238
290
 
239
291
  var SvgIndeterminate = function SvgIndeterminate(props) {
240
- return react.jsx("svg", _extends({
292
+ return jsxRuntime.jsx("svg", _objectSpread$4(_objectSpread$4({
241
293
  width: 16,
242
294
  height: 16,
243
295
  viewBox: "0 0 16 16",
244
296
  xmlns: "http://www.w3.org/2000/svg"
245
- }, props), react.jsx("g", {
246
- id: "indeterminate_react_svg__ATOM---Checkboxes---Radio-buttons",
247
- stroke: "none",
248
- strokeWidth: 1,
249
- fillRule: "evenodd"
250
- }, react.jsx("g", {
251
- id: "indeterminate_react_svg__Checkboxes-Radio-Buttons",
252
- transform: "translate(-177 -909)"
253
- }, react.jsx("g", {
254
- id: "indeterminate_react_svg__checkbox-indeterminate-default",
255
- transform: "translate(177 908)"
256
- }, react.jsx("rect", {
257
- id: "indeterminate_react_svg__background",
258
- fill: "#FFF",
259
- x: 0,
260
- y: 1,
261
- width: 16,
262
- height: 16,
263
- rx: 4
264
- }), react.jsx("g", {
265
- id: "indeterminate_react_svg__borderAndContent",
266
- transform: "translate(0 .5)"
267
- }, react.jsx("rect", {
268
- id: "indeterminate_react_svg__border",
269
- stroke: "#AFAFAF",
270
- x: 0.5,
271
- y: 1,
272
- width: 15,
273
- height: 15,
274
- rx: 4
275
- }), react.jsx("path", {
276
- id: "indeterminate_react_svg__content",
277
- fill: "#00B6A1",
278
- d: "M3 7.5h10v2H3z"
279
- }))))));
297
+ }, props), {}, {
298
+ children: jsxRuntime.jsxs("g", {
299
+ transform: "translate(0 -1)",
300
+ fillRule: "evenodd",
301
+ children: [jsxRuntime.jsx("rect", {
302
+ fill: "#FFF",
303
+ y: 1,
304
+ width: 16,
305
+ height: 16,
306
+ rx: 4
307
+ }), jsxRuntime.jsxs("g", {
308
+ transform: "translate(0 .5)",
309
+ children: [jsxRuntime.jsx("rect", {
310
+ "data-style": "checkbox__border",
311
+ stroke: "#AFAFAF",
312
+ x: 0.5,
313
+ y: 1,
314
+ width: 15,
315
+ height: 15,
316
+ rx: 4
317
+ }), jsxRuntime.jsx("path", {
318
+ "data-style": "checkbox__content",
319
+ fill: "#00B6A1",
320
+ d: "M3 7.5h10v2H3z"
321
+ })]
322
+ })]
323
+ })
324
+ }));
280
325
  };
281
326
 
282
- SvgIndeterminate.propTypes = {};
283
327
  SvgIndeterminate.displayName = 'SvgIndeterminate';
284
328
 
285
329
  var IndeterminateIcon = function IndeterminateIcon(props) {
286
330
  var theme = react.useTheme();
287
- return react.jsx(SvgIndeterminate, _extends({}, props, {
288
- css: getIconStyles$1(props, theme)
289
- }));
331
+ return jsxRuntime.jsx(react.ClassNames, {
332
+ children: function children(_ref) {
333
+ var createClass = _ref.css;
334
+ return jsxRuntime.jsx(SvgIndeterminate, _objectSpread$4(_objectSpread$4({}, props), {}, {
335
+ className: createClass(getIconStyles$1(props, theme))
336
+ }));
337
+ }
338
+ });
290
339
  };
291
340
 
292
- IndeterminateIcon.propTypes = {};
293
341
  IndeterminateIcon.displayName = 'IndeterminateIcon';
342
+ var IndeterminateIcon$1 = IndeterminateIcon;
294
343
 
295
- function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
344
+ function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
296
345
 
297
- function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$2(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$2(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
298
- var iconSizes$2 = {
346
+ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$3(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
347
+ var iconSizes = {
299
348
  small: 12,
300
349
  medium: 16,
301
350
  big: 24
302
351
  };
303
352
 
304
- var getSizeDimensions$2 = function getSizeDimensions(size) {
353
+ var getSizeDimensions = function getSizeDimensions(size) {
305
354
  switch (size) {
306
355
  case 'scale':
307
356
  return {
@@ -313,43 +362,72 @@ var getSizeDimensions$2 = function getSizeDimensions(size) {
313
362
  case 'medium':
314
363
  case 'big':
315
364
  return {
316
- width: "".concat(iconSizes$2[size], "px"),
317
- height: "".concat(iconSizes$2[size], "px")
365
+ width: "".concat(iconSizes[size], "px"),
366
+ height: "".concat(iconSizes[size], "px")
318
367
  };
319
368
 
320
369
  default:
321
370
  return {
322
- width: "".concat(iconSizes$2.big, "px"),
323
- height: "".concat(iconSizes$2.big, "px")
371
+ width: "".concat(iconSizes.big, "px"),
372
+ height: "".concat(iconSizes.big, "px")
324
373
  };
325
374
  }
326
375
  };
327
376
 
328
- var getSizeStyle$2 = function getSizeStyle(size) {
377
+ var getSizeStyle = function getSizeStyle(size) {
329
378
  var _context, _context2;
330
379
 
331
- var dimensions = getSizeDimensions$2(size);
380
+ var dimensions = getSizeDimensions(size);
332
381
 
333
382
  switch (size) {
334
383
  case 'scale':
335
- return _concatInstanceProperty__default['default'](_context = "\n &:not(:root) {\n width: ".concat(dimensions.width, ";\n height: ")).call(_context, dimensions.height, ";\n }\n ");
384
+ return _concatInstanceProperty__default["default"](_context = "\n &:not(:root) {\n width: ".concat(dimensions.width, ";\n height: ")).call(_context, dimensions.height, ";\n }\n ");
336
385
 
337
386
  default:
338
- return _concatInstanceProperty__default['default'](_context2 = "\n width: ".concat(dimensions.width, ";\n height: ")).call(_context2, dimensions.height, ";\n ");
387
+ return _concatInstanceProperty__default["default"](_context2 = "\n width: ".concat(dimensions.width, ";\n height: ")).call(_context2, dimensions.height, ";\n ");
339
388
  }
340
389
  };
341
390
 
342
- var capitalize$2 = function capitalize(value) {
343
- return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
344
- };
345
-
346
- var getColor$2 = function getColor(color, theme) {
391
+ var getColor = function getColor(color, theme) {
347
392
  if (!color) return 'inherit';
348
393
 
349
- var overwrittenVars = _objectSpread$2(_objectSpread$2({}, designSystem.customProperties), theme); // @ts-expect-error
394
+ var overwrittenVars = _objectSpread$3(_objectSpread$3({}, designSystem.customProperties), theme);
395
+
396
+ var iconColor;
397
+
398
+ switch (color) {
399
+ case 'solid':
400
+ iconColor = overwrittenVars.colorSolid;
401
+ break;
402
+
403
+ case 'neutral60':
404
+ iconColor = overwrittenVars.colorNeutral60;
405
+ break;
350
406
 
407
+ case 'surface':
408
+ iconColor = overwrittenVars.colorSurface;
409
+ break;
351
410
 
352
- var iconColor = overwrittenVars["color".concat(capitalize$2(color))];
411
+ case 'info':
412
+ iconColor = overwrittenVars.colorInfo;
413
+ break;
414
+
415
+ case 'primary':
416
+ iconColor = overwrittenVars.colorPrimary;
417
+ break;
418
+
419
+ case 'primary40':
420
+ iconColor = overwrittenVars.colorPrimary40;
421
+ break;
422
+
423
+ case 'warning':
424
+ iconColor = overwrittenVars.colorWarning;
425
+ break;
426
+
427
+ case 'error':
428
+ iconColor = overwrittenVars.colorError;
429
+ break;
430
+ }
353
431
 
354
432
  if (!iconColor) {
355
433
  return 'inherit';
@@ -358,65 +436,60 @@ var getColor$2 = function getColor(color, theme) {
358
436
  return iconColor;
359
437
  };
360
438
 
361
- var getIconStyles$2 = function getIconStyles(props, theme) {
362
- return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$2(props.color, theme), ";}&,image{", getSizeStyle$2(props.size), ";}flex-shrink:0;" + ("" ));
439
+ var getIconStyles = function getIconStyles(props, theme) {
440
+ return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor(props.color, theme), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
363
441
  };
364
442
 
365
443
  var SvgUnchecked = function SvgUnchecked(props) {
366
- return react.jsx("svg", _extends({
444
+ return jsxRuntime.jsx("svg", _objectSpread$3(_objectSpread$3({
367
445
  width: 16,
368
446
  height: 16,
369
447
  viewBox: "0 0 16 16",
370
448
  xmlns: "http://www.w3.org/2000/svg"
371
- }, props), react.jsx("g", {
372
- id: "unchecked_react_svg__ATOM---Checkboxes---Radio-buttons",
373
- stroke: "none",
374
- strokeWidth: 1,
375
- fillRule: "evenodd"
376
- }, react.jsx("g", {
377
- id: "unchecked_react_svg__Checkboxes-Radio-Buttons",
378
- transform: "translate(-177 -645)"
379
- }, react.jsx("g", {
380
- id: "unchecked_react_svg__checkbox-empty-default",
381
- transform: "translate(177 644)"
382
- }, react.jsx("rect", {
383
- id: "unchecked_react_svg__background",
384
- fill: "#FFF",
385
- x: 0,
386
- y: 1,
387
- width: 16,
388
- height: 16,
389
- rx: 4
390
- }), react.jsx("g", {
391
- id: "unchecked_react_svg__borderAndContent",
392
- transform: "translate(0 .5)",
393
- stroke: "#AFAFAF"
394
- }, react.jsx("rect", {
395
- id: "unchecked_react_svg__border",
396
- x: 0.5,
397
- y: 1,
398
- width: 15,
399
- height: 15,
400
- rx: 4
401
- }))))));
449
+ }, props), {}, {
450
+ children: jsxRuntime.jsxs("g", {
451
+ transform: "translate(0 -1)",
452
+ fillRule: "evenodd",
453
+ children: [jsxRuntime.jsx("rect", {
454
+ fill: "#FFF",
455
+ y: 1,
456
+ width: 16,
457
+ height: 16,
458
+ rx: 4
459
+ }), jsxRuntime.jsx("rect", {
460
+ "data-style": "checkbox__border",
461
+ x: 0.5,
462
+ y: 1,
463
+ width: 15,
464
+ height: 15,
465
+ rx: 4,
466
+ transform: "translate(0 .5)",
467
+ stroke: "#AFAFAF"
468
+ })]
469
+ })
470
+ }));
402
471
  };
403
472
 
404
- SvgUnchecked.propTypes = {};
405
473
  SvgUnchecked.displayName = 'SvgUnchecked';
406
474
 
407
475
  var UncheckedIcon = function UncheckedIcon(props) {
408
476
  var theme = react.useTheme();
409
- return react.jsx(SvgUnchecked, _extends({}, props, {
410
- css: getIconStyles$2(props, theme)
411
- }));
477
+ return jsxRuntime.jsx(react.ClassNames, {
478
+ children: function children(_ref) {
479
+ var createClass = _ref.css;
480
+ return jsxRuntime.jsx(SvgUnchecked, _objectSpread$3(_objectSpread$3({}, props), {}, {
481
+ className: createClass(getIconStyles(props, theme))
482
+ }));
483
+ }
484
+ });
412
485
  };
413
486
 
414
- UncheckedIcon.propTypes = {};
415
487
  UncheckedIcon.displayName = 'UncheckedIcon';
488
+ var UncheckedIcon$1 = UncheckedIcon;
416
489
 
417
- function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
490
+ function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
418
491
 
419
- function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys$3(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
492
+ function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
420
493
 
421
494
  var getSvgBorderStroke = function getSvgBorderStroke(vars, props) {
422
495
  if (props.isDisabled) {
@@ -455,34 +528,38 @@ var getSvgContentFill = function getSvgContentFill(vars, props) {
455
528
  };
456
529
 
457
530
  var getCheckboxWrapperStyles = function getCheckboxWrapperStyles(props, theme) {
458
- var overwrittenVars = _objectSpread$3(_objectSpread$3({}, designSystem.customProperties), theme);
531
+ var overwrittenVars = _objectSpread$2(_objectSpread$2({}, designSystem.customProperties), theme);
459
532
  /* resets from createStyledIcon styles */
460
533
 
461
534
 
462
- return /*#__PURE__*/react.css("*{fill:none;}display:flex;align-items:center;svg [id$='borderAndContent']>[id$='border']{stroke:", getSvgBorderStroke(overwrittenVars, props), ";fill:", overwrittenVars[designSystem.designTokens.backgroundColorForInput], ";}svg [id$='borderAndContent']>[id$='content']{fill:", getSvgContentFill(overwrittenVars, props), ";}" + ("" ));
535
+ return /*#__PURE__*/react.css("*{fill:none;}display:flex;align-items:center;svg *[data-style='checkbox__border']{stroke:", getSvgBorderStroke(overwrittenVars, props), ";fill:", overwrittenVars[designSystem.designTokens.backgroundColorForInput], ";}svg *[data-style='checkbox__content']{fill:", getSvgContentFill(overwrittenVars, props), ";}" + ("" ), "" );
463
536
  }; // eslint-disable-next-line import/prefer-default-export
464
537
 
465
- var Input = _styled__default['default']("input", {
538
+ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
539
+
540
+ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
541
+
542
+ var Input = _styled__default["default"]("input", {
466
543
  target: "e1ccch1p0"
467
- } )("&:focus+div>svg [id$='borderAndContent']>[id$='border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}");
544
+ } )("&:focus+div>svg *[data-style='checkbox__border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ));
468
545
 
469
546
  var Checkbox = function Checkbox(props) {
470
- var ref = React__default['default'].useRef({
547
+ var ref = react$1.useRef({
471
548
  indeterminate: false
472
549
  });
473
- React__default['default'].useEffect(function () {
550
+ react$1.useEffect(function () {
474
551
  if (props.isIndeterminate) {
475
552
  ref.current.indeterminate = true;
476
553
  }
477
554
  }, [props.isIndeterminate]);
478
555
  var onChange = props.onChange;
479
- var handleChange = React__default['default'].useCallback(function (event) {
556
+ var handleChange = react$1.useCallback(function (event) {
480
557
  return !props.isReadOnly && onChange && onChange(event);
481
558
  }, [props.isReadOnly, onChange]);
482
- return react.jsx(Input // @ts-ignore
483
- , _extends({
559
+ return jsxRuntime.jsx(Input // @ts-ignore
560
+ , _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({
484
561
  ref: ref
485
- }, utils.filterDataAttributes(props), utils.filterAriaAttributes(props), {
562
+ }, utils.filterDataAttributes(props)), utils.filterAriaAttributes(props)), {}, {
486
563
  /* ARIA */
487
564
  "aria-readonly": props.isReadOnly,
488
565
  "aria-checked": props.isChecked,
@@ -493,14 +570,18 @@ var Checkbox = function Checkbox(props) {
493
570
  disabled: props.isDisabled || props.isReadOnly,
494
571
  readOnly: props.isReadOnly,
495
572
  checked: props.isChecked && !props.isIndeterminate
496
- }, props, {
573
+ }, props), {}, {
497
574
  onChange: handleChange
498
575
  }));
499
576
  };
500
577
 
501
578
  Checkbox.propTypes = {};
502
579
  Checkbox.displayName = 'Checkbox';
580
+ var Checkbox$1 = Checkbox;
503
581
 
582
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
583
+
584
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
504
585
  var sequentialId = utils.createSequentialId('checkbox-input-');
505
586
  var defaultProps = {
506
587
  isChecked: false,
@@ -510,72 +591,77 @@ var defaultProps = {
510
591
 
511
592
  var hoverStyles = function hoverStyles(props) {
512
593
  if (!props.hasError && !props.readOnly && !props.disabled) {
513
- return /*#__PURE__*/react.css("&:hover svg [id$='borderAndContent']>[id$='border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ));
594
+ return /*#__PURE__*/react.css("&:hover svg *[data-style='checkbox__border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ), "" );
514
595
  }
515
596
 
516
- return /*#__PURE__*/react.css("" );
597
+ return /*#__PURE__*/react.css("" , "" );
517
598
  };
518
599
 
519
- var LabelTextWrapper = _styled__default['default']("div", {
600
+ var LabelTextWrapper = _styled__default["default"]("div", {
520
601
  target: "e6nn4mw1"
521
- } )("margin-left:", designSystem.customProperties.spacingS, ";outline:none;border-radius:", designSystem.customProperties.borderRadiusForTag, ";");
602
+ } )("margin-left:", designSystem.customProperties.spacingS, ";outline:none;border-radius:", designSystem.customProperties.borderRadiusForTag, ";" + ("" ));
522
603
 
523
- var Label = _styled__default['default']("label", {
604
+ var Label = _styled__default["default"]("label", {
524
605
  target: "e6nn4mw0"
525
606
  } )("display:flex;align-items:center;cursor:", function (props) {
526
607
  if (props.disabled) return 'not-allowed';
527
608
  if (props.readOnly) return 'default';
528
609
  return 'pointer';
529
- }, ";position:relative;", hoverStyles, " &:focus-within div{box-shadow:0 0 0 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";}");
610
+ }, ";position:relative;", hoverStyles, " &:focus-within div{box-shadow:0 0 0 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ));
530
611
 
531
612
  var CheckboxInput = function CheckboxInput(props) {
532
613
  // We generate an id in case no id is provided by the parent to attach the
533
614
  // label to the input component.
534
615
  var id = props.id || sequentialId();
535
616
  var theme = react.useTheme();
536
- return react.jsx(Label, {
617
+ return jsxRuntime.jsxs(Label, {
537
618
  htmlFor: id,
538
619
  hasError: props.hasError,
539
620
  disabled: props.isDisabled,
540
- readOnly: props.isReadOnly
541
- }, react.jsx(Checkbox, _extends({
542
- type: "checkbox",
543
- id: id,
544
- name: props.name,
545
- value: props.value,
546
- onChange: props.onChange,
547
- isDisabled: props.isDisabled,
548
- isReadOnly: props.isReadOnly,
549
- isChecked: props.isChecked,
550
- isIndeterminate: props.isIndeterminate
551
- }, utils.filterDataAttributes(props), utils.filterAriaAttributes(props))), react.jsx("div", {
552
- css: getCheckboxWrapperStyles(props, theme)
553
- }, function () {
554
- if (props.isIndeterminate) return react.jsx(IndeterminateIcon, {
555
- size: "medium"
556
- });
557
- if (props.isChecked) return react.jsx(CheckedIcon, {
558
- size: "medium"
559
- });
560
- return react.jsx(UncheckedIcon, {
561
- size: "medium"
562
- });
563
- }()), props.children && react.jsx(LabelTextWrapper // To allow focusing the Label in readOnly mode, because the checkbox gets disabled and therefore unfocusable
564
- , {
565
- tabIndex: props.isReadOnly ? 0 : -1
566
- }, react.jsx(Text__default['default'].Body, {
567
- as: "span" // FIXME: add proper tones when we have disabled/primary in tones
568
- ,
569
- tone: props.isDisabled ? 'secondary' : undefined
570
- }, props.children)));
621
+ readOnly: props.isReadOnly,
622
+ children: [jsxRuntime.jsx(Checkbox$1, _objectSpread(_objectSpread({
623
+ type: "checkbox",
624
+ id: id,
625
+ name: props.name,
626
+ value: props.value,
627
+ onChange: props.onChange,
628
+ isDisabled: props.isDisabled,
629
+ isReadOnly: props.isReadOnly,
630
+ isChecked: props.isChecked,
631
+ isIndeterminate: props.isIndeterminate
632
+ }, utils.filterDataAttributes(props)), utils.filterAriaAttributes(props))), jsxRuntime.jsx("div", {
633
+ css: getCheckboxWrapperStyles(props, theme),
634
+ children: function () {
635
+ if (props.isIndeterminate) return jsxRuntime.jsx(IndeterminateIcon$1, {
636
+ size: "medium"
637
+ });
638
+ if (props.isChecked) return jsxRuntime.jsx(CheckedIcon$1, {
639
+ size: "medium"
640
+ });
641
+ return jsxRuntime.jsx(UncheckedIcon$1, {
642
+ size: "medium"
643
+ });
644
+ }()
645
+ }), props.children && jsxRuntime.jsx(LabelTextWrapper // To allow focusing the Label in readOnly mode, because the checkbox gets disabled and therefore unfocusable
646
+ , {
647
+ tabIndex: props.isReadOnly ? 0 : -1,
648
+ children: jsxRuntime.jsx(Text__default["default"].Body, {
649
+ as: "span" // FIXME: add proper tones when we have disabled/primary in tones
650
+ ,
651
+ tone: props.isDisabled ? 'secondary' : undefined,
652
+ children: props.children
653
+ })
654
+ })]
655
+ });
571
656
  };
572
657
 
573
658
  CheckboxInput.propTypes = {};
574
659
  CheckboxInput.displayName = 'CheckboxInput';
575
660
  CheckboxInput.defaultProps = defaultProps;
661
+ var CheckboxInput$1 = CheckboxInput;
576
662
 
577
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
578
- var version = '12.2.1';
663
+ // NOTE: This string will be replaced on build time with the package version.
664
+ var version = "12.2.5";
579
665
 
580
- exports.default = CheckboxInput;
666
+ exports["default"] = CheckboxInput$1;
581
667
  exports.version = version;