@commercetools-frontend/application-shell 21.23.9 → 21.24.0

package/dist/use-is-served-by-proxy-499bfa16.esm.js

@@ -0,0 +1,39 @@
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+
+/**
+ * NOTE
+ *    This module wraps `replace` and `reload` from the window's location.
+ *    This mainly helps in tests as we often expect that a reload or
+ *    replace on the location happened.
+ *    In previous code we could just overwrite the properties by:
+ *    `window.location.replace = jest.fn()`
+ *    This will fail in never versions of JSDOM (e.g. v16) as these
+ *    properties are not writable anymore. JSDOM follows the browser standards
+ *    which also state that these should not be writable.
+ *    There are different options to solve this:
+ *      1. Extract those functions as a module an use `jest.mock` to mock them under test
+ *      2. Use `Object.defineProperty` to overwrite the property
+ *         - The community opinion is that this is not preferred and does
+ *           not work in all cases
+ *      3. Delete the property via `delete window.location` to re-create it after
+ *         - This is quite repetiive and noisy in tests and can also remote
+ *           other properties from under location
+ *    Given option 2. and 3. being quite noisy on tests and against working with
+ *    the stndards of the browser we will use 1. Here we only utilise the module
+ *    mocking system of Jest and no other trickery.
+ * */
+const replace = url => window.location.replace(url);
+
+const reload = () => window.location.reload();
+
+const location = {
+  replace,
+  reload
+};
+
+const useIsServedByProxy = () => {
+  const servedByProxy = useApplicationContext(context => context.environment.servedByProxy);
+  return servedByProxy;
+};
+
+export { location as l, useIsServedByProxy as u };

package/dist/use-is-served-by-proxy-51e76976.cjs.prod.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+
+/**
+ * NOTE
+ *    This module wraps `replace` and `reload` from the window's location.
+ *    This mainly helps in tests as we often expect that a reload or
+ *    replace on the location happened.
+ *    In previous code we could just overwrite the properties by:
+ *    `window.location.replace = jest.fn()`
+ *    This will fail in never versions of JSDOM (e.g. v16) as these
+ *    properties are not writable anymore. JSDOM follows the browser standards
+ *    which also state that these should not be writable.
+ *    There are different options to solve this:
+ *      1. Extract those functions as a module an use `jest.mock` to mock them under test
+ *      2. Use `Object.defineProperty` to overwrite the property
+ *         - The community opinion is that this is not preferred and does
+ *           not work in all cases
+ *      3. Delete the property via `delete window.location` to re-create it after
+ *         - This is quite repetiive and noisy in tests and can also remote
+ *           other properties from under location
+ *    Given option 2. and 3. being quite noisy on tests and against working with
+ *    the stndards of the browser we will use 1. Here we only utilise the module
+ *    mocking system of Jest and no other trickery.
+ * */
+const replace = url => window.location.replace(url);
+
+const reload = () => window.location.reload();
+
+const location = {
+  replace,
+  reload
+};
+
+const useIsServedByProxy = () => {
+  const servedByProxy = applicationShellConnectors.useApplicationContext(context => context.environment.servedByProxy);
+  return servedByProxy;
+};
+
+exports.location = location;
+exports.useIsServedByProxy = useIsServedByProxy;

package/dist/{user-filled-41729d77.esm.js → user-filled-2dc4e79e.esm.js}

@@ -14,8 +14,6 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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; }
 
-var Icon = function Icon(props) {
-  return jsx(UserFilledIcon, _objectSpread({}, props));
-};
+const Icon = props => jsx(UserFilledIcon, _objectSpread({}, props));
 
 export { Icon as default };

package/dist/user-filled-2e6cb25e.cjs.dev.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var icons = require('@commercetools-uikit/icons');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+
+const Icon = props => jsxRuntime.jsx(icons.UserFilledIcon, _objectSpread({}, props));
+
+exports["default"] = Icon;

