@genspectrum/dashboard-components 0.1.3 → 0.1.5

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 (78) hide show
  1. package/custom-elements.json +488 -117
  2. package/dist/dashboard-components.js +904 -466
  3. package/dist/dashboard-components.js.map +1 -1
  4. package/dist/genspectrum-components.d.ts +473 -67
  5. package/dist/style.css +273 -153
  6. package/package.json +11 -7
  7. package/src/preact/aggregatedData/aggregate.stories.tsx +7 -5
  8. package/src/preact/aggregatedData/aggregate.tsx +16 -7
  9. package/src/preact/components/ReferenceGenomesAwaiter.tsx +25 -0
  10. package/src/preact/components/csv-download-button.tsx +8 -2
  11. package/src/preact/components/headline.stories.tsx +19 -1
  12. package/src/preact/components/headline.tsx +25 -5
  13. package/src/preact/components/info.stories.tsx +24 -3
  14. package/src/preact/components/info.tsx +49 -5
  15. package/src/preact/components/min-max-range-slider.tsx +4 -4
  16. package/src/preact/components/percent-intput.tsx +2 -3
  17. package/src/preact/components/resize-container.tsx +23 -0
  18. package/src/preact/components/table.tsx +1 -0
  19. package/src/preact/components/tabs.stories.tsx +2 -2
  20. package/src/preact/components/tabs.tsx +47 -24
  21. package/src/preact/dateRangeSelector/date-range-selector.stories.tsx +36 -4
  22. package/src/preact/dateRangeSelector/date-range-selector.tsx +67 -53
  23. package/src/preact/locationFilter/location-filter.tsx +2 -2
  24. package/src/preact/mutationComparison/getMutationComparisonTableData.spec.ts +5 -5
  25. package/src/preact/mutationComparison/getMutationComparisonTableData.ts +45 -10
  26. package/src/preact/mutationComparison/mutation-comparison-table.tsx +20 -22
  27. package/src/preact/mutationComparison/mutation-comparison-venn.tsx +6 -3
  28. package/src/preact/mutationComparison/mutation-comparison.stories.tsx +11 -1
  29. package/src/preact/mutationComparison/mutation-comparison.tsx +16 -7
  30. package/src/preact/mutationFilter/mutation-filter.stories.tsx +70 -31
  31. package/src/preact/mutationFilter/mutation-filter.tsx +62 -14
  32. package/src/preact/mutations/getInsertionsTableData.spec.ts +6 -4
  33. package/src/preact/mutations/getInsertionsTableData.ts +1 -1
  34. package/src/preact/mutations/getMutationsTableData.spec.ts +9 -19
  35. package/src/preact/mutations/getMutationsTableData.ts +1 -1
  36. package/src/preact/mutations/mutations-insertions-table.tsx +3 -1
  37. package/src/preact/mutations/mutations-table.tsx +3 -1
  38. package/src/preact/mutations/mutations.stories.tsx +11 -1
  39. package/src/preact/mutations/mutations.tsx +24 -7
  40. package/src/preact/prevalenceOverTime/prevalence-over-time-bar-chart.tsx +1 -0
  41. package/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx +1 -0
  42. package/src/preact/prevalenceOverTime/prevalence-over-time-line-chart.tsx +1 -0
  43. package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx +8 -0
  44. package/src/preact/prevalenceOverTime/prevalence-over-time.tsx +31 -13
  45. package/src/preact/relativeGrowthAdvantage/relative-growth-advantage-chart.tsx +8 -5
  46. package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx +15 -0
  47. package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx +62 -12
  48. package/src/preact/shared/sort/sortInsertions.spec.ts +11 -10
  49. package/src/preact/shared/sort/sortInsertions.ts +10 -17
  50. package/src/preact/shared/sort/sortSubstitutionsAndDeletions.spec.ts +19 -10
  51. package/src/preact/shared/sort/sortSubstitutionsAndDeletions.ts +45 -12
  52. package/src/preact/textInput/text-input.stories.tsx +22 -1
  53. package/src/preact/textInput/text-input.tsx +3 -1
  54. package/src/utils/typeAssertions.spec.ts +31 -0
  55. package/src/utils/typeAssertions.ts +16 -0
  56. package/src/web-components/PreactLitAdapter.tsx +0 -1
  57. package/src/web-components/app.stories.ts +129 -0
  58. package/src/web-components/app.ts +27 -6
  59. package/src/web-components/display/aggregate-component.stories.ts +24 -11
  60. package/src/web-components/display/aggregate-component.tsx +26 -5
  61. package/src/web-components/display/mutation-comparison-component.stories.ts +32 -11
  62. package/src/web-components/display/mutation-comparison-component.tsx +79 -4
  63. package/src/web-components/display/mutations-component.stories.ts +40 -19
  64. package/src/web-components/display/mutations-component.tsx +71 -4
  65. package/src/web-components/display/prevalence-over-time-component.stories.ts +44 -18
  66. package/src/web-components/display/prevalence-over-time-component.tsx +105 -5
  67. package/src/web-components/display/relative-growth-advantage-component.stories.ts +32 -10
  68. package/src/web-components/display/relative-growth-advantage-component.tsx +66 -3
  69. package/src/web-components/input/date-range-selector-component.stories.ts +51 -9
  70. package/src/web-components/input/date-range-selector-component.tsx +69 -4
  71. package/src/web-components/input/location-filter-component.stories.ts +15 -4
  72. package/src/web-components/input/location-filter-component.tsx +2 -6
  73. package/src/web-components/input/mutation-filter-component.stories.ts +33 -12
  74. package/src/web-components/input/mutation-filter-component.tsx +60 -4
  75. package/src/web-components/input/text-input-component.stories.ts +26 -6
  76. package/src/web-components/input/text-input-component.tsx +34 -3
  77. package/src/web-components/display/aggregate-component.mdx +0 -25
  78. package/src/web-components/input/location-filter.mdx +0 -25
