@mdigital_ui/ui 0.3.8 → 0.3.9

package/styles/global.css

@@ -4,6 +4,7 @@
 @layer theme {
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif;
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-mono: ui-monospace, "SF Mono", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
@@ -28,7 +29,6 @@
     --color-gray-50: oklch(98% 0 0);
     --color-gray-100: oklch(96% 0 0);
     --color-gray-200: oklch(92% 0 0);
-    --color-gray-300: oklch(87% 0 0);
     --color-gray-400: oklch(71% 0 0);
     --color-gray-500: oklch(55% 0 0);
     --color-gray-600: oklch(45% 0 0);
@@ -77,10 +77,10 @@
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.625rem;
-    --radius-2xl: 0.75rem;
-    --radius-3xl: 1rem;
     --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -94,6 +94,7 @@
     --default-mono-font-family: var(--font-mono);
     --color-primary: oklch(60.29% 0.15 239.2065);
     --color-primary-hover: oklch(50.29% 0.2 239.2065);
+    --color-primary-active: oklch(45.29% 0.2 239.2065);
     --color-primary-foreground: oklch(100% 0 0);
     --color-secondary: oklch(50% 0.05 240);
     --color-secondary-foreground: oklch(100% 0 0);
@@ -101,7 +102,8 @@
     --color-accent-foreground: oklch(15% 0 0);
     --color-success: oklch(70% 0.2 145);
     --color-success-foreground: oklch(100% 0 0);
-    --color-error: oklch(65% 0.2 25);
+    --color-error: oklch(63% 0.22 25);
+    --color-error-active: oklch(50% 0.26 25);
     --color-error-foreground: oklch(100% 0 0);
     --color-warning: oklch(75% 0.15 85);
     --color-warning-foreground: oklch(15% 0 0);
@@ -113,21 +115,55 @@
     --color-card: oklch(100% 0 0);
     --color-border: oklch(93% 0 0);
     --color-border-primary: oklch(85% 0 0);
+    --color-border-hover: oklch(80% 0 0);
+    --color-border-focus: var(--color-primary);
     --color-text-primary: oklch(15% 0 0);
     --color-text-secondary: oklch(45% 0 0);
     --color-text-muted: oklch(60% 0 0);
-    --button-height-xs: 1.75rem;
-    --button-height-sm: 2rem;
-    --button-height-md: 2.25rem;
-    --button-height-lg: 2.75rem;
+    --color-text-disabled: oklch(71% 0 0);
+    --color-focus: var(--color-primary);
+    --color-focus-ring: oklch(60.29% 0.15 239.2065 / 30%);
+    --color-disabled: oklch(87% 0 0);
+    --color-disabled-text: oklch(55% 0 0);
+    --color-overlay: oklch(0% 0 0 / 50%);
+    --size-xs: 1.75rem;
+    --size-sm: 2rem;
+    --size-md: 2.25rem;
+    --size-lg: 2.75rem;
+    --space-0: 0px;
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+    --space-16: 4rem;
+    --space-20: 5rem;
+    --space-24: 6rem;
+    --duration-instant: 50ms;
+    --duration-fast: 150ms;
+    --duration-normal: 200ms;
+    --duration-slow: 300ms;
+    --duration-slower: 500ms;
+    --ease-linear: linear;
+    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    --ripple-scale: 2.5;
+    --ripple-opacity: 0.35;
+    --button-height-xs: var(--size-xs);
+    --button-height-sm: var(--size-sm);
+    --button-height-md: var(--size-md);
+    --button-height-lg: var(--size-lg);
     --button-padding-x-xs: 0.5rem;
     --button-padding-x-sm: 0.75rem;
     --button-padding-x-md: 0.875rem;
     --button-padding-x-lg: 1.25rem;
-    --input-height-xs: 1.75rem;
-    --input-height-sm: 2rem;
-    --input-height-md: 2.25rem;
-    --input-height-lg: 2.75rem;
+    --input-height-xs: var(--size-xs);
+    --input-height-sm: var(--size-sm);
+    --input-height-md: var(--size-md);
+    --input-height-lg: var(--size-lg);
     --input-padding-x-xs: 0.5rem;
     --input-padding-x-sm: 0.75rem;
     --input-padding-x-md: 0.875rem;
@@ -141,14 +177,26 @@
     --textarea-padding-sm: 0.625rem;
     --textarea-padding-md: 0.6875rem;
     --textarea-padding-lg: 0.875rem;
-    --select-height-xs: 1.75rem;
-    --select-height-sm: 2rem;
-    --select-height-md: 2.25rem;
-    --select-height-lg: 2.75rem;
+    --select-height-xs: var(--size-xs);
+    --select-height-sm: var(--size-sm);
+    --select-height-md: var(--size-md);
+    --select-height-lg: var(--size-lg);
     --select-padding-x-xs: 0.5rem;
     --select-padding-x-sm: 0.75rem;
     --select-padding-x-md: 0.875rem;
     --select-padding-x-lg: 1.125rem;
+    --toggle-height-xs: var(--size-xs);
+    --toggle-height-sm: var(--size-sm);
+    --toggle-height-md: var(--size-md);
+    --toggle-height-lg: var(--size-lg);
+    --toggle-padding-x-xs: 0.5rem;
+    --toggle-padding-x-sm: 0.75rem;
+    --toggle-padding-x-md: 0.875rem;
+    --toggle-padding-x-lg: 1.125rem;
+    --otp-size-xs: 2rem;
+    --otp-size-sm: 2.25rem;
+    --otp-size-md: 2.75rem;
+    --otp-size-lg: 3.25rem;
     --checkbox-size-xs: 0.875rem;
     --checkbox-size-sm: 1rem;
     --checkbox-size-md: 1.125rem;
@@ -237,6 +285,7 @@
     --radius-full: 9999px;
     --leading-none: 1;
     --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
     --z-dropdown: 1000;
     --z-popover: 1050;
   }
