@commercetools-uikit/checkbox-input 15.2.4 → 15.4.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 (8) hide show
  1. package/dist/commercetools-uikit-checkbox-input.cjs.dev.js +74 -91
  2. package/dist/commercetools-uikit-checkbox-input.cjs.prod.js +73 -90
  3. package/dist/commercetools-uikit-checkbox-input.esm.js +76 -93
  4. package/dist/declarations/src/checkbox-input.styles.d.ts +1 -2
  5. package/dist/declarations/src/icons/generated/CheckedReact.d.ts +1 -2
  6. package/dist/declarations/src/icons/generated/IndeterminateReact.d.ts +1 -2
  7. package/dist/declarations/src/icons/generated/UncheckedReact.d.ts +1 -2
  8. package/package.json +7 -7
package/dist/commercetools-uikit-checkbox-input.cjs.prod.js CHANGED
@@ -36,9 +36,9 @@ var _styled__default = /*#__PURE__*/_interopDefault(_styled);
36
36
  var Text__default = /*#__PURE__*/_interopDefault(Text);
37
37
  var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
38
38
 
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); 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$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); 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; }
40
40
 
41
- function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$5(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _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; }
41
+ function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$4(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _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; }
42
42
  var iconSizes$2 = {
43
43
  small: 12,
44
44
  medium: 16,
@@ -83,44 +83,41 @@ var getSizeStyle$2 = function getSizeStyle(size) {
83
83
  }
84
84
  };
85
85
 
