@pie-lib/text-select 1.14.0-beta.0 → 1.14.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [1.14.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.14.0-beta.0) (2025-07-15)
+# [1.14.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.14.0) (2025-07-31)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [1.13.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.0) (2025-07-15)
+# [1.15.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.15.0) (2025-07-31)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -19,7 +19,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.12.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.6...@pie-lib/text-select@1.12.7) (2023-10-03)
+# [1.14.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.14.0) (2025-07-31)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -27,7 +27,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.12.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.5...@pie-lib/text-select@1.12.6) (2023-10-01)
+# [1.13.0-beta.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.8) (2025-07-25)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -35,7 +35,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.12.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.4...@pie-lib/text-select@1.12.5) (2023-09-27)
+# [1.13.0-beta.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.7) (2025-07-25)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -43,7 +43,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.12.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.3...@pie-lib/text-select@1.12.4) (2023-09-27)
+# [1.13.0-beta.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.7) (2025-07-25)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -51,7 +51,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.12.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.2...@pie-lib/text-select@1.12.3) (2023-09-25)
+# [1.13.0-beta.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.6) (2025-07-25)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -59,7 +59,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.12.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.1...@pie-lib/text-select@1.12.2) (2023-09-20)
+# [1.13.0-beta.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.6) (2025-07-25)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -67,7 +67,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.12.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.0...@pie-lib/text-select@1.12.1) (2023-09-20)
+# [1.13.0-beta.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.5) (2025-07-25)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -75,18 +75,23 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [1.12.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.3...@pie-lib/text-select@1.12.0) (2023-09-18)
+# [1.13.0-beta.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.5) (2025-07-25)
 
+**Note:** Version bump only for package @pie-lib/text-select
 
-### Features
 
