gwchq-textjam 0.1.21 → 0.1.22

package/dist/index.js

@@ -64824,6 +64824,35 @@ function SvgFile(props) {
 
 /***/ }),
 
+/***/ 72020:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgFiles(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 22,
+    height: 20,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M10.75 8.75v6m-3-3h6m7 5a2 2 0 01-2 2h-16a2 2 0 01-2-2v-14a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z",
+    stroke: "#33625E",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgFiles);
+
+/***/ }),
+
 /***/ 97091:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -64888,6 +64917,35 @@ function SvgGifFile(props) {
 
 /***/ }),
 
+/***/ 69046:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgHome(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 20,
+    height: 22,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M6.75 20.75v-10h6v10m-12-13l9-7 9 7v11a2 2 0 01-2 2h-14a2 2 0 01-2-2v-11z",
+    stroke: "#33625E",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgHome);
+
+/***/ }),
+
 /***/ 59917:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -65362,6 +65420,2380 @@ function SvgWavFile(props) {
 }
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgWavFile);
 
+/***/ }),
+
+/***/ 97957:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  ControlledMenu: () => (/* reexport */ ControlledMenu),
+  FocusableItem: () => (/* reexport */ FocusableItem),
+  Menu: () => (/* reexport */ Menu),
+  MenuButton: () => (/* reexport */ MenuButton),
+  MenuDivider: () => (/* reexport */ MenuDivider),
+  MenuGroup: () => (/* reexport */ MenuGroup),
+  MenuHeader: () => (/* reexport */ MenuHeader),
+  MenuItem: () => (/* reexport */ MenuItem),
+  MenuRadioGroup: () => (/* reexport */ MenuRadioGroup),
+  SubMenu: () => (/* reexport */ SubMenu),
+  useClick: () => (/* reexport */ useClick),
+  useHover: () => (/* reexport */ useHover),
+  useMenuState: () => (/* reexport */ useMenuState)
+});
+
+;// ./node_modules/@szhsin/react-menu/dist/es/_virtual/_rollupPluginBabelHelpers.js
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(51649);
+// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
+var jsx_runtime = __webpack_require__(74848);
+// EXTERNAL MODULE: external "react-dom"
+var external_react_dom_ = __webpack_require__(7516);
+;// ./node_modules/@szhsin/react-menu/dist/es/utils/utils.js
+
+
+var isMenuOpen = function isMenuOpen(state) {
+  return !!state && state[0] === 'o';
+};
+var batchedUpdates = external_react_dom_.unstable_batchedUpdates || function (callback) {
+  return callback();
+};
+var values = Object.values || function (obj) {
+  return Object.keys(obj).map(function (key) {
+    return obj[key];
+  });
+};
+var floatEqual = function floatEqual(a, b, diff) {
+  if (diff === void 0) {
+    diff = 0.0001;
+  }
+  return Math.abs(a - b) < diff;
+};
+var getTransition = function getTransition(transition, name) {
+  return transition === true || !!(transition && transition[name]);
+};
+var safeCall = function safeCall(fn, arg) {
+  return typeof fn === 'function' ? fn(arg) : fn;
+};
+var internalKey = '_szhsinMenu';
+var getName = function getName(component) {
+  return component[internalKey];
+};
+var defineName = function defineName(name, component) {
+  return Object.defineProperty(component, internalKey, {
+    value: name
+  });
+};
+var mergeProps = function mergeProps(target, source) {
+  source && Object.keys(source).forEach(function (key) {
+    var targetProp = target[key];
+    var sourceProp = source[key];
+    if (typeof sourceProp === 'function' && targetProp) {
+      target[key] = function () {
+        sourceProp.apply(void 0, arguments);
+        targetProp.apply(void 0, arguments);
+      };
+    } else {
+      target[key] = sourceProp;
+    }
+  });
+  return target;
+};
+var parsePadding = function parsePadding(paddingStr) {
+  if (typeof paddingStr !== 'string') return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  };
+  var padding = paddingStr.trim().split(/\s+/, 4).map(parseFloat);
+  var top = !isNaN(padding[0]) ? padding[0] : 0;
+  var right = !isNaN(padding[1]) ? padding[1] : top;
+  return {
+    top: top,
+    right: right,
+    bottom: !isNaN(padding[2]) ? padding[2] : top,
+    left: !isNaN(padding[3]) ? padding[3] : right
+  };
+};
+var getScrollAncestor = function getScrollAncestor(node) {
+  while (node) {
+    node = node.parentNode;
+    if (!node || node === document.body || !node.parentNode) return;
+    var _getComputedStyle = getComputedStyle(node),
+      overflow = _getComputedStyle.overflow,
+      overflowX = _getComputedStyle.overflowX,
+      overflowY = _getComputedStyle.overflowY;
+    if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return node;
+  }
+};
+function commonProps(isDisabled, isHovering) {
+  return {
+    'aria-disabled': isDisabled || undefined,
+    tabIndex: isHovering ? 0 : -1
+  };
+}
+function indexOfNode(nodeList, node) {
+  for (var i = 0; i < nodeList.length; i++) {
+    if (nodeList[i] === node) return i;
+  }
+  return -1;
+}
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useBEM.js
+
+
+var useBEM = function useBEM(_ref) {
+  var block = _ref.block,
+    element = _ref.element,
+    modifiers = _ref.modifiers,
+    className = _ref.className;
+  return (0,external_react_.useMemo)(function () {
+    var blockElement = element ? block + "__" + element : block;
+    var classString = blockElement;
+    modifiers && Object.keys(modifiers).forEach(function (name) {
+      var value = modifiers[name];
+      if (value) classString += " " + blockElement + "--" + (value === true ? name : name + "-" + value);
+    });
+    var expandedClassName = typeof className === 'function' ? className(modifiers) : className;
+    if (typeof expandedClassName === 'string') {
+      expandedClassName = expandedClassName.trim();
+      if (expandedClassName) classString += " " + expandedClassName;
+    }
+    return classString;
+  }, [block, element, modifiers, className]);
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/utils/constants.js
+
+
+var menuContainerClass = 'szh-menu-container';
+var menuClass = 'szh-menu';
+var menuButtonClass = 'szh-menu-button';
+var menuArrowClass = 'arrow';
+var menuItemClass = 'item';
+var menuDividerClass = 'divider';
+var menuHeaderClass = 'header';
+var menuGroupClass = 'group';
+var subMenuClass = 'submenu';
+var radioGroupClass = 'radio-group';
+var HoverItemContext = /*#__PURE__*/(0,external_react_.createContext)();
+var MenuListItemContext = /*#__PURE__*/(0,external_react_.createContext)({});
+var MenuListContext = /*#__PURE__*/(0,external_react_.createContext)({});
+var EventHandlersContext = /*#__PURE__*/(0,external_react_.createContext)({});
+var RadioGroupContext = /*#__PURE__*/(0,external_react_.createContext)({});
+var SettingsContext = /*#__PURE__*/(0,external_react_.createContext)({});
+var Keys = /*#__PURE__*/Object.freeze({
+  ENTER: 'Enter',
+  ESC: 'Escape',
+  SPACE: ' ',
+  HOME: 'Home',
+  END: 'End',
+  LEFT: 'ArrowLeft',
+  RIGHT: 'ArrowRight',
+  UP: 'ArrowUp',
+  DOWN: 'ArrowDown'
+});
+var HoverActionTypes = /*#__PURE__*/Object.freeze({
+  RESET: 0,
+  SET: 1,
+  UNSET: 2,
+  INCREASE: 3,
+  DECREASE: 4,
+  FIRST: 5,
+  LAST: 6,
+  SET_INDEX: 7
+});
+var CloseReason = /*#__PURE__*/Object.freeze({
+  CLICK: 'click',
+  CANCEL: 'cancel',
+  BLUR: 'blur',
+  SCROLL: 'scroll'
+});
+var FocusPositions = /*#__PURE__*/Object.freeze({
+  FIRST: 'first',
+  LAST: 'last'
+});
+var MenuStateMap = /*#__PURE__*/Object.freeze({
+  entering: 'opening',
+  entered: 'open',
+  exiting: 'closing',
+  exited: 'closed'
+});
+var positionAbsolute = 'absolute';
+var roleNone = 'presentation';
+var roleMenuitem = 'menuitem';
+var dummyItemProps = {
+  'aria-hidden': true,
+  role: roleMenuitem
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/MenuButton.js
+
+
+
+
+
+
+
+
+
+var _excluded = ["className", "isOpen", "disabled", "children"];
+var MenuButton = /*#__PURE__*/defineName('MenuButton', /*#__PURE__*/(0,external_react_.forwardRef)(function MenuButton(_ref, ref) {
+  var className = _ref.className,
+    isOpen = _ref.isOpen,
+    disabled = _ref.disabled,
+    children = _ref.children,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var modifiers = (0,external_react_.useMemo)(function () {
+    return {
+      open: isOpen
+    };
+  }, [isOpen]);
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("button", _extends({
+    "aria-haspopup": true,
+    "aria-expanded": isOpen,
+    "aria-disabled": disabled || undefined,
+    type: "button",
+    disabled: disabled
+  }, restProps, {
+    ref: ref,
+    className: useBEM({
+      block: menuButtonClass,
+      modifiers: modifiers,
+      className: className
+    }),
+    children: children
+  }));
+}));
+ false ? 0 : void 0;
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/MenuContainer.js
+
+
+
+
+
+
+
+var MenuContainer = function MenuContainer(_ref) {
+  var className = _ref.className,
+    containerRef = _ref.containerRef,
+    containerProps = _ref.containerProps,
+    children = _ref.children,
+    isOpen = _ref.isOpen,
+    skipOpen = _ref.skipOpen,
+    theming = _ref.theming,
+    transition = _ref.transition,
+    onClose = _ref.onClose;
+  var itemTransition = getTransition(transition, 'item');
+  var onKeyDown = function onKeyDown(_ref2) {
+    var key = _ref2.key;
+    switch (key) {
+      case Keys.ESC:
+        safeCall(onClose, {
+          key: key,
+          reason: CloseReason.CANCEL
+        });
+        break;
+    }
+  };
+  var onBlur = function onBlur(e) {
+    if (isOpen && !e.currentTarget.contains(e.relatedTarget || document.activeElement)) {
+      safeCall(onClose, {
+        reason: CloseReason.BLUR
+      });
+      if (skipOpen) {
+        skipOpen.current = true;
+        setTimeout(function () {
+          return skipOpen.current = false;
+        }, 300);
+      }
+    }
+  };
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({}, mergeProps({
+    onKeyDown: onKeyDown,
+    onBlur: onBlur
+  }, containerProps), {
+    className: useBEM({
+      block: menuContainerClass,
+      modifiers: (0,external_react_.useMemo)(function () {
+        return {
+          theme: theming,
+          itemTransition: itemTransition
+        };
+      }, [theming, itemTransition]),
+      className: className
+    }),
+    style: _extends({
+      position: 'absolute'
+    }, containerProps == null ? void 0 : containerProps.style),
+    ref: containerRef,
+    children: children
+  }));
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/utils/submenuCtx.js
+var createSubmenuCtx = function createSubmenuCtx() {
+  var timer,
+    count = 0;
+  return {
+    toggle: function toggle(isOpen) {
+      isOpen ? count++ : count--;
+      count = Math.max(count, 0);
+    },
+    on: function on(closeDelay, pending, settled) {
+      if (count) {
+        if (!timer) timer = setTimeout(function () {
+          timer = 0;
+          pending();
+        }, closeDelay);
+      } else {
+        settled == null ? void 0 : settled();
+      }
+    },
+    off: function off() {
+      if (timer) {
+        clearTimeout(timer);
+        timer = 0;
+      }
+    }
+  };
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useItems.js
+
+
+
+
+var useItems = function useItems(menuRef, focusRef) {
+  var _useState = (0,external_react_.useState)(),
+    hoverItem = _useState[0],
+    setHoverItem = _useState[1];
+  var stateRef = (0,external_react_.useRef)({
+    items: [],
+    hoverIndex: -1,
+    sorted: false
+  });
+  var mutableState = stateRef.current;
+  var updateItems = (0,external_react_.useCallback)(function (item, isMounted) {
+    var items = mutableState.items;
+    if (!item) {
+      mutableState.items = [];
+    } else if (isMounted) {
+      items.push(item);
+    } else {
+      var index = items.indexOf(item);
+      if (index > -1) {
+        items.splice(index, 1);
+        if (item.contains(document.activeElement)) {
+          focusRef.current.focus();
+          setHoverItem();
+        }
+      }
+    }
+    mutableState.hoverIndex = -1;
+    mutableState.sorted = false;
+  }, [mutableState, focusRef]);
+  var dispatch = (0,external_react_.useCallback)(function (actionType, item, nextIndex) {
+    var items = mutableState.items,
+      hoverIndex = mutableState.hoverIndex;
+    var sortItems = function sortItems() {
+      if (mutableState.sorted) return;
+      var orderedNodes = menuRef.current.querySelectorAll('.szh-menu__item');
+      items.sort(function (a, b) {
+        return indexOfNode(orderedNodes, a) - indexOfNode(orderedNodes, b);
+      });
+      mutableState.sorted = true;
+    };
+    var index = -1,
+      newItem = undefined;
+    switch (actionType) {
+      case HoverActionTypes.RESET:
+        break;
+      case HoverActionTypes.SET:
+        newItem = item;
+        break;
+      case HoverActionTypes.UNSET:
+        newItem = function newItem(prevItem) {
+          return prevItem === item ? undefined : prevItem;
+        };
+        break;
+      case HoverActionTypes.FIRST:
+        sortItems();
+        index = 0;
+        newItem = items[index];
+        break;
+      case HoverActionTypes.LAST:
+        sortItems();
+        index = items.length - 1;
+        newItem = items[index];
+        break;
+      case HoverActionTypes.SET_INDEX:
+        sortItems();
+        index = nextIndex;
+        newItem = items[index];
+        break;
+      case HoverActionTypes.INCREASE:
+        sortItems();
+        index = hoverIndex;
+        if (index < 0) index = items.indexOf(item);
+        index++;
+        if (index >= items.length) index = 0;
+        newItem = items[index];
+        break;
+      case HoverActionTypes.DECREASE:
+        sortItems();
+        index = hoverIndex;
+        if (index < 0) index = items.indexOf(item);
+        index--;
+        if (index < 0) index = items.length - 1;
+        newItem = items[index];
+        break;
+      default:
+        if (false) {}
+    }
+    if (!newItem) index = -1;
+    setHoverItem(newItem);
+    mutableState.hoverIndex = index;
+  }, [menuRef, mutableState]);
+  return {
+    hoverItem: hoverItem,
+    dispatch: dispatch,
+    updateItems: updateItems
+  };
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/getPositionHelpers.js
+
+
+var getPositionHelpers = function getPositionHelpers(containerRef, menuRef, menuScroll, boundingBoxPadding) {
+  var menuRect = menuRef.current.getBoundingClientRect();
+  var containerRect = containerRef.current.getBoundingClientRect();
+  var boundingRect = menuScroll === window ? {
+    left: 0,
+    top: 0,
+    right: document.documentElement.clientWidth,
+    bottom: window.innerHeight
+  } : menuScroll.getBoundingClientRect();
+  var padding = parsePadding(boundingBoxPadding);
+  var getLeftOverflow = function getLeftOverflow(x) {
+    return x + containerRect.left - boundingRect.left - padding.left;
+  };
+  var getRightOverflow = function getRightOverflow(x) {
+    return x + containerRect.left + menuRect.width - boundingRect.right + padding.right;
+  };
+  var getTopOverflow = function getTopOverflow(y) {
+    return y + containerRect.top - boundingRect.top - padding.top;
+  };
+  var getBottomOverflow = function getBottomOverflow(y) {
+    return y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom;
+  };
+  var confineHorizontally = function confineHorizontally(x) {
+    var leftOverflow = getLeftOverflow(x);
+    if (leftOverflow < 0) {
+      x -= leftOverflow;
+    } else {
+      var rightOverflow = getRightOverflow(x);
+      if (rightOverflow > 0) {
+        x -= rightOverflow;
+        leftOverflow = getLeftOverflow(x);
+        if (leftOverflow < 0) x -= leftOverflow;
+      }
+    }
+    return x;
+  };
+  var confineVertically = function confineVertically(y) {
+    var topOverflow = getTopOverflow(y);
+    if (topOverflow < 0) {
+      y -= topOverflow;
+    } else {
+      var bottomOverflow = getBottomOverflow(y);
+      if (bottomOverflow > 0) {
+        y -= bottomOverflow;
+        topOverflow = getTopOverflow(y);
+        if (topOverflow < 0) y -= topOverflow;
+      }
+    }
+    return y;
+  };
+  return {
+    menuRect: menuRect,
+    containerRect: containerRect,
+    getLeftOverflow: getLeftOverflow,
+    getRightOverflow: getRightOverflow,
+    getTopOverflow: getTopOverflow,
+    getBottomOverflow: getBottomOverflow,
+    confineHorizontally: confineHorizontally,
+    confineVertically: confineVertically
+  };
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/placeArrowVertical.js
+var placeArrowVertical = function placeArrowVertical(_ref) {
+  var arrowRef = _ref.arrowRef,
+    menuY = _ref.menuY,
+    anchorRect = _ref.anchorRect,
+    containerRect = _ref.containerRect,
+    menuRect = _ref.menuRect;
+  var y = anchorRect.top - containerRect.top - menuY + anchorRect.height / 2;
+  var offset = arrowRef.current.offsetHeight * 1.25;
+  y = Math.max(offset, y);
+  y = Math.min(y, menuRect.height - offset);
+  return y;
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/placeLeftorRight.js
+
+
+var placeLeftorRight = function placeLeftorRight(_ref) {
+  var anchorRect = _ref.anchorRect,
+    containerRect = _ref.containerRect,
+    menuRect = _ref.menuRect,
+    placeLeftorRightY = _ref.placeLeftorRightY,
+    placeLeftX = _ref.placeLeftX,
+    placeRightX = _ref.placeRightX,
+    getLeftOverflow = _ref.getLeftOverflow,
+    getRightOverflow = _ref.getRightOverflow,
+    confineHorizontally = _ref.confineHorizontally,
+    confineVertically = _ref.confineVertically,
+    arrowRef = _ref.arrowRef,
+    arrow = _ref.arrow,
+    direction = _ref.direction,
+    position = _ref.position;
+  var computedDirection = direction;
+  var y = placeLeftorRightY;
+  if (position !== 'initial') {
+    y = confineVertically(y);
+    if (position === 'anchor') {
+      y = Math.min(y, anchorRect.bottom - containerRect.top);
+      y = Math.max(y, anchorRect.top - containerRect.top - menuRect.height);
+    }
+  }
+  var x, leftOverflow, rightOverflow;
+  if (computedDirection === 'left') {
+    x = placeLeftX;
+    if (position !== 'initial') {
+      leftOverflow = getLeftOverflow(x);
+      if (leftOverflow < 0) {
+        rightOverflow = getRightOverflow(placeRightX);
+        if (rightOverflow <= 0 || -leftOverflow > rightOverflow) {
+          x = placeRightX;
+          computedDirection = 'right';
+        }
+      }
+    }
+  } else {
+    x = placeRightX;
+    if (position !== 'initial') {
+      rightOverflow = getRightOverflow(x);
+      if (rightOverflow > 0) {
+        leftOverflow = getLeftOverflow(placeLeftX);
+        if (leftOverflow >= 0 || -leftOverflow < rightOverflow) {
+          x = placeLeftX;
+          computedDirection = 'left';
+        }
+      }
+    }
+  }
+  if (position === 'auto') x = confineHorizontally(x);
+  var arrowY = arrow ? placeArrowVertical({
+    menuY: y,
+    arrowRef: arrowRef,
+    anchorRect: anchorRect,
+    containerRect: containerRect,
+    menuRect: menuRect
+  }) : undefined;
+  return {
+    arrowY: arrowY,
+    x: x,
+    y: y,
+    computedDirection: computedDirection
+  };
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/placeArrowHorizontal.js
+var placeArrowHorizontal = function placeArrowHorizontal(_ref) {
+  var arrowRef = _ref.arrowRef,
+    menuX = _ref.menuX,
+    anchorRect = _ref.anchorRect,
+    containerRect = _ref.containerRect,
+    menuRect = _ref.menuRect;
+  var x = anchorRect.left - containerRect.left - menuX + anchorRect.width / 2;
+  var offset = arrowRef.current.offsetWidth * 1.25;
+  x = Math.max(offset, x);
+  x = Math.min(x, menuRect.width - offset);
+  return x;
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/placeToporBottom.js
+
+
+var placeToporBottom = function placeToporBottom(_ref) {
+  var anchorRect = _ref.anchorRect,
+    containerRect = _ref.containerRect,
+    menuRect = _ref.menuRect,
+    placeToporBottomX = _ref.placeToporBottomX,
+    placeTopY = _ref.placeTopY,
+    placeBottomY = _ref.placeBottomY,
+    getTopOverflow = _ref.getTopOverflow,
+    getBottomOverflow = _ref.getBottomOverflow,
+    confineHorizontally = _ref.confineHorizontally,
+    confineVertically = _ref.confineVertically,
+    arrowRef = _ref.arrowRef,
+    arrow = _ref.arrow,
+    direction = _ref.direction,
+    position = _ref.position;
+  var computedDirection = direction === 'top' ? 'top' : 'bottom';
+  var x = placeToporBottomX;
+  if (position !== 'initial') {
+    x = confineHorizontally(x);
+    if (position === 'anchor') {
+      x = Math.min(x, anchorRect.right - containerRect.left);
+      x = Math.max(x, anchorRect.left - containerRect.left - menuRect.width);
+    }
+  }
+  var y, topOverflow, bottomOverflow;
+  if (computedDirection === 'top') {
+    y = placeTopY;
+    if (position !== 'initial') {
+      topOverflow = getTopOverflow(y);
+      if (topOverflow < 0) {
+        bottomOverflow = getBottomOverflow(placeBottomY);
+        if (bottomOverflow <= 0 || -topOverflow > bottomOverflow) {
+          y = placeBottomY;
+          computedDirection = 'bottom';
+        }
+      }
+    }
+  } else {
+    y = placeBottomY;
+    if (position !== 'initial') {
+      bottomOverflow = getBottomOverflow(y);
+      if (bottomOverflow > 0) {
+        topOverflow = getTopOverflow(placeTopY);
+        if (topOverflow >= 0 || -topOverflow < bottomOverflow) {
+          y = placeTopY;
+          computedDirection = 'top';
+        }
+      }
+    }
+  }
+  if (position === 'auto') y = confineVertically(y);
+  var arrowX = arrow ? placeArrowHorizontal({
+    menuX: x,
+    arrowRef: arrowRef,
+    anchorRect: anchorRect,
+    containerRect: containerRect,
+    menuRect: menuRect
+  }) : undefined;
+  return {
+    arrowX: arrowX,
+    x: x,
+    y: y,
+    computedDirection: computedDirection
+  };
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/positionMenu.js
+
+
+
+
+var positionMenu = function positionMenu(_ref) {
+  var arrow = _ref.arrow,
+    align = _ref.align,
+    direction = _ref.direction,
+    offsetX = _ref.offsetX,
+    offsetY = _ref.offsetY,
+    position = _ref.position,
+    anchorRect = _ref.anchorRect,
+    arrowRef = _ref.arrowRef,
+    positionHelpers = _ref.positionHelpers;
+  var menuRect = positionHelpers.menuRect,
+    containerRect = positionHelpers.containerRect;
+  var horizontalOffset = offsetX;
+  var verticalOffset = offsetY;
+  if (arrow) {
+    if (direction === 'left' || direction === 'right') {
+      horizontalOffset += arrowRef.current.offsetWidth;
+    } else {
+      verticalOffset += arrowRef.current.offsetHeight;
+    }
+  }
+  var placeLeftX = anchorRect.left - containerRect.left - menuRect.width - horizontalOffset;
+  var placeRightX = anchorRect.right - containerRect.left + horizontalOffset;
+  var placeTopY = anchorRect.top - containerRect.top - menuRect.height - verticalOffset;
+  var placeBottomY = anchorRect.bottom - containerRect.top + verticalOffset;
+  var placeToporBottomX, placeLeftorRightY;
+  if (align === 'end') {
+    placeToporBottomX = anchorRect.right - containerRect.left - menuRect.width;
+    placeLeftorRightY = anchorRect.bottom - containerRect.top - menuRect.height;
+  } else if (align === 'center') {
+    placeToporBottomX = anchorRect.left - containerRect.left - (menuRect.width - anchorRect.width) / 2;
+    placeLeftorRightY = anchorRect.top - containerRect.top - (menuRect.height - anchorRect.height) / 2;
+  } else {
+    placeToporBottomX = anchorRect.left - containerRect.left;
+    placeLeftorRightY = anchorRect.top - containerRect.top;
+  }
+  placeToporBottomX += horizontalOffset;
+  placeLeftorRightY += verticalOffset;
+  var options = _extends({}, positionHelpers, {
+    anchorRect: anchorRect,
+    placeLeftX: placeLeftX,
+    placeRightX: placeRightX,
+    placeLeftorRightY: placeLeftorRightY,
+    placeTopY: placeTopY,
+    placeBottomY: placeBottomY,
+    placeToporBottomX: placeToporBottomX,
+    arrowRef: arrowRef,
+    arrow: arrow,
+    direction: direction,
+    position: position
+  });
+  switch (direction) {
+    case 'left':
+    case 'right':
+      return placeLeftorRight(options);
+    case 'top':
+    case 'bottom':
+    default:
+      return placeToporBottom(options);
+  }
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useIsomorphicLayoutEffect.js
+
+
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? external_react_.useLayoutEffect : external_react_.useEffect;
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useCombinedRef.js
+
+
+function setRef(ref, instance) {
+  typeof ref === 'function' ? ref(instance) : ref.current = instance;
+}
+var useCombinedRef = function useCombinedRef(refA, refB) {
+  return (0,external_react_.useMemo)(function () {
+    if (!refA) return refB;
+    if (!refB) return refA;
+    return function (instance) {
+      setRef(refA, instance);
+      setRef(refB, instance);
+    };
+  }, [refA, refB]);
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/MenuList.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var MenuList_excluded = ["ariaLabel", "menuClassName", "menuStyle", "arrowClassName", "arrowStyle", "anchorPoint", "anchorRef", "containerRef", "containerProps", "focusProps", "externalRef", "parentScrollingRef", "arrow", "align", "direction", "position", "overflow", "setDownOverflow", "repositionFlag", "captureFocus", "state", "endTransition", "isDisabled", "menuItemFocus", "offsetX", "offsetY", "children", "onClose"];
+var MenuList = function MenuList(_ref) {
+  var ariaLabel = _ref.ariaLabel,
+    menuClassName = _ref.menuClassName,
+    menuStyle = _ref.menuStyle,
+    arrowClassName = _ref.arrowClassName,
+    arrowStyle = _ref.arrowStyle,
+    anchorPoint = _ref.anchorPoint,
+    anchorRef = _ref.anchorRef,
+    containerRef = _ref.containerRef,
+    containerProps = _ref.containerProps,
+    focusProps = _ref.focusProps,
+    externalRef = _ref.externalRef,
+    parentScrollingRef = _ref.parentScrollingRef,
+    arrow = _ref.arrow,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'start' : _ref$align,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'bottom' : _ref$direction,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'auto' : _ref$position,
+    _ref$overflow = _ref.overflow,
+    overflow = _ref$overflow === void 0 ? 'visible' : _ref$overflow,
+    setDownOverflow = _ref.setDownOverflow,
+    repositionFlag = _ref.repositionFlag,
+    _ref$captureFocus = _ref.captureFocus,
+    captureFocus = _ref$captureFocus === void 0 ? true : _ref$captureFocus,
+    state = _ref.state,
+    endTransition = _ref.endTransition,
+    isDisabled = _ref.isDisabled,
+    menuItemFocus = _ref.menuItemFocus,
+    _ref$offsetX = _ref.offsetX,
+    offsetX = _ref$offsetX === void 0 ? 0 : _ref$offsetX,
+    _ref$offsetY = _ref.offsetY,
+    offsetY = _ref$offsetY === void 0 ? 0 : _ref$offsetY,
+    children = _ref.children,
+    onClose = _ref.onClose,
+    restProps = _objectWithoutPropertiesLoose(_ref, MenuList_excluded);
+  var _useState = (0,external_react_.useState)({
+      x: 0,
+      y: 0
+    }),
+    menuPosition = _useState[0],
+    setMenuPosition = _useState[1];
+  var _useState2 = (0,external_react_.useState)({}),
+    arrowPosition = _useState2[0],
+    setArrowPosition = _useState2[1];
+  var _useState3 = (0,external_react_.useState)(),
+    overflowData = _useState3[0],
+    setOverflowData = _useState3[1];
+  var _useState4 = (0,external_react_.useState)(direction),
+    expandedDirection = _useState4[0],
+    setExpandedDirection = _useState4[1];
+  var _useState5 = (0,external_react_.useState)(createSubmenuCtx),
+    submenuCtx = _useState5[0];
+  var _useReducer = (0,external_react_.useReducer)(function (c) {
+      return c + 1;
+    }, 1),
+    reposSubmenu = _useReducer[0],
+    forceReposSubmenu = _useReducer[1];
+  var _useContext = (0,external_react_.useContext)(SettingsContext),
+    transition = _useContext.transition,
+    boundingBoxRef = _useContext.boundingBoxRef,
+    boundingBoxPadding = _useContext.boundingBoxPadding,
+    rootMenuRef = _useContext.rootMenuRef,
+    rootAnchorRef = _useContext.rootAnchorRef,
+    scrollNodesRef = _useContext.scrollNodesRef,
+    reposition = _useContext.reposition,
+    viewScroll = _useContext.viewScroll,
+    submenuCloseDelay = _useContext.submenuCloseDelay;
+  var _useContext2 = (0,external_react_.useContext)(MenuListContext),
+    parentSubmenuCtx = _useContext2.submenuCtx,
+    _useContext2$reposSub = _useContext2.reposSubmenu,
+    reposFlag = _useContext2$reposSub === void 0 ? repositionFlag : _useContext2$reposSub;
+  var menuRef = (0,external_react_.useRef)(null);
+  var focusRef = (0,external_react_.useRef)();
+  var arrowRef = (0,external_react_.useRef)();
+  var prevOpen = (0,external_react_.useRef)(false);
+  var latestMenuSize = (0,external_react_.useRef)({
+    width: 0,
+    height: 0
+  });
+  var latestHandlePosition = (0,external_react_.useRef)(function () {});
+  var _useItems = useItems(menuRef, focusRef),
+    hoverItem = _useItems.hoverItem,
+    dispatch = _useItems.dispatch,
+    updateItems = _useItems.updateItems;
+  var isOpen = isMenuOpen(state);
+  var openTransition = getTransition(transition, 'open');
+  var closeTransition = getTransition(transition, 'close');
+  var scrollNodes = scrollNodesRef.current;
+  var onKeyDown = function onKeyDown(e) {
+    switch (e.key) {
+      case Keys.HOME:
+        dispatch(HoverActionTypes.FIRST);
+        break;
+      case Keys.END:
+        dispatch(HoverActionTypes.LAST);
+        break;
+      case Keys.UP:
+        dispatch(HoverActionTypes.DECREASE, hoverItem);
+        break;
+      case Keys.DOWN:
+        dispatch(HoverActionTypes.INCREASE, hoverItem);
+        break;
+      case Keys.SPACE:
+        if (e.target && e.target.className.indexOf(menuClass) !== -1) {
+          e.preventDefault();
+        }
+        return;
+      default:
+        return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  var onAnimationEnd = function onAnimationEnd() {
+    if (state === 'closing') {
+      setOverflowData();
+    }
+    safeCall(endTransition);
+  };
+  var onPointerMove = function onPointerMove(e) {
+    e.stopPropagation();
+    submenuCtx.on(submenuCloseDelay, function () {
+      dispatch(HoverActionTypes.RESET);
+      focusRef.current.focus();
+    });
+  };
+  var onPointerLeave = function onPointerLeave(e) {
+    if (e.target === e.currentTarget) submenuCtx.off();
+  };
+  var handlePosition = (0,external_react_.useCallback)(function (noOverflowCheck) {
+    var _anchorRef$current;
+    var anchorRect = anchorRef ? (_anchorRef$current = anchorRef.current) == null ? void 0 : _anchorRef$current.getBoundingClientRect() : anchorPoint ? {
+      left: anchorPoint.x,
+      right: anchorPoint.x,
+      top: anchorPoint.y,
+      bottom: anchorPoint.y,
+      width: 0,
+      height: 0
+    } : null;
+    if (!anchorRect) {
+      if (false) {}
+      return;
+    }
+    if (!scrollNodes.menu) {
+      scrollNodes.menu = (boundingBoxRef ? boundingBoxRef.current : getScrollAncestor(rootMenuRef.current)) || window;
+    }
+    var positionHelpers = getPositionHelpers(containerRef, menuRef, scrollNodes.menu, boundingBoxPadding);
+    var _positionMenu = positionMenu({
+        arrow: arrow,
+        align: align,
+        direction: direction,
+        offsetX: offsetX,
+        offsetY: offsetY,
+        position: position,
+        anchorRect: anchorRect,
+        arrowRef: arrowRef,
+        positionHelpers: positionHelpers
+      }),
+      arrowX = _positionMenu.arrowX,
+      arrowY = _positionMenu.arrowY,
+      x = _positionMenu.x,
+      y = _positionMenu.y,
+      computedDirection = _positionMenu.computedDirection;
+    var menuRect = positionHelpers.menuRect;
+    var menuHeight = menuRect.height;
+    if (!noOverflowCheck && overflow !== 'visible') {
+      var getTopOverflow = positionHelpers.getTopOverflow,
+        getBottomOverflow = positionHelpers.getBottomOverflow;
+      var height, _overflowAmt;
+      var prevHeight = latestMenuSize.current.height;
+      var bottomOverflow = getBottomOverflow(y);
+      if (bottomOverflow > 0 || floatEqual(bottomOverflow, 0) && floatEqual(menuHeight, prevHeight)) {
+        height = menuHeight - bottomOverflow;
+        _overflowAmt = bottomOverflow;
+      } else {
+        var topOverflow = getTopOverflow(y);
+        if (topOverflow < 0 || floatEqual(topOverflow, 0) && floatEqual(menuHeight, prevHeight)) {
+          height = menuHeight + topOverflow;
+          _overflowAmt = 0 - topOverflow;
+          if (height >= 0) y -= topOverflow;
+        }
+      }
+      if (height >= 0) {
+        menuHeight = height;
+        setOverflowData({
+          height: height,
+          overflowAmt: _overflowAmt
+        });
+      } else {
+        setOverflowData();
+      }
+    }
+    if (arrow) setArrowPosition({
+      x: arrowX,
+      y: arrowY
+    });
+    setMenuPosition({
+      x: x,
+      y: y
+    });
+    setExpandedDirection(computedDirection);
+    latestMenuSize.current = {
+      width: menuRect.width,
+      height: menuHeight
+    };
+  }, [arrow, align, boundingBoxPadding, direction, offsetX, offsetY, position, overflow, anchorPoint, anchorRef, containerRef, boundingBoxRef, rootMenuRef, scrollNodes]);
+  useIsomorphicLayoutEffect(function () {
+    if (isOpen) {
+      handlePosition();
+      if (prevOpen.current) forceReposSubmenu();
+    }
+    prevOpen.current = isOpen;
+    latestHandlePosition.current = handlePosition;
+  }, [isOpen, handlePosition, reposFlag]);
+  useIsomorphicLayoutEffect(function () {
+    if (overflowData && !setDownOverflow) menuRef.current.scrollTop = 0;
+  }, [overflowData, setDownOverflow]);
+  useIsomorphicLayoutEffect(function () {
+    return updateItems;
+  }, [updateItems]);
+  (0,external_react_.useEffect)(function () {
+    var menuScroll = scrollNodes.menu;
+    if (!isOpen || !menuScroll) return;
+    menuScroll = menuScroll.addEventListener ? menuScroll : window;
+    if (!scrollNodes.anchors) {
+      scrollNodes.anchors = [];
+      var anchorScroll = getScrollAncestor(rootAnchorRef && rootAnchorRef.current);
+      while (anchorScroll && anchorScroll !== menuScroll) {
+        scrollNodes.anchors.push(anchorScroll);
+        anchorScroll = getScrollAncestor(anchorScroll);
+      }
+    }
+    var scroll = viewScroll;
+    if (scrollNodes.anchors.length && scroll === 'initial') scroll = 'auto';
+    if (scroll === 'initial') return;
+    var handleScroll = function handleScroll() {
+      if (scroll === 'auto') {
+        batchedUpdates(function () {
+          return handlePosition(true);
+        });
+      } else {
+        safeCall(onClose, {
+          reason: CloseReason.SCROLL
+        });
+      }
+    };
+    var scrollObservers = scrollNodes.anchors.concat(viewScroll !== 'initial' ? menuScroll : []);
+    scrollObservers.forEach(function (o) {
+      return o.addEventListener('scroll', handleScroll);
+    });
+    return function () {
+      return scrollObservers.forEach(function (o) {
+        return o.removeEventListener('scroll', handleScroll);
+      });
+    };
+  }, [rootAnchorRef, scrollNodes, isOpen, onClose, viewScroll, handlePosition]);
+  var hasOverflow = !!overflowData && overflowData.overflowAmt > 0;
+  (0,external_react_.useEffect)(function () {
+    if (hasOverflow || !isOpen || !parentScrollingRef) return;
+    var handleScroll = function handleScroll() {
+      return batchedUpdates(handlePosition);
+    };
+    var parentScroll = parentScrollingRef.current;
+    parentScroll.addEventListener('scroll', handleScroll);
+    return function () {
+      return parentScroll.removeEventListener('scroll', handleScroll);
+    };
+  }, [isOpen, hasOverflow, parentScrollingRef, handlePosition]);
+  (0,external_react_.useEffect)(function () {
+    if (typeof ResizeObserver !== 'function' || reposition === 'initial') return;
+    var resizeObserver = new ResizeObserver(function (_ref2) {
+      var entry = _ref2[0];
+      var borderBoxSize = entry.borderBoxSize,
+        target = entry.target;
+      var width, height;
+      if (borderBoxSize) {
+        var _ref3 = borderBoxSize[0] || borderBoxSize,
+          inlineSize = _ref3.inlineSize,
+          blockSize = _ref3.blockSize;
+        width = inlineSize;
+        height = blockSize;
+      } else {
+        var borderRect = target.getBoundingClientRect();
+        width = borderRect.width;
+        height = borderRect.height;
+      }
+      if (width === 0 || height === 0) return;
+      if (floatEqual(width, latestMenuSize.current.width, 1) && floatEqual(height, latestMenuSize.current.height, 1)) return;
+      (0,external_react_dom_.flushSync)(function () {
+        latestHandlePosition.current();
+        forceReposSubmenu();
+      });
+    });
+    var observeTarget = menuRef.current;
+    resizeObserver.observe(observeTarget, {
+      box: 'border-box'
+    });
+    return function () {
+      return resizeObserver.unobserve(observeTarget);
+    };
+  }, [reposition]);
+  (0,external_react_.useEffect)(function () {
+    if (!isOpen) {
+      dispatch(HoverActionTypes.RESET);
+      if (!closeTransition) setOverflowData();
+      return;
+    }
+    var _ref4 = menuItemFocus || {},
+      position = _ref4.position,
+      alwaysUpdate = _ref4.alwaysUpdate;
+    var setItemFocus = function setItemFocus() {
+      if (position === FocusPositions.FIRST) {
+        dispatch(HoverActionTypes.FIRST);
+      } else if (position === FocusPositions.LAST) {
+        dispatch(HoverActionTypes.LAST);
+      } else if (position >= -1) {
+        dispatch(HoverActionTypes.SET_INDEX, undefined, position);
+      }
+    };
+    if (alwaysUpdate) {
+      setItemFocus();
+    } else if (captureFocus) {
+      var id = setTimeout(function () {
+        if (!menuRef.current.contains(document.activeElement)) {
+          focusRef.current.focus();
+          setItemFocus();
+        }
+      }, openTransition ? 170 : 100);
+      return function () {
+        return clearTimeout(id);
+      };
+    }
+  }, [isOpen, openTransition, closeTransition, captureFocus, menuItemFocus, dispatch]);
+  var itemContext = (0,external_react_.useMemo)(function () {
+    return {
+      isParentOpen: isOpen,
+      submenuCtx: submenuCtx,
+      dispatch: dispatch,
+      updateItems: updateItems
+    };
+  }, [isOpen, submenuCtx, dispatch, updateItems]);
+  var maxHeight, overflowAmt;
+  if (overflowData) {
+    setDownOverflow ? overflowAmt = overflowData.overflowAmt : maxHeight = overflowData.height;
+  }
+  var listContext = (0,external_react_.useMemo)(function () {
+    return {
+      reposSubmenu: reposSubmenu,
+      submenuCtx: submenuCtx,
+      overflow: overflow,
+      overflowAmt: overflowAmt,
+      parentMenuRef: menuRef,
+      parentDir: expandedDirection
+    };
+  }, [reposSubmenu, submenuCtx, overflow, overflowAmt, expandedDirection]);
+  var overflowStyle = maxHeight >= 0 ? {
+    maxHeight: maxHeight,
+    overflow: overflow
+  } : undefined;
+  var modifiers = (0,external_react_.useMemo)(function () {
+    return {
+      state: state,
+      dir: expandedDirection
+    };
+  }, [state, expandedDirection]);
+  var arrowModifiers = (0,external_react_.useMemo)(function () {
+    return {
+      dir: expandedDirection
+    };
+  }, [expandedDirection]);
+  var _arrowClass = useBEM({
+    block: menuClass,
+    element: menuArrowClass,
+    modifiers: arrowModifiers,
+    className: arrowClassName
+  });
+  var menu = /*#__PURE__*/(0,jsx_runtime.jsxs)("ul", _extends({
+    role: "menu",
+    "aria-label": ariaLabel
+  }, commonProps(isDisabled), mergeProps({
+    onPointerEnter: parentSubmenuCtx == null ? void 0 : parentSubmenuCtx.off,
+    onPointerMove: onPointerMove,
+    onPointerLeave: onPointerLeave,
+    onKeyDown: onKeyDown,
+    onAnimationEnd: onAnimationEnd
+  }, restProps), {
+    ref: useCombinedRef(externalRef, menuRef),
+    className: useBEM({
+      block: menuClass,
+      modifiers: modifiers,
+      className: menuClassName
+    }),
+    style: _extends({}, menuStyle, overflowStyle, {
+      margin: 0,
+      display: state === 'closed' ? 'none' : undefined,
+      position: positionAbsolute,
+      left: menuPosition.x,
+      top: menuPosition.y
+    }),
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("li", _extends({
+      tabIndex: -1,
+      style: {
+        position: positionAbsolute,
+        left: 0,
+        top: 0,
+        display: 'block',
+        outline: 'none'
+      },
+      ref: focusRef
+    }, dummyItemProps, focusProps)), arrow && /*#__PURE__*/(0,jsx_runtime.jsx)("li", _extends({
+      className: _arrowClass,
+      style: _extends({
+        display: 'block',
+        position: positionAbsolute,
+        left: arrowPosition.x,
+        top: arrowPosition.y
+      }, arrowStyle),
+      ref: arrowRef
+    }, dummyItemProps)), /*#__PURE__*/(0,jsx_runtime.jsx)(MenuListContext.Provider, {
+      value: listContext,
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)(MenuListItemContext.Provider, {
+        value: itemContext,
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)(HoverItemContext.Provider, {
+          value: hoverItem,
+          children: safeCall(children, modifiers)
+        })
+      })
+    })]
+  }));
+  return containerProps ? /*#__PURE__*/(0,jsx_runtime.jsx)(MenuContainer, _extends({}, containerProps, {
+    isOpen: isOpen,
+    children: menu
+  })) : menu;
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/ControlledMenu.js
+
+
+
+
+
+
+
+
+
+
+var ControlledMenu_excluded = ["aria-label", "className", "containerProps", "initialMounted", "unmountOnClose", "transition", "transitionTimeout", "boundingBoxRef", "boundingBoxPadding", "reposition", "submenuOpenDelay", "submenuCloseDelay", "skipOpen", "viewScroll", "portal", "theming", "onItemClick"];
+var ControlledMenu = /*#__PURE__*/(0,external_react_.forwardRef)(function ControlledMenu(_ref, externalRef) {
+  var ariaLabel = _ref['aria-label'],
+    className = _ref.className,
+    containerProps = _ref.containerProps,
+    initialMounted = _ref.initialMounted,
+    unmountOnClose = _ref.unmountOnClose,
+    transition = _ref.transition,
+    transitionTimeout = _ref.transitionTimeout,
+    boundingBoxRef = _ref.boundingBoxRef,
+    boundingBoxPadding = _ref.boundingBoxPadding,
+    _ref$reposition = _ref.reposition,
+    reposition = _ref$reposition === void 0 ? 'auto' : _ref$reposition,
+    _ref$submenuOpenDelay = _ref.submenuOpenDelay,
+    submenuOpenDelay = _ref$submenuOpenDelay === void 0 ? 300 : _ref$submenuOpenDelay,
+    _ref$submenuCloseDela = _ref.submenuCloseDelay,
+    submenuCloseDelay = _ref$submenuCloseDela === void 0 ? 150 : _ref$submenuCloseDela,
+    skipOpen = _ref.skipOpen,
+    _ref$viewScroll = _ref.viewScroll,
+    viewScroll = _ref$viewScroll === void 0 ? 'initial' : _ref$viewScroll,
+    portal = _ref.portal,
+    theming = _ref.theming,
+    onItemClick = _ref.onItemClick,
+    restProps = _objectWithoutPropertiesLoose(_ref, ControlledMenu_excluded);
+  var containerRef = (0,external_react_.useRef)(null);
+  var scrollNodesRef = (0,external_react_.useRef)({});
+  var anchorRef = restProps.anchorRef,
+    state = restProps.state,
+    onClose = restProps.onClose;
+  var settings = (0,external_react_.useMemo)(function () {
+    return {
+      initialMounted: initialMounted,
+      unmountOnClose: unmountOnClose,
+      transition: transition,
+      transitionTimeout: transitionTimeout,
+      boundingBoxRef: boundingBoxRef,
+      boundingBoxPadding: boundingBoxPadding,
+      rootMenuRef: containerRef,
+      rootAnchorRef: anchorRef,
+      scrollNodesRef: scrollNodesRef,
+      reposition: reposition,
+      viewScroll: viewScroll,
+      submenuOpenDelay: submenuOpenDelay,
+      submenuCloseDelay: submenuCloseDelay
+    };
+  }, [initialMounted, unmountOnClose, transition, transitionTimeout, anchorRef, boundingBoxRef, boundingBoxPadding, reposition, viewScroll, submenuOpenDelay, submenuCloseDelay]);
+  var eventHandlers = (0,external_react_.useMemo)(function () {
+    return {
+      handleClick: function handleClick(event, isCheckorRadio) {
+        if (!event.stopPropagation) safeCall(onItemClick, event);
+        var keepOpen = event.keepOpen;
+        if (keepOpen === undefined) {
+          keepOpen = isCheckorRadio && event.key === Keys.SPACE;
+        }
+        if (!keepOpen) {
+          safeCall(onClose, {
+            value: event.value,
+            key: event.key,
+            reason: CloseReason.CLICK
+          });
+        }
+      },
+      handleClose: function handleClose(key) {
+        safeCall(onClose, {
+          key: key,
+          reason: CloseReason.CLICK
+        });
+      }
+    };
+  }, [onItemClick, onClose]);
+  if (!state) return null;
+  var menuList = /*#__PURE__*/(0,jsx_runtime.jsx)(SettingsContext.Provider, {
+    value: settings,
+    children: /*#__PURE__*/(0,jsx_runtime.jsx)(EventHandlersContext.Provider, {
+      value: eventHandlers,
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)(MenuList, _extends({}, restProps, {
+        ariaLabel: ariaLabel || 'Menu',
+        externalRef: externalRef,
+        containerRef: containerRef,
+        containerProps: {
+          className: className,
+          containerRef: containerRef,
+          containerProps: containerProps,
+          skipOpen: skipOpen,
+          theming: theming,
+          transition: transition,
+          onClose: onClose
+        }
+      }))
+    })
+  });
+  if (portal === true && typeof document !== 'undefined') {
+    return /*#__PURE__*/(0,external_react_dom_.createPortal)(menuList, document.body);
+  } else if (portal) {
+    return portal.target ? /*#__PURE__*/(0,external_react_dom_.createPortal)(menuList, portal.target) : portal.stablePosition ? null : menuList;
+  }
+  return menuList;
+});
+ false ? 0 : void 0;
+
+
+
+;// ./node_modules/react-transition-state/dist/index.es.js
+
+
+var PRE_ENTER = 0;
+var ENTERING = 1;
+var ENTERED = 2;
+var PRE_EXIT = 3;
+var EXITING = 4;
+var EXITED = 5;
+var UNMOUNTED = 6;
+var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
+
+var startOrEnd = function startOrEnd(unmounted) {
+  return unmounted ? UNMOUNTED : EXITED;
+};
+
+var updateState = function updateState(state, setState, latestState, timeoutId, onChange) {
+  clearTimeout(timeoutId.current);
+  setState(state);
+  latestState.current = state;
+  onChange && onChange({
+    state: STATES[state]
+  });
+};
+
+var useTransition = function useTransition(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      _ref$enter = _ref.enter,
+      enter = _ref$enter === void 0 ? true : _ref$enter,
+      _ref$exit = _ref.exit,
+      exit = _ref$exit === void 0 ? true : _ref$exit,
+      preEnter = _ref.preEnter,
+      preExit = _ref.preExit,
+      timeout = _ref.timeout,
+      initialEntered = _ref.initialEntered,
+      mountOnEnter = _ref.mountOnEnter,
+      unmountOnExit = _ref.unmountOnExit,
+      onChange = _ref.onChange;
+
+  var _useState = (0,external_react_.useState)(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
+      state = _useState[0],
+      setState = _useState[1];
+
+  var latestState = (0,external_react_.useRef)(state);
+  var timeoutId = (0,external_react_.useRef)();
+  var enterTimeout, exitTimeout;
+
+  if (typeof timeout === 'object') {
+    enterTimeout = timeout.enter;
+    exitTimeout = timeout.exit;
+  } else {
+    enterTimeout = exitTimeout = timeout;
+  }
+
+  var endTransition = (0,external_react_.useCallback)(function () {
+    var newState;
+
+    switch (latestState.current) {
+      case ENTERING:
+      case PRE_ENTER:
+        newState = ENTERED;
+        break;
+
+      case EXITING:
+      case PRE_EXIT:
+        newState = startOrEnd(unmountOnExit);
+        break;
+    }
+
+    if (newState !== undefined) {
+      updateState(newState, setState, latestState, timeoutId, onChange);
+    }
+  }, [onChange, unmountOnExit]);
+  var toggle = (0,external_react_.useCallback)(function (toEnter) {
+    var transitState = function transitState(newState) {
+      updateState(newState, setState, latestState, timeoutId, onChange);
+
+      switch (newState) {
+        case ENTERING:
+          if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
+          break;
+
+        case EXITING:
+          if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
+          break;
+
+        case PRE_ENTER:
+        case PRE_EXIT:
+          timeoutId.current = setTimeout(function () {
+            return transitState(newState + 1);
+          }, 0);
+          break;
+      }
+    };
+
+    var enterStage = latestState.current <= ENTERED;
+    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
+
+    if (toEnter) {
+      if (!enterStage) {
+        transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
+      }
+    } else {
+      if (enterStage) {
+        transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
+      }
+    }
+  }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
+  (0,external_react_.useEffect)(function () {
+    return function () {
+      return clearTimeout(timeoutId.current);
+    };
+  }, []);
+  return [STATES[state], toggle, endTransition];
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useMenuState.js
+
+
+
+
+var useMenuState = function useMenuState(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    initialOpen = _ref.initialOpen,
+    initialMounted = _ref.initialMounted,
+    unmountOnClose = _ref.unmountOnClose,
+    transition = _ref.transition,
+    _ref$transitionTimeou = _ref.transitionTimeout,
+    transitionTimeout = _ref$transitionTimeou === void 0 ? 500 : _ref$transitionTimeou;
+  var _useTransition = useTransition({
+      initialEntered: initialOpen,
+      mountOnEnter: !initialMounted,
+      unmountOnExit: unmountOnClose,
+      timeout: transitionTimeout,
+      enter: getTransition(transition, 'open'),
+      exit: getTransition(transition, 'close')
+    }),
+    state = _useTransition[0],
+    toggleMenu = _useTransition[1],
+    endTransition = _useTransition[2];
+  return [{
+    state: MenuStateMap[state],
+    endTransition: endTransition
+  }, toggleMenu];
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useMenuStateAndFocus.js
+
+
+
+
+var useMenuStateAndFocus = function useMenuStateAndFocus(options) {
+  var _useMenuState = useMenuState(options),
+    menuProps = _useMenuState[0],
+    toggleMenu = _useMenuState[1];
+  var _useState = (0,external_react_.useState)(),
+    menuItemFocus = _useState[0],
+    setMenuItemFocus = _useState[1];
+  var openMenu = function openMenu(position, alwaysUpdate) {
+    setMenuItemFocus({
+      position: position,
+      alwaysUpdate: alwaysUpdate
+    });
+    toggleMenu(true);
+  };
+  return [_extends({
+    menuItemFocus: menuItemFocus
+  }, menuProps), toggleMenu, openMenu];
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useClick.js
+
+
+var useClick = function useClick(state, onToggle) {
+  if (false) {}
+  var _useState = (0,external_react_.useState)({}),
+    skipOpen = _useState[0];
+  return {
+    onMouseDown: function onMouseDown() {
+      skipOpen.v = state && state !== 'closed';
+    },
+    onClick: function onClick(e) {
+      return skipOpen.v ? skipOpen.v = false : onToggle(true, e);
+    }
+  };
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useMenuChange.js
+
+
+
+var useMenuChange = function useMenuChange(onMenuChange, isOpen) {
+  var prevOpen = (0,external_react_.useRef)(isOpen);
+  (0,external_react_.useEffect)(function () {
+    if (prevOpen.current !== isOpen) safeCall(onMenuChange, {
+      open: isOpen
+    });
+    prevOpen.current = isOpen;
+  }, [onMenuChange, isOpen]);
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/Menu.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+var Menu_excluded = ["aria-label", "captureFocus", "initialOpen", "menuButton", "instanceRef", "onMenuChange"];
+var Menu = /*#__PURE__*/(0,external_react_.forwardRef)(function Menu(_ref, externalRef) {
+  var ariaLabel = _ref['aria-label'],
+    menuButton = _ref.menuButton,
+    instanceRef = _ref.instanceRef,
+    onMenuChange = _ref.onMenuChange,
+    restProps = _objectWithoutPropertiesLoose(_ref, Menu_excluded);
+  var _useMenuStateAndFocus = useMenuStateAndFocus(restProps),
+    stateProps = _useMenuStateAndFocus[0],
+    toggleMenu = _useMenuStateAndFocus[1],
+    openMenu = _useMenuStateAndFocus[2];
+  var state = stateProps.state;
+  var isOpen = isMenuOpen(state);
+  var buttonRef = (0,external_react_.useRef)(null);
+  var anchorProps = useClick(state, function (_, e) {
+    return openMenu(!e.detail ? FocusPositions.FIRST : undefined);
+  });
+  var handleClose = (0,external_react_.useCallback)(function (e) {
+    toggleMenu(false);
+    if (e.key) setTimeout(function () {
+      var _buttonRef$current;
+      return (_buttonRef$current = buttonRef.current) == null ? void 0 : _buttonRef$current.focus();
+    }, 0);
+  }, [toggleMenu]);
+  var onKeyDown = function onKeyDown(e) {
+    switch (e.key) {
+      case Keys.UP:
+        openMenu(FocusPositions.LAST);
+        break;
+      case Keys.DOWN:
+        openMenu(FocusPositions.FIRST);
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+  };
+  var button = safeCall(menuButton, {
+    open: isOpen
+  });
+  if (!button || !button.type) throw new Error('Menu requires a menuButton prop.');
+  var buttonProps = _extends({
+    ref: useCombinedRef(button.ref, buttonRef)
+  }, mergeProps(_extends({
+    onKeyDown: onKeyDown
+  }, anchorProps), button.props));
+  if (getName(button.type) === 'MenuButton') {
+    buttonProps.isOpen = isOpen;
+  }
+  var renderButton = /*#__PURE__*/(0,external_react_.cloneElement)(button, buttonProps);
+  useMenuChange(onMenuChange, isOpen);
+  (0,external_react_.useImperativeHandle)(instanceRef, function () {
+    return {
+      openMenu: openMenu,
+      closeMenu: function closeMenu() {
+        return toggleMenu(false);
+      }
+    };
+  });
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)(external_react_.Fragment, {
+    children: [renderButton, /*#__PURE__*/(0,jsx_runtime.jsx)(ControlledMenu, _extends({}, restProps, stateProps, {
+      "aria-label": ariaLabel || (typeof button.props.children === 'string' ? button.props.children : 'Menu'),
+      anchorRef: buttonRef,
+      ref: externalRef,
+      onClose: handleClose
+    }))]
+  });
+});
+ false ? 0 : void 0;
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/utils/withHovering.js
+
+
+
+
+
+var withHovering = function withHovering(name, WrappedComponent) {
+  var Component = /*#__PURE__*/(0,external_react_.memo)(WrappedComponent);
+  var WithHovering = /*#__PURE__*/(0,external_react_.forwardRef)(function (props, ref) {
+    var itemRef = (0,external_react_.useRef)(null);
+    return /*#__PURE__*/(0,jsx_runtime.jsx)(Component, _extends({}, props, {
+      itemRef: itemRef,
+      externalRef: ref,
+      isHovering: (0,external_react_.useContext)(HoverItemContext) === itemRef.current
+    }));
+  });
+  WithHovering.displayName = "WithHovering(" + name + ")";
+  return WithHovering;
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useItemEffect.js
+
+
+var useItemEffect = function useItemEffect(isDisabled, itemRef, updateItems) {
+  useIsomorphicLayoutEffect(function () {
+    if (false) {}
+    if (isDisabled) return;
+    var item = itemRef.current;
+    updateItems(item, true);
+    return function () {
+      updateItems(item);
+    };
+  }, [isDisabled, itemRef, updateItems]);
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/SubMenu.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var SubMenu_excluded = ["aria-label", "className", "disabled", "direction", "label", "openTrigger", "onMenuChange", "isHovering", "instanceRef", "itemRef", "captureFocus", "repositionFlag", "itemProps"],
+  _excluded2 = ["ref", "className"];
+var SubMenu = /*#__PURE__*/withHovering('SubMenu', function SubMenu(_ref) {
+  var ariaLabel = _ref['aria-label'],
+    className = _ref.className,
+    disabled = _ref.disabled,
+    direction = _ref.direction,
+    label = _ref.label,
+    openTrigger = _ref.openTrigger,
+    onMenuChange = _ref.onMenuChange,
+    isHovering = _ref.isHovering,
+    instanceRef = _ref.instanceRef,
+    itemRef = _ref.itemRef,
+    _ref$itemProps = _ref.itemProps,
+    itemProps = _ref$itemProps === void 0 ? {} : _ref$itemProps,
+    restProps = _objectWithoutPropertiesLoose(_ref, SubMenu_excluded);
+  var settings = (0,external_react_.useContext)(SettingsContext);
+  var rootMenuRef = settings.rootMenuRef,
+    submenuOpenDelay = settings.submenuOpenDelay,
+    submenuCloseDelay = settings.submenuCloseDelay;
+  var _useContext = (0,external_react_.useContext)(MenuListContext),
+    parentMenuRef = _useContext.parentMenuRef,
+    parentDir = _useContext.parentDir,
+    parentOverflow = _useContext.overflow;
+  var _useContext2 = (0,external_react_.useContext)(MenuListItemContext),
+    isParentOpen = _useContext2.isParentOpen,
+    submenuCtx = _useContext2.submenuCtx,
+    dispatch = _useContext2.dispatch,
+    updateItems = _useContext2.updateItems;
+  var isPortal = parentOverflow !== 'visible';
+  var _useMenuStateAndFocus = useMenuStateAndFocus(settings),
+    stateProps = _useMenuStateAndFocus[0],
+    toggleMenu = _useMenuStateAndFocus[1],
+    _openMenu = _useMenuStateAndFocus[2];
+  var state = stateProps.state;
+  var isDisabled = !!disabled;
+  var isOpen = isMenuOpen(state);
+  var containerRef = (0,external_react_.useRef)(null);
+  var _useState = (0,external_react_.useState)({
+      v: 0
+    }),
+    timerId = _useState[0];
+  var stopTimer = function stopTimer() {
+    submenuCtx.off();
+    if (timerId.v) {
+      clearTimeout(timerId.v);
+      timerId.v = 0;
+    }
+  };
+  var _openMenu2 = function openMenu() {
+    stopTimer();
+    setHover();
+    !isDisabled && _openMenu.apply(void 0, arguments);
+  };
+  var setHover = function setHover() {
+    return !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current);
+  };
+  var delayOpen = function delayOpen(delay) {
+    setHover();
+    if (!openTrigger) timerId.v = setTimeout(function () {
+      return batchedUpdates(_openMenu2);
+    }, Math.max(delay, 0));
+  };
+  var onPointerMove = function onPointerMove(e) {
+    if (isDisabled) return;
+    e.stopPropagation();
+    if (timerId.v || isOpen) return;
+    submenuCtx.on(submenuCloseDelay, function () {
+      return delayOpen(submenuOpenDelay - submenuCloseDelay);
+    }, function () {
+      return delayOpen(submenuOpenDelay);
+    });
+  };
+  var onPointerLeave = function onPointerLeave() {
+    stopTimer();
+    if (!isOpen) dispatch(HoverActionTypes.UNSET, itemRef.current);
+  };
+  var onKeyDown = function onKeyDown(e) {
+    if (!isHovering) return;
+    switch (e.key) {
+      case Keys.ENTER:
+      case Keys.SPACE:
+      case Keys.RIGHT:
+        openTrigger !== 'none' && _openMenu2(FocusPositions.FIRST);
+        break;
+    }
+  };
+  var onKeyDownOfRoot = function onKeyDownOfRoot(e) {
+    var handled = false;
+    switch (e.key) {
+      case Keys.LEFT:
+        if (isOpen) {
+          itemRef.current.focus();
+          toggleMenu(false);
+          handled = true;
+        }
+        break;
+      case Keys.RIGHT:
+        if (!isOpen) handled = true;
+        break;
+    }
+    if (handled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+  useItemEffect(isDisabled, itemRef, updateItems);
+  useMenuChange(onMenuChange, isOpen);
+  (0,external_react_.useEffect)(function () {
+    return submenuCtx.toggle(isOpen);
+  }, [submenuCtx, isOpen]);
+  (0,external_react_.useEffect)(function () {
+    return function () {
+      return clearTimeout(timerId.v);
+    };
+  }, [timerId]);
+  (0,external_react_.useEffect)(function () {
+    if (isHovering && isParentOpen) {
+      itemRef.current.focus();
+    } else {
+      toggleMenu(false);
+    }
+  }, [isHovering, isParentOpen, toggleMenu, itemRef]);
+  (0,external_react_.useImperativeHandle)(instanceRef, function () {
+    return {
+      openMenu: function openMenu() {
+        isParentOpen && _openMenu2.apply(void 0, arguments);
+      },
+      closeMenu: function closeMenu() {
+        if (isOpen) {
+          itemRef.current.focus();
+          toggleMenu(false);
+        }
+      }
+    };
+  });
+  var modifiers = (0,external_react_.useMemo)(function () {
+    return {
+      open: isOpen,
+      hover: isHovering,
+      disabled: isDisabled,
+      submenu: true
+    };
+  }, [isOpen, isHovering, isDisabled]);
+  var externalItemRef = itemProps.ref,
+    itemClassName = itemProps.className,
+    restItemProps = _objectWithoutPropertiesLoose(itemProps, _excluded2);
+  var mergedItemProps = mergeProps({
+    onPointerEnter: submenuCtx.off,
+    onPointerMove: onPointerMove,
+    onPointerLeave: onPointerLeave,
+    onKeyDown: onKeyDown,
+    onClick: function onClick() {
+      return openTrigger !== 'none' && _openMenu2();
+    }
+  }, restItemProps);
+  var getMenuList = function getMenuList() {
+    var menuList = /*#__PURE__*/(0,jsx_runtime.jsx)(MenuList, _extends({}, restProps, stateProps, {
+      ariaLabel: ariaLabel || (typeof label === 'string' ? label : 'Submenu'),
+      anchorRef: itemRef,
+      containerRef: isPortal ? rootMenuRef : containerRef,
+      direction: direction || (parentDir === 'right' || parentDir === 'left' ? parentDir : 'right'),
+      parentScrollingRef: isPortal && parentMenuRef,
+      isDisabled: isDisabled
+    }));
+    var container = rootMenuRef.current;
+    return isPortal && container ? /*#__PURE__*/(0,external_react_dom_.createPortal)(menuList, container) : menuList;
+  };
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("li", {
+    className: useBEM({
+      block: menuClass,
+      element: subMenuClass,
+      className: className
+    }),
+    style: {
+      position: 'relative'
+    },
+    role: roleNone,
+    ref: containerRef,
+    onKeyDown: onKeyDownOfRoot,
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({
+      role: roleMenuitem,
+      "aria-haspopup": true,
+      "aria-expanded": isOpen
+    }, commonProps(isDisabled, isHovering), mergedItemProps, {
+      ref: useCombinedRef(externalItemRef, itemRef),
+      className: useBEM({
+        block: menuClass,
+        element: menuItemClass,
+        modifiers: modifiers,
+        className: itemClassName
+      }),
+      children: (0,external_react_.useMemo)(function () {
+        return safeCall(label, modifiers);
+      }, [label, modifiers])
+    })), state && getMenuList()]
+  });
+});
+ false ? 0 : void 0;
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useItemState.js
+
+
+
+
+var useItemState = function useItemState(itemRef, focusRef, isHovering, isDisabled) {
+  var _useContext = (0,external_react_.useContext)(SettingsContext),
+    submenuCloseDelay = _useContext.submenuCloseDelay;
+  var _useContext2 = (0,external_react_.useContext)(MenuListItemContext),
+    isParentOpen = _useContext2.isParentOpen,
+    submenuCtx = _useContext2.submenuCtx,
+    dispatch = _useContext2.dispatch,
+    updateItems = _useContext2.updateItems;
+  var setHover = function setHover() {
+    !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current);
+  };
+  var unsetHover = function unsetHover() {
+    !isDisabled && dispatch(HoverActionTypes.UNSET, itemRef.current);
+  };
+  var onBlur = function onBlur(e) {
+    if (isHovering && !e.currentTarget.contains(e.relatedTarget)) unsetHover();
+  };
+  var onPointerMove = function onPointerMove(e) {
+    if (!isDisabled) {
+      e.stopPropagation();
+      submenuCtx.on(submenuCloseDelay, setHover, setHover);
+    }
+  };
+  var onPointerLeave = function onPointerLeave(_, keepHover) {
+    submenuCtx.off();
+    !keepHover && unsetHover();
+  };
+  useItemEffect(isDisabled, itemRef, updateItems);
+  (0,external_react_.useEffect)(function () {
+    if (isHovering && isParentOpen) {
+      focusRef.current && focusRef.current.focus();
+    }
+  }, [focusRef, isHovering, isParentOpen]);
+  return {
+    setHover: setHover,
+    onBlur: onBlur,
+    onPointerMove: onPointerMove,
+    onPointerLeave: onPointerLeave
+  };
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/MenuItem.js
+
+
+
+
+
+
+
+
+
+
+
+
+var MenuItem_excluded = ["className", "value", "href", "type", "checked", "disabled", "children", "onClick", "isHovering", "itemRef", "externalRef"],
+  MenuItem_excluded2 = ["setHover"];
+var MenuItem = /*#__PURE__*/withHovering('MenuItem', function MenuItem(_ref) {
+  var className = _ref.className,
+    value = _ref.value,
+    href = _ref.href,
+    type = _ref.type,
+    checked = _ref.checked,
+    disabled = _ref.disabled,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    isHovering = _ref.isHovering,
+    itemRef = _ref.itemRef,
+    externalRef = _ref.externalRef,
+    restProps = _objectWithoutPropertiesLoose(_ref, MenuItem_excluded);
+  var isDisabled = !!disabled;
+  var _useItemState = useItemState(itemRef, itemRef, isHovering, isDisabled),
+    setHover = _useItemState.setHover,
+    restStateProps = _objectWithoutPropertiesLoose(_useItemState, MenuItem_excluded2);
+  var eventHandlers = (0,external_react_.useContext)(EventHandlersContext);
+  var radioGroup = (0,external_react_.useContext)(RadioGroupContext);
+  var isRadio = type === 'radio';
+  var isCheckBox = type === 'checkbox';
+  var isAnchor = !!href && !isDisabled && !isRadio && !isCheckBox;
+  var isChecked = isRadio ? radioGroup.value === value : isCheckBox ? !!checked : false;
+  var handleClick = function handleClick(e) {
+    if (isDisabled) {
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
+    var event = {
+      value: value,
+      syntheticEvent: e
+    };
+    if (e.key !== undefined) event.key = e.key;
+    if (isCheckBox) event.checked = !isChecked;
+    if (isRadio) event.name = radioGroup.name;
+    safeCall(onClick, event);
+    if (isRadio) safeCall(radioGroup.onRadioChange, event);
+    eventHandlers.handleClick(event, isCheckBox || isRadio);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (!isHovering) return;
+    switch (e.key) {
+      case Keys.ENTER:
+      case Keys.SPACE:
+        isAnchor ? e.key === Keys.SPACE && itemRef.current.click() : handleClick(e);
+    }
+  };
+  var modifiers = (0,external_react_.useMemo)(function () {
+    return {
+      type: type,
+      disabled: isDisabled,
+      hover: isHovering,
+      checked: isChecked,
+      anchor: isAnchor
+    };
+  }, [type, isDisabled, isHovering, isChecked, isAnchor]);
+  var mergedProps = mergeProps(_extends({}, restStateProps, {
+    onPointerDown: setHover,
+    onKeyDown: handleKeyDown,
+    onClick: handleClick
+  }), restProps);
+  var menuItemProps = _extends({
+    role: isRadio ? 'menuitemradio' : isCheckBox ? 'menuitemcheckbox' : roleMenuitem,
+    'aria-checked': isRadio || isCheckBox ? isChecked : undefined
+  }, commonProps(isDisabled, isHovering), mergedProps, {
+    ref: useCombinedRef(externalRef, itemRef),
+    className: useBEM({
+      block: menuClass,
+      element: menuItemClass,
+      modifiers: modifiers,
+      className: className
+    }),
+    children: (0,external_react_.useMemo)(function () {
+      return safeCall(children, modifiers);
+    }, [children, modifiers])
+  });
+  return isAnchor ? /*#__PURE__*/(0,jsx_runtime.jsx)("li", {
+    role: roleNone,
+    children: /*#__PURE__*/(0,jsx_runtime.jsx)("a", _extends({
+      href: href
+    }, menuItemProps))
+  }) : /*#__PURE__*/(0,jsx_runtime.jsx)("li", _extends({}, menuItemProps));
+});
+ false ? 0 : void 0;
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/FocusableItem.js
+
+
+
+
+
+
+
+
+
+
+
+
+var FocusableItem_excluded = ["className", "disabled", "children", "isHovering", "itemRef", "externalRef"],
+  FocusableItem_excluded2 = ["setHover", "onPointerLeave"];
+var FocusableItem = /*#__PURE__*/withHovering('FocusableItem', function FocusableItem(_ref) {
+  var className = _ref.className,
+    disabled = _ref.disabled,
+    children = _ref.children,
+    isHovering = _ref.isHovering,
+    itemRef = _ref.itemRef,
+    externalRef = _ref.externalRef,
+    restProps = _objectWithoutPropertiesLoose(_ref, FocusableItem_excluded);
+  var isDisabled = !!disabled;
+  var ref = (0,external_react_.useRef)(null);
+  var _useItemState = useItemState(itemRef, ref, isHovering, isDisabled),
+    setHover = _useItemState.setHover,
+    _onPointerLeave = _useItemState.onPointerLeave,
+    restStateProps = _objectWithoutPropertiesLoose(_useItemState, FocusableItem_excluded2);
+  var _useContext = (0,external_react_.useContext)(EventHandlersContext),
+    handleClose = _useContext.handleClose;
+  var modifiers = (0,external_react_.useMemo)(function () {
+    return {
+      disabled: isDisabled,
+      hover: isHovering,
+      focusable: true
+    };
+  }, [isDisabled, isHovering]);
+  var renderChildren = (0,external_react_.useMemo)(function () {
+    return safeCall(children, _extends({}, modifiers, {
+      ref: ref,
+      closeMenu: handleClose
+    }));
+  }, [children, modifiers, handleClose]);
+  var mergedProps = mergeProps(_extends({}, restStateProps, {
+    onPointerLeave: function onPointerLeave(e) {
+      return _onPointerLeave(e, true);
+    },
+    onFocus: setHover
+  }), restProps);
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("li", _extends({
+    role: roleMenuitem
+  }, commonProps(isDisabled), mergedProps, {
+    ref: useCombinedRef(externalRef, itemRef),
+    className: useBEM({
+      block: menuClass,
+      element: menuItemClass,
+      modifiers: modifiers,
+      className: className
+    }),
+    children: renderChildren
+  }));
+});
+ false ? 0 : void 0;
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/MenuDivider.js
+
+
+
+
+
+
+
+var MenuDivider_excluded = ["className"];
+var MenuDivider = /*#__PURE__*/(0,external_react_.memo)( /*#__PURE__*/(0,external_react_.forwardRef)(function MenuDivider(_ref, externalRef) {
+  var className = _ref.className,
+    restProps = _objectWithoutPropertiesLoose(_ref, MenuDivider_excluded);
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("li", _extends({
+    role: "separator"
+  }, restProps, {
+    ref: externalRef,
+    className: useBEM({
+      block: menuClass,
+      element: menuDividerClass,
+      className: className
+    })
+  }));
+}));
+ false ? 0 : void 0;
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/MenuHeader.js
+
+
+
+
+
+
+
+var MenuHeader_excluded = ["className"];
+var MenuHeader = /*#__PURE__*/(0,external_react_.memo)( /*#__PURE__*/(0,external_react_.forwardRef)(function MenuHeader(_ref, externalRef) {
+  var className = _ref.className,
+    restProps = _objectWithoutPropertiesLoose(_ref, MenuHeader_excluded);
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("li", _extends({
+    role: roleNone
+  }, restProps, {
+    ref: externalRef,
+    className: useBEM({
+      block: menuClass,
+      element: menuHeaderClass,
+      className: className
+    })
+  }));
+}));
+ false ? 0 : void 0;
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/MenuGroup.js
+
+
+
+
+
+
+
+
+
+
+var MenuGroup_excluded = ["className", "style", "takeOverflow"];
+var MenuGroup = /*#__PURE__*/(0,external_react_.forwardRef)(function MenuGroup(_ref, externalRef) {
+  var className = _ref.className,
+    style = _ref.style,
+    takeOverflow = _ref.takeOverflow,
+    restProps = _objectWithoutPropertiesLoose(_ref, MenuGroup_excluded);
+  var ref = (0,external_react_.useRef)(null);
+  var _useState = (0,external_react_.useState)(),
+    overflowStyle = _useState[0],
+    setOverflowStyle = _useState[1];
+  var _useContext = (0,external_react_.useContext)(MenuListContext),
+    overflow = _useContext.overflow,
+    overflowAmt = _useContext.overflowAmt;
+  useIsomorphicLayoutEffect(function () {
+    var maxHeight;
+    if (takeOverflow && overflowAmt >= 0) {
+      maxHeight = ref.current.getBoundingClientRect().height - overflowAmt;
+      if (maxHeight < 0) maxHeight = 0;
+    }
+    setOverflowStyle(maxHeight >= 0 ? {
+      maxHeight: maxHeight,
+      overflow: overflow
+    } : undefined);
+  }, [takeOverflow, overflow, overflowAmt]);
+  useIsomorphicLayoutEffect(function () {
+    if (overflowStyle) ref.current.scrollTop = 0;
+  }, [overflowStyle]);
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({}, restProps, {
+    ref: useCombinedRef(externalRef, ref),
+    className: useBEM({
+      block: menuClass,
+      element: menuGroupClass,
+      className: className
+    }),
+    style: _extends({}, style, overflowStyle)
+  }));
+});
+ false ? 0 : void 0;
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/components/MenuRadioGroup.js
+
+
+
+
+
+
+
+
+var MenuRadioGroup_excluded = ["aria-label", "className", "name", "value", "onRadioChange"];
+var MenuRadioGroup = /*#__PURE__*/(0,external_react_.forwardRef)(function MenuRadioGroup(_ref, externalRef) {
+  var ariaLabel = _ref['aria-label'],
+    className = _ref.className,
+    name = _ref.name,
+    value = _ref.value,
+    onRadioChange = _ref.onRadioChange,
+    restProps = _objectWithoutPropertiesLoose(_ref, MenuRadioGroup_excluded);
+  var contextValue = (0,external_react_.useMemo)(function () {
+    return {
+      name: name,
+      value: value,
+      onRadioChange: onRadioChange
+    };
+  }, [name, value, onRadioChange]);
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(RadioGroupContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0,jsx_runtime.jsx)("li", {
+      role: roleNone,
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)("ul", _extends({
+        role: "group",
+        "aria-label": ariaLabel || name || 'Radio group'
+      }, restProps, {
+        ref: externalRef,
+        className: useBEM({
+          block: menuClass,
+          element: radioGroupClass,
+          className: className
+        })
+      }))
+    })
+  });
+});
+ false ? 0 : void 0;
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useHover.js
+
+
+
+
+var useHover = function useHover(isOpen, onToggle, _temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    _ref$openDelay = _ref.openDelay,
+    openDelay = _ref$openDelay === void 0 ? 100 : _ref$openDelay,
+    _ref$closeDelay = _ref.closeDelay,
+    closeDelay = _ref$closeDelay === void 0 ? 300 : _ref$closeDelay;
+  var _useState = (0,external_react_.useState)({}),
+    config = _useState[0];
+  var clearTimer = function clearTimer() {
+    return clearTimeout(config.t);
+  };
+  var delayAction = function delayAction(toOpen) {
+    return function (e) {
+      clearTimer();
+      config.t = setTimeout(function () {
+        return onToggle(toOpen, e);
+      }, toOpen ? openDelay : closeDelay);
+    };
+  };
+  var props = {
+    onMouseEnter: delayAction(true),
+    onMouseLeave: delayAction(false)
+  };
+  return {
+    anchorProps: _extends({}, props, useClick(isOpen, onToggle)),
+    hoverProps: _extends({}, props, {
+      onMouseEnter: clearTimer
+    })
+  };
+};
+
+
+
+;// ./node_modules/@szhsin/react-menu/dist/es/index.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 /***/ }),
 
 /***/ 30416:
@@ -67541,8 +69973,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(98850);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
@@ -67566,7 +69998,7 @@ var DraggableTab = _ref => {
       panelIndex,
       fileIndex
     } = _ref,
-    otherProps = (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
+    otherProps = (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
   var openFiles = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.openedFiles);
   var openFilesCount = openFiles[panelIndex].length;
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
@@ -67583,7 +70015,7 @@ var DraggableTab = _ref => {
       switchToFileTab(panelIndex, (fileIndex + openFilesCount - 1) % openFilesCount);
     }
   };
-  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
     onClick: e => {
       e.stopPropagation();
       switchToFileTab(panelIndex, fileIndex);
@@ -67601,7 +70033,7 @@ var DraggableTab = _ref => {
         draggableProps,
         dragHandleProps
       } = _ref2;
-      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
         className: "draggable-tab",
         ref: innerRef
       }, draggableProps), dragHandleProps), {}, {
@@ -67623,8 +70055,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(98850);
 /* harmony import */ var react_tabs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39243);
@@ -67643,8 +70075,8 @@ var DroppableTabList = _ref => {
       children: _children,
       index
     } = _ref,
-    otherProps = (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
+    otherProps = (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__.Droppable, {
       direction: "horizontal",
       droppableId: index.toString(),
@@ -67654,7 +70086,7 @@ var DroppableTabList = _ref => {
           droppableProps,
           placeholder
         } = _ref2;
-        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
+        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
           className: "droppable-tab-list"
         }, droppableProps), {}, {
           ref: innerRef,
@@ -101293,7 +103725,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(89379);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(89379);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var highcharts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14783);
 /* harmony import */ var highcharts__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(highcharts__WEBPACK_IMPORTED_MODULE_1__);
@@ -101314,15 +103746,15 @@ var VisualOutputPane = _ref => {
   var showVisual = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((visual, output) => {
     switch (visual.origin) {
       case "pygal":
-        var chartContent = (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)({}, visual.content), {}, {
-          chart: (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)({}, visual.content.chart), {}, {
-            events: (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)({}, visual.content.chart.events), {}, {
+        var chartContent = (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)({}, visual.content), {}, {
+          chart: (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)({}, visual.content.chart), {}, {
+            events: (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)({}, visual.content.chart.events), {}, {
               load: function load() {
                 this.renderTo.style.overflow = "visible";
               }
             })
           }),
-          tooltip: (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)({}, visual.content.tooltip), {}, {
+          tooltip: (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)({}, visual.content.tooltip), {}, {
             formatter: visual.content.chart.type === "pie" ? function () {
               return this.key + ": " + this.y;
             } : null
@@ -101424,29 +103856,29 @@ var SidebarPanel = props => {
   });
   var panelContent = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment, {
     children: [heading && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
-      className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.panelHeader,
+      className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panelHeader,
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("h2", {
-        className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.panelHeading,
+        className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panelHeading,
         children: heading
       }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-        className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.panelButtons,
+        className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panelButtons,
         children: buttons
       })]
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-      className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.panelContent,
+      className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panelContent,
       children: children
     }), Footer && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-      className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.panelFooter,
+      className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panelFooter,
       children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Footer, {})
     })]
   });
   return isMobile ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
     "data-testid": "sidebar__panel",
-    className: classnames__WEBPACK_IMPORTED_MODULE_1___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.panel, className, Footer && _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.panelWithFooter),
+    className: classnames__WEBPACK_IMPORTED_MODULE_1___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panel, className, Footer && _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panelWithFooter),
     children: panelContent
   }) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_utils_ResizableWithHandle__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {
     "data-testid": "sidebar__panel",
-    className: classnames__WEBPACK_IMPORTED_MODULE_1___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.panel, className, Footer && _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.panelWithFooter),
+    className: classnames__WEBPACK_IMPORTED_MODULE_1___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panel, className, Footer && _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panelWithFooter),
     defaultWidth: defaultWidth,
     defaultHeight: "100%",
     handleDirection: "right",
@@ -138392,6 +140824,18 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ 29707:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","contextMenu":"styles-module__contextMenu--HNX6Z","contextItem":"styles-module__contextItem--9nzMH"});
+
+/***/ }),
+
 /***/ 68233:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -138419,8 +140863,9 @@ __webpack_require__.r(__webpack_exports__);
 /***/ 50239:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
+__webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","sidebar":"styles-module__sidebar--Fu5Qi","gwcLogo":"styles-module__gwcLogo--o2p4A","bar":"styles-module__bar--fOlLf","optionsTop":"styles-module__optionsTop--2jNbs","optionsBottom":"styles-module__optionsBottom--PtwF4","option":"styles-module__option--MOGCu","userOption":"styles-module__userOption--qGt5j","selected":"styles-module__selected--avjSK","panel":"styles-module__panel--bHhSv","panelWithFooter":"styles-module__panelWithFooter--5ItsY","panelHeading":"styles-module__panelHeading--GRNt0","panelHeader":"styles-module__panelHeader--bAHfN","panelContent":"styles-module__panelContent--X7kot","panelButtons":"styles-module__panelButtons---y4S-","panelFooter":"styles-module__panelFooter--T1y-s"});
@@ -363594,6 +366039,29 @@ const RunnerFactory = ({ projectType, outputPanels = ["text", "visual"], package
 exports["default"] = RunnerFactory;
 
 
+/***/ }),
+
+/***/ 39179:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+const react_menu_1 = __webpack_require__(97957);
+const styles_module_scss_1 = __importDefault(__webpack_require__(29707));
+const ContextMenu = (props) => {
+    const { align, direction, menuOptions, offsetX, offsetY, menuWidth, opened, anchorRef, onClose, skipOpen, } = props;
+    const portalTarget = document.getElementById("textjam-root") || document.body;
+    return ((0, jsx_runtime_1.jsx)(react_menu_1.ControlledMenu, { transition: true, align: align, direction: direction, menuStyle: { width: `${menuWidth}px` }, offsetX: offsetX, offsetY: offsetY, position: "anchor", viewScroll: "initial", portal: {
+            target: portalTarget,
+        }, menuClassName: styles_module_scss_1.default.contextMenu, menuItemFocus: { position: "first" }, state: opened ? "open" : "closed", anchorRef: anchorRef, skipOpen: skipOpen, onClose: onClose, children: menuOptions.map((option, i) => ((0, jsx_runtime_1.jsxs)(react_menu_1.MenuItem, { className: styles_module_scss_1.default.contextItem, onClick: option.action, children: [option.icon ? (0, jsx_runtime_1.jsx)(option.icon, {}) : null, option.text] }, i))) }));
+};
+exports["default"] = ContextMenu;
+
+
 /***/ }),
 
 /***/ 7802:
@@ -364227,6 +366695,204 @@ const FileTree = () => {
 exports.FileTree = FileTree;
 
 
+/***/ }),
+
+/***/ 20791:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+const react_1 = __webpack_require__(51649);
+const stores_1 = __webpack_require__(32132);
+const classnames_1 = __importDefault(__webpack_require__(46942));
+const FilePanel_1 = __importDefault(__webpack_require__(7802));
+const SidebarBar_1 = __importDefault(__webpack_require__(26624));
+const files_svg_1 = __importDefault(__webpack_require__(72020));
+const home_svg_1 = __importDefault(__webpack_require__(69046));
+const styles_module_scss_1 = __importDefault(__webpack_require__(50239));
+const getSidebarOptions = (initials) => [
+    {
+        name: "files",
+        icon: files_svg_1.default,
+        title: "Files",
+        position: "top",
+        panel: FilePanel_1.default,
+    },
+    //should be introduced in the later phases
+    // {
+    //   name: "activity",
+    //   icon: ActivityIcon,
+    //   title: "Activity",
+    //   position: "top",
+    // },
+    // {
+    //   name: "playground",
+    //   icon: PlaygroundIcon,
+    //   title: "Playground",
+    //   position: "top",
+    // },
+    {
+        name: "home",
+        icon: home_svg_1.default,
+        title: "Home",
+        position: "top",
+    },
+    //should be introduced in the later phases
+    // {
+    //   name: "fonts",
+    //   icon: FontIcon,
+    //   title: "Fonts",
+    //   position: "bottom",
+    //   panel: SettingsPanel,
+    // },
+    // {
+    //   name: "theme",
+    //   icon: ThemeIcon,
+    //   title: "Theme",
+    //   position: "bottom",
+    //   panel: SettingsPanel,
+    // },
+    {
+        name: "user",
+        buttonText: initials,
+        title: "User account",
+        position: "bottom",
+    },
+];
+const Sidebar = ({ options = [] }) => {
+    const initials = (0, stores_1.useAppSelector)((state) => state.user.initials);
+    const sideBarOptions = getSidebarOptions(initials);
+    let menuOptions = sideBarOptions.filter((option) => options.includes(option.name));
+    const [option, setOption] = (0, react_1.useState)(null);
+    const toggleOption = (newOption) => {
+        // when toggle the same option, close panel
+        if (option === newOption) {
+            setOption(null);
+        }
+        else {
+            setOption(newOption);
+        }
+    };
+    const activeOption = menuOptions.find((opt) => opt.name === option);
+    const CustomSidebarPanel = activeOption?.panel || (() => null);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.sidebar), children: [(0, jsx_runtime_1.jsx)(SidebarBar_1.default, { menuOptions: menuOptions, option: option, toggleOption: toggleOption }), option && (0, jsx_runtime_1.jsx)(CustomSidebarPanel, {})] }));
+};
+exports["default"] = Sidebar;
+
+
+/***/ }),
+
+/***/ 26624:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+const styles_module_scss_1 = __importDefault(__webpack_require__(50239));
+const SidebarBarOption_1 = __importDefault(__webpack_require__(19371));
+const SidebarBar = (props) => {
+    const { menuOptions, option, toggleOption } = props;
+    const topMenuOptions = menuOptions.filter((menuOption) => menuOption.position === "top");
+    const bottomMenuOptions = menuOptions.filter((menuOption) => menuOption.position === "bottom");
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bar, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.optionsTop, children: topMenuOptions.map((menuOption, i) => ((0, jsx_runtime_1.jsx)(SidebarBarOption_1.default, { Icon: menuOption.icon, title: menuOption.title, isActive: option === menuOption.name, toggleOption: toggleOption, name: menuOption.name }, i))) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.optionsBottom, children: bottomMenuOptions.map((menuOption, i) => ((0, jsx_runtime_1.jsx)(SidebarBarOption_1.default, { Icon: menuOption.icon, title: menuOption.title, isActive: option === menuOption.name, toggleOption: toggleOption, name: menuOption.name, buttonText: menuOption.buttonText, isUser: menuOption.name === "user" }, i))) })] }));
+};
+exports["default"] = SidebarBar;
+
+
+/***/ }),
+
+/***/ 19371:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+const react_1 = __webpack_require__(51649);
+const stores_1 = __webpack_require__(32132);
+const Button_1 = __importDefault(__webpack_require__(60232));
+const classnames_1 = __importDefault(__webpack_require__(46942));
+const styles_module_scss_1 = __importDefault(__webpack_require__(50239));
+const UserMenu_1 = __importDefault(__webpack_require__(2957));
+const backgroundColors = [
+    'D7F9F4', '43D6B9',
+    '0D9C90', 'E5F8FF',
+    'FEEFEE', 'F37C6F',
+    'FFF3E8', 'F9B88C',
+    'FA7815', 'FCE688'
+];
+const SidebarBarOption = (props) => {
+    const { Icon, isActive, name, title, toggleOption, buttonText, isUser } = props;
+    const userId = (0, stores_1.useAppSelector)((state) => state.user.userId);
+    const isFacilitator = (0, stores_1.useAppSelector)((state) => state.user.isFacilitator);
+    const avatarSrc = (0, stores_1.useAppSelector)((state) => state.user.avatarSrc);
+    const avatarStyle = isUser
+        ? isFacilitator
+            ? { background: 'linear-gradient(90deg,#d7f9f4,#fff9e2,#fff3e8,#e5f8ff,#d7f9f4)' }
+            : { backgroundColor: `#${backgroundColors[(userId ?? 0) % 10]}` }
+        : null;
+    const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
+    const buttonRef = (0, react_1.useRef)(null);
+    const skipOpenRef = (0, react_1.useRef)(false);
+    const openMenu = () => {
+        if (!skipOpenRef.current) {
+            setIsMenuOpen(true);
+        }
+        skipOpenRef.current = false;
+    };
+    const onClickHandler = () => {
+        isUser ? openMenu() : toggleOption(name);
+    };
+    const handleClose = () => {
+        skipOpenRef.current = true;
+        setIsMenuOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!avatarSrc && isUser ? ((0, jsx_runtime_1.jsx)("img", { ref: buttonRef, onClick: onClickHandler, className: (0, classnames_1.default)(styles_module_scss_1.default.option, styles_module_scss_1.default.userOption), src: avatarSrc, alt: "User profile avatar" })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { buttonRef: buttonRef, className: (0, classnames_1.default)(styles_module_scss_1.default.option, isActive && styles_module_scss_1.default.selected, isUser && styles_module_scss_1.default.userOption), style: avatarStyle, ButtonIcon: Icon, title: title, buttonText: buttonText, onClickHandler: onClickHandler, ...(isUser && {
+                    label: `Profile image placeholder displaying the user’s initials`,
+                }) })), isUser && ((0, jsx_runtime_1.jsx)(UserMenu_1.default, { anchorRef: buttonRef, opened: isMenuOpen, onClose: handleClose, skipOpen: skipOpenRef }))] }));
+};
+exports["default"] = SidebarBarOption;
+
+
+/***/ }),
+
+/***/ 2957:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+const ContextMenu_1 = __importDefault(__webpack_require__(39179));
+const AuthContext_1 = __webpack_require__(55471);
+const UserMenu = (props) => {
+    const { anchorRef, opened, onClose, skipOpen } = props;
+    const { onLogout, onViewProfile } = (0, AuthContext_1.useAuthActions)();
+    return ((0, jsx_runtime_1.jsx)(ContextMenu_1.default, { align: "start", direction: "top", menuWidth: 142, menuOptions: [
+            {
+                text: "View Profile",
+                action: onViewProfile,
+            },
+            {
+                text: "Logout",
+                action: onLogout,
+            },
+        ], offsetX: 0, offsetY: 4, opened: opened, anchorRef: anchorRef, onClose: onClose, skipOpen: skipOpen }));
+};
+exports["default"] = UserMenu;
+
+
 /***/ }),
 
 /***/ 82803:
