hds-web 1.5.9 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +6 -6
  4. package/dist/index.js +6 -6
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Link/link.js +15 -7
  7. package/src/HDS/components/Cards/Misc/iconCard.js +8 -8
  8. package/src/HDS/components/Hero/h3.js +145 -136
  9. package/src/HDS/foundation/ColorPalette/color.js +97 -1
  10. package/src/HDS/modules/TextCard/textCard.js +62 -28
  11. package/src/styles/tailwind.css +540 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.5.9",
3
+ "version": "1.6.1",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/Link/link.js CHANGED
@@ -7,17 +7,17 @@ import { Typography } from '../../../foundation/Typography'
7
7
 
8
8
  export default function LinkCard(props) {
9
9
  const cardBgColorClass = HDSColor(props.cardBgColor)
10
- const cardHoverClasses = `hover:${HDSColor(props.cardHoverBg)}` + ' hover:shadow-xl';
10
+ const cardHoverClasses = HDSColor(`hover:${props.cardHoverBg}`);
11
11
  return (
12
12
  <>
13
13
  <a
14
14
  href={props.linkUrl}
15
- className={`${cardHoverClasses} ${cardBgColorClass} rounded-2xl border border-neutral-150 p-6 block`}
15
+ className={`${cardHoverClasses} ${cardBgColorClass} hover:shadow-xl rounded-2xl p-6 h-full block`}
16
16
  >
17
17
  {props.brandImageUrl ?
18
18
  (
19
19
  <div className="flex flex-col">
20
- <div className="flex justify-end items-end pr-6">
20
+ <div className="flex justify-end items-end">
21
21
  {props.iconArrowVariant &&
22
22
  (<Icon
23
23
  height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
@@ -35,7 +35,7 @@ export default function LinkCard(props) {
35
35
  (
36
36
  <>
37
37
  <div className='flex items-center'>
38
- <div className='flex items-center flex-1'>
38
+ <div className='flex items-center flex-1 pb-2'>
39
39
  {props.iconVariant &&
40
40
  (<Icon
41
41
  height={'w-6 h-6 mr-2 stroke-[1.5px] '}
@@ -60,11 +60,17 @@ export default function LinkCard(props) {
60
60
  }
61
61
  </div>
62
62
  {props.description &&
63
- (<Typography
63
+ (
64
+ <div>
65
+
66
+ <Typography
64
67
  textStyle="body3"
65
68
  className={`${HDSColor(props.descTextColor)} mt-2`}>
66
69
  {props.description}
67
- </Typography>)}
70
+ </Typography>
71
+ </div>
72
+
73
+ )}
68
74
  </>
69
75
  )
70
76
  }
@@ -74,10 +80,12 @@ export default function LinkCard(props) {
74
80
  }
75
81
 
76
82
  LinkCard.defaultProps = {
83
+ descTextColor:'',
84
+ titleTextColor:'',
77
85
  brandImageUrl: '',
78
86
  brandImageAlt:'',
79
87
  linkUrl: '#',
80
- cardHoverBg: 'bg-neutral-0',
88
+ cardHoverBg: 'bg-pink-600',
81
89
  iconVariant: 'videorecorder',
82
90
  iconStrokeColor: 'blue-500',
83
91
  iconArrowVariant: 'arrownarrowupright',
package/src/HDS/components/Cards/Misc/iconCard.js CHANGED
@@ -10,27 +10,27 @@ const cardVariant = {
10
10
  'iconWidthStyle': 'h-20 w-20',
11
11
  'iconStyle': 'h-10 w-10',
12
12
  'titleTextStyle': 'h4',
13
- 'titleClasses': 'mb-1 text-blue-800',
13
+ 'titleClasses': 'mb-1 text-blue-800 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
14
14
  'descTextStyle': 'body1c',
15
- 'descClasses': 'text-neutral-1000'
15
+ 'descClasses': 'text-neutral-1000 text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
16
16
  },
17
17
  "withoutButton": {
18
18
  'cardStyle': 'p-6',
19
19
  'iconWidthStyle': 'h-12 w-12',
20
20
  'iconStyle': 'h-6 w-6',
21
21
  'titleTextStyle': 'h5',
22
- 'titleClasses': 'mb-1 text-blue-600',
22
+ 'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
23
23
  'descTextStyle': 'body1',
24
- 'descClasses': 'text-neutral-1000'
24
+ 'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
25
25
  },
26
26
  "sm": {
27
27
  'cardStyle': 'p-6',
28
28
  'iconWidthStyle': 'h-12 w-12',
29
29
  'iconStyle': 'h-6 w-6',
30
- 'titleTextStyle': 'body3c-bold',
31
- 'titleClasses': 'mb-1 text-neutral-800',
30
+ 'titleTextStyle': 'body3c',
31
+ 'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
32
32
  'descTextStyle': 'body3',
33
- 'descClasses': 'text-neutral-800'
33
+ 'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
34
34
  }
35
35
  }
36
36
 
@@ -38,7 +38,7 @@ export default function IconCard(props) {
38
38
  const iconBG = HDSColor(props.iconBg);
39
39
  return (
40
40
  <div
41
- className={`bg-neutral-0 grid rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
41
+ className={`bg-neutral-0 grid h-full rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
42
42
  >
43
43
  <div className=" self-start">
44
44
  <div
package/src/HDS/components/Hero/h3.js CHANGED
@@ -7,159 +7,168 @@ import { Tab } from '../../components/Tabs';
7
7
  import PropTypes from 'prop-types';
8
8
  import { LinkCard } from '../Cards/Link';
9
9
 
10
-
11
10
  const tabCard = (Content) => (
12
- <>
13
- <div className='tb:px-3'>
14
- {Content.title &&
15
- <Typography
16
- textStyle='h2'
17
- className={HDSColor(Content.titleTextColor)}>
18
- {Content.title}
19
- </Typography>}
11
+ <>
12
+ <div className='tb:px-3'>
13
+ {Content.title &&
14
+ <Typography
15
+ textStyle='h2'
16
+ className={HDSColor(Content.titleTextColor)}>
17
+ {Content.title}
18
+ </Typography>}
20
19
 
21
- {Content.subTitle &&
22
- <Typography
23
- textStyle='sub2'
24
- className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
25
- {Content.subTitle}
26
- </Typography>}
27
- </div>
28
- {Content.btnLabel &&
29
- <div className='flex pl-3 pt-6'>
30
- <HDSButton
31
- label={Content.btnLabel}
32
- type='secondary'
33
- leftIconVariant='none'
34
- rightIconVariant='none'
35
- state='default'
36
- size='sm'
37
- rightAnimatedArrow={true}
38
- rightAnimatedArrowColor='#1E56E3'
39
- animatedHoverStroke='group-hover:stroke-blue-600'
40
- className='flex'
41
- btnTextColorClass='text-blue-600'
42
- />
43
- </div>
44
- }
20
+ {Content.subTitle &&
21
+ <Typography
22
+ textStyle='sub2'
23
+ className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
24
+ {Content.subTitle}
25
+ </Typography>}
26
+ </div>
27
+ {Content.btnLabel &&
28
+ <div className='flex pl-3 pt-6'>
29
+ <HDSButton
30
+ label={Content.btnLabel}
31
+ type='secondary'
32
+ leftIconVariant='none'
33
+ rightIconVariant='none'
34
+ state='default'
35
+ size='sm'
36
+ rightAnimatedArrow={true}
37
+ rightAnimatedArrowColor='#1E56E3'
38
+ animatedHoverStroke='group-hover:stroke-blue-600'
39
+ className='flex'
40
+ btnTextColorClass='text-blue-600'
41
+ />
42
+ </div>
43
+ }
45
44
 
46
- </>
45
+ </>
47
46
  )
48
47
 
49
48
  export default function HeroCapability(props) {
49
+ const {
50
+ heroData,
51
+ activeTab,
52
+ onTabChange
53
+ } = props;
54
+ let currentTab;
55
+ if(activeTab.activeTab){
56
+ currentTab = activeTab.activeTab;
57
+ }
58
+ if (!heroData) {
59
+ return <div></div>; // Replace with your loading indicator or fallback UI
60
+ }
50
61
 
51
- const LinkCardsFn = (heroData) => {
52
- return (
53
- heroData.linkCards && (
54
- <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
55
- {heroData.linkCards.map((card, index) => (
56
- <div key={index} className="w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]">
57
- <LinkCard
58
- titleTextColor= {card.titleTextColor}
59
- descTextColor={card.descTextColor}
60
- linkUrl={card.linkUrl}
61
- cardBgColor={card.cardBgColor}
62
- cardHoverBg={card.cardHoverBg}
63
- iconVariant={card.iconVariant}
64
- iconStrokeColor={card.iconStrokeColor}
65
- iconArrowVariant={card.iconArrowVariant}
66
- iconArrowStrokeColor={card.iconArrowStrokeColor}
67
- title={card.title}
68
- description={card.description}
69
- />
70
- </div>
71
- ))}
72
- </div>
73
- )
74
- );
75
- };
76
-
77
-
78
- const [activeTab, setActiveTab] = useState('');
62
+ const LinkCardsFn = (heroData) => {
63
+ return (
64
+ heroData.linkCards && (
65
+ <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
66
+ {heroData.linkCards.map((card, index) => (
67
+ <div key={index} className={`${HDSColor(card.cardBorderClass)} border rounded-2xl w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]`}>
68
+ <LinkCard
69
+ titleTextColor= {card.titleTextColor}
70
+ descTextColor={card.descTextColor}
71
+ linkUrl={card.linkUrl}
72
+ cardBgColor={card.cardBgColor}
73
+ cardHoverBg={card.cardHoverBg}
74
+ iconVariant={card.iconVariant}
75
+ iconStrokeClass={card.iconStrokeColor}
76
+ iconArrowVariant={card.iconArrowVariant}
77
+ iconArrowStrokeClass={card.iconArrowStrokeColor}
78
+ title={card.title}
79
+ description={card.description}
80
+ />
81
+ </div>
82
+ ))}
83
+ </div>
84
+ )
85
+ );
86
+ };
79
87
 
80
- useEffect(() => {
81
- if (props.heroData.tabContent) {
82
- const tabNames = Object.keys(props.heroData.tabContent);
83
- setActiveTab(tabNames[0]);
84
- }
85
- }, [props.heroData.tabContent]);
86
88
 
87
- const handleTabClick = (tab) => {
88
- if (tab.name) {
89
- setActiveTab(tab.name);
89
+ const handleTabClick = (tab) => {
90
+ if (tab.name) {
91
+ const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
92
+ onTabChange(nameCheck);
90
93
  }
91
- else return;
92
- // Perform any other actions based on the clicked tab
93
- }
94
- let heroBgColorClass = '';
95
- let bgTabClass = '';
96
- let videoUrl = '';
97
- let videoPoster = '';
98
- let img_url = '';
99
- let pillColorClass= '';
100
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['heroBgColor']){
101
- heroBgColorClass = HDSColor(props.heroData.tabContent[activeTab]['heroBgColor'])
102
- }
103
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bgColorTab']){
104
- bgTabClass = HDSColor(props.heroData.tabContent[activeTab]['bgColorTab'])
105
- }
106
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoUrl']){
107
- videoUrl = props.heroData.tabContent[activeTab]['videoUrl']
108
- }
109
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoPoster']){
110
- videoPoster = props.heroData.tabContent[activeTab]['videoPoster']
111
- }
112
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['img_url']){
113
- img_url = props.heroData.tabContent[activeTab]['img_url']
114
- }
115
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['pillColor']){
116
- pillColorClass = props.heroData.tabContent[activeTab]['pillColor']
117
- }
94
+ else return;
95
+ // Perform any other actions based on the clicked tab
96
+ }
97
+ let heroBgColorClass = '';
98
+ let bgTabClass = '';
99
+ let videoUrl = '';
100
+ let videoPoster = '';
101
+ let img_url = '';
102
+ let pillColorClass= '';
103
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']){
104
+ heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
105
+ }
106
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
107
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
108
+ }
109
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']){
110
+ videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
111
+ }
112
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']){
113
+ videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
114
+ }
115
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']){
116
+ img_url = props.heroData.tabContent[currentTab]['img_url']
117
+ }
118
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']){
119
+ pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
120
+ }
121
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
122
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
123
+ }
118
124
 
