@commercetools-frontend/staff-bar 0.0.0

package/dist/staff-bar-60f77ed8.cjs.prod.js

@@ -0,0 +1,989 @@
+'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 react = require('react');
+var react$1 = require('@emotion/react');
+var ReactDOM = require('react-dom');
+var fullstory = require('@commercetools-frontend/fullstory');
+var uiKit = require('@commercetools-frontend/ui-kit');
+var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _flatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/flat');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
+var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+var isEqual = require('lodash/isEqual');
+var applicationComponents = require('@commercetools-frontend/application-components');
+var applicationShell = require('@commercetools-frontend/application-shell');
+var constants = require('@commercetools-frontend/constants');
+var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+require('@babel/runtime-corejs3/helpers/classCallCheck');
+require('@babel/runtime-corejs3/helpers/createClass');
+require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+require('@babel/runtime-corejs3/helpers/inherits');
+var _URLSearchParams = require('@babel/runtime-corejs3/core-js-stable/url-search-params');
+var reactRouterDom = require('react-router-dom');
+var sortBy = require('lodash/sortBy');
+
+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 ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _flatInstanceProperty__default = /*#__PURE__*/_interopDefault(_flatInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
+var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
+var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
+var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
+var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var _URLSearchParams__default = /*#__PURE__*/_interopDefault(_URLSearchParams);
+var sortBy__default = /*#__PURE__*/_interopDefault(sortBy);
+
+var config = {
+	AmazonWebServicesATT: {
+		MerchantCenterFrontend: {
+			url: "https://mc.att.us-east-1.aws.commercetools.com"
+		}
+	},
+	AmazonWebServicesChina: {
+		MerchantCenterFrontend: {
+			url: "https://mc.cn-northwest-1.aws.commercetools.cn"
+		}
+	},
+	AmazonWebServicesChinaStaging: {
+		MerchantCenterFrontend: {
+			url: "https://mc.cn-northwest-1.aws.commercetoolscn.cn"
+		}
+	},
+	AmazonWebServicesFrankfurt: {
+		MerchantCenterFrontend: {
+			url: "https://mc.eu-central-1.aws.commercetools.com"
+		}
+	},
+	AmazonWebServicesOhio: {
+		MerchantCenterFrontend: {
+			url: "https://mc.us-east-2.aws.commercetools.com"
+		}
+	},
+	AmazonWebServicesVolkswagen: {
+		MerchantCenterFrontend: {
+			url: "https://mc.vw.eu-central-1.aws.commercetools.com"
+		}
+	},
+	AmazonWebServicesVolkswagenStaging: {
+		MerchantCenterFrontend: {
+			url: "https://mc.vw-stage.eu-central-1.aws.commercetools.com"
+		}
+	},
+	AzureEuropeStaging: {
+		MerchantCenterFrontend: {
+			url: "https://mc.northeurope.azure.escemo.com"
+		}
+	},
+	GoogleCloudPlatformAustralia: {
+		MerchantCenterFrontend: {
+			url: "https://mc.australia-southeast1.gcp.commercetools.com"
+		}
+	},
+	GoogleCloudPlatformEurope: {
+		MerchantCenterFrontend: {
+			url: "https://mc.europe-west1.gcp.commercetools.com"
+		}
+	},
+	GoogleCloudPlatformEuropeStaging: {
+		MerchantCenterFrontend: {
+			url: "https://mc.europe-west1.gcp.escemo.com"
+		}
+	},
+	GoogleCloudPlatformUnitedStates: {
+		MerchantCenterFrontend: {
+			url: "https://mc.us-central1.gcp.commercetools.com"
+		}
+	}
+};
+
+var _context, _context2, _context3, _context4;
+const LOCAL_ENV = {
+  label: 'Local Dev',
+  value: 'http://localhost:3001'
+};
+const PREVIEW_BRANCH = {
+  label: 'Preview Branch',
+  value: ''
+};
+const IS_STAFFBAR_OPEN = 'isStaffBarOpen';
+
+// Type guard to help with filtering arrays for nullish elements.
+function nonNullable(value) {
+  return value !== null && value !== undefined;
+}
+const getOptionsForEnvironment = (label, config) => {
+  return {
+    label,
+    value: config.MerchantCenterFrontend.url
+  };
+};
+const GCP = _filterInstanceProperty__default["default"](_context = [getOptionsForEnvironment('GCP Australia', config.GoogleCloudPlatformAustralia), getOptionsForEnvironment('GCP Europe', config.GoogleCloudPlatformEurope), getOptionsForEnvironment('GCP USA', config.GoogleCloudPlatformUnitedStates), getOptionsForEnvironment('GCP Europe (Staging)', config.GoogleCloudPlatformEuropeStaging)]).call(_context, nonNullable);
+const AWS = _filterInstanceProperty__default["default"](_context2 = [getOptionsForEnvironment('AWS China', config.AmazonWebServicesChina), getOptionsForEnvironment('AWS Frankfurt', config.AmazonWebServicesFrankfurt), getOptionsForEnvironment('AWS Ohio', config.AmazonWebServicesOhio), getOptionsForEnvironment('AWS China (Staging)', config.AmazonWebServicesChinaStaging)]).call(_context2, nonNullable);
+const Azure = _filterInstanceProperty__default["default"](_context3 = [getOptionsForEnvironment('Azure Europe (Staging)', config.AzureEuropeStaging)]).call(_context3, nonNullable);
+const PRIVATE = _filterInstanceProperty__default["default"](_context4 = [getOptionsForEnvironment('AWS AT&T', config.AmazonWebServicesATT), getOptionsForEnvironment('AWS Volkswagen', config.AmazonWebServicesVolkswagen), getOptionsForEnvironment('AWS Volkswagen (Staging)', config.AmazonWebServicesVolkswagenStaging)]).call(_context4, nonNullable);
+const ENV = [{
+  options: GCP,
+  group: 'GCP'
+}, {
+  options: AWS,
+  group: 'AWS'
+}, {
+  options: Azure,
+  group: 'Azure'
+}, {
+  options: PRIVATE,
+  group: 'Private'
+}];
+
+var _ref$5 = {
+  name: "10r8dle",
+  styles: "width:206px"
+} ;
+const EnvironmentSwitcher = () => {
+  const _useState = react.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  react.useEffect(() => {
+    var _window;
+    const currentURL = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.origin;
+    if (currentURL === LOCAL_ENV.value) {
+      var _ENV$;
+      (_ENV$ = ENV[0]) === null || _ENV$ === void 0 || _ENV$.options.unshift(LOCAL_ENV);
+    }
+    if (_includesInstanceProperty__default["default"](currentURL).call(currentURL, 'preview')) {
+      var _ENV$2;
+      (_ENV$2 = ENV[0]) === null || _ENV$2 === void 0 || _ENV$2.options.unshift(PREVIEW_BRANCH);
+    }
+    if (_includesInstanceProperty__default["default"](currentURL).call(currentURL, 'preview')) {
+      setValue('');
+    } else {
+      var _ENV$map$flat$find, _context, _context2;
+      setValue((_ENV$map$flat$find = _findInstanceProperty__default["default"](_context = _flatInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](ENV).call(ENV, _ref2 => {
+        let options = _ref2.options;
+        return options;
+      })).call(_context2)).call(_context, _ref3 => {
+        let value = _ref3.value;
+        return value === currentURL;
+      })) === null || _ENV$map$flat$find === void 0 ? void 0 : _ENV$map$flat$find.value);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+    alignItems: "center",
+    children: [jsxRuntime.jsx(uiKit.Text.Detail, {
+      children: "Environment"
+    }), jsxRuntime.jsx("div", {
+      css: _ref$5,
+      children: jsxRuntime.jsx(uiKit.SelectInput, {
+        id: 'env-selector',
+        name: 'env selector',
+        isSearchable: false,
+        horizontalConstraint: 5,
+        menuPortalTarget: document.body,
+        menuPortalZIndex: 30000,
+        onChange: event => {
+          setValue(event.target.value);
+          if (event.target.value) {
+            window.open(event.target.value, '_self');
+          }
+        },
+        value: value,
+        options: ENV,
+        showOptionGroupDivider: true
+      })
+    })]
+  });
+};
+
+const GITHUB_PR_URL = 'https://github.com/commercetools/merchant-center-frontend/pull/';
+// Session storage keys
+const FEATURE_FLAG_KEY = 'toggled-feature-flags';
+const ACTIVE_TEAM_ID_KEY = 'activeTeamId';
+const ENABLE_LOG_KEY = 'enable-log';
+const USER_ROLES_WITH_ALLOWED_ACCESS = ['Engineer', 'ProductProjectManagerOrOwner'];
+
+var FetchStaffBarUser = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchStaffBarUser" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingGroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingSubgroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "businessRole" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 132, source: { body: "query FetchStaffBarUser {\n  user: me {\n    id\n    launchdarklyTrackingGroup\n    launchdarklyTrackingSubgroup\n    businessRole\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const useStaffBarUser = () => {
+  var _data$user, _data$user2, _data$user3;
+  const _useMcQuery = applicationShell.useMcQuery(FetchStaffBarUser, {
+      context: {
+        target: constants.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
+      },
+      // Use cache to avoid users from mocking response in browser to enable staffbar
+      fetchPolicy: 'cache-only'
+    }),
+    data = _useMcQuery.data,
+    error = _useMcQuery.error;
+  return {
+    userId: data === null || data === void 0 || (_data$user = data.user) === null || _data$user === void 0 ? void 0 : _data$user.id,
+    isStaffMember: (data === null || data === void 0 || (_data$user2 = data.user) === null || _data$user2 === void 0 ? void 0 : _data$user2.launchdarklyTrackingGroup) === 'commercetools',
+    isDevMember: _includesInstanceProperty__default["default"](USER_ROLES_WITH_ALLOWED_ACCESS).call(USER_ROLES_WITH_ALLOWED_ACCESS, data === null || data === void 0 || (_data$user3 = data.user) === null || _data$user3 === void 0 ? void 0 : _data$user3.businessRole),
+    error
+  };
+};
+
+const getActiveTeamId = () => window.sessionStorage.getItem(ACTIVE_TEAM_ID_KEY);
+const setActiveTeamId = teamId => window.sessionStorage.setItem(ACTIVE_TEAM_ID_KEY, teamId);
+const removeActiveTeamId = () => window.sessionStorage.removeItem(ACTIVE_TEAM_ID_KEY);
+
+var FetchTeamsByProjectQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchTeamsByProjectQuery" }, 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: "myProjects" }, 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: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "owner" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "teams" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "membersRef" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }] } }] } }] } }] } }] } }] } }], loc: { start: 0, end: 286, source: { body: "query FetchTeamsByProjectQuery($where: String!) {\n  myProjects(where: $where) {\n    results {\n      id\n      key\n      name\n      owner {\n        id\n        name\n        teams {\n          id\n          name\n          membersRef {\n            id\n          }\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const defaultTeam = {
+  label: 'Default',
+  value: ''
+};
+const onlyTeamsWithMembership = function (userId) {
+  let teams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return teams.length ? _filterInstanceProperty__default["default"](teams).call(teams, team => {
+    var _team$membersRef;
+    return (_team$membersRef = team.membersRef) === null || _team$membersRef === void 0 ? void 0 : _someInstanceProperty__default["default"](_team$membersRef).call(_team$membersRef, memberRef => memberRef.id === userId);
+  }) : [];
+};
+const getAdminTeamId = function () {
+  var _teams$find;
+  let teams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return (_teams$find = _findInstanceProperty__default["default"](teams).call(teams, team => team.name === 'Administrators')) === null || _teams$find === void 0 ? void 0 : _teams$find.id;
+};
+const getStoredTeamId = function (storedId) {
+  let teams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return _findInstanceProperty__default["default"](teams).call(teams, team => team.id === storedId);
+};
+const transformTeamsToOptions = function () {
+  let teams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const hasAdminTeam = Boolean(getAdminTeamId(teams));
+  const options = _mapInstanceProperty__default["default"](teams).call(teams, team => ({
+    label: team === null || team === void 0 ? void 0 : team.name,
+    value: team === null || team === void 0 ? void 0 : team.id
+  }));
+  if (hasAdminTeam) {
+    return options;
+  } else if (options.length) {
+    return [defaultTeam, ...options];
+  } else {
+    return [];
+  }
+};
+const useTeams = () => {
+  var _data$myProjects, _ref;
+  const projectKey = applicationShellConnectors.useApplicationContext(applicationContext => {
+    var _applicationContext$p;
+    return (_applicationContext$p = applicationContext.project) === null || _applicationContext$p === void 0 ? void 0 : _applicationContext$p.key;
+  });
+  const _useStaffBarUser = useStaffBarUser(),
+    userId = _useStaffBarUser.userId;
+  const _useMcQuery = applicationShell.useMcQuery(FetchTeamsByProjectQuery, {
+      skip: !projectKey,
+      variables: {
+        where: "key=\"".concat(projectKey, "\"")
+      },
+      context: {
+        target: constants.GRAPHQL_TARGETS.ADMINISTRATION_SERVICE
+      }
+    }),
+    data = _useMcQuery.data,
+    error = _useMcQuery.error,
+    loading = _useMcQuery.loading;
+  const teams = data === null || data === void 0 || (_data$myProjects = data.myProjects) === null || _data$myProjects === void 0 || (_data$myProjects = _data$myProjects.results) === null || _data$myProjects === void 0 || (_data$myProjects = _data$myProjects[0]) === null || _data$myProjects === void 0 || (_data$myProjects = _data$myProjects.owner) === null || _data$myProjects === void 0 ? void 0 : _data$myProjects.teams;
+  react.useEffect(() => {
+    if (loading) {
+      return;
+    }
+
+    // If user already simulated the permission and tries to change project then we need to clear the stored teamId
+    // otherwise the newly selected project might be from different organization and user will see 404 page.
+    const storedId = getActiveTeamId();
+    if (storedId && !getStoredTeamId(storedId, teams)) {
+      removeActiveTeamId();
+      window.location.reload();
+    }
+  }, [loading, teams]);
+  const options = transformTeamsToOptions(onlyTeamsWithMembership(userId || '', teams));
+  const adminTeamId = getAdminTeamId(onlyTeamsWithMembership(userId || '', teams));
+  const storedId = getActiveTeamId();
+  const activeTeamId = (_ref = storedId !== null && storedId !== void 0 ? storedId : adminTeamId) !== null && _ref !== void 0 ? _ref : defaultTeam.value;
+  return {
+    data,
+    options,
+    activeTeamId,
+    isLimitedPermission: storedId && storedId !== adminTeamId,
+    error,
+    loading
+  };
+};
+
+var _window$__flopflip__;
+const launchdarklyAdapter = (_window$__flopflip__ = window.__flopflip__) === null || _window$__flopflip__ === void 0 ? void 0 : _window$__flopflip__.launchdarkly;
+function getFlagValue(flag, defaultValue) {
+  // @ts-expect-error: getFlag exists not on all adapters and hence
+  // not the generic type. For ours it exists.
+  const result = launchdarklyAdapter === null || launchdarklyAdapter === void 0 ? void 0 : launchdarklyAdapter.getFlag(flag);
+  if (typeof result === 'boolean') {
+    return result;
+  } else if (typeof (result === null || result === void 0 ? void 0 : result.value) === 'boolean') {
+    return result;
+  }
+  return defaultValue;
+}
+function setFlag(flagName, flagValue) {
+  let lockFlags = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  launchdarklyAdapter === null || launchdarklyAdapter === void 0 || launchdarklyAdapter.updateFlags({
+    [flagName]: flagValue
+  }, {
+    lockFlags
+  });
+}
+
+const getFromSessionStorage = key => {
+  const storedValue = window.sessionStorage.getItem(key);
+  return storedValue ? JSON.parse(storedValue) : {};
+};
+const setToSessionStorage = (key, value) => window.sessionStorage.setItem(key, _JSON$stringify__default["default"](value));
+
+var _ref$4 = {
+  name: "mdo41b",
+  styles: "box-sizing:border-box;width:100%;margin:0;border:0;border-top-width:1px;border-style:solid;border-top-color:var(--color-neutral-90)"
+} ;
+function Divider() {
+  return jsxRuntime.jsx("hr", {
+    css: _ref$4
+  });
+}
+
+function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys$2(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+var FeatureFlagTogglerIllustration = function FeatureFlagTogglerIllustration(props) {
+  return jsxRuntime.jsx("svg", _objectSpread$2(_objectSpread$2({}, props), {}, {
+    children: jsxRuntime.jsx("path", {
+      d: "M4.91 9.818c-1.365 0-2.524-.477-3.478-1.432C.477 7.432 0 6.273 0 4.91c0-1.364.477-2.523 1.432-3.477C2.386.477 3.545 0 4.909 0h8.182c1.364 0 2.523.477 3.477 1.432C17.523 2.386 18 3.545 18 4.909c0 1.364-.477 2.523-1.432 3.477-.954.955-2.114 1.432-3.477 1.432H4.909Zm0-1.227h8.18c1.024 0 1.893-.358 2.609-1.074.716-.716 1.074-1.585 1.074-2.608 0-1.023-.358-1.892-1.074-2.608-.716-.716-1.585-1.074-2.608-1.074H4.909c-1.023 0-1.892.358-2.608 1.074-.716.716-1.074 1.585-1.074 2.608 0 1.023.358 1.892 1.074 2.608.716.716 1.585 1.074 2.608 1.074Zm-.023-1.616c.574 0 1.062-.2 1.464-.602a1.99 1.99 0 0 0 .604-1.463c0-.573-.201-1.061-.603-1.463a1.99 1.99 0 0 0-1.462-.604c-.574 0-1.062.2-1.464.602a1.99 1.99 0 0 0-.603 1.463c0 .573.2 1.061.602 1.464a1.99 1.99 0 0 0 1.462.603Z",
+      fill: "#000"
+    })
+  }));
+};
+FeatureFlagTogglerIllustration.defaultProps = {
+  width: "18",
+  height: "10",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function toggleFeatureFlag(flag, value) {
+  const cachedFeatureFlag = getFromSessionStorage(FEATURE_FLAG_KEY);
+  setToSessionStorage(FEATURE_FLAG_KEY, _objectSpread$2(_objectSpread$2({}, cachedFeatureFlag), {}, {
+    [flag]: value
+  }));
+  setFlag(flag, value);
+}
+const FeatureFlagToggler = props => {
+  var _context, _props$featureFlags;
+  const modalState = applicationComponents.useModalState();
+  const _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    toggleAll = _useState2[0],
+    setToggleAll = _useState2[1];
+  const cachedFeatureFlag = getFromSessionStorage(FEATURE_FLAG_KEY);
+  const _useStaffBarUser = useStaffBarUser(),
+    isDevMember = _useStaffBarUser.isDevMember;
+  const _useState3 = react.useState(_mapInstanceProperty__default["default"](_context = _Object$entries__default["default"]((_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 ? _props$featureFlags : {})).call(_context, _ref => {
+      var _cachedFeatureFlag$fe;
+      let _ref2 = _slicedToArray(_ref, 2),
+        featureName = _ref2[0],
+        toggleValue = _ref2[1];
+      return {
+        featureName,
+        toggleValue: (_cachedFeatureFlag$fe = cachedFeatureFlag[featureName]) !== null && _cachedFeatureFlag$fe !== void 0 ? _cachedFeatureFlag$fe : getFlagValue(featureName, toggleValue)
+      };
+    })),
+    _useState4 = _slicedToArray(_useState3, 2),
+    options = _useState4[0],
+    setOptions = _useState4[1];
+  const originalValues = react.useMemo(() => {
+    var _context2, _props$featureFlags2;
+    return _mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"]((_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 ? _props$featureFlags2 : {})).call(_context2, _ref3 => {
+      var _getFlagValue;
+      let _ref4 = _slicedToArray(_ref3, 2),
+        featureName = _ref4[0],
+        toggleValue = _ref4[1];
+      return {
+        featureName,
+        toggleValue: (_getFlagValue = getFlagValue(featureName, toggleValue)) !== null && _getFlagValue !== void 0 ? _getFlagValue : 'false'
+      };
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  const isTouched = react.useMemo(() => !isEqual__default["default"](originalValues, options), [originalValues, options]);
+  react.useEffect(() => {
+    // Persist toggled flags from other application
+    if (_Object$keys__default["default"](cachedFeatureFlag).length) {
+      var _context3;
+      _forEachInstanceProperty__default["default"](_context3 = _Object$entries__default["default"](cachedFeatureFlag)).call(_context3, _ref5 => {
+        let _ref6 = _slicedToArray(_ref5, 2),
+          featureName = _ref6[0],
+          value = _ref6[1];
+        if (_findInstanceProperty__default["default"](options).call(options, option => option.featureName === featureName)) {
+          toggleFeatureFlag(featureName, value);
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const isToggled = toggleValue => {
+    if (typeof toggleValue === 'object' && toggleValue.value !== undefined) {
+      return toggleValue.value;
+    }
+    return toggleValue;
+  };
+  const toTitleCase = function () {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    const result = value.replace(/([A-Z])/g, ' $1');
+    return result.charAt(0).toUpperCase() + _sliceInstanceProperty__default["default"](result).call(result, 1);
+  };
+  const toggleAndGenerateNewOption = _ref7 => {
+    let featureName = _ref7.featureName,
+      toggleValue = _ref7.toggleValue,
+      options = _ref7.options,
+      index = _ref7.index;
+    const newOptions = [...options];
+    if (typeof toggleValue === 'boolean') {
+      toggleFeatureFlag(featureName, !toggleValue);
+      newOptions[index] = _objectSpread$2(_objectSpread$2({}, newOptions[index]), {}, {
+        toggleValue: !toggleValue
+      });
+    } else {
+      toggleFeatureFlag(featureName, {
+        value: !(toggleValue !== null && toggleValue !== void 0 && toggleValue.value)
+      });
+      newOptions[index] = _objectSpread$2(_objectSpread$2({}, newOptions[index]), {}, {
+        toggleValue: {
+          value: !(toggleValue !== null && toggleValue !== void 0 && toggleValue.value)
+        }
+      });
+    }
+    return newOptions;
+  };
+  const handleToggleAll = react.useCallback(() => {
+    let newOptions = [...options];
+    _forEachInstanceProperty__default["default"](options).call(options, (_ref8, index) => {
+      let featureName = _ref8.featureName,
+        toggleValue = _ref8.toggleValue;
+      newOptions = toggleAndGenerateNewOption({
+        featureName,
+        toggleValue: typeof toggleValue === 'boolean' ? toggleAll : {
+          value: toggleAll
+        },
+        index,
+        options: [...newOptions]
+      });
+    });
+    setOptions(newOptions);
+    setToggleAll(!toggleAll);
+  }, [toggleAll, options]);
+  const handleToggle = react.useCallback(_ref9 => {
+    let featureName = _ref9.featureName,
+      toggleValue = _ref9.toggleValue,
+      index = _ref9.index;
+    const newOptions = toggleAndGenerateNewOption({
+      featureName,
+      toggleValue,
+      index,
+      options: [...options]
+    });
+    setOptions(newOptions);
+  }, [options]);
+  const handleRevert = () => {
+    _forEachInstanceProperty__default["default"](originalValues).call(originalValues, (_ref10, index) => {
+      let featureName = _ref10.featureName,
+        toggleValue = _ref10.toggleValue;
+      toggleAndGenerateNewOption({
+        featureName,
+        toggleValue: typeof toggleValue === 'boolean' ? !toggleValue : {
+          value: !toggleValue.value
+        },
+        index,
+        options: [...options]
+      });
+    });
+    setOptions(originalValues);
+    setToggleAll(false);
+    window.sessionStorage.removeItem(FEATURE_FLAG_KEY);
+  };
+  if (!isDevMember) return null;
+  if (!options.length) return null;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(uiKit.IconButton, {
+      label: "Toggle Feature Flags",
+      icon: jsxRuntime.jsx(FeatureFlagTogglerIllustration, {}),
+      onClick: modalState.openModal,
+      color: "info"
+    }), jsxRuntime.jsx(applicationComponents.InfoDialog, {
+      title: 'Feature flags',
+      isOpen: modalState.isModalOpen,
+      onClose: modalState.closeModal,
+      zIndex: 30000,
+      getParentSelector: () => document.body,
+      children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+        scale: "m",
+        children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+          justifyContent: "flex-end",
+          scale: "m",
+          alignItems: "center",
+          children: [jsxRuntime.jsx(uiKit.FlatButton, {
+            onClick: handleToggleAll,
+            label: "Toggle All"
+          }), jsxRuntime.jsx(uiKit.SecondaryButton, {
+            label: "Revert",
+            onClick: handleRevert,
+            isDisabled: !isTouched
+          })]
+        }), jsxRuntime.jsx(uiKit.Spacings.Stack, {
+          scale: "m",
+          children: _mapInstanceProperty__default["default"](options).call(options, (_ref11, index) => {
+            let featureName = _ref11.featureName,
+              toggleValue = _ref11.toggleValue;
+            return jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
+              max: 'scale',
+              children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+                scale: "m",
+                children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  children: [jsxRuntime.jsxs("div", {
+                    children: [jsxRuntime.jsx(uiKit.Text.Body, {
+                      children: toTitleCase(featureName)
+                    }), jsxRuntime.jsxs(uiKit.Text.Detail, {
+                      tone: "secondary",
+                      children: ["flag key: ", featureName]
+                    })]
+                  }), jsxRuntime.jsx(uiKit.ToggleInput, {
+                    size: "small",
+                    isChecked: isToggled(toggleValue),
+                    onChange: () => handleToggle({
+                      featureName,
+                      toggleValue,
+                      index
+                    })
+                  })]
+                }), jsxRuntime.jsx(Divider, {})]
+              })
+            }, featureName);
+          })
+        })]
+      })
+    })]
+  });
+};
+
+function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$1(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+var GitHubIcon = function GitHubIcon(props) {
+  return jsxRuntime.jsx("svg", _objectSpread$1(_objectSpread$1({}, props), {}, {
+    children: jsxRuntime.jsx("path", {
+      d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
+    })
+  }));
+};
+GitHubIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24"
+};
+function GitHubPullRequestLink() {
+  const previewUrl = window.location.hostname.match(/mc-(\d+)\.mc-preview/);
+  if (!previewUrl) return null;
+  const _previewUrl = _slicedToArray(previewUrl, 2),
+    PRNumber = _previewUrl[1];
+  return jsxRuntime.jsx(uiKit.IconButton, {
+    label: "GitHub Pull Request",
+    icon: jsxRuntime.jsx(GitHubIcon, {}),
+    onClick: () => {
+      var _context;
+      window.open(_concatInstanceProperty__default["default"](_context = "".concat(GITHUB_PR_URL)).call(_context, PRNumber));
+    }
+  });
+}
+
+var _ref$3 = {
+  name: "1jeqx8",
+  styles: "width:242px"
+} ;
+var _ref2$2 = {
+  name: "14ronv",
+  styles: "z-index:20001;display:flex;align-items:center;margin-right:16px;height:100%"
+} ;
+const TeamSwitcher = () => {
+  const _useTeams = useTeams(),
+    options = _useTeams.options,
+    activeTeamId = _useTeams.activeTeamId,
+    isLimitedPermission = _useTeams.isLimitedPermission;
+  if (!(options !== null && options !== void 0 && options.length)) {
+    return null;
+  }
+  const bottomOption = {
+    options: [{
+      label: 'Select a team to limit permissions to those of that team.',
+      value: '',
+      isDisabled: true
+    }]
+  };
+  const optionsWithBottomOption = [{
+    options
+  }, bottomOption];
+  const portalContainer = document.querySelector("[id='left-of-profile']");
+  const container = jsxRuntime.jsx("div", {
+    "data-testid": "limited-permission",
+    css: _ref2$2,
+    children: jsxRuntime.jsx(uiKit.Stamp, {
+      tone: "warning",
+      label: "Limited Permission"
+    })
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+      alignItems: "center",
+      children: [jsxRuntime.jsx(uiKit.Text.Detail, {
+        children: "Team"
+      }), jsxRuntime.jsx("div", {
+        css: _ref$3,
+        children: jsxRuntime.jsx(uiKit.SelectInput, {
+          id: "team-selector",
+          name: "Team Selector",
+          isSearchable: true,
+          horizontalConstraint: 5,
+          menuPortalTarget: document.body,
+          menuPortalZIndex: 30000,
+          onChange: event => {
+            if (event.target.value) {
+              setActiveTeamId(event.target.value);
+            } else {
+              removeActiveTeamId();
+            }
+            window.location.reload();
+          },
+          value: activeTeamId,
+          options: optionsWithBottomOption,
+          showOptionGroupDivider: true
+        })
+      })]
+    }), isLimitedPermission && portalContainer && /*#__PURE__*/ReactDOM__default["default"].createPortal(container, portalContainer)]
+  });
+};
+
+const LogEnabler = () => {
+  const history = reactRouterDom.useHistory();
+  const location = reactRouterDom.useLocation();
+  const queryParams = new _URLSearchParams__default["default"](location.search);
+  const debugFromQueryParams = queryParams.get('debug');
+  const isDebugLoggingEnabled = debugFromQueryParams === 'true';
+
+  // Synchronize the debug params.
+  react.useEffect(() => {
+    if (debugFromQueryParams) {
+      window.sessionStorage.setItem(ENABLE_LOG_KEY, debugFromQueryParams);
+    } else {
+      // Restore the query param based on the cached state.
+      const cachedDebugState = window.sessionStorage.getItem(ENABLE_LOG_KEY);
+      if (cachedDebugState) {
+        const cachedIsDebugLoggingEnabled = cachedDebugState === 'true';
+        queryParams.set('debug', String(cachedIsDebugLoggingEnabled));
+        history.push({
+          pathname: location.pathname,
+          search: queryParams.toString()
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debugFromQueryParams]);
+  function handleDebugLoggingChange() {
+    const nextIsDebugLoggingEnabled = !isDebugLoggingEnabled;
+
+    // Cache the new debug state value.
+    window.sessionStorage.setItem(ENABLE_LOG_KEY, String(nextIsDebugLoggingEnabled));
+
+    // Sync the state with the query params. This is what counts!
+    if (nextIsDebugLoggingEnabled) {
+      queryParams.set('debug', String(nextIsDebugLoggingEnabled));
+    } else {
+      queryParams.delete('debug');
+    }
+    history.push({
+      pathname: location.pathname,
+      search: queryParams.toString()
+    });
+  }
+  return jsxRuntime.jsx(uiKit.CheckboxInput, {
+    onChange: handleDebugLoggingChange,
+    isChecked: isDebugLoggingEnabled,
+    children: "Enable Logs"
+  });
+};
+
+function getDurationBetween(type, deployedAt) {
+  const deployedDate = new Date(deployedAt);
+  const today = new Date();
+  let value;
+  switch (type) {
+    case 'minutes':
+      value = 60000;
+      break;
+    case 'hours':
+      value = 3600000;
+      break;
+    case 'days':
+    default:
+      value = 8.64e7;
+      break;
+  }
+  return Math.round(Math.abs(+deployedDate - +today) / value);
+}
+var _ref$2 = {
+  name: "1nxezmo",
+  styles: "cursor:pointer!important;position:absolute;left:0;width:100%;button{width:100%;opacity:0;}"
+} ;
+var _ref2$1 = {
+  name: "bjn8wh",
+  styles: "position:relative"
+} ;
+const DeploymentTracker = () => {
+  const _useModalState = applicationComponents.useModalState(),
+    isModalOpen = _useModalState.isModalOpen,
+    openModal = _useModalState.openModal,
+    closeModal = _useModalState.closeModal;
+  const _useState = react.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    versions = _useState2[0],
+    setVersions = _useState2[1];
+  const getCurrentApplicationName = () => {
+    const entryPointUriPath = window.app.entryPointUriPath;
+    switch (entryPointUriPath) {
+      case 'welcome':
+        return 'fallback';
+      default:
+        return entryPointUriPath;
+    }
+  };
+  const currentApplication = getCurrentApplicationName();
+  react.useEffect(() => {
+    const abortController = new AbortController();
+    const fetchData = async () => {
+      let URL = window.location.origin;
+      if (URL === LOCAL_ENV.value) {
+        return;
+      }
+      try {
+        const response = await fetch("".concat(URL, "/versions"), {
+          signal: abortController.signal
+        });
+        let versions;
+        if (response.ok) {
+          versions = await response.json();
+          setVersions(sortBy__default["default"](versions, version => version.app));
+        } else {
+          const errorMessage = "Fetching the versions returned a ".concat(response.status, " HTTP status code.");
+          // eslint-disable-next-line no-console
+          console.error(errorMessage);
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+    };
+    fetchData();
+    return () => {
+      abortController.abort();
+    };
+  }, []);
+  const getLastUpdate = application => {
+    var _versions$find;
+    const deployedAt = (_versions$find = _findInstanceProperty__default["default"](versions).call(versions, version => version.app === application)) === null || _versions$find === void 0 || (_versions$find = _versions$find.build) === null || _versions$find === void 0 ? void 0 : _versions$find.deployedAt;
+    if (!deployedAt) {
+      return {
+        value: 0,
+        text: '--'
+      };
+    }
+    var days = getDurationBetween('days', deployedAt);
+    if (days < 1) {
+      var hours = getDurationBetween('hours', deployedAt);
+      if (hours < 1) {
+        const minutes = getDurationBetween('minutes', deployedAt);
+        return {
+          value: Number(minutes.toFixed(0)),
+          text: "".concat(minutes.toFixed(0), " minutes ago")
+        };
+      }
+      return {
+        value: Number(hours.toFixed(0)),
+        text: "".concat(hours.toFixed(0), " hours ago")
+      };
+    }
+    return {
+      value: Number(days.toFixed(0)),
+      text: "".concat(days.toFixed(0), " days ago")
+    };
+  };
+  const getTone = _ref3 => {
+    let value = _ref3.value,
+      text = _ref3.text;
+    if (_includesInstanceProperty__default["default"](text).call(text, 'days')) {
+      if (value >= 5) return 'critical';
+      if (value >= 2) return 'warning';
+    }
+    return 'primary';
+  };
+  if (!(versions !== null && versions !== void 0 && versions.length)) return null;
+  return jsxRuntime.jsxs("div", {
+    css: _ref2$1,
+    children: [jsxRuntime.jsxs(uiKit.Stamp, {
+      tone: getTone(getLastUpdate(currentApplication)),
+      children: ["Last deployed: ", getLastUpdate(currentApplication).text, jsxRuntime.jsx("div", {
+        css: _ref$2,
+        children: jsxRuntime.jsx(uiKit.SecondaryButton, {
+          label: "",
+          onClick: openModal,
+          size: "medium"
+        })
+      })]
+    }), jsxRuntime.jsx(applicationComponents.InfoDialog, {
+      isOpen: isModalOpen,
+      title: 'App Deployment information',
+      onClose: closeModal,
+      children: jsxRuntime.jsx(uiKit.Spacings.Stack, {
+        children: _mapInstanceProperty__default["default"](versions).call(versions, version => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+            justifyContent: "space-between",
+            children: [jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
+              max: 6,
+              children: jsxRuntime.jsx(uiKit.Text.Body, {
+                children: version.app
+              })
+            }), jsxRuntime.jsx(uiKit.Stamp, {
+              tone: getTone(getLastUpdate(version.app)),
+              children: getLastUpdate(version.app).text
+            })]
+          }, version.app), jsxRuntime.jsx(Divider, {})]
+        }))
+      })
+    })]
+  });
+};
+
+var _ref$1 = {
+  name: "tkfx1x",
+  styles: ">button{margin-right:27px!important;}"
+} ;
+function StaffBarInfo() {
+  const infoModalState = applicationComponents.useModalState();
+  return jsxRuntime.jsxs("div", {
+    css: _ref$1,
+    children: [jsxRuntime.jsx(uiKit.IconButton, {
+      size: "medium",
+      label: "",
+      icon: jsxRuntime.jsx(uiKit.InformationIcon, {}),
+      onClick: () => {
+        infoModalState.openModal();
+      }
+    }), jsxRuntime.jsx(applicationComponents.InfoDialog, {
+      isOpen: infoModalState.isModalOpen,
+      title: 'About the Staff bar',
+      onClose: infoModalState.closeModal,
+      getParentSelector: () => document.body,
+      zIndex: 30000,
+      size: 12,
+      children: jsxRuntime.jsx(uiKit.Text.Detail, {
+        children: "Staff bar is an experimental feature available only to commercetools employees. It allows to quickly switch environment, toggle different feature flags and other useful actions. This feature is not visible to end customers nor partners."
+      })
+    })]
+  });
+}
+
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+var _ref = {
+  name: "16u25pc",
+  styles: "position:absolute;height:24px;width:56px;background:var(--color-accent-10);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);border-radius:0px 0px 4px 4px;left:calc(50% - 23px);bottom:-23px;cursor:pointer;z-index:30000;display:flex;align-items:center;justify-content:center;:hover{background:var(--color-accent-20);}"
+} ;
+var _ref2 = {
+  name: "bjn8wh",
+  styles: "position:relative"
+} ;
+function StaffBar(props) {
+  const _useStaffBarUser = useStaffBarUser(),
+    isStaffMember = _useStaffBarUser.isStaffMember,
+    error = _useStaffBarUser.error;
+  const _useState = react.useState(localStorage.getItem(IS_STAFFBAR_OPEN) === 'true'),
+    _useState2 = _slicedToArray(_useState, 2),
+    isStaffBarOpen = _useState2[0],
+    setIsStaffBarOpen = _useState2[1];
+  const container = jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, fullstory.Marking.applyMarker('Staff Bar')), {}, {
+    css: _ref2,
+    children: jsxRuntime.jsxs("div", {
+      css: /*#__PURE__*/react$1.css("height:", isStaffBarOpen ? '56px' : '0', ";background:var(--color-neutral-95);transition:height 150ms;overflow:hidden;" + ("" ), "" ),
+      children: [jsxRuntime.jsx("div", {
+        "data-testid": "staffbar-handle",
+        css: _ref,
+        onClick: () => {
+          localStorage.setItem(IS_STAFFBAR_OPEN, (!isStaffBarOpen).toString());
+          setIsStaffBarOpen(!isStaffBarOpen);
+        },
+        children: isStaffBarOpen ? jsxRuntime.jsx(uiKit.AngleUpIcon, {
+          color: "surface",
+          size: "medium"
+        }) : jsxRuntime.jsx(uiKit.AngleDownIcon, {
+          color: "surface",
+          size: "medium"
+        })
+      }), jsxRuntime.jsx(uiKit.Spacings.InsetSquish, {
+        scale: "m",
+        children: jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+          justifyContent: "space-between",
+          alignItems: "center",
+          children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+            scale: "l",
+            children: [jsxRuntime.jsx(GitHubPullRequestLink, {}), jsxRuntime.jsx(FeatureFlagToggler, {
+              featureFlags: props.featureFlags
+            }), jsxRuntime.jsx(EnvironmentSwitcher, {}), jsxRuntime.jsx(TeamSwitcher, {})]
+          }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+            scale: "l",
+            alignItems: "center",
+            children: [jsxRuntime.jsx(DeploymentTracker, {}), jsxRuntime.jsx(LogEnabler, {}), jsxRuntime.jsx(StaffBarInfo, {})]
+          })]
+        })
+      })]
+    })
+  }));
+  const portalContainer = document.getElementById('above-top-navigation');
+  if (error || !isStaffMember || !portalContainer) return null;
+  return /*#__PURE__*/ReactDOM__default["default"].createPortal(container, portalContainer);
+}
+
+exports["default"] = StaffBar;