@commercetools-frontend/experimental-components 6.1.5 → 6.2.0

package/dist/commercetools-frontend-experimental-components.cjs.dev.js

@@ -1342,7 +1342,7 @@ let SearchInput = /*#__PURE__*/function (_Component) {
               [styles$h['clear-icon-container-granular']]: this.props.isGranular
             }),
             icon: jsxRuntime.jsx(uiKit.CloseIcon, {}),
-            size: "medium",
+            size: "30",
             label: "clear-button",
             onClick: this.handleClear
           }), jsxRuntime.jsx("div", {
@@ -4305,23 +4305,25 @@ const createAttributeTypeValue = attribute => {
  * hence the action structure is flat.
  */
 const formatMoney = valueType => money => {
-  if (valueType === 'fixed') {
-    return {
-      [money.type]: _objectSpread$15({
+  switch (valueType) {
+    case 'fixed':
+      return {
+        [money.type]: _objectSpread$15({
+          centAmount: money.centAmount,
+          currencyCode: money.currencyCode
+        }, money.type === PRECISION_TYPES.highPrecision && {
+          preciseAmount: money.preciseAmount,
+          fractionDigits: money.fractionDigits
+        })
+      };
+    case 'absolute':
+    case 'absoluteCart':
+      return {
         centAmount: money.centAmount,
         currencyCode: money.currencyCode
-      }, money.type === PRECISION_TYPES.highPrecision && {
-        preciseAmount: money.preciseAmount,
-        fractionDigits: money.fractionDigits
-      })
-    };
-  } else if (valueType === 'absolute') {
-    return {
-      centAmount: money.centAmount,
-      currencyCode: money.currencyCode
-    };
-  } else {
-    throw new Error('Unexpected value type for money.');
+      };
+    default:
+      throw new Error('Unexpected value type for money.');
   }
 };
 
@@ -4334,6 +4336,7 @@ const convertChangeValueAction = actionPayload => {
   const possibleTypeKeys = {
     relative: ['permyriad'],
     absolute: ['money'],
+    absoluteCart: ['money', 'applicationMode'],
     fixed: ['money'],
     giftLineItem: ['product', 'variantId', 'distributionChannel', 'supplyChannel', 'ResourceIdentifierInput']
   };
@@ -8680,7 +8683,8 @@ const UPPER_STORES_LIMIT = 500;
 const mapStoresToOptions = _ref => {
   let store = _ref.store,
     renderSelectInputOptionValuesByField = _ref.renderSelectInputOptionValuesByField,
-    dataLocale = _ref.dataLocale;
+    dataLocale = _ref.dataLocale,
+    languages = _ref.languages;
   const convertedStore = l10n.applyTransformedLocalizedFields(store, [{
     from: 'nameAllLocales',
     to: 'name'
@@ -8688,6 +8692,7 @@ const mapStoresToOptions = _ref => {
   const localizedName = l10n.formatLocalizedString(convertedStore, {
     key: 'name',
     locale: dataLocale,
+    fallbackOrder: languages,
     fallback: `${store.key} (key)`
   });
   return {
@@ -8743,9 +8748,11 @@ const emptyStoreOption = intl => [{
 const StoresAsyncSelectInput = props => {
   const intl = reactIntl.useIntl();
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
-      dataLocale: applicationContext.dataLocale || applicationContext.user?.locale
+      dataLocale: applicationContext.dataLocale,
+      projectLanguages: isEmpty__default["default"](applicationContext.project?.languages) ? props.projectLanguages : applicationContext.project?.languages
     })),
-    dataLocale = _useApplicationContex.dataLocale;
+    dataLocale = _useApplicationContex.dataLocale,
+    projectLanguages = _useApplicationContex.projectLanguages;
   const keysOfStores = props.allAccessibleStoreKeysThroughDataFencePermissions;
   const storesListFetcher = useStoresListFetcher({
     limit: 500,
@@ -8762,6 +8769,7 @@ const StoresAsyncSelectInput = props => {
     return _mapInstanceProperty__default["default"](_context2 = storesListFetcher.stores?.results || []).call(_context2, store => mapStoresToOptions({
       store,
       dataLocale,
+      languages: projectLanguages,
       renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
     }));
   }, [dataLocale, storesListFetcher.stores, props.renderSelectInputOptionValuesByField]);
@@ -8845,9 +8853,11 @@ const hasErrors$1 = errors => {
 const StoresBasicSelectInput = props => {
   const intl = reactIntl.useIntl();
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
-      dataLocale: applicationContext.dataLocale || applicationContext.user?.locale
+      dataLocale: applicationContext.dataLocale,
+      projectLanguages: isEmpty__default["default"](applicationContext.project?.languages) ? props.projectLanguages : applicationContext.project?.languages
     })),
-    dataLocale = _useApplicationContex.dataLocale;
+    dataLocale = _useApplicationContex.dataLocale,
+    projectLanguages = _useApplicationContex.projectLanguages;
   const keysOfStores = props.allAccessibleStoreKeysThroughDataFencePermissions;
   const storesListFetcher = useStoresListFetcher({
     limit: 60,
@@ -8864,6 +8874,7 @@ const StoresBasicSelectInput = props => {
     const results = _mapInstanceProperty__default["default"](_context2 = storesListFetcher.stores?.results || []).call(_context2, store => mapStoresToOptions({
       store,
       dataLocale,
+      languages: projectLanguages,
       renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
     }));
     return props?.renderLabel ? [{
@@ -9034,6 +9045,7 @@ const getValueFromOptions = _ref2 => {
   let isMulti = _ref2.isMulti,
     value = _ref2.value,
     dataLocale = _ref2.dataLocale,
+    languages = _ref2.languages,
     storesByFieldFetcher = _ref2.storesByFieldFetcher,
     renderSelectInputOptionValuesByField = _ref2.renderSelectInputOptionValuesByField;
   if (!value) {
@@ -9042,6 +9054,7 @@ const getValueFromOptions = _ref2 => {
   const selectedOptions = storesByFieldFetcher.stores?.results.map(store => mapStoresToOptions({
     store,
     dataLocale,
+    languages,
     renderSelectInputOptionValuesByField: renderSelectInputOptionValuesByField
   }));
   if (isMulti) {
@@ -9055,9 +9068,11 @@ const getValueFromOptions = _ref2 => {
 const StoresSearchSelectInput = props => {
   // hooks
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
-      dataLocale: applicationContext.dataLocale || applicationContext.user?.locale
+      dataLocale: applicationContext.dataLocale,
+      projectLanguages: isEmpty__default["default"](applicationContext.project?.languages) ? props.projectLanguages : applicationContext.project?.languages
     })),
-    dataLocale = _useApplicationContex.dataLocale;
+    dataLocale = _useApplicationContex.dataLocale,
+    projectLanguages = _useApplicationContex.projectLanguages;
   const intl = reactIntl.useIntl();
   const client$1 = client.useApolloClient();
   const storesByFieldFetcher = useStoresByFieldFetcher(props.value, props.renderSelectInputOptionValuesByField, props.projectKey, props.shouldFetchProductSelections);
@@ -9081,6 +9096,7 @@ const StoresSearchSelectInput = props => {
       const result = data.storesByWherePredicate?.results.map(store => mapStoresToOptions({
         store,
         dataLocale,
+        languages: projectLanguages,
         renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
       }));
       if (!props.renderLabel) {
@@ -9119,6 +9135,7 @@ const StoresSearchSelectInput = props => {
         isMulti: props.isMulti,
         value: props.value,
         dataLocale,
+        languages: projectLanguages,
         storesByFieldFetcher,
         renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
       }),
@@ -9179,6 +9196,7 @@ const StoreSelectInput = props => {
     placeholder: props.placeholder,
     iconLeft: props.iconLeft,
     projectKey: props.projectKey,
+    projectLanguages: props.projectLanguages,
     id: props.id,
     name: props.name,
     components: components,

package/dist/commercetools-frontend-experimental-components.cjs.prod.js

@@ -1341,7 +1341,7 @@ let SearchInput = /*#__PURE__*/function (_Component) {
               [styles$h['clear-icon-container-granular']]: this.props.isGranular
             }),
             icon: jsxRuntime.jsx(uiKit.CloseIcon, {}),
-            size: "medium",
+            size: "30",
             label: "clear-button",
             onClick: this.handleClear
           }), jsxRuntime.jsx("div", {
@@ -4304,23 +4304,25 @@ const createAttributeTypeValue = attribute => {
  * hence the action structure is flat.
  */
 const formatMoney = valueType => money => {
-  if (valueType === 'fixed') {
-    return {
-      [money.type]: _objectSpread$15({
+  switch (valueType) {
+    case 'fixed':
+      return {
+        [money.type]: _objectSpread$15({
+          centAmount: money.centAmount,
+          currencyCode: money.currencyCode
+        }, money.type === PRECISION_TYPES.highPrecision && {
+          preciseAmount: money.preciseAmount,
+          fractionDigits: money.fractionDigits
+        })
+      };
+    case 'absolute':
+    case 'absoluteCart':
+      return {
         centAmount: money.centAmount,
         currencyCode: money.currencyCode
-      }, money.type === PRECISION_TYPES.highPrecision && {
-        preciseAmount: money.preciseAmount,
-        fractionDigits: money.fractionDigits
-      })
-    };
-  } else if (valueType === 'absolute') {
-    return {
-      centAmount: money.centAmount,
-      currencyCode: money.currencyCode
-    };
-  } else {
-    throw new Error('Unexpected value type for money.');
+      };
+    default:
+      throw new Error('Unexpected value type for money.');
   }
 };
 
@@ -4333,6 +4335,7 @@ const convertChangeValueAction = actionPayload => {
   const possibleTypeKeys = {
     relative: ['permyriad'],
     absolute: ['money'],
+    absoluteCart: ['money', 'applicationMode'],
     fixed: ['money'],
     giftLineItem: ['product', 'variantId', 'distributionChannel', 'supplyChannel', 'ResourceIdentifierInput']
   };
@@ -8667,7 +8670,8 @@ const UPPER_STORES_LIMIT = 500;
 const mapStoresToOptions = _ref => {
   let store = _ref.store,
     renderSelectInputOptionValuesByField = _ref.renderSelectInputOptionValuesByField,
-    dataLocale = _ref.dataLocale;
+    dataLocale = _ref.dataLocale,
+    languages = _ref.languages;
   const convertedStore = l10n.applyTransformedLocalizedFields(store, [{
     from: 'nameAllLocales',
     to: 'name'
@@ -8675,6 +8679,7 @@ const mapStoresToOptions = _ref => {
   const localizedName = l10n.formatLocalizedString(convertedStore, {
     key: 'name',
     locale: dataLocale,
+    fallbackOrder: languages,
     fallback: `${store.key} (key)`
   });
   return {
@@ -8730,9 +8735,11 @@ const emptyStoreOption = intl => [{
 const StoresAsyncSelectInput = props => {
   const intl = reactIntl.useIntl();
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
-      dataLocale: applicationContext.dataLocale || applicationContext.user?.locale
+      dataLocale: applicationContext.dataLocale,
+      projectLanguages: isEmpty__default["default"](applicationContext.project?.languages) ? props.projectLanguages : applicationContext.project?.languages
     })),
-    dataLocale = _useApplicationContex.dataLocale;
+    dataLocale = _useApplicationContex.dataLocale,
+    projectLanguages = _useApplicationContex.projectLanguages;
   const keysOfStores = props.allAccessibleStoreKeysThroughDataFencePermissions;
   const storesListFetcher = useStoresListFetcher({
     limit: 500,
@@ -8749,6 +8756,7 @@ const StoresAsyncSelectInput = props => {
     return _mapInstanceProperty__default["default"](_context2 = storesListFetcher.stores?.results || []).call(_context2, store => mapStoresToOptions({
       store,
       dataLocale,
+      languages: projectLanguages,
       renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
     }));
   }, [dataLocale, storesListFetcher.stores, props.renderSelectInputOptionValuesByField]);
@@ -8832,9 +8840,11 @@ const hasErrors$1 = errors => {
 const StoresBasicSelectInput = props => {
   const intl = reactIntl.useIntl();
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
-      dataLocale: applicationContext.dataLocale || applicationContext.user?.locale
+      dataLocale: applicationContext.dataLocale,
+      projectLanguages: isEmpty__default["default"](applicationContext.project?.languages) ? props.projectLanguages : applicationContext.project?.languages
     })),
-    dataLocale = _useApplicationContex.dataLocale;
+    dataLocale = _useApplicationContex.dataLocale,
+    projectLanguages = _useApplicationContex.projectLanguages;
   const keysOfStores = props.allAccessibleStoreKeysThroughDataFencePermissions;
   const storesListFetcher = useStoresListFetcher({
     limit: 60,
@@ -8851,6 +8861,7 @@ const StoresBasicSelectInput = props => {
     const results = _mapInstanceProperty__default["default"](_context2 = storesListFetcher.stores?.results || []).call(_context2, store => mapStoresToOptions({
       store,
       dataLocale,
+      languages: projectLanguages,
       renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
     }));
     return props?.renderLabel ? [{
@@ -9021,6 +9032,7 @@ const getValueFromOptions = _ref2 => {
   let isMulti = _ref2.isMulti,
     value = _ref2.value,
     dataLocale = _ref2.dataLocale,
+    languages = _ref2.languages,
     storesByFieldFetcher = _ref2.storesByFieldFetcher,
     renderSelectInputOptionValuesByField = _ref2.renderSelectInputOptionValuesByField;
   if (!value) {
@@ -9029,6 +9041,7 @@ const getValueFromOptions = _ref2 => {
   const selectedOptions = storesByFieldFetcher.stores?.results.map(store => mapStoresToOptions({
     store,
     dataLocale,
+    languages,
     renderSelectInputOptionValuesByField: renderSelectInputOptionValuesByField
   }));
   if (isMulti) {
@@ -9042,9 +9055,11 @@ const getValueFromOptions = _ref2 => {
 const StoresSearchSelectInput = props => {
   // hooks
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
-      dataLocale: applicationContext.dataLocale || applicationContext.user?.locale
+      dataLocale: applicationContext.dataLocale,
+      projectLanguages: isEmpty__default["default"](applicationContext.project?.languages) ? props.projectLanguages : applicationContext.project?.languages
     })),
-    dataLocale = _useApplicationContex.dataLocale;
+    dataLocale = _useApplicationContex.dataLocale,
+    projectLanguages = _useApplicationContex.projectLanguages;
   const intl = reactIntl.useIntl();
   const client$1 = client.useApolloClient();
   const storesByFieldFetcher = useStoresByFieldFetcher(props.value, props.renderSelectInputOptionValuesByField, props.projectKey, props.shouldFetchProductSelections);
@@ -9068,6 +9083,7 @@ const StoresSearchSelectInput = props => {
       const result = data.storesByWherePredicate?.results.map(store => mapStoresToOptions({
         store,
         dataLocale,
+        languages: projectLanguages,
         renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
       }));
       if (!props.renderLabel) {
@@ -9106,6 +9122,7 @@ const StoresSearchSelectInput = props => {
         isMulti: props.isMulti,
         value: props.value,
         dataLocale,
+        languages: projectLanguages,
         storesByFieldFetcher,
         renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
       }),
@@ -9166,6 +9183,7 @@ const StoreSelectInput = props => {
     placeholder: props.placeholder,
     iconLeft: props.iconLeft,
     projectKey: props.projectKey,
+    projectLanguages: props.projectLanguages,
     id: props.id,
     name: props.name,
     components: components,

package/dist/commercetools-frontend-experimental-components.esm.js

@@ -1259,7 +1259,7 @@ let SearchInput = /*#__PURE__*/function (_Component) {
               [styles$h['clear-icon-container-granular']]: this.props.isGranular
             }),
             icon: jsx(CloseIcon, {}),
-            size: "medium",
+            size: "30",
             label: "clear-button",
             onClick: this.handleClear
           }), jsx("div", {
@@ -4222,23 +4222,25 @@ const createAttributeTypeValue = attribute => {
  * hence the action structure is flat.
  */
 const formatMoney = valueType => money => {
-  if (valueType === 'fixed') {
-    return {
-      [money.type]: _objectSpread$15({
+  switch (valueType) {
+    case 'fixed':
+      return {
+        [money.type]: _objectSpread$15({
+          centAmount: money.centAmount,
+          currencyCode: money.currencyCode
+        }, money.type === PRECISION_TYPES.highPrecision && {
+          preciseAmount: money.preciseAmount,
+          fractionDigits: money.fractionDigits
+        })
+      };
+    case 'absolute':
+    case 'absoluteCart':
+      return {
         centAmount: money.centAmount,
         currencyCode: money.currencyCode
-      }, money.type === PRECISION_TYPES.highPrecision && {
-        preciseAmount: money.preciseAmount,
-        fractionDigits: money.fractionDigits
-      })
-    };
-  } else if (valueType === 'absolute') {
-    return {
-      centAmount: money.centAmount,
-      currencyCode: money.currencyCode
-    };
-  } else {
-    throw new Error('Unexpected value type for money.');
+      };
+    default:
+      throw new Error('Unexpected value type for money.');
   }
 };
 
@@ -4251,6 +4253,7 @@ const convertChangeValueAction = actionPayload => {
   const possibleTypeKeys = {
     relative: ['permyriad'],
     absolute: ['money'],
+    absoluteCart: ['money', 'applicationMode'],
     fixed: ['money'],
     giftLineItem: ['product', 'variantId', 'distributionChannel', 'supplyChannel', 'ResourceIdentifierInput']
   };
@@ -8597,7 +8600,8 @@ const UPPER_STORES_LIMIT = 500;
 const mapStoresToOptions = _ref => {
   let store = _ref.store,
     renderSelectInputOptionValuesByField = _ref.renderSelectInputOptionValuesByField,
-    dataLocale = _ref.dataLocale;
+    dataLocale = _ref.dataLocale,
+    languages = _ref.languages;
   const convertedStore = applyTransformedLocalizedFields(store, [{
     from: 'nameAllLocales',
     to: 'name'
@@ -8605,6 +8609,7 @@ const mapStoresToOptions = _ref => {
   const localizedName = formatLocalizedString(convertedStore, {
     key: 'name',
     locale: dataLocale,
+    fallbackOrder: languages,
     fallback: `${store.key} (key)`
   });
   return {
@@ -8660,9 +8665,11 @@ const emptyStoreOption = intl => [{
 const StoresAsyncSelectInput = props => {
   const intl = useIntl();
   const _useApplicationContex = useApplicationContext(applicationContext => ({
-      dataLocale: applicationContext.dataLocale || applicationContext.user?.locale
+      dataLocale: applicationContext.dataLocale,
+      projectLanguages: isEmpty$3(applicationContext.project?.languages) ? props.projectLanguages : applicationContext.project?.languages
     })),
-    dataLocale = _useApplicationContex.dataLocale;
+    dataLocale = _useApplicationContex.dataLocale,
+    projectLanguages = _useApplicationContex.projectLanguages;
   const keysOfStores = props.allAccessibleStoreKeysThroughDataFencePermissions;
   const storesListFetcher = useStoresListFetcher({
     limit: 500,
@@ -8679,6 +8686,7 @@ const StoresAsyncSelectInput = props => {
     return _mapInstanceProperty(_context2 = storesListFetcher.stores?.results || []).call(_context2, store => mapStoresToOptions({
       store,
       dataLocale,
+      languages: projectLanguages,
       renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
     }));
   }, [dataLocale, storesListFetcher.stores, props.renderSelectInputOptionValuesByField]);
@@ -8762,9 +8770,11 @@ const hasErrors$1 = errors => {
 const StoresBasicSelectInput = props => {
   const intl = useIntl();
   const _useApplicationContex = useApplicationContext(applicationContext => ({
-      dataLocale: applicationContext.dataLocale || applicationContext.user?.locale
+      dataLocale: applicationContext.dataLocale,
+      projectLanguages: isEmpty$3(applicationContext.project?.languages) ? props.projectLanguages : applicationContext.project?.languages
     })),
-    dataLocale = _useApplicationContex.dataLocale;
+    dataLocale = _useApplicationContex.dataLocale,
+    projectLanguages = _useApplicationContex.projectLanguages;
   const keysOfStores = props.allAccessibleStoreKeysThroughDataFencePermissions;
   const storesListFetcher = useStoresListFetcher({
     limit: 60,
@@ -8781,6 +8791,7 @@ const StoresBasicSelectInput = props => {
     const results = _mapInstanceProperty(_context2 = storesListFetcher.stores?.results || []).call(_context2, store => mapStoresToOptions({
       store,
       dataLocale,
+      languages: projectLanguages,
       renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
     }));
     return props?.renderLabel ? [{
@@ -8951,6 +8962,7 @@ const getValueFromOptions = _ref2 => {
   let isMulti = _ref2.isMulti,
     value = _ref2.value,
     dataLocale = _ref2.dataLocale,
+    languages = _ref2.languages,
     storesByFieldFetcher = _ref2.storesByFieldFetcher,
     renderSelectInputOptionValuesByField = _ref2.renderSelectInputOptionValuesByField;
   if (!value) {
@@ -8959,6 +8971,7 @@ const getValueFromOptions = _ref2 => {
   const selectedOptions = storesByFieldFetcher.stores?.results.map(store => mapStoresToOptions({
     store,
     dataLocale,
+    languages,
     renderSelectInputOptionValuesByField: renderSelectInputOptionValuesByField
   }));
   if (isMulti) {
@@ -8972,9 +8985,11 @@ const getValueFromOptions = _ref2 => {
 const StoresSearchSelectInput = props => {
   // hooks
   const _useApplicationContex = useApplicationContext(applicationContext => ({
-      dataLocale: applicationContext.dataLocale || applicationContext.user?.locale
+      dataLocale: applicationContext.dataLocale,
+      projectLanguages: isEmpty$3(applicationContext.project?.languages) ? props.projectLanguages : applicationContext.project?.languages
     })),
-    dataLocale = _useApplicationContex.dataLocale;
+    dataLocale = _useApplicationContex.dataLocale,
+    projectLanguages = _useApplicationContex.projectLanguages;
   const intl = useIntl();
   const client = useApolloClient();
   const storesByFieldFetcher = useStoresByFieldFetcher(props.value, props.renderSelectInputOptionValuesByField, props.projectKey, props.shouldFetchProductSelections);
@@ -8998,6 +9013,7 @@ const StoresSearchSelectInput = props => {
       const result = data.storesByWherePredicate?.results.map(store => mapStoresToOptions({
         store,
         dataLocale,
+        languages: projectLanguages,
         renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
       }));
       if (!props.renderLabel) {
@@ -9036,6 +9052,7 @@ const StoresSearchSelectInput = props => {
         isMulti: props.isMulti,
         value: props.value,
         dataLocale,
+        languages: projectLanguages,
         storesByFieldFetcher,
         renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
       }),
@@ -9096,6 +9113,7 @@ const StoreSelectInput = props => {
     placeholder: props.placeholder,
     iconLeft: props.iconLeft,
     projectKey: props.projectKey,
+    projectLanguages: props.projectLanguages,
     id: props.id,
     name: props.name,
     components: components,

package/dist/styles.css

@@ -41,18 +41,6 @@
   font-size: 0.9rem;
   font-weight: bold;
 }
-/*  imported from numeric-format-input.module.css  */
-
-.numeric-format-input-module__invalid___3LcyE {
-  /* this needs !important because react-select has a :focus style that
-    stops the border colour being set unless the element is blurred */
-  border-color: var(--color-error) !important;
-  border: 1px solid;
-}
-
-.numeric-format-input-module__disabled___hb6h4 {
-  cursor: not-allowed;
-}
 /*  imported from multi-value-search-input.module.css  */
 
 .multi-value-search-input-module__container___2u64d {
@@ -99,6 +87,18 @@
   border-bottom-left-radius: var(--border-radius-for-input);
   border-bottom-right-radius: var(--border-radius-for-input);
 }
+/*  imported from numeric-format-input.module.css  */
+
+.numeric-format-input-module__invalid___3LcyE {
+  /* this needs !important because react-select has a :focus style that
+    stops the border colour being set unless the element is blurred */
+  border-color: var(--color-error) !important;
+  border: 1px solid;
+}
+
+.numeric-format-input-module__disabled___hb6h4 {
+  cursor: not-allowed;
+}
 /*  imported from search-input.module.css  */
 
 .search-input-module__block___1uM-y {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/experimental-components",
-  "version": "6.1.5",
+  "version": "6.2.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -18,19 +18,19 @@
     "@babel/core": "^7.22.11",
     "@babel/runtime": "^7.21.0",
     "@babel/runtime-corejs3": "^7.21.0",
-    "@commercetools-frontend/actions-global": "npm:@commercetools-frontend/actions-global@^22.30.3",
-    "@commercetools-frontend/application-components": "npm:@commercetools-frontend/application-components@^22.30.3",
-    "@commercetools-frontend/application-shell": "npm:@commercetools-frontend/application-shell@^22.30.3",
-    "@commercetools-frontend/application-shell-connectors": "npm:@commercetools-frontend/application-shell-connectors@^22.30.3",
-    "@commercetools-frontend/constants": "npm:@commercetools-frontend/constants@^22.30.3",
-    "@commercetools-frontend/l10n": "npm:@commercetools-frontend/l10n@^22.30.3",
-    "@commercetools-frontend/sdk": "npm:@commercetools-frontend/sdk@^22.30.3",
-    "@commercetools-frontend/sentry": "npm:@commercetools-frontend/sentry@^22.30.3",
+    "@commercetools-frontend/actions-global": "npm:@commercetools-frontend/actions-global@^22.31.0",
+    "@commercetools-frontend/application-components": "npm:@commercetools-frontend/application-components@^22.31.0",
+    "@commercetools-frontend/application-shell": "npm:@commercetools-frontend/application-shell@^22.31.0",
+    "@commercetools-frontend/application-shell-connectors": "npm:@commercetools-frontend/application-shell-connectors@^22.31.0",
+    "@commercetools-frontend/constants": "npm:@commercetools-frontend/constants@^22.31.0",
+    "@commercetools-frontend/l10n": "npm:@commercetools-frontend/l10n@^22.31.0",
+    "@commercetools-frontend/sdk": "npm:@commercetools-frontend/sdk@^22.31.0",
+    "@commercetools-frontend/sentry": "npm:@commercetools-frontend/sentry@^22.31.0",
     "@commercetools-frontend/ui-kit": "npm:@commercetools-frontend/ui-kit@^19.10.0",
     "@commercetools-uikit/design-system": "npm:@commercetools-uikit/design-system@^19.10.0",
     "@commercetools-uikit/select-utils": "npm:@commercetools-uikit/select-utils@^19.10.0",
     "@commercetools-uikit/utils": "npm:@commercetools-uikit/utils@^19.10.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.4",
     "classnames": "2.5.1",
     "cleave.js": "1.5.10",
     "common-tags": "1.8.2",
@@ -53,11 +53,11 @@
   },
   "devDependencies": {
     "@apollo/client": "3.7.10",
-    "@commercetools-test-data/channel": "9.0.7",
-    "@commercetools-test-data/commons": "9.0.7",
-    "@commercetools-test-data/core": "9.0.7",
-    "@commercetools-test-data/product-selection": "9.0.7",
-    "@commercetools-test-data/store": "9.0.7",
+    "@commercetools-test-data/channel": "10.2.0",
+    "@commercetools-test-data/commons": "10.2.0",
+    "@commercetools-test-data/core": "10.2.0",
+    "@commercetools-test-data/product-selection": "10.2.0",
+    "@commercetools-test-data/store": "10.2.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.1",
     "formik": "2.4.6",