@@ -437,9 +486,6 @@
   .-top-1 {
     top: calc(var(--spacing-1) * -1);
   }
-  .-top-2 {
-    top: calc(var(--spacing-2) * -1);
-  }
   .-top-3 {
     top: calc(var(--spacing-3) * -1);
   }
@@ -485,9 +531,6 @@
   .-right-1 {
     right: calc(var(--spacing-1) * -1);
   }
-  .-right-2 {
-    right: calc(var(--spacing-2) * -1);
-  }
   .right-0 {
     right: var(--spacing-0);
   }
@@ -506,18 +549,12 @@
   .right-5 {
     right: var(--spacing-5);
   }
-  .-bottom-2 {
-    bottom: calc(var(--spacing-2) * -1);
-  }
   .bottom-0 {
     bottom: var(--spacing-0);
   }
   .bottom-4 {
     bottom: var(--spacing-4);
   }
-  .-left-2 {
-    left: calc(var(--spacing-2) * -1);
-  }
   .left-0 {
     left: var(--spacing-0);
   }
@@ -557,6 +594,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[1\] {
+    z-index: 1;
+  }
   .z-\[var\(--z-popover\)\] {
     z-index: var(--z-popover);
   }
@@ -569,6 +609,12 @@
   .order-last {
     order: 9999;
   }
