@rovula/ui 0.0.8 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/dist/cjs/bundle.css +497 -4
  2. package/dist/cjs/bundle.js +1 -1
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/AlertDialog/Alert.stories.d.ts +20 -0
  5. package/dist/cjs/types/components/AlertDialog/AlertDialog.d.ts +20 -0
  6. package/dist/cjs/types/components/Button/Button.styles.d.ts +1 -1
  7. package/dist/cjs/types/components/Checkbox/Checkbox.d.ts +4 -0
  8. package/dist/cjs/types/components/Checkbox/Checkbox.stories.d.ts +308 -0
  9. package/dist/cjs/types/components/Dialog/Dialog.d.ts +19 -0
  10. package/dist/cjs/types/components/Dialog/Dialog.stories.d.ts +25 -0
  11. package/dist/cjs/types/components/Dropdown/Dropdown.d.ts +26 -0
  12. package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts +367 -0
  13. package/dist/cjs/types/components/Dropdown/Dropdown.styles.d.ts +11 -0
  14. package/dist/cjs/types/components/Input/Input.d.ts +5 -0
  15. package/dist/cjs/types/components/Input/Input.stories.d.ts +314 -0
  16. package/dist/cjs/types/components/Label/Label.d.ts +5 -0
  17. package/dist/cjs/types/components/Label/Label.stories.d.ts +286 -0
  18. package/dist/cjs/types/components/RadioGroup/RadioGroup.d.ts +5 -0
  19. package/dist/cjs/types/components/RadioGroup/RadioGroup.stories.d.ts +299 -0
  20. package/dist/cjs/types/components/Table/Datagrid.d.ts +11 -0
  21. package/dist/cjs/types/components/Table/Table.d.ts +10 -11
  22. package/dist/cjs/types/components/Table/Table.stories.d.ts +283 -0
  23. package/dist/cjs/types/components/Tabs/Tabs.d.ts +7 -5
  24. package/dist/cjs/types/components/Tabs/Tabs.stories.d.ts +49 -0
  25. package/dist/cjs/types/components/TextInput/TextInput.d.ts +3 -2
  26. package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts +2 -16
  27. package/dist/cjs/types/index.d.ts +8 -2
  28. package/dist/cjs/types/utils/cn.d.ts +2 -0
  29. package/dist/components/AlertDialog/Alert.stories.js +39 -0
  30. package/dist/components/AlertDialog/AlertDialog.js +73 -0
  31. package/dist/components/Button/Button.js +3 -3
  32. package/dist/components/Button/Button.styles.js +1 -1
  33. package/dist/components/Checkbox/Checkbox.js +37 -0
  34. package/dist/components/Checkbox/Checkbox.stories.js +49 -0
  35. package/dist/components/Dialog/Dialog.js +63 -0
  36. package/dist/components/Dialog/Dialog.stories.js +52 -0
  37. package/dist/components/Dropdown/Dropdown.js +58 -0
  38. package/dist/components/{Select/Select.stories.js → Dropdown/Dropdown.stories.js} +8 -11
  39. package/dist/components/Dropdown/Dropdown.styles.js +47 -0
  40. package/dist/components/Input/Input.js +31 -0
  41. package/dist/components/Input/Input.stories.js +37 -0
  42. package/dist/components/Label/Label.js +35 -0
  43. package/dist/components/Label/Label.stories.js +38 -0
  44. package/dist/components/RadioGroup/RadioGroup.js +41 -0
  45. package/dist/components/RadioGroup/RadioGroup.stories.js +44 -0
  46. package/dist/components/Table/Datagrid.js +6 -0
  47. package/dist/components/Table/Table.js +65 -5
  48. package/dist/components/Table/Table.stories.js +32 -0
  49. package/dist/components/Tabs/Tabs.js +10 -4
  50. package/dist/components/Tabs/Tabs.stories.js +60 -0
  51. package/dist/components/TextInput/TextInput.js +3 -3
  52. package/dist/esm/bundle.css +497 -4
  53. package/dist/esm/bundle.js +1 -1
  54. package/dist/esm/bundle.js.map +1 -1
  55. package/dist/esm/types/components/AlertDialog/Alert.stories.d.ts +20 -0
  56. package/dist/esm/types/components/AlertDialog/AlertDialog.d.ts +20 -0
  57. package/dist/esm/types/components/Button/Button.styles.d.ts +1 -1
  58. package/dist/esm/types/components/Checkbox/Checkbox.d.ts +4 -0
  59. package/dist/esm/types/components/Checkbox/Checkbox.stories.d.ts +308 -0
  60. package/dist/esm/types/components/Dialog/Dialog.d.ts +19 -0
  61. package/dist/esm/types/components/Dialog/Dialog.stories.d.ts +25 -0
  62. package/dist/esm/types/components/Dropdown/Dropdown.d.ts +26 -0
  63. package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts +367 -0
  64. package/dist/esm/types/components/Dropdown/Dropdown.styles.d.ts +11 -0
  65. package/dist/esm/types/components/Input/Input.d.ts +5 -0
  66. package/dist/esm/types/components/Input/Input.stories.d.ts +314 -0
  67. package/dist/esm/types/components/Label/Label.d.ts +5 -0
  68. package/dist/esm/types/components/Label/Label.stories.d.ts +286 -0
  69. package/dist/esm/types/components/RadioGroup/RadioGroup.d.ts +5 -0
  70. package/dist/esm/types/components/RadioGroup/RadioGroup.stories.d.ts +299 -0
  71. package/dist/esm/types/components/Table/Datagrid.d.ts +11 -0
  72. package/dist/esm/types/components/Table/Table.d.ts +10 -11
  73. package/dist/esm/types/components/Table/Table.stories.d.ts +283 -0
  74. package/dist/esm/types/components/Tabs/Tabs.d.ts +7 -5
  75. package/dist/esm/types/components/Tabs/Tabs.stories.d.ts +49 -0
  76. package/dist/esm/types/components/TextInput/TextInput.d.ts +3 -2
  77. package/dist/esm/types/components/TextInput/TextInput.stories.d.ts +2 -16
  78. package/dist/esm/types/index.d.ts +8 -2
  79. package/dist/esm/types/utils/cn.d.ts +2 -0
  80. package/dist/index.d.ts +88 -30
  81. package/dist/index.js +8 -2
  82. package/dist/src/theme/global.css +598 -4
  83. package/dist/theme/global.css +57 -0
  84. package/dist/theme/main-preset.js +29 -1
  85. package/dist/theme/presets/colors.js +19 -0
  86. package/dist/utils/cn.js +9 -0
  87. package/package.json +9 -1
  88. package/src/components/AlertDialog/Alert.stories.tsx +67 -0
  89. package/src/components/AlertDialog/AlertDialog.tsx +142 -0
  90. package/src/components/Button/Button.styles.ts +1 -1
  91. package/src/components/Button/Button.tsx +4 -4
  92. package/src/components/Checkbox/Checkbox.stories.tsx +91 -0
  93. package/src/components/Checkbox/Checkbox.tsx +36 -0
  94. package/src/components/Dialog/Dialog.stories.tsx +118 -0
  95. package/src/components/Dialog/Dialog.tsx +119 -0
  96. package/src/components/{Select/Select.stories.tsx → Dropdown/Dropdown.stories.tsx} +11 -14
  97. package/src/components/Dropdown/Dropdown.styles.ts +54 -0
  98. package/src/components/Dropdown/Dropdown.tsx +151 -0
  99. package/src/components/Input/Input.stories.tsx +40 -0
  100. package/src/components/Input/Input.tsx +25 -0
  101. package/src/components/Label/Label.stories.tsx +45 -0
  102. package/src/components/Label/Label.tsx +26 -0
  103. package/src/components/RadioGroup/RadioGroup.stories.tsx +71 -0
  104. package/src/components/RadioGroup/RadioGroup.tsx +59 -0
  105. package/src/components/Table/Datagrid.tsx +36 -0
  106. package/src/components/Table/Table.stories.tsx +79 -0
  107. package/src/components/Table/Table.tsx +116 -35
  108. package/src/components/Tabs/Tabs.stories.tsx +75 -0
  109. package/src/components/Tabs/Tabs.tsx +39 -10
  110. package/src/components/TextInput/TextInput.tsx +11 -2
  111. package/src/index.ts +9 -2
  112. package/src/theme/global.css +57 -0
  113. package/src/theme/main-preset.js +29 -1
  114. package/src/theme/presets/colors.js +19 -0
  115. package/src/utils/cn.ts +6 -0
  116. package/dist/cjs/types/components/Select/Select copy.d.ts +0 -23
  117. package/dist/cjs/types/components/Select/Select.d.ts +0 -23
  118. package/dist/cjs/types/components/Select/Select.stories.d.ts +0 -348
  119. package/dist/cjs/types/components/Select/Select.styles.d.ts +0 -14
  120. package/dist/components/Select/Select copy.js +0 -42
  121. package/dist/components/Select/Select.js +0 -21
  122. package/dist/components/Select/Select.styles.js +0 -100
  123. package/dist/esm/types/components/Select/Select copy.d.ts +0 -23
  124. package/dist/esm/types/components/Select/Select.d.ts +0 -23
  125. package/dist/esm/types/components/Select/Select.stories.d.ts +0 -348
  126. package/dist/esm/types/components/Select/Select.styles.d.ts +0 -14
  127. package/src/components/Select/Select copy.tsx +0 -103
  128. package/src/components/Select/Select.styles.ts +0 -111
  129. package/src/components/Select/Select.tsx +0 -54
