@nswds/app 1.102.0 → 1.104.0

package/dist/styles.css

@@ -129,6 +129,7 @@
     --color-primary-50: var(--nsw-blue-50);
     --color-primary-200: var(--nsw-blue-200);
     --color-primary-250: var(--nsw-blue-250);
+    --color-primary-300: var(--nsw-blue-300);
     --color-primary-400: var(--nsw-blue-400);
     --color-primary-500: var(--nsw-blue-500);
     --color-primary-550: var(--nsw-blue-550);
@@ -1371,6 +1372,9 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
@@ -1380,12 +1384,21 @@
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
+  .h-44 {
+    height: calc(var(--spacing) * 44);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
+  .h-52 {
+    height: calc(var(--spacing) * 52);
+  }
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
+  .h-72 {
+    height: calc(var(--spacing) * 72);
+  }
   .h-80 {
     height: calc(var(--spacing) * 80);
   }
@@ -1398,6 +1411,12 @@
   .h-\[3px\] {
     height: 3px;
   }
+  .h-\[32rem\] {
+    height: 32rem;
+  }
+  .h-\[40rem\] {
+    height: 40rem;
+  }
   .h-\[600px\] {
     height: 600px;
   }
@@ -1467,12 +1486,21 @@
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
   .min-h-32 {
     min-height: calc(var(--spacing) * 32);
   }
+  .min-h-\[18rem\] {
+    min-height: 18rem;
+  }
   .min-h-\[22rem\] {
     min-height: 22rem;
   }
@@ -1587,6 +1615,9 @@
   .w-100 {
     width: calc(var(--spacing) * 100);
   }
+  .w-\[30rem\] {
+    width: 30rem;
+  }
   .w-\[50vw\] {
     width: 50vw;
   }
@@ -1665,6 +1696,9 @@
   .max-w-\[80\%\] {
     max-width: 80%;
   }
+  .max-w-\[90vw\] {
+    max-width: 90vw;
+  }
   .max-w-\[500px\] {
     max-width: 500px;
   }
@@ -2437,6 +2471,12 @@
   .border-accent-600 {
     border-color: var(--color-accent-600);
   }
+  .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) 10%, transparent);
+    }
+  }
   .border-border {
     border-color: var(--border);
   }
@@ -2452,6 +2492,9 @@
   .border-danger-200 {
     border-color: var(--danger-200);
   }
+  .border-danger-300 {
+    border-color: var(--danger-300);
+  }
   .border-danger-500 {
     border-color: var(--danger-500);
   }
@@ -2524,6 +2567,12 @@
   .border-primary {
     border-color: var(--primary);
   }
+  .border-primary-200 {
+    border-color: var(--color-primary-200);
+  }
+  .border-primary-300 {
+    border-color: var(--color-primary-300);
+  }
   .border-primary-500 {
     border-color: var(--color-primary-500);
   }
@@ -2536,6 +2585,9 @@
   .border-primary-600 {
     border-color: var(--color-primary-600);
   }
+  .border-primary-700 {
+    border-color: var(--color-primary-700);
+  }
   .border-primary-800 {
     border-color: var(--color-primary-800);
   }
@@ -2668,6 +2720,9 @@
   .bg-danger-500 {
     background-color: var(--danger-500);
   }
+  .bg-danger-700 {
+    background-color: var(--danger-700);
+  }
   .bg-destructive {
     background-color: var(--destructive);
   }
@@ -2698,6 +2753,18 @@
   .bg-grey-50 {
     background-color: var(--color-grey-50);
   }
+  .bg-grey-50\/60 {
+    background-color: var(--color-grey-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-grey-50) 60%, transparent);
+    }
+  }
+  .bg-grey-50\/70 {
+    background-color: var(--color-grey-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-grey-50) 70%, transparent);
+    }
+  }
   .bg-grey-100 {
     background-color: var(--color-grey-100);
   }
@@ -2755,6 +2822,21 @@
   .bg-primary {
     background-color: var(--primary);
   }