+  .col-start-1 {
+    grid-column-start: 1;
+  }
+  .row-start-1 {
+    grid-row-start: 1;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -719,6 +765,9 @@
   .inline-flex {
     display: inline-flex;
   }
+  .inline-grid {
+    display: inline-grid;
+  }
   .table {
     display: table;
   }
@@ -823,6 +872,18 @@
   .h-\(--input-height-xs\) {
     height: var(--input-height-xs);
   }
+  .h-\(--otp-size-lg\) {
+    height: var(--otp-size-lg);
+  }
+  .h-\(--otp-size-md\) {
+    height: var(--otp-size-md);
+  }
+  .h-\(--otp-size-sm\) {
+    height: var(--otp-size-sm);
+  }
+  .h-\(--otp-size-xs\) {
+    height: var(--otp-size-xs);
+  }
   .h-\(--select-height-lg\) {
     height: var(--select-height-lg);
   }
@@ -859,6 +920,18 @@
   .h-\(--switch-thumb-xs\) {
     height: var(--switch-thumb-xs);
   }
+  .h-\(--toggle-height-lg\) {
+    height: var(--toggle-height-lg);
+  }
+  .h-\(--toggle-height-md\) {
+    height: var(--toggle-height-md);
+  }
+  .h-\(--toggle-height-sm\) {
+    height: var(--toggle-height-sm);
+  }
+  .h-\(--toggle-height-xs\) {
+    height: var(--toggle-height-xs);
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -976,6 +1049,9 @@
   .h-\[240px\] {
     height: 240px;
   }
+  .h-\[300px\] {
+    height: 300px;
+  }
   .h-\[500px\] {
     height: 500px;
   }
@@ -1135,6 +1211,21 @@
   .w-\(--divider-right-before-width\) {
     width: var(--divider-right-before-width);
   }
+  .w-\(--otp-size-lg\) {
+    width: var(--otp-size-lg);
+  }
+  .w-\(--otp-size-md\) {
+    width: var(--otp-size-md);
+  }
+  .w-\(--otp-size-sm\) {
+    width: var(--otp-size-sm);
+  }
+  .w-\(--otp-size-xs\) {
+    width: var(--otp-size-xs);
+  }
+  .w-\(--radix-popover-trigger-width\) {
+    width: var(--radix-popover-trigger-width);
+  }
   .w-\(--switch-thumb-lg\) {
     width: var(--switch-thumb-lg);
   }
@@ -1225,9 +1316,6 @@
   .w-12 {
     width: var(--spacing-12);
   }
-  .w-14 {
-    width: calc(var(--spacing) * 14);
-  }
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
@@ -1396,9 +1484,6 @@
   .min-w-12 {
     min-width: var(--spacing-12);
   }
-  .min-w-72 {
-    min-width: calc(var(--spacing) * 72);
-  }
   .min-w-\[60px\] {
     min-width: 60px;
   }
@@ -1450,10 +1535,18 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-x-full {
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-px {
     --tw-translate-x: -1px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-0 {
+    --tw-translate-x: var(--spacing-0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-1\/2 {
     --tw-translate-x: calc(1/2 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1503,6 +1596,12 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-\[button-ripple_600ms_ease-out_forwards\] {
+    animation: button-ripple 600ms ease-out forwards;
+  }
+  .animate-\[ripple_600ms_ease-out_forwards\] {
+    animation: ripple 600ms ease-out forwards;
+  }
   .animate-in {
     animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
   }
@@ -1590,9 +1689,6 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
-  .items-baseline {
-    align-items: baseline;
-  }
   .items-center {
     align-items: center;
   }
@@ -1683,71 +1779,71 @@
   .space-y-0 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing-0) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing-0) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--space-0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--space-0) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing-1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing-1) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--space-1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--space-1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing-2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--space-2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--space-2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-3 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing-3) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing-3) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--space-3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--space-3) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--space-4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--space-4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-6 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing-6) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing-6) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--space-6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--space-6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-8 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing-8) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing-8) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--space-8) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--space-8) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-10 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing-10) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing-10) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--space-10) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--space-10) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-12 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing-12) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing-12) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--space-12) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--space-12) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .-space-x-1 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing-1) * -1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing-1) * -1) * calc(1 - var(--tw-space-x-reverse)));
+      margin-inline-start: calc(calc(var(--space-1) * -1) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--space-1) * -1) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
   .-space-x-1\.5 {
@@ -1760,8 +1856,8 @@
   .-space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing-2) * -1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing-2) * -1) * calc(1 - var(--tw-space-x-reverse)));
+      margin-inline-start: calc(calc(var(--space-2) * -1) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--space-2) * -1) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
   .-space-x-2\.5 {
@@ -1820,7 +1916,7 @@
   }
   .divide-error\/20 {
     :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(65% 0.2 25) 20%, transparent);
+      border-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-error) 20%, transparent);
       }
@@ -1866,6 +1962,9 @@
       }
     }
   }
+  .self-center {
+    align-self: center;
+  }
   .self-end {
     align-self: flex-end;
   }
@@ -1898,12 +1997,6 @@
   .rounded {
     border-radius: 0.25rem;
   }
-  .rounded-2xl {
-    border-radius: var(--radius-2xl);
-  }
-  .rounded-3xl {
-    border-radius: var(--radius-3xl);
-  }
   .rounded-full {
     border-radius: var(--radius-full);
   }
