@nswds/app 1.12.0 → 1.14.0

package/dist/globals.css

@@ -11,6 +11,7 @@
       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
       monospace;
     --color-red-400: oklch(70.4% 0.191 22.216);
+    --color-red-500: oklch(63.7% 0.237 25.331);
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-500: oklch(72.3% 0.219 149.579);
@@ -34,10 +35,16 @@
     --color-slate-700: oklch(37.2% 0.044 257.287);
     --color-slate-800: oklch(27.9% 0.041 260.031);
     --color-slate-900: oklch(20.8% 0.042 265.755);
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -61,6 +68,10 @@
     --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
@@ -328,6 +339,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .collapse {
+    visibility: collapse;
+  }
   .visible {
     visibility: visible;
   }
@@ -372,6 +386,9 @@
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -432,12 +449,18 @@
   .z-10 {
     z-index: 10;
   }
+  .z-30 {
+    z-index: 30;
+  }
   .z-50 {
     z-index: 50;
   }
   .z-\[1\] {
     z-index: 1;
   }
+  .col-span-1 {
+    grid-column: span 1 / span 1;
+  }
   .col-start-2 {
     grid-column-start: 2;
   }
@@ -450,6 +473,12 @@
   .-m-1 {
     margin: calc(var(--spacing) * -1);
   }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .m-0\.5 {
+    margin: calc(var(--spacing) * 0.5);
+  }
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
@@ -462,15 +491,21 @@
   .mx-auto {
     margin-inline: auto;
   }
-  .-my-5 {
-    margin-block: calc(var(--spacing) * -5);
-  }
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .my-6 {
+    margin-block: calc(var(--spacing) * 6);
+  }
+  .me-1 {
+    margin-inline-end: calc(var(--spacing) * 1);
+  }
+  .me-1\.5 {
+    margin-inline-end: calc(var(--spacing) * 1.5);
+  }
   .mt-0 {
     margin-top: calc(var(--spacing) * 0);
   }
@@ -510,6 +545,9 @@
   .mr-6 {
     margin-right: calc(var(--spacing) * 6);
   }
+  .\!mb-0 {
+    margin-bottom: calc(var(--spacing) * 0) !important;
+  }
   .-mb-px {
     margin-bottom: -1px;
   }
@@ -534,6 +572,9 @@
   .-ml-0\.5 {
     margin-left: calc(var(--spacing) * -0.5);
   }
+  .-ml-1 {
+    margin-left: calc(var(--spacing) * -1);
+  }
   .-ml-px {
     margin-left: -1px;
   }
