@pie-lib/text-select 0.1.0

package/dist/tokenizer/controls.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-lib/packages/text-select/src/tokenizer/controls.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Controls extends React.Component {
+    static propTypes: {
+        onClear: PropTypes.Validator<(...args: any[]) => any>;
+        onWords: PropTypes.Validator<(...args: any[]) => any>;
+        onSentences: PropTypes.Validator<(...args: any[]) => any>;
+        onParagraphs: PropTypes.Validator<(...args: any[]) => any>;
+        setCorrectMode: PropTypes.Validator<boolean>;
+        onToggleCorrectMode: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {};
+    render(): JSX.Element;
+}
+export default Controls;
+//# sourceMappingURL=controls.d.ts.map

package/dist/tokenizer/controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/tokenizer/controls.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AA8BnC,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS;IAC3C,MAAM,CAAC,SAAS;;;;;;;MAOd;IAEF,MAAM,CAAC,YAAY,KAAM;IAEzB,MAAM;CA0BP;AACD,eAAe,QAAQ,CAAC"}

package/dist/tokenizer/controls.js

@@ -0,0 +1,68 @@
+import e from "react";
+import t from "prop-types";
+import n from "@mui/material/Button";
+import { styled as r } from "@mui/material/styles";
+import i from "@mui/material/Switch";
+import a from "@mui/material/FormControlLabel";
+import { color as o } from "@pie-lib/render-ui";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/tokenizer/controls.tsx
+var l = r("div")(() => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+})), u = r(n)(({ theme: e }) => ({ marginRight: e.spacing(1) })), d = r(i)(() => ({
+	"& .MuiSwitch-thumb": { "&.Mui-checked": { color: `${o.tertiary()} !important` } },
+	"& .MuiSwitch-track": { "&.Mui-checked": { backgroundColor: `${o.tertiaryLight()} !important` } }
+})), f = class extends e.Component {
+	static propTypes = {
+		onClear: t.func.isRequired,
+		onWords: t.func.isRequired,
+		onSentences: t.func.isRequired,
+		onParagraphs: t.func.isRequired,
+		setCorrectMode: t.bool.isRequired,
+		onToggleCorrectMode: t.func.isRequired
+	};
+	static defaultProps = {};
+	render() {
+		let { onClear: e, onWords: t, onSentences: n, onParagraphs: r, setCorrectMode: i, onToggleCorrectMode: o } = this.props;
+		return /* @__PURE__ */ c(l, { children: [/* @__PURE__ */ c("div", { children: [
+			/* @__PURE__ */ s(u, {
+				onClick: t,
+				size: "small",
+				color: "primary",
+				disabled: i,
+				children: "Words"
+			}),
+			/* @__PURE__ */ s(u, {
+				onClick: n,
+				size: "small",
+				color: "primary",
+				disabled: i,
+				children: "Sentences"
+			}),
+			/* @__PURE__ */ s(u, {
+				onClick: r,
+				size: "small",
+				color: "primary",
+				disabled: i,
+				children: "Paragraphs"
+			}),
+			/* @__PURE__ */ s(u, {
+				size: "small",
+				color: "secondary",
+				onClick: e,
+				disabled: i,
+				children: "Clear"
+			})
+		] }), /* @__PURE__ */ s(a, {
+			control: /* @__PURE__ */ s(d, {
+				checked: i,
+				onChange: o
+			}),
+			label: "Set correct answers"
+		})] });
+	}
+};
+//#endregion
+export { f as default };