+  .bg-primary-50 {
+    background-color: var(--color-primary-50);
+  }
+  .bg-primary-50\/50 {
+    background-color: var(--color-primary-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary-50) 50%, transparent);
+    }
+  }
+  .bg-primary-50\/60 {
+    background-color: var(--color-primary-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary-50) 60%, transparent);
+    }
+  }
   .bg-primary-50\/70 {
     background-color: var(--color-primary-50);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2821,6 +2903,9 @@
   .bg-success-500 {
     background-color: var(--success-500);
   }
+  .bg-success-700 {
+    background-color: var(--success-700);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -3130,6 +3215,9 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .py-7 {
+    padding-block: calc(var(--spacing) * 7);
+  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
@@ -3229,6 +3317,9 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
   .pb-12 {
     padding-bottom: calc(var(--spacing) * 12);
   }
@@ -3304,6 +3395,10 @@
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
   }
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -3348,15 +3443,31 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-xs\/5 {
+    font-size: var(--text-xs);
+    line-height: calc(var(--spacing) * 5);
+  }
   .text-\[0\.8rem\] {
     font-size: 0.8rem;
   }
   .text-\[0\.65rem\] {
     font-size: 0.65rem;
   }
+  .text-\[0\.68rem\] {
+    font-size: 0.68rem;
+  }
   .text-\[0\.72rem\] {
     font-size: 0.72rem;
   }
+  .text-\[0\.74rem\] {
+    font-size: 0.74rem;
+  }
+  .text-\[0\.82rem\] {
+    font-size: 0.82rem;
+  }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .text-\[14px\] {
     font-size: 14px;
   }
@@ -3509,6 +3620,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-\[0\.12em\] {
+    --tw-tracking: 0.12em;
+    letter-spacing: 0.12em;
+  }
   .tracking-\[0\.14em\] {
     --tw-tracking: 0.14em;
     letter-spacing: 0.14em;
@@ -3613,6 +3728,9 @@
   .text-danger-800 {
     color: var(--danger-800);
   }
+  .text-danger-900 {
+    color: var(--danger-900);
+  }
   .text-destructive {
     color: var(--destructive);
   }
@@ -3712,6 +3830,9 @@
   .text-primary-800 {
     color: var(--color-primary-800);
   }
+  .text-primary-900 {
+    color: var(--color-primary-900);
+  }
   .text-primary-950 {
     color: var(--color-primary-950);
   }
@@ -3822,6 +3943,9 @@
   .opacity-80 {
     opacity: 80%;
   }
+  .opacity-90 {
+    opacity: 90%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -4002,6 +4126,9 @@
   .ring-primary-500 {
     --tw-ring-color: var(--color-primary-500);
   }
+  .ring-primary-700 {
+    --tw-ring-color: var(--color-primary-700);
+  }
   .ring-ring\/50 {
     --tw-ring-color: var(--ring);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4024,6 +4151,12 @@
   .ring-offset-background {
     --tw-ring-offset-color: var(--background);
   }
+  .ring-offset-grey-50\/60 {
+    --tw-ring-offset-color: var(--color-grey-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-offset-color: color-mix(in oklab, var(--color-grey-50) 60%, transparent);
+    }
+  }
   .ring-offset-white {
     --tw-ring-offset-color: var(--color-white);
   }
@@ -5934,6 +6067,14 @@
       }
     }
   }
+  .hover\:-translate-y-px {
+    &:hover {
+      @media (hover: hover) {
+        --tw-translate-y: -1px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .hover\:scale-105 {
     &:hover {
       @media (hover: hover) {
@@ -5979,6 +6120,13 @@
       }
     }
   }
+  .hover\:border-grey-500 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-grey-500);
+      }
+    }
+  }
   .hover\:border-grey-950 {
     &:hover {
       @media (hover: hover) {
@@ -5986,6 +6134,13 @@
       }
     }
   }
+  .hover\:border-primary-500 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-primary-500);
+      }
+    }
+  }
   .hover\:border-primary-800 {
     &:hover {
       @media (hover: hover) {
@@ -6055,6 +6210,13 @@
       }
     }
   }
+  .hover\:bg-primary-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-primary-50);
+      }
+    }
+  }
   .hover\:bg-primary-800\/10 {
     &:hover {
       @media (hover: hover) {
@@ -6594,6 +6756,11 @@
       }
     }
   }
+  .focus-visible\:ring-primary-700 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-primary-700);
+    }
+  }
   .focus-visible\:ring-ring {
     &:focus-visible {
       --tw-ring-color: var(--ring);
@@ -8731,11 +8898,31 @@
       height: calc(var(--spacing) * 5);
     }
   }
