@commercetools-frontend/experimental-components 5.4.0 → 5.4.2

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

@@ -7630,10 +7630,12 @@ const CustomFieldsInternal = props => {
       return jsxRuntime.jsx(formik.FastField, {
         name: fieldName,
         validate: validate,
-        children: () => {
-          var _context3;
-          return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-            scale: "xs",
+        children: () => jsxRuntime.jsx(uiKit.Spacings.Stack, {
+          scale: "xs",
+          children: jsxRuntime.jsxs("div", {
+            "aria-invalid": _Object$keys__default["default"](fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {}).length > 0,
+            "aria-errormessage": "".concat(fieldName, "-error"),
+            id: "".concat(fieldName, "-error"),
             children: [jsxRuntime.jsx(CustomFieldsLabel, {
               name: fieldName,
               fieldDefinition: fieldDefinition
@@ -7648,26 +7650,22 @@ const CustomFieldsInternal = props => {
                 isReadOnly: props.isReadOnly,
                 onBlur: handleBlur,
                 setFieldValue: props.setFieldValue
-              }) : jsxRuntime.jsx("div", {
-                "aria-invalid": _Object$keys__default["default"](fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {}).length > 0,
-                "aria-errormessage": "".concat(fieldName, "-error"),
-                children: jsxRuntime.jsx(CustomFieldInput, {
-                  name: fieldName,
-                  value: value,
-                  fieldDefinition: fieldDefinition,
-                  isDisabled: props.isDisabled,
-                  isReadOnly: props.isReadOnly,
-                  onBlur: handleBlur,
-                  setFieldValue: props.setFieldValue,
-                  hasError: hasError
-                })
-              }, _concatInstanceProperty__default["default"](_context3 = "".concat(fieldName, "-")).call(_context3, index)), jsxRuntime.jsx(CustomFieldErrors, {
+              }) : jsxRuntime.jsx(CustomFieldInput, {
+                name: fieldName,
+                value: value,
+                fieldDefinition: fieldDefinition,
+                isDisabled: props.isDisabled,
+                isReadOnly: props.isReadOnly,
+                onBlur: handleBlur,
+                setFieldValue: props.setFieldValue,
+                hasError: hasError
+              }), jsxRuntime.jsx(CustomFieldErrors, {
                 isTouched: isTouched,
                 errors: fieldErrors
               })]
             })]
-          });
-        }
+          })
+        })
       }, _concatInstanceProperty__default["default"](_context2 = "".concat(fieldName, "-")).call(_context2, index));
     })
   });
@@ -11341,6 +11339,10 @@ const ScrollToFieldError = () => {
   const formik$1 = formik.useFormikContext();
   const isValid = formik$1.isValid,
     submitCount = formik$1.submitCount;
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
+      dataLocale: applicationContext.dataLocale
+    })),
+    dataLocale = _useApplicationContex.dataLocale;
   React.useEffect(() => {
     // Do not run the effect if the form hasn't been submitted yet.
     if (submitCount === 0) return;
@@ -11348,17 +11350,23 @@ const ScrollToFieldError = () => {
     if (isValid) return;
     const firstErrorElement = document.querySelector('[aria-invalid="true"]');
     if (firstErrorElement) {
-      var _ref, _document$querySelect, _elementToScrollTo$sc;
+      var _ref, _ref2, _document$querySelect, _elementToScrollTo$sc;
       // Get a reference to the label.
-      const id = firstErrorElement.getAttribute('id');
+      const firstElementId = firstErrorElement.getAttribute('id');
+      const localizedInputIndex = _indexOfInstanceProperty__default["default"](firstElementId).call(firstElementId, ".".concat(dataLocale));
+
+      // check if locale is appended then remove it from id
+      const id = localizedInputIndex > -1 ? firstElementId.replace(".".concat(dataLocale), '') : firstElementId;
 
       // Scroll to the label (if found), otherwise to the input element itself.
-      const elementToScrollTo = (_ref = (_document$querySelect = document.querySelector("label[for=\"".concat(id, "\"]"))) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("label#".concat(id))) !== null && _ref !== void 0 ? _ref : firstErrorElement;
+
+      const elementToScrollTo = //  div is used only for custom fields
+      (_ref = (_ref2 = (_document$querySelect = document.querySelector("div[aria-errormessage=\"".concat(firstElementId, "\"]"))) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("label[for=\"".concat(id, "\"]"))) !== null && _ref2 !== void 0 ? _ref2 : document.querySelector("label#".concat(id))) !== null && _ref !== void 0 ? _ref : firstErrorElement;
       (_elementToScrollTo$sc = elementToScrollTo.scrollIntoView) === null || _elementToScrollTo$sc === void 0 || _elementToScrollTo$sc.call(elementToScrollTo, {
         behavior: 'smooth'
       });
     }
-  }, [isValid, submitCount]);
+  }, [dataLocale, isValid, submitCount]);
   return null;
 };
 

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

