@rovula/ui 0.0.9 → 0.0.11

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 (135) hide show
  1. package/dist/cjs/bundle.css +443 -3
  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.d.ts +14 -3
  7. package/dist/cjs/types/components/Button/Button.styles.d.ts +1 -1
  8. package/dist/cjs/types/components/Button/Buttons.stories.d.ts +8 -6
  9. package/dist/cjs/types/components/Checkbox/Checkbox.d.ts +4 -0
  10. package/dist/cjs/types/components/Checkbox/Checkbox.stories.d.ts +308 -0
  11. package/dist/cjs/types/components/DataTable/DataTable.d.ts +14 -0
  12. package/dist/cjs/types/components/DataTable/DataTable.stories.d.ts +19 -0
  13. package/dist/cjs/types/components/Dialog/Dialog.d.ts +19 -0
  14. package/dist/cjs/types/components/Dialog/Dialog.stories.d.ts +25 -0
  15. package/dist/cjs/types/components/Dropdown/Dropdown.d.ts +29 -3
  16. package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts +31 -30
  17. package/dist/cjs/types/components/Input/Input.d.ts +5 -0
  18. package/dist/cjs/types/components/Input/Input.stories.d.ts +314 -0
  19. package/dist/cjs/types/components/Label/Label.d.ts +5 -0
  20. package/dist/cjs/types/components/Label/Label.stories.d.ts +286 -0
  21. package/dist/cjs/types/components/RadioGroup/RadioGroup.d.ts +5 -0
  22. package/dist/cjs/types/components/RadioGroup/RadioGroup.stories.d.ts +299 -0
  23. package/dist/cjs/types/components/Table/Datagrid.d.ts +11 -0
  24. package/dist/cjs/types/components/Table/Table.d.ts +10 -11
  25. package/dist/cjs/types/components/Table/Table.stories.d.ts +283 -0
  26. package/dist/cjs/types/components/Tabs/Tabs.d.ts +7 -5
  27. package/dist/cjs/types/components/Tabs/Tabs.stories.d.ts +49 -0
  28. package/dist/cjs/types/components/Text/Text.d.ts +3 -3
  29. package/dist/cjs/types/components/Text/Text.stories.d.ts +3 -9
  30. package/dist/cjs/types/components/TextInput/TextInput.d.ts +20 -2
  31. package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts +28 -1
  32. package/dist/cjs/types/components/ui/table.d.ts +10 -0
  33. package/dist/cjs/types/index.d.ts +10 -1
  34. package/dist/cjs/types/utils/cn.d.ts +2 -0
  35. package/dist/components/AlertDialog/Alert.stories.js +39 -0
  36. package/dist/components/AlertDialog/AlertDialog.js +73 -0
  37. package/dist/components/Button/Button.js +6 -5
  38. package/dist/components/Button/Button.styles.js +1 -1
  39. package/dist/components/Checkbox/Checkbox.js +37 -0
  40. package/dist/components/Checkbox/Checkbox.stories.js +49 -0
  41. package/dist/components/DataTable/DataTable.js +32 -0
  42. package/dist/components/DataTable/DataTable.stories.js +66 -0
  43. package/dist/components/Dialog/Dialog.js +63 -0
  44. package/dist/components/Dialog/Dialog.stories.js +52 -0
  45. package/dist/components/Dropdown/Dropdown.js +15 -5
  46. package/dist/components/Dropdown/Dropdown.stories.js +48 -0
  47. package/dist/components/Input/Input.js +31 -0
  48. package/dist/components/Input/Input.stories.js +37 -0
  49. package/dist/components/Label/Label.js +35 -0
  50. package/dist/components/Label/Label.stories.js +38 -0
  51. package/dist/components/RadioGroup/RadioGroup.js +41 -0
  52. package/dist/components/RadioGroup/RadioGroup.stories.js +44 -0
  53. package/dist/components/Table/Datagrid.js +6 -0
  54. package/dist/components/Table/Table.js +65 -5
  55. package/dist/components/Table/Table.stories.js +32 -0
  56. package/dist/components/Tabs/Tabs.js +10 -4
  57. package/dist/components/Tabs/Tabs.stories.js +60 -0
  58. package/dist/components/Text/Text.js +3 -2
  59. package/dist/components/TextInput/TextInput.js +5 -7
  60. package/dist/components/TextInput/TextInput.stories.js +22 -0
  61. package/dist/components/ui/table.js +66 -0
  62. package/dist/esm/bundle.css +443 -3
  63. package/dist/esm/bundle.js +1 -1
  64. package/dist/esm/bundle.js.map +1 -1
  65. package/dist/esm/types/components/AlertDialog/Alert.stories.d.ts +20 -0
  66. package/dist/esm/types/components/AlertDialog/AlertDialog.d.ts +20 -0
  67. package/dist/esm/types/components/Button/Button.d.ts +14 -3
  68. package/dist/esm/types/components/Button/Button.styles.d.ts +1 -1
  69. package/dist/esm/types/components/Button/Buttons.stories.d.ts +8 -6
  70. package/dist/esm/types/components/Checkbox/Checkbox.d.ts +4 -0
  71. package/dist/esm/types/components/Checkbox/Checkbox.stories.d.ts +308 -0
  72. package/dist/esm/types/components/DataTable/DataTable.d.ts +14 -0
  73. package/dist/esm/types/components/DataTable/DataTable.stories.d.ts +19 -0
  74. package/dist/esm/types/components/Dialog/Dialog.d.ts +19 -0
  75. package/dist/esm/types/components/Dialog/Dialog.stories.d.ts +25 -0
  76. package/dist/esm/types/components/Dropdown/Dropdown.d.ts +29 -3
  77. package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts +31 -30
  78. package/dist/esm/types/components/Input/Input.d.ts +5 -0
  79. package/dist/esm/types/components/Input/Input.stories.d.ts +314 -0
  80. package/dist/esm/types/components/Label/Label.d.ts +5 -0
  81. package/dist/esm/types/components/Label/Label.stories.d.ts +286 -0
  82. package/dist/esm/types/components/RadioGroup/RadioGroup.d.ts +5 -0
  83. package/dist/esm/types/components/RadioGroup/RadioGroup.stories.d.ts +299 -0
  84. package/dist/esm/types/components/Table/Datagrid.d.ts +11 -0
  85. package/dist/esm/types/components/Table/Table.d.ts +10 -11
  86. package/dist/esm/types/components/Table/Table.stories.d.ts +283 -0
  87. package/dist/esm/types/components/Tabs/Tabs.d.ts +7 -5
  88. package/dist/esm/types/components/Tabs/Tabs.stories.d.ts +49 -0
  89. package/dist/esm/types/components/Text/Text.d.ts +3 -3
  90. package/dist/esm/types/components/Text/Text.stories.d.ts +3 -9
  91. package/dist/esm/types/components/TextInput/TextInput.d.ts +20 -2
  92. package/dist/esm/types/components/TextInput/TextInput.stories.d.ts +28 -1
  93. package/dist/esm/types/components/ui/table.d.ts +10 -0
  94. package/dist/esm/types/index.d.ts +10 -1
  95. package/dist/esm/types/utils/cn.d.ts +2 -0
  96. package/dist/index.d.ts +139 -31
  97. package/dist/index.js +7 -1
  98. package/dist/src/theme/global.css +529 -3
  99. package/dist/theme/global.css +57 -0
  100. package/dist/theme/main-preset.js +29 -1
  101. package/dist/theme/presets/colors.js +19 -0
  102. package/dist/utils/cn.js +9 -0
  103. package/package.json +10 -1
  104. package/src/components/AlertDialog/Alert.stories.tsx +67 -0
  105. package/src/components/AlertDialog/AlertDialog.tsx +142 -0
  106. package/src/components/Button/Button.styles.ts +1 -1
  107. package/src/components/Button/Button.tsx +49 -41
  108. package/src/components/Checkbox/Checkbox.stories.tsx +91 -0
  109. package/src/components/Checkbox/Checkbox.tsx +36 -0
  110. package/src/components/DataTable/DataTable.stories.tsx +76 -0
  111. package/src/components/DataTable/DataTable.tsx +105 -0
  112. package/src/components/Dialog/Dialog.stories.tsx +118 -0
  113. package/src/components/Dialog/Dialog.tsx +119 -0
  114. package/src/components/Dropdown/Dropdown.stories.tsx +87 -3
  115. package/src/components/Dropdown/Dropdown.tsx +147 -109
  116. package/src/components/Input/Input.stories.tsx +40 -0
  117. package/src/components/Input/Input.tsx +25 -0
  118. package/src/components/Label/Label.stories.tsx +45 -0
  119. package/src/components/Label/Label.tsx +26 -0
  120. package/src/components/RadioGroup/RadioGroup.stories.tsx +71 -0
  121. package/src/components/RadioGroup/RadioGroup.tsx +59 -0
  122. package/src/components/Table/Datagrid.tsx +36 -0
  123. package/src/components/Table/Table.stories.tsx +79 -0
  124. package/src/components/Table/Table.tsx +116 -35
  125. package/src/components/Tabs/Tabs.stories.tsx +75 -0
  126. package/src/components/Tabs/Tabs.tsx +39 -10
  127. package/src/components/Text/Text.tsx +21 -19
  128. package/src/components/TextInput/TextInput.stories.tsx +46 -1
  129. package/src/components/TextInput/TextInput.tsx +7 -7
  130. package/src/components/ui/table.tsx +117 -0
  131. package/src/index.ts +13 -1
  132. package/src/theme/global.css +57 -0
  133. package/src/theme/main-preset.js +29 -1
  134. package/src/theme/presets/colors.js +19 -0
  135. package/src/utils/cn.ts +6 -0