+  .sm\:h-24 {
+    @media (width >= 40rem) {
+      height: calc(var(--spacing) * 24);
+    }
+  }
+  .sm\:h-\[44rem\] {
+    @media (width >= 40rem) {
+      height: 44rem;
+    }
+  }
+  .sm\:max-h-\[44rem\] {
+    @media (width >= 40rem) {
+      max-height: 44rem;
+    }
+  }
   .sm\:min-h-12 {
     @media (width >= 40rem) {
       min-height: calc(var(--spacing) * 12);
     }
   }
+  .sm\:min-h-\[22rem\] {
+    @media (width >= 40rem) {
+      min-height: 22rem;
+    }
+  }
   .sm\:min-h-\[26rem\] {
     @media (width >= 40rem) {
       min-height: 26rem;
@@ -8746,6 +8933,11 @@
       width: calc(var(--spacing) * 8);
     }
   }
+  .sm\:w-auto {
+    @media (width >= 40rem) {
+      width: auto;
+    }
+  }
   .sm\:w-fit {
     @media (width >= 40rem) {
       width: fit-content;
@@ -8766,6 +8958,31 @@
       max-width: var(--container-sm);
     }
   }
+  .sm\:min-w-40 {
+    @media (width >= 40rem) {
+      min-width: calc(var(--spacing) * 40);
+    }
+  }
+  .sm\:min-w-48 {
+    @media (width >= 40rem) {
+      min-width: calc(var(--spacing) * 48);
+    }
+  }
+  .sm\:min-w-56 {
+    @media (width >= 40rem) {
+      min-width: calc(var(--spacing) * 56);
+    }
+  }
+  .sm\:flex-none {
+    @media (width >= 40rem) {
+      flex: none;
+    }
+  }
+  .sm\:basis-auto {
+    @media (width >= 40rem) {
+      flex-basis: auto;
+    }
+  }
   .sm\:grid-cols-2 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -8796,6 +9013,11 @@
       grid-template-columns: 1fr auto;
     }
   }
+  .sm\:grid-cols-\[4rem_minmax\(0\,1fr\)\] {
+    @media (width >= 40rem) {
+      grid-template-columns: 4rem minmax(0, 1fr);
+    }
+  }
   .sm\:grid-cols-\[min\(50\%\,--spacing\(80\)\)_auto\] {
     @media (width >= 40rem) {
       grid-template-columns: min(50%, calc(var(--spacing) * 80)) auto;
@@ -8806,11 +9028,26 @@
       flex-direction: row;
     }
   }
+  .sm\:flex-wrap {
+    @media (width >= 40rem) {
+      flex-wrap: wrap;
+    }
+  }
   .sm\:items-center {
     @media (width >= 40rem) {
       align-items: center;
     }
   }
+  .sm\:items-end {
+    @media (width >= 40rem) {
+      align-items: flex-end;
+    }
+  }
+  .sm\:items-start {
+    @media (width >= 40rem) {
+      align-items: flex-start;
+    }
+  }
   .sm\:justify-between {
     @media (width >= 40rem) {
       justify-content: space-between;
@@ -8836,6 +9073,11 @@
       gap: calc(var(--spacing) * 4);
     }
   }
+  .sm\:gap-8 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:divide-x {
     @media (width >= 40rem) {
       :where(& > :not(:last-child)) {
@@ -8900,11 +9142,21 @@
       padding-inline: calc(var(--spacing) * 2);
     }
   }
+  .sm\:px-5 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 5);
+    }
+  }
   .sm\:px-6 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 6);
     }
   }
+  .sm\:px-8 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:px-\[calc\(--spacing\(3\.5\)-1px\)\] {
     @media (width >= 40rem) {
       padding-inline: calc(calc(var(--spacing) * 3.5) - 1px);
@@ -8940,6 +9192,21 @@
       padding-block: calc(var(--spacing) * 3);
     }
   }
+  .sm\:py-5 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 5);
+    }
+  }
+  .sm\:py-6 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:py-8 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:py-\[calc\(--spacing\(2\)-1px\)\] {
     @media (width >= 40rem) {
       padding-block: calc(calc(var(--spacing) * 2) - 1px);
@@ -9005,6 +9272,12 @@
       text-align: left;
     }
   }
+  .sm\:text-4xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
   .sm\:text-5xl {
     @media (width >= 40rem) {
       font-size: var(--text-5xl);
@@ -9029,6 +9302,12 @@
       line-height: calc(var(--spacing) * 7);
     }
   }
