@24i/bigscreen-sdk 0.9.9-alpha.2147

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

@@ -0,0 +1,267 @@
+/* eslint-disable no-magic-numbers */
+import { clearNode, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { Matrix, CircularDirection } from '@24i/bigscreen-sdk/focus';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Backdrop } from '../Backdrop/Backdrop';
+import { KeyboardBase } from '../KeyboardBase';
+import { makeSpecialFocusStrings, makeNormalFocusStrings } from './utils';
+import './Keyboard.styles';
+import {
+    QwertyKeyboardBase,
+    Props,
+    KEYBOARD_ROW,
+    SPECIAL,
+} from '../QwertyKeyboardBase/QwertyKeyboardBase';
+
+const NORMAL = [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+    ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'å'],
+    ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'æ', 'ø'],
+    ['z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.'],
+];
+
+export class Keyboard extends QwertyKeyboardBase {
+    static defaultProps = {
+        ...KeyboardBase.defaultProps,
+        circular: CircularDirection.NONE,
+        layouts: {
+            normal: NORMAL,
+            special: SPECIAL,
+        },
+        makeFocusStrings: {
+            normal: makeNormalFocusStrings,
+            special: makeSpecialFocusStrings,
+        },
+        texts: {
+            cancel: 'Cancel',
+            clear: 'Clear',
+            done: 'Done',
+            shift: 'ABC',
+            shiftActive: 'abc',
+            toNormalLayout: 'abc',
+            toSpecialLayout: '#+-',
+        },
+        initialFocus: {
+            x: 6,
+            y: 2,
+        },
+    };
+
+    declare props: DeclareProps<Props, typeof Keyboard.defaultProps>;
+
+    createFocusMatrices() {
+        const { layouts, makeFocusStrings } = this.props;
+        super.createFocusMatrices({
+            normal: makeFocusStrings.normal(layouts.normal),
+            special: makeFocusStrings.special(layouts.special),
+        });
+    }
+
+    hide() {
+        super.hide();
+        this.renderedLayout = undefined;
+        clearNode(this.keyboardWrapper);
+    }
+
+    renderQWERTY() {
+        const { texts, circular, shouldHideOnBackdropClick } = this.props;
+        if (this.renderedLayout === 'normal') {
+            return;
+        }
+        this.clearMount(
+            <>
+                <Backdrop
+                    onClick={() => this.onDone()}
+                    enableOnClick={shouldHideOnBackdropClick}
+                />
+                <Matrix
+                    circular={circular}
+                    ref={this.matrix}
+                    domRef={this.keyboardWrapper}
+                    matrix={this.focusMatrices.normal}
+                >
+                    <div className={`${KEYBOARD_ROW} row-numbers`}>
+                        <Interactable
+                            ref={this.keyRefs.special}
+                            className="key key-special"
+                            onPress={this.onSpecial}
+                        >
+                            {texts.toSpecialLayout}
+                        </Interactable>
+                        {map(NORMAL[0], this.generateKey)}
+                        <Interactable
+                            ref={this.keyRefs.backspace}
+                            className="key key-backspace key-icon"
+                            onPress={() => this.onBackspace()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.clear}
+                            className="key key-clear"
+                            onPress={() => this.onClear()}
+                        >
+                            {texts.clear}
+                        </Interactable>
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-qwerty`}>
+                        {map(NORMAL[1], this.generateKey)}
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-asdf`}>
+                        {map(NORMAL[2], this.generateKey)}
+                        <div className="key done-container">
+                            <Interactable
+                                ref={this.keyRefs.done}
+                                className="key key-done"
+                                onPress={() => this.onDone()}
+                            >
+                                {texts.done}
+                            </Interactable>
+                        </div>
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-zxcv`}>
+                        {map(NORMAL[3], this.generateKey)}
+                        <Interactable
+                            ref={this.keyRefs.left}
+                            className="key key-left key-icon"
+                            onPress={() => this.onLeft()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.right}
+                            className="key key-right key-icon"
+                            onPress={() => this.onRight()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-spacebar`}>
+                        <Interactable
+                            ref={this.keyRefs.shift}
+                            className="key key-shift"
+                            onPress={() => this.onShift()}
+                        >
+                            {texts.shift}
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.space}
+                            className="key key-space key-icon"
+                            onPress={() => this.onKey(' ')}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.cancel}
+                            className="key key-cancel"
+                            onPress={() => this.onCancel()}
+                        >
+                            {texts.cancel}
+                        </Interactable>
+                    </div>
+                </Matrix>
+            </>,
+            this.keyboardWrapper,
+        );
+        this.renderedLayout = 'normal';
+    }
+
+    renderSpecial() {
+        const { texts, circular, shouldHideOnBackdropClick } = this.props;
+        if (this.renderedLayout === 'special') {
+            return;
+        }
+        this.clearMount(
+            <>
+                <Backdrop
+                    onClick={() => this.onDone()}
+                    enableOnClick={shouldHideOnBackdropClick}
+                />
+                <Matrix
+                    circular={circular}
+                    ref={this.matrix}
+                    domRef={this.keyboardWrapper}
+                    matrix={this.focusMatrices.special}
+                >
+                    <div className={`${KEYBOARD_ROW} row-numbers`}>
+                        <Interactable
+                            ref={this.keyRefs.special}
+                            className="key key-special"
+                            onPress={this.onQWERTY}
+                        >
+                            {texts.toNormalLayout}
+                        </Interactable>
+                        {map(SPECIAL[0], this.generateKey)}
+                        <Interactable
+                            ref={this.keyRefs.backspace}
+                            className="key key-backspace key-icon"
+                            onPress={() => this.onBackspace()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.clear}
+                            className="key key-clear"
+                            onPress={() => this.onClear()}
+                        >
+                            {texts.clear}
+                        </Interactable>
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-qwerty`}>
+                        {map(SPECIAL[1], this.generateKey)}
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-asdf`}>
+                        {map(SPECIAL[2], this.generateKey)}
+                        <div className="key done-container">
+                            <Interactable
+                                ref={this.keyRefs.done}
+                                className="key key-done"
+                                onPress={() => this.onDone()}
+                            >
+                                {texts.done}
+                            </Interactable>
+                        </div>
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-zxcv`}>
+                        {map(SPECIAL[3], this.generateKey)}
+                        <Interactable
+                            ref={this.keyRefs.left}
+                            className="key key-left key-icon"
+                            onPress={() => this.onLeft()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.right}
+                            className="key key-right key-icon"
+                            onPress={() => this.onRight()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                        <div className="key key-fill" />
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-spacebar`}>
+                        <div className="key key-fill double" />
+                        <Interactable
+                            ref={this.keyRefs.space}
+                            className="key key-space key-icon"
+                            onPress={() => this.onKey(' ')}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.cancel}
+                            className="key key-cancel"
+                            onPress={() => this.onCancel()}
+                        >
+                            {texts.cancel}
+                        </Interactable>
+                    </div>
+                </Matrix>
+            </>,
+            this.keyboardWrapper,
+        );
+        this.renderedLayout = 'special';
+    }
+}

