@shopistry/macaw-ui/dist/macaw-ui.cjs.development.js

Saleor's UI component library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styles = require('@material-ui/core/styles');
var lodash = require('lodash');
var React = require('react');
var React__default = _interopDefault(React);
var CssBaseline = _interopDefault(require('@material-ui/core/CssBaseline'));
var utils = require('@material-ui/core/utils');
var Button = _interopDefault(require('@material-ui/core/Button'));
var Card = _interopDefault(require('@material-ui/core/Card'));
var CardContent = _interopDefault(require('@material-ui/core/CardContent'));
var Container = _interopDefault(require('@material-ui/core/Container'));
var Portal = _interopDefault(require('@material-ui/core/Portal'));
var CircularProgress = _interopDefault(require('@material-ui/core/CircularProgress'));
var CheckIcon = _interopDefault(require('@material-ui/icons/Check'));
var clsx = _interopDefault(require('clsx'));
var Tooltip$1 = _interopDefault(require('@material-ui/core/Tooltip'));
var Typography = _interopDefault(require('@material-ui/core/Typography'));
var ArrowBackIcon = _interopDefault(require('@material-ui/icons/ArrowBack'));
var Skeleton = _interopDefault(require('@material-ui/lab/Skeleton'));
var ButtonBase = _interopDefault(require('@material-ui/core/ButtonBase'));
var ClickAwayListener = _interopDefault(require('@material-ui/core/ClickAwayListener'));
var Paper = _interopDefault(require('@material-ui/core/Paper'));
var Popper = _interopDefault(require('@material-ui/core/Popper'));
var SVG = _interopDefault(require('react-inlinesvg'));
var Drawer = _interopDefault(require('@material-ui/core/Drawer'));
var ArrowLeftIcon = _interopDefault(require('@material-ui/icons/ArrowLeft'));
var MenuIcon = _interopDefault(require('@material-ui/icons/Menu'));
var IconButton = _interopDefault(require('@material-ui/core/IconButton'));
var CloseIcon = _interopDefault(require('@material-ui/icons/Close'));
var SnackbarContent = _interopDefault(require('@material-ui/core/SnackbarContent'));
var Avatar = _interopDefault(require('@material-ui/core/Avatar'));
var Chip = _interopDefault(require('@material-ui/core/Chip'));
var Grow = _interopDefault(require('@material-ui/core/Grow'));
var Hidden = _interopDefault(require('@material-ui/core/Hidden'));
var Menu = _interopDefault(require('@material-ui/core/MenuList'));
var MenuItem$1 = _interopDefault(require('@material-ui/core/MenuItem'));
var Table = _interopDefault(require('@material-ui/core/Table'));
var core = require('@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__default.createContext(undefined);
ActionBarContext.displayName = "ActionBarContext";
var useActionBar = function useActionBar() {
  var ctx = React__default.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__default.useState(true),
      docked = _React$useState[0],
      setDocked = _React$useState[1];

  var anchor = React__default.useRef(null);
  return React__default.createElement(ActionBarContext.Provider, {
    value: {
      anchor: anchor,
      docked: docked,
      setDocked: setDocked
    }
  }, children);
};

var BacklinkContext = /*#__PURE__*/React__default.createContext(undefined);
BacklinkContext.displayName = "BacklinkContext";
var useBacklink = function useBacklink() {
  var ctx = React__default.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__default.useRef(null);
  return React__default.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);
  }
}

(function (ExtensionMessageType) {
  ExtensionMessageType[ExtensionMessageType["BREADCRUMB_CLICK"] = 0] = "BREADCRUMB_CLICK";
  ExtensionMessageType[ExtensionMessageType["BREADCRUMB_SET"] = 1] = "BREADCRUMB_SET";
  ExtensionMessageType[ExtensionMessageType["THEME"] = 2] = "THEME";
})(exports.ExtensionMessageType || (exports.ExtensionMessageType = {}));

