@rovula/ui 0.1.2 → 0.1.3

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 (52) hide show
  1. package/dist/cjs/bundle.css +294 -73
  2. package/dist/cjs/bundle.js +3 -3
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/ActionButton/ActionButton.d.ts +4 -2
  5. package/dist/cjs/types/components/ActionButton/ActionButton.stories.d.ts +30 -8
  6. package/dist/cjs/types/components/ActionButton/ActionButton.styles.d.ts +2 -1
  7. package/dist/cjs/types/components/Avatar/Avatar.styles.d.ts +1 -1
  8. package/dist/cjs/types/components/Button/Button.d.ts +4 -2
  9. package/dist/cjs/types/components/Button/Button.styles.d.ts +2 -1
  10. package/dist/cjs/types/components/Button/Buttons.stories.d.ts +71 -6
  11. package/dist/cjs/types/components/Checkbox/Checkbox.stories.d.ts +13 -9
  12. package/dist/cjs/types/components/RadioGroup/RadioGroup.stories.d.ts +10 -7
  13. package/dist/components/ActionButton/ActionButton.js +2 -1
  14. package/dist/components/ActionButton/ActionButton.stories.js +40 -7
  15. package/dist/components/ActionButton/ActionButton.styles.js +77 -17
  16. package/dist/components/Button/Button.js +9 -2
  17. package/dist/components/Button/Button.styles.js +51 -14
  18. package/dist/components/Button/Buttons.stories.js +55 -0
  19. package/dist/components/Checkbox/Checkbox.js +6 -7
  20. package/dist/components/Checkbox/Checkbox.stories.js +23 -1
  21. package/dist/components/InputFilter/InputFilter.js +1 -1
  22. package/dist/components/InputFilter/InputFilter.styles.js +1 -1
  23. package/dist/components/RadioGroup/RadioGroup.js +1 -1
  24. package/dist/components/RadioGroup/RadioGroup.stories.js +16 -1
  25. package/dist/esm/bundle.css +294 -73
  26. package/dist/esm/bundle.js +115 -115
  27. package/dist/esm/bundle.js.map +1 -1
  28. package/dist/esm/types/components/ActionButton/ActionButton.d.ts +4 -2
  29. package/dist/esm/types/components/ActionButton/ActionButton.stories.d.ts +30 -8
  30. package/dist/esm/types/components/ActionButton/ActionButton.styles.d.ts +2 -1
  31. package/dist/esm/types/components/Avatar/Avatar.styles.d.ts +1 -1
  32. package/dist/esm/types/components/Button/Button.d.ts +4 -2
  33. package/dist/esm/types/components/Button/Button.styles.d.ts +2 -1
  34. package/dist/esm/types/components/Button/Buttons.stories.d.ts +71 -6
  35. package/dist/esm/types/components/Checkbox/Checkbox.stories.d.ts +13 -9
  36. package/dist/esm/types/components/RadioGroup/RadioGroup.stories.d.ts +10 -7
  37. package/dist/index.d.ts +6 -3
  38. package/dist/src/theme/global.css +370 -84
  39. package/package.json +1 -1
  40. package/src/components/ActionButton/ActionButton.stories.tsx +105 -149
  41. package/src/components/ActionButton/ActionButton.styles.ts +78 -18
  42. package/src/components/ActionButton/ActionButton.tsx +7 -2
  43. package/src/components/Button/Button.styles.ts +51 -14
  44. package/src/components/Button/Button.tsx +11 -2
  45. package/src/components/Button/Buttons.stories.tsx +235 -0
  46. package/src/components/Checkbox/Checkbox.stories.tsx +50 -4
  47. package/src/components/Checkbox/Checkbox.tsx +12 -8
  48. package/src/components/InputFilter/InputFilter.styles.ts +2 -2
  49. package/src/components/InputFilter/InputFilter.tsx +21 -24
  50. package/src/components/RadioGroup/RadioGroup.stories.tsx +43 -4
  51. package/src/components/RadioGroup/RadioGroup.tsx +1 -1
  52. package/src/theme/themes/variable.css +1 -1
@@ -2142,7 +2142,7 @@
2142
2142
  --others-35-skyller: #56d364;
2143
2143
  --brand-new-blue-bg-xspector: #091d33;
2144
2144
  --brand-new-blue-bg-report-xspector-light-mode: #091d33;
