@nswds/app 1.16.1 → 1.17.0

package/dist/styles.css

@@ -804,6 +804,9 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
   .w-\[44px\] {
     width: 44px;
   }
@@ -888,6 +891,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1727,6 +1733,9 @@
   .text-gray-500 {
     color: var(--color-gray-500);
   }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
   .text-gray-800 {
     color: var(--color-gray-800);
   }
@@ -4431,27 +4440,27 @@
     }
   }
   .dark\:block {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       display: block;
     }
   }
   .dark\:hidden {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       display: none;
     }
   }
   .dark\:border-gray-600 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       border-color: var(--color-gray-600);
     }
   }
   .dark\:border-nsw-grey-50 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       border-color: var(--color-nsw-grey-50);
     }
   }
   .dark\:border-nsw-grey-200\/10 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       border-color: color-mix(in srgb, oklch(0.9401 0 0) 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-nsw-grey-200) 10%, transparent);
@@ -4459,7 +4468,7 @@
     }
   }
   .dark\:border-nsw-grey-200\/15 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       border-color: color-mix(in srgb, oklch(0.9401 0 0) 15%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-nsw-grey-200) 15%, transparent);
@@ -4467,7 +4476,7 @@
     }
   }
   .dark\:border-nsw-grey-200\/20 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='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);
@@ -4475,17 +4484,17 @@
     }
   }
   .dark\:border-slate-800 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       border-color: var(--color-slate-800);
     }
   }
   .dark\:border-white {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       border-color: var(--color-white);
     }
   }
   .dark\:border-white\/5 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       border-color: color-mix(in srgb, #fff 5%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
@@ -4493,37 +4502,37 @@
     }
   }
   .dark\:bg-\(--badge-bg\) {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: var(--badge-bg);
     }
   }
   .dark\:bg-\(--btn-bg\) {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: var(--btn-bg);
     }
   }
   .dark\:bg-blue-950 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: var(--color-blue-950);
     }
   }
   .dark\:bg-gray-700 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: var(--color-gray-700);
     }
   }
   .dark\:bg-gray-800 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: var(--color-gray-800);
     }
   }
   .dark\:bg-gray-900 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: var(--color-gray-900);
     }
   }
   .dark\:bg-input\/30 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--input) 30%, transparent);
@@ -4531,7 +4540,7 @@
     }
   }
   .dark\:bg-nsw-grey-100\/20 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: color-mix(in srgb, oklch(0.9700500000000001 0 0) 20%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-nsw-grey-100) 20%, transparent);
@@ -4539,12 +4548,12 @@
     }
   }
   .dark\:bg-nsw-grey-800 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: var(--color-nsw-grey-800);
     }
   }
   .dark\:bg-slate-900\/95 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 95%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-slate-900) 95%, transparent);
