hds-web 1.23.9 → 1.24.0

package/package.json

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

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

@@ -47,7 +47,7 @@ const Buttonclasses = {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-neutral-0 text-neutral-0 ',
 
-      'hover': 'hover:text-neutral-0 hover:border-2 hover:border-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
+      'hover': 'hover:text-neutral-0 hover:border-opacity-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
       
       'focus': 'focus:text-neutrak-0 focus:border-2 border-neutral-0 focus:outline-none focus:text-neutral-0',
     },
@@ -56,11 +56,11 @@ const Buttonclasses = {
   
   'ghost': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full  justify-center text-blue-600',
-      'hover': 'hover:bg-blue-100 hover:text-blue-600',
-      'focus': 'focus:text-blue-700 focus:outline-none',
+      'base': 'db:w-fit tb:w-fit w-full  justify-center text-neutral-0',
+      'hover': ' ',
+      'focus': 'focus:outline-none',
     },
-    'disabled': 'text-neutral-300',
+    'disabled': ' bg-neutral-200 text-neutral-400',
   },
   'primaryLink': {
     'default': {
@@ -116,6 +116,7 @@ export default function Button(props) {
     btnTextColorClass,
     btnTextHoverClass,
     btnBgColorClass,
+    btnbgHoverClass,
     rightIconVariant,
     rightIconColor,
     leftIconVariant,
@@ -156,7 +157,8 @@ export default function Button(props) {
     'group',
     defaultClasses,
     className,
-    HDSColor(btnTextHoverClass)
+    HDSColor(btnTextHoverClass),
+    HDSColor(btnbgHoverClass)
 
   ].join(' ');
 

package/src/HDS/components/Cards/Misc/talkcard2.js

@@ -14,10 +14,9 @@ export default function TalkCard2(props) {
     }
     else CardClass = 'tb-l:justify-center';
 
-
     return (
 
-        <div className="grid">
+        <a href={props.readUrl ?? '#'} className="grid group">
             <div className={`flex flex-col tb-l:flex-row tb-l:justify-between `}>
                 <div className={"px-6 pt-6 tb-l:px-8 tb-l:pb-6  tb-l:border-r tb-l:border-r-neutral-200"}>
                     <div className="flex flex-row flex-wrap tb:gap-3 gap-2">
@@ -52,7 +51,7 @@ export default function TalkCard2(props) {
                         <div className="flex pb-6 tb-l:pb-0">
                             {props.readUrl &&
                                 props.para && (
-                                    <a href={props.readUrl}>
+                                    <div>
                                         <HDSButton
                                         label={props.videoUrl ? 'Watch Recording': 'Read more'}
                                             type='secondaryLink'
@@ -67,7 +66,7 @@ export default function TalkCard2(props) {
                                             animatedHoverStroke='stroke-blue-500'
                                             btnTextHoverClass='hover:text-blue-500'
                                         />
-                                    </a>
+                                    </div>
                                 )}
                         </div>
                     </div>
@@ -112,7 +111,7 @@ export default function TalkCard2(props) {
                         </div>}
                 </div>
             </div>
-        </div>
+        </a>
 
     )
 

package/src/styles/tailwind.css

@@ -1277,6 +1277,10 @@ select{
   margin-left: -0.375rem;
 }
 
+.-ml-2{
+  margin-left: -0.5rem;
+}
+
 .-ml-3{
   margin-left: -0.75rem;
 }
@@ -1493,10 +1497,6 @@ select{
   margin-top: 70px;
 }
 
-.-ml-2{
-  margin-left: -0.5rem;
-}
-
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -1672,8 +1672,8 @@ select{
   height: 700px;
 }
 
-.h-\[718px\]{
-  height: 718px;
+.h-\[800px\]{
+  height: 800px;
 }
 
 .h-\[80px\]{
@@ -1708,10 +1708,6 @@ select{
   height: 100vh;
 }
 
-.h-\[800px\]{
-  height: 800px;
-}
-
 .max-h-\[181px\]{
   max-height: 181px;
 }
@@ -1724,14 +1720,14 @@ select{
   max-height: 26.25;
 }
 
-.max-h-\[28px\]{
-  max-height: 28px;
-}
-
 .max-h-\[40px\]{
   max-height: 40px;
 }
 
+.max-h-\[44px\]{
+  max-height: 44px;
+}
+
 .max-h-\[530px\]{
   max-height: 530px;
 }
@@ -1748,18 +1744,6 @@ select{
   max-height: 100vh;
 }
 
-.max-h-\[34px\]{
-  max-height: 34px;
-}
-
-.max-h-\[44px\]{
-  max-height: 44px;
-}
-
-.max-h-\[50px\]{
-  max-height: 50px;
-}
-
 .min-h-\[12px\]{
   min-height: 12px;
 }
@@ -1796,22 +1780,6 @@ select{
   min-height: 64px;
 }
 
-.min-h-\[518px\]{
-  min-height: 518px;
-}
-
-.min-h-\[839px\]{
-  min-height: 839px;
-}
-
-.min-h-\[855px\]{
-  min-height: 855px;
-}
-
-.min-h-\[200px\]{
-  min-height: 200px;
-}
-
 .min-h-\[742px\]{
   min-height: 742px;
 }
@@ -2104,10 +2072,6 @@ select{
   max-width: 242px;
 }
 
-.max-w-\[280px\]{
-  max-width: 280px;
-}
-
 .max-w-\[29\.18rem\]{
   max-width: 29.18rem;
 }
@@ -2148,6 +2112,10 @@ select{
   max-width: 460px;
 }
 
+.max-w-\[518px\]{
+  max-width: 518px;
+}
+
 .max-w-\[583px\]{
   max-width: 583px;
 }
@@ -2186,10 +2154,6 @@ select{
   max-width: min-content;
 }
 
-.max-w-\[518px\]{
-  max-width: 518px;
-}
-
 .flex-1{
   flex: 1 1 0%;
 }
@@ -2288,18 +2252,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-2{
-  --tw-translate-x: 0.5rem;
-  -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-px{
-  --tw-translate-x: 1px;
-  -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));
@@ -5859,10 +5811,6 @@ select{
   fill: #6C737F;
 }
 
-.fill-neutral-800{
-  fill: #1F2A37;
-}
-
 .stroke-amber-100{
   stroke: #FFF3D4;
 }
@@ -6687,10 +6635,6 @@ select{
   padding-top: 81px;
 }
 
-.pt-1{
-  padding-top: 0.25rem;
-}
-
 .text-left{
   text-align: left;
 }
@@ -7534,10 +7478,6 @@ select{
   opacity: 0.6;
 }
 
-.mix-blend-multiply{
-  mix-blend-mode: multiply;
-}
-
 .shadow{
   --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);
@@ -7676,36 +7616,6 @@ select{
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.grayscale{
-  --tw-grayscale: grayscale(100%);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.grayscale-\[50\%\]{
-  --tw-grayscale: grayscale(50%);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.grayscale-\[30\%\]{
-  --tw-grayscale: grayscale(30%);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.grayscale-\[70\%\]{
-  --tw-grayscale: grayscale(70%);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.grayscale-\[\#1F2A37\]{
-  --tw-grayscale: grayscale(#1F2A37);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .filter{
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -7717,24 +7627,6 @@ select{
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
-.backdrop-brightness-50{
-  --tw-backdrop-brightness: brightness(.5);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.backdrop-grayscale{
-  --tw-backdrop-grayscale: grayscale(100%);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.backdrop-sepia-0{
-  --tw-backdrop-sepia: sepia(0);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
 .transition{
   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;
@@ -7763,6 +7655,10 @@ select{
   transition-duration: 0s;
 }
 
+.duration-1000{
+  transition-duration: 1000ms;
+}
+
 .duration-150{
   transition-duration: 150ms;
 }
@@ -7787,10 +7683,6 @@ select{
   transition-duration: 350ms;
 }
 
-.duration-1000{
-  transition-duration: 1000ms;
-}
-
 .ease-in{
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -9937,11 +9829,6 @@ select{
   background-color: rgb(133 77 24 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-\[\#1F2A37\]:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 42 55 / var(--tw-bg-opacity));
-}
-
 .hover\:pl-\[9px\]:hover{
   padding-left: 9px;
 }
@@ -10001,17 +9888,6 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:grayscale-0:hover{
-  --tw-grayscale: grayscale(0);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.hover\:filter-none:hover{
-  -webkit-filter: none;
-          filter: none;
-}
-
 .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;
@@ -10518,14 +10394,6 @@ select{
   color: rgb(0 6 21 / var(--tw-text-opacity));
 }
 
-.group\/sc:hover .group-hover\/sc\:opacity-100{
-  opacity: 1;
-}
-
-.group:hover .group-hover\:opacity-30{
-  opacity: 0.3;
-}
-
 .group\/img:hover .group-hover\/img\:opacity-0{
   opacity: 0;
 }
@@ -10534,6 +10402,14 @@ select{
   opacity: 1;
 }
 
+.group\/sc:hover .group-hover\/sc\:opacity-100{
+  opacity: 1;
+}
+
+.group:hover .group-hover\:opacity-30{
+  opacity: 0.3;
+}
+
 .group\/flyoutc:hover .group-hover\/flyoutc\:shadow-lg{
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -10546,12 +10422,6 @@ select{
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.group:hover .group-hover\:grayscale-0{
-  --tw-grayscale: grayscale(0);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .group:hover .group-hover\:transition-all{
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -10868,8 +10738,8 @@ select{
     min-width: 150px;
   }
 
-  .tb\:min-w-\[182px\]{
-    min-width: 182px;
+  .tb\:min-w-\[186px\]{
+    min-width: 186px;
   }
 
   .tb\:min-w-\[18rem\]{
@@ -10892,18 +10762,6 @@ select{
     min-width: 500px;
   }
 
-  .tb\:min-w-\[185px\]{
-    min-width: 185px;
-  }
-
-  .tb\:min-w-\[200px\]{
-    min-width: 200px;
-  }
-
-  .tb\:min-w-\[186px\]{
-    min-width: 186px;
-  }
-
   .tb\:max-w-\[17rem\]{
     max-width: 17rem;
   }
@@ -10932,6 +10790,10 @@ select{
     max-width: 393px;
   }
 
+  .tb\:max-w-\[420px\]{
+    max-width: 420px;
+  }
+
   .tb\:max-w-\[480px\]{
     max-width: 480px;
   }
@@ -10948,10 +10810,6 @@ select{
     max-width: 763px;
   }
 
-  .tb\:max-w-\[420px\]{
-    max-width: 420px;
-  }
-
   .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));
@@ -11151,6 +11009,11 @@ select{
     padding-right: 2rem;
   }
 
+  .tb\:py-1{
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
   .tb\:py-12{
     padding-top: 3rem;
     padding-bottom: 3rem;
@@ -11166,11 +11029,6 @@ select{
     padding-bottom: 0.5rem;
   }
 
-  .tb\:py-1{
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-  }
-
   .tb\:pb-0{
     padding-bottom: 0px;
   }
@@ -11767,14 +11625,6 @@ select{
     height: 100%;
   }
 
-  .tb-l\:min-h-\[676px\]{
-    min-height: 676px;
-  }
-
-  .tb-l\:min-h-\[224px\]{
-    min-height: 224px;
-  }
-
   .tb-l\:min-h-\[518px\]{
     min-height: 518px;
   }
@@ -11821,8 +11671,8 @@ select{
     min-width: 700px;
   }
 
-  .tb-l\:min-w-\[518px\]{
-    min-width: 518px;
+  .tb-l\:max-w-7xl{
+    max-width: 80rem;
   }
 
   .tb-l\:max-w-\[1240px\]{
@@ -11845,10 +11695,6 @@ select{
     max-width: 658px;
   }
 
-  .tb-l\:max-w-7xl{
-    max-width: 80rem;
-  }
-
   .tb-l\:grid-cols-2{
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -11861,10 +11707,6 @@ select{
     flex-direction: column;
   }
 
-  .tb-l\:flex-col-reverse{
-    flex-direction: column-reverse;
-  }
-
   .tb-l\:items-center{
     align-items: center;
   }
@@ -12026,10 +11868,6 @@ select{
     padding-top: 0px;
   }
 
-  .tb-l\:pt-20{
-    padding-top: 5rem;
-  }
-
   .tb-l\:pt-14{
     padding-top: 3.5rem;
   }
@@ -12117,10 +11955,6 @@ select{
     max-width: 540px;
   }
 
-  .db-s\:max-w-\[717px\]{
-    max-width: 717px;
-  }
-
   .db-s\:max-w-\[650px\]{
     max-width: 650px;
   }