hds-web 1.18.9 → 1.19.0

package/package.json

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

package/src/HDS/components/Cards/Announcement/announcementMd.js

@@ -19,29 +19,31 @@ export default function AnnouncementMd(props) {
   const tagClass = props.tagColor ? props.tagColor : 'purple';
   if (isBannerActive) {
     return (
-      <div className={`${bgClass} flex my-6 justify-between relative rounded-2xl tb:rounded-full shadow p-4 tb:justify-center items-center`}>
-        <div className="block items-center tb:flex tb:justify-center">
-          {
-            props.brandImg && (
-              <div className="pl-3 tb:pl-14">
-                <img className="max-h-[34px]" src={props.brandImg} alt={props.brandImgAlt} />
-              </div>
-            )
-          }
-          {
-            props.tagText && (
-              <Typography textStyle="body2-medium" className={`inline-flex py-1 px-3 ml-0 tb:ml-14 tb-m:ml-6 rounded-full mr-4 min-w-fit ${tagColorVariants[tagClass]}`}>{props.tagText}</Typography>
-            )
-          }
-          <a href={props.linkUrl} className="px-3 block tb:px-0 pb-1 tb:pb-0">
-            <Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center [&>div]:inline-block`}>
-              {props.linkText}
-              <Icon height={'block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
-            </Typography>
-          </a>
-        </div>
-        <div className=" static mx-3 tb:mx-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-6 cursor-pointer w-8 min-w-[32px] h-8 rounded-full bg-neutral-100 flex items-center justify-center" onClick={()=>toggleBanner(false)}>
-          <Icon height={'block w-6 h-6 stroke-[2px] transition ease-in-out'} variant='xclose' strokeClass='stroke-neutral-800' />
+      <div className="py-6">
+        <div className={`${bgClass} flex justify-between relative rounded-2xl tb:rounded-full shadow p-4 tb:justify-center items-center`}>
+          <div className="block items-center tb:flex tb:justify-center">
+            {
+              props.brandImg && (
+                <div className="pl-3 tb:pl-14">
+                  <img className="max-h-[34px]" src={props.brandImg} alt={props.brandImgAlt} />
+                </div>
+              )
+            }
+            {
+              props.tagText && (
+                <Typography textStyle="body2-medium" className={`inline-flex py-1 px-3 ml-0 tb:ml-14 tb-m:ml-6 rounded-full mr-4 min-w-fit ${tagColorVariants[tagClass]}`}>{props.tagText}</Typography>
+              )
+            }
+            <a href={props.linkUrl} className="px-3 block tb:px-0 pb-1 tb:pb-0">
+              <Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center [&>div]:inline-block`}>
+                {props.linkText}
+                <Icon height={'block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
+              </Typography>
+            </a>
+          </div>
+          <div className=" static mx-3 tb:mx-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-6 cursor-pointer w-8 min-w-[32px] h-8 rounded-full bg-neutral-100 flex items-center justify-center" onClick={()=>toggleBanner(false)}>
+            <Icon height={'block w-6 h-6 stroke-[2px] transition ease-in-out'} variant='xclose' strokeClass='stroke-neutral-800' />
+          </div>
         </div>
       </div>
     )

package/src/styles/tailwind.css

@@ -1323,6 +1323,10 @@ select{
   margin-bottom: 1px;
 }
 
+.ml-0{
+  margin-left: 0px;
+}
+
 .ml-1{
   margin-left: 0.25rem;
 }
@@ -1666,6 +1670,10 @@ select{
   max-height: 26.25;
 }
 
+.max-h-\[34px\]{
+  max-height: 34px;
+}
+
 .max-h-\[530px\]{
   max-height: 530px;
 }
@@ -1912,6 +1920,10 @@ select{
   min-width: 312px;
 }
 
+.min-w-\[32px\]{
+  min-width: 32px;
+}
+
 .min-w-\[48px\]{
   min-width: 48px;
 }
@@ -9083,6 +9095,10 @@ select{
           animation: spin 1s linear infinite;
 }
 
+.hover\:cursor-default:hover{
+  cursor: default;
+}
+
 .hover\:rounded-3xl:hover{
   border-radius: 1.5rem;
 }
@@ -10275,6 +10291,14 @@ select{
 }
 
 @media (min-width: 600px){
+  .tb\:absolute{
+    position: absolute;
+  }
+
+  .tb\:left-6{
+    left: 1.5rem;
+  }
+
   .tb\:left-auto{
     left: auto;
   }
@@ -10283,6 +10307,11 @@ select{
     right: 0px;
   }
 
+  .tb\:mx-0{
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
   .tb\:mb-16{
     margin-bottom: 4rem;
   }
@@ -10291,6 +10320,10 @@ select{
     margin-left: 0px;
   }
 
+  .tb\:ml-14{
+    margin-left: 3.5rem;
+  }
+
   .tb\:mr-4{
     margin-right: 1rem;
   }
@@ -10443,6 +10476,12 @@ select{
     max-width: 763px;
   }
 
+  .tb\:-translate-y-1\/2{
+    --tw-translate-y: -50%;
+    -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));
+  }
+
   .tb\:snap-always{
     scroll-snap-stop: always;
   }
@@ -10535,6 +10574,10 @@ select{
     border-radius: 1.5rem;
   }
 
+  .tb\:rounded-full{
+    border-radius: 9999px;
+  }
+
   .tb\:border{
     border-width: 1px;
   }
@@ -10649,6 +10692,10 @@ select{
     padding-bottom: 2rem;
   }
 
+  .tb\:pl-14{
+    padding-left: 3.5rem;
+  }
+
   .tb\:pr-0{
     padding-right: 0px;
   }
@@ -11087,6 +11134,10 @@ select{
     top: 9rem;
   }
 
+  .tb-m\:ml-6{
+    margin-left: 1.5rem;
+  }
+
   .tb-m\:mr-0{
     margin-right: 0px;
   }
@@ -12011,6 +12062,10 @@ select{
   margin-bottom: 0px;
 }
 
+.\[\&\>div\]\:inline-block>div{
+  display: inline-block;
+}
+
 .\[\&\>p\>a\]\:text-blue-600>p>a{
   --tw-text-opacity: 1;
   color: rgb(30 86 227 / var(--tw-text-opacity));