@pelcro/react-pelcro-js 3.13.0-beta.6 → 4.0.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/pelcro.css CHANGED
@@ -22,8 +22,7 @@ Use a more readable tab size (opinionated).
22
22
  */
23
23
 
24
24
  .pelcro-root {
25
- -moz-tab-size: 4;
26
- tab-size: 4;
25
+ tab-size: 4;
27
26
  }
28
27
 
29
28
  /**
@@ -660,20 +659,20 @@ Add the correct display in Chrome and Safari.
660
659
  }
661
660
 
662
661
  .pelcro-root .pelcro-badge {
663
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
664
- border-radius: 9999px;
662
+ position: absolute;
665
663
  display: flex;
664
+ height: 25%;
665
+ width: 25%;
666
666
  flex-wrap: wrap;
667
667
  align-items: center;
668
668
  justify-content: center;
669
- font-weight: 700;
670
- height: 25%;
669
+ border-radius: 9999px;
670
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
671
671
  font-size: 0.875rem;
672
672
  line-height: 1.25rem;
673
- position: absolute;
673
+ font-weight: 700;
674
674
  --tw-text-opacity: 1;
675
675
  color: rgba(255, 255, 255, var(--tw-text-opacity));
676
- width: 25%;
677
676
  top: -5%;
678
677
  right: -5%;
679
678
  }
@@ -683,19 +682,19 @@ Add the correct display in Chrome and Safari.
683
682
  }
684
683
 
685
684
  .pelcro-root .pelcro-modal-overlay {
686
- --tw-bg-opacity: 1;
687
- background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
688
- --tw-bg-opacity: 0.6;
689
- display: flex;
690
- align-items: center;
691
- justify-content: center;
692
- height: 100%;
693
- overflow: auto;
694
685
  position: fixed;
695
686
  top: 0px;
696
687
  left: 0px;
697
- width: 100%;
698
688
  z-index: 999999;
689
+ display: flex;
690
+ height: 100%;
691
+ width: 100%;
692
+ align-items: center;
693
+ justify-content: center;
694
+ overflow: auto;
695
+ --tw-bg-opacity: 1;
696
+ background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
697
+ --tw-bg-opacity: 0.6;
699
698
  -webkit-backdrop-filter: blur(2px);
700
699
  backdrop-filter: blur(2px);
701
700
  }
@@ -735,17 +734,16 @@ Add the correct display in Chrome and Safari.
735
734
  }
736
735
 
737
736
  .pelcro-root .pelcro-modal {
738
- --tw-bg-opacity: 1;
739
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
740
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
741
- border-radius: 0.375rem;
742
- border-top-width: 8px;
737
+ position: absolute;
738
+ top: 0px;
743
739
  display: flex;
740
+ max-width: 36rem;
744
741
  flex-direction: column;
745
742
  align-items: center;
746
- max-width: 32rem;
747
- position: absolute;
748
- top: 0px;
743
+ overflow: hidden;
744
+ border-radius: 0.5rem;
745
+ --tw-bg-opacity: 1;
746
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
749
747
  }
750
748
 
751
749
  @media (min-width: 768px) {
@@ -759,10 +757,36 @@ Add the correct display in Chrome and Safari.
759
757
  }
760
758
 
761
759
  .pelcro-root .pelcro-modal-header {
762
- padding: 0.25rem;
760
+ position: relative;
761
+ display: flex;
762
+ min-height: 3rem;
763
+ flex-direction: column;
764
+ border-bottom-width: 2px;
765
+ --tw-bg-opacity: 1;
766
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
767
+ padding-left: 1.5rem;
768
+ padding-right: 1.5rem;
769
+ padding-top: 0.75rem;
770
+ padding-bottom: 0.75rem;
771
+ border-bottom-width: 1px;
763
772
  }
764
773
 
765
774
  .pelcro-root .pelcro-modal-close {
775
+ position: absolute;
776
+ top: 50%;
777
+ right: 1.25rem;
778
+ z-index: 999999;
779
+ width: 1.5rem;
780
+ --tw-translate-x: 0;
781
+ --tw-translate-y: 0;
782
+ --tw-rotate: 0;
783
+ --tw-skew-x: 0;
784
+ --tw-skew-y: 0;
785
+ --tw-scale-x: 1;
786
+ --tw-scale-y: 1;
787
+ transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
788
+ --tw-translate-y: -50%;
789
+ border-width: 0px;
766
790
  background-color: transparent;
767
791
  }
768
792
 
@@ -774,18 +798,6 @@ Add the correct display in Chrome and Safari.
774
798
  background-color: transparent;
775
799
  }
776
800
 
777
- .pelcro-root .pelcro-modal-close {
778
- border-width: 0px;
779
- position: absolute;
780
- top: 0.75rem;
781
- right: 0.75rem;
782
- }
783
-
784
- .pelcro-root .pelcro-modal-close:hover {
785
- --tw-shadow: 0 0 #0000;
786
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
787
- }
788
-
789
801
  .pelcro-root .pelcro-modal-close {
790
802
  --tw-text-opacity: 1;
791
803
  color: rgba(107, 114, 128, var(--tw-text-opacity));
@@ -801,16 +813,25 @@ Add the correct display in Chrome and Safari.
801
813
  color: rgba(0, 0, 0, var(--tw-text-opacity));
802
814
  }
803
815
 
804
- .pelcro-root .pelcro-modal-close {
805
- width: 1.5rem;
806
- z-index: 999999;
816
+ .pelcro-root .pelcro-modal-close:hover {
817
+ --tw-shadow: 0 0 #0000;
818
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
807
819
  }
808
820
 
809
821
  .pelcro-root .pelcro-modal-body {
810
- margin-top: 1rem;
811
- margin-bottom: 1rem;
812
- margin-left: 2rem;
813
- margin-right: 2rem;
822
+ --tw-bg-opacity: 1;
823
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
824
+ padding-left: 0.5rem;
825
+ padding-right: 0.5rem;
826
+ padding-top: 0.5rem;
827
+ padding-bottom: 0.5rem;
828
+ }
829
+
830
+ @media (min-width: 768px) {
831
+ .pelcro-root .pelcro-modal-body {
832
+ padding-left: 2rem;
833
+ padding-right: 2rem;
834
+ }
814
835
  }
815
836
 
816
837
  .pelcro-root .pelcro-modal-footer {
@@ -818,12 +839,12 @@ Add the correct display in Chrome and Safari.
818
839
  flex-direction: column;
819
840
  align-items: center;
820
841
  justify-content: center;
842
+ --tw-bg-opacity: 1;
843
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
844
+ padding: 1rem;
845
+ padding-bottom: 2.75rem;
821
846
  font-size: 0.875rem;
822
847
  line-height: 1.25rem;
823
- margin-left: 2rem;
824
- margin-right: 2rem;
825
- margin-bottom: 1rem;
826
- margin-top: 1.5rem;
827
848
  }
828
849
 
829
850
  .pelcro-root .pelcro-input-wrapper {
@@ -833,19 +854,21 @@ Add the correct display in Chrome and Safari.
833
854
 
834
855
  .pelcro-root .pelcro-input-label {
835
856
  margin-bottom: 0.25rem;
857
+ display: inline-flex;
858
+ font-weight: 500;
836
859
  --tw-text-opacity: 1;
837
860
  color: rgba(17, 24, 39, var(--tw-text-opacity));
838
861
  }
839
862
 
840
863
  .pelcro-root .pelcro-input-error {
864
+ position: absolute;
865
+ margin-top: 0.125rem;
841
866
  height: auto;
842
867
  font-size: 0.875rem;
843
868
  line-height: 1.25rem;
844
- margin-top: 0.125rem;
845
- position: absolute;
869
+ text-transform: none;
846
870
  --tw-text-opacity: 1;
847
871
  color: rgba(180, 48, 43, var(--tw-text-opacity));
848
- text-transform: none;
849
872
  }
850
873
 
851
874
  .pelcro-root .pelcro-input-invalid {
@@ -857,52 +880,64 @@ Add the correct display in Chrome and Safari.
857
880
  }
858
881
 
859
882
  .pelcro-root .pelcro-input-field {
860
- -webkit-appearance: none;
861
- appearance: none;
862
- --tw-bg-opacity: 1;
863
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
883
+ min-height: 3rem;
884
+ width: 100%;
864
885
  }
865
886
 
866
887
  .pelcro-root .pelcro-input-field:disabled {
867
- --tw-bg-opacity: 1;
868
- background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
888
+ cursor: not-allowed;
869
889
  }
870
890
 
871
891
  .pelcro-root .pelcro-input-field {
892
+ -webkit-appearance: none;
893
+ appearance: none;
894
+ border-radius: 0.25rem;
895
+ border-width: 1px;
896
+ border-style: solid;
872
897
  --tw-border-opacity: 1;
873
898
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
874
- border-radius: 0.125rem;
875
- border-style: solid;
876
- border-width: 1px;
899
+ --tw-bg-opacity: 1;
900
+ background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
877
901
  }
878
902
 
879
903
  .pelcro-root .pelcro-input-field:disabled {
880
- cursor: not-allowed;
904
+ --tw-bg-opacity: 1;
905
+ background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
881
906
  }
882
907
 
883
908
  .pelcro-root .pelcro-input-field {
909
+ padding: 0.5rem;
910
+ --tw-text-opacity: 1;
911
+ color: rgba(17, 24, 39, var(--tw-text-opacity));
884
912
  outline: 2px solid transparent;
885
913
  outline-offset: 2px;
886
- padding: 0.5rem;
887
914
  }
888
915
 
889
916
  .pelcro-root .pelcro-input-field:focus {
890
917
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
891
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
918
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
892
919
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
893
920
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
894
921
  }
895
922
 
896
- .pelcro-root .pelcro-input-field {
923
+ .pelcro-root .pelcro-checkbox-label {
924
+ padding-left: 0.5rem;
897
925
  --tw-text-opacity: 1;
898
926
  color: rgba(17, 24, 39, var(--tw-text-opacity));
899
- width: 100%;
900
927
  }
901
928
 
902
- .pelcro-root .pelcro-checkbox-label {
903
- margin-left: 0.5rem;
904
- --tw-text-opacity: 1;
905
- color: rgba(17, 24, 39, var(--tw-text-opacity));
929
+ .pelcro-root .pelcro-checkbox {
930
+ height: 1.25rem;
931
+ width: 1.25rem;
932
+ cursor: pointer;
933
+ }
934
+
935
+ .pelcro-root .pelcro-checkbox:disabled {
936
+ cursor: not-allowed;
937
+ }
938
+
939
+ .pelcro-root .pelcro-checkbox {
940
+ border-radius: 0.125rem;
906
941
  }
907
942
 
908
943
  .pelcro-root .pelcro-checkbox:checked {
@@ -910,30 +945,22 @@ Add the correct display in Chrome and Safari.
910
945
  }
911
946
 
912
947
  .pelcro-root .pelcro-checkbox {
913
- border-radius: 0.25rem;
948
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
914
949
  }
915
950
 
916
951
  .pelcro-root .pelcro-checkbox:disabled {
917
- cursor: not-allowed;
952
+ --tw-text-opacity: 1;
953
+ color: rgba(209, 213, 219, var(--tw-text-opacity));
918
954
  }
919
955
 
920
956
  .pelcro-root .pelcro-checkbox:focus {
921
957
  outline: 2px solid transparent;
922
958
  outline-offset: 2px;
923
959
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
924
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
960
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
925
961
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
926
- --tw-ring-offset-width: 2px;
927
962
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
928
- }
929
-
930
- .pelcro-root .pelcro-checkbox {
931
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
932
- }
933
-
934
- .pelcro-root .pelcro-checkbox:disabled {
935
- --tw-text-opacity: 1;
936
- color: rgba(209, 213, 219, var(--tw-text-opacity));
963
+ --tw-ring-offset-width: 1px;
937
964
  }
938
965
 
939
966
  .pelcro-root .pelcro-checkbox::before {
@@ -942,13 +969,28 @@ Add the correct display in Chrome and Safari.
942
969
 
943
970
  .pelcro-root .pelcro-loader-wrapper {
944
971
  display: flex;
972
+ width: 100%;
945
973
  align-items: center;
946
- align-self: center;
947
974
  justify-content: center;
948
- width: 100%;
975
+ align-self: center;
976
+ }
977
+
978
+ .pelcro-root .pelcro-button-solid {
979
+ display: inline-flex;
980
+ min-height: 3rem;
981
+ width: max-content;
982
+ }
983
+
984
+ .pelcro-root .pelcro-button-solid:disabled {
985
+ cursor: not-allowed;
949
986
  }
950
987
 
951
988
  .pelcro-root .pelcro-button-solid {
989
+ align-items: center;
990
+ justify-content: center;
991
+ justify-items: center;
992
+ border-radius: 0.25rem;
993
+ border-width: 0px;
952
994
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
953
995
  }
954
996
 
@@ -966,32 +1008,30 @@ Add the correct display in Chrome and Safari.
966
1008
  }
967
1009
 
968
1010
  .pelcro-root .pelcro-button-solid {
969
- border-radius: 0.25rem;
970
- border-width: 0px;
971
- }
972
-
973
- .pelcro-root .pelcro-button-solid:disabled {
974
- cursor: not-allowed;
1011
+ padding-left: 1.5rem;
1012
+ padding-right: 1.5rem;
1013
+ padding-top: 0.5rem;
1014
+ padding-bottom: 0.5rem;
1015
+ font-weight: 600;
1016
+ text-transform: uppercase;
1017
+ letter-spacing: 0.05em;
1018
+ --tw-text-opacity: 1;
1019
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
975
1020
  }
976
1021
 
977
- .pelcro-root .pelcro-button-solid {
978
- display: inline-flex;
979
- align-items: center;
980
- justify-items: center;
981
- justify-content: center;
982
- font-weight: 600;
1022
+ .pelcro-root .pelcro-button-solid:hover {
1023
+ --tw-text-opacity: 1;
1024
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
983
1025
  }
984
1026
 
985
1027
  .pelcro-root .pelcro-button-solid:focus {
986
- outline: 2px solid transparent;
987
- outline-offset: 2px;
1028
+ --tw-text-opacity: 1;
1029
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
988
1030
  }
989
1031
 
990
- .pelcro-root .pelcro-button-solid {
991
- padding-top: 0.5rem;
992
- padding-bottom: 0.5rem;
993
- padding-left: 1.5rem;
994
- padding-right: 1.5rem;
1032
+ .pelcro-root .pelcro-button-solid:disabled {
1033
+ --tw-text-opacity: 1;
1034
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
995
1035
  }
996
1036
 
997
1037
  .pelcro-root .pelcro-button-solid:hover {
@@ -1000,36 +1040,35 @@ Add the correct display in Chrome and Safari.
1000
1040
  }
1001
1041
 
1002
1042
  .pelcro-root .pelcro-button-solid:focus {
1043
+ outline: 2px solid transparent;
1044
+ outline-offset: 2px;
1003
1045
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1004
1046
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1005
1047
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1006
1048
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1007
1049
  }
1008
1050
 
1009
- .pelcro-root .pelcro-button-solid {
1010
- --tw-text-opacity: 1;
1011
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1051
+ .pelcro-root .pelcro-button-outline {
1052
+ display: inline-flex;
1053
+ width: max-content;
1012
1054
  }
1013
1055
 
1014
- .pelcro-root .pelcro-button-solid:hover {
1015
- --tw-text-opacity: 1;
1016
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1056
+ .pelcro-root .pelcro-button-outline:disabled {
1057
+ cursor: not-allowed;
1017
1058
  }
1018
1059
 
1019
- .pelcro-root .pelcro-button-solid:focus {
1020
- --tw-text-opacity: 1;
1021
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1060
+ .pelcro-root .pelcro-button-outline {
1061
+ align-items: center;
1062
+ justify-content: center;
1063
+ justify-items: center;
1064
+ border-radius: 0.25rem;
1065
+ border-width: 1px;
1066
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1022
1067
  }
1023
1068
 
1024
- .pelcro-root .pelcro-button-solid:disabled {
1025
- --tw-text-opacity: 1;
1026
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1027
- }
1028
-
1029
- .pelcro-root .pelcro-button-solid {
1030
- text-transform: uppercase;
1031
- letter-spacing: 0.05em;
1032
- width: max-content;
1069
+ .pelcro-root .pelcro-button-outline:disabled {
1070
+ --tw-border-opacity: 1;
1071
+ border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1033
1072
  }
1034
1073
 
1035
1074
  .pelcro-root .pelcro-button-outline {
@@ -1049,56 +1088,13 @@ Add the correct display in Chrome and Safari.
1049
1088
  }
1050
1089
 
1051
1090
  .pelcro-root .pelcro-button-outline {
1052
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1053
- }
1054
-
1055
- .pelcro-root .pelcro-button-outline:disabled {
1056
- --tw-border-opacity: 1;
1057
- border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1058
- }
1059
-
1060
- .pelcro-root .pelcro-button-outline {
1061
- border-radius: 0.25rem;
1062
- border-width: 1px;
1063
- }
1064
-
1065
- .pelcro-root .pelcro-button-outline:disabled {
1066
- cursor: not-allowed;
1067
- }
1068
-
1069
- .pelcro-root .pelcro-button-outline {
1070
- display: inline-flex;
1071
- align-items: center;
1072
- justify-items: center;
1073
- justify-content: center;
1074
- font-weight: 600;
1075
- }
1076
-
1077
- .pelcro-root .pelcro-button-outline:focus {
1078
- outline: 2px solid transparent;
1079
- outline-offset: 2px;
1080
- }
1081
-
1082
- .pelcro-root .pelcro-button-outline {
1083
- padding-top: 0.5rem;
1084
- padding-bottom: 0.5rem;
1085
1091
  padding-left: 1.5rem;
1086
1092
  padding-right: 1.5rem;
1087
- }
1088
-
1089
- .pelcro-root .pelcro-button-outline:hover {
1090
- --tw-shadow: 0 0 #0000;
1091
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1092
- }
1093
-
1094
- .pelcro-root .pelcro-button-outline:focus {
1095
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1096
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1097
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1098
- --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1099
- }
1100
-
1101
- .pelcro-root .pelcro-button-outline {
1093
+ padding-top: 0.5rem;
1094
+ padding-bottom: 0.5rem;
1095
+ font-weight: 600;
1096
+ text-transform: uppercase;
1097
+ letter-spacing: 0.05em;
1102
1098
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1103
1099
  }
1104
1100
 
@@ -1117,20 +1113,24 @@ Add the correct display in Chrome and Safari.
1117
1113
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1118
1114
  }
1119
1115
 
1120
- .pelcro-root .pelcro-button-outline {
1121
- text-transform: uppercase;
1122
- letter-spacing: 0.05em;
1123
- width: max-content;
1116
+ .pelcro-root .pelcro-button-outline:hover {
1117
+ --tw-shadow: 0 0 #0000;
1118
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1124
1119
  }
1125
1120
 
1126
- .pelcro-root .pelcro-button-icon:hover {
1127
- --tw-bg-opacity: 1;
1128
- background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1121
+ .pelcro-root .pelcro-button-outline:focus {
1122
+ outline: 2px solid transparent;
1123
+ outline-offset: 2px;
1124
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1125
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1126
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1127
+ --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1129
1128
  }
1130
1129
 
1131
1130
  .pelcro-root .pelcro-button-icon {
1132
- border-radius: 9999px;
1133
- border-width: 0px;
1131
+ display: inline-flex;
1132
+ height: 2rem;
1133
+ width: 2rem;
1134
1134
  }
1135
1135
 
1136
1136
  .pelcro-root .pelcro-button-icon:disabled {
@@ -1138,15 +1138,22 @@ Add the correct display in Chrome and Safari.
1138
1138
  }
1139
1139
 
1140
1140
  .pelcro-root .pelcro-button-icon {
1141
- display: inline-flex;
1142
1141
  align-items: center;
1143
1142
  justify-content: center;
1144
- height: 2rem;
1143
+ border-radius: 9999px;
1144
+ border-width: 0px;
1145
1145
  }
1146
1146
 
1147
- .pelcro-root .pelcro-button-icon:focus {
1148
- outline: 2px solid transparent;
1149
- outline-offset: 2px;
1147
+ .pelcro-root .pelcro-button-icon:hover {
1148
+ --tw-bg-opacity: 1;
1149
+ background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1150
+ --tw-text-opacity: 1;
1151
+ color: rgba(75, 85, 99, var(--tw-text-opacity));
1152
+ }
1153
+
1154
+ .pelcro-root .pelcro-button-icon:disabled {
1155
+ --tw-text-opacity: 1;
1156
+ color: rgba(209, 213, 219, var(--tw-text-opacity));
1150
1157
  }
1151
1158
 
1152
1159
  .pelcro-root .pelcro-button-icon:hover {
@@ -1155,27 +1162,29 @@ Add the correct display in Chrome and Safari.
1155
1162
  }
1156
1163
 
1157
1164
  .pelcro-root .pelcro-button-icon:focus {
1165
+ outline: 2px solid transparent;
1166
+ outline-offset: 2px;
1158
1167
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1159
1168
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1160
1169
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1161
1170
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1162
1171
  }
1163
1172
 
1164
- .pelcro-root .pelcro-button-icon:hover {
1165
- --tw-text-opacity: 1;
1166
- color: rgba(75, 85, 99, var(--tw-text-opacity));
1167
- }
1168
-
1169
- .pelcro-root .pelcro-button-icon:disabled {
1170
- --tw-text-opacity: 1;
1171
- color: rgba(209, 213, 219, var(--tw-text-opacity));
1173
+ .pelcro-root .pelcro-button-ghost {
1174
+ display: inline-flex;
1175
+ width: max-content;
1172
1176
  }
1173
1177
 
1174
- .pelcro-root .pelcro-button-icon {
1175
- width: 2rem;
1178
+ .pelcro-root .pelcro-button-ghost:disabled {
1179
+ cursor: not-allowed;
1176
1180
  }
1177
1181
 
1178
1182
  .pelcro-root .pelcro-button-ghost {
1183
+ align-items: center;
1184
+ justify-content: center;
1185
+ justify-items: center;
1186
+ border-radius: 0.5rem;
1187
+ border-width: 0px;
1179
1188
  background-color: transparent;
1180
1189
  }
1181
1190
 
@@ -1194,46 +1203,10 @@ Add the correct display in Chrome and Safari.
1194
1203
  }
1195
1204
 
1196
1205
  .pelcro-root .pelcro-button-ghost {
1197
- border-radius: 0.5rem;
1198
- border-width: 0px;
1199
- }
1200
-
1201
- .pelcro-root .pelcro-button-ghost:disabled {
1202
- cursor: not-allowed;
1203
- }
1204
-
1205
- .pelcro-root .pelcro-button-ghost {
1206
- display: inline-flex;
1207
- align-items: center;
1208
- justify-items: center;
1209
- justify-content: center;
1210
- font-weight: 600;
1206
+ padding: 0.25rem;
1211
1207
  font-size: 0.75rem;
1212
1208
  line-height: 1rem;
1213
- }
1214
-
1215
- .pelcro-root .pelcro-button-ghost:focus {
1216
- outline: 2px solid transparent;
1217
- outline-offset: 2px;
1218
- }
1219
-
1220
- .pelcro-root .pelcro-button-ghost {
1221
- padding: 0.25rem;
1222
- }
1223
-
1224
- .pelcro-root .pelcro-button-ghost:hover {
1225
- --tw-shadow: 0 0 #0000;
1226
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1227
- }
1228
-
1229
- .pelcro-root .pelcro-button-ghost:focus {
1230
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1231
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1232
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1233
- --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1234
- }
1235
-
1236
- .pelcro-root .pelcro-button-ghost {
1209
+ font-weight: 600;
1237
1210
  --tw-text-opacity: 1;
1238
1211
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1239
1212
  }
@@ -1253,13 +1226,23 @@ Add the correct display in Chrome and Safari.
1253
1226
  color: rgba(209, 213, 219, var(--tw-text-opacity));
1254
1227
  }
1255
1228
 
1256
- .pelcro-root .pelcro-button-ghost {
1257
- width: max-content;
1229
+ .pelcro-root .pelcro-button-ghost:hover {
1230
+ --tw-shadow: 0 0 #0000;
1231
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1232
+ }
1233
+
1234
+ .pelcro-root .pelcro-button-ghost:focus {
1235
+ outline: 2px solid transparent;
1236
+ outline-offset: 2px;
1237
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1238
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1239
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1240
+ --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1258
1241
  }
1259
1242
 
1260
1243
  .pelcro-root .pelcro-button-spinner {
1261
- height: 1.25rem;
1262
1244
  margin-right: 0.25rem;
1245
+ height: 1.25rem;
1263
1246
  width: 1.25rem;
1264
1247
  animation: plc-spin 1s linear infinite;
1265
1248
  }
@@ -1274,39 +1257,35 @@ Add the correct display in Chrome and Safari.
1274
1257
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1275
1258
  }
1276
1259
 
1277
- .pelcro-root .pelcro-link {
1278
- text-decoration: underline;
1279
- }
1280
-
1281
1260
  .pelcro-root .pelcro-radio-label {
1282
1261
  margin-left: 0.5rem;
1283
1262
  --tw-text-opacity: 1;
1284
1263
  color: rgba(17, 24, 39, var(--tw-text-opacity));
1285
1264
  }
1286
1265
 
1287
- .pelcro-root .pelcro-radio:checked {
1288
- border-color: transparent;
1266
+ .pelcro-root [type="radio"]:checked {
1267
+ background-image: none;
1289
1268
  }
1290
1269
 
1291
1270
  .pelcro-root .pelcro-radio {
1292
- border-radius: 9999px;
1271
+ cursor: pointer;
1293
1272
  }
1294
1273
 
1295
1274
  .pelcro-root .pelcro-radio:disabled {
1296
1275
  cursor: not-allowed;
1297
1276
  }
1298
1277
 
1299
- .pelcro-root .pelcro-radio:focus {
1300
- outline: 2px solid transparent;
1301
- outline-offset: 2px;
1302
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1303
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1304
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1305
- --tw-ring-offset-width: 2px;
1306
- --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1278
+ .pelcro-root .pelcro-radio {
1279
+ border-radius: 9999px;
1280
+ border-style: none;
1281
+ }
1282
+
1283
+ .pelcro-root .pelcro-radio:checked {
1284
+ border-color: transparent;
1307
1285
  }
1308
1286
 
1309
1287
  .pelcro-root .pelcro-radio {
1288
+ background-image: none;
1310
1289
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1311
1290
  }
1312
1291
 
@@ -1315,56 +1294,69 @@ Add the correct display in Chrome and Safari.
1315
1294
  color: rgba(209, 213, 219, var(--tw-text-opacity));
1316
1295
  }
1317
1296
 
1297
+ .pelcro-root .pelcro-radio:focus {
1298
+ outline: 2px solid transparent;
1299
+ outline-offset: 2px;
1300
+ }
1301
+
1302
+ .pelcro-root .pelcro-radio {
1303
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1304
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1305
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1306
+ --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1307
+ --tw-ring-offset-width: 2px;
1308
+ }
1309
+
1318
1310
  .pelcro-root .pelcro-radio:checked::before {
1319
1311
  display: none;
1320
1312
  }
1321
1313
 
1322
1314
  .pelcro-root .pelcro-alert-error {
1323
- --tw-bg-opacity: 1;
1324
- background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
1325
- border-radius: 0.125rem;
1315
+ margin-bottom: 0.5rem;
1326
1316
  display: flex;
1317
+ width: 100%;
1327
1318
  align-items: center;
1328
1319
  justify-content: space-between;
1329
- font-weight: 600;
1330
- font-size: 0.875rem;
1331
- line-height: 1.25rem;
1332
- margin-bottom: 0.5rem;
1333
- padding-top: 0.75rem;
1334
- padding-bottom: 0.75rem;
1320
+ border-radius: 0.125rem;
1321
+ --tw-bg-opacity: 1;
1322
+ background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
1335
1323
  padding-left: 1rem;
1336
1324
  padding-right: 1rem;
1325
+ padding-top: 0.75rem;
1326
+ padding-bottom: 0.75rem;
1327
+ font-size: 0.875rem;
1328
+ line-height: 1.25rem;
1329
+ font-weight: 600;
1337
1330
  --tw-text-opacity: 1;
1338
1331
  color: rgba(139, 37, 33, var(--tw-text-opacity));
1339
- width: 100%;
1340
1332
  }
1341
1333
 
1342
1334
  .pelcro-root .pelcro-alert-success {
1343
- --tw-bg-opacity: 1;
1344
- background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
1345
- border-radius: 0.125rem;
1335
+ margin-bottom: 0.5rem;
1346
1336
  display: flex;
1337
+ width: 100%;
1347
1338
  align-items: center;
1348
1339
  justify-content: space-between;
1349
- font-weight: 600;
1350
- font-size: 0.875rem;
1351
- line-height: 1.25rem;
1352
- margin-bottom: 0.5rem;
1353
- padding-top: 0.75rem;
1354
- padding-bottom: 0.75rem;
1340
+ border-radius: 0.125rem;
1341
+ --tw-bg-opacity: 1;
1342
+ background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
1355
1343
  padding-left: 1rem;
1356
1344
  padding-right: 1rem;
1357
- --tw-text-opacity: 1;
1358
- color: rgba(6, 95, 70, var(--tw-text-opacity));
1359
- width: 100%;
1360
- }
1345
+ padding-top: 0.75rem;
1346
+ padding-bottom: 0.75rem;
1347
+ font-size: 0.875rem;
1348
+ line-height: 1.25rem;
1349
+ font-weight: 600;
1350
+ --tw-text-opacity: 1;
1351
+ color: rgba(6, 95, 70, var(--tw-text-opacity));
1352
+ }
1361
1353
 
1362
1354
  .pelcro-root .pelcro-alert-icon {
1363
- flex-shrink: 0;
1364
- height: 1.5rem;
1365
1355
  margin-right: 0.75rem;
1366
- fill: currentColor;
1356
+ height: 1.5rem;
1367
1357
  width: 1.5rem;
1358
+ flex-shrink: 0;
1359
+ fill: currentColor;
1368
1360
  }
1369
1361
 
1370
1362
  .pelcro-root .pelcro-alert-content {
@@ -1372,6 +1364,9 @@ Add the correct display in Chrome and Safari.
1372
1364
  }
1373
1365
 
1374
1366
  .pelcro-root .pelcro-alert-close {
1367
+ width: 1rem;
1368
+ flex-shrink: 0;
1369
+ border-width: 0px;
1375
1370
  background-color: transparent;
1376
1371
  }
1377
1372
 
@@ -1384,8 +1379,6 @@ Add the correct display in Chrome and Safari.
1384
1379
  }
1385
1380
 
1386
1381
  .pelcro-root .pelcro-alert-close {
1387
- border-width: 0px;
1388
- flex-shrink: 0;
1389
1382
  fill: currentColor;
1390
1383
  color: currentColor;
1391
1384
  }
@@ -1398,16 +1391,12 @@ Add the correct display in Chrome and Safari.
1398
1391
  color: currentColor;
1399
1392
  }
1400
1393
 
1401
- .pelcro-root .pelcro-alert-close {
1402
- width: 1rem;
1403
- }
1404
-
1405
1394
  .pelcro-root .pelcro-notification-error {
1406
1395
  --tw-bg-opacity: 1;
1407
1396
  background-color: rgba(180, 48, 43, var(--tw-bg-opacity));
1408
- font-weight: 600;
1409
1397
  font-size: 0.875rem;
1410
1398
  line-height: 1.25rem;
1399
+ font-weight: 600;
1411
1400
  --tw-text-opacity: 1;
1412
1401
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1413
1402
  }
@@ -1415,9 +1404,9 @@ Add the correct display in Chrome and Safari.
1415
1404
  .pelcro-root .pelcro-notification-success {
1416
1405
  --tw-bg-opacity: 1;
1417
1406
  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
1418
- font-weight: 600;
1419
1407
  font-size: 0.875rem;
1420
1408
  line-height: 1.25rem;
1409
+ font-weight: 600;
1421
1410
  --tw-text-opacity: 1;
1422
1411
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1423
1412
  }
@@ -1431,9 +1420,9 @@ Add the correct display in Chrome and Safari.
1431
1420
  .pelcro-root .pelcro-notification-confirm {
1432
1421
  --tw-bg-opacity: 1;
1433
1422
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1434
- font-weight: 600;
1435
1423
  font-size: 0.875rem;
1436
1424
  line-height: 1.25rem;
1425
+ font-weight: 600;
1437
1426
  }
1438
1427
 
1439
1428
  .pelcro-root .pelcro-notification-loading > :not([hidden]) ~ :not([hidden]) {
@@ -1443,29 +1432,29 @@ Add the correct display in Chrome and Safari.
1443
1432
  }
1444
1433
 
1445
1434
  .pelcro-root .pelcro-notification-loading {
1446
- font-weight: 600;
1447
1435
  font-size: 0.875rem;
1448
1436
  line-height: 1.25rem;
1437
+ font-weight: 600;
1449
1438
  }
1450
1439
 
1451
1440
  .pelcro-root .pelcro-notification-warning {
1452
1441
  --tw-bg-opacity: 1;
1453
1442
  background-color: rgba(245, 158, 11, var(--tw-bg-opacity));
1454
- font-weight: 600;
1455
1443
  font-size: 0.875rem;
1456
1444
  line-height: 1.25rem;
1445
+ font-weight: 600;
1457
1446
  --tw-text-opacity: 1;
1458
1447
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1459
1448
  }
1460
1449
 
1461
1450
  .pelcro-root .pelcro-notification-entitlement {
1451
+ border-top-width: 8px;
1452
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1462
1453
  --tw-bg-opacity: 1;
1463
1454
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1464
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1465
- border-top-width: 8px;
1466
- font-weight: 600;
1467
1455
  font-size: 0.875rem;
1468
1456
  line-height: 1.25rem;
1457
+ font-weight: 600;
1469
1458
  --tw-text-opacity: 1;
1470
1459
  color: rgba(75, 85, 99, var(--tw-text-opacity));
1471
1460
  }
@@ -1473,33 +1462,40 @@ Add the correct display in Chrome and Safari.
1473
1462
  .pelcro-root .pelcro-notification-warning {
1474
1463
  --tw-bg-opacity: 1;
1475
1464
  background-color: rgba(245, 158, 11, var(--tw-bg-opacity));
1476
- font-weight: 600;
1477
1465
  font-size: 0.875rem;
1478
1466
  line-height: 1.25rem;
1467
+ font-weight: 600;
1479
1468
  --tw-text-opacity: 1;
1480
1469
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1481
1470
  }
1482
1471
 
1483
1472
  .pelcro-root .pelcro-notification-entitlement {
1473
+ border-top-width: 8px;
1474
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1484
1475
  --tw-bg-opacity: 1;
1485
1476
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1486
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1487
- border-top-width: 8px;
1488
- font-weight: 600;
1489
1477
  font-size: 0.875rem;
1490
1478
  line-height: 1.25rem;
1479
+ font-weight: 600;
1491
1480
  --tw-text-opacity: 1;
1492
1481
  color: rgba(75, 85, 99, var(--tw-text-opacity));
1493
1482
  }
1494
1483
 
1495
1484
  .pelcro-root .pelcro-tooltip {
1496
- display: none;
1497
1485
  position: absolute;
1486
+ display: none;
1498
1487
  }
1499
1488
 
1500
1489
  .pelcro-root .pelcro-tooltip-container:hover .pelcro-tooltip, .pelcro-root .pelcro-tooltip:hover {
1501
- display: block;
1502
1490
  z-index: 50;
1491
+ display: block;
1492
+ }
1493
+
1494
+ .pelcro-root .pelcro-vertical-separator {
1495
+ display: inline-block;
1496
+ --tw-bg-opacity: 1;
1497
+ background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1498
+ width: 1px;
1503
1499
  }
1504
1500
 
1505
1501
  .pelcro-root .pelcro-shop-product-image {
@@ -1511,10 +1507,11 @@ Add the correct display in Chrome and Safari.
1511
1507
  }
1512
1508
 
1513
1509
  .pelcro-root input[type="range"] {
1514
- -webkit-appearance: none;
1515
- appearance: none;
1516
1510
  height: 1.75rem;
1517
1511
  width: 100%;
1512
+ -webkit-appearance: none;
1513
+ appearance: none;
1514
+ background-color: transparent;
1518
1515
  }
1519
1516
 
1520
1517
  .pelcro-root input[type="range"]:focus {
@@ -1523,32 +1520,32 @@ Add the correct display in Chrome and Safari.
1523
1520
  }
1524
1521
 
1525
1522
  .pelcro-root input[type="range"]::-webkit-slider-runnable-track {
1526
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1523
+ width: 100%;
1524
+ cursor: pointer;
1527
1525
  border-radius: 0.375rem;
1528
1526
  border-style: none;
1529
- cursor: pointer;
1527
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1530
1528
  --tw-shadow: 0 0 #0000;
1531
1529
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1532
- width: 100%;
1533
1530
  height: 0.375rem;
1534
1531
  }
1535
1532
 
1536
1533
  .pelcro-root input[type="range"]::-webkit-slider-thumb {
1534
+ margin-top: -0.5rem;
1535
+ height: 1.25rem;
1536
+ width: 1.25rem;
1537
+ cursor: pointer;
1537
1538
  -webkit-appearance: none;
1538
1539
  appearance: none;
1539
- --tw-bg-opacity: 1;
1540
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1541
- --tw-border-opacity: 1;
1542
- border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1543
1540
  border-radius: 0.75rem;
1544
- border-style: solid;
1545
1541
  border-width: 1px;
1546
- cursor: pointer;
1547
- height: 1.25rem;
1548
- margin-top: -0.5rem;
1542
+ border-style: solid;
1543
+ --tw-border-opacity: 1;
1544
+ border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1545
+ --tw-bg-opacity: 1;
1546
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1549
1547
  --tw-shadow: 0 0 #0000;
1550
1548
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1551
- width: 1.25rem;
1552
1549
  }
1553
1550
 
1554
1551
  .pelcro-root
@@ -1557,65 +1554,65 @@ Add the correct display in Chrome and Safari.
1557
1554
  }
1558
1555
 
1559
1556
  .pelcro-root input[type="range"]::-moz-range-track {
1560
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1557
+ width: 100%;
1558
+ cursor: pointer;
1561
1559
  border-radius: 0.375rem;
1562
1560
  border-style: none;
1563
- cursor: pointer;
1561
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1564
1562
  --tw-shadow: 0 0 #0000;
1565
1563
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1566
- width: 100%;
1567
1564
  height: 0.375rem;
1568
1565
  }
1569
1566
 
1570
1567
  .pelcro-root input[type="range"]::-moz-range-thumb {
1571
- --tw-bg-opacity: 1;
1572
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1573
- --tw-border-opacity: 1;
1574
- border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1568
+ margin-top: -0.5rem;
1569
+ height: 1.25rem;
1570
+ width: 1.25rem;
1571
+ cursor: pointer;
1575
1572
  border-radius: 0.75rem;
1576
- border-style: solid;
1577
1573
  border-width: 1px;
1578
- cursor: pointer;
1579
- height: 1.25rem;
1580
- margin-top: -0.5rem;
1574
+ border-style: solid;
1575
+ --tw-border-opacity: 1;
1576
+ border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1577
+ --tw-bg-opacity: 1;
1578
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1581
1579
  --tw-shadow: 0 0 #0000;
1582
1580
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1583
- width: 1.25rem;
1584
1581
  }
1585
1582
 
1586
1583
  .pelcro-root input[type="range"]::-ms-track {
1587
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1584
+ width: 100%;
1585
+ cursor: pointer;
1588
1586
  border-radius: 0.375rem;
1589
1587
  border-style: none;
1590
- cursor: pointer;
1588
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1591
1589
  --tw-shadow: 0 0 #0000;
1592
1590
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1593
- width: 100%;
1594
1591
  height: 0.375rem;
1595
1592
  }
1596
1593
 
1597
1594
  .pelcro-root input[type="range"]::-ms-fill-lower, .pelcro-root input[type="range"]::-ms-fill-upper {
1598
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1599
1595
  border-radius: 0.375rem;
1600
1596
  border-style: none;
1597
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1601
1598
  --tw-shadow: 0 0 #0000;
1602
1599
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1603
1600
  }
1604
1601
 
1605
1602
  .pelcro-root input[type="range"]::-ms-thumb {
1606
- --tw-bg-opacity: 1;
1607
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1608
- --tw-border-opacity: 1;
1609
- border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1603
+ margin-top: 1px;
1604
+ height: 1.25rem;
1605
+ width: 1.25rem;
1606
+ cursor: pointer;
1610
1607
  border-radius: 0.75rem;
1611
- border-style: solid;
1612
1608
  border-width: 1px;
1613
- cursor: pointer;
1614
- height: 1.25rem;
1615
- margin-top: 1px;
1609
+ border-style: solid;
1610
+ --tw-border-opacity: 1;
1611
+ border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1612
+ --tw-bg-opacity: 1;
1613
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1616
1614
  --tw-shadow: 0 0 #0000;
1617
1615
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1618
- width: 1.25rem;
1619
1616
  }
1620
1617
 
1621
1618
  .pelcro-root input[type="range"]:focus::-ms-fill-lower, .pelcro-root input[type="range"]:focus::-ms-fill-upper {
@@ -1627,7 +1624,6 @@ Add the correct display in Chrome and Safari.
1627
1624
  }
1628
1625
 
1629
1626
  .pelcro-root .accordion-header:hover .accordion-chevron {
1630
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
1631
1627
  --tw-translate-x: 0;
1632
1628
  --tw-translate-y: 0;
1633
1629
  --tw-rotate: 0;
@@ -1637,18 +1633,216 @@ Add the correct display in Chrome and Safari.
1637
1633
  --tw-scale-y: 1;
1638
1634
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1639
1635
  --tw-translate-x: 0.25rem;
1636
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
1637
+ }
1638
+
1639
+ .pelcro-root .pelcro-product {
1640
+ display: flex !important;
1640
1641
  }
1641
1642
 
1642
1643
  .pelcro-root .pelcro-select-plan-radio {
1643
1644
  margin-top: 0.4rem;
1644
1645
  }
1645
1646
 
1647
+ .pelcro-root .pelcro-product:before {
1648
+ content: "";
1649
+ position: absolute;
1650
+ top: 0px;
1651
+ left: 0px;
1652
+ height: 0.25rem;
1653
+ width: 100%;
1654
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1655
+ }
1656
+
1657
+ /* Firefox */
1658
+
1659
+ .pelcro-root .productTabs .tabs {
1660
+ padding-bottom: 5px;
1661
+ scrollbar-width: thin;
1662
+ scrollbar-color: grey;
1663
+ }
1664
+
1665
+ /* Chrome, Edge, and Safari */
1666
+
1667
+ .pelcro-root .productTabs .tabs::-webkit-scrollbar {
1668
+ width: 15px;
1669
+ height: 5px;
1670
+ }
1671
+
1672
+ .pelcro-root .productTabs .tabs::-webkit-scrollbar-track {
1673
+ background: lightGrey;
1674
+ border-radius: 5px;
1675
+ }
1676
+
1677
+ .pelcro-root .productTabs .tabs::-webkit-scrollbar-thumb {
1678
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1679
+ border-radius: 14px;
1680
+ }
1681
+
1682
+ .pelcro-root .productTabs .tabs li:first-child {
1683
+ margin-left: auto;
1684
+ }
1685
+
1686
+ .pelcro-root .productTabs .tabs li:last-child {
1687
+ margin-right: auto;
1688
+ }
1689
+
1690
+ .pelcro-root .productTabs .tabs li#activeTab button {
1691
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1692
+ }
1693
+
1694
+ .pelcro-root .productTabs .tabs li#activeTab:after {
1695
+ content: "";
1696
+ position: absolute;
1697
+ bottom: 0px;
1698
+ left: 0px;
1699
+ display: block;
1700
+ height: 0.25rem;
1701
+ width: 100%;
1702
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1703
+ }
1704
+
1705
+ .pelcro-root .selectedProduct img {
1706
+ max-width: 150px;
1707
+ height: auto;
1708
+ }
1709
+
1646
1710
  .pelcro-user-profile-picture:hover {
1647
1711
  filter: brightness(0.8);
1648
1712
  }
