@pelcro/react-pelcro-js 4.0.0-alpha.10 → 4.0.0-alpha.100

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.
Files changed (5) hide show
  1. package/dist/{510798e15108a39b.svg → 54860c53d60f5601.svg} +2 -2
  2. package/dist/index.cjs.js +30328 -18758
  3. package/dist/index.esm.js +30270 -18759
  4. package/dist/pelcro.css +1187 -656
  5. package/package.json +13 -8
package/dist/pelcro.css CHANGED
@@ -1,3 +1,5 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap");
2
+
1
3
  /* globals */
2
4
 
3
5
  /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
@@ -54,7 +56,7 @@ Improve consistency of default fonts in all browsers. (https://github.com/sindre
54
56
  */
55
57
 
56
58
  .pelcro-root {
57
- font-family: system-ui, -apple-system,
59
+ font-family: "Lato", system-ui, -apple-system,
58
60
  /* Firefox supports this but not yet `system-ui` */ "Segoe UI",
59
61
  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
60
62
  "Segoe UI Emoji";
@@ -107,7 +109,7 @@ Add the correct font weight in Edge and Safari.
107
109
  .pelcro-root kbd,
108
110
  .pelcro-root samp,
109
111
  .pelcro-root pre {
110
- font-family: ui-monospace, SFMono-Regular, Consolas,
112
+ font-family: "Lato", ui-monospace, SFMono-Regular, Consolas,
111
113
  "Liberation Mono", Menlo, monospace; /* 1 */
112
114
  font-size: 1em; /* 2 */
113
115
  }
@@ -326,7 +328,7 @@ Add the correct display in Chrome and Safari.
326
328
  */
327
329
 
328
330
  .pelcro-root {
329
- font-family: ui-sans-serif, system-ui, -apple-system,
331
+ font-family: "Lato", ui-sans-serif, system-ui, -apple-system,
330
332
  BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
331
333
  "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
332
334
  "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
@@ -457,8 +459,8 @@ Add the correct display in Chrome and Safari.
457
459
  .pelcro-root code,
458
460
  .pelcro-root kbd,
459
461
  .pelcro-root samp {
460
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
461
- "Liberation Mono", "Courier New", monospace;
462
+ font-family: "Lato", ui-monospace, SFMono-Regular, Menlo, Monaco,
463
+ Consolas, "Liberation Mono", "Courier New", monospace;
462
464
  }
463
465
 
464
466
  /**
@@ -548,7 +550,7 @@ Add the correct display in Chrome and Safari.
548
550
  background-size: 1.5em 1.5em;
549
551
  padding-right: 2.5rem;
550
552
  -webkit-print-color-adjust: exact;
551
- color-adjust: exact;
553
+ print-color-adjust: exact;
552
554
  }
553
555
 
554
556
  .pelcro-root [multiple] {
@@ -558,7 +560,7 @@ Add the correct display in Chrome and Safari.
558
560
  background-size: initial;
559
561
  padding-right: 0.75rem;
560
562
  -webkit-print-color-adjust: unset;
561
- color-adjust: unset;
563
+ print-color-adjust: unset;
562
564
  }
563
565
 
564
566
  .pelcro-root [type="checkbox"],
@@ -567,7 +569,7 @@ Add the correct display in Chrome and Safari.
567
569
  appearance: none;
568
570
  padding: 0;
569
571
  -webkit-print-color-adjust: exact;
570
- color-adjust: exact;
572
+ print-color-adjust: exact;
571
573
  display: inline-block;
572
574
  vertical-align: middle;
573
575
  background-origin: border-box;
@@ -703,53 +705,52 @@ Add the correct display in Chrome and Safari.
703
705
  width: 100%;
704
706
  }
705
707
 
706
- @media (min-width: 640px) {
707
- .pelcro-root .pelcro-modal {
708
+ @media (min-width: 425px){
709
+ .pelcro-root .pelcro-modal{
710
+ max-width: 425px;
711
+ }
712
+ }
713
+
714
+ @media (min-width: 640px){
715
+ .pelcro-root .pelcro-modal{
708
716
  max-width: 640px;
709
717
  }
710
718
  }
711
719
 
712
- @media (min-width: 768px) {
713
- .pelcro-root .pelcro-modal {
720
+ @media (min-width: 768px){
721
+ .pelcro-root .pelcro-modal{
714
722
  max-width: 768px;
715
723
  }
716
724
  }
717
725
 
718
- @media (min-width: 1024px) {
719
- .pelcro-root .pelcro-modal {
726
+ @media (min-width: 1024px){
727
+ .pelcro-root .pelcro-modal{
720
728
  max-width: 1024px;
721
729
  }
722
730
  }
723
731
 
724
- @media (min-width: 1280px) {
725
- .pelcro-root .pelcro-modal {
732
+ @media (min-width: 1280px){
733
+ .pelcro-root .pelcro-modal{
726
734
  max-width: 1280px;
727
735
  }
728
736
  }
729
737
 
730
- @media (min-width: 1536px) {
731
- .pelcro-root .pelcro-modal {
738
+ @media (min-width: 1536px){
739
+ .pelcro-root .pelcro-modal{
732
740
  max-width: 1536px;
733
741
  }
734
742
  }
735
743
 
736
- .pelcro-root .pelcro-modal {
744
+ .pelcro-root .pelcro-modal{
737
745
  position: absolute;
738
- top: 0px;
739
746
  display: flex;
740
747
  max-width: 36rem;
741
748
  flex-direction: column;
742
749
  align-items: center;
743
- overflow: hidden;
744
750
  border-radius: 0.5rem;
745
751
  --tw-bg-opacity: 1;
746
752
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
747
- }
748
-
749
- @media (min-width: 768px) {
750
- .pelcro-root .pelcro-modal {
751
- margin-top: 2rem;
752
- }
753
+ max-height: 100vh;
753
754
  }
754
755
 
755
756
  .pelcro-root .pelcro-modal-content {
@@ -759,22 +760,25 @@ Add the correct display in Chrome and Safari.
759
760
  .pelcro-root .pelcro-modal-header {
760
761
  position: relative;
761
762
  display: flex;
762
- min-height: 3rem;
763
+ min-height: 6rem;
763
764
  flex-direction: column;
765
+ border-top-left-radius: 0.5rem;
766
+ border-top-right-radius: 0.5rem;
764
767
  border-bottom-width: 2px;
768
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
765
769
  --tw-bg-opacity: 1;
766
770
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
767
- padding-left: 1.5rem;
768
- padding-right: 1.5rem;
771
+ padding-left: 3.5rem;
772
+ padding-right: 3.5rem;
769
773
  padding-top: 0.75rem;
770
774
  padding-bottom: 0.75rem;
771
- border-bottom-width: 1px;
775
+ border-bottom-width: 1.5px;
772
776
  }
773
777
 
774
778
  .pelcro-root .pelcro-modal-close {
775
779
  position: absolute;
776
780
  top: 50%;
777
- right: 1.25rem;
781
+ right: 1.5rem;
778
782
  z-index: 999999;
779
783
  width: 1.5rem;
780
784
  --tw-translate-x: 0;
@@ -790,47 +794,46 @@ Add the correct display in Chrome and Safari.
790
794
  background-color: transparent;
791
795
  }
792
796
 
793
- .pelcro-root .pelcro-modal-close:hover {
797
+ .pelcro-root .pelcro-modal-close:hover{
794
798
  background-color: transparent;
795
799
  }
796
800
 
797
- .pelcro-root .pelcro-modal-close:focus {
801
+ .pelcro-root .pelcro-modal-close:focus{
798
802
  background-color: transparent;
799
803
  }
800
804
 
801
- .pelcro-root .pelcro-modal-close {
805
+ .pelcro-root .pelcro-modal-close{
802
806
  --tw-text-opacity: 1;
803
807
  color: rgba(107, 114, 128, var(--tw-text-opacity));
804
808
  }
805
809
 
806
- .pelcro-root .pelcro-modal-close:hover {
810
+ .pelcro-root .pelcro-modal-close:hover{
807
811
  --tw-text-opacity: 1;
808
812
  color: rgba(0, 0, 0, var(--tw-text-opacity));
809
813
  }
810
814
 
811
- .pelcro-root .pelcro-modal-close:focus {
815
+ .pelcro-root .pelcro-modal-close:focus{
812
816
  --tw-text-opacity: 1;
813
817
  color: rgba(0, 0, 0, var(--tw-text-opacity));
814
818
  }
815
819
 
816
- .pelcro-root .pelcro-modal-close:hover {
820
+ .pelcro-root .pelcro-modal-close:hover{
817
821
  --tw-shadow: 0 0 #0000;
818
822
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
819
823
  }
820
824
 
821
825
  .pelcro-root .pelcro-modal-body {
822
826
  --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;
827
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
828
+ padding-left: 1rem;
829
+ padding-right: 1rem;
830
+ padding-top: 1.5rem;
828
831
  }
829
832
 
830
- @media (min-width: 768px) {
831
- .pelcro-root .pelcro-modal-body {
832
- padding-left: 2rem;
833
- padding-right: 2rem;
833
+ @media (min-width: 768px){
834
+ .pelcro-root .pelcro-modal-body{
835
+ padding-left: 3.5rem;
836
+ padding-right: 3.5rem;
834
837
  }
835
838
  }
836
839
 
@@ -839,36 +842,53 @@ Add the correct display in Chrome and Safari.
839
842
  flex-direction: column;
840
843
  align-items: center;
841
844
  justify-content: center;
845
+ border-bottom-right-radius: 0.5rem;
846
+ border-bottom-left-radius: 0.5rem;
842
847
  --tw-bg-opacity: 1;
843
- background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
844
- padding: 1rem;
845
- padding-bottom: 2.75rem;
848
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
849
+ padding-left: 1rem;
850
+ padding-right: 1rem;
851
+ padding-top: 2rem;
852
+ padding-bottom: 2rem;
846
853
  font-size: 0.875rem;
847
854
  line-height: 1.25rem;
848
855
  }
849
856
 
850
857
  .pelcro-root .pelcro-input-wrapper {
851
- margin-bottom: 1.5rem;
858
+ position: relative;
859
+ margin-bottom: 2rem;
852
860
  width: 100%;
853
861
  }
854
862
 
855
863
  .pelcro-root .pelcro-input-label {
856
- margin-bottom: 0.25rem;
864
+ position: absolute;
865
+ top: -0.5rem;
866
+ left: 0.5rem;
857
867
  display: inline-flex;
868
+ --tw-bg-opacity: 1;
869
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
870
+ padding-left: 0.25rem;
871
+ padding-right: 0.25rem;
872
+ font-size: 0.75rem;
873
+ line-height: 1rem;
858
874
  font-weight: 500;
859
875
  --tw-text-opacity: 1;
860
- color: rgba(17, 24, 39, var(--tw-text-opacity));
876
+ color: rgba(156, 163, 175, var(--tw-text-opacity));
877
+ transition-property: all;
878
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
879
+ transition-duration: 150ms;
861
880
  }
862
881
 
863
882
  .pelcro-root .pelcro-input-error {
864
883
  position: absolute;
884
+ left: 0.75rem;
865
885
  margin-top: 0.125rem;
866
886
  height: auto;
867
- font-size: 0.875rem;
868
- line-height: 1.25rem;
887
+ font-size: 0.75rem;
888
+ line-height: 1rem;
869
889
  text-transform: none;
870
890
  --tw-text-opacity: 1;
871
- color: rgba(180, 48, 43, var(--tw-text-opacity));
891
+ color: rgba(209, 70, 65, var(--tw-text-opacity));
872
892
  }
873
893
 
874
894
  .pelcro-root .pelcro-input-invalid {
@@ -876,19 +896,19 @@ Add the correct display in Chrome and Safari.
876
896
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
877
897
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
878
898
  --tw-ring-opacity: 1;
879
- --tw-ring-color: rgba(209, 70, 65, var(--tw-ring-opacity));
899
+ --tw-ring-color: rgba(219, 110, 106, var(--tw-ring-opacity));
880
900
  }
881
901
 
882
902
  .pelcro-root .pelcro-input-field {
883
- min-height: 3rem;
903
+ min-height: 1rem;
884
904
  width: 100%;
885
905
  }
886
906
 
887
- .pelcro-root .pelcro-input-field:disabled {
907
+ .pelcro-root .pelcro-input-field:disabled{
888
908
  cursor: not-allowed;
889
909
  }
890
910
 
891
- .pelcro-root .pelcro-input-field {
911
+ .pelcro-root .pelcro-input-field{
892
912
  -webkit-appearance: none;
893
913
  appearance: none;
894
914
  border-radius: 0.25rem;
@@ -897,29 +917,94 @@ Add the correct display in Chrome and Safari.
897
917
  --tw-border-opacity: 1;
898
918
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
899
919
  --tw-bg-opacity: 1;
900
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
920
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
901
921
  }
902
922
 
903
- .pelcro-root .pelcro-input-field:disabled {
923
+ .pelcro-root .pelcro-input-field:disabled{
904
924
  --tw-bg-opacity: 1;
905
925
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
906
926
  }
907
927
 
908
- .pelcro-root .pelcro-input-field {
928
+ .pelcro-root .pelcro-input-field{
909
929
  padding: 0.5rem;
910
930
  --tw-text-opacity: 1;
911
931
  color: rgba(17, 24, 39, var(--tw-text-opacity));
932
+ }
933
+
934
+ .pelcro-root .pelcro-input-field::placeholder{
935
+ color: transparent;
936
+ }
937
+
938
+ .pelcro-root .pelcro-input-field{
912
939
  outline: 2px solid transparent;
913
940
  outline-offset: 2px;
914
941
  }
915
942
 
916
- .pelcro-root .pelcro-input-field:focus {
943
+ .pelcro-root .pelcro-input-field:focus{
917
944
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
918
945
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
919
946
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
920
947
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
921
948
  }
922
949
 
950
+ .pelcro-root
951
+ .pelcro-input-field:placeholder-shown
952
+ ~ .pelcro-input-label {
953
+ top: 0.625rem;
954
+ left: 0.5rem;
955
+ font-size: 0.875rem;
956
+ line-height: 1.25rem;
957
+ font-weight: 500;
958
+ --tw-text-opacity: 1;
959
+ color: rgba(156, 163, 175, var(--tw-text-opacity));
960
+ }
961
+
962
+ .pelcro-root .pelcro-input-field:focus ~ .pelcro-input-label {
963
+ top: -0.5rem;
964
+ --tw-bg-opacity: 1;
965
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
966
+ padding-left: 0.25rem;
967
+ padding-right: 0.25rem;
968
+ font-size: 0.75rem;
969
+ line-height: 1rem;
970
+ transition-property: all;
971
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
972
+ transition-duration: 150ms;
973
+ }
974
+
975
+ .pelcro-root .pelcro-input-field:disabled ~ .pelcro-input-label {
976
+ display: none;
977
+ }
978
+
979
+ /* .pelcro-root .pelcro-input-card-number-label,
980
+ .pelcro-root .pelcro-input-cvc-number-label,
981
+ .pelcro-root .pelcro-input-expiry-date-label {
982
+ @apply plc-inline-flex plc-text-gray-400 plc-font-medium plc-absolute plc--top-2 plc-left-2 plc-text-xs plc-transition-all plc-bg-white plc-px-1;
983
+ }
984
+
985
+ .pelcro-root
986
+ #pelcro-input-card-number:placeholder-shown
987
+ ~ .pelcro-input-card-number-label,
988
+ .pelcro-root
989
+ #pelcro-input-cvc-number:placeholder-shown
990
+ ~ .pelcro-input-cvc-number-label,
991
+ .pelcro-root
992
+ #pelcro-input-expiry-date:placeholder-shown
993
+ ~ .pelcro-input-expiry-date-label {
994
+ @apply plc-text-gray-400 plc-font-medium plc-top-2.5 plc-left-2 plc-text-sm;
995
+ }
996
+ .pelcro-root
997
+ #pelcro-input-card-number:focus
998
+ ~ .pelcro-input-card-number-label,
999
+ .pelcro-root
1000
+ #pelcro-input-cvc-number:focus
1001
+ ~ .pelcro-input-cvc-number-label,
1002
+ .pelcro-root
1003
+ #pelcro-input-expiry-date:focus
1004
+ ~ .pelcro-input-expiry-date-label {
1005
+ @apply plc-text-xs plc--top-2 plc-transition-all plc-bg-white plc-px-1;
1006
+ } */
1007
+
923
1008
  .pelcro-root .pelcro-checkbox-label {
924
1009
  padding-left: 0.5rem;
925
1010
  --tw-text-opacity: 1;
@@ -932,28 +1017,28 @@ Add the correct display in Chrome and Safari.
932
1017
  cursor: pointer;
933
1018
  }
934
1019
 
935
- .pelcro-root .pelcro-checkbox:disabled {
1020
+ .pelcro-root .pelcro-checkbox:disabled{
936
1021
  cursor: not-allowed;
937
1022
  }
938
1023
 
939
- .pelcro-root .pelcro-checkbox {
1024
+ .pelcro-root .pelcro-checkbox{
940
1025
  border-radius: 0.125rem;
941
1026
  }
942
1027
 
943
- .pelcro-root .pelcro-checkbox:checked {
1028
+ .pelcro-root .pelcro-checkbox:checked{
944
1029
  border-color: transparent;
945
1030
  }
946
1031
 
947
- .pelcro-root .pelcro-checkbox {
1032
+ .pelcro-root .pelcro-checkbox{
948
1033
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
949
1034
  }
950
1035
 
951
- .pelcro-root .pelcro-checkbox:disabled {
1036
+ .pelcro-root .pelcro-checkbox:disabled{
952
1037
  --tw-text-opacity: 1;
953
1038
  color: rgba(209, 213, 219, var(--tw-text-opacity));
954
1039
  }
955
1040
 
956
- .pelcro-root .pelcro-checkbox:focus {
1041
+ .pelcro-root .pelcro-checkbox:focus{
957
1042
  outline: 2px solid transparent;
958
1043
  outline-offset: 2px;
959
1044
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -981,11 +1066,11 @@ Add the correct display in Chrome and Safari.
981
1066
  width: max-content;
982
1067
  }
983
1068
 
984
- .pelcro-root .pelcro-button-solid:disabled {
1069
+ .pelcro-root .pelcro-button-solid:disabled{
985
1070
  cursor: not-allowed;
986
1071
  }
987
1072
 
988
- .pelcro-root .pelcro-button-solid {
1073
+ .pelcro-root .pelcro-button-solid{
989
1074
  align-items: center;
990
1075
  justify-content: center;
991
1076
  justify-items: center;
@@ -994,20 +1079,20 @@ Add the correct display in Chrome and Safari.
994
1079
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
995
1080
  }
996
1081
 
997
- .pelcro-root .pelcro-button-solid:hover {
1082
+ .pelcro-root .pelcro-button-solid:hover{
998
1083
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
999
1084
  }
1000
1085
 
1001
- .pelcro-root .pelcro-button-solid:focus {
1086
+ .pelcro-root .pelcro-button-solid:focus{
1002
1087
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1003
1088
  }
1004
1089
 
1005
- .pelcro-root .pelcro-button-solid:disabled {
1090
+ .pelcro-root .pelcro-button-solid:disabled{
1006
1091
  --tw-bg-opacity: 1;
1007
1092
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
1008
1093
  }
1009
1094
 
1010
- .pelcro-root .pelcro-button-solid {
1095
+ .pelcro-root .pelcro-button-solid{
1011
1096
  padding-left: 1.5rem;
1012
1097
  padding-right: 1.5rem;
1013
1098
  padding-top: 0.5rem;
@@ -1019,27 +1104,27 @@ Add the correct display in Chrome and Safari.
1019
1104
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1020
1105
  }
1021
1106
 
1022
- .pelcro-root .pelcro-button-solid:hover {
1107
+ .pelcro-root .pelcro-button-solid:hover{
1023
1108
  --tw-text-opacity: 1;
1024
1109
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1025
1110
  }
1026
1111
 
1027
- .pelcro-root .pelcro-button-solid:focus {
1112
+ .pelcro-root .pelcro-button-solid:focus{
1028
1113
  --tw-text-opacity: 1;
1029
1114
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1030
1115
  }
1031
1116
 
1032
- .pelcro-root .pelcro-button-solid:disabled {
1117
+ .pelcro-root .pelcro-button-solid:disabled{
1033
1118
  --tw-text-opacity: 1;
1034
1119
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1035
1120
  }
1036
1121
 
1037
- .pelcro-root .pelcro-button-solid:hover {
1122
+ .pelcro-root .pelcro-button-solid:hover{
1038
1123
  --tw-shadow: 0 0 #0000;
1039
1124
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1040
1125
  }
1041
1126
 
1042
- .pelcro-root .pelcro-button-solid:focus {
1127
+ .pelcro-root .pelcro-button-solid:focus{
1043
1128
  outline: 2px solid transparent;
1044
1129
  outline-offset: 2px;
1045
1130
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1053,11 +1138,11 @@ Add the correct display in Chrome and Safari.
1053
1138
  width: max-content;
1054
1139
  }
1055
1140
 
1056
- .pelcro-root .pelcro-button-outline:disabled {
1141
+ .pelcro-root .pelcro-button-outline:disabled{
1057
1142
  cursor: not-allowed;
1058
1143
  }
1059
1144
 
1060
- .pelcro-root .pelcro-button-outline {
1145
+ .pelcro-root .pelcro-button-outline{
1061
1146
  align-items: center;
1062
1147
  justify-content: center;
1063
1148
  justify-items: center;
@@ -1066,28 +1151,28 @@ Add the correct display in Chrome and Safari.
1066
1151
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1067
1152
  }
1068
1153
 
1069
- .pelcro-root .pelcro-button-outline:disabled {
1154
+ .pelcro-root .pelcro-button-outline:disabled{
1070
1155
  --tw-border-opacity: 1;
1071
1156
  border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1072
1157
  }
1073
1158
 
1074
- .pelcro-root .pelcro-button-outline {
1159
+ .pelcro-root .pelcro-button-outline{
1075
1160
  background-color: transparent;
1076
1161
  }
1077
1162
 
1078
- .pelcro-root .pelcro-button-outline:hover {
1163
+ .pelcro-root .pelcro-button-outline:hover{
1079
1164
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1080
1165
  }
1081
1166
 
1082
- .pelcro-root .pelcro-button-outline:focus {
1167
+ .pelcro-root .pelcro-button-outline:focus{
1083
1168
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1084
1169
  }
1085
1170
 
1086
- .pelcro-root .pelcro-button-outline:disabled {
1171
+ .pelcro-root .pelcro-button-outline:disabled{
1087
1172
  background-color: transparent;
1088
1173
  }
1089
1174
 
1090
- .pelcro-root .pelcro-button-outline {
1175
+ .pelcro-root .pelcro-button-outline{
1091
1176
  padding-left: 1.5rem;
1092
1177
  padding-right: 1.5rem;
1093
1178
  padding-top: 0.5rem;
@@ -1098,27 +1183,27 @@ Add the correct display in Chrome and Safari.
1098
1183
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1099
1184
  }
1100
1185
 
1101
- .pelcro-root .pelcro-button-outline:hover {
1186
+ .pelcro-root .pelcro-button-outline:hover{
1102
1187
  --tw-text-opacity: 1;
1103
1188
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1104
1189
  }
1105
1190
 
1106
- .pelcro-root .pelcro-button-outline:focus {
1191
+ .pelcro-root .pelcro-button-outline:focus{
1107
1192
  --tw-text-opacity: 1;
1108
1193
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1109
1194
  }
1110
1195
 
1111
- .pelcro-root .pelcro-button-outline:disabled {
1196
+ .pelcro-root .pelcro-button-outline:disabled{
1112
1197
  --tw-text-opacity: 1;
1113
1198
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1114
1199
  }
1115
1200
 
1116
- .pelcro-root .pelcro-button-outline:hover {
1201
+ .pelcro-root .pelcro-button-outline:hover{
1117
1202
  --tw-shadow: 0 0 #0000;
1118
1203
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1119
1204
  }
1120
1205
 
1121
- .pelcro-root .pelcro-button-outline:focus {
1206
+ .pelcro-root .pelcro-button-outline:focus{
1122
1207
  outline: 2px solid transparent;
1123
1208
  outline-offset: 2px;
1124
1209
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1133,35 +1218,35 @@ Add the correct display in Chrome and Safari.
1133
1218
  width: 2rem;
1134
1219
  }
1135
1220
 
1136
- .pelcro-root .pelcro-button-icon:disabled {
1221
+ .pelcro-root .pelcro-button-icon:disabled{
1137
1222
  cursor: not-allowed;
1138
1223
  }
1139
1224
 
1140
- .pelcro-root .pelcro-button-icon {
1225
+ .pelcro-root .pelcro-button-icon{
1141
1226
  align-items: center;
1142
1227
  justify-content: center;
1143
1228
  border-radius: 9999px;
1144
1229
  border-width: 0px;
1145
1230
  }
1146
1231
 
1147
- .pelcro-root .pelcro-button-icon:hover {
1232
+ .pelcro-root .pelcro-button-icon:hover{
1148
1233
  --tw-bg-opacity: 1;
1149
1234
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1150
1235
  --tw-text-opacity: 1;
1151
1236
  color: rgba(75, 85, 99, var(--tw-text-opacity));
1152
1237
  }
1153
1238
 
1154
- .pelcro-root .pelcro-button-icon:disabled {
1239
+ .pelcro-root .pelcro-button-icon:disabled{
1155
1240
  --tw-text-opacity: 1;
1156
1241
  color: rgba(209, 213, 219, var(--tw-text-opacity));
1157
1242
  }
1158
1243
 
1159
- .pelcro-root .pelcro-button-icon:hover {
1244
+ .pelcro-root .pelcro-button-icon:hover{
1160
1245
  --tw-shadow: 0 0 #0000;
1161
1246
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1162
1247
  }
1163
1248
 
1164
- .pelcro-root .pelcro-button-icon:focus {
1249
+ .pelcro-root .pelcro-button-icon:focus{
1165
1250
  outline: 2px solid transparent;
1166
1251
  outline-offset: 2px;
1167
1252
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1175,11 +1260,11 @@ Add the correct display in Chrome and Safari.
1175
1260
  width: max-content;
1176
1261
  }
1177
1262
 
1178
- .pelcro-root .pelcro-button-ghost:disabled {
1263
+ .pelcro-root .pelcro-button-ghost:disabled{
1179
1264
  cursor: not-allowed;
1180
1265
  }
1181
1266
 
1182
- .pelcro-root .pelcro-button-ghost {
1267
+ .pelcro-root .pelcro-button-ghost{
1183
1268
  align-items: center;
1184
1269
  justify-content: center;
1185
1270
  justify-items: center;
@@ -1188,21 +1273,21 @@ Add the correct display in Chrome and Safari.
1188
1273
  background-color: transparent;
1189
1274
  }
1190
1275
 
1191
- .pelcro-root .pelcro-button-ghost:hover {
1276
+ .pelcro-root .pelcro-button-ghost:hover{
1192
1277
  --tw-bg-opacity: 1;
1193
1278
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
1194
1279
  }
1195
1280
 
1196
- .pelcro-root .pelcro-button-ghost:focus {
1281
+ .pelcro-root .pelcro-button-ghost:focus{
1197
1282
  --tw-bg-opacity: 1;
1198
1283
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
1199
1284
  }
1200
1285
 
1201
- .pelcro-root .pelcro-button-ghost:disabled {
1286
+ .pelcro-root .pelcro-button-ghost:disabled{
1202
1287
  background-color: transparent;
1203
1288
  }
1204
1289
 
1205
- .pelcro-root .pelcro-button-ghost {
1290
+ .pelcro-root .pelcro-button-ghost{
1206
1291
  padding: 0.25rem;
1207
1292
  font-size: 0.75rem;
1208
1293
  line-height: 1rem;
@@ -1211,27 +1296,27 @@ Add the correct display in Chrome and Safari.
1211
1296
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1212
1297
  }
1213
1298
 
1214
- .pelcro-root .pelcro-button-ghost:hover {
1299
+ .pelcro-root .pelcro-button-ghost:hover{
1215
1300
  --tw-text-opacity: 1;
1216
1301
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1217
1302
  }
1218
1303
 
1219
- .pelcro-root .pelcro-button-ghost:focus {
1304
+ .pelcro-root .pelcro-button-ghost:focus{
1220
1305
  --tw-text-opacity: 1;
1221
1306
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1222
1307
  }
1223
1308
 
1224
- .pelcro-root .pelcro-button-ghost:disabled {
1309
+ .pelcro-root .pelcro-button-ghost:disabled{
1225
1310
  --tw-text-opacity: 1;
1226
1311
  color: rgba(209, 213, 219, var(--tw-text-opacity));
1227
1312
  }
1228
1313
 
1229
- .pelcro-root .pelcro-button-ghost:hover {
1314
+ .pelcro-root .pelcro-button-ghost:hover{
1230
1315
  --tw-shadow: 0 0 #0000;
1231
1316
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1232
1317
  }
1233
1318
 
1234
- .pelcro-root .pelcro-button-ghost:focus {
1319
+ .pelcro-root .pelcro-button-ghost:focus{
1235
1320
  outline: 2px solid transparent;
1236
1321
  outline-offset: 2px;
1237
1322
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1253,7 +1338,7 @@ Add the correct display in Chrome and Safari.
1253
1338
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1254
1339
  }
1255
1340
 
1256
- .pelcro-root .pelcro-link:hover {
1341
+ .pelcro-root .pelcro-link:hover{
1257
1342
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1258
1343
  }
1259
1344
 
@@ -1271,35 +1356,35 @@ Add the correct display in Chrome and Safari.
1271
1356
  cursor: pointer;
1272
1357
  }
1273
1358
 
1274
- .pelcro-root .pelcro-radio:disabled {
1359
+ .pelcro-root .pelcro-radio:disabled{
1275
1360
  cursor: not-allowed;
1276
1361
  }
1277
1362
 
1278
- .pelcro-root .pelcro-radio {
1363
+ .pelcro-root .pelcro-radio{
1279
1364
  border-radius: 9999px;
1280
1365
  border-style: none;
1281
1366
  }
1282
1367
 
1283
- .pelcro-root .pelcro-radio:checked {
1368
+ .pelcro-root .pelcro-radio:checked{
1284
1369
  border-color: transparent;
1285
1370
  }
1286
1371
 
1287
- .pelcro-root .pelcro-radio {
1372
+ .pelcro-root .pelcro-radio{
1288
1373
  background-image: none;
1289
1374
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1290
1375
  }
1291
1376
 
1292
- .pelcro-root .pelcro-radio:disabled {
1377
+ .pelcro-root .pelcro-radio:disabled{
1293
1378
  --tw-text-opacity: 1;
1294
1379
  color: rgba(209, 213, 219, var(--tw-text-opacity));
1295
1380
  }
1296
1381
 
1297
- .pelcro-root .pelcro-radio:focus {
1382
+ .pelcro-root .pelcro-radio:focus{
1298
1383
  outline: 2px solid transparent;
1299
1384
  outline-offset: 2px;
1300
1385
  }
1301
1386
 
1302
- .pelcro-root .pelcro-radio {
1387
+ .pelcro-root .pelcro-radio{
1303
1388
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1304
1389
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1305
1390
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
@@ -1312,12 +1397,12 @@ Add the correct display in Chrome and Safari.
1312
1397
  }
1313
1398
 
1314
1399
  .pelcro-root .pelcro-alert-error {
1315
- margin-bottom: 0.5rem;
1400
+ margin-bottom: 1rem;
1316
1401
  display: flex;
1317
1402
  width: 100%;
1318
1403
  align-items: center;
1319
1404
  justify-content: space-between;
1320
- border-radius: 0.125rem;
1405
+ border-radius: 0.375rem;
1321
1406
  --tw-bg-opacity: 1;
1322
1407
  background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
1323
1408
  padding-left: 1rem;
@@ -1332,12 +1417,12 @@ Add the correct display in Chrome and Safari.
1332
1417
  }
1333
1418
 
1334
1419
  .pelcro-root .pelcro-alert-success {
1335
- margin-bottom: 0.5rem;
1420
+ margin-bottom: 1rem;
1336
1421
  display: flex;
1337
1422
  width: 100%;
1338
1423
  align-items: center;
1339
1424
  justify-content: space-between;
1340
- border-radius: 0.125rem;
1425
+ border-radius: 0.375rem;
1341
1426
  --tw-bg-opacity: 1;
1342
1427
  background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
1343
1428
  padding-left: 1rem;
@@ -1370,24 +1455,24 @@ Add the correct display in Chrome and Safari.
1370
1455
  background-color: transparent;
1371
1456
  }
1372
1457
 
1373
- .pelcro-root .pelcro-alert-close:hover {
1458
+ .pelcro-root .pelcro-alert-close:hover{
1374
1459
  background-color: transparent;
1375
1460
  }
1376
1461
 
1377
- .pelcro-root .pelcro-alert-close:focus {
1462
+ .pelcro-root .pelcro-alert-close:focus{
1378
1463
  background-color: transparent;
1379
1464
  }
1380
1465
 
1381
- .pelcro-root .pelcro-alert-close {
1466
+ .pelcro-root .pelcro-alert-close{
1382
1467
  fill: currentColor;
1383
1468
  color: currentColor;
1384
1469
  }
1385
1470
 
1386
- .pelcro-root .pelcro-alert-close:hover {
1471
+ .pelcro-root .pelcro-alert-close:hover{
1387
1472
  color: currentColor;
1388
1473
  }
1389
1474
 
1390
- .pelcro-root .pelcro-alert-close:focus {
1475
+ .pelcro-root .pelcro-alert-close:focus{
1391
1476
  color: currentColor;
1392
1477
  }
1393
1478
 
@@ -1411,13 +1496,13 @@ Add the correct display in Chrome and Safari.
1411
1496
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1412
1497
  }
1413
1498
 
1414
- .pelcro-root .pelcro-notification-confirm > :not([hidden]) ~ :not([hidden]) {
1499
+ .pelcro-root .pelcro-notification-confirm > :not([hidden]) ~ :not([hidden]){
1415
1500
  --tw-space-x-reverse: 0;
1416
1501
  margin-right: calc(1rem * var(--tw-space-x-reverse));
1417
1502
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
1418
1503
  }
1419
1504
 
1420
- .pelcro-root .pelcro-notification-confirm {
1505
+ .pelcro-root .pelcro-notification-confirm{
1421
1506
  --tw-bg-opacity: 1;
1422
1507
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1423
1508
  font-size: 0.875rem;
@@ -1425,13 +1510,13 @@ Add the correct display in Chrome and Safari.
1425
1510
  font-weight: 600;
1426
1511
  }
1427
1512
 
1428
- .pelcro-root .pelcro-notification-loading > :not([hidden]) ~ :not([hidden]) {
1513
+ .pelcro-root .pelcro-notification-loading > :not([hidden]) ~ :not([hidden]){
1429
1514
  --tw-space-x-reverse: 0;
1430
1515
  margin-right: calc(1rem * var(--tw-space-x-reverse));
1431
1516
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
1432
1517
  }
1433
1518
 
1434
- .pelcro-root .pelcro-notification-loading {
1519
+ .pelcro-root .pelcro-notification-loading{
1435
1520
  font-size: 0.875rem;
1436
1521
  line-height: 1.25rem;
1437
1522
  font-weight: 600;
@@ -1486,18 +1571,11 @@ Add the correct display in Chrome and Safari.
1486
1571
  display: none;
1487
1572
  }
1488
1573
 
1489
- .pelcro-root .pelcro-tooltip-container:hover .pelcro-tooltip, .pelcro-root .pelcro-tooltip:hover {
1574
+ .pelcro-root .pelcro-tooltip-container:hover .pelcro-tooltip, .pelcro-root .pelcro-tooltip:hover{
1490
1575
  z-index: 50;
1491
1576
  display: block;
1492
1577
  }
1493
1578
 
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;
1499
- }
1500
-
1501
1579
  .pelcro-root .pelcro-shop-product-image {
1502
1580
  max-width: 13rem;
1503
1581
  }
@@ -1591,7 +1669,7 @@ Add the correct display in Chrome and Safari.
1591
1669
  height: 0.375rem;
1592
1670
  }
1593
1671
 
1594
- .pelcro-root input[type="range"]::-ms-fill-lower, .pelcro-root input[type="range"]::-ms-fill-upper {
1672
+ .pelcro-root input[type="range"]::-ms-fill-lower, .pelcro-root input[type="range"]::-ms-fill-upper{
1595
1673
  border-radius: 0.375rem;
1596
1674
  border-style: none;
1597
1675
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
@@ -1615,7 +1693,7 @@ Add the correct display in Chrome and Safari.
1615
1693
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1616
1694
  }
1617
1695
 
1618
- .pelcro-root input[type="range"]:focus::-ms-fill-lower, .pelcro-root input[type="range"]:focus::-ms-fill-upper {
1696
+ .pelcro-root input[type="range"]:focus::-ms-fill-lower, .pelcro-root input[type="range"]:focus::-ms-fill-upper{
1619
1697
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1620
1698
  }
1621
1699
 
@@ -1640,77 +1718,80 @@ Add the correct display in Chrome and Safari.
1640
1718
  display: flex !important;
1641
1719
  }
1642
1720
 
1643
- .pelcro-root .pelcro-select-plan-radio {
1644
- margin-top: 0.4rem;
1645
- }
1646
-
1647
- .pelcro-root .pelcro-product:before {
1721
+ .pelcro-root .productTabs:before {
1648
1722
  content: "";
1723
+ width: calc(100% - 5.5rem);
1724
+ left: 2.75rem;
1649
1725
  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%));
1726
+ bottom: 0.125rem;
1727
+ height: 1px;
1728
+ --tw-bg-opacity: 1;
1729
+ background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
1655
1730
  }
1656
1731
 
1657
- /* Firefox */
1658
-
1659
- .pelcro-root .productTabs .tabs {
1660
- padding-bottom: 5px;
1661
- scrollbar-width: thin;
1662
- scrollbar-color: grey;
1732
+ .pelcro-root .selectedProduct img {
1733
+ max-width: 150px;
1734
+ height: auto;
1663
1735
  }
1664
1736
 
1665
- /* Chrome, Edge, and Safari */
1666
-
1667
- .pelcro-root .productTabs .tabs::-webkit-scrollbar {
1668
- width: 15px;
1669
- height: 5px;
1737
+ .pelcro-root .pelcro-select-plan-wrapper:hover, .pelcro-root .pelcro-select-product-wrapper:hover{
1738
+ border-width: 2px;
1739
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1670
1740
  }
1671
1741
 
1672
- .pelcro-root .productTabs .tabs::-webkit-scrollbar-track {
1673
- background: lightGrey;
1674
- border-radius: 5px;
1742
+ .pelcro-root .pelcro-select-plan-wrapper:hover,
1743
+ .pelcro-root .pelcro-select-product-wrapper:hover{
1744
+ transform: scale(1.05);
1745
+ transition: all 0.2s ease-out;
1746
+ box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
1675
1747
  }
1676
1748
 
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;
1749
+ .pelcro-root .pelcro-select-plan-wrapper,
1750
+ .pelcro-root .pelcro-select-product-wrapper {
1751
+ transition: all 0.2s ease-in-out;
1680
1752
  }
1681
1753
 
1682
- .pelcro-root .productTabs .tabs li:first-child {
1683
- margin-left: auto;
1754
+ .pelcro-root .loginOptions.threeColumns {
1755
+ display: flex;
1756
+ flex-wrap: wrap;
1757
+ justify-content: center;
1684
1758
  }
1685
1759
 
1686
- .pelcro-root .productTabs .tabs li:last-child {
1687
- margin-right: auto;
1760
+ .pelcro-root .loginOptions.threeColumns li {
1761
+ flex: 1;
1762
+ min-width: 140px;
1763
+ margin-bottom: 10px;
1688
1764
  }
1689
1765
 
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%));
1766
+ .pelcro-root .loginOptions.threeColumns li:first-child {
1767
+ margin-right: 10px;
1692
1768
  }
1693
1769
 
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%));
1770
+ .pelcro-root
1771
+ .loginOptions.threeColumns
1772
+ li:nth-child(2):not(:last-child) {
1773
+ margin-right: 10px;
1703
1774
  }
1704
1775
 
1705
- .pelcro-root .selectedProduct img {
1706
- max-width: 150px;
1707
- height: auto;
1776
+ .pelcro-root .loginOptions.twoColumns {
1777
+ display: grid;
1778
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1779
+ gap: 10px;
1708
1780
  }
1709
1781
 
1710
1782
  .pelcro-user-profile-picture:hover {
1711
1783
  filter: brightness(0.8);
1712
1784
  }
1713
1785
 
1786
+ #pelcro-view-dashboard-submenus {
1787
+ /* From https://css.glass */
1788
+ background: rgba(255, 255, 255, 0.12);
1789
+ /* border-radius: 16px; */
1790
+ /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */
1791
+ backdrop-filter: blur(3.5px);
1792
+ -webkit-backdrop-filter: blur(3.5px);
1793
+ }
1794
+
1714
1795
  /* used by multiple input sub-components */
1715
1796
 
1716
1797
  /* Slider */
@@ -1729,7 +1810,9 @@ Add the correct display in Chrome and Safari.
1729
1810
  display: block;
1730
1811
  overflow: hidden;
1731
1812
  padding: 0;
1732
- margin: 0 -10px;
1813
+ padding-top: 0.75rem;
1814
+ padding-bottom: 0.75rem;
1815
+ /* margin: 0 -10px; */
1733
1816
  }
1734
1817
 
1735
1818
  .pelcro-root .slick-list:focus {
@@ -1768,7 +1851,7 @@ Add the correct display in Chrome and Safari.
1768
1851
  }
1769
1852
 
1770
1853
  .pelcro-root .slick-slide {
1771
- display: flex;
1854
+ display: flex !important;
1772
1855
  align-self: stretch;
1773
1856
  height: unset;
1774
1857
  margin: 0 10px;
@@ -1812,8 +1895,8 @@ Add the correct display in Chrome and Safari.
1812
1895
  }
1813
1896
 
1814
1897
  .pelcro-root .slick-disabled {
1815
- opacity: 0.5;
1816
- cursor: not-allowed;
1898
+ opacity: 0;
1899
+ cursor: auto;
1817
1900
  }
1818
1901
 
1819
1902
  .pelcro-root .slick-dots {
@@ -1821,28 +1904,61 @@ Add the correct display in Chrome and Safari.
1821
1904
  display: flex !important;
1822
1905
  align-items: center;
1823
1906
  justify-content: center;
1907
+ flex-wrap: wrap;
1824
1908
  }
1825
1909
 
1826
1910
  .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;
1911
+ margin: 0 2px;
1836
1912
  }
1837
1913
 
1838
- .pelcro-root .slick-dots li.slick-active {
1914
+ .pelcro-root .slick-dots li.slick-active span {
1839
1915
  border-color: grey;
1916
+ background-color: hsl(
1917
+ var(--plc-primary-hue),
1918
+ var(--plc-primary-saturation),
1919
+ var(--plc-primary-lightness)
1920
+ );
1840
1921
  }
1841
1922
 
1842
1923
  .pelcro-root .slick-arrow {
1843
1924
  outline: none !important;
1844
1925
  }
1845
1926
 
1927
+ .custom-single-value {
1928
+ display: flex;
1929
+ align-items: center;
1930
+ }
1931
+
1932
+ .custom-option {
1933
+ display: flex;
1934
+ align-items: center;
1935
+ padding: 5px;
1936
+ }
1937
+
1938
+ .custom-option img {
1939
+ margin-right: 10px;
1940
+ }
1941
+
1942
+ .css-hlgwow {
1943
+ display: flex !important;
1944
+ }
1945
+
1946
+ .custom-option {
1947
+ display: flex;
1948
+ align-items: center;
1949
+ cursor: pointer; /* Show pointer cursor on hover */
1950
+ padding: 10px; /* Add padding for better hover area */
1951
+ }
1952
+
1953
+ .custom-option:hover {
1954
+ background-color: #f0f0f0; /* Highlight background on hover */
1955
+ }
1956
+
1957
+ .custom-single-value {
1958
+ display: flex;
1959
+ align-items: center;
1960
+ }
1961
+
1846
1962
  /*
1847
1963
  styling is copied from react-easy-crop/react-easy-crop.css
1848
1964
  in order to scope selectors under pelcro-root
@@ -1917,527 +2033,639 @@ in order to scope selectors under pelcro-root
1917
2033
  border-right: 0;
1918
2034
  }
1919
2035
 
2036
+ apple-pay-button {
2037
+ --apple-pay-button-width: 100%;
2038
+ --apple-pay-button-height: 48px;
2039
+ --apple-pay-button-border-radius: 0.25rem;
2040
+ --apple-pay-button-padding: 0px 0px;
2041
+ --apple-pay-button-box-sizing: border-box;
2042
+ }
2043
+
1920
2044
  /* utilities */
1921
2045
 
1922
- .pelcro-root .plc-pointer-events-none {
2046
+ .pelcro-root .plc-pointer-events-none{
1923
2047
  pointer-events: none;
1924
2048
  }
1925
2049
 
1926
- .pelcro-root .plc-fixed {
2050
+ .pelcro-root .plc-fixed{
1927
2051
  position: fixed;
1928
2052
  }
1929
2053
 
1930
- .pelcro-root .plc-absolute {
2054
+ .pelcro-root .plc-absolute{
1931
2055
  position: absolute;
1932
2056
  }
1933
2057
 
1934
- .pelcro-root .plc-relative {
2058
+ .pelcro-root .plc-relative{
1935
2059
  position: relative;
1936
2060
  }
1937
2061
 
1938
- .pelcro-root .plc-inset-0 {
2062
+ .pelcro-root .plc-inset-0{
1939
2063
  top: 0px;
1940
2064
  right: 0px;
1941
2065
  bottom: 0px;
1942
2066
  left: 0px;
1943
2067
  }
1944
2068
 
1945
- .pelcro-root .plc-inset-y-0 {
2069
+ .pelcro-root .plc-inset-y-0{
1946
2070
  top: 0px;
1947
2071
  bottom: 0px;
1948
2072
  }
1949
2073
 
1950
- .pelcro-root .plc-top-0 {
2074
+ .pelcro-root .plc-top-0{
1951
2075
  top: 0px;
1952
2076
  }
1953
2077
 
1954
- .pelcro-root .plc-top-1 {
2078
+ .pelcro-root .plc-top-1{
1955
2079
  top: 0.25rem;
1956
2080
  }
1957
2081
 
1958
- .pelcro-root .plc-top-5 {
2082
+ .pelcro-root .plc-top-4{
2083
+ top: 1rem;
2084
+ }
2085
+
2086
+ .pelcro-root .plc-top-5{
1959
2087
  top: 1.25rem;
1960
2088
  }
1961
2089
 
1962
- .pelcro-root .plc-top-7 {
1963
- top: 1.75rem;
2090
+ .pelcro-root .plc-top-6{
2091
+ top: 1.5rem;
1964
2092
  }
1965
2093
 
1966
- .pelcro-root .plc-top-24 {
2094
+ .pelcro-root .plc-top-24{
1967
2095
  top: 6rem;
1968
2096
  }
1969
2097
 
1970
- .pelcro-root .plc-top-1\.5 {
2098
+ .pelcro-root .plc-top-1\.5{
1971
2099
  top: 0.375rem;
1972
2100
  }
1973
2101
 
1974
- .pelcro-root .plc-top-1\/2 {
2102
+ .pelcro-root .plc--top-1{
2103
+ top: -0.25rem;
2104
+ }
2105
+
2106
+ .pelcro-root .plc--top-3{
2107
+ top: -0.75rem;
2108
+ }
2109
+
2110
+ .pelcro-root .plc-top-1\/2{
1975
2111
  top: 50%;
1976
2112
  }
1977
2113
 
1978
- .pelcro-root .plc-right-0 {
2114
+ .pelcro-root .plc-right-0{
1979
2115
  right: 0px;
1980
2116
  }
1981
2117
 
1982
- .pelcro-root .plc-right-1 {
2118
+ .pelcro-root .plc-right-1{
1983
2119
  right: 0.25rem;
1984
2120
  }
1985
2121
 
1986
- .pelcro-root .plc-right-2 {
2122
+ .pelcro-root .plc-right-2{
1987
2123
  right: 0.5rem;
1988
2124
  }
1989
2125
 
1990
- .pelcro-root .plc-right-4 {
2126
+ .pelcro-root .plc-right-3{
2127
+ right: 0.75rem;
2128
+ }
2129
+
2130
+ .pelcro-root .plc-right-4{
1991
2131
  right: 1rem;
1992
2132
  }
1993
2133
 
1994
- .pelcro-root .plc-right-10 {
1995
- right: 2.5rem;
2134
+ .pelcro-root .plc-right-5{
2135
+ right: 1.25rem;
1996
2136
  }
1997
2137
 
1998
- .pelcro-root .plc--right-16 {
1999
- right: -4rem;
2138
+ .pelcro-root .plc--right-14{
2139
+ right: -3.5rem;
2000
2140
  }
2001
2141
 
2002
- .pelcro-root .plc-bottom-0 {
2142
+ .pelcro-root .plc-bottom-0{
2003
2143
  bottom: 0px;
2004
2144
  }
2005
2145
 
2006
- .pelcro-root .plc-bottom-4 {
2146
+ .pelcro-root .plc-bottom-4{
2007
2147
  bottom: 1rem;
2008
2148
  }
2009
2149
 
2010
- .pelcro-root .plc-left-0 {
2150
+ .pelcro-root .plc-left-0{
2011
2151
  left: 0px;
2012
2152
  }
2013
2153
 
2014
- .pelcro-root .plc-left-5 {
2015
- left: 1.25rem;
2154
+ .pelcro-root .plc-left-4{
2155
+ left: 1rem;
2016
2156
  }
2017
2157
 
2018
- .pelcro-root .plc--left-16 {
2019
- left: -4rem;
2158
+ .pelcro-root .plc-left-6{
2159
+ left: 1.5rem;
2020
2160
  }
2021
2161
 
2022
- .pelcro-root .plc-z-max {
2162
+ .pelcro-root .plc--left-14{
2163
+ left: -3.5rem;
2164
+ }
2165
+
2166
+ .pelcro-root .plc-z-max{
2023
2167
  z-index: 999999;
2024
2168
  }
2025
2169
 
2026
- .pelcro-root .plc-order-1 {
2170
+ .pelcro-root .plc-order-1{
2027
2171
  order: 1;
2028
2172
  }
2029
2173
 
2030
- .pelcro-root .plc-order-2 {
2174
+ .pelcro-root .plc-order-2{
2031
2175
  order: 2;
2032
2176
  }
2033
2177
 
2034
- .pelcro-root .plc-m-0 {
2178
+ .pelcro-root .plc-m-0{
2035
2179
  margin: 0px;
2036
2180
  }
2037
2181
 
2038
- .pelcro-root .plc-m-3 {
2182
+ .pelcro-root .plc-m-1{
2183
+ margin: 0.25rem;
2184
+ }
2185
+
2186
+ .pelcro-root .plc-m-3{
2039
2187
  margin: 0.75rem;
2040
2188
  }
2041
2189
 
2042
- .pelcro-root .plc-m-auto {
2190
+ .pelcro-root .plc-m-auto{
2043
2191
  margin: auto;
2044
2192
  }
2045
2193
 
2046
- .pelcro-root .plc-mx-4 {
2047
- margin-left: 1rem;
2048
- margin-right: 1rem;
2194
+ .pelcro-root .plc-m-0\.5{
2195
+ margin: 0.125rem;
2049
2196
  }
2050
2197
 
2051
- .pelcro-root .plc-mx-auto {
2198
+ .pelcro-root .plc-mx-auto{
2052
2199
  margin-left: auto;
2053
2200
  margin-right: auto;
2054
2201
  }
2055
2202
 
2056
- .pelcro-root .plc-my-2 {
2203
+ .pelcro-root .plc-my-2{
2057
2204
  margin-top: 0.5rem;
2058
2205
  margin-bottom: 0.5rem;
2059
2206
  }
2060
2207
 
2061
- .pelcro-root .plc-my-4 {
2208
+ .pelcro-root .plc-my-4{
2062
2209
  margin-top: 1rem;
2063
2210
  margin-bottom: 1rem;
2064
2211
  }
2065
2212
 
2066
- .pelcro-root .plc-my-5 {
2213
+ .pelcro-root .plc-my-5{
2067
2214
  margin-top: 1.25rem;
2068
2215
  margin-bottom: 1.25rem;
2069
2216
  }
2070
2217
 
2071
- .pelcro-root .plc-my-20 {
2072
- margin-top: 5rem;
2073
- margin-bottom: 5rem;
2218
+ .pelcro-root .plc-my-11{
2219
+ margin-top: 2.75rem;
2220
+ margin-bottom: 2.75rem;
2221
+ }
2222
+
2223
+ .pelcro-root .plc-my-auto{
2224
+ margin-top: auto;
2225
+ margin-bottom: auto;
2074
2226
  }
2075
2227
 
2076
- .pelcro-root .plc-mt-1 {
2228
+ .pelcro-root .plc-mt-1{
2077
2229
  margin-top: 0.25rem;
2078
2230
  }
2079
2231
 
2080
- .pelcro-root .plc-mt-2 {
2232
+ .pelcro-root .plc-mt-2{
2081
2233
  margin-top: 0.5rem;
2082
2234
  }
2083
2235
 
2084
- .pelcro-root .plc-mt-3 {
2236
+ .pelcro-root .plc-mt-3{
2085
2237
  margin-top: 0.75rem;
2086
2238
  }
2087
2239
 
2088
- .pelcro-root .plc-mt-4 {
2240
+ .pelcro-root .plc-mt-4{
2089
2241
  margin-top: 1rem;
2090
2242
  }
2091
2243
 
2092
- .pelcro-root .plc-mt-5 {
2244
+ .pelcro-root .plc-mt-5{
2093
2245
  margin-top: 1.25rem;
2094
2246
  }
2095
2247
 
2096
- .pelcro-root .plc-mt-6 {
2248
+ .pelcro-root .plc-mt-6{
2097
2249
  margin-top: 1.5rem;
2098
2250
  }
2099
2251
 
2100
- .pelcro-root .plc-mt-8 {
2101
- margin-top: 2rem;
2102
- }
2103
-
2104
- .pelcro-root .plc-mt-auto {
2252
+ .pelcro-root .plc-mt-auto{
2105
2253
  margin-top: auto;
2106
2254
  }
2107
2255
 
2108
- .pelcro-root .plc--mt-8 {
2256
+ .pelcro-root .plc--mt-8{
2109
2257
  margin-top: -2rem;
2110
2258
  }
2111
2259
 
2112
- .pelcro-root .plc-mr-1 {
2260
+ .pelcro-root .plc-mr-1{
2113
2261
  margin-right: 0.25rem;
2114
2262
  }
2115
2263
 
2116
- .pelcro-root .plc-mr-2 {
2264
+ .pelcro-root .plc-mr-2{
2117
2265
  margin-right: 0.5rem;
2118
2266
  }
2119
2267
 
2120
- .pelcro-root .plc-mr-6 {
2268
+ .pelcro-root .plc-mr-4{
2269
+ margin-right: 1rem;
2270
+ }
2271
+
2272
+ .pelcro-root .plc-mr-6{
2121
2273
  margin-right: 1.5rem;
2122
2274
  }
2123
2275
 
2124
- .pelcro-root .plc-mb-1 {
2276
+ .pelcro-root .plc-mr-auto{
2277
+ margin-right: auto;
2278
+ }
2279
+
2280
+ .pelcro-root .plc-mb-1{
2125
2281
  margin-bottom: 0.25rem;
2126
2282
  }
2127
2283
 
2128
- .pelcro-root .plc-mb-2 {
2284
+ .pelcro-root .plc-mb-2{
2129
2285
  margin-bottom: 0.5rem;
2130
2286
  }
2131
2287
 
2132
- .pelcro-root .plc-mb-3 {
2288
+ .pelcro-root .plc-mb-3{
2133
2289
  margin-bottom: 0.75rem;
2134
2290
  }
2135
2291
 
2136
- .pelcro-root .plc-mb-4 {
2292
+ .pelcro-root .plc-mb-4{
2137
2293
  margin-bottom: 1rem;
2138
2294
  }
2139
2295
 
2140
- .pelcro-root .plc-mb-6 {
2296
+ .pelcro-root .plc-mb-6{
2141
2297
  margin-bottom: 1.5rem;
2142
2298
  }
2143
2299
 
2144
- .pelcro-root .plc-mb-8 {
2300
+ .pelcro-root .plc-mb-8{
2145
2301
  margin-bottom: 2rem;
2146
2302
  }
2147
2303
 
2148
- .pelcro-root .plc-mb-9 {
2304
+ .pelcro-root .plc-mb-9{
2149
2305
  margin-bottom: 2.25rem;
2150
2306
  }
2151
2307
 
2152
- .pelcro-root .plc-ml-0 {
2308
+ .pelcro-root .plc-mb-10{
2309
+ margin-bottom: 2.5rem;
2310
+ }
2311
+
2312
+ .pelcro-root .plc-ml-0{
2153
2313
  margin-left: 0px;
2154
2314
  }
2155
2315
 
2156
- .pelcro-root .plc-ml-1 {
2316
+ .pelcro-root .plc-ml-1{
2157
2317
  margin-left: 0.25rem;
2158
2318
  }
2159
2319
 
2160
- .pelcro-root .plc-ml-2 {
2320
+ .pelcro-root .plc-ml-2{
2161
2321
  margin-left: 0.5rem;
2162
2322
  }
2163
2323
 
2164
- .pelcro-root .plc-ml-3 {
2324
+ .pelcro-root .plc-ml-3{
2165
2325
  margin-left: 0.75rem;
2166
2326
  }
2167
2327
 
2168
- .pelcro-root .plc-ml-4 {
2328
+ .pelcro-root .plc-ml-4{
2169
2329
  margin-left: 1rem;
2170
2330
  }
2171
2331
 
2172
- .pelcro-root .plc--ml-2 {
2332
+ .pelcro-root .plc-ml-11{
2333
+ margin-left: 2.75rem;
2334
+ }
2335
+
2336
+ .pelcro-root .plc--ml-2{
2173
2337
  margin-left: -0.5rem;
2174
2338
  }
2175
2339
 
2176
- .pelcro-root .last\:plc-mb-0:last-child {
2340
+ .pelcro-root .last\:plc-mb-0:last-child{
2177
2341
  margin-bottom: 0px;
2178
2342
  }
2179
2343
 
2180
- .pelcro-root .plc-block {
2344
+ .pelcro-root .plc-block{
2181
2345
  display: block;
2182
2346
  }
2183
2347
 
2184
- .pelcro-root .plc-inline-block {
2348
+ .pelcro-root .plc-inline-block{
2185
2349
  display: inline-block;
2186
2350
  }
2187
2351
 
2188
- .pelcro-root .plc-flex {
2352
+ .pelcro-root .plc-inline{
2353
+ display: inline;
2354
+ }
2355
+
2356
+ .pelcro-root .plc-flex{
2189
2357
  display: flex;
2190
2358
  }
2191
2359
 
2192
- .pelcro-root .plc-inline-flex {
2360
+ .pelcro-root .plc-inline-flex{
2193
2361
  display: inline-flex;
2194
2362
  }
2195
2363
 
2196
- .pelcro-root .plc-grid {
2364
+ .pelcro-root .plc-flow-root{
2365
+ display: flow-root;
2366
+ }
2367
+
2368
+ .pelcro-root .plc-grid{
2197
2369
  display: grid;
2198
2370
  }
2199
2371
 
2200
- .pelcro-root .plc-hidden {
2372
+ .pelcro-root .plc-hidden{
2201
2373
  display: none;
2202
2374
  }
2203
2375
 
2204
- .pelcro-root .plc-h-3 {
2376
+ .pelcro-root .plc-h-3{
2205
2377
  height: 0.75rem;
2206
2378
  }
2207
2379
 
2208
- .pelcro-root .plc-h-4 {
2380
+ .pelcro-root .plc-h-4{
2209
2381
  height: 1rem;
2210
2382
  }
2211
2383
 
2212
- .pelcro-root .plc-h-5 {
2384
+ .pelcro-root .plc-h-5{
2213
2385
  height: 1.25rem;
2214
2386
  }
2215
2387
 
2216
- .pelcro-root .plc-h-6 {
2388
+ .pelcro-root .plc-h-6{
2217
2389
  height: 1.5rem;
2218
2390
  }
2219
2391
 
2220
- .pelcro-root .plc-h-7 {
2392
+ .pelcro-root .plc-h-7{
2221
2393
  height: 1.75rem;
2222
2394
  }
2223
2395
 
2224
- .pelcro-root .plc-h-8 {
2396
+ .pelcro-root .plc-h-8{
2225
2397
  height: 2rem;
2226
2398
  }
2227
2399
 
2228
- .pelcro-root .plc-h-9 {
2400
+ .pelcro-root .plc-h-9{
2229
2401
  height: 2.25rem;
2230
2402
  }
2231
2403
 
2232
- .pelcro-root .plc-h-10 {
2404
+ .pelcro-root .plc-h-10{
2233
2405
  height: 2.5rem;
2234
2406
  }
2235
2407
 
2236
- .pelcro-root .plc-h-11 {
2408
+ .pelcro-root .plc-h-11{
2237
2409
  height: 2.75rem;
2238
2410
  }
2239
2411
 
2240
- .pelcro-root .plc-h-12 {
2412
+ .pelcro-root .plc-h-12{
2241
2413
  height: 3rem;
2242
2414
  }
2243
2415
 
2244
- .pelcro-root .plc-h-20 {
2416
+ .pelcro-root .plc-h-16{
2417
+ height: 4rem;
2418
+ }
2419
+
2420
+ .pelcro-root .plc-h-20{
2245
2421
  height: 5rem;
2246
2422
  }
2247
2423
 
2248
- .pelcro-root .plc-h-28 {
2424
+ .pelcro-root .plc-h-24{
2425
+ height: 6rem;
2426
+ }
2427
+
2428
+ .pelcro-root .plc-h-28{
2249
2429
  height: 7rem;
2250
2430
  }
2251
2431
 
2252
- .pelcro-root .plc-h-32 {
2432
+ .pelcro-root .plc-h-32{
2253
2433
  height: 8rem;
2254
2434
  }
2255
2435
 
2256
- .pelcro-root .plc-h-36 {
2436
+ .pelcro-root .plc-h-36{
2257
2437
  height: 9rem;
2258
2438
  }
2259
2439
 
2260
- .pelcro-root .plc-h-52 {
2440
+ .pelcro-root .plc-h-52{
2261
2441
  height: 13rem;
2262
2442
  }
2263
2443
 
2264
- .pelcro-root .plc-h-auto {
2444
+ .pelcro-root .plc-h-auto{
2265
2445
  height: auto;
2266
2446
  }
2267
2447
 
2268
- .pelcro-root .plc-h-full {
2448
+ .pelcro-root .plc-h-full{
2269
2449
  height: 100%;
2270
2450
  }
2271
2451
 
2272
- .pelcro-root .plc-max-h-0 {
2452
+ .pelcro-root .plc-max-h-0{
2273
2453
  max-height: 0px;
2274
2454
  }
2275
2455
 
2276
- .pelcro-root .plc-max-h-14 {
2456
+ .pelcro-root .plc-max-h-14{
2277
2457
  max-height: 3.5rem;
2278
2458
  }
2279
2459
 
2280
- .pelcro-root .plc-max-h-80 {
2460
+ .pelcro-root .plc-max-h-48{
2461
+ max-height: 12rem;
2462
+ }
2463
+
2464
+ .pelcro-root .plc-max-h-80{
2281
2465
  max-height: 20rem;
2282
2466
  }
2283
2467
 
2284
- .pelcro-root .plc-max-h-full {
2468
+ .pelcro-root .plc-max-h-checkout{
2469
+ max-height: 35rem;
2470
+ }
2471
+
2472
+ .pelcro-root .plc-max-h-full{
2285
2473
  max-height: 100%;
2286
2474
  }
2287
2475
 
2288
- .pelcro-root .plc-min-h-12 {
2476
+ .pelcro-root .plc-min-h-0{
2477
+ min-height: 0px;
2478
+ }
2479
+
2480
+ .pelcro-root .plc-min-h-12{
2289
2481
  min-height: 3rem;
2290
2482
  }
2291
2483
 
2292
- .pelcro-root .plc-w-3 {
2484
+ .pelcro-root .plc-min-h-14{
2485
+ min-height: 5rem;
2486
+ }
2487
+
2488
+ .pelcro-root .plc-min-h-16{
2489
+ min-height: 6rem;
2490
+ }
2491
+
2492
+ .pelcro-root .plc-min-h-card{
2493
+ min-height: 24.75rem;
2494
+ }
2495
+
2496
+ .pelcro-root .plc-w-3{
2293
2497
  width: 0.75rem;
2294
2498
  }
2295
2499
 
2296
- .pelcro-root .plc-w-4 {
2500
+ .pelcro-root .plc-w-4{
2297
2501
  width: 1rem;
2298
2502
  }
2299
2503
 
2300
- .pelcro-root .plc-w-5 {
2504
+ .pelcro-root .plc-w-5{
2301
2505
  width: 1.25rem;
2302
2506
  }
2303
2507
 
2304
- .pelcro-root .plc-w-6 {
2508
+ .pelcro-root .plc-w-6{
2305
2509
  width: 1.5rem;
2306
2510
  }
2307
2511
 
2308
- .pelcro-root .plc-w-7 {
2512
+ .pelcro-root .plc-w-7{
2309
2513
  width: 1.75rem;
2310
2514
  }
2311
2515
 
2312
- .pelcro-root .plc-w-8 {
2516
+ .pelcro-root .plc-w-8{
2313
2517
  width: 2rem;
2314
2518
  }
2315
2519
 
2316
- .pelcro-root .plc-w-9 {
2520
+ .pelcro-root .plc-w-9{
2317
2521
  width: 2.25rem;
2318
2522
  }
2319
2523
 
2320
- .pelcro-root .plc-w-10 {
2524
+ .pelcro-root .plc-w-10{
2321
2525
  width: 2.5rem;
2322
2526
  }
2323
2527
 
2324
- .pelcro-root .plc-w-11 {
2528
+ .pelcro-root .plc-w-11{
2325
2529
  width: 2.75rem;
2326
2530
  }
2327
2531
 
2328
- .pelcro-root .plc-w-12 {
2532
+ .pelcro-root .plc-w-12{
2329
2533
  width: 3rem;
2330
2534
  }
2331
2535
 
2332
- .pelcro-root .plc-w-16 {
2536
+ .pelcro-root .plc-w-16{
2333
2537
  width: 4rem;
2334
2538
  }
2335
2539
 
2336
- .pelcro-root .plc-w-20 {
2540
+ .pelcro-root .plc-w-20{
2337
2541
  width: 5rem;
2338
2542
  }
2339
2543
 
2340
- .pelcro-root .plc-w-24 {
2544
+ .pelcro-root .plc-w-24{
2341
2545
  width: 6rem;
2342
2546
  }
2343
2547
 
2344
- .pelcro-root .plc-w-32 {
2548
+ .pelcro-root .plc-w-32{
2345
2549
  width: 8rem;
2346
2550
  }
2347
2551
 
2348
- .pelcro-root .plc-w-36 {
2552
+ .pelcro-root .plc-w-36{
2349
2553
  width: 9rem;
2350
2554
  }
2351
2555
 
2352
- .pelcro-root .plc-w-56 {
2556
+ .pelcro-root .plc-w-56{
2353
2557
  width: 14rem;
2354
2558
  }
2355
2559
 
2356
- .pelcro-root .plc-w-auto {
2560
+ .pelcro-root .plc-w-84{
2561
+ width: 22.875rem;
2562
+ }
2563
+
2564
+ .pelcro-root .plc-w-auto{
2357
2565
  width: auto;
2358
2566
  }
2359
2567
 
2360
- .pelcro-root .plc-w-1\/2 {
2568
+ .pelcro-root .plc-w-1\/2{
2361
2569
  width: 50%;
2362
2570
  }
2363
2571
 
2364
- .pelcro-root .plc-w-1\/4 {
2572
+ .pelcro-root .plc-w-1\/3{
2573
+ width: 33.333333%;
2574
+ }
2575
+
2576
+ .pelcro-root .plc-w-1\/4{
2365
2577
  width: 25%;
2366
2578
  }
2367
2579
 
2368
- .pelcro-root .plc-w-1\/5 {
2580
+ .pelcro-root .plc-w-3\/4{
2581
+ width: 75%;
2582
+ }
2583
+
2584
+ .pelcro-root .plc-w-1\/5{
2369
2585
  width: 20%;
2370
2586
  }
2371
2587
 
2372
- .pelcro-root .plc-w-2\/5 {
2588
+ .pelcro-root .plc-w-2\/5{
2373
2589
  width: 40%;
2374
2590
  }
2375
2591
 
2376
- .pelcro-root .plc-w-2\/12 {
2592
+ .pelcro-root .plc-w-2\/12{
2377
2593
  width: 16.666667%;
2378
2594
  }
2379
2595
 
2380
- .pelcro-root .plc-w-3\/12 {
2596
+ .pelcro-root .plc-w-3\/12{
2381
2597
  width: 25%;
2382
2598
  }
2383
2599
 
2384
- .pelcro-root .plc-w-4\/12 {
2600
+ .pelcro-root .plc-w-4\/12{
2385
2601
  width: 33.333333%;
2386
2602
  }
2387
2603
 
2388
- .pelcro-root .plc-w-5\/12 {
2604
+ .pelcro-root .plc-w-5\/12{
2389
2605
  width: 41.666667%;
2390
2606
  }
2391
2607
 
2392
- .pelcro-root .plc-w-6\/12 {
2608
+ .pelcro-root .plc-w-6\/12{
2393
2609
  width: 50%;
2394
2610
  }
2395
2611
 
2396
- .pelcro-root .plc-w-10\/12 {
2397
- width: 83.333333%;
2398
- }
2399
-
2400
- .pelcro-root .plc-w-full {
2612
+ .pelcro-root .plc-w-full{
2401
2613
  width: 100%;
2402
2614
  }
2403
2615
 
2404
- .pelcro-root .plc-w-max {
2616
+ .pelcro-root .plc-w-max{
2405
2617
  width: max-content;
2406
2618
  }
2407
2619
 
2408
- .pelcro-root .plc-max-w-50\% {
2409
- max-width: 50%;
2620
+ .pelcro-root .plc-max-w-xl{
2621
+ max-width: 36rem;
2410
2622
  }
2411
2623
 
2412
- .pelcro-root .plc-max-w-80\% {
2413
- max-width: 80%;
2624
+ .pelcro-root .plc-max-w-3xl{
2625
+ max-width: 48rem;
2414
2626
  }
2415
2627
 
2416
- .pelcro-root .plc-max-w-full {
2628
+ .pelcro-root .plc-max-w-7xl{
2629
+ max-width: 80rem;
2630
+ }
2631
+
2632
+ .pelcro-root .plc-max-w-50\%{
2633
+ max-width: 50%;
2634
+ }
2635
+
2636
+ .pelcro-root .plc-max-w-full{
2417
2637
  max-width: 100%;
2418
2638
  }
2419
2639
 
2420
- .pelcro-root .plc-flex-1 {
2640
+ .pelcro-root .plc-flex-1{
2421
2641
  flex: 1 1 0%;
2422
2642
  }
2423
2643
 
2424
- .pelcro-root .plc-flex-shrink-0 {
2644
+ .pelcro-root .plc-flex-auto{
2645
+ flex: 1 1 auto;
2646
+ }
2647
+
2648
+ .pelcro-root .plc-flex-none{
2649
+ flex: none;
2650
+ }
2651
+
2652
+ .pelcro-root .plc-flex-shrink-0{
2425
2653
  flex-shrink: 0;
2426
2654
  }
2427
2655
 
2428
- .pelcro-root .plc-flex-grow {
2656
+ .pelcro-root .plc-flex-grow{
2429
2657
  flex-grow: 1;
2430
2658
  }
2431
2659
 
2432
- .pelcro-root .plc-table-fixed {
2660
+ .pelcro-root .plc-table-fixed{
2433
2661
  table-layout: fixed;
2434
2662
  }
2435
2663
 
2436
- .pelcro-root .plc-origin-right {
2664
+ .pelcro-root .plc-origin-right{
2437
2665
  transform-origin: right;
2438
2666
  }
2439
2667
 
2440
- .pelcro-root .plc-transform {
2668
+ .pelcro-root .plc-transform{
2441
2669
  --tw-translate-x: 0;
2442
2670
  --tw-translate-y: 0;
2443
2671
  --tw-rotate: 0;
@@ -2448,957 +2676,1106 @@ in order to scope selectors under pelcro-root
2448
2676
  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));
2449
2677
  }
2450
2678
 
2451
- .pelcro-root .plc-translate-x-0 {
2679
+ .pelcro-root .plc-translate-x-0{
2452
2680
  --tw-translate-x: 0px;
2453
2681
  }
2454
2682
 
2455
- .pelcro-root .plc--translate-x-full {
2683
+ .pelcro-root .plc--translate-x-1{
2684
+ --tw-translate-x: -0.25rem;
2685
+ }
2686
+
2687
+ .pelcro-root .plc-translate-x-full{
2688
+ --tw-translate-x: 100%;
2689
+ }
2690
+
2691
+ .pelcro-root .plc--translate-x-full{
2456
2692
  --tw-translate-x: -100%;
2457
2693
  }
2458
2694
 
2459
- .pelcro-root .plc--translate-y-1\/2 {
2695
+ .pelcro-root .plc--translate-y-1\/2{
2460
2696
  --tw-translate-y: -50%;
2461
2697
  }
2462
2698
 
2463
- .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1 {
2699
+ .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1{
2464
2700
  --tw-translate-x: 0.25rem;
2465
2701
  }
2466
2702
 
2467
- .pelcro-root .plc-rotate-90 {
2703
+ .pelcro-root .plc-rotate-90{
2468
2704
  --tw-rotate: 90deg;
2469
2705
  }
2470
2706
 
2471
- .pelcro-root .plc-rotate-180 {
2707
+ .pelcro-root .plc-rotate-180{
2472
2708
  --tw-rotate: 180deg;
2473
2709
  }
2474
2710
 
2475
- .pelcro-root .plc-scale-120 {
2711
+ .pelcro-root .plc-scale-105{
2712
+ --tw-scale-x: 1.05;
2713
+ --tw-scale-y: 1.05;
2714
+ }
2715
+
2716
+ .pelcro-root .plc-scale-120{
2476
2717
  --tw-scale-x: 1.2;
2477
2718
  --tw-scale-y: 1.2;
2478
2719
  }
2479
2720
 
2480
- .pelcro-root .plc-scale-x-0 {
2721
+ .pelcro-root .plc-scale-x-0{
2481
2722
  --tw-scale-x: 0;
2482
2723
  }
2483
2724
 
2484
- .pelcro-root .plc-scale-x-100 {
2725
+ .pelcro-root .plc-scale-x-100{
2485
2726
  --tw-scale-x: 1;
2486
2727
  }
2487
2728
 
2488
- @keyframes plc-spin {
2489
- to {
2729
+ @keyframes plc-spin{
2730
+ to{
2490
2731
  transform: rotate(360deg);
2491
2732
  }
2492
2733
  }
2493
2734
 
2494
- @keyframes plc-ping {
2495
- 75%, 100% {
2735
+ @keyframes plc-ping{
2736
+ 75%, 100%{
2496
2737
  transform: scale(2);
2497
2738
  opacity: 0;
2498
2739
  }
2499
2740
  }
2500
2741
 
2501
- @keyframes plc-pulse {
2502
- 50% {
2742
+ @keyframes plc-pulse{
2743
+ 50%{
2503
2744
  opacity: .5;
2504
2745
  }
2505
2746
  }
2506
2747
 
2507
- @keyframes plc-bounce {
2508
- 0%, 100% {
2748
+ @keyframes plc-bounce{
2749
+ 0%, 100%{
2509
2750
  transform: translateY(-25%);
2510
2751
  animation-timing-function: cubic-bezier(0.8,0,1,1);
2511
2752
  }
2512
2753
 
2513
- 50% {
2754
+ 50%{
2514
2755
  transform: none;
2515
2756
  animation-timing-function: cubic-bezier(0,0,0.2,1);
2516
2757
  }
2517
2758
  }
2518
2759
 
2519
- @keyframes plc-slideInBottom {
2520
- 0% {
2760
+ @keyframes plc-slideInBottom{
2761
+ 0%{
2521
2762
  transform: translateY(1000px);
2522
2763
  opacity: 0;
2523
2764
  }
2524
2765
 
2525
- 100% {
2766
+ 100%{
2526
2767
  transform: translateY(0);
2527
2768
  opacity: 1;
2528
2769
  }
2529
2770
  }
2530
2771
 
2531
- .pelcro-root .plc-animate-spin {
2772
+ .pelcro-root .plc-animate-spin{
2532
2773
  animation: plc-spin 1s linear infinite;
2533
2774
  }
2534
2775
 
2535
- @media (prefers-reduced-motion: no-preference) {
2536
- .pelcro-root .motion-safe\:plc-animate-slideInBottom {
2776
+ .pelcro-root .plc-animate-pulse{
2777
+ animation: plc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
2778
+ }
2779
+
2780
+ @media (prefers-reduced-motion: no-preference){
2781
+ .pelcro-root .motion-safe\:plc-animate-slideInBottom{
2537
2782
  animation: plc-slideInBottom 0.5s ease-out;
2538
2783
  }
2539
2784
  }
2540
2785
 
2541
- .pelcro-root .plc-cursor-default {
2786
+ .pelcro-root .plc-cursor-default{
2542
2787
  cursor: default;
2543
2788
  }
2544
2789
 
2545
- .pelcro-root .plc-cursor-pointer {
2790
+ .pelcro-root .plc-cursor-pointer{
2546
2791
  cursor: pointer;
2547
2792
  }
2548
2793
 
2549
- .pelcro-root .plc-select-none {
2794
+ .pelcro-root .plc-select-none{
2550
2795
  -webkit-user-select: none;
2551
2796
  user-select: none;
2552
2797
  }
2553
2798
 
2554
- .pelcro-root .plc-appearance-none {
2555
- -webkit-appearance: none;
2556
- appearance: none;
2799
+ .pelcro-root .plc-grid-cols-1{
2800
+ grid-template-columns: repeat(1, minmax(0, 1fr));
2557
2801
  }
2558
2802
 
2559
- .pelcro-root .plc-flex-row-reverse {
2803
+ .pelcro-root .plc-grid-cols-2{
2804
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2805
+ }
2806
+
2807
+ .pelcro-root .plc-flex-row{
2808
+ flex-direction: row;
2809
+ }
2810
+
2811
+ .pelcro-root .plc-flex-row-reverse{
2560
2812
  flex-direction: row-reverse;
2561
2813
  }
2562
2814
 
2563
- .pelcro-root .plc-flex-col {
2815
+ .pelcro-root .plc-flex-col{
2564
2816
  flex-direction: column;
2565
2817
  }
2566
2818
 
2567
- .pelcro-root .plc-flex-wrap {
2819
+ .pelcro-root .plc-flex-wrap{
2568
2820
  flex-wrap: wrap;
2569
2821
  }
2570
2822
 
2571
- .pelcro-root .plc-place-items-center {
2823
+ .pelcro-root .plc-place-items-center{
2572
2824
  place-items: center;
2573
2825
  }
2574
2826
 
2575
- .pelcro-root .plc-items-start {
2827
+ .pelcro-root .plc-items-start{
2576
2828
  align-items: flex-start;
2577
2829
  }
2578
2830
 
2579
- .pelcro-root .plc-items-end {
2831
+ .pelcro-root .plc-items-end{
2580
2832
  align-items: flex-end;
2581
2833
  }
2582
2834
 
2583
- .pelcro-root .plc-items-center {
2835
+ .pelcro-root .plc-items-center{
2584
2836
  align-items: center;
2585
2837
  }
2586
2838
 
2587
- .pelcro-root .plc-items-stretch {
2839
+ .pelcro-root .plc-items-stretch{
2588
2840
  align-items: stretch;
2589
2841
  }
2590
2842
 
2591
- .pelcro-root .plc-justify-end {
2843
+ .pelcro-root .plc-justify-end{
2592
2844
  justify-content: flex-end;
2593
2845
  }
2594
2846
 
2595
- .pelcro-root .plc-justify-center {
2847
+ .pelcro-root .plc-justify-center{
2596
2848
  justify-content: center;
2597
2849
  }
2598
2850
 
2599
- .pelcro-root .plc-justify-between {
2851
+ .pelcro-root .plc-justify-between{
2600
2852
  justify-content: space-between;
2601
2853
  }
2602
2854
 
2603
- .pelcro-root .plc-justify-evenly {
2855
+ .pelcro-root .plc-justify-evenly{
2604
2856
  justify-content: space-evenly;
2605
2857
  }
2606
2858
 
2607
- .pelcro-root .plc-justify-items-center {
2859
+ .pelcro-root .plc-justify-items-center{
2608
2860
  justify-items: center;
2609
2861
  }
2610
2862
 
2611
- .pelcro-root .plc-gap-x-3 {
2863
+ .pelcro-root .plc-gap-4{
2864
+ gap: 1rem;
2865
+ }
2866
+
2867
+ .pelcro-root .plc-gap-20{
2868
+ gap: 5rem;
2869
+ }
2870
+
2871
+ .pelcro-root .plc-gap-x-3{
2612
2872
  column-gap: 0.75rem;
2613
2873
  }
2614
2874
 
2615
- .pelcro-root .plc-gap-y-2 {
2875
+ .pelcro-root .plc-gap-y-2{
2616
2876
  row-gap: 0.5rem;
2617
2877
  }
2618
2878
 
2619
- .pelcro-root .plc-gap-y-5 {
2879
+ .pelcro-root .plc-gap-y-5{
2620
2880
  row-gap: 1.25rem;
2621
2881
  }
2622
2882
 
2623
- .pelcro-root .plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
2883
+ .pelcro-root .plc-space-x-0 > :not([hidden]) ~ :not([hidden]){
2884
+ --tw-space-x-reverse: 0;
2885
+ margin-right: calc(0px * var(--tw-space-x-reverse));
2886
+ margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
2887
+ }
2888
+
2889
+ .pelcro-root .plc-space-x-2 > :not([hidden]) ~ :not([hidden]){
2624
2890
  --tw-space-x-reverse: 0;
2625
2891
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
2626
2892
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
2627
2893
  }
2628
2894
 
2629
- .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]) {
2895
+ .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]){
2630
2896
  --tw-space-x-reverse: 0;
2631
2897
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
2632
2898
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
2633
2899
  }
2634
2900
 
2635
- .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]) {
2901
+ .pelcro-root .plc-space-x-4 > :not([hidden]) ~ :not([hidden]){
2902
+ --tw-space-x-reverse: 0;
2903
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
2904
+ margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
2905
+ }
2906
+
2907
+ .pelcro-root .plc-space-x-6 > :not([hidden]) ~ :not([hidden]){
2908
+ --tw-space-x-reverse: 0;
2909
+ margin-right: calc(1.5rem * var(--tw-space-x-reverse));
2910
+ margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
2911
+ }
2912
+
2913
+ .pelcro-root .plc-space-y-1 > :not([hidden]) ~ :not([hidden]){
2914
+ --tw-space-y-reverse: 0;
2915
+ margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
2916
+ margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
2917
+ }
2918
+
2919
+ .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]){
2636
2920
  --tw-space-y-reverse: 0;
2637
2921
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
2638
2922
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
2639
2923
  }
2640
2924
 
2641
- .pelcro-root .plc-space-y-4 > :not([hidden]) ~ :not([hidden]) {
2925
+ .pelcro-root .plc-space-y-3 > :not([hidden]) ~ :not([hidden]){
2926
+ --tw-space-y-reverse: 0;
2927
+ margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
2928
+ margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
2929
+ }
2930
+
2931
+ .pelcro-root .plc-space-y-4 > :not([hidden]) ~ :not([hidden]){
2642
2932
  --tw-space-y-reverse: 0;
2643
2933
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
2644
2934
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
2645
2935
  }
2646
2936
 
2647
- .pelcro-root .plc-overflow-auto {
2937
+ .pelcro-root .plc-space-y-6 > :not([hidden]) ~ :not([hidden]){
2938
+ --tw-space-y-reverse: 0;
2939
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
2940
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
2941
+ }
2942
+
2943
+ .pelcro-root .plc-divide-y > :not([hidden]) ~ :not([hidden]){
2944
+ --tw-divide-y-reverse: 0;
2945
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
2946
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
2947
+ }
2948
+
2949
+ .pelcro-root .plc-divide-gray-200 > :not([hidden]) ~ :not([hidden]){
2950
+ --tw-divide-opacity: 1;
2951
+ border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
2952
+ }
2953
+
2954
+ .pelcro-root .plc-overflow-auto{
2648
2955
  overflow: auto;
2649
2956
  }
2650
2957
 
2651
- .pelcro-root .plc-overflow-hidden {
2958
+ .pelcro-root .plc-overflow-hidden{
2652
2959
  overflow: hidden;
2653
2960
  }
2654
2961
 
2655
- .pelcro-root .plc-overflow-x-auto {
2656
- overflow-x: auto;
2962
+ .pelcro-root .plc-overflow-y-auto{
2963
+ overflow-y: auto;
2657
2964
  }
2658
2965
 
2659
- .pelcro-root .plc-overflow-y-auto {
2660
- overflow-y: auto;
2966
+ .pelcro-root .plc-overflow-x-hidden{
2967
+ overflow-x: hidden;
2661
2968
  }
2662
2969
 
2663
- .pelcro-root .plc-overflow-y-scroll {
2970
+ .pelcro-root .plc-overflow-y-scroll{
2664
2971
  overflow-y: scroll;
2665
2972
  }
2666
2973
 
2667
- .pelcro-root .plc-truncate {
2974
+ .pelcro-root .plc-truncate{
2668
2975
  overflow: hidden;
2669
2976
  text-overflow: ellipsis;
2670
2977
  white-space: nowrap;
2671
2978
  }
2672
2979
 
2673
- .pelcro-root .plc-whitespace-nowrap {
2674
- white-space: nowrap;
2980
+ .pelcro-root .plc-whitespace-normal{
2981
+ white-space: normal;
2675
2982
  }
2676
2983
 
2677
- .pelcro-root .plc-whitespace-pre-line {
2984
+ .pelcro-root .plc-whitespace-pre-line{
2678
2985
  white-space: pre-line;
2679
2986
  }
2680
2987
 
2681
- .pelcro-root .plc-break-words {
2988
+ .pelcro-root .plc-break-words{
2682
2989
  overflow-wrap: break-word;
2683
2990
  }
2684
2991
 
2685
- .pelcro-root .plc-rounded-none {
2992
+ .pelcro-root .plc-break-all{
2993
+ word-break: break-all;
2994
+ }
2995
+
2996
+ .pelcro-root .plc-rounded-none{
2686
2997
  border-radius: 0px;
2687
2998
  }
2688
2999
 
2689
- .pelcro-root .plc-rounded-sm {
3000
+ .pelcro-root .plc-rounded-sm{
2690
3001
  border-radius: 0.125rem;
2691
3002
  }
2692
3003
 
2693
- .pelcro-root .plc-rounded {
3004
+ .pelcro-root .plc-rounded{
2694
3005
  border-radius: 0.25rem;
2695
3006
  }
2696
3007
 
2697
- .pelcro-root .plc-rounded-md {
3008
+ .pelcro-root .plc-rounded-md{
2698
3009
  border-radius: 0.375rem;
2699
3010
  }
2700
3011
 
2701
- .pelcro-root .plc-rounded-lg {
3012
+ .pelcro-root .plc-rounded-lg{
2702
3013
  border-radius: 0.5rem;
2703
3014
  }
2704
3015
 
2705
- .pelcro-root .plc-rounded-2xl {
3016
+ .pelcro-root .plc-rounded-2xl{
2706
3017
  border-radius: 1rem;
2707
3018
  }
2708
3019
 
2709
- .pelcro-root .plc-rounded-full {
3020
+ .pelcro-root .plc-rounded-full{
2710
3021
  border-radius: 9999px;
2711
3022
  }
2712
3023
 
2713
- .pelcro-root .plc-border-0 {
3024
+ .pelcro-root .plc-rounded-t-lg{
3025
+ border-top-left-radius: 0.5rem;
3026
+ border-top-right-radius: 0.5rem;
3027
+ }
3028
+
3029
+ .pelcro-root .plc-rounded-b-sm{
3030
+ border-bottom-right-radius: 0.125rem;
3031
+ border-bottom-left-radius: 0.125rem;
3032
+ }
3033
+
3034
+ .pelcro-root .plc-border-0{
2714
3035
  border-width: 0px;
2715
3036
  }
2716
3037
 
2717
- .pelcro-root .plc-border-2 {
3038
+ .pelcro-root .plc-border-2{
2718
3039
  border-width: 2px;
2719
3040
  }
2720
3041
 
2721
- .pelcro-root .plc-border {
3042
+ .pelcro-root .plc-border{
2722
3043
  border-width: 1px;
2723
3044
  }
2724
3045
 
2725
- .pelcro-root .last\:plc-border-0:last-child {
3046
+ .pelcro-root .last\:plc-border-0:last-child{
2726
3047
  border-width: 0px;
2727
3048
  }
2728
3049
 
2729
- .pelcro-root .plc-border-t-2 {
3050
+ .pelcro-root .plc-border-t-2{
2730
3051
  border-top-width: 2px;
2731
3052
  }
2732
3053
 
2733
- .pelcro-root .plc-border-t-4 {
3054
+ .pelcro-root .plc-border-t-4{
2734
3055
  border-top-width: 4px;
2735
3056
  }
2736
3057
 
2737
- .pelcro-root .plc-border-t-8 {
3058
+ .pelcro-root .plc-border-t-8{
2738
3059
  border-top-width: 8px;
2739
3060
  }
2740
3061
 
2741
- .pelcro-root .plc-border-t {
3062
+ .pelcro-root .plc-border-t{
2742
3063
  border-top-width: 1px;
2743
3064
  }
2744
3065
 
2745
- .pelcro-root .plc-border-b-2 {
3066
+ .pelcro-root .plc-border-b-2{
2746
3067
  border-bottom-width: 2px;
2747
3068
  }
2748
3069
 
2749
- .pelcro-root .plc-border-b {
3070
+ .pelcro-root .plc-border-b-4{
3071
+ border-bottom-width: 4px;
3072
+ }
3073
+
3074
+ .pelcro-root .plc-border-b{
2750
3075
  border-bottom-width: 1px;
2751
3076
  }
2752
3077
 
2753
- .pelcro-root .plc-border-l-2 {
3078
+ .pelcro-root .plc-border-l-2{
2754
3079
  border-left-width: 2px;
2755
3080
  }
2756
3081
 
2757
- .pelcro-root .plc-border-l-4 {
3082
+ .pelcro-root .plc-border-l-4{
2758
3083
  border-left-width: 4px;
2759
3084
  }
2760
3085
 
2761
- .pelcro-root .plc-border-solid {
3086
+ .pelcro-root .plc-border-solid{
2762
3087
  border-style: solid;
2763
3088
  }
2764
3089
 
2765
- .pelcro-root .plc-border-transparent {
3090
+ .pelcro-root .plc-border-transparent{
2766
3091
  border-color: transparent;
2767
3092
  }
2768
3093
 
2769
- .pelcro-root .plc-border-primary-300 {
3094
+ .pelcro-root .plc-border-primary-300{
2770
3095
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
2771
3096
  }
2772
3097
 
2773
- .pelcro-root .plc-border-primary-400 {
3098
+ .pelcro-root .plc-border-primary-400{
2774
3099
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2775
3100
  }
2776
3101
 
2777
- .pelcro-root .plc-border-primary-500 {
3102
+ .pelcro-root .plc-border-primary-500{
2778
3103
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2779
3104
  }
2780
3105
 
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 {
3106
+ .pelcro-root .plc-border-primary{
2786
3107
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2787
3108
  }
2788
3109
 
2789
- .pelcro-root .plc-border-white {
3110
+ .pelcro-root .plc-border-white{
2790
3111
  --tw-border-opacity: 1;
2791
3112
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
2792
3113
  }
2793
3114
 
2794
- .pelcro-root .plc-border-gray-200 {
3115
+ .pelcro-root .plc-border-gray-200{
2795
3116
  --tw-border-opacity: 1;
2796
3117
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
2797
3118
  }
2798
3119
 
2799
- .pelcro-root .plc-border-gray-300 {
3120
+ .pelcro-root .plc-border-gray-300{
2800
3121
  --tw-border-opacity: 1;
2801
3122
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
2802
3123
  }
2803
3124
 
2804
- .pelcro-root .plc-border-gray-400 {
3125
+ .pelcro-root .plc-border-gray-400{
2805
3126
  --tw-border-opacity: 1;
2806
3127
  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
2807
3128
  }
2808
3129
 
2809
- .pelcro-root .plc-border-green-400 {
3130
+ .pelcro-root .plc-border-green-400{
2810
3131
  --tw-border-opacity: 1;
2811
3132
  border-color: rgba(52, 211, 153, var(--tw-border-opacity));
2812
3133
  }
2813
3134
 
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%));
3135
+ .pelcro-root .hover\:plc-border-primary-600:hover{
3136
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2816
3137
  }
2817
3138
 
2818
- .pelcro-root .plc-bg-transparent {
2819
- background-color: transparent;
3139
+ .pelcro-root .hover\:plc-border-primary-800:hover{
3140
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
2820
3141
  }
2821
3142
 
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%));
3143
+ .pelcro-root .hover\:plc-border-primary:hover{
3144
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2824
3145
  }
2825
3146
 
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%));
3147
+ .pelcro-root .plc-bg-transparent{
3148
+ background-color: transparent;
2828
3149
  }
2829
3150
 
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%));
3151
+ .pelcro-root .plc-bg-primary-200{
3152
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 30%));
2832
3153
  }
2833
3154
 
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%));
3155
+ .pelcro-root .plc-bg-primary-400{
3156
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2836
3157
  }
2837
3158
 
2838
- .pelcro-root .plc-bg-primary {
3159
+ .pelcro-root .plc-bg-primary{
2839
3160
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2840
3161
  }
2841
3162
 
2842
- .pelcro-root .plc-bg-white {
3163
+ .pelcro-root .plc-bg-white{
2843
3164
  --tw-bg-opacity: 1;
2844
3165
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2845
3166
  }
2846
3167
 
2847
- .pelcro-root .plc-bg-gray-50 {
2848
- --tw-bg-opacity: 1;
2849
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2850
- }
2851
-
2852
- .pelcro-root .plc-bg-gray-100 {
3168
+ .pelcro-root .plc-bg-gray-100{
2853
3169
  --tw-bg-opacity: 1;
2854
3170
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2855
3171
  }
2856
3172
 
2857
- .pelcro-root .plc-bg-gray-200 {
3173
+ .pelcro-root .plc-bg-gray-200{
2858
3174
  --tw-bg-opacity: 1;
2859
3175
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
2860
3176
  }
2861
3177
 
2862
- .pelcro-root .plc-bg-gray-300 {
3178
+ .pelcro-root .plc-bg-gray-300{
2863
3179
  --tw-bg-opacity: 1;
2864
3180
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
2865
3181
  }
2866
3182
 
2867
- .pelcro-root .plc-bg-gray-500 {
3183
+ .pelcro-root .plc-bg-gray-400{
3184
+ --tw-bg-opacity: 1;
3185
+ background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
3186
+ }
3187
+
3188
+ .pelcro-root .plc-bg-gray-500{
2868
3189
  --tw-bg-opacity: 1;
2869
3190
  background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
2870
3191
  }
2871
3192
 
2872
- .pelcro-root .plc-bg-gray-600 {
3193
+ .pelcro-root .plc-bg-gray-600{
2873
3194
  --tw-bg-opacity: 1;
2874
3195
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2875
3196
  }
2876
3197
 
2877
- .pelcro-root .plc-bg-gray-800 {
3198
+ .pelcro-root .plc-bg-gray-800{
2878
3199
  --tw-bg-opacity: 1;
2879
3200
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
2880
3201
  }
2881
3202
 
2882
- .pelcro-root .plc-bg-red-100 {
3203
+ .pelcro-root .plc-bg-red-100{
2883
3204
  --tw-bg-opacity: 1;
2884
3205
  background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
2885
3206
  }
2886
3207
 
2887
- .pelcro-root .plc-bg-red-500 {
3208
+ .pelcro-root .plc-bg-red-500{
2888
3209
  --tw-bg-opacity: 1;
2889
3210
  background-color: rgba(180, 48, 43, var(--tw-bg-opacity));
2890
3211
  }
2891
3212
 
2892
- .pelcro-root .plc-bg-yellow-100 {
3213
+ .pelcro-root .plc-bg-yellow-100{
2893
3214
  --tw-bg-opacity: 1;
2894
3215
  background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
2895
3216
  }
2896
3217
 
2897
- .pelcro-root .plc-bg-green-50 {
3218
+ .pelcro-root .plc-bg-green-50{
2898
3219
  --tw-bg-opacity: 1;
2899
3220
  background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
2900
3221
  }
2901
3222
 
2902
- .pelcro-root .plc-bg-green-100 {
3223
+ .pelcro-root .plc-bg-green-100{
2903
3224
  --tw-bg-opacity: 1;
2904
3225
  background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
2905
3226
  }
2906
3227
 
2907
- .pelcro-root .plc-bg-blue-100 {
3228
+ .pelcro-root .plc-bg-blue-100{
2908
3229
  --tw-bg-opacity: 1;
2909
3230
  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
2910
3231
  }
2911
3232
 
2912
- .pelcro-root .plc-bg-orange-100 {
3233
+ .pelcro-root .plc-bg-orange-100{
2913
3234
  --tw-bg-opacity: 1;
2914
3235
  background-color: rgba(255, 237, 213, var(--tw-bg-opacity));
2915
3236
  }
2916
3237
 
2917
- .pelcro-root .hover\:plc-bg-transparent:hover {
3238
+ .pelcro-root .hover\:plc-bg-transparent:hover{
2918
3239
  background-color: transparent;
2919
3240
  }
2920
3241
 
2921
- .pelcro-root .hover\:plc-bg-primary-600:hover {
3242
+ .pelcro-root .hover\:plc-bg-primary-600:hover{
2922
3243
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2923
3244
  }
2924
3245
 
2925
- .pelcro-root .hover\:plc-bg-white:hover {
3246
+ .pelcro-root .hover\:plc-bg-primary:hover{
3247
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3248
+ }
3249
+
3250
+ .pelcro-root .hover\:plc-bg-white:hover{
2926
3251
  --tw-bg-opacity: 1;
2927
3252
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2928
3253
  }
2929
3254
 
2930
- .pelcro-root .hover\:plc-bg-gray-50:hover {
3255
+ .pelcro-root .hover\:plc-bg-gray-50:hover{
2931
3256
  --tw-bg-opacity: 1;
2932
3257
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2933
3258
  }
2934
3259
 
2935
- .pelcro-root .hover\:plc-bg-gray-100:hover {
3260
+ .pelcro-root .hover\:plc-bg-gray-100:hover{
2936
3261
  --tw-bg-opacity: 1;
2937
3262
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2938
3263
  }
2939
3264
 
2940
- .pelcro-root .hover\:plc-bg-gray-600:hover {
3265
+ .pelcro-root .hover\:plc-bg-gray-600:hover{
2941
3266
  --tw-bg-opacity: 1;
2942
3267
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2943
3268
  }
2944
3269
 
2945
- .pelcro-root .hover\:plc-bg-gray-900:hover {
3270
+ .pelcro-root .hover\:plc-bg-gray-900:hover{
2946
3271
  --tw-bg-opacity: 1;
2947
3272
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
2948
3273
  }
2949
3274
 
2950
- .pelcro-root .hover\:plc-bg-red-600:hover {
3275
+ .pelcro-root .hover\:plc-bg-red-600:hover{
2951
3276
  --tw-bg-opacity: 1;
2952
3277
  background-color: rgba(139, 37, 33, var(--tw-bg-opacity));
2953
3278
  }
2954
3279
 
2955
- .pelcro-root .focus\:plc-bg-transparent:focus {
3280
+ .pelcro-root .focus\:plc-bg-transparent:focus{
2956
3281
  background-color: transparent;
2957
3282
  }
2958
3283
 
2959
- .pelcro-root .focus\:plc-bg-primary-600:focus {
3284
+ .pelcro-root .focus\:plc-bg-primary-600:focus{
2960
3285
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2961
3286
  }
2962
3287
 
2963
- .pelcro-root .disabled\:plc-bg-gray-400:disabled {
3288
+ .pelcro-root .disabled\:plc-bg-gray-400:disabled{
2964
3289
  --tw-bg-opacity: 1;
2965
3290
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
2966
3291
  }
2967
3292
 
2968
- .pelcro-root .plc-fill-current {
3293
+ .pelcro-root .plc-fill-current{
2969
3294
  fill: currentColor;
2970
3295
  }
2971
3296
 
2972
- .pelcro-root .plc-object-contain {
3297
+ .pelcro-root .plc-object-contain{
2973
3298
  object-fit: contain;
2974
3299
  }
2975
3300
 
2976
- .pelcro-root .plc-object-left {
2977
- object-position: left;
3301
+ .pelcro-root .plc-object-cover{
3302
+ object-fit: cover;
2978
3303
  }
2979
3304
 
2980
- .pelcro-root .plc-p-1 {
2981
- padding: 0.25rem;
3305
+ .pelcro-root .plc-object-center{
3306
+ object-position: center;
2982
3307
  }
2983
3308
 
2984
- .pelcro-root .plc-p-2 {
2985
- padding: 0.5rem;
3309
+ .pelcro-root .plc-p-1{
3310
+ padding: 0.25rem;
2986
3311
  }
2987
3312
 
2988
- .pelcro-root .plc-p-3 {
2989
- padding: 0.75rem;
3313
+ .pelcro-root .plc-p-2{
3314
+ padding: 0.5rem;
2990
3315
  }
2991
3316
 
2992
- .pelcro-root .plc-p-4 {
3317
+ .pelcro-root .plc-p-4{
2993
3318
  padding: 1rem;
2994
3319
  }
2995
3320
 
2996
- .pelcro-root .plc-p-5 {
3321
+ .pelcro-root .plc-p-5{
2997
3322
  padding: 1.25rem;
2998
3323
  }
2999
3324
 
3000
- .pelcro-root .plc-p-6 {
3325
+ .pelcro-root .plc-p-6{
3001
3326
  padding: 1.5rem;
3002
3327
  }
3003
3328
 
3004
- .pelcro-root .plc-px-1 {
3329
+ .pelcro-root .plc-px-0{
3330
+ padding-left: 0px;
3331
+ padding-right: 0px;
3332
+ }
3333
+
3334
+ .pelcro-root .plc-px-1{
3005
3335
  padding-left: 0.25rem;
3006
3336
  padding-right: 0.25rem;
3007
3337
  }
3008
3338
 
3009
- .pelcro-root .plc-px-2 {
3339
+ .pelcro-root .plc-px-2{
3010
3340
  padding-left: 0.5rem;
3011
3341
  padding-right: 0.5rem;
3012
3342
  }
3013
3343
 
3014
- .pelcro-root .plc-px-3 {
3344
+ .pelcro-root .plc-px-3{
3015
3345
  padding-left: 0.75rem;
3016
3346
  padding-right: 0.75rem;
3017
3347
  }
3018
3348
 
3019
- .pelcro-root .plc-px-4 {
3349
+ .pelcro-root .plc-px-4{
3020
3350
  padding-left: 1rem;
3021
3351
  padding-right: 1rem;
3022
3352
  }
3023
3353
 
3024
- .pelcro-root .plc-px-5 {
3354
+ .pelcro-root .plc-px-5{
3025
3355
  padding-left: 1.25rem;
3026
3356
  padding-right: 1.25rem;
3027
3357
  }
3028
3358
 
3029
- .pelcro-root .plc-px-6 {
3359
+ .pelcro-root .plc-px-6{
3030
3360
  padding-left: 1.5rem;
3031
3361
  padding-right: 1.5rem;
3032
3362
  }
3033
3363
 
3034
- .pelcro-root .plc-px-16 {
3035
- padding-left: 4rem;
3036
- padding-right: 4rem;
3364
+ .pelcro-root .plc-px-8{
3365
+ padding-left: 2rem;
3366
+ padding-right: 2rem;
3037
3367
  }
3038
3368
 
3039
- .pelcro-root .plc-py-1 {
3369
+ .pelcro-root .plc-py-1{
3040
3370
  padding-top: 0.25rem;
3041
3371
  padding-bottom: 0.25rem;
3042
3372
  }
3043
3373
 
3044
- .pelcro-root .plc-py-2 {
3374
+ .pelcro-root .plc-py-2{
3045
3375
  padding-top: 0.5rem;
3046
3376
  padding-bottom: 0.5rem;
3047
3377
  }
3048
3378
 
3049
- .pelcro-root .plc-py-3 {
3379
+ .pelcro-root .plc-py-3{
3050
3380
  padding-top: 0.75rem;
3051
3381
  padding-bottom: 0.75rem;
3052
3382
  }
3053
3383
 
3054
- .pelcro-root .plc-py-4 {
3384
+ .pelcro-root .plc-py-4{
3055
3385
  padding-top: 1rem;
3056
3386
  padding-bottom: 1rem;
3057
3387
  }
3058
3388
 
3059
- .pelcro-root .plc-py-5 {
3389
+ .pelcro-root .plc-py-5{
3060
3390
  padding-top: 1.25rem;
3061
3391
  padding-bottom: 1.25rem;
3062
3392
  }
3063
3393
 
3064
- .pelcro-root .plc-pt-1 {
3394
+ .pelcro-root .plc-py-6{
3395
+ padding-top: 1.5rem;
3396
+ padding-bottom: 1.5rem;
3397
+ }
3398
+
3399
+ .pelcro-root .plc-pt-1{
3065
3400
  padding-top: 0.25rem;
3066
3401
  }
3067
3402
 
3068
- .pelcro-root .plc-pt-2 {
3403
+ .pelcro-root .plc-pt-2{
3069
3404
  padding-top: 0.5rem;
3070
3405
  }
3071
3406
 
3072
- .pelcro-root .plc-pt-4 {
3407
+ .pelcro-root .plc-pt-4{
3073
3408
  padding-top: 1rem;
3074
3409
  }
3075
3410
 
3076
- .pelcro-root .plc-pr-1 {
3411
+ .pelcro-root .plc-pt-5{
3412
+ padding-top: 1.25rem;
3413
+ }
3414
+
3415
+ .pelcro-root .plc-pt-6{
3416
+ padding-top: 1.5rem;
3417
+ }
3418
+
3419
+ .pelcro-root .plc-pr-1{
3077
3420
  padding-right: 0.25rem;
3078
3421
  }
3079
3422
 
3080
- .pelcro-root .plc-pr-2 {
3423
+ .pelcro-root .plc-pr-2{
3081
3424
  padding-right: 0.5rem;
3082
3425
  }
3083
3426
 
3084
- .pelcro-root .plc-pr-4 {
3427
+ .pelcro-root .plc-pr-4{
3085
3428
  padding-right: 1rem;
3086
3429
  }
3087
3430
 
3088
- .pelcro-root .plc-pb-4 {
3431
+ .pelcro-root .plc-pr-8{
3432
+ padding-right: 2rem;
3433
+ }
3434
+
3435
+ .pelcro-root .plc-pb-2{
3436
+ padding-bottom: 0.5rem;
3437
+ }
3438
+
3439
+ .pelcro-root .plc-pb-4{
3089
3440
  padding-bottom: 1rem;
3090
3441
  }
3091
3442
 
3092
- .pelcro-root .plc-pl-2 {
3443
+ .pelcro-root .plc-pl-2{
3093
3444
  padding-left: 0.5rem;
3094
3445
  }
3095
3446
 
3096
- .pelcro-root .plc-pl-4 {
3447
+ .pelcro-root .plc-pl-4{
3097
3448
  padding-left: 1rem;
3098
3449
  }
3099
3450
 
3100
- .pelcro-root .plc-text-left {
3451
+ .pelcro-root .plc-pl-20{
3452
+ padding-left: 5rem;
3453
+ }
3454
+
3455
+ .pelcro-root .plc-text-left{
3101
3456
  text-align: left;
3102
3457
  }
3103
3458
 
3104
- .pelcro-root .plc-text-center {
3459
+ .pelcro-root .plc-text-center{
3105
3460
  text-align: center;
3106
3461
  }
3107
3462
 
3108
- .pelcro-root .plc-align-top {
3463
+ .pelcro-root .plc-text-justify{
3464
+ text-align: justify;
3465
+ }
3466
+
3467
+ .pelcro-root .plc-align-top{
3109
3468
  vertical-align: top;
3110
3469
  }
3111
3470
 
3112
- .pelcro-root .plc-align-middle {
3471
+ .pelcro-root .plc-align-middle{
3113
3472
  vertical-align: middle;
3114
3473
  }
3115
3474
 
3116
- .pelcro-root .plc-text-xs {
3475
+ .pelcro-root .plc-text-xs{
3117
3476
  font-size: 0.75rem;
3118
3477
  line-height: 1rem;
3119
3478
  }
3120
3479
 
3121
- .pelcro-root .plc-text-sm {
3480
+ .pelcro-root .plc-text-sm{
3122
3481
  font-size: 0.875rem;
3123
3482
  line-height: 1.25rem;
3124
3483
  }
3125
3484
 
3126
- .pelcro-root .plc-text-base {
3485
+ .pelcro-root .plc-text-base{
3127
3486
  font-size: 1rem;
3128
3487
  line-height: 1.5rem;
3129
3488
  }
3130
3489
 
3131
- .pelcro-root .plc-text-lg {
3490
+ .pelcro-root .plc-text-lg{
3132
3491
  font-size: 1.125rem;
3133
3492
  line-height: 1.75rem;
3134
3493
  }
3135
3494
 
3136
- .pelcro-root .plc-text-xl {
3495
+ .pelcro-root .plc-text-xl{
3137
3496
  font-size: 1.25rem;
3138
3497
  line-height: 1.75rem;
3139
3498
  }
3140
3499
 
3141
- .pelcro-root .plc-text-2xl {
3500
+ .pelcro-root .plc-text-2xl{
3142
3501
  font-size: 1.5rem;
3143
3502
  line-height: 2rem;
3144
3503
  }
3145
3504
 
3146
- .pelcro-root .plc-text-3xl {
3505
+ .pelcro-root .plc-text-3xl{
3147
3506
  font-size: 1.875rem;
3148
3507
  line-height: 2.25rem;
3149
3508
  }
3150
3509
 
3151
- .pelcro-root .plc-text-4xl {
3152
- font-size: 2.25rem;
3153
- line-height: 2.5rem;
3154
- }
3155
-
3156
- .pelcro-root .plc-font-thin {
3510
+ .pelcro-root .plc-font-thin{
3157
3511
  font-weight: 100;
3158
3512
  }
3159
3513
 
3160
- .pelcro-root .plc-font-normal {
3514
+ .pelcro-root .plc-font-normal{
3161
3515
  font-weight: 400;
3162
3516
  }
3163
3517
 
3164
- .pelcro-root .plc-font-medium {
3518
+ .pelcro-root .plc-font-medium{
3165
3519
  font-weight: 500;
3166
3520
  }
3167
3521
 
3168
- .pelcro-root .plc-font-semibold {
3522
+ .pelcro-root .plc-font-semibold{
3169
3523
  font-weight: 600;
3170
3524
  }
3171
3525
 
3172
- .pelcro-root .plc-font-bold {
3526
+ .pelcro-root .plc-font-bold{
3173
3527
  font-weight: 700;
3174
3528
  }
3175
3529
 
3176
- .pelcro-root .plc-uppercase {
3530
+ .pelcro-root .plc-font-extrabold{
3531
+ font-weight: 800;
3532
+ }
3533
+
3534
+ .pelcro-root .plc-uppercase{
3177
3535
  text-transform: uppercase;
3178
3536
  }
3179
3537
 
3180
- .pelcro-root .plc-capitalize {
3538
+ .pelcro-root .plc-capitalize{
3181
3539
  text-transform: capitalize;
3182
3540
  }
3183
3541
 
3184
- .pelcro-root .plc-tracking-wider {
3542
+ .pelcro-root .plc-tracking-wider{
3185
3543
  letter-spacing: 0.05em;
3186
3544
  }
3187
3545
 
3188
- .pelcro-root .plc-tracking-widest {
3546
+ .pelcro-root .plc-tracking-widest{
3189
3547
  letter-spacing: 0.1em;
3190
3548
  }
3191
3549
 
3192
- .pelcro-root .plc-text-primary-400 {
3550
+ .pelcro-root .plc-text-primary-400{
3193
3551
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3194
3552
  }
3195
3553
 
3196
- .pelcro-root .plc-text-primary-500 {
3554
+ .pelcro-root .plc-text-primary-500{
3197
3555
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3198
3556
  }
3199
3557
 
3200
- .pelcro-root .plc-text-primary-600 {
3558
+ .pelcro-root .plc-text-primary-600{
3201
3559
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
3202
3560
  }
3203
3561
 
3204
- .pelcro-root .plc-text-primary-800 {
3205
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
3562
+ .pelcro-root .plc-text-primary{
3563
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3206
3564
  }
3207
3565
 
3208
- .pelcro-root .plc-text-black {
3566
+ .pelcro-root .plc-text-black{
3209
3567
  --tw-text-opacity: 1;
3210
3568
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3211
3569
  }
3212
3570
 
3213
- .pelcro-root .plc-text-white {
3571
+ .pelcro-root .plc-text-white{
3214
3572
  --tw-text-opacity: 1;
3215
3573
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3216
3574
  }
3217
3575
 
3218
- .pelcro-root .plc-text-gray-400 {
3576
+ .pelcro-root .plc-text-gray-400{
3219
3577
  --tw-text-opacity: 1;
3220
3578
  color: rgba(156, 163, 175, var(--tw-text-opacity));
3221
3579
  }
3222
3580
 
3223
- .pelcro-root .plc-text-gray-500 {
3581
+ .pelcro-root .plc-text-gray-500{
3224
3582
  --tw-text-opacity: 1;
3225
3583
  color: rgba(107, 114, 128, var(--tw-text-opacity));
3226
3584
  }
3227
3585
 
3228
- .pelcro-root .plc-text-gray-600 {
3586
+ .pelcro-root .plc-text-gray-600{
3229
3587
  --tw-text-opacity: 1;
3230
3588
  color: rgba(75, 85, 99, var(--tw-text-opacity));
3231
3589
  }
3232
3590
 
3233
- .pelcro-root .plc-text-gray-700 {
3591
+ .pelcro-root .plc-text-gray-700{
3234
3592
  --tw-text-opacity: 1;
3235
3593
  color: rgba(55, 65, 81, var(--tw-text-opacity));
3236
3594
  }
3237
3595
 
3238
- .pelcro-root .plc-text-gray-900 {
3596
+ .pelcro-root .plc-text-gray-900{
3239
3597
  --tw-text-opacity: 1;
3240
3598
  color: rgba(17, 24, 39, var(--tw-text-opacity));
3241
3599
  }
3242
3600
 
3243
- .pelcro-root .plc-text-red-500 {
3601
+ .pelcro-root .plc-text-red-500{
3244
3602
  --tw-text-opacity: 1;
3245
3603
  color: rgba(180, 48, 43, var(--tw-text-opacity));
3246
3604
  }
3247
3605
 
3248
- .pelcro-root .plc-text-red-700 {
3606
+ .pelcro-root .plc-text-red-700{
3249
3607
  --tw-text-opacity: 1;
3250
3608
  color: rgba(98, 26, 23, var(--tw-text-opacity));
3251
3609
  }
3252
3610
 
3253
- .pelcro-root .plc-text-yellow-700 {
3611
+ .pelcro-root .plc-text-yellow-500{
3612
+ --tw-text-opacity: 1;
3613
+ color: rgba(245, 158, 11, var(--tw-text-opacity));
3614
+ }
3615
+
3616
+ .pelcro-root .plc-text-yellow-700{
3254
3617
  --tw-text-opacity: 1;
3255
3618
  color: rgba(180, 83, 9, var(--tw-text-opacity));
3256
3619
  }
3257
3620
 
3258
- .pelcro-root .plc-text-green-400 {
3621
+ .pelcro-root .plc-text-green-400{
3259
3622
  --tw-text-opacity: 1;
3260
3623
  color: rgba(52, 211, 153, var(--tw-text-opacity));
3261
3624
  }
3262
3625
 
3263
- .pelcro-root .plc-text-green-500 {
3626
+ .pelcro-root .plc-text-green-500{
3264
3627
  --tw-text-opacity: 1;
3265
3628
  color: rgba(16, 185, 129, var(--tw-text-opacity));
3266
3629
  }
3267
3630
 
3268
- .pelcro-root .plc-text-green-600 {
3631
+ .pelcro-root .plc-text-green-600{
3269
3632
  --tw-text-opacity: 1;
3270
3633
  color: rgba(5, 150, 105, var(--tw-text-opacity));
3271
3634
  }
3272
3635
 
3273
- .pelcro-root .plc-text-green-700 {
3636
+ .pelcro-root .plc-text-green-700{
3274
3637
  --tw-text-opacity: 1;
3275
3638
  color: rgba(4, 120, 87, var(--tw-text-opacity));
3276
3639
  }
3277
3640
 
3278
- .pelcro-root .plc-text-blue-400 {
3641
+ .pelcro-root .plc-text-blue-400{
3279
3642
  --tw-text-opacity: 1;
3280
3643
  color: rgba(96, 165, 250, var(--tw-text-opacity));
3281
3644
  }
3282
3645
 
3283
- .pelcro-root .plc-text-blue-500 {
3646
+ .pelcro-root .plc-text-blue-500{
3284
3647
  --tw-text-opacity: 1;
3285
3648
  color: rgba(59, 130, 246, var(--tw-text-opacity));
3286
3649
  }
3287
3650
 
3288
- .pelcro-root .plc-text-blue-700 {
3651
+ .pelcro-root .plc-text-blue-700{
3289
3652
  --tw-text-opacity: 1;
3290
3653
  color: rgba(29, 78, 216, var(--tw-text-opacity));
3291
3654
  }
3292
3655
 
3293
- .pelcro-root .plc-text-orange-700 {
3656
+ .pelcro-root .plc-text-orange-700{
3294
3657
  --tw-text-opacity: 1;
3295
3658
  color: rgba(194, 65, 12, var(--tw-text-opacity));
3296
3659
  }
3297
3660
 
3298
- .pelcro-root .plc-group:hover .group-hover\:plc-text-primary-400 {
3661
+ .pelcro-root .plc-group:hover .group-hover\:plc-text-primary-400{
3299
3662
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3300
3663
  }
3301
3664
 
3302
- .pelcro-root .hover\:plc-text-primary-500:hover {
3665
+ .pelcro-root .hover\:plc-text-primary-500:hover{
3303
3666
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3304
3667
  }
3305
3668
 
3306
- .pelcro-root .hover\:plc-text-primary:hover {
3669
+ .pelcro-root .hover\:plc-text-primary-600:hover{
3670
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
3671
+ }
3672
+
3673
+ .pelcro-root .hover\:plc-text-primary:hover{
3307
3674
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3308
3675
  }
3309
3676
 
3310
- .pelcro-root .hover\:plc-text-black:hover {
3677
+ .pelcro-root .hover\:plc-text-black:hover{
3311
3678
  --tw-text-opacity: 1;
3312
3679
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3313
3680
  }
3314
3681
 
3315
- .pelcro-root .hover\:plc-text-white:hover {
3682
+ .pelcro-root .hover\:plc-text-white:hover{
3316
3683
  --tw-text-opacity: 1;
3317
3684
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3318
3685
  }
3319
3686
 
3320
- .pelcro-root .hover\:plc-text-gray-900:hover {
3687
+ .pelcro-root .hover\:plc-text-gray-900:hover{
3321
3688
  --tw-text-opacity: 1;
3322
3689
  color: rgba(17, 24, 39, var(--tw-text-opacity));
3323
3690
  }
3324
3691
 
3325
- .pelcro-root .focus\:plc-text-black:focus {
3692
+ .pelcro-root .hover\:plc-text-red-500:hover{
3693
+ --tw-text-opacity: 1;
3694
+ color: rgba(180, 48, 43, var(--tw-text-opacity));
3695
+ }
3696
+
3697
+ .pelcro-root .focus\:plc-text-black:focus{
3326
3698
  --tw-text-opacity: 1;
3327
3699
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3328
3700
  }
3329
3701
 
3330
- .pelcro-root .focus\:plc-text-white:focus {
3702
+ .pelcro-root .focus\:plc-text-white:focus{
3331
3703
  --tw-text-opacity: 1;
3332
3704
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3333
3705
  }
3334
3706
 
3335
- .pelcro-root .plc-underline {
3707
+ .pelcro-root .plc-underline{
3336
3708
  text-decoration: underline;
3337
3709
  }
3338
3710
 
3339
- .pelcro-root .plc-no-underline {
3711
+ .pelcro-root .plc-no-underline{
3340
3712
  text-decoration: none;
3341
3713
  }
3342
3714
 
3343
- .pelcro-root .hover\:plc-opacity-30:hover {
3344
- opacity: 0.3;
3715
+ .pelcro-root .hover\:plc-no-underline:hover{
3716
+ text-decoration: none;
3345
3717
  }
3346
3718
 
3347
- *, ::before, ::after {
3719
+ *, ::before, ::after{
3348
3720
  --tw-shadow: 0 0 #0000;
3349
3721
  }
3350
3722
 
3351
- .pelcro-root .plc-shadow-sm {
3723
+ .pelcro-root .plc-shadow-sm{
3352
3724
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3353
3725
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3354
3726
  }
3355
3727
 
3356
- .pelcro-root .plc-shadow-md {
3728
+ .pelcro-root .plc-shadow-md{
3357
3729
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
3358
3730
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3359
3731
  }
3360
3732
 
3361
- .pelcro-root .plc-shadow-md_dark {
3733
+ .pelcro-root .plc-shadow-md_dark{
3362
3734
  --tw-shadow: 0 0px 6px -1px rgba(0, 0, 0, 0.1), 0 0px 4px -1px rgba(0, 0, 0, 0.4);
3363
3735
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3364
3736
  }
3365
3737
 
3366
- .pelcro-root .plc-shadow-lg {
3738
+ .pelcro-root .plc-shadow-lg{
3367
3739
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
3368
3740
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3369
3741
  }
3370
3742
 
3371
- .pelcro-root .plc-shadow-xl {
3743
+ .pelcro-root .plc-shadow-xl{
3372
3744
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
3373
3745
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3374
3746
  }
3375
3747
 
3376
- .pelcro-root .hover\:plc-shadow-none:hover {
3748
+ .pelcro-root .hover\:plc-shadow-sm:hover{
3749
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3750
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3751
+ }
3752
+
3753
+ .pelcro-root .hover\:plc-shadow-none:hover{
3377
3754
  --tw-shadow: 0 0 #0000;
3378
3755
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3379
3756
  }
3380
3757
 
3381
- .pelcro-root .focus\:plc-shadow-none:focus {
3758
+ .pelcro-root .focus\:plc-shadow-none:focus{
3382
3759
  --tw-shadow: 0 0 #0000;
3383
3760
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3384
3761
  }
3385
3762
 
3386
- .pelcro-root .plc-outline-none {
3763
+ .pelcro-root .plc-outline-none{
3387
3764
  outline: 2px solid transparent;
3388
3765
  outline-offset: 2px;
3389
3766
  }
3390
3767
 
3391
- .pelcro-root .focus-within\:plc-outline-none:focus-within {
3768
+ .pelcro-root .focus-within\:plc-outline-none:focus-within{
3392
3769
  outline: 2px solid transparent;
3393
3770
  outline-offset: 2px;
3394
3771
  }
3395
3772
 
3396
- .pelcro-root .focus\:plc-outline-none:focus {
3773
+ .pelcro-root .focus\:plc-outline-none:focus{
3397
3774
  outline: 2px solid transparent;
3398
3775
  outline-offset: 2px;
3399
3776
  }
3400
3777
 
3401
- *, ::before, ::after {
3778
+ *, ::before, ::after{
3402
3779
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3403
3780
  --tw-ring-offset-width: 0px;
3404
3781
  --tw-ring-offset-color: #fff;
@@ -3407,208 +3784,362 @@ in order to scope selectors under pelcro-root
3407
3784
  --tw-ring-shadow: 0 0 #0000;
3408
3785
  }
3409
3786
 
3410
- .pelcro-root .plc-ring-1 {
3787
+ .pelcro-root .plc-ring-1{
3411
3788
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3412
3789
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3413
3790
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3414
3791
  }
3415
3792
 
3416
- .pelcro-root .plc-ring-2 {
3793
+ .pelcro-root .plc-ring-2{
3417
3794
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3418
3795
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3419
3796
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3420
3797
  }
3421
3798
 
3422
- .pelcro-root .focus\:plc-ring-0:focus {
3799
+ .pelcro-root .focus\:plc-ring-0:focus{
3423
3800
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3424
3801
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3425
3802
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3426
3803
  }
3427
3804
 
3428
- .pelcro-root .focus\:plc-ring-2:focus {
3805
+ .pelcro-root .focus\:plc-ring-2:focus{
3429
3806
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3430
3807
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3431
3808
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3432
3809
  }
3433
3810
 
3434
- .pelcro-root .plc-ring-primary-400 {
3811
+ .pelcro-root .plc-ring-primary-400{
3435
3812
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3436
3813
  }
3437
3814
 
3438
- .pelcro-root .plc-ring-gray-200 {
3815
+ .pelcro-root .plc-ring-gray-200{
3439
3816
  --tw-ring-opacity: 1;
3440
3817
  --tw-ring-color: rgba(229, 231, 235, var(--tw-ring-opacity));
3441
3818
  }
3442
3819
 
3443
- .pelcro-root .plc-ring-red-400 {
3444
- --tw-ring-opacity: 1;
3445
- --tw-ring-color: rgba(209, 70, 65, var(--tw-ring-opacity));
3446
- }
3447
-
3448
- .pelcro-root .focus\:plc-ring-primary-300:focus {
3820
+ .pelcro-root .focus\:plc-ring-primary-300:focus{
3449
3821
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
3450
3822
  }
3451
3823
 
3452
- .pelcro-root .focus\:plc-ring-red-500:focus {
3824
+ .pelcro-root .focus\:plc-ring-red-500:focus{
3453
3825
  --tw-ring-opacity: 1;
3454
3826
  --tw-ring-color: rgba(180, 48, 43, var(--tw-ring-opacity));
3455
3827
  }
3456
3828
 
3457
- .pelcro-root .focus\:plc-ring-green-300:focus {
3829
+ .pelcro-root .focus\:plc-ring-green-300:focus{
3458
3830
  --tw-ring-opacity: 1;
3459
3831
  --tw-ring-color: rgba(110, 231, 183, var(--tw-ring-opacity));
3460
3832
  }
3461
3833
 
3462
- .pelcro-root .focus\:plc-ring-blue-400:focus {
3834
+ .pelcro-root .focus\:plc-ring-blue-400:focus{
3463
3835
  --tw-ring-opacity: 1;
3464
3836
  --tw-ring-color: rgba(96, 165, 250, var(--tw-ring-opacity));
3465
3837
  }
3466
3838
 
3467
- .pelcro-root .focus\:plc-ring-blue-500:focus {
3839
+ .pelcro-root .focus\:plc-ring-blue-500:focus{
3468
3840
  --tw-ring-opacity: 1;
3469
3841
  --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
3470
3842
  }
3471
3843
 
3472
- .pelcro-root .plc-transition-all {
3844
+ .pelcro-root .plc-transition-all{
3473
3845
  transition-property: all;
3474
3846
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3475
3847
  transition-duration: 150ms;
3476
3848
  }
3477
3849
 
3478
- .pelcro-root .plc-transition {
3850
+ .pelcro-root .plc-transition{
3479
3851
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
3480
3852
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3481
3853
  transition-duration: 150ms;
3482
3854
  }
3483
3855
 
3484
- .pelcro-root .plc-transition-transform {
3856
+ .pelcro-root .plc-transition-transform{
3485
3857
  transition-property: transform;
3486
3858
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3487
3859
  transition-duration: 150ms;
3488
3860
  }
3489
3861
 
3490
- .pelcro-root .plc-duration-500 {
3862
+ .pelcro-root .plc-duration-500{
3491
3863
  transition-duration: 500ms;
3492
3864
  }
3493
3865
 
3494
- .pelcro-root .plc-ease-out {
3866
+ .pelcro-root .plc-ease-out{
3495
3867
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
3496
3868
  }
3497
3869
 
3498
- @media (min-width: 640px) {
3499
- .pelcro-root .sm\:plc-m-4 {
3500
- margin: 1rem;
3870
+ /* Hide scrollbar for Chrome, Safari and Opera */
3871
+
3872
+ /* Hide scrollbar for IE, Edge and Firefox */
3873
+
3874
+ @media (min-width: 425px){
3875
+ }
3876
+
3877
+ @media (min-width: 640px){
3878
+ .pelcro-root .sm\:plc-top-1\/2{
3879
+ top: 50%;
3501
3880
  }
3502
3881
 
3503
- .pelcro-root .sm\:plc-mb-0 {
3504
- margin-bottom: 0px;
3882
+ .pelcro-root .sm\:plc--right-14{
3883
+ right: -3.5rem;
3505
3884
  }
3506
3885
 
3507
- .pelcro-root .sm\:plc-ml-2 {
3886
+ .pelcro-root .sm\:plc--left-14{
3887
+ left: -3.5rem;
3888
+ }
3889
+
3890
+ .pelcro-root .sm\:plc-m-4{
3891
+ margin: 1rem;
3892
+ }
3893
+
3894
+ .pelcro-root .sm\:plc-ml-2{
3508
3895
  margin-left: 0.5rem;
3509
3896
  }
3510
3897
 
3511
- .pelcro-root .sm\:plc-ml-6 {
3898
+ .pelcro-root .sm\:plc-ml-6{
3512
3899
  margin-left: 1.5rem;
3513
3900
  }
3514
3901
 
3515
- .pelcro-root .sm\:plc-ml-8 {
3902
+ .pelcro-root .sm\:plc-ml-8{
3516
3903
  margin-left: 2rem;
3517
3904
  }
3518
3905
 
3519
- .pelcro-root .sm\:plc-flex {
3520
- display: flex;
3906
+ .pelcro-root .sm\:plc-block{
3907
+ display: block;
3521
3908
  }
3522
3909
 
3523
- .pelcro-root .sm\:plc-inline-grid {
3524
- display: inline-grid;
3910
+ .pelcro-root .sm\:plc-flex{
3911
+ display: flex;
3525
3912
  }
3526
3913
 
3527
- .pelcro-root .sm\:plc-h-8 {
3914
+ .pelcro-root .sm\:plc-h-8{
3528
3915
  height: 2rem;
3529
3916
  }
3530
3917
 
3531
- .pelcro-root .sm\:plc-h-96 {
3918
+ .pelcro-root .sm\:plc-h-96{
3532
3919
  height: 24rem;
3533
3920
  }
3534
3921
 
3535
- .pelcro-root .sm\:plc-w-auto {
3922
+ .pelcro-root .sm\:plc-w-auto{
3536
3923
  width: auto;
3537
3924
  }
3538
3925
 
3539
- .pelcro-root .sm\:plc-w-1\/2 {
3540
- width: 50%;
3541
- }
3542
-
3543
- .pelcro-root .sm\:plc-max-w-md {
3926
+ .pelcro-root .sm\:plc-max-w-md{
3544
3927
  max-width: 28rem;
3545
3928
  }
3546
3929
 
3547
- .pelcro-root .sm\:plc-max-w-90\% {
3930
+ .pelcro-root .sm\:plc-max-w-90\%{
3548
3931
  max-width: 90%;
3549
3932
  }
3550
3933
 
3551
- .pelcro-root .sm\:plc-flex-row {
3934
+ .pelcro-root .sm\:plc--translate-y-1\/2{
3935
+ --tw-translate-y: -50%;
3936
+ }
3937
+
3938
+ .pelcro-root .sm\:plc-flex-row{
3552
3939
  flex-direction: row;
3553
3940
  }
3554
3941
 
3555
- .pelcro-root .sm\:plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
3942
+ .pelcro-root .sm\:plc-items-start{
3943
+ align-items: flex-start;
3944
+ }
3945
+
3946
+ .pelcro-root .sm\:plc-justify-between{
3947
+ justify-content: space-between;
3948
+ }
3949
+
3950
+ .pelcro-root .sm\:plc-space-x-2 > :not([hidden]) ~ :not([hidden]){
3556
3951
  --tw-space-x-reverse: 0;
3557
3952
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3558
3953
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3559
3954
  }
3560
3955
 
3561
- .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]) {
3956
+ .pelcro-root .sm\:plc-space-x-6 > :not([hidden]) ~ :not([hidden]){
3957
+ --tw-space-x-reverse: 0;
3958
+ margin-right: calc(1.5rem * var(--tw-space-x-reverse));
3959
+ margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
3960
+ }
3961
+
3962
+ .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]){
3562
3963
  --tw-space-y-reverse: 0;
3563
3964
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
3564
3965
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
3565
3966
  }
3566
3967
 
3567
- .pelcro-root .sm\:plc-p-2 {
3968
+ .pelcro-root .sm\:plc-p-2{
3568
3969
  padding: 0.5rem;
3569
3970
  }
3570
3971
 
3571
- .pelcro-root .sm\:plc-px-8 {
3972
+ .pelcro-root .sm\:plc-px-8{
3572
3973
  padding-left: 2rem;
3573
3974
  padding-right: 2rem;
3574
3975
  }
3575
3976
 
3576
- .pelcro-root .sm\:plc-pl-8 {
3977
+ .pelcro-root .sm\:plc-px-10{
3978
+ padding-left: 2.5rem;
3979
+ padding-right: 2.5rem;
3980
+ }
3981
+
3982
+ .pelcro-root .sm\:plc-px-14{
3983
+ padding-left: 3.5rem;
3984
+ padding-right: 3.5rem;
3985
+ }
3986
+
3987
+ .pelcro-root .sm\:plc-pl-8{
3577
3988
  padding-left: 2rem;
3578
3989
  }
3579
3990
  }
3580
3991
 
3581
- @media (min-width: 768px) {
3582
- .pelcro-root .md\:plc-max-w-70\% {
3583
- max-width: 70%;
3992
+ @media (min-width: 768px){
3993
+ .pelcro-root .md\:plc-mx-auto{
3994
+ margin-left: auto;
3995
+ margin-right: auto;
3996
+ }
3997
+
3998
+ .pelcro-root .md\:plc-mt-40{
3999
+ margin-top: 10rem;
3584
4000
  }
3585
- }
3586
4001
 
3587
- @media (min-width: 1024px) {
3588
- .pelcro-root .lg\:plc-w-3\/12 {
4002
+ .pelcro-root .md\:plc-mb-20{
4003
+ margin-bottom: 5rem;
4004
+ }
4005
+
4006
+ .pelcro-root .md\:plc-table-cell{
4007
+ display: table-cell;
4008
+ }
4009
+
4010
+ .pelcro-root .md\:plc-hidden{
4011
+ display: none;
4012
+ }
4013
+
4014
+ .pelcro-root .md\:plc-w-1\/5{
4015
+ width: 20%;
4016
+ }
4017
+
4018
+ .pelcro-root .md\:plc-w-2\/5{
4019
+ width: 40%;
4020
+ }
4021
+
4022
+ .pelcro-root .md\:plc-w-1\/12{
4023
+ width: 8.333333%;
4024
+ }
4025
+
4026
+ .pelcro-root .md\:plc-w-2\/12{
4027
+ width: 16.666667%;
4028
+ }
4029
+
4030
+ .pelcro-root .md\:plc-w-3\/12{
3589
4031
  width: 25%;
3590
4032
  }
3591
4033
 
3592
- .pelcro-root .lg\:plc-w-9\/12 {
3593
- width: 75%;
4034
+ .pelcro-root .md\:plc-max-w-xl{
4035
+ max-width: 36rem;
4036
+ }
4037
+
4038
+ .pelcro-root .md\:plc-max-w-60\%{
4039
+ max-width: 60%;
4040
+ }
4041
+
4042
+ .pelcro-root .md\:plc-max-w-70\%{
4043
+ max-width: 70%;
4044
+ }
4045
+
4046
+ .pelcro-root .md\:plc-max-w-80\%{
4047
+ max-width: 80%;
4048
+ }
4049
+
4050
+ .pelcro-root .md\:plc-grid-cols-2{
4051
+ grid-template-columns: repeat(2, minmax(0, 1fr));
4052
+ }
4053
+
4054
+ .pelcro-root .md\:plc-flex-row{
4055
+ flex-direction: row;
4056
+ }
4057
+
4058
+ .pelcro-root .md\:plc-space-x-3 > :not([hidden]) ~ :not([hidden]){
4059
+ --tw-space-x-reverse: 0;
4060
+ margin-right: calc(0.75rem * var(--tw-space-x-reverse));
4061
+ margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
4062
+ }
4063
+
4064
+ .pelcro-root .md\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]){
4065
+ --tw-space-y-reverse: 0;
4066
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
4067
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
4068
+ }
4069
+
4070
+ .pelcro-root .md\:plc-whitespace-normal{
4071
+ white-space: normal;
3594
4072
  }
3595
- }
3596
4073
 
3597
- @media (min-width: 1280px) {
3598
- .pelcro-root .xl\:plc-px-0 {
4074
+ .pelcro-root .md\:plc-whitespace-nowrap{
4075
+ white-space: nowrap;
4076
+ }
4077
+
4078
+ .pelcro-root .md\:plc-p-8{
4079
+ padding: 2rem;
4080
+ }
4081
+
4082
+ .pelcro-root .md\:plc-px-0{
3599
4083
  padding-left: 0px;
3600
4084
  padding-right: 0px;
3601
4085
  }
4086
+ }
4087
+
4088
+ @media (min-width: 1024px){
4089
+ .pelcro-root .lg\:plc-w-3\/12{
4090
+ width: 25%;
4091
+ }
3602
4092
 
3603
- .pelcro-root .xl\:plc-px-16 {
3604
- padding-left: 4rem;
3605
- padding-right: 4rem;
4093
+ .pelcro-root .lg\:plc-w-9\/12{
4094
+ width: 75%;
3606
4095
  }
3607
4096
  }
3608
4097
 
3609
- @media (min-width: 1536px) {
4098
+ @media (min-width: 1280px){
4099
+ }
4100
+
4101
+ @media (min-width: 1536px){
4102
+ }
4103
+
4104
+ /* purgecss start ignore */
4105
+
4106
+ .custom-single-value {
4107
+ display: flex;
4108
+ align-items: center;
4109
+ }
4110
+
4111
+ .custom-option {
4112
+ display: flex;
4113
+ align-items: center;
4114
+ padding: 5px;
4115
+ }
4116
+
4117
+ .custom-option img {
4118
+ margin-right: 10px;
4119
+ }
4120
+
4121
+ .css-hlgwow {
4122
+ display: flex !important;
4123
+ }
4124
+
4125
+ .custom-option {
4126
+ display: flex;
4127
+ align-items: center;
4128
+ cursor: pointer; /* Show pointer cursor on hover */
4129
+ padding: 10px; /* Add padding for better hover area */
3610
4130
  }
3611
4131
 
4132
+ .custom-option:hover {
4133
+ background-color: #f0f0f0; /* Highlight background on hover */
4134
+ }
4135
+
4136
+ .custom-single-value {
4137
+ display: flex;
4138
+ align-items: center;
4139
+ }
4140
+
4141
+ /* purgecss end ignore */
4142
+
3612
4143
  /* purgecss start ignore */
3613
4144
 
3614
4145
  .toggle-switch {