@commercetools-uikit/design-system 12.2.2 → 12.2.9

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

@@ -163,8 +163,8 @@ var designTokens = {
   shadowBoxTagWhenHovered: 'shadow1'
 };
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.2';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.9";
 
 exports.customProperties = customProperties;
 exports.designTokens = designTokens;

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

@@ -163,8 +163,8 @@ var designTokens = {
   shadowBoxTagWhenHovered: 'shadow1'
 };
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.2';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.9";
 
 exports.customProperties = customProperties;
 exports.designTokens = designTokens;

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

@@ -159,7 +159,7 @@ var designTokens = {
   shadowBoxTagWhenHovered: 'shadow1'
 };
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.2';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.9";
 
 export { customProperties, designTokens, version };

package/dist/declarations/src/custom-properties.d.ts

@@ -1,117 +1,117 @@
-declare const _default: {
-    readonly colorPrimary: "#00b39e";
-    readonly colorPrimary25: "hsl(172.9608938547486, 100%, 25%)";
-    readonly colorPrimary40: "hsl(172.9608938547486, 100%, 40%)";
-    readonly colorPrimary85: "hsl(172.9608938547486, 100%, 85%)";
-    readonly colorPrimary95: "hsl(172.9608938547486, 100%, 95%)";
-    readonly colorAccent: "#213c45";
-    readonly colorAccent30: "hsl(195, 35.2941176471%, 30%)";
-    readonly colorAccent40: "hsl(195, 35.2941176471%, 40%)";
-    readonly colorAccent95: "hsl(195, 35.2941176471%, 95%)";
-    readonly colorAccent98: "hsl(195, 35.2941176471%, 98%)";
-    readonly colorNeutral: "#ccc";
-    readonly colorNeutral60: "hsl(0, 0%, 60%)";
-    readonly colorNeutral90: "hsl(0, 0%, 90%)";
-    readonly colorNeutral95: "hsl(0, 0%, 95%)";
-    readonly colorInfo: "#078cdf";
-    readonly colorInfo85: "hsl(203.05555555555554, 93.9130434783%, 85%)";
-    readonly colorInfo95: "hsl(203.05555555555554, 93.9130434783%, 95%)";
-    readonly colorWarning: "#f16d0e";
-    readonly colorWarning95: "hsl(25.110132158590307, 89.0196078431%, 95%)";
-    readonly colorError: "#e60050";
-    readonly colorError95: "hsl(339.1304347826087, 100%, 95%)";
-    readonly colorSolid: "#1a1a1a";
-    readonly colorSurface: "#fff";
-    readonly borderRadius1: "1px";
-    readonly borderRadius2: "2px";
-    readonly borderRadius4: "4px";
-    readonly borderRadius6: "6px";
-    readonly borderRadius20: "20px";
-    readonly fontFamilyBody: "'Open Sans', sans-serif";
-    readonly fontSizeM: "1rem";
-    readonly shadow1: "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)";
-    readonly shadow2: "0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)";
-    readonly shadow3: "0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)";
-    readonly shadow4: "0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)";
-    readonly shadow5: "0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)";
-    readonly shadow6: "0 -1px 2px 0 rgba(0, 0, 0, 0.2)";
-    readonly shadow7: "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)";
-    readonly shadow8: "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)";
-    readonly shadow9: "inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)";
-    readonly shadow10: "0 0 0 1px rgba(224, 230, 237, 0.5)";
-    readonly shadow11: "0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12)";
-    readonly shadow12: "0 0 1px rgba(0, 0, 0, 0.25)";
-    readonly shadow13: "0 0 1px rgba(0, 0, 0, 0.25)";
-    readonly shadow14: "0 0 0.5px rgba(0, 0, 0, 0.1)";
-    readonly shadow15: "0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)";
-    readonly shadow16: "0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)";
-    readonly constraintScale: "100%";
-    readonly constraint1: "42px";
-    readonly constraint2: "84px";
-    readonly constraint3: "142px";
-    readonly constraint4: "184px";
-    readonly constraint5: "242px";
-    readonly constraint6: "284px";
-    readonly constraint7: "342px";
-    readonly constraint8: "384px";
-    readonly constraint9: "442px";
-    readonly constraint10: "484px";
-    readonly constraint11: "542px";
-    readonly constraint12: "584px";
-    readonly constraint13: "642px";
-    readonly constraint14: "684px";
-    readonly constraint15: "742px";
-    readonly constraint16: "784px";
-    readonly spacingXs: "4px";
-    readonly spacingS: "8px";
-    readonly spacingM: "16px";
-    readonly spacingL: "24px";
-    readonly spacingXl: "32px";
-    readonly transitionLinear80Ms: "80ms linear";
-    readonly transitionEaseinout150Ms: "150ms ease-in-out";
-    readonly transitionStandard: "200ms ease";
-    readonly breakPointMobile: "768px";
-    readonly breakPointDesktop: "1024px";
-    readonly breakPointBiggerdesktop: "1280px";
-    readonly breakPointGiantdesktop: "1680px";
-    readonly breakPointJumbodesktop: "1920px";
-    readonly backgroundColorForInput: "#fff";
-    readonly backgroundColorForInputWhenSelected: "hsl(195, 35.2941176471%, 95%)";
-    readonly backgroundColorForInputWhenDisabled: "hsl(195, 35.2941176471%, 98%)";
-    readonly backgroundColorForInputWhenHovered: "hsl(0, 0%, 90%)";
-    readonly backgroundColorForTag: "hsl(0, 0%, 95%)";
-    readonly backgroundColorForTagWarning: "hsl(25.110132158590307, 89.0196078431%, 95%)";
-    readonly borderColorForInput: "hsl(0, 0%, 60%)";
-    readonly borderColorForInputWhenFocused: "#00b39e";
-    readonly borderColorForInputWhenDisabled: "#ccc";
-    readonly borderColorForInputWhenReadonly: "#ccc";
-    readonly borderColorForInputWhenError: "#e60050";
-    readonly borderColorForInputWhenWarning: "#f16d0e";
-    readonly borderColorForTag: "hsl(0, 0%, 60%)";
-    readonly borderColorForTagWarning: "#f16d0e";
-    readonly borderColorForTagWhenFocused: "#00b39e";
-    readonly borderRadiusForInput: "6px";
-    readonly borderRadiusForTag: "2px";
-    readonly fontColorForInput: "#1a1a1a";
-    readonly fontColorForInputWhenDisabled: "hsl(0, 0%, 60%)";
-    readonly fontColorForInputWhenError: "#e60050";
-    readonly fontColorForInputWhenReadonly: "hsl(0, 0%, 60%)";
-    readonly fontColorForInputWhenWarning: "#f16d0e";
-    readonly fontColorForTag: "#1a1a1a";
-    readonly fontColorForTagWhenDisabled: "hsl(0, 0%, 60%)";
-    readonly fontColorForTextWhenInverted: "#fff";
-    readonly fontFamily: "'Open Sans', sans-serif";
-    readonly placeholderFontColorForInput: "hsl(0, 0%, 60%)";
-    readonly fontSizeForInput: "1rem";
-    readonly shadowBoxTagWhenHovered: "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)";
-    readonly bigButtonHeight: "32px";
-    readonly smallButtonHeight: "24px";
-    readonly sizeHeightInput: "32px";
-    readonly fontFamilyDefault: "'Open Sans', sans-serif";
-    readonly fontSizeDefault: "1rem";
-    readonly fontSizeSmall: "0.9231rem";
-    readonly shadowBoxTagHover: "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)";
-    readonly sizeHeightTag: "26px";
-    readonly standardInputHeight: "32px";
-};
-export default _default;
+declare const _default: {
+    readonly colorPrimary: "#00b39e";
+    readonly colorPrimary25: "hsl(172.9608938547486, 100%, 25%)";
+    readonly colorPrimary40: "hsl(172.9608938547486, 100%, 40%)";
+    readonly colorPrimary85: "hsl(172.9608938547486, 100%, 85%)";
+    readonly colorPrimary95: "hsl(172.9608938547486, 100%, 95%)";
+    readonly colorAccent: "#213c45";
+    readonly colorAccent30: "hsl(195, 35.2941176471%, 30%)";
+    readonly colorAccent40: "hsl(195, 35.2941176471%, 40%)";
+    readonly colorAccent95: "hsl(195, 35.2941176471%, 95%)";
+    readonly colorAccent98: "hsl(195, 35.2941176471%, 98%)";
+    readonly colorNeutral: "#ccc";
+    readonly colorNeutral60: "hsl(0, 0%, 60%)";
+    readonly colorNeutral90: "hsl(0, 0%, 90%)";
+    readonly colorNeutral95: "hsl(0, 0%, 95%)";
+    readonly colorInfo: "#078cdf";
+    readonly colorInfo85: "hsl(203.05555555555554, 93.9130434783%, 85%)";
+    readonly colorInfo95: "hsl(203.05555555555554, 93.9130434783%, 95%)";
+    readonly colorWarning: "#f16d0e";
+    readonly colorWarning95: "hsl(25.110132158590307, 89.0196078431%, 95%)";
+    readonly colorError: "#e60050";
+    readonly colorError95: "hsl(339.1304347826087, 100%, 95%)";
+    readonly colorSolid: "#1a1a1a";
+    readonly colorSurface: "#fff";
+    readonly borderRadius1: "1px";
+    readonly borderRadius2: "2px";
+    readonly borderRadius4: "4px";
+    readonly borderRadius6: "6px";
+    readonly borderRadius20: "20px";
+    readonly fontFamilyBody: "'Open Sans', sans-serif";
+    readonly fontSizeM: "1rem";
+    readonly shadow1: "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)";
+    readonly shadow2: "0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)";
+    readonly shadow3: "0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)";
+    readonly shadow4: "0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)";
+    readonly shadow5: "0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)";
+    readonly shadow6: "0 -1px 2px 0 rgba(0, 0, 0, 0.2)";
+    readonly shadow7: "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)";
+    readonly shadow8: "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)";
+    readonly shadow9: "inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)";
+    readonly shadow10: "0 0 0 1px rgba(224, 230, 237, 0.5)";
+    readonly shadow11: "0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12)";
+    readonly shadow12: "0 0 1px rgba(0, 0, 0, 0.25)";
+    readonly shadow13: "0 0 1px rgba(0, 0, 0, 0.25)";
+    readonly shadow14: "0 0 0.5px rgba(0, 0, 0, 0.1)";
+    readonly shadow15: "0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)";
+    readonly shadow16: "0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)";
+    readonly constraintScale: "100%";
+    readonly constraint1: "42px";
+    readonly constraint2: "84px";
+    readonly constraint3: "142px";
+    readonly constraint4: "184px";
+    readonly constraint5: "242px";
+    readonly constraint6: "284px";
+    readonly constraint7: "342px";
+    readonly constraint8: "384px";
+    readonly constraint9: "442px";
+    readonly constraint10: "484px";
+    readonly constraint11: "542px";
+    readonly constraint12: "584px";
+    readonly constraint13: "642px";
+    readonly constraint14: "684px";
+    readonly constraint15: "742px";
+    readonly constraint16: "784px";
+    readonly spacingXs: "4px";
+    readonly spacingS: "8px";
+    readonly spacingM: "16px";
+    readonly spacingL: "24px";
+    readonly spacingXl: "32px";
+    readonly transitionLinear80Ms: "80ms linear";
+    readonly transitionEaseinout150Ms: "150ms ease-in-out";
+    readonly transitionStandard: "200ms ease";
+    readonly breakPointMobile: "768px";
+    readonly breakPointDesktop: "1024px";
+    readonly breakPointBiggerdesktop: "1280px";
+    readonly breakPointGiantdesktop: "1680px";
+    readonly breakPointJumbodesktop: "1920px";
+    readonly backgroundColorForInput: "#fff";
+    readonly backgroundColorForInputWhenSelected: "hsl(195, 35.2941176471%, 95%)";
+    readonly backgroundColorForInputWhenDisabled: "hsl(195, 35.2941176471%, 98%)";
+    readonly backgroundColorForInputWhenHovered: "hsl(0, 0%, 90%)";
+    readonly backgroundColorForTag: "hsl(0, 0%, 95%)";
+    readonly backgroundColorForTagWarning: "hsl(25.110132158590307, 89.0196078431%, 95%)";
+    readonly borderColorForInput: "hsl(0, 0%, 60%)";
+    readonly borderColorForInputWhenFocused: "#00b39e";
+    readonly borderColorForInputWhenDisabled: "#ccc";
+    readonly borderColorForInputWhenReadonly: "#ccc";
+    readonly borderColorForInputWhenError: "#e60050";
+    readonly borderColorForInputWhenWarning: "#f16d0e";
+    readonly borderColorForTag: "hsl(0, 0%, 60%)";
+    readonly borderColorForTagWarning: "#f16d0e";
+    readonly borderColorForTagWhenFocused: "#00b39e";
+    readonly borderRadiusForInput: "6px";
+    readonly borderRadiusForTag: "2px";
+    readonly fontColorForInput: "#1a1a1a";
+    readonly fontColorForInputWhenDisabled: "hsl(0, 0%, 60%)";
+    readonly fontColorForInputWhenError: "#e60050";
+    readonly fontColorForInputWhenReadonly: "hsl(0, 0%, 60%)";
+    readonly fontColorForInputWhenWarning: "#f16d0e";
+    readonly fontColorForTag: "#1a1a1a";
+    readonly fontColorForTagWhenDisabled: "hsl(0, 0%, 60%)";
+    readonly fontColorForTextWhenInverted: "#fff";
+    readonly fontFamily: "'Open Sans', sans-serif";
+    readonly placeholderFontColorForInput: "hsl(0, 0%, 60%)";
+    readonly fontSizeForInput: "1rem";
+    readonly shadowBoxTagWhenHovered: "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)";
+    readonly bigButtonHeight: "32px";
+    readonly smallButtonHeight: "24px";
+    readonly sizeHeightInput: "32px";
+    readonly fontFamilyDefault: "'Open Sans', sans-serif";
+    readonly fontSizeDefault: "1rem";
+    readonly fontSizeSmall: "0.9231rem";
+    readonly shadowBoxTagHover: "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)";
+    readonly sizeHeightTag: "26px";
+    readonly standardInputHeight: "32px";
+};
+export default _default;

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

