@typeolymp/ui-components 2.0.4 → 2.1.0

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.
@@ -1,4 +1,4 @@
1
- declare const _default: ({
1
+ declare const _default: {
2
2
  _id: {
3
3
  $oid: string;
4
4
  };
@@ -10,17 +10,5 @@ declare const _default: ({
10
10
  key: string;
11
11
  code: string;
12
12
  isShiftKey: boolean;
13
- } | {
14
- _id: {
15
- $oid: string;
16
- };
17
- keyboardLayout: string;
18
- index: string;
19
- color: string;
20
- finger: string;
21
- hand: string;
22
- key: string;
23
- code: string;
24
- isShiftKey: boolean;
25
- })[];
13
+ }[];
26
14
  export default _default;
package/build/index.es.js CHANGED
@@ -48558,147 +48558,145 @@ 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[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
48561
  keys[91].character,
48565
- keys[44].character,
48566
- ]) }, { children: [keys[91].character, jsx$1("br", {}), keys[44].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48562
+ keys[45].character,
48563
+ ]) }, { children: [keys[91].character, jsx$1("br", {}), keys[45].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48567
48564
  keys[89].character,
48568
- keys[42].character,
48569
- ]) }, { children: [keys[89].character, jsx$1("br", {}), keys[42].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48565
+ keys[43].character,
48566
+ ]) }, { children: [keys[89].character, jsx$1("br", {}), keys[43].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48570
48567
  keys[87].character,
48571
- keys[40].character,
48572
- ]) }, { children: [keys[87].character, jsx$1("br", {}), keys[40].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48568
+ keys[41].character,
48569
+ ]) }, { children: [keys[87].character, jsx$1("br", {}), keys[41].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48573
48570
  keys[85].character,
48574
- keys[38].character,
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,
48571
+ keys[39].character,
48572
+ ]) }, { children: [keys[85].character, jsx$1("br", {}), keys[39].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48573
+ keys[83].character,
48574
+ keys[37].character,
48575
+ ]) }, { children: [keys[83].character, jsx$1("br", {}), keys[37].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48576
+ keys[93].character,
48580
48577
  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, [
48578
+ ]) }, { children: [keys[93].character, jsx$1("br", {}), keys[47].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48579
+ keys[92].character,
48580
+ keys[46].character,
48581
+ ]) }, { children: [keys[92].character, jsx$1("br", {}), keys[46].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48582
+ keys[82].character,
48583
+ keys[36].character,
48584
+ ]) }, { children: [keys[82].character, jsx$1("br", {}), keys[36].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48582
48585
  keys[84].character,
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, [
48586
+ keys[38].character,
48587
+ ]) }, { children: [keys[84].character, jsx$1("br", {}), keys[38].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48585
48588
  keys[86].character,
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, [
48589
+ keys[40].character,
48590
+ ]) }, { children: [keys[86].character, jsx$1("br", {}), keys[40].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48588
48591
  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, [
48592
+ keys[42].character,
48593
+ ]) }, { children: [keys[88].character, jsx$1("br", {}), keys[42].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48591
48594
  keys[90].character,
48592
- keys[43].character,
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, [
48597
- keys[68].character,
48595
+ keys[44].character,
48596
+ ]) }, { children: [keys[90].character, jsx$1("br", {}), keys[44].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[67].character,
48598
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,
48599
+ ]) }, { children: keys[67].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48600
+ keys[65].character,
48601
48601
  keys[19].character,
48602
- ]) }, { children: keys[66].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48603
- keys[64].character,
48602
+ ]) }, { children: keys[65].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48603
+ keys[63].character,
48604
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,
48605
+ ]) }, { children: keys[63].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48606
+ keys[61].character,
48607
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, [
48608
+ ]) }, { children: keys[61].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48612
48609
  keys[71].character,
48613
- keys[24].character,
48610
+ keys[25].character,
48614
48611
  ]) }, { children: keys[71].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48615
- keys[61].character,
48612
+ keys[70].character,
48613
+ keys[24].character,
48614
+ ]) }, { children: keys[70].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48615
+ keys[60].character,
48616
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,
48617
+ ]) }, { children: keys[60].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48618
+ keys[62].character,
48619
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,
48620
+ ]) }, { children: keys[62].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48621
+ keys[64].character,
48622
48622
  keys[18].character,
48623
- ]) }, { children: keys[65].character })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48624
- keys[67].character,
48623
+ ]) }, { children: keys[64].character })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48624
+ keys[66].character,
48625
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, [
48626
+ ]) }, { children: keys[66].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48630
48627
  keys[69].character,
48628
+ keys[23].character,
48629
+ ]) }, { children: [keys[69].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[68].character,
48631
48631
  keys[22].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,
48632
+ ]) }, { children: [keys[68].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[55].character,
48634
48634
  keys[9].character,
48635
- ]) }, { children: keys[56].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48636
- keys[54].character,
48635
+ ]) }, { children: keys[55].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48636
+ keys[53].character,
48637
48637
  keys[7].character,
48638
- ]) }, { children: keys[54].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48639
- keys[52].character,
48638
+ ]) }, { children: keys[53].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48639
+ keys[51].character,
48640
48640
  keys[5].character,
48641
- ]) }, { children: keys[52].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48642
- keys[50].character,
48641
+ ]) }, { children: keys[51].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48642
+ keys[49].character,
48643
48643
  keys[3].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, [
48644
+ ]) }, { children: keys[49].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48648
48645
  keys[59].character,
48649
- keys[12].character,
48646
+ keys[13].character,
48650
48647
  ]) }, { children: keys[59].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48651
- keys[49].character,
48648
+ keys[58].character,
48649
+ keys[12].character,
48650
+ ]) }, { children: keys[58].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48651
+ keys[48].character,
48652
48652
  keys[2].character,
48653
- ]) }, { children: keys[49].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48654
- keys[51].character,
48653
+ ]) }, { children: keys[48].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48654
+ keys[50].character,
48655
48655
  keys[4].character,
48656
- ]) }, { children: keys[51].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48657
- keys[53].character,
48656
+ ]) }, { children: keys[50].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48657
+ keys[52].character,
48658
48658
  keys[6].character,
48659
- ]) }, { children: keys[53].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48660
- keys[55].character,
48659
+ ]) }, { children: keys[52].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48660
+ keys[54].character,
48661
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,
48662
+ ]) }, { children: [keys[54].character, jsx$1("br", {}), !["ş", "y", "ö", "m"].includes(keys[8].character) &&
48663
+ keys[8].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48664
+ keys[56].character,
48664
48665
  keys[10].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,
48666
+ ]) }, { children: [keys[56].character, jsx$1("br", {}), !["i", "ş", "ä"].includes(keys[10].character) && keys[10].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48667
+ keys[57].character,
48667
48668
  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, [
48669
- keys[34].character,
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,
48669
+ ]) }, { children: [keys[57].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" }) })) })), jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48670
+ keys[79].character,
48673
48671
  keys[33].character,
48674
- ]) }, { children: keys[80].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48675
- keys[78].character,
48672
+ ]) }, { children: keys[79].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48673
+ keys[77].character,
48676
48674
  keys[31].character,
48677
- ]) }, { children: keys[78].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48678
- keys[76].character,
48675
+ ]) }, { children: keys[77].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48676
+ keys[75].character,
48679
48677
  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,
48678
+ ]) }, { children: keys[75].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48679
+ keys[73].character,
48682
48680
  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,
48681
+ ]) }, { children: keys[73].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48682
+ keys[81].character,
48688
48683
  keys[35].character,
48689
- ]) }, { children: keys[82].character })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48690
- keys[73].character,
48684
+ ]) }, { children: keys[81].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48685
+ keys[80].character,
48686
+ keys[34].character,
48687
+ ]) }, { children: keys[80].character })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48688
+ keys[72].character,
48691
48689
  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,
48690
+ ]) }, { children: [keys[72].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, [
48691
+ keys[74].character,
48694
48692
  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,
48693
+ ]) }, { children: [keys[74].character, jsx$1("br", {}), !["ö", "b"].includes(keys[28].character) && keys[28].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48694
+ keys[76].character,
48697
48695
  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,
48696
+ ]) }, { children: [keys[76].character, jsx$1("br", {}), !["ç"].includes(keys[30].character) && keys[30].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48697
+ keys[78].character,
48700
48698
  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, {})] })] }));
48699
+ ]) }, { children: [keys[78].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, {})] })] }));
48702
48700
  };
48703
48701
 
48704
48702
  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"])));