@commercetools-frontend/experimental-components 3.2.1 → 5.0.0

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

@@ -52,7 +52,6 @@ var PropTypes = require('prop-types');
 var applicationComponents = require('@commercetools-frontend/application-components');
 var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
-var applicationShell = require('@commercetools-frontend/application-shell');
 var react = require('@apollo/client/react');
 var _lastIndexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/last-index-of');
 var msw = require('msw');
@@ -60,11 +59,11 @@ var get = require('lodash/get');
 var formik = require('formik');
 var _Date$now = require('@babel/runtime-corejs3/core-js-stable/date/now');
 var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
+var applicationShell = require('@commercetools-frontend/application-shell');
 var debounce = require('debounce-promise');
 var pick = require('lodash/pick');
 var hooks = require('@apollo/client/react/hooks');
 var moment$1 = require('moment');
-var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var classnames = require('classnames');
 require('react-required-if');
 var designSystem = require('@commercetools-uikit/design-system');
@@ -120,8 +119,6 @@ var compact = require('lodash/compact');
 var _Set = require('@babel/runtime-corejs3/core-js-stable/set');
 require('@babel/runtime-corejs3/helpers/get');
 var _spliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/splice');
-var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
-var reactRouterDom = require('react-router-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -163,7 +160,6 @@ var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var pick__default = /*#__PURE__*/_interopDefault(pick);
 var moment__default$1 = /*#__PURE__*/_interopDefault(moment$1);
-var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var Textarea__default = /*#__PURE__*/_interopDefault(Textarea);
 var has__default = /*#__PURE__*/_interopDefault(has);
@@ -202,7 +198,6 @@ var _findIndexInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInde
 var compact__default = /*#__PURE__*/_interopDefault(compact);
 var _Set__default = /*#__PURE__*/_interopDefault(_Set);
 var _spliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_spliceInstanceProperty);
-var _URL__default = /*#__PURE__*/_interopDefault(_URL);
 
 const QUERY_MAX_LIMIT = 500;
 const SHOW_TOOLTIP_CHARS_COUNT = 40;
@@ -214,28 +209,6 @@ const SEARCHABLE_REFERENCES = {
   productType: 'product-type',
   state: 'state'
 };
-const trackingEvents$5 = {
-  showInfoNotification: {
-    category: 'Account-Profile',
-    action: 'showMyProfileUpdateNotification',
-    label: 'Show My Profile Update Notification'
-  },
-  clickOnInfoNotification: {
-    category: 'Account-Profile',
-    action: 'openAccountMyProfilePage',
-    label: 'Open My Profile Page'
-  },
-  clickCloseInfoNotification: {
-    category: 'Account-Profile',
-    action: 'closeInfoNotification',
-    label: 'Close Info Notification'
-  },
-  updateBusinessRoleOnProfilePage: {
-    category: 'Account-Profile',
-    action: 'updateMyProfilePage',
-    label: 'Update My Profile Page'
-  }
-};
 const BUSINESS_ROLE_NOTIFICATION = 'businessRoleNotification';
 
 // The max API limit for one request
@@ -2218,8 +2191,6 @@ const injectStorage = options => WrappedComponent => {
   return WithStorage;
 };
 
