hds-web 1.6.8 → 1.6.9

package/package.json

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

package/src/HDS/assets/icons/calendar-plus-01.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 8H3M16 2V5M8 2V5M12 18V12M9 15H15M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 8H3M16 2V5M8 2V5M12 18V12M9 15H15M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z"  stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/HDS/assets/icons/calendar-plus-02.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 11.5V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22H12.5M21 10H3M16 2V6M8 2V6M18 21V15M15 18H21"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 11.5V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22H12.5M21 10H3M16 2V6M8 2V6M18 21V15M15 18H21"  stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/HDS/assets/icons/hasura-1.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.04272 3.01211C6.48206 2.0875 8.19783 1.54417 10.0375 1.54417H10.2472C12.0869 1.54417 13.8027 2.07797 15.242 3.01211C15.69 3.29807 16.281 3.20275 16.6051 2.79287L17.7871 0.953183C17.8824 0.819734 18.0254 0.724414 18.1874 0.714882C18.3495 0.70535 18.5115 0.772074 18.6068 0.905523C19.56 2.2972 19.8269 5.45231 19.3027 7.07276C19.112 7.64469 19.0644 8.2452 19.1692 8.82666C19.2836 9.40812 19.3885 10.104 19.3885 10.5901C19.3885 15.5944 15.2992 19.6455 10.2472 19.6455H10.0375C4.98552 19.6455 0.896274 15.5944 0.896274 10.5901C0.896274 10.104 1.01066 9.40812 1.11551 8.82666C1.22036 8.2452 1.16317 7.64469 0.982062 7.07276C0.457799 5.45231 0.734229 2.2972 1.6779 0.905523C1.76369 0.762542 1.93527 0.70535 2.09731 0.714882C2.25936 0.733946 2.41187 0.819734 2.49766 0.953183L3.67963 2.79287C4.01326 3.20275 4.59471 3.29807 5.04272 3.01211ZM11.108 14.2727V7H9.28977L7.5 8.09375V9.76989L9.09091 8.81818H9.13352V14.2727H11.108Z" fill="#80A3FF"/>
+</svg>

package/src/HDS/assets/icons/hasura-2.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.04272 3.01211C6.48206 2.0875 8.19783 1.54417 10.0375 1.54417H10.2472C12.0869 1.54417 13.8027 2.07797 15.242 3.01211C15.69 3.29807 16.281 3.20275 16.6051 2.79287L17.7871 0.953183C17.8824 0.819734 18.0254 0.724414 18.1874 0.714882C18.3495 0.70535 18.5115 0.772074 18.6068 0.905523C19.56 2.2972 19.8269 5.45231 19.3027 7.07276C19.112 7.64469 19.0644 8.2452 19.1692 8.82666C19.2836 9.40812 19.3885 10.104 19.3885 10.5901C19.3885 15.5944 15.2992 19.6455 10.2472 19.6455H10.0375C4.98552 19.6455 0.896274 15.5944 0.896274 10.5901C0.896274 10.104 1.01066 9.40812 1.11551 8.82666C1.22036 8.2452 1.16317 7.64469 0.982062 7.07276C0.457799 5.45231 0.734229 2.2972 1.6779 0.905523C1.76369 0.762542 1.93527 0.70535 2.09731 0.714882C2.25936 0.733946 2.41187 0.819734 2.49766 0.953183L3.67963 2.79287C4.01326 3.20275 4.59471 3.29807 5.04272 3.01211ZM7.14205 12.9517V14.3722H12.7244V12.7955H9.88352V12.7528L10.5653 12.1847C11.1193 11.723 11.5466 11.3253 11.8473 10.9915C12.148 10.6577 12.3563 10.3535 12.4723 10.0788C12.5883 9.80185 12.6463 9.52367 12.6463 9.24432C12.6463 8.79214 12.5291 8.39796 12.2947 8.06179C12.0627 7.72562 11.7325 7.4652 11.304 7.28054C10.8778 7.09351 10.3736 7 9.79119 7C9.22775 7 8.73651 7.09943 8.31747 7.2983C7.89844 7.49716 7.5741 7.78125 7.34446 8.15057C7.11482 8.51989 7 8.96023 7 9.47159H8.875C8.875 9.26799 8.91288 9.09517 8.98864 8.95312C9.06439 8.81108 9.17093 8.70336 9.30824 8.62997C9.44792 8.55658 9.6089 8.51989 9.79119 8.51989C9.97348 8.51989 10.1345 8.55658 10.2741 8.62997C10.4138 8.70099 10.5227 8.80279 10.6009 8.93537C10.6813 9.06794 10.7216 9.22775 10.7216 9.41477C10.7216 9.58523 10.6861 9.74029 10.6151 9.87997C10.5464 10.0196 10.447 10.1558 10.3168 10.2884C10.1889 10.4186 10.035 10.5582 9.85511 10.7074L7.14205 12.9517Z" fill="#80A3FF"/>
+</svg>