@@ -364314,6 +366980,31 @@ const SvgIcon = ({ size, SvgElement, ...rest }) => {
 exports.SvgIcon = SvgIcon;
 
 
+/***/ }),
+
+/***/ 55471:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.useAuthActions = exports.AuthProvider = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const react_1 = __webpack_require__(51649);
+const AuthContext = (0, react_1.createContext)(undefined);
+const AuthProvider = ({ children, onLogout, onViewProfile, }) => {
+    return ((0, jsx_runtime_1.jsx)(AuthContext.Provider, { value: { onLogout, onViewProfile }, children: children }));
+};
+exports.AuthProvider = AuthProvider;
+const useAuthActions = () => {
+    const context = (0, react_1.useContext)(AuthContext);
+    if (!context) {
+        throw new Error('useAuthActions must be used within AuthProvider');
+    }
+    return context;
+};
+exports.useAuthActions = useAuthActions;
+
+
 /***/ }),
 
 /***/ 54095:
@@ -364709,6 +367400,7 @@ exports.userInitialState = {
     userId: null,
     initials: "",
     isFacilitator: null,
+    avatarSrc: null,
 };
 exports.UserSlice = (0, toolkit_1.createSlice)({
     name: "user",
@@ -364718,6 +367410,7 @@ exports.UserSlice = (0, toolkit_1.createSlice)({
             state.userId = action.payload.userId;
             state.initials = action.payload.initials;
             state.isFacilitator = action.payload.isFacilitator;
+            state.avatarSrc = action.payload.avatarSrc;
         },
     },
 });
