pcm-shared-components 0.0.178 → 0.0.181
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,26 @@ 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
|
-
|
|
14
|
-
|
|
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
|
-
*/
|
|
42
|
-
|
|
11
|
+
import { makeStyles } from '@mui/styles';
|
|
12
|
+
const useStyles = makeStyles(() => ({
|
|
13
|
+
root: {
|
|
14
|
+
height: ({
|
|
15
|
+
tabHeight
|
|
16
|
+
}) => tabHeight,
|
|
17
|
+
minHeight: 24
|
|
18
|
+
}
|
|
19
|
+
}));
|
|
43
20
|
export const SimpleTab = props => {
|
|
44
|
-
const [selectedTabIdx, setSelectedTabIdx] = useState(0);
|
|
45
|
-
|
|
46
|
-
const handleSetIndex = value => {
|
|
47
|
-
setSelectedTabIdx(value);
|
|
48
|
-
};
|
|
49
|
-
|
|
50
21
|
const {
|
|
51
22
|
childrenTabs,
|
|
52
23
|
selectedTabIndex,
|
|
53
24
|
setSelectedTabIndex,
|
|
25
|
+
variant,
|
|
54
26
|
theme
|
|
55
|
-
} = props;
|
|
27
|
+
} = props;
|
|
28
|
+
const classes = useStyles({
|
|
29
|
+
tabHeight: variant === 'dense' ? 24 : 48
|
|
30
|
+
}); //Uses the default mui theme if none is passed.
|
|
56
31
|
|
|
57
32
|
const compTheme = theme ? theme : useTheme();
|
|
58
33
|
const defaultTheme = createTheme(compTheme);
|
|
@@ -68,32 +43,6 @@ export const SimpleTab = props => {
|
|
|
68
43
|
};
|
|
69
44
|
};
|
|
70
45
|
|
|
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
46
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
98
47
|
theme: defaultTheme
|
|
99
48
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -106,6 +55,7 @@ export const SimpleTab = props => {
|
|
|
106
55
|
backgroundColor: 'white'
|
|
107
56
|
}
|
|
108
57
|
}, /*#__PURE__*/React.createElement(Tabs, {
|
|
58
|
+
classes: classes,
|
|
109
59
|
value: selectedTabIndex,
|
|
110
60
|
onChange: handleChange,
|
|
111
61
|
indicatorColor: "primary",
|
|
@@ -114,6 +64,7 @@ export const SimpleTab = props => {
|
|
|
114
64
|
scrollButtons: "auto",
|
|
115
65
|
"aria-label": ""
|
|
116
66
|
}, childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(Tab, _extends({
|
|
67
|
+
classes: classes,
|
|
117
68
|
label: ct.tabTitle
|
|
118
69
|
}, a11yProps(idx), {
|
|
119
70
|
key: `simple_tabs_${idx}`
|
|
@@ -123,4 +74,34 @@ export const SimpleTab = props => {
|
|
|
123
74
|
key: `simple_tabs_panels_${idx}`
|
|
124
75
|
}, ct.tabPanel))));
|
|
125
76
|
};
|
|
126
|
-
export default SimpleTab;
|
|
77
|
+
export default SimpleTab;
|
|
78
|
+
SimpleTab.defaultProps = {
|
|
79
|
+
childrenTabs: [],
|
|
80
|
+
selectedTabIndex: 0,
|
|
81
|
+
setSelectedTabIndex: () => {},
|
|
82
|
+
variant: 'normal',
|
|
83
|
+
theme: undefined
|
|
84
|
+
};
|
|
85
|
+
SimpleTab.propTypes = {
|
|
86
|
+
/** An array of object that determines the tab title and tab content.
|
|
87
|
+
*
|
|
88
|
+
* - The childrenTabs are object withing an array
|
|
89
|
+
*
|
|
90
|
+
```
|
|
91
|
+
[{tabTitle:'something',tabPanel:<Object/>}]
|
|
92
|
+
```
|
|
93
|
+
*/
|
|
94
|
+
childrenTabs: PropTypes.array,
|
|
95
|
+
|
|
96
|
+
/** Controls the heigh and spacing of the tab control */
|
|
97
|
+
variant: PropTypes.oneOf(['dense', 'normal']),
|
|
98
|
+
|
|
99
|
+
/** Is the index value of the current selected tab */
|
|
100
|
+
selectedTabIndex: PropTypes.number,
|
|
101
|
+
|
|
102
|
+
/** The setter for selectedTabIndex: receives one parameter and it's the ```value``` of the index*/
|
|
103
|
+
setSelectedTabIndex: PropTypes.func,
|
|
104
|
+
|
|
105
|
+
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
|
|
106
|
+
theme: PropTypes.object
|
|
107
|
+
};
|
|
@@ -28,7 +28,6 @@ export const CurrencyTextInput = props => {
|
|
|
28
28
|
variant,
|
|
29
29
|
fullWidth,
|
|
30
30
|
onChange,
|
|
31
|
-
onChangeDebounce,
|
|
32
31
|
currencySymbol,
|
|
33
32
|
className,
|
|
34
33
|
decimalPlaces,
|
|
@@ -38,18 +37,13 @@ export const CurrencyTextInput = props => {
|
|
|
38
37
|
useThousandSeparator,
|
|
39
38
|
fontSize,
|
|
40
39
|
textPadding,
|
|
40
|
+
error,
|
|
41
|
+
helperText,
|
|
42
|
+
disabled,
|
|
41
43
|
theme
|
|
42
44
|
} = props;
|
|
43
45
|
const compTheme = theme ? theme : useTheme();
|
|
44
|
-
const defaultTheme = createTheme(compTheme);
|
|
45
|
-
|
|
46
|
-
const [localValue, setLocalValue] = useState(value);
|
|
47
|
-
useEffect(() => {
|
|
48
|
-
clearTimeout(debounce);
|
|
49
|
-
debounce = setTimeout(() => {
|
|
50
|
-
onChangeDebounce(localValue);
|
|
51
|
-
}, 700);
|
|
52
|
-
}, [localValue]); //---------------------------------------------------
|
|
46
|
+
const defaultTheme = createTheme(compTheme); //---------------------------------------------------
|
|
53
47
|
// Functions used to sanitize the number
|
|
54
48
|
//---------------------------------------------------
|
|
55
49
|
|
|
@@ -159,7 +153,8 @@ export const CurrencyTextInput = props => {
|
|
|
159
153
|
};
|
|
160
154
|
|
|
161
155
|
const handleOnChange = event => {
|
|
162
|
-
|
|
156
|
+
//Sanitize the output same as the input
|
|
157
|
+
event.target.value = handleCurrencyFormatting(event.target.value);
|
|
163
158
|
onChange(event);
|
|
164
159
|
};
|
|
165
160
|
|
|
@@ -168,6 +163,9 @@ export const CurrencyTextInput = props => {
|
|
|
168
163
|
}, /*#__PURE__*/React.createElement(TextField, {
|
|
169
164
|
id: id,
|
|
170
165
|
name: name,
|
|
166
|
+
error: error,
|
|
167
|
+
helperText: helperText,
|
|
168
|
+
disabled: disabled,
|
|
171
169
|
className: ` ${className}`,
|
|
172
170
|
fullWidth: fullWidth,
|
|
173
171
|
label: label,
|
|
@@ -200,7 +198,6 @@ CurrencyTextInput.defaultProps = {
|
|
|
200
198
|
variant: 'outlined',
|
|
201
199
|
fullWidth: true,
|
|
202
200
|
onChange: () => {},
|
|
203
|
-
onChangeDebounce: () => {},
|
|
204
201
|
currencySymbol: '$',
|
|
205
202
|
useThousandSeparator: true,
|
|
206
203
|
className: '',
|
|
@@ -210,6 +207,9 @@ CurrencyTextInput.defaultProps = {
|
|
|
210
207
|
textAlign: 'right',
|
|
211
208
|
fontSize: 16,
|
|
212
209
|
textPadding: 4,
|
|
210
|
+
error: false,
|
|
211
|
+
disabled: false,
|
|
212
|
+
helperText: '',
|
|
213
213
|
theme: undefined
|
|
214
214
|
};
|
|
215
215
|
CurrencyTextInput.propTypes = {
|
|
@@ -228,6 +228,15 @@ CurrencyTextInput.propTypes = {
|
|
|
228
228
|
/** Controls the look of the text field*/
|
|
229
229
|
variant: PropTypes.oneOf(['filled', 'outlined', 'standard']),
|
|
230
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
|
+
|
|
231
240
|
/** Determines if the text field will be full width or fit content*/
|
|
232
241
|
fullWidth: PropTypes.bool,
|
|
233
242
|
|
|
@@ -237,9 +246,6 @@ CurrencyTextInput.propTypes = {
|
|
|
237
246
|
/** Callback fired when the value is changed*/
|
|
238
247
|
onChange: PropTypes.func,
|
|
239
248
|
|
|
240
|
-
/** Same as onChange except only fires 700ms after the users has completed typing to prevent performance issues. Returns the new value */
|
|
241
|
-
onChangeDebounce: PropTypes.func,
|
|
242
|
-
|
|
243
249
|
/** Defines the currency symbol string.*/
|
|
244
250
|
currencySymbol: PropTypes.string,
|
|
245
251
|
|
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-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}}
|