@@ -1,32 +1,32 @@
-declare const _default: {
-    readonly backgroundColorForInput: "colorSurface";
-    readonly backgroundColorForInputWhenSelected: "colorAccent95";
-    readonly backgroundColorForInputWhenDisabled: "colorAccent98";
-    readonly backgroundColorForInputWhenHovered: "colorNeutral90";
-    readonly backgroundColorForTag: "colorNeutral95";
-    readonly backgroundColorForTagWarning: "colorWarning95";
-    readonly borderColorForInput: "colorNeutral60";
-    readonly borderColorForInputWhenFocused: "colorPrimary";
-    readonly borderColorForInputWhenDisabled: "colorNeutral";
-    readonly borderColorForInputWhenReadonly: "colorNeutral";
-    readonly borderColorForInputWhenError: "colorError";
-    readonly borderColorForInputWhenWarning: "colorWarning";
-    readonly borderColorForTag: "colorNeutral60";
-    readonly borderColorForTagWarning: "colorWarning";
-    readonly borderColorForTagWhenFocused: "colorPrimary";
-    readonly borderRadiusForInput: "borderRadius6";
-    readonly borderRadiusForTag: "borderRadius2";
-    readonly fontColorForInput: "colorSolid";
-    readonly fontColorForInputWhenDisabled: "colorNeutral60";
-    readonly fontColorForInputWhenError: "colorError";
-    readonly fontColorForInputWhenReadonly: "colorNeutral60";
-    readonly fontColorForInputWhenWarning: "colorWarning";
-    readonly fontColorForTag: "colorSolid";
-    readonly fontColorForTagWhenDisabled: "colorNeutral60";
-    readonly fontColorForTextWhenInverted: "colorSurface";
-    readonly fontFamily: "fontFamilyBody";
-    readonly placeholderFontColorForInput: "colorNeutral60";
-    readonly fontSizeForInput: "fontSizeM";
-    readonly shadowBoxTagWhenHovered: "shadow1";
-};
-export default _default;
+declare const _default: {
+    readonly backgroundColorForInput: "colorSurface";
+    readonly backgroundColorForInputWhenSelected: "colorAccent95";
+    readonly backgroundColorForInputWhenDisabled: "colorAccent98";
+    readonly backgroundColorForInputWhenHovered: "colorNeutral90";
+    readonly backgroundColorForTag: "colorNeutral95";
+    readonly backgroundColorForTagWarning: "colorWarning95";
+    readonly borderColorForInput: "colorNeutral60";
+    readonly borderColorForInputWhenFocused: "colorPrimary";
+    readonly borderColorForInputWhenDisabled: "colorNeutral";
+    readonly borderColorForInputWhenReadonly: "colorNeutral";
+    readonly borderColorForInputWhenError: "colorError";
+    readonly borderColorForInputWhenWarning: "colorWarning";
+    readonly borderColorForTag: "colorNeutral60";
+    readonly borderColorForTagWarning: "colorWarning";
+    readonly borderColorForTagWhenFocused: "colorPrimary";
+    readonly borderRadiusForInput: "borderRadius6";
+    readonly borderRadiusForTag: "borderRadius2";
+    readonly fontColorForInput: "colorSolid";
+    readonly fontColorForInputWhenDisabled: "colorNeutral60";
+    readonly fontColorForInputWhenError: "colorError";
+    readonly fontColorForInputWhenReadonly: "colorNeutral60";
+    readonly fontColorForInputWhenWarning: "colorWarning";
+    readonly fontColorForTag: "colorSolid";
+    readonly fontColorForTagWhenDisabled: "colorNeutral60";
+    readonly fontColorForTextWhenInverted: "colorSurface";
+    readonly fontFamily: "fontFamilyBody";
+    readonly placeholderFontColorForInput: "colorNeutral60";
+    readonly fontSizeForInput: "fontSizeM";
+    readonly shadowBoxTagWhenHovered: "shadow1";
+};
+export default _default;

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