@@ -385149,219 +387842,9 @@ var ProjectBar = _ref => {
   });
 };
 /* harmony default export */ const ProjectBar_ProjectBar = (ProjectBar);
-// EXTERNAL MODULE: ./src/components/Menus/Sidebar/FilePanel/FilePanel.tsx
-var FilePanel = __webpack_require__(7802);
-var FilePanel_default = /*#__PURE__*/__webpack_require__.n(FilePanel);
-// EXTERNAL MODULE: ./src/components/Menus/Sidebar/styles.module.scss
-var Sidebar_styles_module = __webpack_require__(50239);
-;// ./src/components/Menus/Sidebar/SidebarBarOption.jsx
-
-
-
-
-
-
-var backgroundColors = ['D7F9F4', '43D6B9', '0D9C90', 'E5F8FF', 'FEEFEE', 'F37C6F', 'FFF3E8', 'F9B88C', 'FA7815', 'FCE688'];
-var SidebarBarOption = props => {
-  var {
-    Icon,
-    isActive,
-    name,
-    title,
-    toggleOption,
-    buttonText,
-    isUser
-  } = props;
-  var userId = (0,external_react_redux_.useSelector)(state => state.user.userId);
-  var isFacilitator = (0,external_react_redux_.useSelector)(state => state.user.isFacilitator);
-  var avatarStyle = isUser ? isFacilitator ? {
-    background: 'linear-gradient(90deg,#d7f9f4,#fff9e2,#fff3e8,#e5f8ff,#d7f9f4)'
-  } : {
-    backgroundColor: "#".concat(backgroundColors[userId % 10])
-  } : null;
-  var onClickHandler = () => {
-    toggleOption(name);
-  };
-  return /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], {
-    className: classnames_default()(Sidebar_styles_module/* default */.A.option, {
-      [Sidebar_styles_module/* default */.A.selected]: isActive,
-      [Sidebar_styles_module/* default */.A.userOption]: isUser
-    }),
-    style: avatarStyle,
-    ButtonIcon: Icon,
-    title: title,
-    buttonText: buttonText,
-    onClickHandler: onClickHandler
-  });
-};
-/* harmony default export */ const Sidebar_SidebarBarOption = (SidebarBarOption);
-;// ./src/components/Menus/Sidebar/SidebarBar.jsx
-
-
-
-
-var SidebarBar = props => {
-  var {
-    menuOptions,
-    option,
-    toggleOption
-  } = props;
-  var topMenuOptions = menuOptions.filter(menuOption => menuOption.position === "top");
-  var bottomMenuOptions = menuOptions.filter(menuOption => menuOption.position === "bottom");
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: Sidebar_styles_module/* default */.A.bar,
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: Sidebar_styles_module/* default */.A.optionsTop,
-      children: topMenuOptions.map((menuOption, i) => /*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_SidebarBarOption, {
-        Icon: menuOption.icon,
-        title: menuOption.title,
-        isActive: option === menuOption.name,
-        toggleOption: toggleOption,
-        name: menuOption.name
-      }, i))
-    }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: Sidebar_styles_module/* default */.A.optionsBottom,
-      children: bottomMenuOptions.map((menuOption, i) => /*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_SidebarBarOption, {
-        Icon: menuOption.icon,
-        title: menuOption.title,
-        isActive: option === menuOption.name,
-        toggleOption: toggleOption,
-        name: menuOption.name,
-        buttonText: menuOption.buttonText,
-        isUser: menuOption.name === "user"
-      }, i))
-    })]
-  });
-};
-/* harmony default export */ const Sidebar_SidebarBar = (SidebarBar);
-;// ./src/assets/icons/files.svg
-var files_path;
-function files_extends() { return files_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, files_extends.apply(null, arguments); }
-
-function SvgFiles(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", files_extends({
-    width: 22,
-    height: 20,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), files_path || (files_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M10.75 8.75v6m-3-3h6m7 5a2 2 0 01-2 2h-16a2 2 0 01-2-2v-14a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z",
-    stroke: "#33625E",
-    strokeWidth: 1.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })));
-}
-/* harmony default export */ const files = (SvgFiles);
-;// ./src/assets/icons/home.svg
-var home_path;
-function home_extends() { return home_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, home_extends.apply(null, arguments); }
-
-function SvgHome(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", home_extends({
-    width: 20,
-    height: 22,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), home_path || (home_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M6.75 20.75v-10h6v10m-12-13l9-7 9 7v11a2 2 0 01-2 2h-14a2 2 0 01-2-2v-11z",
-    stroke: "#33625E",
-    strokeWidth: 1.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })));
-}
-/* harmony default export */ const home = (SvgHome);
-;// ./src/components/Menus/Sidebar/Sidebar.jsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var getSidebarOptions = initials => [{
-  name: "files",
-  icon: files,
-  title: "Files",
-  position: "top",
-  panel: (FilePanel_default())
-},
-//should be introduced in the later phases
-// {
-//   name: "activity",
-//   icon: ActivityIcon,
-//   title: "Activity",
-//   position: "top",
-// },
-// {
-//   name: "playground",
-//   icon: PlaygroundIcon,
-//   title: "Playground",
-//   position: "top",
-// },
-{
-  name: "home",
-  icon: home,
-  title: "Home",
-  position: "top"
-},
-//should be introduced in the later phases
-// {
-//   name: "fonts",
-//   icon: FontIcon,
-//   title: "Fonts",
-//   position: "bottom",
-//   panel: SettingsPanel,
-// },
-// {
-//   name: "theme",
-//   icon: ThemeIcon,
-//   title: "Theme",
-//   position: "bottom",
-//   panel: SettingsPanel,
-// },
-{
-  name: "user",
-  buttonText: initials,
-  title: "User account",
-  position: "bottom"
-}];
-var Sidebar = _ref => {
-  var {
-    options = []
-  } = _ref;
-  var initials = (0,external_react_redux_.useSelector)(state => state.user.initials);
-  var sideBarOptions = getSidebarOptions(initials);
-  var menuOptions = sideBarOptions.filter(option => options.includes(option.name));
-  var [option, setOption] = (0,external_react_.useState)(null);
-  var toggleOption = newOption => {
-    // when toggle the same option, close panel
-    if (option === newOption) {
-      setOption(null);
-    } else {
-      setOption(newOption);
-    }
-  };
-  var activeOption = menuOptions.find(opt => opt.name === option);
-  var CustomSidebarPanel = (activeOption === null || activeOption === void 0 ? void 0 : activeOption.panel) || (() => null);
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: classnames_default()(Sidebar_styles_module/* default */.A.sidebar),
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_SidebarBar, {
-      menuOptions: menuOptions,
-      option: option,
-      toggleOption: toggleOption
-    }), option && /*#__PURE__*/(0,jsx_runtime.jsx)(CustomSidebarPanel, {})]
-  });
-};
-/* harmony default export */ const Sidebar_Sidebar = (Sidebar);
+// EXTERNAL MODULE: ./src/components/Menus/Sidebar/Sidebar.tsx
+var Sidebar = __webpack_require__(20791);
+var Sidebar_default = /*#__PURE__*/__webpack_require__.n(Sidebar);
 // EXTERNAL MODULE: ./src/components/Editor/EditorInput/EditorInput.tsx
 var EditorInput = __webpack_require__(99692);
 var EditorInput_default = /*#__PURE__*/__webpack_require__.n(EditorInput);