@@ -633,6 +674,10 @@
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
   .size-\[2\.75rem\] {
     width: 2.75rem;
     height: 2.75rem;
@@ -723,6 +768,12 @@
   .max-h-\(--radix-select-content-available-height\) {
     max-height: var(--radix-select-content-available-height);
   }
+  .max-h-72 {
+    max-height: calc(var(--spacing) * 72);
+  }
+  .max-h-\[40rem\] {
+    max-height: 40rem;
+  }
   .max-h-\[300px\] {
     max-height: 300px;
   }
@@ -783,6 +834,9 @@
   .w-\[100px\] {
     width: 100px;
   }
+  .w-\[400px\] {
+    width: 400px;
+  }
   .w-auto {
     width: auto;
   }
@@ -813,9 +867,15 @@
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
   .max-w-max {
     max-width: max-content;
   }
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -1147,6 +1207,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .overflow-auto {
+    overflow: auto;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -1156,9 +1219,15 @@
   .overflow-x-hidden {
     overflow-x: hidden;
   }
+  .\!overflow-y-hidden {
+    overflow-y: hidden !important;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .\!rounded-none {
+    border-radius: 0 !important;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -1192,6 +1261,14 @@
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
+  .rounded-t-md {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
+  .rounded-t-xl {
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+  }
   .rounded-tl-sm {
     border-top-left-radius: var(--radius-sm);
   }
@@ -1211,6 +1288,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-x {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1304,6 +1385,12 @@
   .bg-border {
     background-color: var(--border);
   }
+  .bg-gray-50 {
+    background-color: var(--color-gray-50);
+  }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
   .bg-green-50 {
     background-color: var(--color-green-50);
   }
@@ -1328,6 +1415,9 @@
   .bg-nsw-grey-600 {
     background-color: var(--color-nsw-grey-600);
   }
+  .bg-nsw-grey-800 {
+    background-color: var(--color-nsw-grey-800);
+  }
   .bg-primary {
     background-color: oklch(0.29 0.1173 259.84);
   }
@@ -1356,6 +1446,10 @@
     }
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .bg-gradient-to-r {
+    --tw-gradient-position: to right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .from-nsw-grey-600 {
     --tw-gradient-from: var(--color-nsw-grey-600);
     --tw-gradient-stops: var(
@@ -1377,6 +1471,9 @@
   .fill-nsw-grey-700 {
     fill: var(--color-nsw-grey-700);
   }
+  .fill-nsw-grey-800 {
+    fill: var(--color-nsw-grey-800);
+  }
   .fill-nsw-red-600 {
     fill: var(--color-nsw-red-600);
   }
@@ -1398,12 +1495,18 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .p-12 {
+    padding: calc(var(--spacing) * 12);
+  }
   .p-\[2px\] {
     padding: 2px;
   }
@@ -1428,6 +1531,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -1458,6 +1564,9 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -1497,6 +1606,9 @@
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
   }
+  .pr-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -1515,6 +1627,9 @@
   .pb-16 {
     padding-bottom: calc(var(--spacing) * 16);
   }
+  .pb-\[41px\] {
+    padding-bottom: 41px;
+  }
   .pl-0 {
     padding-left: calc(var(--spacing) * 0);
   }
@@ -1559,6 +1674,10 @@
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1668,6 +1787,9 @@
   .text-gray-800 {
     color: var(--color-gray-800);
   }
+  .text-gray-900 {
+    color: var(--color-gray-900);
+  }
   .text-green-500 {
     color: var(--color-green-500);
   }
@@ -1750,6 +1872,9 @@
   .opacity-50 {
     opacity: 50%;
   }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .shadow {
     --tw-shadow:
       0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
@@ -1893,6 +2018,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-shadow {
     transition-property: box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2183,9 +2313,6 @@
   .fade-in-0 {
     --tw-enter-opacity: 0;
   }
-  .running {
-    animation-play-state: running;
-  }
   .zoom-in-95 {
     --tw-enter-scale: 0.95;
   }
@@ -2196,6 +2323,13 @@
       }
     }
   }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-data-active\:bg-nsw-grey-300 {
     &:is(:where(.group)[data-active] *) {
       background-color: var(--color-nsw-grey-300);
@@ -2603,6 +2737,13 @@
       }
     }
   }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
   .hover\:bg-green-100 {
     &:hover {
       @media (hover: hover) {
@@ -2677,6 +2818,13 @@
       }
     }
   }
+  .hover\:text-gray-600 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-600);
+      }
+    }
+  }
   .hover\:text-green-600 {
     &:hover {
       @media (hover: hover) {
@@ -2705,6 +2853,13 @@
       }
     }
   }
+  .hover\:text-primary-darkest {
+    &:hover {
+      @media (hover: hover) {
+        color: oklch(0.13774999999999998 0.064515 259.84);
+      }
+    }
+  }
   .hover\:text-purple-600 {
     &:hover {
       @media (hover: hover) {
@@ -2867,6 +3022,15 @@
         var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:ring-\[2px\] {
+    &: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))
@@ -3013,6 +3177,16 @@
       }
     }
   }