1649
1713
 
1650
1714
  /* used by multiple input sub-components */
1651
1715
 
1716
+ /* Slider */
1717
+
1718
+ .pelcro-root .slick-slider {
1719
+ position: relative;
1720
+ display: block;
1721
+ box-sizing: border-box;
1722
+ -webkit-user-select: none;
1723
+ user-select: none;
1724
+ touch-action: pan-y;
1725
+ }
1726
+
1727
+ .pelcro-root .slick-list {
1728
+ position: relative;
1729
+ display: block;
1730
+ overflow: hidden;
1731
+ padding: 0;
1732
+ margin: 0 -10px;
1733
+ }
1734
+
1735
+ .pelcro-root .slick-list:focus {
1736
+ outline: none;
1737
+ }
1738
+
1739
+ .pelcro-root .slick-list.dragging {
1740
+ cursor: pointer;
1741
+ }
1742
+
1743
+ .pelcro-root .slick-slider .slick-track,
1744
+ .pelcro-root .slick-slider .slick-list {
1745
+ transform: translate3d(0, 0, 0);
1746
+ }
1747
+
1748
+ .pelcro-root .slick-track {
1749
+ position: relative;
1750
+ top: 0;
1751
+ left: 0;
1752
+ display: flex;
1753
+ align-items: stretch;
1754
+ }
1755
+
1756
+ .pelcro-root .slick-track:before,
1757
+ .pelcro-root .slick-track:after {
1758
+ display: table;
1759
+ content: "";
1760
+ }
1761
+
1762
+ .pelcro-root .slick-track:after {
1763
+ clear: both;
1764
+ }
1765
+
1766
+ .pelcro-root .slick-loading .slick-track {
1767
+ visibility: hidden;
1768
+ }
1769
+
1770
+ .pelcro-root .slick-slide {
1771
+ display: flex;
1772
+ align-self: stretch;
1773
+ height: unset;
1774
+ margin: 0 10px;
1775
+ }
1776
+
1777
+ .pelcro-root .slick-slide > div {
1778
+ display: flex;
1779
+ align-self: stretch;
1780
+ width: 100%;
1781
+ height: 100%;
1782
+ }
1783
+
1784
+ .pelcro-root .slick-slide img {
1785
+ display: block;
1786
+ }
1787
+
1788
+ .pelcro-root .slick-slide.slick-loading img {
1789
+ display: none;
1790
+ }
1791
+
1792
+ .pelcro-root .slick-slide.dragging img {
1793
+ pointer-events: none;
1794
+ }
1795
+
1796
+ .pelcro-root .slick-initialized .slick-slide {
1797
+ display: block;
1798
+ }
1799
+
1800
+ .pelcro-root .slick-loading .slick-slide {
1801
+ visibility: hidden;
1802
+ }
1803
+
1804
+ .pelcro-root .slick-vertical .slick-slide {
1805
+ display: block;
1806
+ height: auto;
1807
+ border: 1px solid transparent;
1808
+ }
1809
+
1810
+ .pelcro-root .slick-arrow.slick-hidden {
1811
+ display: none;
1812
+ }
1813
+
1814
+ .pelcro-root .slick-disabled {
1815
+ opacity: 0.5;
1816
+ cursor: not-allowed;
1817
+ }
1818
+
1819
+ .pelcro-root .slick-dots {
1820
+ margin-top: 20px;
1821
+ display: flex !important;
1822
+ align-items: center;
1823
+ justify-content: center;
1824
+ }
1825
+
1826
+ .pelcro-root .slick-dots li {
1827
+ padding: 2px;
1828
+ border: solid 1px transparent;
1829
+ border-radius: 9999999px;
1830
+ width: 20px;
1831
+ height: 20px;
1832
+ display: flex;
1833
+ align-items: center;
1834
+ justify-content: center;
1835
+ line-height: 1;
1836
+ }
1837
+
1838
+ .pelcro-root .slick-dots li.slick-active {
1839
+ border-color: grey;
1840
+ }
1841
+
1842
+ .pelcro-root .slick-arrow {
1843
+ outline: none !important;
1844
+ }
1845
+
1652
1846
  /*
1653
1847
  styling is copied from react-easy-crop/react-easy-crop.css
1654
1848
  in order to scope selectors under pelcro-root
@@ -1725,289 +1919,262 @@ in order to scope selectors under pelcro-root
1725
1919
 
1726
1920
  /* utilities */
