@commercetools-frontend/experimental-components 7.2.4 → 8.0.0

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

@@ -36,11 +36,13 @@ var _everyInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/inst
 var _Promise = require('@babel/runtime-corejs3/core-js-stable/promise');
 var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
 var _bindInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/bind');
+var react$1 = require('@emotion/react');
 var fastEquals = require('fast-equals');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var classnames = require('classnames');
 var camelCase = require('lodash/camelCase');
+var designSystem = require('@commercetools-uikit/design-system');
 var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
 var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
 var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
@@ -74,7 +76,6 @@ var actionsGlobal = require('@commercetools-frontend/actions-global');
 var applicationComponents = require('@commercetools-frontend/application-components');
 var _ = require('@commercetools-frontend/ui-kit/');
 var PropTypes = require('prop-types');
-var react$1 = require('@emotion/react');
 var dnd = require('@hello-pangea/dnd');
 var ReactDOM = require('react-dom');
 var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
@@ -217,15 +218,12 @@ var invariant__default = /*#__PURE__*/_interopDefault(invariant);
 var hoistNonReactStatics__default = /*#__PURE__*/_interopDefault(hoistNonReactStatics);
 var get__default = /*#__PURE__*/_interopDefault(get);
 
-var styles$k = {
-  "loading-container": "centered-loading-spinner-module__loading-container___3_9-h"
-};
-/**
- * renders a centered LoadingSpinner that assumes the height of its parent
- * - the ui-kit Spacings.Stack does not allow for custom styles, nor does it stretch to fill its container's height
- */
+var _ref$h = {
+  name: "1tmmbhs",
+  styles: "height:100%;display:flex;flex-grow:1;align-items:center;justify-content:center"
+} ;
 const CenteredLoadingSpinner = () => jsxRuntime.jsx("div", {
-  className: styles$k['loading-container'],
+  css: _ref$h,
   "data-testid": "centered-loading-spinner",
   children: jsxRuntime.jsx(uiKit.LoadingSpinner, {})
 });
@@ -1211,22 +1209,17 @@ const withMouseOverState = BaseComponent => {
 };
 var withMouseOverState$1 = withMouseOverState;
 
+const getTextareaStyles = props => /*#__PURE__*/react$1.css("transition:0.2s ease;border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-style:solid;border-width:1px;color:", designSystem.designTokens.colorSolid, ";font-weight:", designSystem.designTokens.fontWeight500, ";font-size:", designSystem.designTokens.fontSize10, ";font-family:", designSystem.designTokens.fontFamily, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";outline:none;box-shadow:none;appearance:none;width:100%;min-height:", designSystem.designTokens.heightForInput, ";resize:vertical;", props.style === 'primary' && /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.colorNeutral, ";background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ), " ", props.style === 'secondary' && /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorNeutral95, ";border-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ), " ", props.disabled && /*#__PURE__*/react$1.css("cursor:not-allowed;background-color:", designSystem.designTokens.colorAccent98, ";color:", designSystem.designTokens.colorSolid, ";opacity:1;" + ("" ), "" ), " ", !props.isValid && /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.colorError, ";border:1px solid;" + ("" ), "" ), ";" + ("" ), "" );
+var _ref$g = {
+  name: "7g7czh",
+  styles: "border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0"
+} ;
+const getInputStyles = props => /*#__PURE__*/react$1.css("transition:0.2s ease;border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-style:solid;border-width:1px;color:", designSystem.designTokens.colorSolid, ";font-weight:", designSystem.designTokens.fontWeight500, ";font-size:", designSystem.designTokens.fontSize10, ";font-family:", designSystem.designTokens.fontFamily, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";outline:none;box-shadow:none;appearance:none;width:100%;min-height:", designSystem.designTokens.heightForInput, ";", props.style === 'primary' && /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.colorNeutral, ";background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ), " ", props.style === 'secondary' && /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorNeutral95, ";border-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ), " ", props.disabled && /*#__PURE__*/react$1.css("cursor:not-allowed;background-color:", designSystem.designTokens.colorAccent98, ";color:", designSystem.designTokens.colorSolid, ";opacity:1;" + ("" ), "" ), " ", !props.isValid && /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.colorError, "!important;border:1px solid;" + ("" ), "" ), " ", props.isGranular && _ref$g, ";" + ("" ), "" );
+
 function ownKeys$1n(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$1n(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1n(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1n(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function _callSuper$7(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$7() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$7() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$7 = function () { return !!t; })(); }
-var styles$j = {
-  "size": "throttled-field-module__size___324jx",
-  "input-text": "throttled-field-module__input-text___3zFFp",
-  "input-secondary": "throttled-field-module__input-secondary___cFo9e throttled-field-module__input-text___3zFFp throttled-field-module__size___324jx",
-  "input-primary": "throttled-field-module__input-primary___26G3R throttled-field-module__input-text___3zFFp throttled-field-module__size___324jx",
-  "textarea": "throttled-field-module__textarea___3ZNEs",
-  "textarea-primary": "throttled-field-module__textarea-primary___24Wwt throttled-field-module__textarea___3ZNEs throttled-field-module__input-text___3zFFp",
-  "textarea-secondary": "throttled-field-module__textarea-secondary___2rmFG throttled-field-module__textarea___3ZNEs throttled-field-module__input-text___3zFFp",
-  "invalid": "throttled-field-module__invalid___1yZLW",
-  "disabled": "throttled-field-module__disabled___qVj79",
-  "granular": "throttled-field-module__granular___2LXJf"
-};
 let ThrottledField = /*#__PURE__*/function (_PureComponent) {
   function ThrottledField() {
     var _this;
@@ -1324,10 +1317,7 @@ let ThrottledField = /*#__PURE__*/function (_PureComponent) {
           })
         }), this.props.as === 'textarea' ? jsxRuntime.jsx(Textarea__default["default"], _objectSpread$1n(_objectSpread$1n({}, commonProps), {}, {
           id: inputId,
-          className: classnames__default["default"](styles$j.textarea, styles$j[`textarea-${this.props.style}`], {
-            [styles$j.invalid]: !this.props.isValid,
-            [styles$j.disabled]: this.props.disabled
-          }),
+          css: getTextareaStyles(this.props),
           rows: 1,
           maxRows: this.props.autoSize ? undefined : 1,
           cacheMeasurements: true
@@ -1335,11 +1325,7 @@ let ThrottledField = /*#__PURE__*/function (_PureComponent) {
           id: inputId,
           ref: this.props.inputRef,
           type: this.props.as,
-          className: classnames__default["default"](styles$j[`input-${this.props.style}`], {
-            [styles$j.invalid]: !this.props.isValid,
-            [styles$j.disabled]: this.props.disabled,
-            [styles$j.granular]: this.props.isGranular
-          })
+          css: getInputStyles(this.props)
         }))]
       });
     }
@@ -1382,23 +1368,42 @@ var messages$O = reactIntl.defineMessages({
   }
 });
 