86
- var getColor$2 = function getColor(color, theme) {
86
+ var getColor$2 = function getColor(color) {
87
87
  if (!color) return 'inherit';
88
-
89
- var overwrittenVars = _objectSpread$5(_objectSpread$5({}, designSystem.customProperties), theme);
90
-
91
88
  var iconColor;
92
89
 
93
90
  switch (color) {
94
91
  case 'solid':
95
- iconColor = overwrittenVars.colorSolid;
92
+ iconColor = designSystem.designTokens.colorSolid;
96
93
  break;
97
94
 
98
95
  case 'neutral60':
99
- iconColor = overwrittenVars.colorNeutral60;
96
+ iconColor = designSystem.designTokens.colorNeutral60;
100
97
  break;
101
98
 
102
99
  case 'surface':
103
- iconColor = overwrittenVars.colorSurface;
100
+ iconColor = designSystem.designTokens.colorSurface;
104
101
  break;
105
102
 
106
103
  case 'info':
107
- iconColor = overwrittenVars.colorInfo;
104
+ iconColor = designSystem.designTokens.colorInfo;
108
105
  break;
109
106
 
110
107
  case 'primary':
111
- iconColor = overwrittenVars.colorPrimary;
108
+ iconColor = designSystem.designTokens.colorPrimary;
112
109
  break;
113
110
 
114
111
  case 'primary40':
115
- iconColor = overwrittenVars.colorPrimary40;
112
+ iconColor = designSystem.designTokens.colorPrimary40;
116
113
  break;
117
114
 
118
115
  case 'warning':
119
- iconColor = overwrittenVars.colorWarning;
116
+ iconColor = designSystem.designTokens.colorWarning;
120
117
  break;
121
118
 
122
119
  case 'error':
123
- iconColor = overwrittenVars.colorError;
120
+ iconColor = designSystem.designTokens.colorError;
124
121
  break;
125
122
  }
126
123
 
@@ -131,16 +128,17 @@ var getColor$2 = function getColor(color, theme) {
131
128
  return iconColor;
132
129
  };
133
130
 
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;" + ("" ), "" );
131
+ var getIconStyles$2 = function getIconStyles(props) {
132
+ return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$2(props.color), ";}&,image{", getSizeStyle$2(props.size), ";}flex-shrink:0;" + ("" ), "" );
136
133
  };
137
134
 
138
135
  var SvgChecked = function SvgChecked(props) {
139
- return jsxRuntime.jsx("svg", _objectSpread$5(_objectSpread$5({
136
+ return jsxRuntime.jsx("svg", _objectSpread$4(_objectSpread$4({
140
137
  width: 16,
141
138
  height: 16,
142
139
  viewBox: "0 0 16 16",
143
- xmlns: "http://www.w3.org/2000/svg"
140
+ xmlns: "http://www.w3.org/2000/svg",
141
+ role: "img"
144
142
  }, props), {}, {
145
143
  children: jsxRuntime.jsxs("g", {
146
144
  transform: "translate(0 -1)",
@@ -175,12 +173,11 @@ var SvgChecked = function SvgChecked(props) {
175
173
  SvgChecked.displayName = 'SvgChecked';
176
174
 
177
175
  var CheckedIcon = function CheckedIcon(props) {
178
- var theme = react.useTheme();
179
176
  return jsxRuntime.jsx(react.ClassNames, {
180
177
  children: function children(_ref) {
181
178
  var createClass = _ref.css;
182
- return jsxRuntime.jsx(SvgChecked, _objectSpread$5(_objectSpread$5({}, props), {}, {
183
- className: createClass(getIconStyles$2(props, theme))
179
+ return jsxRuntime.jsx(SvgChecked, _objectSpread$4(_objectSpread$4({}, props), {}, {
180
+ className: createClass(getIconStyles$2(props))
184
181
  }));
185
182
  }
186
183
  });
@@ -189,9 +186,9 @@ var CheckedIcon = function CheckedIcon(props) {
189
186
  CheckedIcon.displayName = 'CheckedIcon';
190
187
  var CheckedIcon$1 = CheckedIcon;
191
188
 
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); 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; }
189
+ function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); 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; }
193
190
 
194
- function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$4(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _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; }
191
+ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _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; }
195
192
  var iconSizes$1 = {
196
193
  small: 12,
197
194
  medium: 16,
@@ -236,44 +233,41 @@ var getSizeStyle$1 = function getSizeStyle(size) {
236
233
  }
237
234
  };
238
235
 
239
- var getColor$1 = function getColor(color, theme) {
236
+ var getColor$1 = function getColor(color) {
240
237
  if (!color) return 'inherit';
241
-
242
- var overwrittenVars = _objectSpread$4(_objectSpread$4({}, designSystem.customProperties), theme);
243
-
244
238
  var iconColor;
245
239
 
246
240
  switch (color) {
247
241
  case 'solid':
248
- iconColor = overwrittenVars.colorSolid;
242
+ iconColor = designSystem.designTokens.colorSolid;
249
243
  break;
250
244
 
251
245
  case 'neutral60':
252
- iconColor = overwrittenVars.colorNeutral60;
246
+ iconColor = designSystem.designTokens.colorNeutral60;
253
247
  break;
254
248
 
255
249
  case 'surface':
256
- iconColor = overwrittenVars.colorSurface;
250
+ iconColor = designSystem.designTokens.colorSurface;
257
251
  break;
258
252
 
259
253
  case 'info':
260
- iconColor = overwrittenVars.colorInfo;
254
+ iconColor = designSystem.designTokens.colorInfo;
261
255
  break;
262
256
 
263
257
  case 'primary':
264
- iconColor = overwrittenVars.colorPrimary;
258
+ iconColor = designSystem.designTokens.colorPrimary;
265
259
  break;
266
260
 
267
261
  case 'primary40':
268
- iconColor = overwrittenVars.colorPrimary40;
262
+ iconColor = designSystem.designTokens.colorPrimary40;
269
263
  break;
270
264
 
271
265
  case 'warning':
272
- iconColor = overwrittenVars.colorWarning;
266
+ iconColor = designSystem.designTokens.colorWarning;
273
267
  break;
274
268
 
275
269
  case 'error':
276
- iconColor = overwrittenVars.colorError;
270
+ iconColor = designSystem.designTokens.colorError;
277
271
  break;
278
272
  }
279
273
 
@@ -284,16 +278,17 @@ var getColor$1 = function getColor(color, theme) {
284
278
  return iconColor;
285
279
  };
286
280
 
287
- var getIconStyles$1 = function getIconStyles(props, theme) {
288
- return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$1(props.color, theme), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
281
+ var getIconStyles$1 = function getIconStyles(props) {
282
+ return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$1(props.color), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
289
283
  };
290
284
 
291
285
  var SvgIndeterminate = function SvgIndeterminate(props) {
292
- return jsxRuntime.jsx("svg", _objectSpread$4(_objectSpread$4({
286
+ return jsxRuntime.jsx("svg", _objectSpread$3(_objectSpread$3({
293
287
  width: 16,
294
288
  height: 16,
295
289
  viewBox: "0 0 16 16",
296
- xmlns: "http://www.w3.org/2000/svg"
290
+ xmlns: "http://www.w3.org/2000/svg",
291
+ role: "img"
297
292
  }, props), {}, {
298
293
  children: jsxRuntime.jsxs("g", {
299
294
  transform: "translate(0 -1)",
@@ -327,12 +322,11 @@ var SvgIndeterminate = function SvgIndeterminate(props) {
327
322
  SvgIndeterminate.displayName = 'SvgIndeterminate';
328
323
 
329
324
  var IndeterminateIcon = function IndeterminateIcon(props) {
330
- var theme = react.useTheme();
331
325
  return jsxRuntime.jsx(react.ClassNames, {
332
326
  children: function children(_ref) {
333
327
  var createClass = _ref.css;
334
- return jsxRuntime.jsx(SvgIndeterminate, _objectSpread$4(_objectSpread$4({}, props), {}, {
335
- className: createClass(getIconStyles$1(props, theme))
328
+ return jsxRuntime.jsx(SvgIndeterminate, _objectSpread$3(_objectSpread$3({}, props), {}, {
329
+ className: createClass(getIconStyles$1(props))
336
330
  }));
337
331
  }
338
332
  });
@@ -341,9 +335,9 @@ var IndeterminateIcon = function IndeterminateIcon(props) {
341
335
  IndeterminateIcon.displayName = 'IndeterminateIcon';
342
336
  var IndeterminateIcon$1 = IndeterminateIcon;
343
337
 
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); 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; }
338
+ function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); 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; }
345
339
 
346
- function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _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; }
340
+ function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _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; }
347
341
  var iconSizes = {
348
342
  small: 12,
349
343
  medium: 16,
@@ -388,44 +382,41 @@ var getSizeStyle = function getSizeStyle(size) {
388
382
  }
389
383
  };
390
384
 
391
- var getColor = function getColor(color, theme) {
385
+ var getColor = function getColor(color) {
392
386
  if (!color) return 'inherit';
393
-
394
- var overwrittenVars = _objectSpread$3(_objectSpread$3({}, designSystem.customProperties), theme);
395
-
396
387
  var iconColor;
397
388
 
398
389
  switch (color) {
399
390
  case 'solid':
400
- iconColor = overwrittenVars.colorSolid;
391
+ iconColor = designSystem.designTokens.colorSolid;
401
392
  break;
402
393
 
403
394
  case 'neutral60':
404
- iconColor = overwrittenVars.colorNeutral60;
395
+ iconColor = designSystem.designTokens.colorNeutral60;
405
396
  break;
406
397
 
407
398
  case 'surface':
408
- iconColor = overwrittenVars.colorSurface;
399
+ iconColor = designSystem.designTokens.colorSurface;
409
400
  break;
410
401
 
411
402
  case 'info':
412
- iconColor = overwrittenVars.colorInfo;
403
+ iconColor = designSystem.designTokens.colorInfo;
413
404
  break;
414
405
 
415
406
  case 'primary':
416
- iconColor = overwrittenVars.colorPrimary;
407
+ iconColor = designSystem.designTokens.colorPrimary;
417
408
  break;
418
409
 
419
410
  case 'primary40':
420
- iconColor = overwrittenVars.colorPrimary40;
411
+ iconColor = designSystem.designTokens.colorPrimary40;
421
412
  break;
422
413
 
423
414
  case 'warning':
424
- iconColor = overwrittenVars.colorWarning;
415
+ iconColor = designSystem.designTokens.colorWarning;
425
416
  break;
426
417
 
427
418
  case 'error':
428
- iconColor = overwrittenVars.colorError;
419
+ iconColor = designSystem.designTokens.colorError;
429
420
  break;
430
421
  }
431
422
 
@@ -436,16 +427,17 @@ var getColor = function getColor(color, theme) {
436
427
  return iconColor;
437
428
  };
438
429
 
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;" + ("" ), "" );
430
+ var getIconStyles = function getIconStyles(props) {
431
+ return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
441
432
  };
442
433
 
443
434
  var SvgUnchecked = function SvgUnchecked(props) {
444
- return jsxRuntime.jsx("svg", _objectSpread$3(_objectSpread$3({
435
+ return jsxRuntime.jsx("svg", _objectSpread$2(_objectSpread$2({
445
436
  width: 16,
446
437
  height: 16,
447
438
  viewBox: "0 0 16 16",
448
- xmlns: "http://www.w3.org/2000/svg"
439
+ xmlns: "http://www.w3.org/2000/svg",
440
+ role: "img"
449
441
  }, props), {}, {
450
442
  children: jsxRuntime.jsxs("g", {
451
443
  transform: "translate(0 -1)",
@@ -473,12 +465,11 @@ var SvgUnchecked = function SvgUnchecked(props) {
473
465
  SvgUnchecked.displayName = 'SvgUnchecked';
474
466
 
475
467
  var UncheckedIcon = function UncheckedIcon(props) {
476
- var theme = react.useTheme();
477
468
  return jsxRuntime.jsx(react.ClassNames, {
478
469
  children: function children(_ref) {
479
470
  var createClass = _ref.css;
480
- return jsxRuntime.jsx(SvgUnchecked, _objectSpread$3(_objectSpread$3({}, props), {}, {
481
- className: createClass(getIconStyles(props, theme))
471
+ return jsxRuntime.jsx(SvgUnchecked, _objectSpread$2(_objectSpread$2({}, props), {}, {
472
+ className: createClass(getIconStyles(props))
482
473
  }));
483
474
  }
484
475
  });
@@ -487,52 +478,45 @@ var UncheckedIcon = function UncheckedIcon(props) {
487
478
  UncheckedIcon.displayName = 'UncheckedIcon';
488
479
  var UncheckedIcon$1 = UncheckedIcon;
489
480
 
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); 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; }
491
-
492
- function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _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; }
493
-
494
- var getSvgBorderStroke = function getSvgBorderStroke(vars, props) {
481
+ var getSvgBorderStroke = function getSvgBorderStroke(props) {
495
482
  if (props.isDisabled) {
496
- return vars[designSystem.designTokens.borderColorForInputWhenDisabled];
483
+ return designSystem.designTokens.borderColorForInputWhenDisabled;
497
484
  }
498
485
 
499
486
  if (props.hasError) {
500
- return vars[designSystem.designTokens.borderColorForInputWhenError];
487
+ return designSystem.designTokens.borderColorForInputWhenError;
501
488
  }
502
489
 
503
490
  if (props.isReadOnly) {
504
- return vars[designSystem.designTokens.borderColorForInputWhenReadonly];
491
+ return designSystem.designTokens.borderColorForInputWhenReadonly;
505
492
  }
506
493
 
507
494
  if (props.isHovered && !props.isReadOnly && !props.isDisabled && !props.hasError) {
508
- return vars[designSystem.designTokens.borderColorForInputWhenFocused];
495
+ return designSystem.designTokens.borderColorForInputWhenFocused;
509
496
  }
510
497
 
511
- return vars[designSystem.designTokens.borderColorForInput];
498
+ return designSystem.designTokens.borderColorForInput;
512
499
  };
513
500
 
514
- var getSvgContentFill = function getSvgContentFill(vars, props) {
501
+ var getSvgContentFill = function getSvgContentFill(props) {
515
502
  if (props.isDisabled) {
516
- return vars[designSystem.designTokens.fontColorForInputWhenDisabled];
503
+ return designSystem.designTokens.fontColorForInputWhenDisabled;
517
504
  }
518
505
 
519
506
  if (props.hasError) {
520
- return vars[designSystem.designTokens.fontColorForInputWhenError];
507
+ return designSystem.designTokens.fontColorForInputWhenError;
521
508
  }
522
509
 
523
510
  if (props.isReadOnly) {
524
- return vars[designSystem.designTokens.fontColorForInputWhenReadonly];
511
+ return designSystem.designTokens.fontColorForInputWhenReadonly;
525
512
  }
526
513
 
527
- return vars[designSystem.designTokens.borderColorForInputWhenFocused];
514
+ return designSystem.designTokens.borderColorForInputWhenFocused;
528
515
  };
529
516
 
530
- var getCheckboxWrapperStyles = function getCheckboxWrapperStyles(props, theme) {
531
- var overwrittenVars = _objectSpread$2(_objectSpread$2({}, designSystem.customProperties), theme);
517
+ var getCheckboxWrapperStyles = function getCheckboxWrapperStyles(props) {
532
518
  /* resets from createStyledIcon styles */
533
-
534
-
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), ";}" + ("" ), "" );
519
+ return /*#__PURE__*/react.css("*{fill:none;}display:flex;align-items:center;svg *[data-style='checkbox__border']{stroke:", getSvgBorderStroke(props), ";fill:", designSystem.designTokens.backgroundColorForInput, ";}svg *[data-style='checkbox__content']{fill:", getSvgContentFill(props), ";}" + ("" ), "" );
536
520
  }; // eslint-disable-next-line import/prefer-default-export
537
521
 
538
522
  function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); 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; }
@@ -541,7 +525,7 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
541
525
 
542
526
  var Input = /*#__PURE__*/_styled__default["default"]("input", {
543
527
  target: "e1ccch1p0"
544
- } )("&:focus+div>svg *[data-style='checkbox__border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ));
528
+ } )("&:focus+div>svg *[data-style='checkbox__border']{stroke:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ));
545
529
 
546
530
  var Checkbox = function Checkbox(props) {
547
531
  var ref = react$1.useRef({
@@ -591,7 +575,7 @@ var defaultProps = {
591
575
 
592
576
  var hoverStyles = function hoverStyles(props) {
593
577
  if (!props.hasError && !props.readOnly && !props.disabled) {
594
- return /*#__PURE__*/react.css("&:hover svg *[data-style='checkbox__border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ), "" );
578
+ return /*#__PURE__*/react.css("&:hover svg *[data-style='checkbox__border']{stroke:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" );
595
579
  }
596
580
 
597
581
  return /*#__PURE__*/react.css("" , "" );
@@ -599,7 +583,7 @@ var hoverStyles = function hoverStyles(props) {
599
583
 
600
584
  var LabelTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
601
585
  target: "e6nn4mw1"
602
- } )("margin-left:", designSystem.customProperties.spacingS, ";outline:none;border-radius:", designSystem.customProperties.borderRadiusForTag, ";" + ("" ));
586
+ } )("margin-left:", designSystem.designTokens.spacingS, ";outline:none;border-radius:", designSystem.designTokens.borderRadiusForTag, ";" + ("" ));
603
587
 
604
588
  var Label = /*#__PURE__*/_styled__default["default"]("label", {
605
589
  target: "e6nn4mw0"
@@ -607,13 +591,12 @@ var Label = /*#__PURE__*/_styled__default["default"]("label", {
607
591
  if (props.disabled) return 'not-allowed';
608
592
  if (props.readOnly) return 'default';
609
593
  return 'pointer';
610
- }, ";position:relative;", hoverStyles, " &:focus-within div{box-shadow:0 0 0 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ));
594
+ }, ";position:relative;", hoverStyles, " &:focus-within div{box-shadow:0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ));
611
595
 
612
596
  var CheckboxInput = function CheckboxInput(props) {
613
597
  // We generate an id in case no id is provided by the parent to attach the
614
598
  // label to the input component.
615
599
  var id = props.id || sequentialId();
616
- var theme = react.useTheme();
617
600
  return jsxRuntime.jsxs(Label, {
618
601
  htmlFor: id,
619
602
  hasError: props.hasError,
@@ -630,7 +613,7 @@ var CheckboxInput = function CheckboxInput(props) {
630
613
  isChecked: props.isChecked,
631
614
  isIndeterminate: props.isIndeterminate
632
615
  }, utils.filterDataAttributes(props)), utils.filterAriaAttributes(props))), jsxRuntime.jsx("div", {
633
- css: getCheckboxWrapperStyles(props, theme),
616
+ css: getCheckboxWrapperStyles(props),
634
617
  children: function () {
635
618
  if (props.isIndeterminate) return jsxRuntime.jsx(IndeterminateIcon$1, {
636
619
  size: "medium"
@@ -661,7 +644,7 @@ CheckboxInput.defaultProps = defaultProps;
661
644
  var CheckboxInput$1 = CheckboxInput;
662
645
 
663
646
  // NOTE: This string will be replaced on build time with the package version.
664
- var version = "15.2.4";
647
+ var version = "15.4.0";
665
648
 
666
649
  exports["default"] = CheckboxInput$1;
667
650
  exports.version = version;