@commercetools-uikit/checkbox-input 15.2.4 → 15.3.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 +68 -88
  2. package/dist/commercetools-uikit-checkbox-input.cjs.prod.js +67 -87
  3. package/dist/commercetools-uikit-checkbox-input.esm.js +70 -90
  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,12 +128,12 @@ 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",
@@ -175,12 +172,11 @@ var SvgChecked = function SvgChecked(props) {
175
172
  SvgChecked.displayName = 'SvgChecked';
176
173
 
177
174
  var CheckedIcon = function CheckedIcon(props) {
178
- var theme = react.useTheme();
179
175
  return jsxRuntime.jsx(react.ClassNames, {
180
176
  children: function children(_ref) {
181
177
  var createClass = _ref.css;
182
- return jsxRuntime.jsx(SvgChecked, _objectSpread$5(_objectSpread$5({}, props), {}, {
183
- className: createClass(getIconStyles$2(props, theme))
178
+ return jsxRuntime.jsx(SvgChecked, _objectSpread$4(_objectSpread$4({}, props), {}, {
179
+ className: createClass(getIconStyles$2(props))
184
180
  }));
185
181
  }
186
182
  });
@@ -189,9 +185,9 @@ var CheckedIcon = function CheckedIcon(props) {
189
185
  CheckedIcon.displayName = 'CheckedIcon';
190
186
  var CheckedIcon$1 = CheckedIcon;
191
187
 
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; }
188
+ 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
189
 
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; }
190
+ 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
191
  var iconSizes$1 = {
196
192
  small: 12,
197
193
  medium: 16,
@@ -236,44 +232,41 @@ var getSizeStyle$1 = function getSizeStyle(size) {
236
232
  }
237
233
  };
238
234
 
239
- var getColor$1 = function getColor(color, theme) {
235
+ var getColor$1 = function getColor(color) {
240
236
  if (!color) return 'inherit';
241
-
242
- var overwrittenVars = _objectSpread$4(_objectSpread$4({}, designSystem.customProperties), theme);
243
-
244
237
  var iconColor;
245
238
 
246
239
  switch (color) {
247
240
  case 'solid':
248
- iconColor = overwrittenVars.colorSolid;
241
+ iconColor = designSystem.designTokens.colorSolid;
249
242
  break;
250
243
 
251
244
  case 'neutral60':
252
- iconColor = overwrittenVars.colorNeutral60;
245
+ iconColor = designSystem.designTokens.colorNeutral60;
253
246
  break;
254
247
 
255
248
  case 'surface':
256
- iconColor = overwrittenVars.colorSurface;
249
+ iconColor = designSystem.designTokens.colorSurface;
257
250
  break;
258
251
 
259
252
  case 'info':
260
- iconColor = overwrittenVars.colorInfo;
253
+ iconColor = designSystem.designTokens.colorInfo;
261
254
  break;
262
255
 
263
256
  case 'primary':
264
- iconColor = overwrittenVars.colorPrimary;
257
+ iconColor = designSystem.designTokens.colorPrimary;
265
258
  break;
266
259
 
267
260
  case 'primary40':
268
- iconColor = overwrittenVars.colorPrimary40;
261
+ iconColor = designSystem.designTokens.colorPrimary40;
269
262
  break;
270
263
 
271
264
  case 'warning':
272
- iconColor = overwrittenVars.colorWarning;
265
+ iconColor = designSystem.designTokens.colorWarning;
273
266
  break;
274
267
 
275
268
  case 'error':
276
- iconColor = overwrittenVars.colorError;
269
+ iconColor = designSystem.designTokens.colorError;
277
270
  break;
278
271
  }
279
272
 
@@ -284,12 +277,12 @@ var getColor$1 = function getColor(color, theme) {
284
277
  return iconColor;
285
278
  };
286
279
 
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;" + ("" ), "" );
280
+ var getIconStyles$1 = function getIconStyles(props) {
281
+ return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$1(props.color), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
289
282
  };
290
283
 
291
284
  var SvgIndeterminate = function SvgIndeterminate(props) {
292
- return jsxRuntime.jsx("svg", _objectSpread$4(_objectSpread$4({
285
+ return jsxRuntime.jsx("svg", _objectSpread$3(_objectSpread$3({
293
286
  width: 16,
294
287
  height: 16,
295
288
  viewBox: "0 0 16 16",
@@ -327,12 +320,11 @@ var SvgIndeterminate = function SvgIndeterminate(props) {
327
320
  SvgIndeterminate.displayName = 'SvgIndeterminate';
328
321
 
329
322
  var IndeterminateIcon = function IndeterminateIcon(props) {
330
- var theme = react.useTheme();
331
323
  return jsxRuntime.jsx(react.ClassNames, {
332
324
  children: function children(_ref) {
333
325
  var createClass = _ref.css;
334
- return jsxRuntime.jsx(SvgIndeterminate, _objectSpread$4(_objectSpread$4({}, props), {}, {
335
- className: createClass(getIconStyles$1(props, theme))
326
+ return jsxRuntime.jsx(SvgIndeterminate, _objectSpread$3(_objectSpread$3({}, props), {}, {
327
+ className: createClass(getIconStyles$1(props))
336
328
  }));
337
329
  }
338
330
  });
@@ -341,9 +333,9 @@ var IndeterminateIcon = function IndeterminateIcon(props) {
341
333
  IndeterminateIcon.displayName = 'IndeterminateIcon';
342
334
  var IndeterminateIcon$1 = IndeterminateIcon;
343
335
 
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; }
336
+ 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
337
 
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; }
338
+ 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
339
  var iconSizes = {
348
340
  small: 12,
349
341
  medium: 16,
@@ -388,44 +380,41 @@ var getSizeStyle = function getSizeStyle(size) {
388
380
  }
389
381
  };
390
382
 
391
- var getColor = function getColor(color, theme) {
383
+ var getColor = function getColor(color) {
392
384
  if (!color) return 'inherit';
393
-
394
- var overwrittenVars = _objectSpread$3(_objectSpread$3({}, designSystem.customProperties), theme);
395
-
396
385
  var iconColor;
397
386
 
398
387
  switch (color) {
399
388
  case 'solid':
400
- iconColor = overwrittenVars.colorSolid;
389
+ iconColor = designSystem.designTokens.colorSolid;
401
390
  break;
402
391
 
403
392
  case 'neutral60':
404
- iconColor = overwrittenVars.colorNeutral60;
393
+ iconColor = designSystem.designTokens.colorNeutral60;
405
394
  break;
406
395
 
407
396
  case 'surface':
408
- iconColor = overwrittenVars.colorSurface;
397
+ iconColor = designSystem.designTokens.colorSurface;
409
398
  break;
410
399
 
411
400
  case 'info':
412
- iconColor = overwrittenVars.colorInfo;
401
+ iconColor = designSystem.designTokens.colorInfo;
413
402
  break;
414
403
 
415
404
  case 'primary':
416
- iconColor = overwrittenVars.colorPrimary;
405
+ iconColor = designSystem.designTokens.colorPrimary;
417
406
  break;
418
407
 
419
408
  case 'primary40':
420
- iconColor = overwrittenVars.colorPrimary40;
409
+ iconColor = designSystem.designTokens.colorPrimary40;
421
410
  break;
422
411
 
423
412
  case 'warning':
424
- iconColor = overwrittenVars.colorWarning;
413
+ iconColor = designSystem.designTokens.colorWarning;
425
414
  break;
426
415
 
427
416
  case 'error':
428
- iconColor = overwrittenVars.colorError;
417
+ iconColor = designSystem.designTokens.colorError;
429
418
  break;
430
419
  }
431
420
 
@@ -436,12 +425,12 @@ var getColor = function getColor(color, theme) {
436
425
  return iconColor;
437
426
  };
438
427
 
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;" + ("" ), "" );
428
+ var getIconStyles = function getIconStyles(props) {
429
+ return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
441
430
  };
442
431
 
443
432
  var SvgUnchecked = function SvgUnchecked(props) {
444
- return jsxRuntime.jsx("svg", _objectSpread$3(_objectSpread$3({
433
+ return jsxRuntime.jsx("svg", _objectSpread$2(_objectSpread$2({
445
434
  width: 16,
446
435
  height: 16,
447
436
  viewBox: "0 0 16 16",
@@ -473,12 +462,11 @@ var SvgUnchecked = function SvgUnchecked(props) {
473
462
  SvgUnchecked.displayName = 'SvgUnchecked';
474
463
 
475
464
  var UncheckedIcon = function UncheckedIcon(props) {
476
- var theme = react.useTheme();
477
465
  return jsxRuntime.jsx(react.ClassNames, {
478
466
  children: function children(_ref) {
479
467
  var createClass = _ref.css;
480
- return jsxRuntime.jsx(SvgUnchecked, _objectSpread$3(_objectSpread$3({}, props), {}, {
481
- className: createClass(getIconStyles(props, theme))
468
+ return jsxRuntime.jsx(SvgUnchecked, _objectSpread$2(_objectSpread$2({}, props), {}, {
469
+ className: createClass(getIconStyles(props))
482
470
  }));
483
471
  }
484
472
  });
@@ -487,52 +475,45 @@ var UncheckedIcon = function UncheckedIcon(props) {
487
475
  UncheckedIcon.displayName = 'UncheckedIcon';
488
476
  var UncheckedIcon$1 = UncheckedIcon;
489
477
 
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) {
478
+ var getSvgBorderStroke = function getSvgBorderStroke(props) {
495
479
  if (props.isDisabled) {
496
- return vars[designSystem.designTokens.borderColorForInputWhenDisabled];
480
+ return designSystem.designTokens.borderColorForInputWhenDisabled;
497
481
  }
498
482
 
499
483
  if (props.hasError) {
500
- return vars[designSystem.designTokens.borderColorForInputWhenError];
484
+ return designSystem.designTokens.borderColorForInputWhenError;
501
485
  }
502
486
 
503
487
  if (props.isReadOnly) {
504
- return vars[designSystem.designTokens.borderColorForInputWhenReadonly];
488
+ return designSystem.designTokens.borderColorForInputWhenReadonly;
505
489
  }
506
490
 
507
491
  if (props.isHovered && !props.isReadOnly && !props.isDisabled && !props.hasError) {
508
- return vars[designSystem.designTokens.borderColorForInputWhenFocused];
492
+ return designSystem.designTokens.borderColorForInputWhenFocused;
509
493
  }
510
494
 
511
- return vars[designSystem.designTokens.borderColorForInput];
495
+ return designSystem.designTokens.borderColorForInput;
512
496
  };
513
497
 
514
- var getSvgContentFill = function getSvgContentFill(vars, props) {
498
+ var getSvgContentFill = function getSvgContentFill(props) {
515
499
  if (props.isDisabled) {
516
- return vars[designSystem.designTokens.fontColorForInputWhenDisabled];
500
+ return designSystem.designTokens.fontColorForInputWhenDisabled;
517
501
  }
518
502
 
519
503
  if (props.hasError) {
520
- return vars[designSystem.designTokens.fontColorForInputWhenError];
504
+ return designSystem.designTokens.fontColorForInputWhenError;
521
505
  }
522
506
 
523
507
  if (props.isReadOnly) {
524
- return vars[designSystem.designTokens.fontColorForInputWhenReadonly];
508
+ return designSystem.designTokens.fontColorForInputWhenReadonly;
525
509
  }
526
510
 
527
- return vars[designSystem.designTokens.borderColorForInputWhenFocused];
511
+ return designSystem.designTokens.borderColorForInputWhenFocused;
528
512
  };
529
513
 
530
- var getCheckboxWrapperStyles = function getCheckboxWrapperStyles(props, theme) {
531
- var overwrittenVars = _objectSpread$2(_objectSpread$2({}, designSystem.customProperties), theme);
514
+ var getCheckboxWrapperStyles = function getCheckboxWrapperStyles(props) {
532
515
  /* 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), ";}" + ("" ), "" );
516
+ 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
517
  }; // eslint-disable-next-line import/prefer-default-export
537
518
 
538
519
  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 +522,7 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
541
522
 
542
523
  var Input = /*#__PURE__*/_styled__default["default"]("input", {
543
524
  target: "e1ccch1p0"
544
- } )("&:focus+div>svg *[data-style='checkbox__border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ));
525
+ } )("&:focus+div>svg *[data-style='checkbox__border']{stroke:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ));
545
526
 
546
527
  var Checkbox = function Checkbox(props) {
547
528
  var ref = react$1.useRef({
@@ -591,7 +572,7 @@ var defaultProps = {
591
572
 
592
573
  var hoverStyles = function hoverStyles(props) {
593
574
  if (!props.hasError && !props.readOnly && !props.disabled) {
594
- return /*#__PURE__*/react.css("&:hover svg *[data-style='checkbox__border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ), "" );
575
+ return /*#__PURE__*/react.css("&:hover svg *[data-style='checkbox__border']{stroke:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" );
595
576
  }
596
577
 
597
578
  return /*#__PURE__*/react.css("" , "" );
@@ -599,7 +580,7 @@ var hoverStyles = function hoverStyles(props) {
599
580
 
600
581
  var LabelTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
601
582
  target: "e6nn4mw1"
602
- } )("margin-left:", designSystem.customProperties.spacingS, ";outline:none;border-radius:", designSystem.customProperties.borderRadiusForTag, ";" + ("" ));
583
+ } )("margin-left:", designSystem.designTokens.spacingS, ";outline:none;border-radius:", designSystem.designTokens.borderRadiusForTag, ";" + ("" ));
603
584
 
604
585
  var Label = /*#__PURE__*/_styled__default["default"]("label", {
605
586
  target: "e6nn4mw0"
@@ -607,13 +588,12 @@ var Label = /*#__PURE__*/_styled__default["default"]("label", {
607
588
  if (props.disabled) return 'not-allowed';
608
589
  if (props.readOnly) return 'default';
609
590
  return 'pointer';
610
- }, ";position:relative;", hoverStyles, " &:focus-within div{box-shadow:0 0 0 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ));
591
+ }, ";position:relative;", hoverStyles, " &:focus-within div{box-shadow:0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ));
611
592
 
612
593
  var CheckboxInput = function CheckboxInput(props) {
613
594
  // We generate an id in case no id is provided by the parent to attach the
614
595
  // label to the input component.
615
596
  var id = props.id || sequentialId();
616
- var theme = react.useTheme();
617
597
  return jsxRuntime.jsxs(Label, {
618
598
  htmlFor: id,
619
599
  hasError: props.hasError,
@@ -630,7 +610,7 @@ var CheckboxInput = function CheckboxInput(props) {
630
610
  isChecked: props.isChecked,
631
611
  isIndeterminate: props.isIndeterminate
632
612
  }, utils.filterDataAttributes(props)), utils.filterAriaAttributes(props))), jsxRuntime.jsx("div", {
633
- css: getCheckboxWrapperStyles(props, theme),
613
+ css: getCheckboxWrapperStyles(props),
634
614
  children: function () {
635
615
  if (props.isIndeterminate) return jsxRuntime.jsx(IndeterminateIcon$1, {
636
616
  size: "medium"
@@ -661,7 +641,7 @@ CheckboxInput.defaultProps = defaultProps;
661
641
  var CheckboxInput$1 = CheckboxInput;
662
642
 
663
643
  // NOTE: This string will be replaced on build time with the package version.
664
- var version = "15.2.4";
644
+ var version = "15.3.0";
665
645
 
666
646
  exports["default"] = CheckboxInput$1;
667
647
  exports.version = version;