@typeolymp/ui-components 2.0.2 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/organisms/Keyboard/keys.d.ts +17 -5
- package/build/index.es.js +124 -118
- package/build/index.es.js.map +1 -1
- package/build/index.js +124 -118
- package/build/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,14 +1,26 @@
|
|
|
1
|
-
declare const _default: {
|
|
1
|
+
declare const _default: ({
|
|
2
2
|
_id: {
|
|
3
3
|
$oid: string;
|
|
4
4
|
};
|
|
5
|
-
key: string;
|
|
6
5
|
keyboardLayout: string;
|
|
7
6
|
index: number;
|
|
8
|
-
|
|
7
|
+
color: string;
|
|
9
8
|
finger: string;
|
|
9
|
+
hand: string;
|
|
10
|
+
key: string;
|
|
11
|
+
code: string;
|
|
12
|
+
isShiftKey: boolean;
|
|
13
|
+
} | {
|
|
14
|
+
_id: {
|
|
15
|
+
$oid: string;
|
|
16
|
+
};
|
|
17
|
+
keyboardLayout: string;
|
|
18
|
+
index: string;
|
|
10
19
|
color: string;
|
|
20
|
+
finger: string;
|
|
21
|
+
hand: string;
|
|
22
|
+
key: string;
|
|
23
|
+
code: string;
|
|
11
24
|
isShiftKey: boolean;
|
|
12
|
-
|
|
13
|
-
}[];
|
|
25
|
+
})[];
|
|
14
26
|
export default _default;
|
package/build/index.es.js
CHANGED
|
@@ -3905,13 +3905,13 @@ var KeyboardLayout = {};
|
|
|
3905
3905
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3906
3906
|
exports.KeyboardLayout = void 0;
|
|
3907
3907
|
(function (KeyboardLayout) {
|
|
3908
|
-
KeyboardLayout["QWERTY_NL"] = "qwerty-nl";
|
|
3909
|
-
KeyboardLayout["QWERTY_UK"] = "qwerty-uk";
|
|
3910
|
-
KeyboardLayout["QWERTY_US"] = "qwerty-us";
|
|
3911
|
-
KeyboardLayout["QWERTY_TR"] = "qwerty-tr";
|
|
3912
3908
|
KeyboardLayout["AZERTY_BE"] = "azerty-be";
|
|
3913
3909
|
KeyboardLayout["AZERTY_FR"] = "azerty-fr";
|
|
3910
|
+
KeyboardLayout["QWERTY_NL"] = "qwerty-nl";
|
|
3911
|
+
KeyboardLayout["QWERTY_UK"] = "qwerty-uk";
|
|
3914
3912
|
KeyboardLayout["QWERTZ_DE"] = "qwertz-de";
|
|
3913
|
+
KeyboardLayout["TURKISH_Q"] = "turkish-q";
|
|
3914
|
+
KeyboardLayout["TURKISH_F"] = "turkish-f";
|
|
3915
3915
|
})(exports.KeyboardLayout || (exports.KeyboardLayout = {}));
|
|
3916
3916
|
|
|
3917
3917
|
}(KeyboardLayout));
|
|
@@ -48471,11 +48471,11 @@ var Form = forwardRef(function (props, ref) {
|
|
|
48471
48471
|
|
|
48472
48472
|
var Container$3 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n min-width: 720px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n box-sizing: border-box;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n min-width: 720px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n box-sizing: border-box;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.lightGray.darker);
|
|
48473
48473
|
var Row = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$1(["\n min-height: 40px;\n height: 100%;\n display: grid;\n gap: 7px;\n"], ["\n min-height: 40px;\n height: 100%;\n display: grid;\n gap: 7px;\n"])));
|
|
48474
|
-
var Row1 = styled(Row)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n grid-template-columns: repeat(13, 1fr) 1.
|
|
48475
|
-
var Row2 = styled(Row)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n grid-template-columns: 1.5fr repeat(
|
|
48476
|
-
var Row3 = styled(Row)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n grid-template-columns: 2fr repeat(
|
|
48477
|
-
var Row4 = styled(Row)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject$1(["\n grid-template-columns:
|
|
48478
|
-
var Row5 = styled(Row)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject$1(["\n grid-template-columns: 1.
|
|
48474
|
+
var Row1 = styled(Row)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n grid-template-columns: repeat(13, 1fr) 1.75fr;\n"], ["\n grid-template-columns: repeat(13, 1fr) 1.75fr;\n"])));
|
|
48475
|
+
var Row2 = styled(Row)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n grid-template-columns: 1.5fr repeat(12, 1fr) 1.25fr;\n\n > div:last-child {\n border-radius: 6px 6px 0;\n }\n"], ["\n grid-template-columns: 1.5fr repeat(12, 1fr) 1.25fr;\n\n > div:last-child {\n border-radius: 6px 6px 0;\n }\n"])));
|
|
48476
|
+
var Row3 = styled(Row)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n grid-template-columns: 2fr repeat(12, 1fr) 0.75fr;\n\n > div:last-child {\n margin-top: -11px;\n border-top: none;\n border-radius: 0 0 6px 6px;\n }\n"], ["\n grid-template-columns: 2fr repeat(12, 1fr) 0.75fr;\n\n > div:last-child {\n margin-top: -11px;\n border-top: none;\n border-radius: 0 0 6px 6px;\n }\n"])));
|
|
48477
|
+
var Row4 = styled(Row)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject$1(["\n grid-template-columns: 1.5fr repeat(11, 1fr) 2.5fr;\n"], ["\n grid-template-columns: 1.5fr repeat(11, 1fr) 2.5fr;\n"])));
|
|
48478
|
+
var Row5 = styled(Row)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject$1(["\n grid-template-columns: 1.75fr repeat(3, 1fr) 6fr repeat(3, 1fr) 1.85fr;\n"], ["\n grid-template-columns: 1.75fr repeat(3, 1fr) 6fr repeat(3, 1fr) 1.85fr;\n"])));
|
|
48479
48479
|
var Key = styled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: ", ";\n\n border: 1px solid;\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n padding: 0 10px;\n\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n border-color: ", ";\n\n svg {\n fill: ", ";\n stroke: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: ", ";\n\n border: 1px solid;\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n padding: 0 10px;\n\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n border-color: ", ";\n\n svg {\n fill: ", ";\n stroke: ", ";\n }\n"])), function (_a) {
|
|
48480
48480
|
var align = _a.align;
|
|
48481
48481
|
if (!align)
|
|
@@ -48558,141 +48558,147 @@ var Keyboard = function (props) {
|
|
|
48558
48558
|
if (!keys)
|
|
48559
48559
|
return jsx$1(Fragment$1, {});
|
|
48560
48560
|
return (jsxs(Container$3, { children: [jsxs(Row1, { children: [jsx$1(Key, {}), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48561
|
-
keys[
|
|
48561
|
+
keys[93].character,
|
|
48562
|
+
keys[46].character,
|
|
48563
|
+
]) }, { children: [keys[93].character, jsx$1("br", {}), keys[46].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48564
|
+
keys[91].character,
|
|
48562
48565
|
keys[44].character,
|
|
48563
|
-
]) }, { children: [keys[
|
|
48564
|
-
keys[
|
|
48566
|
+
]) }, { children: [keys[91].character, jsx$1("br", {}), keys[44].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48567
|
+
keys[89].character,
|
|
48565
48568
|
keys[42].character,
|
|
48566
|
-
]) }, { children: [keys[
|
|
48567
|
-
keys[
|
|
48569
|
+
]) }, { children: [keys[89].character, jsx$1("br", {}), keys[42].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48570
|
+
keys[87].character,
|
|
48568
48571
|
keys[40].character,
|
|
48569
|
-
]) }, { children: [keys[
|
|
48570
|
-
keys[
|
|
48572
|
+
]) }, { children: [keys[87].character, jsx$1("br", {}), keys[40].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48573
|
+
keys[85].character,
|
|
48571
48574
|
keys[38].character,
|
|
48572
|
-
]) }, { children: [keys[
|
|
48573
|
-
keys[
|
|
48574
|
-
keys[
|
|
48575
|
-
]) }, { children: [keys[
|
|
48576
|
-
keys[
|
|
48577
|
-
keys[
|
|
48578
|
-
]) }, { children: [keys[
|
|
48579
|
-
keys[90].character,
|
|
48580
|
-
keys[45].character,
|
|
48581
|
-
]) }, { children: [keys[90].character, jsx$1("br", {}), keys[45].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48582
|
-
keys[80].character,
|
|
48583
|
-
keys[35].character,
|
|
48584
|
-
]) }, { children: [keys[80].character, jsx$1("br", {}), keys[35].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48585
|
-
keys[82].character,
|
|
48586
|
-
keys[37].character,
|
|
48587
|
-
]) }, { children: [keys[82].character, jsx$1("br", {}), keys[37].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48575
|
+
]) }, { children: [keys[85].character, jsx$1("br", {}), keys[38].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48576
|
+
keys[95].character,
|
|
48577
|
+
keys[48].character,
|
|
48578
|
+
]) }, { children: [keys[95].character, jsx$1("br", {}), keys[48].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48579
|
+
keys[94].character,
|
|
48580
|
+
keys[47].character,
|
|
48581
|
+
]) }, { children: [keys[94].character, jsx$1("br", {}), keys[47].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48588
48582
|
keys[84].character,
|
|
48589
|
-
keys[
|
|
48590
|
-
]) }, { children: [keys[84].character, jsx$1("br", {}), keys[
|
|
48583
|
+
keys[37].character,
|
|
48584
|
+
]) }, { children: [keys[84].character, jsx$1("br", {}), keys[37].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48591
48585
|
keys[86].character,
|
|
48592
|
-
keys[
|
|
48593
|
-
]) }, { children: [keys[86].character, jsx$1("br", {}), keys[
|
|
48586
|
+
keys[39].character,
|
|
48587
|
+
]) }, { children: [keys[86].character, jsx$1("br", {}), keys[39].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48594
48588
|
keys[88].character,
|
|
48589
|
+
keys[41].character,
|
|
48590
|
+
]) }, { children: [keys[88].character, jsx$1("br", {}), keys[41].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48591
|
+
keys[90].character,
|
|
48595
48592
|
keys[43].character,
|
|
48596
|
-
]) }, { children: [keys[
|
|
48597
|
-
keys[
|
|
48598
|
-
keys[
|
|
48599
|
-
]) }, { children: keys[
|
|
48600
|
-
keys[63].character,
|
|
48601
|
-
keys[18].character,
|
|
48602
|
-
]) }, { children: keys[63].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48603
|
-
keys[61].character,
|
|
48604
|
-
keys[16].character,
|
|
48605
|
-
]) }, { children: keys[61].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48606
|
-
keys[59].character,
|
|
48607
|
-
keys[14].character,
|
|
48608
|
-
]) }, { children: keys[59].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48609
|
-
keys[69].character,
|
|
48610
|
-
keys[24].character,
|
|
48611
|
-
]) }, { children: keys[69].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48593
|
+
]) }, { children: [keys[90].character, jsx$1("br", {}), keys[43].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48594
|
+
keys[92].character,
|
|
48595
|
+
keys[45].character,
|
|
48596
|
+
]) }, { children: [keys[92].character, jsx$1("br", {}), keys[45].character] })), jsx$1(Key, {})] }), jsxs(Row2, { children: [jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48612
48597
|
keys[68].character,
|
|
48613
|
-
keys[
|
|
48614
|
-
]) }, { children: keys[68].character })), jsx$1(Key, __assign$2({ color: enums.Color.
|
|
48615
|
-
keys[
|
|
48616
|
-
keys[13].character,
|
|
48617
|
-
]) }, { children: keys[58].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48618
|
-
keys[60].character,
|
|
48619
|
-
keys[15].character,
|
|
48620
|
-
]) }, { children: keys[60].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48621
|
-
keys[62].character,
|
|
48622
|
-
keys[17].character,
|
|
48623
|
-
]) }, { children: keys[62].character })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48624
|
-
keys[64].character,
|
|
48598
|
+
keys[21].character,
|
|
48599
|
+
]) }, { children: keys[68].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48600
|
+
keys[66].character,
|
|
48625
48601
|
keys[19].character,
|
|
48626
|
-
]) }, { children: keys[
|
|
48602
|
+
]) }, { children: keys[66].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48603
|
+
keys[64].character,
|
|
48604
|
+
keys[17].character,
|
|
48605
|
+
]) }, { children: keys[64].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48606
|
+
keys[62].character,
|
|
48607
|
+
keys[15].character,
|
|
48608
|
+
]) }, { children: keys[62].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48609
|
+
keys[72].character,
|
|
48610
|
+
keys[25].character,
|
|
48611
|
+
]) }, { children: keys[72].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48612
|
+
keys[71].character,
|
|
48613
|
+
keys[24].character,
|
|
48614
|
+
]) }, { children: keys[71].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48615
|
+
keys[61].character,
|
|
48616
|
+
keys[14].character,
|
|
48617
|
+
]) }, { children: keys[61].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48618
|
+
keys[63].character,
|
|
48619
|
+
keys[16].character,
|
|
48620
|
+
]) }, { children: keys[63].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48621
|
+
keys[65].character,
|
|
48622
|
+
keys[18].character,
|
|
48623
|
+
]) }, { children: keys[65].character })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48627
48624
|
keys[67].character,
|
|
48625
|
+
keys[20].character,
|
|
48626
|
+
]) }, { children: keys[67].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48627
|
+
keys[70].character,
|
|
48628
|
+
keys[23].character,
|
|
48629
|
+
]) }, { children: [keys[70].character, jsx$1("br", {}), keys[23].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48630
|
+
keys[69].character,
|
|
48628
48631
|
keys[22].character,
|
|
48629
|
-
]) }, { children: [keys[
|
|
48630
|
-
keys[
|
|
48631
|
-
keys[21].character,
|
|
48632
|
-
]) }, { children: [keys[66].character, jsx$1("br", {}), keys[21].character] })), jsx$1(Key, {})] }), jsxs(Row3, { children: [jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48633
|
-
keys[54].character,
|
|
48632
|
+
]) }, { children: [keys[69].character, jsx$1("br", {}), keys[22].character] })), jsx$1(Key, {})] }), jsxs(Row3, { children: [jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48633
|
+
keys[56].character,
|
|
48634
48634
|
keys[9].character,
|
|
48635
|
-
]) }, { children: keys[
|
|
48636
|
-
keys[
|
|
48635
|
+
]) }, { children: keys[56].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48636
|
+
keys[54].character,
|
|
48637
48637
|
keys[7].character,
|
|
48638
|
-
]) }, { children: keys[
|
|
48639
|
-
keys[
|
|
48638
|
+
]) }, { children: keys[54].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48639
|
+
keys[52].character,
|
|
48640
48640
|
keys[5].character,
|
|
48641
|
-
]) }, { children: keys[
|
|
48642
|
-
keys[
|
|
48641
|
+
]) }, { children: keys[52].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48642
|
+
keys[50].character,
|
|
48643
48643
|
keys[3].character,
|
|
48644
|
-
]) }, { children: keys[
|
|
48645
|
-
keys[
|
|
48644
|
+
]) }, { children: keys[50].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48645
|
+
keys[60].character,
|
|
48646
|
+
keys[13].character,
|
|
48647
|
+
]) }, { children: keys[60].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48648
|
+
keys[59].character,
|
|
48646
48649
|
keys[12].character,
|
|
48647
|
-
]) }, { children: keys[
|
|
48648
|
-
keys[56].character,
|
|
48649
|
-
keys[11].character,
|
|
48650
|
-
]) }, { children: keys[56].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48651
|
-
keys[47].character,
|
|
48652
|
-
keys[2].character,
|
|
48653
|
-
]) }, { children: keys[47].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48650
|
+
]) }, { children: keys[59].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48654
48651
|
keys[49].character,
|
|
48655
|
-
keys[
|
|
48656
|
-
]) }, { children: keys[49].character })), jsx$1(Key, __assign$2({ color: enums.Color.
|
|
48652
|
+
keys[2].character,
|
|
48653
|
+
]) }, { children: keys[49].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48657
48654
|
keys[51].character,
|
|
48658
|
-
keys[
|
|
48659
|
-
]) }, { children: keys[51].character })), jsx$1(Key, __assign$2({ color: enums.Color.
|
|
48655
|
+
keys[4].character,
|
|
48656
|
+
]) }, { children: keys[51].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48660
48657
|
keys[53].character,
|
|
48661
|
-
keys[
|
|
48658
|
+
keys[6].character,
|
|
48662
48659
|
]) }, { children: keys[53].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48663
48660
|
keys[55].character,
|
|
48661
|
+
keys[8].character,
|
|
48662
|
+
]) }, { children: [keys[55].character, jsx$1("br", {}), keys[8].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48663
|
+
keys[57].character,
|
|
48664
48664
|
keys[10].character,
|
|
48665
|
-
]) }, { children: [keys[
|
|
48666
|
-
keys[
|
|
48667
|
-
keys[
|
|
48668
|
-
]) }, { children: keys[
|
|
48669
|
-
keys[75].character,
|
|
48670
|
-
keys[30].character,
|
|
48671
|
-
]) }, { children: keys[75].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48672
|
-
keys[73].character,
|
|
48673
|
-
keys[28].character,
|
|
48674
|
-
]) }, { children: keys[73].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48675
|
-
keys[71].character,
|
|
48676
|
-
keys[26].character,
|
|
48677
|
-
]) }, { children: keys[71].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48678
|
-
keys[79].character,
|
|
48665
|
+
]) }, { children: [keys[57].character, jsx$1("br", {}), keys[10].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48666
|
+
keys[58].character,
|
|
48667
|
+
keys[11].character,
|
|
48668
|
+
]) }, { children: [keys[58].character, jsx$1("br", {}), keys[11].character] })), jsx$1(Key, {})] }), jsxs(Row4, { children: [jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.right), align: "left" }, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsx$1("path", { d: "M22.7202 6.39735C23.9548 5.08044 26.0452 5.08044 27.2798 6.39735L47.1107 27.5503C48.9818 29.5461 47.5666 32.8126 44.8309 32.8126H35.9375V42.1876C35.9375 43.9135 34.5384 45.3126 32.8125 45.3126H17.1875C15.4616 45.3126 14.0625 43.9135 14.0625 42.1876V32.8126H5.1691C2.43335 32.8126 1.0182 29.5461 2.8893 27.5503L22.7202 6.39735ZM44.8309 29.6876L25 8.53467L5.1691 29.6876H14.0625C15.7884 29.6876 17.1875 31.0867 17.1875 32.8126V42.1876H32.8125V32.8126C32.8125 31.0867 34.2116 29.6876 35.9375 29.6876L44.8309 29.6876Z" }) })) })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48679
48669
|
keys[34].character,
|
|
48680
|
-
|
|
48670
|
+
keys[81].character,
|
|
48671
|
+
]) }, { children: [keys[81].character, jsx$1("br", {}), keys[34].character] })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48672
|
+
keys[80].character,
|
|
48673
|
+
keys[33].character,
|
|
48674
|
+
]) }, { children: keys[80].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48681
48675
|
keys[78].character,
|
|
48682
|
-
keys[30].character,
|
|
48683
|
-
]) }, { children: keys[78].character })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48684
|
-
keys[70].character,
|
|
48685
|
-
keys[25].character,
|
|
48686
|
-
]) }, { children: [keys[70].character, jsx$1("br", {}), keys[25].character !== "m" && keys[25].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48687
|
-
keys[72].character,
|
|
48688
|
-
keys[27].character,
|
|
48689
|
-
]) }, { children: [keys[72].character, jsx$1("br", {}), keys[27].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48690
|
-
keys[74].character,
|
|
48691
|
-
keys[29].character,
|
|
48692
|
-
]) }, { children: [keys[74].character, jsx$1("br", {}), keys[29].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48693
|
-
keys[76].character,
|
|
48694
48676
|
keys[31].character,
|
|
48695
|
-
]) }, { children:
|
|
48677
|
+
]) }, { children: keys[78].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48678
|
+
keys[76].character,
|
|
48679
|
+
keys[29].character,
|
|
48680
|
+
]) }, { children: keys[76].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48681
|
+
keys[74].character,
|
|
48682
|
+
keys[27].character,
|
|
48683
|
+
]) }, { children: keys[74].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48684
|
+
keys[83].character,
|
|
48685
|
+
keys[36].character,
|
|
48686
|
+
]) }, { children: keys[83].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48687
|
+
keys[82].character,
|
|
48688
|
+
keys[35].character,
|
|
48689
|
+
]) }, { children: keys[82].character })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48690
|
+
keys[73].character,
|
|
48691
|
+
keys[26].character,
|
|
48692
|
+
]) }, { children: [keys[73].character, jsx$1("br", {}), keys[26].character !== "m" && keys[26].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48693
|
+
keys[75].character,
|
|
48694
|
+
keys[28].character,
|
|
48695
|
+
]) }, { children: [keys[75].character, jsx$1("br", {}), keys[28].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48696
|
+
keys[77].character,
|
|
48697
|
+
keys[30].character,
|
|
48698
|
+
]) }, { children: [keys[77].character, jsx$1("br", {}), keys[30].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48699
|
+
keys[79].character,
|
|
48700
|
+
keys[32].character,
|
|
48701
|
+
]) }, { children: [keys[79].character, jsx$1("br", {}), keys[32].character] })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.left), align: "right" }, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsx$1("path", { d: "M22.7202 6.39735C23.9548 5.08044 26.0452 5.08044 27.2798 6.39735L47.1107 27.5503C48.9818 29.5461 47.5666 32.8126 44.8309 32.8126H35.9375V42.1876C35.9375 43.9135 34.5384 45.3126 32.8125 45.3126H17.1875C15.4616 45.3126 14.0625 43.9135 14.0625 42.1876V32.8126H5.1691C2.43335 32.8126 1.0182 29.5461 2.8893 27.5503L22.7202 6.39735ZM44.8309 29.6876L25 8.53467L5.1691 29.6876H14.0625C15.7884 29.6876 17.1875 31.0867 17.1875 32.8126V42.1876H32.8125V32.8126C32.8125 31.0867 34.2116 29.6876 35.9375 29.6876L44.8309 29.6876Z" }) })) }))] }), jsxs(Row5, { children: [jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.PINK, isActive: containsAny(props.activeKeys, [keys[1].character]) }, { children: jsx$1("svg", __assign$2({ width: "24", height: "6", viewBox: "0 0 28 7", style: { marginTop: 10 }, fill: theme.colors.pink.dark }, { children: jsx$1("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) })) })), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {})] })] }));
|
|
48696
48702
|
};
|
|
48697
48703
|
|
|
48698
48704
|
var Mask = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject$1(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n overflow: auto;\n"], ["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n overflow: auto;\n"])));
|