package/dist/style.css CHANGED
@@ -868,108 +868,6 @@ html {
868
868
  --bc: 27.8078% 0.029596 256.847952;
869
869
  }
870
870
 
871
- @media (prefers-color-scheme: dark) {
872
-
873
- :root {
874
- color-scheme: dark;
875
- --in: 72.06% 0.191 231.6;
876
- --su: 64.8% 0.150 160;
877
- --wa: 84.71% 0.199 83.87;
878
- --er: 71.76% 0.221 22.18;
879
- --pc: 13.138% 0.0392 275.75;
880
- --sc: 14.96% 0.052 342.55;
881
- --ac: 14.902% 0.0334 183.61;
882
- --inc: 0% 0 0;
883
- --suc: 0% 0 0;
884
- --wac: 0% 0 0;
885
- --erc: 0% 0 0;
886
- --rounded-box: 1rem;
887
- --rounded-btn: 0.5rem;
888
- --rounded-badge: 1.9rem;
889
- --animation-btn: 0.25s;
890
- --animation-input: .2s;
891
- --btn-focus-scale: 0.95;
892
- --border-btn: 1px;
893
- --tab-border: 1px;
894
- --tab-radius: 0.5rem;
895
- --p: 65.69% 0.196 275.75;
896
- --s: 74.8% 0.26 342.55;
897
- --a: 74.51% 0.167 183.61;
898
- --n: 31.3815% 0.021108 254.139175;
899
- --nc: 74.6477% 0.0216 264.435964;
900
- --b1: 25.3267% 0.015896 252.417568;
901
- --b2: 23.2607% 0.013807 253.100675;
902
- --b3: 21.1484% 0.01165 254.087939;
903
- --bc: 74.6477% 0.0216 264.435964;
904
- }
905
- }
906
-
907
- [data-theme=light] {
908
- color-scheme: light;
909
- --in: 72.06% 0.191 231.6;
910
- --su: 64.8% 0.150 160;
911
- --wa: 84.71% 0.199 83.87;
912
- --er: 71.76% 0.221 22.18;
913
- --pc: 89.824% 0.06192 275.75;
914
- --ac: 15.352% 0.0368 183.61;
915
- --inc: 0% 0 0;
916
- --suc: 0% 0 0;
917
- --wac: 0% 0 0;
918
- --erc: 0% 0 0;
919
- --rounded-box: 1rem;
920
- --rounded-btn: 0.5rem;
921
- --rounded-badge: 1.9rem;
922
- --animation-btn: 0.25s;
923
- --animation-input: .2s;
924
- --btn-focus-scale: 0.95;
925
- --border-btn: 1px;
926
- --tab-border: 1px;
927
- --tab-radius: 0.5rem;
928
- --p: 49.12% 0.3096 275.75;
929
- --s: 69.71% 0.329 342.55;
930
- --sc: 98.71% 0.0106 342.55;
931
- --a: 76.76% 0.184 183.61;
932
- --n: 32.1785% 0.02476 255.701624;
933
- --nc: 89.4994% 0.011585 252.096176;
934
- --b1: 100% 0 0;
935
- --b2: 96.1151% 0 0;
936
- --b3: 92.4169% 0.00108 197.137559;
937
- --bc: 27.8078% 0.029596 256.847952;
938
- }
939
-
940
- [data-theme=dark] {
941
- color-scheme: dark;
942
- --in: 72.06% 0.191 231.6;
943
- --su: 64.8% 0.150 160;
944
- --wa: 84.71% 0.199 83.87;
945
- --er: 71.76% 0.221 22.18;
946
- --pc: 13.138% 0.0392 275.75;
947
- --sc: 14.96% 0.052 342.55;
948
- --ac: 14.902% 0.0334 183.61;
949
- --inc: 0% 0 0;
950
- --suc: 0% 0 0;
951
- --wac: 0% 0 0;
952
- --erc: 0% 0 0;
953
- --rounded-box: 1rem;
954
- --rounded-btn: 0.5rem;
955
- --rounded-badge: 1.9rem;
956
- --animation-btn: 0.25s;
957
- --animation-input: .2s;
958
- --btn-focus-scale: 0.95;
959
- --border-btn: 1px;
960
- --tab-border: 1px;
961
- --tab-radius: 0.5rem;
962
- --p: 65.69% 0.196 275.75;
963
- --s: 74.8% 0.26 342.55;
964
- --a: 74.51% 0.167 183.61;
965
- --n: 31.3815% 0.021108 254.139175;
966
- --nc: 74.6477% 0.0216 264.435964;
967
- --b1: 25.3267% 0.015896 252.417568;
968
- --b2: 23.2607% 0.013807 253.100675;
969
- --b3: 21.1484% 0.01165 254.087939;
970
- --bc: 74.6477% 0.0216 264.435964;
971
- }
972
-
973
871
  *, ::before, ::after {
974
872
  --tw-border-spacing-x: 0;
975
873
  --tw-border-spacing-y: 0;
@@ -1077,6 +975,39 @@ html {
1077
975
  --tw-contain-paint: ;
1078
976
  --tw-contain-style: ;
1079
977
  }
978
+ .container {
979
+ width: 100%;
980
+ }
981
+ @media (min-width: 640px) {
982
+
983
+ .container {
984
+ max-width: 640px;
985
+ }
986
+ }
987
+ @media (min-width: 768px) {
988
+
989
+ .container {
990
+ max-width: 768px;
991
+ }
992
+ }
993
+ @media (min-width: 1024px) {
994
+
995
+ .container {
996
+ max-width: 1024px;
997
+ }
998
+ }
999
+ @media (min-width: 1280px) {
1000
+
1001
+ .container {
1002
+ max-width: 1280px;
1003
+ }
1004
+ }
1005
+ @media (min-width: 1536px) {
1006
+
1007
+ .container {
1008
+ max-width: 1536px;
1009
+ }
1010
+ }
1080
1011
  .avatar.placeholder > div {
1081
1012
  display: flex;
1082
1013
  align-items: center;
@@ -1134,7 +1065,6 @@ html {
1134
1065
  transition-duration: 200ms;
1135
1066
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1136
1067
  border-width: var(--border-btn, 1px);
1137
- animation: button-pop var(--animation-btn, 0.25s) ease-out;
1138
1068
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
1139
1069
  --tw-text-opacity: 1;
1140
1070
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
@@ -1609,6 +1539,14 @@ html {
1609
1539
  z-index: 3;
1610
1540
  opacity: 1;
1611
1541
  }
1542
+ .steps {
1543
+ display: inline-grid;
1544
+ grid-auto-flow: column;
1545
+ overflow: hidden;
1546
+ overflow-x: auto;
1547
+ counter-reset: step;
1548
+ grid-auto-columns: 1fr;
1549
+ }
1612
1550
  .steps .step {
1613
1551
  display: grid;
1614
1552
  grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -1623,8 +1561,7 @@ html {
1623
1561
  display: grid;
1624
1562
  align-items: flex-end;
1625
1563
  }
1626
- .tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
1627
- .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
1564
+ .tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
1628
1565
  border-bottom-color: transparent;
1629
1566
  }
1630
1567
  .tab {
@@ -1668,21 +1605,8 @@ html {
1668
1605
  cursor: default;
1669
1606
  grid-column-start: span 9999;
1670
1607
  }
1671
- .tab-content {
1672
- grid-column-start: 1;
1673
- grid-column-end: span 9999;
1674
- grid-row-start: 2;
1675
- margin-top: calc(var(--tab-border) * -1);
1676
- display: none;
1677
- border-color: transparent;
1678
- border-width: var(--tab-border, 0);
1679
- }
1680
- :checked + .tab-content:nth-child(2),
1681
- .tab-active + .tab-content:nth-child(2) {
1682
- border-start-start-radius: 0px;
1683
- }
1684
1608
  input.tab:checked + .tab-content,
1685
- .tab-active + .tab-content {
1609
+ :is(.tab-active, [aria-selected="true"]) + .tab-content {
1686
1610
  display: block;
1687
1611
  }
1688
1612
  .table {
@@ -1727,6 +1651,12 @@ input.tab:checked + .tab-content,
1727
1651
  font-size: 1rem;
1728
1652
  line-height: 1.5rem;
1729
1653
  }
1654
+ @media (prefers-reduced-motion: no-preference) {
1655
+
1656
+ .btn {
1657
+ animation: button-pop var(--animation-btn, 0.25s) ease-out;
1658
+ }
1659
+ }
1730
1660
  .btn:active:hover,
1731
1661
  .btn:active:focus {
1732
1662
  animation: button-pop 0s ease-out;
@@ -1828,6 +1758,14 @@ input.tab:checked + .tab-content,
1828
1758
  outline-offset: 2px;
1829
1759
  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
1830
1760
  }
1761
+ .checkbox:disabled {
1762
+ border-width: 0px;
1763
+ cursor: not-allowed;
1764
+ border-color: transparent;
1765
+ --tw-bg-opacity: 1;
1766
+ background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
1767
+ opacity: 0.2;
1768
+ }
1831
1769
  .checkbox:checked,
1832
1770
  .checkbox[aria-checked="true"] {
1833
1771
  background-repeat: no-repeat;
@@ -1854,13 +1792,6 @@ input.tab:checked + .tab-content,
1854
1792
  linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%),
1855
1793
  linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%);
1856
1794
  }
1857
- .checkbox:disabled {
1858
- cursor: not-allowed;
1859
- border-color: transparent;
1860
- --tw-bg-opacity: 1;
1861
- background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
1862
- opacity: 0.2;
1863
- }
1864
1795
  @keyframes checkmark {
1865
1796
 
1866
1797
  0% {
@@ -1916,7 +1847,8 @@ input.tab:checked + .tab-content,
1916
1847
  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
1917
1848
  outline-color: var(--fallback-er,oklch(var(--er)/1));
1918
1849
  }
1919
- .input-disabled,
1850
+ .input:has(> input[disabled]),
1851
+ .input-disabled,
1920
1852
  .input:disabled,
1921
1853
  .input[disabled] {
1922
1854
  cursor: not-allowed;
@@ -1926,16 +1858,20 @@ input.tab:checked + .tab-content,
1926
1858
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
1927
1859
  color: var(--fallback-bc,oklch(var(--bc)/0.4));
1928
1860
  }
1929
- .input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder {
1861
+ .input:has(> input[disabled])::-moz-placeholder, .input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder {
1930
1862
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
1931
1863
  --tw-placeholder-opacity: 0.2;
1932
1864
  }
1933
- .input-disabled::placeholder,
1865
+ .input:has(> input[disabled])::placeholder,
1866
+ .input-disabled::placeholder,
1934
1867
  .input:disabled::placeholder,
1935
1868
  .input[disabled]::placeholder {
1936
1869
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
1937
1870
  --tw-placeholder-opacity: 0.2;
1938
1871
  }
1872
+ .input:has(> input[disabled]) > input[disabled] {
1873
+ cursor: not-allowed;
1874
+ }
1939
1875
  .input::-webkit-date-and-time-value {
1940
1876
  text-align: inherit;
1941
1877
  }
@@ -1962,6 +1898,13 @@ input.tab:checked + .tab-content,
1962
1898
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
1963
1899
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
1964
1900
  }
1901
+ .loading-spinner {
1902
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
1903
+ mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
1904
+ }
1905
+ .loading-md {
1906
+ width: 1.5rem;
1907
+ }
1965
1908
  :where(.menu li:empty) {
1966
1909
  --tw-bg-opacity: 1;
1967
1910
  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
@@ -2291,12 +2234,79 @@ input.tab:checked + .tab-content,
2291
2234
  .steps .step[data-content]:after {
2292
2235
  content: attr(data-content);
2293
2236
  }
2237
+ .steps .step-neutral + .step-neutral:before,
2238
+ .steps .step-neutral:after {
2239
+ --tw-bg-opacity: 1;
2240
+ background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
2241
+ --tw-text-opacity: 1;
2242
+ color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
2243
+ }
2244
+ .steps .step-primary + .step-primary:before,
2245
+ .steps .step-primary:after {
2246
+ --tw-bg-opacity: 1;
2247
+ background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
2248
+ --tw-text-opacity: 1;
2249
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
2250
+ }
2251
+ .steps .step-secondary + .step-secondary:before,
2252
+ .steps .step-secondary:after {
2253
+ --tw-bg-opacity: 1;
2254
+ background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
2255
+ --tw-text-opacity: 1;
2256
+ color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
2257
+ }
2258
+ .steps .step-accent + .step-accent:before,
2259
+ .steps .step-accent:after {
2260
+ --tw-bg-opacity: 1;
2261
+ background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity)));
2262
+ --tw-text-opacity: 1;
2263
+ color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
2264
+ }
2265
+ .steps .step-info + .step-info:before {
2266
+ --tw-bg-opacity: 1;
2267
+ background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
2268
+ }
2269
+ .steps .step-info:after {
2270
+ --tw-bg-opacity: 1;
2271
+ background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
2272
+ --tw-text-opacity: 1;
2273
+ color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
2274
+ }
2275
+ .steps .step-success + .step-success:before {
2276
+ --tw-bg-opacity: 1;
2277
+ background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
2278
+ }
2279
+ .steps .step-success:after {
2280
+ --tw-bg-opacity: 1;
2281
+ background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
2282
+ --tw-text-opacity: 1;
2283
+ color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
2284
+ }
2285
+ .steps .step-warning + .step-warning:before {
2286
+ --tw-bg-opacity: 1;
2287
+ background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
2288
+ }
2289
+ .steps .step-warning:after {
2290
+ --tw-bg-opacity: 1;
2291
+ background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
2292
+ --tw-text-opacity: 1;
2293
+ color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
2294
+ }
2295
+ .steps .step-error + .step-error:before {
2296
+ --tw-bg-opacity: 1;
2297
+ background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
2298
+ }
2299
+ .steps .step-error:after {
2300
+ --tw-bg-opacity: 1;
2301
+ background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
2302
+ --tw-text-opacity: 1;
2303
+ color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
2304
+ }
2294
2305
  .tabs-lifted > .tab:focus-visible {
2295
2306
  border-end-end-radius: 0;
2296
2307
  border-end-start-radius: 0;
2297
2308
  }
2298
- .tab.tab-active:not(.tab-disabled):not([disabled]),
2299
- .tab:is(input:checked) {
2309
+ .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) {
2300
2310
  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
2301
2311
  --tw-border-opacity: 1;
2302
2312
  --tw-text-opacity: 1;
@@ -2331,8 +2341,7 @@ input.tab:checked + .tab-content,
2331
2341
  padding-inline-end: var(--tab-padding, 1rem);
2332
2342
  padding-top: var(--tab-border, 1px);
2333
2343
  }
2334
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]),
2335
- .tabs-lifted > .tab:is(input:checked) {
2344
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked) {
2336
2345
  background-color: var(--tab-bg);
2337
2346
  border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
2338
2347
  border-inline-start-color: var(--tab-border-color);
@@ -2343,7 +2352,7 @@ input.tab:checked + .tab-content,
2343
2352
  padding-bottom: var(--tab-border, 1px);
2344
2353
  padding-top: 0;
2345
2354
  }