@@ -2087,35 +2180,29 @@
     border-color: var(--color-error);
   }
   .border-error\/20 {
-    border-color: color-mix(in srgb, oklch(65% 0.2 25) 20%, transparent);
+    border-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-error) 20%, transparent);
     }
   }
   .border-error\/30 {
-    border-color: color-mix(in srgb, oklch(65% 0.2 25) 30%, transparent);
+    border-color: color-mix(in srgb, oklch(63% 0.22 25) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-error) 30%, transparent);
     }
   }
   .border-error\/50 {
-    border-color: color-mix(in srgb, oklch(65% 0.2 25) 50%, transparent);
+    border-color: color-mix(in srgb, oklch(63% 0.22 25) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-error) 50%, transparent);
     }
   }
   .border-error\/60 {
-    border-color: color-mix(in srgb, oklch(65% 0.2 25) 60%, transparent);
+    border-color: color-mix(in srgb, oklch(63% 0.22 25) 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-error) 60%, transparent);
     }
   }
-  .border-gray-200 {
-    border-color: var(--color-gray-200);
-  }
-  .border-gray-300 {
-    border-color: var(--color-gray-300);
-  }
   .border-green-500 {
     border-color: var(--color-green-500);
   }
@@ -2428,41 +2515,44 @@
   .bg-card {
     background-color: var(--color-card);
   }
+  .bg-current {
+    background-color: currentcolor;
+  }
   .bg-error {
     background-color: var(--color-error);
   }
   .bg-error\/5 {
-    background-color: color-mix(in srgb, oklch(65% 0.2 25) 5%, transparent);
+    background-color: color-mix(in srgb, oklch(63% 0.22 25) 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-error) 5%, transparent);
     }
   }
   .bg-error\/10 {
-    background-color: color-mix(in srgb, oklch(65% 0.2 25) 10%, transparent);
+    background-color: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
     }
   }
   .bg-error\/20 {
-    background-color: color-mix(in srgb, oklch(65% 0.2 25) 20%, transparent);
+    background-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-error) 20%, transparent);
     }
   }
   .bg-error\/30 {
-    background-color: color-mix(in srgb, oklch(65% 0.2 25) 30%, transparent);
+    background-color: color-mix(in srgb, oklch(63% 0.22 25) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-error) 30%, transparent);
     }
   }
   .bg-error\/50 {
-    background-color: color-mix(in srgb, oklch(65% 0.2 25) 50%, transparent);
+    background-color: color-mix(in srgb, oklch(63% 0.22 25) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-error) 50%, transparent);
     }
   }
   .bg-error\/60 {
-    background-color: color-mix(in srgb, oklch(65% 0.2 25) 60%, transparent);
+    background-color: color-mix(in srgb, oklch(63% 0.22 25) 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-error) 60%, transparent);
     }
@@ -2731,9 +2821,6 @@
       background-color: color-mix(in oklab, var(--color-warning) 60%, transparent);
     }
   }