package/packages/keyboard/src/MobiKeyboard/_animated.scss

@@ -0,0 +1,7 @@
+@import '@24i/bigscreen-sdk/sass-utils/transition';
+
+$transition-time: 300ms;
+
+.keyboard .key {
+    @include transition((background-color, color), $transition-time);
+}

package/packages/keyboard/src/MobiKeyboard/_sizes.1080.scss

@@ -0,0 +1,10 @@
+$key-width: 107px;
+$key-height: 70px;
+$line-height: 64px;
+$key-margin: 5px;
+$margin-horizontal: 72px;
+$margin-bottom: 45px;
+$padding: 10px;
+$font-size: 32px;
+$icon-width: 54px;
+$caps-indicator-left: 20px;

package/packages/keyboard/src/MobiKeyboard/_sizes.scss

@@ -0,0 +1,10 @@
+$key-width: 71px;
+$key-height: 47px;
+$line-height: 44px;
+$key-margin: 3px;
+$margin-horizontal: 48px;
+$margin-bottom: 30px;
+$padding: 7px;
+$font-size: 21px;
+$icon-width: 36px;
+$caps-indicator-left: 13px;

package/packages/keyboard/src/MobiKeyboard/icons/arrow_left.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="24px" viewBox="0 0 34 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icons/navigation/left/arrow-medium</title>
+    <g id="Icons/navigation/left/arrow-medium" stroke="none" stroke-width="1">
+        <path d="M20.74975,20.24975 C20.55775,20.24975 20.36575,20.17675 20.21975,20.02975 L12.71975,12.52975 C12.42675,12.23675 12.42675,11.76275 12.71975,11.46975 L20.21975,3.96975 C20.51275,3.67675 20.98675,3.67675 21.27975,3.96975 C21.57275,4.26275 21.57275,4.73675 21.27975,5.02975 L14.31075,11.99975 L21.27975,18.96975 C21.57275,19.26275 21.57275,19.73675 21.27975,20.02975 C21.13375,20.17675 20.94175,20.24975 20.74975,20.24975" id="arrow"></path>
+    </g>
+</svg>

