@typeolymp/ui-components 2.0.2 → 2.0.4

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.
@@ -0,0 +1,11 @@
1
+ import { Locale } from "@typeolymp/utility/build/enums";
2
+ declare type TranslationsType = {
3
+ capitalLetter: string;
4
+ number: string;
5
+ specialCharacter: string;
6
+ length: string;
7
+ };
8
+ declare const translations: {
9
+ [key in Locale]: TranslationsType;
10
+ };
11
+ export default translations;
@@ -0,0 +1,5 @@
1
+ import { LocaleType } from "@typeolymp/utility/build/types";
2
+ declare const translations: {
3
+ [key in LocaleType]: string;
4
+ };
5
+ export default translations;
@@ -0,0 +1,11 @@
1
+ import { Locale } from "@typeolymp/utility/build/enums";
2
+ declare type TranslationsType = {
3
+ capitalLetter: string;
4
+ number: string;
5
+ specialCharacter: string;
6
+ length: string;
7
+ };
8
+ declare const translations: {
9
+ [key in Locale]: TranslationsType;
10
+ };
11
+ export default translations;
@@ -0,0 +1,2 @@
1
+ export declare const TabsContainer: any;
2
+ export declare const Tab: any;
@@ -0,0 +1,30 @@
1
+ declare const _default: ({
2
+ _id: string;
3
+ student: string;
4
+ exercise: string;
5
+ passed: boolean;
6
+ medal: string;
7
+ accuracy: number;
8
+ kpm: number;
9
+ hits: {
10
+ correct: number;
11
+ wrong: number;
12
+ };
13
+ seconds: number;
14
+ date: string;
15
+ } | {
16
+ _id: string;
17
+ student: string;
18
+ exercise: string;
19
+ passed: boolean;
20
+ accuracy: number;
21
+ kpm: number;
22
+ hits: {
23
+ correct: number;
24
+ wrong: number;
25
+ };
26
+ seconds: number;
27
+ date: string;
28
+ medal?: undefined;
29
+ })[];
30
+ export default _default;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,8 @@
1
+ import { FC } from "react";
2
+ export declare type PropsType = {
3
+ characters?: string[];
4
+ color?: "purple" | "yellow" | "green" | "blue" | "pink";
5
+ active?: boolean;
6
+ };
7
+ declare const Key: FC<PropsType>;
8
+ export default Key;
@@ -0,0 +1 @@
1
+ export declare const Container: any;
@@ -0,0 +1,14 @@
1
+ import { FC } from "react";
2
+ import { PropsType as KeyPropsType } from "./Key";
3
+ export declare type PropsType = {
4
+ keys?: Array<{
5
+ index: number;
6
+ key: string;
7
+ hand: "left" | "right" | "any";
8
+ color: KeyPropsType["color"];
9
+ isShiftKey: boolean;
10
+ }>;
11
+ activeKey?: string;
12
+ };
13
+ declare const Keyboard: FC<PropsType>;
14
+ export default Keyboard;
@@ -0,0 +1,6 @@
1
+ export declare const Container: any;
2
+ export declare const SpecialRow: any;
3
+ export declare const TopRow: any;
4
+ export declare const StartRow: any;
5
+ export declare const BottomRow: any;
6
+ export declare const SpacebarRow: any;
@@ -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
- hand: string;
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
- __v: number;
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.5fr;\n"], ["\n grid-template-columns: repeat(13, 1fr) 1.5fr;\n"])));
48475
- var Row2 = styled(Row)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n grid-template-columns: 1.5fr repeat(13, 1fr);\n"], ["\n grid-template-columns: 1.5fr repeat(13, 1fr);\n"])));
48476
- var Row3 = styled(Row)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n grid-template-columns: 2fr repeat(11, 1fr) 2fr;\n"], ["\n grid-template-columns: 2fr repeat(11, 1fr) 2fr;\n"])));
48477
- var Row4 = styled(Row)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject$1(["\n grid-template-columns: 2.5fr repeat(10, 1fr) 2.5fr;\n"], ["\n grid-template-columns: 2.5fr repeat(10, 1fr) 2.5fr;\n"])));
48478
- var Row5 = styled(Row)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject$1(["\n grid-template-columns: 1.5fr repeat(3, 1fr) 6fr repeat(3, 1fr) 1.5fr;\n"], ["\n grid-template-columns: 1.5fr repeat(3, 1fr) 6fr repeat(3, 1fr) 1.5fr;\n"])));
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[89].character,
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[89].character, jsx$1("br", {}), keys[44].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48564
- keys[87].character,
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[87].character, jsx$1("br", {}), keys[42].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48567
- keys[85].character,
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[85].character, jsx$1("br", {}), keys[40].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48570
- keys[83].character,
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[83].character, jsx$1("br", {}), keys[38].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48573
- keys[81].character,
48574
- keys[36].character,
48575
- ]) }, { children: [keys[81].character, jsx$1("br", {}), keys[36].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48576
- keys[91].character,
48577
- keys[46].character,
48578
- ]) }, { children: [keys[91].character, jsx$1("br", {}), keys[46].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
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[39].character,
48590
- ]) }, { children: [keys[84].character, jsx$1("br", {}), keys[39].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
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[41].character,
48593
- ]) }, { children: [keys[86].character, jsx$1("br", {}), keys[41].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
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[88].character, jsx$1("br", {}), keys[43].character] })), jsx$1(Key, {})] }), jsxs(Row2, { children: [jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48597
- keys[65].character,
48598
- keys[20].character,
48599
- ]) }, { children: keys[65].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
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[23].character,
48614
- ]) }, { children: keys[68].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48615
- keys[58].character,
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[64].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
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", {}), !["ğ", "q"].includes(keys[23].character) && 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[67].character, jsx$1("br", {}), keys[22].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48630
- keys[66].character,
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", {}), !["ü", "w"].includes(keys[22].character) && 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[54].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48636
- keys[52].character,
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[52].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48639
- keys[50].character,
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[50].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48642
- keys[48].character,
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[48].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48645
- keys[57].character,
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[57].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
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[4].character,
48656
- ]) }, { children: keys[49].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
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[6].character,
48659
- ]) }, { children: keys[51].character })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
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[8].character,
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", {}), !["ş", "y"].includes(keys[8].character) && 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[55].character, jsx$1("br", {}), keys[10].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" }) })) })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48666
- keys[77].character,
48667
- keys[32].character,
48668
- ]) }, { children: keys[77].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
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", {}), !["i", "ş"].includes(keys[10].character) && 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", {}), !["x"].includes(keys[11].character) && 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
- ]) }, { children: keys[79].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
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: [keys[76].character, jsx$1("br", {}), keys[31].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, {})] })] }));
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", {}), !["m", "s"].includes(keys[26].character) && 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", {}), !["ö", "b"].includes(keys[28].character) && 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", {}), !["ç"].includes(keys[30].character) && 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"])));