function useExtensionMessage(handle) {
  React.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 = React.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


  React.useEffect(function () {
    var newValue = window.localStorage.getItem(key);

    if (value !== newValue) {
      setValue(newValue || initialValue);
    }
  });
  var handleStorage = React.useCallback(function (event) {
    if (event.key === key && event.newValue !== value) {
      setValue(event.newValue || initialValue);
    }
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [value, key]);
  React.useEffect(function () {
    window.addEventListener("storage", handleStorage);
    return function () {
      return window.removeEventListener("storage", handleStorage);
    };
  }, [handleStorage]);
  return {
    value: value,
    setValue: setItem
  };
}

var ThemeContext = /*#__PURE__*/React__default.createContext(undefined);
ThemeContext.displayName = "ThemeContext";

function makeStyles(styles$1, options) {
  return styles.makeStyles(styles$1, options);
}
function useTheme() {
  var saleorTheme = styles.useTheme();
  var themeInfo = React.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: styles.fade(theme.palette.primary.main, 0.2)
      },
      html: {
        fontSize: "62.5%"
      }
    }
  };
}, {
  name: "Baseline"
});
var Baseline = function Baseline() {
  useStyles();
  return React__default.createElement(CssBaseline, null);
};
Baseline.displayName = "Baseline";

var buttonOverrides = function buttonOverrides(colors) {
  return {
    MuiButton: {
      contained: {
        "&$disabled": {
          backgroundColor: styles.fade(colors.primary, 0.12),
          color: "#FFFFFF"
        },
        "&:active": {
          boxShadow: "none"
        },
        "&:hover": {
          boxShadow: "none"
        },
        boxShadow: "none"
      },
      containedPrimary: {
        "&:active": {
          backgroundColor: styles.darken(colors.primary, 0.4)
        },
        "&:hover": {
          backgroundColor: styles.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: styles.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: styles.fade(colors.primary, 0.4) + " !important"
        },
        "&$error": {
          "&$focused": {
            color: colors.error
          },
          color: colors.error
        },
        "&&$focused": {
          "&:not($error)": {
            color: colors.primary
          }
        },
        color: styles.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: styles.fade(colors.primary, 0.3)
        }
      },
      root: {
        "&$selected": {
          backgroundColor: styles.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 styles.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"
        }
      },
      MuiDialog: {
        paper: {
          overflowY: undefined
        }
      },
      MuiDialogActions: {
        root: {
          borderTop: "1px solid " + colors.divider,
          padding: "16px 24px"
        }
      },
      MuiDialogContent: {
        root: {
          overflowX: undefined,
          overflowY: undefined,
          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: styles.fade(colors.primary, 0.2)
        },
        childLeaving: {
          backgroundColor: styles.fade(colors.primary, 0.2)
        },
        ripple: {
          "&$rippleVisible": {
            backgroundColor: styles.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: "#000000",
    // 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: "#000000",
  // 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 = lodash.merge(createTheme(themes[themeType]), overrides);

  var sendThemeToExtension = function sendThemeToExtension() {
    return sendMessageToExtension({
      theme: themeType,
      type: exports.ExtensionMessageType.THEME
    }, "*");
  };

  React.useEffect(function () {
    sendThemeToExtension();
    changeColorMeta(theme.palette.background["default"]); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [themeType]);
  return React__default.createElement(ThemeContext.Provider, {
    value: {
      themeType: themeType,
      sendThemeToExtension: sendThemeToExtension,
      setTheme: setThemeType
    }
  }, React__default.createElement(styles.MuiThemeProvider, {
    theme: theme
  }, React__default.createElement(ActionBarProvider, null, React__default.createElement(BacklinkProvider, null, React__default.createElement(Baseline, null), children))));
};

var CompleteIcon = function CompleteIcon(props) {
  return React__default.createElement("svg", Object.assign({
    width: "40",
    height: "40",
    viewBox: "0 0 40 40",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, props), React__default.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "20",
    fill: "white"
  }), React__default.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "14",
    stroke: "#5DC292",
    strokeWidth: "4"
  }), React__default.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__default.createElement("svg", Object.assign({
    width: "40",
    height: "40",
    viewBox: "0 0 40 40",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, props), React__default.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "20",
    fill: "white"
  }), React__default.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "14",
    stroke: "#28234A",
    strokeWidth: "4"
  }), React__default.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__default.createElement("svg", Object.assign({
    width: "40",
    height: "40",
    viewBox: "0 0 40 40",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, props), React__default.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "16",
    fill: "#F5FAFB"
  }), React__default.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "20",
    fill: "white"
  }), React__default.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__default.createElement("svg", Object.assign({
    width: "40",
    height: "40",
    viewBox: "0 0 40 40",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, props), React__default.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "16",
    fill: "#F5FAFB"
  }), React__default.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "20",
    fill: "#FE6E76"
  }), React__default.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__default.createElement("svg", Object.assign({
    width: "40",
    height: "40",
    viewBox: "0 0 40 40",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, props), React__default.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "20",
    fill: "white"
  }), React__default.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "14",
    stroke: "#FFB84E",
    strokeWidth: "4"
  }), React__default.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__*/utils.createSvgIcon( /*#__PURE__*/React__default.createElement("g", {
  style: {
    fillRule: "evenodd"
  }
}, /*#__PURE__*/React__default.createElement("path", {
  d: "M7 10l5 5 5-5z"
})), "ArrowDropdownIcon");

