pcm-shared-components 0.0.76 → 0.0.80
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/components/Layout/SimpleTab/components/TabPanel.js +31 -0
- package/dist/components/Layout/SimpleTab/index.js +126 -0
- package/dist/components/Layout/TwoColumnDisplay/index.js +3 -2
- package/dist/components/Links/HrefLink/index.js +67 -0
- package/dist/index.js +3 -1
- package/dist/styles/tailwind.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import PropTypes from 'prop-types'; //Custom tab panel allow me to specify the styles needed to ensure I can hide the overflow or else I'm having a hard time getting the panel to work without a scroll band
|
|
5
|
+
|
|
6
|
+
const TabPanel = props => {
|
|
7
|
+
const {
|
|
8
|
+
children,
|
|
9
|
+
value,
|
|
10
|
+
index,
|
|
11
|
+
...other
|
|
12
|
+
} = props;
|
|
13
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
14
|
+
role: "tabpanel",
|
|
15
|
+
hidden: value !== index,
|
|
16
|
+
id: `scrollable-auto-tabpanel-${index}`,
|
|
17
|
+
"aria-labelledby": `scrollable-auto-tab-${index}`
|
|
18
|
+
}, other, {
|
|
19
|
+
className: "w-full h-full overflow-hidden",
|
|
20
|
+
style: {}
|
|
21
|
+
}), value === index && /*#__PURE__*/React.createElement("div", {
|
|
22
|
+
className: "w-full h-full"
|
|
23
|
+
}, children));
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export default TabPanel;
|
|
27
|
+
TabPanel.propTypes = {
|
|
28
|
+
children: PropTypes.node,
|
|
29
|
+
index: PropTypes.any.isRequired,
|
|
30
|
+
value: PropTypes.any.isRequired
|
|
31
|
+
};
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React, { useState } from 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import AppBar from '@mui/material/AppBar';
|
|
6
|
+
import Tabs from '@mui/material/Tabs';
|
|
7
|
+
import Tab from '@mui/material/Tab';
|
|
8
|
+
import { ThemeProvider } from '@mui/system';
|
|
9
|
+
import { createTheme, useTheme } from '@mui/material/styles';
|
|
10
|
+
import TabPanel from './components/TabPanel';
|
|
11
|
+
/**
|
|
12
|
+
Simple Tabs: simplifies the process of adding a tab panel with multiple contents
|
|
13
|
+
| tab1 | tab2 | tab3 | etc... |
|
|
14
|
+
|
|
15
|
+
* ### Importing the component
|
|
16
|
+
|
|
17
|
+
```//PitchCamp shared component
|
|
18
|
+
import {SimpleTab} from 'pcm-shared-components';
|
|
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
|
+
|
|
43
|
+
export const SimpleTab = props => {
|
|
44
|
+
const [selectedTabIdx, setSelectedTabIdx] = useState(0);
|
|
45
|
+
|
|
46
|
+
const handleSetIndex = value => {
|
|
47
|
+
setSelectedTabIdx(value);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
const {
|
|
51
|
+
childrenTabs,
|
|
52
|
+
selectedTabIndex,
|
|
53
|
+
setSelectedTabIndex,
|
|
54
|
+
theme
|
|
55
|
+
} = props; //Uses the default mui theme if none is passed.
|
|
56
|
+
|
|
57
|
+
const compTheme = theme ? theme : useTheme();
|
|
58
|
+
const defaultTheme = createTheme(compTheme);
|
|
59
|
+
|
|
60
|
+
const handleChange = (event, newValue) => {
|
|
61
|
+
setSelectedTabIndex(newValue);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const a11yProps = index => {
|
|
65
|
+
return {
|
|
66
|
+
id: `scrollable-auto-tab-${index}`,
|
|
67
|
+
'aria-controls': `scrollable-auto-tabpanel-${index}`
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
|
|
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
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
98
|
+
theme: defaultTheme
|
|
99
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
100
|
+
className: "flex flex-col w-full h-full overflow-hidden"
|
|
101
|
+
}, /*#__PURE__*/React.createElement(AppBar, {
|
|
102
|
+
position: "static",
|
|
103
|
+
color: "default",
|
|
104
|
+
elevation: 0,
|
|
105
|
+
style: {
|
|
106
|
+
backgroundColor: 'white'
|
|
107
|
+
}
|
|
108
|
+
}, /*#__PURE__*/React.createElement(Tabs, {
|
|
109
|
+
value: selectedTabIndex,
|
|
110
|
+
onChange: handleChange,
|
|
111
|
+
indicatorColor: "primary",
|
|
112
|
+
textColor: "primary",
|
|
113
|
+
variant: "scrollable",
|
|
114
|
+
scrollButtons: "auto",
|
|
115
|
+
"aria-label": ""
|
|
116
|
+
}, childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(Tab, _extends({
|
|
117
|
+
label: ct.tabTitle
|
|
118
|
+
}, a11yProps(idx), {
|
|
119
|
+
key: `simple_tabs_${idx}`
|
|
120
|
+
}))))), childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(TabPanel, {
|
|
121
|
+
value: selectedTabIndex,
|
|
122
|
+
index: idx,
|
|
123
|
+
key: `simple_tabs_panels_${idx}`
|
|
124
|
+
}, ct.tabPanel))));
|
|
125
|
+
};
|
|
126
|
+
export default SimpleTab;
|
|
@@ -3,15 +3,16 @@ import PCMScrollbar from '../../Tools/PCMScrollbar';
|
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import Split from 'react-split-it';
|
|
5
5
|
import './style.css';
|
|
6
|
-
3;
|
|
7
6
|
/**
|
|
8
|
-
* This component allows you to display a two column split (50-50) layout with proper outer wrapping display both columns with individual scrolling and still having the main wrapper keep it's full size without scrolling
|
|
7
|
+
* This component allows you to display a two column split (50-50) layout with proper outer wrapping display both columns with individual scrolling and still having the main wrapper keep it's full size without scrolling over scan scrolling in the page.
|
|
9
8
|
*
|
|
10
9
|
* ### Importing the component
|
|
11
10
|
|
|
12
11
|
```//PitchCamp shared component
|
|
13
12
|
import {TwoColumnDisplay} from 'pcm-shared-components';
|
|
14
13
|
```
|
|
14
|
+
|
|
15
|
+
### Using the component
|
|
15
16
|
```//PitchCamp shared component
|
|
16
17
|
<TwoColumnDisplay
|
|
17
18
|
ColumnOne={ReactComp}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Link from '@mui/material/Link';
|
|
3
|
+
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import { ThemeProvider } from '@mui/system';
|
|
6
|
+
import { createTheme, useTheme } from '@mui/material/styles';
|
|
7
|
+
import Tooltip from '@mui/material/Tooltip';
|
|
8
|
+
import clsx from 'clsx';
|
|
9
|
+
/**
|
|
10
|
+
* Uses a predefined link style that should be reused throughout the application when a text link is needed to another page on the internet. This will open a _blank page when the link is clicked. To control the style of the text simply pass in additional className to the component.
|
|
11
|
+
*
|
|
12
|
+
*
|
|
13
|
+
* ### Importing the component
|
|
14
|
+
|
|
15
|
+
```//PitchCamp shared component
|
|
16
|
+
import {HrefLink} from 'pcm-shared-components';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
*
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
export const HrefLink = props => {
|
|
23
|
+
const {
|
|
24
|
+
href,
|
|
25
|
+
className,
|
|
26
|
+
tooltipText,
|
|
27
|
+
text,
|
|
28
|
+
theme
|
|
29
|
+
} = props;
|
|
30
|
+
const compTheme = theme ? theme : useTheme();
|
|
31
|
+
const defaultTheme = createTheme(compTheme);
|
|
32
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
33
|
+
theme: defaultTheme
|
|
34
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
35
|
+
title: tooltipText
|
|
36
|
+
}, /*#__PURE__*/React.createElement("a", {
|
|
37
|
+
className: clsx('no-underline hover:underline ', className),
|
|
38
|
+
href: href,
|
|
39
|
+
target: "_blank"
|
|
40
|
+
}, text)));
|
|
41
|
+
};
|
|
42
|
+
export default HrefLink;
|
|
43
|
+
HrefLink.defaultProps = {
|
|
44
|
+
href: '',
|
|
45
|
+
className: '',
|
|
46
|
+
tooltipText: '',
|
|
47
|
+
size: 'large',
|
|
48
|
+
Icon: undefined,
|
|
49
|
+
children: /*#__PURE__*/React.createElement(React.Fragment, null, "undefined"),
|
|
50
|
+
theme: undefined
|
|
51
|
+
};
|
|
52
|
+
HrefLink.propTypes = {
|
|
53
|
+
/** On click link, it's the URL to navigate too */
|
|
54
|
+
href: PropTypes.string.isRequired,
|
|
55
|
+
|
|
56
|
+
/** className override */
|
|
57
|
+
className: PropTypes.string,
|
|
58
|
+
|
|
59
|
+
/** Just a tooltip text */
|
|
60
|
+
tooltipText: PropTypes.string,
|
|
61
|
+
|
|
62
|
+
/** Any text to display as a link*/
|
|
63
|
+
text: PropTypes.string,
|
|
64
|
+
|
|
65
|
+
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
|
|
66
|
+
theme: PropTypes.object
|
|
67
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -8,4 +8,6 @@ import PcSharedComponentThemeInheritor from './components/PcSharedComponentTheme
|
|
|
8
8
|
import ImageCanvasDraw from './components/Drawing/ImageCanvasDraw';
|
|
9
9
|
import PCMScrollbar from './components/Tools/PCMScrollbar';
|
|
10
10
|
import TwoColumnDisplay from './components/Layout/TwoColumnDisplay';
|
|
11
|
-
|
|
11
|
+
import SimpleTab from './components/Layout/SimpleTab';
|
|
12
|
+
import HrefLink from './components/Links/HrefLink';
|
|
13
|
+
export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink };
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{--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: }.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-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}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.mb-6{margin-bottom:.6rem}.ml-6{margin-left:.6rem}.mr-12{margin-right:1.2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-1\/2{width:50%}.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{-ms-scroll-chaining:none;overscroll-behavior:none}.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))}.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-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pl-16{padding-left:1.6rem}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-2xl{font-size:2.4rem;line-height:3.2rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.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}.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}
|
|
1
|
+
*,:after,:before{--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-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}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.mb-6{margin-bottom:.6rem}.ml-6{margin-left:.6rem}.mr-12{margin-right:1.2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-1\/2{width:50%}.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{-ms-scroll-chaining:none;overscroll-behavior:none}.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))}.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-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pl-16{padding-left:1.6rem}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-2xl{font-size:2.4rem;line-height:3.2rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/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\: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}
|