@commercetools-uikit/design-system 15.14.2 → 15.15.0

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

@@ -460,6 +460,7 @@ var themes = {
     marginForLocalizedRichTextBodyButton: 'none',
     marginForRichTextDivider: '0 var(--spacing-10)',
     marginForRichTextDropdownItemLabel: '0 0 0 var(--spacing-10)',
+    marginForTagList: '0 var(--spacing-10) var(--spacing-10) 0',
     paddingForStamp: 'var(--spacing-10) var(--spacing-20)',
     paddingForStampAsCondensed: '1px var(--spacing-10)',
     paddingForTag: '5px var(--spacing-20)',
@@ -771,6 +772,7 @@ var themes = {
     marginForLocalizedRichTextBodyButton: '0 2px var(--spacing-20) 2px',
     marginForRichTextDivider: 'var(--spacing-10) 2px',
     marginForRichTextDropdownItemLabel: '0 0 0 var(--spacing-20)',
+    marginForTagList: '0 var(--spacing-20) var(--spacing-20) 0',
     paddingForStamp: '4px 12px',
     paddingForStampAsCondensed: '0 var(--spacing-20)',
     paddingForTag: '2px 12px',
@@ -1243,6 +1245,7 @@ var designTokens = {
   marginForLocalizedRichTextBodyButton: 'var(--margin-for-localized-rich-text-body-button, none)',
   marginForRichTextDivider: 'var(--margin-for-rich-text-divider, 0 var(--spacing-10))',
   marginForRichTextDropdownItemLabel: 'var(--margin-for-rich-text-dropdown-item-label, 0 0 0 var(--spacing-10))',
+  marginForTagList: 'var(--margin-for-tag-list, 0 var(--spacing-10) var(--spacing-10) 0)',
   paddingForStamp: 'var(--padding-for-stamp, var(--spacing-10) var(--spacing-20))',
   paddingForStampAsCondensed: 'var(--padding-for-stamp-as-condensed, 1px var(--spacing-10))',
   paddingForTag: 'var(--padding-for-tag, 5px var(--spacing-20))',
@@ -1390,7 +1393,7 @@ var allThemesNames = _Object$keys__default["default"](themes);
 var isBrowser = typeof window !== 'undefined';
 
 var defaultParentSelector = function defaultParentSelector() {
-  return document.querySelector(':root');
+  return isBrowser ? document.querySelector(':root') : null;
 };
 
 var applyTheme = function applyTheme(_ref) {
@@ -1400,7 +1403,7 @@ var applyTheme = function applyTheme(_ref) {
       _ref$parentSelector = _ref.parentSelector,
       parentSelector = _ref$parentSelector === void 0 ? defaultParentSelector : _ref$parentSelector,
       themeOverrides = _ref.themeOverrides;
-  var target = isBrowser ? parentSelector() : null; // With no target we can't change themes
+  var target = parentSelector(); // With no target we can't change themes
 
   if (!target) return;
   var validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
@@ -1509,7 +1512,7 @@ var withThemeContext = function withThemeContext(WrappedComponent) {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.2";
+var version = "15.15.0";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;

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

@@ -460,6 +460,7 @@ var themes = {
     marginForLocalizedRichTextBodyButton: 'none',
     marginForRichTextDivider: '0 var(--spacing-10)',
     marginForRichTextDropdownItemLabel: '0 0 0 var(--spacing-10)',
+    marginForTagList: '0 var(--spacing-10) var(--spacing-10) 0',
     paddingForStamp: 'var(--spacing-10) var(--spacing-20)',
     paddingForStampAsCondensed: '1px var(--spacing-10)',
     paddingForTag: '5px var(--spacing-20)',
@@ -771,6 +772,7 @@ var themes = {
     marginForLocalizedRichTextBodyButton: '0 2px var(--spacing-20) 2px',
     marginForRichTextDivider: 'var(--spacing-10) 2px',
     marginForRichTextDropdownItemLabel: '0 0 0 var(--spacing-20)',
+    marginForTagList: '0 var(--spacing-20) var(--spacing-20) 0',
     paddingForStamp: '4px 12px',
     paddingForStampAsCondensed: '0 var(--spacing-20)',
     paddingForTag: '2px 12px',
@@ -1243,6 +1245,7 @@ var designTokens = {
   marginForLocalizedRichTextBodyButton: 'var(--margin-for-localized-rich-text-body-button, none)',
   marginForRichTextDivider: 'var(--margin-for-rich-text-divider, 0 var(--spacing-10))',
   marginForRichTextDropdownItemLabel: 'var(--margin-for-rich-text-dropdown-item-label, 0 0 0 var(--spacing-10))',
+  marginForTagList: 'var(--margin-for-tag-list, 0 var(--spacing-10) var(--spacing-10) 0)',
   paddingForStamp: 'var(--padding-for-stamp, var(--spacing-10) var(--spacing-20))',
   paddingForStampAsCondensed: 'var(--padding-for-stamp-as-condensed, 1px var(--spacing-10))',
   paddingForTag: 'var(--padding-for-tag, 5px var(--spacing-20))',
@@ -1390,7 +1393,7 @@ var allThemesNames = _Object$keys__default["default"](themes);
 var isBrowser = typeof window !== 'undefined';
 
 var defaultParentSelector = function defaultParentSelector() {
-  return document.querySelector(':root');
+  return isBrowser ? document.querySelector(':root') : null;
 };
 
 var applyTheme = function applyTheme(_ref) {
@@ -1400,7 +1403,7 @@ var applyTheme = function applyTheme(_ref) {
       _ref$parentSelector = _ref.parentSelector,
       parentSelector = _ref$parentSelector === void 0 ? defaultParentSelector : _ref$parentSelector,
       themeOverrides = _ref.themeOverrides;
-  var target = isBrowser ? parentSelector() : null; // With no target we can't change themes
+  var target = parentSelector(); // With no target we can't change themes
 
   if (!target) return;
   var validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
@@ -1509,7 +1512,7 @@ var withThemeContext = function withThemeContext(WrappedComponent) {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.2";
+var version = "15.15.0";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;

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

@@ -435,6 +435,7 @@ var themes = {
     marginForLocalizedRichTextBodyButton: 'none',
     marginForRichTextDivider: '0 var(--spacing-10)',
     marginForRichTextDropdownItemLabel: '0 0 0 var(--spacing-10)',
+    marginForTagList: '0 var(--spacing-10) var(--spacing-10) 0',
     paddingForStamp: 'var(--spacing-10) var(--spacing-20)',
     paddingForStampAsCondensed: '1px var(--spacing-10)',
     paddingForTag: '5px var(--spacing-20)',
@@ -746,6 +747,7 @@ var themes = {
     marginForLocalizedRichTextBodyButton: '0 2px var(--spacing-20) 2px',
     marginForRichTextDivider: 'var(--spacing-10) 2px',
     marginForRichTextDropdownItemLabel: '0 0 0 var(--spacing-20)',
+    marginForTagList: '0 var(--spacing-20) var(--spacing-20) 0',
     paddingForStamp: '4px 12px',
     paddingForStampAsCondensed: '0 var(--spacing-20)',
     paddingForTag: '2px 12px',
@@ -1218,6 +1220,7 @@ var designTokens = {
   marginForLocalizedRichTextBodyButton: 'var(--margin-for-localized-rich-text-body-button, none)',
   marginForRichTextDivider: 'var(--margin-for-rich-text-divider, 0 var(--spacing-10))',
   marginForRichTextDropdownItemLabel: 'var(--margin-for-rich-text-dropdown-item-label, 0 0 0 var(--spacing-10))',
+  marginForTagList: 'var(--margin-for-tag-list, 0 var(--spacing-10) var(--spacing-10) 0)',
   paddingForStamp: 'var(--padding-for-stamp, var(--spacing-10) var(--spacing-20))',
   paddingForStampAsCondensed: 'var(--padding-for-stamp-as-condensed, 1px var(--spacing-10))',
   paddingForTag: 'var(--padding-for-tag, 5px var(--spacing-20))',
@@ -1365,7 +1368,7 @@ var allThemesNames = _Object$keys(themes);
 var isBrowser = typeof window !== 'undefined';
 
 var defaultParentSelector = function defaultParentSelector() {
-  return document.querySelector(':root');
+  return isBrowser ? document.querySelector(':root') : null;
 };
 
 var applyTheme = function applyTheme(_ref) {
@@ -1375,7 +1378,7 @@ var applyTheme = function applyTheme(_ref) {
       _ref$parentSelector = _ref.parentSelector,
       parentSelector = _ref$parentSelector === void 0 ? defaultParentSelector : _ref$parentSelector,
       themeOverrides = _ref.themeOverrides;
-  var target = isBrowser ? parentSelector() : null; // With no target we can't change themes
+  var target = parentSelector(); // With no target we can't change themes
 
   if (!target) return;
   var validTheme = _includesInstanceProperty(allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
@@ -1484,6 +1487,6 @@ var withThemeContext = function withThemeContext(WrappedComponent) {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.2";
+var version = "15.15.0";
 
 export { ThemeProvider, designTokens$1 as customProperties, designTokens$1 as designTokens, themes, transformTokensToCssVarsReferences, transformTokensToCssVarsValues, useTheme, version, withThemeContext };

package/dist/declarations/src/design-tokens.d.ts

@@ -406,6 +406,7 @@ export declare const themes: {
         readonly marginForLocalizedRichTextBodyButton: "none";
         readonly marginForRichTextDivider: "0 var(--spacing-10)";
         readonly marginForRichTextDropdownItemLabel: "0 0 0 var(--spacing-10)";
+        readonly marginForTagList: "0 var(--spacing-10) var(--spacing-10) 0";
         readonly paddingForStamp: "var(--spacing-10) var(--spacing-20)";
         readonly paddingForStampAsCondensed: "1px var(--spacing-10)";
         readonly paddingForTag: "5px var(--spacing-20)";
@@ -717,6 +718,7 @@ export declare const themes: {
         readonly marginForLocalizedRichTextBodyButton: "0 2px var(--spacing-20) 2px";
         readonly marginForRichTextDivider: "var(--spacing-10) 2px";
         readonly marginForRichTextDropdownItemLabel: "0 0 0 var(--spacing-20)";
+        readonly marginForTagList: "0 var(--spacing-20) var(--spacing-20) 0";
         readonly paddingForStamp: "4px 12px";
         readonly paddingForStampAsCondensed: "0 var(--spacing-20)";
         readonly paddingForTag: "2px 12px";
@@ -1189,6 +1191,7 @@ declare const designTokens: {
     readonly marginForLocalizedRichTextBodyButton: "var(--margin-for-localized-rich-text-body-button, none)";
     readonly marginForRichTextDivider: "var(--margin-for-rich-text-divider, 0 var(--spacing-10))";
     readonly marginForRichTextDropdownItemLabel: "var(--margin-for-rich-text-dropdown-item-label, 0 0 0 var(--spacing-10))";
+    readonly marginForTagList: "var(--margin-for-tag-list, 0 var(--spacing-10) var(--spacing-10) 0)";
     readonly paddingForStamp: "var(--padding-for-stamp, var(--spacing-10) var(--spacing-20))";
     readonly paddingForStampAsCondensed: "var(--padding-for-stamp-as-condensed, 1px var(--spacing-10))";
     readonly paddingForTag: "var(--padding-for-tag, 5px var(--spacing-20))";

package/dist/declarations/src/export-types.d.ts

@@ -0,0 +1 @@
+export type { ThemeName, TUseThemeResult } from './theme-provider';

package/dist/declarations/src/index.d.ts

@@ -1,5 +1,5 @@
 export { default as designTokens, default as customProperties, themes, } from './design-tokens';
 export { ThemeProvider, useTheme, withThemeContext } from './theme-provider';
-export type { ThemeName, TUseThemeResult } from './theme-provider';
+export * from './export-types';
 export * from './utils';
 export { default as version } from './version';

package/materials/custom-properties.css

@@ -489,6 +489,7 @@
   --margin-for-localized-rich-text-body-button: none;
   --margin-for-rich-text-divider: 0 var(--spacing-10);
   --margin-for-rich-text-dropdown-item-label: 0 0 0 var(--spacing-10);
+  --margin-for-tag-list: 0 var(--spacing-10) var(--spacing-10) 0;
   --padding-for-stamp: var(--spacing-10) var(--spacing-20);
   --padding-for-stamp-as-condensed: 1px var(--spacing-10);
   --padding-for-tag: 5px var(--spacing-20);

package/materials/custom-properties.json

@@ -405,6 +405,7 @@
   "--margin-for-localized-rich-text-body-button": "none",
   "--margin-for-rich-text-divider": "0 var(--spacing-10)",
   "--margin-for-rich-text-dropdown-item-label": "0 0 0 var(--spacing-10)",
+  "--margin-for-tag-list": "0 var(--spacing-10) var(--spacing-10) 0",
   "--padding-for-stamp": "var(--spacing-10) var(--spacing-20)",
   "--padding-for-stamp-as-condensed": "1px var(--spacing-10)",
   "--padding-for-tag": "5px var(--spacing-20)",

package/materials/internals/definition.yaml

@@ -318,6 +318,8 @@ componentGroups:
     description: 'Tag drag icon elements'
   tag-warning:
     description: 'Tag elements with type warning'
+  tag-list:
+    description: 'Wrapper for Tag elements'
   text:
     description: 'Text elements'
   body:
@@ -1149,6 +1151,8 @@ decisionGroupsByTheme:
           choice: '0 var(--spacing-10)'
         margin-for-rich-text-dropdown-item-label:
           choice: '0 0 0 var(--spacing-10)'
+        margin-for-tag-list:
+          choice: '0 var(--spacing-10) var(--spacing-10) 0'
     paddings:
       label: Paddings
       prefix: padding
@@ -1856,6 +1860,8 @@ decisionGroupsByTheme:
           choice: 'var(--spacing-10) 2px'
         margin-for-rich-text-dropdown-item-label:
           choice: '0 0 0 var(--spacing-20)'
+        margin-for-tag-list:
+          choice: '0 var(--spacing-20) var(--spacing-20) 0'
     paddings:
       label: Paddings
       prefix: padding

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/design-system",
   "description": "Core package of the commercetools design system.",
-  "version": "15.14.2",
+  "version": "15.15.0",
   "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.14.2",
+    "@commercetools-uikit/hooks": "15.15.0",
     "@emotion/react": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",