hds-web 1.21.9 → 1.22.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 (10) hide show
  1. package/.github/workflows/chromatic.yml +1 -1
  2. package/dist/index.css +2 -2
  3. package/dist/index.es.css +2 -2
  4. package/dist/index.es.js +1 -1
  5. package/dist/index.js +1 -1
  6. package/package.json +1 -1
  7. package/src/HDS/components/Cards/StoryCard/storysm.js +6 -8
  8. package/src/HDS/components/Cards/StoryCard/storyxl.js +7 -7
  9. package/src/HDS/components/Headers/v3Header.js +9 -4
  10. package/src/styles/tailwind.css +191 -69
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.21.9",
3
+ "version": "1.22.1",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/StoryCard/storysm.js CHANGED
@@ -13,16 +13,16 @@ export default function StoryCard(props) {
13
13
  href={props.linkUrl}
14
14
  className={`rounded-2xl hover:shadow-xl p-8 h-full flex flex-col justify-between group/sc border border-neutral-200 hover:border-opacity-0 min-h-[260px] group`}
15
15
  >
16
-
17
16
  <>
18
17
  <div className='flex items-center justify-between pb-5'>
19
18
  {props.brandImageUrl && props.brandImageAlt && (
20
19
  <div className="max-h-[64px]">
21
- <img src={props.brandImageUrl} alt={props.brandImageAlt} className='max-h-[64px]' />
20
+ <img src={props.brandImageUrl}
21
+ alt={props.brandImageAlt}
22
+ className="max-h-[44px] brightness-0 transition ease-in-out duration-300 group-hover:brightness-100"
23
+ />
22
24
  </div>
23
- )
24
-
25
- }
25
+ )}
26
26
  {props.iconVariant &&
27
27
  (
28
28
  <div className="hidden tb:flex flex-row relative ">
@@ -42,7 +42,6 @@ export default function StoryCard(props) {
42
42
  )
43
43
  }
44
44
  </div>
45
-
46
45
  )
47
46
  }
48
47
  </div>
@@ -76,7 +75,6 @@ export default function StoryCard(props) {
76
75
 
77
76
  </div>
78
77
  </div>
79
-
80
78
  )}
81
79
  </>
82
80
 
