@commercetools-uikit/design-system 20.2.2 → 20.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 (4) hide show
  1. package/dist/commercetools-uikit-design-system.cjs.dev.js +16 -20
  2. package/dist/commercetools-uikit-design-system.cjs.prod.js +16 -20
  3. package/dist/commercetools-uikit-design-system.esm.js +15 -20
  4. package/package.json +8 -5
package/dist/commercetools-uikit-design-system.cjs.dev.js CHANGED
@@ -22,6 +22,7 @@ var isEqual = require('lodash/isEqual');
22
22
  var hooks = require('@commercetools-uikit/hooks');
23
23
  var _Object$fromEntries = require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
24
24
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
25
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
25
26
  var kebabCase = require('lodash/kebabCase');
26
27
  var jsxRuntime = require('@emotion/react/jsx-runtime');
27
28
  var react$1 = require('@emotion/react');
@@ -43,6 +44,7 @@ var merge__default = /*#__PURE__*/_interopDefault(merge);
43
44
  var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
44
45
  var _Object$fromEntries__default = /*#__PURE__*/_interopDefault(_Object$fromEntries);
45
46
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
47
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
46
48
  var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
47
49
 
48
50
  /*
@@ -523,7 +525,7 @@ function transformTokensToCssVarsValues(tokens) {
523
525
  let _ref2 = _slicedToArray(_ref, 2),
524
526
  key = _ref2[0],
525
527
  value = _ref2[1];
526
- return [`--${kebabCase__default["default"](key)}`, value];
528
+ return ["--".concat(kebabCase__default["default"](key)), value];
527
529
  }));
528
530
  }
529
531
 
@@ -548,10 +550,11 @@ function transformTokensToCssVarsReferences(tokens) {
548
550
  },
549
551
  includeDefaultValue = _ref3.includeDefaultValue;
550
552
  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](tokens)).call(_context2, _ref4 => {
553
+ var _context3;
551
554
  let _ref5 = _slicedToArray(_ref4, 2),
552
555
  key = _ref5[0],
553
556
  value = _ref5[1];
554
- return [key, `var(--${kebabCase__default["default"](key)}${includeDefaultValue ? ', ' + value : ''})`];
557
+ return [key, _concatInstanceProperty__default["default"](_context3 = "var(--".concat(kebabCase__default["default"](key))).call(_context3, includeDefaultValue ? ', ' + value : '', ")")];
555
558
  }));
556
559
  }
557
560
 
@@ -574,7 +577,7 @@ const applyTheme = _ref => {
574
577
  if (!target) return;
575
578
  const validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
576
579
  if (newTheme && newTheme !== validTheme) {
577
- console.warn(`ThemeProvider: the specified theme '${newTheme}' is not supported.`);
580
+ console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
578
581
  }
579
582
  const vars = transformTokensToCssVarsValues(merge__default["default"]({}, themes.default, themes[validTheme], isObject__default["default"](themeOverrides) ? themeOverrides : {}));
580
583
  _forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](vars)).call(_context, _ref2 => {
@@ -636,10 +639,11 @@ const useTheme = function () {
636
639
  // If we use 'useLayoutEffect' here, we would be trying to read the
637
640
  // data attribute before it gets set from the effect in the ThemeProvider
638
641
  react.useEffect(() => {
642
+ var _parentSelectorRef$cu;
639
643
  // We need to read the current theme after the provider is rendered
640
644
  // to have the actual selected theme (calculated client-side) in the
641
645
  // hook local state
642
- const nextTheme = parentSelectorRef.current()?.dataset.theme;
646
+ const nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
643
647
  if (nextTheme) {
644
648
  setTheme(nextTheme);
645
649
  }
@@ -659,7 +663,6 @@ const withThemeContext = WrappedComponent => {
659
663
  };
660
664
  };
661
665
 
662
- /* eslint-disable @typescript-eslint/no-unused-vars */
663
666
  const iconSizes = {
664
667
  small: 12,
665
668
  medium: 16,
@@ -684,31 +687,24 @@ const getSizeDimensions = size => {
684
687
  case '30':
685
688
  case '40':
686
689
  return {
687
- width: `${iconSizes[size]}px`,
688
- height: `${iconSizes[size]}px`
690
+ width: "".concat(iconSizes[size], "px"),
691
+ height: "".concat(iconSizes[size], "px")
689
692
  };
690
693
  default:
691
694
  return {
692
- width: `${iconSizes['40']}px`,
693
- height: `${iconSizes['40']}px`
695
+ width: "".concat(iconSizes['40'], "px"),
696
+ height: "".concat(iconSizes['40'], "px")
694
697
  };
695
698
  }
696
699
  };