@@ -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,10 +885,26 @@ 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
 
896
+ .right-4 {
897
+ right: 1rem;
898
+ }
899
+
900
+ .top-4 {
901
+ top: 1rem;
902
+ }
903
+
904
+ .top-\[50\%\] {
905
+ top: 50%;
906
+ }
907
+
815
908
  .z-10 {
816
909
  z-index: 10;
817
910
  }
@@ -820,6 +913,10 @@ video {
820
913
  z-index: 50;
821
914
  }
822
915
 
916
+ .col-span-3 {
917
+ grid-column: span 3 / span 3;
918
+ }
919
+
823
920
  .mx-auto {
824
921
  margin-left: auto;
825
922
  margin-right: auto;
@@ -846,6 +943,14 @@ video {
846
943
  margin-top: 0.25rem;
847
944
  }
848
945
 
946
+ .mt-2 {
947
+ margin-top: 0.5rem;
948
+ }
949
+
950
+ .mt-4 {
951
+ margin-top: 1rem;
952
+ }
953
+
849
954
  .mt-\[6px\] {
850
955
  margin-top: 6px;
851
956
  }
@@ -878,6 +983,20 @@ video {
878
983
  display: none;
879
984
  }
880
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
+
881
1000
  .size-3 {
882
1001
  width: 0.75rem;
883
1002
  height: 0.75rem;
@@ -903,10 +1022,38 @@ video {
903
1022
  height: 14px;
904
1023
  }
905
1024
 
1025
+ .h-10 {
1026
+ height: 2.5rem;
1027
+ }
1028
+
1029
+ .h-12 {
1030
+ height: 3rem;
1031
+ }
1032
+
1033
+ .h-24 {
1034
+ height: 6rem;
1035
+ }
1036
+
1037
+ .h-4 {
1038
+ height: 1rem;
1039
+ }
1040
+
1041
+ .h-\[54px\] {
1042
+ height: 54px;
1043
+ }
1044
+
906
1045
  .max-h-60 {
907
1046
  max-height: 15rem;
908
1047
  }
909
1048
 
1049
+ .w-4 {
1050
+ width: 1rem;
1051
+ }
1052
+
1053
+ .w-\[100px\] {
1054
+ width: 100px;
1055
+ }
1056
+
910
1057
  .w-\[200px\] {
911
1058
  width: 200px;
912
1059
  }
@@ -927,6 +1074,28 @@ video {
927
1074
  max-width: 48rem;
928
1075
  }
929
1076
 
1077
+ .max-w-lg {
1078
+ max-width: 32rem;
1079
+ }
1080
+
1081
+ .shrink-0 {
1082
+ flex-shrink: 0;
1083
+ }
1084
+
1085
+ .caption-bottom {
1086
+ caption-side: bottom;
1087
+ }
1088
+
1089
+ .translate-x-\[-50\%\] {
1090
+ --tw-translate-x: -50%;
1091
+ 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));
1092
+ }
1093
+
1094
+ .translate-y-\[-50\%\] {
1095
+ --tw-translate-y: -50%;
1096
+ 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));
1097
+ }
1098
+
930
1099
  .rotate-180 {
931
1100
  --tw-rotate: 180deg;
932
1101
  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));
