hds-web 1.6.0 → 1.6.2

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.6.0",
3
+ "version": "1.6.2",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
@@ -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 h-full 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'}
@@ -85,7 +85,7 @@ LinkCard.defaultProps = {
85
85
  brandImageUrl: '',
86
86
  brandImageAlt:'',
87
87
  linkUrl: '#',
88
- cardHoverBg: 'bg-neutral-0',
88
+ cardHoverBg: 'bg-pink-600',
89
89
  iconVariant: 'videorecorder',
90
90
  iconStrokeColor: 'blue-500',
91
91
  iconArrowVariant: 'arrownarrowupright',
@@ -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="tb:grid tb:grid-cols-3 h-full px-8 pt-12 flex flex-row tb:px-0 db:pt-[116px] tb:justify-center overflow-scroll scrollbar-hide">
55
- {heroData.linkCards.map((card, index) => (
56
- <div key={index} className=" pb-2 px-3 h-full min-w-[184px] max-w-[357px] ">
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: {
@@ -574,7 +574,199 @@ 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",
674
+ "border-storybook-default-heading": "border-storybook-default-heading",
675
+ "border-base-0": "border-base-0",
676
+ "border-base-1000": "border-base-1000",
677
+ "border-neutral-0": "border-neutral-0",
678
+ "border-neutral-50": "border-neutral-50",
679
+ "border-neutral-100": "border-neutral-100",
680
+ "border-neutral-150": "border-neutral-150",
681
+ "border-neutral-200": "border-neutral-200",
682
+ "border-neutral-300": "border-neutral-300",
683
+ "border-neutral-400": "border-neutral-400",
684
+ "border-neutral-500": "border-neutral-500",
685
+ "border-neutral-600": "border-neutral-600",
686
+ "border-neutral-700": "border-neutral-700",
687
+ "border-neutral-800": "border-neutral-800",
688
+ "border-neutral-850": "border-neutral-850",
689
+ "border-neutral-900": "border-neutral-900",
690
+ "border-neutral-950": "border-neutral-950",
691
+ "border-neutral-1000": "border-neutral-1000",
692
+ "border-blue-100": "border-blue-100",
693
+ "border-blue-200": "border-blue-200",
694
+ "border-blue-300": "border-blue-300",
695
+ "border-blue-400": "border-blue-400",
696
+ "border-blue-500": "border-blue-500",
697
+ "border-blue-600": "border-blue-600",
698
+ "border-blue-700": "border-blue-700",
699
+ "border-blue-800": "border-blue-800",
700
+ "border-blue-900": "border-blue-900",
701
+ "border-purple-100": "border-purple-100",
702
+ "border-purple-200": "border-purple-200",
703
+ "border-purple-300": "border-purple-300",
704
+ "border-purple-400": "border-purple-400",
705
+ "border-purple-500": "border-purple-500",
706
+ "border-purple-600": "border-purple-600",
707
+ "border-purple-700": "border-purple-700",
708
+ "border-purple-800": "border-purple-800",
709
+ "border-purple-900": "border-purple-900",
710
+ "border-cyan-100": "border-cyan-100",
711
+ "border-cyan-200": "border-cyan-200",
712
+ "border-cyan-300": "border-cyan-300",
713
+ "border-cyan-400": "border-cyan-400",
714
+ "border-cyan-500": "border-cyan-500",
715
+ "border-cyan-600": "border-cyan-600",
716
+ "border-cyan-700": "border-cyan-700",
717
+ "border-cyan-800": "border-cyan-800",
718
+ "border-cyan-900": "border-cyan-900",
719
+ "border-green-100": "border-green-100",
720
+ "border-green-200": "border-green-200",
721
+ "border-green-300": "border-green-300",
722
+ "border-green-400": "border-green-400",
723
+ "border-green-500": "border-green-500",
724
+ "border-green-600": "border-green-600",
725
+ "border-green-700": "border-green-700",
726
+ "border-green-800": "border-green-800",
727
+ "border-green-900": "border-green-900",
728
+ "border-pink-100": "border-pink-100",
729
+ "border-pink-200": "border-pink-200",
730
+ "border-pink-300": "border-pink-300",
731
+ "border-pink-400": "border-pink-400",
732
+ "border-pink-500": "border-pink-500",
733
+ "border-pink-600": "border-pink-600",
734
+ "border-pink-700": "border-pink-700",
735
+ "border-pink-800": "border-pink-800",
736
+ "border-pink-900": "border-pink-900",
737
+ "border-amber-100": "border-amber-100",
738
+ "border-amber-200": "border-amber-200",
739
+ "border-amber-300": "border-amber-300",
740
+ "border-amber-400": "border-amber-400",
741
+ "border-amber-500": "border-amber-500",
742
+ "border-amber-600": "border-amber-600",
743
+ "border-amber-700": "border-amber-700",
744
+ "border-amber-800": "border-amber-800",
745
+ "border-amber-900": "border-amber-900",
746
+ "border-yellow-100": "border-yellow-100",
747
+ "border-yellow-200": "border-yellow-200",
748
+ "border-yellow-300": "border-yellow-300",
749
+ "border-yellow-400": "border-yellow-400",
750
+ "border-yellow-500": "border-yellow-500",
751
+ "border-yellow-600": "border-yellow-600",
752
+ "border-yellow-700": "border-yellow-700",
753
+ "border-yellow-800": "border-yellow-800",
754
+ "border-orange-100": "border-orange-100",
755
+ "border-orange-200": "border-orange-200",
756
+ "border-orange-300": "border-orange-300",
757
+ "border-orange-400": "border-orange-400",
758
+ "border-orange-500": "border-orange-500",
759
+ "border-orange-600": "border-orange-600",
760
+ "border-orange-700": "border-orange-700",
761
+ "border-orange-800": "border-orange-800",
762
+ "border-red-100": "border-red-100",
763
+ "border-red-200": "border-red-200",
764
+ "border-red-300": "border-red-300",
765
+ "border-red-400": "border-red-400",
766
+ "border-red-500": "border-red-500",
767
+ "border-red-600": "border-red-600",
768
+ "border-red-700": "border-red-700",
769
+ "border-red-800": "border-red-800",
578
770
  };
579
771
 
580
772
  export default function HDSColor(color = '') {