-  .bg-white {
-    background-color: var(--color-white);
-  }
   .bg-white\/80 {
     background-color: color-mix(in srgb, oklch(100% 0 0) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2879,19 +2966,19 @@
     stroke: var(--color-error);
   }
   .stroke-error\/10 {
-    stroke: color-mix(in srgb, oklch(65% 0.2 25) 10%, transparent);
+    stroke: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       stroke: color-mix(in oklab, var(--color-error) 10%, transparent);
     }
   }
   .stroke-error\/20 {
-    stroke: color-mix(in srgb, oklch(65% 0.2 25) 20%, transparent);
+    stroke: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       stroke: color-mix(in oklab, var(--color-error) 20%, transparent);
     }
   }
   .stroke-error\/60 {
-    stroke: color-mix(in srgb, oklch(65% 0.2 25) 60%, transparent);
+    stroke: color-mix(in srgb, oklch(63% 0.22 25) 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       stroke: color-mix(in oklab, var(--color-error) 60%, transparent);
     }
@@ -3028,6 +3115,12 @@
   .object-none {
     object-fit: none;
   }
+  .object-scale-down {
+    object-fit: scale-down;
+  }
+  .object-top {
+    object-position: top;
+  }
   .p-\(--card-content-padding\) {
     padding: var(--card-content-padding);
   }
@@ -3163,6 +3256,18 @@
   .px-\(--tabs-padding-x-xs\) {
     padding-inline: var(--tabs-padding-x-xs);
   }
+  .px-\(--toggle-padding-x-lg\) {
+    padding-inline: var(--toggle-padding-x-lg);
+  }
+  .px-\(--toggle-padding-x-md\) {
+    padding-inline: var(--toggle-padding-x-md);
+  }
+  .px-\(--toggle-padding-x-sm\) {
+    padding-inline: var(--toggle-padding-x-sm);
+  }
+  .px-\(--toggle-padding-x-xs\) {
+    padding-inline: var(--toggle-padding-x-xs);
+  }
   .px-0 {
     padding-inline: var(--spacing-0);
   }
@@ -3319,18 +3424,6 @@
   .pr-16 {
     padding-right: calc(var(--spacing) * 16);
   }
-  .pr-\[calc\(var\(--select-padding-x-lg\)\*2\)\] {
-    padding-right: calc(var(--select-padding-x-lg) * 2);
-  }
-  .pr-\[calc\(var\(--select-padding-x-md\)\*2\)\] {
-    padding-right: calc(var(--select-padding-x-md) * 2);
-  }
-  .pr-\[calc\(var\(--select-padding-x-sm\)\*2\)\] {
-    padding-right: calc(var(--select-padding-x-sm) * 2);
-  }
-  .pr-\[calc\(var\(--select-padding-x-xs\)\*2\)\] {
-    padding-right: calc(var(--select-padding-x-xs) * 2);
-  }
   .pb-\(--accordion-padding-y-lg\) {
     padding-bottom: var(--accordion-padding-y-lg);
   }
@@ -3361,18 +3454,6 @@
   .pb-8 {
     padding-bottom: var(--spacing-8);
   }
-  .pl-\(--select-padding-x-lg\) {
-    padding-left: var(--select-padding-x-lg);
-  }
-  .pl-\(--select-padding-x-md\) {
-    padding-left: var(--select-padding-x-md);
-  }
-  .pl-\(--select-padding-x-sm\) {
-    padding-left: var(--select-padding-x-sm);
-  }
-  .pl-\(--select-padding-x-xs\) {
-    padding-left: var(--select-padding-x-xs);
-  }
   .pl-2 {
     padding-left: var(--spacing-2);
   }
@@ -3456,9 +3537,6 @@
   .text-\(length\:--badge-font-size-xs\) {
     font-size: var(--badge-font-size-xs);
   }
-  .text-\[6px\] {
-    font-size: 6px;
-  }
   .text-\[7px\] {
     font-size: 7px;
   }
@@ -3725,6 +3803,9 @@
   .opacity-20 {
     opacity: 20%;
   }
+  .opacity-25 {
+    opacity: 25%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -3785,7 +3866,7 @@
     --tw-ring-color: var(--color-background);
   }
   .ring-error\/20 {
-    --tw-ring-color: color-mix(in srgb, oklch(65% 0.2 25) 20%, transparent);
+    --tw-ring-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-ring-color: color-mix(in oklab, var(--color-error) 20%, transparent);
     }
@@ -3887,13 +3968,18 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[left\] {
+    transition-property: left;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[opacity\,colors\] {
     transition-property: opacity,colors;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[opacity\,transform\] {
-    transition-property: opacity,transform;
+  .transition-\[opacity\] {
+    transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -3907,6 +3993,16 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[transform\,width\] {
+    transition-property: transform,width;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[var\(--transition-normal\)\] {
+    transition-property: var(--transition-normal);
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[width\,height\] {
     transition-property: width,height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3953,6 +4049,10 @@
     --tw-duration: 500ms;
     transition-duration: 500ms;
   }
+  .ease-\[cubic-bezier\(0\.34\,1\.56\,0\.64\,1\)\] {
+    --tw-ease: cubic-bezier(0.34,1.56,0.64,1);
+    transition-timing-function: cubic-bezier(0.34,1.56,0.64,1);
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -4219,11 +4319,6 @@
       opacity: 50%;
     }
   }
-  .peer-disabled\:opacity-70 {
-    &:is(:where(.peer):disabled ~ *) {
-      opacity: 70%;
-    }
-  }
   .peer-\[\:not\(\:placeholder-shown\)\]\:top-1 {
     &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
       top: var(--spacing-1);
@@ -4480,16 +4575,6 @@
       }
     }
   }
-  .hover\:border-border\/30 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: color-mix(in srgb, oklch(93% 0 0) 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-border) 30%, transparent);
-        }
-      }
-    }
-  }
   .hover\:border-error {
     &:hover {
       @media (hover: hover) {
@@ -4610,6 +4695,16 @@
       }
     }
   }
