/* stylelint-disable */

.emojione-symbols {
  background-image: url('/packages/emojione/symbols-sprites.png');

  &._1f6c5 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 0%;
  }

  &._2049 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 0%;
  }

  &._2139 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 6.25%;
  }

  &._2194 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 6.25%;
  }

  &._2195 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 0%;
  }

  &._2196 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 6.25%;
  }

  &._2197 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 12.5%;
  }

  &._2198 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 12.5%;
  }

  &._2199 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 12.5%;
  }

  &._2611 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 0%;
  }

  &._2622 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 6.25%;
  }

  &._2623 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 12.5%;
  }

  &._2626 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 18.75%;
  }

  &._2638 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 18.75%;
  }

  &._2640 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 18.75%;
  }

  &._2642 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 18.75%;
  }

  &._2648 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 0%;
  }

  &._2649 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 6.25%;
  }

  &._2650 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 12.5%;
  }

  &._2651 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 18.75%;
  }

  &._2652 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 25%;
  }

  &._2653 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 25%;
  }

  &._2660 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 25%;
  }

  &._2663 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 25%;
  }

  &._2665 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 25%;
  }

  &._2666 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 0%;
  }

  &._2668 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 6.25%;
  }

  &._2695 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 12.5%;
  }

  &._2705 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 18.75%;
  }

  &._2714 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 25%;
  }

  &._2716 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 31.25%;
  }

  &._2721 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 31.25%;
  }

  &._2733 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 31.25%;
  }

  &._2734 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 31.25%;
  }

  &._2747 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 31.25%;
  }

  &._2753 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 31.25%;
  }

  &._2754 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 0%;
  }

  &._2755 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 6.25%;
  }

  &._2757 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 12.5%;
  }

  &._2763 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 18.75%;
  }

  &._2764 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 25%;
  }

  &._2795 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 31.25%;
  }

  &._2796 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 37.5%;
  }

  &._2797 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 37.5%;
  }

  &._2934 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 37.5%;
  }

  &._2935 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 37.5%;
  }

  &._3030 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 37.5%;
  }

  &._3297 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 37.5%;
  }

  &._3299 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 37.5%;
  }

  &._1f9e1 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 0%;
  }

  &._1f49b {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 6.25%;
  }

  &._1f49a {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 12.5%;
  }

  &._1f499 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 18.75%;
  }

  &._1f49c {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 25%;
  }

  &._1f5a4 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 31.25%;
  }

  &._1f494 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 37.5%;
  }

  &._1f495 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 43.75%;
  }

  &._1f49e {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 43.75%;
  }

  &._1f493 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 43.75%;
  }

  &._1f497 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 43.75%;
  }

  &._1f496 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 43.75%;
  }

  &._1f498 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 43.75%;
  }

  &._1f49d {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 43.75%;
  }

  &._1f49f {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 43.75%;
  }

  &._262e {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 0%;
  }

  &._271d {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 6.25%;
  }

  &._262a {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 12.5%;
  }

  &._1f549 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 18.75%;
  }

  &._1f52f {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 25%;
  }

  &._1f54e {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 31.25%;
  }

  &._262f {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 37.5%;
  }

  &._1f6d0 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 43.75%;
  }

  &._26ce {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 50%;
  }

  &._264a {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 50%;
  }

  &._264b {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 50%;
  }

  &._264c {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 50%;
  }

  &._264d {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 50%;
  }

  &._264e {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 50%;
  }

  &._264f {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 50%;
  }

  &._1f194 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 50%;
  }

  &._269b {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 50%;
  }

  &._267e {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 0%;
  }

  &._1f251 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 6.25%;
  }

  &._1f4f4 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 12.5%;
  }

  &._1f4f3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 18.75%;
  }

  &._1f236 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 25%;
  }

  &._1f21a {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 31.25%;
  }

  &._1f238 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 37.5%;
  }

  &._1f23a {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 43.75%;
  }

  &._1f237 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 50%;
  }

  &._1f19a {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 56.25%;
  }

  &._1f4ae {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 56.25%;
  }

  &._1f250 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 56.25%;
  }

  &._1f234 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 56.25%;
  }

  &._1f235 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 56.25%;
  }

  &._1f239 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 56.25%;
  }

  &._1f232 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 56.25%;
  }

  &._1f170 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 56.25%;
  }

  &._1f171 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 56.25%;
  }

  &._1f18e {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 56.25%;
  }

  &._1f191 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 0%;
  }

  &._1f17e {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 6.25%;
  }

  &._1f198 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 12.5%;
  }

  &._274c {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 18.75%;
  }

  &._2b55 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 25%;
  }

  &._1f6d1 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 31.25%;
  }

  &._26d4 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 37.5%;
  }

  &._1f4db {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 43.75%;
  }

  &._1f6ab {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 50%;
  }

  &._1f4af {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 56.25%;
  }

  &._1f4a2 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 62.5%;
  }

  &._1f6b7 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 62.5%;
  }

  &._1f6af {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 62.5%;
  }

  &._1f6b3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 62.5%;
  }

  &._1f6b1 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 62.5%;
  }

  &._1f51e {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 62.5%;
  }

  &._1f4f5 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 62.5%;
  }

  &._1f6ad {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 62.5%;
  }

  &._203c {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 62.5%;
  }

  &._1f505 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 62.5%;
  }

  &._1f506 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 62.5%;
  }

  &._303d {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 0%;
  }

  &._26a0 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 6.25%;
  }

  &._1f6b8 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 12.5%;
  }

  &._1f531 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 18.75%;
  }

  &._269c {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 25%;
  }

  &._1f530 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 31.25%;
  }

  &._267b {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 37.5%;
  }

  &._1f22f {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 43.75%;
  }

  &._1f4b9 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 50%;
  }

  &._274e {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 56.25%;
  }

  &._1f310 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 62.5%;
  }

  &._1f4a0 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 68.75%;
  }

  &._24c2 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 68.75%;
  }

  &._1f300 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 68.75%;
  }

  &._1f4a4 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 68.75%;
  }

  &._1f3e7 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 68.75%;
  }

  &._1f6be {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 68.75%;
  }

  &._267f {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 68.75%;
  }

  &._1f17f {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 68.75%;
  }

  &._1f233 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 68.75%;
  }

  &._1f202 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 68.75%;
  }

  &._1f6c2 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 68.75%;
  }

  &._1f6c3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 68.75%;
  }

  &._1f6c4 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 0%;
  }

  &._2122 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 6.25%;
  }

  &._1f6b9 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 12.5%;
  }

  &._1f6ba {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 18.75%;
  }

  &._1f6bc {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 25%;
  }

  &._1f6bb {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 31.25%;
  }

  &._1f6ae {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 37.5%;
  }

  &._1f3a6 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 43.75%;
  }

  &._1f4f6 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 50%;
  }

  &._1f201 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 56.25%;
  }

  &._1f523 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 62.5%;
  }

  &._1f524 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 68.75%;
  }

  &._1f521 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 75%;
  }

  &._1f520 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 75%;
  }

  &._1f196 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 75%;
  }

  &._1f197 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 75%;
  }

  &._1f199 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 75%;
  }

  &._1f192 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 75%;
  }

  &._1f195 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 75%;
  }

  &._1f193 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 75%;
  }

  &._0030-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 75%;
  }

  &._0031-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 75%;
  }

  &._0032-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 75%;
  }

  &._0033-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 75%;
  }

  &._0034-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 75%;
  }

  &._0035-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 0%;
  }

  &._0036-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 6.25%;
  }

  &._0037-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 12.5%;
  }

  &._0038-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 18.75%;
  }

  &._0039-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 25%;
  }

  &._1f51f {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 31.25%;
  }

  &._1f522 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 37.5%;
  }

  &._0023-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 43.75%;
  }

  &._002a-20e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 50%;
  }

  &._23cf {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 56.25%;
  }

  &._25b6 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 62.5%;
  }

  &._23f8 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 68.75%;
  }

  &._23ef {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 75%;
  }

  &._23f9 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 81.25%;
  }

  &._23fa {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 81.25%;
  }

  &._23ed {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 81.25%;
  }

  &._23ee {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 81.25%;
  }

  &._23e9 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 81.25%;
  }

  &._23ea {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 81.25%;
  }

  &._23eb {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 81.25%;
  }

  &._23ec {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 81.25%;
  }

  &._25c0 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 81.25%;
  }

  &._1f53c {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 81.25%;
  }

  &._1f53d {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 81.25%;
  }

  &._27a1 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 81.25%;
  }

  &._2b05 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 81.25%;
  }

  &._2b06 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 81.25%;
  }

  &._2b07 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 0%;
  }

  &._21aa {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 6.25%;
  }

  &._21a9 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 12.5%;
  }

  &._1f500 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 18.75%;
  }

  &._1f501 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 25%;
  }

  &._1f502 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 31.25%;
  }

  &._1f504 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 37.5%;
  }

  &._1f503 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 43.75%;
  }

  &._1f3b5 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 50%;
  }

  &._1f3b6 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 56.25%;
  }

  &._1f4b2 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 62.5%;
  }

  &._1f4b1 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 68.75%;
  }

  &._00a9 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 75%;
  }

  &._00ae {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 81.25%;
  }

  &._27b0 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 87.5%;
  }

  &._27bf {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 87.5%;
  }

  &._1f51a {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 87.5%;
  }

  &._1f519 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 87.5%;
  }

  &._1f51b {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 87.5%;
  }

  &._1f51d {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 87.5%;
  }

  &._1f51c {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 87.5%;
  }

  &._1f518 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 87.5%;
  }

  &._26aa {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 87.5%;
  }

  &._26ab {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 87.5%;
  }

  &._1f534 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 87.5%;
  }

  &._1f535 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 87.5%;
  }

  &._1f53a {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 87.5%;
  }

  &._1f53b {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 87.5%;
  }

  &._1f538 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 87.5%;
  }

  &._1f539 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 0%;
  }

  &._1f536 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 6.25%;
  }

  &._1f537 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 12.5%;
  }

  &._1f533 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 18.75%;
  }

  &._1f532 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 25%;
  }

  &._25aa {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 31.25%;
  }

  &._25ab {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 37.5%;
  }

  &._25fe {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 43.75%;
  }

  &._25fd {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 50%;
  }

  &._25fc {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 56.25%;
  }

  &._25fb {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 62.5%;
  }

  &._2b1b {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 68.75%;
  }

  &._2b1c {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 75%;
  }

  &._1f508 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 81.25%;
  }

  &._1f507 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 87.5%;
  }

  &._1f509 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 93.75%;
  }

  &._1f50a {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 93.75%;
  }

  &._1f514 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 93.75%;
  }

  &._1f515 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 93.75%;
  }

  &._1f4e3 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 93.75%;
  }

  &._1f4e2 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 93.75%;
  }

  &._1f5e8 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 93.75%;
  }

  &._1f441-1f5e8 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 93.75%;
  }

  &._1f4ac {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 93.75%;
  }

  &._1f4ad {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 93.75%;
  }

  &._1f5ef {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 93.75%;
  }

  &._1f0cf {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 93.75%;
  }

  &._1f3b4 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 93.75%;
  }

  &._1f004 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 93.75%;
  }

  &._1f550 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 93.75%;
  }

  &._1f551 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 93.75%;
  }

  &._1f552 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 0%;
  }

  &._1f553 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 6.25%;
  }

  &._1f554 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 12.5%;
  }

  &._1f555 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 18.75%;
  }

  &._1f556 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 25%;
  }

  &._1f557 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 31.25%;
  }

  &._1f558 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 37.5%;
  }

  &._1f559 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 43.75%;
  }

  &._1f55a {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 50%;
  }

  &._1f55b {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 56.25%;
  }

  &._1f55c {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 62.5%;
  }

  &._1f55d {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 68.75%;
  }

  &._1f55e {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 75%;
  }

  &._1f55f {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 81.25%;
  }

  &._1f560 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 87.5%;
  }

  &._1f561 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 93.75%;
  }

  &._1f562 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 0% 100%;
  }

  &._1f563 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 5.882352941176471% 100%;
  }

  &._1f564 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 11.764705882352942% 100%;
  }

  &._1f565 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 17.647058823529413% 100%;
  }

  &._1f566 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 23.529411764705884% 100%;
  }

  &._1f567 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 29.41176470588235% 100%;
  }

  &._0030 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 35.294117647058826% 100%;
  }

  &._0031 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 41.1764705882353% 100%;
  }

  &._0032 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 47.05882352941177% 100%;
  }

  &._0033 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 52.94117647058823% 100%;
  }

  &._0034 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 58.8235294117647% 100%;
  }

  &._0035 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 64.70588235294117% 100%;
  }

  &._0036 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 70.58823529411765% 100%;
  }

  &._0037 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 76.47058823529412% 100%;
  }

  &._0038 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 82.3529411764706% 100%;
  }

  &._0039 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 88.23529411764706% 100%;
  }

  &._0023 {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 94.11764705882354% 100%;
  }

  &._002a {
    background-repeat: no-repeat;
    background-size: 1800% 1700%;
    background-position: 100% 0%;
  }

}


const UnitsTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {

const [filter, setFilter] = useState('');

const unitsRoute = useRoute('omnichannel-units');

const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();

const { sortBy, sortDirection, setSort } = useSort<'name' | 'visibility'>('name');

keep keep keep add keep keep keep keep keep

const debouncedFilter = useDebouncedValue(filter, 500);

import type { IRocketChatAssetConstraint } from './IRocketChatAssets';

export type SettingId = string;
export type GroupId = SettingId;
export type TabId = SettingId;
export type SectionName = string;

export enum SettingEditor {
	COLOR = 'color',
	EXPRESSION = 'expression',
}
type AssetValue = { defaultUrl?: string };
export type SettingValueMultiSelect = (string | number)[];
export type SettingValueRoomPick = { _id: string; name?: string }[];
export type SettingValue =
	| string
	| boolean
	| number
	| SettingValueMultiSelect
	| SettingValueRoomPick
	| Date
	| AssetValue
	| undefined
	| null;

export interface ISettingSelectOption {
	key: string | number;
	i18nLabel: string;
}

export type ISetting = ISettingBase | ISettingEnterprise | ISettingColor | ISettingCode | ISettingAction | ISettingAsset;

type EnableQuery = string | { _id: string; value: any } | { _id: string; value: any }[];

export interface ISettingBase {
	_id: SettingId;
	_updatedAt: Date;
	type:
		| 'boolean'
		| 'timezone'
		| 'string'
		| 'relativeUrl'
		| 'password'
		| 'int'
		| 'select'
		| 'multiSelect'
		| 'language'
		| 'color'
		| 'font'
		| 'code'
		| 'action'
		| 'asset'
		| 'roomPick'
		| 'group'
		| 'date'
		| 'lookup';
	public: boolean;
	env: boolean;
	group?: GroupId;
	section?: SectionName;
	tab?: TabId;
	i18nLabel: string;
	value: SettingValue;
	packageValue: SettingValue;
	blocked: boolean;
	enableQuery?: EnableQuery;
	displayQuery?: EnableQuery;
	sorter: number;
	properties?: unknown;
	enterprise?: boolean;
	requiredOnWizard?: boolean;
	hidden?: boolean;
	modules?: Array<string>;
	invalidValue?: SettingValue;
	valueSource?: string;
	secret?: boolean;
	i18nDescription?: string;
	autocomplete?: boolean;
	processEnvValue?: SettingValue;
	meteorSettingsValue?: SettingValue;
	ts: Date;
	createdAt: Date;
	multiline?: boolean;
	values?: Array<ISettingSelectOption>;
	placeholder?: string;
	lookupEndpoint?: string;
	wizard?: {
		step: number;
		order: number;
	} | null;
	persistent?: boolean; // todo: remove
	readonly?: boolean; // todo: remove
	alert?: string; // todo: check if this is still used
	private?: boolean; // todo: remove
}

export interface ISettingGroup {
	_id: string;
	hidden: boolean;
	blocked: boolean;
	ts?: Date;
	sorter: number;
	i18nLabel: string;
	displayQuery?: EnableQuery;
	i18nDescription: string;
	value?: undefined;
	type: 'group';

	alert?: string; // todo: check if this is needed
}

export interface ISettingEnterprise extends ISettingBase {
	enterprise: true;
	invalidValue: SettingValue;
}

export interface ISettingColor extends ISettingBase {
	type: 'color';
	editor: SettingEditor;
	packageEditor?: SettingEditor;
}
export interface ISettingCode extends ISettingBase {
	type: 'code';
	code?: string;
}

export interface ISettingAction extends ISettingBase {
	type: 'action';
	value: string;
	actionText?: string;
}
export interface ISettingAsset extends ISettingBase {
	type: 'asset';
	value: AssetValue;
	fileConstraints: IRocketChatAssetConstraint;
	asset: string;
}

export interface ISettingDate extends ISettingBase {
	type: 'date';
	value: Date;
}

// Checks if setting has at least the required properties
export const isSetting = (setting: any): setting is ISetting =>
	'_id' in setting &&
	'type' in setting &&
	'public' in setting &&
	'value' in setting &&
	'packageValue' in setting &&
	'blocked' in setting &&
	'sorter' in setting &&
	'i18nLabel' in setting;

export const isDateSetting = (setting: ISetting): setting is ISettingDate => setting.type === 'date';

export const isSettingEnterprise = (setting: ISettingBase): setting is ISettingEnterprise => setting.enterprise === true;

export const isSettingColor = (setting: ISettingBase): setting is ISettingColor => setting.type === 'color';

export const isSettingCode = (setting: ISettingBase): setting is ISettingCode => setting.type === 'code';

export const isSettingAction = (setting: ISettingBase): setting is ISettingAction => setting.type === 'action';

export const isSettingAsset = (setting: ISettingBase): setting is ISettingAsset => setting.type === 'asset';

export interface ISettingStatistics {
	account2fa?: boolean;
	cannedResponsesEnabled?: boolean;
	e2e?: boolean;
	e2eDefaultDirectRoom?: boolean;
	e2eDefaultPrivateRoom?: boolean;
	smtpHost?: string;
	smtpPort?: string;
	fromEmail?: string;
	fileUploadEnable?: boolean;
	frameworkDevMode?: boolean;
	frameworkEnable?: boolean;
	surveyEnabled?: boolean;
	updateChecker?: boolean;
	liveStream?: boolean;
	broadcasting?: boolean;
	allowEditing?: boolean;
	allowDeleting?: boolean;
	allowUnrecognizedSlashCommand?: boolean;
	allowBadWordsFilter?: boolean;
	readReceiptEnabled?: boolean;
	readReceiptStoreUsers?: boolean;
	otrEnable?: boolean;
	pushEnable?: boolean;
	globalSearchEnabled?: boolean;
	threadsEnabled?: boolean;
	webRTCEnableChannel?: boolean;
	webRTCEnablePrivate?: boolean;
	webRTCEnableDirect?: boolean;
}

export interface ISettingStatisticsObject {
	accounts?: {
		account2fa?: boolean;
	};
	cannedResponses?: {
		cannedResponsesEnabled?: boolean;
	};
	e2ee?: {
		e2e?: boolean;
		e2eDefaultDirectRoom?: boolean;
		e2eDefaultPrivateRoom?: boolean;
	};
	email?: {
		smtp?: {
			smtpHost?: string;
			smtpPort?: string;
			fromEmail?: string;
		};
	};
	fileUpload?: {
		fileUploadEnable?: boolean;
	};
	general?: {
		apps?: {
			frameworkDevMode?: boolean;
			frameworkEnable?: boolean;
		};
		nps?: {
			surveyEnabled?: boolean;
		};
		update?: {
			updateChecker?: boolean;
		};
	};
	liveStreamAndBroadcasting?: {
		liveStream?: boolean;
		broadcasting?: boolean;
	};
	message?: {
		allowEditing?: boolean;
		allowDeleting?: boolean;
		allowUnrecognizedSlashCommand?: boolean;
		allowBadWordsFilter?: boolean;
		readReceiptEnabled?: boolean;
		readReceiptStoreUsers?: boolean;
	};
	otr?: {
		otrEnable?: boolean;
	};
	push?: {
		pushEnable?: boolean;
	};
	search?: {
		defaultProvider?: {
			globalSearchEnabled?: boolean;
		};
	};
	threads?: {
		threadsEnabled?: boolean;
	};
	videoConference?: {
		bigBlueButton?: boolean;
		jitsiEnabled?: boolean;
	};
	webRTC?: {
		webRTCEnableChannel?: boolean;
		webRTCEnablePrivate?: boolean;
		webRTCEnableDirect?: boolean;
	};
}


sort: JSON.stringify({ [sortBy]: sortDirection === 'asc' ? 1 : -1 }),

keep keep keep replace keep keep keep keep

import { Pagination } from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import { useRoute, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
import { useQuery } from '@tanstack/react-query';
import type { MutableRefObject } from 'react';
import React, { useMemo, useState, useEffect } from 'react';

import FilterByText from '../../../components/FilterByText';
import GenericNoResults from '../../../components/GenericNoResults';
import {
	GenericTable,
	GenericTableHeader,
	GenericTableHeaderCell,
	GenericTableRow,
	GenericTableCell,
	GenericTableBody,
	GenericTableLoadingTable,
} from '../../../components/GenericTable';
import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
import { useSort } from '../../../components/GenericTable/hooks/useSort';
import RemoveCustomFieldButton from './RemoveCustomFieldButton';

const CustomFieldsTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
	const t = useTranslation();
	const [filter, setFilter] = useState('');
	const departmentsRoute = useRoute('omnichannel-customfields');

	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
	const { sortBy, sortDirection, setSort } = useSort<'_id' | 'label' | 'scope' | 'visibility'>('_id');

	const query = useMemo(
		() => ({
			text: filter,
			sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
			...(itemsPerPage && { count: itemsPerPage }),
			...(current && { offset: current }),
		}),
		[filter, itemsPerPage, current, sortBy, sortDirection],
	);

	const getCustomFields = useEndpoint('GET', '/v1/livechat/custom-fields');
	const { data, isSuccess, isLoading, refetch } = useQuery(['livechat-customFields', query], async () => getCustomFields(query));

	useEffect(() => {
		reload.current = refetch;
	}, [reload, refetch]);
	reload.current = refetch;

	const headers = (
		<>
			<GenericTableHeaderCell key='field' direction={sortDirection} active={sortBy === '_id'} onClick={setSort} sort='_id'>
				{t('Field')}
			</GenericTableHeaderCell>
			<GenericTableHeaderCell key='label' direction={sortDirection} active={sortBy === 'label'} onClick={setSort} sort='label'>
				{t('Label')}
			</GenericTableHeaderCell>
			<GenericTableHeaderCell key='scope' direction={sortDirection} active={sortBy === 'scope'} onClick={setSort} sort='scope'>
				{t('Scope')}
			</GenericTableHeaderCell>
			<GenericTableHeaderCell
				key='visibility'
				direction={sortDirection}
				active={sortBy === 'visibility'}
				onClick={setSort}
				sort='visibility'
			>
				{t('Visibility')}
			</GenericTableHeaderCell>
			<GenericTableHeaderCell key='remove' w='x60'>
				{t('Remove')}
			</GenericTableHeaderCell>
		</>
	);

	const onRowClick = useMutableCallback(
		(id) => () =>
			departmentsRoute.push({
				context: 'edit',
				id,
			}),
	);

	return (
		<>
			<FilterByText onChange={({ text }) => setFilter(text)} />
			{isLoading && (
				<GenericTable>
					<GenericTableHeader>{headers}</GenericTableHeader>
					<GenericTableBody>
						<GenericTableLoadingTable headerCells={5} />
					</GenericTableBody>
				</GenericTable>
			)}
			{isSuccess && data.customFields.length === 0 && <GenericNoResults />}
			{isSuccess && data.customFields.length > 0 && (
				<>
					<GenericTable data-qa='GenericTableCustomFieldsInfoBody'>
						<GenericTableHeader>{headers}</GenericTableHeader>
						<GenericTableBody>
							{data.customFields.map(({ label, _id, scope, visibility }) => (
								<GenericTableRow key={_id} tabIndex={0} role='link' onClick={onRowClick(_id)} action qa-user-id={_id}>
									<GenericTableCell withTruncatedText>{_id}</GenericTableCell>
									<GenericTableCell withTruncatedText>{label}</GenericTableCell>
									<GenericTableCell withTruncatedText>{scope === 'visitor' ? t('Visitor') : t('Room')}</GenericTableCell>
									<GenericTableCell withTruncatedText>{visibility === 'visible' ? t('Visible') : t('Hidden')}</GenericTableCell>
									<RemoveCustomFieldButton _id={_id} reload={refetch} />
								</GenericTableRow>
							))}
						</GenericTableBody>
					</GenericTable>
					<Pagination
						divider
						current={current}
						itemsPerPage={itemsPerPage}
						count={data.total || 0}
						onSetItemsPerPage={onSetItemsPerPage}
						onSetCurrent={onSetCurrent}
						{...paginationProps}
					/>
				</>
			)}
		</>
	);
};

export default CustomFieldsTable;


import './exportMessagesTab';
import './mentionsTab';
import './pinnedMessagesTab';
import './starredMessagesTab';


export type OauthConfig = {
	serverURL?: string;
	identityPath?: string;
	addAutopublishFields: {
		forLoggedInUser: string[];
		forOtherUsers: string[];
	};
	accessTokenParam?: string;
	identityTokenSentVia?: string;
	authorizePath?: string;
	tokenPath?: string;
	scope?: string;
	tokenSentVia?: string;
	usernameField?: string;
	mergeUsers?: boolean;
};


const foregroundColors = {
	30: 'gray',
	31: 'red',
	32: 'lime',
	33: 'yellow',
	34: '#6B98FF',
	35: '#FF00FF',
	36: 'cyan',
	37: 'white',
};

export const ansispan = (str: string): string => {
	str = str
		.replace(/\s/g, ' ')
		.replace(/(\\n|\n)/g, '
')
		.replace(/>/g, '>')
		.replace(/</g, '<')
		.replace(/(.\d{8}-\d\d:\d\d:\d\d\.\d\d\d\(?.{0,2}\)?)/, '$1')
		.replace(/\033\[1m/g, '')
		.replace(/\033\[22m/g, '')
		.replace(/\033\[3m/g, '')
		.replace(/\033\[23m/g, '')
		.replace(/\033\[m/g, '')
		.replace(/\033\[0m/g, '')
		.replace(/\033\[39m/g, '');
	return Object.entries(foregroundColors).reduce((str, [ansiCode, color]) => {
		const span = `<span style="color: ${color}">`;
		return str.replace(new RegExp(`\\033\\[${ansiCode}m`, 'g'), span).replace(new RegExp(`\\033\\[0;${ansiCode}m`, 'g'), span);
	}, str);
};


[filter, itemsPerPage, current, sortBy, sortDirection],

const getUnits = useEndpoint('GET', '/v1/livechat/units');

[debouncedFilter, itemsPerPage, current, sortBy, sortDirection],


import Ajv from 'ajv';

const ajv = new Ajv();

export type IntegrationsRemoveProps =
	| { type: 'webhook-incoming'; integrationId: string }
	| { type: 'webhook-outgoing'; integrationId?: string; target_url?: string };

const integrationsRemoveSchema = {
	oneOf: [
		{
			type: 'object',
			properties: {
				type: {
					type: 'string',
					nullable: false,
					pattern: 'webhook-incoming',
				},
				integrationId: {
					type: 'string',
					nullable: false,
				},
			},
			required: ['type', 'integrationId'],
		},
		{
			type: 'object',
			properties: {
				type: {
					type: 'string',
					nullable: false,
					pattern: 'webhook-outgoing',
				},
				target_url: {
					type: 'string',
					nullable: false,
				},
			},
			required: ['type', 'target_url'],
		},
		{
			type: 'object',
			properties: {
				type: {
					type: 'string',
					nullable: false,
					pattern: 'webhook-outgoing',
				},
				integrationId: {
					type: 'string',
					nullable: false,
				},
			},
			required: ['type', 'integrationId'],
		},
	],
};

export const isIntegrationsRemoveProps = ajv.compile<IntegrationsRemoveProps>(integrationsRemoveSchema);


import type { Locator, Page } from '@playwright/test';

export class OmnichannelManageContact {
	protected readonly page: Page;

	constructor(page: Page) {
		this.page = page;
	}

	get newContactTitle(): Locator {
		return this.page.locator('h3 >> text="New Contact"');
	}

	get editContactTitle(): Locator {
		return this.page.locator('h3 >> text="Edit Contact Profile"');
	}

	get inputName(): Locator {
		return this.page.locator('input[name=name]');
	}

	get inputEmail(): Locator {
		return this.page.locator('input[name=email]');
	}

	get inputPhone(): Locator {
		return this.page.locator('input[name=phone]');
	}

	get inputContactManager(): Locator {
		return this.page.locator('input[name=contactManager]');
	}

	get btnSave(): Locator {
		return this.page.locator('button >> text="Save"');
	}

	get btnCancel(): Locator {
		return this.page.locator('button >> text="Cancel"');
	}

	errorMessage(message: string): Locator {
		return this.page.locator(`.rcx-field__error >> text="${message}"`);
	}
}


import { ajv } from '../Ajv';

export type ModerationDeleteMsgHistoryParamsPOST = {
	userId: string;
	reason?: string;
};

const ajvParams = {
	type: 'object',
	properties: {
		userId: {
			type: 'string',
			nullable: false,
			minLength: 1,
		},
		reason: {
			type: 'string',
		},
	},
	required: ['userId'],
	additionalProperties: false,
};

export const isModerationDeleteMsgHistoryParams = ajv.compile<ModerationDeleteMsgHistoryParamsPOST>(ajvParams);


keep keep keep keep replace keep keep keep keep

<GenericTable aria-busy={filter !== debouncedFilter} aria-live='assertive'>

import { Pagination } from '@rocket.chat/fuselage';
import { useDebouncedValue, useMediaQuery, useMutableCallback } from '@rocket.chat/fuselage-hooks';
import { useTranslation } from '@rocket.chat/ui-contexts';
import { hashQueryKey } from '@tanstack/react-query';
import type { MutableRefObject } from 'react';
import React, { useMemo, useState, useEffect } from 'react';

import FilterByText from '../../../../components/FilterByText';
import GenericNoResults from '../../../../components/GenericNoResults/GenericNoResults';
import {
	GenericTable,
	GenericTableBody,
	GenericTableHeader,
	GenericTableHeaderCell,
	GenericTableLoadingTable,
} from '../../../../components/GenericTable';
import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
import { useSort } from '../../../../components/GenericTable/hooks/useSort';
import { useAgentsQuery } from '../hooks/useAgentsQuery';
import { useQuery } from '../hooks/useQuery';
import AddAgent from './AddAgent';
import AgentsTableRow from './AgentsTableRow';

// TODO: missing error state
const AgentsTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
	const t = useTranslation();
	const [filter, setFilter] = useState('');

	const { sortBy, sortDirection, setSort } = useSort<'name' | 'username' | 'emails.address' | 'statusLivechat'>('name');
	const debouncedFilter = useDebouncedValue(filter, 500);
	const debouncedSort = useDebouncedValue(
		useMemo(() => [sortBy, sortDirection], [sortBy, sortDirection]),
		500,
	) as ['name' | 'username' | 'emails.address' | 'statusLivechat', 'asc' | 'desc'];

	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();

	const query = useQuery({ text: debouncedFilter, current, itemsPerPage }, debouncedSort);
	const { data, isSuccess, isLoading, refetch } = useAgentsQuery(query);

	const [defaultQuery] = useState(hashQueryKey([query]));
	const queryHasChanged = defaultQuery !== hashQueryKey([query]);

	useEffect(() => {
		reload.current = refetch;
	}, [reload, refetch]);
	reload.current = refetch;

	const onHeaderClick = useMutableCallback((id) => {
		if (sortBy === id) {
			setSort(id, sortDirection === 'asc' ? 'desc' : 'asc');
			return;
		}
		setSort(id, 'asc');
	});

	const mediaQuery = useMediaQuery('(min-width: 1024px)');

	const headers = (
		<>
			<GenericTableHeaderCell direction={sortDirection} sort='name' active={sortBy === 'name'} onClick={onHeaderClick}>
				{t('Name')}
			</GenericTableHeaderCell>
			{mediaQuery && (
				<GenericTableHeaderCell direction={sortDirection} sort='username' active={sortBy === 'username'} onClick={onHeaderClick}>
					{t('Username')}
				</GenericTableHeaderCell>
			)}
			<GenericTableHeaderCell direction={sortDirection} sort='emails.address' active={sortBy === 'emails.address'} onClick={onHeaderClick}>
				{t('Email')}
			</GenericTableHeaderCell>
			<GenericTableHeaderCell direction={sortDirection} sort='statusLivechat' active={sortBy === 'statusLivechat'} onClick={onHeaderClick}>
				{t('Livechat_status')}
			</GenericTableHeaderCell>
			<GenericTableHeaderCell w='x60'>{t('Remove')}</GenericTableHeaderCell>
		</>
	);

	return (
		<>
			<AddAgent reload={refetch} />
			{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setFilter(text)} />}
			{isLoading && (
				<GenericTable>
					<GenericTableHeader>{headers}</GenericTableHeader>
					<GenericTableBody>
						<GenericTableLoadingTable headerCells={mediaQuery ? 4 : 3} />
					</GenericTableBody>
				</GenericTable>
			)}
			{isSuccess && data?.users.length === 0 && queryHasChanged && <GenericNoResults />}
			{isSuccess && data.users.length === 0 && !queryHasChanged && (
				<GenericNoResults
					icon='headset'
					title={t('No_agents_yet')}
					description={t('No_agents_yet_description')}
					linkHref='https://go.rocket.chat/omnichannel-docs'
					linkText={t('Learn_more_about_agents')}
				/>
			)}
			{isSuccess && data?.users.length > 0 && (
				<>
					<GenericTable>
						<GenericTableHeader>{headers}</GenericTableHeader>
						<GenericTableBody data-qa='GenericTableAgentInfoBody'>
							{data?.users.map((user) => (
								<AgentsTableRow key={user._id} user={user} mediaQuery={mediaQuery} reload={refetch} />
							))}
						</GenericTableBody>
					</GenericTable>
					<Pagination
						divider
						current={current}
						itemsPerPage={itemsPerPage}
						count={data?.total || 0}
						onSetItemsPerPage={setItemsPerPage}
						onSetCurrent={setCurrent}
						{...paginationProps}
					/>
				</>
			)}
		</>
	);
};

export default AgentsTable;


import type { WithId } from 'mongodb';

export interface IRocketChatRecord {
	_id: string;
	_updatedAt: Date;
}

export type RocketChatRecordDeleted<T> = WithId<T> & {
	_updatedAt: Date;
	_deletedAt: Date;
	__collection__: string;
};


import type { IMessage, IUser } from '@rocket.chat/core-typings';
import { Messages, Users } from '@rocket.chat/models';
import moment from 'moment';

import * as Mailer from '../../../app/mailer/server/api';
import { settings } from '../../../app/settings/server';
import { Message } from '../../../app/ui-utils/server';
import { getMomentLocale } from '../getMomentLocale';

export async function sendViaEmail(
	data: {
		rid: string;
		toUsers: string[];
		toEmails: string[];
		subject: string;
		messages: string[];
		language: string;
	},
	user: IUser,
): Promise<{
	missing: string[];
}> {
	const emails = data.toEmails.map((email) => email.trim()).filter(Boolean);

	const missing = [...data.toUsers].filter(Boolean);

	(
		await Users.findUsersByUsernames(data.toUsers, {
			projection: { 'username': 1, 'emails.address': 1 },
		}).toArray()
	).forEach((user: IUser) => {
		const emailAddress = user.emails?.[0].address;

		if (!emailAddress) {
			return;
		}

		if (!Mailer.checkAddressFormat(emailAddress)) {
			throw new Error('error-invalid-email');
		}

		const found = missing.indexOf(String(user.username));
		if (found !== -1) {
			missing.splice(found, 1);
		}

		emails.push(emailAddress);
	});

	const email = user.emails?.[0]?.address;
	const lang = data.language || user.language || 'en';

	const localMoment = moment();

	if (lang !== 'en') {
		const localeFn = await getMomentLocale(lang);
		if (localeFn) {
			Function(localeFn).call({ moment });
			localMoment.locale(lang);
		}
	}

	const html = (
		await Messages.findByRoomIdAndMessageIds(data.rid, data.messages, {
			sort: { ts: 1 },
		}).toArray()
	)
		.map((message: IMessage) => {
			const dateTime = moment(message.ts).locale(lang).format('L LT');
			return `
${
				message.u.username
			} ${dateTime}
${Message.parse(message, data.language)}
`;
		})
		.join('');

	await Mailer.send({
		to: emails,
		from: settings.get('From_Email'),
		replyTo: email,
		subject: data.subject,
		html,
	});

	return { missing };
}


import type { IAvatar } from '@rocket.chat/core-typings';

import type { IBaseUploadsModel } from './IBaseUploadsModel';

export type IAvatarsModel = IBaseUploadsModel<IAvatar>;


const getCustomFields = useEndpoint('GET', '/v1/livechat/custom-fields');

const { data, isSuccess, isLoading, refetch } = useQuery(['livechat-customFields', query], async () => getCustomFields(query));

const [defaultQuery] = useState(hashQueryKey([query]));

const queryHasChanged = defaultQuery !== hashQueryKey([query]);

const { data, isSuccess, isLoading, refetch } = useQuery(['livechat-customFields', query, debouncedFilter], async () =>


import type { IUser } from '@rocket.chat/core-typings';
import {
	ise2eGetUsersOfRoomWithoutKeyParamsGET,
	ise2eSetRoomKeyIDParamsPOST,
	ise2eSetUserPublicAndPrivateKeysParamsPOST,
	ise2eUpdateGroupKeyParamsPOST,
} from '@rocket.chat/rest-typings';
import { Meteor } from 'meteor/meteor';

import { handleSuggestedGroupKey } from '../../../e2e/server/functions/handleSuggestedGroupKey';
import { API } from '../api';

API.v1.addRoute(
	'e2e.fetchMyKeys',
	{
		authRequired: true,
	},
	{
		async get() {
			const result: {
				public_key: string;
				private_key: string;
			} = await Meteor.callAsync('e2e.fetchMyKeys');

			return API.v1.success(result);
		},
	},
);

API.v1.addRoute(
	'e2e.getUsersOfRoomWithoutKey',
	{
		authRequired: true,
		validateParams: ise2eGetUsersOfRoomWithoutKeyParamsGET,
	},
	{
		async get() {
			const { rid } = this.queryParams;

			const result: {
				users: IUser[];
			} = await Meteor.callAsync('e2e.getUsersOfRoomWithoutKey', rid);

			return API.v1.success(result);
		},
	},
);

/**
 * @openapi
 *  /api/v1/e2e.setRoomKeyID:
 *    post:
 *      description: Sets the end-to-end encryption key ID for a room
 *      security:
 *        - autenticated: {}
 *      requestBody:
 *        description: A tuple containing the room ID and the key ID
 *        content:
 *          application/json:
 *            schema:
 *              type: object
 *              properties:
 *                rid:
 *                  type: string
 *                keyID:
 *                  type: string
 *      responses:
 *        200:
 *          content:
 *            application/json:
 *              schema:
 *                $ref: '#/components/schemas/ApiSuccessV1'
 *        default:
 *          description: Unexpected error
 *          content:
 *            application/json:
 *              schema:
 *                $ref: '#/components/schemas/ApiFailureV1'
 */

API.v1.addRoute(
	'e2e.setRoomKeyID',
	{
		authRequired: true,
		validateParams: ise2eSetRoomKeyIDParamsPOST,
	},
	{
		async post() {
			const { rid, keyID } = this.bodyParams;

			await Meteor.callAsync('e2e.setRoomKeyID', rid, keyID);

			return API.v1.success();
		},
	},
);

/**
 * @openapi
 *  /api/v1/e2e.setUserPublicAndPrivateKeys:
 *    post:
 *      description: Sets the end-to-end encryption keys for the authenticated user
 *      security:
 *        - autenticated: {}
 *      requestBody:
 *        description: A tuple containing the public and the private keys
 *        content:
 *          application/json:
 *            schema:
 *              type: object
 *              properties:
 *                public_key:
 *                  type: string
 *                private_key:
 *                  type: string
 *      responses:
 *        200:
 *          content:
 *            application/json:
 *              schema:
 *                $ref: '#/components/schemas/ApiSuccessV1'
 *        default:
 *          description: Unexpected error
 *          content:
 *            application/json:
 *              schema:
 *                $ref: '#/components/schemas/ApiFailureV1'
 */
API.v1.addRoute(
	'e2e.setUserPublicAndPrivateKeys',
	{
		authRequired: true,
		validateParams: ise2eSetUserPublicAndPrivateKeysParamsPOST,
	},
	{
		async post() {
			// eslint-disable-next-line @typescript-eslint/naming-convention
			const { public_key, private_key } = this.bodyParams;

			await Meteor.callAsync('e2e.setUserPublicAndPrivateKeys', {
				public_key,
				private_key,
			});

			return API.v1.success();
		},
	},
);

/**
 * @openapi
 *  /api/v1/e2e.updateGroupKey:
 *    post:
 *      description: Updates the end-to-end encryption key for a user on a room
 *      security:
 *        - autenticated: {}
 *      requestBody:
 *        description: A tuple containing the user ID, the room ID, and the key
 *        content:
 *          application/json:
 *            schema:
 *              type: object
 *              properties:
 *                uid:
 *                  type: string
 *                rid:
 *                  type: string
 *                key:
 *                  type: string
 *      responses:
 *        200:
 *          content:
 *            application/json:
 *              schema:
 *                $ref: '#/components/schemas/ApiSuccessV1'
 *        default:
 *          description: Unexpected error
 *          content:
 *            application/json:
 *              schema:
 *                $ref: '#/components/schemas/ApiFailureV1'
 */
API.v1.addRoute(
	'e2e.updateGroupKey',
	{
		authRequired: true,
		validateParams: ise2eUpdateGroupKeyParamsPOST,
	},
	{
		async post() {
			const { uid, rid, key } = this.bodyParams;

			await Meteor.callAsync('e2e.updateGroupKey', rid, uid, key);

			return API.v1.success();
		},
	},
);

API.v1.addRoute(
	'e2e.acceptSuggestedGroupKey',
	{
		authRequired: true,
		validateParams: ise2eGetUsersOfRoomWithoutKeyParamsGET,
	},
	{
		async post() {
			const { rid } = this.bodyParams;

			await handleSuggestedGroupKey('accept', rid, this.userId, 'e2e.acceptSuggestedGroupKey');

			return API.v1.success();
		},
	},
);

API.v1.addRoute(
	'e2e.rejectSuggestedGroupKey',
	{
		authRequired: true,
		validateParams: ise2eGetUsersOfRoomWithoutKeyParamsGET,
	},
	{
		async post() {
			const { rid } = this.bodyParams;

			await handleSuggestedGroupKey('reject', rid, this.userId, 'e2e.rejectSuggestedGroupKey');

			return API.v1.success();
		},
	},
);


import { css } from '@rocket.chat/css-in-js';

export const anchor = 'rcx-contextual-message__follow';

export const followStyle = css`
	& .${anchor} {
		opacity: 0;
	}
	.${anchor}:focus, &:hover .${anchor}, &:focus .${anchor} {
		opacity: 1;
	}
`;


export type PaginatedResult<T = Record<string, boolean | number | string | object>> = {
	count: number;
	offset: number;
	total: number;
} & T;


<GenericTable data-qa='GenericTableCustomFieldsInfoBody' aria-busy={filter !== debouncedFilter} aria-live='assertive'>

import { Pagination } from '@rocket.chat/fuselage';
import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
import { useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
import { useQuery, hashQueryKey } from '@tanstack/react-query';
import type { MutableRefObject } from 'react';
import React, { useMemo, useState, useEffect } from 'react';

import FilterByText from '../../../components/FilterByText';
import GenericNoResults from '../../../components/GenericNoResults';
import {
	GenericTable,
	GenericTableHeader,
	GenericTableHeaderCell,
	GenericTableRow,
	GenericTableCell,
	GenericTableBody,
	GenericTableLoadingTable,
} from '../../../components/GenericTable';
import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
import { useSort } from '../../../components/GenericTable/hooks/useSort';
import RemoveCustomFieldButton from './RemoveCustomFieldButton';

const CustomFieldsTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
	const t = useTranslation();
	const router = useRouter();
	const [filter, setFilter] = useState('');
	const debouncedFilter = useDebouncedValue(filter, 500);

	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
	const { sortBy, sortDirection, setSort } = useSort<'_id' | 'label' | 'scope' | 'visibility'>('_id');

	const handleAddNew = useMutableCallback(() => router.navigate('/omnichannel/customfields/new'));
	const onRowClick = useMutableCallback((id) => () => router.navigate(`/omnichannel/customfields/edit/${id}`));

	const query = useMemo(
		() => ({
			text: debouncedFilter,
			sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
			...(itemsPerPage && { count: itemsPerPage }),
			...(current && { offset: current }),
		}),
		[debouncedFilter, itemsPerPage, current, sortBy, sortDirection],
	);

	const getCustomFields = useEndpoint('GET', '/v1/livechat/custom-fields');
	const { data, isSuccess, isLoading, refetch } = useQuery(['livechat-customFields', query], async () => getCustomFields(query));

	const [defaultQuery] = useState(hashQueryKey([query]));
	const queryHasChanged = defaultQuery !== hashQueryKey([query]);

	useEffect(() => {
		reload.current = refetch;
	}, [reload, refetch]);
	reload.current = refetch;

	const headers = (
		<>
			<GenericTableHeaderCell key='field' direction={sortDirection} active={sortBy === '_id'} onClick={setSort} sort='_id'>
				{t('Field')}
			</GenericTableHeaderCell>
			<GenericTableHeaderCell key='label' direction={sortDirection} active={sortBy === 'label'} onClick={setSort} sort='label'>
				{t('Label')}
			</GenericTableHeaderCell>
			<GenericTableHeaderCell key='scope' direction={sortDirection} active={sortBy === 'scope'} onClick={setSort} sort='scope'>
				{t('Scope')}
			</GenericTableHeaderCell>
			<GenericTableHeaderCell
				key='visibility'
				direction={sortDirection}
				active={sortBy === 'visibility'}
				onClick={setSort}
				sort='visibility'
			>
				{t('Visibility')}
			</GenericTableHeaderCell>
			<GenericTableHeaderCell key='remove' w='x60'>
				{t('Remove')}
			</GenericTableHeaderCell>
		</>
	);

	return (
		<>
			{((isSuccess && data?.customFields.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setFilter(text)} />}
			{isLoading && (
				<GenericTable>
					<GenericTableHeader>{headers}</GenericTableHeader>
					<GenericTableBody>
						<GenericTableLoadingTable headerCells={5} />
					</GenericTableBody>
				</GenericTable>
			)}
			{isSuccess && data.customFields.length === 0 && queryHasChanged && <GenericNoResults />}
			{isSuccess && data.customFields.length === 0 && !queryHasChanged && (
				<GenericNoResults
					icon='file-sheets'
					title={t('No_custom_fields_yet')}
					description={t('No_custom_fields_yet_description')}
					buttonAction={handleAddNew}
					buttonTitle={t('Create_custom_field')}
					linkHref='https://go.rocket.chat/omnichannel-docs'
					linkText={t('Learn_more_about_custom_fields')}
				/>
			)}

			{isSuccess && data.customFields.length > 0 && (
				<>
					<GenericTable data-qa='GenericTableCustomFieldsInfoBody'>
						<GenericTableHeader>{headers}</GenericTableHeader>
						<GenericTableBody>
							{data.customFields.map(({ label, _id, scope, visibility }) => (
								<GenericTableRow key={_id} tabIndex={0} role='link' onClick={onRowClick(_id)} action qa-user-id={_id}>
									<GenericTableCell withTruncatedText>{_id}</GenericTableCell>
									<GenericTableCell withTruncatedText>{label}</GenericTableCell>
									<GenericTableCell withTruncatedText>{scope === 'visitor' ? t('Visitor') : t('Room')}</GenericTableCell>
									<GenericTableCell withTruncatedText>{visibility === 'visible' ? t('Visible') : t('Hidden')}</GenericTableCell>
									<RemoveCustomFieldButton _id={_id} reload={refetch} />
								</GenericTableRow>
							))}
						</GenericTableBody>
					</GenericTable>
					<Pagination
						divider
						current={current}
						itemsPerPage={itemsPerPage}
						count={data.total || 0}
						onSetItemsPerPage={onSetItemsPerPage}
						onSetCurrent={onSetCurrent}
						{...paginationProps}
					/>
				</>
			)}
		</>
	);
};

export default CustomFieldsTable;


.rc-old .no-scroll {
	overflow: hidden !important;
}

.rc-old code {
	margin: 5px 0;
	padding: 0.5em;

	text-align: left;
	vertical-align: middle;
	white-space: pre-wrap;
	word-wrap: break-word;

	border-width: 1px;
	border-radius: var(--border-radius);

	font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
	font-size: 13px;
	font-weight: 600;
	direction: ltr;
	unicode-bidi: embed;

	&.inline {
		display: inline;

		padding: 0.05rem 0.2rem;

		line-height: 1.25rem;
	}
}

.rc-old code.hljs {
	overflow-y: hidden;
}

.rc-old pre {
	display: inline-block;

	width: 100%;
}

.rc-old blockquote {
	position: relative;

	display: block;

	clear: both;

	min-height: 20px;

	padding-left: 10px;

	&::after {
		display: table;
		clear: both;

		content: '';
	}

	&:first-child::before {
		border-radius: 2px 2px 0 0;
	}

	&:last-child::before {
		border-radius: 0 0 2px 2px;
	}

	&::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;

		width: 2px;

		content: ' ';
	}
}

.rc-old .login-terms {
	width: 520px;
	max-width: 100%;
	margin: auto;
	padding: 10px;

	font-size: smaller;

	& a {
		text-decoration: underline;

		font-weight: bold !important;
	}
}

.upload-preview {
	& .upload-preview-file {
		height: 200px;

		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
}

.upload-preview-title {
	padding: 3px;

	border-radius: 0 0 5px 5px;
}

.copyonly {
	display: none;

	width: 0;
	height: 0;

	user-select: none;
	vertical-align: baseline;

	font-size: 0;
	-moz-box-orient: vertical;

	code & {
		float: left;
	}
}

.rc-old .full-page .hidden {
	display: none !important;
	visibility: hidden !important;
}

.rc-old .hidden {
	display: none !important;
}

.rc-old .page-container {
	position: absolute;
	top: 0;
	left: 0;

	display: flex;

	overflow-y: hidden;
	flex-direction: column;

	width: 100%;
	height: 100%;

	padding: 1.25rem;

	& .content {
		display: flex;
		overflow-y: auto;
		flex-direction: column;
		flex: 1 1 auto;

		margin: 0 -1.25rem;
		padding: 1.25rem 1.25rem 0;

		line-height: 1.3em;
		-webkit-overflow-scrolling: touch;

		& fieldset {
			margin-bottom: 1em;
		}

		& .rocket-form {
			& fieldset {
				display: block;

				margin: 1em 0 1.5em;

				& small {
					font-size: 11px;
				}
			}

			& legend {
				position: relative;

				display: block;

				width: 100%;
				margin: 12px 0;

				font-weight: bold;

				& h3 {
					margin-bottom: 5px !important;
				}
			}

			& .submit {
				margin-top: 20px;

				text-align: right;
			}
		}
	}
}

.rc-old .input-line {
	display: block;
	clear: both;

	margin-bottom: 12px;

	&::after {
		display: table;
		clear: both;

		content: '';
	}

	&:nth-last-child(1) {
		margin-bottom: 0;
	}

	&.search {
		& i {
			position: absolute;
			top: 10px;
			left: 7px;
		}

		& .icon-spin {
			right: 5px;
			left: auto;

			animation-name: spin;
			animation-duration: 2000ms;
			animation-timing-function: linear;
			animation-iteration-count: infinite;

			font-weight: 400;
		}

		& input {
			padding-left: 30px;
		}
	}

	& > label {
		display: block;

		margin-bottom: 4px;
	}

	& > div {
		position: relative;

		& .right {
			position: absolute;
			z-index: 10;
			top: 10px;
			right: 10px;
		}
	}

	& > div.-autocomplete-container {
		position: absolute;
	}

	& input[type='text'] {
		display: block;
	}
}

.rc-old form.inline {
	& input[type='text'],
	& input[type='number'],
	& input[type='email'],
	& input[type='url'],
	& input[type='password'],
	& select {
		width: auto;
	}
}

.rc-old .-autocomplete-container {
	top: auto;

	width: 100%;

	border-width: 0;
	border-radius: 0;
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);

	& p {
		padding: 8px;

		font-size: 14px;
	}

	& .loading-animation {
		position: relative;

		min-height: 60px;
	}
}

.rc-old .-autocomplete-item {
	padding: 8px 5px;

	cursor: pointer;

	font-size: 12px;
}

.rc-old label.required::after {
	content: ' *';
}

.rc-old.flex-nav {
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;

	overflow-x: hidden;
	overflow-y: auto;

	width: var(--rooms-box-width);
	height: 100%;

	transition: transform 0.15s cubic-bezier(0.5, 0, 0.1, 1);

	&.animated-hidden {
		transform: translateX(-100%);

		& header,
		& footer,
		& .content {
			transform: translateX(-100%);
		}
	}

	& header,
	& footer,
	& .content {
		transition: transform 0.425s cubic-bezier(0, 0.8, 0.05, 1);
	}

	& > section {
		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;
	}

	& header {
		position: absolute;
		z-index: 110;
		top: 0;
		left: 0;

		display: table;

		width: 100%;
		height: var(--header-min-height);
		min-height: var(--header-min-height);
		padding-left: 15px;

		cursor: pointer;

		& > div {
			display: table-cell;

			text-align: left;
			vertical-align: middle;
		}

		& h4 {
			position: relative;

			overflow: hidden;

			margin-top: 2px;

			text-overflow: ellipsis;

			font-size: 20px;
			font-weight: 300;
			line-height: 24px;
		}

		& p {
			margin-top: 4px;

			font-size: 13px;
			font-weight: 400;
			line-height: 18px;
		}
	}

	& footer {
		position: absolute;
		z-index: 120;
		bottom: 0;
		left: 0;

		display: table;

		width: 100%;
		height: var(--footer-min-height);
		padding: 0 10px;

		text-align: left;

		& > div {
			display: table-cell;

			text-align: left;
			vertical-align: middle;
		}
	}

	& .content {
		position: absolute;
		top: var(--header-min-height);

		display: block;
		overflow-x: hidden;
		overflow-y: auto;

		width: 100%;
		height: calc(100% - calc(var(--header-min-height) + var(--footer-min-height)));
		padding: 20px 10px;
		direction: rtl;
		-webkit-overflow-scrolling: touch;

		& > .wrapper {
			direction: ltr;
		}

		& h4 {
			margin-bottom: 30px;

			text-transform: uppercase;

			font-size: 13px;
			font-weight: 400;
		}
	}

	& .input-line {
		margin-bottom: 25px;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}

		& label {
			margin-bottom: 0;

			font-weight: 400;
		}

		& input[type='text'],
		& input[type='password'],
		& select {
			padding: 0 8px 0 30px;

			border-width: 1px;
			border-radius: var(--border-radius);
			box-shadow: 0 0 0;
			appearance: none;
		}

		& .inline-fields {
			& input,
			& label,
			& select {
				display: inline-block;
			}
		}

		&.toggle {
			font-size: 0;

			& > label {
				display: inline-block;

				width: calc(100% - 40px);

				vertical-align: top;

				font-size: 14px;
			}

			& > div {
				display: inline-block;

				width: 40px;
			}
		}

		&.no-icon input {
			padding: 0 8px;
		}
	}

	& .selected-users {
		padding: 20px 0 0;

		& li {
			display: inline-block;

			margin-right: 2px;
			margin-bottom: 2px;
			padding: 5px;
		}

		& i {
			cursor: pointer;
		}
	}
}

.rc-old .new-room-highlight a {
	animation: highlight 6s infinite;
}

/* MAIN CONTENT + MAIN PAGES */

.rc-old .page-settings {
	& .settings-file-preview {
		display: flex;
		align-items: center;

		& input[type='file'] {
			position: absolute !important;
			z-index: 10000;
			top: 0;
			left: 0;

			width: 100%;
			height: 100%;

			cursor: pointer;

			opacity: 0;

			& * {
				cursor: pointer;
			}
		}

		& .preview {
			overflow: hidden;

			width: 100px;
			height: 40px;

			margin-right: 0.75rem;

			border-width: var(--input-border-width);
			border-color: var(--input-border-color);
			border-radius: var(--input-border-radius);

			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;

			&.no-file {
				display: flex;

				align-items: center;
				justify-content: center;
			}
		}
	}
}

.rc-old .room-not-found {
	display: flex;
	flex-direction: column;

	font-size: 30px;
	align-items: center;
	justify-content: center;

	& div {
		text-align: center;

		line-height: 40px;
	}

	& i {
		padding-bottom: 30px;

		font-size: 100px;
	}
}

.rc-old .container-bars {
	position: relative;
	z-index: 2;

	display: none;
	visibility: hidden;
	overflow: hidden;
	flex-direction: column;

	margin: 5px 10px 0;

	transition: transform 0.4s ease, visibility 0.3s ease, opacity 0.3s ease;
	transform: translateY(-10px);

	opacity: 0;
	border-radius: var(--border-radius);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.16);

	font-size: 1em;
	font-weight: bold;

	&.show {
		display: flex;
		visibility: visible;

		transform: translateY(0);

		opacity: 1;
	}

	& > div {
		padding: 0 10px;

		line-height: 28px;
	}

	& .upload-progress {
		position: relative;

		display: flex;

		height: 28px;

		& .upload-progress-progress {
			position: absolute;
			z-index: 1;
			left: 0;

			width: 0%;
			height: 100%;

			transition: width, 1s, ease-out;
		}

		& .upload-progress-text {
			z-index: 2;
			right: 0;
			left: 0;

			overflow: hidden;

			width: 50%;

			height: 100%;
			padding: 0 10px;

			white-space: nowrap;
			text-overflow: ellipsis;
			flex-grow: 1;

			& > a {
				float: right;

				cursor: pointer;
				text-transform: uppercase;
			}
		}

		& .upload-progress-close {
			position: relative;
			z-index: 3;

			float: right;

			height: 100%;

			text-transform: uppercase;

			font-weight: bold;
		}
	}
}

.rc-old .flex-tab-main-content {
	position: relative;
	z-index: 1;

	overflow: auto;
	flex-grow: 1;
}

.rc-old .room-container {
	height: 100%;
}

/* change to page-messages */

.rc-old .messages-container {
	position: relative;

	display: flex;
	flex-direction: column;
	flex: 1;

	width: 100%;

	&-wrapper {
		display: flex;

		flex: 1 1 auto;

		height: 1%;
	}

	&-main {
		position: relative;

		display: flex;
		flex-direction: column;
		flex: 1 1 auto;

		width: 50%;
	}

	& .wrapper {
		position: absolute;
		top: 0;
		left: 0;

		overflow-x: hidden;
		overflow-y: auto;

		width: 100%;
		height: 100%;

		word-wrap: break-word;
		-webkit-overflow-scrolling: touch;
	}

	& .footer {
		flex-shrink: 0;
	}
}

.rc-old .preview-items .popup-item {
	margin: 2px;

	padding: 0;

	cursor: pointer;

	user-select: none;

	border: solid 1px transparent;

	line-height: initial;
}

.messages-box {
	position: relative;

	overflow: hidden;
	flex-grow: 1;

	& .wrapper.has-more-next {
		padding-bottom: 24px;
	}

	& ul.messages-list {
		padding: 21px 0 10px;
	}

	& .start {
		margin-top: 12px;

		text-align: center;

		& .start__purge-warning {
			margin-top: -33px;
			margin-bottom: 0.5rem;
			padding: 1rem;

			border-width: 1px 0 0;
			background: linear-gradient(to bottom, var(--rc-color-alert-message-warning-background) 0%, rgba(255, 255, 255, 0) 100%);
		}
	}

	& .editing .body {
		border-radius: var(--border-radius);
	}

	&.has-leader {
		& .wrapper {
			padding-top: 57px;
		}
	}
}

.rcx-message {
	&.highlight {
		animation: highlight 6s;
	}
}

.rc-old .attachment-description {
	margin: 6px;

	line-height: 1;
}

/* FLEX-TAB and FLEX-TAB views */
.rc-old .main-content-flex {
	display: flex;

	height: 100%;
	flex-grow: 1;
}

.page-loading {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	display: flex;

	text-align: center;

	background-color: var(--page-loading-background-light);

	align-items: center;
	justify-content: center;

	@media (prefers-color-scheme: dark) {
		background: var(--page-loading-background-dark);
	}
}

.rc-old.full-page {
	display: flex;
	overflow: auto;

	width: 100%;
	min-height: 100%;
	margin: auto;

	text-align: center;

	background-repeat: no-repeat;
	background-attachment: fixed;

	background-position: center;
	background-size: cover;
	align-items: flex-start;
	flex-flow: row nowrap;

	& .wrapper {
		position: relative;
		z-index: 10;

		width: 100%;
		margin: auto;
		padding: 20px;

		text-align: center;
	}

	& .logo {
		display: block;

		width: 100%;
		max-width: 520px;
		margin: 0 auto;
		padding: 0 20px;

		& > img {
			position: relative;
			z-index: 20;
			top: 0;
			right: 0;

			display: inline-block;

			max-width: 100%;
			max-height: 150px;
		}
	}

	& a:not(.rcx-box) {
		font-weight: 300;
	}

	& .cell {
		display: table-cell;

		text-align: center;
		vertical-align: middle;
	}

	& header:not(.rcx-box) {
		position: relative;
		z-index: 1;

		display: block;

		max-width: 520px;
		margin: auto;
		padding: 0 20px;
	}

	& .text {
		position: relative;
		z-index: 1;

		max-width: 580px;
		margin: 0 auto 25px;

		font-weight: 300;

		& .button {
			margin-top: 20px;
			padding: 16px 20px;

			font-weight: 400;
		}

		& h1 {
			display: none;

			margin-bottom: 20px;

			letter-spacing: -0.5px;
			text-transform: uppercase;

			font-size: 24px;
			font-weight: 600;
		}

		& h2 {
			margin: 18px 0;

			letter-spacing: -0.5px;
			text-transform: uppercase;

			font-size: 20px;
			font-weight: 300;
		}

		& h3 {
			margin: 18px 0;

			letter-spacing: -0.5px;
			text-transform: uppercase;

			font-size: 16px;
			font-weight: 300;
		}

		& p {
			margin: 18px 0;

			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
		}
	}

	& footer {
		position: relative;
		z-index: 1;

		padding: 20px 0 0;

		& h4 {
			margin-bottom: 8px;

			text-transform: uppercase;

			font-size: 12px;
			font-weight: 300;
		}
	}

	& .share {
		min-height: 40px;

		border-radius: 50%;

		line-height: 20px;

		&::before {
			border-radius: 50%;
		}

		& span {
			display: none;
		}
	}
}

.rc-old .highlight-text {
	padding: 0 2px 2px;

	color: var(--rcx-color-font-pure-white, #ffffff);

	border-radius: var(--border-radius);
	background-color: var(--rcx-color-badge-background-level-4, #f5455c);
}

@keyframes zoomIn {
	0% {
		transform: scale3d(0.9, 0.9, 0.9);

		opacity: 0;
	}

	50% {
		opacity: 1;
	}
}

.rc-old .touch .footer {
	padding-right: 10px;
	padding-left: 10px;
}

.rc-old .alert-icon {
	display: block;

	margin-bottom: 20px;

	font-size: 80px;
}

.rc-old .inline-video {
	width: 100%;
	max-width: 480px;
	height: auto;
	max-height: 270px;
}

.rc-old .attention-message {
	padding-top: 50px;

	font-size: 24px;

	& i {
		display: block;

		margin-bottom: 20px;

		font-size: 40px;
	}

	& span {
		display: block;
	}
}

.rc-old .load-more {
	position: relative;

	height: 2rem;
}

.flex-tab.discussions > .flex-tab__content {
	padding: 0;
}

.rc-old .flex-tab {
	&__content {
		display: flex;
		flex-direction: column;

		height: 100%;
	}

	&__header {
		flex: 0 0 auto;

		padding-bottom: 10px;
	}

	&__result {
		overflow-x: hidden;
		overflow-y: auto;
		flex: 1 1 auto;
	}

	& .no-results {
		text-align: center;
	}
}

.rc-old .code-colors {
	color: var(--rcx-color-font-default, #1f2329);
	border-color: var(--rcx-color-stroke-extra-light, #ebecef);
	background-color: var(--rcx-color-surface-neutral, #e4e7ea);
}

.rc-old .powered-by {
	margin-top: 1em;
}

.rc-old .code-error-box {
	& .title {
		margin-top: 5px;
		padding: 5px;

		font-size: 16px;
		font-weight: bold;
	}

	& .script-error {
		padding: 6px;

		border-left: 3px solid;

		font-size: 12px;
		font-weight: bold;
	}
}

.rc-old .code-mirror-box {
	& .CodeMirror {
		border-width: var(--input-border-width);
		border-color: var(--input-border-color);
		border-radius: var(--input-border-radius);
	}

	&.code-mirror-box-fullscreen {
		& .CodeMirror {
			display: flex;
			flex-direction: column;
			flex-grow: 1;

			& .CodeMirror-scroll {
				flex-grow: 1;
			}
		}
	}
}

.rc-old .collapse-switch {
	cursor: pointer;
}

.toggle-hidden {
	cursor: pointer;

	font-style: italic;
}

.rc-old .form-inline {
	& input,
	& select {
		display: inline-block;

		width: auto;

		vertical-align: middle;
	}

	& label {
		display: inline-block;

		max-width: 100%;
	}

	& .form-group {
		display: inline-block;

		vertical-align: middle;
	}
}

.rc-old .embedded-view {
	& .messages-container {
		border-width: 0;

		& .messages-box {
			margin-top: 0;
		}

		& .footer {
			min-height: 36px;
			padding: 0;

			& .users-typing {
				display: none;
			}

			& .formatting-tips {
				display: none;
			}
		}
	}
}

.rc-old .user-info.deactivated {
	text-decoration: line-through;

	opacity: 0.8;
}

/* MEDIA QUERIES */

@media (width <= 1100px) {
	.rc-old .flex-tab-container.opened .flex-tab {
		position: absolute;
		z-index: 100;

		right: 40px;

		height: 100%;
	}
}

@media (max-width: 767px) {
	.rc-old.main-content {
		transition: right 0.25s cubic-bezier(0.5, 0, 0.1, 1), transform 0.1s linear;
		will-change: transform;
	}
}

@media (height <= 480px) {
	.rc-old .oauth-login {
		margin-bottom: 6px;
	}
}

@media (width <= 440px) {
	.rc-old .flex-tab-container.opened .flex-tab {
		left: 0;

		width: auto;
	}

	.flex-tab-container.opened {
		left: 0;
	}
}

@media (height <= 400px) {
	.upload-preview .upload-preview-file {
		height: 100px;
	}
}


import { Box, Button, Icon } from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import type { ComponentProps, MouseEventHandler } from 'react';
import React, { forwardRef } from 'react';

type CategoryDropDownAnchorProps = { selectedCategoriesCount: number; onClick?: MouseEventHandler<HTMLElement> } & ComponentProps<
	typeof Button
>;

const CategoryDropDownAnchor = forwardRef<HTMLElement, CategoryDropDownAnchorProps>(function CategoryDropDownAnchor(
	{ onClick, selectedCategoriesCount, ...props },
	ref,
) {
	const t = useTranslation();

	return (
		<Box
			is={Button}
			ref={ref}
			onClick={onClick}
			display='flex'
			alignItems='center'
			justifyContent='space-between'
			minWidth='x144'
			flexGrow={1}
			flexShrink={1}
			borderColor={selectedCategoriesCount ? 'none' : 'light'}
			borderWidth={selectedCategoriesCount ? 'none' : 'x1'}
			{...(selectedCategoriesCount ? { primary: true } : { bg: 'surface-light' })}
			{...props}
		>
			{selectedCategoriesCount > 0 && (
				<Box
					mie={6}
					borderRadius='x32'
					bg='light'
					fontWeight={700}
					fontSize='micro'
					color='info'
					pi={6}
					h='x40'
					display='flex'
					alignItems='center'
					justifyContent='center'
				>
					{selectedCategoriesCount}
				</Box>
			)}
			<Box is='span' display='flex' flexGrow={1} fontScale='p2' color={selectedCategoriesCount ? 'white' : 'hint'}>
				{selectedCategoriesCount > 0 ? t('Categories') : t('All_categories')}
			</Box>
			<Box mi={4} display='flex' alignItems='center' justifyContent='center'>
				<Icon name='chevron-down' size='x20' color={selectedCategoriesCount ? 'white' : 'hint'} />
			</Box>
		</Box>
	);
});

export default CategoryDropDownAnchor;


this.quill.on(Emitter.events.EDITOR_CHANGE, (type, range, oldRange, source) => {

import extend from 'extend';
import Emitter from '../core/emitter';
import BaseTheme, { BaseTooltip } from './base';
import { Range } from '../core/selection';
import icons from '../ui/icons';

const TOOLBAR_CONFIG = [
  ['bold', 'italic', 'link'],
  [{ header: 1 }, { header: 2 }, 'blockquote']
];

class BubbleTheme extends BaseTheme {
  constructor(quill, options) {
    if (options.modules.toolbar != null && options.modules.toolbar.container == null) {
      options.modules.toolbar.container = TOOLBAR_CONFIG;
    }
    super(quill, options);
    this.quill.container.classList.add('ql-bubble');
  }

  extendToolbar(toolbar) {
    this.tooltip = new BubbleTooltip(this.quill, this.options.bounds);
    this.tooltip.root.appendChild(toolbar.container);
    this.buildButtons([].slice.call(toolbar.container.querySelectorAll('button')), icons);
    this.buildPickers([].slice.call(toolbar.container.querySelectorAll('select')), icons);
  }
}
BubbleTheme.DEFAULTS = extend(true, {}, BaseTheme.DEFAULTS, {
  modules: {
    toolbar: {
      handlers: {
        link: function(value) {
          if (!value) {
            this.quill.format('link', false);
          } else {
            this.quill.theme.tooltip.edit();
          }
        }
      }
    }
  }
});

class BubbleTooltip extends BaseTooltip {
  constructor(quill, bounds) {
    super(quill, bounds);
    this.quill.on(Emitter.events.EDITOR_CHANGE, (type, range) => {
      if (type !== Emitter.events.SELECTION_CHANGE) return;
      if (range != null && range.length > 0) {
        this.show();
        // Lock our width so we will expand beyond our offsetParent boundaries
        this.root.style.left = '0px';
        this.root.style.width = '';
        this.root.style.width = this.root.offsetWidth + 'px';
        let lines = this.quill.scroll.lines(range.index, range.length);
        if (lines.length === 1) {
          this.position(this.quill.getBounds(range));
        } else {
          let lastLine = lines[lines.length - 1];
          let index = lastLine.offset(this.quill.scroll);
          let length = Math.min(lastLine.length() - 1, range.index + range.length - index);
          let bounds = this.quill.getBounds(new Range(index, length));
          this.position(bounds);
        }
      } else if (document.activeElement !== this.textbox && this.quill.hasFocus()) {
        this.hide();
      }
    });
  }

  listen() {
    super.listen();
    this.root.querySelector('.ql-close').addEventListener('click', () => {
      this.root.classList.remove('ql-editing');
    });
    this.quill.on(Emitter.events.SCROLL_OPTIMIZE, () => {
      // Let selection be restored by toolbar handlers before repositioning
      setTimeout(() => {
        if (this.root.classList.contains('ql-hidden')) return;
        let range = this.quill.getSelection();
        if (range != null) {
          this.position(this.quill.getBounds(range));
        }
      }, 1);
    });
  }

  cancel() {
    this.show();
  }

  position(reference) {
    let shift = super.position(reference);
    let arrow = this.root.querySelector('.ql-tooltip-arrow');
    arrow.style.marginLeft = '';
    if (shift === 0) return shift;
    arrow.style.marginLeft = (-1*shift - arrow.offsetWidth/2) + 'px';
  }
}
BubbleTooltip.TEMPLATE = [
  '',
  '
',
    '<input type="text" data-formula="e=mc^2" data-link="quilljs.com" data-video="Embed URL">',
    '',
  '
'
].join('');

export { BubbleTooltip, BubbleTheme as default };