hds-web 1.4.1 → 1.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Avatars/hasConAv.js

@@ -7,13 +7,13 @@ export default function HasConAvatar({ name, designation, size, imageUrl }) {
     return (
         <div className={`tb:max-w-[289px] group rounded-3xl flex items-center justify-between bg-neutral-0 tb:inline-flex tb:flex-col shadow tb:min-w-[18rem]`}>
 
-            <div className="px-5 py-[30px] tb:p-0 text-left tb:flex-col min-h-[116px] tb:flex tb:items-center tb:px-8 tb:pb-8 tb:mt-8 tb:ml-0 tb:text-center">
+            <div className="px-5 py-[30px] tb:p-0 text-left tb:flex-col min-h-[120px] tb:flex tb:items-center tb:px-8 tb:pb-8 tb:mt-8 tb:ml-0 tb:text-center">
                 <div  className=' text-hds-m-body1c-bold tb:text-hds-t-h5 db:text-hds-d-h5 text-blue-400'>{name}</div>
                 <div  className=' text-hds-m-body3c-medium tb:text-hds-t-h7 db:text-hds-d-h7 text-blue-800 uppercase'>{designation}</div>
             </div>
             <div className='relative self-center'>
                 <img
-                    className={`inline-block min-w-[144px] w-[9rem] tb:min-w-[18rem] tb:rounded border-neutral-0 tb-l:rounded-r-2xl `}
+                    className={`inline-block min-w-[144px] w-[9rem] tb:min-w-[18rem] tb:rounded-3xl border-neutral-0`}
                     src={imageUrl}
                 />
                  {/* <div className="absolute tb-l:rounded-b-3xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div> */}

package/src/HDS/components/Carousels/carouselCard.js

@@ -152,7 +152,7 @@ export default function CarouselCard(props) {
 
                             {props.cards.map((item, i) => (
                                 // <div className="max-[1140px]:snap-always tb:snap-always mx-5 max-[1140px]:shrink-0" key={i} ref={refs[i]}>
-                                <div className=" max-[1140px]:snap-end snap-center mx-5 shrink-0" key={i} ref={refs[i]}>
+                                <div className=" db:snap-center snap-center tb-m:snap-start mx-5 shrink-0" key={i} ref={refs[i]}>
                                     <div className="w-full select-none rounded-3xl object-contain">
                                         {React.createElement(props.component, item)}
                                     </div>

package/src/styles/tailwind.css

@@ -753,6 +753,12 @@ select {
   }
 }
 
+@media (min-width: 800px) {
+  .container {
+    max-width: 800px;
+  }
+}
+
 @media (min-width: 905px) {
   .container {
     max-width: 905px;
@@ -1408,6 +1414,10 @@ select {
   min-height: 116px;
 }
 
+.min-h-\[120px\] {
+  min-height: 120px;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -8221,6 +8231,10 @@ select {
     border-radius: 0.25rem;
   }
 
+  .tb\:rounded-3xl {
+    border-radius: 1.5rem;
+  }
+
   .tb\:rounded-e-none {
     border-start-end-radius: 0px;
     border-end-end-radius: 0px;
@@ -8657,6 +8671,12 @@ select {
   }
 }
 
+@media (min-width: 800px) {
+  .tb-m\:snap-start {
+    scroll-snap-align: start;
+  }
+}
+
 @media (min-width: 905px) {
   .tb-l\:mb-0 {
     margin-bottom: 0px;
@@ -8924,6 +8944,10 @@ select {
     max-width: 625px;
   }
 
+  .db\:snap-center {
+    scroll-snap-align: center;
+  }
+
   .db\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

package/tailwind.config.js

@@ -170,6 +170,7 @@ module.exports = {
       screens: {
         'mb-s': '360px',
         'tb': '600px',
+        'tb-m': '800px',
         'tb-l': '905px',
         'db': '1240px',
         'db-l': '2560px'