@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.
Files changed (89) hide show
  1. package/dist/commonjs.js +1 -0
  2. package/dist/components/Page/index.js +31 -0
  3. package/dist/components/ProgressBarStyle/index.js +34 -0
  4. package/dist/components/index.js +4 -1318
  5. package/dist/contexts/HostThemeContext/index.js +71 -0
  6. package/dist/contexts/LocalesContext/index.js +46 -0
  7. package/dist/contexts/index.js +3 -174
  8. package/dist/hooks/index.js +6 -40
  9. package/dist/hooks/useHostTheme/index.js +9 -0
  10. package/dist/hooks/useLocales/index.js +9 -0
  11. package/dist/hooks/useResponsive/index.js +26 -0
  12. package/dist/index.js +23 -1654
  13. package/dist/lib/components/Page/index.d.ts +3 -9
  14. package/dist/lib/components/Page/types.d.ts +7 -0
  15. package/dist/lib/components/{ProgressBar → ProgressBarStyle}/index.d.ts +0 -1
  16. package/dist/lib/components/index.d.ts +1 -6
  17. package/dist/lib/hooks/useHostTheme/index.d.ts +1 -0
  18. package/dist/lib/hooks/useLocales/index.d.ts +1 -0
  19. package/dist/lib/hooks/{useResponsive.d.ts → useResponsive/index.d.ts} +0 -0
  20. package/dist/lib/index.d.ts +0 -1
  21. package/dist/lib/theme/palette.d.ts +1 -2
  22. package/dist/lib/theme/typography.d.ts +1 -2
  23. package/dist/lib/utils/getFontValue.d.ts +1 -1
  24. package/dist/react-helmet-async-invariant.js +19 -0
  25. package/dist/react-helmet-async-react-fast-compare.js +90 -0
  26. package/dist/react-helmet-async-shallowequal.js +32 -0
  27. package/dist/react-helmet-async.js +363 -0
  28. package/dist/theme/defaultThemeOptions.js +32 -0
  29. package/dist/theme/overrides.js +1248 -0
  30. package/dist/theme/palette.js +133 -0
  31. package/dist/theme/shadows.js +65 -0
  32. package/dist/theme/typography.js +87 -0
  33. package/dist/utils/index.js +91 -0
  34. package/package.json +1 -7
  35. package/dist/components/mui_extended/index.js +0 -53
  36. package/dist/layouts/index.js +0 -39
  37. package/dist/lib/components/CompanyLogo/index.d.ts +0 -3
  38. package/dist/lib/components/CompanyLogo/styles.d.ts +0 -5
  39. package/dist/lib/components/CompanyLogo/types.d.ts +0 -6
  40. package/dist/lib/components/Image/index.d.ts +0 -3
  41. package/dist/lib/components/Image/styles.d.ts +0 -5
  42. package/dist/lib/components/Image/types.d.ts +0 -19
  43. package/dist/lib/components/LanguagePopover/index.d.ts +0 -3
  44. package/dist/lib/components/LanguagePopover/types.d.ts +0 -3
  45. package/dist/lib/components/LinkWithRoute/index.d.ts +0 -3
  46. package/dist/lib/components/LinkWithRoute/types.d.ts +0 -7
  47. package/dist/lib/components/Loadable/index.d.ts +0 -2
  48. package/dist/lib/components/Typography/index.d.ts +0 -3
  49. package/dist/lib/components/Typography/types.d.ts +0 -5
  50. package/dist/lib/components/animate/DialogAnimate.d.ts +0 -7
  51. package/dist/lib/components/animate/FabButtonAnimate.d.ts +0 -8
  52. package/dist/lib/components/animate/IconButtonAnimate/index.d.ts +0 -4
  53. package/dist/lib/components/animate/MotionContainer.d.ts +0 -10
  54. package/dist/lib/components/animate/MotionInView.d.ts +0 -9
  55. package/dist/lib/components/animate/MotionLazyContainer.d.ts +0 -6
  56. package/dist/lib/components/animate/TextAnimate.d.ts +0 -9
  57. package/dist/lib/components/animate/index.d.ts +0 -8
  58. package/dist/lib/components/animate/type.d.ts +0 -26
  59. package/dist/lib/components/animate/variants/actions.d.ts +0 -5
  60. package/dist/lib/components/animate/variants/background.d.ts +0 -104
  61. package/dist/lib/components/animate/variants/bounce.d.ts +0 -136
  62. package/dist/lib/components/animate/variants/container.d.ts +0 -19
  63. package/dist/lib/components/animate/variants/fade.d.ts +0 -217
  64. package/dist/lib/components/animate/variants/flip.d.ts +0 -75
  65. package/dist/lib/components/animate/variants/index.d.ts +0 -12
  66. package/dist/lib/components/animate/variants/path.d.ts +0 -14
  67. package/dist/lib/components/animate/variants/rotate.d.ts +0 -39
  68. package/dist/lib/components/animate/variants/scale.d.ts +0 -75
  69. package/dist/lib/components/animate/variants/slide.d.ts +0 -155
  70. package/dist/lib/components/animate/variants/transition.d.ts +0 -13
  71. package/dist/lib/components/animate/variants/zoom.d.ts +0 -199
  72. package/dist/lib/components/mui_extended/LoadingButton/index.d.ts +0 -3
  73. package/dist/lib/components/mui_extended/LoadingButton/skeleton.d.ts +0 -2
  74. package/dist/lib/components/mui_extended/LoadingButton/styles.d.ts +0 -2
  75. package/dist/lib/components/mui_extended/LoadingButton/types.d.ts +0 -5
  76. package/dist/lib/components/mui_extended/Typography/index.d.ts +0 -3
  77. package/dist/lib/components/mui_extended/Typography/types.d.ts +0 -5
  78. package/dist/lib/components/mui_extended/index.d.ts +0 -37
  79. package/dist/lib/hooks/useHostTheme.d.ts +0 -1
  80. package/dist/lib/hooks/useLocales.d.ts +0 -1
  81. package/dist/lib/layouts/NoAuthModuleLayout/components/ModuleWrapper/index.d.ts +0 -3
  82. package/dist/lib/layouts/NoAuthModuleLayout/components/ModuleWrapper/styles.d.ts +0 -13
  83. package/dist/lib/layouts/NoAuthModuleLayout/components/ModuleWrapper/types.d.ts +0 -4
  84. package/dist/lib/layouts/NoAuthModuleLayout/contexts/NoAuthModuleContext/index.d.ts +0 -5
  85. package/dist/lib/layouts/NoAuthModuleLayout/contexts/NoAuthModuleContext/types.d.ts +0 -12
  86. package/dist/lib/layouts/NoAuthModuleLayout/index.d.ts +0 -3
  87. package/dist/lib/layouts/NoAuthModuleLayout/types.d.ts +0 -11
  88. package/dist/lib/layouts/index.d.ts +0 -1
  89. 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.16",
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 };
@@ -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,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { CompanyLogoProps } from './types';
3
- export declare const CompanyLogo: (props: CompanyLogoProps) => JSX.Element;
@@ -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,6 +0,0 @@
1
- declare type LogoSize = 'small' | 'normal';
2
- export interface CompanyLogoProps {
3
- size?: LogoSize;
4
- isSkeleton?: boolean;
5
- }
6
- export {};
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { Props } from './types';
3
- export default function Image({ ratio, sx, isSekeleton, width, height, src, ...other }: Props): JSX.Element;
@@ -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,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { defaultProps } from './types';
3
- export default function LanguagePopover(props: defaultProps): JSX.Element;
@@ -1,3 +0,0 @@
1
- export interface defaultProps {
2
- isSkeleton?: boolean;
3
- }
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { LinkWithRouteProps } from './types';
3
- export declare const LinkWithRoute: (props: LinkWithRouteProps) => JSX.Element;
@@ -1,7 +0,0 @@
1
- import { LinkProps as MuiLinkProps } from '@mui/material';
2
- import { SkeletonProps } from '../../types';
3
- import { To } from 'history';
4
- export interface LinkWithRouteProps extends MuiLinkProps {
5
- to: To;
6
- skeletonProps: SkeletonProps;
7
- }
@@ -1,2 +0,0 @@
1
- import { ElementType } from 'react';
2
- export declare const Loadable: (Component: ElementType) => (props: any) => JSX.Element;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { TypographyProps } from './types';
3
- export declare function Typography(props: TypographyProps): JSX.Element;
@@ -1,5 +0,0 @@
1
- import { TypographyProps as MUITypographyProps } from '@mui/material';
2
- import { SkeletonProps } from '../../types';
3
- export interface TypographyProps extends MUITypographyProps {
4
- skeletonProps?: SkeletonProps;
5
- }
@@ -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;