@commercetools-frontend/experimental-components 5.4.3 → 5.4.4

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

@@ -72,8 +72,8 @@ var has = require('lodash/has');
 var _toArray = require('@babel/runtime-corejs3/helpers/toArray');
 var _reverseInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
 var sdk = require('@commercetools-frontend/sdk');
-var client = require('@apollo/client');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var client = require('@apollo/client');
 var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
 var _parseFloat = require('@babel/runtime-corejs3/core-js-stable/parse-float');
 var omit = require('lodash/omit');
@@ -3022,7 +3022,7 @@ const ChannelPickerInput = _ref => {
   const variables = React.useMemo(() => _objectSpread$1b({
     sortByNamePath: "name.".concat(dataLocale)
   }, role && {
-    where: "roles contains any (\"".concat(role, "\")")
+    extraWhere: "roles contains any (\"".concat(role, "\")")
   }), [dataLocale, role]);
   const _useState = React.useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -3730,8 +3730,9 @@ const useHandlers = onChange => {
   return [handleInputChange, handleChange];
 };
 
+const _excluded$1 = ["extraWhere"];
 function ownKeys$16(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys$16(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys$16(Object(t))).call(_context7, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var _context7, _context8; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context7 = ownKeys$16(Object(t), !0)).call(_context7, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context8 = ownKeys$16(Object(t))).call(_context8, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const constructPrefixSearchPredicate = function () {
   let prefixSearchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let lowerBound = arguments.length > 1 ? arguments[1] : undefined;
@@ -3761,22 +3762,30 @@ const useLoadOptions = _ref => {
   const client$1 = client.useApolloClient();
   const loadOptions = React.useCallback(function () {
     let inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    const where = function () {
-      if (inputValue.length) {
-        if (isUUID(inputValue)) return "id = \"".concat(inputValue, "\"");else {
-          const _getPrefixSearchBound = getPrefixSearchBounds(inputValue),
-            _getPrefixSearchBound2 = _slicedToArray(_getPrefixSearchBound, 2),
-            lowerBound = _getPrefixSearchBound2[0],
-            upperBound = _getPrefixSearchBound2[1];
-          return constructPrefixSearchPredicate(prefixSearchFields, lowerBound, upperBound);
-        }
+    let where;
+    if (inputValue.length) {
+      if (isUUID(inputValue)) {
+        where = "id = \"".concat(inputValue, "\"");
+      } else {
+        const _getPrefixSearchBound = getPrefixSearchBounds(inputValue),
+          _getPrefixSearchBound2 = _slicedToArray(_getPrefixSearchBound, 2),
+          lowerBound = _getPrefixSearchBound2[0],
+          upperBound = _getPrefixSearchBound2[1];
+        where = constructPrefixSearchPredicate(prefixSearchFields, lowerBound, upperBound);
       }
-    }();
+    }
+    const _ref2 = variables !== null && variables !== void 0 ? variables : {},
+      extraWhere = _ref2.extraWhere,
+      restVariables = _objectWithoutProperties(_ref2, _excluded$1);
+    if (typeof extraWhere === 'string') {
+      var _context6;
+      where = where ? _concatInstanceProperty__default["default"](_context6 = "(".concat(where, ") and ")).call(_context6, variables.extraWhere) : variables.extraWhere;
+    }
     return client$1.query({
       query,
       variables: _objectSpread$16({
         where
-      }, variables),
+      }, restVariables),
       context: {
         target: constants.MC_API_PROXY_TARGETS.COMMERCETOOLS_PLATFORM
       },
@@ -5419,7 +5428,7 @@ const DraggableWrapper = _ref => {
         children: jsxRuntime.jsxs(uiKit.Grid, {
           gridTemplateColumns: '1fr 20fr',
           gridTemplateRows: "auto 1fr auto",
-          gridGap: uiKit.customProperties.spacingL,
+          gridGap: uiKit.customProperties.spacingM,
           children: [jsxRuntime.jsx(uiKit.Grid.Item, {
             children: jsxRuntime.jsx(DragHandle, _objectSpread$X({}, provided.dragHandleProps))
           }), jsxRuntime.jsx(uiKit.Grid.Item, {
@@ -7175,15 +7184,21 @@ CustomNestedInput.displayName = 'CustomNestedInput';
 
 var styles$d = {
   "divider": "divider-module__divider___4-vdy",
+  "divider-horizontal": "divider-module__divider-horizontal___RuUcj",
+  "divider-vertical": "divider-module__divider-vertical___32kJG",
   "divider-solid": "divider-module__divider-solid___3Fs4q divider-module__divider___4-vdy",
   "divider-dashed": "divider-module__divider-dashed___2Em8A divider-module__divider___4-vdy"
 };
 function Divider(_ref) {
-  let isDashed = _ref.isDashed;
+  let isDashed = _ref.isDashed,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation;
   return jsxRuntime.jsx("hr", {
     className: classnames__default["default"]({
       [styles$d['divider-solid']]: !isDashed,
-      [styles$d['divider-dashed']]: isDashed
+      [styles$d['divider-dashed']]: isDashed,
+      [styles$d['divider-horizontal']]: orientation === 'horizontal',
+      [styles$d['divider-vertical']]: orientation === 'vertical'
     })
   });
 }

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

@@ -72,8 +72,8 @@ var has = require('lodash/has');
 var _toArray = require('@babel/runtime-corejs3/helpers/toArray');
 var _reverseInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
 var sdk = require('@commercetools-frontend/sdk');
-var client = require('@apollo/client');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var client = require('@apollo/client');
 var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
 var _parseFloat = require('@babel/runtime-corejs3/core-js-stable/parse-float');
 var omit = require('lodash/omit');
@@ -3021,7 +3021,7 @@ const ChannelPickerInput = _ref => {
   const variables = React.useMemo(() => _objectSpread$1b({
     sortByNamePath: "name.".concat(dataLocale)
   }, role && {
-    where: "roles contains any (\"".concat(role, "\")")
+    extraWhere: "roles contains any (\"".concat(role, "\")")
   }), [dataLocale, role]);
   const _useState = React.useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -3729,8 +3729,9 @@ const useHandlers = onChange => {
   return [handleInputChange, handleChange];
 };
 
+const _excluded$1 = ["extraWhere"];
 function ownKeys$16(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys$16(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys$16(Object(t))).call(_context7, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var _context7, _context8; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context7 = ownKeys$16(Object(t), !0)).call(_context7, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context8 = ownKeys$16(Object(t))).call(_context8, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const constructPrefixSearchPredicate = function () {
   let prefixSearchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let lowerBound = arguments.length > 1 ? arguments[1] : undefined;
@@ -3760,22 +3761,30 @@ const useLoadOptions = _ref => {
   const client$1 = client.useApolloClient();
   const loadOptions = React.useCallback(function () {
     let inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    const where = function () {
-      if (inputValue.length) {
-        if (isUUID(inputValue)) return "id = \"".concat(inputValue, "\"");else {
-          const _getPrefixSearchBound = getPrefixSearchBounds(inputValue),
-            _getPrefixSearchBound2 = _slicedToArray(_getPrefixSearchBound, 2),
-            lowerBound = _getPrefixSearchBound2[0],
-            upperBound = _getPrefixSearchBound2[1];
-          return constructPrefixSearchPredicate(prefixSearchFields, lowerBound, upperBound);
-        }
+    let where;
+    if (inputValue.length) {
+      if (isUUID(inputValue)) {
+        where = "id = \"".concat(inputValue, "\"");
+      } else {
+        const _getPrefixSearchBound = getPrefixSearchBounds(inputValue),
+          _getPrefixSearchBound2 = _slicedToArray(_getPrefixSearchBound, 2),
+          lowerBound = _getPrefixSearchBound2[0],
+          upperBound = _getPrefixSearchBound2[1];
+        where = constructPrefixSearchPredicate(prefixSearchFields, lowerBound, upperBound);
       }
-    }();
+    }
+    const _ref2 = variables !== null && variables !== void 0 ? variables : {},
+      extraWhere = _ref2.extraWhere,
+      restVariables = _objectWithoutProperties(_ref2, _excluded$1);
+    if (typeof extraWhere === 'string') {
+      var _context6;
+      where = where ? _concatInstanceProperty__default["default"](_context6 = "(".concat(where, ") and ")).call(_context6, variables.extraWhere) : variables.extraWhere;
+    }
     return client$1.query({
       query,
       variables: _objectSpread$16({
         where
-      }, variables),
+      }, restVariables),
       context: {
         target: constants.MC_API_PROXY_TARGETS.COMMERCETOOLS_PLATFORM
       },
@@ -5418,7 +5427,7 @@ const DraggableWrapper = _ref => {
         children: jsxRuntime.jsxs(uiKit.Grid, {
           gridTemplateColumns: '1fr 20fr',
           gridTemplateRows: "auto 1fr auto",
-          gridGap: uiKit.customProperties.spacingL,
+          gridGap: uiKit.customProperties.spacingM,
           children: [jsxRuntime.jsx(uiKit.Grid.Item, {
             children: jsxRuntime.jsx(DragHandle, _objectSpread$X({}, provided.dragHandleProps))
           }), jsxRuntime.jsx(uiKit.Grid.Item, {
@@ -7174,15 +7183,21 @@ CustomNestedInput.displayName = 'CustomNestedInput';
 
 var styles$d = {
   "divider": "divider-module__divider___4-vdy",
+  "divider-horizontal": "divider-module__divider-horizontal___RuUcj",
+  "divider-vertical": "divider-module__divider-vertical___32kJG",
   "divider-solid": "divider-module__divider-solid___3Fs4q divider-module__divider___4-vdy",
   "divider-dashed": "divider-module__divider-dashed___2Em8A divider-module__divider___4-vdy"
 };
 function Divider(_ref) {
-  let isDashed = _ref.isDashed;
+  let isDashed = _ref.isDashed,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation;
   return jsxRuntime.jsx("hr", {
     className: classnames__default["default"]({
       [styles$d['divider-solid']]: !isDashed,
-      [styles$d['divider-dashed']]: isDashed
+      [styles$d['divider-dashed']]: isDashed,
+      [styles$d['divider-horizontal']]: orientation === 'horizontal',
+      [styles$d['divider-vertical']]: orientation === 'vertical'
     })
   });
 }

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

@@ -68,8 +68,8 @@ import has from 'lodash/has';
 import _toArray from '@babel/runtime-corejs3/helpers/esm/toArray';
 import _reverseInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reverse';
 import { useAsyncDispatch, actions } from '@commercetools-frontend/sdk';
-import { useApolloClient as useApolloClient$1, useQuery as useQuery$2 } from '@apollo/client';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
+import { useApolloClient as useApolloClient$1, useQuery as useQuery$2 } from '@apollo/client';
 import _Object$entries from '@babel/runtime-corejs3/core-js-stable/object/entries';
 import _parseFloat from '@babel/runtime-corejs3/core-js-stable/parse-float';
 import omit from 'lodash/omit';
@@ -2939,7 +2939,7 @@ const ChannelPickerInput = _ref => {
   const variables = useMemo(() => _objectSpread$1b({
     sortByNamePath: "name.".concat(dataLocale)
   }, role && {
-    where: "roles contains any (\"".concat(role, "\")")
+    extraWhere: "roles contains any (\"".concat(role, "\")")
   }), [dataLocale, role]);
   const _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -3647,8 +3647,9 @@ const useHandlers = onChange => {
   return [handleInputChange, handleChange];
 };
 
+const _excluded$1 = ["extraWhere"];
 function ownKeys$16(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context6 = ownKeys$16(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context7 = ownKeys$16(Object(t))).call(_context7, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var _context7, _context8; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context7 = ownKeys$16(Object(t), !0)).call(_context7, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context8 = ownKeys$16(Object(t))).call(_context8, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const constructPrefixSearchPredicate = function () {
   let prefixSearchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let lowerBound = arguments.length > 1 ? arguments[1] : undefined;
@@ -3678,22 +3679,30 @@ const useLoadOptions = _ref => {
   const client = useApolloClient$1();
   const loadOptions = useCallback(function () {
     let inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    const where = function () {
-      if (inputValue.length) {
-        if (isUUID(inputValue)) return "id = \"".concat(inputValue, "\"");else {
-          const _getPrefixSearchBound = getPrefixSearchBounds(inputValue),
-            _getPrefixSearchBound2 = _slicedToArray(_getPrefixSearchBound, 2),
-            lowerBound = _getPrefixSearchBound2[0],
-            upperBound = _getPrefixSearchBound2[1];
-          return constructPrefixSearchPredicate(prefixSearchFields, lowerBound, upperBound);
-        }
+    let where;
+    if (inputValue.length) {
+      if (isUUID(inputValue)) {
+        where = "id = \"".concat(inputValue, "\"");
+      } else {
+        const _getPrefixSearchBound = getPrefixSearchBounds(inputValue),
+          _getPrefixSearchBound2 = _slicedToArray(_getPrefixSearchBound, 2),
+          lowerBound = _getPrefixSearchBound2[0],
+          upperBound = _getPrefixSearchBound2[1];
+        where = constructPrefixSearchPredicate(prefixSearchFields, lowerBound, upperBound);
       }
-    }();
+    }
+    const _ref2 = variables !== null && variables !== void 0 ? variables : {},
+      extraWhere = _ref2.extraWhere,
+      restVariables = _objectWithoutProperties(_ref2, _excluded$1);
+    if (typeof extraWhere === 'string') {
+      var _context6;
+      where = where ? _concatInstanceProperty(_context6 = "(".concat(where, ") and ")).call(_context6, variables.extraWhere) : variables.extraWhere;
+    }
     return client.query({
       query,
       variables: _objectSpread$16({
         where
-      }, variables),
+      }, restVariables),
       context: {
         target: MC_API_PROXY_TARGETS.COMMERCETOOLS_PLATFORM
       },
@@ -5336,7 +5345,7 @@ const DraggableWrapper = _ref => {
         children: jsxs(Grid, {
           gridTemplateColumns: '1fr 20fr',
           gridTemplateRows: "auto 1fr auto",
-          gridGap: customProperties.spacingL,
+          gridGap: customProperties.spacingM,
           children: [jsx(Grid.Item, {
             children: jsx(DragHandle, _objectSpread$X({}, provided.dragHandleProps))
           }), jsx(Grid.Item, {
@@ -7092,15 +7101,21 @@ CustomNestedInput.displayName = 'CustomNestedInput';
 
 var styles$d = {
   "divider": "divider-module__divider___4-vdy",
+  "divider-horizontal": "divider-module__divider-horizontal___RuUcj",
+  "divider-vertical": "divider-module__divider-vertical___32kJG",
   "divider-solid": "divider-module__divider-solid___3Fs4q divider-module__divider___4-vdy",
   "divider-dashed": "divider-module__divider-dashed___2Em8A divider-module__divider___4-vdy"
 };
 function Divider(_ref) {
-  let isDashed = _ref.isDashed;
+  let isDashed = _ref.isDashed,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation;
   return jsx("hr", {
     className: classnames({
       [styles$d['divider-solid']]: !isDashed,
-      [styles$d['divider-dashed']]: isDashed
+      [styles$d['divider-dashed']]: isDashed,
+      [styles$d['divider-horizontal']]: orientation === 'horizontal',
+      [styles$d['divider-vertical']]: orientation === 'vertical'
     })
   });
 }

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,6 +134,169 @@
   border-bottom-left-radius: 0;
   margin-left: 0;
 }
+/*  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 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 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 button.module.css  */
 
 /* Generic button */
@@ -464,57 +500,6 @@
 .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 {
@@ -528,11 +513,20 @@
 
 .divider-module__divider___4-vdy {
   box-sizing: border-box;
-  width: 100%;
   margin: 0;
   border: 0;
+  border-color: var(--color-neutral-90);
+}
+
+.divider-module__divider-horizontal___RuUcj {
+  width: 100%;
   border-top-width: 1px;
-  border-top-color: var(--color-neutral-90);
+}
+
+.divider-module__divider-vertical___32kJG {
+  width: 1px;
+  height: 2vmax;
+  border-left-width: 1px;
 }
 
 .divider-module__divider-solid___3Fs4q {
@@ -542,6 +536,21 @@
 .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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/experimental-components",
-  "version": "5.4.3",
+  "version": "5.4.4",
   "description": "",
   "main": "dist/commercetools-frontend-experimental-components.cjs.js",
   "module": "dist/commercetools-frontend-experimental-components.esm.js",