@@ -385431,7 +387914,7 @@ var Project = props => {
       nameEditable: nameEditable
     }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: Project_styles_module.projContainer,
-      children: [/*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_Sidebar, {
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)((Sidebar_default()), {
         options: sidebarOptions
       }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: Project_styles_module.projectWrapper,
@@ -386610,7 +389093,8 @@ var WebComponentLoader = props => {
       dispatch((0,UserSlice.setUserData)({
         userId: user.userId,
         initials: user.initials,
-        isFacilitator: user.isFacilitator
+        isFacilitator: user.isFacilitator,
+        avatarSrc: user.avatarSrc
       }));
     }
   }, [user, dispatch]);
@@ -386709,10 +389193,13 @@ var stores = __webpack_require__(32132);
 var stores_default = /*#__PURE__*/__webpack_require__.n(stores);
 // EXTERNAL MODULE: ./node_modules/react-router-dom/dist/index.js + 2 modules
 var dist = __webpack_require__(92648);
+// EXTERNAL MODULE: ./src/context/AuthContext.tsx
+var AuthContext = __webpack_require__(55471);
 ;// ./src/App.jsx
 
 
-var App_excluded = ["queryString"];
+var App_excluded = ["queryString", "onLogoutClick", "onViewProfileClick"];
+
 
 
 
@@ -386723,7 +389210,9 @@ var App_excluded = ["queryString"];
 var TextJamEditor = function TextJamEditor() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     {
-      queryString
+      queryString,
+      onLogoutClick = () => {},
+      onViewProfileClick = () => {}
     } = _ref,
     componentProps = (0,objectWithoutProperties/* default */.A)(_ref, App_excluded);
   // Default props that match the previous web-component defaults
@@ -386743,7 +389232,11 @@ var TextJamEditor = function TextJamEditor() {
         children: /*#__PURE__*/(0,jsx_runtime.jsx)(external_react_redux_.Provider, {
           store: (stores_default()),
           children: /*#__PURE__*/(0,jsx_runtime.jsx)(dist/* BrowserRouter */.Kd, {
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(containers_WebComponentLoader, (0,objectSpread2/* default */.A)({}, mergedProps))
+            children: /*#__PURE__*/(0,jsx_runtime.jsx)(AuthContext.AuthProvider, {
+              onLogout: onLogoutClick,
+              onViewProfile: onViewProfileClick,
+              children: /*#__PURE__*/(0,jsx_runtime.jsx)(containers_WebComponentLoader, (0,objectSpread2/* default */.A)({}, mergedProps))
+            })
           })
         })
       })