@@ -7623,10 +7623,12 @@ const CustomFieldsInternal = props => {
       return jsxRuntime.jsx(formik.FastField, {
         name: fieldName,
         validate: validate,
-        children: () => {
-          var _context3;
-          return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-            scale: "xs",
+        children: () => jsxRuntime.jsx(uiKit.Spacings.Stack, {
+          scale: "xs",
+          children: jsxRuntime.jsxs("div", {
+            "aria-invalid": _Object$keys__default["default"](fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {}).length > 0,
+            "aria-errormessage": "".concat(fieldName, "-error"),
+            id: "".concat(fieldName, "-error"),
             children: [jsxRuntime.jsx(CustomFieldsLabel, {
               name: fieldName,
               fieldDefinition: fieldDefinition
@@ -7641,26 +7643,22 @@ const CustomFieldsInternal = props => {
                 isReadOnly: props.isReadOnly,
                 onBlur: handleBlur,
                 setFieldValue: props.setFieldValue
-              }) : jsxRuntime.jsx("div", {
-                "aria-invalid": _Object$keys__default["default"](fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {}).length > 0,
-                "aria-errormessage": "".concat(fieldName, "-error"),
-                children: jsxRuntime.jsx(CustomFieldInput, {
-                  name: fieldName,
-                  value: value,
-                  fieldDefinition: fieldDefinition,
-                  isDisabled: props.isDisabled,
-                  isReadOnly: props.isReadOnly,
-                  onBlur: handleBlur,
-                  setFieldValue: props.setFieldValue,
-                  hasError: hasError
-                })
-              }, _concatInstanceProperty__default["default"](_context3 = "".concat(fieldName, "-")).call(_context3, index)), jsxRuntime.jsx(CustomFieldErrors, {
+              }) : jsxRuntime.jsx(CustomFieldInput, {
+                name: fieldName,
+                value: value,
+                fieldDefinition: fieldDefinition,
+                isDisabled: props.isDisabled,
+                isReadOnly: props.isReadOnly,
+                onBlur: handleBlur,
+                setFieldValue: props.setFieldValue,
+                hasError: hasError
+              }), jsxRuntime.jsx(CustomFieldErrors, {
                 isTouched: isTouched,
                 errors: fieldErrors
               })]
             })]
-          });
-        }
+          })
+        })
       }, _concatInstanceProperty__default["default"](_context2 = "".concat(fieldName, "-")).call(_context2, index));
     })
   });
