@pzh-ui/css 0.0.89 → 0.0.96

package/config/index.js

@@ -180,6 +180,20 @@ module.exports = {
       boxShadow: {
         card: "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)",
       },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
       typography: {
         DEFAULT: {
           css: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzh-ui/css",
-  "version": "0.0.89",
+  "version": "0.0.96",
   "description": "Contains default styling for projects within Provincie Zuid-Holland.",
   "license": "ISC",
   "publishConfig": {
@@ -21,8 +21,9 @@
     "react-datepicker": "^4.7.0",
     "react-toastify": "^9.1.2"
   },
-  "gitHead": "567c93e973fff39cd67a5df996a7a678d4d60504",
+  "gitHead": "1c0a762db40a8f86c0672ca913e0f287d6f9e13f",
   "devDependencies": {
+    "@types/react-datepicker": "^6.2.0",
     "tailwindcss": "^3.3.2"
   }
 }

package/src/tailwind.css

@@ -1659,10 +1659,6 @@ select {
   position: relative;
 }
 
-.inset-0 {
-  inset: 0px;
-}
-
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -1724,10 +1720,6 @@ select {
   z-index: 10;
 }
 
-.z-50 {
-  z-index: 50;
-}
-
 .z-\[100\] {
   z-index: 100;
 }
@@ -1770,10 +1762,6 @@ select {
   margin-bottom: -1px;
 }
 
-.-mr-8 {
-  margin-right: -2rem;
-}
-
 .-mt-0 {
   margin-top: -0px;
 }
@@ -1786,10 +1774,6 @@ select {
   margin-top: -0.25rem;
 }
 
-.-mt-8 {
-  margin-top: -2rem;
-}
-
 .-mt-\[2px\] {
   margin-top: -2px;
 }
@@ -1890,10 +1874,6 @@ select {
   display: grid;
 }
 
-.contents {
-  display: contents;
-}
-
 .hidden {
   display: none;
 }
@@ -1942,10 +1922,6 @@ select {
   height: 1px;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
 .max-h-\[85vh\] {
   max-height: 85vh;
 }
@@ -1954,8 +1930,8 @@ select {
   min-height: 48px;
 }
 
-.min-h-screen {
-  min-height: 100vh;
+.min-h-\[calc\(2lh\+2\*10px\)\] {
+  min-height: calc(2lh + 2 * 10px);
 }
 
 .\!w-max {
@@ -2008,10 +1984,6 @@ select {
   min-width: 320px;
 }
 
-.max-w-6xl {
-  max-width: 72rem;
-}
-
 .max-w-\[1200px\] {
   max-width: 1200px;
 }
@@ -2048,22 +2020,20 @@ select {
   max-width: 1280px;
 }
 
-.origin-left {
-  transform-origin: left;
+.flex-1 {
+  flex: 1 1 0%;
 }
 
-.translate-y-0 {
-  --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));
+.shrink-0 {
+  flex-shrink: 0;
 }
 
-.translate-y-2 {
-  --tw-translate-y: 0.5rem;
-  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));
+.origin-left {
+  transform-origin: left;
 }
 
-.translate-y-4 {
-  --tw-translate-y: 1rem;
+.translate-y-2 {
+  --tw-translate-y: 0.5rem;
   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));
 }
 
@@ -2174,14 +2144,6 @@ select {
   overflow: hidden;
 }
 
-.overflow-y-auto {
-  overflow-y: auto;
-}
-
-.overflow-y-visible {
-  overflow-y: visible;
-}
-
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2217,10 +2179,6 @@ select {
   border-radius: 0.5rem;
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
 .rounded-t {
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
@@ -2275,6 +2233,11 @@ select {
   border-color: rgb(92 92 92 / var(--tw-border-opacity));
 }
 
+.border-pzh-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(230 230 230 / var(--tw-border-opacity));
+}
+
 .border-pzh-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(213 213 213 / var(--tw-border-opacity));
@@ -2458,18 +2421,10 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
-
 .p-1 {
   padding: 0.25rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .p-3 {
   padding: 0.75rem;
 }
@@ -2535,6 +2490,10 @@ select {
   padding-bottom: 0.25rem;
 }
 
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -2543,8 +2502,8 @@ select {
   padding-bottom: 1rem;
 }
 
-.pb-\[9px\] {
-  padding-bottom: 9px;
+.pb-\[7px\] {
+  padding-bottom: 7px;
 }
 
 .pl-7 {
@@ -2583,20 +2542,12 @@ select {
   padding-top: 0.5rem;
 }
 
-.pt-4 {
-  padding-top: 1rem;
+.pt-2\.5 {
+  padding-top: 0.625rem;
 }
 
-.pt-8 {
-  padding-top: 2rem;
-}
-
-.pt-\[10px\] {
-  padding-top: 10px;
-}
-
-.pt-\[15px\] {
-  padding-top: 15px;
+.pt-\[9px\] {
+  padding-top: 9px;
 }
 
 .pt-px {
@@ -2611,10 +2562,6 @@ select {
   text-align: center;
 }
 
-.align-bottom {
-  vertical-align: bottom;
-}
-
 .text-heading-l {
   font-size: 2rem;
   line-height: 125%;
@@ -2852,12 +2799,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-xl {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2913,8 +2854,8 @@ select {
   transition-duration: 150ms;
 }
 
-.transition-opacity {
-  transition-property: opacity;
+.transition-transform {
+  transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -3177,11 +3118,6 @@ ol li ol li ol li {
   --tw-bg-opacity: 0.1;
 }
 
-.hover\:text-pzh-blue:hover {
-  --tw-text-opacity: 1;
-  color: rgb(40 31 107 / var(--tw-text-opacity));
-}
-
 .hover\:text-pzh-blue-dark:hover {
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
@@ -3222,27 +3158,45 @@ ol li ol li ol li {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .focus\:ring-pzh-focus:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(35 96 197 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
+.group:hover .group-hover\:opacity-40 {
+  opacity: 0.4;
 }
 
-.group:hover .group-hover\:opacity-100 {
-  opacity: 1;
+.group:focus .group-focus\:opacity-40 {
+  opacity: 0.4;
 }
 
-.group:hover .group-hover\:opacity-40 {
-  opacity: 0.4;
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+
+.data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
+  animation: accordion-up 0.2s ease-out;
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+.data-\[state\=open\]\:animate-accordion-down[data-state=open] {
+  animation: accordion-down 0.2s ease-out;
 }
 
 .prose-a\:text-pzh-green :is(:where(a):not(:where([class~="not-prose"] *))) {
@@ -3261,68 +3215,14 @@ ol li ol li ol li {
 }
 
 @media (min-width: 640px) {
-  .sm\:my-8 {
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-  }
-
-  .sm\:-mr-2 {
-    margin-right: -0.5rem;
-  }
-
-  .sm\:-mt-2 {
-    margin-top: -0.5rem;
-  }
-
   .sm\:mt-8 {
     margin-top: 2rem;
   }
 
-  .sm\:block {
-    display: block;
-  }
-
-  .sm\:inline-block {
-    display: inline-block;
-  }
-
-  .sm\:h-screen {
-    height: 100vh;
-  }
-
-  .sm\:w-full {
-    width: 100%;
-  }
-
-  .sm\:translate-y-0 {
-    --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));
-  }
-
-  .sm\: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));
-  }
-
-  .sm\:scale-95 {
-    --tw-scale-x: .95;
-    --tw-scale-y: .95;
-    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));
-  }
-
   .sm\:items-start {
     align-items: flex-start;
   }
 
-  .sm\:p-2 {
-    padding: 0.5rem;
-  }
-
-  .sm\:p-8 {
-    padding: 2rem;
-  }
-
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -3344,10 +3244,6 @@ ol li ol li ol li {
   .sm\:text-center {
     text-align: center;
   }
-
-  .sm\:align-middle {
-    vertical-align: middle;
-  }
 }
 
 @media (min-width: 768px) {
@@ -3370,3 +3266,8 @@ ol li ol li ol li {
     padding-right: 2rem;
   }
 }
+
+.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
+  --tw-rotate: 180deg;
+  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));
+}