hds-web 1.23.9 → 1.24.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 (9) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +2 -2
  4. package/dist/index.js +2 -2
  5. package/package.json +1 -1
  6. package/src/HDS/components/Buttons/button.js +8 -6
  7. package/src/HDS/components/Cards/Misc/talkcard2.js +4 -5
  8. package/src/HDS/components/Tabs/tab.js +24 -54
  9. package/src/styles/tailwind.css +41 -203
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.23.9",
3
+ "version": "1.24.1",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Buttons/button.js CHANGED
@@ -47,7 +47,7 @@ const Buttonclasses = {
47
47
  'default': {
48
48
  'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-neutral-0 text-neutral-0 ',
49
49
 
50
- 'hover': 'hover:text-neutral-0 hover:border-2 hover:border-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
50
+ 'hover': 'hover:text-neutral-0 hover:border-opacity-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
51
51
 
52
52
  'focus': 'focus:text-neutrak-0 focus:border-2 border-neutral-0 focus:outline-none focus:text-neutral-0',
53
53
  },
@@ -56,11 +56,11 @@ const Buttonclasses = {
56
56
 
57
57
  'ghost': {
58
58
  'default': {
59
- 'base': 'db:w-fit tb:w-fit w-full justify-center text-blue-600',
60
- 'hover': 'hover:bg-blue-100 hover:text-blue-600',
61
- 'focus': 'focus:text-blue-700 focus:outline-none',
59
+ 'base': 'db:w-fit tb:w-fit w-full justify-center text-neutral-0',
60
+ 'hover': ' ',
61
+ 'focus': 'focus:outline-none',
62
62
  },
63
- 'disabled': 'text-neutral-300',
63
+ 'disabled': ' bg-neutral-200 text-neutral-400',
64
64
  },
65
65
  'primaryLink': {
66
66
  'default': {
@@ -116,6 +116,7 @@ export default function Button(props) {
116
116
  btnTextColorClass,
117
117
  btnTextHoverClass,
118
118
  btnBgColorClass,
119
+ btnbgHoverClass,
119
120
  rightIconVariant,
120
121
  rightIconColor,
121
122
  leftIconVariant,
@@ -156,7 +157,8 @@ export default function Button(props) {
156
157
  'group',
157
158
  defaultClasses,
158
159
  className,
159
- HDSColor(btnTextHoverClass)
160
+ HDSColor(btnTextHoverClass),
161
+ HDSColor(btnbgHoverClass)
160
162
 
161
163
  ].join(' ');
162
164
 
package/src/HDS/components/Cards/Misc/talkcard2.js CHANGED
@@ -14,10 +14,9 @@ export default function TalkCard2(props) {
14
14
  }
15
15
  else CardClass = 'tb-l:justify-center';
16
16
 
17
-
18
17
  return (
19
18
 
20
- <div className="grid">
19
+ <a href={props.readUrl ?? '#'} className="grid group">
21
20
  <div className={`flex flex-col tb-l:flex-row tb-l:justify-between `}>
22
21
  <div className={"px-6 pt-6 tb-l:px-8 tb-l:pb-6 tb-l:border-r tb-l:border-r-neutral-200"}>
23
22
  <div className="flex flex-row flex-wrap tb:gap-3 gap-2">
@@ -52,7 +51,7 @@ export default function TalkCard2(props) {
52
51
  <div className="flex pb-6 tb-l:pb-0">
53
52
  {props.readUrl &&
54
53
  props.para && (
55
- <a href={props.readUrl}>
54
+ <div>
56
55
  <HDSButton
57
56
  label={props.videoUrl ? 'Watch Recording': 'Read more'}
58
57
  type='secondaryLink'
@@ -67,7 +66,7 @@ export default function TalkCard2(props) {
67
66
  animatedHoverStroke='stroke-blue-500'
68
67
  btnTextHoverClass='hover:text-blue-500'
69
68
  />
70
- </a>
69
+ </div>
71
70
  )}
72
71
  </div>
73
72
  </div>
@@ -112,7 +111,7 @@ export default function TalkCard2(props) {
112
111
  </div>}
113
112
  </div>
114
113
  </div>
115
- </div>
114
+ </a>
116
115
 
117
116
  )
118
117
 
package/src/HDS/components/Tabs/tab.js CHANGED
@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react';
2
2
  import { HDSColor } from '../../foundation/ColorPalette';
3
3
  import { Typography } from '../../foundation/Typography'
4
4
  import PropTypes from 'prop-types';
5
+ import { motion } from 'framer-motion';
5
6
 
6
7
  export default function Tab(props) {
7
8
  const {
@@ -9,77 +10,46 @@ export default function Tab(props) {
9
10
  onTabClick,
10
11
  pillColor,
11
12
  } = props;
12
- const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
13
- const pillRef = useRef(null);
13
+ const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current).name || tabs[0].name);
14
14
  let pillColorClass = '';
15
15
  if(pillColor){
16
16
  pillColorClass = HDSColor(pillColor);
17
17
  }
18
18
 
19
-
20
- const handleTabClick = (event, clickedTab) => {
21
- event.preventDefault();
22
- setActiveTab(clickedTab);
19
+ const handleTabClick = (clickedTab) => {
20
+ setActiveTab(clickedTab.name);
23
21
  if (onTabClick) {
24
22
  onTabClick(clickedTab);
25
23
  }
26
-
27
- // Move the pill indicator to the clicked tab
28
- const pill = pillRef.current;
29
- if (pill) {
30
- const pillWidth = event.currentTarget.offsetWidth;
31
- const clickedTabOffset = event.currentTarget.offsetLeft;
32
- const pillOffset = pill.parentElement.offsetLeft;
33
- const translateX = clickedTabOffset;
34
-
35
- pill.style.transform = `translateX(${translateX}px)`;
36
- pill.style.width = `${pillWidth}px`;
37
- }
24
+
38
25
  };
39
26
  let tabTextClass = '';
40
27
 
41
- function tabClass(name) {
42
- // console.log(currentTab['tabTextColorClass']);
43
-
44
- if(activeTab['tabTextColorClass']){
45
- tabTextClass = HDSColor(activeTab['tabTextColorClass']);
46
- }
47
- else tabTextClass = 'text-neutral-500'
48
-
49
- let classActive = ' text-neutral-0 transition-all rounded-full ' + pillColorClass;
50
- let clasnInActive = ' flex-nowrap rounded-full ' + tabTextClass;
51
- if (activeTab.name === name) {
52
- return classActive;
53
- }
54
- else {
55
- return clasnInActive;
56
- }
57
- }
58
28
  return (
59
- <div className=''>
60
- <div className="block">
61
- <nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
62
- {tabs.map(tab => (
63
- <div
29
+ <div className="">
30
+ <div className="block ">
31
+ <nav className="relative inline-flex gap-2 rounded-[32px] " aria-label="Tabs">
32
+ {tabs.map((tab) => (
33
+ <button
64
34
  key={tab.name}
65
- onClick={(event) => handleTabClick(event, tab)}
35
+ onClick={() => {
36
+ handleTabClick(tab);
37
+ }}
38
+ className={`${activeTab === tab.name ? ' text-neutral-0' : 'hover:text-neutral-0 hover:bg-neutral-0/20 text-neutral-300'} relative px-3 py-1 whitespace-nowrap rounded-full`}
66
39
  >
67
- <Typography
68
- className={`${tabClass(tab.name)} ${tab.name === activeTab.name ? '' : 'hover:bg-neutral-150'} cursor-pointer px-3 py-1 z-[2] relative whitespace-nowrap`}
69
- textStyle='body3c-medium'>
40
+ {activeTab === tab.name && (
41
+ <motion.div
42
+ layoutId="active-pill"
43
+ className={`absolute inset-0 ${pillColorClass}`}
44
+ style={{ borderRadius: 32 }}
45
+
46
+ />
47
+ )}
48
+ <Typography textStyle="body3c-medium" className="relative z-10 text-neutral-0 ">
70
49
  {tab.name}
71
50
  </Typography>
72
- </div>
51
+ </button>
73
52
  ))}
74
- <span
75
- ref={pillRef}
76
- className={`absolute left-0 z-[1] ${pillColorClass} rounded-full transition-all ease-in duration-150`}
77
- style={{
78
- left: `${activeTab.index * 100}%`,
79
- width: `${activeTab.width}px`, // Use the width of the clicked tab
80
- height: '28px' // Add desired height to make the pill visible
81
- }}
82
- />
83
53
  </nav>
84
54
  </div>
85
55
  </div>
package/src/styles/tailwind.css CHANGED
@@ -1277,6 +1277,10 @@ select{
1277
1277
  margin-left: -0.375rem;
1278
1278
  }
1279
1279
 
1280
+ .-ml-2{
1281
+ margin-left: -0.5rem;
1282
+ }
1283
+
1280
1284
  .-ml-3{
1281
1285
  margin-left: -0.75rem;
1282
1286
  }
@@ -1493,10 +1497,6 @@ select{
1493
1497
  margin-top: 70px;
1494
1498
  }
1495
1499
 
1496
- .-ml-2{
1497
- margin-left: -0.5rem;
1498
- }
1499
-
1500
1500
  .line-clamp-3{
1501
1501
  overflow: hidden;
1502
1502
  display: -webkit-box;
@@ -1672,8 +1672,8 @@ select{
1672
1672
  height: 700px;
1673
1673
  }
1674
1674
 
1675
- .h-\[718px\]{
1676
- height: 718px;
1675
+ .h-\[800px\]{
1676
+ height: 800px;
1677
1677
  }
1678
1678
 
1679
1679
  .h-\[80px\]{
@@ -1708,10 +1708,6 @@ select{
1708
1708
  height: 100vh;
1709
1709
  }
1710
1710
 
1711
- .h-\[800px\]{
1712
- height: 800px;
1713
- }
1714
-
1715
1711
  .max-h-\[181px\]{
1716
1712
  max-height: 181px;
1717
1713
  }
@@ -1724,14 +1720,14 @@ select{
1724
1720
  max-height: 26.25;
1725
1721
  }
1726
1722
 
1727
- .max-h-\[28px\]{
1728
- max-height: 28px;
1729
- }
1730
-
1731
1723
  .max-h-\[40px\]{
1732
1724
  max-height: 40px;
1733
1725
  }
1734
1726
 
1727
+ .max-h-\[44px\]{
1728
+ max-height: 44px;
1729
+ }
1730
+
1735
1731
  .max-h-\[530px\]{
1736
1732
  max-height: 530px;
1737
1733
  }
@@ -1748,18 +1744,6 @@ select{
1748
1744
  max-height: 100vh;
1749
1745
  }
1750
1746
 
1751
- .max-h-\[34px\]{
1752
- max-height: 34px;
1753
- }
1754
-
1755
- .max-h-\[44px\]{
1756
- max-height: 44px;
1757
- }
1758
-
1759
- .max-h-\[50px\]{
1760
- max-height: 50px;
1761
- }
1762
-
1763
1747
  .min-h-\[12px\]{
1764
1748
  min-height: 12px;
1765
1749
  }
@@ -1796,22 +1780,6 @@ select{
1796
1780
  min-height: 64px;
1797
1781
  }
1798
1782
 
1799
- .min-h-\[518px\]{
1800
- min-height: 518px;
1801
- }
1802
-
1803
- .min-h-\[839px\]{
1804
- min-height: 839px;
1805
- }
1806
-
1807
- .min-h-\[855px\]{
1808
- min-height: 855px;
1809
- }
1810
-
1811
- .min-h-\[200px\]{
1812
- min-height: 200px;
1813
- }
1814
-
1815
1783
  .min-h-\[742px\]{
1816
1784
  min-height: 742px;
1817
1785
  }
@@ -2104,10 +2072,6 @@ select{
2104
2072
  max-width: 242px;
2105
2073
  }
2106
2074
 
2107
- .max-w-\[280px\]{
2108
- max-width: 280px;
2109
- }
2110
-
2111
2075
  .max-w-\[29\.18rem\]{
2112
2076
  max-width: 29.18rem;
2113
2077
  }
@@ -2148,6 +2112,10 @@ select{
2148
2112
  max-width: 460px;
2149
2113
  }
2150
2114
 
2115
+ .max-w-\[518px\]{
2116
+ max-width: 518px;
2117
+ }
2118
+
2151
2119
  .max-w-\[583px\]{
2152
2120
  max-width: 583px;
2153
2121
  }
@@ -2186,10 +2154,6 @@ select{
2186
2154
  max-width: min-content;
2187
2155
  }
2188
2156
 
2189
- .max-w-\[518px\]{
2190
- max-width: 518px;
2191
- }
2192
-
2193
2157
  .flex-1{
2194
2158
  flex: 1 1 0%;
2195
2159
  }
@@ -2288,18 +2252,6 @@ select{
2288
2252
  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));
2289
2253
  }
2290
2254
 
2291
- .translate-x-2{
2292
- --tw-translate-x: 0.5rem;
2293
- -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));
2294
- 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));
2295
- }
2296
-
2297
- .translate-x-px{
2298
- --tw-translate-x: 1px;
2299
- -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));
2300
- 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));
2301
- }
2302
-
2303
2255
  .-rotate-45{
2304
2256
  --tw-rotate: -45deg;
2305
2257
  -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));
@@ -5859,10 +5811,6 @@ select{
5859
5811
  fill: #6C737F;
5860
5812
  }
5861
5813
 
5862
- .fill-neutral-800{
5863
- fill: #1F2A37;
5864
- }
5865
-
5866
5814
  .stroke-amber-100{
5867
5815
  stroke: #FFF3D4;
5868
5816
  }
@@ -6687,10 +6635,6 @@ select{
6687
6635
  padding-top: 81px;
6688
6636
  }
6689
6637
 
6690
- .pt-1{
6691
- padding-top: 0.25rem;
6692
- }
6693
-
6694
6638
  .text-left{
6695
6639
  text-align: left;
6696
6640
  }
@@ -7534,10 +7478,6 @@ select{
7534
7478
  opacity: 0.6;
7535
7479
  }
7536
7480
 
7537
- .mix-blend-multiply{
7538
- mix-blend-mode: multiply;
7539
- }
7540
-
7541
7481
  .shadow{
7542
7482
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
7543
7483
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -7676,36 +7616,6 @@ select{
7676
7616
  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);
7677
7617
  }
7678
7618
 
7679
- .grayscale{
7680
- --tw-grayscale: grayscale(100%);
7681
- -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);
7682
- 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);
7683
- }
7684
-
7685
- .grayscale-\[50\%\]{
7686
- --tw-grayscale: grayscale(50%);
7687
- -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);
7688
- 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);
7689
- }
7690
-
7691
- .grayscale-\[30\%\]{
7692
- --tw-grayscale: grayscale(30%);
7693
- -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);
7694
- 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);
7695
- }
7696
-
7697
- .grayscale-\[70\%\]{
7698
- --tw-grayscale: grayscale(70%);
7699
- -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);
7700
- 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);
7701
- }
7702
-
7703
- .grayscale-\[\#1F2A37\]{
7704
- --tw-grayscale: grayscale(#1F2A37);
7705
- -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);
7706
- 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);
7707
- }
7708
-
7709
7619
  .filter{
7710
7620
  -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);