@@ -11334,6 +11332,10 @@ const ScrollToFieldError = () => {
   const formik$1 = formik.useFormikContext();
   const isValid = formik$1.isValid,
     submitCount = formik$1.submitCount;
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
+      dataLocale: applicationContext.dataLocale
+    })),
+    dataLocale = _useApplicationContex.dataLocale;
   React.useEffect(() => {
     // Do not run the effect if the form hasn't been submitted yet.
     if (submitCount === 0) return;
@@ -11341,17 +11343,23 @@ const ScrollToFieldError = () => {
     if (isValid) return;
     const firstErrorElement = document.querySelector('[aria-invalid="true"]');
     if (firstErrorElement) {
-      var _ref, _document$querySelect, _elementToScrollTo$sc;
+      var _ref, _ref2, _document$querySelect, _elementToScrollTo$sc;
       // Get a reference to the label.
-      const id = firstErrorElement.getAttribute('id');
+      const firstElementId = firstErrorElement.getAttribute('id');
+      const localizedInputIndex = _indexOfInstanceProperty__default["default"](firstElementId).call(firstElementId, ".".concat(dataLocale));
+
+      // check if locale is appended then remove it from id
+      const id = localizedInputIndex > -1 ? firstElementId.replace(".".concat(dataLocale), '') : firstElementId;
 
       // Scroll to the label (if found), otherwise to the input element itself.
-      const elementToScrollTo = (_ref = (_document$querySelect = document.querySelector("label[for=\"".concat(id, "\"]"))) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("label#".concat(id))) !== null && _ref !== void 0 ? _ref : firstErrorElement;
+
+      const elementToScrollTo = //  div is used only for custom fields
+      (_ref = (_ref2 = (_document$querySelect = document.querySelector("div[aria-errormessage=\"".concat(firstElementId, "\"]"))) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("label[for=\"".concat(id, "\"]"))) !== null && _ref2 !== void 0 ? _ref2 : document.querySelector("label#".concat(id))) !== null && _ref !== void 0 ? _ref : firstErrorElement;
       (_elementToScrollTo$sc = elementToScrollTo.scrollIntoView) === null || _elementToScrollTo$sc === void 0 || _elementToScrollTo$sc.call(elementToScrollTo, {
         behavior: 'smooth'
       });
     }
-  }, [isValid, submitCount]);
+  }, [dataLocale, isValid, submitCount]);
   return null;
 };
 

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

@@ -7547,10 +7547,12 @@ const CustomFieldsInternal = props => {
       return jsx(FastField, {
         name: fieldName,
         validate: validate,
-        children: () => {
-          var _context3;
-          return jsxs(Spacings.Stack, {
-            scale: "xs",
+        children: () => jsx(Spacings.Stack, {
+          scale: "xs",
+          children: jsxs("div", {
+            "aria-invalid": _Object$keys(fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {}).length > 0,
+            "aria-errormessage": "".concat(fieldName, "-error"),
+            id: "".concat(fieldName, "-error"),
             children: [jsx(CustomFieldsLabel, {
               name: fieldName,
               fieldDefinition: fieldDefinition
@@ -7565,26 +7567,22 @@ const CustomFieldsInternal = props => {
                 isReadOnly: props.isReadOnly,
                 onBlur: handleBlur,
                 setFieldValue: props.setFieldValue
-              }) : jsx("div", {
-                "aria-invalid": _Object$keys(fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {}).length > 0,
-                "aria-errormessage": "".concat(fieldName, "-error"),
-                children: jsx(CustomFieldInput, {
-                  name: fieldName,
-                  value: value,
-                  fieldDefinition: fieldDefinition,
-                  isDisabled: props.isDisabled,
-                  isReadOnly: props.isReadOnly,
-                  onBlur: handleBlur,
-                  setFieldValue: props.setFieldValue,
-                  hasError: hasError
-                })
-              }, _concatInstanceProperty(_context3 = "".concat(fieldName, "-")).call(_context3, index)), jsx(CustomFieldErrors, {
+              }) : jsx(CustomFieldInput, {
+                name: fieldName,
+                value: value,
+                fieldDefinition: fieldDefinition,
+                isDisabled: props.isDisabled,
+                isReadOnly: props.isReadOnly,
+                onBlur: handleBlur,
+                setFieldValue: props.setFieldValue,
+                hasError: hasError
+              }), jsx(CustomFieldErrors, {
                 isTouched: isTouched,
                 errors: fieldErrors
               })]
             })]
-          });
-        }
+          })
+        })
       }, _concatInstanceProperty(_context2 = "".concat(fieldName, "-")).call(_context2, index));
     })
   });
