@powerhousedao/document-engineering 1.15.0 → 1.16.0

package/dist/style.css

@@ -63,6 +63,7 @@
     --color-white: hsl(0 0% 100%);
     --spacing: 0.25rem;
     --container-md: 28rem;
+    --container-lg: 32rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -89,6 +90,17 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-background: oklch(1 0 0);
+    --color-foreground: oklch(0.145 0 0);
+    --color-primary: oklch(0.205 0 0);
+    --color-primary-foreground: oklch(0.985 0 0);
+    --color-secondary: oklch(0.97 0 0);
+    --color-secondary-foreground: oklch(0.205 0 0);
+    --color-muted: oklch(0.97 0 0);
+    --color-muted-foreground: oklch(0.556 0 0);
+    --color-accent: oklch(0.97 0 0);
+    --color-accent-foreground: oklch(0.205 0 0);
+    --color-destructive: oklch(0.577 0.245 27.325);
     --color-charcoal-300: hsl(221 17% 67%);
     --color-charcoal-700: hsl(219 17% 34%);
     --color-charcoal-800: hsl(221 17% 26%);
@@ -294,6 +306,9 @@
   .top-\[48px\] {
     top: 48px;
   }
+  .top-\[50\%\] {
+    top: 50%;
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -327,6 +342,9 @@
   .left-2\.5 {
     left: calc(var(--spacing) * 2.5);
   }
+  .left-\[50\%\] {
+    left: 50%;
+  }
   .z-1 {
     z-index: 1;
   }
@@ -519,6 +537,10 @@
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
   }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
   .size-10 {
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
@@ -549,6 +571,9 @@
   .h-9 {
     height: calc(var(--spacing) * 9);
   }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .h-\[20px\] {
     height: 20px;
   }
@@ -675,6 +700,9 @@
   .max-w-\[40px\] {
     max-width: 40px;
   }
+  .max-w-\[calc\(100\%-2rem\)\] {
+    max-width: calc(100% - 2rem);
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -707,6 +735,10 @@
     --tw-translate-x: calc(1/2 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-\[-50\%\] {
+    --tw-translate-x: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-\[5px\] {
     --tw-translate-x: 5px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -719,6 +751,10 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-\[-50\%\] {
+    --tw-translate-y: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-rotate-90 {
     rotate: calc(90deg * -1);
   }
@@ -776,6 +812,9 @@
   .flex-col {
     flex-direction: column;
   }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   .flex-row {
     flex-direction: row;
   }
@@ -806,6 +845,9 @@
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -1027,6 +1069,18 @@
   .bg-\[\#ffffff\] {
     background-color: #ffffff;
   }
+  .bg-accent {
+    background-color: var(--color-accent);
+  }
+  .bg-background {
+    background-color: var(--color-background);
+  }
+  .bg-black\/50 {
+    background-color: color-mix(in srgb, hsl(0 0% 0%) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
@@ -1039,6 +1093,9 @@
   .bg-blue-900 {
     background-color: var(--color-blue-900);
   }
+  .bg-destructive {
+    background-color: var(--color-destructive);
+  }
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
@@ -1069,6 +1126,12 @@
       background-color: color-mix(in oklab, var(--color-green-600) 30%, transparent);
     }
   }
+  .bg-muted {
+    background-color: var(--color-muted);
+  }
+  .bg-primary {
+    background-color: var(--color-primary);
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -1078,6 +1141,9 @@
       background-color: color-mix(in oklab, var(--color-red-600) 30%, transparent);
     }
   }
+  .bg-secondary {
+    background-color: var(--color-secondary);
+  }
   .bg-slate-50 {
     background-color: var(--color-slate-50);
   }
@@ -1111,6 +1177,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
@@ -1129,6 +1198,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
   .px-\[2px\] {
     padding-inline: 2px;
   }
@@ -1339,6 +1411,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .\!text-foreground {
+    color: var(--color-foreground) !important;
+  }
   .\!text-gray-300 {
     color: var(--color-gray-300) !important;
   }
@@ -1354,6 +1429,9 @@
   .text-\[\#E2E4E7\] {
     color: #E2E4E7;
   }
+  .text-accent-foreground {
+    color: var(--color-accent-foreground);
+  }
   .text-blue-500 {
     color: var(--color-blue-500);
   }
@@ -1408,6 +1486,15 @@
   .text-green-900 {
     color: var(--color-green-900);
   }
+  .text-muted-foreground {
+    color: var(--color-muted-foreground);
+  }
+  .text-primary {
+    color: var(--color-primary);
+  }
+  .text-primary-foreground {
+    color: var(--color-primary-foreground);
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -1426,6 +1513,9 @@
   .text-red-900 {
     color: var(--color-red-900);
   }
+  .text-secondary-foreground {
+    color: var(--color-secondary-foreground);
+  }
   .text-slate-50 {
     color: var(--color-slate-50);
   }
@@ -1450,6 +1540,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1482,6 +1575,10 @@
     --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);
   }
+  .shadow-xs {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-0 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
@@ -1495,6 +1592,9 @@
   .ring-gray-900 {
     --tw-ring-color: var(--color-gray-900);
   }
+  .ring-offset-background {
+    --tw-ring-offset-color: var(--color-background);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1941,6 +2041,13 @@
       }
     }
   }
+  .hover\:bg-accent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-accent);
+      }
+    }
+  }
   .hover\:bg-blue-100 {
     &:hover {
       @media (hover: hover) {
@@ -1948,6 +2055,16 @@
       }
     }
   }
