@object-ui/fields 17.3.0 → 17.6.0

package/dist/index.css

@@ -0,0 +1,651 @@
+/*! @object-ui/fields — utilities this package adds on top of @object-ui/components.
+ *
+ * IMPORT AFTER the components sheet; this is a supplement, not a standalone stylesheet:
+ *
+ *   @import '@object-ui/components/style.css';
+ *   @import '@object-ui/fields/style.css';
+ *
+ * Preflight, the theme tokens and every utility the two packages share live in the
+ * components sheet and are deliberately not repeated here. Generated by
+ * packages/fields/scripts/build-css.mjs — do not edit.
+ */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer utilities {
+  .-top-1 {
+    top: calc(var(--spacing, 0.25rem) * -1);
+  }
+  .top-1 {
+    top: var(--spacing, 0.25rem);
+  }
+  .-right-1 {
+    right: calc(var(--spacing, 0.25rem) * -1);
+  }
+  .right-2\.5 {
+    right: calc(var(--spacing, 0.25rem) * 2.5);
+  }
+  .left-3 {
+    left: calc(var(--spacing, 0.25rem) * 3);
+  }
+  .z-\[5\] {
+    z-index: 5;
+  }
+  .\!inline {
+    display: inline !important;
+  }
+  .size-3 {
+    width: calc(var(--spacing, 0.25rem) * 3);
+    height: calc(var(--spacing, 0.25rem) * 3);
+  }
+  .size-9 {
+    width: calc(var(--spacing, 0.25rem) * 9);
+    height: calc(var(--spacing, 0.25rem) * 9);
+  }
+  .size-20 {
+    width: calc(var(--spacing, 0.25rem) * 20);
+    height: calc(var(--spacing, 0.25rem) * 20);
+  }
+  .h-\[85vh\] {
+    height: 85vh;
+  }
+  .h-\[270px\] {
+    height: 270px;
+  }
+  .max-h-\[85vh\] {
+    max-height: 85vh;
+  }
+  .max-h-\[min\(28rem\,60vh\)\] {
+    max-height: min(28rem, 60vh);
+  }
+  .min-h-8 {
+    min-height: calc(var(--spacing, 0.25rem) * 8);
+  }
+  .min-h-9 {
+    min-height: calc(var(--spacing, 0.25rem) * 9);
+  }
+  .min-h-\[96px\] {
+    min-height: 96px;
+  }
+  .w-1\.5 {
+    width: calc(var(--spacing, 0.25rem) * 1.5);
+  }
+  .w-1\/3 {
+    width: calc(1 / 3 * 100%);
+  }
+  .w-14 {
+    width: calc(var(--spacing, 0.25rem) * 14);
+  }
+  .w-48 {
+    width: calc(var(--spacing, 0.25rem) * 48);
+  }
+  .w-56 {
+    width: calc(var(--spacing, 0.25rem) * 56);
+  }
+  .w-\[95vw\] {
+    width: 95vw;
+  }
+  .max-w-40 {
+    max-width: calc(var(--spacing, 0.25rem) * 40);
+  }
+  .max-w-\[10rem\] {
+    max-width: 10rem;
+  }
+  .max-w-\[92vw\] {
+    max-width: 92vw;
+  }
+  .min-w-72 {
+    min-width: calc(var(--spacing, 0.25rem) * 72);
+  }
+  .min-w-\[7rem\] {
+    min-width: 7rem;
+  }
+  .min-w-\[8ch\] {
+    min-width: 8ch;
+  }
+  .min-w-\[20px\] {
+    min-width: 20px;
+  }
+  .basis-\[9rem\] {
+    flex-basis: 9rem;
+  }
+  .cursor-crosshair {
+    cursor: crosshair;
+  }
+  .cursor-move {
+    cursor: move;
+  }
+  .cursor-zoom-in {
+    cursor: zoom-in;
+  }
+  .gap-x-3 {
+    column-gap: calc(var(--spacing, 0.25rem) * 3);
+  }
+  :where(.-space-x-2 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing, 0.25rem) * -2) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing, 0.25rem) * -2) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  .gap-y-1 {
+    row-gap: var(--spacing, 0.25rem);
+  }
+  .border-\[color\:var\(--os-badge-border\)\] {
+    border-color: var(--os-badge-border);
+  }
+  .border-background {
+    border-color: var(--color-background, hsl(var(--background)));
+  }
+  .border-black\/10 {
+    border-color: color-mix(in srgb, #000 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-black, #000) 10%, transparent);
+    }
+  }
+  .border-blue-200 {
+    border-color: var(--color-blue-200, oklch(88.2% 0.059 254.128));
+  }
+  .border-border\/40 {
+    border-color: color-mix(in srgb, hsl(var(--border)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-border, hsl(var(--border))) 40%, transparent);
+    }
+  }
+  .border-gray-200 {
+    border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
+  }
+  .border-green-200 {
+    border-color: var(--color-green-200, oklch(92.5% 0.084 155.995));
+  }
+  .border-indigo-200 {
+    border-color: var(--color-indigo-200, oklch(87% 0.065 274.039));
+  }
+  .border-muted-foreground\/25 {
+    border-color: color-mix(in srgb, hsl(var(--muted-foreground)) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-muted-foreground, hsl(var(--muted-foreground))) 25%, transparent);
+    }
+  }
+  .border-muted-foreground\/30 {
+    border-color: color-mix(in srgb, hsl(var(--muted-foreground)) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-muted-foreground, hsl(var(--muted-foreground))) 30%, transparent);
+    }
+  }
+  .border-orange-200 {
+    border-color: var(--color-orange-200, oklch(90.1% 0.076 70.697));
+  }
+  .border-pink-200 {
+    border-color: var(--color-pink-200, oklch(89.9% 0.061 343.231));
+  }
+  .border-purple-200 {
+    border-color: var(--color-purple-200, oklch(90.2% 0.063 306.703));
+  }
+  .border-red-500 {
+    border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
+  }
+  .border-white {
+    border-color: var(--color-white, #fff);
+  }
+  .border-yellow-200 {
+    border-color: var(--color-yellow-200, oklch(94.5% 0.129 101.54));
+  }
+  .bg-\[\#1e8449\] {
+    background-color: #1e8449;
+  }
+  .bg-\[color\:var\(--os-badge-bg\)\] {
+    background-color: var(--os-badge-bg);
+  }
+  .bg-\[color\:var\(--os-dot-bg\)\] {
+    background-color: var(--os-dot-bg);
+  }
+  .bg-background\/60 {
+    background-color: color-mix(in srgb, hsl(var(--background)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-background, hsl(var(--background))) 60%, transparent);
+    }
+  }
+  .bg-black\/0 {
+    background-color: color-mix(in srgb, #000 0%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black, #000) 0%, transparent);
+    }
+  }
+  .bg-black\/50 {
+    background-color: color-mix(in srgb, #000 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black, #000) 50%, transparent);
+    }
+  }
+  .bg-destructive\/5 {
+    background-color: color-mix(in srgb, hsl(var(--destructive)) 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-destructive, hsl(var(--destructive))) 5%, transparent);
+    }
+  }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
+  }
+  .bg-gray-400 {
+    background-color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
+  }
+  .bg-green-50 {
+    background-color: var(--color-green-50, oklch(98.2% 0.018 155.826));
+  }
+  .bg-indigo-50 {
+    background-color: var(--color-indigo-50, oklch(96.2% 0.018 272.314));
+  }
+  .bg-indigo-500 {
+    background-color: var(--color-indigo-500, oklch(58.5% 0.233 277.117));
+  }
+  .bg-muted\/60 {
+    background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted, hsl(var(--muted))) 60%, transparent);
+    }
+  }
+  .bg-orange-50 {
+    background-color: var(--color-orange-50, oklch(98% 0.016 73.684));
+  }
+  .bg-orange-500 {
+    background-color: var(--color-orange-500, oklch(70.5% 0.213 47.604));
+  }
+  .bg-pink-50 {
+    background-color: var(--color-pink-50, oklch(97.1% 0.014 343.198));
+  }
+  .bg-pink-500 {
+    background-color: var(--color-pink-500, oklch(65.6% 0.241 354.308));
+  }
+  .bg-primary\/20 {
+    background-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary, hsl(var(--primary))) 20%, transparent);
+    }
+  }
+  .bg-purple-50 {
+    background-color: var(--color-purple-50, oklch(97.7% 0.014 308.299));
+  }
+  .bg-purple-500 {
+    background-color: var(--color-purple-500, oklch(62.7% 0.265 303.9));
+  }
+  .bg-red-500 {
+    background-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
+  }
+  .bg-white {
+    background-color: var(--color-white, #fff);
+  }
+  .bg-yellow-50 {
+    background-color: var(--color-yellow-50, oklch(98.7% 0.026 102.212));
+  }
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
+  }
+  .px-px {
+    padding-inline: 1px;
+  }
+  .py-8 {
+    padding-block: calc(var(--spacing, 0.25rem) * 8);
+  }
+  .pr-1\.5 {
+    padding-right: calc(var(--spacing, 0.25rem) * 1.5);
+  }
+  .pl-0\.5 {
+    padding-left: calc(var(--spacing, 0.25rem) * 0.5);
+  }
+  .pl-9 {
+    padding-left: calc(var(--spacing, 0.25rem) * 9);
+  }
+  .text-\[color\:var\(--os-badge-fg\)\] {
+    color: var(--os-badge-fg);
+  }
+  .text-blue-600 {
+    color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
+  }
+  .text-blue-700 {
+    color: var(--color-blue-700, oklch(48.8% 0.243 264.376));
+  }
+  .text-gray-500 {
+    color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
+  }
+  .text-gray-600 {
+    color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
+  }
+  .text-gray-700 {
+    color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
+  }
+  .text-green-700 {
+    color: var(--color-green-700, oklch(52.7% 0.154 150.069));
+  }
+  .text-indigo-700 {
+    color: var(--color-indigo-700, oklch(45.7% 0.24 277.023));
+  }
+  .text-inherit {
+    color: inherit;
+  }
+  .text-orange-700 {
+    color: var(--color-orange-700, oklch(55.3% 0.195 38.402));
+  }
+  .text-pink-700 {
+    color: var(--color-pink-700, oklch(52.5% 0.223 3.958));
+  }
+  .text-purple-700 {
+    color: var(--color-purple-700, oklch(49.6% 0.265 301.924));
+  }
+  .text-red-600 {
+    color: var(--color-red-600, oklch(57.7% 0.245 27.325));
+  }
+  .text-yellow-800 {
+    color: var(--color-yellow-800, oklch(47.6% 0.114 61.907));
+  }
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
+  .opacity-30 {
+    opacity: 30%;
+  }
+  .opacity-40 {
+    opacity: 40%;
+  }
+  .ring-border\/60 {
+    --tw-ring-color: color-mix(in srgb, hsl(var(--border)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-border, hsl(var(--border))) 60%, transparent);
+    }
+  }
+  .ring-destructive\/50 {
+    --tw-ring-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-destructive, hsl(var(--destructive))) 50%, transparent);
+    }
+  }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
+  .duration-150 {
+    animation-duration: 150ms;
+  }
+  @media (hover: hover) {
+    .group-hover\:scale-105:is(:where(.group):hover *) {
+      --tw-scale-x: 105%;
+      --tw-scale-y: 105%;
+      --tw-scale-z: 105%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+    .group-hover\:bg-black\/10:is(:where(.group):hover *) {
+      background-color: color-mix(in srgb, #000 10%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\:bg-black\/10:is(:where(.group):hover *) {
+        background-color: color-mix(in oklab, var(--color-black, #000) 10%, transparent);
+      }
+    }
+    .group-hover\/email\:opacity-100:is(:where(.group\/email):hover *) {
+      opacity: 100%;
+    }
+    .group-hover\/phone\:opacity-100:is(:where(.group\/phone):hover *) {
+      opacity: 100%;
+    }
+  }
+  .last\:border-r-0:last-child {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+  }
+  @media (hover: hover) {
+    .hover\:z-10:hover {
+      z-index: 10;
+    }
+    .hover\:scale-105:hover {
+      --tw-scale-x: 105%;
+      --tw-scale-y: 105%;
+      --tw-scale-z: 105%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+    .hover\:scale-110:hover {
+      --tw-scale-x: 110%;
+      --tw-scale-y: 110%;
+      --tw-scale-z: 110%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+    .hover\:border-primary\/50:hover {
+      border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-primary\/50:hover {
+        border-color: color-mix(in oklab, var(--color-primary, hsl(var(--primary))) 50%, transparent);
+      }
+    }
+    .hover\:bg-accent\/30:hover {
+      background-color: color-mix(in srgb, hsl(var(--accent)) 30%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-accent\/30:hover {
+        background-color: color-mix(in oklab, var(--color-accent, hsl(var(--accent))) 30%, transparent);
+      }
+    }
+    .hover\:bg-black\/70:hover {
+      background-color: color-mix(in srgb, #000 70%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-black\/70:hover {
+        background-color: color-mix(in oklab, var(--color-black, #000) 70%, transparent);
+      }
+    }
+    .hover\:bg-muted\/80:hover {
+      background-color: color-mix(in srgb, hsl(var(--muted)) 80%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-muted\/80:hover {
+        background-color: color-mix(in oklab, var(--color-muted, hsl(var(--muted))) 80%, transparent);
+      }
+    }
+    .hover\:bg-primary\/10:hover {
+      background-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/10:hover {
+        background-color: color-mix(in oklab, var(--color-primary, hsl(var(--primary))) 10%, transparent);
+      }
+    }
+    .hover\:bg-primary\/50:hover {
+      background-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/50:hover {
+        background-color: color-mix(in oklab, var(--color-primary, hsl(var(--primary))) 50%, transparent);
+      }
+    }
+    .hover\:fill-yellow-500:hover {
+      fill: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
+    }
+    .hover\:text-blue-800:hover {
+      color: var(--color-blue-800, oklch(42.4% 0.199 265.638));
+    }
+    .hover\:text-yellow-400:hover {
+      color: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
+    }
+    .hover\:text-yellow-500:hover {
+      color: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
+    }
+  }
+  .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);
+    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-ring\/60:focus {
+    --tw-ring-color: color-mix(in srgb, hsl(var(--ring)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-ring, hsl(var(--ring))) 60%, transparent);
+    }
+  }
+  .focus-visible\:ring-red-500:focus-visible {
+    --tw-ring-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
+  }
+  .focus-visible\:ring-ring\/60:focus-visible {
+    --tw-ring-color: color-mix(in srgb, hsl(var(--ring)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-ring, hsl(var(--ring))) 60%, transparent);
+    }
+  }
+  @media (width >= 40rem) {
+    .sm\:max-w-4xl {
+      max-width: var(--container-4xl, 56rem);
+    }
+    .sm\:justify-between {
+      justify-content: space-between;
+    }
+  }
+  @media (width >= 64rem) {
+    .lg\:max-w-5xl {
+      max-width: var(--container-5xl, 64rem);
+    }
+  }
+  .dark\:border-\[color\:var\(--os-badge-border-dark\)\]:where(.dark, .dark *) {
+    border-color: var(--os-badge-border-dark);
+  }
+  .dark\:border-blue-900\/60:where(.dark, .dark *) {
+    border-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-blue-900, oklch(37.9% 0.146 265.522)) 60%, transparent);
+    }
+  }
+  .dark\:border-gray-700\/60:where(.dark, .dark *) {
+    border-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-gray-700, oklch(37.3% 0.034 259.733)) 60%, transparent);
+    }
+  }
+  .dark\:border-green-900\/60:where(.dark, .dark *) {
+    border-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-green-900, oklch(39.3% 0.095 152.535)) 60%, transparent);
+    }
+  }
+  .dark\:border-indigo-900\/60:where(.dark, .dark *) {
+    border-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-indigo-900, oklch(35.9% 0.144 278.697)) 60%, transparent);
+    }
+  }
+  .dark\:border-orange-900\/60:where(.dark, .dark *) {
+    border-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-orange-900, oklch(40.8% 0.123 38.172)) 60%, transparent);
+    }
+  }
+  .dark\:border-pink-900\/60:where(.dark, .dark *) {
+    border-color: color-mix(in srgb, oklch(40.8% 0.153 2.432) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-pink-900, oklch(40.8% 0.153 2.432)) 60%, transparent);
+    }
+  }
+  .dark\:border-purple-900\/60:where(.dark, .dark *) {
+    border-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-purple-900, oklch(38.1% 0.176 304.987)) 60%, transparent);
+    }
+  }
+  .dark\:border-red-900\/60:where(.dark, .dark *) {
+    border-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-red-900, oklch(39.6% 0.141 25.723)) 60%, transparent);
+    }
+  }
+  .dark\:border-yellow-900\/60:where(.dark, .dark *) {
+    border-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-yellow-900, oklch(42.1% 0.095 57.708)) 60%, transparent);
+    }
+  }
+  .dark\:bg-\[color\:var\(--os-badge-bg-dark\)\]:where(.dark, .dark *) {
+    background-color: var(--os-badge-bg-dark);
+  }
+  .dark\:bg-\[color\:var\(--os-dot-bg-dark\)\]:where(.dark, .dark *) {
+    background-color: var(--os-dot-bg-dark);
+  }
+  .dark\:bg-blue-950\/40:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-950, oklch(28.2% 0.091 267.935)) 40%, transparent);
+    }
+  }
+  .dark\:bg-gray-500:where(.dark, .dark *) {
+    background-color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
+  }
+  .dark\:bg-gray-800\/50:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800, oklch(27.8% 0.033 256.848)) 50%, transparent);
+    }
+  }
+  .dark\:bg-green-950\/40:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-950, oklch(26.6% 0.065 152.934)) 40%, transparent);
+    }
+  }
+  .dark\:bg-indigo-950\/40:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(25.7% 0.09 281.288) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-indigo-950, oklch(25.7% 0.09 281.288)) 40%, transparent);
+    }
+  }
+  .dark\:bg-orange-950\/40:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(26.6% 0.079 36.259) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-orange-950, oklch(26.6% 0.079 36.259)) 40%, transparent);
+    }
+  }
+  .dark\:bg-pink-950\/40:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(28.4% 0.109 3.907) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-pink-950, oklch(28.4% 0.109 3.907)) 40%, transparent);
+    }
+  }
+  .dark\:bg-purple-950\/40:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(29.1% 0.149 302.717) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-purple-950, oklch(29.1% 0.149 302.717)) 40%, transparent);
+    }
+  }
+  .dark\:bg-red-950\/40:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-950, oklch(25.8% 0.092 26.042)) 40%, transparent);
+    }
+  }
+  .dark\:bg-yellow-950\/40:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-950, oklch(28.6% 0.066 53.813)) 40%, transparent);
+    }
+  }
+  .dark\:text-\[color\:var\(--os-badge-fg-dark\)\]:where(.dark, .dark *) {
+    color: var(--os-badge-fg-dark);
+  }
+  .dark\:text-blue-300:where(.dark, .dark *) {
+    color: var(--color-blue-300, oklch(80.9% 0.105 251.813));
+  }
+  .dark\:text-gray-200:where(.dark, .dark *) {
+    color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
+  }
+  .dark\:text-green-300:where(.dark, .dark *) {
+    color: var(--color-green-300, oklch(87.1% 0.15 154.449));
+  }
+  .dark\:text-indigo-300:where(.dark, .dark *) {
+    color: var(--color-indigo-300, oklch(78.5% 0.115 274.713));
+  }
+  .dark\:text-orange-300:where(.dark, .dark *) {
+    color: var(--color-orange-300, oklch(83.7% 0.128 66.29));
+  }
+  .dark\:text-pink-300:where(.dark, .dark *) {
+    color: var(--color-pink-300, oklch(82.3% 0.12 346.018));
+  }
+  .dark\:text-purple-300:where(.dark, .dark *) {
+    color: var(--color-purple-300, oklch(82.7% 0.119 306.383));
+  }
+  .dark\:text-red-300:where(.dark, .dark *) {
+    color: var(--color-red-300, oklch(80.8% 0.114 19.571));
+  }
+  .dark\:text-yellow-300:where(.dark, .dark *) {
+    color: var(--color-yellow-300, oklch(90.5% 0.182 98.111));
+  }
+}
+