119
- return (
120
- <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl`} >
121
- {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
122
- {props.heroData.navTabs &&
125
+ return (
126
+ <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
127
+ {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
128
+ {props.heroData.navTabs &&
123
129
 
124
- <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
130
+ <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
125
131
 
126
- <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
127
- <div className={`${bgTabClass} p-1 rounded-[32px]`}>
128
- <Tab
129
- onTabClick={handleTabClick}
130
- tabs={props.heroData.navTabs}
131
- bgColorTab={props.heroData.bgColorTab}
132
- pillColor={pillColorClass}
133
- />
134
- </div>
135
- </div>
136
- <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'>
137
- <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
138
- {props.heroData.tabContent &&
139
- props.heroData.tabContent[activeTab] &&
140
- tabCard(props.heroData.tabContent[activeTab])}
141
- </div>
142
- <div className=' db:max-w-[540px] tb:w-1/2 '>
143
- <MediaBox
144
- video_url = {videoUrl}
145
- video_poster = {videoPoster}
146
-
147
- />
148
- </div>
149
- </div>
132
+ <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
133
+ <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
134
+ <Tab
135
+ onTabClick={handleTabClick}
136
+ tabs={props.heroData.navTabs}
137
+ bgColorTab={props.heroData.bgColorTab}
138
+ pillColor={pillColorClass}
139
+ />
140
+ </div>
141
+ </div>
142
+ <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'>
143
+ <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
144
+ {props.heroData.tabContent &&
145
+ props.heroData.tabContent[currentTab] &&
146
+ tabCard(props.heroData.tabContent[currentTab])}
147
+ </div>
148
+ <div className=' db:max-w-[540px] tb:w-1/2 '>
149
+ <MediaBox
150
+ video_url = {videoUrl}
151
+ video_poster = {videoPoster}
152
+
153
+ />
154
+ </div>
155
+ </div>
150
156
 
151
- <div>
152
- {props.heroData.tabContent[activeTab] &&
153
- LinkCardsFn(props.heroData.tabContent[activeTab])}
154
- </div>
155
- </div>
157
+ <div className=''>
158
+ {props.heroData.tabContent[currentTab] &&
159
+ LinkCardsFn(props.heroData.tabContent[currentTab])}
160
+ </div>
161
+ </div>
156
162
 
157
- }
163
+ }
158
164
 
159
- </div>
160
- )
165
+ </div>
166
+ )
161
167
  }
162
168
 
169
+
170
+
171
+
163
172
  HeroCapability.defaultProps={
164
173
  heroData : {
165
174
  tabContent: {
@@ -211,7 +220,7 @@ HeroCapability.defaultProps={
211
220
  iconArrowVariant: 'arrownarrowupright',
212
221
  iconArrowStrokeColor: 'blue-400',
213
222
  title: 'Webinar',
214
- description: 'Model Level Authorization System for GraphQL with Hasura',
223
+ description: 'GraphQL response caching',
215
224
 
216
225
 
217
226
  },
package/src/HDS/foundation/ColorPalette/color.js CHANGED
@@ -574,7 +574,103 @@ const HDSColors = {
574
574
  "stroke-red-500": "stroke-red-500",
575
575
  "stroke-red-600": "stroke-red-600",
576
576
  "stroke-red-700": "stroke-red-700",
577
- "stroke-red-800": "stroke-red-800"
577
+ "stroke-red-800": "stroke-red-800",
578
+ "hover:bg-storybook-default-heading": "hover:bg-storybook-default-heading",
579
+ "hover:bg-base-0": "hover:bg-base-0",
580
+ "hover:bg-base-1000": "hover:bg-base-1000",
581
+ "hover:bg-neutral-0": "hover:bg-neutral-0",
582
+ "hover:bg-neutral-50": "hover:bg-neutral-50",
583
+ "hover:bg-neutral-100": "hover:bg-neutral-100",
584
+ "hover:bg-neutral-150": "hover:bg-neutral-150",
585
+ "hover:bg-neutral-200": "hover:bg-neutral-200",
586
+ "hover:bg-neutral-300": "hover:bg-neutral-300",
587
+ "hover:bg-neutral-400": "hover:bg-neutral-400",
588
+ "hover:bg-neutral-500": "hover:bg-neutral-500",
589
+ "hover:bg-neutral-600": "hover:bg-neutral-600",
590
+ "hover:bg-neutral-700": "hover:bg-neutral-700",
591
+ "hover:bg-neutral-800": "hover:bg-neutral-800",
592
+ "hover:bg-neutral-850": "hover:bg-neutral-850",
593
+ "hover:bg-neutral-900": "hover:bg-neutral-900",
594
+ "hover:bg-neutral-950": "hover:bg-neutral-950",
595
+ "hover:bg-neutral-1000": "hover:bg-neutral-1000",
596
+ "hover:bg-blue-100": "hover:bg-blue-100",
597
+ "hover:bg-blue-200": "hover:bg-blue-200",
598
+ "hover:bg-blue-300": "hover:bg-blue-300",
599
+ "hover:bg-blue-400": "hover:bg-blue-400",
600
+ "hover:bg-blue-500": "hover:bg-blue-500",
601
+ "hover:bg-blue-600": "hover:bg-blue-600",
602
+ "hover:bg-blue-700": "hover:bg-blue-700",
603
+ "hover:bg-blue-800": "hover:bg-blue-800",
604
+ "hover:bg-blue-900": "hover:bg-blue-900",
605
+ "hover:bg-purple-100": "hover:bg-purple-100",
606
+ "hover:bg-purple-200": "hover:bg-purple-200",
607
+ "hover:bg-purple-300": "hover:bg-purple-300",
608
+ "hover:bg-purple-400": "hover:bg-purple-400",
609
+ "hover:bg-purple-500": "hover:bg-purple-500",
610
+ "hover:bg-purple-600": "hover:bg-purple-600",
611
+ "hover:bg-purple-700": "hover:bg-purple-700",
612
+ "hover:bg-purple-800": "hover:bg-purple-800",
613
+ "hover:bg-purple-900": "hover:bg-purple-900",
614
+ "hover:bg-cyan-100": "hover:bg-cyan-100",
615
+ "hover:bg-cyan-200": "hover:bg-cyan-200",
616
+ "hover:bg-cyan-300": "hover:bg-cyan-300",
617
+ "hover:bg-cyan-400": "hover:bg-cyan-400",
618
+ "hover:bg-cyan-500": "hover:bg-cyan-500",
619
+ "hover:bg-cyan-600": "hover:bg-cyan-600",
620
+ "hover:bg-cyan-700": "hover:bg-cyan-700",
621
+ "hover:bg-cyan-800": "hover:bg-cyan-800",
622
+ "hover:bg-cyan-900": "hover:bg-cyan-900",
623
+ "hover:bg-green-100": "hover:bg-green-100",
624
+ "hover:bg-green-200": "hover:bg-green-200",
625
+ "hover:bg-green-300": "hover:bg-green-300",
626
+ "hover:bg-green-400": "hover:bg-green-400",
627
+ "hover:bg-green-500": "hover:bg-green-500",
628
+ "hover:bg-green-600": "hover:bg-green-600",
629
+ "hover:bg-green-700": "hover:bg-green-700",
630
+ "hover:bg-green-800": "hover:bg-green-800",
631
+ "hover:bg-green-900": "hover:bg-green-900",
632
+ "hover:bg-pink-100": "hover:bg-pink-100",
633
+ "hover:bg-pink-200": "hover:bg-pink-200",
634
+ "hover:bg-pink-300": "hover:bg-pink-300",
635
+ "hover:bg-pink-400": "hover:bg-pink-400",
636
+ "hover:bg-pink-500": "hover:bg-pink-500",
637
+ "hover:bg-pink-600": "hover:bg-pink-600",
638
+ "hover:bg-pink-700": "hover:bg-pink-700",
639
+ "hover:bg-pink-800": "hover:bg-pink-800",
640
+ "hover:bg-pink-900": "hover:bg-pink-900",
641
+ "hover:bg-amber-100": "hover:bg-amber-100",
642
+ "hover:bg-amber-200": "hover:bg-amber-200",
643
+ "hover:bg-amber-300": "hover:bg-amber-300",
644
+ "hover:bg-amber-400": "hover:bg-amber-400",
645
+ "hover:bg-amber-500": "hover:bg-amber-500",
646
+ "hover:bg-amber-600": "hover:bg-amber-600",
647
+ "hover:bg-amber-700": "hover:bg-amber-700",
648
+ "hover:bg-amber-800": "hover:bg-amber-800",
649
+ "hover:bg-amber-900": "hover:bg-amber-900",
650
+ "hover:bg-yellow-100": "hover:bg-yellow-100",
651
+ "hover:bg-yellow-200": "hover:bg-yellow-200",
652
+ "hover:bg-yellow-300": "hover:bg-yellow-300",
653
+ "hover:bg-yellow-400": "hover:bg-yellow-400",
654
+ "hover:bg-yellow-500": "hover:bg-yellow-500",
655
+ "hover:bg-yellow-600": "hover:bg-yellow-600",
656
+ "hover:bg-yellow-700": "hover:bg-yellow-700",
657
+ "hover:bg-yellow-800": "hover:bg-yellow-800",
658
+ "hover:bg-orange-100": "hover:bg-orange-100",
659
+ "hover:bg-orange-200": "hover:bg-orange-200",
660
+ "hover:bg-orange-300": "hover:bg-orange-300",
661
+ "hover:bg-orange-400": "hover:bg-orange-400",
662
+ "hover:bg-orange-500": "hover:bg-orange-500",
663
+ "hover:bg-orange-600": "hover:bg-orange-600",
664
+ "hover:bg-orange-700": "hover:bg-orange-700",
665
+ "hover:bg-orange-800": "hover:bg-orange-800",
666
+ "hover:bg-red-100": "hover:bg-red-100",
667
+ "hover:bg-red-200": "hover:bg-red-200",
668
+ "hover:bg-red-300": "hover:bg-red-300",
669
+ "hover:bg-red-400": "hover:bg-red-400",
670
+ "hover:bg-red-500": "hover:bg-red-500",
671
+ "hover:bg-red-600": "hover:bg-red-600",
672
+ "hover:bg-red-700": "hover:bg-red-700",
673
+ "hover:bg-red-800": "hover:bg-red-800",
578
674
  };
579
675
 
580
676
  export default function HDSColor(color = '') {