var CheckboxIcon = /*#__PURE__*/utils.createSvgIcon( /*#__PURE__*/React__default.createElement("rect", {
  x: "5",
  y: "5",
  width: "14",
  height: "14",
  stroke: "currentColor",
  fill: "none"
}), "CheckboxIcon");

var CheckboxCheckedIcon = /*#__PURE__*/utils.createSvgIcon( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("rect", {
  x: "5",
  y: "5",
  width: "14",
  height: "14",
  fill: "currentColor"
}), /*#__PURE__*/React__default.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__*/utils.createSvgIcon( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("rect", {
  x: "5",
  y: "5",
  width: "14",
  height: "14",
  stroke: "currentColor",
  fill: "none"
}), /*#__PURE__*/React__default.createElement("rect", {
  x: "8",
  y: "11",
  width: "8",
  height: "2",
  fill: "currentColor"
})), "CheckboxIndeterminateIcon");

var SearchIcon = /*#__PURE__*/utils.createSvgIcon( /*#__PURE__*/React__default.createElement("path", {
  fillRule: "evenodd",
  clipRule: "evenodd",
  d: "M17 10.5C17 14.0899 14.0899 17 10.5 17C6.91015 17 4 14.0899 4 10.5C4 6.91015 6.91015 4 10.5 4C14.0899 4 17 6.91015 17 10.5ZM15.7618 17.176C14.3145 18.3183 12.4869 19 10.5 19C5.80558 19 2 15.1944 2 10.5C2 5.80558 5.80558 2 10.5 2C15.1944 2 19 5.80558 19 10.5C19 12.4869 18.3183 14.3145 17.176 15.7618L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L15.7618 17.176Z",
  fill: "currentColor"
}), "SearchIcon");

var EditIcon = /*#__PURE__*/utils.createSvgIcon( /*#__PURE__*/React__default.createElement("path", {
  fillRule: "evenodd",
  clipRule: "evenodd",
  d: "M20.0445 2.90731C18.8236 1.69756 16.8544 1.69756 15.6336 2.90731L14.7077 3.82479L7.00549 11.4569C6.63843 11.8206 6.41956 12.3074 6.39126 12.8231L6.24246 15.535C6.17315 16.7984 7.23704 17.8317 8.4994 17.7272L11.1564 17.5073C11.646 17.4668 12.1055 17.2551 12.4543 16.9096L21.0739 8.36838C22.3086 7.14491 22.3086 5.15086 21.0739 3.92738L20.0445 2.90731ZM8.47578 12.9372L15.4428 6.03358L17.9544 8.52227L10.984 15.4292L8.32698 15.6492L8.47578 12.9372ZM16.9249 4.56496L19.4365 7.05365L19.6036 6.88805C20.0152 6.48022 20.0152 5.81554 19.6036 5.40772L18.5742 4.38765C18.1672 3.9844 17.5108 3.9844 17.1039 4.38765L16.9249 4.56496ZM5.13147 3.23318C3.40201 3.23318 2 4.63355 2 6.36099V18.8722C2 20.5997 3.40201 22 5.13147 22H17.6573C19.3868 22 20.7888 20.5997 20.7888 18.8722V14.2848C20.7888 13.709 20.3215 13.2422 19.745 13.2422C19.1685 13.2422 18.7012 13.709 18.7012 14.2848V18.8722C18.7012 19.4481 18.2338 19.9148 17.6573 19.9148H5.13147C4.55498 19.9148 4.08765 19.4481 4.08765 18.8722V6.36099C4.08765 5.78518 4.55498 5.31839 5.13147 5.31839H9.72429C10.3008 5.31839 10.7681 4.8516 10.7681 4.27578C10.7681 3.69997 10.3008 3.23318 9.72429 3.23318H5.13147Z",
  fill: "currentColor"
}), "EditIcon");

