@typeolymp/ui-components 2.0.0 → 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/index.js CHANGED
@@ -3932,13 +3932,13 @@ var KeyboardLayout = {};
3932
3932
  Object.defineProperty(exports, "__esModule", { value: true });
3933
3933
  exports.KeyboardLayout = void 0;
3934
3934
  (function (KeyboardLayout) {
3935
- KeyboardLayout["QWERTY_NL"] = "qwerty-nl";
3936
3935
  KeyboardLayout["AZERTY_BE"] = "azerty-be";
3936
+ KeyboardLayout["AZERTY_FR"] = "azerty-fr";
3937
+ KeyboardLayout["QWERTY_NL"] = "qwerty-nl";
3937
3938
  KeyboardLayout["QWERTY_UK"] = "qwerty-uk";
3938
- // QWERTY_US = "qwerty-us",
3939
- // QWERTY_TR = "qwerty-tr",
3940
- // AZERTY_FR = "azerty-fr",
3941
- // QWERTZ_DE = "qwertz-de",
3939
+ KeyboardLayout["QWERTZ_DE"] = "qwertz-de";
3940
+ KeyboardLayout["TURKISH_Q"] = "turkish-q";
3941
+ KeyboardLayout["TURKISH_F"] = "turkish-f";
3942
3942
  })(exports.KeyboardLayout || (exports.KeyboardLayout = {}));
3943
3943
 
3944
3944
  }(KeyboardLayout));