package/dist/tokenizer/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @synced-from pie-lib/packages/text-select/src/tokenizer/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Tokenizer extends React.Component {
+    static propTypes: {
+        text: PropTypes.Validator<string>;
+        tokens: PropTypes.Requireable<(PropTypes.InferProps<{
+            text: PropTypes.Requireable<string>;
+            correct: PropTypes.Requireable<boolean>;
+            start: PropTypes.Requireable<number>;
+            end: PropTypes.Requireable<number>;
+        }> | null | undefined)[]>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {};
+    constructor(props: any);
+    onChangeHandler: any;
+    toggleCorrectMode: () => any;
+    clear: any;
+    buildTokens: any;
+    selectToken: any;
+    tokenClick: any;
+    tokenIndex: any;
+    setCorrect: any;
+    removeToken: any;
+    render(): JSX.Element;
+}
+export default Tokenizer;
+//# sourceMappingURL=index.d.ts.map

package/dist/tokenizer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokenizer/index.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAgBnC,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS;IAC5C,MAAM,CAAC,SAAS;;;;;;;;;MAWd;IAEF,MAAM,CAAC,YAAY,KAAM;gBAEb,KAAK,KAAA;IAQjB,eAAe,EAAE,GAAG,CAMlB;IAEF,iBAAiB,YAAuE;IAExF,KAAK,EAAE,GAAG,CAER;IAEF,WAAW,EAAE,GAAG,CAKd;IAEF,WAAW,EAAE,GAAG,CAMd;IAEF,UAAU,EAAE,GAAG,CAQb;IAEF,UAAU,EAAE,GAAG,CAMb;IAEF,UAAU,EAAE,GAAG,CAab;IAEF,WAAW,EAAE,GAAG,CAWd;IAEF,MAAM;CAyBP;AAED,eAAe,SAAS,CAAC"}

package/dist/tokenizer/index.js

@@ -0,0 +1,91 @@
+import e from "./controls.js";
+import { paragraphs as t, sentences as n, words as r } from "./builder.js";
+import i from "./token-text.js";
+import a from "react";
+import o from "prop-types";
+import { styled as s } from "@mui/material/styles";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { clone as u, differenceWith as d, isEqual as f } from "lodash-es";
+import { noSelect as p } from "@pie-lib/style-utils";
+//#region src/tokenizer/index.tsx
+var m = s("div")(({ disabled: e }) => ({
+	whiteSpace: "pre-wrap",
+	...e && { ...p() }
+})), h = class extends a.Component {
+	static propTypes = {
+		text: o.string.isRequired,
+		tokens: o.arrayOf(o.shape({
+			text: o.string,
+			correct: o.bool,
+			start: o.number,
+			end: o.number
+		})),
+		onChange: o.func.isRequired
+	};
+	static defaultProps = {};
+	constructor(e) {
+		super(e), this.state = {
+			setCorrectMode: !1,
+			mode: ""
+		};
+	}
+	onChangeHandler = (e, t) => {
+		this.props.onChange(e, t), this.setState({ mode: t });
+	};
+	toggleCorrectMode = () => this.setState({ setCorrectMode: !this.state.setCorrectMode });
+	clear = () => {
+		this.onChangeHandler([], "");
+	};
+	buildTokens = (e, t) => {
+		let { text: n } = this.props, r = t(n);
+		this.onChangeHandler(r, e);
+	};
+	selectToken = (e, t) => {
+		let { tokens: n } = this.props, r = d(u(n), t, f);
+		r.push(e), this.onChangeHandler(r, this.state.mode);
+	};
+	tokenClick = (e) => {
+		let { setCorrectMode: t } = this.state;
+		t ? this.setCorrect(e) : this.removeToken(e);
+	};
+	tokenIndex = (e) => {
+		let { tokens: t } = this.props;
+		return t.findIndex((t) => t.text == e.text && t.start == e.start && t.end == e.end);
+	};
+	setCorrect = (e) => {
+		let { tokens: t } = this.props, n = this.tokenIndex(e);
+		if (n !== -1) {
+			let e = t[n];
+			e.correct = !e.correct;
+			let r = u(t);
+			r.splice(n, 1, e), this.onChangeHandler(r, this.state.mode);
+		}
+	};
+	removeToken = (e) => {
+		let { tokens: t } = this.props, n = this.tokenIndex(e);
+		if (n !== -1) {
+			let e = u(t);
+			e.splice(n, 1), this.onChangeHandler(e, this.state.mode);
+		}
+	};
+	render() {
+		let { text: a, tokens: o } = this.props, { setCorrectMode: s } = this.state;
+		return /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c(e, {
+			onClear: this.clear,
+			onWords: () => this.buildTokens("words", r),
+			onSentences: () => this.buildTokens("sentence", n),
+			onParagraphs: () => this.buildTokens("paragraphs", t),
+			setCorrectMode: s,
+			onToggleCorrectMode: this.toggleCorrectMode
+		}), /* @__PURE__ */ c(m, {
+			disabled: s,
+			as: i,
+			text: a,
+			tokens: o,
+			onTokenClick: this.tokenClick,
+			onSelectToken: this.selectToken
+		})] });
+	}
+};
+//#endregion
+export { h as default };