@@ -4552,12 +4561,12 @@
     }
   }
   .dark\:bg-transparent {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: transparent;
     }
   }
   .dark\:bg-white\/15 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       background-color: color-mix(in srgb, #fff 15%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
@@ -4565,67 +4574,67 @@
     }
   }
   .dark\:fill-nsw-grey-100 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       fill: var(--color-nsw-grey-100);
     }
   }
   .dark\:fill-white {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       fill: var(--color-white);
     }
   }
   .dark\:text-gray-400 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       color: var(--color-gray-400);
     }
   }
   .dark\:text-muted-foreground {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       color: var(--muted-foreground);
     }
   }
   .dark\:text-nsw-grey-200 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       color: var(--color-nsw-grey-200);
     }
   }
   .dark\:text-nsw-grey-400 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       color: var(--color-nsw-grey-400);
     }
   }
   .dark\:text-nsw-grey-800 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       color: var(--color-nsw-grey-800);
     }
   }
   .dark\:text-primary {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       color: oklch(0.29 0.1173 259.84);
     }
   }
   .dark\:text-primary-dark {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       color: oklch(0.23925 0.099705 259.84);
     }
   }
   .dark\:text-secondary {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       color: oklch(0.9267 0.0417 227.89);
     }
   }
   .dark\:text-slate-400 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       color: var(--color-slate-400);
     }
   }
   .dark\:text-white {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       color: var(--color-white);
     }
   }
   .dark\:text-white\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       color: color-mix(in srgb, #fff 80%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         color: color-mix(in oklab, var(--color-white) 80%, transparent);
@@ -4633,7 +4642,7 @@
     }
   }
   .dark\:shadow-none {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --tw-shadow: 0 0 #0000;
       box-shadow:
         var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
@@ -4641,7 +4650,7 @@
     }
   }
   .dark\:backdrop-blur-sm {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --tw-backdrop-blur: blur(var(--blur-sm));
       -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
         var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
@@ -4654,7 +4663,7 @@
     }
   }
   .dark\:\[--badge-bg\:var\(--color-accent\)\]\/50 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --badge-bg: color-mix(in srgb, oklch(0.562 0.2175 20.33) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --badge-bg: color-mix(in oklab, var(--color-accent) 50%, transparent);
@@ -4662,7 +4671,7 @@
     }
   }
   .dark\:\[--badge-bg\:var\(--color-error\)\]\/50 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --badge-bg: color-mix(in srgb, oklch(0.502 0.1927 18.08) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --badge-bg: color-mix(in oklab, var(--color-error) 50%, transparent);
@@ -4670,7 +4679,7 @@
     }
   }
   .dark\:\[--badge-bg\:var\(--color-info\)\]\/50 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --badge-bg: color-mix(in srgb, oklch(0.4506 0.1233 262.35) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --badge-bg: color-mix(in oklab, var(--color-info) 50%, transparent);
@@ -4678,12 +4687,12 @@
     }
   }
   .dark\:\[--badge-bg\:var\(--color-nsw-grey-100\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --badge-bg: var(--color-nsw-grey-100);
     }
   }
   .dark\:\[--badge-bg\:var\(--color-primary\)\]\/90 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --badge-bg: color-mix(in srgb, oklch(0.29 0.1173 259.84) 90%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --badge-bg: color-mix(in oklab, var(--color-primary) 90%, transparent);
@@ -4691,7 +4700,7 @@
     }
   }
   .dark\:\[--badge-bg\:var\(--color-secondary\)\]\/30 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --badge-bg: color-mix(in srgb, oklch(0.9267 0.0417 227.89) 30%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --badge-bg: color-mix(in oklab, var(--color-secondary) 30%, transparent);
@@ -4699,7 +4708,7 @@
     }
   }
   .dark\:\[--badge-bg\:var\(--color-success\)\]\/50 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --badge-bg: color-mix(in srgb, oklch(0.549 0.1849 142.8) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --badge-bg: color-mix(in oklab, var(--color-success) 50%, transparent);
@@ -4707,7 +4716,7 @@
     }
   }
   .dark\:\[--badge-bg\:var\(--color-tertiary\)\]\/50 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --badge-bg: color-mix(in srgb, oklch(0.5751 0.2298 260.76) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --badge-bg: color-mix(in oklab, var(--color-tertiary) 50%, transparent);
@@ -4715,7 +4724,7 @@
     }
   }
   .dark\:\[--badge-bg\:var\(--color-warning\)\]\/50 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --badge-bg: color-mix(in srgb, oklch(0.5833 0.169705 43.9973) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --badge-bg: color-mix(in oklab, var(--color-warning) 50%, transparent);
@@ -4723,37 +4732,37 @@
     }
   }
   .dark\:\[--badge-bg\:var\(--color-white\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --badge-bg: var(--color-white);
     }
   }
   .dark\:\[--badge-bg\:white\]\/15 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --badge-bg: color-mix(in oklab, white 15%, transparent);
     }
   }
   .dark\:\[--btn-bg\:var\(--color-nsw-grey-600\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --btn-bg: var(--color-nsw-grey-600);
     }
   }
   .dark\:\[--btn-bg\:var\(--color-nsw-grey-800\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --btn-bg: var(--color-nsw-grey-800);
     }
   }
   .dark\:\[--btn-bg\:var\(--color-primary-light\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --btn-bg: var(--color-primary-light);
     }
   }
   .dark\:\[--btn-bg\:white\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --btn-bg: white;
     }
   }
   .dark\:\[--btn-hover-overlay\:var\(--color-nsw-grey-800\)\]\/5 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --btn-hover-overlay: color-mix(in srgb, oklch(0.2694 0.0104 242.08) 5%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --btn-hover-overlay: color-mix(in oklab, var(--color-nsw-grey-800) 5%, transparent);
@@ -4761,7 +4770,7 @@
     }
   }
   .dark\:\[--btn-hover-overlay\:var\(--color-primary-dark\)\]\/5 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --btn-hover-overlay: color-mix(in srgb, oklch(0.23925 0.099705 259.84) 5%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --btn-hover-overlay: color-mix(in oklab, var(--color-primary-dark) 5%, transparent);
@@ -4769,7 +4778,7 @@
     }
   }
   .dark\:\[--btn-hover-overlay\:var\(--color-white\)\]\/5 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --btn-hover-overlay: color-mix(in srgb, #fff 5%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --btn-hover-overlay: color-mix(in oklab, var(--color-white) 5%, transparent);
@@ -4777,17 +4786,17 @@
     }
   }
   .dark\:\[--btn-icon\:var\(--color-primary-dark\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --btn-icon: var(--color-primary-dark);
     }
   }
   .dark\:\[--btn-icon\:var\(--color-white\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --btn-icon: var(--color-white);
     }
   }
   .dark\:\[--focus-outline\:var\(--color-accent-dark\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: color-mix(
         in srgb,
         oklch(0.50075 0.19485 19.529999999999998) 80%,
@@ -4799,7 +4808,7 @@
     }
   }
   .dark\:\[--focus-outline\:var\(--color-error-dark\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: color-mix(
         in srgb,
         oklch(0.41415 0.16379500000000002 18.08) 80%,
@@ -4811,7 +4820,7 @@
     }
   }
   .dark\:\[--focus-outline\:var\(--color-info-dark\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: color-mix(
         in srgb,
         oklch(0.371745 0.10480500000000001 262.35) 80%,
@@ -4823,12 +4832,12 @@
     }
   }
   .dark\:\[--focus-outline\:var\(--color-primary-light\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: var(--color-primary-light);
     }
   }
   .dark\:\[--focus-outline\:var\(--color-secondary\)\]\/55 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: color-mix(in srgb, oklch(0.9267 0.0417 227.89) 55%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --focus-outline: color-mix(in oklab, var(--color-secondary) 55%, transparent);
@@ -4836,7 +4845,7 @@
     }
   }
   .dark\:\[--focus-outline\:var\(--color-success-dark\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: color-mix(in srgb, oklch(0.452925 0.157165 142.8) 80%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --focus-outline: color-mix(in oklab, var(--color-success-dark) 80%, transparent);
@@ -4844,7 +4853,7 @@
     }
   }
   .dark\:\[--focus-outline\:var\(--color-tertiary\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: color-mix(in srgb, oklch(0.5751 0.2298 260.76) 80%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --focus-outline: color-mix(in oklab, var(--color-tertiary) 80%, transparent);
@@ -4852,7 +4861,7 @@
     }
   }
   .dark\:\[--focus-outline\:var\(--color-warning-dark\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: color-mix(in srgb, oklch(0.4812225 0.14424925 43.9973) 80%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --focus-outline: color-mix(in oklab, var(--color-warning-dark) 80%, transparent);
@@ -4860,12 +4869,12 @@
     }
   }
   .dark\:\[--focus-outline\:var\(--color-white\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: var(--color-white);
     }
   }
   .dark\:\[--focus-outline\:var\(--color-white\)\]\/25 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: color-mix(in srgb, #fff 25%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --focus-outline: color-mix(in oklab, var(--color-white) 25%, transparent);
@@ -4873,22 +4882,22 @@
     }
   }
   .dark\:\[--focus-outline\:white\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: white;
     }
   }
   .dark\:\[--focus-outline\:white\]\/30 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --focus-outline: color-mix(in oklab, white 30%, transparent);
     }
   }
   .dark\:\[--toggle-border\:white\]\/40 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       --toggle-border: color-mix(in oklab, white 40%, transparent);
     }
   }
   .dark\:group-hover\:fill-nsw-grey-500 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group):hover *) {
         @media (hover: hover) {
           fill: var(--color-nsw-grey-500);
@@ -4897,7 +4906,7 @@
     }
   }
   .dark\:group-data-active\:bg-white\/15 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-active] *) {
         background-color: color-mix(in srgb, #fff 15%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -4907,7 +4916,7 @@
     }
   }
   .dark\:group-data-hover\:border-nsw-grey-200\/20 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         border-color: color-mix(in srgb, oklch(0.9401 0 0) 20%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -4917,7 +4926,7 @@
     }
   }
   .dark\:group-data-hover\:bg-white\/10 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         background-color: color-mix(in srgb, #fff 10%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -4927,7 +4936,7 @@
     }
   }
   .dark\:group-data-hover\:bg-white\/20 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         background-color: color-mix(in srgb, #fff 20%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -4937,7 +4946,7 @@
     }
   }
   .dark\:group-data-hover\:\[--badge-bg\:var\(--color-accent\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         --badge-bg: color-mix(in srgb, oklch(0.562 0.2175 20.33) 80%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -4947,7 +4956,7 @@
     }
   }
   .dark\:group-data-hover\:\[--badge-bg\:var\(--color-error\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         --badge-bg: color-mix(in srgb, oklch(0.502 0.1927 18.08) 80%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -4957,7 +4966,7 @@
     }
   }
   .dark\:group-data-hover\:\[--badge-bg\:var\(--color-info\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         --badge-bg: color-mix(in srgb, oklch(0.4506 0.1233 262.35) 80%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -4967,28 +4976,28 @@
     }
   }
   .dark\:group-data-hover\:\[--badge-bg\:var\(--color-nsw-grey-100\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         --badge-bg: var(--color-nsw-grey-100);
       }
     }
   }
   .dark\:group-data-hover\:\[--badge-bg\:var\(--color-nsw-grey-200\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         --badge-bg: var(--color-nsw-grey-200);
       }
     }
   }
   .dark\:group-data-hover\:\[--badge-bg\:var\(--color-primary-light\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         --badge-bg: var(--color-primary-light);
       }
     }
   }
   .dark\:group-data-hover\:\[--badge-bg\:var\(--color-secondary\)\]\/45 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         --badge-bg: color-mix(in srgb, oklch(0.9267 0.0417 227.89) 45%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -4998,7 +5007,7 @@
     }
   }
   .dark\:group-data-hover\:\[--badge-bg\:var\(--color-success\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         --badge-bg: color-mix(in srgb, oklch(0.549 0.1849 142.8) 80%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -5008,7 +5017,7 @@
     }
   }
   .dark\:group-data-hover\:\[--badge-bg\:var\(--color-tertiary\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         --badge-bg: color-mix(in srgb, oklch(0.5751 0.2298 260.76) 80%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -5018,7 +5027,7 @@
     }
   }
   .dark\:group-data-hover\:\[--badge-bg\:var\(--color-warning\)\]\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         --badge-bg: color-mix(in srgb, oklch(0.5833 0.169705 43.9973) 80%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -5028,21 +5037,21 @@
     }
   }
   .dark\:group-data-hover\:\[--badge-bg\:white\]\/20 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-hover] *) {
         --badge-bg: color-mix(in oklab, white 20%, transparent);
       }
     }
   }
   .dark\:group-data-\[state\=checked\]\:border-nsw-grey-400 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:is(:where(.group)[data-state='checked'] *) {
         border-color: var(--color-nsw-grey-400);
       }
     }
   }
   .dark\:before\:hidden {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &::before {
         content: var(--tw-content);
         display: none;
@@ -5050,7 +5059,7 @@
     }
   }
   .dark\:after\:-inset-px {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &::after {
         content: var(--tw-content);
         inset: -1px;
@@ -5058,7 +5067,7 @@
     }
   }
   .dark\:after\:rounded-sm {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &::after {
         content: var(--tw-content);
         border-radius: var(--radius-sm);
@@ -5066,7 +5075,7 @@
     }
   }
   .dark\:hover\:border-nsw-grey-400 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:hover {
         @media (hover: hover) {
           border-color: var(--color-nsw-grey-400);
@@ -5075,7 +5084,7 @@
     }
   }
   .dark\:hover\:bg-gray-700 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--color-gray-700);