package/src/HDS/assets/icons/hasura-3.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.04272 3.01211C6.48206 2.0875 8.19783 1.54417 10.0375 1.54417H10.2472C12.0869 1.54417 13.8027 2.07797 15.242 3.01211C15.69 3.29807 16.281 3.20275 16.6051 2.79287L17.7871 0.953183C17.8824 0.819734 18.0254 0.724414 18.1874 0.714882C18.3495 0.70535 18.5115 0.772074 18.6068 0.905523C19.56 2.2972 19.8269 5.45231 19.3027 7.07276C19.112 7.64469 19.0644 8.2452 19.1692 8.82666C19.2836 9.40812 19.3885 10.104 19.3885 10.5901C19.3885 15.5944 15.2992 19.6455 10.2472 19.6455H10.0375C4.98552 19.6455 0.896274 15.5944 0.896274 10.5901C0.896274 10.104 1.01066 9.40812 1.11551 8.82666C1.22036 8.2452 1.16317 7.64469 0.982062 7.07276C0.457799 5.45231 0.734229 2.2972 1.6779 0.905523C1.76369 0.762542 1.93527 0.70535 2.09731 0.714882C2.25936 0.733946 2.41187 0.819734 2.49766 0.953183L3.67963 2.79287C4.01326 3.20275 4.59471 3.29807 5.04272 3.01211ZM8.42756 14.1768C8.87263 14.3733 9.38163 14.4716 9.95455 14.4716C10.5488 14.4716 11.0732 14.3781 11.5277 14.1911C11.9846 14.004 12.3409 13.746 12.5966 13.4169C12.8546 13.0878 12.9825 12.7102 12.9801 12.2841C12.9848 11.839 12.8393 11.4697 12.5433 11.1761C12.2474 10.8802 11.8059 10.7003 11.2188 10.6364V10.5795C11.652 10.5322 12.0095 10.3783 12.2912 10.1179C12.5753 9.85748 12.715 9.52367 12.7102 9.11648C12.7126 8.70691 12.5966 8.34351 12.3622 8.02628C12.1302 7.70668 11.8071 7.45573 11.3928 7.27344C10.9808 7.09115 10.5062 7 9.96875 7C9.41951 7 8.933 7.09706 8.50923 7.29119C8.08546 7.48532 7.75166 7.75284 7.50781 8.09375C7.26634 8.43466 7.14441 8.82765 7.14205 9.27273H9.03125C9.03362 9.12595 9.07505 8.99574 9.15554 8.8821C9.23603 8.76847 9.34612 8.67969 9.4858 8.61577C9.62784 8.55185 9.78883 8.51989 9.96875 8.51989C10.1345 8.51989 10.2801 8.55066 10.4055 8.61222C10.5334 8.67377 10.6328 8.759 10.7038 8.8679C10.7749 8.9768 10.8092 9.10227 10.8068 9.24432C10.8092 9.3911 10.7678 9.52131 10.6825 9.63494C10.5997 9.74858 10.4825 9.83736 10.331 9.90128C10.1818 9.9652 10.009 9.99716 9.8125 9.99716H9.07386V11.3608H9.8125C10.0256 11.3608 10.2138 11.3928 10.3771 11.4567C10.5405 11.5206 10.6671 11.6094 10.7571 11.723C10.8494 11.8366 10.8944 11.9669 10.892 12.1136C10.8944 12.2628 10.8565 12.3954 10.7784 12.5114C10.7003 12.6274 10.5914 12.7185 10.4517 12.7848C10.312 12.8487 10.151 12.8807 9.96875 12.8807C9.77936 12.8807 9.61127 12.8499 9.46449 12.7884C9.31771 12.7268 9.2017 12.6416 9.11648 12.5327C9.03362 12.4214 8.991 12.2959 8.98864 12.1562H7C7.00237 12.6084 7.13021 13.0085 7.38352 13.3565C7.63684 13.7045 7.98485 13.978 8.42756 14.1768Z" fill="#80A3FF"/>
+</svg>

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