697
700
  const getSizeStyle = size => {
701
+ var _context, _context2;
698
702
  const dimensions = getSizeDimensions(size);
699
703
  switch (size) {
700
704
  case 'scale':
701
- return `
702
- &:not(:root) {
703
- width: ${dimensions.width};
704
- height: ${dimensions.height};
705
- }
706
- `;
705
+ return _concatInstanceProperty__default["default"](_context = "\n &:not(:root) {\n width: ".concat(dimensions.width, ";\n height: ")).call(_context, dimensions.height, ";\n }\n ");
707
706
  default:
708
- return `
709
- width: ${dimensions.width};
710
- height: ${dimensions.height};
711
- `;
707
+ return _concatInstanceProperty__default["default"](_context2 = "\n width: ".concat(dimensions.width, ";\n height: ")).call(_context2, dimensions.height, ";\n ");
712
708
  }
713
709
  };
714
710
  const getColor = color => {
@@ -751,7 +747,7 @@ const getColor = color => {
751
747
  const getIconStyles = props => /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + (process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImljb24tdXRpbHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEd1RCIsImZpbGUiOiJpY29uLXV0aWxzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgQHR5cGVzY3JpcHQtZXNsaW50L25vLXVudXNlZC12YXJzICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgZGVzaWduVG9rZW5zIGZyb20gJy4vZGVzaWduLXRva2Vucyc7XG5cbmV4cG9ydCB0eXBlIFRJY29uUHJvcHMgPSBSZWNvcmQ8c3RyaW5nLCB1bmtub3duPiAmIHtcbiAgY29sb3I/OlxuICAgIHwgJ3NvbGlkJ1xuICAgIHwgJ25ldXRyYWw2MCdcbiAgICB8ICdzdXJmYWNlJ1xuICAgIHwgJ2luZm8nXG4gICAgfCAncHJpbWFyeSdcbiAgICB8ICdwcmltYXJ5NDAnXG4gICAgfCAnd2FybmluZydcbiAgICB8ICdlcnJvcidcbiAgICB8ICdzdWNjZXNzJztcbiAgLyoqXG4gICAqIFRoZSBzaXplIG9mIHRoZSBpY29uLiAnc21hbGwnLCAnbWVkaXVtJywgJ2JpZycgaGF2ZSBiZWVuIGRlcHJlY2F0ZWQgaW4gZmF2b3Igb2YgJzEwJywgJzIwJywgJzMwJywgJzQwJy5cbiAgICovXG4gIHNpemU/OiAnc21hbGwnIHwgJ21lZGl1bScgfCAnYmlnJyB8ICdzY2FsZScgfCAnMTAnIHwgJzIwJyB8ICczMCcgfCAnNDAnO1xufTtcbmV4cG9ydCB0eXBlIFRTVkdQcm9wcyA9IFRJY29uUHJvcHMgJiB7IGNsYXNzTmFtZTogc3RyaW5nIH07XG5cbmNvbnN0IGljb25TaXplcyA9IHtcbiAgc21hbGw6IDEyLFxuICBtZWRpdW06IDE2LFxuICBiaWc6IDI0LFxuICAnMTAnOiAxMixcbiAgJzIwJzogMTYsXG4gICczMCc6IDIwLFxuICAnNDAnOiAyNCxcbn0gYXMgY29uc3Q7XG5jb25zdCBnZXRTaXplRGltZW5zaW9ucyA9IChzaXplOiBUSWNvblByb3BzWydzaXplJ10pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnc2NhbGUnOlxuICAgICAgcmV0dXJuIHsgd2lkdGg6ICcxMDAlJywgaGVpZ2h0OiAnYXV0bycgfTtcbiAgICBjYXNlICdzbWFsbCc6XG4gICAgY2FzZSAnbWVkaXVtJzpcbiAgICBjYXNlICdiaWcnOlxuICAgIGNhc2UgJzEwJzpcbiAgICBjYXNlICcyMCc6XG4gICAgY2FzZSAnMzAnOlxuICAgIGNhc2UgJzQwJzpcbiAgICAgIHJldHVybiB7IHdpZHRoOiBgJHtpY29uU2l6ZXNbc2l6ZV19cHhgLCBoZWlnaHQ6IGAke2ljb25TaXplc1tzaXplXX1weGAgfTtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIHsgd2lkdGg6IGAke2ljb25TaXplc1snNDAnXX1weGAsIGhlaWdodDogYCR7aWNvblNpemVzWyc0MCddfXB4YCB9O1xuICB9XG59O1xuY29uc3QgZ2V0U2l6ZVN0eWxlID0gKHNpemU6IFRJY29uUHJvcHNbJ3NpemUnXSkgPT4ge1xuICBjb25zdCBkaW1lbnNpb25zID0gZ2V0U2l6ZURpbWVuc2lvbnMoc2l6ZSk7XG4gIHN3aXRjaCAoc2l6ZSkge1xuICAgIGNhc2UgJ3NjYWxlJzpcbiAgICAgIHJldHVybiBgXG4gICAgICAgICY6bm90KDpyb290KSB7XG4gICAgICAgICAgd2lkdGg6ICR7ZGltZW5zaW9ucy53aWR0aH07XG4gICAgICAgICAgaGVpZ2h0OiAke2RpbWVuc2lvbnMuaGVpZ2h0fTtcbiAgICAgICAgfVxuICAgICAgYDtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIGBcbiAgICAgICAgd2lkdGg6ICR7ZGltZW5zaW9ucy53aWR0aH07XG4gICAgICAgIGhlaWdodDogJHtkaW1lbnNpb25zLmhlaWdodH07XG4gICAgICBgO1xuICB9XG59O1xuXG5jb25zdCBnZXRDb2xvciA9IChjb2xvcjogVEljb25Qcm9wc1snY29sb3InXSkgPT4ge1xuICBpZiAoIWNvbG9yKSByZXR1cm4gJ2luaGVyaXQnO1xuXG4gIGxldCBpY29uQ29sb3I7XG4gIHN3aXRjaCAoY29sb3IpIHtcbiAgICBjYXNlICdzb2xpZCc6XG4gICAgICBpY29uQ29sb3IgPSBkZXNpZ25Ub2tlbnMuY29sb3JTb2xpZDtcbiAgICAgIGJyZWFrO1xuICAgIGNhc2UgJ25ldXRyYWw2MCc6XG4gICAgICBpY29uQ29sb3IgPSBkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsNjA7XG4gICAgICBicmVhaztcbiAgICBjYXNlICdzdXJmYWNlJzpcbiAgICAgIGljb25Db2xvciA9IGRlc2lnblRva2Vucy5jb2xvclN1cmZhY2U7XG4gICAgICBicmVhaztcbiAgICBjYXNlICdpbmZvJzpcbiAgICAgIGljb25Db2xvciA9IGRlc2lnblRva2Vucy5jb2xvckluZm87XG4gICAgICBicmVhaztcbiAgICBjYXNlICdwcmltYXJ5JzpcbiAgICAgIGljb25Db2xvciA9IGRlc2lnblRva2Vucy5jb2xvclByaW1hcnk7XG4gICAgICBicmVhaztcbiAgICBjYXNlICdwcmltYXJ5NDAnOlxuICAgICAgaWNvbkNvbG9yID0gZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTQwO1xuICAgICAgYnJlYWs7XG4gICAgY2FzZSAnd2FybmluZyc6XG4gICAgICBpY29uQ29sb3IgPSBkZXNpZ25Ub2tlbnMuY29sb3JXYXJuaW5nO1xuICAgICAgYnJlYWs7XG4gICAgY2FzZSAnZXJyb3InOlxuICAgICAgaWNvbkNvbG9yID0gZGVzaWduVG9rZW5zLmNvbG9yRXJyb3I7XG4gICAgICBicmVhaztcbiAgICBjYXNlICdzdWNjZXNzJzpcbiAgICAgIGljb25Db2xvciA9IGRlc2lnblRva2Vucy5jb2xvclN1Y2Nlc3M7XG4gICAgICBicmVhaztcbiAgICBkZWZhdWx0OlxuICAgICAgYnJlYWs7XG4gIH1cblxuICBpZiAoIWljb25Db2xvcikge1xuICAgIHJldHVybiAnaW5oZXJpdCc7XG4gIH1cblxuICByZXR1cm4gaWNvbkNvbG9yO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldEljb25TdHlsZXMgPSAocHJvcHM6IFRJY29uUHJvcHMpID0+IGNzc2BcbiAgKjpub3QoW2ZpbGw9J25vbmUnXSkge1xuICAgIGZpbGw6ICR7Z2V0Q29sb3IocHJvcHMuY29sb3IpfTtcbiAgfVxuICAmLFxuICBpbWFnZSB7XG4gICAgJHtnZXRTaXplU3R5bGUocHJvcHMuc2l6ZSl9O1xuICB9XG4gIGZsZXgtc2hyaW5rOiAwO1xuYDtcbiJdfQ== */");
752
748
 
753
749
  // NOTE: This string will be replaced on build time with the package version.
754
- var version = "20.2.2";
750
+ var version = "20.3.0";
755
751
 
756
752
  exports.ThemeProvider = ThemeProvider;
757
753
  exports.customProperties = designTokens$1;
package/dist/commercetools-uikit-design-system.cjs.prod.js CHANGED
@@ -22,6 +22,7 @@ var isEqual = require('lodash/isEqual');
22
22
  var hooks = require('@commercetools-uikit/hooks');
23
23
  var _Object$fromEntries = require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
24
24
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
25
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
25
26
  var kebabCase = require('lodash/kebabCase');
26
27
  var jsxRuntime = require('@emotion/react/jsx-runtime');
27
28
  var react$1 = require('@emotion/react');
@@ -43,6 +44,7 @@ var merge__default = /*#__PURE__*/_interopDefault(merge);
43
44
  var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
44
45
  var _Object$fromEntries__default = /*#__PURE__*/_interopDefault(_Object$fromEntries);
45
46
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
47
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
46
48
  var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
47
49
 
48
50
  /*
@@ -523,7 +525,7 @@ function transformTokensToCssVarsValues(tokens) {
523
525
  let _ref2 = _slicedToArray(_ref, 2),
524
526
  key = _ref2[0],
525
527
  value = _ref2[1];
526
- return [`--${kebabCase__default["default"](key)}`, value];
528
+ return ["--".concat(kebabCase__default["default"](key)), value];
527
529
  }));
528
530
  }
529
531
 
@@ -548,10 +550,11 @@ function transformTokensToCssVarsReferences(tokens) {
548
550
  },
549
551
  includeDefaultValue = _ref3.includeDefaultValue;
550
552
  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](tokens)).call(_context2, _ref4 => {
553
+ var _context3;
551
554
  let _ref5 = _slicedToArray(_ref4, 2),
552
555
  key = _ref5[0],
553
556
  value = _ref5[1];
554
- return [key, `var(--${kebabCase__default["default"](key)}${includeDefaultValue ? ', ' + value : ''})`];
557
+ return [key, _concatInstanceProperty__default["default"](_context3 = "var(--".concat(kebabCase__default["default"](key))).call(_context3, includeDefaultValue ? ', ' + value : '', ")")];
555
558
  }));
556
559
  }
557
560
 
@@ -574,7 +577,7 @@ const applyTheme = _ref => {
574
577
  if (!target) return;
575
578
  const validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
576
579
  if (newTheme && newTheme !== validTheme) {
577
- console.warn(`ThemeProvider: the specified theme '${newTheme}' is not supported.`);
580
+ console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
578
581
  }
579
582
  const vars = transformTokensToCssVarsValues(merge__default["default"]({}, themes.default, themes[validTheme], isObject__default["default"](themeOverrides) ? themeOverrides : {}));
580
583
  _forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](vars)).call(_context, _ref2 => {
@@ -636,10 +639,11 @@ const useTheme = function () {
636
639
  // If we use 'useLayoutEffect' here, we would be trying to read the
637
640
  // data attribute before it gets set from the effect in the ThemeProvider
638
641
  react.useEffect(() => {
642
+ var _parentSelectorRef$cu;
639
643
  // We need to read the current theme after the provider is rendered
640
644
  // to have the actual selected theme (calculated client-side) in the
641
645
  // hook local state
642
- const nextTheme = parentSelectorRef.current()?.dataset.theme;
646
+ const nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
643
647
  if (nextTheme) {
644
648
  setTheme(nextTheme);
645
649
  }
@@ -659,7 +663,6 @@ const withThemeContext = WrappedComponent => {
659
663
  };
660
664
  };
661
665
 
662
- /* eslint-disable @typescript-eslint/no-unused-vars */
663
666
  const iconSizes = {
664
667
  small: 12,
665
668
  medium: 16,
@@ -684,31 +687,24 @@ const getSizeDimensions = size => {
684
687
  case '30':
685
688
  case '40':
686
689
  return {
687
- width: `${iconSizes[size]}px`,
688
- height: `${iconSizes[size]}px`
690
+ width: "".concat(iconSizes[size], "px"),
691
+ height: "".concat(iconSizes[size], "px")
689
692
  };
690
693
  default:
691
694
  return {
692
- width: `${iconSizes['40']}px`,
693
- height: `${iconSizes['40']}px`
695
+ width: "".concat(iconSizes['40'], "px"),
696
+ height: "".concat(iconSizes['40'], "px")
694
697
  };
695
698
  }
696
699
  };
697
700
  const getSizeStyle = size => {
701
+ var _context, _context2;
698
702
  const dimensions = getSizeDimensions(size);
699
703
  switch (size) {
700
704
  case 'scale':
701
- return `
702
- &:not(:root) {
703
- width: ${dimensions.width};
704
- height: ${dimensions.height};
705
- }
706
- `;
705
+ return _concatInstanceProperty__default["default"](_context = "\n &:not(:root) {\n width: ".concat(dimensions.width, ";\n height: ")).call(_context, dimensions.height, ";\n }\n ");
707
706
  default:
708
- return `
709
- width: ${dimensions.width};
710
- height: ${dimensions.height};
711
- `;
707
+ return _concatInstanceProperty__default["default"](_context2 = "\n width: ".concat(dimensions.width, ";\n height: ")).call(_context2, dimensions.height, ";\n ");
712
708
  }
713
709
  };
714
710
  const getColor = color => {
@@ -751,7 +747,7 @@ const getColor = color => {
751
747
  const getIconStyles = props => /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
752
748
 
753
749
  // NOTE: This string will be replaced on build time with the package version.
754
- var version = "20.2.2";
750
+ var version = "20.3.0";
755
751
 
756
752
  exports.ThemeProvider = ThemeProvider;
757
753
  exports.customProperties = designTokens$1;
package/dist/commercetools-uikit-design-system.esm.js CHANGED
@@ -18,6 +18,7 @@ import isEqual from 'lodash/isEqual';
18
18
  import { useMutationObserver } from '@commercetools-uikit/hooks';
19
19
  import _Object$fromEntries from '@babel/runtime-corejs3/core-js-stable/object/from-entries';
20
20
  import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
21
+ import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
21
22
  import kebabCase from 'lodash/kebabCase';
22
23
  import { jsx } from '@emotion/react/jsx-runtime';
23
24
  import { css } from '@emotion/react';
@@ -500,7 +501,7 @@ function transformTokensToCssVarsValues(tokens) {
500
501
  let _ref2 = _slicedToArray(_ref, 2),
501
502
  key = _ref2[0],
502
503
  value = _ref2[1];
503
- return [`--${kebabCase(key)}`, value];
504
+ return ["--".concat(kebabCase(key)), value];
504
505
  }));
505
506
  }
506
507
 
@@ -525,10 +526,11 @@ function transformTokensToCssVarsReferences(tokens) {
525
526
  },
526
527
  includeDefaultValue = _ref3.includeDefaultValue;
527
528
  return _Object$fromEntries(_mapInstanceProperty(_context2 = _Object$entries(tokens)).call(_context2, _ref4 => {
529
+ var _context3;
528
530
  let _ref5 = _slicedToArray(_ref4, 2),
529
531
  key = _ref5[0],
530
532
  value = _ref5[1];
531
- return [key, `var(--${kebabCase(key)}${includeDefaultValue ? ', ' + value : ''})`];
533
+ return [key, _concatInstanceProperty(_context3 = "var(--".concat(kebabCase(key))).call(_context3, includeDefaultValue ? ', ' + value : '', ")")];
532
534
  }));
533
535
  }
534
536
 
@@ -551,7 +553,7 @@ const applyTheme = _ref => {
551
553
  if (!target) return;
552
554
  const validTheme = _includesInstanceProperty(allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
553
555
  if (newTheme && newTheme !== validTheme) {
554
- console.warn(`ThemeProvider: the specified theme '${newTheme}' is not supported.`);
556
+ console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
555
557
  }
556
558
  const vars = transformTokensToCssVarsValues(merge({}, themes.default, themes[validTheme], isObject(themeOverrides) ? themeOverrides : {}));
557
559
  _forEachInstanceProperty(_context = _Object$entries(vars)).call(_context, _ref2 => {
@@ -613,10 +615,11 @@ const useTheme = function () {
613
615
  // If we use 'useLayoutEffect' here, we would be trying to read the
614
616
  // data attribute before it gets set from the effect in the ThemeProvider
615
617
  useEffect(() => {
618
+ var _parentSelectorRef$cu;
616
619
  // We need to read the current theme after the provider is rendered
617
620
  // to have the actual selected theme (calculated client-side) in the
618
621
  // hook local state
619
- const nextTheme = parentSelectorRef.current()?.dataset.theme;
622
+ const nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
620
623
  if (nextTheme) {
621
624
  setTheme(nextTheme);
622
625
  }
@@ -636,7 +639,6 @@ const withThemeContext = WrappedComponent => {
636
639
  };
637
640
  };
638
641
 
639
- /* eslint-disable @typescript-eslint/no-unused-vars */
640
642
  const iconSizes = {
641
643
  small: 12,
642
644
  medium: 16,
@@ -661,31 +663,24 @@ const getSizeDimensions = size => {
661
663
  case '30':
662
664
  case '40':
663
665
  return {
664
- width: `${iconSizes[size]}px`,
665
- height: `${iconSizes[size]}px`
666
+ width: "".concat(iconSizes[size], "px"),
667
+ height: "".concat(iconSizes[size], "px")
666
668
  };
667
669
  default:
668
670
  return {
669
- width: `${iconSizes['40']}px`,
670
- height: `${iconSizes['40']}px`
671
+ width: "".concat(iconSizes['40'], "px"),
672
+ height: "".concat(iconSizes['40'], "px")
671
673
  };
672
674
  }
673
675
  };
674
676
  const getSizeStyle = size => {
677
+ var _context, _context2;
675
678
  const dimensions = getSizeDimensions(size);
676
679
  switch (size) {
677
680
  case 'scale':
678
- return `
679
- &:not(:root) {
680
- width: ${dimensions.width};
681
- height: ${dimensions.height};
682
- }
683
- `;
681
+ return _concatInstanceProperty(_context = "\n &:not(:root) {\n width: ".concat(dimensions.width, ";\n height: ")).call(_context, dimensions.height, ";\n }\n ");
684
682
  default:
685
- return `
686
- width: ${dimensions.width};
687
- height: ${dimensions.height};
688
- `;
683
+ return _concatInstanceProperty(_context2 = "\n width: ".concat(dimensions.width, ";\n height: ")).call(_context2, dimensions.height, ";\n ");
689
684
  }
690
685
  };
691
686
  const getColor = color => {
@@ -728,6 +723,6 @@ const getColor = color => {
728
723
  const getIconStyles = props => /*#__PURE__*/css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + (process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImljb24tdXRpbHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEd1RCIsImZpbGUiOiJpY29uLXV0aWxzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgQHR5cGVzY3JpcHQtZXNsaW50L25vLXVudXNlZC12YXJzICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgZGVzaWduVG9rZW5zIGZyb20gJy4vZGVzaWduLXRva2Vucyc7XG5cbmV4cG9ydCB0eXBlIFRJY29uUHJvcHMgPSBSZWNvcmQ8c3RyaW5nLCB1bmtub3duPiAmIHtcbiAgY29sb3I/OlxuICAgIHwgJ3NvbGlkJ1xuICAgIHwgJ25ldXRyYWw2MCdcbiAgICB8ICdzdXJmYWNlJ1xuICAgIHwgJ2luZm8nXG4gICAgfCAncHJpbWFyeSdcbiAgICB8ICdwcmltYXJ5NDAnXG4gICAgfCAnd2FybmluZydcbiAgICB8ICdlcnJvcidcbiAgICB8ICdzdWNjZXNzJztcbiAgLyoqXG4gICAqIFRoZSBzaXplIG9mIHRoZSBpY29uLiAnc21hbGwnLCAnbWVkaXVtJywgJ2JpZycgaGF2ZSBiZWVuIGRlcHJlY2F0ZWQgaW4gZmF2b3Igb2YgJzEwJywgJzIwJywgJzMwJywgJzQwJy5cbiAgICovXG4gIHNpemU/OiAnc21hbGwnIHwgJ21lZGl1bScgfCAnYmlnJyB8ICdzY2FsZScgfCAnMTAnIHwgJzIwJyB8ICczMCcgfCAnNDAnO1xufTtcbmV4cG9ydCB0eXBlIFRTVkdQcm9wcyA9IFRJY29uUHJvcHMgJiB7IGNsYXNzTmFtZTogc3RyaW5nIH07XG5cbmNvbnN0IGljb25TaXplcyA9IHtcbiAgc21hbGw6IDEyLFxuICBtZWRpdW06IDE2LFxuICBiaWc6IDI0LFxuICAnMTAnOiAxMixcbiAgJzIwJzogMTYsXG4gICczMCc6IDIwLFxuICAnNDAnOiAyNCxcbn0gYXMgY29uc3Q7XG5jb25zdCBnZXRTaXplRGltZW5zaW9ucyA9IChzaXplOiBUSWNvblByb3BzWydzaXplJ10pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnc2NhbGUnOlxuICAgICAgcmV0dXJuIHsgd2lkdGg6ICcxMDAlJywgaGVpZ2h0OiAnYXV0bycgfTtcbiAgICBjYXNlICdzbWFsbCc6XG4gICAgY2FzZSAnbWVkaXVtJzpcbiAgICBjYXNlICdiaWcnOlxuICAgIGNhc2UgJzEwJzpcbiAgICBjYXNlICcyMCc6XG4gICAgY2FzZSAnMzAnOlxuICAgIGNhc2UgJzQwJzpcbiAgICAgIHJldHVybiB7IHdpZHRoOiBgJHtpY29uU2l6ZXNbc2l6ZV19cHhgLCBoZWlnaHQ6IGAke2ljb25TaXplc1tzaXplXX1weGAgfTtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIHsgd2lkdGg6IGAke2ljb25TaXplc1snNDAnXX1weGAsIGhlaWdodDogYCR7aWNvblNpemVzWyc0MCddfXB4YCB9O1xuICB9XG59O1xuY29uc3QgZ2V0U2l6ZVN0eWxlID0gKHNpemU6IFRJY29uUHJvcHNbJ3NpemUnXSkgPT4ge1xuICBjb25zdCBkaW1lbnNpb25zID0gZ2V0U2l6ZURpbWVuc2lvbnMoc2l6ZSk7XG4gIHN3aXRjaCAoc2l6ZSkge1xuICAgIGNhc2UgJ3NjYWxlJzpcbiAgICAgIHJldHVybiBgXG4gICAgICAgICY6bm90KDpyb290KSB7XG4gICAgICAgICAgd2lkdGg6ICR7ZGltZW5zaW9ucy53aWR0aH07XG4gICAgICAgICAgaGVpZ2h0OiAke2RpbWVuc2lvbnMuaGVpZ2h0fTtcbiAgICAgICAgfVxuICAgICAgYDtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIGBcbiAgICAgICAgd2lkdGg6ICR7ZGltZW5zaW9ucy53aWR0aH07XG4gICAgICAgIGhlaWdodDogJHtkaW1lbnNpb25zLmhlaWdodH07XG4gICAgICBgO1xuICB9XG59O1xuXG5jb25zdCBnZXRDb2xvciA9IChjb2xvcjogVEljb25Qcm9wc1snY29sb3InXSkgPT4ge1xuICBpZiAoIWNvbG9yKSByZXR1cm4gJ2luaGVyaXQnO1xuXG4gIGxldCBpY29uQ29sb3I7XG4gIHN3aXRjaCAoY29sb3IpIHtcbiAgICBjYXNlICdzb2xpZCc6XG4gICAgICBpY29uQ29sb3IgPSBkZXNpZ25Ub2tlbnMuY29sb3JTb2xpZDtcbiAgICAgIGJyZWFrO1xuICAgIGNhc2UgJ25ldXRyYWw2MCc6XG4gICAgICBpY29uQ29sb3IgPSBkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsNjA7XG4gICAgICBicmVhaztcbiAgICBjYXNlICdzdXJmYWNlJzpcbiAgICAgIGljb25Db2xvciA9IGRlc2lnblRva2Vucy5jb2xvclN1cmZhY2U7XG4gICAgICBicmVhaztcbiAgICBjYXNlICdpbmZvJzpcbiAgICAgIGljb25Db2xvciA9IGRlc2lnblRva2Vucy5jb2xvckluZm87XG4gICAgICBicmVhaztcbiAgICBjYXNlICdwcmltYXJ5JzpcbiAgICAgIGljb25Db2xvciA9IGRlc2lnblRva2Vucy5jb2xvclByaW1hcnk7XG4gICAgICBicmVhaztcbiAgICBjYXNlICdwcmltYXJ5NDAnOlxuICAgICAgaWNvbkNvbG9yID0gZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTQwO1xuICAgICAgYnJlYWs7XG4gICAgY2FzZSAnd2FybmluZyc6XG4gICAgICBpY29uQ29sb3IgPSBkZXNpZ25Ub2tlbnMuY29sb3JXYXJuaW5nO1xuICAgICAgYnJlYWs7XG4gICAgY2FzZSAnZXJyb3InOlxuICAgICAgaWNvbkNvbG9yID0gZGVzaWduVG9rZW5zLmNvbG9yRXJyb3I7XG4gICAgICBicmVhaztcbiAgICBjYXNlICdzdWNjZXNzJzpcbiAgICAgIGljb25Db2xvciA9IGRlc2lnblRva2Vucy5jb2xvclN1Y2Nlc3M7XG4gICAgICBicmVhaztcbiAgICBkZWZhdWx0OlxuICAgICAgYnJlYWs7XG4gIH1cblxuICBpZiAoIWljb25Db2xvcikge1xuICAgIHJldHVybiAnaW5oZXJpdCc7XG4gIH1cblxuICByZXR1cm4gaWNvbkNvbG9yO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldEljb25TdHlsZXMgPSAocHJvcHM6IFRJY29uUHJvcHMpID0+IGNzc2BcbiAgKjpub3QoW2ZpbGw9J25vbmUnXSkge1xuICAgIGZpbGw6ICR7Z2V0Q29sb3IocHJvcHMuY29sb3IpfTtcbiAgfVxuICAmLFxuICBpbWFnZSB7XG4gICAgJHtnZXRTaXplU3R5bGUocHJvcHMuc2l6ZSl9O1xuICB9XG4gIGZsZXgtc2hyaW5rOiAwO1xuYDtcbiJdfQ== */");
729
724
 
730
725
  // NOTE: This string will be replaced on build time with the package version.
731
- var version = "20.2.2";
726
+ var version = "20.3.0";
732
727
 
733
728
  export { ThemeProvider, designTokens$1 as customProperties, designTokens$1 as designTokens, getIconStyles, themes, transformTokensToCssVarsReferences, transformTokensToCssVarsValues, useTheme, version, withThemeContext };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/design-system",
3
3
  "description": "Core package of the commercetools design system.",
4
- "version": "20.2.2",
4
+ "version": "20.3.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -25,12 +25,15 @@
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.20.13",
27
27
  "@babel/runtime-corejs3": "^7.20.13",
28
- "@commercetools-uikit/hooks": "20.2.2",
28
+ "@commercetools-uikit/hooks": "20.3.0",
29
29
  "@emotion/react": "^11.10.5",
30
- "lodash": "4.17.21",
31
- "react": "19.1.0"
30
+ "lodash": "4.17.21"
32
31
  },
33
32
  "devDependencies": {
34
- "nodemon": "^3.0.0"
33
+ "nodemon": "^3.0.0",
34
+ "react": "19.2.0"
35
+ },
36
+ "peerDependencies": {
37
+ "react": "19.x"
35
38
  }
36
39
  }