@dayflow/core 3.3.5 → 3.4.0

package/dist/styles.css

@@ -691,9 +691,6 @@
   width: -moz-max-content;
   width: max-content;
 }
-.max-w-100 {
-  max-width: calc(var(--spacing) * 100);
-}
 .max-w-md {
   max-width: var(--container-md);
 }
@@ -1108,15 +1105,6 @@
 .border-gray-300 {
   border-color: var(--color-gray-300);
 }
-.border-primary {
-  border-color: var(--df-color-primary);
-}
-.border-primary\/50 {
-  border-color: var(--df-color-primary);
-  @supports (color: color-mix(in lab, red, red)) {
-    border-color: color-mix(in oklab, var(--df-color-primary) 50%, transparent);
-  }
-}
 .border-slate-100 {
   border-color: var(--color-slate-100);
 }
@@ -1126,7 +1114,7 @@
 .border-transparent {
   border-color: transparent;
 }
-.border-l-\[var\(--df-color-primary\)\] {
+.border-l-\(--df-color-primary\) {
   border-left-color: var(--df-color-primary);
 }
 .bg-\[var\(--df-color-primary\)\] {
@@ -1168,9 +1156,6 @@
 .bg-blue-500 {
   background-color: var(--color-blue-500);
 }
-.bg-destructive {
-  background-color: var(--df-color-destructive);
-}
 .bg-gray-50 {
   background-color: var(--color-gray-50);
 }
@@ -1204,24 +1189,9 @@
 .bg-primary {
   background-color: var(--df-color-primary);
 }
-.bg-primary\/10 {
-  background-color: var(--df-color-primary);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--df-color-primary) 10%, transparent);
-  }
-}
-.bg-primary\/30 {
-  background-color: var(--df-color-primary);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--df-color-primary) 30%, transparent);
-  }
-}
 .bg-secondary {
   background-color: var(--df-color-secondary);
 }
-.bg-slate-50 {
-  background-color: var(--color-slate-50);
-}
 .bg-slate-200 {
   background-color: var(--color-slate-200);
 }
@@ -1463,12 +1433,6 @@
 .text-blue-900 {
   color: var(--color-blue-900);
 }
-.text-destructive {
-  color: var(--df-color-destructive);
-}
-.text-destructive-foreground {
-  color: var(--df-color-destructive-foreground);
-}
 .text-gray-300 {
   color: var(--color-gray-300);
 }
@@ -1493,15 +1457,9 @@
 .text-primary {
   color: var(--df-color-primary);
 }
-.text-primary-foreground {
-  color: var(--df-color-primary-foreground);
-}
 .text-red-500 {
   color: var(--color-red-500);
 }
-.text-secondary-foreground {
-  color: var(--df-color-secondary-foreground);
-}
 .text-slate-300 {
   color: var(--color-slate-300);
 }
@@ -1613,21 +1571,15 @@
   --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);
 }
-.shadow-primary\/20 {
+.shadow-primary {
   --tw-shadow-color: var(--df-color-primary);
   @supports (color: color-mix(in lab, red, red)) {
-    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--df-color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);
+    --tw-shadow-color: color-mix(in oklab, var(--df-color-primary) var(--tw-shadow-alpha), transparent);
   }
 }
 .ring-primary {
   --tw-ring-color: var(--df-color-primary);
 }
-.ring-primary\/20 {
-  --tw-ring-color: var(--df-color-primary);
-  @supports (color: color-mix(in lab, red, red)) {
-    --tw-ring-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
-  }
-}
 .ring-offset-1 {
   --tw-ring-offset-width: 1px;
   --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1720,11 +1672,6 @@
 .ring-inset {
   --tw-ring-inset: inset;
 }
-.group-focus-within\:text-primary {
-  &:is(:where(.group):focus-within *) {
-    color: var(--df-color-primary);
-  }
-}
 .group-hover\:scale-110 {
   &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -1811,23 +1758,6 @@
     }
   }
 }
-.hover\:bg-destructive {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--df-color-destructive);
-    }
-  }
-}
-.hover\:bg-destructive\/90 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--df-color-destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--df-color-destructive) 90%, transparent);
-      }
-    }
-  }
-}
 .hover\:bg-gray-50 {
   &:hover {
     @media (hover: hover) {
@@ -1856,36 +1786,6 @@
     }
   }
 }