+  .data-disabled\:pointer-events-none {
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+  .data-disabled\:opacity-50 {
+    &[data-disabled] {
+      opacity: 50%;
+    }
+  }
   .data-disabled\:before\:shadow-none {
     &[data-disabled] {
       &::before {
@@ -3908,14 +4082,14 @@
       border-bottom-width: 1px;
     }
   }
-  .sm\:mr-8 {
+  .sm\:block {
     @media (width >= 40rem) {
-      margin-right: calc(var(--spacing) * 8);
+      display: block;
     }
   }
-  .sm\:block {
+  .sm\:flex {
     @media (width >= 40rem) {
-      display: block;
+      display: flex;
     }
   }
   .sm\:max-w-lg {
@@ -4008,6 +4182,11 @@
       padding-right: calc(var(--spacing) * 2.5);
     }
   }
+  .sm\:pr-12 {
+    @media (width >= 40rem) {
+      padding-right: calc(var(--spacing) * 12);
+    }
+  }
   .sm\:pl-2\.5 {
     @media (width >= 40rem) {
       padding-left: calc(var(--spacing) * 2.5);
@@ -4083,14 +4262,14 @@
       position: absolute;
     }
   }
-  .md\:mr-0 {
+  .md\:h-16 {
     @media (width >= 48rem) {
-      margin-right: calc(var(--spacing) * 0);
+      height: calc(var(--spacing) * 16);
     }
   }
-  .md\:h-16 {
+  .md\:w-40 {
     @media (width >= 48rem) {
-      height: calc(var(--spacing) * 16);
+      width: calc(var(--spacing) * 40);
     }
   }
   .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
@@ -4108,6 +4287,11 @@
       flex-grow: 1;
     }
   }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .md\:grid-cols-3 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -4159,11 +4343,21 @@
       display: none;
     }
   }
+  .lg\:inline-flex {
+    @media (width >= 64rem) {
+      display: inline-flex;
+    }
+  }
   .lg\:h-14 {
     @media (width >= 64rem) {
       height: calc(var(--spacing) * 14);
     }
   }
+  .lg\:w-64 {
+    @media (width >= 64rem) {
+      width: calc(var(--spacing) * 64);
+    }
+  }
   .lg\:w-80 {
     @media (width >= 64rem) {
       width: calc(var(--spacing) * 80);
@@ -4243,6 +4437,18 @@
       text-align: left;
     }
   }
+  .lg\:text-3xl {
+    @media (width >= 64rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .lg\:text-5xl {
+    @media (width >= 64rem) {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+  }
   .lg\:text-sm {
     @media (width >= 64rem) {
       font-size: var(--text-sm);
@@ -4314,6 +4520,11 @@
       display: none;
     }
   }
+  .dark\:border-gray-600 {
+    &:where(.dark, .dark *) {
+      border-color: var(--color-gray-600);
+    }
+  }
   .dark\:border-nsw-grey-50 {
     &:where(.dark, .dark *) {
       border-color: var(--color-nsw-grey-50);
@@ -4335,6 +4546,14 @@
       }
     }
   }
+  .dark\:border-nsw-grey-200\/20 {
+    &:where(.dark, .dark *) {
+      border-color: color-mix(in srgb, oklch(0.9401 0 0) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-nsw-grey-200) 20%, transparent);
+      }
+    }
+  }
   .dark\:border-slate-800 {
     &:where(.dark, .dark *) {
       border-color: var(--color-slate-800);
@@ -4368,6 +4587,21 @@
       background-color: var(--color-blue-950);
     }
   }
+  .dark\:bg-gray-700 {
+    &:where(.dark, .dark *) {
+      background-color: var(--color-gray-700);
+    }
+  }
+  .dark\:bg-gray-800 {
+    &:where(.dark, .dark *) {
+      background-color: var(--color-gray-800);
+    }
+  }
+  .dark\:bg-gray-900 {
+    &:where(.dark, .dark *) {
+      background-color: var(--color-gray-900);
+    }
+  }
   .dark\:bg-input\/30 {
     &:where(.dark, .dark *) {
       background-color: var(--input);
@@ -4384,6 +4618,11 @@
       }
     }
   }
+  .dark\:bg-nsw-grey-800 {
+    &:where(.dark, .dark *) {
+      background-color: var(--color-nsw-grey-800);
+    }
+  }
   .dark\:bg-slate-900\/95 {
     &:where(.dark, .dark *) {
       background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 95%, transparent);
@@ -4415,6 +4654,11 @@
       fill: var(--color-white);
     }
   }
+  .dark\:text-gray-400 {
+    &:where(.dark, .dark *) {
+      color: var(--color-gray-400);
+    }
+  }
   .dark\:text-muted-foreground {
     &:where(.dark, .dark *) {
       color: var(--muted-foreground);
@@ -4910,6 +5154,15 @@
       }
     }
   }
+  .dark\:hover\:bg-gray-700 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-700);
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-input\/50 {
     &:where(.dark, .dark *) {
       &:hover {
@@ -4922,6 +5175,15 @@
       }
     }
   }
+  .dark\:hover\:bg-nsw-grey-700 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-nsw-grey-700);
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-white\/10 {
     &:where(.dark, .dark *) {
       &:hover {
@@ -4952,6 +5214,15 @@
       }
     }
   }
+  .hover\:dark\:text-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        &:where(.dark, .dark *) {
+          color: var(--color-gray-300);
+        }
+      }
+    }
+  }
   .dark\:hover\:outline-white\/10 {
     &:where(.dark, .dark *) {
       &:hover {
@@ -5353,18 +5624,18 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .\[\&\>svg\]\:size-3\.5 {
-    & > svg {
-      width: calc(var(--spacing) * 3.5);
-      height: calc(var(--spacing) * 3.5);
-    }
-  }
   .\[\&\>svg\]\:size-4 {
     & > svg {
       width: calc(var(--spacing) * 4);
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&\>svg\]\:size-5 {
+    & > svg {
+      width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
+    }
+  }
   .\[\&\>svg\]\:translate-y-0\.5 {
     & > svg {
       --tw-translate-y: calc(var(--spacing) * 0.5);