2346
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
2355
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
2347
2356
  z-index: 1;
2348
2357
  content: "";
2349
2358
  display: block;
@@ -2372,26 +2381,26 @@ input.tab:checked + .tab-content,
2372
2381
  );
2373
2382
  background-image: var(--radius-start), var(--radius-end);
2374
2383
  }
2375
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
2384
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
2376
2385
  background-image: var(--radius-end);
2377
2386
  background-position: top right;
2378
2387
  }
2379
- [dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
2388
+ [dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
2380
2389
  background-image: var(--radius-start);
2381
2390
  background-position: top left;
2382
2391
  }
2383
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
2392
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
2384
2393
  background-image: var(--radius-start);
2385
2394
  background-position: top left;
2386
2395
  }
2387
- [dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
2396
+ [dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
2388
2397
  background-image: var(--radius-end);
2389
2398
  background-position: top right;
2390
2399
  }
2391
2400
  .tabs-lifted
2392
- > .tab-active:not(.tab-disabled):not([disabled])
2401
+ > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
2393
2402
  + .tabs-lifted
2394
- .tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
2403
+ :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
2395
2404
  background-image: var(--radius-end);
2396
2405
  background-position: top right;
2397
2406
  }
@@ -2712,17 +2721,23 @@ input.tab:checked + .tab-content,
2712
2721
  .static {
2713
2722
  position: static;
2714
2723
  }