package/packages/keyboard/src/MobiKeyboard/icons/arrow_right.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="24px" viewBox="0 0 34 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icons/navigation/right/arrow-medium</title>
+    <g id="Icons/navigation/right/arrow-medium" stroke="none" stroke-width="1">
+        <path d="M13.24975,20.24975 C13.05775,20.24975 12.86575,20.17675 12.71975,20.02975 C12.42675,19.73675 12.42675,19.26275 12.71975,18.96975 L19.68875,11.99975 L12.71975,5.02975 C12.42675,4.73675 12.42675,4.26275 12.71975,3.96975 C13.01275,3.67675 13.48675,3.67675 13.77975,3.96975 L21.27975,11.46975 C21.57275,11.76275 21.57275,12.23675 21.27975,12.52975 L13.77975,20.02975 C13.63375,20.17675 13.44175,20.24975 13.24975,20.24975" id="arrow"></path>
+    </g>
+</svg>

package/packages/keyboard/src/MobiKeyboard/icons/key_backspace.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="24px" viewBox="0 0 34 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icons/navigation/delete</title>
+    <defs>
+        <path d="M25,4 C26.1907257,4 27,4.96273397 27,6 L27,10.2990096 C27,13.603883 27,17.6301738 27,18 C27,19.036353 26.1750996,20 25,20 L13.0020501,20 L13.0020501,20 C12.8244425,20 12.6514884,19.917434 12.5015432,19.7608014 L7.17269558,12.5051098 C7.06489011,12.3925933 7,12.2031772 7,12 C7,11.7972276 7.06489011,11.6078114 7.17269558,11.4948902 L12.5018017,4.23919862 C12.651747,4.08256602 12.8247011,4 13.0020501,4 L25,4 L25,4 Z M16.1528496,8.15284963 C15.9490501,8.35664913 15.9490501,8.68704082 16.1528496,8.89084033 L19.2620093,12 L16.1528496,15.1091597 C15.9490501,15.3129592 15.9490501,15.6426553 16.1528496,15.8464548 C16.2550972,15.9487023 16.3879494,15.9994783 16.5214972,15.9994783 C16.6557406,15.9994783 16.7885928,15.9487023 16.8908403,15.8464548 L19.9993044,12.7379907 L23.1091597,15.8464548 C23.2114072,15.9487023 23.3442594,15.9994783 23.4778072,15.9994783 C23.6120506,15.9994783 23.7449028,15.9487023 23.8471504,15.8464548 C24.0509499,15.6426553 24.0509499,15.3129592 23.8471504,15.1091597 L20.7372951,12 L23.8471504,8.89084033 C24.0509499,8.68704082 24.0509499,8.35664913 23.8471504,8.15284963 C23.6433509,7.94905012 23.3129592,7.94905012 23.1091597,8.15284963 L19.9993044,11.2620093 L16.8908403,8.15284963 C16.6870408,7.94905012 16.3566491,7.94905012 16.1528496,8.15284963 Z" id="path-1"></path>
+    </defs>
+    <g id="Icons/navigation/delete" stroke="none" stroke-width="1">
+        <mask id="mask-2">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="Combined-Shape" xlink:href="#path-1"></use>
+    </g>
+</svg>