+  .hover\:bg-destructive\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-gray-50 {
     &:hover {
       @media (hover: hover) {
@@ -1976,6 +2093,26 @@
       }
     }
   }
+  .hover\:bg-primary\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(0.205 0 0) 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-secondary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(0.97 0 0) 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-slate-100 {
     &:hover {
       @media (hover: hover) {
@@ -2004,6 +2141,13 @@
       }
     }
   }
+  .hover\:text-accent-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-accent-foreground);
+      }
+    }
+  }
   .hover\:text-blue-900 {
     &:hover {
       @media (hover: hover) {
@@ -2107,6 +2251,11 @@
       border-color: var(--color-gray-900);
     }
   }
+  .focus\:bg-accent {
+    &:focus {
+      background-color: var(--color-accent);
+    }
+  }
   .focus\:bg-gray-50 {
     &:focus {
       background-color: var(--color-gray-50);
@@ -2122,6 +2271,11 @@
       background-image: none;
     }
   }
+  .focus\:text-accent-foreground {
+    &:focus {
+      color: var(--color-accent-foreground);
+    }
+  }
   .focus\:ring-0 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2169,6 +2323,20 @@
       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-\[1px\] {
+    &:focus-visible {
+      --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-visible\:ring-destructive\/20 {
+    &:focus-visible {
+      --tw-ring-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+      }
+    }
+  }
   .focus-visible\:ring-gray-900 {
     &:focus-visible {
       --tw-ring-color: var(--color-gray-900);
@@ -2186,6 +2354,11 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .focus-visible\:ring-offset-background {
+    &:focus-visible {
+      --tw-ring-offset-color: var(--color-background);
+    }
+  }
   .focus-visible\:ring-offset-white {
     &:focus-visible {
       --tw-ring-offset-color: var(--color-white);
@@ -2242,16 +2415,57 @@
       opacity: 50%;
     }
   }
+  .has-\[\>svg\]\:px-2\.5 {
+    &:has(>svg) {
+      padding-inline: calc(var(--spacing) * 2.5);
+    }
+  }
+  .has-\[\>svg\]\:px-3 {
+    &:has(>svg) {
+      padding-inline: calc(var(--spacing) * 3);
+    }
+  }
+  .has-\[\>svg\]\:px-4 {
+    &:has(>svg) {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+  .aria-invalid\:border-destructive {
+    &[aria-invalid="true"] {
+      border-color: var(--color-destructive);
+    }
+  }
+  .aria-invalid\:ring-destructive\/20 {
+    &[aria-invalid="true"] {
+      --tw-ring-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+      }
+    }
+  }
   .aria-selected\:\!bg-gray-900 {
     &[aria-selected="true"] {
       background-color: var(--color-gray-900) !important;
     }
   }
+  .aria-selected\:bg-accent\/50 {
+    &[aria-selected="true"] {
+      background-color: color-mix(in srgb, oklch(0.97 0 0) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+      }
+    }
+  }
   .aria-selected\:\!text-white {
     &[aria-selected="true"] {
       color: var(--color-white) !important;
     }
   }
+  .aria-selected\:text-muted-foreground {
+    &[aria-selected="true"] {
+      color: var(--color-muted-foreground);
+    }
+  }
   .aria-selected\:opacity-30 {
     &[aria-selected="true"] {
       opacity: 30%;
@@ -2332,6 +2546,16 @@
       }
     }
   }
+  .data-\[state\=active\]\:bg-background {
+    &[data-state="active"] {
+      background-color: var(--color-background);
+    }
+  }
+  .data-\[state\=active\]\:text-foreground {
+    &[data-state="active"] {
+      color: var(--color-foreground);
+    }
+  }
   .data-\[state\=active\]\:shadow {
     &[data-state="active"] {
       --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));
@@ -2482,6 +2706,26 @@
       background-color: #EFEFEF;
     }
   }
+  .sm\:max-w-lg {
+    @media (width >= 40rem) {
+      max-width: var(--container-lg);
+    }
+  }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .sm\:justify-end {
+    @media (width >= 40rem) {
+      justify-content: flex-end;
+    }
+  }
+  .sm\:text-left {
+    @media (width >= 40rem) {
+      text-align: left;
+    }
+  }
   .md\:w-96 {
     @media (width >= 48rem) {
       width: calc(var(--spacing) * 96);
@@ -2572,6 +2816,14 @@
       background-color: var(--color-charcoal-900);
     }
   }
+  .dark\:bg-destructive\/60 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-destructive) 60%, transparent);
+      }
+    }
+  }
   .dark\:bg-gray-50 {
     &:where(.dark, .dark *) {
       background-color: var(--color-gray-50);
@@ -2934,6 +3186,18 @@
       }
     }
   }