@@ -948,6 +1117,10 @@ video {
948
1117
  appearance: none;
949
1118
  }
950
1119
 
1120
+ .grid-cols-4 {
1121
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1122
+ }
1123
+
951
1124
  .grid-cols-\[auto_1fr\] {
952
1125
  grid-template-columns: auto 1fr;
953
1126
  }
@@ -960,6 +1133,10 @@ video {
960
1133
  flex-direction: column;
961
1134
  }
962
1135
 
1136
+ .flex-col-reverse {
1137
+ flex-direction: column-reverse;
1138
+ }
1139
+
963
1140
  .items-center {
964
1141
  align-items: center;
965
1142
  }
@@ -968,18 +1145,34 @@ video {
968
1145
  justify-content: center;
969
1146
  }
970
1147
 
1148
+ .justify-between {
1149
+ justify-content: space-between;
1150
+ }
1151
+
971
1152
  .gap-1 {
972
1153
  gap: 0.25rem;
973
1154
  }
974
1155
 
1156
+ .gap-1\.5 {
1157
+ gap: 0.375rem;
1158
+ }
1159
+
975
1160
  .gap-2 {
976
1161
  gap: 0.5rem;
977
1162
  }
978
1163
 
1164
+ .gap-3 {
1165
+ gap: 0.75rem;
1166
+ }
1167
+
979
1168
  .gap-4 {
980
1169
  gap: 1rem;
981
1170
  }