package/packages/keyboard/src/MobiKeyboard/icons/key_space.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="24px" viewBox="0 0 34 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icons/navigation/space</title>
+    <g id="Icons/navigation/space" stroke="none" stroke-width="1">
+        <path d="M26.464341,8.75125556 C26.464341,9.00167408 26.4651163,14.2462185 26.4651163,14.2462185 C26.4651163,14.3844495 26.3505116,14.496637 26.2093023,14.496637 L7.79069767,14.496637 C7.64948837,14.496637 7.53488372,14.3844495 7.53488372,14.2462185 L7.53488372,8.75125556 C7.53488372,8.45386517 7.28598022,8 6.77,8 C6.25401978,8 6,8.45386517 6,8.75125556 L6,14.2462185 C6,15.2128339 6.80325581,15.9991481 7.79069767,15.9991481 L26.2093023,15.9991481 C27.1967442,15.9991481 28,15.2128339 28,14.2462185 C28,14.2462185 27.9992248,9.00167408 27.9992248,8.75125556 C27.9992248,8.50083704 27.7964685,8 27.2492248,8 C26.701981,8 26.464341,8.50083704 26.464341,8.75125556 Z" id="Fill-1"></path>
+    </g>
+</svg>

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

@@ -0,0 +1 @@
+export { Keyboard } from './Keyboard';

package/packages/keyboard/src/MobiKeyboard/utils.ts

@@ -0,0 +1,19 @@
+/* eslint-disable no-magic-numbers */
+/* eslint-disable max-len */
+import { KeyMatrixCell } from '../types';
+
+export const makeNormalFocusStrings = (layout: KeyMatrixCell[][]) => [
+    ['special', ...layout[0], 'backspace', 'clear'],
+    [null, ...layout[1], 'done'],
+    [null, ...layout[2], 'done'],
+    [null, ...layout[3], 'left', 'right', 'done'],
+    ['shift', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'cancel'],
+];
+
+export const makeSpecialFocusStrings = (layout: KeyMatrixCell[][]) => [
+    ['special', ...layout[0], 'backspace', 'clear'],
+    [null, ...layout[1], 'done'],
+    [null, ...layout[2], 'done'],
+    [null, ...layout[3], 'left', 'right', 'right', 'done'],
+    ['space', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'cancel'],
+];

package/packages/keyboard/src/QwertyKeyboardBase/QwertyKeyboardBase.tsx

@@ -0,0 +1,54 @@
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { BaseProps, KeyboardBase } from '../KeyboardBase';
+import { KeyMatrixCell, KeyTexts } from '../types';
+
+export const KEYBOARD_ROW = 'keyboard-row';
+
+export type Layouts = 'normal' | 'special';
+
+export type Props = BaseProps<Layouts> & {
+    texts?: KeyTexts;
+    makeFocusStrings?: Record<Layouts, (base: KeyMatrixCell[][]) => KeyMatrixCell[][]>,
+};
+
+export const SPECIAL = [
+    ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')'],
+    [',', '.', '?', '…', '`', ':', ';', '"', "'", '°', '|'],
+    ['[', ']', '{', '}', '<', '>', '_', '-', '+', '=', '~'],
+    ['x', '÷', '¥', '£', '€', '¢', '/', '\\'],
+];
+
+export abstract class QwertyKeyboardBase extends KeyboardBase<Layouts, Props> {
+    renderedLayout: Layouts | undefined = undefined;
+
+    abstract renderQWERTY() : void;
+
+    abstract renderSpecial() : void;
+
+    onSpecial = () => {
+        this.renderSpecial();
+        this.matrix.current!.setIndex({ x: 0, y: 0 });
+        this.matrix.current!.focus();
+    };
+
+    onQWERTY = () => {
+        this.renderQWERTY();
+        this.matrix.current!.setIndex({ x: 0, y: 0 });
+        this.matrix.current!.focus();
+    };
+
+    generateKey = (char: string) => (
+        <Interactable
+            ref={this.keyRefs[char]}
+            className={`key key-${char}`}
+            onPress={() => this.onKey(char)}
+        >
+            {char}
+        </Interactable>
+    );
+
+    show() {
+        super.show();
+        this.renderQWERTY();
+    }
+}

package/packages/keyboard/src/ShiftMode.ts

@@ -0,0 +1,25 @@
+/**
+ * Possible modes in which the Shift key operates.
+ * - **SHIFT_ONLY** - Only one letter will be capitalized and then we switch back to lowercase.
+ * - **CAPS_ONLY** - Shift behaves like a CapsLock toggling between lowercase and uppercase.
+ * - **COMBINED** - First press is Shift, second is CapsLock, third is OFF.
+ */
+export type ShiftMode = (
+    /**
+     * Only first letter after selecting Shift will be capitalized. Then the keyboard switches
+     * back to lowercase letters. Second press on the Shift (after activating it) returns it back
+     * to lowercase letters.
+     */
+    | 'shift_only'
+    /**
+     * All letters will be capitalized until Shift is pressed again. It behaves like a CapsLock
+     * switching between lowercase and uppercase letters.
+     */
+    | 'caps_only'
+    /**
+     * After 1 press it behaves like SHIFT_ONLY mode. It capitalizes the next letter and then it
+     * reverts back to lowercase. Double press turns it to CapsLock mode and capitalizes all letters
+     * until the 3rd press that turns it off.
+     */
+    | 'combined'
+);

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

