@commercetools-frontend/experimental-components 3.2.1 → 5.0.0

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

@@ -16,7 +16,7 @@ import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
 import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
 import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
-import React, { useEffect, useCallback, useState, useContext, useRef, useMemo, PureComponent, Component, memo, createContext, isValidElement, forwardRef } from 'react';
+import React, { useEffect, useCallback, useState, useRef, useMemo, PureComponent, Component, memo, createContext, useContext, isValidElement, forwardRef } from 'react';
 import flowRight from 'lodash/flowRight';
 import { graphql as graphql$1, withApollo } from '@apollo/client/react/hoc';
 import flatten from 'lodash/flatten';
@@ -48,7 +48,6 @@ import PropTypes from 'prop-types';
 import { useModalState, CustomFormModalPage, PageContentNarrow, ConfirmationDialog, PageContentFull, InfoDialog } from '@commercetools-frontend/application-components';
 import _JSON$stringify from '@babel/runtime-corejs3/core-js-stable/json/stringify';
 import { useApplicationContext, ApplicationContext, withApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { GtmContext, useFeatureToggle, useAdapterStatus } from '@commercetools-frontend/application-shell';
 import { useQuery, useApolloClient } from '@apollo/client/react';
 import _lastIndexOfInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/last-index-of';
 import { graphql } from 'msw';
@@ -56,11 +55,11 @@ import get from 'lodash/get';
 import { useFormikContext, Field, getIn, FastField, Formik } from 'formik';
 import _Date$now from '@babel/runtime-corejs3/core-js-stable/date/now';
 import _setTimeout from '@babel/runtime-corejs3/core-js-stable/set-timeout';
+import { useFeatureToggle, useAdapterStatus } from '@commercetools-frontend/application-shell';
 import debounce from 'debounce-promise';
 import pick from 'lodash/pick';
 import { useQuery as useQuery$1 } from '@apollo/client/react/hooks';
 import moment$1 from 'moment';
-import _startsWithInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
 import classnames from 'classnames';
 import 'react-required-if';
 import { withThemeContext, useTheme } from '@commercetools-uikit/design-system';
@@ -116,8 +115,6 @@ import compact from 'lodash/compact';
 import _Set from '@babel/runtime-corejs3/core-js-stable/set';
 import '@babel/runtime-corejs3/helpers/get';
 import _spliceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/splice';
-import _URL from '@babel/runtime-corejs3/core-js-stable/url';
-import { matchPath } from 'react-router-dom';
 
 const QUERY_MAX_LIMIT = 500;
 const SHOW_TOOLTIP_CHARS_COUNT = 40;
@@ -129,28 +126,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
@@ -2133,8 +2108,6 @@ const injectStorage = options => WrappedComponent => {
   return WithStorage;
 };
 
-var useTracking = (() => useContext(GtmContext));
-
 /**
  * @returns function with the following parameters
  * - {LocalizedStrings} localizedStrings - an array of graphql LocalizedString,
@@ -2191,7 +2164,7 @@ const filterStoresOutdatedDanglingProductSelections = storesQueryResult => {
     })
   };
 };
-const createQueryVariables$8 = ownProps => {
+const createQueryVariables$9 = ownProps => {
   var _context;
   return _objectSpread$1h(_objectSpread$1h({
     limit: ownProps.limit,
@@ -2207,7 +2180,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(props),
@@ -2444,10 +2417,7 @@ var messages$M = defineMessages({
 function ownKeys$1f(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$1f(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1f(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 const LinkToProfile = props => {
-  const _useTrackingShared = useTrackingShared(),
-    trackClickOnInfoNotification = _useTrackingShared.trackClickOnInfoNotification;
   return jsx(Link, {
-    onClick: trackClickOnInfoNotification,
     to: "/account/profile",
     children: props.children
   });
@@ -2485,45 +2455,8 @@ const NotificationText = () => jsxs(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 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 = useShowNotification({
     domain: DOMAINS.SIDE,
     kind: 'info'
@@ -2534,7 +2467,7 @@ const useRoleNotification = _ref => {
       notification({
         text: jsx(NotificationText, {})
       }, {
-        onDismiss: () => forwardHandler(trackClickCloseInfoNotification(), dismissNotification())
+        onDismiss: () => dismissNotification()
       });
     }
   };
@@ -2547,9 +2480,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
@@ -2562,7 +2492,6 @@ const useRoleNotificationEffect = () => {
     onDismiss: scheduleReminder
   });
   const isFirstTimeUser = !hasChosenReminderRef.current;
-  const openBusinessRoleNotification = () => forwardHandler(trackShowInfoNotification(), roleNotification());
   useEffect(() => {
     /*
     If the user does not have a business role,
@@ -2572,11 +2501,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) {
@@ -2814,8 +2743,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(ownProps)
@@ -2827,7 +2756,7 @@ const emptyProductSelections = {
   results: []
 };
 const useProductSelectionsFetcher = props => {
-  const queryVariables = createQueryVariables$7(props);
+  const queryVariables = createQueryVariables$8(props);
   const _useQuery = useQuery$1(FetchProductSelections, {
       context: {
         target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
@@ -2983,41 +2912,11 @@ var commonPickerMessages = 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(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context2 = ownKeys$1c(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys$1c(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(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(name).call(name, inputValue) ? trackingEvents$4.selectChannelName : _startsWithInstanceProperty(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,
@@ -3083,7 +2982,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];
@@ -3466,7 +3365,6 @@ let SearchInput = /*#__PURE__*/function (_Component) {
     value: function render() {
       return jsx("div", {
         className: classnames(this.props.blockClassName, styles$h.block),
-        "data-track-component": "Search",
         children: jsxs("div", {
           className: classnames(this.props.containerClassName, styles$h.container),
           children: [jsx("div", {
@@ -3483,8 +3381,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,
@@ -3508,8 +3404,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: jsx(SearchIcon, {
@@ -3739,9 +3633,7 @@ Option$2.displayName = 'Option';
 
 function ownKeys$18(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$18(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$18(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-const useHandlers = (onChange, getTrackingEvent) => {
-  const _useTracking = useTracking(),
-    track = _useTracking.track;
+const useHandlers = onChange => {
   const _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     inputValue = _useState2[0],
@@ -3751,25 +3643,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];
 };
 
@@ -3884,30 +3764,11 @@ var messages$H = 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 = () => jsx(SearchIcon, {
   color: "primary"
 });
 DropdownIndicator$1.displayName = 'DropdownIndicator';
-const getTrackingEvent$3 = (inputValue, selectedValue) => {
-  const id = selectedValue.value,
-    name = selectedValue.label;
-  const trackingEvent = _startsWithInstanceProperty(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,
@@ -3957,7 +3818,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];
@@ -4018,38 +3879,8 @@ var messages$G = 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(name).call(name, inputValue) ? trackingEvents$2.selectStateName : _startsWithInstanceProperty(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,
@@ -4106,7 +3937,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];
@@ -6244,37 +6075,12 @@ var messages$D = 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 = () => jsx(SearchIcon, {
   color: "primary"
 });
 DropdownIndicator.displayName = 'DropdownIndicator';
-const getTrackingEvent$1 = (inputValue, selectedValue) => {
-  const id = selectedValue.value,
-    key = selectedValue.key,
-    name = selectedValue.name;
-  const trackingEvent = _startsWithInstanceProperty(name).call(name, inputValue) ? trackingEvents$1.selectProductName : _startsWithInstanceProperty(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,
@@ -6332,7 +6138,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];
@@ -6745,7 +6551,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 = useMemo(() => props.value || [undefined], [props.value]);
@@ -6804,7 +6610,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(_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 jsxs(Fragment, {
     children: [jsx(AccessibleHidden, {
@@ -6829,7 +6635,7 @@ function CustomInputSet(props) {
               alignItems: areButtonsTopAligned ? 'flex-start' : 'center',
               children: [jsx(CustomFieldInput, {
                 name: fieldName,
-                fieldDefinition: itemFieldDefintion,
+                fieldDefinition: itemFieldDefinition,
                 isDisabled: props.isDisabled,
                 isReadOnly: props.isReadOnly,
                 onBlur: props.onBlur,
@@ -6856,7 +6662,6 @@ function CustomInputSet(props) {
     })]
   });
 }
-CustomInputSet.displayName = 'CustomInputSet';
 
 var messages$C = defineMessages({
   referencedProductType: {
@@ -7315,7 +7120,6 @@ function ProductAttributes(props) {
     inputValuesConverter: convertInputValue
   });
 }
-ProductAttributes.displayName = 'ProductAttributes';
 
 const useFieldDefintion = attributeDefinition => useMemo(() => attributeDefinitionToFieldDefinition(attributeDefinition), [attributeDefinition]);
 function ProductAttributeInput(props) {
@@ -7664,30 +7468,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__*/memo(props => {
-  const InputComponent = getInputComponent(props.fieldDefinition);
+  const InputComponent = 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 jsx(InputComponent, {
     name: props.name,
@@ -7846,6 +7643,11 @@ var pickerMessages = 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'
   }
 });
 
@@ -7878,6 +7680,10 @@ function ProductSelectionBasicSelectDropdown(props) {
     dataLocale = _useApplicationContex.dataLocale;
   if (productSelectionsFetcher.isLoading) return jsx(CenteredLoadingSpinner, {});
   const productSelections = (_productSelectionsFet = (_productSelectionsFet2 = productSelectionsFetcher.productSelections) === null || _productSelectionsFet2 === void 0 ? void 0 : _productSelectionsFet2.results) !== null && _productSelectionsFet !== void 0 ? _productSelectionsFet : [];
+  const filteredProductSelections = _filterInstanceProperty(productSelections).call(productSelections, ps => {
+    var _context;
+    return !_includesInstanceProperty(_context = props.excludedProductSelectionIds).call(_context, ps.id);
+  });
   const onOptionClick = event => {
     const productSelectionId = event.target.value;
     const currentProductSelection = _findInstanceProperty(productSelections).call(productSelections, productSelection => productSelection.id === productSelectionId);
@@ -7892,12 +7698,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
   });
 }
@@ -7905,6 +7717,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(allProductSelectionOptions).call(allProductSelectionOptions, ps => currentlySelectedProductSelections === null || currentlySelectedProductSelections === void 0 ? void 0 : _includesInstanceProperty(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(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 = useIntl();
@@ -7922,6 +7756,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(productSelections).call(productSelections, ps => {
+    var _context;
+    return !_includesInstanceProperty(_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;
@@ -7929,7 +7767,7 @@ function ProductSelectionsAsyncSelectDropdown(props) {
     props.onChange(currentProductSelection);
   };
   const allProductSelectionOptions = useMemo(() => {
-    return _mapInstanceProperty(productSelections).call(productSelections, productSelection => {
+    return _mapInstanceProperty(filteredProductSelections).call(filteredProductSelections, productSelection => {
       const localizedName = formatLocalizedString(productSelection, {
         key: 'name',
         locale: dataLocale,
@@ -7942,17 +7780,26 @@ function ProductSelectionsAsyncSelectDropdown(props) {
         key: productSelection.key
       };
     });
-  }, [dataLocale, projectLanguages, productSelections]);
+  }, [dataLocale, projectLanguages, filteredProductSelections]);
   const getDefaultOptions = () => {
-    return _sliceInstanceProperty(allProductSelectionOptions).call(allProductSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    return [{
+      options: _sliceInstanceProperty(allProductSelectionOptions).call(allProductSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT)
+    }, {
+      options: emptyStoreOption$1(intl)
+    }];
   };
   const handleLoadOptions = async searchTerm => {
     const productSelectionOptions = allProductSelectionOptions;
     const filteredOptions = _filterInstanceProperty(productSelectionOptions).call(productSelectionOptions, productSelection => {
-      var _context, _context2;
-      return _includesInstanceProperty(_context = productSelection.label.toLowerCase()).call(_context, searchTerm.toLowerCase()) || productSelection.key && _includesInstanceProperty(_context2 = productSelection.key.toLowerCase()).call(_context2, searchTerm.toLowerCase());
+      var _context2, _context3;
+      return _includesInstanceProperty(_context2 = productSelection.label.toLowerCase()).call(_context2, searchTerm.toLowerCase()) || productSelection.key && _includesInstanceProperty(_context3 = productSelection.key.toLowerCase()).call(_context3, searchTerm.toLowerCase());
     });
-    return searchTerm ? _sliceInstanceProperty(filteredOptions).call(filteredOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT) : _sliceInstanceProperty(productSelectionOptions).call(productSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    const finalOptions = searchTerm ? _sliceInstanceProperty(filteredOptions).call(filteredOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT) : _sliceInstanceProperty(productSelectionOptions).call(productSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    return [{
+      options: finalOptions
+    }, {
+      options: emptyStoreOption$1(intl)
+    }];
   };
   if (productSelectionsFetcher.isLoading) return jsx(CenteredLoadingSpinner, {});
   return jsx(AsyncSelectField, {
@@ -7963,22 +7810,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(_context = "".concat(predicateField, " in (")).call(_context, _mapInstanceProperty(productSelections).call(productSelections, ps => "\"".concat(ps, "\"")).join(', '), ")"),
+    limit: 500
+  };
+};
+const useProductSelectionsByFieldFetcher = (productSelections, predicateField) => {
+  var _productSelectionsQue, _productSelectionsQue2;
+  const productSelectionList = _Array$isArray(productSelections) ? productSelections : [productSelections];
+  const productSelectionsQuery = useQuery(ProductSelectionsPickerFetcher$1, {
+    context: {
+      target: 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(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(_ref => {
+  let _ref$productSelection = _ref.productSelections,
+    productSelections = _ref$productSelection === void 0 ? [] : _ref$productSelection,
+    dataLocale = _ref.dataLocale,
+    projectLanguages = _ref.projectLanguages,
+    renderSelectInputOptionValuesByField = _ref.renderSelectInputOptionValuesByField;
   return _mapInstanceProperty(productSelections).call(productSelections, productSelection => ({
-    value: productSelection.id,
+    value: renderSelectInputOptionValuesByField === 'key' ? productSelection.key : productSelection.id,
     label: formatLocalizedString(productSelection, {
       key: 'name',
       locale: dataLocale,
@@ -7987,9 +7872,22 @@ const mapProductSelectionsToOptions = memoize(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(searchText).call(searchText, searchText));
   const idQuery = isUUID(sanitizedSearchText) && "id = \"".concat(sanitizedSearchText, "\"");
   const keyQuery = "key = \"".concat(sanitizedSearchText, "\"");
@@ -7999,6 +7897,7 @@ const createQueryVariables$6 = _ref => {
   };
 };
 function ProductSelectionsSearchSelectDropdown(props) {
+  var _context3;
   const intl = useIntl();
   const _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -8011,6 +7910,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.query({
@@ -8026,8 +7926,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(matchedProductSelections).call(matchedProductSelections, convertProductSelectionFromGraphQl);
-    setProductSelectionResults(updatedProductSelections);
-    return mapProductSelectionsToOptions(updatedProductSelections, dataLocale, projectLanguages);
+    const filteredProductSelections = _filterInstanceProperty(updatedProductSelections).call(updatedProductSelections, ps => {
+      var _context2;
+      return !_includesInstanceProperty(_context2 = props.excludedProductSelectionIds).call(_context2, ps.id);
+    });
+    setProductSelectionResults(filteredProductSelections);
+    return mapProductSelectionsToOptions({
+      productSelections: filteredProductSelections,
+      dataLocale,
+      projectLanguages,
+      renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
+    });
   };
   const loadOptionsDebounced = debounce(handleLoadOptions, 500);
   const onOptionClick = event => {
@@ -8036,33 +7945,56 @@ function ProductSelectionsSearchSelectDropdown(props) {
     const currentProductSelection = _findInstanceProperty(productionSelectionResults).call(productionSelectionResults, productSelection => productSelection.id === productSelectionId);
     props.onChange(currentProductSelection);
   };
+  if (productSelectionsByFieldFetcher.isLoading) return jsx(CenteredLoadingSpinner, {});
   return jsx(SearchSelectField, {
     id: props.id,
     name: props.name,
     title: props.title,
+    value: getValueFromOptions$2({
+      currentlySelectedProductSelections: props.value,
+      productSelectionFieldOptions: mapProductSelectionsToOptions({
+        productSelections: _mapInstanceProperty(_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(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$N(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$N(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-const components = {
-  // eslint-disable-next-line react/display-name
-  Option: optionInnerProps => jsx(CustomSelectInputOption, {
-    optionType: "double-property",
-    optionInnerProps: optionInnerProps
-  })
-};
 function ProductSelectionsPicker(props) {
   const productSelectionsTotalFetcher = useProductSelectionsTotalFetcher();
+  const components = useMemo(() => {
+    return {
+      Option: optionInnerProps => {
+        if (optionInnerProps.isDisabled) {
+          return jsx(SelectInput.Option, _objectSpread$N({}, optionInnerProps));
+        }
+        return jsx(CustomSelectInputOption, {
+          optionType: props.optionType,
+          optionInnerProps: optionInnerProps
+        });
+      }
+    };
+  }, [props.optionType]);
   if (productSelectionsTotalFetcher.isLoading) return jsx(CenteredLoadingSpinner, {});
   const CustomProductSelectionsPicker = productSelectionsTotalFetcher.total <= props.lowerProductSelectionsLimit ? ProductSelectionBasicSelectDropdown : productSelectionsTotalFetcher.total <= props.upperProductSelectionsLimit ? ProductSelectionsAsyncSelectDropdown : ProductSelectionsSearchSelectDropdown;
   return jsx(Spacings.Stack, {
@@ -8078,7 +8010,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;
@@ -8209,43 +8147,9 @@ var messages$y = 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(name).call(name, inputValue) ? selectCustomerGroupName : _startsWithInstanceProperty(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,
@@ -8308,7 +8212,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];
@@ -9705,11 +9609,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(_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(_businessUnit$inherit).call(_businessUnit$inherit, inheritedAssociate => inheritedAssociate === null || inheritedAssociate === void 0 ? void 0 : inheritedAssociate.customer);
   const overwrittenOnExplicit = intersectionBy(associates, inheritedAssociates, 'customer.id') || [];
   const overwrittenOnInherited = intersectionBy(inheritedAssociates, associates, 'customer.id') || [];
   const onlyExplicit = differenceBy(associates, inheritedAssociates, 'customer.id') || [];
@@ -9810,10 +9712,10 @@ var messages$r = defineMessages({
 function ownKeys$A(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context3 = ownKeys$A(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys$A(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(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 = useIntl();
   const businessUnitsAssociateRolesFeatureEnabled = useFeatureToggle(ENABLE_BUSINESS_UNITS_ASSOCIATE_ROLES);
-  const totalAssociates = (_props$values = _valuesInstanceProperty(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(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(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 = usePaginationState({
       perPage: 20
@@ -9828,8 +9730,8 @@ const BusinessUnitAssociatesListView = props => {
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
   const associates = useMemo(() => {
-    var _props$values2, _context, _context2;
-    return businessUnitsAssociateRolesFeatureEnabled ? mergeAssociates(_valuesInstanceProperty(props)) : (_props$values2 = _valuesInstanceProperty(props)) === null || _props$values2 === void 0 ? void 0 : _mapInstanceProperty(_context = _filterInstanceProperty(_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(props)) : (_props$values3 = _valuesInstanceProperty(props)) === null || _props$values3 === void 0 ? void 0 : _mapInstanceProperty(_context = _filterInstanceProperty(_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(props), businessUnitsAssociateRolesFeatureEnabled]);
@@ -9953,7 +9855,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,
@@ -12231,9 +12133,6 @@ var messages$7 = defineMessages({
 function ownKeys$f(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$f(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$f(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 const MissingValueField = props => jsx(CheckboxInput, {
-  "data-track-component": "MissingValue",
-  "data-track-event": "change",
-  "data-track-label": props.isChecked,
   name: "missing-value",
   isChecked: props.isChecked,
   onChange: props.onChange,
@@ -12529,6 +12428,7 @@ const SelectableFieldSearchInput = props => {
   return jsx("div", {
     className: styles$4.container,
     children: jsx(SelectableSearchInput, {
+      menuHorizontalConstraint: 5,
       options: props.options,
       value: {
         text: searchText,
@@ -14107,30 +14007,6 @@ const getTimeZoneLabel = memoize((selectedTimeZone, timeZones) => {
   return _concatInstanceProperty(_context4 = "(GMT ".concat(timeZoneData.offset, ") ")).call(_context4, timeZoneData.name);
 });
 
-function findButtonLinkPathname(element) {
-  if (element.tagName === 'A') {
-    var _context;
-    const linkUrl = new _URL(element.href);
-    return _concatInstanceProperty(_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 = !!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(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 function withPendingRequests() {
@@ -14150,4 +14026,4 @@ function withPendingRequests() {
 
 var CategorySearchPickerOptionFragment = { kind: "Document", definitions: [{ kind: "FragmentDefinition", name: { kind: "Name", value: "CategorySearchPickerOptionFragment" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CategorySearch" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "externalId" }, 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: "slugAllLocales" }, 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: "parent" }, 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: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "ancestors" }, 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: 685, source: { body: "query SearchCategoryReference($locale: Locale!, $text: String!) {\n  categories: categoryAutocomplete(locale: $locale, text: $text) {\n    results {\n      ...CategorySearchPickerOptionFragment\n    }\n  }\n}\n\nquery FetchCategoriesByIds($where: String!) {\n  categories(where: $where) {\n    results {\n      id\n      nameAllLocales {\n        locale\n        value\n      }\n    }\n  }\n}\n\nfragment CategorySearchPickerOptionFragment on CategorySearch {\n  id\n  externalId\n  nameAllLocales {\n    locale\n    value\n  }\n  slugAllLocales {\n    locale\n    value\n  }\n  parent {\n    nameAllLocales {\n      locale\n      value\n    }\n  }\n  ancestors {\n    nameAllLocales {\n      locale\n      value\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 
-export { booleanField as BooleanField, BusinessUnitAssociatesList, BusinessUnitAssociatesListView, BusinessUnitSelectField, BusinessUnitSelectInput, Button, ButtonCancel, ButtonConfirm, ButtonSave, CartDiscountReferenceSearch, CategoryReferenceSearch, CategorySearchPickerOptionFragment, CenteredLoadingSpinner, ChannelPickerInput, CountriesPicker, customFieldDefinitionsConnector as CustomFieldDefinitionsConnector, customFieldTypeDefinitionsConnector as CustomFieldTypeDefinitionsConnector, CustomFields, CustomFieldsErrorTextNotification, CustomerGroupPickerInput, DefaultPageSizes, Divider, EMAIL_REGEX, FileInput, FormattedDateTime$1 as FormattedDateTime, LabelRange, MissingValueField, MultiValueSearchInput, numericFormatInput as NumericFormatInput, PRECISION_TYPES, pimIndexerProvider as PimIndexerProvider, ProductAttributeInput, ProductAttributes, ProductPickerInput, ProductSelectionsPicker as ProductSelectionPicker, RequestCache, RequiredIndicator, ScrollToFieldError, searchInput as SearchInput, SelectableFieldSearchInput, StoreSelectField, StoreSelectInput, ThrottledField, VALIDATOR_INTEGER, VALIDATOR_NUMERIC, VALIDATOR_REQUIRED, WithPimIndexer, allowedProperties, and, attributesMapToNameValuePairs, base64ToString, messages$8 as booleanMessages, buildSearchQuery, messages$v as businessRoleMessages, businessRoleKeys as businessRoles, capitalizeFirst, clone, coerceToInteger, computedProperties, convertApolloNetworkStatusToLoadingState, convertApolloQueryDataToConnectorData, convertProductSelectionFromGraphQl, convertRatioToPercentage, createGraphQlUpdateActions, createNextSortDefinition, createReducer, createResourceReducer, handlers$4 as customFieldDefinitionsMockHanders, customFields as customFieldsTransformer, dateTransformer$1 as dateTransformer, exact, exists, extractErrorFromGraphQlResponse, filterCustomTypeUpdateActionValues, filterDataAttributes, filterEmptyValues, formatCustomField, formatCustomerAddress, formatCustomerName, formatDateRangeValue, formatDateTime$1 as formatDateTime, formatDiscount, formatMoney$1 as formatMoney, formatMoneyRangeValue, formatMoneyValue, formatPercentage, formatAttribute as formatProductAttribute, getAncestors, getAttributeValueByType, getAttributeValueType, getBulkNotification, getCategoryLevel, getCountsFromBulkSummary, getDiscountValue, getDisplayName, getFractionedAmount, getIndexesOfInvalidValues, getMinimumPricesByCurrencyCode, getNetUnitPrice, getPathName, getPrefixSearchBounds, getPriceChannelName, getReferenceTypeId, getSelectedPrice, getTimeZoneId, getTimeZoneLabel, getTypeNameOfType, graphqlCategoryLevelTransformer, dateTransformer as graphqlDateTransformer, missingLocaleTransformer as graphqlMissingLocaleTransformer, missingTransformer as graphqlMissingTransformer, numberTransformer as graphqlNumberTransformer, graphqlQueryBuilder, referenceTransformer as graphqlReferenceTransformer, textTransformer as graphqlTextTransformer, hasInvalidInputError, hasSemanticError, injectCustomerGroupsPlatformLimits, injectCustomersPlatformLimits, injectDataTablePaginationState, injectModalState$1 as injectModalState, injectNotifications, injectPimIndexer, injectShippingMethodsPlatformLimits, injectStorage, injectTaxCategoriesPlatformLimits, injectModalState as injectToggleState, injectZonesPlatformLimits, isEmptyFilter as isEmpty, isEmptyValue, isUUID, isValidISODate, isValidISODateTime, isValidISOTime, keepDisplayName, mapTimeZonesToOptions, minusify, messages$7 as missingValueMessages, nameValuePairsToMap, normalizeProductSettings, not, omitDeep, omitSetsOfSets, or, commonPickerMessages as pickerMessages, handlers as platformLimitsMockHandlers, handlers$5 as productSelectionsFetcherMockHandler, handlers$6 as productSelectionsTotalFetcherMockHandler, range, reorderArrayItems, resolveStatusType, safelyAddFallback, sanitize, searchCategories, messages$J as searchInputMessages, setDisplayName, setToArray, shallowEqual, shouldUpdateAttributeInput, slugify, sortDataByIdsArray, sortRequiresLanguage, splitVariantAttributesByConstraint, handlers$7 as storesListConnectorMockHandlers, stringToBase64, swapArrayItems, trackMenuClick, transformAllToProperNounCase, transformCustomFieldsRawToCustomFields, transformLocalizedFieldsForCategory, truncate, unique, uniqueObjects, handlers$2 as useBusinessUnitsListFetcherMockHandler, useCachedCategoryOptions, useCustomerGroupsPlatformLimits, useCustomersPlatformLimits, useDebouncedPromiseCallback, useFormatLocalizedFieldToString, useLocalizedKeyFallback, usePendingRequests, usePersistedTableConfiguration, usePimIndexer, usePrevious, useProductSelectionsFetcher, useProductSelectionsTotalFetcher, useRoleNotificationEffect, useShippingMethodsLimits as useShippingMethodsPlatformLimits, useStorage, useStoreKeysInDataFences, useStoresListFetcher, useTaxCategoriesLimits as useTaxCategoriesPlatformLimits, handlers$1 as useTotalNumberOfBusinessUnitsFetcherHandlers, useTotalNumberOfStoresFetcher, handlers$3 as useTotalNumberOfStoresFetcherHandlers, useTracking, useTracking as useTrackingContext, useTrackingShared, validateFilter$2 as validateCustomField, validations as validateCustomFields, validateFilter$1 as validateDate, validateMultiOptionEnum, validateFilter as validateNumber, validateSingleOptionEnum, validateText, validatedInput, messages$O as validationMessages, withPendingRequests, withProps, withRedirectTo, withoutEmptyErrorsByField, wrapDisplayName };
+export { booleanField as BooleanField, BusinessUnitAssociatesList, BusinessUnitAssociatesListView, BusinessUnitSelectField, BusinessUnitSelectInput, Button, ButtonCancel, ButtonConfirm, ButtonSave, CartDiscountReferenceSearch, CategoryReferenceSearch, CategorySearchPickerOptionFragment, CenteredLoadingSpinner, ChannelPickerInput, CountriesPicker, customFieldDefinitionsConnector as CustomFieldDefinitionsConnector, customFieldTypeDefinitionsConnector as CustomFieldTypeDefinitionsConnector, CustomFields, CustomFieldsErrorTextNotification, CustomerGroupPickerInput, DefaultPageSizes, Divider, EMAIL_REGEX, FileInput, FormattedDateTime$1 as FormattedDateTime, LabelRange, MissingValueField, MultiValueSearchInput, numericFormatInput as NumericFormatInput, PRECISION_TYPES, pimIndexerProvider as PimIndexerProvider, ProductAttributeInput, ProductAttributes, ProductPickerInput, ProductSelectionsPicker as ProductSelectionPicker, RequestCache, RequiredIndicator, ScrollToFieldError, searchInput as SearchInput, SelectableFieldSearchInput, StoreSelectField, StoreSelectInput, ThrottledField, VALIDATOR_INTEGER, VALIDATOR_NUMERIC, VALIDATOR_REQUIRED, WithPimIndexer, allowedProperties, and, attributesMapToNameValuePairs, base64ToString, messages$8 as booleanMessages, buildSearchQuery, messages$v as businessRoleMessages, businessRoleKeys as businessRoles, capitalizeFirst, clone, coerceToInteger, computedProperties, convertApolloNetworkStatusToLoadingState, convertApolloQueryDataToConnectorData, convertProductSelectionFromGraphQl, convertRatioToPercentage, createGraphQlUpdateActions, createNextSortDefinition, createReducer, createResourceReducer, handlers$4 as customFieldDefinitionsMockHanders, customFields as customFieldsTransformer, dateTransformer$1 as dateTransformer, exact, exists, extractErrorFromGraphQlResponse, filterCustomTypeUpdateActionValues, filterDataAttributes, filterEmptyValues, formatCustomField, formatCustomerAddress, formatCustomerName, formatDateRangeValue, formatDateTime$1 as formatDateTime, formatDiscount, formatMoney$1 as formatMoney, formatMoneyRangeValue, formatMoneyValue, formatPercentage, formatAttribute as formatProductAttribute, getAncestors, getAttributeValueByType, getAttributeValueType, getBulkNotification, getCategoryLevel, getCountsFromBulkSummary, getDiscountValue, getDisplayName, getFractionedAmount, getIndexesOfInvalidValues, getMinimumPricesByCurrencyCode, getNetUnitPrice, getPathName, getPrefixSearchBounds, getPriceChannelName, getReferenceTypeId, getSelectedPrice, getTimeZoneId, getTimeZoneLabel, getTypeNameOfType, graphqlCategoryLevelTransformer, dateTransformer as graphqlDateTransformer, missingLocaleTransformer as graphqlMissingLocaleTransformer, missingTransformer as graphqlMissingTransformer, numberTransformer as graphqlNumberTransformer, graphqlQueryBuilder, referenceTransformer as graphqlReferenceTransformer, textTransformer as graphqlTextTransformer, hasInvalidInputError, hasSemanticError, injectCustomerGroupsPlatformLimits, injectCustomersPlatformLimits, injectDataTablePaginationState, injectModalState$1 as injectModalState, injectNotifications, injectPimIndexer, injectShippingMethodsPlatformLimits, injectStorage, injectTaxCategoriesPlatformLimits, injectModalState as injectToggleState, injectZonesPlatformLimits, isEmptyFilter as isEmpty, isEmptyValue, isUUID, isValidISODate, isValidISODateTime, isValidISOTime, keepDisplayName, mapTimeZonesToOptions, minusify, messages$7 as missingValueMessages, nameValuePairsToMap, normalizeProductSettings, not, omitDeep, omitSetsOfSets, or, commonPickerMessages as pickerMessages, handlers as platformLimitsMockHandlers, handlers$5 as productSelectionsFetcherMockHandler, handlers$6 as productSelectionsTotalFetcherMockHandler, range, reorderArrayItems, resolveStatusType, safelyAddFallback, sanitize, searchCategories, messages$J as searchInputMessages, setDisplayName, setToArray, shallowEqual, shouldUpdateAttributeInput, slugify, sortDataByIdsArray, sortRequiresLanguage, splitVariantAttributesByConstraint, handlers$7 as storesListConnectorMockHandlers, stringToBase64, swapArrayItems, transformAllToProperNounCase, transformCustomFieldsRawToCustomFields, transformLocalizedFieldsForCategory, truncate, unique, uniqueObjects, handlers$2 as useBusinessUnitsListFetcherMockHandler, useCachedCategoryOptions, useCustomerGroupsPlatformLimits, useCustomersPlatformLimits, useDebouncedPromiseCallback, useFormatLocalizedFieldToString, useLocalizedKeyFallback, usePendingRequests, usePersistedTableConfiguration, usePimIndexer, usePrevious, useProductSelectionsFetcher, useProductSelectionsTotalFetcher, useRoleNotificationEffect, useShippingMethodsLimits as useShippingMethodsPlatformLimits, useStorage, useStoreKeysInDataFences, useStoresListFetcher, useTaxCategoriesLimits as useTaxCategoriesPlatformLimits, handlers$1 as useTotalNumberOfBusinessUnitsFetcherHandlers, useTotalNumberOfStoresFetcher, handlers$3 as useTotalNumberOfStoresFetcherHandlers, validateFilter$2 as validateCustomField, validations as validateCustomFields, validateFilter$1 as validateDate, validateMultiOptionEnum, validateFilter as validateNumber, validateSingleOptionEnum, validateText, validatedInput, messages$O as validationMessages, withPendingRequests, withProps, withRedirectTo, withoutEmptyErrorsByField, wrapDisplayName };