-* **translator, text-select:** add translations for new text-select legend PD-3162 ([20ee2c1](https://github.com/pie-framework/pie-lib/commit/20ee2c17873985fa06b4b58cf781742a5923b532))
 
 
 
+# [1.13.0-beta.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.4) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/text-select
 
 
-## [1.11.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.2...@pie-lib/text-select@1.11.3) (2023-09-14)
+
+
+
+# [1.13.0-beta.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.3) (2025-07-25)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -94,19 +99,23 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.11.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.1...@pie-lib/text-select@1.11.2) (2023-08-29)
+# [1.13.0-beta.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.4) (2025-07-23)
+
+**Note:** Version bump only for package @pie-lib/text-select
 
 
-### Bug Fixes
 
-* **text-select:** PD-3117 - avoids tokens overlapping in eval mode ([728c242](https://github.com/pie-framework/pie-lib/commit/728c24274c726907de568600b074305a145320ca))
-* **text-select:** PD-3134 replace typography with span to prevent materialui from overwriting styling ([a9c4860](https://github.com/pie-framework/pie-lib/commit/a9c4860701355e3e6b33145414658da06ba5a5a3))
 
 
+# [1.13.0-beta.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.3) (2025-07-23)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
 
 
 
-## [1.11.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.0...@pie-lib/text-select@1.11.1) (2023-08-21)
+
+# [1.13.0-beta.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.3) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -114,32 +123,31 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [1.11.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.10.0...@pie-lib/text-select@1.11.0) (2023-08-16)
+# [1.13.0-beta.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.2) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/text-select
 
 
-### Features
 
-* **text-select:** PD-1163 - add legend for icons used in eval mode ([7b2bac2](https://github.com/pie-framework/pie-lib/commit/7b2bac262d29986db2ce57ff6cee6c04af08472a))
 
 
+# [1.13.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.1) (2025-07-20)
 
+**Note:** Version bump only for package @pie-lib/text-select
 
 
-# [1.10.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.29...@pie-lib/text-select@1.10.0) (2023-08-15)
 
 
-### Features
 
-* **text-select:** adjust colors and alignment of the color ([a51ba55](https://github.com/pie-framework/pie-lib/commit/a51ba5547f6e1559915d6ea967d406923831b561))
-* **text-select:** PD-1163 create wrapper component ([b41db39](https://github.com/pie-framework/pie-lib/commit/b41db39ade332d19dca70a06d54acf51b5888c69))
-* **text-select:** PD-1163 update snapshots ([6b8edf8](https://github.com/pie-framework/pie-lib/commit/6b8edf83b763abdd93eee2655be3600cef90586b))
-* **text-select:** PD-1163 updates to tokens in text select ([2535c91](https://github.com/pie-framework/pie-lib/commit/2535c911f378f4cf41c8471bfa1898b996ffacee))
+# [1.13.0-beta.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.2) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/text-select
 
 
 
 
 
-## [1.9.29](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.28...@pie-lib/text-select@1.9.29) (2023-07-24)
+# [1.13.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.1) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -147,7 +155,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.9.28](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.27...@pie-lib/text-select@1.9.28) (2023-06-24)
+# [1.13.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.1) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -155,7 +163,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.9.27](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.26...@pie-lib/text-select@1.9.27) (2023-06-13)
+# [1.13.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.0) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -163,6 +171,90 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+# [1.14.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.14.0-beta.0) (2025-07-15)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+# [1.13.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.0) (2025-07-15)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+## [1.12.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.6...@pie-lib/text-select@1.12.7) (2023-10-03)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+## [1.12.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.5...@pie-lib/text-select@1.12.6) (2023-10-01)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+## [1.12.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.4...@pie-lib/text-select@1.12.5) (2023-09-27)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+## [1.12.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.3...@pie-lib/text-select@1.12.4) (2023-09-27)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+## [1.12.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.2...@pie-lib/text-select@1.12.3) (2023-09-25)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+## [1.12.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.1...@pie-lib/text-select@1.12.2) (2023-09-20)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+## [1.12.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.0...@pie-lib/text-select@1.12.1) (2023-09-20)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+# [1.12.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.3...@pie-lib/text-select@1.12.0) (2023-09-18)
+
+### Features
+
+- **translator, text-select:** add translations for new text-select legend PD-3162 ([20ee2c1](https://github.com/pie-framework/pie-lib/commit/20ee2c17873985fa06b4b58cf781742a5923b532))
+
+## [1.11.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.2...@pie-lib/text-select@1.11.3) (2023-09-14)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+## [1.11.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.1...@pie-lib/text-select@1.11.2) (2023-08-29)
+
+### Bug Fixes
+
+- **text-select:** PD-3117 - avoids tokens overlapping in eval mode ([728c242](https://github.com/pie-framework/pie-lib/commit/728c24274c726907de568600b074305a145320ca))
+- **text-select:** PD-3134 replace typography with span to prevent materialui from overwriting styling ([a9c4860](https://github.com/pie-framework/pie-lib/commit/a9c4860701355e3e6b33145414658da06ba5a5a3))
+
+## [1.11.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.0...@pie-lib/text-select@1.11.1) (2023-08-21)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+# [1.11.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.10.0...@pie-lib/text-select@1.11.0) (2023-08-16)
+
+### Features
+
+- **text-select:** PD-1163 - add legend for icons used in eval mode ([7b2bac2](https://github.com/pie-framework/pie-lib/commit/7b2bac262d29986db2ce57ff6cee6c04af08472a))
+
+# [1.10.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.29...@pie-lib/text-select@1.10.0) (2023-08-15)
+
+### Features
+
+- **text-select:** adjust colors and alignment of the color ([a51ba55](https://github.com/pie-framework/pie-lib/commit/a51ba5547f6e1559915d6ea967d406923831b561))
+- **text-select:** PD-1163 create wrapper component ([b41db39](https://github.com/pie-framework/pie-lib/commit/b41db39ade332d19dca70a06d54acf51b5888c69))
+- **text-select:** PD-1163 update snapshots ([6b8edf8](https://github.com/pie-framework/pie-lib/commit/6b8edf83b763abdd93eee2655be3600cef90586b))
+- **text-select:** PD-1163 updates to tokens in text select ([2535c91](https://github.com/pie-framework/pie-lib/commit/2535c911f378f4cf41c8471bfa1898b996ffacee))
+
+## [1.9.29](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.28...@pie-lib/text-select@1.9.29) (2023-07-24)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+## [1.9.28](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.27...@pie-lib/text-select@1.9.28) (2023-06-24)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+## [1.9.27](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.26...@pie-lib/text-select@1.9.27) (2023-06-13)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
 ## [1.9.26](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.25...@pie-lib/text-select@1.9.26) (2023-06-12)
 
 **Note:** Version bump only for package @pie-lib/text-select

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.14.0-beta.0",
+  "version": "1.14.0",
   "description": "Some react components for text selection",
   "keywords": [
     "react",
@@ -17,10 +17,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@material-ui/icons": "^3.0.2",
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "^4.17.0-beta.0",
-    "@pie-lib/style-utils": "^0.3.0-beta.0",
-    "@pie-lib/translator": "^2.5.0-beta.0",
+    "@pie-lib/style-utils": "^0.4.0",
+    "@pie-lib/translator": "^2.6.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "invariant": "^2.2.4",
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@material-ui/core": "^3.8.3",
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/test-utils": "^0.4.0-beta.0",
+    "@pie-lib/test-utils": "^0.5.0",
     "natural": "^0.6.3",
     "react": "^16.8.1",
     "react-dom": "^16.9.0"
@@ -40,6 +40,6 @@
     "@material-ui/core": "^3.8.3",
     "react": "^16.8.1"
   },
-  "gitHead": "3818c24530f62b5bb9be7a2c6aa5428f13a17e0a",
+  "gitHead": "889a13bfea2c768b8a3a6eabfc6fe7b7725aa832",
   "scripts": {}
 }

package/src/index.js

@@ -1,4 +1,3 @@
-import Controls from './tokenizer/controls';
 import Tokenizer from './tokenizer';
 import TokenSelect, { TokenTypes } from './token-select';
 import TextSelect from './text-select';
@@ -6,4 +5,4 @@ import { Legend } from './legend';
 import Token from './token-select/token';
 import { prepareText } from './utils';
 
-export { Controls, TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };
+export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };

package/src/legend.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import Check from '@material-ui/icons/Check';
 import Close from '@material-ui/icons/Close';
-import Remove from '@material-ui/icons/Remove';
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../render-ui/src/index';
 import Translator from '@pie-lib/translator';
+import classNames from 'classnames';
 
 const { translator } = Translator;
 
@@ -12,6 +12,7 @@ export const Legend = withStyles((theme) => ({
   flexContainer: {
     display: 'flex',
     flexDirection: 'row',
+    alignItems: 'center',
     gap: `${2 * theme.spacing.unit}px`,
     borderBottom: '1px solid lightgrey',
     borderTop: '1px solid lightgrey',
@@ -19,60 +20,77 @@ export const Legend = withStyles((theme) => ({
     paddingTop: theme.spacing.unit,
     marginBottom: theme.spacing.unit,
   },
+  key: {
+    fontSize: '14px',
+    fontWeight: 'bold',
+    color: color.black(),
+    marginLeft: theme.spacing.unit,
+  },
   container: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: `${theme.spacing.unit / 2}px`,
-    alignItems: 'center',
+    position: 'relative',
+    padding: '4px',
+    fontSize: '14px',
+    borderRadius: '4px',
   },
   correct: {
-    fontSize: 'larger',
-    color: color.correct(),
-    backgroundColor: color.correctSecondary(),
-    border: `2px solid ${color.correct()}`,
+    border: `${color.correctTertiary()} solid 2px`,
   },
   incorrect: {
-    fontSize: 'larger',
-    color: color.missing(),
-    backgroundColor: color.incorrectSecondary(),
-    border: `2px solid ${color.missing()}`,
+    border: `${color.incorrectWithIcon()} solid 2px`,
   },
   missing: {
-    fontSize: 'larger',
-    color: color.missing(),
-    backgroundColor: color.incorrectSecondary(),
-    border: `2px dashed ${color.missing()}`,
+    border: `${color.incorrectWithIcon()} dashed 2px`,
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon(),
+  },
+  correctIcon: {
+    backgroundColor: color.correctTertiary(),
   },
-}))(({ classes, language }) => {
-  const icons = [
+  icon: {
+    color: color.white(),
+    position: 'absolute',
+    top: '-8px',
+    left: '-8px',
+    borderRadius: '50%',
+    fontSize: '12px',
+    padding: '2px',
+  },
+}))(({ classes, language, showOnlyCorrect }) => {
+  const legendItems = [
     {
-      iconName: Check,
+      Icon: Check,
       label: translator.t('selectText.correctAnswerSelected', { lng: language }),
-      className: classes.correct,
+      containerClass: classNames(classes.correct, classes.container),
+      iconClass: classNames(classes.correctIcon, classes.icon),
     },
     {
-      iconName: Remove,
-      label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
-      className: classes.missing,
+      Icon: Close,
+      label: translator.t('selectText.incorrectSelection', { lng: language }),
+      containerClass: classNames(classes.incorrect, classes.container),
+      iconClass: classNames(classes.incorrectIcon, classes.icon),
     },
     {
-      iconName: Close,
-      label: translator.t('selectText.incorrectSelection', { lng: language }),
-      className: classes.incorrect,
+      Icon: Close,
+      label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
+      containerClass: classNames(classes.missing, classes.container),
+      iconClass: classNames(classes.incorrectIcon, classes.icon),
     },
   ];
 
+  if (showOnlyCorrect) {
+    legendItems.splice(1, 2);
+  }
+
   return (
     <div className={classes.flexContainer}>
-      {icons.map((icon, index) => {
-        const Icon = icon.iconName;
-        return (
-          <div key={index} className={classes.container}>
-            <Icon className={icon.className} width={'19px'} height={'19px'}></Icon>
-            <span>{icon.label}</span>
-          </div>
-        );
-      })}
+      <span className={classes.key}>{translator.t('selectText.key', { lng: language })}</span>
+      {legendItems.map(({ Icon, label, containerClass, iconClass }, idx) => (
+        <div key={idx} className={containerClass}>
+          <Icon className={iconClass} />
+          <span>{label}</span>
+        </div>
+      ))}
     </div>
   );
 });

package/src/token-select/__tests__/__snapshots__/token.test.jsx.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`token snapshot renders 1`] = `
-<Wrapper
-  useWrapper={false}
->
+<Wrapper>
   <span
     className="tokenRootClass token"
     dangerouslySetInnerHTML={
@@ -16,9 +14,7 @@ exports[`token snapshot renders 1`] = `
 `;
 
 exports[`token snapshot renders with brs 1`] = `
-<Wrapper
-  useWrapper={false}
->
+<Wrapper>
   <span
     className="tokenRootClass token"
     dangerouslySetInnerHTML={