-var useTracking = (() => React.useContext(applicationShell.GtmContext));
-
 /**
  * @returns function with the following parameters
  * - {LocalizedStrings} localizedStrings - an array of graphql LocalizedString,
@@ -2276,7 +2247,7 @@ const filterStoresOutdatedDanglingProductSelections = storesQueryResult => {
     })
   };
 };
-const createQueryVariables$8 = ownProps => {
+const createQueryVariables$9 = ownProps => {
   var _context;
   return _objectSpread$1h(_objectSpread$1h({
     limit: ownProps.limit,
@@ -2292,7 +2263,7 @@ const createQueryVariables$8 = ownProps => {
 const useStoresListFetcher = props => {
   const excludeExtendedStoresList = props.excludeExtendedStoresList || false;
   const excludeProductSelections = props.excludeProductSelections || false;
-  const queryVariables = createQueryVariables$8({
+  const queryVariables = createQueryVariables$9({
     limit: props.limit,
     offset: props.offset,
     sort: _sortInstanceProperty__default["default"](props),
@@ -2529,10 +2500,7 @@ var messages$M = reactIntl.defineMessages({
 function ownKeys$1f(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1f(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1f(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1f(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const LinkToProfile = props => {
-  const _useTrackingShared = useTrackingShared(),
-    trackClickOnInfoNotification = _useTrackingShared.trackClickOnInfoNotification;
   return jsxRuntime.jsx(uiKit.Link, {
-    onClick: trackClickOnInfoNotification,
     to: "/account/profile",
     children: props.children
   });
@@ -2570,45 +2538,8 @@ const NotificationText = () => jsxRuntime.jsxs(uiKit.Spacings.Stack, {
 });
 NotificationText.displayName = 'NotificationText';
 
-const forwardHandler = (track, handler) => function () {
-  track();
-  handler(...arguments);
-};
-const defaultProcessTrackingEvent = trackingEvent => trackingEvent;
-const useTrackingHandler = function (trackingEvent) {
-  let processTrackingEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultProcessTrackingEvent;
-  const _useTrackingContext = useTracking(),
-    track = _useTrackingContext.track;
-  return React.useCallback(function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    const _processTrackingEvent = processTrackingEvent(trackingEvent, ...args),
-      action = _processTrackingEvent.action,
-      category = _processTrackingEvent.category,
-      label = _processTrackingEvent.label;
-    track(action, category, label);
-  }, [track, trackingEvent, processTrackingEvent]);
-};
-const useTrackingShared = () => {
-  const trackShowInfoNotification = useTrackingHandler(trackingEvents$5.showInfoNotification);
-  const trackClickOnInfoNotification = useTrackingHandler(trackingEvents$5.clickOnInfoNotification);
-  const trackClickCloseInfoNotification = useTrackingHandler(trackingEvents$5.clickCloseInfoNotification);
-  const trackUpdateBusinessRoleOnProfilePage = useTrackingHandler(trackingEvents$5.updateBusinessRoleOnProfilePage);
-  return {
-    trackShowInfoNotification,
-    trackClickOnInfoNotification,
-    trackClickCloseInfoNotification,
-    trackUpdateBusinessRoleOnProfilePage,
-    forwardHandler
-  };
-};
-
 const useRoleNotification = _ref => {
   let dismissNotification = _ref.onDismiss;
-  const _useTrackingShared = useTrackingShared(),
-    trackClickCloseInfoNotification = _useTrackingShared.trackClickCloseInfoNotification,
-    forwardHandler = _useTrackingShared.forwardHandler;
   const notification = actionsGlobal.useShowNotification({
     domain: constants.DOMAINS.SIDE,
     kind: 'info'
@@ -2619,7 +2550,7 @@ const useRoleNotification = _ref => {
       notification({
         text: jsxRuntime.jsx(NotificationText, {})
       }, {
-        onDismiss: () => forwardHandler(trackClickCloseInfoNotification(), dismissNotification())
+        onDismiss: () => dismissNotification()
       });
     }
   };
@@ -2632,9 +2563,6 @@ const useRoleNotificationEffect = () => {
   const storageKey = 'roleExpiry';
   const userBusinessRole = user.businessRole;
   const scopedStorageKey = [user.id, storageKey].join('/');
-  const _useTrackingShared = useTrackingShared(),
-    trackShowInfoNotification = _useTrackingShared.trackShowInfoNotification,
-    forwardHandler = _useTrackingShared.forwardHandler;
   const _usePersistedReminder = usePersistedReminder({
       storageKey,
       reminderInterval: REMINDER_OPTION_3_DAY
@@ -2647,7 +2575,6 @@ const useRoleNotificationEffect = () => {
     onDismiss: scheduleReminder
   });
   const isFirstTimeUser = !hasChosenReminderRef.current;
-  const openBusinessRoleNotification = () => forwardHandler(trackShowInfoNotification(), roleNotification());
   React.useEffect(() => {
     /*
     If the user does not have a business role,
@@ -2657,11 +2584,11 @@ const useRoleNotificationEffect = () => {
     if (isFlopFlipReady) {
       // 1. first time user
       if (!userBusinessRole && isFirstTimeUser) {
-        openBusinessRoleNotification();
+        roleNotification();
       }
       // 2. returning but not filled business role and has closed notification before
       else if (!userBusinessRole && hasReminderExpired) {
-        openBusinessRoleNotification();
+        roleNotification();
       }
       // 3. has filled business role
       else if (userBusinessRole) {
@@ -2899,8 +2826,8 @@ const convertProductSelectionsFromGraphQl = productSelections => {
   });
 };
 
-var FetchProductSelections = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchProductSelections" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "limit" } }, type: { kind: "NamedType", name: { kind: "Name", value: "Int" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "offset" } }, type: { kind: "NamedType", name: { kind: "Name", value: "Int" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sort" } }, type: { kind: "ListType", type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "productSelections" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "Variable", name: { kind: "Name", value: "limit" } } }, { kind: "Argument", name: { kind: "Name", value: "offset" }, value: { kind: "Variable", name: { kind: "Name", value: "offset" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "Variable", name: { kind: "Name", value: "sort" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "count" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "offset" }, arguments: [], directives: [] }, { 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: "version" }, 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: "createdAt" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastModifiedAt" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 330, source: { body: "query FetchProductSelections($limit: Int, $offset: Int, $sort: [String!]) {\n  productSelections(limit: $limit, offset: $offset, sort: $sort) {\n    total\n    count\n    offset\n    results {\n      id\n      version\n      key\n      nameAllLocales {\n        locale\n        value\n      }\n      createdAt\n      lastModifiedAt\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
-const createQueryVariables$7 = ownProps => ({
+var FetchProductSelections = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchProductSelections" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "limit" } }, type: { kind: "NamedType", name: { kind: "Name", value: "Int" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "offset" } }, type: { kind: "NamedType", name: { kind: "Name", value: "Int" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sort" } }, type: { kind: "ListType", type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "productSelections" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "Variable", name: { kind: "Name", value: "limit" } } }, { kind: "Argument", name: { kind: "Name", value: "offset" }, value: { kind: "Variable", name: { kind: "Name", value: "offset" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "Variable", name: { kind: "Name", value: "sort" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "count" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "offset" }, arguments: [], directives: [] }, { 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: "version" }, 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: "createdAt" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastModifiedAt" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 341, source: { body: "query FetchProductSelections($limit: Int, $offset: Int, $sort: [String!]) {\n  productSelections(limit: $limit, offset: $offset, sort: $sort) {\n    total\n    count\n    offset\n    results {\n      id\n      version\n      key\n      nameAllLocales {\n        locale\n        value\n      }\n      createdAt\n      lastModifiedAt\n      type\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const createQueryVariables$8 = ownProps => ({
   limit: ownProps.limit,
   offset: ownProps.offset,
   sort: _sortInstanceProperty__default["default"](ownProps)
@@ -2912,7 +2839,7 @@ const emptyProductSelections = {
   results: []
 };
 const useProductSelectionsFetcher = props => {
-  const queryVariables = createQueryVariables$7(props);
+  const queryVariables = createQueryVariables$8(props);
   const _useQuery = hooks.useQuery(FetchProductSelections, {
       context: {
         target: constants.GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
@@ -3068,41 +2995,11 @@ var commonPickerMessages = reactIntl.defineMessages({
   }
 });
 
-const trackingEvents$4 = {
-  selectChannelName: {
-    action: 'select',
-    category: 'ReferenceChannel',
-    label: 'name'
-  },
-  selectChannelKey: {
-    action: 'select',
-    category: 'ReferenceChannel',
-    label: 'key'
-  },
-  selectChannelId: {
-    action: 'select',
-    category: 'ReferenceChannel',
-    label: 'id'
-  },
-  selectWithoutTyping: {
-    action: 'select',
-    category: 'ReferenceChannel',
-    label: 'noEntry'
-  }
-};
-
 function ownKeys$1c(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1c(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$1c(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$1c(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var GetChannelsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channels" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputChannel" }, directives: [] }] } }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, 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: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n  id\n  key\n  nameAllLocales {\n    locale\n    value\n  }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n  channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n    total\n    results {\n      ...PickerInputChannel\n    }\n  }\n}\n\nquery GetChannelQuery($id: String) {\n  channel(id: $id) {\n    ...PickerInputChannel\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 var GetChannelQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channel" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputChannel" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, 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: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n  id\n  key\n  nameAllLocales {\n    locale\n    value\n  }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n  channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n    total\n    results {\n      ...PickerInputChannel\n    }\n  }\n}\n\nquery GetChannelQuery($id: String) {\n  channel(id: $id) {\n    ...PickerInputChannel\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 var PickerInputChannel = { kind: "Document", definitions: [{ kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, 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: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n  id\n  key\n  nameAllLocales {\n    locale\n    value\n  }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n  channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n    total\n    results {\n      ...PickerInputChannel\n    }\n  }\n}\n\nquery GetChannelQuery($id: String) {\n  channel(id: $id) {\n    ...PickerInputChannel\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
-const getTrackingEvent$4 = (inputValue, selectedValue) => {
-  const id = selectedValue.value,
-    key = selectedValue.key,
-    name = selectedValue.name;
-  const trackingEvent = !inputValue ? trackingEvents$4.selectWithoutTyping : _startsWithInstanceProperty__default["default"](name).call(name, inputValue) ? trackingEvents$4.selectChannelName : _startsWithInstanceProperty__default["default"](key).call(key, inputValue) ? trackingEvents$4.selectChannelKey : id === inputValue ? trackingEvents$4.selectChannelId : void 0;
-  return trackingEvent;
-};
 const ChannelPickerInput = _ref => {
   var _currentOption$data$l, _currentOption$data;
   let isClearable = _ref.isClearable,
@@ -3168,7 +3065,7 @@ const ChannelPickerInput = _ref => {
     onError(error);
   }), [loadOptions, convertChannelToOption, onError]);
   const loadOptionsDebounced = useDebouncedPromiseCallback(handleLoadOptions, 300);
-  const _useHandlers = useHandlers(onChange, getTrackingEvent$4),
+  const _useHandlers = useHandlers(onChange),
     _useHandlers2 = _slicedToArray(_useHandlers, 2),
     handleInternalInputChange = _useHandlers2[0],
     handleChange = _useHandlers2[1];
@@ -3551,7 +3448,6 @@ let SearchInput = /*#__PURE__*/function (_Component) {
     value: function render() {
       return jsxRuntime.jsx("div", {
         className: classnames__default["default"](this.props.blockClassName, styles$h.block),
-        "data-track-component": "Search",
         children: jsxRuntime.jsxs("div", {
           className: classnames__default["default"](this.props.containerClassName, styles$h.container),
           children: [jsxRuntime.jsx("div", {
@@ -3568,8 +3464,6 @@ let SearchInput = /*#__PURE__*/function (_Component) {
               label: this.props.label,
               placeholder: this.props.placeholder || this.props.intl.formatMessage(messages$J.placeholder),
               inputRef: this.props.inputRef || this.setInputRef,
-              "data-track-component": "Text",
-              "data-track-event": "change",
               onChange: this.handleInputChange,
               onEnter: this.handleEnter,
               onBlurValue: this.props.onBlur,
@@ -3593,8 +3487,6 @@ let SearchInput = /*#__PURE__*/function (_Component) {
             }),
             onClick: this.props.disabled ? null : this.handleSubmit,
             label: "search-button",
-            "data-track-component": "Button",
-            "data-track-event": "click",
             onMouseOver: this.props.handleMouseOver,
             onMouseOut: this.props.handleMouseOut,
             children: jsxRuntime.jsx(uiKit.SearchIcon, {
@@ -3824,9 +3716,7 @@ Option$2.displayName = 'Option';
 
 function ownKeys$18(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$18(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$18(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$18(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-const useHandlers = (onChange, getTrackingEvent) => {
-  const _useTracking = useTracking(),
-    track = _useTracking.track;
+const useHandlers = onChange => {
   const _useState = React.useState(),
     _useState2 = _slicedToArray(_useState, 2),
     inputValue = _useState2[0],
@@ -3836,25 +3726,13 @@ const useHandlers = (onChange, getTrackingEvent) => {
   }, []);
   const handleChange = useEventCallback(event => {
     var _event$target$value;
-    const doTrack = () => {
-      const trackingEvent = getTrackingEvent(inputValue, event.target.value);
-      if (trackingEvent) {
-        const action = trackingEvent.action,
-          category = trackingEvent.category,
-          label = trackingEvent.label;
-        track(action, category, label);
-      }
-    };
-    if (event.target.value) {
-      doTrack();
-    }
     const eventWithExtractedValue = _objectSpread$18(_objectSpread$18({}, event), {}, {
       target: _objectSpread$18(_objectSpread$18({}, event.target), {}, {
         value: (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.value
       })
     });
     onChange(eventWithExtractedValue);
-  }, [onChange, getTrackingEvent, inputValue, track]);
+  }, [onChange, inputValue]);
   return [handleInputChange, handleChange];
 };
 
@@ -3969,30 +3847,11 @@ var messages$H = reactIntl.defineMessages({
   }
 });
 
-const trackingEvents$3 = {
-  selectProductTypeName: {
-    action: 'select',
-    category: 'ReferenceProductType',
-    label: 'name'
-  },
-  selectProductTypeId: {
-    action: 'select',
-    category: 'ReferenceProductType',
-    label: 'id'
-  }
-};
-
 var GetProductTypeQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetProductTypeQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "productType" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 212, source: { body: "query GetProductTypesQuery($where: String) {\n  productTypes(where: $where) {\n    results {\n      id\n      name\n    }\n  }\n}\n\nquery GetProductTypeQuery($id: String) {\n  productType(id: $id) {\n    id\n    name\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const DropdownIndicator$1 = () => jsxRuntime.jsx(uiKit.SearchIcon, {
   color: "primary"
 });
 DropdownIndicator$1.displayName = 'DropdownIndicator';
-const getTrackingEvent$3 = (inputValue, selectedValue) => {
-  const id = selectedValue.value,
-    name = selectedValue.label;
-  const trackingEvent = _startsWithInstanceProperty__default["default"](name).call(name, inputValue) ? trackingEvents$3.selectProductTypeName : id === inputValue ? trackingEvents$3.selectProductTypeId : void 0;
-  return trackingEvent;
-};
 const convertProductTypeToOption = productType => {
   if (!productType) return null;
   const id = productType.id,
@@ -4042,7 +3901,7 @@ const ProductTypePickerInput = _ref => {
     onError(error);
   }), [loadProductTypes, onError]);
   const loadOptionsDebounced = useDebouncedPromiseCallback(handleLoadOptions, 300);
-  const _useHandlers = useHandlers(onChange, getTrackingEvent$3),
+  const _useHandlers = useHandlers(onChange),
     _useHandlers2 = _slicedToArray(_useHandlers, 2),
     handleInternalInputChange = _useHandlers2[0],
     handleChange = _useHandlers2[1];
@@ -4103,38 +3962,8 @@ var messages$G = reactIntl.defineMessages({
   }
 });
 
-const trackingEvents$2 = {
-  selectStateName: {
-    action: 'select',
-    category: 'ReferenceState',
-    label: 'name'
-  },
-  selectStateKey: {
-    action: 'select',
-    category: 'ReferenceState',
-    label: 'key'
-  },
-  selectStateId: {
-    action: 'select',
-    category: 'ReferenceState',
-    label: 'id'
-  },
-  selectWithoutTyping: {
-    action: 'select',
-    category: 'ReferenceState',
-    label: 'noEntry'
-  }
-};
-
 var GetStatesQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetStatesQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "states" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { 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: [] }] } }] } }] } }] } }], loc: { start: 0, end: 377, source: { body: "query GetStatesQuery($where: String, $sortByNamePath: String!) {\n  states(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n    total\n    results {\n      id\n      key\n      nameAllLocales {\n        locale\n        value\n      }\n    }\n  }\n}\n\nquery GetStateQuery($id: String) {\n  state(id: $id) {\n    id\n    key\n    nameAllLocales {\n      locale\n      value\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 var GetStateQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetStateQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "state" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], 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: [] }] } }] } }] } }], loc: { start: 0, end: 377, source: { body: "query GetStatesQuery($where: String, $sortByNamePath: String!) {\n  states(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n    total\n    results {\n      id\n      key\n      nameAllLocales {\n        locale\n        value\n      }\n    }\n  }\n}\n\nquery GetStateQuery($id: String) {\n  state(id: $id) {\n    id\n    key\n    nameAllLocales {\n      locale\n      value\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
-const getTrackingEvent$2 = (inputValue, selectedValue) => {
-  const id = selectedValue.value,
-    key = selectedValue.key,
-    name = selectedValue.name;
-  const trackingEvent = !inputValue ? trackingEvents$2.selectWithoutTyping : _startsWithInstanceProperty__default["default"](name).call(name, inputValue) ? trackingEvents$2.selectStateName : _startsWithInstanceProperty__default["default"](key).call(key, inputValue) ? trackingEvents$2.selectStateKey : id === inputValue ? trackingEvents$2.selectStateId : void 0;
-  return trackingEvent;
-};
 const StatePickerInput = _ref => {
   var _currentOption$data$l, _currentOption$data;
   let isClearable = _ref.isClearable,
@@ -4191,7 +4020,7 @@ const StatePickerInput = _ref => {
     onError(error);
   }), [loadOptions, convertStateToOption, onError]);
   const loadOptionsDebounced = useDebouncedPromiseCallback(handleLoadOptions, 300);
-  const _useHandlers = useHandlers(onChange, getTrackingEvent$2),
+  const _useHandlers = useHandlers(onChange),
     _useHandlers2 = _slicedToArray(_useHandlers, 2),
     handleInternalInputChange = _useHandlers2[0],
     handleChange = _useHandlers2[1];
@@ -6329,37 +6158,12 @@ var messages$D = reactIntl.defineMessages({
   }
 });
 
-const trackingEvents$1 = {
-  selectProductName: {
-    action: 'select',
-    category: 'ReferenceProduct',
-    label: 'name'
-  },
-  selectProductKey: {
-    action: 'select',
-    category: 'ReferenceProduct',
-    label: 'key'
-  },
-  selectProductId: {
-    action: 'select',
-    category: 'ReferenceProduct',
-    label: 'id'
-  }
-};
-
 var GetProductQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetProductQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "product" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], 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: "masterData" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "current" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ 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: 440, source: { body: "query GetProductsQuery($where: String) {\n  products(where: $where) {\n    results {\n      id\n      key\n      masterData {\n        current {\n          nameAllLocales {\n            locale\n            value\n          }\n        }\n      }\n    }\n  }\n}\n\nquery GetProductQuery($id: String) {\n  product(id: $id) {\n    id\n    key\n    masterData {\n      current {\n        nameAllLocales {\n          locale\n          value\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 var GetProductsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetProductsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "products" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }], directives: [], 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: "masterData" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "current" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ 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: 440, source: { body: "query GetProductsQuery($where: String) {\n  products(where: $where) {\n    results {\n      id\n      key\n      masterData {\n        current {\n          nameAllLocales {\n            locale\n            value\n          }\n        }\n      }\n    }\n  }\n}\n\nquery GetProductQuery($id: String) {\n  product(id: $id) {\n    id\n    key\n    masterData {\n      current {\n        nameAllLocales {\n          locale\n          value\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const DropdownIndicator = () => jsxRuntime.jsx(uiKit.SearchIcon, {
   color: "primary"
 });
 DropdownIndicator.displayName = 'DropdownIndicator';
-const getTrackingEvent$1 = (inputValue, selectedValue) => {
-  const id = selectedValue.value,
-    key = selectedValue.key,
-    name = selectedValue.name;
-  const trackingEvent = _startsWithInstanceProperty__default["default"](name).call(name, inputValue) ? trackingEvents$1.selectProductName : _startsWithInstanceProperty__default["default"](key).call(key, inputValue) ? trackingEvents$1.selectProductKey : id === inputValue ? trackingEvents$1.selectProductId : void 0;
-  return trackingEvent;
-};
 const ProductPickerInput = _ref => {
   var _currentOption$data$l, _currentOption$data;
   let isClearable = _ref.isClearable,
@@ -6417,7 +6221,7 @@ const ProductPickerInput = _ref => {
     onError(error);
   }), [loadOptions, onError, convertProductToOption]);
   const loadOptionsDebounced = useDebouncedPromiseCallback(handleLoadOptions, 300);
-  const _useHandlers = useHandlers(onChange, getTrackingEvent$1),
+  const _useHandlers = useHandlers(onChange),
     _useHandlers2 = _slicedToArray(_useHandlers, 2),
     handleInternalInputChange = _useHandlers2[0],
     handleChange = _useHandlers2[1];
@@ -6830,7 +6634,7 @@ function CustomInputSet(props) {
     touched = _useFormikContext.touched,
     isSubmitting = _useFormikContext.isSubmitting,
     dirty = _useFormikContext.dirty;
-  const itemFieldDefintion = _objectSpread$U(_objectSpread$U({}, props.fieldDefinition), {}, {
+  const itemFieldDefinition = _objectSpread$U(_objectSpread$U({}, props.fieldDefinition), {}, {
     type: props.fieldDefinition.type.elementType
   });
   const value = React.useMemo(() => props.value || [undefined], [props.value]);
@@ -6889,7 +6693,7 @@ function CustomInputSet(props) {
   // in <CustomFieldComponent /> where proper component for given field/attribute
   // type is selected.
   const type = getType(props.fieldDefinition);
-  const typeName = type.name.toLowerCase();
+  const typeName = type === null || type === void 0 ? void 0 : type.name.toLowerCase();
   const areButtonsTopAligned = _includesInstanceProperty__default["default"](_context2 = [CUSTOM_FIELD_TYPES.lenum, CUSTOM_FIELD_TYPES.localizedenum, CUSTOM_FIELD_TYPES.localizedstring, CUSTOM_FIELD_TYPES.string, CUSTOM_FIELD_TYPES.text, CUSTOM_FIELD_TYPES.ltext, CUSTOM_FIELD_TYPES.reference]).call(_context2, typeName);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(uiKit.AccessibleHidden, {
@@ -6914,7 +6718,7 @@ function CustomInputSet(props) {
               alignItems: areButtonsTopAligned ? 'flex-start' : 'center',
               children: [jsxRuntime.jsx(CustomFieldInput, {
                 name: fieldName,
-                fieldDefinition: itemFieldDefintion,
+                fieldDefinition: itemFieldDefinition,
                 isDisabled: props.isDisabled,
                 isReadOnly: props.isReadOnly,
                 onBlur: props.onBlur,
@@ -6941,7 +6745,6 @@ function CustomInputSet(props) {
     })]
   });
 }
-CustomInputSet.displayName = 'CustomInputSet';
 
 var messages$C = reactIntl.defineMessages({
   referencedProductType: {
@@ -7400,7 +7203,6 @@ function ProductAttributes(props) {
     inputValuesConverter: convertInputValue
   });
 }
-ProductAttributes.displayName = 'ProductAttributes';
 
 const useFieldDefintion = attributeDefinition => React.useMemo(() => attributeDefinitionToFieldDefinition(attributeDefinition), [attributeDefinition]);
 function ProductAttributeInput(props) {
@@ -7749,30 +7551,23 @@ const nonSetComponents = {
   [CUSTOM_FIELD_TYPES.date]: CustomDateTimeInput,
   [CUSTOM_FIELD_TYPES.nested]: CustomNestedInput
 };
-const getSetComponent = fieldDefinition => {
-  const type = getType(fieldDefinition);
-  const typeName = type.name.toLowerCase();
-  // Boolean is the only set element with picularities (i.e. way more
-  // convenient for user to work with it as with select input with three values:
-  // [true], [false] and [true, false]).
-  if (typeName === CUSTOM_FIELD_TYPES.boolean) return CustomBooleanInputSet;
-  // All the rest sets are just a fancy wrapper around single-item components
-  return CustomInputSet;
-};
-const getNonSetComponent = fieldDefinition => {
-  const typeName = fieldDefinition.type.name.toLowerCase();
-  return nonSetComponents[typeName];
-};
-const isSet = fieldDefinition => {
-  const typeName = fieldDefinition.type.name.toLowerCase();
-  return typeName === 'set';
-};
-const getInputComponent = fieldDefinition => {
-  if (isSet(fieldDefinition)) return getSetComponent(fieldDefinition);
-  return getNonSetComponent(fieldDefinition);
-};
 const CustomFieldInput = /*#__PURE__*/React.memo(props => {
-  const InputComponent = getInputComponent(props.fieldDefinition);
+  const InputComponent = React.useMemo(() => {
+    var _props$fieldDefinitio;
+    const typeName = (_props$fieldDefinitio = props.fieldDefinition.type) === null || _props$fieldDefinitio === void 0 ? void 0 : _props$fieldDefinitio.name.toLowerCase();
+    if (typeName === 'set') {
+      var _getSetElementType;
+      // Boolean is the only set element with peculiarities (i.e. way more
+      // convenient for user to work with it as with select input with three values:
+      // [true], [false] and [true, false]).
+      if (((_getSetElementType = getType(props.fieldDefinition)) === null || _getSetElementType === void 0 ? void 0 : _getSetElementType.name.toLowerCase()) === CUSTOM_FIELD_TYPES.boolean) {
+        return CustomBooleanInputSet;
+      }
+      // All the rest sets are just a fancy wrapper around single-item components
+      return CustomInputSet;
+    }
+    return nonSetComponents[typeName];
+  }, [props.fieldDefinition]);
   if (!InputComponent) return null;
   return jsxRuntime.jsx(InputComponent, {
     name: props.name,
@@ -7931,6 +7726,11 @@ var pickerMessages = reactIntl.defineMessages({
     id: 'ProductSelectionPicker.productSelectionsSearchSelectPlaceholder',
     description: 'Placeholder of the search select field for product selections',
     defaultMessage: 'Search for product selections by entering exact key'
+  },
+  asyncSelectDropdownTypeAheadPrompt: {
+    id: 'ProductSelectionPicker.asyncSelectDropdownTypeAheadPrompt',
+    description: 'Message shown telling the user to start typing to load more product selections',
+    defaultMessage: 'Start typing above to load more'
   }
 });
 
@@ -7963,6 +7763,10 @@ function ProductSelectionBasicSelectDropdown(props) {
     dataLocale = _useApplicationContex.dataLocale;
   if (productSelectionsFetcher.isLoading) return jsxRuntime.jsx(CenteredLoadingSpinner, {});
   const productSelections = (_productSelectionsFet = (_productSelectionsFet2 = productSelectionsFetcher.productSelections) === null || _productSelectionsFet2 === void 0 ? void 0 : _productSelectionsFet2.results) !== null && _productSelectionsFet !== void 0 ? _productSelectionsFet : [];
+  const filteredProductSelections = _filterInstanceProperty__default["default"](productSelections).call(productSelections, ps => {
+    var _context;
+    return !_includesInstanceProperty__default["default"](_context = props.excludedProductSelectionIds).call(_context, ps.id);
+  });
   const onOptionClick = event => {
     const productSelectionId = event.target.value;
     const currentProductSelection = _findInstanceProperty__default["default"](productSelections).call(productSelections, productSelection => productSelection.id === productSelectionId);
@@ -7977,12 +7781,18 @@ function ProductSelectionBasicSelectDropdown(props) {
     isRequired: props.isRequired,
     description: props.description,
     placeholder: intl.formatMessage(pickerMessages.productSelectionsBasicSelectPlaceholder),
-    options: mapProductSelectionsToOptions$1(productSelections, dataLocale, projectLanguages),
+    options: mapProductSelectionsToOptions$1(filteredProductSelections, dataLocale, projectLanguages),
     components: props.components,
     onChange: onOptionClick,
+    onBlur: props.onBlur,
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
     hasWarning: props.hasWarning,
+    hasError: props.hasError,
+    isClearable: props.isClearable,
+    menuPortalTarget: props.menuPortalTarget,
+    menuPortalZIndex: props.menuPortalZIndex,
+    maxMenuHeight: props.maxMenuHeight,
     isSearchable: true
   });
 }
@@ -7990,6 +7800,28 @@ function ProductSelectionBasicSelectDropdown(props) {
 const LOWER_PRODUCT_SELECTIONS_LIMIT = 60;
 const UPPER_PRODUCT_SELECTIONS_LIMIT = 500;
 
+const getValueFromOptions$3 = _ref => {
+  let currentlySelectedProductSelections = _ref.currentlySelectedProductSelections,
+    allProductSelectionOptions = _ref.allProductSelectionOptions,
+    isMulti = _ref.isMulti;
+  // return value as undefined if no options is yet selected. It is needed for cases where users sets initial values as empty string
+  if (!currentlySelectedProductSelections) {
+    return undefined;
+  }
+
+  // handle async-select-field value transformation
+  if (isMulti) {
+    return _filterInstanceProperty__default["default"](allProductSelectionOptions).call(allProductSelectionOptions, ps => currentlySelectedProductSelections === null || currentlySelectedProductSelections === void 0 ? void 0 : _includesInstanceProperty__default["default"](currentlySelectedProductSelections).call(currentlySelectedProductSelections, ps.value));
+  }
+
+  // in case it is not multiselect, then a single valued async-select-input is being requested and the value should have proper format
+  return _findInstanceProperty__default["default"](allProductSelectionOptions).call(allProductSelectionOptions, ps => currentlySelectedProductSelections === ps.value);
+};
+const emptyStoreOption$1 = intl => [{
+  label: intl.formatMessage(pickerMessages.asyncSelectDropdownTypeAheadPrompt),
+  value: undefined,
+  isDisabled: true
+}];
 function ProductSelectionsAsyncSelectDropdown(props) {
   var _productSelectionsFet3;
   const intl = reactIntl.useIntl();
@@ -8007,6 +7839,10 @@ function ProductSelectionsAsyncSelectDropdown(props) {
     var _productSelectionsFet, _productSelectionsFet2;
     return (_productSelectionsFet = (_productSelectionsFet2 = productSelectionsFetcher.productSelections) === null || _productSelectionsFet2 === void 0 ? void 0 : _productSelectionsFet2.results) !== null && _productSelectionsFet !== void 0 ? _productSelectionsFet : [];
   }, [(_productSelectionsFet3 = productSelectionsFetcher.productSelections) === null || _productSelectionsFet3 === void 0 ? void 0 : _productSelectionsFet3.results]);
+  const filteredProductSelections = _filterInstanceProperty__default["default"](productSelections).call(productSelections, ps => {
+    var _context;
+    return !_includesInstanceProperty__default["default"](_context = props.excludedProductSelectionIds).call(_context, ps.id);
+  });
   const onOptionClick = event => {
     var _event$target$value;
     const productSelectionId = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.value;
@@ -8014,7 +7850,7 @@ function ProductSelectionsAsyncSelectDropdown(props) {
     props.onChange(currentProductSelection);
   };
   const allProductSelectionOptions = React.useMemo(() => {
-    return _mapInstanceProperty__default["default"](productSelections).call(productSelections, productSelection => {
+    return _mapInstanceProperty__default["default"](filteredProductSelections).call(filteredProductSelections, productSelection => {
       const localizedName = l10n.formatLocalizedString(productSelection, {
         key: 'name',
         locale: dataLocale,
@@ -8027,17 +7863,26 @@ function ProductSelectionsAsyncSelectDropdown(props) {
         key: productSelection.key
       };
     });
-  }, [dataLocale, projectLanguages, productSelections]);
+  }, [dataLocale, projectLanguages, filteredProductSelections]);
   const getDefaultOptions = () => {
-    return _sliceInstanceProperty__default["default"](allProductSelectionOptions).call(allProductSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    return [{
+      options: _sliceInstanceProperty__default["default"](allProductSelectionOptions).call(allProductSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT)
+    }, {
+      options: emptyStoreOption$1(intl)
+    }];
   };
   const handleLoadOptions = async searchTerm => {
     const productSelectionOptions = allProductSelectionOptions;
     const filteredOptions = _filterInstanceProperty__default["default"](productSelectionOptions).call(productSelectionOptions, productSelection => {
-      var _context, _context2;
-      return _includesInstanceProperty__default["default"](_context = productSelection.label.toLowerCase()).call(_context, searchTerm.toLowerCase()) || productSelection.key && _includesInstanceProperty__default["default"](_context2 = productSelection.key.toLowerCase()).call(_context2, searchTerm.toLowerCase());
+      var _context2, _context3;
+      return _includesInstanceProperty__default["default"](_context2 = productSelection.label.toLowerCase()).call(_context2, searchTerm.toLowerCase()) || productSelection.key && _includesInstanceProperty__default["default"](_context3 = productSelection.key.toLowerCase()).call(_context3, searchTerm.toLowerCase());
     });
-    return searchTerm ? _sliceInstanceProperty__default["default"](filteredOptions).call(filteredOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT) : _sliceInstanceProperty__default["default"](productSelectionOptions).call(productSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    const finalOptions = searchTerm ? _sliceInstanceProperty__default["default"](filteredOptions).call(filteredOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT) : _sliceInstanceProperty__default["default"](productSelectionOptions).call(productSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    return [{
+      options: finalOptions
+    }, {
+      options: emptyStoreOption$1(intl)
+    }];
   };
   if (productSelectionsFetcher.isLoading) return jsxRuntime.jsx(CenteredLoadingSpinner, {});
   return jsxRuntime.jsx(uiKit.AsyncSelectField, {
@@ -8048,22 +7893,60 @@ function ProductSelectionsAsyncSelectDropdown(props) {
     isRequired: props.isRequired,
     placeholder: intl.formatMessage(pickerMessages.productSelectionsAsyncSelectPlaceholder),
     loadOptions: handleLoadOptions,
+    value: getValueFromOptions$3({
+      currentlySelectedProductSelections: props.value,
+      allProductSelectionOptions,
+      isMulti: props.isMulti
+    }),
     onChange: onOptionClick,
+    onBlur: props.onBlur,
     isDisabled: props.isDisabled,
+    showOptionGroupDivider: true,
     isReadOnly: props.isReadOnly,
     components: props.components,
     defaultOptions: getDefaultOptions(),
-    hasWarning: props.hasWarning
+    hasWarning: props.hasWarning,
+    hasError: props.hasError,
+    isClearable: props.isClearable,
+    menuPortalTarget: props.menuPortalTarget,
+    menuPortalZIndex: props.menuPortalZIndex,
+    maxMenuHeight: props.maxMenuHeight
   });
 }
 
+var ProductSelectionsPickerFetcher$1 = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "ProductSelectionsPickerFetcher" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "productSelections" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }], directives: [], 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: "version" }, 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: 212, source: { body: "query ProductSelectionsPickerFetcher($where: String!) {\n  productSelections(where: $where) {\n    results {\n      id\n      key\n      version\n      nameAllLocales {\n        locale\n        value\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const createQueryVariables$7 = (productSelections, predicateField) => {
+  var _context;
+  return {
+    where: _concatInstanceProperty__default["default"](_context = "".concat(predicateField, " in (")).call(_context, _mapInstanceProperty__default["default"](productSelections).call(productSelections, ps => "\"".concat(ps, "\"")).join(', '), ")"),
+    limit: 500
+  };
+};
+const useProductSelectionsByFieldFetcher = (productSelections, predicateField) => {
+  var _productSelectionsQue, _productSelectionsQue2;
+  const productSelectionList = _Array$isArray__default["default"](productSelections) ? productSelections : [productSelections];
+  const productSelectionsQuery = react.useQuery(ProductSelectionsPickerFetcher$1, {
+    context: {
+      target: constants.GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
+    },
+    variables: createQueryVariables$7(productSelectionList, predicateField),
+    skip: productSelectionList.length === 0
+  });
+  return {
+    productSelections: (_productSelectionsQue = (_productSelectionsQue2 = productSelectionsQuery.data) === null || _productSelectionsQue2 === void 0 ? void 0 : _productSelectionsQue2.productSelections.results) !== null && _productSelectionsQue !== void 0 ? _productSelectionsQue : [],
+    isLoading: productSelectionsQuery.loading
+  };
+};
+
 var ProductSelectionsPickerFetcher = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "ProductSelectionsPickerFetcher" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "productSelections" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }], directives: [], 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: "version" }, 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: 212, source: { body: "query ProductSelectionsPickerFetcher($where: String!) {\n  productSelections(where: $where) {\n    results {\n      id\n      key\n      version\n      nameAllLocales {\n        locale\n        value\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
-const mapProductSelectionsToOptions = memoize__default["default"](function () {
-  let productSelections = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let dataLocale = arguments.length > 1 ? arguments[1] : undefined;
-  let projectLanguages = arguments.length > 2 ? arguments[2] : undefined;
+const mapProductSelectionsToOptions = memoize__default["default"](_ref => {
+  let _ref$productSelection = _ref.productSelections,
+    productSelections = _ref$productSelection === void 0 ? [] : _ref$productSelection,
+    dataLocale = _ref.dataLocale,
+    projectLanguages = _ref.projectLanguages,
+    renderSelectInputOptionValuesByField = _ref.renderSelectInputOptionValuesByField;
   return _mapInstanceProperty__default["default"](productSelections).call(productSelections, productSelection => ({
-    value: productSelection.id,
+    value: renderSelectInputOptionValuesByField === 'key' ? productSelection.key : productSelection.id,
     label: l10n.formatLocalizedString(productSelection, {
       key: 'name',
       locale: dataLocale,
@@ -8072,9 +7955,22 @@ const mapProductSelectionsToOptions = memoize__default["default"](function () {
     key: productSelection.key
   }));
 });
-const createQueryVariables$6 = _ref => {
+const getValueFromOptions$2 = _ref2 => {
+  let isMulti = _ref2.isMulti,
+    currentlySelectedProductSelections = _ref2.currentlySelectedProductSelections,
+    productSelectionFieldOptions = _ref2.productSelectionFieldOptions;
+  if (!currentlySelectedProductSelections) {
+    return undefined;
+  }
+  if (isMulti) {
+    return productSelectionFieldOptions;
+  }
+  // if the input is not multiselect, the AsyncSearchSelect is expecting an object rather than array
+  return productSelectionFieldOptions[0];
+};
+const createQueryVariables$6 = _ref3 => {
   var _context;
-  let searchText = _ref.searchText;
+  let searchText = _ref3.searchText;
   const sanitizedSearchText = sanitize(_trimInstanceProperty__default["default"](searchText).call(searchText, searchText));
   const idQuery = isUUID(sanitizedSearchText) && "id = \"".concat(sanitizedSearchText, "\"");
   const keyQuery = "key = \"".concat(sanitizedSearchText, "\"");
@@ -8084,6 +7980,7 @@ const createQueryVariables$6 = _ref => {
   };
 };
 function ProductSelectionsSearchSelectDropdown(props) {
+  var _context3;
   const intl = reactIntl.useIntl();
   const _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -8096,6 +7993,7 @@ function ProductSelectionsSearchSelectDropdown(props) {
     })),
     projectLanguages = _useApplicationContex.projectLanguages,
     dataLocale = _useApplicationContex.dataLocale;
+  const productSelectionsByFieldFetcher = useProductSelectionsByFieldFetcher(props.value, props.renderSelectInputOptionValuesByField);
   const handleLoadOptions = async searchText => {
     var _data$productSelectio, _data$productSelectio2;
     const _await$client$query = await client$1.query({
@@ -8111,8 +8009,17 @@ function ProductSelectionsSearchSelectDropdown(props) {
       data = _await$client$query.data;
     const matchedProductSelections = (_data$productSelectio = data === null || data === void 0 ? void 0 : (_data$productSelectio2 = data.productSelections) === null || _data$productSelectio2 === void 0 ? void 0 : _data$productSelectio2.results) !== null && _data$productSelectio !== void 0 ? _data$productSelectio : [];
     const updatedProductSelections = _mapInstanceProperty__default["default"](matchedProductSelections).call(matchedProductSelections, convertProductSelectionFromGraphQl);
-    setProductSelectionResults(updatedProductSelections);
-    return mapProductSelectionsToOptions(updatedProductSelections, dataLocale, projectLanguages);
+    const filteredProductSelections = _filterInstanceProperty__default["default"](updatedProductSelections).call(updatedProductSelections, ps => {
+      var _context2;
+      return !_includesInstanceProperty__default["default"](_context2 = props.excludedProductSelectionIds).call(_context2, ps.id);
+    });
+    setProductSelectionResults(filteredProductSelections);
+    return mapProductSelectionsToOptions({
+      productSelections: filteredProductSelections,
+      dataLocale,
+      projectLanguages,
+      renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
+    });
   };
   const loadOptionsDebounced = debounce__default["default"](handleLoadOptions, 500);
   const onOptionClick = event => {
@@ -8121,33 +8028,56 @@ function ProductSelectionsSearchSelectDropdown(props) {
     const currentProductSelection = _findInstanceProperty__default["default"](productionSelectionResults).call(productionSelectionResults, productSelection => productSelection.id === productSelectionId);
     props.onChange(currentProductSelection);
   };
+  if (productSelectionsByFieldFetcher.isLoading) return jsxRuntime.jsx(CenteredLoadingSpinner, {});
   return jsxRuntime.jsx(uiKit.SearchSelectField, {
     id: props.id,
     name: props.name,
     title: props.title,
+    value: getValueFromOptions$2({
+      currentlySelectedProductSelections: props.value,
+      productSelectionFieldOptions: mapProductSelectionsToOptions({
+        productSelections: _mapInstanceProperty__default["default"](_context3 = productSelectionsByFieldFetcher.productSelections).call(_context3, convertProductSelectionFromGraphQl),
+        dataLocale,
+        projectLanguages,
+        renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
+      }),
+      isMulti: props.isMulti
+    }),
     description: props.description,
     isRequired: props.isRequired,
     placeholder: intl.formatMessage(pickerMessages.productSelectionsSearchSelectPlaceholder),
     loadOptions: loadOptionsDebounced,
     onChange: onOptionClick,
+    onBlur: props.onBlur,
     components: props.components,
-    isDisabled: props.isDisabled,
+    isDisabled: props.isDisabled || productSelectionsByFieldFetcher.isLoading,
     isReadOnly: props.isReadOnly,
-    hasWarning: props.hasWarning
+    hasWarning: props.hasWarning,
+    isClearable: props.isClearable,
+    hasError: props.hasError,
+    menuPortalTarget: props.menuPortalTarget,
+    menuPortalZIndex: props.menuPortalZIndex,
+    maxMenuHeight: props.maxMenuHeight
   });
 }
 
 function ownKeys$N(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$N(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$N(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$N(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-const components = {
-  // eslint-disable-next-line react/display-name
-  Option: optionInnerProps => jsxRuntime.jsx(selectUtils.CustomSelectInputOption, {
-    optionType: "double-property",
-    optionInnerProps: optionInnerProps
-  })
-};
 function ProductSelectionsPicker(props) {
   const productSelectionsTotalFetcher = useProductSelectionsTotalFetcher();
+  const components = React.useMemo(() => {
+    return {
+      Option: optionInnerProps => {
+        if (optionInnerProps.isDisabled) {
+          return jsxRuntime.jsx(uiKit.SelectInput.Option, _objectSpread$N({}, optionInnerProps));
+        }
+        return jsxRuntime.jsx(selectUtils.CustomSelectInputOption, {
+          optionType: props.optionType,
+          optionInnerProps: optionInnerProps
+        });
+      }
+    };
+  }, [props.optionType]);
   if (productSelectionsTotalFetcher.isLoading) return jsxRuntime.jsx(CenteredLoadingSpinner, {});
   const CustomProductSelectionsPicker = productSelectionsTotalFetcher.total <= props.lowerProductSelectionsLimit ? ProductSelectionBasicSelectDropdown : productSelectionsTotalFetcher.total <= props.upperProductSelectionsLimit ? ProductSelectionsAsyncSelectDropdown : ProductSelectionsSearchSelectDropdown;
   return jsxRuntime.jsx(uiKit.Spacings.Stack, {
@@ -8163,7 +8093,13 @@ ProductSelectionsPicker.defaultProps = {
   optionType: 'double-property',
   isMulti: false,
   isRequired: false,
-  hasWarning: false
+  hasWarning: false,
+  hasError: false,
+  isClearable: false,
+  isReadOnly: false,
+  isDisabled: false,
+  excludedProductSelectionIds: [],
+  title: '' // FieldLabel requires title to have some value
 };
 
 const COUNTRIES_ASYNC_LOADING_LIMIT = 60;
@@ -8294,43 +8230,9 @@ var messages$y = reactIntl.defineMessages({
   }
 });
 
-const trackingEvents = {
-  selectCustomerGroupName: {
-    action: 'select',
-    category: 'ReferenceCustomerGroup',
-    label: 'name'
-  },
-  selectCustomerGroupKey: {
-    action: 'select',
-    category: 'ReferenceCustomerGroup',
-    label: 'key'
-  },
-  selectCustomerGroupId: {
-    action: 'select',
-    category: 'ReferenceCustomerGroup',
-    label: 'id'
-  },
-  selectWithoutTyping: {
-    action: 'select',
-    category: 'ReferenceCustomerGroup',
-    label: 'noEntry'
-  }
-};
-
 var GetCustomerGroupsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroups" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputCustomerGroups" }, directives: [] }] } }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, 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: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n  id\n  key\n  name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n  customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n    total\n    results {\n      ...PickerInputCustomerGroups\n    }\n  }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n  customerGroup(id: $id) {\n    ...PickerInputCustomerGroups\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 var GetCustomerGroupQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroup" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputCustomerGroups" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, 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: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n  id\n  key\n  name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n  customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n    total\n    results {\n      ...PickerInputCustomerGroups\n    }\n  }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n  customerGroup(id: $id) {\n    ...PickerInputCustomerGroups\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 var PickerInputCustomerGroups = { kind: "Document", definitions: [{ kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, 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: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n  id\n  key\n  name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n  customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n    total\n    results {\n      ...PickerInputCustomerGroups\n    }\n  }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n  customerGroup(id: $id) {\n    ...PickerInputCustomerGroups\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
-const getTrackingEvent = (inputValue, selectedValue) => {
-  const id = selectedValue.value,
-    key = selectedValue.key,
-    name = selectedValue.name;
-  const selectWithoutTyping = trackingEvents.selectWithoutTyping,
-    selectCustomerGroupId = trackingEvents.selectCustomerGroupId,
-    selectCustomerGroupKey = trackingEvents.selectCustomerGroupKey,
-    selectCustomerGroupName = trackingEvents.selectCustomerGroupName;
-  const trackingEvent = !inputValue ? selectWithoutTyping : _startsWithInstanceProperty__default["default"](name).call(name, inputValue) ? selectCustomerGroupName : _startsWithInstanceProperty__default["default"](key).call(key, inputValue) ? selectCustomerGroupKey : id === inputValue ? selectCustomerGroupId : void 0;
-  return trackingEvent;
-};
 const CustomerGroupPickerInput = _ref => {
   var _currentOption$data$l, _currentOption$data;
   let isClearable = _ref.isClearable,
@@ -8393,7 +8295,7 @@ const CustomerGroupPickerInput = _ref => {
     onError(error);
   }), [loadOptions, convertCustomerGroupToOption, onError]);
   const loadOptionsDebounced = useDebouncedPromiseCallback(handleLoadOptions, 300);
-  const _useHandlers = useHandlers(onChange, getTrackingEvent),
+  const _useHandlers = useHandlers(onChange),
     _useHandlers2 = _slicedToArray(_useHandlers, 2),
     handleInternalInputChange = _useHandlers2[0],
     handleChange = _useHandlers2[1];
@@ -9790,11 +9692,9 @@ const mergeOverwritten = (inherited, explicit) => {
   };
 };
 const mergeAssociates = businessUnit => {
-  var _context2;
-  const _businessUnit$associa = businessUnit.associates,
-    associates = _businessUnit$associa === void 0 ? [] : _businessUnit$associa,
-    _businessUnit$inherit = businessUnit.inheritedAssociates,
-    inheritedAssociates = _businessUnit$inherit === void 0 ? [] : _businessUnit$inherit;
+  var _businessUnit$associa, _businessUnit$inherit, _context2;
+  const associates = businessUnit === null || businessUnit === void 0 ? void 0 : (_businessUnit$associa = businessUnit.associates) === null || _businessUnit$associa === void 0 ? void 0 : _filterInstanceProperty__default["default"](_businessUnit$associa).call(_businessUnit$associa, associate => associate === null || associate === void 0 ? void 0 : associate.customer);
+  const inheritedAssociates = businessUnit === null || businessUnit === void 0 ? void 0 : (_businessUnit$inherit = businessUnit.inheritedAssociates) === null || _businessUnit$inherit === void 0 ? void 0 : _filterInstanceProperty__default["default"](_businessUnit$inherit).call(_businessUnit$inherit, inheritedAssociate => inheritedAssociate === null || inheritedAssociate === void 0 ? void 0 : inheritedAssociate.customer);
   const overwrittenOnExplicit = intersectionBy__default["default"](associates, inheritedAssociates, 'customer.id') || [];
   const overwrittenOnInherited = intersectionBy__default["default"](inheritedAssociates, associates, 'customer.id') || [];
   const onlyExplicit = differenceBy__default["default"](associates, inheritedAssociates, 'customer.id') || [];
@@ -9895,10 +9795,10 @@ var messages$r = reactIntl.defineMessages({
 function ownKeys$A(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$A(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$A(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const BusinessUnitAssociatesListView = props => {
-  var _props$values, _props$values$associa;
+  var _props$values, _props$values$associa, _props$values2, _props$values2$inheri;
   const intl = reactIntl.useIntl();
   const businessUnitsAssociateRolesFeatureEnabled = applicationShell.useFeatureToggle(ENABLE_BUSINESS_UNITS_ASSOCIATE_ROLES);
-  const totalAssociates = (_props$values = _valuesInstanceProperty__default["default"](props)) === null || _props$values === void 0 ? void 0 : (_props$values$associa = _props$values.associates) === null || _props$values$associa === void 0 ? void 0 : _props$values$associa.length;
+  const totalAssociates = ((_props$values = _valuesInstanceProperty__default["default"](props)) === null || _props$values === void 0 ? void 0 : (_props$values$associa = _props$values.associates) === null || _props$values$associa === void 0 ? void 0 : _props$values$associa.length) + (((_props$values2 = _valuesInstanceProperty__default["default"](props)) === null || _props$values2 === void 0 ? void 0 : (_props$values2$inheri = _props$values2.inheritedAssociates) === null || _props$values2$inheri === void 0 ? void 0 : _props$values2$inheri.length) || 0);
   const isBusinessUnitCreation = !isUUID(props.businessUnitId);
   const _usePaginationState = uiKit.usePaginationState({
       perPage: 20
@@ -9913,8 +9813,8 @@ const BusinessUnitAssociatesListView = props => {
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
   const associates = React.useMemo(() => {
-    var _props$values2, _context, _context2;
-    return businessUnitsAssociateRolesFeatureEnabled ? mergeAssociates(_valuesInstanceProperty__default["default"](props)) : (_props$values2 = _valuesInstanceProperty__default["default"](props)) === null || _props$values2 === void 0 ? void 0 : _mapInstanceProperty__default["default"](_context = _filterInstanceProperty__default["default"](_context2 = _props$values2.associates).call(_context2, associate => associate === null || associate === void 0 ? void 0 : associate.customer)).call(_context, associate => _objectSpread$A(_objectSpread$A({}, associate), {}, {
+    var _props$values3, _context, _context2;
+    return businessUnitsAssociateRolesFeatureEnabled ? mergeAssociates(_valuesInstanceProperty__default["default"](props)) : (_props$values3 = _valuesInstanceProperty__default["default"](props)) === null || _props$values3 === void 0 ? void 0 : _mapInstanceProperty__default["default"](_context = _filterInstanceProperty__default["default"](_context2 = _props$values3.associates).call(_context2, associate => associate === null || associate === void 0 ? void 0 : associate.customer)).call(_context, associate => _objectSpread$A(_objectSpread$A({}, associate), {}, {
       id: associate.customer.id
     }));
   }, [_valuesInstanceProperty__default["default"](props), businessUnitsAssociateRolesFeatureEnabled]);
@@ -10038,7 +9938,7 @@ const BusinessUnitAssociatesListView = props => {
 };
 BusinessUnitAssociatesListView.displayName = 'BusinessUnitAssociatesListView';
 
-var BusinessUnitAssociatesQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "BusinessUnitAssociatesQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeRoles" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeAssociateRoleAssignmentsRoles" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "businessUnit" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "BusinessUnitAssociatesFragment" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "BusinessUnitAssociatesFragment" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "BusinessUnit" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "associates" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "roles" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeRoles" } } }] }] }, { kind: "Field", name: { kind: "Name", value: "associateRoleAssignments" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeAssociateRoleAssignmentsRoles" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "associateRole" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "customer" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "__typename" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 577, source: { body: "fragment BusinessUnitAssociatesFragment on BusinessUnit {\n  id\n  associates {\n    roles @skip(if: $shouldExcludeRoles)\n    associateRoleAssignments\n      @skip(if: $shouldExcludeAssociateRoleAssignmentsRoles) {\n      associateRole {\n        name\n        key\n      }\n    }\n    customer {\n      id\n      email\n      firstName\n      lastName\n    }\n  }\n  __typename\n}\n\nquery BusinessUnitAssociatesQuery(\n  $id: String!\n  $shouldExcludeRoles: Boolean!\n  $shouldExcludeAssociateRoleAssignmentsRoles: Boolean!\n) {\n  businessUnit(id: $id) {\n    ...BusinessUnitAssociatesFragment\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+var BusinessUnitAssociatesQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "BusinessUnitAssociatesQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeRoles" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeAssociateRoleAssignmentsRoles" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "businessUnit" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "BusinessUnitAssociatesFragment" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "BusinessUnitAssociatesFragment" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "BusinessUnit" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "associates" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "roles" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeRoles" } } }] }] }, { kind: "Field", name: { kind: "Name", value: "associateRoleAssignments" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeAssociateRoleAssignmentsRoles" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "associateRole" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "inheritance" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "customer" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "inheritedAssociates" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "associateRoleAssignments" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeAssociateRoleAssignmentsRoles" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "associateRole" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "customer" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "__typename" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 849, source: { body: "fragment BusinessUnitAssociatesFragment on BusinessUnit {\n  id\n  associates {\n    roles @skip(if: $shouldExcludeRoles)\n    associateRoleAssignments\n      @skip(if: $shouldExcludeAssociateRoleAssignmentsRoles) {\n      associateRole {\n        name\n        key\n      }\n      inheritance\n    }\n    customer {\n      id\n      email\n      firstName\n      lastName\n    }\n  }\n  inheritedAssociates {\n    associateRoleAssignments\n      @skip(if: $shouldExcludeAssociateRoleAssignmentsRoles) {\n      associateRole {\n        name\n        key\n      }\n    }\n    customer {\n      id\n      email\n      firstName\n      lastName\n    }\n  }\n  __typename\n}\n\nquery BusinessUnitAssociatesQuery(\n  $id: String!\n  $shouldExcludeRoles: Boolean!\n  $shouldExcludeAssociateRoleAssignmentsRoles: Boolean!\n) {\n  businessUnit(id: $id) {\n    ...BusinessUnitAssociatesFragment\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const useBusinessUnitAssociatesFetcher = _ref => {
   let id = _ref.id,
     shouldExcludeRoles = _ref.shouldExcludeRoles,
@@ -12316,9 +12216,6 @@ var messages$7 = reactIntl.defineMessages({
 function ownKeys$f(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$f(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$f(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const MissingValueField = props => jsxRuntime.jsx(uiKit.CheckboxInput, {
-  "data-track-component": "MissingValue",
-  "data-track-event": "change",
-  "data-track-label": props.isChecked,
   name: "missing-value",
   isChecked: props.isChecked,
   onChange: props.onChange,
@@ -12614,6 +12511,7 @@ const SelectableFieldSearchInput = props => {
   return jsxRuntime.jsx("div", {
     className: styles$4.container,
     children: jsxRuntime.jsx(uiKit.SelectableSearchInput, {
+      menuHorizontalConstraint: 5,
       options: props.options,
       value: {
         text: searchText,
@@ -14184,30 +14082,6 @@ const getTimeZoneLabel = memoize__default["default"]((selectedTimeZone, timeZone
   return _concatInstanceProperty__default["default"](_context4 = "(GMT ".concat(timeZoneData.offset, ") ")).call(_context4, timeZoneData.name);
 });
 
-function findButtonLinkPathname(element) {
-  if (element.tagName === 'A') {
-    var _context;
-    const linkUrl = new _URL__default["default"](element.href);
-    return _concatInstanceProperty__default["default"](_context = "".concat(linkUrl.pathname)).call(_context, linkUrl.search);
-  }
-  return findButtonLinkPathname(element.parentElement);
-}
-function trackMenuClick(_ref) {
-  let event = _ref.event,
-    track = _ref.track,
-    pathToMatch = _ref.pathToMatch,
-    trackingEvent = _ref.trackingEvent;
-  const buttonLinkPathname = findButtonLinkPathname(event.target);
-  const shouldTrackEvent = !!reactRouterDom.matchPath(buttonLinkPathname, {
-    path: pathToMatch,
-    exact: true,
-    strict: true
-  });
-  if (shouldTrackEvent) {
-    track(trackingEvent.action, trackingEvent.category, trackingEvent.label);
-  }
-}
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 function withPendingRequests() {
@@ -14393,7 +14267,6 @@ exports.splitVariantAttributesByConstraint = splitVariantAttributesByConstraint;
 exports.storesListConnectorMockHandlers = handlers$7;
 exports.stringToBase64 = stringToBase64;
 exports.swapArrayItems = swapArrayItems;
-exports.trackMenuClick = trackMenuClick;
 exports.transformAllToProperNounCase = transformAllToProperNounCase;
 exports.transformCustomFieldsRawToCustomFields = transformCustomFieldsRawToCustomFields;
 exports.transformLocalizedFieldsForCategory = transformLocalizedFieldsForCategory;
@@ -14422,9 +14295,6 @@ exports.useTaxCategoriesPlatformLimits = useTaxCategoriesLimits;
 exports.useTotalNumberOfBusinessUnitsFetcherHandlers = handlers$1;
 exports.useTotalNumberOfStoresFetcher = useTotalNumberOfStoresFetcher;
 exports.useTotalNumberOfStoresFetcherHandlers = handlers$3;
-exports.useTracking = useTracking;
-exports.useTrackingContext = useTracking;
-exports.useTrackingShared = useTrackingShared;
 exports.validateCustomField = validateFilter$2;
 exports.validateCustomFields = validations;
 exports.validateDate = validateFilter$1;