hds-web 1.0.2 → 1.0.4

package/src/styles/tailwind.css

@@ -923,6 +923,10 @@ select {
   z-index: -10;
 }
 
+.z-0 {
+  z-index: 0;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1109,6 +1113,10 @@ select {
   margin-top: -1.5rem;
 }
 
+.-mt-px {
+  margin-top: -1px;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1225,6 +1233,10 @@ select {
   margin-top: 2rem;
 }
 
+.mt-9 {
+  margin-top: 2.25rem;
+}
+
 .block {
   display: block;
 }
@@ -1333,6 +1345,10 @@ select {
   height: 130px;
 }
 
+.h-\[580px\] {
+  height: 580px;
+}
+
 .h-\[60px\] {
   height: 60px;
 }
@@ -1409,6 +1425,10 @@ select {
   width: 24rem;
 }
 
+.w-\[22\.5rem\] {
+  width: 22.5rem;
+}
+
 .w-\[220px\] {
   width: 220px;
 }
@@ -1417,6 +1437,10 @@ select {
   width: 290px;
 }
 
+.w-\[560px\] {
+  width: 560px;
+}
+
 .w-\[60\%\] {
   width: 60%;
 }
@@ -1463,8 +1487,8 @@ select {
   min-width: 15rem;
 }
 
-.min-w-\[882px\] {
-  min-width: 882px;
+.min-w-\[18rem\] {
+  min-width: 18rem;
 }
 
 .min-w-fit {
@@ -1477,10 +1501,6 @@ select {
   min-width: 100%;
 }
 
-.min-w-\[18rem\] {
-  min-width: 18rem;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1489,6 +1509,10 @@ select {
   max-width: 80rem;
 }
 
+.max-w-\[10rem\] {
+  max-width: 10rem;
+}
+
 .max-w-\[15rem\] {
   max-width: 15rem;
 }
@@ -1497,10 +1521,18 @@ select {
   max-width: 18rem;
 }
 
+.max-w-\[22rem\] {
+  max-width: 22rem;
+}
+
 .max-w-\[6rem\] {
   max-width: 6rem;
 }
 
+.max-w-\[882px\] {
+  max-width: 882px;
+}
+
 .max-w-max {
   max-width: -webkit-max-content;
   max-width: max-content;
@@ -1919,6 +1951,11 @@ select {
   border-color: rgb(236 237 240 / var(--tw-divide-opacity));
 }
 
+.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -2025,6 +2062,11 @@ select {
   border-bottom-right-radius: 0.375rem;
 }
 
+.rounded-t-3xl {
+  border-top-left-radius: 1.5rem;
+  border-top-right-radius: 1.5rem;
+}
+
 .rounded-t-md {
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
@@ -2066,10 +2108,6 @@ select {
   border-left-width: 2px;
 }
 
-.border-r {
-  border-right-width: 1px;
-}
-
 .border-r-0 {
   border-right-width: 0px;
 }
@@ -2102,6 +2140,11 @@ select {
   border-style: none;
 }
 
+.border-amber-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 168 27 / var(--tw-border-opacity));
+}
+
 .border-amber-600 {
   --tw-border-opacity: 1;
   border-color: rgb(184 88 0 / var(--tw-border-opacity));
@@ -2132,6 +2175,16 @@ select {
   border-color: rgb(30 86 227 / var(--tw-border-opacity));
 }
 
+.border-cyan-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(62 202 232 / var(--tw-border-opacity));
+}
+
+.border-green-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(57 218 170 / var(--tw-border-opacity));
+}
+
 .border-neutral-0 {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -2167,11 +2220,21 @@ select {
   border-color: rgb(255 188 214 / var(--tw-border-opacity));
 }
 
+.border-pink-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(246 119 170 / var(--tw-border-opacity));
+}
+
 .border-pink-500 {
   --tw-border-opacity: 1;
   border-color: rgb(225 58 124 / var(--tw-border-opacity));
 }
 
+.border-purple-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(180 135 255 / var(--tw-border-opacity));
+}
+
 .border-b-neutral-150 {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(236 237 240 / var(--tw-border-opacity));
@@ -2182,11 +2245,6 @@ select {
   border-bottom-color: rgb(157 164 174 / var(--tw-border-opacity));
 }
 
-.border-r-neutral-150 {
-  --tw-border-opacity: 1;
-  border-right-color: rgb(236 237 240 / var(--tw-border-opacity));
-}
-
 .border-t-neutral-150 {
   --tw-border-opacity: 1;
   border-top-color: rgb(236 237 240 / var(--tw-border-opacity));
@@ -4596,22 +4654,6 @@ select {
   --tw-gradient-to-position:  ;
 }
 
-.stroke-blue-400 {
-  stroke: #80A3FF;
-}
-
-.stroke-green-600 {
-  stroke: #027D59;
-}
-
-.stroke-neutral-800 {
-  stroke: #1F2A37;
-}
-
-.stroke-blue-600 {
-  stroke: #1E56E3;
-}
-
 .stroke-amber-100 {
   stroke: #FFF3D4;
 }
@@ -4668,10 +4710,18 @@ select {
   stroke: #C6D6FF;
 }
 
+.stroke-blue-400 {
+  stroke: #80A3FF;
+}
+
 .stroke-blue-500 {
   stroke: #3970FD;
 }
 
+.stroke-blue-600 {
+  stroke: #1E56E3;
+}
+
 .stroke-blue-700 {
   stroke: #0D41C6;
 }
@@ -4740,6 +4790,10 @@ select {
   stroke: #0EA578;
 }
 
+.stroke-green-600 {
+  stroke: #027D59;
+}
+
 .stroke-green-700 {
   stroke: #006043;
 }
@@ -4796,6 +4850,10 @@ select {
   stroke: #384250;
 }
 
+.stroke-neutral-800 {
+  stroke: #1F2A37;
+}
+
 .stroke-neutral-850 {
   stroke: #18222F;
 }
@@ -5136,11 +5194,6 @@ select {
   padding-bottom: 0.625rem;
 }
 
-.py-20 {
-  padding-top: 5rem;
-  padding-bottom: 5rem;
-}
-
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -5166,10 +5219,19 @@ select {
   padding-bottom: 1.5rem;
 }
 
+.py-7 {
+  padding-top: 1.75rem;
+  padding-bottom: 1.75rem;
+}
+
 .pb-10 {
   padding-bottom: 2.5rem;
 }
 
+.pb-14 {
+  padding-bottom: 3.5rem;
+}
+
 .pb-16 {
   padding-bottom: 4rem;
 }
@@ -5282,6 +5344,10 @@ select {
   padding-top: 4rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .pt-5 {
   padding-top: 1.25rem;
 }
@@ -5290,18 +5356,6 @@ select {
   padding-top: 1.5rem;
 }
 
-.pt-\[2\.875rem\] {
-  padding-top: 2.875rem;
-}
-
-.pb-14 {
-  padding-bottom: 3.5rem;
-}
-
-.pt-4 {
-  padding-top: 1rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -5621,10 +5675,6 @@ select {
   text-transform: uppercase;
 }
 
-.capitalize {
-  text-transform: capitalize;
-}
-
 .italic {
   font-style: italic;
 }
@@ -6279,10 +6329,6 @@ select {
   transition-duration: 150ms;
 }
 
-.delay-100 {
-  transition-delay: 100ms;
-}
-
 .delay-300 {
   transition-delay: 300ms;
 }
@@ -6315,8 +6361,80 @@ select {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 /* Typography classes */
 
+@-webkit-keyframes pill-move-left {
+  0% {
+    left: 0;
+    width: 0%;
+  }
+
+  50% {
+    left: 0;
+    width: 100%;
+  }
+
+  100% {
+    left: 0;
+    width: 0%;
+  }
+}
+
+@keyframes pill-move-left {
+  0% {
+    left: 0;
+    width: 0%;
+  }
+
+  50% {
+    left: 0;
+    width: 100%;
+  }
+
+  100% {
+    left: 0;
+    width: 0%;
+  }
+}
+
+@-webkit-keyframes pill-move-right {
+  0% {
+    left: 0;
+    width: 0%;
+  }
+
+  50% {
+    left: 100%;
+    width: 0%;
+  }
+
+  100% {
+    left: 0;
+    width: 0%;
+  }
+}
+
+@keyframes pill-move-right {
+  0% {
+    left: 0;
+    width: 0%;
+  }
+
+  50% {
+    left: 100%;
+    width: 0%;
+  }
+
+  100% {
+    left: 0;
+    width: 0%;
+  }
+}
+
 .card-animation-wrapper {
   position: relative;
 }
@@ -7332,11 +7450,6 @@ select {
   border-color: rgb(210 214 219 / var(--tw-border-opacity));
 }
 
-.hover\:bg-amber-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 206 112 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(240 244 255 / var(--tw-bg-opacity));
@@ -7347,11 +7460,6 @@ select {
   background-color: rgb(223 232 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-blue-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(198 214 255 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(30 86 227 / var(--tw-bg-opacity));
@@ -7362,36 +7470,11 @@ select {
   background-color: rgb(13 65 198 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-cyan-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 236 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(145 245 215 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-neutral-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-neutral-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(210 214 219 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-pink-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 188 214 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 198 255 / var(--tw-bg-opacity));
-}
-
 .hover\:text-blue-600:hover {
   --tw-text-opacity: 1;
   color: rgb(30 86 227 / var(--tw-text-opacity));
@@ -7715,6 +7798,41 @@ 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));
 }
 
+.group:hover .group-hover\:bg-amber-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 206 112 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:bg-blue-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(198 214 255 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:bg-cyan-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 236 255 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:bg-green-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(145 245 215 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:bg-neutral-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(210 214 219 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:bg-pink-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 188 214 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:bg-purple-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 198 255 / var(--tw-bg-opacity));
+}
+
 .group:hover .group-hover\:bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
@@ -7765,113 +7883,6 @@ select {
   stroke: #FFFFFF;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-amber-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(224 121 0 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-blue-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(57 112 253 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-cyan-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(14 150 178 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-green-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(14 165 120 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-neutral-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(108 115 127 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-pink-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(225 58 124 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-purple-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(140 73 250 / var(--tw-bg-opacity));
-  }
-
-  .dark\:text-amber-100 {
-    --tw-text-opacity: 1;
-    color: rgb(255 243 212 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-blue-100 {
-    --tw-text-opacity: 1;
-    color: rgb(240 244 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-cyan-100 {
-    --tw-text-opacity: 1;
-    color: rgb(227 250 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-green-100 {
-    --tw-text-opacity: 1;
-    color: rgb(218 255 244 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-neutral-100 {
-    --tw-text-opacity: 1;
-    color: rgb(243 244 246 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-pink-100 {
-    --tw-text-opacity: 1;
-    color: rgb(255 237 244 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-purple-100 {
-    --tw-text-opacity: 1;
-    color: rgb(247 242 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:bg-amber-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(184 88 0 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-blue-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 86 227 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-cyan-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(4 117 141 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-green-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(2 125 89 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-neutral-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(77 87 97 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-pink-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(194 30 95 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-purple-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(113 43 227 / var(--tw-bg-opacity));
-  }
-}
-
 @media (min-width: 600px) {
   .tb\:visible {
     visibility: visible;
@@ -7885,6 +7896,10 @@ select {
     margin-left: 0px;
   }
 
+  .tb\:mt-0 {
+    margin-top: 0px;
+  }
+
   .tb\:mt-10 {
     margin-top: 2.5rem;
   }
@@ -8016,6 +8031,19 @@ select {
     border-end-end-radius: 0px;
   }
 
+  .tb\:border-0 {
+    border-width: 0px;
+  }
+
+  .tb\:border-r {
+    border-right-width: 1px;
+  }
+
+  .tb\:border-r-neutral-150 {
+    --tw-border-opacity: 1;
+    border-right-color: rgb(236 237 240 / var(--tw-border-opacity));
+  }
+
   .tb\:p-16 {
     padding: 4rem;
   }
@@ -8046,6 +8074,10 @@ select {
     padding-top: 2rem;
   }
 
+  .tb\:pt-\[2\.875rem\] {
+    padding-top: 2.875rem;
+  }
+
   .tb\:text-left {
     text-align: left;
   }
@@ -8435,6 +8467,10 @@ select {
     margin-left: 3rem;
   }
 
+  .md\:block {
+    display: block;
+  }
+
   .md\:flex {
     display: flex;
   }
@@ -8447,6 +8483,10 @@ select {
     flex: 1 1 0%;
   }
 
+  .md\:flex-col {
+    flex-direction: column;
+  }
+
   .md\:items-center {
     align-items: center;
   }

package/tailwind.config.js

@@ -784,18 +784,21 @@ module.exports = {
           letterSpacing: '-0.01em',
           fontWeight: '400',
           fontStyle: 'italic',
+          fontFamily: 'Petrona'
         }],
         'hds-t-quote': ['1.125rem', {
           lineHeight: '1.75rem',
           letterSpacing: '-0.01em',
           fontWeight: '400',
           fontStyle: 'italic',
+          fontFamily: 'Petrona'
         }],
         'hds-d-quote': ['1.5rem', {
           lineHeight: '2.25rem',
           letterSpacing: '-0.01em',
           fontWeight: '400',
           fontStyle: 'italic',
+          fontFamily: 'Petrona'
         }],
         // add more for more breakpoints