@@ -48498,11 +48498,11 @@ var Form = React$3.forwardRef(function (props, ref) {
48498
48498
 
48499
48499
  var Container$3 = styled__default["default"].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);
48500
48500
  var Row = styled__default["default"].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"])));
48501
- var Row1 = styled__default["default"](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"])));
48502
- var Row2 = styled__default["default"](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"])));
48503
- var Row3 = styled__default["default"](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"])));
48504
- var Row4 = styled__default["default"](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"])));
48505
- var Row5 = styled__default["default"](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"])));
48501
+ var Row1 = styled__default["default"](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"])));
48502
+ var Row2 = styled__default["default"](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"])));
48503
+ var Row3 = styled__default["default"](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"])));
48504
+ var Row4 = styled__default["default"](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"])));
48505
+ var Row5 = styled__default["default"](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"])));
48506
48506
  var Key = styled__default["default"].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) {
48507
48507
  var align = _a.align;
48508
48508
  if (!align)
@@ -48585,141 +48585,147 @@ var Keyboard = function (props) {
48585
48585
  if (!keys)
48586
48586
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
48587
48587
  return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsxs(Row1, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48588
- keys[89].character,
48588
+ keys[93].character,
48589
+ keys[46].character,
48590
+ ]) }, { children: [keys[93].character, jsxRuntime.jsx("br", {}), keys[46].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48591
+ keys[91].character,
48589
48592
  keys[44].character,
48590
- ]) }, { children: [keys[89].character, jsxRuntime.jsx("br", {}), keys[44].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48591
- keys[87].character,
48593
+ ]) }, { children: [keys[91].character, jsxRuntime.jsx("br", {}), keys[44].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48594
+ keys[89].character,
48592
48595
  keys[42].character,
48593
- ]) }, { children: [keys[87].character, jsxRuntime.jsx("br", {}), keys[42].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48594
- keys[85].character,
48596
+ ]) }, { children: [keys[89].character, jsxRuntime.jsx("br", {}), keys[42].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48597
+ keys[87].character,
48595
48598
  keys[40].character,
48596
- ]) }, { children: [keys[85].character, jsxRuntime.jsx("br", {}), keys[40].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48597
- keys[83].character,
48599
+ ]) }, { children: [keys[87].character, jsxRuntime.jsx("br", {}), keys[40].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48600
+ keys[85].character,
48598
48601
  keys[38].character,
48599
- ]) }, { children: [keys[83].character, jsxRuntime.jsx("br", {}), keys[38].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48600
- keys[81].character,
48601
- keys[36].character,
48602
- ]) }, { children: [keys[81].character, jsxRuntime.jsx("br", {}), keys[36].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48603
- keys[91].character,
48604
- keys[46].character,
48605
- ]) }, { children: [keys[91].character, jsxRuntime.jsx("br", {}), keys[46].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48606
- keys[90].character,
48607
- keys[45].character,
48608
- ]) }, { children: [keys[90].character, jsxRuntime.jsx("br", {}), keys[45].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48609
- keys[80].character,
48610
- keys[35].character,
48611
- ]) }, { children: [keys[80].character, jsxRuntime.jsx("br", {}), keys[35].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48612
- keys[82].character,
48613
- keys[37].character,
48614
- ]) }, { children: [keys[82].character, jsxRuntime.jsx("br", {}), keys[37].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48602
+ ]) }, { children: [keys[85].character, jsxRuntime.jsx("br", {}), keys[38].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48603
+ keys[95].character,
48604
+ keys[48].character,
48605
+ ]) }, { children: [keys[95].character, jsxRuntime.jsx("br", {}), keys[48].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48606
+ keys[94].character,
48607
+ keys[47].character,
48608
+ ]) }, { children: [keys[94].character, jsxRuntime.jsx("br", {}), keys[47].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48615
48609
  keys[84].character,
48616
- keys[39].character,
48617
- ]) }, { children: [keys[84].character, jsxRuntime.jsx("br", {}), keys[39].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48610
+ keys[37].character,
48611
+ ]) }, { children: [keys[84].character, jsxRuntime.jsx("br", {}), keys[37].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48618
48612
  keys[86].character,
48619
- keys[41].character,
48620
- ]) }, { children: [keys[86].character, jsxRuntime.jsx("br", {}), keys[41].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48613
+ keys[39].character,
48614
+ ]) }, { children: [keys[86].character, jsxRuntime.jsx("br", {}), keys[39].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48621
48615
  keys[88].character,
48616
+ keys[41].character,
48617
+ ]) }, { children: [keys[88].character, jsxRuntime.jsx("br", {}), keys[41].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48618
+ keys[90].character,
48622
48619
  keys[43].character,
48623
- ]) }, { children: [keys[88].character, jsxRuntime.jsx("br", {}), keys[43].character] })), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(Row2, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48624
- keys[65].character,
48625
- keys[20].character,
48626
- ]) }, { children: keys[65].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48627
- keys[63].character,
48628
- keys[18].character,
48629
- ]) }, { children: keys[63].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48630
- keys[61].character,
48631
- keys[16].character,
48632
- ]) }, { children: keys[61].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48633
- keys[59].character,
48634
- keys[14].character,
48635
- ]) }, { children: keys[59].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48636
- keys[69].character,
48637
- keys[24].character,
48638
- ]) }, { children: keys[69].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48620
+ ]) }, { children: [keys[90].character, jsxRuntime.jsx("br", {}), keys[43].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48621
+ keys[92].character,
48622
+ keys[45].character,
48623
+ ]) }, { children: [keys[92].character, jsxRuntime.jsx("br", {}), keys[45].character] })), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(Row2, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48639
48624
  keys[68].character,
48640
- keys[23].character,
48641
- ]) }, { children: keys[68].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48642
- keys[58].character,
48643
- keys[13].character,
48644
- ]) }, { children: keys[58].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48645
- keys[60].character,
48646
- keys[15].character,
48647
- ]) }, { children: keys[60].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48648
- keys[62].character,
48649
- keys[17].character,
48650
- ]) }, { children: keys[62].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48651
- keys[64].character,
48625
+ keys[21].character,
48626
+ ]) }, { children: keys[68].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48627
+ keys[66].character,
48652
48628
  keys[19].character,
48653
- ]) }, { children: keys[64].character })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48629
+ ]) }, { children: keys[66].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48630
+ keys[64].character,
48631
+ keys[17].character,
48632
+ ]) }, { children: keys[64].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48633
+ keys[62].character,
48634
+ keys[15].character,
48635
+ ]) }, { children: keys[62].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48636
+ keys[72].character,
48637
+ keys[25].character,
48638
+ ]) }, { children: keys[72].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48639
+ keys[71].character,
48640
+ keys[24].character,
48641
+ ]) }, { children: keys[71].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48642
+ keys[61].character,
48643
+ keys[14].character,
48644
+ ]) }, { children: keys[61].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48645
+ keys[63].character,
48646
+ keys[16].character,
48647
+ ]) }, { children: keys[63].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48648
+ keys[65].character,
48649
+ keys[18].character,
48650
+ ]) }, { children: keys[65].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48654
48651
  keys[67].character,
48652
+ keys[20].character,
48653
+ ]) }, { children: keys[67].character })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48654
+ keys[70].character,
48655
+ keys[23].character,
48656
+ ]) }, { children: [keys[70].character, jsxRuntime.jsx("br", {}), keys[23].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48657
+ keys[69].character,
48655
48658
  keys[22].character,
48656
- ]) }, { children: [keys[67].character, jsxRuntime.jsx("br", {}), keys[22].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48657
- keys[66].character,
48658
- keys[21].character,
48659
- ]) }, { children: [keys[66].character, jsxRuntime.jsx("br", {}), keys[21].character] })), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(Row3, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48660
- keys[54].character,
48659
+ ]) }, { children: [keys[69].character, jsxRuntime.jsx("br", {}), keys[22].character] })), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(Row3, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48660
+ keys[56].character,
48661
48661
  keys[9].character,
48662
- ]) }, { children: keys[54].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48663
- keys[52].character,
48662
+ ]) }, { children: keys[56].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48663
+ keys[54].character,
48664
48664
  keys[7].character,
48665
- ]) }, { children: keys[52].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48666
- keys[50].character,
48665
+ ]) }, { children: keys[54].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48666
+ keys[52].character,
48667
48667
  keys[5].character,
48668
- ]) }, { children: keys[50].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48669
- keys[48].character,
48668
+ ]) }, { children: keys[52].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48669
+ keys[50].character,
48670
48670
  keys[3].character,
48671
- ]) }, { children: keys[48].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48672
- keys[57].character,
48671
+ ]) }, { children: keys[50].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48672
+ keys[60].character,
48673
+ keys[13].character,
48674
+ ]) }, { children: keys[60].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48675
+ keys[59].character,
48673
48676
  keys[12].character,
48674
- ]) }, { children: keys[57].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48675
- keys[56].character,
48676
- keys[11].character,
48677
- ]) }, { children: keys[56].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48678
- keys[47].character,
48679
- keys[2].character,
48680
- ]) }, { children: keys[47].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48677
+ ]) }, { children: keys[59].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48681
48678
  keys[49].character,
48682
- keys[4].character,
48683
- ]) }, { children: keys[49].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48679
+ keys[2].character,
48680
+ ]) }, { children: keys[49].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48684
48681
  keys[51].character,
48685
- keys[6].character,
48686
- ]) }, { children: keys[51].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48682
+ keys[4].character,
48683
+ ]) }, { children: keys[51].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48687
48684
  keys[53].character,
48688
- keys[8].character,
48685
+ keys[6].character,
48689
48686
  ]) }, { children: keys[53].character })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48690
