@24i/bigscreen-sdk 1.0.4 → 1.0.5-alpha.2129

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.4",
+    "version": "1.0.5-alpha.2129",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -165,6 +165,7 @@
         "./keyboard/Default": "./packages/keyboard/src/DefaultKeyboard/index.ts",
         "./keyboard/Mobi": "./packages/keyboard/src/MobiKeyboard/index.ts",
         "./keyboard/Whitelabel": "./packages/keyboard/src/WhitelabelKeyboard/index.ts",
+        "./keyboard/Whitelabel/layouts": "./packages/keyboard/src/WhitelabelKeyboard/layouts/index.ts",
         "./keyboard/Whitelabel/styles": "./packages/keyboard/src/WhitelabelKeyboard/WhitelabelStyles/index.ts",
         "./keyboard/WhitelabelNumeric": "./packages/keyboard/src/WhitelabelNumericKeyboard/index.ts",
         "./keyboard/WhitelabelNumeric/styles": "./packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/index.ts",

package/packages/create-package/dist/createPackage.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.main = void 0;
+const path = require("path");
+const fs = require("fs");
+const fse = require("fs-extra");
+const chalk = require("chalk");
+const minimist = require("minimist");
+const questions_1 = require("./questionnaire/questions");
+const Settings_1 = require("./settings/Settings");
+async function isDirectoryEmpty(dirPath) {
+    const files = await fs.promises.readdir(dirPath);
+    return !files.length;
+}
+async function copyTemplateFiles(templateDir, targetDir) {
+    return fse.copy(templateDir, targetDir);
+}
+function updatePackageJsonFile(filePath, options) {
+    let data = fs.readFileSync(filePath, 'utf8');
+    const keywords = options.keywords.map((word) => `"${word}"`).join(', ');
+    data = data.replace(/("name": ")(.*)(")/, `$1${options.name}$3`);
+    data = data.replace(/("version": ")(.*)(")/, `$1${options.version}$3`);
+    data = data.replace(/("description": ")(.*)(")/, `$1${options.description}$3`);
+    data = data.replace(/("keywords": \[)(.*)(\])/, `$1${keywords}$3`);
+    data = data.replace(/("author": ")(.*)(")/, `$1${options.author}$3`);
+    fs.writeFileSync(filePath, data);
+}
+function parseArguments(rawArgv) {
+    const argv = minimist(rawArgv.slice(2));
+    const dirName = argv._[0];
+    if (!dirName) {
+        console.error('Error: Missing package name');
+        process.exit(1);
+    }
+    return {
+        dirName,
+    };
+}
+async function main() {
+    const { dirName: destDirName } = parseArguments(process.argv);
+    const destDir = path.join(process.cwd(), 'packages/', destDirName);
+    if (fs.existsSync(destDir)) {
+        console.error(`Error: Target directory "${destDir}" already exists`);
+        process.exit(1);
+    }
+    fs.mkdirSync(destDir, { recursive: true });
+    const isDirEmpty = await isDirectoryEmpty(destDir);
+    if (!isDirEmpty) {
+        console.error(`Error: Target directory "${destDir}" is not empty.`);
+        process.exit(1);
+    }
+    const settings = Object.assign({}, Settings_1.Settings);
+    settings.name = `${Settings_1.Settings.name}${destDirName}`.toLowerCase();
+    const details = await (0, questions_1.promptPackageDetails)(settings);
+    const templateDir = path.join(__dirname, '..', 'templates/typescript');
+    await copyTemplateFiles(templateDir, destDir);
+    const packageJsonFile = path.join(destDir, 'package.json');
+    updatePackageJsonFile(packageJsonFile, details);
+    const docsSymlinkTarget = path.join('../../../packages/', destDirName, '/README.md');
+    const docsSymlinkPath = path.join(process.cwd(), 'docs/packages/', destDirName, '/README.md');
+    await fse.ensureSymlink(docsSymlinkTarget, docsSymlinkPath);
+    console.log(`${chalk.green('Success')}, package has been initialized!`);
+}
+exports.main = main;
+//# sourceMappingURL=createPackage.js.map

package/packages/create-package/dist/createPackage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPackage.js","sourceRoot":"","sources":["../src/createPackage.ts"],"names":[],"mappings":"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"}

