@kompasid/lit-web-components 0.9.4 → 0.9.10

package/tailwind/tailwind.ts

@@ -1,8 +1,118 @@
 import { css } from 'lit'
 
 export const TWStyles = css`
+  *,
+  ::before,
+  ::after {
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(4 104 203 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
+    --tw-contain-size: ;
+    --tw-contain-layout: ;
+    --tw-contain-paint: ;
+    --tw-contain-style: ;
+  }
+
+  ::backdrop {
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(4 104 203 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
+    --tw-contain-size: ;
+    --tw-contain-layout: ;
+    --tw-contain-paint: ;
+    --tw-contain-style: ;
+  }
+
   /*
-! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 */
 
   /*
@@ -35,9 +145,11 @@ export const TWStyles = css`
 4. Use the user's configured sans font-family by default.
 5. Use the user's configured sans font-feature-settings by default.
 6. Use the user's configured sans font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-  html {
+  html,
+  :host {
     line-height: 1.5;
     /* 1 */
     -webkit-text-size-adjust: 100%;
@@ -47,15 +159,15 @@ export const TWStyles = css`
     -o-tab-size: 4;
     tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-      'Noto Color Emoji';
+    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     /* 4 */
     font-feature-settings: normal;
     /* 5 */
     font-variation-settings: normal;
     /* 6 */
+    -webkit-tap-highlight-color: transparent;
+    /* 7 */
   }
 
   /*
@@ -127,8 +239,10 @@ Add the correct font weight in Edge and Safari.
   }
 
   /*
-1. Use the user's configured mono font family by default.
-2. Correct the odd em font sizing in all browsers.
+1. Use the user's configured mono font-family by default.
+2. Use the user's configured mono font-feature-settings by default.
+3. Use the user's configured mono font-variation-settings by default.
+4. Correct the odd em font sizing in all browsers.
 */
 
   code,
@@ -138,8 +252,12 @@ Add the correct font weight in Edge and Safari.
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
       'Liberation Mono', 'Courier New', monospace;
     /* 1 */
-    font-size: 1em;
+    font-feature-settings: normal;
     /* 2 */
+    font-variation-settings: normal;
+    /* 3 */
+    font-size: 1em;
+    /* 4 */
   }
 
   /*
@@ -208,6 +326,8 @@ Prevent sub and sup elements from affecting the line height in all browsers.
     /* 1 */
     line-height: inherit;
     /* 1 */
+    letter-spacing: inherit;
+    /* 1 */
     color: inherit;
     /* 1 */
     margin: 0;
@@ -231,9 +351,9 @@ Remove the inheritance of text transform in Edge and Firefox.
 */
 
   button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
+  input:where([type='button']),
+  input:where([type='reset']),
+  input:where([type='submit']) {
     -webkit-appearance: button;
     /* 1 */
     background-color: transparent;
@@ -438,112 +558,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 
   /* Make elements with the HTML hidden attribute stay hidden by default */
 
-  [hidden] {
+  [hidden]:where(:not([hidden='until-found'])) {
     display: none;
   }
 
-  *,
-  ::before,
-  ::after {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(4 104 203 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
-  }
-
-  ::backdrop {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(4 104 203 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
-  }
-
   .collapse {
     visibility: collapse;
   }
@@ -720,10 +738,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-bottom: 1.5rem;
   }
 
-  .ml-0 {
-    margin-left: 0px;
-  }
-
   .ml-0\\.5 {
     margin-left: 0.125rem;
   }
@@ -772,10 +786,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-right: 1.5rem;
   }
 
-  .mt-0 {
-    margin-top: 0px;
-  }
-
   .mt-0\\.5 {
     margin-top: 0.125rem;
   }
@@ -808,14 +818,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-top: 2rem;
   }
 
-  .ml-\\[6px\\] {
-    margin-left: 6px;
-  }
-
-  .ml-1\\.5 {
-    margin-left: 0.375rem;
-  }
-
   .block {
     display: block;
   }
@@ -1025,6 +1027,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 296px;
   }
 
+  .w-\\[312px\\] {
+    width: 312px;
+  }
+
   .w-\\[328px\\] {
     width: 328px;
   }
@@ -1046,14 +1052,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 100vw;
   }
 
-  .w-\\[312px\\] {
-    width: 312px;
-  }
-
-  .w-2\\.5 {
-    width: 0.625rem;
-  }
-
   .max-w-7xl {
     max-width: 80rem;
   }
@@ -1355,202 +1353,197 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 
   .border-\\[\\#DDD\\] {
     --tw-border-opacity: 1;
-    border-color: rgb(221 221 221 / var(--tw-border-opacity));
+    border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));
   }
 
   .border-blue-200 {
     --tw-border-opacity: 1;
-    border-color: rgb(147 200 253 / var(--tw-border-opacity));
+    border-color: rgb(147 200 253 / var(--tw-border-opacity, 1));
   }
 
   .border-brand-1 {
     --tw-border-opacity: 1;
-    border-color: rgb(0 85 154 / var(--tw-border-opacity));
+    border-color: rgb(0 85 154 / var(--tw-border-opacity, 1));
   }
 
   .border-dark-6 {
     --tw-border-opacity: 1;
-    border-color: rgb(46 46 46 / var(--tw-border-opacity));
+    border-color: rgb(46 46 46 / var(--tw-border-opacity, 1));
   }
 
   .border-dark-8 {
     --tw-border-opacity: 1;
-    border-color: rgb(136 136 136 / var(--tw-border-opacity));
+    border-color: rgb(136 136 136 / var(--tw-border-opacity, 1));
   }
 
   .border-dark-9 {
     --tw-border-opacity: 1;
-    border-color: rgb(35 35 35 / var(--tw-border-opacity));
+    border-color: rgb(35 35 35 / var(--tw-border-opacity, 1));
   }
 
   .border-green-400 {
     --tw-border-opacity: 1;
-    border-color: rgb(106 195 34 / var(--tw-border-opacity));
+    border-color: rgb(106 195 34 / var(--tw-border-opacity, 1));
   }
 
   .border-green-500 {
     --tw-border-opacity: 1;
-    border-color: rgb(80 167 24 / var(--tw-border-opacity));
+    border-color: rgb(80 167 24 / var(--tw-border-opacity, 1));
   }
 
   .border-grey-100 {
     --tw-border-opacity: 1;
-    border-color: rgb(255 255 255 / var(--tw-border-opacity));
+    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
   }
 
   .border-grey-200 {
     --tw-border-opacity: 1;
-    border-color: rgb(238 238 238 / var(--tw-border-opacity));
+    border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));
   }
 
   .border-grey-300 {
     --tw-border-opacity: 1;
-    border-color: rgb(221 221 221 / var(--tw-border-opacity));
+    border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));
   }
 
   .border-grey-400 {
     --tw-border-opacity: 1;
-    border-color: rgb(153 153 153 / var(--tw-border-opacity));
+    border-color: rgb(153 153 153 / var(--tw-border-opacity, 1));
   }
 
   .border-white {
     --tw-border-opacity: 1;
-    border-color: rgb(255 255 255 / var(--tw-border-opacity));
+    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
   }
 
   .border-yellow-400 {
     --tw-border-opacity: 1;
-    border-color: rgb(255 204 0 / var(--tw-border-opacity));
+    border-color: rgb(255 204 0 / var(--tw-border-opacity, 1));
   }
 
   .bg-\\[\\#2C2C2C\\] {
     --tw-bg-opacity: 1;
-    background-color: rgb(44 44 44 / var(--tw-bg-opacity));
+    background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));
   }
 
-  .bg-\\[\\#93c8fd\\] {
+  .bg-\\[\\#E1F0FF\\] {
     --tw-bg-opacity: 1;
-    background-color: rgb(147 200 253 / var(--tw-bg-opacity));
+    background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));
   }
 
   .bg-\\[\\#FFFFFF\\] {
     --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   }
 
   .bg-\\[\\#e1f0ff\\] {
     --tw-bg-opacity: 1;
-    background-color: rgb(225 240 255 / var(--tw-bg-opacity));
+    background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));
   }
 
   .bg-black {
     --tw-bg-opacity: 1;
-    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
   }
 
   .bg-blue-100 {
     --tw-bg-opacity: 1;
-    background-color: rgb(225 240 255 / var(--tw-bg-opacity));
+    background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));
   }
 
   .bg-blue-200 {
     --tw-bg-opacity: 1;
-    background-color: rgb(147 200 253 / var(--tw-bg-opacity));
+    background-color: rgb(147 200 253 / var(--tw-bg-opacity, 1));
   }
 
   .bg-blue-600 {
     --tw-bg-opacity: 1;
-    background-color: rgb(3 86 168 / var(--tw-bg-opacity));
+    background-color: rgb(3 86 168 / var(--tw-bg-opacity, 1));
   }
 
   .bg-brand-1 {
     --tw-bg-opacity: 1;
-    background-color: rgb(0 85 154 / var(--tw-bg-opacity));
+    background-color: rgb(0 85 154 / var(--tw-bg-opacity, 1));
   }
 
   .bg-dark-3 {
     --tw-bg-opacity: 1;
-    background-color: rgb(37 37 37 / var(--tw-bg-opacity));
+    background-color: rgb(37 37 37 / var(--tw-bg-opacity, 1));
   }
 
   .bg-dark-4 {
     --tw-bg-opacity: 1;
-    background-color: rgb(30 30 30 / var(--tw-bg-opacity));
+    background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));
   }
 
   .bg-dark-5 {
     --tw-bg-opacity: 1;
-    background-color: rgb(18 18 18 / var(--tw-bg-opacity));
+    background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
   }
 
   .bg-dark-6 {
     --tw-bg-opacity: 1;
-    background-color: rgb(46 46 46 / var(--tw-bg-opacity));
+    background-color: rgb(46 46 46 / var(--tw-bg-opacity, 1));
   }
 
   .bg-green-100 {
     --tw-bg-opacity: 1;
-    background-color: rgb(238 252 210 / var(--tw-bg-opacity));
+    background-color: rgb(238 252 210 / var(--tw-bg-opacity, 1));
   }
 
   .bg-green-300 {
     --tw-bg-opacity: 1;
-    background-color: rgb(151 219 83 / var(--tw-bg-opacity));
+    background-color: rgb(151 219 83 / var(--tw-bg-opacity, 1));
   }
 
   .bg-green-500 {
     --tw-bg-opacity: 1;
-    background-color: rgb(80 167 24 / var(--tw-bg-opacity));
+    background-color: rgb(80 167 24 / var(--tw-bg-opacity, 1));
   }
 
   .bg-grey-100 {
     --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   }
 
   .bg-grey-200 {
     --tw-bg-opacity: 1;
-    background-color: rgb(238 238 238 / var(--tw-bg-opacity));
+    background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
   }
 
   .bg-grey-300 {
     --tw-bg-opacity: 1;
-    background-color: rgb(221 221 221 / var(--tw-bg-opacity));
+    background-color: rgb(221 221 221 / var(--tw-bg-opacity, 1));
   }
 
   .bg-grey-600 {
     --tw-bg-opacity: 1;
-    background-color: rgb(51 51 51 / var(--tw-bg-opacity));
+    background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
   }
 
   .bg-orange-100 {
     --tw-bg-opacity: 1;
-    background-color: rgb(255 238 204 / var(--tw-bg-opacity));
+    background-color: rgb(255 238 204 / var(--tw-bg-opacity, 1));
   }
 
   .bg-orange-600 {
     --tw-bg-opacity: 1;
-    background-color: rgb(183 68 0 / var(--tw-bg-opacity));
+    background-color: rgb(183 68 0 / var(--tw-bg-opacity, 1));
   }
 
   .bg-red-100 {
     --tw-bg-opacity: 1;
-    background-color: rgb(254 225 207 / var(--tw-bg-opacity));
+    background-color: rgb(254 225 207 / var(--tw-bg-opacity, 1));
   }
 
   .bg-white {
     --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   }
 
   .bg-yellow-300 {
     --tw-bg-opacity: 1;
-    background-color: rgb(255 220 63 / var(--tw-bg-opacity));
-  }
-
-  .bg-\\[\\#E1F0FF\\] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(225 240 255 / var(--tw-bg-opacity));
+    background-color: rgb(255 220 63 / var(--tw-bg-opacity, 1));
   }
 
   .bg-opacity-75 {
@@ -1600,6 +1593,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-right: 0px;
   }
 
+  .px-1\\.5 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+
   .px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -1635,11 +1633,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-right: 22px;
   }
 
-  .py-0 {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
   .py-0\\.5 {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
@@ -1680,16 +1673,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 5.6px;
   }
 
-  .px-1 {
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-  }
-
-  .px-1\\.5 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-
   .pb-1 {
     padding-bottom: 0.25rem;
   }
@@ -1726,10 +1709,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 2rem;
   }
 
-  .pl-0 {
-    padding-left: 0px;
-  }
-
   .pl-0\\.5 {
     padding-left: 0.125rem;
   }
@@ -1814,11 +1793,13 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     text-align: start;
   }
 
+  .font-pt-sans {
+    font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;
+  }
+
   .font-sans {
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-      'Noto Color Emoji';
+    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   }
 
   .font-serif {
@@ -1921,132 +1902,132 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 
   .text-\\[\\#00559a\\] {
     --tw-text-opacity: 1;
-    color: rgb(0 85 154 / var(--tw-text-opacity));
+    color: rgb(0 85 154 / var(--tw-text-opacity, 1));
   }
 
   .text-\\[\\#333\\] {
     --tw-text-opacity: 1;
-    color: rgb(51 51 51 / var(--tw-text-opacity));
+    color: rgb(51 51 51 / var(--tw-text-opacity, 1));
+  }
+
+  .text-\\[\\#666666\\] {
+    --tw-text-opacity: 1;
+    color: rgb(102 102 102 / var(--tw-text-opacity, 1));
   }
 
   .text-\\[\\#FFFFFF\\] {
     --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   }
 
   .text-black {
     --tw-text-opacity: 1;
-    color: rgb(0 0 0 / var(--tw-text-opacity));
+    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
   }
 
   .text-blue-200 {
     --tw-text-opacity: 1;
-    color: rgb(147 200 253 / var(--tw-text-opacity));
+    color: rgb(147 200 253 / var(--tw-text-opacity, 1));
   }
 
   .text-blue-300 {
     --tw-text-opacity: 1;
-    color: rgb(90 171 252 / var(--tw-text-opacity));
+    color: rgb(90 171 252 / var(--tw-text-opacity, 1));
   }
 
   .text-blue-500 {
     --tw-text-opacity: 1;
-    color: rgb(4 104 203 / var(--tw-text-opacity));
+    color: rgb(4 104 203 / var(--tw-text-opacity, 1));
   }
 
   .text-blue-600 {
     --tw-text-opacity: 1;
-    color: rgb(3 86 168 / var(--tw-text-opacity));
+    color: rgb(3 86 168 / var(--tw-text-opacity, 1));
   }
 
   .text-brand-1 {
     --tw-text-opacity: 1;
-    color: rgb(0 85 154 / var(--tw-text-opacity));
+    color: rgb(0 85 154 / var(--tw-text-opacity, 1));
   }
 
   .text-dark-5 {
     --tw-text-opacity: 1;
-    color: rgb(18 18 18 / var(--tw-text-opacity));
+    color: rgb(18 18 18 / var(--tw-text-opacity, 1));
   }
 
   .text-dark-6 {
     --tw-text-opacity: 1;
-    color: rgb(46 46 46 / var(--tw-text-opacity));
+    color: rgb(46 46 46 / var(--tw-text-opacity, 1));
   }
 
   .text-dark-7 {
     --tw-text-opacity: 1;
-    color: rgb(224 224 224 / var(--tw-text-opacity));
+    color: rgb(224 224 224 / var(--tw-text-opacity, 1));
   }
 
   .text-green-300 {
     --tw-text-opacity: 1;
-    color: rgb(151 219 83 / var(--tw-text-opacity));
+    color: rgb(151 219 83 / var(--tw-text-opacity, 1));
   }
 
   .text-green-400 {
     --tw-text-opacity: 1;
-    color: rgb(106 195 34 / var(--tw-text-opacity));
+    color: rgb(106 195 34 / var(--tw-text-opacity, 1));
   }
 
   .text-green-500 {
     --tw-text-opacity: 1;
-    color: rgb(80 167 24 / var(--tw-text-opacity));
+    color: rgb(80 167 24 / var(--tw-text-opacity, 1));
   }
 
   .text-grey-100 {
     --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   }
 
   .text-grey-300 {
     --tw-text-opacity: 1;
-    color: rgb(221 221 221 / var(--tw-text-opacity));
+    color: rgb(221 221 221 / var(--tw-text-opacity, 1));
   }
 
   .text-grey-400 {
     --tw-text-opacity: 1;
-    color: rgb(153 153 153 / var(--tw-text-opacity));
+    color: rgb(153 153 153 / var(--tw-text-opacity, 1));
   }
 
   .text-grey-500 {
     --tw-text-opacity: 1;
-    color: rgb(102 102 102 / var(--tw-text-opacity));
+    color: rgb(102 102 102 / var(--tw-text-opacity, 1));
   }
 
   .text-grey-600 {
     --tw-text-opacity: 1;
-    color: rgb(51 51 51 / var(--tw-text-opacity));
+    color: rgb(51 51 51 / var(--tw-text-opacity, 1));
   }
 
   .text-grey-700 {
     --tw-text-opacity: 1;
-    color: rgb(0 0 0 / var(--tw-text-opacity));
+    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
   }
 
   .text-orange-400 {
     --tw-text-opacity: 1;
-    color: rgb(255 122 0 / var(--tw-text-opacity));
+    color: rgb(255 122 0 / var(--tw-text-opacity, 1));
   }
 
   .text-orange-500 {
     --tw-text-opacity: 1;
-    color: rgb(219 93 0 / var(--tw-text-opacity));
+    color: rgb(219 93 0 / var(--tw-text-opacity, 1));
   }
 
   .text-red-600 {
     --tw-text-opacity: 1;
-    color: rgb(174 9 27 / var(--tw-text-opacity));
+    color: rgb(174 9 27 / var(--tw-text-opacity, 1));
   }
 
   .text-white {
     --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-
-  .text-\\[\\#666666\\] {
-    --tw-text-opacity: 1;
-    color: rgb(102 102 102 / var(--tw-text-opacity));
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   }
 
   .underline {
@@ -2095,7 +2076,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 
   .hover\\:bg-\\[\\#f3f4f6\\]:hover {
     --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
   }
 
   .hover\\:underline:hover {
@@ -2428,11 +2409,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-right: 2rem;
     }
 
-    .md\\:py-1 {
-      padding-top: 0.25rem;
-      padding-bottom: 0.25rem;
-    }
-
     .md\\:py-1\\.5 {
       padding-top: 0.375rem;
       padding-bottom: 0.375rem;
@@ -2443,11 +2419,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 0.5rem;
     }
 
-    .md\\:py-3 {
-      padding-top: 0.75rem;
-      padding-bottom: 0.75rem;
-    }
-
     .md\\:py-3\\.5 {
       padding-top: 0.875rem;
       padding-bottom: 0.875rem;