@jbpark/live-editor 4.6.0 → 5.0.0

package/dist/style.css

@@ -595,452 +595,234 @@
     }
   }
 
-  @layer base {
-    [data-ui-root] {
-      isolation: isolate;
+  @layer utilities {
+    .\@container\/field-group {
+      container: field-group / inline-size;
     }
 
-    * {
-      border-color: var(--border);
-      outline-color: var(--ring);
-
-      @supports (color: color-mix(in lab, red, red)) {
-        outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
-      }
+    .\@container\/form {
+      container: form / inline-size;
     }
 
-    :where([data-slot], [data-slot] *) {
-      box-sizing: border-box;
-      border-style: solid;
-      border-width: 0;
+    .pointer-events-auto {
+      pointer-events: auto;
     }
 
-    :where([data-slot], [data-slot] *):where(button, input, select, textarea) {
-      appearance: none;
-      color: inherit;
-      font: inherit;
-      background-color: #0000;
+    .pointer-events-none {
+      pointer-events: none;
     }
 
-    :where([data-slot], [data-slot] *):where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dd, blockquote, figure, pre) {
-      margin: 0;
+    .collapse {
+      visibility: collapse;
     }
-  }
 
-  @layer components {
-    :is([data-slot="button"], [data-slot="tag"])[data-color="blue"] {
-      --preset-color: var(--color-blue-500);
+    .invisible {
+      visibility: hidden;
     }
 
-    :is([data-slot="button"], [data-slot="tag"])[data-color="purple"] {
-      --preset-color: var(--color-purple-500);
+    .visible {
+      visibility: visible;
     }
 
-    :is([data-slot="button"], [data-slot="tag"])[data-color="cyan"] {
-      --preset-color: var(--color-cyan-500);
+    .sr-only {
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border-width: 0;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      position: absolute;
+      overflow: hidden;
     }
 
-    :is([data-slot="button"], [data-slot="tag"])[data-color="green"] {
-      --preset-color: var(--color-green-500);
+    .\!absolute {
+      position: absolute !important;
     }
 
-    :is([data-slot="button"], [data-slot="tag"])[data-color="fuchsia"] {
-      --preset-color: var(--color-fuchsia-500);
+    .absolute {
+      position: absolute;
     }
 
-    :is([data-slot="button"], [data-slot="tag"])[data-color="pink"] {
-      --preset-color: var(--color-pink-500);
+    .fixed {
+      position: fixed;
     }
 
-    :is([data-slot="button"], [data-slot="tag"])[data-color="red"] {
-      --preset-color: var(--color-red-500);
+    .relative {
+      position: relative;
     }
 
-    :is([data-slot="button"], [data-slot="tag"])[data-color="orange"] {
-      --preset-color: var(--color-orange-500);
+    .static {
+      position: static;
     }
 
-    :is([data-slot="button"], [data-slot="tag"])[data-color="yellow"] {
-      --preset-color: var(--color-yellow-500);
+    .sticky {
+      position: sticky;
     }
 
-    :is([data-slot="button"], [data-slot="tag"])[data-color="indigo"] {
-      --preset-color: var(--color-indigo-500);
+    .inset-0 {
+      inset: 0;
     }
 
-    :is([data-slot="button"], [data-slot="tag"])[data-color="lime"] {
-      --preset-color: var(--color-lime-500);
+    .inset-x-0 {
+      inset-inline: 0;
     }
 
-    :is([data-slot="button"], [data-slot="tag"])[data-color="amber"] {
-      --preset-color: var(--color-amber-500);
+    .start-\[calc\(50\%-0\.5px\)\] {
+      inset-inline-start: calc(50% - .5px);
     }
 
-    [data-slot="button"][data-color] {
-      --btn-bg: var(--preset-color);
-      --btn-fg: white;
-      --btn-border: var(--btn-bg);
-      --btn-bg-hover: var(--btn-bg);
-
-      @supports (color: color-mix(in lab, red, red)) {
-        --btn-bg-hover: color-mix(in oklch, var(--btn-bg), black 12%);
-      }
+    .end-0 {
+      inset-inline-end: calc(var(--spacing) * 0);
+    }
 
-      --btn-bg-active: var(--btn-bg);
+    .end-1 {
+      inset-inline-end: calc(var(--spacing) * 1);
+    }
 
-      @supports (color: color-mix(in lab, red, red)) {
-        --btn-bg-active: color-mix(in oklch, var(--btn-bg), black 22%);
-      }
+    .end-2 {
+      inset-inline-end: calc(var(--spacing) * 2);
     }
 
-    [data-slot="button"][data-color="yellow"], [data-slot="button"][data-color="lime"], [data-slot="button"][data-color="amber"] {
-      --btn-fg: black;
+    .top-0 {
+      top: 0;
     }
 
-    [data-slot="button"][data-color="default"] {
-      --btn-bg: var(--muted);
-      --btn-border: var(--muted-foreground);
+    .top-1\/2 {
+      top: 50%;
     }
 
-    [data-slot="button"][data-color="primary"] {
-      --btn-bg: var(--primary);
-      --btn-fg: var(--primary-foreground);
+    .top-4 {
+      top: calc(var(--spacing) * 4);
     }
 
-    [data-slot="button"][data-color="danger"] {
-      --btn-bg: var(--destructive);
+    .top-5 {
+      top: calc(var(--spacing) * 5);
     }
 
-    [data-slot="tag"][data-color] {
-      --tag-bg: var(--preset-color);
-      --tag-fg: var(--tag-bg);
-      --tag-tint: var(--tag-bg);
+    .top-\[50\%\] {
+      top: 50%;
+    }
 
-      @supports (color: color-mix(in lab, red, red)) {
-        --tag-tint: color-mix(in oklab, var(--tag-bg), transparent 90%);
-      }
+    .top-full {
+      top: 100%;
     }
 
-    [data-slot="tag"][data-color="default"] {
-      --tag-bg: var(--border);
-      --tag-tint: var(--muted);
-      --tag-fg: var(--muted-foreground);
+    .right-2 {
+      right: calc(var(--spacing) * 2);
     }
 
-    [data-slot="tag"][data-color="default"][data-variant="outlined"] {
-      --tag-fg: var(--foreground);
+    .right-4 {
+      right: calc(var(--spacing) * 4);
     }
 
-    [data-slot="tag"][data-color="primary"] {
-      --tag-bg: var(--primary);
+    .right-5 {
+      right: calc(var(--spacing) * 5);
     }
 
-    [data-slot="tag"][data-color="danger"] {
-      --tag-bg: var(--destructive);
+    .-bottom-2 {
+      bottom: calc(var(--spacing) * -2);
     }
 
-    [data-slot="tag"][data-color="success"] {
-      --tag-bg: var(--color-green-500);
-      --tag-fg: var(--color-green-600);
+    .-bottom-6 {
+      bottom: calc(var(--spacing) * -6);
     }
 
-    [data-slot="tag"][data-color="warning"] {
-      --tag-bg: var(--color-yellow-500);
-      --tag-fg: var(--color-yellow-600);
+    .bottom-0 {
+      bottom: 0;
     }
 
-    :is(.dark, [data-theme="dark"]) [data-slot="tag"][data-color="success"] {
-      --tag-fg: var(--color-green-400);
+    .bottom-5 {
+      bottom: calc(var(--spacing) * 5);
     }
 
-    :is(.dark, [data-theme="dark"]) [data-slot="tag"][data-color="warning"] {
-      --tag-fg: var(--color-yellow-400);
+    .left-0 {
+      left: 0;
     }
 
-    [data-slot="alert"] {
-      color: var(--foreground);
-      border-color: var(--alert-accent);
+    .left-0\.5 {
+      left: calc(var(--spacing) * .5);
+    }
 
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklch, var(--alert-accent), transparent 55%);
-      }
+    .left-\[50\%\] {
+      left: 50%;
+    }
 
-      background-color: var(--background);
+    .left-full {
+      left: 100%;
     }
 
-    [data-slot="alert"][data-variant="filled"] {
-      background-color: var(--alert-accent);
+    .isolate {
+      isolation: isolate;
+    }
 
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab,
-      var(--alert-accent) 10%,
-      var(--background));
-      }
+    .z-1 {
+      z-index: 1;
     }
 
-    [data-slot="alert"] > [aria-hidden="true"] {
-      color: var(--alert-accent);
+    .z-10 {
+      z-index: 10;
     }
 
-    [data-slot="alert"][data-status="info"] {
-      --alert-accent: var(--color-blue-600);
+    .z-50 {
+      z-index: 50;
     }
 
-    [data-slot="alert"][data-status="success"] {
-      --alert-accent: var(--color-green-600);
+    .z-1000 {
+      z-index: 1000;
     }
 
-    [data-slot="alert"][data-status="warning"] {
-      --alert-accent: var(--color-yellow-700);
+    .z-10000 {
+      z-index: 10000;
     }
 
-    [data-slot="alert"][data-status="error"] {
-      --alert-accent: var(--destructive);
+    .order-last {
+      order: 9999;
     }
 
-    :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="info"] {
-      --alert-accent: var(--color-blue-400);
+    .col-span-2 {
+      grid-column: span 2 / span 2;
     }
 
-    :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="success"] {
-      --alert-accent: var(--color-green-400);
+    .col-span-3 {
+      grid-column: span 3 / span 3;
     }
 
-    :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="warning"] {
-      --alert-accent: var(--color-yellow-400);
+    .col-start-1 {
+      grid-column-start: 1;
     }
 
-    :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="error"] {
-      --alert-accent: var(--color-red-400);
+    .row-start-1 {
+      grid-row-start: 1;
     }
 
-    [data-slot="col"] {
-      flex-basis: calc(var(--col-span-xs) / 24 * 100%);
-      max-width: calc(var(--col-span-xs) / 24 * 100%);
-      margin-left: calc(var(--col-offset-xs, 0) / 24 * 100%);
+    .row-start-2 {
+      grid-row-start: 2;
     }
 
-    @media (width >= 40rem) {
-      [data-slot="col"] {
-        flex-basis: calc(var(--col-span-sm) / 24 * 100%);
-        max-width: calc(var(--col-span-sm) / 24 * 100%);
-        margin-left: calc(var(--col-offset-sm, 0) / 24 * 100%);
+    .\!container {
+      width: 100% !important;
+
+      @media (width >= 40rem) {
+        max-width: 40rem !important;
       }
-    }
 
-    @media (width >= 48rem) {
-      [data-slot="col"] {
-        flex-basis: calc(var(--col-span-md) / 24 * 100%);
-        max-width: calc(var(--col-span-md) / 24 * 100%);
-        margin-left: calc(var(--col-offset-md, 0) / 24 * 100%);
+      @media (width >= 48rem) {
+        max-width: 48rem !important;
       }
-    }
 
-    @media (width >= 64rem) {
-      [data-slot="col"] {
-        flex-basis: calc(var(--col-span-lg) / 24 * 100%);
-        max-width: calc(var(--col-span-lg) / 24 * 100%);
-        margin-left: calc(var(--col-offset-lg, 0) / 24 * 100%);
+      @media (width >= 64rem) {
+        max-width: 64rem !important;
       }
-    }
 
-    @media (width >= 80rem) {
-      [data-slot="col"] {
-        flex-basis: calc(var(--col-span-xl) / 24 * 100%);
-        max-width: calc(var(--col-span-xl) / 24 * 100%);
-        margin-left: calc(var(--col-offset-xl, 0) / 24 * 100%);
+      @media (width >= 80rem) {
+        max-width: 80rem !important;
       }
-    }
 
-    @media (width >= 96rem) {
-      [data-slot="col"] {
-        flex-basis: calc(var(--col-span-2xl) / 24 * 100%);
-        max-width: calc(var(--col-span-2xl) / 24 * 100%);
-        margin-left: calc(var(--col-offset-2xl, 0) / 24 * 100%);
+      @media (width >= 96rem) {
+        max-width: 96rem !important;
       }
     }
-  }
-
-  @layer utilities {
-    .\@container\/field-group {
-      container: field-group / inline-size;
-    }
-
-    .pointer-events-auto {
-      pointer-events: auto;
-    }
-
-    .pointer-events-none {
-      pointer-events: none;
-    }
-
-    .collapse {
-      visibility: collapse;
-    }
-
-    .invisible {
-      visibility: hidden;
-    }
-
-    .visible {
-      visibility: visible;
-    }
-
-    .sr-only {
-      clip-path: inset(50%);
-      white-space: nowrap;
-      border-width: 0;
-      width: 1px;
-      height: 1px;
-      margin: -1px;
-      padding: 0;
-      position: absolute;
-      overflow: hidden;
-    }
-
-    .\!absolute {
-      position: absolute !important;
-    }
-
-    .absolute {
-      position: absolute;
-    }
-
-    .fixed {
-      position: fixed;
-    }
-
-    .relative {
-      position: relative;
-    }
-
-    .static {
-      position: static;
-    }
-
-    .sticky {
-      position: sticky;
-    }
-
-    .inset-0 {
-      inset: 0;
-    }
-
-    .inset-x-0 {
-      inset-inline: 0;
-    }
-
-    .end-0 {
-      inset-inline-end: calc(var(--spacing) * 0);
-    }
-
-    .end-2 {
-      inset-inline-end: calc(var(--spacing) * 2);
-    }
-
-    .top-0 {
-      top: 0;
-    }
-
-    .top-1\/2 {
-      top: 50%;
-    }
-
-    .top-4 {
-      top: calc(var(--spacing) * 4);
-    }
-
-    .top-\[50\%\] {
-      top: 50%;
-    }
-
-    .top-full {
-      top: 100%;
-    }
-
-    .right-2 {
-      right: calc(var(--spacing) * 2);
-    }
-
-    .right-4 {
-      right: calc(var(--spacing) * 4);
-    }
-
-    .right-5 {
-      right: calc(var(--spacing) * 5);
-    }
-
-    .-bottom-2 {
-      bottom: calc(var(--spacing) * -2);
-    }
-
-    .bottom-0 {
-      bottom: 0;
-    }
-
-    .bottom-5 {
-      bottom: calc(var(--spacing) * 5);
-    }
-
-    .left-0 {
-      left: 0;
-    }
-
-    .left-0\.5 {
-      left: calc(var(--spacing) * .5);
-    }
-
-    .left-\[50\%\] {
-      left: 50%;
-    }
-
-    .left-full {
-      left: 100%;
-    }
-
-    .isolate {
-      isolation: isolate;
-    }
-
-    .z-1 {
-      z-index: 1;
-    }
-
-    .z-10 {
-      z-index: 10;
-    }
-
-    .z-50 {
-      z-index: 50;
-    }
-
-    .z-1000 {
-      z-index: 1000;
-    }
-
-    .z-10000 {
-      z-index: 10000;
-    }
-
-    .order-last {
-      order: 9999;
-    }
-
-    .col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .row-start-1 {
-      grid-row-start: 1;
-    }
 
     .container {
       width: 100%;
@@ -1098,6 +880,10 @@
       margin-block: calc(var(--spacing) * 2);
     }
 
+    .my-4 {
+      margin-block: calc(var(--spacing) * 4);
+    }
+
     .ms-2 {
       margin-inline-start: calc(var(--spacing) * 2);
     }
@@ -1106,6 +892,14 @@
       margin-inline-start: calc(var(--spacing) * 3.5);
     }
 
+    .ms-4 {
+      margin-inline-start: calc(var(--spacing) * 4);
+    }
+
+    .ms-6 {
+      margin-inline-start: calc(var(--spacing) * 6);
+    }
+
     .me-2 {
       margin-inline-end: calc(var(--spacing) * 2);
     }
@@ -1170,6 +964,10 @@
       margin-bottom: -1px;
     }
 
+    .mb-1 {
+      margin-bottom: var(--spacing);
+    }
+
     .mb-1\.5 {
       margin-bottom: calc(var(--spacing) * 1.5);
     }
@@ -1372,6 +1170,10 @@
       height: calc(var(--spacing) * 2);
     }
 
+    .h-2\.5 {
+      height: calc(var(--spacing) * 2.5);
+    }
+
     .h-4 {
       height: calc(var(--spacing) * 4);
     }
@@ -1428,6 +1230,10 @@
       height: calc(var(--spacing) * 50);
     }
 
+    .h-64 {
+      height: calc(var(--spacing) * 64);
+    }
+
     .h-\[--cell-size\] {
       height: --cell-size;
     }
@@ -1456,6 +1262,18 @@
       max-height: calc(var(--spacing) * 60);
     }
 
+    .max-h-\[calc\(100dvh-2rem\)\] {
+      max-height: calc(100dvh - 2rem);
+    }
+
+    .max-h-\[min\(20rem\,var\(--available-height\)\)\] {
+      max-height: min(20rem, var(--available-height));
+    }
+
+    .max-h-\[var\(--available-height\)\] {
+      max-height: var(--available-height);
+    }
+
     .min-h-0 {
       min-height: 0;
     }
@@ -1492,10 +1310,18 @@
       min-height: 100vh;
     }
 
+    .w-\(--anchor-width\) {
+      width: var(--anchor-width);
+    }
+
     .w-\(--cell-size\) {
       width: var(--cell-size);
     }
 
+    .w-2\.5 {
+      width: calc(var(--spacing) * 2.5);
+    }
+
     .w-3 {
       width: calc(var(--spacing) * 3);
     }
@@ -1504,6 +1330,22 @@
       width: calc(var(--spacing) * 4);
     }
 
+    .w-5 {
+      width: calc(var(--spacing) * 5);
+    }
+
+    .w-8 {
+      width: calc(var(--spacing) * 8);
+    }
+
+    .w-9 {
+      width: calc(var(--spacing) * 9);
+    }
+
+    .w-10 {
+      width: calc(var(--spacing) * 10);
+    }
+
     .w-10\! {
       width: calc(var(--spacing) * 10) !important;
     }
@@ -1532,6 +1374,10 @@
       width: calc(var(--spacing) * 20);
     }
 
+    .w-24 {
+      width: calc(var(--spacing) * 24);
+    }
+
     .w-25 {
       width: calc(var(--spacing) * 25);
     }
@@ -1580,6 +1426,10 @@
       width: 1px;
     }
 
+    .max-w-\(--available-width\) {
+      max-width: var(--available-width);
+    }
+
     .max-w-2xl {
       max-width: var(--container-2xl);
     }
@@ -1628,6 +1478,14 @@
       max-width: calc(100% - 2rem);
     }
 
+    .max-w-\[calc\(100vw-2rem\)\] {
+      max-width: calc(100vw - 2rem);
+    }
+
+    .max-w-\[var\(--available-width\)\] {
+      max-width: var(--available-width);
+    }
+
     .max-w-full {
       max-width: 100%;
     }
@@ -1692,6 +1550,10 @@
       min-width: calc(var(--spacing) * 24);
     }
 
+    .min-w-40 {
+      min-width: calc(var(--spacing) * 40);
+    }
+
     .min-w-80 {
       min-width: calc(var(--spacing) * 80);
     }
@@ -1712,6 +1574,10 @@
       flex: 1;
     }
 
+    .flex-\[0\.1\] {
+      flex: .1;
+    }
+
     .flex-none {
       flex: none;
     }
@@ -1804,6 +1670,10 @@
       rotate: 180deg;
     }
 
+    .transform {
+      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+    }
+
     .animate-none {
       animation: none;
     }
@@ -1856,10 +1726,22 @@
       list-style-type: none;
     }
 
+    .grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
     .grid-cols-5 {
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
 
+    .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    }
+
+    .grid-cols-\[repeat\(var\(--descriptions-columns-base\)\,minmax\(0\,1fr\)\)\] {
+      grid-template-columns: repeat(var(--descriptions-columns-base),minmax(0,1fr));
+    }
+
     .flex-col {
       flex-direction: column;
     }
@@ -1888,6 +1770,10 @@
       place-content: center;
     }
 
+    .content-start {
+      align-content: flex-start;
+    }
+
     .items-baseline {
       align-items: baseline;
     }
@@ -1988,18 +1874,40 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
 
+    :where(.space-y-3 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+
     .gap-x-2 {
       column-gap: calc(var(--spacing) * 2);
     }
 
+    .gap-x-6 {
+      column-gap: calc(var(--spacing) * 6);
+    }
+
     .gap-y-0 {
       row-gap: 0;
     }
 
+    .gap-y-4 {
+      row-gap: calc(var(--spacing) * 4);
+    }
+
     .gap-y-5 {
       row-gap: calc(var(--spacing) * 5);
     }
 
+    .self-start {
+      align-self: flex-start;
+    }
+
+    .self-stretch {
+      align-self: stretch;
+    }
+
     .truncate {
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -2042,6 +1950,10 @@
       border-radius: 4px;
     }
 
+    .rounded-\[inherit\] {
+      border-radius: inherit;
+    }
+
     .rounded-full {
       border-radius: 3.40282e38px;
     }
@@ -2144,11 +2056,31 @@
       border-width: 0;
     }
 
+    .border-2 {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+
+    .border-s {
+      border-inline-start-style: var(--tw-border-style);
+      border-inline-start-width: 1px;
+    }
+
+    .border-s-2 {
+      border-inline-start-style: var(--tw-border-style);
+      border-inline-start-width: 2px;
+    }
+
     .border-e {
       border-inline-end-style: var(--tw-border-style);
       border-inline-end-width: 1px;
     }
 
+    .border-t {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+    }
+
     .border-r-2 {
       border-right-style: var(--tw-border-style);
       border-right-width: 2px;
@@ -2169,11 +2101,21 @@
       border-style: dashed;
     }
 
+    .border-dotted {
+      --tw-border-style: dotted;
+      border-style: dotted;
+    }
+
     .border-none {
       --tw-border-style: none;
       border-style: none;
     }
 
+    .border-solid {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+
     .border-\(--btn-border\) {
       border-color: var(--btn-border);
     }
@@ -2242,6 +2184,14 @@
       background-color: var(--background);
     }
 
+    .bg-black\/40 {
+      background-color: #0006;
+
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+      }
+    }
+
     .bg-black\/50 {
       background-color: #00000080;
 
@@ -2470,6 +2420,10 @@
       padding-block: calc(var(--spacing) * 4);
     }
 
+    .py-6 {
+      padding-block: calc(var(--spacing) * 6);
+    }
+
     .py-12 {
       padding-block: calc(var(--spacing) * 12);
     }
@@ -2482,14 +2436,26 @@
       padding-inline-start: calc(var(--spacing) * 2);
     }
 
+    .ps-3 {
+      padding-inline-start: calc(var(--spacing) * 3);
+    }
+
     .pe-1 {
       padding-inline-end: var(--spacing);
     }
 
+    .pe-3 {
+      padding-inline-end: calc(var(--spacing) * 3);
+    }
+
     .pe-8 {
       padding-inline-end: calc(var(--spacing) * 8);
     }
 
+    .pe-10 {
+      padding-inline-end: calc(var(--spacing) * 10);
+    }
+
     .pt-0 {
       padding-top: 0;
     }
@@ -2510,10 +2476,22 @@
       padding-right: calc(var(--spacing) * 8);
     }
 
+    .pb-0 {
+      padding-bottom: 0;
+    }
+
+    .pb-3 {
+      padding-bottom: calc(var(--spacing) * 3);
+    }
+
     .pb-4 {
       padding-bottom: calc(var(--spacing) * 4);
     }
 
+    .pb-6 {
+      padding-bottom: calc(var(--spacing) * 6);
+    }
+
     .pl-0 {
       padding-left: 0;
     }
@@ -2602,6 +2580,11 @@
       font-size: 10px;
     }
 
+    .leading-5 {
+      --tw-leading: calc(var(--spacing) * 5);
+      line-height: calc(var(--spacing) * 5);
+    }
+
     .leading-5\.75 {
       --tw-leading: calc(var(--spacing) * 5.75);
       line-height: calc(var(--spacing) * 5.75);
@@ -2642,6 +2625,14 @@
       font-weight: var(--font-weight-semibold);
     }
 
+    .\[overflow-wrap\:anywhere\] {
+      overflow-wrap: anywhere;
+    }
+
+    .break-words {
+      overflow-wrap: break-word;
+    }
+
     .break-all {
       word-break: break-all;
     }
@@ -2887,6 +2878,12 @@
       transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
 
+    .transition-\[opacity\,transform\,scale\] {
+      transition-property: opacity, transform, scale;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
     .transition-\[opacity\,transform\] {
       transition-property: opacity, transform;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2975,6 +2972,10 @@
       --cell-size: 2rem;
     }
 
+    .\[--cell-size\:3\.5rem\] {
+      --cell-size: 3.5rem;
+    }
+
     @media (hover: hover) {
       .group-hover\:border-current:is(:where(.group):hover *) {
         border-color: currentColor;
@@ -3139,6 +3140,10 @@
       }
     }
 
+    .empty\:p-0:empty {
+      padding: 0;
+    }
+
     .focus-within\:border-ring:focus-within {
       border-color: var(--ring);
     }
@@ -3165,10 +3170,16 @@
         background-color: var(--btn-bg-hover);
       }
 
-      .hover\:bg-accent:hover {
+      .hover\:bg-accent:hover, .hover\:bg-accent\/50:hover {
         background-color: var(--accent);
       }
 
+      @supports (color: color-mix(in lab, red, red)) {
+        .hover\:bg-accent\/50:hover {
+          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+        }
+      }
+
       .hover\:bg-background\/70:hover {
         background-color: var(--background);
       }
@@ -3209,6 +3220,16 @@
         }
       }
 
+      .hover\:bg-muted-foreground\/50:hover {
+        background-color: var(--muted-foreground);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .hover\:bg-muted-foreground\/50:hover {
+          background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
+        }
+      }
+
       .hover\:bg-muted\/50:hover {
         background-color: var(--muted);
       }
@@ -3336,6 +3357,11 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
+    .focus-visible\:ring-2:focus-visible {
+      --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);
+    }
+
     .focus-visible\:ring-\[3px\]:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
@@ -3385,6 +3411,10 @@
       outline-color: var(--ring);
     }
 
+    .focus-visible\:ring-inset:focus-visible {
+      --tw-ring-inset: inset;
+    }
+
     .active\:bg-\(--btn-bg-active\):active {
       background-color: var(--btn-bg-active);
     }
@@ -3478,6 +3508,10 @@
       padding-inline: calc(var(--spacing) * 4);
     }
 
+    .aria-disabled\:pointer-events-none[aria-disabled="true"] {
+      pointer-events: none;
+    }
+
     .aria-disabled\:opacity-50[aria-disabled="true"] {
       opacity: .5;
     }
@@ -3609,6 +3643,18 @@
       color: var(--accent-foreground);
     }
 
+    .data-indeterminate\:border-primary[data-indeterminate] {
+      border-color: var(--primary);
+    }
+
+    .data-indeterminate\:bg-primary[data-indeterminate] {
+      background-color: var(--primary);
+    }
+
+    .data-indeterminate\:text-primary-foreground[data-indeterminate] {
+      color: var(--primary-foreground);
+    }
+
     .data-loading\:invisible[data-loading] {
       visibility: hidden;
     }
@@ -3804,6 +3850,10 @@
       height: calc(var(--spacing) * 1.5);
     }
 
+    .data-\[orientation\=horizontal\]\:h-auto[data-orientation="horizontal"] {
+      height: auto;
+    }
+
     .data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
       height: 100%;
     }
@@ -3824,6 +3874,10 @@
       margin-bottom: 0;
     }
 
+    .data-\[orientation\=vertical\]\:h-auto[data-orientation="vertical"] {
+      height: auto;
+    }
+
     .data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
       height: 100%;
     }
@@ -4027,6 +4081,18 @@
     }
 
     @media (width >= 40rem) {
+      .sm\:col-start-2 {
+        grid-column-start: 2;
+      }
+
+      .sm\:col-start-3 {
+        grid-column-start: 3;
+      }
+
+      .sm\:row-start-1 {
+        grid-row-start: 1;
+      }
+
       .sm\:max-w-lg {
         max-width: var(--container-lg);
       }
@@ -4035,6 +4101,18 @@
         max-width: var(--container-sm);
       }
 
+      .sm\:grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)\] {
+        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+      }
+
+      .sm\:grid-cols-\[repeat\(var\(--descriptions-columns-sm\)\,minmax\(0\,1fr\)\)\] {
+        grid-template-columns: repeat(var(--descriptions-columns-sm),minmax(0,1fr));
+      }
+
+      .sm\:flex-col {
+        flex-direction: column;
+      }
+
       .sm\:flex-row {
         flex-direction: row;
       }
@@ -4087,6 +4165,10 @@
     }
 
     @media (width >= 48rem) {
+      .md\:grid-cols-\[repeat\(var\(--descriptions-columns-md\)\,minmax\(0\,1fr\)\)\] {
+        grid-template-columns: repeat(var(--descriptions-columns-md),minmax(0,1fr));
+      }
+
       .md\:flex-row {
         flex-direction: row;
       }
@@ -4106,6 +4188,10 @@
     }
 
     @media (width >= 64rem) {
+      .lg\:grid-cols-\[repeat\(var\(--descriptions-columns-lg\)\,minmax\(0\,1fr\)\)\] {
+        grid-template-columns: repeat(var(--descriptions-columns-lg),minmax(0,1fr));
+      }
+
       .lg\:px-8 {
         padding-inline: calc(var(--spacing) * 8);
       }
@@ -4141,6 +4227,24 @@
       }
     }
 
+    @media (width >= 80rem) {
+      .xl\:grid-cols-\[repeat\(var\(--descriptions-columns-xl\)\,minmax\(0\,1fr\)\)\] {
+        grid-template-columns: repeat(var(--descriptions-columns-xl),minmax(0,1fr));
+      }
+    }
+
+    @media (width >= 96rem) {
+      .\32 xl\:grid-cols-\[repeat\(var\(--descriptions-columns-2xl\)\,minmax\(0\,1fr\)\)\] {
+        grid-template-columns: repeat(var(--descriptions-columns-2xl),minmax(0,1fr));
+      }
+    }
+
+    @container form (width >= 28rem) {
+      .\@md\/form\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,3fr\)\] {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+      }
+    }
+
     @container field-group (width >= 28rem) {
       .\@md\/field-group\:flex-row {
         flex-direction: row;
@@ -4149,7 +4253,19 @@
       .\@md\/field-group\:items-center {
         align-items: center;
       }
+    }
+
+    @container form (width >= 28rem) {
+      .\@md\/form\:items-start {
+        align-items: flex-start;
+      }
 
+      .\@md\/form\:pt-2 {
+        padding-top: calc(var(--spacing) * 2);
+      }
+    }
+
+    @container field-group (width >= 28rem) {
       .\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:items-start:has( > [data-slot="field-content"]) {
         align-items: flex-start;
       }
@@ -4242,6 +4358,10 @@
       }
     }
 
+    .\[\&_\.rdp-month\]\:w-full .rdp-month {
+      width: 100%;
+    }
+
     .\[\&_\.tiptap\]\:outline-none .tiptap {
       --tw-outline-style: none;
       outline-style: none;
@@ -4627,6 +4747,20 @@
       height: calc(var(--spacing) * 3.5);
     }
 
+    .\[\&\>svg\]\:size-4 > svg {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+
+    .\[\&\>svg\]\:size-full > svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    .\[\&\>svg\]\:fill-current > svg {
+      fill: currentColor;
+    }
+
     .\[\&\>svg\]\:text-muted-foreground > svg {
       color: var(--muted-foreground);
     }
@@ -4765,6 +4899,272 @@
     --sidebar-ring: oklch(55.6% 0 0);
   }
 
+  @layer base {
+    [data-ui-root] {
+      isolation: isolate;
+    }
+
+    * {
+      border-color: var(--border);
+      outline-color: var(--ring);
+
+      @supports (color: color-mix(in lab, red, red)) {
+        outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
+    }
+
+    :where([data-slot], [data-slot] *) {
+      box-sizing: border-box;
+      border-style: solid;
+      border-width: 0;
+    }
+
+    :where([data-slot], [data-slot] *):where(button, input, select, textarea) {
+      appearance: none;
+      color: inherit;
+      font: inherit;
+      background-color: #0000;
+    }
+
+    :where([data-slot], [data-slot] *):where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dd, blockquote, figure, pre) {
+      margin: 0;
+    }
+  }
+
+  @layer components {
+    :is([data-slot="button"], [data-slot="tag"])[data-color="blue"] {
+      --preset-color: var(--color-blue-500);
+    }
+
+    :is([data-slot="button"], [data-slot="tag"])[data-color="purple"] {
+      --preset-color: var(--color-purple-500);
+    }
+
+    :is([data-slot="button"], [data-slot="tag"])[data-color="cyan"] {
+      --preset-color: var(--color-cyan-500);
+    }
+
+    :is([data-slot="button"], [data-slot="tag"])[data-color="green"] {
+      --preset-color: var(--color-green-500);
+    }
+
+    :is([data-slot="button"], [data-slot="tag"])[data-color="fuchsia"] {
+      --preset-color: var(--color-fuchsia-500);
+    }
+
+    :is([data-slot="button"], [data-slot="tag"])[data-color="pink"] {
+      --preset-color: var(--color-pink-500);
+    }
+
+    :is([data-slot="button"], [data-slot="tag"])[data-color="red"] {
+      --preset-color: var(--color-red-500);
+    }
+
+    :is([data-slot="button"], [data-slot="tag"])[data-color="orange"] {
+      --preset-color: var(--color-orange-500);
+    }
+
+    :is([data-slot="button"], [data-slot="tag"])[data-color="yellow"] {
+      --preset-color: var(--color-yellow-500);
+    }
+
+    :is([data-slot="button"], [data-slot="tag"])[data-color="indigo"] {
+      --preset-color: var(--color-indigo-500);
+    }
+
+    :is([data-slot="button"], [data-slot="tag"])[data-color="lime"] {
+      --preset-color: var(--color-lime-500);
+    }
+
+    :is([data-slot="button"], [data-slot="tag"])[data-color="amber"] {
+      --preset-color: var(--color-amber-500);
+    }
+
+    [data-slot="button"][data-color] {
+      --btn-bg: var(--preset-color);
+      --btn-fg: white;
+      --btn-border: var(--btn-bg);
+      --btn-bg-hover: var(--btn-bg);
+
+      @supports (color: color-mix(in lab, red, red)) {
+        --btn-bg-hover: color-mix(in oklch, var(--btn-bg), black 12%);
+      }
+
+      --btn-bg-active: var(--btn-bg);
+
+      @supports (color: color-mix(in lab, red, red)) {
+        --btn-bg-active: color-mix(in oklch, var(--btn-bg), black 22%);
+      }
+    }
+
+    [data-slot="button"][data-color="yellow"], [data-slot="button"][data-color="lime"], [data-slot="button"][data-color="amber"] {
+      --btn-fg: black;
+    }
+
+    [data-slot="button"][data-color="default"] {
+      --btn-bg: var(--muted);
+      --btn-border: var(--muted-foreground);
+    }
+
+    [data-slot="button"][data-color="primary"] {
+      --btn-bg: var(--primary);
+      --btn-fg: var(--primary-foreground);
+    }
+
+    [data-slot="button"][data-color="danger"] {
+      --btn-bg: var(--destructive);
+    }
+
+    [data-slot="tag"][data-color] {
+      --tag-bg: var(--preset-color);
+      --tag-fg: var(--tag-bg);
+      --tag-tint: var(--tag-bg);
+
+      @supports (color: color-mix(in lab, red, red)) {
+        --tag-tint: color-mix(in oklab, var(--tag-bg), transparent 90%);
+      }
+    }
+
+    [data-slot="tag"][data-color="default"] {
+      --tag-bg: var(--border);
+      --tag-tint: var(--muted);
+      --tag-fg: var(--muted-foreground);
+    }
+
+    [data-slot="tag"][data-color="default"][data-variant="outlined"] {
+      --tag-fg: var(--foreground);
+    }
+
+    [data-slot="tag"][data-color="primary"] {
+      --tag-bg: var(--primary);
+    }
+
+    [data-slot="tag"][data-color="danger"] {
+      --tag-bg: var(--destructive);
+    }
+
+    [data-slot="tag"][data-color="success"] {
+      --tag-bg: var(--color-green-500);
+      --tag-fg: var(--color-green-600);
+    }
+
+    [data-slot="tag"][data-color="warning"] {
+      --tag-bg: var(--color-yellow-500);
+      --tag-fg: var(--color-yellow-600);
+    }
+
+    :is(.dark, [data-theme="dark"]) [data-slot="tag"][data-color="success"] {
+      --tag-fg: var(--color-green-400);
+    }
+
+    :is(.dark, [data-theme="dark"]) [data-slot="tag"][data-color="warning"] {
+      --tag-fg: var(--color-yellow-400);
+    }
+
+    [data-slot="alert"] {
+      color: var(--foreground);
+      border-color: var(--alert-accent);
+
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklch, var(--alert-accent), transparent 55%);
+      }
+
+      background-color: var(--background);
+    }
+
+    [data-slot="alert"][data-variant="filled"] {
+      background-color: var(--alert-accent);
+
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab,
+      var(--alert-accent) 10%,
+      var(--background));
+      }
+    }
+
+    [data-slot="alert"] > [aria-hidden="true"] {
+      color: var(--alert-accent);
+    }
+
+    [data-slot="alert"][data-status="info"] {
+      --alert-accent: var(--color-blue-600);
+    }
+
+    [data-slot="alert"][data-status="success"] {
+      --alert-accent: var(--color-green-600);
+    }
+
+    [data-slot="alert"][data-status="warning"] {
+      --alert-accent: var(--color-yellow-700);
+    }
+
+    [data-slot="alert"][data-status="error"] {
+      --alert-accent: var(--destructive);
+    }
+
+    :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="info"] {
+      --alert-accent: var(--color-blue-400);
+    }
+
+    :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="success"] {
+      --alert-accent: var(--color-green-400);
+    }
+
+    :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="warning"] {
+      --alert-accent: var(--color-yellow-400);
+    }
+
+    :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="error"] {
+      --alert-accent: var(--color-red-400);
+    }
+
+    [data-slot="col"] {
+      flex-basis: calc(var(--col-span-xs) / 24 * 100%);
+      max-width: calc(var(--col-span-xs) / 24 * 100%);
+      margin-left: calc(var(--col-offset-xs, 0) / 24 * 100%);
+    }
+
+    @media (width >= 40rem) {
+      [data-slot="col"] {
+        flex-basis: calc(var(--col-span-sm) / 24 * 100%);
+        max-width: calc(var(--col-span-sm) / 24 * 100%);
+        margin-left: calc(var(--col-offset-sm, 0) / 24 * 100%);
+      }
+    }
+
+    @media (width >= 48rem) {
+      [data-slot="col"] {
+        flex-basis: calc(var(--col-span-md) / 24 * 100%);
+        max-width: calc(var(--col-span-md) / 24 * 100%);
+        margin-left: calc(var(--col-offset-md, 0) / 24 * 100%);
+      }
+    }
+
+    @media (width >= 64rem) {
+      [data-slot="col"] {
+        flex-basis: calc(var(--col-span-lg) / 24 * 100%);
+        max-width: calc(var(--col-span-lg) / 24 * 100%);
+        margin-left: calc(var(--col-offset-lg, 0) / 24 * 100%);
+      }
+    }
+
+    @media (width >= 80rem) {
+      [data-slot="col"] {
+        flex-basis: calc(var(--col-span-xl) / 24 * 100%);
+        max-width: calc(var(--col-span-xl) / 24 * 100%);
+        margin-left: calc(var(--col-offset-xl, 0) / 24 * 100%);
+      }
+    }
+
+    @media (width >= 96rem) {
+      [data-slot="col"] {
+        flex-basis: calc(var(--col-span-2xl) / 24 * 100%);
+        max-width: calc(var(--col-span-2xl) / 24 * 100%);
+        margin-left: calc(var(--col-offset-2xl, 0) / 24 * 100%);
+      }
+    }
+  }
+
   @property --tw-translate-x {
     syntax: "*";
     inherits: false;
@@ -4783,6 +5183,31 @@
     initial-value: 0;
   }
 
+  @property --tw-rotate-x {
+    syntax: "*";
+    inherits: false
+  }
+
+  @property --tw-rotate-y {
+    syntax: "*";
+    inherits: false
+  }
+
+  @property --tw-rotate-z {
+    syntax: "*";
+    inherits: false
+  }
+
+  @property --tw-skew-x {
+    syntax: "*";
+    inherits: false
+  }
+
+  @property --tw-skew-y {
+    syntax: "*";
+    inherits: false
+  }
+
   @property --tw-space-y-reverse {
     syntax: "*";
     inherits: false;
@@ -5033,6 +5458,11 @@
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-translate-z: 0;
+        --tw-rotate-x: initial;
+        --tw-rotate-y: initial;
+        --tw-rotate-z: initial;
+        --tw-skew-x: initial;
+        --tw-skew-y: initial;
         --tw-space-y-reverse: 0;
         --tw-border-style: solid;
         --tw-leading: initial;
@@ -5135,4 +5565,4 @@
   }
 }
 
-@layer ui-kit.properties;
+@layer ui-kit.properties, ui-kit.theme, ui-kit.base, ui-kit.components, ui-kit.utilities;