hds-web 1.3.7 → 1.3.9
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/BadgesCaption/badges.js +2 -2
- package/src/HDS/components/Buttons/button.js +2 -2
- package/src/HDS/components/Cards/Link/link.js +1 -1
- package/src/HDS/components/Cards/Misc/talkcard2.js +46 -47
- package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js +19 -13
- package/src/HDS/components/Carousels/carousel.js +1 -1
- package/src/HDS/components/Hero/h3.js +6 -6
- package/src/HDS/components/Tables/index.js +2 -1
- package/src/HDS/components/Tables/tableD.js +427 -0
- package/src/styles/tailwind.css +97 -0
@@ -0,0 +1,427 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { useState } from 'react';
|
3
|
+
import { Typography } from '../../foundation/Typography'
|
4
|
+
import { Icon } from '../common-components/Icon'
|
5
|
+
import { HDSColor } from '../../foundation/ColorPalette';
|
6
|
+
import { Tab } from '../Tabs'
|
7
|
+
import ReactMarkdown from "react-markdown";
|
8
|
+
import { HDSButton } from '../Buttons'
|
9
|
+
const tabs = [
|
10
|
+
{ name: 'Level 1', href: '', current: true },
|
11
|
+
{ name: 'Level 2', href: '', current: false },
|
12
|
+
]
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
const levelCalc = (arr, index) => {
|
17
|
+
|
18
|
+
const keyIndex = 'key' + `${index}`;
|
19
|
+
|
20
|
+
if (arr[keyIndex] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant'])) {
|
21
|
+
return (
|
22
|
+
<>
|
23
|
+
<div className='flex gap-4 p-4 w-full'>
|
24
|
+
{(arr[keyIndex]['text'] || arr[keyIndex]['iconVariant']) && (
|
25
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant='checkcircle' strokeClass='stroke-green-500' />
|
26
|
+
)
|
27
|
+
}
|
28
|
+
<>
|
29
|
+
<Typography textStyle='body1c'
|
30
|
+
className='text-neutral-700 [&>span]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0'>
|
31
|
+
|
32
|
+
{arr[keyIndex]['text'] && arr[keyIndex]['text'] !== null && (
|
33
|
+
<>
|
34
|
+
{`${arr[keyIndex]['text']} `}
|
35
|
+
</>
|
36
|
+
)
|
37
|
+
}
|
38
|
+
{arr['rowTitle'] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant']) && (
|
39
|
+
<>
|
40
|
+
<ReactMarkdown components={{ p: 'span' }}>
|
41
|
+
{`${arr['rowTitle']}`}
|
42
|
+
</ReactMarkdown>
|
43
|
+
</>
|
44
|
+
|
45
|
+
)}
|
46
|
+
</Typography>
|
47
|
+
</>
|
48
|
+
|
49
|
+
</div>
|
50
|
+
|
51
|
+
</>
|
52
|
+
)
|
53
|
+
}
|
54
|
+
|
55
|
+
}
|
56
|
+
|
57
|
+
export default function TableB(props) {
|
58
|
+
const {
|
59
|
+
title,
|
60
|
+
title_color,
|
61
|
+
description,
|
62
|
+
desc_color,
|
63
|
+
TABLE_VALUE,
|
64
|
+
TABLE_HEADER,
|
65
|
+
} = props;
|
66
|
+
const [activeTab, setActiveTab] = useState(1);
|
67
|
+
console.log(TABLE_VALUE, TABLE_VALUE[0], 'hh');
|
68
|
+
|
69
|
+
const tableValuesm = (section, keyIndex) =>
|
70
|
+
(
|
71
|
+
<>
|
72
|
+
{section[keyIndex].map((value, index) => (
|
73
|
+
<tr className='divide-x divide-neutral-200' key={index}>
|
74
|
+
{Object.keys(value).map((keyIndex) => (
|
75
|
+
|
76
|
+
<React.Fragment key={index + keyIndex}>
|
77
|
+
{keyIndex !== null && keyIndex === 'rowTitle' && (<td
|
78
|
+
|
79
|
+
className="px-8 py-7 w-[22.5rem]"
|
80
|
+
>
|
81
|
+
<Typography className='max-w-[22rem] text-neutral-700 [&>p]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
|
82
|
+
|
83
|
+
</td>)}
|
84
|
+
|
85
|
+
{keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
|
86
|
+
<td
|
87
|
+
|
88
|
+
className="px-8 py-7 border-table text-center "
|
89
|
+
>
|
90
|
+
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
91
|
+
<></>
|
92
|
+
|
93
|
+
)}
|
94
|
+
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
95
|
+
<Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
96
|
+
|
97
|
+
)}
|
98
|
+
{(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
|
99
|
+
<div className='flex justify-center'>
|
100
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
101
|
+
</div>
|
102
|
+
)}
|
103
|
+
</td>)
|
104
|
+
}
|
105
|
+
|
106
|
+
{keyIndex === null && (
|
107
|
+
<td
|
108
|
+
key={index}
|
109
|
+
className="px-8 py-7 border-table text-center"
|
110
|
+
>
|
111
|
+
</td>
|
112
|
+
)}
|
113
|
+
|
114
|
+
|
115
|
+
</React.Fragment>
|
116
|
+
))}
|
117
|
+
</tr>
|
118
|
+
))}
|
119
|
+
</>
|
120
|
+
|
121
|
+
)
|
122
|
+
|
123
|
+
|
124
|
+
|
125
|
+
|
126
|
+
function handleTabClick(tab) {
|
127
|
+
if (tab.name === 'Level 1') setActiveTab(1);
|
128
|
+
if (tab.name === 'Level 2') setActiveTab(2);
|
129
|
+
if (tab.name === 'Level 3') setActiveTab(3);
|
130
|
+
// Perform any other actions based on the clicked tab
|
131
|
+
}
|
132
|
+
|
133
|
+
return (
|
134
|
+
<div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
|
135
|
+
<div className=" flex justify-around ">
|
136
|
+
<div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
|
137
|
+
<div>
|
138
|
+
{title && (
|
139
|
+
<Typography
|
140
|
+
textStyle='h3'
|
141
|
+
className={HDSColor(title_color)}
|
142
|
+
>
|
143
|
+
{title}
|
144
|
+
</Typography>
|
145
|
+
)}
|
146
|
+
{description && (
|
147
|
+
<Typography
|
148
|
+
textStyle='body1c'
|
149
|
+
className={HDSColor(desc_color)}
|
150
|
+
>
|
151
|
+
{description}
|
152
|
+
</Typography>
|
153
|
+
)}
|
154
|
+
</div>
|
155
|
+
<div className=' mt-11 rounded-full shadow tb-l:hidden'>
|
156
|
+
<Tab onTabClick={handleTabClick} tabs={tabs} />
|
157
|
+
</div>
|
158
|
+
</div>
|
159
|
+
|
160
|
+
</div>
|
161
|
+
|
162
|
+
{/* code for mobile */}
|
163
|
+
|
164
|
+
<div className='tb-l:hidden'>
|
165
|
+
<div className="mt-8 bg-neutral-0 rounded-3xl ">
|
166
|
+
<div className=" shadow rounded-3xl ">
|
167
|
+
|
168
|
+
<div className='flex border-x px-8 py-[1.625rem] border-neutral-200 rounded-t-3xl flex-col justify-center items-center text-center'>
|
169
|
+
<div className={'flex items-center gap-2'}>
|
170
|
+
{TABLE_HEADER[activeTab]['icon'] &&
|
171
|
+
(
|
172
|
+
<Icon
|
173
|
+
height='h-6 w-6'
|
174
|
+
variant={TABLE_HEADER[activeTab]['icon']}
|
175
|
+
strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
|
176
|
+
)
|
177
|
+
}
|
178
|
+
{
|
179
|
+
TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
|
180
|
+
<Typography
|
181
|
+
textStyle='h5'
|
182
|
+
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
183
|
+
{`${TABLE_HEADER[activeTab]['title']}`}
|
184
|
+
</Typography>)
|
185
|
+
}
|
186
|
+
{
|
187
|
+
TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
|
188
|
+
<Typography
|
189
|
+
textStyle='h5'
|
190
|
+
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
191
|
+
{`${TABLE_HEADER[activeTab]['title']}`}
|
192
|
+
</Typography>)
|
193
|
+
}
|
194
|
+
|
195
|
+
|
196
|
+
</div>
|
197
|
+
<div className=' max-w-[10rem]'>
|
198
|
+
{TABLE_HEADER[activeTab]['descr'] && (
|
199
|
+
<Typography
|
200
|
+
textStyle='body1'
|
201
|
+
className={TABLE_HEADER[activeTab]['descr_text_color']}>
|
202
|
+
{`${TABLE_HEADER[activeTab]['descr']}`}
|
203
|
+
</Typography>)}
|
204
|
+
</div>
|
205
|
+
</div>
|
206
|
+
|
207
|
+
<div className="divide-y divide-neutral-200 rounded-b-3xl">
|
208
|
+
<div className='flex flex-col border border-neutral-200 divide-y divide-neutral-200 rounded-b-3xl items-center'>
|
209
|
+
<div className='flex divide-y divide-neutral-200 flex-col w-full gap-2 items-start'>
|
210
|
+
{TABLE_VALUE.map((msection, index) => (
|
211
|
+
<React.Fragment key={index}>
|
212
|
+
{Object.keys(msection).map((keyIndex) => (
|
213
|
+
|
214
|
+
<>
|
215
|
+
{msection[keyIndex].map((tem2, index) =>(
|
216
|
+
<>
|
217
|
+
{levelCalc(tem2,index)}
|
218
|
+
</>
|
219
|
+
))
|
220
|
+
|
221
|
+
}
|
222
|
+
|
223
|
+
|
224
|
+
|
225
|
+
</>
|
226
|
+
))}
|
227
|
+
|
228
|
+
|
229
|
+
</React.Fragment>
|
230
|
+
))}
|
231
|
+
</div>
|
232
|
+
</div>
|
233
|
+
|
234
|
+
</div>
|
235
|
+
</div>
|
236
|
+
</div>
|
237
|
+
</div>
|
238
|
+
|
239
|
+
{/* code for mobile */}
|
240
|
+
|
241
|
+
<div className='hidden tb-l:block' >
|
242
|
+
<div className="mt-12 rounded-3xl ">
|
243
|
+
<table className="min-w-full shadow tableclss rounded-3xl ">
|
244
|
+
<thead>
|
245
|
+
<tr className=' text-center rounded-t-3xl'>
|
246
|
+
{Object.keys(TABLE_HEADER).map((key, index) => (
|
247
|
+
<th
|
248
|
+
key={index}
|
249
|
+
scope="col"
|
250
|
+
className="px-8 py-6 sm:table-cell"
|
251
|
+
>
|
252
|
+
<div className=''>
|
253
|
+
<div className='flex flex-col justify-center items-center text-center'>
|
254
|
+
<div className={'flex items-center gap-2'}>
|
255
|
+
{TABLE_HEADER[key]['icon'] &&
|
256
|
+
(
|
257
|
+
<Icon
|
258
|
+
height='h-6 w-6 stroke-[1.5px]'
|
259
|
+
variant={TABLE_HEADER[key]['icon']}
|
260
|
+
strokeClass={HDSColor(TABLE_HEADER[key]['iconStrokeClass'])} />
|
261
|
+
)
|
262
|
+
}
|
263
|
+
{
|
264
|
+
TABLE_HEADER[key]['title'] && key == 0 && (
|
265
|
+
<Typography
|
266
|
+
textStyle='h5'
|
267
|
+
className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
|
268
|
+
{TABLE_HEADER[key]['title']}
|
269
|
+
</Typography>)
|
270
|
+
}
|
271
|
+
{
|
272
|
+
TABLE_HEADER[key]['title'] && key != 0 && (
|
273
|
+
<Typography
|
274
|
+
textStyle='h5'
|
275
|
+
className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
|
276
|
+
<ReactMarkdown>{TABLE_HEADER[key]['title']}</ReactMarkdown>
|
277
|
+
</Typography>)
|
278
|
+
}
|
279
|
+
</div>
|
280
|
+
<div className=' max-w-[10rem]'>
|
281
|
+
{TABLE_HEADER[key]['descr'] && (
|
282
|
+
<Typography
|
283
|
+
textStyle='body1'
|
284
|
+
className={HDSColor(TABLE_HEADER[key]['descr_text_color'])}>
|
285
|
+
{TABLE_HEADER[key]['descr']}
|
286
|
+
</Typography>)}
|
287
|
+
|
288
|
+
{TABLE_HEADER[key]['button_title'] &&
|
289
|
+
(
|
290
|
+
<HDSButton
|
291
|
+
label={TABLE_HEADER[key]['button_title']}
|
292
|
+
type='secondary'
|
293
|
+
leftIconVariant='none'
|
294
|
+
rightIconVariant='none'
|
295
|
+
state='default'
|
296
|
+
size='sm'
|
297
|
+
rightAnimatedArrow={true}
|
298
|
+
rightAnimatedArrowColor='#6C737F'
|
299
|
+
className='mt-4'
|
300
|
+
/>
|
301
|
+
|
302
|
+
)
|
303
|
+
|
304
|
+
}
|
305
|
+
</div>
|
306
|
+
</div>
|
307
|
+
</div>
|
308
|
+
</th>
|
309
|
+
))}
|
310
|
+
</tr>
|
311
|
+
</thead>
|
312
|
+
{TABLE_VALUE.map((section, index) => (
|
313
|
+
<tbody key={index} className="divide-y divide-neutral-200">
|
314
|
+
|
315
|
+
|
316
|
+
{Object.keys(section).map((keyIndex) => (
|
317
|
+
<>
|
318
|
+
<tr className=''>
|
319
|
+
{Object.keys(section[keyIndex][0]).map((keyIndex2) => (
|
320
|
+
<React.Fragment key={keyIndex2}>
|
321
|
+
{keyIndex2 !== null && (
|
322
|
+
<th
|
323
|
+
className='bg-neutral-100 first:rounded-l-full last:rounded-r-full'
|
324
|
+
>
|
325
|
+
<Typography textStyle='h5' className='text-neutral-900'>
|
326
|
+
|
327
|
+
{ keyIndex2 }
|
328
|
+
</Typography>
|
329
|
+
|
330
|
+
|
331
|
+
</th>
|
332
|
+
)}
|
333
|
+
</React.Fragment>
|
334
|
+
))}
|
335
|
+
</tr>
|
336
|
+
|
337
|
+
|
338
|
+
|
339
|
+
{tableValuesm(section, keyIndex)}
|
340
|
+
</>
|
341
|
+
|
342
|
+
|
343
|
+
|
344
|
+
|
345
|
+
))
|
346
|
+
}
|
347
|
+
|
348
|
+
|
349
|
+
</tbody>
|
350
|
+
|
351
|
+
))
|
352
|
+
|
353
|
+
}
|
354
|
+
{/* <tbody className="divide-y divide-neutral-200">
|
355
|
+
<tr className=''>
|
356
|
+
{Object.keys(TABLE_VALUE[0]).map((keyIndex) => (
|
357
|
+
<th
|
358
|
+
className='bg-neutral-100 first:rounded-l-full last:rounded-r-full'
|
359
|
+
>
|
360
|
+
<Typography textStyle='h5' className='text-neutral-900'>
|
361
|
+
{keyIndex}
|
362
|
+
</Typography>
|
363
|
+
</th>
|
364
|
+
))
|
365
|
+
}
|
366
|
+
</tr>
|
367
|
+
|
368
|
+
{TABLE_VALUE.map((value, index) => (
|
369
|
+
<tr className='' key={index}>
|
370
|
+
{Object.keys(value).map((keyIndex) => (
|
371
|
+
|
372
|
+
<React.Fragment key={index + keyIndex}>
|
373
|
+
{keyIndex !== null && keyIndex === 'rowTitle' && (<td
|
374
|
+
|
375
|
+
className="px-8 py-7 w-[22.5rem]"
|
376
|
+
>
|
377
|
+
<Typography className='max-w-[22rem] text-neutral-700 [&>p]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
|
378
|
+
|
379
|
+
</td>)}
|
380
|
+
|
381
|
+
{keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
|
382
|
+
<td
|
383
|
+
|
384
|
+
className="px-8 py-7 border-table text-center "
|
385
|
+
>
|
386
|
+
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
387
|
+
<></>
|
388
|
+
|
389
|
+
)}
|
390
|
+
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
391
|
+
<Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
392
|
+
|
393
|
+
)}
|
394
|
+
{(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
|
395
|
+
<div className='flex justify-center'>
|
396
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
397
|
+
</div>
|
398
|
+
)}
|
399
|
+
</td>)
|
400
|
+
}
|
401
|
+
|
402
|
+
{keyIndex === null && (
|
403
|
+
<td
|
404
|
+
key={index}
|
405
|
+
className="px-8 py-7 border-table text-center"
|
406
|
+
>
|
407
|
+
</td>
|
408
|
+
)}
|
409
|
+
|
410
|
+
|
411
|
+
</React.Fragment>
|
412
|
+
))}
|
413
|
+
</tr>
|
414
|
+
))}
|
415
|
+
</tbody> */}
|
416
|
+
|
417
|
+
</table>
|
418
|
+
</div>
|
419
|
+
</div>
|
420
|
+
</div>
|
421
|
+
)
|
422
|
+
}
|
423
|
+
|
424
|
+
TableB.defaultProps = {
|
425
|
+
title_color: 'text-blue-800',
|
426
|
+
desc_color: 'text-blue-600'
|
427
|
+
}
|
package/src/styles/tailwind.css
CHANGED
@@ -1572,6 +1572,10 @@ select {
|
|
1572
1572
|
min-width: 144px;
|
1573
1573
|
}
|
1574
1574
|
|
1575
|
+
.min-w-\[11\.25rem\] {
|
1576
|
+
min-width: 11.25rem;
|
1577
|
+
}
|
1578
|
+
|
1575
1579
|
.max-w-2xl {
|
1576
1580
|
max-width: 42rem;
|
1577
1581
|
}
|
@@ -1630,6 +1634,10 @@ select {
|
|
1630
1634
|
max-width: min-content;
|
1631
1635
|
}
|
1632
1636
|
|
1637
|
+
.max-w-\[22\.313rem\] {
|
1638
|
+
max-width: 22.313rem;
|
1639
|
+
}
|
1640
|
+
|
1633
1641
|
.flex-1 {
|
1634
1642
|
flex: 1 1 0%;
|
1635
1643
|
}
|
@@ -2058,10 +2066,18 @@ select {
|
|
2058
2066
|
overflow: hidden;
|
2059
2067
|
}
|
2060
2068
|
|
2069
|
+
.overflow-clip {
|
2070
|
+
overflow: clip;
|
2071
|
+
}
|
2072
|
+
|
2061
2073
|
.overflow-visible {
|
2062
2074
|
overflow: visible;
|
2063
2075
|
}
|
2064
2076
|
|
2077
|
+
.overflow-scroll {
|
2078
|
+
overflow: scroll;
|
2079
|
+
}
|
2080
|
+
|
2065
2081
|
.overflow-y-auto {
|
2066
2082
|
overflow-y: auto;
|
2067
2083
|
}
|
@@ -2164,6 +2180,16 @@ select {
|
|
2164
2180
|
border-top-right-radius: 0.375rem;
|
2165
2181
|
}
|
2166
2182
|
|
2183
|
+
.rounded-l {
|
2184
|
+
border-top-left-radius: 0.25rem;
|
2185
|
+
border-bottom-left-radius: 0.25rem;
|
2186
|
+
}
|
2187
|
+
|
2188
|
+
.rounded-l-full {
|
2189
|
+
border-top-left-radius: 9999px;
|
2190
|
+
border-bottom-left-radius: 9999px;
|
2191
|
+
}
|
2192
|
+
|
2167
2193
|
.rounded-tl-2xl {
|
2168
2194
|
border-top-left-radius: 1rem;
|
2169
2195
|
}
|
@@ -5476,6 +5502,14 @@ select {
|
|
5476
5502
|
padding-top: 1.5rem;
|
5477
5503
|
}
|
5478
5504
|
|
5505
|
+
.pr-0 {
|
5506
|
+
padding-right: 0px;
|
5507
|
+
}
|
5508
|
+
|
5509
|
+
.pt-8 {
|
5510
|
+
padding-top: 2rem;
|
5511
|
+
}
|
5512
|
+
|
5479
5513
|
.text-left {
|
5480
5514
|
text-align: left;
|
5481
5515
|
}
|
@@ -7432,15 +7466,53 @@ select {
|
|
7432
7466
|
margin-left: 0px;
|
7433
7467
|
}
|
7434
7468
|
|
7469
|
+
.first\:rounded-full:first-child {
|
7470
|
+
border-radius: 9999px;
|
7471
|
+
}
|
7472
|
+
|
7473
|
+
.first\:rounded-r-full:first-child {
|
7474
|
+
border-top-right-radius: 9999px;
|
7475
|
+
border-bottom-right-radius: 9999px;
|
7476
|
+
}
|
7477
|
+
|
7478
|
+
.first\:rounded-l-full:first-child {
|
7479
|
+
border-top-left-radius: 9999px;
|
7480
|
+
border-bottom-left-radius: 9999px;
|
7481
|
+
}
|
7482
|
+
|
7435
7483
|
.first\:bg-blue-500:first-child {
|
7436
7484
|
--tw-bg-opacity: 1;
|
7437
7485
|
background-color: rgb(57 112 253 / var(--tw-bg-opacity));
|
7438
7486
|
}
|
7439
7487
|
|
7488
|
+
.first\:bg-purple-500:first-child {
|
7489
|
+
--tw-bg-opacity: 1;
|
7490
|
+
background-color: rgb(140 73 250 / var(--tw-bg-opacity));
|
7491
|
+
}
|
7492
|
+
|
7493
|
+
.first\:bg-neutral-200:first-child {
|
7494
|
+
--tw-bg-opacity: 1;
|
7495
|
+
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
7496
|
+
}
|
7497
|
+
|
7440
7498
|
.last\:mr-0:last-child {
|
7441
7499
|
margin-right: 0px;
|
7442
7500
|
}
|
7443
7501
|
|
7502
|
+
.last\:rounded-3xl:last-child {
|
7503
|
+
border-radius: 1.5rem;
|
7504
|
+
}
|
7505
|
+
|
7506
|
+
.last\:rounded-r-3xl:last-child {
|
7507
|
+
border-top-right-radius: 1.5rem;
|
7508
|
+
border-bottom-right-radius: 1.5rem;
|
7509
|
+
}
|
7510
|
+
|
7511
|
+
.last\:rounded-r-full:last-child {
|
7512
|
+
border-top-right-radius: 9999px;
|
7513
|
+
border-bottom-right-radius: 9999px;
|
7514
|
+
}
|
7515
|
+
|
7444
7516
|
.last\:border-b-0:last-child {
|
7445
7517
|
border-bottom-width: 0px;
|
7446
7518
|
}
|
@@ -8212,6 +8284,14 @@ select {
|
|
8212
8284
|
gap: 0.75rem;
|
8213
8285
|
}
|
8214
8286
|
|
8287
|
+
.tb\:gap-1 {
|
8288
|
+
gap: 0.25rem;
|
8289
|
+
}
|
8290
|
+
|
8291
|
+
.tb\:gap-6 {
|
8292
|
+
gap: 1.5rem;
|
8293
|
+
}
|
8294
|
+
|
8215
8295
|
.tb\:gap-x-16 {
|
8216
8296
|
-webkit-column-gap: 4rem;
|
8217
8297
|
column-gap: 4rem;
|
@@ -8266,6 +8346,11 @@ select {
|
|
8266
8346
|
padding-right: 2rem;
|
8267
8347
|
}
|
8268
8348
|
|
8349
|
+
.tb\:px-0 {
|
8350
|
+
padding-left: 0px;
|
8351
|
+
padding-right: 0px;
|
8352
|
+
}
|
8353
|
+
|
8269
8354
|
.tb\:pb-14 {
|
8270
8355
|
padding-bottom: 3.5rem;
|
8271
8356
|
}
|
@@ -8290,6 +8375,14 @@ select {
|
|
8290
8375
|
padding-top: 2.875rem;
|
8291
8376
|
}
|
8292
8377
|
|
8378
|
+
.tb\:pl-0 {
|
8379
|
+
padding-left: 0px;
|
8380
|
+
}
|
8381
|
+
|
8382
|
+
.tb\:pt-14 {
|
8383
|
+
padding-top: 3.5rem;
|
8384
|
+
}
|
8385
|
+
|
8293
8386
|
.tb\:text-left {
|
8294
8387
|
text-align: left;
|
8295
8388
|
}
|
@@ -8745,6 +8838,10 @@ select {
|
|
8745
8838
|
gap: 9rem;
|
8746
8839
|
}
|
8747
8840
|
|
8841
|
+
.tb-l\:gap-6 {
|
8842
|
+
gap: 1.5rem;
|
8843
|
+
}
|
8844
|
+
|
8748
8845
|
.tb-l\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
|
8749
8846
|
--tw-space-x-reverse: 0;
|
8750
8847
|
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
|