2145
- --brand-new-blue-bg-skyller: #dbeafe;
2145
+ --brand-new-blue-bg-skyller: #ffffff;
2146
2146
  /* BUTTON RADIUS */
2147
2147
  --button-l-round: 8px;
2148
2148
  --button-l-rem-round: 0.5rem;
@@ -4057,10 +4057,6 @@ input[type=number] {
4057
4057
  display: grid;
4058
4058
  }
4059
4059
 
4060
- .contents {
4061
- display: contents;
4062
- }
4063
-
4064
4060
  .hidden {
4065
4061
  display: none;
4066
4062
  }
@@ -4280,6 +4276,10 @@ input[type=number] {
4280
4276
  width: 0.5rem;
4281
4277
  }
4282
4278
 
4279
+ .w-20 {
4280
+ width: 5rem;
4281
+ }
4282
+
4283
4283
  .w-28 {
4284
4284
  width: 7rem;
4285
4285
  }
@@ -4320,10 +4320,6 @@ input[type=number] {
4320
4320
  width: 200px;
4321
4321
  }
4322
4322
 
4323
- .w-\[20px\] {
4324
- width: 20px;
4325
- }
4326
-
4327
4323
  .w-\[24px\] {
4328
4324
  width: 24px;
4329
4325
  }
@@ -4390,6 +4386,10 @@ input[type=number] {
4390
4386
  max-width: 300px;
4391
4387
  }
4392
4388
 
4389
+ .max-w-\[360px\] {
4390
+ max-width: 360px;
4391
+ }
4392
+
4393
4393
  .max-w-full {
4394
4394
  max-width: 100%;
4395
4395
  }
@@ -4525,6 +4525,18 @@ input[type=number] {
4525
4525
  grid-template-columns: repeat(9, minmax(0, 1fr));
4526
4526
  }
4527
4527
 
4528
+ .grid-cols-\[120px_repeat\(3\2c minmax\(0\2c 1fr\)\)\] {
4529
+ grid-template-columns: 120px repeat(3,minmax(0,1fr));
4530
+ }
4531
+
4532
+ .grid-cols-\[160px_16px\] {
4533
+ grid-template-columns: 160px 16px;
4534
+ }
4535
+
4536
+ .grid-cols-\[repeat\(3\2c minmax\(0\2c 1fr\)\)\] {
4537
+ grid-template-columns: repeat(3,minmax(0,1fr));
4538
+ }
4539
+
4528
4540
  .grid-cols-\[repeat\(auto-fill\2c minmax\(140px\2c 1fr\)\)\] {
4529
4541
  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
4530
4542
  }
@@ -4557,6 +4569,10 @@ input[type=number] {
4557
4569
  align-items: center;
4558
4570
  }
4559
4571
 
4572
+ .items-stretch {
4573
+ align-items: stretch;
4574
+ }
4575
+
4560
4576
  .justify-start {
4561
4577
  justify-content: flex-start;
4562
4578
  }
@@ -4717,6 +4733,70 @@ input[type=number] {
4717
4733
  border-radius: 0.25rem;
4718
4734
  }
4719
4735
 