-.hover\:bg-primary\/10 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--df-color-primary);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--df-color-primary) 10%, transparent);
-      }
-    }
-  }
-}
-.hover\:bg-primary\/20 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--df-color-primary);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
-      }
-    }
-  }
-}
-.hover\:bg-primary\/90 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--df-color-primary);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--df-color-primary) 90%, transparent);
-      }
-    }
-  }
-}
 .hover\:bg-slate-50 {
   &:hover {
     @media (hover: hover) {
@@ -1900,13 +1800,6 @@
     }
   }
 }
-.hover\:text-destructive-foreground {
-  &:hover {
-    @media (hover: hover) {
-      color: var(--df-color-destructive-foreground);
-    }
-  }
-}
 .hover\:text-gray-600 {
   &:hover {
     @media (hover: hover) {
@@ -1928,13 +1821,6 @@
     }
   }
 }
-.hover\:text-primary {
-  &:hover {
-    @media (hover: hover) {
-      color: var(--df-color-primary);
-    }
-  }
-}
 .hover\:text-slate-600 {
   &:hover {
     @media (hover: hover) {
@@ -1979,31 +1865,16 @@
     }
   }
 }
-.focus\:border-primary {
-  &:focus {
-    border-color: var(--df-color-primary);
-  }
-}
 .focus\:bg-\[var\(--df-color-primary\)\] {
   &:focus {
     background-color: var(--df-color-primary);
   }
 }
-.focus\:bg-destructive {
-  &:focus {
-    background-color: var(--df-color-destructive);
-  }
-}
 .focus\:text-\[var\(--df-color-primary-foreground\)\] {
   &:focus {
     color: var(--df-color-primary-foreground);
   }
 }
-.focus\:text-destructive-foreground {
-  &:focus {
-    color: var(--df-color-destructive-foreground);
-  }
-}
 .focus\:ring-1 {
   &:focus {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2016,11 +1887,6 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 }
-.focus\:ring-primary {
-  &:focus {
-    --tw-ring-color: var(--df-color-primary);
-  }
-}
 .focus\:ring-offset-1 {
   &:focus {
     --tw-ring-offset-width: 1px;
@@ -2418,18 +2284,6 @@
     }
   }
 }