@@ -1,23 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '../../foundation/Typography'
-import { Icon } from '../common-components/Icon';
+import {Typography} from '../../foundation/Typography'
 
 export default function HasConAvatar({ name, designation, size, imageUrl }) {
     const hasImageUrl = imageUrl && imageUrl.length > 0;
     return (
-        <div className={`${size} group flex-shrink-0 rounded-2xl flex items-center justify-between bg-neutral-0 tb:inline-flex tb:flex-col shadow hover:shadow-xl tb:min-w-[18rem]`}>
+        <div className={`shadow group rounded-2xl tb:rounded-3xl flex flex-col-reverse mb-m:flex-row mb-m:flex mb-m:items-center mb-m:justify-between bg-neutral-0 tb:inline-flex tb:flex-col tb:max-w-[289px]  tb:min-w-[18rem]`}>
 
-            <div className="mx-5 tb:flex-col tb:flex tb:items-center tb:p-8 tb:ml-0 bg-neutral-0">
-                <Typography textStyle='body1c-bold' className='text-blue-400'>{name}</Typography>
-                <Typography textStyle='body3c-medium' className='text-blue-800'>{designation}</Typography>
+            <div className="px-6 pb-6 pt-3 mb-m:px-5 mb-m:py-[30px] tb:p-0 text-left tb:flex-col mb-m: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 capitalize tb:uppercase'>{designation}</div>
             </div>
-            <div className='relative '>
+            <div className='relative pt-6 mb-m:pt-0 pl-6 mb-m:pl-0 mb-m:self-center'>
                 <img
-                    className={`inline-block w-[9rem] tb:min-w-[18rem] tb:rounded-2xl border-neutral-0 rounded-r-2xl `}
+                    className={`inline-block max-[399px]:bg-blue-300  rounded-r-xl max-[399px]:rounded-full  w-[60px] mb-m:min-w-[144px] mb-m:w-[9rem] tb:min-w-[18rem] tb:rounded-3xl border-neutral-0`}
                     src={imageUrl}
                 />
-                 <div className="absolute rounded-b-2xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div>
+                 {/* <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> */}
             </div>
 
 
@@ -33,5 +32,5 @@ HasConAvatar.propTypes = {
 HasConAvatar.defaultProps = {
     name: 'Names',
     designation: 'Product Marketing, Hasura',
-    imageUrl: `https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80`
+    imageUrl: ``
 };

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

@@ -1,44 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../common-components/Icon';
+import { Typography } from '../../foundation/Typography';
+import { HDSColor } from '../../foundation/ColorPalette';
 const imgSizes = {
     'xs': 'h-8 w-8',
     'sm': 'h-10 w-10',
-    'md': 'h-12 w-12',
+    'md': 'h-12 w-12 min-w-[48px]',
     'lg': 'h-[60px] w-[60px]',
 }
 const AvatarVariant = {
-    'circular': 'shadow rounded-full border-[1.5px] border-neutral-0',
+    'circular': 'shadow rounded-full ',
     'square': 'rounded-lg',
 }
 
-
-const nameTextStyle = {
-    'xs': 'text-d-body1c-bold',
-    'sm': 'text-d-body1c-bold',
-    'md': 'text-d-body1c-bold',
-    'lg': 'text-d-body1c-bold'
-}
-
-const desgnTextStyle = {
-    'xs': 'text-hds-d-body3c ',
-    'sm': 'text-hds-d-body3c ',
-    'md': 'text-hds-d-body3c ',
-    'lg': 'text-hds-d-body3c '
-}
-
-export default function ProfileAvatar({ name, designation, size, imageUrl, avatarVariant }) {
+export default function ProfileAvatar({avatarBgColor, name, designation, size, imageUrl, avatarVariant }) {
     const imgSizeClass = imgSizes[size] || imgSizes.md;
     const avatarVariantClass = AvatarVariant[avatarVariant] || AvatarVariant.circular;
     const defaultAvatarIcon = "user03";
     const hasImageUrl = imageUrl && imageUrl.length > 0;
+
     return (
         <div className="group block flex-shrink-0">
             <div className="flex items-center">
                 <div>
                     {hasImageUrl ? (
                         <img
-                            className={`${imgSizeClass} ${avatarVariantClass} rounded inline-block`}
+                            className={`${imgSizeClass} ${avatarVariantClass} ${HDSColor(avatarBgColor)} rounded inline-block`}
                             src={imageUrl}
                         />
                     ) : (
@@ -50,15 +38,8 @@ export default function ProfileAvatar({ name, designation, size, imageUrl, avata
                     )}
                 </div>
                 <div className="ml-3">
-                    <p
-                        className={`${nameTextStyle[`${size}`]}text-neutral-900 group-hover:text-gray-900`}
-                    >
-                        {name}
-                    </p>
-                    <p
-                        className={`${desgnTextStyle[`${size}`]}  text-neutral-500 group-hover:text-gray-700`}>
-                        {designation}
-                    </p>
+                        <Typography textStyle='body2c-bold' className={` text-neutral-800`}>{name}</Typography>
+                        <Typography textStyle='body3c' className={` text-neutral-500`}>{designation}</Typography>
                 </div>
             </div>
         </div>
@@ -73,5 +54,5 @@ ProfileAvatar.propTypes = {
 ProfileAvatar.defaultProps = {
     name: 'Names',
     designation: 'Product Marketing, Hasura',
-    imageUrl: `https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80`
+    imageUrl: ``
 };

package/src/HDS/components/BadgesCaption/badges.js

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../common-components/Icon';
 import {Typography} from '../../foundation/Typography'
+import { HDSColor } from '../../foundation/ColorPalette';
 const sizeClasses = {
   sm: 'py-0.5 px-2 hds-d-body3c',
   default: 'py-1 px-3',
@@ -27,8 +28,10 @@ const colorVariants = {
 export default function Badge({
   leftIconVariant,
   leftIconColor,
+  leftIconColorClass,
   rightIconVariant,
   rightIconColor,
+  rightIconColorClass,
   size,
   children,
   color,
@@ -44,7 +47,7 @@ export default function Badge({
 
   return (
     <button
-      className={`${sizeClasses[size]} ${
+      className={` cursor-default ${sizeClasses[size]} ${
         colorVariants[color]
       } inline-flex items-center rounded-full`}
       onClick={handleClick}
@@ -52,14 +55,14 @@ export default function Badge({
     >
        {leftIconVariant && leftIconVariant !== 'none' && (
           <div className='mr-1'>
-            <Icon height={'h-4 w-4'} variant={leftIconVariant} strokeColor={leftIconColor} />
+            <Icon height={'h-4 w-4 stroke-[1.5px]'} variant={leftIconVariant} strokeColor={leftIconColor} strokeClass={HDSColor(leftIconColorClass)} />
           </div>
         )}
-        <Typography textStyle='h6'>{children}</Typography>
+        <Typography textStyle='body3c'>{children}</Typography>
 
         {rightIconVariant && rightIconVariant !== 'none' && (
           <div className='ml-1'>
-            <Icon height={'h-4'} variant={rightIconVariant} strokeColor={rightIconColor} />
+            <Icon height={'h-4 w-4 stroke-[1.5px]'} variant={rightIconVariant} strokeColor={rightIconColor} rightIconColorClass={HDSColor(rightIconColorClass)} />
           </div>
         )}
     </button>

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

@@ -13,7 +13,7 @@ const ANIMATED_ARR_CLASSES = {
     'md': 'h-5 w-5 -mt-5',
     'lg': 'h-6 w-6 -mt-6'
   },
-
+ 
 }
 
 const Buttonclasses = {
@@ -22,13 +22,13 @@ const Buttonclasses = {
       'base': 'db:w-fit tb:w-fit w-full justify-center justify-center bg-blue-500 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',
+      'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-200 text-blue-600',
       '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-100 focus:text-blue-600 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none',
     },
@@ -36,14 +36,25 @@ const Buttonclasses = {
   },
   'secondary': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-neutral-0 text-blue-500',
-
-      'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:delay-100 hover:duration-300',
+      'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-blue-500 text-blue-500',
 
+      'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
+      
       'focus': 'focus:bg-blue-200 focus:text-blue-500 focus:border-2 border-blue-500 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-500',
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
   },
+  'secondaryWhite': {
+    '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',
+      
+      'focus': 'focus:text-neutrak-0 focus:border-2 border-neutral-0 focus:outline-none focus:text-neutral-0',
+    },
+    'disabled': 'bg-neutral-200 text-neutral-400',
+  },
+  
   'ghost': {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full  justify-center text-blue-600',
@@ -54,7 +65,7 @@ const Buttonclasses = {
   },
   'primaryLink': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full justify-center text-blue-500',
+      'base': 'db:w-fit tb:w-fit w-full justify-center ',
       'hover': 'hover:text-neutral-0',
       'focus': 'focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-600',
     },
@@ -62,8 +73,8 @@ const Buttonclasses = {
   },
   'secondaryLink': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full  justify-center text-neutral-800',
-      'hover': 'hover:text-neutral-900 ',
+      'base': 'db:w-fit tb:w-fit w-full  justify-center ',
+      'hover': '',
       'focus': 'focus:text-neutral-900 focus:outline-none focus:shadow-[0px_0px_0px_4px_#E5E7EB]',
     },
     'disabled': 'text-neutral-300',
@@ -160,10 +171,10 @@ export default function Button(props) {
             <Icon variant={leftIconVariant} strokeColor={leftIconColor} />
           </div>
         )}
-
+        
          {leftIconVariant && leftIconVariant !== 'none' && type=='iconOnly' && (
-          <div className={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} `}>
-            <Icon variant={leftIconVariant} height='group-active:stroke-neutral-0 group-hover:transition-all group-hover:ease-in-out group-hover:duration-100 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0' strokeColor={leftIconColor} />
+          <div className={``}>
+            <Icon variant={leftIconVariant} height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} group-active:stroke-neutral-0 stroke-[1.5px] group-hover:transition-all group-hover:ease-in-out group-hover:duration-100 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0`} strokeColor={leftIconColor} />
           </div>
         )}
         {label}
@@ -195,7 +206,7 @@ Button.propTypes = {
   leftIconVariant: PropTypes.string,
   rightIconVariant: PropTypes.string,
   animatedHoverStroke: PropTypes.string
-
+  
 
 };
 
@@ -212,5 +223,5 @@ Button.defaultProps = {
   rightAnimatedArrow: 'True' ,
   rightAnimatedArrowColor: '#FFFFFF',
   animatedHoverStroke: 'group-hover:stroke-neutral-0',
-
+  
 };

package/src/HDS/components/Cards/Dropdown/v3Dropdown.js

@@ -5,7 +5,7 @@ import { FlyoutB, FlyoutA } from '../Menu'
 
 export default function DropdownA(props) {
     return (
-        <div className='flex flex-col tb:flex-row gap-2'>
+        <div className='flex mx-auto w-screen flex-col tb:flex-row gap-2'>
             <div className='  bg-neutral-0 rounded-2xl tb:min-w-[28.063rem]'>
                 <FlyoutB
                    {...props.primaryCard}

package/src/HDS/components/Cards/Feedback/feedback.js

@@ -8,7 +8,7 @@ export default function FeedbackCard(props) {
   return (
     <div className='bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10'>
       <div className='pb-8'>
-        <img src={props.brandImgUrl} alt={props.brandImgAlt} />
+        <img src={props.brandImgUrl} alt={props.brandImgAlt} className=' h-8 '/>
       </div>
       <div className="pb-10">
         <Typography textStyle="quote" className='text-neutral-1000'>{props.description}</Typography>

package/src/HDS/components/Cards/ImageBox/imagebox.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { HDSButton } from "../../Buttons";
+import { Typography } from "../../../foundation/Typography";
+import { HDSColor } from "../../../foundation/ColorPalette";
+
+export default function ImageBox(props) {
+    const {
+        btnbutton,
+        title,
+        description,
+        className,
+        imgUrl,
+        imgAlt,
+        titleTextColor = 'text-neutral-1000',
+        imageClasses,
+        btn,
+    } = props;
+    return (
+        <div className={className}>
+            {imgUrl &&
+            <div>
+                <img src={imgUrl} alt={imgAlt} className={imageClasses} />
+                </div>}
+            {title && (
+                <Typography textStyle='h3' className={HDSColor(titleTextColor)}>{title}</Typography>
+            )
+            }
+            {description && (
+                <Typography textStyle='body1'>{description}</Typography>
+            )
+
+            }
+            {btn.btnLabel && (
+                <a href={btn.cta_link}>
+                    <HDSButton
+                        label={btn.cta_text}
+                        type={btn.cta_type}
+                        leftIconVariant='none'
+                        rightIconVariant='none'
+                        state='default'
+                        size='md'
+                        rightAnimatedArrow={true}
+                        rightAnimatedArrowColor='#3970FD'
+                    />
+                </a>
+            )
+
+            }
+        </div>
+    )
+}

package/src/HDS/components/Cards/ImageBox/index.js

@@ -0,0 +1 @@
+export {default as ImageBox} from './imagebox'

package/src/HDS/components/Cards/Link/link.js

@@ -6,24 +6,22 @@ import { Typography } from '../../../foundation/Typography'
 
 
 export default function LinkCard(props) {
-    const iconStrokeColor = HDSColor(props.iconStrokeColor);
-    const cardBgColorClass = HDSColor(props.cardBgColor)
-    const cardHoverClasses = `hover:${HDSColor(props.cardHoverBg)}` + ' hover:shadow-xl';
     return (
         <>
             <a
                 href={props.linkUrl}
-                className={`${cardHoverClasses} ${cardBgColorClass} min-w-[15rem] rounded-2xl border border-neutral-150 p-6 block`}
+                className={`rounded-2xl p-6 h-full block`}
             >
                 {props.brandImageUrl ?
                     (
                         <div className="flex flex-col">
-                            <div className="flex justify-end items-end pr-6">
+                            <div className="flex justify-end items-end">
                                 {props.iconArrowVariant &&
                                     (<Icon
                                         height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
                                         variant={props.iconArrowVariant}
                                         strokeColor={props.iconArrowStrokeColor}
+                                        strokeClass={HDSColor(props.iconArrowStrokeClass)}
                                     />)
                                 }
                             </div>
@@ -35,17 +33,18 @@ export default function LinkCard(props) {
                     (
                         <>
                             <div className='flex items-center'>
-                                <div className='flex items-center flex-1'>
+                                <div className='flex items-center flex-1 pb-2'>
                                     {props.iconVariant &&
                                         (<Icon
                                             height={'w-6 h-6 mr-2 stroke-[1.5px] '}
                                             variant={props.iconVariant}
-                                            strokeColor={iconStrokeColor}
+                                            strokeColor={props.iconStrokeColor}
+                                            strokeClass={HDSColor(props.iconStrokeClass)}
                                         />)}
                                     <Typography
                                         as="h5"
                                         textStyle="body1c-bold"
-                                        className="text-neutral-1000">
+                                        className={HDSColor(props.titleTextColor)}>
                                         {props.title}
                                     </Typography>
                                 </div>
@@ -54,15 +53,22 @@ export default function LinkCard(props) {
                                         height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
                                         variant={props.iconArrowVariant}
                                         strokeColor={props.iconArrowStrokeColor}
+                                        strokeClass={HDSColor(props.iconArrowStrokeClass)}
                                     />)
                                 }
                             </div>
                             {props.description &&
-                                (<Typography
+                                (
+                                    <div>
+                                        
+                                <Typography
                                     textStyle="body3"
-                                    className="text-neutral-1000 mt-2">
+                                    className={`${HDSColor(props.descTextColor)} mt-2`}>
                                     {props.description}
-                                </Typography>)}
+                                </Typography>
+                                        </div>
+                                
+                                )}
                         </>
                     )
                 }
@@ -72,11 +78,11 @@ export default function LinkCard(props) {
 }
 
 LinkCard.defaultProps = {
+    descTextColor:'',
+    titleTextColor:'',
     brandImageUrl: '',
     brandImageAlt:'',
     linkUrl: '#',
-    cardBgColor: 'bg-neutral-0',
-    cardHoverBg: 'bg-neutral-0',
     iconVariant: 'videorecorder',
     iconStrokeColor: 'blue-500',
     iconArrowVariant: 'arrownarrowupright',

package/src/HDS/components/Cards/Menu/flyout.js

@@ -1,7 +1,8 @@
-import { Fragment } from 'react'
-import { Popover, Transition } from '@headlessui/react'
-import { Icon } from '../../common-components/Icon'
-import { Typography } from '../../../foundation/Typography'
+import React from "react";;
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { Icon } from '../../common-components/Icon';
+import { Typography } from '../../../foundation/Typography';
 export default function flyout(props) {
   const {
     label,

package/src/HDS/components/Cards/Menu/flyoutA.js

@@ -1,7 +1,8 @@
-import { Fragment } from 'react'
-import { Popover, Transition } from '@headlessui/react'
-import { Icon } from '../../common-components/Icon'
-import { Typography } from '../../../foundation/Typography'
+import React from "react";
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { Icon } from '../../common-components/Icon';
+import { Typography } from '../../../foundation/Typography';
 export default function FlyoutA(props) {
   const {
     label,

package/src/HDS/components/Cards/Menu/flyoutFull.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { Fragment } from 'react'
 import { Popover, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'