4736
+ .rounded-\[var\(--button-l-capsule\)\] {
4737
+ border-radius: var(--button-l-capsule);
4738
+ }
4739
+
4740
+ .rounded-\[var\(--button-l-round\)\] {
4741
+ border-radius: var(--button-l-round);
4742
+ }
4743
+
4744
+ .rounded-\[var\(--button-m-capsule\)\] {
4745
+ border-radius: var(--button-m-capsule);
4746
+ }
4747
+
4748
+ .rounded-\[var\(--button-m-round\)\] {
4749
+ border-radius: var(--button-m-round);
4750
+ }
4751
+
4752
+ .rounded-\[var\(--button-s-capsule\)\] {
4753
+ border-radius: var(--button-s-capsule);
4754
+ }
4755
+
4756
+ .rounded-\[var\(--button-s-round\)\] {
4757
+ border-radius: var(--button-s-round);
4758
+ }
4759
+
4760
+ .rounded-\[var\(--function-button-l-capsule\)\] {
4761
+ border-radius: var(--function-button-l-capsule);
4762
+ }
4763
+
4764
+ .rounded-\[var\(--function-button-l-round\)\] {
4765
+ border-radius: var(--function-button-l-round);
4766
+ }
4767
+
4768
+ .rounded-\[var\(--function-button-m-capsule\)\] {
4769
+ border-radius: var(--function-button-m-capsule);
4770
+ }
4771
+
4772
+ .rounded-\[var\(--function-button-m-round\)\] {
4773
+ border-radius: var(--function-button-m-round);
4774
+ }
4775
+
4776
+ .rounded-\[var\(--function-button-s-capsule\)\] {
4777
+ border-radius: var(--function-button-s-capsule);
4778
+ }
4779
+
4780
+ .rounded-\[var\(--function-button-s-round\)\] {
4781
+ border-radius: var(--function-button-s-round);
4782
+ }
4783
+
4784
+ .rounded-\[var\(--function-button-xs-capsule\)\] {
4785
+ border-radius: var(--function-button-xs-capsule);
4786
+ }
4787
+
4788
+ .rounded-\[var\(--function-button-xs-round\)\] {
4789
+ border-radius: var(--function-button-xs-round);
4790
+ }
4791
+
4792
+ .rounded-\[var\(--function-button-xxs-capsule\)\] {
4793
+ border-radius: var(--function-button-xxs-capsule);
4794
+ }
4795
+
4796
+ .rounded-\[var\(--function-button-xxs-round\)\] {
4797
+ border-radius: var(--function-button-xxs-round);
4798
+ }
4799
+
4720
4800
  .rounded-\[var\(--spacing-spacing-xxs\2c 2px\)\] {
4721
4801
  border-radius: var(--spacing-spacing-xxs,2px);
4722
4802
  }
@@ -4725,6 +4805,10 @@ input[type=number] {
4725
4805
  border-radius: 9999px;
4726
4806
  }
4727
4807
 
4808
+ .rounded-lg {
4809
+ border-radius: var(--radius-radius-l);
4810
+ }
4811
+
4728
4812
  .rounded-md {
4729
4813
  border-radius: var(--radius-radius-m);
4730
4814
  }
@@ -4741,10 +4825,6 @@ input[type=number] {
4741
4825
  border-radius: var(--radius-radius-xl);
4742
4826
  }
4743
4827
 
