@powerhousedao/document-engineering 1.8.1 → 1.9.0

package/dist/style.css

@@ -7,6 +7,7 @@
     --font-sans: "Inter", sans-serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-300: hsl(6 82% 87%);
     --color-red-400: hsl(5 82% 83%);
     --color-red-500: hsl(5 80% 78%);
     --color-red-600: hsl(4 81% 74%);
@@ -25,13 +26,22 @@
     --color-green-600: hsl(136 53% 60%);
     --color-green-700: hsl(136 52% 55%);
     --color-green-900: hsl(136 53% 43%);
+    --color-cyan-50: oklch(98.4% 0.019 200.873);
+    --color-cyan-200: oklch(91.7% 0.08 205.041);
+    --color-cyan-300: oklch(86.5% 0.127 207.078);
+    --color-cyan-400: oklch(78.9% 0.154 211.53);
+    --color-cyan-500: oklch(71.5% 0.143 215.221);
+    --color-cyan-700: oklch(52% 0.105 223.128);
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: hsl(209 100% 90%);
+    --color-blue-200: hsl(209 97% 85%);
+    --color-blue-400: hsl(209 100% 75%);
     --color-blue-500: hsl(209 100% 70%);
     --color-blue-600: hsl(209 100% 65%);
     --color-blue-700: hsl(209 100% 60%);
     --color-blue-800: hsl(209 100% 55%);
     --color-blue-900: hsl(209 100% 50%);
+    --color-pink-400: oklch(71.8% 0.202 349.761);
     --color-slate-50: hsl(210 20% 96%);
     --color-slate-100: hsl(210 9% 74%);
     --color-slate-200: hsl(210 9% 48%);
