pcm-shared-components 0.0.179 → 0.0.182
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.
|
@@ -8,51 +8,41 @@ import Tab from '@mui/material/Tab';
|
|
|
8
8
|
import { ThemeProvider } from '@mui/system';
|
|
9
9
|
import { createTheme, useTheme } from '@mui/material/styles';
|
|
10
10
|
import TabPanel from './components/TabPanel';
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
import { makeStyles } from '@mui/styles';
|
|
12
|
+
const useStyles = makeStyles(() => ({
|
|
13
|
+
root: {
|
|
14
|
+
height: ({
|
|
15
|
+
tabHeight
|
|
16
|
+
}) => tabHeight,
|
|
17
|
+
minHeight: ({
|
|
18
|
+
tabHeight
|
|
19
|
+
}) => tabHeight,
|
|
20
|
+
backgroundColor: 'transparent' // textTransform: 'none', //changes so the text is not upper cased
|
|
21
|
+
// color: 'white !important',
|
|
22
|
+
// '&:focus': {
|
|
23
|
+
// color: 'orange !important',
|
|
24
|
+
// },
|
|
14
25
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### Using the component
|
|
22
|
-
Note: the tab index id and setter for the id are managed by the parent component.
|
|
23
|
-
```//PitchCamp shared component
|
|
24
|
-
<SimpleTab
|
|
25
|
-
childrenTabs:
|
|
26
|
-
[
|
|
27
|
-
{
|
|
28
|
-
tabTitle: 'Tab one',
|
|
29
|
-
tabPanel: <>This is tab one</>
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
tabTitle: 'Tab two',
|
|
33
|
-
tabPanel: <>This is tab Two</>
|
|
34
|
-
}
|
|
35
|
-
],
|
|
36
|
-
selectedTabIndex: selectedTabIdx,
|
|
37
|
-
setSelectedTabIndex: handleSetIndex,
|
|
38
|
-
/>
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
*/
|
|
26
|
+
},
|
|
27
|
+
indicator: {
|
|
28
|
+
height: 3,
|
|
29
|
+
borderRadius: 25 // backgroundColor: 'orange',
|
|
42
30
|
|
|
31
|
+
}
|
|
32
|
+
}));
|
|
43
33
|
export const SimpleTab = props => {
|
|
44
|
-
const [selectedTabIdx, setSelectedTabIdx] = useState(0);
|
|
45
|
-
|
|
46
|
-
const handleSetIndex = value => {
|
|
47
|
-
setSelectedTabIdx(value);
|
|
48
|
-
};
|
|
49
|
-
|
|
50
34
|
const {
|
|
51
35
|
childrenTabs,
|
|
52
36
|
selectedTabIndex,
|
|
53
37
|
setSelectedTabIndex,
|
|
38
|
+
variant,
|
|
39
|
+
tabStyles,
|
|
40
|
+
tabsWrapperClassName,
|
|
54
41
|
theme
|
|
55
|
-
} = props;
|
|
42
|
+
} = props;
|
|
43
|
+
const classes = useStyles({
|
|
44
|
+
tabHeight: variant === 'dense' ? 24 : 48
|
|
45
|
+
}); //Uses the default mui theme if none is passed.
|
|
56
46
|
|
|
57
47
|
const compTheme = theme ? theme : useTheme();
|
|
58
48
|
const defaultTheme = createTheme(compTheme);
|
|
@@ -68,44 +58,18 @@ export const SimpleTab = props => {
|
|
|
68
58
|
};
|
|
69
59
|
};
|
|
70
60
|
|
|
71
|
-
SimpleTab.defaultProps = {
|
|
72
|
-
childrenTabs: [],
|
|
73
|
-
selectedTabIndex: selectedTabIdx,
|
|
74
|
-
setSelectedTabIndex: handleSetIndex,
|
|
75
|
-
theme: undefined
|
|
76
|
-
};
|
|
77
|
-
SimpleTab.propTypes = {
|
|
78
|
-
/** An array of object that determines the tab title and tab content.
|
|
79
|
-
*
|
|
80
|
-
* - The childrenTabs are object withing an array
|
|
81
|
-
*
|
|
82
|
-
```
|
|
83
|
-
[{tabTitle:'something',tabPanel:<Object/>}]
|
|
84
|
-
```
|
|
85
|
-
*/
|
|
86
|
-
childrenTabs: PropTypes.array,
|
|
87
|
-
|
|
88
|
-
/** Is the index value of the current selected tab */
|
|
89
|
-
selectedTabIndex: PropTypes.number,
|
|
90
|
-
|
|
91
|
-
/** The setter for selectedTabIndex: receives one parameter and it's the ```value``` of the index*/
|
|
92
|
-
setSelectedTabIndex: PropTypes.func,
|
|
93
|
-
|
|
94
|
-
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
|
|
95
|
-
theme: PropTypes.object
|
|
96
|
-
};
|
|
97
61
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
98
62
|
theme: defaultTheme
|
|
99
63
|
}, /*#__PURE__*/React.createElement("div", {
|
|
100
|
-
className: "flex flex-col w-full h-full overflow-hidden"
|
|
64
|
+
className: "flex flex-col w-full h-full overflow-hidden "
|
|
101
65
|
}, /*#__PURE__*/React.createElement(AppBar, {
|
|
102
66
|
position: "static",
|
|
103
67
|
color: "default",
|
|
104
|
-
elevation: 0
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
68
|
+
elevation: 0
|
|
69
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
70
|
+
className: tabsWrapperClassName
|
|
108
71
|
}, /*#__PURE__*/React.createElement(Tabs, {
|
|
72
|
+
classes: classes,
|
|
109
73
|
value: selectedTabIndex,
|
|
110
74
|
onChange: handleChange,
|
|
111
75
|
indicatorColor: "primary",
|
|
@@ -114,13 +78,59 @@ export const SimpleTab = props => {
|
|
|
114
78
|
scrollButtons: "auto",
|
|
115
79
|
"aria-label": ""
|
|
116
80
|
}, childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(Tab, _extends({
|
|
81
|
+
classes: classes,
|
|
82
|
+
style: tabStyles,
|
|
117
83
|
label: ct.tabTitle
|
|
118
84
|
}, a11yProps(idx), {
|
|
119
85
|
key: `simple_tabs_${idx}`
|
|
120
|
-
}))))), childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(TabPanel, {
|
|
86
|
+
})))))), childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(TabPanel, {
|
|
121
87
|
value: selectedTabIndex,
|
|
122
88
|
index: idx,
|
|
123
89
|
key: `simple_tabs_panels_${idx}`
|
|
124
90
|
}, ct.tabPanel))));
|
|
125
91
|
};
|
|
126
|
-
export default SimpleTab;
|
|
92
|
+
export default SimpleTab;
|
|
93
|
+
SimpleTab.defaultProps = {
|
|
94
|
+
childrenTabs: [],
|
|
95
|
+
selectedTabIndex: 0,
|
|
96
|
+
setSelectedTabIndex: () => {},
|
|
97
|
+
variant: 'normal',
|
|
98
|
+
tabStyles: {},
|
|
99
|
+
tabsWrapperClassName: ' bg-white ',
|
|
100
|
+
theme: undefined
|
|
101
|
+
};
|
|
102
|
+
SimpleTab.propTypes = {
|
|
103
|
+
/** An array of object that determines the tab title and tab content.
|
|
104
|
+
*
|
|
105
|
+
* - The childrenTabs are object withing an array
|
|
106
|
+
*
|
|
107
|
+
```
|
|
108
|
+
[{tabTitle:'something',tabPanel:<Object/>}]
|
|
109
|
+
```
|
|
110
|
+
*/
|
|
111
|
+
childrenTabs: PropTypes.array,
|
|
112
|
+
|
|
113
|
+
/** Controls the heigh and spacing of the tab control */
|
|
114
|
+
variant: PropTypes.oneOf(['dense', 'normal']),
|
|
115
|
+
|
|
116
|
+
/** Is the index value of the current selected tab */
|
|
117
|
+
selectedTabIndex: PropTypes.number,
|
|
118
|
+
|
|
119
|
+
/** The setter for selectedTabIndex: receives one parameter and it's the ```value``` of the index*/
|
|
120
|
+
setSelectedTabIndex: PropTypes.func,
|
|
121
|
+
|
|
122
|
+
/** Additional classes passed to the Div wrapper of the <Tabs></Tabs> component.
|
|
123
|
+
* Example:
|
|
124
|
+
* - Center tabs 'flex flex-row justify-center w-full'
|
|
125
|
+
* - Right tabs 'flex flex-row justify-end w-full'
|
|
126
|
+
* - Gray background 'bg-gray-200'
|
|
127
|
+
*/
|
|
128
|
+
tabsWrapperClassName: PropTypes.string,
|
|
129
|
+
|
|
130
|
+
/** Additional styles to be applied to the Tab component
|
|
131
|
+
* Example: {margin:'auto'} */
|
|
132
|
+
tabStyles: PropTypes.object,
|
|
133
|
+
|
|
134
|
+
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
|
|
135
|
+
theme: PropTypes.object
|
|
136
|
+
};
|
|
@@ -37,6 +37,9 @@ export const CurrencyTextInput = props => {
|
|
|
37
37
|
useThousandSeparator,
|
|
38
38
|
fontSize,
|
|
39
39
|
textPadding,
|
|
40
|
+
error,
|
|
41
|
+
helperText,
|
|
42
|
+
disabled,
|
|
40
43
|
theme
|
|
41
44
|
} = props;
|
|
42
45
|
const compTheme = theme ? theme : useTheme();
|
|
@@ -160,6 +163,9 @@ export const CurrencyTextInput = props => {
|
|
|
160
163
|
}, /*#__PURE__*/React.createElement(TextField, {
|
|
161
164
|
id: id,
|
|
162
165
|
name: name,
|
|
166
|
+
error: error,
|
|
167
|
+
helperText: helperText,
|
|
168
|
+
disabled: disabled,
|
|
163
169
|
className: ` ${className}`,
|
|
164
170
|
fullWidth: fullWidth,
|
|
165
171
|
label: label,
|
|
@@ -201,6 +207,9 @@ CurrencyTextInput.defaultProps = {
|
|
|
201
207
|
textAlign: 'right',
|
|
202
208
|
fontSize: 16,
|
|
203
209
|
textPadding: 4,
|
|
210
|
+
error: false,
|
|
211
|
+
disabled: false,
|
|
212
|
+
helperText: '',
|
|
204
213
|
theme: undefined
|
|
205
214
|
};
|
|
206
215
|
CurrencyTextInput.propTypes = {
|
|
@@ -219,6 +228,15 @@ CurrencyTextInput.propTypes = {
|
|
|
219
228
|
/** Controls the look of the text field*/
|
|
220
229
|
variant: PropTypes.oneOf(['filled', 'outlined', 'standard']),
|
|
221
230
|
|
|
231
|
+
/** Determines if the text field will be in an error state*/
|
|
232
|
+
error: PropTypes.bool,
|
|
233
|
+
|
|
234
|
+
/** Determines if the text field is disabled of not*/
|
|
235
|
+
disabled: PropTypes.bool,
|
|
236
|
+
|
|
237
|
+
/** Helper text to display below the field*/
|
|
238
|
+
helperText: PropTypes.string,
|
|
239
|
+
|
|
222
240
|
/** Determines if the text field will be full width or fit content*/
|
|
223
241
|
fullWidth: PropTypes.bool,
|
|
224
242
|
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-4{margin-top:.4rem;margin-bottom:.4rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mr-12{margin-right:1.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mb-24{margin-bottom:2.4rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.
|
|
1
|
+
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-4{margin-top:.4rem;margin-bottom:.4rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mr-12{margin-right:1.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mb-24{margin-bottom:2.4rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-auto{width:auto}.w-1\/2{width:50%}.w-2\/5{width:40%}.grow{flex-grow:1}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{overscroll-behavior:none}.rounded{border-radius:.4rem}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-2{border-width:2px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity))}.bg-yellow-100\/50{background-color:#fff9c480}.p-6{padding:.6rem}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pt-12{padding-top:1.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pb-4{padding-bottom:.4rem}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-2xl{line-height:3.2rem}.text-24,.text-2xl{font-size:2.4rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.drop-shadow-none,.filter{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)}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (min-width:960px){.md\:pt-0{padding-top:0}}
|