2724
+ .absolute {
2725
+ position: absolute;
2726
+ }
2715
2727
  .relative {
2716
2728
  position: relative;
2717
2729
  }
2718
- .z-\[1\] {
2719
- z-index: 1;
2730
+ .right-6 {
2731
+ right: 1.5rem;
2720
2732
  }
2721
- .col-\[9999\] {
2722
- grid-column: 9999;
2733
+ .top-8 {
2734
+ top: 2rem;
2723
2735
  }
2724
- .m-1 {
2725
- margin: 0.25rem;
2736
+ .z-50 {
2737
+ z-index: 50;
2738
+ }
2739
+ .z-\[1\] {
2740
+ z-index: 1;
2726
2741
  }
2727
2742
  .m-2 {
2728
2743
  margin: 0.5rem;
@@ -2757,6 +2772,9 @@ input.tab:checked + .tab-content,
2757
2772
  .mt-2 {
2758
2773
  margin-top: 0.5rem;
2759
2774
  }
2775
+ .mt-4 {
2776
+ margin-top: 1rem;
2777
+ }
2760
2778
  .inline {
2761
2779
  display: inline;
2762
2780
  }
@@ -2769,8 +2787,11 @@ input.tab:checked + .tab-content,
2769
2787
  .grid {
2770
2788
  display: grid;
2771
2789
  }
2772
- .w-11\/12 {
2773
- width: 91.666667%;
2790
+ .hidden {
2791
+ display: none;
2792
+ }
2793
+ .h-full {
2794
+ height: 100%;
2774
2795
  }
2775
2796
  .w-16 {
2776
2797
  width: 4rem;
@@ -2793,6 +2814,9 @@ input.tab:checked + .tab-content,
2793
2814
  .max-w-screen-lg {
2794
2815
  max-width: 1024px;
2795
2816
  }
2817
+ .flex-1 {
2818
+ flex: 1 1 0%;
2819
+ }
2796
2820
  .grow {
2797
2821
  flex-grow: 1;
2798
2822
  }
@@ -2811,15 +2835,24 @@ input.tab:checked + .tab-content,
2811
2835
  .items-center {
2812
2836
  align-items: center;
2813
2837
  }
2838
+ .justify-end {
2839
+ justify-content: flex-end;
2840
+ }
2814
2841
  .justify-center {
2815
2842
  justify-content: center;
2816
2843
  }
2844
+ .justify-between {
2845
+ justify-content: space-between;
2846
+ }
2817
2847
  .gap-1 {
2818
2848
  gap: 0.25rem;
2819
2849
  }
2820
2850
  .gap-2 {
2821
2851
  gap: 0.5rem;
2822
2852
  }
2853
+ .overflow-auto {
2854
+ overflow: auto;
2855
+ }
2823
2856
  .whitespace-nowrap {
2824
2857
  white-space: nowrap;
2825
2858
  }
@@ -2841,24 +2874,45 @@ input.tab:checked + .tab-content,
2841
2874
  .rounded-none {
2842
2875
  border-radius: 0px;
2843
2876
  }
2877
+ .rounded-b-md {
2878
+ border-bottom-right-radius: 0.375rem;
2879
+ border-bottom-left-radius: 0.375rem;
2880
+ }
2881
+ .rounded-tl-md {
2882
+ border-top-left-radius: 0.375rem;
2883
+ }
2884
+ .rounded-tr-md {
2885
+ border-top-right-radius: 0.375rem;
2886
+ }
2844
2887
  .border {
2845
2888
  border-width: 1px;
2846
2889
  }
2847
2890
  .border-2 {
2848
2891
  border-width: 2px;
2849
2892
  }
2850
- .border-base-300 {
2893
+ .border-b-2 {
2894
+ border-bottom-width: 2px;
2895
+ }
2896
+ .border-black {
2851
2897
  --tw-border-opacity: 1;
2852
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
2898
+ border-color: rgb(0 0 0 / var(--tw-border-opacity));
2853
2899
  }
2854
2900
  .border-error {
2855
2901
  --tw-border-opacity: 1;
2856
2902
  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
2857
2903
  }
2904
+ .border-gray-100 {
2905
+ --tw-border-opacity: 1;
2906
+ border-color: rgb(243 244 246 / var(--tw-border-opacity));
2907
+ }
2858
2908
  .border-gray-300 {
2859
2909
  --tw-border-opacity: 1;
2860
2910
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
2861
2911
  }
2912
+ .border-gray-400 {
2913
+ --tw-border-opacity: 1;
2914
+ border-color: rgb(156 163 175 / var(--tw-border-opacity));
2915
+ }
2862
2916
  .bg-base-100 {
2863
2917
  --tw-bg-opacity: 1;
2864
2918
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
@@ -2871,9 +2925,6 @@ input.tab:checked + .tab-content,
2871
2925
  --tw-bg-opacity: 1;
2872
2926
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2873
2927
  }
2874
- .p-1 {
2875
- padding: 0.25rem;
2876
- }
2877
2928
  .p-2 {
2878
2929
  padding: 0.5rem;
2879
2930
  }
@@ -2901,20 +2952,89 @@ input.tab:checked + .tab-content,
2901
2952
  padding-top: 4rem;
2902
2953
  padding-bottom: 4rem;
2903
2954
  }
2955
+ .py-2 {
2956
+ padding-top: 0.5rem;
2957
+ padding-bottom: 0.5rem;
2958
+ }
2959
+ .text-justify {
2960
+ text-align: justify;
2961
+ }
2962
+ .text-base {
2963
+ font-size: 1rem;
2964
+ line-height: 1.5rem;
2965
+ }
2966
+ .text-lg {
2967
+ font-size: 1.125rem;
2968
+ line-height: 1.75rem;
2969
+ }
2970
+ .text-sm {
2971
+ font-size: 0.875rem;
2972
+ line-height: 1.25rem;
2973
+ }
2974
+ .text-xl {
2975
+ font-size: 1.25rem;
2976
+ line-height: 1.75rem;
2977
+ }
2904
2978
  .text-xs {
2905
2979
  font-size: 0.75rem;
2906
2980
  line-height: 1rem;
2907
2981
  }
2982
+ .font-bold {
2983
+ font-weight: 700;
2984
+ }
2908
2985
  .font-medium {
2909
2986
  font-weight: 500;
2910
2987
  }
2988
+ .leading-5 {
2989
+ line-height: 1.25rem;
2990
+ }
2991
+ .text-blue-600 {
2992
+ --tw-text-opacity: 1;
2993
+ color: rgb(37 99 235 / var(--tw-text-opacity));
2994
+ }
2995
+ .text-gray-600 {
2996
+ --tw-text-opacity: 1;
2997
+ color: rgb(75 85 99 / var(--tw-text-opacity));
2998
+ }
2999
+ .underline {
3000
+ text-decoration-line: underline;
3001
+ }
2911
3002
  .shadow {
2912
3003
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2913
3004
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
2914
3005
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2915
3006
  }
3007
+ .shadow-lg {
3008
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
3009
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
3010
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3011
+ }
3012
+ .blur {
3013
+ --tw-blur: blur(8px);
3014
+ 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);
3015
+ }
2916
3016
  .filter {
2917
3017
  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);
3018
+ }
3019
+ .transition-colors {
3020
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
3021
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3022
+ transition-duration: 150ms;
3023
+ }
3024
+ .duration-150 {
3025
+ transition-duration: 150ms;
3026
+ }
3027
+ .hover\:bg-gray-100:hover {
3028
+ --tw-bg-opacity: 1;
3029
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
3030
+ }
3031
+ .hover\:text-blue-800:hover {
3032
+ --tw-text-opacity: 1;
3033
+ color: rgb(30 64 175 / var(--tw-text-opacity));
3034
+ }
3035
+ .hover\:text-gray-700:hover {
3036
+ --tw-text-opacity: 1;
3037
+ color: rgb(55 65 81 / var(--tw-text-opacity));
2918
3038
  }.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
2919
3039
  /*rtl:begin:ignore*/left:0/*
2920
3040
  /*rtl:end:ignore*/}/*