// It's only optimized for esm, cjs will remain fat blob

function getPosition() {
  return {
    x: window.pageXOffset,
    y: window.pageYOffset
  };
}

function useWindowScroll() {
  var _useState = React.useState(getPosition),
      scroll = _useState[0],
      setScroll = _useState[1];

  React.useEffect(function () {
    var handleScroll = lodash.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__default.useEffect(function () {
    if (!disabled && state !== "loading") {
      setDocked(false);
    }
  }, [disabled, state, setDocked]);
  React__default.useEffect(function () {
    return function () {
      return setDocked(true);
    };
  }, [setDocked]);
  var scrolledToBottom = scrollPosition.y + window.innerHeight >= document.body.scrollHeight;

  if (!anchor.current) {
    return null;
  }

  return React__default.createElement(Portal, {
    container: anchor.current
  }, React__default.createElement("div", Object.assign({
    className: classes.root
  }, rest), React__default.createElement(Container, {
    maxWidth: "lg"
  }, React__default.createElement(Card, {
    className: classes.paper,
    elevation: !(docked || scrolledToBottom) ? 16 : 0
  }, React__default.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__default.useState(false),
      displayCompletedActionState = _React$useState[0],
      setDisplayCompletedActionState = _React$useState[1];

  var timeout = React__default.useRef();
  React__default.useEffect(function () {
    if (!noTransition && transitionState === "loading") {
      setDisplayCompletedActionState(true);
    }
  }, [transitionState, noTransition]);
  React__default.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__default.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__default.createElement(CircularProgress, {
    size: 24,
    color: "inherit",
    className: clsx((_clsx2 = {}, _clsx2[classes.progress] = true, _clsx2[classes.invisible] = transitionState !== "loading", _clsx2))
  }), React__default.createElement(CheckIcon, {
    className: clsx((_clsx3 = {}, _clsx3[classes.icon] = true, _clsx3[classes.invisible] = !(transitionState === "success" && isCompleted), _clsx3))
  }), React__default.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__default.createElement(Tooltip$1, {
      title: tooltip,
      placement: "top"
    }, React__default.createElement("span", null, children));
  }

  return React__default.createElement(React__default.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__default.createElement(ActionBar, {
    state: state,
    disabled: disabled
  }, !!onDelete && React__default.createElement(ButtonTooltipDecorator, {
    tooltip: tooltips == null ? void 0 : tooltips["delete"]
  }, React__default.createElement(Button, {
    variant: "contained",
    onClick: onDelete,
    className: classes.deleteButton,
    "data-test": "button-bar-delete"
  }, labels["delete"])), React__default.createElement("div", {
    className: classes.spacer
  }), React__default.createElement(ButtonTooltipDecorator, {
    tooltip: tooltips == null ? void 0 : tooltips.cancel
  }, React__default.createElement(Button, {
    className: classes.cancelButton,
    variant: "text",
    onClick: onCancel,
    "data-test": "button-bar-cancel"
  }, labels.cancel)), React__default.createElement(ButtonTooltipDecorator, {
    tooltip: tooltips == null ? void 0 : tooltips.confirm
  }, React__default.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__default.createElement(Portal, {
    container: anchor.current
  }, React__default.createElement("div", {
    className: classes.root,
    onClick: onClick,
    "data-test-id": "app-header-back-button"
  }, React__default.createElement(ArrowBackIcon, {
    className: classes.backArrow
  }), children ? React__default.createElement(Typography, {
    className: classes.title
  }, children) : React__default.createElement(Skeleton, {
    className: classes.skeleton
  })));
};
Backlink.displayName = "Backlink";

var Logo = function Logo() {
  return React__default.createElement("svg", {
    version: "1.0",
    xmlns: "http://www.w3.org/2000/svg",
    width: "36.000000pt",
    height: "33.000000pt",
    viewBox: "0 0 36.000000 33.000000",
    preserveAspectRatio: "xMidYMid meet"
  }, React__default.createElement("metadata", null, "Created by potrace 1.16, written by Peter Selinger 2001-2019"), React__default.createElement("g", {
    transform: "translate(0.000000,33.000000) scale(0.006545,-0.006089)",
    fill: "#000000",
    stroke: "none"
  }, React__default.createElement("path", {
    d: "M1315 5409 c-528 -72 -976 -409 -1186 -892 -139 -316 -152 -587 -63\n-1287 156 -1236 519 -2164 1077 -2757 253 -267 511 -410 827 -458 270 -41 526\n2 795 134 400 197 858 499 1240 817 162 134 519 491 647 644 256 309 446 598\n613 932 175 351 226 527 226 773 1 394 -160 726 -475 979 -567 456 -1405 797\n-2436 990 -537 101 -1064 153 -1265 125z m2261 -1423 c168 -78 167 -309 -1\n-399 l-40 -22 -1002 -3 -1003 -2 0 225 0 225 998 0 997 0 51 -24z m-386 -975\nc129 -39 206 -85 305 -185 139 -140 193 -260 202 -451 6 -132 -10 -220 -60\n-327 -68 -146 -179 -261 -320 -330 -152 -76 -101 -72 -989 -75 l-798 -4 0 211\n0 210 754 0 c549 0 762 3 787 12 58 20 107 58 141 111 65 102 46 251 -43 332\n-83 74 -27 70 -876 73 l-763 3 0 225 0 225 793 -3 c790 -4 792 -4 867 -27z"
  })));
};
Logo.displayName = "Logo";

var LogoLight = function LogoLight(props) {
  return React__default.createElement("svg", Object.assign({
    width: "36",
    height: "33",
    viewBox: "0 0 36 33",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, props), React__default.createElement("path", {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M19.7838 0L13.4043 6.64709H29.1638L35.5433 0H19.7838Z",
    fill: "#8AC4EB"
  }), React__default.createElement("path", {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M6.59759 2.13062C6.4332 2.13062 6.27552 2.1958 6.15911 2.31187L0.182532 8.27133C0.00456112 8.44879 -0.0488948 8.71603 0.0471181 8.94829C0.143131 9.18056 0.369679 9.33205 0.621008 9.33205H21.3482C21.5126 9.33205 21.6703 9.26687 21.7867 9.1508L27.7632 3.19134C27.9412 3.01388 27.9947 2.74664 27.8987 2.51437C27.8026 2.28211 27.5761 2.13062 27.3248 2.13062H6.59759ZM2.12325 8.09007L6.85429 3.37259H25.8225L21.0915 8.09007H2.12325ZM23.9789 27.3629C23.9789 30.6214 22.4977 33 16.6072 33C11.4908 33 9.43754 31.599 9 28.1124L13.6451 27.4281C13.9144 29.1551 14.5539 29.5135 16.6745 29.5135C18.5933 29.5135 19.2328 29.0573 19.2328 28.0146C19.2328 26.7437 18.492 26.418 16.5735 26.0594C16.4207 26.0337 16.2653 26.0082 16.1079 25.9823C13.0752 25.4835 9.30464 24.8634 9.33654 20.6504C9.33654 17.2293 11.2216 15.0787 16.5735 15.0787C21.4542 15.0787 23.3055 16.7404 23.7097 20.0314L18.9298 20.7482C18.7614 19.2168 18.2566 18.6954 16.4389 18.6954C14.9577 18.6954 14.0489 19.0867 14.0489 20.1292C14.0489 21.5304 15.0924 21.7258 17.3814 22.1167C20.3772 22.6056 23.9789 23.3549 23.9789 27.3629Z",
    fill: "#FAFAFA"
  }));
};
LogoLight.displayName = "LogoLight";

var useStyles$5 = /*#__PURE__*/makeStyles(function (theme) {
  return {
    root: {
      "&:hover, &:focus": {
        background: "#daedeb"
      },