hds-web 1.7.4 → 1.7.6

package/src/styles/tailwind.css

@@ -901,6 +901,10 @@ select{
   left: 0.5rem;
 }
 
+.left-4{
+  left: 1rem;
+}
+
 .left-\[160\%\]{
   left: 160%;
 }
@@ -929,6 +933,10 @@ select{
   right: 0.5rem;
 }
 
+.right-4{
+  right: 1rem;
+}
+
 .right-8{
   right: 2rem;
 }
@@ -937,6 +945,10 @@ select{
   top: 0px;
 }
 
+.top-1\/2{
+  top: 50%;
+}
+
 .top-2{
   top: 0.5rem;
 }
@@ -973,6 +985,10 @@ select{
   z-index: 2;
 }
 
+.z-\[60\]{
+  z-index: 60;
+}
+
 .col-span-1{
   grid-column: span 1 / span 1;
 }
@@ -1135,6 +1151,10 @@ select{
   margin-left: -0.75rem;
 }
 
+.-ml-4{
+  margin-left: -1rem;
+}
+
 .-ml-px{
   margin-left: -1px;
 }
@@ -1239,6 +1259,10 @@ select{
   margin-right: 1rem;
 }
 
+.mr-8{
+  margin-right: 2rem;
+}
+
 .mt-1{
   margin-top: 0.25rem;
 }
@@ -1263,6 +1287,10 @@ select{
   margin-top: 0.5rem;
 }
 
+.mt-20{
+  margin-top: 5rem;
+}
+
 .mt-3{
   margin-top: 0.75rem;
 }
@@ -1295,6 +1323,10 @@ select{
   margin-top: 70px;
 }
 
+.-mt-4{
+  margin-top: -1rem;
+}
+
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -1342,6 +1374,14 @@ select{
   aspect-ratio: 2/1;
 }
 
+.h-0{
+  height: 0px;
+}
+
+.h-0\.5{
+  height: 0.125rem;
+}
+
 .h-1\/2{
   height: 50%;
 }
@@ -1358,6 +1398,10 @@ select{
   height: 3rem;
 }
 
+.h-14{
+  height: 3.5rem;
+}
+
 .h-2{
   height: 0.5rem;
 }
@@ -1422,6 +1466,10 @@ select{
   height: calc(100% - 112px);
 }
 
+.h-\[calc\(100\%-1px\)\]{
+  height: calc(100% - 1px);
+}
+
 .h-full{
   height: 100%;
 }
@@ -1466,6 +1514,10 @@ select{
   width: 3rem;
 }
 
+.w-14{
+  width: 3.5rem;
+}
+
 .w-2{
   width: 0.5rem;
 }
@@ -1634,6 +1686,10 @@ select{
   max-width: 29.18rem;
 }
 
+.max-w-\[380px\]{
+  max-width: 380px;
+}
+
 .max-w-\[44\.44rem\]{
   max-width: 44.44rem;
 }
@@ -1713,6 +1769,30 @@ 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));
 }
 
+.-translate-y-1\.5{
+  --tw-translate-y: -0.375rem;
+  -webkit-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: 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));
+}
+
+.-translate-y-\[0px\]{
+  --tw-translate-y: -0px;
+  -webkit-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: 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));
+}
+
+.translate-x-0{
+  --tw-translate-x: 0px;
+  -webkit-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: 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));
+}
+
+.translate-x-\[1240px\]{
+  --tw-translate-x: 1240px;
+  -webkit-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: 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));
+}
+
 .translate-y-0{
   --tw-translate-y: 0px;
   -webkit-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));
@@ -1725,12 +1805,30 @@ 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));
 }
 
+.translate-y-1\.5{
+  --tw-translate-y: 0.375rem;
+  -webkit-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: 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));
+}
+
 .translate-y-\[-20px\]{
   --tw-translate-y: -20px;
   -webkit-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: 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));
 }
 
+.translate-y-\[0px\]{
+  --tw-translate-y: 0px;
+  -webkit-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: 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));
+}
+
+.-rotate-45{
+  --tw-rotate: -45deg;
+  -webkit-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: 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));
+}
+
 .rotate-45{
   --tw-rotate: 45deg;
   -webkit-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));
@@ -5734,6 +5832,11 @@ select{
   padding-bottom: 2.5rem;
 }
 