package/packages/create-package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const createPackage_1 = require("./createPackage");
+(0, createPackage_1.main)();
+//# sourceMappingURL=index.js.map

package/packages/create-package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAAA,mDAAuC;AAEvC,IAAA,oBAAI,GAAE,CAAC"}

package/packages/create-package/dist/questionnaire/questions.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.promptPackageDetails = void 0;
+const inquirer = require("inquirer");
+async function promptPackageDetails(defaultValues) {
+    return inquirer.prompt([
+        {
+            type: 'input',
+            name: 'name',
+            message: 'Package name:',
+            default: defaultValues.name,
+        }, {
+            type: 'input',
+            name: 'version',
+            message: 'Version:',
+            default: defaultValues.version,
+        }, {
+            type: 'input',
+            name: 'description',
+            message: 'Description:',
+        }, {
+            type: 'input',
+            name: 'keywords',
+            message: 'Keywords:',
+            filter: (ans) => ans.split(/[\s,]+/),
+        }, {
+            type: 'input',
+            name: 'author',
+            message: 'Author:',
+            default: defaultValues.author,
+        },
+    ]);
+}
+exports.promptPackageDetails = promptPackageDetails;
+//# sourceMappingURL=questions.js.map

package/packages/create-package/dist/questionnaire/questions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"questions.js","sourceRoot":"","sources":["../../src/questionnaire/questions.ts"],"names":[],"mappings":";;;AAAA,qCAAqC;AAWrC,KAAK,UAAU,oBAAoB,CAAC,aAA4C;IAC5E,OAAO,QAAQ,CAAC,MAAM,CAAC;QACnB;YACI,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,eAAe;YACxB,OAAO,EAAE,aAAa,CAAC,IAAI;SAC9B,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,UAAU;YACnB,OAAO,EAAE,aAAa,CAAC,OAAO;SACjC,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,cAAc;SAC1B,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,WAAW;YACpB,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;SACvC,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,aAAa,CAAC,MAAM;SAChC;KACJ,CAAC,CAAC;AACP,CAAC;AAEQ,oDAAoB"}

package/packages/create-package/dist/settings/Settings.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Settings = void 0;
+const Settings = {
+    name: '@24i/smartapps-bigscreen-',
+    version: '0.0.1',
+    author: '24i',
+};
+exports.Settings = Settings;
+//# sourceMappingURL=Settings.js.map

package/packages/create-package/dist/settings/Settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.js","sourceRoot":"","sources":["../../src/settings/Settings.ts"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG;IACb,IAAI,EAAE,2BAA2B;IACjC,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,KAAK;CAChB,CAAC;AAEO,4BAAQ"}

package/packages/create-package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/packages/create-package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/packages/keyboard/README.md

@@ -155,6 +155,7 @@ If you do not use backstage, you must import default Whitelabel styles.
 import { ime } from '@24i/bigscreen-sdk/ime';
 import { CircularDirection } from '@24i/bigscreen-sdk/focus';
 import { Keyboard } from '@24i/bigscreen-sdk/keyboard/WhitelabelKeyboard';
+import { hebrew } from '@24i/bigscreen-sdk/keyboard/Whitelabel/layouts';
 import { NumericKeyboard } from '@24i/bigscreen-sdk/keyboard/WhitelabelNumericKeyboard';
 
 // default styles import
@@ -196,6 +197,7 @@ class App extends Component {
                     continue: 'Continue',
                 }}
                 initialFocus={{ x: 5, y: 2 }}
+                languageLayout={hebrew} // Switchable language layout
             />
             <NumericKeyboard
                 ref={this.numericKeyboard}

package/packages/keyboard/src/WhitelabelKeyboard/Keyboard.scss

@@ -109,6 +109,12 @@
             width: $key-space-width;
         }
 