@@ -11258,6 +11256,10 @@ const ScrollToFieldError = () => {
   const formik = useFormikContext();
   const isValid = formik.isValid,
     submitCount = formik.submitCount;
+  const _useApplicationContex = useApplicationContext(applicationContext => ({
+      dataLocale: applicationContext.dataLocale
+    })),
+    dataLocale = _useApplicationContex.dataLocale;
   useEffect(() => {
     // Do not run the effect if the form hasn't been submitted yet.
     if (submitCount === 0) return;
@@ -11265,17 +11267,23 @@ const ScrollToFieldError = () => {
     if (isValid) return;
     const firstErrorElement = document.querySelector('[aria-invalid="true"]');
     if (firstErrorElement) {
-      var _ref, _document$querySelect, _elementToScrollTo$sc;
+      var _ref, _ref2, _document$querySelect, _elementToScrollTo$sc;
       // Get a reference to the label.
-      const id = firstErrorElement.getAttribute('id');
+      const firstElementId = firstErrorElement.getAttribute('id');
+      const localizedInputIndex = _indexOfInstanceProperty(firstElementId).call(firstElementId, ".".concat(dataLocale));
+
+      // check if locale is appended then remove it from id
+      const id = localizedInputIndex > -1 ? firstElementId.replace(".".concat(dataLocale), '') : firstElementId;
 
       // Scroll to the label (if found), otherwise to the input element itself.
-      const elementToScrollTo = (_ref = (_document$querySelect = document.querySelector("label[for=\"".concat(id, "\"]"))) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("label#".concat(id))) !== null && _ref !== void 0 ? _ref : firstErrorElement;
+
+      const elementToScrollTo = //  div is used only for custom fields
+      (_ref = (_ref2 = (_document$querySelect = document.querySelector("div[aria-errormessage=\"".concat(firstElementId, "\"]"))) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("label[for=\"".concat(id, "\"]"))) !== null && _ref2 !== void 0 ? _ref2 : document.querySelector("label#".concat(id))) !== null && _ref !== void 0 ? _ref : firstErrorElement;
       (_elementToScrollTo$sc = elementToScrollTo.scrollIntoView) === null || _elementToScrollTo$sc === void 0 || _elementToScrollTo$sc.call(elementToScrollTo, {
         behavior: 'smooth'
       });
     }
-  }, [isValid, submitCount]);
+  }, [dataLocale, isValid, submitCount]);
   return null;
 };
 

package/dist/styles.css