package/dist/tokenizer/selection-utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-lib/packages/text-select/src/tokenizer/selection-utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const clearSelection: () => void;
+export declare const getCaretCharacterOffsetWithin: (element: any) => number;
+//# sourceMappingURL=selection-utils.d.ts.map

package/dist/tokenizer/selection-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-utils.d.ts","sourceRoot":"","sources":["../../src/tokenizer/selection-utils.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,eAAO,MAAM,cAAc,YAmB1B,CAAC;AAEF,eAAO,MAAM,6BAA6B,GAAI,YAAO,WA2BpD,CAAC"}

package/dist/tokenizer/selection-utils.js

@@ -0,0 +1,18 @@
+//#region src/tokenizer/selection-utils.ts
+var e = () => {
+	document.getSelection ? (document.getSelection().removeAllRanges(), document.getSelection().addRange(document.createRange())) : window.getSelection ? window.getSelection().removeAllRanges ? (window.getSelection().removeAllRanges(), window.getSelection().addRange(document.createRange())) : window.getSelection().empty && window.getSelection().empty() : document.selection && document.selection.empty();
+}, t = (e) => {
+	var t = 0, n = e.ownerDocument || e.document, r = n.defaultView || n.parentWindow, i;
+	if (r.getSelection !== void 0) {
+		if (i = r.getSelection(), i.rangeCount > 0) {
+			var a = r.getSelection().getRangeAt(0), o = a.toString().length, s = a.cloneRange();
+			s.selectNodeContents(e), s.setEnd(a.endContainer, a.endOffset), t = o ? s.toString().length - o : s.toString().length;
+		}
+	} else if ((i = n.selection) && i.type !== "Control") {
+		var c = i.createRange(), l = n.body.createTextRange();
+		l.moveToElementText(e), l.setEndPoint("EndToEnd", c), t = l.text.length;
+	}
+	return t;
+};
+//#endregion
+export { e as clearSelection, t as getCaretCharacterOffsetWithin };