+  .sm\:text-sm {
+    @media (width >= 40rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
   .sm\:text-sm\/5 {
     @media (width >= 40rem) {
       font-size: var(--text-sm);
@@ -9041,12 +9320,23 @@
       line-height: calc(var(--spacing) * 6);
     }
   }
+  .sm\:text-xs {
+    @media (width >= 40rem) {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  }
   .sm\:text-xs\/5 {
     @media (width >= 40rem) {
       font-size: var(--text-xs);
       line-height: calc(var(--spacing) * 5);
     }
   }
+  .sm\:text-\[0\.72rem\] {
+    @media (width >= 40rem) {
+      font-size: 0.72rem;
+    }
+  }
   .sm\:text-\[0\.8125rem\] {
     @media (width >= 40rem) {
       font-size: 0.8125rem;
@@ -9057,6 +9347,12 @@
       font-size: 16px;
     }
   }
+  .sm\:leading-none {
+    @media (width >= 40rem) {
+      --tw-leading: 1;
+      line-height: 1;
+    }
+  }
   .sm\:font-\[700\] {
     @media (width >= 40rem) {
       --tw-font-weight: 700;
@@ -9203,6 +9499,11 @@
       position: absolute;
     }
   }
+  .md\:col-span-2 {
+    @media (width >= 48rem) {
+      grid-column: span 2 / span 2;
+    }
+  }
   .md\:-mt-px {
     @media (width >= 48rem) {
       margin-top: -1px;
@@ -9370,6 +9671,11 @@
       inset: calc(var(--spacing) * 0);
     }
   }
+  .lg\:col-span-2 {
+    @media (width >= 64rem) {
+      grid-column: span 2 / span 2;
+    }
+  }
   .lg\:col-span-4 {
     @media (width >= 64rem) {
       grid-column: span 4 / span 4;
@@ -9500,6 +9806,11 @@
       grid-template-columns: 18rem 1fr;
     }
   }
+  .lg\:grid-cols-\[18rem_minmax\(0\,1fr\)\] {
+    @media (width >= 64rem) {
+      grid-template-columns: 18rem minmax(0, 1fr);
+    }
+  }
   .lg\:grid-cols-\[20rem_1fr\] {
     @media (width >= 64rem) {
       grid-template-columns: 20rem 1fr;
@@ -9670,6 +9981,11 @@
       top: var(--sticky-offset);
     }
   }
+  .xl\:top-\[var\(--tool-sidebar-top\)\] {
+    @media (width >= 80rem) {
+      top: var(--tool-sidebar-top);
+    }
+  }
   .xl\:left-2\/3 {
     @media (width >= 80rem) {
       left: calc(2/3 * 100%);
@@ -9695,16 +10011,36 @@
       display: block;
     }
   }
+  .xl\:hidden {
+    @media (width >= 80rem) {
+      display: none;
+    }
+  }
+  .xl\:h-\[var\(--tool-sidebar-max-height\)\] {
+    @media (width >= 80rem) {
+      height: var(--tool-sidebar-max-height);
+    }
+  }
   .xl\:h-screen {
     @media (width >= 80rem) {
       height: 100vh;
     }
   }
+  .xl\:max-h-\[var\(--tool-sidebar-max-height\)\] {
+    @media (width >= 80rem) {
+      max-height: var(--tool-sidebar-max-height);
+    }
+  }
   .xl\:flex-none {
     @media (width >= 80rem) {
       flex: none;
     }
   }
+  .xl\:grid-cols-3 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .xl\:grid-cols-5 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -9715,6 +10051,16 @@
       grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.72fr);
     }
   }
+  .xl\:grid-cols-\[minmax\(18rem\,24rem\)_minmax\(0\,1fr\)\] {
+    @media (width >= 80rem) {
+      grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
+    }
+  }
+  .xl\:self-start {
+    @media (width >= 80rem) {
+      align-self: flex-start;
+    }
+  }
   .xl\:overflow-y-auto {
     @media (width >= 80rem) {
       overflow-y: auto;
@@ -9809,6 +10155,11 @@
       border-color: var(--danger-700);
     }
   }
+  .dark\:border-danger-800 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--danger-800);
+    }
+  }
   .dark\:border-danger-900\/60 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       border-color: var(--danger-900);
@@ -9894,6 +10245,11 @@
       border-color: var(--color-primary-200);
     }
   }
+  .dark\:border-primary-500 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-primary-500);
+    }
+  }
   .dark\:border-primary-600 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       border-color: var(--color-primary-600);