+  .dark\:hover\:bg-accent\/50 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(0.97 0 0) 50%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+          }
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-charcoal-800 {
     &:where(.dark, .dark *) {
       &:hover {
@@ -3101,6 +3365,16 @@
       }
     }
   }
+  .dark\:focus-visible\:ring-destructive\/40 {
+    &:where(.dark, .dark *) {
+      &:focus-visible {
+        --tw-ring-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+        }
+      }
+    }
+  }
   .dark\:focus-visible\:ring-offset-charcoal-900 {
     &:where(.dark, .dark *) {
       &:focus-visible {
@@ -3136,6 +3410,16 @@
       }
     }
   }
+  .dark\:aria-invalid\:ring-destructive\/40 {
+    &:where(.dark, .dark *) {
+      &[aria-invalid="true"] {
+        --tw-ring-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+        }
+      }
+    }
+  }
   .dark\:aria-selected\:\!bg-gray-50 {
     &:where(.dark, .dark *) {
       &[aria-selected="true"] {
@@ -4664,6 +4948,12 @@
       flex-shrink: 0;
     }
   }
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
+    & svg:not([class*='size-']) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  }
   .\[\&\.base-picker\\\\_\\\\_input\]\:w-\[275px\] {
     &.base-picker\_\_input {
       width: 275px;
@@ -4774,11 +5064,36 @@
       display: none;
     }
   }
+  .\[\&\>button\]\:bg-accent {
+    &>button {
+      background-color: var(--color-accent);
+    }
+  }
+  .\[\&\>button\]\:bg-primary {
+    &>button {
+      background-color: var(--color-primary);
+    }
+  }
   .\[\&\>button\]\:bg-transparent {
     &>button {
       background-color: transparent;
     }
   }
+  .\[\&\>button\]\:\!text-foreground {
+    &>button {
+      color: var(--color-foreground) !important;
+    }
+  }
+  .\[\&\>button\]\:text-accent-foreground {
+    &>button {
+      color: var(--color-accent-foreground);
+    }
+  }
+  .\[\&\>button\]\:text-primary-foreground {
+    &>button {
+      color: var(--color-primary-foreground);
+    }
+  }
   .\[\&\>button\]\:hover\:\!bg-transparent {
     &>button {
       &:hover {
@@ -4788,6 +5103,15 @@
       }
     }
   }
+  .\[\&\>button\]\:hover\:bg-primary {
+    &>button {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-primary);
+        }
+      }
+    }
+  }
   .\[\&\>button\]\:hover\:bg-transparent {
     &>button {
       &:hover {
@@ -4797,6 +5121,24 @@
       }
     }
   }
+  .\[\&\>button\]\:hover\:\!text-foreground {
+    &>button {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-foreground) !important;
+        }
+      }
+    }
+  }
+  .\[\&\>button\]\:hover\:text-primary-foreground {
+    &>button {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-primary-foreground);
+        }
+      }
+    }
+  }
   .\[\&_\.date-picker\\\\_\\\\_date-footer\]\:\[\&\>button\]\:rounded-full {
     & .date-picker\_\_date-footer {
       &>button {