@@ -665,6 +665,49 @@ video {
665
665
  --input-disabled-stroke-color: 239 239 239;
666
666
  --input-disabled-background-color: 247 247 247;
667
667
  --input-label-background-color: 249 251 255;
668
+ /* Text */
669
+ --text-default-dark: 1 1 68;
670
+ --text-default-medium: 47 78 255;
671
+ --text-default-light: 213 230 255;
672
+ --text-grey-dark: 29 30 39;
673
+ --text-grey-medium: 117 121 128;
674
+ --text-grey-light: 164 169 178;
675
+ --text-white: 255 255 255;
676
+ /* Other/Popup */
677
+ --popup-background: 249 251 255;
678
+ /* Other/Popup Curtain */
679
+ --popup-overlay: 0 0 0;
680
+ --popup-overlay-alpha: 0.48;
681
+ --popup-rounded: 24px;
682
+ /* TODO for shadcn, wait for refactor */
683
+ /* --background: 0 0% 100%; */
684
+ --background: 220 100% 99%;
685
+ --foreground: 222.2 47.4% 11.2%;
686
+ --muted: 210 40% 96.1%;
687
+ --muted-foreground: 215.4 16.3% 46.9%;
688
+ --popover: 0 0% 100%;
689
+ --popover-foreground: 222.2 47.4% 11.2%;
690
+ --border: 214.3 31.8% 91.4%;
691
+ --input: 214.3 31.8% 91.4%;
692
+ --card: 0 0% 100%;
693
+ --card-foreground: 222.2 47.4% 11.2%;
694
+ --primary: var(--primary-default);
695
+ --secondary: var(--secondary-default);
696
+ --accent: 210 40% 96.1%;
697
+ --accent-foreground: 222.2 47.4% 11.2%;
698
+ --destructive: 0 100% 50%;
699
+ --destructive-foreground: 210 40% 98%;
700
+ --ring: 215 20.2% 65.1%;
701
+ --radius: 0.5rem;
702
+ }
703
+
704
+ * {
705
+ border-color: hsl(var(--border));
706
+ }
707
+
708
+ body {
709
+ background-color: hsl(var(--background));
710
+ color: hsl(var(--foreground));
668
711
  }