982
1171
 
1172
+ .gap-6 {
1173
+ gap: 1.5rem;
1174
+ }
1175
+
983
1176
  .gap-x-8 {
984
1177
  -moz-column-gap: 2rem;
985
1178
  column-gap: 2rem;
@@ -993,6 +1186,28 @@ video {
993
1186
  row-gap: 1.5rem;
994
1187
  }
995
1188
 
1189
+ .space-x-2 > :not([hidden]) ~ :not([hidden]) {
1190
+ --tw-space-x-reverse: 0;
1191
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1192
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
1193
+ }
1194
+
1195
+ .space-y-2 > :not([hidden]) ~ :not([hidden]) {
1196
+ --tw-space-y-reverse: 0;
1197
+ margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
1198
+ margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
1199
+ }
1200
+
1201
+ .space-y-4 > :not([hidden]) ~ :not([hidden]) {
1202
+ --tw-space-y-reverse: 0;
1203
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
1204
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
1205
+ }
1206
+
1207
+ .overflow-auto {
1208
+ overflow: auto;
1209
+ }
1210
+
996
1211
  .overflow-x-auto {
997
1212
  overflow-x: auto;
998
1213
  }
@@ -1026,11 +1241,11 @@ video {
1026
1241
  }
1027
1242
 
1028
1243
  .rounded-lg {
1029
- border-radius: 0.5rem;
1244
+ border-radius: var(--radius);
1030
1245
  }
1031
1246
 
1032
1247
  .rounded-md {
1033
- border-radius: 0.375rem;
1248
+ border-radius: calc(var(--radius) - 2px);
1034
1249
  }
1035
1250
 
1036
1251
  .rounded-none {
@@ -1038,7 +1253,7 @@ video {
1038
1253
  }
1039
1254
 
1040
1255
  .rounded-sm {
1041
- border-radius: 0.125rem;
1256
+ border-radius: calc(var(--radius) - 4px);
1042
1257
  }
1043
1258
 
1044
1259
  .rounded-xl {
@@ -1053,10 +1268,22 @@ video {
1053
1268
  border-width: 0px;
1054
1269
  }
1055
1270
 
1271
+ .border-b {
1272
+ border-bottom-width: 1px;
1273
+ }
1274
+
1056
1275
  .border-b-2 {
1057
1276
  border-bottom-width: 2px;
1058
1277
  }
1059
1278
 
1279
+ .border-b-\[3px\] {
1280
+ border-bottom-width: 3px;
1281
+ }
1282
+
1283
+ .border-t {
1284
+ border-top-width: 1px;
1285
+ }
1286
+
1060
1287
  .border-error {
1061
1288
  --tw-border-opacity: 1;
1062
1289
  border-color: rgb(var(--error-100) / var(--tw-border-opacity));
@@ -1082,11 +1309,26 @@ video {
1082
1309
  border-color: rgb(var(--primary-default) / var(--tw-border-opacity));
1083
1310
  }
1084
1311
 
1312
+ .border-primary-10 {
1313
+ --tw-border-opacity: 1;
1314
+ border-color: rgb(var(--primary-10) / var(--tw-border-opacity));
1315
+ }
1316
+
1317
+ .border-primary-30 {
1318
+ --tw-border-opacity: 1;
1319
+ border-color: rgb(var(--primary-30) / var(--tw-border-opacity));
1320
+ }
1321
+
1085
1322
  .border-secondary {
1086
1323
  --tw-border-opacity: 1;
1087
1324
  border-color: rgb(var(--secondary-default) / var(--tw-border-opacity));
1088
1325
  }
1089
1326
 
1327
+ .border-secondary-110 {
1328
+ --tw-border-opacity: 1;
1329
+ border-color: rgb(var(--secondary-110) / var(--tw-border-opacity));
1330
+ }
1331
+
1090
1332
  .border-success {
1091
1333
  --tw-border-opacity: 1;
1092
1334
  border-color: rgb(var(--success-default) / var(--tw-border-opacity));
@@ -1097,6 +1339,11 @@ video {
1097
1339
  border-color: rgb(var(--tertiary-120) / var(--tw-border-opacity));
1098
1340
  }
1099
1341
 
1342
+ .border-textcolor-dark {
1343
+ --tw-border-opacity: 1;
1344
+ border-color: rgb(var(--text-default-dark) / var(--tw-border-opacity));
1345
+ }
1346
+
1100
1347
  .border-transparent {
1101
1348
  border-color: transparent;
1102
1349
  }
@@ -1106,6 +1353,10 @@ video {
1106
1353
  border-color: rgb(var(--warning-default) / var(--tw-border-opacity));
1107
1354
  }
1108
1355
 
1356
+ .bg-background {
1357
+ background-color: hsl(var(--background));
1358
+ }
1359
+
1109
1360
  .bg-error {
1110
1361
  --tw-bg-opacity: 1;
1111
1362
  background-color: rgb(var(--error-100) / var(--tw-bg-opacity));
@@ -1116,6 +1367,11 @@ video {
1116
1367
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
1117
1368
  }
1118
1369
 
1370
+ .bg-grey2-300 {
1371
+ --tw-bg-opacity: 1;
1372
+ background-color: rgb(var(--grey2-300) / var(--tw-bg-opacity));
1373
+ }
1374
+
1119
1375
  .bg-info {
1120
1376
  --tw-bg-opacity: 1;
1121
1377
  background-color: rgb(var(--info-default) / var(--tw-bg-opacity));
@@ -1126,6 +1382,15 @@ video {
1126
1382
  background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
1127
1383
  }
1128
1384
 
1385
+ .bg-popup-background {
1386
+ --tw-bg-opacity: 1;
1387
+ background-color: rgb(var(--popup-background) / var(--tw-bg-opacity));
1388
+ }
1389
+
1390
+ .bg-popup-overlay {
1391
+ background-color: rgb(var(--popup-overlay) / var(--popup-overlay-alpha));
1392
+ }
1393
+
1129
1394
  .bg-primary {
1130
1395
  --tw-bg-opacity: 1;
1131
1396
  background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
@@ -1165,6 +1430,10 @@ video {
1165
1430
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1166
1431
  }
1167
1432
 
1433
+ .fill-current {
1434
+ fill: currentColor;
1435
+ }
1436
+
1168
1437
  .fill-error {
1169
1438
  fill: rgb(var(--error-100) / 1);
1170
1439
  }
@@ -1185,6 +1454,10 @@ video {
1185
1454
  fill: rgb(var(--input-disabled-text-color) / 1);
1186
1455
  }
1187
1456
 
1457
+ .fill-secondary-110 {
1458
+ fill: rgb(var(--secondary-110) / 1);
1459
+ }
1460
+
1188
1461
  .p-1 {
1189
1462
  padding: 0.25rem;
1190
1463
  }
@@ -1201,6 +1474,19 @@ video {
1201
1474
  padding: 1.25rem;
1202
1475
  }
1203
1476
 
1477
+ .p-6 {
1478
+ padding: 1.5rem;
1479
+ }
1480
+
1481
+ .p-8 {
1482
+ padding: 2rem;
1483
+ }
1484
+
1485
+ .px-1 {
1486
+ padding-left: 0.25rem;
1487
+ padding-right: 0.25rem;
1488
+ }
1489
+
1204
1490
  .px-3 {
1205
1491
  padding-left: 0.75rem;
1206
1492
  padding-right: 0.75rem;
@@ -1253,10 +1539,18 @@ video {
1253
1539
  padding-inline-end: 48px;
1254
1540
  }
1255
1541
 
1542
+ .text-left {
1543
+ text-align: left;
1544
+ }
1545
+
1256
1546
  .text-center {
1257
1547
  text-align: center;
1258
1548
  }
1259
1549
 
1550
+ .text-right {
1551
+ text-align: right;
1552
+ }
1553
+
1260
1554
  .align-middle {
1261
1555
  vertical-align: middle;
1262
1556
  }
@@ -1413,15 +1707,27 @@ video {
1413
1707
  text-transform: capitalize;
1414
1708
  }
1415
1709
 
1710
+ .leading-none {
1711
+ line-height: 1;
1712
+ }
1713
+
1416
1714
  .tracking-\[\.02857em\] {
1417
1715
  letter-spacing: .02857em;
1418
1716
  }
1419
1717
 
1718
+ .tracking-tight {
1719
+ letter-spacing: -0.025em;
1720
+ }
1721
+
1420
1722
  .text-black {
1421
1723
  --tw-text-opacity: 1;
1422
1724
  color: rgb(0 0 0 / var(--tw-text-opacity));
1423
1725
  }
1424
1726
 
1727
+ .text-current {
1728
+ color: currentColor;
1729
+ }
1730
+
1425
1731
  .text-error {
1426
1732
  --tw-text-opacity: 1;
1427
1733
  color: rgb(var(--error-100) / var(--tw-text-opacity));
@@ -1467,6 +1773,11 @@ video {
1467
1773
  color: rgb(var(--primary-foreground) / var(--tw-text-opacity));
1468
1774
  }
1469
1775
 
1776
+ .text-secondary-110 {
1777
+ --tw-text-opacity: 1;
1778
+ color: rgb(var(--secondary-110) / var(--tw-text-opacity));
1779
+ }
1780
+
1470
1781
  .text-secondary-130 {
1471
1782
  --tw-text-opacity: 1;
1472
1783
  color: rgb(var(--secondary-130) / var(--tw-text-opacity));
@@ -1497,6 +1808,21 @@ video {
1497
1808
  color: rgb(var(--tertiary-foreground) / var(--tw-text-opacity));
1498
1809
  }
1499
1810
 
1811
+ .text-textcolor-dark {
1812
+ --tw-text-opacity: 1;
1813
+ color: rgb(var(--text-default-dark) / var(--tw-text-opacity));
1814
+ }
1815
+
1816
+ .text-textcolor-grey-dark {
1817
+ --tw-text-opacity: 1;
1818
+ color: rgb(var(--text-grey-dark) / var(--tw-text-opacity));
1819
+ }
1820
+
1821
+ .text-textcolor-grey-light {
1822
+ --tw-text-opacity: 1;
1823
+ color: rgb(var(--text-grey-light) / var(--tw-text-opacity));
1824
+ }
1825
+
1500
1826
  .text-warning {
1501
1827
  --tw-text-opacity: 1;
1502
1828
  color: rgb(var(--warning-default) / var(--tw-text-opacity));
@@ -1524,6 +1850,16 @@ video {
1524
1850
  text-underline-offset: 4px;
1525
1851
  }
1526
1852
 
1853
+ .opacity-70 {
1854
+ opacity: 0.7;
1855
+ }
1856
+
1857
+ .shadow-lg {
1858
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1859
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1860
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1861
+ }
1862
+
1527
1863
  .shadow-md {
1528
1864
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1529
1865
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1539,6 +1875,12 @@ video {
1539
1875
  outline-style: solid;
1540
1876
  }
1541
1877
 
1878
+ .ring {
1879
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1880
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1881
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1882
+ }
1883
+
1542
1884
  .ring-1 {
1543
1885
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1544
1886
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1564,6 +1906,15 @@ video {
1564
1906
  --tw-ring-color: rgb(var(--input-disabled-stroke-color) / var(--tw-ring-opacity));
1565
1907
  }
1566
1908
 
1909
+ .ring-offset-background {
1910
+ --tw-ring-offset-color: hsl(var(--background));
1911
+ }
1912
+
1913
+ .blur {
1914
+ --tw-blur: blur(8px);
1915
+ 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);
1916
+ }
1917
+
1567
1918
  .filter {
1568
1919
  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);
1569
1920
  }
@@ -1580,6 +1931,16 @@ video {
1580
1931
  transition-duration: 150ms;
1581
1932
  }
1582
1933
 
1934
+ .transition-opacity {
1935
+ transition-property: opacity;
1936
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1937
+ transition-duration: 150ms;
1938
+ }
1939
+
1940
+ .duration-200 {
1941
+ transition-duration: 200ms;
1942
+ }
1943
+
1583
1944
  .duration-300 {
1584
1945
  transition-duration: 300ms;
1585
1946
  }
@@ -1588,6 +1949,10 @@ video {
1588
1949
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1589
1950
  }
1590
1951
 
1952
+ .ease-out {
1953
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1954
+ }
1955
+
1591
1956
  .typography-h1 {
1592
1957
  font-size: 64px;
1593
1958
  line-height: 80px;
@@ -1714,6 +2079,23 @@ video {
1714
2079
  font-weight: 400;
1715
2080
  }
1716
2081
 
2082
+ .file\:border-0::file-selector-button {
2083
+ border-width: 0px;
2084
+ }
2085
+
2086
+ .file\:bg-transparent::file-selector-button {
2087
+ background-color: transparent;
2088
+ }
2089
+
2090
+ .file\:text-sm::file-selector-button {
2091
+ font-size: 0.875rem;
2092
+ line-height: 1.25rem;
2093
+ }
2094
+
2095
+ .file\:font-medium::file-selector-button {
2096
+ font-weight: 500;
2097
+ }
2098
+
1717
2099
  .placeholder\:text-input-text-disabled::-moz-placeholder {
1718
2100
  --tw-text-opacity: 1;
1719
2101
  color: rgb(var(--input-disabled-text-color) / var(--tw-text-opacity));
@@ -1803,10 +2185,19 @@ video {
1803
2185
  fill: rgb(var(--input-default-text-color) / 1);
1804
2186
  }
1805
2187
 
2188
+ .hover\:text-textcolor-dark:hover {
2189
+ --tw-text-opacity: 1;
2190
+ color: rgb(var(--text-default-dark) / var(--tw-text-opacity));
2191
+ }
2192
+
1806
2193
  .hover\:text-opacity-80:hover {
1807
2194
  --tw-text-opacity: 0.8;
1808
2195
  }
1809
2196
 
2197
+ .hover\:opacity-100:hover {
2198
+ opacity: 1;
2199
+ }
2200
+
1810
2201
  .focus\:border-input-stroke:focus {
1811
2202
  --tw-border-opacity: 1;
1812
2203
  border-color: rgb(var(--input-default-stroke-color) / var(--tw-border-opacity));
@@ -1824,12 +2215,23 @@ video {
1824
2215
  padding-inline-end: 2rem;
1825
2216
  }
1826
2217
 
2218
+ .focus\:outline-none:focus {
2219
+ outline: 2px solid transparent;
2220
+ outline-offset: 2px;
2221
+ }
2222
+
1827
2223
  .focus\:ring-1:focus {
1828
2224
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1829
2225
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1830
2226
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1831
2227
  }
1832
2228
 
2229
+ .focus\:ring-2:focus {
2230
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2231
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2232
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2233
+ }
2234
+
1833
2235
  .focus\:ring-inset:focus {
1834
2236
  --tw-ring-inset: inset;
1835
2237
  }
@@ -1844,12 +2246,60 @@ video {
1844
2246
  --tw-ring-color: rgb(var(--input-active-stroke-color) / var(--tw-ring-opacity));
1845
2247
  }
1846
2248
 
2249
+ .focus\:ring-ring:focus {
2250
+ --tw-ring-color: hsl(var(--ring));
2251
+ }
2252
+
2253
+ .focus\:ring-offset-2:focus {
2254
+ --tw-ring-offset-width: 2px;
2255
+ }
2256
+
2257
+ .focus-visible\:outline-none:focus-visible {
2258
+ outline: 2px solid transparent;
2259
+ outline-offset: 2px;
2260
+ }
2261
+
2262
+ .focus-visible\:ring-2:focus-visible {
2263
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2264
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2265
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2266
+ }
2267
+
2268
+ .focus-visible\:ring-ring:focus-visible {
2269
+ --tw-ring-color: hsl(var(--ring));
2270
+ }
2271
+
2272
+ .focus-visible\:ring-offset-2:focus-visible {
2273
+ --tw-ring-offset-width: 2px;
2274
+ }
2275
+
1847
2276
  .active\:scale-\[98\%\]:active {
1848
2277
  --tw-scale-x: 98%;
1849
2278
  --tw-scale-y: 98%;
1850
2279
  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));
1851
2280
  }
1852
2281
 
2282
+ .disabled\:pointer-events-none:disabled {
2283
+ pointer-events: none;
2284
+ }
2285
+
2286
+ .disabled\:cursor-not-allowed:disabled {
2287
+ cursor: not-allowed;
2288
+ }
2289
+
2290
+ .disabled\:border-secondary-110:disabled {
2291
+ --tw-border-opacity: 1;
2292
+ border-color: rgb(var(--secondary-110) / var(--tw-border-opacity));
2293
+ }
2294
+
2295
+ .disabled\:fill-secondary-110:disabled {
2296
+ fill: rgb(var(--secondary-110) / 1);
2297
+ }
2298
+
2299
+ .disabled\:opacity-50:disabled {
2300
+ opacity: 0.5;
2301
+ }
2302
+
1853
2303
  .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2 {
1854
2304
  top: 0.5rem;
1855
2305
  }
@@ -1927,6 +2377,11 @@ video {
1927
2377
  background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
1928
2378
  }
1929
2379
 
2380
+ .peer:focus ~ .peer-focus\:bg-red-500 {
2381
+ --tw-bg-opacity: 1;
2382
+ background-color: rgb(239 68 68 / var(--tw-bg-opacity));
2383
+ }
2384
+
1930
2385
  .peer:focus ~ .peer-focus\:text-input-text-active {
1931
2386
  --tw-text-opacity: 1;
1932
2387
  color: rgb(var(--input-active-text-color) / var(--tw-text-opacity));
@@ -1944,6 +2399,14 @@ video {
1944
2399
  font-weight: 400;
1945
2400
  }
1946
2401
 
2402
+ .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
2403
+ cursor: not-allowed;
2404
+ }
2405
+
2406
+ .peer:disabled ~ .peer-disabled\:opacity-70 {
2407
+ opacity: 0.7;
2408
+ }
2409
+
1947
2410
  .aria-disabled\:pointer-events-none[aria-disabled="true"] {
1948
2411
  pointer-events: none;
1949
2412
  }
@@ -1954,4 +2417,67 @@ video {
1954
2417
 
1955
2418
  .aria-disabled\:opacity-50[aria-disabled="true"] {
1956
2419
  opacity: 0.5;
2420
+ }
2421
+
2422
+ .data-\[state\=checked\]\:border-primary[data-state=checked] {
2423
+ --tw-border-opacity: 1;
2424
+ border-color: rgb(var(--primary-default) / var(--tw-border-opacity));
2425
+ }
2426
+
2427
+ .data-\[state\=checked\]\:bg-primary[data-state=checked] {
2428
+ --tw-bg-opacity: 1;
2429
+ background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
2430
+ }
2431
+
2432
+ .data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
2433
+ --tw-text-opacity: 1;
2434
+ color: rgb(var(--primary-foreground) / var(--tw-text-opacity));
2435
+ }
2436
+
2437
+ @media (min-width: 640px) {
2438
+ .sm\:mt-0 {
2439
+ margin-top: 0px;
2440
+ }
2441
+
2442
+ .sm\:max-w-\[425px\] {
2443
+ max-width: 425px;
2444
+ }
2445
+
2446
+ .sm\:flex-row {
2447
+ flex-direction: row;
2448
+ }
2449
+
2450
+ .sm\:justify-end {
2451
+ justify-content: flex-end;
2452
+ }
2453
+
2454
+ .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
2455
+ --tw-space-x-reverse: 0;
2456
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
2457
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
2458
+ }
2459
+
2460
+ .sm\:rounded-\[var\(--popup-rounded\)\] {
2461
+ border-radius: var(--popup-rounded);
2462
+ }
2463
+
2464
+ .sm\:text-left {
2465
+ text-align: left;
2466
+ }
2467
+ }
2468
+
2469
+ .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
2470
+ padding-right: 0px;
2471
+ }
2472
+
2473
+ .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
2474
+ border-bottom-width: 0px;
2475
+ }
2476
+
2477
+ .\[\&_tr\:last-child\]\:border-0 tr:last-child {
2478
+ border-width: 0px;
2479
+ }
2480
+
2481
+ .\[\&_tr\]\:border-b tr {
2482
+ border-bottom-width: 1px;
1957
2483
  }