@commercetools-uikit/design-system 15.15.0 → 15.15.1

package/dist/commercetools-uikit-design-system.cjs.d.ts

@@ -1 +1,2 @@
 export * from "./declarations/src/index";
+//# sourceMappingURL=commercetools-uikit-design-system.cjs.d.ts.map

package/dist/commercetools-uikit-design-system.cjs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commercetools-uikit-design-system.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}

package/dist/commercetools-uikit-design-system.cjs.dev.js

@@ -52,7 +52,7 @@ var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
   This file is created by the 'scripts/generate-design-tokens.js' script.
   The variables should be updated in 'materials/internals/definition.yaml'.
 */
-var themes = {
+const themes = {
   default: {
     colorPrimary: '#00b39e',
     colorPrimary25: 'hsl(172.9608938547486, 100%, 25%)',
@@ -838,7 +838,7 @@ var themes = {
     shadowForTagWhenHovered: 'none'
   }
 };
-var designTokens = {
+const designTokens = {
   colorPrimary: 'var(--color-primary, #00b39e)',
   colorPrimary25: 'var(--color-primary-25, hsl(172.9608938547486, 100%, 25%))',
   colorPrimary40: 'var(--color-primary-40, hsl(172.9608938547486, 100%, 40%))',
@@ -1340,8 +1340,8 @@ var designTokens$1 = designTokens;
 function transformTokensToCssVarsValues(tokens) {
   var _context;
 
-  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context = _Object$entries__default["default"](tokens)).call(_context, function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
+  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context = _Object$entries__default["default"](tokens)).call(_context, _ref => {
+    let _ref2 = _slicedToArray(_ref, 2),
         key = _ref2[0],
         value = _ref2[1];
 
@@ -1367,15 +1367,15 @@ function transformTokensToCssVarsValues(tokens) {
 function transformTokensToCssVarsReferences(tokens) {
   var _context2;
 
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+  let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     includeDefaultValue: true
   },
       includeDefaultValue = _ref3.includeDefaultValue;
 
-  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](tokens)).call(_context2, function (_ref4) {
+  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](tokens)).call(_context2, _ref4 => {
     var _context3;
 
-    var _ref5 = _slicedToArray(_ref4, 2),
+    let _ref5 = _slicedToArray(_ref4, 2),
         key = _ref5[0],
         value = _ref5[1];
 
@@ -1387,35 +1387,33 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var allThemesNames = _Object$keys__default["default"](themes);
+const allThemesNames = _Object$keys__default["default"](themes);
 
 // used to cover SSR builds (for instance in Gatsby)
-var isBrowser = typeof window !== 'undefined';
+const isBrowser = typeof window !== 'undefined';
 
-var defaultParentSelector = function defaultParentSelector() {
-  return isBrowser ? document.querySelector(':root') : null;
-};
+const defaultParentSelector = () => isBrowser ? document.querySelector(':root') : null;
 
-var applyTheme = function applyTheme(_ref) {
+const applyTheme = _ref => {
   var _context;
 
-  var newTheme = _ref.newTheme,
+  let newTheme = _ref.newTheme,
       _ref$parentSelector = _ref.parentSelector,
       parentSelector = _ref$parentSelector === void 0 ? defaultParentSelector : _ref$parentSelector,
       themeOverrides = _ref.themeOverrides;
-  var target = parentSelector(); // With no target we can't change themes
+  const target = parentSelector(); // With no target we can't change themes
 
   if (!target) return;
-  var validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
+  const validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
 
   if (newTheme && newTheme !== validTheme) {
     console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
   }
 
-  var vars = transformTokensToCssVarsValues(merge__default["default"]({}, themes.default, themes[validTheme], isObject__default["default"](themeOverrides) ? themeOverrides : {}));
+  const vars = transformTokensToCssVarsValues(merge__default["default"]({}, themes.default, themes[validTheme], isObject__default["default"](themeOverrides) ? themeOverrides : {}));
 
-  _forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](vars)).call(_context, function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
+  _forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](vars)).call(_context, _ref2 => {
+    let _ref3 = _slicedToArray(_ref2, 2),
         key = _ref3[0],
         value = _ref3[1];
 
@@ -1425,11 +1423,11 @@ var applyTheme = function applyTheme(_ref) {
   target.setAttribute('data-theme', validTheme);
 };
 
-var ThemeProvider = function ThemeProvider(props) {
-  var parentSelectorRef = react.useRef(props.parentSelector);
-  var themeNameRef = react.useRef();
-  var themeOverridesRef = react.useRef();
-  react.useLayoutEffect(function () {
+const ThemeProvider = props => {
+  const parentSelectorRef = react.useRef(props.parentSelector);
+  const themeNameRef = react.useRef();
+  const themeOverridesRef = react.useRef();
+  react.useLayoutEffect(() => {
     // We want to make sure we don't really apply the change when the props
     // provided include a new object with the same theme overrides
     // (eg: users providing an inline object as prop to the ThemeProvider)
@@ -1456,20 +1454,20 @@ ThemeProvider.defaultProps = {
   theme: 'default'
 };
 
-var useTheme = function useTheme() {
-  var parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultParentSelector;
+const useTheme = function () {
+  let parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultParentSelector;
 
-  var _useState = react.useState('default'),
-      _useState2 = _slicedToArray(_useState, 2),
-      theme = _useState2[0],
-      setTheme = _useState2[1];
+  const _useState = react.useState('default'),
+        _useState2 = _slicedToArray(_useState, 2),
+        theme = _useState2[0],
+        setTheme = _useState2[1];
 
-  var parentSelectorRef = react.useRef(parentSelector);
-  var mutationChangeCallback = react.useCallback(function (mutationList) {
+  const parentSelectorRef = react.useRef(parentSelector);
+  const mutationChangeCallback = react.useCallback(mutationList => {
     // We expect only a single element in the mutation list as we configured the
     // observer to only listen to `data-theme` changes.
-    var _mutationList = _slicedToArray(mutationList, 1),
-        mutationEvent = _mutationList[0];
+    const _mutationList = _slicedToArray(mutationList, 1),
+          mutationEvent = _mutationList[0];
 
     setTheme(mutationEvent.target.dataset.theme);
   }, []);
@@ -1478,41 +1476,39 @@ var useTheme = function useTheme() {
     attributeFilter: ['data-theme']
   });
 
-  var themedValue = function themedValue(defaultThemeValue, newThemeValue) {
-    return theme === 'default' ? defaultThemeValue : newThemeValue;
-  }; // If we use 'useLayoutEffect' here, we would be trying to read the
+  const themedValue = (defaultThemeValue, newThemeValue) => theme === 'default' ? defaultThemeValue : newThemeValue; // If we use 'useLayoutEffect' here, we would be trying to read the
   // data attribute before it gets set from the effect in the ThemeProvider
 
 
-  react.useEffect(function () {
+  react.useEffect(() => {
     var _parentSelectorRef$cu;
 
     // We need to read the current theme after the provider is rendered
     // to have the actual selected theme (calculated client-side) in the
     // hook local state
-    var nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
+    const nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
 
     if (nextTheme) {
       setTheme(nextTheme);
     }
   }, []);
   return {
-    theme: theme,
-    themedValue: themedValue,
+    theme,
+    themedValue,
     isNewTheme: theme === 'test'
   };
 };
 
-var withThemeContext = function withThemeContext(WrappedComponent) {
+const withThemeContext = WrappedComponent => {
   // eslint-disable-next-line react/display-name
-  return function (props) {
-    var themeUtilties = useTheme();
+  return props => {
+    const themeUtilties = useTheme();
     return jsxRuntime.jsx(WrappedComponent, _objectSpread(_objectSpread({}, props), themeUtilties));
   };
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.15.0";
+var version = "15.15.1";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;

package/dist/commercetools-uikit-design-system.cjs.prod.js

@@ -52,7 +52,7 @@ var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
   This file is created by the 'scripts/generate-design-tokens.js' script.
   The variables should be updated in 'materials/internals/definition.yaml'.
 */
-var themes = {
+const themes = {
   default: {
     colorPrimary: '#00b39e',
     colorPrimary25: 'hsl(172.9608938547486, 100%, 25%)',
@@ -838,7 +838,7 @@ var themes = {
     shadowForTagWhenHovered: 'none'
   }
 };
-var designTokens = {
+const designTokens = {
   colorPrimary: 'var(--color-primary, #00b39e)',
   colorPrimary25: 'var(--color-primary-25, hsl(172.9608938547486, 100%, 25%))',
   colorPrimary40: 'var(--color-primary-40, hsl(172.9608938547486, 100%, 40%))',
@@ -1340,8 +1340,8 @@ var designTokens$1 = designTokens;
 function transformTokensToCssVarsValues(tokens) {
   var _context;
 
-  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context = _Object$entries__default["default"](tokens)).call(_context, function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
+  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context = _Object$entries__default["default"](tokens)).call(_context, _ref => {
+    let _ref2 = _slicedToArray(_ref, 2),
         key = _ref2[0],
         value = _ref2[1];
 
@@ -1367,15 +1367,15 @@ function transformTokensToCssVarsValues(tokens) {
 function transformTokensToCssVarsReferences(tokens) {
   var _context2;
 
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+  let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     includeDefaultValue: true
   },
       includeDefaultValue = _ref3.includeDefaultValue;
 
-  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](tokens)).call(_context2, function (_ref4) {
+  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](tokens)).call(_context2, _ref4 => {
     var _context3;
 
-    var _ref5 = _slicedToArray(_ref4, 2),
+    let _ref5 = _slicedToArray(_ref4, 2),
         key = _ref5[0],
         value = _ref5[1];
 
@@ -1387,35 +1387,33 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var allThemesNames = _Object$keys__default["default"](themes);
+const allThemesNames = _Object$keys__default["default"](themes);
 
 // used to cover SSR builds (for instance in Gatsby)
-var isBrowser = typeof window !== 'undefined';
+const isBrowser = typeof window !== 'undefined';
 
-var defaultParentSelector = function defaultParentSelector() {
-  return isBrowser ? document.querySelector(':root') : null;
-};
+const defaultParentSelector = () => isBrowser ? document.querySelector(':root') : null;
 
-var applyTheme = function applyTheme(_ref) {
+const applyTheme = _ref => {
   var _context;
 
-  var newTheme = _ref.newTheme,
+  let newTheme = _ref.newTheme,
       _ref$parentSelector = _ref.parentSelector,
       parentSelector = _ref$parentSelector === void 0 ? defaultParentSelector : _ref$parentSelector,
       themeOverrides = _ref.themeOverrides;
-  var target = parentSelector(); // With no target we can't change themes
+  const target = parentSelector(); // With no target we can't change themes
 
   if (!target) return;
-  var validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
+  const validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
 
   if (newTheme && newTheme !== validTheme) {
     console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
   }
 
-  var vars = transformTokensToCssVarsValues(merge__default["default"]({}, themes.default, themes[validTheme], isObject__default["default"](themeOverrides) ? themeOverrides : {}));
+  const vars = transformTokensToCssVarsValues(merge__default["default"]({}, themes.default, themes[validTheme], isObject__default["default"](themeOverrides) ? themeOverrides : {}));
 
-  _forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](vars)).call(_context, function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
+  _forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](vars)).call(_context, _ref2 => {
+    let _ref3 = _slicedToArray(_ref2, 2),
         key = _ref3[0],
         value = _ref3[1];
 
@@ -1425,11 +1423,11 @@ var applyTheme = function applyTheme(_ref) {
   target.setAttribute('data-theme', validTheme);
 };
 
-var ThemeProvider = function ThemeProvider(props) {
-  var parentSelectorRef = react.useRef(props.parentSelector);
-  var themeNameRef = react.useRef();
-  var themeOverridesRef = react.useRef();
-  react.useLayoutEffect(function () {
+const ThemeProvider = props => {
+  const parentSelectorRef = react.useRef(props.parentSelector);
+  const themeNameRef = react.useRef();
+  const themeOverridesRef = react.useRef();
+  react.useLayoutEffect(() => {
     // We want to make sure we don't really apply the change when the props
     // provided include a new object with the same theme overrides
     // (eg: users providing an inline object as prop to the ThemeProvider)
@@ -1456,20 +1454,20 @@ ThemeProvider.defaultProps = {
   theme: 'default'
 };
 
-var useTheme = function useTheme() {
-  var parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultParentSelector;
+const useTheme = function () {
+  let parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultParentSelector;
 
-  var _useState = react.useState('default'),
-      _useState2 = _slicedToArray(_useState, 2),
-      theme = _useState2[0],
-      setTheme = _useState2[1];
+  const _useState = react.useState('default'),
+        _useState2 = _slicedToArray(_useState, 2),
+        theme = _useState2[0],
+        setTheme = _useState2[1];
 
-  var parentSelectorRef = react.useRef(parentSelector);
-  var mutationChangeCallback = react.useCallback(function (mutationList) {
+  const parentSelectorRef = react.useRef(parentSelector);
+  const mutationChangeCallback = react.useCallback(mutationList => {
     // We expect only a single element in the mutation list as we configured the
     // observer to only listen to `data-theme` changes.
-    var _mutationList = _slicedToArray(mutationList, 1),
-        mutationEvent = _mutationList[0];
+    const _mutationList = _slicedToArray(mutationList, 1),
+          mutationEvent = _mutationList[0];
 
     setTheme(mutationEvent.target.dataset.theme);
   }, []);
@@ -1478,41 +1476,39 @@ var useTheme = function useTheme() {
     attributeFilter: ['data-theme']
   });
 
-  var themedValue = function themedValue(defaultThemeValue, newThemeValue) {
-    return theme === 'default' ? defaultThemeValue : newThemeValue;
-  }; // If we use 'useLayoutEffect' here, we would be trying to read the
+  const themedValue = (defaultThemeValue, newThemeValue) => theme === 'default' ? defaultThemeValue : newThemeValue; // If we use 'useLayoutEffect' here, we would be trying to read the
   // data attribute before it gets set from the effect in the ThemeProvider
 
 
-  react.useEffect(function () {
+  react.useEffect(() => {
     var _parentSelectorRef$cu;
 
     // We need to read the current theme after the provider is rendered
     // to have the actual selected theme (calculated client-side) in the
     // hook local state
-    var nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
+    const nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
 
     if (nextTheme) {
       setTheme(nextTheme);
     }
   }, []);
   return {
-    theme: theme,
-    themedValue: themedValue,
+    theme,
+    themedValue,
     isNewTheme: theme === 'test'
   };
 };
 
-var withThemeContext = function withThemeContext(WrappedComponent) {
+const withThemeContext = WrappedComponent => {
   // eslint-disable-next-line react/display-name
-  return function (props) {
-    var themeUtilties = useTheme();
+  return props => {
+    const themeUtilties = useTheme();
     return jsxRuntime.jsx(WrappedComponent, _objectSpread(_objectSpread({}, props), themeUtilties));
   };
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.15.0";
+var version = "15.15.1";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;

package/dist/commercetools-uikit-design-system.esm.js

@@ -27,7 +27,7 @@ import { jsx } from '@emotion/react/jsx-runtime';
   This file is created by the 'scripts/generate-design-tokens.js' script.
   The variables should be updated in 'materials/internals/definition.yaml'.
 */
-var themes = {
+const themes = {
   default: {
     colorPrimary: '#00b39e',
     colorPrimary25: 'hsl(172.9608938547486, 100%, 25%)',
@@ -813,7 +813,7 @@ var themes = {
     shadowForTagWhenHovered: 'none'
   }
 };
-var designTokens = {
+const designTokens = {
   colorPrimary: 'var(--color-primary, #00b39e)',
   colorPrimary25: 'var(--color-primary-25, hsl(172.9608938547486, 100%, 25%))',
   colorPrimary40: 'var(--color-primary-40, hsl(172.9608938547486, 100%, 40%))',
@@ -1315,8 +1315,8 @@ var designTokens$1 = designTokens;
 function transformTokensToCssVarsValues(tokens) {
   var _context;
 
-  return _Object$fromEntries(_mapInstanceProperty(_context = _Object$entries(tokens)).call(_context, function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
+  return _Object$fromEntries(_mapInstanceProperty(_context = _Object$entries(tokens)).call(_context, _ref => {
+    let _ref2 = _slicedToArray(_ref, 2),
         key = _ref2[0],
         value = _ref2[1];
 
@@ -1342,15 +1342,15 @@ function transformTokensToCssVarsValues(tokens) {
 function transformTokensToCssVarsReferences(tokens) {
   var _context2;
 
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+  let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     includeDefaultValue: true
   },
       includeDefaultValue = _ref3.includeDefaultValue;
 
-  return _Object$fromEntries(_mapInstanceProperty(_context2 = _Object$entries(tokens)).call(_context2, function (_ref4) {
+  return _Object$fromEntries(_mapInstanceProperty(_context2 = _Object$entries(tokens)).call(_context2, _ref4 => {
     var _context3;
 
-    var _ref5 = _slicedToArray(_ref4, 2),
+    let _ref5 = _slicedToArray(_ref4, 2),
         key = _ref5[0],
         value = _ref5[1];
 
@@ -1362,35 +1362,33 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var allThemesNames = _Object$keys(themes);
+const allThemesNames = _Object$keys(themes);
 
 // used to cover SSR builds (for instance in Gatsby)
-var isBrowser = typeof window !== 'undefined';
+const isBrowser = typeof window !== 'undefined';
 
-var defaultParentSelector = function defaultParentSelector() {
-  return isBrowser ? document.querySelector(':root') : null;
-};
+const defaultParentSelector = () => isBrowser ? document.querySelector(':root') : null;
 
-var applyTheme = function applyTheme(_ref) {
+const applyTheme = _ref => {
   var _context;
 
-  var newTheme = _ref.newTheme,
+  let newTheme = _ref.newTheme,
       _ref$parentSelector = _ref.parentSelector,
       parentSelector = _ref$parentSelector === void 0 ? defaultParentSelector : _ref$parentSelector,
       themeOverrides = _ref.themeOverrides;
-  var target = parentSelector(); // With no target we can't change themes
+  const target = parentSelector(); // With no target we can't change themes
 
   if (!target) return;
-  var validTheme = _includesInstanceProperty(allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
+  const validTheme = _includesInstanceProperty(allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
 
   if (newTheme && newTheme !== validTheme) {
     console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
   }
 
-  var vars = transformTokensToCssVarsValues(merge({}, themes.default, themes[validTheme], isObject(themeOverrides) ? themeOverrides : {}));
+  const vars = transformTokensToCssVarsValues(merge({}, themes.default, themes[validTheme], isObject(themeOverrides) ? themeOverrides : {}));
 
-  _forEachInstanceProperty(_context = _Object$entries(vars)).call(_context, function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
+  _forEachInstanceProperty(_context = _Object$entries(vars)).call(_context, _ref2 => {
+    let _ref3 = _slicedToArray(_ref2, 2),
         key = _ref3[0],
         value = _ref3[1];
 
@@ -1400,11 +1398,11 @@ var applyTheme = function applyTheme(_ref) {
   target.setAttribute('data-theme', validTheme);
 };
 
-var ThemeProvider = function ThemeProvider(props) {
-  var parentSelectorRef = useRef(props.parentSelector);
-  var themeNameRef = useRef();
-  var themeOverridesRef = useRef();
-  useLayoutEffect(function () {
+const ThemeProvider = props => {
+  const parentSelectorRef = useRef(props.parentSelector);
+  const themeNameRef = useRef();
+  const themeOverridesRef = useRef();
+  useLayoutEffect(() => {
     // We want to make sure we don't really apply the change when the props
     // provided include a new object with the same theme overrides
     // (eg: users providing an inline object as prop to the ThemeProvider)
@@ -1431,20 +1429,20 @@ ThemeProvider.defaultProps = {
   theme: 'default'
 };
 
-var useTheme = function useTheme() {
-  var parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultParentSelector;
+const useTheme = function () {
+  let parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultParentSelector;
 
-  var _useState = useState('default'),
-      _useState2 = _slicedToArray(_useState, 2),
-      theme = _useState2[0],
-      setTheme = _useState2[1];
+  const _useState = useState('default'),
+        _useState2 = _slicedToArray(_useState, 2),
+        theme = _useState2[0],
+        setTheme = _useState2[1];
 
-  var parentSelectorRef = useRef(parentSelector);
-  var mutationChangeCallback = useCallback(function (mutationList) {
+  const parentSelectorRef = useRef(parentSelector);
+  const mutationChangeCallback = useCallback(mutationList => {
     // We expect only a single element in the mutation list as we configured the
     // observer to only listen to `data-theme` changes.
-    var _mutationList = _slicedToArray(mutationList, 1),
-        mutationEvent = _mutationList[0];
+    const _mutationList = _slicedToArray(mutationList, 1),
+          mutationEvent = _mutationList[0];
 
     setTheme(mutationEvent.target.dataset.theme);
   }, []);
@@ -1453,40 +1451,38 @@ var useTheme = function useTheme() {
     attributeFilter: ['data-theme']
   });
 
-  var themedValue = function themedValue(defaultThemeValue, newThemeValue) {
-    return theme === 'default' ? defaultThemeValue : newThemeValue;
-  }; // If we use 'useLayoutEffect' here, we would be trying to read the
+  const themedValue = (defaultThemeValue, newThemeValue) => theme === 'default' ? defaultThemeValue : newThemeValue; // If we use 'useLayoutEffect' here, we would be trying to read the
   // data attribute before it gets set from the effect in the ThemeProvider
 
 
-  useEffect(function () {
+  useEffect(() => {
     var _parentSelectorRef$cu;
 
     // We need to read the current theme after the provider is rendered
     // to have the actual selected theme (calculated client-side) in the
     // hook local state
-    var nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
+    const nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
 
     if (nextTheme) {
       setTheme(nextTheme);
     }
   }, []);
   return {
-    theme: theme,
-    themedValue: themedValue,
+    theme,
+    themedValue,
     isNewTheme: theme === 'test'
   };
 };
 
-var withThemeContext = function withThemeContext(WrappedComponent) {
+const withThemeContext = WrappedComponent => {
   // eslint-disable-next-line react/display-name
-  return function (props) {
-    var themeUtilties = useTheme();
+  return props => {
+    const themeUtilties = useTheme();
     return jsx(WrappedComponent, _objectSpread(_objectSpread({}, props), themeUtilties));
   };
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.15.0";
+var version = "15.15.1";
 
 export { ThemeProvider, designTokens$1 as customProperties, designTokens$1 as designTokens, themes, transformTokensToCssVarsReferences, transformTokensToCssVarsValues, useTheme, version, withThemeContext };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/design-system",
   "description": "Core package of the commercetools design system.",
-  "version": "15.15.0",
+  "version": "15.15.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/hooks": "15.15.0",
+    "@commercetools-uikit/hooks": "15.15.1",
     "@emotion/react": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",