7711
7621
  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);
@@ -7717,24 +7627,6 @@ select{
7717
7627
  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);
7718
7628
  }
7719
7629
 
7720
- .backdrop-brightness-50{
7721
- --tw-backdrop-brightness: brightness(.5);
7722
- -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);
7723
- 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);
7724
- }
7725
-
7726
- .backdrop-grayscale{
7727
- --tw-backdrop-grayscale: grayscale(100%);
7728
- -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);
7729
- 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);
7730
- }
7731
-
7732
- .backdrop-sepia-0{
7733
- --tw-backdrop-sepia: sepia(0);
7734
- -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);
7735
- 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);
7736
- }
7737
-
7738
7630
  .transition{
7739
7631
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
7740
7632
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -7763,6 +7655,10 @@ select{
7763
7655
  transition-duration: 0s;
7764
7656
  }
7765
7657
 
7658
+ .duration-1000{
7659
+ transition-duration: 1000ms;
7660
+ }
7661
+
7766
7662
  .duration-150{
7767
7663
  transition-duration: 150ms;
7768
7664
  }
@@ -7787,10 +7683,6 @@ select{
7787
7683
  transition-duration: 350ms;
7788
7684
  }
7789
7685
 
7790
- .duration-1000{
7791
- transition-duration: 1000ms;
7792
- }
7793
-
7794
7686
  .ease-in{
7795
7687
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
7796
7688
  }
@@ -9937,9 +9829,8 @@ select{
9937
9829
  background-color: rgb(133 77 24 / var(--tw-bg-opacity));
9938
9830
  }
9939
9831
 
9940
- .hover\:bg-\[\#1F2A37\]:hover{
9941
- --tw-bg-opacity: 1;
9942
- background-color: rgb(31 42 55 / var(--tw-bg-opacity));
9832
+ .hover\:bg-neutral-0\/20:hover{
9833
+ background-color: rgb(255 255 255 / 0.2);
9943
9834
  }
9944
9835
 
9945
9836
  .hover\:pl-\[9px\]:hover{
@@ -10001,17 +9892,6 @@ select{
10001
9892
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
10002
9893
  }
10003
9894
 
10004
- .hover\:grayscale-0:hover{
10005
- --tw-grayscale: grayscale(0);
10006
- -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);
10007
- 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);
10008
- }
10009
-
10010
- .hover\:filter-none:hover{
10011
- -webkit-filter: none;
10012
- filter: none;
10013
- }
10014
-
10015
9895
  .hover\:transition:hover{
10016
9896
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
10017
9897
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -10518,14 +10398,6 @@ select{
10518
10398
  color: rgb(0 6 21 / var(--tw-text-opacity));
10519
10399
  }
10520
10400
 
10521
- .group\/sc:hover .group-hover\/sc\:opacity-100{
10522
- opacity: 1;
10523
- }
10524
-
10525
- .group:hover .group-hover\:opacity-30{
10526
- opacity: 0.3;
10527
- }
10528
-
10529
10401
  .group\/img:hover .group-hover\/img\:opacity-0{
10530
10402
  opacity: 0;
10531
10403
  }
@@ -10534,6 +10406,14 @@ select{
10534
10406
  opacity: 1;
10535
10407
  }
10536
10408
 
10409
+ .group\/sc:hover .group-hover\/sc\:opacity-100{
10410
+ opacity: 1;
10411
+ }
10412
+
10413
+ .group:hover .group-hover\:opacity-30{
10414
+ opacity: 0.3;
10415
+ }
10416
+
10537
10417
  .group\/flyoutc:hover .group-hover\/flyoutc\:shadow-lg{
10538
10418
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
10539
10419
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -10546,12 +10426,6 @@ select{
10546
10426
  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);
10547
10427
  }
10548
10428
 
10549
- .group:hover .group-hover\:grayscale-0{
10550
- --tw-grayscale: grayscale(0);
10551
- -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);
10552
- 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);
10553
- }
10554
-
10555
10429
  .group:hover .group-hover\:transition-all{
10556
10430
  transition-property: all;
10557
10431
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -10868,8 +10742,8 @@ select{
10868
10742
  min-width: 150px;
10869
10743
  }
10870
10744
 
10871
- .tb\:min-w-\[182px\]{
10872
- min-width: 182px;
10745
+ .tb\:min-w-\[186px\]{
10746
+ min-width: 186px;
10873
10747
  }
10874
10748
 
10875
10749
  .tb\:min-w-\[18rem\]{
@@ -10892,18 +10766,6 @@ select{
10892
10766
  min-width: 500px;
10893
10767
  }
10894
10768
 
10895
- .tb\:min-w-\[185px\]{
10896
- min-width: 185px;
10897
- }
10898
-
10899
- .tb\:min-w-\[200px\]{
10900
- min-width: 200px;
10901
- }
10902
-
10903
- .tb\:min-w-\[186px\]{
10904
- min-width: 186px;
10905
- }
10906
-
10907
10769
  .tb\:max-w-\[17rem\]{
10908
10770
  max-width: 17rem;
10909
10771
  }
@@ -10932,6 +10794,10 @@ select{
10932
10794
  max-width: 393px;
10933
10795
  }
10934
10796
 
10797
+ .tb\:max-w-\[420px\]{
10798
+ max-width: 420px;
10799
+ }
10800
+
10935
10801
  .tb\:max-w-\[480px\]{
10936
10802
  max-width: 480px;
10937
10803
  }
@@ -10948,10 +10814,6 @@ select{
10948
10814
  max-width: 763px;
10949
10815
  }
10950
10816
 
10951
- .tb\:max-w-\[420px\]{
10952
- max-width: 420px;
10953
- }
10954
-
10955
10817
  .tb\:-translate-y-1\/2{
10956
10818
  --tw-translate-y: -50%;
10957
10819
  -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));
@@ -11151,6 +11013,11 @@ select{
11151
11013
  padding-right: 2rem;
11152
11014
  }
11153
11015
 
11016
+ .tb\:py-1{
11017
+ padding-top: 0.25rem;
11018
+ padding-bottom: 0.25rem;
11019
+ }
11020
+
11154
11021
  .tb\:py-12{
11155
11022
  padding-top: 3rem;
11156
11023
  padding-bottom: 3rem;
@@ -11166,11 +11033,6 @@ select{
11166
11033
  padding-bottom: 0.5rem;
11167
11034
  }
11168
11035
 
11169
- .tb\:py-1{
11170
- padding-top: 0.25rem;
11171
- padding-bottom: 0.25rem;
11172
- }
11173
-
11174
11036
  .tb\:pb-0{
11175
11037
  padding-bottom: 0px;
11176
11038
  }
@@ -11767,14 +11629,6 @@ select{
11767
11629
  height: 100%;
11768
11630
  }
11769
11631
 
11770
- .tb-l\:min-h-\[676px\]{
11771
- min-height: 676px;
11772
- }
11773
-
11774
- .tb-l\:min-h-\[224px\]{
11775
- min-height: 224px;
11776
- }
11777
-
11778
11632
  .tb-l\:min-h-\[518px\]{
11779
11633
  min-height: 518px;
11780
11634
  }
@@ -11821,8 +11675,8 @@ select{
11821
11675
  min-width: 700px;
11822
11676
  }
11823
11677
 
11824
- .tb-l\:min-w-\[518px\]{
11825
- min-width: 518px;
11678
+ .tb-l\:max-w-7xl{
11679
+ max-width: 80rem;
11826
11680
  }
11827
11681
 
11828
11682
  .tb-l\:max-w-\[1240px\]{
@@ -11845,10 +11699,6 @@ select{
11845
11699
  max-width: 658px;
11846
11700
  }
11847
11701
 
11848
- .tb-l\:max-w-7xl{
11849
- max-width: 80rem;
11850
- }
11851
-
11852
11702
  .tb-l\:grid-cols-2{
11853
11703
  grid-template-columns: repeat(2, minmax(0, 1fr));
11854
11704
  }
@@ -11861,10 +11711,6 @@ select{
11861
11711
  flex-direction: column;
11862
11712
  }
11863
11713
 
11864
- .tb-l\:flex-col-reverse{
11865
- flex-direction: column-reverse;
11866
- }
11867
-
11868
11714
  .tb-l\:items-center{
11869
11715
  align-items: center;
11870
11716
  }
@@ -12026,10 +11872,6 @@ select{
12026
11872
  padding-top: 0px;
12027
11873
  }
12028
11874
 
12029
- .tb-l\:pt-20{
12030
- padding-top: 5rem;
12031
- }
12032
-
12033
11875
  .tb-l\:pt-14{
12034
11876
  padding-top: 3.5rem;
12035
11877
  }
@@ -12117,10 +11959,6 @@ select{
12117
11959
  max-width: 540px;
12118
11960
  }
12119
11961
 
12120
- .db-s\:max-w-\[717px\]{
12121
- max-width: 717px;
12122
- }
12123
-
12124
11962
  .db-s\:max-w-\[650px\]{
12125
11963
  max-width: 650px;
12126
11964
  }