@scrabble-solver/scrabble-solver 2.17.0 → 2.18.0

package/src/i18n/i18n.ts

@@ -3,22 +3,23 @@ import { Locale } from '@scrabble-solver/types';
 import { type Translations } from '@/types';
 
 import english from './languages/english.json';
-import french from './languages/french.json';
-import german from './languages/german.json';
-import persian from './languages/persian.json';
-import polish from './languages/polish.json';
-import romanian from './languages/romanian.json';
-import spanish from './languages/spanish.json';
-import turkish from './languages/turkish.json';
 
-export const i18n: Record<Locale, Translations> = {
-  [Locale.DE_DE]: german,
-  [Locale.EN_GB]: english,
-  [Locale.EN_US]: english,
-  [Locale.ES_ES]: spanish,
-  [Locale.FA_IR]: persian,
-  [Locale.FR_FR]: french,
-  [Locale.PL_PL]: polish,
-  [Locale.RO_RO]: romanian,
-  [Locale.TR_TR]: turkish,
+/**
+ * English ships in the main bundle so the SSR and the pre-hydration UI
+ * always have complete translations.
+ */
+export const englishTranslations: Translations = english;
+
+const loadTranslationsPerLocale: Record<Locale, () => Promise<Translations>> = {
+  [Locale.DE_DE]: async () => (await import('./languages/german.json')).default,
+  [Locale.EN_GB]: async () => english,
+  [Locale.EN_US]: async () => english,
+  [Locale.ES_ES]: async () => (await import('./languages/spanish.json')).default,
+  [Locale.FA_IR]: async () => (await import('./languages/persian.json')).default,
+  [Locale.FR_FR]: async () => (await import('./languages/french.json')).default,
+  [Locale.PL_PL]: async () => (await import('./languages/polish.json')).default,
+  [Locale.RO_RO]: async () => (await import('./languages/romanian.json')).default,
+  [Locale.TR_TR]: async () => (await import('./languages/turkish.json')).default,
 };
+
+export const loadTranslations = (locale: Locale): Promise<Translations> => loadTranslationsPerLocale[locale]();

package/src/i18n/languages/english.json

@@ -76,7 +76,6 @@
   "settings.removeCellFilters.never": "Never",
   "settings.showCoordinates": "Coordinates",
   "settings.showCoordinates.alternative": "Alternative",
-  "settings.showCoordinates.hidden": "Hidden",
   "settings.showCoordinates.original": "Original",
   "words": "Created words",
   "words.invalid": "Invalid",

package/src/i18n/languages/french.json

@@ -76,7 +76,6 @@
   "settings.removeCellFilters.never": "Jamais",
   "settings.showCoordinates": "Coordonnés",
   "settings.showCoordinates.alternative": "Alternative",
-  "settings.showCoordinates.hidden": "Caché",
   "settings.showCoordinates.original": "Original",
   "words": "Mots créés",
   "words.invalid": "Incorrect",

package/src/i18n/languages/german.json

@@ -76,7 +76,6 @@
   "settings.removeCellFilters.never": "Nie",
   "settings.showCoordinates": "Koordinaten",
   "settings.showCoordinates.alternative": "Alternative",
-  "settings.showCoordinates.hidden": "Versteckt",
   "settings.showCoordinates.original": "Original",
   "words": "Gebildete Wörter",
   "words.invalid": "Falsch",

package/src/i18n/languages/persian.json

@@ -76,7 +76,6 @@
   "settings.removeCellFilters.never": "هرگز",
   "settings.showCoordinates": "مختصات",
   "settings.showCoordinates.alternative": "بديل",
-  "settings.showCoordinates.hidden": "مختفي",
   "settings.showCoordinates.original": "إبداعي",
   "words": "کلمات ساخته شده",
   "words.invalid": "نا معتبر",

package/src/i18n/languages/polish.json

@@ -76,7 +76,6 @@
   "settings.removeCellFilters.never": "Nigdy",
   "settings.showCoordinates": "Współrzędne",
   "settings.showCoordinates.alternative": "Alternatywne",
-  "settings.showCoordinates.hidden": "Ukryte",
   "settings.showCoordinates.original": "Oryginalne",
   "words": "Utworzone słowa",
   "words.invalid": "Niepoprawne",

package/src/i18n/languages/romanian.json

@@ -76,7 +76,6 @@
   "settings.removeCellFilters.never": "Niciodată",
   "settings.showCoordinates": "Coordonate",
   "settings.showCoordinates.alternative": "Alternativă",
-  "settings.showCoordinates.hidden": "Ascuns",
   "settings.showCoordinates.original": "Original",
   "words": "Cuvinte create",
   "words.invalid": "Invalid",

package/src/i18n/languages/spanish.json

@@ -76,7 +76,6 @@
   "settings.removeCellFilters.never": "Nunca",
   "settings.showCoordinates": "Coordenadas",
   "settings.showCoordinates.alternative": "Alternativa",
-  "settings.showCoordinates.hidden": "Oculto",
   "settings.showCoordinates.original": "Original",
   "words": "Palabras creadas",
   "words.invalid": "Incorrecto",

package/src/i18n/languages/turkish.json

@@ -76,7 +76,6 @@
   "settings.removeCellFilters.never": "Asla",
   "settings.showCoordinates": "Koordinatlar",
   "settings.showCoordinates.alternative": "Alternatif",
-  "settings.showCoordinates.hidden": "Gizlenmiş",
   "settings.showCoordinates.original": "Orijinal",
   "words": "Oluşturulan kelimeler",
   "words.invalid": "Geçersiz",

package/src/i18n/localeIcons.ts

@@ -0,0 +1,24 @@
+import { Locale } from '@scrabble-solver/types';
+import { type FunctionComponent, type SVGAttributes } from 'react';
+
+import FlagDe from '@/icons/FlagDe.svg';
+import FlagEs from '@/icons/FlagEs.svg';
+import FlagFa from '@/icons/FlagFa.svg';
+import FlagFr from '@/icons/FlagFr.svg';
+import FlagGb from '@/icons/FlagGb.svg';
+import FlagPl from '@/icons/FlagPl.svg';
+import FlagRo from '@/icons/FlagRo.svg';
+import FlagTr from '@/icons/FlagTr.svg';
+import FlagUs from '@/icons/FlagUs.svg';
+
+export const LOCALE_ICONS: Record<Locale, FunctionComponent<SVGAttributes<SVGElement>>> = {
+  [Locale.DE_DE]: FlagDe,
+  [Locale.EN_GB]: FlagGb,
+  [Locale.EN_US]: FlagUs,
+  [Locale.ES_ES]: FlagEs,
+  [Locale.FA_IR]: FlagFa,
+  [Locale.FR_FR]: FlagFr,
+  [Locale.PL_PL]: FlagPl,
+  [Locale.RO_RO]: FlagRo,
+  [Locale.TR_TR]: FlagTr,
+};

package/src/lib/localeTransliterate.test.ts

@@ -5,9 +5,14 @@ import { localeTransliterate } from './localeTransliterate';
 describe('localeTransliterate', () => {
   it.each([
     { locale: Locale.ES_ES, word: 'bañó', expected: 'baño' },
+    { locale: Locale.ES_ES, word: 'pingüino', expected: 'pinguino' },
     { locale: Locale.FR_FR, word: 'très', expected: 'tres' },
+    { locale: Locale.FR_FR, word: 'garçon', expected: 'garcon' },
+    { locale: Locale.FR_FR, word: 'œuf', expected: 'oeuf' },
+    { locale: Locale.FR_FR, word: 'ex æquo', expected: 'ex aequo' },
     { locale: Locale.PL_PL, word: 'źdźbło', expected: 'źdźbło' },
     { locale: Locale.RO_RO, word: 'mămăligă', expected: 'mamaliga' },
+    { locale: Locale.RO_RO, word: 'așteaptă', expected: 'asteapta' },
   ])(`[$locale] "$word"`, ({ locale, word, expected }) => {
     expect(localeTransliterate(locale, word)).toEqual(expected);
   });

package/src/lib/localeTransliterate.ts

@@ -1,18 +1,38 @@
 import { Locale } from '@scrabble-solver/types';
-import { transliterate } from 'transliteration';
+
+const COMBINING_MARKS = /[̀-ͯ]/g;
+
+const NON_DECOMPOSABLE: Record<string, string> = {
+  Æ: 'AE',
+  Œ: 'OE',
+  æ: 'ae',
+  œ: 'oe',
+};
 
 const transliteratePerLocale: Record<Locale, (word: string) => string> = {
   [Locale.DE_DE]: (word) => word,
   [Locale.EN_GB]: (word) => word,
   [Locale.EN_US]: (word) => word,
-  [Locale.ES_ES]: (word) => transliterate(word, { ignore: ['ñ', 'Ñ'] }),
+  [Locale.ES_ES]: (word) => foldDiacritics(word, ['ñ', 'Ñ']),
   [Locale.FA_IR]: (word) => word,
-  [Locale.FR_FR]: (word) => transliterate(word),
+  [Locale.FR_FR]: (word) => foldDiacritics(word),
   [Locale.PL_PL]: (word) => word,
-  [Locale.RO_RO]: (word) => transliterate(word),
+  [Locale.RO_RO]: (word) => foldDiacritics(word),
   [Locale.TR_TR]: (word) => word,
 };
 
-export const localeTransliterate = (locale: Locale, value: string): string => {
+export function localeTransliterate(locale: Locale, value: string): string {
   return transliteratePerLocale[locale](value);
-};
+}
+
+function foldDiacritics(word: string, ignore: readonly string[] = []): string {
+  return Array.from(word)
+    .map((character) => {
+      if (ignore.includes(character)) {
+        return character;
+      }
+
+      return NON_DECOMPOSABLE[character] ?? character.normalize('NFD').replace(COMBINING_MARKS, '');
+    })
+    .join('');
+}

package/src/lib/waitForIdleOrFirstIntent.ts

@@ -0,0 +1,33 @@
+export function waitForIdleOrFirstIntent(): Promise<void> {
+  return new Promise((resolve) => {
+    const settle = () => {
+      window.removeEventListener('pointerdown', settle);
+      window.removeEventListener('keydown', settle);
+      resolve();
+    };
+
+    window.addEventListener('pointerdown', settle, { once: true });
+    window.addEventListener('keydown', settle, { once: true });
+    whenIdle(settle);
+  });
+}
+
+export function waitForIdle(): Promise<void> {
+  return new Promise((resolve) => whenIdle(resolve));
+}
+
+function whenIdle(callback: () => void): void {
+  const requestIdle = () => {
+    if ('requestIdleCallback' in window) {
+      window.requestIdleCallback(callback, { timeout: 5000 });
+    } else {
+      setTimeout(callback, 5000);
+    }
+  };
+
+  if (document.readyState === 'complete') {
+    requestIdle();
+  } else {
+    window.addEventListener('load', requestIdle, { once: true });
+  }
+}

package/src/modals/DictionaryModal/DictionaryModal.module.scss.d.ts

@@ -0,0 +1,8 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly content: string;
+  readonly dictionary: string;
+  readonly dictionaryInput: string;
+};
+
+export default styles;

package/src/modals/DictionaryModal/DictionaryModal.tsx

@@ -1,6 +1,8 @@
 import { type FunctionComponent, memo } from 'react';
 
-import { Dictionary, DictionaryInput, Modal } from '@/components';
+import { Dictionary } from '@/components/Dictionary';
+import { DictionaryInput } from '@/components/DictionaryInput';
+import { Modal } from '@/components/Modal';
 import { useTranslate } from '@/state';
 
 import styles from './DictionaryModal.module.scss';

package/src/modals/KeyMapModal/KeyMapModal.tsx

@@ -1,6 +1,8 @@
 import { type FunctionComponent, memo } from 'react';
 
-import { Arrows, Backspace, Ctrl, Del, Enter, Key, Modal, Space } from '@/components';
+import { Key } from '@/components/Key';
+import { Arrows, Backspace, Ctrl, Del, Enter, Space } from '@/components/Keys';
+import { Modal } from '@/components/Modal';
 import { selectConfig, useTranslate, useTypedSelector } from '@/state';
 
 import { Mapping } from './components';

package/src/modals/KeyMapModal/components/Mapping/Mapping.module.scss.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly description: string;
+  readonly group: string;
+  readonly keys: string;
+  readonly mapping: string;
+  readonly plus: string;
+  readonly slash: string;
+};
+
+export default styles;

package/src/modals/MenuModal/MenuModal.module.scss

@@ -1,5 +1,10 @@
 @use 'styles/mixins' as *;
 
+.modal {
+  // on mobile, every modal opened from the menu must cover it
+  z-index: calc(var(--z-index--modal) - 1);
+}
+
 .button {
   width: 100%;
   text-transform: none;

package/src/modals/MenuModal/MenuModal.module.scss.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly button: string;
+  readonly flag: string;
+  readonly modal: string;
+  readonly settings: string;
+  readonly settingsLabel: string;
+};
+
+export default styles;

package/src/modals/MenuModal/MenuModal.tsx

@@ -1,8 +1,13 @@
 import { type FunctionComponent, memo } from 'react';
 
-import { Button, Modal } from '@/components';
-import { LOCALE_FEATURES } from '@/i18n';
-import { BookHalf, CardChecklist, Cog, Github, Sack } from '@/icons';
+import { Button } from '@/components/Button';
+import { Modal } from '@/components/Modal';
+import { LOCALE_ICONS } from '@/i18n/localeIcons';
+import BookHalf from '@/icons/BookHalf.svg';
+import CardChecklist from '@/icons/CardChecklist.svg';
+import Cog from '@/icons/Cog.svg';
+import Github from '@/icons/Github.svg';
+import Sack from '@/icons/Sack.svg';
 import { GITHUB_PROJECT_URL } from '@/parameters';
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 
@@ -29,10 +34,16 @@ const MenuModalBase: FunctionComponent<Props> = ({
 }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
-  const { Icon } = LOCALE_FEATURES[locale];
+  const Icon = LOCALE_ICONS[locale];
 
   return (
-    <Modal className={className} isOpen={isOpen} title={translate('menu')} onClose={onClose}>
+    <Modal
+      className={className}
+      isOpen={isOpen}
+      modalClassName={styles.modal}
+      title={translate('menu')}
+      onClose={onClose}
+    >
       <Button
         aria-label={translate('remaining-tiles')}
         className={styles.button}

package/src/modals/RemainingTilesModal/RemainingTilesModal.module.scss

@@ -6,9 +6,12 @@
 }
 
 .content {
+  --tile-size: 50px;
+
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing--l);
+  font-size: calc(var(--tile-size) * 0.6);
 }
 
 .badge {
@@ -18,5 +21,5 @@
 .character {
   display: flex;
   flex: 0 1;
-  max-width: 50px;
+  max-width: var(--tile-size);
 }

package/src/modals/RemainingTilesModal/RemainingTilesModal.module.scss.d.ts

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly badge: string;
+  readonly character: string;
+  readonly content: string;
+  readonly title: string;
+};
+
+export default styles;

package/src/modals/RemainingTilesModal/RemainingTilesModal.tsx

@@ -1,9 +1,8 @@
 import { type FunctionComponent, memo } from 'react';
 
-import { Badge, Modal } from '@/components';
-import { LOCALE_FEATURES } from '@/i18n';
-import { getTileSizes } from '@/lib';
-import { REMAINING_TILES_TILE_SIZE } from '@/parameters';
+import { Badge } from '@/components/Badge';
+import { Modal } from '@/components/Modal';
+import { LOCALE_FEATURES } from '@/i18n/constants';
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 
 import { Character } from './components';
@@ -20,7 +19,6 @@ const RemainingTilesModalBase: FunctionComponent<Props> = ({ className, isOpen,
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const groups = useTypedSelector(selectRemainingTilesGroups);
-  const { tileFontSize } = getTileSizes(REMAINING_TILES_TILE_SIZE);
   const { direction } = LOCALE_FEATURES[locale];
 
   return (
@@ -42,7 +40,7 @@ const RemainingTilesModalBase: FunctionComponent<Props> = ({ className, isOpen,
               </span>
             }
           >
-            <div className={styles.content} style={{ fontSize: tileFontSize }}>
+            <div className={styles.content}>
               {tiles.map((tile) => {
                 return (
                   <div className={styles.character} key={tile.character}>

package/src/modals/RemainingTilesModal/components/Character/Character.module.scss

@@ -29,6 +29,7 @@
 }
 
 .remaining {
+  width: var(--tile-size);
   height: 6px;
   margin-top: var(--spacing--m);
   box-shadow: var(--box-shadow--raised);

package/src/modals/RemainingTilesModal/components/Character/Character.module.scss.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly character: string;
+  readonly count: string;
+  readonly finished: string;
+  readonly overused: string;
+  readonly remaining: string;
+  readonly tile: string;
+  readonly unused: string;
+};
+
+export default styles;

package/src/modals/RemainingTilesModal/components/Character/Character.tsx

@@ -3,9 +3,9 @@ import classNames from 'classnames';
 import { type FunctionComponent, useCallback, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Progress, Tile } from '@/components';
-import { LOCALE_FEATURES } from '@/i18n';
-import { REMAINING_TILES_TILE_SIZE } from '@/parameters';
+import { Progress } from '@/components/Progress';
+import { Tile } from '@/components/Tile';
+import { LOCALE_FEATURES } from '@/i18n/constants';
 import {
   hoveredTileSlice,
   selectCharacterPoints,
@@ -75,19 +75,12 @@ export const Character: FunctionComponent<Props> = ({ tile }) => {
         highlighted={isHovered}
         isBlank={character === BLANK}
         isValid={remainingCount >= 0}
+        locale={locale}
         points={points}
         raised
-        size={REMAINING_TILES_TILE_SIZE}
       />
 
-      <Progress
-        className={styles.remaining}
-        max={count}
-        style={{
-          width: REMAINING_TILES_TILE_SIZE,
-        }}
-        value={remainingCount}
-      />
+      <Progress className={styles.remaining} max={count} value={remainingCount} />
 
       <div className={styles.count}>
         {current.toLocaleString(locale)} / {total.toLocaleString(locale)}

package/src/modals/ResultsModal/ResultsModal.module.scss.d.ts

@@ -0,0 +1,8 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly content: string;
+  readonly dictionary: string;
+  readonly results: string;
+};
+
+export default styles;

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -2,9 +2,13 @@ import { type Result } from '@scrabble-solver/types';
 import { type FunctionComponent, memo, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from '@/app-layout';
-import { Button, Dictionary, Modal, Results } from '@/components';
-import { Check, EyeFill } from '@/icons';
+import { Button } from '@/components/Button';
+import { Dictionary } from '@/components/Dictionary';
+import { Modal } from '@/components/Modal';
+import { Results } from '@/components/Results';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import Check from '@/icons/Check.svg';
+import EyeFill from '@/icons/EyeFill.svg';
 import { resultsSlice, selectProcessedResults, selectResultCandidate, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './ResultsModal.module.scss';
@@ -18,7 +22,7 @@ interface Props {
 const ResultsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const { showResultsInModal } = useAppLayout();
+  const showResultsInModal = useMediaQuery('<l');
   const results = useTypedSelector(selectProcessedResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const index = results ? results.findIndex((result) => result.id === resultCandidate?.id) : -1;

package/src/modals/SettingsModal/SettingsModal.tsx

@@ -1,7 +1,7 @@
 import { type FunctionComponent, memo } from 'react';
 
-import { Modal } from '@/components';
-import { useIsTouchDevice } from '@/hooks';
+import { Modal } from '@/components/Modal';
+import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
 import { useTranslate } from '@/state';
 
 import {

package/src/modals/SettingsModal/components/AutoGroupTilesSetting/AutoGroupTilesSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/src/modals/SettingsModal/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectAutoGroupTiles, settingsSlice, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './AutoGroupTilesSetting.module.scss';

package/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.tsx

@@ -2,7 +2,7 @@ import { isGame } from '@scrabble-solver/types';
 import { type ChangeEvent, type FunctionComponent, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectGame, selectLocale, settingsSlice, useTypedSelector } from '@/state';
 
 import styles from './ConfigSetting.module.scss';

package/src/modals/SettingsModal/components/HighlightUnreachableCellsSetting/HighlightUnreachableCellsSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/src/modals/SettingsModal/components/HighlightUnreachableCellsSetting/HighlightUnreachableCellsSetting.tsx

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectHighlightUnreachableCells, settingsSlice, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './HighlightUnreachableCellsSetting.module.scss';

package/src/modals/SettingsModal/components/InputModeSetting/InputModeSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/src/modals/SettingsModal/components/InputModeSetting/InputModeSetting.tsx

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectInputMode, settingsSlice, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './InputModeSetting.module.scss';

package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss.d.ts

@@ -0,0 +1,8 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly flag: string;
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;