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/dist/index.css +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +6 -6
- package/dist/index.js +6 -6
- package/package.json +1 -1
- package/src/HDS/components/Cards/Link/link.js +4 -4
- package/src/HDS/components/Hero/h3.js +144 -135
- package/src/HDS/foundation/ColorPalette/color.js +193 -1
- package/src/HDS/modules/TextCard/textCard.js +59 -25
- package/src/styles/tailwind.css +909 -0
package/package.json
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:${
|
|
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
|
|
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
|
|
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-
|
|
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
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
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
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
-
|
|
88
|
-
|
|
89
|
-
|
|
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
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
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
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
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
|
-
|
|
130
|
+
<div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
|
|
125
131
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
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
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
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
|
-
|
|
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 = '') {
|