-.dark\:hover\:bg-primary\/20 {
-  .dark & {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--df-color-primary);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
-        }
-      }
-    }
-  }
-}
 .dark\:hover\:bg-slate-700 {
   .dark & {
     &:hover {
@@ -2593,27 +2447,6 @@
 .bcp-petal-ring {
   pointer-events: none;
 }
-.df-calendar-container {
-  color-scheme: light dark;
-}
-.df-calendar-container,
-.df-portal {
-  --color-background: var(--df-color-background);
-  --color-foreground: var(--df-color-foreground);
-  --color-hover: var(--df-color-hover);
-  --color-border: var(--df-color-border);
-  --color-card: var(--df-color-card);
-  --color-card-foreground: var(--df-color-card-foreground);
-  --color-muted: var(--df-color-muted);
-  --color-muted-foreground: var(--df-color-muted-foreground);
-  --color-primary: var(--df-color-primary);
-  --color-primary-foreground: var(--df-color-primary-foreground);
-  --color-secondary: var(--df-color-secondary);
-  --color-secondary-foreground: var(--df-color-secondary-foreground);
-  --color-destructive: var(--df-color-destructive);
-  --color-destructive-foreground: var(--df-color-destructive-foreground);
-  --hover: var(--df-color-hover);
-}
 @layer df-theme {
   :where(:root) {
     --df-color-background: rgb(255 255 255);
@@ -2649,18 +2482,18 @@
   }
   @media (prefers-color-scheme: dark) {
     :root:not(.light):not(.dark) {
-      --df-color-background: rgb(16 24 40);
-      --df-color-hover: rgb(30 41 59);
+      --df-color-background: rgb(21 21 21);
+      --df-color-hover: rgb(28 28 28);
       --df-color-foreground: rgb(229 229 229);
-      --df-color-border: rgb(51 65 85);
-      --df-color-card: rgb(16 24 40);
+      --df-color-border: rgb(56 56 56);
+      --df-color-card: rgb(31 41 55);
       --df-color-card-foreground: rgb(229 229 229);
-      --df-color-muted: rgb(30 41 59);
-      --df-color-muted-foreground: rgb(148 163 184);
+      --df-color-muted: rgb(55 65 81);
+      --df-color-muted-foreground: rgb(156 163 175);
       --df-color-primary: rgb(229 229 229);
-      --df-color-primary-foreground: rgb(15 23 42);
-      --df-color-secondary: rgb(148 163 184);
-      --df-color-secondary-foreground: rgb(15 23 42);
+      --df-color-primary-foreground: rgb(23 23 23);
+      --df-color-secondary: rgb(156 163 175);
+      --df-color-secondary-foreground: rgb(23 23 23);
       --df-color-destructive: rgb(147 70 69);
       --df-color-destructive-foreground: rgb(254 242 242);
     }
@@ -2668,87 +2501,114 @@
 }
 @layer components {
   .df-calendar-container {
+    color-scheme: light dark;
     position: relative;
     display: flex;
     flex-direction: row;
     overflow: hidden;
-    border-radius: var(--radius-lg);
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    border-radius: 0.5rem;
     background-color: var(--df-color-background);
     border: 1px solid var(--df-color-border);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --df-calendar-height: 800px;
     height: var(--df-calendar-height, 800px);
     font-family: Arial;
   }
-  @media (max-width: 768px) {
-    .df-calendar-container {
-      --df-calendar-height: 550px;
-    }
+  .df-calendar-container, .df-portal, .df-event-detail-panel, .df-dialog-container, .df-range-picker {
+    --color-background: var(--df-color-background);
+    --color-foreground: var(--df-color-foreground);
+    --color-hover: var(--df-color-hover);
+    --color-border: var(--df-color-border);
+    --color-card: var(--df-color-card);
+    --color-card-foreground: var(--df-color-card-foreground);
+    --color-muted: var(--df-color-muted);
+    --color-muted-foreground: var(--df-color-muted-foreground);
+    --color-primary: var(--df-color-primary);
+    --color-primary-foreground: var(--df-color-primary-foreground);
+    --color-secondary: var(--df-color-secondary);
+    --color-secondary-foreground: var(--df-color-secondary-foreground);
+    --color-destructive: var(--df-color-destructive);
+    --color-destructive-foreground: var(--df-color-destructive-foreground);
+    --hover: var(--df-color-hover);
+  }
+  .df-calendar-container .df-header, .df-calendar-container .df-calendar, .df-calendar-container .df-month-view {
+    background-color: var(--df-color-background);
+  }
+  .df-calendar-container .df-sidebar {
+    background-color: var(--df-color-background);
+    border-color: var(--df-color-border);
+  }
+  .df-calendar-container .df-week-header-row, .df-calendar-container .df-week-header {
+    background-color: var(--df-color-background);
+    border-color: var(--df-color-border);
+  }
+  .df-calendar-container .df-month-day-cell, .df-calendar-container .df-time-grid-cell, .df-calendar-container .df-all-day-cell, .df-calendar-container .df-time-column, .df-calendar-container .df-time-grid-row, .df-calendar-container .df-time-grid-boundary, .df-calendar-container .df-all-day-row, .df-calendar-container .df-mini-calendar {
+    border-color: var(--df-color-border);
+  }
+  .df-calendar-container .df-year-grid-month {
+    --heat-1: #ebf5ff;
+    --heat-2: #cfe8ff;
+    --heat-3: #91d5ff;
+    --heat-4: #60a5fa;
+    --heat-5: #3b82f6;
+  }
+  .dark .df-calendar-container .df-year-grid-month {
+    --heat-1: #1e3a5f;
+    --heat-2: #2563eb;
+    --heat-3: #1e40af;
+    --heat-4: #3b82f6;
+    --heat-5: #93c5fd;
   }
   .df-calendar-time-column {
-    width: calc(var(--spacing) * 20);
+    width: 5rem;
     flex-shrink: 0;
     border-color: var(--df-color-border);
   }
   .df-calendar-nav-button {
+    padding: 0.25rem;
+    color: rgb(75 85 99);
     border-radius: 0.25rem;
-    padding: calc(var(--spacing) * 1);
-    color: var(--color-gray-600);
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-100);
-      }
-    }
-    .dark & {
-      color: var(--color-gray-300);
-    }
-    .dark & {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-gray-800);
-        }
-      }
-    }
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .dark .df-calendar-nav-button {
+    color: rgb(209 213 219);
+  }
+  .df-calendar-nav-button:hover {
+    background-color: rgb(243 244 246);
+  }
+  .dark .df-calendar-nav-button:hover {
+    background-color: rgb(31 41 55);
   }
   .df-calendar-today-button {
+    padding: 0.25rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: rgb(55 65 81);
     border-radius: 0.25rem;
-    padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--spacing) * 1);
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-gray-700);
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-100);
-      }
-    }
-    .dark & {
-      color: var(--color-gray-200);
-    }
-    .dark & {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-gray-800);
-        }
-      }
-    }
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .dark .df-calendar-today-button {
+    color: rgb(229 231 235);
+  }
+  .df-calendar-today-button:hover {
+    background-color: rgb(243 244 246);
+  }
+  .dark .df-calendar-today-button:hover {
+    background-color: rgb(31 41 55);
   }
   .df-calendar-checkbox {
-    margin-right: calc(var(--spacing) * 2);
+    margin-right: 0.5rem;
     display: inline-flex;
-    height: calc(var(--spacing) * 4);
-    width: calc(var(--spacing) * 4);
+    height: 1rem;
+    width: 1rem;
     cursor: pointer;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-sm);
