hds-web 1.5.9 → 1.6.1

package/package.json

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

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

@@ -7,17 +7,17 @@ import { Typography } from '../../../foundation/Typography'
 
 export default function LinkCard(props) {
     const cardBgColorClass = HDSColor(props.cardBgColor)
-    const cardHoverClasses = `hover:${HDSColor(props.cardHoverBg)}` + ' hover:shadow-xl';
+    const cardHoverClasses = HDSColor(`hover:${props.cardHoverBg}`);
     return (
         <>
             <a
                 href={props.linkUrl}
-                className={`${cardHoverClasses} ${cardBgColorClass} rounded-2xl border border-neutral-150 p-6 block`}
+                className={`${cardHoverClasses} ${cardBgColorClass} hover:shadow-xl 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'}
@@ -35,7 +35,7 @@ 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] '}
@@ -60,11 +60,17 @@ export default function LinkCard(props) {
                                 }
                             </div>
                             {props.description &&
-                                (<Typography
+                                (
+                                    <div>
+                                        
+                                <Typography
                                     textStyle="body3"
                                     className={`${HDSColor(props.descTextColor)} mt-2`}>
                                     {props.description}
-                                </Typography>)}
+                                </Typography>
+                                        </div>
+                                
+                                )}
                         </>
                     )
                 }
@@ -74,10 +80,12 @@ export default function LinkCard(props) {
 }
 
 LinkCard.defaultProps = {
+    descTextColor:'',
+    titleTextColor:'',
     brandImageUrl: '',
     brandImageAlt:'',
     linkUrl: '#',
-    cardHoverBg: 'bg-neutral-0',
+    cardHoverBg: 'bg-pink-600',
     iconVariant: 'videorecorder',
     iconStrokeColor: 'blue-500',
     iconArrowVariant: 'arrownarrowupright',

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

@@ -10,27 +10,27 @@ const cardVariant = {
         'iconWidthStyle': 'h-20 w-20',
         'iconStyle': 'h-10 w-10',
         'titleTextStyle': 'h4',
-        'titleClasses': 'mb-1 text-blue-800',
+        'titleClasses': 'mb-1 text-blue-800 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
         'descTextStyle': 'body1c',
-        'descClasses': 'text-neutral-1000'
+        'descClasses': 'text-neutral-1000 text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
     },
     "withoutButton": {
         'cardStyle': 'p-6',
         'iconWidthStyle': 'h-12 w-12',
         'iconStyle': 'h-6 w-6',
         'titleTextStyle': 'h5',
-        'titleClasses': 'mb-1 text-blue-600',
+        'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
         'descTextStyle': 'body1',
-        'descClasses': 'text-neutral-1000'
+        'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
     },
     "sm": {
         'cardStyle': 'p-6',
         'iconWidthStyle': 'h-12 w-12',
         'iconStyle': 'h-6 w-6',
-        'titleTextStyle': 'body3c-bold',
-        'titleClasses': 'mb-1 text-neutral-800',
+        'titleTextStyle': 'body3c',
+        'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
         'descTextStyle': 'body3',
-        'descClasses': 'text-neutral-800'
+        'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
     }
 }
 
@@ -38,7 +38,7 @@ export default function IconCard(props) {
     const iconBG = HDSColor(props.iconBg);
     return (
         <div
-            className={`bg-neutral-0 grid rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
+            className={`bg-neutral-0 grid h-full rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
         >
             <div className=" self-start">
                 <div

package/src/HDS/components/Hero/h3.js

@@ -7,159 +7,168 @@ import { Tab } from '../../components/Tabs';
 import PropTypes from 'prop-types';
 import { LinkCard } from '../Cards/Link';
 
-
 const tabCard = (Content) => (
-    <>
-        <div className='tb:px-3'>
-            {Content.title &&
-                <Typography
-                    textStyle='h2'
-                    className={HDSColor(Content.titleTextColor)}>
-                    {Content.title}
-                </Typography>}
+  <>
+      <div className='tb:px-3'>
+          {Content.title &&
+              <Typography
+                  textStyle='h2'
+                  className={HDSColor(Content.titleTextColor)}>
+                  {Content.title}
+              </Typography>}
 
-            {Content.subTitle &&
-                <Typography
-                    textStyle='sub2'
-                    className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
-                    {Content.subTitle}
-                </Typography>}
-        </div>
-        {Content.btnLabel &&
-            <div className='flex pl-3 pt-6'>
-                <HDSButton
-                    label={Content.btnLabel}
-                    type='secondary'
-                    leftIconVariant='none'
-                    rightIconVariant='none'
-                    state='default'
-                    size='sm'
-                    rightAnimatedArrow={true}
-                    rightAnimatedArrowColor='#1E56E3'
-                    animatedHoverStroke='group-hover:stroke-blue-600'
-                    className='flex'
-                    btnTextColorClass='text-blue-600'
-                />
-            </div>
-        }
+          {Content.subTitle &&
+              <Typography
+                  textStyle='sub2'
+                  className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
+                  {Content.subTitle}
+              </Typography>}
+      </div>
+      {Content.btnLabel &&
+          <div className='flex pl-3 pt-6'>
+              <HDSButton
+                  label={Content.btnLabel}
+                  type='secondary'
+                  leftIconVariant='none'
+                  rightIconVariant='none'
+                  state='default'
+                  size='sm'
+                  rightAnimatedArrow={true}
+                  rightAnimatedArrowColor='#1E56E3'
+                  animatedHoverStroke='group-hover:stroke-blue-600'
+                  className='flex'
+                  btnTextColorClass='text-blue-600'
+              />
+          </div>
+      }
 
-    </>
+  </>
 )
 
 export default function HeroCapability(props) {
+ const {
+  heroData, 
+  activeTab, 
+  onTabChange
+ } = props;
+ let currentTab;
+ if(activeTab.activeTab){
+  currentTab = activeTab.activeTab;
+ }
+ if (!heroData) {
+  return <div></div>; // Replace with your loading indicator or fallback UI
+}
 
-    const LinkCardsFn = (heroData) => {
-        return (
-          heroData.linkCards && (
-            <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
-              {heroData.linkCards.map((card, index) => (
-                <div key={index} className="w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]">
-                  <LinkCard
-                    titleTextColor= {card.titleTextColor}
-                    descTextColor={card.descTextColor}
-                    linkUrl={card.linkUrl}
-                    cardBgColor={card.cardBgColor}
-                    cardHoverBg={card.cardHoverBg}
-                    iconVariant={card.iconVariant}
-                    iconStrokeColor={card.iconStrokeColor}
-                    iconArrowVariant={card.iconArrowVariant}
-                    iconArrowStrokeColor={card.iconArrowStrokeColor}
-                    title={card.title}
-                    description={card.description}
-                  />
-                </div>
-              ))}
-            </div>
-          )
-        );
-      };
-
-
-    const [activeTab, setActiveTab] = useState('');
+  const LinkCardsFn = (heroData) => {
+      return (
+        heroData.linkCards && (
+          <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row  ">
+            {heroData.linkCards.map((card, index) => (
+              <div key={index} className={`${HDSColor(card.cardBorderClass)} border rounded-2xl w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]`}>
+                <LinkCard
+                  titleTextColor= {card.titleTextColor}
+                  descTextColor={card.descTextColor}
+                  linkUrl={card.linkUrl}
+                  cardBgColor={card.cardBgColor}
+                  cardHoverBg={card.cardHoverBg}
+                  iconVariant={card.iconVariant}
+                  iconStrokeClass={card.iconStrokeColor}
+                  iconArrowVariant={card.iconArrowVariant}
+                  iconArrowStrokeClass={card.iconArrowStrokeColor}
+                  title={card.title}
+                  description={card.description}
+                />
+              </div>
+            ))}
+          </div>
+        )
+      );
+    };
 
-    useEffect(() => {
-        if (props.heroData.tabContent) {
-            const tabNames = Object.keys(props.heroData.tabContent);
-            setActiveTab(tabNames[0]);
-        }
-    }, [props.heroData.tabContent]);
 
-    const handleTabClick = (tab) => {
-        if (tab.name) {
-            setActiveTab(tab.name);
+  const handleTabClick = (tab) => {
+      if (tab.name) {
+          const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
+          onTabChange(nameCheck);
         }
-        else return;
-        // Perform any other actions based on the clicked tab
-    }
-    let heroBgColorClass = '';
-    let bgTabClass = '';
-    let videoUrl = '';
-    let videoPoster = '';
-    let img_url = '';
-    let pillColorClass= '';
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['heroBgColor']){
-        heroBgColorClass = HDSColor(props.heroData.tabContent[activeTab]['heroBgColor'])
-    }
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bgColorTab']){
-        bgTabClass = HDSColor(props.heroData.tabContent[activeTab]['bgColorTab'])
-    }
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoUrl']){
-        videoUrl = props.heroData.tabContent[activeTab]['videoUrl']
-    }
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoPoster']){
-        videoPoster = props.heroData.tabContent[activeTab]['videoPoster']
-    }
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['img_url']){
-        img_url = props.heroData.tabContent[activeTab]['img_url']
-    }
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['pillColor']){
-        pillColorClass = props.heroData.tabContent[activeTab]['pillColor']
-    }
+      else return;
+      // Perform any other actions based on the clicked tab
+  }
+  let heroBgColorClass = '';
+  let bgTabClass = '';
+  let videoUrl = '';
+  let videoPoster = '';
+  let img_url = '';
+  let pillColorClass= '';
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']){
+      heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
+      bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']){
+      videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']){
+      videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']){
+      img_url = props.heroData.tabContent[currentTab]['img_url']
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']){
+      pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
+      bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
+  }
 
-    return (
-        <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl`} >
-    {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
-            {props.heroData.navTabs &&
+  return (
+      <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
+  {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
+          {props.heroData.navTabs &&
 
-                <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
+              <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
 
-                    <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
-                        <div className={`${bgTabClass} p-1 rounded-[32px]`}>
-                            <Tab
-                                onTabClick={handleTabClick}
-                                tabs={props.heroData.navTabs}
-                                bgColorTab={props.heroData.bgColorTab}
-                                pillColor={pillColorClass}
-                            />
-                        </div>
-                    </div>
-                    <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
-                        <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
-                            {props.heroData.tabContent &&
-                                props.heroData.tabContent[activeTab] &&
-                                tabCard(props.heroData.tabContent[activeTab])}
-                        </div>
-                        <div className=' db:max-w-[540px] tb:w-1/2 '>
-                            <MediaBox
-                                video_url = {videoUrl}
-                                video_poster = {videoPoster}
-                               
-                            />
-                        </div>
-                    </div>
+                  <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
+                      <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
+                          <Tab
+                              onTabClick={handleTabClick}
+                              tabs={props.heroData.navTabs}
+                              bgColorTab={props.heroData.bgColorTab}
+                              pillColor={pillColorClass}
+                          />
+                      </div>
+                  </div>
+                  <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
+                      <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
+                          {props.heroData.tabContent &&
+                              props.heroData.tabContent[currentTab] &&
+                              tabCard(props.heroData.tabContent[currentTab])}
+                      </div>
+                      <div className=' db:max-w-[540px] tb:w-1/2 '>
+                          <MediaBox
+                              video_url = {videoUrl}
+                              video_poster = {videoPoster}
+                             
+                          />
+                      </div>
+                  </div>
 
-                    <div>
-                        {props.heroData.tabContent[activeTab] &&
-                            LinkCardsFn(props.heroData.tabContent[activeTab])}
-                     </div>   
-                </div>
+                  <div className=''>
+                      {props.heroData.tabContent[currentTab] &&
+                          LinkCardsFn(props.heroData.tabContent[currentTab])}
+                   </div>   
+              </div>
 
-            }
+          }
 
-        </div>
-    )
+      </div>
+  )
 }
 
+
+
+
 HeroCapability.defaultProps={
  heroData :  {
         tabContent: {
@@ -211,7 +220,7 @@ HeroCapability.defaultProps={
                 iconArrowVariant: 'arrownarrowupright',
                 iconArrowStrokeColor: 'blue-400',
                 title: 'Webinar',
-                description: 'Model Level Authorization System for GraphQL with Hasura',
+                description: 'GraphQL response caching',
         
         
               },

package/src/HDS/foundation/ColorPalette/color.js

@@ -574,7 +574,103 @@ const HDSColors = {
     "stroke-red-500": "stroke-red-500",
     "stroke-red-600": "stroke-red-600",
     "stroke-red-700": "stroke-red-700",
-    "stroke-red-800": "stroke-red-800"
+    "stroke-red-800": "stroke-red-800",
+    "hover:bg-storybook-default-heading": "hover:bg-storybook-default-heading",
+    "hover:bg-base-0": "hover:bg-base-0",
+    "hover:bg-base-1000": "hover:bg-base-1000",
+    "hover:bg-neutral-0": "hover:bg-neutral-0",
+    "hover:bg-neutral-50": "hover:bg-neutral-50",
+    "hover:bg-neutral-100": "hover:bg-neutral-100",
+    "hover:bg-neutral-150": "hover:bg-neutral-150",
+    "hover:bg-neutral-200": "hover:bg-neutral-200",
+    "hover:bg-neutral-300": "hover:bg-neutral-300",
+    "hover:bg-neutral-400": "hover:bg-neutral-400",
+    "hover:bg-neutral-500": "hover:bg-neutral-500",
+    "hover:bg-neutral-600": "hover:bg-neutral-600",
+    "hover:bg-neutral-700": "hover:bg-neutral-700",
+    "hover:bg-neutral-800": "hover:bg-neutral-800",
+    "hover:bg-neutral-850": "hover:bg-neutral-850",
+    "hover:bg-neutral-900": "hover:bg-neutral-900",
+    "hover:bg-neutral-950": "hover:bg-neutral-950",
+    "hover:bg-neutral-1000": "hover:bg-neutral-1000",
+    "hover:bg-blue-100": "hover:bg-blue-100",
+    "hover:bg-blue-200": "hover:bg-blue-200",
+    "hover:bg-blue-300": "hover:bg-blue-300",
+    "hover:bg-blue-400": "hover:bg-blue-400",
+    "hover:bg-blue-500": "hover:bg-blue-500",
+    "hover:bg-blue-600": "hover:bg-blue-600",
+    "hover:bg-blue-700": "hover:bg-blue-700",
+    "hover:bg-blue-800": "hover:bg-blue-800",
+    "hover:bg-blue-900": "hover:bg-blue-900",
+    "hover:bg-purple-100": "hover:bg-purple-100",
+    "hover:bg-purple-200": "hover:bg-purple-200",
+    "hover:bg-purple-300": "hover:bg-purple-300",
+    "hover:bg-purple-400": "hover:bg-purple-400",
+    "hover:bg-purple-500": "hover:bg-purple-500",
+    "hover:bg-purple-600": "hover:bg-purple-600",
+    "hover:bg-purple-700": "hover:bg-purple-700",
+    "hover:bg-purple-800": "hover:bg-purple-800",
+    "hover:bg-purple-900": "hover:bg-purple-900",
+    "hover:bg-cyan-100": "hover:bg-cyan-100",
+    "hover:bg-cyan-200": "hover:bg-cyan-200",
+    "hover:bg-cyan-300": "hover:bg-cyan-300",
+    "hover:bg-cyan-400": "hover:bg-cyan-400",
+    "hover:bg-cyan-500": "hover:bg-cyan-500",
+    "hover:bg-cyan-600": "hover:bg-cyan-600",
+    "hover:bg-cyan-700": "hover:bg-cyan-700",
+    "hover:bg-cyan-800": "hover:bg-cyan-800",
+    "hover:bg-cyan-900": "hover:bg-cyan-900",
+    "hover:bg-green-100": "hover:bg-green-100",
+    "hover:bg-green-200": "hover:bg-green-200",
+    "hover:bg-green-300": "hover:bg-green-300",
+    "hover:bg-green-400": "hover:bg-green-400",
+    "hover:bg-green-500": "hover:bg-green-500",
+    "hover:bg-green-600": "hover:bg-green-600",
+    "hover:bg-green-700": "hover:bg-green-700",
+    "hover:bg-green-800": "hover:bg-green-800",
+    "hover:bg-green-900": "hover:bg-green-900",
+    "hover:bg-pink-100": "hover:bg-pink-100",
+    "hover:bg-pink-200": "hover:bg-pink-200",
+    "hover:bg-pink-300": "hover:bg-pink-300",
+    "hover:bg-pink-400": "hover:bg-pink-400",
+    "hover:bg-pink-500": "hover:bg-pink-500",
+    "hover:bg-pink-600": "hover:bg-pink-600",
+    "hover:bg-pink-700": "hover:bg-pink-700",
+    "hover:bg-pink-800": "hover:bg-pink-800",
+    "hover:bg-pink-900": "hover:bg-pink-900",
+    "hover:bg-amber-100": "hover:bg-amber-100",
+    "hover:bg-amber-200": "hover:bg-amber-200",
+    "hover:bg-amber-300": "hover:bg-amber-300",
+    "hover:bg-amber-400": "hover:bg-amber-400",
+    "hover:bg-amber-500": "hover:bg-amber-500",
+    "hover:bg-amber-600": "hover:bg-amber-600",
+    "hover:bg-amber-700": "hover:bg-amber-700",
+    "hover:bg-amber-800": "hover:bg-amber-800",
+    "hover:bg-amber-900": "hover:bg-amber-900",
+    "hover:bg-yellow-100": "hover:bg-yellow-100",
+    "hover:bg-yellow-200": "hover:bg-yellow-200",
+    "hover:bg-yellow-300": "hover:bg-yellow-300",
+    "hover:bg-yellow-400": "hover:bg-yellow-400",
+    "hover:bg-yellow-500": "hover:bg-yellow-500",
+    "hover:bg-yellow-600": "hover:bg-yellow-600",
+    "hover:bg-yellow-700": "hover:bg-yellow-700",
+    "hover:bg-yellow-800": "hover:bg-yellow-800",
+    "hover:bg-orange-100": "hover:bg-orange-100",
+    "hover:bg-orange-200": "hover:bg-orange-200",
+    "hover:bg-orange-300": "hover:bg-orange-300",
+    "hover:bg-orange-400": "hover:bg-orange-400",
+    "hover:bg-orange-500": "hover:bg-orange-500",
+    "hover:bg-orange-600": "hover:bg-orange-600",
+    "hover:bg-orange-700": "hover:bg-orange-700",
+    "hover:bg-orange-800": "hover:bg-orange-800",
+    "hover:bg-red-100": "hover:bg-red-100",
+    "hover:bg-red-200": "hover:bg-red-200",
+    "hover:bg-red-300": "hover:bg-red-300",
+    "hover:bg-red-400": "hover:bg-red-400",
+    "hover:bg-red-500": "hover:bg-red-500",
+    "hover:bg-red-600": "hover:bg-red-600",
+    "hover:bg-red-700": "hover:bg-red-700",
+    "hover:bg-red-800": "hover:bg-red-800",
 };
 
 export default function HDSColor(color = '') {