package/dist/tokenizer/token-text.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @synced-from pie-lib/packages/text-select/src/tokenizer/token-text.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare const Text: ({ text, predefined, onClick, correct }: {
+    text: any;
+    predefined: any;
+    onClick: any;
+    correct: any;
+}) => JSX.Element;
+export default class TokenText extends React.Component {
+    static propTypes: {
+        text: PropTypes.Validator<string>;
+        tokens: PropTypes.Validator<any[]>;
+        onTokenClick: PropTypes.Validator<(...args: any[]) => any>;
+        onSelectToken: PropTypes.Validator<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+    };
+    onClick: any;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=token-text.d.ts.map

package/dist/tokenizer/token-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-text.d.ts","sourceRoot":"","sources":["../../src/tokenizer/token-text.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAgCnC,eAAO,MAAM,IAAI,GAAI;;;;;CAAsC,gBAU1D,CAAC;AAIF,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS;IACpD,MAAM,CAAC,SAAS;;;;;;MAMd;IAeF,OAAO,EAAE,GAAG,CAmDV;IAEF,MAAM;CAYP"}

package/dist/tokenizer/token-text.js

@@ -0,0 +1,85 @@
+import { intersection as e, normalize as t } from "./builder.js";
+import { clearSelection as n, getCaretCharacterOffsetWithin as r } from "./selection-utils.js";
+import i from "react";
+import a from "prop-types";
+import { styled as o } from "@mui/material/styles";
+import { jsx as s } from "react/jsx-runtime";
+import c from "debug";
+import l from "classnames";
+import { green as u, yellow as d } from "@mui/material/colors";
+//#region src/tokenizer/token-text.tsx
+var f = c("@pie-lib:text-select:token-text"), p = o("span")(() => ({
+	"&.predefined": {
+		cursor: "pointer",
+		backgroundColor: d[100],
+		border: `dashed 0px ${d[700]}`,
+		"& *": {
+			cursor: "pointer",
+			backgroundColor: d[100],
+			border: `dashed 0px ${d[700]}`
+		}
+	},
+	"&.correct": {
+		backgroundColor: u[500],
+		"& *": { backgroundColor: u[500] }
+	}
+})), m = ({ text: e, predefined: t, onClick: n, correct: r }) => {
+	let i = (e || "").replace(/\n/g, "<br>");
+	return t ? /* @__PURE__ */ s(p, {
+		onClick: n,
+		className: l("predefined", r && "correct"),
+		dangerouslySetInnerHTML: { __html: i }
+	}) : /* @__PURE__ */ s("span", { dangerouslySetInnerHTML: { __html: i } });
+}, h = [
+	"\n",
+	" ",
+	"	"
+], g = class extends i.Component {
+	static propTypes = {
+		text: a.string.isRequired,
+		tokens: a.array.isRequired,
+		onTokenClick: a.func.isRequired,
+		onSelectToken: a.func.isRequired,
+		className: a.string
+	};
+	onClick = (t) => {
+		let { onSelectToken: i, text: a, tokens: o } = this.props;
+		if (t.preventDefault(), typeof window > "u") return;
+		let s = window.getSelection().toString();
+		if (s.length > 0 && h.indexOf(s) < 0 && this.root) {
+			let t = r(this.root), c = a.slice(t).indexOf(s);
+			if (t += c, t !== void 0) {
+				let r = t + s.length;
+				if (r <= a.length) {
+					let a = e({
+						start: t,
+						end: r
+					}, o);
+					if (a.hasOverlap) f("hasOverlap  - do nothing"), n();
+					else {
+						let e = a.surroundedTokens;
+						i({
+							text: s,
+							start: t,
+							end: r
+						}, e), n();
+					}
+				}
+			}
+		}
+	};
+	render() {
+		let { text: e, tokens: n, className: r, onTokenClick: i } = this.props, a = t(e, n);
+		return /* @__PURE__ */ s("div", {
+			className: r,
+			ref: (e) => this.root = e,
+			onClick: this.onClick,
+			children: a.map((e, t) => /* @__PURE__ */ s(m, {
+				...e,
+				onClick: () => i(e)
+			}, t))
+		});
+	}
+};
+//#endregion
+export { g as default };

package/dist/utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @synced-from pie-lib/packages/text-select/src/utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const parseBrs: (dom: any) => void;
+export declare const parseParagraph: (paragraph: any, end: any) => any;
+export declare const parseParagraphs: (dom: any) => string | null;
+export declare const prepareText: (text: any) => any;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAUH,eAAO,MAAM,QAAQ,GAAI,QAAG,SAM3B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,cAAS,EAAE,QAAG,QAM5C,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,QAAG,kBAUlC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,SAAI,QAmB/B,CAAC"}

package/dist/utils.js

@@ -0,0 +1,21 @@
+//#region src/utils.tsx
+var e = (e = "") => {
+	let t = document.createElement("div");
+	return t.innerHTML = e.trim(), t;
+}, t = (e) => {
+	e.querySelectorAll("br").forEach((e) => e.replaceWith("\n")), e.innerHTML = e.innerHTML.replace(/\n\n/g, "\n");
+}, n = (e, t) => t ? e.innerHTML : `${e.innerHTML}\n\n`, r = (e) => {
+	let t = e.querySelectorAll("p"), r = "";
+	return t.forEach((e, i) => {
+		r += n(e, i === t.length - 1);
+	}), r || null;
+}, i = (n) => {
+	let i = e(n), a = Array.from(i.querySelectorAll("*"));
+	if (i.querySelectorAll("p").length === 0) {
+		let e = document.createElement("div");
+		e.innerHTML = `<p>${i.innerHTML}</p>`, i = e;
+	}
+	return a.length === 0 ? n : (t(i), r(i));
+};
+//#endregion
+export { i as prepareText };

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@pie-lib/text-select",
+  "version": "0.1.0",
+  "description": "Some react components for text selection",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-framework/parse-english": "^1.0.0",
+    "@pie-lib/render-ui": "0.1.0",
+    "@pie-lib/style-utils": "0.1.0",
+    "@pie-lib/translator": "0.1.0",
+    "classnames": "^2.2.6",
+    "debug": "^4.1.1",
+    "lodash-es": "^4.17.23",
+    "prop-types": "^15.6.2",
+    "react": "^18.2.0"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bun x vite build && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "test": "bun x vitest run"
+  }
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/text-select/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import Tokenizer from './tokenizer/index.js';
+import TokenSelect, { TokenTypes } from './token-select/index.js';
+import TextSelect from './text-select.js';
+import { Legend } from './legend.js';
+import Token from './token-select/token.js';
+import { prepareText } from './utils.js';
+
+export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };

package/src/legend.tsx

@@ -0,0 +1,112 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/text-select/src/legend.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
+import { color } from '@pie-lib/render-ui';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+const StyledFlexContainer: any = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: theme.spacing(2),
+  borderBottom: '1px solid lightgrey',
+  borderTop: '1px solid lightgrey',
+  paddingBottom: theme.spacing(1),
+  paddingTop: theme.spacing(1),
+  marginBottom: theme.spacing(1),
+}));
+
+const StyledKey: any = styled('span')(({ theme }) => ({
+  fontSize: '14px',
+  fontWeight: 'bold',
+  color: color.black(),
+  marginLeft: theme.spacing(1),
+}));
+
+const StyledContainer: any = styled('div')(() => ({
+  position: 'relative',
+  padding: '4px',
+  fontSize: '14px',
+  borderRadius: '4px',
+}));
+
+const StyledCorrectContainer: any = styled(StyledContainer)(() => ({
+  border: `${color.correctTertiary()} solid 2px`,
+}));
+
+const StyledIncorrectContainer: any = styled(StyledContainer)(() => ({
+  border: `${color.incorrectWithIcon()} solid 2px`,
+}));
+
+const StyledMissingContainer: any = styled(StyledContainer)(() => ({
+  border: `${color.incorrectWithIcon()} dashed 2px`,
+}));
+
+const baseIconStyles = {
+  color: color.white(),
+  position: 'absolute',
+  top: '-8px',
+  left: '-8px',
+  borderRadius: '50%',
+  fontSize: '12px',
+  padding: '2px',
+};
+
+const StyledCorrectCheckIcon: any = styled(Check)(() => ({
+  ...baseIconStyles,
+  backgroundColor: color.correctTertiary(),
+}));
+
+const StyledIncorrectCloseIcon: any = styled(Close)(() => ({
+  ...baseIconStyles,
+  backgroundColor: color.incorrectWithIcon(),
+}));
+
+export const Legend = ({ language, showOnlyCorrect }) => {
+  const legendItems = [
+    {
+      Icon: StyledCorrectCheckIcon,
+      label: translator.t('selectText.correctAnswerSelected', { lng: language }),
+      Container: StyledCorrectContainer,
+    },
+    {
+      Icon: StyledIncorrectCloseIcon,
+      label: translator.t('selectText.incorrectSelection', { lng: language }),
+      Container: StyledIncorrectContainer,
+    },
+    {
+      Icon: StyledIncorrectCloseIcon,
+      label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
+      Container: StyledMissingContainer,
+    },
+  ];
+
+  if (showOnlyCorrect) {
+    legendItems.splice(1, 2);
+  }
+
+  return (
+    <StyledFlexContainer>
+      <StyledKey>{translator.t('selectText.key', { lng: language })}</StyledKey>
+      {legendItems.map(({ Icon, label, Container }, idx) => (
+        <Container key={idx}>
+          <Icon />
+          <span>{label}</span>
+        </Container>
+      ))}
+    </StyledFlexContainer>
+  );
+};