+    border-radius: 0.25rem;
     border: 1px solid var(--df-color-border);
     -webkit-appearance: none;
        -moz-appearance: none;
@@ -2773,138 +2633,262 @@
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
   }
-  .df-header {
-    background-color: var(--df-color-background);
+  .df-event-detail-panel, .df-dialog-container {
+    background-color: var(--df-color-card);
+    border-color: var(--df-color-border);
   }
-  .df-calendar {
-    background-color: var(--df-color-background);
+  .df-calendar-container .df-header-left, .df-calendar-container .df-header-mid, .df-calendar-container .df-header-right {
+    flex: 1;
   }
-  .df-month-view {
-    background-color: var(--df-color-background);
+  .df-current-time-bar {
+    background-color: var(--df-color-primary);
   }
-  .df-week-header-row,
-  .df-week-header {
-    background-color: var(--df-color-background);
-    border-color: var(--df-color-border);
+  .df-current-time-label {
+    background-color: var(--df-color-primary);
+    color: var(--df-color-primary-foreground);
   }
-  .df-month-day-cell,
-  .df-time-grid-cell,
-  .df-all-day-cell {
-    border-color: var(--df-color-border);
+  .df-today-button {
+    color: var(--df-color-primary);
   }
-  .df-time-column {
-    border-color: var(--df-color-border);
+  .df-today-button:hover, .df-nav-button:hover {
+    background-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in srgb, var(--df-color-primary) 10%, transparent );
+    }
   }
-  .df-time-grid-row,
-  .df-time-grid-boundary,
-  .df-all-day-row,
-  .df-mini-calendar {
-    border-color: var(--df-color-border);
+  .df-nav-button:hover {
+    color: var(--df-color-primary);
   }
-  .df-event-detail-panel,
-  .df-dialog-container {
-    background-color: var(--df-color-card);
-    border-color: var(--df-color-border);
+  .df-search-group:focus-within .df-search-focus-within-primary {
+    color: var(--df-color-primary);
+  }
+  .df-fill-primary {
+    background-color: var(--df-color-primary);
+    color: var(--df-color-primary-foreground);
+  }
+  .df-fill-secondary {
+    background-color: var(--df-color-secondary);
+    color: var(--df-color-secondary-foreground);
   }
-  .df-portal .bg-destructive {
+  .df-fill-destructive {
     background-color: var(--df-color-destructive);
     color: var(--df-color-destructive-foreground);
   }
-  .df-portal .hover\:bg-destructive\/90:hover {
+  .df-tint-primary {
+    background-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in srgb, var(--df-color-primary) 10%, transparent );
+    }
+    color: var(--df-color-primary);
+  }
+  .df-tint-primary-md {
+    background-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
+    }
+    color: var(--df-color-primary);
+  }
+  .df-tint-primary-lg {
+    background-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in srgb, var(--df-color-primary) 30%, transparent );
+    }
+    color: var(--df-color-primary);
+  }
+  .dark .df-dark-tint-primary-md {
+    background-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
+    }
+  }
+  .df-hover-primary:hover {
+    background-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in srgb, var(--df-color-primary) 10%, transparent );
+    }
+    color: var(--df-color-primary);
+  }
+  .df-hover-primary-md:hover {
+    background-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
+    }
+    color: var(--df-color-primary);
+  }
+  .dark .df-hover-primary-dark-md:hover {
+    background-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
+    }
+  }
+  .df-hover-primary-solid:hover {
+    background-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in srgb, var(--df-color-primary) 90%, transparent );
+    }
+  }
+  .df-hover-destructive:hover {
     background-color: var(--df-color-destructive);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(
-      in srgb,
-      var(--df-color-destructive) 90%,
-      transparent
-    );
+      background-color: color-mix( in srgb, var(--df-color-destructive) 90%, transparent );
     }
   }
