@saleor/macaw-ui 0.2.4

package/dist/macaw-ui.esm.js

@@ -0,0 +1,2536 @@
+import { makeStyles as makeStyles$1, useTheme as useTheme$1, fade, darken, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import { merge, throttle } from 'lodash-es';
+import React, { useEffect, useState, useCallback, useContext, createContext } from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { createSvgIcon } from '@material-ui/core/utils';
+import Button from '@material-ui/core/Button';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Container from '@material-ui/core/Container';
+import Portal from '@material-ui/core/Portal';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import CheckIcon from '@material-ui/icons/Check';
+import clsx from 'clsx';
+import Tooltip$1 from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import Skeleton from '@material-ui/lab/Skeleton';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import SVG from 'react-inlinesvg';
+import Drawer from '@material-ui/core/Drawer';
+import ArrowLeftIcon from '@material-ui/icons/ArrowLeft';
+import MenuIcon from '@material-ui/icons/Menu';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import SnackbarContent from '@material-ui/core/SnackbarContent';
+import Avatar from '@material-ui/core/Avatar';
+import Chip from '@material-ui/core/Chip';
+import Grow from '@material-ui/core/Grow';
+import Hidden from '@material-ui/core/Hidden';
+import Menu from '@material-ui/core/MenuList';
+import MenuItem$1 from '@material-ui/core/MenuItem';
+import Table from '@material-ui/core/Table';
+import { Tooltip as Tooltip$2 } from '@material-ui/core';
+
+function _extends() {
+  _extends = Object.assign || 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;
+}
+
+var ActionBarContext = /*#__PURE__*/React.createContext(undefined);
+ActionBarContext.displayName = "ActionBarContext";
+var useActionBar = function useActionBar() {
+  var ctx = React.useContext(ActionBarContext);
+
+  if (ctx === undefined) {
+    throw new Error("useActionBar must be used within a ActionBarContext");
+  }
+
+  return ctx;
+};
+var ActionBarProvider = function ActionBarProvider(_ref) {
+  var children = _ref.children;
+
+  var _React$useState = React.useState(true),
+      docked = _React$useState[0],
+      setDocked = _React$useState[1];
+
+  var anchor = React.useRef(null);
+  return React.createElement(ActionBarContext.Provider, {
+    value: {
+      anchor: anchor,
+      docked: docked,
+      setDocked: setDocked
+    }
+  }, children);
+};
+
+var BacklinkContext = /*#__PURE__*/React.createContext(undefined);
+BacklinkContext.displayName = "BacklinkContext";
+var useBacklink = function useBacklink() {
+  var ctx = React.useContext(BacklinkContext);
+
+  if (ctx === undefined) {
+    throw new Error("useBacklink must be used within a BacklinkContext");
+  }
+
+  return ctx;
+};
+var BacklinkProvider = function BacklinkProvider(_ref) {
+  var children = _ref.children;
+  var anchor = React.useRef(null);
+  return React.createElement(BacklinkContext.Provider, {
+    value: anchor
+  }, children);
+};
+
+function sendMessageToDashboard(message, targetOrigin) {
+  if (!!window.parent) {
+    window.parent.postMessage(message, targetOrigin);
+  }
+}
+function sendMessageToExtension(message, targetOrigin) {
+  var appFrame = document.querySelector("#extension-app");
+
+  if (!!(appFrame != null && appFrame.contentWindow)) {
+    appFrame.contentWindow.postMessage(message, targetOrigin);
+  }
+}
+
+var ExtensionMessageType;
+
+(function (ExtensionMessageType) {
+  ExtensionMessageType[ExtensionMessageType["BREADCRUMB_CLICK"] = 0] = "BREADCRUMB_CLICK";
+  ExtensionMessageType[ExtensionMessageType["BREADCRUMB_SET"] = 1] = "BREADCRUMB_SET";
+  ExtensionMessageType[ExtensionMessageType["THEME"] = 2] = "THEME";
+})(ExtensionMessageType || (ExtensionMessageType = {}));
+
+function useExtensionMessage(handle) {
+  useEffect(function () {
+    window.addEventListener("message", handle);
+    return function () {
+      return window.removeEventListener("message", handle);
+    };
+  }, [handle]);
+}
+
+var localStorageKeys = {
+  theme: "macaw-ui-theme",
+  menuShrink: "macaw-ui-menu-shrink"
+};
+
+// Copied directly from
+function useLocalStorage(key, initialValue) {
+  if (initialValue === void 0) {
+    initialValue = "";
+  }
+
+  var _useState = useState(function () {
+    return window.localStorage.getItem(key) || initialValue;
+  }),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var setItem = function setItem(newValue) {
+    setValue(newValue);
+    window.localStorage.setItem(key, newValue);
+  }; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  useEffect(function () {
+    var newValue = window.localStorage.getItem(key);
+
+    if (value !== newValue) {
+      setValue(newValue || initialValue);
+    }
+  });
+  var handleStorage = useCallback(function (event) {
+    if (event.key === key && event.newValue !== value) {
+      setValue(event.newValue || initialValue);
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [value, key]);
+  useEffect(function () {
+    window.addEventListener("storage", handleStorage);
+    return function () {
+      return window.removeEventListener("storage", handleStorage);
+    };
+  }, [handleStorage]);
+  return {
+    value: value,
+    setValue: setItem
+  };
+}
+
+var ThemeContext = /*#__PURE__*/React.createContext(undefined);
+ThemeContext.displayName = "ThemeContext";
+
+function makeStyles(styles, options) {
+  return makeStyles$1(styles, options);
+}
+function useTheme() {
+  var saleorTheme = useTheme$1();
+  var themeInfo = useContext(ThemeContext);
+
+  if (themeInfo === undefined || saleorTheme === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+
+  return _extends({}, saleorTheme, themeInfo);
+}
+
+var useStyles = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    "@global": {
+      "@import": "url('https://rsms.me/inter/inter.css')",
+      // For some reason @import clause must be put on top
+      // eslint-disable-next-line sort-keys
+      "::selection": {
+        background: fade(theme.palette.primary.main, 0.2)
+      },
+      html: {
+        fontSize: "62.5%"
+      }
+    }
+  };
+}, {
+  name: "Baseline"
+});
+var Baseline = function Baseline() {
+  useStyles();
+  return React.createElement(CssBaseline, null);
+};
+Baseline.displayName = "Baseline";
+
+var buttonOverrides = function buttonOverrides(colors) {
+  return {
+    MuiButton: {
+      contained: {
+        "&$disabled": {
+          backgroundColor: fade(colors.primary, 0.12),
+          color: "#FFFFFF"
+        },
+        "&:active": {
+          boxShadow: "none"
+        },
+        "&:hover": {
+          boxShadow: "none"
+        },
+        boxShadow: "none"
+      },
+      containedPrimary: {
+        "&:active": {
+          backgroundColor: darken(colors.primary, 0.4)
+        },
+        "&:hover": {
+          backgroundColor: darken(colors.primary, 0.1)
+        }
+      },
+      label: {
+        fontWeight: 600
+      },
+      root: {
+        "& svg": {
+          marginLeft: 8
+        },
+        borderRadius: 4
+      },
+      textPrimary: {
+        "&:not($disabled) span": {
+          color: colors.primary
+        }
+      },
+      textSizeSmall: {
+        fontSize: "1.3rem"
+      }
+    },
+    MuiIconButton: {
+      root: {
+        "&:hover": {
+          backgroundColor: fade(colors.primary, 0.12)
+        }
+      }
+    },
+    MuiSwitch: {
+      colorPrimary: {
+        "&$checked": {
+          color: colors.background.paper
+        }
+      },
+      root: {
+        "&$disabled": {
+          "&$switchBase": {
+            "& + $thumb": {
+              backgroundColor: colors.gray.disabled
+            }
+          }
+        },
+        height: 48,
+        width: 72
+      },
+      switchBase: {
+        "&$checked": {
+          transform: "translateX(23px)"
+        },
+        boxShadow: "none",
+        left: 1,
+        marginLeft: 4,
+        top: 5
+      },
+      thumb: {
+        boxShadow: "none"
+      },
+      track: {
+        "$colorPrimary$checked + &": {
+          backgroundColor: colors.primary
+        },
+        backgroundColor: colors.gray["default"],
+        borderRadius: 12,
+        height: 24,
+        opacity: [["1"], "!important"],
+        width: 48
+      }
+    }
+  };
+};
+
+var inputOverrides = function inputOverrides(colors) {
+  return {
+    MuiInput: {
+      input: {
+        "&:-webkit-autofill": {
+          WebkitTextFillColor: colors.font["default"],
+          boxShadow: "inset 0 0 0px 9999px " + colors.autofill
+        },
+        "&::placeholder": {
+          opacity: "1 !important"
+        },
+        color: colors.font["default"]
+      },
+      underline: {
+        "&:after": {
+          borderBottomColor: colors.primary
+        }
+      }
+    },
+    MuiInputBase: {
+      input: {
+        "&$disabled": {
+          color: colors.input.disabledText
+        },
+        "&::placeholder": {
+          color: colors.font.gray,
+          opacity: "1 !important"
+        }
+      }
+    },
+    MuiInputLabel: {
+      formControl: {
+        transform: "translate(0, 1.5px) scale(0.75)",
+        transformOrigin: "top left",
+        width: "100%"
+      },
+      outlined: {
+        "&$shrink": {
+          transform: "translate(12px, 9px) scale(0.75)"
+        },
+        transform: "translate(14px, 18px) scale(1)"
+      },
+      root: {
+        "&$disabled": {
+          color: fade(colors.primary, 0.4) + " !important"
+        },
+        "&$error": {
+          "&$focused": {
+            color: colors.error
+          },
+          color: colors.error
+        },
+        "&&$focused": {
+          "&:not($error)": {
+            color: colors.primary
+          }
+        },
+        color: fade(colors.input.text, 0.6)
+      },
+      shrink: {
+        // Negates x0.75 scale
+        width: "133%"
+      }
+    },
+    MuiOutlinedInput: {
+      input: {
+        "&:-webkit-autofill": {
+          borderRadius: 4,
+          boxShadow: "0 0 0px 1000px rgba(19, 190, 187, 0.1) inset"
+        },
+        color: colors.input.text,
+        padding: "23px 12px 10px 12px"
+      },
+      inputMultiline: {
+        left: -2,
+        padding: "10px 0",
+        position: "relative"
+      },
+      root: {
+        "& fieldset": {
+          "&&:not($error)": {
+            borderColor: colors.input.border
+          },
+          top: 0
+        },
+        "& legend": {
+          display: "none"
+        },
+        "&$disabled": {
+          "& fieldset": {
+            borderColor: [[colors.input.disabled], "!important"]
+          },
+          "& input": {
+            backgroundColor: colors.input.disabledBackground,
+            color: colors.input.disabledText
+          }
+        },
+        "&$error": {
+          "&$focused": {
+            "& fieldset": {
+              borderColor: colors.error
+            },
+            "& input": {
+              color: colors.error
+            }
+          },
+          "&:hover": {
+            "& fieldset": {
+              borderColor: colors.error
+            },
+            "& input": {
+              color: colors.error
+            }
+          }
+        },
+        "&$focused": {
+          "& input": {
+            "& fieldset": {
+              borderColor: colors.primary
+            },
+            "&::placeholder": {
+              opacity: [[1], "!important"]
+            },
+            color: colors.font["default"]
+          }
+        },
+        "&:hover": {
+          "& input": {
+            color: colors.font["default"]
+          },
+          "&&&": {
+            "& fieldset": {
+              borderColor: colors.primary
+            },
+            "&$error fieldset": {
+              borderColor: colors.input.error
+            }
+          }
+        },
+        backgroundColor: colors.background.paper,
+        borderColor: colors.input.border,
+        top: 0
+      }
+    }
+  };
+};
+
+var tableOverrides = function tableOverrides(colors, fontFamily) {
+  return {
+    MuiTable: {
+      root: {
+        fontFamily: fontFamily,
+        fontFeatureSettings: '"tnum"'
+      }
+    },
+    MuiTableCell: {
+      body: {
+        fontSize: "1.6rem"
+      },
+      head: {
+        fontSize: "1.4rem",
+        fontWeight: 400,
+        color: colors.font.textDisabled
+      },
+      paddingCheckbox: {
+        "&:first-child": {
+          padding: "0 12px",
+          width: 72
+        },
+        "&:not(first-child)": {
+          padding: 0,
+          width: 52
+        }
+      },
+      root: {
+        "&:first-child": {
+          "&:not($paddingCheckbox)": {
+            paddingLeft: 24 + "px",
+            textAlign: "left"
+          }
+        },
+        borderBottomColor: colors.paperBorder,
+        padding: "16px 24px"
+      }
+    },
+    MuiTablePagination: {
+      input: {
+        color: colors.primary,
+        fontSize: "1.4rem"
+      }
+    },
+    MuiTableRow: {
+      footer: {
+        "$root$hover&:hover": {
+          background: "none"
+        }
+      },
+      head: {
+        "$root$hover&:hover": {
+          background: "none"
+        }
+      },
+      hover: {
+        "$root&:hover": {
+          backgroundColor: fade(colors.primary, 0.3)
+        }
+      },
+      root: {
+        "&$selected": {
+          backgroundColor: fade(colors.primary, 0.05)
+        }
+      }
+    }
+  };
+};
+
+var overrides = function overrides(colors, fontFamily) {
+  return _extends({}, inputOverrides(colors), tableOverrides(colors, fontFamily), buttonOverrides(colors));
+};
+
+var createPalette = function createPalette(colors) {
+  return {
+    action: {
+      active: colors.checkbox["default"]
+    },
+    alert: colors.alert,
+    background: colors.background,
+    divider: colors.divider,
+    error: {
+      main: colors.error
+    },
+    primary: {
+      contrastText: "#ffffff",
+      dark: colors.font.textDisabled,
+      main: colors.primary
+    },
+    secondary: {
+      contrastText: "#ffffff",
+      main: colors.secondary
+    },
+    success: {
+      main: colors.success
+    },
+    text: {
+      disabled: colors.font.gray,
+      hint: colors.font.gray,
+      primary: colors.font["default"],
+      secondary: colors.font.gray
+    },
+    textHighlighted: {
+      active: colors.primary,
+      inactive: colors.highlightInactive["default"]
+    },
+    type: colors.theme
+  };
+};
+
+var createShadow = function createShadow(pv, pb, ps, uv, ub, us, av, ab, as) {
+  return ["0 " + pv + "px " + pb + "px " + ps + "px rgba(0, 0, 0, 0.2)", "0 " + uv + "px " + ub + "px " + us + "px rgba(0, 0, 0, 0.14)", "0 " + av + "px " + ab + "px " + as + "px rgba(0, 0, 0, 0.12)"].join(",");
+};
+
+var shadows = ["none", /*#__PURE__*/createShadow(1, 1, 0, 2, 1, -2, 1, 3, 0), /*#__PURE__*/createShadow(2, 2, 0, 3, 1, -2, 1, 5, 0), /*#__PURE__*/createShadow(3, 4, 0, 3, 3, -2, 1, 8, 0), /*#__PURE__*/createShadow(4, 5, 0, 1, 10, 0, 2, 4, -1), /*#__PURE__*/createShadow(5, 8, 0, 1, 14, 0, 3, 4, -1), /*#__PURE__*/createShadow(6, 10, 0, 1, 18, 0, 3, 5, -1), /*#__PURE__*/createShadow(7, 10, 0, 2, 16, 1, 4, 5, -2), /*#__PURE__*/createShadow(8, 10, 1, 3, 14, 2, 5, 5, -3), /*#__PURE__*/createShadow(9, 12, 1, 3, 16, 3, 5, 6, -4), /*#__PURE__*/createShadow(10, 14, 1, 4, 18, 3, 6, 7, -4), /*#__PURE__*/createShadow(11, 16, 1, 4, 20, 3, 6, 7, -4), /*#__PURE__*/createShadow(12, 17, 1, 5, 22, 4, 7, 8, -4), /*#__PURE__*/createShadow(13, 19, 1, 5, 24, 4, 7, 8, -4), /*#__PURE__*/createShadow(14, 21, 1, 5, 26, 4, 7, 9, -5), /*#__PURE__*/createShadow(15, 22, 1, 5, 28, 4, 7, 9, -5), /*#__PURE__*/createShadow(16, 24, 2, 6, 30, 5, 8, 10, -5), /*#__PURE__*/createShadow(15, 27, 3, 7, 28, 3, 10, 14, -4), /*#__PURE__*/createShadow(14, 30, 4, 8, 26, 1, 12, 17, -3), /*#__PURE__*/createShadow(13, 33, 4, 8, 24, -1, 14, 20, -1), /*#__PURE__*/createShadow(12, 36, 5, 9, 22, -2, 16, 24, 1), /*#__PURE__*/createShadow(11, 39, 6, 10, 20, -4, 18, 28, 1), /*#__PURE__*/createShadow(10, 41, 7, 10, 18, -5, 20, 31, 2), /*#__PURE__*/createShadow(9, 44, 7, 11, 16, -6, 22, 35, 2), /*#__PURE__*/createShadow(9, 46, 8, 11, 15, -7, 24, 38, 3)];
+
+var ICONBUTTON_SIZE = 48;
+var fontFamily = '"Inter", "roboto", "sans-serif"';
+var createTheme = function createTheme(colors) {
+  return createMuiTheme({
+    overrides: _extends({}, overrides(colors, fontFamily), {
+      MuiCard: {
+        root: {
+          borderColor: colors.paperBorder,
+          borderRadius: 8,
+          borderStyle: "solid",
+          borderWidth: 1,
+          overflow: "visible"
+        }
+      },
+      MuiCardActions: {
+        root: {
+          flexDirection: "row-reverse"
+        }
+      },
+      MuiCardContent: {
+        root: {
+          padding: "2.4rem"
+        }
+      },
+      MuiCardHeader: {
+        action: {
+          position: "relative",
+          top: 4
+        },
+        root: {
+          padding: "1.6rem 2.4rem"
+        }
+      },
+      MuiChip: {
+        avatar: {
+          fontSize: "1.2rem",
+          height: 32,
+          left: -5,
+          position: "relative",
+          width: 32
+        },
+        root: {
+          "& $avatar": {
+            fontSize: "1.2rem"
+          },
+          fontSize: "1.3rem"
+        }
+      },
+      MuiDialogActions: {
+        root: {
+          borderTop: "1px solid " + colors.divider,
+          padding: "16px 24px"
+        }
+      },
+      MuiDialogContent: {
+        root: {
+          padding: "24px 0px",
+          margin: "0px 24px"
+        }
+      },
+      MuiDialogContentText: {
+        root: {
+          "&:last-child": {
+            marginBottom: 0
+          }
+        }
+      },
+      MuiDialogTitle: {
+        root: {
+          borderBottom: "1px solid " + colors.divider
+        }
+      },
+      MuiFormControlLabel: {
+        label: {
+          lineHeight: 1.2,
+          marginLeft: 4
+        }
+      },
+      MuiFormLabel: {
+        filled: {
+          "&&:not($error)": {
+            color: colors.primary
+          }
+        },
+        root: {
+          "&&$focused:not($error)": {
+            color: colors.font.gray
+          }
+        }
+      },
+      MuiSvgIcon: {
+        root: {
+          fontSize: "2.4rem",
+          height: "1em",
+          width: "1em"
+        }
+      },
+      MuiList: {
+        root: {
+          display: "grid",
+          gridRowGap: 8 + "px",
+          padding: "8px !important"
+        }
+      },
+      MuiListItem: {
+        button: {
+          "&:focus": {
+            backgroundColor: colors.input["default"]
+          }
+        },
+        root: {
+          "&$selected": {
+            "&:hover": {
+              backgroundColor: colors.input["default"]
+            },
+            backgroundColor: colors.input["default"]
+          }
+        }
+      },
+      MuiMenu: {
+        paper: {
+          borderRadius: 8
+        }
+      },
+      MuiMenuItem: {
+        root: {
+          "&$selected, &$selected:focus, &$selected:hover": {
+            backgroundColor: [colors.background["default"], "!important"],
+            color: colors.primary,
+            fontWeight: 700
+          },
+          "&:hover": {
+            backgroundColor: [colors.background["default"], "!important"],
+            color: colors.font["default"],
+            fontWeight: 400
+          },
+          borderRadius: 4
+        }
+      },
+      MuiSelect: {
+        root: {
+          "&$disabled": {
+            backgroundColor: colors.input.disabledBackground
+          }
+        }
+      },
+      MuiSnackbarContent: {
+        action: {
+          "& $MuiIconButton": {
+            "& svg": {
+              color: colors.font["default"]
+            }
+          },
+          display: "block",
+          paddingBottom: 10,
+          paddingLeft: 0,
+          paddingRight: 45
+        },
+        message: {
+          fontSize: 16
+        },
+        root: {
+          backgroundColor: colors.background.paper,
+          boxShadow: "0 6px 10px 0px rgba(0, 0, 0, 0.15), 0 1px 18px 0px rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.10)",
+          color: colors.font["default"],
+          display: "block",
+          maxWidth: 480
+        }
+      },
+      MuiTooltip: {
+        tooltip: {
+          fontSize: "0.8em"
+        }
+      },
+      MuiTouchRipple: {
+        child: {
+          backgroundColor: fade(colors.primary, 0.2)
+        },
+        childLeaving: {
+          backgroundColor: fade(colors.primary, 0.2)
+        },
+        ripple: {
+          "&$rippleVisible": {
+            backgroundColor: fade(colors.primary, 0.2)
+          },
+          borderRadius: "100%"
+        }
+      }
+    }),
+    palette: createPalette(colors),
+    props: {
+      MuiFormControl: {
+        variant: "filled"
+      },
+      MuiTextField: {
+        variant: "outlined"
+      },
+      MuiCard: {
+        elevation: 0
+      },
+      MuiTypography: {
+        component: "div"
+      },
+      MuiCheckbox: {
+        color: "primary"
+      },
+      MuiTooltip: {
+        placement: "right-end"
+      }
+    },
+    shadows: shadows,
+    spacing: function spacing(value) {
+      if (value === void 0) {
+        value = 1;
+      }
+
+      return value * 8 / 10 + "rem";
+    },
+    typography: {
+      allVariants: {
+        fontFamily: fontFamily
+      },
+      body1: {
+        color: colors.font["default"],
+        fontSize: "1.6rem"
+      },
+      body2: {
+        fontSize: "1.4rem"
+      },
+      button: {
+        fontSize: "1.4rem"
+      },
+      caption: {
+        fontSize: "1.2rem"
+      },
+      fontFamily: fontFamily,
+      h1: {
+        fontSize: "4.8rem",
+        fontWeight: 700
+      },
+      h4: {
+        fontSize: "3.4rem",
+        color: colors.font["default"]
+      },
+      h5: {
+        fontSize: "2.1rem",
+        fontWeight: 500
+      },
+      h6: {
+        fontSize: "2rem",
+        fontWeight: 500
+      },
+      subtitle1: {
+        fontSize: "1.6rem"
+      },
+      subtitle2: {
+        fontSize: "1.4rem"
+      }
+    }
+  });
+};
+
+var dark = {
+  alert: {
+    paper: {
+      error: "#E0444E",
+      info: "#2E2F31",
+      success: "#5DC292",
+      warning: "#E29A2E"
+    },
+    icon: {
+      error: "#FE6E76",
+      info: "#FAFAFA",
+      success: "#5DC292",
+      warning: "#FFB84E"
+    }
+  },
+  highlightInactive: {
+    "default": "#78797A"
+  },
+  autofill: "#5D5881",
+  background: {
+    "default": "#1D1E1F",
+    paper: "#2E2F31"
+  },
+  checkbox: {
+    "default": "#FFFFFF"
+  },
+  divider: "#252728",
+  error: "#C22D74",
+  font: {
+    button: "#202124",
+    "default": "#FCFCFC",
+    gray: "#9E9D9D",
+    textButton: "#FFFFFF",
+    textDisabled: "#FCFCFC"
+  },
+  gray: {
+    "default": "#202124",
+    disabled: "rgba(32, 33, 36, 0.6)"
+  },
+  input: {
+    border: "#9d9d9d",
+    "default": "#25262A",
+    disabled: "#393939",
+    disabledBackground: "#292A2D",
+    disabledText: "#9D9D9D",
+    error: "#8C2054",
+    text: "#FCFCFC",
+    textHover: "#616161"
+  },
+  paperBorder: "#252728",
+  primary: "#13BEBB",
+  secondary: "#21125E",
+  success: "#5DC292",
+  theme: "dark"
+};
+var light = {
+  alert: {
+    paper: {
+      error: "#FFD6D9",
+      info: "#FFFFFF",
+      success: "#DFF3E9",
+      warning: "#FFF4E4"
+    },
+    icon: {
+      error: "#FE6E76",
+      info: "#28234A",
+      success: "#5DC292",
+      warning: "#FFB84E"
+    }
+  },
+  highlightInactive: {
+    "default": "#C8C8C8"
+  },
+  autofill: "#f4f6c5",
+  background: {
+    "default": "#EFF5F8",
+    paper: "#FFFFFF"
+  },
+  checkbox: {
+    "default": "#616161"
+  },
+  divider: "#EAEAEA",
+  error: "#FE6D76",
+  font: {
+    button: "#FFFFFF",
+    "default": "#3D3D3D",
+    gray: "#616161",
+    textButton: "#06847B",
+    textDisabled: "#616161"
+  },
+  gray: {
+    "default": "#C8C8C8",
+    disabled: "rgba(216, 216, 216, 0.3)"
+  },
+  input: {
+    border: "#BDBDBD",
+    "default": "#FFFFFF",
+    disabled: "#EAEAEA",
+    disabledBackground: "#F4F4F4",
+    disabledText: "#9D9D9D",
+    error: "#8C2054",
+    text: "#3D3D3D",
+    textHover: "#616161"
+  },
+  paperBorder: "#EAEAEA",
+  primary: "#06847B",
+  secondary: "#21125E",
+  success: "#5DC292",
+  theme: "light"
+};
+
+function changeColorMeta(color) {
+  var themeColorTag = document.createElement("meta");
+  themeColorTag.setAttribute("content", color);
+  themeColorTag.setAttribute("name", "theme-color");
+  var existingColorTag = document.head.querySelector("meta[name=\"theme-color\"]");
+
+  if (existingColorTag) {
+    existingColorTag.remove();
+  }
+
+  document.head.appendChild(themeColorTag);
+}
+
+var ThemeProvider = function ThemeProvider(_ref) {
+  var children = _ref.children,
+      _ref$defaultTheme = _ref.defaultTheme,
+      defaultTheme = _ref$defaultTheme === void 0 ? "light" : _ref$defaultTheme,
+      _ref$palettes = _ref.palettes,
+      palettes = _ref$palettes === void 0 ? {} : _ref$palettes,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
+
+  var _useLocalStorage = useLocalStorage(localStorageKeys.theme, defaultTheme),
+      themeTypeName = _useLocalStorage.value,
+      setThemeType = _useLocalStorage.setValue;
+
+  var themeType = themeTypeName;
+
+  var themes = _extends({
+    light: light,
+    dark: dark
+  }, palettes);
+
+  var theme = merge(createTheme(themes[themeType]), overrides);
+
+  var sendThemeToExtension = function sendThemeToExtension() {
+    return sendMessageToExtension({
+      theme: themeType,
+      type: ExtensionMessageType.THEME
+    }, "*");
+  };
+
+  useEffect(function () {
+    sendThemeToExtension();
+    changeColorMeta(theme.palette.background["default"]); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [themeType]);
+  return React.createElement(ThemeContext.Provider, {
+    value: {
+      themeType: themeType,
+      sendThemeToExtension: sendThemeToExtension,
+      setTheme: setThemeType
+    }
+  }, React.createElement(MuiThemeProvider, {
+    theme: theme
+  }, React.createElement(ActionBarProvider, null, React.createElement(BacklinkProvider, null, React.createElement(Baseline, null), children))));
+};
+
+var CompleteIcon = function CompleteIcon(props) {
+  return React.createElement("svg", Object.assign({
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "20",
+    fill: "white"
+  }), React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "14",
+    stroke: "#5DC292",
+    strokeWidth: "4"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M28.7678 13.7678C29.3536 14.3536 29.3536 15.3033 28.7678 15.8891L17.4142 27.2426L12.0607 21.8891C11.4749 21.3033 11.4749 20.3536 12.0607 19.7678L12.7678 19.0607C13.3536 18.4749 14.3033 18.4749 14.8891 19.0607L17.4142 21.5858L25.9393 13.0607C26.5251 12.4749 27.4749 12.4749 28.0607 13.0607L28.7678 13.7678Z",
+    fill: "#5DC292"
+  }));
+};
+CompleteIcon.displayName = "CompleteIcon";
+
+var InfoIcon = function InfoIcon(props) {
+  return React.createElement("svg", Object.assign({
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "20",
+    fill: "white"
+  }), React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "14",
+    stroke: "#28234A",
+    strokeWidth: "4"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z",
+    fill: "#28234A"
+  }));
+};
+InfoIcon.displayName = "InfoIcon";
+
+var NotAllowedIcon = function NotAllowedIcon(props) {
+  return React.createElement("svg", Object.assign({
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "16",
+    fill: "#F5FAFB"
+  }), React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "20",
+    fill: "white"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M26.9531 29.7815C24.9914 31.1784 22.5917 32 20 32C13.3726 32 8 26.6274 8 20C8 17.4083 8.82158 15.0086 10.2185 13.0469L26.9531 29.7815ZM29.7815 26.9531L13.0469 10.2185C15.0086 8.82158 17.4083 8 20 8C26.6274 8 32 13.3726 32 20C32 22.5917 31.1784 24.9914 29.7815 26.9531ZM36 20C36 28.8366 28.8366 36 20 36C11.1634 36 4 28.8366 4 20C4 11.1634 11.1634 4 20 4C28.8366 4 36 11.1634 36 20Z",
+    fill: "#FE6E76"
+  }));
+};
+NotAllowedIcon.displayName = "NotAllowedIcon";
+
+var NotAllowedInvertedIcon = function NotAllowedInvertedIcon(props) {
+  return React.createElement("svg", Object.assign({
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "16",
+    fill: "#F5FAFB"
+  }), React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "20",
+    fill: "#FE6E76"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M26.9531 29.7815C24.9914 31.1784 22.5917 32 20 32C13.3726 32 8 26.6274 8 20C8 17.4083 8.82158 15.0086 10.2185 13.0469L26.9531 29.7815ZM29.7815 26.9531L13.0469 10.2185C15.0086 8.82158 17.4083 8 20 8C26.6274 8 32 13.3726 32 20C32 22.5917 31.1784 24.9914 29.7815 26.9531ZM36 20C36 28.8366 28.8366 36 20 36C11.1634 36 4 28.8366 4 20C4 11.1634 11.1634 4 20 4C28.8366 4 36 11.1634 36 20Z",
+    fill: "white"
+  }));
+};
+NotAllowedInvertedIcon.displayName = "NotAllowedInvertedIcon";
+
+var WarningIcon = function WarningIcon(props) {
+  return React.createElement("svg", Object.assign({
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "20",
+    fill: "white"
+  }), React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "14",
+    stroke: "#FFB84E",
+    strokeWidth: "4"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z",
+    fill: "#FFB84E"
+  }));
+};
+WarningIcon.displayName = "WarningIcon";
+
+var ArrowDropdownIcon = /*#__PURE__*/createSvgIcon( /*#__PURE__*/React.createElement("g", {
+  style: {
+    fillRule: "evenodd"
+  }
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M7 10l5 5 5-5z"
+})), "ArrowDropdownIcon");
+
+var CheckboxIcon = /*#__PURE__*/createSvgIcon( /*#__PURE__*/React.createElement("rect", {
+  x: "5",
+  y: "5",
+  width: "14",
+  height: "14",
+  stroke: "currentColor",
+  fill: "none"
+}), "CheckboxIcon");
+
+var CheckboxCheckedIcon = /*#__PURE__*/createSvgIcon( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+  x: "5",
+  y: "5",
+  width: "14",
+  height: "14",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M 16.7527 9.33783 L 10.86618 15.7595 L 8 12.32006 L 8.76822 11.67988 L 10.90204 14.24046 L 16.0155 8.66211 L 16.7527 9.33783 Z",
+  fill: "white"
+})), "CheckboxCheckedIcon");
+
+var CheckboxIndeterminateIcon = /*#__PURE__*/createSvgIcon( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+  x: "5",
+  y: "5",
+  width: "14",
+  height: "14",
+  stroke: "currentColor",
+  fill: "none"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "8",
+  y: "11",
+  width: "8",
+  height: "2",
+  fill: "currentColor"
+})), "CheckboxIndeterminateIcon");
+
+// It's only optimized for esm, cjs will remain fat blob
+
+function getPosition() {
+  return {
+    x: window.pageXOffset,
+    y: window.pageYOffset
+  };
+}
+
+function useWindowScroll() {
+  var _useState = useState(getPosition),
+      scroll = _useState[0],
+      setScroll = _useState[1];
+
+  useEffect(function () {
+    var handleScroll = throttle(function () {
+      return setScroll(getPosition());
+    }, 100);
+    window.addEventListener("scroll", handleScroll);
+    return function () {
+      return window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  return scroll;
+}
+
+var useStyles$1 = /*#__PURE__*/makeStyles(function (theme) {
+  var _content;
+
+  return {
+    content: (_content = {
+      "&:last-child": {
+        paddingBottom: theme.spacing(2)
+      },
+      display: "flex",
+      paddingBottom: theme.spacing(2),
+      paddingTop: theme.spacing(2)
+    }, _content[theme.breakpoints.down("sm")] = {
+      marginTop: theme.spacing(1)
+    }, _content),
+    paper: {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    root: {
+      height: 70
+    }
+  };
+}, {
+  name: "Savebar"
+});
+
+var ActionBar = function ActionBar(_ref) {
+  var disabled = _ref.disabled,
+      children = _ref.children,
+      state = _ref.state,
+      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "children", "state"]);
+
+  var classes = useStyles$1();
+
+  var _useActionBar = useActionBar(),
+      anchor = _useActionBar.anchor,
+      docked = _useActionBar.docked,
+      setDocked = _useActionBar.setDocked;
+
+  var scrollPosition = useWindowScroll();
+  React.useEffect(function () {
+    if (!disabled && state !== "loading") {
+      setDocked(false);
+    }
+  }, [disabled, state, setDocked]);
+  React.useEffect(function () {
+    return function () {
+      return setDocked(true);
+    };
+  }, [setDocked]);
+  var scrolledToBottom = scrollPosition.y + window.innerHeight >= document.body.scrollHeight;
+
+  if (!anchor.current) {
+    return null;
+  }
+
+  return React.createElement(Portal, {
+    container: anchor.current
+  }, React.createElement("div", Object.assign({
+    className: classes.root
+  }, rest), React.createElement(Container, {
+    maxWidth: "lg"
+  }, React.createElement(Card, {
+    className: classes.paper,
+    elevation: !(docked || scrolledToBottom) ? 16 : 0
+  }, React.createElement(CardContent, {
+    className: classes.content
+  }, children)))));
+};
+ActionBar.displayName = "ActionBar";
+
+var useStyles$2 = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    error: {
+      "&:hover": {
+        backgroundColor: theme.palette.error.main
+      },
+      backgroundColor: theme.palette.error.main,
+      color: theme.palette.error.contrastText
+    },
+    icon: {
+      marginLeft: "0 !important",
+      position: "absolute",
+      transitionDuration: theme.transitions.duration.standard + "ms"
+    },
+    invisible: {
+      opacity: 0
+    },
+    label: {
+      alignItems: "center",
+      display: "flex",
+      transitionDuration: theme.transitions.duration.standard + "ms"
+    },
+    progress: {
+      "& svg": {
+        color: theme.palette.common.white,
+        margin: 0
+      },
+      position: "absolute",
+      transitionDuration: theme.transitions.duration.standard + "ms"
+    },
+    success: {
+      "&:hover": {
+        backgroundColor: theme.palette.primary.main
+      },
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText
+    }
+  };
+}, {
+  name: "ConfirmButton"
+});
+
+var DEFAULT_NOTIFICATION_SHOW_TIME = 3000;
+var ConfirmButton = function ConfirmButton(_ref) {
+  var _clsx, _clsx2, _clsx3, _clsx4;
+
+  var children = _ref.children,
+      className = _ref.className,
+      disabled = _ref.disabled,
+      labels = _ref.labels,
+      noTransition = _ref.noTransition,
+      transitionState = _ref.transitionState,
+      onClick = _ref.onClick,
+      onTransitionToDefault = _ref.onTransitionToDefault,
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "className", "disabled", "labels", "noTransition", "transitionState", "onClick", "onTransitionToDefault"]);
+
+  var classes = useStyles$2();
+
+  var _React$useState = React.useState(false),
+      displayCompletedActionState = _React$useState[0],
+      setDisplayCompletedActionState = _React$useState[1];
+
+  var timeout = React.useRef();
+  React.useEffect(function () {
+    if (!noTransition && transitionState === "loading") {
+      setDisplayCompletedActionState(true);
+    }
+  }, [transitionState, noTransition]);
+  React.useEffect(function () {
+    if (!noTransition && ["error", "success"].includes(transitionState)) {
+      timeout.current = setTimeout(function () {
+        setDisplayCompletedActionState(false);
+
+        if (onTransitionToDefault) {
+          onTransitionToDefault();
+        }
+      }, DEFAULT_NOTIFICATION_SHOW_TIME);
+    } else if (transitionState === "loading") {
+      clearTimeout(timeout.current);
+    }
+
+    return function () {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, [noTransition, transitionState, onTransitionToDefault]);
+  var isCompleted = noTransition ? transitionState !== "default" : displayCompletedActionState;
+  return React.createElement(Button, Object.assign({
+    variant: "contained",
+    onClick: transitionState === "loading" ? undefined : onClick,
+    color: "primary",
+    className: clsx(className, (_clsx = {}, _clsx[classes.error] = transitionState === "error" && isCompleted, _clsx[classes.success] = transitionState === "success" && isCompleted, _clsx)),
+    disabled: !isCompleted && disabled,
+    "data-test-state": isCompleted ? transitionState : "default"
+  }, props), React.createElement(CircularProgress, {
+    size: 24,
+    color: "inherit",
+    className: clsx((_clsx2 = {}, _clsx2[classes.progress] = true, _clsx2[classes.invisible] = transitionState !== "loading", _clsx2))
+  }), React.createElement(CheckIcon, {
+    className: clsx((_clsx3 = {}, _clsx3[classes.icon] = true, _clsx3[classes.invisible] = !(transitionState === "success" && isCompleted), _clsx3))
+  }), React.createElement("span", {
+    className: clsx((_clsx4 = {}, _clsx4[classes.label] = true, _clsx4[classes.invisible] = (transitionState === "loading" || transitionState === "success") && isCompleted, _clsx4))
+  }, transitionState === "error" && isCompleted ? labels.error : children || labels.confirm));
+};
+ConfirmButton.displayName = "ConfirmButton";
+
+var ButtonTooltipDecorator = function ButtonTooltipDecorator(_ref) {
+  var tooltip = _ref.tooltip,
+      children = _ref.children;
+
+  if (tooltip) {
+    return React.createElement(Tooltip$1, {
+      title: tooltip,
+      placement: "top"
+    }, React.createElement("span", null, children));
+  }
+
+  return React.createElement(React.Fragment, null, children);
+};
+ButtonTooltipDecorator.displayName = "ButtonTooltipDecorator";
+
+var useStyles$3 = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    button: {
+      marginRight: theme.spacing(1)
+    },
+    cancelButton: {
+      marginRight: theme.spacing(2)
+    },
+    deleteButton: {
+      "&:hover": {
+        backgroundColor: theme.palette.error.dark
+      },
+      backgroundColor: theme.palette.error.main,
+      color: theme.palette.error.contrastText
+    },
+    spacer: {
+      flex: "1"
+    }
+  };
+}, {
+  name: "Savebar"
+});
+
+var Savebar = function Savebar(_ref) {
+  var disabled = _ref.disabled,
+      labels = _ref.labels,
+      tooltips = _ref.tooltips,
+      state = _ref.state,
+      onCancel = _ref.onCancel,
+      onDelete = _ref.onDelete,
+      onSubmit = _ref.onSubmit;
+  var classes = useStyles$3();
+
+  var _useActionBar = useActionBar(),
+      setDocked = _useActionBar.setDocked;
+
+  return React.createElement(ActionBar, {
+    state: state,
+    disabled: disabled
+  }, !!onDelete && React.createElement(ButtonTooltipDecorator, {
+    tooltip: tooltips == null ? void 0 : tooltips["delete"]
+  }, React.createElement(Button, {
+    variant: "contained",
+    onClick: onDelete,
+    className: classes.deleteButton,
+    "data-test": "button-bar-delete"
+  }, labels["delete"])), React.createElement("div", {
+    className: classes.spacer
+  }), React.createElement(ButtonTooltipDecorator, {
+    tooltip: tooltips == null ? void 0 : tooltips.cancel
+  }, React.createElement(Button, {
+    className: classes.cancelButton,
+    variant: "text",
+    onClick: onCancel,
+    "data-test": "button-bar-cancel"
+  }, labels.cancel)), React.createElement(ButtonTooltipDecorator, {
+    tooltip: tooltips == null ? void 0 : tooltips.confirm
+  }, React.createElement(ConfirmButton, {
+    disabled: disabled,
+    labels: labels,
+    onClick: onSubmit,
+    transitionState: state,
+    "data-test": "button-bar-confirm",
+    onTransitionToDefault: function onTransitionToDefault() {
+      return setDocked(true);
+    }
+  })));
+};
+Savebar.displayName = "Savebar";
+
+var useStyles$4 = /*#__PURE__*/makeStyles(function (theme) {
+  var _root;
+
+  return {
+    backArrow: {
+      fontSize: 30
+    },
+    menuButton: {
+      flex: "0 0 auto",
+      marginLeft: theme.spacing(-2),
+      marginRight: theme.spacing(),
+      marginTop: theme.spacing(-2)
+    },
+    root: (_root = {
+      "&:hover": {
+        color: theme.typography.body1.color
+      },
+      alignItems: "center",
+      color: theme.palette.grey[500],
+      cursor: "pointer",
+      display: "flex",
+      marginTop: theme.spacing(0.5),
+      transition: theme.transitions.duration.standard + "ms"
+    }, _root[theme.breakpoints.down("sm")] = {
+      margin: theme.spacing(4, 0, 0, 0)
+    }, _root),
+    skeleton: {
+      width: "10rem"
+    },
+    title: {
+      color: "inherit",
+      flex: 1,
+      marginLeft: theme.spacing(),
+      textTransform: "uppercase"
+    }
+  };
+}, {
+  name: "AppHeader"
+});
+
+var Backlink = function Backlink(_ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick;
+  var classes = useStyles$4();
+  var anchor = useBacklink();
+
+  if (!anchor.current) {
+    return null;
+  }
+
+  return React.createElement(Portal, {
+    container: anchor.current
+  }, React.createElement("div", {
+    className: classes.root,
+    onClick: onClick,
+    "data-test-id": "app-header-back-button"
+  }, React.createElement(ArrowBackIcon, {
+    className: classes.backArrow
+  }), children ? React.createElement(Typography, {
+    className: classes.title
+  }, children) : React.createElement(Skeleton, {
+    className: classes.skeleton
+  })));
+};
+Backlink.displayName = "Backlink";
+
+var Logo = function Logo() {
+  return React.createElement("svg", {
+    width: "36",
+    height: "33",
+    viewBox: "0 0 36 33",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16.6072 33C22.4977 33 23.9789 30.6214 23.9789 27.3629C23.9789 23.3549 20.3772 22.6056 17.3814 22.1167C15.0924 21.7258 14.0489 21.5304 14.0489 20.1292C14.0489 19.0867 14.9577 18.6954 16.4389 18.6954C18.2566 18.6954 18.7614 19.2168 18.9298 20.7482L23.7097 20.0314C23.3055 16.7404 21.4542 15.0787 16.5735 15.0787C11.2216 15.0787 9.33654 17.2293 9.33654 20.6504C9.30299 25.082 13.4768 25.5382 16.5735 26.0594C18.492 26.418 19.2328 26.7437 19.2328 28.0146C19.2328 29.0573 18.5933 29.5135 16.6745 29.5135C14.5539 29.5135 13.9144 29.1551 13.6451 27.4281L9 28.1124C9.43753 31.599 11.4908 33 16.6072 33Z",
+    fill: "#28234A"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.7838 0L13.4043 6.64709H29.1638L35.5433 0H19.7838Z",
+    fill: "#8AC4EB"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.15911 2.31187C6.27552 2.1958 6.4332 2.13062 6.59759 2.13062H27.3248C27.5761 2.13062 27.8026 2.28211 27.8987 2.51437C27.9947 2.74664 27.9412 3.01388 27.7632 3.19134L21.7867 9.1508C21.6703 9.26687 21.5126 9.33205 21.3482 9.33205H0.621008C0.369679 9.33205 0.143131 9.18056 0.0471181 8.94829C-0.0488948 8.71603 0.00456112 8.44879 0.182532 8.27133L6.15911 2.31187ZM6.85429 3.37259L2.12325 8.09007H21.0915L25.8225 3.37259H6.85429Z",
+    fill: "#28234A"
+  }));
+};
+Logo.displayName = "Logo";
+
+var useStyles$5 = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    root: {
+      "&:hover, &:focus": {
+        background: "#daedeb"
+      },
+      background: theme.palette.background.paper,
+      borderRadius: 16,
+      color: theme.palette.primary.main,
+      height: 48,
+      transition: theme.transitions.duration.shortest + "ms",
+      width: 48
+    }
+  };
+}, {
+  name: "ExpandButton"
+});
+var SquareButton = function SquareButton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutPropertiesLoose(_ref, ["className"]);
+
+  var classes = useStyles$5({});
+  return React.createElement(ButtonBase, Object.assign({
+    className: clsx(classes.root, className)
+  }, rest));
+};
+SquareButton.displayName = "SquareButton";
+
+var useStyles$6 = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    arrow: {
+      transition: theme.transitions.duration.shortest + "ms"
+    },
+    shrunk: {
+      transform: "scaleX(-1)"
+    }
+  };
+}, {
+  name: "ExpandButton"
+});
+var ExpandButton = function ExpandButton(_ref) {
+  var _clsx;
+
+  var isShrunk = _ref.isShrunk,
+      rest = _objectWithoutPropertiesLoose(_ref, ["isShrunk"]);
+
+  var classes = useStyles$6({});
+  return React.createElement(SquareButton, Object.assign({}, rest), React.createElement(ArrowBackIcon, {
+    className: clsx(classes.arrow, (_clsx = {}, _clsx[classes.shrunk] = isShrunk, _clsx))
+  }));
+};
+ExpandButton.displayName = "ExpandButton";
+
+var menuWidth = 210;
+var shrunkMenuWidth = 72;
+var useStyles$7 = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    hideLabel: {
+      "&$label": {
+        opacity: 0
+      }
+    },
+    icon: {
+      "& svg": {
+        height: 24,
+        width: 24
+      },
+      marginRight: theme.spacing(1.5),
+      transition: theme.transitions.duration.shortest + "ms"
+    },
+    label: {
+      cursor: "pointer",
+      display: "block",
+      fontSize: 16,
+      fontWeight: "bold",
+      opacity: 1,
+      transition: theme.transitions.duration.shortest + "ms"
+    },
+    labelRoot: {
+      position: "absolute",
+      left: 72,
+      width: 200,
+      textAlign: "left",
+      pointerEvents: "none"
+    },
+    menuItemBtn: {
+      "&:focus": {
+        color: theme.palette.primary.main,
+        outline: 0
+      },
+      background: "none",
+      border: "none",
+      color: "inherit",
+      cursor: "pointer",
+      display: "inline-flex",
+      margin: 0,
+      padding: 0
+    },
+    paper: {
+      borderRadius: 16,
+      boxShadow: "0px 6px 30px rgba(0, 0, 0, 0.16)",
+      cursor: "default",
+      padding: theme.spacing(3),
+      textAlign: "left"
+    },
+    popper: {
+      marginLeft: theme.spacing(3),
+      zIndex: 2
+    },
+    root: {
+      "&:hover, &:focus": {
+        color: theme.palette.primary.main,
+        outline: 0
+      },
+      borderBottomRightRadius: 100,
+      borderTopRightRadius: 100,
+      color: fade(theme.palette.text.primary, 0.6),
+      cursor: "pointer",
+      display: "flex",
+      height: 56,
+      marginBottom: theme.spacing(),
+      overflow: "hidden",
+      padding: theme.spacing(2, 3, 2, 3.5),
+      transition: theme.transitions.duration.shortest + "ms",
+      width: shrunkMenuWidth
+    },
+    rootActive: {
+      "&$root": {
+        background: theme.palette.background.paper,
+        boxShadow: "0px 6px 30px rgba(0, 0, 0, 0.16)",
+        color: theme.palette.primary.main
+      }
+    },
+    rootExpanded: {
+      width: menuWidth
+    },
+    subMenuLabel: {
+      "&$label": {
+        "&:not(:last-child)": {
+          marginBottom: theme.spacing(2)
+        }
+      },
+      "&:hover, &:focus": {
+        color: theme.palette.primary.main,
+        outline: 0
+      },
+      background: "none",
+      border: "none",
+      color: fade(theme.palette.text.primary, 0.6),
+      padding: 0,
+      textAlign: "left",
+      textDecoration: "none",
+      whiteSpace: "nowrap"
+    }
+  };
+}, {
+  name: "MenuItem"
+});
+var MenuItem = function MenuItem(_ref) {
+  var _clsx, _clsx2;
+
+  var active = _ref.active,
+      menuItem = _ref.menuItem,
+      isMenuShrunk = _ref.isMenuShrunk,
+      onClick = _ref.onClick;
+  var classes = useStyles$7({});
+
+  var _React$useState = React.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var anchor = React.useRef(null);
+
+  var handleClick = function handleClick(event, menuItem) {
+    event.stopPropagation();
+
+    if (menuItem.children) {
+      setOpen(true);
+    } else {
+      onClick(menuItem.url);
+      setOpen(false);
+    }
+  };
+
+  return React.createElement("div", {
+    className: clsx(classes.root, (_clsx = {}, _clsx[classes.rootActive] = active, _clsx[classes.rootExpanded] = !isMenuShrunk, _clsx)),
+    ref: anchor,
+    onClick: function onClick(event) {
+      return handleClick(event, menuItem);
+    }
+  }, React.createElement("button", {
+    className: classes.menuItemBtn,
+    "data-test": "menu-item-label",
+    "data-test-id": menuItem.id
+  }, menuItem.iconSrc && React.createElement(SVG, {
+    className: classes.icon,
+    src: menuItem.iconSrc
+  }), React.createElement(Typography, {
+    "aria-label": menuItem.ariaLabel,
+    className: clsx(classes.label, classes.labelRoot, (_clsx2 = {}, _clsx2[classes.hideLabel] = isMenuShrunk, _clsx2)),
+    variant: "body2"
+  }, menuItem.label)), menuItem.children && React.createElement(Popper, {
+    className: classes.popper,
+    open: open,
+    anchorEl: anchor.current,
+    transition: true,
+    disablePortal: true,
+    placement: "right-start"
+  }, React.createElement(ClickAwayListener, {
+    onClickAway: function onClickAway() {
+      return setOpen(false);
+    }
+  }, React.createElement(Paper, {
+    className: classes.paper
+  }, menuItem.children.map(function (subMenuItem) {
+    var linkProps = subMenuItem.external ? {
+      href: subMenuItem.url,
+      target: "_blank"
+    } : {};
+    return React.createElement(Typography, Object.assign({
+      "aria-label": subMenuItem.ariaLabel,
+      component: subMenuItem.external ? "a" : "button",
+      className: clsx(classes.label, classes.subMenuLabel),
+      key: subMenuItem.url,
+      onClick: function onClick(event) {
+        return handleClick(event, subMenuItem);
+      },
+      "data-test": "submenu-item-label",
+      "data-test-id": subMenuItem.id,
+      variant: "body2"
+    }, linkProps), subMenuItem.label);
+  })))));
+};
+MenuItem.displayName = "MenuItem";
+
+var useStyles$8 = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    expandButton: {
+      marginLeft: theme.spacing(2)
+    },
+    "float": {
+      height: "100vh",
+      position: "fixed"
+    },
+    logo: {
+      margin: "36px 0 " + theme.spacing(3) + " " + theme.spacing(3.5)
+    },
+    root: {
+      transition: "width 0.5s ease",
+      width: menuWidth,
+      zIndex: 100
+    },
+    rootShrink: {
+      width: shrunkMenuWidth
+    },
+    toolbarContainer: {
+      margin: theme.spacing(1, 0, 1, 2)
+    }
+  };
+}, {
+  name: "SideBar"
+});
+var Sidebar = function Sidebar(_ref) {
+  var _clsx;
+
+  var active = _ref.active,
+      menuItems = _ref.menuItems,
+      toolbar = _ref.toolbar,
+      onMenuItemClick = _ref.onMenuItemClick;
+  var classes = useStyles$8({});
+
+  var _useLocalStorage = useLocalStorage(localStorageKeys.menuShrink, false.toString()),
+      isShrunkStr = _useLocalStorage.value,
+      setShrink = _useLocalStorage.setValue;
+
+  var isShrunk = isShrunkStr === "true";
+  return React.createElement("div", {
+    className: clsx(classes.root, (_clsx = {}, _clsx[classes.rootShrink] = isShrunk, _clsx))
+  }, React.createElement("div", {
+    className: classes["float"]
+  }, React.createElement("div", {
+    className: classes.logo
+  }, React.createElement(Logo, null)), menuItems.map(function (menuItem) {
+    return React.createElement(MenuItem, {
+      active: active === menuItem.id,
+      isMenuShrunk: isShrunk,
+      menuItem: menuItem,
+      onClick: onMenuItemClick,
+      key: menuItem.ariaLabel
+    });
+  }), toolbar && React.createElement("div", {
+    className: classes.toolbarContainer
+  }, toolbar), React.createElement(ExpandButton, {
+    className: classes.expandButton,
+    isShrunk: isShrunk,
+    onClick: function onClick() {
+      return setShrink((!isShrunk).toString());
+    }
+  })));
+};
+Sidebar.displayName = "SideBar";
+
+var useStyles$9 = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    activeMenuLabel: {
+      display: "flex"
+    },
+    container: {
+      overflowX: "hidden",
+      width: "100%"
+    },
+    containerSubMenu: {
+      "&$container": {
+        overflow: "hidden"
+      }
+    },
+    content: {
+      width: "50%"
+    },
+    icon: {
+      marginRight: theme.spacing(2)
+    },
+    innerContainer: {
+      display: "flex",
+      position: "relative",
+      right: 0,
+      transition: theme.transitions.duration["short"] + "ms",
+      width: "200%"
+    },
+    label: {
+      fontWeight: "bold"
+    },
+    logo: {
+      display: "block",
+      marginBottom: theme.spacing(4)
+    },
+    menuItemBtn: {
+      alignItems: "center",
+      background: "none",
+      border: "none",
+      color: theme.palette.text.secondary,
+      display: "flex",
+      marginBottom: theme.spacing(3),
+      padding: 0,
+      textDecoration: "none"
+    },
+    root: {
+      background: theme.palette.background["default"],
+      borderBottomRightRadius: 32,
+      borderTopRightRadius: 32,
+      padding: theme.spacing(3),
+      width: 260
+    },
+    secondaryContentActive: {
+      right: "100%"
+    },
+    subMenuTopBar: {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: theme.spacing(3)
+    }
+  };
+}, {
+  name: "SideBarDrawer"
+});
+
+var MenuItemBtn = function MenuItemBtn(_ref) {
+  var menuItem = _ref.menuItem,
+      _onClick = _ref.onClick;
+  var classes = useStyles$9();
+  var linkProps = menuItem.external ? {
+    href: menuItem.url,
+    target: "_blank"
+  } : {};
+  var Component = menuItem.external ? "a" : "button";
+  return React.createElement(Component, Object.assign({
+    className: classes.menuItemBtn,
+    "data-test": "menu-item-label",
+    "data-test-id": menuItem.id,
+    onClick: function onClick() {
+      return _onClick(menuItem.url);
+    }
+  }, linkProps), menuItem.iconSrc && React.createElement(SVG, {
+    className: classes.icon,
+    src: menuItem.iconSrc
+  }), React.createElement(Typography, {
+    "aria-label": menuItem.ariaLabel,
+    className: classes.label
+  }, menuItem.label));
+};
+MenuItemBtn.displayName = "MenuItemBtn";
+
+var SidebarDrawer = function SidebarDrawer(_ref) {
+  var _clsx, _clsx2, _activeMenu$children;
+
+  var menuItems = _ref.menuItems,
+      onMenuItemClick = _ref.onMenuItemClick;
+
+  var _React$useState = React.useState(false),
+      isOpened = _React$useState[0],
+      setOpened = _React$useState[1];
+
+  var classes = useStyles$9({});
+
+  var _React$useState2 = React.useState(null),
+      activeMenu = _React$useState2[0],
+      setActiveMenu = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      showSubmenu = _React$useState3[0],
+      setShowSubmenu = _React$useState3[1];
+
+  var container = React.useRef(null);
+
+  var handleMenuItemClick = function handleMenuItemClick(url) {
+    setOpened(false);
+    setShowSubmenu(false);
+    onMenuItemClick(url);
+  };
+
+  var handleMenuItemWithChildrenClick = function handleMenuItemWithChildrenClick(menuItem) {
+    var _container$current;
+
+    setActiveMenu(menuItem);
+    setShowSubmenu(true);
+    (_container$current = container.current) == null ? void 0 : _container$current.scrollTo({
+      top: 0
+    });
+  };
+
+  return React.createElement(React.Fragment, null, React.createElement(SquareButton, {
+    onClick: function onClick() {
+      return setOpened(true);
+    }
+  }, React.createElement(MenuIcon, null)), React.createElement(Drawer, {
+    classes: {
+      paper: classes.root
+    },
+    open: isOpened,
+    onClose: function onClose() {
+      return setOpened(false);
+    }
+  }, React.createElement("div", {
+    className: clsx(classes.container, (_clsx = {}, _clsx[classes.containerSubMenu] = showSubmenu, _clsx)),
+    ref: container
+  }, React.createElement("div", {
+    className: clsx(classes.innerContainer, (_clsx2 = {}, _clsx2[classes.secondaryContentActive] = showSubmenu, _clsx2))
+  }, React.createElement("div", {
+    className: classes.content
+  }, React.createElement("div", {
+    className: classes.logo
+  }, React.createElement(Logo, null)), menuItems.map(function (menuItem) {
+    return React.createElement(MenuItemBtn, {
+      menuItem: menuItem,
+      onClick: menuItem.children ? function () {
+        return handleMenuItemWithChildrenClick(menuItem);
+      } : handleMenuItemClick,
+      key: menuItem.ariaLabel
+    });
+  })), activeMenu && React.createElement("div", {
+    className: classes.content
+  }, React.createElement("div", {
+    className: classes.subMenuTopBar
+  }, React.createElement("div", {
+    className: classes.activeMenuLabel
+  }, activeMenu.iconSrc && React.createElement(SVG, {
+    className: classes.icon,
+    src: activeMenu.iconSrc
+  }), React.createElement(Typography, {
+    className: classes.label
+  }, activeMenu.label)), React.createElement(SquareButton, {
+    onClick: function onClick() {
+      return setShowSubmenu(false);
+    }
+  }, React.createElement(ArrowLeftIcon, null))), (_activeMenu$children = activeMenu.children) == null ? void 0 : _activeMenu$children.map(function (subMenuItem) {
+    return React.createElement(MenuItemBtn, {
+      menuItem: subMenuItem,
+      onClick: handleMenuItemClick,
+      key: subMenuItem.ariaLabel
+    });
+  }))))));
+};
+SidebarDrawer.displayName = "SideBarDrawer";
+
+var useStyles$a = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    close: {
+      color: theme.palette.common.black,
+      position: "absolute",
+      right: theme.spacing(-2),
+      top: theme.spacing(-1)
+    },
+    closeNoContent: {
+      "&$close": {
+        right: theme.spacing(-3),
+        top: theme.spacing(-3)
+      }
+    },
+    container: {
+      columnGap: theme.spacing(2),
+      display: "grid",
+      gridTemplateColumns: "40px 1fr"
+    },
+    content: {
+      padding: theme.spacing(0, 1)
+    },
+    root: {},
+    titleBar: {
+      marginTop: 6,
+      marginBottom: theme.spacing(1),
+      position: "relative"
+    },
+    error: {
+      background: theme.palette.alert.paper.error
+    },
+    warning: {
+      background: theme.palette.alert.paper.warning
+    },
+    success: {
+      background: theme.palette.alert.paper.success
+    }
+  };
+}, {
+  name: "Alert"
+});
+
+function getIcon(variant) {
+  switch (variant) {
+    case "error":
+      return React.createElement(NotAllowedIcon, null);
+
+    case "success":
+      return React.createElement(CompleteIcon, null);
+
+    case "warning":
+      return React.createElement(WarningIcon, null);
+  }
+
+  return React.createElement(InfoIcon, null);
+}
+
+var Alert = function Alert(_ref) {
+  var _clsx, _clsx2;
+
+  var className = _ref.className,
+      _ref$close = _ref.close,
+      close = _ref$close === void 0 ? true : _ref$close,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "info" : _ref$variant,
+      title = _ref.title,
+      children = _ref.children;
+  var classes = useStyles$a();
+
+  var _React$useState = React.useState(true),
+      visible = _React$useState[0],
+      setVisible = _React$useState[1];
+
+  if (!visible) {
+    return null;
+  }
+
+  return React.createElement(Card, {
+    elevation: 0,
+    className: clsx(className, classes.root, (_clsx = {}, _clsx[classes.error] = variant === "error", _clsx[classes.warning] = variant === "warning", _clsx[classes.success] = variant === "success", _clsx)),
+    "data-test": "alert"
+  }, React.createElement(CardContent, null, React.createElement("div", {
+    className: classes.container
+  }, React.createElement("div", null, getIcon(variant)), React.createElement("div", {
+    className: classes.content
+  }, React.createElement("div", {
+    className: classes.titleBar
+  }, React.createElement(Typography, {
+    variant: "h5"
+  }, title), close && React.createElement(IconButton, {
+    className: clsx(classes.close, (_clsx2 = {}, _clsx2[classes.closeNoContent] = !!children, _clsx2)),
+    onClick: function onClick() {
+      return setVisible(false);
+    },
+    "data-test": "close"
+  }, React.createElement(CloseIcon, null))), typeof children === "string" ? React.createElement(Typography, {
+    variant: "body1"
+  }, children) : children))));
+};
+Alert.displayName = "Alert";
+
+var iconWidth = 40;
+var useStyles$b = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    actionBtn: {
+      left: -4,
+      position: "relative",
+      minWidth: "unset"
+    },
+    closeBtn: {
+      "& svg": {
+        maxHeight: 20,
+        maxWidth: 20
+      },
+      padding: 10,
+      position: "absolute",
+      right: 5,
+      top: 7
+    },
+    closeBtnInfo: {
+      color: theme.palette.text.primary
+    },
+    error: {
+      backgroundColor: theme.palette.alert.paper.error
+    },
+    hiddenText: {
+      maxHeight: 0
+    },
+    info: {},
+    snackbar: {
+      borderRadius: 4,
+      padding: theme.spacing(0, 6, 1, 2),
+      position: "relative"
+    },
+    snackbarContainer: {
+      marginBottom: theme.spacing(2),
+      maxWidth: 450,
+      position: "relative"
+    },
+    snackbarAction: {
+      paddingLeft: "calc(" + iconWidth + "px + " + theme.spacing(2) + ")"
+    },
+    success: {
+      backgroundColor: theme.palette.alert.paper.success
+    },
+    text: {
+      fontWeight: 400,
+      paddingTop: 5
+    },
+    warning: {
+      backgroundColor: theme.palette.alert.paper.warning
+    },
+    messageContainer: {
+      paddingTop: theme.spacing(2),
+      position: "relative"
+    },
+    container: {
+      columnGap: theme.spacing(2),
+      display: "grid",
+      gridTemplateColumns: iconWidth + "px 1fr"
+    },
+    title: {
+      marginTop: 6,
+      marginBottom: theme.spacing(0.5)
+    }
+  };
+}, {
+  name: "Notification"
+});
+
+function getIcon$1(variant) {
+  switch (variant) {
+    case "error":
+      return React.createElement(NotAllowedIcon, null);
+
+    case "success":
+      return React.createElement(CompleteIcon, null);
+
+    case "warning":
+      return React.createElement(WarningIcon, null);
+  }
+
+  return React.createElement(InfoIcon, null);
+}
+
+var Notification = function Notification(_ref) {
+  var _clsx, _clsx2;
+
+  var onClose = _ref.onClose,
+      title = _ref.title,
+      type = _ref.type,
+      action = _ref.action,
+      content = _ref.content,
+      className = _ref.className,
+      rest = _objectWithoutPropertiesLoose(_ref, ["onClose", "title", "type", "action", "content", "className"]);
+
+  var classes = useStyles$b();
+  return React.createElement("div", Object.assign({
+    className: clsx(classes.snackbarContainer, className),
+    "data-test": "notification",
+    "data-test-type": type
+  }, rest), React.createElement(SnackbarContent, {
+    "aria-describedby": "client-snackbar",
+    classes: {
+      action: classes.snackbarAction,
+      message: classes.messageContainer
+    },
+    className: clsx(classes.snackbar, (_clsx = {}, _clsx[classes.info] = type === "info", _clsx[classes.error] = type === "error", _clsx[classes.success] = type === "success", _clsx[classes.warning] = type === "warning", _clsx)),
+    message: React.createElement("div", {
+      className: classes.container
+    }, React.createElement("div", null, getIcon$1(type)), React.createElement("div", null, React.createElement("div", {
+      className: classes.title
+    }, React.createElement(Typography, {
+      variant: "h5"
+    }, title)), React.createElement(Typography, {
+      variant: "body1"
+    }, content))),
+    action: [React.createElement("div", {
+      key: "actions"
+    }, !!action && React.createElement(Button, {
+      className: classes.actionBtn,
+      key: "action",
+      color: "default",
+      size: "small",
+      onClick: action.onClick,
+      "data-test": "button-action"
+    }, action.label)), React.createElement(IconButton, {
+      key: "close",
+      "aria-label": "Close",
+      color: "inherit",
+      onClick: onClose,
+      className: clsx(classes.closeBtn, (_clsx2 = {}, _clsx2[classes.closeBtnInfo] = type === "info", _clsx2)),
+      "data-test": "close"
+    }, React.createElement(CloseIcon, null))]
+  }));
+};
+Notification.displayName = "Notification";
+
+var UserChipMenuContext = /*#__PURE__*/createContext(undefined);
+UserChipMenuContext.displayName = "UserChipMenuContext";
+var useUserChipMenu = function useUserChipMenu() {
+  var ctx = useContext(UserChipMenuContext);
+
+  if (ctx === undefined) {
+    throw new Error("useUserChipMenu must be used within a UserChipMenuContext");
+  }
+
+  return ctx;
+};
+
+var useStyles$c = /*#__PURE__*/makeStyles(function (theme) {
+  var _arrow, _, _userChip;
+
+  return {
+    arrow: (_arrow = {}, _arrow[theme.breakpoints.down("sm")] = {
+      marginLeft: 0
+    }, _arrow.marginLeft = theme.spacing(2), _arrow.transition = theme.transitions.duration.standard + "ms", _arrow),
+    avatar: {
+      "&&": (_ = {}, _[theme.breakpoints.down("sm")] = {
+        height: 40,
+        width: 40
+      }, _.height = 32, _.width = 32, _)
+    },
+    avatarInitials: {
+      color: theme.palette.primary.contrastText
+    },
+    avatarPlaceholder: {
+      alignItems: "center",
+      background: theme.palette.primary.main,
+      borderRadius: "100%",
+      display: "flex",
+      justifyContent: "center"
+    },
+    label: {
+      lineHeight: 1.2
+    },
+    labelContainer: {
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    popover: {
+      marginTop: theme.spacing(2),
+      zIndex: 10
+    },
+    rotate: {
+      transform: "rotate(180deg)"
+    },
+    userChip: (_userChip = {}, _userChip[theme.breakpoints.down("sm")] = {
+      height: 48
+    }, _userChip.backgroundColor = theme.palette.background.paper, _userChip.borderRadius = 24, _userChip.color = theme.palette.text.primary, _userChip.height = 40, _userChip.padding = theme.spacing(0.5), _userChip),
+    userMenuContainer: {
+      position: "relative"
+    }
+  };
+}, {
+  name: "UserChipMenu"
+});
+
+var UserChipMenu = function UserChipMenu(_ref) {
+  var _clsx;
+
+  var avatar = _ref.avatar,
+      initials = _ref.initials,
+      name = _ref.name,
+      subtext = _ref.subtext,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["avatar", "initials", "name", "subtext", "children"]);
+
+  var classes = useStyles$c({});
+
+  var _React$useState = React.useState(false),
+      isMenuOpened = _React$useState[0],
+      setMenuState = _React$useState[1];
+
+  var anchor = React.useRef(null);
+
+  var closeMenu = function closeMenu() {
+    return setMenuState(false);
+  };
+
+  return React.createElement("div", Object.assign({
+    className: classes.userMenuContainer
+  }, props), React.createElement(Chip, {
+    avatar: avatar ? React.createElement(Avatar, {
+      alt: "user",
+      src: avatar
+    }) : React.createElement("div", {
+      className: classes.avatarPlaceholder
+    }, React.createElement("div", {
+      className: classes.avatarInitials
+    }, initials)),
+    classes: {
+      avatar: classes.avatar
+    },
+    className: classes.userChip,
+    label: React.createElement("div", {
+      className: classes.labelContainer
+    }, React.createElement(Hidden, {
+      smDown: true
+    }, React.createElement("div", null, React.createElement(Typography, {
+      className: classes.label,
+      variant: "body2"
+    }, name), subtext && React.createElement(Typography, {
+      className: classes.label,
+      variant: "body2",
+      color: "textSecondary"
+    }, subtext))), React.createElement(ArrowDropdownIcon, {
+      className: clsx(classes.arrow, (_clsx = {}, _clsx[classes.rotate] = isMenuOpened, _clsx))
+    })),
+    onClick: function onClick() {
+      return setMenuState(!isMenuOpened);
+    },
+    ref: anchor,
+    "data-test": "userMenu"
+  }), React.createElement(Popper, {
+    className: classes.popover,
+    open: isMenuOpened,
+    anchorEl: anchor.current,
+    transition: true,
+    placement: "bottom-end"
+  }, function (_ref2) {
+    var TransitionProps = _ref2.TransitionProps,
+        placement = _ref2.placement;
+    return React.createElement(Grow, Object.assign({}, TransitionProps, {
+      style: {
+        transformOrigin: placement === "bottom" ? "right top" : "right bottom"
+      }
+    }), React.createElement(Paper, null, React.createElement(ClickAwayListener, {
+      onClickAway: closeMenu,
+      mouseEvent: "onClick"
+    }, React.createElement(Menu, null, React.createElement(UserChipMenuContext.Provider, {
+      value: closeMenu
+    }, children)))));
+  }));
+};
+UserChipMenu.displayName = "UserChip";
+
+var UserChipMenuItem = function UserChipMenuItem(_ref) {
+  var leaveOpen = _ref.leaveOpen,
+      onClick = _ref.onClick,
+      props = _objectWithoutPropertiesLoose(_ref, ["leaveOpen", "onClick"]);
+
+  var closeMenu = useUserChipMenu(); // We're not really interested in event type here
+
+  var handleClickWithClose = function handleClickWithClose(event) {
+    closeMenu();
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  return React.createElement(MenuItem$1, Object.assign({}, props, {
+    onClick: leaveOpen ? onClick : handleClickWithClose,
+    button: true
+  }));
+};
+UserChipMenuItem.displayName = "UserChipMenuItem";
+
+var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
+  var _root;
+
+  return {
+    root: (_root = {}, _root[theme.breakpoints.up("md")] = {
+      "&& table": {
+        tableLayout: "fixed"
+      }
+    }, _root["& table"] = {
+      tableLayout: "auto"
+    }, _root.overflowX = "auto", _root.width = "100%", _root)
+  };
+}, {
+  name: "ResponsiveTable"
+});
+
+var ResponsiveTable = function ResponsiveTable(props) {
+  var children = props.children,
+      className = props.className;
+  var classes = useStyles$d(props);
+  return React.createElement("div", {
+    className: classes.root
+  }, React.createElement(Table, {
+    className: className
+  }, children));
+};
+ResponsiveTable.displayName = "ResponsiveTable";
+
+var useStyles$e = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    tooltip: {
+      backgroundColor: function backgroundColor(props) {
+        switch (props.variant) {
+          case "info":
+            return theme.palette.info.main;
+
+          case "success":
+            return theme.palette.success.main;
+
+          case "warning":
+            return theme.palette.warning.main;
+
+          case "error":
+            return theme.palette.error.main;
+
+          default:
+            return theme.palette.info.main;
+        }
+      }
+    }
+  };
+}, {
+  name: "Tooltip"
+});
+
+var Tooltip = function Tooltip(_ref) {
+  var children = _ref.children,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "info" : _ref$variant,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "variant"]);
+
+  var classes = useStyles$e(_extends({
+    variant: variant,
+    children: children
+  }, rest));
+  return React.createElement(Tooltip$2, Object.assign({
+    classes: classes
+  }, rest), children);
+};
+Tooltip.displayName = "Tooltip";
+
+export { ActionBar, ActionBarContext, ActionBarProvider, Alert, Backlink, BacklinkContext, BacklinkProvider, CheckboxCheckedIcon, CheckboxIcon, CheckboxIndeterminateIcon, CompleteIcon, ConfirmButton, ExpandButton, ExtensionMessageType, ICONBUTTON_SIZE, InfoIcon, MenuItem, MenuItemBtn, NotAllowedIcon, NotAllowedInvertedIcon, Notification, ResponsiveTable, Savebar, Sidebar, SidebarDrawer, SquareButton, ThemeProvider, Tooltip, UserChipMenu, UserChipMenuItem, WarningIcon, createTheme, dark, light, makeStyles, menuWidth, sendMessageToDashboard, sendMessageToExtension, shrunkMenuWidth, useActionBar, useBacklink, useExtensionMessage, useTheme };
+//# sourceMappingURL=macaw-ui.esm.js.map