669
712
 
670
713
  *, ::before, ::after {
@@ -775,10 +818,40 @@ video {
775
818
  --tw-contain-style: ;
776
819
  }
777
820
 
821
+ .container {
822
+ width: 100%;
823
+ margin-right: auto;
824
+ margin-left: auto;
825
+ padding-right: 2rem;
826
+ padding-left: 2rem;
827
+ }
828
+
829
+ @media (min-width: 1400px) {
830
+ .container {
831
+ max-width: 1400px;
832
+ }
833
+ }
834
+
835
+ .sr-only {
836
+ position: absolute;
837
+ width: 1px;
838
+ height: 1px;
839
+ padding: 0;
840
+ margin: -1px;
841
+ overflow: hidden;
842
+ clip: rect(0, 0, 0, 0);
843
+ white-space: nowrap;
844
+ border-width: 0;
845
+ }
846
+
778
847
  .pointer-events-none {
779
848
  pointer-events: none;
780
849
  }
781
850
 
851
+ .fixed {
852
+ position: fixed;
853
+ }
854
+
782
855
  .absolute {
783
856
  position: absolute;
784
857
  }
@@ -787,6 +860,10 @@ video {
787
860
  position: relative;
788
861
  }
789
862
 
863
+ .inset-0 {
864
+ inset: 0px;
865
+ }
866
+
790
867
  .inset-y-0 {
791
868
  top: 0px;
792
869
  bottom: 0px;
@@ -808,22 +885,38 @@ video {
808
885
  left: 1rem;
809
886
  }
810
887
 
888
+ .left-\[50\%\] {
889
+ left: 50%;
890
+ }
891
+
811
892
  .right-0 {
812
893
  right: 0px;
813
894
  }
814
895
 
815
- .top-2 {
816
- top: 0.5rem;
896
+ .right-4 {
897
+ right: 1rem;
817
898
  }
818
899
 
819
900
  .top-4 {
820
901
  top: 1rem;
821
902
  }
822
903
 
904
+ .top-\[50\%\] {
905
+ top: 50%;
906
+ }
907
+
908
+ .z-10 {
909
+ z-index: 10;
910
+ }
911
+
823
912
  .z-50 {
824
913
  z-index: 50;
825
914
  }
826
915
 
916
+ .col-span-3 {
917
+ grid-column: span 3 / span 3;
918
+ }
919
+
827
920
  .mx-auto {
828
921
  margin-left: auto;
829
922
  margin-right: auto;
@@ -850,6 +943,14 @@ video {
850
943
  margin-top: 0.25rem;
851
944
  }
852
945
 
946
+ .mt-2 {
947
+ margin-top: 0.5rem;
948
+ }
949
+
950
+ .mt-4 {
951
+ margin-top: 1rem;
952
+ }
953
+
853
954
  .mt-\[6px\] {
854
955
  margin-top: 6px;
855
956
  }
@@ -882,6 +983,20 @@ video {
882
983
  display: none;
883
984
  }
884
985
 
986
+ .aspect-square {
987
+ aspect-ratio: 1 / 1;
988
+ }
989
+
990
+ .size-2 {
991
+ width: 0.5rem;
992
+ height: 0.5rem;
993
+ }
994
+
995
+ .size-2\.5 {
996
+ width: 0.625rem;
997
+ height: 0.625rem;
998
+ }
999
+
885
1000
  .size-3 {
886
1001
  width: 0.75rem;
887
1002
  height: 0.75rem;
@@ -897,6 +1012,44 @@ video {
897
1012
  height: 1.25rem;
898
1013
  }
899
1014
 
1015
+ .size-6 {
1016
+ width: 1.5rem;
1017
+ height: 1.5rem;
1018
+ }
1019
+
1020
+ .size-\[14px\] {
1021
+ width: 14px;
1022
+ height: 14px;
1023
+ }
1024
+
1025
+ .h-10 {
1026
+ height: 2.5rem;
1027
+ }
1028
+
1029
+ .h-12 {
1030
+ height: 3rem;
1031
+ }
1032
+
1033
+ .h-4 {
1034
+ height: 1rem;
1035
+ }
1036
+
1037
+ .h-\[54px\] {
1038
+ height: 54px;
1039
+ }
1040
+
1041
+ .max-h-60 {
1042
+ max-height: 15rem;
1043
+ }
1044
+
1045
+ .w-4 {
1046
+ width: 1rem;
1047
+ }
1048
+
1049
+ .w-\[100px\] {
1050
+ width: 100px;
1051
+ }
1052
+
900
1053
  .w-\[200px\] {
901
1054
  width: 200px;
902
1055
  }
@@ -917,6 +1070,33 @@ video {
917
1070
  max-width: 48rem;
918
1071
  }
919
1072
 
1073
+ .max-w-lg {
1074
+ max-width: 32rem;
1075
+ }
1076
+
1077
+ .shrink-0 {
1078
+ flex-shrink: 0;
1079
+ }
1080
+
1081
+ .caption-bottom {
1082
+ caption-side: bottom;
1083
+ }
1084
+
1085
+ .translate-x-\[-50\%\] {
1086
+ --tw-translate-x: -50%;
1087
+ transform: translate(var(--tw-translate-x), 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));
1088
+ }
1089
+
1090
+ .translate-y-\[-50\%\] {
1091
+ --tw-translate-y: -50%;
1092
+ transform: translate(var(--tw-translate-x), 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));
1093
+ }
1094
+
1095
+ .rotate-180 {
1096
+ --tw-rotate: 180deg;
1097
+ transform: translate(var(--tw-translate-x), 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));
1098
+ }
1099
+
920
1100
  .cursor-pointer {
921
1101
  cursor: pointer;
922
1102
  }
@@ -933,6 +1113,10 @@ video {
933
1113
  appearance: none;
934
1114
  }
935
1115
 
1116
+ .grid-cols-4 {
1117
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1118
+ }
1119
+
936
1120
  .grid-cols-\[auto_1fr\] {
937
1121
  grid-template-columns: auto 1fr;
938
1122
  }
@@ -945,6 +1129,10 @@ video {
945
1129
  flex-direction: column;
946
1130
  }
947
1131
 
1132
+ .flex-col-reverse {
1133
+ flex-direction: column-reverse;
1134
+ }
1135
+
948
1136
  .items-center {
949
1137
  align-items: center;
950
1138
  }
@@ -957,14 +1145,26 @@ video {
957
1145
  gap: 0.25rem;
958
1146
  }
959
1147
 
1148
+ .gap-1\.5 {
1149
+ gap: 0.375rem;
1150
+ }
1151
+
960
1152
  .gap-2 {
961
1153
  gap: 0.5rem;
962
1154
  }
963
1155
 
1156
+ .gap-3 {
1157
+ gap: 0.75rem;
1158
+ }
1159
+
964
1160
  .gap-4 {
965
1161
  gap: 1rem;
966
1162
  }
967
1163
 
1164
+ .gap-6 {
1165
+ gap: 1.5rem;
1166
+ }
1167
+
968
1168
  .gap-x-8 {
969
1169
  -moz-column-gap: 2rem;
970
1170
  column-gap: 2rem;
@@ -978,10 +1178,36 @@ video {
978
1178
  row-gap: 1.5rem;
979
1179
  }
980
1180
 
1181
+ .space-x-2 > :not([hidden]) ~ :not([hidden]) {
1182
+ --tw-space-x-reverse: 0;
1183
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1184
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
1185
+ }
1186
+
1187
+ .space-y-2 > :not([hidden]) ~ :not([hidden]) {
1188
+ --tw-space-y-reverse: 0;
1189
+ margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
1190
+ margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
1191
+ }
1192
+
1193
+ .space-y-4 > :not([hidden]) ~ :not([hidden]) {
1194
+ --tw-space-y-reverse: 0;
1195
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
1196
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
1197
+ }
1198
+
1199
+ .overflow-auto {
1200
+ overflow: auto;
1201
+ }
1202
+
981
1203
  .overflow-x-auto {
982
1204
  overflow-x: auto;
983
1205
  }
984
1206
 
1207
+ .overflow-y-auto {
1208
+ overflow-y: auto;
1209
+ }
1210
+
985
1211
  .whitespace-nowrap {
986
1212
  white-space: nowrap;
987
1213
  }
@@ -1007,7 +1233,11 @@ video {
1007
1233
  }
1008
1234
 
1009
1235
  .rounded-lg {
1010
- border-radius: 0.5rem;
1236
+ border-radius: var(--radius);
1237
+ }
1238
+
1239
+ .rounded-md {
1240
+ border-radius: calc(var(--radius) - 2px);
1011
1241
  }
1012
1242
 
1013
1243
  .rounded-none {
@@ -1015,7 +1245,7 @@ video {
1015
1245
  }
1016
1246
 
1017
1247
  .rounded-sm {
1018
- border-radius: 0.125rem;
1248
+ border-radius: calc(var(--radius) - 4px);
1019
1249
  }
1020
1250
 
1021
1251
  .rounded-xl {
@@ -1030,15 +1260,32 @@ video {
1030
1260
  border-width: 0px;
1031
1261
  }
1032
1262
 
1263
+ .border-b {
1264
+ border-bottom-width: 1px;
1265
+ }
1266
+
1033
1267
  .border-b-2 {
1034
1268
  border-bottom-width: 2px;
1035
1269
  }
1036
1270
 
1271
+ .border-b-\[3px\] {
1272
+ border-bottom-width: 3px;
1273
+ }
1274
+
1275
+ .border-t {
1276
+ border-top-width: 1px;
1277
+ }
1278
+
1037
1279
  .border-error {
1038
1280
  --tw-border-opacity: 1;
1039
1281
  border-color: rgb(var(--error-100) / var(--tw-border-opacity));
1040
1282
  }
1041
1283
 
1284
+ .border-gray-300 {
1285
+ --tw-border-opacity: 1;
1286
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
1287
+ }
1288
+
1042
1289
  .border-info {
1043
1290
  --tw-border-opacity: 1;
1044
1291
  border-color: rgb(var(--info-default) / var(--tw-border-opacity));
@@ -1054,11 +1301,26 @@ video {
1054
1301
  border-color: rgb(var(--primary-default) / var(--tw-border-opacity));
1055
1302
  }
1056
1303
 
1304
+ .border-primary-10 {
1305
+ --tw-border-opacity: 1;
1306
+ border-color: rgb(var(--primary-10) / var(--tw-border-opacity));
1307
+ }
1308
+
1309
+ .border-primary-30 {
1310
+ --tw-border-opacity: 1;
1311
+ border-color: rgb(var(--primary-30) / var(--tw-border-opacity));
1312
+ }
1313
+
1057
1314
  .border-secondary {
1058
1315
  --tw-border-opacity: 1;
1059
1316
  border-color: rgb(var(--secondary-default) / var(--tw-border-opacity));
1060
1317
  }
1061
1318
 
1319
+ .border-secondary-110 {
1320
+ --tw-border-opacity: 1;
1321
+ border-color: rgb(var(--secondary-110) / var(--tw-border-opacity));
1322
+ }
1323
+
1062
1324
  .border-success {
1063
1325
  --tw-border-opacity: 1;
1064
1326
  border-color: rgb(var(--success-default) / var(--tw-border-opacity));
@@ -1069,6 +1331,11 @@ video {
1069
1331
  border-color: rgb(var(--tertiary-120) / var(--tw-border-opacity));
1070
1332
  }
1071
1333
 
1334
+ .border-textcolor-dark {
1335
+ --tw-border-opacity: 1;
1336
+ border-color: rgb(var(--text-default-dark) / var(--tw-border-opacity));
1337
+ }
1338
+
1072
1339
  .border-transparent {
1073
1340
  border-color: transparent;
1074
1341
  }
@@ -1078,11 +1345,25 @@ video {
1078
1345
  border-color: rgb(var(--warning-default) / var(--tw-border-opacity));
1079
1346
  }
1080
1347
 
1348
+ .bg-background {
1349
+ background-color: hsl(var(--background));
1350
+ }
1351
+
1081
1352
  .bg-error {
1082
1353
  --tw-bg-opacity: 1;
1083
1354
  background-color: rgb(var(--error-100) / var(--tw-bg-opacity));
1084
1355
  }
1085
1356
 
1357
+ .bg-gray-200 {
1358
+ --tw-bg-opacity: 1;
1359
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity));
1360
+ }
1361
+
1362
+ .bg-grey2-300 {
1363
+ --tw-bg-opacity: 1;
1364
+ background-color: rgb(var(--grey2-300) / var(--tw-bg-opacity));
1365
+ }
1366
+
1086
1367
  .bg-info {
1087
1368
  --tw-bg-opacity: 1;
1088
1369
  background-color: rgb(var(--info-default) / var(--tw-bg-opacity));
@@ -1093,6 +1374,15 @@ video {
1093
1374
  background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
1094
1375
  }
1095
1376
 
1377
+ .bg-popup-background {
1378
+ --tw-bg-opacity: 1;
1379
+ background-color: rgb(var(--popup-background) / var(--tw-bg-opacity));
1380
+ }
1381
+
1382
+ .bg-popup-overlay {
1383
+ background-color: rgb(var(--popup-overlay) / var(--popup-overlay-alpha));
1384
+ }
1385
+
1096
1386
  .bg-primary {
1097
1387
  --tw-bg-opacity: 1;
1098
1388
  background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
@@ -1127,6 +1417,15 @@ video {
1127
1417
  background-color: rgb(var(--warning-default) / var(--tw-bg-opacity));
1128
1418
  }
1129
1419
 
1420
+ .bg-white {
1421
+ --tw-bg-opacity: 1;
1422
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1423
+ }
1424
+
1425
+ .fill-current {
1426
+ fill: currentColor;
1427
+ }
1428
+
1130
1429
  .fill-error {
1131
1430
  fill: rgb(var(--error-100) / 1);
1132
1431
  }
@@ -1135,6 +1434,22 @@ video {
1135
1434
  fill: rgb(var(--input-active-stroke-color) / 1);
1136
1435
  }
1137
1436
 
1437
+ .fill-input-text {
1438
+ fill: rgb(var(--input-default-text-color) / 1);
1439
+ }
1440
+
1441
+ .fill-input-text-active {
1442
+ fill: rgb(var(--input-active-text-color) / 1);
1443
+ }
1444
+
1445
+ .fill-input-text-disabled {
1446
+ fill: rgb(var(--input-disabled-text-color) / 1);
1447
+ }
1448
+
1449
+ .fill-secondary-110 {
1450
+ fill: rgb(var(--secondary-110) / 1);
1451
+ }
1452
+
1138
1453
  .p-1 {
1139
1454
  padding: 0.25rem;
1140
1455
  }
@@ -1151,6 +1466,19 @@ video {
1151
1466
  padding: 1.25rem;
1152
1467
  }
1153
1468
 
1469
+ .p-6 {
1470
+ padding: 1.5rem;
1471
+ }
1472
+
1473
+ .p-8 {
1474
+ padding: 2rem;
1475
+ }
1476
+
1477
+ .px-1 {
1478
+ padding-left: 0.25rem;
1479
+ padding-right: 0.25rem;
1480
+ }
1481
+
1154
1482
  .px-3 {
1155
1483
  padding-left: 0.75rem;
1156
1484
  padding-right: 0.75rem;
@@ -1176,6 +1504,11 @@ video {
1176
1504
  padding-bottom: 0.25rem;
1177
1505
  }
1178
1506
 
1507
+ .py-14 {
1508
+ padding-top: 3.5rem;
1509
+ padding-bottom: 3.5rem;
1510
+ }
1511
+
1179
1512
  .py-2 {
1180
1513
  padding-top: 0.5rem;
1181
1514
  padding-bottom: 0.5rem;
@@ -1186,6 +1519,30 @@ video {
1186
1519
  padding-bottom: 1rem;
1187
1520
  }
1188
1521
 
1522
+ .pe-\[30px\] {
1523
+ padding-inline-end: 30px;
1524
+ }
1525
+
1526
+ .pe-\[40px\] {
1527
+ padding-inline-end: 40px;
1528
+ }
1529
+
1530
+ .pe-\[48px\] {
1531
+ padding-inline-end: 48px;
1532
+ }
1533
+
1534
+ .text-left {
1535
+ text-align: left;
1536
+ }
1537
+
1538
+ .text-center {
1539
+ text-align: center;
1540
+ }
1541
+
1542
+ .text-right {
1543
+ text-align: right;
1544
+ }
1545
+
1189
1546
  .align-middle {
1190
1547
  vertical-align: middle;
1191
1548
  }
@@ -1342,15 +1699,27 @@ video {
1342
1699
  text-transform: capitalize;
1343
1700
  }
1344
1701
 
1702
+ .leading-none {
1703
+ line-height: 1;
1704
+ }
1705
+
1345
1706
  .tracking-\[\.02857em\] {
1346
1707
  letter-spacing: .02857em;
1347
1708
  }
1348
1709
 
1710
+ .tracking-tight {
1711
+ letter-spacing: -0.025em;
1712
+ }
1713
+
1349
1714
  .text-black {
1350
1715
  --tw-text-opacity: 1;
1351
1716
  color: rgb(0 0 0 / var(--tw-text-opacity));
1352
1717
  }
1353
1718
 
1719
+ .text-current {
1720
+ color: currentColor;
1721
+ }
1722
+
1354
1723
  .text-error {
1355
1724
  --tw-text-opacity: 1;
1356
1725
  color: rgb(var(--error-100) / var(--tw-text-opacity));
@@ -1396,6 +1765,11 @@ video {
1396
1765
  color: rgb(var(--primary-foreground) / var(--tw-text-opacity));
1397
1766
  }
1398
1767
 
1768
+ .text-secondary-110 {
1769
+ --tw-text-opacity: 1;
1770
+ color: rgb(var(--secondary-110) / var(--tw-text-opacity));
1771
+ }
1772
+
1399
1773
  .text-secondary-130 {
1400
1774
  --tw-text-opacity: 1;
1401
1775
  color: rgb(var(--secondary-130) / var(--tw-text-opacity));
@@ -1426,6 +1800,21 @@ video {
1426
1800
  color: rgb(var(--tertiary-foreground) / var(--tw-text-opacity));
1427
1801
  }
1428
1802
 
1803
+ .text-textcolor-dark {
1804
+ --tw-text-opacity: 1;
1805
+ color: rgb(var(--text-default-dark) / var(--tw-text-opacity));
1806
+ }
1807
+
1808
+ .text-textcolor-grey-dark {
1809
+ --tw-text-opacity: 1;
1810
+ color: rgb(var(--text-grey-dark) / var(--tw-text-opacity));
1811
+ }
1812
+
1813
+ .text-textcolor-grey-light {
1814
+ --tw-text-opacity: 1;
1815
+ color: rgb(var(--text-grey-light) / var(--tw-text-opacity));
1816
+ }
1817
+
1429
1818
  .text-warning {
1430
1819
  --tw-text-opacity: 1;
1431
1820
  color: rgb(var(--warning-default) / var(--tw-text-opacity));
@@ -1453,6 +1842,22 @@ video {
1453
1842
  text-underline-offset: 4px;
1454
1843
  }
1455
1844
 
1845
+ .opacity-70 {
1846
+ opacity: 0.7;
1847
+ }
1848
+
1849
+ .shadow-lg {
1850
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1851
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1852
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1853
+ }
1854
+
1855
+ .shadow-md {
1856
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1857
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1858
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1859
+ }
1860
+
1456
1861
  .outline-none {
1457
1862
  outline: 2px solid transparent;
1458
1863
  outline-offset: 2px;
@@ -1462,6 +1867,12 @@ video {
1462
1867
  outline-style: solid;
1463
1868
  }
1464
1869
 
1870
+ .ring {
1871
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1872
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1873
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1874
+ }
1875
+
1465
1876
  .ring-1 {
1466
1877
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1467
1878
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1487,6 +1898,14 @@ video {
1487
1898
  --tw-ring-color: rgb(var(--input-disabled-stroke-color) / var(--tw-ring-opacity));
1488
1899
  }
1489
1900
 
1901
+ .ring-offset-background {
1902
+ --tw-ring-offset-color: hsl(var(--background));
1903
+ }
1904
+
1905
+ .filter {
1906
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1907
+ }
1908
+
1490
1909
  .transition-all {
1491
1910
  transition-property: all;
1492
1911
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1499,6 +1918,16 @@ video {
1499
1918
  transition-duration: 150ms;
1500
1919
  }
1501
1920
 
1921
+ .transition-opacity {
1922
+ transition-property: opacity;
1923
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1924
+ transition-duration: 150ms;
1925
+ }
1926
+
1927
+ .duration-200 {
1928
+ transition-duration: 200ms;
1929
+ }
1930
+
1502
1931
  .duration-300 {
1503
1932
  transition-duration: 300ms;
1504
1933
  }
@@ -1507,6 +1936,10 @@ video {
1507
1936
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1508
1937
  }
1509
1938
 
1939
+ .ease-out {
1940
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1941
+ }
1942
+
1510
1943
  .typography-h1 {
1511
1944
  font-size: 64px;
1512
1945
  line-height: 80px;
@@ -1633,6 +2066,23 @@ video {
1633
2066
  font-weight: 400;
1634
2067
  }
1635
2068
 
2069
+ .file\:border-0::file-selector-button {
2070
+ border-width: 0px;
2071
+ }
2072
+
2073
+ .file\:bg-transparent::file-selector-button {
2074
+ background-color: transparent;
2075
+ }
2076
+
2077
+ .file\:text-sm::file-selector-button {
2078
+ font-size: 0.875rem;
2079
+ line-height: 1.25rem;
2080
+ }
2081
+
2082
+ .file\:font-medium::file-selector-button {
2083
+ font-weight: 500;
2084
+ }
2085
+
1636
2086
  .placeholder\:text-input-text-disabled::-moz-placeholder {
1637
2087
  --tw-text-opacity: 1;
1638
2088
  color: rgb(var(--input-disabled-text-color) / var(--tw-text-opacity));
@@ -1671,6 +2121,11 @@ video {
1671
2121
  background-color: rgb(var(--error-120) / var(--tw-bg-opacity));
1672
2122
  }
1673
2123
 
2124
+ .hover\:bg-gray-100:hover {
2125
+ --tw-bg-opacity: 1;
2126
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
2127
+ }
2128
+
1674
2129
  .hover\:bg-info-100:hover {
1675
2130
  --tw-bg-opacity: 1;
1676
2131
  background-color: rgb(var(--info-100)) / var(--tw-bg-opacity));
@@ -1717,10 +2172,19 @@ video {
1717
2172
  fill: rgb(var(--input-default-text-color) / 1);
1718
2173
  }
1719
2174
 
2175
+ .hover\:text-textcolor-dark:hover {
2176
+ --tw-text-opacity: 1;
2177
+ color: rgb(var(--text-default-dark) / var(--tw-text-opacity));
2178
+ }
2179
+
1720
2180
  .hover\:text-opacity-80:hover {
1721
2181
  --tw-text-opacity: 0.8;
1722
2182
  }
1723
2183
 
2184
+ .hover\:opacity-100:hover {
2185
+ opacity: 1;
2186
+ }
2187
+
1724
2188
  .focus\:border-input-stroke:focus {
1725
2189
  --tw-border-opacity: 1;
1726
2190
  border-color: rgb(var(--input-default-stroke-color) / var(--tw-border-opacity));
@@ -1738,12 +2202,23 @@ video {
1738
2202
  padding-inline-end: 2rem;
1739
2203
  }
1740
2204
 
2205
+ .focus\:outline-none:focus {
2206
+ outline: 2px solid transparent;
2207
+ outline-offset: 2px;
2208
+ }
2209
+
1741
2210
  .focus\:ring-1:focus {
1742
2211
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1743
2212
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1744
2213
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1745
2214
  }
1746
2215
 
2216
+ .focus\:ring-2:focus {
2217
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2218
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2219
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2220
+ }
2221
+
1747
2222
  .focus\:ring-inset:focus {
1748
2223
  --tw-ring-inset: inset;
1749
2224
  }
@@ -1758,12 +2233,60 @@ video {
1758
2233
  --tw-ring-color: rgb(var(--input-active-stroke-color) / var(--tw-ring-opacity));
1759
2234
  }
1760
2235
 
2236
+ .focus\:ring-ring:focus {
2237
+ --tw-ring-color: hsl(var(--ring));
2238
+ }
2239
+
2240
+ .focus\:ring-offset-2:focus {
2241
+ --tw-ring-offset-width: 2px;
2242
+ }
2243
+
2244
+ .focus-visible\:outline-none:focus-visible {
2245
+ outline: 2px solid transparent;
2246
+ outline-offset: 2px;
2247
+ }
2248
+
2249
+ .focus-visible\:ring-2:focus-visible {
2250
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2251
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2252
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2253
+ }
2254
+
2255
+ .focus-visible\:ring-ring:focus-visible {
2256
+ --tw-ring-color: hsl(var(--ring));
2257
+ }
2258
+
2259
+ .focus-visible\:ring-offset-2:focus-visible {
2260
+ --tw-ring-offset-width: 2px;
2261
+ }
2262
+
1761
2263
  .active\:scale-\[98\%\]:active {
1762
2264
  --tw-scale-x: 98%;
1763
2265
  --tw-scale-y: 98%;
1764
2266
  transform: translate(var(--tw-translate-x), 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));
1765
2267
  }
1766
2268
 
2269
+ .disabled\:pointer-events-none:disabled {
2270
+ pointer-events: none;
2271
+ }
2272
+
2273
+ .disabled\:cursor-not-allowed:disabled {
2274
+ cursor: not-allowed;
2275
+ }
2276
+
2277
+ .disabled\:border-secondary-110:disabled {
2278
+ --tw-border-opacity: 1;
2279
+ border-color: rgb(var(--secondary-110) / var(--tw-border-opacity));
2280
+ }
2281
+
2282
+ .disabled\:fill-secondary-110:disabled {
2283
+ fill: rgb(var(--secondary-110) / 1);
2284
+ }
2285
+
2286
+ .disabled\:opacity-50:disabled {
2287
+ opacity: 0.5;
2288
+ }
2289
+
1767
2290
  .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2 {
1768
2291
  top: 0.5rem;
1769
2292
  }
@@ -1858,6 +2381,14 @@ video {
1858
2381
  font-weight: 400;
1859
2382
  }
1860
2383
 
2384
+ .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
2385
+ cursor: not-allowed;
2386
+ }
2387
+
2388
+ .peer:disabled ~ .peer-disabled\:opacity-70 {
2389
+ opacity: 0.7;
2390
+ }
2391
+
1861
2392
  .aria-disabled\:pointer-events-none[aria-disabled="true"] {
1862
2393
  pointer-events: none;
1863
2394
  }
@@ -1868,4 +2399,67 @@ video {
1868
2399
 
1869
2400
  .aria-disabled\:opacity-50[aria-disabled="true"] {
1870
2401
  opacity: 0.5;
2402
+ }
2403
+
2404
+ .data-\[state\=checked\]\:border-primary[data-state=checked] {
2405
+ --tw-border-opacity: 1;
2406
+ border-color: rgb(var(--primary-default) / var(--tw-border-opacity));
2407
+ }
2408
+
2409
+ .data-\[state\=checked\]\:bg-primary[data-state=checked] {
2410
+ --tw-bg-opacity: 1;
2411
+ background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
2412
+ }
2413
+
2414
+ .data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
2415
+ --tw-text-opacity: 1;
2416
+ color: rgb(var(--primary-foreground) / var(--tw-text-opacity));
2417
+ }
2418
+
2419
+ @media (min-width: 640px) {
2420
+ .sm\:mt-0 {
2421
+ margin-top: 0px;
2422
+ }
2423
+
2424
+ .sm\:max-w-\[425px\] {
2425
+ max-width: 425px;
2426
+ }
2427
+
2428
+ .sm\:flex-row {
2429
+ flex-direction: row;
2430
+ }
2431
+
2432
+ .sm\:justify-end {
2433
+ justify-content: flex-end;
2434
+ }
2435
+
2436
+ .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
2437
+ --tw-space-x-reverse: 0;
2438
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
2439
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
2440
+ }
2441
+
2442
+ .sm\:rounded-\[var\(--popup-rounded\)\] {
2443
+ border-radius: var(--popup-rounded);
2444
+ }
2445
+
2446
+ .sm\:text-left {
2447
+ text-align: left;
2448
+ }
2449
+ }
2450
+
2451
+ .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
2452
+ padding-right: 0px;
2453
+ }
2454
+
2455
+ .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
2456
+ border-bottom-width: 0px;
2457
+ }
2458
+
2459
+ .\[\&_tr\:last-child\]\:border-0 tr:last-child {
2460
+ border-width: 0px;
2461
+ }
2462
+
2463
+ .\[\&_tr\]\:border-b tr {
2464
+ border-bottom-width: 1px;
1871
2465
  }