@pzh-ui/css 0.0.115 → 0.0.118

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.115",
+    "version": "0.0.118",
     "description": "Contains default styling for projects within Provincie Zuid-Holland.",
     "license": "ISC",
     "publishConfig": {
@@ -17,7 +17,7 @@
         "@tailwindcss/typography": "^0.5.16",
         "react-toastify": "^9.1.2"
     },
-    "gitHead": "13d3e10c7d3f63fb8ffddb33f9237f9254ebf1ce",
+    "gitHead": "e5a775522200086a33ef1a8c8fa16b976afbbc71",
     "devDependencies": {
         "@tailwindcss/cli": "^4.1.4",
         "tailwindcss": "^4.1.4"

package/src/tailwind.css

@@ -324,6 +324,11 @@ ol li ol li ol li {
       background-color: var(--color-pzh-gray-200);
     }
   }
+  .pzh-form-input--small {
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-s);
+    line-height: var(--tw-leading, var(--text-s--line-height));
+  }
   .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 {
     border-color: var(--color-pzh-red-500);
   }
@@ -473,15 +478,16 @@ ol li ol li ol li {
   border-style: none;
   background-color: var(--color-pzh-white);
 }
-.pzh-datepicker .react-datepicker__month {
+.pzh-datepicker .react-datepicker__month-container .react-datepicker__month {
   margin-inline: calc(var(--spacing) * 0.5);
-  margin-top: calc(var(--spacing) * 0);
+  margin-top: calc(var(--spacing) * 2);
 }
 .pzh-datepicker .react-datepicker__day-names {
   background-color: color-mix(in srgb, #16113b 10%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
     background-color: color-mix(in oklab, var(--color-pzh-blue-900) 10%, transparent);
   }
+  padding-block: calc(var(--spacing) * 1);
 }
 .pzh-datepicker .react-datepicker__day-name {
   margin-block: calc(var(--spacing) * 0);
@@ -549,9 +555,21 @@ ol li ol li ol li {
   line-height: 14px;
 }
 .pzh-datepicker .react-datepicker__current-month, .pzh-datepicker .react-datepicker__day-name, .pzh-datepicker .react-datepicker__day--today {
+  margin-block: calc(var(--spacing) * 0);
   --tw-font-weight: var(--font-weight-bold);
   font-weight: var(--font-weight-bold);
 }
+.pzh-datepicker .react-datepicker__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;

package/src/tailwind.src.css

@@ -227,6 +227,9 @@ ol li ol li ol li {
     .pzh-form-input {
         @apply placeholder-pzh-gray-600 bg-pzh-white text-pzh-blue-900 border-pzh-gray-600 hover:border-pzh-blue-500 focus:ring-pzh-focus focus:border-pzh-focus disabled:bg-pzh-gray-200 text-m block w-full appearance-none rounded border px-4 py-2 leading-[30px] focus:ring-2 focus:outline-none;
     }
+    .pzh-form-input--small {
+        @apply text-s py-1;
+    }
 
     .pzh-form-error,
     .pzh-form-checkbox.pzh-form-error + span:before,
@@ -383,12 +386,12 @@ ol li ol li ol li {
     @apply bg-pzh-white border-none;
 }
 
-.pzh-datepicker .react-datepicker__month {
-    @apply mx-0.5 mt-0;
+.pzh-datepicker .react-datepicker__month-container .react-datepicker__month {
+    @apply mx-0.5 mt-2;
 }
 
 .pzh-datepicker .react-datepicker__day-names {
-    @apply bg-pzh-blue-900/10;
+    @apply bg-pzh-blue-900/10 py-1;
 }
 
 .pzh-datepicker .react-datepicker__day-name {
@@ -447,5 +450,9 @@ ol li ol li ol li {
 .pzh-datepicker .react-datepicker__current-month,
 .pzh-datepicker .react-datepicker__day-name,
 .pzh-datepicker .react-datepicker__day--today {
-    @apply font-bold;
+    @apply my-0 font-bold;
+}
+
+.pzh-datepicker .react-datepicker__sr-only {
+    @apply sr-only;
 }