@fileverse/ui 4.0.1 → 4.0.3

package/dist/index.css

@@ -394,34 +394,7 @@ video {
   display: none;
 }
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --danger: 0 84.2% 60.2%;
-    --danger-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 260, 100%, 52%, 1; /* Blue-700 */
-
+    --focused: 260, 100%, 52%, 1; /* Blue-700 */
     --radius: 0.5rem;
 
     /* Button */
@@ -436,11 +409,13 @@ video {
     --color-button-floating-hover: 200, 13%, 95%, 1; /* Gray-100 */
 
     /* Text */
-    --color-text-default: 0, 0%, 0%, 1; /* Black */
+    --color-text-default: 207, 8%, 23%, 1; /* Gray-950 */
     --color-text-secondary: 208, 8%, 50%, 1; /* Gray-700 */
     --color-text-disabled: 206, 9%, 66%, 1; /* Gray-500 */
     --color-text-danger: 354, 96%, 59%, 1; /* Red-500 */
+    --color-text-success: 127, 69%, 29%, 1; /* Green-700 */
     --color-text-inverse: 0, 0%, 100%, 1; /* White */
+    --color-text-link: 260, 100%, 52%, 1; /* Blue-700 */
 
     /* Background */
     --color-bg-default: 0, 0%, 100%, 1; /* White */
@@ -454,28 +429,31 @@ video {
     --color-bg-brand-hover: 50, 98%, 47%, 1; /* Yellow-500 */
     --color-bg-brand-light: 53, 100%, 90%, 1; /* Yellow-100 */
     --color-bg-danger: 354, 96%, 59%, 1; /* Red-500 */
+    --color-bg-danger-light: 354, 100%, 94%, 1; /* Red-100 */
     --color-bg-default-inverse: 0, 0%, 0%, 1; /* Black */
     --color-bg-tertiary: 195, 10%, 92%, 1; /* Tertiary */
+    --color-bg-success-light: 124, 79%, 93%, 1; /* Green-100 */
 
     /* Border */
     --color-border-default: 195, 10%, 92%, 1; /* Gray-200 */
     --color-border-hover: 0, 0%, 0%, 1; /* Black */
-    --color-border-bold: 0, 0%, 0%, 1; /* Black */
     --color-border-light: 0, 0%, 100%, 1; /* White */
     --color-border-active: 0, 0%, 0%, 1; /* Black */
     --color-border-focused: 260, 100%, 52%, 1; /* Blue-700 */
     --color-border-danger: 354, 96%, 59%, 1; /* Red-500 */
+    --color-border-disabled: 206, 9%, 66%, 1; /* Gray-500 */
 
     /* Icon */
-    --color-icon-default: 0, 0%, 0%, 1; /* Black */
+    --color-icon-default: 207, 8%, 23%, 1; /* Gray-950 */
     --color-icon-default-hover: 207, 8%, 23%, 1; /* Gray-950 */
     --color-icon-brand: 52, 100%, 52%, 1; /* Yellow-400 */
     --color-icon-secondary: 208, 8%, 50%, 1; /* Gray-700 */
     --color-icon-disabled: 206, 9%, 66%, 1; /* Gray-500 */
     --color-icon-inverse: 0, 0%, 100%, 1; /* White */
+    --color-icon-danger: 354, 96%, 59%, 1; /* Red-500 */
 
     /* Utility */
-    --color-utility-overlay: 0, 0%, 0%, 0.9; /* Black 90% */
+    --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
 
     /* Elevation */
     --shadow-elevation-1: 0px 1px 2px rgba (0,  0,  0,  0.15);
@@ -484,12 +462,12 @@ video {
     --shadow-elevation-4: 0px 8px 32px rgba (0,  0,  0,  0.15);
   }
   * {
-  border-color: hsl(var(--border));
-}
+    border-color: hsl(var(--color-border-default));
+  }
   body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-}