48687
  keys[55].character,
48688
+ keys[8].character,
48689
+ ]) }, { children: [keys[55].character, jsxRuntime.jsx("br", {}), keys[8].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48690
+ keys[57].character,
48691
48691
  keys[10].character,
48692
- ]) }, { children: [keys[55].character, jsxRuntime.jsx("br", {}), keys[10].character] })), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(Row4, { children: [jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.right), align: "left" }, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsxRuntime.jsx("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" }) })) })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48693
- keys[77].character,
48694
- keys[32].character,
48695
- ]) }, { children: keys[77].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48696
- keys[75].character,
48697
- keys[30].character,
48698
- ]) }, { children: keys[75].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48699
- keys[73].character,
48700
- keys[28].character,
48701
- ]) }, { children: keys[73].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48702
- keys[71].character,
48703
- keys[26].character,
48704
- ]) }, { children: keys[71].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48705
- keys[79].character,
48692
+ ]) }, { children: [keys[57].character, jsxRuntime.jsx("br", {}), keys[10].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48693
+ keys[58].character,
48694
+ keys[11].character,
48695
+ ]) }, { children: [keys[58].character, jsxRuntime.jsx("br", {}), keys[11].character] })), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(Row4, { children: [jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.right), align: "left" }, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsxRuntime.jsx("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" }) })) })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48706
48696
  keys[34].character,