package/dist/user-filled-815b49a0.cjs.prod.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var icons = require('@commercetools-uikit/icons');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+
+const Icon = props => jsxRuntime.jsx(icons.UserFilledIcon, _objectSpread({}, props));
+
+exports["default"] = Icon;

package/dist/user-settings-menu-96de467a.cjs.prod.js

@@ -0,0 +1,496 @@
+'use strict';
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _styled = require('@emotion/styled/base');
+require('prop-types');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var react = require('react');
+var react$1 = require('@emotion/react');
+var reactBroadcast = require('@flopflip/react-broadcast');
+var Downshift = require('downshift');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var applicationComponents = require('@commercetools-frontend/application-components');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+var constants = require('@commercetools-frontend/constants');
+var sentry = require('@commercetools-frontend/sentry');
+var AccessibleHidden = require('@commercetools-uikit/accessible-hidden');
+var Avatar = require('@commercetools-uikit/avatar');
+var designSystem = require('@commercetools-uikit/design-system');
+var icons = require('@commercetools-uikit/icons');
+var Spacings = require('@commercetools-uikit/spacings');
+var Text = require('@commercetools-uikit/text');
+var constants$1 = require('./constants-e6409334.cjs.prod.js');
+var useApplicationsMenu = require('./use-applications-menu-7e438b2a.cjs.prod.js');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+require('@apollo/client');
+require('./index-e0ab178f.cjs.prod.js');
+require('./configure-apollo-d11de242.cjs.prod.js');
+require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+require('@babel/runtime-corejs3/core-js-stable/object/entries');
+require('@babel/runtime-corejs3/core-js-stable/reflect/has');
+require('@reduxjs/toolkit');
+require('lodash/mapValues');
+require('omit-empty-es');
+require('redux-thunk');
+require('@commercetools-frontend/notifications');
+require('@commercetools-frontend/sdk');
+require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+require('@commercetools-frontend/react-notifications');
+require('redux-logger');
+require('@babel/runtime-corejs3/core-js-stable/url');
+require('apollo-link-logger');
+require('@apollo/client/link/error');
+require('@commercetools-frontend/browser-history');
+require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+require('@babel/runtime-corejs3/core-js-stable/instance/some');
+require('@babel/runtime-corejs3/core-js-stable/object/values');
+require('@commercetools/http-user-agent');
+require('uuid');
+require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+require('@babel/runtime-corejs3/helpers/createClass');
+require('@babel/runtime-corejs3/helpers/classCallCheck');
+require('@babel/runtime-corejs3/helpers/assertThisInitialized');
+require('@babel/runtime-corejs3/helpers/inherits');
+require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+require('@babel/runtime-corejs3/helpers/wrapNativeSuper');
+require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+require('@apollo/client/link/retry');
+require('@commercetools-frontend/i18n');
+require('@commercetools-frontend/assets/images/logo.svg');
+require('@commercetools-uikit/flat-button');
+require('./use-is-served-by-proxy-51e76976.cjs.prod.js');
+require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
+require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+require('memoize-one');
+require('@commercetools-uikit/select-input');
+require('@apollo/client/react');
+require('@commercetools-frontend/assets/images/ct-logo.svg');
+require('@commercetools-uikit/loading-spinner');
+require('@commercetools-frontend/l10n');
+require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
+require('lodash/camelCase');
+require('@babel/runtime-corejs3/core-js-stable/array/from');
+require('@babel/runtime-corejs3/core-js-stable/instance/every');
+require('classnames');
+require('@commercetools-frontend/assets/images/diagonal-line.svg');
+require('@commercetools-frontend/permissions');
+require('@commercetools-uikit/icons/inline-svg');
+require('lodash/isNil');
+require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
+require('@babel/runtime-corejs3/core-js-stable/instance/flags');
+require('@flopflip/combine-adapters');
+require('@flopflip/http-adapter');
+require('@flopflip/launchdarkly-adapter');
+require('perfume.js');
+require('react-redux');
+require('lodash/upperFirst');
+require('./oidc-540a091a.cjs.prod.js');
+require('@commercetools-uikit/design-system/materials/resets.css');
+require('@commercetools-frontend/actions-global');
+require('@commercetools-frontend/application-config/ssr');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
+var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
+var AccessibleHidden__default = /*#__PURE__*/_interopDefault(AccessibleHidden);
+var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+
+var messages = reactIntl.defineMessages({
+  support: {
+    id: 'UserSettingsMenu.support',
+    description: 'The label for Support',
+    defaultMessage: 'Support'
+  },
+  logout: {
+    id: 'UserSettingsMenu.logout',
+    description: 'The label for logout option',
+    defaultMessage: 'Logout'
+  },
+  privacyPolicy: {
+    id: 'UserSettingsMenu.privacyPolicy',
+    description: 'The label for privacy policy option',
+    defaultMessage: 'Privacy Policy'
+  },
+  menuLabel: {
+    id: 'UserSettingsMenu.menuLabel',
+    description: 'The label describing the menu',
+    defaultMessage: 'User settings menu'
+  },
+  openMenuLabel: {
+    id: 'UserSettingsMenu.openMenuLabel',
+    description: 'The label when menu is closed and would be opened by a click',
+    defaultMessage: 'Open user settings menu'
+  },
+  closeMenuLabel: {
+    id: 'UserSettingsMenu.closeMenuLabel',
+    description: 'The label when menu is open and would be closed by a click',
+    defaultMessage: 'Close user settings menu'
+  }
+});
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+const MENU_LABEL_ID = 'user-menu-setting-menu-label';
+
+const UserAvatar = props => {
+  const _useState = react.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        isMouseOver = _useState2[0],
+        setIsMouseOver = _useState2[1];
+
+  const handleMouseOver = react.useCallback(() => {
+    setIsMouseOver(true);
+  }, []);
+  const handleMouseOut = react.useCallback(() => {
+    setIsMouseOver(false);
+  }, []);
+
+  const _useTheme = designSystem.useTheme(),
+        isNewTheme = _useTheme.isNewTheme,
+        themedValue = _useTheme.themedValue;
+
+  return jsxRuntime.jsx("div", {
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+      alignItems: "center",
+      children: [jsxRuntime.jsx(Avatar__default["default"], {
+        size: themedValue('s', 'm'),
+        gravatarHash: props.gravatarHash,
+        firstName: props.firstName,
+        lastName: props.lastName,
+        isHighlighted: isMouseOver
+      }), isNewTheme ? null : jsxRuntime.jsx(icons.CaretDownIcon, {
+        size: "small",
+        color: isMouseOver ? 'neutral60' : 'solid'
+      })]
+    })
+  });
+};
+
+UserAvatar.displayName = 'UserAvatar';
+
+function getIsFocusedElementInMenu() {
+  var _document$activeEleme;
+
+  return Boolean((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('data-user-settings-menu'));
+}
+
+const stateReducer = (state, changes) => {
+  var _ref3;
+
+  switch (changes.type) {
+    // So in case the user wants to navigate with the tab button
+    // we need to make sure that the menu does not close
+    case Downshift__default["default"].stateChangeTypes.blurButton:
+      return _objectSpread(_objectSpread({}, changes), {}, {
+        isOpen: (_ref3 = state.isOpen && getIsFocusedElementInMenu()) !== null && _ref3 !== void 0 ? _ref3 : false
+      });
+
+    default:
+      return changes;
+  }
+};
+
+const OptionalFeatureToggle = props => {
+  if (props.featureToggle) {
+    return jsxRuntime.jsx(reactBroadcast.ToggleFeature, {
+      flag: props.featureToggle,
+      children: props.children
+    });
+  }
+
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children
+  });
+};
+
+OptionalFeatureToggle.propTypes = {};
+
+const renderLabel = (menu, applicationLanguage) => {
+  var _context;
+
+  const localizedLabel = _findInstanceProperty__default["default"](_context = menu.labelAllLocales).call(_context, loc => _startsWithInstanceProperty__default["default"](applicationLanguage).call(applicationLanguage, loc.locale));
+
+  if (localizedLabel) return localizedLabel.value;
+  return constants.NO_VALUE_FALLBACK;
+};
+
+const MenuItem = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1al5ftg0"
+} )("width:100%;cursor:pointer;color:", designSystem.designTokens.colorSolid, ";:hover{background-color:", applicationComponents.designTokens.backgroundColorForUserMenuItemWhenHovered, ";}", props => props.hasDivider === true ? /*#__PURE__*/react$1.css("border-bottom:1px solid ", designSystem.designTokens.colorNeutral, ";margin:", applicationComponents.designTokens.marginForUserMenuItem, ";" + ("" ), "" ) : '', ";" + ("" ));
+
+const MenuItemLabel = props => {
+  if (props.isNewTheme) {
+    return jsxRuntime.jsx("div", {
+      css: /*#__PURE__*/react$1.css("padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing50, ";" + ("" ), "" ),
+      children: props.children
+    });
+  }
+
+  return jsxRuntime.jsx(Spacings__default["default"].Inset, {
+    scale: "s",
+    children: props.children
+  });
+};
+
+MenuItemLabel.propTypes = {};
+
+const UserSettingsAvatarContainer = props => {
+  if (props.isNewTheme) {
+    return jsxRuntime.jsx("div", {
+      css: /*#__PURE__*/react$1.css("padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing50, ";" + ("" ), "" ),
+      children: props.children
+    });
+  }
+
+  return jsxRuntime.jsx(Spacings__default["default"].Inset, {
+    scale: "xs",
+    children: props.children
+  });
+};
+
+UserSettingsAvatarContainer.propTypes = {};
+
+const getUserSettingsMenuStyles = isNewTheme => {
+  if (isNewTheme) {
+    return /*#__PURE__*/react$1.css("position:absolute;background:", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius2, ";box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.15);width:", designSystem.designTokens.constraint9, ";right:40px;top:calc(", constants$1.DIMENSIONS.header, " + ", designSystem.designTokens.spacing20, ");padding:0 0 ", designSystem.designTokens.spacing10, " 0;overflow:hidden;" + ("" ), "" );
+  }
+
+  return /*#__PURE__*/react$1.css("position:absolute;background:", designSystem.designTokens.colorSurface, ";border:1px ", designSystem.designTokens.colorPrimary40, " solid;border-radius:", designSystem.designTokens.borderRadius6, ";box-shadow:", designSystem.designTokens.shadow7, ";width:", designSystem.designTokens.constraint7, ";right:14px;top:calc(", constants$1.DIMENSIONS.header, " + ", designSystem.designTokens.spacing20, ");padding:", designSystem.designTokens.spacingXs, ";overflow:hidden;" + ("" ), "" );
+};
+
+var _ref2 = {
+  name: "4zleql",
+  styles: "display:block"
+} ;
+
+const getUserSettingsMenuItemLinkStyles = () => _ref2;
+
+const UserSettingsMenuBody = props => {
+  var _context2, _context3;
+
+  const _useTheme2 = designSystem.useTheme(),
+        isNewTheme = _useTheme2.isNewTheme,
+        themedValue = _useTheme2.themedValue; // Focus on a menu item when it's opened through keyboard
+
+
+  const menuElementRef = react.useRef(null);
+  react.useEffect(() => {
+    var _menuElementRef$curre;
+
+    (_menuElementRef$curre = menuElementRef.current) === null || _menuElementRef$curre === void 0 ? void 0 : _menuElementRef$curre.focus();
+  }, []);
+  const environment = applicationShellConnectors.useApplicationContext(context => context.environment);
+  const applicationsAppBarMenu = useApplicationsMenu.useApplicationsMenu('appBar', {
+    queryOptions: {
+      onError: sentry.reportErrorToSentry
+    },
+    environment
+  });
+  const accountMenuItems = applicationsAppBarMenu !== null && applicationsAppBarMenu !== void 0 ? applicationsAppBarMenu : [];
+  return jsxRuntime.jsx("div", {
+    onKeyDown: event => {
+      if (event.key === 'Esc' || event.key === 'Tab' && !getIsFocusedElementInMenu()) {
+        props.downshiftProps.closeMenu();
+      }
+    },
+    css: getUserSettingsMenuStyles(isNewTheme),
+    children: jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, props.downshiftProps.getMenuProps()), {}, {
+      children: [jsxRuntime.jsx(UserSettingsAvatarContainer, {
+        isNewTheme: isNewTheme,
+        children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+          scale: themedValue('xs', 'm'),
+          alignItems: "center",
+          children: [jsxRuntime.jsx(Avatar__default["default"], {
+            size: themedValue('s', 'm'),
+            firstName: props.firstName,
+            lastName: props.lastName,
+            gravatarHash: props.gravatarHash
+          }), isNewTheme ? jsxRuntime.jsxs("div", {
+            children: [jsxRuntime.jsx(Text__default["default"].Subheadline, {
+              as: "h4",
+              children: _trimInstanceProperty__default["default"](_context2 = [props.firstName, props.lastName].join(' ')).call(_context2)
+            }), jsxRuntime.jsx(Text__default["default"].Detail, {
+              truncate: true,
+              tone: "secondary",
+              children: props.email
+            })]
+          }) : jsxRuntime.jsxs("div", {
+            children: [jsxRuntime.jsx(Text__default["default"].Body, {
+              isBold: true,
+              children: _trimInstanceProperty__default["default"](_context3 = [props.firstName, props.lastName].join(' ')).call(_context3)
+            }), jsxRuntime.jsx(Text__default["default"].Body, {
+              truncate: true,
+              children: props.email
+            })]
+          })]
+        })
+      }), isNewTheme && accountMenuItems.length > 0 ? jsxRuntime.jsx(MenuItem, {
+        hasDivider: true,
+        isNewTheme: isNewTheme
+      }) : null, _mapInstanceProperty__default["default"](accountMenuItems).call(accountMenuItems, menu => {
+        var _menu$featureToggle;
+
+        return jsxRuntime.jsx(OptionalFeatureToggle, {
+          featureToggle: (_menu$featureToggle = menu.featureToggle) !== null && _menu$featureToggle !== void 0 ? _menu$featureToggle : undefined,
+          children: jsxRuntime.jsx(reactRouterDom.Link, {
+            css: getUserSettingsMenuItemLinkStyles(),
+            to: "/account/".concat(menu.uriPath),
+            onClick: () => props.downshiftProps.toggleMenu(),
+            "data-user-settings-menu": true,
+            ref: menuElementRef,
+            children: jsxRuntime.jsx(MenuItem, {
+              isNewTheme: isNewTheme,
+              children: jsxRuntime.jsx(MenuItemLabel, {
+                isNewTheme: isNewTheme,
+                children: jsxRuntime.jsx(Text__default["default"].Body, {
+                  children: renderLabel(menu, props.language)
+                })
+              })
+            })
+          })
+        }, menu.key);
+      }), jsxRuntime.jsx(MenuItem, {
+        hasDivider: true,
+        isNewTheme: isNewTheme
+      }), jsxRuntime.jsx("a", {
+        css: getUserSettingsMenuItemLinkStyles(),
+        href: "https://commercetools.com/privacy#suppliers",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: () => props.downshiftProps.toggleMenu(),
+        "data-user-settings-menu": true,
+        ref: !applicationsAppBarMenu ? menuElementRef : undefined,
+        children: jsxRuntime.jsx(MenuItem, {
+          isNewTheme: isNewTheme,
+          children: jsxRuntime.jsx(MenuItemLabel, {
+            isNewTheme: isNewTheme,
+            children: jsxRuntime.jsx(Text__default["default"].Body, {
+              intlMessage: messages.privacyPolicy
+            })
+          })
+        })
+      }), jsxRuntime.jsx("a", {
+        css: getUserSettingsMenuItemLinkStyles(),
+        href: constants.SUPPORT_PORTAL_URL,
+        rel: "noopener noreferrer",
+        target: "_blank",
+        "data-track-component": "Navigation-Support-links",
+        "data-track-event": "click",
+        "data-track-label": "support_textlink",
+        onClick: () => props.downshiftProps.toggleMenu(),
+        "data-user-settings-menu": true,
+        children: jsxRuntime.jsx(MenuItem, {
+          isNewTheme: isNewTheme,
+          children: jsxRuntime.jsx(MenuItemLabel, {
+            isNewTheme: isNewTheme,
+            children: jsxRuntime.jsx(Text__default["default"].Body, {
+              intlMessage: messages.support
+            })
+          })
+        })
+      }), jsxRuntime.jsx(MenuItem, {
+        hasDivider: true,
+        isNewTheme: isNewTheme
+      }), jsxRuntime.jsxs("a", {
+        css: getUserSettingsMenuItemLinkStyles() // NOTE: we want to redirect to a new page so that the
+        // server can remove things like cookie for access token.
+        ,
+        href: "/logout?reason=".concat(constants.LOGOUT_REASONS.USER),
+        "data-test": "logout-button",
+        "data-user-settings-menu": true,
+        children: [jsxRuntime.jsx(MenuItem, {
+          isNewTheme: isNewTheme,
+          children: jsxRuntime.jsx(MenuItemLabel, {
+            isNewTheme: isNewTheme,
+            children: jsxRuntime.jsx(Text__default["default"].Body, {
+              intlMessage: messages.logout
+            })
+          })
+        }), jsxRuntime.jsx("div", {
+          tabIndex: 0,
+          onFocus: () => props.downshiftProps.closeMenu()
+        })]
+      })]
+    }))
+  });
+};
+
+UserSettingsMenuBody.propTypes = {};
+UserSettingsMenuBody.displayName = 'UserSettingsMenuBody';
+
+var _ref = {
+  name: "18rc9yp",
+  styles: "cursor:pointer;border:none;padding:0;display:flex;background:transparent"
+} ;
+
+const UserSettingsMenu = props => {
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsxs("div", {
+    "data-test": "user-settings-menu",
+    children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
+      children: jsxRuntime.jsx("span", {
+        id: MENU_LABEL_ID,
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.menuLabel))
+      })
+    }), jsxRuntime.jsx(Downshift__default["default"], {
+      stateReducer: stateReducer,
+      labelId: MENU_LABEL_ID,
+      children: downshiftProps => jsxRuntime.jsxs("div", {
+        children: [jsxRuntime.jsx("button", _objectSpread(_objectSpread({
+          css: _ref
+        }, downshiftProps.getToggleButtonProps({
+          'aria-label': intl.formatMessage(downshiftProps.isOpen ? messages.closeMenuLabel : messages.openMenuLabel)
+        })), {}, {
+          children: jsxRuntime.jsx(UserAvatar, {
+            firstName: props.firstName,
+            lastName: props.lastName,
+            gravatarHash: props.gravatarHash
+          })
+        })), downshiftProps.isOpen && jsxRuntime.jsx(UserSettingsMenuBody, _objectSpread(_objectSpread({}, props), {}, {
+          downshiftProps: downshiftProps
+        }))]
+      })
+    })]
+  });
+};
+
+UserSettingsMenu.displayName = 'UserSettingsMenu';
+
+exports.UserAvatar = UserAvatar;
+exports.UserSettingsMenuBody = UserSettingsMenuBody;
+exports["default"] = UserSettingsMenu;