+  .hover\:bg-background\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(100% 0 0) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-background) 50%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-border\/80 {
     &:hover {
       @media (hover: hover) {
@@ -4623,7 +4718,7 @@
   .hover\:bg-error\/5 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(65% 0.2 25) 5%, transparent);
+        background-color: color-mix(in srgb, oklch(63% 0.22 25) 5%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
           background-color: color-mix(in oklab, var(--color-error) 5%, transparent);
         }
@@ -4633,7 +4728,7 @@
   .hover\:bg-error\/10 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(65% 0.2 25) 10%, transparent);
+        background-color: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
           background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
         }
@@ -4643,7 +4738,7 @@
   .hover\:bg-error\/20 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(65% 0.2 25) 20%, transparent);
+        background-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
           background-color: color-mix(in oklab, var(--color-error) 20%, transparent);
         }
@@ -4653,7 +4748,7 @@
   .hover\:bg-error\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(65% 0.2 25) 90%, transparent);
+        background-color: color-mix(in srgb, oklch(63% 0.22 25) 90%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
           background-color: color-mix(in oklab, var(--color-error) 90%, transparent);
         }
@@ -4667,13 +4762,6 @@
       }
     }
   }
-  .hover\:bg-gray-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-100);
-      }
-    }
-  }
   .hover\:bg-gray-200 {
     &:hover {
       @media (hover: hover) {
@@ -4956,7 +5044,7 @@
   .hover\:text-error\/80 {
     &:hover {
       @media (hover: hover) {
-        color: color-mix(in srgb, oklch(65% 0.2 25) 80%, transparent);
+        color: color-mix(in srgb, oklch(63% 0.22 25) 80%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
           color: color-mix(in oklab, var(--color-error) 80%, transparent);
         }
@@ -5170,17 +5258,12 @@
   }
   .focus\:bg-error\/10 {
     &:focus {
-      background-color: color-mix(in srgb, oklch(65% 0.2 25) 10%, transparent);
+      background-color: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
       }
     }
   }
-  .focus\:bg-gray-100 {
-    &:focus {
-      background-color: var(--color-gray-100);
-    }
-  }
   .focus\:bg-info\/10 {
     &:focus {
       background-color: color-mix(in srgb, oklch(60% 0.19 255) 10%, transparent);
@@ -5280,7 +5363,7 @@
   }
   .focus\:ring-error\/20 {
     &:focus {
-      --tw-ring-color: color-mix(in srgb, oklch(65% 0.2 25) 20%, transparent);
+      --tw-ring-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --tw-ring-color: color-mix(in oklab, var(--color-error) 20%, transparent);
       }
@@ -5453,31 +5536,6 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
-  .active\:scale-\[0\.9\] {
-    &:active {
-      scale: 0.9;
-    }
-  }
-  .active\:scale-\[0\.85\] {
-    &:active {
-      scale: 0.85;
-    }
-  }
-  .active\:scale-\[0\.95\] {
-    &:active {
-      scale: 0.95;
-    }
-  }
-  .active\:scale-\[0\.97\] {
-    &:active {
-      scale: 0.97;
-    }
-  }
-  .active\:scale-\[0\.98\] {
-    &:active {
-      scale: 0.98;
-    }
-  }
   .active\:shadow-md {
     &:active {
       --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -5541,6 +5599,20 @@
       opacity: 50%;
     }
   }
+  .data-\[pressed\=true\]\:ring-2 {
+    &[data-pressed="true"] {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .data-\[pressed\=true\]\:ring-current\/30 {
+    &[data-pressed="true"] {
+      --tw-ring-color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, currentcolor 30%, transparent);
+      }
+    }
+  }
   .data-\[selected\=true\]\:bg-accent\/10 {
     &[data-selected="true"] {
       background-color: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent);
@@ -5551,7 +5623,7 @@
   }
   .data-\[selected\=true\]\:bg-error\/10 {
     &[data-selected="true"] {
-      background-color: color-mix(in srgb, oklch(65% 0.2 25) 10%, transparent);
+      background-color: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
       }
@@ -5717,9 +5789,9 @@
       animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
     }
   }
-  .data-\[state\=open\]\:bg-gray-100 {
+  .data-\[state\=open\]\:bg-surface {
     &[data-state="open"] {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-surface);
     }
   }
   .data-\[state\=open\]\:fade-in-0 {
@@ -5739,6 +5811,11 @@
       --tw-enter-translate-y: calc(2*var(--spacing)*-1);
     }
   }
+  .motion-reduce\:transition-none {
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: none;
+    }
+  }
   .sm\:max-w-\(--modal-max-width-lg\) {
     @media (width >= 40rem) {
       max-width: var(--modal-max-width-lg);
@@ -5931,7 +6008,7 @@
   }
   .\[\&_\.react-datepicker__day--in-range\]\:\!bg-error\/10 {
     & .react-datepicker  day--in-range {
-      background-color: color-mix(in srgb, oklch(65% 0.2 25) 10%, transparent) !important;
+      background-color: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent) !important;
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-error) 10%, transparent) !important;
       }
@@ -5995,7 +6072,7 @@
   }
   .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-error\/30 {
     & .react-datepicker  day--in-selecting-range {
-      background-color: color-mix(in srgb, oklch(65% 0.2 25) 30%, transparent) !important;
+      background-color: color-mix(in srgb, oklch(63% 0.22 25) 30%, transparent) !important;
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-error) 30%, transparent) !important;
       }