@@ -1,130 +1,3 @@
-/*  imported from search-input.module.css  */
-
-.search-input-module__block___1uM-y {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-  max-width: 800px;
-}
-
-.search-input-module__container___9u6if {
-  position: relative;
-  flex-grow: 1;
-}
-
-.search-input-module__input-container___mJnyZ {
-  border-color: var(--border-color-for-input);
-  height: var(--height-for-input);
-}
-
-.search-input-module__input-container___mJnyZ > input::placeholder {
-  font-weight: var(--font-weight-400);
-  font-size: var(--font-size-for-input);
-  font-family: var(--font-family);
-  color: var(--color-neutral-60);
-}
-
-.search-input-module__input-container___mJnyZ > input {
-  padding-right: calc(var(--spacing-xl) * 2);
-}
-
-.search-input-module__input-container-disabled___23jR8 > input {
-  border-color: var(--color-neutral);
-}
-
-.search-input-module__input-container-hoverable___1xjqn > input:hover {
-  border: var(--border-width-for-input) solid var(--border-color-for-input);
-  background-color: var(--background-color-for-input-when-hovered);
-}
-.search-input-module__input-container-hoverable___1xjqn > input:focus {
-  box-shadow: var(
-    --shadow-for-input-when-focused,
-    inset 0 0 0 1px var(--color-primary)
-  );
-  border-color: var(--border-color-for-input-when-focused);
-}
-
-.search-input-module__input-container-granular___33Pm- {
-  border-color: var(--color-primary);
-  position: relative;
-  right: 3px;
-}
-
-.search-input-module__search-icon-container___cbHQY {
-  background-color: transparent;
-  border-color: transparent;
-  position: absolute;
-  right: 9px;
-  top: 8px;
-}
-
-.search-input-module__clear-icon-container___3RQvu {
-  background-color: transparent;
-  border-color: transparent;
-  position: absolute;
-  right: 36px;
-  top: 11px;
-  z-index: 2;
-}
-
-.search-input-module__clear-icon-container-granular___1mbin {
-  right: 41px;
-}
-
-.search-input-module__search-icon-container-hoverable___1kTwJ {
-  cursor: pointer;
-}
-
-.search-input-module__search-icon-container-granular___3fAsR {
-  right: 15px;
-}
-
-.search-input-module__hidden___z07GX {
-  display: none !important;
-}
-
-.search-input-module__action___1GqGT {
-  flex-shrink: 1;
-  margin-left: var(--spacing-s);
-}
-/*  imported from required-indicator.module.css  */
-
-.required-indicator-module__colored____YUFm {
-  color: var(--color-warning);
-}
-
-.required-indicator-module__indicatorAsterisk___3lEdX {
-  font-style: normal;
-  margin-left: 2px;
-}
-/*  imported from selectable-field-search-input.module.css  */
-
-.selectable-field-search-input-module__container___z2ltR {
-  width: 100%;
-  position: relative;
-  display: flex;
-  z-index: 3;
-  max-width: var(--constraint-15);
-}
-
-.selectable-field-search-input-module__search-mode-menu___Od6Le {
-  border-radius: var(--border-radius-6);
-  border: 1px solid var(--color-primary);
-  margin-top: 2px;
-  position: absolute;
-}
-/*  imported from validated-input.module.css  */
-
-.validated-input-module__invalid___380EL {
-  /* 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;
-}
-
-.validated-input-module__container___3L2KB {
-  display: inline;
-}
 /*  imported from label-range.module.css  */
 
 .label-range-module__label___3Tb0p {
@@ -261,41 +134,132 @@
   border-bottom-left-radius: 0;
   margin-left: 0;
 }
-/* imported from file-input.module.css  */
-
-/** Button */
+/*  imported from search-input.module.css  */
 
-.file-input-module__button___2KypN {
+.search-input-module__block___1uM-y {
   display: inline-flex;
-  background-color: var(--color-surface);
-  border: var(--border-for-button-as-secondary);
-  box-shadow: none;
-  border-radius: var(--border-radius-4);
-  color: var(--color-solid);
-  height: var(--height-for-button-as-big);
-  font-size: var(--font-size-20);
-  font-weight: var(--font-weight-500);
-  align-items: center;
-  transition: background-color var(--transition-linear-80ms);
-  padding: 0 var(--spacing-m);
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 800px;
 }
 
-.file-input-module__button___2KypN:hover,
-.file-input-module__button___2KypN:focus {
+.search-input-module__container___9u6if {
+  position: relative;
+  flex-grow: 1;
+}
+
+.search-input-module__input-container___mJnyZ {
+  border-color: var(--border-color-for-input);
+  height: var(--height-for-input);
+}
+
+.search-input-module__input-container___mJnyZ > input::placeholder {
+  font-weight: var(--font-weight-400);
+  font-size: var(--font-size-for-input);
+  font-family: var(--font-family);
+  color: var(--color-neutral-60);
+}
+
+.search-input-module__input-container___mJnyZ > input {
+  padding-right: calc(var(--spacing-xl) * 2);
+}
+
+.search-input-module__input-container-disabled___23jR8 > input {
+  border-color: var(--color-neutral);
+}
+
+.search-input-module__input-container-hoverable___1xjqn > input:hover {
+  border: var(--border-width-for-input) solid var(--border-color-for-input);
+  background-color: var(--background-color-for-input-when-hovered);
+}
+.search-input-module__input-container-hoverable___1xjqn > input:focus {
+  box-shadow: var(
+    --shadow-for-input-when-focused,
+    inset 0 0 0 1px var(--color-primary)
+  );
+  border-color: var(--border-color-for-input-when-focused);
+}
+
+.search-input-module__input-container-granular___33Pm- {
+  border-color: var(--color-primary);
+  position: relative;
+  right: 3px;
+}
+
+.search-input-module__search-icon-container___cbHQY {
+  background-color: transparent;
+  border-color: transparent;
+  position: absolute;
+  right: 9px;
+  top: 8px;
+}
+
+.search-input-module__clear-icon-container___3RQvu {
+  background-color: transparent;
+  border-color: transparent;
+  position: absolute;
+  right: 36px;
+  top: 11px;
+  z-index: 2;
+}
+
+.search-input-module__clear-icon-container-granular___1mbin {
+  right: 41px;
+}
+
+.search-input-module__search-icon-container-hoverable___1kTwJ {
   cursor: pointer;
-  background-color: var(--background-color-for-button-when-hovered);
-  box-shadow: none;
 }
 
-.file-input-module__button___2KypN:active {
-  box-shadow: var(--shadow-9);
-  background-color: var(--color-surface);
+.search-input-module__search-icon-container-granular___3fAsR {
+  right: 15px;
 }
 
-.file-input-module__input___3MP4D {
-  visibility: hidden;
-  width: 1px;
-  height: 1px;
+.search-input-module__hidden___z07GX {
+  display: none !important;
+}
+
+.search-input-module__action___1GqGT {
+  flex-shrink: 1;
+  margin-left: var(--spacing-s);
+}
+/*  imported from required-indicator.module.css  */
+
+.required-indicator-module__colored____YUFm {
+  color: var(--color-warning);
+}
+
+.required-indicator-module__indicatorAsterisk___3lEdX {
+  font-style: normal;
+  margin-left: 2px;
+}
+/*  imported from selectable-field-search-input.module.css  */
+
+.selectable-field-search-input-module__container___z2ltR {
+  width: 100%;
+  position: relative;
+  display: flex;
+  z-index: 3;
+  max-width: var(--constraint-15);
+}
+
+.selectable-field-search-input-module__search-mode-menu___Od6Le {
+  border-radius: var(--border-radius-6);
+  border: 1px solid var(--color-primary);
+  margin-top: 2px;
+  position: absolute;
+}
+/*  imported from validated-input.module.css  */
+
+.validated-input-module__invalid___380EL {
+  /* 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;
+}
+
+.validated-input-module__container___3L2KB {
+  display: inline;
 }
 /*  imported from button.module.css  */
 
@@ -500,6 +464,57 @@
 .button-module__add-button___1f093 {
   min-height: 32px;
 }
+/* imported from file-input.module.css  */
+
+/** Button */
+
+.file-input-module__button___2KypN {
+  display: inline-flex;
+  background-color: var(--color-surface);
+  border: var(--border-for-button-as-secondary);
+  box-shadow: none;
+  border-radius: var(--border-radius-4);
+  color: var(--color-solid);
+  height: var(--height-for-button-as-big);
+  font-size: var(--font-size-20);
+  font-weight: var(--font-weight-500);
+  align-items: center;
+  transition: background-color var(--transition-linear-80ms);
+  padding: 0 var(--spacing-m);
+}
+
+.file-input-module__button___2KypN:hover,
+.file-input-module__button___2KypN:focus {
+  cursor: pointer;
+  background-color: var(--background-color-for-button-when-hovered);
+  box-shadow: none;
+}
+
+.file-input-module__button___2KypN:active {
+  box-shadow: var(--shadow-9);
+  background-color: var(--color-surface);
+}
+
+.file-input-module__input___3MP4D {
+  visibility: hidden;
+  width: 1px;
+  height: 1px;
+}
+/*  imported from reference-search.module.css  */
+
+.reference-search-module__container___3-iK3 {
+  width: 100%;
+}
+
+.reference-search-module__container___3-iK3 > div {
+  width: 100%;
+}
+
+.reference-search-module__missing-label___az9AO {
+  color: var(--color-warning);
+  font-size: 0.9rem;
+  margin-left: var(--spacing-xs);
+}
 /*  imported from centered-loading-spinner.module.css  */
 
 .centered-loading-spinner-module__loading-container___3_9-h {
@@ -527,21 +542,6 @@
 .divider-module__divider-dashed___2Em8A {
   border-style: dashed;
 }
-/*  imported from reference-search.module.css  */
-
-.reference-search-module__container___3-iK3 {
-  width: 100%;
-}
-
-.reference-search-module__container___3-iK3 > div {
-  width: 100%;
-}
-
-.reference-search-module__missing-label___az9AO {
-  color: var(--color-warning);
-  font-size: 0.9rem;
-  margin-left: var(--spacing-xs);
-}
 /*  imported from custom-money-input.module.css  */
 
 .custom-money-input-module__container___1fdO2 {
@@ -556,23 +556,23 @@
 .set-buttons-module__gap___38Qr0 {
   padding: 20px;
 }
-/*  imported from platform-limits-customer-groups-status.module.css  */
+/*  imported from platform-limits-customers-status.module.css  */
 
-.platform-limits-customer-groups-status-module__status___6099G {
+.platform-limits-customers-status-module__status___3rXYM {
   min-width: max-content;
 }
-/*  imported from platform-limits-customer-groups-combined.module.css  */
+/*  imported from platform-limits-customers-combined.module.css  */
 
-.platform-limits-customer-groups-combined-module__combined___WjRoI {
+.platform-limits-customers-combined-module__combined___OszDd {
   margin-bottom: var(--spacing-s);
 }
-/*  imported from platform-limits-customers-status.module.css  */
+/*  imported from platform-limits-customer-groups-status.module.css  */
 
-.platform-limits-customers-status-module__status___3rXYM {
+.platform-limits-customer-groups-status-module__status___6099G {
   min-width: max-content;
 }
-/*  imported from platform-limits-customers-combined.module.css  */
+/*  imported from platform-limits-customer-groups-combined.module.css  */
 
-.platform-limits-customers-combined-module__combined___OszDd {
+.platform-limits-customer-groups-combined-module__combined___WjRoI {
   margin-bottom: var(--spacing-s);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/experimental-components",
-  "version": "5.4.0",
+  "version": "5.4.2",
   "description": "",
   "main": "dist/commercetools-frontend-experimental-components.cjs.js",
   "module": "dist/commercetools-frontend-experimental-components.esm.js",
@@ -13,18 +13,18 @@
     "@babel/core": "^7.22.11",
     "@babel/runtime": "^7.21.0",
     "@babel/runtime-corejs3": "^7.21.0",
-    "@commercetools-frontend/actions-global": "^22.7.1",
-    "@commercetools-frontend/application-components": "^22.7.1",
-    "@commercetools-frontend/application-shell": "^22.7.1",
-    "@commercetools-frontend/application-shell-connectors": "^22.7.1",
-    "@commercetools-frontend/constants": "^22.7.1",
-    "@commercetools-frontend/l10n": "^22.7.1",
-    "@commercetools-frontend/sdk": "^22.7.1",
-    "@commercetools-frontend/sentry": "^22.7.1",
-    "@commercetools-frontend/ui-kit": "^16.7.4",
-    "@commercetools-uikit/design-system": "^16.7.4",
-    "@commercetools-uikit/select-utils": "^16.7.4",
-    "@commercetools-uikit/utils": "^16.7.4",
+    "@commercetools-frontend/actions-global": "^22.8.2",
+    "@commercetools-frontend/application-components": "^22.8.2",
+    "@commercetools-frontend/application-shell": "^22.8.2",
+    "@commercetools-frontend/application-shell-connectors": "^22.8.2",
+    "@commercetools-frontend/constants": "^22.8.2",
+    "@commercetools-frontend/l10n": "^22.8.2",
+    "@commercetools-frontend/sdk": "^22.8.2",
+    "@commercetools-frontend/sentry": "^22.8.2",
+    "@commercetools-frontend/ui-kit": "^16.7.5",
+    "@commercetools-uikit/design-system": "^16.7.5",
+    "@commercetools-uikit/select-utils": "^16.7.5",
+    "@commercetools-uikit/utils": "^16.7.5",
     "@emotion/react": "^11.11.1",
     "classnames": "2.3.2",
     "cleave.js": "1.5.10",
@@ -65,10 +65,10 @@
     "react-router-dom": "^5.3.4",
     "react-test-renderer": "^17.0.2",
     "redux": "^4.2.1",
-    "typescript": "5.1.6",
+    "typescript": "5.2.2",
     "xhr-mock": "^2.5.1",
-    "@commercetools-local/test-data": "1.2.1",
-    "@commercetools-local/test-utils": "1.2.1"
+    "@commercetools-local/test-data": "1.2.3",
+    "@commercetools-local/test-utils": "1.2.3"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",