@@ -1,3 +1,3 @@
-export { default as customProperties } from './custom-properties';
-export { default as designTokens } from './design-tokens';
-export { default as version } from './version';
+export { default as customProperties } from './custom-properties';
+export { default as designTokens } from './design-tokens';
+export { default as version } from './version';

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

@@ -1,2 +1,2 @@
-declare const _default: "12.2.2";
-export default _default;
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/materials/internals/tokens.story.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { storiesOf } from '@storybook/react';
 import styled from '@emotion/styled';
@@ -322,7 +322,7 @@ const SpacingSample = styled.div`
   margin: 0 10px;
 `;
 
-class Story extends React.Component {
+class Story extends Component {
   static displayName = 'Story';
 
   state = {
@@ -458,27 +458,27 @@ class Story extends React.Component {
           choiceGroup={definition.choiceGroups.colors}
           searchText={this.state.searchText}
           renderSample={(value) => (
-            <React.Fragment>
+            <>
               <ColorSample color={value} /> {value}
-            </React.Fragment>
+            </>
           )}
         />
         <ChoiceGroup
           choiceGroup={definition.choiceGroups.borderRadiuses}
           searchText={this.state.searchText}
           renderSample={(value) => (
-            <React.Fragment>
+            <>
               <BorderRadiusSample borderRadius={value} /> {value}
-            </React.Fragment>
+            </>
           )}
         />
         <ChoiceGroup
           choiceGroup={definition.choiceGroups.shadows}
           searchText={this.state.searchText}
           renderSample={(value) => (
-            <React.Fragment>
+            <>
               <ShadowSample shadow={value} /> {value}
-            </React.Fragment>
+            </>
           )}
         />
         <ChoiceGroup
@@ -489,9 +489,9 @@ class Story extends React.Component {
           choiceGroup={definition.choiceGroups.spacings}
           searchText={this.state.searchText}
           renderSample={(value) => (
-            <React.Fragment>
+            <>
               <SpacingSample spacing={value} /> {value}
-            </React.Fragment>
+            </>
           )}
         />
         <ChoiceGroup
@@ -524,45 +524,45 @@ class Story extends React.Component {
           decisionGroup={definition.decisionGroups.backgroundColors}
           searchText={this.state.searchText}
           renderSample={(value) => (
-            <React.Fragment>
+            <>
               <ColorSample color={value} /> {value}
-            </React.Fragment>
+            </>
           )}
         />
         <DecisionGroup
           decisionGroup={definition.decisionGroups.borderColors}
           searchText={this.state.searchText}
           renderSample={(value) => (
-            <React.Fragment>
+            <>
               <ColorSample color={value} /> {value}
-            </React.Fragment>
+            </>
           )}
         />
         <DecisionGroup
           decisionGroup={definition.decisionGroups.borderRadiuses}
           searchText={this.state.searchText}
           renderSample={(value) => (
-            <React.Fragment>
+            <>
               <BorderRadiusSample borderRadius={value} /> {value}
-            </React.Fragment>
+            </>
           )}
         />
         <DecisionGroup
           decisionGroup={definition.decisionGroups.fontColors}
           searchText={this.state.searchText}
           renderSample={(value) => (
-            <React.Fragment>
+            <>
               <FontColorSample color={value} /> {value}
-            </React.Fragment>
+            </>
           )}
         />
         <DecisionGroup
           decisionGroup={definition.decisionGroups.shadows}
           searchText={this.state.searchText}
           renderSample={(value) => (
-            <React.Fragment>
+            <>
               <ShadowSample shadow={value} /> {value}
-            </React.Fragment>
+            </>
           )}
         />
       </Background>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/design-system",
   "description": "Core package of the commercetools design system.",
-  "version": "12.2.2",
+  "version": "12.2.9",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -11,7 +11,6 @@
   "homepage": "https://uikit.commercetools.com",
   "keywords": ["javascript", "design system", "react", "uikit"],
   "license": "MIT",
-  "private": false,
   "publishConfig": {
     "access": "public"
   },
@@ -20,12 +19,11 @@
   "module": "dist/commercetools-uikit-design-system.esm.js",
   "files": ["dist", "materials"],
   "scripts": {
-    "prepare": "../scripts/version.js replace",
     "build:tokens": "node ./scripts/generate-custom-properties.js",
     "build:tokens:watch": "nodemon -e yaml --quiet --watch materials/internals --exec 'yarn build:tokens'"
   },
   "dependencies": {
-    "@babel/runtime": "7.14.8",
-    "@babel/runtime-corejs3": "7.14.8"
+    "@babel/runtime": "7.16.5",
+    "@babel/runtime-corejs3": "7.16.5"
   }
 }