1727
1921
 
1728
- .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]) {
1729
- --tw-space-y-reverse: 0;
1730
- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
1731
- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
1922
+ .pelcro-root .plc-pointer-events-none {
1923
+ pointer-events: none;
1732
1924
  }
1733
1925
 
1734
- .pelcro-root .plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
1735
- --tw-space-x-reverse: 0;
1736
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1737
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
1926
+ .pelcro-root .plc-fixed {
1927
+ position: fixed;
1738
1928
  }
1739
1929
 
1740
- .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]) {
1741
- --tw-space-x-reverse: 0;
1742
- margin-right: calc(0.75rem * var(--tw-space-x-reverse));
1743
- margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
1930
+ .pelcro-root .plc-absolute {
1931
+ position: absolute;
1744
1932
  }
1745
1933
 
1746
- .pelcro-root .plc-space-y-4 > :not([hidden]) ~ :not([hidden]) {
1747
- --tw-space-y-reverse: 0;
1748
- margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
1749
- margin-bottom: calc(1rem * var(--tw-space-y-reverse));
1934
+ .pelcro-root .plc-relative {
1935
+ position: relative;
1750
1936
  }
1751
1937
 
1752
- .pelcro-root .plc-appearance-none {
1753
- -webkit-appearance: none;
1754
- appearance: none;
1938
+ .pelcro-root .plc-inset-0 {
1939
+ top: 0px;
1940
+ right: 0px;
1941
+ bottom: 0px;
1942
+ left: 0px;
1755
1943
  }
1756
1944
 
1757
- .pelcro-root .plc-bg-transparent {
1758
- background-color: transparent;
1945
+ .pelcro-root .plc-inset-y-0 {
1946
+ top: 0px;
1947
+ bottom: 0px;
1759
1948
  }
1760
1949
 
1761
- .pelcro-root .plc-bg-primary-400 {
1762
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
1950
+ .pelcro-root .plc-top-0 {
1951
+ top: 0px;
1763
1952
  }
1764
1953
 
1765
- .pelcro-root .plc-bg-primary-500 {
1766
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1954
+ .pelcro-root .plc-top-1 {
1955
+ top: 0.25rem;
1767
1956
  }
1768
1957
 
1769
- .pelcro-root .plc-bg-primary-700 {
1770
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
1958
+ .pelcro-root .plc-top-5 {
1959
+ top: 1.25rem;
1771
1960
  }
1772
1961
 
1773
- .pelcro-root .plc-bg-white {
1774
- --tw-bg-opacity: 1;
1775
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1962
+ .pelcro-root .plc-top-7 {
1963
+ top: 1.75rem;
1776
1964
  }
1777
1965
 
1778
- .pelcro-root .plc-bg-gray-50 {
1779
- --tw-bg-opacity: 1;
1780
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
1966
+ .pelcro-root .plc-top-24 {
1967
+ top: 6rem;
1781
1968
  }
1782
1969
 
1783
- .pelcro-root .plc-bg-gray-100 {
1784
- --tw-bg-opacity: 1;
1785
- background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
1970
+ .pelcro-root .plc-top-1\.5 {
1971
+ top: 0.375rem;
1786
1972
  }
1787
1973
 
1788
- .pelcro-root .plc-bg-gray-200 {
1789
- --tw-bg-opacity: 1;
1790
- background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1974
+ .pelcro-root .plc-top-1\/2 {
1975
+ top: 50%;
1791
1976
  }
1792
1977
 
1793
- .pelcro-root .plc-bg-gray-300 {
1794
- --tw-bg-opacity: 1;
1795
- background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
1978
+ .pelcro-root .plc-right-0 {
1979
+ right: 0px;
1796
1980
  }
1797
1981
 
1798
- .pelcro-root .plc-bg-gray-500 {
1799
- --tw-bg-opacity: 1;
1800
- background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
1982
+ .pelcro-root .plc-right-1 {
1983
+ right: 0.25rem;
1801
1984
  }
1802
1985
 
1803
- .pelcro-root .plc-bg-gray-600 {
1804
- --tw-bg-opacity: 1;
1805
- background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
1986
+ .pelcro-root .plc-right-2 {
1987
+ right: 0.5rem;
1806
1988
  }
1807
1989
 
1808
- .pelcro-root .plc-bg-gray-800 {
1809
- --tw-bg-opacity: 1;
1810
- background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
1990
+ .pelcro-root .plc-right-4 {
1991
+ right: 1rem;
1811
1992
  }
1812
1993
 
1813
- .pelcro-root .plc-bg-red-100 {
1814
- --tw-bg-opacity: 1;
1815
- background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
1994
+ .pelcro-root .plc-right-10 {
1995
+ right: 2.5rem;
1816
1996
  }
1817
1997
 
1818
- .pelcro-root .plc-bg-red-500 {
1819
- --tw-bg-opacity: 1;
1820
- background-color: rgba(180, 48, 43, var(--tw-bg-opacity));
1998
+ .pelcro-root .plc--right-16 {
1999
+ right: -4rem;
1821
2000
  }
1822
2001
 
1823
- .pelcro-root .plc-bg-yellow-100 {
1824
- --tw-bg-opacity: 1;
1825
- background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
2002
+ .pelcro-root .plc-bottom-0 {
2003
+ bottom: 0px;
1826
2004
  }
1827
2005
 
1828
- .pelcro-root .plc-bg-green-50 {
1829
- --tw-bg-opacity: 1;
1830
- background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
2006
+ .pelcro-root .plc-bottom-4 {
2007
+ bottom: 1rem;
1831
2008
  }
1832
2009
 
1833
- .pelcro-root .plc-bg-green-100 {
1834
- --tw-bg-opacity: 1;
1835
- background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
2010
+ .pelcro-root .plc-left-0 {
2011
+ left: 0px;
1836
2012
  }
1837
2013
 
1838
- .pelcro-root .plc-bg-blue-100 {
1839
- --tw-bg-opacity: 1;
1840
- background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
2014
+ .pelcro-root .plc-left-5 {
2015
+ left: 1.25rem;
1841
2016
  }
1842
2017
 
1843
- .pelcro-root .plc-bg-orange-100 {
1844
- --tw-bg-opacity: 1;
1845
- background-color: rgba(255, 237, 213, var(--tw-bg-opacity));
2018
+ .pelcro-root .plc--left-16 {
2019
+ left: -4rem;
1846
2020
  }
1847
2021
 
1848
- .pelcro-root .hover\:plc-bg-transparent:hover {
1849
- background-color: transparent;
2022
+ .pelcro-root .plc-z-max {
2023
+ z-index: 999999;
1850
2024
  }
1851
2025
 
1852
- .pelcro-root .hover\:plc-bg-primary-600:hover {
1853
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2026
+ .pelcro-root .plc-order-1 {
2027
+ order: 1;
1854
2028
  }
1855
2029
 
1856
- .pelcro-root .hover\:plc-bg-white:hover {
1857
- --tw-bg-opacity: 1;
1858
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2030
+ .pelcro-root .plc-order-2 {
2031
+ order: 2;
1859
2032
  }
1860
2033
 
1861
- .pelcro-root .hover\:plc-bg-gray-50:hover {
1862
- --tw-bg-opacity: 1;
1863
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2034
+ .pelcro-root .plc-m-0 {
2035
+ margin: 0px;
1864
2036
  }
1865
2037
 
1866
- .pelcro-root .hover\:plc-bg-gray-100:hover {
1867
- --tw-bg-opacity: 1;
1868
- background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2038
+ .pelcro-root .plc-m-3 {
2039
+ margin: 0.75rem;
1869
2040
  }
1870
2041
 
1871
- .pelcro-root .hover\:plc-bg-gray-200:hover {
1872
- --tw-bg-opacity: 1;
1873
- background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
2042
+ .pelcro-root .plc-m-auto {
2043
+ margin: auto;
1874
2044
  }
1875
2045
 
1876
- .pelcro-root .hover\:plc-bg-gray-600:hover {
1877
- --tw-bg-opacity: 1;
1878
- background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2046
+ .pelcro-root .plc-mx-4 {
2047
+ margin-left: 1rem;
2048
+ margin-right: 1rem;
1879
2049
  }
1880
2050
 
1881
- .pelcro-root .hover\:plc-bg-gray-900:hover {
1882
- --tw-bg-opacity: 1;
1883
- background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
2051
+ .pelcro-root .plc-mx-auto {
2052
+ margin-left: auto;
2053
+ margin-right: auto;
1884
2054
  }
1885
2055
 
1886
- .pelcro-root .hover\:plc-bg-red-600:hover {
1887
- --tw-bg-opacity: 1;
1888
- background-color: rgba(139, 37, 33, var(--tw-bg-opacity));
2056
+ .pelcro-root .plc-my-2 {
2057
+ margin-top: 0.5rem;
2058
+ margin-bottom: 0.5rem;
1889
2059
  }
1890
2060
 
1891
- .pelcro-root .focus\:plc-bg-transparent:focus {
1892
- background-color: transparent;
2061
+ .pelcro-root .plc-my-4 {
2062
+ margin-top: 1rem;
2063
+ margin-bottom: 1rem;
1893
2064
  }
1894
2065
 
1895
- .pelcro-root .focus\:plc-bg-primary-600:focus {
1896
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2066
+ .pelcro-root .plc-my-5 {
2067
+ margin-top: 1.25rem;
2068
+ margin-bottom: 1.25rem;
1897
2069
  }
1898
2070
 
1899
- .pelcro-root .disabled\:plc-bg-gray-400:disabled {
1900
- --tw-bg-opacity: 1;
1901
- background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
2071
+ .pelcro-root .plc-my-20 {
2072
+ margin-top: 5rem;
2073
+ margin-bottom: 5rem;
1902
2074
  }
1903
2075
 
1904
- .pelcro-root .plc-border-transparent {
1905
- border-color: transparent;
2076
+ .pelcro-root .plc-mt-1 {
2077
+ margin-top: 0.25rem;
1906
2078
  }
1907
2079
 
1908
- .pelcro-root .plc-border-primary-300 {
1909
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
2080
+ .pelcro-root .plc-mt-2 {
2081
+ margin-top: 0.5rem;
1910
2082
  }
1911
2083
 
1912
- .pelcro-root .plc-border-primary-400 {
1913
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2084
+ .pelcro-root .plc-mt-3 {
2085
+ margin-top: 0.75rem;
1914
2086
  }
1915
2087
 
1916
- .pelcro-root .plc-border-primary-500 {
1917
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2088
+ .pelcro-root .plc-mt-4 {
2089
+ margin-top: 1rem;
1918
2090
  }
1919
2091
 
1920
- .pelcro-root .plc-border-white {
1921
- --tw-border-opacity: 1;
1922
- border-color: rgba(255, 255, 255, var(--tw-border-opacity));
2092
+ .pelcro-root .plc-mt-5 {
2093
+ margin-top: 1.25rem;
1923
2094
  }
1924
2095
 
1925
- .pelcro-root .plc-border-gray-200 {
1926
- --tw-border-opacity: 1;
1927
- border-color: rgba(229, 231, 235, var(--tw-border-opacity));
2096
+ .pelcro-root .plc-mt-6 {
2097
+ margin-top: 1.5rem;
1928
2098
  }
1929
2099
 
1930
- .pelcro-root .plc-border-gray-300 {
1931
- --tw-border-opacity: 1;
1932
- border-color: rgba(209, 213, 219, var(--tw-border-opacity));
2100
+ .pelcro-root .plc-mt-8 {
2101
+ margin-top: 2rem;
1933
2102
  }
1934
2103
 
1935
- .pelcro-root .plc-border-gray-400 {
1936
- --tw-border-opacity: 1;
1937
- border-color: rgba(156, 163, 175, var(--tw-border-opacity));
2104
+ .pelcro-root .plc-mt-auto {
2105
+ margin-top: auto;
1938
2106
  }
1939
2107
 
1940
- .pelcro-root .plc-border-green-400 {
1941
- --tw-border-opacity: 1;
1942
- border-color: rgba(52, 211, 153, var(--tw-border-opacity));
2108
+ .pelcro-root .plc--mt-8 {
2109
+ margin-top: -2rem;
1943
2110
  }
1944
2111
 
1945
- .pelcro-root .plc-rounded-none {
1946
- border-radius: 0px;
2112
+ .pelcro-root .plc-mr-1 {
2113
+ margin-right: 0.25rem;
1947
2114
  }
1948
2115
 
1949
- .pelcro-root .plc-rounded-sm {
1950
- border-radius: 0.125rem;
2116
+ .pelcro-root .plc-mr-2 {
2117
+ margin-right: 0.5rem;
1951
2118
  }
1952
2119
 
1953
- .pelcro-root .plc-rounded {
1954
- border-radius: 0.25rem;
2120
+ .pelcro-root .plc-mr-6 {
2121
+ margin-right: 1.5rem;
1955
2122
  }
1956
2123
 
1957
- .pelcro-root .plc-rounded-md {
1958
- border-radius: 0.375rem;
2124
+ .pelcro-root .plc-mb-1 {
2125
+ margin-bottom: 0.25rem;
1959
2126
  }
1960
2127
 
1961
- .pelcro-root .plc-rounded-lg {
1962
- border-radius: 0.5rem;
2128
+ .pelcro-root .plc-mb-2 {
2129
+ margin-bottom: 0.5rem;
1963
2130
  }
1964
2131
 
1965
- .pelcro-root .plc-rounded-3xl {
1966
- border-radius: 1.5rem;
2132
+ .pelcro-root .plc-mb-3 {
2133
+ margin-bottom: 0.75rem;
1967
2134
  }
1968
2135
 
1969
- .pelcro-root .plc-rounded-full {
1970
- border-radius: 9999px;
2136
+ .pelcro-root .plc-mb-4 {
2137
+ margin-bottom: 1rem;
1971
2138
  }
1972
2139
 
1973
- .pelcro-root .plc-border-solid {
1974
- border-style: solid;
2140
+ .pelcro-root .plc-mb-6 {
2141
+ margin-bottom: 1.5rem;
1975
2142
  }
1976
2143
 
1977
- .pelcro-root .plc-border-0 {
1978
- border-width: 0px;
2144
+ .pelcro-root .plc-mb-8 {
2145
+ margin-bottom: 2rem;
1979
2146
  }
1980
2147
 
1981
- .pelcro-root .plc-border-2 {
1982
- border-width: 2px;
2148
+ .pelcro-root .plc-mb-9 {
2149
+ margin-bottom: 2.25rem;
1983
2150
  }
1984
2151
 
1985
- .pelcro-root .plc-border {
1986
- border-width: 1px;
2152
+ .pelcro-root .plc-ml-0 {
2153
+ margin-left: 0px;
1987
2154
  }
1988
2155
 
1989
- .pelcro-root .plc-border-l-2 {
1990
- border-left-width: 2px;
2156
+ .pelcro-root .plc-ml-1 {
2157
+ margin-left: 0.25rem;
1991
2158
  }
1992
2159
 
1993
- .pelcro-root .plc-border-t-4 {
1994
- border-top-width: 4px;
2160
+ .pelcro-root .plc-ml-2 {
2161
+ margin-left: 0.5rem;
1995
2162
  }
1996
2163
 
1997
- .pelcro-root .plc-border-t-8 {
1998
- border-top-width: 8px;
2164
+ .pelcro-root .plc-ml-3 {
2165
+ margin-left: 0.75rem;
1999
2166
  }
2000
2167
 
2001
- .pelcro-root .plc-border-t {
2002
- border-top-width: 1px;
2168
+ .pelcro-root .plc-ml-4 {
2169
+ margin-left: 1rem;
2003
2170
  }
2004
2171
 
2005
- .pelcro-root .plc-cursor-default {
2006
- cursor: default;
2172
+ .pelcro-root .plc--ml-2 {
2173
+ margin-left: -0.5rem;
2007
2174
  }
2008
2175
 
2009
- .pelcro-root .plc-cursor-pointer {
2010
- cursor: pointer;
2176
+ .pelcro-root .last\:plc-mb-0:last-child {
2177
+ margin-bottom: 0px;
2011
2178
  }
2012
2179
 
2013
2180
  .pelcro-root .plc-block {
@@ -2034,88 +2201,12 @@ in order to scope selectors under pelcro-root
2034
2201
  display: none;
2035
2202
  }
2036
2203
 
2037
- .pelcro-root .plc-flex-row-reverse {
2038
- flex-direction: row-reverse;
2204
+ .pelcro-root .plc-h-3 {
2205
+ height: 0.75rem;
2039
2206
  }
2040
2207
 
2041
- .pelcro-root .plc-flex-col {
2042
- flex-direction: column;
2043
- }
2044
-
2045
- .pelcro-root .plc-flex-wrap {
2046
- flex-wrap: wrap;
2047
- }
2048
-
2049
- .pelcro-root .plc-place-items-center {
2050
- place-items: center;
2051
- }
2052
-
2053
- .pelcro-root .plc-items-start {
2054
- align-items: flex-start;
2055
- }
2056
-
2057
- .pelcro-root .plc-items-end {
2058
- align-items: flex-end;
2059
- }
2060
-
2061
- .pelcro-root .plc-items-center {
2062
- align-items: center;
2063
- }
2064
-
2065
- .pelcro-root .plc-self-start {
2066
- align-self: flex-start;
2067
- }
2068
-
2069
- .pelcro-root .plc-justify-items-center {
2070
- justify-items: center;
2071
- }
2072
-
2073
- .pelcro-root .plc-justify-start {
2074
- justify-content: flex-start;
2075
- }
2076
-
2077
- .pelcro-root .plc-justify-end {
2078
- justify-content: flex-end;
2079
- }
2080
-
2081
- .pelcro-root .plc-justify-center {
2082
- justify-content: center;
2083
- }
2084
-
2085
- .pelcro-root .plc-justify-between {
2086
- justify-content: space-between;
2087
- }
2088
-
2089
- .pelcro-root .plc-justify-evenly {
2090
- justify-content: space-evenly;
2091
- }
2092
-
2093
- .pelcro-root .plc-flex-grow {
2094
- flex-grow: 1;
2095
- }
2096
-
2097
- .pelcro-root .plc-flex-shrink-0 {
2098
- flex-shrink: 0;
2099
- }
2100
-
2101
- .pelcro-root .plc-font-thin {
2102
- font-weight: 100;
2103
- }
2104
-
2105
- .pelcro-root .plc-font-normal {
2106
- font-weight: 400;
2107
- }
2108
-
2109
- .pelcro-root .plc-font-semibold {
2110
- font-weight: 600;
2111
- }
2112
-
2113
- .pelcro-root .plc-font-bold {
2114
- font-weight: 700;
2115
- }
2116
-
2117
- .pelcro-root .plc-h-4 {
2118
- height: 1rem;
2208
+ .pelcro-root .plc-h-4 {
2209
+ height: 1rem;
2119
2210
  }
2120
2211
 
2121
2212
  .pelcro-root .plc-h-5 {
@@ -2142,20 +2233,20 @@ in order to scope selectors under pelcro-root
2142
2233
  height: 2.5rem;
2143
2234
  }
2144
2235
 
2145
- .pelcro-root .plc-h-12 {
2146
- height: 3rem;
2236
+ .pelcro-root .plc-h-11 {
2237
+ height: 2.75rem;
2147
2238
  }
2148
2239
 
2149
- .pelcro-root .plc-h-14 {
2150
- height: 3.5rem;
2240
+ .pelcro-root .plc-h-12 {
2241
+ height: 3rem;
2151
2242
  }
2152
2243
 
2153
2244
  .pelcro-root .plc-h-20 {
2154
2245
  height: 5rem;
2155
2246
  }
2156
2247
 
2157
- .pelcro-root .plc-h-24 {
2158
- height: 6rem;
2248
+ .pelcro-root .plc-h-28 {
2249
+ height: 7rem;
2159
2250
  }
2160
2251
 
2161
2252
  .pelcro-root .plc-h-32 {
@@ -2178,500 +2269,924 @@ in order to scope selectors under pelcro-root
2178
2269
  height: 100%;
2179
2270
  }
2180
2271
 
2181
- .pelcro-root .plc-text-xs {
2182
- font-size: 0.75rem;
2183
- line-height: 1rem;
2272
+ .pelcro-root .plc-max-h-0 {
2273
+ max-height: 0px;
2184
2274
  }
2185
2275
 
2186
- .pelcro-root .plc-text-sm {
2187
- font-size: 0.875rem;
2188
- line-height: 1.25rem;
2276
+ .pelcro-root .plc-max-h-14 {
2277
+ max-height: 3.5rem;
2189
2278
  }
2190
2279
 
2191
- .pelcro-root .plc-text-base {
2192
- font-size: 1rem;
2193
- line-height: 1.5rem;
2280
+ .pelcro-root .plc-max-h-80 {
2281
+ max-height: 20rem;
2194
2282
  }
2195
2283
 
2196
- .pelcro-root .plc-text-lg {
2197
- font-size: 1.125rem;
2198
- line-height: 1.75rem;
2284
+ .pelcro-root .plc-max-h-full {
2285
+ max-height: 100%;
2199
2286
  }
2200
2287
 
2201
- .pelcro-root .plc-text-xl {
2202
- font-size: 1.25rem;
2203
- line-height: 1.75rem;
2288
+ .pelcro-root .plc-min-h-12 {
2289
+ min-height: 3rem;
2204
2290
  }
2205
2291
 
2206
- .pelcro-root .plc-text-2xl {
2207
- font-size: 1.5rem;
2208
- line-height: 2rem;
2292
+ .pelcro-root .plc-w-3 {
2293
+ width: 0.75rem;
2209
2294
  }
2210
2295
 
2211
- .pelcro-root .plc-text-3xl {
2212
- font-size: 1.875rem;
2213
- line-height: 2.25rem;
2296
+ .pelcro-root .plc-w-4 {
2297
+ width: 1rem;
2214
2298
  }
2215
2299
 
2216
- .pelcro-root .plc-m-0 {
2217
- margin: 0px;
2300
+ .pelcro-root .plc-w-5 {
2301
+ width: 1.25rem;
2218
2302
  }
2219
2303
 
2220
- .pelcro-root .plc-m-3 {
2221
- margin: 0.75rem;
2304
+ .pelcro-root .plc-w-6 {
2305
+ width: 1.5rem;
2222
2306
  }
2223
2307
 
2224
- .pelcro-root .plc-my-2 {
2225
- margin-top: 0.5rem;
2226
- margin-bottom: 0.5rem;
2308
+ .pelcro-root .plc-w-7 {
2309
+ width: 1.75rem;
2227
2310
  }
2228
2311
 
2229
- .pelcro-root .plc-mx-3 {
2230
- margin-left: 0.75rem;
2231
- margin-right: 0.75rem;
2312
+ .pelcro-root .plc-w-8 {
2313
+ width: 2rem;
2232
2314
  }
2233
2315
 
2234
- .pelcro-root .plc-my-4 {
2235
- margin-top: 1rem;
2236
- margin-bottom: 1rem;
2316
+ .pelcro-root .plc-w-9 {
2317
+ width: 2.25rem;
2237
2318
  }
2238
2319
 
2239
- .pelcro-root .plc-mx-auto {
2240
- margin-left: auto;
2241
- margin-right: auto;
2320
+ .pelcro-root .plc-w-10 {
2321
+ width: 2.5rem;
2242
2322
  }
2243
2323
 
2244
- .pelcro-root .plc-mt-1 {
2245
- margin-top: 0.25rem;
2324
+ .pelcro-root .plc-w-11 {
2325
+ width: 2.75rem;
2246
2326
  }
2247
2327
 
2248
- .pelcro-root .plc-mr-1 {
2249
- margin-right: 0.25rem;
2328
+ .pelcro-root .plc-w-12 {
2329
+ width: 3rem;
2250
2330
  }
2251
2331
 
2252
- .pelcro-root .plc-mb-1 {
2253
- margin-bottom: 0.25rem;
2332
+ .pelcro-root .plc-w-16 {
2333
+ width: 4rem;
2254
2334
  }
2255
2335
 
2256
- .pelcro-root .plc-ml-1 {
2257
- margin-left: 0.25rem;
2336
+ .pelcro-root .plc-w-20 {
2337
+ width: 5rem;
2258
2338
  }
2259
2339
 
2260
- .pelcro-root .plc-mt-2 {
2261
- margin-top: 0.5rem;
2340
+ .pelcro-root .plc-w-24 {
2341
+ width: 6rem;
2262
2342
  }
2263
2343
 
2264
- .pelcro-root .plc-mr-2 {
2265
- margin-right: 0.5rem;
2344
+ .pelcro-root .plc-w-32 {
2345
+ width: 8rem;
2266
2346
  }
2267
2347
 
2268
- .pelcro-root .plc-mb-2 {
2269
- margin-bottom: 0.5rem;
2348
+ .pelcro-root .plc-w-36 {
2349
+ width: 9rem;
2270
2350
  }
2271
2351
 
2272
- .pelcro-root .plc-ml-2 {
2273
- margin-left: 0.5rem;
2352
+ .pelcro-root .plc-w-56 {
2353
+ width: 14rem;
2274
2354
  }
2275
2355
 
2276
- .pelcro-root .plc-mt-3 {
2277
- margin-top: 0.75rem;
2356
+ .pelcro-root .plc-w-auto {
2357
+ width: auto;
2278
2358
  }
2279
2359
 
2280
- .pelcro-root .plc-mb-3 {
2281
- margin-bottom: 0.75rem;
2360
+ .pelcro-root .plc-w-1\/2 {
2361
+ width: 50%;
2282
2362
  }
2283
2363
 
2284
- .pelcro-root .plc-ml-3 {
2285
- margin-left: 0.75rem;
2364
+ .pelcro-root .plc-w-1\/4 {
2365
+ width: 25%;
2286
2366
  }
2287
2367
 
2288
- .pelcro-root .plc-mt-4 {
2289
- margin-top: 1rem;
2368
+ .pelcro-root .plc-w-1\/5 {
2369
+ width: 20%;
2290
2370
  }
2291
2371
 
2292
- .pelcro-root .plc-mb-4 {
2293
- margin-bottom: 1rem;
2372
+ .pelcro-root .plc-w-2\/5 {
2373
+ width: 40%;
2294
2374
  }
2295
2375
 
2296
- .pelcro-root .plc-ml-4 {
2297
- margin-left: 1rem;
2376
+ .pelcro-root .plc-w-2\/12 {
2377
+ width: 16.666667%;
2298
2378
  }
2299
2379
 
2300
- .pelcro-root .plc-mt-5 {
2301
- margin-top: 1.25rem;
2380
+ .pelcro-root .plc-w-3\/12 {
2381
+ width: 25%;
2302
2382
  }
2303
2383
 
2304
- .pelcro-root .plc-mt-6 {
2305
- margin-top: 1.5rem;
2384
+ .pelcro-root .plc-w-4\/12 {
2385
+ width: 33.333333%;
2306
2386
  }
2307
2387
 
2308
- .pelcro-root .plc-mb-6 {
2309
- margin-bottom: 1.5rem;
2388
+ .pelcro-root .plc-w-5\/12 {
2389
+ width: 41.666667%;
2310
2390
  }
2311
2391
 
2312
- .pelcro-root .plc-mt-auto {
2313
- margin-top: auto;
2392
+ .pelcro-root .plc-w-6\/12 {
2393
+ width: 50%;
2314
2394
  }
2315
2395
 
2316
- .pelcro-root .plc-ml-auto {
2317
- margin-left: auto;
2396
+ .pelcro-root .plc-w-10\/12 {
2397
+ width: 83.333333%;
2318
2398
  }
2319
2399
 
2320
- .pelcro-root .plc--ml-2 {
2321
- margin-left: -0.5rem;
2400
+ .pelcro-root .plc-w-full {
2401
+ width: 100%;
2322
2402
  }
2323
2403
 
2324
- .pelcro-root .plc--mt-8 {
2325
- margin-top: -2rem;
2404
+ .pelcro-root .plc-w-max {
2405
+ width: max-content;
2326
2406
  }
2327
2407
 
2328
- .pelcro-root .plc-max-h-0 {
2329
- max-height: 0px;
2408
+ .pelcro-root .plc-max-w-50\% {
2409
+ max-width: 50%;
2330
2410
  }
2331
2411
 
2332
- .pelcro-root .plc-max-h-14 {
2333
- max-height: 3.5rem;
2412
+ .pelcro-root .plc-max-w-80\% {
2413
+ max-width: 80%;
2334
2414
  }
2335
2415
 
2336
- .pelcro-root .plc-max-h-72 {
2337
- max-height: 18rem;
2416
+ .pelcro-root .plc-max-w-full {
2417
+ max-width: 100%;
2338
2418
  }
2339
2419
 
2340
- .pelcro-root .plc-max-h-80 {
2341
- max-height: 20rem;
2420
+ .pelcro-root .plc-flex-1 {
2421
+ flex: 1 1 0%;
2342
2422
  }
2343
2423
 
2344
- .pelcro-root .plc-max-w-xs {
2345
- max-width: 20rem;
2424
+ .pelcro-root .plc-flex-shrink-0 {
2425
+ flex-shrink: 0;
2346
2426
  }
2347
2427
 
2348
- .pelcro-root .plc-max-w-xl {
2349
- max-width: 36rem;
2428
+ .pelcro-root .plc-flex-grow {
2429
+ flex-grow: 1;
2350
2430
  }
2351
2431
 
2352
- .pelcro-root .plc-min-h-12 {
2353
- min-height: 3rem;
2432
+ .pelcro-root .plc-table-fixed {
2433
+ table-layout: fixed;
2354
2434
  }
2355
2435
 
2356
- .pelcro-root .plc-min-h-40 {
2357
- min-height: 10rem;
2436
+ .pelcro-root .plc-origin-right {
2437
+ transform-origin: right;
2358
2438
  }
2359
2439
 
2360
- .pelcro-root .plc-object-contain {
2361
- object-fit: contain;
2440
+ .pelcro-root .plc-transform {
2441
+ --tw-translate-x: 0;
2442
+ --tw-translate-y: 0;
2443
+ --tw-rotate: 0;
2444
+ --tw-skew-x: 0;
2445
+ --tw-skew-y: 0;
2446
+ --tw-scale-x: 1;
2447
+ --tw-scale-y: 1;
2448
+ transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2362
2449
  }
2363
2450
 
2364
- .pelcro-root .plc-outline-none {
2365
- outline: 2px solid transparent;
2366
- outline-offset: 2px;
2451
+ .pelcro-root .plc-translate-x-0 {
2452
+ --tw-translate-x: 0px;
2367
2453
  }
2368
2454
 
2369
- .pelcro-root .focus\:plc-outline-none:focus {
2370
- outline: 2px solid transparent;
2371
- outline-offset: 2px;
2455
+ .pelcro-root .plc--translate-x-full {
2456
+ --tw-translate-x: -100%;
2372
2457
  }
2373
2458
 
2374
- .pelcro-root .plc-overflow-auto {
2375
- overflow: auto;
2459
+ .pelcro-root .plc--translate-y-1\/2 {
2460
+ --tw-translate-y: -50%;
2461
+ }
2462
+
2463
+ .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1 {
2464
+ --tw-translate-x: 0.25rem;
2465
+ }
2466
+
2467
+ .pelcro-root .plc-rotate-90 {
2468
+ --tw-rotate: 90deg;
2469
+ }
2470
+
2471
+ .pelcro-root .plc-rotate-180 {
2472
+ --tw-rotate: 180deg;
2473
+ }
2474
+
2475
+ .pelcro-root .plc-scale-120 {
2476
+ --tw-scale-x: 1.2;
2477
+ --tw-scale-y: 1.2;
2478
+ }
2479
+
2480
+ .pelcro-root .plc-scale-x-0 {
2481
+ --tw-scale-x: 0;
2482
+ }
2483
+
2484
+ .pelcro-root .plc-scale-x-100 {
2485
+ --tw-scale-x: 1;
2486
+ }
2487
+
2488
+ @keyframes plc-spin {
2489
+ to {
2490
+ transform: rotate(360deg);
2491
+ }
2492
+ }
2493
+
2494
+ @keyframes plc-ping {
2495
+ 75%, 100% {
2496
+ transform: scale(2);
2497
+ opacity: 0;
2498
+ }
2499
+ }
2500
+
2501
+ @keyframes plc-pulse {
2502
+ 50% {
2503
+ opacity: .5;
2504
+ }
2505
+ }
2506
+
2507
+ @keyframes plc-bounce {
2508
+ 0%, 100% {
2509
+ transform: translateY(-25%);
2510
+ animation-timing-function: cubic-bezier(0.8,0,1,1);
2511
+ }
2512
+
2513
+ 50% {
2514
+ transform: none;
2515
+ animation-timing-function: cubic-bezier(0,0,0.2,1);
2516
+ }
2517
+ }
2518
+
2519
+ @keyframes plc-slideInBottom {
2520
+ 0% {
2521
+ transform: translateY(1000px);
2522
+ opacity: 0;
2523
+ }
2524
+
2525
+ 100% {
2526
+ transform: translateY(0);
2527
+ opacity: 1;
2528
+ }
2529
+ }
2530
+
2531
+ .pelcro-root .plc-animate-spin {
2532
+ animation: plc-spin 1s linear infinite;
2533
+ }
2534
+
2535
+ @media (prefers-reduced-motion: no-preference) {
2536
+ .pelcro-root .motion-safe\:plc-animate-slideInBottom {
2537
+ animation: plc-slideInBottom 0.5s ease-out;
2538
+ }
2539
+ }
2540
+
2541
+ .pelcro-root .plc-cursor-default {
2542
+ cursor: default;
2543
+ }
2544
+
2545
+ .pelcro-root .plc-cursor-pointer {
2546
+ cursor: pointer;
2547
+ }
2548
+
2549
+ .pelcro-root .plc-select-none {
2550
+ -webkit-user-select: none;
2551
+ user-select: none;
2552
+ }
2553
+
2554
+ .pelcro-root .plc-appearance-none {
2555
+ -webkit-appearance: none;
2556
+ appearance: none;
2557
+ }
2558
+
2559
+ .pelcro-root .plc-flex-row-reverse {
2560
+ flex-direction: row-reverse;
2561
+ }
2562
+
2563
+ .pelcro-root .plc-flex-col {
2564
+ flex-direction: column;
2565
+ }
2566
+
2567
+ .pelcro-root .plc-flex-wrap {
2568
+ flex-wrap: wrap;
2569
+ }
2570
+
2571
+ .pelcro-root .plc-place-items-center {
2572
+ place-items: center;
2573
+ }
2574
+
2575
+ .pelcro-root .plc-items-start {
2576
+ align-items: flex-start;
2577
+ }
2578
+
2579
+ .pelcro-root .plc-items-end {
2580
+ align-items: flex-end;
2581
+ }
2582
+
2583
+ .pelcro-root .plc-items-center {
2584
+ align-items: center;
2585
+ }
2586
+
2587
+ .pelcro-root .plc-items-stretch {
2588
+ align-items: stretch;
2589
+ }
2590
+
2591
+ .pelcro-root .plc-justify-end {
2592
+ justify-content: flex-end;
2593
+ }
2594
+
2595
+ .pelcro-root .plc-justify-center {
2596
+ justify-content: center;
2597
+ }
2598
+
2599
+ .pelcro-root .plc-justify-between {
2600
+ justify-content: space-between;
2601
+ }
2602
+
2603
+ .pelcro-root .plc-justify-evenly {
2604
+ justify-content: space-evenly;
2605
+ }
2606
+
2607
+ .pelcro-root .plc-justify-items-center {
2608
+ justify-items: center;
2609
+ }
2610
+
2611
+ .pelcro-root .plc-gap-x-3 {
2612
+ column-gap: 0.75rem;
2613
+ }
2614
+
2615
+ .pelcro-root .plc-gap-y-2 {
2616
+ row-gap: 0.5rem;
2617
+ }
2618
+
2619
+ .pelcro-root .plc-gap-y-5 {
2620
+ row-gap: 1.25rem;
2621
+ }
2622
+
2623
+ .pelcro-root .plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
2624
+ --tw-space-x-reverse: 0;
2625
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
2626
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
2627
+ }
2628
+
2629
+ .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]) {
2630
+ --tw-space-x-reverse: 0;
2631
+ margin-right: calc(0.75rem * var(--tw-space-x-reverse));
2632
+ margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
2633
+ }
2634
+
2635
+ .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]) {
2636
+ --tw-space-y-reverse: 0;
2637
+ margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
2638
+ margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
2639
+ }
2640
+
2641
+ .pelcro-root .plc-space-y-4 > :not([hidden]) ~ :not([hidden]) {
2642
+ --tw-space-y-reverse: 0;
2643
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
2644
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
2645
+ }
2646
+
2647
+ .pelcro-root .plc-overflow-auto {
2648
+ overflow: auto;
2649
+ }
2650
+
2651
+ .pelcro-root .plc-overflow-hidden {
2652
+ overflow: hidden;
2653
+ }
2654
+
2655
+ .pelcro-root .plc-overflow-x-auto {
2656
+ overflow-x: auto;
2376
2657
  }
2377
2658
 
2378
2659
  .pelcro-root .plc-overflow-y-auto {
2379
2660
  overflow-y: auto;
2380
2661
  }
2381
2662
 
2382
- .pelcro-root .plc-overflow-y-scroll {
2383
- overflow-y: scroll;
2663
+ .pelcro-root .plc-overflow-y-scroll {
2664
+ overflow-y: scroll;
2665
+ }
2666
+
2667
+ .pelcro-root .plc-truncate {
2668
+ overflow: hidden;
2669
+ text-overflow: ellipsis;
2670
+ white-space: nowrap;
2671
+ }
2672
+
2673
+ .pelcro-root .plc-whitespace-nowrap {
2674
+ white-space: nowrap;
2675
+ }
2676
+
2677
+ .pelcro-root .plc-whitespace-pre-line {
2678
+ white-space: pre-line;
2679
+ }
2680
+
2681
+ .pelcro-root .plc-break-words {
2682
+ overflow-wrap: break-word;
2683
+ }
2684
+
2685
+ .pelcro-root .plc-rounded-none {
2686
+ border-radius: 0px;
2687
+ }
2688
+
2689
+ .pelcro-root .plc-rounded-sm {
2690
+ border-radius: 0.125rem;
2691
+ }
2692
+
2693
+ .pelcro-root .plc-rounded {
2694
+ border-radius: 0.25rem;
2695
+ }
2696
+
2697
+ .pelcro-root .plc-rounded-md {
2698
+ border-radius: 0.375rem;
2699
+ }
2700
+
2701
+ .pelcro-root .plc-rounded-lg {
2702
+ border-radius: 0.5rem;
2703
+ }
2704
+
2705
+ .pelcro-root .plc-rounded-2xl {
2706
+ border-radius: 1rem;
2707
+ }
2708
+
2709
+ .pelcro-root .plc-rounded-full {
2710
+ border-radius: 9999px;
2711
+ }
2712
+
2713
+ .pelcro-root .plc-border-0 {
2714
+ border-width: 0px;
2715
+ }
2716
+
2717
+ .pelcro-root .plc-border-2 {
2718
+ border-width: 2px;
2719
+ }
2720
+
2721
+ .pelcro-root .plc-border {
2722
+ border-width: 1px;
2723
+ }
2724
+
2725
+ .pelcro-root .last\:plc-border-0:last-child {
2726
+ border-width: 0px;
2727
+ }
2728
+
2729
+ .pelcro-root .plc-border-t-2 {
2730
+ border-top-width: 2px;
2731
+ }
2732
+
2733
+ .pelcro-root .plc-border-t-4 {
2734
+ border-top-width: 4px;
2735
+ }
2736
+
2737
+ .pelcro-root .plc-border-t-8 {
2738
+ border-top-width: 8px;
2739
+ }
2740
+
2741
+ .pelcro-root .plc-border-t {
2742
+ border-top-width: 1px;
2743
+ }
2744
+
2745
+ .pelcro-root .plc-border-b-2 {
2746
+ border-bottom-width: 2px;
2747
+ }
2748
+
2749
+ .pelcro-root .plc-border-b {
2750
+ border-bottom-width: 1px;
2751
+ }
2752
+
2753
+ .pelcro-root .plc-border-l-2 {
2754
+ border-left-width: 2px;
2755
+ }
2756
+
2757
+ .pelcro-root .plc-border-l-4 {
2758
+ border-left-width: 4px;
2759
+ }
2760
+
2761
+ .pelcro-root .plc-border-solid {
2762
+ border-style: solid;
2763
+ }
2764
+
2765
+ .pelcro-root .plc-border-transparent {
2766
+ border-color: transparent;
2767
+ }
2768
+
2769
+ .pelcro-root .plc-border-primary-300 {
2770
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
2771
+ }
2772
+
2773
+ .pelcro-root .plc-border-primary-400 {
2774
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2775
+ }
2776
+
2777
+ .pelcro-root .plc-border-primary-500 {
2778
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2779
+ }
2780
+
2781
+ .pelcro-root .plc-border-primary-800 {
2782
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
2783
+ }
2784
+
2785
+ .pelcro-root .plc-border-primary {
2786
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2787
+ }
2788
+
2789
+ .pelcro-root .plc-border-white {
2790
+ --tw-border-opacity: 1;
2791
+ border-color: rgba(255, 255, 255, var(--tw-border-opacity));
2792
+ }
2793
+
2794
+ .pelcro-root .plc-border-gray-200 {
2795
+ --tw-border-opacity: 1;
2796
+ border-color: rgba(229, 231, 235, var(--tw-border-opacity));
2797
+ }
2798
+
2799
+ .pelcro-root .plc-border-gray-300 {
2800
+ --tw-border-opacity: 1;
2801
+ border-color: rgba(209, 213, 219, var(--tw-border-opacity));
2802
+ }
2803
+
2804
+ .pelcro-root .plc-border-gray-400 {
2805
+ --tw-border-opacity: 1;
2806
+ border-color: rgba(156, 163, 175, var(--tw-border-opacity));
2807
+ }
2808
+
2809
+ .pelcro-root .plc-border-green-400 {
2810
+ --tw-border-opacity: 1;
2811
+ border-color: rgba(52, 211, 153, var(--tw-border-opacity));
2812
+ }
2813
+
2814
+ .pelcro-root .hover\:plc-border-primary-800:hover {
2815
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
2816
+ }
2817
+
2818
+ .pelcro-root .plc-bg-transparent {
2819
+ background-color: transparent;
2820
+ }
2821
+
2822
+ .pelcro-root .plc-bg-primary-200 {
2823
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 30%));
2384
2824
  }
2385
2825
 
2386
- .pelcro-root .plc-p-1 {
2387
- padding: 0.25rem;
2826
+ .pelcro-root .plc-bg-primary-400 {
2827
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2388
2828
  }
2389
2829
 
2390
- .pelcro-root .plc-p-2 {
2391
- padding: 0.5rem;
2830
+ .pelcro-root .plc-bg-primary-700 {
2831
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
2392
2832
  }
2393
2833
 
2394
- .pelcro-root .plc-p-3 {
2395
- padding: 0.75rem;
2834
+ .pelcro-root .plc-bg-primary-800 {
2835
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
2396
2836
  }
2397
2837
 
2398
- .pelcro-root .plc-p-4 {
2399
- padding: 1rem;
2838
+ .pelcro-root .plc-bg-primary {
2839
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2400
2840
  }
2401
2841
 
2402
- .pelcro-root .plc-p-5 {
2403
- padding: 1.25rem;
2842
+ .pelcro-root .plc-bg-white {
2843
+ --tw-bg-opacity: 1;
2844
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2404
2845
  }
2405
2846
 
2406
- .pelcro-root .plc-py-1 {
2407
- padding-top: 0.25rem;
2408
- padding-bottom: 0.25rem;
2847
+ .pelcro-root .plc-bg-gray-50 {
2848
+ --tw-bg-opacity: 1;
2849
+ background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2409
2850
  }
2410
2851
 
2411
- .pelcro-root .plc-px-1 {
2412
- padding-left: 0.25rem;
2413
- padding-right: 0.25rem;
2852
+ .pelcro-root .plc-bg-gray-100 {
2853
+ --tw-bg-opacity: 1;
2854
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2414
2855
  }
2415
2856
 
2416
- .pelcro-root .plc-py-2 {
2417
- padding-top: 0.5rem;
2418
- padding-bottom: 0.5rem;
2857
+ .pelcro-root .plc-bg-gray-200 {
2858
+ --tw-bg-opacity: 1;
2859
+ background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
2419
2860
  }
2420
2861
 
2421
- .pelcro-root .plc-px-2 {
2422
- padding-left: 0.5rem;
2423
- padding-right: 0.5rem;
2862
+ .pelcro-root .plc-bg-gray-300 {
2863
+ --tw-bg-opacity: 1;
2864
+ background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
2424
2865
  }
2425
2866
 
2426
- .pelcro-root .plc-py-3 {
2427
- padding-top: 0.75rem;
2428
- padding-bottom: 0.75rem;
2867
+ .pelcro-root .plc-bg-gray-500 {
2868
+ --tw-bg-opacity: 1;
2869
+ background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
2429
2870
  }
2430
2871
 
2431
- .pelcro-root .plc-px-3 {
2432
- padding-left: 0.75rem;
2433
- padding-right: 0.75rem;
2872
+ .pelcro-root .plc-bg-gray-600 {
2873
+ --tw-bg-opacity: 1;
2874
+ background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2434
2875
  }
2435
2876
 
2436
- .pelcro-root .plc-py-4 {
2437
- padding-top: 1rem;
2438
- padding-bottom: 1rem;
2877
+ .pelcro-root .plc-bg-gray-800 {
2878
+ --tw-bg-opacity: 1;
2879
+ background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
2439
2880
  }
2440
2881
 
2441
- .pelcro-root .plc-px-4 {
2442
- padding-left: 1rem;
2443
- padding-right: 1rem;
2882
+ .pelcro-root .plc-bg-red-100 {
2883
+ --tw-bg-opacity: 1;
2884
+ background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
2444
2885
  }
2445
2886
 
2446
- .pelcro-root .plc-px-5 {
2447
- padding-left: 1.25rem;
2448
- padding-right: 1.25rem;
2887
+ .pelcro-root .plc-bg-red-500 {
2888
+ --tw-bg-opacity: 1;
2889
+ background-color: rgba(180, 48, 43, var(--tw-bg-opacity));
2449
2890
  }
2450
2891
 
2451
- .pelcro-root .plc-px-6 {
2452
- padding-left: 1.5rem;
2453
- padding-right: 1.5rem;
2892
+ .pelcro-root .plc-bg-yellow-100 {
2893
+ --tw-bg-opacity: 1;
2894
+ background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
2454
2895
  }
2455
2896
 
2456
- .pelcro-root .plc-pt-1 {
2457
- padding-top: 0.25rem;
2897
+ .pelcro-root .plc-bg-green-50 {
2898
+ --tw-bg-opacity: 1;
2899
+ background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
2458
2900
  }
2459
2901
 
2460
- .pelcro-root .plc-pr-1 {
2461
- padding-right: 0.25rem;
2902
+ .pelcro-root .plc-bg-green-100 {
2903
+ --tw-bg-opacity: 1;
2904
+ background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
2462
2905
  }
2463
2906
 
2464
- .pelcro-root .plc-pt-2 {
2465
- padding-top: 0.5rem;
2907
+ .pelcro-root .plc-bg-blue-100 {
2908
+ --tw-bg-opacity: 1;
2909
+ background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
2466
2910
  }
2467
2911
 
2468
- .pelcro-root .plc-pr-2 {
2469
- padding-right: 0.5rem;
2912
+ .pelcro-root .plc-bg-orange-100 {
2913
+ --tw-bg-opacity: 1;
2914
+ background-color: rgba(255, 237, 213, var(--tw-bg-opacity));
2470
2915
  }
2471
2916
 
2472
- .pelcro-root .plc-pl-2 {
2473
- padding-left: 0.5rem;
2917
+ .pelcro-root .hover\:plc-bg-transparent:hover {
2918
+ background-color: transparent;
2474
2919
  }
2475
2920
 
2476
- .pelcro-root .plc-pr-4 {
2477
- padding-right: 1rem;
2921
+ .pelcro-root .hover\:plc-bg-primary-600:hover {
2922
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2478
2923
  }
2479
2924
 
2480
- .pelcro-root .plc-pl-4 {
2481
- padding-left: 1rem;
2925
+ .pelcro-root .hover\:plc-bg-white:hover {
2926
+ --tw-bg-opacity: 1;
2927
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2482
2928
  }
2483
2929
 
2484
- .pelcro-root .plc-pointer-events-none {
2485
- pointer-events: none;
2930
+ .pelcro-root .hover\:plc-bg-gray-50:hover {
2931
+ --tw-bg-opacity: 1;
2932
+ background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2486
2933
  }
2487
2934
 
2488
- .pelcro-root .plc-fixed {
2489
- position: fixed;
2935
+ .pelcro-root .hover\:plc-bg-gray-100:hover {
2936
+ --tw-bg-opacity: 1;
2937
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2490
2938
  }
2491
2939
 
2492
- .pelcro-root .plc-absolute {
2493
- position: absolute;
2940
+ .pelcro-root .hover\:plc-bg-gray-600:hover {
2941
+ --tw-bg-opacity: 1;
2942
+ background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2494
2943
  }
2495
2944
 
2496
- .pelcro-root .plc-relative {
2497
- position: relative;
2945
+ .pelcro-root .hover\:plc-bg-gray-900:hover {
2946
+ --tw-bg-opacity: 1;
2947
+ background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
2498
2948
  }
2499
2949
 
2500
- .pelcro-root .plc-inset-0 {
2501
- top: 0px;
2502
- right: 0px;
2503
- bottom: 0px;
2504
- left: 0px;
2950
+ .pelcro-root .hover\:plc-bg-red-600:hover {
2951
+ --tw-bg-opacity: 1;
2952
+ background-color: rgba(139, 37, 33, var(--tw-bg-opacity));
2505
2953
  }
2506
2954
 
2507
- .pelcro-root .plc-inset-y-0 {
2508
- top: 0px;
2509
- bottom: 0px;
2955
+ .pelcro-root .focus\:plc-bg-transparent:focus {
2956
+ background-color: transparent;
2510
2957
  }
2511
2958
 
2512
- .pelcro-root .plc-top-0 {
2513
- top: 0px;
2959
+ .pelcro-root .focus\:plc-bg-primary-600:focus {
2960
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2514
2961
  }
2515
2962
 
2516
- .pelcro-root .plc-right-0 {
2517
- right: 0px;
2963
+ .pelcro-root .disabled\:plc-bg-gray-400:disabled {
2964
+ --tw-bg-opacity: 1;
2965
+ background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
2518
2966
  }
2519
2967
 
2520
- .pelcro-root .plc-bottom-0 {
2521
- bottom: 0px;
2968
+ .pelcro-root .plc-fill-current {
2969
+ fill: currentColor;
2522
2970
  }
2523
2971
 
2524
- .pelcro-root .plc-right-1 {
2525
- right: 0.25rem;
2972
+ .pelcro-root .plc-object-contain {
2973
+ object-fit: contain;
2526
2974
  }
2527
2975
 
2528
- .pelcro-root .plc-right-2 {
2529
- right: 0.5rem;
2976
+ .pelcro-root .plc-object-left {
2977
+ object-position: left;
2530
2978
  }
2531
2979
 
2532
- .pelcro-root .plc-right-4 {
2533
- right: 1rem;
2980
+ .pelcro-root .plc-p-1 {
2981
+ padding: 0.25rem;
2534
2982
  }
2535
2983
 
2536
- .pelcro-root .plc-bottom-4 {
2537
- bottom: 1rem;
2984
+ .pelcro-root .plc-p-2 {
2985
+ padding: 0.5rem;
2538
2986
  }
2539
2987
 
2540
- .pelcro-root .plc-top-7 {
2541
- top: 1.75rem;
2988
+ .pelcro-root .plc-p-3 {
2989
+ padding: 0.75rem;
2990
+ }
2991
+
2992
+ .pelcro-root .plc-p-4 {
2993
+ padding: 1rem;
2994
+ }
2995
+
2996
+ .pelcro-root .plc-p-5 {
2997
+ padding: 1.25rem;
2998
+ }
2999
+
3000
+ .pelcro-root .plc-p-6 {
3001
+ padding: 1.5rem;
3002
+ }
3003
+
3004
+ .pelcro-root .plc-px-1 {
3005
+ padding-left: 0.25rem;
3006
+ padding-right: 0.25rem;
3007
+ }
3008
+
3009
+ .pelcro-root .plc-px-2 {
3010
+ padding-left: 0.5rem;
3011
+ padding-right: 0.5rem;
3012
+ }
3013
+
3014
+ .pelcro-root .plc-px-3 {
3015
+ padding-left: 0.75rem;
3016
+ padding-right: 0.75rem;
3017
+ }
3018
+
3019
+ .pelcro-root .plc-px-4 {
3020
+ padding-left: 1rem;
3021
+ padding-right: 1rem;
3022
+ }
3023
+
3024
+ .pelcro-root .plc-px-5 {
3025
+ padding-left: 1.25rem;
3026
+ padding-right: 1.25rem;
3027
+ }
3028
+
3029
+ .pelcro-root .plc-px-6 {
3030
+ padding-left: 1.5rem;
3031
+ padding-right: 1.5rem;
3032
+ }
3033
+
3034
+ .pelcro-root .plc-px-16 {
3035
+ padding-left: 4rem;
3036
+ padding-right: 4rem;
3037
+ }
3038
+
3039
+ .pelcro-root .plc-py-1 {
3040
+ padding-top: 0.25rem;
3041
+ padding-bottom: 0.25rem;
3042
+ }
3043
+
3044
+ .pelcro-root .plc-py-2 {
3045
+ padding-top: 0.5rem;
3046
+ padding-bottom: 0.5rem;
3047
+ }
3048
+
3049
+ .pelcro-root .plc-py-3 {
3050
+ padding-top: 0.75rem;
3051
+ padding-bottom: 0.75rem;
3052
+ }
3053
+
3054
+ .pelcro-root .plc-py-4 {
3055
+ padding-top: 1rem;
3056
+ padding-bottom: 1rem;
3057
+ }
3058
+
3059
+ .pelcro-root .plc-py-5 {
3060
+ padding-top: 1.25rem;
3061
+ padding-bottom: 1.25rem;
3062
+ }
3063
+
3064
+ .pelcro-root .plc-pt-1 {
3065
+ padding-top: 0.25rem;
3066
+ }
3067
+
3068
+ .pelcro-root .plc-pt-2 {
3069
+ padding-top: 0.5rem;
3070
+ }
3071
+
3072
+ .pelcro-root .plc-pt-4 {
3073
+ padding-top: 1rem;
2542
3074
  }
2543
3075
 
2544
- .pelcro-root .plc-top-16 {
2545
- top: 4rem;
3076
+ .pelcro-root .plc-pr-1 {
3077
+ padding-right: 0.25rem;
2546
3078
  }
2547
3079
 
2548
- .pelcro-root .plc-top-24 {
2549
- top: 6rem;
3080
+ .pelcro-root .plc-pr-2 {
3081
+ padding-right: 0.5rem;
2550
3082
  }
2551
3083
 
2552
- .pelcro-root .plc--right-1 {
2553
- right: -0.25rem;
3084
+ .pelcro-root .plc-pr-4 {
3085
+ padding-right: 1rem;
2554
3086
  }
2555
3087
 
2556
- * {
2557
- --tw-shadow: 0 0 #0000;
3088
+ .pelcro-root .plc-pb-4 {
3089
+ padding-bottom: 1rem;
2558
3090
  }
2559
3091
 
2560
- .pelcro-root .plc-shadow-sm {
2561
- --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2562
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3092
+ .pelcro-root .plc-pl-2 {
3093
+ padding-left: 0.5rem;
2563
3094
  }
2564
3095
 
2565
- .pelcro-root .plc-shadow-md {
2566
- --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
2567
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3096
+ .pelcro-root .plc-pl-4 {
3097
+ padding-left: 1rem;
2568
3098
  }
2569
3099
 
2570
- .pelcro-root .plc-shadow-lg {
2571
- --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
2572
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3100
+ .pelcro-root .plc-text-left {
3101
+ text-align: left;
2573
3102
  }
2574
3103
 
2575
- .pelcro-root .plc-shadow-xl {
2576
- --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
2577
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3104
+ .pelcro-root .plc-text-center {
3105
+ text-align: center;
2578
3106
  }
2579
3107
 
2580
- .pelcro-root .hover\:plc-shadow-none:hover {
2581
- --tw-shadow: 0 0 #0000;
2582
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3108
+ .pelcro-root .plc-align-top {
3109
+ vertical-align: top;
2583
3110
  }
2584
3111
 
2585
- .pelcro-root .focus\:plc-shadow-none:focus {
2586
- --tw-shadow: 0 0 #0000;
2587
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3112
+ .pelcro-root .plc-align-middle {
3113
+ vertical-align: middle;
2588
3114
  }
2589
3115
 
2590
- * {
2591
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
2592
- --tw-ring-offset-width: 0px;
2593
- --tw-ring-offset-color: #fff;
2594
- --tw-ring-color: rgba(147, 197, 253, 0.5);
2595
- --tw-ring-offset-shadow: 0 0 #0000;
2596
- --tw-ring-shadow: 0 0 #0000;
3116
+ .pelcro-root .plc-text-xs {
3117
+ font-size: 0.75rem;
3118
+ line-height: 1rem;
2597
3119
  }
2598
3120
 
2599
- .pelcro-root .plc-ring-1 {
2600
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2601
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2602
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3121
+ .pelcro-root .plc-text-sm {
3122
+ font-size: 0.875rem;
3123
+ line-height: 1.25rem;
2603
3124
  }
2604
3125
 
2605
- .pelcro-root .plc-ring-2 {
2606
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2607
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2608
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3126
+ .pelcro-root .plc-text-base {
3127
+ font-size: 1rem;
3128
+ line-height: 1.5rem;
2609
3129
  }
2610
3130
 
2611
- .pelcro-root .focus\:plc-ring-0:focus {
2612
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2613
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2614
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3131
+ .pelcro-root .plc-text-lg {
3132
+ font-size: 1.125rem;
3133
+ line-height: 1.75rem;
2615
3134
  }
2616
3135
 
2617
- .pelcro-root .focus\:plc-ring-2:focus {
2618
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2619
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2620
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3136
+ .pelcro-root .plc-text-xl {
3137
+ font-size: 1.25rem;
3138
+ line-height: 1.75rem;
2621
3139
  }
2622
3140
 
2623
- .pelcro-root .plc-ring-primary-400 {
2624
- --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3141
+ .pelcro-root .plc-text-2xl {
3142
+ font-size: 1.5rem;
3143
+ line-height: 2rem;
2625
3144
  }
2626
3145
 
2627
- .pelcro-root .plc-ring-gray-200 {
2628
- --tw-ring-opacity: 1;
2629
- --tw-ring-color: rgba(229, 231, 235, var(--tw-ring-opacity));
3146
+ .pelcro-root .plc-text-3xl {
3147
+ font-size: 1.875rem;
3148
+ line-height: 2.25rem;
2630
3149
  }
2631
3150
 
2632
- .pelcro-root .plc-ring-red-400 {
2633
- --tw-ring-opacity: 1;
2634
- --tw-ring-color: rgba(209, 70, 65, var(--tw-ring-opacity));
3151
+ .pelcro-root .plc-text-4xl {
3152
+ font-size: 2.25rem;
3153
+ line-height: 2.5rem;
2635
3154
  }
2636
3155
 
2637
- .pelcro-root .focus\:plc-ring-primary-300:focus {
2638
- --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
3156
+ .pelcro-root .plc-font-thin {
3157
+ font-weight: 100;
2639
3158
  }
2640
3159
 
2641
- .pelcro-root .focus\:plc-ring-red-500:focus {
2642
- --tw-ring-opacity: 1;
2643
- --tw-ring-color: rgba(180, 48, 43, var(--tw-ring-opacity));
3160
+ .pelcro-root .plc-font-normal {
3161
+ font-weight: 400;
2644
3162
  }
2645
3163
 
2646
- .pelcro-root .focus\:plc-ring-green-300:focus {
2647
- --tw-ring-opacity: 1;
2648
- --tw-ring-color: rgba(110, 231, 183, var(--tw-ring-opacity));
3164
+ .pelcro-root .plc-font-medium {
3165
+ font-weight: 500;
2649
3166
  }
2650
3167
 
2651
- .pelcro-root .focus\:plc-ring-blue-400:focus {
2652
- --tw-ring-opacity: 1;
2653
- --tw-ring-color: rgba(96, 165, 250, var(--tw-ring-opacity));
3168
+ .pelcro-root .plc-font-semibold {
3169
+ font-weight: 600;
2654
3170
  }
2655
3171
 
2656
- .pelcro-root .focus\:plc-ring-blue-500:focus {
2657
- --tw-ring-opacity: 1;
2658
- --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
3172
+ .pelcro-root .plc-font-bold {
3173
+ font-weight: 700;
2659
3174
  }
2660
3175
 
2661
- .pelcro-root .plc-fill-current {
2662
- fill: currentColor;
3176
+ .pelcro-root .plc-uppercase {
3177
+ text-transform: uppercase;
2663
3178
  }
2664
3179
 
2665
- .pelcro-root .plc-table-fixed {
2666
- table-layout: fixed;
3180
+ .pelcro-root .plc-capitalize {
3181
+ text-transform: capitalize;
2667
3182
  }
2668
3183
 
2669
- .pelcro-root .plc-text-left {
2670
- text-align: left;
3184
+ .pelcro-root .plc-tracking-wider {
3185
+ letter-spacing: 0.05em;
2671
3186
  }
2672
3187
 
2673
- .pelcro-root .plc-text-center {
2674
- text-align: center;
3188
+ .pelcro-root .plc-tracking-widest {
3189
+ letter-spacing: 0.1em;
2675
3190
  }
2676
3191
 
2677
3192
  .pelcro-root .plc-text-primary-400 {
@@ -2686,6 +3201,10 @@ in order to scope selectors under pelcro-root
2686
3201
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2687
3202
  }
2688
3203
 
3204
+ .pelcro-root .plc-text-primary-800 {
3205
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
3206
+ }
3207
+
2689
3208
  .pelcro-root .plc-text-black {
2690
3209
  --tw-text-opacity: 1;
2691
3210
  color: rgba(0, 0, 0, var(--tw-text-opacity));
@@ -2696,11 +3215,6 @@ in order to scope selectors under pelcro-root
2696
3215
  color: rgba(255, 255, 255, var(--tw-text-opacity));
2697
3216
  }
2698
3217
 
2699
- .pelcro-root .plc-text-gray-100 {
2700
- --tw-text-opacity: 1;
2701
- color: rgba(243, 244, 246, var(--tw-text-opacity));
2702
- }
2703
-
2704
3218
  .pelcro-root .plc-text-gray-400 {
2705
3219
  --tw-text-opacity: 1;
2706
3220
  color: rgba(156, 163, 175, var(--tw-text-opacity));
@@ -2766,6 +3280,11 @@ in order to scope selectors under pelcro-root
2766
3280
  color: rgba(96, 165, 250, var(--tw-text-opacity));
2767
3281
  }
2768
3282
 
3283
+ .pelcro-root .plc-text-blue-500 {
3284
+ --tw-text-opacity: 1;
3285
+ color: rgba(59, 130, 246, var(--tw-text-opacity));
3286
+ }
3287
+
2769
3288
  .pelcro-root .plc-text-blue-700 {
2770
3289
  --tw-text-opacity: 1;
2771
3290
  color: rgba(29, 78, 216, var(--tw-text-opacity));
@@ -2784,8 +3303,8 @@ in order to scope selectors under pelcro-root
2784
3303
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2785
3304
  }
2786
3305
 
2787
- .pelcro-root .hover\:plc-text-primary-700:hover {
2788
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
3306
+ .pelcro-root .hover\:plc-text-primary:hover {
3307
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2789
3308
  }
2790
3309
 
2791
3310
  .pelcro-root .hover\:plc-text-black:hover {
@@ -2798,11 +3317,6 @@ in order to scope selectors under pelcro-root
2798
3317
  color: rgba(255, 255, 255, var(--tw-text-opacity));
2799
3318
  }
2800
3319
 
2801
- .pelcro-root .hover\:plc-text-gray-500:hover {
2802
- --tw-text-opacity: 1;
2803
- color: rgba(107, 114, 128, var(--tw-text-opacity));
2804
- }
2805
-
2806
3320
  .pelcro-root .hover\:plc-text-gray-900:hover {
2807
3321
  --tw-text-opacity: 1;
2808
3322
  color: rgba(17, 24, 39, var(--tw-text-opacity));
@@ -2818,20 +3332,6 @@ in order to scope selectors under pelcro-root
2818
3332
  color: rgba(255, 255, 255, var(--tw-text-opacity));
2819
3333
  }
2820
3334
 
2821
- .pelcro-root .plc-truncate {
2822
- overflow: hidden;
2823
- text-overflow: ellipsis;
2824
- white-space: nowrap;
2825
- }
2826
-
2827
- .pelcro-root .plc-uppercase {
2828
- text-transform: uppercase;
2829
- }
2830
-
2831
- .pelcro-root .plc-capitalize {
2832
- text-transform: capitalize;
2833
- }
2834
-
2835
3335
  .pelcro-root .plc-underline {
2836
3336
  text-decoration: underline;
2837
3337
  }
@@ -2840,213 +3340,139 @@ in order to scope selectors under pelcro-root
2840
3340
  text-decoration: none;
2841
3341
  }
2842
3342
 
2843
- .pelcro-root .plc-tracking-wider {
2844
- letter-spacing: 0.05em;
2845
- }
2846
-
2847
- .pelcro-root .plc-tracking-widest {
2848
- letter-spacing: 0.1em;
2849
- }
2850
-
2851
- .pelcro-root .plc-select-none {
2852
- -webkit-user-select: none;
2853
- user-select: none;
2854
- }
2855
-
2856
- .pelcro-root .plc-align-top {
2857
- vertical-align: top;
2858
- }
2859
-
2860
- .pelcro-root .plc-align-middle {
2861
- vertical-align: middle;
2862
- }
2863
-
2864
- .pelcro-root .plc-whitespace-pre-line {
2865
- white-space: pre-line;
2866
- }
2867
-
2868
- .pelcro-root .plc-break-words {
2869
- overflow-wrap: break-word;
2870
- }
2871
-
2872
- .pelcro-root .plc-w-3 {
2873
- width: 0.75rem;
2874
- }
2875
-
2876
- .pelcro-root .plc-w-4 {
2877
- width: 1rem;
2878
- }
2879
-
2880
- .pelcro-root .plc-w-5 {
2881
- width: 1.25rem;
2882
- }
2883
-
2884
- .pelcro-root .plc-w-6 {
2885
- width: 1.5rem;
2886
- }
2887
-
2888
- .pelcro-root .plc-w-7 {
2889
- width: 1.75rem;
2890
- }
2891
-
2892
- .pelcro-root .plc-w-8 {
2893
- width: 2rem;
2894
- }
2895
-
2896
- .pelcro-root .plc-w-9 {
2897
- width: 2.25rem;
2898
- }
2899
-
2900
- .pelcro-root .plc-w-10 {
2901
- width: 2.5rem;
2902
- }
2903
-
2904
- .pelcro-root .plc-w-12 {
2905
- width: 3rem;
2906
- }
2907
-
2908
- .pelcro-root .plc-w-16 {
2909
- width: 4rem;
2910
- }
2911
-
2912
- .pelcro-root .plc-w-20 {
2913
- width: 5rem;
2914
- }
2915
-
2916
- .pelcro-root .plc-w-24 {
2917
- width: 6rem;
2918
- }
2919
-
2920
- .pelcro-root .plc-w-32 {
2921
- width: 8rem;
2922
- }
2923
-
2924
- .pelcro-root .plc-w-36 {
2925
- width: 9rem;
2926
- }
2927
-
2928
- .pelcro-root .plc-w-56 {
2929
- width: 14rem;
2930
- }
2931
-
2932
- .pelcro-root .plc-w-auto {
2933
- width: auto;
2934
- }
2935
-
2936
- .pelcro-root .plc-w-1\/2 {
2937
- width: 50%;
2938
- }
2939
-
2940
- .pelcro-root .plc-w-1\/4 {
2941
- width: 25%;
3343
+ .pelcro-root .hover\:plc-opacity-30:hover {
3344
+ opacity: 0.3;
2942
3345
  }
2943
3346
 
2944
- .pelcro-root .plc-w-3\/4 {
2945
- width: 75%;
3347
+ *, ::before, ::after {
3348
+ --tw-shadow: 0 0 #0000;
2946
3349
  }
2947
3350
 
2948
- .pelcro-root .plc-w-1\/5 {
2949
- width: 20%;
3351
+ .pelcro-root .plc-shadow-sm {
3352
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3353
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2950
3354
  }
2951
3355
 
2952
- .pelcro-root .plc-w-2\/5 {
2953
- width: 40%;
3356
+ .pelcro-root .plc-shadow-md {
3357
+ --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
3358
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2954
3359
  }
2955
3360
 
2956
- .pelcro-root .plc-w-2\/12 {
2957
- width: 16.666667%;
3361
+ .pelcro-root .plc-shadow-md_dark {
3362
+ --tw-shadow: 0 0px 6px -1px rgba(0, 0, 0, 0.1), 0 0px 4px -1px rgba(0, 0, 0, 0.4);
3363
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2958
3364
  }
2959
3365
 
2960
- .pelcro-root .plc-w-3\/12 {
2961
- width: 25%;
3366
+ .pelcro-root .plc-shadow-lg {
3367
+ --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
3368
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2962
3369
  }
2963
3370
 
2964
- .pelcro-root .plc-w-4\/12 {
2965
- width: 33.333333%;
3371
+ .pelcro-root .plc-shadow-xl {
3372
+ --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
3373
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2966
3374
  }
2967
3375
 
2968
- .pelcro-root .plc-w-5\/12 {
2969
- width: 41.666667%;
3376
+ .pelcro-root .hover\:plc-shadow-none:hover {
3377
+ --tw-shadow: 0 0 #0000;
3378
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2970
3379
  }
2971
3380
 
2972
- .pelcro-root .plc-w-6\/12 {
2973
- width: 50%;
3381
+ .pelcro-root .focus\:plc-shadow-none:focus {
3382
+ --tw-shadow: 0 0 #0000;
3383
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2974
3384
  }
2975
3385
 
2976
- .pelcro-root .plc-w-10\/12 {
2977
- width: 83.333333%;
3386
+ .pelcro-root .plc-outline-none {
3387
+ outline: 2px solid transparent;
3388
+ outline-offset: 2px;
2978
3389
  }
2979
3390
 
2980
- .pelcro-root .plc-w-full {
2981
- width: 100%;
3391
+ .pelcro-root .focus-within\:plc-outline-none:focus-within {
3392
+ outline: 2px solid transparent;
3393
+ outline-offset: 2px;
2982
3394
  }
2983
3395
 
2984
- .pelcro-root .plc-w-max {
2985
- width: max-content;
3396
+ .pelcro-root .focus\:plc-outline-none:focus {
3397
+ outline: 2px solid transparent;
3398
+ outline-offset: 2px;
2986
3399
  }
2987
3400
 
2988
- .pelcro-root .plc-z-max {
2989
- z-index: 999999;
3401
+ *, ::before, ::after {
3402
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3403
+ --tw-ring-offset-width: 0px;
3404
+ --tw-ring-offset-color: #fff;
3405
+ --tw-ring-color: rgba(147, 197, 253, 0.5);
3406
+ --tw-ring-offset-shadow: 0 0 #0000;
3407
+ --tw-ring-shadow: 0 0 #0000;
2990
3408
  }
2991
3409
 
2992
- .pelcro-root .plc-gap-x-3 {
2993
- column-gap: 0.75rem;
3410
+ .pelcro-root .plc-ring-1 {
3411
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3412
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3413
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2994
3414
  }
2995
3415
 
2996
- .pelcro-root .plc-gap-y-2 {
2997
- row-gap: 0.5rem;
3416
+ .pelcro-root .plc-ring-2 {
3417
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3418
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3419
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2998
3420
  }
2999
3421
 
3000
- .pelcro-root .plc-gap-y-5 {
3001
- row-gap: 1.25rem;
3422
+ .pelcro-root .focus\:plc-ring-0:focus {
3423
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3424
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3425
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3002
3426
  }
3003
3427
 
3004
- .pelcro-root .plc-transform {
3005
- --tw-translate-x: 0;
3006
- --tw-translate-y: 0;
3007
- --tw-rotate: 0;
3008
- --tw-skew-x: 0;
3009
- --tw-skew-y: 0;
3010
- --tw-scale-x: 1;
3011
- --tw-scale-y: 1;
3012
- transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3428
+ .pelcro-root .focus\:plc-ring-2:focus {
3429
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3430
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3431
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3013
3432
  }
3014
3433
 
3015
- .pelcro-root .plc-origin-right {
3016
- transform-origin: right;
3434
+ .pelcro-root .plc-ring-primary-400 {
3435
+ --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3017
3436
  }
3018
3437
 
3019
- .pelcro-root .plc-scale-120 {
3020
- --tw-scale-x: 1.2;
3021
- --tw-scale-y: 1.2;
3438
+ .pelcro-root .plc-ring-gray-200 {
3439
+ --tw-ring-opacity: 1;
3440
+ --tw-ring-color: rgba(229, 231, 235, var(--tw-ring-opacity));
3022
3441
  }
3023
3442
 
3024
- .pelcro-root .plc-scale-x-0 {
3025
- --tw-scale-x: 0;
3443
+ .pelcro-root .plc-ring-red-400 {
3444
+ --tw-ring-opacity: 1;
3445
+ --tw-ring-color: rgba(209, 70, 65, var(--tw-ring-opacity));
3026
3446
  }
3027
3447
 
3028
- .pelcro-root .plc-scale-x-100 {
3029
- --tw-scale-x: 1;
3448
+ .pelcro-root .focus\:plc-ring-primary-300:focus {
3449
+ --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
3030
3450
  }
3031
3451
 
3032
- .pelcro-root .plc-rotate-90 {
3033
- --tw-rotate: 90deg;
3452
+ .pelcro-root .focus\:plc-ring-red-500:focus {
3453
+ --tw-ring-opacity: 1;
3454
+ --tw-ring-color: rgba(180, 48, 43, var(--tw-ring-opacity));
3034
3455
  }
3035
3456
 
3036
- .pelcro-root .plc-rotate-180 {
3037
- --tw-rotate: 180deg;
3457
+ .pelcro-root .focus\:plc-ring-green-300:focus {
3458
+ --tw-ring-opacity: 1;
3459
+ --tw-ring-color: rgba(110, 231, 183, var(--tw-ring-opacity));
3038
3460
  }
3039
3461
 
3040
- .pelcro-root .plc-translate-x-0 {
3041
- --tw-translate-x: 0px;
3462
+ .pelcro-root .focus\:plc-ring-blue-400:focus {
3463
+ --tw-ring-opacity: 1;
3464
+ --tw-ring-color: rgba(96, 165, 250, var(--tw-ring-opacity));
3042
3465
  }
3043
3466
 
3044
- .pelcro-root .plc-translate-x-full {
3045
- --tw-translate-x: 100%;
3467
+ .pelcro-root .focus\:plc-ring-blue-500:focus {
3468
+ --tw-ring-opacity: 1;
3469
+ --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
3046
3470
  }
3047
3471
 
3048
- .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1 {
3049
- --tw-translate-x: 0.25rem;
3472
+ .pelcro-root .plc-transition-all {
3473
+ transition-property: all;
3474
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3475
+ transition-duration: 150ms;
3050
3476
  }
3051
3477
 
3052
3478
  .pelcro-root .plc-transition {
@@ -3061,78 +3487,41 @@ in order to scope selectors under pelcro-root
3061
3487
  transition-duration: 150ms;
3062
3488
  }
3063
3489
 
3064
- .pelcro-root .plc-ease-out {
3065
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
3066
- }
3067
-
3068
3490
  .pelcro-root .plc-duration-500 {
3069
3491
  transition-duration: 500ms;
3070
3492
  }
3071
3493
 
3072
- @keyframes plc-spin {
3073
- to {
3074
- transform: rotate(360deg);
3075
- }
3076
- }
3077
-
3078
- @keyframes plc-ping {
3079
- 75%, 100% {
3080
- transform: scale(2);
3081
- opacity: 0;
3082
- }
3083
- }
3084
-
3085
- @keyframes plc-pulse {
3086
- 50% {
3087
- opacity: .5;
3088
- }
3494
+ .pelcro-root .plc-ease-out {
3495
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
3089
3496
  }
3090
3497
 
3091
- @keyframes plc-bounce {
3092
- 0%, 100% {
3093
- transform: translateY(-25%);
3094
- animation-timing-function: cubic-bezier(0.8,0,1,1);
3498
+ @media (min-width: 640px) {
3499
+ .pelcro-root .sm\:plc-m-4 {
3500
+ margin: 1rem;
3095
3501
  }
3096
3502
 
3097
- 50% {
3098
- transform: none;
3099
- animation-timing-function: cubic-bezier(0,0,0.2,1);
3503
+ .pelcro-root .sm\:plc-mb-0 {
3504
+ margin-bottom: 0px;
3100
3505
  }
3101
- }
3102
3506
 
3103
- @keyframes plc-slideInBottom {
3104
- 0% {
3105
- transform: translateY(1000px);
3106
- opacity: 0;
3507
+ .pelcro-root .sm\:plc-ml-2 {
3508
+ margin-left: 0.5rem;
3107
3509
  }
3108
3510
 
3109
- 100% {
3110
- transform: translateY(0);
3111
- opacity: 1;
3511
+ .pelcro-root .sm\:plc-ml-6 {
3512
+ margin-left: 1.5rem;
3112
3513
  }
3113
- }
3114
-
3115
- .pelcro-root .plc-animate-spin {
3116
- animation: plc-spin 1s linear infinite;
3117
- }
3118
3514
 
3119
- @media (prefers-reduced-motion: no-preference) {
3120
- .pelcro-root .motion-safe\:plc-animate-slideInBottom {
3121
- animation: plc-slideInBottom 0.5s ease-out;
3515
+ .pelcro-root .sm\:plc-ml-8 {
3516
+ margin-left: 2rem;
3122
3517
  }
3123
- }
3124
3518
 
3125
- @media (min-width: 640px) {
3126
- .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]) {
3127
- --tw-space-y-reverse: 0;
3128
- margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
3129
- margin-bottom: calc(0px * var(--tw-space-y-reverse));
3519
+ .pelcro-root .sm\:plc-flex {
3520
+ display: flex;
3130
3521
  }
3131
3522
 
3132
- .pelcro-root .sm\:plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
3133
- --tw-space-x-reverse: 0;
3134
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3135
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3523
+ .pelcro-root .sm\:plc-inline-grid {
3524
+ display: inline-grid;
3136
3525
  }
3137
3526
 
3138
3527
  .pelcro-root .sm\:plc-h-8 {
@@ -3143,24 +3532,36 @@ in order to scope selectors under pelcro-root
3143
3532
  height: 24rem;
3144
3533
  }
3145
3534
 
3146
- .pelcro-root .sm\:plc-m-4 {
3147
- margin: 1rem;
3535
+ .pelcro-root .sm\:plc-w-auto {
3536
+ width: auto;
3148
3537
  }
3149
3538
 
3150
- .pelcro-root .sm\:plc-ml-2 {
3151
- margin-left: 0.5rem;
3539
+ .pelcro-root .sm\:plc-w-1\/2 {
3540
+ width: 50%;
3152
3541
  }
3153
3542
 
3154
- .pelcro-root .sm\:plc-ml-6 {
3155
- margin-left: 1.5rem;
3543
+ .pelcro-root .sm\:plc-max-w-md {
3544
+ max-width: 28rem;
3156
3545
  }
3157
3546
 
3158
- .pelcro-root .sm\:plc-ml-8 {
3159
- margin-left: 2rem;
3547
+ .pelcro-root .sm\:plc-max-w-90\% {
3548
+ max-width: 90%;
3160
3549
  }
3161
3550
 
3162
- .pelcro-root .sm\:plc-max-w-md {
3163
- max-width: 28rem;
3551
+ .pelcro-root .sm\:plc-flex-row {
3552
+ flex-direction: row;
3553
+ }
3554
+
3555
+ .pelcro-root .sm\:plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
3556
+ --tw-space-x-reverse: 0;
3557
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3558
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3559
+ }
3560
+
3561
+ .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]) {
3562
+ --tw-space-y-reverse: 0;
3563
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
3564
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
3164
3565
  }
3165
3566
 
3166
3567
  .pelcro-root .sm\:plc-p-2 {
@@ -3172,27 +3573,86 @@ in order to scope selectors under pelcro-root
3172
3573
  padding-right: 2rem;
3173
3574
  }
3174
3575
 
3175
- .pelcro-root .sm\:plc-pr-8 {
3176
- padding-right: 2rem;
3177
- }
3178
-
3179
3576
  .pelcro-root .sm\:plc-pl-8 {
3180
3577
  padding-left: 2rem;
3181
3578
  }
3182
-
3183
- .pelcro-root .sm\:plc-w-auto {
3184
- width: auto;
3185
- }
3186
3579
  }
3187
3580
 
3188
3581
  @media (min-width: 768px) {
3582
+ .pelcro-root .md\:plc-max-w-70\% {
3583
+ max-width: 70%;
3584
+ }
3189
3585
  }
3190
3586
 
3191
3587
  @media (min-width: 1024px) {
3588
+ .pelcro-root .lg\:plc-w-3\/12 {
3589
+ width: 25%;
3590
+ }
3591
+
3592
+ .pelcro-root .lg\:plc-w-9\/12 {
3593
+ width: 75%;
3594
+ }
3192
3595
  }
3193
3596
 
3194
3597
  @media (min-width: 1280px) {
3598
+ .pelcro-root .xl\:plc-px-0 {
3599
+ padding-left: 0px;
3600
+ padding-right: 0px;
3601
+ }
3602
+
3603
+ .pelcro-root .xl\:plc-px-16 {
3604
+ padding-left: 4rem;
3605
+ padding-right: 4rem;
3606
+ }
3195
3607
  }
3196
3608
 
3197
3609
  @media (min-width: 1536px) {
3198
3610
  }
3611
+
3612
+ /* purgecss start ignore */
3613
+
3614
+ .toggle-switch {
3615
+ position: relative;
3616
+ display: inline-block;
3617
+ width: 50px;
3618
+ height: 25px;
3619
+ }
3620
+
3621
+ .toggle-switch input[type="checkbox"] {
3622
+ display: none;
3623
+ }
3624
+
3625
+ .toggle-switch .switch {
3626
+ position: absolute;
3627
+ cursor: pointer;
3628
+ background-color: #ccc;
3629
+ border-radius: 25px;
3630
+ top: 0;
3631
+ right: 0;
3632
+ bottom: 0;
3633
+ left: 0;
3634
+ transition: background-color 0.2s ease;
3635
+ }
3636
+
3637
+ .toggle-switch .switch::before {
3638
+ position: absolute;
3639
+ content: "";
3640
+ left: 2px;
3641
+ top: 2px;
3642
+ width: 20px;
3643
+ height: 21px;
3644
+ background-color: #fff;
3645
+ border-radius: 50%;
3646
+ transition: transform 0.3s ease;
3647
+ }
3648
+
3649
+ .toggle-switch input[type="checkbox"]:checked+.switch::before {
3650
+ transform: translateX(25px);
3651
+ /* background-color: #6699cc; */
3652
+ }
3653
+
3654
+ .toggle-switch input[type="checkbox"]:checked+.switch {
3655
+ /* background-color: #336699; */
3656
+ }
3657
+
3658
+ /* purgecss end ignore */