+.py-12{
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
 .py-2{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -5792,6 +5895,10 @@ select{
   padding-bottom: 3rem;
 }
 
+.pb-14{
+  padding-bottom: 3.5rem;
+}
+
 .pb-16{
   padding-bottom: 4rem;
 }
@@ -5928,6 +6035,10 @@ select{
   padding-top: 1rem;
 }
 
+.pt-5{
+  padding-top: 1.25rem;
+}
+
 .pt-6{
   padding-top: 1.5rem;
 }
@@ -6243,10 +6354,6 @@ select{
   line-height: 1rem;
 }
 
-.font-bold{
-  font-weight: 700;
-}
-
 .font-medium{
   font-weight: 500;
 }
@@ -6819,6 +6926,12 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-sh1{
+  --tw-shadow: 0px -1px 3px rgba(28, 38, 63, 0.1), 0px -1px 2px rgba(28, 38, 63, 0.06);
+  --tw-shadow-colored: 0px -1px 3px var(--tw-shadow-color), 0px -1px 2px 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{
   outline-style: solid;
 }
@@ -6945,6 +7058,10 @@ select{
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
+.ease-in-out{
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .ease-out{
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
@@ -7761,6 +7878,119 @@ select{
   border-bottom: 1px solid rgb(255, 255, 255);
 }
 
+#load {
+  position: absolute;
+  width: 600px;
+  height: 36px;
+  left: 50%;
+  top: 40%;
+  margin-left: -300px;
+  overflow: visible;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+#load div {
+  position: absolute;
+  width: 200px;
+  opacity: 0;
+  animation: move 10s linear infinite;
+  -o-animation: move 10s linear infinite;
+  -moz-animation: move 10s linear infinite;
+  -webkit-animation: move 10s linear infinite;
+  color: #35C4F0;
+}
+
+#load div:nth-child(2) {
+  animation-delay: 0.2s;
+  -o-animation-delay: 0.2s;
+  -moz-animation-delay: 0.2s;
+  -webkit-animation-delay: 0.2s;
+}
+
+#load div:nth-child(3) {
+  animation-delay: 0.4s;
+  -o-animation-delay: 0.4s;
+  -webkit-animation-delay: 0.4s;
+}
+
+#load div:nth-child(4) {
+  animation-delay: 0.6s;
+  -o-animation-delay: 0.6s;
+  -moz-animation-delay: 0.6s;
+  -webkit-animation-delay: 0.6s;
+}
+
+#load div:nth-child(5) {
+  animation-delay: 0.8s;
+  -o-animation-delay: 0.8s;
+  -moz-animation-delay: 0.8s;
+  -webkit-animation-delay: 0.8s;
+}
+
+#load div:nth-child(6) {
+  animation-delay: 1s;
+  -o-animation-delay: 1s;
+  -moz-animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+}
+
+#load div:nth-child(7) {
+  animation-delay: 1.2s;
+  -o-animation-delay: 1.2s;
+  -moz-animation-delay: 1.2s;
+  -webkit-animation-delay: 1.2s;
+}
+
+@keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+
+  35% {
+    left: 41%;
+    opacity: 1;
+  }
+
+  65% {
+    left: 59%;
+    opacity: 1;
+  }
+
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+
+  35% {
+    left: 41%;
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  65% {
+    left: 59%;
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
+}
+
 .placeholder\:text-neutral-500::-webkit-input-placeholder{
   --tw-text-opacity: 1;
   color: rgb(108 115 127 / var(--tw-text-opacity));
@@ -7927,6 +8157,10 @@ select{
   padding-right: 5rem;
 }
 
+.last\:mb-0:last-child{
+  margin-bottom: 0px;
+}
+
 .last\:mr-0:last-child{
   margin-right: 0px;
 }
@@ -7958,6 +8192,10 @@ select{
   z-index: 10;
 }
 
+.hover\:z-10:hover{
+  z-index: 10;
+}
+
 .hover\:scale-125:hover{
   --tw-scale-x: 1.25;
   --tw-scale-y: 1.25;
@@ -8582,6 +8820,11 @@ select{
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:text-blue-700:hover{
+  --tw-text-opacity: 1;
+  color: rgb(13 65 198 / var(--tw-text-opacity));
+}
+
 .hover\:shadow:hover{
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -8594,6 +8837,20 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:shadow-xl:hover{
+  --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);
+}
+
+.hover\:transition:hover{
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .hover\:transition-all:hover{
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -9047,6 +9304,14 @@ select{
 }
 
 @media (min-width: 600px){
+  .tb\:left-auto{
+    left: auto;
+  }
+
+  .tb\:right-4{
+    right: 1rem;
+  }
+
   .tb\:mb-16{
     margin-bottom: 4rem;
   }
@@ -9141,6 +9406,10 @@ select{
     max-width: 21rem;
   }
 
+  .tb\:max-w-\[240px\]{
+    max-width: 240px;
+  }
+
   .tb\:max-w-\[25rem\]{
     max-width: 25rem;
   }
@@ -9201,6 +9470,10 @@ select{
     gap: 4rem;
   }
 
+  .tb\:gap-20{
+    gap: 5rem;
+  }
+
   .tb\:gap-3{
     gap: 0.75rem;
   }
@@ -9256,6 +9529,11 @@ select{
     padding-right: 0px;
   }
 
+  .tb\:px-10{
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
   .tb\:px-3{
     padding-left: 0.75rem;
     padding-right: 0.75rem;
@@ -9271,10 +9549,19 @@ select{
     padding-right: 2rem;
   }
 
+  .tb\:py-14{
+    padding-top: 3.5rem;
+    padding-bottom: 3.5rem;
+  }
+
   .tb\:pb-0{
     padding-bottom: 0px;
   }
 
+  .tb\:pb-10{
+    padding-bottom: 2.5rem;
+  }
+
   .tb\:pb-8{
     padding-bottom: 2rem;
   }
@@ -9295,6 +9582,10 @@ select{
     padding-top: 3.5rem;
   }
 
+  .tb\:pt-16{
+    padding-top: 4rem;
+  }
+
   .tb\:pt-8{
     padding-top: 2rem;
   }
@@ -9736,6 +10027,10 @@ select{
     min-width: 400px;
   }
 
+  .tb-l\:max-w-\[658px\]{
+    max-width: 658px;
+  }
+
   .tb-l\:flex-1{
     flex: 1 1 0%;
   }
@@ -9893,6 +10188,60 @@ select{
     padding-left: 2rem;
     padding-right: 2rem;
   }
+
+  .db-s\:mt-\[68px\]{
+    margin-top: 68px;
+  }
+
+  .db-s\:flex{
+    display: flex;
+  }
+
+  .db-s\:w-full{
+    width: 100%;
+  }
+
+  .db-s\:max-w-\[490px\]{
+    max-width: 490px;
+  }
+
+  .db-s\:max-w-\[540px\]{
+    max-width: 540px;
+  }
+
+  .db-s\:flex-row{
+    flex-direction: row;
+  }
+
+  .db-s\:items-center{
+    align-items: center;
+  }
+
+  .db-s\:justify-between{
+    justify-content: space-between;
+  }
+
+  .db-s\:gap-x-\[92px\]{
+    -webkit-column-gap: 92px;
+            column-gap: 92px;
+  }
+
+  .db-s\:self-start{
+    align-self: flex-start;
+  }
+
+  .db-s\:p-20{
+    padding: 5rem;
+  }
+
+  .db-s\:px-0{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .db-s\:pt-0{
+    padding-top: 0px;
+  }
 }
 
 @media (min-width: 1240px){
@@ -10035,11 +10384,21 @@ select{
     padding-right: 1rem;
   }
 
+  .db\:px-\[100px\]{
+    padding-left: 100px;
+    padding-right: 100px;
+  }
+
   .db\:py-20{
     padding-top: 5rem;
     padding-bottom: 5rem;
   }
 
+  .db\:py-6{
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
   .db\:pb-0{
     padding-bottom: 0px;
   }
@@ -10064,6 +10423,10 @@ select{
     padding-top: 5rem;
   }
 
+  .db\:pt-24{
+    padding-top: 6rem;
+  }
+
   .db\:pt-28{
     padding-top: 7rem;
   }
@@ -10380,6 +10743,4 @@ select{
 .\[\&\>ul\]\:ps-4>ul{
   -webkit-padding-start: 1rem;
           padding-inline-start: 1rem;
-}
-
-
+}

package/tailwind.config.js

@@ -167,12 +167,16 @@ module.exports = {
       'leading-loose':'1.5',
     },
     extend: {
+      boxShadow: {
+        'sh1': '0px -1px 3px rgba(28, 38, 63, 0.1), 0px -1px 2px rgba(28, 38, 63, 0.06)',
+      },
       screens: {
         'mb-s': '360px',
         'mb-m':'400px',
         'tb': '600px',
         'tb-m': '800px',
         'tb-l': '905px',
+        'db-s':'1024px',
         'db': '1240px',
         'db-l': '2560px'
       },