@@ -89,7 +87,7 @@ StoryCard.defaultProps = {
89
87
  descTextColor: 'text-neutral-700',
90
88
  iconTag: 'Customer Stories',
91
89
  titleTextColor: '',
92
- brandImageUrl: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687778913/image_16_a725262c4e.png',
90
+ brandImageUrl: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690909443/hasura-design-system/swiggy_m2hjxy.png',
93
91
  brandImageAlt: 'pipe',
94
92
  linkUrl: '#',
95
93
  iconVariant: 'videorecorder',
package/src/HDS/components/Cards/StoryCard/storyxl.js CHANGED
@@ -6,7 +6,7 @@ import { Icon } from "../../common-components";
6
6
  export default function StoryCardXL(props) {
7
7
  return (
8
8
  <>
9
- <div className="flex flex-col-reverse px-6 py-10 tb-l:px-0 tb-l:py-0 tb-l:flex-row tb-l:gap-10 db:gap-32 max-w-7xl">
9
+ <div className="flex flex-col-reverse px-6 py-10 tb-l:px-0 tb-l:py-0 tb-l:flex-row tb-l:gap-10 db:gap-32 tb-l:max-w-7xl">
10
10
 
11
11
  <div className="flex flex-col tb-l:pl-20 tb-l:pt-20 tb-l:pb-14">
12
12
  {
@@ -25,7 +25,7 @@ export default function StoryCardXL(props) {
25
25
  {props.title &&
26
26
  (
27
27
  <div className="flex pt-6 flex-col gap-6 tb-l:max-w-[547px] ">
28
- <Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden max-h-[144px] overflow-clip'>{props.title}</Typography>
28
+ <Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden min-h-[144px] overflow-clip'>{props.title}</Typography>
29
29
  {props.heroList &&
30
30
  (
31
31
  <div>
@@ -33,10 +33,10 @@ export default function StoryCardXL(props) {
33
33
  {props.heroList.map((value, index) => (
34
34
  <div key={index} className='flex gap-5'>
35
35
  <Icon
36
- height='tb:h-8 tb:w-8 h-6 w-6' variant={value.heroIconVariant} strokeClass='stroke-neutral-800' />
36
+ height='tb:h-8 tb:w-8 h-6 w-6' variant={value.iconVariant} strokeClass='stroke-neutral-800' />
37
37
  <Typography
38
38
  textStyle='sub2' className='text-neutral-700' >
39
- {value.heroListTitle}
39
+ {value.title}
40
40
  </Typography>
41
41
  </div>
42
42
  ))
@@ -63,11 +63,11 @@ export default function StoryCardXL(props) {
63
63
  props.heroImageAlt) ?
64
64
  (
65
65
  <>
66
- <div className="flex mt-4 tb:mt-0 justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
66
+ <div className="flex justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
67
67
  <img
68
68
  src={props.heroImageURL}
69
69
  alt={props.heroImageAlt}
70
- className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[717px] tb-l:max-w-[600px] max-w-[280px]"
70
+ className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[650px] tb-l:max-w-[600px] tb:max-w-[420px] "
71
71
  />
72
72
  </div>
73
73
  </>
@@ -97,7 +97,7 @@ export default function StoryCardXL(props) {
97
97
  </div>
98
98
  )
99
99
  }
100
- <Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
100
+ <div className='text-neutral-1000 text-hds-m-h4 tb:text-hds-t-h3 db:text-hds-d-h3'>{props.title}</div>
101
101
  </div>
102
102
  {
103
103
  props.tagline && (
package/src/HDS/components/Headers/v3Header.js CHANGED
@@ -279,7 +279,10 @@ export default function V3Header(props) {
279
279
  </div>
280
280
  <div className='hds-hidden-tbl flex z-[10] items-center gap-6'>
281
281
  <div className={'h-full ' + ((mobileNavOpen) ? " hds-hidden" : "")}>
282
- <AlgoliaSearch {...props} />
282
+ {
283
+ !props.hideSearch &&
284
+ (<AlgoliaSearch {...props} />)
285
+ }
283
286
  </div>
284
287
  {!(isCompany || isDeveloper || isProduct) &&
285
288
  (
@@ -308,9 +311,10 @@ export default function V3Header(props) {
308
311
  </nav>
309
312
 
310
313
  <div className='hds-hidden tb-l:flex flex-row items-center gap-x-4 '>
311
-
312
- <AlgoliaSearch {...props} />
313
-
314
+ {
315
+ !props.hideSearch &&
316
+ (<AlgoliaSearch {...props} />)
317
+ }
314
318
  <a href='/contact-us?type=hasuraenterprise' className='hds-hidden db:flex'>
315
319
  <Typography textStyle='body3c-medium' className='text-neutral-800 hover:text-blue-600'>
316
320
  Contact Sales
@@ -488,6 +492,7 @@ export default function V3Header(props) {
488
492
  }
489
493
 
490
494
  V3Header.defaultProps = {
495
+ hideSearch:false,
491
496
  HEADER_LIST: [
492
497
  {
493
498
  title: 'Product',
package/src/styles/tailwind.css CHANGED
@@ -1485,14 +1485,14 @@ select{
1485
1485
  margin-top: 14px;
1486
1486
  }
1487
1487
 
1488
- .mt-\[70px\]{
1489
- margin-top: 70px;
1490
- }
1491
-
1492
1488
  .mt-\[2px\]{
1493
1489
  margin-top: 2px;
1494
1490
  }
1495
1491
 
1492
+ .mt-\[70px\]{
1493
+ margin-top: 70px;
1494
+ }
1495
+
1496
1496
  .line-clamp-3{
1497
1497
  overflow: hidden;
1498
1498
  display: -webkit-box;
@@ -1664,6 +1664,10 @@ select{
1664
1664
  height: 60px;
1665
1665
  }
1666
1666
 
1667
+ .h-\[700px\]{
1668
+ height: 700px;
1669
+ }
1670
+
1667
1671
  .h-\[718px\]{
1668
1672
  height: 718px;
1669
1673
  }
@@ -1700,10 +1704,6 @@ select{
1700
1704
  height: 100vh;
1701
1705
  }
1702
1706
 
1703
- .max-h-\[144px\]{
1704
- max-height: 144px;
1705
- }
1706
-
1707
1707
  .max-h-\[181px\]{
1708
1708
  max-height: 181px;
1709
1709
  }
@@ -1720,10 +1720,6 @@ select{
1720
1720
  max-height: 28px;
1721
1721
  }
1722
1722
 
1723
- .max-h-\[32px\]{
1724
- max-height: 32px;
1725
- }
1726
-
1727
1723
  .max-h-\[40px\]{
1728
1724
  max-height: 40px;
1729
1725
  }
@@ -1744,10 +1740,22 @@ select{
1744
1740
  max-height: 100vh;
1745
1741
  }
1746
1742
 
1743
+ .max-h-\[34px\]{
1744
+ max-height: 34px;
1745
+ }
1746
+
1747
+ .max-h-\[44px\]{
1748
+ max-height: 44px;
1749
+ }
1750
+
1747
1751
  .min-h-\[12px\]{
1748
1752
  min-height: 12px;
1749
1753
  }
1750
1754
 
1755
+ .min-h-\[144px\]{
1756
+ min-height: 144px;
1757
+ }
1758
+
1751
1759
  .min-h-\[20px\]{
1752
1760
  min-height: 20px;
1753
1761
  }
@@ -1986,10 +1994,6 @@ select{
1986
1994
  min-width: 312px;
1987
1995
  }
1988
1996
 
1989
- .min-w-\[32px\]{
1990
- min-width: 32px;
1991
- }
1992
-
1993
1997
  .min-w-\[48px\]{
1994
1998
  min-width: 48px;
1995
1999
  }
@@ -2044,6 +2048,10 @@ select{
2044
2048
  max-width: 18rem;
2045
2049
  }
2046
2050
 
2051
+ .max-w-\[20px\]{
2052
+ max-width: 20px;
2053
+ }
2054
+
2047
2055
  .max-w-\[210px\]{
2048
2056
  max-width: 210px;
2049
2057
  }
@@ -2060,14 +2068,14 @@ select{
2060
2068
  max-width: 22rem;
2061
2069
  }
2062
2070
 
2063
- .max-w-\[240px\]{
2064
- max-width: 240px;
2065
- }
2066
-
2067
2071
  .max-w-\[242px\]{
2068
2072
  max-width: 242px;
2069
2073
  }
2070
2074
 
2075
+ .max-w-\[280px\]{
2076
+ max-width: 280px;
2077
+ }
2078
+
2071
2079
  .max-w-\[29\.18rem\]{
2072
2080
  max-width: 29.18rem;
2073
2081
  }
@@ -2146,12 +2154,8 @@ select{
2146
2154
  max-width: min-content;
2147
2155
  }
2148
2156
 
2149
- .max-w-\[280px\]{
2150
- max-width: 280px;
2151
- }
2152
-
2153
- .max-w-\[20px\]{
2154
- max-width: 20px;
2157
+ .max-w-\[518px\]{
2158
+ max-width: 518px;
2155
2159
  }
2156
2160
 
2157
2161
  .flex-1{
@@ -2252,6 +2256,18 @@ select{
2252
2256
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2253
2257
  }
2254
2258
 
2259
+ .translate-x-2{
2260
+ --tw-translate-x: 0.5rem;
2261
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2262
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2263
+ }
2264
+
2265
+ .translate-x-px{
2266
+ --tw-translate-x: 1px;
2267
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2268
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2269
+ }
2270
+
2255
2271
  .-rotate-45{
2256
2272
  --tw-rotate: -45deg;
2257
2273
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -5811,6 +5827,10 @@ select{
5811
5827
  fill: #6C737F;
5812
5828
  }
5813
5829
 
5830
+ .fill-neutral-800{
5831
+ fill: #1F2A37;
5832
+ }
5833
+
5814
5834
  .stroke-amber-100{
5815
5835
  stroke: #FFF3D4;
5816
5836
  }
@@ -6435,6 +6455,10 @@ select{
6435
6455
  padding-bottom: 2px;
6436
6456
  }
6437
6457
 
6458
+ .pb-0{
6459
+ padding-bottom: 0px;
6460
+ }
6461
+
6438
6462
  .pb-1{
6439
6463
  padding-bottom: 0.25rem;
6440
6464
  }
@@ -6487,6 +6511,10 @@ select{
6487
6511
  padding-bottom: 56.2%;
6488
6512
  }
6489
6513
 
6514
+ .pl-0{
6515
+ padding-left: 0px;
6516
+ }
6517
+
6490
6518
  .pl-1{
6491
6519
  padding-left: 0.25rem;
6492
6520
  }
@@ -6627,14 +6655,6 @@ select{
6627
6655
  padding-top: 81px;
6628
6656
  }
6629
6657
 
6630
- .pb-0{
6631
- padding-bottom: 0px;
6632
- }
6633
-
6634
- .pl-0{
6635
- padding-left: 0px;
6636
- }
6637
-
6638
6658
  .text-left{
6639
6659
  text-align: left;
6640
6660
  }
@@ -7478,6 +7498,10 @@ select{
7478
7498
  opacity: 0.6;
7479
7499
  }
7480
7500
 
7501
+ .mix-blend-multiply{
7502
+ mix-blend-mode: multiply;
7503
+ }
7504
+
7481
7505
  .shadow{
7482
7506
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
7483
7507
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -7610,6 +7634,42 @@ select{
7610
7634
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7611
7635
  }
7612
7636
 
7637
+ .brightness-0{
7638
+ --tw-brightness: brightness(0);
7639
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7640
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7641
+ }
7642
+
7643
+ .grayscale{
7644
+ --tw-grayscale: grayscale(100%);
7645
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7646
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7647
+ }
7648
+
7649
+ .grayscale-\[50\%\]{
7650
+ --tw-grayscale: grayscale(50%);
7651
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7652
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7653
+ }
7654
+
7655
+ .grayscale-\[30\%\]{
7656
+ --tw-grayscale: grayscale(30%);
7657
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7658
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7659
+ }
7660
+
7661
+ .grayscale-\[70\%\]{
7662
+ --tw-grayscale: grayscale(70%);
7663
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7664
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7665
+ }
7666
+
7667
+ .grayscale-\[\#1F2A37\]{
7668
+ --tw-grayscale: grayscale(#1F2A37);
7669
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7670
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7671
+ }
7672
+
7613
7673
  .filter{
7614
7674
  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7615
7675
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -7621,6 +7681,24 @@ select{
7621
7681
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7622
7682
  }
7623
7683
 
7684
+ .backdrop-brightness-50{
7685
+ --tw-backdrop-brightness: brightness(.5);
7686
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7687
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7688
+ }
7689
+
7690
+ .backdrop-grayscale{
7691
+ --tw-backdrop-grayscale: grayscale(100%);
7692
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7693
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7694
+ }
7695
+
7696
+ .backdrop-sepia-0{
7697
+ --tw-backdrop-sepia: sepia(0);
7698
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7699
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7700
+ }
7701
+
7624
7702
  .transition{
7625
7703
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
7626
7704
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -7673,6 +7751,10 @@ select{
7673
7751
  transition-duration: 350ms;
7674
7752
  }
7675
7753
 
7754
+ .duration-1000{
7755
+ transition-duration: 1000ms;
7756
+ }
7757
+
7676
7758
  .ease-in{
7677
7759
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
7678
7760
  }
@@ -9819,6 +9901,11 @@ select{
9819
9901
  background-color: rgb(133 77 24 / var(--tw-bg-opacity));
9820
9902
  }
9821
9903
 
9904
+ .hover\:bg-\[\#1F2A37\]:hover{
9905
+ --tw-bg-opacity: 1;
9906
+ background-color: rgb(31 42 55 / var(--tw-bg-opacity));
9907
+ }
9908
+
9822
9909
  .hover\:pl-\[9px\]:hover{
9823
9910
  padding-left: 9px;
9824
9911
  }
@@ -9878,6 +9965,17 @@ select{
9878
9965
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
9879
9966
  }
9880
9967
 
9968
+ .hover\:grayscale-0:hover{
9969
+ --tw-grayscale: grayscale(0);
9970
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
9971
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
9972
+ }
9973
+
9974
+ .hover\:filter-none:hover{
9975
+ -webkit-filter: none;
9976
+ filter: none;
9977
+ }
9978
+
9881
9979
  .hover\:transition:hover{
9882
9980
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
9883
9981
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -10392,12 +10490,32 @@ select{
10392
10490
  opacity: 0.3;
10393
10491
  }
10394
10492
 
10493
+ .group\/img:hover .group-hover\/img\:opacity-0{
10494
+ opacity: 0;
10495
+ }
10496
+
10497
+ .group\/img:hover .group-hover\/img\:opacity-100{
10498
+ opacity: 1;
10499
+ }
10500
+
10395
10501
  .group\/flyoutc:hover .group-hover\/flyoutc\:shadow-lg{
10396
10502
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
10397
10503
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
10398
10504
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
10399
10505
  }
10400
10506
 
10507
+ .group:hover .group-hover\:brightness-100{
10508
+ --tw-brightness: brightness(1);
10509
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
10510
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
10511
+ }
10512
+
10513
+ .group:hover .group-hover\:grayscale-0{
10514
+ --tw-grayscale: grayscale(0);
10515
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
10516
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
10517
+ }
10518
+
10401
10519
  .group:hover .group-hover\:transition-all{
10402
10520
  transition-property: all;
10403
10521
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -10586,10 +10704,6 @@ select{
10586
10704
  margin-left: 3.5rem;
10587
10705
  }
10588
10706
 
10589
- .tb\:mr-2{
10590
- margin-right: 0.5rem;
10591
- }
10592
-
10593
10707
  .tb\:mr-4{
10594
10708
  margin-right: 1rem;
10595
10709
  }
@@ -10644,14 +10758,6 @@ select{
10644
10758
  display: none;
10645
10759
  }
10646
10760
 
10647
- .tb\:h-8{
10648
- height: 2rem;
10649
- }
10650
-
10651
- .tb\:h-full{
10652
- height: 100%;
10653
- }
10654
-
10655
10761
  .tb\:h-5{
10656
10762
  height: 1.25rem;
10657
10763
  }
@@ -10660,6 +10766,14 @@ select{
10660
10766
  height: 1.5rem;
10661
10767
  }
10662
10768
 
10769
+ .tb\:h-8{
10770
+ height: 2rem;
10771
+ }
10772
+
10773
+ .tb\:h-full{
10774
+ height: 100%;
10775
+ }
10776
+
10663
10777
  .tb\:max-h-\[181px\]{
10664
10778
  max-height: 181px;
10665
10779
  }
@@ -10684,6 +10798,14 @@ select{
10684
10798
  width: 50%;
10685
10799
  }
10686
10800
 
10801
+ .tb\:w-5{
10802
+ width: 1.25rem;
10803
+ }
10804
+
10805
+ .tb\:w-6{
10806
+ width: 1.5rem;
10807
+ }
10808
+
10687
10809
  .tb\:w-8{
10688
10810
  width: 2rem;
10689
10811
  }
@@ -10706,14 +10828,6 @@ select{
10706
10828
  width: 100%;
10707
10829
  }
10708
10830
 
10709
- .tb\:w-5{
10710
- width: 1.25rem;
10711
- }
10712
-
10713
- .tb\:w-6{
10714
- width: 1.5rem;
10715
- }
10716
-
10717
10831
  .tb\:min-w-\[150px\]{
10718
10832
  min-width: 150px;
10719
10833
  }
@@ -10730,6 +10844,10 @@ select{
10730
10844
  min-width: 310px;
10731
10845
  }
10732
10846
 
10847
+ .tb\:min-w-\[32px\]{
10848
+ min-width: 32px;
10849
+ }
10850
+
10733
10851
  .tb\:min-w-\[396px\]{
10734
10852
  min-width: 396px;
10735
10853
  }
@@ -10738,10 +10856,6 @@ select{
10738
10856
  min-width: 500px;
10739
10857
  }
10740
10858
 
10741
- .tb\:min-w-\[32px\]{
10742
- min-width: 32px;
10743
- }
10744
-
10745
10859
  .tb\:max-w-\[17rem\]{
10746
10860
  max-width: 17rem;
10747
10861
  }
@@ -10762,6 +10876,10 @@ select{
10762
10876
  max-width: 290px;
10763
10877
  }
10764
10878
 
10879
+ .tb\:max-w-\[32px\]{
10880
+ max-width: 32px;
10881
+ }
10882
+
10765
10883
  .tb\:max-w-\[393px\]{
10766
10884
  max-width: 393px;
10767
10885
  }
@@ -10782,8 +10900,8 @@ select{
10782
10900
  max-width: 763px;
10783
10901
  }
10784
10902
 
10785
- .tb\:max-w-\[32px\]{
10786
- max-width: 32px;
10903
+ .tb\:max-w-\[420px\]{
10904
+ max-width: 420px;
10787
10905
  }
10788
10906
 
10789
10907
  .tb\:-translate-y-1\/2{
@@ -10965,6 +11083,11 @@ select{
10965
11083
  padding-right: 2.5rem;
10966
11084
  }
10967
11085
 
11086
+ .tb\:px-2{
11087
+ padding-left: 0.5rem;
11088
+ padding-right: 0.5rem;
11089
+ }
11090
+
10968
11091
  .tb\:px-3{
10969
11092
  padding-left: 0.75rem;
10970
11093
  padding-right: 0.75rem;
@@ -10990,11 +11113,6 @@ select{
10990
11113
  padding-bottom: 3.5rem;
10991
11114
  }
10992
11115
 
10993
- .tb\:px-2{
10994
- padding-left: 0.5rem;
10995
- padding-right: 0.5rem;
10996
- }
10997
-
10998
11116
  .tb\:py-2{
10999
11117
  padding-top: 0.5rem;
11000
11118
  padding-bottom: 0.5rem;
@@ -11024,10 +11142,6 @@ select{
11024
11142
  padding-right: 0px;
11025
11143
  }
11026
11144
 
11027
- .tb\:pr-2{
11028
- padding-right: 0.5rem;
11029
- }
11030
-
11031
11145
  .tb\:pr-4{
11032
11146
  padding-right: 1rem;
11033
11147
  }
@@ -11662,6 +11776,10 @@ select{
11662
11776
  max-width: 658px;
11663
11777
  }
11664
11778
 
11779
+ .tb-l\:max-w-7xl{
11780
+ max-width: 80rem;
11781
+ }
11782
+
11665
11783
  .tb-l\:grid-cols-2{
11666
11784
  grid-template-columns: repeat(2, minmax(0, 1fr));
11667
11785
  }
@@ -11926,6 +12044,10 @@ select{
11926
12044
  max-width: 717px;
11927
12045
  }
11928
12046
 
12047
+ .db-s\:max-w-\[650px\]{
12048
+ max-width: 650px;
12049
+ }
12050
+
11929
12051
  .db-s\:flex-row{
11930
12052
  flex-direction: row;
11931
12053
  }