+const getInputContainerStyles = props => /*#__PURE__*/react$1.css("border-color:", props.isGranular ? designSystem.designTokens.colorPrimary : designSystem.designTokens.borderColorForInput, ";height:", designSystem.designTokens.heightForInput, ";position:relative;&>input{padding-right:calc(", designSystem.designTokens.spacingXl, " * 2);}&>input::placeholder{font-weight:", designSystem.designTokens.fontWeight400, ";font-size:1rem;font-family:", designSystem.designTokens.fontFamily, ";color:", designSystem.designTokens.colorNeutral60, ";}", !props.disabled && `
+    & > input:hover {
+      border: 1px solid ${designSystem.designTokens.borderColorForInput};
+      background-color: ${designSystem.designTokens.backgroundColorForInputWhenHovered};
+    }
+
+    & > input:focus {
+      box-shadow: inset 0 0 0 1px ${designSystem.designTokens.colorPrimary};
+      border-color: ${designSystem.designTokens.borderColorForInputWhenFocused};
+    }
+  `, " ", props.disabled && props.enableDisabledStyle && `
+    & > input {
+      border-color: ${designSystem.designTokens.colorNeutral};
+    }
+  `, " ", props.isGranular && `
+    right: 3px;
+  `, ";" + ("" ), "" );
+const getSecondaryIconButtonStyles = props => /*#__PURE__*/react$1.css("background-color:transparent;border-color:transparent;position:absolute;right:36px;top:11px;z-index:2;", props.isGranular && `
+    right: 41px;
+  `, ";" + ("" ), "" );
+const getSearchButtonStyles = props => /*#__PURE__*/react$1.css("background-color:transparent;border-color:transparent;position:absolute;right:36px;top:11px;z-index:2;", props.isGranular && `
+    right: 15px;
+  `, " ", !props.disabled && `
+    cursor: pointer;
+  `, ";" + ("" ), "" );
+
 function _callSuper$6(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$6() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$6() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$6 = function () { return !!t; })(); }