+    color: hsl(var(--color-text-default));
+    background-color: hsl(var(--color-bg-default));
+  }
 
   .text-heading-2xlg {
     font-family: system-ui;
@@ -610,6 +588,14 @@ video {
     line-height: 16px;
   }
 
+  .text-helper-link {
+    font-family: system-ui;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    text-decoration: underline;
+  }
+
   /** COLORS **/
   .color-text-default {
     color: hsl(var(--color-text-default));
@@ -627,6 +613,14 @@ video {
     color: hsl(var(--color-text-danger));
   }
 
+  .color-text-success {
+    color: hsl(var(--color-text-success));
+  }
+
+  .color-text-link {
+    color: hsl(var(--color-text-link));
+  }
+
   .color-text-inverse {
     color: hsl(var(--color-text-inverse));
   }
@@ -667,6 +661,10 @@ video {
     background-color: hsl(var(--color-bg-brand));
   }
 
+  .\!color-bg-brand-hover {
+    background-color: hsl(var(--color-bg-brand-hover)) !important;
+  }
+
   .color-bg-brand-hover {
     background-color: hsl(var(--color-bg-brand-hover));
   }
@@ -679,6 +677,14 @@ video {
     background-color: hsl(var(--color-bg-danger));
   }
 
+  .color-bg-danger-light {
+    background-color: hsl(var(--color-bg-danger-light));
+  }
+
+  .color-bg-success-light {
+    background-color: hsl(var(--color-bg-success-light));
+  }
+
   .color-bg-default-inverse {
     background-color: hsl(var(--color-bg-default-inverse));
   }
@@ -694,7 +700,7 @@ video {
 
   .color-button-secondary {
     background-color: hsl(var(--color-button-secondary));
-    border: 2px solid hsl(var(--color-border-bold));
+    border: 2px solid hsl(var(--color-border-active));
   }
 
   .color-button-secondary-hover {
@@ -997,6 +1003,14 @@ video {
 .inset-0 {
   inset: 0px;
 }
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
 .-bottom-6 {
   bottom: -1.5rem;
 }
@@ -1024,6 +1038,9 @@ video {
 .bottom-5 {
   bottom: 1.25rem;
 }
+.left-0 {
+  left: 0px;
+}
 .left-1\/2 {
   left: 50%;
 }
@@ -1036,6 +1053,9 @@ video {
 .left-\[10\%\] {
   left: 10%;
 }
+.left-\[50\%\] {
+  left: 50%;
+}
 .right-0 {
   right: 0px;
 }
@@ -1045,12 +1065,42 @@ video {
 .right-3 {
   right: 0.75rem;
 }
+.right-4 {
+  right: 1rem;
+}
 .right-5 {
   right: 1.25rem;
 }
+.right-6 {
+  right: 1.5rem;
+}
+.top-0 {
+  top: 0px;
+}
+.top-1\/2 {
+  top: 50%;
+}
+.top-3 {
+  top: 0.75rem;
+}
+.top-5 {
+  top: 1.25rem;
+}
+.top-6 {
+  top: 1.5rem;
+}
+.top-\[50\%\] {
+  top: 50%;
+}
 .z-10 {
   z-index: 10;
 }
+.z-50 {
+  z-index: 50;
+}
+.z-\[999\] {
+  z-index: 999;
+}
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -1095,6 +1145,9 @@ video {
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-24 {
+  margin-top: 6rem;
+}
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1146,6 +1199,9 @@ video {
 .h-12 {
   height: 3rem;
 }
+.h-16 {
+  height: 4rem;
+}
 .h-4 {
   height: 1rem;
 }
@@ -1161,12 +1217,18 @@ video {
 .h-9 {
   height: 2.25rem;
 }
+.h-\[16px\] {
+  height: 16px;
+}
 .h-\[18px\] {
   height: 18px;
 }
 .h-\[208px\] {
   height: 208px;
 }
+.h-\[20px\] {
+  height: 20px;
+}
 .h-\[30px\] {
   height: 30px;
 }
@@ -1191,6 +1253,9 @@ video {
 .h-\[calc\(100\%-2rem\)\] {
   height: calc(100% - 2rem);
 }
+.h-auto {
+  height: auto;
+}
 .h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -1231,6 +1296,9 @@ video {
 .w-24 {
   width: 6rem;
 }
+.w-3\/4 {
+  width: 75%;
+}
 .w-32 {
   width: 8rem;
 }
@@ -1243,6 +1311,9 @@ video {
 .w-6 {
   width: 1.5rem;
 }
+.w-72 {
+  width: 18rem;
+}
 .w-8 {
   width: 2rem;
 }
@@ -1252,12 +1323,18 @@ video {
 .w-\[151px\] {
   width: 151px;
 }
+.w-\[16px\] {
+  width: 16px;
+}
 .w-\[172px\] {
   width: 172px;
 }
 .w-\[18px\] {
   width: 18px;
 }
+.w-\[20px\] {
+  width: 20px;
+}
 .w-\[350px\] {
   width: 350px;
 }
@@ -1313,6 +1390,9 @@ video {
 .min-w-\[200px\] {
   min-width: 200px;
 }
+.min-w-\[25\%\] {
+  min-width: 25%;
+}
 .min-w-\[30px\] {
   min-width: 30px;
 }
@@ -1339,18 +1419,39 @@ video {
   max-width: -moz-fit-content;
   max-width: fit-content;
 }
+.max-w-lg {
+  max-width: 32rem;
+}
+.max-w-screen-md {
+  max-width: 768px;
+}
 .max-w-sm {
   max-width: 24rem;
 }
 .flex-1 {
   flex: 1 1 0%;
 }
+.flex-\[0\.05\] {
+  flex: 0.05;
+}
 .flex-\[0\.8\] {
   flex: 0.8;
 }
+.flex-auto {
+  flex: 1 1 auto;
+}
+.flex-none {
+  flex: none;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
+.grow {
+  flex-grow: 1;
+}
+.basis-0 {
+  flex-basis: 0px;
+}
 .caption-bottom {
   caption-side: bottom;
 }
@@ -1358,6 +1459,22 @@ video {
   --tw-translate-x: -50%;
   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));
 }
+.translate-x-1\/2 {
+  --tw-translate-x: 50%;
+  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));
+}
+.translate-x-\[-50\%\] {
+  --tw-translate-x: -50%;
+  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));
+}
+.translate-y-1\/4 {
+  --tw-translate-y: 25%;
+  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));
+}
+.translate-y-\[-50\%\] {
+  --tw-translate-y: -50%;
+  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));
+}
 .-rotate-90 {
   --tw-rotate: -90deg;
   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));
@@ -1398,12 +1515,18 @@ video {
      -moz-appearance: none;
           appearance: none;
 }
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
 .flex-row {
   flex-direction: row;
 }
 .flex-col {
   flex-direction: column;
 }
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -1467,6 +1590,11 @@ video {
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
+}
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1518,6 +1646,26 @@ video {
 .rounded-xl {
   border-radius: 0.75rem;
 }
+.rounded-b-lg {
+  border-bottom-right-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+}
+.rounded-l-lg {
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+}
+.rounded-r-lg {
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+.rounded-t-\[10px\] {
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.rounded-t-lg {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
 .border {
   border-width: 1px;
 }
@@ -1536,9 +1684,18 @@ video {
 .border-b-\[0\.5px\] {
   border-bottom-width: 0.5px;
 }
+.border-r {
+  border-right-width: 1px;
+}
 .border-t {
   border-top-width: 1px;
 }
+.border-t-\[1px\] {
+  border-top-width: 1px;
+}
+.border-solid {
+  border-style: solid;
+}
 .border-dashed {
   border-style: dashed;
 }
@@ -1549,27 +1706,22 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
-.border-danger {
-  border-color: hsl(var(--color-text-danger));
-}
-.border-input {
-  border-color: hsl(var(--color-border-default));
-}
-.border-primary {
-  border-color: hsl(var(--primary));
-}
 .border-transparent {
   border-color: transparent;
 }
-.bg-background {
-  background-color: hsl(var(--background));
+.\!bg-transparent {
+  background-color: transparent !important;
 }
-.bg-muted\/50 {
-  background-color: hsl(var(--color-text-disabled) / 0.5);
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 .bg-transparent {
   background-color: transparent;
 }
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
 .bg-none {
   background-image: none;
 }
@@ -1637,6 +1789,10 @@ video {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1653,6 +1809,15 @@ video {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
 .pl-10 {
   padding-left: 2.5rem;
 }
@@ -1665,6 +1830,15 @@ video {
 .pt-0 {
   padding-top: 0px;
 }
+.pt-2 {
+  padding-top: 0.5rem;
+}
+.pt-4 {
+  padding-top: 1rem;
+}
+.pt-6 {
+  padding-top: 1.5rem;
+}
 .text-left {
   text-align: left;
 }
@@ -1677,9 +1851,26 @@ video {
 .align-middle {
   vertical-align: middle;
 }
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+.text-\[10px\] {
+  font-size: 10px;
+}
+.text-\[14px\] {
+  font-size: 14px;
+}
+.text-\[16px\] {
+  font-size: 16px;
+}
+.text-\[20px\] {
+  font-size: 20px;
+}
+.text-\[24px\] {
+  font-size: 24px;
+}
+.text-\[32px\] {
+  font-size: 32px;
+}
+.font-\[700\] {
+  font-weight: 700;
 }
 .font-medium {
   font-weight: 500;
@@ -1687,35 +1878,17 @@ video {
 .font-normal {
   font-weight: 400;
 }
-.font-semibold {
-  font-weight: 600;
-}
 .leading-none {
   line-height: 1;
 }
-.tracking-tight {
-  letter-spacing: -0.025em;
-}
-.text-card-foreground {
-  color: hsl(var(--card-foreground));
-}
-.text-danger {
-  color: hsl(var(--color-text-danger));
-}
-.text-muted-foreground {
-  color: hsl(var(--muted-foreground));
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
-.text-secondary {
-  color: hsl(var(--color-text-secondary));
-}
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
 .opacity-0 {
   opacity: 0;
 }
@@ -1725,6 +1898,11 @@ video {
 .opacity-50 {
   opacity: 0.5;
 }
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1749,14 +1927,14 @@ video {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.ring-ring {
-  --tw-ring-color: hsl(var(--ring));
+.ring-focused {
+  --tw-ring-color: hsl(var(--focused));
 }
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }
-.ring-offset-background {
-  --tw-ring-offset-color: hsl(var(--background));
+.ring-offset-white {
+  --tw-ring-offset-color: #fff;
 }
 .filter {
   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);
@@ -1768,6 +1946,11 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1827,6 +2010,23 @@ video {
 .placeholder\:color-text-disabled::placeholder {
     color: hsl(var(--color-text-disabled));
   }
+.after\:color-bg-default-inverse::after {
+    content: var(--tw-content);
+    background-color: hsl(var(--color-bg-default-inverse));
+  }
+.after\:color-icon-disabled::after {
+    content: var(--tw-content);
+    background-color: hsl(var(--color-icon-disabled));
+  }
+.checked\:color-text-inverse:checked {
+    color: hsl(var(--color-text-inverse));
+  }
+.checked\:color-bg-default-inverse:checked {
+    background-color: hsl(var(--color-bg-default-inverse));
+  }
+.hover\:color-text-inverse:hover {
+    color: hsl(var(--color-text-inverse));
+  }
 .hover\:\!color-bg-default-hover:hover {
     background-color: hsl(var(--color-bg-default-hover)) !important;
   }
@@ -1839,6 +2039,12 @@ video {
 .hover\:color-bg-tertiary:hover {
     background-color: hsl(var(--color-bg-tertiary));
   }
+.hover\:color-bg-disabled:hover {
+    background-color: hsl(var(--color-bg-disabled));
+  }
+.hover\:\!color-bg-brand-hover:hover {
+    background-color: hsl(var(--color-bg-brand-hover)) !important;
+  }
 .hover\:color-bg-brand-hover:hover {
     background-color: hsl(var(--color-bg-brand-hover));
   }
@@ -1854,9 +2060,18 @@ video {
 .hover\:\!color-button-floating-hover:hover {
     background-color: hsl(var(--color-button-floating-hover)) !important;
   }
+.hover\:color-border-hover:hover {
+    border-color: hsl(var(--color-border-hover));
+  }
+.focus-visible\:color-border-hover:focus-visible {
+    border-color: hsl(var(--color-border-hover));
+  }
 .disabled\:color-text-disabled:disabled {
     color: hsl(var(--color-text-disabled));
   }
+.disabled\:color-bg-disabled:disabled {
+    background-color: hsl(var(--color-bg-disabled));
+  }
 .disabled\:\!color-button-disabled:disabled {
     background-color: hsl(var(--color-button-disabled)) !important;
     border-color: hsl(var(--color-button-disabled)) !important;
@@ -1867,12 +2082,24 @@ video {
     border-color: hsl(var(--color-button-disabled));
     color: hsl(var(--color-text-disabled));
   }
+.disabled\:color-border-disabled:disabled {
+    border-color: hsl(var(--color-border-disabled));
+  }
 .data-\[state\=active\]\:color-text-default[data-state=active] {
     color: hsl(var(--color-text-default));
   }
+.data-\[state\=open\]\:color-text-default[data-state=open] {
+    color: hsl(var(--color-text-default));
+  }
 .data-\[state\=unchecked\]\:color-bg-default-hover[data-state=unchecked] {
     background-color: hsl(var(--color-bg-default-hover));
   }
+.data-\[state\=open\]\:color-bg-default-selected[data-state=open] {
+    background-color: hsl(var(--color-bg-default-selected));
+  }
+.data-\[state\=selected\]\:color-bg-disabled[data-state=selected] {
+    background-color: hsl(var(--color-bg-disabled));
+  }
 .data-\[state\=checked\]\:color-bg-brand-hover[data-state=checked] {
     background-color: hsl(var(--color-bg-brand-hover));
   }
@@ -1909,31 +2136,45 @@ video {
 .file\:bg-transparent::file-selector-button {
   background-color: transparent;
 }
-.checked\:border-0:checked {
-  border-width: 0px;
+.after\:block::after {
+  content: var(--tw-content);
+  display: block;
 }
-.checked\:bg-black:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+.after\:h-\[10px\]::after {
+  content: var(--tw-content);
+  height: 10px;
 }
-.checked\:text-primary-foreground:checked {
-  color: hsl(var(--primary-foreground));
+.after\:h-\[6px\]::after {
+  content: var(--tw-content);
+  height: 6px;
 }
-.hover\:cursor-pointer:hover {
-  cursor: pointer;
+.after\:w-\[10px\]::after {
+  content: var(--tw-content);
+  width: 10px;
+}
+.after\:w-\[6px\]::after {
+  content: var(--tw-content);
+  width: 6px;
 }
-.hover\:border-border-hover:hover {
-  border-color: hsl(var(--color-border-hover));
+.after\:rounded-\[50\%\]::after {
+  content: var(--tw-content);
+  border-radius: 50%;
 }
-.hover\:bg-muted\/50:hover {
-  background-color: hsl(var(--color-text-disabled) / 0.5);
+.after\:content-\[\'\'\]::after {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+.checked\:border-0:checked {
+  border-width: 0px;
+}
+.hover\:cursor-pointer:hover {
+  cursor: pointer;
 }
 .hover\:bg-transparent:hover {
   background-color: transparent;
 }
-.hover\:text-white:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+.hover\:bg-opacity-50:hover {
+  --tw-bg-opacity: 0.5;
 }
 .hover\:opacity-90:hover {
   opacity: 0.9;
@@ -1957,15 +2198,12 @@ video {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.focus\:ring-ring:focus {
-  --tw-ring-color: hsl(var(--ring));
+.focus\:ring-focused:focus {
+  --tw-ring-color: hsl(var(--focused));
 }
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
-.focus-visible\:border-border-hover:focus-visible {
-  border-color: hsl(var(--color-border-hover));
-}
 .focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1975,14 +2213,14 @@ video {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.focus-visible\:ring-ring:focus-visible {
-  --tw-ring-color: hsl(var(--ring));
+.focus-visible\:ring-focused:focus-visible {
+  --tw-ring-color: hsl(var(--focused));
 }
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
-.focus-visible\:ring-offset-background:focus-visible {
-  --tw-ring-offset-color: hsl(var(--background));
+.focus-visible\:ring-offset-white:focus-visible {
+  --tw-ring-offset-color: #fff;
 }
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
@@ -1990,12 +2228,6 @@ video {
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
-.disabled\:border-disabled:disabled {
-  border-color: hsl(var(--color-bg-disabled));
-}
-.disabled\:bg-disabled:disabled {
-  background-color: hsl(var(--color-bg-disabled));
-}
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
@@ -2022,15 +2254,152 @@ video {
   --tw-translate-x: 0px;
   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));
 }
+@keyframes accordion-up {
+
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+.data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
+  animation: accordion-up 0.2s ease-out;
+}
+@keyframes accordion-down {
+
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+.data-\[state\=open\]\:animate-accordion-down[data-state=open] {
+  animation: accordion-down 0.2s ease-out;
+}
 .data-\[state\=active\]\:border-b-2[data-state=active] {
   border-bottom-width: 2px;
 }
-.data-\[state\=selected\]\:bg-muted[data-state=selected] {
-  background-color: hsl(var(--color-text-disabled));
-}
 .data-\[state\=active\]\:bg-none[data-state=active] {
   background-image: none;
 }
+.data-\[state\=closed\]\:duration-300[data-state=closed] {
+  transition-duration: 300ms;
+}
+.data-\[state\=open\]\:duration-500[data-state=open] {
+  transition-duration: 500ms;
+}
+.data-\[state\=open\]\:animate-in[data-state=open] {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+.data-\[state\=closed\]\:animate-out[data-state=closed] {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+.data-\[state\=closed\]\:fade-out-0[data-state=closed] {
+  --tw-exit-opacity: 0;
+}
+.data-\[state\=open\]\:fade-in-0[data-state=open] {
+  --tw-enter-opacity: 0;
+}
+.data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
+  --tw-exit-scale: .95;
+}
+.data-\[state\=open\]\:zoom-in-95[data-state=open] {
+  --tw-enter-scale: .95;
+}
+.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
+  --tw-enter-translate-y: -0.5rem;
+}
+.data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
+  --tw-enter-translate-x: 0.5rem;
+}
+.data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
+  --tw-enter-translate-x: -0.5rem;
+}
+.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
+  --tw-enter-translate-y: 0.5rem;
+}
+.data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed] {
+  --tw-exit-translate-y: 100%;
+}
+.data-\[state\=closed\]\:slide-out-to-left[data-state=closed] {
+  --tw-exit-translate-x: -100%;
+}
+.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
+  --tw-exit-translate-x: -50%;
+}
+.data-\[state\=closed\]\:slide-out-to-right[data-state=closed] {
+  --tw-exit-translate-x: 100%;
+}
+.data-\[state\=closed\]\:slide-out-to-top[data-state=closed] {
+  --tw-exit-translate-y: -100%;
+}
+.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
+  --tw-exit-translate-y: -48%;
+}
+.data-\[state\=open\]\:slide-in-from-bottom[data-state=open] {
+  --tw-enter-translate-y: 100%;
+}
+.data-\[state\=open\]\:slide-in-from-left[data-state=open] {
+  --tw-enter-translate-x: -100%;
+}
+.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
+  --tw-enter-translate-x: -50%;
+}
+.data-\[state\=open\]\:slide-in-from-right[data-state=open] {
+  --tw-enter-translate-x: 100%;
+}
+.data-\[state\=open\]\:slide-in-from-top[data-state=open] {
+  --tw-enter-translate-y: -100%;
+}
+.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
+  --tw-enter-translate-y: -48%;
+}
+.data-\[state\=closed\]\:duration-300[data-state=closed] {
+  animation-duration: 300ms;
+}
+.data-\[state\=open\]\:duration-500[data-state=open] {
+  animation-duration: 500ms;
+}
+@media (min-width: 640px) {
+
+  .sm\:max-w-sm {
+    max-width: 24rem;
+  }
+
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:justify-end {
+    justify-content: flex-end;
+  }
+
+  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:rounded-lg {
+    border-radius: var(--radius);
+  }
+}
 @media (min-width: 768px) {
 
   .md\:block {
@@ -2045,6 +2414,10 @@ video {
     width: 80%;
   }
 
+  .md\:w-auto {
+    width: auto;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -2123,6 +2496,10 @@ video {
 .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
   border-bottom-width: 0px;
 }
+.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
+  --tw-rotate: 180deg;
+  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));
+}
 .\[\&_tr\:last-child\]\:border-0 tr:last-child {
   border-width: 0px;
 }