+        &.key-language {
+            .key-mask-icon {
+                @include mask-svg-icon('./icons/key_language.svg');
+            }
+        }
+
         &.key-shift {
             .key-mask-icon {
                 @include mask-svg-icon('./icons/key_shift.svg');

package/packages/keyboard/src/WhitelabelKeyboard/Keyboard.tsx

@@ -1,46 +1,25 @@
-import { clearNode, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { clearNode, DeclareProps, Reference } from '@24i/bigscreen-sdk/jsx';
 import { Matrix } from '@24i/bigscreen-sdk/focus';
 import { Interactable } from '@24i/bigscreen-sdk/interactable';
 import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { generateFocusMatrixFromStringMatrix } from '../utils/generateFocusMatrixFromStringMatrix';
 import { Backdrop } from '../Backdrop/Backdrop';
-import { BaseProps, KeyboardBase } from '../KeyboardBase';
+import { KeyboardBase } from '../KeyboardBase';
 import { KeyMatrixCell } from '../types';
-import { makeNormalFocusStrings, makeSpecialFocusStrings } from './focusMatrix';
-import { KeyTexts } from './types';
+import { latin, special } from './layouts';
+import { Layouts, Props } from './types';
 import './Keyboard.styles';
 
-type Layouts = 'normal' | 'special';
-
-export type Props = BaseProps<Layouts> & {
-    texts?: KeyTexts;
-    makeFocusStrings?: Record<Layouts, (base: KeyMatrixCell[][]) => KeyMatrixCell[][]>,
-};
-
-const NORMAL_LAYOUT = [
-    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
-    ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
-    ['k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't'],
-    ['u', 'v', 'w', 'x', 'y', 'z', '.', '@', '-', '_'],
-];
-
-const SPECIAL_LAYOUT = [
-    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
-    ['{', '}', '[', ']', '^', '%', '*', '#', '+', '='],
-    ['<', '>', '~', '/', '|', '\\', '(', ')', '&', '“'],
-    [';', ':', '‘', '!', '?', ',', '.', '@', '-', '_'],
-    ['$', '€'], ['£', '¥'],
-];
-
 export class Keyboard extends KeyboardBase<Layouts, Props> {
     static defaultProps = {
         ...KeyboardBase.defaultProps,
         layouts: {
-            normal: NORMAL_LAYOUT,
-            special: SPECIAL_LAYOUT,
+            normal: latin.layout,
+            special: special.layout,
         },
         makeFocusStrings: {
-            normal: makeNormalFocusStrings,
-            special: makeSpecialFocusStrings,
+            normal: latin.makeFocusStrings,
+            special: special.makeFocusStrings,
         },
         texts: {
             toNormalLayout: 'Abc',
@@ -53,22 +32,38 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
         initialFocus: { x: 5, y: 2 },
     };
 
+    languageFocusMatrix: Reference<HTMLDivElement>[][] = [[]];
+
     renderedLayout: Layouts | undefined = undefined;
 
+    isLanguageLayoutActive = false;
+
     declare props: DeclareProps<Props, typeof Keyboard.defaultProps>;
 
+    constructor(props: Props) {
+        super(props);
+        if (this.props.languageLayout) this.createLanguageFocusMatrix();
+    }
+
     createFocusMatrices() {
-        const { layouts, makeFocusStrings } = this.props;
+        const { layouts, makeFocusStrings, languageLayout } = this.props;
         super.createFocusMatrices({
-            normal: makeFocusStrings.normal(layouts.normal),
-            special: makeFocusStrings.special(layouts.special),
+            normal: makeFocusStrings.normal(layouts.normal, !!languageLayout),
+            special: makeFocusStrings.special(layouts.special, !!languageLayout),
         });
     }
 
+    createLanguageFocusMatrix() {
+        const { languageLayout } = this.props;
+        this.languageFocusMatrix = generateFocusMatrixFromStringMatrix(
+            this.keyRefs, languageLayout!.makeFocusStrings(languageLayout!.layout, true)
+        );
+    }
+
     show() {
         super.show();
         this.renderedLayout = 'normal';
-        this.renderNormal();
+        this.renderLayout(this.focusMatrices.normal, this.props.layouts.normal);
     }
 
     hide() {
@@ -77,21 +72,40 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
         clearNode(this.keyboardWrapper);
     }
 
-    onAbc = () => {
+    onAbc() {
         if (this.renderedLayout === 'normal') return;
         this.renderedLayout = 'normal';
-        this.renderNormal();
+        const { layouts, languageLayout } = this.props;
+        if (this.isLanguageLayoutActive) {
+            this.renderLayout(this.languageFocusMatrix, languageLayout!.layout);
+        } else {
+            this.renderLayout(this.focusMatrices.normal, layouts.normal);
+        }
         this.matrix.current!.setIndex({ x: 0, y: 1 });
         this.matrix.current!.focus();
-    };
+    }
 
-    onSpecial = () => {
+    onSpecial() {
         if (this.renderedLayout === 'special') return;
         this.renderedLayout = 'special';
-        this.renderSpecial();
+        const { layouts } = this.props;
+        this.renderLayout(this.focusMatrices.special, layouts.special);
         this.matrix.current!.setIndex({ x: 0, y: 2 });
         this.matrix.current!.focus();
-    };
+    }
+
+    onLanguage() {
+        this.renderedLayout = 'normal';
+        const { layouts, languageLayout } = this.props;
+        this.isLanguageLayoutActive = !this.isLanguageLayoutActive;
+        if (this.isLanguageLayoutActive) {
+            this.renderLayout(this.languageFocusMatrix, languageLayout!.layout);
+        } else {
+            this.renderLayout(this.focusMatrices.normal, layouts.normal);
+        }
+        this.matrix.current!.setIndex({ x: 0, y: 4 });
+        this.matrix.current!.focus();
+    }
 
     generateKey = (char: string) => (
         <Interactable
@@ -105,111 +119,48 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
         </Interactable>
     );
 
-    renderNormal() {
+    renderLayout(matrix: Reference<HTMLDivElement>[][], layout: KeyMatrixCell[][]) {
         const { texts, circular } = this.props;
         this.clearMount(
             <Matrix
                 ref={this.matrix}
                 domRef={this.keyboardWrapper}
-                matrix={this.focusMatrices.normal}
+                matrix={matrix}
                 circular={circular}
                 dir="ltr"
             >
                 {this.renderKeyboard([
                     <>
                         <div className="key-row first-row rounded-border-container">
-                            {map(NORMAL_LAYOUT[0], this.generateKey)}
+                            {map(layout[0], this.generateKey)}
                         </div>
                         <div className="rounded-border-container">
                             <div className="key-row key-chars">
-                                {map(NORMAL_LAYOUT[1], this.generateKey)}
+                                {map(layout[1], this.generateKey)}
                             </div>
                             <div className="key-row key-chars">
-                                {map(NORMAL_LAYOUT[2], this.generateKey)}
+                                {map(layout[2], this.generateKey)}
                             </div>
                             <div className="key-row key-chars">
                                 {
                                     // eslint-disable-next-line no-magic-numbers
-                                    map(NORMAL_LAYOUT[3], this.generateKey)
+                                    map(layout[3], this.generateKey)
                                 }
                             </div>
-                            <div className="key-row">
-                                <Interactable
-                                    ref={this.keyRefs.shift}
-                                    className="key key-wide key-with-icon key-shift"
-                                    onPress={() => this.onShift()}
-                                >
-                                    <div className="key-background">
-                                        <div className="key-mask-icon" />
-                                    </div>
-                                </Interactable>
-                                <Interactable
-                                    ref={this.keyRefs.space}
-                                    className="key key-wide key-space"
-                                    onPress={() => {
-                                        this.onKey(' ');
-                                    }}
-                                    dir="auto"
-                                >
-                                    <div className="key-background">
-                                        {texts.space}
-                                    </div>
-                                </Interactable>
-                                <Interactable
-                                    ref={this.keyRefs.domain}
-                                    className="key key-wide key-domain"
-                                    onPress={() => {
-                                        this.onKey(
-                                            this.keyRefs.domain.current!.firstChild!.textContent!,
-                                        );
-                                    }}
-                                    dir="auto"
-                                >
-                                    <div className="key-background">
-                                        {texts.domain}
-                                    </div>
-                                </Interactable>
-                            </div>
-                        </div>
-                    </>,
-                ])}
-            </Matrix>,
-            this.keyboardWrapper,
-        );
-    }
-
-    renderSpecial() {
-        const { texts, circular } = this.props;
-        this.clearMount(
-            <Matrix
-                ref={this.matrix}
-                domRef={this.keyboardWrapper}
-                matrix={this.focusMatrices.special}
-                circular={circular}
-                dir="ltr"
-            >
-                {this.renderKeyboard([
-                    <>
-                        <div className="key-row first-row rounded-border-container">
-                            {map(SPECIAL_LAYOUT[0], this.generateKey)}
-                        </div>
-                        <div className="rounded-border-container">
-                            <div className="key-row">
-                                {map(SPECIAL_LAYOUT[1], this.generateKey)}
-                            </div>
-                            <div className="key-row">
-                                {map(SPECIAL_LAYOUT[2], this.generateKey)}
-                            </div>
                             <div className="key-row">
                                 {
                                     // eslint-disable-next-line no-magic-numbers
-                                    map(SPECIAL_LAYOUT[3], this.generateKey)
-                                }
-                            </div>
-                            <div className="key-row">
-                                {
-                                    // eslint-disable-next-line no-magic-numbers
-                                    map(SPECIAL_LAYOUT[4], this.generateKey)
+                                    layout[4] ? map(layout[4], this.generateKey) : (
+                                        <Interactable
+                                            ref={this.keyRefs.shift}
+                                            className="key key-wide key-with-icon key-shift"
+                                            onPress={() => this.onShift()}
+                                        >
+                                            <div className="key-background">
+                                                <div className="key-mask-icon" />
+                                            </div>
+                                        </Interactable>
+                                    )
                                 }
                                 <Interactable
                                     ref={this.keyRefs.space}
@@ -225,7 +176,21 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                 </Interactable>
                                 {
                                     // eslint-disable-next-line no-magic-numbers
-                                    map(SPECIAL_LAYOUT[5], this.generateKey)
+                                    layout[5] ? map(layout[5], this.generateKey) : (
+                                        <Interactable
+                                            ref={this.keyRefs.domain}
+                                            className="key key-wide key-domain"
+                                            onPress={() => {
+                                                this.onKey(this.keyRefs.domain.current!
+                                                    .firstChild!.textContent!);
+                                            }}
+                                            dir="auto"
+                                        >
+                                            <div className="key-background">
+                                                {texts.domain}
+                                            </div>
+                                        </Interactable>
+                                    )
                                 }
                             </div>
                         </div>
@@ -237,7 +202,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
     }
 
     renderKeyboard(layout: JSX.Element[]) {
-        const { texts, shouldHideOnBackdropClick } = this.props;
+        const { texts, shouldHideOnBackdropClick, languageLayout } = this.props;
         const isSpecialLayout = this.renderedLayout === 'special';
         const isNormalLayout = this.renderedLayout === 'normal';
         return (
@@ -258,11 +223,12 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                     className={
                                         `key key-wide key-abc ${isNormalLayout ? 'active' : ''}`
                                     }
-                                    onPress={this.onAbc}
+                                    onPress={() => this.onAbc()}
                                     dir="auto"
                                 >
                                     <div className="key-background">
-                                        {texts.toNormalLayout}
+                                        {this.isLanguageLayoutActive
+                                            ? languageLayout?.keyText : texts.toNormalLayout}
                                     </div>
                                 </Interactable>
                             </div>
@@ -274,7 +240,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                             isSpecialLayout ? 'active' : ''
                                         }`
                                     }
-                                    onPress={this.onSpecial}
+                                    onPress={() => this.onSpecial()}
                                     dir="auto"
                                 >
                                     <div className="key-background">
@@ -286,9 +252,23 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                         <div className="key-row">
                             <div className="key key-wide key-empty">&nbsp;</div>
                         </div>
-                        <div className="key-row">
-                            <div className="key key-wide key-empty">&nbsp;</div>
-                        </div>
+                        {!!languageLayout ?
+                            <div className="key-row rounded-border-container">
+                                <Interactable
+                                    ref={this.keyRefs.language}
+                                    className="key key-wide key-with-icon key-language"
+                                    onPress={() => this.onLanguage()}
+                                >
+                                    <div className="key-background">
+                                        <div className="key-mask-icon" />
+                                    </div>
+                                </Interactable>
+                            </div>
+                            :
+                            <div className="key-row">
+                                <div className="key key-wide key-empty">&nbsp;</div>
+                            </div>
+                        }
                     </div>
                     <div className="keys-container key-layout">
                         {layout}
@@ -345,19 +325,17 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                         <div className="key-row">
                             <div className="key key-wide key-empty">&nbsp;</div>
                         </div>
-                        <div className="rounded-border-container">
-                            <div className="key-row">
-                                <Interactable
-                                    ref={this.keyRefs.continue}
-                                    className="key key-wide key-continue"
-                                    onPress={() => this.onDone()}
-                                    dir="auto"
-                                >
-                                    <div className="key-background">
-                                        {texts.continue}
-                                    </div>
-                                </Interactable>
-                            </div>
+                        <div className="key-row rounded-border-container">
+                            <Interactable
+                                ref={this.keyRefs.continue}
+                                className="key key-wide key-continue"
+                                onPress={() => this.onDone()}
+                                dir="auto"
+                            >
+                                <div className="key-background">
+                                    {texts.continue}
+                                </div>
+                            </Interactable>
                         </div>
                     </div>
                 </div>

package/packages/keyboard/src/WhitelabelKeyboard/WhitelabelStyles/whitelabel.scss

@@ -31,6 +31,10 @@ $light-background: rgba(97, 98, 100, 0.3);
             }
         }
 
+        &.key-language {
+            background-color: $light-background;
+        }
+
         &.key-space {
             background-color: $dark-background;
         }

package/packages/keyboard/src/WhitelabelKeyboard/icons/key_language.svg

@@ -0,0 +1,20 @@
+<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <clipPath id="kio1mowqva">
+            <path d="M1920 0v1080H0V0h1920z"/>
+        </clipPath>
+        <clipPath id="b7gbx9lplb">
+            <path d="M168 0a8 8 0 0 1 8 8v58a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8a8 8 0 0 1 8-8h160z"/>
+        </clipPath>
+        <clipPath id="jjict19bjc">
+            <path d="M16.65 0c9.217 0 16.683 7.467 16.683 16.667 0 9.2-7.466 16.666-16.683 16.666C7.45 33.333 0 25.867 0 16.667S7.45 0 16.65 0zm3.2 23.333h-6.367c.717 2.384 1.8 4.6 3.184 6.6 1.383-2 2.466-4.216 3.183-6.6zm-9.8 0H5.133a13.311 13.311 0 0 0 7.217 5.934c-1-1.85-1.767-3.85-2.3-5.934zm18.15 0h-4.917a26.082 26.082 0 0 1-2.3 5.934 13.383 13.383 0 0 0 7.217-5.934zm-18.8-10H3.767a13.736 13.736 0 0 0-.434 3.334c0 1.15.167 2.266.434 3.333H9.4c-.133-1.1-.233-2.2-.233-3.333 0-1.134.1-2.234.233-3.334zm11.167 0h-7.8c-.15 1.084-.267 2.2-.267 3.334 0 1.133.117 2.233.267 3.333h7.8c.15-1.1.266-2.2.266-3.333 0-1.134-.116-2.25-.266-3.334zm9 0h-5.634c.134 1.1.234 2.2.234 3.334 0 1.133-.1 2.233-.234 3.333h5.634c.266-1.067.433-2.183.433-3.333 0-1.15-.167-2.267-.433-3.334zm-8.584-9.266c1 1.85 1.767 3.85 2.3 5.933H28.2a13.383 13.383 0 0 0-7.217-5.933zm-8.633 0A13.311 13.311 0 0 0 5.133 10h4.917a26.082 26.082 0 0 1 2.3-5.933zm4.317-.667a23.478 23.478 0 0 0-3.184 6.6h6.367c-.717-2.383-1.8-4.6-3.183-6.6z"/>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#kio1mowqva)" transform="translate(-388 -969)">
+        <g clip-path="url(#b7gbx9lplb)" transform="translate(320 952)">
+            <g clip-path="url(#jjict19bjc)" transform="translate(71.333 20.333)">
+                <path fill="#FFF" d="M0 0h33.333v33.333H0V0z"/>
+            </g>
+        </g>
+    </g>
+</svg>

package/packages/keyboard/src/WhitelabelKeyboard/index.ts

@@ -1,2 +1,2 @@
 export { Keyboard } from './Keyboard';
-export type { Props } from './Keyboard';
+export type { Props } from './types';