hds-web 1.13.0 → 1.13.2

package/package.json

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

package/src/HDS/components/Buttons/button.js

@@ -27,15 +27,6 @@ const Buttonclasses = {
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
   },
-  'primaryTransparent': {
-    'default': {
-      'base': 'db:w-fit tb:w-fit w-full justify-center justify-center text-neutral-0',
-      'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
-      'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:text-neutral-0 focus:outline-none active:bg-blue-600 active:text-neutral-0 active:outline-none',
-     
-    },
-    'disabled': 'bg-neutral-200 text-neutral-400',
-  },
   'tonal': {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-200 text-blue-600',

package/src/HDS/helpers/Media/mediabox.js

@@ -55,14 +55,9 @@ export default function MediaViewer ({ img_url, video_url, video_poster, width }
                   <Icon variant='xclose' height='h-6 w-6' strokeClass='stroke-neutral-800' />
                 </a>
                 <video
-                    id="hero_vid"
-                    controls
-                    autoPlay
-                    muted
-                    playsInline
-                    width="500"
-                    height="500"
-                    className="tb:w-full w-full rounded-3xl"
+                  controls={false}
+                  autoPlay
+                  className="object-contain max-w-full max-h-full"
                 >
                   <source src={video_url} type="video/mp4" />
                 </video>

package/src/HDS/modules/navCard/navCard.js

@@ -11,7 +11,24 @@ const tabCard = (tabContent) => (
         <div className=''>
             {tabContent.title && <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
 
-            {tabContent.sub_title && <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.sub_title}</Typography>}
+            {tabContent.subTitle && <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.subTitle}</Typography>}
+            {tabContent.readMore_cta &&  <div className="flex">
+                <HDSButton
+                    label={tabContent.readMore_cta}
+                    type='secondaryLink'
+                    leftIconVariant='none'
+                    rightIconVariant='none'
+                    state='default'
+                    size='sm'
+                    rightAnimatedArrow={true}
+                    rightAnimatedArrowColor='#3970FD'
+                    animatedHoverStroke='#3970FD'
+                    btnTextColorClass='text-blue-500'
+                    btnTextHoverClass=''
+                    className=' mt-4'
+                />
+            </div>}
+           
         </div>
         {tabContent.btnLabel &&
             <div className='flex pl-3 pt-6 pb-8'>
@@ -69,7 +86,7 @@ export default function NavCard(props) {
                             onTabClick={handleTabClick}
                             tabs={props.navTabs}
                             pillColor={props.pillColor}
-                            bgColorTab={props.heroData.bgColorTab}
+                            bgColorTab={props.bgColorTab}
                         />
                     </div>
                     <div className=''>

package/src/styles/tailwind.css

@@ -861,16 +861,8 @@ select{
   bottom: -0.375rem;
 }
 
-.-left-\[137px\]{
-  left: -137px;
-}
-
-.-left-\[216px\]{
-  left: -216px;
-}
-
-.-left-\[218px\]{
-  left: -218px;
+.-left-20{
+  left: -5rem;
 }
 
 .-left-\[60\%\]{
@@ -985,6 +977,10 @@ select{
   top: 1.25rem;
 }
 
+.top-8{
+  top: 2rem;
+}
+
 .top-\[112px\]{
   top: 112px;
 }
@@ -1001,14 +997,6 @@ select{
   top: 72px;
 }
 
-.-left-20{
-  left: -5rem;
-}
-
-.top-8{
-  top: 2rem;
-}
-
 .isolate{
   isolation: isolate;
 }
@@ -1188,10 +1176,6 @@ select{
   margin-bottom: 1.5rem;
 }
 
-.-mb-2{
-  margin-bottom: -0.5rem;
-}
-
 .-mb-\[112\%\]{
   margin-bottom: -112%;
 }
@@ -1404,10 +1388,6 @@ select{
   margin-top: 70px;
 }
 
-.mr-0{
-  margin-right: 0px;
-}
-
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -1447,10 +1427,6 @@ select{
   display: grid;
 }
 
-.inline-grid{
-  display: inline-grid;
-}
-
 .hidden{
   display: none;
 }
@@ -1599,22 +1575,6 @@ select{
   height: 100vh;
 }
 
-.h-\[200px\]{
-  height: 200px;
-}
-
-.h-\[697px\]{
-  height: 697px;
-}
-
-.h-\[calc\(100\%-600px\)\]{
-  height: calc(100% - 600px);
-}
-
-.h-\[calc\(100\%-80px\)\]{
-  height: calc(100% - 80px);
-}
-
 .max-h-\[181px\]{
   max-height: 181px;
 }
@@ -1627,18 +1587,10 @@ select{
   max-height: 26.25;
 }
 
-.max-h-\[72px\]{
-  max-height: 72px;
-}
-
 .max-h-full{
   max-height: 100%;
 }
 
-.max-h-screen{
-  max-height: 100vh;
-}
-
 .min-h-\[12px\]{
   min-height: 12px;
 }
@@ -1861,10 +1813,6 @@ select{
   min-width: 348px;
 }
 
-.min-w-\[396px\]{
-  min-width: 396px;
-}
-
 .min-w-\[48px\]{
   min-width: 48px;
 }
@@ -1903,10 +1851,6 @@ select{
   max-width: 125px;
 }
 
-.max-w-\[128px\]{
-  max-width: 128px;
-}
-
 .max-w-\[148px\]{
   max-width: 148px;
 }
@@ -2084,42 +2028,6 @@ 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-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-x-\[-1240\]{
-  --tw-translate-x: -1240;
-  -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-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-\[1024px\]{
-  --tw-translate-x: 1024px;
-  -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-\[1024px\]{
-  --tw-translate-x: -1024px;
-  -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));
@@ -2477,12 +2385,6 @@ select{
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
-.divide-y-2 > :not([hidden]) ~ :not([hidden]){
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
-}
-
 .divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]){
   border-color: rgb(30 86 227 / 0.1);
 }
@@ -2518,10 +2420,6 @@ select{
   overflow: hidden;
 }
 
-.overflow-clip{
-  overflow: clip;
-}
-
 .overflow-scroll{
   overflow: scroll;
 }
@@ -7279,12 +7177,6 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-home-drop{
-  --tw-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.16);
-  --tw-shadow-colored: 0px 10px 30px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-inner{
   --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
@@ -9832,10 +9724,6 @@ select{
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.group\/icon:hover .group-hover\/icon\:stroke-blue-800{
-  stroke: #00288E;
-}
-
 .group:hover .group-hover\:stroke-blue-500{
   stroke: #3970FD;
 }
@@ -9856,21 +9744,10 @@ select{
   stroke: #111927;
 }
 
-.group:hover .group-hover\:text-neutral-1000{
-  --tw-text-opacity: 1;
-  color: rgb(0 6 21 / var(--tw-text-opacity));
-}
-
 .group:hover .group-hover\:opacity-30{
   opacity: 0.3;
 }
 
-.group\/icon:hover .group-hover\/icon\:transition-all{
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .group:hover .group-hover\:transition-all{
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -9881,10 +9758,6 @@ select{
   transition-delay: 100ms;
 }
 
-.group\/icon:hover .group-hover\/icon\:duration-1000{
-  transition-duration: 1000ms;
-}
-
 .group:hover .group-hover\:duration-100{
   transition-duration: 100ms;
 }
@@ -9893,10 +9766,6 @@ select{
   transition-duration: 300ms;
 }
 
-.group\/icon:hover .group-hover\/icon\:ease-in-out{
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .group:hover .group-hover\:ease-in-out{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -10079,16 +9948,6 @@ select{
     display: grid;
   }
 
-  @media (min-width: 600px){
-    .tb\:tb\:grid{
-      display: grid;
-    }
-  }
-
-  .tb\:inline-grid{
-    display: inline-grid;
-  }
-
   .tb\:hidden{
     display: none;
   }
@@ -10199,12 +10058,6 @@ select{
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  @media (min-width: 600px){
-    .tb\:tb\:grid-cols-1{
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-  }
-
   .tb\:flex-row{
     flex-direction: row;
   }
@@ -10266,15 +10119,15 @@ select{
             column-gap: 4rem;
   }
 
-  .tb\:gap-y-16{
-    row-gap: 4rem;
-  }
-
   .tb\:gap-x-4{
     -webkit-column-gap: 1rem;
             column-gap: 1rem;
   }
 
+  .tb\:gap-y-16{
+    row-gap: 4rem;
+  }
+
   .tb\:rounded-3xl{
     border-radius: 1.5rem;
   }
@@ -10852,12 +10705,6 @@ select{
     width: 100%;
   }
 
-  .tb-l\:w-fit{
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
   .tb-l\:min-w-\[400px\]{
     min-width: 400px;
   }