@@ -0,0 +1,159 @@
+@mixin mask-svg-icon($icon-url) {
+    -webkit-mask-image: url($icon-url);
+    -webkit-mask-size: $icon-mask-size;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-image: url($icon-url);
+    mask-size: $icon-mask-size;
+    mask-repeat: no-repeat;
+    mask-position: center;
+}
+
+.keyboard {
+    position: absolute;
+    text-align: center;
+    outline: none;
+    left: 0;
+    bottom: 0;
+    z-index: 10;
+    width: 100%;
+
+    .keyboard-wrapper {
+        padding-top: $keyboard-padding-top;
+        padding-bottom: $keyboard-padding-bottom;
+        height: 100%;
+        width: 100%;
+    }
+
+    .keys-container {
+        display: inline-block;
+        vertical-align: top;
+        margin: $keys-container-margin;
+
+        &.side-bar {
+            width: $side-bar-width;
+        }
+
+        .key-row {
+            height: $key-row-height;
+        }
+    
+        .first-row {
+            margin-bottom: $first-row-bottom-margin;
+        }
+
+        .rounded-border-container {
+            border-radius: $key-border-radius;
+            overflow: hidden;
+            box-shadow: $rounded-border-container-shadow-1 rgba(0, 0, 0, 0.2),
+                $rounded-border-container-shadow-2 rgba(0, 0, 0, 0.2);
+        }
+    }
+
+    .key {
+        display: inline-block;
+        box-sizing: border-box;
+        outline: none;
+        height: $key-height;
+        width: $key-width;
+        
+        .key-background {
+            border: $key-border-size solid transparent;
+            box-sizing: border-box;
+            position: relative;
+            padding: $key-padding;
+            vertical-align: top;
+            text-align: center;
+            overflow: hidden;
+            height: 100%;
+            width: 100%;
+        }
+
+        &:focus {
+            .key-background {
+                border-radius: $key-border-radius;
+                box-shadow: $focus-shadow-1 rgba(0, 0, 0, 0.2), $focus-shadow-2 rgba(0, 0, 0, 0.3);
+                z-index: 1;
+            }
+        }
+
+        &.key-wide {
+            width: $key-wide-width;
+
+            .key-background {
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                padding: $key-wide-padding;
+            }
+        }
+
+        &.key-with-icon {
+            .key-background {
+                padding: $key-with-icon-padding;
+            }
+        }
+
+        .key-mask-icon {
+            display: inline-block;
+            height: 100%;
+            width: 100%;
+        }
+
+        &.key-empty {
+            visibility: hidden;
+        }
+
+        &.key-space {
+            border-top-left-radius: $key-border-radius;
+            border-top-right-radius: $key-border-radius;
+            width: $key-space-width;
+        }
+
+        &.key-shift {
+            .key-mask-icon {
+                @include mask-svg-icon('./icons/key_shift.svg');
+            }
+        }
+
+        &.key-backspace {
+            .key-mask-icon {
+                @include mask-svg-icon('./icons/key_backspace.svg');
+            }
+        }
+
+        &.key-left {
+            .key-mask-icon {
+                @include mask-svg-icon('./icons/arrow_left.svg');
+            }
+        }
+
+        &.key-right {
+            .key-mask-icon {
+                @include mask-svg-icon('./icons/arrow_right.svg');
+            }
+        }
+    }
+
+    &.shift-active,
+    &.caps-active {
+        .key-layout {
+            .key-chars {
+                text-transform: uppercase;
+            }
+        }
+
+        .key.key-shift {
+            position: relative;
+
+            .key-mask-icon { 
+                @include mask-svg-icon('./icons/key_shift_active.svg');
+            }
+        }
+    }
+
+    &.caps-active .key.key-shift .key-background::before {
+        content: '⬤';
+        position: absolute;
+        font-size: 0.35em;
+    }
+}

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

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './Keyboard';

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

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './Keyboard';