@m4l/graphics 0.0.16 → 0.0.20
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/commonjs.js +1 -0
- package/dist/components/Page/index.js +31 -0
- package/dist/components/ProgressBarStyle/index.js +34 -0
- package/dist/components/index.js +4 -1318
- package/dist/contexts/HostThemeContext/index.js +71 -0
- package/dist/contexts/LocalesContext/index.js +46 -0
- package/dist/contexts/index.js +3 -174
- package/dist/hooks/index.js +6 -40
- package/dist/hooks/useHostTheme/index.js +9 -0
- package/dist/hooks/useLocales/index.js +9 -0
- package/dist/hooks/useResponsive/index.js +26 -0
- package/dist/index.js +23 -1654
- package/dist/lib/components/Page/index.d.ts +3 -9
- package/dist/lib/components/Page/types.d.ts +7 -0
- package/dist/lib/components/{ProgressBar → ProgressBarStyle}/index.d.ts +0 -1
- package/dist/lib/components/index.d.ts +1 -6
- package/dist/lib/hooks/useHostTheme/index.d.ts +1 -0
- package/dist/lib/hooks/useLocales/index.d.ts +1 -0
- package/dist/lib/hooks/{useResponsive.d.ts → useResponsive/index.d.ts} +0 -0
- package/dist/lib/index.d.ts +0 -1
- package/dist/lib/theme/palette.d.ts +1 -2
- package/dist/lib/theme/typography.d.ts +1 -2
- package/dist/lib/utils/getFontValue.d.ts +1 -1
- package/dist/react-helmet-async-invariant.js +19 -0
- package/dist/react-helmet-async-react-fast-compare.js +90 -0
- package/dist/react-helmet-async-shallowequal.js +32 -0
- package/dist/react-helmet-async.js +363 -0
- package/dist/theme/defaultThemeOptions.js +32 -0
- package/dist/theme/overrides.js +1248 -0
- package/dist/theme/palette.js +133 -0
- package/dist/theme/shadows.js +65 -0
- package/dist/theme/typography.js +87 -0
- package/dist/utils/index.js +91 -0
- package/package.json +1 -7
- package/dist/components/mui_extended/index.js +0 -53
- package/dist/layouts/index.js +0 -39
- package/dist/lib/components/CompanyLogo/index.d.ts +0 -3
- package/dist/lib/components/CompanyLogo/styles.d.ts +0 -5
- package/dist/lib/components/CompanyLogo/types.d.ts +0 -6
- package/dist/lib/components/Image/index.d.ts +0 -3
- package/dist/lib/components/Image/styles.d.ts +0 -5
- package/dist/lib/components/Image/types.d.ts +0 -19
- package/dist/lib/components/LanguagePopover/index.d.ts +0 -3
- package/dist/lib/components/LanguagePopover/types.d.ts +0 -3
- package/dist/lib/components/LinkWithRoute/index.d.ts +0 -3
- package/dist/lib/components/LinkWithRoute/types.d.ts +0 -7
- package/dist/lib/components/Loadable/index.d.ts +0 -2
- package/dist/lib/components/Typography/index.d.ts +0 -3
- package/dist/lib/components/Typography/types.d.ts +0 -5
- package/dist/lib/components/animate/DialogAnimate.d.ts +0 -7
- package/dist/lib/components/animate/FabButtonAnimate.d.ts +0 -8
- package/dist/lib/components/animate/IconButtonAnimate/index.d.ts +0 -4
- package/dist/lib/components/animate/MotionContainer.d.ts +0 -10
- package/dist/lib/components/animate/MotionInView.d.ts +0 -9
- package/dist/lib/components/animate/MotionLazyContainer.d.ts +0 -6
- package/dist/lib/components/animate/TextAnimate.d.ts +0 -9
- package/dist/lib/components/animate/index.d.ts +0 -8
- package/dist/lib/components/animate/type.d.ts +0 -26
- package/dist/lib/components/animate/variants/actions.d.ts +0 -5
- package/dist/lib/components/animate/variants/background.d.ts +0 -104
- package/dist/lib/components/animate/variants/bounce.d.ts +0 -136
- package/dist/lib/components/animate/variants/container.d.ts +0 -19
- package/dist/lib/components/animate/variants/fade.d.ts +0 -217
- package/dist/lib/components/animate/variants/flip.d.ts +0 -75
- package/dist/lib/components/animate/variants/index.d.ts +0 -12
- package/dist/lib/components/animate/variants/path.d.ts +0 -14
- package/dist/lib/components/animate/variants/rotate.d.ts +0 -39
- package/dist/lib/components/animate/variants/scale.d.ts +0 -75
- package/dist/lib/components/animate/variants/slide.d.ts +0 -155
- package/dist/lib/components/animate/variants/transition.d.ts +0 -13
- package/dist/lib/components/animate/variants/zoom.d.ts +0 -199
- package/dist/lib/components/mui_extended/LoadingButton/index.d.ts +0 -3
- package/dist/lib/components/mui_extended/LoadingButton/skeleton.d.ts +0 -2
- package/dist/lib/components/mui_extended/LoadingButton/styles.d.ts +0 -2
- package/dist/lib/components/mui_extended/LoadingButton/types.d.ts +0 -5
- package/dist/lib/components/mui_extended/Typography/index.d.ts +0 -3
- package/dist/lib/components/mui_extended/Typography/types.d.ts +0 -5
- package/dist/lib/components/mui_extended/index.d.ts +0 -37
- package/dist/lib/hooks/useHostTheme.d.ts +0 -1
- package/dist/lib/hooks/useLocales.d.ts +0 -1
- package/dist/lib/layouts/NoAuthModuleLayout/components/ModuleWrapper/index.d.ts +0 -3
- package/dist/lib/layouts/NoAuthModuleLayout/components/ModuleWrapper/styles.d.ts +0 -13
- package/dist/lib/layouts/NoAuthModuleLayout/components/ModuleWrapper/types.d.ts +0 -4
- package/dist/lib/layouts/NoAuthModuleLayout/contexts/NoAuthModuleContext/index.d.ts +0 -5
- package/dist/lib/layouts/NoAuthModuleLayout/contexts/NoAuthModuleContext/types.d.ts +0 -12
- package/dist/lib/layouts/NoAuthModuleLayout/index.d.ts +0 -3
- package/dist/lib/layouts/NoAuthModuleLayout/types.d.ts +0 -11
- package/dist/lib/layouts/index.d.ts +0 -1
- package/dist/node_modules.js +0 -150
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { alpha } from "@mui/material/styles";
|
|
2
|
+
function createGradient(color1, color2) {
|
|
3
|
+
return `linear-gradient(to bottom, ${color1}, ${color2})`;
|
|
4
|
+
}
|
|
5
|
+
const PRIMARY = {
|
|
6
|
+
lighter: "#C8FACD",
|
|
7
|
+
light: "#5BE584",
|
|
8
|
+
main: "#00AB55",
|
|
9
|
+
dark: "#007B55",
|
|
10
|
+
darker: "#005249"
|
|
11
|
+
};
|
|
12
|
+
const SECONDARY = {
|
|
13
|
+
lighter: "#D6E4FF",
|
|
14
|
+
light: "#84A9FF",
|
|
15
|
+
main: "#3366FF",
|
|
16
|
+
dark: "#1939B7",
|
|
17
|
+
darker: "#091A7A"
|
|
18
|
+
};
|
|
19
|
+
const INFO = {
|
|
20
|
+
lighter: "#D0F2FF",
|
|
21
|
+
light: "#74CAFF",
|
|
22
|
+
main: "#1890FF",
|
|
23
|
+
dark: "#0C53B7",
|
|
24
|
+
darker: "#04297A"
|
|
25
|
+
};
|
|
26
|
+
const SUCCESS = {
|
|
27
|
+
lighter: "#E9FCD4",
|
|
28
|
+
light: "#AAF27F",
|
|
29
|
+
main: "#54D62C",
|
|
30
|
+
dark: "#229A16",
|
|
31
|
+
darker: "#08660D"
|
|
32
|
+
};
|
|
33
|
+
const WARNING = {
|
|
34
|
+
lighter: "#FFF7CD",
|
|
35
|
+
light: "#FFE16A",
|
|
36
|
+
main: "#FFC107",
|
|
37
|
+
dark: "#B78103",
|
|
38
|
+
darker: "#7A4F01"
|
|
39
|
+
};
|
|
40
|
+
const ERROR = {
|
|
41
|
+
lighter: "#FFE7D9",
|
|
42
|
+
light: "#FFA48D",
|
|
43
|
+
main: "#FF4842",
|
|
44
|
+
dark: "#B72136",
|
|
45
|
+
darker: "#7A0C2E"
|
|
46
|
+
};
|
|
47
|
+
const GREY = {
|
|
48
|
+
0: "#FFFFFF",
|
|
49
|
+
100: "#F9FAFB",
|
|
50
|
+
200: "#F4F6F8",
|
|
51
|
+
300: "#DFE3E8",
|
|
52
|
+
400: "#C4CDD5",
|
|
53
|
+
500: "#919EAB",
|
|
54
|
+
600: "#637381",
|
|
55
|
+
700: "#454F5B",
|
|
56
|
+
800: "#212B36",
|
|
57
|
+
900: "#161C24",
|
|
58
|
+
5008: alpha("#919EAB", 0.08),
|
|
59
|
+
50012: alpha("#919EAB", 0.12),
|
|
60
|
+
50016: alpha("#919EAB", 0.16),
|
|
61
|
+
50024: alpha("#919EAB", 0.24),
|
|
62
|
+
50032: alpha("#919EAB", 0.32),
|
|
63
|
+
50048: alpha("#919EAB", 0.48),
|
|
64
|
+
50056: alpha("#919EAB", 0.56),
|
|
65
|
+
50080: alpha("#919EAB", 0.8)
|
|
66
|
+
};
|
|
67
|
+
const GRADIENTS = {
|
|
68
|
+
primary: createGradient(PRIMARY.light, PRIMARY.main),
|
|
69
|
+
info: createGradient(INFO.light, INFO.main),
|
|
70
|
+
success: createGradient(SUCCESS.light, SUCCESS.main),
|
|
71
|
+
warning: createGradient(WARNING.light, WARNING.main),
|
|
72
|
+
error: createGradient(ERROR.light, ERROR.main)
|
|
73
|
+
};
|
|
74
|
+
const CHART_COLORS = {
|
|
75
|
+
violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
|
|
76
|
+
blue: ["#2D99FF", "#83CFFF", "#A5F3FF", "#CCFAFF"],
|
|
77
|
+
green: ["#2CD9C5", "#60F1C8", "#A4F7CC", "#C0F2DC"],
|
|
78
|
+
yellow: ["#FFE700", "#FFEF5A", "#FFF7AE", "#FFF3D6"],
|
|
79
|
+
red: ["#FF6C40", "#FF8F6D", "#FFBD98", "#FFF2D4"]
|
|
80
|
+
};
|
|
81
|
+
const COMMON = {
|
|
82
|
+
common: { black: "#000", white: "#fff" },
|
|
83
|
+
primary: { ...PRIMARY, contrastText: "#fff" },
|
|
84
|
+
secondary: { ...SECONDARY, contrastText: "#fff" },
|
|
85
|
+
info: { ...INFO, contrastText: "#fff" },
|
|
86
|
+
success: { ...SUCCESS, contrastText: GREY[800] },
|
|
87
|
+
warning: { ...WARNING, contrastText: GREY[800] },
|
|
88
|
+
error: { ...ERROR, contrastText: "#fff" },
|
|
89
|
+
grey: GREY,
|
|
90
|
+
gradients: GRADIENTS,
|
|
91
|
+
chart: CHART_COLORS,
|
|
92
|
+
divider: GREY[50024],
|
|
93
|
+
action: {
|
|
94
|
+
hover: GREY[5008],
|
|
95
|
+
selected: GREY[50016],
|
|
96
|
+
disabled: GREY[50080],
|
|
97
|
+
disabledBackground: GREY[50024],
|
|
98
|
+
focus: GREY[50024],
|
|
99
|
+
hoverOpacity: 0.08,
|
|
100
|
+
disabledOpacity: 0.48
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
const palette = {
|
|
104
|
+
light: {
|
|
105
|
+
...COMMON,
|
|
106
|
+
mode: "light",
|
|
107
|
+
text: { primary: GREY[800], secondary: GREY[700], disabled: GREY[500] },
|
|
108
|
+
background: {
|
|
109
|
+
paper: "#fff",
|
|
110
|
+
default: "#fff",
|
|
111
|
+
neutral: GREY[200],
|
|
112
|
+
autocomplete: GREY[100],
|
|
113
|
+
header: "#F6F7F9"
|
|
114
|
+
},
|
|
115
|
+
action: { active: GREY[600], ...COMMON.action },
|
|
116
|
+
grid: { sectionHeader: "#F6F7F9", divider: "#EDEFF2", rowHover: "#FAFBFC" }
|
|
117
|
+
},
|
|
118
|
+
dark: {
|
|
119
|
+
...COMMON,
|
|
120
|
+
mode: "dark",
|
|
121
|
+
text: { primary: "#fff", secondary: GREY[500], disabled: GREY[600] },
|
|
122
|
+
background: {
|
|
123
|
+
paper: GREY[800],
|
|
124
|
+
default: GREY[900],
|
|
125
|
+
neutral: GREY[50016],
|
|
126
|
+
autocomplete: GREY[800],
|
|
127
|
+
header: "#29313A"
|
|
128
|
+
},
|
|
129
|
+
action: { active: GREY[500], ...COMMON.action },
|
|
130
|
+
grid: { sectionHeader: "#29313A", divider: "#3E464F", rowHover: "#1F262F" }
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
export { GREY as G, palette as p };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { alpha } from "@mui/material/styles";
|
|
2
|
+
import { p as palette } from "./palette.js";
|
|
3
|
+
const LIGHT_MODE = palette.light.grey[500];
|
|
4
|
+
const DARK_MODE = "#000000";
|
|
5
|
+
const createShadow = (color) => {
|
|
6
|
+
const transparent1 = alpha(color, 0.2);
|
|
7
|
+
const transparent2 = alpha(color, 0.14);
|
|
8
|
+
const transparent3 = alpha(color, 0.12);
|
|
9
|
+
return [
|
|
10
|
+
"none",
|
|
11
|
+
`0px 2px 1px -1px ${transparent1},0px 1px 1px 0px ${transparent2},0px 1px 3px 0px ${transparent3}`,
|
|
12
|
+
`0px 3px 1px -2px ${transparent1},0px 2px 2px 0px ${transparent2},0px 1px 5px 0px ${transparent3}`,
|
|
13
|
+
`0px 3px 3px -2px ${transparent1},0px 3px 4px 0px ${transparent2},0px 1px 8px 0px ${transparent3}`,
|
|
14
|
+
`0px 2px 4px -1px ${transparent1},0px 4px 5px 0px ${transparent2},0px 1px 10px 0px ${transparent3}`,
|
|
15
|
+
`0px 3px 5px -1px ${transparent1},0px 5px 8px 0px ${transparent2},0px 1px 14px 0px ${transparent3}`,
|
|
16
|
+
`0px 3px 5px -1px ${transparent1},0px 6px 10px 0px ${transparent2},0px 1px 18px 0px ${transparent3}`,
|
|
17
|
+
`0px 4px 5px -2px ${transparent1},0px 7px 10px 1px ${transparent2},0px 2px 16px 1px ${transparent3}`,
|
|
18
|
+
`0px 5px 5px -3px ${transparent1},0px 8px 10px 1px ${transparent2},0px 3px 14px 2px ${transparent3}`,
|
|
19
|
+
`0px 5px 6px -3px ${transparent1},0px 9px 12px 1px ${transparent2},0px 3px 16px 2px ${transparent3}`,
|
|
20
|
+
`0px 6px 6px -3px ${transparent1},0px 10px 14px 1px ${transparent2},0px 4px 18px 3px ${transparent3}`,
|
|
21
|
+
`0px 6px 7px -4px ${transparent1},0px 11px 15px 1px ${transparent2},0px 4px 20px 3px ${transparent3}`,
|
|
22
|
+
`0px 7px 8px -4px ${transparent1},0px 12px 17px 2px ${transparent2},0px 5px 22px 4px ${transparent3}`,
|
|
23
|
+
`0px 7px 8px -4px ${transparent1},0px 13px 19px 2px ${transparent2},0px 5px 24px 4px ${transparent3}`,
|
|
24
|
+
`0px 7px 9px -4px ${transparent1},0px 14px 21px 2px ${transparent2},0px 5px 26px 4px ${transparent3}`,
|
|
25
|
+
`0px 8px 9px -5px ${transparent1},0px 15px 22px 2px ${transparent2},0px 6px 28px 5px ${transparent3}`,
|
|
26
|
+
`0px 8px 10px -5px ${transparent1},0px 16px 24px 2px ${transparent2},0px 6px 30px 5px ${transparent3}`,
|
|
27
|
+
`0px 8px 11px -5px ${transparent1},0px 17px 26px 2px ${transparent2},0px 6px 32px 5px ${transparent3}`,
|
|
28
|
+
`0px 9px 11px -5px ${transparent1},0px 18px 28px 2px ${transparent2},0px 7px 34px 6px ${transparent3}`,
|
|
29
|
+
`0px 9px 12px -6px ${transparent1},0px 19px 29px 2px ${transparent2},0px 7px 36px 6px ${transparent3}`,
|
|
30
|
+
`0px 10px 13px -6px ${transparent1},0px 20px 31px 3px ${transparent2},0px 8px 38px 7px ${transparent3}`,
|
|
31
|
+
`0px 10px 13px -6px ${transparent1},0px 21px 33px 3px ${transparent2},0px 8px 40px 7px ${transparent3}`,
|
|
32
|
+
`0px 10px 14px -6px ${transparent1},0px 22px 35px 3px ${transparent2},0px 8px 42px 7px ${transparent3}`,
|
|
33
|
+
`0px 11px 14px -7px ${transparent1},0px 23px 36px 3px ${transparent2},0px 9px 44px 8px ${transparent3}`,
|
|
34
|
+
`0px 11px 15px -7px ${transparent1},0px 24px 38px 3px ${transparent2},0px 9px 46px 8px ${transparent3}`
|
|
35
|
+
];
|
|
36
|
+
};
|
|
37
|
+
const createCustomShadow = (color) => {
|
|
38
|
+
const transparent = alpha(color, 0.16);
|
|
39
|
+
return {
|
|
40
|
+
z1: `0 1px 2px 0 ${transparent}`,
|
|
41
|
+
z8: `0 8px 16px 0 ${transparent}`,
|
|
42
|
+
z12: `0 12px 24px -4px ${transparent}`,
|
|
43
|
+
z16: `0 16px 32px -4px ${transparent}`,
|
|
44
|
+
z20: `0 20px 40px -4px ${transparent}`,
|
|
45
|
+
z24: `0 24px 48px 0 ${transparent}`,
|
|
46
|
+
primary: `0 8px 16px 0 ${alpha(palette.light.primary.main, 0.24)}`,
|
|
47
|
+
info: `0 8px 16px 0 ${alpha(palette.light.info.main, 0.24)}`,
|
|
48
|
+
secondary: `0 8px 16px 0 ${alpha(palette.light.secondary.main, 0.24)}`,
|
|
49
|
+
success: `0 8px 16px 0 ${alpha(palette.light.success.main, 0.24)}`,
|
|
50
|
+
warning: `0 8px 16px 0 ${alpha(palette.light.warning.main, 0.24)}`,
|
|
51
|
+
error: `0 8px 16px 0 ${alpha(palette.light.error.main, 0.24)}`,
|
|
52
|
+
card: `0 0 2px 0 ${alpha(color, 0.2)}, 0 12px 24px -4px ${alpha(color, 0.12)}`,
|
|
53
|
+
dialog: `-40px 40px 80px -8px ${alpha(palette.light.common.black, 0.24)}`,
|
|
54
|
+
dropdown: `0 0 2px 0 ${alpha(color, 0.24)}, -20px 20px 40px -4px ${alpha(color, 0.24)}`
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
const customShadows = {
|
|
58
|
+
light: createCustomShadow(LIGHT_MODE),
|
|
59
|
+
dark: createCustomShadow(DARK_MODE)
|
|
60
|
+
};
|
|
61
|
+
const shadows = {
|
|
62
|
+
light: createShadow(LIGHT_MODE),
|
|
63
|
+
dark: createShadow(DARK_MODE)
|
|
64
|
+
};
|
|
65
|
+
export { customShadows as c, shadows as s };
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { p as pxToRem, r as responsiveFontSizes } from "../utils/index.js";
|
|
2
|
+
const FONT_PRIMARY = "Public Sans, sans-serif";
|
|
3
|
+
const typography = {
|
|
4
|
+
fontFamily: FONT_PRIMARY,
|
|
5
|
+
fontWeightRegular: 400,
|
|
6
|
+
fontWeightMedium: 600,
|
|
7
|
+
fontWeightBold: 700,
|
|
8
|
+
h1: {
|
|
9
|
+
fontWeight: 700,
|
|
10
|
+
lineHeight: 80 / 64,
|
|
11
|
+
fontSize: pxToRem(40),
|
|
12
|
+
letterSpacing: 2,
|
|
13
|
+
...responsiveFontSizes({ sm: 52, md: 58, lg: 64 })
|
|
14
|
+
},
|
|
15
|
+
h2: {
|
|
16
|
+
fontWeight: 700,
|
|
17
|
+
lineHeight: 64 / 48,
|
|
18
|
+
fontSize: pxToRem(32),
|
|
19
|
+
...responsiveFontSizes({ sm: 40, md: 44, lg: 48 })
|
|
20
|
+
},
|
|
21
|
+
h3: {
|
|
22
|
+
fontWeight: 700,
|
|
23
|
+
lineHeight: 1.5,
|
|
24
|
+
fontSize: pxToRem(24),
|
|
25
|
+
...responsiveFontSizes({ sm: 26, md: 30, lg: 32 })
|
|
26
|
+
},
|
|
27
|
+
h4: {
|
|
28
|
+
fontWeight: 700,
|
|
29
|
+
lineHeight: 1.5,
|
|
30
|
+
fontSize: pxToRem(20),
|
|
31
|
+
...responsiveFontSizes({ sm: 20, md: 24, lg: 24 })
|
|
32
|
+
},
|
|
33
|
+
h5: {
|
|
34
|
+
fontWeight: 700,
|
|
35
|
+
lineHeight: 1.5,
|
|
36
|
+
fontSize: pxToRem(18),
|
|
37
|
+
...responsiveFontSizes({ sm: 19, md: 20, lg: 20 })
|
|
38
|
+
},
|
|
39
|
+
h6: {
|
|
40
|
+
fontWeight: 700,
|
|
41
|
+
lineHeight: 28 / 18,
|
|
42
|
+
fontSize: pxToRem(17),
|
|
43
|
+
...responsiveFontSizes({ sm: 18, md: 18, lg: 18 })
|
|
44
|
+
},
|
|
45
|
+
subtitle1: {
|
|
46
|
+
fontWeight: 600,
|
|
47
|
+
lineHeight: 1.5,
|
|
48
|
+
fontSize: pxToRem(14)
|
|
49
|
+
},
|
|
50
|
+
subtitle2: {
|
|
51
|
+
fontWeight: 600,
|
|
52
|
+
lineHeight: 1.5,
|
|
53
|
+
fontSize: pxToRem(12)
|
|
54
|
+
},
|
|
55
|
+
body0: {
|
|
56
|
+
lineHeight: 1.5,
|
|
57
|
+
fontWeight: 400,
|
|
58
|
+
fontSize: pxToRem(16)
|
|
59
|
+
},
|
|
60
|
+
body1: {
|
|
61
|
+
lineHeight: 1.5,
|
|
62
|
+
fontWeight: 400,
|
|
63
|
+
fontSize: pxToRem(14)
|
|
64
|
+
},
|
|
65
|
+
body2: {
|
|
66
|
+
lineHeight: 1.5,
|
|
67
|
+
fontWeight: 400,
|
|
68
|
+
fontSize: pxToRem(12)
|
|
69
|
+
},
|
|
70
|
+
caption: {
|
|
71
|
+
lineHeight: 1.5,
|
|
72
|
+
fontSize: pxToRem(11)
|
|
73
|
+
},
|
|
74
|
+
overline: {
|
|
75
|
+
fontWeight: 700,
|
|
76
|
+
lineHeight: 1.5,
|
|
77
|
+
fontSize: pxToRem(12),
|
|
78
|
+
textTransform: "uppercase"
|
|
79
|
+
},
|
|
80
|
+
button: {
|
|
81
|
+
fontWeight: 700,
|
|
82
|
+
lineHeight: 24 / 14,
|
|
83
|
+
fontSize: pxToRem(14),
|
|
84
|
+
textTransform: "capitalize"
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
export { typography as t };
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import "@mui/material/styles";
|
|
2
|
+
import "@mui/material/useMediaQuery";
|
|
3
|
+
import { p as palette } from "../theme/palette.js";
|
|
4
|
+
function pxToRem(value) {
|
|
5
|
+
return `${value / 16}rem`;
|
|
6
|
+
}
|
|
7
|
+
function responsiveFontSizes({ sm, md, lg }) {
|
|
8
|
+
return {
|
|
9
|
+
"@media (min-width:600px)": {
|
|
10
|
+
fontSize: pxToRem(sm)
|
|
11
|
+
},
|
|
12
|
+
"@media (min-width:900px)": {
|
|
13
|
+
fontSize: pxToRem(md)
|
|
14
|
+
},
|
|
15
|
+
"@media (min-width:1200px)": {
|
|
16
|
+
fontSize: pxToRem(lg)
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
const colorPresets = [
|
|
21
|
+
{
|
|
22
|
+
name: "default",
|
|
23
|
+
...palette.light.primary,
|
|
24
|
+
LightSelected: "#EBF9F1",
|
|
25
|
+
LightSelectedHover: "#D6F2E3",
|
|
26
|
+
DarkSelected: "#142827",
|
|
27
|
+
DarkSelectedHover: "#12342B"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
name: "purple",
|
|
31
|
+
lighter: "#EBD6FD",
|
|
32
|
+
light: "#B985F4",
|
|
33
|
+
main: "#7635dc",
|
|
34
|
+
dark: "#431A9E",
|
|
35
|
+
darker: "#200A69",
|
|
36
|
+
contrastText: "#fff"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
name: "cyan",
|
|
40
|
+
lighter: "#D1FFFC",
|
|
41
|
+
light: "#76F2FF",
|
|
42
|
+
main: "#1CCAFF",
|
|
43
|
+
dark: "#0E77B7",
|
|
44
|
+
darker: "#053D7A",
|
|
45
|
+
contrastText: palette.light.grey[800]
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: "blue",
|
|
49
|
+
lighter: "#D1E9FC",
|
|
50
|
+
light: "#76B0F1",
|
|
51
|
+
main: "#2065D1",
|
|
52
|
+
dark: "#103996",
|
|
53
|
+
darker: "#061B64",
|
|
54
|
+
contrastText: "#fff"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
name: "orange",
|
|
58
|
+
lighter: "#FEF4D4",
|
|
59
|
+
light: "#FED680",
|
|
60
|
+
main: "#fda92d",
|
|
61
|
+
dark: "#B66816",
|
|
62
|
+
darker: "#793908",
|
|
63
|
+
contrastText: palette.light.grey[800]
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
name: "red",
|
|
67
|
+
lighter: "#FFE3D5",
|
|
68
|
+
light: "#FFC1AC",
|
|
69
|
+
main: "#FF3030",
|
|
70
|
+
dark: "#B71833",
|
|
71
|
+
darker: "#7A0930",
|
|
72
|
+
contrastText: "#fff"
|
|
73
|
+
}
|
|
74
|
+
];
|
|
75
|
+
const defaultPreset = colorPresets[0];
|
|
76
|
+
const purplePreset = colorPresets[1];
|
|
77
|
+
const cyanPreset = colorPresets[2];
|
|
78
|
+
const bluePreset = colorPresets[3];
|
|
79
|
+
const orangePreset = colorPresets[4];
|
|
80
|
+
const redPreset = colorPresets[5];
|
|
81
|
+
function getColorPresets(presetsKey) {
|
|
82
|
+
return {
|
|
83
|
+
purple: purplePreset,
|
|
84
|
+
cyan: cyanPreset,
|
|
85
|
+
blue: bluePreset,
|
|
86
|
+
orange: orangePreset,
|
|
87
|
+
red: redPreset,
|
|
88
|
+
default: defaultPreset
|
|
89
|
+
}[presetsKey];
|
|
90
|
+
}
|
|
91
|
+
export { getColorPresets as g, pxToRem as p, responsiveFontSizes as r };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m4l/graphics",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.20",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"author": "M4L Team",
|
|
7
7
|
"scripts": {
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
"react-helmet-async": "^1.3.0",
|
|
25
25
|
"react-hook-form": "^7.31.3",
|
|
26
26
|
"react-intersection-observer": "^9.2.2",
|
|
27
|
-
"react-lazy-load-image-component": "^1.5.4",
|
|
28
27
|
"react-router-dom": "^6.3.0",
|
|
29
28
|
"vite-tsconfig-paths": "^3.5.0"
|
|
30
29
|
},
|
|
@@ -39,14 +38,10 @@
|
|
|
39
38
|
"@m4l/core": "^0.0.27",
|
|
40
39
|
"@mui/icons-material": "^5.8.4",
|
|
41
40
|
"@mui/lab": "^5.0.0-alpha.87",
|
|
42
|
-
"@types/lodash": "^4.14.182",
|
|
43
41
|
"@types/node": "^17.0.40",
|
|
44
42
|
"@types/nprogress": "^0.2.0",
|
|
45
43
|
"@types/react": "^18.0.0",
|
|
46
44
|
"@types/react-dom": "^18.0.0",
|
|
47
|
-
"@types/react-lazy-load-image-component": "^1.5.2",
|
|
48
|
-
"@types/react-resizable": "^3.0.1",
|
|
49
|
-
"@types/react-splitter-layout": "^3.0.2",
|
|
50
45
|
"@typescript-eslint/eslint-plugin": "^5.27.1",
|
|
51
46
|
"@typescript-eslint/parser": "^5.27.1",
|
|
52
47
|
"@vitejs/plugin-react": "^1.3.0",
|
|
@@ -63,7 +58,6 @@
|
|
|
63
58
|
"prettier": "^2.6.2",
|
|
64
59
|
"react": "^18.2.0",
|
|
65
60
|
"react-dom": "^18.2.0",
|
|
66
|
-
"react-json-view": "^1.21.3",
|
|
67
61
|
"react-toastify": "^9.0.5",
|
|
68
62
|
"rollup-plugin-terser": "^7.0.2",
|
|
69
63
|
"typescript": "^4.6.3",
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { LoadingButton as LoadingButton$1 } from "@mui/lab";
|
|
2
|
-
import { Skeleton, Typography as Typography$1 } from "@mui/material";
|
|
3
|
-
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
import { styled } from "@mui/material/styles";
|
|
5
|
-
const WrapperSKTLoadingButton = styled("div")(({
|
|
6
|
-
theme
|
|
7
|
-
}) => ({
|
|
8
|
-
display: "flex",
|
|
9
|
-
width: "100%",
|
|
10
|
-
borderRadius: theme.spacing(1),
|
|
11
|
-
overflow: "hidden"
|
|
12
|
-
}));
|
|
13
|
-
const SKTLoadingButton = () => /* @__PURE__ */ jsx(WrapperSKTLoadingButton, {
|
|
14
|
-
id: "WrapperSKTLoadingButton",
|
|
15
|
-
children: /* @__PURE__ */ jsx(Skeleton, {
|
|
16
|
-
variant: "rectangular",
|
|
17
|
-
width: "100%",
|
|
18
|
-
height: "48px"
|
|
19
|
-
})
|
|
20
|
-
});
|
|
21
|
-
const LoadingButton = (props) => {
|
|
22
|
-
const {
|
|
23
|
-
isSkeleton,
|
|
24
|
-
children,
|
|
25
|
-
...other
|
|
26
|
-
} = props;
|
|
27
|
-
if (isSkeleton) {
|
|
28
|
-
return /* @__PURE__ */ jsx(SKTLoadingButton, {});
|
|
29
|
-
}
|
|
30
|
-
return /* @__PURE__ */ jsx(LoadingButton$1, {
|
|
31
|
-
...other,
|
|
32
|
-
children
|
|
33
|
-
});
|
|
34
|
-
};
|
|
35
|
-
function Typography(props) {
|
|
36
|
-
const {
|
|
37
|
-
skeletonProps = {},
|
|
38
|
-
...other
|
|
39
|
-
} = props;
|
|
40
|
-
const {
|
|
41
|
-
isSkeleton = "false",
|
|
42
|
-
width = "100%",
|
|
43
|
-
height = "14px"
|
|
44
|
-
} = skeletonProps;
|
|
45
|
-
return isSkeleton ? /* @__PURE__ */ jsx(Skeleton, {
|
|
46
|
-
variant: "text",
|
|
47
|
-
width,
|
|
48
|
-
height
|
|
49
|
-
}) : /* @__PURE__ */ jsx(Typography$1, {
|
|
50
|
-
...other
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
export { LoadingButton as L, Typography as T };
|
package/dist/layouts/index.js
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { M as ModuleWrapper } from "../components/index.js";
|
|
2
|
-
import { M as ModuleProvider } from "../contexts/index.js";
|
|
3
|
-
import { FlagsProvider, ModuleDictionaryProvider } from "@m4l/core";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import "@mui/material";
|
|
6
|
-
import "@mui/material/styles";
|
|
7
|
-
import "@mui/material/useMediaQuery";
|
|
8
|
-
import "react";
|
|
9
|
-
import "react-hook-form";
|
|
10
|
-
import "react-lazy-load-image-component";
|
|
11
|
-
import "react-lazy-load-image-component/src/effects/blur.css";
|
|
12
|
-
import "@mui/lab";
|
|
13
|
-
import "../components/mui_extended/index.js";
|
|
14
|
-
import "nprogress";
|
|
15
|
-
import "react-router-dom";
|
|
16
|
-
import "framer-motion";
|
|
17
|
-
const NoAuthModuleLayout = (props) => {
|
|
18
|
-
const {
|
|
19
|
-
moduleId,
|
|
20
|
-
moduleName,
|
|
21
|
-
children,
|
|
22
|
-
componentsDictionary
|
|
23
|
-
} = props;
|
|
24
|
-
return /* @__PURE__ */ jsx(FlagsProvider, {
|
|
25
|
-
children: /* @__PURE__ */ jsx(ModuleDictionaryProvider, {
|
|
26
|
-
isAuth: false,
|
|
27
|
-
moduleId,
|
|
28
|
-
moduleName,
|
|
29
|
-
componentsDictionary,
|
|
30
|
-
children: /* @__PURE__ */ jsx(ModuleProvider, {
|
|
31
|
-
moduleId,
|
|
32
|
-
children: /* @__PURE__ */ jsx(ModuleWrapper, {
|
|
33
|
-
children
|
|
34
|
-
})
|
|
35
|
-
})
|
|
36
|
-
})
|
|
37
|
-
});
|
|
38
|
-
};
|
|
39
|
-
export { NoAuthModuleLayout as N };
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const RootStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
3
|
-
export declare const HeaderStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
|
|
4
|
-
export declare const ContentStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
5
|
-
export declare const SKTCompanyLogoMask: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { styleProps } from './types';
|
|
3
|
-
import { WrapperLazyLoadImageProps } from './types';
|
|
4
|
-
export declare const SKTWrapperImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & styleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
5
|
-
export declare const WrapperLazyLoadImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & WrapperLazyLoadImageProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { LazyLoadImageProps } from 'react-lazy-load-image-component';
|
|
2
|
-
import { BoxProps, SxProps } from '@mui/material';
|
|
3
|
-
import { Theme } from '@mui/material/styles';
|
|
4
|
-
export declare type ImageRato = '4/3' | '3/4' | '6/4' | '4/6' | '16/9' | '9/16' | '21/9' | '9/21' | '1/1';
|
|
5
|
-
export declare type IProps = BoxProps & LazyLoadImageProps;
|
|
6
|
-
export interface Props extends IProps {
|
|
7
|
-
sx?: SxProps<Theme>;
|
|
8
|
-
ratio?: ImageRato;
|
|
9
|
-
isSekeleton?: boolean;
|
|
10
|
-
width?: string;
|
|
11
|
-
height?: string;
|
|
12
|
-
}
|
|
13
|
-
export interface styleProps {
|
|
14
|
-
width?: string;
|
|
15
|
-
}
|
|
16
|
-
export interface WrapperLazyLoadImageProps {
|
|
17
|
-
width?: string | number;
|
|
18
|
-
height?: string | number;
|
|
19
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { DialogProps } from '@mui/material';
|
|
3
|
-
export interface Props extends DialogProps {
|
|
4
|
-
variants?: Record<string, unknown>;
|
|
5
|
-
onClose?: VoidFunction;
|
|
6
|
-
}
|
|
7
|
-
export default function DialogAnimate({ open, variants, onClose, children, sx, ...other }: Props): JSX.Element;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { FabProps, SxProps } from '@mui/material';
|
|
3
|
-
interface Props extends Omit<FabProps, 'color'> {
|
|
4
|
-
sxWrap?: SxProps;
|
|
5
|
-
color?: 'inherit' | 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
|
|
6
|
-
}
|
|
7
|
-
declare const FabButtonAnimate: import("react").ForwardRefExoticComponent<Pick<Props, "value" | "children" | "disabled" | "classes" | "form" | "slot" | "style" | "title" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "variant" | "name" | "type" | "href" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "sxWrap"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
8
|
-
export default FabButtonAnimate;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { IconButtonProps } from '@mui/material';
|
|
3
|
-
declare const IconButtonAnimate: import("react").ForwardRefExoticComponent<Pick<IconButtonProps<"button", {}>, "value" | "children" | "disabled" | "form" | "slot" | "title" | keyof import("@mui/material/OverridableComponent").CommonProps | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "name" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
4
|
-
export default IconButtonAnimate;
|