@scrabble-solver/scrabble-solver 2.6.0 → 2.7.1

package/.next/server/pages/index.js

@@ -365,7 +365,8 @@ module.exports = {
 	"fr": "LocaleSetting_fr__25G9k",
 	"gb": "LocaleSetting_gb__qVZSX",
 	"pl": "LocaleSetting_pl__YUmDs",
-	"us": "LocaleSetting_us__30qoJ"
+	"us": "LocaleSetting_us__30qoJ",
+	"de": "LocaleSetting_de__J0Tpb"
 };
 
 
@@ -384,7 +385,6 @@ module.exports = JSON.parse("{\"cell.set-blank\":\"Mark it a blank\",\"cell.set-
 // Exports
 module.exports = {
 	"squareButton": "SquareButton_squareButton__3XZzH",
-	"label": "SquareButton_label__2lvIX",
 	"content": "SquareButton_content__2e8pD",
 	"icon": "SquareButton_icon__2HxOh"
 };
@@ -785,7 +785,7 @@ const dictionarySlice = Object(toolkit_["createSlice"])({
 // CONCATENATED MODULE: ./src/state/slices/rackInitialState.ts
 const rackInitialState = [null, null, null, null, null, null, null];
 /* harmony default export */ var slices_rackInitialState = (rackInitialState);
-// EXTERNAL MODULE: ./src/lib/index.ts + 26 modules
+// EXTERNAL MODULE: ./src/lib/index.ts + 27 modules
 var lib = __webpack_require__("psLn");
 
 // CONCATENATED MODULE: ./src/state/slices/rackSlice.ts
@@ -814,7 +814,7 @@ const rackSlice = Object(toolkit_["createSlice"])({
         return state;
       }
 
-      const nullMovingComparator = Object(lib["d" /* createNullMovingComparator */])(Object(lib["k" /* inverseDirection */])(direction));
+      const nullMovingComparator = Object(lib["e" /* createNullMovingComparator */])(Object(lib["l" /* inverseDirection */])(direction));
       const sortedTiles = [...state].sort(nullMovingComparator);
       return sortedTiles;
     },
@@ -824,7 +824,7 @@ const rackSlice = Object(toolkit_["createSlice"])({
     },
     removeTiles: (state, action) => {
       const tilesToRemove = action.payload;
-      const charactersAndTiles = Object(lib["q" /* zipCharactersAndTiles */])(state, tilesToRemove);
+      const charactersAndTiles = Object(lib["s" /* zipCharactersAndTiles */])(state, tilesToRemove);
       const charactersWithoutMatchingTiles = charactersAndTiles.map(({
         character,
         tile
@@ -1061,6 +1061,9 @@ const visit = () => {
 
 
 
+// EXTERNAL MODULE: ./src/i18n/de.json
+var de = __webpack_require__("JQii");
+
 // EXTERNAL MODULE: ./src/i18n/en.json
 var en = __webpack_require__("4Ign");
 
@@ -1079,7 +1082,9 @@ var pl = __webpack_require__("uJCx");
 
 
 
+
 const i18n = {
+  [types_["Locale"].DE_DE]: de,
   [types_["Locale"].EN_GB]: en,
   [types_["Locale"].EN_US]: en,
   [types_["Locale"].ES_ES]: es,
@@ -1121,7 +1126,7 @@ const selectResults = Object(toolkit_["createSelector"])([selectResultsRoot], re
 const selectResultsQuery = Object(toolkit_["createSelector"])([selectResultsRoot], results => results.query);
 const selectResultsSortColumn = Object(toolkit_["createSelector"])([selectResultsRoot], results => results.sort.column);
 const selectResultsSortDirection = Object(toolkit_["createSelector"])([selectResultsRoot], results => results.sort.direction);
-const selectSortedResults = Object(toolkit_["createSelector"])([selectResults, selectResultsSortColumn, selectResultsSortDirection], lib["o" /* sortResults */]);
+const selectSortedResults = Object(toolkit_["createSelector"])([selectResults, selectResultsSortColumn, selectResultsSortDirection], lib["q" /* sortResults */]);
 const selectSortedFilteredResults = Object(toolkit_["createSelector"])([selectSortedResults, selectResultsQuery], (results, query) => {
   if (!results || query.trim().length === 0) {
     return results;
@@ -1136,7 +1141,7 @@ const selectResultCandidate = Object(toolkit_["createSelector"])([selectResultsR
 const selectResultCandidateCells = Object(toolkit_["createSelector"])([selectResultCandidate], resultCandidate => (resultCandidate === null || resultCandidate === void 0 ? void 0 : resultCandidate.cells) || []);
 const selectResultCandidateTiles = Object(toolkit_["createSelector"])([selectResultCandidate], resultCandidate => (resultCandidate === null || resultCandidate === void 0 ? void 0 : resultCandidate.tiles) || []);
 const selectRowsWithCandidate = Object(toolkit_["createSelector"])([selectBoardRoot, selectResultCandidateCells], (board, cells) => {
-  return board.rows.map((row, y) => row.map((cell, x) => Object(lib["f" /* findCell */])(cells, x, y) || cell));
+  return board.rows.map((row, y) => row.map((cell, x) => Object(lib["g" /* findCell */])(cells, x, y) || cell));
 });
 const selectCellBonus = Object(toolkit_["createSelector"])([selectConfig, selectCell], (config, cell) => {
   return config.getCellBonus(cell);
@@ -1162,18 +1167,18 @@ const selectCharacters = Object(toolkit_["createSelector"])(selectRackRoot, rack
 const selectLastSolvedParameters = Object(toolkit_["createSelector"])([selectSolveRoot], solve => solve.lastSolvedParameters);
 const selectIsLoading = Object(toolkit_["createSelector"])([selectSolveRoot], solve => solve.isLoading);
 const selectHaveCharactersChanged = Object(toolkit_["createSelector"])([selectLastSolvedParameters, selectCharacters], (lastSolvedParameters, characters) => {
-  return !Object(lib["p" /* unorderedArraysEqual */])(lastSolvedParameters.characters, characters);
+  return !Object(lib["r" /* unorderedArraysEqual */])(lastSolvedParameters.characters, characters);
 });
 const selectHasBoardChanged = Object(toolkit_["createSelector"])([selectLastSolvedParameters, selectBoardRoot], (lastSolvedParameters, board) => !lastSolvedParameters.board.equals(board));
 const selectAreResultsOutdated = Object(toolkit_["createSelector"])([selectHasBoardChanged, selectHaveCharactersChanged], (hasBoardChanged, haveCharactersChanged) => hasBoardChanged || haveCharactersChanged);
-const selectRemainingTiles = Object(toolkit_["createSelector"])([selectConfig, selectBoardRoot, selectCharacters], lib["h" /* getRemainingTiles */]);
+const selectRemainingTiles = Object(toolkit_["createSelector"])([selectConfig, selectBoardRoot, selectCharacters], lib["i" /* getRemainingTiles */]);
 const selectHasOverusedTiles = Object(toolkit_["createSelector"])([selectRemainingTiles], remainingTiles => {
   return remainingTiles.some(({
     count,
     usedCount
   }) => usedCount > count);
 });
-const selectRemainingTilesGroups = Object(toolkit_["createSelector"])([selectRemainingTiles], lib["i" /* getRemainingTilesGroups */]);
+const selectRemainingTilesGroups = Object(toolkit_["createSelector"])([selectRemainingTiles], lib["j" /* getRemainingTilesGroups */]);
 // CONCATENATED MODULE: ./src/state/sagas.ts
 
 
@@ -1183,7 +1188,7 @@ const selectRemainingTilesGroups = Object(toolkit_["createSelector"])([selectRem
 
 
 const SUBMIT_DELAY = 150;
-const memoizedFindWordDefinition = Object(lib["n" /* memoize */])(sdk_findWordDefinition);
+const memoizedFindWordDefinition = Object(lib["o" /* memoize */])(sdk_findWordDefinition);
 function* rootSaga() {
   yield Object(effects_["takeEvery"])(slices_resultsSlice.actions.applyResult.type, onApplyResult);
   yield Object(effects_["takeEvery"])(slices_resultsSlice.actions.changeResultCandidate.type, onResultCandidateChange);
@@ -1460,6 +1465,13 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ "CQjl":
+/***/ (function(module, exports) {
+
+module.exports = require("react-portal");
+
 /***/ }),
 
 /***/ "CjmZ":
@@ -1571,6 +1583,13 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ "JQii":
+/***/ (function(module) {
+
+module.exports = JSON.parse("{\"cell.set-blank\":\"Als Blanko markieren\",\"cell.set-not-blank\":\"Nicht als Blanko markieren\",\"cell.toggle-direction\":\"Schreibrichtung - klicken zum Wechseln\",\"common.blanks\":\"Blankos\",\"common.clear\":\"Löschen\",\"common.close\":\"Schließen\",\"common.consonants\":\"Konsonanten\",\"common.loading\":\"Laden\",\"common.points\":\"Punkte\",\"common.tiles\":\"Steine\",\"common.two-letter-tiles\":\"Zwei-Buchstaben\",\"common.vowels\":\"Vokale\",\"common.word\":\"Wort\",\"common.words\":\"Wörter\",\"dictionary.empty-state.no-definitions\":\"Wort existiert im Wörterbuch aber hat keine Definition.\",\"dictionary.empty-state.no-results\":\"Wort kann nicht im Wörterbuch gefunden werden.\",\"dictionary.empty-state.not-allowed\":\"Dieses Wort ist nicht erlaubt.\",\"dictionary.empty-state.uninitialized\":\"Die Wörterbuchdefinition des letzten markierten Wortes wird hier angezeigt.\",\"dictionary.input.placeholder\":\"Durchsuche Wörterbuch...\",\"empty-state.error\":\"Fehler\",\"empty-state.info\":\"Info\",\"empty-state.success\":\"Juhuu!\",\"empty-state.warning\":\"Oje!\",\"github\":\"Schau dieses Projekt auf GitHub an\",\"keyMap\":\"Tastaturkürzel\",\"keyMap.board\":\"Brett\",\"keyMap.board.toggle-blank\":\"Als Blanko markieren / aufheben\",\"keyMap.board.toggle-direction\":\"Schreibrichtung umschalten\",\"keyMap.board-and-rack\":\"Brett & Ablage\",\"keyMap.board-and-rack.insert-two-letter-tile\":\"Zwei-Buchstaben Stein hinzufügen\",\"keyMap.board-and-rack.navigate\":\"Navigieren\",\"keyMap.board-and-rack.remove-tile\":\"Stein entfernen\",\"keyMap.board-and-rack.submit\":\"Lösen starten\",\"keyMap.rack\":\"Ablage\",\"keyMap.rack.insert-blank\":\"Blanko hinzufügen (Leertaste)\",\"rack.placeholder\":\"Steine…\",\"remaining-tiles\":\"Restliche Steine\",\"results.empty-state.no-filtered-results\":\"Keine Ergebnisse für diese Anfrage.\",\"results.empty-state.no-results\":\"Keine Ergebnisse - kein Wort konnte generiert werden.\",\"results.empty-state.outdated\":\"Ergebnisse sind alt. Klicken zum Aktualisieren.\",\"results.empty-state.uninitialized\":\"Wörter die aus deinen Buchstaben generiert wurden erscheinen hier.\",\"results.input.placeholder\":\"Suchergebnisse... (RegExp)\",\"results.solve\":\"Lösen\",\"settings\":\"Einstellungen\",\"settings.autoGroupTiles\":\"Restliche Steine gruppieren\",\"settings.autoGroupTiles.left\":\"Linke Seite\",\"settings.autoGroupTiles.right\":\"Rechte Seite\",\"settings.autoGroupTiles.null\":\"Nicht gruppieren\",\"settings.game\":\"Spiel\",\"settings.language\":\"Sprache\"}");
+
 /***/ }),
 
 /***/ "Jsr2":
@@ -1627,7 +1646,8 @@ module.exports = {
 	"resultsContainer": "index_resultsContainer__1EJmC",
 	"rackContainer": "index_rackContainer__1ud2t",
 	"rack": "index_rack__11KOR",
-	"submitInput": "index_submitInput__uKoKN"
+	"submitInput": "index_submitInput__uKoKN",
+	"version": "index_version__dm03L"
 };
 
 
@@ -1911,10 +1931,9 @@ __webpack_require__.d(__webpack_exports__, "i", function() { return /* reexport
 __webpack_require__.d(__webpack_exports__, "j", function() { return /* reexport */ Results_Results; });
 __webpack_require__.d(__webpack_exports__, "k", function() { return /* reexport */ Settings_Settings; });
 __webpack_require__.d(__webpack_exports__, "l", function() { return /* reexport */ Splash_Splash; });
-__webpack_require__.d(__webpack_exports__, "m", function() { return /* reexport */ SvgIcon_SvgIcon; });
-__webpack_require__.d(__webpack_exports__, "n", function() { return /* reexport */ Well_Well; });
+__webpack_require__.d(__webpack_exports__, "m", function() { return /* reexport */ Well_Well; });
 
-// UNUSED EXPORTS: Button, Checkbox, EmptyState, Key, Loading, PlainTiles, Radio, ResultsInput, Screen, Sidebar, SquareButton, Tile
+// UNUSED EXPORTS: Button, Checkbox, EmptyState, Key, Loading, PlainTiles, Radio, ResultsInput, Screen, Sidebar, SquareButton, SvgIcon, Tile, useTooltip
 
 // EXTERNAL MODULE: external "react/jsx-runtime"
 var jsx_runtime_ = __webpack_require__("F5FC");
@@ -1939,7 +1958,7 @@ var constants_ = __webpack_require__("h+wf");
 // EXTERNAL MODULE: external "react-redux"
 var external_react_redux_ = __webpack_require__("h74D");
 
-// EXTERNAL MODULE: ./src/lib/index.ts + 26 modules
+// EXTERNAL MODULE: ./src/lib/index.ts + 27 modules
 var lib = __webpack_require__("psLn");
 
 // EXTERNAL MODULE: ./node_modules/svg-baker-runtime/symbol.js
@@ -2115,6 +2134,17 @@ var flagUs_symbol = new symbol_default.a({
 });
 var flagUs_result = sprite_build_default.a.add(flagUs_symbol);
 /* harmony default export */ var flagUs = (flagUs_symbol);
+// CONCATENATED MODULE: ./src/icons/flagDe.svg
+
+
+var flagDe_symbol = new symbol_default.a({
+  "id": "flagDe",
+  "use": "flagDe-usage",
+  "viewBox": "0 0 20 12",
+  "content": "<symbol viewBox=\"0 0 20 12\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flagDe\">\n    <rect width=\"20\" height=\"4\" fill=\"#000\" />\n    <rect width=\"20\" height=\"4\" fill=\"#f00\" y=\"4\" />\n    <rect width=\"20\" height=\"4\" fill=\"#fc0\" y=\"8\" />\n</symbol>"
+});
+var flagDe_result = sprite_build_default.a.add(flagDe_symbol);
+/* harmony default export */ var flagDe = (flagDe_symbol);
 // CONCATENATED MODULE: ./src/icons/github.svg
 
 
@@ -2201,6 +2231,7 @@ var sortUp_result = sprite_build_default.a.add(sortUp_symbol);
 
 
 
+
 
 
 // CONCATENATED MODULE: ./src/components/SvgIcon/SvgIcon.tsx
@@ -2329,7 +2360,7 @@ const Tile = ({
     pointsFontSize,
     tileFontSize,
     tileSize
-  } = Object(lib["j" /* getTileSizes */])(size);
+  } = Object(lib["k" /* getTileSizes */])(size);
   const style = Object(external_react_["useMemo"])(() => ({
     height: tileSize,
     width: tileSize
@@ -2372,6 +2403,159 @@ const Tile = ({
 /* harmony default export */ var Tile_Tile = (Tile);
 // CONCATENATED MODULE: ./src/components/Tile/index.ts
 
+// EXTERNAL MODULE: external "react-popper"
+var external_react_popper_ = __webpack_require__("pYII");
+
+// EXTERNAL MODULE: external "react-use"
+var external_react_use_ = __webpack_require__("zKz7");
+
+// EXTERNAL MODULE: ./src/hooks/index.ts + 9 modules
+var hooks = __webpack_require__("eZYV");
+
+// EXTERNAL MODULE: ./src/components/Tooltip/Tooltip.module.scss
+var Tooltip_module = __webpack_require__("bQD4");
+var Tooltip_module_default = /*#__PURE__*/__webpack_require__.n(Tooltip_module);
+
+// CONCATENATED MODULE: ./src/components/Tooltip/constants.ts
+
+const ARROW_SIZE = parseInt(Tooltip_module_default.a.ARROW_SIZE, 10);
+const OFFSET = parseInt(Tooltip_module_default.a.OFFSET, 10);
+const PREVENT_OVERFLOW = parseInt(Tooltip_module_default.a.PREVENT_OVERFLOW, 10);
+const MODIFIERS = [{
+  name: 'preventOverflow',
+  options: {
+    padding: PREVENT_OVERFLOW,
+    rootBoundary: 'document'
+  }
+}, {
+  name: 'flip',
+  options: {
+    padding: ARROW_SIZE,
+    rootBoundary: 'document'
+  }
+}, {
+  name: 'offset',
+  options: {
+    offset: [0, OFFSET + ARROW_SIZE]
+  }
+}];
+// CONCATENATED MODULE: ./src/components/Tooltip/useTooltip.tsx
+
+
+
+function useTooltip_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function useTooltip_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { useTooltip_ownKeys(Object(source), true).forEach(function (key) { useTooltip_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { useTooltip_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function useTooltip_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+
+
+
+
+
+
+
+
+const useTooltip = (tooltip, {
+  className,
+  placement = 'top',
+  onBlur = lib["p" /* noop */],
+  onFocus = lib["p" /* noop */],
+  onMouseOut = lib["p" /* noop */],
+  onMouseOver = lib["p" /* noop */]
+} = {}) => {
+  const id = Object(hooks["d" /* useUniqueId */])();
+  const isEnabled = Boolean(tooltip) || tooltip === 0;
+  const isMounted = Object(external_react_use_["useMountedState"])();
+  const {
+    0: isShown,
+    1: setIsShown
+  } = Object(external_react_["useState"])(false);
+  const {
+    0: referenceElement,
+    1: setReferenceElement
+  } = Object(external_react_["useState"])(null);
+  const {
+    0: popperElement,
+    1: setPopperElement
+  } = Object(external_react_["useState"])(null);
+  const {
+    0: arrowElement,
+    1: setArrowElement
+  } = Object(external_react_["useState"])(null);
+  const {
+    attributes,
+    styles: popperStyles,
+    update
+  } = Object(external_react_popper_["usePopper"])(referenceElement, popperElement, {
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }, ...MODIFIERS],
+    placement
+  });
+  const computedPlacement = attributes.popper ? attributes.popper['data-popper-placement'] : placement;
+  const ariaAttributes = Object(external_react_["useMemo"])(() => isShown ? {
+    'aria-describedby': id
+  } : {}, [id, isShown]);
+  const handleBlur = Object(external_react_["useCallback"])(event => {
+    onBlur(event);
+    setIsShown(false);
+  }, [onBlur]);
+  const handleFocus = Object(external_react_["useCallback"])(event => {
+    onFocus(event);
+    setIsShown(true);
+  }, [onFocus]);
+  const handleMouseOut = Object(external_react_["useCallback"])(event => {
+    onMouseOut(event);
+    setIsShown(false);
+  }, [onMouseOut]);
+  const handleMouseOver = Object(external_react_["useCallback"])(event => {
+    onMouseOver(event);
+    setIsShown(true);
+  }, [onMouseOver]);
+  const triggerProps = Object(external_react_["useMemo"])(() => useTooltip_objectSpread(useTooltip_objectSpread({}, ariaAttributes), {}, {
+    ref: setReferenceElement,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onMouseOut: handleMouseOut,
+    onMouseOver: handleMouseOver
+  }), [ariaAttributes, handleBlur, handleFocus, handleMouseOut, handleMouseOver]);
+  Object(external_react_use_["useRafLoop"])(() => {
+    if (isMounted() && update) {
+      update();
+    }
+  });
+  Object(hooks["c" /* usePortal */])( /*#__PURE__*/Object(jsx_runtime_["jsxs"])("div", useTooltip_objectSpread(useTooltip_objectSpread({
+    className: external_classnames_default()(Tooltip_module_default.a.tooltip, className, {
+      [Tooltip_module_default.a.top]: computedPlacement === 'top',
+      [Tooltip_module_default.a.right]: computedPlacement === 'right',
+      [Tooltip_module_default.a.bottom]: computedPlacement === 'bottom',
+      [Tooltip_module_default.a.left]: computedPlacement === 'left'
+    }),
+    ref: setPopperElement,
+    style: popperStyles.popper
+  }, attributes.popper), {}, {
+    children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
+      children: tooltip
+    }), /*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
+      className: Tooltip_module_default.a.arrow,
+      ref: setArrowElement,
+      style: popperStyles.arrow
+    })]
+  })), {
+    disabled: !isEnabled || !isShown
+  });
+  return triggerProps;
+};
+
+/* harmony default export */ var Tooltip_useTooltip = (useTooltip);
+// CONCATENATED MODULE: ./src/components/Tooltip/index.ts
+
 // EXTERNAL MODULE: ./src/components/Board/components/Cell/Cell.module.scss
 var Cell_module = __webpack_require__("CjmZ");
 var Cell_module_default = /*#__PURE__*/__webpack_require__.n(Cell_module);
@@ -2393,20 +2577,23 @@ function Button_objectWithoutPropertiesLoose(source, excluded) { if (source == n
 
 
 
+
 const Button = (_ref) => {
   let {
     children,
-    className
+    className,
+    tooltip
   } = _ref,
-      props = Button_objectWithoutProperties(_ref, ["children", "className"]);
+      props = Button_objectWithoutProperties(_ref, ["children", "className", "tooltip"]);
 
-  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("button", Button_objectSpread(Button_objectSpread({
+  const triggerProps = Tooltip_useTooltip(tooltip, props);
+  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("button", Button_objectSpread(Button_objectSpread(Button_objectSpread({
     className: external_classnames_default()(Cell_module_default.a.action, className) // It's fine to make it not focusable with TAB from a11y point of view
     // because alternative key combos are provided.
     ,
     tabIndex: -1,
     type: "button"
-  }, props), {}, {
+  }, props), triggerProps), {}, {
     children: children
   }));
 };
@@ -2506,7 +2693,7 @@ const CellPure = ({
   }), /*#__PURE__*/Object(jsx_runtime_["jsxs"])("div", {
     className: Cell_module_default.a.actions,
     children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(Cell_Button, {
-      title: translate('cell.toggle-direction'),
+      tooltip: translate('cell.toggle-direction'),
       onClick: onDirectionToggleClick,
       children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(SvgIcon_SvgIcon, {
         className: external_classnames_default()(Cell_module_default.a.toggleDirection, {
@@ -2518,7 +2705,7 @@ const CellPure = ({
       className: external_classnames_default()(Cell_module_default.a.blank, {
         [Cell_module_default.a.active]: tile.isBlank
       }),
-      title: tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank'),
+      tooltip: tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank'),
       onClick: onToggleBlankClick,
       children: "B"
     })]
@@ -2555,7 +2742,7 @@ const Cell = ({
   const points = Object(src_state["G" /* useTypedSelector */])(state => Object(src_state["C" /* selectTilePoints */])(state, cell.tile));
   const {
     tileFontSize
-  } = Object(lib["j" /* getTileSizes */])(size);
+  } = Object(lib["k" /* getTileSizes */])(size);
   const isEmpty = tile.character === constants_["EMPTY_CELL"];
   const style = Object(external_react_["useMemo"])(() => ({
     fontSize: tileFontSize
@@ -2637,9 +2824,6 @@ const BoardPure = ({
 });
 
 /* harmony default export */ var Board_BoardPure = (/*#__PURE__*/Object(external_react_["memo"])(BoardPure));
-// EXTERNAL MODULE: external "react-use"
-var external_react_use_ = __webpack_require__("zKz7");
-
 // CONCATENATED MODULE: ./src/components/Board/lib/getPositionInGrid.ts
 const getPositionInGrid = (grid, constraint) => {
   for (let y = 0; y < grid.length; ++y) {
@@ -2679,7 +2863,7 @@ const useGrid = rows => {
   const width = rows[0].length;
   const dispatch = Object(external_react_redux_["useDispatch"])();
   const config = Object(src_state["G" /* useTypedSelector */])(src_state["n" /* selectConfig */]);
-  const refs = Object(external_react_["useMemo"])(() => Object(lib["b" /* createGridOf */])(width, height, () => /*#__PURE__*/Object(external_react_["createRef"])()), [width, height]);
+  const refs = Object(external_react_["useMemo"])(() => Object(lib["c" /* createGridOf */])(width, height, () => /*#__PURE__*/Object(external_react_["createRef"])()), [width, height]);
   const activeIndexRef = Object(external_react_["useRef"])({
     x: 0,
     y: 0
@@ -2724,30 +2908,30 @@ const useGrid = rows => {
     }
   }, [changeActiveIndex, lastDirectionRef]);
   const onKeyDown = Object(external_react_["useMemo"])(() => {
-    return Object(lib["c" /* createKeyboardNavigation */])({
+    return Object(lib["d" /* createKeyboardNavigation */])({
       onArrowDown: event => {
-        if (Object(lib["l" /* isCtrl */])(event)) {
+        if (Object(lib["m" /* isCtrl */])(event)) {
           onDirectionToggle();
         } else {
           changeActiveIndex(0, 1);
         }
       },
       onArrowLeft: event => {
-        if (Object(lib["l" /* isCtrl */])(event)) {
+        if (Object(lib["m" /* isCtrl */])(event)) {
           onDirectionToggle();
         } else {
           changeActiveIndex(-1, 0);
         }
       },
       onArrowRight: event => {
-        if (Object(lib["l" /* isCtrl */])(event)) {
+        if (Object(lib["m" /* isCtrl */])(event)) {
           onDirectionToggle();
         } else {
           changeActiveIndex(1, 0);
         }
       },
       onArrowUp: event => {
-        if (Object(lib["l" /* isCtrl */])(event)) {
+        if (Object(lib["m" /* isCtrl */])(event)) {
           onDirectionToggle();
         } else {
           changeActiveIndex(0, -1);
@@ -2789,7 +2973,7 @@ const useGrid = rows => {
           y
         } = position;
         const character = event.key.toLowerCase();
-        const isTogglingBlank = Object(lib["l" /* isCtrl */])(event) && character === 'b';
+        const isTogglingBlank = Object(lib["m" /* isCtrl */])(event) && character === 'b';
         const twoCharacterTile = config.getTwoCharacterTileByPrefix(character);
 
         if (isTogglingBlank) {
@@ -2797,7 +2981,7 @@ const useGrid = rows => {
           return;
         }
 
-        if (Object(lib["l" /* isCtrl */])(event) && twoCharacterTile) {
+        if (Object(lib["m" /* isCtrl */])(event) && twoCharacterTile) {
           event.preventDefault();
           dispatch(src_state["a" /* boardSlice */].actions.changeCellValue({
             x,
@@ -2950,68 +3134,10 @@ const Board = ({
 var Button_module = __webpack_require__("1zWx");
 var Button_module_default = /*#__PURE__*/__webpack_require__.n(Button_module);
 
-// CONCATENATED MODULE: ./src/components/Button/Content.tsx
-
-
-
-
-
-
-const Content = ({
-  children,
-  icon
-}) => /*#__PURE__*/Object(jsx_runtime_["jsxs"])("span", {
-  className: Button_module_default.a.content,
-  children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("span", {
-    className: Button_module_default.a.label,
-    children: children
-  }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(SvgIcon_SvgIcon, {
-    className: Button_module_default.a.icon,
-    icon: icon
-  })]
-});
-
-/* harmony default export */ var Button_Content = (Content);
-// CONCATENATED MODULE: ./src/components/Button/Link.tsx
-
-
-function Link_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function Link_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { Link_ownKeys(Object(source), true).forEach(function (key) { Link_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { Link_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function Link_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function Link_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Link_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function Link_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; }
-
-
-
-
-
-
-const Link = (_ref) => {
-  let {
-    children,
-    className,
-    icon
-  } = _ref,
-      props = Link_objectWithoutProperties(_ref, ["children", "className", "icon"]);
-
-  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("a", Link_objectSpread(Link_objectSpread({
-    className: external_classnames_default()(Button_module_default.a.button, className)
-  }, props), {}, {
-    children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(Button_Content, {
-      icon: icon,
-      children: children
-    })
-  }));
-};
-
-/* harmony default export */ var Button_Link = (Link);
 // CONCATENATED MODULE: ./src/components/Button/Button.tsx
 
 
+
 function Button_Button_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function Button_Button_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { Button_Button_ownKeys(Object(source), true).forEach(function (key) { Button_Button_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { Button_Button_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -3032,24 +3158,30 @@ const Button_Button = (_ref) => {
   let {
     children,
     className,
-    icon
+    icon,
+    tooltip
   } = _ref,
-      props = Button_Button_objectWithoutProperties(_ref, ["children", "className", "icon"]);
+      props = Button_Button_objectWithoutProperties(_ref, ["children", "className", "icon", "tooltip"]);
 
-  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("button", Button_Button_objectSpread(Button_Button_objectSpread({
+  const triggerProps = Tooltip_useTooltip(tooltip, props);
+  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("button", Button_Button_objectSpread(Button_Button_objectSpread(Button_Button_objectSpread({
     className: external_classnames_default()(Button_module_default.a.button, className),
     type: "button"
-  }, props), {}, {
-    children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(Button_Content, {
-      icon: icon,
-      children: children
+  }, props), triggerProps), {}, {
+    children: /*#__PURE__*/Object(jsx_runtime_["jsxs"])("span", {
+      className: Button_module_default.a.content,
+      children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("span", {
+        className: Button_module_default.a.label,
+        children: children
+      }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(SvgIcon_SvgIcon, {
+        className: Button_module_default.a.icon,
+        icon: icon
+      })]
     })
   }));
 };
 
-/* harmony default export */ var components_Button_Button = (Object.assign(Button_Button, {
-  Link: Button_Link
-}));
+/* harmony default export */ var components_Button_Button = (Button_Button);
 // CONCATENATED MODULE: ./src/components/Button/index.ts
 
 // EXTERNAL MODULE: ./src/components/Checkbox/Checkbox.module.scss
@@ -3072,14 +3204,12 @@ const Checkbox = ({
   disabled,
   id,
   name,
-  title,
   onChange
 }) => /*#__PURE__*/Object(jsx_runtime_["jsxs"])("label", {
   className: external_classnames_default()(Checkbox_module_default.a.checkbox, className, {
     [Checkbox_module_default.a.checked]: checked
   }),
   htmlFor: id,
-  title: title,
   children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("input", {
     checked: checked,
     className: Checkbox_module_default.a.input,
@@ -3532,65 +3662,49 @@ var external_react_modal_default = /*#__PURE__*/__webpack_require__.n(external_r
 var SquareButton_module = __webpack_require__("5d2k");
 var SquareButton_module_default = /*#__PURE__*/__webpack_require__.n(SquareButton_module);
 
-// CONCATENATED MODULE: ./src/components/SquareButton/Content.tsx
-
-
-
-
-
-
-const Content_Content = ({
-  children,
-  icon
-}) => /*#__PURE__*/Object(jsx_runtime_["jsxs"])("span", {
-  className: SquareButton_module_default.a.content,
-  children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(SvgIcon_SvgIcon, {
-    className: SquareButton_module_default.a.icon,
-    icon: icon
-  }), /*#__PURE__*/Object(jsx_runtime_["jsx"])("span", {
-    className: SquareButton_module_default.a.label,
-    children: children
-  })]
-});
-
-/* harmony default export */ var SquareButton_Content = (Content_Content);
 // CONCATENATED MODULE: ./src/components/SquareButton/Link.tsx
 
 
-function SquareButton_Link_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function Link_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function Link_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { Link_ownKeys(Object(source), true).forEach(function (key) { Link_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { Link_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function SquareButton_Link_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { SquareButton_Link_ownKeys(Object(source), true).forEach(function (key) { SquareButton_Link_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { SquareButton_Link_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function Link_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function SquareButton_Link_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function Link_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Link_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function SquareButton_Link_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = SquareButton_Link_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function Link_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; }
 
-function SquareButton_Link_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; }
 
 
 
 
 
 
-const Link_Link = (_ref) => {
+const Link = (_ref) => {
   let {
-    children,
     className,
-    icon
+    icon,
+    tooltip
   } = _ref,
-      props = SquareButton_Link_objectWithoutProperties(_ref, ["children", "className", "icon"]);
+      props = Link_objectWithoutProperties(_ref, ["className", "icon", "tooltip"]);
 
-  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("a", SquareButton_Link_objectSpread(SquareButton_Link_objectSpread({
-    className: external_classnames_default()(SquareButton_module_default.a.squareButton, className)
-  }, props), {}, {
-    children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(SquareButton_Content, {
-      icon: icon,
-      children: children
+  const triggerProps = Tooltip_useTooltip(tooltip, props);
+  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("a", Link_objectSpread(Link_objectSpread(Link_objectSpread({
+    className: external_classnames_default()(SquareButton_module_default.a.squareButton, className),
+    type: "button"
+  }, props), triggerProps), {}, {
+    children: /*#__PURE__*/Object(jsx_runtime_["jsx"])("span", {
+      className: SquareButton_module_default.a.content,
+      children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(SvgIcon_SvgIcon, {
+        className: SquareButton_module_default.a.icon,
+        icon: icon
+      })
     })
   }));
 };
 
-/* harmony default export */ var SquareButton_Link = (Link_Link);
+/* harmony default export */ var SquareButton_Link = (Link);
 // CONCATENATED MODULE: ./src/components/SquareButton/SquareButton.tsx
 
 
@@ -3610,21 +3724,26 @@ function SquareButton_objectWithoutPropertiesLoose(source, excluded) { if (sourc
 
 
 
+
 const SquareButton = (_ref) => {
   let {
-    children,
     className,
-    icon
+    icon,
+    tooltip
   } = _ref,
-      props = SquareButton_objectWithoutProperties(_ref, ["children", "className", "icon"]);
+      props = SquareButton_objectWithoutProperties(_ref, ["className", "icon", "tooltip"]);
 
-  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("button", SquareButton_objectSpread(SquareButton_objectSpread({
+  const triggerProps = Tooltip_useTooltip(tooltip, props);
+  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("button", SquareButton_objectSpread(SquareButton_objectSpread(SquareButton_objectSpread({
     className: external_classnames_default()(SquareButton_module_default.a.squareButton, className),
     type: "button"
-  }, props), {}, {
-    children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(SquareButton_Content, {
-      icon: icon,
-      children: children
+  }, props), triggerProps), {}, {
+    children: /*#__PURE__*/Object(jsx_runtime_["jsx"])("span", {
+      className: SquareButton_module_default.a.content,
+      children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(SvgIcon_SvgIcon, {
+        className: SquareButton_module_default.a.icon,
+        icon: icon
+      })
     })
   }));
 };
@@ -3706,14 +3825,12 @@ const Sidebar = ({
         className: Sidebar_module_default.a.header,
         children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("h1", {
           className: Sidebar_module_default.a.title,
-          title: title,
           children: title
         }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(SquareButton_SquareButton, {
           className: Sidebar_module_default.a.closeButton,
           icon: cross,
-          title: translate('common.close'),
-          onClick: onClose,
-          children: translate('common.close')
+          tooltip: translate('common.close'),
+          onClick: onClose
         })]
       }), /*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
         className: Sidebar_module_default.a.content,
@@ -3801,7 +3918,7 @@ const BACKSPACE = /*#__PURE__*/Object(jsx_runtime_["jsx"])(Key_Key, {
   children: "\u2190 Backspace"
 });
 const CTRL = /*#__PURE__*/Object(jsx_runtime_["jsx"])(Key_Key, {
-  children: Object(lib["m" /* isMac */])() ? '⌘' : 'Ctrl'
+  children: Object(lib["n" /* isMac */])() ? '⌘' : 'Ctrl'
 });
 const DEL = /*#__PURE__*/Object(jsx_runtime_["jsx"])(Key_Key, {
   children: "Del"
@@ -3930,38 +4047,33 @@ const NavButtons = ({
       icon: github,
       rel: "noopener noreferrer",
       target: "_blank",
-      title: translate('github'),
-      children: "GitHub"
+      tooltip: translate('github')
     }), /*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
       className: NavButtons_module_default.a.separator
     }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(SquareButton_SquareButton, {
       className: NavButtons_module_default.a.button,
       icon: keyboard,
-      title: translate('keyMap'),
-      onClick: onShowKeyMap,
-      children: translate('keyMap')
+      tooltip: translate('keyMap'),
+      onClick: onShowKeyMap
     }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(SquareButton_SquareButton, {
       className: external_classnames_default()(NavButtons_module_default.a.button, {
         [NavButtons_module_default.a.error]: hasOverusedTiles
       }),
       icon: sack,
-      title: translate('remaining-tiles'),
-      onClick: onShowRemainingTiles,
-      children: translate('remaining-tiles')
+      tooltip: translate('remaining-tiles'),
+      onClick: onShowRemainingTiles
     }), /*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
       className: NavButtons_module_default.a.separator
     }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(SquareButton_SquareButton, {
       className: NavButtons_module_default.a.button,
       icon: eraser,
-      title: translate('common.clear'),
-      onClick: onClear,
-      children: translate('common.clear')
+      tooltip: translate('common.clear'),
+      onClick: onClear
     }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(SquareButton_SquareButton, {
       className: NavButtons_module_default.a.button,
       icon: cog,
-      title: translate('settings'),
-      onClick: onShowSettings,
-      children: translate('settings')
+      tooltip: translate('settings'),
+      onClick: onShowSettings
     })]
   });
 };
@@ -4045,14 +4157,14 @@ const RackTile = ({
     }));
   }, [index]);
   const handleKeyDown = Object(external_react_["useMemo"])(() => {
-    return Object(lib["c" /* createKeyboardNavigation */])({
+    return Object(lib["d" /* createKeyboardNavigation */])({
       onBackspace: () => handleCharacterChange(null),
       onDelete: () => handleCharacterChange(null),
       onKeyDown: event => {
         const newCharacter = event.key.toLowerCase();
         const twoCharacterTile = config.getTwoCharacterTileByPrefix(newCharacter);
 
-        if (Object(lib["l" /* isCtrl */])(event) && twoCharacterTile) {
+        if (Object(lib["m" /* isCtrl */])(event) && twoCharacterTile) {
           event.preventDefault();
           handleCharacterChange(twoCharacterTile);
         } else if (config.hasCharacter(newCharacter) || newCharacter === constants_["BLANK"]) {
@@ -4097,9 +4209,9 @@ const Rack = ({
   const config = Object(src_state["G" /* useTypedSelector */])(src_state["n" /* selectConfig */]);
   const rack = Object(src_state["G" /* useTypedSelector */])(src_state["t" /* selectRack */]);
   const resultCandidateTiles = Object(src_state["G" /* useTypedSelector */])(src_state["v" /* selectResultCandidateTiles */]);
-  const tiles = Object(external_react_["useMemo"])(() => Object(lib["q" /* zipCharactersAndTiles */])(rack, resultCandidateTiles), [rack, resultCandidateTiles]);
+  const tiles = Object(external_react_["useMemo"])(() => Object(lib["s" /* zipCharactersAndTiles */])(rack, resultCandidateTiles), [rack, resultCandidateTiles]);
   const tilesCount = tiles.length;
-  const tilesRefs = Object(external_react_["useMemo"])(() => Object(lib["a" /* createArray */])(tilesCount).map(() => /*#__PURE__*/Object(external_react_["createRef"])()), [tilesCount]);
+  const tilesRefs = Object(external_react_["useMemo"])(() => Object(lib["b" /* createArray */])(tilesCount).map(() => /*#__PURE__*/Object(external_react_["createRef"])()), [tilesCount]);
   const activeIndexRef = Object(external_react_["useRef"])();
   const changeActiveIndex = Object(external_react_["useCallback"])(offset => {
     const nextActiveIndex = Math.min(Math.max((activeIndexRef.current || 0) + offset, 0), tilesCount - 1);
@@ -4112,7 +4224,7 @@ const Rack = ({
     activeIndexRef.current = nextActiveIndex;
   }, [activeIndexRef, tilesCount, tilesRefs]);
   const onKeyDown = Object(external_react_["useMemo"])(() => {
-    return Object(lib["c" /* createKeyboardNavigation */])({
+    return Object(lib["d" /* createKeyboardNavigation */])({
       onArrowLeft: event => {
         event.preventDefault();
         changeActiveIndex(-1);
@@ -4170,7 +4282,6 @@ const Radio = ({
   disabled,
   id,
   name,
-  title,
   value,
   onChange
 }) => /*#__PURE__*/Object(jsx_runtime_["jsxs"])("label", {
@@ -4178,7 +4289,6 @@ const Radio = ({
     [Radio_module_default.a.checked]: checked
   }),
   htmlFor: id,
-  title: title,
   children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("input", {
     checked: checked,
     className: Radio_module_default.a.input,
@@ -4343,18 +4453,10 @@ var types = __webpack_require__("6+LV");
 var Results_module = __webpack_require__("IQtc");
 var Results_module_default = /*#__PURE__*/__webpack_require__.n(Results_module);
 
-// CONCATENATED MODULE: ./src/components/Results/Header.tsx
-
-
-
+// CONCATENATED MODULE: ./src/components/Results/constants.ts
 
 
-
-
-
-
-
-const columns = [{
+const COLUMNS = [{
   className: Results_module_default.a.word,
   id: types["a" /* ResultColumn */].Word,
   translationKey: 'common.word'
@@ -4383,42 +4485,69 @@ const columns = [{
   id: types["a" /* ResultColumn */].Points,
   translationKey: 'common.points'
 }];
+// CONCATENATED MODULE: ./src/components/Results/HeaderButton.tsx
+
+
+
+function HeaderButton_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function HeaderButton_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { HeaderButton_ownKeys(Object(source), true).forEach(function (key) { HeaderButton_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { HeaderButton_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function HeaderButton_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+
+
+
+
 
-const Header = () => {
+
+
+
+
+const HeaderButton = ({
+  column
+}) => {
   const dispatch = Object(external_react_redux_["useDispatch"])();
   const translate = Object(src_state["F" /* useTranslate */])();
   const sortColumn = Object(src_state["G" /* useTypedSelector */])(src_state["x" /* selectResultsSortColumn */]);
   const sortDirection = Object(src_state["G" /* useTypedSelector */])(src_state["y" /* selectResultsSortDirection */]);
+  const triggerProps = Tooltip_useTooltip(translate(column.translationKey));
 
   const handleOrderChange = columnId => {
     dispatch(src_state["h" /* resultsSlice */].actions.sort(columnId));
   };
 
-  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
-    className: Results_module_default.a.header,
-    children: columns.map(column => /*#__PURE__*/Object(jsx_runtime_["jsx"])("button", {
-      className: external_classnames_default()(Results_module_default.a.headerButton, column.className),
-      title: translate(column.translationKey),
-      type: "button",
-      onClick: () => handleOrderChange(column.id),
-      children: /*#__PURE__*/Object(jsx_runtime_["jsxs"])("span", {
-        className: Results_module_default.a.cell,
-        children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("span", {
-          className: Results_module_default.a.headerButtonLabel,
-          children: translate(column.translationKey)
-        }), sortColumn === column.id && /*#__PURE__*/Object(jsx_runtime_["jsx"])(SvgIcon_SvgIcon, {
-          className: Results_module_default.a.sortIcon,
-          icon: sortDirection === types["b" /* SortDirection */].Ascending ? sortUp : sortDown
-        })]
-      })
-    }, column.id))
-  });
+  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("button", HeaderButton_objectSpread(HeaderButton_objectSpread({
+    className: external_classnames_default()(Results_module_default.a.headerButton, column.className),
+    type: "button",
+    onClick: () => handleOrderChange(column.id)
+  }, triggerProps), {}, {
+    children: /*#__PURE__*/Object(jsx_runtime_["jsxs"])("span", {
+      className: Results_module_default.a.cell,
+      children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("span", {
+        className: Results_module_default.a.headerButtonLabel,
+        children: translate(column.translationKey)
+      }), sortColumn === column.id && /*#__PURE__*/Object(jsx_runtime_["jsx"])(SvgIcon_SvgIcon, {
+        className: Results_module_default.a.sortIcon,
+        icon: sortDirection === types["b" /* SortDirection */].Ascending ? sortUp : sortDown
+      })]
+    })
+  }), column.id);
 };
 
-/* harmony default export */ var Results_Header = (Header);
+/* harmony default export */ var Results_HeaderButton = (HeaderButton);
 // CONCATENATED MODULE: ./src/components/Results/Cell.tsx
 
 
+function Cell_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function Cell_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { Cell_ownKeys(Object(source), true).forEach(function (key) { Cell_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { Cell_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function Cell_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+
 
 
 
@@ -4429,11 +4558,12 @@ const Results_Cell_Cell = ({
   value
 }) => {
   const translate = Object(src_state["F" /* useTranslate */])();
-  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("span", {
-    className: external_classnames_default()(Results_module_default.a.cell, className),
-    title: `${translate(translationKey)}: ${value}`,
+  const triggerProps = Tooltip_useTooltip(`${translate(translationKey)}: ${value}`);
+  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("span", Cell_objectSpread(Cell_objectSpread({
+    className: external_classnames_default()(Results_module_default.a.cell, className)
+  }, triggerProps), {}, {
     children: value
-  });
+  }));
 };
 
 /* harmony default export */ var Results_Cell = (Results_Cell_Cell);
@@ -4545,7 +4675,6 @@ const SolveButton = () => {
     className: Results_module_default.a.outdatedButton,
     disabled: isLoading || !isOutdated || !hasTiles,
     icon: play,
-    title: translate('results.solve'),
     type: "submit",
     onClick: handleRefresh,
     children: translate('results.solve')
@@ -4570,6 +4699,7 @@ const SolveButton = () => {
 
 
 
+
 const Results = ({
   height,
   width
@@ -4581,7 +4711,12 @@ const Results = ({
   const isOutdated = Object(src_state["G" /* useTypedSelector */])(src_state["i" /* selectAreResultsOutdated */]);
   return /*#__PURE__*/Object(jsx_runtime_["jsxs"])("div", {
     className: Results_module_default.a.results,
-    children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(Results_Header, {}), typeof results === 'undefined' && /*#__PURE__*/Object(jsx_runtime_["jsxs"])(EmptyState_EmptyState, {
+    children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
+      className: Results_module_default.a.header,
+      children: COLUMNS.map(column => /*#__PURE__*/Object(jsx_runtime_["jsx"])(Results_HeaderButton, {
+        column: column
+      }, column.id))
+    }), typeof results === 'undefined' && /*#__PURE__*/Object(jsx_runtime_["jsxs"])(EmptyState_EmptyState, {
       className: Results_module_default.a.emptyState,
       type: "info",
       children: [translate('results.empty-state.uninitialized'), /*#__PURE__*/Object(jsx_runtime_["jsx"])(Results_SolveButton, {})]
@@ -4629,33 +4764,19 @@ var Screen_module_default = /*#__PURE__*/__webpack_require__.n(Screen_module);
 
 
 
-
-
-
-
 const Screen = ({
   children,
   className,
   contentClassName,
-  onAnimationEnd,
-  onClose
-}) => {
-  const translate = Object(src_state["F" /* useTranslate */])();
-  return /*#__PURE__*/Object(jsx_runtime_["jsxs"])("div", {
-    className: external_classnames_default()(Screen_module_default.a.screen, className),
-    onAnimationEnd: onAnimationEnd,
-    children: [onClose && /*#__PURE__*/Object(jsx_runtime_["jsx"])(components_Button_Button, {
-      className: Screen_module_default.a.closeButton,
-      icon: cross,
-      title: translate('common.close'),
-      onClick: onClose,
-      children: translate('common.close')
-    }), /*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
-      className: external_classnames_default()(Screen_module_default.a.content, contentClassName),
-      children: children
-    })]
-  });
-};
+  onAnimationEnd
+}) => /*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
+  className: external_classnames_default()(Screen_module_default.a.screen, className),
+  onAnimationEnd: onAnimationEnd,
+  children: /*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
+    className: external_classnames_default()(Screen_module_default.a.content, contentClassName),
+    children: children
+  })
+});
 
 /* harmony default export */ var Screen_Screen = (Screen);
 // CONCATENATED MODULE: ./src/components/Screen/index.ts
@@ -4720,7 +4841,6 @@ const AutoGroupTilesSetting = ({
       disabled: disabled,
       id: "autoGroupTiles",
       name: "autoGroupTiles",
-      title: option.label,
       value: option.value,
       onChange: handleChange,
       children: /*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
@@ -4776,7 +4896,6 @@ const ConfigSetting = ({
       disabled: disabled,
       id: "configId",
       name: "configId",
-      title: option.label,
       value: option.value,
       onChange: handleChange,
       children: /*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
@@ -4813,6 +4932,11 @@ const LocaleSetting_options_options = [{
   icon: flagFr,
   label: 'Français',
   value: types_["Locale"].FR_FR
+}, {
+  className: LocaleSetting_module_default.a.de,
+  icon: flagDe,
+  label: 'Deutsch',
+  value: types_["Locale"].DE_DE
 }, {
   className: LocaleSetting_module_default.a.pl,
   icon: flagPl,
@@ -4859,7 +4983,6 @@ const LocaleSetting = ({
       disabled: disabled,
       id: "locale",
       name: "locale",
-      title: `${option.label} (${option.value})`,
       value: option.value,
       onChange: handleChange,
       children: /*#__PURE__*/Object(jsx_runtime_["jsxs"])("span", {
@@ -5024,6 +5147,7 @@ const Well = /*#__PURE__*/Object(external_react_["forwardRef"])((_ref, ref) => {
 
 
 
+
 
 
 /***/ }),
@@ -5051,347 +5175,187 @@ module.exports = require("next/dist/next-server/lib/router-context.js");
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-// ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getStaticProps", function() { return getStaticProps; });
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("F5FC");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("K2gz");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("mw/K");
+/* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(fs__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("oyvS");
+/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(path__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("cDcd");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var react_modal__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("7koQ");
+/* harmony import */ var react_modal__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_modal__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("h74D");
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("zKz7");
+/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react_use__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var components__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__("Nhdc");
+/* harmony import */ var hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__("eZYV");
+/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__("psLn");
+/* harmony import */ var parameters__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__("dm5A");
+/* harmony import */ var state__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__("8+rz");
+/* harmony import */ var _index_module_scss__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__("NLiy");
+/* harmony import */ var _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(_index_module_scss__WEBPACK_IMPORTED_MODULE_13__);
 
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "getStaticProps", function() { return /* binding */ getStaticProps; });
-
-// EXTERNAL MODULE: external "react/jsx-runtime"
-var jsx_runtime_ = __webpack_require__("F5FC");
-
-// EXTERNAL MODULE: external "classnames"
-var external_classnames_ = __webpack_require__("K2gz");
-var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
-
-// EXTERNAL MODULE: external "fs"
-var external_fs_ = __webpack_require__("mw/K");
-var external_fs_default = /*#__PURE__*/__webpack_require__.n(external_fs_);
-
-// EXTERNAL MODULE: external "path"
-var external_path_ = __webpack_require__("oyvS");
-var external_path_default = /*#__PURE__*/__webpack_require__.n(external_path_);
 
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__("cDcd");
 
-// EXTERNAL MODULE: external "react-modal"
-var external_react_modal_ = __webpack_require__("7koQ");
-var external_react_modal_default = /*#__PURE__*/__webpack_require__.n(external_react_modal_);
 
-// EXTERNAL MODULE: external "react-redux"
-var external_react_redux_ = __webpack_require__("h74D");
 
-// EXTERNAL MODULE: external "react-use"
-var external_react_use_ = __webpack_require__("zKz7");
 
-// EXTERNAL MODULE: ./src/components/index.ts + 122 modules
-var components = __webpack_require__("Nhdc");
 
-// CONCATENATED MODULE: ./src/hooks/useIsTablet.ts
 
 
-const useIsTablet = () => {
-  const isTabletHeight = Object(external_react_use_["useMedia"])('(max-height: 800px)');
-  const isTabletWidth = Object(external_react_use_["useMedia"])('(max-width: 1024px)');
-  const isTablet = isTabletHeight || isTabletWidth;
-  return isTablet;
-};
 
-/* harmony default export */ var hooks_useIsTablet = (useIsTablet);
-// EXTERNAL MODULE: ./src/state/index.ts + 26 modules
-var state = __webpack_require__("8+rz");
 
-// CONCATENATED MODULE: ./src/hooks/useLocalStorage/useLocalStorageBoard.ts
 
 
 
 
 
-const useLocalStorageBoard = () => {
-  const dispatch = Object(external_react_redux_["useDispatch"])();
-  const board = Object(state["G" /* useTypedSelector */])(state["k" /* selectBoard */]);
-  Object(external_react_use_["useEffectOnce"])(() => {
-    const persistedBoard = state["e" /* localStorage */].getBoard();
-
-    if (persistedBoard) {
-      dispatch(state["a" /* boardSlice */].actions.init(persistedBoard));
-    }
-  });
-  Object(external_react_["useEffect"])(() => {
-    if (board) {
-      state["e" /* localStorage */].setBoard(board);
-    }
-  }, [board]);
-};
-
-/* harmony default export */ var useLocalStorage_useLocalStorageBoard = (useLocalStorageBoard);
-// CONCATENATED MODULE: ./src/hooks/useLocalStorage/useLocalStorageConfigId.ts
-
-
-
-
-
-const useLocalStorageConfigId = () => {
-  const dispatch = Object(external_react_redux_["useDispatch"])();
-  const configId = Object(state["G" /* useTypedSelector */])(state["o" /* selectConfigId */]);
-  Object(external_react_use_["useEffectOnce"])(() => {
-    const persistedConfigId = state["e" /* localStorage */].getConfigId();
-
-    if (persistedConfigId) {
-      dispatch(state["D" /* settingsSlice */].actions.init({
-        configId: persistedConfigId
-      }));
-    }
-  });
-  Object(external_react_["useEffect"])(() => {
-    if (configId) {
-      state["e" /* localStorage */].setConfigId(configId);
-    }
-  }, [configId]);
-};
-
-/* harmony default export */ var useLocalStorage_useLocalStorageConfigId = (useLocalStorageConfigId);
-// EXTERNAL MODULE: ./src/lib/index.ts + 26 modules
-var lib = __webpack_require__("psLn");
-
-// CONCATENATED MODULE: ./src/hooks/useLocalStorage/useLocalStorageLocale.ts
-
-
-
-
-
-
-const useLocalStorageLocale = () => {
-  const dispatch = Object(external_react_redux_["useDispatch"])();
-  const locale = Object(state["G" /* useTypedSelector */])(state["s" /* selectLocale */]);
-  Object(external_react_use_["useEffectOnce"])(() => {
-    const persistedLocale = state["e" /* localStorage */].getLocale();
-
-    if (persistedLocale) {
-      dispatch(state["D" /* settingsSlice */].actions.init({
-        locale: persistedLocale
-      }));
-    } else {
-      dispatch(state["D" /* settingsSlice */].actions.init({
-        locale: Object(lib["e" /* detectLocale */])()
-      }));
-    }
-  });
-  Object(external_react_["useEffect"])(() => {
-    if (locale) {
-      state["e" /* localStorage */].setLocale(locale);
-    }
-  }, [locale]);
-};
-
-/* harmony default export */ var useLocalStorage_useLocalStorageLocale = (useLocalStorageLocale);
-// CONCATENATED MODULE: ./src/hooks/useLocalStorage/useLocalStorageRack.ts
-
-
-
-
-
-const useLocalStorageRack = () => {
-  const dispatch = Object(external_react_redux_["useDispatch"])();
-  const rack = Object(state["G" /* useTypedSelector */])(state["t" /* selectRack */]);
-  Object(external_react_use_["useEffectOnce"])(() => {
-    const persistedRack = state["e" /* localStorage */].getRack();
-
-    if (persistedRack) {
-      dispatch(state["f" /* rackSlice */].actions.init(persistedRack));
-    }
-  });
-  Object(external_react_["useEffect"])(() => {
-    if (rack) {
-      state["e" /* localStorage */].setRack(rack);
-    }
-  }, [rack]);
-};
-
-/* harmony default export */ var useLocalStorage_useLocalStorageRack = (useLocalStorageRack);
-// CONCATENATED MODULE: ./src/hooks/useLocalStorage/useLocalStorage.ts
-
-
-
-
-
-const useLocalStorage = () => {
-  useLocalStorage_useLocalStorageRack(); // rack has to go first, see 14869a4
-
-  useLocalStorage_useLocalStorageBoard();
-  useLocalStorage_useLocalStorageConfigId();
-  useLocalStorage_useLocalStorageLocale();
-};
-
-/* harmony default export */ var useLocalStorage_useLocalStorage = (useLocalStorage);
-// CONCATENATED MODULE: ./src/hooks/useLocalStorage/index.ts
-
-// CONCATENATED MODULE: ./src/hooks/index.ts
-
-
-// EXTERNAL MODULE: ./src/parameters/index.ts
-var parameters = __webpack_require__("dm5A");
-
-// EXTERNAL MODULE: ./src/pages/index.module.scss
-var index_module = __webpack_require__("NLiy");
-var index_module_default = /*#__PURE__*/__webpack_require__.n(index_module);
-
-// CONCATENATED MODULE: ./src/pages/index.tsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-external_react_modal_default.a.setAppElement('#__next');
+react_modal__WEBPACK_IMPORTED_MODULE_5___default.a.setAppElement('#__next');
 
 const Index = ({
   version
 }) => {
-  const dispatch = Object(external_react_redux_["useDispatch"])();
-  const isTablet = hooks_useIsTablet();
+  const dispatch = Object(react_redux__WEBPACK_IMPORTED_MODULE_6__["useDispatch"])();
+  const isTablet = Object(hooks__WEBPACK_IMPORTED_MODULE_9__[/* useIsTablet */ "a"])();
   const {
     0: showKeyMap,
     1: setShowKeyMap
-  } = Object(external_react_["useState"])(false);
+  } = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(false);
   const {
     0: showRemainingTiles,
     1: setShowRemainingTiles
-  } = Object(external_react_["useState"])(false);
+  } = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(false);
   const {
     0: showSettings,
     1: setShowSettings
-  } = Object(external_react_["useState"])(false);
+  } = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(false);
   const [boardRef, {
     height: boardHeight
-  }] = Object(external_react_use_["useMeasure"])();
+  }] = Object(react_use__WEBPACK_IMPORTED_MODULE_7__["useMeasure"])();
   const [contentRef, {
     height: contentHeight,
     width: contentWidth
-  }] = Object(external_react_use_["useMeasure"])();
+  }] = Object(react_use__WEBPACK_IMPORTED_MODULE_7__["useMeasure"])();
   const [resultsContainerRef, {
     height: resultsContainerHeight,
     width: resultsContainerWidth
-  }] = Object(external_react_use_["useMeasure"])();
-  const config = Object(state["G" /* useTypedSelector */])(state["n" /* selectConfig */]);
-  const cellSize = Object(lib["g" /* getCellSize */])(config, contentWidth - resultsContainerWidth, contentHeight);
+  }] = Object(react_use__WEBPACK_IMPORTED_MODULE_7__["useMeasure"])();
+  const config = Object(state__WEBPACK_IMPORTED_MODULE_12__[/* useTypedSelector */ "G"])(state__WEBPACK_IMPORTED_MODULE_12__[/* selectConfig */ "n"]);
+  const cellSize = Object(lib__WEBPACK_IMPORTED_MODULE_10__[/* getCellSize */ "h"])(config, contentWidth - resultsContainerWidth, contentHeight);
   const isInitialized = contentWidth > 0 && boardHeight > 0 && resultsContainerWidth > 0;
-  const resultsHeight = boardHeight - parameters["l" /* DICTIONARY_HEIGHT */] - (isTablet ? parameters["k" /* COMPONENTS_SPACING_MOBILE */] : parameters["j" /* COMPONENTS_SPACING */]);
+  const resultsHeight = boardHeight - parameters__WEBPACK_IMPORTED_MODULE_11__[/* DICTIONARY_HEIGHT */ "l"] - (isTablet ? parameters__WEBPACK_IMPORTED_MODULE_11__[/* COMPONENTS_SPACING_MOBILE */ "k"] : parameters__WEBPACK_IMPORTED_MODULE_11__[/* COMPONENTS_SPACING */ "j"]);
 
   const handleClear = () => {
-    dispatch(Object(state["g" /* reset */])());
+    dispatch(Object(state__WEBPACK_IMPORTED_MODULE_12__[/* reset */ "g"])());
   };
 
   const handleSubmit = event => {
     event.preventDefault();
-    dispatch(state["E" /* solveSlice */].actions.submit());
+    dispatch(state__WEBPACK_IMPORTED_MODULE_12__[/* solveSlice */ "E"].actions.submit());
   };
 
   const handleSplashAnimationEnd = event => {
-    if (event.target === event.currentTarget && !state["e" /* localStorage */].getHasVisited()) {
+    if (event.target === event.currentTarget && !state__WEBPACK_IMPORTED_MODULE_12__[/* localStorage */ "e"].getHasVisited()) {
       setShowSettings(true);
-      state["e" /* localStorage */].setHasVisited(true);
+      state__WEBPACK_IMPORTED_MODULE_12__[/* localStorage */ "e"].setHasVisited(true);
     }
   };
 
-  useLocalStorage_useLocalStorage();
-  Object(external_react_use_["useEffectOnce"])(() => {
-    dispatch(Object(state["d" /* initialize */])());
+  Object(hooks__WEBPACK_IMPORTED_MODULE_9__[/* useLocalStorage */ "b"])();
+  Object(react_use__WEBPACK_IMPORTED_MODULE_7__["useEffectOnce"])(() => {
+    dispatch(Object(state__WEBPACK_IMPORTED_MODULE_12__[/* initialize */ "d"])());
   });
-  return /*#__PURE__*/Object(jsx_runtime_["jsxs"])(jsx_runtime_["Fragment"], {
-    children: [/*#__PURE__*/Object(jsx_runtime_["jsxs"])("div", {
-      className: external_classnames_default()(index_module_default.a.index, {
-        [index_module_default.a.initialized]: isInitialized
+  return /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxs"])(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["Fragment"], {
+    children: [/*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxs"])("div", {
+      className: classnames__WEBPACK_IMPORTED_MODULE_1___default()(_index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.index, {
+        [_index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.initialized]: isInitialized
       }),
-      children: [/*#__PURE__*/Object(jsx_runtime_["jsxs"])("div", {
-        className: index_module_default.a.nav,
-        children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
-          className: index_module_default.a.logoContainer,
-          title: `scrabble-solver@${version}`,
-          children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(components["e" /* Logo */], {
-            className: index_module_default.a.logo
+      children: [/*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxs"])("div", {
+        className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.nav,
+        children: [/*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])("div", {
+          className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.logoContainer,
+          children: /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* Logo */ "e"], {
+            className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.logo
           })
-        }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(components["f" /* NavButtons */], {
+        }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* NavButtons */ "f"], {
           onClear: handleClear,
           onShowKeyMap: () => setShowKeyMap(true),
           onShowRemainingTiles: () => setShowRemainingTiles(true),
           onShowSettings: () => setShowSettings(true)
         })]
-      }), /*#__PURE__*/Object(jsx_runtime_["jsx"])("div", {
-        className: index_module_default.a.contentWrapper,
-        children: /*#__PURE__*/Object(jsx_runtime_["jsxs"])("div", {
-          className: index_module_default.a.content,
+      }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])("div", {
+        className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.contentWrapper,
+        children: /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxs"])("div", {
+          className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.content,
           ref: contentRef,
-          children: [/*#__PURE__*/Object(jsx_runtime_["jsxs"])("form", {
-            className: index_module_default.a.boardContainer,
+          children: [/*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxs"])("form", {
+            className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.boardContainer,
             onSubmit: handleSubmit,
-            children: [contentWidth > 0 && /*#__PURE__*/Object(jsx_runtime_["jsx"])(components["a" /* Board */], {
+            children: [contentWidth > 0 && /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* Board */ "a"], {
               cellSize: cellSize,
               innerRef: boardRef
-            }), /*#__PURE__*/Object(jsx_runtime_["jsx"])("input", {
-              className: index_module_default.a.submitInput,
+            }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])("input", {
+              className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.submitInput,
               tabIndex: -1,
               type: "submit"
             })]
-          }), /*#__PURE__*/Object(jsx_runtime_["jsxs"])("div", {
-            className: index_module_default.a.sidebar,
+          }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxs"])("div", {
+            className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.sidebar,
             style: {
               height: boardHeight + 1
             },
-            children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(components["n" /* Well */], {
-              className: index_module_default.a.resultsContainer,
+            children: [/*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* Well */ "m"], {
+              className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.resultsContainer,
               ref: resultsContainerRef,
-              children: resultsContainerWidth > 0 && resultsContainerHeight > 0 && /*#__PURE__*/Object(jsx_runtime_["jsx"])(components["j" /* Results */], {
+              children: resultsContainerWidth > 0 && resultsContainerHeight > 0 && /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* Results */ "j"], {
                 height: resultsHeight,
                 width: resultsContainerWidth
               })
-            }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(components["n" /* Well */], {
-              children: /*#__PURE__*/Object(jsx_runtime_["jsxs"])("div", {
-                className: index_module_default.a.dictionary,
+            }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* Well */ "m"], {
+              children: /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxs"])("div", {
+                className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.dictionary,
                 style: {
-                  height: parameters["l" /* DICTIONARY_HEIGHT */]
+                  height: parameters__WEBPACK_IMPORTED_MODULE_11__[/* DICTIONARY_HEIGHT */ "l"]
                 },
-                children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(components["b" /* Dictionary */], {
-                  className: index_module_default.a.dictionaryOutput
-                }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(components["c" /* DictionaryInput */], {
-                  className: index_module_default.a.dictionaryInput
+                children: [/*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* Dictionary */ "b"], {
+                  className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.dictionaryOutput
+                }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* DictionaryInput */ "c"], {
+                  className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.dictionaryInput
                 })]
               })
             })]
           })]
         })
-      }), /*#__PURE__*/Object(jsx_runtime_["jsxs"])("form", {
-        className: index_module_default.a.rackContainer,
+      }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxs"])("form", {
+        className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.rackContainer,
         onSubmit: handleSubmit,
-        children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(components["h" /* Rack */], {
-          className: index_module_default.a.rack
-        }), /*#__PURE__*/Object(jsx_runtime_["jsx"])("input", {
-          className: index_module_default.a.submitInput,
+        children: [/*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* Rack */ "h"], {
+          className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.rack
+        }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])("input", {
+          className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.submitInput,
           tabIndex: -1,
           type: "submit"
         })]
+      }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxs"])("span", {
+        className: _index_module_scss__WEBPACK_IMPORTED_MODULE_13___default.a.version,
+        children: ["v", version]
       })]
-    }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(components["k" /* Settings */], {
+    }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* Settings */ "k"], {
       isOpen: showSettings,
       onClose: () => setShowSettings(false)
-    }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(components["d" /* KeyMap */], {
+    }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* KeyMap */ "d"], {
       isOpen: showKeyMap,
       onClose: () => setShowKeyMap(false)
-    }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(components["i" /* RemainingTiles */], {
+    }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* RemainingTiles */ "i"], {
       isOpen: showRemainingTiles,
       onClose: () => setShowRemainingTiles(false)
-    }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(components["l" /* Splash */], {
+    }), /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])(components__WEBPACK_IMPORTED_MODULE_8__[/* Splash */ "l"], {
       forceShow: !isInitialized,
       onAnimationEnd: handleSplashAnimationEnd
     })]
@@ -5409,8 +5373,8 @@ const getStaticProps = async () => {
 
 const readVersion = () => {
   return new Promise((resolve, reject) => {
-    const packageJsonFilepath = external_path_default.a.resolve(process.cwd(), 'package.json');
-    external_fs_default.a.readFile(packageJsonFilepath, 'utf-8', (error, data) => {
+    const packageJsonFilepath = path__WEBPACK_IMPORTED_MODULE_3___default.a.resolve(process.cwd(), 'package.json');
+    fs__WEBPACK_IMPORTED_MODULE_2___default.a.readFile(packageJsonFilepath, 'utf-8', (error, data) => {
       if (error) {
         reject(error);
         return;
@@ -5422,7 +5386,7 @@ const readVersion = () => {
   });
 };
 
-/* harmony default export */ var pages = __webpack_exports__["default"] = (Index);
+/* harmony default export */ __webpack_exports__["default"] = (Index);
 
 /***/ }),
 
@@ -5734,6 +5698,25 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ "bQD4":
+/***/ (function(module, exports) {
+
+// Exports
+module.exports = {
+	"ARROW_SIZE": "4px",
+	"PREVENT_OVERFLOW": "10px",
+	"OFFSET": "2px",
+	"tooltip": "Tooltip_tooltip__1uxCc",
+	"top": "Tooltip_top__KFC44",
+	"arrow": "Tooltip_arrow__AL6zf",
+	"right": "Tooltip_right__swlOS",
+	"bottom": "Tooltip_bottom__12rbo",
+	"left": "Tooltip_left__2deQT"
+};
+
+
 /***/ }),
 
 /***/ "cDcd":
@@ -6063,6 +6046,228 @@ const RESULTS_HEADER_HEIGHT = 35;
 const RESULTS_ITEM_HEIGHT = 34;
 const RESULTS_INPUT_HEIGHT = 43;
 
+/***/ }),
+
+/***/ "eZYV":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "a", function() { return /* reexport */ hooks_useIsTablet; });
+__webpack_require__.d(__webpack_exports__, "b", function() { return /* reexport */ useLocalStorage_useLocalStorage; });
+__webpack_require__.d(__webpack_exports__, "c", function() { return /* reexport */ hooks_usePortal; });
+__webpack_require__.d(__webpack_exports__, "d", function() { return /* reexport */ hooks_useUniqueId; });
+
+// EXTERNAL MODULE: external "react-use"
+var external_react_use_ = __webpack_require__("zKz7");
+
+// CONCATENATED MODULE: ./src/hooks/useIsTablet.ts
+
+
+const useIsTablet = () => {
+  const isTabletHeight = Object(external_react_use_["useMedia"])('(max-height: 800px)');
+  const isTabletWidth = Object(external_react_use_["useMedia"])('(max-width: 1024px)');
+  const isTablet = isTabletHeight || isTabletWidth;
+  return isTablet;
+};
+
+/* harmony default export */ var hooks_useIsTablet = (useIsTablet);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__("cDcd");
+
+// EXTERNAL MODULE: external "react-redux"
+var external_react_redux_ = __webpack_require__("h74D");
+
+// EXTERNAL MODULE: ./src/state/index.ts + 26 modules
+var state = __webpack_require__("8+rz");
+
+// CONCATENATED MODULE: ./src/hooks/useLocalStorage/useLocalStorageBoard.ts
+
+
+
+
+
+const useLocalStorageBoard = () => {
+  const dispatch = Object(external_react_redux_["useDispatch"])();
+  const board = Object(state["G" /* useTypedSelector */])(state["k" /* selectBoard */]);
+  Object(external_react_use_["useEffectOnce"])(() => {
+    const persistedBoard = state["e" /* localStorage */].getBoard();
+
+    if (persistedBoard) {
+      dispatch(state["a" /* boardSlice */].actions.init(persistedBoard));
+    }
+  });
+  Object(external_react_["useEffect"])(() => {
+    if (board) {
+      state["e" /* localStorage */].setBoard(board);
+    }
+  }, [board]);
+};
+
+/* harmony default export */ var useLocalStorage_useLocalStorageBoard = (useLocalStorageBoard);
+// CONCATENATED MODULE: ./src/hooks/useLocalStorage/useLocalStorageConfigId.ts
+
+
+
+
+
+const useLocalStorageConfigId = () => {
+  const dispatch = Object(external_react_redux_["useDispatch"])();
+  const configId = Object(state["G" /* useTypedSelector */])(state["o" /* selectConfigId */]);
+  Object(external_react_use_["useEffectOnce"])(() => {
+    const persistedConfigId = state["e" /* localStorage */].getConfigId();
+
+    if (persistedConfigId) {
+      dispatch(state["D" /* settingsSlice */].actions.init({
+        configId: persistedConfigId
+      }));
+    }
+  });
+  Object(external_react_["useEffect"])(() => {
+    if (configId) {
+      state["e" /* localStorage */].setConfigId(configId);
+    }
+  }, [configId]);
+};
+
+/* harmony default export */ var useLocalStorage_useLocalStorageConfigId = (useLocalStorageConfigId);
+// EXTERNAL MODULE: ./src/lib/index.ts + 27 modules
+var lib = __webpack_require__("psLn");
+
+// CONCATENATED MODULE: ./src/hooks/useLocalStorage/useLocalStorageLocale.ts
+
+
+
+
+
+
+const useLocalStorageLocale = () => {
+  const dispatch = Object(external_react_redux_["useDispatch"])();
+  const locale = Object(state["G" /* useTypedSelector */])(state["s" /* selectLocale */]);
+  Object(external_react_use_["useEffectOnce"])(() => {
+    const persistedLocale = state["e" /* localStorage */].getLocale();
+
+    if (persistedLocale) {
+      dispatch(state["D" /* settingsSlice */].actions.init({
+        locale: persistedLocale
+      }));
+    } else {
+      dispatch(state["D" /* settingsSlice */].actions.init({
+        locale: Object(lib["f" /* detectLocale */])()
+      }));
+    }
+  });
+  Object(external_react_["useEffect"])(() => {
+    if (locale) {
+      state["e" /* localStorage */].setLocale(locale);
+    }
+  }, [locale]);
+};
+
+/* harmony default export */ var useLocalStorage_useLocalStorageLocale = (useLocalStorageLocale);
+// CONCATENATED MODULE: ./src/hooks/useLocalStorage/useLocalStorageRack.ts
+
+
+
+
+
+const useLocalStorageRack = () => {
+  const dispatch = Object(external_react_redux_["useDispatch"])();
+  const rack = Object(state["G" /* useTypedSelector */])(state["t" /* selectRack */]);
+  Object(external_react_use_["useEffectOnce"])(() => {
+    const persistedRack = state["e" /* localStorage */].getRack();
+
+    if (persistedRack) {
+      dispatch(state["f" /* rackSlice */].actions.init(persistedRack));
+    }
+  });
+  Object(external_react_["useEffect"])(() => {
+    if (rack) {
+      state["e" /* localStorage */].setRack(rack);
+    }
+  }, [rack]);
+};
+
+/* harmony default export */ var useLocalStorage_useLocalStorageRack = (useLocalStorageRack);
+// CONCATENATED MODULE: ./src/hooks/useLocalStorage/useLocalStorage.ts
+
+
+
+
+
+const useLocalStorage = () => {
+  useLocalStorage_useLocalStorageRack(); // rack has to go first, see 14869a4
+
+  useLocalStorage_useLocalStorageBoard();
+  useLocalStorage_useLocalStorageConfigId();
+  useLocalStorage_useLocalStorageLocale();
+};
+
+/* harmony default export */ var useLocalStorage_useLocalStorage = (useLocalStorage);
+// CONCATENATED MODULE: ./src/hooks/useLocalStorage/index.ts
+
+// EXTERNAL MODULE: external "react/jsx-runtime"
+var jsx_runtime_ = __webpack_require__("F5FC");
+
+// EXTERNAL MODULE: external "react-dom"
+var external_react_dom_ = __webpack_require__("faye");
+
+// EXTERNAL MODULE: external "react-portal"
+var external_react_portal_ = __webpack_require__("CQjl");
+
+// CONCATENATED MODULE: ./src/hooks/usePortal.tsx
+
+
+
+
+
+
+const usePortal = (children, {
+  disabled = false,
+  tagName = 'div'
+} = {}) => {
+  const element = Object(external_react_["useMemo"])(() => document.createElement(tagName), [tagName]);
+  Object(external_react_["useLayoutEffect"])(() => {
+    if (disabled) {
+      return lib["p" /* noop */];
+    }
+
+    document.body.appendChild(element);
+    return () => {
+      Object(external_react_dom_["unmountComponentAtNode"])(element);
+      document.body.removeChild(element);
+    };
+  }, [disabled, element]);
+  Object(external_react_["useLayoutEffect"])(() => {
+    if (!disabled) {
+      Object(external_react_dom_["render"])( /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_react_portal_["Portal"], {
+        children: children
+      }), element);
+    }
+  }, [children, disabled, element]);
+};
+
+/* harmony default export */ var hooks_usePortal = (lib["a" /* canUseDom */] ? usePortal : lib["p" /* noop */]);
+// EXTERNAL MODULE: external "uuid"
+var external_uuid_ = __webpack_require__("kNaX");
+
+// CONCATENATED MODULE: ./src/hooks/useUniqueId.ts
+
+
+
+const useUniqueId = () => {
+  const idRef = Object(external_react_["useRef"])(Object(external_uuid_["v4"])());
+  return idRef.current;
+};
+
+/* harmony default export */ var hooks_useUniqueId = (useUniqueId);
+// CONCATENATED MODULE: ./src/hooks/index.ts
+
+
+
+
+
 /***/ }),
 
 /***/ "elyg":
@@ -7142,6 +7347,13 @@ Router.events = (0, _mitt.default)();
 
 /***/ }),
 
+/***/ "faye":
+/***/ (function(module, exports) {
+
+module.exports = require("react-dom");
+
+/***/ }),
+
 /***/ "g/15":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -7385,6 +7597,13 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ "kNaX":
+/***/ (function(module, exports) {
+
+module.exports = require("uuid");
+
 /***/ }),
 
 /***/ "lFTW":
@@ -7839,6 +8058,13 @@ module.exports = require("path");
 
 /***/ }),
 
+/***/ "pYII":
+/***/ (function(module, exports) {
+
+module.exports = require("react-popper");
+
+/***/ }),
+
 /***/ "pdKp":
 /***/ (function(module, exports) {
 
@@ -7865,26 +8091,31 @@ module.exports = {
 "use strict";
 
 // EXPORTS
-__webpack_require__.d(__webpack_exports__, "a", function() { return /* reexport */ lib_createArray; });
-__webpack_require__.d(__webpack_exports__, "b", function() { return /* reexport */ lib_createGridOf; });
-__webpack_require__.d(__webpack_exports__, "c", function() { return /* reexport */ lib_createKeyboardNavigation; });
-__webpack_require__.d(__webpack_exports__, "d", function() { return /* reexport */ lib_createNullMovingComparator; });
-__webpack_require__.d(__webpack_exports__, "e", function() { return /* reexport */ lib_detectLocale; });
-__webpack_require__.d(__webpack_exports__, "f", function() { return /* reexport */ lib_findCell; });
-__webpack_require__.d(__webpack_exports__, "g", function() { return /* reexport */ lib_getCellSize; });
-__webpack_require__.d(__webpack_exports__, "h", function() { return /* reexport */ lib_getRemainingTiles; });
-__webpack_require__.d(__webpack_exports__, "i", function() { return /* reexport */ lib_getRemainingTilesGroups; });
-__webpack_require__.d(__webpack_exports__, "j", function() { return /* reexport */ lib_getTileSizes; });
-__webpack_require__.d(__webpack_exports__, "k", function() { return /* reexport */ lib_inverseDirection; });
-__webpack_require__.d(__webpack_exports__, "l", function() { return /* reexport */ lib_isCtrl; });
-__webpack_require__.d(__webpack_exports__, "m", function() { return /* reexport */ lib_isMac; });
-__webpack_require__.d(__webpack_exports__, "n", function() { return /* reexport */ lib_memoize; });
-__webpack_require__.d(__webpack_exports__, "o", function() { return /* reexport */ lib_sortResults; });
-__webpack_require__.d(__webpack_exports__, "p", function() { return /* reexport */ lib_unorderedArraysEqual; });
-__webpack_require__.d(__webpack_exports__, "q", function() { return /* reexport */ lib_zipCharactersAndTiles; });
-
-// UNUSED EXPORTS: comparator, createKeyComparator, getRemainingTilesCount, getTotalRemainingTilesCount, isLocale, noop, numberComparator, reverseComparator, stringComparator
-
+__webpack_require__.d(__webpack_exports__, "a", function() { return /* reexport */ lib_canUseDom; });
+__webpack_require__.d(__webpack_exports__, "b", function() { return /* reexport */ lib_createArray; });
+__webpack_require__.d(__webpack_exports__, "c", function() { return /* reexport */ lib_createGridOf; });
+__webpack_require__.d(__webpack_exports__, "d", function() { return /* reexport */ lib_createKeyboardNavigation; });
+__webpack_require__.d(__webpack_exports__, "e", function() { return /* reexport */ lib_createNullMovingComparator; });
+__webpack_require__.d(__webpack_exports__, "f", function() { return /* reexport */ lib_detectLocale; });
+__webpack_require__.d(__webpack_exports__, "g", function() { return /* reexport */ lib_findCell; });
+__webpack_require__.d(__webpack_exports__, "h", function() { return /* reexport */ lib_getCellSize; });
+__webpack_require__.d(__webpack_exports__, "i", function() { return /* reexport */ lib_getRemainingTiles; });
+__webpack_require__.d(__webpack_exports__, "j", function() { return /* reexport */ lib_getRemainingTilesGroups; });
+__webpack_require__.d(__webpack_exports__, "k", function() { return /* reexport */ lib_getTileSizes; });
+__webpack_require__.d(__webpack_exports__, "l", function() { return /* reexport */ lib_inverseDirection; });
+__webpack_require__.d(__webpack_exports__, "m", function() { return /* reexport */ lib_isCtrl; });
+__webpack_require__.d(__webpack_exports__, "n", function() { return /* reexport */ lib_isMac; });
+__webpack_require__.d(__webpack_exports__, "o", function() { return /* reexport */ lib_memoize; });
+__webpack_require__.d(__webpack_exports__, "p", function() { return /* reexport */ lib_noop; });
+__webpack_require__.d(__webpack_exports__, "q", function() { return /* reexport */ lib_sortResults; });
+__webpack_require__.d(__webpack_exports__, "r", function() { return /* reexport */ lib_unorderedArraysEqual; });
+__webpack_require__.d(__webpack_exports__, "s", function() { return /* reexport */ lib_zipCharactersAndTiles; });
+
+// UNUSED EXPORTS: comparator, createKeyComparator, getRemainingTilesCount, getTotalRemainingTilesCount, isLocale, numberComparator, reverseComparator, stringComparator
+
+// CONCATENATED MODULE: ./src/lib/canUseDom.ts
+const canUseDom = Boolean( false && false);
+/* harmony default export */ var lib_canUseDom = (canUseDom);
 // CONCATENATED MODULE: ./src/lib/numberComparator.ts
 const numberComparator = (a, b) => a - b;
 
@@ -8334,6 +8565,7 @@ const zipCharactersAndTiles = (characters, tiles) => {
 
 
 
+
 
 
 /***/ }),