@@ -5084,7 +5093,7 @@
     }
   }
   .dark\:hover\:bg-input\/50 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--input);
@@ -5096,7 +5105,7 @@
     }
   }
   .dark\:hover\:bg-nsw-grey-700 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--color-nsw-grey-700);
@@ -5105,7 +5114,7 @@
     }
   }
   .dark\:hover\:bg-white\/10 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:hover {
         @media (hover: hover) {
           background-color: color-mix(in srgb, #fff 10%, transparent);
@@ -5117,7 +5126,7 @@
     }
   }
   .dark\:hover\:text-slate-300 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:hover {
         @media (hover: hover) {
           color: var(--color-slate-300);
@@ -5126,7 +5135,7 @@
     }
   }
   .dark\:hover\:text-white {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:hover {
         @media (hover: hover) {
           color: var(--color-white);
@@ -5137,14 +5146,14 @@
   .hover\:dark\:text-gray-300 {
     &:hover {
       @media (hover: hover) {
-        &:where(.dark, .dark *) {
+        &:where([data-theme='dark'], [data-theme='dark'] *) {
           color: var(--color-gray-300);
         }
       }
     }
   }
   .dark\:hover\:outline-white\/10 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:hover {
         @media (hover: hover) {
           outline-color: color-mix(in srgb, #fff 10%, transparent);
@@ -5156,7 +5165,7 @@
     }
   }
   .dark\:hover\:\[--toggle-border\:white\]\/50 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:hover {
         @media (hover: hover) {
           --toggle-border: color-mix(in oklab, white 50%, transparent);
@@ -5165,7 +5174,7 @@
     }
   }
   .dark\:focus\:outline-nsw-grey-300\/20 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:focus {
         outline-color: color-mix(in srgb, oklch(0.9016 0.0039 294.435) 20%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -5175,28 +5184,28 @@
     }
   }
   .dark\:focus\:outline-white {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &:focus {
         outline-color: var(--color-white);
       }
     }
   }
   .dark\:aria-invalid\:ring-error\/40 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[aria-invalid='true'] {
         --tw-ring-color: color-mix(in oklab, oklch(0.502 0.1927 18.08) 40%, transparent);
       }
     }
   }
   .dark\:data-active\:bg-white {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-active] {
         background-color: var(--color-white);
       }
     }
   }
   .dark\:data-active\:bg-white\/10 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-active] {
         background-color: color-mix(in srgb, #fff 10%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -5206,49 +5215,49 @@
     }
   }
   .dark\:data-active\:text-primary {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-active] {
         color: oklch(0.29 0.1173 259.84);
       }
     }
   }
   .dark\:data-active\:\[--btn-icon\:var\(--color-nsw-grey-50\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-active] {
         --btn-icon: var(--color-nsw-grey-50);
       }
     }
   }
   .dark\:data-active\:\[--btn-icon\:var\(--color-primary\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-active] {
         --btn-icon: var(--color-primary);
       }
     }
   }
   .dark\:data-active\:\[--btn-icon\:var\(--color-primary-darker\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-active] {
         --btn-icon: var(--color-primary-darker);
       }
     }
   }
   .dark\:data-active\:\[--btn-icon\:var\(--color-white\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-active] {
         --btn-icon: var(--color-white);
       }
     }
   }
   .dark\:data-hover\:bg-white {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-hover] {
         background-color: var(--color-white);
       }
     }
   }
   .dark\:data-hover\:bg-white\/10 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-hover] {
         background-color: color-mix(in srgb, #fff 10%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -5258,42 +5267,42 @@
     }
   }
   .dark\:data-hover\:text-primary {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-hover] {
         color: oklch(0.29 0.1173 259.84);
       }
     }
   }
   .dark\:data-hover\:\[--btn-icon\:var\(--color-nsw-grey-50\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-hover] {
         --btn-icon: var(--color-nsw-grey-50);
       }
     }
   }
   .dark\:data-hover\:\[--btn-icon\:var\(--color-primary\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-hover] {
         --btn-icon: var(--color-primary);
       }
     }
   }
   .dark\:data-hover\:\[--btn-icon\:var\(--color-primary-darker\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-hover] {
         --btn-icon: var(--color-primary-darker);
       }
     }
   }
   .dark\:data-hover\:\[--btn-icon\:var\(--color-white\)\] {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-hover] {
         --btn-icon: var(--color-white);
       }
     }
   }
   .dark\:data-\[state\=active\]\:bg-input\/30 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-state='active'] {
         background-color: var(--input);
         @supports (color: color-mix(in lab, red, red)) {
@@ -5303,21 +5312,21 @@
     }
   }
   .dark\:data-\[state\=active\]\:text-foreground {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-state='active'] {
         color: var(--foreground);
       }
     }
   }
   .dark\:data-\[state\=checked\]\:bg-primary {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-state='checked'] {
         background-color: oklch(0.29 0.1173 259.84);
       }
     }
   }
   .dark\:data-\[state\=on\]\:bg-white\/10 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-state='on'] {
         background-color: color-mix(in srgb, #fff 10%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -5327,21 +5336,21 @@
     }
   }
   .dark\:data-\[state\=on\]\:text-white {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-state='on'] {
         color: var(--color-white);
       }
     }
   }
   .dark\:data-\[state\=unchecked\]\:bg-foreground {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-state='unchecked'] {
         background-color: var(--foreground);
       }
     }
   }
   .dark\:data-\[state\=unchecked\]\:bg-input\/80 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       &[data-state='unchecked'] {
         background-color: var(--input);
         @supports (color: color-mix(in lab, red, red)) {
@@ -5585,7 +5594,7 @@
     }
   }
   .dark\:\[\@supports\(backdrop-filter\:blur\(0\)\)\]\:bg-slate-900\/75 {
-    &:where(.dark, .dark *) {
+    &:where([data-theme='dark'], [data-theme='dark'] *) {
       @supports (backdrop-filter: blur(0)) {
         background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 75%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -5604,7 +5613,7 @@
   --input: var(--color-nsw-grey-200);
   --ring: var(--color-nsw-grey-600);
 }
-.dark {
+[data-theme='dark'] {
   --background: var(--color-nsw-grey-900);
   --foreground: var(--color-nsw-grey-50);
   --muted: var(--color-nsw-grey-600);
@@ -5629,6 +5638,556 @@
     display: none;
   }
 }
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #ccc;
+  background: none;
+  font-family:
+    Consolas,
+    Monaco,
+    Andale Mono,
+    Ubuntu Mono,
+    monospace;
+  font-size: 1em;
+  word-wrap: normal;
+}
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #2d2d2d;
+}
+:not(pre) > code[class*='language-'] {
+  white-space: normal;
+}
+.token.block-comment,
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #999;
+}
+.token.punctuation {
+  color: #ccc;
+}
+.token.attr-name,
+.token.deleted,
+.token.namespace,
+.token.tag {
+  color: #e2777a;
+}
+.token.function-name {
+  color: #6196cc;
+}
+.token.boolean,
+.token.function,
+.token.number {
+  color: #f08d49;
+}
+.token.class-name,
+.token.constant,
+.token.property,
+.token.symbol {
+  color: #f8c555;
+}
+.token.atrule,
+.token.builtin,
+.token.important,
+.token.keyword,
+.token.selector {
+  color: #cc99cd;
+}
+.token.attr-value,
+.token.char,
+.token.regex,
+.token.string,
+.token.variable {
+  color: #7ec699;
+}
+.token.entity,
+.token.operator,
+.token.url {
+  color: #67cdcc;
+}
+.token.inserted {
+  color: green;
+}
+.code-responsive-wrapper {
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fillRule='evenodd'%3E%3Cg fill='%23d1d5db' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+code[class*='language-'],
+pre[class*='language-'] {
+  margin-bottom: 1.25rem;
+  margin-top: 0;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(231 70 148 / var(--tw-text-opacity, 1));
+  font-family:
+    Menlo,
+    ui-monospace,
+    SFMono-Regular,
+    Monaco,
+    Consolas,
+    Liberation Mono,
+    Courier New,
+    monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+  text-shadow: none;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  hyphens: none;
+}
+div + pre[class*='language-'] {
+  margin-bottom: 0;
+}
+.highlight {
+  overflow: hidden;
+}
+.highlight-line {
+  display: block;
+  padding-left: 1em;
+  margin-left: -1em;
+  margin-right: -1em;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+.highlight pre[class*='language-'] {
+  margin: 1rem 0 2rem;
+  border-radius: 0.75rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  padding: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.code-preview-wrapper + .code-syntax-wrapper > .code-syntax,
+.code-preview-wrapper
+  + .code-syntax-wrapper
+  > .code-syntax
+  > .relative
+  > [data-code-wrapper]
+  > .highlight
+  pre[class*='language-'] {
+  margin-top: 0;
+  border-radius: 0;
+}
+.code-preview-wrapper + .code-syntax-wrapper {
+  margin-bottom: 1rem;
+}
+.code-preview-wrapper
+  + .code-syntax-wrapper
+  > .code-syntax
+  > .relative
+  > [data-code-wrapper]
+  > .highlight
+  > pre[class*='language-'] {
+  margin: 0;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  padding: 1rem;
+}
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.token.punctuation {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.class-name,
+.token.keyword,
+.token.property,
+.token.tag {
+  --tw-text-opacity: 1;
+  color: rgb(126 58 242 / var(--tw-text-opacity, 1));
+}
+.token.boolean,
+.token.constant {
+  --tw-text-opacity: 1;
+  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
+}
+.token.deleted,
+.token.symbol {
+  --tw-text-opacity: 1;
+  color: rgb(240 82 82 / var(--tw-text-opacity, 1));
+}
+.token.number {
+  --tw-text-opacity: 1;
+  color: rgb(231 70 148 / var(--tw-text-opacity, 1));
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
+}
+.token.variable {
+  --tw-text-opacity: 1;
+  color: rgb(144 97 249 / var(--tw-text-opacity, 1));
+}
+.token.operator {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.token.entity {
+  --tw-text-opacity: 1;
+  color: rgb(227 160 8 / var(--tw-text-opacity, 1));
+  cursor: help;
+}
+.token.url {
+  --tw-text-opacity: 1;
+  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
+}
+.language-css .token.string,
+.style .token.string {
+  --tw-text-opacity: 1;
+  color: rgb(240 82 82 / var(--tw-text-opacity, 1));
+}
+.token.atrule,
+.token.attr-value {
+  --tw-text-opacity: 1;
+  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
+}
+.token.function {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.token.regex {
+  color: #e9c062;
+}
+.token.important {
+  color: #fd971f;
+}
+.token.bold,
+.token.important {
+  font-weight: 700;
+}
+.token.italic {
+  font-style: italic;
+}
+.token {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+code.language-bash,
+code.language-tsx,
+pre.language-bash {
+  --tw-text-opacity: 1;
+  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
+}
+code.language-tsx .token.function {
+  --tw-text-opacity: 1;
+  color: rgb(14 159 110 / var(--tw-text-opacity, 1));
+}
+code.language-tsx .token.punctuation {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+code.language-tsx .token.keyword {
+  --tw-text-opacity: 1;
+  color: rgb(217 70 239 / var(--tw-text-opacity, 1));
+}
+code.language-tsx .token.comment {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+code.language-tsx .token.class-name,
+code.language-tsx .token.string {
+  --tw-text-opacity: 1;
+  color: rgb(126 58 242 / var(--tw-text-opacity, 1));
+}
+code.language-tsx .token {
+  background: transparent;
+}
+code.language-html .token.tag {
+  --tw-text-opacity: 1;
+  color: rgb(162 28 175 / var(--tw-text-opacity, 1));
+}
+code.language-html .token.attr-name {
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+code.language-html .token.attr-value {
+  --tw-text-opacity: 1;
+  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
+}
+code.language-html .token.punctuation {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+code.language-html .token.attr-name {
+  --tw-text-opacity: 1;
+  color: rgb(5 122 85 / var(--tw-text-opacity, 1));
+}
+code.language-html .token.comment {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+#carbonads {
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
+  margin: 0;
+  display: flex;
+  max-width: 330px;
+  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+#carbonads a {
+  text-decoration: none;
+}
+#carbonads a,
+#carbonads a:hover {
+  color: inherit;
+}
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+#carbonads .carbon-wrap {
+  display: flex;
+}
+#carbonads .carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+#carbonads .carbon-img img {
+  display: block;
+}
+#carbonads .carbon-text {
+  font-size: 13px;
+  padding: 10px;
+  margin-bottom: 16px;
+  line-height: 1.5;
+  text-align: left;
+}
+#carbonads .carbon-poweredby {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  display: block;
+  padding: 6px 8px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 1;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.dark .code-responsive-wrapper {
+  background-color: #111827;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fillRule='evenodd'%3E%3Cg fill='%236b7280' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+.dark code[class*='language-'],
+.dark pre[class*='language-'] {
+  --tw-text-opacity: 1;
+  color: rgb(241 126 184 / var(--tw-text-opacity, 1));
+}
+.dark .highlight-line {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
+.dark
+  .code-preview-wrapper
+  + .code-syntax-wrapper
+  > .code-syntax
+  > .relative
+  > [data-code-wrapper]
+  > .highlight
+  > pre[class*='language-'],
+.dark .highlight pre[class*='language-'],
+.dark :not(pre) > code[class*='language-'],
+.dark pre[class*='language-'] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
+.dark .token.cdata,
+.dark .token.comment,
+.dark .token.doctype,
+.dark .token.prolog {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.dark .token.punctuation {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.dark .token.class-name,
+.dark .token.keyword,
+.dark .token.property,
+.dark .token.tag {
+  --tw-text-opacity: 1;
+  color: rgb(172 148 250 / var(--tw-text-opacity, 1));
+}
+.dark .token.boolean,
+.dark .token.constant {
+  --tw-text-opacity: 1;
+  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
+}
+.dark .token.deleted,
+.dark .token.symbol {
+  --tw-text-opacity: 1;
+  color: rgb(249 128 128 / var(--tw-text-opacity, 1));
+}
+.dark .token.number {
+  --tw-text-opacity: 1;
+  color: rgb(241 126 184 / var(--tw-text-opacity, 1));
+}
+.dark .token.attr-name,
+.dark .token.builtin,
+.dark .token.char,
+.dark .token.inserted,
+.dark .token.selector,
+.dark .token.string {
+  --tw-text-opacity: 1;
+  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
+}
+.dark .token.variable {
+  --tw-text-opacity: 1;
+  color: rgb(172 148 250 / var(--tw-text-opacity, 1));
+}
+.dark .token.operator {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.dark .token.entity {
+  --tw-text-opacity: 1;
+  color: rgb(250 202 21 / var(--tw-text-opacity, 1));
+}
+.dark .token.url {
+  --tw-text-opacity: 1;
+  color: rgb(6 182 212 / var(--tw-text-opacity, 1));
+}
+.dark .language-css .token.string,
+.dark .style .token.string {
+  --tw-text-opacity: 1;
+  color: rgb(249 128 128 / var(--tw-text-opacity, 1));
+}
+.dark .token.atrule,
+.dark .token.attr-value {
+  --tw-text-opacity: 1;
+  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
+}
+.dark .token.function {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.dark .token {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.dark code.language-bash,
+.dark code.language-tsx,
+.dark pre.language-bash {
+  --tw-text-opacity: 1;
+  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
+}
+.dark code.language-tsx .token.function {
+  --tw-text-opacity: 1;
+  color: rgb(132 225 188 / var(--tw-text-opacity, 1));
+}
+.dark code.language-tsx .token.punctuation {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.dark code.language-tsx .token.keyword {
+  --tw-text-opacity: 1;
+  color: rgb(232 121 249 / var(--tw-text-opacity, 1));
+}
+.dark code.language-tsx .token.comment {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.dark code.language-tsx .token.class-name,
+.dark code.language-tsx .token.string {
+  --tw-text-opacity: 1;
+  color: rgb(172 148 250 / var(--tw-text-opacity, 1));
+}
+.dark code.language-html .token.tag {
+  --tw-text-opacity: 1;
+  color: rgb(232 121 249 / var(--tw-text-opacity, 1));
+}
+.dark code.language-html .token.attr-name {
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.dark code.language-html .token.attr-value {
+  --tw-text-opacity: 1;
+  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
+}
+.dark code.language-html .token.punctuation {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.dark code.language-html .token.attr-name {
+  --tw-text-opacity: 1;
+  color: rgb(49 196 141 / var(--tw-text-opacity, 1));
+}
+.dark code.language-html .token.comment {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.dark #carbonads {
+  --tw-bg-opacity: 1;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.dark #carbonads,
+.dark #carbonads .carbon-poweredby {
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
+.dark #carbonads .carbon-poweredby {
+  --tw-bg-opacity: 1;
+}
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);