ecabs-components 2.0.0-alpha.2 → 2.0.0-alpha.5

package/src/assets/styles/scss/modules/_select.scss

@@ -1,15 +1,18 @@
-@import '../utilities/index';
+@use '../utilities/variables';
+@use '../utilities/mixins';
+@use '../utilities/fonts';
+@use '../utilities/functions';
 
 $border-radius: 0.25rem;
 
 .select {
-  @include fontSize($font-size-base);
+  @include mixins.fontSize(fonts.$font-size-base);
 
   border-radius: $border-radius;
   border: 1px solid var(--color-gray-500);
-  padding: calc-rem(8) calc-rem(16) calc-rem(8) calc-rem(16);
+  padding: functions.calc-rem(8) functions.calc-rem(16) functions.calc-rem(8) functions.calc-rem(16);
   color: var(--color-black);
-  line-height: $base-line-height;
+  line-height: fonts.$base-line-height;
 
   &:focus {
     border-color: var(--color-brand-dark);

package/src/assets/styles/scss/modules/_statuses.scss

@@ -1,31 +1,31 @@
 .pending {
-  background-color: var(--color-gray-300);
-  color: var(--color-gray-400);
+  background-color: var(--color-gray-300) !important;
+  color: var(--color-gray-400) !important;
 }
 
-.reserved {
-  background-color: rgba(var(--color-warn-rgb), .05);
-  color: var(--color-warn);
+.reserved, .pending_data {
+  background-color: rgba(var(--color-warn-rgb), .05) !important;
+  color: var(--color-warn) !important;
 }
 
 .scheduled, .ended {
-  background-color: var(--color-gray-200);
-  color: var(--color-gray-500);
+  background-color: var(--color-gray-200) !important;
+  color: var(--color-gray-500) !important;
 }
 
 .dispatched, .cab_arrived_at_pickup, .trip_started, .dropped_off, .started,
 .cab_arrived_at_intermediary_waypoint, .trip_ongoing, .in_progress {
-  background-color: rgba(var(--color-info-rgb), .05);
-  color: var(--color-info);
+  background-color: rgba(var(--color-info-rgb), .05) !important;
+  color: var(--color-info) !important;
 }
 
-.cab_arrived_at_dropoff, .trip_ended, .completed, .accepted, .cashed_in, .done {
-  background-color: rgba(var(--color-success-rgb), .05);
-  color: var(--color-success);
+.cab_arrived_at_dropoff, .trip_ended, .completed, .accepted, .cashed_in, .done, .active {
+  background-color: rgba(var(--color-success-rgb), .05) !important;
+  color: var(--color-success) !important;
 }
 
 .cancelled, .rejected, .suspended,
-.cancelled, .sick, .no_show, .unable_to_complete, .unavailable, .failed {
-  background-color: rgba(var(--color-error-rgb), .05);
-  color: var(--color-error);
+.cancelled, .sick, .no_show, .unable_to_complete, .unavailable, .failed, .expired {
+  background-color: rgba(var(--color-error-rgb), .05) !important;
+  color: var(--color-error) !important;
 }

package/src/assets/styles/scss/modules/_tab.scss

@@ -1,3 +1,5 @@
+@use "../utilities/fonts";
+
 .tab-group {
   .tab-labels {
     .tab-label {
@@ -5,7 +7,7 @@
       font-size: 1rem;
       border-bottom-width: 2px;
       opacity: 1;
-      font-weight: $font-weight-regular;
+      font-weight: fonts.$font-weight-regular;
 
       &.tab-label-active {
         color: var(--color-brand-dark);

package/src/assets/styles/scss/modules/_table.scss

@@ -1,17 +1,22 @@
+@use "../utilities/mixins";
+@use "../utilities/variables";
+@use "../utilities/functions";
+@use "../utilities/fonts";
+
 .table-ui {
   text-align: left;
 
   /* #Wrapper */
-  @include m(wrapper) {
+  @include mixins.m(wrapper) {
     position: relative;
-    box-shadow: $box-shadow-default;
-    border-radius: $border-radius-base * 2;
+    box-shadow: variables.$box-shadow-default;
+    border-radius: variables.$border-radius-base * 2;
     width: 100%;
-    padding: calc-rem(24);
+    padding: functions.calc-rem(24);
     background-color: var(--color-white);
 
     &.loading:after {
-      @extend %pseudos;
+      @extend %pseudos !optional;
 
       top: 0;
       left: 0;
@@ -38,8 +43,8 @@
   }
 
   /* #Nested */
-  @include e(nested) {
-    @include m(header) {
+  @include mixins.e(nested) {
+    @include mixins.m(header) {
       tr {
         th, td {
           border-bottom: 0;
@@ -54,7 +59,7 @@
   }
 
   thead {
-    @include fontSize($font-size-xs);
+    @include mixins.fontSize(fonts.$font-size-xs);
 
     color: var(--color-gray-500);
   }
@@ -63,20 +68,20 @@
   th {
     border-bottom: 1px solid var(--color-gray-400);
     color: var(--color-gray-500);
-    padding: calc-rem(14) calc-rem(14) calc-rem(14) 0;
-    font-weight: $font-weight-regular;
+    padding: functions.calc-rem(14) functions.calc-rem(14) functions.calc-rem(14) 0;
+    font-weight: fonts.$font-weight-regular;
 
     &:first-of-type {
-      padding-left: calc-rem(14);
+      padding-left: functions.calc-rem(14);
     }
 
     &:last-of-type {
-      padding-right: calc-rem(14);
+      padding-right: functions.calc-rem(14);
     }
   }
 
   td {
-    padding: calc-rem(14);
+    padding: functions.calc-rem(14);
   }
 
   a {
@@ -89,7 +94,7 @@
   }
 
   /* #Bordered */
-  @include e(bordered) {
+  @include mixins.e(bordered) {
     td,
     th {
       border-bottom: 1px solid var(--color-gray-200);
@@ -97,10 +102,10 @@
   }
 
   /* #Paginator */
-  @include e(paginator) {
+  @include mixins.e(paginator) {
     margin-top: 1.2rem;
 
-    @include m(wrapper) {
+    @include mixins.m(wrapper) {
       .table-ui__bordered & {
         border-bottom: 0;
         padding-bottom: 0;
@@ -111,19 +116,19 @@
       }
     }
 
-    @include m(sizer) {
+    @include mixins.m(sizer) {
       float: right;
     }
   }
 
   /* #Header */
-  @include e(header) {
+  @include mixins.e(header) {
     margin-bottom: 1.2rem;
   }
 
   /* #Progress */
-  @include e(progress) {
-    border-radius: $border-radius-base;
+  @include mixins.e(progress) {
+    border-radius: variables.$border-radius-base;
     position: absolute;
     top: 0;
     left: 0.12rem;

package/src/assets/styles/scss/modules/_timepicker.scss

@@ -1,3 +1,7 @@
+@use "../utilities/functions";
+@use "../utilities/variables";
+@use "../utilities/fonts";
+
 ecabs-timepicker {
   .timeInputWrapper {
     z-index: 1;
@@ -7,8 +11,8 @@ ecabs-timepicker {
       width: 100%;
       display: block;
       box-sizing: border-box;
-      padding: calc-rem(8) calc-rem(16);
-      border-radius: $border-radius-base;
+      padding: functions.calc-rem(8) functions.calc-rem(16);
+      border-radius: variables.$border-radius-base;
       border: 1px solid var(--color-gray-500);
       color: var(--color-black);
       outline: none;
@@ -46,9 +50,9 @@ ecabs-timepicker {
     position: absolute;
     width: 100%;
     box-sizing: border-box;
-    box-shadow: $box-shadow-default;
+    box-shadow: variables.$box-shadow-default;
     border-radius: 0 0 4px 4px;
-    height: calc-rem(224px);
+    height: functions.calc-rem(224px);
     overflow: hidden;
 
     .inner-scroll {
@@ -66,8 +70,8 @@ ecabs-timepicker {
           li {
             display: block;
             padding: 8px 12px;
-            font-size: $font-size-sm;
-            line-height: $base-line-height;
+            font-size: fonts.$font-size-sm;
+            line-height: fonts.$base-line-height;
             font-weight: normal;
             color: var(--color-black);
             cursor: pointer;

package/src/assets/styles/scss/modules/_tooltip.scss

@@ -1,10 +1,14 @@
+@use "../utilities/mixins";
+@use "../utilities/fonts";
+@use "../utilities/functions";
+
 .tooltip {
-  @include fontSize($font-size-xs);
+  @include mixins.fontSize(fonts.$font-size-xs);
 
-  padding: calc-rem(3px 8px);
+  padding: functions.calc-rem(3px 8px);
   color: var(--color-white);
 
-  @include m(surface) {
+  @include mixins.m(surface) {
     background-color: var(--color-gray-500);
   }
 }

package/src/assets/styles/scss/modules/drag-drop.scss

@@ -1,5 +1,9 @@
+@use "../utilities/mixins";
+@use "../utilities/variables";
+@use "../utilities/functions";
+
 .drag-drop {
-  @include m(container) {
+  @include mixins.m(container) {
     background-color: var(--color-white);
 
     &.cdk-drop-list-dragging .drag-drop--item:not(.cdk-drag-placeholder) {
@@ -10,22 +14,22 @@
     }
   }
 
-  @include m(item) {
+  @include mixins.m(item) {
     background-color: var(--color-white);
     cursor: move;
 
     &.cdk-drag-preview {
-      border-radius: $border-radius-base;
-      box-shadow: $box-shadow-default;
-      padding-left: calc-rem(32);
-      padding-right: calc-rem(32);
+      border-radius: variables.$border-radius-base;
+      box-shadow: variables.$box-shadow-default;
+      padding-left: functions.calc-rem(32);
+      padding-right: functions.calc-rem(32);
     }
   }
 
-  @include m(placeholder) {
+  @include mixins.m(placeholder) {
     background: var(--color-gray-200);
     border: dashed 2px var(--color-gray-400) !important;
-    min-height: calc-rem(120);
+    min-height: functions.calc-rem(120);
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   }
 }

package/src/assets/styles/scss/modules/index.scss

@@ -1,23 +1,23 @@
-@import 'button';
-@import 'card';
-@import 'chip';
-@import 'datepicker';
-@import 'dialog';
-@import 'divider';
-@import 'drag-drop';
-@import 'form';
-@import 'icon';
-@import 'img';
-@import 'legend';
-@import 'list';
-@import 'map';
-@import 'phone';
-@import 'select';
-@import 'statuses';
-@import 'tab';
-@import 'table';
-@import 'timepicker';
-@import 'toaster';
-@import 'tooltip';
-@import 'percentage';
-@import 'autocomplete';
+@use 'button';
+@use 'card';
+@use 'chip';
+@use 'datepicker';
+@use 'dialog';
+@use 'divider';
+@use 'drag-drop';
+@use 'form';
+@use 'icon';
+@use 'img';
+@use 'legend';
+@use 'list';
+@use 'map';
+@use 'phone';
+@use 'select';
+@use 'statuses';
+@use 'tab';
+@use 'table';
+@use 'timepicker';
+@use 'toaster';
+@use 'tooltip';
+@use 'percentage';
+@use 'autocomplete';

package/src/assets/styles/scss/utilities/_functions.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use 'sass:math';
 // Converting pixel-based font-sizes to scalable REMs.
 $base-rem: 16px;
@@ -15,13 +16,13 @@ $base-rem: 16px;
 }
 
 @function calc-rem($values, $base-value: $base-rem) {
-  $max: length($values);
+  $max: list.length($values);
   @if $max == 1 {
-    @return cast-rem(nth($values, 1), $base-value);
+    @return cast-rem(list.nth($values, 1), $base-value);
   }
   $remValues: ();
   @for $i from 1 through $max {
-    $remValues: append($remValues, cast-rem(nth($values, $i), $base-value));
+    $remValues: list.append($remValues, cast-rem(list.nth($values, $i), $base-value));
   }
   @return $remValues;
 }

package/src/assets/styles/scss/utilities/_mixins.scss

@@ -1,7 +1,11 @@
+@use "sass:map";
+@use "./functions";
+@use "./variables";
+
 // Calculates font size in REMs with a pixel fallback.
 @mixin fontSize($size) {
   font-size: $size;
-  font-size: calc-rem($size);
+  font-size: functions.calc-rem($size);
 }
 
 // ==========================================================================
@@ -25,7 +29,7 @@
 @mixin p-el($el-name, $h: 'null', $w: 'null') {
   @if $el-name == 'before' or $el-name == 'after' {
     &::#{$el-name} {
-      @extend %pseudos;
+      @extend %pseudos !optional;
       width: $w;
       height: $h;
       @content;
@@ -40,23 +44,23 @@
 // ==========================================================================
 @mixin media-q($break) {
   @if $break == 'small' {
-    @media (min-width: map-get($breakpoints, 'xs')) and (max-width: map-get($breakpoints, 'md')) {
+    @media (min-width: map.get(variables.$breakpoints, 'xs')) and (max-width: map.get(variables.$breakpoints, 'md')) {
       @content;
     }
   } @else if $break == 'medium' {
-    @media (min-width: map-get($breakpoints, 'md') + 1) {
+    @media (min-width: map.get(variables.$breakpoints, 'md') + 1) {
       @content;
     }
   } @else if $break == 'large' {
-    @media (min-width: map-get($breakpoints, 'lg')) {
+    @media (min-width: map.get(variables.$breakpoints, 'lg')) {
       @content;
     }
   } @else if $break == 'x-large' {
-    @media (min-width: map-get($breakpoints, 'xl')) {
+    @media (min-width: map.get(variables.$breakpoints, 'xl')) {
       @content;
     }
   } @else if $break == 'xx-large' {
-    @media (min-width: map-get($breakpoints, 'xxl')) {
+    @media (min-width: map.get(variables.$breakpoints, 'xxl')) {
       @content;
     }
   } @else {

package/src/assets/styles/scss/utilities/index.scss

@@ -1,6 +1,6 @@
-@import "variables";
-@import "functions";
-@import "colors";
-@import "fonts";
-@import "helpers";
-@import "mixins";
+@use "variables";
+@use "functions";
+@use "colors";
+@use "fonts";
+@use "helpers";
+@use "mixins";

package/src/assets/styles/styles.scss

@@ -1,8 +1,9 @@
-@import "tailwindcss";
-@import "tailwind/index";
-@import "scss/utilities/index"; 
-@import "material/theme";
-@import "scss/modules/index";
+@use "sass:meta";
+@use "tailwindcss";
+@use "tailwind/index.scss";
+@use "scss/utilities"; 
+@use "material/theme";
+@use "scss/modules";
 
 @theme {
     --color-black: var(--color-black);
@@ -22,5 +23,5 @@
 }
 
 @layer base {
-    @import "scss/base/index";
+    @include meta.load-css("../styles/scss/base/index.scss");
 }

package/src/assets/styles/tailwind/index.scss

@@ -1,2 +1,2 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-light:300;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing)*0)}.-right-3{right:calc(var(--spacing)*-3)}.right-0{right:calc(var(--spacing)*0)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-20{z-index:20}.z-50{z-index:50}.float-right{float:right}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-1{margin-block:calc(var(--spacing)*1)}.my-2{margin-block:calc(var(--spacing)*2)}.-mt-1{margin-top:calc(var(--spacing)*-1)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-10{margin-top:calc(var(--spacing)*10)}.mt-auto{margin-top:auto}.mr-2{margin-right:calc(var(--spacing)*2)}.mr-3{margin-right:calc(var(--spacing)*3)}.mr-4{margin-right:calc(var(--spacing)*4)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-16{margin-bottom:calc(var(--spacing)*16)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-3{margin-left:calc(var(--spacing)*3)}.ml-4{margin-left:calc(var(--spacing)*4)}.ml-10{margin-left:calc(var(--spacing)*10)}.ml-12{margin-left:calc(var(--spacing)*12)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.table{display:table}.h-12{height:calc(var(--spacing)*12)}.h-full{height:100%}.h-max{height:max-content}.\!w-full{width:100%!important}.w-12{width:calc(var(--spacing)*12)}.w-16{width:calc(var(--spacing)*16)}.w-20{width:calc(var(--spacing)*20)}.w-60{width:calc(var(--spacing)*60)}.w-72{width:calc(var(--spacing)*72)}.w-full{width:100%}.flex-1{flex:1}.-translate-x-9{--tw-translate-x:calc(var(--spacing)*-9);translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-items-center{justify-items:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-y-4{row-gap:calc(var(--spacing)*4)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.\!rounded-full{border-radius:3.40282e38px!important}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-current{border-color:currentColor}.bg-gray-200{background-color:var(--color-gray-200)}.bg-white{background-color:var(--color-white)}.\!p-0{padding:calc(var(--spacing)*0)!important}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-10{padding-inline:calc(var(--spacing)*10)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-3{padding-top:calc(var(--spacing)*3)}.pr-1{padding-right:calc(var(--spacing)*1)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.\!text-lg{font-size:var(--text-lg)!important;line-height:var(--tw-leading,var(--text-lg--line-height))!important}.\!text-sm{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\!leading-none{--tw-leading:1!important;line-height:1!important}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.\!text-gray-500{color:var(--color-gray-500)!important}.text-black{color:var(--color-black)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-inherit{color:inherit}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);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,)}.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,)}@media (hover:hover){.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:text-inherit:hover{color:inherit}}@media (min-width:40rem){.sm\:hidden{display:none}}@media (min-width:48rem){.md\:mr-3{margin-right:calc(var(--spacing)*3)}.md\:block{display:block}.md\:flex{display:flex}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-light:300;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.-right-3{right:calc(var(--spacing) * -3)}.right-0{right:calc(var(--spacing) * 0)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-20{z-index:20}.z-50{z-index:50}.float-right{float:right}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-1{margin-block:calc(var(--spacing) * 1)}.my-2{margin-block:calc(var(--spacing) * 2)}.-mt-1{margin-top:calc(var(--spacing) * -1)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-auto{margin-top:auto}.mr-2{margin-right:calc(var(--spacing) * 2)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-16{margin-bottom:calc(var(--spacing) * 16)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-3{margin-left:calc(var(--spacing) * 3)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-10{margin-left:calc(var(--spacing) * 10)}.ml-12{margin-left:calc(var(--spacing) * 12)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.table{display:table}.h-12{height:calc(var(--spacing) * 12)}.h-full{height:100%}.h-max{height:max-content}.\!w-full{width:100%!important}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-60{width:calc(var(--spacing) * 60)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.flex-1{flex:1}.grow{flex-grow:1}.-translate-x-9{--tw-translate-x:calc(var(--spacing) * -9);translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-items-center{justify-items:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-y-4{row-gap:calc(var(--spacing) * 4)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.\!rounded-full{border-radius:3.40282e38px!important}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-current{border-color:currentColor}.bg-gray-200{background-color:var(--color-gray-200)}.bg-white{background-color:var(--color-white)}.\!p-0{padding:calc(var(--spacing) * 0)!important}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-10{padding-inline:calc(var(--spacing) * 10)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pr-1{padding-right:calc(var(--spacing) * 1)}.pb-1{padding-bottom:calc(var(--spacing) * 1)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.\!text-lg{font-size:var(--text-lg)!important;line-height:var(--tw-leading,var(--text-lg--line-height))!important}.\!text-sm{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\!leading-none{--tw-leading:1!important;line-height:1!important}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.\!text-gray-500{color:var(--color-gray-500)!important}.text-black{color:var(--color-black)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-inherit{color:inherit}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);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,)}.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,)}@media (hover:hover){.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:text-inherit:hover{color:inherit}}@media (min-width:40rem){.sm\:hidden{display:none}}@media (min-width:48rem){.md\:mr-3{margin-right:calc(var(--spacing) * 3)}.md\:block{display:block}.md\:flex{display:flex}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}