-var styles$i = {
-  "block": "search-input-module__block___1uM-y",
-  "container": "search-input-module__container___9u6if",
-  "input-container": "search-input-module__input-container___mJnyZ",
-  "input-container-disabled": "search-input-module__input-container-disabled___23jR8",
-  "input-container-hoverable": "search-input-module__input-container-hoverable___1xjqn",
-  "input-container-granular": "search-input-module__input-container-granular___33Pm- search-input-module__input-container___mJnyZ",
-  "search-icon-container": "search-input-module__search-icon-container___cbHQY",
-  "clear-icon-container": "search-input-module__clear-icon-container___3RQvu",
-  "clear-icon-container-granular": "search-input-module__clear-icon-container-granular___1mbin search-input-module__clear-icon-container___3RQvu",
-  "search-icon-container-hoverable": "search-input-module__search-icon-container-hoverable___1kTwJ",
-  "search-icon-container-granular": "search-input-module__search-icon-container-granular___3fAsR",
-  "hidden": "search-input-module__hidden___z07GX",
-  "action": "search-input-module__action___1GqGT"
-};
+var _ref$f = {
+  name: "kbieq5",
+  styles: "position:relative;flex-grow:1"
+} ;
+var _ref2$1 = {
+  name: "n2lgmn",
+  styles: "display:inline-flex;flex-direction:row;align-items:flex-start;width:100%;max-width:800px"
+} ;
 let SearchInput = /*#__PURE__*/function (_Component) {
   function SearchInput() {
     var _this;
@@ -1459,15 +1464,13 @@ let SearchInput = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       return jsxRuntime.jsx("div", {
-        className: classnames__default["default"](this.props.blockClassName, styles$i.block),
+        className: classnames__default["default"](this.props.blockClassName),
+        css: _ref2$1,
         children: jsxRuntime.jsxs("div", {
-          className: classnames__default["default"](this.props.containerClassName, styles$i.container),
+          className: classnames__default["default"](this.props.containerClassName),
+          css: _ref$f,
           children: [jsxRuntime.jsx("div", {
-            className: classnames__default["default"](styles$i['input-container'], {
-              [styles$i['input-container-hoverable']]: !this.props.disabled,
-              [styles$i['input-container-disabled']]: this.props.disabled && this.props.enableDisabledStyle,
-              [styles$i['input-container-granular']]: this.props.isGranular
-            }),
+            css: getInputContainerStyles(this.props),
             children: jsxRuntime.jsx(ThrottledField$1, {
               style: "primary",
               name: "search-text",
@@ -1484,19 +1487,14 @@ let SearchInput = /*#__PURE__*/function (_Component) {
               isGranular: this.props.isGranular
             })
           }), this.state.text && jsxRuntime.jsx(uiKit.SecondaryIconButton, {
-            className: classnames__default["default"](styles$i['clear-icon-container'], {
-              [styles$i['clear-icon-container-granular']]: this.props.isGranular
-            }),
+            css: getSecondaryIconButtonStyles(this.props),
             icon: jsxRuntime.jsx(uiKit.CloseIcon, {}),
             size: "30",
             label: "clear-button",
             onClick: this.handleClear
           }), jsxRuntime.jsx("div", {
             "data-testid": "search-button",
-            className: classnames__default["default"](styles$i['search-icon-container'], {
-              [styles$i['search-icon-container-hoverable']]: !this.props.disabled,
-              [styles$i['search-icon-container-granular']]: this.props.isGranular
-            }),
+            css: getSearchButtonStyles(this.props),
             onClick: this.props.disabled ? null : this.handleSubmit,
             label: "search-button",
             onMouseOver: this.props.handleMouseOver,
@@ -5372,10 +5370,6 @@ function getCartDiscountById(apolloClient, options) {
   }).then(response => response.data?.cartDiscount ? transformLocalizedFieldsForCartDiscount(response.data.cartDiscount) : null);
 }
 
-var styles$h = {
-  "container": "reference-search-module__container___3-iK3",
-  "missing-label": "reference-search-module__missing-label___az9AO"
-}; // This is a hashmap of loaded items used to map a value to an item
 const itemCache = new _Map__default["default"]();
 
 // Keep track of "mounted" state to safe-guard updating React state
@@ -5391,10 +5385,10 @@ const useMountedState = () => {
   }, []);
   return isMounted;
 };
-const useReferenceSearchItems = _ref => {
-  let ids = _ref.ids,
-    loadItemsBySearchTerm = _ref.loadItemsBySearchTerm,
-    loadItemsByIds = _ref.loadItemsByIds;
+const useReferenceSearchItems = _ref2 => {
+  let ids = _ref2.ids,
+    loadItemsBySearchTerm = _ref2.loadItemsBySearchTerm,
+    loadItemsByIds = _ref2.loadItemsByIds;
   const isMounted = useMountedState();
   const _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -5453,11 +5447,15 @@ const useReferenceSearchItems = _ref => {
     items
   };
 };
+var _ref$e = {
+  name: "befiq5",
+  styles: "width:100%;>div{width:100%;}"
+} ;
 function ReferenceSearch(props) {
   const ids = React.useMemo(() => {
     var _context, _context2;
-    return props.value ? props.isMulti ? ((_context = props.value) == null ? void 0 : _bindInstanceProperty__default["default"](_context2 = Function.call).call(_context2, _mapInstanceProperty__default["default"](_context), _context))?.(_ref2 => {
-      let id = _ref2.id;
+    return props.value ? props.isMulti ? ((_context = props.value) == null ? void 0 : _bindInstanceProperty__default["default"](_context2 = Function.call).call(_context2, _mapInstanceProperty__default["default"](_context), _context))?.(_ref3 => {
+      let id = _ref3.id;
       return id;
     }) : [props.value?.id] : [];
   }, [props.value, props.isMulti]);
@@ -5481,10 +5479,11 @@ function ReferenceSearch(props) {
     const option = props.isMulti ? _mapInstanceProperty__default["default"](_context3 = event.target.value).call(_context3, item => item.value) : event.target.value?.value || null;
     props.onChange(option);
   };
+  const containerStyles = _ref$e;
   return jsxRuntime.jsxs("div", {
-    className: styles$h.container,
+    css: containerStyles,
     children: [areSomeItemsMissing && jsxRuntime.jsx("div", {
-      className: styles$h['missing-label'],
+      css: /*#__PURE__*/react$1.css("color:", uiKit.designTokens.colorWarning, ";font-size:0.9rem;margin-left:", uiKit.designTokens.spacingXs, ";" + ("" ), "" ),
       children: props.referenceIsMissingLabel
     }), jsxRuntime.jsx(CustomFieldTooltip$1, {
       title: tooltipTitle,
@@ -5804,34 +5803,20 @@ function useCachedCategoryOptions(ids) {
   }]));
 }
 
+var _ref$d = {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} ;
+var _ref2 = {
+  name: "164dmm0",
+  styles: "pointer-events:none;opacity:0.5"
+} ;
+const getButtonStyles = props => /*#__PURE__*/react$1.css("transition:background-color 0.08s linear;border:none;border-radius:", designSystem.designTokens.borderRadiusForInput, ";color:", designSystem.designTokens.colorSolid, ";cursor:pointer;display:inline-block;font-family:", designSystem.designTokens.fontFamily, ";font-size:", designSystem.designTokens.fontSize10, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";vertical-align:middle;min-height:", designSystem.designTokens.heightForInput, ";", props.variant === 'cancel' && /*#__PURE__*/react$1.css("background:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorNeutral, ";&:hover{border-color:", designSystem.designTokens.colorPrimary, ";color:", designSystem.designTokens.colorPrimary, ";}" + ("" ), "" ), " ", props.variant === 'confirm' && /*#__PURE__*/react$1.css("background:", designSystem.designTokens.colorPrimary, ";color:", designSystem.designTokens.colorSurface, ";&:hover{background:", designSystem.designTokens.colorPrimary25, ";}" + ("" ), "" ), " ", props.variant === 'save' && /*#__PURE__*/react$1.css("background:", designSystem.designTokens.colorPrimary, ";color:", designSystem.designTokens.colorSurface, "!important;&:hover{background:", designSystem.designTokens.colorPrimary25, ";}" + ("" ), "" ), " ", props.variant === 'add' && /*#__PURE__*/react$1.css("background:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorNeutral, ";color:", designSystem.designTokens.colorSolid, ";padding:5.5px 15px 5.5px 10px;&:hover{background:", designSystem.designTokens.colorPrimary, ";border-color:", designSystem.designTokens.colorPrimary, ";color:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" ), " ", props.isDisabled && _ref2, " ", props.fullWidth && _ref$d, " ", props.isAlt && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorSurface, ";border-radius:20px;border:2px ", designSystem.designTokens.colorSurface, " solid;padding-left:30px;padding-right:30px;" + ("" ), "" ), ";" + ("" ), "" );
+var getButtonStyles$1 = getButtonStyles;
+
 const _excluded$e = ["type"];
 function ownKeys$$(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$$(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$$(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$$(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var styles$g = {
-  "button": "button-module__button___1OzVf",
-  "cancel": "button-module__cancel___1-jYL button-module__button___1OzVf",
-  "confirm": "button-module__confirm___-W92x button-module__button___1OzVf",
-  "save": "button-module__save___1-KXp button-module__confirm___-W92x button-module__button___1OzVf",
-  "add": "button-module__add___1fbPS button-module__button___1OzVf",
-  "add-url": "button-module__add-url___1e6xE button-module__add___1fbPS button-module__button___1OzVf",
-  "icon-add": "button-module__icon-add___2X7fc",
-  "icon-chain": "button-module__icon-chain___1pvWT",
-  "switch": "button-module__switch___2bt5z",
-  "icon": "button-module__icon___wuw4Z",
-  "switch--active": "button-module__switch--active___1s4ZM button-module__switch___2bt5z",
-  "switch-squared": "button-module__switch-squared___QnrOG button-module__button___1OzVf button-module__switch___2bt5z",
-  "switch-squared--active": "button-module__switch-squared--active___2ZbEC button-module__switch-squared___QnrOG button-module__button___1OzVf button-module__switch___2bt5z button-module__switch--active___1s4ZM button-module__switch___2bt5z",
-  "switch-rounded": "button-module__switch-rounded___1CBs_ button-module__switch___2bt5z",
-  "switch-rounded--active": "button-module__switch-rounded--active___2Ckga button-module__switch-rounded___1CBs_ button-module__switch___2bt5z button-module__switch--active___1s4ZM button-module__switch___2bt5z",
-  "switch-label": "button-module__switch-label___2FAdy",
-  "disabled": "button-module__disabled___2Azpu",
-  "full": "button-module__full___264Zw",
-  "alt": "button-module__alt___Z6PWx",
-  "confirm-alt": "button-module__confirm-alt___2Zcqz button-module__confirm___-W92x button-module__button___1OzVf button-module__alt___Z6PWx",
-  "cancel-alt": "button-module__cancel-alt___u5EAw button-module__cancel___1-jYL button-module__button___1OzVf button-module__alt___Z6PWx",
-  "save-alt": "button-module__save-alt___6iHMF button-module__save___1-KXp button-module__confirm___-W92x button-module__button___1OzVf button-module__alt___Z6PWx",
-  "add-button": "button-module__add-button___1f093"
-};
 const Button = _ref => {
   let _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
@@ -5846,7 +5831,8 @@ const Button = _ref => {
   return jsxRuntime.jsx("button", _objectSpread$$(_objectSpread$$({
     onClick: isDisabled ? null : onClick,
     type: type,
-    className: classnames__default["default"](styles$g.button, isDisabled ? styles$g.disabled : null, className),
+    className: classnames__default["default"](className),
+    css: getButtonStyles$1(props),
     disabled: isDisabled,
     "aria-label": props['aria-label']
   }, dataProps), {}, {
@@ -5856,6 +5842,8 @@ const Button = _ref => {
 Button.displayName = 'Button';
 var Button$1 = Button;
 
+const getFileInputStyles = () => /*#__PURE__*/react$1.css("display:inline-flex;background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorNeutral, ";box-shadow:none;border-radius:", designSystem.designTokens.borderRadius4, ";color:", designSystem.designTokens.colorSolid, ";height:", designSystem.designTokens.heightForButtonAsBig, ";font-size:", designSystem.designTokens.fontSize20, ";font-weight:", designSystem.designTokens.fontWeight500, ";align-items:center;transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ";padding:0 ", designSystem.designTokens.spacingM, ";&:hover,&:focus{cursor:pointer;background-color:", designSystem.designTokens.backgroundColorForButtonWhenHovered, ";box-shadow:none;}&:active{box-shadow:", designSystem.designTokens.shadow9, ";background-color:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" );
+
 var messages$F = reactIntl.defineMessages({
   chooseFile: {
     id: 'ButtonFileInput.chooseFile',
@@ -5867,23 +5855,23 @@ var messages$F = reactIntl.defineMessages({
 const _excluded$d = ["children", "allowMultiple", "acceptTypes"];
 function ownKeys$_(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$_(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$_(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$_(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var styles$f = {
-  "button": "file-input-module__button___2KypN",
-  "input": "file-input-module__input___3MP4D"
-};
-const FileInput = _ref => {
-  let _ref$children = _ref.children,
-    children = _ref$children === void 0 ? jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$_({}, messages$F.chooseFile)) : _ref$children,
-    _ref$allowMultiple = _ref.allowMultiple,
-    allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
-    _ref$acceptTypes = _ref.acceptTypes,
-    acceptTypes = _ref$acceptTypes === void 0 ? 'image/png,image/jpeg,image/gif' : _ref$acceptTypes,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+var _ref$c = {
+  name: "1wq0eh7",
+  styles: "visibility:hidden;width:1px;height:1px"
+} ;
+const FileInput = _ref2 => {
+  let _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$_({}, messages$F.chooseFile)) : _ref2$children,
+    _ref2$allowMultiple = _ref2.allowMultiple,
+    allowMultiple = _ref2$allowMultiple === void 0 ? false : _ref2$allowMultiple,
+    _ref2$acceptTypes = _ref2.acceptTypes,
+    acceptTypes = _ref2$acceptTypes === void 0 ? 'image/png,image/jpeg,image/gif' : _ref2$acceptTypes,
+    props = _objectWithoutProperties(_ref2, _excluded$d);
   return jsxRuntime.jsx("label", {
     children: jsxRuntime.jsxs("span", {
-      className: styles$f.button,
+      css: getFileInputStyles(),
       children: [jsxRuntime.jsx("input", {
-        className: styles$f.input,
+        css: _ref$c,
         type: "file",
         accept: acceptTypes,
         name: props.name,
@@ -5945,7 +5933,11 @@ const PAGINATION_CONTROL_HEIGHT = 26;
 const IMAGE_AREA_HEIGHT = 200;
 const BaseCarousel = _ref2 => {
   let items = _ref2.items,
-    renderItem = _ref2.renderItem;
+    renderItem = _ref2.renderItem,
+    _ref2$fullWidth = _ref2.fullWidth,
+    fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
+    _ref2$borderless = _ref2.borderless,
+    borderless = _ref2$borderless === void 0 ? false : _ref2$borderless;
   // Randomize input array and cache across rerenders
   const _useState = React.useState(shuffle__default["default"](items)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -5981,6 +5973,7 @@ const BaseCarousel = _ref2 => {
     }
   };
   const getLinkTo = activeItem => {
+    if (!activeItem?.linkTo) return undefined;
     return activeItem.isExternal ? activeItem.linkTo() : activeItem.linkTo(projectKey);
   };
 
@@ -5992,17 +5985,18 @@ const BaseCarousel = _ref2 => {
     return null;
   }
   return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react$1.css("width:", CAROUSEL_WIDTH, "px;position:relative;" + ("" ), "" ),
+    css: /*#__PURE__*/react$1.css("width:", fullWidth ? '100%' : `${CAROUSEL_WIDTH}px`, ";position:relative;" + ("" ), "" ),
     role: "region",
     "aria-roledescription": "carousel",
     "aria-label": "rotunda",
     children: [jsxRuntime.jsx("a", {
-      href: getLinkTo(currentItem),
+      href: currentItem.linkTo && currentItem.isExternal ? getLinkTo(currentItem) : undefined,
       target: currentItem.isExternal ? '_blank' : '_self',
       rel: "noopener noreferrer",
       children: jsxRuntime.jsx(uiKit.Card, {
-        insetScale: "none",
+        insetScale: 'none',
         onClick: () => {},
+        type: borderless ? 'flat' : undefined,
         children: jsxRuntime.jsx("div", {
           css: /*#__PURE__*/react$1.css("position:relative;display:flex;scroll-snap-type:x mandatory;overflow:hidden;margin:0;padding-bottom:", uiKit.designTokens.spacing60, ";" + ("" ), "" ),
           ref: scrollRef,
@@ -6043,14 +6037,15 @@ const BaseCarousel = _ref2 => {
     })]
   });
 };
-var _ref$2 = {
+var _ref$b = {
   name: "97rk2e",
   styles: "width:100%;height:100%;flex-shrink:0;scroll-snap-align:start"
 } ;
 const CarouselContent = _ref3 => {
   let item = _ref3.item,
     handleFilterItemsWhenFlagDisabled = _ref3.handleFilterItemsWhenFlagDisabled,
-    idx = _ref3.idx;
+    idx = _ref3.idx,
+    hasPadding = _ref3.hasPadding;
   const isEnabled = applicationShell.useFeatureToggle(item.flag || '');
   const intl = reactIntl.useIntl();
   React.useEffect(() => {
@@ -6065,22 +6060,19 @@ const CarouselContent = _ref3 => {
     role: "group",
     "aria-roledescription": "slide",
     "aria-label": `slide-${idx + 1}`,
-    css: _ref$2,
+    css: _ref$b,
     children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-      children: [jsxRuntime.jsx("img", {
+      children: [item.imgSrc && item.imgAlt && jsxRuntime.jsx("img", {
         css: /*#__PURE__*/react$1.css("width:100%;height:", IMAGE_AREA_HEIGHT, "px;" + ("" ), "" ),
         src: item.imgSrc,
         alt: intl.formatMessage(item.imgAlt)
       }), jsxRuntime.jsx("div", {
-        css: /*#__PURE__*/react$1.css("padding:0 ", uiKit.designTokens.spacingL, " 0 ", uiKit.designTokens.spacingL, ";" + ("" ), "" ),
+        css: /*#__PURE__*/react$1.css("padding:0 ", hasPadding ? uiKit.designTokens.spacingL : 0, " 0 ", hasPadding ? uiKit.designTokens.spacingL : 0, ";" + ("" ), "" ),
         children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
           scale: "xs",
-          children: [jsxRuntime.jsx("div", {
-            children: jsxRuntime.jsx(uiKit.Stamp, {
-              tone: item.stampTone,
-              isCondensed: true,
-              label: intl.formatMessage(item.stampLabel)
-            })
+          children: [item.stampLabel && item.stampTone && jsxRuntime.jsx(uiKit.Stamp, {
+            tone: item.stampTone,
+            label: intl.formatMessage(item.stampLabel)
           }), jsxRuntime.jsx(uiKit.Text.Body, {
             intlMessage: item.textContent
           })]
@@ -6090,15 +6082,24 @@ const CarouselContent = _ref3 => {
   });
 };
 const Carousel = _ref4 => {
-  let items = _ref4.items;
+  let items = _ref4.items,
+    _ref4$fullWidth = _ref4.fullWidth,
+    fullWidth = _ref4$fullWidth === void 0 ? false : _ref4$fullWidth,
+    _ref4$borderless = _ref4.borderless,
+    borderless = _ref4$borderless === void 0 ? true : _ref4$borderless,
+    _ref4$hasPadding = _ref4.hasPadding,
+    hasPadding = _ref4$hasPadding === void 0 ? true : _ref4$hasPadding;
   return jsxRuntime.jsx(BaseCarousel, {
+    fullWidth: fullWidth,
+    borderless: borderless,
     items: items,
     renderItem: (_ref5, handleFilterItemsWhenFlagDisabled, idx) => {
       let item = _ref5.item;
       return jsxRuntime.jsx(CarouselContent, {
         handleFilterItemsWhenFlagDisabled: handleFilterItemsWhenFlagDisabled,
         item: item,
-        idx: idx
+        idx: idx,
+        hasPadding: hasPadding
       }, item.id);
     }
   });
@@ -6353,25 +6354,21 @@ const CustomerGroupPickerInput = _ref => {
 CustomerGroupPickerInput.displayName = 'CustomerGroupPickerInput';
 var CustomerGroupPickerInput$1 = CustomerGroupPickerInput;
 
-var styles$e = {
-  "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 _ref$isDashed = _ref.isDashed,
     isDashed = _ref$isDashed === void 0 ? false : _ref$isDashed,
     _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation;
+  const dividerStyles = /*#__PURE__*/react$1.css("box-sizing:border-box;margin:0;border:0;border-color:var(--color-neutral-90);border-style:", isDashed ? 'dashed' : 'solid', ";", orientation === 'horizontal' ? `
+      width: 100%;
+      border-top-width: 1px;
+    ` : `
+      width: 1px;
+      height: 2vmax; 
+      border-left-width: 1px;
+    `, ";" + ("" ), "" );
   return jsxRuntime.jsx("hr", {
-    className: classnames__default["default"]({
-      [styles$e['divider-solid']]: !isDashed,
-      [styles$e['divider-dashed']]: isDashed,
-      [styles$e['divider-horizontal']]: orientation === 'horizontal',
-      [styles$e['divider-vertical']]: orientation === 'vertical'
-    })
+    css: dividerStyles
   });
 }
 Divider.displayName = 'Divider';
@@ -6553,11 +6550,10 @@ const ExpandButton = props => props.totalValues > 1 ? jsxRuntime.jsxs(uiKit.Spac
 ExpandButton.displayName = 'ExpandButton';
 var ExpandButton$1 = ExpandButton;
 
-var styles$d = {
-  "topAlign": "set-buttons-module__topAlign___3AZwc",
-  "gap": "set-buttons-module__gap___38Qr0"
-}; // TODO(pa3): alignment of buttons made in a kinda ugly way (i.e. gap class).
-// have to find a better way to do it.
+var _ref$a = {
+  name: "1yjx7km",
+  styles: "padding:20px"
+} ;
 const SetButtons = props => {
   return jsxRuntime.jsx("div", {
     children: jsxRuntime.jsxs(uiKit.Spacings.Inline, {
@@ -6574,7 +6570,7 @@ const SetButtons = props => {
         size: "big",
         icon: jsxRuntime.jsx(uiKit.PlusBoldIcon, {})
       }) : jsxRuntime.jsx("div", {
-        className: styles$d.gap
+        css: _ref$a
       })]
     })
   });
@@ -6946,9 +6942,6 @@ CustomLocalizedTextInput.displayName = 'CustomLocalizedTextInput';
 
 function ownKeys$S(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$S(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$S(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$S(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var styles$c = {
-  "container": "custom-money-input-module__container___1fdO2"
-};
 const fixCurrencyCode = (value, currencies) => {
   if (value.currencyCode) return value;
   const firstCurrency = currencies[0];
@@ -6979,6 +6972,10 @@ const fixEnteredValue = (newValue, initialValue, currencies) => {
   }
   return withFixedCurrency;
 };
+var _ref$9 = {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} ;
 function CustomMoneyInput(props) {
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
       currencies: applicationContext.project.currencies,
@@ -7011,7 +7008,7 @@ function CustomMoneyInput(props) {
 
   // TODO(pa3): fix setting proper id in UIKit
   return jsxRuntime.jsxs("div", {
-    className: styles$c.container,
+    css: _ref$9,
     "aria-labelledby": props.name,
     children: [jsxRuntime.jsx(uiKit.AccessibleHidden, {
       children: jsxRuntime.jsx("label", {
@@ -7948,7 +7945,7 @@ function CustomFieldsLabelSubtitle(_ref3) {
   }
 }
 const Portal = props => /*#__PURE__*/ReactDOM__default["default"].createPortal(props.children, document.body);
-var _ref$1 = {
+var _ref$8 = {
   name: "ar8y70",
   styles: "cursor:pointer;line-height:normal"
 } ;
@@ -7967,7 +7964,7 @@ function CustomFieldsCountIndicator(_ref4) {
       TooltipWrapperComponent: Portal
     },
     children: jsxRuntime.jsx("div", {
-      css: _ref$1,
+      css: _ref$8,
       children: jsxRuntime.jsx(uiKit.SwitcherIcon, {
         color: "info",
         size: "medium"
@@ -8090,7 +8087,7 @@ DragHandle.displayName = 'DragHandle';
 
 function ownKeys$M(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$M(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$M(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$M(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var _ref = {
+var _ref$7 = {
   name: "1onfs6j",
   styles: "z-index:100000!important"
 } ;
@@ -8122,7 +8119,7 @@ const DraggableWrapper = _ref2 => {
       const child = jsxRuntime.jsx("div", _objectSpread$M(_objectSpread$M({
         ref: provided.innerRef
       }, provided.draggableProps), {}, {
-        css: _ref,
+        css: _ref$7,
         children: jsxRuntime.jsx(DraggingCard, {
           isDragging: snapshot.isDragging,
           children: jsxRuntime.jsxs(uiKit.Grid, {
@@ -9123,17 +9120,10 @@ const RecurrentIntervalPicker = _ref => {
 var RecurrentIntervalPicker$1 = RecurrentIntervalPicker;
 
 // NOTE: this component is duplicated in `app-shell/from-core`.
-var styles$b = {
-  "colored": "required-indicator-module__colored____YUFm",
-  "indicatorAsterisk": "required-indicator-module__indicatorAsterisk___3lEdX"
-};
 const RequiredIndicator = _ref => {
   let uncolored = _ref.uncolored;
   return jsxRuntime.jsx("em", {
-    className: classnames__default["default"]({
-      [styles$b.colored]: !uncolored,
-      [styles$b.indicatorAsterisk]: true
-    }),
+    css: /*#__PURE__*/react$1.css("color:", uncolored ? uiKit.designTokens.colorNeutral90 : uiKit.designTokens.colorWarning, ";font-style:normal;margin-left:2px;" + ("" ), "" ),
     children: '*'
   });
 };
@@ -9192,10 +9182,6 @@ var messages$v = reactIntl.defineMessages({
   }
 });
 
-var styles$a = {
-  "container": "selectable-field-search-input-module__container___z2ltR",
-  "search-mode-menu": "selectable-field-search-input-module__search-mode-menu___Od6Le"
-};
 const SelectableFieldSearchInput = props => {
   const _useState = React.useState(props.initialValue ?? ''),
     _useState2 = _slicedToArray(_useState, 2),
@@ -9203,7 +9189,13 @@ const SelectableFieldSearchInput = props => {
     setSearchText = _useState2[1];
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
-    className: styles$a.container,
+    css: `
+        width: 100%;
+        position: relative;
+        display: flex;
+        z-index: 3;
+        max-width: ${uiKit.designTokens.constraint15};
+      `,
     children: jsxRuntime.jsx(uiKit.SelectableSearchInput, {
       menuHorizontalConstraint: 5,
       options: props.options,
@@ -9596,21 +9588,17 @@ var useStoresByFieldFetcher$1 = useStoresByFieldFetcher;
 const _excluded$4 = ["shouldFetchProductSelections"];
 function ownKeys$C(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$C(e) { for (var r = 1; r < arguments.length; r++) { var _context9, _context0; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context9 = ownKeys$C(Object(t), !0)).call(_context9, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context0 = ownKeys$C(Object(t))).call(_context0, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var FetchStoresByWherePredicate = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchStoresByWherePredicate" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "skipFetchingStores" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "excludeProductSelections" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "storesByWherePredicate" }, name: { kind: "Name", value: "stores" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "skipFetchingStores" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "productSelections" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "excludeProductSelections" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "active" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "productSelection" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }] } }] } }] } }], loc: { start: 0, end: 525, source: { body: "query FetchStoresByWherePredicate(\n  $where: String!\n  $skipFetchingStores: Boolean!\n  $excludeProductSelections: Boolean!\n) {\n  storesByWherePredicate: stores(where: $where) @skip(if: $skipFetchingStores) {\n    results {\n      id\n      key\n      nameAllLocales {\n        locale\n        value\n      }\n      productSelections @skip(if: $excludeProductSelections) {\n        active\n        productSelection {\n          id\n          nameAllLocales {\n            locale\n            value\n          }\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
-var styles$9 = {
-  "renderLabelContainer": "stores-search-selector-module__renderLabelContainer___3_PBc",
-  "customLabel": "stores-search-selector-module__customLabel___1Xse8"
-}; // check wether there are any errors
+var FetchStoresByWherePredicate = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchStoresByWherePredicate" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "skipFetchingStores" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "excludeProductSelections" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "storesByWherePredicate" }, name: { kind: "Name", value: "stores" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "skipFetchingStores" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "productSelections" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "excludeProductSelections" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "active" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "productSelection" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }] } }] } }] } }], loc: { start: 0, end: 525, source: { body: "query FetchStoresByWherePredicate(\n  $where: String!\n  $skipFetchingStores: Boolean!\n  $excludeProductSelections: Boolean!\n) {\n  storesByWherePredicate: stores(where: $where) @skip(if: $skipFetchingStores) {\n    results {\n      id\n      key\n      nameAllLocales {\n        locale\n        value\n      }\n      productSelections @skip(if: $excludeProductSelections) {\n        active\n        productSelection {\n          id\n          nameAllLocales {\n            locale\n            value\n          }\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } }; // check wether there are any errors
 const hasErrors = errors => {
   var _context;
   return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
 };
-const createQueryVariables$1 = _ref => {
+const createQueryVariables$1 = _ref2 => {
   var _context2;
-  let searchText = _ref.searchText,
-    dataLocale = _ref.dataLocale,
-    allAccessibleStoreKeysThroughDataFencePermissions = _ref.allAccessibleStoreKeysThroughDataFencePermissions,
-    shouldFetchProductSelections = _ref.shouldFetchProductSelections;
+  let searchText = _ref2.searchText,
+    dataLocale = _ref2.dataLocale,
+    allAccessibleStoreKeysThroughDataFencePermissions = _ref2.allAccessibleStoreKeysThroughDataFencePermissions,
+    shouldFetchProductSelections = _ref2.shouldFetchProductSelections;
   const sanitizedSearchText = sanitize(_trimInstanceProperty__default["default"](searchText).call(searchText, searchText));
   const keyQuery = `key = "${sanitizedSearchText}"`;
 
@@ -9640,14 +9628,14 @@ const createQueryVariables$1 = _ref => {
     excludeProductSelections: !shouldFetchProductSelections
   };
 };
-const getValueFromOptions = _ref2 => {
+const getValueFromOptions = _ref3 => {
   var _context3, _context4, _context5;
-  let isMulti = _ref2.isMulti,
-    value = _ref2.value,
-    dataLocale = _ref2.dataLocale,
-    languages = _ref2.languages,
-    storesByFieldFetcher = _ref2.storesByFieldFetcher,
-    renderSelectInputOptionValuesByField = _ref2.renderSelectInputOptionValuesByField;
+  let isMulti = _ref3.isMulti,
+    value = _ref3.value,
+    dataLocale = _ref3.dataLocale,
+    languages = _ref3.languages,
+    storesByFieldFetcher = _ref3.storesByFieldFetcher,
+    renderSelectInputOptionValuesByField = _ref3.renderSelectInputOptionValuesByField;
   if (!value) {
     return undefined;
   }
@@ -9665,10 +9653,14 @@ const getValueFromOptions = _ref2 => {
     return selectedOptions[0];
   }
 };
-const StoresSearchSelectInput = _ref3 => {
-  let _ref3$shouldFetchProd = _ref3.shouldFetchProductSelections,
-    shouldFetchProductSelections = _ref3$shouldFetchProd === void 0 ? false : _ref3$shouldFetchProd,
-    props = _objectWithoutProperties(_ref3, _excluded$4);
+var _ref$6 = {
+  name: "axl87t",
+  styles: "display:flex;flex-direction:column;justify-content:space-between;&>div:nth-of-type(2){margin-top:25px;}&>div:nth-of-type(1){margin-top:-4px;}"
+} ;
+const StoresSearchSelectInput = _ref4 => {
+  let _ref4$shouldFetchProd = _ref4.shouldFetchProductSelections,
+    shouldFetchProductSelections = _ref4$shouldFetchProd === void 0 ? false : _ref4$shouldFetchProd,
+    props = _objectWithoutProperties(_ref4, _excluded$4);
   // hooks
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
       dataLocale: applicationContext.dataLocale,
@@ -9694,9 +9686,9 @@ const StoresSearchSelectInput = _ref3 => {
         projectKey: props.projectKey
       },
       fetchPolicy: 'network-only'
-    }).then(_ref4 => {
+    }).then(_ref5 => {
       var _context6, _context7, _context8;
-      let data = _ref4.data;
+      let data = _ref5.data;
       const result = ((_context6 = data.storesByWherePredicate) == null ? void 0 : _bindInstanceProperty__default["default"](_context8 = Function.call).call(_context8, _mapInstanceProperty__default["default"](_context7 = _context6.results), _context7))?.(store => mapStoresToOptions({
         store,
         dataLocale,
@@ -9713,12 +9705,14 @@ const StoresSearchSelectInput = _ref3 => {
     return extractMatchedStores;
   };
   const loadOptionsDebounced = debounce__default["default"](handleLoadOptions, 500);
-  const renderNoOptions = _ref5 => {
-    let inputValue = _ref5.inputValue;
+  const renderLabelContainerStyles = _ref$6;
+  const customLabelStyles = /*#__PURE__*/react$1.css("&>div{border-bottom:1px solid ", uiKit.designTokens.colorNeutral90, "!important;padding-bottom:4px;}" + ("" ), "" );
+  const renderNoOptions = _ref6 => {
+    let inputValue = _ref6.inputValue;
     return jsxRuntime.jsxs("div", {
-      className: styles$9.renderLabelContainer,
+      css: renderLabelContainerStyles,
       children: [jsxRuntime.jsx("div", {
-        className: styles$9.customLabel,
+        css: customLabelStyles,
         children: props?.renderLabel && props?.renderLabel
       }), jsxRuntime.jsx("div", {
         children: intl.formatMessage(inputValue ? messages$u.searchSelectInputNoOptionsFoundMessage : messages$u.searchSelectInputNoValueMessage)
@@ -9776,21 +9770,22 @@ var StoresSearchSelectInput$1 = StoresSearchSelectInput;
 const _excluded$3 = ["lowerStoresLimit", "upperStoresLimit", "renderSelectInputOptionValuesByField", "optionType", "shouldFetchProductSelections"];
 function ownKeys$B(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$B(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$B(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$B(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var styles$8 = {
-  "customOption": "store-select-input-module__customOption___2SC00"
-};
-const StoreSelectInput = _ref => {
-  let _ref$lowerStoresLimit = _ref.lowerStoresLimit,
-    lowerStoresLimit = _ref$lowerStoresLimit === void 0 ? LOWER_STORES_LIMIT : _ref$lowerStoresLimit,
-    _ref$upperStoresLimit = _ref.upperStoresLimit,
-    upperStoresLimit = _ref$upperStoresLimit === void 0 ? UPPER_STORES_LIMIT : _ref$upperStoresLimit,
-    _ref$renderSelectInpu = _ref.renderSelectInputOptionValuesByField,
-    renderSelectInputOptionValuesByField = _ref$renderSelectInpu === void 0 ? 'id' : _ref$renderSelectInpu,
-    _ref$optionType = _ref.optionType,
-    optionType = _ref$optionType === void 0 ? 'double-property' : _ref$optionType,
-    _ref$shouldFetchProdu = _ref.shouldFetchProductSelections,
-    shouldFetchProductSelections = _ref$shouldFetchProdu === void 0 ? false : _ref$shouldFetchProdu,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+var _ref$5 = {
+  name: "1r0yqr6",
+  styles: "margin-top:10px"
+} ;
+const StoreSelectInput = _ref2 => {
+  let _ref2$lowerStoresLimi = _ref2.lowerStoresLimit,
+    lowerStoresLimit = _ref2$lowerStoresLimi === void 0 ? LOWER_STORES_LIMIT : _ref2$lowerStoresLimi,
+    _ref2$upperStoresLimi = _ref2.upperStoresLimit,
+    upperStoresLimit = _ref2$upperStoresLimi === void 0 ? UPPER_STORES_LIMIT : _ref2$upperStoresLimi,
+    _ref2$renderSelectInp = _ref2.renderSelectInputOptionValuesByField,
+    renderSelectInputOptionValuesByField = _ref2$renderSelectInp === void 0 ? 'id' : _ref2$renderSelectInp,
+    _ref2$optionType = _ref2.optionType,
+    optionType = _ref2$optionType === void 0 ? 'double-property' : _ref2$optionType,
+    _ref2$shouldFetchProd = _ref2.shouldFetchProductSelections,
+    shouldFetchProductSelections = _ref2$shouldFetchProd === void 0 ? false : _ref2$shouldFetchProd,
+    props = _objectWithoutProperties(_ref2, _excluded$3);
   const totalNumberOfStoresFetcher = useTotalNumberOfStoresFetcher$1(props.projectKey);
   const components = React.useMemo(() => {
     return {
@@ -9801,7 +9796,7 @@ const StoreSelectInput = _ref => {
         }
         const isSearchSelectInput = totalNumberOfStoresFetcher.total > upperStoresLimit;
         return jsxRuntime.jsx("div", {
-          className: isSearchSelectInput ? styles$8.customOption : '',
+          css: isSearchSelectInput ? _ref$5 : '',
           children: jsxRuntime.jsx(selectUtils.CustomSelectInputOption, {
             optionType: optionType,
             optionInnerProps: optionInnerProps
@@ -9928,11 +9923,6 @@ function ownKeys$z(e, r) { var t = _Object$keys__default["default"](e); if (_Obj
 function _objectSpread$z(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys$z(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys$z(Object(t))).call(_context6, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function _callSuper$5(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$5() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$5() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$5 = function () { return !!t; })(); }
-var styles$7 = {
-  "invalid": "validated-input-module__invalid___380EL",
-  "container": "validated-input-module__container___3L2KB"
-}; // Note: don't use `g`! Regex with global flag have state
-// and subsequent calls may give false results.
 const EMAIL_REGEX = /^[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~](\.?[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*\.?[a-zA-Z0-9])*\.[a-zA-Z](-?[a-zA-Z0-9])+$/i;
 const getIsEvent = event => typeof event === 'object' && !isNil__default["default"](event.target);
 const validateRequired = value => {
@@ -10000,8 +9990,8 @@ commonTags.oneLineTrim`
   \`validatedInput\` is no longer supported.
   Please use \`formik\` instead.
 `;
-const ToolTipWrapperComponent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let children = _ref.children;
+const ToolTipWrapperComponent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let children = _ref2.children;
   return jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
     max: 'scale',
     children: jsxRuntime.jsx("div", {
@@ -10014,15 +10004,19 @@ ToolTipWrapperComponent.displayName = 'ToolTipWrapperComponent';
 ToolTipWrapperComponent.propTypes = {
   children: PropTypes__default["default"].element
 };
+var _ref$4 = {
+  name: "1u4hpl4",
+  styles: "display:inline"
+} ;
 function validatedInput(InnerComponent, validators) {
-  let _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-    containerClassName = _ref2.containerClassName;
-    _ref2.tooltipContainerClassName;
-  let _ref3 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
-    _ref3$changeHandler = _ref3.changeHandler,
-    changeHandler = _ref3$changeHandler === void 0 ? null : _ref3$changeHandler,
-    _ref3$blurHandler = _ref3.blurHandler,
-    blurHandler = _ref3$blurHandler === void 0 ? null : _ref3$blurHandler;
+  let _ref3 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    containerClassName = _ref3.containerClassName;
+    _ref3.tooltipContainerClassName;
+  let _ref4 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+    _ref4$changeHandler = _ref4.changeHandler,
+    changeHandler = _ref4$changeHandler === void 0 ? null : _ref4$changeHandler,
+    _ref4$blurHandler = _ref4.blurHandler,
+    blurHandler = _ref4$blurHandler === void 0 ? null : _ref4$blurHandler;
   let _InnerComponent = InnerComponent;
   if (typeof InnerComponent === 'string') _InnerComponent = simpleInput(InnerComponent);
   const _validators = [];
@@ -10050,9 +10044,9 @@ function validatedInput(InnerComponent, validators) {
         }
       };
       _this.handleChange = function (event) {
-        let _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-          _ref4$triggerUpdate = _ref4.triggerUpdate,
-          triggerUpdate = _ref4$triggerUpdate === void 0 ? true : _ref4$triggerUpdate;
+        let _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          _ref5$triggerUpdate = _ref5.triggerUpdate,
+          triggerUpdate = _ref5$triggerUpdate === void 0 ? true : _ref5$triggerUpdate;
         let value = '';
         const nextValidStatus = {};
         const onChange = changeHandler && _this.props[changeHandler] || _this.props.onChange;
@@ -10130,7 +10124,8 @@ function validatedInput(InnerComponent, validators) {
         });
         const firstFailedValidator = _findInstanceProperty__default["default"](_validators).call(_validators, v => !this.state.validStatus[v.name]);
         return jsxRuntime.jsx("div", {
-          className: classnames__default["default"](styles$7.container, containerClassName),
+          className: classnames__default["default"](containerClassName),
+          css: _ref$4,
           children: jsxRuntime.jsx(uiKit.Tooltip, {
             placement: "top",
             title: firstFailedValidator && this.props.intl.formatMessage(firstFailedValidator.message) || '',
@@ -10171,9 +10166,8 @@ function simpleInput(type) {
       key: "render",
       value: function render() {
         return jsxRuntime.jsx("input", {
-          className: classnames__default["default"](this.props.className, {
-            [styles$7.invalid]: !this.props.isValid
-          }),
+          className: classnames__default["default"](this.props.className),
+          css: /*#__PURE__*/react$1.css(this.props.isValid ? '' : `border-color: ${uiKit.designTokens.colorError}!important;border: 1px solid;`, ";" + ("" ), "" ),
           name: this.props.name,
           disabled: this.props.disabled,
           ref: this.props.getInputRef,
@@ -12042,9 +12036,10 @@ var messages$h = reactIntl.defineMessages({
 
 function ownKeys$e(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$e(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$e(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$e(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var styles$6 = {
-  "status": "platform-limits-customers-status-module__status___3rXYM"
-};
+var _ref$3 = {
+  name: "1670krd",
+  styles: "min-width:max-content"
+} ;
 const PlatformLimitsCustomersStatus = () => {
   const intl = reactIntl.useIntl();
   const _useCustomersPlatform = useCustomersPlatformLimitsFetcher$1(),
@@ -12056,7 +12051,7 @@ const PlatformLimitsCustomersStatus = () => {
     current = _platformLimits$custo.current,
     limit = _platformLimits$custo.limit;
   return jsxRuntime.jsx("div", {
-    className: styles$6.status,
+    css: _ref$3,
     children: jsxRuntime.jsx(uiKit.Text.Detail, {
       tone: "secondary",
       isInline: true,
@@ -12218,16 +12213,13 @@ const PlatformLimitsCustomersErrorModal = _ref => {
 PlatformLimitsCustomersErrorModal.displayName = 'PlatformLimitsCustomersErrorModal';
 var CustomersErrorModal = PlatformLimitsCustomersErrorModal;
 
-var styles$5 = {
-  "combined": "platform-limits-customers-combined-module__combined___OszDd"
-};
 const PlatformLimitsCustomersCombined = () => {
   // on the customer create only show the warning message
   const _useCustomersPlatform = useCustomersPlatformLimitsStatus(),
     hasReachedCustomersErrorLimit = _useCustomersPlatform.hasReachedCustomersErrorLimit,
     hasReachedCustomersWarningLimit = _useCustomersPlatform.hasReachedCustomersWarningLimit;
   return jsxRuntime.jsx("div", {
-    className: styles$5.combined,
+    css: /*#__PURE__*/react$1.css("margin-bottom:", uiKit.designTokens.spacingS, ";" + ("" ), "" ),
     children: jsxRuntime.jsxs(uiKit.Spacings.Inline, {
       scale: "xl",
       justifyContent: "space-between",
@@ -12424,9 +12416,10 @@ var messages$e = reactIntl.defineMessages({
 
 function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var styles$4 = {
-  "status": "platform-limits-customer-groups-status-module__status___6099G"
-};
+var _ref$2 = {
+  name: "1670krd",
+  styles: "min-width:max-content"
+} ;
 const PlatformLimitsCustomerGroupsStatus = () => {
   const intl = reactIntl.useIntl();
   const _useCustomerGroupsPla = useCustomerGroupsPlatformLimitsFetcher$1(),
@@ -12438,7 +12431,7 @@ const PlatformLimitsCustomerGroupsStatus = () => {
     current = _platformLimits$custo.current,
     limit = _platformLimits$custo.limit;
   return jsxRuntime.jsx("div", {
-    className: styles$4.status,
+    css: _ref$2,
     children: jsxRuntime.jsx(uiKit.Text.Detail, {
       tone: "secondary",
       isInline: true,
@@ -12600,16 +12593,13 @@ const PlatformLimitsCustomerGroupsErrorModal = _ref => {
 PlatformLimitsCustomerGroupsErrorModal.displayName = 'PlatformLimitsCustomerGroupsErrorModal';
 var CustomerGroupsErrorModal = PlatformLimitsCustomerGroupsErrorModal;
 
-var styles$3 = {
-  "combined": "platform-limits-customer-groups-combined-module__combined___WjRoI"
-};
 const PlatformLimitsCustomerGroupsCombined = () => {
   // on the customer create only show the warning message
   const _useCustomerGroupsPla = useCustomerGroupsPlatformLimitsStatus$1(),
     hasReachedCustomerGroupsErrorLimit = _useCustomerGroupsPla.hasReachedCustomerGroupsErrorLimit,
     hasReachedCustomerGroupsWarningLimit = _useCustomerGroupsPla.hasReachedCustomerGroupsWarningLimit;
   return jsxRuntime.jsx("div", {
-    className: styles$3.combined,
+    css: /*#__PURE__*/react$1.css("margin-bottom:", uiKit.designTokens.spacingS, ";" + ("" ), "" ),
     children: jsxRuntime.jsxs(uiKit.Spacings.Inline, {
       scale: "xl",
       justifyContent: "space-between",
@@ -12804,13 +12794,14 @@ var messages$b = messages$a;
 
 function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var styles$2 = {
-  "label": "label-range-module__label___3Tb0p"
-};
-const LabelRange = _ref => {
-  let type = _ref.type;
+var _ref$1 = {
+  name: "1rk22b8",
+  styles: "font-size:0.9rem;font-weight:bold"
+} ;
+const LabelRange = _ref2 => {
+  let type = _ref2.type;
   return jsxRuntime.jsx("label", {
-    className: styles$2.label,
+    css: _ref$1,
     children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$b[type]))
   });
 };
@@ -12856,27 +12847,15 @@ var messages$8 = reactIntl.defineMessages({
 
 function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$5(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var styles$1 = {
-  "container": "multi-value-search-input-module__container___2u64d",
-  "searchInput": "multi-value-search-input-module__searchInput___363nj",
-  "submittingTip": "multi-value-search-input-module__submittingTip___2339U",
-  "submitting-tip-single": "multi-value-search-input-module__submitting-tip-single___1LcNy",
-  "submitting-tip-content": "multi-value-search-input-module__submitting-tip-content___IyuVb",
-  "submitting-tip-content-separate": "multi-value-search-input-module__submitting-tip-content-separate___3Y_CI multi-value-search-input-module__submitting-tip-content___IyuVb",
-  "submitting-tip-content-hoverable": "multi-value-search-input-module__submitting-tip-content-hoverable___2TK6S",
-  "submitting-tip-content-separate-hoverable": "multi-value-search-input-module__submitting-tip-content-separate-hoverable___3VUnV"
-};
 const IS_MULTI_VALUE_FLAG = '?isMulti=true';
 const MultiValueSelectorDropdown = props => {
   if (!props.isOpen) return null;
   if (props.multiValue.length > 0) {
     return jsxRuntime.jsxs("div", {
-      className: styles$1.submittingTip,
+      css: /*#__PURE__*/react$1.css("margin-top:", uiKit.designTokens.spacingXs, ";background:", uiKit.designTokens.backgroundColorForInput, ";border:solid 1px ", uiKit.designTokens.borderColorForInputWhenFocused, ";border-radius:", uiKit.designTokens.borderRadiusForInput, ";position:relative;cursor:default;" + ("" ), "" ),
       children: [jsxRuntime.jsx("div", {
         onClick: props.handleSingleValueSubmit,
-        className: classnames__default["default"](styles$1['submitting-tip-content'], {
-          [styles$1['submitting-tip-content-hoverable']]: true
-        }),
+        css: /*#__PURE__*/react$1.css("padding:", uiKit.designTokens.spacingS, ";&:hover{background-color:", uiKit.designTokens.colorNeutral95, ";border-radius:", uiKit.designTokens.borderRadiusForInput, ";}" + ("" ), "" ),
         children: jsxRuntime.jsx(uiKit.Text.Body, {
           truncate: true,
           intlMessage: _objectSpread$5(_objectSpread$5({}, messages$8.filterWholeInput), {}, {
@@ -12887,9 +12866,7 @@ const MultiValueSelectorDropdown = props => {
         })
       }), jsxRuntime.jsx("div", {
         onClick: props.handleMultiValueSubmit,
-        className: classnames__default["default"](styles$1['submitting-tip-content-separate'], {
-          [styles$1['submitting-tip-content-separate-hoverable']]: true
-        }),
+        css: /*#__PURE__*/react$1.css("padding:", uiKit.designTokens.spacingS, ";&:hover{background-color:", uiKit.designTokens.colorNeutral95, ";border-bottom-left-radius:", uiKit.designTokens.borderRadiusForInput, ";border-bottom-right-radius:", uiKit.designTokens.borderRadiusForInput, ";}" + ("" ), "" ),
         children: jsxRuntime.jsx(uiKit.Text.Body, {
           truncate: true,
           intlMessage: _objectSpread$5(_objectSpread$5({}, messages$8.filterSeparateValues), {}, {
@@ -12902,14 +12879,18 @@ const MultiValueSelectorDropdown = props => {
     });
   }
   return jsxRuntime.jsx("div", {
-    className: styles$1.submittingTip,
+    css: /*#__PURE__*/react$1.css("margin-top:", uiKit.designTokens.spacingXs, ";background:", uiKit.designTokens.backgroundColorForInput, ";border:solid 1px ", uiKit.designTokens.borderColorForInputWhenFocused, ";border-radius:", uiKit.designTokens.borderRadiusForInput, ";position:relative;cursor:default;" + ("" ), "" ),
     children: jsxRuntime.jsx("div", {
-      className: styles$1['submitting-tip-single'],
+      css: /*#__PURE__*/react$1.css("padding:", uiKit.designTokens.spacingS, ";color:", uiKit.designTokens.fontColorForInputWhenDisabled, ";" + ("" ), "" ),
       children: props.tooltip
     })
   });
 };
 MultiValueSelectorDropdown.displayName = 'MultiValueSelectorDropdown';
+var _ref = {
+  name: "bjn8wh",
+  styles: "position:relative"
+} ;
 const MultiValueSearchInput = props => {
   const _useState = React.useState(''),
     _useState2 = _slicedToArray(_useState, 2),
@@ -12980,7 +12961,7 @@ const MultiValueSearchInput = props => {
     clearRunningTooltipTimer();
   });
   return jsxRuntime.jsxs("div", {
-    className: styles$1.container,
+    css: _ref,
     children: [jsxRuntime.jsx(uiKit.Spacings.Stack, {
       size: "s",
       children: jsxRuntime.jsx(uiKit.SearchTextInput, {
@@ -13008,10 +12989,6 @@ function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Obj
 function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
-var styles = {
-  "invalid": "numeric-format-input-module__invalid___3LcyE",
-  "disabled": "numeric-format-input-module__disabled___hb6h4"
-};
 Cleave__default["default"].displayName = 'Cleave';
 
 // only allow values of type Number or values that are nil (null or undefined)
@@ -13086,10 +13063,8 @@ let NumericFormatInput = /*#__PURE__*/function (_PureComponent) {
           numeralIntegerScale: 0
         },
         name: this.props.name,
-        className: classnames__default["default"](this.props.className, {
-          [styles.invalid]: !this.props.isValid,
-          [styles.disabled]: this.props.disabled
-        }),
+        className: classnames__default["default"](this.props.className),
+        css: /*#__PURE__*/react$1.css(this.props.isValid ? '' : `border-color: ${uiKit.designTokens.colorError}!important;border: 1px solid;`, " ", this.props.disabled ? 'cursor: not-allowed;' : '', ";" + ("" ), "" ),
         onChange: this.handleChange,
         onInit: this.handleInit,
         onBlur: this.handleBlur,