@@ -68,10 +78,12 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
@@ -3256,6 +3268,864 @@
   .\[\&\]\:\!w-\[120px\] {
     width: 120px !important;
   }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:rounded-full {
+    & .date-picker\_\_button-next {
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:border-2 {
+    & .date-picker\_\_button-next {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:border-cyan-400 {
+    & .date-picker\_\_button-next {
+      border-color: var(--color-cyan-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:bg-blue-500 {
+    & .date-picker\_\_button-next {
+      background-color: var(--color-blue-500);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:bg-transparent {
+    & .date-picker\_\_button-next {
+      background-color: transparent;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:bg-white {
+    & .date-picker\_\_button-next {
+      background-color: var(--color-white);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:p-2 {
+    & .date-picker\_\_button-next {
+      padding: calc(var(--spacing) * 2);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:text-cyan-400 {
+    & .date-picker\_\_button-next {
+      color: var(--color-cyan-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:text-gray-700 {
+    & .date-picker\_\_button-next {
+      color: var(--color-gray-700);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:text-white {
+    & .date-picker\_\_button-next {
+      color: var(--color-white);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:shadow-sm {
+    & .date-picker\_\_button-next {
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:transition-all {
+    & .date-picker\_\_button-next {
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:duration-300 {
+    & .date-picker\_\_button-next {
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:hover\:scale-110 {
+    & .date-picker\_\_button-next {
+      &:hover {
+        @media (hover: hover) {
+          --tw-scale-x: 110%;
+          --tw-scale-y: 110%;
+          --tw-scale-z: 110%;
+          scale: var(--tw-scale-x) var(--tw-scale-y);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:hover\:bg-cyan-400\/10 {
+    & .date-picker\_\_button-next {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 10%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-cyan-400) 10%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:hover\:bg-gray-50 {
+    & .date-picker\_\_button-next {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-50);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-next\]\:hover\:shadow-\[0_0_15px_rgba\(34\,211\,238\,0\.6\)\] {
+    & .date-picker\_\_button-next {
+      &:hover {
+        @media (hover: hover) {
+          --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(34,211,238,0.6));
+          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:rounded-full {
+    & .date-picker\_\_button-previous {
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:border-2 {
+    & .date-picker\_\_button-previous {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:border-cyan-400 {
+    & .date-picker\_\_button-previous {
+      border-color: var(--color-cyan-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:bg-transparent {
+    & .date-picker\_\_button-previous {
+      background-color: transparent;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:bg-white {
+    & .date-picker\_\_button-previous {
+      background-color: var(--color-white);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:p-2 {
+    & .date-picker\_\_button-previous {
+      padding: calc(var(--spacing) * 2);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:text-cyan-400 {
+    & .date-picker\_\_button-previous {
+      color: var(--color-cyan-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:text-gray-700 {
+    & .date-picker\_\_button-previous {
+      color: var(--color-gray-700);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:shadow-sm {
+    & .date-picker\_\_button-previous {
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:transition-all {
+    & .date-picker\_\_button-previous {
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:duration-300 {
+    & .date-picker\_\_button-previous {
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:hover\:scale-110 {
+    & .date-picker\_\_button-previous {
+      &:hover {
+        @media (hover: hover) {
+          --tw-scale-x: 110%;
+          --tw-scale-y: 110%;
+          --tw-scale-z: 110%;
+          scale: var(--tw-scale-x) var(--tw-scale-y);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:hover\:bg-cyan-400\/10 {
+    & .date-picker\_\_button-previous {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 10%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-cyan-400) 10%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:hover\:bg-gray-50 {
+    & .date-picker\_\_button-previous {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-50);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_button-previous\]\:hover\:shadow-\[0_0_15px_rgba\(34\,211\,238\,0\.6\)\] {
+    & .date-picker\_\_button-previous {
+      &:hover {
+        @media (hover: hover) {
+          --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(34,211,238,0.6));
+          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_calendar\]\:rounded-xl {
+    & .date-picker\_\_calendar {
+      border-radius: var(--radius-xl);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_calendar\]\:rounded-b-lg {
+    & .date-picker\_\_calendar {
+      border-bottom-right-radius: var(--radius-lg);
+      border-bottom-left-radius: var(--radius-lg);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_calendar\]\:bg-white {
+    & .date-picker\_\_calendar {
+      background-color: var(--color-white);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_calendar_button\]\:text-gray-700 {
+    & .date-picker\_\_calendar button {
+      color: var(--color-gray-700);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_calendar_button\[data-selected\=true\]\]\:bg-blue-500 {
+    & .date-picker\_\_calendar button[data-selected=true] {
+      background-color: var(--color-blue-500);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_calendar_button\[data-selected\=true\]\]\:bg-green-600 {
+    & .date-picker\_\_calendar button[data-selected=true] {
+      background-color: var(--color-green-600);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_calendar_button\[data-selected\=true\]\]\:text-white {
+    & .date-picker\_\_calendar button[data-selected=true] {
+      color: var(--color-white);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:gap-2 {
+    & .date-picker\_\_date-footer {
+      gap: calc(var(--spacing) * 2);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:flex {
+    & .date-picker\_\_day-button {
+      display: flex;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:h-6 {
+    & .date-picker\_\_day-button {
+      height: calc(var(--spacing) * 6);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:w-6 {
+    & .date-picker\_\_day-button {
+      width: calc(var(--spacing) * 6);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:items-center {
+    & .date-picker\_\_day-button {
+      align-items: center;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:justify-center {
+    & .date-picker\_\_day-button {
+      justify-content: center;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:rounded-full {
+    & .date-picker\_\_day-button {
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:font-medium {
+    & .date-picker\_\_day-button {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:text-cyan-400 {
+    & .date-picker\_\_day-button {
+      color: var(--color-cyan-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:text-gray-700 {
+    & .date-picker\_\_day-button {
+      color: var(--color-gray-700);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:transition-all {
+    & .date-picker\_\_day-button {
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:duration-300 {
+    & .date-picker\_\_day-button {
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:hover\:scale-110 {
+    & .date-picker\_\_day-button {
+      &:hover {
+        @media (hover: hover) {
+          --tw-scale-x: 110%;
+          --tw-scale-y: 110%;
+          --tw-scale-z: 110%;
+          scale: var(--tw-scale-x) var(--tw-scale-y);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:hover\:bg-blue-100 {
+    & .date-picker\_\_day-button {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-blue-100);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:hover\:bg-cyan-400\/10 {
+    & .date-picker\_\_day-button {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 10%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-cyan-400) 10%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:hover\:bg-gray-50 {
+    & .date-picker\_\_day-button {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-50);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:hover\:text-cyan-300 {
+    & .date-picker\_\_day-button {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-cyan-300);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_day-button\]\:hover\:text-gray-900 {
+    & .date-picker\_\_day-button {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-gray-900);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-caption\]\:mb-4 {
+    & .date-picker\_\_month-caption {
+      margin-bottom: calc(var(--spacing) * 4);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-caption\]\:border-b {
+    & .date-picker\_\_month-caption {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-caption\]\:border-cyan-400\/30 {
+    & .date-picker\_\_month-caption {
+      border-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-cyan-400) 30%, transparent);
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-caption\]\:bg-white {
+    & .date-picker\_\_month-caption {
+      background-color: var(--color-white);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-caption\]\:p-2 {
+    & .date-picker\_\_month-caption {
+      padding: calc(var(--spacing) * 2);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-caption\]\:font-mono {
+    & .date-picker\_\_month-caption {
+      font-family: var(--font-mono);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-caption\]\:text-lg {
+    & .date-picker\_\_month-caption {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-caption\]\:font-bold {
+    & .date-picker\_\_month-caption {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-caption\]\:text-cyan-400 {
+    & .date-picker\_\_month-caption {
+      color: var(--color-cyan-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-caption\]\:text-gray-900 {
+    & .date-picker\_\_month-caption {
+      color: var(--color-gray-900);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid\]\:mt-2 {
+    & .date-picker\_\_month-grid {
+      margin-top: calc(var(--spacing) * 2);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid\]\:gap-1 {
+    & .date-picker\_\_month-grid {
+      gap: calc(var(--spacing) * 1);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:rounded-lg {
+    & .date-picker\_\_month-grid--view {
+      border-radius: var(--radius-lg);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:border {
+    & .date-picker\_\_month-grid--view {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:border-2 {
+    & .date-picker\_\_month-grid--view {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:border-blue-400 {
+    & .date-picker\_\_month-grid--view {
+      border-color: var(--color-blue-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:border-gray-100 {
+    & .date-picker\_\_month-grid--view {
+      border-color: var(--color-gray-100);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:bg-red-500 {
+    & .date-picker\_\_month-grid--view {
+      background-color: var(--color-red-500);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:bg-white {
+    & .date-picker\_\_month-grid--view {
+      background-color: var(--color-white);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:p-2 {
+    & .date-picker\_\_month-grid--view {
+      padding: calc(var(--spacing) * 2);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:font-bold {
+    & .date-picker\_\_month-grid--view {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:font-medium {
+    & .date-picker\_\_month-grid--view {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:text-gray-700 {
+    & .date-picker\_\_month-grid--view {
+      color: var(--color-gray-700);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:text-white {
+    & .date-picker\_\_month-grid--view {
+      color: var(--color-white);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:shadow-sm {
+    & .date-picker\_\_month-grid--view {
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:transition-all {
+    & .date-picker\_\_month-grid--view {
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_month-grid--view\]\:hover\:bg-gray-50 {
+    & .date-picker\_\_month-grid--view {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-50);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_outside\]\:\!bg-gray-900 {
+    & .date-picker\_\_outside {
+      background-color: var(--color-gray-900) !important;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_outside\]\:\!bg-transparent {
+    & .date-picker\_\_outside {
+      background-color: transparent !important;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_outside\]\:opacity-30 {
+    & .date-picker\_\_outside {
+      opacity: 30%;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_outside\]\:opacity-40 {
+    & .date-picker\_\_outside {
+      opacity: 40%;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:\!rounded-full {
+    & .date-picker\_\_selected {
+      border-radius: calc(infinity * 1px) !important;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:\!bg-\[\#FF5A5F\] {
+    & .date-picker\_\_selected {
+      background-color: #FF5A5F !important;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:\!bg-blue-500 {
+    & .date-picker\_\_selected {
+      background-color: var(--color-blue-500) !important;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:\!bg-cyan-400 {
+    & .date-picker\_\_selected {
+      background-color: var(--color-cyan-400) !important;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:\!font-mono {
+    & .date-picker\_\_selected {
+      font-family: var(--font-mono) !important;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:\!font-medium {
+    & .date-picker\_\_selected {
+      --tw-font-weight: var(--font-weight-medium) !important;
+      font-weight: var(--font-weight-medium) !important;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:\!text-black {
+    & .date-picker\_\_selected {
+      color: var(--color-black) !important;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:\!text-white {
+    & .date-picker\_\_selected {
+      color: var(--color-white) !important;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:shadow-sm {
+    & .date-picker\_\_selected {
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:transition-all {
+    & .date-picker\_\_selected {
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:duration-300 {
+    & .date-picker\_\_selected {
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:hover\:\!bg-\[\#FF5A5F\]\/90 {
+    & .date-picker\_\_selected {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in oklab, #FF5A5F 90%, transparent) !important;
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_selected\]\:hover\:\!bg-cyan-500 {
+    & .date-picker\_\_selected {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-cyan-500) !important;
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_today\]\:rounded-full {
+    & .date-picker\_\_today {
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_today\]\:border-2 {
+    & .date-picker\_\_today {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_today\]\:border-\[\#FF5A5F\] {
+    & .date-picker\_\_today {
+      border-color: #FF5A5F;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_today\]\:border-blue-500 {
+    & .date-picker\_\_today {
+      border-color: var(--color-blue-500);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_today\]\:border-cyan-400 {
+    & .date-picker\_\_today {
+      border-color: var(--color-cyan-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_today\]\:border-pink-400 {
+    & .date-picker\_\_today {
+      border-color: var(--color-pink-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_today\]\:font-medium {
+    & .date-picker\_\_today {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_today\]\:text-pink-400 {
+    & .date-picker\_\_today {
+      color: var(--color-pink-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_weekday\]\:font-mono {
+    & .date-picker\_\_weekday {
+      font-family: var(--font-mono);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_weekday\]\:text-sm {
+    & .date-picker\_\_weekday {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_weekday\]\:font-medium {
+    & .date-picker\_\_weekday {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_weekday\]\:tracking-wider {
+    & .date-picker\_\_weekday {
+      --tw-tracking: var(--tracking-wider);
+      letter-spacing: var(--tracking-wider);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_weekday\]\:text-blue-500 {
+    & .date-picker\_\_weekday {
+      color: var(--color-blue-500);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_weekday\]\:text-cyan-400 {
+    & .date-picker\_\_weekday {
+      color: var(--color-cyan-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_weekday\]\:text-gray-500 {
+    & .date-picker\_\_weekday {
+      color: var(--color-gray-500);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_weekday\]\:uppercase {
+    & .date-picker\_\_weekday {
+      text-transform: uppercase;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:rounded-lg {
+    & .date-picker\_\_year-grid--view {
+      border-radius: var(--radius-lg);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:border {
+    & .date-picker\_\_year-grid--view {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:border-2 {
+    & .date-picker\_\_year-grid--view {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:border-gray-100 {
+    & .date-picker\_\_year-grid--view {
+      border-color: var(--color-gray-100);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:border-red-400 {
+    & .date-picker\_\_year-grid--view {
+      border-color: var(--color-red-400);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:bg-blue-500 {
+    & .date-picker\_\_year-grid--view {
+      background-color: var(--color-blue-500);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:bg-white {
+    & .date-picker\_\_year-grid--view {
+      background-color: var(--color-white);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:p-2 {
+    & .date-picker\_\_year-grid--view {
+      padding: calc(var(--spacing) * 2);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:font-bold {
+    & .date-picker\_\_year-grid--view {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:font-medium {
+    & .date-picker\_\_year-grid--view {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:text-gray-700 {
+    & .date-picker\_\_year-grid--view {
+      color: var(--color-gray-700);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:text-white {
+    & .date-picker\_\_year-grid--view {
+      color: var(--color-white);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:shadow-sm {
+    & .date-picker\_\_year-grid--view {
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:transition-all {
+    & .date-picker\_\_year-grid--view {
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_year-grid--view\]\:hover\:bg-gray-50 {
+    & .date-picker\_\_year-grid--view {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-50);
+        }
+      }
+    }
+  }
+  .\[\&_\.date-time-picker\\\\_\\\\_content\]\:rounded-lg {
+    & .date-time-picker\_\_content {
+      border-radius: var(--radius-lg);
+    }
+  }
+  .\[\&_\.date-time-picker\\\\_\\\\_content\]\:border-cyan-200 {
+    & .date-time-picker\_\_content {
+      border-color: var(--color-cyan-200);
+    }
+  }
+  .\[\&_\.date-time-picker\\\\_\\\\_content\]\:from-cyan-50 {
+    & .date-time-picker\_\_content {
+      --tw-gradient-from: var(--color-cyan-50);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+  }
+  .\[\&_\.date-time-picker\\\\_\\\\_content\]\:to-blue-50 {
+    & .date-time-picker\_\_content {
+      --tw-gradient-to: var(--color-blue-50);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+  }
+  .\[\&_\.date-time-picker\\\\_\\\\_tabs\]\:border-cyan-200 {
+    & .date-time-picker\_\_tabs {
+      border-color: var(--color-cyan-200);
+    }
+  }
+  .\[\&_\.date-time-picker\\\\_\\\\_tabs_svg\]\:text-green-700 {
+    & .date-time-picker\_\_tabs svg {
+      color: var(--color-green-700);
+    }
+  }
+  .\[\&_\.date-time-picker\\\\_\\\\_tabs_svg\[data-selected\=true\]\]\:scale-110 {
+    & .date-time-picker\_\_tabs svg[data-selected=true] {
+      --tw-scale-x: 110%;
+      --tw-scale-y: 110%;
+      --tw-scale-z: 110%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .\[\&_\.date-time-picker\\\\_\\\\_tabs_svg\[data-selected\=true\]\]\:font-bold {
+    & .date-time-picker\_\_tabs svg[data-selected=true] {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_\.date-time-picker\\\\_\\\\_tabs_svg\[data-selected\=true\]\]\:text-red-600 {
+    & .date-time-picker\_\_tabs svg[data-selected=true] {
+      color: var(--color-red-600);
+    }
+  }
+  .\[\&_\.date-time-picker\\\\_\\\\_tabs_svg\[data-state\=active\]\]\:text-green-900 {
+    & .date-time-picker\_\_tabs svg[data-state=active] {
+      color: var(--color-green-900);
+    }
+  }
+  .\[\&_\.date-time-picker\\\\_\\\\_tabs_svg\[data-state\=active\]\]\:text-red-900 {
+    & .date-time-picker\_\_tabs svg[data-state=active] {
+      color: var(--color-red-900);
+    }
+  }
   .focus\:\[\&_\.input-field\]\:bg-transparent {
     &:focus {
       & .input-field {
@@ -3263,6 +4133,100 @@
       }
     }
   }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:rounded-lg {
+    & .time-picker\_\_content {
+      border-radius: var(--radius-lg);
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:border-2 {
+    & .time-picker\_\_content {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:border-b {
+    & .time-picker\_\_content {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:border-cyan-400 {
+    & .time-picker\_\_content {
+      border-color: var(--color-cyan-400);
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:border-cyan-400\/30 {
+    & .time-picker\_\_content {
+      border-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-cyan-400) 30%, transparent);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:bg-blue-100 {
+    & .time-picker\_\_content {
+      background-color: var(--color-blue-100);
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:bg-red-300 {
+    & .time-picker\_\_content {
+      background-color: var(--color-red-300);
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:p-2 {
+    & .time-picker\_\_content {
+      padding: calc(var(--spacing) * 2);
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:font-mono {
+    & .time-picker\_\_content {
+      font-family: var(--font-mono);
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:text-lg {
+    & .time-picker\_\_content {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:transition-all {
+    & .time-picker\_\_content {
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_content\]\:duration-300 {
+    & .time-picker\_\_content {
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_option\]\:text-cyan-700 {
+    & .time-picker\_\_option {
+      color: var(--color-cyan-700);
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_select\]\:rounded-lg {
+    & .time-picker\_\_select {
+      border-radius: var(--radius-lg);
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_select\]\:border-cyan-200 {
+    & .time-picker\_\_select {
+      border-color: var(--color-cyan-200);
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_timezone\]\:border-cyan-200 {
+    & .time-picker\_\_timezone {
+      border-color: var(--color-cyan-200);
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_timezone-option\]\:text-cyan-700 {
+    & .time-picker\_\_timezone-option {
+      color: var(--color-cyan-700);
+    }
+  }
   .\[\&_\[cmdk-group-heading\]\]\:px-2 {
     & [cmdk-group-heading] {
       padding-inline: calc(var(--spacing) * 2);
@@ -3320,6 +4284,13 @@
       }
     }
   }
+  .\[\&_\.date-time-picker\\\\_\\\\_tabs\]\:\[\&_button\[data-selected\=true\]\]\:border-blue-200 {
+    & .date-time-picker\_\_tabs {
+      & button[data-selected=true] {
+        border-color: var(--color-blue-200);
+      }
+    }
+  }
   .\[\&_label\]\:text-blue-600 {
     & label {
       color: var(--color-blue-600);
@@ -3393,6 +4364,223 @@
       }
     }
   }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:rounded-full {
+    & .date-picker\_\_date-footer {
+      &>button {
+        border-radius: calc(infinity * 1px);
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:p-2 {
+    & .date-picker\_\_date-footer {
+      &>button {
+        padding: calc(var(--spacing) * 2);
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:font-medium {
+    & .date-picker\_\_date-footer {
+      &>button {
+        --tw-font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-medium);
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:text-\[\#FF5A5F\] {
+    & .date-picker\_\_date-footer {
+      &>button {
+        color: #FF5A5F;
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:text-blue-400 {
+    & .date-picker\_\_date-footer {
+      &>button {
+        color: var(--color-blue-400);
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:transition-all {
+    & .date-picker\_\_date-footer {
+      &>button {
+        transition-property: all;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:duration-200 {
+    & .date-picker\_\_date-footer {
+      &>button {
+        --tw-duration: 200ms;
+        transition-duration: 200ms;
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:duration-300 {
+    & .date-picker\_\_date-footer {
+      &>button {
+        --tw-duration: 300ms;
+        transition-duration: 300ms;
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:hover\:bg-\[\#FF5A5F\]\/10 {
+    & .date-picker\_\_date-footer {
+      &>button {
+        &:hover {
+          @media (hover: hover) {
+            background-color: color-mix(in oklab, #FF5A5F 10%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:hover\:bg-blue-400\/10 {
+    & .date-picker\_\_date-footer {
+      &>button {
+        &:hover {
+          @media (hover: hover) {
+            background-color: color-mix(in srgb, hsl(209 100% 75%) 10%, transparent);
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--color-blue-400) 10%, transparent);
+            }
+          }
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:hover\:text-\[\#FF5A5F\]\/90 {
+    & .date-picker\_\_date-footer {
+      &>button {
+        &:hover {
+          @media (hover: hover) {
+            color: color-mix(in oklab, #FF5A5F 90%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:hover\:text-blue-500 {
+    & .date-picker\_\_date-footer {
+      &>button {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--color-blue-500);
+          }
+        }
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_buttons\]\:\[\&\>button\]\:bg-gray-800 {
+    & .time-picker\_\_buttons {
+      &>button {
+        background-color: var(--color-gray-800);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_buttons\]\:\[\&\>button\]\:text-gray-900 {
+    & .time-picker\_\_buttons {
+      &>button {
+        color: var(--color-gray-900);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_period\]\:\[\&\>button\]\:text-blue-500 {
+    & .time-picker\_\_period {
+      &>button {
+        color: var(--color-blue-500);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_period\]\:\[\&\>button\]\:text-red-500 {
+    & .time-picker\_\_period {
+      &>button {
+        color: var(--color-red-500);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_select\]\:\[\&\>button\]\:rounded-lg {
+    & .time-picker\_\_select {
+      &>button {
+        border-radius: var(--radius-lg);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_select\]\:\[\&\>button\]\:bg-red-500 {
+    & .time-picker\_\_select {
+      &>button {
+        background-color: var(--color-red-500);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_select\]\:\[\&\>button\]\:p-2 {
+    & .time-picker\_\_select {
+      &>button {
+        padding: calc(var(--spacing) * 2);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_select\]\:\[\&\>button\]\:text-gray-900 {
+    & .time-picker\_\_select {
+      &>button {
+        color: var(--color-gray-900);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_select\]\:\[\&\>button\]\:transition-all {
+    & .time-picker\_\_select {
+      &>button {
+        transition-property: all;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_select\]\:\[\&\>button\]\:duration-300 {
+    & .time-picker\_\_select {
+      &>button {
+        --tw-duration: 300ms;
+        transition-duration: 300ms;
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_period\]\:\[\&\>button\[data-selected\=true\]\]\:rounded-md {
+    & .time-picker\_\_period {
+      &>button[data-selected=true] {
+        border-radius: var(--radius-md);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_period\]\:\[\&\>button\[data-selected\=true\]\]\:bg-blue-100 {
+    & .time-picker\_\_period {
+      &>button[data-selected=true] {
+        background-color: var(--color-blue-100);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_period\]\:\[\&\>button\[data-selected\=true\]\]\:font-bold {
+    & .time-picker\_\_period {
+      &>button[data-selected=true] {
+        --tw-font-weight: var(--font-weight-bold);
+        font-weight: var(--font-weight-bold);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_selector\]\:\[\&\>div\]\:bg-green-100 {
+    & .time-picker\_\_selector {
+      &>div {
+        background-color: var(--color-green-100);
+      }
+    }
+  }
+  .\[\&_\.time-picker\\\\_\\\\_selector\]\:\[\&\>div\]\:bg-green-500 {
+    & .time-picker\_\_selector {
+      &>div {
+        background-color: var(--color-green-500);
+      }
+    }
+  }
   .\[\&\>label\]\:text-blue-500 {
     &>label {
       color: var(--color-blue-500);
@@ -3717,6 +4905,63 @@ input[type="number"] {
   initial-value: "";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -3839,6 +5084,18 @@ input[type="number"] {
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
     }
   }
 }