4744
- .rounded-xs {
4745
- border-radius: var(--radius-radius-xs);
4746
- }
4747
-
4748
4828
  .rounded-l-full {
4749
4829
  border-top-left-radius: 9999px;
4750
4830
  border-bottom-left-radius: 9999px;
@@ -4827,34 +4907,34 @@ input[type=number] {
4827
4907
  border-style: none;
4828
4908
  }
4829
4909
 
4830
- .border-action-button-icon-active {
4831
- --tw-border-opacity: 1;
4832
- border-color: color-mix(in srgb, var(--action-button-icon-active-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4910
+ .\!border-action-button-solid-active-hover {
4911
+ --tw-border-opacity: 1 !important;
4912
+ border-color: color-mix(in srgb, var(--action-button-solid-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
4833
4913
  }
4834
4914
 
4835
- .border-action-button-icon-default {
4836
- --tw-border-opacity: 1;
4837
- border-color: color-mix(in srgb, var(--action-button-icon-default-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4915
+ .\!border-action-button-solid-hover {
4916
+ --tw-border-opacity: 1 !important;
4917
+ border-color: color-mix(in srgb, var(--action-button-solid-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
4838
4918
  }
4839
4919
 
4840
- .border-action-button-icon-disabled {
4841
- --tw-border-opacity: 1;
4842
- border-color: color-mix(in srgb, var(--action-button-icon-disabled-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4920
+ .\!border-function-default-hover {
4921
+ --tw-border-opacity: 1 !important;
4922
+ border-color: color-mix(in srgb, var(--function-default-hover) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
4843
4923
  }
4844
4924
 
4845
- .border-action-button-outline-active {
4925
+ .border-action-button-icon-active {
4846
4926
  --tw-border-opacity: 1;
4847
- border-color: color-mix(in srgb, var(--action-button-outline-active-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4927
+ border-color: color-mix(in srgb, var(--action-button-icon-active-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4848
4928
  }
4849
4929
 
4850
- .border-action-button-outline-default {
4930
+ .border-action-button-icon-default {
4851
4931
  --tw-border-opacity: 1;
4852
- border-color: color-mix(in srgb, var(--action-button-outline-default-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4932
+ border-color: color-mix(in srgb, var(--action-button-icon-default-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4853
4933
  }
4854
4934
 
4855
- .border-action-button-outline-disabled {
4935
+ .border-action-button-icon-disabled {
4856
4936
  --tw-border-opacity: 1;
4857
- border-color: color-mix(in srgb, var(--action-button-outline-disabled-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4937
+ border-color: color-mix(in srgb, var(--action-button-icon-disabled-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4858
4938
  }
4859
4939
 
4860
4940
  .border-action-button-solid-active {
@@ -5104,6 +5184,36 @@ input[type=number] {
5104
5184
  border-top-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
5105
5185
  }
5106
5186
 
5187
+ .\!bg-action-button-icon-active-hover {
5188
+ --tw-bg-opacity: 1 !important;
5189
+ background-color: color-mix(in srgb, var(--action-button-icon-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
5190
+ }
5191
+
5192
+ .\!bg-action-button-icon-hover {
5193
+ --tw-bg-opacity: 1 !important;
5194
+ background-color: color-mix(in srgb, var(--action-button-icon-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
5195
+ }
5196
+
5197
+ .\!bg-action-button-outline-active-hover {
5198
+ --tw-bg-opacity: 1 !important;
5199
+ background-color: color-mix(in srgb, var(--action-button-outline-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
5200
+ }
5201
+
5202
+ .\!bg-action-button-outline-hover {
5203
+ --tw-bg-opacity: 1 !important;
5204
+ background-color: color-mix(in srgb, var(--action-button-outline-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
5205
+ }
5206
+
5207
+ .\!bg-action-button-solid-active-hover {
5208
+ --tw-bg-opacity: 1 !important;
5209
+ background-color: color-mix(in srgb, var(--action-button-solid-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
5210
+ }
5211
+
5212
+ .\!bg-action-button-solid-hover {
5213
+ --tw-bg-opacity: 1 !important;
5214
+ background-color: color-mix(in srgb, var(--action-button-solid-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
5215
+ }
5216
+
5107
5217
  .bg-\[rgb\(var\(--base-bg-2\)\)\] {
5108
5218
  background-color: rgb(var(--base-bg-2));
5109
5219
  }
@@ -6660,6 +6770,30 @@ input[type=number] {
6660
6770
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
6661
6771
  }
6662
6772
 
6773
+ .\!fill-action-button-icon-active-hover {
6774
+ fill: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * 1), transparent) !important;
6775
+ }
6776
+
6777
+ .\!fill-action-button-icon-hover {
6778
+ fill: color-mix(in srgb, var(--action-button-icon-hover-text) calc(100% * 1), transparent) !important;
6779
+ }
6780
+
6781
+ .\!fill-action-button-outline-active-hover {
6782
+ fill: color-mix(in srgb, var(--action-button-outline-active-hover-text) calc(100% * 1), transparent) !important;
6783
+ }
6784
+
6785
+ .\!fill-action-button-outline-hover {
6786
+ fill: color-mix(in srgb, var(--action-button-outline-hover-text) calc(100% * 1), transparent) !important;
6787
+ }
6788
+
6789
+ .\!fill-action-button-solid-active-hover {
6790
+ fill: color-mix(in srgb, var(--action-button-solid-active-hover-text) calc(100% * 1), transparent) !important;
6791
+ }
6792
+
6793
+ .\!fill-action-button-solid-hover {
6794
+ fill: color-mix(in srgb, var(--action-button-solid-hover-text) calc(100% * 1), transparent) !important;
6795
+ }
6796
+
6663
6797
  .fill-action-button-icon-active {
6664
6798
  fill: color-mix(in srgb, var(--action-button-icon-active-text) calc(100% * 1), transparent);
6665
6799
  }
@@ -6922,39 +7056,39 @@ input[type=number] {
6922
7056
  padding-right: 2rem;
6923
7057
  }
6924
7058
 
6925
- .px-\[2px\] {
6926
- padding-left: 2px;
6927
- padding-right: 2px;
7059
+ .px-\[12px\] {
7060
+ padding-left: 12px;
7061
+ padding-right: 12px;
6928
7062
  }
6929
7063
 
6930
- .px-lg {
6931
- padding-left: var(--spacing-spacing-l);
6932
- padding-right: var(--spacing-spacing-l);
7064
+ .px-\[16px\] {
7065
+ padding-left: 16px;
7066
+ padding-right: 16px;
6933
7067
  }
6934
7068
 
6935
- .px-md {
6936
- padding-left: var(--spacing-spacing-m);
6937
- padding-right: var(--spacing-spacing-m);
7069
+ .px-\[1px\] {
7070
+ padding-left: 1px;
7071
+ padding-right: 1px;
6938
7072
  }
6939
7073
 
6940
- .px-sm {
6941
- padding-left: var(--spacing-spacing-s);
6942
- padding-right: var(--spacing-spacing-s);
7074
+ .px-\[24px\] {
7075
+ padding-left: 24px;
7076
+ padding-right: 24px;
6943
7077
  }
6944
7078
 
6945
- .px-xl {
6946
- padding-left: var(--spacing-spacing-xl);
6947
- padding-right: var(--spacing-spacing-xl);
7079
+ .px-\[2px\] {
7080
+ padding-left: 2px;
7081
+ padding-right: 2px;
6948
7082
  }
6949
7083
 
6950
- .px-xs {
6951
- padding-left: var(--spacing-spacing-xs);
6952
- padding-right: var(--spacing-spacing-xs);
7084
+ .px-\[4px\] {
7085
+ padding-left: 4px;
7086
+ padding-right: 4px;
6953
7087
  }
6954
7088
 
6955
- .px-xxs {
6956
- padding-left: var(--spacing-spacing-xxs);
6957
- padding-right: var(--spacing-spacing-xxs);
7089
+ .px-\[8px\] {
7090
+ padding-left: 8px;
7091
+ padding-right: 8px;
6958
7092
  }
6959
7093
 
6960
7094
  .py-1 {
@@ -6992,29 +7126,34 @@ input[type=number] {
6992
7126
  padding-bottom: 1.5rem;
6993
7127
  }
6994
7128
 
6995
- .py-lg {
6996
- padding-top: var(--spacing-spacing-l);
6997
- padding-bottom: var(--spacing-spacing-l);
7129
+ .py-\[12px\] {
7130
+ padding-top: 12px;
7131
+ padding-bottom: 12px;
6998
7132
  }
6999
7133
 
7000
- .py-md {
7001
- padding-top: var(--spacing-spacing-m);
7002
- padding-bottom: var(--spacing-spacing-m);
7134
+ .py-\[16px\] {
7135
+ padding-top: 16px;
7136
+ padding-bottom: 16px;
7003
7137
  }
7004
7138
 
7005
- .py-sm {
7006
- padding-top: var(--spacing-spacing-s);
7007
- padding-bottom: var(--spacing-spacing-s);
7139
+ .py-\[1px\] {
7140
+ padding-top: 1px;
7141
+ padding-bottom: 1px;
7008
7142
  }
7009
7143
 
7010
- .py-xs {
7011
- padding-top: var(--spacing-spacing-xs);
7012
- padding-bottom: var(--spacing-spacing-xs);
7144
+ .py-\[2px\] {
7145
+ padding-top: 2px;
7146
+ padding-bottom: 2px;
7013
7147
  }
7014
7148
 
7015
- .py-xxs {
7016
- padding-top: var(--spacing-spacing-xxs);
7017
- padding-bottom: var(--spacing-spacing-xxs);
7149
+ .py-\[4px\] {
7150
+ padding-top: 4px;
7151
+ padding-bottom: 4px;
7152
+ }
7153
+
7154
+ .py-\[8px\] {
7155
+ padding-top: 8px;
7156
+ padding-bottom: 8px;
7018
7157
  }
7019
7158
 
7020
7159
  .\!pe-\[38px\] {
@@ -7085,6 +7224,10 @@ input[type=number] {
7085
7224
  padding-top: 0.5rem;
7086
7225
  }
7087
7226
 
7227
+ .pt-3 {
7228
+ padding-top: 0.75rem;
7229
+ }
7230
+
7088
7231
  .pt-4 {
7089
7232
  padding-top: 1rem;
7090
7233
  }
@@ -7339,10 +7482,44 @@ input[type=number] {
7339
7482
  letter-spacing: -0.025em;
7340
7483
  }
7341
7484
 
7485
+ .tracking-wide {
7486
+ letter-spacing: 0.025em;
7487
+ }
7488
+
7342
7489
  .tracking-widest {
7343
7490
  letter-spacing: 0.1em;
7344
7491
  }
7345
7492
 
7493
+ .\!text-action-button-icon-active-hover {
7494
+ --tw-text-opacity: 1 !important;
7495
+ color: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
7496
+ }
7497
+
7498
+ .\!text-action-button-icon-hover {
7499
+ --tw-text-opacity: 1 !important;
7500
+ color: color-mix(in srgb, var(--action-button-icon-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
7501
+ }
7502
+
7503
+ .\!text-action-button-outline-active-hover {
7504
+ --tw-text-opacity: 1 !important;
7505
+ color: color-mix(in srgb, var(--action-button-outline-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
7506
+ }
7507
+
7508
+ .\!text-action-button-outline-hover {
7509
+ --tw-text-opacity: 1 !important;
7510
+ color: color-mix(in srgb, var(--action-button-outline-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
7511
+ }
7512
+
7513
+ .\!text-action-button-solid-active-hover {
7514
+ --tw-text-opacity: 1 !important;
7515
+ color: color-mix(in srgb, var(--action-button-solid-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
7516
+ }
7517
+
7518
+ .\!text-action-button-solid-hover {
7519
+ --tw-text-opacity: 1 !important;
7520
+ color: color-mix(in srgb, var(--action-button-solid-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
7521
+ }
7522
+
7346
7523
  .\!text-primary-foreground {
7347
7524
  --tw-text-opacity: 1 !important;
7348
7525
  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
@@ -7695,6 +7872,11 @@ input[type=number] {
7695
7872
  color: color-mix(in srgb, var(--text-grey-medium) calc(100% * var(--tw-text-opacity, 1)), transparent);
7696
7873
  }
7697
7874
 
7875
+ .text-text-white {
7876
+ --tw-text-opacity: 1;
7877
+ color: color-mix(in srgb, var(--text-white) calc(100% * var(--tw-text-opacity, 1)), transparent);
7878
+ }
7879
+
7698
7880
  .text-warning {
7699
7881
  --tw-text-opacity: 1;
7700
7882
  color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -7777,6 +7959,26 @@ input[type=number] {
7777
7959
  --tw-ring-inset: inset;
7778
7960
  }
7779
7961
 
7962
+ .\!ring-\[var\(--action-button-outline-active-hover-border\)\] {
7963
+ --tw-ring-color: var(--action-button-outline-active-hover-border) !important;
7964
+ }
7965
+
7966
+ .\!ring-\[var\(--action-button-outline-hover-border\)\] {
7967
+ --tw-ring-color: var(--action-button-outline-hover-border) !important;
7968
+ }
7969
+
7970
+ .ring-\[var\(--action-button-outline-active-border\)\] {
7971
+ --tw-ring-color: var(--action-button-outline-active-border);
7972
+ }
7973
+
7974
+ .ring-\[var\(--action-button-outline-default-border\)\] {
7975
+ --tw-ring-color: var(--action-button-outline-default-border);
7976
+ }
7977
+
7978
+ .ring-\[var\(--action-button-outline-disabled-border\)\] {
7979
+ --tw-ring-color: var(--action-button-outline-disabled-border);
7980
+ }
7981
+
7780
7982
  .ring-error {
7781
7983
  --tw-ring-opacity: 1;
7782
7984
  --tw-ring-color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-ring-opacity, 1)), transparent);
@@ -8097,24 +8299,54 @@ input[type=number] {
8097
8299
  color: transparent;
8098
8300
  }
8099
8301
 
8100
- .hover\:border-action-button-icon-active-hover:hover {
8101
- --tw-border-opacity: 1;
8102
- border-color: color-mix(in srgb, var(--action-button-icon-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
8302
+ .before\:pointer-events-none::before {
8303
+ content: var(--tw-content);
8304
+ pointer-events: none;
8103
8305
  }
8104
8306
 
8105
- .hover\:border-action-button-icon-hover:hover {
8106
- --tw-border-opacity: 1;
8107
- border-color: color-mix(in srgb, var(--action-button-icon-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
8307
+ .before\:absolute::before {
8308
+ content: var(--tw-content);
8309
+ position: absolute;
8310
+ }
8311
+
8312
+ .before\:inset-0::before {
8313
+ content: var(--tw-content);
8314
+ inset: 0px;
8315
+ }
8316
+
8317
+ .before\:rounded-\[inherit\]::before {
8318
+ content: var(--tw-content);
8319
+ border-radius: inherit;
8320
+ }
8321
+
8322
+ .before\:border::before {
8323
+ content: var(--tw-content);
8324
+ border-width: 1px;
8325
+ }
8326
+
8327
+ .before\:border-0::before {
8328
+ content: var(--tw-content);
8329
+ border-width: 0px;
8330
+ }
8331
+
8332
+ .before\:border-inherit::before {
8333
+ content: var(--tw-content);
8334
+ border-color: inherit;
8335
+ }
8336
+
8337
+ .before\:content-\[\'\'\]::before {
8338
+ --tw-content: '';
8339
+ content: var(--tw-content);
8108
8340
  }
8109
8341
 
8110
- .hover\:border-action-button-outline-active-hover:hover {
8342
+ .hover\:border-action-button-icon-active-hover:hover {
8111
8343
  --tw-border-opacity: 1;
8112
- border-color: color-mix(in srgb, var(--action-button-outline-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
8344
+ border-color: color-mix(in srgb, var(--action-button-icon-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
8113
8345
  }
8114
8346
 
8115
- .hover\:border-action-button-outline-hover:hover {
8347
+ .hover\:border-action-button-icon-hover:hover {
8116
8348
  --tw-border-opacity: 1;
8117
- border-color: color-mix(in srgb, var(--action-button-outline-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
8349
+ border-color: color-mix(in srgb, var(--action-button-icon-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
8118
8350
  }
8119
8351
 
8120
8352
  .hover\:border-action-button-solid-active-hover:hover {
@@ -8688,6 +8920,14 @@ input[type=number] {
8688
8920
  opacity: 1;
8689
8921
  }
8690
8922
 
8923
+ .hover\:ring-\[var\(--action-button-outline-active-hover-border\)\]:hover {
8924
+ --tw-ring-color: var(--action-button-outline-active-hover-border);
8925
+ }
8926
+
8927
+ .hover\:ring-\[var\(--action-button-outline-hover-border\)\]:hover {
8928
+ --tw-ring-color: var(--action-button-outline-hover-border);
8929
+ }
8930
+
8691
8931
  .hover\:ring-input-active-stroke:hover {
8692
8932
  --tw-ring-opacity: 1;
8693
8933
  --tw-ring-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
@@ -8823,16 +9063,6 @@ input[type=number] {
8823
9063
  border-color: color-mix(in srgb, var(--action-button-icon-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
8824
9064
  }
8825
9065
 
8826
- .active\:border-action-button-outline-active-pressed:active {
8827
- --tw-border-opacity: 1;
8828
- border-color: color-mix(in srgb, var(--action-button-outline-active-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
8829
- }
8830
-
8831
- .active\:border-action-button-outline-pressed:active {
8832
- --tw-border-opacity: 1;
8833
- border-color: color-mix(in srgb, var(--action-button-outline-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
8834
- }
8835
-
8836
9066
  .active\:border-action-button-solid-active-pressed:active {
8837
9067
  --tw-border-opacity: 1;
8838
9068
  border-color: color-mix(in srgb, var(--action-button-solid-active-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -9354,6 +9584,14 @@ input[type=number] {
9354
9584
  opacity: 0.75;
9355
9585
  }
9356
9586
 
9587
+ .active\:ring-\[var\(--action-button-outline-active-pressed-border\)\]:active {
9588
+ --tw-ring-color: var(--action-button-outline-active-pressed-border);
9589
+ }
9590
+
9591
+ .active\:ring-\[var\(--action-button-outline-pressed-border\)\]:active {
9592
+ --tw-ring-color: var(--action-button-outline-pressed-border);
9593
+ }
9594
+
9357
9595
  .active\:ring-input-disable-stroke:active {
9358
9596
  --tw-ring-opacity: 1;
9359
9597
  --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
@@ -10150,6 +10388,11 @@ input[type=number] {
10150
10388
  border-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-border-opacity, 1)), transparent);
10151
10389
  }
10152
10390
 
10391
+ .data-\[state\=indeterminate\]\:border-function-active-solid[data-state="indeterminate"] {
10392
+ --tw-border-opacity: 1;
10393
+ border-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-border-opacity, 1)), transparent);
10394
+ }
10395
+
10153
10396
  .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled] {
10154
10397
  background-color: var(--dropdown-menu-disabled-bg) !important;
10155
10398
  }
@@ -10280,6 +10523,11 @@ input[type=number] {
10280
10523
  background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
10281
10524
  }
10282
10525
 
10526
+ .data-\[state\=indeterminate\]\:bg-function-active-solid[data-state="indeterminate"] {
10527
+ --tw-bg-opacity: 1;
10528
+ background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
10529
+ }
10530
+
10283
10531
  .data-\[state\=open\]\:bg-primary[data-state="open"] {
10284
10532
  --tw-bg-opacity: 1;
10285
10533
  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -10514,6 +10762,11 @@ input[type=number] {
10514
10762
  color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
10515
10763
  }
10516
10764
 
10765
+ .data-\[state\=indeterminate\]\:text-function-active-icon[data-state="indeterminate"] {
10766
+ --tw-text-opacity: 1;
10767
+ color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity, 1)), transparent);
10768
+ }
10769
+
10517
10770
  .data-\[state\=open\]\:text-primary-foreground[data-state="open"] {
10518
10771
  --tw-text-opacity: 1;
10519
10772
  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -10534,6 +10787,11 @@ input[type=number] {
10534
10787
  border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity, 1)), transparent);
10535
10788
  }
10536
10789
 
10790
+ .hover\:data-\[state\=indeterminate\]\:border-function-active-hover[data-state="indeterminate"]:hover {
10791
+ --tw-border-opacity: 1;
10792
+ border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity, 1)), transparent);
10793
+ }
10794
+
10537
10795
  .hover\:data-\[state\=checked\]\:bg-\[var\(--switch-active-hover-color\)\][data-state="checked"]:hover {
10538
10796
  background-color: var(--switch-active-hover-color);
10539
10797
  }
@@ -10543,6 +10801,11 @@ input[type=number] {
10543
10801
  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
10544
10802
  }
10545
10803
 
10804
+ .hover\:data-\[state\=indeterminate\]\:bg-function-active-hover[data-state="indeterminate"]:hover {
10805
+ --tw-bg-opacity: 1;
10806
+ background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
10807
+ }
10808
+
10546
10809
  .hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-hover-color\)\][data-state="unchecked"]:hover {
10547
10810
  background-color: var(--switch-hover-color);
10548
10811
  }
@@ -10552,6 +10815,16 @@ input[type=number] {
10552
10815
  color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity, 1)), transparent);
10553
10816
  }
10554
10817
 
10818
+ .disabled\:data-\[state\=checked\]\:bg-state-disable-solid[data-state="checked"]:disabled {
10819
+ --tw-bg-opacity: 1;
10820
+ background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
10821
+ }
10822
+
10823
+ .disabled\:data-\[state\=indeterminate\]\:bg-state-disable-solid[data-state="indeterminate"]:disabled {
10824
+ --tw-bg-opacity: 1;
10825
+ background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
10826
+ }
10827
+
10555
10828
  .group:hover .group-hover\:data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state="checked"] {
10556
10829
  background-color: var(--switch-thumb-active-hover-color);
10557
10830
  }
@@ -10630,6 +10903,14 @@ input[type=number] {
10630
10903
  border-bottom-width: 0px;
10631
10904
  }
10632
10905
 
10906
+ .\[\&\[data-state\=checked\]_\.checkbox-check-icon\]\:block[data-state=checked] .checkbox-check-icon {
10907
+ display: block;
10908
+ }
10909
+
10910
+ .\[\&\[data-state\=indeterminate\]_\.checkbox-minus-icon\]\:block[data-state=indeterminate] .checkbox-minus-icon {
10911
+ display: block;
10912
+ }
10913
+
10633
10914
  .\[\&_button\]\:rounded-full button {
10634
10915
  border-radius: 9999px;
10635
10916
  }
@@ -10662,6 +10943,11 @@ input[type=number] {
10662
10943
  height: 1.5rem;
10663
10944
  }
10664
10945
 
10946
+ .\[\&_svg\]\:size-\[12px\] svg {
10947
+ width: 12px;
10948
+ height: 12px;
10949
+ }
10950
+
10665
10951
  .\[\&_svg\]\:size-\[14px\] svg {
10666
10952
  width: 14px;
10667
10953
  height: 14px;