@@ -6059,7 +6136,7 @@
   }
   .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-error\/50 {
     & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in srgb, oklch(65% 0.2 25) 50%, transparent) !important;
+      background-color: color-mix(in srgb, oklch(63% 0.22 25) 50%, transparent) !important;
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-error) 50%, transparent) !important;
       }
@@ -6775,43 +6852,63 @@
 }
 :root.dark,
 .dark {
-  --color-primary: oklch(70% 0.19 255);
-  --color-primary-hover: oklch(75% 0.21 255);
-  --color-primary-active: oklch(78% 0.23 255);
-  --color-secondary: oklch(68% 0.12 260);
-  --color-secondary-hover: oklch(72% 0.14 260);
-  --color-secondary-active: oklch(76% 0.16 260);
-  --color-accent: oklch(75% 0.18 140);
-  --color-accent-hover: oklch(78% 0.2 140);
-  --color-accent-active: oklch(82% 0.22 140);
-  --color-success: oklch(72% 0.18 150);
-  --color-success-hover: oklch(76% 0.2 150);
-  --color-success-active: oklch(80% 0.22 150);
-  --color-error: oklch(70% 0.22 25);
-  --color-error-hover: oklch(74% 0.24 25);
-  --color-error-active: oklch(78% 0.26 25);
-  --color-warning: oklch(78% 0.16 75);
-  --color-warning-hover: oklch(82% 0.18 75);
-  --color-warning-active: oklch(85% 0.2 75);
-  --color-info: oklch(72% 0.16 230);
-  --color-info-hover: oklch(76% 0.18 230);
-  --color-info-active: oklch(80% 0.2 230);
-  --color-background: oklch(17% 0.01 240);
-  --color-background-secondary: oklch(20% 0.01 240);
-  --color-surface: oklch(23% 0.01 240);
-  --color-card: oklch(20% 0.01 240);
-  --color-border: oklch(32% 0.01 240);
-  --color-border-primary: oklch(42% 0.02 240);
-  --color-text-primary: oklch(96% 0 0);
-  --color-text-secondary: oklch(75% 0 0);
-  --color-text-muted: oklch(60% 0 0);
-  --color-input-border: oklch(32% 0.01 240);
-  --color-input-border-focus: oklch(70% 0.19 255);
-  --color-input-border-error: oklch(70% 0.22 25);
-  --color-input-bg: oklch(20% 0.01 240);
-  --color-input-text: oklch(96% 0 0);
-  --color-input-placeholder: oklch(60% 0 0);
-  --overlay-stripe: oklch(0% 0 0 / 0.2);
+  --color-primary: oklch(62% 0.17 239);
+  --color-primary-hover: oklch(67% 0.19 239);
+  --color-primary-active: oklch(72% 0.21 239);
+  --color-primary-foreground: oklch(100% 0 0);
+  --color-secondary: oklch(60% 0.08 240);
+  --color-secondary-hover: oklch(65% 0.09 240);
+  --color-secondary-active: oklch(70% 0.10 240);
+  --color-secondary-foreground: oklch(100% 0 0);
+  --color-accent: oklch(80% 0.17 67);
+  --color-accent-hover: oklch(84% 0.15 67);
+  --color-accent-active: oklch(88% 0.13 67);
+  --color-accent-foreground: oklch(15% 0 0);
+  --color-success: oklch(62% 0.18 145);
+  --color-success-hover: oklch(67% 0.20 145);
+  --color-success-active: oklch(72% 0.22 145);
+  --color-success-foreground: oklch(100% 0 0);
+  --color-error: oklch(62% 0.20 25);
+  --color-error-hover: oklch(67% 0.22 25);
+  --color-error-active: oklch(72% 0.24 25);
+  --color-error-foreground: oklch(100% 0 0);
+  --color-warning: oklch(80% 0.15 85);
+  --color-warning-hover: oklch(84% 0.17 85);
+  --color-warning-active: oklch(88% 0.19 85);
+  --color-warning-foreground: oklch(15% 0 0);
+  --color-info: oklch(62% 0.17 255);
+  --color-info-hover: oklch(67% 0.19 255);
+  --color-info-active: oklch(72% 0.21 255);
+  --color-info-foreground: oklch(100% 0 0);
+  --color-background: oklch(12% 0.01 260);
+  --color-background-secondary: oklch(16% 0.01 260);
+  --color-surface: oklch(20% 0.015 260);
+  --color-card: oklch(16% 0.01 260);
+  --color-border: oklch(28% 0.015 260);
+  --color-border-primary: oklch(38% 0.02 260);
+  --color-border-hover: oklch(45% 0.02 260);
+  --color-border-focus: oklch(62% 0.17 239);
+  --color-text-primary: oklch(95% 0 0);
+  --color-text-secondary: oklch(72% 0 0);
+  --color-text-muted: oklch(55% 0 0);
+  --color-text-disabled: oklch(40% 0 0);
+  --color-focus: oklch(62% 0.17 239);
+  --color-focus-ring: oklch(62% 0.17 239 / 30%);
+  --color-disabled: oklch(28% 0.01 260);
+  --color-disabled-text: oklch(50% 0 0);
+  --color-overlay: oklch(0% 0 0 / 65%);
+  --color-input-border: oklch(28% 0.015 260);
+  --color-input-border-focus: oklch(62% 0.17 239);
+  --color-input-border-error: oklch(62% 0.20 25);
+  --color-input-bg: oklch(14% 0.01 260);
+  --color-input-text: oklch(95% 0 0);
+  --color-input-placeholder: oklch(50% 0 0);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
+  --shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.5);
+  --shadow-lg: 0 12px 20px -3px rgb(0 0 0 / 0.6);
+  --shadow-xl: 0 20px 30px -5px rgb(0 0 0 / 0.6);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.7);
+  --overlay-stripe: oklch(100% 0 0 / 0.08);
 }
 html,
 body {
@@ -7098,6 +7195,16 @@ body {
 .dark .react-datepicker__month-year-option:hover {
   background-color: var(--color-background-secondary) !important;
 }
+@keyframes ripple {
+  from {
+    transform: scale(0);
+    opacity: var(--ripple-opacity, 0.35);
+  }
+  to {
+    transform: scale(var(--ripple-scale, 2.5));
+    opacity: 0;
+  }
+}
 @keyframes shimmer {
   0% {
     background-position: 0 0;