@copart/ops-tool-kit 1.12.3 → 1.12.4-alpha.1

package/dist/ops-tool-kit.js

@@ -47,7 +47,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$r = "@copart/ops-tool-kit";
-const version$8 = "1.12.3";
+const version$8 = "1.12.4-alpha.1";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -1263,17 +1263,17 @@ var objectAssign = shouldUseNative() ? Object.assign : function (target, source)
 var ReactPropTypesSecret$2 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
 var ReactPropTypesSecret_1 = ReactPropTypesSecret$2;
 
-var has$4 = Function.call.bind(Object.prototype.hasOwnProperty);
+var has$6 = Function.call.bind(Object.prototype.hasOwnProperty);
 
 var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
 
-var has$3 = has$4;
+var has$5 = has$6;
 
 var printWarning$3 = function () {};
 if (process.env.NODE_ENV !== 'production') {
   var ReactPropTypesSecret = ReactPropTypesSecret$1;
   var loggedTypeFailures = {};
-  var has$2 = has$3;
+  var has$4 = has$5;
   printWarning$3 = function (text) {
     var message = 'Warning: ' + text;
     if (typeof console !== 'undefined') {
@@ -1302,7 +1302,7 @@ if (process.env.NODE_ENV !== 'production') {
 function checkPropTypes$1(typeSpecs, values, location, componentName, getStack) {
   if (process.env.NODE_ENV !== 'production') {
     for (var typeSpecName in typeSpecs) {
-      if (has$2(typeSpecs, typeSpecName)) {
+      if (has$4(typeSpecs, typeSpecName)) {
         var error;
         // Prop type validation may throw. In case they do, we don't want to
         // fail the render phase where it didn't fail before. So we log it.
@@ -1652,7 +1652,7 @@ var factoryWithTypeCheckers = function (isValidElement, throwOnDirectAccess) {
         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
       }
       for (var key in propValue) {
-        if (has$3(propValue, key)) {
+        if (has$5(propValue, key)) {
           var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
           if (error instanceof Error) {
             return error;
@@ -1683,7 +1683,7 @@ var factoryWithTypeCheckers = function (isValidElement, throwOnDirectAccess) {
         if (checkerResult == null) {
           return null;
         }
-        if (checkerResult.data && has$3(checkerResult.data, 'expectedType')) {
+        if (checkerResult.data && has$5(checkerResult.data, 'expectedType')) {
           expectedTypes.push(checkerResult.data.expectedType);
         }
       }
@@ -1736,7 +1736,7 @@ var factoryWithTypeCheckers = function (isValidElement, throwOnDirectAccess) {
       var allKeys = objectAssign({}, props[propName], shapeTypes);
       for (var key in allKeys) {
         var checker = shapeTypes[key];
-        if (has$3(shapeTypes, key) && typeof checker !== 'function') {
+        if (has$5(shapeTypes, key) && typeof checker !== 'function') {
           return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
         }
         if (!checker) {
@@ -5302,6 +5302,9 @@ var handleHeaders = function handleHeaders(config) {
   if (accessToken && headers) {
     headers.Authorization = "bearer ".concat(accessToken);
     if (headers.country) headers.country || (headers.country = countryCodeFromStorage);
+    if (headers.gStackCountry) {
+      headers.country = headers.gStackCountry;
+    }
     if (stack !== 'g') {
       headers['Content-Type'] = 'application/json';
       headers.countryCode || (headers.countryCode = config.imageRequest ? 'US' : countryCode);
@@ -6043,7 +6046,7 @@ var oktaLogin = /*#__PURE__*/function () {
   };
 }();
 
-var has$1 = Object.prototype.hasOwnProperty,
+var has$3 = Object.prototype.hasOwnProperty,
   undef;
 
 /**
@@ -6124,7 +6127,7 @@ function querystringify(obj, prefix) {
   //
   if ('string' !== typeof prefix) prefix = '?';
   for (key in obj) {
-    if (has$1.call(obj, key)) {
+    if (has$3.call(obj, key)) {
       value = obj[key];
 
       //
@@ -7201,6 +7204,38 @@ var prop = /*#__PURE__*/_curry2(function prop(p, obj) {
 });
 var prop$1 = prop;
 
+/**
+ * Returns a new list by plucking the same named property off all objects in
+ * the list supplied.
+ *
+ * `pluck` will work on
+ * any [functor](https://github.com/fantasyland/fantasy-land#functor) in
+ * addition to arrays, as it is equivalent to `R.map(R.prop(k), f)`.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category List
+ * @sig Functor f => k -> f {k: v} -> f v
+ * @param {Number|String} key The key name to pluck off of each object.
+ * @param {Array} f The array or functor to consider.
+ * @return {Array} The list of values for the given key.
+ * @see R.props
+ * @example
+ *
+ *      var getAges = R.pluck('age');
+ *      getAges([{name: 'fred', age: 29}, {name: 'wilma', age: 27}]); //=> [29, 27]
+ *
+ *      R.pluck(0, [[1, 2], [3, 4]]);               //=> [1, 3]
+ *      R.pluck('val', {a: {val: 3}, b: {val: 5}}); //=> {a: 3, b: 5}
+ * @symb R.pluck('x', [{x: 1, y: 2}, {x: 3, y: 4}, {x: 5, y: 6}]) = [1, 3, 5]
+ * @symb R.pluck(0, [[1, 2], [3, 4], [5, 6]]) = [1, 3, 5]
+ */
+var pluck = /*#__PURE__*/_curry2(function pluck(p, list) {
+  return map$3(prop$1(p), list);
+});
+var pluck$1 = pluck;
+
 /**
  * Returns a single item by iterating through the list, successively calling
  * the iterator function and passing it an accumulator value and the current
@@ -8920,6 +8955,74 @@ var forEachObjIndexed = /*#__PURE__*/_curry2(function forEachObjIndexed(fn, obj)
 });
 var forEachObjIndexed$1 = forEachObjIndexed;
 
+/**
+ * Returns whether or not a path exists in an object. Only the object's
+ * own properties are checked.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.26.0
+ * @category Object
+ * @typedefn Idx = String | Int
+ * @sig [Idx] -> {a} -> Boolean
+ * @param {Array} path The path to use.
+ * @param {Object} obj The object to check the path in.
+ * @return {Boolean} Whether the path exists.
+ * @see R.has
+ * @example
+ *
+ *      R.hasPath(['a', 'b'], {a: {b: 2}});         // => true
+ *      R.hasPath(['a', 'b'], {a: {b: undefined}}); // => true
+ *      R.hasPath(['a', 'b'], {a: {c: 2}});         // => false
+ *      R.hasPath(['a', 'b'], {});                  // => false
+ */
+var hasPath$1 = /*#__PURE__*/_curry2(function hasPath(_path, obj) {
+  if (_path.length === 0) {
+    return false;
+  }
+  var val = obj;
+  var idx = 0;
+  while (idx < _path.length) {
+    if (_has(_path[idx], val)) {
+      val = val[_path[idx]];
+      idx += 1;
+    } else {
+      return false;
+    }
+  }
+  return true;
+});
+var hasPath$2 = hasPath$1;
+
+/**
+ * Returns whether or not an object has an own property with the specified name
+ *
+ * @func
+ * @memberOf R
+ * @since v0.7.0
+ * @category Object
+ * @sig s -> {s: x} -> Boolean
+ * @param {String} prop The name of the property to check for.
+ * @param {Object} obj The object to query.
+ * @return {Boolean} Whether the property exists.
+ * @example
+ *
+ *      const hasName = R.has('name');
+ *      hasName({name: 'alice'});   //=> true
+ *      hasName({name: 'bob'});     //=> true
+ *      hasName({});                //=> false
+ *
+ *      const point = {x: 0, y: 0};
+ *      const pointHas = R.has(R.__, point);
+ *      pointHas('x');  //=> true
+ *      pointHas('y');  //=> true
+ *      pointHas('z');  //=> false
+ */
+var has$1 = /*#__PURE__*/_curry2(function has(prop, obj) {
+  return hasPath$2([prop], obj);
+});
+var has$2 = has$1;
+
 /**
  * Returns `true` if the specified value is equal, in [`R.equals`](#equals)
  * terms, to at least one element of the given list; `false` otherwise.
@@ -9485,6 +9588,85 @@ var getUserScopes = /*#__PURE__*/function () {
   };
 }();
 
+var getCobaltUserFacilities = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(country, role) {
+    var url, headers, response, facilitiesData, yardObject;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          url = frontEndUtils.string.substitute(storage$1.coreConfig.endpoints.allFacilitiesNew, {
+            country: country.toLowerCase()
+          });
+          headers = _objectSpread2({
+            gStackCountry: country,
+            AUTHORIZATIONROLE: role
+          }, storage$1.activeLanguage === 'fi' ? {
+            language: 'en',
+            LANGUAGECODE: 'en'
+          } : {});
+          _context.next = 5;
+          return fetcher.get(url, {
+            headers: headers
+          });
+        case 5:
+          response = _context.sent;
+          facilitiesData = response.data.data;
+          yardObject = map$3(function (val) {
+            return {
+              yard_number: val.yard_number,
+              yard_name: val.yard_name
+            };
+          }, facilitiesData);
+          return _context.abrupt("return", yardObject);
+        case 11:
+          _context.prev = 11;
+          _context.t0 = _context["catch"](0);
+          return _context.abrupt("return", Promise.reject('Unable to fetch Facilities'));
+        case 14:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 11]]);
+  }));
+  return function getCobaltUserFacilities(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+var getCobaltUserRoles = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(country) {
+    var url, _yield$fetcher$get, data;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          url = storage$1.coreConfig.endpoints.getRoles;
+          _context.next = 4;
+          return fetcher.get(url, {
+            headers: _objectSpread2(_objectSpread2({}, fetcher.defaults.headers.common), {}, {
+              gStackCountry: country
+            })
+          });
+        case 4:
+          _yield$fetcher$get = _context.sent;
+          data = _yield$fetcher$get.data;
+          return _context.abrupt("return", data);
+        case 9:
+          _context.prev = 9;
+          _context.t0 = _context["catch"](0);
+          return _context.abrupt("return", Promise.reject('Unable to fetch Roles'));
+        case 12:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 9]]);
+  }));
+  return function getCobaltUserRoles(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
 fetcher.login = login;
 fetcher.oktaLogin = oktaLogin;
 fetcher.getConfig = getConfig;
@@ -9501,6 +9683,8 @@ fetcher.getPermissions = getPermissions;
 fetcher.getCoreAppPermissions = getCoreAppPermissions;
 fetcher.getInnovationHubToken = getInnovationHubToken;
 fetcher.getUserScopes = getUserScopes;
+fetcher.getCobaltUserFacilities = getCobaltUserFacilities;
+fetcher.getCobaltUserRoles = getCobaltUserRoles;
 
 var getRouteName = function getRouteName() {
   return window.location.pathname.split('/').splice(1)[0];
@@ -23380,6 +23564,10 @@ var spanish = {
   code: 'es',
   description: 'Spanish'
 };
+var finnish = {
+  code: 'fi',
+  description: 'Finnish'
+};
 var getLanguages = function getLanguages() {
   var selectedCountry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
   var stack = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'c';
@@ -23421,6 +23609,10 @@ var getLanguages = function getLanguages() {
       en: english,
       es: spanish
     },
+    FI: {
+      en: english,
+      fi: finnish
+    },
     IN: {
       en: english
     },
@@ -23453,7 +23645,7 @@ var LanguageMenu = function LanguageMenu(props) {
     className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1"
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Select, {
     label: locale('Language'),
-    options: formatOptions(Object.values(languageOptions)),
+    options: formatOptions(Object.values(languageOptions || {})),
     selectedOption: props.value,
     onChange: function onChange(e, option) {
       return props.handleChange(option.key);
@@ -23465,7 +23657,7 @@ var LanguageMenu = function LanguageMenu(props) {
   }));
 };
 
-var unique = function unique(roles) {
+var unique$1 = function unique(roles) {
   return roles.reduce(function (final, role) {
     var found = final.find(function (r) {
       return role.roleName === r.roleName;
@@ -23477,14 +23669,14 @@ var unique = function unique(roles) {
 };
 
 // Sort roles based on session country
-var filterRoles$4 = function filterRoles(roles) {
-  var filtered = unique(roles).filter(function (role) {
+var filterRoles$3 = function filterRoles(roles) {
+  var filtered = unique$1(roles).filter(function (role) {
     return role.roleName;
   });
   var byCountry = descend$1(prop$1('countryCode'));
   return sort$1(byCountry, filtered);
 };
-var RoleSelector$1 = function RoleSelector(_ref) {
+var RoleSelector$2 = function RoleSelector(_ref) {
   var handleChange = _ref.handleChange,
     value = _ref.value,
     roles = _ref.roles,
@@ -23497,7 +23689,7 @@ var RoleSelector$1 = function RoleSelector(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
     name: "role",
     label: "Role",
-    options: filterRoles$4(roles),
+    options: filterRoles$3(roles),
     onChange: function onChange(value) {
       var selectedValue = _typeof$1(value) === 'object' ? frontEndUtils.regex.beautifyRoleText(value.roleName) : value;
       var option = _typeof$1(value) === 'object' ? value : null;
@@ -23528,7 +23720,7 @@ var optionStyleProps = {
   rowHeight: 40,
   optionsMinHeight: 200
 };
-var YardNumberMenu$1 = function YardNumberMenu(_ref) {
+var YardNumberMenu$2 = function YardNumberMenu(_ref) {
   var selectedYard = _ref.selectedYard,
     name = _ref.name,
     handleChange = _ref.handleChange,
@@ -23634,7 +23826,7 @@ var YardNumberContainer = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var props = this.props,
         state = this.state;
-      return /*#__PURE__*/React__namespace.createElement(YardNumberMenu$1, {
+      return /*#__PURE__*/React__namespace.createElement(YardNumberMenu$2, {
         required: true,
         name: "selectedYard",
         label: "Yard",
@@ -23726,7 +23918,7 @@ var formatPhoneNumber = function formatPhoneNumber() {
   return "".concat(formattedNumber, " * ").concat(extension);
 };
 
-var EMPTY_PRINTERS$3 = {
+var EMPTY_PRINTERS$2 = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
@@ -23755,7 +23947,7 @@ var sessionOrDefault = function sessionOrDefault(label) {
   return function () {
     var printer_name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     var sessionDashboard = storage$1.getSessionItem('dashboard');
-    sessionDashboard.printers = sessionDashboard.printers || EMPTY_PRINTERS$3;
+    sessionDashboard.printers = sessionDashboard.printers || EMPTY_PRINTERS$2;
     var printerName = sessionDashboard.printers[label];
     return !isEmpty$2(printerName) ? printerName : printer_name;
   };
@@ -23784,14 +23976,14 @@ var getActivePrinters = (function (printersData) {
 var css_248z$9 = ".utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--title {\r\n  font-weight: 500;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--inputRow {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: flex-end;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--inputRow .ms-TextField-errorMessage {\r\n  position: absolute;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--textField {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: flex-end;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--prefix {\r\n  margin: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--testCallButton {\r\n  margin-left: 12px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--prefix8 {\r\n  margin: auto 2px auto 0;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings input {\r\n  margin-right: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--smallInfo {\r\n  margin-top: 2px;\r\n  opacity: 0.5;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings small {\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--statusIndicator {\r\n  position: absolute;\r\n  right: 5px;\r\n  height: 30px;\r\n  display: flex;\r\n  bottom: 1px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--statusIndicator .ms-Spinner-circle {\r\n  max-width: 20px !important;\r\n  max-height: 20px !important;\r\n  right: 5px;\r\n}\r\n\r\nmaterial-icon[name='check'] {\r\n  color: rgb(100, 181, 10);\r\n  font-size: 12px;\r\n}\r\n\r\nmaterial-icon[name='error_outline'] {\r\n  color: #a80000;\r\n  font-size: 12px;\r\n}\r\n";
 styleInject(css_248z$9);
 
-var EMPTY_PRINTERS$2 = {
+var EMPTY_PRINTERS$1 = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
   windshield_label_printers: '',
   text_printers: ''
 };
-var getHierarchyLevel$1 = function getHierarchyLevel(levelId) {
+var getHierarchyLevel = function getHierarchyLevel(levelId) {
   switch (levelId) {
     case 0:
       return 'country';
@@ -23801,8 +23993,8 @@ var getHierarchyLevel$1 = function getHierarchyLevel(levelId) {
       return '';
   }
 };
-var isInvalid$1 = either$1(isNil$1, isEmpty$2);
-var keysToBeDeleted$1 = ['openEmailDialog', 'openPhoneDialog', 'searchParam', 'selectedCountry', 'selectedCountryA3code', 'selectedCurrency', 'selectedRole', 'selectedTimeZone', 'selectedYard', 'showPhoneEntryOnEnter', 'yard'];
+var isInvalid = either$1(isNil$1, isEmpty$2);
+var keysToBeDeleted = ['openEmailDialog', 'openPhoneDialog', 'searchParam', 'selectedCountry', 'selectedCountryA3code', 'selectedCurrency', 'selectedRole', 'selectedTimeZone', 'selectedYard', 'showPhoneEntryOnEnter', 'yard'];
 
 // Handles changes to all inputs.
 var handleInputChange$2 = function handleInputChange(self) {
@@ -23812,14 +24004,14 @@ var handleInputChange$2 = function handleInputChange(self) {
       if (name === 'selectedRole') {
         var selectedValue = value.selectedValue,
           option = value.option;
-        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$2, 'printers');
+        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
         return self.setState({
           selectedRoleOption: option,
           selectedRole: selectedValue
         });
       } else if (name === 'selectedYardNumber') {
-        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$2, 'printers');
-        self.updatePhoneNumber(activePhoneNumber$2());
+        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
+        self.updatePhoneNumber(activePhoneNumber$1());
 
         // Ensure we fetch the proper roles per the entered yard
         var oldSelectedYard = self.state.selectedYardNumber;
@@ -23832,7 +24024,7 @@ var handleInputChange$2 = function handleInputChange(self) {
           });
           if (value !== oldSelectedYard && Boolean(value)) {
             self.setState({
-              printersData: EMPTY_PRINTERS$2
+              printersData: EMPTY_PRINTERS$1
             });
             self.getActivePrinters(value, false, yardCountryCode);
           }
@@ -23854,12 +24046,12 @@ var handleInputChange$2 = function handleInputChange(self) {
     return final;
   }, {});
 };
-var getSelectedYard$1 = function getSelectedYard(selectedNumber) {
+var getSelectedYard = function getSelectedYard(selectedNumber) {
   return storage$1.getLocalItem('login').yardList.find(function (yard) {
     return yard.number == selectedNumber;
   });
 };
-var pickUserSecurityLevel$1 = function pickUserSecurityLevel() {
+var pickUserSecurityLevel = function pickUserSecurityLevel() {
   var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return obj.userSecurityLevel || '0';
 };
@@ -23885,7 +24077,7 @@ var saveSettings$2 = function saveSettings(self) {
             };
             dashboardState = storage$1.getLocalItem('dashboard');
             cleanedDashboardState = pickBy$1(function (val, key) {
-              return !keysToBeDeleted$1.includes(key);
+              return !keysToBeDeleted.includes(key);
             }, dashboardState);
             storage$1.setLocalItem('dashboard', cleanedDashboardState);
             toPairs$1(self.state).forEach(function (_ref4) {
@@ -23911,11 +24103,11 @@ var saveSettings$2 = function saveSettings(self) {
             if (roleOptionFromState) {
               _roleOptionFromState$ = roleOptionFromState.levelId, levelId = _roleOptionFromState$ === void 0 ? -1 : _roleOptionFromState$, _roleOptionFromState$2 = roleOptionFromState.hierarchyId, hierarchyId = _roleOptionFromState$2 === void 0 ? -1 : _roleOptionFromState$2;
               storage$1.setLocalItem('settings', {
-                level: getHierarchyLevel$1(levelId),
+                level: getHierarchyLevel(levelId),
                 id: hierarchyId
               }, 'selectedHierarchy');
             }
-            if (!(isInvalid$1(selectedYard) || isInvalid$1(selectedLanguage) || isInvalid$1(selectedCurrency))) {
+            if (!(isInvalid(selectedYard) || isInvalid(selectedLanguage) || isInvalid(selectedCurrency))) {
               _context.next = 13;
               break;
             }
@@ -23938,7 +24130,7 @@ var saveSettings$2 = function saveSettings(self) {
             storage$1.setLocalItem('settings', roleName, 'selectedRole');
             storage$1.setLocalItem('lastSelectedYard', yard);
             storage$1.setLocalItem('dashboard', selectedCurrency || yard.yard_currency, 'selectedCurrency');
-            securityLevel = pickUserSecurityLevel$1(getSelectedYard$1(selectedYard));
+            securityLevel = pickUserSecurityLevel(getSelectedYard(selectedYard));
             storage$1.setSessionItem('securityLevel', Number(securityLevel));
             _context.next = 24;
             return fetcher.getUserScopes();
@@ -23992,7 +24184,7 @@ var selectedLanguage$1 = function selectedLanguage() {
   var _storage$getSessionIt3;
   return ((_storage$getSessionIt3 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt3 === void 0 ? void 0 : _storage$getSessionIt3.language) || 'en';
 };
-var selectedCurrency$1 = function selectedCurrency() {
+var selectedCurrency = function selectedCurrency() {
   var _storage$getSessionIt4;
   return ((_storage$getSessionIt4 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt4 === void 0 ? void 0 : _storage$getSessionIt4.selectedCurrency) || 'USD';
 };
@@ -24000,28 +24192,28 @@ var selectedCountryA3code$2 = function selectedCountryA3code() {
   var _storage$getSessionIt5;
   return ((_storage$getSessionIt5 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt5 === void 0 ? void 0 : _storage$getSessionIt5.selectedCountryA3code) || 'USA';
 };
-var activePrinters$2 = function activePrinters() {
+var activePrinters$1 = function activePrinters() {
   var _storage$getLocalItem;
-  return ((_storage$getLocalItem = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.printers) || EMPTY_PRINTERS$2;
+  return ((_storage$getLocalItem = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.printers) || EMPTY_PRINTERS$1;
 };
-var makeKeyValue$2 = function makeKeyValue(final, target) {
+var makeKeyValue$1 = function makeKeyValue(final, target) {
   final[target.label] = target.printer_name;
   return final;
 };
-var formatActivePrintersForState$2 = function formatActivePrintersForState() {
+var formatActivePrintersForState$1 = function formatActivePrintersForState() {
   var activePrinters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var printers = Array.isArray(activePrinters) ? activePrinters : [];
-  return printers.reduce(makeKeyValue$2, {});
+  return printers.reduce(makeKeyValue$1, {});
 };
-var activePhoneNumber$2 = function activePhoneNumber() {
+var activePhoneNumber$1 = function activePhoneNumber() {
   var _storage$getLocalItem2;
   return ((_storage$getLocalItem2 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.phoneNumber) || '';
 };
-var ringCentralEnabled$2 = function ringCentralEnabled() {
+var ringCentralEnabled$1 = function ringCentralEnabled() {
   var _storage$getLocalItem3;
   return ((_storage$getLocalItem3 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem3 === void 0 ? void 0 : _storage$getLocalItem3.ringCentralEnabled) || false;
 };
-var filterRoles$3 = function filterRoles(roles, countryCode) {
+var filterRoles$2 = function filterRoles(roles, countryCode) {
   return compose(uniqBy$1(prop$1('roleName')), filter$1(propEq$1('countryCode', countryCode)))(roles);
 };
 var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
@@ -24035,22 +24227,22 @@ var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty$2(_assertThisInitialized(_this), "state", _objectSpread2({
-      phoneNumber: activePhoneNumber$2(),
-      ringCentralEnabled: ringCentralEnabled$2(),
+      phoneNumber: activePhoneNumber$1(),
+      ringCentralEnabled: ringCentralEnabled$1(),
       selectedYardNumber: selectedYardNumber$2(),
       selectedCountry: selectedCountry$1(),
       selectedCountryA3code: selectedCountryA3code$2(),
       selectedLanguage: selectedLanguage$1(),
-      selectedCurrency: selectedCurrency$1(),
+      selectedCurrency: selectedCurrency(),
       roles: [],
       selectedRole: frontEndUtils.regex.beautifyRoleText(storage$1.userRole),
-      printersData: EMPTY_PRINTERS$2,
+      printersData: EMPTY_PRINTERS$1,
       loadingPrinters: false,
       oldActivePrinters: null
-    }, EMPTY_PRINTERS$2));
+    }, EMPTY_PRINTERS$1));
     _defineProperty$2(_assertThisInitialized(_this), "fetchRoles", function (countryCode) {
       fetcher.getUserRoles(countryCode).then(function (_roles) {
-        var roles = filterRoles$3(_roles, countryCode);
+        var roles = filterRoles$2(_roles, countryCode);
         var selectedRole = _this.state.selectedRole;
         _this.setState({
           roles: roles
@@ -24094,12 +24286,12 @@ var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
                 showLoading: false
               });
               if (firstTime && storage$1.getLocalItem('dashboard', 'printers')) {
-                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters$2()), {}, {
-                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters$2()) : _this.state.oldActivePrinters
+                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters$1()), {}, {
+                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters$1()) : _this.state.oldActivePrinters
                 }));
               } else {
                 response = getActivePrinters(printersData);
-                fromatted = formatActivePrintersForState$2(response);
+                fromatted = formatActivePrintersForState$1(response);
                 _this.setState(_objectSpread2({
                   oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, fromatted) : _this.state.oldActivePrinters
                 }, fromatted));
@@ -24137,8 +24329,8 @@ var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
       getRCExtensionStatus().then(function (response) {
         response && resetPhoneSettingsBasedOnRCStatus(response);
         _this2.setState({
-          ringCentralEnabled: ringCentralEnabled$2(),
-          phoneNumber: activePhoneNumber$2()
+          ringCentralEnabled: ringCentralEnabled$1(),
+          phoneNumber: activePhoneNumber$1()
         });
       });
       this.getActivePrinters(this.state.selectedYardNumber, true, this.state.selectedCountryA3code);
@@ -24178,7 +24370,7 @@ var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
         selectedYard: this.state.selectedYardNumber,
         handleChange: this.handleInputChange.selectedYardNumber,
         selectedCountry: this.state.selectedCountry
-      }), /*#__PURE__*/React__default["default"].createElement(RoleSelector$1, {
+      }), /*#__PURE__*/React__default["default"].createElement(RoleSelector$2, {
         roles: this.state.roles,
         value: this.state.selectedRole,
         handleChange: this.handleInputChange.selectedRole,
@@ -24214,12 +24406,12 @@ var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
   return SettingsView;
 }(React__default["default"].Component);
 
-var filterRoles$2 = function filterRoles(roles) {
+var filterRoles$1 = function filterRoles(roles) {
   return roles.filter(function (role) {
     return role.roleName;
   });
 };
-var RoleSelector = function RoleSelector(_ref) {
+var RoleSelector$1 = function RoleSelector(_ref) {
   var handleChange = _ref.handleChange,
     value = _ref.value,
     roles = _ref.roles,
@@ -24231,7 +24423,7 @@ var RoleSelector = function RoleSelector(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
     name: "role",
     label: "Role",
-    options: filterRoles$2(roles),
+    options: filterRoles$1(roles),
     onChange: function onChange(value) {
       var selectedValue = _typeof$1(value) === 'object' ? frontEndUtils.regex.beautifyRoleText(value.roleName) : value;
       var option = _typeof$1(value) === 'object' ? value : null;
@@ -24353,7 +24545,7 @@ var HierarchyMenu = function HierarchyMenu(props) {
 };
 
 var _excluded$2 = ["value", "handleChange", "yardOptions", "label", "disabled"];
-var YardNumberMenu = function YardNumberMenu(_ref) {
+var YardNumberMenu$1 = function YardNumberMenu(_ref) {
   var value = _ref.value,
     handleChange = _ref.handleChange,
     yardOptions = _ref.yardOptions;
@@ -24382,7 +24574,7 @@ var YardNumberMenu = function YardNumberMenu(_ref) {
   })));
 };
 
-var EMPTY_PRINTERS$1 = {
+var EMPTY_PRINTERS = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
@@ -24404,7 +24596,7 @@ var handleInputChange$1 = function handleInputChange(self) {
                 break;
               }
               selectedValue = value.selectedValue, option = value.option;
-              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
+              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
               roleName = option && option.roleName || ''; //pathOr('', ['selectedRoleOption', 'roleName'], nextState)
               isValidRole = self.state.roles.find(function (role) {
                 return role.roleName === roleName;
@@ -24421,8 +24613,8 @@ var handleInputChange$1 = function handleInputChange(self) {
                 hierarchies: hierarchies,
                 selectedHierarchyOption: null,
                 selectedYardNumber: null,
-                printersData: EMPTY_PRINTERS$1
-              }, EMPTY_PRINTERS$1));
+                printersData: EMPTY_PRINTERS
+              }, EMPTY_PRINTERS));
             case 10:
               return _context.abrupt("return", self.setState({
                 selectedRoleOption: option,
@@ -24433,7 +24625,7 @@ var handleInputChange$1 = function handleInputChange(self) {
                 _context.next = 32;
                 break;
               }
-              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
+              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
               country = value.country, _value$yard = value.yard, yard = _value$yard === void 0 ? null : _value$yard;
               countryId = country && country.split('-')[0];
               if (!countryId) {
@@ -24466,8 +24658,8 @@ var handleInputChange$1 = function handleInputChange(self) {
                   level: yard ? 'yard' : 'country'
                 },
                 selectedYardNumber: yard,
-                printersData: EMPTY_PRINTERS$1
-              }, EMPTY_PRINTERS$1));
+                printersData: EMPTY_PRINTERS
+              }, EMPTY_PRINTERS));
             case 30:
               _context.next = 43;
               break;
@@ -24476,7 +24668,7 @@ var handleInputChange$1 = function handleInputChange(self) {
                 _context.next = 43;
                 break;
               }
-              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
+              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
               if (!(value !== self.state.selectedYardNumber && Boolean(value))) {
                 _context.next = 42;
                 break;
@@ -24496,8 +24688,8 @@ var handleInputChange$1 = function handleInputChange(self) {
               return _context.abrupt("return", self.setState(function (state) {
                 return _objectSpread2({
                   selectedYardNumber: value,
-                  printersData: EMPTY_PRINTERS$1
-                }, EMPTY_PRINTERS$1);
+                  printersData: EMPTY_PRINTERS
+                }, EMPTY_PRINTERS);
               }));
             case 43:
               self.setState(function (state) {
@@ -24651,23 +24843,23 @@ var selectedCountryA3code$1 = function selectedCountryA3code() {
   var _storage$getSessionIt2;
   return ((_storage$getSessionIt2 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt2 === void 0 ? void 0 : _storage$getSessionIt2.selectedCountryA3code) || 'GBR';
 };
-var activePrinters$1 = function activePrinters() {
-  return storage$1.getLocalItem('dashboard', 'printers') || EMPTY_PRINTERS$1;
+var activePrinters = function activePrinters() {
+  return storage$1.getLocalItem('dashboard', 'printers') || EMPTY_PRINTERS;
 };
-var makeKeyValue$1 = function makeKeyValue(final, target) {
+var makeKeyValue = function makeKeyValue(final, target) {
   final[target.label] = target.printer_name;
   return final;
 };
-var formatActivePrintersForState$1 = function formatActivePrintersForState() {
+var formatActivePrintersForState = function formatActivePrintersForState() {
   var activePrinters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var printers = Array.isArray(activePrinters) ? activePrinters : [];
-  return printers.reduce(makeKeyValue$1, {});
+  return printers.reduce(makeKeyValue, {});
 };
-var activePhoneNumber$1 = function activePhoneNumber() {
+var activePhoneNumber = function activePhoneNumber() {
   var _storage$getLocalItem2;
   return ((_storage$getLocalItem2 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.phoneNumber) || '';
 };
-var ringCentralEnabled$1 = function ringCentralEnabled() {
+var ringCentralEnabled = function ringCentralEnabled() {
   var _storage$getLocalItem3;
   return ((_storage$getLocalItem3 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem3 === void 0 ? void 0 : _storage$getLocalItem3.ringCentralEnabled) || false;
 };
@@ -24704,7 +24896,7 @@ var getYardOptions = /*#__PURE__*/function () {
     return _ref7.apply(this, arguments);
   };
 }();
-var filterRoles$1 = function filterRoles(roles, invalidCodes) {
+var filterRoles = function filterRoles(roles, invalidCodes) {
   return compose(uniqBy$1(prop$1('roleName')), filter$1(compose(not$1, flip$3(includes$1)(invalidCodes), prop$1('countryCode'))))(roles);
 };
 var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
@@ -24718,8 +24910,8 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty$2(_assertThisInitialized(_this), "state", _objectSpread2({
-      phoneNumber: activePhoneNumber$1(),
-      ringCentralEnabled: ringCentralEnabled$1(),
+      phoneNumber: activePhoneNumber(),
+      ringCentralEnabled: ringCentralEnabled(),
       selectedYardNumber: selectedYardNumber$1(),
       selectedCountryA3code: selectedCountryA3code$1(),
       selectedRole: frontEndUtils.regex.beautifyRoleText(storage$1.userRole),
@@ -24727,9 +24919,9 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
       selectedHierarchyOption: storage$1.getLocalItem('settings', 'selectedHierarchyOption'),
       roles: [],
       hierarchies: [],
-      printersData: EMPTY_PRINTERS$1,
+      printersData: EMPTY_PRINTERS,
       oldActivePrinters: null
-    }, EMPTY_PRINTERS$1));
+    }, EMPTY_PRINTERS));
     _defineProperty$2(_assertThisInitialized(_this), "getRCAvailability", /*#__PURE__*/_asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
       var response;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
@@ -24741,8 +24933,8 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
             response = _context4.sent;
             resetPhoneSettingsBasedOnRCStatus(response);
             _this.setState({
-              ringCentralEnabled: ringCentralEnabled$1(),
-              phoneNumber: activePhoneNumber$1()
+              ringCentralEnabled: ringCentralEnabled(),
+              phoneNumber: activePhoneNumber()
             });
           case 5:
           case "end":
@@ -24775,12 +24967,12 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
                 showLoading: false
               });
               if (firstTime && storage$1.getLocalItem('dashboard', 'printers')) {
-                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters$1()), {}, {
-                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters$1()) : _this.state.oldActivePrinters
+                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters()), {}, {
+                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters()) : _this.state.oldActivePrinters
                 }));
               } else {
                 _activePrinters = getActivePrinters(printersData);
-                update = formatActivePrintersForState$1(_activePrinters);
+                update = formatActivePrintersForState(_activePrinters);
                 _this.setState(_objectSpread2({
                   oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, update) : _this.state.oldActivePrinters
                 }, update));
@@ -24822,7 +25014,7 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
             case 2:
               _roles = _context6.sent;
               // MEA and UK are both valid in UK portal so filter out the rest
-              roles = filterRoles$1(_roles, ['CAN', 'BRA', 'USA', 'IND']);
+              roles = filterRoles(_roles, ['CAN', 'BRA', 'USA', 'IND']);
               _context6.next = 6;
               return fetcher.getHierarchyOptions(storage$1.userRole);
             case 6:
@@ -24894,7 +25086,7 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React__default["default"].createElement("p", null, "Settings")), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "col-1-1 utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow",
         "data-e2e": "LocationAndLanguageRow"
-      }, /*#__PURE__*/React__default["default"].createElement(RoleSelector, {
+      }, /*#__PURE__*/React__default["default"].createElement(RoleSelector$1, {
         roles: roles,
         value: selectedRole,
         selectedCountryA3code: this.state.selectedCountryA3code,
@@ -24903,7 +25095,7 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
         hierarchies: hierarchies,
         value: this.state.selectedHierarchyOption,
         handleChange: this.handleInputChange.selectedHierarchyOption
-      }), /*#__PURE__*/React__default["default"].createElement(YardNumberMenu, {
+      }), /*#__PURE__*/React__default["default"].createElement(YardNumberMenu$1, {
         yardOptions: yardOptions,
         disabled: disableYardDropDown,
         value: this.state.selectedYardNumber,
@@ -24933,64 +25125,195 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
   return SettingsView;
 }(React__default["default"].Component);
 
-var EMPTY_PRINTERS = {
-  barcode_label_printers: '',
-  check_printers: '',
-  standard_printers: '',
-  windshield_label_printers: '',
-  text_printers: ''
+var unique = function unique(roles) {
+  return roles.reduce(function (final, role) {
+    var found = final.find(function (r) {
+      return role.roleName === r.roleName;
+    });
+    if (found) return final;
+    final.push(role);
+    return final;
+  }, []);
 };
-var getHierarchyLevel = function getHierarchyLevel(levelId) {
-  switch (levelId) {
-    case 0:
-      return 'country';
-    case 100:
-      return 'yard';
-    default:
-      return '';
+var RoleSelector = function RoleSelector(_ref) {
+  var handleChange = _ref.handleChange,
+    value = _ref.value,
+    roles = _ref.roles;
+  return /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
+    name: "role",
+    options: unique(roles),
+    onChange: function onChange(value) {
+      var selectedValue = value && value.roleName ? value.roleName : value;
+      handleChange({
+        selectedValue: selectedValue
+      });
+    },
+    displayOption: function displayOption(o) {
+      return o.roleName && locale(frontEndUtils.regex.capitalizeFirstLetter(frontEndUtils.regex.beautifyRoleText(o.roleName)));
+    },
+    serializeOption: function serializeOption(o) {
+      return o.roleName;
+    },
+    value: value && locale(frontEndUtils.regex.capitalizeFirstLetter(frontEndUtils.regex.beautifyRoleText(value))),
+    placeholder: "Role",
+    label: locale('Role'),
+    required: true
+  });
+};
+
+var YardNumberMenu = function YardNumberMenu(_ref) {
+  var handleChange = _ref.handleChange,
+    value = _ref.value,
+    yardOptions = _ref.yardOptions;
+  return /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
+    name: "facility",
+    options: yardOptions,
+    onChange: handleChange,
+    displayOption: function displayOption(yard) {
+      return "".concat(yard.yard_number, " - ").concat(yard.yard_name);
+    },
+    value: value,
+    placeholder: "Facility",
+    label: locale('Facility'),
+    required: true
+  });
+};
+
+var COUNTRIES$1 = {
+  DE: {
+    name: 'Germany',
+    code: 'DEU'
+  },
+  ES: {
+    name: 'Spain',
+    code: 'ESP'
+  },
+  FI: {
+    name: 'Finland',
+    code: 'FIN'
   }
 };
-var isInvalid = either$1(isNil$1, isEmpty$2);
-var keysToBeDeleted = ['openEmailDialog', 'openPhoneDialog', 'searchParam', 'selectedCountry', 'selectedCountryA3code', 'selectedCurrency', 'selectedRole', 'selectedTimeZone', 'selectedYard', 'showPhoneEntryOnEnter', 'yard'];
+var validCountry = function validCountry(value) {
+  return value && includes$1(value, keys$3(COUNTRIES$1)) ? locale(COUNTRIES$1[value].name) : value || '';
+};
+var CountrySelector = function CountrySelector(_ref) {
+  var handleChange = _ref.handleChange,
+    value = _ref.value,
+    countries = _ref.countries;
+  return /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
+    name: "country",
+    options: countries,
+    onChange: handleChange,
+    displayOption: function displayOption(country) {
+      if (!country || !COUNTRIES$1[country]) return country || '';
+      return locale(COUNTRIES$1[country].name);
+    },
+    value: validCountry(value),
+    placeholder: "Country",
+    label: locale('Country'),
+    required: true
+  });
+};
+
+var COUNTRIES = {
+  DE: {
+    name: 'Germany',
+    code: 'DEU'
+  },
+  ES: {
+    name: 'Spain',
+    code: 'ESP'
+  },
+  FI: {
+    name: 'Finland',
+    code: 'FIN'
+  }
+};
+var getRolesMap = function getRolesMap(userRoles) {
+  var rolesMap = {};
+  userRoles.map(function (obj) {
+    if (has$2(obj.roleName, rolesMap)) rolesMap[obj.roleName] = [].concat(_toConsumableArray(rolesMap[obj.roleName]), [obj.hierarchyId]);else rolesMap[obj.roleName] = [obj.hierarchyId];
+  });
+  storage$1.setLocalItem('settings', rolesMap, 'rolesMap');
+  return rolesMap;
+};
+var getUserRolesFromFetcher = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var promises, userRoles, result;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          promises = keys$3(COUNTRIES).map(function (country) {
+            return fetcher.getCobaltUserRoles(COUNTRIES[country].code);
+          });
+          _context.next = 3;
+          return Promise.all(promises);
+        case 3:
+          userRoles = _context.sent;
+          result = keys$3(COUNTRIES).map(function (country, index) {
+            return {
+              country: country,
+              roles: userRoles[index]
+            };
+          }).filter(function (roleByCountry) {
+            return !isEmpty$2(roleByCountry.roles);
+          });
+          return _context.abrupt("return", result);
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getUserRolesFromFetcher() {
+    return _ref.apply(this, arguments);
+  };
+}();
+var getSelectedYardNumberAndName = function getSelectedYardNumberAndName() {
+  var _storage$getLocalItem = storage$1.getLocalItem('dashboard'),
+    selectedYard = _storage$getLocalItem.selectedYard,
+    yardList = _storage$getLocalItem.yardList;
+  var selectedYardObject = head$1(filter$1(function (yard) {
+    return yard.yard_number === selectedYard;
+  }, yardList)) || {};
+  return !isEmpty$2(selectedYardObject) ? "".concat(selectedYardObject.yard_number, " - ").concat(selectedYardObject.yard_name) : null;
+};
+var getAccessCountries = function getAccessCountries(userRoles) {
+  return userRoles.map(function (rolesByCountry) {
+    return rolesByCountry.country;
+  });
+};
+var getActiveCountryObjByCountry = function getActiveCountryObjByCountry(userRoles, selectedCountry) {
+  return userRoles.find(function (rolesByCountry) {
+    return rolesByCountry.country === selectedCountry;
+  });
+};
 
 // Handles changes to all inputs.
 var handleInputChange = function handleInputChange(self) {
-  var yardCountryCode = self.state.selectedCountryA3code;
+  self.state.selectedCountryA3code;
   var handleChange = function handleChange(name) {
     return function (value) {
-      if (name === 'selectedRole') {
+      if (name === 'selectedCountry') {
+        return self.setState({
+          selectedCountry: value
+        });
+      } else if (name === 'selectedRole') {
         var selectedValue = value.selectedValue,
           option = value.option;
-        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
         return self.setState({
           selectedRoleOption: option,
           selectedRole: selectedValue
         });
       } else if (name === 'selectedYardNumber') {
-        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
-        self.updatePhoneNumber(activePhoneNumber());
-
-        // Ensure we fetch the proper roles per the entered yard
-        var oldSelectedYard = self.state.selectedYardNumber;
-        fetcher.getYardNumbers(value).then(function (yards) {
-          var currentYard = find$1(propEq$1('yard_number', parseInt(value)), yards);
-          if (currentYard) yardCountryCode = currentYard.yard_country_code;
-          self.fetchRoles(yardCountryCode);
-          self.setState({
-            selectedCountryA3code: yardCountryCode
-          });
-          if (value !== oldSelectedYard && Boolean(value)) {
-            self.setState({
-              printersData: EMPTY_PRINTERS
-            });
-            self.getActivePrinters(value, false, yardCountryCode);
-          }
+        return self.setState({
+          selectedYardNumber: value
         });
-        return self.setState(function (state) {
-          return {
-            selectedRole: '',
-            selectedYardNumber: value
-          };
+      } else if (name === 'selectedYardNumberAndName') {
+        var yardNumber = value.yard_number;
+        return self.setState({
+          selectedYardNumber: yardNumber,
+          selectedYardNumberAndName: value
         });
       }
       self.setState(function (state) {
@@ -25003,131 +25326,39 @@ var handleInputChange = function handleInputChange(self) {
     return final;
   }, {});
 };
-var getSelectedYard = function getSelectedYard(selectedNumber) {
-  return storage$1.getLocalItem('login').yardList.find(function (yard) {
-    return yard.number == selectedNumber;
-  });
-};
-var pickUserSecurityLevel = function pickUserSecurityLevel() {
-  var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return obj.userSecurityLevel || '0';
-};
 var saveSettings = function saveSettings(self) {
-  return /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
-      var _yard$yard_country_co, _yard$yard_country_co2;
-      var printers, dashboardSessionState, oldSettings, dashboardState, cleanedDashboardState, _self$state, selectedYard, selectedRole, selectedLanguage, selectedCurrency, roles, roleOptionFromState, roleName, _roleOptionFromState$, levelId, _roleOptionFromState$2, hierarchyId, yard, securityLevel, userScopes, newSettings;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            printers = {}; // ******* Hack to be remved ******* create date July 12, 2019 *******
-            // Just a hack to ensure yard gets changed to avoid issue caused by proquote app which is using old toolkit
-            // remove this hack once pro quote app update its tool kit version to latest
-            dashboardSessionState = storage$1.getSessionItem('dashboard');
-            oldSettings = {
-              selectedCurrency: dashboardSessionState.selectedCurrency,
-              selectedYard: dashboardSessionState.selectedYard,
-              selectedCountry: dashboardSessionState.selectedCountry,
-              language: dashboardSessionState.language,
-              selectedRole: storage$1.getLocalItem('settings').selectedRole,
-              activePrinters: self.state.oldActivePrinters
-            };
-            dashboardState = storage$1.getLocalItem('dashboard');
-            cleanedDashboardState = pickBy$1(function (val, key) {
-              return !keysToBeDeleted.includes(key);
-            }, dashboardState);
-            storage$1.setLocalItem('dashboard', cleanedDashboardState);
-            toPairs$1(self.state).forEach(function (_ref4) {
-              var _ref5 = _slicedToArray(_ref4, 2),
-                key = _ref5[0],
-                value = _ref5[1];
-              if (key.endsWith('_printers')) {
-                printers[key] = (value || '').toUpperCase();
-              } else {
-                if (key === 'printersData') {
-                  value = JSON.stringify(value);
-                }
-                if (key === 'phoneNumber') {
-                  storage$1.setLocalItem('dashboard', value, 'phoneNumber');
-                }
-              }
-            });
-            _self$state = self.state, selectedYard = _self$state.selectedYardNumber, selectedRole = _self$state.selectedRole, selectedLanguage = _self$state.selectedLanguage, selectedCurrency = _self$state.selectedCurrency, roles = _self$state.roles, _self$state.selectedRoleOption;
-            roleOptionFromState = roles.find(function (roleOption) {
-              return frontEndUtils.regex.beautifyRoleText(roleOption.roleName) === selectedRole;
-            }) || head$1(roles);
-            roleName = propOr$1('', 'roleName', roleOptionFromState); // Update hierarchy on local storage when role changes
-            if (roleOptionFromState) {
-              _roleOptionFromState$ = roleOptionFromState.levelId, levelId = _roleOptionFromState$ === void 0 ? -1 : _roleOptionFromState$, _roleOptionFromState$2 = roleOptionFromState.hierarchyId, hierarchyId = _roleOptionFromState$2 === void 0 ? -1 : _roleOptionFromState$2;
-              storage$1.setLocalItem('settings', {
-                level: getHierarchyLevel(levelId),
-                id: hierarchyId
-              }, 'selectedHierarchy');
-            }
-            if (!(isInvalid(selectedYard) || isInvalid(selectedLanguage) || isInvalid(selectedCurrency))) {
-              _context.next = 13;
-              break;
-            }
-            return _context.abrupt("return");
-          case 13:
-            yard = self.yardsHistory.get(selectedYard)[selectedYard];
-            storage$1.setSessionItem('dashboard', _objectSpread2(_objectSpread2({}, storage$1.getSessionItem('dashboard')), {}, {
-              selectedCurrency: selectedCurrency || yard.yard_currency,
-              selectedCountry: (_yard$yard_country_co = yard.yard_country_code) === null || _yard$yard_country_co === void 0 ? void 0 : _yard$yard_country_co.slice(0, 2),
-              selectedCountryA3code: yard.yard_country_code,
-              selectedYard: yard.yard_number,
-              selectedTimeZone: yard.time_zone,
-              language: selectedLanguage || 'en',
-              selectedRole: roleName,
-              printers: printers,
-              yard: yard
-            }));
-            storage$1.setLocalItem('dashboard', printers, 'printers');
-            storage$1.setLocalItem('dashboard', selectedLanguage || 'en', 'language');
-            storage$1.setLocalItem('settings', roleName, 'selectedRole');
-            storage$1.setLocalItem('lastSelectedYard', yard);
-            storage$1.setLocalItem('dashboard', selectedCurrency || yard.yard_currency, 'selectedCurrency');
-            securityLevel = pickUserSecurityLevel(getSelectedYard(selectedYard));
-            storage$1.setSessionItem('securityLevel', Number(securityLevel));
-            _context.next = 24;
-            return fetcher.getUserScopes();
-          case 24:
-            userScopes = _context.sent;
-            storage$1.setLocalItem('login', userScopes, 'userAppScopes');
-            // persist user preferences
-            _context.next = 28;
-            return fetcher.setUserPreferences('oph', {
-              selectedCurrency: selectedCurrency || yard.yard_currency,
-              language: selectedLanguage || 'en',
-              // TODO Remove this after remove role selection
-              selectedRole: roleName,
-              printers: printers,
-              yard: yard,
-              securityLevel: securityLevel
-            }, 'USA');
-          case 28:
-            self.setState({
-              oldActivePrinters: printers
-            });
-            newSettings = {
-              selectedCurrency: selectedCurrency || yard.yard_currency,
-              selectedYard: yard.yard_number,
-              selectedCountry: (_yard$yard_country_co2 = yard.yard_country_code) === null || _yard$yard_country_co2 === void 0 ? void 0 : _yard$yard_country_co2.slice(0, 2),
-              language: selectedLanguage || 'en',
-              selectedRole: roleName,
-              activePrinters: self.activePrinters
-            };
-            self.props.onSave(oldSettings, newSettings);
-          case 31:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref3.apply(this, arguments);
+  return function () {
+    var _self$state = self.state,
+      selectedCountry = _self$state.selectedCountry,
+      selectedRole = _self$state.selectedRole,
+      selectedYard = _self$state.selectedYardNumber,
+      language = _self$state.selectedLanguage,
+      yardOptions = _self$state.yardOptions;
+    if (!selectedCountry || !language || !selectedYard || !selectedRole) {
+      return;
+    }
+    var selectedCountryA3code = COUNTRIES[selectedCountry].code;
+    var dashboard = {
+      language: language,
+      selectedCountry: selectedCountry,
+      selectedCountryA3code: selectedCountryA3code,
+      selectedYard: selectedYard
     };
-  }();
+    localStorage.setItem('dashboard', JSON.stringify(dashboard));
+    sessionStorage.setItem('dashboard', JSON.stringify(dashboard));
+    storage$1.setLocalItem('dashboard', {
+      yard_number: selectedYard
+    }, 'yard');
+    storage$1.setSessionItem('dashboard', {
+      yard_number: selectedYard
+    }, 'yard');
+    storage$1.setLocalItem('dashboard', yardOptions, 'yardList');
+    storage$1.setSessionItem('dashboard', yardOptions, 'yardList');
+    storage$1.setLocalItem('settings', selectedRole, 'selectedRole');
+    if (self.props.onSave) {
+      self.props.onSave();
+    }
+  };
 };
 var selectedYardNumber = function selectedYardNumber() {
   var _storage$getSessionIt;
@@ -25141,37 +25372,9 @@ var selectedLanguage = function selectedLanguage() {
   var _storage$getSessionIt3;
   return ((_storage$getSessionIt3 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt3 === void 0 ? void 0 : _storage$getSessionIt3.language) || 'en';
 };
-var selectedCurrency = function selectedCurrency() {
-  var _storage$getSessionIt4;
-  return ((_storage$getSessionIt4 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt4 === void 0 ? void 0 : _storage$getSessionIt4.selectedCurrency) || 'USD';
-};
 var selectedCountryA3code = function selectedCountryA3code() {
-  var _storage$getSessionIt5;
-  return ((_storage$getSessionIt5 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt5 === void 0 ? void 0 : _storage$getSessionIt5.selectedCountryA3code) || 'USA';
-};
-var activePrinters = function activePrinters() {
-  var _storage$getLocalItem;
-  return ((_storage$getLocalItem = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.printers) || EMPTY_PRINTERS;
-};
-var makeKeyValue = function makeKeyValue(final, target) {
-  final[target.label] = target.printer_name;
-  return final;
-};
-var formatActivePrintersForState = function formatActivePrintersForState() {
-  var activePrinters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var printers = Array.isArray(activePrinters) ? activePrinters : [];
-  return printers.reduce(makeKeyValue, {});
-};
-var activePhoneNumber = function activePhoneNumber() {
-  var _storage$getLocalItem2;
-  return ((_storage$getLocalItem2 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.phoneNumber) || '';
-};
-var ringCentralEnabled = function ringCentralEnabled() {
-  var _storage$getLocalItem3;
-  return ((_storage$getLocalItem3 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem3 === void 0 ? void 0 : _storage$getLocalItem3.ringCentralEnabled) || false;
-};
-var filterRoles = function filterRoles(roles, countryCode) {
-  return compose(uniqBy$1(prop$1('roleName')), filter$1(propEq$1('countryCode', countryCode)))(roles);
+  var _storage$getSessionIt4;
+  return ((_storage$getSessionIt4 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt4 === void 0 ? void 0 : _storage$getSessionIt4.selectedCountryA3code) || 'USA';
 };
 var SettingsView = /*#__PURE__*/function (_React$Component) {
   _inherits$2(SettingsView, _React$Component);
@@ -25183,126 +25386,215 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty$2(_assertThisInitialized(_this), "state", _objectSpread2({
-      phoneNumber: activePhoneNumber(),
-      ringCentralEnabled: ringCentralEnabled(),
+    _defineProperty$2(_assertThisInitialized(_this), "state", {
       selectedYardNumber: selectedYardNumber(),
       selectedCountry: selectedCountry(),
       selectedCountryA3code: selectedCountryA3code(),
       selectedLanguage: selectedLanguage(),
-      selectedCurrency: selectedCurrency(),
       roles: [],
-      selectedRole: frontEndUtils.regex.beautifyRoleText(storage$1.userRole),
-      printersData: EMPTY_PRINTERS,
-      loadingPrinters: false,
-      oldActivePrinters: null
-    }, EMPTY_PRINTERS));
-    _defineProperty$2(_assertThisInitialized(_this), "fetchRoles", function (countryCode) {
-      fetcher.getUserRoles(countryCode).then(function (_roles) {
-        var roles = filterRoles(_roles, countryCode);
-        var selectedRole = _this.state.selectedRole;
-        _this.setState({
-          roles: roles
-        });
-        if (selectedRole && !find$1(compose(equals$1(selectedRole), frontEndUtils.regex.beautifyRoleText, prop$1('roleName')), roles)) {
-          _this.setState({
-            selectedRole: ''
-          });
-        }
-      }).catch(function (err) {
-        _this.setState({
-          roles: [],
-          selectedRole: ''
-        });
-      });
+      countries: [],
+      userRoles: [],
+      yardOptions: [],
+      selectedYardNumberAndName: getSelectedYardNumberAndName() || null,
+      selectedRole: storage$1.getLocalItem('settings').selectedRole || '',
+      showLoading: false
     });
-    _defineProperty$2(_assertThisInitialized(_this), "getActivePrinters", /*#__PURE__*/function () {
-      var _ref6 = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(yardNumber) {
-        var firstTime,
-          countryA3code,
-          printersData,
-          response,
-          fromatted,
-          _args2 = arguments;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+    _defineProperty$2(_assertThisInitialized(_this), "fetchFacilititesForRole", /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(roleName, activeCountryObj) {
+        var _activeCountryObj$rol;
+        var allFacilities, rolesMap, yardOptions;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
             case 0:
-              firstTime = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : false;
-              countryA3code = _args2.length > 2 ? _args2[2] : undefined;
+              if (!(!roleName || !(activeCountryObj !== null && activeCountryObj !== void 0 && (_activeCountryObj$rol = activeCountryObj.roles) !== null && _activeCountryObj$rol !== void 0 && _activeCountryObj$rol.length))) {
+                _context.next = 3;
+                break;
+              }
               _this.setState({
-                loadingPrinters: true,
-                showLoading: true
+                yardOptions: []
               });
-              _context2.next = 5;
-              return fetcher.getPrintersForYard(yardNumber, countryA3code);
-            case 5:
-              printersData = _context2.sent;
+              return _context.abrupt("return");
+            case 3:
+              if (!includes$1(roleName, pluck$1('roleName', (activeCountryObj === null || activeCountryObj === void 0 ? void 0 : activeCountryObj.roles) || []))) {
+                _context.next = 22;
+                break;
+              }
+              _context.prev = 4;
+              if (COUNTRIES[_this.state.selectedCountry]) {
+                _context.next = 8;
+                break;
+              }
               _this.setState({
-                printersData: printersData,
-                loadingPrinters: false,
-                showLoading: false
+                yardOptions: []
               });
-              if (firstTime && storage$1.getLocalItem('dashboard', 'printers')) {
-                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters()), {}, {
-                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters()) : _this.state.oldActivePrinters
-                }));
-              } else {
-                response = getActivePrinters(printersData);
-                fromatted = formatActivePrintersForState(response);
-                _this.setState(_objectSpread2({
-                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, fromatted) : _this.state.oldActivePrinters
-                }, fromatted));
-              }
+              return _context.abrupt("return");
             case 8:
+              _context.next = 10;
+              return fetcher.getCobaltUserFacilities(COUNTRIES[_this.state.selectedCountry].code, roleName);
+            case 10:
+              allFacilities = _context.sent;
+              rolesMap = getRolesMap((activeCountryObj === null || activeCountryObj === void 0 ? void 0 : activeCountryObj.roles) || []);
+              if (!includes$1(_this.state.selectedYardNumber, rolesMap[roleName])) {
+                _this.setState({
+                  selectedYardNumber: '',
+                  selectedYardNumberAndName: ''
+                });
+              }
+              yardOptions = filter$1(function (yard) {
+                return includes$1(yard.yard_number, rolesMap[roleName]);
+              }, allFacilities);
+              _this.setState({
+                yardOptions: yardOptions
+              });
+              _context.next = 20;
+              break;
+            case 17:
+              _context.prev = 17;
+              _context.t0 = _context["catch"](4);
+              _this.setState({
+                yardOptions: []
+              });
+            case 20:
+              _context.next = 23;
+              break;
+            case 22:
+              _this.setState({
+                selectedRole: '',
+                yardOptions: []
+              });
+            case 23:
             case "end":
-              return _context2.stop();
+              return _context.stop();
           }
-        }, _callee2);
+        }, _callee, null, [[4, 17]]);
       }));
-      return function (_x2) {
-        return _ref6.apply(this, arguments);
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
       };
     }());
-    _defineProperty$2(_assertThisInitialized(_this), "updatePhoneNumber", function (phoneNumber) {
-      _this.setState({
-        phoneNumber: phoneNumber
-      });
-    });
     _defineProperty$2(_assertThisInitialized(_this), "handleInputChange", handleInputChange(_assertThisInitialized(_this)));
     _defineProperty$2(_assertThisInitialized(_this), "saveSettings", saveSettings(_assertThisInitialized(_this)));
     _defineProperty$2(_assertThisInitialized(_this), "yardsHistory", new Map());
-    _defineProperty$2(_assertThisInitialized(_this), "setPrinterData", function (name) {
-      return function (value) {
-        _this.setState(_defineProperty$2({}, name, value));
-      };
-    });
     return _this;
-  } // componentWillMount() {
-  //   this.fetchRoles(this.state.selectedCountryA3code)
-  //   getRCExtensionStatus().then((response) => {
-  //     response && resetPhoneSettingsBasedOnRCStatus(response)
-  //     this.setState({
-  //       ringCentralEnabled: ringCentralEnabled(),
-  //       phoneNumber: activePhoneNumber(),
-  //     })
-  //   })
-  //   this.getActivePrinters(
-  //     this.state.selectedYardNumber,
-  //     true,
-  //     this.state.selectedCountryA3code,
-  //   )
-  // }
+  }
   _createClass$2(SettingsView, [{
-    key: "activePrinters",
-    get: function get() {
-      return {
-        barcode_label_printers: this.state.barcode_label_printers,
-        check_printers: this.state.check_printers,
-        standard_printers: this.state.standard_printers,
-        windshield_label_printers: this.state.windshield_label_printers,
-        text_printers: this.state.text_printers
-      };
-    }
+    key: "componentWillMount",
+    value: function () {
+      var _componentWillMount = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var _activeCountryObj$rol2;
+        var userRoles, countries, _this$state, selectedCountry, selectedRole, activeCountryObj, firstRole;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return getUserRolesFromFetcher();
+            case 2:
+              userRoles = _context2.sent;
+              countries = getAccessCountries(userRoles);
+              _this$state = this.state, selectedCountry = _this$state.selectedCountry, selectedRole = _this$state.selectedRole;
+              if (!selectedCountry) {
+                selectedCountry = head$1(countries) || '';
+              }
+              activeCountryObj = getActiveCountryObjByCountry(userRoles, selectedCountry);
+              this.setState({
+                selectedCountry: (activeCountryObj === null || activeCountryObj === void 0 ? void 0 : activeCountryObj.country) || selectedCountry,
+                countries: countries,
+                roles: (activeCountryObj === null || activeCountryObj === void 0 ? void 0 : activeCountryObj.roles) || [],
+                userRoles: userRoles
+              });
+              if (!(selectedRole && activeCountryObj)) {
+                _context2.next = 13;
+                break;
+              }
+              _context2.next = 11;
+              return this.fetchFacilititesForRole(selectedRole, activeCountryObj);
+            case 11:
+              _context2.next = 19;
+              break;
+            case 13:
+              if (!((activeCountryObj === null || activeCountryObj === void 0 ? void 0 : (_activeCountryObj$rol2 = activeCountryObj.roles) === null || _activeCountryObj$rol2 === void 0 ? void 0 : _activeCountryObj$rol2.length) > 0)) {
+                _context2.next = 19;
+                break;
+              }
+              firstRole = activeCountryObj.roles[0];
+              if (!firstRole) {
+                _context2.next = 19;
+                break;
+              }
+              this.setState({
+                selectedRole: firstRole.roleName
+              });
+              _context2.next = 19;
+              return this.fetchFacilititesForRole(firstRole.roleName, activeCountryObj);
+            case 19:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function componentWillMount() {
+        return _componentWillMount.apply(this, arguments);
+      }
+      return componentWillMount;
+    }()
+  }, {
+    key: "componentWillUpdate",
+    value: function () {
+      var _componentWillUpdate = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(nextProps, nextState) {
+        var activeCountryObj, _activeCountryObj;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!(nextState.selectedCountry !== this.state.selectedCountry)) {
+                _context3.next = 5;
+                break;
+              }
+              this.setState({
+                selectedRole: null,
+                selectedYardNumber: null,
+                selectedYardNumberAndName: null,
+                yardOptions: [],
+                selectedLanguage: null
+              });
+              if (nextState.selectedCountry) {
+                activeCountryObj = getActiveCountryObjByCountry(this.state.userRoles, nextState.selectedCountry);
+                this.setState({
+                  roles: (activeCountryObj === null || activeCountryObj === void 0 ? void 0 : activeCountryObj.roles) || []
+                });
+              } else {
+                this.setState({
+                  roles: []
+                });
+              }
+              _context3.next = 11;
+              break;
+            case 5:
+              if (!(nextState.selectedRole !== this.state.selectedRole)) {
+                _context3.next = 11;
+                break;
+              }
+              this.setState({
+                selectedYardNumber: null,
+                selectedYardNumberAndName: null
+              });
+              if (!nextState.selectedRole) {
+                _context3.next = 11;
+                break;
+              }
+              _activeCountryObj = getActiveCountryObjByCountry(this.state.userRoles, nextState.selectedCountry);
+              _context3.next = 11;
+              return this.fetchFacilititesForRole(nextState.selectedRole, _activeCountryObj);
+            case 11:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function componentWillUpdate(_x3, _x4) {
+        return _componentWillUpdate.apply(this, arguments);
+      }
+      return componentWillUpdate;
+    }()
   }, {
     key: "render",
     value: function render() {
@@ -25310,7 +25602,50 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
         className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm"
       }, this.props.width > 760 && /*#__PURE__*/React__default["default"].createElement(ProfileDetails, {
         logout: this.props.onLogoutItemClicked
-      }));
+      }), /*#__PURE__*/React__default["default"].createElement("form", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsHeader"
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+        name: "gear",
+        variant: "solid"
+      }), /*#__PURE__*/React__default["default"].createElement("p", null, "Settings")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "col-1-1 utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow",
+        "data-e2e": "LocationAndLanguageRow"
+      }, /*#__PURE__*/React__default["default"].createElement(CountrySelector, {
+        countries: this.state.countries || [],
+        value: this.state.selectedCountry,
+        handleChange: this.handleInputChange.selectedCountry
+      }), /*#__PURE__*/React__default["default"].createElement(RoleSelector, {
+        roles: this.state.roles,
+        value: this.state.selectedRole,
+        handleChange: this.handleInputChange.selectedRole
+      }), /*#__PURE__*/React__default["default"].createElement(YardNumberMenu, {
+        handleChange: this.handleInputChange.selectedYardNumberAndName,
+        value: this.state.selectedYardNumberAndName,
+        yardOptions: this.state.yardOptions
+      }), /*#__PURE__*/React__default["default"].createElement(LanguageMenu, {
+        value: this.state.selectedLanguage,
+        handleChange: this.handleInputChange.selectedLanguage,
+        selectedCountry: this.state.selectedCountry,
+        stack: "c"
+      }))), /*#__PURE__*/React__default["default"].createElement("hr", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr"
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox",
+        "data-e2e": "saveButton"
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Button, {
+        primary: true,
+        type: "submit",
+        onClick: this.saveSettings
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+        name: "floppy-disk",
+        variant: "regular"
+      }), /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--saveTxt"
+      }, "Save"))), this.state.showLoading && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--spinner"
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Spinner, {
+        size: "60px"
+      })));
     }
   }]);
   return SettingsView;
@@ -68500,12 +68835,13 @@ var formatNumber = function formatNumber(number) {
   return sign * Math.abs(number) + unitlist[unit];
 };
 
-var css_248z$2 = ".utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: absolute;\r\n  background: #3A4454;\r\n  min-width: 50px;\r\n  max-width: 50px;\r\n  height: 100%;\r\n  color: #ffffff;\r\n  font-size: 14px;\r\n  z-index: 101;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts {\r\n  min-width: 100px;\r\n  max-width: 100px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader {\r\n  min-width: 0px;\r\n  max-width: 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen {\r\n  max-width: 500px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons{\r\n  min-width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton{\r\n  min-width: auto;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  -ms-overflow-style: none;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu::-webkit-scrollbar { \r\n  display: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  display: flex;\r\n  width: 100%;\r\n  padding: 6px 12px 6px 12px;\r\n  border-radius: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled {\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected {\r\n  color: #323130;\r\n  background-color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelectedStatus {\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  margin-left: auto;\r\n  margin-right: 10px;\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px;\r\n  text-align: right;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable:not(:hover) .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: auto;\r\n  text-align: auto;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px !important;\r\n  text-align: right !important;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu {\r\n  background-color: #73A6FF;\r\n  transition: background-color 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  margin-left: auto;\r\n  font-size: 12px;\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount {\r\n  margin: 0 10px 0 auto;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  min-width: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  font-size: 14px;\r\n  /* width: 20px; */\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelectedStatus .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelectedStatus .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 0px;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 12px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 0;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  margin-top: 2px;\r\n  font-weight: 100;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 2px 10px 0 10px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 0 5px 0 0;\r\n  font-weight: 600;\r\n  margin-left: 0px;\r\n  cursor: auto;\r\n  cursor: initial;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  margin: 0;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  margin-right: 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding-left: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName > span {\r\n  display: inline;\r\n  display: initial;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2 {\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 {\r\n  display: flex;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding: 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--statusColor {\r\n  position: absolute;\r\n  width: 10px;\r\n  height: 95%;\r\n  left: -13px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 13px;\r\n  margin-left: 1px;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 100%;\r\n  margin-left: 1px;\r\n  transition-delay: 0.25s;\r\n}";
+var css_248z$2 = ".utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: absolute;\r\n  background: #3A4454;\r\n  min-width: 50px;\r\n  max-width: 50px;\r\n  height: 100%;\r\n  color: #ffffff;\r\n  font-size: 14px;\r\n  z-index: 101;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu {\r\n  min-width: 70px;\r\n  max-width: 70px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts {\r\n  min-width: 100px;\r\n  max-width: 100px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader {\r\n  min-width: 0px;\r\n  max-width: 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen {\r\n  max-width: 500px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons{\r\n  min-width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton{\r\n  min-width: auto;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  -ms-overflow-style: none;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu::-webkit-scrollbar { \r\n  display: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  display: flex;\r\n  width: 100%;\r\n  padding: 6px 12px 6px 12px;\r\n  border-radius: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled {\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected {\r\n  color: #323130;\r\n  background-color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelectedStatus {\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  margin-left: auto;\r\n  margin-right: 10px;\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px;\r\n  text-align: right;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable:not(:hover) .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: auto;\r\n  text-align: auto;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px !important;\r\n  text-align: right !important;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu {\r\n  background-color: #73A6FF;\r\n  transition: background-color 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  margin-left: auto;\r\n  font-size: 12px;\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount {\r\n  margin: 0 10px 0 auto;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  min-width: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  font-size: 14px;\r\n  /* width: 20px; */\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelectedStatus .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelectedStatus .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1NoHover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  margin-right: 6px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 0px;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons i, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 12px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 0;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  margin-top: 2px;\r\n  font-weight: 100;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 2px 10px 0 10px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 0 5px 0 0;\r\n  font-weight: 600;\r\n  margin-left: 0px;\r\n  cursor: auto;\r\n  cursor: initial;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  margin: 0;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  margin-right: 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding-left: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName > span {\r\n  display: inline;\r\n  display: initial;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  margin-left: auto;\r\n  margin-right: 10px;\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px;\r\n  text-align: right;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable:not(:hover) .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: auto;\r\n  text-align: auto;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px !important;\r\n  text-align: right !important;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  margin-left: auto;\r\n  font-size: 12px;\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 12px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  margin-right: 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 {\r\n  display: flex;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding: 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--statusColor {\r\n  position: absolute;\r\n  width: 10px;\r\n  height: 95%;\r\n  left: -13px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 13px;\r\n  margin-left: 1px;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 100%;\r\n  margin-left: 1px;\r\n  transition-delay: 0.25s;\r\n}";
 styleInject(css_248z$2);
 
 var _styleModuleImportMap$1 = {
   "./NavigationBar.css": {
     "NavBarContainer": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer",
+    "level3Menu": "utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu",
     "withCounts": "utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts",
     "showNavIconInHeader": "utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader",
     "navBarOpen": "utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen",
@@ -68521,6 +68857,7 @@ var _styleModuleImportMap$1 = {
     "selected": "utilities_ops-app-frame_NavigationBar_NavigationBar--selected",
     "NavItemCount": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount",
     "NavItemIcon": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon",
+    "NavMenuLevel1NoHover": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1NoHover",
     "NavItemName": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName",
     "NavMenuLevel1": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1",
     "NavMenuLevel2": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2",
@@ -68571,10 +68908,14 @@ var getDepth = function getDepth(navItems) {
 };
 var validateConfig = function validateConfig(navItems) {
   var maxDepth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  var showLevel3Navigation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var mandatoryKeys = ['name', 'route'];
   if (navItems.length === 0) return false;
   var depth = getDepth(navItems);
   if (depth > maxDepth) return false;
+
+  // If showLevel3Navigation is true, config must have exactly 3 levels
+  if (showLevel3Navigation && depth !== 3) return false;
   navItems.map(function (item) {
     var configItem = _objectSpread2({}, item);
     if (!configItem.isLandingPage && mandatoryKeys.every(function (key) {
@@ -68584,7 +68925,7 @@ var validateConfig = function validateConfig(navItems) {
       return false;
     }
     if (configItem.subMenuItems) {
-      validateConfig(configItem.subMenuItems, maxDepth - 1);
+      validateConfig(configItem.subMenuItems, maxDepth - 1, showLevel3Navigation);
     }
   });
   return true;
@@ -68619,14 +68960,16 @@ var NavigationBar = function NavigationBar(_ref2) {
     countAutoReloadDisabled = _ref2.countAutoReloadDisabled,
     onNavSectionToggle = _ref2.onNavSectionToggle,
     showNavIconInHeader = _ref2.showNavIconInHeader,
-    isNavBarOpen = _ref2.isNavBarOpen;
+    isNavBarOpen = _ref2.isNavBarOpen,
+    _ref2$showLevel3Navig = _ref2.showLevel3Navigation,
+    showLevel3Navigation = _ref2$showLevel3Navig === void 0 ? false : _ref2$showLevel3Navig;
   // const withCounts = getCounts && typeof getCounts === 'function'
   var navigateFunction = navigateTo || (history === null || history === void 0 ? void 0 : history.push) || defaultRedirect;
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     navItemsModified = _useState2[0],
     setNavItemsModified = _useState2[1];
-  var _useState3 = React.useState(false),
+  var _useState3 = React.useState(showLevel3Navigation ? showNavIconInHeader : false),
     _useState4 = _slicedToArray(_useState3, 2),
     isHover = _useState4[0],
     setHover = _useState4[1];
@@ -68648,7 +68991,7 @@ var NavigationBar = function NavigationBar(_ref2) {
     setWithCounts = _useState12[1];
   React.useEffect(function () {
     if (Array.isArray(navItems)) {
-      var isValid = validateConfig(navItems);
+      var isValid = validateConfig(navItems, 3, showLevel3Navigation);
       if (isValid) {
         var updatedNavItems = updateRoutes(navItems, '');
         var depth = getDepth(navItems);
@@ -68669,18 +69012,19 @@ var NavigationBar = function NavigationBar(_ref2) {
     } else {
       setConfigValid(false);
     }
-  }, []);
+  }, [showLevel3Navigation]);
   React.useEffect(function () {
     setShowNavigationCounts(withCounts);
   }, [withCounts]);
+  var isCountLevelActiveSubmenu = showLevel3Navigation && configDepth === 3 ? activeSubmenu.length > 1 : activeSubmenu.length > 0;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     onMouseOver: function onMouseOver() {
-      return setHover(true);
+      return !showLevel3Navigation || !showNavIconInHeader ? setHover(true) : null;
     },
     onMouseLeave: function onMouseLeave() {
-      return setHover(false);
+      return !showLevel3Navigation || !showNavIconInHeader ? setHover(false) : null;
     },
-    className: _getClassName("NavBarContainer ".concat(activeSubmenu !== null && activeSubmenu !== void 0 && activeSubmenu.length && withCounts ? 'withCounts' : '', " ").concat(getCounts && typeof getCounts === 'function' ? 'countsAvailable' : '', " ").concat(showNavIconInHeader ? 'showNavIconInHeader' : '', " ").concat(showNavIconInHeader && isNavBarOpen ? 'navBarOpen' : ''), _styleModuleImportMap$1, {
+    className: _getClassName("NavBarContainer ".concat(isCountLevelActiveSubmenu && withCounts ? 'withCounts' : '', " ").concat(getCounts && typeof getCounts === 'function' ? 'countsAvailable' : '', " ").concat(showNavIconInHeader ? 'showNavIconInHeader' : '', " ").concat(showNavIconInHeader && isNavBarOpen ? 'navBarOpen' : '', " ").concat(showLevel3Navigation && configDepth === 3 ? 'level3Menu' : ''), _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
     })
   }, isConfigValid ? /*#__PURE__*/React__default["default"].createElement(NavigationMenu, {
@@ -68698,7 +69042,8 @@ var NavigationBar = function NavigationBar(_ref2) {
     withCounts: withCounts,
     countsRef: countsRef,
     countAutoReloadDisabled: countAutoReloadDisabled,
-    onNavSectionToggle: onNavSectionToggle
+    onNavSectionToggle: onNavSectionToggle,
+    showLevel3Navigation: showLevel3Navigation
   }) : null, isConfigValid === false ? /*#__PURE__*/React__default["default"].createElement("div", null, "Please check your navigation config") : null);
 };
 var NavigationMenu = function NavigationMenu(_ref3) {
@@ -68716,7 +69061,9 @@ var NavigationMenu = function NavigationMenu(_ref3) {
     withCounts = _ref3.withCounts,
     countsRef = _ref3.countsRef,
     countAutoReloadDisabled = _ref3.countAutoReloadDisabled,
-    onNavSectionToggle = _ref3.onNavSectionToggle;
+    onNavSectionToggle = _ref3.onNavSectionToggle,
+    _ref3$showLevel3Navig = _ref3.showLevel3Navigation,
+    showLevel3Navigation = _ref3$showLevel3Navig === void 0 ? false : _ref3$showLevel3Navig;
   var redirectUrl = window.location.pathname;
   var _useState13 = React.useState(null),
     _useState14 = _slicedToArray(_useState13, 2),
@@ -68759,6 +69106,15 @@ var NavigationMenu = function NavigationMenu(_ref3) {
       }
     }
   }, [configDepth, redirectUrl]);
+  var reloadCounts = function reloadCounts(menuItemName, setCountsLoading) {
+    getCounts(menuItemName).then(function (result) {
+      setCounts(result);
+      setWithCounts(!isEmpty$2(result));
+      if (setCountsLoading) setCountsLoading(false);
+    }).catch(function () {
+      if (setCountsLoading) setCountsLoading(false);
+    });
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: _getClassName("NavMenu", _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
@@ -68786,7 +69142,10 @@ var NavigationMenu = function NavigationMenu(_ref3) {
       onNavSectionToggle: onNavSectionToggle,
       counts: counts,
       setCounts: setCounts,
-      countLoadAttemptsRef: countLoadAttemptsRef
+      countLoadAttemptsRef: countLoadAttemptsRef,
+      configDepth: configDepth,
+      reloadCounts: reloadCounts,
+      showLevel3Navigation: showLevel3Navigation
     });
   }));
 };
@@ -68808,15 +69167,95 @@ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
     onNavSectionToggle = _ref4.onNavSectionToggle,
     counts = _ref4.counts,
     setCounts = _ref4.setCounts,
-    countLoadAttemptsRef = _ref4.countLoadAttemptsRef;
+    countLoadAttemptsRef = _ref4.countLoadAttemptsRef,
+    configDepth = _ref4.configDepth,
+    reloadCounts = _ref4.reloadCounts,
+    _ref4$showLevel3Navig = _ref4.showLevel3Navigation,
+    showLevel3Navigation = _ref4$showLevel3Navig === void 0 ? false : _ref4$showLevel3Navig;
+  var isMenuExpanded = showLevel3Navigation ? activeSubmenu.includes(navItem.fullRoute) : false;
+  var showCounts = showLevel3Navigation && isMenuExpanded && getCounts && typeof getCounts === 'function';
+  var _useState15 = React.useState(false),
+    _useState16 = _slicedToArray(_useState15, 2);
+    _useState16[0];
+    var setCountsLoading = _useState16[1];
   var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
+  var isDisabled = showLevel3Navigation ? typeof navItem.disabled === 'function' ? navItem.disabled() : navItem.disabled : false;
   var shortName = navItem.shortName ? navItem.shortName.toUpperCase() : dotIcon;
   var nameText = isHover ? (_navItem$name = navItem.name) === null || _navItem$name === void 0 ? void 0 : _navItem$name.toUpperCase() : shortName;
+  React.useEffect(function () {
+    if (showLevel3Navigation && showCounts) {
+      if (!countAutoReloadDisabled || (countLoadAttemptsRef === null || countLoadAttemptsRef === void 0 ? void 0 : countLoadAttemptsRef.current) === 0) {
+        countLoadAttemptsRef.current++;
+        setCountsLoading(true);
+        reloadCounts(navItem.route, setCountsLoading);
+      }
+    }
+  }, [showLevel3Navigation, activeSubmenu]);
+  var navigateToItem = function navigateToItem(item) {
+    setSelected(item.fullRoute);
+    navigateFunction(item.fullRoute);
+  };
+  var handleItemClick = function handleItemClick(event) {
+    if (showLevel3Navigation) {
+      event.stopPropagation();
+      if (isDisabled) return;
+      if (hasSubMenuItems) {
+        if (!isMenuExpanded) {
+          setActiveSubmenu(function (menuItems) {
+            return allowMultipleNavItemsOpen ? [].concat(_toConsumableArray(menuItems), [navItem.fullRoute]) : [navItem.fullRoute];
+          });
+          onNavSectionToggle(navItem.route, true);
+        } else {
+          setActiveSubmenu(function (menuItems) {
+            return _toConsumableArray(menuItems).filter(function (item) {
+              return item !== navItem.fullRoute;
+            });
+          });
+          onNavSectionToggle(navItem.route, false);
+        }
+        if (!isMenuExpanded && showCounts && !countAutoReloadDisabled) {
+          reloadCounts(undefined, setCountsLoading);
+        }
+      } else {
+        navigateToItem(navItem);
+        var pathSplit = window.location.pathname.split('/');
+        var path = "/".concat(pathSplit[pathSplit.length - 1]);
+        if (path === navItem.fullRoute && !allowMultipleNavItemsOpen) {
+          setActiveSubmenu([navItem.fullRoute]);
+        }
+      }
+    }
+  };
+  var highlight = false;
+  if (showLevel3Navigation) {
+    if (navItem !== null && navItem !== void 0 && navItem.subMenuItems || !allowMultipleNavItemsOpen) {
+      highlight = isMenuExpanded;
+    } else if (allowMultipleNavItemsOpen) {
+      highlight = selected === navItem.fullRoute;
+    }
+  }
+
+  // Check if highlightMenu prop is true and highlight is false
+  var shouldShowHighlightBackground = showLevel3Navigation && navItem.highlightMenu === true && !highlight;
+
+  // Use highlightMenuColor if it's a string, otherwise use default red color
+  var backgroundColor = shouldShowHighlightBackground ? typeof navItem.highlightMenuColor === 'string' ? navItem.highlightMenuColor : statusColors[1] : '';
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1"
+    animate: showLevel3Navigation && isMenuExpanded ? 'open' : 'closed',
+    className: _getClassName("NavMenuLevel1".concat(showLevel3Navigation && !isHover && configDepth === 3 ? ' NavMenuLevel1NoHover' : ''), _styleModuleImportMap$1, {
+      "handleMissingStyleName": "warn"
+    })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem"
-  }, navItem.icon && /*#__PURE__*/React__default["default"].createElement("div", {
+    onClick: showLevel3Navigation ? function (event) {
+      return handleItemClick(event);
+    } : undefined,
+    style: {
+      backgroundColor: backgroundColor
+    },
+    className: _getClassName("NavItem ".concat(showLevel3Navigation && highlight && configDepth < 3 ? 'expandedMenu' : '', " ").concat(selected === navItem.fullRoute && navItem !== null && navItem !== void 0 && navItem.subMenuItems ? 'NavItemSelected' : '', " ").concat(isDisabled ? 'disabled' : ''), _styleModuleImportMap$1, {
+      "handleMissingStyleName": "warn"
+    })
+  }, showLevel3Navigation ? null : navItem.icon && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
   }, /*#__PURE__*/React__default["default"].createElement(NavIcon, {
     icon: navItem.icon
@@ -68824,7 +69263,44 @@ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem"
   }, nameText), navItem.hasOwnProperty('count') && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
-  }, navItem.count)), /*#__PURE__*/React__default["default"].createElement("div", null, hasSubMenuItems ? navItem.subMenuItems.filter(function (item) {
+  }, navItem.count), showLevel3Navigation && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: _getClassName("expandButton ".concat(activeSubmenu !== null && activeSubmenu !== void 0 && activeSubmenu.length && withCounts ? 'showExpandIcons' : ''), _styleModuleImportMap$1, {
+      "handleMissingStyleName": "warn"
+    })
+  }, hasSubMenuItems && /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+    name: isMenuExpanded ? 'chevron-up' : 'chevron-down'
+  }))), showLevel3Navigation && /*#__PURE__*/React__default["default"].createElement(velocityReact.VelocityTransitionGroup, {
+    enter: {
+      animation: 'slideDown',
+      duration: 200,
+      display: 'flex',
+      complete: function complete(elements) {
+        elements.forEach(function (el) {
+          el.style.removeProperty("height");
+        });
+      }
+    },
+    leave: {
+      animation: 'slideUp',
+      duration: 200,
+      complete: function complete(elements) {
+        elements.forEach(function (el) {
+          el.style.removeProperty("height");
+        });
+      }
+    },
+    style: _objectSpread2({
+      marginTop: '3px',
+      overflow: 'hidden',
+      padding: '0 2px'
+    }, configDepth === 3 ? {
+      backgroundColor: '#2F3743'
+    } : {
+      marginLeft: '10px',
+      backgroundColor: '#232932',
+      borderLeft: '1px solid #8A8886'
+    })
+  }, hasSubMenuItems && isMenuExpanded ? navItem.subMenuItems.filter(function (item) {
     return typeof item.hidden === 'function' ? !item.hidden() : !item.hidden;
   }).map(function (subItem) {
     return /*#__PURE__*/React__default["default"].createElement(NavigationMenuLevel2, {
@@ -68845,7 +69321,36 @@ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
       onNavSectionToggle: onNavSectionToggle,
       counts: counts,
       setCounts: setCounts,
-      countLoadAttemptsRef: countLoadAttemptsRef
+      countLoadAttemptsRef: countLoadAttemptsRef,
+      configDepth: configDepth,
+      reloadCounts: reloadCounts,
+      showLevel3Navigation: showLevel3Navigation
+    });
+  }) : null), !showLevel3Navigation && /*#__PURE__*/React__default["default"].createElement("div", null, hasSubMenuItems ? navItem.subMenuItems.filter(function (item) {
+    return typeof item.hidden === 'function' ? !item.hidden() : !item.hidden;
+  }).map(function (subItem) {
+    return /*#__PURE__*/React__default["default"].createElement(NavigationMenuLevel2, {
+      key: subItem.name,
+      isHover: isHover,
+      navItem: subItem,
+      selected: selected,
+      setSelected: setSelected,
+      activeSubmenu: activeSubmenu,
+      setActiveSubmenu: setActiveSubmenu,
+      allowMultipleNavItemsOpen: allowMultipleNavItemsOpen,
+      navigateFunction: navigateFunction,
+      getCounts: getCounts,
+      setWithCounts: setWithCounts,
+      withCounts: withCounts,
+      countsRef: countsRef,
+      countAutoReloadDisabled: countAutoReloadDisabled,
+      onNavSectionToggle: onNavSectionToggle,
+      counts: counts,
+      setCounts: setCounts,
+      countLoadAttemptsRef: countLoadAttemptsRef,
+      configDepth: configDepth,
+      reloadCounts: reloadCounts,
+      showLevel3Navigation: showLevel3Navigation
     });
   }) : null));
 };
@@ -68863,23 +69368,27 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
     setActiveSubmenu = _ref5.setActiveSubmenu,
     allowMultipleNavItemsOpen = _ref5.allowMultipleNavItemsOpen,
     navigateFunction = _ref5.navigateFunction,
-    getCounts = _ref5.getCounts,
-    setWithCounts = _ref5.setWithCounts,
-    withCounts = _ref5.withCounts,
+    getCounts = _ref5.getCounts;
+    _ref5.setWithCounts;
+    var withCounts = _ref5.withCounts,
     countsRef = _ref5.countsRef,
     countAutoReloadDisabled = _ref5.countAutoReloadDisabled,
     _ref5$onNavSectionTog = _ref5.onNavSectionToggle,
     onNavSectionToggle = _ref5$onNavSectionTog === void 0 ? function () {} : _ref5$onNavSectionTog,
-    counts = _ref5.counts,
-    setCounts = _ref5.setCounts,
-    countLoadAttemptsRef = _ref5.countLoadAttemptsRef;
+    counts = _ref5.counts;
+    _ref5.setCounts;
+    var countLoadAttemptsRef = _ref5.countLoadAttemptsRef,
+    configDepth = _ref5.configDepth,
+    reloadCounts = _ref5.reloadCounts,
+    _ref5$showLevel3Navig = _ref5.showLevel3Navigation,
+    showLevel3Navigation = _ref5$showLevel3Navig === void 0 ? false : _ref5$showLevel3Navig;
   // const isMenuExpanded = activeSubmenu === navItem.fullRoute
   var isMenuExpanded = activeSubmenu.includes(navItem.fullRoute);
   var showCounts = isMenuExpanded && getCounts && typeof getCounts === 'function';
-  var _useState15 = React.useState(false),
-    _useState16 = _slicedToArray(_useState15, 2),
-    countsLoading = _useState16[0],
-    setCountsLoading = _useState16[1];
+  var _useState17 = React.useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    countsLoading = _useState18[0],
+    setCountsLoading = _useState18[1];
   var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
   var isDisabled = typeof navItem.disabled === 'function' ? navItem.disabled() : navItem.disabled;
   // const withCounts = getCounts && typeof getCounts === 'function'
@@ -68889,36 +69398,39 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
       if (!countAutoReloadDisabled || (countLoadAttemptsRef === null || countLoadAttemptsRef === void 0 ? void 0 : countLoadAttemptsRef.current) === 0) {
         countLoadAttemptsRef.current++;
         setCountsLoading(true);
-        reloadCounts(navItem.route);
+        reloadCounts(navItem.route, setCountsLoading);
       }
       if (countsRef && _typeof$1(countsRef) === 'object') {
         countsRef.current = {
           refreshCounts: function refreshCounts() {
-            return reloadCounts(navItem.route);
+            return reloadCounts(navItem.route, setCountsLoading);
           }
         };
       }
     }
   }, [activeSubmenu]);
-  var reloadCounts = function reloadCounts(menuItemName) {
-    getCounts(menuItemName).then(function (result) {
-      setCounts(result);
-      setWithCounts(!isEmpty$2(result));
-      setCountsLoading(false);
-    }).catch(function () {
-      setCountsLoading(false);
-    });
-  };
   var navigateToItem = function navigateToItem(item) {
     setSelected(item.fullRoute);
     navigateFunction(item.fullRoute);
   };
-  var handleItemClick = function handleItemClick() {
+  var handleItemClick = function handleItemClick(event) {
+    event.stopPropagation();
     if (isDisabled) return;
     if (hasSubMenuItems) {
       if (!isMenuExpanded) {
         setActiveSubmenu(function (menuItems) {
-          return allowMultipleNavItemsOpen ? [].concat(_toConsumableArray(menuItems), [navItem.fullRoute]) : [navItem.fullRoute];
+          if (allowMultipleNavItemsOpen) {
+            return [].concat(_toConsumableArray(menuItems), [navItem.fullRoute]);
+          } else {
+            // When allowMultipleNavItemsOpen is false, replace with current item
+            // But preserve parent Level1 route in 3-level config
+            if (showLevel3Navigation && configDepth === 3) {
+              var parentRoute = navItem.fullRoute.split('/').slice(0, 2).join('/');
+              return [parentRoute, navItem.fullRoute];
+            } else {
+              return [navItem.fullRoute];
+            }
+          }
         });
         onNavSectionToggle(navItem.route, true);
       } else {
@@ -68931,14 +69443,21 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
       }
       // setActiveSubmenu(isMenuExpanded ? null : navItem.fullRoute)
       if (!isMenuExpanded && showCounts && !countAutoReloadDisabled) {
-        reloadCounts();
+        reloadCounts(undefined, setCountsLoading);
       }
     } else {
       navigateToItem(navItem);
       var pathSplit = window.location.pathname.split('/');
       var path = "/".concat(pathSplit[pathSplit.length - 1]);
       if (path === navItem.fullRoute && !allowMultipleNavItemsOpen) {
-        setActiveSubmenu([navItem.fullRoute]);
+        // When allowMultipleNavItemsOpen is false, set active submenu
+        // But preserve parent Level1 route in 3-level config
+        if (showLevel3Navigation && configDepth === 3) {
+          var parentRoute = navItem.fullRoute.split('/').slice(0, 2).join('/');
+          setActiveSubmenu([parentRoute, navItem.fullRoute]);
+        } else {
+          setActiveSubmenu([navItem.fullRoute]);
+        }
       }
     }
   };
@@ -68956,9 +69475,14 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
   var backgroundColor = shouldShowHighlightBackground ? typeof navItem.highlightMenuColor === 'string' ? navItem.highlightMenuColor : statusColors[1] : '';
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2",
-    animate: isMenuExpanded ? 'open' : 'closed'
+    animate: isMenuExpanded ? 'open' : 'closed',
+    style: {
+      flexDirection: 'column'
+    }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    onClick: handleItemClick,
+    onClick: function onClick(event) {
+      return handleItemClick(event);
+    },
     style: {
       backgroundColor: backgroundColor
     },
@@ -69015,7 +69539,13 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
       count: counts && counts[subItem.route],
       countsLoading: countsLoading,
       selected: selected,
-      navigateToItem: navigateToItem
+      navigateToItem: navigateToItem,
+      configDepth: configDepth,
+      activeSubmenu: activeSubmenu,
+      setActiveSubmenu: setActiveSubmenu,
+      allowMultipleNavItemsOpen: allowMultipleNavItemsOpen,
+      onNavSectionToggle: onNavSectionToggle,
+      showLevel3Navigation: showLevel3Navigation
     });
   }) : null));
 };
@@ -69025,7 +69555,15 @@ var NavigationMenuLevel3 = function NavigationMenuLevel3(_ref6) {
     countsLoading = _ref6.countsLoading,
     isHover = _ref6.isHover,
     selected = _ref6.selected,
-    navigateToItem = _ref6.navigateToItem;
+    navigateToItem = _ref6.navigateToItem,
+    configDepth = _ref6.configDepth,
+    activeSubmenu = _ref6.activeSubmenu,
+    setActiveSubmenu = _ref6.setActiveSubmenu,
+    allowMultipleNavItemsOpen = _ref6.allowMultipleNavItemsOpen,
+    _ref6$onNavSectionTog = _ref6.onNavSectionToggle,
+    onNavSectionToggle = _ref6$onNavSectionTog === void 0 ? function () {} : _ref6$onNavSectionTog,
+    _ref6$showLevel3Navig = _ref6.showLevel3Navigation,
+    showLevel3Navigation = _ref6$showLevel3Navig === void 0 ? false : _ref6$showLevel3Navig;
   var countText = !isHover ? formatNumber(count) : count;
   var status, statusColor;
   if (countText && navItem.getStatus && navItem.getStatus) {
@@ -69034,21 +69572,75 @@ var NavigationMenuLevel3 = function NavigationMenuLevel3(_ref6) {
   }
   var position = (navItem === null || navItem === void 0 ? void 0 : navItem.statusColorPosition) || '';
   var isDisabled = typeof navItem.disabled === 'function' ? navItem.disabled() : navItem.disabled;
+
+  // In 2-level config, Level3 should behave like Level2
+  var isLevel2Style = showLevel3Navigation && configDepth === 2;
+  var isMenuExpanded = isLevel2Style ? activeSubmenu.includes(navItem.fullRoute) : false;
+  var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
+  var handleItemClick = function handleItemClick(event) {
+    if (isLevel2Style) {
+      event.stopPropagation();
+      if (isDisabled) return;
+      if (hasSubMenuItems) {
+        if (!isMenuExpanded) {
+          setActiveSubmenu(function (menuItems) {
+            if (allowMultipleNavItemsOpen) {
+              return [].concat(_toConsumableArray(menuItems), [navItem.fullRoute]);
+            } else {
+              return [navItem.fullRoute];
+            }
+          });
+          onNavSectionToggle(navItem.route, true);
+        } else {
+          setActiveSubmenu(function (menuItems) {
+            return _toConsumableArray(menuItems).filter(function (item) {
+              return item !== navItem.fullRoute;
+            });
+          });
+          onNavSectionToggle(navItem.route, false);
+        }
+      } else {
+        navigateToItem(navItem);
+        var pathSplit = window.location.pathname.split('/');
+        var path = "/".concat(pathSplit[pathSplit.length - 1]);
+        if (path === navItem.fullRoute && !allowMultipleNavItemsOpen) {
+          setActiveSubmenu([navItem.fullRoute]);
+        }
+      }
+    } else {
+      // Original Level3 behavior for 3-level config
+      if (!isDisabled) navigateToItem(navItem);
+    }
+  };
+  var highlight = false;
+  if (isLevel2Style) {
+    if (navItem !== null && navItem !== void 0 && navItem.subMenuItems || !allowMultipleNavItemsOpen) {
+      highlight = isMenuExpanded;
+    } else if (allowMultipleNavItemsOpen) {
+      highlight = selected === navItem.fullRoute;
+    }
+  }
+
+  // Check if highlightMenu prop is true and highlight is false
+  var shouldShowHighlightBackground = navItem.highlightMenu === true && !highlight;
+
+  // Use highlightMenuColor if it's a string, otherwise use default red color
+  var backgroundColor = shouldShowHighlightBackground ? typeof navItem.highlightMenuColor === 'string' ? navItem.highlightMenuColor : statusColors[1] : '';
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3"
+    className: _getClassName("NavMenuLevel3 ".concat(isLevel2Style ? 'level2Style' : ''), _styleModuleImportMap$1, {
+      "handleMissingStyleName": "warn"
+    })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--statusColor",
     style: {
       backgroundColor: position === 'leftBorder' ? statusColor : ''
     }
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    onClick: function onClick() {
-      return !isDisabled && navigateToItem(navItem);
-    },
+    onClick: handleItemClick,
     style: {
-      backgroundColor: position === 'background' ? statusColor : ''
+      backgroundColor: position === 'background' ? statusColor : backgroundColor
     },
-    className: _getClassName("NavItem ".concat(selected === navItem.fullRoute ? 'NavItemSelected' : '', " ").concat(selected === navItem.fullRoute && position === 'background' ? 'NavItemSelectedStatus' : '', " ").concat(isDisabled ? 'disabled' : ''), _styleModuleImportMap$1, {
+    className: _getClassName("NavItem ".concat(isLevel2Style && highlight ? 'expandedMenu' : '', " ").concat(selected === navItem.fullRoute ? 'NavItemSelected' : '', " ").concat(selected === navItem.fullRoute && position === 'background' ? 'NavItemSelectedStatus' : '', " ").concat(isDisabled ? 'disabled' : ''), _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -69057,7 +69649,11 @@ var NavigationMenuLevel3 = function NavigationMenuLevel3(_ref6) {
     icon: navItem.icon
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
-  }, navItem.name), (countsLoading || !isNil$1(countText)) && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, navItem.name), isLevel2Style && hasSubMenuItems && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton"
+  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+    name: isMenuExpanded ? 'chevron-up' : 'chevron-down'
+  })), (countsLoading || !isNil$1(countText)) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
   }, countsLoading ? /*#__PURE__*/React__default["default"].createElement(coreComponents.Spinner, {
     size: "xxs"
@@ -69186,7 +69782,9 @@ var AppFrame = function AppFrame(props) {
   }, []);
 
   // const showNavigationCounts = props.getCounts && typeof props.getCounts === 'function'
-  var navigationWidth = activeSubmenu !== null && activeSubmenu !== void 0 && activeSubmenu.length && showNavigationCounts ? '100px' : '50px';
+  var baseWidth = props.showLevel3Navigation ? '70px' : '50px';
+  var isThirdLevelOpen = props.showLevel3Navigation && (activeSubmenu === null || activeSubmenu === void 0 ? void 0 : activeSubmenu.length) > 1;
+  var navigationWidth = props.showLevel3Navigation ? isThirdLevelOpen && showNavigationCounts ? '100px' : baseWidth : activeSubmenu !== null && activeSubmenu !== void 0 && activeSubmenu.length && showNavigationCounts ? '100px' : baseWidth;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppFrame_AppFrame--AppFrame",
     style: props.handleScrolling ? SCROLL : NO_SCROLL
@@ -69225,7 +69823,8 @@ var AppFrame = function AppFrame(props) {
     countAutoReloadDisabled: props.countAutoReloadDisabled,
     onNavSectionToggle: props.onNavSectionToggle,
     showNavIconInHeader: props === null || props === void 0 ? void 0 : props.showNavIconInHeader,
-    isNavBarOpen: isNavBarOpen
+    isNavBarOpen: isNavBarOpen,
+    showLevel3Navigation: props.showLevel3Navigation
   }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       marginLeft: props.showNavigation && !(props !== null && props !== void 0 && props.showNavIconInHeader) ? navigationWidth : '0px',
@@ -81223,7 +81822,7 @@ var index_esm = /*#__PURE__*/Object.freeze({
 });
 
 var purify = createCommonjsModule(function (module, exports) {
-/*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */
+/*! @license DOMPurify 3.2.7 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.7/LICENSE */
 
 (function (global, factory) {
   module.exports = factory() ;
@@ -81256,12 +81855,18 @@ var purify = createCommonjsModule(function (module, exports) {
     };
   }
   if (!apply) {
-    apply = function apply(fun, thisValue, args) {
-      return fun.apply(thisValue, args);
+    apply = function apply(func, thisArg) {
+      for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        args[_key - 2] = arguments[_key];
+      }
+      return func.apply(thisArg, args);
     };
   }
   if (!construct) {
-    construct = function construct(Func, args) {
+    construct = function construct(Func) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
       return new Func(...args);
     };
   }
@@ -81290,8 +81895,8 @@ var purify = createCommonjsModule(function (module, exports) {
       if (thisArg instanceof RegExp) {
         thisArg.lastIndex = 0;
       }
-      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        args[_key - 1] = arguments[_key];
+      for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+        args[_key3 - 1] = arguments[_key3];
       }
       return apply(func, thisArg, args);
     };
@@ -81302,12 +81907,12 @@ var purify = createCommonjsModule(function (module, exports) {
    * @param func - The constructor function to be wrapped and called.
    * @returns A new function that constructs an instance of the given constructor function with the provided arguments.
    */
-  function unconstruct(func) {
+  function unconstruct(Func) {
     return function () {
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
+      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+        args[_key4] = arguments[_key4];
       }
-      return construct(func, args);
+      return construct(Func, args);
     };
   }
   /**
@@ -81405,8 +82010,8 @@ var purify = createCommonjsModule(function (module, exports) {
     }
     return fallbackValue;
   }
-  const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);
-  const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
+  const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'search', 'section', 'select', 'shadow', 'slot', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);
+  const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'enterkeyhint', 'exportparts', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'inputmode', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'part', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'slot', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
   const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']);
   // List of SVG elements that are disallowed by default.
   // We still need to know them so that we can do namespace
@@ -81418,7 +82023,7 @@ var purify = createCommonjsModule(function (module, exports) {
   // even those that we disallow by default.
   const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);
   const text = freeze(['#text']);
-  const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);
+  const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'exportparts', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inert', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'part', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);
   const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);
   const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);
   const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);
@@ -81528,7 +82133,7 @@ var purify = createCommonjsModule(function (module, exports) {
   function createDOMPurify() {
     let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
     const DOMPurify = root => createDOMPurify(root);
-    DOMPurify.version = '3.2.6';
+    DOMPurify.version = '3.2.7';
     DOMPurify.removed = [];
     if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {
       // Not running in a browser, provide a factory function
@@ -82225,7 +82830,7 @@ var purify = createCommonjsModule(function (module, exports) {
         // First condition does a very basic check if a) it's basically a valid custom element tagname AND
         // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
         // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck
-        _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) ||
+        _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName, lcTag)) ||
         // Alternative, second condition checks if it's an `is`-attribute, AND
         // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
         lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ;else {
@@ -82304,7 +82909,12 @@ var purify = createCommonjsModule(function (module, exports) {
           value = SANITIZE_NAMED_PROPS_PREFIX + value;
         }
         /* Work around a security issue with comments inside attributes */
-        if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title)/i, value)) {
+        if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title|textarea)/i, value)) {
+          _removeAttribute(name, currentNode);
+          continue;
+        }
+        /* Make sure we cannot easily use animated hrefs, even if animations are allowed */
+        if (lcName === 'attributename' && stringMatch(value, 'href')) {
           _removeAttribute(name, currentNode);
           continue;
         }