-  .df-portal .text-destructive-foreground {
+  .df-hover-fill-destructive:hover {
+    background-color: var(--df-color-destructive);
     color: var(--df-color-destructive-foreground);
   }
-  .df-sidebar {
-    background-color: var(--df-color-background);
-    border-color: var(--df-color-border);
+  .df-focus-fill-destructive:focus {
+    background-color: var(--df-color-destructive);
+    color: var(--df-color-destructive-foreground);
   }
-  .df-year-grid-month {
-    --heat-1: #ebf5ff;
-    --heat-2: #cfe8ff;
-    --heat-3: #91d5ff;
-    --heat-4: #60a5fa;
-    --heat-5: #3b82f6;
+  .df-text-primary {
+    color: var(--df-color-primary);
   }
-  .dark .df-year-grid-month {
-    --heat-1: #1e3a5f;
-    --heat-2: #2563eb;
-    --heat-3: #1e40af;
-    --heat-4: #3b82f6;
-    --heat-5: #93c5fd;
+  .df-text-primary-fg {
+    color: var(--df-color-primary-foreground);
   }
-  .df-calendar-container *::-webkit-scrollbar {
-    width: 2px;
-    height: 2px;
+  .df-text-secondary-fg {
+    color: var(--df-color-secondary-foreground);
   }
-  .df-calendar-container *::-webkit-scrollbar-track {
-    background: transparent;
+  .df-text-destructive {
+    color: var(--df-color-destructive);
   }
-  .df-calendar-container *::-webkit-scrollbar-thumb {
-    background: #d1d5db;
-    border-radius: 1px;
+  .df-text-destructive-fg {
+    color: var(--df-color-destructive-foreground);
   }
-  .dark .df-calendar-container *::-webkit-scrollbar-thumb {
-    background: #4b5563;
+  .df-border-primary {
+    border-color: var(--df-color-primary);
   }
-  .df-calendar-container *::-webkit-scrollbar-thumb:hover {
-    background: #9ca3af;
+  .df-border-primary-soft {
+    border-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb, var(--df-color-primary) 50%, transparent);
+    }
   }
-  .df-calendar-container * {
-    scrollbar-width: thin;
-    scrollbar-color: #d1d5db transparent;
+  .df-ring-primary {
+    --tw-ring-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(
+      in srgb,
+      var(--df-color-primary) 20%,
+      transparent
+    );
+    }
   }
-  .dark .df-calendar-container * {
-    scrollbar-color: #4b5563 transparent;
+  .df-ring-primary-solid {
+    --tw-ring-color: var(--df-color-primary);
   }
-  .df-calendar-container .df-header-left {
-    flex: 1;
+  .df-shadow-primary {
+    --tw-shadow-color: var(--df-color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(
+      in srgb,
+      var(--df-color-primary) 20%,
+      transparent
+    );
+    }
   }
-  .df-calendar-container .df-header-mid {
-    flex: 1;
+  .df-focus-ring:focus {
+    border-color: var(--df-color-primary);
+    --tw-ring-color: var(--df-color-primary);
   }
-  .df-calendar-container .df-header-right {
-    flex: 1;
+  .df-focus-ring-only:focus {
+    --tw-ring-color: var(--df-color-primary);
   }
-  .df-calendar-container.df-drag-active,
-  .df-calendar-container .df-drag-active {
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
+  .df-focus-border-primary:focus {
+    border-color: var(--df-color-primary);
   }
-  .df-calendar-container.df-drag-active .calendar-event,
-  .df-calendar-container.df-drag-active .df-month-more-events,
-  .df-calendar-container.df-drag-active .df-month-title,
-  .df-calendar-container.df-drag-active .df-year-event-content {
-    pointer-events: none;
+  .df-all-day-event-animate {
+    animation: df-event-pop-in 0.3s ease-out forwards;
   }
-  .df-calendar-container .df-cursor-ns-resize,
-  .df-calendar-container .df-cursor-ns-resize * {
-    cursor: ns-resize;
+  .df-animate-in {
+    animation-duration: 200ms;
+    animation-fill-mode: forwards;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
-  .df-calendar-container .df-cursor-ew-resize,
-  .df-calendar-container .df-cursor-ew-resize * {
-    cursor: ew-resize;
+  .df-fade-in {
+    animation-name: df-fade-in;
   }
-  .df-calendar-container .df-cursor-grabbing,
-  .df-calendar-container .df-cursor-grabbing * {
-    cursor: grabbing;
+  .df-zoom-in-95 {
+    animation-name: df-zoom-in;
   }
-  .df-calendar-container .scrollbar-hide::-webkit-scrollbar {
-    display: none;
+  .df-fade-in.df-zoom-in-95 {
+    animation-name: df-fade-in, df-zoom-in;
   }
-  .df-calendar-container .scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+  .df-animate-slide-up {
+    animation: df-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
+  .df-animate-slide-down {
+    animation: df-slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+  @media (max-width: 768px) {
+    .df-calendar-container {
+      --df-calendar-height: 550px;
+    }
+  }
+  @media (max-width: 767px) {
+    .df-mobile-mask-fade {
+      mask-image: linear-gradient(to right, black 70%, transparent 100%);
+      -webkit-mask-image: linear-gradient( to right, black 70%, transparent 100% );
+    }
+  }
+}
+.df-calendar-container *::-webkit-scrollbar {
+  width: 2px;
+  height: 2px;
+}
+.df-calendar-container *::-webkit-scrollbar-track {
+  background: transparent;
+}
+.df-calendar-container *::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 1px;
+}
+.dark .df-calendar-container *::-webkit-scrollbar-thumb {
+  background: #4b5563;
+}
+.df-calendar-container *::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+.df-calendar-container * {
+  scrollbar-width: thin;
+  scrollbar-color: #d1d5db transparent;
+}
+.dark .df-calendar-container * {
+  scrollbar-color: #4b5563 transparent;
+}
+.df-calendar-container.df-drag-active, .df-calendar-container .df-drag-active {
+  -moz-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+}
+.df-calendar-container.df-drag-active .calendar-event, .df-calendar-container.df-drag-active .df-month-more-events, .df-calendar-container.df-drag-active .df-month-title, .df-calendar-container.df-drag-active .df-year-event-content {
+  pointer-events: none;
+}
+.df-calendar-container .df-cursor-ns-resize, .df-calendar-container .df-cursor-ns-resize * {
+  cursor: ns-resize;
+}
+body.df-cursor-ns-resize, body.df-cursor-ns-resize * {
+  cursor: ns-resize !important;
+}
+.df-calendar-container .df-cursor-ew-resize, .df-calendar-container .df-cursor-ew-resize * {
+  cursor: ew-resize;
+}
+body.df-cursor-ew-resize, body.df-cursor-ew-resize * {
+  cursor: ew-resize !important;
+}
+.df-calendar-container .df-cursor-grabbing, .df-calendar-container .df-cursor-grabbing * {
+  cursor: grabbing;
+}
+body.df-cursor-grabbing, body.df-cursor-grabbing * {
+  cursor: grabbing !important;
+}
+.df-scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.df-scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 @keyframes df-fade-out {
   from {
@@ -2914,6 +2898,48 @@
     opacity: 0;
   }
 }
+@keyframes df-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes df-event-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes df-zoom-in {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+@keyframes df-slide-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes df-slide-down {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;