@pzh-ui/css 0.0.72 → 0.0.74

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.72",
+    "version": "0.0.74",
     "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
     "license": "ISC",
     "publishConfig": {
@@ -21,7 +21,7 @@
         "react-datepicker": "^4.7.0",
         "react-toastify": "^9.1.2"
     },
-    "gitHead": "3b4fa9fa4c4a2f44e9ae19afb41a701b7eb9ab2f",
+    "gitHead": "d776c5b243f3ff0b43b83da8795e61996e9350c3",
     "devDependencies": {
         "tailwindcss": "^3.3.2"
     }

package/src/tailwind.css

@@ -1314,15 +1314,15 @@ select {
 }
 
 .pzh-form-error,
-    .pzh-form-checkbox.pzh-form-error + span:before,
-    .pzh-form-radio:checked.pzh-form-error + span:before,
-    .pzh-form-radio:not(:checked).pzh-form-error + span:before {
+  .pzh-form-checkbox.pzh-form-error + span:before,
+  .pzh-form-radio:checked.pzh-form-error + span:before,
+  .pzh-form-radio:not(:checked).pzh-form-error + span:before {
   --tw-border-opacity: 1;
   border-color: rgb(209 31 61 / var(--tw-border-opacity));
 }
 
 .pzh-form-radio:checked + span:before,
-    .pzh-form-radio:not(:checked) + span:before {
+  .pzh-form-radio:not(:checked) + span:before {
   position: absolute;
   left: 0px;
   top: 0px;
@@ -1334,11 +1334,11 @@ select {
   border-color: rgb(92 92 92 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
-  content: '';
+  content: "";
 }
 
 .pzh-form-radio:checked + span:after,
-    .pzh-form-radio:not(:checked) + span:after {
+  .pzh-form-radio:not(:checked) + span:after {
   position: absolute;
   left: 5px;
   top: 5px;
@@ -1352,23 +1352,23 @@ select {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
-  content: '';
+  content: "";
 }
 
 .pzh-form-radio:not(:checked) + span:after,
-    .pzh-form-checkbox:not(:checked) + span:after {
+  .pzh-form-checkbox:not(:checked) + span:after {
   opacity: 0;
   transform: scale(0);
 }
 
 .pzh-form-radio:checked + span:after,
-    .pzh-form-checkbox:checked + span:after {
+  .pzh-form-checkbox:checked + span:after {
   opacity: 1;
   transform: scale(1);
 }
 
 .pzh-form-radio:disabled + span:before,
-    .pzh-form-checkbox:disabled + span:before {
+  .pzh-form-checkbox:disabled + span:before {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1392,7 +1392,7 @@ select {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
-  content: '';
+  content: "";
 }
 
 .pzh-form-checkbox:checked:not(:disabled) + span:before {
@@ -1401,7 +1401,7 @@ select {
 }
 
 .pzh-form-checkbox:checked + span:after,
-    .pzh-form-checkbox:not(:checked) + span:after {
+  .pzh-form-checkbox:not(:checked) + span:after {
   position: absolute;
   left: 5px;
   top: 0.125rem;
@@ -1422,7 +1422,7 @@ select {
 }
 
 .pzh-form-radio:focus + span:before,
-    .pzh-form-checkbox:focus + span:before {
+  .pzh-form-checkbox:focus + span:before {
   --tw-border-opacity: 1;
   border-color: rgb(40 31 107 / var(--tw-border-opacity));
   outline: 2px solid transparent;
@@ -1440,12 +1440,12 @@ select {
     */
 
 .react-datepicker.pzh-datepicker {
-  font-family: 'Karbon Regular', sans-serif;
+  font-family: "Karbon Regular", sans-serif;
   font-weight: 400;
   font-size: 0.8rem;
   box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
-            0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
-            0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
+      0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
+      0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
   border-style: none;
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
@@ -1484,16 +1484,16 @@ select {
 }
 
 .pzh-datepicker
-        .react-datepicker__day--outside-month:not(
-            .react-datepicker__day--selected
-        ) {
+    .react-datepicker__day--outside-month:not(
+      .react-datepicker__day--selected
+    ) {
   color: rgb(22 17 59 / var(--tw-text-opacity));
   --tw-text-opacity: 0.35;
 }
 
 .pzh-datepicker .react-datepicker__day-name,
-    .pzh-datepicker .react-datepicker__day,
-    .pzh-datepicker .react-datepicker__time-name {
+  .pzh-datepicker .react-datepicker__day,
+  .pzh-datepicker .react-datepicker__time-name {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
   margin-top: 0.25rem;
@@ -1512,12 +1512,10 @@ select {
 }
 
 .pzh-datepicker
-        .react-datepicker__day--today:not(.react-datepicker__day--selected),
-    .pzh-datepicker
-        .react-datepicker__day--today:hover:not(
-            .react-datepicker__day--selected
-        ),
-    .pzh-datepicker .react-datepicker__day--keyboard-selected {
+    .react-datepicker__day--today:not(.react-datepicker__day--selected),
+  .pzh-datepicker
+    .react-datepicker__day--today:hover:not(.react-datepicker__day--selected),
+  .pzh-datepicker .react-datepicker__day--keyboard-selected {
   background-color: rgb(22 17 59 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.1;
   --tw-text-opacity: 1;
@@ -1530,16 +1528,16 @@ select {
 }
 
 .pzh-datepicker .react-datepicker__day--selected,
-    .pzh-datepicker .react-datepicker__day--selected:hover {
+  .pzh-datepicker .react-datepicker__day--selected:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
   font-weight: 700;
 }
 
 .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
-    .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
-    .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
-    .pzh-datepicker .react-datepicker__navigation-icon::before {
+  .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
+  .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
+  .pzh-datepicker .react-datepicker__navigation-icon::before {
   height: 7px;
   width: 7px;
   border-width: 0px;
@@ -1576,6 +1574,42 @@ select {
   }
 }
 
+table {
+  font-size: 1.25rem !important;
+  line-height: 1.875rem !important;
+}
+
+table,
+  table td,
+  table th {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(92 92 92 / var(--tw-border-opacity));
+}
+
+table tr th {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 248 248 / var(--tw-bg-opacity));
+  font-weight: 700;
+  font-family: "Karbon Medium", sans-serif;
+}
+
+table tr {
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(92 92 92 / var(--tw-border-opacity));
+}
+
+table td,
+  table th {
+  padding: 0.5rem !important;
+}
+
+table p {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1823,6 +1857,10 @@ select {
   display: inline-flex;
 }
 
+.\!table {
+  display: table !important;
+}
+
 .table {
   display: table;
 }
@@ -2009,6 +2047,18 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-90 {
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -2293,6 +2343,11 @@ select {
   background-color: rgb(213 213 213 / var(--tw-bg-opacity));
 }
 
+.bg-pzh-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(92 92 92 / var(--tw-bg-opacity));
+}
+
 .bg-pzh-gray-800\/10 {
   background-color: rgb(34 34 34 / 0.1);
 }
@@ -2409,6 +2464,11 @@ select {
   padding-bottom: 0.5rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -2622,6 +2682,11 @@ select {
   color: rgb(191 191 191 / var(--tw-text-opacity));
 }
 
+.text-pzh-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(131 131 131 / var(--tw-text-opacity));
+}
+
 .text-pzh-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(92 92 92 / var(--tw-text-opacity));
@@ -2702,6 +2767,12 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-\[0_1px_8px_0_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+  --tw-shadow: 0 1px 8px 0 rgba(0,0,0,0.2);
+  --tw-shadow-colored: 0 1px 8px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-card {
   --tw-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07), 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275), 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
   --tw-shadow-colored: 0px 18px 60px var(--tw-shadow-color), 0px 4.02054px 13.4018px var(--tw-shadow-color), 0px 1.19702px 3.99006px var(--tw-shadow-color);
@@ -2763,6 +2834,12 @@ select {
   transition-duration: 150ms;
 }
 
+.transition-\[transform\2c opacity\] {
+  transition-property: transform,opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2775,6 +2852,10 @@ select {
   transition-duration: 150ms;
 }
 
+.duration-100 {
+  transition-duration: 100ms;
+}
+
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -2800,9 +2881,9 @@ select {
 }
 
 @font-face {
-  font-family: 'Karbon Regular';
+  font-family: "Karbon Regular";
 
-  src: url('./../fonts/Karbon-Regular.woff2') format('woff2');
+  src: url("./../fonts/Karbon-Regular.woff2") format("woff2");
 
   font-weight: normal;
 
@@ -2810,9 +2891,9 @@ select {
 }
 
 @font-face {
-  font-family: 'Karbon Medium';
+  font-family: "Karbon Medium";
 
-  src: url('./../fonts/Karbon-Medium.woff2') format('woff2');
+  src: url("./../fonts/Karbon-Medium.woff2") format("woff2");
 
   font-weight: bold;
 
@@ -2829,7 +2910,7 @@ body {
   padding: 0;
   font-size: 20px;
   line-height: 1.5em;
-  font-family: 'Karbon Regular', sans-serif;
+  font-family: "Karbon Regular", sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -2844,7 +2925,7 @@ h6,
 .font-bold,
 strong,
 b {
-  font-family: 'Karbon Medium', sans-serif;
+  font-family: "Karbon Medium", sans-serif;
 }
 
 ul li ul li {
@@ -2864,7 +2945,7 @@ ol li ol li ol li {
 }
 
 .font-normal {
-  font-family: 'Karbon Regular', sans-serif;
+  font-family: "Karbon Regular", sans-serif;
 }
 
 .bold {
@@ -2911,6 +2992,75 @@ ol li ol li ol li {
   --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
 }
 
+.after\:absolute::after {
+  content: var(--tw-content);
+  position: absolute;
+}
+
+.after\:-top-2::after {
+  content: var(--tw-content);
+  top: -0.5rem;
+}
+
+.after\:left-0::after {
+  content: var(--tw-content);
+  left: 0px;
+}
+
+.after\:right-0::after {
+  content: var(--tw-content);
+  right: 0px;
+}
+
+.after\:mx-auto::after {
+  content: var(--tw-content);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.after\:block::after {
+  content: var(--tw-content);
+  display: block;
+}
+
+.after\:h-0::after {
+  content: var(--tw-content);
+  height: 0px;
+}
+
+.after\:w-0::after {
+  content: var(--tw-content);
+  width: 0px;
+}
+
+.after\:border-x-\[10px\]::after {
+  content: var(--tw-content);
+  border-left-width: 10px;
+  border-right-width: 10px;
+}
+
+.after\:border-b-\[10px\]::after {
+  content: var(--tw-content);
+  border-bottom-width: 10px;
+}
+
+.after\:border-t-0::after {
+  content: var(--tw-content);
+  border-top-width: 0px;
+}
+
+.after\:border-x-\[transparent\]::after {
+  content: var(--tw-content);
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+
+.after\:border-b-pzh-white::after {
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .hover\:translate-y-0:hover {
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/src/tailwind.src.css

@@ -1,35 +1,35 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
 @font-face {
-    font-family: 'Karbon Regular';
-    src: url('./../fonts/Karbon-Regular.woff2') format('woff2');
-    font-weight: normal;
-    font-display: swap;
+  font-family: "Karbon Regular";
+  src: url("./../fonts/Karbon-Regular.woff2") format("woff2");
+  font-weight: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Karbon Medium';
-    src: url('./../fonts/Karbon-Medium.woff2') format('woff2');
-    font-weight: bold;
-    font-display: swap;
+  font-family: "Karbon Medium";
+  src: url("./../fonts/Karbon-Medium.woff2") format("woff2");
+  font-weight: bold;
+  font-display: swap;
 }
 
 html {
-    height: 100%;
-    overflow: auto;
+  height: 100%;
+  overflow: auto;
 }
 
 body {
-    margin: 0;
-    padding: 0;
-    font-size: 20px;
-    line-height: 1.5em;
-    font-family: 'Karbon Regular', sans-serif;
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
+  font-size: 20px;
+  line-height: 1.5em;
+  font-family: "Karbon Regular", sans-serif;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 h1,
@@ -41,230 +41,255 @@ h6,
 .font-bold,
 strong,
 b {
-    font-family: 'Karbon Medium', sans-serif;
+  font-family: "Karbon Medium", sans-serif;
 }
 
 ul li ul li {
-    list-style-type: circle;
+  list-style-type: circle;
 }
 
 ul li ul li ul li {
-    list-style-type: square;
+  list-style-type: square;
 }
 
 ol li ol li {
-    list-style-type: lower-alpha;
+  list-style-type: lower-alpha;
 }
 
 ol li ol li ol li {
-    list-style-type: lower-roman;
+  list-style-type: lower-roman;
 }
 
 .font-normal {
-    font-family: 'Karbon Regular', sans-serif;
+  font-family: "Karbon Regular", sans-serif;
 }
 
 .bold {
-    font-weight: 700;
+  font-weight: 700;
 }
 
 @layer utilities {
-    .pzh-transition-colors {
-        @apply transition-colors duration-200 ease-in;
-    }
+  .pzh-transition-colors {
+    @apply transition-colors duration-200 ease-in;
+  }
 }
 
 @layer components {
-    /*
+  /*
     * Form elements
     */
 
-    .pzh-button {
-        @apply focus:ring-pzh-blue-dark disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 inline-block rounded leading-none ring-offset-2 transition duration-200 ease-in focus:outline-none focus:ring disabled:cursor-not-allowed;
-    }
-
-    .pzh-form-input {
-        @apply placeholder-pzh-gray-600 text-pzh-blue-dark border-pzh-gray-600 hover:border-pzh-blue focus:ring-pzh-blue focus:border-pzh-blue disabled:bg-pzh-gray-200 text-m block w-full appearance-none rounded border pb-[6px] pt-[10px] leading-[30px] focus:outline-none focus:outline-none focus:ring focus:ring-2;
-    }
-
-    .pzh-form-error,
-    .pzh-form-checkbox.pzh-form-error + span:before,
-    .pzh-form-radio:checked.pzh-form-error + span:before,
-    .pzh-form-radio:not(:checked).pzh-form-error + span:before {
-        @apply border-pzh-red;
-    }
-
-    .pzh-form-radio:checked + span:before,
-    .pzh-form-radio:not(:checked) + span:before {
-        @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-6 w-6 rounded-full border;
-        content: '';
-    }
-    .pzh-form-radio:checked + span:after,
-    .pzh-form-radio:not(:checked) + span:after {
-        @apply bg-pzh-green absolute left-[5px] top-[5px] h-[14px] w-[14px] rounded-full transition duration-200;
-        content: '';
-    }
-    .pzh-form-radio:not(:checked) + span:after,
-    .pzh-form-checkbox:not(:checked) + span:after {
-        opacity: 0;
-        transform: scale(0);
-    }
-    .pzh-form-radio:checked + span:after,
-    .pzh-form-checkbox:checked + span:after {
-        opacity: 1;
-        transform: scale(1);
-    }
-    .pzh-form-radio:disabled + span:before,
-    .pzh-form-checkbox:disabled + span:before {
-        @apply border-pzh-gray-200 bg-pzh-gray-200;
-    }
-
-    .pzh-form-checkbox + span:before {
-        @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-6 w-6 rounded border transition duration-200;
-        content: '';
-    }
-
-    .pzh-form-checkbox:checked:not(:disabled) + span:before {
-        @apply bg-pzh-green;
-    }
-
-    .pzh-form-checkbox:checked + span:after,
-    .pzh-form-checkbox:not(:checked) + span:after {
-        @apply absolute left-[5px] top-0.5 h-[14px] w-[14px] text-white transition duration-200;
-        content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='white' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
-    }
-
-    .pzh-form-checkbox:checked:disabled + span:after {
-        content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
-    }
-
-    .pzh-form-radio:focus + span:before,
-    .pzh-form-checkbox:focus + span:before {
-        @apply ring-pzh-blue border-pzh-blue outline-none ring ring-2;
-    }
-
-    .form-field-label {
-        @apply text-s mb-2 block uppercase tracking-wide text-gray-700;
-    }
-
-    .form-field-description {
-        @apply text-s mb-2 text-gray-700;
-    }
-
-    /*
+  .pzh-button {
+    @apply focus:ring-pzh-blue-dark disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 inline-block rounded leading-none ring-offset-2 transition duration-200 ease-in focus:outline-none focus:ring disabled:cursor-not-allowed;
+  }
+
+  .pzh-form-input {
+    @apply placeholder-pzh-gray-600 text-pzh-blue-dark border-pzh-gray-600 hover:border-pzh-blue focus:ring-pzh-blue focus:border-pzh-blue disabled:bg-pzh-gray-200 text-m block w-full appearance-none rounded border pb-[6px] pt-[10px] leading-[30px] focus:outline-none focus:outline-none focus:ring focus:ring-2;
+  }
+
+  .pzh-form-error,
+  .pzh-form-checkbox.pzh-form-error + span:before,
+  .pzh-form-radio:checked.pzh-form-error + span:before,
+  .pzh-form-radio:not(:checked).pzh-form-error + span:before {
+    @apply border-pzh-red;
+  }
+
+  .pzh-form-radio:checked + span:before,
+  .pzh-form-radio:not(:checked) + span:before {
+    @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-6 w-6 rounded-full border;
+    content: "";
+  }
+  .pzh-form-radio:checked + span:after,
+  .pzh-form-radio:not(:checked) + span:after {
+    @apply bg-pzh-green absolute left-[5px] top-[5px] h-[14px] w-[14px] rounded-full transition duration-200;
+    content: "";
+  }
+  .pzh-form-radio:not(:checked) + span:after,
+  .pzh-form-checkbox:not(:checked) + span:after {
+    opacity: 0;
+    transform: scale(0);
+  }
+  .pzh-form-radio:checked + span:after,
+  .pzh-form-checkbox:checked + span:after {
+    opacity: 1;
+    transform: scale(1);
+  }
+  .pzh-form-radio:disabled + span:before,
+  .pzh-form-checkbox:disabled + span:before {
+    @apply border-pzh-gray-200 bg-pzh-gray-200;
+  }
+
+  .pzh-form-checkbox + span:before {
+    @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-6 w-6 rounded border transition duration-200;
+    content: "";
+  }
+
+  .pzh-form-checkbox:checked:not(:disabled) + span:before {
+    @apply bg-pzh-green;
+  }
+
+  .pzh-form-checkbox:checked + span:after,
+  .pzh-form-checkbox:not(:checked) + span:after {
+    @apply absolute left-[5px] top-0.5 h-[14px] w-[14px] text-white transition duration-200;
+    content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='white' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
+  }
+
+  .pzh-form-checkbox:checked:disabled + span:after {
+    content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
+  }
+
+  .pzh-form-radio:focus + span:before,
+  .pzh-form-checkbox:focus + span:before {
+    @apply ring-pzh-blue border-pzh-blue outline-none ring ring-2;
+  }
+
+  .form-field-label {
+    @apply text-s mb-2 block uppercase tracking-wide text-gray-700;
+  }
+
+  .form-field-description {
+    @apply text-s mb-2 text-gray-700;
+  }
+
+  /*
     * React Datepicker
     */
 
-    .react-datepicker.pzh-datepicker {
-        font-family: 'Karbon Regular', sans-serif;
-        font-weight: 400;
-        font-size: 0.8rem;
-        box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
-            0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
-            0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
-        @apply text-pzh-blue-dark border-none;
-    }
-
-    .pzh-datepicker .react-datepicker__triangle {
-        display: none;
-    }
-
-    .pzh-datepicker .react-datepicker__header {
-        @apply border-none bg-white;
-    }
-
-    .pzh-datepicker .react-datepicker__month {
-        @apply mx-0.5 mt-0;
-    }
-
-    .pzh-datepicker .react-datepicker__day-names {
-        @apply bg-pzh-blue-dark bg-opacity-10;
-    }
-
-    .pzh-datepicker .react-datepicker__day-name {
-        @apply bold my-0 leading-[26px];
-    }
-
-    .pzh-datepicker .react-datepicker__current-month {
-        @apply mb-2;
-    }
-
-    .pzh-datepicker
-        .react-datepicker__day--outside-month:not(
-            .react-datepicker__day--selected
-        ) {
-        @apply text-pzh-blue-dark text-opacity-35;
-    }
-
-    .pzh-datepicker .react-datepicker__day-name,
-    .pzh-datepicker .react-datepicker__day,
-    .pzh-datepicker .react-datepicker__time-name {
-        @apply mx-2 my-1 h-[26px] w-[26px] leading-7;
-    }
-
-    .pzh-datepicker .react-datepicker__day {
-        @apply rounded-full hover:rounded-full;
-    }
-
-    .pzh-datepicker
-        .react-datepicker__day--today:not(.react-datepicker__day--selected),
-    .pzh-datepicker
-        .react-datepicker__day--today:hover:not(
-            .react-datepicker__day--selected
-        ),
-    .pzh-datepicker .react-datepicker__day--keyboard-selected {
-        @apply bg-pzh-blue-dark text-pzh-blue-dark bg-opacity-10;
-    }
-
-    .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
-        @apply bg-pzh-blue-dark bg-opacity-10;
-    }
-
-    .pzh-datepicker .react-datepicker__day--selected,
-    .pzh-datepicker .react-datepicker__day--selected:hover {
-        @apply bg-pzh-green bold;
-    }
-
-    .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
-    .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
-    .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
-    .pzh-datepicker .react-datepicker__navigation-icon::before {
-        @apply h-[7px] w-[7px] border border-0 border-r-[1px] border-t-[1px] border-black;
-    }
-
-    .pzh-datepicker .react-datepicker__navigation-icon {
-        @apply leading-[14px];
-    }
-
-    .pzh-select-input input {
-        box-shadow: none !important;
-    }
-
-    .ProseMirror p.is-editor-empty:first-child::before {
-        @apply text-pzh-blue-dark/55;
-        content: attr(data-placeholder);
-        float: left;
-        pointer-events: none;
-        height: 0;
-    }
-
-    .pzh-modal {
-        &[data-entering] {
-            animation: fade 150ms;
-        }
-
-        &[data-exiting] {
-            animation: fade 150ms reverse ease-in;
-        }
-    }
-
-    @keyframes fade {
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
+  .react-datepicker.pzh-datepicker {
+    font-family: "Karbon Regular", sans-serif;
+    font-weight: 400;
+    font-size: 0.8rem;
+    box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
+      0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
+      0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
+    @apply text-pzh-blue-dark border-none;
+  }
+
+  .pzh-datepicker .react-datepicker__triangle {
+    display: none;
+  }
+
+  .pzh-datepicker .react-datepicker__header {
+    @apply border-none bg-white;
+  }
+
+  .pzh-datepicker .react-datepicker__month {
+    @apply mx-0.5 mt-0;
+  }
+
+  .pzh-datepicker .react-datepicker__day-names {
+    @apply bg-pzh-blue-dark bg-opacity-10;
+  }
+
+  .pzh-datepicker .react-datepicker__day-name {
+    @apply bold my-0 leading-[26px];
+  }
+
+  .pzh-datepicker .react-datepicker__current-month {
+    @apply mb-2;
+  }
+
+  .pzh-datepicker
+    .react-datepicker__day--outside-month:not(
+      .react-datepicker__day--selected
+    ) {
+    @apply text-pzh-blue-dark text-opacity-35;
+  }
+
+  .pzh-datepicker .react-datepicker__day-name,
+  .pzh-datepicker .react-datepicker__day,
+  .pzh-datepicker .react-datepicker__time-name {
+    @apply mx-2 my-1 h-[26px] w-[26px] leading-7;
+  }
+
+  .pzh-datepicker .react-datepicker__day {
+    @apply rounded-full hover:rounded-full;
+  }
+
+  .pzh-datepicker
+    .react-datepicker__day--today:not(.react-datepicker__day--selected),
+  .pzh-datepicker
+    .react-datepicker__day--today:hover:not(.react-datepicker__day--selected),
+  .pzh-datepicker .react-datepicker__day--keyboard-selected {
+    @apply bg-pzh-blue-dark text-pzh-blue-dark bg-opacity-10;
+  }
+
+  .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
+    @apply bg-pzh-blue-dark bg-opacity-10;
+  }
+
+  .pzh-datepicker .react-datepicker__day--selected,
+  .pzh-datepicker .react-datepicker__day--selected:hover {
+    @apply bg-pzh-green bold;
+  }
+
+  .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
+  .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
+  .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
+  .pzh-datepicker .react-datepicker__navigation-icon::before {
+    @apply h-[7px] w-[7px] border border-0 border-r-[1px] border-t-[1px] border-black;
+  }
+
+  .pzh-datepicker .react-datepicker__navigation-icon {
+    @apply leading-[14px];
+  }
+
+  .pzh-select-input input {
+    box-shadow: none !important;
+  }
+
+  .ProseMirror p.is-editor-empty:first-child::before {
+    @apply text-pzh-blue-dark/55;
+    content: attr(data-placeholder);
+    float: left;
+    pointer-events: none;
+    height: 0;
+  }
+
+  .pzh-modal {
+    &[data-entering] {
+      animation: fade 150ms;
+    }
+
+    &[data-exiting] {
+      animation: fade 150ms reverse ease-in;
+    }
+  }
+
+  @keyframes fade {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  table {
+    @apply !text-m;
+  }
+
+  table,
+  table td,
+  table th {
+    @apply border border-pzh-gray-600;
+  }
+
+  table tr th {
+    @apply bg-pzh-gray-100 font-bold;
+  }
+
+  table tr {
+    @apply border-b border-pzh-gray-600;
+  }
+
+  table td,
+  table th {
+    @apply !p-2;
+  }
+
+  table p {
+    @apply !my-0;
+  }
 }