48707
- ]) }, { children: keys[79].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48697
+ keys[81].character,
48698
+ ]) }, { children: [keys[81].character, jsxRuntime.jsx("br", {}), keys[34].character] })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48699
+ keys[80].character,
48700
+ keys[33].character,
48701
+ ]) }, { children: keys[80].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48708
48702
  keys[78].character,
48709
- keys[30].character,
48710
- ]) }, { children: keys[78].character })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48711
- keys[70].character,
48712
- keys[25].character,
48713
- ]) }, { children: [keys[70].character, jsxRuntime.jsx("br", {}), keys[25].character !== "m" && keys[25].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48714
- keys[72].character,
48715
- keys[27].character,
48716
- ]) }, { children: [keys[72].character, jsxRuntime.jsx("br", {}), keys[27].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48717
- keys[74].character,
48718
- keys[29].character,
48719
- ]) }, { children: [keys[74].character, jsxRuntime.jsx("br", {}), keys[29].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48720
- keys[76].character,
48721
48703
  keys[31].character,
48722
- ]) }, { children: [keys[76].character, jsxRuntime.jsx("br", {}), keys[31].character] })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.left), align: "right" }, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsxRuntime.jsx("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" }) })) }))] }), jsxRuntime.jsxs(Row5, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PINK, isActive: containsAny(props.activeKeys, [keys[1].character]) }, { children: jsxRuntime.jsx("svg", __assign$2({ width: "24", height: "6", viewBox: "0 0 28 7", style: { marginTop: 10 }, fill: theme.colors.pink.dark }, { children: jsxRuntime.jsx("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" }) })) })), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {})] })] }));
48704
+ ]) }, { children: keys[78].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48705
+ keys[76].character,
48706
+ keys[29].character,
48707
+ ]) }, { children: keys[76].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48708
+ keys[74].character,
48709
+ keys[27].character,
48710
+ ]) }, { children: keys[74].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48711
+ keys[83].character,
48712
+ keys[36].character,
48713
+ ]) }, { children: keys[83].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48714
+ keys[82].character,
48715
+ keys[35].character,
48716
+ ]) }, { children: keys[82].character })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
48717
+ keys[73].character,
48718
+ keys[26].character,
48719
+ ]) }, { children: [keys[73].character, jsxRuntime.jsx("br", {}), keys[26].character !== "m" && keys[26].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
48720
+ keys[75].character,
48721
+ keys[28].character,
48722
+ ]) }, { children: [keys[75].character, jsxRuntime.jsx("br", {}), keys[28].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
48723
+ keys[77].character,
48724
+ keys[30].character,
48725
+ ]) }, { children: [keys[77].character, jsxRuntime.jsx("br", {}), keys[30].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
48726
+ keys[79].character,
48727
+ keys[32].character,
48728
+ ]) }, { children: [keys[79].character, jsxRuntime.jsx("br", {}), keys[32].character] })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.left), align: "right" }, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsxRuntime.jsx("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" }) })) }))] }), jsxRuntime.jsxs(Row5, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PINK, isActive: containsAny(props.activeKeys, [keys[1].character]) }, { children: jsxRuntime.jsx("svg", __assign$2({ width: "24", height: "6", viewBox: "0 0 28 7", style: { marginTop: 10 }, fill: theme.colors.pink.dark }, { children: jsxRuntime.jsx("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" }) })) })), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {})] })] }));
48723
48729
  };
48724
48730
 
48725
48731
  var Mask = styled__default["default"].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"])));